commit 959b01b9fbfbd014302e2c256f367da0f85ab7f9
Author: sundongyu <2811054731@qq.com>
Date:   Fri May 24 09:16:17 2024 +0800

    ✨ feat:初始化项目

diff --git a/.env b/.env
new file mode 100644
index 0000000..459dac4
--- /dev/null
+++ b/.env
@@ -0,0 +1,21 @@
+# 版本号
+SHOPRO_VERSION = v1.8.3
+
+# 后端接口 - 正式环境（通过 process.env.NODE_ENV 非 development）
+SHOPRO_BASE_URL = http://api-dashboard.yudao.iocoder.cn
+
+# 后端接口 - 测试环境（通过 process.env.NODE_ENV = development）
+SHOPRO_DEV_BASE_URL = http://192.168.1.14:48080
+### SHOPRO_DEV_BASE_URL = http://192.168.1.14:48080
+
+# 后端接口前缀（一般不建议调整）
+SHOPRO_API_PATH = /app-api
+
+# 开发环境运行端口
+SHOPRO_DEV_PORT = 3000
+
+# 客户端静态资源地址 空=默认使用服务端指定的CDN资源地址前缀 | local=本地  |  http(s)://xxx.xxx=自定义静态资源地址前缀
+SHOPRO_STATIC_URL = https://file.sheepjs.com
+
+# 是否开启直播  1 开启直播 | 0 关闭直播 (小程序官方后台未审核开通直播权限时请勿开启)
+SHOPRO_MPLIVE_ON = 0
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..43dda18
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,11 @@
+unpackage/*
+node_modules/*
+.idea/*
+deploy.sh
+.hbuilderx/
+.vscode/
+**/.DS_Store
+yarn.lock
+package-lock.json
+*.keystore
+pnpm-lock.yaml
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..7384df0
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,6 @@
+/unpackage/*
+/node_modules/**
+/uni_modules/**
+/public/*
+**/*.svg
+**/*.sh
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..fe0a3f9
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,10 @@
+{
+  "printWidth": 100,
+  "semi": true,
+  "vueIndentScriptAndStyle": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "proseWrap": "never",
+  "htmlWhitespaceSensitivity": "strict",
+  "endOfLine": "auto"
+}
diff --git a/App.vue b/App.vue
new file mode 100644
index 0000000..862c871
--- /dev/null
+++ b/App.vue
@@ -0,0 +1,39 @@
+<script setup>
+  import { onLaunch, onShow, onError } from '@dcloudio/uni-app';
+  import { ShoproInit } from './sheep';
+
+  onLaunch(() => {
+    // 隐藏原生导航栏 使用自定义底部导航
+    uni.hideTabBar();
+
+    // 加载Shopro底层依赖
+    ShoproInit();
+  });
+
+  onError((err) => {
+    console.log('AppOnError:', err);
+  });
+
+  onShow((options) => {
+    // #ifdef APP-PLUS
+    // 获取urlSchemes参数
+    const args = plus.runtime.arguments;
+    if (args) {
+    }
+
+    // 获取剪贴板
+    uni.getClipboardData({
+      success: (res) => {},
+    });
+    // #endif
+
+    // #ifdef MP-WEIXIN
+    // 确认收货回调结果
+    console.log(options, 'options');
+    // #endif
+  });
+</script>
+
+<style lang="scss">
+  @import '@/sheep/scss/index.scss';
+</style>
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/api/infra/file.js b/api/infra/file.js
new file mode 100644
index 0000000..a4bac46
--- /dev/null
+++ b/api/infra/file.js
@@ -0,0 +1,45 @@
+import { baseUrl, apiPath } from '@/sheep/config';
+
+const FileApi = {
+  // 上传文件
+  uploadFile: (file) => {
+    // TODO 芋艿：访问令牌的接入；
+    const token = uni.getStorageSync('token');
+    uni.showLoading({
+      title: '上传中',
+    });
+    return new Promise((resolve, reject) => {
+      uni.uploadFile({
+        url: baseUrl + apiPath + '/infra/file/upload',
+        filePath: file,
+        name: 'file',
+        header: {
+          // Accept: 'text/json',
+          Accept : '*/*',
+          'tenant-id' :'1',
+          // Authorization:  'Bearer test247',
+        },
+        success: (uploadFileRes) => {
+          let result = JSON.parse(uploadFileRes.data);
+          if (result.error === 1) {
+            uni.showToast({
+              icon: 'none',
+              title: result.msg,
+            });
+          } else {
+            return resolve(result);
+          }
+        },
+        fail: (error) => {
+          console.log('上传失败：', error);
+          return resolve(false);
+        },
+        complete: () => {
+          uni.hideLoading();
+        },
+      });
+    });
+  },
+};
+
+export default FileApi;
diff --git a/api/member/address.js b/api/member/address.js
new file mode 100644
index 0000000..d0c16ce
--- /dev/null
+++ b/api/member/address.js
@@ -0,0 +1,53 @@
+import request from '@/sheep/request';
+
+const AddressApi = {
+  // 获得用户收件地址列表
+  getAddressList: () => {
+    return request({
+      url: '/member/address/list',
+      method: 'GET'
+    });
+  },
+  // 创建用户收件地址
+  createAddress: (data) => {
+    return request({
+      url: '/member/address/create',
+      method: 'POST',
+      data,
+      custom: {
+        showSuccess: true,
+        successMsg: '保存成功'
+      },
+    });
+  },
+  // 更新用户收件地址
+  updateAddress: (data) => {
+    return request({
+      url: '/member/address/update',
+      method: 'PUT',
+      data,
+      custom: {
+        showSuccess: true,
+        successMsg: '更新成功'
+      },
+    });
+  },
+  // 获得用户收件地址
+  getAddress: (id) => {
+    return request({
+      url: '/member/address/get',
+      method: 'GET',
+      params: { id }
+    });
+  },
+  // 删除用户收件地址
+  deleteAddress: (id) => {
+    return request({
+      url: '/member/address/delete',
+      method: 'DELETE',
+      params: { id }
+    });
+  },
+};
+
+export default AddressApi;
diff --git a/api/member/auth.js b/api/member/auth.js
new file mode 100644
index 0000000..a1c0660
--- /dev/null
+++ b/api/member/auth.js
@@ -0,0 +1,132 @@
+import request from '@/sheep/request';
+
+const AuthUtil = {
+  // 使用手机 + 密码登录
+  login: (data) => {
+    return request({
+      url: '/member/auth/login',
+      method: 'POST',
+      data,
+      custom: {
+        showSuccess: true,
+        loadingMsg: '登录中',
+        successMsg: '登录成功',
+      },
+    });
+  },
+  // 使用手机 + 验证码登录
+  smsLogin: (data) => {
+    return request({
+      url: '/member/auth/sms-login',
+      method: 'POST',
+      data,
+      custom: {
+        showSuccess: true,
+        loadingMsg: '登录中',
+        successMsg: '登录成功',
+      },
+    });
+  },
+  // 发送手机验证码
+  sendSmsCode: (mobile, scene) => {
+    return request({
+      url: '/member/auth/send-sms-code',
+      method: 'POST',
+      data: {
+        mobile,
+        scene,
+      },
+      custom: {
+        loadingMsg: '发送中',
+        showSuccess: true,
+        successMsg: '发送成功',
+      },
+    });
+  },
+  // 登出系统
+  logout: () => {
+    return request({
+      url: '/member/auth/logout',
+      method: 'POST',
+    });
+  },
+  // 刷新令牌
+  refreshToken: (refreshToken) => {
+    return request({
+      url: '/member/auth/refresh-token',
+      method: 'POST',
+      params: {
+        refreshToken
+      },
+      custom: {
+        loading: false, // 不用加载中
+        showError: false, // 不展示错误提示
+      },
+    });
+  },
+  // 社交授权的跳转
+  socialAuthRedirect: (type, redirectUri) => {
+    return request({
+      url: '/member/auth/social-auth-redirect',
+      method: 'GET',
+      params: {
+        type,
+        redirectUri,
+      },
+      custom: {
+        showSuccess: true,
+        loadingMsg: '登陆中',
+      },
+    });
+  },
+  // 社交快捷登录
+  socialLogin: (type, code, state) => {
+    return request({
+      url: '/member/auth/social-login',
+      method: 'POST',
+      data: {
+        type,
+        code,
+        state,
+      },
+      custom: {
+        showSuccess: true,
+        loadingMsg: '登陆中',
+      },
+    });
+  },
+  // 微信小程序的一键登录
+  weixinMiniAppLogin: (phoneCode, loginCode, state) => {
+    return request({
+      url: '/member/auth/weixin-mini-app-login',
+      method: 'POST',
+      data: {
+        phoneCode,
+        loginCode,
+        state
+      },
+      custom: {
+        showSuccess: true,
+        loadingMsg: '登陆中',
+        successMsg: '登录成功',
+      },
+    });
+  },
+  // 创建微信 JS SDK 初始化所需的签名
+  createWeixinMpJsapiSignature: (url) => {
+    return request({
+      url: '/member/auth/create-weixin-jsapi-signature',
+      method: 'POST',
+      params: {
+        url
+      },
+      custom: {
+        showError: false,
+        showLoading: false,
+      },
+    })
+  },
+  //
+};
+
+export default AuthUtil;
diff --git a/api/member/point.js b/api/member/point.js
new file mode 100644
index 0000000..188ffd4
--- /dev/null
+++ b/api/member/point.js
@@ -0,0 +1,19 @@
+import request from '@/sheep/request';
+
+const PointApi = {
+  // 获得用户积分记录分页
+  getPointRecordPage: (params) => {
+    if (params.addStatus === undefined) {
+      delete params.addStatus
+    }
+    const queryString = Object.keys(params)
+      .map((key) => encodeURIComponent(key) + '=' + params[key])
+      .join('&');
+    return request({
+      url: `/member/point/record/page?${queryString}`,
+      method: 'GET',
+    });
+  }
+};
+
+export default PointApi;
diff --git a/api/member/signin.js b/api/member/signin.js
new file mode 100644
index 0000000..35169ef
--- /dev/null
+++ b/api/member/signin.js
@@ -0,0 +1,37 @@
+import request from '@/sheep/request';
+
+const SignInApi = {
+  // 获得签到规则列表
+  getSignInConfigList: () => {
+    return request({
+      url: '/member/sign-in/config/list',
+      method: 'GET',
+    });
+  },
+  // 获得个人签到统计
+  getSignInRecordSummary: () => {
+    return request({
+      url: '/member/sign-in/record/get-summary',
+      method: 'GET',
+    });
+  },
+  // 签到
+  createSignInRecord: () => {
+    return request({
+      url: '/member/sign-in/record/create',
+      method: 'POST',
+    });
+  },
+  // 获得签到记录分页
+  getSignRecordPage: (params) => {
+    const queryString = Object.keys(params)
+      .map((key) => encodeURIComponent(key) + '=' + params[key])
+      .join('&');
+    return request({
+      url: `/member/sign-in/record/page?${queryString}`,
+      method: 'GET',
+    });
+  },
+};
+
+export default SignInApi;
\ No newline at end of file
diff --git a/api/member/social.js b/api/member/social.js
new file mode 100644
index 0000000..f7ab259
--- /dev/null
+++ b/api/member/social.js
@@ -0,0 +1,54 @@
+import request from '@/sheep/request';
+
+const SocialApi = {
+  // 获得社交用户
+  getSocialUser: (type) => {
+    return request({
+      url: '/member/social-user/get',
+      method: 'GET',
+      params: {
+        type
+      },
+      custom: {
+        showLoading: false,
+      },
+    });
+  },
+  // 社交绑定
+  socialBind: (type, code, state) => {
+    return request({
+      url: '/member/social-user/bind',
+      method: 'POST',
+      data: {
+        type,
+        code,
+        state
+      },
+      custom: {
+        custom: {
+          showSuccess: true,
+          loadingMsg: '绑定中',
+          successMsg: '绑定成功',
+        },
+      },
+    });
+  },
+  // 社交绑定
+  socialUnbind: (type, openid) => {
+    return request({
+      url: '/member/social-user/unbind',
+      method: 'DELETE',
+      data: {
+        type,
+        openid
+      },
+      custom: {
+        showLoading: false,
+        loadingMsg: '解除绑定',
+        successMsg: '解绑成功',
+      },
+    });
+  },
+};
+
+export default SocialApi;
\ No newline at end of file
diff --git a/api/member/user.js b/api/member/user.js
new file mode 100644
index 0000000..5f06e42
--- /dev/null
+++ b/api/member/user.js
@@ -0,0 +1,85 @@
+import request from '@/sheep/request';
+
+const UserApi = {
+  // 获得基本信息
+  getUserInfo: () => {
+    return request({
+      url: '/member/user/get',
+      method: 'GET',
+      custom: {
+        showLoading: false,
+        auth: true,
+      },
+    });
+  },
+  // 修改基本信息
+  updateUser: (data) => {
+    return request({
+      url: '/member/user/update',
+      method: 'PUT',
+      data,
+      custom: {
+        auth: true,
+        showSuccess: true,
+        successMsg: '更新成功'
+      },
+    });
+  },
+  // 修改用户手机
+  updateUserMobile: (data) => {
+    return request({
+      url: '/member/user/update-mobile',
+      method: 'PUT',
+      data,
+      custom: {
+        loadingMsg: '验证中',
+        showSuccess: true,
+        successMsg: '修改成功'
+      },
+    });
+  },
+  // 基于微信小程序的授权码，修改用户手机
+  updateUserMobileByWeixin: (code) => {
+    return request({
+      url: '/member/user/update-mobile-by-weixin',
+      method: 'PUT',
+      data: {
+        code
+      },
+      custom: {
+        showSuccess: true,
+        loadingMsg: '获取中',
+        successMsg: '修改成功'
+      },
+    });
+  },
+  // 修改密码
+  updateUserPassword: (data) => {
+    return request({
+      url: '/member/user/update-password',
+      method: 'PUT',
+      data,
+      custom: {
+        loadingMsg: '验证中',
+        showSuccess: true,
+        successMsg: '修改成功'
+      },
+    });
+  },
+  // 重置密码
+  resetUserPassword: (data) => {
+    return request({
+      url: '/member/user/reset-password',
+      method: 'PUT',
+      data,
+      custom: {
+        loadingMsg: '验证中',
+        showSuccess: true,
+        successMsg: '修改成功'
+      }
+    });
+  },
+
+};
+
+export default UserApi;
diff --git a/api/migration/app.js b/api/migration/app.js
new file mode 100644
index 0000000..158414f
--- /dev/null
+++ b/api/migration/app.js
@@ -0,0 +1,21 @@
+import request from '@/sheep/request';
+
+// TODO 芋艿：小程序直播还不支持
+export default {
+  //小程序直播
+  mplive: {
+    getRoomList: (ids) =>
+      request({
+        url: 'app/mplive/getRoomList',
+        method: 'GET',
+        params: {
+          ids: ids.join(','),
+        }
+      }),
+    getMpLink: () =>
+      request({
+        url: 'app/mplive/getMpLink',
+        method: 'GET'
+      }),
+  },
+};
diff --git a/api/migration/chat.js b/api/migration/chat.js
new file mode 100644
index 0000000..140dd75
--- /dev/null
+++ b/api/migration/chat.js
@@ -0,0 +1,14 @@
+import request from '@/sheep/request';
+
+// TODO 芋艿：暂不支持 socket 聊天
+export default {
+  // 获取聊天token
+  unifiedToken: () =>
+    request({
+      url: 'unifiedToken',
+      custom: {
+        showError: false,
+        showLoading: false,
+      },
+    }),
+};
diff --git a/api/migration/index.js b/api/migration/index.js
new file mode 100644
index 0000000..31a85ef
--- /dev/null
+++ b/api/migration/index.js
@@ -0,0 +1,10 @@
+const files = import.meta.glob('./*.js', { eager: true });
+let api = {};
+Object.keys(files).forEach((key) => {
+  api = {
+    ...api,
+    [key.replace(/(.*\/)*([^.]+).*/gi, '$2')]: files[key].default,
+  };
+});
+
+export default api;
\ No newline at end of file
diff --git a/api/migration/third.js b/api/migration/third.js
new file mode 100644
index 0000000..85db8cc
--- /dev/null
+++ b/api/migration/third.js
@@ -0,0 +1,48 @@
+import request from '@/sheep/request';
+
+export default {
+  // 微信相关
+  wechat: {
+    // 小程序订阅消息
+    subscribeTemplate: (params) =>
+      request({
+        url: 'third/wechat/subscribeTemplate',
+        method: 'GET',
+        params: {
+          platform: 'miniProgram',
+        },
+        custom: {
+          showError: false,
+          showLoading: false,
+        },
+      }),
+
+    // 获取微信小程序码
+    getWxacode: async (path, query) => {
+      return await request({
+        url: '/member/social-user/wxa-qrcode',
+        method: 'POST',
+        data: {
+          scene: query,
+          path,
+          checkPath: false, // TODO 开发环境暂不检查 path 是否存在
+        },
+      });
+    },
+  },
+
+  // 苹果相关
+  apple: {
+    // 第三方登录
+    login: (data) =>
+      request({
+        url: 'third/apple/login',
+        method: 'POST',
+        data,
+        custom: {
+          showSuccess: true,
+          loadingMsg: '登陆中',
+        },
+      }),
+  },
+};
diff --git a/api/pay/channel.js b/api/pay/channel.js
new file mode 100644
index 0000000..4e7bfc5
--- /dev/null
+++ b/api/pay/channel.js
@@ -0,0 +1,14 @@
+import request from '@/sheep/request';
+
+const PayChannelApi = {
+  // 获得指定应用的开启的支付渠道编码列表
+  getEnableChannelCodeList: (appId) => {
+    return request({
+      url: '/pay/channel/get-enable-code-list',
+      method: 'GET',
+      params: { appId }
+    });
+  },
+};
+
+export default PayChannelApi;
diff --git a/api/pay/order.js b/api/pay/order.js
new file mode 100644
index 0000000..f985359
--- /dev/null
+++ b/api/pay/order.js
@@ -0,0 +1,22 @@
+import request from '@/sheep/request';
+
+const PayOrderApi = {
+  // 获得支付订单
+  getOrder: (id) => {
+    return request({
+      url: '/pay/order/get',
+      method: 'GET',
+      params: { id }
+    });
+  },
+  // 提交支付订单
+  submitOrder: (data) => {
+    return request({
+      url: '/pay/order/submit',
+      method: 'POST',
+      data
+    });
+  }
+};
+
+export default PayOrderApi;
diff --git a/api/pay/wallet.js b/api/pay/wallet.js
new file mode 100644
index 0000000..023902a
--- /dev/null
+++ b/api/pay/wallet.js
@@ -0,0 +1,68 @@
+import request from '@/sheep/request';
+
+const PayWalletApi = {
+  // 获取钱包
+  getPayWallet() {
+    return request({
+      url: '/pay/wallet/get',
+      method: 'GET',
+      custom: {
+        showLoading: false,
+        auth: true,
+      },
+    });
+  },
+  // 获得钱包流水分页
+  getWalletTransactionPage: (params) => {
+    const queryString = Object.keys(params)
+      .map((key) => encodeURIComponent(key) + '=' + params[key])
+      .join('&');
+    return request({
+      url: `/pay/wallet-transaction/page?${queryString}`,
+      method: 'GET',
+    });
+  },
+  // 获得钱包流水统计
+  getWalletTransactionSummary: (params) => {
+    const queryString = `createTime=${params.createTime[0]}&createTime=${params.createTime[1]}`;
+    return request({
+      url: `/pay/wallet-transaction/get-summary?${queryString}`,
+      // url: `/pay/wallet-transaction/get-summary`,
+      method: 'GET',
+      // params: params
+    });
+  },
+  // 获得钱包充值套餐列表
+  getWalletRechargePackageList: () => {
+    return request({
+      url: '/pay/wallet-recharge-package/list',
+      method: 'GET',
+      custom: {
+        showError: false,
+        showLoading: false,
+      },
+    });
+  },
+  // 创建钱包充值记录（发起充值）
+  createWalletRecharge: (data) => {
+    return request({
+      url: '/pay/wallet-recharge/create',
+      method: 'POST',
+      data,
+    });
+  },
+  // 获得钱包充值记录分页
+  getWalletRechargePage: (params) => {
+    return request({
+      url: '/pay/wallet-recharge/page',
+      method: 'GET',
+      params,
+      custom: {
+        showError: false,
+        showLoading: false,
+      },
+    });
+  },
+};
+
+export default PayWalletApi;
diff --git a/api/product/category.js b/api/product/category.js
new file mode 100644
index 0000000..3b6f8f0
--- /dev/null
+++ b/api/product/category.js
@@ -0,0 +1,21 @@
+import request from '@/sheep/request';
+
+const CategoryApi = {
+  // 查询分类列表
+  getCategoryList: () => {
+    return request({
+      url: '/product/category/list',
+      method: 'GET',
+    });
+  },
+  // 查询分类列表，指定编号
+  getCategoryListByIds: (ids) => {
+    return request({
+      url: '/product/category/list-by-ids',
+      method: 'GET',
+      params: { ids },
+    });
+  },
+};
+
+export default CategoryApi;
diff --git a/api/product/comment.js b/api/product/comment.js
new file mode 100644
index 0000000..2bbffd1
--- /dev/null
+++ b/api/product/comment.js
@@ -0,0 +1,22 @@
+import request from '@/sheep/request';
+
+const CommentApi = {
+  // 获得商品评价分页
+  getCommentPage: (spuId, pageNo, pageSize, type) => {
+    return request({
+      url: '/product/comment/page',
+      method: 'GET',
+      params: {
+        spuId,
+        pageNo,
+        pageSize,
+        type,
+      },
+      custom: {
+        showLoading: false,
+        showError: false,
+      },
+    });
+  },
+};
+export default CommentApi;
diff --git a/api/product/favorite.js b/api/product/favorite.js
new file mode 100644
index 0000000..134c231
--- /dev/null
+++ b/api/product/favorite.js
@@ -0,0 +1,54 @@
+import request from '@/sheep/request';
+
+const FavoriteApi = {
+  // 获得商品收藏分页
+  getFavoritePage: (data) => {
+    return request({
+      url: '/product/favorite/page',
+      method: 'GET',
+      params: data,
+    });
+  },
+  // 检查是否收藏过商品
+  isFavoriteExists: (spuId) => {
+    return request({
+      url: '/product/favorite/exits',
+      method: 'GET',
+      params: {
+        spuId,
+      },
+    });
+  },
+  // 添加商品收藏
+  createFavorite: (spuId) => {
+    return request({
+      url: '/product/favorite/create',
+      method: 'POST',
+      data: {
+        spuId,
+      },
+      custom: {
+        auth: true,
+        showSuccess: true,
+        successMsg: '收藏成功',
+      },
+    });
+  },
+  // 取消商品收藏
+  deleteFavorite: (spuId) => {
+    return request({
+      url: '/product/favorite/delete',
+      method: 'DELETE',
+      data: {
+        spuId,
+      },
+      custom: {
+        auth: true,
+        showSuccess: true,
+        successMsg: '取消成功',
+      },
+    });
+  },
+};
+
+export default FavoriteApi;
diff --git a/api/product/history.js b/api/product/history.js
new file mode 100644
index 0000000..9ed53e3
--- /dev/null
+++ b/api/product/history.js
@@ -0,0 +1,39 @@
+import request from '@/sheep/request';
+
+const SpuHistoryApi = {
+  // 删除商品浏览记录
+  deleteBrowseHistory: (spuIds) => {
+    return request({
+      url: '/product/browse-history/delete',
+      method: 'DELETE',
+      data: { spuIds },
+      custom: {
+        showSuccess: true,
+        successMsg: '删除成功',
+      },
+    });
+  },
+  // 清空商品浏览记录
+  cleanBrowseHistory: () => {
+    return request({
+      url: '/product/browse-history/clean',
+      method: 'DELETE',
+      custom: {
+        showSuccess: true,
+        successMsg: '清空成功',
+      },
+    });
+  },
+  // 获得商品浏览记录分页
+  getBrowseHistoryPage: (data) => {
+    return request({
+      url: '/product/browse-history/page',
+      method: 'GET',
+      data,
+      custom: {
+        showLoading: false
+      },
+    });
+  },
+};
+export default SpuHistoryApi;
diff --git a/api/product/spu.js b/api/product/spu.js
new file mode 100644
index 0000000..3b84c1d
--- /dev/null
+++ b/api/product/spu.js
@@ -0,0 +1,41 @@
+import request from '@/sheep/request';
+
+const SpuApi = {
+  // 获得商品 SPU 列表
+  getSpuListByIds: (ids) => {
+    return request({
+      url: '/product/spu/list-by-ids',
+      method: 'GET',
+      params: { ids },
+      custom: {
+        showLoading: false,
+        showError: false,
+      },
+    });
+  },
+  // 获得商品 SPU 分页
+  getSpuPage: (params) => {
+    return request({
+      url: '/product/spu/page',
+      method: 'GET',
+      params,
+      custom: {
+        showLoading: false,
+        showError: false,
+      },
+    });
+  },
+  // 查询商品
+  getSpuDetail: (id) => {
+    return request({
+      url: '/product/spu/get-detail',
+      method: 'GET',
+      params: { id },
+      custom: {
+        showLoading: false,
+        showError: false,
+      },
+    });
+  },
+};
+export default SpuApi;
diff --git a/api/promotion/activity.js b/api/promotion/activity.js
new file mode 100644
index 0000000..eb47ce1
--- /dev/null
+++ b/api/promotion/activity.js
@@ -0,0 +1,16 @@
+import request from '@/sheep/request';
+
+const ActivityApi = {
+  // 获得单个商品，近期参与的每个活动
+  getActivityListBySpuId: (spuId) => {
+    return request({
+      url: '/promotion/activity/list-by-spu-id',
+      method: 'GET',
+      params: {
+        spuId,
+      },
+    });
+  },
+};
+
+export default ActivityApi;
diff --git a/api/promotion/article.js b/api/promotion/article.js
new file mode 100644
index 0000000..ded5fb1
--- /dev/null
+++ b/api/promotion/article.js
@@ -0,0 +1,12 @@
+import request from '@/sheep/request';
+
+export default {
+    // 获得文章详情
+    getArticle: (id, title) => {
+        return request({
+            url: '/promotion/article/get',
+            method: 'GET',
+            params: { id, title }
+        });
+    }
+}
diff --git a/api/promotion/combination.js b/api/promotion/combination.js
new file mode 100644
index 0000000..44f61e9
--- /dev/null
+++ b/api/promotion/combination.js
@@ -0,0 +1,76 @@
+import request from '@/sheep/request';
+
+// 拼团 API
+const CombinationApi = {
+  // 获得拼团活动列表
+  getCombinationActivityList: (count) => {
+    return request({
+      url: '/promotion/combination-activity/list',
+      method: 'GET',
+      params: { count },
+    });
+  },
+
+  // 获得拼团活动分页
+  getCombinationActivityPage: (params) => {
+    return request({
+      url: '/promotion/combination-activity/page',
+      method: 'GET',
+      params,
+    });
+  },
+
+  // 获得拼团活动明细
+  getCombinationActivity: (id) => {
+    return request({
+      url: '/promotion/combination-activity/get-detail',
+      method: 'GET',
+      params: {
+        id,
+      },
+    });
+  },
+
+  // 获得最近 n 条拼团记录（团长发起的）
+  getHeadCombinationRecordList: (activityId, status, count) => {
+    return request({
+      url: '/promotion/combination-record/get-head-list',
+      method: 'GET',
+      params: {
+        activityId,
+        status,
+        count,
+      },
+    });
+  },
+
+  // 获得我的拼团记录分页
+  getCombinationRecordPage: (params) => {
+    return request({
+      url: "/promotion/combination-record/page",
+      method: 'GET',
+      params
+    });
+  },
+
+  // 获得拼团记录明细
+  getCombinationRecordDetail: (id) => {
+    return request({
+      url: '/promotion/combination-record/get-detail',
+      method: 'GET',
+      params: {
+        id,
+      },
+    });
+  },
+
+  // 获得拼团记录的概要信息
+  getCombinationRecordSummary: () => {
+    return request({
+      url: '/promotion/combination-record/get-summary',
+      method: 'GET',
+    });
+  },
+};
+
+export default CombinationApi;
diff --git a/api/promotion/coupon.js b/api/promotion/coupon.js
new file mode 100644
index 0000000..c9dfa52
--- /dev/null
+++ b/api/promotion/coupon.js
@@ -0,0 +1,101 @@
+import request from '@/sheep/request';
+
+const CouponApi = {
+  // 获得优惠劵模板列表
+  getCouponTemplateListByIds: (ids) => {
+    return request({
+      url: '/promotion/coupon-template/list-by-ids',
+      method: 'GET',
+      params: { ids },
+      custom: {
+        showLoading: false, // 不展示 Loading，避免领取优惠劵时，不成功提示
+        showError: false,
+      },
+    });
+  },
+  // 获得优惠劵模版列表
+  getCouponTemplateList: (spuId, productScope, count) => {
+    return request({
+      url: '/promotion/coupon-template/list',
+      method: 'GET',
+      params: { spuId, productScope, count },
+    });
+  },
+  // 获得优惠劵模版分页
+  getCouponTemplatePage: (params) => {
+    return request({
+      url: '/promotion/coupon-template/page',
+      method: 'GET',
+      params,
+    });
+  },
+  // 获得优惠劵模版
+  getCouponTemplate: (id) => {
+    return request({
+      url: '/promotion/coupon-template/get',
+      method: 'GET',
+      params: { id },
+    });
+  },
+  // 我的优惠劵列表
+  getCouponPage: (params) => {
+    return request({
+      url: '/promotion/coupon/page',
+      method: 'GET',
+      params,
+    });
+  },
+  // 领取优惠券
+  takeCoupon: (templateId) => {
+    return request({
+      url: '/promotion/coupon/take',
+      method: 'POST',
+      data: { templateId },
+      custom: {
+        auth: true,
+        showLoading: true,
+        loadingMsg: '领取中',
+        showSuccess: true,
+        successMsg: '领取成功',
+      },
+    });
+  },
+  // 获得优惠劵
+  getCoupon: (id) => {
+    return request({
+      url: '/promotion/coupon/get',
+      method: 'GET',
+      params: { id },
+    });
+  },
+  // 获得未使用的优惠劵数量
+  getUnusedCouponCount: () => {
+    return request({
+      url: '/promotion/coupon/get-unused-count',
+      method: 'GET',
+      custom: {
+        showLoading: false,
+        auth: true,
+      },
+    });
+  },
+  // 获得匹配指定商品的优惠劵列表
+  getMatchCouponList: (price, spuIds, skuIds, categoryIds) => {
+    return request({
+      url: '/promotion/coupon/match-list',
+      method: 'GET',
+      params: {
+        price,
+        spuIds: spuIds.join(','),
+        skuIds: skuIds.join(','),
+        categoryIds: categoryIds.join(','),
+      },
+      custom: {
+        showError: false,
+        showLoading: false, // 避免影响 settlementOrder 结算的结果
+      },
+    });
+  }
+};
+
+export default CouponApi;
diff --git a/api/promotion/diy.js b/api/promotion/diy.js
new file mode 100644
index 0000000..deff330
--- /dev/null
+++ b/api/promotion/diy.js
@@ -0,0 +1,38 @@
+import request from '@/sheep/request';
+
+const DiyApi = {
+  getUsedDiyTemplate: () => {
+    return request({
+      url: '/promotion/diy-template/used',
+      method: 'GET',
+      custom: {
+        showError: false,
+        showLoading: false,
+      },
+    });
+  },
+  getDiyTemplate: (id) => {
+    return request({
+      url: '/promotion/diy-template/get',
+      method: 'GET',
+      params: {
+        id,
+      },
+      custom: {
+        showError: false,
+        showLoading: false,
+      },
+    });
+  },
+  getDiyPage: (id) => {
+    return request({
+      url: '/promotion/diy-page/get',
+      method: 'GET',
+      params: {
+        id,
+      },
+    });
+  },
+};
+
+export default DiyApi;
diff --git a/api/promotion/rewardActivity.js b/api/promotion/rewardActivity.js
new file mode 100644
index 0000000..5f74db7
--- /dev/null
+++ b/api/promotion/rewardActivity.js
@@ -0,0 +1,14 @@
+import request from '@/sheep/request';
+
+const RewardActivityApi = {
+  // 获得满减送活动
+  getRewardActivity: (id) => {
+    return request({
+      url: '/promotion/reward-activity/get',
+      method: 'GET',
+      params: { id },
+    });
+  }
+};
+
+export default RewardActivityApi;
\ No newline at end of file
diff --git a/api/promotion/seckill.js b/api/promotion/seckill.js
new file mode 100644
index 0000000..4d41e8b
--- /dev/null
+++ b/api/promotion/seckill.js
@@ -0,0 +1,33 @@
+import request from "@/sheep/request";
+
+const SeckillApi = {
+  // 获得秒杀时间段列表
+  getSeckillConfigList: () => {
+    return request({ url: 'promotion/seckill-config/list', method: 'GET' });
+  },
+
+  // 获得当前秒杀活动
+  getNowSeckillActivity: () => {
+    return request({ url: 'promotion/seckill-activity/get-now', method: 'GET' });
+  },
+
+  // 获得秒杀活动分页
+  getSeckillActivityPage: (params) => {
+    return request({ url: 'promotion/seckill-activity/page', method: 'GET', params });
+  },
+
+  /**
+   * 获得秒杀活动明细
+   * @param {number} id 秒杀活动编号
+   * @return {*}
+   */
+  getSeckillActivity: (id) => {
+    return request({
+      url: 'promotion/seckill-activity/get-detail',
+      method: 'GET',
+      params: { id }
+    });
+  }
+}
+
+export default SeckillApi;
diff --git a/api/system/area.js b/api/system/area.js
new file mode 100644
index 0000000..7c41eff
--- /dev/null
+++ b/api/system/area.js
@@ -0,0 +1,13 @@
+import request from '@/sheep/request';
+
+const AreaApi = {
+  // 获得地区树
+  getAreaTree: () => {
+    return request({
+      url: '/system/area/tree',
+      method: 'GET'
+    });
+  },
+};
+
+export default AreaApi;
diff --git a/api/trade/afterSale.js b/api/trade/afterSale.js
new file mode 100644
index 0000000..44c4dd3
--- /dev/null
+++ b/api/trade/afterSale.js
@@ -0,0 +1,63 @@
+import request from '@/sheep/request';
+
+const AfterSaleApi = {
+  // 获得售后分页
+  getAfterSalePage: (params) => {
+    return request({
+      url: `/trade/after-sale/page`,
+      method: 'GET',
+      params,
+      custom: {
+        showLoading: false,
+      },
+    });
+  },
+  // 创建售后
+  createAfterSale: (data) => {
+    return request({
+      url: `/trade/after-sale/create`,
+      method: 'POST',
+      data,
+    });
+  },
+  // 获得售后
+  getAfterSale: (id) => {
+    return request({
+      url: `/trade/after-sale/get`,
+      method: 'GET',
+      params: {
+        id,
+      },
+    });
+  },
+  // 取消售后
+  cancelAfterSale: (id) => {
+    return request({
+      url: `/trade/after-sale/cancel`,
+      method: 'DELETE',
+      params: {
+        id,
+      },
+    });
+  },
+  // 获得售后日志列表
+  getAfterSaleLogList: (afterSaleId) => {
+    return request({
+      url: `/trade/after-sale-log/list`,
+      method: 'GET',
+      params: {
+        afterSaleId,
+      },
+    });
+  },
+  // 退回货物
+  deliveryAfterSale: (data) => {
+    return request({
+      url: `/trade/after-sale/delivery`,
+      method: 'PUT',
+      data,
+    });
+  }
+};
+
+export default AfterSaleApi;
diff --git a/api/trade/brokerage.js b/api/trade/brokerage.js
new file mode 100644
index 0000000..f7ac986
--- /dev/null
+++ b/api/trade/brokerage.js
@@ -0,0 +1,85 @@
+import request from '@/sheep/request';
+
+const BrokerageApi = {
+  // 获得个人分销信息
+  getBrokerageUser: () => {
+    return request({
+      url: '/trade/brokerage-user/get',
+      method: 'GET'
+    });
+  },
+  // 获得个人分销统计
+  getBrokerageUserSummary: () => {
+    return request({
+      url: '/trade/brokerage-user/get-summary',
+      method: 'GET',
+    });
+  },
+  // 获得分销记录分页
+  getBrokerageRecordPage: params => {
+    if (params.status === undefined) {
+      delete params.status
+    }
+    const queryString = Object.keys(params)
+      .map(key => encodeURIComponent(key) + '=' + params[key])
+      .join('&');
+    return request({
+      url: `/trade/brokerage-record/page?${queryString}`,
+      method: 'GET',
+    });
+  },
+  // 创建分销提现
+  createBrokerageWithdraw: data => {
+    return request({
+      url: '/trade/brokerage-withdraw/create',
+      method: 'POST',
+      data,
+    });
+  },
+  // 获得商品的分销金额
+  getProductBrokeragePrice: spuId => {
+    return request({
+      url: '/trade/brokerage-record/get-product-brokerage-price',
+      method: 'GET',
+      params: { spuId }
+    });
+  },
+  // 获得分销用户排行（基于佣金）
+  getRankByPrice: params => {
+    const queryString = `times=${params.times[0]}&times=${params.times[1]}`;
+    return request({
+      url: `/trade/brokerage-user/get-rank-by-price?${queryString}`,
+      method: 'GET',
+    });
+  },
+  // 获得分销用户排行分页（基于佣金）
+  getBrokerageUserChildSummaryPageByPrice: params => {
+    const queryString = Object.keys(params)
+      .map(key => encodeURIComponent(key) + '=' + params[key])
+      .join('&');
+    return request({
+      url: `/trade/brokerage-user/rank-page-by-price?${queryString}`,
+      method: 'GET',
+    });
+  },
+  // 获得分销用户排行分页（基于用户量）
+  getBrokerageUserRankPageByUserCount: params => {
+    const queryString = Object.keys(params)
+      .map(key => encodeURIComponent(key) + '=' + params[key])
+      .join('&');
+    return request({
+      url: `/trade/brokerage-user/rank-page-by-user-count?${queryString}`,
+      method: 'GET',
+    });
+  },
+  // 获得下级分销统计分页
+  getBrokerageUserChildSummaryPage: params => {
+    return request({
+      url: '/trade/brokerage-user/child-summary-page',
+      method: 'GET',
+      params,
+    })
+  }
+}
+
+export default BrokerageApi
diff --git a/api/trade/cart.js b/api/trade/cart.js
new file mode 100644
index 0000000..63cea18
--- /dev/null
+++ b/api/trade/cart.js
@@ -0,0 +1,50 @@
+import request from '@/sheep/request';
+
+const CartApi = {
+  addCart: (data) => {
+    return request({
+      url: '/trade/cart/add',
+      method: 'POST',
+      data: data,
+      custom: {
+        showSuccess: true,
+        successMsg: '已添加到购物车~',
+      }
+    });
+  },
+  updateCartCount: (data) => {
+    return request({
+      url: '/trade/cart/update-count',
+      method: 'PUT',
+      data: data
+    });
+  },
+  updateCartSelected: (data) => {
+    return request({
+      url: '/trade/cart/update-selected',
+      method: 'PUT',
+      data: data
+    });
+  },
+  deleteCart: (ids) => {
+    return request({
+      url: '/trade/cart/delete',
+      method: 'DELETE',
+      params: {
+        ids
+      }
+    });
+  },
+  getCartList: () => {
+    return request({
+      url: '/trade/cart/list',
+      method: 'GET',
+      custom: {
+        showLoading: false,
+        auth: true,
+      },
+    });
+  },
+};
+
+export default CartApi;
\ No newline at end of file
diff --git a/api/trade/config.js b/api/trade/config.js
new file mode 100644
index 0000000..16806ed
--- /dev/null
+++ b/api/trade/config.js
@@ -0,0 +1,13 @@
+import request from '@/sheep/request';
+
+const TradeConfigApi = {
+  // 获得交易配置
+  getTradeConfig: () => {
+    return request({
+      url: `/trade/config/get`,
+      method: 'GET',
+    });
+  },
+};
+
+export default TradeConfigApi;
diff --git a/api/trade/delivery.js b/api/trade/delivery.js
new file mode 100644
index 0000000..27a08d9
--- /dev/null
+++ b/api/trade/delivery.js
@@ -0,0 +1,13 @@
+import request from '@/sheep/request';
+
+const DeliveryApi = {
+  // 获得快递公司列表
+  getDeliveryExpressList: () => {
+    return request({
+      url: `/trade/delivery/express/list`,
+      method: 'get',
+    });
+  }
+};
+
+export default DeliveryApi;
diff --git a/api/trade/order.js b/api/trade/order.js
new file mode 100644
index 0000000..4d57125
--- /dev/null
+++ b/api/trade/order.js
@@ -0,0 +1,139 @@
+import request from '@/sheep/request';
+
+const OrderApi = {
+  // 计算订单信息
+  settlementOrder: (data) => {
+    const data2 = {
+      ...data,
+    };
+    // 移除多余字段
+    if (!(data.couponId > 0)) {
+      delete data2.couponId;
+    }
+    if (!(data.addressId > 0)) {
+      delete data2.addressId;
+    }
+    if (!(data.combinationActivityId > 0)) {
+      delete data2.combinationActivityId;
+    }
+    if (!(data.combinationHeadId > 0)) {
+      delete data2.combinationHeadId;
+    }
+    if (!(data.seckillActivityId > 0)) {
+      delete data2.seckillActivityId;
+    }
+    // 解决 SpringMVC 接受 List<Item> 参数的问题
+    delete data2.items;
+    for (let i = 0; i < data.items.length; i++) {
+      data2[encodeURIComponent('items[' + i + '' + '].skuId')] = data.items[i].skuId + '';
+      data2[encodeURIComponent('items[' + i + '' + '].count')] = data.items[i].count + '';
+      if (data.items[i].cartId) {
+        data2[encodeURIComponent('items[' + i + '' + '].cartId')] = data.items[i].cartId + '';
+      }
+    }
+    const queryString = Object.keys(data2)
+      .map((key) => key + '=' + data2[key])
+      .join('&');
+    return request({
+      url: `/trade/order/settlement?${queryString}`,
+      method: 'GET',
+      custom: {
+        showError: true,
+        showLoading: true,
+      },
+    });
+  },
+  // 创建订单
+  createOrder: (data) => {
+    return request({
+      url: `/trade/order/create`,
+      method: 'POST',
+      data,
+    });
+  },
+  // 获得订单
+  getOrder: (id) => {
+    return request({
+      url: `/trade/order/get-detail`,
+      method: 'GET',
+      params: {
+        id,
+      },
+      custom: {
+        showLoading: false,
+      },
+    });
+  },
+  // 订单列表
+  getOrderPage: (params) => {
+    return request({
+      url: '/trade/order/page',
+      method: 'GET',
+      params,
+      custom: {
+        showLoading: false,
+      },
+    });
+  },
+  // 确认收货
+  receiveOrder: (id) => {
+    return request({
+      url: `/trade/order/receive`,
+      method: 'PUT',
+      params: {
+        id,
+      },
+    });
+  },
+  // 取消订单
+  cancelOrder: (id) => {
+    return request({
+      url: `/trade/order/cancel`,
+      method: 'DELETE',
+      params: {
+        id,
+      },
+    });
+  },
+  // 删除订单
+  deleteOrder: (id) => {
+    return request({
+      url: `/trade/order/delete`,
+      method: 'DELETE',
+      params: {
+        id,
+      },
+    });
+  },
+  // 获得交易订单的物流轨迹
+  getOrderExpressTrackList: (id) => {
+    return request({
+      url: `/trade/order/get-express-track-list`,
+      method: 'GET',
+      params: {
+        id,
+      },
+    });
+  },
+  // 获得交易订单数量
+  getOrderCount: () => {
+    return request({
+      url: '/trade/order/get-count',
+      method: 'GET',
+      custom: {
+        showLoading: false,
+        auth: true,
+      },
+    });
+  },
+  // 创建单个评论
+  createOrderItemComment: (data) => {
+    return request({
+      url: `/trade/order/item/create-comment`,
+      method: 'POST',
+      data,
+    });
+  },
+};
+
+export default OrderApi;
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2269a69
--- /dev/null
+++ b/index.html
@@ -0,0 +1,17 @@
+<!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/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..b1968ee
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..2680ac6
--- /dev/null
+++ b/main.js
@@ -0,0 +1,15 @@
+import App from './App';
+import { createSSRApp } from 'vue';
+import { setupPinia } from './sheep/store';
+
+
+export function createApp() {
+
+  const app = createSSRApp(App);
+  
+  setupPinia(app);
+
+  return {
+    app,
+  };
+}
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 0000000..b2d61ae
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,239 @@
+{
+  "name": "商城",
+  "appid": "__UNI__460BC4C",
+  "description": "基于 uni-app + Vue3 技术驱动的在线商城系统，内含诸多功能与丰富的活动，期待您的使用和反馈。",
+  "versionName": "2.1.0",
+  "versionCode": 183,
+  "transformPx": false,
+  "app-plus": {
+    "usingComponents": true,
+    "nvueCompiler": "uni-app",
+    "nvueStyleCompiler": "uni-app",
+    "compilerVersion": 3,
+    "nvueLaunchMode": "fast",
+    "splashscreen": {
+      "alwaysShowBeforeRender": true,
+      "waiting": true,
+      "autoclose": true,
+      "delay": 0
+    },
+    "safearea": {
+      "bottom": {
+        "offset": "none"
+      }
+    },
+    "modules": {
+      "Payment": {},
+      "Share": {},
+      "VideoPlayer": {},
+      "OAuth": {}
+    },
+    "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.VIBRATE\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_MOCK_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.CALL_PHONE\"/>",
+          "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+          "<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.GET_ACCOUNTS\"/>",
+          "<uses-permission android:name=\"android.permission.GET_TASKS\"/>",
+          "<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_CONTACTS\"/>",
+          "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+          "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.READ_SMS\"/>",
+          "<uses-permission android:name=\"android.permission.RECEIVE_BOOT_COMPLETED\"/>",
+          "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
+          "<uses-permission android:name=\"android.permission.SEND_SMS\"/>",
+          "<uses-permission android:name=\"android.permission.SYSTEM_ALERT_WINDOW\"/>",
+          "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+          "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
+          "<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>",
+          "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>",
+          "<uses-permission android:name=\"android.permission.WRITE_SMS\"/>",
+          "<uses-permission android:name=\"android.permission.RECEIVE_USER_PRESENT\"/>"
+        ],
+        "minSdkVersion": 21,
+        "schemes": "shopro"
+      },
+      "ios": {
+        "urlschemewhitelist": [
+          "baidumap",
+          "iosamap"
+        ],
+        "dSYMs": false,
+        "privacyDescription": {
+          "NSPhotoLibraryUsageDescription": "需要同意访问您的相册选取图片才能完善该条目",
+          "NSPhotoLibraryAddUsageDescription": "需要同意访问您的相册才能保存该图片",
+          "NSCameraUsageDescription": "需要同意访问您的摄像头拍摄照片才能完善该条目",
+          "NSUserTrackingUsageDescription": "开启追踪并不会获取您在其它站点的隐私信息,该行为仅用于标识设备,保障服务安全和提升浏览体验"
+        },
+        "urltypes": "shopro",
+        "capabilities": {
+          "entitlements": {
+            "com.apple.developer.associated-domains": [
+              "applinks:shopro.sheepjs.com"
+            ]
+          }
+        },
+        "idfa": true
+      },
+      "sdkConfigs": {
+        "speech": {
+          "ifly": {}
+        },
+        "ad": {},
+        "oauth": {
+          "apple": {},
+          "weixin": {
+            "appid": "wxae7a0c156da9383b",
+            "UniversalLinks": "https://shopro.sheepjs.com/uni-universallinks/__UNI__082C0BA/"
+          }
+        },
+        "payment": {
+          "weixin": {
+            "__platform__": [
+              "ios",
+              "android"
+            ],
+            "appid": "wxae7a0c156da9383b",
+            "UniversalLinks": "https://shopro.sheepjs.com/uni-universallinks/__UNI__082C0BA/"
+          },
+          "alipay": {
+            "__platform__": [
+              "ios",
+              "android"
+            ]
+          }
+        },
+        "share": {
+          "weixin": {
+            "appid": "wxae7a0c156da9383b",
+            "UniversalLinks": "https://shopro.sheepjs.com/uni-universallinks/__UNI__082C0BA/"
+          }
+        }
+      },
+      "orientation": [
+        "portrait-primary"
+      ],
+      "splashscreen": {
+        "androidStyle": "common",
+        "iosStyle": "common",
+        "useOriginalMsgbox": true
+      },
+      "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"
+          }
+        }
+      }
+    }
+  },
+  "quickapp": {},
+  "quickapp-native": {
+    "icon": "/static/logo.png",
+    "package": "com.example.demo",
+    "features": [
+      {
+        "name": "system.clipboard"
+      }
+    ]
+  },
+  "quickapp-webview": {
+    "icon": "/static/logo.png",
+    "package": "com.example.demo",
+    "minPlatformVersion": 1070,
+    "versionName": "1.0.0",
+    "versionCode": 100
+  },
+  "mp-weixin": {
+    "appid": "wx98df718e528399d2",
+    "setting": {
+      "urlCheck": false,
+      "minified": true,
+      "postcss": true
+    },
+    "optimization": {
+      "subPackages": true
+    },
+    "plugins": {},
+    "lazyCodeLoading": "requiredComponents",
+    "usingComponents": {},
+    "permission": {},
+    "requiredPrivateInfos": [
+      "chooseAddress"
+    ]
+  },
+  "mp-alipay": {
+    "usingComponents": true
+  },
+  "mp-baidu": {
+    "usingComponents": true
+  },
+  "mp-toutiao": {
+    "usingComponents": true
+  },
+  "mp-jd": {
+    "usingComponents": true
+  },
+  "h5": {
+    "template": "index.html",
+    "router": {
+      "mode": "hash",
+      "base": "./"
+    },
+    "sdkConfigs": {
+      "maps": {}
+    },
+    "async": {
+      "timeout": 20000
+    },
+    "title": "商城",
+    "optimization": {
+      "treeShaking": {
+        "enable": true
+      }
+    }
+  },
+  "vueVersion": "3",
+  "_spaceID": "192b4892-5452-4e1d-9f09-eee1ece40639",
+  "locale": "zh-Hans",
+  "fallbackLocale": "zh-Hans"
+}
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..2783cd2
--- /dev/null
+++ b/package.json
@@ -0,0 +1,103 @@
+{
+  "id": "shopro",
+  "name": "shopro",
+  "displayName": "商城",
+  "version": "2.1.0",
+  "description": "商城，一套代码，同时发行到iOS、Android、H5、微信小程序多个平台，请使用手机扫码快速体验强大功能",
+  "scripts": {
+    "prettier": "prettier --write  \"{pages,sheep}/**/*.{js,json,tsx,css,less,scss,vue,html,md}\""
+  },
+  "repository": "https://github.com/sheepjs/shop.git",
+  "keywords": [
+    "商城",
+    "B2C",
+    "商城模板"
+  ],
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/sheepjs/shop/issues"
+  },
+  "homepage": "https://github.com/dcloudio/hello-uniapp#readme",
+  "dcloudext": {
+    "category": [
+      "前端页面模板",
+      "uni-app前端项目模板"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "u",
+        "aliyun": "u"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "u",
+          "百度": "u",
+          "字节跳动": "u",
+          "QQ": "u",
+          "京东": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+          "vue2": "u",
+          "vue3": "y"
+        }
+      }
+    }
+  },
+  "dependencies": {
+    "@hyoga/uni-socket.io": "^3.0.4",
+    "dayjs": "^1.11.11",
+    "lodash": "^4.17.21",
+    "luch-request": "^3.1.1",
+    "pinia": "^2.1.7",
+    "pinia-plugin-persist-uni": "^1.3.1",
+    "weixin-js-sdk": "^1.6.5"
+  },
+  "devDependencies": {
+    "prettier": "^3.2.5",
+    "vconsole": "^3.15.1"
+  }
+}
\ No newline at end of file
diff --git a/pages.json b/pages.json
new file mode 100644
index 0000000..2239b2d
--- /dev/null
+++ b/pages.json
@@ -0,0 +1,655 @@
+{
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^s-(.*)": "@/sheep/components/s-$1/s-$1.vue",
+      "^su-(.*)": "@/sheep/ui/su-$1/su-$1.vue"
+    }
+  },
+  "pages": [{
+      "path": "pages/index/index",
+      "aliasPath": "/",
+      "style": {
+        "navigationBarTitleText": "首页",
+        "enablePullDownRefresh": true
+      },
+      "meta": {
+        "auth": false,
+        "sync": true,
+        "title": "首页",
+        "group": "商城"
+      }
+    },
+    {
+      "path": "pages/index/user",
+      "style": {
+        "navigationBarTitleText": "个人中心",
+        "enablePullDownRefresh": true
+      },
+      "meta": {
+        "sync": true,
+        "title": "个人中心",
+        "group": "商城"
+      }
+    },
+    {
+      "path": "pages/index/category",
+      "style": {
+        "navigationBarTitleText": "商品分类"
+      },
+      "meta": {
+        "sync": true,
+        "title": "商品分类",
+        "group": "商城"
+      }
+    },
+    {
+      "path": "pages/index/cart",
+      "style": {
+        "navigationBarTitleText": "购物车"
+      },
+      "meta": {
+        "sync": true,
+        "title": "购物车",
+        "group": "商城"
+      }
+    },
+    {
+      "path": "pages/index/login",
+      "style": {
+        "navigationBarTitleText": "登录"
+      }
+    },
+    {
+      "path": "pages/index/search",
+      "style": {
+        "navigationBarTitleText": "搜索"
+      },
+      "meta": {
+        "sync": true,
+        "title": "搜索",
+        "group": "商城"
+      }
+    },
+    {
+      "path": "pages/index/page",
+      "style": {
+        "navigationBarTitleText": ""
+      },
+      "meta": {
+        "auth": false,
+        "sync": true,
+        "title": "自定义页面",
+        "group": "商城"
+      }
+    }
+  ],
+  "subPackages": [{
+      "root": "pages/goods",
+      "pages": [{
+          "path": "index",
+          "style": {
+            "navigationBarTitleText": "商品详情"
+          },
+          "meta": {
+            "sync": true,
+            "title": "普通商品",
+            "group": "商品"
+          }
+        },
+        {
+          "path": "groupon",
+          "style": {
+            "navigationBarTitleText": "拼团商品"
+          },
+          "meta": {
+            "sync": true,
+            "title": "拼团商品",
+            "group": "商品"
+          }
+        },
+
+        {
+          "path": "seckill",
+          "style": {
+            "navigationBarTitleText": "秒杀商品"
+          },
+          "meta": {
+            "sync": true,
+            "title": "秒杀商品",
+            "group": "商品"
+          }
+        },
+        {
+          "path": "list",
+          "style": {
+            "navigationBarTitleText": "商品列表"
+          },
+          "meta": {
+            "sync": true,
+            "title": "商品列表",
+            "group": "商品"
+          }
+        },
+        {
+          "path": "comment/add",
+          "style": {
+            "navigationBarTitleText": "评价商品"
+          },
+          "meta": {
+            "auth": true
+          }
+        },
+        {
+          "path": "comment/list",
+          "style": {
+            "navigationBarTitleText": "商品评价"
+          }
+        }
+      ]
+    },
+    {
+      "root": "pages/order",
+      "pages": [{
+          "path": "detail",
+          "style": {
+            "navigationBarTitleText": "订单详情"
+          },
+          "meta": {
+            "auth": true,
+            "title": "订单详情"
+          }
+        },
+        {
+          "path": "confirm",
+          "style": {
+            "navigationBarTitleText": "确认订单"
+          },
+          "meta": {
+            "auth": true,
+            "title": "确认订单"
+          }
+        },
+        {
+          "path": "list",
+          "style": {
+            "navigationBarTitleText": "我的订单",
+            "enablePullDownRefresh": true
+          },
+          "meta": {
+            "auth": true,
+            "sync": true,
+            "title": "用户订单",
+            "group": "订单中心"
+          }
+        },
+        {
+          "path": "aftersale/apply",
+          "style": {
+            "navigationBarTitleText": "申请售后"
+          },
+          "meta": {
+            "auth": true,
+            "title": "申请售后"
+          }
+        },
+        {
+          "path": "aftersale/return-delivery",
+          "style": {
+            "navigationBarTitleText": "退货物流"
+          },
+          "meta": {
+            "auth": true,
+            "title": "退货物流"
+          }
+        },
+        {
+          "path": "aftersale/list",
+          "style": {
+            "navigationBarTitleText": "售后列表"
+          },
+          "meta": {
+            "auth": true,
+            "sync": true,
+            "title": "售后订单",
+            "group": "订单中心"
+          }
+        },
+        {
+          "path": "aftersale/detail",
+          "style": {
+            "navigationBarTitleText": "售后详情"
+          },
+          "meta": {
+            "auth": true,
+            "title": "售后详情"
+          }
+        },
+        {
+          "path": "aftersale/log",
+          "style": {
+            "navigationBarTitleText": "售后进度"
+          },
+          "meta": {
+            "auth": true,
+            "title": "售后进度"
+          }
+        },
+        {
+          "path": "express/log",
+          "style": {
+            "navigationBarTitleText": "物流轨迹"
+          },
+          "meta": {
+            "auth": true,
+            "title": "物流轨迹"
+          }
+        }
+      ]
+    },
+    {
+      "root": "pages/user",
+      "pages": [{
+          "path": "info",
+          "style": {
+            "navigationBarTitleText": "我的信息"
+          },
+          "meta": {
+            "auth": true,
+            "sync": true,
+            "title": "用户信息",
+            "group": "用户中心"
+          }
+        },
+        {
+          "path": "goods-collect",
+          "style": {
+            "navigationBarTitleText": "我的收藏"
+          },
+          "meta": {
+            "auth": true,
+            "sync": true,
+            "title": "商品收藏",
+            "group": "用户中心"
+          }
+        },
+        {
+          "path": "goods-log",
+          "style": {
+            "navigationBarTitleText": "我的足迹"
+          },
+          "meta": {
+            "auth": true,
+            "sync": true,
+            "title": "浏览记录",
+            "group": "用户中心"
+          }
+        },
+        {
+          "path": "address/list",
+          "style": {
+            "navigationBarTitleText": "收货地址"
+          },
+          "meta": {
+            "auth": true,
+            "sync": true,
+            "title": "地址管理",
+            "group": "用户中心"
+          }
+        },
+        {
+          "path": "address/edit",
+          "style": {
+            "navigationBarTitleText": "编辑地址"
+          },
+          "meta": {
+            "auth": true,
+            "title": "编辑地址"
+          }
+        },
+        {
+          "path": "wallet/money",
+          "style": {
+            "navigationBarTitleText": "我的余额"
+          },
+          "meta": {
+            "auth": true,
+            "sync": true,
+            "title": "用户余额",
+            "group": "用户中心"
+          }
+        },
+        {
+          "path": "wallet/score",
+          "style": {
+            "navigationBarTitleText": "我的积分"
+          },
+          "meta": {
+            "auth": true,
+            "sync": true,
+            "title": "用户积分",
+            "group": "用户中心"
+          }
+        }
+      ]
+    },
+    {
+      "root": "pages/commission",
+      "pages": [{
+          "path": "index",
+          "style": {
+            "navigationBarTitleText": "分销"
+          },
+          "meta": {
+            "auth": true,
+            "sync": true,
+            "title": "分销中心",
+            "group": "分销商城"
+          }
+        },
+        {
+          "path": "wallet",
+          "style": {
+            "navigationBarTitleText": "我的佣金"
+          },
+          "meta": {
+            "auth": true,
+            "sync": true,
+            "title": "用户佣金",
+            "group": "分销中心"
+          }
+        },
+        {
+          "path": "goods",
+          "style": {
+            "navigationBarTitleText": "推广商品"
+          },
+          "meta": {
+            "auth": true,
+            "sync": true,
+            "title": "推广商品",
+            "group": "分销商城"
+          }
+        },
+        {
+          "path": "order",
+          "style": {
+            "navigationBarTitleText": "分销订单"
+          },
+          "meta": {
+            "auth": true,
+            "sync": true,
+            "title": "分销订单",
+            "group": "分销商城"
+          }
+        },
+        {
+          "path": "team",
+          "style": {
+            "navigationBarTitleText": "我的团队"
+          },
+          "meta": {
+            "auth": true,
+            "sync": true,
+            "title": "我的团队",
+            "group": "分销商城"
+          }
+        }, {
+          "path": "promoter",
+          "style": {
+            "navigationBarTitleText": "推广人排行榜"
+          },
+          "meta": {
+            "auth": true,
+            "sync": true,
+            "title": "推广人排行榜",
+            "group": "分销商城"
+          }
+        }, {
+          "path": "commission-ranking",
+          "style": {
+            "navigationBarTitleText": "佣金排行榜"
+          },
+          "meta": {
+            "auth": true,
+            "sync": true,
+            "title": "佣金排行榜",
+            "group": "分销商城"
+          }
+        }, {
+          "path": "withdraw",
+          "style": {
+            "navigationBarTitleText": "申请提现"
+          },
+          "meta": {
+            "auth": true,
+            "sync": true,
+            "title": "申请提现",
+            "group": "分销商城"
+          }
+        }
+      ]
+    },
+    {
+      "root": "pages/app",
+      "pages": [{
+        "path": "sign",
+        "style": {
+          "navigationBarTitleText": "签到中心"
+        },
+        "meta": {
+          "auth": true,
+          "sync": true,
+          "title": "签到中心",
+          "group": "应用"
+        }
+      }]
+    },
+    {
+      "root": "pages/public",
+      "pages": [{
+          "path": "setting",
+          "style": {
+            "navigationBarTitleText": "系统设置"
+          },
+          "meta": {
+            "sync": true,
+            "title": "系统设置",
+            "group": "通用"
+          }
+        },
+        {
+          "path": "richtext",
+          "style": {
+            "navigationBarTitleText": "富文本"
+          },
+          "meta": {
+            "sync": true,
+            "title": "富文本",
+            "group": "通用"
+          }
+        },
+        {
+          "path": "faq",
+          "style": {
+            "navigationBarTitleText": "常见问题"
+          },
+          "meta": {
+            "sync": true,
+            "title": "常见问题",
+            "group": "通用"
+          }
+        },
+        {
+          "path": "error",
+          "style": {
+            "navigationBarTitleText": "错误页面"
+          }
+        },
+        {
+          "path": "webview",
+          "style": {
+            "navigationBarTitleText": ""
+          }
+        }
+      ]
+    },
+    {
+      "root": "pages/coupon",
+      "pages": [{
+          "path": "list",
+          "style": {
+            "navigationBarTitleText": "领券中心"
+          },
+          "meta": {
+            "sync": true,
+            "title": "领券中心",
+            "group": "优惠券"
+          }
+        },
+        {
+          "path": "detail",
+          "style": {
+            "navigationBarTitleText": "优惠券"
+          },
+          "meta": {
+            "auth": false,
+            "sync": true,
+            "title": "优惠券详情",
+            "group": "优惠券"
+          }
+        }
+      ]
+    },
+    {
+      "root": "pages/chat",
+      "pages": [{
+        "path": "index",
+        "style": {
+          "navigationBarTitleText": "客服"
+        },
+        "meta": {
+          "auth": true,
+          "sync": true,
+          "title": "客服",
+          "group": "客服"
+        }
+      }]
+    },
+    {
+      "root": "pages/pay",
+      "pages": [{
+          "path": "index",
+          "style": {
+            "navigationBarTitleText": "收银台"
+          }
+        },
+        {
+          "path": "result",
+          "style": {
+            "navigationBarTitleText": "支付结果"
+          }
+        },
+        {
+          "path": "recharge",
+          "style": {
+            "navigationBarTitleText": "充值余额"
+          },
+          "meta": {
+            "auth": true,
+            "sync": true,
+            "title": "充值余额",
+            "group": "支付"
+          }
+        },
+        {
+          "path": "recharge-log",
+          "style": {
+            "navigationBarTitleText": "充值记录"
+          },
+          "meta": {
+            "auth": true,
+            "sync": true,
+            "title": "充值记录",
+            "group": "支付"
+          }
+        }
+      ]
+    },
+    {
+      "root": "pages/activity",
+      "pages": [{
+          "path": "groupon/detail",
+          "style": {
+            "navigationBarTitleText": "拼团详情"
+          }
+        },
+        {
+          "path": "groupon/order",
+          "style": {
+            "navigationBarTitleText": "我的拼团",
+            "enablePullDownRefresh": true
+          },
+          "meta": {
+            "auth": true,
+            "sync": true,
+            "title": "拼团订单",
+            "group": "营销活动"
+          }
+        },
+        {
+          "path": "index",
+          "style": {
+            "navigationBarTitleText": "营销商品"
+          },
+          "meta": {
+            "sync": true,
+            "title": "营销商品",
+            "group": "营销活动"
+          }
+        },
+        {
+          "path": "groupon/list",
+          "style": {
+            "navigationBarTitleText": "拼团活动"
+          },
+          "meta": {
+            "sync": true,
+            "title": "拼团活动",
+            "group": "营销活动"
+          }
+        },
+        {
+          "path": "seckill/list",
+          "style": {
+            "navigationBarTitleText": "秒杀活动"
+          },
+          "meta": {
+            "sync": true,
+            "title": "秒杀活动",
+            "group": "营销活动"
+          }
+        }
+      ]
+    }
+  ],
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "商城",
+    "navigationBarBackgroundColor": "#FFFFFF",
+    "backgroundColor": "#FFFFFF",
+    "navigationStyle": "custom"
+  },
+  "tabBar": {
+    "list": [{
+        "pagePath": "pages/index/index"
+      },
+      {
+        "pagePath": "pages/index/cart"
+      },
+      {
+        "pagePath": "pages/index/user"
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/pages/activity/groupon/detail.vue b/pages/activity/groupon/detail.vue
new file mode 100644
index 0000000..dbeab7c
--- /dev/null
+++ b/pages/activity/groupon/detail.vue
@@ -0,0 +1,508 @@
+<!-- 拼团订单的详情 -->
+<template>
+  <s-layout title="拼团详情" class="detail-wrap" :navbar="state.data && !state.loading ? 'inner': 'normal'" :onShareAppMessage="shareInfo">
+    <view v-if="state.loading"></view>
+    <view v-if="state.data && !state.loading">
+      <!-- 团长信息 + 活动信息 -->
+      <view
+        class="recharge-box"
+        v-if="state.data.headRecord"
+        :style="[
+          {
+            marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
+            paddingTop: Number(statusBarHeight + 108) + 'rpx',
+          },
+        ]"
+      >
+        <s-goods-item
+          class="goods-box"
+          :img="state.data.headRecord.picUrl"
+          :title="state.data.headRecord.spuName"
+          :price="state.data.headRecord.combinationPrice"
+          priceColor="#E1212B"
+          @tap="
+            sheep.$router.go('/pages/goods/groupon', {
+              id: state.data.headRecord.activityId
+            })
+          "
+          :style="[{ top: Number(statusBarHeight + 108) + 'rpx' }]"
+        >
+          <template #groupon>
+            <view class="ss-flex">
+              <view class="sales-title">{{ state.data.headRecord.userSize }}人团</view>
+              <view class="num-title ss-m-l-20">已拼{{ state.data.headRecord.userCount }}件</view>
+            </view>
+          </template>
+        </s-goods-item>
+      </view>
+
+      <view class="countdown-box detail-card ss-p-t-44 ss-flex-col ss-col-center">
+        <!-- 情况一：拼团成功 -->
+        <view v-if="state.data.headRecord.status === 1">
+          <view v-if="state.data.orderId">
+            <view class="countdown-title ss-flex">
+              <text class="cicon-check-round" />
+              恭喜您~拼团成功
+            </view>
+          </view>
+          <view v-else>
+            <view class="countdown-title ss-flex">
+              <text class="cicon-info" />
+              抱歉~该团已满员
+            </view>
+          </view>
+        </view>
+
+        <!-- 情况二：拼团失败 -->
+        <view v-if="state.data.headRecord.status === 2">
+          <view class="countdown-title ss-flex">
+            <text class="cicon-info"></text>
+            {{ state.data.orderId ? '拼团超时,已自动退款' : '该团已解散' }}
+          </view>
+        </view>
+
+        <!-- 情况三：拼团进行中 -->
+        <view v-if="state.data.headRecord.status === 0">
+          <view v-if="state.data.headRecord.expireTime <= new Date().getTime()">
+            <view class="countdown-title ss-flex">
+              <text class="cicon-info"></text>
+              拼团已结束,请关注下次活动
+            </view>
+          </view>
+          <view class="countdown-title ss-flex" v-else>
+            还差
+            <view class="num">{{ state.data.headRecord.userSize - state.data.headRecord.userCount }}人</view>
+            拼团成功
+            <view class="ss-flex countdown-time">
+              <view class="countdown-h ss-flex ss-row-center">{{ endTime.h }}</view>
+              <view class="ss-m-x-4">:</view>
+              <view class="countdown-num ss-flex ss-row-center">
+                {{ endTime.m }}
+              </view>
+              <view class="ss-m-x-4">:</view>
+              <view class="countdown-num ss-flex ss-row-center">
+                {{ endTime.s }}
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <!-- 拼团的记录列表，展示每个参团人 -->
+        <view class="ss-m-t-60 ss-flex ss-flex-wrap ss-row-center">
+          <!-- 团长 -->
+          <view class="header-avatar ss-m-r-24 ss-m-b-20">
+            <image :src="sheep.$url.cdn(state.data.headRecord.avatar)" class="avatar-img"></image>
+            <view class="header-tag ss-flex ss-col-center ss-row-center">团长</view>
+          </view>
+          <!-- 团员 -->
+          <view
+            class="header-avatar ss-m-r-24 ss-m-b-20"
+            v-for="item in state.data.memberRecords"
+            :key="item.id"
+          >
+            <image :src="sheep.$url.cdn(item.avatar)" class="avatar-img"></image>
+            <view
+              class="header-tag ss-flex ss-col-center ss-row-center"
+              v-if="item.is_leader == '1'"
+            >
+              团长
+            </view>
+          </view>
+          <!-- 还有几个坑位 -->
+          <view class="default-avatar ss-m-r-24 ss-m-b-20" v-for="item in state.remainNumber" :key="item">
+            <image
+              :src="sheep.$url.static('/static/img/shop/avatar/unknown.png')"
+              class="avatar-img"
+            ></image>
+          </view>
+        </view>
+      </view>
+
+      <!-- 情况一：拼团成功；情况二：拼团失败 -->
+      <view
+        v-if="state.data.headRecord.status === 1 || state.data.headRecord.status === 2"
+        class="ss-m-t-40 ss-flex ss-row-center"
+      >
+        <button
+          class="ss-reset-button order-btn"
+          v-if="state.data.orderId"
+          @tap="onDetail(state.data.orderId)"
+        >
+          查看订单
+        </button>
+        <button class="ss-reset-button join-btn" v-else @tap="onCreateGroupon"> 我要开团 </button>
+      </view>
+
+      <!-- 情况三：拼团进行中，查看订单或参加或邀请好友或参加 -->
+      <view v-if="state.data.headRecord.status === 0" class="ss-m-t-40 ss-flex ss-row-center">
+        <view v-if="state.data.headRecord.expireTime <= new Date().getTime()">
+          <button
+            class="ss-reset-button join-btn"
+            v-if="state.data.orderId"
+            @tap="onDetail(state.data.orderId)"
+          >
+            查看订单
+          </button>
+          <button
+            class="ss-reset-button disabled-btn"
+            v-else
+            disabled
+            @tap="onDetail(state.data.orderId)"
+          >
+            去参团
+          </button>
+        </view>
+        <view v-else class="ss-flex ss-row-center">
+          <view v-if="state.data.orderId">
+            <button
+              class="ss-reset-button join-btn"
+              :disabled="endTime.ms <= 0"
+              @tap="onShare"
+            >
+              邀请好友来拼团
+            </button>
+          </view>
+          <view v-else>
+            <button
+              class="ss-reset-button join-btn"
+              :disabled="endTime.ms <= 0"
+              @tap="onJoinGroupon()"
+            >
+              立即参团
+            </button>
+          </view>
+        </view>
+      </view>
+
+      <!-- TODO 芋艿：这里暂时没接入 -->
+      <view v-if="state.data.goods">
+        <s-select-groupon-sku
+          :show="state.showSelectSku"
+          :goodsInfo="state.data.goods"
+          :grouponAction="state.grouponAction"
+          :grouponNum="state.grouponNum"
+          @buy="onBuy"
+          @change="onSkuChange"
+          @close="state.showSelectSku = false"
+        />
+      </view>
+    </view>
+
+    <s-empty v-if="!state.data && !state.loading" icon="/static/goods-empty.png" />
+  </s-layout>
+</template>
+
+<script setup>
+  import { computed, reactive } from 'vue';
+  import sheep from '@/sheep';
+  import { onLoad } from '@dcloudio/uni-app';
+  import { useDurationTime } from '@/sheep/hooks/useGoods';
+  import { showShareModal } from '@/sheep/hooks/useModal';
+  import { isEmpty } from 'lodash';
+  import CombinationApi from "@/api/promotion/combination";
+
+  const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
+  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+  const state = reactive({
+    data: {}, // 拼团详情
+    loading: true,
+    grouponAction: 'create',
+    showSelectSku: false,
+    grouponNum: 0,
+    number: 0,
+    activity: {},
+    combinationHeadId: null, // 拼团团长编号
+  });
+
+  // todo 芋艿：分享要再接下
+  const shareInfo = computed(() => {
+    if (isEmpty(state.data)) return {};
+    return sheep.$platform.share.getShareInfo(
+      {
+        title: state.data.headRecord.spuName,
+        image: sheep.$url.cdn(state.data.headRecord.picUrl),
+        desc: state.data.goods?.subtitle,
+        params: {
+          page: '5',
+          query: state.data.id,
+        },
+      },
+      {
+        type: 'groupon', // 邀请拼团海报
+        title: state.data.headRecord.spuName, // 商品标题
+        image: sheep.$url.cdn(state.data.headRecord.picUrl), // 商品主图
+        price: state.data.goods?.price, // 商品价格
+        original_price: state.data.goods?.original_price, // 商品原价
+      },
+    );
+  });
+
+  // 订单详情
+  function onDetail(orderId) {
+    sheep.$router.go('/pages/order/detail', {
+      id: orderId,
+    });
+  }
+
+  // 去开团 TODO 芋艿：这里没接入
+  function onCreateGroupon() {
+    state.grouponAction = 'create';
+    state.grouponId = 0;
+    state.showSelectSku = true;
+  }
+
+  // 规格变更 TODO 芋艿：这里没接入
+  function onSkuChange(e) {
+    state.selectedSkuPrice = e;
+  }
+
+  // 立即参团 TODO 芋艿：这里没接入
+  function onJoinGroupon() {
+    state.grouponAction = 'join';
+    state.grouponId = state.data.activityId;
+    state.combinationHeadId = state.data.id;
+    state.grouponNum = state.data.num;
+    state.showSelectSku = true;
+  }
+
+  // 立即购买 TODO 芋艿：这里没接入
+  function onBuy(sku) {
+    sheep.$router.go('/pages/order/confirm', {
+      data: JSON.stringify({
+        order_type: 'goods',
+        combinationActivityId: state.data.activity.id,
+        combinationHeadId: state.combinationHeadId,
+        items: [
+          {
+            skuId: sku.id,
+            count: sku.count,
+          },
+        ],
+      }),
+    });
+  }
+
+  const endTime = computed(() => {
+    return useDurationTime(state.data.headRecord.expireTime);
+  });
+
+  // 获取拼团团队详情
+  async function getGrouponDetail(id) {
+    const { code, data } = await CombinationApi.getCombinationRecordDetail(id);
+    if (code === 0) {
+      state.data = data;
+      const remainNumber = Number(state.data.headRecord.userSize - state.data.headRecord.userCount);
+      state.remainNumber = remainNumber > 0 ? remainNumber : 0;
+
+      // 获取活动信息
+      const { data: activity } = await CombinationApi.getCombinationActivity(data.headRecord.activityId);
+      state.activity = activity;
+    } else {
+      state.data = null;
+    }
+    state.loading = false;
+  }
+
+  function onShare() {
+    showShareModal();
+  }
+
+  onLoad((options) => {
+    getGrouponDetail(options.id);
+  });
+</script>
+
+<style lang="scss" scoped>
+  .recharge-box {
+    position: relative;
+    margin-bottom: 120rpx;
+    background: v-bind(headerBg) center/750rpx 100%
+        no-repeat,
+      linear-gradient(115deg, #f44739 0%, #ff6600 100%);
+    border-radius: 0 0 5% 5%;
+    height: 100rpx;
+
+    .goods-box {
+      width: 710rpx;
+      border-radius: 20rpx;
+      position: absolute;
+      left: 20rpx;
+      box-sizing: border-box;
+    }
+
+    .sales-title {
+      height: 32rpx;
+      background: rgba(#ffe0e2, 0.29);
+      border-radius: 16rpx;
+      font-size: 24rpx;
+      font-weight: 400;
+      padding: 6rpx 20rpx;
+      color: #f7979c;
+    }
+
+    .num-title {
+      font-size: 24rpx;
+      font-weight: 400;
+      color: #999999;
+    }
+  }
+
+  .countdown-time {
+    font-size: 26rpx;
+    font-weight: 500;
+    color: #383a46;
+    .countdown-h {
+      font-size: 24rpx;
+      font-family: OPPOSANS;
+      font-weight: 500;
+      color: #ffffff;
+      padding: 0 4rpx;
+      margin-left: 16rpx;
+      height: 40rpx;
+      background: linear-gradient(90deg, #ff6000 0%, #fe832a 100%);
+      border-radius: 6rpx;
+    }
+    .countdown-num {
+      font-size: 24rpx;
+      font-family: OPPOSANS;
+      font-weight: 500;
+      color: #ffffff;
+      width: 40rpx;
+      height: 40rpx;
+      background: linear-gradient(90deg, #ff6000 0%, #fe832a 100%);
+      border-radius: 6rpx;
+    }
+  }
+
+  .countdown-box {
+    // height: 364rpx;
+    background: #ffffff;
+    border-radius: 10rpx;
+    box-sizing: border-box;
+
+    .countdown-title {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #333333;
+
+      .cicon-check-round {
+        color: #42b111;
+        margin-right: 24rpx;
+      }
+
+      .cicon-info {
+        color: #d71e08;
+        margin-right: 24rpx;
+      }
+
+      .num {
+        color: #ff6000;
+      }
+    }
+
+    .header-avatar {
+      width: 86rpx;
+      height: 86rpx;
+      background: #ececec;
+      border-radius: 50%;
+      border: 4rpx solid #edc36c;
+      position: relative;
+      box-sizing: border-box;
+
+      .avatar-img {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+      }
+
+      .header-tag {
+        width: 72rpx;
+        height: 36rpx;
+        font-size: 24rpx;
+        line-height: nor;
+        background: linear-gradient(132deg, #f3dfb1, #f3dfb1, #ecbe60);
+        border-radius: 16rpx;
+        position: absolute;
+        left: 4rpx;
+        top: -36rpx;
+      }
+    }
+    .default-avatar {
+      width: 86rpx;
+      height: 86rpx;
+      background: #ececec;
+      border-radius: 50%;
+      .avatar-img {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+      }
+    }
+
+    .user-avatar {
+      width: 86rpx;
+      height: 86rpx;
+      background: #ececec;
+      border-radius: 50%;
+    }
+  }
+  .order-btn {
+    width: 668rpx;
+    height: 70rpx;
+    border: 2rpx solid #dfdfdf;
+    border-radius: 35rpx;
+    color: #999999;
+    font-weight: 500;
+    font-size: 26rpx;
+    line-height: normal;
+  }
+
+  .disabled-btn {
+    width: 668rpx;
+    height: 70rpx;
+    background: #dddddd;
+    border-radius: 35rpx;
+    color: #999999;
+    font-weight: 500;
+    font-size: 28rpx;
+    line-height: normal;
+  }
+
+  .join-btn {
+    width: 668rpx;
+    height: 70rpx;
+    background: linear-gradient(90deg, #ff6000 0%, #fe832a 100%);
+    box-shadow: 0px 8rpx 6rpx 0px rgba(255, 104, 4, 0.22);
+    border-radius: 35rpx;
+    color: #fff;
+    font-weight: 500;
+    font-size: 28rpx;
+    line-height: normal;
+  }
+
+  .detail-cell-wrap {
+    width: 100%;
+    padding: 10rpx 20rpx;
+    box-sizing: border-box;
+    border-top: 2rpx solid #dfdfdf;
+    background-color: #fff;
+    // min-height: 60rpx;
+
+    .label-text {
+      font-size: 28rpx;
+      font-weight: 400;
+    }
+
+    .cell-content {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: $dark-6;
+    }
+
+    .right-forwrad-icon {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: $dark-9;
+    }
+  }
+</style>
diff --git a/pages/activity/groupon/list.vue b/pages/activity/groupon/list.vue
new file mode 100644
index 0000000..a8b77a3
--- /dev/null
+++ b/pages/activity/groupon/list.vue
@@ -0,0 +1,225 @@
+<!-- 拼团活动列表 -->
+<template>
+  <s-layout navbar="inner" :bgStyle="{ color: '#FE832A' }">
+    <view class="page-bg" :style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]" />
+    <view class="list-content">
+      <!-- 参团会员统计 -->
+      <view class="content-header ss-flex-col ss-col-center ss-row-center">
+        <view class="content-header-title ss-flex ss-row-center">
+          <view
+            v-for="(item, index) in state.summaryData.avatars"
+            :key="index"
+            class="picture"
+            :style="index === 6 ? 'position: relative' : 'position: static'"
+          >
+            <span class="avatar" :style="`background-image: url(${item})`" />
+            <span v-if="index === 6 && state.summaryData.avatars.length > 3" class="mengceng">
+              <i>···</i>
+            </span>
+          </view>
+          <text class="pic_count">{{ state.summaryData.userCount || 0 }}人参与</text>
+        </view>
+      </view>
+      <scroll-view
+        class="scroll-box"
+        :style="{ height: pageHeight + 'rpx' }"
+        scroll-y="true"
+        :scroll-with-animation="false"
+        :enable-back-to-top="true"
+      >
+        <view class="goods-box ss-m-b-20" v-for="item in state.pagination.list" :key="item.id">
+          <s-goods-column
+            class=""
+            size="lg"
+            :data="item"
+            :grouponTag="true"
+            @click="sheep.$router.go('/pages/goods/groupon', { id: item.id })"
+          >
+            <template v-slot:cart>
+              <button class="ss-reset-button cart-btn">去拼团</button>
+            </template>
+          </s-goods-column>
+        </view>
+        <uni-load-more
+          v-if="state.pagination.total > 0"
+          :status="state.loadStatus"
+          :content-text="{
+            contentdown: '上拉加载更多',
+          }"
+          @tap="loadMore"
+        />
+      </scroll-view>
+    </view>
+  </s-layout>
+</template>
+<script setup>
+  import { reactive } from 'vue';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import CombinationApi from '@/api/promotion/combination';
+
+  const { safeAreaInsets, safeArea } = sheep.$platform.device;
+  const sysNavBar = sheep.$platform.navbar;
+  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+  const pageHeight =
+    (safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sysNavBar - 350;
+  const headerBg = sheep.$url.css('/static/img/shop/goods/groupon-header.png');
+
+  const state = reactive({
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 10,
+    },
+    loadStatus: '',
+    summaryData: {},
+  });
+
+  // 加载统计数据
+  const getSummary = async () => {
+    const { data } = await CombinationApi.getCombinationRecordSummary();
+    state.summaryData = data;
+  };
+
+  // 加载活动列表
+  async function getList() {
+    state.loadStatus = 'loading';
+    const { data } = await CombinationApi.getCombinationActivityPage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+    });
+    data.list.forEach((activity) => {
+      state.pagination.list.push({ ...activity, price: activity.combinationPrice });
+    });
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getList();
+  }
+
+  // 上拉加载更多
+  onReachBottom(() => loadMore());
+
+  // 页面初始化
+  onLoad(() => {
+    getSummary();
+    getList();
+  });
+</script>
+<style lang="scss" scoped>
+  .page-bg {
+    width: 100%;
+    height: 458rpx;
+    margin-top: -88rpx;
+    background: v-bind(headerBg) no-repeat;
+    background-size: 100% 100%;
+  }
+  .list-content {
+    position: relative;
+    z-index: 3;
+    margin: -190rpx 20rpx 0 20rpx;
+    background: #fff;
+    border-radius: 20rpx 20rpx 0 0;
+    .content-header {
+      width: 100%;
+      border-radius: 20rpx 20rpx 0 0;
+      height: 100rpx;
+      background: linear-gradient(180deg, #fff4f7, #ffe4d1);
+      .content-header-title {
+        width: 100%;
+        font-size: 30rpx;
+        font-weight: 500;
+        color: #ff2923;
+        line-height: 30rpx;
+        position: relative;
+        .more {
+          position: absolute;
+          right: 30rpx;
+          top: 0;
+          font-size: 24rpx;
+          font-weight: 400;
+          color: #999999;
+          line-height: 30rpx;
+        }
+
+        .picture {
+          display: inline-table;
+        }
+
+        .avatar {
+          width: 38rpx;
+          height: 38rpx;
+          display: inline-table;
+          vertical-align: middle;
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          -ms-user-select: none;
+          user-select: none;
+          border-radius: 50%;
+          background-repeat: no-repeat;
+          background-size: cover;
+          background-position: 0 0;
+          margin-right: -10rpx;
+          box-shadow: 0 0 0 1px #fe832a;
+        }
+
+        .pic_count {
+          margin-left: 30rpx;
+          font-size: 22rpx;
+          font-weight: 500;
+          width: auto;
+          height: auto;
+          background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
+          color: #ffffff;
+          border-radius: 19rpx;
+          padding: 4rpx 14rpx;
+        }
+
+        .mengceng {
+          width: 40rpx;
+          height: 40rpx;
+          line-height: 36rpx;
+          background: rgba(51, 51, 51, 0.6);
+          text-align: center;
+          border-radius: 50%;
+          opacity: 1;
+          position: absolute;
+          left: -2rpx;
+          color: #fff;
+          top: 2rpx;
+          i {
+            font-style: normal;
+            font-size: 20rpx;
+          }
+        }
+      }
+    }
+    .scroll-box {
+      height: 900rpx;
+      .goods-box {
+        position: relative;
+        .cart-btn {
+          position: absolute;
+          bottom: 10rpx;
+          right: 20rpx;
+          z-index: 11;
+          height: 50rpx;
+          line-height: 50rpx;
+          padding: 0 20rpx;
+          border-radius: 25rpx;
+          font-size: 24rpx;
+          color: #fff;
+          background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
+        }
+      }
+    }
+  }
+</style>
diff --git a/pages/activity/groupon/order.vue b/pages/activity/groupon/order.vue
new file mode 100644
index 0000000..c4005d1
--- /dev/null
+++ b/pages/activity/groupon/order.vue
@@ -0,0 +1,239 @@
+<!-- 我的拼团订单列表 -->
+<template>
+  <s-layout title="我的拼团">
+    <su-sticky bgColor="#fff">
+      <su-tabs
+        :list="tabMaps"
+        :scrollable="false"
+        @change="onTabsChange"
+        :current="state.currentTab"
+      ></su-tabs>
+    </su-sticky>
+    <s-empty v-if="state.pagination.total === 0" icon="/static/goods-empty.png" />
+    <view v-if="state.pagination.total > 0">
+      <view
+        class="order-list-card-box bg-white ss-r-10 ss-m-t-14 ss-m-20"
+        v-for="record in state.pagination.list"
+        :key="record.id"
+      >
+        <view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
+          <view class="order-no">拼团编号：{{ record.id }}</view>
+          <view class="ss-font-26" :class="formatOrderColor(record)">
+            {{ tabMaps.find((item) => item.value === record.status).name }}
+          </view>
+        </view>
+        <view class="border-bottom">
+          <s-goods-item
+              :img="record.picUrl"
+              :title="record.spuName"
+              :price="record.combinationPrice"
+          >
+            <template #groupon>
+              <view class="ss-flex">
+                <view class="sales-title"> {{ record.userSize }} 人团 </view>
+              </view>
+            </template>
+          </s-goods-item>
+        </view>
+        <view class="order-card-footer ss-flex ss-row-right ss-p-x-20">
+          <button
+            class="detail-btn ss-reset-button"
+            @tap="sheep.$router.go('/pages/order/detail', { id: record.orderId })"
+          >
+            订单详情
+          </button>
+          <button
+            class="tool-btn ss-reset-button"
+            :class="{ 'ui-BG-Main-Gradient': record.status === 0 }"
+            @tap="sheep.$router.go('/pages/activity/groupon/detail', { id: record.id })"
+          >
+            {{ record.status === 0 ? '邀请拼团' : '拼团详情' }}
+          </button>
+        </view>
+      </view>
+    </view>
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="loadMore"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+  import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import _ from 'lodash';
+  import {formatOrderColor} from "@/sheep/hooks/useGoods";
+  import { resetPagination } from '@/sheep/util';
+  import CombinationApi from '@/api/promotion/combination';
+
+  // 数据
+  const state = reactive({
+    currentTab: 0,
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 5,
+    },
+    loadStatus: '',
+    deleteOrderId: 0,
+  });
+
+  const tabMaps = [
+    {
+      name: '全部',
+    },
+    {
+      name: '进行中',
+      value: 0,
+    },
+    {
+      name: '拼团成功',
+      value: 1,
+    },
+    {
+      name: '拼团失败',
+      value: 2,
+    },
+  ];
+
+  // 切换选项卡
+  function onTabsChange(e) {
+    resetPagination(state.pagination);
+    state.currentTab = e.index;
+    getGrouponList();
+  }
+
+  // 获取订单列表
+  async function getGrouponList() {
+    state.loadStatus = 'loading';
+    const { code, data } = await CombinationApi.getCombinationRecordPage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+      status: tabMaps[state.currentTab].value,
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list)
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  onLoad((options) => {
+    if (options.type) {
+      state.currentTab = options.type;
+    }
+    getGrouponList();
+  });
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getGrouponList();
+  }
+
+  // 上拉加载更多
+  onReachBottom(() => {
+    loadMore();
+  });
+
+  //下拉刷新
+  onPullDownRefresh(() => {
+    getGrouponList();
+    setTimeout(function () {
+      uni.stopPullDownRefresh();
+    }, 800);
+  });
+</script>
+
+<style lang="scss" scoped>
+  .swiper-box {
+    flex: 1;
+
+    .swiper-item {
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  .order-list-card-box {
+    .order-card-header {
+      height: 80rpx;
+
+      .order-no {
+        font-size: 26rpx;
+        font-weight: 500;
+      }
+    }
+
+    .order-card-footer {
+      height: 100rpx;
+
+      .detail-btn {
+        width: 210rpx;
+        height: 66rpx;
+        border: 2rpx solid #dfdfdf;
+        border-radius: 33rpx;
+        font-size: 26rpx;
+        font-weight: 400;
+        color: #999999;
+        margin-right: 20rpx;
+      }
+      .tool-btn {
+        width: 210rpx;
+        height: 66rpx;
+        border-radius: 33rpx;
+        font-size: 26rpx;
+        font-weight: 400;
+        margin-right: 20rpx;
+        background: #f6f6f6;
+      }
+
+      .invite-btn {
+        width: 210rpx;
+        height: 66rpx;
+        background: linear-gradient(90deg, #fe832a, #ff6600);
+        box-shadow: 0px 8rpx 6rpx 0px rgba(255, 104, 4, 0.22);
+        border-radius: 33rpx;
+        color: #fff;
+        font-size: 26rpx;
+        font-weight: 500;
+      }
+    }
+  }
+
+  .sales-title {
+    height: 32rpx;
+    background: rgba(#ffe0e2, 0.29);
+    border-radius: 16rpx;
+    font-size: 24rpx;
+    font-weight: 400;
+    padding: 6rpx 20rpx;
+    color: #f7979c;
+  }
+
+  .num-title {
+    font-size: 24rpx;
+    font-weight: 400;
+    color: #999999;
+  }
+  .warning-color {
+    color: #faad14;
+  }
+  .danger-color {
+    color: #ff3000;
+  }
+  .success-color {
+    color: #52c41a;
+  }
+</style>
diff --git a/pages/activity/index.vue b/pages/activity/index.vue
new file mode 100644
index 0000000..dbf1706
--- /dev/null
+++ b/pages/activity/index.vue
@@ -0,0 +1,206 @@
+<!-- 指定满减送的活动列表 -->
+<template>
+  <s-layout class="activity-wrap" :title="state.activityInfo.title">
+    <!-- 活动信息 -->
+    <su-sticky bgColor="#fff">
+      <view class="ss-flex ss-col-top tip-box">
+        <view class="type-text ss-flex ss-row-center">满减：</view>
+        <view class="ss-flex-1">
+          <view class="tip-content" v-for="item in state.activityInfo.rules" :key="item">
+            {{ formatRewardActivityRule(state.activityInfo, item) }}
+          </view>
+        </view>
+        <image class="activity-left-image" src="/static/activity-left.png" />
+        <image class="activity-right-image" src="/static/activity-right.png" />
+      </view>
+    </su-sticky>
+
+    <!-- 商品信息 -->
+    <view class="ss-flex ss-flex-wrap ss-p-x-20 ss-m-t-20 ss-col-top">
+      <view class="goods-list-box">
+        <view class="left-list" v-for="item in state.leftGoodsList" :key="item.id">
+          <s-goods-column
+            class="goods-md-box"
+            size="md"
+            :data="item"
+            @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+            @getHeight="mountMasonry($event, 'left')"
+          >
+            <template v-slot:cart>
+              <button class="ss-reset-button cart-btn"> </button>
+            </template>
+          </s-goods-column>
+        </view>
+      </view>
+      <view class="goods-list-box">
+        <view class="right-list" v-for="item in state.rightGoodsList" :key="item.id">
+          <s-goods-column
+            class="goods-md-box"
+            size="md"
+            :data="item"
+            @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+            @getHeight="mountMasonry($event, 'right')"
+          >
+            <template v-slot:cart>
+              <button class="ss-reset-button cart-btn" />
+            </template>
+          </s-goods-column>
+        </view>
+      </view>
+    </view>
+
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="loadMore"
+    />
+  </s-layout>
+</template>
+<script setup>
+  import { reactive } from 'vue';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import _ from 'lodash';
+  import RewardActivityApi from '@/api/promotion/rewardActivity';
+  import { formatRewardActivityRule } from '@/sheep/hooks/useGoods';
+  import SpuApi from '@/api/product/spu';
+
+  const state = reactive({
+    activityId: 0, // 获得编号
+    activityInfo: {}, // 获得信息
+
+    pagination: {
+      list: [],
+      total: 1,
+      pageNo: 1,
+      pageSize: 8,
+    },
+    loadStatus: '',
+    leftGoodsList: [],
+    rightGoodsList: [],
+  });
+
+  // 加载瀑布流
+  let count = 0;
+  let leftHeight = 0;
+  let rightHeight = 0;
+
+  function mountMasonry(height = 0, where = 'left') {
+    if (!state.pagination.list[count]) return;
+
+    if (where === 'left') {
+      leftHeight += height;
+    } else {
+      rightHeight += height;
+    }
+    if (leftHeight <= rightHeight) {
+      state.leftGoodsList.push(state.pagination.list[count]);
+    } else {
+      state.rightGoodsList.push(state.pagination.list[count]);
+    }
+    count++;
+  }
+
+  // 加载商品信息
+  async function getList() {
+    // 处理拓展参数
+    const params = {};
+    if (state.activityInfo.productScope === 2) {
+      params.ids = state.activityInfo.productSpuIds.join(',');
+    } else if (state.activityInfo.productScope === 3) {
+      params.categoryIds = state.activityInfo.productSpuIds.join(',');
+    }
+    // 请求数据
+    state.loadStatus = 'loading';
+    const { code, data } = await SpuApi.getSpuPage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+      ...params
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+    mountMasonry();
+  }
+
+  // 加载活动信息
+  async function getActivity(id) {
+    const { code, data } = await RewardActivityApi.getRewardActivity(id);
+    if (code === 0) {
+      state.activityInfo = data;
+    }
+  }
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getList();
+  }
+
+  // 上拉加载更多
+  onReachBottom(() => {
+    loadMore();
+  });
+
+  onLoad(async (options) => {
+    state.activityId = options.activityId;
+    await getActivity(state.activityId);
+    await getList(state.activityId);
+  });
+</script>
+<style lang="scss" scoped>
+  .goods-list-box {
+    width: 50%;
+    box-sizing: border-box;
+    .left-list {
+      margin-right: 10rpx;
+      margin-bottom: 20rpx;
+    }
+    .right-list {
+      margin-left: 10rpx;
+      margin-bottom: 20rpx;
+    }
+  }
+  .tip-box {
+    background: #fff0e7;
+    padding: 20rpx;
+    width: 100%;
+    position: relative;
+    box-sizing: border-box;
+    .activity-left-image {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 58rpx;
+      height: 36rpx;
+    }
+    .activity-right-image {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 72rpx;
+      height: 50rpx;
+    }
+    .type-text {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ff6000;
+      line-height: 42rpx;
+    }
+    .tip-content {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ff6000;
+      line-height: 42rpx;
+    }
+  }
+</style>
diff --git a/pages/activity/seckill/list.vue b/pages/activity/seckill/list.vue
new file mode 100644
index 0000000..7a0abf3
--- /dev/null
+++ b/pages/activity/seckill/list.vue
@@ -0,0 +1,385 @@
+<!-- 秒杀活动列表 -->
+<template>
+  <s-layout navbar="inner" :bgStyle="{ color: 'rgb(245,28,19)' }">
+    <!--顶部背景图-->
+    <view
+        class="page-bg"
+        :style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]"
+    ></view>
+    <!-- 时间段轮播图 -->
+    <view class="header" v-if="activeTimeConfig?.sliderPicUrls?.length > 0">
+      <swiper indicator-dots="true" autoplay="true" :circular="true" interval="3000" duration="1500"
+              indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
+        <block v-for="(picUrl, index) in activeTimeConfig.sliderPicUrls" :key="index">
+          <swiper-item class="borRadius14">
+            <image :src="picUrl" class="slide-image borRadius14" lazy-load />
+          </swiper-item>
+        </block>
+      </swiper>
+    </view>
+    <!-- 时间段列表 -->
+    <view class="flex align-center justify-between ss-p-25">
+      <!-- 左侧图标 -->
+      <view class="time-icon">
+        <!-- TODO 芋艿：图片统一维护 -->
+        <image class="ss-w-100 ss-h-100" src="http://mall.yudao.iocoder.cn/static/images/priceTag.png" />
+      </view>
+      <scroll-view class="time-list" :scroll-into-view="activeTimeElId" scroll-x scroll-with-animation>
+        <view v-for="(config, index) in timeConfigList" :key="index"
+              :class="['item', { active: activeTimeIndex === index}]"
+              :id="`timeItem${index}`"
+              @tap="handleChangeTimeConfig(index)">
+          <!-- 活动起始时间 -->
+          <view class="time">{{ config.startTime }}</view>
+          <!-- 活动状态 -->
+          <view class="status">{{ config.status }}</view>
+        </view>
+      </scroll-view>
+    </view>
+
+    <!-- 内容区 -->
+    <view class="list-content">
+      <!-- 活动倒计时 -->
+      <view class="content-header ss-flex-col ss-col-center ss-row-center">
+        <view class="content-header-box ss-flex ss-row-center">
+          <view class="countdown-box ss-flex" v-if="activeTimeConfig?.status === TimeStatusEnum.STARTED">
+            <view class="countdown-title ss-m-r-12">距结束</view>
+            <view class="ss-flex countdown-time">
+              <view class="ss-flex countdown-h">{{ countDown.h }}</view>
+              <view class="ss-m-x-4">:</view>
+              <view class="countdown-num ss-flex ss-row-center">{{ countDown.m }}</view>
+              <view class="ss-m-x-4">:</view>
+              <view class="countdown-num ss-flex ss-row-center">{{ countDown.s }}</view>
+            </view>
+          </view>
+          <view v-else> {{ activeTimeConfig?.status }} </view>
+        </view>
+      </view>
+
+      <!-- 活动列表 -->
+      <scroll-view
+        class="scroll-box"
+        :style="{ height: pageHeight + 'rpx' }"
+        scroll-y="true"
+        :scroll-with-animation="false"
+        :enable-back-to-top="true"
+      >
+        <view class="goods-box ss-m-b-20" v-for="activity in activityList" :key="activity.id">
+          <s-goods-column
+            size="lg"
+            :data="{ ...activity, price: activity.seckillPrice }"
+            :goodsFields="goodsFields"
+            :seckillTag="true"
+            @click="sheep.$router.go('/pages/goods/seckill', { id: activity.id })"
+          >
+            <!-- 抢购进度 -->
+            <template #activity>
+              <view class="limit">限量 <text class="ss-m-l-5">{{ activity.stock}} {{activity.unitName}}</text></view>
+              <su-progress :percentage="activity.percent" strokeWidth="10" textInside isAnimate />
+            </template>
+            <!-- 抢购按钮 -->
+            <template #cart>
+              <button :class="['ss-reset-button cart-btn', { disabled: activeTimeConfig.status === TimeStatusEnum.END }]">
+                <span v-if="activeTimeConfig?.status === TimeStatusEnum.WAIT_START">未开始</span>
+                <span v-else-if="activeTimeConfig?.status === TimeStatusEnum.STARTED">马上抢</span>
+                <span v-else>已结束</span>
+              </button>
+            </template>
+          </s-goods-column>
+        </view>
+        <uni-load-more
+          v-if="activityTotal > 0"
+          :status="loadStatus"
+          :content-text="{
+            contentdown: '上拉加载更多',
+          }"
+          @tap="loadMore"
+        />
+      </scroll-view>
+    </view>
+  </s-layout>
+</template>
+<script setup>
+  import {reactive, computed, ref, nextTick} from 'vue';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import { useDurationTime } from '@/sheep/hooks/useGoods';
+  import SeckillApi from "@/api/promotion/seckill";
+  import dayjs from "dayjs";
+  import {TimeStatusEnum} from "@/sheep/util/const";
+
+  // 计算页面高度
+  const { safeAreaInsets, safeArea } = sheep.$platform.device;
+  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+  const pageHeight = (safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sheep.$platform.navbar - 350;
+  const headerBg = sheep.$url.css('/static/img/shop/goods/seckill-header.png');
+
+  // 商品控件显示的字段（不显示库存、销量。改为显示自定义的进度条）
+  const goodsFields = {
+    name: { show: true },
+    introduction: { show: true },
+    price: { show: true },
+    marketPrice: { show: true },
+  };
+
+  //#region 时间段
+  // 时间段列表
+  const timeConfigList = ref([])
+  // 查询时间段
+  const getSeckillConfigList = async () => {
+    const { data } = await SeckillApi.getSeckillConfigList()
+    const now = dayjs();
+    const today = now.format('YYYY-MM-DD')
+    // 判断时间段的状态
+    data.forEach((config, index) => {
+      const startTime = dayjs(`${today} ${config.startTime}`)
+      const endTime = dayjs(`${today} ${config.endTime}`)
+      if (now.isBefore(startTime)) {
+        config.status = TimeStatusEnum.WAIT_START;
+      } else if (now.isAfter(endTime)) {
+        config.status = TimeStatusEnum.END;
+      } else {
+        config.status = TimeStatusEnum.STARTED;
+        activeTimeIndex.value = index;
+      }
+    })
+    timeConfigList.value = data
+    // 默认选中进行中的活动
+    handleChangeTimeConfig(activeTimeIndex.value);
+    // 滚动到进行中的时间段
+    scrollToTimeConfig(activeTimeIndex.value)
+  }
+
+  // 滚动到指定时间段
+  const activeTimeElId = ref('') // 当前选中的时间段的元素ID
+  const scrollToTimeConfig = (index) => {
+    nextTick(() => activeTimeElId.value = `timeItem${index}`)
+  }
+
+  // 切换时间段
+  const activeTimeIndex = ref(0) // 当前选中的时间段的索引
+  const activeTimeConfig = computed(() => timeConfigList.value[activeTimeIndex.value]) // 当前选中的时间段
+  const handleChangeTimeConfig = (index) => {
+    activeTimeIndex.value = index
+
+    // 查询活动列表
+    activityPageParams.pageNo = 1
+    activityList.value = []
+    getActivityList();
+  }
+
+  // 倒计时
+  const countDown = computed(() => {
+    const endTime = activeTimeConfig.value?.endTime
+    if (endTime) {
+      return useDurationTime(`${dayjs().format('YYYY-MM-DD')} ${endTime}`);
+    }
+  });
+
+  //#endregion
+
+  //#region 分页查询活动列表
+
+  // 查询活动列表
+  const activityPageParams = reactive({
+    id: 0, // 时间段 ID
+    pageNo: 1, // 页码
+    pageSize: 5, // 每页数量
+  })
+  const activityTotal = ref(0) // 活动总数
+  const activityList = ref([]) // 活动列表
+  const loadStatus = ref('') // 页面加载状态
+  async function getActivityList() {
+    loadStatus.value = 'loading';
+    const { data } = await SeckillApi.getSeckillActivityPage(activityPageParams)
+    data.list.forEach(activity => {
+      // 计算抢购进度
+      activity.percent = parseInt(100 * (activity.totalStock - activity.stock) / activity.totalStock);
+    })
+    activityList.value = activityList.value.concat(...data.list);
+    activityTotal.value = data.total;
+
+    loadStatus.value = activityList.value.length < activityTotal.value ? 'more' : 'noMore';
+  }
+
+  // 加载更多
+  function loadMore() {
+    if (loadStatus.value !== 'noMore') {
+      activityPageParams.pageNo += 1
+      getActivityList();
+    }
+  }
+  // 上拉加载更多
+  onReachBottom(() => loadMore());
+
+  //#endregion
+
+  // 页面初始化
+  onLoad(async () => {
+    await getSeckillConfigList()
+  });
+</script>
+<style lang="scss" scoped>
+  // 顶部背景图
+  .page-bg {
+    width: 100%;
+    height: 458rpx;
+    background: v-bind(headerBg) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  // 时间段轮播图
+  .header {
+    width: 710rpx;
+    height: 330rpx;
+    margin: -276rpx auto 0 auto;
+    border-radius: 14rpx;
+    overflow: hidden;
+    swiper{
+      height: 330rpx !important;
+      border-radius: 14rpx;
+      overflow: hidden;
+    }
+
+    image {
+      width: 100%;
+      height: 100%;
+      border-radius: 14rpx;
+      overflow: hidden;
+      img{
+        border-radius: 14rpx;
+      }
+    }
+  }
+
+  // 时间段列表：左侧图标
+  .time-icon {
+    width: 75rpx;
+    height: 70rpx;
+  }
+  // 时间段列表
+  .time-list {
+    width: 596rpx;
+    white-space: nowrap;
+    // 时间段
+    .item {
+      display: inline-block;
+      font-size: 20rpx;
+      color: #666;
+      text-align: center;
+      box-sizing: border-box;
+      margin-right: 30rpx;
+      width: 130rpx;
+      // 开始时间
+      .time {
+        font-size: 36rpx;
+        font-weight: 600;
+        color: #333;
+      }
+      // 选中的时间段
+      &.active {
+        .time {
+          color: var(--ui-BG-Main);
+        }
+        // 状态
+        .status {
+          height: 30rpx;
+          line-height: 30rpx;
+          border-radius: 15rpx;
+          width: 128rpx;
+          background: linear-gradient(90deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  // 内容区
+  .list-content {
+    position: relative;
+    z-index: 3;
+    margin: 0 20rpx 0 20rpx;
+    background: #fff;
+    border-radius: 20rpx 20rpx 0 0;
+    .content-header {
+      width: 100%;
+      border-radius: 20rpx 20rpx 0 0;
+      height: 150rpx;
+      background: linear-gradient(180deg, #fff4f7, #ffe6ec);
+
+      .content-header-box {
+        width: 678rpx;
+        height: 64rpx;
+        background: rgba($color: #fff, $alpha: 0.66);
+        border-radius: 32px;
+        // 场次倒计时内容
+        .countdown-title {
+          font-size: 28rpx;
+          font-weight: 500;
+          color: #333333;
+          line-height: 28rpx;
+        }
+        // 场次倒计时
+        .countdown-time {
+          font-size: 28rpx;
+          color: rgba(#ed3c30, 0.23);
+          // 场次倒计时：小时部分
+          .countdown-h {
+            font-size: 24rpx;
+            font-family: OPPOSANS;
+            font-weight: 500;
+            color: #ffffff;
+            padding: 0 4rpx;
+            height: 40rpx;
+            background: rgba(#ed3c30, 0.23);
+            border-radius: 6rpx;
+          }
+          // 场次倒计时：分钟、秒
+          .countdown-num {
+            font-size: 24rpx;
+            font-family: OPPOSANS;
+            font-weight: 500;
+            color: #ffffff;
+            width: 40rpx;
+            height: 40rpx;
+            background: rgba(#ed3c30, 0.23);
+            border-radius: 6rpx;
+          }
+        }
+      }
+    }
+    // 活动列表
+    .scroll-box {
+      height: 900rpx;
+      // 活动
+      .goods-box {
+        position: relative;
+        // 抢购按钮
+        .cart-btn {
+          position: absolute;
+          bottom: 10rpx;
+          right: 20rpx;
+          z-index: 11;
+          height: 44rpx;
+          line-height: 50rpx;
+          padding: 0 20rpx;
+          border-radius: 25rpx;
+          font-size: 24rpx;
+          color: #fff;
+          background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
+
+          &.disabled {
+            background: $gray-b;
+            color: #fff;
+          }
+        }
+        // 秒杀限量商品数
+        .limit {
+          font-size: 22rpx;
+          color: $dark-9;
+          margin-bottom: 5rpx;
+        }
+      }
+    }
+  }
+</style>
diff --git a/pages/app/sign.vue b/pages/app/sign.vue
new file mode 100644
index 0000000..c6a5ee4
--- /dev/null
+++ b/pages/app/sign.vue
@@ -0,0 +1,451 @@
+<!-- 签到界面  -->
+<template>
+  <s-layout title="签到有礼">
+    <s-empty v-if="state.loading" icon="/static/data-empty.png" text="签到活动还未开始" />
+    <view v-if="state.loading" />
+    <view class="sign-wrap" v-else-if="!state.loading">
+      <!-- 签到日历 -->
+      <view class="content-box calendar">
+        <view class="sign-everyday ss-flex ss-col-center ss-row-between ss-p-x-30">
+          <text class="sign-everyday-title">签到日历</text>
+          <view class="sign-num-box">
+            已连续签到 <text class="sign-num">{{ state.signInfo.continuousDay }}</text> 天
+          </view>
+        </view>
+        <view
+          class="list acea-row row-between-wrapper"
+          style="
+            padding: 0 30rpx;
+            height: 240rpx;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          "
+        >
+          <view class="item" v-for="(item, index) in state.signConfigList" :key="index">
+            <view
+              :class="
+                (index  === state.signConfigList.length ? 'reward' : '') +
+                ' ' +
+                (state.signInfo.continuousDay >= item.day ? 'rewardTxt' : '')
+              "
+            >
+              第{{ item.day }}天
+            </view>
+            <view
+              class="venus"
+              :class="
+                (index + 1 === state.signConfigList.length ? 'reward' : '') +
+                ' ' +
+                (state.signInfo.continuousDay >= item.day ? 'venusSelect' : '')
+              "
+            >
+            </view>
+            <view class="num" :class="state.signInfo.continuousDay >= item.day ? 'on' : ''">
+              + {{ item.point }}
+            </view>
+          </view>
+        </view>
+
+        <!-- 签到按钮 -->
+        <view class="myDateTable">
+          <view class="ss-flex ss-col-center ss-row-center sign-box ss-m-y-40">
+            <button
+              class="ss-reset-button sign-btn"
+              v-if="!state.signInfo.todaySignIn"
+              @tap="onSign"
+            >
+              签到
+            </button>
+            <button class="ss-reset-button already-btn" v-else disabled> 已签到 </button>
+          </view>
+        </view>
+      </view>
+
+      <!-- 签到说明 TODO @科举：这里改成【已累计签到】 -->
+      <view class="bg-white ss-m-t-16 ss-p-t-30 ss-p-b-60 ss-p-x-40">
+        <view class="activity-title ss-m-b-30">签到说明</view>
+        <view class="activity-des">1、已累计签到{{state.signInfo.totalDay}}天</view>
+        <view class="activity-des">
+          2、据说连续签到第 {{ state.maxDay }} 天可获得超额积分，一定要坚持签到哦~~~
+        </view>
+      </view>
+    </view>
+
+    <!-- 签到结果弹窗 -->
+    <su-popup :show="state.showModel" type="center" round="10" :isMaskClick="false">
+      <view class="model-box ss-flex-col">
+        <view class="ss-m-t-56 ss-flex-col ss-col-center">
+          <text class="cicon-check-round"></text>
+          <view class="score-title">
+            <text v-if="state.signResult.point">{{ state.signResult.point }} 积分 </text>
+            <text v-if="state.signResult.experience"> {{ state.signResult.experience }} 经验</text>
+          </view>
+          <view class="model-title ss-flex ss-col-center ss-m-t-22 ss-m-b-30">
+            已连续打卡 {{ state.signResult.day }} 天
+          </view>
+        </view>
+        <view class="model-bg ss-flex-col ss-col-center ss-row-right">
+          <view class="title ss-m-b-64">签到成功</view>
+          <view class="ss-m-b-40">
+            <button class="ss-reset-button confirm-btn" @tap="onConfirm">确认</button>
+          </view>
+        </view>
+      </view>
+    </su-popup>
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onReady } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import SignInApi from '@/api/member/signin';
+
+  const headerBg = sheep.$url.css('/static/img/shop/app/sign.png');
+
+  const state = reactive({
+    loading: true,
+
+    signInfo: {}, // 签到信息
+
+    signConfigList: [], // 签到配置列表
+    maxDay: 0, // 最大的签到天数 
+
+    showModel: false, // 签到弹框
+    signResult: {}, // 签到结果
+  });
+
+  // 发起签到
+  async function onSign() {
+    const { code, data } = await SignInApi.createSignInRecord();
+    if (code !== 0) {
+      return;
+    }
+    state.showModel = true;
+    state.signResult = data;
+    // 重新获得签到信息
+    await getSignInfo();
+  }
+
+  // 签到确认刷新页面
+  function onConfirm() {
+    state.showModel = false;
+  }
+
+  // 获得个人签到统计
+  async function getSignInfo() {
+    const { code, data } = await SignInApi.getSignInRecordSummary();
+    if (code !== 0) {
+      return;
+    }
+    state.signInfo = data;
+    state.loading = false;
+  }
+
+  // 获取签到配置
+  async function getSignConfigList() {
+    const { code, data } = await SignInApi.getSignInConfigList();
+    if (code !== 0) {
+      return;
+    }
+    state.signConfigList = data;
+    if (data.length > 0) {
+      state.maxDay = data[data.length - 1].day;
+    }
+  }
+
+  onReady(() => {
+    getSignInfo();
+    getSignConfigList();
+  });
+  // TODO 芋艿：1）css 需要优化，例如说引入的图片；2）删除多余的样式
+</script>
+
+<style lang="scss" scoped>
+  .header-box {
+    border-top: 2rpx solid rgba(#dfdfdf, 0.5);
+  }
+
+  // 日历
+  .calendar {
+    background: #fff;
+
+    .sign-everyday {
+      height: 100rpx;
+      background: rgba(255, 255, 255, 1);
+      border: 2rpx solid rgba(223, 223, 223, 0.4);
+
+      .sign-everyday-title {
+        font-size: 32rpx;
+        color: rgba(51, 51, 51, 1);
+        font-weight: 500;
+      }
+
+      .sign-num-box {
+        font-size: 26rpx;
+        font-weight: 500;
+        color: rgba(153, 153, 153, 1);
+
+        .sign-num {
+          font-size: 30rpx;
+          font-weight: 600;
+          color: #ff6000;
+          padding: 0 10rpx;
+          font-family: OPPOSANS;
+        }
+      }
+    }
+
+    // 年月日
+    .bar {
+      height: 100rpx;
+
+      .date {
+        font-size: 30rpx;
+        font-family: OPPOSANS;
+        font-weight: 500;
+        color: #333333;
+        line-height: normal;
+      }
+    }
+
+    .cicon-back {
+      margin-top: 6rpx;
+      font-size: 30rpx;
+      color: #c4c4c4;
+      line-height: normal;
+    }
+
+    .cicon-forward {
+      margin-top: 6rpx;
+      font-size: 30rpx;
+      color: #c4c4c4;
+      line-height: normal;
+    }
+
+    // 星期
+    .week {
+      .week-item {
+        font-size: 24rpx;
+        font-weight: 500;
+        color: rgba(153, 153, 153, 1);
+        flex: 1;
+      }
+    }
+
+    // 日历表
+    .myDateTable {
+      display: flex;
+      flex-wrap: wrap;
+
+      .dateCell {
+        width: calc(750rpx / 7);
+        height: 80rpx;
+        font-size: 26rpx;
+        font-weight: 400;
+        color: rgba(51, 51, 51, 1);
+      }
+    }
+  }
+
+  .is-sign {
+    width: 48rpx;
+    height: 48rpx;
+    position: relative;
+
+    .is-sign-num {
+      font-size: 24rpx;
+      font-family: OPPOSANS;
+      font-weight: 500;
+      line-height: normal;
+    }
+
+    .is-sign-image {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 48rpx;
+      height: 48rpx;
+    }
+  }
+
+  .cell-num {
+    font-size: 24rpx;
+    font-family: OPPOSANS;
+    font-weight: 500;
+    color: #333333;
+    line-height: normal;
+  }
+
+  .cicon-title {
+    position: absolute;
+    right: -10rpx;
+    top: -6rpx;
+    font-size: 20rpx;
+    color: red;
+  }
+
+  // 签到按钮
+  .sign-box {
+    height: 140rpx;
+    width: 100%;
+
+    .sign-btn {
+      width: 710rpx;
+      height: 80rpx;
+      border-radius: 35rpx;
+      font-size: 30rpx;
+      font-weight: 500;
+      box-shadow: 0 0.2em 0.5em rgba(#ff6000, 0.4);
+      background: linear-gradient(90deg, #ff6000, #fe832a);
+      color: #fff;
+    }
+
+    .already-btn {
+      width: 710rpx;
+      height: 80rpx;
+      border-radius: 35rpx;
+      font-size: 30rpx;
+      font-weight: 500;
+    }
+  }
+
+  .model-box {
+    width: 520rpx;
+    // height: 590rpx;
+    background: linear-gradient(177deg, #ff6000 0%, #fe832a 100%);
+    // background: linear-gradient(177deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    border-radius: 10rpx;
+
+    .cicon-check-round {
+      font-size: 70rpx;
+      color: #fff;
+    }
+
+    .score-title {
+      font-size: 34rpx;
+      font-family: OPPOSANS;
+      font-weight: 500;
+      color: #fcff00;
+    }
+
+    .model-title {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #ffffff;
+    }
+
+    .model-bg {
+      width: 520rpx;
+      height: 344rpx;
+      background-size: 100% 100%;
+      background-image: v-bind(headerBg);
+      background-repeat: no-repeat;
+      border-radius: 0 0 10rpx 10rpx;
+
+      .title {
+        font-size: 34rpx;
+        font-weight: bold;
+        // color: var(--ui-BG-Main);
+        color: #ff6000;
+      }
+
+      .subtitle {
+        font-size: 26rpx;
+        font-weight: 500;
+        color: #999999;
+      }
+
+      .cancel-btn {
+        width: 220rpx;
+        height: 70rpx;
+        border: 2rpx solid #ff6000;
+        border-radius: 35rpx;
+        font-size: 28rpx;
+        font-weight: 500;
+        color: #ff6000;
+        line-height: normal;
+        margin-right: 10rpx;
+      }
+
+      .confirm-btn {
+        width: 220rpx;
+        height: 70rpx;
+        background: linear-gradient(90deg, #ff6000, #fe832a);
+        box-shadow: 0 0.2em 0.5em rgba(#ff6000, 0.4);
+        border-radius: 35rpx;
+        font-size: 28rpx;
+        font-weight: 500;
+        color: #ffffff;
+        line-height: normal;
+      }
+    }
+  }
+
+  //签到说明
+  .activity-title {
+    font-size: 32rpx;
+    font-weight: 500;
+    color: #333333;
+    line-height: normal;
+  }
+
+  .activity-des {
+    font-size: 26rpx;
+    font-weight: 500;
+    color: #666666;
+    line-height: 40rpx;
+  }
+
+  .reward {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAA4CAYAAAC1+AWFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowYWFmYjU3Mi03MGJhLTRiNDctOTI2Yi0zOThlZDkzZDkxMDkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUEyNzZEMjZEMDFCMTFFOEIzQzhEMjMxNjI1NENDQjciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUEyNzZEMjVEMDFCMTFFOEIzQzhEMjMxNjI1NENDQjciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZmRjNTM0MmUtNmFkOC1iMDRhLThjZTEtMjk2YWYzM2FkMmUxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBhYWZiNTcyLTcwYmEtNGI0Ny05MjZiLTM5OGVkOTNkOTEwOSIv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');
+    width: 75rpx;
+    height: 56rpx;
+  }
+
+  .rewardTxt {
+    width: 74rpx;
+    height: 32rpx;
+    background-color: #f4b409;
+    border-radius: 16rpx;
+    font-size: 20rpx;
+    color: #a57d3f;
+    line-height: 32rpx;
+  }
+
+  .venusSelect {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowYWFmYjU3Mi03MGJhLTRiNDctOTI2Yi0zOThlZDkzZDkxMDkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzkwRkI4NEFEMDFCMTFFODhDNDdBMDVGOTBBN0U2NTQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzkwRkI4NDlEMDFCMTFFODhDNDdBMDVGOTBBN0U2NTQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZmRjNTM0MmUtNmFkOC1iMDRhLThjZTEtMjk2YWYzM2FkMmUxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBhYWZiNTcyLTcwYmEtNGI0Ny05MjZiLTM5OGVkOTNkOTEwOSIv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');
+  }
+
+  .venus {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowYWFmYjU3Mi03MGJhLTRiNDctOTI2Yi0zOThlZDkzZDkxMDkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDQ3N0E3RkJEMDFCMTFFODhGODVBOTc1NEM5Nzg2NzkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDQ3N0E3RkFEMDFCMTFFODhGODVBOTc1NEM5Nzg2NzkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZmRjNTM0MmUtNmFkOC1iMDRhLThjZTEtMjk2YWYzM2FkMmUxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBhYWZiNTcyLTcwYmEtNGI0Ny05MjZiLTM5OGVkOTNkOTEwOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnZClGIAAAT7SURBVHja7JtLcxtFEMdnn1rJUhIrTiS7KLsK/EXwNck3gCMcuUFx4QvACW48buHGMZxJPkiowpjC2LElcKzXSqul/6OdoOB9zezsCCimqmvXtdqd+U33dPf0rq2Tn54zg81KjrGuB75x8FbuddsQWIvkS5IxySA5b5no2DUE94TkKPk7IHmf5JDkUQJdW7MNw623o+Ra698KmAdnDNLeIJwRSHvDcLVDVnYynU771fnLl9eFcLZts+VymQf5iJ6pzfFYJeKgT/IZyTskXdWOPM9jjYbPLMticRyz2Sxk8/lc9XFDksckH1IcDKtq8FOSD6rMIuCCoPHXrBIk/qYDC0MlyO1kTBOSj6uuwXerwPn+63DrrdFo8OsV2ns6nEy3Chwg8lpFyK4OwNrgNGpSvxfFoDzP5etJR8PzsiYETmk+X5BjmpkBrHPGU109TeKqv5X3rT3QQ3ObaPDGRjIZXWZpol+b/cebUUA4iuHw938UoNbk9+zsjP16eqoV4JfjH1uqgLjxe10DiaKIDYZDNqfU7OrqSifjkzxIuwDubV2juLi8ZK7j8oT74uJSJ+BRHqQtC6cS/7A9wtrDvb7v84A9Go2UMyQZSFsWrmz6td4GgyF38a7r8lgGefHiQjnjkYG064ZDmjWktecRnEOCDa9DpjqdTrnUDSk2vJXgsHGdTKa0t5vx/V0Yhvy4WMx5hdf3VqYJDQqTxW+QdmECPM8h8flvPPRFR/QXBEEuKEw9Yz/5AyoDtBkei5zriyw4pGVFmoOHPD7+mQ/ccR1mWzZpyuIacx2Hgzl0FJkIjjBTHBeLiO6LuDZH4zFbRkt63oLt7+8XAmJcIhFP0eTn2C9CgzBTrPjUp7XbW6VSJGjx5OSEBhsz2wGkxc0R967LuukuSWKaFEwMnXJQSL/fZ51Op/QSuL5OdVjY7beFBq2sAlHZ/A8aOTg4YKenv/EBr8Nl5ZUO6jPJRGCg0dJie/d3WbPZlMpPMwpZsN0Y2sOVb7PcOzou22CGe3u7fB3J3Cd+udvvScG9soT0Kt13tAZj4UVRwHmWtZClcj+azX6vxx0GN8ECUFyHjnsEp+KlM8b3TBTKBCDqkA/SIFV20jCbO3duk8OIcgHF7G9ttbinVYFLcTBgeAAP+vc4mAkJVywLibARpZvOjWWA36rApYSI1+DSMhltkJPpRGIyJrXAZeWiWiCnk9kNU4RGl8m5MN1VLFzwWKobLm83kQtZbnMb8lgYJ2aIYH//3g73lEHQ5ECAXYUSu7QWZeCKqmoCcqSyPkQgd8lHbne3uSMRbWenSwNtU476BxtT9oJQOZ3OKKloq6SmmXBlyoZKb3nG4wnXyt1ul9261UkN9ggjvd497mDOz885KGN3pfvKg1OuixY15JCHh2/ymFjUms2AMqD9BFB/qwUQg5ZtrVY9b7H/LxtmZSCbaCr9KgGmpEeG6qpzM2tQBHudb5eKNLfKiUMzgAIyL6uRreHklB9qX4MDlQfLpHUV4AY6AB+rzl4ZyIqa+0aHiX6UlDTwMcK2CqQoEGmEE5+RfFK4N636vWjKh0Cp5ceS38k8JXko8yHQ7W7PXKBPBvYwGegNF4/q12g05mV7HXClqgs1ffEr+/LmaTIx0nCb+uI3U5M64Tadi5aBrBXORLKdB1k7nKndhID8GqUaErze/coEXJ1OJm9CY2bw3wr+FGAAoa6PIUihovYAAAAASUVORK5CYII=');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    width: 56rpx;
+    height: 56rpx;
+    margin: 10rpx 0;
+  }
+
+  .num {
+    font-size: 36rpx;
+    font-family: 'Guildford Pro';
+  }
+
+  .item {
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid #eee;
+    height: 130rpx;
+  }
+
+  .reward {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAA4CAYAAAC1+AWFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowYWFmYjU3Mi03MGJhLTRiNDctOTI2Yi0zOThlZDkzZDkxMDkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUEyNzZEMjZEMDFCMTFFOEIzQzhEMjMxNjI1NENDQjciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUEyNzZEMjVEMDFCMTFFOEIzQzhEMjMxNjI1NENDQjciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZmRjNTM0MmUtNmFkOC1iMDRhLThjZTEtMjk2YWYzM2FkMmUxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBhYWZiNTcyLTcwYmEtNGI0Ny05MjZiLTM5OGVkOTNkOTEwOSIv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');
+    width: 75rpx;
+    height: 56rpx;
+  }
+
+  .on {
+    background-color: #999 !important;
+  }
+</style>
diff --git a/pages/chat/components/goods.vue b/pages/chat/components/goods.vue
new file mode 100644
index 0000000..7fbc95c
--- /dev/null
+++ b/pages/chat/components/goods.vue
@@ -0,0 +1,63 @@
+<template>
+  <view class="goods ss-flex">
+    <image class="image" :src="sheep.$url.cdn(goodsData.image)" mode="aspectFill"> </image>
+    <view class="ss-flex-1">
+      <view class="title ss-line-2">
+        {{ goodsData.title }}
+      </view>
+      <view v-if="goodsData.subtitle" class="subtitle ss-line-1">
+        {{ goodsData.subtitle }}
+      </view>
+      <view class="price ss-m-t-8">
+        ￥{{ isArray(goodsData.price) ? goodsData.price[0] : goodsData.price }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { isArray } from 'lodash';
+
+  const props = defineProps({
+    goodsData: {
+      type: Object,
+      default: {},
+    },
+  });
+</script>
+
+<style lang="scss" scoped>
+  .goods {
+    background: #fff;
+    padding: 20rpx;
+    border-radius: 12rpx;
+
+    .image {
+      width: 116rpx;
+      height: 116rpx;
+      flex-shrink: 0;
+      margin-right: 20rpx;
+    }
+
+    .title {
+      height: 64rpx;
+      line-height: 32rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #333;
+    }
+
+    .subtitle {
+      font-size: 24rpx;
+      font-weight: 400;
+      color: #999;
+    }
+
+    .price {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ff3000;
+    }
+  }
+</style>
diff --git a/pages/chat/components/order.vue b/pages/chat/components/order.vue
new file mode 100644
index 0000000..cf57f63
--- /dev/null
+++ b/pages/chat/components/order.vue
@@ -0,0 +1,122 @@
+<template>
+  <view class="order">
+    <view class="top ss-flex ss-row-between">
+      <span>{{ orderData.order_sn }}</span>
+      <span>{{ orderData.create_time.split(' ')[1] }}</span>
+    </view>
+    <template v-if="from != 'msg'">
+      <view class="bottom ss-flex" v-for="item in orderData.items" :key="item">
+        <image class="image" :src="sheep.$url.cdn(item.goods_image)" mode="aspectFill"> </image>
+        <view class="ss-flex-1">
+          <view class="title ss-line-2">
+            {{ item.goods_title }}
+          </view>
+          <view v-if="item.goods_num" class="num ss-m-b-10"> 数量：{{ item.goods_num }} </view>
+          <view class="ss-flex ss-row-between ss-m-t-8">
+            <span class="price">￥{{ item.goods_price }}</span>
+            <span class="status">{{ orderData.status_text }}</span>
+          </view>
+        </view>
+      </view>
+    </template>
+    <template v-else>
+      <view class="bottom ss-flex" v-for="item in [orderData.items[0]]" :key="item">
+        <image class="image" :src="sheep.$url.cdn(item.goods_image)" mode="aspectFill"> </image>
+        <view class="ss-flex-1">
+          <view class="title title-1 ss-line-1">
+            {{ item.goods_title }}
+          </view>
+          <view class="order-total ss-flex ss-row-between ss-m-t-8">
+            <span>共{{ orderData.items.length }}件商品</span>
+            <span>合计 ¥{{ orderData.pay_fee }}</span>
+          </view>
+          <view class="ss-flex ss-row-right ss-m-t-8">
+            <span class="status">{{ orderData.status_text }}</span>
+          </view>
+        </view>
+      </view>
+    </template>
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+
+  const props = defineProps({
+    from: String,
+    orderData: {
+      type: Object,
+      default: {},
+    },
+  });
+</script>
+
+<style lang="scss" scoped>
+  .order {
+    background: #fff;
+    padding: 20rpx;
+    border-radius: 12rpx;
+
+    .top {
+      line-height: 40rpx;
+      font-size: 24rpx;
+      font-weight: 400;
+      color: #999;
+      border-bottom: 1px solid rgba(223, 223, 223, 0.5);
+      margin-bottom: 20rpx;
+    }
+
+    .bottom {
+      margin-bottom: 20rpx;
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+
+      .image {
+        flex-shrink: 0;
+        width: 116rpx;
+        height: 116rpx;
+        margin-right: 20rpx;
+      }
+
+      .title {
+        height: 64rpx;
+        line-height: 32rpx;
+        font-size: 26rpx;
+        font-weight: 500;
+        color: #333;
+
+        &.title-1 {
+          height: 32rpx;
+          width: 300rpx;
+        }
+      }
+
+      .num {
+        font-size: 24rpx;
+        font-weight: 400;
+        color: #999;
+      }
+
+      .price {
+        font-size: 26rpx;
+        font-weight: 500;
+        color: #ff3000;
+      }
+
+      .status {
+        font-size: 24rpx;
+        font-weight: 500;
+        color: var(--ui-BG-Main);
+      }
+
+      .order-total {
+        line-height: 28rpx;
+        font-size: 24rpx;
+        font-weight: 400;
+        color: #999;
+      }
+    }
+  }
+</style>
diff --git a/pages/chat/components/select-popup.vue b/pages/chat/components/select-popup.vue
new file mode 100644
index 0000000..f8f0f3e
--- /dev/null
+++ b/pages/chat/components/select-popup.vue
@@ -0,0 +1,152 @@
+<template>
+  <su-popup :show="show" showClose round="10" backgroundColor="#eee" @close="emits('close')">
+    <view class="select-popup">
+      <view class="title">
+        <span>{{ mode == 'goods' ? '我的浏览' : '我的订单' }}</span>
+      </view>
+      <scroll-view
+        class="scroll-box"
+        scroll-y="true"
+        :scroll-with-animation="true"
+        :show-scrollbar="false"
+        @scrolltolower="loadmore"
+      >
+        <view
+          class="item"
+          v-for="item in state.pagination.data"
+          :key="item"
+          @tap="emits('select', { type: mode, data: item })"
+        >
+          <template v-if="mode == 'goods'">
+            <GoodsItem :goodsData="item.goods" />
+          </template>
+          <template v-if="mode == 'order'">
+            <OrderItem :orderData="item" />
+          </template>
+        </view>
+        <uni-load-more :status="state.loadStatus" :content-text="{ contentdown: '上拉加载更多' }" />
+      </scroll-view>
+    </view>
+  </su-popup>
+</template>
+
+<script setup>
+  import { reactive, watch } from 'vue';
+  import sheep from '@/sheep';
+  import _ from 'lodash';
+  import GoodsItem from './goods.vue';
+  import OrderItem from './order.vue';
+  import OrderApi from '@/api/trade/order';
+  import SpuHistoryApi from '@/api/product/history';
+
+  const emits = defineEmits(['select', 'close']);
+  const props = defineProps({
+    mode: {
+      type: String,
+      default: 'goods',
+    },
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  watch(
+    () => props.mode,
+    () => {
+      state.pagination.data = [];
+      if (props.mode) {
+        getList(state.pagination.page);
+      }
+    },
+  );
+
+  const state = reactive({
+    loadStatus: '',
+    pagination: {
+      data: [],
+      current_page: 1,
+      total: 1,
+      last_page: 1,
+    },
+  });
+
+  async function getList(page, list_rows = 5) {
+    state.loadStatus = 'loading';
+    const res =
+      props.mode == 'goods'
+        ? await SpuHistoryApi.getBrowseHistoryPage({
+            page,
+            list_rows,
+          })
+        : await OrderApi.getOrderPage({
+            page,
+            list_rows,
+          });
+    let orderList = _.concat(state.pagination.data, res.data.data);
+    state.pagination = {
+      ...res.data,
+      data: orderList,
+    };
+    if (state.pagination.current_page < state.pagination.last_page) {
+      state.loadStatus = 'more';
+    } else {
+      state.loadStatus = 'noMore';
+    }
+  }
+
+  function loadmore() {
+    if (state.loadStatus !== 'noMore') {
+      getList(state.pagination.current_page + 1);
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .select-popup {
+    max-height: 600rpx;
+
+    .title {
+      height: 100rpx;
+      line-height: 100rpx;
+      padding: 0 26rpx;
+      background: #fff;
+      border-radius: 20rpx 20rpx 0 0;
+
+      span {
+        font-size: 32rpx;
+        position: relative;
+
+        &::after {
+          content: '';
+          display: block;
+          width: 100%;
+          height: 2px;
+          z-index: 1;
+          position: absolute;
+          left: 0;
+          bottom: -15px;
+          background: var(--ui-BG-Main);
+          pointer-events: none;
+        }
+      }
+    }
+
+    .scroll-box {
+      height: 500rpx;
+    }
+
+    .item {
+      background: #fff;
+      margin: 26rpx 26rpx 0;
+      border-radius: 20rpx;
+
+      :deep() {
+        .image {
+          width: 140rpx;
+          height: 140rpx;
+        }
+      }
+    }
+  }
+</style>
diff --git a/pages/chat/emoji.js b/pages/chat/emoji.js
new file mode 100644
index 0000000..83e6e84
--- /dev/null
+++ b/pages/chat/emoji.js
@@ -0,0 +1,58 @@
+export const emojiList = [
+  { name: '[笑掉牙]', file: 'xiaodiaoya.png' },
+  { name: '[可爱]', file: 'keai.png' },
+  { name: '[冷酷]', file: 'lengku.png' },
+  { name: '[闭嘴]', file: 'bizui.png' },
+  { name: '[生气]', file: 'shengqi.png' },
+  { name: '[惊恐]', file: 'jingkong.png' },
+  { name: '[瞌睡]', file: 'keshui.png' },
+  { name: '[大笑]', file: 'daxiao.png' },
+  { name: '[爱心]', file: 'aixin.png' },
+  { name: '[坏笑]', file: 'huaixiao.png' },
+  { name: '[飞吻]', file: 'feiwen.png' },
+  { name: '[疑问]', file: 'yiwen.png' },
+  { name: '[开心]', file: 'kaixin.png' },
+  { name: '[发呆]', file: 'fadai.png' },
+  { name: '[流泪]', file: 'liulei.png' },
+  { name: '[汗颜]', file: 'hanyan.png' },
+  { name: '[惊悚]', file: 'jingshu.png' },
+  { name: '[困~]', file: 'kun.png' },
+  { name: '[心碎]', file: 'xinsui.png' },
+  { name: '[天使]', file: 'tianshi.png' },
+  { name: '[晕]', file: 'yun.png' },
+  { name: '[啊]', file: 'a.png' },
+  { name: '[愤怒]', file: 'fennu.png' },
+  { name: '[睡着]', file: 'shuizhuo.png' },
+  { name: '[面无表情]', file: 'mianwubiaoqing.png' },
+  { name: '[难过]', file: 'nanguo.png' },
+  { name: '[犯困]', file: 'fankun.png' },
+  { name: '[好吃]', file: 'haochi.png' },
+  { name: '[呕吐]', file: 'outu.png' },
+  { name: '[龇牙]', file: 'ziya.png' },
+  { name: '[懵比]', file: 'mengbi.png' },
+  { name: '[白眼]', file: 'baiyan.png' },
+  { name: '[饿死]', file: 'esi.png' },
+  { name: '[凶]', file: 'xiong.png' },
+  { name: '[感冒]', file: 'ganmao.png' },
+  { name: '[流汗]', file: 'liuhan.png' },
+  { name: '[笑哭]', file: 'xiaoku.png' },
+  { name: '[流口水]', file: 'liukoushui.png' },
+  { name: '[尴尬]', file: 'ganga.png' },
+  { name: '[惊讶]', file: 'jingya.png' },
+  { name: '[大惊]', file: 'dajing.png' },
+  { name: '[不好意思]', file: 'buhaoyisi.png' },
+  { name: '[大闹]', file: 'danao.png' },
+  { name: '[不可思议]', file: 'bukesiyi.png' },
+  { name: '[爱你]', file: 'aini.png' },
+  { name: '[红心]', file: 'hongxin.png' },
+  { name: '[点赞]', file: 'dianzan.png' },
+  { name: '[恶魔]', file: 'emo.png' },
+];
+
+export let emojiPage = {};
+emojiList.forEach((item, index) => {
+  if (!emojiPage[Math.floor(index / 30) + 1]) {
+    emojiPage[Math.floor(index / 30) + 1] = [];
+  }
+  emojiPage[Math.floor(index / 30) + 1].push(item);
+});
diff --git a/pages/chat/index.vue b/pages/chat/index.vue
new file mode 100644
index 0000000..1d3dfac
--- /dev/null
+++ b/pages/chat/index.vue
@@ -0,0 +1,870 @@
+<template>
+  <s-layout class="chat-wrap" title="客服" navbar="inner">
+    <div class="status">
+      {{ socketState.isConnect ? customerServiceInfo.title : '网络已断开，请检查网络后刷新重试' }}
+    </div>
+    <div class="page-bg" :style="{ height: sys_navBar + 'px' }"></div>
+    <view class="chat-box" :style="{ height: pageHeight + 'px' }">
+      <scroll-view
+        :style="{ height: pageHeight + 'px' }"
+        scroll-y="true"
+        :scroll-with-animation="false"
+        :enable-back-to-top="true"
+        :scroll-into-view="chat.scrollInto"
+      >
+        <button
+          class="loadmore-btn ss-reset-button"
+          v-if="
+            chatList.length &&
+            chatHistoryPagination.lastPage > 1 &&
+            loadingMap[chatHistoryPagination.loadStatus].title
+          "
+          @click="onLoadMore"
+        >
+          {{ loadingMap[chatHistoryPagination.loadStatus].title }}
+          <i
+            class="loadmore-icon sa-m-l-6"
+            :class="loadingMap[chatHistoryPagination.loadStatus].icon"
+          ></i>
+        </button>
+        <view class="message-item ss-flex-col" v-for="(item, index) in chatList" :key="index">
+          <view class="ss-flex ss-row-center ss-col-center">
+            <!-- 日期 -->
+            <view v-if="item.from !== 'system' && showTime(item, index)" class="date-message">
+              {{ formatTime(item.date) }}
+            </view>
+            <!-- 系统消息 -->
+            <view v-if="item.from === 'system'" class="system-message">
+              {{ item.content.text }}
+            </view>
+          </view>
+          <!-- 常见问题 -->
+          <view v-if="item.mode === 'template' && item.content.list.length" class="template-wrap">
+            <view class="title">猜你想问</view>
+            <view
+              class="item"
+              v-for="(item, index) in item.content.list"
+              :key="index"
+              @click="onTemplateList(item)"
+            >
+              * {{ item.title }}
+            </view>
+          </view>
+
+          <view
+            v-if="
+              (item.from === 'customer_service' && item.mode !== 'template') ||
+              item.from === 'customer'
+            "
+            class="ss-flex ss-col-top"
+            :class="[
+              item.from === 'customer_service'
+                ? `ss-row-left`
+                : item.from === 'customer'
+                ? `ss-row-right`
+                : '',
+            ]"
+          >
+            <!-- 客服头像 -->
+            <image
+              v-show="item.from === 'customer_service'"
+              class="chat-avatar ss-m-r-24"
+              :src="
+                sheep.$url.cdn(item?.sender?.avatar) ||
+                sheep.$url.static('/static/img/shop/chat/default.png')
+              "
+              mode="aspectFill"
+            ></image>
+
+            <!-- 发送状态 -->
+            <span
+              v-if="
+                item.from === 'customer' &&
+                index == chatData.chatList.length - 1 &&
+                chatData.isSendSucces !== 0
+              "
+              class="send-status"
+            >
+              <image
+                v-if="chatData.isSendSucces == -1"
+                class="loading"
+                :src="sheep.$url.static('/static/img/shop/chat/loading.png')"
+                mode="aspectFill"
+              ></image>
+              <!-- <image
+                v-if="chatData.isSendSucces == 1"
+                class="warning"
+                :src="sheep.$url.static('/static/img/shop/chat/warning.png')"
+                mode="aspectFill"
+                @click="onAgainSendMessage(item)"
+              ></image> -->
+            </span>
+
+            <!-- 内容 -->
+            <template v-if="item.mode === 'text'">
+              <view class="message-box" :class="[item.from]">
+                <div
+                  class="message-text ss-flex ss-flex-wrap"
+                  @click="onRichtext"
+                  v-html="replaceEmoji(item.content.text)"
+                ></div>
+              </view>
+            </template>
+            <template v-if="item.mode === 'image'">
+              <view class="message-box" :class="[item.from]" :style="{ width: '200rpx' }">
+                <su-image
+                  class="message-img"
+                  isPreview
+                  :previewList="[sheep.$url.cdn(item.content.url)]"
+                  :current="0"
+                  :src="sheep.$url.cdn(item.content.url)"
+                  :height="200"
+                  :width="200"
+                  mode="aspectFill"
+                ></su-image>
+              </view>
+            </template>
+            <template v-if="item.mode === 'goods'">
+              <GoodsItem
+                :goodsData="item.content.item"
+                @tap="
+                  sheep.$router.go('/pages/goods/index', {
+                    id: item.content.item.id,
+                  })
+                "
+              />
+            </template>
+            <template v-if="item.mode === 'order'">
+              <OrderItem
+                from="msg"
+                :orderData="item.content.item"
+                @tap="
+                  sheep.$router.go('/pages/order/detail', {
+                    id: item.content.item.id,
+                  })
+                "
+              />
+            </template>
+            <!-- user头像 -->
+            <image
+              v-show="item.from === 'customer'"
+              class="chat-avatar ss-m-l-24"
+              :src="sheep.$url.cdn(customerUserInfo.avatar)"
+              mode="aspectFill"
+            >
+            </image>
+          </view>
+        </view>
+        <view id="scrollBottom"></view>
+      </scroll-view>
+    </view>
+    <su-fixed bottom>
+      <view class="send-wrap ss-flex">
+        <view class="left ss-flex ss-flex-1">
+          <uni-easyinput
+            class="ss-flex-1 ss-p-l-22"
+            :inputBorder="false"
+            :clearable="false"
+            v-model="chat.msg"
+            placeholder="请输入你要咨询的问题"
+          ></uni-easyinput>
+        </view>
+        <text class="sicon-basic bq" @tap.stop="onTools('emoji')"></text>
+        <text
+          v-if="!chat.msg"
+          class="sicon-edit"
+          :class="{ 'is-active': chat.toolsMode == 'tools' }"
+          @tap.stop="onTools('tools')"
+        ></text>
+        <button v-if="chat.msg" class="ss-reset-button send-btn" @tap="onSendMessage">
+          发送
+        </button>
+      </view>
+    </su-fixed>
+    <su-popup
+      :show="chat.showTools"
+      @close="
+        chat.showTools = false;
+        chat.toolsMode = '';
+      "
+    >
+      <view class="ss-modal-box ss-flex-col">
+        <view class="send-wrap ss-flex">
+          <view class="left ss-flex ss-flex-1">
+            <uni-easyinput
+              class="ss-flex-1 ss-p-l-22"
+              :inputBorder="false"
+              :clearable="false"
+              v-model="chat.msg"
+              placeholder="请输入你要咨询的问题"
+            ></uni-easyinput>
+          </view>
+          <text class="sicon-basic bq" @tap.stop="onTools('emoji')"></text>
+          <text></text>
+          <text
+            v-if="!chat.msg"
+            class="sicon-edit"
+            :class="{ 'is-active': chat.toolsMode == 'tools' }"
+            @tap.stop="onTools('tools')"
+          ></text>
+          <button v-if="chat.msg" class="ss-reset-button send-btn" @tap="onSendMessage">
+            发送
+          </button>
+        </view>
+        <view class="content ss-flex ss-flex-1">
+          <template v-if="chat.toolsMode == 'emoji'">
+            <swiper
+              class="emoji-swiper"
+              :indicator-dots="true"
+              circular
+              indicator-active-color="#7063D2"
+              indicator-color="rgba(235, 231, 255, 1)"
+              :autoplay="false"
+              :interval="3000"
+              :duration="1000"
+            >
+              <swiper-item v-for="emoji in emojiPage" :key="emoji">
+                <view class="ss-flex ss-flex-wrap">
+                  <template v-for="item in emoji" :key="item">
+                    <image
+                      class="emoji-img"
+                      :src="sheep.$url.cdn(`/static/img/chat/emoji/${item.file}`)"
+                      @tap="onEmoji(item)"
+                    >
+                    </image>
+                  </template>
+                </view>
+              </swiper-item>
+            </swiper>
+          </template>
+          <template v-else>
+            <view class="image">
+              <s-uploader
+                file-mediatype="image"
+                :imageStyles="{ width: 50, height: 50, border: false }"
+                @select="onSelect({ type: 'image', data: $event })"
+              >
+                <image
+                  class="icon"
+                  :src="sheep.$url.static('/static/img/shop/chat/image.png')"
+                  mode="aspectFill"
+                ></image>
+              </s-uploader>
+              <view>图片</view>
+            </view>
+            <view class="goods" @tap="onShowSelect('goods')">
+              <image
+                class="icon"
+                :src="sheep.$url.static('/static/img/shop/chat/goods.png')"
+                mode="aspectFill"
+              ></image>
+              <view>商品</view>
+            </view>
+            <view class="order" @tap="onShowSelect('order')">
+              <image
+                class="icon"
+                :src="sheep.$url.static('/static/img/shop/chat/order.png')"
+                mode="aspectFill"
+              ></image>
+              <view>订单</view>
+            </view>
+          </template>
+        </view>
+      </view>
+    </su-popup>
+
+    <SelectPopup
+      :mode="chat.selectMode"
+      :show="chat.showSelect"
+      @select="onSelect"
+      @close="chat.showSelect = false"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { computed, reactive, toRefs } from 'vue';
+  import { onLoad } from '@dcloudio/uni-app';
+  import { emojiList, emojiPage } from './emoji.js';
+  import SelectPopup from './components/select-popup.vue';
+  import GoodsItem from './components/goods.vue';
+  import OrderItem from './components/order.vue';
+  import { useChatWebSocket } from './socket';
+
+  const {
+    socketInit,
+    state: chatData,
+    socketSendMsg,
+    formatChatInput,
+    socketHistoryList,
+    onDrop,
+    onPaste,
+    getFocus,
+    // upload,
+    getUserToken,
+    // socketTest,
+    showTime,
+    formatTime,
+  } = useChatWebSocket();
+  const chatList = toRefs(chatData).chatList;
+  const customerServiceInfo = toRefs(chatData).customerServerInfo;
+  const chatHistoryPagination = toRefs(chatData).chatHistoryPagination;
+  const customerUserInfo = toRefs(chatData).customerUserInfo;
+  const socketState = toRefs(chatData).socketState;
+
+  const sys_navBar = sheep.$platform.navbar;
+  const chatConfig = computed(() => sheep.$store('app').chat);
+
+  const { screenHeight, safeAreaInsets, safeArea, screenWidth } = sheep.$platform.device;
+  const pageHeight = safeArea.height - 44 - 35 - 50;
+
+  const chatStatus = {
+    online: {
+      text: '在线',
+      colorVariate: '#46c55f',
+    },
+    offline: {
+      text: '离线',
+      colorVariate: '#b5b5b5',
+    },
+    busy: {
+      text: '忙碌',
+      colorVariate: '#ff0e1b',
+    },
+  };
+
+  // 加载更多
+  const loadingMap = {
+    loadmore: {
+      title: '查看更多',
+      icon: 'el-icon-d-arrow-left',
+    },
+    nomore: {
+      title: '没有更多了',
+      icon: '',
+    },
+    loading: {
+      title: '加载中... ',
+      icon: 'el-icon-loading',
+    },
+  };
+  const onLoadMore = () => {
+    chatHistoryPagination.value.page < chatHistoryPagination.value.lastPage && socketHistoryList();
+  };
+
+  const chat = reactive({
+    msg: '',
+    scrollInto: '',
+
+    showTools: false,
+    toolsMode: '',
+
+    showSelect: false,
+    selectMode: '',
+    chatStyle: {
+      mode: 'inner',
+      color: '#F8270F',
+      type: 'color',
+      alwaysShow: 1,
+      src: '',
+      list: {},
+    },
+  });
+
+  // 点击工具栏开关
+  function onTools(mode) {
+    if (!socketState.value.isConnect) {
+      sheep.$helper.toast(socketState.value.tip || '您已掉线！请返回重试');
+      return;
+    }
+
+    if (!chat.toolsMode || chat.toolsMode === mode) {
+      chat.showTools = !chat.showTools;
+    }
+    chat.toolsMode = mode;
+    if (!chat.showTools) {
+      chat.toolsMode = '';
+    }
+  }
+
+  function onShowSelect(mode) {
+    chat.showTools = false;
+    chat.showSelect = true;
+    chat.selectMode = mode;
+  }
+
+  async function onSelect({ type, data }) {
+    let msg = '';
+    switch (type) {
+      case 'image':
+        const { path, fullurl } = await sheep.$api.app.upload(data.tempFiles[0].path, 'default');
+        msg = {
+          from: 'customer',
+          mode: 'image',
+          date: new Date().getTime(),
+          content: {
+            url: fullurl,
+            path: path,
+          },
+        };
+        break;
+      case 'goods':
+        msg = {
+          from: 'customer',
+          mode: 'goods',
+          date: new Date().getTime(),
+          content: {
+            item: {
+              id: data.goods.id,
+              title: data.goods.title,
+              image: data.goods.image,
+              price: data.goods.price,
+              stock: data.goods.stock,
+            },
+          },
+        };
+        break;
+      case 'order':
+        msg = {
+          from: 'customer',
+          mode: 'order',
+          date: new Date().getTime(),
+          content: {
+            item: {
+              id: data.id,
+              order_sn: data.order_sn,
+              create_time: data.create_time,
+              pay_fee: data.pay_fee,
+              items: data.items.filter((item) => ({
+                goods_id: item.goods_id,
+                goods_title: item.goods_title,
+                goods_image: item.goods_image,
+                goods_price: item.goods_price,
+              })),
+              status_text: data.status_text,
+            },
+          },
+        };
+        break;
+    }
+    if (msg) {
+      socketSendMsg(msg, () => {
+        scrollBottom();
+      });
+      // scrollBottom();
+      chat.showTools = false;
+      chat.showSelect = false;
+      chat.selectMode = '';
+    }
+  }
+
+  function onAgainSendMessage(item) {
+    if (!socketState.value.isConnect) {
+      sheep.$helper.toast(socketState.value.tip || '您已掉线！请返回重试');
+      return;
+    }
+    if (!item) return;
+    const data = {
+      from: 'customer',
+      mode: 'text',
+      date: new Date().getTime(),
+      content: item.content,
+    };
+    socketSendMsg(data, () => {
+      scrollBottom();
+    });
+  }
+
+  function onSendMessage() {
+    if (!socketState.value.isConnect) {
+      sheep.$helper.toast(socketState.value.tip || '您已掉线！请返回重试');
+      return;
+    }
+    if (!chat.msg) return;
+    const data = {
+      from: 'customer',
+      mode: 'text',
+      date: new Date().getTime(),
+      content: {
+        text: chat.msg,
+      },
+    };
+    socketSendMsg(data, () => {
+      scrollBottom();
+    });
+    chat.showTools = false;
+    // scrollBottom();
+    setTimeout(() => {
+      chat.msg = '';
+    }, 100);
+  }
+
+  // 点击猜你想问
+  function onTemplateList(e) {
+    if (!socketState.value.isConnect) {
+      sheep.$helper.toast(socketState.value.tip || '您已掉线！请返回重试');
+      return;
+    }
+    const data = {
+      from: 'customer',
+      mode: 'text',
+      date: new Date().getTime(),
+      content: {
+        text: e.title,
+      },
+      customData: {
+        question_id: e.id,
+      },
+    };
+    socketSendMsg(data, () => {
+      scrollBottom();
+    });
+    // scrollBottom();
+  }
+
+  function onEmoji(item) {
+    chat.msg += item.name;
+  }
+
+  function selEmojiFile(name) {
+    for (let index in emojiList) {
+      if (emojiList[index].name === name) {
+        return emojiList[index].file;
+      }
+    }
+    return false;
+  }
+
+  function replaceEmoji(data) {
+    let newData = data;
+    if (typeof newData !== 'object') {
+      let reg = /\[(.+?)\]/g; // [] 中括号
+      let zhEmojiName = newData.match(reg);
+      if (zhEmojiName) {
+        zhEmojiName.forEach((item) => {
+          let emojiFile = selEmojiFile(item);
+          newData = newData.replace(
+            item,
+            `<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;" src="${sheep.$url.cdn(
+              '/static/img/chat/emoji/' + emojiFile,
+            )}"/>`,
+          );
+        });
+      }
+    }
+    return newData;
+  }
+
+  function scrollBottom() {
+    let timeout = null;
+    chat.scrollInto = '';
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      chat.scrollInto = 'scrollBottom';
+    }, 100);
+  }
+
+  onLoad(async () => {
+    const { error } = await getUserToken();
+    if (error === 0) {
+      socketInit(chatConfig.value, () => {
+        scrollBottom();
+      });
+    } else {
+      socketState.value.isConnect = false;
+    }
+  });
+</script>
+
+<style lang="scss" scoped>
+  .page-bg {
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    background-size: 750rpx 100%;
+    z-index: 1;
+  }
+
+  .chat-wrap {
+    // :deep() {
+    //   .ui-navbar-box {
+    //     background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    //   }
+    // }
+
+    .status {
+      position: relative;
+      box-sizing: border-box;
+      z-index: 3;
+      height: 70rpx;
+      padding: 0 30rpx;
+      background: var(--ui-BG-Main-opacity-1);
+      display: flex;
+      align-items: center;
+      font-size: 30rpx;
+      font-weight: 400;
+      color: var(--ui-BG-Main);
+    }
+
+    .chat-box {
+      padding: 0 20rpx 0;
+
+      .loadmore-btn {
+        width: 98%;
+        height: 40px;
+        font-size: 12px;
+        color: #8c8c8c;
+
+        .loadmore-icon {
+          transform: rotate(90deg);
+        }
+      }
+
+      .message-item {
+        margin-bottom: 33rpx;
+      }
+
+      .date-message,
+      .system-message {
+        width: fit-content;
+        border-radius: 12rpx;
+        padding: 8rpx 16rpx;
+        margin-bottom: 16rpx;
+        background-color: var(--ui-BG-3);
+        color: #999;
+        font-size: 24rpx;
+      }
+
+      .chat-avatar {
+        width: 70rpx;
+        height: 70rpx;
+        border-radius: 50%;
+      }
+
+      .send-status {
+        color: #333;
+        height: 80rpx;
+        margin-right: 8rpx;
+        display: flex;
+        align-items: center;
+
+        .loading {
+          width: 32rpx;
+          height: 32rpx;
+          -webkit-animation: rotating 2s linear infinite;
+          animation: rotating 2s linear infinite;
+
+          @-webkit-keyframes rotating {
+            0% {
+              transform: rotateZ(0);
+            }
+
+            100% {
+              transform: rotateZ(360deg);
+            }
+          }
+
+          @keyframes rotating {
+            0% {
+              transform: rotateZ(0);
+            }
+
+            100% {
+              transform: rotateZ(360deg);
+            }
+          }
+        }
+
+        .warning {
+          width: 32rpx;
+          height: 32rpx;
+          color: #ff3000;
+        }
+      }
+
+      .message-box {
+        max-width: 50%;
+        font-size: 16px;
+        line-height: 20px;
+        // max-width: 500rpx;
+        white-space: normal;
+        word-break: break-all;
+        word-wrap: break-word;
+        padding: 20rpx;
+        border-radius: 10rpx;
+        color: #fff;
+        background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+
+        &.customer_service {
+          background: #fff;
+          color: #333;
+        }
+
+        :deep() {
+          .imgred {
+            width: 100%;
+          }
+
+          .imgred,
+          img {
+            width: 100%;
+          }
+        }
+      }
+
+      :deep() {
+        .goods,
+        .order {
+          max-width: 500rpx;
+        }
+      }
+
+      .message-img {
+        width: 100px;
+        height: 100px;
+        border-radius: 6rpx;
+      }
+
+      .template-wrap {
+        // width: 100%;
+        padding: 20rpx 24rpx;
+        background: #fff;
+        border-radius: 10rpx;
+
+        .title {
+          font-size: 26rpx;
+          font-weight: 500;
+          color: #333;
+          margin-bottom: 29rpx;
+        }
+
+        .item {
+          font-size: 24rpx;
+          color: var(--ui-BG-Main);
+          margin-bottom: 16rpx;
+
+          &:last-of-type {
+            margin-bottom: 0;
+          }
+        }
+      }
+
+      .error-img {
+        width: 400rpx;
+        height: 400rpx;
+      }
+
+      #scrollBottom {
+        height: 120rpx;
+      }
+    }
+
+    .send-wrap {
+      padding: 18rpx 20rpx;
+      background: #fff;
+
+      .left {
+        height: 64rpx;
+        border-radius: 32rpx;
+        background: var(--ui-BG-1);
+      }
+
+      .bq {
+        font-size: 50rpx;
+        margin-left: 10rpx;
+      }
+
+      .sicon-edit {
+        font-size: 50rpx;
+        margin-left: 10rpx;
+        transform: rotate(0deg);
+        transition: all linear 0.2s;
+
+        &.is-active {
+          transform: rotate(45deg);
+        }
+      }
+
+      .send-btn {
+        width: 100rpx;
+        height: 60rpx;
+        line-height: 60rpx;
+        border-radius: 30rpx;
+        background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+        font-size: 26rpx;
+        color: #fff;
+        margin-left: 11rpx;
+      }
+    }
+  }
+
+  .content {
+    width: 100%;
+    align-content: space-around;
+    border-top: 1px solid #dfdfdf;
+    padding: 20rpx 0 0;
+
+    .emoji-swiper {
+      width: 100%;
+      height: 280rpx;
+      padding: 0 20rpx;
+
+      .emoji-img {
+        width: 50rpx;
+        height: 50rpx;
+        display: inline-block;
+        margin: 10rpx;
+      }
+    }
+
+    .image,
+    .goods,
+    .order {
+      width: 33.3%;
+      height: 280rpx;
+      text-align: center;
+      font-size: 24rpx;
+      color: #333;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      .icon {
+        width: 50rpx;
+        height: 50rpx;
+        margin-bottom: 21rpx;
+      }
+    }
+
+    :deep() {
+      .uni-file-picker__container {
+        justify-content: center;
+      }
+
+      .file-picker__box {
+        display: none;
+
+        &:last-of-type {
+          display: flex;
+        }
+      }
+    }
+  }
+</style>
+<style>
+  .chat-img {
+    width: 24px;
+    height: 24px;
+    margin: 0 3px;
+  }
+  .full-img {
+    object-fit: cover;
+    width: 100px;
+    height: 100px;
+    border-radius: 6px;
+  }
+</style>
diff --git a/pages/chat/socket.js b/pages/chat/socket.js
new file mode 100644
index 0000000..b95478f
--- /dev/null
+++ b/pages/chat/socket.js
@@ -0,0 +1,821 @@
+import { reactive, ref, unref } from 'vue';
+import sheep from '@/sheep';
+// import chat from '@/api/chat';
+import dayjs from 'dayjs';
+import io from '@hyoga/uni-socket.io';
+
+export function useChatWebSocket(socketConfig) {
+  let SocketIo = null;
+
+  // chat状态数据
+  const state = reactive({
+    chatDotNum: 0, //总状态红点
+    chatList: [], //会话信息
+    customerUserInfo: {}, //用户信息
+    customerServerInfo: {
+      //客服信息
+      title: '连接中...',
+      state: 'connecting',
+      avatar: null,
+      nickname: '',
+    },
+    socketState: {
+      isConnect: true, //是否连接成功
+      isConnecting: false, //重连中，不允许新的socket开启。
+      tip: '',
+    },
+    chatHistoryPagination: {
+      page: 0, //当前页
+      list_rows: 10, //每页条数
+      last_id: 0, //最后条ID
+      lastPage: 0, //总共多少页
+      loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
+    },
+    templateChatList: [], //猜你想问
+
+    chatConfig: {}, // 配置信息
+
+    isSendSucces: -1, // 是否发送成功 -1=发送中|0=发送成功|1发送失败
+  });
+
+  /**
+   * 连接初始化
+   * @param {Object} config  - 配置信息
+   * @param {Function} callBack -回调函数,有新消息接入，保持底部
+   */
+  const socketInit = (config, callBack) => {
+    state.chatConfig = config;
+    if (SocketIo && SocketIo.connected) return; // 如果socket已经连接，返回false
+    if (state.socketState.isConnecting) return; // 重连中，返回false
+
+    // 启动初始化
+    SocketIo = io(config.chat_domain, {
+      reconnection: true, // 默认 true    是否断线重连
+      reconnectionAttempts: 5, // 默认无限次   断线尝试次数
+      reconnectionDelay: 1000, // 默认 1000，进行下一次重连的间隔。
+      reconnectionDelayMax: 5000, // 默认 5000， 重新连接等待的最长时间 默认 5000
+      randomizationFactor: 0.5, // 默认 0.5 [0-1]，随机重连延迟时间
+      timeout: 20000, // 默认 20s
+      transports: ['websocket', 'polling'], // websocket | polling,
+      ...config,
+    });
+
+    // 监听连接
+    SocketIo.on('connect', async (res) => {
+      socketReset(callBack);
+      // socket连接
+      // 用户登录
+      // 顾客登录
+      console.log('socket:connect');
+    });
+    // 监听消息
+    SocketIo.on('message', (res) => {
+      if (res.error === 0) {
+        const { message, sender } = res.data;
+        state.chatList.push(formatMessage(res.data.message));
+
+        // 告诉父级页面
+        // window.parent.postMessage({
+        // 	chatDotNum: ++state.chatDotNum
+        // })
+        callBack && callBack();
+      }
+    });
+    // 监听客服接入成功
+    SocketIo.on('customer_service_access', (res) => {
+      if (res.error === 0) {
+        editCustomerServerInfo({
+          title: res.data.customer_service.name,
+          state: 'online',
+          avatar: res.data.customer_service.avatar,
+        });
+        state.chatList.push(formatMessage(res.data.message));
+        // callBack && callBack()
+      }
+    });
+    // 监听排队等待
+    SocketIo.on('waiting_queue', (res) => {
+      if (res.error === 0) {
+        editCustomerServerInfo({
+          title: res.data.title,
+          state: 'waiting',
+          avatar: '',
+        });
+        // callBack && callBack()
+      }
+    });
+    // 监听没有客服在线
+    SocketIo.on('no_customer_service', (res) => {
+      if (res.error === 0) {
+        editCustomerServerInfo({
+          title: '暂无客服在线...',
+          state: 'waiting',
+          avatar: '',
+        });
+      }
+      state.chatList.push(formatMessage(res.data.message));
+      // callBack && callBack()
+    });
+    // 监听客服上线
+    SocketIo.on('customer_service_online', (res) => {
+      if (res.error === 0) {
+        editCustomerServerInfo({
+          title: res.data.customer_service.name,
+          state: 'online',
+          avatar: res.data.customer_service.avatar,
+        });
+      }
+    });
+    // 监听客服下线
+    SocketIo.on('customer_service_offline', (res) => {
+      if (res.error === 0) {
+        editCustomerServerInfo({
+          title: res.data.customer_service.name,
+          state: 'offline',
+          avatar: res.data.customer_service.avatar,
+        });
+      }
+    });
+    // 监听客服忙碌
+    SocketIo.on('customer_service_busy', (res) => {
+      if (res.error === 0) {
+        editCustomerServerInfo({
+          title: res.data.customer_service.name,
+          state: 'busy',
+          avatar: res.data.customer_service.avatar,
+        });
+      }
+    });
+    // 监听客服断开链接
+    SocketIo.on('customer_service_break', (res) => {
+      if (res.error === 0) {
+        editCustomerServerInfo({
+          title: '客服服务结束',
+          state: 'offline',
+          avatar: '',
+        });
+        state.socketState.isConnect = false;
+        state.socketState.tip = '当前服务已结束';
+      }
+      state.chatList.push(formatMessage(res.data.message));
+      // callBack && callBack()
+    });
+    // 监听自定义错误 custom_error
+    SocketIo.on('custom_error', (error) => {
+      editCustomerServerInfo({
+        title: error.msg,
+        state: 'offline',
+        avatar: '',
+      });
+      console.log('custom_error:', error);
+    });
+    // 监听错误 error
+    SocketIo.on('error', (error) => {
+      console.log('error:', error);
+    });
+    // 重连失败 connect_error
+    SocketIo.on('connect_error', (error) => {
+      console.log('connect_error');
+    });
+    // 连接上，但无反应 connect_timeout
+    SocketIo.on('connect_timeout', (error) => {
+      console.log(error, 'connect_timeout');
+    });
+    // 服务进程销毁 disconnect
+    SocketIo.on('disconnect', (error) => {
+      console.log(error, 'disconnect');
+    });
+    // 服务重启重连上reconnect
+    SocketIo.on('reconnect', (error) => {
+      console.log(error, 'reconnect');
+    });
+    // 开始重连reconnect_attempt
+    SocketIo.on('reconnect_attempt', (error) => {
+      state.socketState.isConnect = false;
+      state.socketState.isConnecting = true;
+      editCustomerServerInfo({
+        title: `重连中，第${error}次尝试...`,
+        state: 'waiting',
+        avatar: '',
+      });
+      console.log(error, 'reconnect_attempt');
+    });
+    // 重新连接中reconnecting
+    SocketIo.on('reconnecting', (error) => {
+      console.log(error, 'reconnecting');
+    });
+    // 重新连接错误reconnect_error
+    SocketIo.on('reconnect_error', (error) => {
+      console.log('reconnect_error');
+    });
+    // 重新连接失败reconnect_failed
+    SocketIo.on('reconnect_failed', (error) => {
+      state.socketState.isConnecting = false;
+      editCustomerServerInfo({
+        title: `重连失败，请刷新重试~`,
+        state: 'waiting',
+        avatar: '',
+      });
+      console.log(error, 'reconnect_failed');
+
+      // setTimeout(() => {
+      state.isSendSucces = 1;
+      // }, 500)
+    });
+  };
+
+  // 重置socket
+  const socketReset = (callBack) => {
+    state.chatList = [];
+    state.chatHistoryList = [];
+    state.chatHistoryPagination = {
+      page: 0,
+      per_page: 10,
+      last_id: 0,
+      totalPage: 0,
+    };
+    socketConnection(callBack); // 连接
+  };
+
+  // 退出连接
+  const socketClose = () => {
+    SocketIo.emit('customer_logout', {}, (res) => {
+      console.log('socket:退出', res);
+    });
+  };
+
+  // 测试事件
+  const socketTest = () => {
+    SocketIo.emit('test', {}, (res) => {
+      console.log('test:test', res);
+    });
+  };
+
+  // 发送消息
+  const socketSendMsg = (data, sendMsgCallBack) => {
+    state.isSendSucces = -1;
+    state.chatList.push(data);
+    sendMsgCallBack && sendMsgCallBack();
+    SocketIo.emit(
+      'message',
+      {
+        message: formatInput(data),
+        ...data.customData,
+      },
+      (res) => {
+        // setTimeout(() => {
+        state.isSendSucces = res.error;
+        // }, 500)
+
+        // console.log(res, 'socket:send');
+        // sendMsgCallBack && sendMsgCallBack()
+      },
+    );
+  };
+
+  // 连接socket,存入sessionId
+  const socketConnection = (callBack) => {
+    SocketIo.emit(
+      'connection',
+      {
+        auth: 'user',
+        token: uni.getStorageSync('socketUserToken') || '',
+        session_id: uni.getStorageSync('socketSessionId') || '',
+      },
+      (res) => {
+        if (res.error === 0) {
+          socketCustomerLogin(callBack);
+          uni.setStorageSync('socketSessionId', res.data.session_id);
+          // uni.getStorageSync('socketUserToken') && socketLogin(uni.getStorageSync(
+          // 	'socketUserToken')) // 如果有用户token,绑定
+          state.customerUserInfo = res.data.chat_user;
+          state.socketState.isConnect = true;
+        } else {
+          editCustomerServerInfo({
+            title: `服务器异常！`,
+            state: 'waiting',
+            avatar: '',
+          });
+          state.socketState.isConnect = false;
+        }
+      },
+    );
+  };
+
+  // 用户id,获取token
+  const getUserToken = async (id) => {
+    const res = await chat.unifiedToken();
+    if (res.error === 0) {
+      uni.setStorageSync('socketUserToken', res.data.token);
+      // SocketIo && SocketIo.connected && socketLogin(res.data.token)
+    }
+    return res;
+  };
+
+  // 用户登录
+  const socketLogin = (token) => {
+    SocketIo.emit(
+      'login',
+      {
+        token: token,
+      },
+      (res) => {
+        console.log(res, 'socket:login');
+        state.customerUserInfo = res.data.chat_user;
+      },
+    );
+  };
+
+  // 顾客登录
+  const socketCustomerLogin = (callBack) => {
+    SocketIo.emit(
+      'customer_login',
+      {
+        room_id: state.chatConfig.room_id,
+      },
+      (res) => {
+        state.templateChatList = res.data.questions.length ? res.data.questions : [];
+        state.chatList.push({
+          from: 'customer_service', // 用户customer右 |  顾客customer_service左 | 系统system中间
+          mode: 'template', // goods,order,image,text,system
+          date: new Date().getTime(), //时间
+          content: {
+            //内容
+            list: state.templateChatList,
+          },
+        });
+        res.error === 0 && socketHistoryList(callBack);
+      },
+    );
+  };
+
+  // 获取历史消息
+  const socketHistoryList = (historyCallBack) => {
+    state.chatHistoryPagination.loadStatus = 'loading';
+    state.chatHistoryPagination.page += 1;
+    SocketIo.emit('messages', state.chatHistoryPagination, (res) => {
+      if (res.error === 0) {
+        state.chatHistoryPagination.total = res.data.messages.total;
+        state.chatHistoryPagination.lastPage = res.data.messages.last_page;
+        state.chatHistoryPagination.page = res.data.messages.current_page;
+        res.data.messages.data.forEach((item) => {
+          item.message_type && state.chatList.unshift(formatMessage(item));
+        });
+        state.chatHistoryPagination.loadStatus =
+          state.chatHistoryPagination.page < state.chatHistoryPagination.lastPage
+            ? 'loadmore'
+            : 'nomore';
+        if (state.chatHistoryPagination.last_id == 0) {
+          state.chatHistoryPagination.last_id = res.data.messages.data.length
+            ? res.data.messages.data[0].id
+            : 0;
+        }
+        state.chatHistoryPagination.page === 1 && historyCallBack && historyCallBack();
+      }
+
+      // 历史记录之后，猜你想问
+      // state.chatList.push({
+      // 	from: 'customer_service', // 用户customer右 |  顾客customer_service左 | 系统system中间
+      // 	mode: 'template', // goods,order,image,text,system
+      // 	date: new Date().getTime(), //时间
+      // 	content: { //内容
+      // 		list: state.templateChatList
+      // 	}
+      // })
+    });
+  };
+
+  // 修改客服信息
+  const editCustomerServerInfo = (data) => {
+    state.customerServerInfo = {
+      ...state.customerServerInfo,
+      ...data,
+    };
+  };
+
+  /**
+   * ================
+   * 工具函数 ↓
+   * ===============
+   */
+
+  /**
+   * 是否显示时间
+   * @param {*} item - 数据
+   * @param {*} index - 索引
+   */
+  const showTime = (item, index) => {
+    if (unref(state.chatList)[index + 1]) {
+      let dateString = dayjs(unref(state.chatList)[index + 1].date).fromNow();
+      if (dateString === dayjs(unref(item).date).fromNow()) {
+        return false;
+      } else {
+        dateString = dayjs(unref(item).date).fromNow();
+        return true;
+      }
+    }
+    return false;
+  };
+
+  /**
+   * 格式化时间
+   * @param {*} time - 时间戳
+   */
+  const formatTime = (time) => {
+    let diffTime = new Date().getTime() - time;
+    if (diffTime > 28 * 24 * 60 * 1000) {
+      return dayjs(time).format('MM/DD HH:mm');
+    }
+    if (diffTime > 360 * 28 * 24 * 60 * 1000) {
+      return dayjs(time).format('YYYY/MM/DD HH:mm');
+    }
+    return dayjs(time).fromNow();
+  };
+
+  /**
+   * 获取焦点
+   * @param {*} virtualNode - 节点信息 ref
+   */
+  const getFocus = (virtualNode) => {
+    if (window.getSelection) {
+      let chatInput = unref(virtualNode);
+      chatInput.focus();
+      let range = window.getSelection();
+      range.selectAllChildren(chatInput);
+      range.collapseToEnd();
+    } else if (document.selection) {
+      let range = document.selection.createRange();
+      range.moveToElementText(chatInput);
+      range.collapse(false);
+      range.select();
+    }
+  };
+
+  /**
+   * 文件上传
+   * @param {Blob} file -文件数据流
+   * @return {path,fullPath}
+   */
+
+  const upload = (name, file) => {
+    return new Promise((resolve, reject) => {
+      let data = new FormData();
+      data.append('file', file, name);
+      data.append('group', 'chat');
+      ajax({
+        url: '/upload',
+        method: 'post',
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+        data,
+        success: function (res) {
+          resolve(res);
+        },
+        error: function (err) {
+          reject(err);
+        },
+      });
+    });
+  };
+
+  /**
+   * 粘贴到输入框
+   * @param {*} e  - 粘贴内容
+   * @param {*} uploadHttp - 上传图片地址
+   */
+  const onPaste = async (e) => {
+    let paste = e.clipboardData || window.clipboardData;
+    let filesArr = Array.from(paste.files);
+    filesArr.forEach(async (child) => {
+      if (child && child.type.includes('image')) {
+        e.preventDefault(); //阻止默认
+        let file = child;
+        const img = await readImg(file);
+        const blob = await compressImg(img, file.type);
+        const { data } = await upload(file.name, blob);
+        let image = `<img class="full-url" src='${data.fullurl}'>`;
+        document.execCommand('insertHTML', false, image);
+      } else {
+        document.execCommand('insertHTML', false, paste.getData('text'));
+      }
+    });
+  };
+
+  /**
+   * 拖拽到输入框
+   * @param {*} e  - 粘贴内容
+   * @param {*} uploadHttp - 上传图片地址
+   */
+  const onDrop = async (e) => {
+    e.preventDefault(); //阻止默认
+    let filesArr = Array.from(e.dataTransfer.files);
+    filesArr.forEach(async (child) => {
+      if (child && child.type.includes('image')) {
+        let file = child;
+        const img = await readImg(file);
+        const blob = await compressImg(img, file.type);
+        const { data } = await upload(file.name, blob);
+        let image = `<img class="full-url" src='${data.fullurl}' >`;
+        document.execCommand('insertHTML', false, image);
+      } else {
+        ElMessage({
+          message: '禁止拖拽非图片资源',
+          type: 'warning',
+        });
+      }
+    });
+  };
+
+  /**
+   * 解析富文本输入框内容
+   * @param {*}  virtualNode -节点信息
+   * @param {Function} formatInputCallBack - cb 回调
+   */
+  const formatChatInput = (virtualNode, formatInputCallBack) => {
+    let res = '';
+    let elemArr = Array.from(virtualNode.childNodes);
+    elemArr.forEach((child, index) => {
+      if (child.nodeName === '#text') {
+        //如果为文本节点
+        res += child.nodeValue;
+        if (
+          //文本节点的后面是图片，并且不是emoji,分开发送。输入框中的图片和文本表情分开。
+          elemArr[index + 1] &&
+          elemArr[index + 1].nodeName === 'IMG' &&
+          elemArr[index + 1] &&
+          elemArr[index + 1].name !== 'emoji'
+        ) {
+          const data = {
+            from: 'customer',
+            mode: 'text',
+            date: new Date().getTime(),
+            content: {
+              text: filterXSS(res),
+            },
+          };
+          formatInputCallBack && formatInputCallBack(data);
+          res = '';
+        }
+      } else if (child.nodeName === 'BR') {
+        res += '<br/>';
+      } else if (child.nodeName === 'IMG') {
+        // 有emjio 和 一般图片
+        // 图片解析后直接发送，不跟文字表情一组
+        if (child.name !== 'emoji') {
+          let srcReg = /src=[\'\']?([^\'\']*)[\'\']?/i;
+          let src = child.outerHTML.match(srcReg);
+          const data = {
+            from: 'customer',
+            mode: 'image',
+            date: new Date().getTime(),
+            content: {
+              url: src[1],
+              path: src[1].replace(/http:\/\/[^\/]*/, ''),
+            },
+          };
+          formatInputCallBack && formatInputCallBack(data);
+        } else {
+          // 非表情图片跟文字一起发送
+          res += child.outerHTML;
+        }
+      } else if (child.nodeName === 'DIV') {
+        res += `<div style='width:200px; white-space: nowrap;'>${child.outerHTML}</div>`;
+      }
+    });
+    if (res) {
+      const data = {
+        from: 'customer',
+        mode: 'text',
+        date: new Date().getTime(),
+        content: {
+          text: filterXSS(res),
+        },
+      };
+      formatInputCallBack && formatInputCallBack(data);
+    }
+    unref(virtualNode).innerHTML = '';
+  };
+
+  /**
+   * 状态回调
+   * @param {*} res -接口返回数据
+   */
+  const callBackNotice = (res) => {
+    ElNotification({
+      title: 'socket',
+      message: res.msg,
+      showClose: true,
+      type: res.error === 0 ? 'success' : 'warning',
+      duration: 1200,
+    });
+  };
+
+  /**
+   * 格式化发送信息
+   * @param {Object} message
+   * @returns  obj - 消息对象
+   */
+  const formatInput = (message) => {
+    let obj = {};
+    switch (message.mode) {
+      case 'text':
+        obj = {
+          message_type: 'text',
+          message: message.content.text,
+        };
+        break;
+      case 'image':
+        obj = {
+          message_type: 'image',
+          message: message.content.path,
+        };
+        break;
+      case 'goods':
+        obj = {
+          message_type: 'goods',
+          message: message.content.item,
+        };
+        break;
+      case 'order':
+        obj = {
+          message_type: 'order',
+          message: message.content.item,
+        };
+        break;
+      default:
+        break;
+    }
+    return obj;
+  };
+  /**
+   * 格式化接收信息
+   * @param {*} message
+   * @returns obj - 消息对象
+   */
+  const formatMessage = (message) => {
+    let obj = {};
+    switch (message.message_type) {
+      case 'system':
+        obj = {
+          from: 'system', // 用户customer左 |  顾客customer_service右 | 系统system中间
+          mode: 'system', // goods,order,image,text,system
+          date: message.create_time * 1000, //时间
+          content: {
+            //内容
+            text: message.message,
+          },
+        };
+        break;
+      case 'text':
+        obj = {
+          from: message.sender_identify,
+          mode: message.message_type,
+          date: message.create_time * 1000, //时间
+          sender: message.sender,
+          content: {
+            text: message.message,
+            messageId: message.id,
+          },
+        };
+        break;
+      case 'image':
+        obj = {
+          from: message.sender_identify,
+          mode: message.message_type,
+          date: message.create_time * 1000, //时间
+          sender: message.sender,
+          content: {
+            url: sheep.$url.cdn(message.message),
+            messageId: message.id,
+          },
+        };
+        break;
+      case 'goods':
+        obj = {
+          from: message.sender_identify,
+          mode: message.message_type,
+          date: message.create_time * 1000, //时间
+          sender: message.sender,
+          content: {
+            item: message.message,
+            messageId: message.id,
+          },
+        };
+        break;
+      case 'order':
+        obj = {
+          from: message.sender_identify,
+          mode: message.message_type,
+          date: message.create_time * 1000, //时间
+          sender: message.sender,
+          content: {
+            item: message.message,
+            messageId: message.id,
+          },
+        };
+        break;
+      default:
+        break;
+    }
+    return obj;
+  };
+
+  /**
+   * file 转换为 img
+   * @param {*} file  - file 文件
+   * @returns  img   - img标签
+   */
+  const readImg = (file) => {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      const reader = new FileReader();
+      reader.onload = function (e) {
+        img.src = e.target.result;
+      };
+      reader.onerror = function (e) {
+        reject(e);
+      };
+      reader.readAsDataURL(file);
+      img.onload = function () {
+        resolve(img);
+      };
+      img.onerror = function (e) {
+        reject(e);
+      };
+    });
+  };
+
+  /**
+   * 压缩图片
+   *@param img -被压缩的img对象
+   * @param type -压缩后转换的文件类型
+   * @param mx -触发压缩的图片最大宽度限制
+   * @param mh -触发压缩的图片最大高度限制
+   * @returns blob - 文件流
+   */
+  const compressImg = (img, type = 'image/jpeg', mx = 1000, mh = 1000, quality = 1) => {
+    return new Promise((resolve, reject) => {
+      const canvas = document.createElement('canvas');
+      const context = canvas.getContext('2d');
+      const { width: originWidth, height: originHeight } = img;
+      // 最大尺寸限制
+      const maxWidth = mx;
+      const maxHeight = mh;
+      // 目标尺寸
+      let targetWidth = originWidth;
+      let targetHeight = originHeight;
+      if (originWidth > maxWidth || originHeight > maxHeight) {
+        if (originWidth / originHeight > 1) {
+          // 宽图片
+          targetWidth = maxWidth;
+          targetHeight = Math.round(maxWidth * (originHeight / originWidth));
+        } else {
+          // 高图片
+          targetHeight = maxHeight;
+          targetWidth = Math.round(maxHeight * (originWidth / originHeight));
+        }
+      }
+      canvas.width = targetWidth;
+      canvas.height = targetHeight;
+      context.clearRect(0, 0, targetWidth, targetHeight);
+      // 图片绘制
+      context.drawImage(img, 0, 0, targetWidth, targetHeight);
+      canvas.toBlob(
+        function (blob) {
+          resolve(blob);
+        },
+        type,
+        quality,
+      );
+    });
+  };
+
+  return {
+    compressImg,
+    readImg,
+    formatMessage,
+    formatInput,
+    callBackNotice,
+
+    socketInit,
+    socketSendMsg,
+    socketClose,
+    socketHistoryList,
+
+    getFocus,
+    formatChatInput,
+    onDrop,
+    onPaste,
+    upload,
+
+    getUserToken,
+
+    state,
+
+    socketTest,
+
+    showTime,
+    formatTime,
+  };
+}
\ No newline at end of file
diff --git a/pages/commission/commission-ranking.vue b/pages/commission/commission-ranking.vue
new file mode 100644
index 0000000..c9faa03
--- /dev/null
+++ b/pages/commission/commission-ranking.vue
@@ -0,0 +1,249 @@
+<!-- 佣金排行榜 -->
+<template>
+	<s-layout title="佣金排行榜">
+		<view class="CommissionRank">
+			<view class="header">
+				<view class="rank" v-if="state.position">
+					您目前的排名
+					<text class="num">{{ state.position }}</text> 名
+				</view>
+				<view class="rank" v-else>您目前暂无排名</view>
+			</view>
+			<view class="wrapper">
+				<view class="nav acea-row row-around" style="justify-content: space-around; display: flex">
+					<view class="item" :class="state.currentTab === index ? 'font-color' : ''"
+						v-for="(item, index) in tabMaps" :key="index" @click="switchTap(index)">
+						{{ item }}
+					</view>
+				</view>
+				<view class="list">
+					<view class="item acea-row row-between-wrapper" v-for="(item, index) in state.rankList"
+						:key="index">
+						<view class="num" v-if="index <= 2">
+							<image :src="'/static/images/medal0' + (index + 1) + '.png'" />
+						</view>
+						<view class="num" v-else>
+							{{ index + 1 }}
+						</view>
+						<view class="picTxt acea-row row-between-wrapper">
+							<view class="pictrue">
+								<image :src="item.avatar" />
+							</view>
+							<view class="text line1">{{ item.nickname }}</view>
+						</view>
+						<view class="people font-color">￥{{ fen2yuan(item.brokeragePrice) }}</view>
+					</view>
+				</view>
+				<view class="noCommodity"
+					v-if="state.rankList.length === 0 && (state.page !== 1 || state.active === 0)">
+					<emptyPage title="暂无排行～" />
+				</view>
+			</view>
+		</view>
+	</s-layout>
+</template>
+
+<script setup>
+	import sheep from '@/sheep';
+	import {
+		onLoad
+	} from '@dcloudio/uni-app';
+	import {
+		reactive
+	} from 'vue';
+	import BrokerageApi from '@/api/trade/brokerage';
+	import {
+		fen2yuan
+	} from '@/sheep/hooks/useGoods';
+
+	const tabMaps = ['周排行', '月排行'];
+
+	const state = reactive({
+		currentTab: 0,
+		position: 0, // 排名
+		rankList: [],
+	});
+
+	async function switchTap(index) {
+		state.currentTab = index;
+		state.rankList = [];
+		calculateTimes();
+		getBrokerageRankList();
+		getBrokerageRankNumber();
+	}
+
+	async function getBrokerageRankList() {
+		const {
+			code,
+			data
+		} = await BrokerageApi.getBrokerageUserChildSummaryPageByPrice({
+			pageNo: 1,
+			pageSize: 10,
+			'times[0]': state.times[0],
+			'times[1]': state.times[1],
+		});
+		if (code !== 0) {
+			return;
+		}
+		state.rankList = data.list;
+	}
+
+	async function getBrokerageRankNumber() {
+		const {
+			code,
+			data
+		} = await BrokerageApi.getRankByPrice({
+			times: state.times,
+		});
+		if (code !== 0) {
+			return;
+		}
+		state.position = data;
+	}
+
+	function formatDate(date) {
+		return sheep.$helper.timeFormat(date, 'yyyy-mm-dd hh:MM:ss');
+	}
+
+	function calculateTimes() {
+		let times;
+		if (state.currentTab === 0) {
+			times = getWeekTimes();
+		} else {
+			times = getMonthTimes();
+		}
+		state.times = [formatDate(times[0]), formatDate(times[1])];
+	}
+
+	onLoad(function() {
+		calculateTimes();
+		getBrokerageRankList();
+		getBrokerageRankNumber();
+	});
+
+	// TODO 芋艿：此处可考虑抽离
+	/**
+	 * 获得当前周的开始和结束时间
+	 */
+	function getWeekTimes() {
+		const today = new Date();
+		const dayOfWeek = today.getDay();
+		return [
+			new Date(today.getFullYear(), today.getMonth(), today.getDate() - dayOfWeek, 0, 0, 0),
+			new Date(
+				today.getFullYear(),
+				today.getMonth(),
+				today.getDate() + (6 - dayOfWeek),
+				23,
+				59,
+				59,
+			),
+		];
+	}
+
+	/**
+	 * 获得当前月的开始和结束时间
+	 */
+	function getMonthTimes() {
+		const today = new Date();
+		const year = today.getFullYear();
+		const month = today.getMonth();
+		const startDate = new Date(year, month, 1, 0, 0, 0);
+		const nextMonth = new Date(year, month + 1, 1);
+		const endDate = new Date(nextMonth.getTime() - 1);
+		return [startDate, endDate];
+	}
+
+	// TODO 芋艿：css 需要优化下；并且展示样式有问题
+</script>
+<style lang="scss" scoped>
+	.CommissionRank .header {
+		background: url('data:image/jpeg;base64,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') no-repeat;
+		width: 100%;
+		height: 344rpx;
+		background-size: 100% 100%;
+	}
+
+	.CommissionRank .header .rank {
+		font-size: 33rpx;
+		color: #fff;
+		position: absolute;
+		top: 160rpx;
+		left: 48rpx;
+	}
+
+	.CommissionRank .header .rank .num {
+		font-size: 51rpx;
+		font-weight: bold;
+		margin: 0 10rpx;
+	}
+
+	.CommissionRank .wrapper {
+		width: 710rpx;
+		background-color: #fff;
+		border-radius: 14rpx;
+		margin: -76rpx auto 0 auto;
+	}
+
+	.CommissionRank .wrapper .nav {
+		height: 99rpx;
+		border-bottom: 2.5rpx solid #f3f3f3;
+		font-size: 30rpx;
+		font-weight: bold;
+		color: #999;
+		line-height: 99rpx;
+	}
+
+	.CommissionRank .wrapper .nav .item.font-color {
+		border-bottom: 4rpx solid #e93323;
+		margin-top: -2rpx;
+		color: #e93323;
+	}
+
+	.CommissionRank .wrapper .list {
+		padding: 0 30rpx;
+	}
+
+	.CommissionRank .wrapper .list .item {
+		border-bottom: 1px solid #f3f3f3;
+		height: 101rpx;
+		font-size: 28rpx;
+	}
+
+	.CommissionRank .wrapper .list .item .num {
+		color: #666;
+		width: 70rpx;
+	}
+
+	.CommissionRank .wrapper .list .item .num image {
+		width: 34rpx;
+		height: 40rpx;
+		display: block;
+	}
+
+	.CommissionRank .wrapper .list .item .picTxt {
+		width: 350rpx;
+	}
+
+	.CommissionRank .wrapper .list .item .picTxt .pictrue {
+		width: 68rpx;
+		height: 68rpx;
+	}
+
+	.CommissionRank .wrapper .list .item .picTxt .pictrue image {
+		width: 100%;
+		height: 100%;
+		display: block;
+		border-radius: 50%;
+	}
+
+	.CommissionRank .wrapper .list .item .picTxt .text {
+		width: 262rpx;
+		color: #333;
+	}
+
+	.CommissionRank .wrapper .list .item .people {
+		width: 175rpx;
+		text-align: right;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/commission/components/account-info.vue b/pages/commission/components/account-info.vue
new file mode 100644
index 0000000..ef8c8c3
--- /dev/null
+++ b/pages/commission/components/account-info.vue
@@ -0,0 +1,125 @@
+<!-- 分销账户：展示基本统计信息 -->
+<template>
+  <view class="account-card">
+    <view class="account-card-box">
+      <view class="ss-flex ss-row-between card-box-header">
+        <view class="ss-flex">
+          <view class="header-title ss-m-r-16">账户信息</view>
+          <button
+            class="ss-reset-button look-btn ss-flex"
+            @tap="state.showMoney = !state.showMoney"
+          >
+            <uni-icons
+              :type="state.showMoney ? 'eye-filled' : 'eye-slash-filled'"
+              color="#A57A55"
+              size="20"
+            />
+          </button>
+        </view>
+        <view class="ss-flex" @tap="sheep.$router.go('/pages/user/wallet/commission')">
+          <view class="header-title ss-m-r-4">查看明细</view>
+          <text class="cicon-play-arrow" />
+        </view>
+      </view>
+
+      <!-- 收益 -->
+      <view class="card-content ss-flex">
+        <view class="ss-flex-1 ss-flex-col ss-col-center">
+          <view class="item-title">当前佣金(元)</view>
+          <view class="item-detail">
+            {{ state.showMoney ? fen2yuan(state.summary.brokeragePrice || 0) : '***' }}
+          </view>
+        </view>
+        <view class="ss-flex-1 ss-flex-col ss-col-center">
+          <view class="item-title">昨天的佣金(元)</view>
+          <view class="item-detail">
+            {{ state.showMoney ? fen2yuan(state.summary.yesterdayPrice || 0) : '***' }}
+          </view>
+        </view>
+        <view class="ss-flex-1 ss-flex-col ss-col-center">
+          <view class="item-title">累计已提(元)</view>
+          <view class="item-detail">
+            {{ state.showMoney ? fen2yuan(state.summary.withdrawPrice || 0) : '***' }}
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { computed, reactive, onMounted } from 'vue';
+  import BrokerageApi from '@/api/trade/brokerage';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
+
+  const userInfo = computed(() => sheep.$store('user').userInfo);
+
+  const state = reactive({
+    showMoney: false,
+    summary: {},
+  });
+
+  onMounted(async () => {
+    let { code, data } = await BrokerageApi.getBrokerageUserSummary();
+    if (code === 0) {
+      state.summary = data || {}
+    }
+  });
+</script>
+
+<style lang="scss" scoped>
+  .account-card {
+    width: 694rpx;
+    margin: 0 auto;
+    padding: 2rpx;
+    background: linear-gradient(180deg, #ffffff 0.88%, #fff9ec 100%);
+    border-radius: 12rpx;
+    z-index: 3;
+    position: relative;
+
+    .account-card-box {
+      background: #ffefd6;
+
+      .card-box-header {
+        padding: 0 30rpx;
+        height: 72rpx;
+        box-shadow: 0px 2px 6px #f2debe;
+
+        .header-title {
+          font-size: 24rpx;
+          font-weight: 500;
+          color: #a17545;
+          line-height: 30rpx;
+        }
+
+        .cicon-play-arrow {
+          color: #a17545;
+          font-size: 24rpx;
+          line-height: 30rpx;
+        }
+      }
+
+      .card-content {
+        height: 190rpx;
+        background: #fdfae9;
+
+        .item-title {
+          font-size: 24rpx;
+          font-weight: 500;
+          color: #cba67e;
+          line-height: 30rpx;
+          margin-bottom: 24rpx;
+        }
+
+        .item-detail {
+          font-size: 36rpx;
+          font-family: OPPOSANS;
+          font-weight: bold;
+          color: #692e04;
+          line-height: 30rpx;
+        }
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/pages/commission/components/account-type-select.vue b/pages/commission/components/account-type-select.vue
new file mode 100644
index 0000000..e79e417
--- /dev/null
+++ b/pages/commission/components/account-type-select.vue
@@ -0,0 +1,160 @@
+<!-- 提现方式的 select 组件 -->
+<template>
+  <su-popup :show="show" class="ss-checkout-counter-wrap" @close="hideModal">
+    <view class="ss-modal-box bg-white ss-flex-col">
+      <view class="modal-header ss-flex-col ss-col-left">
+        <text class="modal-title ss-m-b-20">选择提现方式</text>
+      </view>
+      <view class="modal-content ss-flex-1 ss-p-b-100">
+        <radio-group @change="onChange">
+          <label
+            class="container-list ss-p-l-34 ss-p-r-24 ss-flex ss-col-center ss-row-center"
+            v-for="(item, index) in typeList"
+            :key="index"
+          >
+            <view class="container-icon ss-flex ss-m-r-20">
+              <image :src="sheep.$url.static(item.icon)" />
+            </view>
+            <view class="ss-flex-1">{{ item.title }}</view>
+            <radio
+              :value="item.value"
+              color="var(--ui-BG-Main)"
+              :checked="item.value === state.currentValue"
+              :disabled="!methods.includes(parseInt(item.value))"
+            />
+          </label>
+        </radio-group>
+      </view>
+      <view class="modal-footer ss-flex ss-row-center ss-col-center">
+        <button class="ss-reset-button save-btn" @tap="onConfirm">确定</button>
+      </view>
+    </view>
+  </su-popup>
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+  import sheep from '@/sheep';
+
+  const props = defineProps({
+    modelValue: {
+      type: Object,
+      default() {},
+    },
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    methods: { // 开启的提现方式
+      type: Array,
+      default: [],
+    },
+  });
+  const emits = defineEmits(['update:modelValue', 'change', 'close']);
+  const state = reactive({
+    currentValue: '',
+  });
+
+  const typeList = [
+    {
+      // icon: '/static/img/shop/pay/wechat.png', // TODO 芋艿：后续给个 icon
+      title: '钱包余额',
+      value: '1',
+    },
+    {
+      icon: '/static/img/shop/pay/wechat.png',
+      title: '微信零钱',
+      value: '2',
+    },
+    {
+      icon: '/static/img/shop/pay/alipay.png',
+      title: '支付宝账户',
+      value: '3',
+    },
+    {
+      icon: '/static/img/shop/pay/bank.png',
+      title: '银行卡转账',
+      value: '4',
+    },
+  ];
+
+  function onChange(e) {
+    state.currentValue = e.detail.value;
+  }
+
+  const onConfirm = async () => {
+    if (state.currentValue === '') {
+      sheep.$helper.toast('请选择提现方式');
+      return;
+    }
+    // 赋值
+    emits('update:modelValue', {
+      type: state.currentValue
+    });
+    // 关闭弹窗
+    emits('close');
+  };
+
+  const hideModal = () => {
+    emits('close');
+  };
+</script>
+
+<style lang="scss" scoped>
+  .ss-modal-box {
+    border-radius: 30rpx 30rpx 0 0;
+    max-height: 1000rpx;
+
+    .modal-header {
+      position: relative;
+      padding: 60rpx 40rpx 40rpx;
+
+      .modal-title {
+        font-size: 32rpx;
+        font-weight: bold;
+      }
+
+      .close-icon {
+        position: absolute;
+        top: 10rpx;
+        right: 20rpx;
+        font-size: 46rpx;
+        opacity: 0.2;
+      }
+    }
+
+    .modal-content {
+      overflow-y: auto;
+
+      .container-list {
+        height: 96rpx;
+        border-bottom: 2rpx solid rgba(#dfdfdf, 0.5);
+        font-size: 28rpx;
+        font-weight: 500;
+        color: #333333;
+
+        .container-icon {
+          width: 36rpx;
+          height: 36rpx;
+        }
+      }
+    }
+
+    .modal-footer {
+      height: 120rpx;
+
+      .save-btn {
+        width: 710rpx;
+        height: 80rpx;
+        border-radius: 40rpx;
+        background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+        color: $white;
+      }
+    }
+  }
+
+  image {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/pages/commission/components/commission-auth.vue b/pages/commission/components/commission-auth.vue
new file mode 100644
index 0000000..429b377
--- /dev/null
+++ b/pages/commission/components/commission-auth.vue
@@ -0,0 +1,101 @@
+<!-- 分销权限弹窗：再没有权限时，进行提示  -->
+<template>
+  <su-popup
+    :show="state.show"
+    type="center"
+    round="10"
+    @close="state.show = false"
+    :isMaskClick="false"
+    maskBackgroundColor="rgba(0, 0, 0, 0.7)"
+  >
+    <view class="notice-box">
+      <view class="img-wrap">
+        <image
+          class="notice-img"
+          :src="sheep.$url.static('/static/img/shop/commission/forbidden.png')"
+          mode="aspectFill"
+        />
+      </view>
+      <view class="notice-title"> 抱歉！您没有分销权限 </view>
+      <view class="notice-detail"> 该功能暂不可用 </view>
+      <button
+        class="ss-reset-button notice-btn ui-Shadow-Main ui-BG-Main-Gradient"
+        @tap="sheep.$router.back()"
+      >
+        知道了
+      </button>
+      <button class="ss-reset-button back-btn" @tap="sheep.$router.back()"> 返回 </button>
+    </view>
+  </su-popup>
+</template>
+
+<script setup>
+  import { onShow } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import { reactive } from 'vue';
+  import BrokerageApi from '@/api/trade/brokerage';
+
+  const state = reactive({
+    show: false,
+  });
+
+  onShow(async () => {
+    // 读取是否有分销权限
+    const { code, data } = await BrokerageApi.getBrokerageUser();
+    if (code === 0 && !data?.brokerageEnabled) {
+      state.show = true;
+    }
+  });
+</script>
+
+<style lang="scss" scoped>
+  .notice-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: #fff;
+    width: 612rpx;
+    min-height: 658rpx;
+    background: #ffffff;
+    padding: 30rpx;
+    border-radius: 20rpx;
+    .img-wrap {
+      margin-bottom: 50rpx;
+      .notice-img {
+        width: 180rpx;
+        height: 170rpx;
+      }
+    }
+    .notice-title {
+      font-size: 35rpx;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 28rpx;
+    }
+    .notice-detail {
+      font-size: 28rpx;
+      font-weight: 400;
+      color: #999999;
+      line-height: 36rpx;
+      margin-bottom: 50rpx;
+    }
+    .notice-btn {
+      width: 492rpx;
+      line-height: 70rpx;
+      border-radius: 35rpx;
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #ffffff;
+      margin-bottom: 10rpx;
+    }
+    .back-btn {
+      width: 492rpx;
+      line-height: 70rpx;
+      font-size: 28rpx;
+      font-weight: 500;
+      color: var(--ui-BG-Main-gradient);
+      background: none;
+    }
+  }
+</style>
diff --git a/pages/commission/components/commission-info.vue b/pages/commission/components/commission-info.vue
new file mode 100644
index 0000000..65f2c59
--- /dev/null
+++ b/pages/commission/components/commission-info.vue
@@ -0,0 +1,113 @@
+<!-- 分销商信息  -->
+<template>
+	<!-- 用户资料 -->
+	<view class="user-card ss-flex ss-col-bottom">
+		<view class="card-top ss-flex ss-row-between">
+			<view class="ss-flex">
+				<view class="head-img-box">
+					<image class="head-img" :src="sheep.$url.cdn(userInfo.avatar)" mode="aspectFill"></image>
+				</view>
+				<view class="ss-flex-col">
+					<view class="user-name">{{ userInfo.nickname }}</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import sheep from '@/sheep';
+	import { computed, reactive } from 'vue';
+
+	const userInfo = computed(() => sheep.$store('user').userInfo);
+	const headerBg = sheep.$url.css('/static/img/shop/commission/background.png');
+
+	const state = reactive({
+		showMoney: false,
+	});
+
+</script>
+
+<style lang="scss" scoped>
+	// 用户资料卡片
+	.user-card {
+		width: 690rpx;
+		height: 192rpx;
+		margin: -88rpx 20rpx 0 20rpx;
+		padding-top: 88rpx;
+		background: v-bind(headerBg) no-repeat;
+		background-size: 100% 100%;
+
+		.head-img-box {
+			margin-right: 20rpx;
+			width: 100rpx;
+			height: 100rpx;
+			border-radius: 50%;
+			position: relative;
+			background: #fce0ad;
+
+			.head-img {
+				width: 92rpx;
+				height: 92rpx;
+				border-radius: 50%;
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+			}
+		}
+
+		.card-top {
+			box-sizing: border-box;
+			padding-bottom: 34rpx;
+
+			.user-name {
+				font-size: 32rpx;
+				font-weight: bold;
+				color: #692e04;
+				line-height: 30rpx;
+				margin-bottom: 20rpx;
+			}
+
+			.log-btn {
+				width: 84rpx;
+				height: 42rpx;
+				border: 2rpx solid rgba(#ffffff, 0.33);
+				border-radius: 21rpx;
+				font-size: 22rpx;
+				font-weight: 400;
+				color: #ffffff;
+				margin-bottom: 20rpx;
+			}
+
+			.look-btn {
+				color: #fff;
+				width: 40rpx;
+				height: 40rpx;
+			}
+		}
+
+		.user-info-box {
+			.tag-box {
+				background: #ff6000;
+				border-radius: 18rpx;
+				line-height: 36rpx;
+
+				.tag-img {
+					width: 36rpx;
+					height: 36rpx;
+					border-radius: 50%;
+					margin-left: -2rpx;
+				}
+
+				.tag-title {
+					font-size: 24rpx;
+					padding: 0 10rpx;
+					font-weight: 500;
+					line-height: 36rpx;
+					color: #fff;
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/commission/components/commission-log.vue b/pages/commission/components/commission-log.vue
new file mode 100644
index 0000000..43d0ae6
--- /dev/null
+++ b/pages/commission/components/commission-log.vue
@@ -0,0 +1,165 @@
+<!-- 分销首页：明细列表  -->
+<template>
+	<view class="distribution-log-wrap">
+		<view class="header-box">
+			<image class="header-bg" :src="sheep.$url.static('/static/img/shop/commission/title2.png')" />
+			<view class="ss-flex header-title">
+				<view class="title">实时动态</view>
+				<text class="cicon-forward" />
+			</view>
+		</view>
+		<scroll-view scroll-y="true" @scrolltolower="loadmore" class="scroll-box log-scroll"
+			scroll-with-animation="true">
+			<view v-if="state.pagination.list">
+				<view class="log-item-box ss-flex ss-row-between" v-for="item in state.pagination.list" :key="item.id">
+					<view class="log-item-wrap">
+						<view class="log-item ss-flex ss-ellipsis-1 ss-col-center">
+							<view class="ss-flex ss-col-center">
+								<image class="log-img" :src="sheep.$url.static('/static/img/shop/avatar/notice.png')" mode="aspectFill" />
+							</view>
+							<view class="log-text ss-ellipsis-1">
+                {{ item.title }} {{ fen2yuan(item.price) }} 元
+              </view>
+						</view>
+					</view>
+					<text class="log-time">{{ dayjs(item.createTime).fromNow() }}</text>
+				</view>
+			</view>
+
+			<!-- 加载更多 -->
+			<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" color="#333333"
+				@tap="loadmore" />
+		</scroll-view>
+	</view>
+</template>
+
+<script setup>
+	import sheep from '@/sheep';
+	import { reactive } from 'vue';
+	import _ from 'lodash';
+	import dayjs from 'dayjs';
+  import BrokerageApi from '@/api/trade/brokerage';
+  import { fen2yuan } from '../../../sheep/hooks/useGoods';
+
+	const state = reactive({
+		loadStatus: '',
+		pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 1,
+		},
+	});
+
+	async function getLog() {
+    state.loadStatus = 'loading';
+    const { code, data } = await BrokerageApi.getBrokerageRecordPage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize
+		});
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+	}
+
+	getLog();
+
+	// 加载更多
+	function loadmore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getLog();
+  }
+</script>
+
+<style lang="scss" scoped>
+	.distribution-log-wrap {
+		width: 690rpx;
+		margin: 0 auto;
+		margin-bottom: 20rpx;
+		border-radius: 12rpx;
+		z-index: 3;
+		position: relative;
+
+		.header-box {
+			width: 690rpx;
+			height: 76rpx;
+			position: relative;
+
+			.header-bg {
+				width: 690rpx;
+				height: 76rpx;
+			}
+
+			.header-title {
+				position: absolute;
+				left: 20rpx;
+				top: 24rpx;
+			}
+
+			.title {
+				font-size: 28rpx;
+				font-weight: 500;
+				color: #ffffff;
+				line-height: 30rpx;
+			}
+
+			.cicon-forward {
+				font-size: 30rpx;
+				font-weight: 400;
+				color: #ffffff;
+				line-height: 30rpx;
+			}
+		}
+
+		.log-scroll {
+			height: 600rpx;
+			background: #fdfae9;
+			padding: 10rpx 20rpx 0;
+			box-sizing: border-box;
+			border-radius: 0 0 12rpx 12rpx;
+
+			.log-item-box {
+				margin-bottom: 20rpx;
+
+				.log-time {
+					// margin-left: 30rpx;
+					text-align: right;
+					font-size: 24rpx;
+					font-family: OPPOSANS;
+					font-weight: 400;
+					color: #c4c4c4;
+				}
+			}
+
+			.loadmore-wrap {
+				// line-height: 80rpx;
+			}
+
+			.log-item {
+				// background: rgba(#ffffff, 0.2);
+				border-radius: 24rpx;
+				padding: 6rpx 20rpx 6rpx 12rpx;
+
+				.log-img {
+					width: 40rpx;
+					height: 40rpx;
+					border-radius: 50%;
+					margin-right: 10rpx;
+				}
+
+				.log-text {
+					max-width: 480rpx;
+					font-size: 24rpx;
+					font-weight: 500;
+					color: #333333;
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/commission/components/commission-menu.vue b/pages/commission/components/commission-menu.vue
new file mode 100644
index 0000000..5655ca7
--- /dev/null
+++ b/pages/commission/components/commission-menu.vue
@@ -0,0 +1,138 @@
+<!-- 分销：商菜单栏 -->
+<template>
+	<view class="menu-box ss-flex-col">
+		<view class="header-box">
+			<image class="header-bg" :src="sheep.$url.static('/static/img/shop/commission/title1.png')" />
+			<view class="ss-flex header-title">
+				<view class="title">功能专区</view>
+				<text class="cicon-forward"></text>
+			</view>
+		</view>
+		<view class="menu-list ss-flex ss-flex-wrap">
+			<view v-for="(item, index) in state.menuList" :key="index" class="item-box ss-flex-col ss-col-center"
+				@tap="sheep.$router.go(item.path)">
+				<image class="menu-icon ss-m-b-10" :src="sheep.$url.static(item.img)" mode="aspectFill"></image>
+				<view>{{ item.title }}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import sheep from '@/sheep';
+	import { reactive } from 'vue';
+
+	const state = reactive({
+		menuList: [{
+				img: '/static/img/shop/commission/commission_icon1.png',
+				title: '我的团队',
+				path: '/pages/commission/team',
+			},
+			{
+				img: '/static/img/shop/commission/commission_icon2.png',
+				title: '佣金明细',
+				path: '/pages/commission/wallet',
+			},
+			{
+				img: '/static/img/shop/commission/commission_icon3.png',
+				title: '分销订单',
+				path: '/pages/commission/order',
+			},
+			{
+				img: '/static/img/shop/commission/commission_icon4.png',
+				title: '推广商品',
+				path: '/pages/commission/goods',
+			},
+			// {
+			//   img: '/static/img/shop/commission/commission_icon5.png',
+			//   title: '我的资料',
+			//   path: '/pages/commission/apply',
+			//   isAgentFrom: true,
+			// },
+			// todo @芋艿：邀请海报需要登录后的个人数据
+			{
+				img: '/static/img/shop/commission/commission_icon7.png',
+				title: '邀请海报',
+				path: 'action:showShareModal',
+			},
+      // TODO @芋艿：缺少 icon
+      {
+				// img: '/static/img/shop/commission/commission_icon7.png',
+				title: '推广排行',
+				path: '/pages/commission/promoter',
+			},
+      {
+				// img: '/static/img/shop/commission/commission_icon7.png',
+				title: '佣金排行',
+				path: '/pages/commission/commission-ranking',
+			}
+		],
+	});
+</script>
+
+<style lang="scss" scoped>
+	.menu-box {
+		margin: 0 auto;
+		width: 690rpx;
+		margin-bottom: 20rpx;
+		margin-top: 20rpx;
+		border-radius: 12rpx;
+		z-index: 3;
+		position: relative;
+	}
+
+	.header-box {
+		width: 690rpx;
+		height: 76rpx;
+		position: relative;
+
+		.header-bg {
+			width: 690rpx;
+			height: 76rpx;
+		}
+
+		.header-title {
+			position: absolute;
+			left: 20rpx;
+			top: 24rpx;
+		}
+
+		.title {
+			font-size: 28rpx;
+			font-weight: 500;
+			color: #ffffff;
+			line-height: 30rpx;
+		}
+
+		.cicon-forward {
+			font-size: 30rpx;
+			font-weight: 400;
+			color: #ffffff;
+			line-height: 30rpx;
+		}
+	}
+
+	.menu-list {
+		padding: 50rpx 0 10rpx 0;
+		background: #fdfae9;
+		border-radius: 0 0 12rpx 12rpx;
+	}
+
+	.item-box {
+		width: 25%;
+		margin-bottom: 40rpx;
+	}
+
+	.menu-icon {
+		width: 68rpx;
+		height: 68rpx;
+		background: #ffffff;
+		border-radius: 50%;
+	}
+
+	.menu-title {
+		font-size: 26rpx;
+		font-weight: 500;
+		color: #ffffff;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/commission/goods.vue b/pages/commission/goods.vue
new file mode 100644
index 0000000..786a154
--- /dev/null
+++ b/pages/commission/goods.vue
@@ -0,0 +1,150 @@
+<!-- 分销商品列表  -->
+<template>
+  <s-layout title="推广商品" :onShareAppMessage="state.shareInfo">
+    <view class="goods-item ss-m-20" v-for="item in state.pagination.list" :key="item.id">
+      <s-goods-item
+        size="lg"
+        :img="item.picUrl"
+        :title="item.name"
+        :subTitle="item.introduction"
+        :price="item.price"
+        :originPrice="item.marketPrice"
+        priceColor="#333"
+        @tap="sheep.$router.go('/pages/goods/index', { id: item.id })"
+      >
+        <template #rightBottom>
+          <view class="ss-flex ss-row-between">
+            <view class="commission-num" v-if="item.brokerageMinPrice === undefined">预计佣金：计算中</view>
+            <view class="commission-num" v-else-if="item.brokerageMinPrice === item.brokerageMaxPrice">
+              预计佣金：{{ fen2yuan(item.brokerageMinPrice) }}
+            </view>
+            <view class="commission-num" v-else>
+              预计佣金：{{ fen2yuan(item.brokerageMinPrice) }} ~ {{ fen2yuan(item.brokerageMaxPrice) }}
+            </view>
+            <button
+              class="ss-reset-button share-btn ui-BG-Main-Gradient"
+              @tap.stop="onShareGoods(item)"
+            >
+              分享赚
+            </button>
+          </view>
+        </template>
+      </s-goods-item>
+    </view>
+    <s-empty
+      v-if="state.pagination.total === 0"
+      icon="/static/goods-empty.png"
+      text="暂无推广商品"
+    />
+    <!-- 加载更多 -->
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="loadMore"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import $share from '@/sheep/platform/share';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import _ from 'lodash';
+  import { showShareModal } from '@/sheep/hooks/useModal';
+  import SpuApi from '@/api/product/spu';
+  import BrokerageApi from '@/api/trade/brokerage';
+  import { fen2yuan } from '../../sheep/hooks/useGoods';
+
+  const state = reactive({
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 1,
+    },
+    loadStatus: '',
+    shareInfo: {},
+  });
+
+  // TODO 芋艿：分享的接入
+  function onShareGoods(goodsInfo) {
+    state.shareInfo = $share.getShareInfo(
+      {
+        title: goodsInfo.title,
+        image: sheep.$url.cdn(goodsInfo.image),
+        desc: goodsInfo.subtitle,
+        params: {
+          page: '2',
+          query: goodsInfo.id,
+        },
+      },
+      {
+        type: 'goods', // 商品海报
+        title: goodsInfo.title, // 商品标题
+        image: sheep.$url.cdn(goodsInfo.image), // 商品主图
+        price: goodsInfo.price[0], // 商品价格
+        original_price: goodsInfo.original_price, // 商品原价
+      },
+    );
+    showShareModal();
+  }
+
+  async function getGoodsList() {
+    state.loadStatus = 'loading';
+    let { code, data } = await SpuApi.getSpuPage({
+      pageSize: state.pagination.pageSize,
+      pageNo: state.pagination.pageNo,
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+    // 补充分佣金额
+    data.list.forEach((item) => {
+      BrokerageApi.getProductBrokeragePrice(item.id).then((res) => {
+        item.brokerageMinPrice = res.data.brokerageMinPrice;
+        item.brokerageMaxPrice = res.data.brokerageMaxPrice;
+      });
+    });
+  }
+
+  onLoad(() => {
+    getGoodsList();
+  });
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getGoodsList();
+  }
+
+  // 上拉加载更多
+  onReachBottom(() => {
+    loadMore();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .goods-item {
+    .commission-num {
+      font-size: 24rpx;
+      font-weight: 500;
+      color: $red;
+    }
+
+    .share-btn {
+      width: 120rpx;
+      height: 50rpx;
+      border-radius: 25rpx;
+    }
+  }
+</style>
diff --git a/pages/commission/index.vue b/pages/commission/index.vue
new file mode 100644
index 0000000..94b4121
--- /dev/null
+++ b/pages/commission/index.vue
@@ -0,0 +1,37 @@
+<!-- 分销中心  -->
+<template>
+	<s-layout navbar="inner" class="index-wrap" title="分销中心" :bgStyle="bgStyle" onShareAppMessage>
+		<!-- 分销商信息 -->
+		<commission-info />
+		<!-- 账户信息 -->
+		<account-info />
+		<!-- 菜单栏 -->
+		<commission-menu />
+		<!-- 分销记录 -->
+		<commission-log />
+
+		<!-- 权限弹窗 -->
+		<commission-auth />
+	</s-layout>
+</template>
+
+<script setup>
+	import { reactive } from 'vue';
+	import commissionInfo from './components/commission-info.vue';
+	import accountInfo from './components/account-info.vue';
+	import commissionLog from './components/commission-log.vue';
+	import commissionMenu from './components/commission-menu.vue';
+	import commissionAuth from './components/commission-auth.vue';
+
+	const state = reactive({});
+
+	const bgStyle = {
+		color: '#F7D598',
+	};
+</script>
+
+<style lang="scss" scoped>
+	:deep(.page-main) {
+		background-size: 100% 100% !important;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/commission/order.vue b/pages/commission/order.vue
new file mode 100644
index 0000000..a2984b4
--- /dev/null
+++ b/pages/commission/order.vue
@@ -0,0 +1,331 @@
+<!-- 分销 - 订单明细 -->
+<template>
+  <s-layout title="分销订单" :class="state.scrollTop ? 'order-warp' : ''" navbar="inner">
+    <view
+      class="header-box"
+      :style="[
+        {
+          marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
+          paddingTop: Number(statusBarHeight + 108) + 'rpx',
+        },
+      ]"
+    >
+      <!-- 团队数据总览 -->
+      <view class="team-data-box ss-flex ss-col-center ss-row-between" style="width: 100%">
+        <view class="data-card" style="width: 100%">
+          <view class="total-item" style="width: 100%">
+            <view class="item-title" style="text-align: center">累计推广订单（单）</view>
+            <view class="total-num" style="text-align: center">
+              {{ state.totals }}
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- tab -->
+    <su-sticky bgColor="#fff">
+      <su-tabs
+        :list="tabMaps"
+        :scrollable="false"
+        :current="state.currentTab"
+        @change="onTabsChange"
+      >
+      </su-tabs>
+    </su-sticky>
+
+    <!-- 订单 -->
+    <view class="order-box">
+      <view class="order-item" v-for="item in state.pagination.list" :key="item">
+        <view class="order-header">
+          <view class="no-box ss-flex ss-col-center ss-row-between">
+            <text class="order-code">订单编号：{{ item.bizId }}</text>
+            <text class="order-state">
+              {{
+                item.status === 0 ? '待结算'
+                  : item.status === 1 ? '已结算' : '已取消'
+              }}
+              ( 佣金 {{ fen2yuan(item.price) }} 元 )
+            </text>
+          </view>
+          <view class="order-from ss-flex ss-col-center ss-row-between">
+            <view class="from-user ss-flex ss-col-center">
+              <text>{{ item.title }}</text>
+            </view>
+            <view class="order-time">
+              {{ sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- 数据为空 -->
+      <s-empty v-if="state.pagination.total === 0" icon="/static/order-empty.png" text="暂无订单" />
+      <!-- 加载更多 -->
+      <uni-load-more
+        v-if="state.pagination.total > 0"
+        :status="state.loadStatus"
+        :content-text="{
+          contentdown: '上拉加载更多',
+        }"
+        @tap="loadMore"
+      />
+    </view>
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import _ from 'lodash';
+  import { onPageScroll } from '@dcloudio/uni-app';
+  import { resetPagination } from '@/sheep/util';
+  import BrokerageApi from '@/api/trade/brokerage';
+  import { fen2yuan } from '../../sheep/hooks/useGoods';
+
+  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+  const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
+
+  onPageScroll((e) => {
+    state.scrollTop = e.scrollTop <= 100;
+  });
+
+  const state = reactive({
+    totals: 0, // 累计推广订单（单）
+    scrollTop: false,
+
+    currentTab: 0,
+    loadStatus: '',
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 1,
+    },
+  });
+
+  const tabMaps = [
+    {
+      name: '全部',
+      value: 'all',
+    },
+    {
+      name: '待结算',
+      value: '0', // 待结算
+    },
+    {
+      name: '已结算',
+      value: '1', // 已结算
+    },
+  ];
+
+  // 切换选项卡
+  function onTabsChange(e) {
+    resetPagination(state.pagination);
+    state.currentTab = e.index;
+    getOrderList();
+  }
+
+  // 获取订单列表
+  async function getOrderList() {
+    state.loadStatus = 'loading';
+    let { code, data } = await BrokerageApi.getBrokerageRecordPage({
+      pageSize: state.pagination.pageSize,
+      pageNo: state.pagination.pageSize,
+      bizType: 1, // 获得推广佣金
+      status: state.currentTab > 0 ? state.currentTab : undefined,
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+    if (state.currentTab === 0) {
+      state.totals = data.total;
+    }
+  }
+
+  onLoad(() => {
+    getOrderList();
+  });
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getOrderList();
+  }
+
+  // 上拉加载更多
+  onReachBottom(() => {
+    loadMore();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .header-box {
+    box-sizing: border-box;
+    padding: 0 20rpx 20rpx 20rpx;
+    width: 750rpx;
+    background: v-bind(headerBg) no-repeat,
+      linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    background-size: 750rpx 100%;
+
+    // 团队信息总览
+    .team-data-box {
+      .data-card {
+        width: 305rpx;
+        background: #ffffff;
+        border-radius: 20rpx;
+        padding: 20rpx;
+
+        .total-item {
+          margin-bottom: 30rpx;
+
+          .item-title {
+            font-size: 24rpx;
+            font-weight: 500;
+            color: #999999;
+            line-height: normal;
+            margin-bottom: 20rpx;
+          }
+
+          .total-num {
+            font-size: 38rpx;
+            font-weight: 500;
+            color: #333333;
+            font-family: OPPOSANS;
+          }
+        }
+
+        .category-num {
+          font-size: 26rpx;
+          font-weight: 500;
+          color: #333333;
+          font-family: OPPOSANS;
+        }
+      }
+    }
+
+    // 直推
+    .direct-box {
+      margin-top: 20rpx;
+
+      .direct-item {
+        width: 340rpx;
+        background: #ffffff;
+        border-radius: 20rpx;
+        padding: 20rpx;
+        box-sizing: border-box;
+
+        .item-title {
+          font-size: 22rpx;
+          font-weight: 500;
+          color: #999999;
+          margin-bottom: 6rpx;
+        }
+
+        .item-value {
+          font-size: 38rpx;
+          font-weight: 500;
+          color: #333333;
+          font-family: OPPOSANS;
+        }
+      }
+    }
+  }
+
+  // 订单
+  .order-box {
+    .order-item {
+      background: #ffffff;
+      border-radius: 10rpx;
+      margin: 20rpx;
+
+      .order-footer {
+        padding: 20rpx;
+        font-size: 24rpx;
+        color: #999;
+      }
+
+      .order-header {
+        .no-box {
+          padding: 20rpx;
+
+          .order-code {
+            font-size: 26rpx;
+            font-weight: 500;
+            color: #333333;
+          }
+
+          .order-state {
+            font-size: 26rpx;
+            font-weight: 500;
+            color: var(--ui-BG-Main);
+          }
+        }
+
+        .order-from {
+          padding: 20rpx;
+
+          .from-user {
+            font-size: 24rpx;
+            font-weight: 400;
+            color: #666666;
+
+            .user-avatar {
+              width: 26rpx;
+              height: 26rpx;
+              border-radius: 50%;
+              margin-right: 8rpx;
+            }
+
+            .user-name {
+              font-size: 24rpx;
+              font-weight: 400;
+              color: #999999;
+            }
+          }
+
+          .order-time {
+            font-size: 24rpx;
+            font-weight: 400;
+            color: #999999;
+          }
+        }
+      }
+
+      .commission-box {
+        .name {
+          font-size: 24rpx;
+          font-weight: 400;
+          color: #999999;
+        }
+      }
+
+      .commission-num {
+        font-size: 30rpx;
+        font-weight: 500;
+        color: $red;
+        font-family: OPPOSANS;
+
+        &::before {
+          content: '￥';
+          font-size: 22rpx;
+        }
+      }
+
+      .order-status {
+        line-height: 30rpx;
+        padding: 0 10rpx;
+        border-radius: 30rpx;
+        margin-left: 20rpx;
+        font-size: 24rpx;
+        color: var(--ui-BG-Main);
+      }
+    }
+  }
+</style>
diff --git a/pages/commission/promoter.vue b/pages/commission/promoter.vue
new file mode 100644
index 0000000..8b1668f
--- /dev/null
+++ b/pages/commission/promoter.vue
@@ -0,0 +1,297 @@
+<template>
+	<s-layout title="推广人排行榜">
+		<view class="PromoterRank" style='backgroundColor:red'>
+			<view class="redBg bg-color">
+				<view class="header">
+					<view class="nav acea-row row-center-wrapper" style='display:flex'>
+						<view class="item" :class="state.currentTab === index ? 'font-color' : ''"
+							v-for="(item, index) in tabMaps" :key="index" @click="switchTap(index)">
+							{{ item }}
+						</view>
+					</view>
+					<!-- top3 排名 -->
+					<view class="rank acea-row row-bottom row-around">
+						<view class="item" v-show="state.two.id">
+							<view class="pictrue">
+								<image :src="state.two.avatar"></image>
+							</view>
+							<view class="name line1">{{state.two.nickname}}</view>
+							<view class="num">{{ state.two.brokerageUserCount }}人</view>
+						</view>
+						<view class="item" v-show="state.one.id">
+							<view class="pictrue">
+								<image :src="state.one.avatar"></image>
+							</view>
+							<view class="name line1">{{state.one.nickname}}</view>
+							<view class="num">{{ state.one.brokerageUserCount }}人</view>
+						</view>
+						<view class="item" v-show="state.three.id">
+							<view class="pictrue">
+								<image :src="state.three.avatar"></image>
+							</view>
+							<view class="name line1">{{state.three.nickname}}</view>
+							<view class="num">{{ state.three.brokerageUserCount }}人</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<!-- 其它排名 -->
+			<view class="list" v-if="state.rankList.length">
+				<view class="item acea-row row-between-wrapper" v-for="(item,index) in state.rankList" :key="index">
+					<view class="num">{{ index + 4 }}</view>
+					<view class="picTxt acea-row row-between-wrapper">
+						<view class="pictrue">
+							<image :src="item.avatar"></image>
+						</view>
+						<view class="text line1">{{item.nickname}}</view>
+					</view>
+					<view class="people font-color">{{ item.brokerageUserCount }}人</view>
+				</view>
+			</view>
+		</view>
+	</s-layout>
+</template>
+
+<script setup>
+	import sheep from '@/sheep';
+  import { onLoad } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import BrokerageApi from '@/api/trade/brokerage';
+
+  const tabMaps = ['周排行', '月排行'];
+
+  const state = reactive({
+    currentTab: 0,
+
+		rankList: [],
+		times: [],
+
+		one: {}, // 排名第一
+		two: {}, // 排名第二
+		three: {}, // 排名第三
+	});
+
+	function switchTap(index) {
+		if (state.currentTab === index) {
+			return;
+		}
+		state.currentTab = index;
+		calculateTimes();
+		getRankList();
+	}
+
+	async function getRankList() {
+    // 重置数据
+    state.one = {};
+    state.two = {};
+    state.three = {};
+    state.rankList = [];
+    // 查询
+    const { code, data } = await BrokerageApi.getBrokerageUserRankPageByUserCount({
+      pageNo: 1,
+      pageSize: 10,
+      'times[0]': state.times[0],
+      'times[1]': state.times[1],
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.rankList = data.list;
+    state.one = state.rankList.shift() || {};
+    state.two = state.rankList.shift() || {};
+    state.trhee = state.rankList.shift() || {};
+  }
+
+	function calculateTimes() {
+		let times;
+		if (state.currentTab === 0) {
+			times = getWeekTimes();
+		} else {
+			times = getMonthTimes();
+		}
+		state.times = [formatDate(times[0]), formatDate(times[1])]
+	}
+
+  onLoad(function () {
+    calculateTimes();
+    getRankList();
+  });
+
+	function formatDate(date) {
+		return sheep.$helper.timeFormat(date, 'yyyy-mm-dd hh:MM:ss');
+	}
+
+  // TODO 芋艿：此处可考虑抽离
+  // 此处可考虑抽离
+	/**
+	 * 获得当前周的开始和结束时间
+	 */
+	function getWeekTimes() {
+		const today = new Date();
+		const dayOfWeek = today.getDay();
+		return [
+			new Date(today.getFullYear(), today.getMonth(), today.getDate() - dayOfWeek, 0, 0, 0),
+			new Date(today.getFullYear(), today.getMonth(), today.getDate() + (6 - dayOfWeek), 23, 59, 59)
+		]
+	}
+
+	/**
+	 * 获得当前月的开始和结束时间
+	 */
+	function getMonthTimes() {
+		const today = new Date();
+		const year = today.getFullYear();
+		const month = today.getMonth();
+		const startDate = new Date(year, month, 1, 0, 0, 0);
+		const nextMonth = new Date(year, month + 1, 1);
+		const endDate = new Date(nextMonth.getTime() - 1);
+		return [startDate, endDate]
+	}
+  // TODO 芋艿：css 需要优化下；并且展示样式有问题
+</script>
+
+<style lang='scss' scoped>
+	.PromoterRank .redBg {
+		padding: 45rpx 0 30rpx 0;
+	}
+
+	.PromoterRank .header {
+		background: url("data:image/jpeg;base64,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") no-repeat;
+		width: 100%;
+		height: 460rpx;
+		background-size: 100% 100%;
+	}
+
+	.PromoterRank .header .nav {
+		width: 450rpx;
+		height: 66rpx;
+		border: 1px solid #fff;
+		border-radius: 33rpx;
+		font-size: 30rpx;
+		color: #fff;
+		margin: 0 auto;
+	}
+
+	.PromoterRank .header .nav .item {
+		width: 223rpx;
+		height: 100%;
+		text-align: center;
+		line-height: 60rpx;
+	}
+
+	.PromoterRank .header .nav .item.font-color:nth-of-type(1) {
+		background-color: #fff;
+		border-radius: 33rpx 0 0 33rpx;
+		color: red
+	}
+
+	.PromoterRank .header .nav .item.font-color:nth-of-type(2) {
+		background-color: #fff;
+		border-radius: 0 33rpx 33rpx 0;
+		color: red
+	}
+
+	.PromoterRank .header .rank {
+		padding: 0 20rpx;
+		margin-top: 30rpx;
+	}
+
+	.PromoterRank .header .rank .item .pictrue {
+		background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIgAAACxCAYAAAAfz/U3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxNGUyNzRkOS00YmQ4LTUzNGItYWZkZS02ZTlmMTgxYmZlYWUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODVBODg2MzdEOEU1MTFFOTg4RTM5OTQyQjhDODMzMTciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODVBODg2MzZEOEU1MTFFOTg4RTM5OTQyQjhDODMzMTciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTAxZGU2OWItNWM2My0xOTQ1LTllZmMtMGIzNjcwYTFmNWUxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE0ZTI3NGQ5LTRiZDgtNTM0Yi1hZmRlLTZlOWYxODFiZmVhZSIv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") no-repeat;
+		background-size: 100% 100%;
+		width: 136rpx;
+		height: 177rpx;
+		position: relative;
+		margin: 0 auto;
+	}
+
+	.PromoterRank .header .rank .item .pictrue image {
+		position: absolute;
+		width: 130rpx;
+		height: 130rpx;
+		display: block;
+		bottom: 2rpx;
+		border-radius: 50%;
+		left: 50%;
+		margin-left: -65rpx;
+	}
+
+	.PromoterRank .header .rank .item:nth-of-type(2) .pictrue {
+		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJwAAADNCAYAAABNahkfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxNGUyNzRkOS00YmQ4LTUzNGItYWZkZS02ZTlmMTgxYmZlYWUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NUU1MTlBRjBEOEU1MTFFOUEwRjRGRTQyMUZGNDk5NEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NUU1MTlBRUZEOEU1MTFFOUEwRjRGRTQyMUZGNDk5NEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTAxZGU2OWItNWM2My0xOTQ1LTllZmMtMGIzNjcwYTFmNWUxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE0ZTI3NGQ5LTRiZDgtNTM0Yi1hZmRlLTZlOWYxODFiZmVhZSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvxFTDIAABepSURBVHja7J0JmFTVlccP3TR0Qzdbs4kBFDNWFHAlrriTaBwdU6iA0YnjMgoq4zaYzGQzGTOZmLiNCGrckjFRcSmXxEA04oILBEUENGUUcAO66QaabnoBmp7z73s7vdz7ql5VvffqVdX5f98pmlevXt++91fnbufe26utrY2yoniUsqpILNX0TuXXr7MdxTaAbSBbM9s2tnfZlrI9zLaFckGp/v0eqTeJkoF2Cr/epEGzaRTbgWzfYrue7Xa2O9l2S+YJcKmA1otf/4vteyl8agzbrWynawA3S0Z2V5FkgaMeThG2rprC9irbaMlGAc6Nd/ux9lCZ6Cts90lmCnBu2mw/9OhpX/fwWQJcnuonHj/vu2zjJFsFOJt3O4dfj/H4qWVs/yaZK8DZNNWn505mK5HsFeC6ejcM5h7s09Mn+PhsAS5HNZJtmE/P7ksyRCLA9dAoH4GDhkgWC3Bd1cTW4uPzWyWLwzW1VU5qTnKs9jSYBP+E7W9sNQH8/o1s1T5WfZ8HlI+jdR7ux1bKtk7/7vcFOKViPWyAkf1JtuY8G0IbMCG+wcd0bGLb6hNwOzTMfuoQtst0T3tEj/f2sP2ebQHbbwu5SgVgb5Oa8J7kcE+E1ODpm2zf9i0lkdhOUmFGfugjtg98zMcfsb3MNssCW0c5/xOp+eFntfcrOOCOZ3s+heECRGL8mm2Oj2nya+7zObZdPj37EbYbScXnudGZbAspHh1fOMDFo2O1a0+nV3gz27k+ebnXSAVSeqlaUjFyfgh5MSONz325/UsQjw4rDOCIfsb2pQw+f4ePQxjXsnkZBv1jDZ3XOilDb78v2w/yH7h49FB+nZ7hU/Ziu8onL4e24vUePe0h3dnxo6P17x4850ouj4Py3cOd4dHvPVMPpfgB3W38em+GT3mFbaZPeYipsq95VP6n5DtwJ3r0nIN1D9avXuvlGVQ5aLMhzNyvgWT06L0KBjg534Hbz8O0j/Q1pZHYTdpLuZ0lwGD12bod2Ohjyrz8u8fkO3BeZlYf31Mbid1D7kfpH2N7KoA8LPXwWYPyHbjPPHxWfUBpfsPlfUsDSs8OD5+1Kd+B+9ij5zQFmFl/clGt1uuOQhD6q4fP+jzfgXvbo+dgUnp9QGn+kJLPFOAL8ElA6cHv2Rmy8ggtcM949JzH2RoCSnOVBiqRNgeYn5jzfdaD56BjsyC/gYvElvHrYg8y6q4AU73VhUfZSMHFvGEmZL4Hz3mUy+OjfPdw0GxdiOlqDoVvG4Wg8/Ilttsy+DyiV36U75nU4eXWkIrdSkf/zTYv4BQPpuRDMPtT8CuzrmN7Ms0mwvlcDp8XBnBKT7BdwPapy/uxNdZ3KP39PjIR1juUJbmnLEv5iDy8O4X732E7jWFbUQjVQE8hROk4trdc9KSOJRWOkw0NdeG9+mkvF7TwRUTgJTbcSxYRjXi/E8i/QNPQA0fawyXrudbob2a2hEIqduHhTshiGp928aW4J8CefWiBg7YleR+xX/+QxfQd7/K+47KYRlStyWIEt2a7oMMCXLLGKxrs/5iVlKno5Aku7/4q+RUy5Q64REIQ6BYBTsnNaqx/zVLasOVWpct7EQlzVhbSiKDWE13k8U4BrrMdl2xCGmtWzwnYuyEqI9UwboQzBb388mJS20kkA65ZgFPCtNF6F/dh3KlXgOk6O42242Td5gxK4zRwybSaQrD6PyzAwbu5GRc6mu3CgLwb2o3/keanbwrQy2GoqJ+L+z4OQ0GHaW8Rt3FymGkYGUB6fs6W7trNI9j+M4A0Ttde2I3eF+C6a5XL+7Bi6yGfvRuGN67J8CnfJ+ezHbzQAeR+hqGe/N0mIyeBQ3zbHpf3nsr2C59g+7JHQGMQFlsrfMmHVJbqNLoND0enrFqA6661lFr4OdZlXusxbFhQ8gJ5twk0hkkQtzbYw1RWkNqY5ogUPrOSrU6A667qFKrVDt1KXu01Eo+iXYhFMPt4/HcdqgHxYlcmpA37saS6lnRVWAo5bBsSvpdmL+0u/c1PFzasIX3dxzYXdkbHeodMBoUxvbaQ1LBLKtrjcgSgIIFLN2OuIHXU0BkpgjaQ7Zf80x/I/7MUsJfH0/rLMTaFz2Gr1ls0sOks/K4Nk4frFbLjKxF3tjrDNs/TuvcGj2WLjMCIPDoGl7B9U4MQtLDa7CWdTmy4uJ06ZwEQldJffwGw+v8bKQLaU0utnjtLx1dmDzhnEF9Lo9pwares1j20rRriMboddBglnwoKSvBAWFeAgVnMolRS55apXgwe38Rw/SAsxRvG4ysXeQTcRG1hV6W2I316/uIw/bFh3MX8NRJ5pTo9JCLAJRDCn6uEFU+EjsYWAS6RIjF8K18QVjzRi5yfbQJccv1ZWMlY6PW+HLZEhfXM+5d0VRDccUHFA4j6jCIqGck2nG2YutZuFcrw/exVzP/oFYF7mojaEGK2h6i1Xtt2Zbs2s1Wzcetg5xfqWrBazrZGgHNXrX5K8egSUmcL+PBXDyIqO5CodH+ivvuwjVXXUq4fyroDm0i7txG1fMK2nn3PR0RNf+Vrvh6ws4jzcY8A514LPQOuqB9R/0PYDifqN56914gs5PQgZf27HEsBD9i4mmjHO2wr2FF6tmkm1i48FcZCDd/Ab4fUZPqatKvV3pVEFUcRlR/N3uwrqioMs1A1w+s1vEVU/yZ7v4x22l/G3u1IAS516HDKivuDL4pKGbLjiAaeoKrMQJc/eEofw/c+Ud0rDN9r7PlSXvtyBQM3P4x/We8Qw3YiqXWeyVU6jiE7lWjA8Qq6nBd/UcrGKxt+MdH2Vxm+P3Hbz9WyBPRiNob2LwvhXCqq0v+lpMcbcaH0P4wr3LO4XTaRCkKNq7jv/oxq8yU/LAebBc1mT7dJgLODhvoPy90QOj44IWgV3C6rnM69yzFUkNr5GVHNY1zdvpEMPGyhgcjoB8IyABwO4OJRRMM+SMkiWcuPIBp6nhrKEKkhlhpu5jYsS3YnBtIvYug+E+DiUVSd9yT0an25jTb8Iq46Jwhk1qp2NVE1f19b1ia6CyFaMxm6BYUJXDyKUdO5lGjVeHE50bBvc4dgSg73OAPs2da9SLT5N9xtSLgj1wO6bddYOMDFo4iyxcDkIY73VExmr3ZJejMAhSzMaFTfz+27JYnuQkTOVIZuXf4DF4+eRmrnS/uALgAbMUu110TpC+26qvkKQLswV419fhfmL3Dx6BV6yMM+7F8+iWjkVfzuQAHGC7XWEW3iVkvDcsc72K5m6O7KL+Di0SI93HGdPRUl3Fa7kLsNp0tbzY+23baFqlPR5niYjlrfG8Bkv//AqV2I/o9tmr0KrSQadQNR2f7Chp9q/pDoi5sTzdHiZJ8LGLqduQuc6oniD7Fvl4qpm73nSBUaZBX7BVc0TY5hclifey5D15R7wMWjWFuJfTXsJw4POJHba1dyCnoLCIHWsLu5XcdNtu0vO92BVV5nMnQ7cgc45dl+b4eN22iV5xINnSHttWy262oeJap9nBymxl7S0DWGHzjVZnvKXo0yYCMuIxp0mpR5GITORNW9TtChep3qdZvOW+DiUQx38FfHtvkzd1T3mq2qUlF4tJ1r0I2Y8LF2UBFxMoOh82xvYK9Xbf3UEbZR1wtsYdSAk1TZ2FFAWf4snB4uHsV5T/Os1ehI9mwDT5LCDbPq2NNtutOpevUsgtgb4NR0FToJ5gxCe5vtG1Kgud2ma9WdiD9mv0qNR7Gt1G+tsA2ZKrDlktCZq5xqe6e4vYxVWWcRuHgU5wPggFhzIh7rC4ZdIIWYaxp6vio7U4Pby1qVedY8HCp9M8QIaz/RbpNxthyUbnP3sx5RgbKemx3gVKSuGTzZPjc6R2YQcpq53qoMe1vPtLuIy35asJ0GtQZhJfUMC0dCR/9UJuLzRZjw//R7ajqsuxCufnA6aySK0oAN9eSDZFuDgDWUAlv+CHuvDL/YqT33kGbB9yoVmzGbq6sQPClTVvnZc0XZmjpZs+BjlRqP4pyrNYZ3Q1j42Ntk/UG+CmFN66+xhaujah3PVavrlf6perjbrFUp1iAIbPkrxCuOuMKpar3dnyo1HkU1Ot24XnGsLHgpBJV/Va2kMzWN2TjJW+DiUYxx3GGSX86NykulMApFIy5VZW6r+VSkkGce7hKyHVY79J+lKi20qhUL001hl8VLvQFOhYrfaFzvuy/3YKZIIRSaBp6iyt7UD3Wkd8Ye7iqyHfndPj5TJAVQcCpSOyKYwjlpV2QGXDyKCvt6swF5hGwsU8jCPKu9o3iDrhHT9nAz2YZ1v9RLbZklKmy1M2BMNAxnm5UecKpnOtu4XnGM7M8mUgxgSMzUbM1Oyh4OY25jDO9WOU0yW6SE5Z6mlwMz56UDnKXtdnjhbnMqsni5MU7zrNemBlw8it3DDzWuDz5LMlnUgwnr2S2HaoZcezhzEA/bnkrPVGT0WCcoNkxd5g44NRTyLeP6oFMlc0UOXs4aljZDs5TUw52N1lr3u0qdFlaIROr0H/NAFjB0jhvgprl8oEjU6ZDAiAuWinpUp1ju9zXjYzi7SiRKJDsjU5ipykQe7ptsJd2u9B6iD0oTiRIIjPQ2lieXaKYcgTvTrE6PIVlfKkquXk4zD2fYgYtHS9pdoAHc0ZKXIpedh6OdqtU+Ng832eyd9lOH24pErqrVCDPT39ZbPdYGnDnQhmO7JeZN5L672v2I9U6dZgPO7NfiPFKRKBX1P9x2dXJ34OJRDLKZd9o3NBGJnNXPOqIxSTP2dw+HKf++3W7B4piSkZKBotQEZsyFVX00Y38H7kizAShjb6J0Ow9Wdo7qCpzZ0iuVTWlEacrOzkFdgZtovC1h5KJ0ZWdnogJOxZ8fYH5orGScKE3grOwcANbg4cYZHYbiAbKiXpS+wI7JDxgbB+DMZdR99pZME2XYW93LdnVfAGdWuCXDJcNEGQJnZWgfAU4UOHCjBDhRQMDtBeCGGZfRaRCJMpGdoWEArlKAE3kPnPVY+aEOwFVIhokyBM7K0BAAZ+6hWdRfMkyUmYqsR3JVADhz/V9RH8kwUYbAWRkqBXCWkF5ZNCPKmDhrRYurZmVbVCb5JcqQN+vC+XJZsCAK3O81GFf3NEnOiDLTnmbb1QYA12peb5MME2VKnO1iK4BrMe/dKfklypA3K0PNAK7evHmHZJgoQ+AabVfrAVyt6fjqJcNEmcnO0BYH4LZLhokyBK7OdrUGwG0W4ETeA2dlaDOA22Bc3lUtGSbKTHaGNgK49QKcKCDg1gtwosCBW2dc3rlBMkyUIXAbbVfXAbi11HPwFz2M3dsk00TpCeyY/ICxtUUUie3mHz4wPtTyiWScKD3Z2fkArHVEi6wyP7ReMk6UJnBWdtoZ6wDuPePt5g8l40Tpyc7Oe12Be8t4u+l9yThRemr6wHZ1aVfglqNvajT8dm2SzBOl2DutYna29rwKtv7SCVwk1qyh665G8XKiFNW4xnZ1uWas20qHJcZtO96WDBSlJjszr3f80BW4heaHV5JD5KZIZBGz0vie7Y0/2oADhd3XNyAQsyku+Shy2VlgVlqNJTK48IYJXCSGht2LxkPq35CMFLlT/Zu2qy8yWy02Dwc9ZwdOFtWIkqnNyTn9oet/egL3DDq23a7s3iJjciIX1ekHzIoRPA6WYs7ARWK11mq17hXJUFFibX/FqTqtTeThoAVmtfqa08JWkUixsf1V2zuP97xgA+4Js7farKATiaydBatDanAHXCSGGx81rm9dKBkrssvOxqOapaQeDrrXuNKylqhxtWSuqLvABNgw9SvbRTtwkRgmWleYJD8rGSzqwcRztqsrmKFl7oFTus240rCcaf5UMlmkaz1moeEvtndud/pIIuAeYetBVxtR7eOS0SKldhaMSQEw87vUgVNrHe40eySvS/i5SDFQ/7rtnTs1Oyl7OOhuthrDy9U8Ihle6Kp51ObdqjUzlB5wqlt7i9mWW+YUaCcqBDVx2Tcstb1zs20oJBUPR7parTKuVt9PEitXiOIyr7rf9gZWPs9L9unkwEVi2J3wRrMOX0dU92fJ/0ITyrxlne2dnzArTZkDp3Qfm1mHbv6N0z5gonwUyhplbgphvr9y8wh3wKlex7VmAri6rrpPCqJQhLJutTbRrmFGWr0DTkH3AlkjSZY4Df6J8kko4/oltneeYDYWu31MqgeDXMO21SR/nlSteV2VbldlbAo71lydyqNSAy4SQ0/kBuM6Fk1vmksSip6P4jLddKfTblo3MBMb/ANOCX1i04VinnWbhDDlnbYtUmVrarHuTJK/wEVicGMXWqvW6gdkE5x8Esqy2jrmhrL/F82Cz8Ap6D7j11mm9+XO7Bc3yy7o+dJuQ1m2WadFZzEDaYUNpX+aYCT2GL8+aLbnaok2OCZUlBPNNi67Db+wrcKi9jJXZU/BAqd0Fdu7xlXMs6KhKZ2I3O0k2KO7V+oyp+wAF4nhQKWzre05rOKp+Z2UX64JUSD2FVhb28talXmWgFPQIaD9fLIdg1n7pPRcc6pHutApwLa1vYwjsY8z/RXenAgdiWF3nNlW91x1L39jFkthhl11i1VZ2ZtBs3UZUziAU9DN59dfWqHbOFc2xQmzUDbOA/e36rKlcAGn9F1SC6l7aA/3em5hT/eyFG7YhDJB2dhjG7lNZJlZykC92to87knGo31IbWByuuXXEY24nGjQqVLQoWizLeJq9B4nz/Y8W1Rv4xZi4BR0/Uht/XWyFbqhM4gqp0mBZ3Poo+Yx7iAscIINje4zMu2RBgecgq6cX7Fy+iTr+wOnsLebySkolvIPlLXd3F6bl6gjh3bPmcnWJoQPOAVdmW7TnW59v2w80d7cRCgeICAEoY7pqibHBVCoRs9xEyoeTuA623QPs51rfb93pYKudH8Bwk81/41h+7nTdBWEAbgLvG6zBQ+cgq5ID5lca09FCdHwi7gzcZpq44m8ba9hQLf6Qf5xl9NN2NZjjtsw8fAD1wke5uGw74S94VY+iWgk31I8UDjxqgrFvKg9nq39DlLrEeYGlaRggVPQwY1hknWwvYodxJ2JWQzfEQJMJsJi9ar5ic693aqr0OeDTFbwwCnoxpEaVDzE8Z6KyVzNXqIAFLkXAEPQpH3BS4cQ4XO2ngen/AdOQYexOrjyixzvKS4nGnYh0cBTpG3npq2GRcqbf+20lK9DD7Fd6ccYW7iB6wQPI8B3O1axUN9xqlPRb4JwZRNi19ApaEnosFCFzmTQFmQzqdkHTkE3Wn/zTk54H9p1Q89jAPcRyCAc9Y2Yw4Zlye7EKO+FemkACXAKOtSZF+vhkwQNN76t4hg1NdZ3TGGCtvMzNTWV/JSgbe3DHVhpl8aCl/wGrhO8kaR2bDonSdKJ+h9GNOQsrmonFkjVuYpoyzNEO94hF+H7mOG5OtV1o4UHXCd4JxJisYgOTXpv6X4qAqXiOKKi0vyCrOOMDER2NLsKuMVm4NcxaC+H8c8JL3AKuqL2hi7R99n2Sno/YAN0A08gKjswh3u2bep8M6wtgLk7BQi7ItxEOPIgwZanApw78BAEgHWw32Eb7uozmKOtOJrtWIYP87RFIf8j9zBkH6p9c3EMpPOcZ09tZvsftvl+TroXFnCd4CHk6XJSG6iMdv05RKP0P4TbegezjScqGRGOv2dXtRrSaFzJ7bJ3U11Ajh7nHWz3+BVKJMB1glfCr9Pb2ypu2niG9xukqlxEqGCIpe9Y/2c0MAOAYQzs/t38EVucgduczpNW6LbtYwzarlwrutwErjt8mHS9lO08tvK0n4OAgT6jlPcr4Vq7ZJi6VlzRaaiWEdlS1FfXgi06AoOrw9b6LlanYIIH21VFtHNDptuZwYNh6/j7nE54EeCyU91iUfYMNsyFleT4XwSSsYky9qd/MpeqzcIArjt8QwgLQBAqreArz5GUN2jIsB4kxpBtybeiyU/gusOHiOPJbKfqfyex9QlJ6hBdi2A1hHYsav/X54hbAS47QyyA7ki2g9gwTXFgABACpPfZVml7qx22HBjKEOC8h7A3vyJGb58u/3IPgiq1DWUbou9Gj6Gf/hkhPi36Z1R/OCaqVhumlLhLSmv1v+tysVfptf5fgAEAz+JzEYHECRMAAAAASUVORK5CYII=");
+		width: 156rpx;
+		height: 205rpx;
+	}
+
+	.PromoterRank .header .rank .item:nth-of-type(2) .pictrue image {
+		width: 150rpx;
+		height: 150rpx;
+		margin-left: -75rpx;
+	}
+
+	.PromoterRank .header .rank .item:nth-of-type(3) .pictrue {
+		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIgAAACxCAYAAAAfz/U3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxNGUyNzRkOS00YmQ4LTUzNGItYWZkZS02ZTlmMTgxYmZlYWUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTExRTlGRDlEOEU2MTFFOTg0MDg4RjQ5MDM3QjNGRTIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTExRTlGRDhEOEU2MTFFOTg0MDg4RjQ5MDM3QjNGRTIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTAxZGU2OWItNWM2My0xOTQ1LTllZmMtMGIzNjcwYTFmNWUxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE0ZTI3NGQ5LTRiZDgtNTM0Yi1hZmRlLTZlOWYxODFiZmVhZSIv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");
+	}
+
+	.PromoterRank .header .rank .item:nth-of-type(3) .pictrue image {
+		margin-left: -64rpx;
+	}
+
+	.PromoterRank .header .rank .item .name {
+		font-size: 30rpx;
+		color: #fff;
+		margin-top: 22rpx;
+		text-align: center;
+		width: 170rpx;
+	}
+
+	.PromoterRank .header .rank .item .num {
+		font-size: 30rpx;
+		color: #fff;
+		text-align: center;
+	}
+
+	.PromoterRank .list {
+		width: 710rpx;
+		background-color: #fff;
+		border-radius: 20rpx;
+		margin: -60rpx auto 0 auto;
+		padding: 0 30rpx;
+	}
+
+	.PromoterRank .list .item {
+		border-bottom: 1px solid #f3f3f3;
+		height: 101rpx;
+		font-size: 28rpx;
+	}
+
+	.PromoterRank .list .item .num {
+		color: #666;
+		width: 70rpx;
+	}
+
+	.PromoterRank .list .item .picTxt {
+		width: 350rpx;
+	}
+
+	.PromoterRank .list .item .picTxt .pictrue {
+		width: 68rpx;
+		height: 68rpx;
+	}
+
+	.PromoterRank .list .item .picTxt .pictrue image {
+		width: 100%;
+		height: 100%;
+		display: block;
+		border-radius: 50%;
+	}
+
+	.PromoterRank .list .item .picTxt .text {
+		width: 262rpx;
+		color: #333;
+	}
+
+	.PromoterRank .list .item .people {
+		width: 175rpx;
+		text-align: right;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/commission/team.vue b/pages/commission/team.vue
new file mode 100644
index 0000000..f52de0d
--- /dev/null
+++ b/pages/commission/team.vue
@@ -0,0 +1,581 @@
+<!-- 页面 TODO 芋艿：该页面的实现代码需要优化，包括 js 和 css，以及相关的样式设计 -->
+<template>
+  <s-layout title="我的团队" :class="state.scrollTop ? 'team-wrap' : ''" navbar="inner">
+    <view class="promoter-list">
+      <view
+        class="promoterHeader bg-color"
+        style="backgroundcolor: #e93323 !important; height: 218rpx; color: #fff"
+      >
+        <view class="headerCon acea-row row-between" style="padding: 28px 29px 0 29px">
+          <view>
+            <view class="name" style="color: #fff">推广人数</view>
+            <view>
+              <text class="num" style="color: #fff">
+                {{
+                  state.summary.firstBrokerageUserCount + state.summary.secondBrokerageUserCount ||
+                  0
+                }}
+              </text>
+              人
+            </view>
+          </view>
+          <view class="iconfont icon-tuandui" />
+        </view>
+      </view>
+      <view style="padding: 0 30rpx">
+        <view class="nav acea-row row-around l1">
+          <view :class="state.level == 1 ? 'item on' : 'item'" @click="setType(1)">
+            一级({{ state.summary.firstBrokerageUserCount || 0 }})
+          </view>
+          <view :class="state.level == 2 ? 'item on' : 'item'" @click="setType(2)">
+            二级({{ state.summary.secondBrokerageUserCount || 0 }})
+          </view>
+        </view>
+        <view
+          class="search acea-row row-between-wrapper"
+          style="display: flex; height: 100rpx; align-items: center"
+        >
+          <view class="input">
+            <input
+              placeholder="点击搜索会员名称"
+              v-model="state.nickname"
+              confirm-type="search"
+              name="search"
+              @confirm="submitForm"
+            />
+          </view>
+          <image
+            src="/static/images/search.png"
+            mode=""
+            style="width: 60rpx; height: 64rpx"
+            @click="submitForm"
+          />
+        </view>
+        <view class="list">
+          <view class="sortNav acea-row row-middle" style="display: flex; align-items: center">
+            <view
+              class="sortItem"
+              @click="setSort('userCount', 'asc')"
+              v-if="sort === 'userCountDESC'"
+            >
+              团队排序
+              <!-- TODO 芋艿：看看怎么从项目里拿出去 -->
+              <image src="/static/images/sort1.png" />
+            </view>
+            <view
+              class="sortItem"
+              @click="setSort('userCount', 'desc')"
+              v-else-if="sort === 'userCountASC'"
+            >
+              团队排序
+              <image src="/static/images/sort3.png" />
+            </view>
+            <view class="sortItem" @click="setSort('userCount', 'desc')" v-else>
+              团队排序
+              <image src="/static/images/sort2.png" />
+            </view>
+            <view class="sortItem" @click="setSort('price', 'asc')" v-if="sort === 'priceDESC'">
+              金额排序
+              <image src="/static/images/sort1.png" />
+            </view>
+            <view
+              class="sortItem"
+              @click="setSort('price', 'desc')"
+              v-else-if="sort === 'priceASC'"
+            >
+              金额排序
+              <image src="/static/images/sort3.png" />
+            </view>
+            <view class="sortItem" @click="setSort('price', 'desc')" v-else>
+              金额排序
+              <image src="/static/images/sort2.png" />
+            </view>
+            <view
+              class="sortItem"
+              @click="setSort('orderCount', 'asc')"
+              v-if="sort === 'orderCountDESC'"
+            >
+              订单排序
+              <image src="/static/images/sort1.png" />
+            </view>
+            <view
+              class="sortItem"
+              @click="setSort('orderCount', 'desc')"
+              v-else-if="sort === 'orderCountASC'"
+            >
+              订单排序
+              <image src="/static/images/sort3.png" />
+            </view>
+            <view class="sortItem" @click="setSort('orderCount', 'desc')" v-else>
+              订单排序
+              <image src="/static/images/sort2.png" />
+            </view>
+          </view>
+          <block v-for="(item, index) in state.pagination.list" :key="index">
+            <view class="item acea-row row-between-wrapper" style="display: flex">
+              <view
+                class="picTxt acea-row row-between-wrapper"
+                style="display: flex; align-items: center"
+              >
+                <view class="pictrue">
+                  <image :src="item.avatar" />
+                </view>
+                <view class="text">
+                  <view class="name line1">{{ item.nickname }}</view>
+                  <view>
+                    加入时间:
+                    {{ sheep.$helper.timeFormat(item.brokerageTime, 'yyyy-mm-dd hh:MM:ss') }}
+                  </view>
+                </view>
+              </view>
+              <view
+                class="right"
+                style="
+                  justify-content: center;
+                  flex-direction: column;
+                  display: flex;
+                  margin-left: auto;
+                "
+              >
+                <view>
+                  <text class="num font-color">{{ item.brokerageUserCount || 0 }} </text>人
+                </view>
+                <view>
+                  <text class="num">{{ item.orderCount || 0 }}</text
+                  >单</view
+                >
+                <view>
+                  <text class="num">{{ item.brokeragePrice || 0 }}</text
+                  >元
+                </view>
+              </view>
+            </view>
+          </block>
+          <block v-if="state.pagination.list.length === 0">
+            <view style="text-align: center">暂无推广人数</view>
+          </block>
+        </view>
+      </view>
+    </view>
+    <!-- <home></home> -->
+
+    <!-- 		<view class="header-box" :style="[
+        {
+          marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
+          paddingTop: Number(statusBarHeight + 108) + 'rpx',
+        },
+      ]">
+			<view v-if="userInfo.parent_user" class="referrer-box ss-flex ss-col-center">
+				推荐人：
+				<image class="referrer-avatar ss-m-r-10" :src="sheep.$url.cdn(userInfo.parent_user.avatar)"
+					mode="aspectFill">
+				</image>
+				{{ userInfo.parent_user.nickname }}
+			</view>
+			<view class="team-data-box ss-flex ss-col-center ss-row-between">
+				<view class="data-card">
+					<view class="total-item">
+						<view class="item-title">团队总人数（人）</view>
+						<view class="total-num">
+							{{ (state.summary.firstBrokerageUserCount+ state.summary.secondBrokerageUserCount)|| 0 }}
+						</view>
+					</view>
+					<view class="category-item ss-flex">
+						<view class="ss-flex-1">
+							<view class="item-title">一级成员</view>
+							<view class="category-num">{{ state.summary.firstBrokerageUserCount || 0 }}</view>
+						</view>
+						<view class="ss-flex-1">
+							<view class="item-title">二级成员</view>
+							<view class="category-num">{{ state.summary.secondBrokerageUserCount || 0 }}</view>
+						</view>
+					</view>
+				</view>
+				<view class="data-card">
+					<view class="total-item">
+						<view class="item-title">团队分销商人数（人）</view>
+						<view class="total-num">{{ agentInfo?.child_agent_count_all || 0 }}</view>
+					</view>
+					<view class="category-item ss-flex">
+						<view class="ss-flex-1">
+							<view class="item-title">一级分销商</view>
+							<view class="category-num">{{ agentInfo?.child_agent_count_1 || 0 }}</view>
+						</view>
+						<view class="ss-flex-1">
+							<view class="item-title">二级分销商</view>
+							<view class="category-num">{{ agentInfo?.child_agent_count_2 || 0 }}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="list-box">
+			<uni-list :border="false">
+				<uni-list-chat v-for="item in state.pagination.data" :key="item.id" :avatar-circle="true"
+					:title="item.nickname" :avatar="sheep.$url.cdn(item.avatar)"
+					:note="filterUserNum(item.agent?.child_user_count_1)">
+					<view class="chat-custom-right">
+						<view v-if="item.avatar" class="tag-box ss-flex ss-col-center">
+							<image class="tag-img" :src="sheep.$url.cdn(item.avatar)" mode="aspectFill">
+							</image>
+							<text class="tag-title">{{ item.nickname }}</text>
+						</view>
+						<text
+							class="time-text">{{ sheep.$helper.timeFormat(item.brokerageTime, 'yyyy-mm-dd hh:MM:ss') }}</text>
+					</view>
+				</uni-list-chat>
+			</uni-list>
+		</view>
+		<s-empty v-if="state.pagination.total === 0" icon="/static/data-empty.png" text="暂无团队信息">
+		</s-empty> -->
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import { computed, reactive, ref } from 'vue';
+  import _ from 'lodash';
+  import { onPageScroll } from '@dcloudio/uni-app';
+  import BrokerageApi from '@/api/trade/brokerage';
+
+  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+  // const agentInfo = computed(() => sheep.$store('user').agentInfo);
+  const userInfo = computed(() => sheep.$store('user').userInfo);
+  const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
+
+  onPageScroll((e) => {
+    state.scrollTop = e.scrollTop <= 100;
+  });
+
+  let sort = ref();
+  const state = reactive({
+    summary: {},
+    pagination: {
+      pageNo: 1,
+      pageSize: 8,
+      list: [],
+      total: 0,
+    },
+    loadStatus: '',
+    // ↓ 新 ui 逻辑
+    level: 1,
+    nickname: ref(''),
+    sortKey: '',
+    isAsc: '',
+  });
+
+  function filterUserNum(num) {
+    if (_.isNil(num)) {
+      return '';
+    }
+    return `下级团队${num}人`;
+  }
+
+  function submitForm() {
+    state.pagination.list = [];
+    getTeamList();
+  }
+
+  async function getTeamList() {
+    state.loadStatus = 'loading';
+    let { code, data } = await BrokerageApi.getBrokerageUserChildSummaryPage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+      level: state.level,
+      'sortingField.order': state.isAsc,
+      'sortingField.field': state.sortKey,
+      nickname: state.nickname,
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  function setType(e) {
+    state.pagination.list = [];
+    state.level = e + '';
+    getTeamList();
+  }
+
+  function setSort(sortKey, isAsc) {
+    state.pagination.list = [];
+    sort = sortKey + isAsc.toUpperCase();
+    state.isAsc = isAsc;
+    state.sortKey = sortKey;
+    getTeamList();
+  }
+
+  onLoad(async () => {
+    await getTeamList();
+    // 概要数据
+    let { data } = await BrokerageApi.getBrokerageUserSummary();
+    state.summary = data;
+  });
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getTeamList();
+  }
+
+  // 上拉加载更多
+  onReachBottom(() => {
+    loadMore();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .l1 {
+    background-color: #fff;
+    height: 86rpx;
+    line-height: 86rpx;
+    font-size: 28rpx;
+    color: #282828;
+    border-bottom: 1rpx solid #eee;
+    border-top-left-radius: 14rpx;
+    border-top-right-radius: 14rpx;
+    display: flex;
+    justify-content: space-around;
+  }
+
+  .header-box {
+    box-sizing: border-box;
+    padding: 0 20rpx 20rpx 20rpx;
+    width: 750rpx;
+    z-index: 3;
+    position: relative;
+    background: v-bind(headerBg) no-repeat,
+      linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    background-size: 750rpx 100%;
+
+    // 团队信息总览
+    .team-data-box {
+      .data-card {
+        width: 305rpx;
+        background: #ffffff;
+        border-radius: 20rpx;
+        padding: 20rpx;
+
+        .item-title {
+          font-size: 22rpx;
+          font-weight: 500;
+          color: #999999;
+          line-height: 30rpx;
+          margin-bottom: 10rpx;
+        }
+
+        .total-item {
+          margin-bottom: 30rpx;
+        }
+
+        .total-num {
+          font-size: 38rpx;
+          font-weight: 500;
+          color: #333333;
+          font-family: OPPOSANS;
+        }
+
+        .category-num {
+          font-size: 26rpx;
+          font-weight: 500;
+          color: #333333;
+          font-family: OPPOSANS;
+        }
+      }
+    }
+  }
+
+  .list-box {
+    z-index: 3;
+    position: relative;
+  }
+
+  .chat-custom-right {
+    .time-text {
+      font-size: 22rpx;
+      font-weight: 400;
+      color: #999999;
+    }
+
+    .tag-box {
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 21rpx;
+      line-height: 30rpx;
+      padding: 5rpx 10rpx;
+      width: 140rpx;
+
+      .tag-img {
+        width: 34rpx;
+        height: 34rpx;
+        margin-right: 6rpx;
+        border-radius: 50%;
+      }
+
+      .tag-title {
+        font-size: 18rpx;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 1);
+        line-height: 20rpx;
+      }
+    }
+  }
+
+  // 推荐人
+  .referrer-box {
+    font-size: 28rpx;
+    font-weight: 500;
+    color: #ffffff;
+    padding: 20rpx;
+
+    .referrer-avatar {
+      width: 34rpx;
+      height: 34rpx;
+      border-radius: 50%;
+    }
+  }
+
+  .promoter-list .nav {
+    background-color: #fff;
+    height: 86rpx;
+    line-height: 86rpx;
+    font-size: 28rpx;
+    color: #282828;
+    border-bottom: 1rpx solid #eee;
+    border-top-left-radius: 14rpx;
+    border-top-right-radius: 14rpx;
+    margin-top: -30rpx;
+  }
+
+  .promoter-list .nav .item.on {
+    border-bottom: 5rpx solid;
+    // $theme-color
+    color: red;
+    // $theme-color
+  }
+
+  .promoter-list .search {
+    width: 100%;
+    background-color: #fff;
+    height: 100rpx;
+    padding: 0 24rpx;
+    box-sizing: border-box;
+    border-bottom-left-radius: 14rpx;
+    border-bottom-right-radius: 14rpx;
+  }
+
+  .promoter-list .search .input {
+    width: 592rpx;
+    height: 60rpx;
+    border-radius: 50rpx;
+    background-color: #f5f5f5;
+    text-align: center;
+    position: relative;
+  }
+
+  .promoter-list .search .input input {
+    height: 100%;
+    font-size: 26rpx;
+    width: 610rpx;
+    text-align: center;
+  }
+
+  .promoter-list .search .input .placeholder {
+    color: #bbb;
+  }
+
+  .promoter-list .search .input .iconfont {
+    position: absolute;
+    right: 28rpx;
+    color: #999;
+    font-size: 28rpx;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .promoter-list .search .iconfont {
+    font-size: 32rpx;
+    color: #515151;
+    height: 60rpx;
+    line-height: 60rpx;
+  }
+
+  .promoter-list .list {
+    margin-top: 20rpx;
+  }
+
+  .promoter-list .list .sortNav {
+    background-color: #fff;
+    height: 76rpx;
+    border-bottom: 1rpx solid #eee;
+    color: #333;
+    font-size: 28rpx;
+    border-top-left-radius: 14rpx;
+    border-top-right-radius: 14rpx;
+  }
+
+  .promoter-list .list .sortNav .sortItem {
+    text-align: center;
+    flex: 1;
+  }
+
+  .promoter-list .list .sortNav .sortItem image {
+    width: 24rpx;
+    height: 24rpx;
+    margin-left: 6rpx;
+    vertical-align: -3rpx;
+  }
+
+  .promoter-list .list .item {
+    background-color: #fff;
+    border-bottom: 1rpx solid #eee;
+    height: 152rpx;
+    padding: 0 24rpx;
+    font-size: 24rpx;
+    color: #666;
+  }
+
+  .promoter-list .list .item .picTxt .pictrue {
+    width: 106rpx;
+    height: 106rpx;
+    border-radius: 50%;
+  }
+
+  .promoter-list .list .item .picTxt .pictrue image {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: 3rpx solid #fff;
+    box-shadow: 0 0 10rpx #aaa;
+    box-sizing: border-box;
+  }
+
+  .promoter-list .list .item .picTxt .text {
+    // width: 304rpx;
+    font-size: 24rpx;
+    color: #666;
+    margin-left: 14rpx;
+  }
+
+  .promoter-list .list .item .picTxt .text .name {
+    font-size: 28rpx;
+    color: #333;
+    margin-bottom: 13rpx;
+  }
+
+  .promoter-list .list .item .right {
+    text-align: right;
+    font-size: 22rpx;
+    color: #333;
+  }
+
+  .promoter-list .list .item .right .num {
+    margin-right: 7rpx;
+  }
+</style>
diff --git a/pages/commission/wallet.vue b/pages/commission/wallet.vue
new file mode 100644
index 0000000..d0fb385
--- /dev/null
+++ b/pages/commission/wallet.vue
@@ -0,0 +1,470 @@
+<!-- 分销 - 佣金明细 -->
+<template>
+	<s-layout class="wallet-wrap" title="佣金">
+		<!-- 钱包卡片 -->
+		<view class="header-box ss-flex ss-row-center ss-col-center">
+			<view class="card-box ui-BG-Main ui-Shadow-Main">
+				<view class="card-head ss-flex ss-col-center">
+					<view class="card-title ss-m-r-10">当前佣金（元）</view>
+					<view @tap="state.showMoney = !state.showMoney" class="ss-eye-icon"
+						:class="state.showMoney ? 'cicon-eye' : 'cicon-eye-off'" />
+				</view>
+				<view class="ss-flex ss-row-between ss-col-center ss-m-t-30">
+					<view class="money-num">{{ state.showMoney ? fen2yuan(state.summary.withdrawPrice || 0) : '*****' }}</view>
+					<view class="ss-flex">
+						<view class="ss-m-r-20">
+							<button class="ss-reset-button withdraw-btn" @tap="sheep.$router.go('/pages/commission/withdraw')">
+								提现
+							</button>
+						</view>
+						<button class="ss-reset-button balance-btn ss-m-l-20" @tap="state.showModal = true">
+							转余额
+						</button>
+					</view>
+				</view>
+
+				<view class="ss-flex">
+					<view class="loading-money">
+						<view class="loading-money-title">冻结佣金</view>
+						<view class="loading-money-num">
+              {{ state.showMoney ? fen2yuan(state.summary.frozenPrice || 0) : '*****' }}
+            </view>
+					</view>
+					<view class="loading-money ss-m-l-100">
+						<view class="loading-money-title">可提现佣金</view>
+						<view class="loading-money-num">
+              {{ state.showMoney ? fen2yuan(state.summary.brokeragePrice || 0) : '*****' }}
+            </view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<su-sticky>
+			<!-- 统计 -->
+			<view class="filter-box ss-p-x-30 ss-flex ss-col-center ss-row-between">
+				<uni-datetime-picker v-model="state.date" type="daterange" @change="onChangeTime" :end="state.today">
+					<button class="ss-reset-button date-btn">
+						<text>{{ dateFilterText }}</text>
+						<text class="cicon-drop-down ss-seldate-icon" />
+					</button>
+				</uni-datetime-picker>
+
+				<view class="total-box">
+          <!-- TODO 芋艿：这里暂时不考虑做 -->
+					<!-- <view class="ss-m-b-10">总收入￥{{ state.pagination.income.toFixed(2) }}</view> -->
+					<!-- <view>总支出￥{{ (-state.pagination.expense).toFixed(2) }}</view> -->
+				</view>
+			</view>
+			<su-tabs :list="tabMaps" @change="onChangeTab" :scrollable="false" :current="state.currentTab" />
+		</su-sticky>
+		<s-empty v-if="state.pagination.total === 0" icon="/static/data-empty.png" text="暂无数据"></s-empty>
+
+    <!-- 转余额弹框 -->
+		<su-popup :show="state.showModal" type="bottom" round="20" @close="state.showModal = false" showClose>
+			<view class="ss-p-x-20 ss-p-y-30">
+				<view class="model-title ss-m-b-30 ss-m-l-20">转余额</view>
+				<view class="model-subtitle ss-m-b-100 ss-m-l-20">将您的佣金转到余额中继续消费</view>
+				<view class="input-box ss-flex ss-col-center border-bottom ss-m-b-70 ss-m-x-20">
+					<view class="unit">￥</view>
+					<uni-easyinput :inputBorder="false" class="ss-flex-1 ss-p-l-10" v-model="state.price" type="number"
+                         placeholder="请输入金额" />
+				</view>
+				<button class="ss-reset-button model-btn ui-BG-Main-Gradient ui-Shadow-Main" @tap="onConfirm">
+					确定
+				</button>
+			</view>
+		</su-popup>
+
+		<!-- 钱包记录 -->
+		<view v-if="state.pagination.total > 0">
+			<view class="wallet-list ss-flex border-bottom" v-for="item in state.pagination.list" :key="item.id">
+				<view class="list-content">
+					<view class="title-box ss-flex ss-row-between ss-m-b-20">
+						<text class="title ss-line-1">{{ item.title }}</text>
+						<view class="money">
+							<text v-if="item.price >= 0" class="add">+{{ fen2yuan(item.price) }}</text>
+							<text v-else class="minus">{{ fen2yuan(item.price) }}</text>
+						</view>
+					</view>
+					<text class="time">{{ sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- <u-gap></u-gap> -->
+		<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
+        contentdown: '上拉加载更多',
+      }" />
+	</s-layout>
+</template>
+
+<script setup>
+	import { computed, reactive } from 'vue';
+	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+	import sheep from '@/sheep';
+	import dayjs from 'dayjs';
+	import _ from 'lodash';
+  import BrokerageApi from '@/api/trade/brokerage';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
+  import { resetPagination } from '@/sheep/util';
+
+	const headerBg = sheep.$url.css('/static/img/shop/user/wallet_card_bg.png');
+
+	const state = reactive({
+    showMoney: false,
+    summary: {}, // 分销信息
+
+    today: '',
+    date: [],
+		currentTab: 0,
+		pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 1,
+    },
+		loadStatus: '',
+
+    price: undefined,
+		showModal: false,
+	});
+
+	const tabMaps = [{
+			name: '分佣',
+			value: '1', // BrokerageRecordBizTypeEnum.ORDER
+		},
+		{
+			name: '提现',
+			value: '2', // BrokerageRecordBizTypeEnum.WITHDRAW
+		}
+	];
+
+	const dateFilterText = computed(() => {
+		if (state.date[0] === state.date[1]) {
+			return state.date[0];
+		} else {
+			return state.date.join('~');
+		}
+	});
+
+	async function getLogList() {
+		state.loadStatus = 'loading';
+		let { code, data } = await BrokerageApi.getBrokerageRecordPage({
+			pageSize: state.pagination.pageSize,
+			pageNo: state.pagination.pageNo,
+      bizType: tabMaps[state.currentTab].value,
+      'createTime[0]': state.date[0] + ' 00:00:00',
+      'createTime[1]': state.date[1] + ' 23:59:59',
+		});
+		if (code !== 0) {
+      return;
+		}
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+	}
+
+	function onChangeTab(e) {
+		resetPagination(state.pagination);
+		state.currentTab = e.index;
+		getLogList();
+	}
+
+	function onChangeTime(e) {
+		state.date[0] = e[0];
+		state.date[1] = e[e.length - 1];
+    resetPagination(state.pagination);
+		getLogList();
+	}
+
+	// 确认操作（转账到余额）
+	async function onConfirm() {
+		if (state.price <= 0) {
+			sheep.$helper.toast('请输入正确的金额');
+			return;
+		}
+		uni.showModal({
+			title: '提示',
+			content: '确认把您的佣金转入到余额钱包中？',
+			success: async function(res) {
+				if (!res.confirm) {
+          return;
+				}
+        const { code } = await BrokerageApi.createBrokerageWithdraw({
+          type: 1, // 钱包
+          price: state.price * 100,
+        });
+        if (code === 0) {
+          state.showModal = false;
+          await getAgentInfo();
+          onChangeTab({
+            index: 1
+          });
+        }
+			}
+		});
+	}
+
+	async function getAgentInfo() {
+		const { code, data } = await BrokerageApi.getBrokerageUserSummary();
+    if (code !== 0) {
+      return;
+    }
+    state.summary = data;
+	}
+
+	onLoad(async (options) => {
+		state.today = dayjs().format('YYYY-MM-DD');
+		state.date = [state.today, state.today];
+    if (options.type === 2) { // 切换到“提现” tab 下
+      state.currentTab = 1;
+    }
+		getLogList();
+		getAgentInfo();
+	});
+
+	onReachBottom(() => {
+		if (state.loadStatus === 'noMore') {
+			return;
+		}
+    state.pagination.pageNo++;
+    getLogList();
+	});
+</script>
+
+<style lang="scss" scoped>
+	// 钱包
+	.header-box {
+		background-color: $white;
+		padding: 30rpx;
+
+		.card-box {
+			width: 100%;
+			min-height: 300rpx;
+			padding: 40rpx;
+			background-size: 100% 100%;
+			border-radius: 30rpx;
+			overflow: hidden;
+			position: relative;
+			z-index: 1;
+			box-sizing: border-box;
+
+			&::after {
+				content: '';
+				display: block;
+				width: 100%;
+				height: 100%;
+				z-index: 2;
+				position: absolute;
+				top: 0;
+				left: 0;
+				background: v-bind(headerBg) no-repeat;
+				pointer-events: none;
+			}
+
+			.card-head {
+				color: $white;
+				font-size: 24rpx;
+			}
+
+			.ss-eye-icon {
+				font-size: 40rpx;
+				color: $white;
+			}
+
+			.money-num {
+				font-size: 40rpx;
+				line-height: normal;
+				font-weight: 500;
+				color: $white;
+				font-family: OPPOSANS;
+			}
+
+			.reduce-num {
+				font-size: 26rpx;
+				font-weight: 400;
+				color: $white;
+			}
+
+			.withdraw-btn {
+				width: 120rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				border-radius: 30px;
+				font-size: 24rpx;
+				font-weight: 500;
+				background-color: $white;
+				color: var(--ui-BG-Main);
+			}
+
+			.balance-btn {
+				width: 120rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				border-radius: 30px;
+				font-size: 24rpx;
+				font-weight: 500;
+				color: $white;
+				border: 1px solid $white;
+			}
+		}
+	}
+
+	.loading-money {
+		margin-top: 56rpx;
+
+		.loading-money-title {
+			font-size: 24rpx;
+			font-weight: 400;
+			color: #ffffff;
+			line-height: normal;
+			margin-bottom: 30rpx;
+		}
+
+		.loading-money-num {
+			font-size: 30rpx;
+			font-family: OPPOSANS;
+			font-weight: 500;
+			color: #fefefe;
+		}
+	}
+
+	// 筛选
+
+	.filter-box {
+		height: 120rpx;
+		padding: 0 30rpx;
+		background-color: $bg-page;
+
+		.total-box {
+			font-size: 24rpx;
+			font-weight: 500;
+			color: $dark-9;
+		}
+
+		.date-btn {
+			background-color: $white;
+			line-height: 54rpx;
+			border-radius: 27rpx;
+			padding: 0 20rpx;
+			font-size: 24rpx;
+			font-weight: 500;
+			color: $dark-6;
+
+			.ss-seldate-icon {
+				font-size: 50rpx;
+				color: $dark-9;
+			}
+		}
+	}
+
+	// tab
+	.wallet-tab-card {
+		.tab-item {
+			height: 80rpx;
+			position: relative;
+
+			.tab-title {
+				font-size: 30rpx;
+			}
+
+			.cur-tab-title {
+				font-weight: $font-weight-bold;
+			}
+
+			.tab-line {
+				width: 60rpx;
+				height: 6rpx;
+				border-radius: 6rpx;
+				position: absolute;
+				left: 50%;
+				transform: translateX(-50%);
+				bottom: 2rpx;
+				background-color: var(--ui-BG-Main);
+			}
+		}
+	}
+
+	// 钱包记录
+	.wallet-list {
+		padding: 30rpx;
+		background-color: #ffff;
+
+		.head-img {
+			width: 70rpx;
+			height: 70rpx;
+			border-radius: 50%;
+			background: $gray-c;
+		}
+
+		.list-content {
+			justify-content: space-between;
+			align-items: flex-start;
+			flex: 1;
+
+			.title {
+				font-size: 28rpx;
+				color: $dark-3;
+				width: 400rpx;
+			}
+
+			.time {
+				color: $gray-c;
+				font-size: 22rpx;
+			}
+		}
+
+		.money {
+			font-size: 28rpx;
+			font-weight: bold;
+			font-family: OPPOSANS;
+
+			.add {
+				color: var(--ui-BG-Main);
+			}
+
+			.minus {
+				color: $dark-3;
+			}
+		}
+	}
+
+	.model-title {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333333;
+	}
+
+	.model-subtitle {
+		font-size: 26rpx;
+		color: #c2c7cf;
+	}
+
+	.model-btn {
+		width: 100%;
+		height: 80rpx;
+		border-radius: 40rpx;
+		font-size: 28rpx;
+		font-weight: 500;
+		color: #ffffff;
+		line-height: normal;
+	}
+
+	.input-box {
+		height: 100rpx;
+
+		.unit {
+			font-size: 48rpx;
+			color: #333;
+			font-weight: 500;
+			line-height: normal;
+		}
+
+		.uni-easyinput__placeholder-class {
+			font-size: 30rpx;
+			height: 40rpx;
+			line-height: normal;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/commission/withdraw.vue b/pages/commission/withdraw.vue
new file mode 100644
index 0000000..fdd71d8
--- /dev/null
+++ b/pages/commission/withdraw.vue
@@ -0,0 +1,427 @@
+<!-- 分佣提现 -->
+<template>
+  <s-layout title="申请提现" class="withdraw-wrap" navbar="inner">
+    <view class="page-bg"></view>
+    <view
+      class="wallet-num-box ss-flex ss-col-center ss-row-between"
+      :style="[
+        {
+          marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
+          paddingTop: Number(statusBarHeight + 108) + 'rpx',
+        },
+      ]"
+    >
+      <view class="">
+        <view class="num-title">可提现金额（元）</view>
+        <view class="wallet-num">{{ fen2yuan(state.brokerageInfo.brokeragePrice) }}</view>
+      </view>
+      <button class="ss-reset-button log-btn" @tap="sheep.$router.go('/pages/commission/wallet', { type: 2 })">
+        提现记录
+      </button>
+    </view>
+    <!-- 提现输入卡片-->
+    <view class="draw-card">
+      <view class="bank-box ss-flex ss-col-center ss-row-between ss-m-b-30">
+        <view class="name">提现至</view>
+        <view class="bank-list ss-flex ss-col-center" @tap="onAccountSelect(true)">
+          <view v-if="!state.accountInfo.type" class="empty-text">请选择提现方式</view>
+          <view v-if="state.accountInfo.type === '1'" class="empty-text">钱包余额</view>
+          <view v-if="state.accountInfo.type === '2'" class="empty-text">微信零钱</view>
+          <view v-if="state.accountInfo.type === '3'" class="empty-text">支付宝账户</view>
+          <view v-if="state.accountInfo.type === '4'" class="empty-text">银行卡转账</view>
+          <text class="cicon-forward" />
+        </view>
+      </view>
+      <!-- 提现金额 -->
+      <view class="card-title">提现金额</view>
+      <view class="input-box ss-flex ss-col-center border-bottom">
+        <view class="unit">￥</view>
+        <uni-easyinput
+          :inputBorder="false"
+          class="ss-flex-1 ss-p-l-10"
+          v-model="state.accountInfo.price"
+          type="number"
+          placeholder="请输入提现金额"
+        />
+      </view>
+      <!-- 提现账号 -->
+      <view class="card-title" v-show="['2', '3', '4'].includes(state.accountInfo.type)">
+        提现账号
+      </view>
+      <view
+        class="input-box ss-flex ss-col-center border-bottom"
+        v-show="['2', '3', '4'].includes(state.accountInfo.type)"
+      >
+        <view class="unit" />
+        <uni-easyinput
+          :inputBorder="false"
+          class="ss-flex-1 ss-p-l-10"
+          v-model="state.accountInfo.accountNo"
+          placeholder="请输入提现账号"
+        />
+      </view>
+      <!-- 收款码 -->
+      <view class="card-title" v-show="['2', '3'].includes(state.accountInfo.type)">收款码</view>
+      <view
+        class="input-box ss-flex ss-col-center"
+        v-show="['2', '3'].includes(state.accountInfo.type)"
+      >
+        <view class="unit" />
+        <view class="upload-img">
+          <s-uploader
+            v-model:url="state.accountInfo.accountQrCodeUrl"
+            fileMediatype="image"
+            limit="1"
+            mode="grid"
+            :imageStyles="{ width: '168rpx', height: '168rpx' }"
+          />
+        </view>
+      </view>
+      <!-- 持卡人姓名 -->
+      <view class="card-title" v-show="state.accountInfo.type === '4'">持卡人</view>
+      <view
+        class="input-box ss-flex ss-col-center border-bottom"
+        v-show="state.accountInfo.type === '4'"
+      >
+        <view class="unit" />
+        <uni-easyinput
+          :inputBorder="false"
+          class="ss-flex-1 ss-p-l-10"
+          v-model="state.accountInfo.name"
+          placeholder="请输入持卡人姓名"
+        />
+      </view>
+      <!-- 提现银行 -->
+      <view class="card-title" v-show="state.accountInfo.type === '4'">提现银行</view>
+      <view
+        class="input-box ss-flex ss-col-center border-bottom"
+        v-show="state.accountInfo.type === '4'"
+      >
+        <view class="unit" />
+        <uni-easyinput
+          :inputBorder="false"
+          class="ss-flex-1 ss-p-l-10"
+          v-model="state.accountInfo.bankName"
+          placeholder="请输入提现银行"
+        />
+      </view>
+      <!-- 开户地址 -->
+      <view class="card-title" v-show="state.accountInfo.type === '4'">开户地址</view>
+      <view
+        class="input-box ss-flex ss-col-center border-bottom"
+        v-show="state.accountInfo.type === '4'"
+      >
+        <view class="unit" />
+        <uni-easyinput
+          :inputBorder="false"
+          class="ss-flex-1 ss-p-l-10"
+          v-model="state.accountInfo.bankAddress"
+          placeholder="请输入开户地址"
+        />
+      </view>
+      <button class="ss-reset-button save-btn ui-BG-Main-Gradient ui-Shadow-Main" @tap="onConfirm">
+        确认提现
+      </button>
+    </view>
+
+    <!-- 提现说明 -->
+    <view class="draw-notice">
+      <view class="title ss-m-b-30">提现说明</view>
+      <view class="draw-list"> 最低提现金额 {{ fen2yuan(state.minPrice) }} 元 </view>
+      <view class="draw-list">
+        冻结佣金：<text>￥{{ fen2yuan(state.brokerageInfo.frozenPrice) }}</text>
+        （每笔佣金的冻结期为 {{ state.frozenDays }} 天，到期后可提现）
+      </view>
+    </view>
+
+    <!-- 选择提现账户 -->
+    <account-type-select
+      :show="state.accountSelect"
+      @close="onAccountSelect(false)"
+      round="10"
+      v-model="state.accountInfo"
+      :methods="state.withdrawTypes"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import { computed, reactive, onBeforeMount } from 'vue';
+  import sheep from '@/sheep';
+  import accountTypeSelect from './components/account-type-select.vue';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
+  import TradeConfigApi from '@/api/trade/config';
+  import BrokerageApi from '@/api/trade/brokerage';
+
+  const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
+  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+
+  const userStore = sheep.$store('user');
+  const userInfo = computed(() => userStore.userInfo);
+  const state = reactive({
+    accountInfo: {
+      // 提现表单
+      type: undefined,
+      accountNo: undefined,
+      accountQrCodeUrl: undefined,
+      name: undefined,
+      bankName: undefined,
+      bankAddress: undefined,
+    },
+
+    accountSelect: false,
+
+    brokerageInfo: {}, // 分销信息
+
+    frozenDays: 0, // 冻结天数
+    minPrice: 0, // 最低提现金额
+    withdrawTypes: [], // 提现方式
+  });
+
+  // 打开提现方式的弹窗
+  const onAccountSelect = (e) => {
+    state.accountSelect = e;
+  };
+
+  // 提交提现
+  const onConfirm = async () => {
+    // 参数校验
+    debugger;
+    if (
+      !state.accountInfo.price ||
+      state.accountInfo.price > state.brokerageInfo.price ||
+      state.accountInfo.price <= 0
+    ) {
+      sheep.$helper.toast('请输入正确的提现金额');
+      return;
+    }
+    if (!state.accountInfo.type) {
+      sheep.$helper.toast('请选择提现方式');
+      return;
+    }
+    // 提交请求
+    let { code } = await BrokerageApi.createBrokerageWithdraw({
+      ...state.accountInfo,
+      price: state.accountInfo.price * 100,
+    });
+    if (code !== 0) {
+      return;
+    }
+    // 提示
+    uni.showModal({
+      title: '操作成功',
+      content: '您的提现申请已成功提交',
+      cancelText: '继续提现',
+      confirmText: '查看记录',
+      success: (res) => {
+        if (res.confirm) {
+          sheep.$router.go('/pages/commission/wallet', { type: 2 })
+          return;
+        }
+        getBrokerageUser();
+        state.accountInfo = {};
+      }
+    });
+  };
+
+  // 获得分销配置
+  async function getWithdrawRules() {
+    let { code, data } = await TradeConfigApi.getTradeConfig();
+    if (code !== 0) {
+      return;
+    }
+    if (data) {
+      state.minPrice = data.brokerageWithdrawMinPrice || 0;
+      state.frozenDays = data.brokerageFrozenDays || 0;
+      state.withdrawTypes = data.brokerageWithdrawTypes;
+    }
+  }
+
+  // 获得分销信息
+  async function getBrokerageUser() {
+    const { data, code } = await BrokerageApi.getBrokerageUser();
+    if (code === 0) {
+      state.brokerageInfo = data;
+    }
+  }
+
+  onBeforeMount(() => {
+    getWithdrawRules();
+    getBrokerageUser()
+  })
+</script>
+
+<style lang="scss" scoped>
+  :deep() {
+    .uni-input-input {
+      font-family: OPPOSANS !important;
+    }
+  }
+
+  .wallet-num-box {
+    padding: 0 40rpx 80rpx;
+    background: var(--ui-BG-Main) v-bind(headerBg) center/750rpx 100% no-repeat;
+    border-radius: 0 0 5% 5%;
+
+    .num-title {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: $white;
+      margin-bottom: 20rpx;
+    }
+
+    .wallet-num {
+      font-size: 60rpx;
+      font-weight: 500;
+      color: $white;
+      font-family: OPPOSANS;
+    }
+
+    .log-btn {
+      width: 170rpx;
+      height: 60rpx;
+      line-height: 60rpx;
+      border: 1rpx solid $white;
+      border-radius: 30rpx;
+      padding: 0;
+      font-size: 26rpx;
+      font-weight: 500;
+      color: $white;
+    }
+  }
+
+  // 提现输入卡片
+  .draw-card {
+    background-color: $white;
+    border-radius: 20rpx;
+    width: 690rpx;
+    min-height: 560rpx;
+    margin: -60rpx 30rpx 30rpx 30rpx;
+    padding: 30rpx;
+    position: relative;
+    z-index: 3;
+    box-sizing: border-box;
+
+    .card-title {
+      font-size: 30rpx;
+      font-weight: 500;
+      margin-bottom: 30rpx;
+    }
+
+    .bank-box {
+      .name {
+        font-size: 28rpx;
+        font-weight: 500;
+      }
+
+      .bank-list {
+        .empty-text {
+          font-size: 28rpx;
+          font-weight: 400;
+          color: $dark-9;
+        }
+
+        .cicon-forward {
+          color: $dark-9;
+        }
+      }
+
+      .input-box {
+        width: 624rpx;
+        height: 100rpx;
+        margin-bottom: 40rpx;
+
+        .unit {
+          font-size: 48rpx;
+          color: #333;
+          font-weight: 500;
+        }
+
+        .uni-easyinput__placeholder-class {
+          font-size: 30rpx;
+          height: 36rpx;
+        }
+
+        :deep(.uni-easyinput__content-input) {
+          font-size: 48rpx;
+        }
+      }
+
+      .save-btn {
+        width: 616rpx;
+        height: 86rpx;
+        line-height: 86rpx;
+        border-radius: 40rpx;
+        margin-top: 80rpx;
+      }
+    }
+
+    .bind-box {
+      .placeholder-text {
+        font-size: 26rpx;
+        color: $dark-9;
+      }
+
+      .add-btn {
+        width: 100rpx;
+        height: 50rpx;
+        border-radius: 25rpx;
+        line-height: 50rpx;
+        font-size: 22rpx;
+        color: var(--ui-BG-Main);
+        background-color: var(--ui-BG-Main-light);
+      }
+    }
+
+    .input-box {
+      width: 624rpx;
+      height: 100rpx;
+      margin-bottom: 40rpx;
+
+      .unit {
+        font-size: 48rpx;
+        color: #333;
+        font-weight: 500;
+      }
+
+      .uni-easyinput__placeholder-class {
+        font-size: 30rpx;
+      }
+
+      :deep(.uni-easyinput__content-input) {
+        font-size: 48rpx;
+      }
+    }
+
+    .save-btn {
+      width: 616rpx;
+      height: 86rpx;
+      line-height: 86rpx;
+      border-radius: 40rpx;
+      margin-top: 80rpx;
+    }
+  }
+
+  // 提现说明
+  .draw-notice {
+    width: 684rpx;
+    background: #ffffff;
+    border: 2rpx solid #fffaee;
+    border-radius: 20rpx;
+    margin: 20rpx 32rpx 0 32rpx;
+    padding: 30rpx;
+    box-sizing: border-box;
+
+    .title {
+      font-weight: 500;
+      color: #333333;
+      font-size: 30rpx;
+    }
+
+    .draw-list {
+      font-size: 24rpx;
+      color: #999999;
+      line-height: 46rpx;
+    }
+  }
+</style>
diff --git a/pages/coupon/detail.vue b/pages/coupon/detail.vue
new file mode 100644
index 0000000..2052783
--- /dev/null
+++ b/pages/coupon/detail.vue
@@ -0,0 +1,378 @@
+<!-- 优惠券详情  -->
+<template>
+  <s-layout title="优惠券详情">
+    <view class="bg-white">
+      <!-- 详情卡片 -->
+      <view class="detail-wrap ss-p-20">
+        <view class="detail-box">
+          <view class="tag-box ss-flex ss-col-center ss-row-center">
+            <image
+              class="tag-image"
+              :src="sheep.$url.static('/static/img/shop/app/coupon_icon.png')"
+              mode="aspectFit"
+            />
+          </view>
+          <view class="top ss-flex-col ss-col-center">
+            <view class="title ss-m-t-50 ss-m-b-20 ss-m-x-20">{{ state.coupon.name }}</view>
+            <view class="subtitle ss-m-b-50">
+              满 {{ fen2yuan(state.coupon.usePrice) }} 元，
+              {{ state.coupon.discountType === 1
+                ? '减 ' + fen2yuan(state.coupon.discountPrice) + ' 元'
+                : '打 ' + state.coupon.discountPercent / 10.0 + ' 折' }}
+            </view>
+            <button
+              class="ss-reset-button ss-m-b-30"
+              :class="state.coupon.canTake || state.coupon.status === 1
+                  ? 'use-btn' // 优惠劵模版（可领取）、优惠劵（可使用）
+                  : 'disable-btn'
+              "
+              :disabled="!state.coupon.canTake"
+              @click="getCoupon"
+            >
+              <text v-if="state.id > 0">{{ state.coupon.canTake ? '立即领取' : '已领取' }}</text>
+              <text v-else>
+                {{ state.coupon.status === 1 ? '立即使用' : state.coupon.status === 2 ? '已使用' : '已过期' }}
+              </text>
+            </button>
+            <view class="time ss-m-y-30" v-if="state.coupon.validityType === 2">
+              有效期：领取后 {{ state.coupon.fixedEndTerm }} 天内可用
+            </view>
+            <view class="time ss-m-y-30" v-else>
+              有效期: {{ sheep.$helper.timeFormat(state.coupon.validStartTime, 'yyyy-mm-dd') }} 至
+              {{ sheep.$helper.timeFormat(state.coupon.validEndTime, 'yyyy-mm-dd') }}
+            </view>
+            <view class="coupon-line ss-m-t-14"></view>
+          </view>
+          <view class="bottom">
+            <view class="type ss-flex ss-col-center ss-row-between ss-p-x-30">
+              <view>优惠券类型</view>
+              <view>{{ state.coupon.discountType === 1 ? '满减券' : '折扣券' }}</view>
+            </view>
+            <!-- TODO 芋艿：可优化，增加优惠劵的描述 -->
+            <uni-collapse>
+              <uni-collapse-item title="优惠券说明" v-if="state.coupon.description">
+                <view class="content ss-p-b-20">
+                  <text class="des ss-p-l-30">{{ state.coupon.description }}</text>
+                </view>
+              </uni-collapse-item>
+            </uni-collapse>
+          </view>
+        </view>
+      </view>
+
+      <!-- 适用商品 -->
+      <view
+        class="all-user ss-flex ss-row-center ss-col-center"
+        v-if="state.coupon.productScope === 1"
+      >
+        全场通用
+      </view>
+
+      <su-sticky v-else bgColor="#fff">
+        <view class="goods-title ss-p-20">
+          {{ state.coupon.productScope === 2 ? '指定商品可用' : '指定分类可用' }}
+        </view>
+        <su-tabs
+          :scrollable="true"
+          :list="state.tabMaps"
+          @change="onTabsChange"
+          :current="state.currentTab"
+          v-if="state.coupon.productScope === 3"
+        />
+      </su-sticky>
+      <!-- 指定商品 -->
+      <view v-if="state.coupon.productScope === 2">
+        <view v-for="(item, index) in state.pagination.list" :key="index">
+          <s-goods-column
+            class="ss-m-20"
+            size="lg"
+            :data="item"
+            @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+            :goodsFields="{
+              title: { show: true },
+              subtitle: { show: true },
+              price: { show: true },
+              original_price: { show: true },
+              sales: { show: true },
+              stock: { show: false },
+            }"
+          />
+        </view>
+      </view>
+      <!-- 指定分类 -->
+      <view v-if="state.coupon.productScope === 3">
+        <view v-for="(item, index) in state.pagination.list" :key="index">
+          <s-goods-column
+            class="ss-m-20"
+            size="lg"
+            :data="item"
+            @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+            :goodsFields="{
+              title: { show: true },
+              subtitle: { show: true },
+              price: { show: true },
+              original_price: { show: true },
+              sales: { show: true },
+              stock: { show: false },
+            }"
+          ></s-goods-column>
+        </view>
+      </view>
+      <uni-load-more
+        v-if="state.pagination.total > 0 && state.coupon.productScope === 3"
+        :status="state.loadStatus"
+        :content-text="{
+          contentdown: '上拉加载更多',
+        }"
+        @tap="loadMore"
+      />
+      <s-empty
+        v-if="state.coupon.productScope === 3 && state.pagination.total === 0"
+        paddingTop="0"
+        icon="/static/soldout-empty.png"
+        text="暂无商品"
+      />
+    </view>
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import _ from 'lodash';
+  import CouponApi from '@/api/promotion/coupon';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
+  import SpuApi from '@/api/product/spu';
+  import CategoryApi from '@/api/product/category';
+  import { resetPagination } from '@/sheep/util';
+
+  const state = reactive({
+    id: 0, // 优惠劵模版编号 templateId
+    couponId: 0, // 用户优惠劵编号 couponId
+    coupon: {}, // 优惠劵信息
+
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 1,
+    },
+    categoryId: 0, // 选中的商品分类编号
+    tabMaps: [], // 指定分类时，每个分类构成一个 tab
+    currentTab: 0, // 选中的 tabMaps 下标
+    loadStatus: '',
+  });
+
+  function onTabsChange(e) {
+    resetPagination(state.pagination);
+    state.currentTab = e.index;
+    state.categoryId = e.value;
+    getGoodsListByCategory();
+  }
+
+  async function getGoodsListByCategory() {
+    state.loadStatus = 'loading';
+    const { code, data } = await SpuApi.getSpuPage({
+      categoryId: state.categoryId,
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  // 获得商品列表，指定商品范围
+  async function getGoodsListById() {
+    const { data, code } = await SpuApi.getSpuListByIds(state.coupon.productScopeValues.join(','));
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = data;
+  }
+
+  // 获得分类列表
+  async function getCategoryList() {
+    const { data, code } = await CategoryApi.getCategoryListByIds(state.coupon.productScopeValues.join(','));
+    if (code !== 0) {
+      return;
+    }
+    state.tabMaps = data.map((category) => ({ name: category.name, value: category.id }));
+    // 加载第一个分类的商品列表
+    if (state.tabMaps.length > 0) {
+      state.categoryId = state.tabMaps[0].value;
+      await getGoodsListByCategory();
+    }
+  }
+
+  // 领取优惠劵
+  async function getCoupon() {
+    const { code } = await CouponApi.takeCoupon(state.id);
+    if (code !== 0) {
+      return;
+    }
+    uni.showToast({
+      title: '领取成功',
+    });
+    setTimeout(() => {
+      getCouponContent();
+    }, 1000);
+  }
+
+  // 加载优惠劵信息
+  async function getCouponContent() {
+    const { code, data } = state.id > 0 ? await CouponApi.getCouponTemplate(state.id)
+      : await CouponApi.getCoupon(state.couponId);
+    if (code !== 0) {
+      return;
+    }
+    state.coupon = data;
+    // 不同指定范围，加载不同数据
+    if (state.coupon.productScope === 2) {
+      await getGoodsListById();
+    } else if (state.coupon.productScope === 3) {
+      await getCategoryList();
+    }
+  }
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getGoodsListByCategory();
+  }
+
+  onLoad((options) => {
+    state.id = options.id;
+    state.couponId = options.couponId;
+    getCouponContent(state.id, state.couponId);
+  });
+
+  // 上拉加载更多
+  onReachBottom(() => {
+    loadMore();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .goods-title {
+    font-size: 34rpx;
+    font-weight: bold;
+    color: #333333;
+  }
+
+  .detail-wrap {
+    background: linear-gradient(
+      180deg,
+      var(--ui-BG-Main),
+      var(--ui-BG-Main-gradient),
+      var(--ui-BG-Main),
+      #fff
+    );
+  }
+
+  .detail-box {
+    // background-color: var(--ui-BG);
+    border-radius: 6rpx;
+    position: relative;
+    margin-top: 100rpx;
+    .tag-box {
+      width: 140rpx;
+      height: 140rpx;
+      background: var(--ui-BG);
+      border-radius: 50%;
+      position: absolute;
+      top: -70rpx;
+      left: 50%;
+      z-index: 6;
+      transform: translateX(-50%);
+
+      .tag-image {
+        width: 104rpx;
+        height: 104rpx;
+        border-radius: 50%;
+      }
+    }
+
+    .top {
+      background-color: #fff;
+      border-radius: 20rpx 20rpx 0 0;
+      -webkit-mask: radial-gradient(circle at 16rpx 100%, #0000 16rpx, red 0) -16rpx;
+      padding: 110rpx 0 0 0;
+      position: relative;
+      z-index: 5;
+
+      .title {
+        font-size: 40rpx;
+        color: #333;
+        font-weight: bold;
+      }
+
+      .subtitle {
+        font-size: 28rpx;
+        color: #333333;
+      }
+
+      .use-btn {
+        width: 386rpx;
+        height: 80rpx;
+        line-height: 80rpx;
+        background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+        border-radius: 40rpx;
+        color: $white;
+      }
+
+      .disable-btn {
+        width: 386rpx;
+        height: 80rpx;
+        line-height: 80rpx;
+        background: #e5e5e5;
+        border-radius: 40rpx;
+        color: $white;
+      }
+
+      .time {
+        font-size: 26rpx;
+        font-weight: 400;
+        color: #999999;
+      }
+
+      .coupon-line {
+        width: 95%;
+        border-bottom: 2rpx solid #eeeeee;
+      }
+    }
+
+    .bottom {
+      background-color: #fff;
+      border-radius: 0 0 20rpx 20rpx;
+      -webkit-mask: radial-gradient(circle at 16rpx 0%, #0000 16rpx, red 0) -16rpx;
+      padding: 40rpx 30rpx;
+
+      .type {
+        height: 96rpx;
+        border-bottom: 2rpx solid #eeeeee;
+      }
+    }
+
+    .des {
+      font-size: 24rpx;
+      font-weight: 400;
+      color: #666666;
+    }
+  }
+
+  .all-user {
+    width: 100%;
+    height: 300rpx;
+    font-size: 34rpx;
+    font-weight: bold;
+    color: #333333;
+  }
+</style>
diff --git a/pages/coupon/list.vue b/pages/coupon/list.vue
new file mode 100644
index 0000000..a99b2bc
--- /dev/null
+++ b/pages/coupon/list.vue
@@ -0,0 +1,218 @@
+<!-- 优惠券中心  -->
+<template>
+  <s-layout title="优惠券" :bgStyle="{ color: '#f2f2f2' }">
+    <su-sticky bgColor="#fff">
+      <su-tabs
+        :list="tabMaps"
+        :scrollable="false"
+        @change="onTabsChange"
+        :current="state.currentTab"
+      />
+    </su-sticky>
+    <s-empty
+      v-if="state.pagination.total === 0"
+      icon="/static/coupon-empty.png"
+      text="暂无优惠券"
+    />
+    <!-- 情况一：领劵中心 -->
+    <template v-if="state.currentTab === 0">
+      <view v-for="item in state.pagination.list" :key="item.id">
+        <s-coupon-list
+          :data="item"
+          @tap="sheep.$router.go('/pages/coupon/detail', { id: item.id })"
+        >
+          <template #default>
+            <button
+              class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center"
+              :class="!item.canTake ? 'border-btn' : ''"
+              @click.stop="getBuy(item.id)"
+              :disabled="!item.canTake"
+            >
+              {{ item.canTake ? '立即领取' : '已领取' }}
+            </button>
+          </template>
+        </s-coupon-list>
+      </view>
+    </template>
+    <!-- 情况二：我的优惠劵 -->
+    <template v-else>
+      <view v-for="item in state.pagination.list" :key="item.id">
+        <s-coupon-list
+          :data="item"
+          type="user"
+          @tap="sheep.$router.go('/pages/coupon/detail', { couponId: item.id })"
+        >
+          <template #default>
+            <button
+              class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center"
+              :class=" item.status !== 1 ? 'disabled-btn': ''"
+              :disabled="item.status !== 1"
+              @click.stop="sheep.$router.go('/pages/coupon/detail', { couponId: item.id })"
+            >
+              {{ item.status === 1 ? '立即使用' : item.status === 2 ? '已使用' : '已过期' }}
+            </button>
+          </template>
+        </s-coupon-list>
+      </view>
+    </template>
+
+    <uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
+        contentdown: '上拉加载更多',
+      }" @tap="loadMore" />
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import _ from 'lodash';
+  import { resetPagination } from '@/sheep/util';
+  import CouponApi from '@/api/promotion/coupon';
+
+  // 数据
+  const state = reactive({
+    currentTab: 0, // 当前 tab
+    type: '1',
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 5
+    },
+    loadStatus: '',
+  });
+
+  const tabMaps = [
+    {
+      name: '领券中心',
+      value: 'all',
+    },
+    {
+      name: '已领取',
+      value: '1',
+    },
+    {
+      name: '已使用',
+      value: '2',
+    },
+    {
+      name: '已失效',
+      value: '3',
+    },
+  ];
+
+  // TODO yunai:
+  function onTabsChange(e) {
+    state.currentTab = e.index;
+    state.type = e.value;
+    resetPagination(state.pagination)
+    if (state.currentTab === 0) {
+    	getData();
+    } else {
+      getCoupon();
+    }
+  }
+
+  // 获得优惠劵模版列表
+  async function getData() {
+    state.loadStatus = 'loading';
+    const { data, code } = await CouponApi.getCouponTemplatePage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  // 获得我的优惠劵
+  async function getCoupon() {
+    state.loadStatus = 'loading';
+    const { data, code } = await CouponApi.getCouponPage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+      status: state.type
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  // 领取优惠劵
+  async function getBuy(id) {
+    const { code } = await CouponApi.takeCoupon(id);
+    if (code !== 0) {
+      return;
+    }
+    uni.showToast({
+      title: '领取成功',
+    });
+    setTimeout(() => {
+      resetPagination(state.pagination);
+      getData();
+    }, 1000);
+  }
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    if (state.currentTab === 0) {
+      getData();
+    } else {
+      getCoupon();
+    }
+  }
+
+  onLoad((Option) => {
+    // 领劵中心
+    if (Option.type === 'all' || !Option.type) {
+      getData();
+    // 我的优惠劵
+    } else {
+      Option.type === 'geted'
+        ? (state.currentTab = 1)
+        : Option.type === 'used'
+          ? (state.currentTab = 2)
+          : (state.currentTab = 3);
+      state.type = state.currentTab;
+      getCoupon();
+    }
+  });
+
+  onReachBottom(() => {
+    loadMore();
+  });
+</script>
+<style lang="scss" scoped>
+  .card-btn {
+    // width: 144rpx;
+    padding: 0 16rpx;
+    height: 50rpx;
+    border-radius: 40rpx;
+    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    color: #ffffff;
+    font-size: 24rpx;
+    font-weight: 400;
+  }
+
+  .border-btn {
+    background: linear-gradient(90deg, var(--ui-BG-Main-opacity-4), var(--ui-BG-Main-light));
+    color: #fff !important;
+  }
+
+  .disabled-btn {
+    background: #cccccc;
+    background-color: #cccccc !important;
+    color: #fff !important;
+  }
+</style>
diff --git a/pages/goods/comment/add.vue b/pages/goods/comment/add.vue
new file mode 100644
index 0000000..199eada
--- /dev/null
+++ b/pages/goods/comment/add.vue
@@ -0,0 +1,145 @@
+<!-- 评价  -->
+<template>
+	<s-layout title="评价">
+		<view>
+			<view v-for="(item, index) in state.orderInfo.items" :key="item.id">
+				<view>
+					<view class="commont-from-wrap">
+						<!-- 评价商品 -->
+						<s-goods-item
+              :img="item.picUrl"
+              :title="item.spuName"
+              :skuText="item.properties.map((property) => property.valueName).join(' ')"
+							:price="item.payPrice"
+              :num="item.count"
+            />
+					</view>
+
+					<view class="form-item">
+						<!-- 评分 -->
+						<view class="star-box ss-flex ss-col-center">
+							<view class="star-title ss-m-r-40">商品质量</view>
+							<uni-rate v-model="state.commentList[index].descriptionScores" />
+						</view>
+						<view class="star-box ss-flex ss-col-center">
+							<view class="star-title ss-m-r-40">服务态度</view>
+							<uni-rate v-model="state.commentList[index].benefitScores" />
+						</view>
+						<!-- 评价 -->
+						<view class="area-box">
+							<uni-easyinput :inputBorder="false" type="textarea" maxlength="120" autoHeight
+								v-model="state.commentList[index].content"
+								placeholder="宝贝满足你的期待吗？说说你的使用心得，分享给想买的他们吧~" />
+              <!-- TODO 芋艿：文件上传 -->
+							<view class="img-box">
+								<s-uploader v-model:url="state.commentList[index].images" fileMediatype="image"
+									limit="9" mode="grid" :imageStyles="{ width: '168rpx', height: '168rpx' }" />
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+    <!-- TODO 芋艿：是否匿名 -->
+
+		<su-fixed bottom placeholder>
+			<view class="foot_box ss-flex ss-row-center ss-col-center">
+				<button class="ss-reset-button post-btn ui-BG-Main-Gradient ui-Shadow-Main" @tap="onSubmit">
+					发布
+				</button>
+			</view>
+		</su-fixed>
+	</s-layout>
+</template>
+
+<script setup>
+	import sheep from '@/sheep';
+	import { onLoad } from '@dcloudio/uni-app';
+	import { reactive } from 'vue';
+  import OrderApi from '@/api/trade/order';
+
+	const state = reactive({
+		orderInfo: {},
+		commentList: [],
+		id: null
+	});
+
+	async function onSubmit() {
+    // 顺序提交评论
+    for (const comment of state.commentList) {
+      await OrderApi.createOrderItemComment(comment);
+    }
+    // 都评论好，返回
+    sheep.$router.back();
+	}
+
+	onLoad(async (options) => {
+    if (!options.id) {
+      sheep.$helper.toast(`缺少订单信息，请检查`);
+      return
+    }
+		state.id = options.id;
+
+		const { code, data } = await OrderApi.getOrder(state.id);
+    if (code !== 0) {
+      sheep.$helper.toast('无待评价订单');
+      return
+    }
+    // 处理评论
+    data.items.forEach((item) => {
+      state.commentList.push({
+        anonymous: false,
+        orderItemId: item.id,
+        descriptionScores: 5,
+        benefitScores: 5,
+        content: '',
+        picUrls: []
+      });
+    });
+    state.orderInfo = data;
+	});
+</script>
+
+<style lang="scss" scoped>
+	// 评价商品
+	.goods-card {
+		margin: 10rpx 0;
+		padding: 20rpx;
+		background: #fff;
+	}
+
+	// 评论，选择图片
+	.form-item {
+		background: #fff;
+
+		.star-box {
+			height: 100rpx;
+			padding: 0 25rpx;
+		}
+
+		.star-title {
+			font-weight: 600;
+		}
+	}
+
+	.area-box {
+		width: 690rpx;
+		min-height: 306rpx;
+		background: rgba(249, 250, 251, 1);
+		border-radius: 20rpx;
+		padding: 28rpx;
+		margin: auto;
+
+		.img-box {
+			margin-top: 20rpx;
+		}
+	}
+
+	.post-btn {
+		width: 690rpx;
+		line-height: 80rpx;
+		border-radius: 40rpx;
+		color: rgba(#fff, 0.9);
+		margin-bottom: 20rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/goods/comment/list.vue b/pages/goods/comment/list.vue
new file mode 100644
index 0000000..641329f
--- /dev/null
+++ b/pages/goods/comment/list.vue
@@ -0,0 +1,167 @@
+<!-- 商品评论的分页 -->
+<template>
+  <s-layout title="全部评价">
+    <su-tabs
+      :list="state.type"
+      :scrollable="false"
+      @change="onTabsChange"
+      :current="state.currentTab"
+    />
+    <!-- 评论列表 -->
+    <view class="ss-m-t-20">
+      <view class="list-item" v-for="item in state.pagination.list" :key="item">
+        <comment-item :item="item" />
+      </view>
+    </view>
+    <s-empty v-if="state.pagination.total === 0" text="暂无数据" icon="/static/data-empty.png" />
+    <!-- 下拉 -->
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="loadMore"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import CommentApi from '@/api/product/comment';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import _ from 'lodash';
+  import commentItem from '../components/detail/comment-item.vue';
+
+  const state = reactive({
+    id: 0, // 商品 SPU 编号
+    type: [
+      { type: 0, name: '全部' },
+      { type: 1, name: '好评' },
+      { type: 2, name: '中评' },
+      { type: 3, name: '差评' },
+    ],
+    currentTab: 0, // 选中的 TAB
+    loadStatus: '',
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 1,
+    },
+  });
+
+  // 切换选项卡
+  function onTabsChange(e) {
+    state.currentTab = e.index;
+    // 加载列表
+    state.pagination.pageNo = 1;
+    state.pagination.list = [];
+    state.pagination.total = 0;
+    getList();
+  }
+
+  async function getList() {
+    // 加载列表
+    state.loadStatus = 'loading';
+    let res = await CommentApi.getCommentPage(
+      state.id,
+      state.pagination.pageNo,
+      state.pagination.pageSize,
+      state.type[state.currentTab].type,
+    );
+    if (res.code !== 0) {
+      return;
+    }
+    // 合并列表
+    state.pagination.list = _.concat(state.pagination.list, res.data.list);
+    state.pagination.total = res.data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getList();
+  }
+
+  onLoad((options) => {
+    state.id = options.id;
+    getList();
+  });
+
+  // 上拉加载更多
+  onReachBottom(() => {
+    loadMore();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .list-item {
+    padding: 32rpx 30rpx 20rpx 20rpx;
+    background: #fff;
+
+    .avatar {
+      width: 52rpx;
+      height: 52rpx;
+      border-radius: 50%;
+    }
+
+    .nickname {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #999999;
+    }
+
+    .create-time {
+      font-size: 24rpx;
+      font-weight: 500;
+      color: #c4c4c4;
+    }
+
+    .content-title {
+      font-size: 26rpx;
+      font-weight: 400;
+      color: #666666;
+      line-height: 42rpx;
+    }
+
+    .content-img {
+      width: 174rpx;
+      height: 174rpx;
+    }
+
+    .cicon-info-o {
+      font-size: 26rpx;
+      color: #c4c4c4;
+    }
+
+    .foot-title {
+      font-size: 24rpx;
+      font-weight: 500;
+      color: #999999;
+    }
+  }
+
+  .btn-box {
+    width: 100%;
+    height: 120rpx;
+    background: #fff;
+    border-top: 2rpx solid #eee;
+  }
+
+  .tab-btn {
+    width: 130rpx;
+    height: 62rpx;
+    background: #eeeeee;
+    border-radius: 31rpx;
+    font-size: 28rpx;
+    font-weight: 400;
+    color: #999999;
+    border: 1px solid #e5e5e5;
+    margin-right: 10rpx;
+  }
+</style>
diff --git a/pages/goods/components/detail/comment-item.vue b/pages/goods/components/detail/comment-item.vue
new file mode 100644
index 0000000..518db2a
--- /dev/null
+++ b/pages/goods/components/detail/comment-item.vue
@@ -0,0 +1,94 @@
+<!-- 商品评论项 -->
+<template>
+  <view>
+    <!-- 用户评论 -->
+    <view class="user ss-flex ss-m-b-14">
+      <view class="ss-m-r-20 ss-flex">
+        <image class="avatar" :src="item.userAvatar"></image>
+      </view>
+      <view class="nickname ss-m-r-20">{{ item.userNickname }}</view>
+      <view class="">
+        <uni-rate :readonly="true" v-model="item.scores" size="18" />
+      </view>
+    </view>
+    <view class="content"> {{ item.content }} </view>
+    <view class="ss-m-t-24" v-if="item.picUrls?.length">
+      <scroll-view class="scroll-box" scroll-x scroll-anchoring>
+        <view class="ss-flex">
+          <view v-for="(picUrl, index) in item.picUrls" :key="picUrl" class="ss-m-r-10">
+            <su-image
+              class="content-img"
+              isPreview
+              :previewList="item.picUrls"
+              :current="index"
+              :src="picUrl"
+              :height="120"
+              :width="120"
+              mode="aspectFill"
+            />
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    <!-- 商家回复 -->
+    <view class="ss-m-t-20 reply-box" v-if="item.replyTime">
+      <view class="reply-title">商家回复：</view>
+      <view class="reply-content">{{ item.replyContent }}</view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  const props = defineProps({
+    item: {
+      type: Object,
+      default() {},
+    },
+  });
+</script>
+
+<style lang="scss" scoped>
+  .avatar {
+    width: 52rpx;
+    height: 52rpx;
+    border-radius: 50%;
+  }
+
+  .nickname {
+    font-size: 26rpx;
+    font-weight: 500;
+    color: #999999;
+  }
+
+  .content {
+    width: 636rpx;
+    font-size: 26rpx;
+    font-weight: 400;
+    color: #333333;
+  }
+
+  .reply-box {
+    position: relative;
+    background: #f8f8f8;
+    border-radius: 8rpx;
+    padding: 16rpx;
+  }
+
+  .reply-title {
+    position: absolute;
+    left: 16rpx;
+    top: 16rpx;
+    font-weight: 400;
+    font-size: 26rpx;
+    line-height: 40rpx;
+    color: #333333;
+  }
+
+  .reply-content {
+    text-indent: 128rpx;
+    font-weight: 400;
+    font-size: 26rpx;
+    line-height: 40rpx;
+    color: #333333;
+  }
+</style>
diff --git a/pages/goods/components/detail/detail-activity-tip.vue b/pages/goods/components/detail/detail-activity-tip.vue
new file mode 100644
index 0000000..5d74c08
--- /dev/null
+++ b/pages/goods/components/detail/detail-activity-tip.vue
@@ -0,0 +1,100 @@
+<template>
+  <su-fixed bottom placeholder :val="44">
+    <view>
+      <view v-for="activity in props.activityList" :key="activity.id">
+        <!-- TODO 芋艿：拼团 -->
+        <view
+          class="activity-box ss-p-x-38 ss-flex ss-row-between ss-col-center"
+          :class="activity.type === 1 ? 'seckill-box' : 'groupon-box'"
+        >
+          <view class="activity-title ss-flex">
+            <view class="ss-m-r-16">
+              <image
+                v-if="activity.type === 1"
+                :src="sheep.$url.static('/static/img/shop/goods/seckill-icon.png')"
+                class="activity-icon"
+              />
+              <!-- TODO 芋艿：拼团 -->
+              <image
+                v-else-if="activity.type === 3"
+                :src="sheep.$url.static('/static/img/shop/goods/groupon-icon.png')"
+                class="activity-icon"
+              />
+            </view>
+            <view>该商品正在参与{{ activity.name }}活动</view>
+          </view>
+          <button class="ss-reset-button activity-go" @tap="onActivity(activity)"> GO </button>
+        </view>
+      </view>
+    </view>
+  </su-fixed>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+
+  // TODO 芋艿：这里要迁移下；
+  const seckillBg = sheep.$url.css('/static/img/shop/goods/seckill-tip-bg.png');
+  const grouponBg = sheep.$url.css('/static/img/shop/goods/groupon-tip-bg.png');
+
+  const props = defineProps({
+    activityList: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  });
+
+  function onActivity(activity) {
+    const type = activity.type;
+    const typePath = type === 1 ? 'seckill' :
+      type === 2 ? 'TODO 拼团' : 'groupon';
+    sheep.$router.go(`/pages/goods/${typePath}`, {
+      id: activity.id,
+    });
+  }
+</script>
+
+<style lang="scss" scoped>
+  .activity-box {
+    width: 100%;
+    height: 80rpx;
+    box-sizing: border-box;
+    margin-bottom: 10rpx;
+
+    .activity-title {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 42rpx;
+
+      .activity-icon {
+        width: 38rpx;
+        height: 38rpx;
+      }
+    }
+
+    .activity-go {
+      width: 70rpx;
+      height: 32rpx;
+      background: #ffffff;
+      border-radius: 16rpx;
+      font-weight: 500;
+      color: #ff6000;
+      font-size: 24rpx;
+      line-height: normal;
+    }
+  }
+
+  //秒杀卡片
+  .seckill-box {
+    background: v-bind(seckillBg) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .groupon-box {
+    background: v-bind(grouponBg) no-repeat;
+    background-size: 100% 100%;
+  }
+</style>
diff --git a/pages/goods/components/detail/detail-cell-sku.vue b/pages/goods/components/detail/detail-cell-sku.vue
new file mode 100644
index 0000000..11f1b20
--- /dev/null
+++ b/pages/goods/components/detail/detail-cell-sku.vue
@@ -0,0 +1,31 @@
+<template>
+  <!-- SKU 选择的提示框 -->
+  <detail-cell label="选择" :value="value" />
+</template>
+
+<script setup>
+  import { computed } from 'vue';
+  import detailCell from './detail-cell.vue';
+
+  const props = defineProps({
+    modelValue: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    sku: {
+      type: Object
+    }
+  });
+  const value = computed(() => {
+    if (!props.sku?.id) {
+      return '请选择商品规格';
+    }
+    let str = '';
+    props.sku.properties.forEach(property => {
+      str += property.propertyName + ':' + property.valueName + ' ';
+    });
+    return str;
+  });
+</script>
diff --git a/pages/goods/components/detail/detail-cell.vue b/pages/goods/components/detail/detail-cell.vue
new file mode 100644
index 0000000..b4c56dd
--- /dev/null
+++ b/pages/goods/components/detail/detail-cell.vue
@@ -0,0 +1,60 @@
+<!-- 商品详情：cell 组件 -->
+<template>
+  <view class="detail-cell-wrap ss-flex ss-col-center ss-row-between" @tap="onClick">
+    <view class="label-text">{{ label }}</view>
+    <view class="cell-content ss-line-1 ss-flex-1">{{ value }}</view>
+    <button class="ss-reset-button">
+      <text class="_icon-forward right-forwrad-icon"></text>
+    </button>
+  </view>
+</template>
+
+<script setup>
+  /**
+   * 详情 cell
+   *
+   */
+  const props = defineProps({
+    label: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+  });
+
+  const emits = defineEmits(['click']);
+
+  // 点击
+  const onClick = () => {
+    emits('click');
+  };
+</script>
+
+<style lang="scss" scoped>
+  .detail-cell-wrap {
+    padding: 10rpx 20rpx;
+    // min-height: 60rpx;
+
+    .label-text {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: $dark-9;
+      margin-right: 38rpx;
+    }
+
+    .cell-content {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: $dark-6;
+    }
+
+    .right-forwrad-icon {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: $dark-9;
+    }
+  }
+</style>
diff --git a/pages/goods/components/detail/detail-comment-card.vue b/pages/goods/components/detail/detail-comment-card.vue
new file mode 100644
index 0000000..9fb8b7e
--- /dev/null
+++ b/pages/goods/components/detail/detail-comment-card.vue
@@ -0,0 +1,106 @@
+<!-- 商品评论的卡片 -->
+<template>
+  <view class="detail-comment-card bg-white">
+    <view class="card-header ss-flex ss-col-center ss-row-between ss-p-b-30">
+      <view class="ss-flex ss-col-center">
+        <view class="line"></view>
+        <view class="title ss-m-l-20 ss-m-r-10">评价</view>
+        <view class="des">({{ state.total }})</view>
+      </view>
+      <view
+        class="ss-flex ss-col-center"
+        @tap="sheep.$router.go('/pages/goods/comment/list', { id: goodsId })"
+        v-if="state.commentList.length > 0"
+      >
+        <button class="ss-reset-button more-btn">查看全部</button>
+        <text class="cicon-forward" />
+      </view>
+    </view>
+    <!-- 评论列表 -->
+    <view class="card-content">
+      <view class="comment-box ss-p-y-30" v-for="item in state.commentList" :key="item.id">
+        <comment-item :item="item" />
+      </view>
+      <s-empty
+        v-if="state.commentList.length === 0"
+        paddingTop="0"
+        icon="/static/comment-empty.png"
+        text="期待您的第一个评价"
+      />
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { reactive, onBeforeMount } from 'vue';
+  import sheep from '@/sheep';
+  import CommentApi from '@/api/product/comment';
+  import commentItem from './comment-item.vue';
+
+  const props = defineProps({
+    goodsId: {
+      type: [Number, String],
+      default: 0,
+    },
+  });
+
+  const state = reactive({
+    commentList: [], // 评论列表，只展示最近的 3 条
+    total: 0, // 总评论数
+  });
+
+  async function getComment(id) {
+    const { data } = await CommentApi.getCommentPage(id, 1, 3, 0);
+    state.commentList = data.list;
+    state.total = data.total;
+  }
+
+  onBeforeMount(() => {
+    getComment(props.goodsId);
+  });
+</script>
+
+<style lang="scss" scoped>
+  .detail-comment-card {
+    margin: 0 20rpx 20rpx 20rpx;
+    padding: 20rpx 20rpx 0 20rpx;
+    .card-header {
+      .line {
+        width: 6rpx;
+        height: 30rpx;
+        background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
+        border-radius: 3rpx;
+      }
+
+      .title {
+        font-size: 30rpx;
+        font-weight: bold;
+        line-height: normal;
+      }
+
+      .des {
+        font-size: 24rpx;
+        color: $dark-9;
+      }
+
+      .more-btn {
+        font-size: 24rpx;
+        color: var(--ui-BG-Main);
+        line-height: normal;
+      }
+
+      .cicon-forward {
+        font-size: 24rpx;
+        line-height: normal;
+        color: var(--ui-BG-Main);
+        margin-top: 4rpx;
+      }
+    }
+  }
+  .comment-box {
+    border-bottom: 2rpx solid #eeeeee;
+    &:last-child {
+      border: none;
+    }
+  }
+</style>
diff --git a/pages/goods/components/detail/detail-content-card.vue b/pages/goods/components/detail/detail-content-card.vue
new file mode 100644
index 0000000..eaacc82
--- /dev/null
+++ b/pages/goods/components/detail/detail-content-card.vue
@@ -0,0 +1,52 @@
+<!-- 商品详情：描述卡片 -->
+<template>
+  <view class="detail-content-card bg-white ss-m-x-20 ss-p-t-20">
+    <view class="card-header ss-flex ss-col-center ss-m-b-30 ss-m-l-20">
+      <view class="line"></view>
+      <view class="title ss-m-l-20 ss-m-r-20">详情</view>
+    </view>
+    <view class="card-content">
+      <mp-html :content="content" />
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  const { safeAreaInsets } = sheep.$platform.device;
+
+  const props = defineProps({
+    content: {
+      type: String,
+      default: '',
+    },
+  });
+</script>
+
+<style lang="scss" scoped>
+  .detail-content-card {
+    .card-header {
+      .line {
+        width: 6rpx;
+        height: 30rpx;
+        background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
+        border-radius: 3rpx;
+      }
+
+      .title {
+        font-size: 30rpx;
+        font-weight: bold;
+      }
+
+      .des {
+        font-size: 24rpx;
+        color: $dark-9;
+      }
+
+      .more-btn {
+        font-size: 24rpx;
+        color: var(--ui-BG-Main);
+      }
+    }
+  }
+</style>
diff --git a/pages/goods/components/detail/detail-navbar.vue b/pages/goods/components/detail/detail-navbar.vue
new file mode 100644
index 0000000..1d1153d
--- /dev/null
+++ b/pages/goods/components/detail/detail-navbar.vue
@@ -0,0 +1,256 @@
+<!-- 商品详情：商品/评价/详情的 nav -->
+<template>
+  <su-fixed alway :bgStyles="{ background: '#fff' }" :val="0" noNav opacity :placeholder="false">
+    <su-status-bar />
+    <view
+      class="ui-bar ss-flex ss-col-center ss-row-between ss-p-x-20"
+      :style="[{ height: sys_navBar - sys_statusBar + 'px' }]"
+    >
+      <!-- 左 -->
+      <view class="icon-box ss-flex">
+        <view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft">
+          <text class="sicon-back" v-if="hasHistory" />
+          <text class="sicon-home" v-else />
+        </view>
+        <view class="line"></view>
+        <view class="icon-button icon-button-right ss-flex ss-row-center" @tap="onClickRight">
+          <text class="sicon-more" />
+        </view>
+      </view>
+      <!-- 中 -->
+      <view class="detail-tab-card ss-flex-1" :style="[{ opacity: state.tabOpacityVal }]">
+        <view class="tab-box ss-flex ss-col-center ss-row-around">
+          <view
+            class="tab-item ss-flex-1 ss-flex ss-row-center ss-col-center"
+            v-for="item in state.tabList"
+            :key="item.value"
+            @tap="onTab(item)"
+          >
+            <view class="tab-title" :class="state.curTab === item.value ? 'cur-tab-title' : ''">
+              {{ item.label }}
+            </view>
+            <view v-show="state.curTab === item.value" class="tab-line"></view>
+          </view>
+        </view>
+      </view>
+      <!-- #ifdef MP -->
+      <view :style="[capsuleStyle]"></view>
+      <!-- #endif -->
+    </view>
+  </su-fixed>
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+  import { onPageScroll } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import throttle from '@/sheep/helper/throttle.js';
+  import { showMenuTools, closeMenuTools } from '@/sheep/hooks/useModal';
+
+  const sys_statusBar = sheep.$platform.device.statusBarHeight;
+  const sys_navBar = sheep.$platform.navbar;
+  const capsuleStyle = {
+    width: sheep.$platform.capsule.width + 'px',
+    height: sheep.$platform.capsule.height + 'px',
+  };
+
+  const state = reactive({
+    tabOpacityVal: 0,
+    curTab: 'goods',
+    tabList: [
+      {
+        label: '商品',
+        value: 'goods',
+        to: 'detail-swiper-selector',
+      },
+      {
+        label: '评价',
+        value: 'comment',
+        to: 'detail-comment-selector',
+      },
+      {
+        label: '详情',
+        value: 'detail',
+        to: 'detail-content-selector',
+      },
+    ],
+  });
+  const emits = defineEmits(['clickLeft']);
+  const hasHistory = sheep.$router.hasHistory();
+
+  function onClickLeft() {
+    if (hasHistory) {
+      sheep.$router.back();
+    } else {
+      sheep.$router.go('/pages/index/index');
+    }
+    emits('clickLeft');
+  }
+
+  function onClickRight() {
+    showMenuTools();
+  }
+
+  let commentCard = {
+    top: 0,
+    bottom: 0,
+  };
+
+  function getCommentCardNode() {
+    return new Promise((res, rej) => {
+      uni.createSelectorQuery()
+        .select('.detail-comment-selector')
+        .boundingClientRect((data) => {
+          if (data) {
+            commentCard.top = data.top;
+            commentCard.bottom = data.top + data.height;
+            res(data);
+          } else {
+            res(null);
+          }
+        })
+        .exec();
+    });
+  }
+
+  function onTab(tab) {
+    let scrollTop = 0;
+    if (tab.value === 'comment') {
+      scrollTop = commentCard.top - sys_navBar + 1;
+    } else if (tab.value === 'detail') {
+      scrollTop = commentCard.bottom - sys_navBar + 1;
+    }
+    uni.pageScrollTo({
+      scrollTop,
+      duration: 200,
+    });
+  }
+
+  onPageScroll((e) => {
+    state.tabOpacityVal = e.scrollTop > sheep.$platform.navbar ? 1 : e.scrollTop * 0.01;
+    if (commentCard.top === 0) {
+      throttle(() => {
+        getCommentCardNode();
+      }, 50);
+    }
+
+    if (e.scrollTop < commentCard.top - sys_navBar) {
+      state.curTab = 'goods';
+    } else if (
+      e.scrollTop >= commentCard.top - sys_navBar &&
+      e.scrollTop <= commentCard.bottom - sys_navBar
+    ) {
+      state.curTab = 'comment';
+    } else {
+      state.curTab = 'detail';
+    }
+  });
+</script>
+
+<style lang="scss" scoped>
+  .icon-box {
+    box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08), 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
+    border-radius: 30rpx;
+    width: 134rpx;
+    height: 56rpx;
+    margin-left: 8rpx;
+    border: 1px solid rgba(#fff, 0.4);
+    .line {
+      width: 2rpx;
+      height: 24rpx;
+      background: #e5e5e7;
+    }
+    .sicon-back {
+      font-size: 32rpx;
+      color: #000;
+    }
+    .sicon-home {
+      font-size: 32rpx;
+      color: #000;
+    }
+    .sicon-more {
+      font-size: 32rpx;
+      color: #000;
+    }
+    .icon-button {
+      width: 67rpx;
+      height: 56rpx;
+      &-left:hover {
+        background: rgba(0, 0, 0, 0.16);
+        border-radius: 30rpx 0px 0px 30rpx;
+      }
+      &-right:hover {
+        background: rgba(0, 0, 0, 0.16);
+        border-radius: 0px 30rpx 30rpx 0px;
+      }
+    }
+  }
+  .left-box {
+    position: relative;
+    width: 60rpx;
+    height: 60rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .circle {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 60rpx;
+      height: 60rpx;
+      background: rgba(#fff, 0.6);
+      border: 1rpx solid #ebebeb;
+      border-radius: 50%;
+      box-sizing: border-box;
+      z-index: -1;
+    }
+  }
+  .right {
+    position: relative;
+    width: 60rpx;
+    height: 60rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .circle {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 60rpx;
+      height: 60rpx;
+      background: rgba(#ffffff, 0.6);
+      border: 1rpx solid #ebebeb;
+      box-sizing: border-box;
+      border-radius: 50%;
+      z-index: -1;
+    }
+  }
+  .detail-tab-card {
+    width: 50%;
+    .tab-item {
+      height: 80rpx;
+      position: relative;
+      z-index: 11;
+
+      .tab-title {
+        font-size: 30rpx;
+      }
+
+      .cur-tab-title {
+        font-weight: $font-weight-bold;
+      }
+
+      .tab-line {
+        width: 60rpx;
+        height: 6rpx;
+        border-radius: 6rpx;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 10rpx;
+        background-color: var(--ui-BG-Main);
+        z-index: 12;
+      }
+    }
+  }
+</style>
diff --git a/pages/goods/components/detail/detail-progress.vue b/pages/goods/components/detail/detail-progress.vue
new file mode 100644
index 0000000..a6210b1
--- /dev/null
+++ b/pages/goods/components/detail/detail-progress.vue
@@ -0,0 +1,40 @@
+<!-- 秒杀商品：抢购进度 -->
+<template>
+  <view class="ss-flex ss-col-center">
+    <view class="progress-title ss-m-r-10"> 已抢{{ percent }}% </view>
+    <view class="progress-box ss-flex ss-col-center">
+      <view class="progerss-active" :style="{ width: percent < 10 ? '10%' : percent + '%' }">
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  const props = defineProps({
+    percent: {
+      type: Number,
+      default: 0,
+    },
+  });
+</script>
+
+<style lang="scss" scoped>
+  .progress-title {
+    font-size: 20rpx;
+    font-weight: 500;
+    color: #ffffff;
+  }
+
+  .progress-box {
+    width: 168rpx;
+    height: 18rpx;
+    background: #f6f6f6;
+    border-radius: 9rpx;
+  }
+
+  .progerss-active {
+    height: 24rpx;
+    background: linear-gradient(86deg, #f60600, #d00500);
+    border-radius: 12rpx;
+  }
+</style>
diff --git a/pages/goods/components/detail/detail-skeleton.vue b/pages/goods/components/detail/detail-skeleton.vue
new file mode 100644
index 0000000..5eebf50
--- /dev/null
+++ b/pages/goods/components/detail/detail-skeleton.vue
@@ -0,0 +1,177 @@
+<template>
+  <view
+    class="skeleton-wrap"
+    :class="['theme-' + sys.mode, 'main-' + sys.theme, 'font-' + sys.fontSize]"
+  >
+    <view class="skeleton-banner"></view>
+    <view class="container-box">
+      <view class="container-box-strip title ss-m-b-58"></view>
+      <view class="container-box-strip ss-m-b-20"></view>
+      <view class="container-box-strip ss-m-b-20"></view>
+      <view class="container-box-strip w-364"></view>
+    </view>
+    <view class="container-box">
+      <view class="ss-flex ss-row-between ss-m-b-34">
+        <view class="container-box-strip w-380"></view>
+        <view class="circle"></view>
+      </view>
+      <view class="ss-flex ss-row-between ss-m-b-34">
+        <view class="container-box-strip w-556"></view>
+        <view class="circle"></view>
+      </view>
+      <view class="ss-flex ss-row-between">
+        <view class="container-box-strip w-556"></view>
+        <view class="circle"></view>
+      </view>
+    </view>
+    <view class="container-box">
+      <view class="container-box-strip w-198 ss-m-b-42"></view>
+      <view class="ss-flex">
+        <view class="circle ss-m-r-12"></view>
+        <view class="container-box-strip w-252"></view>
+      </view>
+    </view>
+    <su-fixed bottom placeholder bg="bg-white">
+      <view class="ui-tabbar-box">
+        <view class="foot ss-flex ss-col-center">
+          <view class="ss-m-r-54 ss-m-l-32">
+            <view class="rec ss-m-b-8"></view>
+            <view class="oval"></view>
+          </view>
+          <view class="ss-m-r-54">
+            <view class="rec ss-m-b-8"></view>
+            <view class="oval"></view>
+          </view>
+          <view class="ss-m-r-50">
+            <view class="rec ss-m-b-8"></view>
+            <view class="oval"></view>
+          </view>
+          <button class="ss-reset-button add-btn ui-Shadow-Main"></button>
+          <button class="ss-reset-button buy-btn ui-Shadow-Main"></button>
+        </view>
+      </view>
+    </su-fixed>
+  </view>
+</template>
+
+<script setup>
+  import { computed } from 'vue';
+  import sheep from '@/sheep';
+
+  const sys = computed(() => sheep.$store('sys'));
+</script>
+
+<style lang="scss" scoped>
+  @keyframes loading {
+    0% {
+      opacity: 0.5;
+    }
+
+    50% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0.5;
+    }
+  }
+
+  .skeleton-wrap {
+    width: 100%;
+    height: 100vh;
+    position: relative;
+
+    .skeleton-banner {
+      width: 100%;
+      height: calc(100vh - 882rpx);
+      background: #f4f4f4;
+    }
+
+    .container-box {
+      padding: 24rpx 18rpx;
+      margin: 14rpx 20rpx;
+      background: var(--ui-BG);
+      animation: loading 1.4s ease infinite;
+
+      .container-box-strip {
+        height: 40rpx;
+        background: #f3f3f1;
+        border-radius: 20rpx;
+      }
+
+      .title {
+        width: 470rpx;
+        height: 50rpx;
+        border-radius: 25rpx;
+      }
+
+      .w-364 {
+        width: 364rpx;
+      }
+
+      .w-380 {
+        width: 380rpx;
+      }
+
+      .w-556 {
+        width: 556rpx;
+      }
+
+      .w-198 {
+        width: 198rpx;
+      }
+
+      .w-252 {
+        width: 252rpx;
+      }
+
+      .circle {
+        width: 40rpx;
+        height: 40rpx;
+        background: #f3f3f1;
+        border-radius: 50%;
+      }
+    }
+    .ui-tabbar-box {
+      box-shadow: 0px -6px 10px 0px rgba(51, 51, 51, 0.2);
+    }
+
+    .foot {
+      height: 100rpx;
+      background: var(--ui-BG);
+      .rec {
+        width: 38rpx;
+        height: 38rpx;
+        background: #f3f3f1;
+        border-radius: 8rpx;
+      }
+
+      .oval {
+        width: 38rpx;
+        height: 22rpx;
+        background: #f3f3f1;
+        border-radius: 11rpx;
+      }
+      .add-btn {
+        width: 214rpx;
+        height: 72rpx;
+        font-weight: 500;
+        font-size: 28rpx;
+        border-radius: 40rpx 0 0 40rpx;
+        background-color: var(--ui-BG-Main-light);
+        color: var(--ui-BG-Main);
+      }
+
+      .buy-btn {
+        width: 214rpx;
+        height: 72rpx;
+        font-weight: 500;
+        font-size: 28rpx;
+
+        border-radius: 0 40rpx 40rpx 0;
+        background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+        color: $white;
+      }
+    }
+  }
+</style>
diff --git a/pages/goods/components/detail/detail-tabbar.vue b/pages/goods/components/detail/detail-tabbar.vue
new file mode 100644
index 0000000..3de8a3a
--- /dev/null
+++ b/pages/goods/components/detail/detail-tabbar.vue
@@ -0,0 +1,169 @@
+<!-- 商品详情的底部导航 -->
+<template>
+  <su-fixed bottom placeholder bg="bg-white">
+    <view class="ui-tabbar-box">
+      <view class="ui-tabbar ss-flex ss-col-center ss-row-between">
+        <view
+          v-if="collectIcon"
+          class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
+          @tap="onFavorite"
+        >
+          <block v-if="modelValue.favorite">
+            <image
+              class="item-icon"
+              :src="sheep.$url.static('/static/img/shop/goods/collect_1.gif')"
+              mode="aspectFit"
+            />
+            <view class="item-title">已收藏</view>
+          </block>
+          <block v-else>
+            <image
+              class="item-icon"
+              :src="sheep.$url.static('/static/img/shop/goods/collect_0.png')"
+              mode="aspectFit"
+            />
+            <view class="item-title">收藏</view>
+          </block>
+        </view>
+        <view
+          v-if="serviceIcon"
+          class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
+          @tap="onChat"
+        >
+          <image
+            class="item-icon"
+            :src="sheep.$url.static('/static/img/shop/goods/message.png')"
+            mode="aspectFit"
+          />
+          <view class="item-title">客服</view>
+        </view>
+        <view
+          v-if="shareIcon"
+          class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
+          @tap="showShareModal"
+        >
+          <image
+            class="item-icon"
+            :src="sheep.$url.static('/static/img/shop/goods/share.png')"
+            mode="aspectFit"
+          />
+          <view class="item-title">分享</view>
+        </view>
+        <slot></slot>
+      </view>
+    </view>
+  </su-fixed>
+</template>
+
+<script setup>
+  /**
+   *
+   * 底部导航
+   *
+   * @property {String} bg 			 			- 背景颜色Class
+   * @property {String} ui 			 			- 自定义样式Class
+   * @property {Boolean} noFixed 		 			- 是否定位
+   * @property {Boolean} topRadius 		 		- 上圆角
+   */
+  import { reactive } from 'vue';
+  import sheep from '@/sheep';
+  import { showShareModal } from '@/sheep/hooks/useModal';
+  import FavoriteApi from '@/api/product/favorite';
+
+  // 数据
+  const state = reactive({});
+
+  // 接收参数
+  const props = defineProps({
+    modelValue: {
+      type: Object,
+      default() {},
+    },
+    bg: {
+      type: String,
+      default: 'bg-white',
+    },
+    bgStyles: {
+      type: Object,
+      default() {},
+    },
+    ui: {
+      type: String,
+      default: '',
+    },
+
+    noFixed: {
+      type: Boolean,
+      default: false,
+    },
+    topRadius: {
+      type: Number,
+      default: 0,
+    },
+    collectIcon: {
+      type: Boolean,
+      default: true,
+    },
+    serviceIcon: {
+      type: Boolean,
+      default: true,
+    },
+    shareIcon: {
+      type: Boolean,
+      default: true,
+    },
+  });
+
+  async function onFavorite() {
+    // 情况一：取消收藏
+    if (props.modelValue.favorite) {
+      const { code } = await FavoriteApi.deleteFavorite(props.modelValue.id);
+      if (code !== 0) {
+        return
+      }
+      sheep.$helper.toast('取消收藏');
+      props.modelValue.favorite = false;
+    // 情况二：添加收藏
+    } else {
+      const { code } = await FavoriteApi.createFavorite(props.modelValue.id);
+      if (code !== 0) {
+        return
+      }
+      sheep.$helper.toast('收藏成功');
+      props.modelValue.favorite = true;
+    }
+  }
+
+  const onChat = () => {
+    sheep.$router.go('/pages/chat/index', {
+      id: props.modelValue.id,
+    });
+  };
+</script>
+
+<style lang="scss" scoped>
+  .ui-tabbar-box {
+    box-shadow: 0px -6px 10px 0px rgba(51, 51, 51, 0.2);
+  }
+  .ui-tabbar {
+    display: flex;
+    height: 50px;
+    background: #fff;
+
+    .detail-tabbar-item {
+      width: 100rpx;
+
+      .item-icon {
+        width: 40rpx;
+        height: 40rpx;
+      }
+
+      .item-title {
+        font-size: 20rpx;
+        font-weight: 500;
+        line-height: 20rpx;
+        margin-top: 12rpx;
+      }
+    }
+  }
+</style>
diff --git a/pages/goods/components/groupon/groupon-card-list.vue b/pages/goods/components/groupon/groupon-card-list.vue
new file mode 100644
index 0000000..0c07d0f
--- /dev/null
+++ b/pages/goods/components/groupon/groupon-card-list.vue
@@ -0,0 +1,141 @@
+<!-- 拼团活动参团记录卡片 -->
+<template>
+  <view v-if="state.list.length > 0" class="groupon-list detail-card ss-p-x-20">
+    <view class="join-activity ss-flex ss-row-between ss-m-t-30">
+      <!-- todo: 接口缺少总数 -->
+      <view class="">已有{{ state.list.length }}人参与活动</view>
+      <text class="cicon-forward"></text>
+    </view>
+    <view
+      v-for="(record, index) in state.list"
+      @tap="sheep.$router.go('/pages/activity/groupon/detail', { id: record.id })"
+      :key="index"
+      class="ss-m-t-40 ss-flex ss-row-between border-bottom ss-p-b-30"
+    >
+      <view class="ss-flex ss-col-center">
+        <image :src="sheep.$url.cdn(record.avatar)" class="user-avatar"></image>
+        <view class="user-nickname ss-m-l-20 ss-line-1">{{ record.nickname }}</view>
+      </view>
+      <view class="ss-flex ss-col-center">
+        <view class="ss-flex-col ss-col-bottom ss-m-r-20">
+          <view class="title ss-flex ss-m-b-14">
+            还差
+            <view class="num">{{ record.userSize - record.userCount }}人</view>
+            成团
+          </view>
+          <view class="end-time">{{ endTime(record.expireTime) }}</view>
+        </view>
+        <view class="">
+          <button class="ss-reset-button go-btn" @tap.stop="onJoinGroupon(record)"> 去参团 </button>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { onMounted, reactive } from 'vue';
+  import sheep from '@/sheep';
+  import { useDurationTime } from '@/sheep/hooks/useGoods';
+  import CombinationApi from "@/api/promotion/combination";
+
+  const props = defineProps({
+    modelValue: {
+      type: Object,
+      default() {},
+    },
+  });
+  const state = reactive({
+    list: [],
+  });
+
+  // 去参团
+  const emits = defineEmits(['join']);
+  function onJoinGroupon(record) {
+    emits('join', record);
+  }
+
+  // 结束时间或状态
+  function endTime(time) {
+    const durationTime = useDurationTime(time);
+
+    if (durationTime.ms <= 0) {
+      return '该团已解散';
+    }
+
+    let timeText = '剩余 ';
+    timeText += `${durationTime.h}时`;
+    timeText += `${durationTime.m}分`;
+    timeText += `${durationTime.s}秒`;
+    return timeText;
+  }
+
+  // 初始化
+  onMounted(async () => {
+    // 查询参团记录
+    // status = 0 表示未成团
+    const { data } = await CombinationApi.getHeadCombinationRecordList(props.modelValue.id, 0 , 10);
+    state.list = data;
+  });
+</script>
+
+<style lang="scss" scoped>
+  .detail-card {
+    background-color: $white;
+    margin: 14rpx 20rpx;
+    border-radius: 10rpx;
+    overflow: hidden;
+  }
+  .groupon-list {
+    .join-activity {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #999999;
+
+      .cicon-forward {
+        font-weight: 400;
+      }
+    }
+
+    .user-avatar {
+      width: 60rpx;
+      height: 60rpx;
+      background: #ececec;
+      border-radius: 60rpx;
+    }
+
+    .user-nickname {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #333333;
+      width: 160rpx;
+    }
+
+    .title {
+      font-size: 24rpx;
+      font-weight: 500;
+      color: #666666;
+
+      .num {
+        color: #ff6000;
+      }
+    }
+
+    .end-time {
+      font-size: 24rpx;
+      font-weight: 500;
+      color: #999999;
+    }
+
+    .go-btn {
+      width: 140rpx;
+      height: 60rpx;
+      background: linear-gradient(90deg, #ff6000 0%, #fe832a 100%);
+      border-radius: 30rpx;
+      color: #fff;
+      font-weight: 500;
+      font-size: 26rpx;
+      line-height: normal;
+    }
+  }
+</style>
diff --git a/pages/goods/components/list/list-goods-card.vue b/pages/goods/components/list/list-goods-card.vue
new file mode 100644
index 0000000..d02519f
--- /dev/null
+++ b/pages/goods/components/list/list-goods-card.vue
@@ -0,0 +1,103 @@
+<!-- 页面；暂时没用到  -->
+<template>
+  <view class="list-goods-card ss-flex-col" @tap="onClick">
+    <view class="md-img-box">
+      <image class="goods-img md-img-box" :src="sheep.$url.cdn(img)" mode="aspectFill"></image>
+    </view>
+    <view class="md-goods-content ss-flex-col ss-row-around">
+      <view class="md-goods-title ss-line-2 ss-m-x-20 ss-m-t-6 ss-m-b-16">{{ title }}</view>
+      <view class="md-goods-subtitle ss-line-1 ss-p-y-10 ss-p-20">{{ subTitle }}</view>
+      <view class="ss-flex ss-col-center ss-row-between ss-m-b-16 ss-m-x-20">
+        <view class="md-goods-price text-price">{{ price }}</view>
+        <view class="goods-origin-price text-price">{{ originPrice }}</view>
+        <view class="sales-text">已售{{ sales }}件</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad } from '@dcloudio/uni-app';
+  import { computed, reactive } from 'vue';
+
+  const props = defineProps({
+    img: {
+      type: String,
+      default: '',
+    },
+    subTitle: {
+      type: String,
+      default: '',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    price: {
+      type: [String, Number],
+      default: '',
+    },
+    originPrice: {
+      type: [String, Number],
+      default: '',
+    },
+    sales: {
+      type: [String, Number],
+      default: '',
+    },
+  });
+  const emits = defineEmits(['click']);
+  const onClick = () => {
+    emits('click');
+  };
+</script>
+
+<style lang="scss" scoped>
+  .goods-img {
+    width: 100%;
+    height: 100%;
+    background-color: #f5f5f5;
+  }
+
+  .sales-text {
+    font-size: 20rpx;
+    color: #c4c4c4;
+  }
+
+  .goods-origin-price {
+    font-size: 20rpx;
+    color: #c4c4c4;
+    text-decoration: line-through;
+  }
+
+  .list-goods-card {
+    overflow: hidden;
+    width: 344rpx;
+    position: relative;
+    z-index: 1;
+    background-color: $white;
+    box-shadow: 0 0 20rpx 4rpx rgba(199, 199, 199, 0.22);
+    border-radius: 20rpx;
+
+    .md-img-box {
+      width: 344rpx;
+      height: 344rpx;
+    }
+
+    .md-goods-title {
+      font-size: 26rpx;
+      color: #333;
+    }
+    .md-goods-subtitle {
+      background-color: var(--ui-BG-Main-tag);
+      color: var(--ui-BG-Main);
+      font-size: 20rpx;
+    }
+
+    .md-goods-price {
+      font-size: 30rpx;
+      color: $red;
+    }
+  }
+</style>
diff --git a/pages/goods/components/list/list-navbar.vue b/pages/goods/components/list/list-navbar.vue
new file mode 100644
index 0000000..c21e679
--- /dev/null
+++ b/pages/goods/components/list/list-navbar.vue
@@ -0,0 +1,93 @@
+<!-- 页面；暂时没用到  -->
+<template>
+  <su-fixed
+    alway
+    :bgStyles="{ background: '#fff' }"
+    :val="0"
+    noNav
+    :opacity="false"
+    placeholder
+    index="10090"
+  >
+    <su-status-bar />
+    <view
+      class="ui-bar ss-flex ss-col-center ss-row-between ss-p-x-20"
+      :style="[{ height: sys_navBar - sys_statusBar + 'px' }]"
+    >
+      <!-- 左 -->
+      <view class="left-box">
+        <text
+          class="_icon-back back-icon"
+          @tap="toBack"
+          :style="[{ color: state.iconColor }]"
+        ></text>
+      </view>
+      <!-- 中 -->
+      <uni-search-bar
+        class="ss-flex-1"
+        radius="33"
+        :placeholder="placeholder"
+        cancelButton="none"
+        :focus="true"
+        v-model="state.searchVal"
+        @confirm="onSearch"
+      />
+      <!-- 右 -->
+      <view class="right">
+        <text class="sicon-more" :style="[{ color: state.iconColor }]" @tap="showMenuTools" />
+      </view>
+      <!-- #ifdef MP -->
+      <view :style="[capsuleStyle]"></view>
+      <!-- #endif -->
+    </view>
+  </su-fixed>
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+  import sheep from '@/sheep';
+  import { showMenuTools } from '@/sheep/hooks/useModal';
+
+  const sys_statusBar = sheep.$platform.device.statusBarHeight;
+  const sys_navBar = sheep.$platform.navbar;
+  const capsuleStyle = {
+    width: sheep.$platform.capsule.width + 'px',
+    height: sheep.$platform.capsule.height + 'px',
+    margin: '0 ' + (sheep.$platform.device.windowWidth - sheep.$platform.capsule.right) + 'px',
+  };
+
+  const state = reactive({
+    iconColor: '#000',
+    searchVal: '',
+  });
+
+  const props = defineProps({
+    placeholder: {
+      type: String,
+      default: '搜索内容',
+    },
+  });
+
+  const emits = defineEmits(['searchConfirm']);
+
+  // 返回
+  const toBack = () => {
+    sheep.$router.back();
+  };
+
+  // 搜索
+  const onSearch = () => {
+    emits('searchConfirm', state.searchVal);
+  };
+
+  const onTab = (item) => {};
+</script>
+
+<style lang="scss" scoped>
+  .back-icon {
+    font-size: 40rpx;
+  }
+  .sicon-more {
+    font-size: 48rpx;
+  }
+</style>
diff --git a/pages/goods/groupon.vue b/pages/goods/groupon.vue
new file mode 100644
index 0000000..c9378ba
--- /dev/null
+++ b/pages/goods/groupon.vue
@@ -0,0 +1,532 @@
+<!-- 拼团商品详情 -->
+<template>
+  <s-layout :onShareAppMessage="shareInfo" navbar="goods">
+    <!-- 标题栏 -->
+    <detailNavbar />
+    <!-- 骨架屏 -->
+    <detailSkeleton v-if="state.skeletonLoading" />
+    <!-- 下架/售罄提醒 -->
+    <s-empty
+        v-else-if="state.goodsInfo === null || state.activity.status !== 0 || state.activity.endTime < new Date().getTime()"
+        text="活动不存在或已结束"
+        icon="/static/soldout-empty.png"
+        showAction
+        actionText="返回上一页"
+        @clickAction="sheep.$router.back()"
+    />
+    <block v-else>
+      <view class="detail-swiper-selector">
+        <!-- 商品图轮播 -->
+        <su-swiper
+          class="ss-m-b-14"
+          isPreview
+          :list="state.goodsSwiper"
+          dotStyle="tag"
+          imageMode="widthFix"
+          dotCur="bg-mask-40"
+          :seizeHeight="750"
+        />
+
+        <!-- 价格+标题 -->
+        <view class="title-card detail-card ss-m-y-14 ss-m-x-20 ss-p-x-20 ss-p-y-34">
+          <view class="ss-flex ss-row-between ss-m-b-60">
+            <view>
+              <view class="price-box ss-flex ss-col-bottom ss-m-b-18">
+                <view class="price-text ss-m-r-16">
+                  {{ fen2yuan(state.activity.price || state.goodsInfo.price) }}
+                </view>
+                <view class="tig ss-flex ss-col-center">
+                  <view class="tig-icon ss-flex ss-col-center ss-row-center">
+                    <view class="groupon-tag">
+                      <image
+                        :src="sheep.$url.static('/static/img/shop/goods/groupon-tag.png')"
+                      ></image>
+                    </view>
+                  </view>
+                  <view class="tig-title">拼团价</view>
+                </view>
+              </view>
+              <view class="ss-flex ss-row-between">
+                <view
+                  class="origin-price ss-flex ss-col-center"
+                  v-if="state.goodsInfo.price"
+                >
+                  单买价：
+                  <view class="origin-price-text">
+                    {{ fen2yuan(state.goodsInfo.price) }}
+                  </view>
+                </view>
+              </view>
+            </view>
+
+            <view class="countdown-box" v-if="endTime.ms > 0">
+              <view class="countdown-title ss-m-b-20">距结束仅剩</view>
+              <view class="ss-flex countdown-time">
+                <view class="ss-flex countdown-h">{{ endTime.h }}</view>
+                <view class="ss-m-x-4">:</view>
+                <view class="countdown-num ss-flex ss-row-center">{{ endTime.m }}</view>
+                <view class="ss-m-x-4">:</view>
+                <view class="countdown-num ss-flex ss-row-center">{{ endTime.s }}</view>
+              </view>
+            </view>
+            <view class="countdown-title" v-else> 活动已结束 </view>
+          </view>
+
+          <view class="title-text ss-line-2 ss-m-b-6">{{ state.goodsInfo.name }}</view>
+          <view class="subtitle-text ss-line-1">{{ state.goodsInfo.introduction }}</view>
+        </view>
+
+        <!-- 功能卡片 -->
+        <view class="detail-cell-card detail-card ss-flex-col">
+          <!-- 规格 -->
+          <detail-cell-sku :sku="state.selectedSkuPrice" @tap="state.showSelectSku = true" />
+        </view>
+
+        <!-- 参团列表 -->
+        <groupon-card-list v-model="state.activity" @join="onJoinGroupon" />
+
+        <!-- 规格与数量弹框 -->
+        <s-select-groupon-sku
+          :show="state.showSelectSku"
+          :goodsInfo="state.goodsInfo"
+          :grouponAction="state.grouponAction"
+          :grouponNum="state.grouponNum"
+          @buy="onBuy"
+          @change="onSkuChange"
+          @close="onSkuClose"
+        />
+      </view>
+
+      <!-- 评价 -->
+      <detail-comment-card class="detail-comment-selector" :goodsId="state.goodsId" />
+      <!-- 详情 -->
+      <detail-content-card class="detail-content-selector" :content="state.goodsInfo.description" />
+
+      <!-- 商品tabbar -->
+      <!-- TODO: 已售罄、预热 判断 设计-->
+      <detail-tabbar v-model="state.goodsInfo">
+        <view class="buy-box ss-flex ss-col-center ss-p-r-20">
+          <button
+            class="ss-reset-button origin-price-btn ss-flex-col"
+            @tap="sheep.$router.go('/pages/goods/index', { id: state.goodsInfo.id })"
+          >
+            <view class="btn-price">{{ fen2yuan(state.goodsInfo.marketPrice) }}</view>
+            <view>原价购买</view>
+          </button>
+          <button
+            class="ss-reset-button btn-tox ss-flex-col"
+            @tap="onCreateGroupon"
+            :class="
+              state.activity.status === 0 && state.goodsInfo.stock !== 0
+                ? 'check-btn-box'
+                : 'disabled-btn-box'
+            "
+            :disabled="state.goodsInfo.stock === 0 || state.activity.status !== 0"
+          >
+            <view class="btn-price">{{ fen2yuan(state.activity.price || state.goodsInfo.price) }}</view>
+            <view v-if="state.activity.startTime > new Date().getTime()">未开始</view>
+            <view v-else-if="state.activity.endTime <= new Date().getTime()">已结束</view>
+            <view v-else>
+              <view v-if="state.goodsInfo.stock === 0">已售罄</view>
+              <view v-else>立即开团</view>
+            </view>
+          </button>
+        </view>
+      </detail-tabbar>
+    </block>
+  </s-layout>
+</template>
+
+<script setup>
+  import { reactive, computed } from 'vue';
+  import { onLoad, onPageScroll } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import { isEmpty } from 'lodash';
+  import detailNavbar from './components/detail/detail-navbar.vue';
+  import detailCellSku from './components/detail/detail-cell-sku.vue';
+  import detailTabbar from './components/detail/detail-tabbar.vue';
+  import detailSkeleton from './components/detail/detail-skeleton.vue';
+  import detailCommentCard from './components/detail/detail-comment-card.vue';
+  import detailContentCard from './components/detail/detail-content-card.vue';
+  import grouponCardList from './components/groupon/groupon-card-list.vue';
+  import {useDurationTime, formatGoodsSwiper, fen2yuan} from '@/sheep/hooks/useGoods';
+  import CombinationApi from "@/api/promotion/combination";
+  import SpuApi from "@/api/product/spu";
+
+  const headerBg = sheep.$url.css('/static/img/shop/goods/groupon-bg.png');
+  const btnBg = sheep.$url.css('/static/img/shop/goods/groupon-btn.png');
+  const disabledBtnBg = sheep.$url.css(
+    '/static/img/shop/goods/activity-btn-disabled.png',
+  );
+  const grouponBg = sheep.$url.css('/static/img/shop/goods/groupon-tip-bg.png');
+
+  onPageScroll(() => {});
+  const state = reactive({
+    skeletonLoading: true,  // 骨架屏
+    goodsId: 0,             // 商品ID
+    goodsInfo: {},          // 商品信息
+    goodsSwiper: [],        // 商品轮播图
+    showSelectSku: false,   // 显示规格弹框
+    selectedSkuPrice: {},   // 选中的规格价格
+    activity: {},           // 团购活动
+    grouponId: 0,           // 团购ID
+    grouponNum: 0,          // 团购人数
+    grouponAction: 'create',  // 团购操作
+    combinationHeadId: null, // 拼团团长编号
+  });
+
+  // 倒计时
+  const endTime = computed(() => {
+    return useDurationTime(state.activity.endTime);
+  });
+
+  // 规格变更
+  function onSkuChange(e) {
+    state.selectedSkuPrice = e;
+  }
+
+  function onSkuClose() {
+    state.showSelectSku = false;
+  }
+
+  // 发起拼团
+  function onCreateGroupon() {
+    state.grouponAction = 'create';
+    state.grouponId = 0;
+    state.showSelectSku = true;
+  }
+
+  /**
+   * 去参团
+   * @param record 团长的团购记录
+   */
+  function onJoinGroupon(record) {
+    state.grouponAction = 'join';
+    state.grouponId = record.activityId;
+    state.combinationHeadId = record.id;
+    state.grouponNum = record.userSize;
+    state.showSelectSku = true;
+  }
+
+  // 立即购买
+  function onBuy(sku) {
+    sheep.$router.go('/pages/order/confirm', {
+      data: JSON.stringify({
+        order_type: 'goods',
+        combinationActivityId: state.activity.id,
+        combinationHeadId: state.combinationHeadId,
+        items: [
+          {
+            skuId: sku.id,
+            count: sku.count,
+          },
+        ],
+      }),
+    });
+  }
+
+  // 分享信息
+  // TODO @芋艿：分享的接入
+  const shareInfo = computed(() => {
+    if (isEmpty(state.activity)) return {};
+    return sheep.$platform.share.getShareInfo(
+      {
+        title: state.activity.name,
+        image: sheep.$url.cdn(state.goodsInfo.picUrl),
+        params: {
+          page: '3',
+          query: state.activity.id,
+        },
+      },
+      {
+        type: 'goods', // 商品海报
+        title: state.activity.name, // 商品标题
+        image: sheep.$url.cdn(state.goodsInfo.picUrl), // 商品主图
+        price: fen2yuan(state.goodsInfo.price), // 商品价格
+        marketPrice: fen2yuan(state.goodsInfo.marketPrice), // 商品原价
+      },
+    );
+  });
+
+  onLoad(async (options) => {
+    // 非法参数
+    if (!options.id) {
+      state.goodsInfo = null;
+      return;
+    }
+    state.grouponId = options.id;
+    // 加载活动信息
+    const { code, data: activity } = await CombinationApi.getCombinationActivity(state.grouponId);
+    state.activity = activity;
+    // 加载商品信息
+    const { data: spu } = await SpuApi.getSpuDetail(activity.spuId);
+    state.goodsId = spu.id;
+    activity.products.forEach(product => {
+      spu.price = Math.min(spu.price, product.combinationPrice); // 设置 SPU 的最低价格
+    });
+    // 关闭骨架屏
+    state.skeletonLoading = false;
+    if (code === 0) {
+      state.goodsInfo = spu;
+      state.grouponNum = activity.userSize;
+      state.goodsSwiper = formatGoodsSwiper(state.goodsInfo.sliderPicUrls);
+    } else {
+      // 未找到商品
+      state.goodsInfo = null;
+    }
+  });
+</script>
+
+<style lang="scss" scoped>
+  .detail-card {
+    background-color: $white;
+    margin: 14rpx 20rpx;
+    border-radius: 10rpx;
+    overflow: hidden;
+  }
+
+  // 价格标题卡片
+  .title-card {
+    width: 710rpx;
+    box-sizing: border-box;
+    // height: 320rpx;
+    background-size: 100% 100%;
+    border-radius: 10rpx;
+    background-image: v-bind(headerBg);
+    background-repeat: no-repeat;
+
+    .price-box {
+      .price-text {
+        font-size: 30rpx;
+        font-weight: 500;
+        color: #fff;
+        line-height: normal;
+        font-family: OPPOSANS;
+
+        &::before {
+          content: '￥';
+          font-size: 30rpx;
+        }
+      }
+    }
+    .origin-price {
+      font-size: 24rpx;
+      font-weight: 400;
+      color: #fff;
+      opacity: 0.7;
+
+      .origin-price-text {
+        text-decoration: line-through;
+
+        font-family: OPPOSANS;
+
+        &::before {
+          content: '￥';
+        }
+      }
+    }
+
+    .tig {
+      border: 2rpx solid #ffffff;
+      border-radius: 4rpx;
+      width: 126rpx;
+      height: 38rpx;
+
+      .tig-icon {
+        margin-left: -2rpx;
+        width: 40rpx;
+        height: 40rpx;
+        background: #ffffff;
+        border-radius: 4rpx 0 0 4rpx;
+
+        .groupon-tag {
+          width: 32rpx;
+          height: 32rpx;
+        }
+      }
+
+      .tig-title {
+        font-size: 24rpx;
+        font-weight: 500;
+        line-height: normal;
+        color: #ffffff;
+        width: 86rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+
+    .countdown-title {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ffffff;
+    }
+
+    .countdown-time {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ffffff;
+      .countdown-h {
+        font-size: 24rpx;
+        font-family: OPPOSANS;
+        font-weight: 500;
+        color: #ffffff;
+        padding: 0 4rpx;
+        height: 40rpx;
+        background: rgba(#000000, 0.1);
+        border-radius: 6rpx;
+      }
+      .countdown-num {
+        font-size: 24rpx;
+        font-family: OPPOSANS;
+        font-weight: 500;
+        color: #ffffff;
+        width: 40rpx;
+        height: 40rpx;
+        background: rgba(#000000, 0.1);
+        border-radius: 6rpx;
+      }
+    }
+
+    .title-text {
+      font-size: 30rpx;
+      font-weight: bold;
+      line-height: 42rpx;
+      color: #fff;
+    }
+
+    .subtitle-text {
+      font-size: 26rpx;
+      font-weight: 400;
+      color: #ffffff;
+      line-height: 42rpx;
+      opacity: 0.9;
+    }
+  }
+
+  // 购买
+  .buy-box {
+    .disabled-btn-box[disabled] {
+      background-color: transparent;
+    }
+    .check-btn-box {
+      width: 248rpx;
+      height: 80rpx;
+      font-size: 24rpx;
+      font-weight: 600;
+      margin-left: -36rpx;
+      background-image: v-bind(btnBg);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      color: #ffffff;
+      line-height: normal;
+      border-radius: 0px 40rpx 40rpx 0px;
+    }
+    .disabled-btn-box {
+      width: 248rpx;
+      height: 80rpx;
+      font-size: 24rpx;
+      font-weight: 600;
+      margin-left: -36rpx;
+      background-image: v-bind(disabledBtnBg);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      color: #999999;
+      line-height: normal;
+      border-radius: 0px 40rpx 40rpx 0px;
+    }
+
+    .origin-price-btn {
+      width: 236rpx;
+      height: 80rpx;
+      background: rgba(#ff5651, 0.1);
+      color: #ff6000;
+      border-radius: 40rpx 0px 0px 40rpx;
+      line-height: normal;
+      font-size: 24rpx;
+      font-weight: 500;
+
+      .btn-title {
+        font-size: 28rpx;
+      }
+    }
+    .btn-price {
+      font-family: OPPOSANS;
+
+      &::before {
+        content: '￥';
+      }
+    }
+    .more-item-box {
+      .more-item {
+        width: 156rpx;
+        height: 58rpx;
+        font-size: 26rpx;
+        font-weight: 500;
+        color: #999999;
+        border-radius: 10rpx;
+      }
+      .more-item-hover {
+        background: rgba(#ffefe5, 0.32);
+        color: #ff6000;
+      }
+    }
+  }
+
+  .groupon-box {
+    background: v-bind(grouponBg)
+      no-repeat;
+    background-size: 100% 100%;
+  }
+
+  //活动卡片
+  .activity-box {
+    width: 100%;
+    height: 80rpx;
+    box-sizing: border-box;
+    margin-bottom: 10rpx;
+
+    .activity-title {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 42rpx;
+
+      .activity-icon {
+        width: 38rpx;
+        height: 38rpx;
+      }
+    }
+
+    .activity-go {
+      width: 70rpx;
+      height: 32rpx;
+      background: #ffffff;
+      border-radius: 16rpx;
+      font-weight: 500;
+      color: #ff6000;
+      font-size: 24rpx;
+      line-height: normal;
+    }
+  }
+
+  .model-box {
+    .title {
+      font-size: 36rpx;
+      font-weight: bold;
+      color: #333333;
+    }
+
+    .subtitle {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #333333;
+    }
+  }
+
+  image {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/pages/goods/index.vue b/pages/goods/index.vue
new file mode 100644
index 0000000..730f167
--- /dev/null
+++ b/pages/goods/index.vue
@@ -0,0 +1,412 @@
+<template>
+	<view>
+		<s-layout :onShareAppMessage="shareInfo" navbar="goods">
+			<!-- 标题栏 -->
+			<detailNavbar />
+
+			<!-- 骨架屏 -->
+			<detailSkeleton v-if="state.skeletonLoading" />
+			<!-- 下架/售罄提醒 -->
+			<s-empty v-else-if="state.goodsInfo === null" text="商品不存在或已下架" icon="/static/soldout-empty.png" showAction
+               actionText="再逛逛" actionUrl="/pages/goods/list" />
+			<block v-else>
+				<view class="detail-swiper-selector">
+					<!-- 商品轮播图  -->
+					<su-swiper class="ss-m-b-14" isPreview :list="formatGoodsSwiper(state.goodsInfo.sliderPicUrls)"
+                     otStyle="tag" imageMode="widthFix" dotCur="bg-mask-40" :seizeHeight="750" />
+
+					<!-- 价格+标题 -->
+					<view class="title-card detail-card ss-p-y-40 ss-p-x-20">
+						<view class="ss-flex ss-row-between ss-col-center ss-m-b-26">
+							<view class="price-box ss-flex ss-col-bottom">
+								<view class="price-text ss-m-r-16">
+									{{ fen2yuan(state.selectedSku.price || state.goodsInfo.price) }}
+								</view>
+								<view class="origin-price-text" v-if="state.goodsInfo.marketPrice > 0">
+									{{ fen2yuan(state.selectedSku.marketPrice || state.goodsInfo.marketPrice) }}
+								</view>
+							</view>
+							<view class="sales-text">
+								{{ formatSales('exact', state.goodsInfo.salesCount) }}
+							</view>
+						</view>
+						<view class="discounts-box ss-flex ss-row-between ss-m-b-28">
+							<!-- 满减送/限时折扣活动的提示 -->
+							<div class="tag-content">
+								<view class="tag-box ss-flex">
+									<view class="tag ss-m-r-10" v-for="promos in state.activityInfo"
+                        :key="promos.id" @tap="onActivity">
+										{{ promos.name }}
+									</view>
+								</view>
+							</div>
+
+							<!-- 优惠劵 -->
+							<view class="get-coupon-box ss-flex ss-col-center ss-m-l-20" @tap="state.showModel = true"
+								v-if="state.couponInfo.length">
+								<view class="discounts-title ss-m-r-8">领券</view>
+								<text class="cicon-forward"></text>
+							</view>
+						</view>
+						<view class="title-text ss-line-2 ss-m-b-6">{{ state.goodsInfo.name }}</view>
+						<view class="subtitle-text ss-line-1">{{ state.goodsInfo.introduction }}</view>
+					</view>
+
+					<!-- 功能卡片 -->
+					<view class="detail-cell-card detail-card ss-flex-col">
+						<detail-cell-sku v-model="state.selectedSku.goods_sku_text" :sku="state.selectedSku"
+                             @tap="state.showSelectSku = true" />
+					</view>
+
+					<!-- 规格与数量弹框 -->
+					<s-select-sku :goodsInfo="state.goodsInfo" :show="state.showSelectSku" @addCart="onAddCart"
+                        @buy="onBuy" @change="onSkuChange" @close="state.showSelectSku = false" />
+				</view>
+
+				<!-- 评价 -->
+				<detail-comment-card class="detail-comment-selector" :goodsId="state.goodsId" />
+				<!-- 详情 -->
+				<detail-content-card class="detail-content-selector" :content="state.goodsInfo.description" />
+
+				<!-- 活动跳转：拼团/秒杀/砍价活动 -->
+				<detail-activity-tip v-if="state.activityList.length > 0" :activity-list="state.activityList" />
+
+				<!-- 详情 tabbar -->
+				<detail-tabbar v-model="state.goodsInfo">
+					<view class="buy-box ss-flex ss-col-center ss-p-r-20" v-if="state.goodsInfo.stock > 0">
+						<button class="ss-reset-button add-btn ui-Shadow-Main" @tap="state.showSelectSku = true">
+							加入购物车
+						</button>
+						<button class="ss-reset-button buy-btn ui-Shadow-Main" @tap="state.showSelectSku = true">
+							立即购买
+						</button>
+					</view>
+					<view class="buy-box ss-flex ss-col-center ss-p-r-20" v-else>
+						<button class="ss-reset-button disabled-btn" disabled> 已售罄 </button>
+					</view>
+				</detail-tabbar>
+
+				<!-- 优惠劵弹窗 -->
+				<s-coupon-get v-model="state.couponInfo" :show="state.showModel" @close="state.showModel = false"
+                      @get="onGet" />
+
+				<!-- 满减送/限时折扣活动弹窗 -->
+				<s-activity-pop v-model="state.activityInfo" :show="state.showActivityModel"
+                        @close="state.showActivityModel = false" />
+			</block>
+		</s-layout>
+	</view>
+</template>
+
+<script setup>
+	import {
+		reactive,
+		computed
+	} from 'vue';
+	import {
+		onLoad,
+		onPageScroll
+	} from '@dcloudio/uni-app';
+	import sheep from '@/sheep';
+	import CouponApi from '@/api/promotion/coupon';
+	import ActivityApi from '@/api/promotion/activity';
+  import FavoriteApi from '@/api/product/favorite';
+  import { formatSales, formatGoodsSwiper, fen2yuan } from '@/sheep/hooks/useGoods';
+	import detailNavbar from './components/detail/detail-navbar.vue';
+	import detailCellSku from './components/detail/detail-cell-sku.vue';
+	import detailTabbar from './components/detail/detail-tabbar.vue';
+	import detailSkeleton from './components/detail/detail-skeleton.vue';
+	import detailCommentCard from './components/detail/detail-comment-card.vue';
+	import detailContentCard from './components/detail/detail-content-card.vue';
+	import detailActivityTip from './components/detail/detail-activity-tip.vue';
+	import { isEmpty } from 'lodash';
+  import SpuApi from '@/api/product/spu';
+
+	onPageScroll(() => {});
+
+	const state = reactive({
+		goodsId: 0,
+		skeletonLoading: true, // SPU 加载中
+		goodsInfo: {}, // SPU 信息
+		showSelectSku: false, // 是否展示 SKU 选择弹窗
+		selectedSku: {}, // 选中的 SKU
+		showModel: false, // 是否展示 Coupon 优惠劵的弹窗
+		couponInfo: [], // 可领取的 Coupon 优惠劵的列表
+		showActivityModel: false, // 【满减送/限时折扣】是否展示 Activity 营销活动的弹窗
+		activityInfo: [], // 【满减送/限时折扣】可参与的 Activity 营销活动的列表
+		activityList: [], // 【秒杀/拼团/砍价】可参与的 Activity 营销活动的列表
+	});
+
+	// 规格变更
+	function onSkuChange(e) {
+		state.selectedSku = e;
+	}
+
+	// 添加购物车
+	function onAddCart(e) {
+    if (!e.id) {
+      sheep.$helper.toast('请选择商品规格');
+      return;
+    }
+		sheep.$store('cart').add(e);
+	}
+
+	// 立即购买
+	function onBuy(e) {
+    if (!state.selectedSku.id) {
+      sheep.$helper.toast('请选择商品规格');
+      return;
+    }
+    sheep.$router.go('/pages/order/confirm', {
+      data: JSON.stringify({
+        items: [{
+          skuId: e.id,
+          count: e.goods_num
+        }],
+        // TODO 芋艿：后续清理掉这 2 参数
+        deliveryType: 1,
+        pointStatus: false,
+      }),
+    });
+	}
+
+	// 营销活动
+	function onActivity() {
+		state.showActivityModel = true;
+	}
+
+	// 立即领取
+	async function onGet(id) {
+    const { code } = await CouponApi.takeCoupon(id);
+    if (code !== 0) {
+      return;
+    }
+    uni.showToast({
+      title: '领取成功',
+    });
+    setTimeout(() => {
+      getCoupon();
+    }, 1000);
+	}
+
+	//  TODO 芋艿：待测试
+	const shareInfo = computed(() => {
+		if (isEmpty(state.goodsInfo)) return {};
+		return sheep.$platform.share.getShareInfo({
+			title: state.goodsInfo.name,
+			image: sheep.$url.cdn(state.goodsInfo.picUrl),
+			desc: state.goodsInfo.introduction,
+			params: {
+				page: '2',
+				query: state.goodsInfo.id,
+			},
+		}, {
+			type: 'goods', // 商品海报
+			title: state.goodsInfo.name, // 商品名称
+			image: sheep.$url.cdn(state.goodsInfo.picUrl), // 商品主图
+			price: fen2yuan(state.goodsInfo.price), // 商品价格
+			original_price: fen2yuan(state.goodsInfo.marketPrice), // 商品原价
+		});
+	});
+
+  async function getCoupon() {
+    const { code, data } = await CouponApi.getCouponTemplateList(state.goodsId, 2, 10);
+    if (code === 0) {
+      state.couponInfo = data;
+    }
+  }
+
+	onLoad((options) => {
+		// 非法参数
+		if (!options.id) {
+			state.goodsInfo = null;
+			return;
+		}
+		state.goodsId = options.id;
+		// 1. 加载商品信息
+		SpuApi.getSpuDetail(state.goodsId).then((res) => {
+			// 未找到商品
+			if (res.code !== 0 || !res.data) {
+				state.goodsInfo = null;
+				return;
+			}
+			// 加载到商品
+			state.skeletonLoading = false;
+			state.goodsInfo = res.data;
+
+      // 加载是否收藏
+      FavoriteApi.isFavoriteExists(state.goodsId, 'goods').then((res) => {
+        if (res.code !== 0) {
+          return;
+        }
+        state.goodsInfo.favorite = res.data;
+      });
+		});
+
+		// 2. 加载优惠劵信息
+    getCoupon();
+
+		// 3. 加载营销活动信息
+		ActivityApi.getActivityListBySpuId(state.goodsId).then((res) => {
+			if (res.code !== 0) {
+				return;
+			}
+      res.data.forEach(activity => {
+        if ([1, 2, 3].includes(activity.type)) { // 情况一：拼团/秒杀/砍价
+          state.activityList.push(activity);
+        } else if (activity.type === 5) { // 情况二：满减送
+          state.activityInfo.push(activity);
+        } else { // 情况三：限时折扣 TODO 芋艿
+          console.log('待实现！优先级不高');
+        }
+      })
+		});
+	});
+</script>
+
+<style lang="scss" scoped>
+	.detail-card {
+		background-color: #ffff;
+		margin: 14rpx 20rpx;
+		border-radius: 10rpx;
+		overflow: hidden;
+	}
+
+	// 价格标题卡片
+	.title-card {
+		.price-box {
+			.price-text {
+				font-size: 42rpx;
+				font-weight: 500;
+				color: #ff3000;
+				line-height: 30rpx;
+				font-family: OPPOSANS;
+
+				&::before {
+					content: '￥';
+					font-size: 30rpx;
+				}
+			}
+
+			.origin-price-text {
+				font-size: 26rpx;
+				font-weight: 400;
+				text-decoration: line-through;
+				color: $gray-c;
+				font-family: OPPOSANS;
+
+				&::before {
+					content: '￥';
+				}
+			}
+		}
+
+		.sales-text {
+			font-size: 26rpx;
+			font-weight: 500;
+			color: $gray-c;
+		}
+
+		.discounts-box {
+			.tag-content {
+				flex: 1;
+				min-width: 0;
+				white-space: nowrap;
+			}
+
+			.tag-box {
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
+			.tag {
+				flex-shrink: 0;
+				padding: 4rpx 10rpx;
+				font-size: 24rpx;
+				font-weight: 500;
+				border-radius: 4rpx;
+				color: var(--ui-BG-Main);
+				background: var(--ui-BG-Main-tag);
+			}
+
+			.discounts-title {
+				font-size: 24rpx;
+				font-weight: 500;
+				color: var(--ui-BG-Main);
+				line-height: normal;
+			}
+
+			.cicon-forward {
+				color: var(--ui-BG-Main);
+				font-size: 24rpx;
+				line-height: normal;
+				margin-top: 4rpx;
+			}
+		}
+
+		.title-text {
+			font-size: 30rpx;
+			font-weight: bold;
+			line-height: 42rpx;
+		}
+
+		.subtitle-text {
+			font-size: 26rpx;
+			font-weight: 400;
+			color: $dark-9;
+			line-height: 42rpx;
+		}
+	}
+
+	// 购买
+	.buy-box {
+		.add-btn {
+			width: 214rpx;
+			height: 72rpx;
+			font-weight: 500;
+			font-size: 28rpx;
+			border-radius: 40rpx 0 0 40rpx;
+			background-color: var(--ui-BG-Main-light);
+			color: var(--ui-BG-Main);
+		}
+
+		.buy-btn {
+			width: 214rpx;
+			height: 72rpx;
+			font-weight: 500;
+			font-size: 28rpx;
+
+			border-radius: 0 40rpx 40rpx 0;
+			background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+			color: $white;
+		}
+
+		.disabled-btn {
+			width: 428rpx;
+			height: 72rpx;
+			border-radius: 40rpx;
+			background: #999999;
+			color: $white;
+		}
+	}
+
+	.model-box {
+		height: 60vh;
+
+		.model-content {
+			height: 56vh;
+		}
+
+		.title {
+			font-size: 36rpx;
+			font-weight: bold;
+			color: #333333;
+		}
+
+		.subtitle {
+			font-size: 26rpx;
+			font-weight: 500;
+			color: #333333;
+		}
+	}
+</style>
diff --git a/pages/goods/list.vue b/pages/goods/list.vue
new file mode 100644
index 0000000..d0c7a51
--- /dev/null
+++ b/pages/goods/list.vue
@@ -0,0 +1,362 @@
+<template>
+	<s-layout navbar="normal" :leftWidth="0" :rightWidth="0" tools="search" :defaultSearch="state.keyword"
+		@search="onSearch">
+		<!-- 筛选 -->
+		<su-sticky bgColor="#fff">
+			<view class="ss-flex">
+				<view class="ss-flex-1">
+					<su-tabs :list="state.tabList" :scrollable="false" @change="onTabsChange"
+                   :current="state.currentTab" />
+				</view>
+				<view class="list-icon" @tap="state.iconStatus = !state.iconStatus">
+					<text v-if="state.iconStatus" class="sicon-goods-list" />
+					<text v-else class="sicon-goods-card" />
+				</view>
+			</view>
+		</su-sticky>
+
+		<!-- 弹窗 -->
+		<su-popup :show="state.showFilter" type="top" round="10" :space="sys_navBar + 38" backgroundColor="#F6F6F6"
+			:zIndex="10" @close="state.showFilter = false">
+			<view class="filter-list-box">
+				<view class="filter-item" v-for="(item, index) in state.tabList[state.currentTab].list"
+					:key="item.value" :class="[{ 'filter-item-active': index === state.curFilter }]"
+					@tap="onFilterItem(index)">
+					{{ item.label }}
+				</view>
+			</view>
+		</su-popup>
+
+    <!-- 情况一：单列布局 -->
+		<view v-if="state.iconStatus && state.pagination.total > 0" class="goods-list ss-m-t-20">
+			<view class="ss-p-l-20 ss-p-r-20 ss-m-b-20" v-for="item in state.pagination.list" :key="item.id">
+				<s-goods-column
+          class=""
+          size="lg"
+          :data="item"
+          :topRadius="10"
+          :bottomRadius="10"
+					@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+        />
+			</view>
+		</view>
+    <!-- 情况二：双列布局 -->
+    <view v-if="!state.iconStatus && state.pagination.total > 0"
+			class="ss-flex ss-flex-wrap ss-p-x-20 ss-m-t-20 ss-col-top">
+			<view class="goods-list-box">
+				<view class="left-list" v-for="item in state.leftGoodsList" :key="item.id">
+					<s-goods-column
+            class="goods-md-box"
+            size="md"
+            :data="item"
+            :topRadius="10"
+            :bottomRadius="10"
+						@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+						@getHeight="mountMasonry($event, 'left')"
+          >
+						<template v-slot:cart>
+							<button class="ss-reset-button cart-btn" />
+						</template>
+					</s-goods-column>
+				</view>
+			</view>
+			<view class="goods-list-box">
+				<view class="right-list" v-for="item in state.rightGoodsList" :key="item.id">
+					<s-goods-column
+            class="goods-md-box"
+            size="md"
+            :topRadius="10"
+            :bottomRadius="10"
+            :data="item"
+						@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+						@getHeight="mountMasonry($event, 'right')"
+          >
+						<template v-slot:cart>
+							<button class="ss-reset-button cart-btn" />
+						</template>
+					</s-goods-column>
+				</view>
+			</view>
+		</view>
+		<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
+        contentdown: '上拉加载更多',
+      }" @tap="loadMore" />
+		<s-empty v-if="state.pagination.total === 0" icon="/static/soldout-empty.png" text="暂无商品" />
+	</s-layout>
+</template>
+
+<script setup>
+	import { reactive } from 'vue';
+	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+	import sheep from '@/sheep';
+	import _ from 'lodash';
+  import { resetPagination } from '@/sheep/util';
+  import SpuApi from '@/api/product/spu';
+
+	const sys_navBar = sheep.$platform.navbar;
+	const emits = defineEmits(['close', 'change']);
+
+	const state = reactive({
+		pagination: {
+			list: [],
+      total: 0,
+      pageNo: 1,
+			pageSize: 6,
+		},
+		currentSort: undefined,
+		currentOrder: undefined,
+		currentTab: 0, // 当前选中的 tab
+		curFilter: 0, // 当前选中的 list 筛选项
+		showFilter: false,
+		iconStatus: false, // true - 单列布局；false - 双列布局
+    keyword: '',
+    categoryId: 0,
+		tabList: [{
+				name: '综合推荐',
+				list: [{
+						label: '综合推荐'
+					},
+					{
+						label: '价格升序',
+						sort: 'price',
+						order: true,
+					},
+					{
+						label: '价格降序',
+						sort: 'price',
+						order: false,
+					},
+				],
+			},
+			{
+				name: '销量',
+				sort: 'salesCount',
+				order: false
+			},
+			{
+				name: '新品优先',
+				value: 'createTime',
+        order: false
+			},
+		],
+		loadStatus: '',
+		leftGoodsList: [], // 双列布局 - 左侧商品
+		rightGoodsList: [], // 双列布局 - 右侧商品
+	});
+
+	// 加载瀑布流
+	let count = 0;
+	let leftHeight = 0;
+	let rightHeight = 0;
+
+  // 处理双列布局 leftGoodsList + rightGoodsList
+	function mountMasonry(height = 0, where = 'left') {
+		if (!state.pagination.list[count]) {
+      return;
+    }
+
+		if (where === 'left') {
+			leftHeight += height;
+		} else {
+			rightHeight += height;
+		}
+		if (leftHeight <= rightHeight) {
+			state.leftGoodsList.push(state.pagination.list[count]);
+		} else {
+			state.rightGoodsList.push(state.pagination.list[count]);
+		}
+		count++;
+	}
+
+  // 清空列表
+	function emptyList() {
+    resetPagination(state.pagination);
+    state.leftGoodsList = [];
+		state.rightGoodsList = [];
+		count = 0;
+		leftHeight = 0;
+		rightHeight = 0;
+	}
+
+	// 搜索
+	function onSearch(e) {
+		state.keyword = e;
+		emptyList();
+		getList(state.currentSort, state.currentOrder);
+	}
+
+	// 点击
+	function onTabsChange(e) {
+    // 如果点击的是【综合推荐】，则直接展开或者收起筛选项
+		if (state.tabList[e.index].list) {
+			state.currentTab = e.index;
+			state.showFilter = !state.showFilter;
+			return;
+		}
+    state.showFilter = false;
+
+    // 如果点击的是【销量】或者【新品优先】，则直接切换 tab
+		if (e.index === state.currentTab) {
+			return;
+		}
+
+    state.currentTab = e.index;
+    state.currentSort = e.sort;
+    state.currentOrder = e.order;
+		emptyList();
+		getList(e.sort, e.order);
+	}
+
+	// 点击 tab 的 list 筛选项
+	const onFilterItem = (val) => {
+    // 如果点击的是当前的筛选项，则直接收起筛选项，不要加载数据
+    // 这里选择 tabList[0] 的原因，是目前只有它有 list
+		if (state.currentSort === state.tabList[0].list[val].sort
+      && state.currentOrder === state.tabList[0].list[val].order) {
+			state.showFilter = false;
+			return;
+		}
+    state.showFilter = false;
+
+    // 设置筛选条件
+		state.curFilter = val;
+		state.tabList[0].name = state.tabList[0].list[val].label;
+		state.currentSort = state.tabList[0].list[val].sort;
+		state.currentOrder = state.tabList[0].list[val].order;
+		// 清空 + 加载数据
+    emptyList();
+		getList();
+	}
+
+	async function getList() {
+		state.loadStatus = 'loading';
+		const { code, data } = await SpuApi.getSpuPage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+			sortField: state.currentSort,
+			sortAsc: state.currentOrder,
+			categoryId: state.categoryId,
+			keyword: state.keyword,
+		});
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list)
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+    mountMasonry();
+	}
+
+	// 加载更多
+	function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getList(state.currentSort, state.currentOrder);
+	}
+
+	onLoad((options) => {
+		state.categoryId = options.categoryId;
+		state.keyword = options.keyword;
+		getList(state.currentSort, state.currentOrder);
+	});
+
+	// 上拉加载更多
+	onReachBottom(() => {
+		loadMore();
+	});
+</script>
+
+<style lang="scss" scoped>
+	.goods-list-box {
+		width: 50%;
+		box-sizing: border-box;
+
+		.left-list {
+			margin-right: 10rpx;
+			margin-bottom: 20rpx;
+		}
+
+		.right-list {
+			margin-left: 10rpx;
+			margin-bottom: 20rpx;
+		}
+	}
+
+	.goods-box {
+		&:nth-last-of-type(1) {
+			margin-bottom: 0 !important;
+		}
+
+		&:nth-child(2n) {
+			margin-right: 0;
+		}
+	}
+
+	.list-icon {
+		width: 80rpx;
+
+		.sicon-goods-card {
+			font-size: 40rpx;
+		}
+
+		.sicon-goods-list {
+			font-size: 40rpx;
+		}
+	}
+
+	.goods-card {
+		margin-left: 20rpx;
+	}
+
+	.list-filter-tabs {
+		background-color: #fff;
+	}
+
+	.filter-list-box {
+		padding: 28rpx 52rpx;
+
+		.filter-item {
+			font-size: 28rpx;
+			font-weight: 500;
+			color: #333333;
+			line-height: normal;
+			margin-bottom: 24rpx;
+
+			&:nth-last-child(1) {
+				margin-bottom: 0;
+			}
+		}
+
+		.filter-item-active {
+			color: var(--ui-BG-Main);
+		}
+	}
+
+	.tab-item {
+		height: 50px;
+		position: relative;
+		z-index: 11;
+
+		.tab-title {
+			font-size: 30rpx;
+		}
+
+		.cur-tab-title {
+			font-weight: $font-weight-bold;
+		}
+
+		.tab-line {
+			width: 60rpx;
+			height: 6rpx;
+			border-radius: 6rpx;
+			position: absolute;
+			left: 50%;
+			transform: translateX(-50%);
+			bottom: 10rpx;
+			background-color: var(--ui-BG-Main);
+			z-index: 12;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/goods/seckill.vue b/pages/goods/seckill.vue
new file mode 100644
index 0000000..a1771b9
--- /dev/null
+++ b/pages/goods/seckill.vue
@@ -0,0 +1,555 @@
+<!-- 秒杀商品详情 -->
+<template>
+  <s-layout :onShareAppMessage="shareInfo" navbar="goods">
+    <!-- 标题栏 -->
+    <detailNavbar />
+    <!-- 骨架屏 -->
+    <detailSkeleton v-if="state.skeletonLoading" />
+    <!-- 下架/售罄提醒 -->
+    <s-empty
+      v-else-if="state.goodsInfo === null || state.goodsInfo.activity_type !== 'seckill'"
+      text="活动不存在或已结束"
+      icon="/static/soldout-empty.png"
+      showAction
+      actionText="再逛逛"
+      actionUrl="/pages/goods/list"
+    />
+    <block v-else>
+      <view class="detail-swiper-selector">
+        <!-- 商品图轮播 -->
+        <su-swiper
+          class="ss-m-b-14"
+          isPreview
+          :list="state.goodsSwiper"
+          dotStyle="tag"
+          imageMode="widthFix"
+          dotCur="bg-mask-40"
+          :seizeHeight="750"
+        />
+
+        <!-- 价格+标题 -->
+        <view class="title-card ss-m-y-14 ss-m-x-20 ss-p-x-20 ss-p-y-34">
+          <view class="price-box ss-flex ss-row-between ss-m-b-18">
+            <view class="ss-flex">
+              <view class="price-text ss-m-r-16">
+                {{ fen2yuan(state.selectedSku.price || state.goodsInfo.price) }}
+              </view>
+              <view class="tig ss-flex ss-col-center">
+                <view class="tig-icon ss-flex ss-col-center ss-row-center">
+                  <text class="cicon-alarm"></text>
+                </view>
+                <view class="tig-title">秒杀价</view>
+              </view>
+            </view>
+            <view class="countdown-box" v-if="endTime.ms > 0">
+              <view class="countdown-title ss-m-b-20">距结束仅剩</view>
+              <view class="ss-flex countdown-time">
+                <view class="ss-flex countdown-h">{{ endTime.h }}</view>
+                <view class="ss-m-x-4">:</view>
+                <view class="countdown-num ss-flex ss-row-center">{{ endTime.m }}</view>
+                <view class="ss-m-x-4">:</view>
+                <view class="countdown-num ss-flex ss-row-center">{{ endTime.s }}</view>
+              </view>
+            </view>
+            <view class="countdown-title" v-else> 活动已结束 </view>
+          </view>
+          <view class="ss-flex ss-row-between ss-m-b-60">
+            <view class="origin-price ss-flex ss-col-center" v-if="state.goodsInfo.marketPrice">
+              原价
+              <view class="origin-price-text">
+                {{ fen2yuan(state.selectedSku.marketPrice || state.goodsInfo.marketPrice) }}
+              </view>
+            </view>
+            <detail-progress :percent="state.percent" />
+          </view>
+
+          <view class="title-text ss-line-2 ss-m-b-6">{{ state.goodsInfo?.name }}</view>
+          <view class="subtitle-text ss-line-1">{{ state.goodsInfo.introduction }}</view>
+        </view>
+
+        <!-- 功能卡片 -->
+        <view class="detail-cell-card detail-card ss-flex-col">
+          <detail-cell-sku
+            :sku="state.selectedSku"
+            @tap="state.showSelectSku = true"
+          />
+        </view>
+        <!-- 规格与数量弹框 -->
+        <s-select-seckill-sku
+          v-model="state.goodsInfo"
+          :show="state.showSelectSku"
+          :single-limit-count="activity.singleLimitCount"
+          @buy="onBuy"
+          @change="onSkuChange"
+          @close="state.showSelectSku = false"
+        />
+      </view>
+
+      <!-- 评价 -->
+      <detail-comment-card class="detail-comment-selector" :goodsId="state.goodsInfo.id" />
+      <!-- 详情 -->
+      <detail-content-card class="detail-content-selector" :content="state.goodsInfo.description" />
+
+      <!-- 详情tabbar -->
+      <detail-tabbar v-model="state.goodsInfo">
+        <!-- TODO: 缺货中 已售罄 判断 设计-->
+        <view class="buy-box ss-flex ss-col-center ss-p-r-20">
+          <button
+            class="ss-reset-button origin-price-btn ss-flex-col"
+            v-if="state.goodsInfo.marketPrice"
+            @tap="sheep.$router.go('/pages/goods/index', { id: state.goodsInfo.id })"
+          >
+            <view>
+              <view class="btn-price">{{ fen2yuan(state.goodsInfo.marketPrice) }}</view>
+              <view>原价购买</view>
+            </view>
+          </button>
+          <button v-else class="ss-reset-button origin-price-btn ss-flex-col">
+            <view
+              class="no-original"
+              :class="state.goodsInfo.stock === 0 || timeStatusEnum !== TimeStatusEnum.STARTED ? '' : ''"
+            >
+              秒杀价
+            </view>
+          </button>
+          <button
+            class="ss-reset-button btn-box ss-flex-col"
+            @tap="state.showSelectSku = true"
+            :class="
+              timeStatusEnum === TimeStatusEnum.STARTED && state.goodsInfo.stock != 0
+                ? 'check-btn-box'
+                : 'disabled-btn-box'
+            "
+            :disabled="state.goodsInfo.stock === 0 || timeStatusEnum !== TimeStatusEnum.STARTED"
+          >
+            <view class="btn-price">{{ fen2yuan(state.goodsInfo.price) }}</view>
+            <view v-if="timeStatusEnum === TimeStatusEnum.STARTED">
+              <view v-if="state.goodsInfo.stock === 0">已售罄</view>
+              <view v-else>立即秒杀</view>
+            </view>
+            <view v-else>{{ timeStatusEnum }}</view>
+          </button>
+        </view>
+      </detail-tabbar>
+    </block>
+  </s-layout>
+</template>
+
+<script setup>
+  import {reactive, computed, ref} from 'vue';
+  import { onLoad, onPageScroll } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import {isEmpty, min} from 'lodash';
+  import {useDurationTime, formatGoodsSwiper, fen2yuan} from '@/sheep/hooks/useGoods';
+  import detailNavbar from './components/detail/detail-navbar.vue';
+  import detailCellSku from './components/detail/detail-cell-sku.vue';
+  import detailTabbar from './components/detail/detail-tabbar.vue';
+  import detailSkeleton from './components/detail/detail-skeleton.vue';
+  import detailCommentCard from './components/detail/detail-comment-card.vue';
+  import detailContentCard from './components/detail/detail-content-card.vue';
+  import detailProgress from './components/detail/detail-progress.vue';
+  import SeckillApi from "@/api/promotion/seckill";
+  import SpuApi from "@/api/product/spu";
+  import {getTimeStatusEnum, TimeStatusEnum} from "@/sheep/util/const";
+
+  const headerBg = sheep.$url.css('/static/img/shop/goods/seckill-bg.png');
+  const btnBg = sheep.$url.css('/static/img/shop/goods/seckill-btn.png');
+  const disabledBtnBg = sheep.$url.css(
+    '/static/img/shop/goods/activity-btn-disabled.png',
+  );
+  const seckillBg = sheep.$url.css('/static/img/shop/goods/seckill-tip-bg.png');
+  const grouponBg = sheep.$url.css('/static/img/shop/goods/groupon-tip-bg.png');
+
+  onPageScroll(() => {});
+  const state = reactive({
+    skeletonLoading: true,
+    goodsInfo: {},
+    showSelectSku: false,
+    goodsSwiper: [],
+    selectedSku: {},
+    showModel: false,
+    total: 0,
+    percent: 0,
+    price: '',
+  });
+
+  const endTime = computed(() => {
+    return useDurationTime(activity.value.endTime);
+  });
+
+  // 规格变更
+  function onSkuChange(e) {
+    state.selectedSku = e;
+  }
+
+  // 立即购买
+  function onBuy(sku) {
+    sheep.$router.go('/pages/order/confirm', {
+      data: JSON.stringify({
+        order_type: 'goods',
+        buy_type: 'seckill',
+        seckillActivityId: activity.value.id,
+        items: [
+          {
+            skuId: sku.id,
+            count: sku.count,
+          },
+        ],
+      }),
+    });
+  }
+
+  // 分享信息 TODO 芋艿：待接入
+  const shareInfo = computed(() => {
+    if (isEmpty(activity)) return {};
+    return sheep.$platform.share.getShareInfo(
+      {
+        title: activity.value.name,
+        image: sheep.$url.cdn(state.goodsInfo.picUrl),
+        params: {
+          page: '4',
+          query: activity.value.id,
+        },
+      },
+      {
+        type: 'goods', // 商品海报
+        title: activity.value.name, // 商品标题
+        image: sheep.$url.cdn(state.goodsInfo.picUrl), // 商品主图
+        price: state.goodsInfo.price, // 商品价格
+        marketPrice: state.goodsInfo.marketPrice, // 商品原价
+      },
+    );
+  });
+
+  const activity = ref()
+  const timeStatusEnum = ref('')
+  // 查询活动
+  const getActivity = async (id) => {
+    const { data } = await SeckillApi.getSeckillActivity(id)
+    activity.value = data
+    timeStatusEnum.value = getTimeStatusEnum(activity.startTime, activity.endTime)
+
+    // 查询商品
+    await getSpu(data.spuId)
+  }
+
+  const getSpu = async (id) => {
+    const { data } = await SpuApi.getSpuDetail(id)
+    // 模拟
+    data.activity_type = 'seckill'
+    state.goodsInfo = data
+    // 处理轮播图
+    state.goodsSwiper = formatGoodsSwiper(state.goodsInfo.sliderPicUrls);
+
+    // 默认显示最低价
+    state.goodsInfo.price = min([state.goodsInfo.price, ...activity.value.products.map(spu => spu.seckillPrice)])
+
+    // 价格、库存使用活动的
+    data.skus.forEach(sku => {
+      const product = activity.value.products.find(product => product.skuId === sku.id);
+      if (product) {
+        sku.price = product.seckillPrice;
+        sku.stock = Math.min(sku.stock, product.stock);
+      } else { // 找不到可能是没配置，则不能发起秒杀
+        sku.stock = 0;
+      }
+      // 设置限购数量
+      if (activity.value.totalLimitCount > 0 && activity.value.singleLimitCount > 0) {
+        sku.limitCount = Math.min(activity.value.totalLimitCount, activity.value.singleLimitCount);
+      } else if (activity.value.totalLimitCount > 0) {
+        sku.limitCount = activity.value.totalLimitCount;
+      } else if (activity.value.singleLimitCount > 0) {
+        sku.limitCount = activity.value.singleLimitCount;
+      }
+    });
+
+    state.skeletonLoading = false;
+  }
+
+  onLoad((options) => {
+    // 非法参数
+    if (!options.id) {
+      state.goodsInfo = null;
+      return;
+    }
+
+    // 查询活动
+    getActivity(options.id)
+  });
+</script>
+
+<style lang="scss" scoped>
+  .disabled-btn-box[disabled] {
+    background-color: transparent;
+  }
+  .detail-card {
+    background-color: $white;
+    margin: 14rpx 20rpx;
+    border-radius: 10rpx;
+    overflow: hidden;
+  }
+
+  // 价格标题卡片
+  .title-card {
+    width: 710rpx;
+    box-sizing: border-box;
+    // height: 320rpx;
+    background-size: 100% 100%;
+    border-radius: 10rpx;
+    background-image: v-bind(headerBg);
+    background-repeat: no-repeat;
+
+    .price-box {
+      .price-text {
+        font-size: 30rpx;
+        font-weight: 500;
+        color: #fff;
+        line-height: normal;
+        font-family: OPPOSANS;
+
+        &::before {
+          content: '￥';
+          font-size: 30rpx;
+        }
+      }
+    }
+
+    .origin-price {
+      font-size: 24rpx;
+      font-weight: 400;
+      color: #fff;
+      opacity: 0.7;
+
+      .origin-price-text {
+        text-decoration: line-through;
+
+        font-family: OPPOSANS;
+
+        &::before {
+          content: '￥';
+        }
+      }
+    }
+
+    .tig {
+      border: 2rpx solid #ffffff;
+      border-radius: 4rpx;
+      width: 126rpx;
+      height: 38rpx;
+
+      .tig-icon {
+        width: 40rpx;
+        height: 40rpx;
+        margin-left: -2rpx;
+        background: #ffffff;
+        border-radius: 4rpx 0 0 4rpx;
+
+        .cicon-alarm {
+          font-size: 32rpx;
+          color: #fc6e6f;
+        }
+      }
+
+      .tig-title {
+        width: 86rpx;
+        font-size: 24rpx;
+        font-weight: 500;
+        line-height: normal;
+        color: #ffffff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+
+    .countdown-title {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ffffff;
+    }
+
+    .countdown-time {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ffffff;
+      .countdown-h {
+        font-size: 24rpx;
+        font-family: OPPOSANS;
+        font-weight: 500;
+        color: #ffffff;
+        padding: 0 4rpx;
+        height: 40rpx;
+        background: rgba(#000000, 0.1);
+        border-radius: 6rpx;
+      }
+      .countdown-num {
+        font-size: 24rpx;
+        font-family: OPPOSANS;
+        font-weight: 500;
+        color: #ffffff;
+        width: 40rpx;
+        height: 40rpx;
+        background: rgba(#000000, 0.1);
+        border-radius: 6rpx;
+      }
+    }
+
+    .discounts-box {
+      .discounts-tag {
+        padding: 4rpx 10rpx;
+        font-size: 24rpx;
+        font-weight: 500;
+        border-radius: 4rpx;
+        color: var(--ui-BG-Main);
+        // background: rgba(#2aae67, 0.05);
+        background: var(--ui-BG-Main-tag);
+      }
+
+      .discounts-title {
+        font-size: 24rpx;
+        font-weight: 500;
+        color: var(--ui-BG-Main);
+        line-height: normal;
+      }
+
+      .cicon-forward {
+        color: var(--ui-BG-Main);
+        font-size: 24rpx;
+        line-height: normal;
+        margin-top: 4rpx;
+      }
+    }
+
+    .title-text {
+      font-size: 30rpx;
+      font-weight: bold;
+      line-height: 42rpx;
+      color: #fff;
+    }
+
+    .subtitle-text {
+      font-size: 26rpx;
+      font-weight: 400;
+      color: #ffffff;
+      line-height: 42rpx;
+      opacity: 0.9;
+    }
+  }
+
+  // 购买
+  .buy-box {
+    .check-btn-box {
+      width: 248rpx;
+      height: 80rpx;
+      font-size: 24rpx;
+      font-weight: 600;
+      margin-left: -36rpx;
+      background-image: v-bind(btnBg);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      color: #ffffff;
+      line-height: normal;
+      border-radius: 0px 40rpx 40rpx 0px;
+    }
+
+    .disabled-btn-box {
+      width: 248rpx;
+      height: 80rpx;
+      font-size: 24rpx;
+      font-weight: 600;
+      margin-left: -36rpx;
+      background-image: v-bind(disabledBtnBg);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      color: #999999;
+      line-height: normal;
+      border-radius: 0px 40rpx 40rpx 0px;
+    }
+    .btn-price {
+      font-family: OPPOSANS;
+
+      &::before {
+        content: '￥';
+      }
+    }
+
+    .origin-price-btn {
+      width: 236rpx;
+      height: 80rpx;
+      background: rgba(#ff5651, 0.1);
+      color: #ff6000;
+      border-radius: 40rpx 0px 0px 40rpx;
+      line-height: normal;
+      font-size: 24rpx;
+      font-weight: 500;
+      .no-original {
+        font-size: 28rpx;
+      }
+
+      .btn-title {
+        font-size: 28rpx;
+      }
+    }
+  }
+
+  //秒杀卡片
+  .seckill-box {
+    background: v-bind(seckillBg) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .groupon-box {
+    background: v-bind(grouponBg) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  //活动卡片
+  .activity-box {
+    width: 100%;
+    height: 80rpx;
+    box-sizing: border-box;
+    margin-bottom: 10rpx;
+
+    .activity-title {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 42rpx;
+
+      .activity-icon {
+        width: 38rpx;
+        height: 38rpx;
+      }
+    }
+
+    .activity-go {
+      width: 70rpx;
+      height: 32rpx;
+      background: #ffffff;
+      border-radius: 16rpx;
+      font-weight: 500;
+      color: #ff6000;
+      font-size: 24rpx;
+      line-height: normal;
+    }
+  }
+
+  .model-box {
+    .title {
+      font-size: 36rpx;
+      font-weight: bold;
+      color: #333333;
+    }
+
+    .subtitle {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #333333;
+    }
+  }
+
+  image {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/pages/index/cart.vue b/pages/index/cart.vue
new file mode 100644
index 0000000..ae90777
--- /dev/null
+++ b/pages/index/cart.vue
@@ -0,0 +1,196 @@
+<template>
+	<s-layout title="购物车" tabbar="/pages/index/cart" :bgStyle="{ color: '#fff' }">
+		<s-empty v-if="state.list.length === 0" text="购物车空空如也,快去逛逛吧~" icon="/static/cart-empty.png" />
+
+		<!-- 头部 -->
+		<view class="cart-box ss-flex ss-flex-col ss-row-between" v-if="state.list.length">
+			<view class="cart-header ss-flex ss-col-center ss-row-between ss-p-x-30">
+				<view class="header-left ss-flex ss-col-center ss-font-26">
+					共
+					<text class="goods-number ui-TC-Main ss-flex">{{ state.list.length }}</text>
+					件商品
+				</view>
+				<view class="header-right">
+					<button v-if="state.editMode" class="ss-reset-button" @tap="state.editMode = false">
+						取消
+					</button>
+					<button v-else class="ss-reset-button ui-TC-Main" @tap="state.editMode = true">
+						编辑
+					</button>
+				</view>
+			</view>
+			<!-- 内容 -->
+			<view class="cart-content ss-flex-1 ss-p-x-30 ss-m-b-40">
+				<view class="goods-box ss-r-10 ss-m-b-14" v-for="item in state.list" :key="item.id">
+					<view class="ss-flex ss-col-center">
+						<label class="check-box ss-flex ss-col-center ss-p-l-10" @tap="onSelectSingle(item.id)">
+							<radio :checked="state.selectedIds.includes(item.id)" color="var(--ui-BG-Main)"
+								style="transform: scale(0.8)" @tap.stop="onSelectSingle(item.id)" />
+						</label>
+						<s-goods-item :title="item.spu.name" :img="item.spu.picUrl || item.goods.image"
+							:price="item.sku.price"
+							:skuText="item.sku.properties.length>1? item.sku.properties.reduce((items2,items)=>items2.valueName+' '+items.valueName):item.sku.properties[0].valueName"
+							priceColor="#FF3000" :titleWidth="400">
+							<template v-if="!state.editMode" v-slot:tool>
+								<su-number-box :min="0" :max="item.sku.stock" :step="1" v-model="item.count" @change="onNumberChange($event, item)" />
+							</template>
+						</s-goods-item>
+					</view>
+				</view>
+			</view>
+			<!-- 底部 -->
+			<su-fixed bottom :val="48" placeholder v-if="state.list.length > 0" :isInset="false">
+				<view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom">
+					<view class="footer-left ss-flex ss-col-center">
+						<label class="check-box ss-flex ss-col-center ss-p-r-30" @tap="onSelectAll">
+							<radio :checked="state.isAllSelected" color="var(--ui-BG-Main)"
+								style="transform: scale(0.8)" @tap.stop="onSelectAll" />
+							<view class="ss-m-l-8"> 全选 </view>
+						</label>
+						<text>合计：</text>
+						<view class="text-price price-text">
+							{{ fen2yuan(state.totalPriceSelected) }}
+						</view>
+					</view>
+					<view class="footer-right">
+						<button v-if="state.editMode" class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main"
+							@tap="onDelete">
+							删除
+						</button>
+						<button v-else class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main"
+							@tap="onConfirm">
+							去结算
+							{{ state.selectedIds?.length ? `(${state.selectedIds.length})` : '' }}
+						</button>
+					</view>
+				</view>
+			</su-fixed>
+		</view>
+	</s-layout>
+</template>
+
+<script setup>
+	import sheep from '@/sheep';
+	import { computed, reactive } from 'vue';
+  import { fen2yuan } from '../../sheep/hooks/useGoods';
+
+	const sys_navBar = sheep.$platform.navbar;
+	const cart = sheep.$store('cart');
+
+	const state = reactive({
+		editMode: false,
+		list: computed(() => cart.list),
+		selectedList: [],
+		selectedIds: computed(() => cart.selectedIds),
+		isAllSelected: computed(() => cart.isAllSelected),
+		totalPriceSelected: computed(() => cart.totalPriceSelected),
+	});
+
+	// 单选选中
+	function onSelectSingle(id) {
+		cart.selectSingle(id);
+	}
+
+  // 全选
+	function onSelectAll() {
+		cart.selectAll(!state.isAllSelected);
+	}
+
+	// 结算
+	function onConfirm() {
+		let items = []
+		let goods_list = [];
+		state.selectedList = state.list.filter((item) => state.selectedIds.includes(item.id));
+		state.selectedList.map((item) => {
+			// 此处前端做出修改
+			items.push({
+				skuId: item.sku.id,
+				count: item.count,
+				cartId: item.id,
+			})
+			goods_list.push({
+				// goods_id: item.goods_id,
+				goods_id: item.spu.id,
+				// goods_num: item.goods_num,
+				goods_num: item.count,
+				// 商品价格id真没有
+				// goods_sku_price_id: item.goods_sku_price_id,
+			});
+		});
+		// return;
+		if (goods_list.length === 0) {
+			sheep.$helper.toast('请选择商品');
+			return;
+		}
+		sheep.$router.go('/pages/order/confirm', {
+			data: JSON.stringify({
+				// order_type: 'goods',
+				// goods_list,
+				items,
+				// from: 'cart',
+				deliveryType: 1,
+				pointStatus: false,
+			}),
+		});
+	}
+
+	function onNumberChange(e, cartItem) {
+		if (e === 0) {
+			cart.delete(cartItem.id);
+			return;
+		}
+		if (cartItem.goods_num === e) return;
+		cartItem.goods_num = e;
+		cart.update({
+			goods_id: cartItem.id,
+			goods_num: e,
+			goods_sku_price_id: cartItem.goods_sku_price_id,
+		});
+	}
+	async function onDelete() {
+		cart.delete(state.selectedIds);
+	}
+</script>
+
+<style lang="scss" scoped>
+	:deep(.ui-fixed) {
+		height: 72rpx;
+	}
+
+	.cart-box {
+		width: 100%;
+
+		.cart-header {
+			height: 70rpx;
+			background-color: #f6f6f6;
+			width: 100%;
+			position: fixed;
+			left: 0;
+			top: v-bind('sys_navBar') rpx;
+			z-index: 1000;
+			box-sizing: border-box;
+		}
+
+		.cart-footer {
+			height: 100rpx;
+			background-color: #fff;
+
+			.pay-btn {
+				width: 180rpx;
+				height: 70rpx;
+				font-size: 28rpx;
+				line-height: 28rpx;
+				font-weight: 500;
+				border-radius: 40rpx;
+			}
+		}
+
+		.cart-content {
+			margin-top: 70rpx;
+
+			.goods-box {
+				background-color: #fff;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/index/category.vue b/pages/index/category.vue
new file mode 100644
index 0000000..c02f1ff
--- /dev/null
+++ b/pages/index/category.vue
@@ -0,0 +1,236 @@
+<!-- 商品分类列表 -->
+<template>
+  <s-layout title="分类" tabbar="/pages/index/category" :bgStyle="{ color: '#fff' }">
+    <view class="s-category">
+      <view class="three-level-wrap ss-flex ss-col-top" :style="[{ height: pageHeight + 'px' }]">
+        <!-- 商品分类（左） -->
+        <scroll-view class="side-menu-wrap" scroll-y :style="[{ height: pageHeight + 'px' }]">
+          <view
+            class="menu-item ss-flex"
+            v-for="(item, index) in state.categoryList"
+            :key="item.id"
+            :class="[{ 'menu-item-active': index === state.activeMenu }]"
+            @tap="onMenu(index)"
+          >
+            <view class="menu-title ss-line-1">
+              {{ item.name }}
+            </view>
+          </view>
+        </scroll-view>
+        <!-- 商品分类（右） -->
+        <scroll-view
+          class="goods-list-box"
+          scroll-y
+          :style="[{ height: pageHeight + 'px' }]"
+          v-if="state.categoryList?.length"
+        >
+          <image
+            v-if="state.categoryList[state.activeMenu].picUrl"
+            class="banner-img"
+            :src="sheep.$url.cdn(state.categoryList[state.activeMenu].picUrl)"
+            mode="widthFix"
+          />
+          <first-one v-if="state.style === 'first_one'" :pagination="state.pagination" />
+          <first-two v-if="state.style === 'first_two'" :pagination="state.pagination" />
+          <second-one
+            v-if="state.style === 'second_one'"
+            :data="state.categoryList"
+            :activeMenu="state.activeMenu"
+          />
+          <uni-load-more
+            v-if="
+              (state.style === 'first_one' || state.style === 'first_two') &&
+              state.pagination.total > 0
+            "
+            :status="state.loadStatus"
+            :content-text="{
+              contentdown: '点击查看更多',
+            }"
+            @tap="loadMore"
+          />
+        </scroll-view>
+      </view>
+    </view>
+  </s-layout>
+</template>
+
+<script setup>
+  import secondOne from './components/second-one.vue';
+  import firstOne from './components/first-one.vue';
+  import firstTwo from './components/first-two.vue';
+  import sheep from '@/sheep';
+  import CategoryApi from '@/api/product/category';
+  import SpuApi from '@/api/product/spu';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import { computed, reactive } from 'vue';
+  import _ from 'lodash';
+  import { handleTree } from '@/sheep/util';
+
+  const state = reactive({
+    style: 'second_one', // first_one（一级 - 样式一）, first_two（二级 - 样式二）, second_one（二级）
+    categoryList: [], // 商品分类树
+    activeMenu: 0, // 选中的一级菜单，在 categoryList 的下标
+
+    pagination: {
+      // 商品分页
+      list: [], // 商品列表
+      total: [], // 商品总数
+      pageNo: 1,
+      pageSize: 6,
+    },
+    loadStatus: '',
+  });
+
+  const { safeArea } = sheep.$platform.device;
+  const pageHeight = computed(() => safeArea.height - 44 - 50);
+
+  // 加载商品分类
+  async function getList() {
+    const { code, data } = await CategoryApi.getCategoryList();
+    if (code !== 0) {
+      return;
+    }
+    state.categoryList = handleTree(data);
+  }
+
+  // 选中菜单
+  const onMenu = (val) => {
+    state.activeMenu = val;
+    if (state.style === 'first_one' || state.style === 'first_two') {
+      state.pagination.pageNo = 1;
+      state.pagination.list = [];
+      state.pagination.total = 0;
+      getGoodsList();
+    }
+  };
+
+  // 加载商品列表
+  async function getGoodsList() {
+    // 加载列表
+    state.loadStatus = 'loading';
+    const res = await SpuApi.getSpuPage({
+      categoryId: state.categoryList[state.activeMenu].id,
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+    });
+    if (res.code !== 0) {
+      return;
+    }
+    // 合并列表
+    state.pagination.list = _.concat(state.pagination.list, res.data.list);
+    state.pagination.total = res.data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  // 加载更多商品
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getGoodsList();
+  }
+
+  onLoad(async () => {
+    await getList();
+    // 如果是 first 风格，需要加载商品分页
+    if (state.style === 'first_one' || state.style === 'first_two') {
+      onMenu(0);
+    }
+  });
+
+  onReachBottom(() => {
+    loadMore();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .s-category {
+    :deep() {
+      .side-menu-wrap {
+        width: 200rpx;
+        height: 100%;
+        padding-left: 12rpx;
+        background-color: #f6f6f6;
+
+        .menu-item {
+          width: 100%;
+          height: 88rpx;
+          position: relative;
+          transition: all linear 0.2s;
+
+          .menu-title {
+            line-height: 32rpx;
+            font-size: 30rpx;
+            font-weight: 400;
+            color: #333;
+            margin-left: 28rpx;
+            position: relative;
+            z-index: 0;
+
+            &::before {
+              content: '';
+              width: 64rpx;
+              height: 12rpx;
+              background: linear-gradient(
+                90deg,
+                var(--ui-BG-Main-gradient),
+                var(--ui-BG-Main-light)
+              ) !important;
+              position: absolute;
+              left: -64rpx;
+              bottom: 0;
+              z-index: -1;
+              transition: all linear 0.2s;
+            }
+          }
+
+          &.menu-item-active {
+            background-color: #fff;
+            border-radius: 20rpx 0 0 20rpx;
+
+            &::before {
+              content: '';
+              position: absolute;
+              right: 0;
+              bottom: -20rpx;
+              width: 20rpx;
+              height: 20rpx;
+              background: radial-gradient(circle at 0 100%, transparent 20rpx, #fff 0);
+            }
+
+            &::after {
+              content: '';
+              position: absolute;
+              top: -20rpx;
+              right: 0;
+              width: 20rpx;
+              height: 20rpx;
+              background: radial-gradient(circle at 0% 0%, transparent 20rpx, #fff 0);
+            }
+
+            .menu-title {
+              font-weight: 600;
+
+              &::before {
+                left: 0;
+              }
+            }
+          }
+        }
+      }
+
+      .goods-list-box {
+        background-color: #fff;
+        width: calc(100vw - 100px);
+        padding: 10px;
+      }
+
+      .banner-img {
+        width: calc(100vw - 130px);
+        border-radius: 5px;
+        margin-bottom: 20rpx;
+      }
+    }
+  }
+</style>
diff --git a/pages/index/components/first-one.vue b/pages/index/components/first-one.vue
new file mode 100644
index 0000000..2decc86
--- /dev/null
+++ b/pages/index/components/first-one.vue
@@ -0,0 +1,26 @@
+<!-- 分类展示：first-one 风格  -->
+<template>
+  <view class="ss-flex-col">
+    <view class="goods-box" v-for="item in pagination.list" :key="item.id">
+      <s-goods-column
+        size="sl"
+        :data="item"
+        @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+      />
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+
+  const props = defineProps({
+    pagination: Object,
+  });
+</script>
+
+<style lang="scss" scoped>
+  .goods-box {
+    width: 100%;
+  }
+</style>
diff --git a/pages/index/components/first-two.vue b/pages/index/components/first-two.vue
new file mode 100644
index 0000000..482931c
--- /dev/null
+++ b/pages/index/components/first-two.vue
@@ -0,0 +1,66 @@
+<!-- 分类展示：first-two 风格  -->
+<template>
+  <view>
+    <view class="ss-flex flex-wrap">
+      <view class="goods-box" v-for="item in pagination?.list" :key="item.id">
+        <view @click="sheep.$router.go('/pages/goods/index', { id: item.id })">
+          <view class="goods-img">
+            <image class="goods-img" :src="item.picUrl" mode="aspectFit" />
+          </view>
+          <view class="goods-content">
+            <view class="goods-title ss-line-1 ss-m-b-28">{{ item.title }}</view>
+            <view class="goods-price">￥{{ fen2yuan(item.price) }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
+
+  const props = defineProps({
+    pagination: Object,
+  });
+</script>
+
+<style lang="scss" scoped>
+  .goods-box {
+    width: calc((100% - 20rpx) / 2);
+    margin-bottom: 20rpx;
+
+    .goods-img {
+      width: 100%;
+      height: 246rpx;
+      border-radius: 10rpx 10rpx 0px 0px;
+    }
+
+    .goods-content {
+      width: 100%;
+      background: #ffffff;
+      box-shadow: 0px 0px 20rpx 4rpx rgba(199, 199, 199, 0.22);
+      padding: 20rpx 0 32rpx 16rpx;
+      box-sizing: border-box;
+      border-radius: 0 0 10rpx 10rpx;
+
+      .goods-title {
+        font-size: 26rpx;
+        font-weight: bold;
+        color: #333333;
+      }
+
+      .goods-price {
+        font-size: 24rpx;
+        font-family: OPPOSANS;
+        font-weight: 500;
+        color: #e1212b;
+      }
+    }
+
+    &:nth-child(2n + 1) {
+      margin-right: 20rpx;
+    }
+  }
+</style>
diff --git a/pages/index/components/second-one.vue b/pages/index/components/second-one.vue
new file mode 100644
index 0000000..86b7078
--- /dev/null
+++ b/pages/index/components/second-one.vue
@@ -0,0 +1,80 @@
+<!-- 分类展示：second-one 风格  -->
+<template>
+  <view>
+    <!-- 一级分类的名字 -->
+    <view class="title-box ss-flex ss-col-center ss-row-center ss-p-b-30">
+      <view class="title-line-left" />
+      <view class="title-text ss-p-x-20">{{ props.data[activeMenu].name }}</view>
+      <view class="title-line-right" />
+    </view>
+    <!-- 二级分类的名字 -->
+    <view class="goods-item-box ss-flex ss-flex-wrap ss-p-b-20">
+      <view
+        class="goods-item"
+        v-for="item in props.data[activeMenu].children"
+        :key="item.id"
+        @tap="
+          sheep.$router.go('/pages/goods/list', {
+            categoryId: item.id,
+          })
+        "
+      >
+        <image class="goods-img" :src="item.picUrl" mode="aspectFill" />
+        <view class="ss-p-10">
+          <view class="goods-title ss-line-1">{{ item.name }}</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    activeMenu: [Number, String],
+  });
+</script>
+
+<style lang="scss" scoped>
+  .title-box {
+    .title-line-left,
+    .title-line-right {
+      width: 15px;
+      height: 1px;
+      background: #d2d2d2;
+    }
+  }
+
+  .goods-item {
+    width: calc((100% - 20px) / 3);
+    margin-right: 10px;
+    margin-bottom: 10px;
+
+    &:nth-of-type(3n) {
+      margin-right: 0;
+    }
+
+    .goods-img {
+      width: calc((100vw - 140px) / 3);
+      height: calc((100vw - 140px) / 3);
+    }
+
+    .goods-title {
+      font-size: 26rpx;
+      font-weight: bold;
+      color: #333333;
+      line-height: 40rpx;
+      text-align: center;
+    }
+
+    .goods-price {
+      color: $red;
+      line-height: 40rpx;
+    }
+  }
+</style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
new file mode 100644
index 0000000..bde6bac
--- /dev/null
+++ b/pages/index/index.vue
@@ -0,0 +1,91 @@
+<!-- 首页，支持店铺装修 -->
+<template>
+  <view v-if="template">
+    <s-layout
+      title="首页"
+      navbar="custom"
+      tabbar="/pages/index/index"
+      :bgStyle="template.page"
+      :navbarStyle="template.navigationBar"
+      onShareAppMessage
+    >
+      <s-block
+        v-for="(item, index) in template.components"
+        :key="index"
+        :styles="item.property.style"
+      >
+        <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
+      </s-block>
+    </s-layout>
+  </view>
+</template>
+
+<script setup>
+  import { computed } from 'vue';
+  import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import $share from '@/sheep/platform/share';
+  // 隐藏原生tabBar
+  uni.hideTabBar();
+
+  const template = computed(() => sheep.$store('app').template?.home);
+  // 在此处拦截改变一下首页轮播图 此处先写死后期复活 放到启动函数里
+  // (async function() {
+  // console.log('原代码首页定制化数据',template)
+  // let {
+  // 	data
+  // } = await index2Api.decorate();
+  // console.log('首页导航配置化过高无法兼容',JSON.parse(data[1].value))
+  // 改变首页底部数据 但是没有通过数组id获取商品数据接口
+  // let {
+  // 	data: datas
+  // } = await index2Api.spids();
+  // template.value.data[9].data.goodsIds = datas.list.map(item => item.id);
+  // template.value.data[0].data.list = JSON.parse(data[0].value).map(item => {
+  // 	return {
+  // 		src: item.picUrl,
+  // 		url: item.url,
+  // 		title: item.name,
+  // 		type: "image"
+  // 	}
+  // })
+  // }())
+
+  onLoad((options) => {
+    // #ifdef MP
+    // 小程序识别二维码
+    if (options.scene) {
+      const sceneParams = decodeURIComponent(options.scene).split('=');
+      console.log('sceneParams=>', sceneParams);
+      options[sceneParams[0]] = sceneParams[1];
+    }
+    // #endif
+
+    // 预览模板
+    if (options.templateId) {
+      sheep.$store('app').init(options.templateId);
+    }
+
+    // 解析分享信息
+    if (options.spm) {
+      $share.decryptSpm(options.spm);
+    }
+
+    // 进入指定页面(完整页面路径)
+    if (options.page) {
+      sheep.$router.go(decodeURIComponent(options.page));
+    }
+  });
+
+  // 下拉刷新
+  onPullDownRefresh(() => {
+    sheep.$store('app').init();
+    setTimeout(function () {
+      uni.stopPullDownRefresh();
+    }, 800);
+  });
+
+  onPageScroll(() => {});
+</script>
+
+<style></style>
diff --git a/pages/index/login.vue b/pages/index/login.vue
new file mode 100644
index 0000000..b2c82a4
--- /dev/null
+++ b/pages/index/login.vue
@@ -0,0 +1,38 @@
+<!-- 微信公众号的登录回调页 -->
+<template>
+  <!-- 空登陆页 -->
+  <view />
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad } from '@dcloudio/uni-app';
+
+  onLoad(async (options) => {
+    // #ifdef H5
+    // 将 search 参数赋值到 options 中，方便下面解析
+    new URLSearchParams(location.search).forEach((value, key) => {
+      options[key] = value;
+    });
+    const event = options.event;
+    const code = options.code;
+    const state = options.state;
+    if (event === 'login') { // 场景一：登录
+      const res = await sheep.$platform.useProvider().login(code, state);
+    } else if (event === 'bind') { // 场景二：绑定
+      sheep.$platform.useProvider().bind(code, state);
+    }
+
+    // 检测 H5 登录回调
+    let returnUrl = uni.getStorageSync('returnUrl');
+    if (returnUrl) {
+      uni.removeStorage({key:'returnUrl'});
+      location.replace(returnUrl);
+    } else {
+      uni.switchTab({
+        url: '/',
+      });
+    }
+    // #endif
+  });
+</script>
diff --git a/pages/index/page.vue b/pages/index/page.vue
new file mode 100644
index 0000000..f4cde7f
--- /dev/null
+++ b/pages/index/page.vue
@@ -0,0 +1,51 @@
+<!-- 自定义页面：支持装修 -->
+<template>
+  <s-layout
+    :title="state.name"
+    navbar="custom"
+    :bgStyle="state.page"
+    :navbarStyle="state.navigationBar"
+    onShareAppMessage
+    showLeftButton
+  >
+    <s-block v-for="(item, index) in state.components" :key="index" :styles="item.property.style">
+      <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
+    </s-block>
+  </s-layout>
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+  import { onLoad, onPageScroll } from '@dcloudio/uni-app';
+  import DiyApi from '@/api/promotion/diy';
+
+  const state = reactive({
+    name: '',
+    components: [],
+    navigationBar: {},
+    page: {},
+  });
+  onLoad(async (options) => {
+    let id = options.id
+
+    // #ifdef MP
+    // 小程序预览自定义页面
+    if (options.scene) {
+      const sceneParams = decodeURIComponent(options.scene).split('=');
+      id = sceneParams[1];
+    }
+    // #endif
+
+    const { code, data } = await DiyApi.getDiyPage(id);
+    if (code === 0) {
+      state.name = data.name;
+      state.components = data.property?.components;
+      state.navigationBar = data.property?.navigationBar;
+      state.page = data.property?.page;
+    }
+  });
+
+  onPageScroll(() => {});
+</script>
+
+<style></style>
diff --git a/pages/index/search.vue b/pages/index/search.vue
new file mode 100644
index 0000000..8497298
--- /dev/null
+++ b/pages/index/search.vue
@@ -0,0 +1,119 @@
+<!-- 搜索界面 -->
+<template>
+  <s-layout class="set-wrap" title="搜索" :bgStyle="{ color: '#FFF' }">
+    <view class="ss-p-x-24">
+      <view class="ss-flex ss-col-center">
+        <uni-search-bar
+          class="ss-flex-1"
+          radius="33"
+          placeholder="请输入关键字"
+          cancelButton="none"
+          :focus="true"
+          @confirm="onSearch($event.value)"
+        />
+      </view>
+      <view class="ss-flex ss-row-between ss-col-center">
+        <view class="serach-history">搜索历史</view>
+        <button class="clean-history ss-reset-button" @tap="onDelete"> 清除搜索历史 </button>
+      </view>
+      <view class="ss-flex ss-col-center ss-row-left ss-flex-wrap">
+        <button
+          class="history-btn ss-reset-button"
+          @tap="onSearch(item)"
+          v-for="(item, index) in state.historyList"
+          :key="index"
+        >
+          {{ item }}
+        </button>
+      </view>
+    </view>
+  </s-layout>
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+  import sheep from '@/sheep';
+  import { onLoad } from '@dcloudio/uni-app';
+
+  const state = reactive({
+    historyList: [],
+  });
+
+  // 搜索
+  function onSearch(keyword) {
+    if (!keyword) {
+      return;
+    }
+    saveSearchHistory(keyword);
+    // 前往商品列表（带搜索条件）
+    sheep.$router.go('/pages/goods/list', { keyword });
+  }
+
+  // 保存搜索历史
+  function saveSearchHistory(keyword) {
+    // 如果关键词在搜索历史中，则把此关键词先移除
+    if (state.historyList.includes(keyword)) {
+      state.historyList.splice(state.historyList.indexOf(keyword), 1);
+    }
+    // 置顶关键词
+    state.historyList.unshift(keyword);
+
+    // 最多保留 10 条记录
+    if (state.historyList.length >= 10) {
+      state.historyList.length = 10;
+    }
+    uni.setStorageSync('searchHistory', state.historyList);
+  }
+
+  function onDelete() {
+    uni.showModal({
+      title: '提示',
+      content: '确认清除搜索历史吗？',
+      success: function (res) {
+        if (res.confirm) {
+          state.historyTag = [];
+          uni.removeStorageSync('searchHistory');
+        }
+      },
+    });
+  }
+
+  onLoad(() => {
+    state.historyList = uni.getStorageSync('searchHistory') || [];
+  });
+</script>
+
+<style lang="scss" scoped>
+  .serach-title {
+    font-size: 30rpx;
+    font-weight: 500;
+    color: #333333;
+  }
+
+  .uni-searchbar {
+    padding-left: 0;
+  }
+
+  .serach-history {
+    font-weight: bold;
+    color: #333333;
+    font-size: 30rpx;
+  }
+
+  .clean-history {
+    font-weight: 500;
+    color: #999999;
+    font-size: 28rpx;
+  }
+
+  .history-btn {
+    padding: 0 38rpx;
+    height: 60rpx;
+    background: #f5f6f8;
+    border-radius: 30rpx;
+    font-size: 28rpx;
+    color: #333333;
+    max-width: 690rpx;
+    margin: 0 20rpx 20rpx 0;
+  }
+</style>
diff --git a/pages/index/user.vue b/pages/index/user.vue
new file mode 100644
index 0000000..705451a
--- /dev/null
+++ b/pages/index/user.vue
@@ -0,0 +1,42 @@
+<!-- 个人中心：支持装修 -->
+<template>
+  <s-layout
+    title="我的"
+    tabbar="/pages/index/user"
+    navbar="custom"
+    :bgStyle="template.page"
+    :navbarStyle="template.navigationBar"
+    onShareAppMessage
+  >
+    <s-block v-for="(item, index) in template.components" :key="index" :styles="item.property.style">
+      <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
+    </s-block>
+  </s-layout>
+</template>
+
+<script setup>
+  import { computed } from 'vue';
+  import { onShow, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+
+  // 隐藏原生tabBar
+  uni.hideTabBar();
+
+  const template = computed(() => sheep.$store('app').template.user);
+  const isLogin = computed(() => sheep.$store('user').isLogin);
+
+  onShow(() => {
+    sheep.$store('user').updateUserData();
+  });
+
+  onPullDownRefresh(() => {
+    sheep.$store('user').updateUserData();
+    setTimeout(function () {
+      uni.stopPullDownRefresh();
+    }, 800);
+  });
+
+  onPageScroll(() => {});
+</script>
+
+<style></style>
diff --git a/pages/order/aftersale/apply.vue b/pages/order/aftersale/apply.vue
new file mode 100644
index 0000000..8914512
--- /dev/null
+++ b/pages/order/aftersale/apply.vue
@@ -0,0 +1,357 @@
+<!-- 售后申请 -->
+<template>
+  <s-layout title="申请售后">
+    <!-- 售后商品 -->
+    <view class="goods-box">
+      <s-goods-item
+        :img="state.item.picUrl"
+        :title="state.item.spuName"
+        :skuText="state.item.properties?.map((property) => property.valueName).join(' ')"
+        :price="state.item.price"
+        :num="state.item.count"
+      />
+    </view>
+
+    <uni-forms ref="form" v-model="formData" :rules="rules" label-position="top">
+      <!-- 售后类型 -->
+      <view class="refund-item">
+        <view class="item-title ss-m-b-20">售后类型</view>
+        <view class="ss-flex-col">
+          <radio-group @change="onRefundChange">
+            <label
+              class="ss-flex ss-col-center ss-p-y-10"
+              v-for="(item, index) in state.wayList"
+              :key="index"
+            >
+              <radio
+                :checked="formData.type === item.value"
+                color="var(--ui-BG-Main)"
+                style="transform: scale(0.8)"
+                :value="item.value"
+              />
+              <view class="item-value ss-m-l-8">{{ item.text }}</view>
+            </label>
+          </radio-group>
+        </view>
+      </view>
+      <!-- 退款金额 -->
+      <view class="refund-item ss-flex ss-col-center ss-row-between" @tap="state.showModal = true">
+        <text class="item-title">退款金额</text>
+        <view class="ss-flex refund-cause ss-col-center">
+          <text class="ss-m-r-20">￥{{ fen2yuan(state.item.payPrice) }}</text>
+        </view>
+      </view>
+      <!-- 申请原因 -->
+      <view class="refund-item ss-flex ss-col-center ss-row-between" @tap="state.showModal = true">
+        <text class="item-title">申请原因</text>
+        <view class="ss-flex refund-cause ss-col-center">
+          <text class="ss-m-r-20" v-if="formData.applyReason">{{ formData.applyReason }}</text>
+          <text class="ss-m-r-20" v-else>请选择申请原因~</text>
+          <text class="cicon-forward" style="height: 28rpx"></text>
+        </view>
+      </view>
+
+      <!-- 留言 -->
+      <view class="refund-item">
+        <view class="item-title ss-m-b-20">相关描述</view>
+        <view class="describe-box">
+          <uni-easyinput
+            :inputBorder="false"
+            class="describe-content"
+            type="textarea"
+            maxlength="120"
+            autoHeight
+            v-model="formData.applyDescription"
+            placeholder="客官~请描述您遇到的问题，建议上传照片"
+          />
+          <!-- TODO 芋艿：上传的测试 -->
+          <view class="upload-img">
+            <s-uploader
+              v-model:url="formData.images"
+              fileMediatype="image"
+              limit="9"
+              mode="grid"
+              :imageStyles="{ width: '168rpx', height: '168rpx' }"
+            />
+          </view>
+        </view>
+      </view>
+    </uni-forms>
+
+    <!-- 底部按钮 -->
+    <su-fixed bottom placeholder>
+      <view class="foot-wrap">
+        <view class="foot_box ss-flex ss-col-center ss-row-between ss-p-x-30">
+          <button class="ss-reset-button contcat-btn" @tap="sheep.$router.go('/pages/chat/index')">
+            联系客服
+          </button>
+          <button class="ss-reset-button ui-BG-Main-Gradient sub-btn" @tap="submit">提交</button>
+        </view>
+      </view>
+    </su-fixed>
+
+    <!-- 申请原因弹窗 -->
+    <su-popup :show="state.showModal" round="10" :showClose="true" @close="state.showModal = false">
+      <view class="modal-box page_box">
+        <view class="modal-head item-title head_box ss-flex ss-row-center ss-col-center">
+          申请原因
+        </view>
+        <view class="modal-content content_box">
+          <radio-group @change="onChange">
+            <label
+              class="radio ss-flex ss-col-center"
+              v-for="item in state.reasonList"
+              :key="item"
+            >
+              <view class="ss-flex-1 ss-p-20">{{ item }}</view>
+              <radio
+                :value="item"
+                color="var(--ui-BG-Main)"
+                :checked="item === state.currentValue"
+              />
+            </label>
+          </radio-group>
+        </view>
+        <view class="modal-foot foot_box ss-flex ss-row-center ss-col-center">
+          <button class="ss-reset-button close-btn ui-BG-Main-Gradient" @tap="onReason">
+            确定
+          </button>
+        </view>
+      </view>
+    </su-popup>
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad } from '@dcloudio/uni-app';
+  import { reactive, ref } from 'vue';
+  import OrderApi from '@/api/trade/order';
+  import TradeConfigApi from '@/api/trade/config';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
+  import AfterSaleApi from '@/api/trade/afterSale';
+
+  const form = ref(null);
+  const state = reactive({
+    orderId: 0, // 订单编号
+    itemId: 0, // 订单项编号
+    order: {}, // 订单
+    item: {}, // 订单项
+    config: {}, // 交易配置
+
+    // 售后类型
+    wayList: [
+      {
+        text: '仅退款',
+        value: '10',
+      },
+      {
+        text: '退款退货',
+        value: '20',
+      },
+    ],
+    reasonList: [], // 可选的申请原因数组
+    showModal: false, // 是否显示申请原因弹窗
+    currentValue: '' // 当前选择的售后原因
+  });
+  const formData = reactive({
+    way: '',
+    applyReason: '',
+    applyDescription: '',
+    images: [],
+  });
+  const rules = reactive({});
+
+  // 提交表单
+  async function submit() {
+    // #ifdef MP
+    sheep.$platform.useProvider('wechat').subscribeMessage('order_aftersale_change');
+    // #endif
+    let data = {
+      orderItemId: state.itemId,
+      refundPrice: state.item.payPrice,
+      ...formData,
+    };
+    const { code } = await AfterSaleApi.createAfterSale(data);
+    if (code === 0) {
+      uni.showToast({
+        title: '申请成功',
+      });
+      sheep.$router.go('/pages/order/aftersale/list');
+    }
+  }
+
+  // 选择售后类型
+  function onRefundChange(e) {
+    formData.way = e.detail.value;
+    // 清理理由
+    state.reasonList =
+      formData.way === '10'
+        ? state.config.afterSaleRefundReasons || []
+        : state.config.afterSaleReturnReasons || [];
+    formData.applyReason = '';
+    state.currentValue = '';
+  }
+
+  // 选择申请原因
+  function onChange(e) {
+    state.currentValue = e.detail.value;
+  }
+
+  // 确定
+  function onReason() {
+    formData.applyReason = state.currentValue;
+    state.showModal = false;
+  }
+
+  onLoad(async (options) => {
+    // 解析参数
+    if (!options.orderId || !options.itemId) {
+      sheep.$helper.toast(`缺少订单信息，请检查`);
+      return;
+    }
+    state.orderId = options.orderId;
+    state.itemId = parseInt(options.itemId);
+
+    // 读取订单信息
+    const { code, data } = await OrderApi.getOrder(state.orderId);
+    if (code !== 0) {
+      return;
+    }
+    state.order = data;
+    state.item = data.items.find((item) => item.id === state.itemId) || {};
+
+    // 设置选项
+    if (state.order.status === 10) {
+      state.wayList.splice(1, 1);
+    }
+
+    // 读取配置
+    state.config = (await TradeConfigApi.getTradeConfig()).data;
+  });
+</script>
+
+<style lang="scss" scoped>
+  .item-title {
+    font-size: 30rpx;
+    font-weight: bold;
+    color: rgba(51, 51, 51, 1);
+    // margin-bottom: 20rpx;
+  }
+
+  // 售后项目
+  .refund-item {
+    background-color: #fff;
+    border-bottom: 1rpx solid #f5f5f5;
+    padding: 30rpx;
+
+    &:last-child {
+      border: none;
+    }
+
+    // 留言
+    .describe-box {
+      width: 690rpx;
+      background: rgba(249, 250, 251, 1);
+      padding: 30rpx;
+      box-sizing: border-box;
+      border-radius: 20rpx;
+
+      .describe-content {
+        height: 200rpx;
+        font-size: 24rpx;
+        font-weight: 400;
+        color: #333;
+      }
+    }
+
+    // 联系方式
+    .input-box {
+      height: 84rpx;
+      background: rgba(249, 250, 251, 1);
+      border-radius: 20rpx;
+    }
+  }
+
+  .goods-box {
+    background: #fff;
+    padding: 20rpx;
+    margin-bottom: 20rpx;
+  }
+
+  .foot-wrap {
+    height: 100rpx;
+    width: 100%;
+  }
+
+  .foot_box {
+    height: 100rpx;
+    background-color: #fff;
+
+    .sub-btn {
+      width: 336rpx;
+      line-height: 74rpx;
+      border-radius: 38rpx;
+      color: rgba(#fff, 0.9);
+      font-size: 28rpx;
+    }
+
+    .contcat-btn {
+      width: 336rpx;
+      line-height: 74rpx;
+      background: rgba(238, 238, 238, 1);
+      border-radius: 38rpx;
+      font-size: 28rpx;
+      font-weight: 400;
+      color: rgba(51, 51, 51, 1);
+    }
+  }
+
+  .modal-box {
+    width: 750rpx;
+    // height: 680rpx;
+    border-radius: 30rpx 30rpx 0 0;
+    background: #fff;
+
+    .modal-head {
+      height: 100rpx;
+      font-size: 30rpx;
+    }
+
+    .modal-content {
+      font-size: 28rpx;
+    }
+
+    .modal-foot {
+      .close-btn {
+        width: 710rpx;
+        line-height: 80rpx;
+        border-radius: 40rpx;
+        color: rgba(#fff, 0.9);
+      }
+    }
+  }
+
+  .success-box {
+    width: 600rpx;
+    padding: 90rpx 0 64rpx 0;
+
+    .cicon-check-round {
+      font-size: 96rpx;
+      color: #04b750;
+    }
+
+    .success-title {
+      font-weight: 500;
+      color: #333333;
+      font-size: 32rpx;
+    }
+
+    .success-btn {
+      width: 492rpx;
+      height: 70rpx;
+      background: linear-gradient(90deg, var(--ui-BG-Main-gradient), var(--ui-BG-Main));
+      border-radius: 35rpx;
+    }
+  }
+</style>
diff --git a/pages/order/aftersale/detail.vue b/pages/order/aftersale/detail.vue
new file mode 100644
index 0000000..aa90f47
--- /dev/null
+++ b/pages/order/aftersale/detail.vue
@@ -0,0 +1,342 @@
+<!-- 售后详情 -->
+<template>
+	<s-layout title="售后详情" :navbar="!isEmpty(state.info) && state.loading ? 'inner' : 'normal'">
+		<view class="content_box" v-if="!isEmpty(state.info) && state.loading">
+			<!-- 步骤条 -->
+			<view class="steps-box ss-flex" :style="[
+          {
+            marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
+            paddingTop: Number(statusBarHeight + 88) + 'rpx',
+          },
+        ]">
+				<view class="ss-flex">
+					<view class="steps-item" v-for="(item, index) in state.list" :key="index">
+						<view class="ss-flex">
+							<text class="sicon-circleclose"
+                    v-if="state.list.length - 1 === index && [61, 62, 63].includes(state.info.status)" />
+							<text class="sicon-circlecheck" v-else
+                    :class="state.active >= index ? 'activity-color' : 'info-color'" />
+
+							<view v-if="state.list.length - 1 !== index" class="line"
+                    :class="state.active >= index ? 'activity-bg' : 'info-bg'" />
+						</view>
+						<view class="steps-item-title" :class="state.active >= index ? 'activity-color' : 'info-color'">
+							{{ item.title }}
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<!-- 服务状态 -->
+			<view class="status-box ss-flex ss-col-center ss-row-between ss-m-x-20"
+            @tap="sheep.$router.go('/pages/order/aftersale/log', { id: state.id })">
+				<view class="">
+					<view class="status-text">
+            {{ formatAfterSaleStatusDescription(state.info) }}
+          </view>
+					<view class="status-time">
+            {{ sheep.$helper.timeFormat(state.info.updateTime, 'yyyy-mm-dd hh:MM:ss') }}
+          </view>
+				</view>
+				<text class="ss-iconfont _icon-forward" style="color: #666" />
+			</view>
+
+			<!-- 退款金额 -->
+			<view class="aftersale-money ss-flex ss-col-center ss-row-between">
+				<view class="aftersale-money--title">退款总额</view>
+				<view class="aftersale-money--num">￥{{ fen2yuan(state.info.refundPrice) }}</view>
+			</view>
+			<!-- 服务商品 -->
+			<view class="order-shop">
+				<s-goods-item
+          :img=" state.info.picUrl"
+          :title=" state.info.spuName"
+					:titleWidth="480"
+          :skuText="state.info.properties.map((property) => property.valueName).join(' ')"
+          :num=" state.info.count"
+        />
+			</view>
+
+			<!-- 服务内容 -->
+			<view class="aftersale-content">
+				<view class="aftersale-item ss-flex ss-col-center">
+					<view class="item-title">服务单号：</view>
+					<view class="item-content ss-m-r-16">{{ state.info.no }}</view>
+					<button class="ss-reset-button copy-btn" @tap="onCopy">复制</button>
+				</view>
+				<view class="aftersale-item ss-flex ss-col-center">
+					<view class="item-title">申请时间：</view>
+					<view class="item-content">
+						{{ sheep.$helper.timeFormat(state.info.createTime, 'yyyy-mm-dd hh:MM:ss') }}
+					</view>
+				</view>
+				<view class="aftersale-item ss-flex ss-col-center">
+					<view class="item-title">售后类型：</view>
+					<view class="item-content">{{ state.info.way === 10 ? '仅退款' : '退款退货' }}</view>
+				</view>
+				<view class="aftersale-item ss-flex ss-col-center">
+					<view class="item-title">申请原因：</view>
+					<view class="item-content">{{ state.info.applyReason }}</view>
+				</view>
+				<view class="aftersale-item ss-flex ss-col-center">
+					<view class="item-title">相关描述：</view>
+					<view class="item-content">{{ state.info.applyDescription }}</view>
+				</view>
+			</view>
+		</view>
+
+    <!-- 操作区 -->
+		<s-empty v-if="isEmpty(state.info) && state.loading" icon="/static/order-empty.png" text="暂无该订单售后详情" />
+		<su-fixed bottom placeholder bg="bg-white" v-if="!isEmpty(state.info)">
+			<view class="foot_box">
+        <button class="ss-reset-button btn" v-if="state.info.buttons?.includes('cancel')"
+                @tap="onApply(state.info.id)">
+          取消申请
+        </button>
+        <button class="ss-reset-button btn" v-if="state.info.buttons?.includes('delivery')"
+                @tap="sheep.$router.go('/pages/order/aftersale/return-delivery', { id: state.info.id })">
+          填写退货
+        </button>
+				<button class="ss-reset-button contcat-btn btn" @tap="sheep.$router.go('/pages/chat/index')">
+          联系客服
+        </button>
+			</view>
+		</su-fixed>
+	</s-layout>
+</template>
+
+<script setup>
+	import sheep from '@/sheep';
+	import { onLoad } from '@dcloudio/uni-app';
+	import { reactive } from 'vue';
+	import { isEmpty } from 'lodash';
+  import { fen2yuan, formatAfterSaleStatusDescription, handleAfterSaleButtons } from '@/sheep/hooks/useGoods';
+  import AfterSaleApi from '@/api/trade/afterSale';
+
+	const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+	const headerBg = sheep.$url.css('/static/img/shop/order/order_bg.png');
+	const state = reactive({
+    id: 0, // 售后编号
+    info: {}, // 收货信息
+		loading: false,
+    active: 0, // 在 list 的激活位置
+    list: [{
+      title: '提交申请',
+    }, {
+      title: '处理中',
+    }, {
+      title: '完成'
+    }], // 时间轴
+	});
+
+	function onApply(id) {
+		uni.showModal({
+			title: '提示',
+			content: '确定要取消此申请吗？',
+			success: async function(res) {
+				if (!res.confirm) {
+					return;
+				}
+        const { code } = await AfterSaleApi.cancelAfterSale(id);
+        if (code === 0) {
+          await getDetail(id);
+        }
+			},
+		});
+	}
+
+  // 复制
+  const onCopy = () => {
+		sheep.$helper.copyText(state.info.no);
+	};
+
+	async function getDetail(id) {
+    state.loading = true;
+    const { code, data } = await AfterSaleApi.getAfterSale(id);
+    if (code !== 0) {
+      state.info = null;
+      return;
+    }
+    state.info = data;
+    handleAfterSaleButtons(state.info);
+
+    // 处理时间轴
+    if ([10].includes(state.info.status)) {
+      state.active = 0;
+    } else if ([20, 30].includes(state.info.status)) {
+      state.active = 1;
+    } else if ([40, 50].includes(state.info.status)) {
+      state.active = 2;
+    } else if ([61, 62, 63].includes(state.info.status)) {
+      state.active = 2;
+    }
+	}
+
+	onLoad((options) => {
+    if (!options.id) {
+      sheep.$helper.toast(`缺少订单信息，请检查`);
+      return
+    }
+		state.id = options.id;
+		getDetail(options.id);
+	});
+</script>
+
+<style lang="scss" scoped>
+	// 步骤条
+	.steps-box {
+		width: 100%;
+		height: 190rpx;
+		background: v-bind(headerBg) no-repeat,
+			linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+		background-size: 750rpx 100%;
+		padding-left: 72rpx;
+
+		.steps-item {
+			.sicon-circleclose {
+				font-size: 24rpx;
+				color: #fff;
+			}
+
+			.sicon-circlecheck {
+				font-size: 24rpx;
+			}
+
+			.steps-item-title {
+				font-size: 24rpx;
+				font-weight: 400;
+				margin-top: 16rpx;
+				margin-left: -36rpx;
+				width: 100rpx;
+				text-align: center;
+			}
+		}
+	}
+
+	.activity-color {
+		color: #fff;
+	}
+
+	.info-color {
+		color: rgba(#fff, 0.4);
+	}
+
+	.activity-bg {
+		background: #fff;
+	}
+
+	.info-bg {
+		background: rgba(#fff, 0.4);
+	}
+
+	.line {
+		width: 270rpx;
+		height: 4rpx;
+	}
+
+	// 服务状态
+	.status-box {
+		position: relative;
+		z-index: 3;
+		background-color: #fff;
+		border-radius: 20rpx 20rpx 0px 0px;
+		padding: 20rpx;
+		margin-top: -20rpx;
+
+		.status-text {
+			font-size: 28rpx;
+
+			font-weight: 500;
+			color: rgba(51, 51, 51, 1);
+			margin-bottom: 20rpx;
+		}
+
+		.status-time {
+			font-size: 24rpx;
+
+			font-weight: 400;
+			color: rgba(153, 153, 153, 1);
+		}
+	}
+
+	// 退款金额
+	.aftersale-money {
+		background-color: #fff;
+		height: 98rpx;
+		padding: 0 20rpx;
+		margin: 20rpx;
+
+		.aftersale-money--title {
+			font-size: 28rpx;
+
+			font-weight: 500;
+			color: rgba(51, 51, 51, 1);
+		}
+
+		.aftersale-money--num {
+			font-size: 28rpx;
+			font-family: OPPOSANS;
+			font-weight: 500;
+			color: #ff3000;
+		}
+	}
+
+	// order-shop
+	.order-shop {
+		padding: 20rpx;
+		background-color: #fff;
+		margin: 0 20rpx 20rpx 20rpx;
+	}
+
+	// 服务内容
+	.aftersale-content {
+		background-color: #fff;
+		padding: 20rpx;
+		margin: 0 20rpx;
+
+		.aftersale-item {
+			height: 60rpx;
+
+			.copy-btn {
+				background: #eeeeee;
+				color: #333;
+				border-radius: 20rpx;
+				width: 75rpx;
+				height: 40rpx;
+				font-size: 22rpx;
+			}
+
+			.item-title {
+				color: #999;
+				font-size: 28rpx;
+			}
+
+			.item-content {
+				color: #333;
+				font-size: 28rpx;
+			}
+		}
+	}
+
+	// 底部功能
+	.foot_box {
+		height: 100rpx;
+		background-color: #fff;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+
+		.btn {
+			width: 160rpx;
+			line-height: 60rpx;
+			background: rgba(238, 238, 238, 1);
+			border-radius: 30rpx;
+			padding: 0;
+			margin-right: 20rpx;
+			font-size: 26rpx;
+
+			font-weight: 400;
+			color: rgba(51, 51, 51, 1);
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/order/aftersale/list.vue b/pages/order/aftersale/list.vue
new file mode 100644
index 0000000..edcbebf
--- /dev/null
+++ b/pages/order/aftersale/list.vue
@@ -0,0 +1,187 @@
+<!-- 售后列表 -->
+<template>
+	<s-layout title="售后列表">
+		<!-- tab -->
+		<su-sticky bgColor="#fff">
+			<su-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab" />
+		</su-sticky>
+		<s-empty v-if="state.pagination.total === 0" icon="/static/data-empty.png" text="暂无数据" />
+		<!-- 列表 -->
+		<view v-if="state.pagination.total > 0">
+			<view class="list-box ss-m-y-20" v-for="order in state.pagination.list" :key="order.id"
+				@tap="sheep.$router.go('/pages/order/aftersale/detail', { id: order.id })">
+				<view class="order-head ss-flex ss-col-center ss-row-between">
+					<text class="no">服务单号：{{ order.no }}</text>
+					<text class="state">{{ formatAfterSaleStatus(order) }}</text>
+				</view>
+				<s-goods-item
+          :img="order.picUrl"
+          :title="order.spuName"
+					:skuText="order.properties.map((property) => property.valueName).join(' ')"
+          :price="order.refundPrice"
+        />
+				<view class="apply-box ss-flex ss-col-center ss-row-between border-bottom ss-p-x-20">
+					<view class="ss-flex ss-col-center">
+						<view class="title ss-m-r-20">{{ order.way === 10 ? '仅退款' : '退款退货' }}</view>
+						 <view class="value">{{ formatAfterSaleStatusDescription(order) }}</view>
+					</view>
+					<text class="_icon-forward"></text>
+				</view>
+				<view class="tool-btn-box ss-flex ss-col-center ss-row-right ss-p-r-20">
+          <!-- TODO 功能缺失：填写退货信息 -->
+					<view>
+						<button class="ss-reset-button tool-btn" @tap.stop="onApply(order.id)"
+							v-if="order?.buttons.includes('cancel')">取消申请</button>
+					</view>
+				</view>
+			</view>
+		</view>
+		<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
+        contentdown: '上拉加载更多',
+      }" @tap="loadMore" />
+	</s-layout>
+</template>
+
+<script setup>
+	import sheep from '@/sheep';
+	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+	import { reactive } from 'vue';
+	import _ from 'lodash';
+  import { formatAfterSaleStatus, formatAfterSaleStatusDescription, handleAfterSaleButtons } from '@/sheep/hooks/useGoods';
+  import AfterSaleApi from '@/api/trade/afterSale';
+  import { resetPagination } from '@/sheep/util';
+
+	const state = reactive({
+		currentTab: 0,
+		showApply: false,
+		pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 10
+		},
+		loadStatus: '',
+	});
+
+  // TODO 芋艿：优化点，增加筛选
+	const tabMaps = [{
+			name: '全部',
+			value: 'all',
+		},
+		// {
+		//   name: '申请中',
+		//   value: 'nooper',
+		// },
+		// {
+		//   name: '处理中',
+		//   value: 'ing',
+		// },
+		// {
+		//   name: '已完成',
+		//   value: 'completed',
+		// },
+		// {
+		//   name: '已拒绝',
+		//   value: 'refuse',
+		// },
+	];
+
+	// 切换选项卡
+	function onTabsChange(e) {
+    resetPagination(state.pagination);
+		state.currentTab = e.index;
+		getOrderList();
+	}
+
+	// 获取售后列表
+	async function getOrderList() {
+		state.loadStatus = 'loading';
+		let { data, code } = await AfterSaleApi.getAfterSalePage({
+			// type: tabMaps[state.currentTab].value,
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+		});
+		if (code !== 0) {
+      return;
+		}
+    data.list.forEach(order => handleAfterSaleButtons(order));
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+	}
+
+	function onApply(orderId) {
+		uni.showModal({
+			title: '提示',
+			content: '确定要取消此申请吗？',
+			success: async function(res) {
+				if (!res.confirm) {
+          return;
+				}
+        const { code } = await AfterSaleApi.cancelAfterSale(orderId);
+        if (code === 0) {
+          resetPagination(state.pagination);
+          await getOrderList();
+        }
+			},
+		});
+	}
+
+	onLoad(async (options) => {
+		if (options.type) {
+			state.currentTab = options.type;
+		}
+		await getOrderList();
+	});
+
+	// 加载更多
+	function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return
+    }
+    state.pagination.pageNo++;
+    getOrderList();
+	}
+
+	// 上拉加载更多
+	onReachBottom(() => {
+		loadMore();
+	});
+</script>
+
+<style lang="scss" scoped>
+	.list-box {
+		background-color: #fff;
+
+		.order-head {
+			padding: 0 25rpx;
+			height: 77rpx;
+		}
+
+		.apply-box {
+			height: 82rpx;
+
+			.title {
+				font-size: 24rpx;
+			}
+
+			.value {
+				font-size: 22rpx;
+				color: $dark-6;
+			}
+		}
+
+		.tool-btn-box {
+			height: 100rpx;
+
+			.tool-btn {
+				width: 160rpx;
+				height: 60rpx;
+				background: #f6f6f6;
+				border-radius: 30rpx;
+				font-size: 26rpx;
+				font-weight: 400;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/order/aftersale/log-item.vue b/pages/order/aftersale/log-item.vue
new file mode 100644
index 0000000..01329df
--- /dev/null
+++ b/pages/order/aftersale/log-item.vue
@@ -0,0 +1,77 @@
+<!-- 售后日志的每一项展示 -->
+<template>
+  <view class="log-item ss-flex">
+    <view class="log-icon ss-flex-col ss-col-center ss-m-r-20">
+      <text class="cicon-title" :class="index === 0 ? 'activity-color' : ''" />
+      <view v-if="data.length - 1 !== index" class="line" />
+    </view>
+    <view>
+      <view class="text">{{ item.content }}</view>
+      <view class="date">
+        {{ sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}
+      </view>
+    </view>
+  </view>
+</template>
+<script setup>
+  import sheep from '@/sheep';
+
+  const props = defineProps({
+    item: {
+      type: Object, // 当前日志
+      default() {},
+    },
+    index: {
+      type: Number, // item 在 data 的下标
+      default: 0,
+    },
+    data: {
+      type: Object, // 日志列表
+      default() {},
+    },
+  });
+</script>
+<style lang="scss" scoped>
+  .log-item {
+    align-items: stretch;
+  }
+  .log-icon {
+    height: inherit;
+    .cicon-title {
+      font-size: 30rpx;
+      color: #dfdfdf;
+    }
+    .activity-color {
+      color: #60bd45;
+    }
+    .line {
+      width: 1px;
+      height: 100%;
+      background: #dfdfdf;
+    }
+  }
+  .text {
+    font-size: 28rpx;
+    font-weight: 500;
+    color: #333333;
+  }
+  .richtext {
+    font-size: 24rpx;
+    font-weight: 500;
+    color: #999999;
+    margin: 20rpx 0 0 0;
+  }
+  .content-img {
+    margin-top: 20rpx;
+    width: 200rpx;
+    height: 200rpx;
+  }
+  .date {
+    margin-top: 20rpx;
+    font-size: 24rpx;
+    font-family: OPPOSANS;
+    font-weight: 400;
+    color: #999999;
+    margin-bottom: 40rpx;
+  }
+</style>
diff --git a/pages/order/aftersale/log.vue b/pages/order/aftersale/log.vue
new file mode 100644
index 0000000..3c8078a
--- /dev/null
+++ b/pages/order/aftersale/log.vue
@@ -0,0 +1,38 @@
+<!-- 售后日志列表  -->
+<template>
+  <s-layout title="售后进度">
+    <view class="log-box">
+      <view v-for="(item, index) in state.list" :key="item.id">
+        <log-item :item="item" :index="index" :data="state.list" />
+      </view>
+    </view>
+  </s-layout>
+</template>
+
+<script setup>
+  import { onLoad } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import logItem from './log-item.vue';
+  import AfterSaleApi from '@/api/trade/afterSale';
+
+  const state = reactive({
+    list: [],
+  });
+
+  async function getDetail(id) {
+    const { data } = await AfterSaleApi.getAfterSaleLogList(id);
+    state.list = data;
+  }
+
+  onLoad((options) => {
+    state.aftersaleId = options.id;
+    getDetail(options.id);
+  });
+</script>
+
+<style lang="scss" scoped>
+  .log-box {
+    padding: 24rpx 24rpx 24rpx 40rpx;
+    background-color: #fff;
+  }
+</style>
diff --git a/pages/order/aftersale/return-delivery.vue b/pages/order/aftersale/return-delivery.vue
new file mode 100644
index 0000000..bac2878
--- /dev/null
+++ b/pages/order/aftersale/return-delivery.vue
@@ -0,0 +1,194 @@
+<template>
+	<s-layout title="退货物流">
+		<view>
+			<form @submit="subRefund" report-submit='true'>
+				<view class='apply-return'>
+					<view class='list borRadius14'>
+						<view class='item acea-row row-between-wrapper' style="display: flex;align-items: center;">
+							<view>物流公司</view>
+							<picker mode='selector' class='num' @change="bindPickerChange" :value="state.expressIndex"
+                      :range="state.expresses" range-key="name">
+								<view class="picker acea-row row-between-wrapper">
+									<view class='reason'>{{ state.expresses[state.expressIndex].name }}</view>
+                  <!-- TODO 芋艿：这里样式有问题，少了 > 按钮 -->
+									<text class='iconfont icon-jiantou' />
+								</view>
+							</picker>
+						</view>
+						<view class='item textarea acea-row row-between' style="display: flex;align-items: center;">
+							<view>物流单号</view>
+							<input placeholder='请填写物流单号' class='num' name="logisticsNo"
+                     placeholder-class='placeholder' />
+						</view>
+						<button class='returnBnt bg-color ss-reset-button ui-BG-Main-Gradient sub-btn'
+							form-type="submit"
+							style="background: linear-gradient(90deg,var(--ui-BG-Main),var(--ui-BG-Main-gradient))!important">提交</button>
+					</view>
+				</view>
+			</form>
+		</view>
+	</s-layout>
+</template>
+
+<script setup>
+	import { onLoad } from '@dcloudio/uni-app';
+	import { reactive } from 'vue';
+  import sheep from '@/sheep';
+  import AfterSaleApi from '@/api/trade/afterSale';
+  import DeliveryApi from '@/api/trade/delivery';
+
+  const state = reactive({
+    id: 0, // 售后编号
+		expressIndex: 0, // 选中的 expresses 下标
+		expresses: [], // 可选的快递列表
+	})
+
+	function bindPickerChange(e) {
+		state.expressIndex = e.detail.value;
+	}
+
+	async function subRefund(e) {
+    let data = {
+      id: state.id,
+      logisticsId: state.expresses[state.expressIndex].id,
+      logisticsNo: e.detail.value.logisticsNo,
+    };
+    const { code } = await AfterSaleApi.deliveryAfterSale(data);
+    if (code !== 0) {
+      return;
+    }
+    uni.showToast({
+      title: '填写退货成功',
+    });
+    sheep.$router.go('/pages/order/aftersale/detail', { id: state.id });
+	}
+
+  // 获得快递物流列表
+	async function getExpressList() {
+    const { code, data } = await DeliveryApi.getDeliveryExpressList();
+    if (code !== 0) {
+      return;
+    }
+    state.expresses = data;
+	}
+
+	onLoad(options => {
+    if (!options.id) {
+      sheep.$helper.toast(`缺少订单信息，请检查`);
+      return
+    }
+    state.id = options.id;
+    // 获得快递物流列表
+    getExpressList();
+	})
+</script>
+<style lang="scss" scoped>
+	.apply-return {
+		padding: 20rpx 30rpx 70rpx 30rpx;
+	}
+
+	.apply-return .list {
+		background-color: #fff;
+		margin-top: 18rpx;
+		padding: 0 24rpx 70rpx 24rpx;
+	}
+
+	.apply-return .list .item {
+		min-height: 90rpx;
+		border-bottom: 1rpx solid #eee;
+		font-size: 30rpx;
+		color: #333;
+	}
+
+	.apply-return .list .item .num {
+		color: #282828;
+		margin-left: 27rpx;
+		// width: 227rpx;
+		// text-align: right;
+	}
+
+	.apply-return .list .item .num .picker .reason {
+		width: 385rpx;
+	}
+
+	.apply-return .list .item .num .picker .iconfont {
+		color: #666;
+		font-size: 30rpx;
+		margin-top: 2rpx;
+	}
+
+	.apply-return .list .item.textarea {
+		padding: 24rpx 0;
+	}
+
+	.apply-return .list .item textarea {
+		height: 100rpx;
+		font-size: 30rpx;
+	}
+
+	.apply-return .list .item .placeholder {
+		color: #bbb;
+	}
+
+	.apply-return .list .item .title {
+		height: 95rpx;
+		width: 100%;
+	}
+
+	.apply-return .list .item .title .tip {
+		font-size: 30rpx;
+		color: #bbb;
+	}
+
+	.apply-return .list .item .upload {
+		padding-bottom: 36rpx;
+	}
+
+	.apply-return .list .item .upload .pictrue {
+		border-radius: 14rpx;
+		margin: 22rpx 23rpx 0 0;
+		width: 156rpx;
+		height: 156rpx;
+		position: relative;
+		font-size: 24rpx;
+		color: #bbb;
+	}
+
+	.apply-return .list .item .upload .pictrue:nth-of-type(4n) {
+		margin-right: 0;
+	}
+
+	.apply-return .list .item .upload .pictrue image {
+		width: 100%;
+		height: 100%;
+		border-radius: 14rpx;
+	}
+
+	.apply-return .list .item .upload .pictrue .icon-guanbi1 {
+		position: absolute;
+		font-size: 45rpx;
+		top: -10rpx;
+		right: -10rpx;
+	}
+
+	.apply-return .list .item .upload .pictrue .icon-icon25201 {
+		color: #bfbfbf;
+		font-size: 50rpx;
+	}
+
+	.apply-return .list .item .upload .pictrue:nth-last-child(1) {
+		border: 1rpx solid #ddd;
+		box-sizing: border-box;
+	}
+
+	.apply-return .returnBnt {
+		font-size: 32rpx;
+		color: #fff;
+		width: 100%;
+		height: 86rpx;
+		border-radius: 50rpx;
+		text-align: center;
+		line-height: 86rpx;
+		margin: 43rpx auto;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/order/confirm.vue b/pages/order/confirm.vue
new file mode 100644
index 0000000..ed8b233
--- /dev/null
+++ b/pages/order/confirm.vue
@@ -0,0 +1,405 @@
+<template>
+  <s-layout title="确认订单">
+    <!-- TODO：这个判断先删除 v-if="state.orderInfo.need_address === 1" -->
+    <view class="bg-white address-box ss-m-b-14 ss-r-b-10" @tap="onSelectAddress">
+      <s-address-item :item="state.addressInfo" :hasBorderBottom="false">
+        <view class="ss-rest-button">
+          <text class="_icon-forward" />
+        </view>
+      </s-address-item>
+    </view>
+
+    <!-- 商品信息 -->
+    <view class="order-card-box ss-m-b-14">
+      <s-goods-item
+        v-for="item in state.orderInfo.items"
+        :key="item.skuId"
+        :img="item.picUrl"
+        :title="item.spuName"
+        :skuText="item.properties.map((property) => property.valueName).join(' ')"
+        :price="item.price"
+        :num="item.count"
+        marginBottom="10"
+      />
+      <view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20 bg-white ss-r-10">
+        <view class="item-title">订单备注</view>
+        <view class="ss-flex ss-col-center">
+          <uni-easyinput
+            maxlength="20"
+            placeholder="建议留言前先与商家沟通"
+            v-model="state.orderPayload.remark"
+            :inputBorder="false"
+            :clearable="false"
+          />
+        </view>
+      </view>
+    </view>
+
+    <!-- 价格信息 -->
+    <view class="bg-white total-card-box ss-p-20 ss-m-b-14 ss-r-10">
+      <view class="total-box-content border-bottom">
+        <view class="order-item ss-flex ss-col-center ss-row-between">
+          <view class="item-title">商品金额</view>
+          <view class="ss-flex ss-col-center">
+            <text class="item-value ss-m-r-24">
+              ￥{{ fen2yuan(state.orderInfo.price.totalPrice) }}
+            </text>
+          </view>
+        </view>
+        <!-- TODO 芋艿：接入积分 -->
+        <view
+          class="order-item ss-flex ss-col-center ss-row-between"
+          v-if="state.orderPayload.order_type === 'score'"
+        >
+          <view class="item-title">扣除积分</view>
+          <view class="ss-flex ss-col-center">
+            <image
+              :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
+              class="score-img"
+            />
+            <text class="item-value ss-m-r-24">{{ state.orderInfo.score_amount }}</text>
+          </view>
+        </view>
+        <view class="order-item ss-flex ss-col-center ss-row-between">
+          <view class="item-title">运费</view>
+          <view class="ss-flex ss-col-center">
+            <text class="item-value ss-m-r-24">
+              +￥{{ fen2yuan(state.orderInfo.price.deliveryPrice) }}
+            </text>
+          </view>
+        </view>
+        <!-- 优惠劵：只有 type = 0 普通订单（非拼团、秒杀、砍价），才可以使用优惠劵 -->
+        <view
+          class="order-item ss-flex ss-col-center ss-row-between"
+          v-if="state.orderInfo.type === 0"
+        >
+          <view class="item-title">优惠券</view>
+          <view class="ss-flex ss-col-center" @tap="state.showCoupon = true">
+            <text class="item-value text-red" v-if="state.orderPayload.couponId > 0">
+              -￥{{ fen2yuan(state.orderInfo.price.couponPrice) }}
+            </text>
+            <text
+              class="item-value"
+              :class="state.couponInfo.length > 0 ? 'text-red' : 'text-disabled'"
+              v-else
+            >
+              {{
+                state.couponInfo.length > 0 ? state.couponInfo.length + ' 张可用' : '暂无可用优惠券'
+              }}
+            </text>
+            <text class="_icon-forward item-icon" />
+          </view>
+        </view>
+        <view
+          class="order-item ss-flex ss-col-center ss-row-between"
+          v-if="state.orderInfo.price.discountPrice > 0"
+        >
+          <view class="item-title">活动优惠</view>
+          <view class="ss-flex ss-col-center">
+            <!--                @tap="state.showDiscount = true" TODO 芋艿：后续要把优惠信息打进去 -->
+            <text class="item-value text-red">
+              -￥{{ fen2yuan(state.orderInfo.price.discountPrice) }}
+            </text>
+            <text class="_icon-forward item-icon" />
+          </view>
+        </view>
+        <view
+          class="order-item ss-flex ss-col-center ss-row-between"
+          v-if="state.orderInfo.price.vipPrice > 0"
+        >
+          <view class="item-title">会员优惠</view>
+          <view class="ss-flex ss-col-center">
+            <text class="item-value text-red">
+              -￥{{ fen2yuan(state.orderInfo.price.vipPrice) }}
+            </text>
+          </view>
+        </view>
+      </view>
+      <view class="total-box-footer ss-font-28 ss-flex ss-row-right ss-col-center ss-m-r-28">
+        <view class="total-num ss-m-r-20">
+          共{{ state.orderInfo.items.reduce((acc, item) => acc + item.count, 0) }}件
+        </view>
+        <view>合计：</view>
+        <view class="total-num text-red"> ￥{{ fen2yuan(state.orderInfo.price.payPrice) }} </view>
+      </view>
+    </view>
+
+    <!-- 选择优惠券弹框 -->
+    <s-coupon-select
+      v-model="state.couponInfo"
+      :show="state.showCoupon"
+      @confirm="onSelectCoupon"
+      @close="state.showCoupon = false"
+    />
+
+    <!-- 满额折扣弹框 TODO 芋艿：后续要把优惠信息打进去 -->
+    <s-discount-list
+      v-model="state.orderInfo"
+      :show="state.showDiscount"
+      @close="state.showDiscount = false"
+    />
+
+    <!-- 底部 -->
+    <su-fixed bottom :opacity="false" bg="bg-white" placeholder :noFixed="false" :index="200">
+      <view class="footer-box border-top ss-flex ss-row-between ss-p-x-20 ss-col-center">
+        <view class="total-box-footer ss-flex ss-col-center">
+          <view class="total-num ss-font-30 text-red">
+            ￥{{ fen2yuan(state.orderInfo.price.payPrice) }}
+          </view>
+        </view>
+        <button
+          class="ss-reset-button ui-BG-Main-Gradient ss-r-40 submit-btn ui-Shadow-Main"
+          @tap="onConfirm"
+        >
+          提交订单
+        </button>
+      </view>
+    </su-fixed>
+  </s-layout>
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+  import { onLoad } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import { isEmpty } from 'lodash';
+  import OrderApi from '@/api/trade/order';
+  import CouponApi from '@/api/promotion/coupon';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
+
+  const state = reactive({
+    orderPayload: {},
+    orderInfo: {
+      items: [], // 商品项列表
+      price: {}, // 价格信息
+    },
+    addressInfo: {}, // 选择的收货地址
+    showCoupon: false, // 是否展示优惠劵
+    couponInfo: [], // 优惠劵列表
+    showDiscount: false, // 是否展示营销活动
+  });
+
+  // 选择地址
+  function onSelectAddress() {
+    uni.$once('SELECT_ADDRESS', (e) => {
+      changeConsignee(e.addressInfo);
+    });
+    sheep.$router.go('/pages/user/address/list');
+  }
+
+  // 更改收货人地址&计算订单信息
+  async function changeConsignee(addressInfo = {}) {
+    if (!isEmpty(addressInfo)) {
+      state.addressInfo = addressInfo;
+    }
+    await getOrderInfo();
+  }
+
+  // 选择优惠券
+  async function onSelectCoupon(couponId) {
+    state.orderPayload.couponId = couponId || 0;
+    await getOrderInfo();
+    state.showCoupon = false;
+  }
+
+  // 提交订单
+  function onConfirm() {
+    if (!state.addressInfo.id) {
+      sheep.$helper.toast('请选择收货地址');
+      return;
+    }
+    submitOrder();
+  }
+
+  // 创建订单&跳转
+  async function submitOrder() {
+    const { code, data } = await OrderApi.createOrder({
+      items: state.orderPayload.items,
+      couponId: state.orderPayload.couponId,
+      addressId: state.addressInfo.id,
+      deliveryType: 1, // TODO 芋艿：需要支持【门店自提】
+      pointStatus: false, // TODO 芋艿：需要支持【积分选择】
+      combinationActivityId: state.orderPayload.combinationActivityId,
+      combinationHeadId: state.orderPayload.combinationHeadId,
+      seckillActivityId: state.orderPayload.seckillActivityId
+    });
+    if (code !== 0) {
+      return;
+    }
+    // 更新购物车列表，如果来自购物车
+    if (state.orderPayload.items[0].cartId > 0) {
+      sheep.$store('cart').getList();
+    }
+    // 跳转到支付页面
+    sheep.$router.redirect('/pages/pay/index', {
+      id: data.payOrderId,
+    });
+  }
+
+  // 检查库存 & 计算订单价格
+  async function getOrderInfo() {
+    // 计算价格
+    const { data, code } = await OrderApi.settlementOrder({
+      items: state.orderPayload.items,
+      couponId: state.orderPayload.couponId,
+      addressId: state.addressInfo.id,
+      deliveryType: 1, // TODO 芋艿：需要支持【门店自提】
+      pointStatus: false, // TODO 芋艿：需要支持【积分选择】
+      combinationActivityId: state.orderPayload.combinationActivityId,
+      combinationHeadId: state.orderPayload.combinationHeadId,
+      seckillActivityId: state.orderPayload.seckillActivityId
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.orderInfo = data;
+    // 设置收货地址
+    if (state.orderInfo.address) {
+      state.addressInfo = state.orderInfo.address;
+    }
+  }
+
+  // 获取可用优惠券
+  async function getCoupons() {
+    const { code, data } = await CouponApi.getMatchCouponList(
+      state.orderInfo.price.payPrice,
+      state.orderInfo.items.map((item) => item.spuId),
+      state.orderPayload.items.map((item) => item.skuId),
+      state.orderPayload.items.map((item) => item.categoryId),
+    );
+    if (code === 0) {
+      state.couponInfo = data;
+    }
+  }
+
+  onLoad(async (options) => {
+    if (!options.data) {
+      sheep.$helper.toast('参数不正确，请检查！');
+      return;
+    }
+    state.orderPayload = JSON.parse(options.data);
+    await getOrderInfo();
+    await getCoupons();
+  });
+</script>
+
+<style lang="scss" scoped>
+  :deep() {
+    .uni-input-wrapper {
+      width: 320rpx;
+    }
+
+    .uni-easyinput__content-input {
+      font-size: 28rpx;
+      height: 72rpx;
+      text-align: right !important;
+      padding-right: 0 !important;
+
+      .uni-input-input {
+        font-weight: 500;
+        color: #333333;
+        font-size: 26rpx;
+        height: 32rpx;
+        margin-top: 4rpx;
+      }
+    }
+
+    .uni-easyinput__content {
+      display: flex !important;
+      align-items: center !important;
+      justify-content: right !important;
+    }
+  }
+
+  .score-img {
+    width: 36rpx;
+    height: 36rpx;
+    margin: 0 4rpx;
+  }
+
+  .order-item {
+    height: 80rpx;
+
+    .item-title {
+      font-size: 28rpx;
+      font-weight: 400;
+    }
+
+    .item-value {
+      font-size: 28rpx;
+      font-weight: 500;
+      font-family: OPPOSANS;
+    }
+
+    .text-disabled {
+      color: #bbbbbb;
+    }
+
+    .item-icon {
+      color: $dark-9;
+    }
+
+    .remark-input {
+      text-align: right;
+    }
+
+    .item-placeholder {
+      color: $dark-9;
+      font-size: 26rpx;
+      text-align: right;
+    }
+  }
+
+  .total-box-footer {
+    height: 90rpx;
+
+    .total-num {
+      color: #333333;
+      font-family: OPPOSANS;
+    }
+  }
+
+  .footer-box {
+    height: 100rpx;
+
+    .submit-btn {
+      width: 240rpx;
+      height: 70rpx;
+      font-size: 28rpx;
+      font-weight: 500;
+
+      .goto-pay-text {
+        line-height: 28rpx;
+      }
+    }
+
+    .cancel-btn {
+      width: 240rpx;
+      height: 80rpx;
+      font-size: 26rpx;
+      background-color: #e5e5e5;
+      color: $dark-9;
+    }
+  }
+
+  .title {
+    font-size: 36rpx;
+    font-weight: bold;
+    color: #333333;
+  }
+
+  .subtitle {
+    font-size: 28rpx;
+    color: #999999;
+  }
+
+  .cicon-checkbox {
+    font-size: 36rpx;
+    color: var(--ui-BG-Main);
+  }
+
+  .cicon-box {
+    font-size: 36rpx;
+    color: #999999;
+  }
+</style>
diff --git a/pages/order/detail.vue b/pages/order/detail.vue
new file mode 100644
index 0000000..fc640cf
--- /dev/null
+++ b/pages/order/detail.vue
@@ -0,0 +1,633 @@
+<!-- 订单详情 -->
+<template>
+  <s-layout title="订单详情" class="index-wrap" navbar="inner">
+    <!-- 订单状态 TODO -->
+    <view
+      class="state-box ss-flex-col ss-col-center ss-row-right"
+      :style="[
+        {
+          marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
+          paddingTop: Number(statusBarHeight + 88) + 'rpx',
+        },
+      ]"
+    >
+      <view class="ss-flex ss-m-t-32 ss-m-b-20">
+        <image
+          v-if="
+            state.orderInfo.status_code == 'unpaid' ||
+            state.orderInfo.status === 10 || // 待发货
+            state.orderInfo.status_code == 'nocomment'
+          "
+          class="state-img"
+          :src="sheep.$url.static('/static/img/shop/order/order_loading.png')"
+        >
+        </image>
+        <image
+          v-if="
+            state.orderInfo.status_code == 'completed' ||
+            state.orderInfo.status_code == 'refund_agree'
+          "
+          class="state-img"
+          :src="sheep.$url.static('/static/img/shop/order/order_success.png')"
+        >
+        </image>
+        <image
+          v-if="state.orderInfo.status_code == 'cancel' || state.orderInfo.status_code == 'closed'"
+          class="state-img"
+          :src="sheep.$url.static('/static/img/shop/order/order_close.png')"
+        >
+        </image>
+        <image
+          v-if="state.orderInfo.status_code == 'noget'"
+          class="state-img"
+          :src="sheep.$url.static('/static/img/shop/order/order_express.png')"
+        >
+        </image>
+        <view class="ss-font-30">{{ formatOrderStatus(state.orderInfo) }}</view>
+      </view>
+      <view class="ss-font-26 ss-m-x-20 ss-m-b-70">{{
+        formatOrderStatusDescription(state.orderInfo)
+      }}</view>
+    </view>
+
+    <!-- 收货地址 -->
+    <view class="order-address-box" v-if="state.orderInfo.receiverAreaId > 0">
+      <view class="ss-flex ss-col-center">
+        <text class="address-username">
+          {{ state.orderInfo.receiverName }}
+        </text>
+        <text class="address-phone">{{ state.orderInfo.receiverMobile }}</text>
+      </view>
+      <view class="address-detail">
+        {{ state.orderInfo.receiverAreaName }} {{ state.orderInfo.receiverDetailAddress }}
+      </view>
+    </view>
+
+    <view
+      class="detail-goods"
+      :style="[{ marginTop: state.orderInfo.receiverAreaId > 0 ? '0' : '-40rpx' }]"
+    >
+      <!-- 订单信 -->
+      <view class="order-list" v-for="item in state.orderInfo.items" :key="item.goods_id">
+        <view class="order-card">
+          <s-goods-item
+            @tap="onGoodsDetail(item.spuId)"
+            :img="item.picUrl"
+            :title="item.spuName"
+            :skuText="item.properties.map((property) => property.valueName).join(' ')"
+            :price="item.price"
+            :num="item.count"
+          >
+            <template #tool>
+              <view class="ss-flex">
+                <button
+                  class="ss-reset-button apply-btn"
+                  v-if="[10, 20, 30].includes(state.orderInfo.status) && item.afterSaleStatus === 0"
+                  @tap.stop="
+                    sheep.$router.go('/pages/order/aftersale/apply', {
+                      orderId: state.orderInfo.id,
+                      itemId: item.id,
+                    })
+                  "
+                >
+                  申请售后
+                </button>
+                <button
+                  class="ss-reset-button apply-btn"
+                  v-if="item.afterSaleStatus === 10"
+                  @tap.stop="
+                    sheep.$router.go('/pages/order/aftersale/detail', {
+                      id: item.afterSaleId,
+                    })
+                  "
+                >
+                  退款中
+                </button>
+                <button
+                  class="ss-reset-button apply-btn"
+                  v-if="item.afterSaleStatus === 20"
+                  @tap.stop="
+                    sheep.$router.go('/pages/order/aftersale/detail', {
+                      id: item.afterSaleId,
+                    })
+                  "
+                >
+                  退款成功
+                </button>
+              </view>
+            </template>
+            <template #priceSuffix>
+              <button class="ss-reset-button tag-btn" v-if="item.status_text">
+                {{ item.status_text }}
+              </button>
+            </template>
+          </s-goods-item>
+        </view>
+      </view>
+    </view>
+
+    <!-- 订单信息 -->
+    <view class="notice-box">
+      <view class="notice-box__content">
+        <view class="notice-item--center">
+          <view class="ss-flex ss-flex-1">
+            <text class="title">订单编号：</text>
+            <text class="detail">{{ state.orderInfo.no }}</text>
+          </view>
+          <button class="ss-reset-button copy-btn" @tap="onCopy">复制</button>
+        </view>
+        <view class="notice-item">
+          <text class="title">下单时间：</text>
+          <text class="detail">
+            {{ sheep.$helper.timeFormat(state.orderInfo.createTime, 'yyyy-mm-dd hh:MM:ss') }}
+          </text>
+        </view>
+        <view class="notice-item" v-if="state.orderInfo.payTime">
+          <text class="title">支付时间：</text>
+          <text class="detail">
+            {{ sheep.$helper.timeFormat(state.orderInfo.payTime, 'yyyy-mm-dd hh:MM:ss') }}
+          </text>
+        </view>
+        <view class="notice-item">
+          <text class="title">支付方式：</text>
+          <text class="detail">{{ state.orderInfo.payChannelName || '-' }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 价格信息 -->
+    <view class="order-price-box">
+      <view class="notice-item ss-flex ss-row-between">
+        <text class="title">商品总额</text>
+        <view class="ss-flex">
+          <text class="detail">￥{{ fen2yuan(state.orderInfo.totalPrice) }}</text>
+        </view>
+      </view>
+      <view class="notice-item ss-flex ss-row-between">
+        <text class="title">运费</text>
+        <text class="detail">￥{{ fen2yuan(state.orderInfo.deliveryPrice) }}</text>
+      </view>
+      <!-- TODO 芋艿：优惠劵抵扣、积分抵扣 -->
+      <view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.couponPrice > 0">
+        <text class="title">优惠劵金额</text>
+        <text class="detail">-¥{{ fen2yuan(state.orderInfo.couponPrice) }}</text>
+      </view>
+      <view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.discountPrice > 0">
+        <text class="title">活动优惠</text>
+        <text class="detail">¥{{ fen2yuan(state.orderInfo.discountPrice) }}</text>
+      </view>
+      <view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.vipPrice > 0">
+        <text class="title">会员优惠</text>
+        <text class="detail">-¥{{ fen2yuan(state.orderInfo.vipPrice) }}</text>
+      </view>
+      <view class="notice-item all-rpice-item ss-flex ss-m-t-20">
+        <text class="title">{{ state.orderInfo.payStatus ? '已付款' : '需付款' }}</text>
+        <text class="detail all-price">￥{{ fen2yuan(state.orderInfo.payPrice) }}</text>
+      </view>
+      <view
+        class="notice-item all-rpice-item ss-flex ss-m-t-20"
+        v-if="state.orderInfo.refundPrice > 0"
+      >
+        <text class="title">已退款</text>
+        <text class="detail all-price">￥{{ fen2yuan(state.orderInfo.refundPrice) }}</text>
+      </view>
+    </view>
+
+    <!-- 底部按钮 -->
+    <!-- TODO: 查看物流、等待成团、评价完后返回页面没刷新页面 -->
+    <su-fixed bottom placeholder bg="bg-white" v-if="state.orderInfo.buttons?.length">
+      <view class="footer-box ss-flex ss-col-center ss-row-right">
+        <button
+          class="ss-reset-button cancel-btn"
+          v-if="state.orderInfo.buttons?.includes('cancel')"
+          @tap="onCancel(state.orderInfo.id)"
+        >
+          取消订单
+        </button>
+        <button
+          class="ss-reset-button pay-btn ui-BG-Main-Gradient"
+          v-if="state.orderInfo.buttons?.includes('pay')"
+          @tap="onPay(state.orderInfo.payOrderId)"
+        >
+          继续支付
+        </button>
+        <button
+          class="ss-reset-button cancel-btn"
+          v-if="state.orderInfo.buttons?.includes('combination')"
+          @tap="
+            sheep.$router.go('/pages/activity/groupon/detail', {
+              id: state.orderInfo.combinationRecordId,
+            })
+          "
+        >
+          拼团详情
+        </button>
+        <button
+          class="ss-reset-button cancel-btn"
+          v-if="state.orderInfo.buttons?.includes('express')"
+          @tap="onExpress(state.orderInfo.id)"
+        >
+          查看物流
+        </button>
+        <button
+          class="ss-reset-button cancel-btn"
+          v-if="state.orderInfo.buttons?.includes('confirm')"
+          @tap="onConfirm(state.orderInfo.id)"
+        >
+          确认收货
+        </button>
+        <button
+          class="ss-reset-button cancel-btn"
+          v-if="state.orderInfo.buttons?.includes('comment')"
+          @tap="onComment(state.orderInfo.id)"
+        >
+          评价
+        </button>
+      </view>
+    </su-fixed>
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import { isEmpty } from 'lodash';
+  import {
+    fen2yuan,
+    formatOrderStatus,
+    formatOrderStatusDescription,
+    handleOrderButtons,
+  } from '@/sheep/hooks/useGoods';
+  import OrderApi from '@/api/trade/order';
+
+  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+  const headerBg = sheep.$url.css('/static/img/shop/order/order_bg.png');
+
+  const state = reactive({
+    orderInfo: {},
+    merchantTradeNo: '', // 商户订单号
+    comeinType: '', // 进入订单详情的来源类型
+  });
+
+  // 复制
+  const onCopy = () => {
+    sheep.$helper.copyText(state.orderInfo.sn);
+  };
+
+  // 去支付
+  function onPay(payOrderId) {
+    sheep.$router.go('/pages/pay/index', {
+      id: payOrderId,
+    });
+  }
+
+  // 查看商品
+  function onGoodsDetail(id) {
+    sheep.$router.go('/pages/goods/index', {
+      id,
+    });
+  }
+
+  // 取消订单
+  async function onCancel(orderId) {
+    uni.showModal({
+      title: '提示',
+      content: '确定要取消订单吗?',
+      success: async function (res) {
+        if (!res.confirm) {
+          return;
+        }
+        const { code } = await OrderApi.cancelOrder(orderId);
+        if (code === 0) {
+          await getOrderDetail(orderId);
+        }
+      },
+    });
+  }
+
+  // 查看物流
+  async function onExpress(id) {
+    sheep.$router.go('/pages/order/express/log', {
+      id,
+    });
+  }
+
+  // 确认收货 TODO 芋艿：待测试
+  async function onConfirm(orderId, ignore = false) {
+    // 需开启确认收货组件
+    // todo: 芋艿：待接入微信
+    // 1.怎么检测是否开启了发货组件功能？如果没有开启的话就不能在这里return出去
+    // 2.如果开启了走mpConfirm方法,需要在App.vue的show方法中拿到确认收货结果
+    let isOpenBusinessView = true;
+    if (
+      sheep.$platform.name === 'WechatMiniProgram' &&
+      !isEmpty(state.orderInfo.wechat_extra_data) &&
+      isOpenBusinessView &&
+      !ignore
+    ) {
+      mpConfirm(orderId);
+      return;
+    }
+
+    // 正常的确认收货流程
+    const { code } = await OrderApi.receiveOrder(orderId);
+    if (code === 0) {
+      await getOrderDetail(orderId);
+    }
+  }
+
+  // #ifdef MP-WEIXIN
+  // 小程序确认收货组件
+  function mpConfirm(orderId) {
+    if (!wx.openBusinessView) {
+      sheep.$helper.toast(`请升级微信版本`);
+      return;
+    }
+    wx.openBusinessView({
+      businessType: 'weappOrderConfirm',
+      extraData: {
+        merchant_trade_no: state.orderInfo.wechat_extra_data.merchant_trade_no,
+        transaction_id: state.orderInfo.wechat_extra_data.transaction_id,
+      },
+      success(response) {
+        console.log('success:', response);
+        if (response.errMsg === 'openBusinessView:ok') {
+          if (response.extraData.status === 'success') {
+            onConfirm(orderId, true);
+          }
+        }
+      },
+      fail(error) {
+        console.log('error:', error);
+      },
+      complete(result) {
+        console.log('result:', result);
+      },
+    });
+  }
+  // #endif
+
+  // 评价
+  function onComment(id) {
+    sheep.$router.go('/pages/goods/comment/add', {
+      id
+    });
+  }
+
+  async function getOrderDetail(id) {
+    // 对详情数据进行适配
+    let res;
+    if (state.comeinType === 'wechat') {
+      // TODO 芋艿：微信场景下
+      res = await OrderApi.getOrder(id, {
+        merchant_trade_no: state.merchantTradeNo,
+      });
+    } else {
+      res = await OrderApi.getOrder(id);
+    }
+    if (res.code === 0) {
+      state.orderInfo = res.data;
+      handleOrderButtons(state.orderInfo);
+    } else {
+      sheep.$router.back();
+    }
+  }
+
+  onLoad(async (options) => {
+    let id = 0;
+    if (options.id) {
+      id = options.id;
+    }
+    // TODO 芋艿：下面两个变量，后续接入
+    state.comeinType = options.comein_type;
+    if (state.comeinType === 'wechat') {
+      state.merchantTradeNo = options.merchant_trade_no;
+    }
+    await getOrderDetail(id);
+  });
+</script>
+
+<style lang="scss" scoped>
+  .score-img {
+    width: 36rpx;
+    height: 36rpx;
+    margin: 0 4rpx;
+  }
+
+  .apply-btn {
+    width: 140rpx;
+    height: 50rpx;
+    border-radius: 25rpx;
+    font-size: 24rpx;
+    border: 2rpx solid #dcdcdc;
+    line-height: normal;
+    margin-left: 16rpx;
+  }
+
+  .state-box {
+    color: rgba(#fff, 0.9);
+    width: 100%;
+    background: v-bind(headerBg) no-repeat,
+      linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    background-size: 750rpx 100%;
+    box-sizing: border-box;
+
+    .state-img {
+      width: 60rpx;
+      height: 60rpx;
+      margin-right: 20rpx;
+    }
+  }
+
+  .order-address-box {
+    background-color: #fff;
+    border-radius: 10rpx;
+    margin: -50rpx 20rpx 16rpx 20rpx;
+    padding: 44rpx 34rpx 42rpx 20rpx;
+    font-size: 30rpx;
+    box-sizing: border-box;
+    font-weight: 500;
+    color: rgba(51, 51, 51, 1);
+
+    .address-username {
+      margin-right: 20rpx;
+    }
+
+    .address-detail {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: rgba(153, 153, 153, 1);
+      margin-top: 20rpx;
+    }
+  }
+
+  .detail-goods {
+    border-radius: 10rpx;
+    margin: 0 20rpx 20rpx 20rpx;
+
+    .order-list {
+      margin-bottom: 20rpx;
+      background-color: #fff;
+
+      .order-card {
+        padding: 20rpx 0;
+
+        .order-sku {
+          font-size: 24rpx;
+
+          font-weight: 400;
+          color: rgba(153, 153, 153, 1);
+          width: 450rpx;
+          margin-bottom: 20rpx;
+
+          .order-num {
+            margin-right: 10rpx;
+          }
+        }
+
+        .tag-btn {
+          margin-left: 16rpx;
+          font-size: 24rpx;
+          height: 36rpx;
+          color: var(--ui-BG-Main);
+          border: 2rpx solid var(--ui-BG-Main);
+          border-radius: 14rpx;
+          padding: 0 4rpx;
+        }
+      }
+    }
+  }
+
+  // 订单信息。
+  .notice-box {
+    background: #fff;
+    border-radius: 10rpx;
+    margin: 0 20rpx 20rpx 20rpx;
+
+    .notice-box__head {
+      font-size: 30rpx;
+
+      font-weight: 500;
+      color: rgba(51, 51, 51, 1);
+      line-height: 80rpx;
+      border-bottom: 1rpx solid #dfdfdf;
+      padding: 0 25rpx;
+    }
+
+    .notice-box__content {
+      padding: 20rpx;
+
+      .self-pickup-box {
+        width: 100%;
+
+        .self-pickup--img {
+          width: 200rpx;
+          height: 200rpx;
+          margin: 40rpx 0;
+        }
+      }
+    }
+
+    .notice-item,
+    .notice-item--center {
+      display: flex;
+      align-items: center;
+      line-height: normal;
+      margin-bottom: 24rpx;
+
+      .title {
+        font-size: 28rpx;
+        color: #999;
+      }
+
+      .detail {
+        font-size: 28rpx;
+        color: #333;
+        flex: 1;
+      }
+    }
+  }
+
+  .copy-btn {
+    width: 100rpx;
+    line-height: 50rpx;
+    border-radius: 25rpx;
+    padding: 0;
+    background: rgba(238, 238, 238, 1);
+    font-size: 22rpx;
+    font-weight: 400;
+    color: rgba(51, 51, 51, 1);
+  }
+
+  // 订单价格信息
+  .order-price-box {
+    background-color: #fff;
+    border-radius: 10rpx;
+    padding: 20rpx;
+    margin: 0 20rpx 20rpx 20rpx;
+
+    .notice-item {
+      line-height: 70rpx;
+
+      .title {
+        font-size: 28rpx;
+        color: #999;
+      }
+
+      .detail {
+        font-size: 28rpx;
+        color: #333;
+        font-family: OPPOSANS;
+      }
+    }
+
+    .all-rpice-item {
+      justify-content: flex-end;
+      align-items: center;
+
+      .title {
+        font-size: 26rpx;
+        font-weight: 500;
+        color: #333333;
+        line-height: normal;
+      }
+
+      .all-price {
+        font-size: 26rpx;
+        font-family: OPPOSANS;
+        line-height: normal;
+        color: $red;
+      }
+    }
+  }
+
+  // 底部
+  .footer-box {
+    height: 100rpx;
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: 10rpx;
+    padding-right: 20rpx;
+
+    .cancel-btn {
+      width: 160rpx;
+      height: 60rpx;
+      background: #eeeeee;
+      border-radius: 30rpx;
+      margin-right: 20rpx;
+      font-size: 26rpx;
+      font-weight: 400;
+      color: #333333;
+    }
+
+    .pay-btn {
+      width: 160rpx;
+      height: 60rpx;
+      font-size: 26rpx;
+      border-radius: 30rpx;
+      font-weight: 500;
+      color: #fff;
+    }
+  }
+</style>
diff --git a/pages/order/express/log.vue b/pages/order/express/log.vue
new file mode 100644
index 0000000..423a249
--- /dev/null
+++ b/pages/order/express/log.vue
@@ -0,0 +1,162 @@
+<!-- 物流追踪 -->
+<template>
+  <s-layout title="物流追踪">
+    <view class="log-wrap">
+      <!-- 商品信息 -->
+      <view class="log-card ss-flex ss-m-20 ss-r-10" v-if="goodsImages.length > 0">
+        <uni-swiper-dot :info="goodsImages" :current="state.current" mode="round">
+          <swiper class="swiper-box">
+            <swiper-item v-for="(item, index) in goodsImages" :key="index">
+              <image class="log-card-img" :src="sheep.$url.static(item.image)" />
+            </swiper-item>
+          </swiper>
+        </uni-swiper-dot>
+        <view class="log-card-msg">
+          <!-- TODO 芋艿：优化点：展示状态 -->
+<!--          <view class="ss-flex ss-m-b-8">-->
+<!--            <view>物流状态：</view>-->
+<!--            <view class="warning-color">{{ state.info.status_text }}</view>-->
+<!--          </view>-->
+          <view class="ss-m-b-8">快递单号：{{ state.info.logisticsNo }}</view>
+          <view>快递公司：{{ state.info.logisticsName }}</view>
+        </view>
+      </view>
+
+      <!-- 物流轨迹 -->
+      <view class="log-content ss-m-20 ss-r-10">
+        <view
+          class="log-content-box ss-flex"
+          v-for="(item, index) in state.tracks"
+          :key="item.title"
+        >
+          <view class="log-icon ss-flex-col ss-col-center ss-m-r-20">
+            <text class="cicon-title" />
+            <view v-if="state.tracks.length - 1 !== index" class="line" />
+          </view>
+          <view class="log-content-msg">
+            <!-- TODO 芋艿：优化点：展示状态 -->
+<!--            <view class="log-msg-title ss-m-b-20">-->
+<!--              {{ item.status_text }}-->
+<!--            </view>-->
+            <view class="log-msg-desc ss-m-b-16">{{ item.content }}</view>
+            <view class="log-msg-date ss-m-b-40">
+              {{ sheep.$helper.timeFormat(item.time, 'yyyy-mm-dd hh:MM:ss') }}
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad } from '@dcloudio/uni-app';
+  import { computed, reactive } from 'vue';
+  import OrderApi from '@/api/trade/order';
+
+  const state = reactive({
+    info: [],
+    tracks: [],
+  });
+
+  const goodsImages = computed(() => {
+    let array = [];
+    if (state.info.items) {
+      state.info.items.forEach((item) => {
+        array.push({
+          image: item.picUrl,
+        });
+      });
+    }
+    return array;
+  });
+
+  async function getExpressDetail(id) {
+    const { data } = await OrderApi.getOrderExpressTrackList(id);
+    state.tracks = data.reverse();
+  }
+
+  async function getOrderDetail(id) {
+    const { data } = await OrderApi.getOrder(id)
+    state.info = data;
+  }
+
+  onLoad((options) => {
+    getExpressDetail(options.id);
+    getOrderDetail(options.id);
+  });
+</script>
+
+<style lang="scss" scoped>
+  .swiper-box {
+    width: 200rpx;
+    height: 200rpx;
+  }
+  .log-card {
+    border-top: 2rpx solid rgba(#dfdfdf, 0.5);
+    padding: 20rpx;
+    background: #fff;
+    margin-bottom: 20rpx;
+    .log-card-img {
+      width: 200rpx;
+      height: 200rpx;
+      margin-right: 20rpx;
+    }
+    .log-card-msg {
+      font-size: 28rpx;
+      font-weight: 500;
+      width: 490rpx;
+      color: #333333;
+      .warning-color {
+        color: #999;
+      }
+    }
+  }
+  .log-content {
+    padding: 34rpx 20rpx 0rpx 20rpx;
+    background: #fff;
+    .log-content-box {
+      align-items: stretch;
+    }
+    .log-icon {
+      height: inherit;
+      .cicon-title {
+        color: #ccc;
+        font-size: 40rpx;
+      }
+      .activity-color {
+        color: #f0c785;
+        font-size: 40rpx;
+      }
+      .info-color {
+        color: #ccc;
+        font-size: 40rpx;
+      }
+      .line {
+        width: 1px;
+        height: 100%;
+        background: #d8d8d8;
+      }
+    }
+
+    .log-content-msg {
+      .log-msg-title {
+        font-size: 28rpx;
+        font-weight: bold;
+        color: #333333;
+      }
+      .log-msg-desc {
+        font-size: 24rpx;
+        font-weight: 400;
+        color: #333333;
+        line-height: 36rpx;
+      }
+      .log-msg-date {
+        font-size: 24rpx;
+        font-weight: 500;
+        color: #999999;
+      }
+    }
+  }
+</style>
diff --git a/pages/order/list.vue b/pages/order/list.vue
new file mode 100644
index 0000000..7db64fa
--- /dev/null
+++ b/pages/order/list.vue
@@ -0,0 +1,453 @@
+<!-- 订单列表 -->
+<template>
+	<s-layout title="我的订单">
+		<su-sticky bgColor="#fff">
+			<su-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab" />
+		</su-sticky>
+		<s-empty v-if="state.pagination.total === 0" icon="/static/order-empty.png" text="暂无订单" />
+		<view v-if="state.pagination.total > 0">
+			<view class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20" v-for="order in state.pagination.list"
+            :key="order.id" @tap="onOrderDetail(order.id)">
+				<view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
+					<view class="order-no">订单号：{{ order.no }}</view>
+					<view class="order-state ss-font-26" :class="formatOrderColor(order)">
+            {{ formatOrderStatus(order) }}
+          </view>
+				</view>
+				<view class="border-bottom" v-for="item in order.items" :key="item.id">
+					<s-goods-item
+            :img="item.picUrl"
+            :title="item.spuName"
+						:skuText="item.properties.map((property) => property.valueName).join(' ')"
+						:price="item.price"
+            :num="item.count"
+          />
+				</view>
+				<view class="pay-box ss-m-t-30 ss-flex ss-row-right ss-p-r-20">
+					<view class="ss-flex ss-col-center">
+						<view class="discounts-title pay-color">共 {{ order.productCount }} 件商品,总金额:</view>
+						<view class="discounts-money pay-color">
+							￥{{ fen2yuan(order.payPrice) }}
+            </view>
+					</view>
+				</view>
+				<view class="order-card-footer ss-flex ss-col-center ss-p-x-20"
+              :class="order.buttons.length > 3 ? 'ss-row-between' : 'ss-row-right'">
+					<view class="ss-flex ss-col-center">
+						<button v-if="order.buttons.includes('combination')" class="tool-btn ss-reset-button"
+							@tap.stop="onOrderGroupon(order)">
+              拼团详情
+						</button>
+						<button v-if="order.buttons.length === 0" class="tool-btn ss-reset-button"
+                    @tap.stop="onOrderDetail(order.id)">
+              查看详情
+						</button>
+						<button v-if="order.buttons.includes('confirm')" class="tool-btn ss-reset-button"
+                    @tap.stop="onConfirm(order)">
+              确认收货
+						</button>
+						<button v-if="order.buttons.includes('express')" class="tool-btn ss-reset-button"
+                    @tap.stop="onExpress(order.id)">
+							查看物流
+						</button>
+						<button v-if="order.buttons.includes('cancel')" class="tool-btn ss-reset-button"
+                    @tap.stop="onCancel(order.id)">
+							取消订单
+						</button>
+						<button v-if="order.buttons.includes('comment')" class="tool-btn ss-reset-button"
+                    @tap.stop="onComment(order.id)">
+							评价
+						</button>
+						<button v-if="order.buttons.includes('delete')" class="delete-btn ss-reset-button"
+                    @tap.stop="onDelete(order.id)">
+							删除订单
+						</button>
+						<button v-if="order.buttons.includes('pay')" class="tool-btn ss-reset-button ui-BG-Main-Gradient"
+                    @tap.stop="onPay(order.payOrderId)">
+							继续支付
+						</button>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 加载更多 -->
+		<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
+        contentdown: '上拉加载更多',
+      }" @tap="loadMore" />
+	</s-layout>
+</template>
+
+<script setup>
+	import { reactive } from 'vue';
+	import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
+  import {
+    fen2yuan,
+    formatOrderColor, formatOrderStatus, handleOrderButtons,
+  } from '@/sheep/hooks/useGoods';
+	import sheep from '@/sheep';
+	import _ from 'lodash';
+	import {
+		isEmpty
+	} from 'lodash';
+  import OrderApi from '@/api/trade/order';
+  import { resetPagination } from '@/sheep/util';
+
+	// 数据
+	const state = reactive({
+		currentTab: 0, // 选中的 tabMaps 下标
+		pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 5,
+		},
+		loadStatus: ''
+	});
+
+	const tabMaps = [{
+			name: '全部'
+		},
+		{
+			name: '待付款',
+			value: 0,
+		},
+		{
+			name: '待发货',
+			value: 10,
+		},
+		{
+			name: '待收货',
+			value: 20,
+		},
+		{
+			name: '待评价',
+			value: 30,
+		},
+	];
+
+	// 切换选项卡
+	function onTabsChange(e) {
+		if (state.currentTab === e.index) {
+      return;
+    }
+    // 重头加载代码
+		resetPagination(state.pagination);
+		state.currentTab = e.index;
+		getOrderList();
+	}
+
+	// 订单详情
+	function onOrderDetail(id) {
+		sheep.$router.go('/pages/order/detail', {
+			id,
+		});
+	}
+
+	// 跳转拼团记录的详情
+	function onOrderGroupon(order) {
+		sheep.$router.go('/pages/activity/groupon/detail', {
+			id: order.combinationRecordId,
+		});
+	}
+
+	// 继续支付
+	function onPay(payOrderId) {
+		sheep.$router.go('/pages/pay/index', {
+			id: payOrderId,
+		});
+	}
+
+	// 评价
+	function onComment(id) {
+		sheep.$router.go('/pages/goods/comment/add', {
+			id,
+		});
+	}
+
+	// 确认收货 TODO 芋艿：待测试
+	async function onConfirm(order, ignore = false) {
+		// 需开启确认收货组件
+		// todo: 芋艿：需要后续接入微信收货组件
+		// 1.怎么检测是否开启了发货组件功能？如果没有开启的话就不能在这里return出去
+		// 2.如果开启了走mpConfirm方法,需要在App.vue的show方法中拿到确认收货结果
+		let isOpenBusinessView = true;
+		if (
+			sheep.$platform.name === 'WechatMiniProgram' &&
+			!isEmpty(order.wechat_extra_data) &&
+			isOpenBusinessView &&
+			!ignore
+		) {
+			mpConfirm(order);
+			return;
+		}
+
+		// 正常的确认收货流程
+		const { code } = await OrderApi.receiveOrder(order.id);
+		if (code === 0) {
+      resetPagination(state.pagination);
+      await getOrderList();
+		}
+	}
+
+	// #ifdef MP-WEIXIN
+	// 小程序确认收货组件 TODO 芋艿：后续再接入
+	function mpConfirm(order) {
+		if (!wx.openBusinessView) {
+			sheep.$helper.toast(`请升级微信版本`);
+			return;
+		}
+		wx.openBusinessView({
+			businessType: 'weappOrderConfirm',
+			extraData: {
+				merchant_id: '1481069012',
+				merchant_trade_no: order.wechat_extra_data.merchant_trade_no,
+				transaction_id: order.wechat_extra_data.transaction_id,
+			},
+			success(response) {
+				console.log('success:', response);
+				if (response.errMsg === 'openBusinessView:ok') {
+					if (response.extraData.status === 'success') {
+						onConfirm(order, true);
+					}
+				}
+			},
+			fail(error) {
+				console.log('error:', error);
+			},
+			complete(result) {
+				console.log('result:', result);
+			},
+		});
+	}
+	// #endif
+
+	// 查看物流
+	async function onExpress(id) {
+		sheep.$router.go('/pages/order/express/log', {
+      id,
+		});
+	}
+
+	// 取消订单
+	async function onCancel(orderId) {
+		uni.showModal({
+			title: '提示',
+			content: '确定要取消订单吗?',
+			success: async function(res) {
+				if (!res.confirm) {
+          return;
+				}
+        const { code } = await OrderApi.cancelOrder(orderId);
+        if (code === 0) {
+          // 修改数据的状态
+          let index = state.pagination.list.findIndex((order) => order.id === orderId);
+          const orderInfo = state.pagination.list[index];
+          orderInfo.status = 40;
+          handleOrderButtons(orderInfo);
+        }
+			},
+		});
+	}
+
+	// 删除订单
+	function onDelete(orderId) {
+		uni.showModal({
+			title: '提示',
+			content: '确定要删除订单吗?',
+			success: async function(res) {
+				if (res.confirm) {
+					const { code } = await OrderApi.deleteOrder(orderId);
+					if (code === 0) {
+            // 删除数据
+						let index = state.pagination.list.findIndex((order) => order.id === orderId);
+						state.pagination.list.splice(index, 1);
+					}
+				}
+			},
+		});
+	}
+
+	// 获取订单列表
+	async function getOrderList() {
+		state.loadStatus = 'loading';
+		let { code, data } = await OrderApi.getOrderPage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+      status: tabMaps[state.currentTab].value,
+			commentStatus: tabMaps[state.currentTab].value === 30 ? false : null
+		});
+    if (code !== 0) {
+      return;
+    }
+    data.list.forEach(order => handleOrderButtons(order));
+    state.pagination.list = _.concat(state.pagination.list, data.list)
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+	onLoad(async (options) => {
+		if (options.type) {
+			state.currentTab = options.type;
+		}
+		await getOrderList();
+	});
+
+	// 加载更多
+	function loadMore() {
+		if (state.loadStatus === 'noMore') {
+      return
+		}
+    state.pagination.pageNo++;
+    getOrderList();
+  }
+
+	// 上拉加载更多
+	onReachBottom(() => {
+		loadMore();
+	});
+
+	// 下拉刷新
+	onPullDownRefresh(() => {
+    resetPagination(state.pagination);
+		getOrderList();
+		setTimeout(function() {
+			uni.stopPullDownRefresh();
+		}, 800);
+	});
+</script>
+
+<style lang="scss" scoped>
+	.score-img {
+		width: 36rpx;
+		height: 36rpx;
+		margin: 0 4rpx;
+	}
+
+	.tool-btn {
+		width: 160rpx;
+		height: 60rpx;
+		background: #f6f6f6;
+		font-size: 26rpx;
+		border-radius: 30rpx;
+		margin-right: 10rpx;
+
+		&:last-of-type {
+			margin-right: 0;
+		}
+	}
+
+	.delete-btn {
+		width: 160rpx;
+		height: 56rpx;
+		color: #ff3000;
+		background: #fee;
+		border-radius: 28rpx;
+		font-size: 26rpx;
+		margin-right: 10rpx;
+		line-height: normal;
+
+		&:last-of-type {
+			margin-right: 0;
+		}
+	}
+
+	.apply-btn {
+		width: 140rpx;
+		height: 50rpx;
+		border-radius: 25rpx;
+		font-size: 24rpx;
+		border: 2rpx solid #dcdcdc;
+		line-height: normal;
+		margin-left: 16rpx;
+	}
+
+	.swiper-box {
+		flex: 1;
+
+		.swiper-item {
+			height: 100%;
+			width: 100%;
+		}
+	}
+
+	.order-list-card-box {
+		.order-card-header {
+			height: 80rpx;
+
+			.order-no {
+				font-size: 26rpx;
+				font-weight: 500;
+			}
+
+			.order-state {}
+		}
+
+		.pay-box {
+			.discounts-title {
+				font-size: 24rpx;
+				line-height: normal;
+				color: #999999;
+			}
+
+			.discounts-money {
+				font-size: 24rpx;
+				line-height: normal;
+				color: #999;
+				font-family: OPPOSANS;
+			}
+
+			.pay-color {
+				color: #333;
+			}
+		}
+
+		.order-card-footer {
+			height: 100rpx;
+
+			.more-item-box {
+				padding: 20rpx;
+
+				.more-item {
+					height: 60rpx;
+
+					.title {
+						font-size: 26rpx;
+					}
+				}
+			}
+
+			.more-btn {
+				color: $dark-9;
+				font-size: 24rpx;
+			}
+
+			.content {
+				width: 154rpx;
+				color: #333333;
+				font-size: 26rpx;
+				font-weight: 500;
+			}
+		}
+	}
+
+	:deep(.uni-tooltip-popup) {
+		background: var(--ui-BG);
+	}
+
+	.warning-color {
+		color: #faad14;
+	}
+
+	.danger-color {
+		color: #ff3000;
+	}
+
+	.success-color {
+		color: #52c41a;
+	}
+
+	.info-color {
+		color: #999999;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/pay/index.vue b/pages/pay/index.vue
new file mode 100644
index 0000000..10edd5b
--- /dev/null
+++ b/pages/pay/index.vue
@@ -0,0 +1,288 @@
+<!-- 收银台 -->
+<template>
+  <s-layout title="收银台">
+    <view class="bg-white ss-modal-box ss-flex-col">
+      <!-- 订单信息 -->
+      <view class="modal-header ss-flex-col ss-col-center ss-row-center">
+        <view class="money-box ss-m-b-20">
+          <text class="money-text">{{ fen2yuan(state.orderInfo.price) }}</text>
+        </view>
+        <view class="time-text">
+          <text>{{ payDescText }}</text>
+        </view>
+      </view>
+
+      <!-- 支付方式 -->
+      <view class="modal-content ss-flex-1">
+        <view class="pay-title ss-p-l-30 ss-m-y-30">选择支付方式</view>
+        <radio-group @change="onTapPay">
+          <label class="pay-type-item" v-for="item in state.payMethods" :key="item.title">
+            <view
+              class="pay-item ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom"
+              :class="{ 'disabled-pay-item': item.disabled }"
+            >
+              <view class="ss-flex ss-col-center">
+                <image
+                  class="pay-icon"
+                  v-if="item.disabled"
+                  :src="sheep.$url.static('/static/img/shop/pay/cod_disabled.png')"
+                  mode="aspectFit"
+                />
+                <image
+                  class="pay-icon"
+                  v-else
+                  :src="sheep.$url.static(item.icon)"
+                  mode="aspectFit"
+                />
+                <text class="pay-title">{{ item.title }}</text>
+              </view>
+              <view class="check-box ss-flex ss-col-center ss-p-l-10">
+                <view class="userInfo-money ss-m-r-10" v-if="item.value === 'wallet'">
+                  余额: {{ fen2yuan(userWallet.balance) }}元
+                </view>
+                <radio
+                  :value="item.value"
+                  color="var(--ui-BG-Main)"
+                  style="transform: scale(0.8)"
+                  :disabled="item.disabled"
+                  :checked="state.payment === item.value"
+                />
+              </view>
+            </view>
+          </label>
+        </radio-group>
+      </view>
+
+      <!-- 工具 -->
+      <view class="modal-footer ss-flex ss-row-center ss-col-center ss-m-t-80 ss-m-b-40">
+        <button v-if="state.payStatus === 0" class="ss-reset-button past-due-btn">
+          检测支付环境中
+        </button>
+        <button v-else-if="state.payStatus === -1" class="ss-reset-button past-due-btn" disabled>
+          支付已过期
+        </button>
+        <button
+          v-else
+          class="ss-reset-button save-btn"
+          @tap="onPay"
+          :disabled="state.payStatus !== 1"
+          :class="{ 'disabled-btn': state.payStatus !== 1 }"
+        >
+          立即支付
+        </button>
+      </view>
+    </view>
+  </s-layout>
+</template>
+<script setup>
+  import { computed, reactive } from 'vue';
+  import { onLoad } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import { fen2yuan, useDurationTime } from '@/sheep/hooks/useGoods';
+  import PayOrderApi from '@/api/pay/order';
+  import PayChannelApi from '@/api/pay/channel';
+  import { getPayMethods } from '@/sheep/platform/pay';
+
+  const userWallet = computed(() => sheep.$store('user').userWallet);
+
+  // 检测支付环境
+  const state = reactive({
+    orderType: 'goods', // 订单类型; goods - 商品订单, recharge - 充值订单
+    orderInfo: {}, // 支付单信息
+    payStatus: 0, // 0=检测支付环境, -2=未查询到支付单信息， -1=支付已过期， 1=待支付，2=订单已支付
+    payMethods: [], // 可选的支付方式
+    payment: '', // 选中的支付方式
+  });
+
+  const onPay = () => {
+    if (state.payment === '') {
+      sheep.$helper.toast('请选择支付方式');
+      return;
+    }
+    if (state.payment === 'wallet') {
+      uni.showModal({
+        title: '提示',
+        content: '确定要支付吗?',
+        success: function (res) {
+          if (res.confirm) {
+            sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.id);
+          }
+        },
+      });
+    } else {
+      sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.id);
+    }
+  };
+
+  // 支付文案提示
+  const payDescText = computed(() => {
+    if (state.payStatus === 2) {
+      return '该订单已支付';
+    }
+    if (state.payStatus === 1) {
+      const time = useDurationTime(state.orderInfo.expireTime);
+      if (time.ms <= 0) {
+        state.payStatus = -1;
+        return '';
+      }
+      return `剩余支付时间 ${time.h}:${time.m}:${time.s} `;
+    }
+    if (state.payStatus === -2) {
+      return '未查询到支付单信息';
+    }
+    return '';
+  });
+
+  // 状态转换：payOrder.status => payStatus
+  function checkPayStatus() {
+    if (state.orderInfo.status === 10
+      || state.orderInfo.status === 20 ) { // 支付成功
+      state.payStatus = 2;
+      return;
+    }
+    if (state.orderInfo.status === 30) { // 支付关闭
+      state.payStatus = -1;
+      return;
+    }
+    state.payStatus = 1; // 待支付
+  }
+
+  // 切换支付方式
+  function onTapPay(e) {
+    state.payment = e.detail.value;
+  }
+
+  // 设置支付订单信息
+  async function setOrder(id) {
+    // 获得支付订单信息
+    const { data, code } = await PayOrderApi.getOrder(id);
+    if (code !== 0 || !data) {
+      state.payStatus = -2;
+      return;
+    }
+    state.orderInfo = data;
+    // 获得支付方式
+    await setPayMethods();
+    // 设置支付状态
+    checkPayStatus();
+  }
+
+  // 获得支付方式
+  async function setPayMethods() {
+    const { data, code } = await PayChannelApi.getEnableChannelCodeList(state.orderInfo.appId)
+    if (code !== 0) {
+      return
+    }
+    state.payMethods = getPayMethods(data)
+  }
+
+  onLoad((options) => {
+    if (sheep.$platform.name === 'WechatOfficialAccount'
+      && sheep.$platform.os === 'ios'
+      && !sheep.$platform.landingPage.includes('pages/pay/index')) {
+      location.reload();
+      return;
+    }
+    // 获得支付订单信息
+    let id = options.id;
+    if (options.orderType) {
+      state.orderType = options.orderType;
+    }
+    setOrder(id);
+    // 刷新钱包的缓存
+    sheep.$store('user').getWallet();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .pay-icon {
+    width: 36rpx;
+    height: 36rpx;
+    margin-right: 26rpx;
+  }
+
+  .ss-modal-box {
+    // max-height: 1000rpx;
+
+    .modal-header {
+      position: relative;
+      padding: 60rpx 20rpx 40rpx;
+
+
+      .money-text {
+        color: $red;
+        font-size: 46rpx;
+        font-weight: bold;
+        font-family: OPPOSANS;
+
+        &::before {
+          content: '￥';
+          font-size: 30rpx;
+        }
+      }
+
+      .time-text {
+        font-size: 26rpx;
+        color: $gray-b;
+      }
+
+      .close-icon {
+        position: absolute;
+        top: 10rpx;
+        right: 20rpx;
+        font-size: 46rpx;
+        opacity: 0.2;
+      }
+    }
+
+    .modal-content {
+      overflow-y: auto;
+
+      .pay-title {
+        font-size: 26rpx;
+        font-weight: 500;
+        color: #333333;
+      }
+
+      .pay-tip {
+        font-size: 26rpx;
+        color: #bbbbbb;
+      }
+
+      .pay-item {
+        height: 86rpx;
+      }
+      .disabled-pay-item {
+        .pay-title {
+          color: #999999;
+        }
+      }
+
+      .userInfo-money {
+        font-size: 26rpx;
+        color: #bbbbbb;
+        line-height: normal;
+      }
+    }
+
+    .save-btn {
+      width: 710rpx;
+      height: 80rpx;
+      border-radius: 40rpx;
+      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+      color: $white;
+    }
+    .disabled-btn {
+      background: #e5e5e5;
+      color: #999999;
+    }
+
+    .past-due-btn {
+      width: 710rpx;
+      height: 80rpx;
+      border-radius: 40rpx;
+      background-color: #999;
+      color: #fff;
+    }
+  }
+</style>
diff --git a/pages/pay/recharge-log.vue b/pages/pay/recharge-log.vue
new file mode 100644
index 0000000..632aff9
--- /dev/null
+++ b/pages/pay/recharge-log.vue
@@ -0,0 +1,165 @@
+<!-- 充值记录 -->
+<template>
+  <s-layout class="widthdraw-log-wrap" title="充值记录">
+    <!-- 记录卡片 -->
+    <view class="wallet-log-box ss-p-b-30">
+      <view class="log-list" v-for="item in state.pagination.list" :key="item">
+        <view class="head ss-flex ss-col-center ss-row-between">
+          <view class="title">充值金额</view>
+          <view class="num" :class="item.refundStatus === 10 ? 'danger-color' : 'success-color'">
+            {{ fen2yuan(item.payPrice) }} 元
+            <text v-if="item.bonusPrice > 0">（赠送 {{ fen2yuan(item.bonusPrice)}} 元）</text>
+          </view>
+        </view>
+        <view class="status-box item ss-flex ss-col-center ss-row-between">
+          <view class="item-title">支付状态</view>
+          <view
+            class="status-text"
+            :class="item.refundStatus === 10 ? 'danger-color' : 'success-color'"
+          >
+            {{ item.refundStatus === 10 ? '已退款' : '已支付' }}
+          </view>
+        </view>
+        <view class="time-box item ss-flex ss-col-center ss-row-between">
+          <text class="item-title">充值渠道</text>
+          <view class="time ss-ellipsis-1">{{ item.payChannelName }}</view>
+        </view>
+        <view class="time-box item ss-flex ss-col-center ss-row-between">
+          <text class="item-title">充值单号</text>
+          <view class="time"> {{ item.payOrderChannelOrderNo }} </view>
+        </view>
+        <view class="time-box item ss-flex ss-col-center ss-row-between">
+          <text class="item-title">充值时间</text>
+          <view class="time"> {{ sheep.$helper.timeFormat(item.payTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
+        </view>
+      </view>
+    </view>
+    <s-empty
+      v-if="state.pagination.total === 0"
+      icon="/static/comment-empty.png"
+      text="暂无充值记录"
+    />
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="loadMore"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import _ from 'lodash';
+  import PayWalletApi from '@/api/pay/wallet';
+  import sheep from '@/sheep';
+  import { fen2yuan } from '../../sheep/hooks/useGoods';
+
+  const state = reactive({
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 5,
+    },
+    loadStatus: '',
+  });
+
+  async function getLogList(page = 1, list_rows = 5) {
+    const { code, data } = await PayWalletApi.getWalletRechargePage({
+      pageNo: page,
+      pageSize: list_rows,
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getLogList();
+  }
+
+  onLoad(() => {
+    getLogList();
+  });
+
+  onReachBottom(() => {
+    loadMore();
+  });
+</script>
+
+<style lang="scss" scoped>
+  // 记录卡片
+  .log-list {
+    min-height: 213rpx;
+    background: $white;
+    margin-bottom: 10rpx;
+    padding-bottom: 10rpx;
+
+    .head {
+      padding: 0 35rpx;
+      height: 80rpx;
+      border-bottom: 1rpx solid $gray-e;
+      margin-bottom: 20rpx;
+
+      .title {
+        font-size: 28rpx;
+        font-weight: 500;
+        color: $dark-3;
+      }
+
+      .num {
+        font-size: 28rpx;
+        font-weight: 500;
+      }
+    }
+
+    .item {
+      padding: 0 30rpx 10rpx;
+
+      .item-icon {
+        color: $gray-d;
+        font-size: 36rpx;
+        margin-right: 8rpx;
+      }
+
+      .item-title {
+        width: 180rpx;
+        font-size: 24rpx;
+        font-weight: 400;
+        color: #666666;
+      }
+
+      .status-text {
+        font-size: 24rpx;
+        font-weight: 500;
+      }
+
+      .time {
+        font-size: 24rpx;
+        font-weight: 400;
+        color: #c0c0c0;
+      }
+    }
+  }
+  .warning-color {
+    color: #faad14;
+  }
+  .danger-color {
+    color: #ff4d4f;
+  }
+  .success-color {
+    color: #67c23a;
+  }
+</style>
diff --git a/pages/pay/recharge.vue b/pages/pay/recharge.vue
new file mode 100644
index 0000000..482a119
--- /dev/null
+++ b/pages/pay/recharge.vue
@@ -0,0 +1,259 @@
+<!-- 充值界面 -->
+<template>
+	<s-layout title="充值" class="withdraw-wrap" navbar="inner">
+		<view class="wallet-num-box ss-flex ss-col-center ss-row-between" :style="[
+      {
+        marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
+        paddingTop: Number(statusBarHeight + 108) + 'rpx',
+      },
+    ]">
+			<view class="">
+				<view class="num-title">当前余额（元）</view>
+				<view class="wallet-num">{{ fen2yuan(userWallet.balance) }}</view>
+			</view>
+			<button class="ss-reset-button log-btn" @tap="sheep.$router.go('/pages/pay/recharge-log')">
+        充值记录
+      </button>
+		</view>
+		<view class="recharge-box">
+			<view class="recharge-card-box">
+				<view class="input-label ss-m-b-50">充值金额</view>
+				<view class="input-box ss-flex border-bottom ss-p-b-20">
+					<view class="unit">￥</view>
+					<uni-easyinput v-model="state.recharge_money" type="digit" placeholder="请输入充值金额"
+                         :inputBorder="false" />
+				</view>
+				<view class="face-value-box ss-flex ss-flex-wrap ss-m-y-40">
+					<button class="ss-reset-button face-value-btn" v-for="item in state.packageList" :key="item.money"
+						:class="[{ 'btn-active': state.recharge_money === fen2yuan(item.payPrice) }]"
+						@tap="onCard(item.payPrice)">
+						<text class="face-value-title">{{ fen2yuan(item.payPrice) }}</text>
+						<view v-if="item.bonusPrice" class="face-value-tag">
+							送 {{ fen2yuan(item.bonusPrice) }} 元
+            </view>
+					</button>
+				</view>
+				<button class="ss-reset-button save-btn ui-BG-Main-Gradient ss-m-t-60 ui-Shadow-Main" @tap="onConfirm">
+					确认充值
+				</button>
+			</view>
+		</view>
+	</s-layout>
+</template>
+
+<script setup>
+	import { computed, reactive } from 'vue';
+	import sheep from '@/sheep';
+	import { onLoad } from '@dcloudio/uni-app';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
+  import PayWalletApi from '@/api/pay/wallet';
+
+	const userWallet = computed(() => sheep.$store('user').userWallet);
+	const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+	const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
+
+	const state = reactive({
+		recharge_money: '', // 输入的充值金额
+    packageList: [],
+	});
+
+	// 点击卡片，选择充值金额
+	function onCard(e) {
+		state.recharge_money = fen2yuan(e);
+	}
+
+  // 获得钱包充值套餐列表
+	async function getRechargeTabs() {
+    const { code, data } = await PayWalletApi.getWalletRechargePackageList();
+    if (code !== 0) {
+      return;
+    }
+    state.packageList = data;
+	}
+
+  // 发起支付
+	async function onConfirm() {
+		const { code, data } = await PayWalletApi.createWalletRecharge({
+			packageId: state.packageList.find((item) => fen2yuan(item.payPrice) === state.recharge_money)?.id,
+			payPrice: state.recharge_money * 100
+		});
+		if (code !== 0) {
+			return;
+		}
+    // #ifdef MP
+    sheep.$platform.useProvider('wechat').subscribeMessage('money_change');
+    // #endif
+    sheep.$router.go('/pages/pay/index', {
+      id: data.payOrderId,
+      orderType: 'recharge'
+    });
+	}
+
+	onLoad(() => {
+		getRechargeTabs();
+	});
+</script>
+
+<style lang="scss" scoped>
+	:deep() {
+		.uni-input-input {
+			font-family: OPPOSANS !important;
+		}
+	}
+
+	.wallet-num-box {
+		padding: 0 40rpx 80rpx;
+		background: var(--ui-BG-Main) v-bind(headerBg) center/750rpx 100% no-repeat;
+		border-radius: 0 0 5% 5%;
+
+		.num-title {
+			font-size: 26rpx;
+			font-weight: 500;
+			color: $white;
+			margin-bottom: 20rpx;
+		}
+
+		.wallet-num {
+			font-size: 60rpx;
+			font-weight: 500;
+			color: $white;
+			font-family: OPPOSANS;
+		}
+
+		.log-btn {
+			width: 170rpx;
+			height: 60rpx;
+			line-height: 60rpx;
+			border: 1rpx solid $white;
+			border-radius: 30rpx;
+			padding: 0;
+			font-size: 26rpx;
+			font-weight: 500;
+			color: $white;
+		}
+	}
+
+	.recharge-box {
+		position: relative;
+		padding: 0 30rpx;
+		margin-top: -60rpx;
+	}
+
+	.save-btn {
+		width: 620rpx;
+		height: 86rpx;
+		border-radius: 44rpx;
+		font-size: 30rpx;
+	}
+
+	.recharge-card-box {
+		width: 690rpx;
+		background: var(--ui-BG);
+		border-radius: 20rpx;
+		padding: 30rpx;
+		box-sizing: border-box;
+
+		.input-label {
+			font-size: 30rpx;
+			font-weight: 500;
+			color: #333;
+		}
+
+		.unit {
+			display: flex;
+			align-items: center;
+			font-size: 48rpx;
+			font-weight: 500;
+		}
+
+		.uni-easyinput__placeholder-class {
+			font-size: 30rpx;
+			height: 60rpx;
+			display: flex;
+			align-items: center;
+		}
+
+		:deep(.uni-easyinput__content-input) {
+			font-size: 48rpx;
+		}
+
+		.face-value-btn {
+			width: 200rpx;
+			height: 144rpx;
+			border: 1px solid var(--ui-BG-Main);
+			border-radius: 10rpx;
+			position: relative;
+			z-index: 1;
+			margin-bottom: 15rpx;
+			margin-right: 15rpx;
+
+			&:nth-of-type(3n) {
+				margin-right: 0;
+			}
+
+			.face-value-title {
+				font-size: 36rpx;
+				font-weight: 500;
+				color: var(--ui-BG-Main);
+				font-family: OPPOSANS;
+
+				&::after {
+					content: '元';
+					font-size: 24rpx;
+					margin-left: 6rpx;
+				}
+			}
+
+			.face-value-tag {
+				position: absolute;
+				z-index: 2;
+				height: 40rpx;
+				line-height: 40rpx;
+				background: var(--ui-BG-Main);
+				opacity: 0.8;
+				border-radius: 10rpx 0 20rpx 0;
+				top: 0;
+				left: -2rpx;
+				padding: 0 16rpx;
+				font-size: 22rpx;
+				color: $white;
+				font-family: OPPOSANS;
+			}
+
+			&::before {
+				position: absolute;
+				content: ' ';
+				width: 100%;
+				height: 100%;
+				background: var(--ui-BG-Main);
+				opacity: 0.1;
+				z-index: 0;
+				left: 0;
+				top: 0;
+			}
+		}
+
+		.btn-active {
+			z-index: 1;
+
+			&::before {
+				content: '';
+				background: var(--ui-BG-Main);
+				opacity: 1;
+			}
+
+			.face-value-title {
+				color: $white;
+				position: relative;
+				z-index: 1;
+				font-family: OPPOSANS;
+			}
+
+			.face-value-tag {
+				background: $white;
+				color: var(--ui-BG-Main);
+				font-family: OPPOSANS;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/pay/result.vue b/pages/pay/result.vue
new file mode 100644
index 0000000..d860ee7
--- /dev/null
+++ b/pages/pay/result.vue
@@ -0,0 +1,287 @@
+<!-- 支付结果页面 -->
+<template>
+  <s-layout title="支付结果" :bgStyle="{ color: '#FFF' }">
+    <view class="pay-result-box ss-flex-col ss-row-center ss-col-center">
+      <!-- 信息展示 -->
+      <view class="pay-waiting ss-m-b-30" v-if="payResult === 'waiting'" />
+      <image
+        class="pay-img ss-m-b-30"
+        v-if="payResult === 'success'"
+        :src="sheep.$url.static('/static/img/shop/order/order_pay_success.gif')"
+      />
+      <image
+        class="pay-img ss-m-b-30"
+        v-if="['failed', 'closed'].includes(payResult)"
+        :src="sheep.$url.static('/static/img/shop/order/order_paty_fail.gif')"
+      />
+      <view class="tip-text ss-m-b-30" v-if="payResult === 'success'">支付成功</view>
+      <view class="tip-text ss-m-b-30" v-if="payResult === 'failed'">支付失败</view>
+      <view class="tip-text ss-m-b-30" v-if="payResult === 'closed'">该订单已关闭</view>
+      <view class="tip-text ss-m-b-30" v-if="payResult === 'waiting'">检测支付结果...</view>
+      <view class="pay-total-num ss-flex" v-if="payResult === 'success'">
+        <view>￥{{ fen2yuan(state.orderInfo.price) }}</view>
+      </view>
+
+      <!-- 操作区 -->
+      <view class="btn-box ss-flex ss-row-center ss-m-t-50">
+        <button class="back-btn ss-reset-button" @tap="sheep.$router.go('/pages/index/index')">
+          返回首页
+        </button>
+        <button
+          class="check-btn ss-reset-button"
+          v-if="payResult === 'failed'"
+          @tap="
+            sheep.$router.redirect('/pages/pay/index', { id: state.id, orderType: state.orderType })
+          "
+        >
+          重新支付
+        </button>
+        <button class="check-btn ss-reset-button" v-if="payResult === 'success'" @tap="onOrder">
+          查看订单
+        </button>
+        <!-- TODO 芋艿：拼团接入 -->
+        <button
+          class="check-btn ss-reset-button"
+          v-if="payResult === 'success' && state.tradeOrder.type === 3"
+          @tap="sheep.$router.redirect('/pages/activity/groupon/order')"
+        >
+          我的拼团
+        </button>
+      </view>
+
+      <!-- TODO 芋艿：订阅 -->
+      <!-- #ifdef MP -->
+      <view class="subscribe-box ss-flex ss-m-t-44">
+        <image class="subscribe-img" :src="sheep.$url.static('/static/img/shop/order/cargo.png')" />
+        <view class="subscribe-title ss-m-r-48 ss-m-l-16">获取实时发货信息与订单状态</view>
+        <view class="subscribe-start" @tap="subscribeMessage">立即订阅</view>
+      </view>
+      <!-- #endif -->
+    </view>
+  </s-layout>
+</template>
+
+<script setup>
+  import { onLoad, onHide, onShow } from '@dcloudio/uni-app';
+  import { reactive, computed } from 'vue';
+  import { isEmpty } from 'lodash';
+  import sheep from '@/sheep';
+  import PayOrderApi from '@/api/pay/order';
+  import { fen2yuan } from '../../sheep/hooks/useGoods';
+  import OrderApi from '@/api/trade/order';
+
+  const state = reactive({
+    id: 0, // 支付单号
+    orderType: 'goods', // 订单类型
+    result: 'unpaid', // 支付状态
+    orderInfo: {}, // 支付订单信息
+    tradeOrder: {}, // 商品订单信息，只有在 orderType 为 goods 才会请求。目的：【我的拼团】按钮的展示
+    counter: 0, // 获取结果次数
+  });
+
+  // 支付结果 result => payResult
+  const payResult = computed(() => {
+    if (state.result === 'unpaid') {
+      return 'waiting';
+    }
+    if (state.result === 'paid') {
+      return 'success';
+    }
+    if (state.result === 'failed') {
+      return 'failed';
+    }
+    if (state.result === 'closed') {
+      return 'closed';
+    }
+  });
+
+  // 获得订单信息
+  async function getOrderInfo(id) {
+    state.counter++;
+    // 1. 加载订单信息
+    const { data, code } = await PayOrderApi.getOrder(id);
+    if (code === 0) {
+      state.orderInfo = data;
+      if (!state.orderInfo || state.orderInfo.status === 30) {
+        // 支付关闭
+        state.result = 'closed';
+        return;
+      }
+      if (state.orderInfo.status !== 0) {
+        // 非待支付，可能是已支付，可能是已退款
+        state.result = 'paid';
+        // #ifdef MP
+        subscribeMessage();
+        // #endif
+        // 特殊：获得商品订单信息
+        if (state.orderType === 'goods') {
+          const { data, code } = await OrderApi.getOrder(state.orderInfo.merchantOrderId);
+          if (code === 0) {
+            state.tradeOrder = data;
+          }
+        }
+        return;
+      }
+    }
+    // 2.1 情况三一：未支付，且轮询次数小于三次，则继续轮询
+    if (state.counter < 3 && state.result === 'unpaid') {
+      setTimeout(() => {
+        getOrderInfo(id);
+      }, 1500);
+    }
+    // 2.2 情况二：超过三次检测才判断为支付失败
+    if (state.counter >= 3) {
+      state.result = 'failed';
+    }
+  }
+
+  function onOrder() {
+    // TODO 芋艿：待测试
+    if (state.orderType === 'recharge') {
+      sheep.$router.redirect('/pages/pay/recharge-log');
+    } else {
+      sheep.$router.redirect('/pages/order/list');
+    }
+  }
+
+  // TODO 芋艿：待测试
+  // #ifdef MP
+  function subscribeMessage() {
+    let event = ['order_dispatched'];
+    if (state.tradeOrder.type === 3) {
+      event.push('groupon_finish');
+      event.push('groupon_fail');
+    }
+    sheep.$platform.useProvider('wechat').subscribeMessage(event);
+  }
+  // #endif
+
+  onLoad(async (options) => {
+    // 支付订单号
+    if (options.id) {
+      state.id = options.id;
+    }
+    // 订单类型
+    if (options.orderType) {
+      state.orderType = options.orderType;
+    }
+
+    // 支付结果传值过来是失败，则直接显示失败界面
+    if (options.payState === 'fail') {
+      state.result = 'failed';
+    } else {
+      // 轮询三次检测订单支付结果
+      await getOrderInfo(state.id);
+    }
+  });
+
+  onShow(() => {
+    if (isEmpty(state.orderInfo)) {
+      return;
+    }
+    getOrderInfo(state.id);
+  });
+
+  onHide(() => {
+    state.result = 'unpaid';
+    state.counter = 0;
+  });
+</script>
+
+<style lang="scss" scoped>
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .score-img {
+    width: 36rpx;
+    height: 36rpx;
+    margin: 0 4rpx;
+  }
+
+  .pay-result-box {
+    padding: 60rpx 0;
+
+    .pay-waiting {
+      margin-top: 20rpx;
+      width: 60rpx;
+      height: 60rpx;
+      border: 10rpx solid rgb(233, 231, 231);
+      border-bottom-color: rgb(204, 204, 204);
+      border-radius: 50%;
+      display: inline-block;
+      // -webkit-animation: rotation 1s linear infinite;
+      animation: rotation 1s linear infinite;
+    }
+
+    .pay-img {
+      width: 130rpx;
+      height: 130rpx;
+    }
+
+    .tip-text {
+      font-size: 30rpx;
+      font-weight: bold;
+      color: #333333;
+    }
+
+    .pay-total-num {
+      font-size: 36rpx;
+      font-weight: 500;
+      color: #333333;
+      font-family: OPPOSANS;
+    }
+
+    .btn-box {
+      width: 100%;
+
+      .back-btn {
+        width: 190rpx;
+        height: 70rpx;
+        font-size: 28rpx;
+        border: 2rpx solid #dfdfdf;
+        border-radius: 35rpx;
+        font-weight: 400;
+        color: #595959;
+      }
+
+      .check-btn {
+        width: 190rpx;
+        height: 70rpx;
+        font-size: 28rpx;
+        border: 2rpx solid #dfdfdf;
+        border-radius: 35rpx;
+        font-weight: 400;
+        color: #595959;
+        margin-left: 32rpx;
+      }
+    }
+
+    .subscribe-box {
+      .subscribe-img {
+        width: 44rpx;
+        height: 44rpx;
+      }
+
+      .subscribe-title {
+        font-weight: 500;
+        font-size: 32rpx;
+        line-height: 36rpx;
+        color: #434343;
+      }
+
+      .subscribe-start {
+        color: var(--ui-BG-Main);
+        font-weight: 700;
+        font-size: 32rpx;
+        line-height: 36rpx;
+      }
+    }
+  }
+</style>
diff --git a/pages/public/error.vue b/pages/public/error.vue
new file mode 100644
index 0000000..3ccc14d
--- /dev/null
+++ b/pages/public/error.vue
@@ -0,0 +1,60 @@
+<!-- 错误界面 -->
+<template>
+  <view class="error-page">
+    <s-empty
+      v-if="errCode === 'NetworkError'"
+      icon="/static/internet-empty.png"
+      text="网络连接失败"
+      showAction
+      actionText="重新连接"
+      @clickAction="onReconnect"
+      buttonColor="#ff3000"
+    />
+    <s-empty
+      v-else-if="errCode === 'TemplateError'"
+      icon="/static/internet-empty.png"
+      text="未找到模板"
+      showAction
+      actionText="重新加载"
+      @clickAction="onReconnect"
+      buttonColor="#ff3000"
+    />
+    <s-empty
+      v-else-if="errCode !== ''"
+      icon="/static/internet-empty.png"
+      :text="errMsg"
+      showAction
+      actionText="重新加载"
+      @clickAction="onReconnect"
+      buttonColor="#ff3000"
+    />
+  </view>
+</template>
+
+<script setup>
+  import { onLoad } from '@dcloudio/uni-app';
+  import { ref } from 'vue';
+  import { ShoproInit } from '@/sheep';
+
+  const errCode = ref('');
+  const errMsg = ref('');
+
+  onLoad((options) => {
+    errCode.value = options.errCode;
+    errMsg.value = options.errMsg;
+  });
+
+  // 重新连接
+  async function onReconnect() {
+    uni.reLaunch({
+      url: '/pages/index/index',
+    });
+    await ShoproInit();
+  }
+</script>
+
+<style lang="scss" scoped>
+  .error-page {
+    width: 100%;
+  }
+</style>
diff --git a/pages/public/faq.vue b/pages/public/faq.vue
new file mode 100644
index 0000000..af811c9
--- /dev/null
+++ b/pages/public/faq.vue
@@ -0,0 +1,118 @@
+<!-- FAQ 常见问题 -->
+<template>
+  <s-layout class="set-wrap" title="常见问题" :bgStyle="{ color: '#FFF' }">
+    <uni-collapse>
+      <uni-collapse-item v-for="(item, index) in state.list" :key="item">
+        <template v-slot:title>
+          <view class="ss-flex ss-col-center header">
+            <view class="ss-m-l-20 ss-m-r-20 icon">
+              <view class="rectangle">
+                <view class="num ss-flex ss-row-center ss-col-center">
+                  {{ index + 1 < 10 ? '0' + (index + 1) : index + 1 }}
+                </view>
+              </view>
+              <view class="triangle"> </view>
+            </view>
+            <view class="title ss-m-t-36 ss-m-b-36">
+              {{ item.title }}
+            </view>
+          </view>
+        </template>
+        <view class="content ss-p-l-78 ss-p-r-40 ss-p-b-50 ss-p-t-20">
+          <text class="text">{{ item.content }}</text>
+        </view>
+      </uni-collapse-item>
+    </uni-collapse>
+    <s-empty
+      v-if="state.list.length === 0 && !state.loading"
+      text="暂无常见问题"
+      icon="/static/collect-empty.png"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import { onLoad } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import sheep from '@/sheep';
+
+  const state = reactive({
+    list: [],
+    loading: true,
+  });
+
+  async function getFaqList() {
+    const { error, data } = await sheep.$api.data.faq();
+    if (error === 0) {
+      state.list = data;
+      state.loading = false;
+    }
+  }
+  onLoad(() => {
+    // TODO 芋艿：目前简单做，使用营销文章，作为 faq
+    if (true) {
+      sheep.$router.go('/pages/public/richtext', {
+        title: '常见问题',
+      })
+      return;
+    }
+    getFaqList();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .header {
+    .title {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #333333;
+      line-height: 30rpx;
+      max-width: 688rpx;
+    }
+
+    .icon {
+      position: relative;
+      width: 40rpx;
+      height: 40rpx;
+
+      .rectangle {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 40rpx;
+        height: 36rpx;
+        background: var(--ui-BG-Main);
+        border-radius: 4px;
+
+        .num {
+          width: 100%;
+          height: 100%;
+          font-size: 24rpx;
+          font-weight: 500;
+          color: var(--ui-BG);
+          line-height: 32rpx;
+        }
+      }
+
+      .triangle {
+        width: 0;
+        height: 0;
+        border-left: 4rpx solid transparent;
+        border-right: 4rpx solid transparent;
+        border-top: 8rpx solid var(--ui-BG-Main);
+        position: absolute;
+        left: 16rpx;
+        bottom: -4rpx;
+      }
+    }
+  }
+
+  .content {
+    border-bottom: 1rpx solid #dfdfdf;
+
+    .text {
+      font-size: 26rpx;
+      color: #666666;
+    }
+  }
+</style>
diff --git a/pages/public/richtext.vue b/pages/public/richtext.vue
new file mode 100644
index 0000000..8816e7a
--- /dev/null
+++ b/pages/public/richtext.vue
@@ -0,0 +1,54 @@
+<!-- 文章展示 -->
+<template>
+  <s-layout class="set-wrap" :title="state.title" :bgStyle="{ color: '#FFF' }">
+    <view class="ss-p-30">
+      <mp-html class="richtext" :content="state.content" />
+    </view>
+  </s-layout>
+</template>
+
+<script setup>
+  import { onLoad } from '@dcloudio/uni-app';
+  import { reactive } from 'vue';
+  import ArticleApi from '@/api/promotion/article';
+
+  const state = reactive({
+    title: '',
+    content: '',
+  });
+
+  async function getRichTextContent(id, title) {
+    const { code, data } = await ArticleApi.getArticle(id, title);
+    if (code !== 0) {
+      return;
+    }
+    state.content = data.content;
+    // 标题不一致时，修改标题
+    if (state.title !== data.title) {
+      state.title = data.title;
+      uni.setNavigationBarTitle({
+        title: state.title,
+      });
+    }
+  }
+
+  onLoad((options) => {
+    if (options.title) {
+      state.title = options.title;
+      uni.setNavigationBarTitle({
+        title: state.title,
+      });
+    }
+    getRichTextContent(options.id, options.title);
+  });
+
+</script>
+
+<style lang="scss" scoped>
+  .set-title {
+    margin: 0 30rpx;
+  }
+
+  .richtext {
+  }
+</style>
diff --git a/pages/public/setting.vue b/pages/public/setting.vue
new file mode 100644
index 0000000..d0f376c
--- /dev/null
+++ b/pages/public/setting.vue
@@ -0,0 +1,236 @@
+<template>
+  <s-layout class="set-wrap" title="系统设置" :bgStyle="{ color: '#fff' }">
+    <view class="header-box ss-flex-col ss-row-center ss-col-center">
+      <image
+        class="logo-img ss-m-b-46"
+        :src="sheep.$url.cdn(appInfo.logo)"
+        mode="aspectFit"
+      ></image>
+      <view class="name ss-m-b-24">{{ appInfo.name }}</view>
+    </view>
+
+    <view class="container-list">
+      <uni-list :border="false">
+        <uni-list-item
+          title="当前版本"
+          :rightText="appInfo.version"
+          showArrow
+          clickable
+          :border="false"
+          class="list-border"
+          @tap="onCheckUpdate"
+        />
+        <uni-list-item
+          title="本地缓存"
+          :rightText="storageSize"
+          showArrow
+          :border="false"
+          class="list-border"
+        />
+        <uni-list-item
+          title="关于我们"
+          showArrow
+          clickable
+          :border="false"
+          class="list-border"
+          @tap="
+            sheep.$router.go('/pages/public/richtext', {
+              title: '关于我们'
+            })
+          "
+        />
+        <!-- 为了过审 只有 iOS-App 有注销账号功能 -->
+        <uni-list-item
+          v-if="isLogin && sheep.$platform.os === 'ios' && sheep.$platform.name === 'App'"
+          title="注销账号"
+          rightText=""
+          showArrow
+          clickable
+          :border="false"
+          class="list-border"
+          @click="onLogoff"
+        />
+      </uni-list>
+    </view>
+    <view class="set-footer ss-flex-col ss-row-center ss-col-center">
+      <view class="agreement-box ss-flex ss-col-center ss-m-b-40">
+        <view class="ss-flex ss-col-center ss-m-b-10">
+          <view
+            class="tcp-text"
+            @tap="
+              sheep.$router.go('/pages/public/richtext', {
+                title: '用户协议'
+              })
+            "
+          >
+            《用户协议》
+          </view>
+          <view class="agreement-text">与</view>
+          <view
+            class="tcp-text"
+            @tap="
+              sheep.$router.go('/pages/public/richtext', {
+                title: '隐私协议'
+              })
+            "
+          >
+            《隐私协议》
+          </view>
+        </view>
+      </view>
+      <view class="copyright-text ss-m-b-10">{{ appInfo.copyright }}</view>
+      <view class="copyright-text">{{ appInfo.copytime }}</view>
+    </view>
+    <su-fixed bottom placeholder>
+      <view class="ss-p-x-20 ss-p-b-40">
+        <button
+          class="loginout-btn ss-reset-button ui-BG-Main ui-Shadow-Main"
+          @tap="onLogout"
+          v-if="isLogin"
+        >
+          退出登录
+        </button>
+      </view>
+    </su-fixed>
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { computed, reactive } from 'vue';
+  import AuthUtil from '@/api/member/auth';
+
+  const appInfo = computed(() => sheep.$store('app').info);
+  const isLogin = computed(() => sheep.$store('user').isLogin);
+  const storageSize = uni.getStorageInfoSync().currentSize + 'Kb';
+  const state = reactive({
+    showModal: false,
+  });
+
+  function onCheckUpdate() {
+    sheep.$platform.checkUpdate();
+    // 小程序初始化时已检查更新
+    // H5实时更新无需检查
+    // App 1.跳转应用市场更新 2.手动热更新 3.整包更新
+  }
+
+  // 注销账号
+  function onLogoff() {
+    uni.showModal({
+      title: '提示',
+      content: '确认注销账号？',
+      success: async function (res) {
+        if (!res.confirm) {
+          return;
+        }
+        const { code } = await AuthUtil.logout();
+        if (code !== 0) {
+          return;
+        }
+        sheep.$store('user').logout();
+        sheep.$router.go('/pages/index/user');
+      },
+    });
+  }
+
+  // 退出账号
+  function onLogout() {
+    uni.showModal({
+      title: '提示',
+      content: '确认退出账号？',
+      success: async function (res) {
+        if (!res.confirm) {
+          return;
+        }
+        const { code } = await AuthUtil.logout();
+        if (code !== 0) {
+          return;
+        }
+        sheep.$store('user').logout();
+        sheep.$router.go('/pages/index/user');
+      },
+    });
+  }
+</script>
+
+<style lang="scss" scoped>
+  .container-list {
+    width: 100%;
+  }
+
+  .set-title {
+    margin: 0 30rpx;
+  }
+
+  .header-box {
+    padding: 100rpx 0;
+
+    .logo-img {
+      width: 160rpx;
+      height: 160rpx;
+      border-radius: 50%;
+    }
+
+    .name {
+      font-size: 42rpx;
+      font-weight: 400;
+      color: $dark-3;
+    }
+
+    .version {
+      font-size: 32rpx;
+      font-weight: 500;
+      line-height: 32rpx;
+      color: $gray-b;
+    }
+  }
+
+  .set-footer {
+    margin: 100rpx 0 0 0;
+
+    .copyright-text {
+      font-size: 22rpx;
+      font-weight: 500;
+      color: $gray-c;
+      line-height: 30rpx;
+    }
+
+    .agreement-box {
+      font-size: 26rpx;
+      font-weight: 500;
+
+      .tcp-text {
+        color: var(--ui-BG-Main);
+      }
+
+      .agreement-text {
+        color: $dark-9;
+      }
+    }
+  }
+
+  .loginout-btn {
+    width: 100%;
+    height: 80rpx;
+    border-radius: 40rpx;
+    font-size: 30rpx;
+  }
+
+  .list-border {
+    font-size: 28rpx;
+    font-weight: 400;
+    color: #333333;
+    border-bottom: 2rpx solid #eeeeee;
+  }
+
+  :deep(.uni-list-item__content-title) {
+    font-size: 28rpx;
+    font-weight: 500;
+    color: #333;
+  }
+
+  :deep(.uni-list-item__extra-text) {
+    color: #bbbbbb;
+    font-size: 28rpx;
+  }
+</style>
diff --git a/pages/public/webview.vue b/pages/public/webview.vue
new file mode 100644
index 0000000..1327295
--- /dev/null
+++ b/pages/public/webview.vue
@@ -0,0 +1,18 @@
+<!-- 网页加载 -->
+<template>
+  <view>
+    <web-view :src="url" />
+  </view>
+</template>
+
+<script setup>
+  import { onLoad } from '@dcloudio/uni-app';
+  import { ref } from 'vue';
+
+  const url = ref('');
+  onLoad((options) => {
+    url.value = decodeURIComponent(options.url);
+  });
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/pages/user/address/edit.vue b/pages/user/address/edit.vue
new file mode 100644
index 0000000..fd1d7ec
--- /dev/null
+++ b/pages/user/address/edit.vue
@@ -0,0 +1,257 @@
+<!-- 收货地址的新增/编辑 -->
+<template>
+	<s-layout :title="state.model.id ? '编辑地址' : '新增地址'">
+		<uni-forms ref="addressFormRef" v-model="state.model" :rules="rules" validateTrigger="bind"
+			labelWidth="160" labelAlign="left" border :labelStyle="{ fontWeight: 'bold' }">
+			<view class="bg-white form-box ss-p-x-30">
+				<uni-forms-item name="name" label="收货人" class="form-item">
+					<uni-easyinput v-model="state.model.name" placeholder="请填写收货人姓名" :inputBorder="false"
+						placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal" />
+				</uni-forms-item>
+
+				<uni-forms-item name="mobile" label="手机号" class="form-item">
+					<uni-easyinput v-model="state.model.mobile" type="number" placeholder="请输入手机号" :inputBorder="false"
+						placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal">
+					</uni-easyinput>
+				</uni-forms-item>
+				<uni-forms-item name="areaName" label="省市区" @tap="state.showRegion = true" class="form-item">
+					<uni-easyinput v-model="state.model.areaName" disabled :inputBorder="false"
+						:styles="{ disableColor: '#fff', color: '#333' }"
+						placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
+						placeholder="请选择省市区">
+						<template v-slot:right>
+							<uni-icons type="right" />
+						</template>
+					</uni-easyinput>
+				</uni-forms-item>
+				<uni-forms-item name="detailAddress" label="详细地址" :formItemStyle="{ alignItems: 'flex-start' }"
+					:labelStyle="{ lineHeight: '5em' }" class="textarea-item">
+					<uni-easyinput :inputBorder="false" type="textarea" v-model="state.model.detailAddress"
+						placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
+						placeholder="请输入详细地址" clearable />
+				</uni-forms-item>
+			</view>
+			<view class="ss-m-y-20 bg-white ss-p-x-30 ss-flex ss-row-between ss-col-center default-box">
+				<view class="default-box-title"> 设为默认地址 </view>
+				<su-switch style="transform: scale(0.8)" v-model="state.model.defaultStatus" />
+			</view>
+		</uni-forms>
+		<su-fixed bottom :opacity="false" bg="" placeholder :noFixed="false" :index="10">
+			<view class="footer-box ss-flex-col ss-row-between ss-p-20">
+				<view class="ss-m-b-20">
+          <button class="ss-reset-button save-btn ui-Shadow-Main" @tap="onSave">保存</button>
+        </view>
+				<button v-if="state.model.id" class="ss-reset-button cancel-btn" @tap="onDelete">
+					删除
+				</button>
+			</view>
+		</su-fixed>
+
+		<!-- 省市区弹窗 -->
+		<su-region-picker :show="state.showRegion" @cancel="state.showRegion = false" @confirm="onRegionConfirm" />
+	</s-layout>
+</template>
+
+<script setup>
+	import { ref, reactive, unref } from 'vue';
+	import sheep from '@/sheep';
+	import { onLoad } from '@dcloudio/uni-app';
+	import _ from 'lodash';
+	import { mobile } from '@/sheep/validate/form';
+  import AreaApi from '@/api/system/area';
+  import AddressApi from '@/api/member/address';
+
+	const addressFormRef = ref(null);
+	const state = reactive({
+		showRegion: false,
+		model: {
+			name: '',
+			mobile: '',
+      detailAddress: '',
+			defaultStatus: false,
+      areaName: '',
+		},
+    rules: {},
+	});
+
+  const rules = {
+    name: {
+      rules: [
+        {
+          required: true,
+          errorMessage: '请输入收货人姓名',
+        },
+      ],
+    },
+    mobile,
+    detailAddress: {
+      rules: [{
+        required: true,
+        errorMessage: '请输入详细地址',
+      }]
+    },
+    areaName: {
+      rules: [{
+        required: true,
+        errorMessage: '请选择您的位置'
+      }]
+    },
+  };
+
+  // 确认选择地区
+	const onRegionConfirm = (e) => {
+    state.model.areaName = `${e.province_name} ${e.city_name} ${e.district_name}`
+    state.model.areaId = e.district_id;
+		state.showRegion = false;
+	};
+
+  // 获得地区数据
+	const getAreaData = () => {
+		if (_.isEmpty(uni.getStorageSync('areaData'))) {
+      AreaApi.getAreaTree().then((res) => {
+        if (res.code === 0) {
+          uni.setStorageSync('areaData', res.data);
+        }
+      });
+		}
+	};
+
+  // 保存收货地址
+	const onSave = async () => {
+    // 参数校验
+		const validate = await unref(addressFormRef)
+			.validate()
+			.catch((error) => {
+				console.log('error: ', error);
+			});
+		if (!validate) {
+      return;
+    }
+
+    // 提交请求
+    const formData = {
+      ...state.model
+    }
+    const {code } = state.model.id > 0 ? await AddressApi.updateAddress(formData)
+      : await AddressApi.createAddress(formData);
+		if (code === 0) {
+			sheep.$router.back();
+		}
+	};
+
+  // 删除收货地址
+	const onDelete = () => {
+		uni.showModal({
+			title: '提示',
+			content: '确认删除此收货地址吗？',
+			success: async function(res) {
+				if (!res.confirm) {
+					return;
+				}
+        const { code } = await AddressApi.deleteAddress(state.model.id);
+        if (code === 0) {
+          sheep.$router.back();
+        }
+			},
+		});
+	};
+
+	onLoad(async (options) => {
+    // 获得地区数据
+		getAreaData();
+    // 情况一：基于 id 获得收件地址
+		if (options.id) {
+			let { code, data} = await AddressApi.getAddress(options.id);
+      if (code !== 0) {
+        return;
+      }
+      state.model = data;
+		}
+     // 情况二：微信导入
+    if (options.data) {
+      let data = JSON.parse(options.data);
+      const areaData = uni.getStorageSync('areaData');
+      const findAreaByName = (areas, name) => areas.find(item => item.name === name);
+
+      let provinceObj = findAreaByName(areaData, data.province_name);
+      let cityObj = provinceObj ? findAreaByName(provinceObj.children, data.city_name) : undefined;
+      let districtObj = cityObj ? findAreaByName(cityObj.children, data.district_name) : undefined;
+      let areaId = (districtObj || cityObj || provinceObj).id;
+
+      state.model = {
+        ...state.model,
+        areaId,
+        areaName: [data.province_name, data.city_name, data.district_name].filter(Boolean).join(" "),
+        defaultStatus: false,
+        detailAddress: data.address,
+        mobile: data.mobile,
+        name: data.consignee,
+      };
+		}
+	});
+</script>
+
+<style lang="scss" scoped>
+	:deep() {
+		.uni-forms-item__label .label-text {
+			font-size: 28rpx !important;
+			color: #333333 !important;
+			line-height: normal !important;
+		}
+
+		.uni-easyinput__content-input {
+			font-size: 28rpx !important;
+			color: #333333 !important;
+			line-height: normal !important;
+			padding-left: 0 !important;
+		}
+
+		.uni-easyinput__content-textarea {
+			font-size: 28rpx !important;
+			color: #333333 !important;
+			line-height: normal !important;
+			margin-top: 8rpx !important;
+		}
+
+		.uni-icons {
+			font-size: 40rpx !important;
+		}
+
+		.is-textarea-icon {
+			margin-top: 22rpx;
+		}
+
+		.is-disabled {
+			color: #333333;
+		}
+	}
+
+	.default-box {
+		width: 100%;
+		box-sizing: border-box;
+		height: 100rpx;
+
+		.default-box-title {
+			font-size: 28rpx;
+			color: #333333;
+			line-height: normal;
+		}
+	}
+
+	.footer-box {
+		.save-btn {
+			width: 710rpx;
+			height: 80rpx;
+			border-radius: 40rpx;
+			background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+			color: $white;
+		}
+
+		.cancel-btn {
+			width: 710rpx;
+			height: 80rpx;
+			border-radius: 40rpx;
+			background: var(--ui-BG);
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/user/address/list.vue b/pages/user/address/list.vue
new file mode 100644
index 0000000..a798dd8
--- /dev/null
+++ b/pages/user/address/list.vue
@@ -0,0 +1,143 @@
+<!-- 收件地址列表 -->
+<template>
+	<s-layout title="收货地址" :bgStyle="{ color: '#FFF' }">
+		<view v-if="state.list.length">
+			<s-address-item hasBorderBottom v-for="item in state.list" :key="item.id" :item="item"
+                      @tap="onSelect(item)" />
+		</view>
+
+		<su-fixed bottom placeholder>
+			<view class="footer-box ss-flex ss-row-between ss-p-20">
+				<!-- 微信小程序和微信H5 -->
+				<button v-if="['WechatMiniProgram', 'WechatOfficialAccount'].includes(sheep.$platform.name)"
+					@tap="importWechatAddress"
+					class="border ss-reset-button sync-wxaddress ss-m-20 ss-flex ss-row-center ss-col-center">
+					<text class="cicon-weixin ss-p-r-10" style="color: #09bb07; font-size: 40rpx"></text>
+					导入微信地址
+				</button>
+				<button class="add-btn ss-reset-button ui-Shadow-Main"
+					@tap="sheep.$router.go('/pages/user/address/edit')">
+					新增收货地址
+				</button>
+			</view>
+		</su-fixed>
+		<s-empty v-if="state.list.length === 0 && !state.loading" text="暂无收货地址" icon="/static/data-empty.png" />
+	</s-layout>
+</template>
+
+<script setup>
+	import { reactive, onBeforeMount } from 'vue';
+	import { onShow } from '@dcloudio/uni-app';
+	import sheep from '@/sheep';
+	import { isEmpty } from 'lodash';
+  import AreaApi from '@/api/system/area';
+  import AddressApi from '@/api/member/address';
+
+	const state = reactive({
+		list: [], // 地址列表
+		loading: true,
+	});
+
+	// 选择收货地址
+	const onSelect = (addressInfo) => {
+		uni.$emit('SELECT_ADDRESS', {
+			addressInfo,
+		});
+		sheep.$router.back();
+	};
+
+	// 导入微信地址
+  // TODO 芋艿：未测试
+	function importWechatAddress() {
+		let wechatAddress = {};
+		// #ifdef MP
+		uni.chooseAddress({
+			success: (res) => {
+				wechatAddress = {
+					consignee: res.userName,
+					mobile: res.telNumber,
+					province_name: res.provinceName,
+					city_name: res.cityName,
+					district_name: res.countyName,
+					address: res.detailInfo,
+					region: '',
+					is_default: false,
+				};
+				if (!isEmpty(wechatAddress)) {
+					sheep.$router.go('/pages/user/address/edit', {
+						data: JSON.stringify(wechatAddress),
+					});
+				}
+			},
+			fail: (err) => {
+				console.log('%cuni.chooseAddress,调用失败', 'color:green;background:yellow');
+			},
+		});
+		// #endif
+		// #ifdef H5
+		sheep.$platform.useProvider('wechat').jssdk.openAddress({
+			success: (res) => {
+				wechatAddress = {
+					consignee: res.userName,
+					mobile: res.telNumber,
+					province_name: res.provinceName,
+					city_name: res.cityName,
+					district_name: res.countryName,
+					address: res.detailInfo,
+					region: '',
+					is_default: false,
+				};
+				if (!isEmpty(wechatAddress)) {
+					sheep.$router.go('/pages/user/address/edit', {
+						data: JSON.stringify(wechatAddress),
+					});
+				}
+			},
+		});
+		// #endif
+	}
+
+	onShow(async () => {
+		state.list = (await AddressApi.getAddressList()).data;
+		state.loading = false;
+	});
+
+	onBeforeMount(() => {
+		if (!!uni.getStorageSync('areaData')) {
+			return;
+		}
+		// 提前加载省市区数据
+    AreaApi.getAreaTree().then((res) => {
+			if (res.code === 0) {
+				uni.setStorageSync('areaData', res.data);
+			}
+		});
+	});
+</script>
+
+<style lang="scss" scoped>
+	.footer-box {
+		.add-btn {
+			flex: 1;
+			background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+			border-radius: 80rpx;
+			font-size: 30rpx;
+			font-weight: 500;
+			line-height: 80rpx;
+			color: $white;
+			position: relative;
+			z-index: 1;
+		}
+
+		.sync-wxaddress {
+			flex: 1;
+			line-height: 80rpx;
+			background: $white;
+			border-radius: 80rpx;
+			font-size: 30rpx;
+			font-weight: 500;
+			color: $dark-6;
+			margin-right: 18rpx;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/user/goods-collect.vue b/pages/user/goods-collect.vue
new file mode 100644
index 0000000..18b37a7
--- /dev/null
+++ b/pages/user/goods-collect.vue
@@ -0,0 +1,231 @@
+<!-- 我的商品收藏 -->
+<template>
+  <s-layout title="商品收藏">
+    <view class="cart-box ss-flex ss-flex-col ss-row-between">
+      <!-- 头部 -->
+      <view class="cart-header ss-flex ss-col-center ss-row-between ss-p-x-30">
+        <view class="header-left ss-flex ss-col-center ss-font-26">
+          共 <text class="goods-number ui-TC-Main ss-flex">{{ state.pagination.total }}</text> 件商品
+        </view>
+        <view class="header-right">
+          <button
+            v-if="state.editMode && state.pagination.total"
+            class="ss-reset-button"
+            @tap="state.editMode = false"
+          >
+            取消
+          </button>
+          <button
+            v-if="!state.editMode && state.pagination.total"
+            class="ss-reset-button ui-TC-Main"
+            @tap="state.editMode = true"
+          >
+            编辑
+          </button>
+        </view>
+      </view>
+      <!-- 内容 -->
+      <view class="cart-content">
+        <view
+          class="goods-box ss-r-10 ss-m-b-14"
+          v-for="item in state.pagination.list"
+          :key="item.id"
+        >
+          <view class="ss-flex ss-col-center">
+            <label
+              class="check-box ss-flex ss-col-center ss-p-l-10"
+              v-if="state.editMode"
+              @tap="onSelect(item.spuId)"
+            >
+              <radio
+                :checked="state.selectedCollectList.includes(item.spuId)"
+                color="var(--ui-BG-Main)"
+                style="transform: scale(0.8)"
+                @tap.stop="onSelect(item.spuId)"
+              />
+            </label>
+            <s-goods-item
+              :title="item.spuName"
+              :img="item.picUrl"
+              :price="item.price"
+              priceColor="#FF3000"
+              :titleWidth="400"
+              @tap="
+                sheep.$router.go('/pages/goods/index', {
+                  id: item.spuId,
+                })
+              "
+            />
+          </view>
+        </view>
+      </view>
+
+      <!-- 底部 -->
+      <su-fixed bottom :val="0" placeholder v-show="state.editMode">
+        <view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom">
+          <view class="footer-left ss-flex ss-col-center">
+            <label class="check-box ss-flex ss-col-center ss-p-r-30" @tap="onSelectAll">
+              <radio
+                :checked="state.selectAll"
+                color="var(--ui-BG-Main)"
+                style="transform: scale(0.7)"
+                @tap.stop="onSelectAll"
+              />
+              <view> 全选 </view>
+            </label>
+          </view>
+          <view class="footer-right">
+            <button
+              class="ss-reset-button ui-BG-Main-Gradient pay-btn ss-font-28 ui-Shadow-Main"
+              @tap="onCancel">
+              取消收藏
+            </button>
+          </view>
+        </view>
+      </su-fixed>
+    </view>
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="loadMore"
+    />
+    <s-empty v-if="state.pagination.total === 0" text="暂无收藏" icon="/static/collect-empty.png" />
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { reactive } from 'vue';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import _ from 'lodash';
+  import FavoriteApi from '@/api/product/favorite';
+  import { resetPagination } from '@/sheep/util';
+
+  const sys_navBar = sheep.$platform.navbar;
+
+  const state = reactive({
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 6,
+    },
+    loadStatus: '',
+
+    editMode: false,
+    selectedCollectList: [], // 选中的 SPU 数组
+    selectAll: false,
+  });
+
+  async function getData() {
+    state.loadStatus = 'loading';
+    const { code, data } = await FavoriteApi.getFavoritePage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list)
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  // 单选选中
+  const onSelect = (spuId) => {
+    if (!state.selectedCollectList.includes(spuId)) {
+      state.selectedCollectList.push(spuId);
+    } else {
+      state.selectedCollectList.splice(state.selectedCollectList.indexOf(spuId), 1);
+    }
+    state.selectAll = state.selectedCollectList.length === state.pagination.list.length;
+  };
+
+  // 全选
+  const onSelectAll = () => {
+    state.selectAll = !state.selectAll;
+    if (!state.selectAll) {
+      state.selectedCollectList = [];
+    } else {
+      state.selectedCollectList = state.pagination.list.map((item) => item.spuId);
+    }
+  };
+
+  async function onCancel() {
+    if (!state.selectedCollectList) {
+      return;
+    }
+    // 取消收藏
+    for (const spuId of state.selectedCollectList) {
+      await FavoriteApi.deleteFavorite(spuId);
+    }
+
+    // 清空选择 + 重新加载
+    state.editMode = false;
+    state.selectedCollectList = [];
+    state.selectAll = false;
+    resetPagination(state.pagination);
+    await getData();
+  }
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return
+    }
+    state.pagination.pageNo++;
+    getData();
+  }
+
+  onReachBottom(() => {
+    loadMore();
+  });
+
+  onLoad(() => {
+    getData();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .cart-box {
+    .cart-header {
+      height: 70rpx;
+      background-color: #f6f6f6;
+      width: 100%;
+      position: fixed;
+      left: 0;
+      top: v-bind('sys_navBar') rpx;
+      z-index: 1000;
+      box-sizing: border-box;
+    }
+
+    .cart-footer {
+      height: 100rpx;
+      background-color: #fff;
+
+      .pay-btn {
+        height: 80rpx;
+        line-height: 80rpx;
+        border-radius: 40rpx;
+        padding: 0 40rpx;
+        min-width: 200rpx;
+      }
+    }
+
+    .cart-content {
+      width: 100%;
+      margin-top: 70rpx;
+      padding: 0 20rpx;
+      box-sizing: border-box;
+      .goods-box {
+        background-color: #fff;
+        &:last-child {
+          margin-bottom: 40rpx;
+        }
+      }
+    }
+  }
+</style>
diff --git a/pages/user/goods-log.vue b/pages/user/goods-log.vue
new file mode 100644
index 0000000..f2b572d
--- /dev/null
+++ b/pages/user/goods-log.vue
@@ -0,0 +1,306 @@
+<!-- 商品浏览记录  -->
+<template>
+  <s-layout title="我的足迹" :bgStyle="{ color: '#f2f2f2' }">
+    <view class="cart-box ss-flex ss-flex-col ss-row-between">
+      <!-- 头部 -->
+      <view class="cart-header ss-flex ss-col-center ss-row-between ss-p-x-30">
+        <view class="header-left ss-flex ss-col-center ss-font-26">
+          共
+          <text class="goods-number ui-TC-Main ss-flex">
+            {{ state.pagination.total }}
+          </text>
+          件商品
+        </view>
+        <view class="header-right">
+          <button
+            v-if="state.editMode && state.pagination.total"
+            class="ss-reset-button"
+            @tap="state.editMode = false"
+          >
+            取消
+          </button>
+          <button
+            v-if="!state.editMode && state.pagination.total"
+            class="ss-reset-button ui-TC-Main"
+            @tap="state.editMode = true"
+          >
+            编辑
+          </button>
+        </view>
+      </view>
+      <!-- 内容 -->
+      <view class="cart-content">
+        <view
+          class="goods-box ss-r-10 ss-m-b-14"
+          v-for="item in state.pagination.list"
+          :key="item.id"
+        >
+          <view class="ss-flex ss-col-center">
+            <label
+              class="check-box ss-flex ss-col-center ss-p-l-10"
+              v-if="state.editMode"
+              @tap="onSelect(item.spuId)"
+            >
+              <radio
+                :checked="state.selectedSpuIdList.includes(item.spuId)"
+                color="var(--ui-BG-Main)"
+                style="transform: scale(0.8)"
+                @tap.stop="onSelect(item.spuId)"
+              />
+            </label>
+            <s-goods-item
+              :title="item.spuName"
+              :img="item.picUrl"
+              :price="item.price"
+              :skuText="item.introduction"
+              priceColor="#FF3000"
+              :titleWidth="400"
+              @tap="
+                sheep.$router.go('/pages/goods/index', {
+                  id: item.spuId,
+                })
+              "
+            >
+            </s-goods-item>
+          </view>
+        </view>
+      </view>
+      <!-- 底部 -->
+      <su-fixed bottom :val="0" placeholder v-show="state.editMode">
+        <view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom">
+          <view class="footer-left ss-flex ss-col-center">
+            <label class="check-box ss-flex ss-col-center ss-p-r-30" @tap="onSelectAll">
+              <radio
+                :checked="state.selectAll"
+                color="var(--ui-BG-Main)"
+                style="transform: scale(0.7)"
+                @tap.stop="onSelectAll"
+              />
+              <view>全选</view>
+            </label>
+          </view>
+          <view class="footer-right ss-flex">
+            <button
+              :class="['ss-reset-button  pay-btn ss-font-28 ',
+                  {
+                    'ui-BG-Main-Gradient': state.selectedSpuIdList.length > 0,
+                    'ui-Shadow-Main': state.selectedSpuIdList.length > 0
+                  }]"
+              @tap="onDelete"
+            >
+              删除足迹
+            </button>
+            <button
+              class="ss-reset-button ui-BG-Main-Gradient pay-btn ss-font-28 ui-Shadow-Main ml-2"
+              @tap="onClean"
+            >
+              清空
+            </button>
+          </view>
+        </view>
+      </su-fixed>
+    </view>
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="loadMore"
+    />
+    <s-empty
+      v-if="state.pagination.total === 0"
+      text="暂无浏览记录"
+      icon="/static/collect-empty.png"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { reactive } from 'vue';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import _ from 'lodash';
+  import SpuHistoryApi from "@/api/product/history";
+  import {cloneDeep} from "@/sheep/helper/utils";
+
+  const sys_navBar = sheep.$platform.navbar;
+  const pagination = {
+    list: [],
+    pageNo: 1,
+    total: 1,
+    pageSize: 10,
+  };
+  const state = reactive({
+    pagination: cloneDeep(pagination),
+    loadStatus: '',
+    editMode: false,
+    selectedSpuIdList: [],
+    selectAll: false,
+  });
+
+  async function getList() {
+    state.loadStatus = 'loading';
+    const { code, data } = await SpuHistoryApi.getBrowseHistoryPage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+    });
+    if (code !== 0) {
+      return;
+    }
+
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  // 单选选中
+  const onSelect = (id) => {
+    if (!state.selectedSpuIdList.includes(id)) {
+      state.selectedSpuIdList.push(id);
+    } else {
+      state.selectedSpuIdList.splice(state.selectedSpuIdList.indexOf(id), 1);
+    }
+    state.selectAll = state.selectedSpuIdList.length === state.pagination.list.length;
+  };
+
+  // 全选
+  const onSelectAll = () => {
+    state.selectAll = !state.selectAll;
+    if (!state.selectAll) {
+      state.selectedSpuIdList = [];
+    } else {
+      state.pagination.list.forEach((item) => {
+        if (state.selectedSpuIdList.includes(item.spuId)) {
+          state.selectedSpuIdList.splice(state.selectedSpuIdList.indexOf(item.spuId), 1);
+        }
+        state.selectedSpuIdList.push(item.spuId);
+      });
+    }
+  };
+
+  // 删除足迹
+  async function onDelete() {
+    if (state.selectedSpuIdList.length <= 0) {
+      return;
+    }
+
+    const { code } = await SpuHistoryApi.deleteBrowseHistory(state.selectedSpuIdList);
+    if (code === 0) {
+      reload();
+    }
+  }
+
+  // 清空
+  async function onClean() {
+    const { code } = await SpuHistoryApi.cleanBrowseHistory();
+    if (code === 0) {
+      reload();
+    }
+  }
+
+  function reload() {
+    state.editMode = false;
+    state.selectedSpuIdList = [];
+    state.selectAll = false;
+    state.pagination = pagination;
+    getList();
+  }
+
+  // 加载更多
+  function loadMore() {
+    if (state.loadStatus !== 'noMore') {
+      state.pagination.pageNo += 1;
+      getList();
+    }
+  }
+
+  onReachBottom(() => {
+    loadMore();
+  });
+
+  onLoad(() => {
+    getList();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .cart-box {
+    .cart-header {
+      height: 70rpx;
+      background-color: #f6f6f6;
+      width: 100%;
+      position: fixed;
+      left: 0;
+      top: v-bind('sys_navBar') rpx;
+      z-index: 1000;
+      box-sizing: border-box;
+    }
+
+    .cart-footer {
+      height: 100rpx;
+      background-color: #fff;
+
+      .pay-btn {
+        height: 80rpx;
+        line-height: 80rpx;
+        border-radius: 40rpx;
+        padding: 0 40rpx;
+        min-width: 200rpx;
+      }
+    }
+
+    .cart-content {
+      width: 100%;
+      padding: 0 20rpx;
+      box-sizing: border-box;
+      margin-top: 70rpx;
+      .goods-box {
+        background-color: #fff;
+        &:last-child {
+          margin-bottom: 40rpx;
+        }
+      }
+    }
+  }
+
+  .title-card {
+    padding: 36rpx 0 46rpx 20rpx;
+
+    .img-box {
+      width: 164rpx;
+      height: 164rpx;
+
+      .order-img {
+        width: 164rpx;
+        height: 164rpx;
+      }
+    }
+
+    .check-box {
+      height: 100%;
+    }
+
+    .title-text {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #333333;
+    }
+
+    .params-box {
+      .params-title {
+        height: 38rpx;
+        background: #f4f4f4;
+        border-radius: 2rpx;
+        font-size: 24rpx;
+        font-weight: 400;
+        color: #666666;
+      }
+    }
+
+    .price-text {
+      color: $red;
+      font-family: OPPOSANS;
+    }
+  }
+</style>
diff --git a/pages/user/info.vue b/pages/user/info.vue
new file mode 100644
index 0000000..2b46ee2
--- /dev/null
+++ b/pages/user/info.vue
@@ -0,0 +1,471 @@
+<!-- 用户信息 -->
+<template>
+  <s-layout title="用户信息" class="set-userinfo-wrap">
+    <uni-forms
+      :model="state.model"
+      :rules="state.rules"
+      labelPosition="left"
+      border
+      class="form-box"
+    >
+      <!-- 头像 -->
+      <view class="ss-flex ss-row-center ss-col-center ss-p-t-60 ss-p-b-0 bg-white">
+        <view class="header-box-content">
+          <su-image
+            class="content-img"
+            isPreview
+            :current="0"
+            :src="state.model?.avatar"
+            :height="160"
+            :width="160"
+            :radius="80"
+            mode="scaleToFill"
+          />
+          <view class="avatar-action">
+            <!-- #ifdef MP -->
+            <button
+              class="ss-reset-button avatar-action-btn"
+              open-type="chooseAvatar"
+              @chooseavatar="onChooseAvatar">
+              修改
+            </button>
+            <!-- #endif -->
+            <!-- #ifndef MP -->
+            <button class="ss-reset-button avatar-action-btn" @tap="onChangeAvatar">修改</button>
+            <!-- #endif -->
+          </view>
+        </view>
+      </view>
+
+      <view class="bg-white ss-p-x-30">
+        <!-- 昵称 + 性别 -->
+        <uni-forms-item name="nickname" label="昵称">
+          <uni-easyinput
+            v-model="state.model.nickname"
+            type="nickname"
+            placeholder="设置昵称"
+            :inputBorder="false"
+            :placeholderStyle="placeholderStyle"
+          />
+        </uni-forms-item>
+        <uni-forms-item name="sex" label="性别">
+          <view class="ss-flex ss-col-center ss-h-100">
+            <radio-group @change="onChangeGender" class="ss-flex ss-col-center">
+              <label class="radio" v-for="item in sexRadioMap" :key="item.value">
+                <view class="ss-flex ss-col-center ss-m-r-32">
+                  <radio
+                    :value="item.value"
+                    color="var(--ui-BG-Main)"
+                    style="transform: scale(0.8)"
+                    :checked="parseInt(item.value) === state.model?.sex"
+                  />
+                  <view class="gender-name">{{ item.name }}</view>
+                </view>
+              </label>
+            </radio-group>
+          </view>
+        </uni-forms-item>
+
+        <uni-forms-item name="mobile" label="手机号" @tap="onChangeMobile">
+          <uni-easyinput
+            v-model="userInfo.mobile"
+            placeholder="请绑定手机号"
+            :inputBorder="false"
+            disabled
+            :styles="{ disableColor: '#fff' }"
+            :placeholderStyle="placeholderStyle"
+            :clearable="false"
+          >
+            <template v-slot:right>
+              <view class="ss-flex ss-col-center">
+                <su-radio v-if="userInfo.verification?.mobile" :modelValue="true" />
+                <button v-else class="ss-reset-button ss-flex ss-col-center ss-row-center">
+                  <text class="_icon-forward" style="color: #bbbbbb; font-size: 26rpx"></text>
+                </button>
+              </view>
+            </template>
+          </uni-easyinput>
+        </uni-forms-item>
+
+        <uni-forms-item name="password" label="登录密码" @tap="onSetPassword">
+          <uni-easyinput
+            v-model="userInfo.password"
+            placeholder="点击修改登录密码"
+            :inputBorder="false"
+            :styles="{ disableColor: '#fff' }"
+            disabled
+            placeholderStyle="color:#BBBBBB;font-size:28rpx;line-height:normal"
+            :clearable="false"
+          >
+            <template v-slot:right>
+              <view class="ss-flex ss-col-center">
+                <su-radio
+                  class="ss-flex"
+                  v-if="userInfo.verification?.password"
+                  :modelValue="true"
+                />
+                <button v-else class="ss-reset-button ss-flex ss-col-center ss-row-center">
+                  <text class="_icon-forward" style="color: #bbbbbb; font-size: 26rpx" />
+                </button>
+              </view>
+            </template>
+          </uni-easyinput>
+        </uni-forms-item>
+      </view>
+
+      <view class="bg-white ss-m-t-14">
+        <uni-list>
+          <uni-list-item
+            clickable
+            @tap="sheep.$router.go('/pages/user/address/list')"
+            title="地址管理"
+            showArrow
+            :border="false"
+            class="list-border"
+          />
+        </uni-list>
+      </view>
+    </uni-forms>
+
+    <!-- 当前社交平台的绑定关系，只处理 wechat 微信场景 -->
+    <view v-if="sheep.$platform.name !== 'H5'">
+      <view class="title-box ss-p-l-30">第三方账号绑定</view>
+      <view class="account-list ss-flex ss-row-between">
+        <view v-if="'WechatOfficialAccount' === sheep.$platform.name" class="ss-flex ss-col-center">
+          <image
+            class="list-img"
+            :src="sheep.$url.static('/static/img/shop/platform/WechatOfficialAccount.png')"
+          />
+          <text class="list-name">微信公众号</text>
+        </view>
+        <view v-if="'WechatMiniProgram' === sheep.$platform.name" class="ss-flex ss-col-center">
+          <image
+            class="list-img"
+            :src="sheep.$url.static('/static/img/shop/platform/WechatMiniProgram.png')"
+          />
+          <text class="list-name">微信小程序</text>
+        </view>
+        <view v-if="'App' === sheep.$platform.name" class="ss-flex ss-col-center">
+          <image
+            class="list-img"
+            :src="sheep.$url.static('/static/img/shop/platform/wechat.png')"
+          />
+          <text class="list-name">微信开放平台</text>
+        </view>
+        <view class="ss-flex ss-col-center">
+          <view class="info ss-flex ss-col-center" v-if="state.thirdInfo">
+            <image
+              class="avatar ss-m-r-20"
+              :src="sheep.$url.cdn(state.thirdInfo.avatar)"
+            />
+            <text class="name">{{ state.thirdInfo.nickname }}</text>
+          </view>
+          <view class="bind-box ss-m-l-20">
+            <button
+              v-if="state.thirdInfo.openid"
+              class="ss-reset-button relieve-btn"
+              @tap="unBindThirdOauth"
+            >
+              解绑
+            </button>
+            <button v-else class="ss-reset-button bind-btn" @tap="bindThirdOauth">绑定</button>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <su-fixed bottom placeholder bg="none">
+      <view class="footer-box ss-p-20">
+        <button class="ss-rest-button logout-btn ui-Shadow-Main" @tap="onSubmit">保存</button>
+      </view>
+    </su-fixed>
+  </s-layout>
+</template>
+
+<script setup>
+  import { computed, reactive, onBeforeMount } from 'vue';
+  import sheep from '@/sheep';
+  import { clone } from 'lodash';
+  import { showAuthModal } from '@/sheep/hooks/useModal';
+  import FileApi from '@/api/infra/file';
+  import UserApi from '@/api/member/user';
+
+  const state = reactive({
+    model: {}, // 个人信息
+    rules: {},
+    thirdInfo: {}, // 社交用户的信息
+  });
+
+  const placeholderStyle = 'color:#BBBBBB;font-size:28rpx;line-height:normal';
+
+  const sexRadioMap = [{
+      name: '男',
+      value: '1',
+    },
+    {
+      name: '女',
+      value: '2',
+    }
+  ];
+
+  const userInfo = computed(() => sheep.$store('user').userInfo);
+
+  // 选择性别
+  function onChangeGender(e) {
+    state.model.sex = e.detail.value;
+  }
+
+  // 修改手机号
+  const onChangeMobile = () => {
+    showAuthModal('changeMobile');
+  };
+
+  // 选择微信的头像，进行上传
+  function onChooseAvatar(e) {
+    const tempUrl = e.detail.avatarUrl || '';
+    uploadAvatar(tempUrl);
+  }
+
+  // 手动选择头像，进行上传
+  function onChangeAvatar() {
+    uni.chooseImage({
+      success: async (chooseImageRes) => {
+        const tempUrl = chooseImageRes.tempFilePaths[0];
+        await uploadAvatar(tempUrl);
+      },
+    });
+  }
+
+  // 上传头像文件
+  async function uploadAvatar(tempUrl) {
+    if (!tempUrl) {
+      return;
+    }
+    let { data } = await FileApi.uploadFile(tempUrl);
+    state.model.avatar = data;
+  }
+
+  // 修改密码
+  function onSetPassword() {
+    showAuthModal('changePassword');
+  }
+
+  // 绑定第三方账号
+  async function bindThirdOauth() {
+    let result = await sheep.$platform.useProvider('wechat').bind();
+    if (result) {
+      await getUserInfo();
+    }
+  }
+
+  // 解绑第三方账号
+  function unBindThirdOauth() {
+    uni.showModal({
+      title: '解绑提醒',
+      content: '解绑后您将无法通过微信登录此账号',
+      cancelText: '再想想',
+      confirmText: '确定',
+      success: async function (res) {
+        if (!res.confirm) {
+          return;
+        }
+        const result = await sheep.$platform.useProvider('wechat').unbind(state.thirdInfo.openid);
+        if (result) {
+          await getUserInfo();
+        }
+      },
+    });
+  }
+
+  // 保存信息
+  async function onSubmit() {
+	 const { code } = await UserApi.updateUser({
+      avatar: state.model.avatar,
+      nickname: state.model.nickname,
+      sex: state.model.sex,
+    });
+    if (code === 0) {
+      await getUserInfo();
+    }
+  }
+
+  // 获得用户信息
+  const getUserInfo = async () => {
+    // 个人信息
+    const userInfo = await sheep.$store('user').getInfo();
+    state.model = clone(userInfo);
+
+    // 获得社交用户的信息
+    if (sheep.$platform.name !== 'H5') {
+      const result = await sheep.$platform.useProvider('wechat').getInfo();
+      state.thirdInfo = result || {};
+    }
+  };
+
+  onBeforeMount(() => {
+    getUserInfo();
+  });
+</script>
+
+<style lang="scss" scoped>
+  :deep() {
+    .uni-file-picker {
+      border-radius: 50%;
+    }
+
+    .uni-file-picker__container {
+      margin: -14rpx -12rpx;
+    }
+
+    .file-picker__progress {
+      height: 0 !important;
+    }
+
+    .uni-list-item__content-title {
+      font-size: 28rpx !important;
+      color: #333333 !important;
+      line-height: normal !important;
+    }
+
+    .uni-icons {
+      font-size: 40rpx !important;
+    }
+
+    .is-disabled {
+      color: #333333;
+    }
+  }
+
+  :deep(.disabled) {
+    opacity: 1;
+  }
+
+  .gender-name {
+    font-size: 28rpx;
+    font-weight: 500;
+    line-height: normal;
+    color: #333333;
+  }
+
+  .title-box {
+    font-size: 28rpx;
+    font-weight: 500;
+    color: #666666;
+    line-height: 100rpx;
+  }
+
+  .logout-btn {
+    width: 710rpx;
+    height: 80rpx;
+    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    border-radius: 40rpx;
+    font-size: 30rpx;
+    font-weight: 500;
+    color: $white;
+  }
+
+  .radio-dark {
+    filter: grayscale(100%);
+    filter: gray;
+    opacity: 0.4;
+  }
+
+  .content-img {
+    border-radius: 50%;
+  }
+  .header-box-content {
+    position: relative;
+    width: 160rpx;
+    height: 160rpx;
+    overflow: hidden;
+    border-radius: 50%;
+  }
+  .avatar-action {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 0;
+    z-index: 1;
+    width: 160rpx;
+    height: 46rpx;
+    background: rgba(#000000, 0.3);
+
+    .avatar-action-btn {
+      width: 160rpx;
+      height: 46rpx;
+      font-weight: 500;
+      font-size: 24rpx;
+      color: #ffffff;
+    }
+  }
+
+  // 绑定项
+  .account-list {
+    background-color: $white;
+    height: 100rpx;
+    padding: 0 20rpx;
+
+    .list-img {
+      width: 40rpx;
+      height: 40rpx;
+      margin-right: 10rpx;
+    }
+
+    .list-name {
+      font-size: 28rpx;
+      color: #333333;
+    }
+
+    .info {
+      .avatar {
+        width: 38rpx;
+        height: 38rpx;
+        border-radius: 50%;
+        overflow: hidden;
+      }
+
+      .name {
+        font-size: 28rpx;
+        font-weight: 400;
+        color: $dark-9;
+      }
+    }
+
+    .bind-box {
+      width: 100rpx;
+      height: 50rpx;
+      line-height: normal;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 24rpx;
+
+      .bind-btn {
+        width: 100%;
+        height: 100%;
+        border-radius: 25rpx;
+        background: #f4f4f4;
+        color: #999999;
+      }
+      .relieve-btn {
+        width: 100%;
+        height: 100%;
+        border-radius: 25rpx;
+        background: var(--ui-BG-Main-opacity-1);
+        color: var(--ui-BG-Main);
+      }
+    }
+  }
+
+  .list-border {
+    font-size: 28rpx;
+    font-weight: 400;
+    color: #333333;
+    border-bottom: 2rpx solid #eeeeee;
+  }
+
+  image {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/pages/user/wallet/money.vue b/pages/user/wallet/money.vue
new file mode 100644
index 0000000..aec661d
--- /dev/null
+++ b/pages/user/wallet/money.vue
@@ -0,0 +1,373 @@
+<!-- 我的钱包 -->
+<template>
+  <s-layout class="wallet-wrap" title="钱包">
+    <!-- 钱包卡片 -->
+    <view class="header-box ss-flex ss-row-center ss-col-center">
+      <view class="card-box ui-BG-Main ui-Shadow-Main">
+        <view class="card-head ss-flex ss-col-center">
+          <view class="card-title ss-m-r-10">钱包余额（元）</view>
+          <view
+            @tap="state.showMoney = !state.showMoney"
+            class="ss-eye-icon"
+            :class="state.showMoney ? 'cicon-eye' : 'cicon-eye-off'"
+          />
+        </view>
+        <view class="ss-flex ss-row-between ss-col-center ss-m-t-64">
+          <view class="money-num">{{ state.showMoney ? fen2yuan(userWallet.balance) : '*****' }}</view>
+          <button class="ss-reset-button topup-btn" @tap="sheep.$router.go('/pages/pay/recharge')">
+            充值
+          </button>
+        </view>
+      </view>
+    </view>
+
+    <su-sticky>
+      <!-- 统计 -->
+      <view class="filter-box ss-p-x-30 ss-flex ss-col-center ss-row-between">
+        <uni-datetime-picker v-model="state.data" type="daterange" @change="onChangeTime" :end="state.today">
+          <button class="ss-reset-button date-btn">
+            <text>{{ dateFilterText }}</text>
+            <text class="cicon-drop-down ss-seldate-icon"></text>
+          </button>
+        </uni-datetime-picker>
+        <view class="total-box">
+          <view class="ss-m-b-10">总收入￥{{ fen2yuan(state.summary.totalIncome) }}</view>
+          <view>总支出￥{{ fen2yuan(state.summary.totalExpense) }}</view>
+        </view>
+      </view>
+      <su-tabs
+        :list="tabMaps"
+        @change="onChange"
+        :scrollable="false"
+        :current="state.currentTab"
+      ></su-tabs>
+    </su-sticky>
+    <s-empty v-if="state.pagination.total === 0" text="暂无数据" icon="/static/data-empty.png" />
+
+    <!-- 钱包记录 -->
+    <view v-if="state.pagination.total > 0">
+      <view
+        class="wallet-list ss-flex border-bottom"
+        v-for="item in state.pagination.list"
+        :key="item.id"
+      >
+        <view class="list-content">
+          <view class="title-box ss-flex ss-row-between ss-m-b-20">
+            <text class="title ss-line-1">
+              {{ item.title }}
+            </text>
+            <view class="money">
+              <text v-if="item.price >= 0" class="add">+{{ fen2yuan(item.price) }}</text>
+              <text v-else class="minus">{{ fen2yuan(item.price) }}</text>
+            </view>
+          </view>
+          <text class="time">
+            {{ sheep.$helper.timeFormat(state.createTime, 'yyyy-mm-dd hh:MM:ss') }}
+          </text>
+        </view>
+      </view>
+    </view>
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import { computed, reactive } from 'vue';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import dayjs from 'dayjs';
+  import _ from 'lodash';
+  import PayWalletApi from '@/api/pay/wallet';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
+  import { resetPagination } from '@/sheep/util';
+
+  const headerBg = sheep.$url.css('/static/img/shop/user/wallet_card_bg.png');
+
+  // 数据
+  const state = reactive({
+    showMoney: false,
+    date: [], // 筛选的时间段
+    currentTab: 0,
+    pagination: {
+      list: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 8
+    },
+    summary: {
+      totalIncome: 0,
+      totalExpense: 0,
+    },
+    loadStatus: '',
+    today: '',
+  });
+
+  const tabMaps = [
+    {
+      name: '全部',
+      value: '',
+    },
+    {
+      name: '收入',
+      value: '1',
+    },
+    {
+      name: '支出',
+      value: '2',
+    },
+  ];
+
+  const userWallet = computed(() => sheep.$store('user').userWallet);
+
+  // 格式化时间段
+  const dateFilterText = computed(() => {
+    if (state.date[0] === state.date[1]) {
+      return state.date[0];
+    } else {
+      return state.date.join('~');
+    }
+  });
+
+  // 获得钱包记录分页
+  async function getLogList() {
+    state.loadStatus = 'loading';
+    const { data, code } = await PayWalletApi.getWalletTransactionPage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+      type: tabMaps[state.currentTab].value,
+      'createTime[0]': state.date[0] + ' 00:00:00',
+      'createTime[1]': state.date[1] + ' 23:59:59',
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  // 获得钱包统计
+  async function getSummary() {
+    const { data, code } = await PayWalletApi.getWalletTransactionSummary({
+      'createTime': [state.date[0] + ' 00:00:00', state.date[1] + ' 23:59:59'],
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.summary = data;
+  }
+
+  onLoad(() => {
+    state.today = dayjs().format('YYYY-MM-DD');
+    state.date = [state.today, state.today];
+    getLogList();
+    getSummary();
+    // 刷新钱包的缓存
+    sheep.$store('user').getWallet();
+  });
+
+  // 处理 tab 切换
+  function onChange(e) {
+    state.currentTab = e.index;
+    // 重新加载列表
+    resetPagination(state.pagination);
+    getLogList();
+    getSummary();
+  }
+
+  // 处理时间筛选
+  function onChangeTime(e) {
+    state.date[0] = e[0];
+    state.date[1] = e[e.length - 1];
+    // 重新加载列表
+    resetPagination(state.pagination);
+    getLogList();
+    getSummary();
+  }
+
+  onReachBottom(() => {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getLogList();
+  });
+</script>
+
+<style lang="scss" scoped>
+  // 钱包
+  .header-box {
+    background-color: $white;
+    padding: 30rpx;
+
+    .card-box {
+      width: 100%;
+      min-height: 300rpx;
+      padding: 40rpx;
+      background-size: 100% 100%;
+      border-radius: 30rpx;
+      overflow: hidden;
+      position: relative;
+      z-index: 1;
+      box-sizing: border-box;
+
+      &::after {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 100%;
+        z-index: 2;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: v-bind(headerBg)
+          no-repeat;
+        pointer-events: none;
+      }
+
+      .card-head {
+        color: $white;
+        font-size: 30rpx;
+      }
+
+      .ss-eye-icon {
+        font-size: 40rpx;
+        color: $white;
+      }
+
+      .money-num {
+        font-size: 70rpx;
+        line-height: 70rpx;
+        font-weight: 500;
+        color: $white;
+        font-family: OPPOSANS;
+      }
+
+      .reduce-num {
+        font-size: 26rpx;
+        font-weight: 400;
+        color: $white;
+      }
+
+      .topup-btn {
+        width: 120rpx;
+        height: 60rpx;
+        line-height: 60rpx;
+        border-radius: 30px;
+        font-size: 26rpx;
+        font-weight: 500;
+        background-color: $white;
+        color: var(--ui-BG-Main);
+      }
+    }
+  }
+
+  // 筛选
+
+  .filter-box {
+    height: 114rpx;
+    background-color: $bg-page;
+
+    .total-box {
+      font-size: 24rpx;
+      font-weight: 500;
+      color: $dark-9;
+    }
+
+    .date-btn {
+      background-color: $white;
+      line-height: 54rpx;
+      border-radius: 27rpx;
+      padding: 0 20rpx;
+      font-size: 24rpx;
+      font-weight: 500;
+      color: $dark-6;
+
+      .ss-seldate-icon {
+        font-size: 50rpx;
+        color: $dark-9;
+      }
+    }
+  }
+
+  .tabs-box {
+    background: $white;
+    border-bottom: 2rpx solid #eeeeee;
+  }
+
+  // tab
+  .wallet-tab-card {
+    .tab-item {
+      height: 80rpx;
+      position: relative;
+
+      .tab-title {
+        font-size: 30rpx;
+      }
+
+      .cur-tab-title {
+        font-weight: $font-weight-bold;
+      }
+
+      .tab-line {
+        width: 60rpx;
+        height: 6rpx;
+        border-radius: 6rpx;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 2rpx;
+        background-color: var(--ui-BG-Main);
+      }
+    }
+  }
+
+  // 钱包记录
+  .wallet-list {
+    padding: 30rpx;
+    background-color: #ffff;
+
+    .head-img {
+      width: 70rpx;
+      height: 70rpx;
+      border-radius: 50%;
+      background: $gray-c;
+    }
+
+    .list-content {
+      justify-content: space-between;
+      align-items: flex-start;
+      flex: 1;
+
+      .title {
+        font-size: 28rpx;
+        color: $dark-3;
+        width: 400rpx;
+      }
+
+      .time {
+        color: $gray-c;
+        font-size: 22rpx;
+      }
+    }
+
+    .money {
+      font-size: 28rpx;
+      font-weight: bold;
+      font-family: OPPOSANS;
+      .add {
+        color: var(--ui-BG-Main);
+      }
+
+      .minus {
+        color: $dark-3;
+      }
+    }
+  }
+</style>
diff --git a/pages/user/wallet/score.vue b/pages/user/wallet/score.vue
new file mode 100644
index 0000000..5988c51
--- /dev/null
+++ b/pages/user/wallet/score.vue
@@ -0,0 +1,277 @@
+<!-- 我的积分 -->
+<template>
+  <s-layout class="wallet-wrap" title="我的积分" navbar="inner">
+    <view
+      class="header-box ss-flex ss-flex-col ss-row-center ss-col-center"
+      :style="[
+        {
+          marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
+          paddingTop: Number(statusBarHeight + 88) + 'rpx',
+        },
+      ]"
+    >
+      <view class="header-bg">
+        <view class="bg" />
+      </view>
+      <view class="score-box ss-flex-col ss-row-center ss-col-center">
+        <view class="ss-m-b-30">
+          <text class="all-title ss-m-r-8">当前积分</text>
+        </view>
+        <text class="all-num">{{ userInfo.point || 0 }}</text>
+      </view>
+    </view>
+    <!-- tab -->
+    <su-sticky :customNavHeight="sys_navBar">
+      <!-- 统计 -->
+      <view class="filter-box ss-p-x-30 ss-flex ss-col-center ss-row-between">
+				<uni-datetime-picker v-model="state.date" type="daterange" @change="onChangeTime" :end="state.today">
+					<button class="ss-reset-button date-btn">
+						<text>{{ dateFilterText }}</text>
+						<text class="cicon-drop-down ss-seldate-icon"></text>
+					</button>
+				</uni-datetime-picker>
+
+        <!-- TODO 芋艿：优化 -->
+<!--				<view class="total-box">-->
+<!--					<view class="ss-m-b-10">总收入￥{{ state.pagination.income }}</view>-->
+<!--					<view>总支出￥{{ -state.pagination.expense }}</view>-->
+<!--				</view>-->
+			</view>
+      <su-tabs
+        :list="tabMaps"
+        @change="onChange"
+        :scrollable="false"
+        :current="state.currentTab"
+      ></su-tabs>
+    </su-sticky>
+
+    <!-- list -->
+    <view class="list-box">
+      <view v-if="state.pagination.total > 0">
+        <view
+          class="list-item ss-flex ss-col-center ss-row-between"
+          v-for="item in state.pagination.list"
+          :key="item.id"
+        >
+          <view class="ss-flex-col">
+            <view class="name"
+              >{{ item.title }}{{ item.description ? ' - ' + item.description : '' }}</view
+            >
+            <view class="time">{{
+              sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss')
+            }}</view>
+          </view>
+          <view class="add" v-if="item.point > 0">+{{ item.point }}</view>
+          <view class="minus" v-else>{{ item.point }}</view>
+        </view>
+      </view>
+      <s-empty v-else text="暂无数据" icon="/static/data-empty.png" />
+    </view>
+
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="onLoadMore"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+  import { computed, reactive } from 'vue';
+  import _ from 'lodash';
+  import dayjs from 'dayjs';
+  import PointApi from '@/api/member/point';
+  import { resetPagination } from '@/sheep/util';
+
+  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+  const userInfo = computed(() => sheep.$store('user').userInfo);
+  const sys_navBar = sheep.$platform.navbar;
+
+  const state = reactive({
+    currentTab: 0,
+    pagination: {
+      list: 0,
+      total: 0,
+      pageSize: 6,
+      pageNo: 1,
+    },
+    loadStatus: '',
+    date: [],
+    today: '',
+  });
+
+  const tabMaps = [
+    {
+      name: '全部',
+      value: 'all',
+    },
+    {
+      name: '收入',
+      value: 'true',
+    },
+    {
+      name: '支出',
+      value: 'false',
+    },
+  ];
+
+  const dateFilterText = computed(() => {
+    if (state.date[0] === state.date[1]) {
+      return state.date[0];
+    } else {
+      return state.date.join('~');
+    }
+  });
+
+  async function getLogList() {
+    state.loadStatus = 'loading';
+    let { code, data } = await PointApi.getPointRecordPage({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+      addStatus: state.currentTab > 0 ? tabMaps[state.currentTab].value : undefined,
+      'createTime[0]': state.date[0] + ' 00:00:00',
+      'createTime[1]': state.date[1] + ' 23:59:59',
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
+  onLoad(() => {
+    state.today = dayjs().format('YYYY-MM-DD');
+    state.date = [state.today, state.today];
+    getLogList();
+  });
+
+  function onChange(e) {
+    state.currentTab = e.index;
+    resetPagination(state.pagination);
+    getLogList();
+  }
+
+  function onChangeTime(e) {
+    state.date[0] = e[0];
+    state.date[1] = e[e.length - 1];
+    resetPagination(state.pagination);
+    getLogList();
+  }
+
+  function onLoadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getLogList();
+  }
+
+  onReachBottom(() => {
+    onLoadMore();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .header-box {
+    width: 100%;
+    background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%)
+      no-repeat;
+    background-size: 750rpx 100%;
+    padding: 0 0 120rpx 0;
+    box-sizing: border-box;
+
+    .score-box {
+      height: 100%;
+
+      .all-num {
+        font-size: 50rpx;
+        font-weight: bold;
+        color: #fff;
+        font-family: OPPOSANS;
+      }
+
+      .all-title {
+        font-size: 26rpx;
+        font-weight: 500;
+        color: #fff;
+      }
+
+      .cicon-help-o {
+        color: #fff;
+        font-size: 28rpx;
+      }
+    }
+  }
+
+  // 筛选
+  .filter-box {
+    height: 114rpx;
+    background-color: $bg-page;
+
+    .total-box {
+      font-size: 24rpx;
+      font-weight: 500;
+      color: $dark-9;
+    }
+
+    .date-btn {
+      background-color: $white;
+      line-height: 54rpx;
+      border-radius: 27rpx;
+      padding: 0 20rpx;
+      font-size: 24rpx;
+      font-weight: 500;
+      color: $dark-6;
+
+      .ss-seldate-icon {
+        font-size: 50rpx;
+        color: $dark-9;
+      }
+    }
+  }
+
+  .list-box {
+    .list-item {
+      background: #fff;
+      border-bottom: 1rpx solid #dfdfdf;
+      padding: 30rpx;
+
+      .name {
+        font-size: 28rpx;
+
+        font-weight: 500;
+        color: rgba(102, 102, 102, 1);
+        line-height: 28rpx;
+        margin-bottom: 20rpx;
+      }
+
+      .time {
+        font-size: 24rpx;
+
+        font-weight: 500;
+        color: rgba(196, 196, 196, 1);
+        line-height: 24px;
+      }
+
+      .add {
+        font-size: 30rpx;
+
+        font-weight: 500;
+        color: #e6b873;
+      }
+
+      .minus {
+        font-size: 30rpx;
+
+        font-weight: 500;
+        color: $dark-3;
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/sheep/components/s-activity-pop/s-activity-pop.vue b/sheep/components/s-activity-pop/s-activity-pop.vue
new file mode 100644
index 0000000..04e5c80
--- /dev/null
+++ b/sheep/components/s-activity-pop/s-activity-pop.vue
@@ -0,0 +1,105 @@
+<!-- 商品信息：满减送等营销活动的弹窗 -->
+<template>
+  <su-popup :show="show" type="bottom" round="20" @close="emits('close')" showClose>
+    <view class="model-box">
+      <view class="title ss-m-t-16 ss-m-l-20 ss-flex">营销活动</view>
+      <scroll-view
+        class="model-content ss-m-t-50"
+        scroll-y
+        :scroll-with-animation="false"
+        :enable-back-to-top="true"
+      >
+        <view v-for="item in state.activityInfo" :key="item.id">
+          <view class="ss-flex ss-col-top ss-m-b-40" @tap="onGoodsList(item)">
+            <view class="model-content-tag ss-flex ss-row-center">满减</view>
+            <view class="ss-m-l-20 model-content-title ss-flex-1">
+              <view class="ss-m-b-24" v-for="rule in state.activityMap[item.id]?.rules" :key="rule">
+                {{ formatRewardActivityRule(state.activityMap[item.id], rule) }}
+              </view>
+            </view>
+            <text class="cicon-forward" />
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+  </su-popup>
+</template>
+<script setup>
+  import sheep from '@/sheep';
+  import { computed, reactive, watch } from 'vue';
+  import RewardActivityApi from '@/api/promotion/rewardActivity';
+  import { formatRewardActivityRule } from '@/sheep/hooks/useGoods';
+
+  const props = defineProps({
+    modelValue: {
+      type: Object,
+      default() {},
+    },
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  });
+  const emits = defineEmits(['close']);
+  const state = reactive({
+    activityInfo: computed(() => props.modelValue),
+    activityMap: {}
+  });
+
+  watch(
+    () => props.show,
+    () => {
+      // 展示的情况下，加载每个活动的详细信息
+      if (props.show) {
+        state.activityInfo?.forEach(activity => {
+          RewardActivityApi.getRewardActivity(activity.id).then(res => {
+            if (res.code !== 0) {
+              return;
+            }
+            state.activityMap[activity.id] = res.data;
+          })
+        });
+      }
+    },
+  );
+
+  function onGoodsList(e) {
+    sheep.$router.go('/pages/activity/index', {
+      activityId: e.id,
+    });
+  }
+</script>
+<style lang="scss" scoped>
+  .model-box {
+    height: 60vh;
+    .title {
+      font-size: 36rpx;
+      height: 80rpx;
+      font-weight: bold;
+      color: #333333;
+    }
+  }
+  .model-content {
+    padding: 0 20rpx;
+    box-sizing: border-box;
+    .model-content-tag {
+      background: rgba(#ff6911, 0.1);
+      font-size: 24rpx;
+      font-weight: 500;
+      color: #ff6911;
+      line-height: 42rpx;
+      width: 68rpx;
+      height: 32rpx;
+      border-radius: 5rpx;
+    }
+    .model-content-title {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #333333;
+    }
+    .cicon-forward {
+      font-size: 28rpx;
+      color: #999999;
+    }
+  }
+</style>
diff --git a/sheep/components/s-address-item/s-address-item.vue b/sheep/components/s-address-item/s-address-item.vue
new file mode 100644
index 0000000..f1b54b3
--- /dev/null
+++ b/sheep/components/s-address-item/s-address-item.vue
@@ -0,0 +1,112 @@
+<!-- 地址卡片 -->
+<template>
+  <view
+    class="address-item ss-flex ss-row-between ss-col-center"
+    :class="[{ 'border-bottom': props.hasBorderBottom }]"
+  >
+    <view class="item-left" v-if="!isEmpty(props.item)">
+      <view class="area-text ss-flex ss-col-center">
+        <uni-tag
+          class="ss-m-r-10"
+          size="small"
+          custom-style="background-color: var(--ui-BG-Main); border-color: var(--ui-BG-Main); color: #fff;"
+          v-if="props.item.defaultStatus"
+          text="默认"
+        />
+        {{ props.item.areaName }}
+      </view>
+      <view class="address-text">
+        {{ props.item.detailAddress }}
+      </view>
+      <view class="person-text">
+        {{ props.item.name }} {{ props.item.mobile }}
+      </view>
+    </view>
+    <view v-else>
+      <view class="address-text ss-m-b-10">请选择收货地址</view>
+    </view>
+    <slot>
+      <button class="ss-reset-button edit-btn" @tap.stop="onEdit">
+        <view class="edit-icon ss-flex ss-row-center ss-col-center">
+          <image :src="sheep.$url.static('/static/img/shop/user/address/edit.png')" />
+        </view>
+      </button>
+    </slot>
+  </view>
+</template>
+
+<script setup>
+  /**
+   * 基础组件 - 地址卡片
+   *
+   * @param {String}  icon = _icon-edit    - icon
+   *
+   * @event {Function()} click			 - 点击
+   * @event {Function()} actionClick		 - 点击工具栏
+   *
+   * @slot 								 - 默认插槽
+   */
+  import sheep from '@/sheep';
+  import { isEmpty } from 'lodash';
+  const props = defineProps({
+    item: {
+      type: Object,
+      default() {},
+    },
+    hasBorderBottom: {
+      type: Boolean,
+      defult: true,
+    },
+  });
+
+  const onEdit = () => {
+    sheep.$router.go('/pages/user/address/edit', {
+      id: props.item.id,
+    });
+  };
+</script>
+
+<style lang="scss" scoped>
+  .address-item {
+    padding: 24rpx 30rpx;
+
+    .item-left {
+      width: 600rpx;
+    }
+
+    .area-text {
+      font-size: 26rpx;
+      font-weight: 400;
+      color: $dark-9;
+    }
+
+    .address-text {
+      font-size: 32rpx;
+      font-weight: 500;
+      color: #333333;
+      line-height: 48rpx;
+    }
+
+    .person-text {
+      font-size: 28rpx;
+      font-weight: 400;
+      color: $dark-9;
+    }
+  }
+
+  .edit-btn {
+    width: 44rpx;
+    height: 44rpx;
+    background: $gray-f;
+    border-radius: 50%;
+
+    .edit-icon {
+      width: 24rpx;
+      height: 24rpx;
+    }
+  }
+  image {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/sheep/components/s-auth-modal/components/account-login.vue b/sheep/components/s-auth-modal/components/account-login.vue
new file mode 100644
index 0000000..48e7e61
--- /dev/null
+++ b/sheep/components/s-auth-modal/components/account-login.vue
@@ -0,0 +1,107 @@
+<!-- 账号密码登录 accountLogin  -->
+<template>
+  <view>
+    <!-- 标题栏 -->
+    <view class="head-box ss-m-b-60 ss-flex-col">
+      <view class="ss-flex ss-m-b-20">
+        <view class="head-title-active head-title-line" @tap="showAuthModal('smsLogin')">
+          短信登录
+        </view>
+        <view class="head-title ss-m-r-40 head-title-animation">账号登录</view>
+      </view>
+      <view class="head-subtitle">如果未设置过密码，请点击忘记密码</view>
+    </view>
+
+    <!-- 表单项 -->
+    <uni-forms
+      ref="accountLoginRef"
+      v-model="state.model"
+      :rules="state.rules"
+      validateTrigger="bind"
+      labelWidth="140"
+      labelAlign="center"
+    >
+      <uni-forms-item name="mobile" label="账号">
+        <uni-easyinput placeholder="请输入账号" v-model="state.model.mobile" :inputBorder="false">
+          <template v-slot:right>
+            <button class="ss-reset-button forgot-btn" @tap="showAuthModal('resetPassword')">
+              忘记密码
+            </button>
+          </template>
+        </uni-easyinput>
+      </uni-forms-item>
+
+      <uni-forms-item name="password" label="密码">
+        <uni-easyinput
+          type="password"
+          placeholder="请输入密码"
+          v-model="state.model.password"
+          :inputBorder="false"
+        >
+          <template v-slot:right>
+            <button class="ss-reset-button login-btn-start" @tap="accountLoginSubmit">登录</button>
+          </template>
+        </uni-easyinput>
+      </uni-forms-item>
+    </uni-forms>
+  </view>
+</template>
+
+<script setup>
+  import { ref, reactive, unref } from 'vue';
+  import sheep from '@/sheep';
+  import { mobile, password } from '@/sheep/validate/form';
+  import { showAuthModal, closeAuthModal } from '@/sheep/hooks/useModal';
+  import AuthUtil from '@/api/member/auth';
+
+  const accountLoginRef = ref(null);
+
+  const emits = defineEmits(['onConfirm']);
+
+  const props = defineProps({
+    agreeStatus: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  // 数据
+  const state = reactive({
+    model: {
+      mobile: '', // 账号
+      password: '', // 密码
+    },
+    rules: {
+      mobile,
+      password,
+    },
+  });
+
+  // 账号登录
+  async function accountLoginSubmit() {
+    // 表单验证
+    const validate = await unref(accountLoginRef)
+      .validate()
+      .catch((error) => {
+        console.log('error: ', error);
+      });
+    if (!validate) return;
+
+    // 同意协议
+    if (!props.agreeStatus) {
+      emits('onConfirm', true)
+      sheep.$helper.toast('请勾选同意');
+      return;
+    }
+
+    // 提交数据
+    const { code, data } = await AuthUtil.login(state.model);
+    if (code === 0) {
+      closeAuthModal();
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '../index.scss';
+</style>
diff --git a/sheep/components/s-auth-modal/components/change-mobile.vue b/sheep/components/s-auth-modal/components/change-mobile.vue
new file mode 100644
index 0000000..b1a43f9
--- /dev/null
+++ b/sheep/components/s-auth-modal/components/change-mobile.vue
@@ -0,0 +1,127 @@
+<!-- 绑定/更换手机号 changeMobile  -->
+<template>
+  <view>
+    <!-- 标题栏 -->
+    <view class="head-box ss-m-b-60">
+      <view class="head-title ss-m-b-20">
+        {{ userInfo.mobile ? '更换手机号' : '绑定手机号' }}
+      </view>
+      <view class="head-subtitle">为了您的账号安全，请使用本人手机号码</view>
+    </view>
+
+    <!-- 表单项 -->
+    <uni-forms
+      ref="changeMobileRef"
+      v-model="state.model"
+      :rules="state.rules"
+      validateTrigger="bind"
+      labelWidth="140"
+      labelAlign="center"
+    >
+      <uni-forms-item name="mobile" label="手机号">
+        <uni-easyinput
+          placeholder="请输入手机号"
+          v-model="state.model.mobile"
+          :inputBorder="false"
+          type="number"
+        >
+          <template v-slot:right>
+            <button
+              class="ss-reset-button code-btn-start"
+              :disabled="state.isMobileEnd"
+              :class="{ 'code-btn-end': state.isMobileEnd }"
+              @tap="getSmsCode('changeMobile', state.model.mobile)"
+            >
+              {{ getSmsTimer('changeMobile') }}
+            </button>
+          </template>
+        </uni-easyinput>
+      </uni-forms-item>
+
+      <uni-forms-item name="code" label="验证码">
+        <uni-easyinput
+          placeholder="请输入验证码"
+          v-model="state.model.code"
+          :inputBorder="false"
+          type="number"
+          maxlength="4"
+        >
+          <template v-slot:right>
+            <button class="ss-reset-button login-btn-start" @tap="changeMobileSubmit">
+              确认
+            </button>
+          </template>
+        </uni-easyinput>
+      </uni-forms-item>
+    </uni-forms>
+
+    <!-- 微信独有：读取手机号 -->
+    <button
+      v-if="'WechatMiniProgram' === sheep.$platform.name"
+      class="ss-reset-button type-btn"
+      open-type="getPhoneNumber"
+      @getphonenumber="getPhoneNumber"
+    >
+      使用微信手机号
+    </button>
+  </view>
+</template>
+
+<script setup>
+  import { computed, ref, reactive, unref } from 'vue';
+  import sheep from '@/sheep';
+  import { code, mobile } from '@/sheep/validate/form';
+  import { closeAuthModal, getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
+  import UserApi from '@/api/member/user';
+
+  const changeMobileRef = ref(null);
+  const userInfo = computed(() => sheep.$store('user').userInfo);
+
+  // 数据
+  const state = reactive({
+    isMobileEnd: false, // 手机号输入完毕
+    model: {
+      mobile: '', // 手机号
+      code: '', // 验证码
+    },
+    rules: {
+      code,
+      mobile,
+    },
+  });
+
+  // 绑定手机号
+  async function changeMobileSubmit() {
+    const validate = await unref(changeMobileRef)
+      .validate()
+      .catch((error) => {
+        console.log('error: ', error);
+      });
+    if (!validate) {
+      return;
+    }
+    // 提交更新请求
+    const { code } = await UserApi.updateUserMobile(state.model);
+    if (code !== 0) {
+      return;
+    }
+    sheep.$store('user').getInfo();
+    closeAuthModal();
+  }
+
+  // 使用微信手机号
+  async function getPhoneNumber(e) {
+    if (e.detail.errMsg !== 'getPhoneNumber:ok') {
+      return;
+    }
+    const result = await sheep.$platform.useProvider().bindUserPhoneNumber(e.detail);
+    if (result) {
+      sheep.$store('user').getInfo();
+      closeAuthModal();
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '../index.scss';
+</style>
diff --git a/sheep/components/s-auth-modal/components/change-password.vue b/sheep/components/s-auth-modal/components/change-password.vue
new file mode 100644
index 0000000..36f85ab
--- /dev/null
+++ b/sheep/components/s-auth-modal/components/change-password.vue
@@ -0,0 +1,106 @@
+<!-- 修改密码（登录时）  -->
+<template>
+  <view>
+    <!-- 标题栏 -->
+    <view class="head-box ss-m-b-60">
+      <view class="head-title ss-m-b-20">修改密码</view>
+      <view class="head-subtitle">如密码丢失或未设置,请点击忘记密码重新设置</view>
+    </view>
+
+    <!-- 表单项 -->
+    <uni-forms
+      ref="changePasswordRef"
+      v-model="state.model"
+      :rules="state.rules"
+      validateTrigger="bind"
+      labelWidth="140"
+      labelAlign="center"
+    >
+      <uni-forms-item name="code" label="验证码">
+        <uni-easyinput
+          placeholder="请输入验证码"
+          v-model="state.model.code"
+          type="number"
+          maxlength="4"
+          :inputBorder="false"
+        >
+          <template v-slot:right>
+            <button
+              class="ss-reset-button code-btn code-btn-start"
+              :disabled="state.isMobileEnd"
+              :class="{ 'code-btn-end': state.isMobileEnd }"
+              @tap="getSmsCode('changePassword')"
+            >
+              {{ getSmsTimer('resetPassword') }}
+            </button>
+          </template>
+        </uni-easyinput>
+      </uni-forms-item>
+
+      <uni-forms-item name="reNewPassword" label="密码">
+        <uni-easyinput
+          type="password"
+          placeholder="请输入密码"
+          v-model="state.model.password"
+          :inputBorder="false"
+        >
+          <template v-slot:right>
+            <button class="ss-reset-button login-btn-start" @tap="changePasswordSubmit">
+              确认
+            </button>
+          </template>
+        </uni-easyinput>
+      </uni-forms-item>
+    </uni-forms>
+
+    <button class="ss-reset-button type-btn" @tap="closeAuthModal">
+      取消修改
+    </button>
+  </view>
+</template>
+
+<script setup>
+  import { ref, reactive, unref } from 'vue';
+  import { code, password } from '@/sheep/validate/form';
+  import { closeAuthModal, getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
+  import UserApi from '@/api/member/user';
+
+  const changePasswordRef = ref(null);
+
+  // 数据
+  const state = reactive({
+    model: {
+      mobile: '', // 手机号
+      code: '', // 验证码
+      password: '', // 密码
+    },
+    rules: {
+      code,
+      password,
+    },
+  });
+
+  // 更改密码
+  async function changePasswordSubmit() {
+    // 参数校验
+    const validate = await unref(changePasswordRef)
+      .validate()
+      .catch((error) => {
+        console.log('error: ', error);
+      });
+    if (!validate) {
+      return;
+    }
+    // 发起请求
+    const { code } = await UserApi.updateUserPassword(state.model);
+    if (code !== 0) {
+      return;
+    }
+    // 成功后，只需要关闭弹窗
+    closeAuthModal();
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '../index.scss';
+</style>
diff --git a/sheep/components/s-auth-modal/components/mp-authorization.vue b/sheep/components/s-auth-modal/components/mp-authorization.vue
new file mode 100644
index 0000000..fec4205
--- /dev/null
+++ b/sheep/components/s-auth-modal/components/mp-authorization.vue
@@ -0,0 +1,152 @@
+<!-- 微信授权信息 mpAuthorization  -->
+<template>
+  <view>
+    <!-- 标题栏 -->
+    <view class="head-box ss-m-b-60 ss-flex-col">
+      <view class="ss-flex ss-m-b-20">
+        <view class="head-title ss-m-r-40 head-title-animation">授权信息</view>
+      </view>
+      <view class="head-subtitle">完善您的头像、昵称、手机号</view>
+    </view>
+
+    <!-- 表单项 -->
+    <uni-forms
+      ref="accountLoginRef"
+      v-model="state.model"
+      :rules="state.rules"
+      validateTrigger="bind"
+      labelWidth="140"
+      labelAlign="center"
+    >
+      <!-- 获取头像昵称：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html -->
+      <uni-forms-item name="avatar" label="头像">
+        <button
+          class="ss-reset-button avatar-btn"
+          open-type="chooseAvatar"
+          @chooseavatar="onChooseAvatar"
+        >
+          <image
+            class="avatar-img"
+            :src="sheep.$url.cdn(state.model.avatar)"
+            mode="aspectFill"
+            @tap="sheep.$router.go('/pages/user/info')"
+          />
+          <text class="cicon-forward" />
+        </button>
+      </uni-forms-item>
+      <uni-forms-item name="nickname" label="昵称">
+        <uni-easyinput
+          type="nickname"
+          placeholder="请输入昵称"
+          v-model="state.model.nickname"
+          :inputBorder="false"
+        />
+      </uni-forms-item>
+      <view class="foot-box">
+        <button class="ss-reset-button authorization-btn" @tap="onConfirm"> 确认授权 </button>
+      </view>
+    </uni-forms>
+  </view>
+</template>
+
+<script setup>
+  import { computed, ref, reactive } from 'vue';
+  import sheep from '@/sheep';
+  import { closeAuthModal } from '@/sheep/hooks/useModal';
+  import FileApi from '@/api/infra/file';
+  import UserApi from '@/api/member/user';
+
+  const props = defineProps({
+    agreeStatus: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  const userInfo = computed(() => sheep.$store('user').userInfo);
+
+  const accountLoginRef = ref(null);
+
+  // 数据
+  const state = reactive({
+    model: {
+      nickname: userInfo.value.nickname,
+      avatar: userInfo.value.avatar,
+    },
+    rules: {},
+    disabledStyle: {
+      color: '#999',
+      disableColor: '#fff',
+    },
+  });
+
+  // 选择头像（来自微信）
+  function onChooseAvatar(e) {
+    const tempUrl = e.detail.avatarUrl || '';
+    uploadAvatar(tempUrl);
+  }
+
+  // 选择头像（来自文件系统）
+  async function uploadAvatar(tempUrl) {
+    if (!tempUrl) {
+      return;
+    }
+    let { data } = await FileApi.uploadFile(tempUrl);
+    state.model.avatar = data;
+  }
+
+  // 确认授权
+  async function onConfirm() {
+    const { model } = state;
+    const { nickname, avatar } = model;
+    if (!nickname) {
+      sheep.$helper.toast('请输入昵称');
+      return;
+    }
+    if (!avatar) {
+      sheep.$helper.toast('请选择头像');
+      return;
+    }
+    // 发起更新
+    const { code } = await UserApi.updateUser({
+      avatar: state.model.avatar,
+      nickname: state.model.nickname,
+    });
+    // 更新成功
+    if (code === 0) {
+      sheep.$helper.toast('授权成功');
+      await sheep.$store('user').getInfo();
+      closeAuthModal();
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '../index.scss';
+
+  .foot-box {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+  .authorization-btn {
+    width: 686rpx;
+    height: 80rpx;
+    background-color: var(--ui-BG-Main);
+    border-radius: 40rpx;
+    color: #fff;
+  }
+  .avatar-img {
+    width: 72rpx;
+    height: 72rpx;
+    border-radius: 36rpx;
+  }
+  .cicon-forward {
+    font-size: 30rpx;
+    color: #595959;
+  }
+  .avatar-btn {
+    width: 100%;
+    justify-content: space-between;
+  }
+</style>
diff --git a/sheep/components/s-auth-modal/components/reset-password.vue b/sheep/components/s-auth-modal/components/reset-password.vue
new file mode 100644
index 0000000..ffe20d2
--- /dev/null
+++ b/sheep/components/s-auth-modal/components/reset-password.vue
@@ -0,0 +1,119 @@
+<!-- 重置密码（未登录时）  -->
+<template>
+  <view>
+    <!-- 标题栏 -->
+    <view class="head-box ss-m-b-60">
+      <view class="head-title ss-m-b-20">重置密码</view>
+      <view class="head-subtitle">为了您的账号安全，设置密码前请先进行安全验证</view>
+    </view>
+
+    <!-- 表单项 -->
+    <uni-forms
+      ref="resetPasswordRef"
+      v-model="state.model"
+      :rules="state.rules"
+      validateTrigger="bind"
+      labelWidth="140"
+      labelAlign="center"
+    >
+      <uni-forms-item name="mobile" label="手机号">
+        <uni-easyinput
+          placeholder="请输入手机号"
+          v-model="state.model.mobile"
+          type="number"
+          :inputBorder="false"
+        >
+          <template v-slot:right>
+            <button
+              class="ss-reset-button code-btn code-btn-start"
+              :disabled="state.isMobileEnd"
+              :class="{ 'code-btn-end': state.isMobileEnd }"
+              @tap="getSmsCode('resetPassword', state.model.mobile)"
+            >
+              {{ getSmsTimer('resetPassword') }}
+            </button>
+          </template>
+        </uni-easyinput>
+      </uni-forms-item>
+
+      <uni-forms-item name="code" label="验证码">
+        <uni-easyinput
+          placeholder="请输入验证码"
+          v-model="state.model.code"
+          type="number"
+          maxlength="4"
+          :inputBorder="false"
+        />
+      </uni-forms-item>
+
+      <uni-forms-item name="password" label="密码">
+        <uni-easyinput
+          type="password"
+          placeholder="请输入密码"
+          v-model="state.model.password"
+          :inputBorder="false"
+        >
+          <template v-slot:right>
+            <button class="ss-reset-button login-btn-start" @tap="resetPasswordSubmit">
+              确认
+            </button>
+          </template>
+        </uni-easyinput>
+      </uni-forms-item>
+    </uni-forms>
+
+    <button v-if="!isLogin" class="ss-reset-button type-btn" @tap="showAuthModal('accountLogin')">
+      返回登录
+    </button>
+  </view>
+</template>
+
+<script setup>
+  import { computed, ref, reactive, unref } from 'vue';
+  import sheep from '@/sheep';
+  import { code, mobile, password } from '@/sheep/validate/form';
+  import { showAuthModal, closeAuthModal, getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
+  import UserApi from '@/api/member/user';
+
+  const resetPasswordRef = ref(null);
+  const isLogin = computed(() => sheep.$store('user').isLogin);
+
+  // 数据
+  const state = reactive({
+    isMobileEnd: false, // 手机号输入完毕
+    model: {
+      mobile: '', // 手机号
+      code: '', // 验证码
+      password: '', // 密码
+    },
+    rules: {
+      code,
+      mobile,
+      password,
+    },
+  });
+
+  // 重置密码
+  const resetPasswordSubmit = async () => {
+    // 参数校验
+    const validate = await unref(resetPasswordRef)
+      .validate()
+      .catch((error) => {
+        console.log('error: ', error);
+      });
+    if (!validate) {
+      return;
+    }
+    // 发起请求
+    const { code } = await UserApi.resetUserPassword(state.model);
+    if (code !== 0) {
+      return;
+    }
+    // 成功后，用户重新登录
+    showAuthModal('accountLogin')
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import '../index.scss';
+</style>
diff --git a/sheep/components/s-auth-modal/components/sms-login.vue b/sheep/components/s-auth-modal/components/sms-login.vue
new file mode 100644
index 0000000..9becd1a
--- /dev/null
+++ b/sheep/components/s-auth-modal/components/sms-login.vue
@@ -0,0 +1,119 @@
+<!-- 短信登录 - smsLogin  -->
+<template>
+  <view>
+    <!-- 标题栏 -->
+    <view class="head-box ss-m-b-60">
+      <view class="ss-flex ss-m-b-20">
+        <view class="head-title head-title-line head-title-animation">短信登录</view>
+        <view class="head-title-active ss-m-r-40" @tap="showAuthModal('accountLogin')">
+          账号登录
+        </view>
+      </view>
+      <view class="head-subtitle">未注册的手机号，验证后自动注册账号</view>
+    </view>
+
+    <!-- 表单项 -->
+    <uni-forms
+      ref="smsLoginRef"
+      v-model="state.model"
+      :rules="state.rules"
+      validateTrigger="bind"
+      labelWidth="140"
+      labelAlign="center"
+    >
+      <uni-forms-item name="mobile" label="手机号">
+        <uni-easyinput
+          placeholder="请输入手机号"
+          v-model="state.model.mobile"
+          :inputBorder="false"
+          type="number"
+        >
+          <template v-slot:right>
+            <button
+              class="ss-reset-button code-btn code-btn-start"
+              :disabled="state.isMobileEnd"
+              :class="{ 'code-btn-end': state.isMobileEnd }"
+              @tap="getSmsCode('smsLogin', state.model.mobile)"
+            >
+              {{ getSmsTimer('smsLogin') }}
+            </button>
+          </template>
+        </uni-easyinput>
+      </uni-forms-item>
+
+      <uni-forms-item name="code" label="验证码">
+        <uni-easyinput
+          placeholder="请输入验证码"
+          v-model="state.model.code"
+          :inputBorder="false"
+          type="number"
+          maxlength="4"
+        >
+          <template v-slot:right>
+            <button class="ss-reset-button login-btn-start" @tap="smsLoginSubmit"> 登录 </button>
+          </template>
+        </uni-easyinput>
+      </uni-forms-item>
+    </uni-forms>
+  </view>
+</template>
+
+<script setup>
+  import { ref, reactive, unref } from 'vue';
+  import sheep from '@/sheep';
+  import { code, mobile } from '@/sheep/validate/form';
+  import { showAuthModal, closeAuthModal, getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
+  import AuthUtil from '@/api/member/auth';
+
+  const smsLoginRef = ref(null);
+
+  const emits = defineEmits(['onConfirm']);
+
+  const props = defineProps({
+    agreeStatus: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  // 数据
+  const state = reactive({
+    isMobileEnd: false, // 手机号输入完毕
+    codeText: '获取验证码',
+    model: {
+      mobile: '', // 手机号
+      code: '', // 验证码
+    },
+    rules: {
+      code,
+      mobile,
+    },
+  });
+
+  // 短信登录
+  async function smsLoginSubmit() {
+    // 参数校验
+    const validate = await unref(smsLoginRef)
+      .validate()
+      .catch((error) => {
+        console.log('error: ', error);
+      });
+    if (!validate) {
+      return;
+    }
+    if (!props.agreeStatus) {
+      emits('onConfirm', true)
+      sheep.$helper.toast('请勾选同意');
+      return;
+    }
+    // 提交数据
+    const { code } = await AuthUtil.smsLogin(state.model);
+    if (code === 0) {
+      closeAuthModal();
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '../index.scss';
+</style>
diff --git a/sheep/components/s-auth-modal/index.scss b/sheep/components/s-auth-modal/index.scss
new file mode 100644
index 0000000..c4424e7
--- /dev/null
+++ b/sheep/components/s-auth-modal/index.scss
@@ -0,0 +1,151 @@
+@keyframes title-animation {
+  0% {
+    font-size: 32rpx;
+  }
+  100% {
+    font-size: 36rpx;
+  }
+}
+
+.login-wrap {
+  padding: 50rpx 34rpx;
+  min-height: 500rpx;
+  background-color: #fff;
+  border-radius: 20rpx 20rpx 0 0;
+}
+
+.head-box {
+  .head-title {
+    min-width: 160rpx;
+    font-size: 36rpx;
+    font-weight: bold;
+    color: #333333;
+    line-height: 36rpx;
+  }
+  .head-title-active {
+    width: 160rpx;
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #999;
+    line-height: 36rpx;
+  }
+  .head-title-animation {
+    animation-name: title-animation;
+    animation-duration: 0.1s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: forwards;
+  }
+  .head-title-line {
+    position: relative;
+    &::before {
+      content: '';
+      width: 1rpx;
+      height: 34rpx;
+      background-color: #e4e7ed;
+      position: absolute;
+      left: -30rpx;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+  .head-subtitle {
+    font-size: 26rpx;
+    font-weight: 400;
+    color: #afb6c0;
+    text-align: left;
+    display: flex;
+  }
+}
+
+// .code-btn[disabled] {
+// 	background-color: #fff;
+// }
+.code-btn-start {
+  width: 160rpx;
+  height: 56rpx;
+  line-height: normal;
+  border: 2rpx solid var(--ui-BG-Main);
+  border-radius: 28rpx;
+  font-size: 26rpx;
+  font-weight: 400;
+  color: var(--ui-BG-Main);
+  opacity: 1;
+}
+
+.forgot-btn {
+  width: 160rpx;
+  line-height: 56rpx;
+  font-size: 30rpx;
+  font-weight: 500;
+  color: #999;
+}
+
+.login-btn-start {
+  width: 158rpx;
+  height: 56rpx;
+  line-height: normal;
+  background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+  border-radius: 28rpx;
+  font-size: 26rpx;
+  font-weight: 500;
+  color: #fff;
+}
+
+.type-btn {
+  padding: 20rpx;
+  margin: 40rpx auto;
+  width: 200rpx;
+  font-size: 30rpx;
+  font-weight: 500;
+  color: #999999;
+}
+
+.auto-login-box {
+  width: 100%;
+  .auto-login-btn {
+    width: 68rpx;
+    height: 68rpx;
+    border-radius: 50%;
+    margin: 0 30rpx;
+  }
+  .auto-login-img {
+    width: 68rpx;
+    height: 68rpx;
+    border-radius: 50%;
+  }
+}
+
+.agreement-box {
+  margin: 80rpx auto 0;
+  .protocol-check {
+    transform: scale(0.7);
+  }
+  .agreement-text {
+    font-size: 26rpx;
+    font-weight: 500;
+    color: #999999;
+    .tcp-text {
+      color: var(--ui-BG-Main);
+    }
+  }
+}
+
+// 修改密码
+.editPwd-btn-box {
+  .save-btn {
+    width: 690rpx;
+    line-height: 70rpx;
+    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    border-radius: 35rpx;
+    font-size: 28rpx;
+    font-weight: 500;
+    color: #ffffff;
+  }
+  .forgot-btn {
+    width: 690rpx;
+    line-height: 70rpx;
+    font-size: 28rpx;
+    font-weight: 500;
+    color: #999999;
+  }
+}
diff --git a/sheep/components/s-auth-modal/s-auth-modal.vue b/sheep/components/s-auth-modal/s-auth-modal.vue
new file mode 100644
index 0000000..cf6a6ff
--- /dev/null
+++ b/sheep/components/s-auth-modal/s-auth-modal.vue
@@ -0,0 +1,239 @@
+<template>
+  <!-- 规格弹窗 -->
+  <su-popup :show="authType !== ''" round="10" :showClose="true" @close="closeAuthModal">
+    <view class="login-wrap">
+      <!-- 1. 账号密码登录 accountLogin -->
+      <account-login
+        v-if="authType === 'accountLogin'"
+        :agreeStatus="state.protocol"
+        @onConfirm="onConfirm"
+      />
+
+      <!-- 2. 短信登录  smsLogin -->
+      <sms-login v-if="authType === 'smsLogin'" :agreeStatus="state.protocol" @onConfirm="onConfirm" />
+
+      <!-- 3. 忘记密码 resetPassword-->
+      <reset-password v-if="authType === 'resetPassword'" />
+
+      <!-- 4. 绑定手机号 changeMobile -->
+      <change-mobile v-if="authType === 'changeMobile'" />
+
+      <!-- 5. 修改密码 changePassword-->
+      <changePassword v-if="authType === 'changePassword'" />
+
+      <!-- 6. 微信小程序授权 -->
+      <mp-authorization v-if="authType === 'mpAuthorization'" />
+
+      <!-- 7. 第三方登录 -->
+      <view
+        v-if="['accountLogin', 'smsLogin'].includes(authType)"
+        class="auto-login-box ss-flex ss-flex-col ss-row-center ss-col-center"
+      >
+        <!-- 7.1 微信小程序的快捷登录 -->
+        <view v-if="sheep.$platform.name === 'WechatMiniProgram'" class="ss-flex register-box">
+          <view class="register-title">还没有账号?</view>
+          <button class="ss-reset-button login-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
+            快捷登录
+          </button>
+          <view class="circle" />
+        </view>
+
+        <!-- 7.2 微信的公众号、App、小程序的登录，基于 openid + code -->
+        <button
+          v-if="
+            ['WechatOfficialAccount', 'WechatMiniProgram', 'App'].includes(sheep.$platform.name) &&
+            sheep.$platform.isWechatInstalled
+          "
+          @tap="thirdLogin('wechat')"
+          class="ss-reset-button auto-login-btn"
+        >
+          <image
+            class="auto-login-img"
+            :src="sheep.$url.static('/static/img/shop/platform/wechat.png')"
+          />
+        </button>
+
+        <!-- 7.3 iOS 登录 TODO 芋艿：等后面搞 App 再弄 -->
+        <button
+          v-if="sheep.$platform.os === 'ios' && sheep.$platform.name === 'App'"
+          @tap="thirdLogin('apple')"
+          class="ss-reset-button auto-login-btn"
+        >
+          <image
+            class="auto-login-img"
+            :src="sheep.$url.static('/static/img/shop/platform/apple.png')"
+          />
+        </button>
+      </view>
+
+      <!-- 用户协议的勾选 -->
+      <view
+        v-if="['accountLogin', 'smsLogin'].includes(authType)"
+        class="agreement-box ss-flex ss-row-center"
+        :class="{ shake: currentProtocol }"
+      >
+        <label class="radio ss-flex ss-col-center" @tap="onChange">
+          <radio
+            :checked="state.protocol"
+            color="var(--ui-BG-Main)"
+            style="transform: scale(0.8)"
+            @tap.stop="onChange"
+          />
+          <view class="agreement-text ss-flex ss-col-center ss-m-l-8">
+            我已阅读并遵守
+            <view class="tcp-text" @tap.stop="onProtocol('用户协议')">
+              《用户协议》
+            </view>
+            <view class="agreement-text">与</view>
+            <view class="tcp-text" @tap.stop="onProtocol('隐私协议')">
+              《隐私协议》
+            </view>
+          </view>
+        </label>
+      </view>
+      <view class="safe-box"/>
+    </view>
+  </su-popup>
+</template>
+
+<script setup>
+  import { computed, reactive, ref } from 'vue';
+  import sheep from '@/sheep';
+  import accountLogin from './components/account-login.vue';
+  import smsLogin from './components/sms-login.vue';
+  import resetPassword from './components/reset-password.vue';
+  import changeMobile from './components/change-mobile.vue';
+  import changePassword from './components/change-password.vue';
+  import mpAuthorization from './components/mp-authorization.vue';
+  import { closeAuthModal, showAuthModal } from '@/sheep/hooks/useModal';
+
+  const appInfo = computed(() => sheep.$store('app').info);
+
+  const modalStore = sheep.$store('modal');
+  // 授权弹窗类型
+  const authType = computed(() => modalStore.auth);
+
+  const state = reactive({
+    protocol: false,
+  });
+
+  const currentProtocol = ref(false);
+
+  // 勾选协议
+  function onChange() {
+    state.protocol = !state.protocol;
+  }
+
+  // 查看协议
+  function onProtocol(title) {
+    closeAuthModal();
+    sheep.$router.go('/pages/public/richtext', {
+      title,
+    });
+  }
+
+  // 点击登录 / 注册事件
+  function onConfirm(e) {
+    currentProtocol.value = e;
+    setTimeout(() => {
+      currentProtocol.value = false;
+    }, 1000);
+  }
+
+  // 第三方授权登陆（微信小程序、Apple）
+  const thirdLogin = async (provider) => {
+    if (!state.protocol) {
+      currentProtocol.value = true;
+      setTimeout(() => {
+        currentProtocol.value = false;
+      }, 1000);
+      sheep.$helper.toast('请勾选同意');
+      return;
+    }
+    const loginRes = await sheep.$platform.useProvider(provider).login();
+    if (loginRes) {
+      closeAuthModal();
+      // 触发小程序授权信息弹框
+      // #ifdef MP-WEIXIN
+      showAuthModal('mpAuthorization');
+      // #endif
+    }
+  };
+
+  // 微信小程序的“手机号快速验证”：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
+  const getPhoneNumber = async (e) => {
+    if (e.detail.errMsg !== 'getPhoneNumber:ok') {
+      sheep.$helper.toast('快捷登录失败');
+      return;
+    }
+    let result = await sheep.$platform.useProvider().mobileLogin(e.detail);
+    if (result) {
+      closeAuthModal();
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import './index.scss';
+
+  .shake {
+    animation: shake 0.05s linear 4 alternate;
+  }
+
+  @keyframes shake {
+    from {
+      transform: translateX(-10rpx);
+    }
+    to {
+      transform: translateX(10rpx);
+    }
+  }
+
+  .register-box {
+    position: relative;
+    justify-content: center;
+    .register-btn {
+      color: #999999;
+      font-size: 30rpx;
+      font-weight: 500;
+    }
+    .register-title {
+      color: #999999;
+      font-size: 30rpx;
+      font-weight: 400;
+      margin-right: 24rpx;
+    }
+    .or-title {
+      margin: 0 16rpx;
+      color: #999999;
+      font-size: 30rpx;
+      font-weight: 400;
+    }
+    .login-btn {
+      color: var(--ui-BG-Main);
+      font-size: 30rpx;
+      font-weight: 500;
+    }
+    .circle {
+      position: absolute;
+      right: 0rpx;
+      top: 18rpx;
+      width: 8rpx;
+      height: 8rpx;
+      border-radius: 8rpx;
+      background: var(--ui-BG-Main);
+    }
+  }
+  .safe-box {
+    height: calc(constant(safe-area-inset-bottom) / 5 * 3);
+    height: calc(env(safe-area-inset-bottom) / 5 * 3);
+  }
+
+  .tcp-text {
+    color: var(--ui-BG-Main);
+  }
+
+  .agreement-text {
+    color: $dark-9;
+  }
+</style>
diff --git a/sheep/components/s-block-item/s-block-item.vue b/sheep/components/s-block-item/s-block-item.vue
new file mode 100644
index 0000000..9cd6007
--- /dev/null
+++ b/sheep/components/s-block-item/s-block-item.vue
@@ -0,0 +1,81 @@
+<template>
+  <view>
+    <!-- 基础组件：搜索框 -->
+    <s-search-block v-if="type === 'SearchBar'" :data="data" :styles="styles" :navbar="false" />
+    <!-- 基础组件：公告栏 -->
+    <s-notice-block v-if="type === 'NoticeBar'" :data="data" />
+    <!-- 基础组件：菜单导航 -->
+    <s-menu-button v-if="type === 'MenuSwiper'" :data="data" :styles="styles" />
+    <!-- 基础组件：列表导航 -->
+    <s-menu-list v-if="type === 'MenuList'" :data="data" />
+    <!-- 基础组件：宫格导航 -->
+    <s-menu-grid v-if="type === 'MenuGrid'" :data="data" />
+    <!-- 基础组件：弹窗广告 -->
+    <s-popup-image v-if="type === 'Popover'" :data="data" />
+    <!-- 基础组件：悬浮按钮 -->
+    <s-float-menu v-if="type === 'FloatingActionButton'" :data="data" />
+
+    <!-- 图文组件：图片展示 -->
+    <s-image-block v-if="type === 'ImageBar'" :data="data" :styles="styles" />
+    <!-- 图文组件：图片轮播 -->
+    <s-image-banner v-if="type === 'Carousel'" :data="data" :styles="styles" />
+    <!-- 基础组件：标题栏 -->
+    <s-title-block v-if="type === 'TitleBar'" :data="data" :styles="styles" />
+    <!-- 图文组件：广告魔方 -->
+    <s-image-cube v-if="type === 'MagicCube'" :data="data" :styles="styles" />
+    <!-- 图文组件：视频播放 -->
+    <s-video-block v-if="type === 'VideoPlayer'" :data="data" :styles="styles" />
+    <!-- 基础组件：分割线 -->
+    <s-line-block v-if="type === 'Divider'" :data="data" />
+    <!-- 图文组件：热区 -->
+    <s-hotzone-block v-if="type === 'HotZone'" :data="data" :styles="styles" />
+
+    <!-- 商品组件：商品卡片 -->
+    <s-goods-card v-if="type === 'ProductCard'" :data="data" :styles="styles" />
+    <!-- 商品组件：商品栏 -->
+    <s-goods-shelves v-if="type === 'ProductList'" :data="data" :styles="styles" />
+
+    <!-- 营销组件：拼团 -->
+    <s-groupon-block v-if="type === 'PromotionCombination'" :data="data" :styles="styles" />
+    <!-- 营销组件：秒杀 -->
+    <s-seckill-block v-if="type === 'PromotionSeckill'" :data="data" :styles="styles" />
+    <!-- 营销组件：小程序直播（暂时没有这个功能） -->
+    <s-live-block v-if="type === 'MpLive'" :data="data" :styles="styles" />
+    <!-- 营销组件：优惠券 -->
+    <s-coupon-block v-if="type === 'CouponCard'" :data="data" :styles="styles" />
+    <!-- 营销组件：文章 -->
+    <s-richtext-block v-if="type === 'PromotionArticle'" :data="data" :styles="styles" />
+
+    <!-- 用户组件：用户卡片 -->
+    <s-user-card v-if="type === 'UserCard'" />
+    <!-- 用户组件：用户订单 -->
+    <s-order-card v-if="type === 'UserOrder'" :data="data" />
+    <!-- 用户组件：用户资产 -->
+    <s-wallet-card v-if="type === 'UserWallet'" />
+    <!-- 用户组件：用户卡券 -->
+    <s-coupon-card v-if="type === 'UserCoupon'" />
+  </view>
+</template>
+
+<script setup>
+  /**
+   * 装修组件 - 组件集
+   */
+  const props = defineProps({
+    type: {
+      type: String,
+      default: '',
+    },
+    data: {
+      type: Object,
+      default() {},
+    },
+    styles: {
+      type: Object,
+      default() {},
+    },
+  });
+  function onSearch() {}
+</script>
+
+<style></style>
diff --git a/sheep/components/s-block/s-block.vue b/sheep/components/s-block/s-block.vue
new file mode 100644
index 0000000..152b8a6
--- /dev/null
+++ b/sheep/components/s-block/s-block.vue
@@ -0,0 +1,54 @@
+<!-- 装修组件容器 -->
+<template>
+  <view :style="[elStyles, elBackground]"><slot /></view>
+</template>
+
+<script setup>
+  /**
+   * 容器组件 - 装修组件的样式容器
+   */
+  import { computed, provide, unref } from 'vue';
+  import sheep from '@/sheep';
+
+  const props = defineProps({
+    styles: {
+      type: Object,
+      default() {},
+    },
+  });
+
+  // 组件样式
+
+  const elBackground = computed(() => {
+    if (props.styles) {
+      if (props.styles.bgType === 'color')
+        return { background: props.styles.bgColor };
+      if (props.styles.bgType === 'img')
+        return {
+          background: `url(${sheep.$url.cdn(
+            props.styles.bgImage,
+          )}) no-repeat top center / 100% auto`,
+        };
+    }
+  });
+
+  const elStyles = computed(() => {
+    if (props.styles) {
+      return {
+        marginTop: `${props.styles.marginTop || 0}px`,
+        marginBottom: `${props.styles.marginBottom || 0}px`,
+        marginLeft: `${props.styles.marginLeft || 0}px`,
+        marginRight: `${props.styles.marginRight || 0}px`,
+        paddingTop: `${props.styles.paddingTop || 0}px`,
+        paddingRight: `${props.styles.paddingRight || 0}px`,
+        paddingBottom: `${props.styles.paddingBottom || 0}px`,
+        paddingLeft: `${props.styles.paddingLeft || 0}px`,
+        borderTopLeftRadius: `${props.styles.borderTopLeftRadius || 0}px`,
+        borderTopRightRadius: `${props.styles.borderTopRightRadius || 0}px`,
+        borderBottomRightRadius: `${props.styles.borderBottomRightRadius || 0}px`,
+        borderBottomLeftRadius: `${props.styles.borderBottomLeftRadius || 0}px`,
+        overflow: 'hidden',
+      };
+    }
+  });
+</script>
diff --git a/sheep/components/s-count-down/s-count-down.vue b/sheep/components/s-count-down/s-count-down.vue
new file mode 100644
index 0000000..98b3a1f
--- /dev/null
+++ b/sheep/components/s-count-down/s-count-down.vue
@@ -0,0 +1,173 @@
+<template>
+	<view class="time" :style="justifyLeft">
+		<text class="" v-if="tipText">{{ tipText }}</text>
+		<text class="styleAll p6" v-if="isDay === true"
+			:style="{background:bgColor.bgColor,color:bgColor.Color}">{{ day }}{{bgColor.isDay?'天':''}}</text>
+		<text class="timeTxt" v-if="dayText"
+			:style="{width:bgColor.timeTxtwidth,color:bgColor.bgColor}">{{ dayText }}</text>
+		<text class="styleAll" :class='isCol?"timeCol":""'
+			:style="{background:bgColor.bgColor,color:bgColor.Color,width:bgColor.width}">{{ hour }}</text>
+		<text class="timeTxt" v-if="hourText" :class='isCol?"whit":""'
+			:style="{width:bgColor.timeTxtwidth,color:bgColor.bgColor}">{{ hourText }}</text>
+		<text class="styleAll" :class='isCol?"timeCol":""'
+			:style="{background:bgColor.bgColor,color:bgColor.Color,width:bgColor.width}">{{ minute }}</text>
+		<text class="timeTxt" v-if="minuteText" :class='isCol?"whit":""'
+			:style="{width:bgColor.timeTxtwidth,color:bgColor.bgColor}">{{ minuteText }}</text>
+		<text class="styleAll" :class='isCol?"timeCol":""'
+			:style="{background:bgColor.bgColor,color:bgColor.Color,width:bgColor.width}">{{ second }}</text>
+		<text class="timeTxt" v-if="secondText">{{ secondText }}</text>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "countDown",
+		props: {
+			justifyLeft: {
+				type: String,
+				default: ""
+			},
+			//距离开始提示文字
+			tipText: {
+				type: String,
+				default: "倒计时"
+			},
+			dayText: {
+				type: String,
+				default: "天"
+			},
+			hourText: {
+				type: String,
+				default: "时"
+			},
+			minuteText: {
+				type: String,
+				default: "分"
+			},
+			secondText: {
+				type: String,
+				default: "秒"
+			},
+			datatime: {
+				type: Number,
+				default: 0
+			},
+			isDay: {
+				type: Boolean,
+				default: true
+			},
+			isCol: {
+				type: Boolean,
+				default: false
+			},
+			bgColor: {
+				type: Object,
+				default: null
+			}
+		},
+		data: function() {
+			return {
+				day: "00",
+				hour: "00",
+				minute: "00",
+				second: "00"
+			};
+		},
+		created: function() {
+			this.show_time();
+		},
+		mounted: function() {},
+		methods: {
+			show_time: function() {
+				let that = this;
+
+				function runTime() {
+					//时间函数
+					let intDiff = that.datatime - Date.parse(new Date()) / 1000; //获取数据中的时间戳的时间差；
+					let day = 0,
+						hour = 0,
+						minute = 0,
+						second = 0;
+					if (intDiff > 0) {
+						//转换时间
+						if (that.isDay === true) {
+							day = Math.floor(intDiff / (60 * 60 * 24));
+						} else {
+							day = 0;
+						}
+						hour = Math.floor(intDiff / (60 * 60)) - day * 24;
+						minute = Math.floor(intDiff / 60) - day * 24 * 60 - hour * 60;
+						second =
+							Math.floor(intDiff) -
+							day * 24 * 60 * 60 -
+							hour * 60 * 60 -
+							minute * 60;
+						if (hour <= 9) hour = "0" + hour;
+						if (minute <= 9) minute = "0" + minute;
+						if (second <= 9) second = "0" + second;
+						that.day = day;
+						that.hour = hour;
+						that.minute = minute;
+						that.second = second;
+					} else {
+						that.day = "00";
+						that.hour = "00";
+						that.minute = "00";
+						that.second = "00";
+					}
+				}
+				runTime();
+				setInterval(runTime, 1000);
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	.p6 {
+		padding: 0 8rpx;
+	}
+
+	.styleAll {
+		/* color: #fff; */
+		font-size: 24rpx;
+		height: 36rpx;
+		line-height: 36rpx;
+		border-radius: 6rpx;
+		text-align: center;
+		/* padding: 0 6rpx; */
+	}
+
+	.timeTxt {
+		text-align: center;
+		/* width: 16rpx; */
+		height: 36rpx;
+		line-height: 36rpx;
+		display: inline-block;
+	}
+
+	.whit {
+		color: #fff !important;
+	}
+
+	.time {
+		display: flex;
+		justify-content: center;
+	}
+
+	.red {
+		color: #fc4141;
+		margin: 0 4rpx;
+	}
+
+	.timeCol {
+		/* width: 40rpx;
+		height: 40rpx;
+		line-height: 40rpx;
+		text-align:center;
+		border-radius: 6px;
+		background: #fff;
+		font-size: 24rpx; */
+		color: #E93323;
+	}
+</style>
\ No newline at end of file
diff --git a/sheep/components/s-coupon-block/s-coupon-block.vue b/sheep/components/s-coupon-block/s-coupon-block.vue
new file mode 100644
index 0000000..c0f98e9
--- /dev/null
+++ b/sheep/components/s-coupon-block/s-coupon-block.vue
@@ -0,0 +1,152 @@
+<!-- 装修营销组件：优惠券  -->
+<template>
+  <scroll-view class="scroll-box" scroll-x scroll-anchoring>
+    <view class="coupon-box ss-flex">
+      <view
+        class="coupon-item"
+        :style="[couponBg, { marginLeft: `${data.space}px` }]"
+        v-for="(item, index) in couponList"
+        :key="index"
+      >
+        <su-coupon
+          :size="SIZE_LIST[columns - 1]"
+          :textColor="data.textColor"
+          background=""
+          :couponId="item.id"
+          :title="item.name"
+          :type="formatCouponDiscountType(item)"
+          :value="formatCouponDiscountValue(item)"
+          :sellBy="formatValidityType(item)"
+        >
+          <template v-slot:btn>
+            <!-- 两列时，领取按钮坚排 -->
+            <button
+              v-if="columns === 2"
+              @click.stop="onGetCoupon(item.id)"
+              class="ss-reset-button card-btn vertical"
+              :style="[btnStyles]"
+            >
+              <view class="btn-text">立即领取</view>
+            </button>
+            <button
+              v-else
+              class="ss-reset-button card-btn"
+              :style="[btnStyles]"
+              @click.stop="onGetCoupon(item.id)"
+            >
+              立即领取
+            </button>
+          </template>
+        </su-coupon>
+      </view>
+    </view>
+  </scroll-view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import CouponApi from '@/api/promotion/coupon';
+  import { ref, onMounted } from 'vue';
+  import { CouponTemplateValidityTypeEnum, PromotionDiscountTypeEnum } from "@/sheep/util/const";
+  import { floatToFixed2, formatDate } from "@/sheep/util";
+
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    styles: {
+      type: Object,
+      default: () => ({}),
+    },
+  });
+  const { columns, button } = props.data;
+  const SIZE_LIST = ['lg', 'md', 'xs']
+  const couponBg = {
+    background: `url(${sheep.$url.cdn(props.data.bgImg)}) no-repeat top center / 100% 100%`,
+  };
+  const btnStyles = {
+    background: button.bgColor,
+    color: button.color,
+  };
+
+  // 格式化【折扣类型】
+  const formatCouponDiscountType = (coupon) => {
+    if(coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
+      return 'reduce'
+    }
+    if(coupon.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
+      return 'percent'
+    }
+    return `未知【${coupon.discountType}】`
+  }
+
+  // 格式化【折扣】
+  const formatCouponDiscountValue = (coupon) => {
+    if(coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
+      return floatToFixed2(coupon.discountPrice)
+    }
+    if(coupon.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
+      return coupon.discountPercent
+    }
+    return `未知【${coupon.discountType}】`
+  }
+
+  // 格式化【有效期限】
+  const formatValidityType = (row) => {
+    if (row.validityType === CouponTemplateValidityTypeEnum.DATE.type) {
+      return `${formatDate(row.validStartTime)} 至 ${formatDate(row.validEndTime)}`
+    }
+    if (row.validityType === CouponTemplateValidityTypeEnum.TERM.type) {
+      return `领取后第 ${row.fixedStartTerm} - ${row.fixedEndTerm} 天内可用`
+    }
+    return '未知【' + row.validityType + '】'
+  }
+
+  const couponList = ref([]);
+  // 立即领取优惠券
+  async function onGetCoupon(id) {
+    const { error, msg } = await CouponApi.takeCoupon(id);
+    if (error === 0) {
+      uni.showToast({
+        title: msg,
+        icon: 'none',
+      });
+      return
+    }
+    await getCouponTemplateList()
+  }
+  const getCouponTemplateList = async () => {
+    const { data } = await CouponApi.getCouponTemplateListByIds(props.data.couponIds.join(','));
+    couponList.value = data;
+  }
+  onMounted(() => {
+    getCouponTemplateList()
+  });
+</script>
+
+<style lang="scss" scoped>
+  .card-btn {
+    width: 140rpx;
+    height: 50rpx;
+    border-radius: 25rpx;
+    font-size: 24rpx;
+    line-height: 50rpx;
+    &.vertical {
+      width: 50rpx;
+      height: 140rpx;
+      margin: auto 20rpx auto 0;
+
+      .btn-text {
+        font-size: 24rpx;
+        text-align: center;
+        writing-mode: vertical-lr;
+      }
+    }
+  }
+  .coupon-item {
+    &:nth-of-type(1) {
+      margin-left: 0 !important;
+    }
+  }
+</style>
diff --git a/sheep/components/s-coupon-card/s-coupon-card.vue b/sheep/components/s-coupon-card/s-coupon-card.vue
new file mode 100644
index 0000000..bd5705b
--- /dev/null
+++ b/sheep/components/s-coupon-card/s-coupon-card.vue
@@ -0,0 +1,79 @@
+<!-- 装修用户组件：用户卡券 -->
+<template>
+	<view class="ss-coupon-menu-wrap ss-flex ss-col-center">
+		<view class="menu-item ss-flex-col ss-row-center ss-col-center" v-for="item in props.list" :key="item.title"
+			@tap="sheep.$router.go(item.path, { type: item.type })"
+			:class="item.type === 'all' ? 'menu-wallet' : 'ss-flex-1'">
+			<image class="item-icon" :src="sheep.$url.static(item.icon)" mode="aspectFit"></image>
+			<view class="menu-title ss-m-t-28">{{ item.title }}</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	/**
+	 * 装修组件 - 优惠券菜单
+	 */
+	import sheep from '@/sheep';
+
+	// 接收参数
+	const props = defineProps({
+		list: {
+			type: Array,
+			default () {
+				return [{
+						title: '已领取',
+						value: '0',
+						icon: '/static/img/shop/order/nouse_coupon.png',
+						path: '/pages/coupon/list',
+						type: 'geted',
+					},
+					{
+						title: '已使用',
+						value: '0',
+						icon: '/static/img/shop/order/useend_coupon.png',
+						path: '/pages/coupon/list',
+						type: 'used',
+					},
+					{
+						title: '已失效',
+						value: '0',
+						icon: '/static/img/shop/order/out_coupon.png',
+						path: '/pages/coupon/list',
+						type: 'expired',
+					},
+					{
+					  title: '领券中心',
+					  value: '0',
+					  icon: '/static/img/shop/order/all_coupon.png',
+					  path: '/pages/coupon/list',
+					  type: 'all',
+					},
+				];
+			},
+		},
+	});
+</script>
+
+<style lang="scss" scoped>
+	.ss-coupon-menu-wrap {
+		.menu-item {
+			height: 160rpx;
+
+			.menu-title {
+				font-size: 24rpx;
+				line-height: 24rpx;
+				color: #333333;
+			}
+
+			.item-icon {
+				width: 44rpx;
+				height: 44rpx;
+			}
+		}
+
+		.menu-wallet {
+			width: 144rpx;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/sheep/components/s-coupon-get/s-coupon-get.vue b/sheep/components/s-coupon-get/s-coupon-get.vue
new file mode 100644
index 0000000..6df6b55
--- /dev/null
+++ b/sheep/components/s-coupon-get/s-coupon-get.vue
@@ -0,0 +1,109 @@
+<!-- 商品详情 - 优惠劵领取 -->
+<template>
+  <su-popup
+    :show="show"
+    type="bottom"
+    round="20"
+    @close="emits('close')"
+    showClose
+    backgroundColor="#f2f2f2"
+  >
+    <view class="model-box">
+      <view class="title ss-m-t-16 ss-m-l-20 ss-flex">优惠券</view>
+      <scroll-view
+        class="model-content"
+        scroll-y
+        :scroll-with-animation="false"
+        :enable-back-to-top="true"
+      >
+        <view class="subtitle ss-m-l-20">可使用优惠券</view>
+        <view v-for="item in state.couponInfo" :key="item.id">
+          <s-coupon-list :data="item">
+            <template #default>
+              <button
+                class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center"
+                :class="!item.canTake ? 'boder-btn' : ''"
+                @click.stop="getBuy(item.id)"
+                :disabled="!item.canTake"
+              >
+                {{ item.canTake ? '立即领取' : '已领取' }}
+              </button>
+            </template>
+          </s-coupon-list>
+        </view>
+      </scroll-view>
+    </view>
+  </su-popup>
+</template>
+<script setup>
+  import { computed, reactive } from 'vue';
+
+  const props = defineProps({
+    modelValue: {
+      type: Object,
+      default() {},
+    },
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  const emits = defineEmits(['get', 'close']);
+
+  const state = reactive({
+    couponInfo: computed(() => props.modelValue)
+  });
+
+  // 领取优惠劵
+  const getBuy = (id) => {
+    emits('get', id);
+  };
+</script>
+<style lang="scss" scoped>
+  .model-box {
+    height: 60vh;
+    .title {
+      font-size: 36rpx;
+      height: 80rpx;
+      font-weight: bold;
+      color: #333333;
+    }
+    .subtitle {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #333333;
+    }
+  }
+  .model-content {
+    height: 54vh;
+  }
+  .modal-footer {
+    width: 100%;
+    height: 120rpx;
+    background: #fff;
+  }
+  .confirm-btn {
+    width: 710rpx;
+    margin-left: 20rpx;
+    height: 80rpx;
+    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    border-radius: 40rpx;
+    color: #fff;
+  }
+  // 优惠券按钮
+  .card-btn {
+    // width: 144rpx;
+    padding: 0 16rpx;
+    height: 50rpx;
+    border-radius: 40rpx;
+    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    color: #ffffff;
+    font-size: 24rpx;
+    font-weight: 400;
+  }
+  .boder-btn {
+    background: linear-gradient(90deg, var(--ui-BG-Main-opacity-4), var(--ui-BG-Main-light));
+    color: #fff !important;
+  }
+</style>
diff --git a/sheep/components/s-coupon-list/s-coupon-list.vue b/sheep/components/s-coupon-list/s-coupon-list.vue
new file mode 100644
index 0000000..411a4c0
--- /dev/null
+++ b/sheep/components/s-coupon-list/s-coupon-list.vue
@@ -0,0 +1,205 @@
+<template>
+  <view class="ss-m-20" :style="{ opacity: disabled ? '0.5' : '1' }">
+    <view class="content">
+      <view
+        class="tag ss-flex ss-row-center"
+        :class="isDisable ? 'disabled-bg-color' : 'info-bg-color'"
+      >
+        {{ data.discountType === 1 ? '满减券' : '折扣券' }}
+      </view>
+      <view class="title ss-m-x-30 ss-p-t-18">
+        <view class="ss-flex ss-row-between">
+          <view
+            class="value-text ss-flex-1 ss-m-r-10"
+            :class="isDisable ? 'disabled-color' : 'info-color'"
+          >
+            {{ data.name }}
+          </view>
+          <view>
+            <view
+              class="ss-flex ss-col-bottom"
+              :class="isDisable ? 'disabled-color' : 'price-text'"
+            >
+              <view class="value-reduce ss-m-b-10" v-if="data.discountType === 1">￥</view>
+              <view class="value-price">
+                {{
+                  data.discountType === 1
+                    ? fen2yuan(data.discountPrice)
+                    : data.discountPercent / 10.0
+                }}
+              </view>
+              <view class="value-discount ss-m-b-10 ss-m-l-4" v-if="data.discountType === 2"
+                >折</view
+              >
+            </view>
+          </view>
+        </view>
+        <view class="ss-flex ss-row-between ss-m-t-16">
+          <view
+            class="sellby-text"
+            :class=" isDisable ? 'disabled-color' : 'subtitle-color'"
+            v-if="data.validityType === 2"
+          >
+            有效期：领取后 {{ data.fixedEndTerm }} 天内可用
+          </view>
+          <view
+            class="sellby-text"
+            :class=" isDisable ? 'disabled-color' : 'subtitle-color'"
+            v-else
+          >
+            有效期: {{ sheep.$helper.timeFormat(data.validStartTime, 'yyyy-mm-dd') }} 至
+            {{ sheep.$helper.timeFormat(data.validEndTime, 'yyyy-mm-dd') }}
+          </view>
+          <view
+            class="value-enough"
+            :class="isDisable ? 'disabled-color' : 'subtitle-color'"
+          >
+            满 {{ fen2yuan(data.usePrice) }} 可用
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- TODO 芋艿：可优化，增加优惠劵的描述 -->
+    <view class="desc ss-flex ss-row-between">
+      <view>
+        <view class="desc-title">{{ data.description }}</view>
+        <view>
+          <slot name="reason" />
+        </view>
+      </view>
+      <view>
+        <slot />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { computed, reactive } from 'vue';
+  import { fen2yuan } from '../../hooks/useGoods';
+  import sheep from '../../index';
+
+  const state = reactive({});
+
+  const isDisable = computed(() => {
+    if (props.type === 'coupon') {
+      return false;
+    }
+    return props.data.status !== 1;
+  });
+
+  // 接受参数
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: {},
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      type: String,
+      default: 'coupon', // coupon 优惠劵模版；user 用户优惠劵
+    },
+  });
+</script>
+
+<style lang="scss" scoped>
+  .info-bg-color {
+    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+  }
+
+  .disabled-bg-color {
+    background: #999;
+  }
+
+  .info-color {
+    color: #333;
+  }
+
+  .subtitle-color {
+    color: #666;
+  }
+
+  .disabled-color {
+    color: #999;
+  }
+
+  .content {
+    width: 100%;
+    background: #fff;
+    border-radius: 20rpx 20rpx 0 0;
+    -webkit-mask: radial-gradient(circle at 12rpx 100%, #0000 12rpx, red 0) -12rpx;
+    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04);
+
+    .tag {
+      width: 100rpx;
+
+      color: #fff;
+      height: 40rpx;
+      font-size: 24rpx;
+      border-radius: 20rpx 0 20rpx 0;
+    }
+
+    .title {
+      padding-bottom: 22rpx;
+      border-bottom: 2rpx dashed #d3d3d3;
+
+      .value-text {
+        font-size: 32rpx;
+        font-weight: 600;
+      }
+
+      .sellby-text {
+        font-size: 24rpx;
+        font-weight: 400;
+      }
+
+      .value-price {
+        font-size: 64rpx;
+        font-weight: 500;
+        line-height: normal;
+        font-family: OPPOSANS;
+      }
+
+      .value-reduce {
+        line-height: normal;
+        font-size: 32rpx;
+      }
+
+      .value-discount {
+        line-height: normal;
+        font-size: 28rpx;
+      }
+
+      .value-enough {
+        font-size: 24rpx;
+        font-weight: 400;
+        font-family: OPPOSANS;
+      }
+    }
+  }
+
+  .desc {
+    width: 100%;
+    background: #fff;
+    -webkit-mask: radial-gradient(circle at 12rpx 0%, #0000 12rpx, red 0) -12rpx;
+    box-shadow: rgba(#000, 0.1);
+    box-sizing: border-box;
+    padding: 24rpx 30rpx;
+    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04);
+    border-radius: 0 0 20rpx 20rpx;
+
+    .desc-title {
+      font-size: 24rpx;
+      color: #999;
+      font-weight: 400;
+    }
+  }
+
+  .price-text {
+    color: #ff0000;
+  }
+</style>
\ No newline at end of file
diff --git a/sheep/components/s-coupon-select/s-coupon-select.vue b/sheep/components/s-coupon-select/s-coupon-select.vue
new file mode 100644
index 0000000..e1a9db4
--- /dev/null
+++ b/sheep/components/s-coupon-select/s-coupon-select.vue
@@ -0,0 +1,138 @@
+<!-- 订单确认的优惠劵选择弹窗 -->
+<template>
+  <su-popup
+    :show="show"
+    type="bottom"
+    round="20"
+    @close="emits('close')"
+    showClose
+    backgroundColor="#f2f2f2"
+  >
+    <view class="model-box">
+      <view class="title ss-m-t-16 ss-m-l-20 ss-flex">优惠券</view>
+      <scroll-view
+        class="model-content"
+        scroll-y
+        :scroll-with-animation="false"
+        :enable-back-to-top="true"
+      >
+        <view class="subtitle ss-m-l-20">可使用优惠券</view>
+        <view v-for="(item, index) in state.couponInfo" :key="index">
+          <s-coupon-list :data="item" type="user" :disabled="false">
+            <template #default>
+              <label class="ss-flex ss-col-center" @tap="radioChange(item.id)">
+                <radio
+                  color="var(--ui-BG-Main)"
+                  style="transform: scale(0.8)"
+                  :checked="state.couponId === item.id"
+                  @tap.stop="radioChange(item.id)"
+                />
+              </label>
+            </template>
+          </s-coupon-list>
+        </view>
+        <!-- TODO 芋艿：未来接口需要支持下
+        <view class="subtitle ss-m-t-40 ss-m-l-20">不可使用优惠券</view>
+        <view v-for="item in state.couponInfo.cannot_use" :key="item.id">
+          <s-coupon-list :data="item" type="user" :disabled="true">
+            <template v-slot:reason>
+              <view class="ss-flex ss-m-t-24">
+                <view class="reason-title"> 不可用原因：</view>
+                <view class="reason-desc">{{ item.cannot_use_msg }}</view>
+              </view>
+            </template>
+          </s-coupon-list>
+        </view>
+      -->
+      </scroll-view>
+    </view>
+    <view class="modal-footer ss-flex">
+      <button class="confirm-btn ss-reset-button" @tap="onConfirm">确认</button>
+    </view>
+  </su-popup>
+</template>
+<script setup>
+  import { computed, reactive } from 'vue';
+
+  const props = defineProps({
+    modelValue: { // 优惠劵列表
+      type: Object,
+      default() {},
+    },
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  const emits = defineEmits(['confirm', 'close']);
+
+  const state = reactive({
+    couponInfo: computed(() => props.modelValue), // 优惠劵列表
+    couponId: 0, // 选中的优惠劵编号
+  });
+
+  // 选中优惠劵
+  function radioChange(couponId) {
+    if (state.couponId === couponId) {
+      state.couponId = 0;
+    } else {
+      state.couponId = couponId;
+    }
+  }
+
+  // 确认优惠劵
+  const onConfirm = () => {
+    emits('confirm', state.couponId);
+  }
+</script>
+<style lang="scss" scoped>
+  :deep() {
+    .uni-checkbox-input {
+      background-color: var(--ui-BG-Main);
+    }
+  }
+
+  .model-box {
+    height: 60vh;
+  }
+  .title {
+    font-size: 36rpx;
+    height: 80rpx;
+    font-weight: bold;
+    color: #333333;
+  }
+  .subtitle {
+    font-size: 26rpx;
+    font-weight: 500;
+    color: #333333;
+  }
+  .model-content {
+    height: 54vh;
+  }
+  .modal-footer {
+    width: 100%;
+    height: 120rpx;
+    background: #fff;
+  }
+  .confirm-btn {
+    width: 710rpx;
+    margin-left: 20rpx;
+    height: 80rpx;
+    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    border-radius: 40rpx;
+    color: #fff;
+  }
+  .reason-title {
+    font-weight: 600;
+    font-size: 20rpx;
+    line-height: 26rpx;
+    color: #ff0003;
+  }
+  .reason-desc {
+    font-weight: 600;
+    font-size: 20rpx;
+    line-height: 26rpx;
+    color: #434343;
+  }
+</style>
diff --git a/sheep/components/s-custom-navbar/components/navbar-item.vue b/sheep/components/s-custom-navbar/components/navbar-item.vue
new file mode 100644
index 0000000..fce7ce7
--- /dev/null
+++ b/sheep/components/s-custom-navbar/components/navbar-item.vue
@@ -0,0 +1,66 @@
+<!-- 顶部导航栏 - 单元格 -->
+<template>
+  <view class="ss-flex ss-col-center">
+    <!-- 类型一： 文字 -->
+    <view
+      v-if="data.type === 'text'"
+      class="nav-title inline"
+      :style="[{ color: data.textColor, width: width }]"
+    >
+      {{ data.text }}
+    </view>
+    <!-- 类型二： 图片 -->
+    <view
+      v-if="data.type === 'image'"
+      :style="[{ width: width }]"
+      class="menu-icon-wrap ss-flex ss-row-center ss-col-center"
+      @tap="sheep.$router.go(data.url)"
+    >
+      <image class="nav-image" :src="sheep.$url.cdn(data.imgUrl)" mode="aspectFit"></image>
+    </view>
+    <!-- 类型三： 搜索框 -->
+    <view class="ss-flex-1" v-if="data.type === 'search'" :style="[{ width: width }]">
+      <s-search-block
+        :placeholder="data.placeholder || '搜索关键字'"
+        :radius="data.borderRadius"
+        elBackground="#fff"
+        :height="height"
+        :width="width"
+        @click="sheep.$router.go('/pages/index/search')"
+      ></s-search-block>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { computed } from 'vue';
+
+  // 接收参数
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    width: {
+      type: String,
+      default: '1px',
+    },
+  });
+
+  const height = computed(() => sheep.$platform.capsule.height);
+</script>
+
+<style lang="scss" scoped>
+  .nav-title {
+    font-size: 36rpx;
+    color: #333;
+    text-align: center;
+  }
+
+  .menu-icon-wrap {
+    .nav-image {
+      height: 24px;
+    }
+  }
+</style>
diff --git a/sheep/components/s-custom-navbar/components/navbar.vue b/sheep/components/s-custom-navbar/components/navbar.vue
new file mode 100644
index 0000000..36050ec
--- /dev/null
+++ b/sheep/components/s-custom-navbar/components/navbar.vue
@@ -0,0 +1,314 @@
+<template>
+  <su-fixed
+    :noFixed="props.noFixed"
+    :alway="props.alway"
+    :bgStyles="props.bgStyles"
+    :val="0"
+    :index="props.zIndex"
+    noNav
+    :bg="props.bg"
+    :ui="props.ui"
+    :opacity="props.opacity"
+    :placeholder="props.placeholder"
+    :sticky="props.sticky"
+  >
+    <su-status-bar />
+    <!-- 
+      :class="[{ 'border-bottom': !props.opacity && props.bg != 'bg-none' }]"
+     -->
+    <view class="ui-navbar-box">
+      <view
+        class="ui-bar"
+        :class="
+          props.status == '' ? `text-a` : props.status == 'light' ? 'text-white' : 'text-black'
+        "
+        :style="[{ height: sys_navBar - sys_statusBar + 'px' }]"
+      >
+        <slot name="item"></slot>
+        <view class="right">
+          <!-- #ifdef MP -->
+          <view :style="[state.capsuleStyle]"></view>
+          <!-- #endif -->
+        </view>
+      </view>
+    </view>
+  </su-fixed>
+</template>
+
+<script setup>
+  /**
+   * 标题栏 - 基础组件navbar
+   *
+   * @param {Number}  zIndex = 100  							- 层级
+   * @param {Boolean}  back = true 							- 是否返回上一页
+   * @param {String}  backtext = ''  							- 返回文本
+   * @param {String}  bg = 'bg-white'  						- 公共Class
+   * @param {String}  status = ''  							- 状态栏颜色
+   * @param {Boolean}  alway = true							- 是否常驻
+   * @param {Boolean}  opacity = false  						- 是否开启透明渐变
+   * @param {Boolean}  opacityBg = false  					- 开启滑动渐变后，返回按钮是否添加背景
+   * @param {Boolean}  noFixed = false  						- 是否浮动
+   * @param {String}  ui = ''									- 公共Class
+   * @param {Boolean}  capsule = false  						- 是否开启胶囊返回
+   * @param {Boolean}  stopBack = false 					    - 是否禁用返回
+   * @param {Boolean}  placeholder = true 					- 是否开启占位
+   * @param {Object}   bgStyles = {} 					    	- 背景样式
+   *
+   */
+
+  import { computed, reactive, onBeforeMount } from 'vue';
+  import sheep from '@/sheep';
+
+  // 本地数据
+  const state = reactive({
+    statusCur: '',
+    capsuleStyle: {},
+    capsuleBack: {},
+  });
+
+  const sys_statusBar = sheep.$platform.device.statusBarHeight;
+  const sys_navBar = sheep.$platform.navbar;
+
+  const props = defineProps({
+    sticky: Boolean,
+    zIndex: {
+      type: Number,
+      default: 100,
+    },
+    back: {
+      //是否返回上一页
+      type: Boolean,
+      default: true,
+    },
+    backtext: {
+      //返回文本
+      type: String,
+      default: '',
+    },
+    bg: {
+      type: String,
+      default: 'bg-white',
+    },
+    status: {
+      //状态栏颜色 可以选择light dark/其他字符串视为黑色
+      type: String,
+      default: '',
+    },
+    // 常驻
+    alway: {
+      type: Boolean,
+      default: true,
+    },
+    opacity: {
+      //是否开启滑动渐变
+      type: Boolean,
+      default: false,
+    },
+    opacityBg: {
+      //开启滑动渐变后 返回按钮是否添加背景
+      type: Boolean,
+      default: false,
+    },
+    noFixed: {
+      //是否浮动
+      type: Boolean,
+      default: false,
+    },
+    ui: {
+      type: String,
+      default: '',
+    },
+    capsule: {
+      //是否开启胶囊返回
+      type: Boolean,
+      default: false,
+    },
+    stopBack: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: {
+      type: [Boolean],
+      default: true,
+    },
+    bgStyles: {
+      type: Object,
+      default() {},
+    },
+  });
+
+  const emits = defineEmits(['navback']);
+
+  onBeforeMount(() => {
+    init();
+  });
+
+  // 返回
+  const onNavback = () => {
+    sheep.$router.back();
+  };
+
+  // 初始化
+  const init = () => {
+    state.capsuleStyle = {
+      width: sheep.$platform.capsule.width + 'px',
+      height: sheep.$platform.capsule.height + 'px',
+      margin: '0 ' + (sheep.$platform.device.windowWidth - sheep.$platform.capsule.right) + 'px',
+    };
+
+    state.capsuleBack = state.capsuleStyle;
+  };
+</script>
+
+<style lang="scss" scoped>
+  .ui-navbar-box {
+    background-color: transparent;
+    width: 100%;
+
+    .ui-bar {
+      position: relative;
+      z-index: 2;
+      white-space: nowrap;
+      display: flex;
+      position: relative;
+      align-items: center;
+      justify-content: space-between;
+
+      .left {
+        @include flex-bar;
+
+        .back {
+          @include flex-bar;
+
+          .back-icon {
+            @include flex-center;
+            width: 56rpx;
+            height: 56rpx;
+            margin: 0 10rpx;
+            font-size: 46rpx !important;
+
+            &.opacityIcon {
+              position: relative;
+              border-radius: 50%;
+              background-color: rgba(127, 127, 127, 0.5);
+
+              &::after {
+                content: '';
+                display: block;
+                position: absolute;
+                height: 200%;
+                width: 200%;
+                left: 0;
+                top: 0;
+                border-radius: inherit;
+                transform: scale(0.5);
+                transform-origin: 0 0;
+                opacity: 0.1;
+                border: 1px solid currentColor;
+                pointer-events: none;
+              }
+
+              &::before {
+                transform: scale(0.9);
+              }
+            }
+          }
+
+          /* #ifdef  MP-ALIPAY */
+          ._icon-back {
+            opacity: 0;
+          }
+
+          /* #endif */
+        }
+
+        .capsule {
+          @include flex-bar;
+          border-radius: 100px;
+          position: relative;
+
+          &.dark {
+            background-color: rgba(255, 255, 255, 0.5);
+          }
+
+          &.light {
+            background-color: rgba(0, 0, 0, 0.15);
+          }
+
+          &::after {
+            content: '';
+            display: block;
+            position: absolute;
+            height: 60%;
+            width: 1px;
+            left: 50%;
+            top: 20%;
+            background-color: currentColor;
+            opacity: 0.1;
+            pointer-events: none;
+          }
+
+          &::before {
+            content: '';
+            display: block;
+            position: absolute;
+            height: 200%;
+            width: 200%;
+            left: 0;
+            top: 0;
+            border-radius: inherit;
+            transform: scale(0.5);
+            transform-origin: 0 0;
+            opacity: 0.1;
+            border: 1px solid currentColor;
+            pointer-events: none;
+          }
+
+          .capsule-back,
+          .capsule-home {
+            @include flex-center;
+            flex: 1;
+          }
+
+          &.isFristPage {
+            .capsule-back,
+            &::after {
+              display: none;
+            }
+          }
+        }
+      }
+
+      .right {
+        @include flex-bar;
+
+        .right-content {
+          @include flex;
+          flex-direction: row-reverse;
+        }
+      }
+
+      .center {
+        @include flex-center;
+        text-overflow: ellipsis;
+        text-align: center;
+        flex: 1;
+
+        .image {
+          display: block;
+          height: 36px;
+          max-width: calc(100vw - 200px);
+        }
+      }
+    }
+
+    .ui-bar-bg {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      z-index: 1;
+      pointer-events: none;
+    }
+  }
+</style>
diff --git a/sheep/components/s-custom-navbar/s-custom-navbar.vue b/sheep/components/s-custom-navbar/s-custom-navbar.vue
new file mode 100644
index 0000000..d5f2418
--- /dev/null
+++ b/sheep/components/s-custom-navbar/s-custom-navbar.vue
@@ -0,0 +1,196 @@
+<!-- 顶部导航栏 -->
+<template>
+  <navbar
+    :alway="isAlways"
+    :back="false"
+    bg=""
+    :placeholder="isPlaceholder"
+    :bgStyles="bgStyles"
+    :opacity="isOpacity"
+    :sticky="sticky"
+  >
+    <template #item>
+      <view class="nav-box">
+        <view class="nav-icon" v-if="showLeftButton">
+          <view class="icon-box ss-flex" :class="{ 'inner-icon-box': data.styleType === 'inner' }">
+            <view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft">
+              <text class="sicon-back" v-if="hasHistory" />
+              <text class="sicon-home" v-else />
+            </view>
+            <view class="line"></view>
+            <view class="icon-button icon-button-right ss-flex ss-row-center" @tap="onClickRight">
+              <text class="sicon-more" />
+            </view>
+          </view>
+        </view>
+        <view
+          class="nav-item"
+          v-for="(item, index) in navList"
+          :key="index"
+          :style="[parseImgStyle(item)]"
+          :class="[{ 'ss-flex ss-col-center ss-row-center': item.type !== 'search' }]"
+        >
+          <navbar-item :data="item" :width="parseImgStyle(item).width" />
+        </view>
+      </view>
+    </template>
+  </navbar>
+</template>
+
+<script setup>
+  /**
+   *  装修组件 - 自定义标题栏
+   *
+   *
+   * @property {Number | String}  alwaysShow = [0,1]			    - 是否常驻
+   * @property {Number | String}  styleType = [inner]			   	- 是否沉浸式
+   * @property {String | Number} type 		 					- 标题背景模式
+   * @property {String} color 		 							- 页面背景色
+   * @property {String} src 		 								- 页面背景图片
+   */
+  import { computed, unref } from 'vue';
+  import sheep from '@/sheep';
+  import Navbar from './components/navbar.vue';
+  import NavbarItem from './components/navbar-item.vue';
+  import { showMenuTools } from '@/sheep/hooks/useModal';
+
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    showLeftButton: {
+      type: Boolean,
+      default: false,
+    },
+  });
+  const hasHistory = sheep.$router.hasHistory();
+  const sticky = computed(() => {
+    if (props.data.styleType === 'inner') {
+      if (props.data.alwaysShow) {
+        return false;
+      }
+    }
+    if (props.data.styleType === 'normal') {
+      return false;
+    }
+  });
+  const navList = computed(() => {
+    // #ifdef MP
+    return props.data.mapCells || [];
+    // #endif
+    return props.data.otherCells || [];
+  });
+  // 页面宽度
+  const windowWidth = sheep.$platform.device.windowWidth;
+  // 单元格宽度
+  const cell = computed(() => {
+    if (unref(navList).length) {
+      // 默认宽度为8个格子，微信公众号右上角有胶囊按钮所以是6个格子
+      let cell = (windowWidth - 90) / 8;
+      // #ifdef MP
+      cell = (windowWidth - 80 - unref(sheep.$platform.capsule).width) / 6;
+      // #endif
+      return cell;
+    }
+  });
+  // 解析位置
+  const parseImgStyle = (item) => {
+    let obj = {
+      width: item.width * cell.value + (item.width - 1) * 10 + 'px',
+      left: item.left * cell.value + (item.left + 1) * 10 + 'px',
+      'border-radius': item.borderRadius + 'px',
+    };
+    return obj;
+  };
+  const isAlways = computed(() =>
+    props.data.styleType === 'inner' ? Boolean(props.data.alwaysShow) : true,
+  );
+  const isOpacity = computed(() =>
+    props.data.styleType === 'normal'
+      ? false
+      : props.showLeftButton
+      ? false
+      : props.data.styleType === 'inner',
+  );
+  const isPlaceholder = computed(() => props.data.styleType === 'normal');
+  const bgStyles = computed(() => {
+    return {
+      background:
+          props.data.bgType === 'img' && props.data.bgImg
+          ? `url(${sheep.$url.cdn(props.data.bgImg)}) no-repeat top center / 100% 100%`
+          : props.data.bgColor
+    };
+  });
+  // 左侧按钮：返回上一页或首页
+  function onClickLeft() {
+    if (hasHistory) {
+      sheep.$router.back();
+    } else {
+      sheep.$router.go('/pages/index/index');
+    }
+  }
+  // 右侧按钮：打开快捷菜单
+  function onClickRight() {
+    showMenuTools();
+  }
+</script>
+
+<style lang="scss" scoped>
+  .nav-box {
+    width: 750rpx;
+    position: relative;
+    height: 100%;
+
+    .nav-item {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    .nav-icon {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      left: 20rpx;
+      .inner-icon-box {
+        border: 1px solid rgba(#fff, 0.4);
+        background: none !important;
+      }
+      .icon-box {
+        background: #ffffff;
+        box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08),
+          0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
+        border-radius: 30rpx;
+        width: 134rpx;
+        height: 56rpx;
+        margin-left: 8rpx;
+        .line {
+          width: 2rpx;
+          height: 24rpx;
+          background: #e5e5e7;
+        }
+        .sicon-back {
+          font-size: 32rpx;
+        }
+        .sicon-home {
+          font-size: 32rpx;
+        }
+        .sicon-more {
+          font-size: 32rpx;
+        }
+        .icon-button {
+          width: 67rpx;
+          height: 56rpx;
+          &-left:hover {
+            background: rgba(0, 0, 0, 0.16);
+            border-radius: 30rpx 0px 0px 30rpx;
+          }
+          &-right:hover {
+            background: rgba(0, 0, 0, 0.16);
+            border-radius: 0px 30rpx 30rpx 0px;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/sheep/components/s-discount-list/s-discount-list.vue b/sheep/components/s-discount-list/s-discount-list.vue
new file mode 100644
index 0000000..22fbd43
--- /dev/null
+++ b/sheep/components/s-discount-list/s-discount-list.vue
@@ -0,0 +1,114 @@
+<template>
+  <su-popup
+    :show="show"
+    type="bottom"
+    round="20"
+    @close="emits('close')"
+    showClose
+    backgroundColor="#f2f2f2"
+  >
+    <view class="model-box">
+      <view class="title ss-m-t-38 ss-m-l-20 ss-m-b-40">活动优惠</view>
+      <scroll-view
+        class="model-content ss-m-l-20"
+        scroll-y
+        :scroll-with-animation="false"
+        :enable-back-to-top="true"
+      >
+        <view v-for="(item, index) in state.orderInfo.promo_infos" :key="index">
+          <view class="ss-flex ss-m-b-40 subtitle">
+            <view>共{{ item.goods_ids.length }}件，</view>
+            <view v-if="item.activity_type === 'full_discount'">
+              满{{ item.discount_rule.full }}打{{ item.discount_rule.discount }}折,已减
+            </view>
+            <view v-if="item.activity_type === 'full_gift'">满赠</view>
+            <view v-if="item.activity_type === 'full_reduce'">
+              满{{ item.discount_rule.full }}减{{ item.discount_rule.discount }},已减
+            </view>
+            <view class="price-text">￥{{ item.promo_discount_money || '0.00' }}</view>
+          </view>
+          <scroll-view class="scroll-box" scroll-x scroll-anchoring>
+            <view class="ss-flex">
+              <view v-for="i in item.goods_ids" :key="i">
+                <image class="content-img" :src="sheep.$url.cdn(getGoodsImg(i))" />
+              </view>
+            </view>
+          </scroll-view>
+        </view>
+      </scroll-view>
+    </view>
+    <view class="modal-footer ss-flex">
+      <button class="confirm-btn ss-reset-button" @tap="emits('close')">确认</button>
+    </view>
+  </su-popup>
+</template>
+<script setup>
+  import { computed, reactive } from 'vue';
+  import sheep from '@/sheep';
+  const props = defineProps({
+    promoInfo: {
+      type: Array,
+      default: () => [],
+    },
+    goodsList: {
+      type: Array,
+      default: () => [],
+    },
+    modelValue: {
+      type: Object,
+      default() {},
+    },
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  });
+  const emits = defineEmits(['close']);
+  const state = reactive({
+    orderInfo: computed(() => props.modelValue),
+  });
+  const getGoodsImg = (e) => {
+    let goodsImg = '';
+    state.orderInfo.goods_list.forEach((i) => {
+      if (e == i.goods_id) {
+        goodsImg = i.goods.image;
+      }
+    });
+    return goodsImg;
+  };
+</script>
+<style lang="scss" scoped>
+  .model-box {
+    height: 60vh;
+  }
+  .model-content {
+    height: 54vh;
+  }
+  .modal-footer {
+    width: 100%;
+    height: 120rpx;
+    background: #fff;
+  }
+  .confirm-btn {
+    width: 710rpx;
+    margin-left: 20rpx;
+    height: 80rpx;
+    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    border-radius: 40rpx;
+    color: #fff;
+  }
+  .content-img {
+    width: 140rpx;
+    height: 140rpx;
+    margin-right: 20rpx;
+    margin-bottom: 20rpx;
+  }
+  .subtitle {
+    font-size: 28rpx;
+    font-weight: 500;
+    color: #333333;
+  }
+  .price-text {
+    color: #ff3000;
+  }
+</style>
diff --git a/sheep/components/s-empty/s-empty.vue b/sheep/components/s-empty/s-empty.vue
new file mode 100644
index 0000000..27f8c4a
--- /dev/null
+++ b/sheep/components/s-empty/s-empty.vue
@@ -0,0 +1,93 @@
+<template>
+  <view
+    class="ss-flex-col ss-col-center ss-row-center empty-box"
+    :style="[{ paddingTop: paddingTop + 'rpx' }]"
+  >
+    <view class=""><image class="empty-icon" :src="icon" mode="widthFix"></image></view>
+    <view class="empty-text ss-m-t-28 ss-m-b-40">
+      <text v-if="text !== ''">{{ text }}</text>
+    </view>
+    <button class="ss-reset-button empty-btn" v-if="showAction" @tap="clickAction">
+      {{ actionText }}
+    </button>
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  /**
+   * 容器组件 - 装修组件的样式容器
+   */
+
+  const props = defineProps({
+    // 图标
+    icon: {
+      type: String,
+      default: '',
+    },
+    // 描述
+    text: {
+      type: String,
+      default: '',
+    },
+    // 是否显示button
+    showAction: {
+      type: Boolean,
+      default: false,
+    },
+    // button 文字
+    actionText: {
+      type: String,
+      default: '',
+    },
+    // 链接
+    actionUrl: {
+      type: String,
+      default: '',
+    },
+    // 间距
+    paddingTop: {
+      type: String,
+      default: '260',
+    },
+    //主题色
+    buttonColor: {
+      type: String,
+      default: 'var(--ui-BG-Main)',
+    },
+  });
+
+  const emits = defineEmits(['clickAction']);
+
+  function clickAction() {
+    if (props.actionUrl !== '') {
+      sheep.$router.go(props.actionUrl);
+    }
+    emits('clickAction');
+  }
+</script>
+
+<style lang="scss" scoped>
+  .empty-box {
+    width: 100%;
+  }
+  .empty-icon {
+    width: 240rpx;
+  }
+
+  .empty-text {
+    font-size: 26rpx;
+    font-weight: 500;
+    color: #999999;
+  }
+
+  .empty-btn {
+    width: 320rpx;
+    height: 70rpx;
+    border: 2rpx solid v-bind('buttonColor');
+    border-radius: 35rpx;
+    font-weight: 500;
+    color: v-bind('buttonColor');
+    font-size: 28rpx;
+  }
+</style>
diff --git a/sheep/components/s-float-menu/s-float-menu.vue b/sheep/components/s-float-menu/s-float-menu.vue
new file mode 100644
index 0000000..b53db00
--- /dev/null
+++ b/sheep/components/s-float-menu/s-float-menu.vue
@@ -0,0 +1,88 @@
+<!-- 装修基础组件：悬浮按钮 -->
+<template>
+  <!-- 模态背景：展开时显示，点击后折叠 -->
+  <view class="modal-bg" v-if="fabRef?.isShow" @click="handleCollapseFab"></view>
+  <!-- 悬浮按钮 -->
+  <uni-fab
+    ref="fabRef"
+    horizontal="right"
+    vertical="bottom"
+    :direction="state.direction"
+    :pattern="state.pattern"
+    :content="state.content"
+    @trigger="handleOpenLink"
+  />
+</template>
+<script setup>
+  /**
+   * 悬浮按钮
+   */
+
+  import sheep from '@/sheep';
+  import { reactive, ref, unref } from 'vue';
+  import { onBackPress } from '@dcloudio/uni-app';
+
+  // 定义属性
+  const props = defineProps({
+    data: {
+      type: Object,
+      default() {},
+    }
+  })
+
+  // 悬浮按钮配置： https://uniapp.dcloud.net.cn/component/uniui/uni-fab.html#fab-props
+  const state = reactive({
+    // 可选样式配置项
+    pattern: [],
+    // 展开菜单内容配置项
+    content: [],
+    // 展开菜单显示方式：horizontal-水平显示，vertical-垂直显示
+    direction: '',
+  });
+
+  // 悬浮按钮引用
+  const fabRef = ref(null);
+  // 按钮方向
+  state.direction = props.data.direction;
+  props.data?.list.forEach((item) => {
+    // 按钮文字
+    const text = props.data?.showText ? item.text : ''
+    // 生成内容配置项
+    state.content.push({ iconPath: sheep.$url.cdn(item.imgUrl), url: item.url, text });
+    // 生成样式配置项
+    state.pattern.push({ color: item.textColor });
+  });
+
+  // 处理链接跳转
+  function handleOpenLink(e) {
+    sheep.$router.go(e.item.url);
+  }
+
+  // 折叠
+  function handleCollapseFab() {
+    if (unref(fabRef)?.isShow) {
+      unref(fabRef)?.close();
+    }
+  }
+
+  // 按返回值后，折叠悬浮按钮
+  onBackPress(() => {
+    if (unref(fabRef)?.isShow) {
+      unref(fabRef)?.close();
+      return true;
+    }
+    return false;
+  });
+</script>
+<style lang="scss" scoped>
+  /* 模态背景 */
+  .modal-bg {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 11;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(#000000, 0.4);
+  }
+</style>
diff --git a/sheep/components/s-goods-card/s-goods-card.vue b/sheep/components/s-goods-card/s-goods-card.vue
new file mode 100644
index 0000000..61f5b44
--- /dev/null
+++ b/sheep/components/s-goods-card/s-goods-card.vue
@@ -0,0 +1,286 @@
+<!-- 装修商品组件：商品卡片 -->
+<template>
+  <!-- 商品卡片 -->
+  <view>
+    <!-- 布局1. 单列大图（上图，下内容）-->
+    <view v-if="layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.goodsList.length" class="goods-sl-box">
+      <view
+        class="goods-box"
+        v-for="item in state.goodsList"
+        :key="item.id"
+        :style="[{ marginBottom: data.space * 2 + 'rpx' }]"
+      >
+        <s-goods-column
+          class=""
+          size="sl"
+          :goodsFields="data.fields"
+          :tagStyle="data.badge"
+          :data="item"
+          :titleColor="data.fields.name?.color"
+          :subTitleColor="data.fields.introduction.color"
+          :topRadius="data.borderRadiusTop"
+          :bottomRadius="data.borderRadiusBottom"
+          @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+        >
+          <!-- 购买按钮 -->
+          <template v-slot:cart>
+            <button class="ss-reset-button cart-btn" :style="[buyStyle]">
+              {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
+            </button>
+          </template>
+        </s-goods-column>
+      </view>
+    </view>
+
+    <!-- 布局2. 双列（每一列：上图，下内容）-->
+    <view
+      v-if="layoutType === LayoutTypeEnum.TWO_COL && state.goodsList.length"
+      class="goods-md-wrap ss-flex ss-flex-wrap ss-col-top"
+    >
+      <view class="goods-list-box">
+        <view
+          class="left-list"
+          :style="[{ paddingRight: data.space + 'rpx', marginBottom: data.space + 'px' }]"
+          v-for="item in state.leftGoodsList"
+          :key="item.id"
+        >
+          <s-goods-column
+            class="goods-md-box"
+            size="md"
+            :goodsFields="data.fields"
+            :tagStyle="data.badge"
+            :data="item"
+            :titleColor="data.fields.name?.color"
+            :subTitleColor="data.fields.introduction.color"
+            :topRadius="data.borderRadiusTop"
+            :bottomRadius="data.borderRadiusBottom"
+            :titleWidth="330 - marginLeft - marginRight"
+            @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+            @getHeight="calculateGoodsColumn($event, 'left')"
+          >
+            <!-- 购买按钮 -->
+            <template v-slot:cart>
+              <button class="ss-reset-button cart-btn" :style="[buyStyle]">
+                {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
+              </button>
+            </template>
+          </s-goods-column>
+        </view>
+      </view>
+      <view class="goods-list-box">
+        <view
+          class="right-list"
+          :style="[{ paddingLeft: data.space + 'rpx', marginBottom: data.space + 'px' }]"
+          v-for="item in state.rightGoodsList"
+          :key="item.id"
+        >
+          <s-goods-column
+            class="goods-md-box"
+            size="md"
+            :goodsFields="data.fields"
+            :tagStyle="data.badge"
+            :data="item"
+            :titleColor="data.fields.name?.color"
+            :subTitleColor="data.fields.introduction.color"
+            :topRadius="data.borderRadiusTop"
+            :bottomRadius="data.borderRadiusBottom"
+            :titleWidth="330 - marginLeft - marginRight"
+            @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+            @getHeight="calculateGoodsColumn($event, 'right')"
+          >
+            <!-- 购买按钮 -->
+            <template v-slot:cart>
+              <button class="ss-reset-button cart-btn" :style="[buyStyle]">
+                {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
+              </button>
+            </template>
+          </s-goods-column>
+        </view>
+      </view>
+    </view>
+
+    <!-- 布局3. 单列小图（左图，右内容） -->
+    <view v-if="layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.goodsList.length" class="goods-lg-box">
+      <view
+        class="goods-box"
+        :style="[{ marginBottom: data.space + 'px' }]"
+        v-for="item in state.goodsList"
+        :key="item.id"
+      >
+        <s-goods-column
+          class="goods-card"
+          size="lg"
+          :goodsFields="data.fields"
+          :data="item"
+          :tagStyle="data.badge"
+          :titleColor="data.fields.name?.color"
+          :subTitleColor="data.fields.introduction.color"
+          :topRadius="data.borderRadiusTop"
+          :bottomRadius="data.borderRadiusBottom"
+          @tap="sheep.$router.go('/pages/goods/index', { id: item.id })"
+        >
+          <!-- 购买按钮 -->
+          <template v-slot:cart>
+            <button class="ss-reset-button cart-btn" :style="[buyStyle]">
+              {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
+            </button>
+          </template>
+        </s-goods-column>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  /**
+   * 商品卡片
+   */
+  import { computed, reactive, onMounted } from 'vue';
+  import sheep from '@/sheep';
+  import SpuApi from '@/api/product/spu';
+
+  // 布局类型
+  const LayoutTypeEnum = {
+    // 单列大图
+    ONE_COL_BIG_IMG: 'oneColBigImg',
+    // 双列
+    TWO_COL: 'twoCol',
+    // 单列小图
+    ONE_COL_SMALL_IMG: 'oneColSmallImg',
+  }
+
+  const state = reactive({
+    goodsList: [],
+    leftGoodsList: [],
+    rightGoodsList: [],
+  });
+  const props = defineProps({
+    data: {
+      type: Object,
+      default() {},
+    },
+    styles: {
+      type: Object,
+      default() {},
+    },
+  });
+
+  const { layoutType, btnBuy, spuIds } = props.data ?? {};
+  const { marginLeft, marginRight } = props.styles ?? {};
+
+  // 购买按钮样式
+  const buyStyle = computed(() => {
+    if (btnBuy.type === 'text') {
+      // 文字按钮：线性渐变背景颜色
+      return {
+        background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
+      };
+    }
+    if (btnBuy.type === 'img') {
+      // 图片按钮
+      return {
+        width: '54rpx',
+        height: '54rpx',
+        background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,
+        backgroundSize: '100% 100%',
+      };
+    }
+  });
+
+  //region 商品瀑布流布局
+  // 下一个要处理的商品索引
+  let count = 0;
+  // 左列的高度
+  let leftHeight = 0;
+  // 右列的高度
+  let rightHeight = 0;
+
+  /**
+   * 计算商品在左列还是右列
+   * @param height 商品的高度
+   * @param where 添加到哪一列
+   */
+  function calculateGoodsColumn(height = 0, where = 'left') {
+    // 处理完
+    if (!state.goodsList[count]) return;
+    // 增加列的高度
+    if (where === 'left') leftHeight += height;
+    if (where === 'right') rightHeight += height;
+    // 添加到矮的一列
+    if (leftHeight <= rightHeight) {
+      state.leftGoodsList.push(state.goodsList[count]);
+    } else {
+      state.rightGoodsList.push(state.goodsList[count]);
+    }
+    // 计数
+    count++;
+  }
+  //endregion
+
+  /**
+   * 根据商品编号列表，获取商品列表
+   * @param ids 商品编号列表
+   * @return {Promise<undefined>} 商品列表
+   */
+  async function getGoodsListByIds(ids) {
+    const { data } = await SpuApi.getSpuListByIds(ids);
+    return data;
+  }
+
+  // 初始化
+  onMounted(async () => {
+    // 加载商品列表
+    state.goodsList = await getGoodsListByIds(spuIds.join(','));
+    // 只有双列布局时需要
+    if (layoutType === LayoutTypeEnum.TWO_COL){
+      // 分列
+      calculateGoodsColumn();
+    }
+  });
+</script>
+
+<style lang="scss" scoped>
+  .goods-md-wrap {
+    width: 100%;
+  }
+
+  .goods-list-box {
+    width: 50%;
+    box-sizing: border-box;
+    .left-list {
+      &:nth-last-child(1) {
+        margin-bottom: 0 !important;
+      }
+    }
+    .right-list {
+      &:nth-last-child(1) {
+        margin-bottom: 0 !important;
+      }
+    }
+  }
+
+  .goods-box {
+    &:nth-last-of-type(1) {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  .goods-md-box,
+  .goods-sl-box,
+  .goods-lg-box {
+    position: relative;
+
+    .cart-btn {
+      position: absolute;
+      bottom: 18rpx;
+      right: 20rpx;
+      z-index: 11;
+      height: 50rpx;
+      line-height: 50rpx;
+      padding: 0 20rpx;
+      border-radius: 25rpx;
+      font-size: 24rpx;
+      color: #fff;
+    }
+  }
+</style>
diff --git a/sheep/components/s-goods-column/s-goods-column.vue b/sheep/components/s-goods-column/s-goods-column.vue
new file mode 100644
index 0000000..8939254
--- /dev/null
+++ b/sheep/components/s-goods-column/s-goods-column.vue
@@ -0,0 +1,721 @@
+<!-- 页面 -->
+<template>
+  <view class="ss-goods-wrap">
+    <!-- xs卡片：横向紧凑型，一行放两个，图片左内容右边  -->
+    <view
+      v-if="size === 'xs'"
+      class="xs-goods-card ss-flex ss-col-stretch"
+      :style="[elStyles]"
+      @tap="onClick"
+    >
+      <view v-if="tagStyle.show" class="tag-icon-box">
+        <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
+      </view>
+      <image class="xs-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFit"></image>
+      <view
+        v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show"
+        class="xs-goods-content ss-flex-col ss-row-around"
+      >
+        <view
+          v-if="goodsFields.title?.show || goodsFields.name?.show"
+          class="xs-goods-title ss-line-1"
+          :style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
+        >
+          {{ data.title || data.name }}
+        </view>
+        <view
+          v-if="goodsFields.price?.show"
+          class="xs-goods-price font-OPPOSANS"
+          :style="[{ color: goodsFields.price.color }]"
+        >
+          <text class="price-unit ss-font-24">{{ priceUnit }}</text>
+          {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
+        </view>
+      </view>
+    </view>
+
+    <!-- sm卡片：竖向紧凑，一行放三个，图上内容下 -->
+    <view v-if="size === 'sm'" class="sm-goods-card ss-flex-col" :style="[elStyles]" @tap="onClick">
+      <view v-if="tagStyle.show" class="tag-icon-box">
+        <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
+      </view>
+      <image class="sm-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
+
+      <view
+        v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show"
+        class="sm-goods-content"
+        :style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
+      >
+        <view v-if="goodsFields.title?.show || goodsFields.name?.show" class="sm-goods-title ss-line-1 ss-m-b-16">
+          {{ data.title || data.name }}
+        </view>
+        <view
+          v-if="goodsFields.price?.show"
+          class="sm-goods-price font-OPPOSANS"
+          :style="[{ color: goodsFields.price.color }]"
+        >
+          <text class="price-unit ss-font-24">{{ priceUnit }}</text>
+          {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
+        </view>
+      </view>
+    </view>
+
+    <!-- md卡片：竖向，一行放两个，图上内容下 -->
+    <view v-if="size === 'md'" class="md-goods-card ss-flex-col" :style="[elStyles]" @tap="onClick">
+      <view v-if="tagStyle.show" class="tag-icon-box">
+        <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
+      </view>
+      <image class="md-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="widthFix"></image>
+      <view
+        class="md-goods-content ss-flex-col ss-row-around ss-p-b-20 ss-p-t-20 ss-p-x-16"
+        :id="elId"
+      >
+        <view
+          v-if="goodsFields.title?.show || goodsFields.name?.show"
+          class="md-goods-title ss-line-1"
+          :style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
+        >
+          {{ data.title || data.name }}
+        </view>
+        <view
+          v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
+          class="md-goods-subtitle ss-m-t-16 ss-line-1"
+          :style="[{ color: subTitleColor, background: subTitleBackground }]"
+        >
+          {{ data.subtitle || data.introduction }}
+        </view>
+        <slot name="activity">
+          <view v-if="data.promos?.length" class="tag-box ss-flex-wrap ss-flex ss-col-center">
+            <view
+              class="activity-tag ss-m-r-10 ss-m-t-16"
+              v-for="item in data.promos"
+              :key="item.id"
+            >
+              {{ item.title }}
+            </view>
+          </view>
+        </slot>
+        <view class="ss-flex ss-col-bottom">
+          <view
+            v-if="goodsFields.price?.show"
+            class="md-goods-price ss-m-t-16 font-OPPOSANS ss-m-r-10"
+            :style="[{ color: goodsFields.price.color }]"
+          >
+            <text class="price-unit ss-font-24">{{ priceUnit }}</text>
+            {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
+          </view>
+
+          <view
+            v-if="(goodsFields.original_price?.show||goodsFields.marketPrice?.show) &&( data.original_price > 0|| data.marketPrice > 0)"
+            class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex"
+            :style="[{ color: originPriceColor }]"
+          >
+            <text class="price-unit ss-font-20">{{ priceUnit }}</text>
+            <view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
+          </view>
+        </view>
+
+        <view class="ss-m-t-16 ss-flex ss-col-center ss-flex-wrap">
+          <view class="sales-text">{{ salesAndStock }}</view>
+        </view>
+      </view>
+
+      <slot name="cart">
+        <view class="cart-box ss-flex ss-col-center ss-row-center">
+          <image class="cart-icon" src="/static/img/shop/tabbar/category2.png" mode="" />
+        </view>
+      </slot>
+    </view>
+
+    <!-- lg卡片：横向型，一行放一个，图片左内容右边  -->
+    <view
+      v-if="size === 'lg'"
+      class="lg-goods-card ss-flex ss-col-stretch"
+      :style="[elStyles]"
+      @tap="onClick"
+    >
+      <view v-if="tagStyle.show" class="tag-icon-box">
+        <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
+      </view>
+      <view v-if="seckillTag" class="seckill-tag ss-flex ss-row-center"> 秒杀 </view>
+      <view v-if="grouponTag" class="groupon-tag ss-flex ss-row-center">
+        <view class="tag-icon">拼团</view>
+      </view>
+      <image class="lg-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
+      <view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ss-p-t-20">
+        <view>
+          <view
+            v-if="goodsFields.title?.show || goodsFields.name?.show"
+            class="lg-goods-title ss-line-2"
+            :style="[{ color: titleColor }]"
+          >
+            {{ data.title || data.name }}
+          </view>
+          <view
+            v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
+            class="lg-goods-subtitle ss-m-t-10 ss-line-1"
+            :style="[{ color: subTitleColor, background: subTitleBackground }]"
+          >
+            {{ data.subtitle || data.introduction }}
+          </view>
+        </view>
+        <view>
+          <slot name="activity">
+            <view v-if="data.promos?.length" class="tag-box ss-flex ss-col-center">
+              <view class="activity-tag ss-m-r-10" v-for="item in data.promos" :key="item.id">
+                {{ item.title }}
+              </view>
+            </view>
+          </slot>
+          <view class="ss-flex ss-col-bottom ss-m-t-10">
+            <view
+              v-if="goodsFields.price?.show"
+              class="lg-goods-price ss-m-r-12 ss-flex ss-col-bottom font-OPPOSANS"
+              :style="[{ color: goodsFields.price.color }]"
+            >
+              <text class="ss-font-24">{{ priceUnit }}</text>
+              {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
+            </view>
+            <view
+              v-if="(goodsFields.original_price?.show||goodsFields.marketPrice?.show) &&( data.original_price > 0|| data.marketPrice > 0)"
+              class="goods-origin-price ss-flex ss-col-bottom font-OPPOSANS"
+              :style="[{ color: originPriceColor }]"
+            >
+              <text class="price-unit ss-font-20">{{ priceUnit }}</text>
+              <view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
+            </view>
+          </view>
+          <view class="ss-m-t-8 ss-flex ss-col-center ss-flex-wrap">
+            <view class="sales-text">{{ salesAndStock }}</view>
+          </view>
+        </view>
+      </view>
+
+      <slot name="cart">
+        <view class="buy-box ss-flex ss-col-center ss-row-center" v-if="buttonShow">
+          去购买
+        </view>
+      </slot>
+    </view>
+
+    <!-- sl卡片：竖向型，一行放一个，图片上内容下边 -->
+    <view v-if="size === 'sl'" class="sl-goods-card ss-flex-col" :style="[elStyles]" @tap="onClick">
+      <view v-if="tagStyle.show" class="tag-icon-box">
+        <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
+      </view>
+
+      <image class="sl-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
+
+      <view class="sl-goods-content">
+        <view>
+          <view
+            v-if="goodsFields.title?.show || goodsFields.name?.show"
+            class="sl-goods-title ss-line-1"
+            :style="[{ color: titleColor }]"
+          >
+            {{ data.title || data.name }}
+          </view>
+          <view
+            v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
+            class="sl-goods-subtitle ss-m-t-16"
+            :style="[{ color: subTitleColor, background: subTitleBackground }]"
+          >
+            {{ data.subtitle || data.introduction }}
+          </view>
+        </view>
+        <view>
+          <slot name="activity">
+            <view v-if="data.promos?.length" class="tag-box ss-flex ss-col-center ss-flex-wrap">
+              <view
+                class="activity-tag ss-m-r-10 ss-m-t-16"
+                v-for="item in data.promos"
+                :key="item.id"
+              >
+                {{ item.title }}
+              </view>
+            </view>
+          </slot>
+          <view v-if="goodsFields.price?.show" class="ss-flex ss-col-bottom font-OPPOSANS">
+            <view class="sl-goods-price ss-m-r-12" :style="[{ color: goodsFields.price.color }]">
+              <text class="price-unit ss-font-24">{{ priceUnit }}</text>
+              {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
+            </view>
+            <view
+              v-if="(goodsFields.original_price?.show||goodsFields.marketPrice?.show) &&( data.original_price > 0|| data.marketPrice > 0)"
+              class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex"
+              :style="[{ color: originPriceColor }]"
+            >
+              <text class="price-unit ss-font-20">{{ priceUnit }}</text>
+              <view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
+            </view>
+          </view>
+          <view class="ss-m-t-16 ss-flex ss-flex-wrap">
+            <view class="sales-text">{{ salesAndStock }}</view>
+          </view>
+        </view>
+      </view>
+
+      <slot name="cart"
+        ><view class="buy-box ss-flex ss-col-center ss-row-center">去购买</view></slot
+      >
+    </view>
+  </view>
+</template>
+
+<script setup>
+  /**
+   * 商品卡片
+   *
+   * @property {Array} size = [xs | sm | md | lg | sl ] 			 	- 列表数据
+   * @property {String} tag 											- md及以上才有
+   * @property {String} img 											- 图片
+   * @property {String} background 									- 背景色
+   * @property {String} topRadius 									- 上圆角
+   * @property {String} bottomRadius 									- 下圆角
+   * @property {String} title 										- 标题
+   * @property {String} titleColor 									- 标题颜色
+   * @property {Number} titleWidth = 0								- 标题宽度，默认0，单位rpx
+   * @property {String} subTitle 										- 副标题
+   * @property {String} subTitleColor									- 副标题颜色
+   * @property {String} subTitleBackground 							- 副标题背景
+   * @property {String | Number} price 								- 价格
+   * @property {String} priceColor 									- 价格颜色
+   * @property {String | Number} originPrice 							- 原价/划线价
+   * @property {String} originPriceColor 								- 原价颜色
+   * @property {String | Number} sales 								- 销售数量
+   * @property {String} salesColor									- 销售数量颜色
+   *
+   * @slots activity												 	- 活动插槽
+   * @slots cart														- 购物车插槽，默认包含文字，背景色，文字颜色 || 图片 || 行为
+   *
+   * @event {Function()} click 										- 点击卡片
+   *
+   */
+  import { computed, reactive, getCurrentInstance, onMounted, nextTick } from 'vue';
+  import sheep from '@/sheep';
+  import { fen2yuan, formatSales } from '@/sheep/hooks/useGoods';
+  import { formatStock } from '@/sheep/hooks/useGoods';
+  import goodsCollectVue from '@/pages/user/goods-collect.vue';
+  import { isArray } from 'lodash';
+
+  // 数据
+  const state = reactive({});
+
+  // 接收参数
+  const props = defineProps({
+    goodsFields: {
+      type: [Array, Object],
+      default() {
+        return {
+          // 商品价格
+          price: { show: true },
+          // 库存
+          stock: { show: true },
+          // 商品名称
+          name: { show: true },
+          // 商品介绍
+          introduction: { show: true },
+          // 市场价
+          marketPrice: { show: true },
+          // 销量
+          salesCount: { show: true },
+        };
+      },
+    },
+    tagStyle: {
+      type: Object,
+      default: {},
+    },
+    data: {
+      type: Object,
+      default: {},
+    },
+    size: {
+      type: String,
+      default: 'sl',
+    },
+    background: {
+      type: String,
+      default: '',
+    },
+    topRadius: {
+      type: Number,
+      default: 0,
+    },
+    bottomRadius: {
+      type: Number,
+      default: 0,
+    },
+    titleWidth: {
+      type: Number,
+      default: 0,
+    },
+    titleColor: {
+      type: String,
+      default: '#333',
+    },
+    priceColor: {
+      type: String,
+      default: '',
+    },
+    originPriceColor: {
+      type: String,
+      default: '#C4C4C4',
+    },
+    priceUnit: {
+      type: String,
+      default: '￥',
+    },
+    subTitleColor: {
+      type: String,
+      default: '#999999',
+    },
+    subTitleBackground: {
+      type: String,
+      default: '',
+    },
+    buttonShow: {
+      type: Boolean,
+      default: true,
+    },
+    seckillTag: {
+      type: Boolean,
+      default: false,
+    },
+    grouponTag: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  // 组件样式
+  const elStyles = computed(() => {
+    return {
+      background: props.background,
+      'border-top-left-radius': props.topRadius + 'px',
+      'border-top-right-radius': props.topRadius + 'px',
+      'border-bottom-left-radius': props.bottomRadius + 'px',
+      'border-bottom-right-radius': props.bottomRadius + 'px',
+    };
+  });
+
+  // 格式化销量、库存信息
+  const salesAndStock = computed(() => {
+    let text = [];
+    if (props.goodsFields.salesCount?.show) {
+      text.push(formatSales(props.data.sales_show_type, props.data.salesCount));
+    }
+    if (props.goodsFields.stock?.show) {
+      text.push(formatStock(props.data.stock_show_type, props.data.stock));
+    }
+    return text.join(' | ');
+  });
+
+  // 返回事件
+  const emits = defineEmits(['click', 'getHeight']);
+
+  const onClick = () => {
+    emits('click');
+  };
+
+  // 获取卡片实时高度
+  const { proxy } = getCurrentInstance();
+  const elId = `sheep_${Math.ceil(Math.random() * 10e5).toString(36)}`;
+  function getGoodsPriceCardWH() {
+    if (props.size === 'md') {
+      const view = uni.createSelectorQuery().in(proxy);
+      view.select(`#${elId}`).fields({ size: true, scrollOffset: true });
+      view.exec((data) => {
+        let totalHeight = 0;
+        const goodsPriceCard = data[0];
+        if (props.data.image_wh) {
+          totalHeight =
+            (goodsPriceCard.width / props.data.image_wh.w) * props.data.image_wh.h +
+            goodsPriceCard.height;
+        } else {
+          totalHeight = goodsPriceCard.width;
+        }
+        emits('getHeight', totalHeight);
+      });
+    }
+  }
+  onMounted(() => {
+    nextTick(() => {
+      getGoodsPriceCardWH();
+    });
+  });
+</script>
+
+<style lang="scss" scoped>
+  .tag-icon-box {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 2;
+    .tag-icon {
+      width: 72rpx;
+      height: 44rpx;
+    }
+  }
+  .seckill-tag {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 2;
+    width: 68rpx;
+    height: 38rpx;
+    background: linear-gradient(90deg, #ff5854 0%, #ff2621 100%);
+    border-radius: 10rpx 0px 10rpx 0px;
+    font-size: 24rpx;
+    font-weight: 500;
+    color: #ffffff;
+    line-height: 32rpx;
+  }
+  .groupon-tag {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 2;
+    width: 68rpx;
+    height: 38rpx;
+    background: linear-gradient(90deg, #fe832a 0%, #ff6600 100%);
+    border-radius: 10rpx 0px 10rpx 0px;
+    font-size: 24rpx;
+    font-weight: 500;
+    color: #ffffff;
+    line-height: 32rpx;
+  }
+  .goods-img {
+    width: 100%;
+    height: 100%;
+    background-color: #f5f5f5;
+  }
+  .price-unit {
+    margin-right: -4px;
+  }
+  .sales-text {
+    display: table;
+    font-size: 24rpx;
+    transform: scale(0.8);
+    margin-left: 0rpx;
+    color: #c4c4c4;
+  }
+
+  .activity-tag {
+    font-size: 20rpx;
+    color: #ff0000;
+    line-height: 30rpx;
+    padding: 0 10rpx;
+    border: 1px solid rgba(#ff0000, 0.25);
+    border-radius: 4px;
+    flex-shrink: 0;
+  }
+
+  .goods-origin-price {
+    font-size: 20rpx;
+    color: #c4c4c4;
+    line-height: 36rpx;
+    text-decoration: line-through;
+  }
+
+  // xs
+  .xs-goods-card {
+    overflow: hidden;
+    // max-width: 375rpx;
+    background-color: $white;
+    position: relative;
+
+    .xs-img-box {
+      width: 128rpx;
+      height: 128rpx;
+      margin-right: 20rpx;
+    }
+
+    .xs-goods-title {
+      font-size: 26rpx;
+      color: #333;
+      font-weight: 500;
+    }
+
+    .xs-goods-price {
+      font-size: 30rpx;
+      color: $red;
+    }
+  }
+
+  // sm
+  .sm-goods-card {
+    overflow: hidden;
+    // width: 223rpx;
+    // width: 100%;
+    background-color: $white;
+    position: relative;
+
+    .sm-img-box {
+      // width: 228rpx;
+      width: 100%;
+      height: 208rpx;
+    }
+    .sm-goods-content {
+      padding: 20rpx 16rpx;
+      box-sizing: border-box;
+    }
+    .sm-goods-title {
+      font-size: 26rpx;
+      color: #333;
+    }
+
+    .sm-goods-price {
+      font-size: 30rpx;
+      color: $red;
+    }
+  }
+
+  // md
+  .md-goods-card {
+    overflow: hidden;
+    width: 100%;
+    position: relative;
+    z-index: 1;
+    background-color: $white;
+    position: relative;
+
+    .md-img-box {
+      width: 100%;
+    }
+
+    .md-goods-title {
+      font-size: 26rpx;
+      color: #333;
+      width: 100%;
+    }
+    .md-goods-subtitle {
+      font-size: 24rpx;
+      font-weight: 400;
+      color: #999999;
+    }
+
+    .md-goods-price {
+      font-size: 30rpx;
+      color: $red;
+      line-height: 36rpx;
+    }
+
+    .cart-box {
+      width: 54rpx;
+      height: 54rpx;
+      background: linear-gradient(90deg, #fe8900, #ff5e00);
+      border-radius: 50%;
+      position: absolute;
+      bottom: 50rpx;
+      right: 20rpx;
+      z-index: 2;
+
+      .cart-icon {
+        width: 30rpx;
+        height: 30rpx;
+      }
+    }
+  }
+
+  // lg
+  .lg-goods-card {
+    overflow: hidden;
+    position: relative;
+    z-index: 1;
+    background-color: $white;
+    height: 280rpx;
+
+    .lg-img-box {
+      width: 280rpx;
+      height: 280rpx;
+      margin-right: 20rpx;
+    }
+
+    .lg-goods-title {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #333333;
+      // line-height: 36rpx;
+      // width: 410rpx;
+    }
+    .lg-goods-subtitle {
+      font-size: 24rpx;
+      font-weight: 400;
+      color: #999999;
+      // line-height: 30rpx;
+      // width: 410rpx;
+    }
+
+    .lg-goods-price {
+      font-size: 30rpx;
+      color: $red;
+      line-height: 36rpx;
+    }
+
+    .buy-box {
+      position: absolute;
+      bottom: 20rpx;
+      right: 20rpx;
+      z-index: 2;
+      width: 120rpx;
+      height: 50rpx;
+      background: linear-gradient(90deg, #fe8900, #ff5e00);
+      border-radius: 25rpx;
+      font-size: 24rpx;
+      color: #ffffff;
+    }
+    .tag-box {
+      width: 100%;
+    }
+  }
+
+  // sl
+
+  .sl-goods-card {
+    overflow: hidden;
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    background-color: $white;
+    .sl-goods-content {
+      padding: 20rpx 20rpx;
+      box-sizing: border-box;
+    }
+    .sl-img-box {
+      width: 100%;
+      height: 360rpx;
+    }
+
+    .sl-goods-title {
+      font-size: 26rpx;
+      color: #333;
+      font-weight: 500;
+    }
+    .sl-goods-subtitle {
+      font-size: 24rpx;
+      font-weight: 400;
+      color: #999999;
+      line-height: 30rpx;
+    }
+
+    .sl-goods-price {
+      font-size: 30rpx;
+      color: $red;
+      line-height: 36rpx;
+    }
+
+    .buy-box {
+      position: absolute;
+      bottom: 20rpx;
+      right: 20rpx;
+      z-index: 2;
+      width: 148rpx;
+      height: 50rpx;
+      background: linear-gradient(90deg, #fe8900, #ff5e00);
+      border-radius: 25rpx;
+      font-size: 24rpx;
+      color: #ffffff;
+    }
+  }
+</style>
diff --git a/sheep/components/s-goods-item/s-goods-item.vue b/sheep/components/s-goods-item/s-goods-item.vue
new file mode 100644
index 0000000..456bb16
--- /dev/null
+++ b/sheep/components/s-goods-item/s-goods-item.vue
@@ -0,0 +1,181 @@
+<template>
+  <view>
+    <view>
+      <slot name="top"></slot>
+    </view>
+    <view
+      class="ss-order-card-warp ss-flex ss-col-stretch ss-row-between bg-white"
+      :style="[{ borderRadius: radius + 'rpx', marginBottom: marginBottom + 'rpx' }]"
+    >
+      <view class="img-box ss-m-r-24">
+        <image class="order-img" :src="sheep.$url.cdn(img)" mode="aspectFill"></image>
+      </view>
+      <view
+        class="box-right ss-flex-col ss-row-between"
+        :style="[{ width: titleWidth ? titleWidth + 'rpx' : '' }]"
+      >
+        <view class="title-text ss-line-2" v-if="title">{{ title }}</view>
+        <view v-if="skuString" class="spec-text ss-m-t-8 ss-m-b-12">{{ skuString }}</view>
+        <view class="groupon-box">
+          <slot name="groupon"></slot>
+        </view>
+        <view class="ss-flex">
+          <view class="ss-flex ss-col-center">
+            <view
+              class="price-text ss-flex ss-col-center"
+              :style="[{ color: priceColor }]"
+              v-if="price && Number(price) > 0"
+            >
+              ￥{{ fen2yuan(price) }}
+            </view>
+            <view v-if="num" class="total-text ss-flex ss-col-center">x {{ num }}</view>
+            <slot name="priceSuffix"></slot>
+          </view>
+        </view>
+        <view class="tool-box">
+          <slot name="tool"></slot>
+        </view>
+        <view>
+          <slot name="rightBottom"></slot>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { computed } from 'vue';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
+  /**
+   * 订单卡片
+   *
+   * @property {String} img 											- 图片
+   * @property {String} title 										- 标题
+   * @property {Number} titleWidth = 0								- 标题宽度，默认0，单位rpx
+   * @property {String} skuText 										- 规格
+   * @property {String | Number} price 								- 价格
+   * @property {String} priceColor 									- 价格颜色
+   * @property {Number | String} num									- 数量
+   *
+   */
+  const props = defineProps({
+    img: {
+      type: String,
+      default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    titleWidth: {
+      type: Number,
+      default: 0,
+    },
+    skuText: {
+      type: [String, Array],
+      default: '',
+    },
+    price: {
+      type: [String, Number],
+      default: '',
+    },
+    priceColor: {
+      type: [String],
+      default: '',
+    },
+    num: {
+      type: [String, Number],
+      default: 0,
+    },
+    score: {
+      type: [String, Number],
+      default: '',
+    },
+    radius: {
+      type: [String],
+      default: '',
+    },
+    marginBottom: {
+      type: [String],
+      default: '',
+    },
+  });
+  const skuString = computed(() => {
+    if (!props.skuText) {
+      return '';
+    }
+    if (typeof props.skuText === 'object') {
+      return props.skuText.join(',');
+    }
+    return props.skuText;
+  });
+</script>
+
+<style lang="scss" scoped>
+  .score-img {
+    width: 36rpx;
+    height: 36rpx;
+    margin: 0 4rpx;
+  }
+  .ss-order-card-warp {
+    padding: 20rpx;
+
+    .img-box {
+      width: 164rpx;
+      height: 164rpx;
+      border-radius: 10rpx;
+      overflow: hidden;
+
+      .order-img {
+        width: 164rpx;
+        height: 164rpx;
+      }
+    }
+
+    .box-right {
+      flex: 1;
+      // width: 500rpx;
+      // height: 164rpx;
+      position: relative;
+
+      .tool-box {
+        position: absolute;
+        right: 0rpx;
+        bottom: -10rpx;
+      }
+    }
+
+    .title-text {
+      font-size: 28rpx;
+      font-weight: 500;
+      line-height: 40rpx;
+    }
+
+    .spec-text {
+      font-size: 24rpx;
+      font-weight: 400;
+      color: $dark-9;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+    }
+
+    .price-text {
+      font-size: 24rpx;
+      font-weight: 500;
+      font-family: OPPOSANS;
+    }
+
+    .total-text {
+      font-size: 24rpx;
+      font-weight: 400;
+      line-height: 24rpx;
+      color: $dark-9;
+      margin-left: 8rpx;
+    }
+  }
+</style>
diff --git a/sheep/components/s-goods-scroll/s-goods-scroll.vue b/sheep/components/s-goods-scroll/s-goods-scroll.vue
new file mode 100644
index 0000000..175cc66
--- /dev/null
+++ b/sheep/components/s-goods-scroll/s-goods-scroll.vue
@@ -0,0 +1,33 @@
+<!-- 商品组 - 横向滚动商品（目前暂时没用到） -->
+<template>
+  <view class="goods-scroll-box">
+    <scroll-view class="scroll-box" scroll-x scroll-anchoring>
+      <view class="goods-box ss-flex">
+        <view v-for="(item, index) in list" :key="index">
+          <s-goods-column
+            class="goods-card ss-m-l-20"
+            size="sm"
+            :data="item"
+            :titleWidth="200 - marginLeft - marginRight"
+          />
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+  /**
+   * 商品组 - 横向滚动商品
+   */
+  const props = defineProps({
+    list: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+  });
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/sheep/components/s-goods-shelves/s-goods-shelves.vue b/sheep/components/s-goods-shelves/s-goods-shelves.vue
new file mode 100644
index 0000000..189dd25
--- /dev/null
+++ b/sheep/components/s-goods-shelves/s-goods-shelves.vue
@@ -0,0 +1,147 @@
+<!-- 装修商品组件：商品栏 -->
+<template>
+  <view>
+    <!-- 布局1. 两列商品，图片左文案右 -->
+    <view
+      v-if="layoutType === 'twoCol'"
+      class="goods-xs-box ss-flex ss-flex-wrap"
+      :style="[{ margin: '-' + data.space + 'rpx' }]"
+    >
+      <view
+        class="goods-xs-list"
+        v-for="item in goodsList"
+        :key="item.id"
+        :style="[
+          {
+            padding: data.space + 'rpx',
+          },
+        ]"
+      >
+        <s-goods-column
+          class="goods-card"
+          size="xs"
+          :goodsFields="data.fields"
+          :tagStyle="data.badge"
+          :data="item"
+          :titleColor="data.fields.name?.color"
+          :topRadius="data.borderRadiusTop"
+          :bottomRadius="data.borderRadiusBottom"
+          :titleWidth="(454 - marginRight * 2 - data.space * 2 - marginLeft * 2) / 2"
+          @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+        />
+      </view>
+    </view>
+    <!-- 布局. 三列商品：图片上文案下 -->
+    <view
+      v-if="layoutType === 'threeCol'"
+      class="goods-sm-box ss-flex ss-flex-wrap"
+      :style="[{ margin: '-' + data.space + 'rpx' }]"
+    >
+      <view
+        v-for="item in goodsList"
+        :key="item.id"
+        class="goods-card-box"
+        :style="[
+          {
+            padding: data.space + 'rpx',
+          },
+        ]"
+      >
+        <s-goods-column
+          class="goods-card"
+          size="sm"
+          :goodsFields="data.fields"
+          :tagStyle="data.badge"
+          :data="item"
+          :titleColor="data.fields.name?.color"
+          :topRadius="data.borderRadiusTop"
+          :bottomRadius="data.borderRadiusBottom"
+          @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+        />
+      </view>
+    </view>
+
+    <!-- 布局3. 一行商品，水平滑动 -->
+    <view v-if="layoutType === 'horizSwiper'" class="">
+      <scroll-view class="scroll-box goods-scroll-box" scroll-x scroll-anchoring>
+        <view class="goods-box ss-flex">
+          <view
+            class="goods-card-box"
+            v-for="item in goodsList"
+            :key="item.id"
+            :style="[{ marginRight: data.space * 2 + 'rpx' }]"
+          >
+            <s-goods-column
+              class="goods-card"
+              size="sm"
+              :goodsFields="data.fields"
+              :tagStyle="data.badge"
+              :data="item"
+              :titleColor="data.fields.name?.color"
+              :titleWidth="(750 - marginRight * 2 - data.space * 4 - marginLeft * 2) / 3"
+              @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+            />
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  /**
+   * 商品栏
+   */
+  import { onMounted, ref, computed } from 'vue';
+  import sheep from '@/sheep';
+  import SpuApi from "@/api/product/spu";
+
+  const props = defineProps({
+    data: {
+      type: Object,
+      default() {},
+    },
+    styles: {
+      type: Object,
+      default() {},
+    },
+  });
+  const { layoutType, spuIds } = props.data;
+  let { marginLeft, marginRight } = props.styles;
+  const goodsList = ref([]);
+  onMounted(async () => {
+    if (spuIds.length > 0) {
+      let { data } = await SpuApi.getSpuListByIds(spuIds.join(','));
+      goodsList.value = data;
+    }
+  });
+</script>
+
+<style lang="scss" scoped>
+  .goods-xs-box {
+    // margin: 0 auto;
+    width: 100%;
+    .goods-xs-list {
+      box-sizing: border-box;
+      flex-shrink: 0;
+      overflow: hidden;
+      width: 50%;
+    }
+  }
+
+  .goods-sm-box {
+    margin: 0 auto;
+    box-sizing: border-box;
+    .goods-card-box {
+      flex-shrink: 0;
+      overflow: hidden;
+      width: 33.3%;
+      box-sizing: border-box;
+    }
+  }
+  .goods-scroll-box {
+    margin: 0 auto;
+    width: 100%;
+    box-sizing: border-box;
+  }
+</style>
diff --git a/sheep/components/s-groupon-block/s-groupon-block.vue b/sheep/components/s-groupon-block/s-groupon-block.vue
new file mode 100644
index 0000000..8af111a
--- /dev/null
+++ b/sheep/components/s-groupon-block/s-groupon-block.vue
@@ -0,0 +1,154 @@
+<!-- 装修组件 - 拼团 -->
+<template>
+  <view>
+    <view
+      v-if="layoutType === 'threeCol'"
+      class="goods-sm-box ss-flex ss-flex-wrap"
+      :style="[{ margin: '-' + data.space + 'rpx' }]"
+    >
+      <view
+        v-for="product in productList"
+        :key="product.id"
+        class="goods-card-box"
+        :style="[
+          {
+            padding: data.space + 'rpx',
+          },
+        ]"
+      >
+        <s-goods-column
+          class="goods-card"
+          size="sm"
+          :goodsFields="data.fields"
+          :tagStyle="tagStyle"
+          :data="product"
+          :titleColor="data.fields.name?.color"
+          :topRadius="data.borderRadiusTop"
+          :bottomRadius="data.borderRadiusBottom"
+          @click="
+            sheep.$router.go('/pages/goods/groupon', {
+              id: props.data.activityId,
+            })
+          "
+        ></s-goods-column>
+      </view>
+    </view>
+    <!-- 样式2 一行一个 图片左 文案右 -->
+    <view class="goods-box" v-if="layoutType === 'oneCol'">
+      <view
+        class="goods-list"
+        v-for="(product, index) in productList"
+        :key="index"
+        :style="[{ marginBottom: space + 'px' }]"
+      >
+        <s-goods-column
+          class="goods-card"
+          size="lg"
+          :goodsFields="data.fields"
+          :tagStyle="tagStyle"
+          :data="product"
+          :titleColor="data.fields.name?.color"
+          :subTitleColor="data.fields.introduction?.color"
+          :topRadius="data.borderRadiusTop"
+          :bottomRadius="data.borderRadiusBottom"
+          @click="
+            sheep.$router.go('/pages/goods/groupon', {
+              id: props.data.activityId,
+            })
+          "
+        >
+          <template v-slot:cart>
+            <button class="ss-reset-button cart-btn" :style="[buyStyle]">
+              {{ btnBuy?.type === 'text' ? btnBuy.text : '' }}
+            </button>
+          </template>
+        </s-goods-column>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  /**
+   * 拼团
+   */
+  import { computed, onMounted, ref } from 'vue';
+  import sheep from '@/sheep';
+  import SpuApi from "@/api/product/spu";
+  import CombinationApi from "@/api/promotion/combination";
+
+  // 接收参数
+  const props = defineProps({
+    data: {
+      type: Object,
+      default() {},
+    },
+    styles: {
+      type: Object,
+      default() {},
+    },
+  });
+
+  let { layoutType, tagStyle, btnBuy, space } = props.data;
+  let { marginLeft, marginRight } = props.styles;
+
+  // 购买按钮样式
+  const buyStyle = computed(() => {
+    let btnBuy = props.data.btnBuy;
+    if (btnBuy?.type === 'text') {
+      return {
+        background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
+      };
+    }
+
+    if (btnBuy?.type === 'img') {
+      return {
+        width: '54rpx',
+        height: '54rpx',
+        background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,
+        backgroundSize: '100% 100%',
+      };
+    }
+  });
+
+  const productList = ref([]);
+  onMounted(async () => {
+    // todo：@owen 与Yudao结构不一致，待重构
+    const { data: activity } = await CombinationApi.getCombinationActivity(props.data.activityId);
+    const { data: spu } = await SpuApi.getSpuDetail(activity.spuId)
+    productList.value = [spu];
+  });
+</script>
+
+<style lang="scss" scoped>
+  .goods-list {
+    position: relative;
+    .cart-btn {
+      position: absolute;
+      bottom: 10rpx;
+      right: 20rpx;
+      z-index: 11;
+      height: 50rpx;
+      line-height: 50rpx;
+      padding: 0 20rpx;
+      border-radius: 25rpx;
+      font-size: 24rpx;
+      color: #fff;
+    }
+  }
+  .goods-list {
+    &:nth-last-of-type(1) {
+      margin-bottom: 0 !important;
+    }
+  }
+  .goods-sm-box {
+    margin: 0 auto;
+    box-sizing: border-box;
+    .goods-card-box {
+      flex-shrink: 0;
+      overflow: hidden;
+      width: 33.3%;
+      box-sizing: border-box;
+    }
+  }
+</style>
diff --git a/sheep/components/s-hotzone-block/s-hotzone-block.vue b/sheep/components/s-hotzone-block/s-hotzone-block.vue
new file mode 100644
index 0000000..246d6d4
--- /dev/null
+++ b/sheep/components/s-hotzone-block/s-hotzone-block.vue
@@ -0,0 +1,46 @@
+<!-- 装修图文组件：热区 -->
+<template>
+  <view class="hotzone-wrap">
+    <image :src="sheep.$url.cdn(data.imgUrl)" style="width: 100%" mode="widthFix"></image>
+    <view
+      class="hotzone-box"
+      v-for="(item, index) in data.list"
+      :key="index"
+      :style="[
+        {
+          top: `${item.top}px`,
+          left: `${item.left}px`,
+          width: `${item.width}px`,
+          height: `${item.height}px`,
+        },
+      ]"
+      @tap.stop="sheep.$router.go(item.url)"
+    >
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+
+  // 接收参数
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    styles: {
+      type: Object,
+      default: () => ({}),
+    },
+  });
+</script>
+
+<style lang="scss" scoped>
+  .hotzone-wrap {
+    position: relative;
+  }
+  .hotzone-box {
+    position: absolute;
+  }
+</style>
diff --git a/sheep/components/s-image-banner/s-image-banner.vue b/sheep/components/s-image-banner/s-image-banner.vue
new file mode 100644
index 0000000..478e7af
--- /dev/null
+++ b/sheep/components/s-image-banner/s-image-banner.vue
@@ -0,0 +1,44 @@
+<!-- 装修图文组件：图片轮播 -->
+<template>
+  <su-swiper
+    :list="imgList"
+    :dotStyle="data.indicator === 'dot' ? 'long' : 'tag'"
+    imageMode="scaleToFill"
+    dotCur="bg-mask-40"
+    :seizeHeight="300"
+    :autoplay="data.autoplay"
+    :interval="data.interval * 1000"
+    :mode="data.type"
+  />
+</template>
+
+<script setup>
+  import { computed } from 'vue';
+  import sheep from '@/sheep';
+
+  // 轮播图
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    styles: {
+      type: Object,
+      default: () => ({}),
+    },
+  });
+
+  const imgList = computed(() =>
+      props.data.items.map((item) => {
+        const src = item.type === 'img' ? item.imgUrl : item.videoUrl;
+        return {
+          ...item,
+          type: item.type === 'img' ? 'image' : 'video',
+          src: sheep.$url.cdn(src),
+          poster: sheep.$url.cdn(item.imgUrl),
+        };
+      }),
+  );
+</script>
+
+<style></style>
diff --git a/sheep/components/s-image-block/s-image-block.vue b/sheep/components/s-image-block/s-image-block.vue
new file mode 100644
index 0000000..c898749
--- /dev/null
+++ b/sheep/components/s-image-block/s-image-block.vue
@@ -0,0 +1,27 @@
+<!-- 装修图文组件：图片展示 -->
+<template>
+  <view @tap="sheep.$router.go(data?.url)">
+    <su-image :src="sheep.$url.cdn(data.imgUrl)" mode="widthFix" />
+  </view>
+</template>
+
+<script setup>
+  /**
+   * 图片组件
+   */
+  import sheep from '@/sheep';
+
+  // 接收参数
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    styles: {
+      type: Object,
+      default: () => ({}),
+    },
+  });
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/sheep/components/s-image-cube/s-image-cube.vue b/sheep/components/s-image-cube/s-image-cube.vue
new file mode 100644
index 0000000..9794d8f
--- /dev/null
+++ b/sheep/components/s-image-cube/s-image-cube.vue
@@ -0,0 +1,110 @@
+<!-- 装修图文组件：广告魔方 -->
+<template>
+  <view class="ss-cube-wrap" :style="[parseAdWrap]">
+    <view v-for="(item, index) in data.list" :key="index">
+      <view
+        class="cube-img-wrap"
+        :style="[parseImgStyle(item), { margin: data.space + 'px' }]"
+        @tap="sheep.$router.go(item.url)"
+      >
+        <image class="cube-img" :src="sheep.$url.cdn(item.imgUrl)" mode="aspectFill"></image>
+      </view>
+    </view>
+  </view>
+</template>
+<script setup>
+  /**
+/**
+ * 广告魔方
+ *
+ * @property {Array<Object>} list 			- 魔方列表
+ * @property {Object} styles 				- 组件样式
+ * @property {String} background 			- 组件背景色
+ * @property {Number} topSpace 				- 组件顶部间距
+ * @property {Number} bottomSpace 			- 组件底部间距
+ * @property {Number} leftSpace 			- 容器左间距
+ * @property {Number} rightSpace 			- 容器右间距
+ * @property {Number} imgSpace 				- 图片间距
+ * @property {Number} imgTopRadius 			- 图片上圆角
+ * @property {Number} imgBottomRadius 		- 图片下圆角
+ *
+ */
+
+  import { computed, inject, unref } from 'vue';
+  import sheep from '@/sheep';
+
+  // 参数
+  const props = defineProps({
+    data: {
+      type: Object,
+      default() {},
+    },
+    styles: {
+      type: Object,
+      default() {},
+    },
+  });
+
+  // 单元格大小
+  const windowWidth = sheep.$platform.device.windowWidth;
+  const cell = computed(() => {
+    return (
+      (windowWidth -
+        ((props.styles.marginLeft || 0) + (props.styles.marginRight || 0) + (props.styles.padding || 0) * 2)) /
+      4
+    );
+  });
+
+  //包裹容器高度
+  const parseAdWrap = computed(() => {
+    let heightArr = props.data.list.reduce(
+      (prev, cur) => (prev.includes(cur.height + cur.top) ? prev : [...prev, cur.height + cur.top]),
+      [],
+    );
+    let heightMax = Math.max(...heightArr);
+    return {
+      height: heightMax * cell.value + 'px',
+      width:
+        windowWidth -
+        (props.data?.style?.marginLeft +
+          props.data?.style?.marginRight +
+          props.styles.padding * 2) *
+          2 +
+        'px',
+    };
+  });
+
+  // 解析图片大小位置
+  const parseImgStyle = (item) => {
+    let obj = {
+      width: item.width * cell.value - props.data.space + 'px',
+      height: item.height * cell.value - props.data.space + 'px',
+      left: item.left * cell.value + 'px',
+      top: item.top * cell.value + 'px',
+      'border-top-left-radius': props.data.borderRadiusTop + 'px',
+      'border-top-right-radius': props.data.borderRadiusTop + 'px',
+      'border-bottom-left-radius': props.data.borderRadiusBottom + 'px',
+      'border-bottom-right-radius': props.data.borderRadiusBottom + 'px',
+    };
+    return obj;
+  };
+</script>
+
+<style lang="scss" scoped>
+  .ss-cube-wrap {
+    position: relative;
+    z-index: 2;
+    width: 750rpx;
+  }
+
+  .cube-img-wrap {
+    position: absolute;
+    z-index: 3;
+    overflow: hidden;
+  }
+
+  .cube-img {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/sheep/components/s-layout/s-layout.vue b/sheep/components/s-layout/s-layout.vue
new file mode 100644
index 0000000..541abea
--- /dev/null
+++ b/sheep/components/s-layout/s-layout.vue
@@ -0,0 +1,242 @@
+<template>
+  <view
+    class="page-app"
+    :class="['theme-' + sys.mode, 'main-' + sys.theme, 'font-' + sys.fontSize]"
+  >
+    <view class="page-main" :style="[bgMain]">
+      <!-- 顶部导航栏-情况1：默认通用顶部导航栏 -->
+      <su-navbar
+        v-if="navbar === 'normal'"
+        :title="title"
+        statusBar
+        :color="color"
+        :tools="tools"
+        :opacityBgUi="opacityBgUi"
+        @search="(e) => emits('search', e)"
+        :defaultSearch="defaultSearch"
+      />
+
+      <!-- 顶部导航栏-情况2：装修组件导航栏-标准 -->
+      <s-custom-navbar
+        v-else-if="navbar === 'custom' && navbarMode === 'normal'"
+        :data="navbarStyle"
+        :showLeftButton="showLeftButton"
+      />
+      <view class="page-body" :style="[bgBody]">
+        <!-- 顶部导航栏-情况3：沉浸式头部 -->
+        <su-inner-navbar v-if="navbar === 'inner'" :title="title" />
+        <view
+          v-if="navbar === 'inner'"
+          :style="[{ paddingTop: sheep.$platform.navbar + 'px' }]"
+        ></view>
+
+        <!-- 顶部导航栏-情况4：装修组件导航栏-沉浸式 -->
+        <s-custom-navbar v-if="navbar === 'custom' && navbarMode === 'inner'" :data="navbarStyle" :showLeftButton="showLeftButton" />
+
+        <!-- 页面内容插槽 -->
+        <slot />
+
+        <!-- 底部导航 -->
+        <s-tabbar v-if="tabbar !== ''" :path="tabbar" />
+      </view>
+    </view>
+
+    <view class="page-modal">
+      <!-- 全局授权弹窗 -->
+      <s-auth-modal />
+      <!-- 全局分享弹窗 -->
+      <s-share-modal :shareInfo="shareInfo" />
+      <!-- 全局快捷入口 -->
+      <s-menu-tools />
+    </view>
+  </view>
+</template>
+
+<script setup>
+  /**
+   * 模板组件 - 提供页面公共组件，属性，方法
+   */
+  import { computed, reactive, ref } from 'vue';
+  import sheep from '@/sheep';
+  import { isEmpty } from 'lodash';
+  import { onShow } from '@dcloudio/uni-app';
+  // #ifdef MP-WEIXIN
+  import { onShareAppMessage } from '@dcloudio/uni-app';
+  // #endif
+
+  const props = defineProps({
+    title: {
+      type: String,
+      default: '',
+    },
+    navbar: {
+      type: String,
+      default: 'normal',
+    },
+    opacityBgUi: {
+      type: String,
+      default: 'bg-white',
+    },
+    color: {
+      type: String,
+      default: '',
+    },
+    tools: {
+      type: String,
+      default: 'title',
+    },
+    keyword: {
+      type: String,
+      default: '',
+    },
+    navbarStyle: {
+      type: Object,
+      default: () => ({
+        styleType: '',
+        type: '',
+        color: '',
+        src: '',
+        list: [],
+        alwaysShow: 0,
+      }),
+    },
+    bgStyle: {
+      type: Object,
+      default: () => ({
+        src: '',
+        color: 'var(--ui-BG-1)',
+      }),
+    },
+    tabbar: {
+      type: [String, Boolean],
+      default: '',
+    },
+    onShareAppMessage: {
+      type: [Boolean, Object],
+      default: true,
+    },
+    leftWidth: {
+      type: [Number, String],
+      default: 100,
+    },
+    rightWidth: {
+      type: [Number, String],
+      default: 100,
+    },
+    defaultSearch: {
+      type: String,
+      default: '',
+    },
+    //展示返回按钮
+    showLeftButton: {
+      type: Boolean,
+      default: false,
+    },
+  });
+  const emits = defineEmits(['search']);
+
+  const sysStore = sheep.$store('sys');
+  const userStore = sheep.$store('user');
+  const appStore = sheep.$store('app');
+  const modalStore = sheep.$store('modal');
+  const sys = computed(() => sysStore);
+
+  // 导航栏模式(因为有自定义导航栏 需要计算)
+  const navbarMode = computed(() => {
+    if (props.navbar === 'normal' || props.navbarStyle.styleType === 'normal') {
+      return 'normal';
+    }
+    return 'inner';
+  });
+
+  // 背景1
+  const bgMain = computed(() => {
+    if (navbarMode.value === 'inner') {
+      return {
+        background: `${props.bgStyle.backgroundColor} url(${sheep.$url.cdn(
+          props.bgStyle.backgroundImage,
+        )}) no-repeat top center / 100% auto`,
+      };
+    }
+    return {};
+  });
+
+  // 背景2
+  const bgBody = computed(() => {
+    if (navbarMode.value === 'normal') {
+      return {
+        background: `${props.bgStyle.backgroundColor} url(${sheep.$url.cdn(
+          props.bgStyle.backgroundImage,
+        )}) no-repeat top center / 100% auto`,
+      };
+    }
+    return {};
+  });
+
+  // 分享信息
+  const shareInfo = computed(() => {
+    if (props.onShareAppMessage === true) {
+      return sheep.$platform.share.getShareInfo();
+    } else {
+      if (!isEmpty(props.onShareAppMessage)) {
+        sheep.$platform.share.updateShareInfo(props.onShareAppMessage);
+        return props.onShareAppMessage;
+      }
+    }
+    return {};
+  });
+
+  // #ifdef MP-WEIXIN
+  // 微信小程序分享
+  onShareAppMessage(() => {
+    return {
+      title: shareInfo.value.title,
+      path: shareInfo.value.path,
+      imageUrl: shareInfo.value.image,
+    };
+  });
+  // #endif
+
+  onShow(() => {
+    if (!isEmpty(shareInfo.value)) {
+      sheep.$platform.share.updateShareInfo(shareInfo.value);
+    }
+  });
+</script>
+
+<style lang="scss" scoped>
+  .page-app {
+    position: relative;
+    color: var(--ui-TC);
+    background-color: var(--ui-BG-1) !important;
+    z-index: 2;
+    display: flex;
+    width: 100%;
+    height: 100vh;
+
+    .page-main {
+      position: absolute;
+      z-index: 1;
+      width: 100%;
+      min-height: 100%;
+      display: flex;
+      flex-direction: column;
+
+      .page-body {
+        width: 100%;
+        position: relative;
+        z-index: 1;
+        flex: 1;
+      }
+
+      .page-img {
+        width: 100vw;
+        height: 100vh;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 0;
+      }
+    }
+  }
+</style>
diff --git a/sheep/components/s-line-block/s-line-block.vue b/sheep/components/s-line-block/s-line-block.vue
new file mode 100644
index 0000000..c0628f9
--- /dev/null
+++ b/sheep/components/s-line-block/s-line-block.vue
@@ -0,0 +1,15 @@
+<!-- 装修基础组件：分割线 -->
+<template>
+  <su-subline v-bind="data"></su-subline>
+</template>
+
+<script setup>
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: {},
+    },
+  });
+</script>
+
+<style></style>
diff --git a/sheep/components/s-live-block/s-live-block.vue b/sheep/components/s-live-block/s-live-block.vue
new file mode 100644
index 0000000..9d1ad03
--- /dev/null
+++ b/sheep/components/s-live-block/s-live-block.vue
@@ -0,0 +1,144 @@
+<template>
+  <view>
+    <view
+      v-if="mode === 2 && state.liveList.length"
+      class="goods-md-wrap ss-flex ss-flex-wrap ss-col-top"
+      :style="[{ margin: '-' + data.space + 'rpx' }]"
+    >
+      <view
+        :style="[
+          {
+            padding: data.space + 'rpx',
+          },
+        ]"
+        class="goods-list-box"
+        v-for="item in state.liveList"
+        :key="item.id"
+      >
+        <s-live-card
+          class="goods-md-box"
+          size="md"
+          :goodsFields="goodsFields"
+          :data="item"
+          :titleColor="goodsFields.name?.color"
+          :subTitleColor="goodsFields.anchor_name?.color"
+          :topRadius="data.borderRadiusTop"
+          :bottomRadius="data.borderRadiusBottom"
+          @click="goRoom(item.roomid)"
+        >
+        </s-live-card>
+      </view>
+    </view>
+    <view v-if="mode === 1 && state.liveList.length" class="goods-lg-box">
+      <view
+        class="goods-box"
+        :style="[{ marginBottom: data.space + 'px' }]"
+        v-for="item in state.liveList"
+        :key="item.id"
+      >
+        <s-live-card
+          class="goods-card"
+          size="sl"
+          :goodsFields="goodsFields"
+          :data="item"
+          :titleColor="goodsFields.name?.color"
+          :subTitleColor="goodsFields.anchor_name.color"
+          :topRadius="data.borderRadiusTop"
+          :bottomRadius="data.borderRadiusBottom"
+          @tap="goRoom(item.roomid)"
+        >
+        </s-live-card>
+      </view>
+    </view>
+  </view>
+</template>
+<script setup>
+  import { reactive, onMounted } from 'vue';
+  import sheep from '@/sheep';
+
+  const state = reactive({
+    liveList: [],
+    mpLink: '',
+  });
+  const props = defineProps({
+    data: {
+      type: Object,
+      default() {},
+    },
+    styles: {
+      type: Object,
+      default() {},
+    },
+  });
+  const { mode, goodsFields, mpliveIds } = props.data ?? {};
+  const { marginLeft, marginRight } = props.styles ?? {};
+
+  async function getLiveListByIds(ids) {
+    const { data } = await sheep.$api.app.mplive.getRoomList(ids);
+    return data;
+  }
+  function goRoom(id) {
+    // #ifdef MP-WEIXIN
+    uni.navigateTo({
+      url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${id}`,
+    });
+    // #endif
+
+    // #ifndef MP-WEIXIN
+    uni.showModal({
+      title: '提示',
+      confirmText: '允许',
+      content: '将打开小程序访问',
+      success: async function (res) {
+        if (res.confirm) {
+          getMpLink();
+        }
+      },
+    });
+    // #endif
+  }
+
+  function goMpLink() {
+    // #ifdef H5
+    window.location = state.mpLink;
+    // #endif
+    // #ifdef APP-PLUS
+    plus.runtime.openURL(state.mpLink);
+    // #endif
+  }
+
+  async function getMpLink() {
+    // #ifndef MP-WEIXIN
+    if (state.mpLink === '') {
+      const { error, data } = await sheep.$api.app.mplive.getMpLink();
+      if (error === 0) {
+        state.mpLink = data;
+      }
+    }
+    goMpLink();
+    // #endif
+  }
+
+  onMounted(async () => {
+    state.liveList = await getLiveListByIds(mpliveIds);
+  });
+</script>
+<style lang="scss" scoped>
+  .goods-list-box {
+    width: 50%;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  .goods-box {
+    &:nth-last-of-type(1) {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  .goods-md-box,
+  .goods-sl-box {
+    position: relative;
+  }
+</style>
diff --git a/sheep/components/s-live-card/s-live-card.vue b/sheep/components/s-live-card/s-live-card.vue
new file mode 100644
index 0000000..9cefee0
--- /dev/null
+++ b/sheep/components/s-live-card/s-live-card.vue
@@ -0,0 +1,234 @@
+<template>
+  <view>
+    <!-- md卡片：竖向，一行放两个，图上内容下 -->
+    <view v-if="size === 'md'" class="md-goods-card ss-flex-col" :style="[elStyles]" @tap="onClick">
+      <view class="icon-box ss-flex">
+        <image class="icon" :src="state.liveStatus[data.status].img"></image>
+        <view class="title ss-m-l-16">{{ state.liveStatus[data.status].title }}</view>
+      </view>
+      <img class="md-img-box" :src="sheep.$url.cdn(data.feeds_img)" referrerpolicy="no-referrer">
+      <view class="md-goods-content">
+        <view class="md-goods-title ss-line-1" :style="[{ color: titleColor }]">
+          {{ data.name }}
+        </view>
+        <view class="md-goods-subtitle ss-m-t-14 ss-line-1" :style="[{ color: subTitleColor }]">
+          主播：{{ data.anchor_name }}
+        </view>
+      </view>
+    </view>
+    <!-- sl卡片：竖向型，一行放一个，图片上内容下边 -->
+    <view v-if="size === 'sl'" class="sl-goods-card ss-flex-col" :style="[elStyles]" @tap="onClick">
+      <view class="icon-box ss-flex">
+        <image class="icon" :src="state.liveStatus[data.status].img"></image>
+        <view class="title ss-m-l-16">{{ state.liveStatus[data.status].title }}</view>
+      </view>
+      <img class="sl-img-box" :src="sheep.$url.cdn(data.feeds_img)" referrerpolicy="no-referrer">
+      <view class="sl-goods-content">
+        <view class="sl-goods-title ss-line-1" :style="[{ color: titleColor }]">
+          {{ data.name }}
+        </view>
+        <view class="sl-goods-subtitle ss-m-t-14 ss-line-1" :style="[{ color: subTitleColor }]">
+          主播：{{ data.anchor_name }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script setup>
+  import { computed, reactive } from 'vue';
+  import sheep from '@/sheep';
+  /**
+   * 直播卡片
+   *
+   * @property {String} img 											- 图片
+   * @property {String} title 										- 标题
+   * @property {Number} titleWidth = 0								- 标题宽度，默认0，单位rpx
+   * @property {String} skuText 										- 规格
+   * @property {String | Number} score 								- 积分
+   * @property {String | Number} price 								- 价格
+   * @property {String | Number} originalPrice 						- 单购价
+   * @property {String} priceColor 									- 价格颜色
+   * @property {Number | String} num									- 数量
+   *
+   */
+  const props = defineProps({
+    goodsFields: {
+      type: [Array, Object],
+      default() {
+        return {};
+      },
+    },
+    tagStyle: {
+      type: Object,
+      default: {},
+    },
+    data: {
+      type: Object,
+      default: {},
+    },
+    size: {
+      type: String,
+      default: 'sl',
+    },
+    background: {
+      type: String,
+      default: '',
+    },
+    topRadius: {
+      type: Number,
+      default: 0,
+    },
+    bottomRadius: {
+      type: Number,
+      default: 0,
+    },
+    titleColor: {
+      type: String,
+      default: '#333',
+    },
+    subTitleColor: {
+      type: String,
+      default: '#999999',
+    },
+  });
+  // 组件样式
+  const elStyles = computed(() => {
+    return {
+      background: props.background,
+      'border-top-left-radius': props.topRadius + 'px',
+      'border-top-right-radius': props.topRadius + 'px',
+      'border-bottom-left-radius': props.bottomRadius + 'px',
+      'border-bottom-right-radius': props.bottomRadius + 'px',
+    };
+  });
+  const state = reactive({
+    liveStatus: {
+      101: {
+        img: sheep.$url.static('/static/img/shop/app/mplive/living.png'),
+        title: '直播中',
+      },
+      102: {
+        img: sheep.$url.static('/static/img/shop/app/mplive/start.png'),
+        title: '未开始',
+      },
+      103: {
+        img: sheep.$url.static('/static/img/shop/app/mplive/ended.png'),
+        title: '已结束',
+      },
+    },
+  });
+  const emits = defineEmits(['click', 'getHeight']);
+  const onClick = () => {
+    emits('click');
+  };
+</script>
+
+<style lang="scss" scoped>
+  // md
+  .md-goods-card {
+    overflow: hidden;
+    width: 100%;
+    height: 424rpx;
+    position: relative;
+    z-index: 1;
+    background-color: $white;
+    .icon-box {
+      position: absolute;
+      left: 20rpx;
+      top: 10rpx;
+      width: 136rpx;
+      height: 40rpx;
+      background: rgba(#000000, 0.5);
+      border-radius: 20rpx;
+      z-index: 1;
+      .icon {
+        width: 40rpx;
+        height: 40rpx;
+        border-radius: 20rpx 0px 20rpx 20rpx;
+      }
+      .title {
+        font-size: 24rpx;
+        font-weight: 500;
+        color: #ffffff;
+      }
+    }
+    .md-goods-content {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      padding: 20rpx;
+      width: 100%;
+      background: linear-gradient(360deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.02) 100%);
+    }
+
+    .md-img-box {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .md-goods-title {
+      font-size: 26rpx;
+      color: #333;
+      width: 100%;
+    }
+    .md-goods-subtitle {
+      font-size: 24rpx;
+      font-weight: 400;
+      color: #999999;
+    }
+  }
+  .sl-goods-card {
+    overflow: hidden;
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    height: 400rpx;
+    background-color: $white;
+    .icon-box {
+      position: absolute;
+      left: 20rpx;
+      top: 10rpx;
+      width: 136rpx;
+      height: 40rpx;
+      background: rgba(#000000, 0.5);
+      border-radius: 20rpx;
+      z-index: 1;
+      .icon {
+        width: 40rpx;
+        height: 40rpx;
+        border-radius: 20rpx 0px 20rpx 20rpx;
+      }
+      .title {
+        font-size: 24rpx;
+        font-weight: 500;
+        color: #ffffff;
+      }
+    }
+    .sl-goods-content {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      padding: 20rpx;
+      width: 100%;
+      background: linear-gradient(360deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.02) 100%);
+    }
+
+    .sl-img-box {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .sl-goods-title {
+      font-size: 26rpx;
+      color: #333;
+      width: 100%;
+    }
+    .sl-goods-subtitle {
+      font-size: 24rpx;
+      font-weight: 400;
+      color: #999999;
+    }
+  }
+</style>
diff --git a/sheep/components/s-menu-button/s-menu-button.vue b/sheep/components/s-menu-button/s-menu-button.vue
new file mode 100644
index 0000000..375a591
--- /dev/null
+++ b/sheep/components/s-menu-button/s-menu-button.vue
@@ -0,0 +1,363 @@
+<!-- 装修基础组件：菜单导航（金刚区） -->
+<template>
+  <!-- 包裹层 -->
+  <view
+    class="ui-swiper"
+    :class="[props.mode, props.bg, props.ui]"
+    :style="[{ height: swiperHeight + (menuList.length > 1 ? 50 : 0) + 'rpx' }]"
+  >
+    <!-- 轮播 -->
+    <swiper
+      :circular="props.circular"
+      :current="state.cur"
+      :autoplay="props.autoplay"
+      :interval="props.interval"
+      :duration="props.duration"
+      :style="[{ height: swiperHeight + 'rpx' }]"
+      @change="swiperChange"
+    >
+      <swiper-item
+        v-for="(arr, index) in menuList"
+        :key="index"
+        :class="{ cur: state.cur == index }"
+      >
+        <!-- 宫格 -->
+        <view class="grid-wrap">
+          <view
+            v-for="(item, index) in arr"
+            :key="index"
+            class="grid-item ss-flex ss-flex-col ss-col-center ss-row-center"
+            :style="[{ width: `${100 * (1 / data.column)}%`, height: '200rpx' }]"
+            hover-class="ss-hover-btn"
+            @tap="sheep.$router.go(item.url)"
+          >
+            <view class="menu-box ss-flex ss-flex-col ss-col-center ss-row-center">
+              <view
+                v-if="item.badge.show"
+                class="tag-box"
+                :style="[{ background: item.badge.bgColor, color: item.badge.textColor }]"
+              >
+                {{ item.badge.text }}
+              </view>
+              <image
+                v-if="item.iconUrl"
+                class="menu-icon"
+                :style="[
+                  {
+                    width: props.iconSize + 'rpx',
+                    height: props.iconSize + 'rpx',
+                  },
+                ]"
+                :src="sheep.$url.cdn(item.iconUrl)"
+                mode="aspectFill"
+              ></image>
+              <view
+                v-if="data.layout === 'iconText'"
+                class="menu-title"
+                :style="[{ color: item.titleColor }]"
+              >
+                {{ item.title }}
+              </view>
+            </view>
+          </view>
+        </view>
+      </swiper-item>
+    </swiper>
+    <!-- 指示点 -->
+    <template v-if="menuList.length > 1">
+      <view class="ui-swiper-dot" :class="props.dotStyle" v-if="props.dotStyle != 'tag'">
+        <view
+          class="line-box"
+          v-for="(item, index) in menuList.length"
+          :key="index"
+          :class="[state.cur == index ? 'cur' : '', props.dotCur]"
+        ></view>
+      </view>
+      <view class="ui-swiper-dot" :class="props.dotStyle" v-if="props.dotStyle == 'tag'">
+        <view class="ui-tag radius" :class="[props.dotCur]" style="pointer-events: none">
+          <view style="transform: scale(0.7)">{{ state.cur + 1 }} / {{ menuList.length }}</view>
+        </view>
+      </view>
+    </template>
+  </view>
+</template>
+
+<script setup>
+  /**
+   * 轮播menu
+   *
+   * @property {Boolean} circular = false  		- 是否采用衔接滑动，即播放到末尾后重新回到开头
+   * @property {Boolean} autoplay = true  		- 是否自动切换
+   * @property {Number} interval = 5000  			- 自动切换时间间隔
+   * @property {Number} duration = 500  			- 滑动动画时长,app-nvue不支持
+   * @property {Array} list = [] 					- 轮播数据
+   * @property {String} ui = ''  					- 样式class
+   * @property {String} mode  					- 模式
+   * @property {String} dotStyle  				- 指示点样式
+   * @property {String} dotCur= 'ui-BG-Main' 		- 当前指示点样式,默认主题色
+   * @property {String} bg  						- 背景
+   *
+   * @property {String|Number} col = 4  			- 一行数量
+   *  @property {String|Number} row = 1 			- 几行
+   * @property {String} hasBorder 				- 是否有边框
+   * @property {String} borderColor 				- 边框颜色
+   * @property {String} background		  		- 背景
+   * @property {String} hoverClass 				- 按压样式类
+   * @property {String} hoverStayTime 		  	- 动画时间
+   *
+   * @property {Array} list 		  				- 导航列表
+   * @property {Number} iconSize 		  			- 图标大小
+   * @property {String} color 		  			- 标题颜色
+   *
+   */
+
+  import { reactive, computed } from 'vue';
+  import sheep from '@/sheep';
+
+  // 数据
+  const state = reactive({
+    cur: 0,
+  });
+
+  // 接收参数
+
+  const props = defineProps({
+    data: {
+      type: Object,
+      default() {},
+    },
+    styles: {
+      type: Object,
+      default() {},
+    },
+    circular: {
+      type: Boolean,
+      default: true,
+    },
+    autoplay: {
+      type: Boolean,
+      default: false,
+    },
+    interval: {
+      type: Number,
+      default: 5000,
+    },
+    duration: {
+      type: Number,
+      default: 500,
+    },
+
+    ui: {
+      type: String,
+      default: '',
+    },
+    mode: {
+      //default
+      type: String,
+      default: 'default',
+    },
+    dotStyle: {
+      type: String,
+      default: 'long', //default long tag
+    },
+    dotCur: {
+      type: String,
+      default: 'ui-BG-Main',
+    },
+    bg: {
+      type: String,
+      default: 'bg-none',
+    },
+    height: {
+      type: Number,
+      default: 300,
+    },
+
+    // 是否有边框
+    hasBorder: {
+      type: Boolean,
+      default: true,
+    },
+    // 边框颜色
+    borderColor: {
+      type: String,
+      default: 'red',
+    },
+    background: {
+      type: String,
+      default: 'blue',
+    },
+    hoverClass: {
+      type: String,
+      default: 'ss-hover-class', //'none'为没有hover效果
+    },
+    // 一排宫格数
+    col: {
+      type: [Number, String],
+      default: 3,
+    },
+    iconSize: {
+      type: Number,
+      default: 80,
+    },
+    color: {
+      type: String,
+      default: '#000',
+    },
+  });
+
+  // 生成数据
+  const menuList = computed(() => splitData(props.data.list, props.data.row * props.data.column));
+  const swiperHeight = computed(() => props.data.row * (props.data.layout === 'iconText' ? 200 : 180));
+  const windowWidth = sheep.$platform.device.windowWidth;
+
+  // current 改变时会触发 change 事件
+  const swiperChange = (e) => {
+    state.cur = e.detail.current;
+  };
+
+  // 重组数据
+  const splitData = (oArr = [], length = 1) => {
+    let arr = [];
+    let minArr = [];
+    oArr.forEach((c) => {
+      if (minArr.length === length) {
+        minArr = [];
+      }
+      if (minArr.length === 0) {
+        arr.push(minArr);
+      }
+      minArr.push(c);
+    });
+
+    return arr;
+  };
+</script>
+
+<style lang="scss" scoped>
+  .grid-wrap {
+    width: 100%;
+    display: flex;
+    position: relative;
+    box-sizing: border-box;
+    overflow: hidden;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+  .menu-box {
+    position: relative;
+    z-index: 1;
+    transform: translate(0, 0);
+
+    .tag-box {
+      position: absolute;
+      z-index: 2;
+      top: 0;
+      right: -6rpx;
+      font-size: 2em;
+      line-height: 1;
+      padding: 0.4em 0.6em 0.3em;
+      transform: scale(0.4) translateX(0.5em) translatey(-0.6em);
+      transform-origin: 100% 0;
+      border-radius: 200rpx;
+      white-space: nowrap;
+    }
+
+    .menu-icon {
+      transform: translate(0, 0);
+      width: 80rpx;
+      height: 80rpx;
+      padding-bottom: 10rpx;
+    }
+
+    .menu-title {
+      font-size: 24rpx;
+      color: #333;
+    }
+  }
+
+  ::v-deep(.ui-swiper) {
+    position: relative;
+    z-index: 1;
+
+    .ui-swiper-dot {
+      position: absolute;
+      width: 100%;
+      bottom: 20rpx;
+      height: 30rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 2;
+
+      &.default .line-box {
+        display: inline-flex;
+        border-radius: 50rpx;
+        width: 6px;
+        height: 6px;
+        border: 2px solid transparent;
+        margin: 0 10rpx;
+        opacity: 0.3;
+        position: relative;
+        justify-content: center;
+        align-items: center;
+
+        &.cur {
+          width: 8px;
+          height: 8px;
+          opacity: 1;
+          border: 0px solid transparent;
+        }
+
+        &.cur::after {
+          content: '';
+          border-radius: 50rpx;
+          width: 4px;
+          height: 4px;
+          background-color: #fff;
+        }
+      }
+
+      &.long .line-box {
+        display: inline-block;
+        border-radius: 100rpx;
+        width: 6px;
+        height: 6px;
+        margin: 0 10rpx;
+        opacity: 0.3;
+        position: relative;
+
+        &.cur {
+          width: 24rpx;
+          opacity: 1;
+        }
+
+        &.cur::after {
+        }
+      }
+
+      &.line {
+        bottom: 20rpx;
+
+        .line-box {
+          display: inline-block;
+          width: 30px;
+          height: 3px;
+          opacity: 0.3;
+          position: relative;
+
+          &.cur {
+            opacity: 1;
+          }
+        }
+      }
+
+      &.tag {
+        justify-content: flex-end;
+        position: absolute;
+        bottom: 20rpx;
+        right: 20rpx;
+      }
+    }
+  }
+</style>
diff --git a/sheep/components/s-menu-grid/s-menu-grid.vue b/sheep/components/s-menu-grid/s-menu-grid.vue
new file mode 100644
index 0000000..518d6ed
--- /dev/null
+++ b/sheep/components/s-menu-grid/s-menu-grid.vue
@@ -0,0 +1,82 @@
+<!-- 装修基础组件：宫格导航 -->
+<template>
+  <uni-grid :showBorder="Boolean(data.border)" :column="data.column">
+    <uni-grid-item
+      v-for="(item, index) in data.list"
+      :key="index"
+      @tap="sheep.$router.go(item.url)"
+    >
+      <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
+        <view class="img-box">
+          <view
+            class="tag-box"
+            v-if="item.badge.show"
+            :style="[{ background: item.badge.bgColor, color: item.badge.textColor }]"
+          >
+            {{ item.badge.text }}
+          </view>
+          <image class="menu-image" :src="sheep.$url.cdn(item.iconUrl)"></image>
+        </view>
+
+        <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
+          <view class="grid-text" :style="[{ color: item.titleColor }]">
+            {{ item.title }}
+          </view>
+          <view class="grid-tip" :style="[{ color: item.subtitleColor }]">
+            {{ item.subtitle }}
+          </view>
+        </view>
+      </view>
+    </uni-grid-item>
+  </uni-grid>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+
+  const props = defineProps({
+    data: {
+      type: Object,
+      default() {},
+    },
+  });
+</script>
+
+<style lang="scss" scoped>
+  .menu-image {
+    width: 24px;
+    height: 24px;
+  }
+  .grid-item-box {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    .img-box {
+      position: relative;
+      .tag-box {
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        right: 0;
+        font-size: 2em;
+        line-height: 1;
+        padding: 0.4em 0.6em 0.3em;
+        transform: scale(0.4) translateX(0.5em) translatey(-0.6em);
+        transform-origin: 100% 0;
+        border-radius: 200rpx;
+        white-space: nowrap;
+      }
+    }
+
+    .title-box {
+      .grid-tip {
+        font-size: 24rpx;
+        white-space: nowrap;
+        text-align: center;
+      }
+    }
+  }
+</style>
diff --git a/sheep/components/s-menu-list/s-menu-list.vue b/sheep/components/s-menu-list/s-menu-list.vue
new file mode 100644
index 0000000..ecbb396
--- /dev/null
+++ b/sheep/components/s-menu-list/s-menu-list.vue
@@ -0,0 +1,66 @@
+<!-- 装修基础组件：列表导航 -->
+<template>
+  <view class="menu-list-wrap">
+    <uni-list :border="true">
+      <uni-list-item
+        v-for="(item, index) in data.list"
+        :key="index"
+        showArrow
+        clickable
+        @tap="sheep.$router.go(item.url)"
+      >
+        <template v-slot:header>
+          <view class="ss-flex ss-col-center">
+            <image
+              v-if="item.iconUrl"
+              class="list-icon"
+              :src="sheep.$url.cdn(item.iconUrl)"
+              mode="aspectFit"
+            ></image>
+            <view
+              class="title-text ss-flex ss-row-center ss-col-center ss-m-l-20"
+              :style="[{ color: item.titleColor }]"
+            >
+              {{ item.title }}
+            </view>
+          </view>
+        </template>
+        <template v-slot:footer>
+          <view
+            class="notice-text ss-flex ss-row-center ss-col-center"
+            :style="[{ color: item.subtitleColor }]"
+          >
+            {{ item.subtitle }}
+          </view>
+        </template>
+      </uni-list-item>
+    </uni-list>
+  </view>
+</template>
+
+<script setup>
+  /**
+   * cell
+   */
+  import sheep from '@/sheep';
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+  });
+</script>
+
+<style lang="scss">
+  .list-icon {
+    width: 20px;
+    height: 20px;
+  }
+  .notice-text {
+  }
+  .menu-list-wrap {
+    ::v-deep .uni-list {
+      background-color: transparent;
+    }
+  }
+</style>
diff --git a/sheep/components/s-menu-tools/s-menu-tools.vue b/sheep/components/s-menu-tools/s-menu-tools.vue
new file mode 100644
index 0000000..ee2058c
--- /dev/null
+++ b/sheep/components/s-menu-tools/s-menu-tools.vue
@@ -0,0 +1,118 @@
+<!-- 全局 - 快捷入口 -->
+<template>
+  <su-popup :show="show" type="top" round="20" backgroundColor="#F0F0F0" @close="closeMenuTools">
+    <su-status-bar />
+    <view class="tools-wrap ss-m-x-30 ss-m-b-16">
+      <view class="title ss-m-b-34 ss-p-t-20">快捷菜单</view>
+      <view class="container-list ss-flex ss-flex-wrap">
+        <view class="list-item ss-m-b-24" v-for="item in list" :key="item.title">
+          <view class="ss-flex-col ss-col-center">
+            <button
+              class="ss-reset-button list-image ss-flex ss-row-center ss-col-center"
+              @tap="onClick(item)"
+            >
+              <image v-if="show" :src="sheep.$url.static(item.icon)" class="list-icon" />
+            </button>
+            <view class="list-title ss-m-t-20">{{ item.title }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </su-popup>
+</template>
+
+<script setup>
+  import { reactive, computed } from 'vue';
+  import sheep from '@/sheep';
+  import { showMenuTools, closeMenuTools } from '@/sheep/hooks/useModal';
+
+  const show = computed(() => sheep.$store('modal').menu);
+
+  function onClick(item) {
+    closeMenuTools();
+    if (item.url) sheep.$router.go(item.url);
+  }
+
+  const list = [
+    {
+      url: '/pages/index/index',
+      icon: '/static/img/shop/tools/home.png',
+      title: '首页',
+    },
+    {
+      url: '/pages/index/search',
+      icon: '/static/img/shop/tools/search.png',
+      title: '搜索',
+    },
+    {
+      url: '/pages/index/user',
+      icon: '/static/img/shop/tools/user.png',
+      title: '个人中心',
+    },
+    {
+      url: '/pages/index/cart',
+      icon: '/static/img/shop/tools/cart.png',
+      title: '购物车',
+    },
+    {
+      url: '/pages/user/goods-log',
+      icon: '/static/img/shop/tools/browse.png',
+      title: '浏览记录',
+    },
+    {
+      url: '/pages/user/goods-collect',
+      icon: '/static/img/shop/tools/collect.png',
+      title: '我的收藏',
+    },
+    {
+      url: '/pages/chat/index',
+      icon: '/static/img/shop/tools/service.png',
+      title: '客服',
+    },
+  ];
+</script>
+
+<style lang="scss" scoped>
+  .tools-wrap {
+    // background: #F0F0F0;
+    // box-shadow: 0px 0px 28rpx 7rpx rgba(0, 0, 0, 0.13);
+    // opacity: 0.98;
+    // border-radius: 0 0 20rpx 20rpx;
+
+    .title {
+      font-size: 36rpx;
+      font-weight: bold;
+      color: #333333;
+    }
+
+    .list-item {
+      width: calc(25vw - 20rpx);
+
+      .list-image {
+        width: 104rpx;
+        height: 104rpx;
+        border-radius: 52rpx;
+        background: var(--ui-BG);
+
+        .list-icon {
+          width: 54rpx;
+          height: 54rpx;
+        }
+      }
+
+      .list-title {
+        font-size: 26rpx;
+        font-weight: 500;
+        color: #333333;
+      }
+    }
+  }
+
+  .uni-popup {
+    top: 0 !important;
+  }
+
+  :deep(.button-hover) {
+    background: #fafafa !important;
+  }
+</style>
diff --git a/sheep/components/s-notice-block/s-notice-block.vue b/sheep/components/s-notice-block/s-notice-block.vue
new file mode 100644
index 0000000..e7d74a0
--- /dev/null
+++ b/sheep/components/s-notice-block/s-notice-block.vue
@@ -0,0 +1,38 @@
+<template>
+  <view class="ss-flex ss-col-center notice-wrap">
+    <image class="icon-img" :src="sheep.$url.cdn(data.iconUrl)" mode="heightFix"></image>
+    <!-- todo：@owen 暂时只支持一个公告   -->
+    <su-notice-bar
+      style="flex: 1"
+      :showIcon="false"
+      scrollable
+      single
+      :text="data.contents[0].text"
+      :speed="50"
+      :color="data.textColor"
+      @tap="sheep.$router.go(data.contents[0].url)"
+    />
+  </view>
+</template>
+
+<script setup>
+  /**
+   * 装修组件  - 通知栏
+   *
+   */
+  import sheep from '@/sheep';
+  const props = defineProps({
+    data: {
+      type: Object,
+      default() {},
+    },
+  });
+</script>
+
+<style lang="scss" scoped>
+  .notice-wrap {
+    .icon-img {
+      height: 56rpx;
+    }
+  }
+</style>
diff --git a/sheep/components/s-order-card/s-order-card.vue b/sheep/components/s-order-card/s-order-card.vue
new file mode 100644
index 0000000..095e6cf
--- /dev/null
+++ b/sheep/components/s-order-card/s-order-card.vue
@@ -0,0 +1,108 @@
+<!-- 装修用户组件：用户订单 -->
+<template>
+  <view class="ss-order-menu-wrap ss-flex ss-col-center">
+    <view
+      class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
+      v-for="item in orderMap"
+      :key="item.title"
+      @tap="sheep.$router.go(item.path, { type: item.value })"
+    >
+      <uni-badge
+        class="uni-badge-left-margin"
+        :text="numData.orderCount[item.count]"
+        absolute="rightTop"
+        size="small"
+      >
+        <image class="item-icon" :src="sheep.$url.static(item.icon)" mode="aspectFit" />
+      </uni-badge>
+      <view class="menu-title ss-m-t-28">{{ item.title }}</view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  /**
+   * 装修组件 - 订单菜单组
+   */
+  import sheep from '@/sheep';
+  import { computed } from 'vue';
+
+  const orderMap = [
+    {
+      title: '待付款',
+      value: '1',
+      icon: '/static/img/shop/order/no_pay.png',
+      path: '/pages/order/list',
+      type: 'unpaid',
+      count: 'unpaidCount',
+    },
+    {
+      title: '待收货',
+      value: '3',
+      icon: '/static/img/shop/order/no_take.png',
+      path: '/pages/order/list',
+      type: 'noget',
+      count: 'deliveredCount',
+    },
+    {
+      title: '待评价',
+      value: '4',
+      icon: '/static/img/shop/order/no_comment.png',
+      path: '/pages/order/list',
+      type: 'nocomment',
+      count: 'uncommentedCount',
+    },
+    {
+      title: '售后单',
+      value: '0',
+      icon: '/static/img/shop/order/change_order.png',
+      path: '/pages/order/aftersale/list',
+      type: 'aftersale',
+      count: 'afterSaleCount',
+    },
+    {
+      title: '全部订单',
+      value: '0',
+      icon: '/static/img/shop/order/all_order.png',
+      path: '/pages/order/list',
+    },
+  ];
+
+  const numData = computed(() => sheep.$store('user').numData);
+</script>
+
+<style lang="scss" scoped>
+  .ss-order-menu-wrap {
+    .menu-item {
+      height: 160rpx;
+      position: relative;
+      z-index: 10;
+      .menu-title {
+        font-size: 24rpx;
+        line-height: 24rpx;
+        color: #333333;
+      }
+      .item-icon {
+        width: 44rpx;
+        height: 44rpx;
+      }
+      .num-icon {
+        position: absolute;
+        right: 18rpx;
+        top: 18rpx;
+        // width: 40rpx;
+        padding: 0 8rpx;
+        height: 26rpx;
+        background: #ff4d4f;
+        border-radius: 13rpx;
+        color: #fefefe;
+        display: flex;
+        align-items: center;
+        .num {
+          font-size: 24rpx;
+          transform: scale(0.8);
+        }
+      }
+    }
+  }
+</style>
diff --git a/sheep/components/s-popup-image/s-popup-image.vue b/sheep/components/s-popup-image/s-popup-image.vue
new file mode 100644
index 0000000..b10f477
--- /dev/null
+++ b/sheep/components/s-popup-image/s-popup-image.vue
@@ -0,0 +1,85 @@
+<template>
+  <view>
+    <view v-for="(item, index) in popupList" :key="index">
+      <su-popup
+        v-if="index === currentIndex"
+        :show="item.isShow"
+        type="center"
+        backgroundColor="none"
+        round="0"
+        :showClose="true"
+        :isMaskClick="false"
+        @close="onClose(index)"
+      >
+        <view class="img-box">
+          <image
+            class="modal-img"
+            :src="sheep.$url.cdn(item.imgUrl)"
+            mode="widthFix"
+            @tap.stop="onPopup(item.url)"
+          />
+        </view>
+      </su-popup>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { computed, ref } from 'vue';
+  import { saveAdvHistory } from '@/sheep/hooks/useModal';
+
+  // 定义属性
+  const props = defineProps({
+    data: {
+      type: Object,
+      default() {},
+    }
+  })
+
+  // const modalStore = sheep.$store('modal');
+  const modalStore = JSON.parse(uni.getStorageSync('modal-store') || '{}');
+  console.log(modalStore)
+  const advHistory = modalStore.advHistory || [];
+  const currentIndex = ref(0);
+  const popupList = computed(() => {
+    const list = props.data.list || [];
+    const newList = [];
+    if (list.length > 0) {
+      list.forEach((adv) => {
+        if (adv.showType === 'once' && advHistory.includes(adv.imgUrl)) {
+          adv.isShow = false;
+        } else {
+          adv.isShow = true;
+          newList.push(adv);
+        }
+
+        // 记录弹窗已显示过
+        saveAdvHistory(adv);
+      });
+    }
+    return newList;
+  });
+
+  // 跳转链接
+  function onPopup(path) {
+    sheep.$router.go(path);
+  }
+
+  // 关闭
+  function onClose(index) {
+    currentIndex.value = index + 1;
+    popupList.value[index].isShow = false;
+  }
+</script>
+
+<style lang="scss" scoped>
+  .img-box {
+    width: 610rpx;
+    // height: 800rpx;
+  }
+  .modal-img {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/sheep/components/s-richtext-block/s-richtext-block.vue b/sheep/components/s-richtext-block/s-richtext-block.vue
new file mode 100644
index 0000000..0af1618
--- /dev/null
+++ b/sheep/components/s-richtext-block/s-richtext-block.vue
@@ -0,0 +1,40 @@
+<!-- 装修营销组件：营销文章 -->
+<template>
+  <view
+    :style="[
+      {
+        marginLeft: styles.marginLeft + 'px',
+        marginRight: styles.marginRight + 'px',
+        marginBottom: styles.marginBottom + 'px',
+        marginTop: styles.marginTop + 'px',
+        padding: styles.padding + 'px',
+      },
+    ]"
+  >
+    <mp-html class="richtext" :content="state.content"></mp-html>
+  </view>
+</template>
+<script setup>
+  import { reactive, onMounted } from 'vue';
+  import ArticleApi from '@/api/promotion/article';
+
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: {},
+    },
+    styles: {
+      type: Object,
+      default() {},
+    },
+  });
+
+  const state = reactive({
+    content: '',
+  });
+
+  onMounted(async () => {
+    const { data } = await ArticleApi.getArticle(props.data.id);
+    state.content = data.content;
+  });
+</script>
diff --git a/sheep/components/s-search-block/s-search-block.vue b/sheep/components/s-search-block/s-search-block.vue
new file mode 100644
index 0000000..1e9c2b5
--- /dev/null
+++ b/sheep/components/s-search-block/s-search-block.vue
@@ -0,0 +1,164 @@
+<template>
+  <view
+    class="search-content ss-flex ss-col-center ss-row-between"
+    @tap="click"
+    :style="[
+      {
+        borderRadius: radius + 'px',
+        background: elBackground,
+        height: height + 'px',
+        width: width,
+      },
+    ]"
+    :class="[{ 'border-content': navbar }]"
+  >
+    <view class="ss-flex ss-col-center" v-if="navbar">
+      <view class="search-icon _icon-search ss-m-l-10" :style="[{ color: props.iconColor }]"></view>
+      <view class="search-input ss-flex-1 ss-line-1" :style="[{ color: fontColor, width: width }]">
+        {{ placeholder }}
+      </view>
+    </view>
+    <uni-search-bar
+      v-if="!navbar"
+      class="ss-flex-1"
+      :radius="data.borderRadius"
+      :placeholder="data.placeholder"
+      cancelButton="none"
+      clearButton="none"
+      @confirm="onSearch"
+      v-model="state.searchVal"
+    />
+    <view class="keyword-link ss-flex">
+      <view v-for="(item, index) in data.hotKeywords" :key="index">
+        <view
+          class="ss-m-r-16"
+          :style="[{ color: data.textColor }]"
+          @tap.stop="sheep.$router.go('/pages/goods/list', { keyword: item })"
+          >{{ item }}</view
+        >
+      </view>
+    </view>
+    <view v-if="data.hotKeywords && data.hotKeywords.length && navbar" class="ss-flex">
+      <button
+        class="ss-reset-button keyword-btn"
+        v-for="(item, index) in data.hotKeywords"
+        :key="index"
+        :style="[{ color: data.textColor, marginRight: '10rpx' }]"
+      >
+        {{ item }}
+      </button>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  /**
+   * 基础组件 - 搜索栏
+   *
+   * @property {String} elBackground 			- 输入框背景色
+   * @property {String} iconColor 			- 图标颜色
+   * @property {String} fontColor 		  	- 字体颜色
+   * @property {Number} placeholder 			- 默认placeholder
+   * @property {Number} topRadius 			- 组件上圆角
+   * @property {Number} bottomRadius 			- 组件下圆角
+   *
+   * @slot keywords							- 关键字
+   * @event {Function} click 					- 点击组件时触发
+   */
+
+  import { computed, reactive } from 'vue';
+  import sheep from '@/sheep';
+
+  // 组件数据
+  const state = reactive({
+    searchVal: '',
+  });
+
+  // 事件页面
+  const emits = defineEmits(['click']);
+
+  // 接收参数
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 输入框背景色
+    elBackground: {
+      type: String,
+      default: '',
+    },
+    height: {
+      type: Number,
+      default: 36,
+    },
+    // 图标颜色
+    iconColor: {
+      type: String,
+      default: '#b0b3bf',
+    },
+    // 字体颜色
+    fontColor: {
+      type: String,
+      default: '#b0b3bf',
+    },
+    // placeholder
+    placeholder: {
+      type: String,
+      default: '这是一个搜索框',
+    },
+    radius: {
+      type: Number,
+      default: 10,
+    },
+    width: {
+      type: String,
+      default: '100%',
+    },
+    navbar: {
+      type: Boolean,
+      default: true,
+    },
+  });
+
+  // 点击
+  const click = () => {
+    emits('click');
+  };
+
+  function onSearch(e) {
+    if (e.value) {
+      sheep.$router.go('/pages/goods/list', { keyword: e.value });
+      setTimeout(() => {
+        state.searchVal = '';
+      }, 100);
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .border-content {
+    border: 2rpx solid #eee;
+  }
+
+  .search-content {
+    flex: 1;
+    // height: 80rpx;
+    position: relative;
+
+    .search-icon {
+      font-size: 38rpx;
+      margin-right: 20rpx;
+    }
+
+    .keyword-link {
+      position: absolute;
+      right: 16rpx;
+      top: 18rpx;
+    }
+
+    .search-input {
+      font-size: 28rpx;
+    }
+  }
+</style>
diff --git a/sheep/components/s-seckill-block/s-seckill-block.vue b/sheep/components/s-seckill-block/s-seckill-block.vue
new file mode 100644
index 0000000..6c5eaec
--- /dev/null
+++ b/sheep/components/s-seckill-block/s-seckill-block.vue
@@ -0,0 +1,160 @@
+<!-- 装修组件 - 秒杀 -->
+<template>
+  <view>
+    <!-- 样式一：三列 - 上图下文 -->
+    <view
+      v-if="layoutType === 'threeCol'"
+      class="goods-sm-box ss-flex ss-flex-wrap"
+      :style="[{ margin: '-' + data.space + 'rpx' }]"
+    >
+      <view
+        v-for="product in productList"
+        :key="product.id"
+        class="goods-card-box"
+        :style="[
+          {
+            padding: data.space + 'rpx',
+          },
+        ]"
+      >
+        <s-goods-column
+          class="goods-card"
+          size="sm"
+          :goodsFields="data.fields"
+          :tagStyle="tagStyle"
+          :data="product"
+          :titleColor="data.fields.name?.color"
+          :topRadius="data.borderRadiusTop"
+          :bottomRadius="data.borderRadiusBottom"
+          @click="
+            sheep.$router.go('/pages/goods/seckill', {
+              id: props.data.activityId,
+            })
+          "
+        ></s-goods-column>
+      </view>
+    </view>
+    <!-- 样式二：一列 - 左图右文 -->
+    <view class="goods-box" v-if="layoutType === 'oneCol'">
+      <view
+        class="goods-list"
+        v-for="(product, index) in productList"
+        :key="index"
+        :style="[{ marginBottom: space + 'px' }]"
+      >
+        <s-goods-column
+          class="goods-card"
+          size="lg"
+          :goodsFields="data.fields"
+          :tagStyle="tagStyle"
+          :data="product"
+          :titleColor="data.fields.name?.color"
+          :subTitleColor="data.fields.introduction?.color"
+          :topRadius="data.borderRadiusTop"
+          :bottomRadius="data.borderRadiusBottom"
+          @click="
+            sheep.$router.go('/pages/goods/seckill', {
+              id: props.data.activityId,
+            })
+          "
+        >
+          <template v-slot:cart>
+            <button class="ss-reset-button cart-btn" :style="[buyStyle]">
+              {{ btnBuy?.type === 'text' ? btnBuy.text : '' }}
+            </button>
+          </template>
+        </s-goods-column>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  /**
+   * 秒杀商品列表
+   *
+   * @property {Array} list 商品列表
+   */
+  import { computed, onMounted, ref } from 'vue';
+  import sheep from '@/sheep';
+  import SeckillApi from "@/api/promotion/seckill";
+  import SpuApi from "@/api/product/spu";
+
+  // 接收参数
+  const props = defineProps({
+    data: {
+      type: Object,
+      default() {},
+    },
+    styles: {
+      type: Object,
+      default() {},
+    },
+  });
+
+  let { layoutType, tagStyle, btnBuy, space } = props.data;
+  let { marginLeft, marginRight } = props.styles;
+
+  // 购买按钮样式
+  const buyStyle = computed(() => {
+    let btnBuy = props.data.btnBuy;
+    if (btnBuy?.type === 'text') {
+      return {
+        background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
+      };
+    }
+    if (btnBuy?.type === 'img') {
+      return {
+        width: '54rpx',
+        height: '54rpx',
+        background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,
+        backgroundSize: '100% 100%',
+      };
+    }
+  });
+
+  // 商品列表
+  const productList = ref([]);
+  // 查询秒杀活动商品
+  onMounted(async () => {
+    // todo：@owen 与Yudao结构不一致，待重构
+    const { data: activity } = await SeckillApi.getSeckillActivity(props.data.activityId);
+    const { data: spu } = await SpuApi.getSpuDetail(activity.spuId)
+    productList.value = [spu];
+  });
+</script>
+
+<style lang="scss" scoped>
+  .header-box {
+    height: 100rpx;
+  }
+
+  .goods-list {
+    position: relative;
+    &:nth-last-child(1) {
+      margin-bottom: 0 !important;
+    }
+    .cart-btn {
+      position: absolute;
+      bottom: 10rpx;
+      right: 20rpx;
+      z-index: 11;
+      height: 50rpx;
+      line-height: 50rpx;
+      padding: 0 20rpx;
+      border-radius: 25rpx;
+      font-size: 24rpx;
+      color: #fff;
+    }
+  }
+  .goods-sm-box {
+    margin: 0 auto;
+    box-sizing: border-box;
+    .goods-card-box {
+      flex-shrink: 0;
+      overflow: hidden;
+      width: 33.3%;
+      box-sizing: border-box;
+    }
+  }
+</style>
diff --git a/sheep/components/s-select-groupon-sku/s-select-groupon-sku.vue b/sheep/components/s-select-groupon-sku/s-select-groupon-sku.vue
new file mode 100644
index 0000000..e2a2950
--- /dev/null
+++ b/sheep/components/s-select-groupon-sku/s-select-groupon-sku.vue
@@ -0,0 +1,472 @@
+<template>
+  <!-- 拼团商品规格弹窗 -->
+  <su-popup :show="show" round="10" @close="emits('close')">
+    <!-- SKU 信息 -->
+    <view class="ss-modal-box bg-white ss-flex-col">
+      <view class="modal-header ss-flex ss-col-center">
+        <view class="header-left ss-m-r-30">
+          <image class="sku-image" :src="sheep.$url.cdn(state.selectedSku.picUrl || goodsInfo.picUrl)" mode="aspectFill" />
+        </view>
+        <view class="header-right ss-flex-col ss-row-between ss-flex-1">
+          <view class="goods-title ss-line-2">
+            <view class="tig ss-flex ss-col-center">
+              <view class="tig-icon ss-flex ss-col-center ss-row-center">
+                <view class="groupon-tag">
+                  <image :src="sheep.$url.static('/static/img/shop/goods/groupon-tag-white.png')" />
+                </view>
+              </view>
+              <view class="tig-title">拼团价</view>
+            </view>
+            <view class="info-title">
+              {{ goodsInfo.name }}
+            </view>
+          </view>
+          <view class="header-right-bottom ss-flex ss-col-center ss-row-between">
+            <view class="price-text"> {{ fen2yuan(goodsInfo.price) }}</view>
+
+            <view class="stock-text ss-m-l-20">
+              库存{{ state.selectedSku.stock || goodsInfo.stock }}件
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="modal-content ss-flex-1">
+        <scroll-view scroll-y="true" class="modal-content-scroll">
+          <view class="sku-item ss-m-b-20" v-for="property in propertyList" :key="property.id">
+            <view class="label-text ss-m-b-20">{{ property.name }}</view>
+            <view class="ss-flex ss-col-center ss-flex-wrap">
+              <button class="ss-reset-button spec-btn" v-for="value in property.values" :class="[
+                  {
+                    'checked-btn': state.currentPropertyArray[property.id] === value.id,
+                  },
+                  {
+                    'disabled-btn': value.disabled === true,
+                  },
+                ]" :key="value.id" :disabled="value.disabled === true" @tap="onSelectSku(property.id, value.id)">
+                {{ value.name }}
+              </button>
+            </view>
+          </view>
+          <view class="buy-num-box ss-flex ss-col-center ss-row-between">
+            <view class="label-text">购买数量</view>
+            <su-number-box :min="1" :max="state.selectedSku.stock" :step="1"
+                           v-model="state.selectedSku.count" @change="onNumberChange($event)" activity="groupon" />
+          </view>
+        </scroll-view>
+      </view>
+
+      <!-- 操作区 -->
+      <view class="modal-footer ss-p-y-20">
+        <view class="buy-box ss-flex ss-col-center ss-flex ss-col-center ss-row-center">
+          <view class="ss-flex">
+            <button class="ss-reset-button origin-price-btn ss-flex-col">
+              <view class="btn-title">{{ grouponNum + '人团' }}</view>
+            </button>
+            <button class="ss-reset-button btn-tox ss-flex-col" @tap="onBuy">
+              <view class="btn-price">{{ fen2yuan(goodsInfo.price) }}</view>
+              <view v-if="grouponAction === 'create'">立即开团</view>
+              <view v-else-if="grouponAction === 'join'">参与拼团</view>
+            </button>
+          </view>
+        </view>
+      </view>
+    </view>
+  </su-popup>
+</template>
+
+<script setup>
+  import { computed, reactive, watch } from 'vue';
+  import sheep from '@/sheep';
+  import {convertProductPropertyList, fen2yuan} from '@/sheep/hooks/useGoods';
+
+  const headerBg = sheep.$url.css('/static/img/shop/goods/groupon-btn-long.png');
+  const emits = defineEmits(['change', 'addCart', 'buy', 'close', 'ladder']);
+  const props = defineProps({
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    goodsInfo: {
+      type: Object,
+      default () {},
+    },
+    grouponAction: {
+      type: String,
+      default: 'create',
+    },
+    grouponNum: {
+      type: [Number, String],
+      default: 0,
+    },
+  });
+  const state = reactive({
+    selectedSku: {}, // 选中的 SKU
+    currentPropertyArray: [], // 当前选中的属性，实际是个 Map。key 是 property 编号，value 是 value 编号
+    grouponNum: props.grouponNum,
+  });
+
+  const propertyList = convertProductPropertyList(props.goodsInfo.skus);
+
+  // SKU 列表
+  const skuList = computed(() => {
+    let skuPrices = props.goodsInfo.skus;
+    for (let price of skuPrices) {
+      price.value_id_array = price.properties.map((item) => item.valueId)
+    }
+    return skuPrices;
+  });
+
+  watch(
+    () => state.selectedSku,
+    (newVal) => {
+      emits('change', newVal);
+    }, {
+      immediate: true, // 立即执行
+      deep: true, // 深度监听
+    },
+  );
+
+  // 输入框改变数量
+  function onNumberChange(e) {
+    if (e === 0) return;
+    if (state.selectedSku.count === e) return;
+    state.selectedSku.count = e;
+  }
+
+  // 点击购买
+  function onBuy() {
+    if (!state.selectedSku.id || state.selectedSku.id <= 0) {
+      sheep.$helper.toast('请选择规格');
+      return;
+    }
+    if (state.selectedSku.stock <= 0) {
+      sheep.$helper.toast('库存不足');
+      return;
+    }
+    emits('buy', state.selectedSku);
+  }
+
+  // 改变禁用状态：计算每个 property 属性值的按钮，是否禁用
+  function changeDisabled(isChecked = false, propertyId = 0, valueId = 0) {
+    let newSkus = []; // 所有可以选择的 sku 数组
+    if (isChecked) {
+      // 情况一：选中 property
+      // 获得当前点击选中 property 的、所有可用 SKU
+      for (let price of skuList.value) {
+        if (price.stock <= 0) {
+          continue;
+        }
+        if (price.value_id_array.indexOf(valueId) >= 0) {
+          newSkus.push(price);
+        }
+      }
+    } else {
+      // 情况二：取消选中 property
+      // 当前所选 property 下，所有可以选择的 SKU
+      newSkus = getCanUseSkuList();
+    }
+
+    // 所有存在并且有库存未选择的 SKU 的 value 属性值 id
+    let noChooseValueIds = [];
+    for (let price of newSkus) {
+      noChooseValueIds = noChooseValueIds.concat(price.value_id_array);
+    }
+    noChooseValueIds = Array.from(new Set(noChooseValueIds)); // 去重
+
+    if (isChecked) {
+      // 去除当前选中的 value 属性值 id
+      let index = noChooseValueIds.indexOf(valueId);
+      noChooseValueIds.splice(index, 1);
+    } else {
+      // 循环去除当前已选择的 value 属性值 id
+      state.currentPropertyArray.forEach((currentPropertyId) => {
+        if (currentPropertyId.toString() !== '') {
+          return;
+        }
+        // currentPropertyId 为空是反选 填充的
+        let index = noChooseValueIds.indexOf(currentPropertyId);
+        if (index >= 0) {
+          // currentPropertyId 存在于 noChooseValueIds
+          noChooseValueIds.splice(index, 1);
+        }
+      });
+    }
+
+    // 当前已选择的 property 数组
+    let choosePropertyIds = [];
+    if (!isChecked) {
+      // 当前已选择的 property
+      state.currentPropertyArray.forEach((currentPropertyId, currentValueId) => {
+        if (currentPropertyId !== '') {
+          // currentPropertyId 为空是反选 填充的
+          choosePropertyIds.push(currentValueId);
+        }
+      });
+    } else {
+      // 当前点击选择的 property
+      choosePropertyIds = [propertyId];
+    }
+
+    for (let propertyIndex in propertyList) {
+      // 当前点击的 property、或者取消选择时候，已选中的 property 不进行处理
+      if (choosePropertyIds.indexOf(propertyList[propertyIndex]['id']) >= 0) {
+        continue;
+      }
+      // 如果当前 property id 不存在于有库存的 SKU 中，则禁用
+      for (let valueIndex in propertyList[propertyIndex]['values']) {
+        propertyList[propertyIndex]['values'][valueIndex]['disabled'] =
+            noChooseValueIds.indexOf(propertyList[propertyIndex]['values'][valueIndex]['id']) < 0; // true 禁用 or false 不禁用
+      }
+    }
+  }
+
+  // 当前所选属性下，获取所有有库存的 SKU 们
+  function getCanUseSkuList() {
+    let newSkus = [];
+    for (let sku of skuList.value) {
+      if (sku.stock <= 0) {
+        continue;
+      }
+      let isOk = true;
+      state.currentPropertyArray.forEach((propertyId) => {
+        // propertyId 不为空，并且，这个 条 sku 没有被选中，则排除
+        if (propertyId.toString() !== '' && sku.value_id_array.indexOf(propertyId) < 0) {
+          isOk = false;
+        }
+      });
+      if (isOk) {
+        newSkus.push(sku);
+      }
+    }
+    return newSkus;
+  }
+
+  // 选择规格
+  function onSelectSku(propertyId, valueId) {
+    // 清空已选择
+    let isChecked = true; // 选中 or 取消选中
+    if (state.currentPropertyArray[propertyId] !== undefined && state.currentPropertyArray[propertyId] === valueId) {
+      // 点击已被选中的，删除并填充 ''
+      isChecked = false;
+      state.currentPropertyArray.splice(propertyId, 1, '');
+    } else {
+      // 选中
+      state.currentPropertyArray[propertyId] = valueId;
+    }
+
+    // 选中的 property 大类
+    let choosePropertyId = [];
+    state.currentPropertyArray.forEach((currentPropertyId) => {
+      if (currentPropertyId !== '') {
+        // currentPropertyId 为空是反选 填充的
+        choosePropertyId.push(currentPropertyId);
+      }
+    });
+
+    // 当前所选 property 下，所有可以选择的 SKU 们
+    let newSkuList = getCanUseSkuList();
+
+    // 判断所有 property 大类是否选择完成
+    if (choosePropertyId.length === propertyList.length && newSkuList.length) {
+      newSkuList[0].count = state.selectedSku.count || 1;
+      state.selectedSku = newSkuList[0];
+    } else {
+      state.selectedSku = {};
+    }
+
+    // 改变 property 禁用状态
+    changeDisabled(isChecked, propertyId, valueId);
+  }
+
+  changeDisabled(false);
+  // TODO 芋艿：待讨论的优化点：1）单规格，要不要默认选中；2）默认要不要选中第一个规格
+</script>
+
+<style lang="scss" scoped>
+  // 购买
+  .buy-btn {
+    margin: 0 20rpx;
+    width: 100%;
+    height: 80rpx;
+    border-radius: 40rpx;
+    background: linear-gradient(90deg, #ff6000, #fe832a);
+    color: #fff;
+  }
+  .btn-tox {
+    width: 382rpx;
+    height: 80rpx;
+    font-size: 24rpx;
+    font-weight: 600;
+    margin-left: -50rpx;
+    background-image: v-bind(headerBg);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    color: #ffffff;
+    line-height: normal;
+    border-radius: 0px 40rpx 40rpx 0px;
+
+    .btn-price {
+      font-family: OPPOSANS;
+
+      &::before {
+        content: '￥';
+      }
+    }
+  }
+  .origin-price-btn {
+    width: 370rpx;
+    height: 80rpx;
+    background: rgba(#ff5651, 0.1);
+    color: #ff6000;
+    border-radius: 40rpx 0px 0px 40rpx;
+    line-height: normal;
+    font-size: 24rpx;
+    font-weight: 500;
+
+    .btn-price {
+      font-family: OPPOSANS;
+
+      &::before {
+        content: '￥';
+      }
+    }
+
+    .btn-title {
+      font-size: 28rpx;
+    }
+  }
+
+  .ss-modal-box {
+    border-radius: 30rpx 30rpx 0 0;
+    max-height: 1000rpx;
+
+    .modal-header {
+      position: relative;
+      padding: 80rpx 20rpx 40rpx;
+
+      .sku-image {
+        width: 160rpx;
+        height: 160rpx;
+        border-radius: 10rpx;
+      }
+
+      .header-right {
+        height: 160rpx;
+      }
+
+      .close-icon {
+        position: absolute;
+        top: 10rpx;
+        right: 20rpx;
+        font-size: 46rpx;
+        opacity: 0.2;
+      }
+
+      .goods-title {
+        font-size: 28rpx;
+        font-weight: 500;
+        line-height: 42rpx;
+        position: relative;
+        .tig {
+          border: 2rpx solid #ff6000;
+          border-radius: 4rpx;
+          width: 126rpx;
+          height: 38rpx;
+          position: absolute;
+          left: 0;
+          top: 0;
+
+          .tig-icon {
+            width: 40rpx;
+            height: 40rpx;
+            background: #ff6000;
+            margin-left: -2rpx;
+            border-radius: 4rpx 0 0 4rpx;
+
+            .groupon-tag {
+              width: 32rpx;
+              height: 32rpx;
+            }
+          }
+
+          .tig-title {
+            font-size: 24rpx;
+            font-weight: 500;
+            line-height: normal;
+            color: #ff6000;
+            width: 86rpx;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+        }
+        .info-title {
+          text-indent: 132rpx;
+        }
+      }
+
+      .price-text {
+        font-size: 30rpx;
+        font-weight: 500;
+        color: $red;
+        font-family: OPPOSANS;
+
+        &::before {
+          content: '￥';
+          font-size: 24rpx;
+        }
+      }
+
+      .stock-text {
+        font-size: 26rpx;
+        color: #999999;
+      }
+    }
+
+    .modal-content {
+      padding: 0 20rpx;
+
+      .modal-content-scroll {
+        max-height: 600rpx;
+
+        .label-text {
+          font-size: 26rpx;
+          font-weight: 500;
+        }
+
+        .buy-num-box {
+          height: 100rpx;
+        }
+
+        .spec-btn {
+          height: 60rpx;
+          min-width: 100rpx;
+          padding: 0 30rpx;
+          background: #f4f4f4;
+          border-radius: 30rpx;
+          color: #434343;
+          font-size: 26rpx;
+          margin-right: 10rpx;
+          margin-bottom: 10rpx;
+        }
+
+        .checked-btn {
+          background: linear-gradient(90deg, #ff6000, #fe832a);
+          font-weight: 500;
+          color: #ffffff;
+        }
+
+        .disabled-btn {
+          font-weight: 400;
+          color: #c6c6c6;
+          background: #f8f8f8;
+        }
+      }
+    }
+  }
+
+  image {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/sheep/components/s-select-seckill-sku/s-select-seckill-sku.vue b/sheep/components/s-select-seckill-sku/s-select-seckill-sku.vue
new file mode 100644
index 0000000..1764035
--- /dev/null
+++ b/sheep/components/s-select-seckill-sku/s-select-seckill-sku.vue
@@ -0,0 +1,432 @@
+<!-- 秒杀商品的 SKU 选择，和 s-select-sku.vue 类似 -->
+<template>
+	<!-- 规格弹窗 -->
+	<su-popup :show="show" round="10" @close="emits('close')">
+		<!-- SKU 信息 -->
+		<view class="ss-modal-box bg-white ss-flex-col">
+			<view class="modal-header ss-flex ss-col-center">
+				<!-- 规格图 -->
+				<view class="header-left ss-m-r-30">
+					<image
+						class="sku-image"
+						:src="sheep.$url.cdn(state.selectedSku.picUrl || state.goodsInfo.picUrl)"
+						mode="aspectFill"
+					>
+					</image>
+				</view>
+				<view class="header-right ss-flex-col ss-row-between ss-flex-1">
+					<!-- 名称 -->
+					<view class="goods-title ss-line-2">{{ state.goodsInfo.name }}</view>
+					<view class="header-right-bottom ss-flex ss-col-center ss-row-between">
+						<!-- 价格 -->
+						<view class="price-text">
+							{{ fen2yuan(state.selectedSku.price || state.goodsInfo.price) }}
+						</view>
+						<!-- 秒杀价格标签 -->
+						<view class="tig ss-flex ss-col-center">
+							<view class="tig-icon ss-flex ss-col-center ss-row-center">
+	              <text class="cicon-alarm"></text>
+              </view>
+              <view class="tig-title">秒杀价</view>
+            </view>
+            <!-- 库存 -->
+            <view class="stock-text ss-m-l-20">
+              库存{{ state.selectedSku.stock || state.goodsInfo.stock }}件
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="modal-content ss-flex-1">
+        <scroll-view scroll-y="true" class="modal-content-scroll">
+          <view class="sku-item ss-m-b-20" v-for="property in propertyList" :key="property.id">
+            <view class="label-text ss-m-b-20">{{ property.name }}</view>
+            <view class="ss-flex ss-col-center ss-flex-wrap">
+              <button
+                class="ss-reset-button spec-btn"
+                v-for="value in property.values"
+                :class="[
+                  {
+                    'checked-btn': state.currentPropertyArray[property.id] === value.id,
+                  },
+                  {
+                    'disabled-btn': value.disabled === true,
+                  },
+                ]"
+                :key="value.id"
+                :disabled="value.disabled === true"
+                @tap="onSelectSku(property.id, value.id)"
+              >
+                {{ value.name }}
+              </button>
+            </view>
+          </view>
+          <view class="buy-num-box ss-flex ss-col-center ss-row-between">
+            <view class="label-text">购买数量</view>
+            <su-number-box
+              :min="1"
+              :max="min([singleLimitCount, state.selectedSku.stock])"
+              :step="1"
+              v-model="state.selectedSku.count"
+              @change="onBuyCountChange($event)"
+              activity="seckill"
+            ></su-number-box>
+          </view>
+        </scroll-view>
+      </view>
+      <view class="modal-footer">
+        <view class="buy-box ss-flex ss-col-center ss-flex ss-col-center ss-row-center">
+          <button class="ss-reset-button buy-btn" @tap="onBuy">确认</button>
+        </view>
+      </view>
+    </view>
+  </su-popup>
+</template>
+
+<script setup>
+  /**
+   * 秒杀活动SKU选择，
+   * 与s-select-sku的区别：多一个秒杀价的标签、没有加入购物车按钮、立即购买按钮叫确认、秒杀有最大购买数量限制
+   * 差别不大，可以考虑合并 todo @芋艿
+   */
+  // 按钮状态： active,nostock
+  import { computed, reactive, watch } from 'vue';
+  import sheep from '@/sheep';
+  import {convertProductPropertyList, fen2yuan} from "@/sheep/hooks/useGoods";
+  import {min} from "lodash";
+  const emits = defineEmits(['change', 'addCart', 'buy', 'close']);
+  const props = defineProps({
+    modelValue: {
+      type: Object,
+      default() {},
+    },
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    // 单次限购数量
+    singleLimitCount: {
+      type: Number,
+      default: 1,
+    }
+  });
+  const state = reactive({
+    goodsInfo: computed(() => props.modelValue),
+    selectedSku: {},
+    currentPropertyArray: [],
+  });
+
+  const propertyList = convertProductPropertyList(state.goodsInfo.skus);
+  // SKU 列表
+  const skuList = computed(() => {
+    let skuPrices = state.goodsInfo.skus;
+    for (let price of skuPrices) {
+      price.value_id_array = price.properties.map((item) => item.valueId)
+    }
+    return skuPrices;
+  });
+
+  if (!state.goodsInfo.is_sku) {
+    state.selectedSku = state.goodsInfo.skus[0];
+  }
+
+  watch(
+    () => state.selectedSku,
+    (newVal) => {
+      emits('change', newVal);
+    },
+    {
+      immediate: true, // 立即执行
+      deep: true, // 深度监听
+    },
+  );
+
+  const onBuy = () => {
+    if (state.selectedSku.id) {
+      if (state.selectedSku.stock <= 0) {
+        sheep.$helper.toast('库存不足');
+      } else {
+        emits('buy', state.selectedSku);
+      }
+    } else {
+      sheep.$helper.toast('请选择规格');
+    }
+  };
+
+  // 购买数量改变
+  function onBuyCountChange(buyCount) {
+    if (buyCount > 0 && state.selectedSku.count !== buyCount) {
+      state.selectedSku.count = buyCount;
+    }
+  }
+
+  // 改变禁用状态
+  const changeDisabled = (isChecked = false, propertyId = 0, valueId = 0) => {
+    let newSkus = []; // 所有可以选择的 sku 数组
+    if (isChecked) {
+      // 情况一：选中 property
+      // 获得当前点击选中 property 的、所有可用 SKU
+      for (let price of skuList.value) {
+        if (price.stock <= 0) {
+          continue;
+        }
+        if (price.value_id_array.indexOf(valueId) >= 0) {
+          newSkus.push(price);
+        }
+      }
+    } else {
+      // 情况二：取消选中 property
+      // 当前所选 property 下，所有可以选择的 SKU
+      newSkus = getCanUseSkuList();
+    }
+
+    // 所有存在并且有库存未选择的 SKU 的 value 属性值 id
+    let noChooseValueIds = [];
+    for (let price of newSkus) {
+      noChooseValueIds = noChooseValueIds.concat(price.value_id_array);
+    }
+    noChooseValueIds = Array.from(new Set(noChooseValueIds)); // 去重
+
+    if (isChecked) {
+      // 去除当前选中的 value 属性值 id
+      let index = noChooseValueIds.indexOf(valueId);
+      noChooseValueIds.splice(index, 1);
+    } else {
+      // 循环去除当前已选择的 value 属性值 id
+      state.currentPropertyArray.forEach((currentPropertyId) => {
+        if (currentPropertyId.toString() !== '') {
+          return;
+        }
+        // currentPropertyId 为空是反选 填充的
+        let index = noChooseValueIds.indexOf(currentPropertyId);
+        if (index >= 0) {
+          // currentPropertyId 存在于 noChooseValueIds
+          noChooseValueIds.splice(index, 1);
+        }
+      });
+    }
+
+    // 当前已选择的 property 数组
+    let choosePropertyIds = [];
+    if (!isChecked) {
+      // 当前已选择的 property
+      state.currentPropertyArray.forEach((currentPropertyId, currentValueId) => {
+        if (currentPropertyId !== '') {
+          // currentPropertyId 为空是反选 填充的
+          choosePropertyIds.push(currentValueId);
+        }
+      });
+    } else {
+      // 当前点击选择的 property
+      choosePropertyIds = [propertyId];
+    }
+
+    for (let propertyIndex in propertyList) {
+      // 当前点击的 property、或者取消选择时候，已选中的 property 不进行处理
+      if (choosePropertyIds.indexOf(propertyList[propertyIndex]['id']) >= 0) {
+        continue;
+      }
+      // 如果当前 property id 不存在于有库存的 SKU 中，则禁用
+      for (let valueIndex in propertyList[propertyIndex]['values']) {
+        propertyList[propertyIndex]['values'][valueIndex]['disabled'] =
+            noChooseValueIds.indexOf(propertyList[propertyIndex]['values'][valueIndex]['id']) < 0; // true 禁用 or false 不禁用
+      }
+    }
+  };
+
+  // 获取可用的（有库存的）SKU 列表
+  const getCanUseSkuList = () => {
+    let newSkus = [];
+    for (let sku of skuList.value) {
+      if (sku.stock <= 0) {
+        continue;
+      }
+      let isOk = true;
+      state.currentPropertyArray.forEach((propertyId) => {
+        // propertyId 不为空，并且，这个 条 sku 没有被选中，则排除
+        if (propertyId.toString() !== '' && sku.value_id_array.indexOf(propertyId) < 0) {
+          isOk = false;
+        }
+      });
+      if (isOk) {
+        newSkus.push(sku);
+      }
+    }
+    return newSkus;
+  };
+
+  // 选择规格
+  const onSelectSku = (propertyId, valueId) => {
+    // 清空已选择
+    let isChecked = true; // 选中 or 取消选中
+    if (state.currentPropertyArray[propertyId] !== undefined && state.currentPropertyArray[propertyId] === valueId) {
+      // 点击已被选中的，删除并填充 ''
+      isChecked = false;
+      state.currentPropertyArray.splice(propertyId, 1, '');
+    } else {
+      // 选中
+      state.currentPropertyArray[propertyId] = valueId;
+    }
+
+    // 选中的 property 大类
+    let choosePropertyId = [];
+    state.currentPropertyArray.forEach((currentPropertyId) => {
+      if (currentPropertyId !== '') {
+        // currentPropertyId 为空是反选 填充的
+        choosePropertyId.push(currentPropertyId);
+      }
+    });
+
+    // 当前所选 property 下，所有可以选择的 SKU 们
+    let newSkuList = getCanUseSkuList();
+
+    // 判断所有 property 大类是否选择完成
+    if (choosePropertyId.length === propertyList.length && newSkuList.length) {
+      newSkuList[0].count = state.selectedSku.count || 1;
+      state.selectedSku = newSkuList[0];
+    } else {
+      state.selectedSku = {};
+    }
+
+    // 改变 property 禁用状态
+    changeDisabled(isChecked, propertyId, valueId);
+  };
+
+  changeDisabled(false);
+</script>
+
+<style lang="scss" scoped>
+  // 购买
+  .buy-box {
+    padding: 10rpx 20rpx;
+
+    .buy-btn {
+      width: 100%;
+      height: 80rpx;
+      border-radius: 40rpx;
+      background: linear-gradient(90deg, #ff5854, #ff2621);
+      color: #fff;
+    }
+  }
+
+  .ss-modal-box {
+    border-radius: 30rpx 30rpx 0 0;
+    max-height: 1000rpx;
+
+    .modal-header {
+      position: relative;
+      padding: 80rpx 20rpx 40rpx;
+
+      .sku-image {
+        width: 160rpx;
+        height: 160rpx;
+        border-radius: 10rpx;
+      }
+
+      .header-right {
+        height: 160rpx;
+      }
+
+      .close-icon {
+        position: absolute;
+        top: 10rpx;
+        right: 20rpx;
+        font-size: 46rpx;
+        opacity: 0.2;
+      }
+
+      .goods-title {
+        font-size: 28rpx;
+        font-weight: 500;
+        line-height: 42rpx;
+      }
+
+      .price-text {
+        font-size: 30rpx;
+        font-weight: 500;
+        color: $red;
+        font-family: OPPOSANS;
+
+        &::before {
+          content: '￥';
+          font-size: 24rpx;
+        }
+      }
+
+      .stock-text {
+        font-size: 26rpx;
+        color: #999999;
+      }
+    }
+
+    .modal-content {
+      padding: 0 20rpx;
+
+      .modal-content-scroll {
+        max-height: 600rpx;
+
+        .label-text {
+          font-size: 26rpx;
+          font-weight: 500;
+        }
+
+        .buy-num-box {
+          height: 100rpx;
+        }
+
+        .spec-btn {
+          height: 60rpx;
+          min-width: 100rpx;
+          padding: 0 30rpx;
+          background: #f4f4f4;
+          border-radius: 30rpx;
+          color: #434343;
+          font-size: 26rpx;
+          margin-right: 10rpx;
+          margin-bottom: 10rpx;
+        }
+
+        .checked-btn {
+          background: linear-gradient(90deg, #ff5854, #ff2621);
+          font-weight: 500;
+          color: #ffffff;
+        }
+
+        .disabled-btn {
+          font-weight: 400;
+          color: #c6c6c6;
+          background: #f8f8f8;
+        }
+      }
+    }
+  }
+
+  .tig {
+    border: 2rpx solid #ff5854;
+    border-radius: 4rpx;
+    width: 126rpx;
+    height: 38rpx;
+
+    .tig-icon {
+      width: 40rpx;
+      height: 40rpx;
+      background: #ff5854;
+      border-radius: 4rpx 0 0 4rpx;
+
+      .cicon-alarm {
+        font-size: 32rpx;
+        color: #fff;
+      }
+    }
+
+    .tig-title {
+      font-size: 24rpx;
+      font-weight: 500;
+      line-height: normal;
+      color: #ff6000;
+      width: 86rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+</style>
diff --git a/sheep/components/s-select-sku/s-select-sku.vue b/sheep/components/s-select-sku/s-select-sku.vue
new file mode 100644
index 0000000..b339d4a
--- /dev/null
+++ b/sheep/components/s-select-sku/s-select-sku.vue
@@ -0,0 +1,406 @@
+<template>
+	<!-- 规格弹窗 -->
+	<su-popup :show="show" round="10" @close="emits('close')">
+    <!-- SKU 信息 -->
+		<view class="ss-modal-box bg-white ss-flex-col">
+			<view class="modal-header ss-flex ss-col-center">
+				<view class="header-left ss-m-r-30">
+					<image class="sku-image" :src="state.selectedSku.picUrl || goodsInfo.picUrl" mode="aspectFill" />
+				</view>
+				<view class="header-right ss-flex-col ss-row-between ss-flex-1">
+					<view class="goods-title ss-line-2">{{ goodsInfo.name }}</view>
+					<view class="header-right-bottom ss-flex ss-col-center ss-row-between">
+						<view class="ss-flex">
+							<view class="price-text">
+								{{ fen2yuan( state.selectedSku.price || goodsInfo.price) }}
+							</view>
+						</view>
+						<view class="stock-text ss-m-l-20">
+							{{ formatStock('exact', state.selectedSku.stock || goodsInfo.stock) }}
+						</view>
+					</view>
+				</view>
+			</view>
+
+      <!-- 属性选择 -->
+			<view class="modal-content ss-flex-1">
+				<scroll-view scroll-y="true" class="modal-content-scroll" @touchmove.stop>
+					<view class="sku-item ss-m-b-20" v-for="property in propertyList" :key="property.id">
+						<view class="label-text ss-m-b-20">{{ property.name }}</view>
+						<view class="ss-flex ss-col-center ss-flex-wrap">
+							<button class="ss-reset-button spec-btn" v-for="value in property.values" :class="[
+                  {
+                    'ui-BG-Main-Gradient': state.currentPropertyArray[property.id] === value.id,
+                  },
+                  {
+                    'disabled-btn': value.disabled === true,
+                  },
+                ]" :key="value.id" :disabled="value.disabled === true" @tap="onSelectSku(property.id, value.id)">
+								{{ value.name }}
+							</button>
+						</view>
+					</view>
+					<view class="buy-num-box ss-flex ss-col-center ss-row-between ss-m-b-40">
+						<view class="label-text">购买数量</view>
+						<su-number-box :min="1" :max="state.selectedSku.stock" :step="1"
+                           v-model="state.selectedSku.goods_num" @change="onNumberChange($event)" />
+					</view>
+				</scroll-view>
+			</view>
+
+      <!-- 操作区 -->
+			<view class="modal-footer border-top">
+				<view class="buy-box ss-flex ss-col-center ss-flex ss-col-center ss-row-center">
+					<button class="ss-reset-button add-btn ui-Shadow-Main" @tap="onAddCart">加入购物车</button>
+					<button class="ss-reset-button buy-btn ui-Shadow-Main" @tap="onBuy">立即购买</button>
+				</view>
+			</view>
+		</view>
+	</su-popup>
+</template>
+
+<script setup>
+	import { computed, reactive, watch } from 'vue';
+	import sheep from '@/sheep';
+  import { formatStock, convertProductPropertyList, fen2yuan } from '@/sheep/hooks/useGoods';
+
+	const emits = defineEmits(['change', 'addCart', 'buy', 'close']);
+	const props = defineProps({
+		goodsInfo: {
+			type: Object,
+			default () {},
+		},
+		show: {
+			type: Boolean,
+			default: false,
+		}
+	});
+
+	const state = reactive({
+		selectedSku: {}, // 选中的 SKU
+		currentPropertyArray: [], // 当前选中的属性，实际是个 Map。key 是 property 编号，value 是 value 编号
+	});
+
+	const propertyList = convertProductPropertyList(props.goodsInfo.skus);
+
+	// SKU 列表
+	const skuList = computed(() => {
+		let skuPrices = props.goodsInfo.skus;
+    for (let price of skuPrices) {
+      price.value_id_array = price.properties.map((item) => item.valueId)
+    }
+		return skuPrices;
+	});
+
+	watch(
+		() => state.selectedSku,
+		(newVal) => {
+			emits('change', newVal);
+		}, {
+			immediate: true, // 立即执行
+			deep: true, // 深度监听
+		},
+	);
+
+  // 输入框改变数量
+  function onNumberChange(e) {
+    if (e === 0) return;
+    if (state.selectedSku.goods_num === e) return;
+    state.selectedSku.goods_num = e;
+  }
+
+  // 加入购物车
+	function onAddCart() {
+		if (state.selectedSku.id <= 0) {
+      sheep.$helper.toast('请选择规格');
+      return;
+		}
+    if (state.selectedSku.stock <= 0) {
+      sheep.$helper.toast('库存不足');
+      return;
+    }
+
+    emits('addCart', state.selectedSku);
+	}
+
+  // 立即购买
+	function onBuy() {
+    if (state.selectedSku.id <= 0) {
+      sheep.$helper.toast('请选择规格');
+      return;
+    }
+    if (state.selectedSku.stock <= 0) {
+      sheep.$helper.toast('库存不足');
+      return;
+    }
+    emits('buy', state.selectedSku);
+	}
+
+	// 改变禁用状态：计算每个 property 属性值的按钮，是否禁用
+	function changeDisabled(isChecked = false, propertyId = 0, valueId = 0) {
+    let newSkus = []; // 所有可以选择的 sku 数组
+		if (isChecked) {
+			// 情况一：选中 property
+			// 获得当前点击选中 property 的、所有可用 SKU
+			for (let price of skuList.value) {
+				if (price.stock <= 0) {
+					continue;
+				}
+				if (price.value_id_array.indexOf(valueId) >= 0) {
+					newSkus.push(price);
+				}
+			}
+		} else {
+			// 情况二：取消选中 property
+			// 当前所选 property 下，所有可以选择的 SKU
+			newSkus = getCanUseSkuList();
+		}
+
+		// 所有存在并且有库存未选择的 SKU 的 value 属性值 id
+		let noChooseValueIds = [];
+		for (let price of newSkus) {
+			noChooseValueIds = noChooseValueIds.concat(price.value_id_array);
+		}
+		noChooseValueIds = Array.from(new Set(noChooseValueIds)); // 去重
+
+		if (isChecked) {
+			// 去除当前选中的 value 属性值 id
+			let index = noChooseValueIds.indexOf(valueId);
+			noChooseValueIds.splice(index, 1);
+		} else {
+			// 循环去除当前已选择的 value 属性值 id
+			state.currentPropertyArray.forEach((currentPropertyId) => {
+				if (currentPropertyId.toString() !== '') {
+          return;
+				}
+        // currentPropertyId 为空是反选 填充的
+        let index = noChooseValueIds.indexOf(currentPropertyId);
+        if (index >= 0) {
+          // currentPropertyId 存在于 noChooseValueIds
+          noChooseValueIds.splice(index, 1);
+        }
+			});
+		}
+
+    // 当前已选择的 property 数组
+		let choosePropertyIds = [];
+		if (!isChecked) {
+			// 当前已选择的 property
+			state.currentPropertyArray.forEach((currentPropertyId, currentValueId) => {
+				if (currentPropertyId !== '') {
+					// currentPropertyId 为空是反选 填充的
+					choosePropertyIds.push(currentValueId);
+				}
+			});
+		} else {
+			// 当前点击选择的 property
+			choosePropertyIds = [propertyId];
+		}
+
+    for (let propertyIndex in propertyList) {
+			// 当前点击的 property、或者取消选择时候，已选中的 property 不进行处理
+			if (choosePropertyIds.indexOf(propertyList[propertyIndex]['id']) >= 0) {
+				continue;
+			}
+      // 如果当前 property id 不存在于有库存的 SKU 中，则禁用
+      for (let valueIndex in propertyList[propertyIndex]['values']) {
+				propertyList[propertyIndex]['values'][valueIndex]['disabled'] =
+          noChooseValueIds.indexOf(propertyList[propertyIndex]['values'][valueIndex]['id']) < 0; // true 禁用 or false 不禁用
+			}
+		}
+	}
+
+	// 当前所选属性下，获取所有有库存的 SKU 们
+	function getCanUseSkuList() {
+		let newSkus = [];
+		for (let sku of skuList.value) {
+			if (sku.stock <= 0) {
+				continue;
+			}
+      let isOk = true;
+      state.currentPropertyArray.forEach((propertyId) => {
+				// propertyId 不为空，并且，这个 条 sku 没有被选中，则排除
+				if (propertyId.toString() !== '' && sku.value_id_array.indexOf(propertyId) < 0) {
+					isOk = false;
+				}
+			});
+			if (isOk) {
+				newSkus.push(sku);
+			}
+		}
+		return newSkus;
+	}
+
+	// 选择规格
+	function onSelectSku(propertyId, valueId) {
+		// 清空已选择
+		let isChecked = true; // 选中 or 取消选中
+		if (state.currentPropertyArray[propertyId] !== undefined && state.currentPropertyArray[propertyId] === valueId) {
+			// 点击已被选中的，删除并填充 ''
+			isChecked = false;
+			state.currentPropertyArray.splice(propertyId, 1, '');
+		} else {
+			// 选中
+			state.currentPropertyArray[propertyId] = valueId;
+		}
+
+    // 选中的 property 大类
+		let choosePropertyId = [];
+		state.currentPropertyArray.forEach((currentPropertyId) => {
+			if (currentPropertyId !== '') {
+				// currentPropertyId 为空是反选 填充的
+				choosePropertyId.push(currentPropertyId);
+			}
+		});
+
+		// 当前所选 property 下，所有可以选择的 SKU 们
+		let newSkuList = getCanUseSkuList();
+
+		// 判断所有 property 大类是否选择完成
+		if (choosePropertyId.length === propertyList.length && newSkuList.length) {
+			newSkuList[0].goods_num = state.selectedSku.goods_num || 1;
+			state.selectedSku = newSkuList[0];
+		} else {
+			state.selectedSku = {};
+		}
+
+		// 改变 property 禁用状态
+		changeDisabled(isChecked, propertyId, valueId);
+	}
+
+	changeDisabled(false);
+  // TODO 芋艿：待讨论的优化点：1）单规格，要不要默认选中；2）默认要不要选中第一个规格
+</script>
+
+<style lang="scss" scoped>
+	// 购买
+	.buy-box {
+		padding: 10rpx 0;
+
+		.add-btn {
+			width: 356rpx;
+			height: 80rpx;
+			border-radius: 40rpx 0 0 40rpx;
+			background-color: var(--ui-BG-Main-light);
+			color: var(--ui-BG-Main);
+		}
+
+		.buy-btn {
+			width: 356rpx;
+			height: 80rpx;
+			border-radius: 0 40rpx 40rpx 0;
+			background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+			color: #fff;
+		}
+
+		.score-btn {
+			width: 100%;
+			margin: 0 20rpx;
+			height: 80rpx;
+			border-radius: 40rpx;
+			background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+			color: #fff;
+		}
+	}
+
+	.ss-modal-box {
+		border-radius: 30rpx 30rpx 0 0;
+		max-height: 1000rpx;
+
+		.modal-header {
+			position: relative;
+			padding: 80rpx 20rpx 40rpx;
+
+			.sku-image {
+				width: 160rpx;
+				height: 160rpx;
+				border-radius: 10rpx;
+			}
+
+			.header-right {
+				height: 160rpx;
+			}
+
+			.close-icon {
+				position: absolute;
+				top: 10rpx;
+				right: 20rpx;
+				font-size: 46rpx;
+				opacity: 0.2;
+			}
+
+			.goods-title {
+				font-size: 28rpx;
+				font-weight: 500;
+				line-height: 42rpx;
+			}
+
+			.score-img {
+				width: 36rpx;
+				height: 36rpx;
+				margin: 0 4rpx;
+			}
+
+			.score-text {
+				font-size: 30rpx;
+				font-weight: 500;
+				color: $red;
+				font-family: OPPOSANS;
+			}
+
+			.price-text {
+				font-size: 30rpx;
+				font-weight: 500;
+				color: $red;
+				font-family: OPPOSANS;
+
+				&::before {
+					content: '￥';
+					font-size: 30rpx;
+					font-weight: 500;
+					color: $red;
+				}
+			}
+
+			.stock-text {
+				font-size: 26rpx;
+				color: #999999;
+			}
+		}
+
+		.modal-content {
+			padding: 0 20rpx;
+
+			.modal-content-scroll {
+				max-height: 600rpx;
+
+				.label-text {
+					font-size: 26rpx;
+					font-weight: 500;
+				}
+
+				.buy-num-box {
+					height: 100rpx;
+				}
+
+				.spec-btn {
+					height: 60rpx;
+					min-width: 100rpx;
+					padding: 0 30rpx;
+					background: #f4f4f4;
+					border-radius: 30rpx;
+					color: #434343;
+					font-size: 26rpx;
+					margin-right: 10rpx;
+					margin-bottom: 10rpx;
+				}
+
+				.disabled-btn {
+					font-weight: 400;
+					color: #c6c6c6;
+					background: #f8f8f8;
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/sheep/components/s-share-modal/canvas-poster/index.vue b/sheep/components/s-share-modal/canvas-poster/index.vue
new file mode 100644
index 0000000..5da08c0
--- /dev/null
+++ b/sheep/components/s-share-modal/canvas-poster/index.vue
@@ -0,0 +1,165 @@
+<!-- 海报弹窗 -->
+<template>
+  <su-popup :show="show" round="10" @close="onClosePoster" type="center" class="popup-box">
+    <view class="ss-flex-col ss-col-center ss-row-center">
+      <image
+        v-if="!!painterImageUrl"
+        class="poster-img"
+        :src="painterImageUrl"
+        :style="{
+          height: poster.css.height+ 'px',
+          width: poster.css.width + 'px',
+        }"
+        :show-menu-by-longpress="true"
+      />
+    </view>
+    <view
+      class="poster-btn-box ss-m-t-20 ss-flex ss-row-between ss-col-center"
+      v-if="!!painterImageUrl"
+    >
+      <button class="cancel-btn ss-reset-button" @tap="onClosePoster">取消</button>
+      <button class="save-btn ss-reset-button ui-BG-Main" @tap="onSavePoster">
+        {{
+          ['wechatOfficialAccount', 'H5'].includes(sheep.$platform.name)
+            ? '长按图片保存'
+            : '保存图片'
+        }}
+      </button>
+    </view>
+    <!--  海报画板：默认隐藏只用来生成海报。生成方式为主动调用  -->
+    <l-painter
+      isCanvasToTempFilePath
+      @success="setPainterImageUrl"
+      hidden
+      ref="painterRef"
+    />
+  </su-popup>
+</template>
+
+<script setup>
+  /**
+   * 海报生成和展示
+   * 提示：小程序码默认跳转首页，由首页进行 spm 参数解析后跳转到对应的分享页面
+   * @description 用于生成分享海报，如：分享商品海报。
+   * @tutorial https://ext.dcloud.net.cn/plugin?id=2389
+   * @property {Boolean} show   弹出层控制
+   * @property {Object}  shareInfo 分享信息
+   */
+  import { reactive, ref, unref } from 'vue';
+  import sheep from '@/sheep';
+  import { getPosterData } from '@/sheep/components/s-share-modal/canvas-poster/poster';
+
+  const props = defineProps({
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    shareInfo: {
+      type: Object,
+      default: () => {
+      },
+    },
+  });
+
+  const poster = reactive({
+    css: {
+      // 根节点若无尺寸，自动获取父级节点
+      width: sheep.$platform.device.windowWidth * 0.9,
+      height: 600,
+    },
+    views: [],
+  });
+
+  const emits = defineEmits(['success', 'close']);
+
+  const onClosePoster = () => {
+    emits('close');
+  };
+
+  const painterRef = ref(); // 海报画板
+  const painterImageUrl = ref(); // 海报 url
+  // 渲染海报
+  const renderPoster = async () => {
+    await painterRef.value.render(unref(poster));
+  };
+  // 获得生成的图片
+  const setPainterImageUrl = (path) => {
+    painterImageUrl.value = path;
+  };
+  // 保存海报图片
+  const onSavePoster = () => {
+    if (['WechatOfficialAccount', 'H5'].includes(sheep.$platform.name)) {
+      sheep.$helper.toast('请长按图片保存');
+      return;
+    }
+    // 非H5 保存到相册
+    uni.saveImageToPhotosAlbum({
+      filePath: painterImageUrl.value,
+      success: (res) => {
+        onClosePoster();
+        sheep.$helper.toast('保存成功');
+      },
+      fail: (err) => {
+        sheep.$helper.toast('保存失败');
+        console.log('图片保存失败:', err);
+      },
+    });
+  };
+
+  // 获得海报数据
+  async function getPoster() {
+    poster.views = await getPosterData({
+      width: poster.css.width,
+      shareInfo: props.shareInfo,
+    });
+    await renderPoster();
+  }
+
+  defineExpose({
+    getPoster,
+  });
+</script>
+
+<style lang="scss" scoped>
+  .popup-box {
+    position: relative;
+  }
+
+  .poster-title {
+    color: #999;
+  }
+
+  // 分享海报
+  .poster-btn-box {
+    width: 600rpx;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: -80rpx;
+
+    .cancel-btn {
+      width: 240rpx;
+      height: 70rpx;
+      line-height: 70rpx;
+      background: $white;
+      border-radius: 35rpx;
+      font-size: 28rpx;
+      font-weight: 500;
+      color: $dark-9;
+    }
+
+    .save-btn {
+      width: 240rpx;
+      height: 70rpx;
+      line-height: 70rpx;
+      border-radius: 35rpx;
+      font-size: 28rpx;
+      font-weight: 500;
+    }
+  }
+
+  .poster-img {
+    border-radius: 20rpx;
+  }
+
+</style>
diff --git a/sheep/components/s-share-modal/canvas-poster/poster/goods.js b/sheep/components/s-share-modal/canvas-poster/poster/goods.js
new file mode 100644
index 0000000..0f59dd4
--- /dev/null
+++ b/sheep/components/s-share-modal/canvas-poster/poster/goods.js
@@ -0,0 +1,126 @@
+import sheep from '@/sheep';
+import third from '@/api/migration/third';
+import { formatImageUrlProtocol } from './index';
+
+const goods = async (poster) => {
+  const width = poster.width;
+  const userInfo = sheep.$store('user').userInfo;
+  const wxa_qrcode = (await third.wechat.getWxacode(poster.shareInfo.path, poster.shareInfo.query)).data;
+  return [
+    {
+      type: 'image',
+      src: formatImageUrlProtocol(sheep.$url.cdn(sheep.$store('app').platform.share.posterInfo.goods_bg)),
+      css: {
+        width,
+        position: 'fixed',
+        'object-fit': 'contain',
+        top: '0',
+        left: '0',
+        zIndex: -1,
+      },
+    },
+    {
+      type: 'text',
+      text: userInfo.nickname,
+      css: {
+        color: '#333',
+        fontSize: 16,
+        fontFamily: 'sans-serif',
+        position: 'fixed',
+        top: width * 0.06,
+        left: width * 0.22,
+      },
+    },
+    {
+      type: 'image',
+      src: formatImageUrlProtocol(sheep.$url.cdn(userInfo.avatar)),
+      css: {
+        position: 'fixed',
+        left: width * 0.04,
+        top: width * 0.04,
+        width: width * 0.14,
+        height: width * 0.14,
+      },
+    },
+    {
+      type: 'image',
+      src: formatImageUrlProtocol(poster.shareInfo.poster.image),
+      css: {
+        position: 'fixed',
+        left: width * 0.03,
+        top: width * 0.21,
+        width: width * 0.94,
+        height: width * 0.94,
+      },
+    },
+    {
+      type: 'text',
+      text: poster.shareInfo.poster.title,
+      css: {
+        position: 'fixed',
+        left: width * 0.04,
+        top: width * 1.18,
+        color: '#333',
+        fontSize: 14,
+        lineHeight: 5,
+        maxWidth: width * 0.91,
+      },
+    },
+    {
+      type: 'text',
+      text: '￥' + poster.shareInfo.poster.price,
+      css: {
+        position: 'fixed',
+        left: width * 0.04,
+        top: width * 1.3,
+        fontSize: 20,
+        fontFamily: 'OPPOSANS',
+        color: '#333',
+      },
+    },
+    {
+      type: 'text',
+      text:
+        poster.shareInfo.poster.original_price > 0
+          ? '￥' + poster.shareInfo.poster.original_price
+          : '',
+      css: {
+        position: 'fixed',
+        left: width * 0.3,
+        top: width * 1.32,
+        color: '#999',
+        fontSize: 10,
+        fontFamily: 'OPPOSANS',
+        textDecoration: 'line-through',
+      },
+    },
+    // #ifndef MP-WEIXIN
+    {
+      type: 'qrcode',
+      text: poster.shareInfo.link,
+      css: {
+        position: 'fixed',
+        left: width * 0.75,
+        top: width * 1.3,
+        width: width * 0.2,
+        height: width * 0.2,
+      },
+    },
+    // #endif
+    // #ifdef MP-WEIXIN
+    {
+      type: 'image',
+      src: wxa_qrcode,
+      css: {
+        position: 'fixed',
+        left: width * 0.75,
+        top: width * 1.3,
+        width: width * 0.2,
+        height: width * 0.2,
+      },
+    },
+    // #endif
+  ];
+};
+
+export default goods;
diff --git a/sheep/components/s-share-modal/canvas-poster/poster/groupon.js b/sheep/components/s-share-modal/canvas-poster/poster/groupon.js
new file mode 100644
index 0000000..193934e
--- /dev/null
+++ b/sheep/components/s-share-modal/canvas-poster/poster/groupon.js
@@ -0,0 +1,123 @@
+import sheep from '@/sheep';
+import { formatImageUrlProtocol } from './index';
+import third from '@/api/migration/third';
+
+const groupon = async (poster) => {
+  const width = poster.width;
+  const userInfo = sheep.$store('user').userInfo;
+  const wxa_qrcode = (await third.wechat.getWxacode(poster.shareInfo.path, poster.shareInfo.query)).data;
+  return [
+    {
+      type: 'image',
+      src: formatImageUrlProtocol(sheep.$url.cdn(sheep.$store('app').platform.share.posterInfo.groupon_bg)),
+      css: {
+        width,
+        position: 'fixed',
+        'object-fit': 'contain',
+        top: '0',
+        left: '0',
+        zIndex: -1,
+      },
+    },
+    {
+      type: 'text',
+      text: userInfo.nickname,
+      css: {
+        color: '#333',
+        fontSize: 16,
+        fontFamily: 'sans-serif',
+        position: 'fixed',
+        top: width * 0.06,
+        left: width * 0.22,
+      },
+    },
+    {
+      type: 'image',
+      src: formatImageUrlProtocol(sheep.$url.cdn(userInfo.avatar)),
+      css: {
+        position: 'fixed',
+        left: width * 0.04,
+        top: width * 0.04,
+        width: width * 0.14,
+        height: width * 0.14,
+      },
+    },
+    {
+      type: 'image',
+      src: formatImageUrlProtocol(poster.shareInfo.poster.image),
+      css: {
+        position: 'fixed',
+        left: width * 0.03,
+        top: width * 0.21,
+        width: width * 0.94,
+        height: width * 0.94,
+        borderRadius: 10,
+      },
+    },
+    {
+      type: 'text',
+      text: poster.shareInfo.poster.title,
+      css: {
+        color: '#333',
+        fontSize: 14,
+        position: 'fixed',
+        top: width * 1.18,
+        left: width * 0.04,
+        maxWidth: width * 0.91,
+        lineHeight: 5,
+      },
+    },
+    {
+      type: 'text',
+      text: '￥' + poster.shareInfo.poster.price,
+      css: {
+        color: '#ff0000',
+        fontSize: 20,
+        fontFamily: 'OPPOSANS',
+        position: 'fixed',
+        top: width * 1.3,
+        left: width * 0.04,
+      },
+    },
+    {
+      type: 'text',
+      text: '2人团',
+      css: {
+        color: '#ff0000',
+        fontSize: 30,
+        fontFamily: 'OPPOSANS',
+        position: 'fixed',
+        left: width * 0.3,
+        top: width * 1.32,
+      },
+    },
+    // #ifndef MP-WEIXIN
+    {
+      type: 'qrcode',
+      text: poster.shareInfo.link,
+      css: {
+        position: 'fixed',
+        left: width * 0.75,
+        top: width * 1.3,
+        width: width * 0.2,
+        height: width * 0.2,
+      },
+    },
+    // #endif
+    // #ifdef MP-WEIXIN
+    {
+      type: 'image',
+      src: wxa_qrcode,
+      css: {
+        position: 'fixed',
+        left: width * 0.75,
+        top: width * 1.3,
+        width: width * 0.2,
+        height: width * 0.2,
+      },
+    },
+    // #endif
+  ];
+};
+
+export default groupon;
diff --git a/sheep/components/s-share-modal/canvas-poster/poster/index.js b/sheep/components/s-share-modal/canvas-poster/poster/index.js
new file mode 100644
index 0000000..f6eab72
--- /dev/null
+++ b/sheep/components/s-share-modal/canvas-poster/poster/index.js
@@ -0,0 +1,59 @@
+import user from './user';
+import goods from './goods';
+import groupon from './groupon';
+
+export function getPosterData(options) {
+  switch (options.shareInfo.poster.type) {
+    case 'user':
+      return user(options);
+    case 'goods':
+      return goods(options);
+    case 'groupon':
+      return groupon(options);
+  }
+}
+
+export function formatImageUrlProtocol(url) {
+  // #ifdef H5
+  // H5平台 https协议下需要转换
+  if (window.location.protocol === 'https:' && url.indexOf('http:') === 0) {
+    url = url.replace('http:', 'https:');
+  }
+  // #endif
+
+  // #ifdef MP-WEIXIN
+  // 小程序平台 需要强制转换为https协议
+  if (url.indexOf('http:') === 0) {
+    url = url.replace('http:', 'https:');
+  }
+  // #endif
+
+  return url;
+}
+
+
+export function getBase64Src(base64data, appType) {
+  const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
+  switch (appType) {
+    case 'wechat':
+      const filePath = `${wx.env.USER_DATA_PATH}/tmp_base64src.${format}`;
+      return new Promise((resolve, reject) => {
+        const fileManager = uni.getFileSystemManager();
+        fileManager.writeFile({
+          filePath: filePath,
+          data: bodyData, // base64 数据
+          encoding: 'base64', // 字符编码
+          success: () => {
+            resolve(filePath);
+          },
+          file: (err) => {
+            console.log('base64 保存失败', err);
+          },
+        });
+      });
+    default:
+      console.warn('获得 base64 图片地址只做了微信小程序端的转换，其它端请自行实现！！！');
+      break;
+  }
+}
+
diff --git a/sheep/components/s-share-modal/canvas-poster/poster/user.js b/sheep/components/s-share-modal/canvas-poster/poster/user.js
new file mode 100644
index 0000000..f723496
--- /dev/null
+++ b/sheep/components/s-share-modal/canvas-poster/poster/user.js
@@ -0,0 +1,75 @@
+import sheep from '@/sheep';
+import { formatImageUrlProtocol } from './index';
+import third from '@/api/migration/third';
+
+const user = async (poster) => {
+  const width = poster.width;
+  const userInfo = sheep.$store('user').userInfo;
+  const wxa_qrcode = (await third.wechat.getWxacode(poster.shareInfo.path, poster.shareInfo.query)).data;
+  return [
+    {
+      type: 'image',
+      src: formatImageUrlProtocol(sheep.$url.cdn(sheep.$store('app').platform.share.posterInfo.user_bg)),
+      css: {
+        width,
+        position: 'fixed',
+        'object-fit': 'contain',
+        top: '0',
+        left: '0',
+        zIndex: -1,
+      },
+    },
+    {
+      type: 'text',
+      text: userInfo.nickname,
+      css: {
+        color: '#333',
+        fontSize: 14,
+        textAlign: 'center',
+        fontFamily: 'sans-serif',
+        position: 'fixed',
+        top: width * 0.4,
+        left: width / 2,
+      },
+    },
+    {
+      type: 'image',
+      src: formatImageUrlProtocol(sheep.$url.cdn(userInfo.avatar)),
+      css: {
+        position: 'fixed',
+        left: width * 0.4,
+        top: width * 0.16,
+        width: width * 0.2,
+        height: width * 0.2,
+      },
+    },
+    // #ifndef MP-WEIXIN
+    {
+      type: 'qrcode',
+      text: poster.shareInfo.link,
+      css: {
+        position: 'fixed',
+        left: width * 0.35,
+        top: width * 0.84,
+        width: width * 0.3,
+        height: width * 0.3,
+      },
+    },
+    // #endif
+    // #ifdef MP-WEIXIN
+    {
+      type: 'image',
+      src: wxa_qrcode,
+      css: {
+        position: 'fixed',
+        left: width * 0.35,
+        top: width * 0.84,
+        width: width * 0.3,
+        height: width * 0.3,
+      },
+    },
+    // #endif
+  ];
+};
+
+export default user;
diff --git a/sheep/components/s-share-modal/s-share-modal.vue b/sheep/components/s-share-modal/s-share-modal.vue
new file mode 100644
index 0000000..0f0b92d
--- /dev/null
+++ b/sheep/components/s-share-modal/s-share-modal.vue
@@ -0,0 +1,195 @@
+<!-- 全局分享弹框 -->
+<template>
+  <view>
+    <su-popup :show="state.showShareGuide" :showClose="false" @close="onCloseGuide" />
+    <view v-if="state.showShareGuide" class="guide-wrap">
+      <image class="guide-image" :src="sheep.$url.static('/static/img/shop/share/share_guide.png')" />
+    </view>
+
+    <su-popup :show="show" round="10" :showClose="false" @close="closeShareModal">
+      <!-- 分享 tools -->
+      <view class="share-box">
+        <view class="share-list-box ss-flex">
+          <!-- 操作 ①：发送给微信好友 -->
+          <button
+            v-if="shareConfig.methods.includes('forward')"
+            class="share-item share-btn ss-flex-col ss-col-center"
+            open-type="share"
+            @tap="onShareByForward"
+          >
+            <image class="share-img" :src="sheep.$url.static('/static/img/shop/share/share_wx.png')" mode="" />
+            <text class="share-title">微信好友</text>
+          </button>
+
+          <!-- 操作 ②：生成海报图片 -->
+          <button
+            v-if="shareConfig.methods.includes('poster')"
+            class="share-item share-btn ss-flex-col ss-col-center"
+            @tap="onShareByPoster"
+          >
+            <image
+              class="share-img"
+              :src="sheep.$url.static('/static/img/shop/share/share_poster.png')"
+              mode=""
+            />
+            <text class="share-title">生成海报</text>
+          </button>
+
+          <!-- 操作 ③：生成链接 -->
+          <button
+            v-if="shareConfig.methods.includes('link')"
+            class="share-item share-btn ss-flex-col ss-col-center"
+            @tap="onShareByCopyLink"
+          >
+            <image class="share-img" :src="sheep.$url.static('/static/img/shop/share/share_link.png')" mode="" />
+            <text class="share-title">复制链接</text>
+          </button>
+        </view>
+        <view class="share-foot ss-flex ss-row-center ss-col-center" @tap="closeShareModal">
+          取消
+        </view>
+      </view>
+    </su-popup>
+
+    <!-- 分享海报，对应操作 ② -->
+    <canvas-poster
+      ref="SharePosterRef"
+      :show="state.showPosterModal"
+      :shareInfo="shareInfo"
+      @close="state.showPosterModal = false"
+    />
+  </view>
+</template>
+<script setup>
+  /**
+   * 分享弹窗
+   */
+  import { ref, unref, reactive, computed } from 'vue';
+  import sheep from '@/sheep';
+  import canvasPoster from './canvas-poster/index.vue';
+  import { closeShareModal, showAuthModal } from '@/sheep/hooks/useModal';
+
+  const show = computed(() => sheep.$store('modal').share);
+  const shareConfig = computed(() => sheep.$store('app').platform.share);
+  const SharePosterRef = ref('');
+
+  const props = defineProps({
+    shareInfo: {
+      type: Object,
+      default() {},
+    },
+  });
+
+  const state = reactive({
+    showShareGuide: false, // H5 的指引
+    showPosterModal: false, // 海报弹窗
+  });
+
+  // 操作 ②：生成海报分享
+  const onShareByPoster = () => {
+    closeShareModal();
+    if (!sheep.$store('user').isLogin) {
+      showAuthModal();
+      return;
+    }
+    unref(SharePosterRef).getPoster();
+    state.showPosterModal = true;
+  };
+
+  // 操作 ①：直接转发分享
+  const onShareByForward = () => {
+    closeShareModal();
+
+    // #ifdef H5
+    if (['WechatOfficialAccount', 'H5'].includes(sheep.$platform.name)) {
+      state.showShareGuide = true;
+      return;
+    }
+    // #endif
+
+    // #ifdef APP-PLUS
+    uni.share({
+      provider: 'weixin',
+      scene: 'WXSceneSession',
+      type: 0,
+      href: props.shareInfo.link,
+      title: props.shareInfo.title,
+      summary: props.shareInfo.desc,
+      imageUrl: props.shareInfo.image,
+      success: (res) => {
+        console.log('success:' + JSON.stringify(res));
+      },
+      fail: (err) => {
+        console.log('fail:' + JSON.stringify(err));
+      },
+    });
+    // #endif
+  };
+
+  // 操作 ③：复制链接分享
+  const onShareByCopyLink = () => {
+    sheep.$helper.copyText(props.shareInfo.link);
+    closeShareModal();
+  };
+
+  function onCloseGuide() {
+    state.showShareGuide = false;
+  }
+</script>
+
+<style lang="scss" scoped>
+  .guide-image {
+    right: 30rpx;
+    top: 0;
+    position: fixed;
+    width: 580rpx;
+    height: 430rpx;
+    z-index: 10080;
+  }
+
+  // 分享tool
+  .share-box {
+    background: $white;
+    width: 750rpx;
+    border-radius: 30rpx 30rpx 0 0;
+    padding-top: 30rpx;
+
+    .share-foot {
+      font-size: 24rpx;
+      color: $gray-b;
+      height: 80rpx;
+      border-top: 1rpx solid $gray-e;
+    }
+
+    .share-list-box {
+      .share-btn {
+        background: none;
+        border: none;
+        line-height: 1;
+        padding: 0;
+
+        &::after {
+          border: none;
+        }
+      }
+
+      .share-item {
+        flex: 1;
+        padding-bottom: 20rpx;
+
+        .share-img {
+          width: 70rpx;
+          height: 70rpx;
+          background: $gray-f;
+          border-radius: 50%;
+          margin-bottom: 20rpx;
+        }
+
+        .share-title {
+          font-size: 24rpx;
+          color: $dark-6;
+        }
+      }
+    }
+  }
+</style>
diff --git a/sheep/components/s-statusbar/s-statusbar.vue b/sheep/components/s-statusbar/s-statusbar.vue
new file mode 100644
index 0000000..8b58c97
--- /dev/null
+++ b/sheep/components/s-statusbar/s-statusbar.vue
@@ -0,0 +1,10 @@
+<template>
+  <view class="status_bar" />
+</template>
+
+<style>
+  .status_bar {
+    height: var(--status-bar-height);
+    width: 100%;
+  }
+</style>
diff --git a/sheep/components/s-tabbar/s-tabbar.vue b/sheep/components/s-tabbar/s-tabbar.vue
new file mode 100644
index 0000000..369a823
--- /dev/null
+++ b/sheep/components/s-tabbar/s-tabbar.vue
@@ -0,0 +1,90 @@
+<template>
+  <view class="u-page__item" v-if="tabbar?.items?.length > 0">
+    <su-tabbar
+      :value="path"
+      :fixed="true"
+      :placeholder="true"
+      :safeAreaInsetBottom="true"
+      :inactiveColor="tabbar.style.color"
+      :activeColor="tabbar.style.activeColor"
+      :midTabBar="tabbar.mode === 2"
+      :customStyle="tabbarStyle"
+    >
+      <su-tabbar-item
+        v-for="(item, index) in tabbar.items"
+        :key="item.text"
+        :text="item.text"
+        :name="item.url"
+        :isCenter="getTabbarCenter(index)"
+        :centerImage="sheep.$url.cdn(item.iconUrl)"
+        @tap="sheep.$router.go(item.url)"
+      >
+        <template v-slot:active-icon>
+          <image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.activeIconUrl)"></image>
+        </template>
+        <template v-slot:inactive-icon>
+          <image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.iconUrl)"></image>
+        </template>
+      </su-tabbar-item>
+    </su-tabbar>
+  </view>
+</template>
+
+<script setup>
+  import { computed, unref } from 'vue';
+  import sheep from '@/sheep';
+
+  const tabbar = computed(() => {
+    return sheep.$store('app').template.basic?.tabbar;
+  });
+
+  const tabbarStyle = computed(() => {
+    const backgroundStyle = tabbar.value.style;
+    if (backgroundStyle.bgType === 'color') {
+      return { background: backgroundStyle.bgColor };
+    }
+    if (backgroundStyle.bgType === 'img')
+      return {
+        background: `url(${sheep.$url.cdn(
+          backgroundStyle.bgImg,
+        )}) no-repeat top center / 100% auto`,
+      };
+  });
+
+  const getTabbarCenter = (index) => {
+    if (unref(tabbar).mode !== 2) return false;
+    return unref(tabbar).items % 2 > 0
+      ? Math.ceil(unref(tabbar).items.length / 2) === index + 1
+      : false;
+  };
+
+  const props = defineProps({
+    path: String,
+    default: '',
+  });
+</script>
+
+<style lang="scss">
+  .u-page {
+    padding: 0;
+
+    &__item {
+      &__title {
+        color: var(--textSize);
+        background-color: #fff;
+        padding: 15px;
+        font-size: 15px;
+
+        &__slot-title {
+          color: var(--textSize);
+          font-size: 14px;
+        }
+      }
+
+      &__slot-icon {
+        width: 25px;
+        height: 25px;
+      }
+    }
+  }
+</style>
diff --git a/sheep/components/s-title-block/s-title-block.vue b/sheep/components/s-title-block/s-title-block.vue
new file mode 100644
index 0000000..513a3cc
--- /dev/null
+++ b/sheep/components/s-title-block/s-title-block.vue
@@ -0,0 +1,100 @@
+<!-- 装修商品组件：标题栏 -->
+<template>
+  <view
+    class="ss-title-wrap ss-flex ss-col-center"
+    :class="[state.typeMap[data.textAlign]]"
+    :style="[elStyles]"
+  >
+    <view class="title-content">
+      <!-- 主标题 -->
+      <view v-if="data.title" class="title-text" :style="[titleStyles]">{{ data.title }}</view>
+      <!-- 副标题 -->
+      <view v-if="data.description" :style="[descStyles]" class="sub-title-text">{{ data.description }}</view>
+    </view>
+    <!-- 查看更多 -->
+    <view v-if="data.more?.show" class="more-box ss-flex ss-col-center" @tap="sheep.$router.go(data.more.url)"
+          :style="{color: data.descriptionColor}">
+      <view class="more-text" v-if="data.more.type !== 'icon'">{{ data.more.text }} </view>
+      <text class="_icon-forward" v-if="data.more.type !== 'text'"></text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  /**
+   * 标题栏
+   */
+  import { reactive } from 'vue';
+  import sheep from '@/sheep';
+
+  // 数据
+  const state = reactive({
+    typeMap: {
+      left: 'ss-row-left',
+      center: 'ss-row-center',
+    },
+  });
+
+  // 接收参数
+  const props = defineProps({
+    data: {
+      type: Object,
+      default() {},
+    },
+    styles: {
+      type: Object,
+      default() {},
+    },
+  });
+
+  // 组件样式
+  const elStyles = {
+    background: `url(${sheep.$url.cdn(props.data.bgImgUrl)}) no-repeat top center / 100% auto`,
+    fontSize: `${props.data.titleSize}px`,
+    fontWeight: `${props.data.titleWeight}px`,
+  };
+
+  // 标题样式
+  const titleStyles = {
+    color: props.data.titleColor,
+    fontSize: `${props.data.titleSize}px`,
+    textAlign: props.data.textAlign
+  };
+
+  // 副标题
+  const descStyles = {
+    color: props.data.descriptionColor,
+    textAlign: props.data.textAlign,
+    fontSize: `${props.data.descriptionSize}px`,
+    fontWeight: `${props.data.descriptionWeight}px`,
+  };
+</script>
+
+<style lang="scss" scoped>
+  .ss-title-wrap {
+    height: 80rpx;
+    position: relative;
+
+    .title-content {
+      .title-text {
+        font-size: 30rpx;
+        color: #333;
+      }
+
+      .sub-title-text {
+        font-size: 22rpx;
+        color: #999;
+      }
+    }
+
+    .more-box {
+      white-space: nowrap;
+      font-size: 22rpx;
+      color: #999;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 20rpx;
+    }
+  }
+</style>
diff --git a/sheep/components/s-uploader/choose-and-upload-file.js b/sheep/components/s-uploader/choose-and-upload-file.js
new file mode 100644
index 0000000..fd9ffaa
--- /dev/null
+++ b/sheep/components/s-uploader/choose-and-upload-file.js
@@ -0,0 +1,213 @@
+'use strict';
+import FileApi from '@/api/infra/file';
+
+const ERR_MSG_OK = 'chooseAndUploadFile:ok';
+const ERR_MSG_FAIL = 'chooseAndUploadFile:fail';
+
+function chooseImage(opts) {
+  const {
+    count,
+    sizeType = ['original', 'compressed'],
+    sourceType = ['album', 'camera'],
+    extension,
+  } = opts;
+  return new Promise((resolve, reject) => {
+    uni.chooseImage({
+      count,
+      sizeType,
+      sourceType,
+      extension,
+      success(res) {
+        resolve(normalizeChooseAndUploadFileRes(res, 'image'));
+      },
+      fail(res) {
+        reject({
+          errMsg: res.errMsg.replace('chooseImage:fail', ERR_MSG_FAIL),
+        });
+      },
+    });
+  });
+}
+
+function chooseVideo(opts) {
+  const { camera, compressed, maxDuration, sourceType = ['album', 'camera'], extension } = opts;
+  return new Promise((resolve, reject) => {
+    uni.chooseVideo({
+      camera,
+      compressed,
+      maxDuration,
+      sourceType,
+      extension,
+      success(res) {
+        const { tempFilePath, duration, size, height, width } = res;
+        resolve(
+          normalizeChooseAndUploadFileRes(
+            {
+              errMsg: 'chooseVideo:ok',
+              tempFilePaths: [tempFilePath],
+              tempFiles: [
+                {
+                  name: (res.tempFile && res.tempFile.name) || '',
+                  path: tempFilePath,
+                  size,
+                  type: (res.tempFile && res.tempFile.type) || '',
+                  width,
+                  height,
+                  duration,
+                  fileType: 'video',
+                  cloudPath: '',
+                },
+              ],
+            },
+            'video',
+          ),
+        );
+      },
+      fail(res) {
+        reject({
+          errMsg: res.errMsg.replace('chooseVideo:fail', ERR_MSG_FAIL),
+        });
+      },
+    });
+  });
+}
+
+function chooseAll(opts) {
+  const { count, extension } = opts;
+  return new Promise((resolve, reject) => {
+    let chooseFile = uni.chooseFile;
+    if (typeof wx !== 'undefined' && typeof wx.chooseMessageFile === 'function') {
+      chooseFile = wx.chooseMessageFile;
+    }
+    if (typeof chooseFile !== 'function') {
+      return reject({
+        errMsg: ERR_MSG_FAIL + ' 请指定 type 类型，该平台仅支持选择 image 或 video。',
+      });
+    }
+    chooseFile({
+      type: 'all',
+      count,
+      extension,
+      success(res) {
+        resolve(normalizeChooseAndUploadFileRes(res));
+      },
+      fail(res) {
+        reject({
+          errMsg: res.errMsg.replace('chooseFile:fail', ERR_MSG_FAIL),
+        });
+      },
+    });
+  });
+}
+
+function normalizeChooseAndUploadFileRes(res, fileType) {
+  res.tempFiles.forEach((item, index) => {
+    if (!item.name) {
+      item.name = item.path.substring(item.path.lastIndexOf('/') + 1);
+    }
+    if (fileType) {
+      item.fileType = fileType;
+    }
+    item.cloudPath = Date.now() + '_' + index + item.name.substring(item.name.lastIndexOf('.'));
+  });
+  if (!res.tempFilePaths) {
+    res.tempFilePaths = res.tempFiles.map((file) => file.path);
+  }
+  return res;
+}
+
+function uploadCloudFiles(files, max = 5, onUploadProgress) {
+  files = JSON.parse(JSON.stringify(files));
+  const len = files.length;
+  let count = 0;
+  let self = this;
+  return new Promise((resolve) => {
+    while (count < max) {
+      next();
+    }
+
+    function next() {
+      let cur = count++;
+      if (cur >= len) {
+        !files.find((item) => !item.url && !item.errMsg) && resolve(files);
+        return;
+      }
+      const fileItem = files[cur];
+      const index = self.files.findIndex((v) => v.uuid === fileItem.uuid);
+      fileItem.url = '';
+      delete fileItem.errMsg;
+
+      uniCloud
+        .uploadFile({
+          filePath: fileItem.path,
+          cloudPath: fileItem.cloudPath,
+          fileType: fileItem.fileType,
+          onUploadProgress: (res) => {
+            res.index = index;
+            onUploadProgress && onUploadProgress(res);
+          },
+        })
+        .then((res) => {
+          fileItem.url = res.fileID;
+          fileItem.index = index;
+          if (cur < len) {
+            next();
+          }
+        })
+        .catch((res) => {
+          fileItem.errMsg = res.errMsg || res.message;
+          fileItem.index = index;
+          if (cur < len) {
+            next();
+          }
+        });
+    }
+  });
+}
+
+function uploadFiles(choosePromise, { onChooseFile, onUploadProgress }) {
+  return choosePromise
+    .then((res) => {
+      if (onChooseFile) {
+        const customChooseRes = onChooseFile(res);
+        if (typeof customChooseRes !== 'undefined') {
+          return Promise.resolve(customChooseRes).then((chooseRes) =>
+            typeof chooseRes === 'undefined' ? res : chooseRes,
+          );
+        }
+      }
+      return res;
+    })
+    .then((res) => {
+      if (res === false) {
+        return {
+          errMsg: ERR_MSG_OK,
+          tempFilePaths: [],
+          tempFiles: [],
+        };
+      }
+      return res;
+    })
+    .then(async (files) => {
+      for (let file of files.tempFiles) {
+        const { data } = await FileApi.uploadFile(file.path);
+        file.url = data;
+      }
+      return files;
+    });
+}
+
+function chooseAndUploadFile(
+  opts = {
+    type: 'all',
+  },
+) {
+  if (opts.type === 'image') {
+    return uploadFiles(chooseImage(opts), opts);
+  } else if (opts.type === 'video') {
+    return uploadFiles(chooseVideo(opts), opts);
+  }
+  return uploadFiles(chooseAll(opts), opts);
+}
+
+export { chooseAndUploadFile, uploadCloudFiles };
diff --git a/sheep/components/s-uploader/s-uploader.vue b/sheep/components/s-uploader/s-uploader.vue
new file mode 100644
index 0000000..95cfb05
--- /dev/null
+++ b/sheep/components/s-uploader/s-uploader.vue
@@ -0,0 +1,675 @@
+<!-- 文件上传，基于 upload-file 和 upload-image 实现 -->
+<template>
+  <view class="uni-file-picker">
+    <view v-if="title" class="uni-file-picker__header">
+      <text class="file-title">{{ title }}</text>
+      <text class="file-count">{{ filesList.length }}/{{ limitLength }}</text>
+    </view>
+    <view v-if="subtitle" class="file-subtitle">
+      <view>{{ subtitle }}</view>
+    </view>
+    <upload-image
+      v-if="fileMediatype === 'image' && showType === 'grid'"
+      :readonly="readonly"
+      :image-styles="imageStyles"
+      :files-list="url"
+      :limit="limitLength"
+      :disablePreview="disablePreview"
+      :delIcon="delIcon"
+      @uploadFiles="uploadFiles"
+      @choose="choose"
+      @delFile="delFile"
+    >
+      <slot>
+        <view class="is-add">
+          <image :src="imgsrc" class="add-icon"></image>
+        </view>
+      </slot>
+    </upload-image>
+    <upload-file
+      v-if="fileMediatype !== 'image' || showType !== 'grid'"
+      :readonly="readonly"
+      :list-styles="listStyles"
+      :files-list="filesList"
+      :showType="showType"
+      :delIcon="delIcon"
+      @uploadFiles="uploadFiles"
+      @choose="choose"
+      @delFile="delFile"
+    >
+      <slot><button type="primary" size="mini">选择文件</button></slot>
+    </upload-file>
+  </view>
+</template>
+
+<script>
+  import { chooseAndUploadFile, uploadCloudFiles } from './choose-and-upload-file.js';
+  import {
+    get_file_ext,
+    get_extname,
+    get_files_and_is_max,
+    get_file_info,
+    get_file_data,
+  } from './utils.js';
+  import uploadImage from './upload-image.vue';
+  import uploadFile from './upload-file.vue';
+  import sheep from '@/sheep';
+  let fileInput = null;
+  /**
+   * FilePicker 文件选择上传
+   * @description 文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间
+   * @tutorial https://ext.dcloud.net.cn/plugin?id=4079
+   * @property {Object|Array}	value	组件数据，通常用来回显 ,类型由return-type属性决定
+   * @property {String|Array}	url	  url数据
+   * @property {Boolean}	disabled = [true|false]	组件禁用
+   * 	@value true 	禁用
+   * 	@value false 	取消禁用
+   * @property {Boolean}	readonly = [true|false]	组件只读，不可选择，不显示进度，不显示删除按钮
+   * 	@value true 	只读
+   * 	@value false 	取消只读
+   * @property {Boolean}	disable-preview = [true|false]	禁用图片预览，仅 mode:grid 时生效
+   * 	@value true 	禁用图片预览
+   * 	@value false 	取消禁用图片预览
+   * @property {Boolean}	del-icon = [true|false]	是否显示删除按钮
+   * 	@value true 	显示删除按钮
+   * 	@value false 	不显示删除按钮
+   * @property {Boolean}	auto-upload = [true|false]	是否自动上传，值为true则只触发@select,可自行上传
+   * 	@value true 	自动上传
+   * 	@value false 	取消自动上传
+   * @property {Number|String}	limit	最大选择个数 ，h5 会自动忽略多选的部分
+   * @property {String}	title	组件标题，右侧显示上传计数
+   * @property {String}	mode = [list|grid]	选择文件后的文件列表样式
+   * 	@value list 	列表显示
+   * 	@value grid 	宫格显示
+   * @property {String}	file-mediatype = [image|video|all]	选择文件类型
+   * 	@value image	只选择图片
+   * 	@value video	只选择视频
+   * 	@value all		选择所有文件
+   * @property {Array}	file-extname	选择文件后缀，根据 file-mediatype 属性而不同
+   * @property {Object}	list-style	mode:list 时的样式
+   * @property {Object}	image-styles	选择文件后缀，根据 file-mediatype 属性而不同
+   * @event {Function} select 	选择文件后触发
+   * @event {Function} progress 文件上传时触发
+   * @event {Function} success 	上传成功触发
+   * @event {Function} fail 		上传失败触发
+   * @event {Function} delete 	文件从列表移除时触发
+   */
+  export default {
+    name: 'sUploader',
+    components: {
+      uploadImage,
+      uploadFile,
+    },
+    options: {
+      virtualHost: true,
+    },
+    emits: ['select', 'success', 'fail', 'progress', 'delete', 'update:modelValue', 'update:url'],
+    props: {
+      modelValue: {
+        type: [Array, Object],
+        default() {
+          return [];
+        },
+      },
+      url: {
+        type: [Array, String],
+        default() {
+          return [];
+        },
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      disablePreview: {
+        type: Boolean,
+        default: false,
+      },
+      delIcon: {
+        type: Boolean,
+        default: true,
+      },
+      // 自动上传
+      autoUpload: {
+        type: Boolean,
+        default: true,
+      },
+      // 最大选择个数 ，h5只能限制单选或是多选
+      limit: {
+        type: [Number, String],
+        default: 9,
+      },
+      // 列表样式 grid | list | list-card
+      mode: {
+        type: String,
+        default: 'grid',
+      },
+      // 选择文件类型  image/video/all
+      fileMediatype: {
+        type: String,
+        default: 'image',
+      },
+      // 文件类型筛选
+      fileExtname: {
+        type: [Array, String],
+        default() {
+          return [];
+        },
+      },
+      title: {
+        type: String,
+        default: '',
+      },
+      listStyles: {
+        type: Object,
+        default() {
+          return {
+            // 是否显示边框
+            border: true,
+            // 是否显示分隔线
+            dividline: true,
+            // 线条样式
+            borderStyle: {},
+          };
+        },
+      },
+      imageStyles: {
+        type: Object,
+        default() {
+          return {
+            width: 'auto',
+            height: 'auto',
+          };
+        },
+      },
+      readonly: {
+        type: Boolean,
+        default: false,
+      },
+      sizeType: {
+        type: Array,
+        default() {
+          return ['original', 'compressed'];
+        },
+      },
+      driver: {
+        type: String,
+        default: 'local', // local=本地 | oss | unicloud
+      },
+      subtitle: {
+        type: String,
+        default: '',
+      },
+    },
+    data() {
+      return {
+        files: [],
+        localValue: [],
+        imgsrc: sheep.$url.static('/static/img/shop/upload-camera.png'),
+      };
+    },
+    watch: {
+      modelValue: {
+        handler(newVal, oldVal) {
+          this.setValue(newVal, oldVal);
+        },
+        immediate: true,
+      },
+    },
+    computed: {
+      returnType() {
+        if (this.limit > 1) {
+          return 'array';
+        }
+        return 'object';
+      },
+      filesList() {
+        let files = [];
+        this.files.forEach((v) => {
+          files.push(v);
+        });
+        return files;
+      },
+      showType() {
+        if (this.fileMediatype === 'image') {
+          return this.mode;
+        }
+        return 'list';
+      },
+      limitLength() {
+        if (this.returnType === 'object') {
+          return 1;
+        }
+        if (!this.limit) {
+          return 1;
+        }
+        if (this.limit >= 9) {
+          return 9;
+        }
+        return this.limit;
+      },
+    },
+    created() {
+      if (this.driver === 'local') {
+        uniCloud.chooseAndUploadFile = chooseAndUploadFile;
+      }
+      this.form = this.getForm('uniForms');
+      this.formItem = this.getForm('uniFormsItem');
+      if (this.form && this.formItem) {
+        if (this.formItem.name) {
+          this.rename = this.formItem.name;
+          this.form.inputChildrens.push(this);
+        }
+      }
+    },
+    methods: {
+      /**
+       * 公开用户使用，清空文件
+       * @param {Object} index
+       */
+      clearFiles(index) {
+        if (index !== 0 && !index) {
+          this.files = [];
+          this.$nextTick(() => {
+            this.setEmit();
+          });
+        } else {
+          this.files.splice(index, 1);
+        }
+        this.$nextTick(() => {
+          this.setEmit();
+        });
+      },
+      /**
+       * 公开用户使用，继续上传
+       */
+      upload() {
+        let files = [];
+        this.files.forEach((v, index) => {
+          if (v.status === 'ready' || v.status === 'error') {
+            files.push(Object.assign({}, v));
+          }
+        });
+        return this.uploadFiles(files);
+      },
+      async setValue(newVal, oldVal) {
+        const newData = async (v) => {
+          const reg = /cloud:\/\/([\w.]+\/?)\S*/;
+          let url = '';
+          if (v.fileID) {
+            url = v.fileID;
+          } else {
+            url = v.url;
+          }
+          if (reg.test(url)) {
+            v.fileID = url;
+            v.url = await this.getTempFileURL(url);
+          }
+          if (v.url) v.path = v.url;
+          return v;
+        };
+        if (this.returnType === 'object') {
+          if (newVal) {
+            await newData(newVal);
+          } else {
+            newVal = {};
+          }
+        } else {
+          if (!newVal) newVal = [];
+          for (let i = 0; i < newVal.length; i++) {
+            let v = newVal[i];
+            await newData(v);
+          }
+        }
+        this.localValue = newVal;
+        if (this.form && this.formItem && !this.is_reset) {
+          this.is_reset = false;
+          this.formItem.setValue(this.localValue);
+        }
+        let filesData = Object.keys(newVal).length > 0 ? newVal : [];
+        this.files = [].concat(filesData);
+      },
+
+      /**
+       * 选择文件
+       */
+      choose() {
+        if (this.disabled) return;
+        if (
+          this.files.length >= Number(this.limitLength) &&
+          this.showType !== 'grid' &&
+          this.returnType === 'array'
+        ) {
+          uni.showToast({
+            title: `您最多选择 ${this.limitLength} 个文件`,
+            icon: 'none',
+          });
+          return;
+        }
+        this.chooseFiles();
+      },
+
+      /**
+       * 选择文件并上传
+       */
+      chooseFiles() {
+        const _extname = get_extname(this.fileExtname);
+        // 获取后缀
+        uniCloud
+          .chooseAndUploadFile({
+            type: this.fileMediatype,
+            compressed: false,
+            sizeType: this.sizeType,
+            // TODO 如果为空，video 有问题
+            extension: _extname.length > 0 ? _extname : undefined,
+            count: this.limitLength - this.files.length, //默认9
+            onChooseFile: this.chooseFileCallback,
+            onUploadProgress: (progressEvent) => {
+              this.setProgress(progressEvent, progressEvent.index);
+            },
+          })
+          .then((result) => {
+            this.setSuccessAndError(result.tempFiles);
+          })
+          .catch((err) => {
+            console.log('选择失败', err);
+          });
+      },
+
+      /**
+       * 选择文件回调
+       * @param {Object} res
+       */
+      async chooseFileCallback(res) {
+        const _extname = get_extname(this.fileExtname);
+        const is_one =
+          (Number(this.limitLength) === 1 && this.disablePreview && !this.disabled) ||
+          this.returnType === 'object';
+        // 如果这有一个文件 ，需要清空本地缓存数据
+        if (is_one) {
+          this.files = [];
+        }
+
+        let { filePaths, files } = get_files_and_is_max(res, _extname);
+        if (!(_extname && _extname.length > 0)) {
+          filePaths = res.tempFilePaths;
+          files = res.tempFiles;
+        }
+
+        let currentData = [];
+        for (let i = 0; i < files.length; i++) {
+          if (this.limitLength - this.files.length <= 0) break;
+          files[i].uuid = Date.now();
+          let filedata = await get_file_data(files[i], this.fileMediatype);
+          filedata.progress = 0;
+          filedata.status = 'ready';
+          this.files.push(filedata);
+          currentData.push({
+            ...filedata,
+            file: files[i],
+          });
+        }
+        this.$emit('select', {
+          tempFiles: currentData,
+          tempFilePaths: filePaths,
+        });
+        res.tempFiles = files;
+        // 停止自动上传
+        if (!this.autoUpload) {
+          res.tempFiles = [];
+        }
+      },
+
+      /**
+       * 批传
+       * @param {Object} e
+       */
+      uploadFiles(files) {
+        files = [].concat(files);
+        return uploadCloudFiles
+          .call(this, files, 5, (res) => {
+            this.setProgress(res, res.index, true);
+          })
+          .then((result) => {
+            this.setSuccessAndError(result);
+            return result;
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+      },
+
+      /**
+       * 成功或失败
+       */
+      async setSuccessAndError(res, fn) {
+        let successData = [];
+        let errorData = [];
+        let tempFilePath = [];
+        let errorTempFilePath = [];
+        for (let i = 0; i < res.length; i++) {
+          const item = res[i];
+          const index = item.uuid ? this.files.findIndex((p) => p.uuid === item.uuid) : item.index;
+
+          if (index === -1 || !this.files) break;
+          if (item.errMsg === 'request:fail') {
+            this.files[index].url = item.path;
+            this.files[index].status = 'error';
+            this.files[index].errMsg = item.errMsg;
+            // this.files[index].progress = -1
+            errorData.push(this.files[index]);
+            errorTempFilePath.push(this.files[index].url);
+          } else {
+            this.files[index].errMsg = '';
+            this.files[index].fileID = item.url;
+            const reg = /cloud:\/\/([\w.]+\/?)\S*/;
+            if (reg.test(item.url)) {
+              this.files[index].url = await this.getTempFileURL(item.url);
+            } else {
+              this.files[index].url = item.url;
+            }
+
+            this.files[index].status = 'success';
+            this.files[index].progress += 1;
+            successData.push(this.files[index]);
+            tempFilePath.push(this.files[index].fileID);
+          }
+        }
+
+        if (successData.length > 0) {
+          this.setEmit();
+          // 状态改变返回
+          this.$emit('success', {
+            tempFiles: this.backObject(successData),
+            tempFilePaths: tempFilePath,
+          });
+        }
+
+        if (errorData.length > 0) {
+          this.$emit('fail', {
+            tempFiles: this.backObject(errorData),
+            tempFilePaths: errorTempFilePath,
+          });
+        }
+      },
+
+      /**
+       * 获取进度
+       * @param {Object} progressEvent
+       * @param {Object} index
+       * @param {Object} type
+       */
+      setProgress(progressEvent, index, type) {
+        const fileLenth = this.files.length;
+        const percentNum = (index / fileLenth) * 100;
+        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+        let idx = index;
+        if (!type) {
+          idx = this.files.findIndex((p) => p.uuid === progressEvent.tempFile.uuid);
+        }
+        if (idx === -1 || !this.files[idx]) return;
+        // fix by mehaotian 100 就会消失，-1 是为了让进度条消失
+        this.files[idx].progress = percentCompleted - 1;
+        // 上传中
+        this.$emit('progress', {
+          index: idx,
+          progress: parseInt(percentCompleted),
+          tempFile: this.files[idx],
+        });
+      },
+
+      /**
+       * 删除文件
+       * @param {Object} index
+       */
+      delFile(index) {
+        this.$emit('delete', {
+          tempFile: this.files[index],
+          tempFilePath: this.files[index].url,
+        });
+        this.files.splice(index, 1);
+        this.$nextTick(() => {
+          this.setEmit();
+        });
+      },
+
+      /**
+       * 获取文件名和后缀
+       * @param {Object} name
+       */
+      getFileExt(name) {
+        const last_len = name.lastIndexOf('.');
+        const len = name.length;
+        return {
+          name: name.substring(0, last_len),
+          ext: name.substring(last_len + 1, len),
+        };
+      },
+
+      /**
+       * 处理返回事件
+       */
+      setEmit() {
+        let data = [];
+        let updateUrl = [];
+        if (this.returnType === 'object') {
+          data = this.backObject(this.files)[0];
+          this.localValue = data ? data : null;
+          updateUrl = data ? data.url : '';
+        } else {
+          data = this.backObject(this.files);
+          if (!this.localValue) {
+            this.localValue = [];
+          }
+          this.localValue = [...data];
+          if (this.localValue.length > 0) {
+            this.localValue.forEach((item) => {
+              updateUrl.push(item.url);
+            });
+          }
+        }
+        this.$emit('update:modelValue', this.localValue);
+        this.$emit('update:url', updateUrl);
+      },
+
+      /**
+       * 处理返回参数
+       * @param {Object} files
+       */
+      backObject(files) {
+        let newFilesData = [];
+        files.forEach((v) => {
+          newFilesData.push({
+            extname: v.extname,
+            fileType: v.fileType,
+            image: v.image,
+            name: v.name,
+            path: v.path,
+            size: v.size,
+            fileID: v.fileID,
+            url: v.url,
+          });
+        });
+        return newFilesData;
+      },
+      async getTempFileURL(fileList) {
+        fileList = {
+          fileList: [].concat(fileList),
+        };
+        const urls = await uniCloud.getTempFileURL(fileList);
+        return urls.fileList[0].tempFileURL || '';
+      },
+      /**
+       * 获取父元素实例
+       */
+      getForm(name = 'uniForms') {
+        let parent = this.$parent;
+        let parentName = parent.$options.name;
+        while (parentName !== name) {
+          parent = parent.$parent;
+          if (!parent) return false;
+          parentName = parent.$options.name;
+        }
+        return parent;
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .uni-file-picker {
+    /* #ifndef APP-NVUE */
+    box-sizing: border-box;
+    overflow: hidden;
+    /* width: 100%; */
+    /* #endif */
+    /* flex: 1; */
+    position: relative;
+  }
+
+  .uni-file-picker__header {
+    padding-top: 5px;
+    padding-bottom: 10px;
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    justify-content: space-between;
+  }
+
+  .file-title {
+    font-size: 14px;
+    color: #333;
+  }
+
+  .file-count {
+    font-size: 14px;
+    color: #999;
+  }
+
+  .is-add {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    align-items: center;
+    justify-content: center;
+  }
+  .add-icon {
+    width: 57rpx;
+    height: 49rpx;
+  }
+  .file-subtitle {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 0;
+    width: 140rpx;
+    height: 36rpx;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    color: #fff;
+    font-weight: 500;
+    background: rgba(#000, 0.3);
+    font-size: 24rpx;
+  }
+</style>
diff --git a/sheep/components/s-uploader/upload-file.vue b/sheep/components/s-uploader/upload-file.vue
new file mode 100644
index 0000000..233d281
--- /dev/null
+++ b/sheep/components/s-uploader/upload-file.vue
@@ -0,0 +1,335 @@
+<template>
+  <view class="uni-file-picker__files">
+    <view v-if="!readonly" class="files-button" @click="choose">
+      <slot></slot>
+    </view>
+    <!-- :class="{'is-text-box':showType === 'list'}" -->
+    <view v-if="list.length > 0" class="uni-file-picker__lists is-text-box" :style="borderStyle">
+      <!-- ,'is-list-card':showType === 'list-card' -->
+
+      <view
+        class="uni-file-picker__lists-box"
+        v-for="(item, index) in list"
+        :key="index"
+        :class="{
+          'files-border': index !== 0 && styles.dividline,
+        }"
+        :style="index !== 0 && styles.dividline && borderLineStyle"
+      >
+        <view class="uni-file-picker__item">
+          <!-- :class="{'is-text-image':showType === 'list'}" -->
+          <!-- 	<view class="files__image is-text-image">
+						<image class="header-image" :src="item.logo" mode="aspectFit"></image>
+					</view> -->
+          <view class="files__name">{{ item.name }}</view>
+          <view v-if="delIcon && !readonly" class="icon-del-box icon-files" @click="delFile(index)">
+            <view class="icon-del icon-files"></view>
+            <view class="icon-del rotate"></view>
+          </view>
+        </view>
+        <view
+          v-if="(item.progress && item.progress !== 100) || item.progress === 0"
+          class="file-picker__progress"
+        >
+          <progress
+            class="file-picker__progress-item"
+            :percent="item.progress === -1 ? 0 : item.progress"
+            stroke-width="4"
+            :backgroundColor="item.errMsg ? '#ff5a5f' : '#EBEBEB'"
+          />
+        </view>
+        <view
+          v-if="item.status === 'error'"
+          class="file-picker__mask"
+          @click.stop="uploadFiles(item, index)"
+        >
+          点击重试
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'uploadFile',
+    emits: ['uploadFiles', 'choose', 'delFile'],
+    props: {
+      filesList: {
+        type: Array,
+        default() {
+          return [];
+        },
+      },
+      delIcon: {
+        type: Boolean,
+        default: true,
+      },
+      limit: {
+        type: [Number, String],
+        default: 9,
+      },
+      showType: {
+        type: String,
+        default: '',
+      },
+      listStyles: {
+        type: Object,
+        default() {
+          return {
+            // 是否显示边框
+            border: true,
+            // 是否显示分隔线
+            dividline: true,
+            // 线条样式
+            borderStyle: {},
+          };
+        },
+      },
+      readonly: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    computed: {
+      list() {
+        let files = [];
+        this.filesList.forEach((v) => {
+          files.push(v);
+        });
+        return files;
+      },
+      styles() {
+        let styles = {
+          border: true,
+          dividline: true,
+          'border-style': {},
+        };
+        return Object.assign(styles, this.listStyles);
+      },
+      borderStyle() {
+        let { borderStyle, border } = this.styles;
+        let obj = {};
+        if (!border) {
+          obj.border = 'none';
+        } else {
+          let width = (borderStyle && borderStyle.width) || 1;
+          width = this.value2px(width);
+          let radius = (borderStyle && borderStyle.radius) || 5;
+          radius = this.value2px(radius);
+          obj = {
+            'border-width': width,
+            'border-style': (borderStyle && borderStyle.style) || 'solid',
+            'border-color': (borderStyle && borderStyle.color) || '#eee',
+            'border-radius': radius,
+          };
+        }
+        let classles = '';
+        for (let i in obj) {
+          classles += `${i}:${obj[i]};`;
+        }
+        return classles;
+      },
+      borderLineStyle() {
+        let obj = {};
+        let { borderStyle } = this.styles;
+        if (borderStyle && borderStyle.color) {
+          obj['border-color'] = borderStyle.color;
+        }
+        if (borderStyle && borderStyle.width) {
+          let width = (borderStyle && borderStyle.width) || 1;
+          let style = (borderStyle && borderStyle.style) || 0;
+          if (typeof width === 'number') {
+            width += 'px';
+          } else {
+            width = width.indexOf('px') ? width : width + 'px';
+          }
+          obj['border-width'] = width;
+
+          if (typeof style === 'number') {
+            style += 'px';
+          } else {
+            style = style.indexOf('px') ? style : style + 'px';
+          }
+          obj['border-top-style'] = style;
+        }
+        let classles = '';
+        for (let i in obj) {
+          classles += `${i}:${obj[i]};`;
+        }
+        return classles;
+      },
+    },
+
+    methods: {
+      uploadFiles(item, index) {
+        this.$emit('uploadFiles', {
+          item,
+          index,
+        });
+      },
+      choose() {
+        this.$emit('choose');
+      },
+      delFile(index) {
+        this.$emit('delFile', index);
+      },
+      value2px(value) {
+        if (typeof value === 'number') {
+          value += 'px';
+        } else {
+          value = value.indexOf('px') !== -1 ? value : value + 'px';
+        }
+        return value;
+      },
+    },
+  };
+</script>
+
+<style lang="scss">
+  .uni-file-picker__files {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  .files-button {
+    // border: 1px red solid;
+  }
+
+  .uni-file-picker__lists {
+    position: relative;
+    margin-top: 5px;
+    overflow: hidden;
+  }
+
+  .file-picker__mask {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    color: #fff;
+    font-size: 14px;
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+
+  .uni-file-picker__lists-box {
+    position: relative;
+  }
+
+  .uni-file-picker__item {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    align-items: center;
+    padding: 8px 10px;
+    padding-right: 5px;
+    padding-left: 10px;
+  }
+
+  .files-border {
+    border-top: 1px #eee solid;
+  }
+
+  .files__name {
+    flex: 1;
+    font-size: 14px;
+    color: #666;
+    margin-right: 25px;
+    /* #ifndef APP-NVUE */
+    word-break: break-all;
+    word-wrap: break-word;
+    /* #endif */
+  }
+
+  .icon-files {
+    /* #ifndef APP-NVUE */
+    position: static;
+    background-color: initial;
+    /* #endif */
+  }
+
+  // .icon-files .icon-del {
+  // 	background-color: #333;
+  // 	width: 12px;
+  // 	height: 1px;
+  // }
+
+  .is-list-card {
+    border: 1px #eee solid;
+    margin-bottom: 5px;
+    border-radius: 5px;
+    box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);
+    padding: 5px;
+  }
+
+  .files__image {
+    width: 40px;
+    height: 40px;
+    margin-right: 10px;
+  }
+
+  .header-image {
+    width: 100%;
+    height: 100%;
+  }
+
+  .is-text-box {
+    border: 1px #eee solid;
+    border-radius: 5px;
+  }
+
+  .is-text-image {
+    width: 25px;
+    height: 25px;
+    margin-left: 5px;
+  }
+
+  .rotate {
+    position: absolute;
+    transform: rotate(90deg);
+  }
+
+  .icon-del-box {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    margin: auto 0;
+    /* #endif */
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0px;
+    bottom: 0;
+    right: 5px;
+    height: 26px;
+    width: 26px;
+    // border-radius: 50%;
+    // background-color: rgba(0, 0, 0, 0.5);
+    z-index: 2;
+    transform: rotate(-45deg);
+  }
+
+  .icon-del {
+    width: 15px;
+    height: 1px;
+    background-color: #333;
+    // border-radius: 1px;
+  }
+
+  /* #ifdef H5 */
+  @media all and (min-width: 768px) {
+    .uni-file-picker__files {
+      max-width: 375px;
+    }
+  }
+
+  /* #endif */
+</style>
diff --git a/sheep/components/s-uploader/upload-image.vue b/sheep/components/s-uploader/upload-image.vue
new file mode 100644
index 0000000..b66956a
--- /dev/null
+++ b/sheep/components/s-uploader/upload-image.vue
@@ -0,0 +1,306 @@
+<template>
+  <view class="uni-file-picker__container">
+    <view class="file-picker__box" v-for="(url, index) in list" :key="index" :style="boxStyle">
+      <view class="file-picker__box-content" :style="borderStyle">
+        <image
+          class="file-image"
+          :src="getImageUrl(url)"
+          mode="aspectFill"
+          @click.stop="previewImage(url, index)"
+        ></image>
+        <view v-if="delIcon && !readonly" class="icon-del-box" @click.stop="delFile(index)">
+          <view class="icon-del"></view>
+          <view class="icon-del rotate"></view>
+        </view>
+        <!-- <view v-if="item.errMsg" class="file-picker__mask" @click.stop="uploadFiles(item, index)">
+          点击重试
+        </view> -->
+      </view>
+    </view>
+    <view v-if="list.length < limit && !readonly" class="file-picker__box" :style="boxStyle">
+      <view class="file-picker__box-content is-add" :style="borderStyle" @click="choose">
+        <slot>
+          <view class="icon-add"></view>
+          <view class="icon-add rotate"></view>
+        </slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import sheep from '@/sheep';
+  export default {
+    name: 'uploadImage',
+    emits: ['uploadFiles', 'choose', 'delFile'],
+    props: {
+      filesList: {
+        type: [Array, String],
+        default() {
+          return [];
+        },
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      disablePreview: {
+        type: Boolean,
+        default: false,
+      },
+      limit: {
+        type: [Number, String],
+        default: 9,
+      },
+      imageStyles: {
+        type: Object,
+        default() {
+          return {
+            width: 'auto',
+            height: 'auto',
+            border: {},
+          };
+        },
+      },
+      delIcon: {
+        type: Boolean,
+        default: true,
+      },
+      readonly: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    computed: {
+      list() {
+        if (typeof this.filesList === 'string') {
+          if (this.filesList) {
+            return [this.filesList];
+          } else {
+            return [];
+          }
+        }
+        return this.filesList;
+      },
+      styles() {
+        let styles = {
+          width: 'auto',
+          height: 'auto',
+          border: {},
+        };
+        return Object.assign(styles, this.imageStyles);
+      },
+      boxStyle() {
+        const { width = 'auto', height = 'auto' } = this.styles;
+        let obj = {};
+        if (height === 'auto') {
+          if (width !== 'auto') {
+            obj.height = this.value2px(width);
+            obj['padding-top'] = 0;
+          } else {
+            obj.height = 0;
+          }
+        } else {
+          obj.height = this.value2px(height);
+          obj['padding-top'] = 0;
+        }
+
+        if (width === 'auto') {
+          if (height !== 'auto') {
+            obj.width = this.value2px(height);
+          } else {
+            obj.width = '33.3%';
+          }
+        } else {
+          obj.width = this.value2px(width);
+        }
+
+        let classles = '';
+        for (let i in obj) {
+          classles += `${i}:${obj[i]};`;
+        }
+        return classles;
+      },
+      borderStyle() {
+        let { border } = this.styles;
+        let obj = {};
+        const widthDefaultValue = 1;
+        const radiusDefaultValue = 3;
+        if (typeof border === 'boolean') {
+          obj.border = border ? '1px #eee solid' : 'none';
+        } else {
+          let width = (border && border.width) || widthDefaultValue;
+          width = this.value2px(width);
+          let radius = (border && border.radius) || radiusDefaultValue;
+          radius = this.value2px(radius);
+          obj = {
+            'border-width': width,
+            'border-style': (border && border.style) || 'solid',
+            'border-color': (border && border.color) || '#eee',
+            'border-radius': radius,
+          };
+        }
+        let classles = '';
+        for (let i in obj) {
+          classles += `${i}:${obj[i]};`;
+        }
+        return classles;
+      },
+    },
+    methods: {
+      getImageUrl(url) {
+        if ('blob:http:' === url.substr(0, 10)) {
+          return url;
+        } else {
+          return sheep.$url.cdn(url);
+        }
+      },
+      uploadFiles(item, index) {
+        this.$emit('uploadFiles', item);
+      },
+      choose() {
+        this.$emit('choose');
+      },
+      delFile(index) {
+        this.$emit('delFile', index);
+      },
+      previewImage(img, index) {
+        let urls = [];
+        if (Number(this.limit) === 1 && this.disablePreview && !this.disabled) {
+          this.$emit('choose');
+        }
+        if (this.disablePreview) return;
+        this.list.forEach((i) => {
+          urls.push(this.getImageUrl(i));
+        });
+
+        uni.previewImage({
+          urls: urls,
+          current: index,
+        });
+      },
+      value2px(value) {
+        if (typeof value === 'number') {
+          value += 'px';
+        } else {
+          if (value.indexOf('%') === -1) {
+            value = value.indexOf('px') !== -1 ? value : value + 'px';
+          }
+        }
+        return value;
+      },
+    },
+  };
+</script>
+
+<style lang="scss">
+  .uni-file-picker__container {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    box-sizing: border-box;
+    /* #endif */
+    flex-wrap: wrap;
+    margin: -5px;
+  }
+
+  .file-picker__box {
+    position: relative;
+    // flex: 0 0 33.3%;
+    width: 33.3%;
+    height: 0;
+    padding-top: 33.33%;
+    /* #ifndef APP-NVUE */
+    box-sizing: border-box;
+    /* #endif */
+  }
+
+  .file-picker__box-content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: 5px;
+    border: 1px #eee solid;
+    border-radius: 5px;
+    overflow: hidden;
+  }
+
+  .file-picker__progress {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    /* border: 1px red solid; */
+    z-index: 2;
+  }
+
+  .file-picker__progress-item {
+    width: 100%;
+  }
+
+  .file-picker__mask {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    color: #fff;
+    font-size: 12px;
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+
+  .file-image {
+    width: 100%;
+    height: 100%;
+  }
+
+  .is-add {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    align-items: center;
+    justify-content: center;
+  }
+
+  .icon-add {
+    width: 50px;
+    height: 5px;
+    background-color: #f1f1f1;
+    border-radius: 2px;
+  }
+
+  .rotate {
+    position: absolute;
+    transform: rotate(90deg);
+  }
+
+  .icon-del-box {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 3px;
+    right: 3px;
+    height: 26px;
+    width: 26px;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 2;
+    transform: rotate(-45deg);
+  }
+
+  .icon-del {
+    width: 15px;
+    height: 2px;
+    background-color: #fff;
+    border-radius: 2px;
+  }
+</style>
diff --git a/sheep/components/s-uploader/utils.js b/sheep/components/s-uploader/utils.js
new file mode 100644
index 0000000..c1e8073
--- /dev/null
+++ b/sheep/components/s-uploader/utils.js
@@ -0,0 +1,110 @@
+/**
+ * 获取文件名和后缀
+ * @param {String} name
+ */
+export const get_file_ext = (name) => {
+  const last_len = name.lastIndexOf('.');
+  const len = name.length;
+  return {
+    name: name.substring(0, last_len),
+    ext: name.substring(last_len + 1, len),
+  };
+};
+
+/**
+ * 获取扩展名
+ * @param {Array} fileExtname
+ */
+export const get_extname = (fileExtname) => {
+  if (!Array.isArray(fileExtname)) {
+    let extname = fileExtname.replace(/(\[|\])/g, '');
+    return extname.split(',');
+  } else {
+    return fileExtname;
+  }
+  return [];
+};
+
+/**
+ * 获取文件和检测是否可选
+ */
+export const get_files_and_is_max = (res, _extname) => {
+  let filePaths = [];
+  let files = [];
+  if (!_extname || _extname.length === 0) {
+    return {
+      filePaths,
+      files,
+    };
+  }
+  res.tempFiles.forEach((v) => {
+    let fileFullName = get_file_ext(v.name);
+    const extname = fileFullName.ext.toLowerCase();
+    if (_extname.indexOf(extname) !== -1) {
+      files.push(v);
+      filePaths.push(v.path);
+    }
+  });
+  if (files.length !== res.tempFiles.length) {
+    uni.showToast({
+      title: `当前选择了${res.tempFiles.length}个文件 ，${
+        res.tempFiles.length - files.length
+      } 个文件格式不正确`,
+      icon: 'none',
+      duration: 5000,
+    });
+  }
+
+  return {
+    filePaths,
+    files,
+  };
+};
+
+/**
+ * 获取图片信息
+ * @param {Object} filepath
+ */
+export const get_file_info = (filepath) => {
+  return new Promise((resolve, reject) => {
+    uni.getImageInfo({
+      src: filepath,
+      success(res) {
+        resolve(res);
+      },
+      fail(err) {
+        reject(err);
+      },
+    });
+  });
+};
+/**
+ * 获取封装数据
+ */
+export const get_file_data = async (files, type = 'image') => {
+  // 最终需要上传数据库的数据
+  let fileFullName = get_file_ext(files.name);
+  const extname = fileFullName.ext.toLowerCase();
+  let filedata = {
+    name: files.name,
+    uuid: files.uuid,
+    extname: extname || '',
+    cloudPath: files.cloudPath,
+    fileType: files.fileType,
+    url: files.path || files.path,
+    size: files.size, //单位是字节
+    image: {},
+    path: files.path,
+    video: {},
+  };
+  if (type === 'image') {
+    const imageinfo = await get_file_info(files.path);
+    delete filedata.video;
+    filedata.image.width = imageinfo.width;
+    filedata.image.height = imageinfo.height;
+    filedata.image.location = imageinfo.path;
+  } else {
+    delete filedata.image;
+  }
+  return filedata;
+};
diff --git a/sheep/components/s-user-card/s-user-card.vue b/sheep/components/s-user-card/s-user-card.vue
new file mode 100644
index 0000000..d234098
--- /dev/null
+++ b/sheep/components/s-user-card/s-user-card.vue
@@ -0,0 +1,167 @@
+<!-- 装修用户组件：用户卡片 -->
+<template>
+	<view class="ss-user-info-wrap ss-p-t-50">
+		<view class="ss-flex ss-col-center ss-row-between ss-m-b-20">
+			<view class="left-box ss-flex ss-col-center ss-m-l-36">
+				<view class="avatar-box ss-m-r-24">
+					<image class="avatar-img" :src="
+              isLogin
+                ? sheep.$url.cdn(userInfo.avatar)
+                : sheep.$url.static('/static/img/shop/default_avatar.png')
+            " mode="aspectFill" @tap="sheep.$router.go('/pages/user/info')"></image>
+				</view>
+				<view>
+					<view class="nickname-box ss-flex ss-col-center">
+						<view class="nick-name ss-m-r-20">{{ userInfo?.nickname || nickname }}</view>
+					</view>
+				</view>
+			</view>
+			<view class="right-box ss-m-r-52">
+				<button class="ss-reset-button" @tap="showShareModal">
+					<text class="sicon-qrcode"></text>
+				</button>
+			</view>
+		</view>
+
+		<!-- 提示绑定手机号 先隐藏 yudao 需要再修改 -->
+		<view
+      class="bind-mobile-box ss-flex ss-row-between ss-col-center"
+      v-if="isLogin && !userInfo.mobile"
+    >
+      <view class="ss-flex">
+        <text class="cicon-mobile-o" />
+        <view class="mobile-title ss-m-l-20"> 点击绑定手机号确保账户安全 </view>
+      </view>
+      <button class="ss-reset-button bind-btn" @tap="onBind">去绑定</button>
+    </view>
+	</view>
+</template>
+
+<script setup>
+	/**
+	 * 用户卡片
+	 *
+	 * @property {Number} leftSpace 									- 容器左间距
+	 * @property {Number} rightSpace 									- 容器右间距
+	 *
+	 * @property {String} avatar 					- 头像
+	 * @property {String} nickname 					- 昵称
+	 * @property {String} vip		  				- 等级
+	 * @property {String} collectNum 				- 收藏数
+	 * @property {String} likeNum 					- 点赞数
+	 *
+	 *
+	 */
+	import {
+		computed,
+		reactive
+	} from 'vue';
+	import sheep from '@/sheep';
+	import {
+		showShareModal,
+		showAuthModal
+	} from '@/sheep/hooks/useModal';
+
+	// 用户信息
+	const userInfo = computed(() => sheep.$store('user').userInfo);
+	console.log('用户信息', userInfo)
+
+	// 是否登录
+	const isLogin = computed(() => sheep.$store('user').isLogin);
+	// 接收参数
+	const props = defineProps({
+		background: {
+			type: String,
+			default: '',
+		},
+		// 头像
+		avatar: {
+			type: String,
+			default: '',
+		},
+		nickname: {
+			type: String,
+			default: '请先登录',
+		},
+		vip: {
+			type: [String, Number],
+			default: '1',
+		},
+		collectNum: {
+			type: [String, Number],
+			default: '1',
+		},
+		likeNum: {
+			type: [String, Number],
+			default: '1',
+		},
+	});
+
+	function onBind() {
+		showAuthModal('changeMobile');
+	}
+</script>
+
+<style lang="scss" scoped>
+	.ss-user-info-wrap {
+		box-sizing: border-box;
+
+		.avatar-box {
+			width: 100rpx;
+			height: 100rpx;
+			border-radius: 50%;
+			overflow: hidden;
+
+			.avatar-img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		.nick-name {
+			font-size: 34rpx;
+			font-weight: 400;
+			color: #333333;
+			line-height: normal;
+		}
+
+		.vip-img {
+			width: 30rpx;
+			height: 30rpx;
+		}
+
+		.sicon-qrcode {
+			font-size: 40rpx;
+		}
+	}
+
+	.bind-mobile-box {
+		width: 100%;
+		height: 84rpx;
+		padding: 0 34rpx 0 44rpx;
+		box-sizing: border-box;
+		background: #ffffff;
+		box-shadow: 0px -8rpx 9rpx 0px rgba(#e0e0e0, 0.3);
+
+		.cicon-mobile-o {
+			font-size: 30rpx;
+			color: #ff690d;
+		}
+
+		.mobile-title {
+			font-size: 24rpx;
+			font-weight: 500;
+			color: #ff690d;
+		}
+
+		.bind-btn {
+			width: 100rpx;
+			height: 50rpx;
+			background: #ff6100;
+			border-radius: 25rpx;
+			font-size: 24rpx;
+			font-weight: 500;
+			color: #ffffff;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/sheep/components/s-video-block/s-video-block.vue b/sheep/components/s-video-block/s-video-block.vue
new file mode 100644
index 0000000..38e5b84
--- /dev/null
+++ b/sheep/components/s-video-block/s-video-block.vue
@@ -0,0 +1,32 @@
+<!-- 装修图文组件：视频播放 -->
+<template>
+  <su-video
+    class="sss"
+    :uid="guid()"
+    :src="sheep.$url.cdn(data.videoUrl)"
+    :poster="sheep.$url.cdn(data.posterUrl)"
+    :height="styles.height * 2"
+    :autoplay="data.autoplay"
+  ></su-video>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { guid } from '@/sheep/helper';
+  const props = defineProps({
+    data: {
+      type: Object,
+      default() {},
+    },
+    styles: {
+      type: Object,
+      default() {},
+    },
+  });
+</script>
+
+<style lang="scss" scoped>
+  .sss {
+    z-index: -100;
+  }
+</style>
diff --git a/sheep/components/s-wallet-card/s-wallet-card.vue b/sheep/components/s-wallet-card/s-wallet-card.vue
new file mode 100644
index 0000000..54348e9
--- /dev/null
+++ b/sheep/components/s-wallet-card/s-wallet-card.vue
@@ -0,0 +1,93 @@
+<!-- 装修用户组件：用户资产 -->
+<template>
+	<view class="ss-wallet-menu-wrap ss-flex ss-col-center">
+		<view class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
+			@tap="sheep.$router.go('/pages/user/wallet/money')">
+			<view class="value-box ss-flex ss-col-bottom">
+				<view class="value-text ss-line-1">{{ fen2yuan(userWallet.balance) || '0.00' }}</view>
+				<view class="unit-text ss-m-l-6">元</view>
+			</view>
+			<view class="menu-title ss-m-t-28">账户余额</view>
+		</view>
+		<view class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
+			@tap="sheep.$router.go('/pages/user/wallet/score')">
+			<view class="value-box ss-flex ss-col-bottom">
+				<view class="value-text">{{ userInfo.point || 0 }}</view>
+				<view class="unit-text ss-m-l-6">个</view>
+			</view>
+			<view class="menu-title ss-m-t-28">积分</view>
+		</view>
+		<view class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center" @tap="
+        sheep.$router.go('/pages/coupon/list', {
+          type: 'geted',
+        })
+      ">
+			<view class="value-box ss-flex ss-col-bottom">
+				<view class="value-text">{{ numData.unusedCouponCount }}</view>
+				<view class="unit-text ss-m-l-6">张</view>
+			</view>
+			<view class="menu-title ss-m-t-28">优惠券</view>
+		</view>
+		<view class="menu-item ss-flex-col ss-row-center ss-col-center menu-wallet"
+          @tap="sheep.$router.go('/pages/user/wallet/money')">
+			<image class="item-icon" :src="sheep.$url.static('/static/img/shop/user/wallet_icon.png')" mode="aspectFit" />
+			<view class="menu-title ss-m-t-30">我的钱包</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	/**
+	 * 装修组件 - 订单菜单组
+	 */
+	import { computed } from 'vue';
+	import sheep from '@/sheep';
+  import { fen2yuan } from '../../hooks/useGoods';
+
+	const userWallet = computed(() => sheep.$store('user').userWallet);
+	const userInfo = computed(() => sheep.$store('user').userInfo);
+	const numData = computed(() => sheep.$store('user').numData);
+</script>
+
+<style lang="scss" scoped>
+	.ss-wallet-menu-wrap {
+		.menu-wallet {
+			width: 144rpx;
+		}
+
+		.menu-item {
+			height: 160rpx;
+
+			.menu-title {
+				font-size: 24rpx;
+				line-height: 24rpx;
+				color: #333333;
+			}
+
+			.item-icon {
+				width: 44rpx;
+				height: 44rpx;
+			}
+
+			.value-box {
+				height: 50rpx;
+				text-align: center;
+
+				.value-text {
+					font-size: 28rpx;
+					color: #000000;
+					line-height: 28rpx;
+					vertical-align: text-bottom;
+					font-family: OPPOSANS;
+				}
+
+				.unit-text {
+					font-size: 24rpx;
+					color: #343434;
+					line-height: 24rpx;
+				}
+			}
+		}
+	}
+</style>
+
diff --git a/sheep/config/index.js b/sheep/config/index.js
new file mode 100644
index 0000000..b9b9bcf
--- /dev/null
+++ b/sheep/config/index.js
@@ -0,0 +1,19 @@
+// 开发环境配置
+export let baseUrl;
+export let version;
+if (process.env.NODE_ENV === 'development') {
+  baseUrl = import.meta.env.SHOPRO_DEV_BASE_URL;
+} else {
+  baseUrl = import.meta.env.SHOPRO_BASE_URL;
+}
+version = import.meta.env.SHOPRO_VERSION;
+console.log(`[商城 ${version}]`);
+
+export const apiPath = import.meta.env.SHOPRO_API_PATH;
+export const staticUrl = import.meta.env.SHOPRO_STATIC_URL;
+
+export default {
+  baseUrl,
+  apiPath,
+  staticUrl,
+};
diff --git a/sheep/config/zIndex.js b/sheep/config/zIndex.js
new file mode 100644
index 0000000..6652d48
--- /dev/null
+++ b/sheep/config/zIndex.js
@@ -0,0 +1,20 @@
+// uniapp在H5中各API的z-index值如下：
+/**
+ * actionsheet: 999
+ * modal: 999
+ * navigate: 998
+ * tabbar: 998
+ * toast: 999
+ */
+
+export default {
+  toast: 10090,
+  noNetwork: 10080,
+  popup: 10075, // popup包含popup，actionsheet，keyboard，picker的值
+  mask: 10070,
+  navbar: 980,
+  topTips: 975,
+  sticky: 970,
+  indexListSticky: 965,
+  popover: 960,
+};
diff --git a/sheep/helper/digit.js b/sheep/helper/digit.js
new file mode 100644
index 0000000..be50b32
--- /dev/null
+++ b/sheep/helper/digit.js
@@ -0,0 +1,168 @@
+let _boundaryCheckingState = true; // 是否进行越界检查的全局开关
+
+/**
+ * 把错误的数据转正
+ * @private
+ * @example strip(0.09999999999999998)=0.1
+ */
+function strip(num, precision = 15) {
+  return +parseFloat(Number(num).toPrecision(precision));
+}
+
+/**
+ * Return digits length of a number
+ * @private
+ * @param {*number} num Input number
+ */
+function digitLength(num) {
+  // Get digit length of e
+  const eSplit = num.toString().split(/[eE]/);
+  const len = (eSplit[0].split('.')[1] || '').length - +(eSplit[1] || 0);
+  return len > 0 ? len : 0;
+}
+
+/**
+ * 把小数转成整数,如果是小数则放大成整数
+ * @private
+ * @param {*number} num 输入数
+ */
+function float2Fixed(num) {
+  if (num.toString().indexOf('e') === -1) {
+    return Number(num.toString().replace('.', ''));
+  }
+  const dLen = digitLength(num);
+  return dLen > 0 ? strip(Number(num) * Math.pow(10, dLen)) : Number(num);
+}
+
+/**
+ * 检测数字是否越界，如果越界给出提示
+ * @private
+ * @param {*number} num 输入数
+ */
+function checkBoundary(num) {
+  if (_boundaryCheckingState) {
+    if (num > Number.MAX_SAFE_INTEGER || num < Number.MIN_SAFE_INTEGER) {
+      console.warn(`${num} 超出了精度限制，结果可能不正确`);
+    }
+  }
+}
+
+/**
+ * 把递归操作扁平迭代化
+ * @param {number[]} arr 要操作的数字数组
+ * @param {function} operation 迭代操作
+ * @private
+ */
+function iteratorOperation(arr, operation) {
+  const [num1, num2, ...others] = arr;
+  let res = operation(num1, num2);
+
+  others.forEach((num) => {
+    res = operation(res, num);
+  });
+
+  return res;
+}
+
+/**
+ * 高精度乘法
+ * @export
+ */
+export function times(...nums) {
+  if (nums.length > 2) {
+    return iteratorOperation(nums, times);
+  }
+
+  const [num1, num2] = nums;
+  const num1Changed = float2Fixed(num1);
+  const num2Changed = float2Fixed(num2);
+  const baseNum = digitLength(num1) + digitLength(num2);
+  const leftValue = num1Changed * num2Changed;
+
+  checkBoundary(leftValue);
+
+  return leftValue / Math.pow(10, baseNum);
+}
+
+/**
+ * 高精度加法
+ * @export
+ */
+export function plus(...nums) {
+  if (nums.length > 2) {
+    return iteratorOperation(nums, plus);
+  }
+
+  const [num1, num2] = nums;
+  // 取最大的小数位
+  const baseNum = Math.pow(10, Math.max(digitLength(num1), digitLength(num2)));
+  // 把小数都转为整数然后再计算
+  return (times(num1, baseNum) + times(num2, baseNum)) / baseNum;
+}
+
+/**
+ * 高精度减法
+ * @export
+ */
+export function minus(...nums) {
+  if (nums.length > 2) {
+    return iteratorOperation(nums, minus);
+  }
+
+  const [num1, num2] = nums;
+  const baseNum = Math.pow(10, Math.max(digitLength(num1), digitLength(num2)));
+  return (times(num1, baseNum) - times(num2, baseNum)) / baseNum;
+}
+
+/**
+ * 高精度除法
+ * @export
+ */
+export function divide(...nums) {
+  if (nums.length > 2) {
+    return iteratorOperation(nums, divide);
+  }
+
+  const [num1, num2] = nums;
+  const num1Changed = float2Fixed(num1);
+  const num2Changed = float2Fixed(num2);
+  checkBoundary(num1Changed);
+  checkBoundary(num2Changed);
+  // 重要，这里必须用strip进行修正
+  return times(
+    num1Changed / num2Changed,
+    strip(Math.pow(10, digitLength(num2) - digitLength(num1))),
+  );
+}
+
+/**
+ * 四舍五入
+ * @export
+ */
+export function round(num, ratio) {
+  const base = Math.pow(10, ratio);
+  let result = divide(Math.round(Math.abs(times(num, base))), base);
+  if (num < 0 && result !== 0) {
+    result = times(result, -1);
+  }
+  // 位数不足则补0
+  return result;
+}
+
+/**
+ * 是否进行边界检查，默认开启
+ * @param flag 标记开关，true 为开启，false 为关闭，默认为 true
+ * @export
+ */
+export function enableBoundaryChecking(flag = true) {
+  _boundaryCheckingState = flag;
+}
+
+export default {
+  times,
+  plus,
+  minus,
+  divide,
+  round,
+  enableBoundaryChecking,
+};
diff --git a/sheep/helper/index.js b/sheep/helper/index.js
new file mode 100644
index 0000000..38e6afe
--- /dev/null
+++ b/sheep/helper/index.js
@@ -0,0 +1,708 @@
+import test from './test.js';
+import { round } from './digit.js';
+/**
+ * @description 如果value小于min，取min；如果value大于max，取max
+ * @param {number} min
+ * @param {number} max
+ * @param {number} value
+ */
+function range(min = 0, max = 0, value = 0) {
+  return Math.max(min, Math.min(max, Number(value)));
+}
+
+/**
+ * @description 用于获取用户传递值的px值  如果用户传递了"xxpx"或者"xxrpx"，取出其数值部分，如果是"xxxrpx"还需要用过uni.upx2px进行转换
+ * @param {number|string} value 用户传递值的px值
+ * @param {boolean} unit
+ * @returns {number|string}
+ */
+export function getPx(value, unit = false) {
+  if (test.number(value)) {
+    return unit ? `${value}px` : Number(value);
+  }
+  // 如果带有rpx，先取出其数值部分，再转为px值
+  if (/(rpx|upx)$/.test(value)) {
+    return unit ? `${uni.upx2px(parseInt(value))}px` : Number(uni.upx2px(parseInt(value)));
+  }
+  return unit ? `${parseInt(value)}px` : parseInt(value);
+}
+
+/**
+ * @description 进行延时，以达到可以简写代码的目的
+ * @param {number} value 堵塞时间 单位ms 毫秒
+ * @returns {Promise} 返回promise
+ */
+export function sleep(value = 30) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, value);
+  });
+}
+/**
+ * @description 运行期判断平台
+ * @returns {string} 返回所在平台(小写)
+ * @link 运行期判断平台 https://uniapp.dcloud.io/frame?id=判断平台
+ */
+export function os() {
+  return uni.getSystemInfoSync().platform.toLowerCase();
+}
+/**
+ * @description 获取系统信息同步接口
+ * @link 获取系统信息同步接口 https://uniapp.dcloud.io/api/system/info?id=getsysteminfosync
+ */
+export function sys() {
+  return uni.getSystemInfoSync();
+}
+
+/**
+ * @description 取一个区间数
+ * @param {Number} min 最小值
+ * @param {Number} max 最大值
+ */
+function random(min, max) {
+  if (min >= 0 && max > 0 && max >= min) {
+    const gab = max - min + 1;
+    return Math.floor(Math.random() * gab + min);
+  }
+  return 0;
+}
+
+/**
+ * @param {Number} len uuid的长度
+ * @param {Boolean} firstU 将返回的首字母置为"u"
+ * @param {Nubmer} radix 生成uuid的基数(意味着返回的字符串都是这个基数),2-二进制,8-八进制,10-十进制,16-十六进制
+ */
+export function guid(len = 32, firstU = true, radix = null) {
+  const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
+  const uuid = [];
+  radix = radix || chars.length;
+
+  if (len) {
+    // 如果指定uuid长度,只是取随机的字符,0|x为位运算,能去掉x的小数位,返回整数位
+    for (let i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
+  } else {
+    let r;
+    // rfc4122标准要求返回的uuid中,某些位为固定的字符
+    uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
+    uuid[14] = '4';
+
+    for (let i = 0; i < 36; i++) {
+      if (!uuid[i]) {
+        r = 0 | (Math.random() * 16);
+        uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
+      }
+    }
+  }
+  // 移除第一个字符,并用u替代,因为第一个字符为数值时,该guuid不能用作id或者class
+  if (firstU) {
+    uuid.shift();
+    return `u${uuid.join('')}`;
+  }
+  return uuid.join('');
+}
+
+/**
+* @description 获取父组件的参数，因为支付宝小程序不支持provide/inject的写法
+   this.$parent在非H5中，可以准确获取到父组件，但是在H5中，需要多次this.$parent.$parent.xxx
+   这里默认值等于undefined有它的含义，因为最顶层元素(组件)的$parent就是undefined，意味着不传name
+   值(默认为undefined)，就是查找最顶层的$parent
+*  @param {string|undefined} name 父组件的参数名
+*/
+export function $parent(name = undefined) {
+  let parent = this.$parent;
+  // 通过while历遍，这里主要是为了H5需要多层解析的问题
+  while (parent) {
+    // 父组件
+    if (parent.$options && parent.$options.name !== name) {
+      // 如果组件的name不相等，继续上一级寻找
+      parent = parent.$parent;
+    } else {
+      return parent;
+    }
+  }
+  return false;
+}
+
+/**
+ * @description 样式转换
+ * 对象转字符串，或者字符串转对象
+ * @param {object | string} customStyle 需要转换的目标
+ * @param {String} target 转换的目的，object-转为对象，string-转为字符串
+ * @returns {object|string}
+ */
+export function addStyle(customStyle, target = 'object') {
+  // 字符串转字符串，对象转对象情形，直接返回
+  if (
+    test.empty(customStyle) ||
+    (typeof customStyle === 'object' && target === 'object') ||
+    (target === 'string' && typeof customStyle === 'string')
+  ) {
+    return customStyle;
+  }
+  // 字符串转对象
+  if (target === 'object') {
+    // 去除字符串样式中的两端空格(中间的空格不能去掉，比如padding: 20px 0如果去掉了就错了)，空格是无用的
+    customStyle = trim(customStyle);
+    // 根据";"将字符串转为数组形式
+    const styleArray = customStyle.split(';');
+    const style = {};
+    // 历遍数组，拼接成对象
+    for (let i = 0; i < styleArray.length; i++) {
+      // 'font-size:20px;color:red;'，如此最后字符串有";"的话，会导致styleArray最后一个元素为空字符串，这里需要过滤
+      if (styleArray[i]) {
+        const item = styleArray[i].split(':');
+        style[trim(item[0])] = trim(item[1]);
+      }
+    }
+    return style;
+  }
+  // 这里为对象转字符串形式
+  let string = '';
+  for (const i in customStyle) {
+    // 驼峰转为中划线的形式，否则css内联样式，无法识别驼峰样式属性名
+    const key = i.replace(/([A-Z])/g, '-$1').toLowerCase();
+    string += `${key}:${customStyle[i]};`;
+  }
+  // 去除两端空格
+  return trim(string);
+}
+
+/**
+ * @description 添加单位，如果有rpx，upx，%，px等单位结尾或者值为auto，直接返回，否则加上px单位结尾
+ * @param {string|number} value 需要添加单位的值
+ * @param {string} unit 添加的单位名 比如px
+ */
+export function addUnit(value = 'auto', unit = 'px') {
+  value = String(value);
+  return test.number(value) ? `${value}${unit}` : value;
+}
+
+/**
+ * @description 深度克隆
+ * @param {object} obj 需要深度克隆的对象
+ * @returns {*} 克隆后的对象或者原值（不是对象）
+ */
+function deepClone(obj) {
+  // 对常见的“非”值，直接返回原来值
+  if ([null, undefined, NaN, false].includes(obj)) return obj;
+  if (typeof obj !== 'object' && typeof obj !== 'function') {
+    // 原始类型直接返回
+    return obj;
+  }
+  const o = test.array(obj) ? [] : {};
+  for (const i in obj) {
+    if (obj.hasOwnProperty(i)) {
+      o[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i];
+    }
+  }
+  return o;
+}
+
+/**
+ * @description JS对象深度合并
+ * @param {object} target 需要拷贝的对象
+ * @param {object} source 拷贝的来源对象
+ * @returns {object|boolean} 深度合并后的对象或者false（入参有不是对象）
+ */
+export function deepMerge(target = {}, source = {}) {
+  target = deepClone(target);
+  if (typeof target !== 'object' || typeof source !== 'object') return false;
+  for (const prop in source) {
+    if (!source.hasOwnProperty(prop)) continue;
+    if (prop in target) {
+      if (typeof target[prop] !== 'object') {
+        target[prop] = source[prop];
+      } else if (typeof source[prop] !== 'object') {
+        target[prop] = source[prop];
+      } else if (target[prop].concat && source[prop].concat) {
+        target[prop] = target[prop].concat(source[prop]);
+      } else {
+        target[prop] = deepMerge(target[prop], source[prop]);
+      }
+    } else {
+      target[prop] = source[prop];
+    }
+  }
+  return target;
+}
+
+/**
+ * @description error提示
+ * @param {*} err 错误内容
+ */
+function error(err) {
+  // 开发环境才提示，生产环境不会提示
+  if (process.env.NODE_ENV === 'development') {
+    console.error(`SheepJS:${err}`);
+  }
+}
+
+/**
+ * @description 打乱数组
+ * @param {array} array 需要打乱的数组
+ * @returns {array} 打乱后的数组
+ */
+function randomArray(array = []) {
+  // 原理是sort排序,Math.random()产生0<= x < 1之间的数,会导致x-0.05大于或者小于0
+  return array.sort(() => Math.random() - 0.5);
+}
+
+// padStart 的 polyfill，因为某些机型或情况，还无法支持es7的padStart，比如电脑版的微信小程序
+// 所以这里做一个兼容polyfill的兼容处理
+if (!String.prototype.padStart) {
+  // 为了方便表示这里 fillString 用了ES6 的默认参数，不影响理解
+  String.prototype.padStart = function (maxLength, fillString = ' ') {
+    if (Object.prototype.toString.call(fillString) !== '[object String]') {
+      throw new TypeError('fillString must be String');
+    }
+    const str = this;
+    // 返回 String(str) 这里是为了使返回的值是字符串字面量，在控制台中更符合直觉
+    if (str.length >= maxLength) return String(str);
+
+    const fillLength = maxLength - str.length;
+    let times = Math.ceil(fillLength / fillString.length);
+    while ((times >>= 1)) {
+      fillString += fillString;
+      if (times === 1) {
+        fillString += fillString;
+      }
+    }
+    return fillString.slice(0, fillLength) + str;
+  };
+}
+
+/**
+ * @description 格式化时间
+ * @param {String|Number} dateTime 需要格式化的时间戳
+ * @param {String} fmt 格式化规则 yyyy:mm:dd|yyyy:mm|yyyy年mm月dd日|yyyy年mm月dd日 hh时MM分等,可自定义组合 默认yyyy-mm-dd
+ * @returns {string} 返回格式化后的字符串
+ */
+function timeFormat(dateTime = null, formatStr = 'yyyy-mm-dd') {
+  let date;
+  // 若传入时间为假值，则取当前时间
+  if (!dateTime) {
+    date = new Date();
+  }
+  // 若为unix秒时间戳，则转为毫秒时间戳（逻辑有点奇怪，但不敢改，以保证历史兼容）
+  else if (/^\d{10}$/.test(dateTime?.toString().trim())) {
+    date = new Date(dateTime * 1000);
+  }
+  // 若用户传入字符串格式时间戳，new Date无法解析，需做兼容
+  else if (typeof dateTime === 'string' && /^\d+$/.test(dateTime.trim())) {
+    date = new Date(Number(dateTime));
+  }
+  // 其他都认为符合 RFC 2822 规范
+  else {
+    // 处理平台性差异，在Safari/Webkit中，new Date仅支持/作为分割符的字符串时间
+    date = new Date(typeof dateTime === 'string' ? dateTime.replace(/-/g, '/') : dateTime);
+  }
+
+  const timeSource = {
+    y: date.getFullYear().toString(), // 年
+    m: (date.getMonth() + 1).toString().padStart(2, '0'), // 月
+    d: date.getDate().toString().padStart(2, '0'), // 日
+    h: date.getHours().toString().padStart(2, '0'), // 时
+    M: date.getMinutes().toString().padStart(2, '0'), // 分
+    s: date.getSeconds().toString().padStart(2, '0'), // 秒
+    // 有其他格式化字符需求可以继续添加，必须转化成字符串
+  };
+
+  for (const key in timeSource) {
+    const [ret] = new RegExp(`${key}+`).exec(formatStr) || [];
+    if (ret) {
+      // 年可能只需展示两位
+      const beginIndex = key === 'y' && ret.length === 2 ? 2 : 0;
+      formatStr = formatStr.replace(ret, timeSource[key].slice(beginIndex));
+    }
+  }
+
+  return formatStr;
+}
+
+/**
+ * @description 时间戳转为多久之前
+ * @param {String|Number} timestamp 时间戳
+ * @param {String|Boolean} format
+ * 格式化规则如果为时间格式字符串，超出一定时间范围，返回固定的时间格式；
+ * 如果为布尔值false，无论什么时间，都返回多久以前的格式
+ * @returns {string} 转化后的内容
+ */
+function timeFrom(timestamp = null, format = 'yyyy-mm-dd') {
+  if (timestamp == null) timestamp = Number(new Date());
+  timestamp = parseInt(timestamp);
+  // 判断用户输入的时间戳是秒还是毫秒,一般前端js获取的时间戳是毫秒(13位),后端传过来的为秒(10位)
+  if (timestamp.toString().length == 10) timestamp *= 1000;
+  let timer = new Date().getTime() - timestamp;
+  timer = parseInt(timer / 1000);
+  // 如果小于5分钟,则返回"刚刚",其他以此类推
+  let tips = '';
+  switch (true) {
+    case timer < 300:
+      tips = '刚刚';
+      break;
+    case timer >= 300 && timer < 3600:
+      tips = `${parseInt(timer / 60)}分钟前`;
+      break;
+    case timer >= 3600 && timer < 86400:
+      tips = `${parseInt(timer / 3600)}小时前`;
+      break;
+    case timer >= 86400 && timer < 2592000:
+      tips = `${parseInt(timer / 86400)}天前`;
+      break;
+    default:
+      // 如果format为false，则无论什么时间戳，都显示xx之前
+      if (format === false) {
+        if (timer >= 2592000 && timer < 365 * 86400) {
+          tips = `${parseInt(timer / (86400 * 30))}个月前`;
+        } else {
+          tips = `${parseInt(timer / (86400 * 365))}年前`;
+        }
+      } else {
+        tips = timeFormat(timestamp, format);
+      }
+  }
+  return tips;
+}
+
+/**
+ * @description 去除空格
+ * @param String str 需要去除空格的字符串
+ * @param String pos both(左右)|left|right|all 默认both
+ */
+function trim(str, pos = 'both') {
+  str = String(str);
+  if (pos == 'both') {
+    return str.replace(/^\s+|\s+$/g, '');
+  }
+  if (pos == 'left') {
+    return str.replace(/^\s*/, '');
+  }
+  if (pos == 'right') {
+    return str.replace(/(\s*$)/g, '');
+  }
+  if (pos == 'all') {
+    return str.replace(/\s+/g, '');
+  }
+  return str;
+}
+
+/**
+ * @description 对象转url参数
+ * @param {object} data,对象
+ * @param {Boolean} isPrefix,是否自动加上"?"
+ * @param {string} arrayFormat 规则 indices|brackets|repeat|comma
+ */
+function queryParams(data = {}, isPrefix = true, arrayFormat = 'brackets') {
+  const prefix = isPrefix ? '?' : '';
+  const _result = [];
+  if (['indices', 'brackets', 'repeat', 'comma'].indexOf(arrayFormat) == -1)
+    arrayFormat = 'brackets';
+  for (const key in data) {
+    const value = data[key];
+    // 去掉为空的参数
+    if (['', undefined, null].indexOf(value) >= 0) {
+      continue;
+    }
+    // 如果值为数组，另行处理
+    if (value.constructor === Array) {
+      // e.g. {ids: [1, 2, 3]}
+      switch (arrayFormat) {
+        case 'indices':
+          // 结果: ids[0]=1&ids[1]=2&ids[2]=3
+          for (let i = 0; i < value.length; i++) {
+            _result.push(`${key}[${i}]=${value[i]}`);
+          }
+          break;
+        case 'brackets':
+          // 结果: ids[]=1&ids[]=2&ids[]=3
+          value.forEach((_value) => {
+            _result.push(`${key}[]=${_value}`);
+          });
+          break;
+        case 'repeat':
+          // 结果: ids=1&ids=2&ids=3
+          value.forEach((_value) => {
+            _result.push(`${key}=${_value}`);
+          });
+          break;
+        case 'comma':
+          // 结果: ids=1,2,3
+          let commaStr = '';
+          value.forEach((_value) => {
+            commaStr += (commaStr ? ',' : '') + _value;
+          });
+          _result.push(`${key}=${commaStr}`);
+          break;
+        default:
+          value.forEach((_value) => {
+            _result.push(`${key}[]=${_value}`);
+          });
+      }
+    } else {
+      _result.push(`${key}=${value}`);
+    }
+  }
+  return _result.length ? prefix + _result.join('&') : '';
+}
+
+/**
+ * 显示消息提示框
+ * @param {String} title 提示的内容，长度与 icon 取值有关。
+ * @param {Number} duration 提示的延迟时间，单位毫秒，默认：2000
+ */
+function toast(title, duration = 2000) {
+  uni.showToast({
+    title: String(title),
+    icon: 'none',
+    duration,
+  });
+}
+
+/**
+ * @description 根据主题type值,获取对应的图标
+ * @param {String} type 主题名称,primary|info|error|warning|success
+ * @param {boolean} fill 是否使用fill填充实体的图标
+ */
+function type2icon(type = 'success', fill = false) {
+  // 如果非预置值,默认为success
+  if (['primary', 'info', 'error', 'warning', 'success'].indexOf(type) == -1) type = 'success';
+  let iconName = '';
+  // 目前(2019-12-12),info和primary使用同一个图标
+  switch (type) {
+    case 'primary':
+      iconName = 'info-circle';
+      break;
+    case 'info':
+      iconName = 'info-circle';
+      break;
+    case 'error':
+      iconName = 'close-circle';
+      break;
+    case 'warning':
+      iconName = 'error-circle';
+      break;
+    case 'success':
+      iconName = 'checkmark-circle';
+      break;
+    default:
+      iconName = 'checkmark-circle';
+  }
+  // 是否是实体类型,加上-fill,在icon组件库中,实体的类名是后面加-fill的
+  if (fill) iconName += '-fill';
+  return iconName;
+}
+
+/**
+ * @description 数字格式化
+ * @param {number|string} number 要格式化的数字
+ * @param {number} decimals 保留几位小数
+ * @param {string} decimalPoint 小数点符号
+ * @param {string} thousandsSeparator 千分位符号
+ * @returns {string} 格式化后的数字
+ */
+function priceFormat(number, decimals = 0, decimalPoint = '.', thousandsSeparator = ',') {
+  number = `${number}`.replace(/[^0-9+-Ee.]/g, '');
+  const n = !isFinite(+number) ? 0 : +number;
+  const prec = !isFinite(+decimals) ? 0 : Math.abs(decimals);
+  const sep = typeof thousandsSeparator === 'undefined' ? ',' : thousandsSeparator;
+  const dec = typeof decimalPoint === 'undefined' ? '.' : decimalPoint;
+  let s = '';
+
+  s = (prec ? round(n, prec) + '' : `${Math.round(n)}`).split('.');
+  const re = /(-?\d+)(\d{3})/;
+  while (re.test(s[0])) {
+    s[0] = s[0].replace(re, `$1${sep}$2`);
+  }
+
+  if ((s[1] || '').length < prec) {
+    s[1] = s[1] || '';
+    s[1] += new Array(prec - s[1].length + 1).join('0');
+  }
+  return s.join(dec);
+}
+
+/**
+ * @description 获取duration值
+ * 如果带有ms或者s直接返回，如果大于一定值，认为是ms单位，小于一定值，认为是s单位
+ * 比如以30位阈值，那么300大于30，可以理解为用户想要的是300ms，而不是想花300s去执行一个动画
+ * @param {String|number} value 比如: "1s"|"100ms"|1|100
+ * @param {boolean} unit  提示: 如果是false 默认返回number
+ * @return {string|number}
+ */
+function getDuration(value, unit = true) {
+  const valueNum = parseInt(value);
+  if (unit) {
+    if (/s$/.test(value)) return value;
+    return value > 30 ? `${value}ms` : `${value}s`;
+  }
+  if (/ms$/.test(value)) return valueNum;
+  if (/s$/.test(value)) return valueNum > 30 ? valueNum : valueNum * 1000;
+  return valueNum;
+}
+
+/**
+ * @description 日期的月或日补零操作
+ * @param {String} value 需要补零的值
+ */
+function padZero(value) {
+  return `00${value}`.slice(-2);
+}
+
+/**
+ * @description 获取某个对象下的属性，用于通过类似'a.b.c'的形式去获取一个对象的的属性的形式
+ * @param {object} obj 对象
+ * @param {string} key 需要获取的属性字段
+ * @returns {*}
+ */
+function getProperty(obj, key) {
+  if (!obj) {
+    return;
+  }
+  if (typeof key !== 'string' || key === '') {
+    return '';
+  }
+  if (key.indexOf('.') !== -1) {
+    const keys = key.split('.');
+    let firstObj = obj[keys[0]] || {};
+
+    for (let i = 1; i < keys.length; i++) {
+      if (firstObj) {
+        firstObj = firstObj[keys[i]];
+      }
+    }
+    return firstObj;
+  }
+  return obj[key];
+}
+
+/**
+ * @description 设置对象的属性值，如果'a.b.c'的形式进行设置
+ * @param {object} obj 对象
+ * @param {string} key 需要设置的属性
+ * @param {string} value 设置的值
+ */
+function setProperty(obj, key, value) {
+  if (!obj) {
+    return;
+  }
+  // 递归赋值
+  const inFn = function (_obj, keys, v) {
+    // 最后一个属性key
+    if (keys.length === 1) {
+      _obj[keys[0]] = v;
+      return;
+    }
+    // 0~length-1个key
+    while (keys.length > 1) {
+      const k = keys[0];
+      if (!_obj[k] || typeof _obj[k] !== 'object') {
+        _obj[k] = {};
+      }
+      const key = keys.shift();
+      // 自调用判断是否存在属性，不存在则自动创建对象
+      inFn(_obj[k], keys, v);
+    }
+  };
+
+  if (typeof key !== 'string' || key === '') {
+  } else if (key.indexOf('.') !== -1) {
+    // 支持多层级赋值操作
+    const keys = key.split('.');
+    inFn(obj, keys, value);
+  } else {
+    obj[key] = value;
+  }
+}
+
+/**
+ * @description 获取当前页面路径
+ */
+function page() {
+  const pages = getCurrentPages();
+  // 某些特殊情况下(比如页面进行redirectTo时的一些时机)，pages可能为空数组
+  return `/${pages[pages.length - 1]?.route ?? ''}`;
+}
+
+/**
+ * @description 获取当前路由栈实例数组
+ */
+function pages() {
+  const pages = getCurrentPages();
+  return pages;
+}
+
+/**
+ * 获取H5-真实根地址 兼容hash+history模式
+ */
+export function getRootUrl() {
+  let url = '';
+  // #ifdef H5
+  url = location.origin + '/';
+
+  if (location.hash !== '') {
+    url += '#/';
+  }
+  // #endif
+  return url;
+}
+
+/**
+ * copyText 多端复制文本
+ */
+export function copyText(text) {
+  // #ifndef H5
+  uni.setClipboardData({
+    data: text,
+    success: function () {
+      toast('复制成功!');
+    },
+    fail: function () {
+      toast('复制失败!');
+    },
+  });
+  // #endif
+  // #ifdef H5
+  var createInput = document.createElement('textarea');
+  createInput.value = text;
+  document.body.appendChild(createInput);
+  createInput.select();
+  document.execCommand('Copy');
+  createInput.className = 'createInput';
+  createInput.style.display = 'none';
+  toast('复制成功');
+  // #endif
+}
+
+export default {
+  range,
+  getPx,
+  sleep,
+  os,
+  sys,
+  random,
+  guid,
+  $parent,
+  addStyle,
+  addUnit,
+  deepClone,
+  deepMerge,
+  error,
+  randomArray,
+  timeFormat,
+  timeFrom,
+  trim,
+  queryParams,
+  toast,
+  type2icon,
+  priceFormat,
+  getDuration,
+  padZero,
+  getProperty,
+  setProperty,
+  page,
+  pages,
+  test,
+  getRootUrl,
+  copyText,
+};
diff --git a/sheep/helper/test.js b/sheep/helper/test.js
new file mode 100644
index 0000000..ca550a1
--- /dev/null
+++ b/sheep/helper/test.js
@@ -0,0 +1,285 @@
+/**
+ * 验证电子邮箱格式
+ */
+function email(value) {
+  return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(value);
+}
+
+/**
+ * 验证手机格式
+ */
+function mobile(value) {
+  return /^1[23456789]\d{9}$/.test(value);
+}
+
+/**
+ * 验证URL格式
+ */
+function url(value) {
+  return /^((https|http|ftp|rtsp|mms):\/\/)(([0-9a-zA-Z_!~*'().&=+$%-]+: )?[0-9a-zA-Z_!~*'().&=+$%-]+@)?(([0-9]{1,3}.){3}[0-9]{1,3}|([0-9a-zA-Z_!~*'()-]+.)*([0-9a-zA-Z][0-9a-zA-Z-]{0,61})?[0-9a-zA-Z].[a-zA-Z]{2,6})(:[0-9]{1,4})?((\/?)|(\/[0-9a-zA-Z_!~*'().;?:@&=+$,%#-]+)+\/?)$/.test(
+    value,
+  );
+}
+
+/**
+ * 验证日期格式
+ */
+function date(value) {
+  if (!value) return false;
+  // 判断是否数值或者字符串数值(意味着为时间戳)，转为数值，否则new Date无法识别字符串时间戳
+  if (number(value)) value = +value;
+  return !/Invalid|NaN/.test(new Date(value).toString());
+}
+
+/**
+ * 验证ISO类型的日期格式
+ */
+function dateISO(value) {
+  return /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/.test(value);
+}
+
+/**
+ * 验证十进制数字
+ */
+function number(value) {
+  return /^[\+-]?(\d+\.?\d*|\.\d+|\d\.\d+e\+\d+)$/.test(value);
+}
+
+/**
+ * 验证字符串
+ */
+function string(value) {
+  return typeof value === 'string';
+}
+
+/**
+ * 验证整数
+ */
+function digits(value) {
+  return /^\d+$/.test(value);
+}
+
+/**
+ * 验证身份证号码
+ */
+function idCard(value) {
+  return /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value);
+}
+
+/**
+ * 是否车牌号
+ */
+function carNo(value) {
+  // 新能源车牌
+  const xreg =
+    /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
+  // 旧车牌
+  const creg =
+    /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
+  if (value.length === 7) {
+    return creg.test(value);
+  }
+  if (value.length === 8) {
+    return xreg.test(value);
+  }
+  return false;
+}
+
+/**
+ * 金额,只允许2位小数
+ */
+function amount(value) {
+  // 金额，只允许保留两位小数
+  return /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/.test(value);
+}
+
+/**
+ * 中文
+ */
+function chinese(value) {
+  const reg = /^[\u4e00-\u9fa5]+$/gi;
+  return reg.test(value);
+}
+
+/**
+ * 只能输入字母
+ */
+function letter(value) {
+  return /^[a-zA-Z]*$/.test(value);
+}
+
+/**
+ * 只能是字母或者数字
+ */
+function enOrNum(value) {
+  // 英文或者数字
+  const reg = /^[0-9a-zA-Z]*$/g;
+  return reg.test(value);
+}
+
+/**
+ * 验证是否包含某个值
+ */
+function contains(value, param) {
+  return value.indexOf(param) >= 0;
+}
+
+/**
+ * 验证一个值范围[min, max]
+ */
+function range(value, param) {
+  return value >= param[0] && value <= param[1];
+}
+
+/**
+ * 验证一个长度范围[min, max]
+ */
+function rangeLength(value, param) {
+  return value.length >= param[0] && value.length <= param[1];
+}
+
+/**
+ * 是否固定电话
+ */
+function landline(value) {
+  const reg = /^\d{3,4}-\d{7,8}(-\d{3,4})?$/;
+  return reg.test(value);
+}
+
+/**
+ * 判断是否为空
+ */
+function empty(value) {
+  switch (typeof value) {
+    case 'undefined':
+      return true;
+    case 'string':
+      if (value.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, '').length == 0) return true;
+      break;
+    case 'boolean':
+      if (!value) return true;
+      break;
+    case 'number':
+      if (value === 0 || isNaN(value)) return true;
+      break;
+    case 'object':
+      if (value === null || value.length === 0) return true;
+      for (const i in value) {
+        return false;
+      }
+      return true;
+  }
+  return false;
+}
+
+/**
+ * 是否json字符串
+ */
+function jsonString(value) {
+  if (typeof value === 'string') {
+    try {
+      const obj = JSON.parse(value);
+      if (typeof obj === 'object' && obj) {
+        return true;
+      }
+      return false;
+    } catch (e) {
+      return false;
+    }
+  }
+  return false;
+}
+
+/**
+ * 是否数组
+ */
+function array(value) {
+  if (typeof Array.isArray === 'function') {
+    return Array.isArray(value);
+  }
+  return Object.prototype.toString.call(value) === '[object Array]';
+}
+
+/**
+ * 是否对象
+ */
+function object(value) {
+  return Object.prototype.toString.call(value) === '[object Object]';
+}
+
+/**
+ * 是否短信验证码
+ */
+function code(value, len = 6) {
+  return new RegExp(`^\\d{${len}}$`).test(value);
+}
+
+/**
+ * 是否函数方法
+ * @param {Object} value
+ */
+function func(value) {
+  return typeof value === 'function';
+}
+
+/**
+ * 是否promise对象
+ * @param {Object} value
+ */
+function promise(value) {
+  return object(value) && func(value.then) && func(value.catch);
+}
+
+/** 是否图片格式
+ * @param {Object} value
+ */
+function image(value) {
+  const newValue = value.split('?')[0];
+  const IMAGE_REGEXP = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i;
+  return IMAGE_REGEXP.test(newValue);
+}
+
+/**
+ * 是否视频格式
+ * @param {Object} value
+ */
+function video(value) {
+  const VIDEO_REGEXP = /\.(mp4|mpg|mpeg|dat|asf|avi|rm|rmvb|mov|wmv|flv|mkv|m3u8)/i;
+  return VIDEO_REGEXP.test(value);
+}
+
+/**
+ * 是否为正则对象
+ * @param {Object}
+ * @return {Boolean}
+ */
+function regExp(o) {
+  return o && Object.prototype.toString.call(o) === '[object RegExp]';
+}
+
+export default {
+  email,
+  mobile,
+  url,
+  date,
+  dateISO,
+  number,
+  digits,
+  idCard,
+  carNo,
+  amount,
+  chinese,
+  letter,
+  enOrNum,
+  contains,
+  range,
+  rangeLength,
+  empty,
+  isEmpty: empty,
+  isNumber: number,
+  jsonString,
+  landline,
+  object,
+  array,
+  code,
+};
diff --git a/sheep/helper/throttle.js b/sheep/helper/throttle.js
new file mode 100644
index 0000000..c318127
--- /dev/null
+++ b/sheep/helper/throttle.js
@@ -0,0 +1,31 @@
+let timer;
+let flag;
+/**
+ * 节流原理：在一定时间内，只能触发一次
+ *
+ * @param {Function} func 要执行的回调函数
+ * @param {Number} wait 延时的时间
+ * @param {Boolean} immediate 是否立即执行
+ * @return null
+ */
+function throttle(func, wait = 500, immediate = true) {
+  if (immediate) {
+    if (!flag) {
+      flag = true;
+      // 如果是立即执行，则在wait毫秒内开始时执行
+      typeof func === 'function' && func();
+      timer = setTimeout(() => {
+        flag = false;
+      }, wait);
+    } else {
+    }
+  } else if (!flag) {
+    flag = true;
+    // 如果是非立即执行，则在wait毫秒内的结束处执行
+    timer = setTimeout(() => {
+      flag = false;
+      typeof func === 'function' && func();
+    }, wait);
+  }
+}
+export default throttle;
diff --git a/sheep/helper/tools.js b/sheep/helper/tools.js
new file mode 100644
index 0000000..49efcec
--- /dev/null
+++ b/sheep/helper/tools.js
@@ -0,0 +1,67 @@
+import router from '@/sheep/router';
+export default {
+  /**
+   * 打电话
+   * @param {String<Number>} phoneNumber - 数字字符串
+   */
+  callPhone(phoneNumber = '') {
+    let num = phoneNumber.toString();
+    uni.makePhoneCall({
+      phoneNumber: num,
+      fail(err) {
+        console.log('makePhoneCall出错', err);
+      },
+    });
+  },
+
+  /**
+   * 微信头像
+   * @param {String} url -图片地址
+   */
+  checkMPUrl(url) {
+    // #ifdef MP
+    if (
+      url.substring(0, 4) === 'http' &&
+      url.substring(0, 5) !== 'https' &&
+      url.substring(0, 12) !== 'http://store' &&
+      url.substring(0, 10) !== 'http://tmp' &&
+      url.substring(0, 10) !== 'http://usr'
+    ) {
+      url = 'https' + url.substring(4, url.length);
+    }
+    // #endif
+    return url;
+  },
+
+  /**
+   * getUuid 生成唯一id
+   */
+  getUuid(len = 32, firstU = true, radix = null) {
+    const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
+    const uuid = [];
+    radix = radix || chars.length;
+
+    if (len) {
+      // 如果指定uuid长度,只是取随机的字符,0|x为位运算,能去掉x的小数位,返回整数位
+      for (let i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
+    } else {
+      let r;
+      // rfc4122标准要求返回的uuid中,某些位为固定的字符
+      uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
+      uuid[14] = '4';
+
+      for (let i = 0; i < 36; i++) {
+        if (!uuid[i]) {
+          r = 0 | (Math.random() * 16);
+          uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
+        }
+      }
+    }
+    // 移除第一个字符,并用u替代,因为第一个字符为数值时,该guuid不能用作id或者class
+    if (firstU) {
+      uuid.shift();
+      return `u${uuid.join('')}`;
+    }
+    return uuid.join('');
+  },
+};
diff --git a/sheep/helper/utils.js b/sheep/helper/utils.js
new file mode 100644
index 0000000..bcb5d25
--- /dev/null
+++ b/sheep/helper/utils.js
@@ -0,0 +1,168 @@
+export function isArray(value) {
+  if (typeof Array.isArray === 'function') {
+    return Array.isArray(value);
+  } else {
+    return Object.prototype.toString.call(value) === '[object Array]';
+  }
+}
+
+export function isObject(value) {
+  return Object.prototype.toString.call(value) === '[object Object]';
+}
+
+export function isNumber(value) {
+  return !isNaN(Number(value));
+}
+
+export function isFunction(value) {
+  return typeof value == 'function';
+}
+
+export function isString(value) {
+  return typeof value == 'string';
+}
+
+export function isEmpty(value) {
+  if (isArray(value)) {
+    return value.length === 0;
+  }
+
+  if (isObject(value)) {
+    return Object.keys(value).length === 0;
+  }
+
+  return value === '' || value === undefined || value === null;
+}
+
+export function isBoolean(value) {
+  return typeof value === 'boolean';
+}
+
+export function last(data) {
+  if (isArray(data) || isString(data)) {
+    return data[data.length - 1];
+  }
+}
+
+export function cloneDeep(obj) {
+  const d = isArray(obj) ? obj : {};
+
+  if (isObject(obj)) {
+    for (const key in obj) {
+      if (obj[key]) {
+        if (obj[key] && typeof obj[key] === 'object') {
+          d[key] = cloneDeep(obj[key]);
+        } else {
+          d[key] = obj[key];
+        }
+      }
+    }
+  }
+
+  return d;
+}
+
+export function clone(obj) {
+  return Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj));
+}
+
+export function deepMerge(a, b) {
+  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 contains(parent, node) {
+  while (node && (node = node.parentNode)) if (node === parent) return true;
+  return false;
+}
+
+export function orderBy(list, key) {
+  return list.sort((a, b) => a[key] - b[key]);
+}
+
+export function deepTree(list) {
+  const newList = [];
+  const map = {};
+
+  list.forEach((e) => (map[e.id] = e));
+
+  list.forEach((e) => {
+    const parent = map[e.parentId];
+
+    if (parent) {
+      (parent.children || (parent.children = [])).push(e);
+    } else {
+      newList.push(e);
+    }
+  });
+
+  const fn = (list) => {
+    list.map((e) => {
+      if (e.children instanceof Array) {
+        e.children = orderBy(e.children, 'orderNum');
+
+        fn(e.children);
+      }
+    });
+  };
+
+  fn(newList);
+
+  return orderBy(newList, 'orderNum');
+}
+
+export function revDeepTree(list = []) {
+  const d = [];
+  let id = 0;
+
+  const deep = (list, parentId) => {
+    list.forEach((e) => {
+      if (!e.id) {
+        e.id = id++;
+      }
+
+      e.parentId = parentId;
+
+      d.push(e);
+
+      if (e.children && isArray(e.children)) {
+        deep(e.children, e.id);
+      }
+    });
+  };
+
+  deep(list || [], null);
+
+  return d;
+}
+
+export function basename(path) {
+  let index = path.lastIndexOf('/');
+  index = index > -1 ? index : path.lastIndexOf('\\');
+  if (index < 0) {
+    return path;
+  }
+  return path.substring(index + 1);
+}
+
+export function isWxBrowser() {
+  const ua = navigator.userAgent.toLowerCase();
+  if (ua.match(/MicroMessenger/i) == 'micromessenger') {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+/**
+ * @description 如果value小于min，取min；如果value大于max，取max
+ * @param {number} min
+ * @param {number} max
+ * @param {number} value
+ */
+export function range(min = 0, max = 0, value = 0) {
+  return Math.max(min, Math.min(max, Number(value)));
+}
diff --git a/sheep/hooks/useApp.js b/sheep/hooks/useApp.js
new file mode 100644
index 0000000..e69de29
diff --git a/sheep/hooks/useGoods.js b/sheep/hooks/useGoods.js
new file mode 100644
index 0000000..5627447
--- /dev/null
+++ b/sheep/hooks/useGoods.js
@@ -0,0 +1,389 @@
+import { ref } from 'vue';
+import dayjs from 'dayjs';
+import $url from '@/sheep/url';
+import { formatDate } from '@/sheep/util';
+
+/**
+ * 格式化销量
+ * @param {'exact' | string} type 格式类型：exact=精确值，其它=大致数量
+ * @param {number} num 销量
+ * @return {string} 格式化后的销量字符串
+ */
+export function formatSales(type, num) {
+  let prefix = type !== 'exact' && num < 10 ? '销量' : '已售';
+  return formatNum(prefix, type, num)
+}
+
+/**
+ * 格式化兑换量
+ * @param {'exact' | string} type 格式类型：exact=精确值，其它=大致数量
+ * @param {number} num 销量
+ * @return {string} 格式化后的销量字符串
+ */
+export function formatExchange(type, num) {
+  return formatNum('已兑换', type, num)
+}
+
+
+/**
+ * 格式化库存
+ * @param {'exact' | any} type 格式类型：exact=精确值，其它=大致数量
+ * @param {number} num 销量
+ * @return {string} 格式化后的销量字符串
+ */
+export function formatStock(type, num) {
+  return formatNum('库存', type, num)
+}
+
+/**
+ * 格式化数字
+ * @param {string} prefix 前缀
+ * @param {'exact' | string} type 格式类型：exact=精确值，其它=大致数量
+ * @param {number} num 销量
+ * @return {string} 格式化后的销量字符串
+ */
+export function formatNum(prefix, type, num) {
+  num = (num || 0);
+  // 情况一：精确数值
+  if (type === 'exact') {
+    return prefix + num;
+  }
+  // 情况二：小于等于 10
+  if (num < 10) {
+    return `${prefix}≤10`;
+  }
+  // 情况三：大于 10，除第一位外，其它位都显示为0
+  // 例如：100  - 199  显示为 100+
+  //      9000 - 9999 显示为 9000+
+  const numStr = num.toString();
+  const first = numStr[0];
+  const other = '0'.repeat(numStr.length - 1);
+  return `${prefix}${first}${other}+`;
+}
+
+// 格式化价格
+export function formatPrice(e) {
+  return e.length === 1 ? e[0] : e.join('~');
+}
+
+// 视频格式后缀列表
+const VIDEO_SUFFIX_LIST = ['.avi', '.mp4']
+
+/**
+ * 转换商品轮播的链接列表：根据链接的后缀，判断是视频链接还是图片链接
+ *
+ * @param {string[]} urlList 链接列表
+ * @return {{src: string, type: 'video' | 'image' }[]}  转换后的链接列表
+ */
+export function formatGoodsSwiper(urlList) {
+  return urlList?.filter(url => url).map((url, key) => {
+    const isVideo = VIDEO_SUFFIX_LIST.some(suffix => url.includes(suffix));
+    const type = isVideo ? 'video' : 'image'
+    const src = $url.cdn(url);
+    return { type, src }
+  }) || [];
+}
+
+/**
+ * 格式化订单状态的颜色
+ *
+ * @param order 订单
+ * @return {string} 颜色的 class 名称
+ */
+export function formatOrderColor(order) {
+  if (order.status === 0) {
+    return 'info-color';
+  }
+  if (order.status === 10
+    || order.status === 20
+    || (order.status === 30 && !order.commentStatus)) {
+    return 'warning-color';
+  }
+  if (order.status === 30 && order.commentStatus) {
+    return 'success-color';
+  }
+  return 'danger-color';
+}
+
+/**
+ * 格式化订单状态
+ *
+ * @param order 订单
+ */
+export function formatOrderStatus(order) {
+  if (order.status === 0) {
+    return '待付款';
+  }
+  if (order.status === 10 && order.deliveryType === 1) {
+    return '待发货';
+  }
+  if (order.status === 10 && order.deliveryType === 2) {
+    return '待核销';
+  }
+  if (order.status === 20) {
+    return '待收货';
+  }
+  if (order.status === 30 && !order.commentStatus) {
+    return '待评价';
+  }
+  if (order.status === 30 && order.commentStatus) {
+    return '已完成';
+  }
+  return '已关闭';
+}
+
+/**
+ * 格式化订单状态的描述
+ *
+ * @param order 订单
+ */
+export function formatOrderStatusDescription(order) {
+  if (order.status === 0) {
+    return `请在 ${ formatDate(order.payExpireTime) } 前完成支付`;
+  }
+  if (order.status === 10) {
+    return '商家未发货，请耐心等待';
+  }
+  if (order.status === 20) {
+    return '商家已发货，请耐心等待';
+  }
+  if (order.status === 30 && !order.commentStatus) {
+    return '已收货，快去评价一下吧';
+  }
+  if (order.status === 30 && order.commentStatus) {
+    return '交易完成，感谢您的支持';
+  }
+  return '交易关闭';
+}
+
+/**
+ * 处理订单的 button 操作按钮数组
+ *
+ * @param order 订单
+ */
+export function handleOrderButtons(order) {
+  order.buttons = []
+  if (order.type === 3) { // 查看拼团
+    order.buttons.push('combination');
+  }
+  if (order.status === 20) { // 确认收货
+    order.buttons.push('confirm');
+  }
+  if (order.logisticsId > 0) { // 查看物流
+    order.buttons.push('express');
+  }
+  if (order.status === 0) { // 取消订单 / 发起支付
+    order.buttons.push('cancel');
+    order.buttons.push('pay');
+  }
+  if (order.status === 30 && !order.commentStatus) { // 发起评价
+    order.buttons.push('comment');
+  }
+  if (order.status === 40) { // 删除订单
+    order.buttons.push('delete');
+  }
+}
+
+/**
+ * 格式化售后状态
+ *
+ * @param afterSale 售后
+ */
+export function formatAfterSaleStatus(afterSale) {
+  if (afterSale.status === 10) {
+    return '申请售后';
+  }
+  if (afterSale.status === 20) {
+    return '商品待退货';
+  }
+  if (afterSale.status === 30) {
+    return '商家待收货';
+  }
+  if (afterSale.status === 40) {
+    return '等待退款';
+  }
+  if (afterSale.status === 50) {
+    return '退款成功';
+  }
+  if (afterSale.status === 61) {
+    return '买家取消';
+  }
+  if (afterSale.status === 62) {
+    return '商家拒绝';
+  }
+  if (afterSale.status === 63) {
+    return '商家拒收货';
+  }
+  return '未知状态';
+}
+
+/**
+ * 格式化售后状态的描述
+ *
+ * @param afterSale 售后
+ */
+export function formatAfterSaleStatusDescription(afterSale) {
+  if (afterSale.status === 10) {
+    return '退款申请待商家处理';
+  }
+  if (afterSale.status === 20) {
+    return '请退货并填写物流信息';
+  }
+  if (afterSale.status === 30) {
+    return '退货退款申请待商家处理';
+  }
+  if (afterSale.status === 40) {
+    return '等待退款';
+  }
+  if (afterSale.status === 50) {
+    return '退款成功';
+  }
+  if (afterSale.status === 61) {
+    return '退款关闭';
+  }
+  if (afterSale.status === 62) {
+    return `商家不同意退款申请，拒绝原因：${afterSale.auditReason}`;
+  }
+  if (afterSale.status === 63) {
+    return `商家拒绝收货，不同意退款，拒绝原因：${afterSale.auditReason}`;
+  }
+  return '未知状态';
+}
+
+/**
+ * 处理售后的 button 操作按钮数组
+ *
+ * @param afterSale 售后
+ */
+export function handleAfterSaleButtons(afterSale) {
+  afterSale.buttons = [];
+  if ([10, 20, 30].includes(afterSale.status)) { // 取消订单
+    afterSale.buttons.push('cancel');
+  }
+  if (afterSale.status === 20) { // 退货信息
+    afterSale.buttons.push('delivery');
+  }
+}
+
+/**
+ * 倒计时
+ * @param toTime   截止时间
+ * @param fromTime 起始时间，默认当前时间
+ * @return {{s: string, ms: number, h: string, m: string}} 持续时间
+ */
+export function useDurationTime(toTime, fromTime = '') {
+  toTime = getDayjsTime(toTime);
+  if (fromTime === '') {
+    fromTime = dayjs();
+  }
+  let duration = ref(toTime - fromTime);
+  if (duration.value > 0) {
+    setTimeout(() => {
+      if (duration.value > 0) {
+        duration.value -= 1000;
+      }
+    }, 1000);
+  }
+
+  let durationTime = dayjs.duration(duration.value);
+  return {
+    h: (durationTime.months() * 30 * 24 + durationTime.days() * 24 + durationTime.hours())
+      .toString()
+      .padStart(2, '0'),
+    m: durationTime.minutes().toString().padStart(2, '0'),
+    s: durationTime.seconds().toString().padStart(2, '0'),
+    ms: durationTime.$ms,
+  };
+}
+
+/**
+ * 转换为 Dayjs
+ * @param {any} time 时间
+ * @return {dayjs.Dayjs}
+ */
+function getDayjsTime(time) {
+  time = time.toString();
+  if (time.indexOf('-') > 0) {
+    // 'date'
+    return dayjs(time);
+  }
+  if (time.length > 10) {
+    // 'timestamp'
+    return dayjs(parseInt(time));
+  }
+  if (time.length === 10) {
+    // 'unixTime'
+    return dayjs.unix(parseInt(time));
+  }
+}
+
+/**
+ * 将分转成元
+ *
+ * @param price 分，例如说 100 分
+ * @returns {string} 元，例如说 1.00 元
+ */
+export function fen2yuan(price) {
+  return (price / 100.0).toFixed(2)
+}
+
+/**
+ * 从商品 SKU 数组中，转换出商品属性的数组
+ *
+ * 类似结构：[{
+ *    id: // 属性的编号
+ *    name: // 属性的名字
+ *    values: [{
+ *      id: // 属性值的编号
+ *      name: // 属性值的名字
+ *    }]
+ * }]
+ *
+ * @param skus 商品 SKU 数组
+ */
+export function convertProductPropertyList(skus) {
+  let result = [];
+  for (const sku of skus) {
+    if (!sku.properties) {
+      continue
+    }
+    for (const property of sku.properties) {
+      // ① 先处理属性
+      let resultProperty = result.find(item => item.id === property.propertyId)
+      if (!resultProperty) {
+        resultProperty = {
+          id: property.propertyId,
+          name: property.propertyName,
+          values: []
+        }
+        result.push(resultProperty)
+      }
+      // ② 再处理属性值
+      let resultValue = resultProperty.values.find(item => item.id === property.valueId)
+      if (!resultValue) {
+        resultProperty.values.push({
+          id: property.valueId,
+          name: property.valueName
+        })
+      }
+    }
+  }
+  return result;
+}
+
+/**
+ * 格式化满减送活动的规则
+ *
+ * @param activity 活动信息
+ * @param rule 优惠规格
+ * @returns {string} 规格字符串
+ */
+export function formatRewardActivityRule(activity, rule) {
+  if (activity.conditionType === 10) {
+    return `满 ${fen2yuan(rule.limit)} 元减 ${fen2yuan(rule.discountPrice)} 元`;
+  }
+  if (activity.conditionType === 20) {
+    return `满 ${rule.limit} 件减 ${fen2yuan(rule.discountPrice)} 元`;
+  }
+  return '';
+}
diff --git a/sheep/hooks/useModal.js b/sheep/hooks/useModal.js
new file mode 100644
index 0000000..2c22b73
--- /dev/null
+++ b/sheep/hooks/useModal.js
@@ -0,0 +1,140 @@
+import $store from '@/sheep/store';
+import $helper from '@/sheep/helper';
+import dayjs from 'dayjs';
+import { ref } from 'vue';
+import test from '@/sheep/helper/test.js';
+import AuthUtil from '@/api/member/auth';
+
+// 打开授权弹框
+export function showAuthModal(type = 'smsLogin') {
+  const modal = $store('modal');
+  if (modal.auth !== '') {
+    closeAuthModal();
+    setTimeout(() => {
+      modal.$patch((state) => {
+        state.auth = type;
+      });
+    }, 100);
+  } else {
+    modal.$patch((state) => {
+      state.auth = type;
+    });
+  }
+}
+
+// 关闭授权弹框
+export function closeAuthModal() {
+  $store('modal').$patch((state) => {
+    state.auth = '';
+  });
+}
+
+// 打开分享弹框
+export function showShareModal() {
+  $store('modal').$patch((state) => {
+    state.share = true;
+  });
+}
+
+// 关闭分享弹框
+export function closeShareModal() {
+  $store('modal').$patch((state) => {
+    state.share = false;
+  });
+}
+
+// 打开快捷菜单
+export function showMenuTools() {
+  $store('modal').$patch((state) => {
+    state.menu = true;
+  });
+}
+
+// 关闭快捷菜单
+export function closeMenuTools() {
+  $store('modal').$patch((state) => {
+    state.menu = false;
+  });
+}
+
+// 发送短信验证码  60秒
+export function getSmsCode(event, mobile) {
+  const modalStore = $store('modal');
+  const lastSendTimer = modalStore.lastTimer[event];
+  if (typeof lastSendTimer === 'undefined') {
+    $helper.toast('短信发送事件错误');
+    return;
+  }
+
+  const duration = dayjs().unix() - lastSendTimer;
+  const canSend = duration >= 60;
+  if (!canSend) {
+    $helper.toast('请稍后再试');
+    return;
+  }
+  // 只有 mobile 非空时才校验。因为部分场景（修改密码），不需要输入手机
+  if (mobile && !test.mobile(mobile)) {
+    $helper.toast('手机号码格式不正确');
+    return;
+  }
+
+  // 发送验证码 + 更新上次发送验证码时间
+  let scene = -1;
+  switch (event) {
+    case 'resetPassword':
+      scene = 4;
+      break;
+    case 'changePassword':
+      scene = 3;
+      break;
+    case 'changeMobile':
+      scene = 2;
+      break;
+    case 'smsLogin':
+      scene = 1;
+      break;
+  }
+  AuthUtil.sendSmsCode(mobile, scene).then((res) => {
+    if (res.code === 0) {
+      modalStore.$patch((state) => {
+        state.lastTimer[event] = dayjs().unix();
+      });
+    }
+  });
+}
+
+// 获取短信验证码倒计时 -- 60秒
+export function getSmsTimer(event, mobile = '') {
+  const modalStore = $store('modal');
+  const lastSendTimer = modalStore.lastTimer[event];
+
+  if (typeof lastSendTimer === 'undefined') {
+    $helper.toast('短信发送事件错误');
+    return;
+  }
+
+  const duration = ref(dayjs().unix() - lastSendTimer - 60);
+  const canSend = duration.value >= 0;
+
+  if (canSend) {
+    return '获取验证码';
+  }
+
+  if (!canSend) {
+    setTimeout(() => {
+      duration.value++;
+    }, 1000);
+    return -duration.value.toString() + ' 秒';
+  }
+}
+
+// 记录广告弹框历史
+export function saveAdvHistory(adv) {
+  const modal = $store('modal');
+
+  modal.$patch((state) => {
+    if (!state.advHistory.includes(adv.imgUrl)) {
+      state.advHistory.push(adv.imgUrl);
+    }
+  });
+}
diff --git a/sheep/index.js b/sheep/index.js
new file mode 100644
index 0000000..9af8f08
--- /dev/null
+++ b/sheep/index.js
@@ -0,0 +1,52 @@
+import $url from '@/sheep/url';
+import $router from '@/sheep/router';
+import $platform from '@/sheep/platform';
+import $helper from '@/sheep/helper';
+import zIndex from '@/sheep/config/zIndex.js';
+import $store from '@/sheep/store';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import duration from 'dayjs/plugin/duration';
+import 'dayjs/locale/zh-cn';
+
+dayjs.locale('zh-cn');
+dayjs.extend(relativeTime);
+dayjs.extend(duration);
+
+const sheep = {
+  $store,
+  $url,
+  $router,
+  $platform,
+  $helper,
+  $zIndex: zIndex,
+};
+
+// 加载Shopro底层依赖
+export async function ShoproInit() {
+  // 应用初始化
+  await $store('app').init();
+
+  // 平台初始化加载(各平台provider提供不同的加载流程)
+  $platform.load();
+
+  if (process.env.NODE_ENV === 'development') {
+    ShoproDebug();
+  }
+}
+
+// 开发模式
+function ShoproDebug() {
+  // 开发环境引入vconsole调试
+  // #ifdef H5
+  // import("vconsole").then(vconsole => {
+  // 	new vconsole.default();
+  // });
+  // #endif
+
+  // TODO 芋艿：可以打印路由
+  // 同步前端页面到后端
+  // console.log(ROUTES)
+}
+
+export default sheep;
diff --git a/sheep/libs/mplive-manifest-plugin.js b/sheep/libs/mplive-manifest-plugin.js
new file mode 100644
index 0000000..d1df9bf
--- /dev/null
+++ b/sheep/libs/mplive-manifest-plugin.js
@@ -0,0 +1,32 @@
+const fs = require('fs');
+
+const manifestPath = process.env.UNI_INPUT_DIR + '/manifest.json';
+
+let Manifest = fs.readFileSync(manifestPath, {
+	encoding: 'utf-8'
+});
+
+function mpliveMainfestPlugin(isOpen) {
+	if (process.env.UNI_PLATFORM !== 'mp-weixin') return;
+
+	const manifestData = JSON.parse(Manifest)
+
+	if (isOpen === '0') {
+		delete manifestData['mp-weixin'].plugins['live-player-plugin'];
+	}
+
+	if (isOpen === '1') {
+		manifestData['mp-weixin'].plugins['live-player-plugin'] = {
+			"version": "1.3.5",
+			"provider": "wx2b03c6e691cd7370"
+		}
+	}
+
+	Manifest = JSON.stringify(manifestData, null, 2)
+
+	fs.writeFileSync(manifestPath, Manifest, {
+		"flag": "w"
+	})
+}
+
+export default mpliveMainfestPlugin
diff --git a/sheep/libs/permission.js b/sheep/libs/permission.js
new file mode 100644
index 0000000..59f9413
--- /dev/null
+++ b/sheep/libs/permission.js
@@ -0,0 +1,246 @@
+/// null = 未请求，1 = 已允许，0 = 拒绝|受限, 2 = 系统未开启
+
+var isIOS;
+
+function album() {
+  var result = 0;
+  var PHPhotoLibrary = plus.ios.import('PHPhotoLibrary');
+  var authStatus = PHPhotoLibrary.authorizationStatus();
+  if (authStatus === 0) {
+    result = null;
+  } else if (authStatus == 3) {
+    result = 1;
+  } else {
+    result = 0;
+  }
+  plus.ios.deleteObject(PHPhotoLibrary);
+  return result;
+}
+
+function camera() {
+  var result = 0;
+  var AVCaptureDevice = plus.ios.import('AVCaptureDevice');
+  var authStatus = AVCaptureDevice.authorizationStatusForMediaType('vide');
+  if (authStatus === 0) {
+    result = null;
+  } else if (authStatus == 3) {
+    result = 1;
+  } else {
+    result = 0;
+  }
+  plus.ios.deleteObject(AVCaptureDevice);
+  return result;
+}
+
+function location() {
+  var result = 0;
+  var cllocationManger = plus.ios.import('CLLocationManager');
+  var enable = cllocationManger.locationServicesEnabled();
+  var status = cllocationManger.authorizationStatus();
+  if (!enable) {
+    result = 2;
+  } else if (status === 0) {
+    result = null;
+  } else if (status === 3 || status === 4) {
+    result = 1;
+  } else {
+    result = 0;
+  }
+  plus.ios.deleteObject(cllocationManger);
+  return result;
+}
+
+function push() {
+  var result = 0;
+  var UIApplication = plus.ios.import('UIApplication');
+  var app = UIApplication.sharedApplication();
+  var enabledTypes = 0;
+  if (app.currentUserNotificationSettings) {
+    var settings = app.currentUserNotificationSettings();
+    enabledTypes = settings.plusGetAttribute('types');
+    if (enabledTypes == 0) {
+      result = 0;
+      console.log('推送权限没有开启');
+    } else {
+      result = 1;
+      console.log('已经开启推送功能!');
+    }
+    plus.ios.deleteObject(settings);
+  } else {
+    enabledTypes = app.enabledRemoteNotificationTypes();
+    if (enabledTypes == 0) {
+      result = 3;
+      console.log('推送权限没有开启!');
+    } else {
+      result = 4;
+      console.log('已经开启推送功能!');
+    }
+  }
+  plus.ios.deleteObject(app);
+  plus.ios.deleteObject(UIApplication);
+  return result;
+}
+
+function contact() {
+  var result = 0;
+  var CNContactStore = plus.ios.import('CNContactStore');
+  var cnAuthStatus = CNContactStore.authorizationStatusForEntityType(0);
+  if (cnAuthStatus === 0) {
+    result = null;
+  } else if (cnAuthStatus == 3) {
+    result = 1;
+  } else {
+    result = 0;
+  }
+  plus.ios.deleteObject(CNContactStore);
+  return result;
+}
+
+function record() {
+  var result = null;
+  var avaudiosession = plus.ios.import('AVAudioSession');
+  var avaudio = avaudiosession.sharedInstance();
+  var status = avaudio.recordPermission();
+  console.log('permissionStatus:' + status);
+  if (status === 1970168948) {
+    result = null;
+  } else if (status === 1735552628) {
+    result = 1;
+  } else {
+    result = 0;
+  }
+  plus.ios.deleteObject(avaudiosession);
+  return result;
+}
+
+function calendar() {
+  var result = null;
+  var EKEventStore = plus.ios.import('EKEventStore');
+  var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(0);
+  if (ekAuthStatus == 3) {
+    result = 1;
+    console.log('日历权限已经开启');
+  } else {
+    console.log('日历权限没有开启');
+  }
+  plus.ios.deleteObject(EKEventStore);
+  return result;
+}
+
+function memo() {
+  var result = null;
+  var EKEventStore = plus.ios.import('EKEventStore');
+  var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(1);
+  if (ekAuthStatus == 3) {
+    result = 1;
+    console.log('备忘录权限已经开启');
+  } else {
+    console.log('备忘录权限没有开启');
+  }
+  plus.ios.deleteObject(EKEventStore);
+  return result;
+}
+
+function requestIOS(permissionID) {
+  return new Promise((resolve, reject) => {
+    switch (permissionID) {
+      case 'push':
+        resolve(push());
+        break;
+      case 'location':
+        resolve(location());
+        break;
+      case 'record':
+        resolve(record());
+        break;
+      case 'camera':
+        resolve(camera());
+        break;
+      case 'album':
+        resolve(album());
+        break;
+      case 'contact':
+        resolve(contact());
+        break;
+      case 'calendar':
+        resolve(calendar());
+        break;
+      case 'memo':
+        resolve(memo());
+        break;
+      default:
+        resolve(0);
+        break;
+    }
+  });
+}
+
+function requestAndroid(permissionID) {
+  return new Promise((resolve, reject) => {
+    plus.android.requestPermissions(
+      [permissionID],
+      function (resultObj) {
+        var result = 0;
+        for (var i = 0; i < resultObj.granted.length; i++) {
+          var grantedPermission = resultObj.granted[i];
+          console.log('已获取的权限：' + grantedPermission);
+          result = 1;
+        }
+        for (var i = 0; i < resultObj.deniedPresent.length; i++) {
+          var deniedPresentPermission = resultObj.deniedPresent[i];
+          console.log('拒绝本次申请的权限：' + deniedPresentPermission);
+          result = 0;
+        }
+        for (var i = 0; i < resultObj.deniedAlways.length; i++) {
+          var deniedAlwaysPermission = resultObj.deniedAlways[i];
+          console.log('永久拒绝申请的权限：' + deniedAlwaysPermission);
+          result = -1;
+        }
+        resolve(result);
+      },
+      function (error) {
+        console.log('result error: ' + error.message);
+        resolve({
+          code: error.code,
+          message: error.message,
+        });
+      },
+    );
+  });
+}
+
+function gotoAppPermissionSetting() {
+  if (permission.isIOS) {
+    var UIApplication = plus.ios.import('UIApplication');
+    var application2 = UIApplication.sharedApplication();
+    var NSURL2 = plus.ios.import('NSURL');
+    var setting2 = NSURL2.URLWithString('app-settings:');
+    application2.openURL(setting2);
+    plus.ios.deleteObject(setting2);
+    plus.ios.deleteObject(NSURL2);
+    plus.ios.deleteObject(application2);
+  } else {
+    var Intent = plus.android.importClass('android.content.Intent');
+    var Settings = plus.android.importClass('android.provider.Settings');
+    var Uri = plus.android.importClass('android.net.Uri');
+    var mainActivity = plus.android.runtimeMainActivity();
+    var intent = new Intent();
+    intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
+    var uri = Uri.fromParts('package', mainActivity.getPackageName(), null);
+    intent.setData(uri);
+    mainActivity.startActivity(intent);
+  }
+}
+
+const permission = {
+  get isIOS() {
+    return typeof isIOS === 'boolean'
+      ? isIOS
+      : (isIOS = uni.getSystemInfoSync().platform === 'ios');
+  },
+  requestIOS: requestIOS,
+  requestAndroid: requestAndroid,
+  gotoAppSetting: gotoAppPermissionSetting,
+};
+
+export default permission;
diff --git a/sheep/libs/sdk-h5-weixin.js b/sheep/libs/sdk-h5-weixin.js
new file mode 100644
index 0000000..a1ba002
--- /dev/null
+++ b/sheep/libs/sdk-h5-weixin.js
@@ -0,0 +1,182 @@
+/**
+ * 本模块封装微信浏览器下的一些方法。
+ * 更多微信网页开发sdk方法,详见:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
+ */
+
+import jweixin, { ready } from 'weixin-js-sdk';
+import $helper from '@/sheep/helper';
+import AuthUtil from '@/api/member/auth';
+
+let configSuccess = false;
+
+export default {
+  // 判断是否在微信中
+  isWechat() {
+    const ua = window.navigator.userAgent.toLowerCase();
+    // noinspection EqualityComparisonWithCoercionJS
+    return ua.match(/micromessenger/i) == 'micromessenger';
+  },
+
+  isReady(api) {
+    jweixin.ready(api);
+  },
+
+  // 初始化 JSSDK
+  async init(callback) {
+    if (!this.isWechat()) {
+      $helper.toast('请使用微信网页浏览器打开');
+      return;
+    }
+
+    // 调用后端接口，获得 JSSDK 初始化所需的签名
+    const url = location.href.split('#')[0];
+    const { code, data } = await AuthUtil.createWeixinMpJsapiSignature(url);
+    if (code === 0) {
+      jweixin.config({
+        debug: false,
+        appId: data.appId,
+        timestamp: data.timestamp,
+        nonceStr: data.nonceStr,
+        signature: data.signature,
+        jsApiList: ['chooseWXPay'], // TODO 芋艿：后续可以设置更多权限；
+        openTagList: data.openTagList
+      });
+    }
+
+    // 监听结果
+    configSuccess = true;
+    jweixin.error((err) => {
+      configSuccess = false;
+      console.error('微信 JSSDK 初始化失败', err);
+      // $helper.toast('微信JSSDK:' + err.errMsg);
+    });
+    jweixin.ready(() => {
+      if (configSuccess) {
+        console.log('微信 JSSDK 初始化成功');
+      }
+    })
+
+    // 回调
+    if (callback) {
+      callback(data);
+    }
+  },
+
+  //在需要定位页面调用 TODO 芋艿：未测试
+  getLocation(callback) {
+    this.isReady(() => {
+      jweixin.getLocation({
+        type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
+        success: function (res) {
+          callback(res);
+        },
+        fail: function (res) {
+          console.log('%c微信H5sdk,getLocation失败：', 'color:green;background:yellow');
+        },
+      });
+    });
+  },
+
+  //获取微信收货地址 TODO 芋艿：未测试
+  openAddress(callback) {
+    this.isReady(() => {
+      jweixin.openAddress({
+        success: function (res) {
+          callback.success && callback.success(res);
+        },
+        fail: function (err) {
+          callback.error && callback.error(err);
+          console.log('%c微信H5sdk,openAddress失败：', 'color:green;background:yellow');
+        },
+        complete: function (res) {},
+      });
+    });
+  },
+
+  // 微信扫码 TODO 芋艿：未测试
+  scanQRCode(callback) {
+    this.isReady(() => {
+      jweixin.scanQRCode({
+        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
+        scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
+        success: function (res) {
+          callback(res);
+        },
+        fail: function (res) {
+          console.log('%c微信H5sdk,scanQRCode失败：', 'color:green;background:yellow');
+        },
+      });
+    });
+  },
+
+  // 更新微信分享信息 TODO 芋艿：未测试
+  updateShareInfo(data, callback = null) {
+    this.isReady(() => {
+      const shareData = {
+        title: data.title,
+        desc: data.desc,
+        link: data.link,
+        imgUrl: data.image,
+        success: function (res) {
+          if (callback) {
+            callback(res);
+          }
+          // 分享后的一些操作,比如分享统计等等
+        },
+        cancel: function (res) {},
+      };
+
+      // 新版 分享聊天api
+      jweixin.updateAppMessageShareData(shareData);
+      // 新版 分享到朋友圈api
+      jweixin.updateTimelineShareData(shareData);
+    });
+  },
+
+  // 打开坐标位置 TODO 芋艿：未测试
+  openLocation(data, callback) {
+    this.isReady(() => {
+      jweixin.openLocation({
+        //根据传入的坐标打开地图
+        latitude: data.latitude,
+        longitude: data.longitude,
+      });
+    });
+  },
+
+  // 选择图片 TODO 芋艿：未测试
+  chooseImage(callback) {
+    this.isReady(() => {
+      jweixin.chooseImage({
+        count: 1,
+        sizeType: ['compressed'],
+        sourceType: ['album'],
+        success: function (rs) {
+          callback(rs);
+        },
+      });
+    });
+  },
+
+  // 微信支付
+  wxpay(data, callback) {
+    this.isReady(() => {
+      jweixin.chooseWXPay({
+        timestamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
+        nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
+        package: data.packageValue, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
+        signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
+        paySign: data.paySign, // 支付签名
+        success: function (res) {
+          callback.success && callback.success(res);
+        },
+        fail: function (err) {
+          callback.fail && callback.fail(err);
+        },
+        cancel: function (err) {
+          callback.cancel && callback.cancel(err);
+        },
+      });
+    });
+  },
+};
diff --git a/sheep/platform/index.js b/sheep/platform/index.js
new file mode 100644
index 0000000..36a54fc
--- /dev/null
+++ b/sheep/platform/index.js
@@ -0,0 +1,175 @@
+/**
+ * Shopro 第三方平台功能聚合
+ * @version 1.0.3
+ * @author lidongtony
+ * @param {String} name - 厂商+平台名称
+ * @param {String} provider - 厂商
+ * @param {String} platform - 平台名称
+ * @param {String} os - 系统型号
+ * @param {Object} device - 设备信息
+ */
+
+import { isEmpty } from 'lodash';
+// #ifdef H5
+import { isWxBrowser } from '@/sheep/helper/utils';
+// #endif
+import wechat from './provider/wechat/index.js';
+import apple from './provider/apple';
+import share from './share';
+import Pay from './pay';
+
+const device = uni.getSystemInfoSync();
+
+const os = device.platform;
+
+let name = '';
+let provider = '';
+let platform = '';
+let isWechatInstalled = true;
+
+// #ifdef H5
+if (isWxBrowser()) {
+  name = 'WechatOfficialAccount';
+  provider = 'wechat';
+  platform = 'officialAccount';
+} else {
+  name = 'H5';
+  platform = 'h5';
+}
+// #endif
+
+// #ifdef APP-PLUS
+name = 'App';
+platform = 'openPlatform';
+// 检查微信客户端是否安装，否则AppleStore会因此拒绝上架
+if (os === 'ios') {
+  isWechatInstalled = plus.ios.import('WXApi').isWXAppInstalled();
+}
+// #endif
+
+// #ifdef MP-WEIXIN
+name = 'WechatMiniProgram';
+platform = 'miniProgram';
+provider = 'wechat';
+// #endif
+
+if (isEmpty(name)) {
+  uni.showToast({
+    title: '暂不支持该平台',
+    icon: 'none',
+  });
+}
+
+// 加载当前平台前置行为
+const load = () => {
+  if (provider === 'wechat') {
+    wechat.load();
+  }
+};
+
+// 使用厂商独占sdk name = 'wechat' | 'alipay' | 'apple'
+const useProvider = (_provider = '') => {
+  if (_provider === '') _provider = provider;
+  if (_provider === 'wechat') return wechat;
+  if (_provider === 'apple') return apple;
+};
+
+// 支付服务转发
+const pay = (payment, orderType, orderSN) => {
+  return new Pay(payment, orderType, orderSN);
+};
+
+/**
+ * 检查更新 (只检查小程序和App)
+ * @param {Boolean} silence - 静默检查
+ */
+const checkUpdate = (silence = false) => {
+  let canUpdate;
+  // #ifdef MP-WEIXIN
+  useProvider().checkUpdate(silence);
+  // #endif
+
+  // #ifdef APP-PLUS
+  // TODO: 热更新
+  // #endif
+};
+
+/**
+ * 检查网络
+ * @param {Boolean} silence - 静默检查
+ */
+async function checkNetwork() {
+  const networkStatus = await uni.getNetworkType();
+  if (networkStatus.networkType == 'none') {
+    return Promise.resolve(false);
+  }
+  return Promise.resolve(true);
+}
+
+// 获取小程序胶囊信息
+const getCapsule = () => {
+  // #ifdef MP
+  let capsule = uni.getMenuButtonBoundingClientRect();
+  if (!capsule) {
+    capsule = {
+      bottom: 56,
+      height: 32,
+      left: 278,
+      right: 365,
+      top: 24,
+      width: 87,
+    };
+  }
+  return capsule;
+  // #endif
+
+  // #ifndef MP
+  return {
+    bottom: 56,
+    height: 32,
+    left: 278,
+    right: 365,
+    top: 24,
+    width: 87,
+  };
+  // #endif
+};
+
+const capsule = getCapsule();
+
+// 标题栏高度
+const getNavBar = () => {
+  return device.statusBarHeight + 44;
+};
+const navbar = getNavBar();
+
+function getLandingPage() {
+  let page = '';
+  // #ifdef H5
+  page = location.href.split('?')[0];
+  // #endif
+  return page;
+}
+
+// 设置ios+公众号网页落地页 解决微信sdk签名问题
+const landingPage = getLandingPage();
+
+const _platform = {
+  name,
+  device,
+  os,
+  provider,
+  platform,
+  useProvider,
+  checkUpdate,
+  checkNetwork,
+  pay,
+  share,
+  load,
+  capsule,
+  navbar,
+  landingPage,
+  isWechatInstalled,
+};
+
+export default _platform;
diff --git a/sheep/platform/pay.js b/sheep/platform/pay.js
new file mode 100644
index 0000000..a12bb48
--- /dev/null
+++ b/sheep/platform/pay.js
@@ -0,0 +1,351 @@
+import sheep from '@/sheep';
+// #ifdef H5
+import $wxsdk from '@/sheep/libs/sdk-h5-weixin';
+// #endif
+import { getRootUrl } from '@/sheep/helper';
+import PayOrderApi from '@/api/pay/order';
+
+/**
+ * 支付
+ *
+ * @param {String} payment = ['wechat','alipay','wallet','mock']  	- 支付方式
+ * @param {String} orderType = ['goods','recharge','groupon']  	- 订单类型
+ * @param {String} id					- 订单号
+ */
+
+export default class SheepPay {
+  constructor(payment, orderType, id) {
+    this.payment = payment;
+    this.id = id;
+    this.orderType = orderType;
+    this.payAction();
+  }
+
+  payAction() {
+    const payAction = {
+      WechatOfficialAccount: {
+        wechat: () => {
+          this.wechatOfficialAccountPay();
+        },
+        alipay: () => {
+          this.redirectPay(); // 现在公众号可以直接跳转支付宝页面
+        },
+        wallet: () => {
+          this.walletPay();
+        },
+        mock: () => {
+          this.mockPay();
+        }
+      },
+      WechatMiniProgram: {
+        wechat: () => {
+          this.wechatMiniProgramPay();
+        },
+        alipay: () => {
+          this.copyPayLink();
+        },
+        wallet: () => {
+          this.walletPay();
+        },
+        mock: () => {
+          this.mockPay();
+        }
+      },
+      App: {
+        wechat: () => {
+          this.wechatAppPay();
+        },
+        alipay: () => {
+          this.alipay();
+        },
+        wallet: () => {
+          this.walletPay();
+        },
+        mock: () => {
+          this.mockPay();
+        }
+      },
+      H5: {
+        wechat: () => {
+          this.wechatWapPay();
+        },
+        alipay: () => {
+          this.redirectPay();
+        },
+        wallet: () => {
+          this.walletPay();
+        },
+        mock: () => {
+          this.mockPay();
+        }
+      },
+    };
+    return payAction[sheep.$platform.name][this.payment]();
+  }
+
+  // 预支付
+  prepay(channel) {
+    return new Promise(async (resolve, reject) => {
+      let data = {
+        id: this.id,
+        channelCode: channel,
+        channelExtras: {}
+      };
+      // 特殊逻辑：微信公众号、小程序支付时，必须传入 openid
+      if (['wx_pub', 'wx_lite'].includes(channel)) {
+        const openid = await sheep.$platform.useProvider('wechat').getOpenid();
+        // 如果获取不到 openid，微信无法发起支付，此时需要引导
+        if (!openid) {
+          this.bindWeixin();
+          return;
+        }
+        data.channelExtras.openid = openid;
+      }
+      // 发起预支付 API 调用
+      PayOrderApi.submitOrder(data).then((res) => {
+        // 成功时
+        res.code === 0 && resolve(res);
+        // 失败时
+        if (res.code !== 0 && res.msg.indexOf('无效的openid') >= 0) {
+          // 特殊逻辑：微信公众号、小程序支付时，必须传入 openid 不正确的情况
+          if (res.msg.indexOf('无效的openid') >= 0 // 获取的 openid 不正确时，或者随便输入了个 openid
+            || res.msg.indexOf('下单账号与支付账号不一致') >= 0) { // https://developers.weixin.qq.com/community/develop/doc/00008c53c347804beec82aed051c00
+            this.bindWeixin();
+          }
+        }
+      });
+    });
+  }
+  // #ifdef H5
+  // 微信公众号 JSSDK 支付
+  async wechatOfficialAccountPay() {
+    let { code, data } = await this.prepay('wx_pub');
+    if (code !== 0) {
+      return;
+    }
+    const payConfig = JSON.parse(data.displayContent);
+    $wxsdk.wxpay(payConfig, {
+      success: () => {
+        this.payResult('success');
+      },
+      cancel: () => {
+        sheep.$helper.toast('支付已手动取消');
+      },
+      fail: (error) => {
+        if (error.errMsg.indexOf('chooseWXPay:没有此SDK或暂不支持此SDK模拟') >= 0) {
+          sheep.$helper.toast('发起微信支付失败，原因：可能是微信开发者工具不支持，建议使用微信打开网页后支付');
+          return
+        }
+        this.payResult('fail');
+      },
+    });
+  }
+
+  // 浏览器微信 H5 支付 TODO 芋艿：待接入
+  async wechatWapPay() {
+    const { error, data } = await this.prepay();
+    if (error === 0) {
+      const redirect_url = `${getRootUrl()}pages/pay/result?id=${this.id}&payment=${this.payment}&orderType=${this.orderType}`;
+      location.href = `${data.pay_data.h5_url}&redirect_url=${encodeURIComponent(redirect_url)}`;
+    }
+  }
+
+  // 支付链接  TODO 芋艿：待接入
+  async redirectPay() {
+    let { error, data } = await this.prepay();
+    if (error === 0) {
+      const redirect_url = `${getRootUrl()}pages/pay/result?id=${this.id}&payment=${this.payment}&orderType=${this.orderType}`;
+      location.href = data.pay_data + encodeURIComponent(redirect_url);
+    }
+  }
+
+  // #endif
+
+  // 微信小程序支付
+  async wechatMiniProgramPay() {
+    // let that = this;
+    let { code, data } = await this.prepay('wx_lite');
+    if (code !== 0) {
+      return;
+    }
+    // 调用微信小程序支付
+    const payConfig = JSON.parse(data.displayContent);
+    uni.requestPayment({
+      provider: 'wxpay',
+      timeStamp: payConfig.timeStamp,
+      nonceStr: payConfig.nonceStr,
+      package: payConfig.packageValue,
+      signType: payConfig.signType,
+      paySign: payConfig.paySign,
+      success: (res) => {
+        this.payResult('success');
+      },
+      fail: (err) => {
+        if (err.errMsg === 'requestPayment:fail cancel') {
+          sheep.$helper.toast('支付已手动取消');
+        } else {
+          this.payResult('fail');
+        }
+      },
+    });
+  }
+
+  // 余额支付
+  async walletPay() {
+    const { code } = await this.prepay('wallet');
+    code === 0 && this.payResult('success');
+  }
+
+  // 模拟支付
+  async mockPay() {
+    const { code } = await this.prepay('mock');
+    code === 0 && this.payResult('success');
+  }
+
+  // 支付宝复制链接支付  TODO 芋艿：待接入
+  async copyPayLink() {
+    let that = this;
+    let { error, data } = await this.prepay();
+    if (error === 0) {
+      // 引入showModal 点击确认 复制链接；
+      uni.showModal({
+        title: '支付宝支付',
+        content: '复制链接到外部浏览器',
+        confirmText: '复制链接',
+        success: (res) => {
+          if (res.confirm) {
+            sheep.$helper.copyText(data.pay_data);
+          }
+        },
+      });
+    }
+  }
+
+  // 支付宝支付  TODO 芋艿：待接入
+  async alipay() {
+    let that = this;
+    const { error, data } = await this.prepay();
+    if (error === 0) {
+      uni.requestPayment({
+        provider: 'alipay',
+        orderInfo: data.pay_data, //支付宝订单数据
+        success: (res) => {
+          that.payResult('success');
+        },
+        fail: (err) => {
+          if (err.errMsg === 'requestPayment:fail [paymentAlipay:62001]user cancel') {
+            sheep.$helper.toast('支付已手动取消');
+          } else {
+            that.payResult('fail');
+          }
+        },
+      });
+    }
+  }
+
+  // 微信支付  TODO 芋艿：待接入
+  async wechatAppPay() {
+    let that = this;
+    let { error, data } = await this.prepay();
+    if (error === 0) {
+      uni.requestPayment({
+        provider: 'wxpay',
+        orderInfo: data.pay_data, //微信订单数据(官方说是string。实测为object)
+        success: (res) => {
+          that.payResult('success');
+        },
+        fail: (err) => {
+          err.errMsg !== 'requestPayment:fail cancel' && that.payResult('fail');
+        },
+      });
+    }
+  }
+
+  // 支付结果跳转,success:成功，fail:失败
+  payResult(resultType) {
+    sheep.$router.redirect('/pages/pay/result', {
+      id: this.id,
+      orderType: this.orderType,
+      payState: resultType
+    });
+  }
+
+  // 引导绑定微信
+  bindWeixin() {
+    uni.showModal({
+      title: '微信支付',
+      content: '请先绑定微信再使用微信支付',
+      success: function (res) {
+        if (res.confirm) {
+          sheep.$platform.useProvider('wechat').bind();
+        }
+      },
+    });
+  }
+
+}
+
+export function getPayMethods(channels) {
+  const payMethods = [
+    {
+      icon: '/static/img/shop/pay/wechat.png',
+      title: '微信支付',
+      value: 'wechat',
+      disabled: true,
+    },
+    {
+      icon: '/static/img/shop/pay/alipay.png',
+      title: '支付宝支付',
+      value: 'alipay',
+      disabled: true,
+    },
+    {
+      icon: '/static/img/shop/pay/wallet.png',
+      title: '余额支付',
+      value: 'wallet',
+      disabled: true,
+    },
+    {
+      icon: '/static/img/shop/pay/apple.png',
+      title: 'Apple Pay',
+      value: 'apple',
+      disabled: true,
+    },
+    {
+      icon: '/static/img/shop/pay/wallet.png',
+      title: '模拟支付',
+      value: 'mock',
+      disabled: true,
+    }
+  ];
+  const platform = sheep.$platform.name
+
+  // 1. 处理【微信支付】
+  const wechatMethod = payMethods[0];
+  if ((platform === 'WechatOfficialAccount' && channels.includes('wx_pub'))
+    || (platform === 'WechatMiniProgram' && channels.includes('wx_lite'))
+    || (platform === 'App' && channels.includes('wx_app'))) {
+    wechatMethod.disabled = false;
+  }
+  wechatMethod.disabled = false; // TODO 芋艿：临时测试
+
+  // 2. 处理【支付宝支付】
+  const alipayMethod = payMethods[1];
+  if ((platform === 'WechatOfficialAccount' && channels.includes('alipay_wap'))
+    || platform === 'WechatMiniProgram' && channels.includes('alipay_wap')
+    || platform === 'App' && channels.includes('alipay_app')) {
+    alipayMethod.disabled = false;
+  }
+  // 3. 处理【余额支付】
+  const walletMethod = payMethods[2];
+  if (channels.includes('wallet')) {
+    walletMethod.disabled = false;
+  }
+  // 4. 处理【苹果支付】TODO 芋艿：未来接入
+  // 5. 处理【模拟支付】
+  const mockMethod = payMethods[4];
+  if (channels.includes('mock')) {
+    mockMethod.disabled = false;
+  }
+  return payMethods;
+}
\ No newline at end of file
diff --git a/sheep/platform/provider/apple/app.js b/sheep/platform/provider/apple/app.js
new file mode 100644
index 0000000..405bb55
--- /dev/null
+++ b/sheep/platform/provider/apple/app.js
@@ -0,0 +1,36 @@
+// import third from '@/api/third';
+// TODO 芋艿：等后面搞 App 再弄
+
+const login = () => {
+  return new Promise(async (resolve, reject) => {
+    const loginRes = await uni.login({
+      provider: 'apple',
+      success: () => {
+        uni.getUserInfo({
+          provider: 'apple',
+          success: async (res) => {
+            if (res.errMsg === 'getUserInfo:ok') {
+              const payload = res.userInfo;
+              const { error } = await third.apple.login({
+                payload,
+                shareInfo: uni.getStorageSync('shareLog') || {},
+              });
+              if (error === 0) {
+                resolve(true);
+              } else {
+                resolve(false);
+              }
+            }
+          },
+        });
+      },
+      fail: (err) => {
+        resolve(false);
+      },
+    });
+  });
+};
+
+export default {
+  login,
+};
diff --git a/sheep/platform/provider/apple/index.js b/sheep/platform/provider/apple/index.js
new file mode 100644
index 0000000..388c093
--- /dev/null
+++ b/sheep/platform/provider/apple/index.js
@@ -0,0 +1,9 @@
+// #ifdef APP-PLUS
+import service from './app';
+// #endif
+
+let apple = {};
+if (typeof service !== 'undefined') {
+  apple = service;
+}
+export default apple;
diff --git a/sheep/platform/provider/wechat/index.js b/sheep/platform/provider/wechat/index.js
new file mode 100644
index 0000000..3bb2c7f
--- /dev/null
+++ b/sheep/platform/provider/wechat/index.js
@@ -0,0 +1,15 @@
+// #ifdef H5
+import service from './officialAccount';
+// #endif
+
+// #ifdef MP-WEIXIN
+import service from './miniProgram';
+// #endif
+
+// #ifdef APP-PLUS
+import service from './openPlatform';
+// #endif
+
+const wechat = service;
+
+export default wechat;
diff --git a/sheep/platform/provider/wechat/miniProgram.js b/sheep/platform/provider/wechat/miniProgram.js
new file mode 100644
index 0000000..8bbfb5f
--- /dev/null
+++ b/sheep/platform/provider/wechat/miniProgram.js
@@ -0,0 +1,205 @@
+import third from '@/api/migration/third'
+import AuthUtil from '@/api/member/auth';
+import SocialApi from '@/api/member/social';
+import UserApi from '@/api/member/user';
+
+const socialType = 34; // 社交类型 - 微信小程序
+
+let subscribeEventList = [];
+
+// 加载微信小程序
+function load() {
+  checkUpdate();
+  getSubscribeTemplate();
+}
+
+// 微信小程序静默授权登陆
+const login = async () => {
+  return new Promise(async (resolve, reject) => {
+    // 1. 获得微信 code
+    const codeResult = await uni.login();
+    if (codeResult.errMsg !== 'login:ok') {
+      return resolve(false);
+    }
+
+    // 2. 社交登录
+    const loginResult = await AuthUtil.socialLogin(socialType, codeResult.code, 'default');
+    if (loginResult.code === 0) {
+      setOpenid(loginResult.data.openid);
+      return resolve(true);
+    } else {
+      return resolve(false);
+    }
+  });
+};
+
+// 微信小程序手机号授权登陆
+const mobileLogin = async (e) => {
+  return new Promise(async (resolve, reject) => {
+    if (e.errMsg !== 'getPhoneNumber:ok') {
+      return resolve(false);
+    }
+
+    // 1. 获得微信 code
+    const codeResult = await uni.login();
+    if (codeResult.errMsg !== 'login:ok') {
+      return resolve(false);
+    }
+
+    // 2. 一键登录
+    const loginResult = await AuthUtil.weixinMiniAppLogin(e.code, codeResult.code, 'default');
+    if (loginResult.code === 0) {
+      setOpenid(loginResult.data.openid);
+      return resolve(true);
+    } else {
+      return resolve(false);
+    }
+    // TODO 芋艿：shareInfo: uni.getStorageSync('shareLog') || {},
+  });
+};
+
+// 微信小程序绑定
+const bind = () => {
+  return new Promise(async (resolve, reject) => {
+    // 1. 获得微信 code
+    const codeResult = await uni.login();
+    if (codeResult.errMsg !== 'login:ok') {
+      return resolve(false);
+    }
+
+    // 2. 绑定账号
+    const bindResult = await SocialApi.socialBind(socialType, codeResult.code, 'default');
+    if (bindResult.code === 0) {
+      setOpenid(bindResult.data);
+      return resolve(true);
+    } else {
+      return resolve(false);
+    }
+  });
+};
+
+// 微信小程序解除绑定
+const unbind = async (openid) => {
+  const { code } = await SocialApi.socialUnbind(socialType, openid);
+  return code === 0;
+};
+
+// 绑定用户手机号
+const bindUserPhoneNumber = (e) => {
+  return new Promise(async (resolve, reject) => {
+    const { code } = await UserApi.updateUserMobileByWeixin(e.code);
+    if (code === 0) {
+      resolve(true);
+    }
+    resolve(false);
+  });
+};
+
+// 设置 openid 到本地存储，目前只有 pay 支付时会使用
+function setOpenid(openid) {
+  uni.setStorageSync('openid', openid);
+}
+
+// 获得 openid
+async function getOpenid(force = false) {
+  let openid = uni.getStorageSync('openid');
+  if (!openid && force) {
+    const info = await getInfo();
+    if (info && info.openid) {
+      openid = info.openid;
+      setOpenid(openid);
+    }
+  }
+  return openid;
+}
+
+// 获得社交信息
+async function getInfo() {
+  const { code, data } = await SocialApi.getSocialUser(socialType);
+  if (code !== 0) {
+    return undefined;
+  }
+  return data;
+}
+
+// ========== 非登录相关的逻辑 ==========
+
+// 小程序更新
+const checkUpdate = async (silence = true) => {
+  if (uni.canIUse('getUpdateManager')) {
+    const updateManager = uni.getUpdateManager();
+    updateManager.onCheckForUpdate(function (res) {
+      // 请求完新版本信息的回调
+      if (res.hasUpdate) {
+        updateManager.onUpdateReady(function () {
+          uni.showModal({
+            title: '更新提示',
+            content: '新版本已经准备好，是否重启应用？',
+            success: function (res) {
+              if (res.confirm) {
+                // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
+                updateManager.applyUpdate();
+              }
+            },
+          });
+        });
+        updateManager.onUpdateFailed(function () {
+          // 新的版本下载失败
+          // uni.showModal({
+          //   title: '已经有新版本了哟~',
+          //   content: '新版本已经上线啦，请您删除当前小程序，重新搜索打开~',
+          // });
+        });
+      } else {
+        if (!silence) {
+          uni.showModal({
+            title: '当前为最新版本',
+            showCancel: false,
+          });
+        }
+      }
+    });
+  }
+};
+
+// 获取订阅消息模板
+async function getSubscribeTemplate() {
+  const { error, data } = await third.wechat.subscribeTemplate();
+  if (error === 0) {
+    subscribeEventList = data;
+  }
+}
+
+// 订阅消息
+function subscribeMessage(event) {
+  let tmplIds = [];
+  if (typeof event === 'string') {
+    tmplIds.push(subscribeEventList[event]);
+  }
+  if (typeof event === 'object') {
+    event.forEach((item) => {
+      if (typeof subscribeEventList[item] !== 'undefined') tmplIds.push(subscribeEventList[item]);
+    });
+  }
+  if (tmplIds.length === 0) return;
+
+  uni.requestSubscribeMessage({
+    tmplIds,
+    fail: (err) => {
+      console.log(err);
+    },
+  });
+}
+
+export default {
+  load,
+  login,
+  bind,
+  unbind,
+  bindUserPhoneNumber,
+  mobileLogin,
+  getInfo,
+  getOpenid,
+  subscribeMessage,
+  checkUpdate
+};
diff --git a/sheep/platform/provider/wechat/officialAccount.js b/sheep/platform/provider/wechat/officialAccount.js
new file mode 100644
index 0000000..c9c0759
--- /dev/null
+++ b/sheep/platform/provider/wechat/officialAccount.js
@@ -0,0 +1,107 @@
+import $wxsdk from '@/sheep/libs/sdk-h5-weixin';
+import { getRootUrl } from '@/sheep/helper';
+import AuthUtil from '@/api/member/auth';
+import SocialApi from '@/api/member/social';
+
+const socialType = 31; // 社交类型 - 微信公众号
+
+// 加载微信公众号JSSDK
+async function load() {
+  $wxsdk.init();
+}
+
+// 微信公众号登陆
+async function login(code = '', state = '') {
+  // 情况一：没有 code 时，去获取 code
+  if (!code) {
+    const loginUrl = await getLoginUrl();
+    if (loginUrl) {
+      uni.setStorageSync('returnUrl', location.href);
+      window.location = loginUrl;
+    }
+  // 情况二：有 code 时，使用 code 去自动登录
+  } else {
+    // 解密 code 发起登陆
+    const loginResult = await AuthUtil.socialLogin(socialType, code, state);
+    if (loginResult.code === 0) {
+      // TODO 芋艿：shareLog
+      setOpenid(loginResult.data.openid);
+      return loginResult;
+    }
+  }
+  return false;
+}
+
+// 微信公众号绑定
+async function bind(code = '', state = '') {
+  // 情况一：没有 code 时，去获取 code
+  if (code === '') {
+    const loginUrl = await getLoginUrl('bind');
+    if (loginUrl) {
+      uni.setStorageSync('returnUrl', location.href);
+      window.location = loginUrl;
+    }
+  } else {
+    // 情况二：有 code 时，使用 code 去自动绑定
+    const loginResult = await SocialApi.socialBind(socialType, code, state);
+    if (loginResult.code === 0) {
+      setOpenid(loginResult.data);
+      return loginResult;
+    }
+  }
+  return false;
+}
+
+// 微信公众号解除绑定
+const unbind = async (openid) => {
+  const { code } = await SocialApi.socialUnbind(socialType, openid);
+  return code === 0;
+};
+
+// 获取公众号登陆地址
+async function getLoginUrl(event = 'login') {
+  const page = getRootUrl() + 'pages/index/login'
+    + '?event=' + event; // event 目的，区分是 login 还是 bind
+  const { code, data } = await AuthUtil.socialAuthRedirect(socialType, page);
+  if (code !== 0) {
+    return undefined;
+  }
+  return data;
+}
+
+// 设置 openid 到本地存储，目前只有 pay 支付时会使用
+function setOpenid(openid) {
+  uni.setStorageSync('openid', openid);
+}
+
+// 获得 openid
+async function getOpenid(force = false) {
+  let openid = uni.getStorageSync('openid');
+  if (!openid && force) {
+    const info = await getInfo();
+    if (info && info.openid) {
+      openid = info.openid;
+      setOpenid(openid);
+    }
+  }
+  return openid;
+}
+
+// 获得社交信息
+async function getInfo() {
+  const { code, data } = await SocialApi.getSocialUser(socialType);
+  if (code !== 0) {
+    return undefined;
+  }
+  return data;
+}
+
+export default {
+  load,
+  login,
+  bind,
+  unbind,
+  getInfo,
+  getOpenid,
+  jssdk: $wxsdk,
+};
diff --git a/sheep/platform/provider/wechat/openPlatform.js b/sheep/platform/provider/wechat/openPlatform.js
new file mode 100644
index 0000000..5bdbd3f
--- /dev/null
+++ b/sheep/platform/provider/wechat/openPlatform.js
@@ -0,0 +1,61 @@
+// 登录
+// import third from '@/api/third';
+import SocialApi from '@/api/member/social';
+
+// TODO 芋艿：等后面搞 App 再弄
+const socialType = 32; // 社交类型 - 微信开放平台
+
+const load = async () => {};
+
+// 微信开放平台移动应用授权登陆
+const login = () => {
+  return new Promise(async (resolve, reject) => {
+    const loginRes = await uni.login({
+      provider: 'weixin',
+      onlyAuthorize: true,
+    });
+    debugger
+    if (loginRes.errMsg == 'login:ok') {
+      const res = await third.wechat.login({
+        platform: 'openPlatform',
+        shareInfo: uni.getStorageSync('shareLog') || {},
+        payload: encodeURIComponent(
+          JSON.stringify({
+            code: loginRes.code,
+          }),
+        ),
+      });
+
+      if (res.error === 0) {
+        resolve(true);
+      }
+    } else {
+      uni.showToast({
+        icon: 'none',
+        title: loginRes.errMsg,
+      });
+    }
+    resolve(false);
+  });
+};
+
+// 微信 App 解除绑定
+const unbind = async (openid) => {
+  const { code } = await SocialApi.socialUnbind(socialType, openid);
+  return code === 0;
+};
+
+// 获得社交信息
+async function getInfo() {
+  const { code, data } = await SocialApi.getSocialUser(socialType);
+  if (code !== 0) {
+    return undefined;
+  }
+  return data;
+}
+
+export default {
+  load,
+  login,
+  getInfo
+};
diff --git a/sheep/platform/share.js b/sheep/platform/share.js
new file mode 100644
index 0000000..471c587
--- /dev/null
+++ b/sheep/platform/share.js
@@ -0,0 +1,187 @@
+import $store from '@/sheep/store';
+import $platform from '@/sheep/platform';
+import $router from '@/sheep/router';
+import $url from '@/sheep/url';
+// #ifdef H5
+import $wxsdk from '@/sheep/libs/sdk-h5-weixin';
+// #endif
+
+// 设置分享的平台渠道: 1=H5,2=微信公众号网页,3=微信小程序,4=App,...按需扩展
+const platformMap = ['H5', 'WechatOfficialAccount', 'WechatMiniProgram', 'App'];
+
+// 设置分享方式: 1=直接转发,2=海报,3=复制链接,...按需扩展
+const fromMap = ['forward', 'poster', 'link'];
+
+// TODO 芋艿：分享的接入
+// 设置分享信息参数
+const getShareInfo = (
+  scene = {
+    title: '', // 自定义分享标题
+    desc: '', // 自定义描述
+    image: '', // 自定义分享图片
+    params: {}, // 自定义分享参数
+  },
+  poster = {
+    // 自定义海报数据
+    type: 'user',
+  },
+) => {
+  const shareInfo = {
+    title: '', // 分享标题
+    desc: '', // 描述
+    image: '', // 分享图片
+    path: '', // 分享页面+参数
+    link: '', // 分享Url+参数
+    query: '', // 分享参数
+    poster, // 海报所需数据
+  };
+
+  const app = $store('app');
+  const shareConfig = app.platform.share;
+
+  // 自动拼接分享用户参数
+  const query = buildSpmQuery(scene.params);
+  shareInfo.query = query;
+
+  // 配置分享链接地址
+  shareInfo.link = buildSpmLink(query, shareConfig.linkAddress);
+  // 配置页面地址带参数
+  shareInfo.path = buildSpmPath(query);
+
+  // 配置转发参数
+  if (shareConfig.methods.includes('forward')) {
+    // TODO puhui999: forward 这块有点问题
+    if (shareConfig.forwardInfo.title === '' || shareConfig.forwardInfo.image === '') {
+      console.log('请在平台设置中配置转发信息');
+    }
+    // 设置自定义分享信息
+    shareInfo.title = scene.title || shareConfig.forwardInfo.title;
+    shareInfo.image = $url.cdn(scene.image || shareConfig.forwardInfo.image);
+    shareInfo.desc = scene.desc || shareConfig.forwardInfo.subtitle;
+    shareInfo.path = buildSpmPath(scene.path, query);
+  }
+
+  return shareInfo;
+};
+
+// 构造spm分享参数
+const buildSpmQuery = (params) => {
+  const user = $store('user');
+  let shareId = '0'; // 设置分享者用户ID
+  if (typeof params.shareId === 'undefined') {
+    if (user.isLogin) {
+      shareId = user.userInfo.id;
+    }
+  }
+  let page = '1'; // 页面类型: 1=首页(默认),2=商品,3=拼团商品,4=秒杀商品,5=邀请参团...按需扩展
+  if (typeof params.page !== 'undefined') {
+    page = params.page;
+  }
+  let query = '0'; // 设置页面ID: 如商品ID、拼团ID等
+  if (typeof params.query !== 'undefined') {
+    query = params.query;
+  }
+  let platform = platformMap.indexOf($platform.name) + 1;
+  let from = '1';
+  if (typeof params.from !== 'undefined') {
+    from = platformMap.indexOf(params.from) + 1;
+  }
+  //spmParams = ...  可按需扩展
+  return `spm=${shareId}.${page}.${query}.${platform}.${from}`;
+};
+
+// 构造页面分享参数: 所有的分享都先到首页进行 spm 参数解析
+const buildSpmPath = (query) => {
+  // 默认是主页，页面 page，例如 pages/index/index，根路径前不要填加 /，
+  // 不能携带参数（参数请放在scene字段里），如果不填写这个字段，默认跳主页面。scancode_time为系统保留参数，不允许配置
+  return `pages/index/index`;
+};
+
+// 构造分享链接
+const buildSpmLink = (query, linkAddress = '') => {
+  return `${linkAddress}?${query}`;
+};
+
+// 解析Spm
+const decryptSpm = (spm) => {
+  const user = $store('user');
+  let shareParamsArray = spm.split('.');
+  let shareParams = {
+    spm,
+    shareId: 0,
+    page: '',
+    query: {},
+    platform: '',
+    from: '',
+  };
+  let query;
+  shareParams.shareId = shareParamsArray[0];
+  switch (shareParamsArray[1]) {
+    case '1':
+      // 默认首页不跳转
+      shareParams.page = '/pages/index/index';
+      break;
+    case '2':
+      // 普通商品
+      shareParams.page = '/pages/goods/index';
+      shareParams.query = {
+        id: shareParamsArray[2],
+      };
+      break;
+    case '3':
+      // 拼团商品
+      shareParams.page = '/pages/goods/groupon';
+      query = shareParamsArray[2].split(',');
+      shareParams.query = {
+        id: query[0],
+        activity_id: query[1], // TODO 芋艿：接入分享后，应该统一成 id 参数
+      };
+      break;
+    case '4':
+      // 秒杀商品
+      shareParams.page = '/pages/goods/seckill';
+      query = shareParamsArray[2].split(',');
+      shareParams.query = {
+        id: query[1],
+      };
+      break;
+    case '5':
+      // 参与拼团
+      shareParams.page = '/pages/activity/groupon/detail';
+      shareParams.query = {
+        id: shareParamsArray[2],
+      };
+      break;
+  }
+  shareParams.platform = platformMap[shareParamsArray[3] - 1];
+  shareParams.from = fromMap[shareParamsArray[4] - 1];
+  if (shareParams.shareId != 0) {
+    // 已登录 立即添加分享记录
+    if (user.isLogin) {
+      user.addShareLog(shareParams);
+    } else {
+      // 未登录 待用户登录后添加分享记录
+      uni.setStorageSync('shareLog', shareParams);
+    }
+  }
+
+  if (shareParams.page !== '/pages/index/index') {
+    $router.go(shareParams.page, shareParams.query);
+  }
+  return shareParams;
+};
+
+// 更新公众号分享sdk
+const updateShareInfo = (shareInfo) => {
+  // #ifdef H5
+  if ($platform.name === 'WechatOfficialAccount') {
+    $wxsdk.updateShareInfo(shareInfo);
+  }
+  // #endif
+};
+
+export default {
+  getShareInfo,
+  updateShareInfo,
+  decryptSpm,
+};
diff --git a/sheep/request/index.js b/sheep/request/index.js
new file mode 100644
index 0000000..c4ae4c4
--- /dev/null
+++ b/sheep/request/index.js
@@ -0,0 +1,302 @@
+/**
+ * Shopro-request
+ * @description api模块管理，loading配置，请求拦截，错误处理
+ */
+
+import Request from 'luch-request';
+import { baseUrl, apiPath } from '@/sheep/config';
+import $store from '@/sheep/store';
+import $platform from '@/sheep/platform';
+import {
+	showAuthModal
+} from '@/sheep/hooks/useModal';
+import AuthUtil from '@/api/member/auth';
+
+const options = {
+	// 显示操作成功消息 默认不显示
+	showSuccess: false,
+	// 成功提醒 默认使用后端返回值
+	successMsg: '',
+	// 显示失败消息 默认显示
+	showError: true,
+	// 失败提醒 默认使用后端返回信息
+	errorMsg: '',
+	// 显示请求时loading模态框 默认显示
+	showLoading: true,
+	// loading提醒文字
+	loadingMsg: '加载中',
+	// 需要授权才能请求 默认放开
+	auth: false,
+	// ...
+};
+
+// Loading全局实例
+let LoadingInstance = {
+	target: null,
+	count: 0,
+};
+
+/**
+ * 关闭loading
+ */
+function closeLoading() {
+	if (LoadingInstance.count > 0) LoadingInstance.count--;
+	if (LoadingInstance.count === 0) uni.hideLoading();
+}
+
+/**
+ * @description 请求基础配置 可直接使用访问自定义请求
+ */
+const http = new Request({
+	baseURL: baseUrl + apiPath,
+	timeout: 8000,
+	method: 'GET',
+	header: {
+		Accept: 'text/json',
+		'Content-Type': 'application/json;charset=UTF-8',
+		platform: $platform.name,
+	},
+	// #ifdef APP-PLUS
+	sslVerify: false,
+	// #endif
+	// #ifdef H5
+	// 跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX 2.6.15+）
+	withCredentials: false,
+	// #endif
+	custom: options,
+});
+
+/**
+ * @description 请求拦截器
+ */
+http.interceptors.request.use(
+	(config) => {
+    // 自定义处理【auth 授权】：必须登录的接口，则跳出 AuthModal 登录弹窗
+		if (config.custom.auth && !$store('user').isLogin) {
+			showAuthModal();
+			return Promise.reject();
+		}
+
+    // 自定义处理【loading 加载中】：如果需要显示 loading，则显示 loading
+		if (config.custom.showLoading) {
+			LoadingInstance.count++;
+			LoadingInstance.count === 1 &&
+				uni.showLoading({
+					title: config.custom.loadingMsg,
+					mask: true,
+					fail: () => {
+						uni.hideLoading();
+					},
+				});
+		}
+
+    // 增加 token 令牌、terminal 终端、tenant 租户的请求头
+		const token = getAccessToken();
+		if (token) {
+      config.header['Authorization'] = token;
+    }
+		// TODO 芋艿：特殊处理
+    config.header['Accept'] = '*/*'
+    config.header['tenant-id'] = '1';
+    config.header['terminal'] = '20';
+    // config.header['Authorization'] = 'Bearer test247';
+		return config;
+	},
+	(error) => {
+		return Promise.reject(error);
+	},
+);
+
+/**
+ * @description 响应拦截器
+ */
+http.interceptors.response.use(
+	(response) => {
+		// 约定：如果是 /auth/ 下的 URL 地址，并且返回了 accessToken 说明是登录相关的接口，则自动设置登陆令牌
+		if (response.config.url.indexOf('/member/auth/') >= 0 && response.data?.data?.accessToken) {
+			$store('user').setToken(response.data.data.accessToken, response.data.data.refreshToken);
+		}
+
+    // 自定处理【loading 加载中】：如果需要显示 loading，则关闭 loading
+		response.config.custom.showLoading && closeLoading();
+
+    // 自定义处理【error 错误提示】：如果需要显示错误提示，则显示错误提示
+		if (response.data.code !== 0) {
+      // 特殊：如果 401 错误码，则跳转到登录页 or 刷新令牌
+      if (response.data.code === 401) {
+        return refreshToken(response.config);
+      }
+
+      // 错误提示
+			if (response.config.custom.showError) {
+				uni.showToast({
+					title: response.data.msg || '服务器开小差啦,请稍后再试~',
+					icon: 'none',
+					mask: true,
+				});
+      }
+		}
+
+		// 自定义处理【showSuccess 成功提示】：如果需要显示成功提示，则显示成功提示
+		if (response.config.custom.showSuccess
+      && response.config.custom.successMsg !== ''
+      &&  response.data.code === 0) {
+      uni.showToast({
+				title: response.config.custom.successMsg,
+				icon: 'none',
+			});
+		}
+
+    // 返回结果：包括 code + data + msg
+		return Promise.resolve(response.data);
+	},
+	(error) => {
+		const userStore = $store('user');
+		const isLogin = userStore.isLogin;
+		let errorMessage = '网络请求出错';
+		if (error !== undefined) {
+			switch (error.statusCode) {
+				case 400:
+					errorMessage = '请求错误';
+					break;
+				case 401:
+          errorMessage = isLogin ? '您的登陆已过期' : '请先登录';
+          // 正常情况下，后端不会返回 401 错误，所以这里不处理 handleAuthorized
+          break;
+				case 403:
+					errorMessage = '拒绝访问';
+					break;
+				case 404:
+					errorMessage = '请求出错';
+					break;
+				case 408:
+					errorMessage = '请求超时';
+					break;
+				case 429:
+					errorMessage = '请求频繁, 请稍后再访问';
+					break;
+				case 500:
+					errorMessage = '服务器开小差啦,请稍后再试~';
+					break;
+				case 501:
+					errorMessage = '服务未实现';
+					break;
+				case 502:
+					errorMessage = '网络错误';
+					break;
+				case 503:
+					errorMessage = '服务不可用';
+					break;
+				case 504:
+					errorMessage = '网络超时';
+					break;
+				case 505:
+					errorMessage = 'HTTP 版本不受支持';
+					break;
+			}
+			if (error.errMsg.includes('timeout')) errorMessage = '请求超时';
+			// #ifdef H5
+			if (error.errMsg.includes('Network'))
+				errorMessage = window.navigator.onLine ? '服务器异常' : '请检查您的网络连接';
+			// #endif
+		}
+
+		if (error && error.config) {
+			if (error.config.custom.showError === false) {
+				uni.showToast({
+					title: error.data?.msg || errorMessage,
+					icon: 'none',
+					mask: true,
+				});
+			}
+			error.config.custom.showLoading && closeLoading();
+		}
+
+		return false;
+	},
+);
+
+// Axios 无感知刷新令牌，参考 https://www.dashingdog.cn/article/11 与 https://segmentfault.com/a/1190000020210980 实现
+let requestList = [] // 请求队列
+let isRefreshToken = false // 是否正在刷新中
+const refreshToken = async (config) => {
+  // 如果当前已经是 refresh-token 的 URL 地址，并且还是 401 错误，说明是刷新令牌失败了，直接返回 Promise.reject(error)
+  if (config.url.indexOf('/member/auth/refresh-token') >= 0) {
+    return Promise.reject('error')
+  }
+
+  // 如果未认证，并且未进行刷新令牌，说明可能是访问令牌过期了
+  if (!isRefreshToken) {
+    isRefreshToken = true
+    // 1. 如果获取不到刷新令牌，则只能执行登出操作
+    const refreshToken = getRefreshToken()
+    if (!refreshToken) {
+      return handleAuthorized()
+    }
+    // 2. 进行刷新访问令牌
+    try {
+      const refreshTokenResult = await AuthUtil.refreshToken(refreshToken);
+      if (refreshTokenResult.code !== 0) {
+        // 如果刷新不成功，直接抛出 e 触发 2.2 的逻辑
+        // noinspection ExceptionCaughtLocallyJS
+        throw new Error('刷新令牌失败');
+      }
+      // 2.1 刷新成功，则回放队列的请求 + 当前请求
+      config.header.Authorization = 'Bearer ' + getAccessToken()
+      requestList.forEach((cb) => {
+        cb()
+      })
+      requestList = []
+      return request(config)
+    } catch (e) {
+      // 为什么需要 catch 异常呢？刷新失败时，请求因为 Promise.reject 触发异常。
+      // 2.2 刷新失败，只回放队列的请求
+      requestList.forEach((cb) => {
+        cb()
+      })
+      // 提示是否要登出。即不回放当前请求！不然会形成递归
+      return handleAuthorized()
+    } finally {
+      requestList = []
+      isRefreshToken = false
+    }
+  } else {
+    // 添加到队列，等待刷新获取到新的令牌
+    return new Promise((resolve) => {
+      requestList.push(() => {
+        config.header.Authorization = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+        resolve(request(config))
+      })
+    })
+  }
+}
+
+/**
+ * 处理 401 未登录的错误
+ */
+const handleAuthorized = () => {
+  const userStore = $store('user');
+  userStore.logout(true);
+  showAuthModal();
+  // 登录超时
+  return Promise.reject({
+    code: 401,
+    msg: userStore.isLogin ? '您的登陆已过期' : '请先登录'
+  })
+}
+
+/** 获得访问令牌 */
+const getAccessToken = () => {
+  return uni.getStorageSync('token');
+}
+
+/** 获得刷新令牌 */
+const getRefreshToken = () => {
+  return uni.getStorageSync('refresh-token');
+}
+
+const request = (config) => {
+	return http.middleware(config);
+};
+
+export default request;
\ No newline at end of file
diff --git a/sheep/router/index.js b/sheep/router/index.js
new file mode 100644
index 0000000..86796e5
--- /dev/null
+++ b/sheep/router/index.js
@@ -0,0 +1,185 @@
+import $store from '@/sheep/store';
+import { showAuthModal, showShareModal } from '@/sheep/hooks/useModal';
+import { isNumber, isString, isEmpty, startsWith, isObject, isNil, clone } from 'lodash';
+import throttle from '@/sheep/helper/throttle';
+
+const _go = (
+  path,
+  params = {},
+  options = {
+    redirect: false,
+  },
+) => {
+  let page = ''; // 跳转页面
+  let query = ''; // 页面参数
+  let url = ''; // 跳转页面完整路径
+
+  if (isString(path)) {
+    // 判断跳转类型是 path ｜ 还是http
+    if (startsWith(path, 'http')) {
+      // #ifdef H5
+      window.location = path;
+      return;
+      // #endif
+      // #ifndef H5
+      page = `/pages/public/webview`;
+      query = `url=${encodeURIComponent(path)}`;
+      // #endif
+    } else if (startsWith(path, 'action:')) {
+      handleAction(path);
+      return;
+    } else {
+      [page, query] = path.split('?');
+    }
+    if (!isEmpty(params)) {
+      let query2 = paramsToQuery(params);
+      if (isEmpty(query)) {
+        query = query2;
+      } else {
+        query += '&' + query2;
+      }
+    }
+  }
+
+  if (isObject(path)) {
+    page = path.url;
+    if (!isNil(path.params)) {
+      query = paramsToQuery(path.params);
+    }
+  }
+
+  const nextRoute = ROUTES_MAP[page];
+
+  // 未找到指定跳转页面
+  // mark: 跳转404页
+  if (!nextRoute) {
+    console.log(`%c跳转路径参数错误<${page || 'EMPTY'}>`, 'color:red;background:yellow');
+    return;
+  }
+
+  // 页面登录拦截
+  if (nextRoute.meta?.auth && !$store('user').isLogin) {
+    showAuthModal();
+    return;
+  }
+
+  url = page;
+  if (!isEmpty(query)) {
+    url += `?${query}`;
+  }
+
+  // 跳转底部导航
+  if (TABBAR.includes(page)) {
+    uni.switchTab({
+      url,
+    });
+    return;
+  }
+
+  // 使用redirect跳转
+  if (options.redirect) {
+    uni.redirectTo({
+      url,
+    });
+    return;
+  }
+
+  uni.navigateTo({
+    url,
+  });
+};
+
+// 限流 防止重复点击跳转
+function go(...args) {
+  throttle(() => {
+    _go(...args);
+  });
+}
+
+function paramsToQuery(params) {
+  if (isEmpty(params)) {
+    return '';
+  }
+  // return new URLSearchParams(Object.entries(params)).toString();
+  let query = [];
+  for (let key in params) {
+    query.push(key + '=' + params[key]);
+  }
+
+  return query.join('&');
+}
+
+function back() {
+  // #ifdef H5
+  history.back();
+  // #endif
+
+  // #ifndef H5
+  uni.navigateBack();
+  // #endif
+}
+
+function redirect(path, params = {}) {
+  go(path, params, {
+    redirect: true,
+  });
+}
+
+// 检测是否有浏览器历史
+function hasHistory() {
+  // #ifndef H5
+  const pages = getCurrentPages();
+  if (pages.length > 1) {
+    return true;
+  }
+  return false;
+  // #endif
+
+  // #ifdef H5
+  return !!history.state.back;
+  // #endif
+}
+
+function getCurrentRoute(field = '') {
+  let currentPage = getCurrentPage();
+  // #ifdef MP
+  currentPage.$page['route'] = currentPage.route;
+  currentPage.$page['options'] = currentPage.options;
+  // #endif
+  if (field !== '') {
+    return currentPage.$page[field];
+  } else {
+    return currentPage.$page;
+  }
+}
+
+function getCurrentPage() {
+  let pages = getCurrentPages();
+  return pages[pages.length - 1];
+}
+
+function handleAction(path) {
+  const action = path.split(':');
+  switch (action[1]) {
+    case 'showShareModal':
+      showShareModal();
+      break;
+  }
+}
+
+function error(errCode, errMsg = '') {
+  redirect('/pages/public/error', {
+    errCode,
+    errMsg,
+  });
+}
+
+export default {
+  go,
+  back,
+  hasHistory,
+  redirect,
+  getCurrentPage,
+  getCurrentRoute,
+  error,
+};
diff --git a/sheep/router/utils/strip-json-comments.js b/sheep/router/utils/strip-json-comments.js
new file mode 100644
index 0000000..5995992
--- /dev/null
+++ b/sheep/router/utils/strip-json-comments.js
@@ -0,0 +1,79 @@
+const singleComment = Symbol('singleComment');
+const multiComment = Symbol('multiComment');
+
+const stripWithoutWhitespace = () => '';
+const stripWithWhitespace = (string, start, end) => string.slice(start, end).replace(/\S/g, ' ');
+
+const isEscaped = (jsonString, quotePosition) => {
+  let index = quotePosition - 1;
+  let backslashCount = 0;
+
+  while (jsonString[index] === '\\') {
+    index -= 1;
+    backslashCount += 1;
+  }
+
+  return Boolean(backslashCount % 2);
+};
+
+export default function stripJsonComments(jsonString, { whitespace = true } = {}) {
+  if (typeof jsonString !== 'string') {
+    throw new TypeError(
+      `Expected argument \`jsonString\` to be a \`string\`, got \`${typeof jsonString}\``,
+    );
+  }
+
+  const strip = whitespace ? stripWithWhitespace : stripWithoutWhitespace;
+
+  let isInsideString = false;
+  let isInsideComment = false;
+  let offset = 0;
+  let result = '';
+
+  for (let index = 0; index < jsonString.length; index++) {
+    const currentCharacter = jsonString[index];
+    const nextCharacter = jsonString[index + 1];
+
+    if (!isInsideComment && currentCharacter === '"') {
+      const escaped = isEscaped(jsonString, index);
+      if (!escaped) {
+        isInsideString = !isInsideString;
+      }
+    }
+
+    if (isInsideString) {
+      continue;
+    }
+
+    if (!isInsideComment && currentCharacter + nextCharacter === '//') {
+      result += jsonString.slice(offset, index);
+      offset = index;
+      isInsideComment = singleComment;
+      index++;
+    } else if (isInsideComment === singleComment && currentCharacter + nextCharacter === '\r\n') {
+      index++;
+      isInsideComment = false;
+      result += strip(jsonString, offset, index);
+      offset = index;
+      continue;
+    } else if (isInsideComment === singleComment && currentCharacter === '\n') {
+      isInsideComment = false;
+      result += strip(jsonString, offset, index);
+      offset = index;
+    } else if (!isInsideComment && currentCharacter + nextCharacter === '/*') {
+      result += jsonString.slice(offset, index);
+      offset = index;
+      isInsideComment = multiComment;
+      index++;
+      continue;
+    } else if (isInsideComment === multiComment && currentCharacter + nextCharacter === '*/') {
+      index++;
+      isInsideComment = false;
+      result += strip(jsonString, offset, index + 1);
+      offset = index + 1;
+      continue;
+    }
+  }
+
+  return result + (isInsideComment ? strip(jsonString.slice(offset)) : jsonString.slice(offset));
+}
diff --git a/sheep/router/utils/uni-read-pages-v3.js b/sheep/router/utils/uni-read-pages-v3.js
new file mode 100644
index 0000000..303f10a
--- /dev/null
+++ b/sheep/router/utils/uni-read-pages-v3.js
@@ -0,0 +1,103 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+const fs = require('fs');
+import stripJsonComments from './strip-json-comments';
+import { isArray, isEmpty } from 'lodash';
+
+class TransformPages {
+  constructor({ includes, pagesJsonDir }) {
+    this.includes = includes;
+    this.uniPagesJSON = JSON.parse(stripJsonComments(fs.readFileSync(pagesJsonDir, 'utf-8')));
+    this.routes = this.getPagesRoutes().concat(this.getSubPackagesRoutes());
+    this.tabbar = this.getTabbarRoutes();
+    this.routesMap = this.transformPathToKey(this.routes);
+  }
+  /**
+   * 通过读取pages.json文件 生成直接可用的routes
+   */
+  getPagesRoutes(pages = this.uniPagesJSON.pages, rootPath = null) {
+    let routes = [];
+    for (let i = 0; i < pages.length; i++) {
+      const item = pages[i];
+      let route = {};
+      for (let j = 0; j < this.includes.length; j++) {
+        const key = this.includes[j];
+        let value = item[key];
+        if (key === 'path') {
+          value = rootPath ? `/${rootPath}/${value}` : `/${value}`;
+        }
+        if (key === 'aliasPath' && i == 0 && rootPath == null) {
+          route[key] = route[key] || '/';
+        } else if (value !== undefined) {
+          route[key] = value;
+        }
+      }
+      routes.push(route);
+    }
+    return routes;
+  }
+  /**
+   * 解析小程序分包路径
+   */
+  getSubPackagesRoutes() {
+    if (!(this.uniPagesJSON && this.uniPagesJSON.subPackages)) {
+      return [];
+    }
+    const subPackages = this.uniPagesJSON.subPackages;
+    let routes = [];
+    for (let i = 0; i < subPackages.length; i++) {
+      const subPages = subPackages[i].pages;
+      const root = subPackages[i].root;
+      const subRoutes = this.getPagesRoutes(subPages, root);
+      routes = routes.concat(subRoutes);
+    }
+    return routes;
+  }
+
+  getTabbarRoutes() {
+    if (!(this.uniPagesJSON && this.uniPagesJSON.tabBar && this.uniPagesJSON.tabBar.list)) {
+      return [];
+    }
+    const tabbar = this.uniPagesJSON.tabBar.list;
+    let tabbarMap = [];
+    tabbar.forEach((bar) => {
+      tabbarMap.push('/' + bar.pagePath);
+    });
+    return tabbarMap;
+  }
+
+  transformPathToKey(list) {
+    if (!isArray(list) || isEmpty(list)) {
+      return [];
+    }
+    let map = {};
+    list.forEach((i) => {
+      map[i.path] = i;
+    });
+    return map;
+  }
+}
+
+function uniReadPagesV3Plugin({ pagesJsonDir, includes }) {
+  let defaultIncludes = ['path', 'aliasPath', 'name'];
+  includes = [...defaultIncludes, ...includes];
+  let pages = new TransformPages({
+    pagesJsonDir,
+    includes,
+  });
+  return {
+    name: 'uni-read-pages-v3',
+    config(config) {
+      return {
+        define: {
+          ROUTES: pages.routes,
+          ROUTES_MAP: pages.routesMap,
+          TABBAR: pages.tabbar,
+        },
+      };
+    },
+  };
+}
+exports.default = uniReadPagesV3Plugin;
diff --git a/sheep/scss/_main.scss b/sheep/scss/_main.scss
new file mode 100644
index 0000000..999513a
--- /dev/null
+++ b/sheep/scss/_main.scss
@@ -0,0 +1,354 @@
+body {
+  color: var(--text-a);
+  background-color: var(--ui-BG-1) !important;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+/* ==================
+         初始化
+ ==================== */
+.ui-link {
+  cursor: pointer;
+}
+navigator {
+  display: inline-flex;
+}
+navigator.navigator-hover {
+  background-color: inherit;
+  transform: translate(1rpx, 1rpx);
+  // opacity: 1;
+}
+
+/* ==================
+         辅助类
+ ==================== */
+.none {
+  display: none !important;
+}
+.inline {
+  display: inline !important;
+}
+.inline-block {
+  display: inline-block !important;
+}
+.block {
+  display: block !important;
+}
+.touch-none {
+  pointer-events: none;
+}
+.touch-all {
+  pointer-events: all;
+}
+.flex {
+  display: flex !important;
+}
+.inline-flex {
+  display: inline-flex !important;
+}
+.w-100 {
+  width: 100%;
+}
+/* -- 浮动 -- */
+.cf::after,
+.cf::before {
+  content: '';
+  display: table;
+}
+.cf::after {
+  clear: both;
+}
+.fl {
+  float: left;
+}
+.fr {
+  float: right;
+}
+.position-center {
+  @include position-center;
+}
+.position-relative {
+  position: relative;
+}
+/* -- 工具类 -- */
+@function negativify-map($map) {
+  $result: ();
+  @each $key, $value in $map {
+    @if $key != 0 {
+      $result: map-merge($result, ('n' + $key: (-$value)));
+    }
+  }
+  @return $result;
+}
+
+$utilities: () !default;
+$utilities: map-merge(
+  (
+    'margin': (
+      responsive: true,
+      property: margin,
+      class: m,
+      values:
+        map-merge(
+          $spacers,
+          (
+            auto: auto,
+          )
+        ),
+    ),
+    'margin-x': (
+      property: margin-right margin-left,
+      class: mx,
+      values:
+        map-merge(
+          $spacers,
+          (
+            auto: auto,
+          )
+        ),
+    ),
+    'margin-y': (
+      property: margin-top margin-bottom,
+      class: my,
+      values:
+        map-merge(
+          $spacers,
+          (
+            auto: auto,
+          )
+        ),
+    ),
+    'margin-top': (
+      property: margin-top,
+      class: mt,
+      values:
+        map-merge(
+          $spacers,
+          (
+            auto: auto,
+          )
+        ),
+    ),
+    'margin-right': (
+      property: margin-right,
+      class: mr,
+      values:
+        map-merge(
+          $spacers,
+          (
+            auto: auto,
+          )
+        ),
+    ),
+    'margin-bottom': (
+      property: margin-bottom,
+      class: mb,
+      values:
+        map-merge(
+          $spacers,
+          (
+            auto: auto,
+          )
+        ),
+    ),
+    'margin-left': (
+      property: margin-left,
+      class: ml,
+      values:
+        map-merge(
+          $spacers,
+          (
+            auto: auto,
+          )
+        ),
+    ),
+    'padding': (
+      responsive: true,
+      property: padding,
+      class: p,
+      values: $spacers,
+    ),
+    'padding-x': (
+      property: padding-right padding-left,
+      class: px,
+      values: $spacers,
+    ),
+    'padding-y': (
+      property: padding-top padding-bottom,
+      class: py,
+      values: $spacers,
+    ),
+    'padding-top': (
+      property: padding-top,
+      class: pt,
+      values: $spacers,
+    ),
+    'padding-right': (
+      property: padding-right,
+      class: pr,
+      values: $spacers,
+    ),
+    'padding-bottom': (
+      property: padding-bottom,
+      class: pb,
+      values: $spacers,
+    ),
+    'padding-left': (
+      property: padding-left,
+      class: pl,
+      values: $spacers,
+    ),
+    'font-weight': (
+      property: font-weight,
+      class: text,
+      values: (
+        light: $font-weight-light,
+        lighter: $font-weight-lighter,
+        normal: $font-weight-normal,
+        bold: $font-weight-bold,
+        bolder: $font-weight-bolder,
+      ),
+    ),
+    'text-align': (
+      property: text-align,
+      class: text,
+      values: left right center,
+    ),
+    'font-color': (
+      property: color,
+      class: text,
+      values:
+        map-merge(
+          $colors,
+          map-merge(
+            $grays,
+            map-merge(
+              $darks,
+              (
+                'reset': inherit,
+              )
+            )
+          )
+        ),
+    ),
+    'line-height': (
+      property: line-height,
+      class: lh,
+      values: (
+        1: 1,
+        sm: $line-height-sm,
+        base: $line-height-base,
+        lg: $line-height-lg,
+      ),
+    ),
+    'white-space': (
+      property: white-space,
+      class: text,
+      values: (
+        nowrap: nowrap,
+      ),
+    ),
+    'radius': (
+      property: border-radius,
+      class: radius,
+      values: (
+        null: $radius,
+        sm: $radius-sm,
+        lg: $radius-lg,
+        0: 0,
+      ),
+    ),
+    'round': (
+      property: border-radius,
+      class: round,
+      values: (
+        null: $round-pill,
+        circle: 50%,
+      ),
+    ),
+    'radius-top': (
+      property: border-top-left-radius border-top-right-radius,
+      class: radius-top,
+      values: (
+        null: $radius,
+      ),
+    ),
+    'radius-right': (
+      property: border-top-right-radius border-bottom-right-radius,
+      class: radius-right,
+      values: (
+        null: $radius,
+      ),
+    ),
+    'radius-bottom': (
+      property: border-bottom-right-radius border-bottom-left-radius,
+      class: radius-bottom,
+      values: (
+        null: $radius,
+      ),
+    ),
+    'radius-left': (
+      property: border-bottom-left-radius border-top-left-radius,
+      class: radius-left,
+      values: (
+        null: $radius,
+      ),
+    ),
+    'radius-lr': (
+      property: border-top-left-radius border-bottom-right-radius,
+      class: radius-lr,
+      values: (
+        null: $radius,
+      ),
+    ),
+    'radius-lrs': (
+      property: border-top-right-radius border-bottom-left-radius,
+      class: radius-lr,
+      values: (
+        null: 0,
+      ),
+    ),
+    'radius-rl': (
+      property: border-top-right-radius border-bottom-left-radius,
+      class: radius-rl,
+      values: (
+        null: $radius,
+      ),
+    ),
+    'radius-rls': (
+      property: border-top-left-radius border-bottom-right-radius,
+      class: radius-rl,
+      values: (
+        null: 0,
+      ),
+    ),
+  ),
+  $utilities
+);
+@each $key, $utility in $utilities {
+  @if type-of($utility) == 'map' {
+    $values: map-get($utility, values);
+    @if type-of($values) == 'string' or type-of(nth($values, 1)) != 'list' {
+      $values: zip($values, $values);
+    }
+    @each $key, $value in $values {
+      $properties: map-get($utility, property);
+      @if type-of($properties) == 'string' {
+        $properties: append((), $properties);
+      }
+      $property-class: if(
+        map-has-key($utility, class),
+        map-get($utility, class),
+        nth($properties, 1)
+      );
+      $property-class: if($property-class == null, '', $property-class);
+      $property-class-modifier: if($key, if($property-class == '', '', '-') + $key, '');
+      .#{$property-class + $property-class-modifier} {
+        @each $property in $properties {
+          #{$property}: $value !important;
+        }
+      }
+    }
+  }
+}
diff --git a/sheep/scss/_mixins.scss b/sheep/scss/_mixins.scss
new file mode 100644
index 0000000..299f7b1
--- /dev/null
+++ b/sheep/scss/_mixins.scss
@@ -0,0 +1,61 @@
+@mixin bg-square {
+  background: {
+    color: #fff;
+    image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
+      linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
+    size: 40rpx 40rpx;
+    position: 0 0, 20rpx 20rpx;
+  }
+}
+
+@mixin flex($direction: row) {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: $direction;
+}
+@mixin flex-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin arrow {
+  content: '';
+  height: 0;
+  width: 0;
+  position: absolute;
+}
+@mixin arrow-top {
+  @include arrow;
+  // border-color: transparent transparent $ui-BG;
+  border-style: none solid solid;
+  border-width: 0 20rpx 20rpx;
+}
+
+@mixin arrow-right {
+  @include arrow;
+  // border-color: transparent  $ui-BG transparent;
+  border-style: solid solid solid none;
+  border-width: 20rpx 20rpx 20rpx 0;
+}
+@mixin position-center {
+  position: absolute !important;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+}
+
+@mixin blur {
+  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
+  color: var(--ui-TC);
+}
diff --git a/sheep/scss/_tools.scss b/sheep/scss/_tools.scss
new file mode 100644
index 0000000..e1fb636
--- /dev/null
+++ b/sheep/scss/_tools.scss
@@ -0,0 +1,286 @@
+/* ==================
+          常用工具
+ ==================== */
+
+.ss-bg-opactity-block {
+  background-color: rgba(#000, 0.2);
+  color: #fff;
+}
+
+/* ==================
+          flex布局
+ ==================== */
+
+.ss-flex {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.ss-flex-1 {
+  flex: 1;
+}
+
+.ss-flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.ss-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.ss-flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.ss-col-center {
+  align-items: center;
+}
+
+.ss-col-top {
+  align-items: flex-start;
+}
+
+.ss-col-bottom {
+  align-items: flex-end;
+}
+
+.ss-col-stretch {
+  align-items: stretch;
+}
+
+.ss-row-center {
+  justify-content: center;
+}
+
+.ss-row-left {
+  justify-content: flex-start;
+}
+
+.ss-row-right {
+  justify-content: flex-end;
+}
+
+.ss-row-between {
+  justify-content: space-between;
+}
+
+.ss-row-around {
+  justify-content: space-around;
+}
+
+.ss-self-start {
+  align-self: flex-start;
+}
+
+.ss-self-end {
+  align-self: flex-end;
+}
+
+.ss-self-center {
+  align-self: center;
+}
+.ss-h-100 {
+  height: 100%;
+}
+.ss-w-100 {
+  width: 100%;
+}
+
+/* ==================
+
+    margin padding: 内外边距
+	
+ ==================== */
+@for $i from 0 through 100 {
+  // 只要双数和能被5除尽的数
+  @if $i % 2==0 or $i % 5==0 {
+    // 得出：u-margin-30或者u-m-30
+    .ss-margin-#{$i},
+    .ss-m-#{$i} {
+      margin: $i + rpx;
+    }
+    .ss-m-x-#{$i} {
+      margin-left: $i + rpx;
+      margin-right: $i + rpx;
+    }
+    .ss-m-y-#{$i} {
+      margin-top: $i + rpx;
+      margin-bottom: $i + rpx;
+    }
+
+    // 得出：u-padding-30或者u-p-30
+    .ss-padding-#{$i},
+    .ss-p-#{$i} {
+      padding: $i + rpx;
+    }
+    .ss-p-x-#{$i} {
+      padding-left: $i + rpx;
+      padding-right: $i + rpx;
+    }
+    .ss-p-y-#{$i} {
+      padding-top: $i + rpx;
+      padding-bottom: $i + rpx;
+    }
+
+    @each $short, $long in l left, t top, r right, b bottom {
+      // 缩写版，结果如： u-m-l-30
+      // 定义外边距
+      .ss-m-#{$short}-#{$i} {
+        margin-#{$long}: $i + rpx;
+      }
+
+      // 定义内边距
+      .ss-p-#{$short}-#{$i} {
+        padding-#{$long}: $i + rpx;
+      }
+
+      // 完整版，结果如：u-margin-left-30
+      // 定义外边距
+      .ss-margin-#{$long}-#{$i} {
+        margin-#{$long}: $i + rpx;
+      }
+
+      // 定义内边距
+      .ss-padding-#{$long}-#{$i} {
+        padding-#{$long}: $i + rpx;
+      }
+    }
+  }
+}
+
+/* ==================
+
+    radius
+	
+ ==================== */
+@for $i from 0 through 100 {
+  // 只要双数和能被5除尽的数
+  @if $i % 2==0 or $i % 5==0 {
+    .ss-radius-#{$i},
+    .ss-r-#{$i} {
+      border-radius: $i + rpx;
+    }
+
+    .ss-r-t-#{$i} {
+      border-top-left-radius: $i + rpx;
+      border-top-right-radius: $i + rpx;
+    }
+
+    .ss-r-b-#{$i} {
+      border-bottom-left-radius: $i + rpx;
+      border-bottom-right-radius: $i + rpx;
+    }
+
+    @each $short, $long in tl 'top-left', tr 'top-right', bl 'bottom-right', br 'bottom-right' {
+      // 定义外边距
+      .ss-r-#{$short}-#{$i} {
+        border-#{$long}-radius: $i + rpx;
+      }
+
+      // 定义内边距
+      .ss-radius-#{$long}-#{$i} {
+        border-#{$long}-radius: $i + rpx;
+      }
+    }
+  }
+}
+
+/* ==================
+
+    溢出省略号
+    @param {Number} 行数
+	
+ ==================== */
+@mixin ellipsis($rowCount: 1) {
+  // @if $rowCount <=1 {
+  //   overflow: hidden;
+  //   text-overflow: ellipsis;
+  //   white-space: nowrap;
+  // } @else {
+  //   min-width: 0;
+  //   overflow: hidden;
+  //   text-overflow: ellipsis;
+  //   display: -webkit-box;
+  //   -webkit-line-clamp: $rowCount;
+  //   -webkit-box-orient: vertical;
+  // }
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $rowCount;
+  -webkit-box-orient: vertical;
+}
+
+@for $i from 1 through 6 {
+  .ss-line-#{$i} {
+    @include ellipsis($i);
+  }
+}
+
+/* ==================
+    hover
+ ==================== */
+.ss-hover-class {
+  background-color: $gray-c;
+  opacity: 0.6;
+}
+.ss-hover-btn {
+  transform: translate(1px, 1px);
+}
+
+/* ==================
+    底部安全区域
+ ==================== */
+
+.ss-safe-bottom {
+  padding-bottom: 0;
+  padding-bottom: calc(constant(safe-area-inset-bottom) / 5 * 3);
+  padding-bottom: calc(env(safe-area-inset-bottom) / 5 * 3);
+}
+
+/* ==================
+
+    字体大小
+	
+ ==================== */
+
+@for $i from 20 through 50 {
+  .ss-font-#{$i} {
+    font-size: $i + rpx;
+  }
+}
+
+/* ==================
+    按钮
+ ==================== */
+.ss-reset-button {
+  padding: 0;
+  margin: 0;
+  font-size: inherit;
+  background-color: transparent;
+  color: inherit;
+  position: relative;
+  border: 0rpx;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: baseline;
+  transform: translate(0, 0);
+}
+.ss-reset-button.button-hover {
+  transform: translate(1px, 1px);
+  background: none;
+}
+
+.ss-reset-button::after {
+  border: none;
+}
diff --git a/sheep/scss/_var.scss b/sheep/scss/_var.scss
new file mode 100644
index 0000000..b0d88c8
--- /dev/null
+++ b/sheep/scss/_var.scss
@@ -0,0 +1,162 @@
+@import './mixins';
+
+//颜色 ，渐变背景60%
+$yellow: #ffc300; //ss-黄
+$orange: #ff6000; //ss-橘
+$red: #ff3000; //ss-红
+$pink: #e03997;
+$mauve: #b745cb;
+$purple: #652abf; //rgba(101, 42, 191, 1); // ss-紫
+$blue: #0081ff;
+$cyan: #37c0fe;
+$green: #2aae67; //ss-绿
+$olive: #8dc63f;
+$grey: #8799a3;
+$brown: #a5673f;
+$black: #484848; //ss-黑
+$golden: #e9b461; //ss-金
+
+$colors: ();
+$colors: map-merge(
+  (
+    'yellow': $yellow,
+    'orange': $orange,
+    'red': $red,
+    'pink': $pink,
+    'mauve': $mauve,
+    'purple': $purple,
+    'violet': $purple,
+    'blue': $blue,
+    'cyan': $cyan,
+    'green': $green,
+    'olive': $olive,
+    'grey': $grey,
+    'brown': $brown,
+    'black': $black,
+    'golden': $golden,
+  ),
+  $colors
+);
+
+//灰度
+$bg-page: #f6f6f6;
+$white: #ffffff;
+$gray-f: #f8f9fa;
+$gray-e: #eeeeee;
+$gray-d: #dddddd;
+$gray-c: #cccccc;
+$gray-b: #bbbbbb;
+$gray-a: #aaaaaa;
+$dark-9: #999999;
+$dark-8: #888888;
+$dark-7: #777777;
+$dark-6: #666666;
+$dark-5: #555555;
+$dark-4: #484848; //ss-黑
+$dark-3: #333333;
+$dark-2: #222222;
+$dark-1: #111111;
+$black: #000000;
+
+$grays: ();
+$grays: map-merge(
+  (
+    'white': $white,
+    'gray-f': $gray-f,
+    'gray-e': $gray-e,
+    'gray-d': $gray-d,
+    'gray-c': $gray-c,
+    'gray-b': $gray-b,
+    'gray-a': $gray-a,
+    'gray': $gray-a,
+  ),
+  $grays
+);
+
+$darks: ();
+$darks: map-merge(
+  (
+    'dark-9': $dark-9,
+    'dark-8': $dark-8,
+    'dark-7': $dark-7,
+    'dark-6': $dark-6,
+    'dark-5': $dark-5,
+    'dark-4': $dark-4,
+    'dark-3': $dark-3,
+    'dark-2': $dark-2,
+    'dark-1': $dark-1,
+    'black': $black,
+  ),
+  $darks
+);
+
+// 边框
+$border-width: 1rpx !default; // 边框大小
+$border-color: $gray-d !default; // 边框颜色
+
+// 圆角
+$radius: 10rpx !default; // 默认圆角大小
+$radius-lg: 40rpx !default; // 大圆角
+$radius-sm: 6rpx !default; // 小圆角
+$round-pill: 1000rpx !default; // 半圆
+
+// 动画过渡
+$transition-base: all 0.2s ease-in-out !default; // 默认过渡
+$transition-base-out: all 0.04s ease-in-out !default; // 进场过渡
+$transition-fade: opacity 0.15s linear !default; // 透明过渡
+$transition-collapse: height 0.35s ease !default; // 收缩过渡
+
+// 间距
+$spacer: 20rpx !default;
+$spacers: () !default;
+$spacers: map-merge(
+  (
+    0: 0,
+    1: $spacer * 0.25,
+    2: $spacer * 0.5,
+    3: $spacer,
+    4: $spacer * 1.5,
+    5: $spacer * 3,
+    6: $spacer * 5,
+  ),
+  $spacers
+);
+// 字形
+$font-weight-lighter: lighter !default;
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-bold: 700 !default;
+$font-weight-bolder: 900 !default;
+$fontsize: () !default;
+$fontsize: map-merge(
+  (
+    xs: 20,
+    sm: 24,
+    df: 28,
+    lg: 32,
+    xl: 36,
+    xxl: 44,
+    sl: 80,
+    xsl: 120,
+  ),
+  $fontsize
+);
+// 段落
+$line-height-base: 1.5 !default;
+$line-height-lg: 2 !default;
+$line-height-sm: 1.25 !default;
+// 图标
+$iconsize: () !default;
+$iconsize: map-merge(
+  (
+    xs: 0.5,
+    sm: 0.75,
+    df: 1,
+    lg: 1.25,
+    xl: 1.5,
+    xxl: 2,
+    sl: 6,
+    xsl: 10,
+  ),
+  $iconsize
+);
diff --git a/sheep/scss/font/OPPOSANS-M-subfont.ttf b/sheep/scss/font/OPPOSANS-M-subfont.ttf
new file mode 100644
index 0000000..88ff835
Binary files /dev/null and b/sheep/scss/font/OPPOSANS-M-subfont.ttf differ
diff --git a/sheep/scss/icon/_coloricon.scss b/sheep/scss/icon/_coloricon.scss
new file mode 100644
index 0000000..f391ca4
--- /dev/null
+++ b/sheep/scss/icon/_coloricon.scss
@@ -0,0 +1,1340 @@
+@font-face {
+  font-family: 'coloricon';
+  src: url('data:application/x-font-woff2;charset=utf-8;base64,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')
+    format('woff2');
+  /* #ifdef MP-ALIPAY */
+  src: url('//at.alicdn.com/t/font_1656945_d66u4pxvlq6.woff2') format('woff2'),
+    url('//at.alicdn.com/t/font_1656945_d66u4pxvlq6.woff') format('woff'),
+    url('//at.alicdn.com/t/font_1656945_d66u4pxvlq6.ttf') format('truetype');
+  /* #endif */
+  font-weight: normal;
+  font-style: normal;
+}
+[class*='cicon-'] {
+  font-family: 'coloricon';
+  display: inline-block;
+}
+
+.cicon-Aa:before {
+  content: '\e7a1';
+}
+.cicon-accounts:before {
+  content: '\e681';
+}
+.cicon-accounts-o:before {
+  content: '\e686';
+}
+.cicon-add:before {
+  content: '\e6e4';
+}
+.cicon-add-round:before {
+  content: '\e717';
+}
+.cicon-add-round-o:before {
+  content: '\e718';
+}
+.cicon-alarm:before {
+  content: '\e61e';
+}
+.cicon-album:before {
+  content: '\e759';
+}
+.cicon-alipay:before {
+  content: '\e6e1';
+}
+.cicon-android:before {
+  content: '\e6e2';
+}
+.cicon-angle:before {
+  content: '\e605';
+}
+.cicon-apple:before {
+  content: '\e8e7';
+}
+.cicon-apps:before {
+  content: '\e737';
+}
+.cicon-archive:before {
+  content: '\e7ae';
+}
+.cicon-archive-o:before {
+  content: '\e7ad';
+}
+.cicon-arrow:before {
+  content: '\e608';
+}
+.cicon-at-line:before {
+  content: '\e75c';
+}
+.cicon-avatar:before {
+  content: '\e663';
+}
+.cicon-avatar-o:before {
+  content: '\e665';
+}
+.cicon-avatars:before {
+  content: '\e67e';
+}
+.cicon-avatars-o:before {
+  content: '\e680';
+}
+.cicon-back:before {
+  content: '\e600';
+}
+.cicon-backspace:before {
+  content: '\e6a9';
+}
+.cicon-backup:before {
+  content: '\e61f';
+}
+.cicon-backup-restore:before {
+  content: '\e62d';
+}
+.cicon-barcode:before {
+  content: '\e71f';
+}
+.cicon-book:before {
+  content: '\e6a2';
+}
+.cicon-bookmark:before {
+  content: '\e6a3';
+}
+.cicon-bookmark-o:before {
+  content: '\e697';
+}
+.cicon-bookmarks:before {
+  content: '\e6a6';
+}
+.cicon-box:before {
+  content: '\e714';
+}
+.cicon-box-block:before {
+  content: '\e6ac';
+}
+.cicon-box-right:before {
+  content: '\e6a0';
+}
+.cicon-brand:before {
+  content: '\e726';
+}
+.cicon-brand-o:before {
+  content: '\e727';
+}
+.cicon-building:before {
+  content: '\e6c3';
+}
+.cicon-building-o:before {
+  content: '\e6c7';
+}
+.cicon-camera:before {
+  content: '\e6fa';
+}
+.cicon-camera-add:before {
+  content: '\e736';
+}
+.cicon-camera-add-o:before {
+  content: '\e735';
+}
+.cicon-camera-lens:before {
+  content: '\e68f';
+}
+.cicon-camera-lens-o:before {
+  content: '\e68e';
+}
+.cicon-camera-o:before {
+  content: '\e6fb';
+}
+.cicon-camera-rotate:before {
+  content: '\e71e';
+}
+.cicon-card:before {
+  content: '\e744';
+}
+.cicon-cardboard:before {
+  content: '\e7a9';
+}
+.cicon-cardboard-o:before {
+  content: '\e7aa';
+}
+.cicon-cardboard-off-o:before {
+  content: '\e7af';
+}
+.cicon-cart:before {
+  content: '\e70b';
+}
+.cicon-cart-o:before {
+  content: '\e708';
+}
+.cicon-chat:before {
+  content: '\e739';
+}
+.cicon-chat-bubble:before {
+  content: '\e69b';
+}
+.cicon-chat-bubble-o:before {
+  content: '\e6a7';
+}
+.cicon-chat-list:before {
+  content: '\e69d';
+}
+.cicon-chat-list-o:before {
+  content: '\e6aa';
+}
+.cicon-chat-o:before {
+  content: '\e73c';
+}
+.cicon-chat-smile:before {
+  content: '\e779';
+}
+.cicon-chat-smile-o:before {
+  content: '\e78e';
+}
+.cicon-chat-smiles:before {
+  content: '\e76b';
+}
+.cicon-chat-smiles-o:before {
+  content: '\e74a';
+}
+.cicon-check:before {
+  content: '\e69f';
+}
+.cicon-checkbox:before {
+  content: '\e713';
+}
+.cicon-checkbox-o:before {
+  content: '\e715';
+}
+.cicon-check-round:before {
+  content: '\e6f1';
+}
+.cicon-check-round-o:before {
+  content: '\e6f2';
+}
+.cicon-choiceness:before {
+  content: '\e728';
+}
+.cicon-choiceness-o:before {
+  content: '\e729';
+}
+.cicon-chrome:before {
+  content: '\e6e3';
+}
+.cicon-circle:before {
+  content: '\e7b0';
+}
+.cicon-circle-o:before {
+  content: '\e7b1';
+}
+.cicon-close:before {
+  content: '\e6ed';
+}
+.cicon-close-round:before {
+  content: '\e6f3';
+}
+.cicon-close-round-o:before {
+  content: '\e6f4';
+}
+.cicon-clothes:before {
+  content: '\e72a';
+}
+.cicon-clothes-o:before {
+  content: '\e72b';
+}
+.cicon-cloud:before {
+  content: '\e64e';
+}
+.cicon-cloud-done:before {
+  content: '\e641';
+}
+.cicon-cloud-download:before {
+  content: '\e647';
+}
+.cicon-cloud-o:before {
+  content: '\e646';
+}
+.cicon-cloud-off:before {
+  content: '\e64b';
+}
+.cicon-cloud-upload:before {
+  content: '\e687';
+}
+.cicon-code-box:before {
+  content: '\e7c3';
+}
+.cicon-coin:before {
+  content: '\e78a';
+}
+.cicon-coin-o:before {
+  content: '\e79d';
+}
+.cicon-comment:before {
+  content: '\e738';
+}
+.cicon-comment-o:before {
+  content: '\e70e';
+}
+.cicon-community:before {
+  content: '\e742';
+}
+.cicon-community-o:before {
+  content: '\e743';
+}
+.cicon-countdown:before {
+  content: '\e722';
+}
+.cicon-countdown-o:before {
+  content: '\e723';
+}
+.cicon-creative:before {
+  content: '\e72c';
+}
+.cicon-creative-o:before {
+  content: '\e72d';
+}
+.cicon-crop:before {
+  content: '\e6d9';
+}
+.cicon-crown:before {
+  content: '\e776';
+}
+.cicon-crown-o:before {
+  content: '\e777';
+}
+.cicon-cut:before {
+  content: '\e74b';
+}
+.cicon-DarkMode:before {
+  content: '\e7c4';
+}
+.cicon-dashboard:before {
+  content: '\e62e';
+}
+.cicon-delete:before {
+  content: '\e6bd';
+}
+.cicon-delete-close:before {
+  content: '\e6ae';
+}
+.cicon-delete-line:before {
+  content: '\e707';
+}
+.cicon-delete-line-o:before {
+  content: '\e709';
+}
+.cicon-delete-o:before {
+  content: '\e69a';
+}
+.cicon-deliver:before {
+  content: '\e7f7';
+}
+.cicon-deliver-o:before {
+  content: '\e6ff';
+}
+.cicon-demo:before {
+  content: '\e916';
+}
+.cicon-discover:before {
+  content: '\e70c';
+}
+.cicon-discover-o:before {
+  content: '\e702';
+}
+.cicon-discuss-fill:before {
+  content: '\e790';
+}
+.cicon-discuss-line:before {
+  content: '\e78f';
+}
+.cicon-dollar:before {
+  content: '\e79f';
+}
+.cicon-dollar-o:before {
+  content: '\e79e';
+}
+.cicon-done:before {
+  content: '\e633';
+}
+.cicon-done-all:before {
+  content: '\e62a';
+}
+.cicon-douyin:before {
+  content: '\e6e7';
+}
+.cicon-drop-down:before {
+  content: '\e61c';
+}
+.cicon-drop-up:before {
+  content: '\e61d';
+}
+.cicon-eject:before {
+  content: '\e63a';
+}
+.cicon-ellipse:before {
+  content: '\e74c';
+}
+.cicon-emoji:before {
+  content: '\e78d';
+}
+.cicon-emoji-o:before {
+  content: '\e6ee';
+}
+.cicon-equalizer:before {
+  content: '\e802';
+}
+.cicon-eraser:before {
+  content: '\e770';
+}
+.cicon-eraser-o:before {
+  content: '\e772';
+}
+.cicon-evaluate:before {
+  content: '\e7f0';
+}
+.cicon-evaluate-o:before {
+  content: '\e700';
+}
+.cicon-event-close:before {
+  content: '\e6a5';
+}
+.cicon-event-done:before {
+  content: '\e6b2';
+}
+.cicon-event-list:before {
+  content: '\e6b8';
+}
+.cicon-explore:before {
+  content: '\e628';
+}
+.cicon-explore-line:before {
+  content: '\e719';
+}
+.cicon-explore-line-o:before {
+  content: '\e710';
+}
+.cicon-explore-o:before {
+  content: '\e626';
+}
+.cicon-extension:before {
+  content: '\e620';
+}
+.cicon-extension-o:before {
+  content: '\e63f';
+}
+.cicon-eye:before {
+  content: '\e740';
+}
+.cicon-eye-favor:before {
+  content: '\e7b4';
+}
+.cicon-eye-favor-o:before {
+  content: '\e7b5';
+}
+.cicon-eye-o:before {
+  content: '\e741';
+}
+.cicon-eye-off:before {
+  content: '\e7b3';
+}
+.cicon-eye-off-o:before {
+  content: '\e7b2';
+}
+.cicon-facebook:before {
+  content: '\e6ea';
+}
+.cicon-favorite:before {
+  content: '\e623';
+}
+.cicon-favorite-o:before {
+  content: '\e621';
+}
+.cicon-female:before {
+  content: '\e72f';
+}
+.cicon-file:before {
+  content: '\e857';
+}
+.cicon-file-copy:before {
+  content: '\e85c';
+}
+.cicon-file-copy-o:before {
+  content: '\e7bc';
+}
+.cicon-file-o:before {
+  content: '\e7bb';
+}
+.cicon-file-text:before {
+  content: '\e858';
+}
+.cicon-file-text-o:before {
+  content: '\e7b9';
+}
+.cicon-filter:before {
+  content: '\e6ec';
+}
+.cicon-fingerprint:before {
+  content: '\e63b';
+}
+.cicon-first-page:before {
+  content: '\e60c';
+}
+.cicon-flag:before {
+  content: '\e64d';
+}
+.cicon-flag-o:before {
+  content: '\e64c';
+}
+.cicon-flash-close:before {
+  content: '\e73b';
+}
+.cicon-flash-off:before {
+  content: '\e6d5';
+}
+.cicon-flash-on:before {
+  content: '\e6dc';
+}
+.cicon-flash-open:before {
+  content: '\e74f';
+}
+.cicon-folder:before {
+  content: '\e6a1';
+}
+.cicon-folder-add:before {
+  content: '\e6b4';
+}
+.cicon-folder-o:before {
+  content: '\e6b0';
+}
+.cicon-folder-special:before {
+  content: '\e65c';
+}
+.cicon-forward:before {
+  content: '\e601';
+}
+.cicon-fullscreen:before {
+  content: '\e915';
+}
+.cicon-fullscreen-exit:before {
+  content: '\e914';
+}
+.cicon-game:before {
+  content: '\e6c0';
+}
+.cicon-game-o:before {
+  content: '\e6d1';
+}
+.cicon-git-commit:before {
+  content: '\e7be';
+}
+.cicon-git-commit-o:before {
+  content: '\e7bd';
+}
+.cicon-github:before {
+  content: '\e6e9';
+}
+.cicon-github-circle:before {
+  content: '\ead8';
+}
+.cicon-goods:before {
+  content: '\e778';
+}
+.cicon-goodsnew:before {
+  content: '\e7bf';
+}
+.cicon-goodsnew-o:before {
+  content: '\e7c0';
+}
+.cicon-goods-o:before {
+  content: '\e70f';
+}
+.cicon-GooglePlaylogo:before {
+  content: '\e6e5';
+}
+.cicon-grid:before {
+  content: '\e6ce';
+}
+.cicon-grid-o:before {
+  content: '\e6cc';
+}
+.cicon-group:before {
+  content: '\e7f5';
+}
+.cicon-group-o:before {
+  content: '\e753';
+}
+.cicon-guanli:before {
+  content: '\e750';
+}
+.cicon-headset:before {
+  content: '\e6a4';
+}
+.cicon-headset-mic:before {
+  content: '\e6b1';
+}
+.cicon-help:before {
+  content: '\e66b';
+}
+.cicon-help-o:before {
+  content: '\e65e';
+}
+.cicon-home:before {
+  content: '\e70d';
+}
+.cicon-home-2:before {
+  content: '\e6fd';
+}
+.cicon-home-2-o:before {
+  content: '\e6cf';
+}
+.cicon-home-3:before {
+  content: '\e6fc';
+}
+.cicon-home-3-o:before {
+  content: '\e6e0';
+}
+.cicon-home-4:before {
+  content: '\e732';
+}
+.cicon-home-4-o:before {
+  content: '\e6e6';
+}
+.cicon-home-community:before {
+  content: '\e799';
+}
+.cicon-home-dot:before {
+  content: '\e794';
+}
+.cicon-home-dot-o:before {
+  content: '\e797';
+}
+.cicon-home-line:before {
+  content: '\e793';
+}
+.cicon-home-line-o:before {
+  content: '\e792';
+}
+.cicon-home-o:before {
+  content: '\e70a';
+}
+.cicon-home-sm:before {
+  content: '\e798';
+}
+.cicon-home-smile:before {
+  content: '\e79c';
+}
+.cicon-home-smile-o:before {
+  content: '\e7a0';
+}
+.cicon-home-smline:before {
+  content: '\e791';
+}
+.cicon-home-smline-o:before {
+  content: '\e731';
+}
+.cicon-home-sm-o:before {
+  content: '\e79b';
+}
+.cicon-hotel:before {
+  content: '\e7a8';
+}
+.cicon-hotel-o:before {
+  content: '\e7a3';
+}
+.cicon-huohu:before {
+  content: '\e72e';
+}
+.cicon-IE:before {
+  content: '\e922';
+}
+.cicon-image-text:before {
+  content: '\e781';
+}
+.cicon-image-text-o:before {
+  content: '\e758';
+}
+.cicon-import-export:before {
+  content: '\e615';
+}
+.cicon-info:before {
+  content: '\e6ef';
+}
+.cicon-info-o:before {
+  content: '\e705';
+}
+.cicon-input:before {
+  content: '\e75f';
+}
+.cicon-input-o:before {
+  content: '\e6c8';
+}
+.cicon-keyboard:before {
+  content: '\e6b6';
+}
+.cicon-kinds:before {
+  content: '\e748';
+}
+.cicon-last-page:before {
+  content: '\e60d';
+}
+.cicon-layout:before {
+  content: '\e7e8';
+}
+.cicon-layout-o:before {
+  content: '\e7e7';
+}
+.cicon-LightMode:before {
+  content: '\e7ba';
+}
+.cicon-link:before {
+  content: '\e6ab';
+}
+.cicon-link-off:before {
+  content: '\e6b9';
+}
+.cicon-loader-fill:before {
+  content: '\e76d';
+}
+.cicon-loading:before {
+  content: '\e746';
+}
+.cicon-loading1:before {
+  content: '\e749';
+}
+.cicon-loading2:before {
+  content: '\e7f1';
+}
+.cicon-location-off:before {
+  content: '\e671';
+}
+.cicon-location-off-o:before {
+  content: '\e66d';
+}
+.cicon-location-on:before {
+  content: '\e65f';
+}
+.cicon-location-on-o:before {
+  content: '\e661';
+}
+.cicon-lock:before {
+  content: '\e6ad';
+}
+.cicon-lock-o:before {
+  content: '\e6b3';
+}
+.cicon-lock-open:before {
+  content: '\e6ba';
+}
+.cicon-logout:before {
+  content: '\e76e';
+}
+.cicon-loop:before {
+  content: '\e616';
+}
+.cicon-magic:before {
+  content: '\e6b7';
+}
+.cicon-magic-o:before {
+  content: '\e6c2';
+}
+.cicon-mail:before {
+  content: '\e6be';
+}
+.cicon-mail-o:before {
+  content: '\e6bc';
+}
+.cicon-male:before {
+  content: '\e730';
+}
+.cicon-mic:before {
+  content: '\e656';
+}
+.cicon-mic-none:before {
+  content: '\e642';
+}
+.cicon-mic-off:before {
+  content: '\e652';
+}
+.cicon-miniprogram:before {
+  content: '\e7d6';
+}
+.cicon-mobile:before {
+  content: '\e854';
+}
+.cicon-mobile-o:before {
+  content: '\e7b6';
+}
+.cicon-moneybag:before {
+  content: '\e7ce';
+}
+.cicon-moneybag-o:before {
+  content: '\e7d1';
+}
+.cicon-more:before {
+  content: '\e688';
+}
+.cicon-more-tag:before {
+  content: '\e672';
+}
+.cicon-move:before {
+  content: '\e768';
+}
+.cicon-move-round:before {
+  content: '\e602';
+}
+.cicon-move-round-o:before {
+  content: '\e603';
+}
+.cicon-music:before {
+  content: '\e795';
+}
+.cicon-music-off:before {
+  content: '\e796';
+}
+.cicon-my:before {
+  content: '\e78c';
+}
+.cicon-my-o:before {
+  content: '\e78b';
+}
+.cicon-near-me:before {
+  content: '\e654';
+}
+.cicon-near-me-o:before {
+  content: '\e649';
+}
+.cicon-not:before {
+  content: '\e667';
+}
+.cicon-notice:before {
+  content: '\e666';
+}
+.cicon-notice-active:before {
+  content: '\e66f';
+}
+.cicon-notice-active-o:before {
+  content: '\e65d';
+}
+.cicon-notice-o:before {
+  content: '\e664';
+}
+.cicon-notice-off:before {
+  content: '\e6b5';
+}
+.cicon-notice-off-o:before {
+  content: '\e6bb';
+}
+.cicon-numcode:before {
+  content: '\e755';
+}
+.cicon-order:before {
+  content: '\e786';
+}
+.cicon-order-o:before {
+  content: '\e7b8';
+}
+.cicon-paint:before {
+  content: '\e75d';
+}
+.cicon-paint-o:before {
+  content: '\e75a';
+}
+.cicon-palette:before {
+  content: '\e696';
+}
+.cicon-palette-o:before {
+  content: '\e691';
+}
+.cicon-pause:before {
+  content: '\e669';
+}
+.cicon-pause-circle:before {
+  content: '\e678';
+}
+.cicon-person:before {
+  content: '\e679';
+}
+.cicon-person-add:before {
+  content: '\e668';
+}
+.cicon-person-add-o:before {
+  content: '\e66a';
+}
+.cicon-person-o:before {
+  content: '\e67d';
+}
+.cicon-person-pin-circle:before {
+  content: '\e66c';
+}
+.cicon-person-pin-circle-o:before {
+  content: '\e670';
+}
+.cicon-phone:before {
+  content: '\e6f0';
+}
+.cicon-phone-call:before {
+  content: '\e6d7';
+}
+.cicon-pic:before {
+  content: '\e756';
+}
+.cicon-pic-o:before {
+  content: '\e69e';
+}
+.cicon-pin-drop:before {
+  content: '\e648';
+}
+.cicon-pin-drop-o:before {
+  content: '\e655';
+}
+.cicon-place:before {
+  content: '\e651';
+}
+.cicon-place-o:before {
+  content: '\e650';
+}
+.cicon-play-arrow:before {
+  content: '\e66e';
+}
+.cicon-play-circle:before {
+  content: '\e674';
+}
+.cicon-play-circle-o:before {
+  content: '\e67f';
+}
+.cicon-popover:before {
+  content: '\e74e';
+}
+.cicon-popover-o:before {
+  content: '\e757';
+}
+.cicon-present:before {
+  content: '\e73a';
+}
+.cicon-present-o:before {
+  content: '\e711';
+}
+.cicon-progress:before {
+  content: '\e784';
+}
+.cicon-qq:before {
+  content: '\e7d9';
+}
+.cicon-qr-code-fill:before {
+  content: '\e767';
+}
+.cicon-qr-code-line:before {
+  content: '\e75e';
+}
+.cicon-quill:before {
+  content: '\e760';
+}
+.cicon-quill-o:before {
+  content: '\e761';
+}
+.cicon-radio:before {
+  content: '\e6d4';
+}
+.cicon-radiobox:before {
+  content: '\e763';
+}
+.cicon-radiobox-o:before {
+  content: '\e75b';
+}
+.cicon-recharge:before {
+  content: '\e71c';
+}
+.cicon-recharge-o:before {
+  content: '\e71d';
+}
+.cicon-record:before {
+  content: '\e7a4';
+}
+.cicon-record-o:before {
+  content: '\e7a6';
+}
+.cicon-redo:before {
+  content: '\e612';
+}
+.cicon-redpacket:before {
+  content: '\e7d3';
+}
+.cicon-redpacket-o:before {
+  content: '\e71a';
+}
+.cicon-refresh:before {
+  content: '\e611';
+}
+.cicon-repair:before {
+  content: '\e73f';
+}
+.cicon-repair-o:before {
+  content: '\e73e';
+}
+.cicon-repeat:before {
+  content: '\e617';
+}
+.cicon-replay:before {
+  content: '\e619';
+}
+.cicon-reply:before {
+  content: '\e618';
+}
+.cicon-reply-all:before {
+  content: '\e614';
+}
+.cicon-road-map:before {
+  content: '\e769';
+}
+.cicon-road-map-o:before {
+  content: '\e76a';
+}
+.cicon-round:before {
+  content: '\e716';
+}
+.cicon-round-angle:before {
+  content: '\e6f5';
+}
+.cicon-round-angle-o:before {
+  content: '\e6f6';
+}
+.cicon-round-arrow-line:before {
+  content: '\e734';
+}
+.cicon-round-box:before {
+  content: '\e604';
+}
+.cicon-safe:before {
+  content: '\e77f';
+}
+.cicon-safe-check:before {
+  content: '\e875';
+}
+.cicon-safe-check-o:before {
+  content: '\e876';
+}
+.cicon-safe-flash:before {
+  content: '\e783';
+}
+.cicon-safe-flash-o:before {
+  content: '\e775';
+}
+.cicon-safe-key:before {
+  content: '\e76c';
+}
+.cicon-safe-key-o:before {
+  content: '\e766';
+}
+.cicon-safe-o:before {
+  content: '\e77e';
+}
+.cicon-save:before {
+  content: '\e677';
+}
+.cicon-save-o:before {
+  content: '\e684';
+}
+.cicon-scan:before {
+  content: '\e703';
+}
+.cicon-scissors:before {
+  content: '\e762';
+}
+.cicon-search:before {
+  content: '\e6f7';
+}
+.cicon-search-line:before {
+  content: '\e771';
+}
+.cicon-searchlist:before {
+  content: '\e720';
+}
+.cicon-search-o:before {
+  content: '\e782';
+}
+.cicon-search-sm:before {
+  content: '\e631';
+}
+.cicon-service:before {
+  content: '\e73d';
+}
+.cicon-service-fill:before {
+  content: '\e704';
+}
+.cicon-service-o:before {
+  content: '\e721';
+}
+.cicon-set:before {
+  content: '\e773';
+}
+.cicon-set-list:before {
+  content: '\e76f';
+}
+.cicon-set-o:before {
+  content: '\e774';
+}
+.cicon-settings:before {
+  content: '\e77a';
+}
+.cicon-settings-o:before {
+  content: '\e780';
+}
+.cicon-share:before {
+  content: '\e6c5';
+}
+.cicon-share-line-o:before {
+  content: '\e74d';
+}
+.cicon-shengji:before {
+  content: '\e747';
+}
+.cicon-shopping-cart:before {
+  content: '\e685';
+}
+.cicon-shopping-cart-o:before {
+  content: '\e676';
+}
+.cicon-show:before {
+  content: '\e785';
+}
+.cicon-show-o:before {
+  content: '\e787';
+}
+.cicon-shuffle:before {
+  content: '\e61a';
+}
+.cicon-sip:before {
+  content: '\e764';
+}
+.cicon-sip-o:before {
+  content: '\e765';
+}
+.cicon-skip-next:before {
+  content: '\e6dd';
+}
+.cicon-skip-previous:before {
+  content: '\e6d6';
+}
+.cicon-slack:before {
+  content: '\e87b';
+}
+.cicon-slack-square:before {
+  content: '\e891';
+}
+.cicon-sort:before {
+  content: '\e6bf';
+}
+.cicon-sort-order:before {
+  content: '\e6fe';
+}
+.cicon-sound:before {
+  content: '\e77b';
+}
+.cicon-sponsor:before {
+  content: '\e77c';
+}
+.cicon-sponsor-o:before {
+  content: '\e77d';
+}
+.cicon-star:before {
+  content: '\e683';
+}
+.cicon-star-half:before {
+  content: '\e67c';
+}
+.cicon-star-o:before {
+  content: '\e67b';
+}
+.cicon-stock:before {
+  content: '\e789';
+}
+.cicon-stop:before {
+  content: '\e6db';
+}
+.cicon-store:before {
+  content: '\e7ac';
+}
+.cicon-store-0:before {
+  content: '\e7ab';
+}
+.cicon-store-2:before {
+  content: '\e7a7';
+}
+.cicon-store-2-o:before {
+  content: '\e7a5';
+}
+.cicon-sub-left:before {
+  content: '\e60b';
+}
+.cicon-sub-right:before {
+  content: '\e60f';
+}
+.cicon-subtitles:before {
+  content: '\e6da';
+}
+.cicon-subtitles-o:before {
+  content: '\e6d8';
+}
+.cicon-sync-alt:before {
+  content: '\e613';
+}
+.cicon-tag:before {
+  content: '\e751';
+}
+.cicon-tag-o:before {
+  content: '\e752';
+}
+.cicon-taobao:before {
+  content: '\e712';
+}
+.cicon-terminal:before {
+  content: '\e7c1';
+}
+.cicon-terminal-o:before {
+  content: '\e7c2';
+}
+.cicon-thumb-down:before {
+  content: '\e6c1';
+}
+.cicon-thumb-down-o:before {
+  content: '\e6c9';
+}
+.cicon-thumb-up:before {
+  content: '\e6c6';
+}
+.cicon-thumb-up-line:before {
+  content: '\e71b';
+}
+.cicon-thumb-up-line-o:before {
+  content: '\e6eb';
+}
+.cicon-thumb-up-o:before {
+  content: '\e6cb';
+}
+.cicon-ticket:before {
+  content: '\e800';
+}
+.cicon-ticket-o:before {
+  content: '\e701';
+}
+.cicon-time:before {
+  content: '\e6f8';
+}
+.cicon-time-o:before {
+  content: '\e6f9';
+}
+.cicon-timer:before {
+  content: '\e69c';
+}
+.cicon-title:before {
+  content: '\e82f';
+}
+.cicon-titles:before {
+  content: '\e745';
+}
+.cicon-toggle:before {
+  content: '\e706';
+}
+.cicon-toggle-o:before {
+  content: '\e733';
+}
+.cicon-topbar:before {
+  content: '\e788';
+}
+.cicon-translate:before {
+  content: '\e79a';
+}
+.cicon-tree:before {
+  content: '\e659';
+}
+.cicon-Tt:before {
+  content: '\e7a2';
+}
+.cicon-twiter:before {
+  content: '\e6e8';
+}
+.cicon-cicon-community-o:before {
+  content: '\e6df';
+}
+.cicon-undo:before {
+  content: '\e61b';
+}
+.cicon-unfold-less:before {
+  content: '\e60e';
+}
+.cicon-unfold-more:before {
+  content: '\e609';
+}
+.cicon-upstage:before {
+  content: '\e724';
+}
+.cicon-upstage-o:before {
+  content: '\e725';
+}
+.cicon-view-agenda:before {
+  content: '\e639';
+}
+.cicon-view-array:before {
+  content: '\e636';
+}
+.cicon-view-carousel:before {
+  content: '\e638';
+}
+.cicon-view-column:before {
+  content: '\e632';
+}
+.cicon-view-day:before {
+  content: '\e627';
+}
+.cicon-view-headline:before {
+  content: '\e62b';
+}
+.cicon-view-list:before {
+  content: '\e63c';
+}
+.cicon-view-module:before {
+  content: '\e629';
+}
+.cicon-view-quilt:before {
+  content: '\e630';
+}
+.cicon-volume:before {
+  content: '\e6c4';
+}
+.cicon-volume-off:before {
+  content: '\e6cd';
+}
+.cicon-warn:before {
+  content: '\e662';
+}
+.cicon-warn-o:before {
+  content: '\e675';
+}
+.cicon-wechat-pay:before {
+  content: '\e7e6';
+}
+.cicon-weibo-fill:before {
+  content: '\e7e4';
+}
+.cicon-weibo-o:before {
+  content: '\e7e3';
+}
+.cicon-weixin:before {
+  content: '\e6de';
+}
+.cicon-whatshot:before {
+  content: '\e6ca';
+}
+.cicon-whatshot-o:before {
+  content: '\e6d0';
+}
+.cicon-wifi:before {
+  content: '\e6d2';
+}
+.cicon-wifi-off:before {
+  content: '\e6d3';
+}
+.cicon-yamaxun:before {
+  content: '\e7b7';
+}
+.cicon-zuoji:before {
+  content: '\e754';
+}
diff --git a/sheep/scss/icon/_icon.scss b/sheep/scss/icon/_icon.scss
new file mode 100644
index 0000000..f277fc8
--- /dev/null
+++ b/sheep/scss/icon/_icon.scss
@@ -0,0 +1,181 @@
+@font-face {
+  font-family: 'colorui'; /* Project id 2620914 */
+  src: url('data:application/x-font-woff2;charset=utf-8;base64,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')
+    format('woff2');
+  /* #ifdef MP-ALIPAY */
+  src: url('//at.alicdn.com/t/font_2620914_57y9q5zpbel.woff?t=1624238023908') format('woff'),
+    url('//at.alicdn.com/t/font_2620914_57y9q5zpbel.ttf?t=1624238023908') format('truetype');
+  /* #endif */
+}
+
+[class*='_icon-'] {
+  font-family: 'colorui' !important;
+  display: inline-block;
+}
+@font-face {
+  font-family: 'ui-num';
+  src: url('data:application/x-font-ttf;base64,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')
+    format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+
+._icon-checkbox:before {
+  content: '\e713';
+}
+
+._icon-box:before {
+  content: '\e714';
+}
+
+._icon-checkbox-o:before {
+  content: '\e715';
+}
+
+._icon-round:before {
+  content: '\e716';
+}
+
+._icon-home-o:before {
+  content: '\e70a';
+}
+
+._icon-home:before {
+  content: '\e70d';
+}
+
+._icon-edit:before {
+  content: '\e649';
+}
+
+._icon-close:before {
+  content: '\e6ed';
+}
+
+._icon-check-round:before {
+  content: '\e6f1';
+}
+
+._icon-check-round-o:before {
+  content: '\e6f2';
+}
+
+._icon-close-round:before {
+  content: '\e6f3';
+}
+
+._icon-close-round-o:before {
+  content: '\e6f4';
+}
+
+._icon-waiting:before {
+  content: '\e6f8';
+}
+
+._icon-waiting-o:before {
+  content: '\e6f9';
+}
+
+._icon-warn:before {
+  content: '\e662';
+}
+
+._icon-warn-o:before {
+  content: '\e675';
+}
+
+._icon-more:before {
+  content: '\e688';
+}
+
+._icon-delete:before {
+  content: '\e707';
+}
+
+._icon-delete-o:before {
+  content: '\e709';
+}
+
+._icon-add-round:before {
+  content: '\e717';
+}
+
+._icon-add-round-o:before {
+  content: '\e718';
+}
+
+._icon-add:before {
+  content: '\e6e4';
+}
+
+._icon-info:before {
+  content: '\e6ef';
+}
+
+._icon-info-o:before {
+  content: '\e705';
+}
+
+._icon-move:before {
+  content: '\e768';
+}
+
+._icon-title:before {
+  content: '\e82f';
+}
+
+._icon-titles:before {
+  content: '\e745';
+}
+
+._icon-loading:before {
+  content: '\e746';
+}
+
+._icon-copy-o:before {
+  content: '\e7bc';
+}
+
+._icon-copy:before {
+  content: '\e85c';
+}
+
+._icon-loader:before {
+  content: '\e76d';
+}
+
+._icon-search:before {
+  content: '\e782';
+}
+
+._icon-back:before {
+  content: '\e600';
+}
+
+._icon-forward:before {
+  content: '\e601';
+}
+
+._icon-arrow:before {
+  content: '\e608';
+}
+
+._icon-drop-down:before {
+  content: '\e61c';
+}
+
+._icon-drop-up:before {
+  content: '\e61d';
+}
+
+._icon-check:before {
+  content: '\e69f';
+}
+
+._icon-move-round:before {
+  content: '\e602';
+}
+
+._icon-move-round-o:before {
+  content: '\e603';
+}
diff --git a/sheep/scss/icon/_sheepicon.scss b/sheep/scss/icon/_sheepicon.scss
new file mode 100644
index 0000000..cf7ea08
--- /dev/null
+++ b/sheep/scss/icon/_sheepicon.scss
@@ -0,0 +1,94 @@
+@font-face {
+  font-family: 'sheepicon';
+  src: url('data:application/x-font-woff2;charset=utf-8;base64,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')
+    format('woff2');
+}
+
+[class*='sicon-'] {
+  font-family: 'sheepicon';
+  display: inline-block;
+}
+
+.sicon-edit:before {
+  content: '\e711';
+}
+
+.sicon-basic:before {
+  content: '\e712';
+}
+
+.sicon-home:before {
+  content: '\e70c';
+}
+
+.sicon-more:before {
+  content: '\e707';
+}
+
+.sicon-check-line:before {
+  content: '\e708';
+}
+
+.sicon-transport:before {
+  content: '\e709';
+}
+
+.sicon-goods-card:before {
+  content: '\e70a';
+}
+
+.sicon-collect:before {
+  content: '\e70b';
+}
+
+.sicon-warning-line:before {
+  content: '\e70d';
+}
+
+.sicon-score1:before {
+  content: '\e70e';
+}
+
+.sicon-score2:before {
+  content: '\e70f';
+}
+
+.sicon-goods-list:before {
+  content: '\e710';
+}
+
+.sicon-back:before {
+  content: '\e706';
+}
+
+.sicon-unchecked:before {
+  content: '\e703';
+}
+
+.sicon-warning-outline:before {
+  content: '\e6ff';
+}
+
+.sicon-question-outline:before {
+  content: '\e700';
+}
+
+.sicon-circlecheck:before {
+  content: '\e701';
+}
+
+.sicon-circleclose:before {
+  content: '\e702';
+}
+
+.sicon-delivery:before {
+  content: '\e6fd';
+}
+
+.sicon-orders:before {
+  content: '\e6fe';
+}
+
+.sicon-qrcode:before {
+  content: '\e6f9';
+}
diff --git a/sheep/scss/icon/_style.scss b/sheep/scss/icon/_style.scss
new file mode 100644
index 0000000..a2c4dc8
--- /dev/null
+++ b/sheep/scss/icon/_style.scss
@@ -0,0 +1,43 @@
+@import './icon'; //核心图标库
+@import './coloricon'; //扩展图标库
+@import './sheepicon';
+.icon-spin {
+  animation: icon-spin 2s infinite linear;
+}
+
+.icon-pulse {
+  animation: icon-spin 1s infinite steps(8);
+}
+
+@keyframes icon-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}
+.icon-90 {
+  transform: rotate(90deg);
+}
+.icon-180 {
+  transform: rotate(180deg);
+}
+.icon-270 {
+  transform: rotate(270deg);
+}
+.icon-x {
+  transform: scale(-1, 1);
+}
+.icon-y {
+  transform: scale(1, -1);
+}
+.icon-fw {
+  width: calc(18em / 14);
+  text-align: center;
+}
+@each $class, $value in $iconsize {
+  .icon-#{$class} {
+    transform: scale(#{$value});
+  }
+}
diff --git a/sheep/scss/index.scss b/sheep/scss/index.scss
new file mode 100644
index 0000000..c841956
--- /dev/null
+++ b/sheep/scss/index.scss
@@ -0,0 +1,27 @@
+@import './tools';
+@import './ui';
+
+/* 字体文件 */
+@font-face {
+  font-family: OPPOSANS;
+  src: url('~@/sheep/scss/font/OPPOSANS-M-subfont.ttf');
+}
+.font-OPPOSANS {
+  font-family: OPPOSANS;
+}
+page {
+  -webkit-overflow-scrolling: touch; // 解决ios滑动不流畅
+  height: 100%;
+  width: 100%;
+  // font-family: OPPOSANS;
+  word-break: break-all; //英文文本不换行
+  white-space: normal;
+  background-color: $bg-page;
+  color: $dark-3;
+}
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+  display: none;
+}
diff --git a/sheep/scss/style/_avatar.scss b/sheep/scss/style/_avatar.scss
new file mode 100644
index 0000000..e69de29
diff --git a/sheep/scss/style/_background.scss b/sheep/scss/style/_background.scss
new file mode 100644
index 0000000..775f37f
--- /dev/null
+++ b/sheep/scss/style/_background.scss
@@ -0,0 +1,204 @@
+/* ==================
+          背景
+ ==================== */
+/* -- 基础色 -- */
+@each $color, $value in map-merge($colors, $darks) {
+  .bg-#{$color} {
+    background-color: $value !important;
+    @if $color == 'yellow' {
+      color: #333333 !important;
+    } @else {
+      color: #ffffff !important;
+    }
+  }
+}
+
+/* -- 浅色 -- */
+@each $color, $value in $colors {
+  .bg-#{$color}-light {
+    background-image: linear-gradient(45deg, white, mix(white, $value, 85%)) !important;
+    color: $value !important;
+  }
+
+  .bg-#{$color}-thin {
+    background-color: rgba($value, var(--ui-BG-opacity)) !important;
+    color: $value !important;
+  }
+}
+
+/* -- 渐变色 -- */
+
+@each $color, $value in $colors {
+  @each $colorsub, $valuesub in $colors {
+    @if $color != $colorsub {
+      .bg-#{$color}-#{$colorsub} {
+        // background-color: $value !important;
+        background-image: linear-gradient(130deg, $value, $valuesub) !important;
+        color: #ffffff !important;
+      }
+    }
+  }
+}
+.bg-yellow-gradient {
+  background-image: linear-gradient(45deg, #f5fe00, #ff6600) !important;
+  color: $dark-3 !important;
+}
+.bg-orange-gradient {
+  background-image: linear-gradient(90deg, #ff6000, #fe832a) !important;
+  color: $white !important;
+}
+.bg-red-gradient {
+  background-image: linear-gradient(45deg, #f33a41, #ed0586) !important;
+  color: $white !important;
+}
+.bg-pink-gradient {
+  background-image: linear-gradient(45deg, #fea894, #ff1047) !important;
+  color: $white !important;
+}
+.bg-mauve-gradient {
+  background-image: linear-gradient(45deg, #c01f95, #7115cc) !important;
+  color: $white !important;
+}
+.bg-purple-gradient {
+  background-image: linear-gradient(45deg, #9829ea, #5908fb) !important;
+  color: $white !important;
+}
+.bg-blue-gradient {
+  background-image: linear-gradient(45deg, #00b8f9, #0166eb) !important;
+  color: $white !important;
+}
+.bg-cyan-gradient {
+  background-image: linear-gradient(45deg, #06edfe, #48b2fe) !important;
+  color: $white !important;
+}
+.bg-green-gradient {
+  background-image: linear-gradient(45deg, #3ab54a, #8cc63f) !important;
+  color: $white !important;
+}
+.bg-olive-gradient {
+  background-image: linear-gradient(45deg, #90e630, #39d266) !important;
+  color: $white !important;
+}
+.bg-grey-gradient {
+  background-image: linear-gradient(45deg, #9aadb9, #354855) !important;
+  color: $white !important;
+}
+.bg-brown-gradient {
+  background-image: linear-gradient(45deg, #ca6f2e, #cb1413) !important;
+  color: $white !important;
+}
+
+@each $color, $value in $grays {
+  .bg-#{$color} {
+    background-color: $value !important;
+    color: #333333 !important;
+  }
+}
+
+.bg-square {
+  @include bg-square;
+}
+.bg-none {
+  background: transparent !important;
+  color: inherit !important;
+}
+
+[class*='bg-mask'] {
+  position: relative;
+  //background: transparent !important;
+  color: #ffffff !important;
+  > view,
+  > text {
+    position: relative;
+    z-index: 1;
+    color: #ffffff;
+  }
+  &::before {
+    content: '';
+    border-radius: inherit;
+    width: 100%;
+    height: 100%;
+    @include position-center;
+    background-color: rgba(0, 0, 0, 0.4);
+    z-index: 0;
+  }
+  @at-root .bg-mask-80::before {
+    background: rgba(0, 0, 0, 0.8) !important;
+  }
+  @at-root .bg-mask-50::before {
+    background: rgba(0, 0, 0, 0.5) !important;
+  }
+  @at-root .bg-mask-20::before {
+    background: rgba(0, 0, 0, 0.2) !important;
+  }
+  @at-root .bg-mask-top::before {
+    background-color: rgba(0, 0, 0, 0);
+    background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.618), rgba(0, 0, 0, 0.01));
+  }
+  @at-root .bg-white-top {
+    background-color: rgba(0, 0, 0, 0);
+    background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.3));
+  }
+  @at-root .bg-mask-bottom::before {
+    background-color: rgba(0, 0, 0, 0);
+    background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.618), rgba(0, 0, 0, 1));
+  }
+}
+.bg-img {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+[class*='bg-blur'] {
+  position: relative;
+  > view,
+  > text {
+    position: relative;
+    z-index: 1;
+  }
+  &::before {
+    content: '';
+    width: 100%;
+    height: 100%;
+    @include position-center;
+    border-radius: inherit;
+    transform-origin: 0 0;
+    pointer-events: none;
+    box-sizing: border-box;
+  }
+}
+@supports (-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px)) {
+  .bg-blur::before {
+    @include blur;
+    background-color: var(--ui-Blur-1);
+  }
+  .bg-blur-1::before {
+    @include blur;
+    background-color: var(--ui-Blur-2);
+  }
+  .bg-blur-2::before {
+    @include blur;
+    background-color: var(--ui-Blur-3);
+  }
+}
+@supports not (backdrop-filter: blur(5px)) {
+  .bg-blur {
+    color: var(--ui-TC);
+    &::before {
+      background-color: var(--ui-BG);
+    }
+  }
+  .bg-blur-1 {
+    color: var(--ui-TC);
+    &::before {
+      background-color: var(--ui-BG-1);
+    }
+  }
+  .bg-blur-2 {
+    color: var(--ui-TC);
+    &::before {
+      background-color: var(--ui-BG-2);
+    }
+  }
+}
diff --git a/sheep/scss/style/_border.scss b/sheep/scss/style/_border.scss
new file mode 100644
index 0000000..4ef1d54
--- /dev/null
+++ b/sheep/scss/style/_border.scss
@@ -0,0 +1,140 @@
+/* ==================
+          边框
+ ==================== */
+/* -- 实线 -- */
+.border {
+  overflow: initial !important;
+  @at-root [class*='border'],
+    [class*='dashed'] {
+    position: relative;
+    &.dline {
+      --ui-Border: var(--ui-BG-3);
+    }
+    &::after {
+      content: ' ';
+      width: 200%;
+      height: 200%;
+      position: absolute;
+      z-index: 0;
+      top: 0;
+      left: 0;
+      transform: scale(0.5);
+      transform-origin: 0 0;
+      pointer-events: none;
+      box-sizing: border-box;
+      border-radius: inherit;
+    }
+    &.radius::after {
+      border-radius: calc(#{$radius} * 2);
+    }
+    &.round::after {
+      border-radius: #{$round-pill};
+    }
+  }
+  &::after {
+    border: 1px solid var(--ui-Border);
+  }
+  &s::after {
+    border: 4rpx solid var(--ui-Border);
+  }
+  &ss::after {
+    border: 8rpx solid var(--ui-Border);
+  }
+  @each $value in (top, right, bottom, left) {
+    &-#{$value}::after {
+      border-#{$value}: 1px solid var(--ui-Border);
+    }
+    &s-#{$value}::after {
+      border-#{$value}: 4rpx solid var(--ui-Border);
+    }
+    &ss-#{$value}::after {
+      border-#{$value}: 8rpx solid var(--ui-Border);
+    }
+  }
+}
+/* -- 虚线 -- */
+.dashed {
+  &::after {
+    border: 4rpx dashed var(--ui-Border);
+  }
+  &s::after {
+    border: 6rpx dashed var(--ui-Border);
+  }
+  @each $value in (top, right, bottom, left) {
+    &-#{$value}::after {
+      border-#{$value}: 4rpx dashed var(--ui-Border);
+    }
+    &s-#{$value}::after {
+      border-#{$value}: 6rpx dashed var(--ui-Border);
+    }
+  }
+}
+@each $color, $value in map-merge($colors, map-merge($darks, $grays)) {
+  .border-#{$color}::after,
+  .border-#{$color}[class*='-shine']::before {
+    border-color: $value !important;
+  }
+}
+@each $value in (a, b, c, d, e) {
+  .main-#{$value}-border::after,
+  .main-#{$value}-border[class*='-shine']::before {
+    border-color: var(--main-#{$value}) !important;
+  }
+}
+.dashed-shine,
+.dasheds-shine {
+  position: relative;
+  overflow: hidden;
+  &::after,
+  &::before {
+    border-style: dashed;
+    border-color: var(--ui-Border);
+    animation: shineafter 1s infinite linear;
+    width: calc(200% + 40px);
+    height: 200%;
+    border-width: 2px 0;
+  }
+  &::before {
+    content: ' ';
+    position: absolute;
+    transform: scale(0.5);
+    transform-origin: 0 0;
+    pointer-events: none;
+    box-sizing: border-box;
+    animation: shinebefore 1s infinite linear;
+    width: 200%;
+    height: calc(200% + 40px);
+    border-width: 0 2px;
+  }
+}
+.dasheds-shine {
+  &::after,
+  &::before {
+    border-width: 4px 0;
+  }
+  &::before {
+    border-width: 0 4px;
+  }
+}
+
+@keyframes shineafter {
+  0% {
+    top: 0;
+    left: -22px;
+  }
+  100% {
+    top: 0px;
+    left: 0px;
+  }
+}
+
+@keyframes shinebefore {
+  0% {
+    top: -22px;
+    left: 0;
+  }
+  100% {
+    top: 0px;
+    left: 0px;
+  }
+}
diff --git a/sheep/scss/style/_button.scss b/sheep/scss/style/_button.scss
new file mode 100644
index 0000000..7069345
--- /dev/null
+++ b/sheep/scss/style/_button.scss
@@ -0,0 +1,87 @@
+.ui-btn-box {
+  display: inline-block;
+}
+.ui-btn {
+  position: relative;
+  border: 0rpx;
+  display: inline-block;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 0.7857em 1.5em 0.7857em;
+  font-size: 28rpx;
+  line-height: 1em;
+  text-align: center;
+  text-decoration: none;
+  overflow: visible;
+  margin: 0 0.25em 0 0;
+  transform: translate(0rpx, 0rpx);
+  border-radius: $radius;
+  white-space: nowrap;
+  color: var(--text-a);
+  background-color: var(--ui-BG);
+  vertical-align: baseline;
+  &:first-child:last-child {
+    margin: 0;
+  }
+  &:not([class*='round'])::after {
+    border-radius: calc(#{$radius} * 2);
+  }
+  &:not([class*='border'])::after {
+    // content: ' ';
+    // width: 200%;
+    // height: 200%;
+    // display: block;
+    // position: absolute;
+    // z-index: 0;
+    // top: 0;
+    // left: 0;
+    // transform: scale(0.5);
+    // transform-origin: 0 0;
+    // pointer-events: none;
+    // box-sizing: border-box;
+    display: none;
+  }
+  &.round::after {
+    border-radius: #{$round-pill};
+  }
+  &.icon {
+    padding: 0.8em 0.8em;
+  }
+
+  &.sm {
+    font-size: 24rpx;
+  }
+
+  &.lg {
+    font-size: 32rpx;
+  }
+
+  &.xl {
+    font-size: 36rpx;
+  }
+
+  &.block {
+    width: 100%;
+    display: block;
+    font-size: 32rpx;
+  }
+
+  &[disabled] {
+    opacity: 0.6;
+  }
+
+  &.none-style {
+    background-color: transparent !important;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+  }
+}
+
+.ui-btn:not(.icon) [class*='icon-'] {
+  margin: 0 0.25em;
+}
diff --git a/sheep/scss/style/_card.scss b/sheep/scss/style/_card.scss
new file mode 100644
index 0000000..17aa6b3
--- /dev/null
+++ b/sheep/scss/style/_card.scss
@@ -0,0 +1,353 @@
+/* ==================
+         卡片
+ ==================== */
+
+.ui-cards {
+  display: block;
+  overflow: hidden;
+  & .ui-btn.badge {
+    top: 0;
+    right: 0;
+    font-size: 24rpx;
+    padding: 0rpx 15rpx;
+    height: 40rpx;
+  }
+  &.no-card > .ui-item {
+    margin: 0rpx;
+    border-radius: 0rpx;
+  }
+  & > .ui-item {
+    display: block;
+    overflow: hidden;
+    border-radius: 10rpx;
+    margin: 30rpx;
+  }
+  & > .ui-item.shadow-blur {
+    overflow: initial;
+  }
+  .grid.grid-square {
+    margin-bottom: -20rpx;
+  }
+  &.article {
+    display: block;
+    & > .ui-item {
+      padding: 30rpx;
+      background-color: var(--box-bg);
+      display: flex;
+      align-items: flex-start;
+    }
+    & > .time {
+      padding: 30rpx 0 0 30rpx;
+    }
+    & > .ui-item .title {
+      font-size: 30rpx;
+      font-weight: 900;
+      color: #333333;
+    }
+    & > .ui-item .content {
+      flex: 1;
+    }
+    & > .ui-item > image {
+      width: 240rpx;
+      height: 6.4em;
+      margin-left: 20rpx;
+      border-radius: 6rpx;
+    }
+    & > .ui-item .content .desc {
+      font-size: 12px;
+      color: var(--text-c);
+    }
+    & > .ui-item .content .text-content {
+      font-size: 28rpx;
+      color: #888;
+    }
+  }
+  &.case {
+    .image {
+      position: relative;
+      image {
+        width: 100%;
+        display: block;
+      }
+      .ui-tag {
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+      .ui-bar {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        background-color: transparent;
+        padding: 0rpx 30rpx;
+      }
+      .bg-black {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        background-color: rgba(0, 0, 0, 0.6);
+      }
+    }
+    &.no-card .image {
+      margin: 30rpx 30rpx 0;
+      overflow: hidden;
+      border-radius: 10rpx;
+    }
+  }
+  &.dynamic {
+    display: block;
+    & > .ui-item {
+      display: block;
+      overflow: hidden;
+      & > .text-content {
+        padding: 0 30rpx 0;
+        font-size: 30rpx;
+        margin-bottom: 20rpx;
+      }
+      & .square-img {
+        width: 100%;
+        height: 200rpx;
+        border-radius: 6rpx;
+      }
+      & .only-img {
+        width: 100%;
+        height: 320rpx;
+        border-radius: 6rpx;
+      }
+    }
+  }
+  &.goods {
+    display: block;
+    & > .ui-item {
+      padding: 30rpx;
+      display: flex;
+      position: relative;
+      background-color: var(--ui-BG);
+      & + .ui-item {
+        border-top: 1rpx solid #eeeeee;
+      }
+      .content {
+        width: 410rpx;
+        padding: 0rpx;
+      }
+      .title {
+        font-size: 30rpx;
+        font-weight: 900;
+        color: #333333;
+        line-height: 1.4;
+        height: 1.4em;
+        overflow: hidden;
+      }
+    }
+    &.col-goods.col-twice {
+      display: flex;
+      flex-wrap: wrap;
+      padding-bottom: 30rpx;
+      & > .ui-item {
+        width: calc(50% - 30rpx);
+        margin: 20rpx 20rpx 0rpx 20rpx;
+        .content {
+          padding: 20rpx;
+        }
+      }
+      & > .ui-item:nth-child(2n) {
+        margin-left: 0rpx;
+      }
+    }
+    &.col-goods > .ui-item {
+      padding: 0rpx;
+      display: block;
+      border: 0px;
+      .content {
+        width: 100%;
+        padding: 30rpx;
+      }
+    }
+    &.no-card > .ui-item .content {
+      width: 470rpx;
+      padding: 0rpx;
+    }
+    &.no-card > .ui-item .title,
+    &.col-goods > .ui-item .title {
+      height: 3em;
+      overflow: hidden;
+    }
+    & > .ui-item .text-linecut-2 {
+      -webkit-line-clamp: 1;
+    }
+    &.no-card > .ui-item .text-linecut-2,
+    &.col-goods > .ui-item .text-linecut-2 {
+      -webkit-line-clamp: 2;
+      line-height: 1.6em;
+      height: 3.2em;
+    }
+    & > .ui-item > image {
+      width: 200rpx;
+      height: 200rpx;
+      margin-right: 20rpx;
+      border-radius: 6rpx;
+    }
+    &.no-card > .ui-item > image {
+      width: 220rpx;
+      height: 170rpx;
+    }
+    &.col-goods > .ui-item > image {
+      width: 100%;
+      height: 340rpx;
+      border-bottom-left-radius: 0rpx;
+      border-bottom-right-radius: 0rpx;
+      display: block;
+    }
+    &.col-goods.col-twice > .ui-item > image {
+      height: 236rpx;
+    }
+  }
+  &.loan {
+    display: block;
+    & > .ui-item {
+      padding: 30rpx 0 30rpx 30rpx;
+      display: flex;
+      position: relative;
+      background-color: var(--box-bg);
+
+      .content {
+        width: 450rpx;
+        padding: 0rpx;
+        .tag-list {
+          width: 450rpx;
+          display: flex;
+          flex-wrap: wrap;
+          font-size: 12px;
+          margin-top: 18rpx;
+        }
+      }
+      .action {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+    }
+  }
+  &.houses {
+    display: block;
+    & > .ui-item {
+      padding: 20rpx;
+      display: flex;
+      position: relative;
+      background-color: var(--box-bg);
+      .image {
+        width: 230rpx;
+        height: 180rpx;
+        margin-right: 20rpx;
+        border-radius: 6rpx;
+      }
+      .content {
+        width: 400rpx;
+        padding: 0rpx;
+        .tag-list {
+          width: 400rpx;
+          display: flex;
+          flex-wrap: wrap;
+          font-size: 12px;
+          margin-top: 10rpx;
+          .ui-item {
+            height: 20px;
+            line-height: 20px;
+          }
+        }
+      }
+      .action {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+    }
+  }
+
+  &.product {
+    display: flex;
+    flex-wrap: wrap;
+    padding-bottom: 30rpx;
+    & > .ui-item {
+      width: calc(100% - 15rpx);
+      margin: 20rpx 20rpx 0rpx 20rpx;
+      background-color: var(--box-bg);
+      position: relative;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      // display: flex;
+      // flex-wrap: wrap;
+      .content {
+        padding: 20rpx;
+        // width: calc(100% - 345rpx);
+        .text-cut {
+          font-size: 16px;
+        }
+      }
+      .image {
+        width: 100%;
+        height: 240rpx;
+        border-radius: 6rpx 0 0 6rpx;
+        display: block;
+      }
+      .ui-progress-tag {
+        width: 4em;
+        text-align: right;
+        font-size: 12px;
+      }
+      .border-top {
+        width: 100%;
+      }
+      .ui-tag {
+        position: absolute;
+        top: 0;
+        left: 0;
+        border-radius: 6rpx 0 6rpx 0;
+      }
+    }
+    // & > .ui-item:nth-child(2n) {
+    // 	margin-left: 0rpx;
+    // }
+  }
+  &.shop {
+    display: flex;
+    flex-wrap: wrap;
+    padding-bottom: 30rpx;
+    & > .ui-item {
+      width: calc(50% - 30rpx);
+      margin: 20rpx 20rpx 0rpx 20rpx;
+      background-color: var(--box-bg);
+      padding: 20rpx;
+      .content {
+        margin-top: 15rpx;
+      }
+      .image {
+        width: 100%;
+        height: 285rpx;
+        border-radius: 6rpx;
+        display: block;
+      }
+    }
+    & > .ui-item:nth-child(2n) {
+      margin-left: 0rpx;
+    }
+  }
+
+  &.orders .ui-item {
+    margin-top: 30rpx;
+    .address-box {
+      padding: 15rpx;
+      margin: 0 30rpx 30rpx;
+      border: 1px solid;
+      border-color: var(--main-a);
+      border-radius: 10px;
+      position: relative;
+      .ui-form-group {
+        min-height: 10px;
+      }
+    }
+  }
+}
diff --git a/sheep/scss/style/_code.scss b/sheep/scss/style/_code.scss
new file mode 100644
index 0000000..5221c88
--- /dev/null
+++ b/sheep/scss/style/_code.scss
@@ -0,0 +1,55 @@
+.ui-code {
+  font-family: Monaco, Menlo, Consolas, 'Courier New';
+  font-size: 90%;
+  position: relative;
+  z-index: 1;
+  color: var(--ui-TC);
+  .ui-rich-text {
+    display: inline-block;
+  }
+
+  &.code {
+    display: inline-block;
+    padding: 0 10rpx;
+    margin: 0 10rpx;
+    border-radius: $radius-sm;
+    line-height: 1.6;
+    vertical-align: baseline;
+  }
+
+  &.pre {
+    display: block;
+    margin: 1em 0;
+    line-height: 1.6;
+    &.hasTitle {
+      margin: 3.2em 0 1em;
+    }
+    // border-radius: $radius-sm;
+    .ui-code-title {
+      position: absolute;
+      top: -2.2em;
+      color: var(--ui-TC-2);
+      left: 0;
+    }
+    .ui-rich-text {
+      padding: 40rpx;
+      white-space: pre-wrap;
+      word-break: break-all;
+      word-wrap: break-word;
+    }
+    .ui-scroll-view {
+      &.ui-scroll {
+        max-height: 500px;
+        white-space: pre;
+      }
+    }
+    .ui-copy-btn {
+      position: absolute;
+      z-index: 2;
+      top: 0;
+      right: 0;
+      padding: 0.8em;
+      border-radius: 0 $radius-sm 0 $radius-sm;
+    }
+  }
+}
diff --git a/sheep/scss/style/_flex.scss b/sheep/scss/style/_flex.scss
new file mode 100644
index 0000000..1daa45b
--- /dev/null
+++ b/sheep/scss/style/_flex.scss
@@ -0,0 +1,79 @@
+/* ==================
+		弹性布局
+ ==================== */
+.flex {
+  display: flex !important;
+  &-sub {
+    flex: 1 !important;
+  }
+  &-twice {
+    flex: 2 !important;
+  }
+  &-treble {
+    flex: 3 !important;
+  }
+  &-column {
+    flex-direction: column !important;
+  }
+  &-row {
+    flex-direction: row !important;
+  }
+  &-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+  &-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+  &-wrap {
+    flex-wrap: wrap !important;
+  }
+  &-center {
+    @include flex-center;
+  }
+  &-bar {
+    @include flex-bar;
+  }
+}
+.basis {
+  @each $class, $value in (xs: 20%, sm: 40%, df: 50%, lg: 60%, xl: 80%) {
+    &-#{$class} {
+      flex-basis: $value !important;
+    }
+  }
+}
+.align {
+  @each $class,
+    $value
+      in (start: flex-start, end: flex-end, center: center, stretch: stretch, baseline: baseline)
+  {
+    &-#{$class} {
+      align-items: $value !important;
+    }
+  }
+}
+.self {
+  @each $class,
+    $value
+      in (start: flex-start, end: flex-end, center: center, stretch: stretch, baseline: baseline)
+  {
+    &-#{$class} {
+      align-self: $value !important;
+    }
+  }
+}
+.justify {
+  @each $class,
+    $value
+      in (
+        start: flex-start,
+        end: flex-end,
+        center: center,
+        between: space-between,
+        around: space-around
+      )
+  {
+    &-#{$class} {
+      justify-content: $value !important;
+    }
+  }
+}
diff --git a/sheep/scss/style/_form.scss b/sheep/scss/style/_form.scss
new file mode 100644
index 0000000..91d3eb3
--- /dev/null
+++ b/sheep/scss/style/_form.scss
@@ -0,0 +1,121 @@
+/* ==================
+         表单
+ ==================== */
+.ui-form-item {
+  padding: 1rpx 24rpx;
+  display: flex;
+  align-items: center;
+  min-height: 100rpx;
+  justify-content: space-between;
+  .title {
+    text-align: justify;
+    padding-right: 30rpx;
+    font-size: 30rpx;
+    position: relative;
+    height: 60rpx;
+    line-height: 60rpx;
+  }
+  .content {
+    flex: 1;
+  }
+  input,
+  ui-input {
+    flex: 1;
+    font-size: 30rpx;
+    color: #555;
+    padding-right: 20rpx;
+  }
+  text[class*='icon-'] {
+    font-size: 36rpx;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  textarea {
+    margin: 32rpx 0 30rpx;
+    height: 4.6em;
+    width: 100%;
+    line-height: 1.2em;
+    flex: 1;
+    font-size: 28rpx;
+    padding: 0;
+  }
+  picker,
+  .arrow {
+    flex: 1;
+    padding-right: 40rpx;
+    overflow: hidden;
+    position: relative;
+  }
+  picker .picker,
+  .arrow > view {
+    line-height: 100rpx;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    width: 100%;
+  }
+  picker::after,
+  .arrow::after {
+    font-family: 'ui';
+    display: block;
+    content: '\e605';
+    position: absolute;
+    font-size: 34rpx;
+    color: #8799a3;
+    line-height: 100rpx;
+    width: 60rpx;
+    text-align: center;
+    top: 0;
+    bottom: 0;
+    right: -20rpx;
+    margin: auto;
+  }
+  textarea[disabled],
+  textarea[disabled] .placeholder {
+    color: transparent;
+  }
+  &.align-start .title {
+    height: 1em;
+    margin-top: 32rpx;
+    line-height: 1em;
+  }
+  .grid-square {
+    > view {
+      background-color: #f8f8f8;
+      border-radius: 12rpx;
+      .mask {
+        background-color: rgba(0, 0, 0, 0.6);
+        position: absolute;
+        font-size: 20rpx;
+        color: #ffffff;
+        width: 100%;
+        bottom: 0;
+        text-align: center;
+        padding: 6rpx 0;
+        &.red-mask {
+          background-color: rgba(255, 80, 80, 0.6);
+        }
+      }
+      [class*='icon'] {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        transform: scale(1.5);
+        justify-content: center;
+      }
+      .text-gray {
+        position: absolute;
+        width: 100%;
+        font-size: 24rpx;
+        text-align: center;
+        bottom: 20rpx;
+      }
+    }
+  }
+}
+.disabled {
+  opacity: 0.6;
+  cursor: not-allowed !important;
+}
diff --git a/sheep/scss/style/_grid.scss b/sheep/scss/style/_grid.scss
new file mode 100644
index 0000000..b1b5230
--- /dev/null
+++ b/sheep/scss/style/_grid.scss
@@ -0,0 +1,103 @@
+/* ==================
+          栅栏
+ ==================== */
+@use 'sass:math';
+
+@mixin make_col($screen) {
+  @for $i from 1 through 12 {
+    .ui-col-#{$screen}-#{$i} {
+      width: calc(100% / 12 * #{$i});
+    }
+    .ui-cols-#{$screen}-#{$i} .ui-item {
+      width: calc(100% / #{$i});
+    }
+  }
+}
+.ui-container {
+  box-sizing: border-box;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 30rpx;
+  padding-right: 30rpx;
+  width: 100%;
+  max-width: 1440px;
+  &-fluid {
+    max-width: 100%;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+.ui-grid {
+  display: flex;
+  flex-wrap: wrap;
+  &.multi-column {
+    display: block;
+    column-count: 2;
+    column-width: 0px;
+    column-gap: 0px;
+    > .ui-item {
+      break-inside: avoid;
+      padding: 0.001em;
+    }
+  }
+  &.grid-square {
+    overflow: hidden;
+    > .ui-item {
+      margin-right: 20rpx;
+      margin-bottom: 20rpx;
+      position: relative;
+      overflow: hidden;
+    }
+    @for $i from 1 through 12 {
+      &.ui-cols-#{$i} > .ui-item {
+        padding-bottom: calc((100% - #{20rpx * ($i - 1)}) / #{$i});
+        height: 0;
+        width: calc((100% - #{20rpx * ($i - 1)}) / #{$i});
+      }
+    }
+    @for $i from 1 through 12 {
+      &.ui-cols-#{$i} > .ui-item:nth-child(#{$i}n) {
+        margin-right: 0;
+      }
+    }
+  }
+}
+@for $i from 1 through 12 {
+  .ui-cols-#{$i} .ui-item {
+    width: calc(100% / #{$i});
+  }
+}
+@for $i from 1 through 12 {
+  .ui-col-#{$i} {
+    width: calc(100% / 12 * #{$i});
+  }
+}
+// 小屏
+@media screen and (min-width: 0px) {
+  @include make_col('xs');
+}
+
+// 小屏
+@media screen and (min-width: 320px) {
+  @include make_col('sm');
+}
+
+// 中屏
+@media screen and (min-width: 768px) {
+  @include make_col('md');
+}
+
+// 普通屏
+@media screen and (min-width: 1025px) {
+  @include make_col('lg');
+}
+
+// 大屏
+@media screen and (min-width: 1440px) {
+  @include make_col('xl');
+}
+
+// 超大屏
+@media screen and (min-width: 1920px) {
+  @include make_col('xxl');
+}
diff --git a/sheep/scss/style/_markdown.scss b/sheep/scss/style/_markdown.scss
new file mode 100644
index 0000000..37b023d
--- /dev/null
+++ b/sheep/scss/style/_markdown.scss
@@ -0,0 +1,62 @@
+.cu-markdown {
+  position: relative;
+  z-index: 1;
+  &.selectable {
+    cursor: auto;
+    user-select: text;
+  }
+  inline {
+    display: inline-block;
+  }
+
+  .list {
+    .list-item {
+      line-height: 1.8;
+      .list {
+        margin-left: 1.28571em;
+        .ui-title {
+          transform: scale(0.6);
+          &:before {
+            content: '\e716';
+          }
+        }
+      }
+    }
+    .list-item-p {
+      position: relative;
+      padding-left: 1.5em;
+      .list-item-t {
+        display: block;
+        width: 1.3em;
+        text-align: center;
+        position: absolute;
+        left: 0;
+      }
+    }
+  }
+  .md-table + .md-table {
+    margin-top: 30rpx;
+  }
+}
+
+.paragraph {
+  margin: 0 0 40rpx;
+  line-height: 1.8;
+}
+
+.blockquote {
+  @extend .paragraph;
+  padding: 20rpx 30rpx;
+  border-left-style: solid;
+  border-left-width: 10rpx;
+  border-color: var(--ui-Border);
+  background: none repeat scroll 0 0 rgba(102, 128, 153, 0.05);
+
+  .paragraph {
+    margin-bottom: 30rpx;
+  }
+
+  .paragraph:last-child {
+    margin-bottom: 0;
+  }
+}
diff --git a/sheep/scss/style/_menu.scss b/sheep/scss/style/_menu.scss
new file mode 100644
index 0000000..a4a8282
--- /dev/null
+++ b/sheep/scss/style/_menu.scss
@@ -0,0 +1,54 @@
+.ui-menu {
+  background-color: var(--ui-BG);
+}
+
+.ui-menu-item {
+  position: relative;
+  @include flex-bar;
+  min-height: 4em;
+  padding: 0 30rpx;
+  .ui-menu-item-icon {
+    width: 1.7em;
+    margin-right: 0.3em;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transform: scale(1.3);
+  }
+  .ui-menu-item-icon .ui-menu-item-image {
+    width: 1.2em;
+    height: 1.2em;
+    display: inline-block;
+  }
+  .ui-menu-item-content {
+    flex: 1;
+    position: relative;
+    @include flex-bar;
+  }
+  .ui-menu-item-arrow {
+    width: 1.6em;
+    text-align: center;
+    color: var(--ui-TC-3);
+  }
+  &::after {
+    content: ' ';
+    width: calc(200% - 120rpx);
+    left: 30rpx;
+    position: absolute;
+    top: 0;
+    box-sizing: border-box;
+    height: 200%;
+    border-top: 1px solid var(--ui-Border);
+    border-radius: inherit;
+    transform: scale(1);
+    transform-origin: 0 0;
+    pointer-events: none;
+  }
+  &.first-item::after {
+    display: none;
+  }
+  &:first-child::after {
+    display: none;
+  }
+}
diff --git a/sheep/scss/style/_shadow.scss b/sheep/scss/style/_shadow.scss
new file mode 100644
index 0000000..27cb3f6
--- /dev/null
+++ b/sheep/scss/style/_shadow.scss
@@ -0,0 +1,90 @@
+/* ==================
+          阴影
+ ==================== */
+
+.shadow {
+  box-shadow: var(--ui-Shadow);
+  &-sm {
+    box-shadow: var(--ui-Shadow-sm);
+  }
+  &-lg {
+    box-shadow: var(--ui-Shadow-lg);
+  }
+  &-inset {
+    box-shadow: var(--ui-Shadow-inset);
+  }
+  @each $color, $value in $colors {
+    @at-root .shadow-#{$color} {
+      box-shadow: 0 0.5em 1em rgba($value, var(--ui-Shadow-opacity));
+    }
+    &-sm.shadow-#{$color} {
+      box-shadow: 0 0.125em 0.25em rgba($value, var(--ui-Shadow-opacity));
+    }
+    &-lg.shadow-#{$color} {
+      box-shadow: 0 1em 3em rgba($value, var(--ui-Shadow-opacity-lg));
+    }
+  }
+
+  &-warp {
+    position: relative;
+  }
+  &-warp:before,
+  &-warp:after {
+    position: absolute;
+    content: '';
+    bottom: -10rpx;
+    left: 20rpx;
+    width: calc(50% - #{40rpx});
+    height: 30rpx;
+    transform: skew(0deg, -6deg);
+    transform-origin: 50% 50%;
+    background-color: rgba(0, 0, 0, var(--ui-Shadow-opacity));
+    filter: blur(20rpx);
+    z-index: -1;
+    opacity: 0.5;
+  }
+  &-warp:after {
+    right: 20rpx;
+    left: auto;
+    transform: skew(0deg, 6deg);
+  }
+  &-blur {
+    position: relative;
+  }
+  &-blur::before {
+    content: '';
+    display: block;
+    background: inherit;
+    filter: blur(20rpx);
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0.5em;
+    left: 0.5em;
+    z-index: -1;
+    opacity: var(--ui-Shadow-opacity-lg);
+    transform-origin: 0 0;
+    border-radius: inherit;
+    transform: scale(1, 1);
+  }
+}
+.drop-shadow {
+  filter: drop-shadow(0 0 30rpx rgba(0, 0, 0, 0.1));
+  &-sm {
+    filter: drop-shadow(0 4rpx 4rpx rgba(0, 0, 0, 0.06));
+  }
+  &-lg {
+    filter: drop-shadow(0 30rpx 60rpx rgba(0, 0, 0, 0.2));
+  }
+  @each $color, $value in $colors {
+    @at-root .drop-shadow-#{$color} {
+      filter: drop-shadow(0 15rpx 15rpx rgba(darken($value, 10%), 0.3));
+    }
+    &-sm.drop-shadow-#{$color} {
+      filter: drop-shadow(0 4rpx 4rpx rgba(darken($value, 10%), 0.3));
+    }
+    &-lg.drop-shadow-#{$color} {
+      filter: drop-shadow(0 50rpx 100rpx rgba(darken($value, 10%), 0.2));
+    }
+  }
+}
diff --git a/sheep/scss/style/_table.scss b/sheep/scss/style/_table.scss
new file mode 100644
index 0000000..ad5effa
--- /dev/null
+++ b/sheep/scss/style/_table.scss
@@ -0,0 +1,133 @@
+.ui-table {
+  background-color: var(--ui-BG);
+  max-width: 100%;
+  display: table;
+  &.table-full {
+    width: 100%;
+  }
+  &.table-radius {
+    border-radius: $radius;
+    .ui-table-header {
+      .ui-table-tr {
+        border-top-left-radius: $radius;
+        border-top-right-radius: $radius;
+      }
+      .ui-table-th {
+        &:first-child {
+          border-top-left-radius: $radius;
+        }
+        &:last-child {
+          border-top-right-radius: $radius;
+        }
+      }
+    }
+  }
+  .ui-table-header {
+    display: table-header-group;
+    .ui-table-th {
+      font-weight: bold;
+      border-bottom: 1px solid var(--ui-Border);
+      white-space: nowrap;
+
+      padding: 1em 0.8em;
+    }
+  }
+
+  .ui-table-tr {
+    display: table-row;
+    z-index: 1;
+  }
+
+  .ui-table-body {
+    display: table-row-group;
+    position: relative;
+    .ui-table-tr:hover {
+      background-color: var(--ui-BG-1) !important;
+    }
+    .ui-table-loading {
+      min-height: 300px;
+      position: absolute !important;
+      width: 100%;
+      height: 100%;
+      z-index: 2;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid var(--ui-Border);
+    }
+  }
+
+  .ui-table-td,
+  .ui-table-th {
+    display: table-cell;
+    text-align: unset;
+    padding: 0.5em 0.8em;
+    // font-size: 90%;
+    vertical-align: middle;
+  }
+}
+
+.ui-table.table-border {
+  &,
+  & .ui-table-td,
+  & .ui-table-th {
+    position: relative;
+    &::after {
+      content: ' ';
+      width: 200%;
+      height: 200%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      border-radius: inherit;
+      transform: scale(0.5);
+      transform-origin: 0 0;
+      pointer-events: none;
+      box-sizing: border-box;
+      border: 1px solid var(--ui-Border);
+      z-index: 1;
+    }
+  }
+  .ui-table-td,
+  .ui-table-th {
+    &::after {
+      border-width: 1px 1px 0 0;
+    }
+    &:last-child::after {
+      border-right: none;
+    }
+  }
+}
+.ui-table.table-radius {
+  &::after {
+    border-radius: calc(#{$radius} * 2);
+  }
+  & .ui-table-tr .ui-table-th:first-child {
+    border-top-left-radius: calc(#{$radius} * 2);
+  }
+  & .ui-table-tr .ui-table-th:last-child {
+    border-top-right-radius: calc(#{$radius} * 2);
+  }
+  & .ui-table-tr:last-child .ui-table-td:first-child {
+    border-bottom-left-radius: #{$radius};
+  }
+  & .ui-table-tr:last-child .ui-table-td:last-child {
+    border-bottom-right-radius: #{$radius};
+  }
+}
+.ui-table.table-striped > .ui-table-body > .ui-table-tr:nth-child(2n + 1),
+.ui-table.table-striped > .ui-table-body > .ui-table-tr:nth-child(2n + 1) {
+  background-color: var(--ui-BG-1);
+}
+
+.table-responsive {
+  width: inherit;
+  height: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+  .table-responsive-box {
+    position: relative;
+    overflow: hidden;
+  }
+}
diff --git a/sheep/scss/style/_tag.scss b/sheep/scss/style/_tag.scss
new file mode 100644
index 0000000..e69de29
diff --git a/sheep/scss/style/_text.scss b/sheep/scss/style/_text.scss
new file mode 100644
index 0000000..8249022
--- /dev/null
+++ b/sheep/scss/style/_text.scss
@@ -0,0 +1,104 @@
+/* ==================
+          文本
+ ==================== */
+@use 'sass:math';
+.font-0 {
+  font-size: 24rpx;
+  --textSize: -4rpx;
+}
+.font-1 {
+  font-size: 28rpx;
+  --textSize: 0rpx;
+}
+.font-2 {
+  font-size: 32rpx;
+  --textSize: 4rpx;
+}
+.font-3 {
+  font-size: 36rpx;
+  --textSize: 8rpx;
+}
+.font-4 {
+  font-size: 40rpx;
+  --textSize: 12rpx;
+}
+.text {
+  @each $class, $value in $fontsize {
+    &-#{$class},
+    &-#{math.div($value ,2)} {
+      font-size: calc(#{$value}rpx + var(--textSize)) !important;
+    }
+  }
+  &-cut {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  @at-root [class*='text-linecut'] {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    word-break: break-all;
+  }
+  @for $i from 2 through 10 {
+    &-linecut-#{$i} {
+      -webkit-line-clamp: #{$i};
+    }
+  }
+  &-justify {
+    text-align: justify;
+  }
+  &-justify-line {
+    text-align: justify;
+    line-height: 0.5em;
+    margin-top: 0.5em;
+    &::after {
+      content: '.';
+      display: inline-block;
+      width: 100%;
+    }
+  }
+
+  &-Abc {
+    text-transform: Capitalize !important;
+  }
+  &-ABC {
+    text-transform: Uppercase !important;
+  }
+  &-abc {
+    text-transform: Lowercase !important;
+  }
+  &-del,
+  &-line {
+    text-decoration: line-through !important;
+  }
+  &-bottomline {
+    text-decoration: underline !important;
+  }
+  &-italic {
+    font-style: italic !important;
+  }
+  &-style-none {
+    text-decoration: none !important;
+  }
+  &-break {
+    word-break: break-word !important;
+    overflow-wrap: break-word !important;
+  }
+  &-reset {
+    color: inherit !important;
+  }
+  &-price::before {
+    content: '¥';
+    font-size: 80%;
+    margin-right: 4rpx;
+  }
+  &-hide {
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+}
diff --git a/sheep/scss/theme/_dark.scss b/sheep/scss/theme/_dark.scss
new file mode 100644
index 0000000..8caad17
--- /dev/null
+++ b/sheep/scss/theme/_dark.scss
@@ -0,0 +1,39 @@
+// 核心主题样式文件
+@mixin theme-dark {
+  // 背景色
+  --ui-BG: #393939;
+  --ui-BG-1: #333333;
+  --ui-BG-2: #2c2c2c;
+  --ui-BG-3: #292929;
+  --ui-BG-4: #222222;
+
+  // 文本色
+  --ui-TC: #ffffff;
+  --ui-TC-1: #d4d4d4;
+  --ui-TC-2: #919191;
+  --ui-TC-3: #6a6a6a;
+  --ui-TC-4: #474747;
+
+  // 模糊
+  --ui-Blur: rgba(38, 38, 38, 0.98);
+  --ui-Blur-1: rgba(38, 38, 38, 0.75);
+  --ui-Blur-2: rgba(38, 38, 38, 0.25);
+  --ui-Blur-3: rgba(38, 38, 38, 0.05);
+
+  // 边框
+  --ui-Border: rgba(119, 119, 119, 0.25);
+  --ui-Outline: rgba(255, 255, 255, 0.1);
+  --ui-Line: rgba(119, 119, 119, 0.25);
+
+  // 透明与阴影
+  --ui-Shadow: 0 0.5em 1em rgba(0, 0, 0, 0.45);
+  --ui-Shadow-sm: 0 0.125em 0.25em rgba(0, 0, 0, 0.475);
+  --ui-Shadow-lg: 0 1em 3em rgba(0, 0, 0, 0.475);
+  --ui-Shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.475);
+
+  --ui-Shadow-opacity: 0.55;
+  --ui-Shadow-opacity-sm: 0.175;
+  --ui-Shadow-opacity-lg: 0.75;
+
+  --ui-BG-opacity: 0.1;
+}
diff --git a/sheep/scss/theme/_light.scss b/sheep/scss/theme/_light.scss
new file mode 100644
index 0000000..af5f245
--- /dev/null
+++ b/sheep/scss/theme/_light.scss
@@ -0,0 +1,39 @@
+// 核心主题样式文件
+@mixin theme-light {
+  // 背景色
+  --ui-BG: #ffffff;
+  --ui-BG-1: #f6f6f6;
+  --ui-BG-2: #f1f1f1;
+  --ui-BG-3: #e8e8e8;
+  --ui-BG-4: #e0e0e0;
+
+  // 文本色
+  --ui-TC: #303030;
+  --ui-TC-1: #525252;
+  --ui-TC-2: #777777;
+  --ui-TC-3: #9e9e9e;
+  --ui-TC-4: #c6c6c6;
+
+  // 模糊
+  --ui-Blur: rgba(255, 255, 255, 0.98);
+  --ui-Blur-1: rgba(255, 255, 255, 0.75);
+  --ui-Blur-2: rgba(255, 255, 255, 0.25);
+  --ui-Blur-3: rgba(255, 255, 255, 0.05);
+
+  // 边框
+  --ui-Border: rgba(119, 119, 119, 0.25);
+  --ui-Outline: rgba(0, 0, 0, 0.1);
+  --ui-Line: rgba(119, 119, 119, 0.25);
+
+  // 透明与阴影
+  --ui-Shadow: 0 0.5em 1em rgba(0, 0, 0, 0.15);
+  --ui-Shadow-sm: 0 0.125em 0.25em rgba(0, 0, 0, 0.075);
+  --ui-Shadow-lg: 0 1em 3em rgba(0, 0, 0, 0.175);
+  --ui-Shadow-inset: inset 0 0.1em 0.2em rgba(0, 0, 0, 0.075);
+
+  --ui-Shadow-opacity: 0.45;
+  --ui-Shadow-opacity-sm: 0.075;
+  --ui-Shadow-opacity-lg: 0.65;
+
+  --ui-BG-opacity: 0.1;
+}
diff --git a/sheep/scss/theme/_style.scss b/sheep/scss/theme/_style.scss
new file mode 100644
index 0000000..1eef587
--- /dev/null
+++ b/sheep/scss/theme/_style.scss
@@ -0,0 +1,68 @@
+@import './light'; //浅蓝主题
+@import './dark'; //深蓝主题
+// 多主题
+.theme-light {
+  @include theme-light;
+}
+.theme-dark {
+  @include theme-dark;
+}
+.theme-auto {
+  @include theme-light;
+}
+@media (prefers-color-scheme: dark) {
+  .theme-auto {
+    @include theme-dark;
+  }
+}
+
+@each $value in ('', '-1', '-2', '-3', '-4') {
+  // 背景色 + 文字色 ： 白色 + 默认色；
+  .ui-BG#{$value} {
+    background-color: var(--ui-BG#{$value}) !important;
+    color: var(--ui-TC);
+  }
+  // 文字颜色
+  .ui-TC#{$value} {
+    color: var(--ui-TC#{$value}) !important;
+  }
+  // 主题色背景
+  .ui-BG-Main#{$value} {
+    background-color: var(--ui-BG-Main#{$value}) !important;
+    color: var(--ui-BG-Main-TC) !important;
+  }
+  // 主题色渐变，横向
+  .ui-BG-Main-Gradient {
+    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient)) !important;
+    color: var(--ui-BG-Main-TC) !important;
+  }
+  // 主题色文字
+  .ui-TC-Main#{$value} {
+    color: var(--ui-BG-Main#{$value}) !important;
+  }
+  // 主题色阴影
+  .ui-Shadow-Main {
+    box-shadow: var(--ui-Main-box-shadow) !important;
+  }
+  .ui-BG-Main-light {
+    background: var(----ui-BG-Main-light) !important;
+    color: var(--ui-BG-Main#{$value}) !important;
+  }
+}
+
+@each $color, $value in $colors {
+  .main-#{$color} {
+    --ui-BG-Main: #{$value};
+    --ui-BG-Main-tag: #{rgba($value, 0.05)};
+    --ui-BG-Main-gradient: #{rgba($value, 0.6)};
+    --ui-BG-Main-light: #{rgba($value, 0.2)};
+    --ui-BG-Main-opacity-1: #{rgba($value, 0.1)};
+    --ui-BG-Main-opacity-4: #{rgba($value, 0.4)};
+    --ui-Main-box-shadow: 0 0.2em 0.5em #{rgba($value, var(--ui-Shadow-opacity))};
+    --ui-BG-Main-1: #{mix(rgba(255, 255, 255, 0.7), desaturate($value, 20%), 10%)};
+    --ui-BG-Main-2: #{mix(rgba(255, 255, 255, 0.6), desaturate($value, 40%), 20%)};
+    --ui-BG-Main-3: #{mix(rgba(119, 119, 119, 0.2), desaturate($value, 40%), 40%)};
+    --ui-BG-Main-4: #{mix(rgba(119, 119, 119, 0.1), desaturate($value, 40%), 60%)};
+    --ui-BG-Main-TC: #ffffff !important;
+  }
+}
diff --git a/sheep/scss/ui.scss b/sheep/scss/ui.scss
new file mode 100644
index 0000000..b9b7381
--- /dev/null
+++ b/sheep/scss/ui.scss
@@ -0,0 +1,19 @@
+@import './theme/style'; //系统主题
+@import './main'; //主样式*
+
+@import './style/background'; //背景
+@import './style/grid'; //列
+@import './style/flex'; //布局
+@import './style/border'; //边框
+@import './style/text'; //文本
+@import './style/shadow'; //阴影
+@import './icon/style'; //图标
+@import './style/tag'; //标签
+@import './style/button'; //按钮
+@import './style/avatar'; //头像
+@import './style/table'; //表格
+@import './style/code'; //代码片段
+@import './style/form'; //表单
+@import './style/menu'; //表单
+@import './style/markdown'; //表单
+@import './style/card'; //表单
diff --git a/sheep/store/app.js b/sheep/store/app.js
new file mode 100644
index 0000000..65ddb8e
--- /dev/null
+++ b/sheep/store/app.js
@@ -0,0 +1,139 @@
+import DiyApi from '@/api/promotion/diy';
+import { defineStore } from 'pinia';
+import $platform from '@/sheep/platform';
+import $router from '@/sheep/router';
+import user from './user';
+import sys from './sys';
+
+const app = defineStore({
+  id: 'app',
+  state: () => ({
+    info: {
+      // 应用信息
+      name: '', // 商城名称
+      logo: '', // logo
+      version: '', // 版本号
+      copyright: '', // 版权信息 I
+      copytime: '', // 版权信息 II
+
+      cdnurl: '', // 云存储域名
+      filesystem: '', // 云存储平台
+    },
+    platform: {
+      share: {
+        methods: [], // 支持的分享方式
+        forwardInfo: {}, // 默认转发信息
+        posterInfo: {}, // 海报信息
+        linkAddress: '', // 复制链接地址
+      },
+      bind_mobile: 0, // 登陆后绑定手机号提醒 (弱提醒，可手动关闭)
+    },
+    chat: {},
+    template: {
+      // 店铺装修模板
+      basic: {}, // 基本信息
+      home: {
+        // 首页模板
+        style: {},
+        data: [],
+      },
+      user: {
+        // 个人中心模板
+        style: {},
+        data: [],
+      },
+    },
+    shareInfo: {}, // 全局分享信息
+    has_wechat_trade_managed: 0 // 小程序发货信息管理  0 没有 || 1 有
+  }),
+  actions: {
+    // 获取Shopro应用配置和模板
+    async init(templateId = null) {
+      // 检查网络
+      const networkStatus = await $platform.checkNetwork();
+      if (!networkStatus) {
+        $router.error('NetworkError');
+      }
+
+      // 加载装修配置
+      await adaptTemplate(this.template, templateId)
+
+      // TODO 芋艿：未来支持管理后台可配；对应 https://api.shopro.sheepjs.com/shop/api/init
+      if (true) {
+        this.info = {
+          name: '商城',
+          logo: 'https://static.iocoder.cn/ruoyi-vue-pro-logo.png',
+          version: '1.1.13',
+          copyright: '全部开源，个人与企业可 100% 免费使用',
+          copytime: 'Copyright© 2018-2024',
+
+          cdnurl: 'https://file.sheepjs.com', // 云存储域名
+          filesystem: 'qcloud', // 云存储平台
+        };
+        this.platform = {
+          share: {
+            methods: ["poster", "link"],
+            linkAddress: "https://shopro.sheepjs.com/#/",
+            posterInfo: {
+              "user_bg": "/static/img/shop/config/user-poster-bg.png",
+              "goods_bg": "/static/img/shop/config/goods-poster-bg.png",
+              "groupon_bg": "/static/img/shop/config/groupon-poster-bg.png"
+            }
+          },
+          bind_mobile: 0
+        };
+        this.chat = {
+          chat_domain: "https://api.shopro.sheepjs.com/chat",
+          room_id: "admin"
+        }
+        this.has_wechat_trade_managed = 0;
+
+        // 加载主题
+        const sysStore = sys();
+        sysStore.setTheme();
+
+        // 模拟用户登录
+        const userStore = user();
+        if (userStore.isLogin) {
+          userStore.loginAfter();
+        }
+        return Promise.resolve(true);
+      } else {
+        $router.error('InitError', res.msg || '加载失败');
+      }
+    },
+  },
+  persist: {
+    enabled: true,
+    strategies: [
+      {
+        key: 'app-store',
+      },
+    ],
+  },
+});
+
+// todo: @owen 先做数据适配，后期重构
+const adaptTemplate = async (appTemplate, templateId) => {
+  const { data: diyTemplate } = templateId
+      // 查询指定模板，一般是预览时使用
+      ? await DiyApi.getDiyTemplate(templateId)
+      : await DiyApi.getUsedDiyTemplate();
+  // 模板不存在
+  if (!diyTemplate) {
+    $router.error('TemplateError');
+    return
+  }
+
+  const tabBar = diyTemplate?.property?.tabBar;
+  if (tabBar) {
+    appTemplate.basic.tabbar = tabBar
+    if (tabBar?.theme) {
+      appTemplate.basic.theme = tabBar?.theme;
+    }
+  }
+  appTemplate.home = diyTemplate?.home;
+  appTemplate.user = diyTemplate?.user;
+}
+
+export default app;
diff --git a/sheep/store/cart.js b/sheep/store/cart.js
new file mode 100644
index 0000000..0994b8e
--- /dev/null
+++ b/sheep/store/cart.js
@@ -0,0 +1,106 @@
+import { defineStore } from 'pinia';
+import CartApi from '@/api/trade/cart';
+
+const cart = defineStore({
+  id: 'cart',
+  state: () => ({
+    list: [], // 购物车列表
+    selectedIds: [], // 已选列表
+    isAllSelected: false, // 是否全选
+    totalPriceSelected: 0, // 选中项总金额
+  }),
+  actions: {
+    // 获取购物车列表
+    async getList() {
+      const { data, code } = await CartApi.getCartList();
+      if (code === 0) {
+        this.list = data.validList;
+
+        // 计算各种关联属性
+        this.selectedIds = [];
+        this.isAllSelected = true;
+        this.totalPriceSelected = 0;
+        this.list.forEach((item) => {
+          if (item.selected) {
+            this.selectedIds.push(item.id);
+            this.totalPriceSelected += item.count * item.sku.price;
+          } else {
+            this.isAllSelected = false;
+          }
+        });
+      }
+    },
+
+    // 添加购物车
+    async add(goodsInfo) {
+      // 添加购物项
+      const { code } = await CartApi.addCart({
+        skuId: goodsInfo.id,
+        count: goodsInfo.goods_num,
+      });
+      // 刷新购物车列表
+      if (code === 0) {
+        await this.getList();
+      }
+    },
+
+    // 更新购物车
+    async update(goodsInfo) {
+      const { code } = await CartApi.updateCartCount({
+        id: goodsInfo.goods_id,
+        count: goodsInfo.goods_num,
+      });
+      if (code === 0) {
+        await this.getList();
+      }
+    },
+
+    // 移除购物车
+    async delete(ids) {
+      const { code } = await CartApi.deleteCart(ids.join(','));
+      if (code === 0) {
+        await this.getList();
+      }
+    },
+
+    // 单选购物车商品
+    async selectSingle(goodsId) {
+      const { code } = await CartApi.updateCartSelected({
+        ids: [goodsId],
+        selected: !this.selectedIds.includes(goodsId), // 取反
+      });
+      if (code === 0) {
+        await this.getList();
+      }
+    },
+
+    // 全选购物车商品
+    async selectAll(flag) {
+      const { code } = await CartApi.updateCartSelected({
+        ids: this.list.map((item) => item.id),
+        selected: flag
+      });
+      if (code === 0) {
+        await this.getList();
+      }
+    },
+
+    // 清空购物车。注意，仅用于用户退出时，重置数据
+    emptyList() {
+      this.list = [];
+      this.selectedIds = [];
+      this.isAllSelected = true;
+      this.totalPriceSelected = 0;
+    },
+  },
+  persist: {
+    enabled: true,
+    strategies: [
+      {
+        key: 'cart-store',
+      },
+    ],
+  },
+});
+
+export default cart;
diff --git a/sheep/store/index.js b/sheep/store/index.js
new file mode 100644
index 0000000..3d06698
--- /dev/null
+++ b/sheep/store/index.js
@@ -0,0 +1,20 @@
+import { createPinia } from 'pinia';
+import piniaPersist from 'pinia-plugin-persist-uni';
+
+// 自动注入所有pinia模块
+const files = import.meta.glob('./*.js', { eager: true });
+const modules = {};
+Object.keys(files).forEach((key) => {
+  modules[key.replace(/(.*\/)*([^.]+).*/gi, '$2')] = files[key].default;
+});
+
+export const setupPinia = (app) => {
+  const pinia = createPinia();
+  pinia.use(piniaPersist);
+
+  app.use(pinia);
+};
+
+export default (name) => {
+  return modules[name]();
+};
diff --git a/sheep/store/modal.js b/sheep/store/modal.js
new file mode 100644
index 0000000..bde9e0a
--- /dev/null
+++ b/sheep/store/modal.js
@@ -0,0 +1,29 @@
+import { defineStore } from 'pinia';
+
+const modal = defineStore({
+  id: 'modal',
+  state: () => ({
+    auth: '', // 授权弹框 accountLogin|smsLogin|resetPassword|changeMobile|changePassword|changeUsername
+    share: false, // 分享弹框
+    menu: false, // 快捷菜单弹框
+    advHistory: [], // 广告弹框记录
+    lastTimer: {
+      // 短信验证码计时器，为了防止刷新请求做了持久化
+      smsLogin: 0,
+      changeMobile: 0,
+      resetPassword: 0,
+      changePassword: 0,
+    }
+  }),
+  persist: {
+    enabled: true,
+    strategies: [
+      {
+        key: 'modal-store',
+        paths: ['lastTimer', 'advHistory'],
+      },
+    ],
+  },
+});
+
+export default modal;
diff --git a/sheep/store/sys.js b/sheep/store/sys.js
new file mode 100644
index 0000000..f7151e0
--- /dev/null
+++ b/sheep/store/sys.js
@@ -0,0 +1,32 @@
+import { defineStore } from 'pinia';
+import app from './app';
+
+const sys = defineStore({
+  id: 'sys',
+  state: () => ({
+    theme: '', // 主题,
+    mode: 'light', // 明亮模式、暗黑模式（暂未支持）
+    modeAuto: false, // 跟随系统
+    fontSize: 1, // 设置默认字号等级(0-4)
+  }),
+  getters: {},
+  actions: {
+    setTheme(theme = '') {
+      if (theme === '') {
+        this.theme = app().template?.basic.theme || 'orange';
+      } else {
+        this.theme = theme;
+      }
+    },
+  },
+  persist: {
+    enabled: true,
+    strategies: [
+      {
+        key: 'sys-store',
+      },
+    ],
+  },
+});
+
+export default sys;
diff --git a/sheep/store/user.js b/sheep/store/user.js
new file mode 100644
index 0000000..c79c98a
--- /dev/null
+++ b/sheep/store/user.js
@@ -0,0 +1,186 @@
+import {
+	defineStore
+} from 'pinia';
+import $share from '@/sheep/platform/share';
+import {
+	isEmpty,
+	cloneDeep,
+	clone
+} from 'lodash';
+import cart from './cart';
+import app from './app';
+import {
+	showAuthModal
+} from '@/sheep/hooks/useModal';
+import UserApi from '@/api/member/user';
+import PayWalletApi from '@/api/pay/wallet';
+import OrderApi from '@/api/trade/order';
+import CouponApi from '@/api/promotion/coupon';
+
+// 默认用户信息
+const defaultUserInfo = {
+	avatar: '', // 头像
+	nickname: '', // 昵称
+	gender: 0, // 性别
+	mobile: '', // 手机号
+  point: 0, // 积分
+};
+
+// 默认钱包信息
+const defaultUserWallet = {
+  balance: 0, // 余额
+}
+
+// 默认订单、优惠券等其他资产信息
+const defaultNumData = {
+  unusedCouponCount: 0,
+  orderCount: {
+    allCount: 0,
+    unpaidCount: 0,
+    undeliveredCount: 0,
+    deliveredCount: 0,
+    uncommentedCount: 0,
+    afterSaleCount: 0,
+	},
+};
+
+const user = defineStore({
+	id: 'user',
+	state: () => ({
+		userInfo: clone(defaultUserInfo), // 用户信息
+    userWallet: clone(defaultUserWallet), // 用户钱包信息
+		isLogin: !!uni.getStorageSync('token'), // 登录状态
+		numData: cloneDeep(defaultNumData), // 用户其他数据
+		lastUpdateTime: 0, // 上次更新时间
+	}),
+
+	actions: {
+		// 获取用户信息
+		async getInfo() {
+			const { code, data } = await UserApi.getUserInfo();
+      if (code !== 0) {
+        return;
+      }
+      this.userInfo = data;
+			return Promise.resolve(data);
+		},
+
+    // 获得用户钱包
+    async getWallet() {
+      const { code, data } = await PayWalletApi.getPayWallet();
+      if (code !== 0) {
+        return;
+      }
+      this.userWallet = data;
+    },
+
+		// 获取订单、优惠券等其他资产信息
+    getNumData() {
+      OrderApi.getOrderCount().then(res => {
+        if (res.code === 0) {
+          this.numData.orderCount = res.data;
+        }
+      });
+      CouponApi.getUnusedCouponCount().then(res => {
+        if (res.code === 0) {
+          this.numData.unusedCouponCount = res.data;
+        }
+      });
+		},
+
+		// 添加分享记录
+    // TODO 芋艿：整理下；
+    async addShareLog(params) {
+			const {
+				error
+			} = await userApi.addShareLog(params);
+			if (error === 0) uni.removeStorageSync('shareLog');
+		},
+
+		// 设置 token
+    setToken(token = '', refreshToken = '') {
+			if (token === '') {
+				this.isLogin = false;
+				uni.removeStorageSync('token');
+        uni.removeStorageSync('refresh-token')
+			} else {
+				this.isLogin = true;
+				uni.setStorageSync('token', token);
+        uni.setStorageSync('refresh-token', refreshToken);
+				this.loginAfter();
+			}
+			return this.isLogin;
+		},
+
+		// 更新用户相关信息 (手动限流，5 秒之内不刷新)
+    async updateUserData() {
+			if (!this.isLogin) {
+				this.resetUserData();
+				return;
+			}
+      // 防抖，5 秒之内不刷新
+			const nowTime = new Date().getTime();
+      if (this.lastUpdateTime + 5000 > nowTime) {
+        return;
+      }
+      this.lastUpdateTime = nowTime;
+
+      // 获取最新信息
+			await this.getInfo();
+      this.getWallet();
+			this.getNumData();
+			return this.userInfo;
+		},
+
+		// 重置用户默认数据
+    resetUserData() {
+      // 清空 token
+			this.setToken();
+      // 清空用户相关的缓存
+			this.userInfo = clone(defaultUserInfo);
+      this.userWallet = clone(defaultUserWallet);
+			this.numData = cloneDeep(defaultNumData);
+      // 清空购物车的缓存
+			cart().emptyList();
+		},
+
+		// 登录后，加载各种信息
+    // TODO 芋艿：整理下；
+    async loginAfter() {
+			await this.updateUserData();
+
+      // 加载购物车
+			cart().getList();
+			// 登录后设置全局分享参数
+			$share.getShareInfo();
+
+			// 提醒绑定手机号
+			if (app().platform.bind_mobile && !this.userInfo.mobile) {
+				showAuthModal('changeMobile');
+			}
+
+			// 添加分享记录
+      // TODO 芋艿：整理下；
+      const shareLog = uni.getStorageSync('shareLog');
+			if (!isEmpty(shareLog)) {
+				this.addShareLog({
+					...shareLog,
+				});
+			}
+		},
+
+		// 登出系统
+    async logout() {
+      this.resetUserData();
+			return !this.isLogin;
+		}
+	},
+	persist: {
+		enabled: true,
+		strategies: [{
+			key: 'user-store',
+		}, ],
+	},
+});
+
+export default user;
diff --git a/sheep/ui/su-coupon/su-coupon.vue b/sheep/ui/su-coupon/su-coupon.vue
new file mode 100644
index 0000000..472d17f
--- /dev/null
+++ b/sheep/ui/su-coupon/su-coupon.vue
@@ -0,0 +1,319 @@
+<template>
+  <view class="ui-coupon-wrap">
+    <!-- xs: 一行三个，竖向 -->
+    <view
+      v-if="props.size === 'xs'"
+      class="xs-coupon-card ss-flex ss-flex-col ss-row-between"
+      :style="[cardStyle]"
+      @tap="
+        sheep.$router.go('/pages/coupon/detail', {
+          id: couponId,
+        })
+      "
+    >
+      <view class="ss-flex ss-flex-col ss-row-center ss-col-center">
+        <view class="face-value-box ss-flex ss-col-bottom ss-m-t-50 ss-m-b-28">
+          <view class="value-text ss-m-r-4">{{ type === 'reduce' ? value : Number(value) }}</view>
+          <view class="value-unit">{{ type === 'reduce' ? '元' : '折' }}</view>
+        </view>
+        <view class="title-text">{{ props.title }}</view>
+      </view>
+      <view class="card-bottom ss-m-b-30 ss-flex ss-row-center">
+        <slot name="btn">
+          <button class="ss-reset-button card-btn">{{ state.stateMap[props.state] }}</button>
+        </slot>
+      </view>
+    </view>
+
+    <!-- md: 一行两个，横向 -->
+    <view
+      v-if="props.size === 'md'"
+      class="md-coupon-card ss-flex ss-row-between"
+      :style="[cardStyle]"
+      @tap="
+        sheep.$router.go('/pages/coupon/detail', {
+          id: couponId,
+        })
+      "
+    >
+      <view class="card-left ss-flex ss-flex-col ss-row-between ss-col-top ss-m-l-40">
+        <view class="face-value-box ss-flex ss-col-bottom ss-m-t-28">
+          <view class="value-text ss-m-r-4">{{ type === 'reduce' ? value : Number(value) }}</view>
+          <view class="value-unit">{{ type === 'reduce' ? '元' : '折' }}</view>
+        </view>
+        <view class="ss-m-b-28">
+          <view class="title-text ss-m-b-10">{{ props.title }}</view>
+          <view class="surplus-text" v-if="props.surplus">仅剩：{{ props.surplus }}张</view>
+        </view>
+      </view>
+      <view class="card-right ss-flex ss-row-center">
+        <slot name="btn">
+          <button class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center">
+            <view class="btn-text">{{ state.stateMap[props.state] }}</view>
+          </button>
+        </slot>
+      </view>
+    </view>
+
+    <!-- lg: 一行一个，横向 -->
+    <view
+      v-if="props.size === 'lg'"
+      class="lg-coupon-card ss-flex ss-row-between"
+      :style="[cardStyle]"
+      @tap="
+        sheep.$router.go('/pages/coupon/detail', {
+          id: couponId,
+        })
+      "
+    >
+      <view class="card-left ss-flex ss-flex-col ss-row-between ss-col-top ss-m-l-40">
+        <view class="face-value-box ss-flex ss-col-bottom ss-m-t-28">
+          <view class="value-text ss-m-r-4">{{ type === 'reduce' ? value : Number(value) }}</view>
+          <view class="value-unit">{{ type === 'reduce' ? '元' : '折' }}</view>
+        </view>
+        <view class="ss-m-b-20">
+          <view class="title-text ss-m-b-10">{{ props.title }}</view>
+          <view class="sellby-text">有效期：{{ props.sellBy }}</view>
+        </view>
+      </view>
+      <view class="card-right ss-flex ss-flex-col ss-col-center ss-row-center">
+        <slot name="btn">
+          <button class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center">
+            {{ state.stateMap[props.state] }}
+          </button>
+        </slot>
+        <view class="surplus-text ss-m-t-24" v-if="props.surplus">仅剩：{{ props.surplus }}张</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  /**
+   * 优惠券 卡片
+   *
+   * @property {String} size = ['xs','md','lg']					- 类型 xs:一行三个，md:一行两个，lg:一行一个
+   * @property {String} textColor 								- 文字颜色
+   * @property {String} background 								- 背景
+   * @property {String} btnBg										- 按钮背景
+   * @property {String} btnTextColor								- 按钮文字颜色
+   * @property {Number} state = [0,1]								- 状态，0:未领取，1:已领取
+   * @property {String} title										- 标题
+   * @property {String | Number} value							- 面值
+   * @property {String} sellBy									- 有效期
+   * @property {String | Number} surplus							- 剩余
+   *
+   */
+  import { computed, reactive } from 'vue';
+  import sheep from '@/sheep';
+
+  // 数据
+  const state = reactive({
+    stateMap: {
+      0: '立即领取',
+      1: '去使用',
+    },
+  });
+
+  // 接受参数
+  const props = defineProps({
+    size: {
+      type: String,
+      default: 'lg',
+    },
+    textColor: {
+      type: String,
+      default: '#FF6000',
+    },
+    background: {
+      type: String,
+      default: '#FFC19C',
+    },
+    btnBg: {
+      type: String,
+      default: '#fff',
+    },
+    btnTextColor: {
+      type: String,
+      default: '#FF6000',
+    },
+    state: {
+      type: Number,
+      default: 0,
+    },
+    couponId: {
+      type: Number,
+      default: 0,
+    },
+    title: {
+      type: String,
+      default: '这是优惠券',
+    },
+    value: {
+      type: [Number, String],
+      default: 50,
+    },
+    sellBy: {
+      type: String,
+      default: '2019.11.25至2019.12.25',
+    },
+    surplus: {
+      type: [Number, String],
+      default: 0,
+    },
+    type: {
+      type: String,
+      default: '',
+    },
+  });
+
+  const cardStyle = computed(() => {
+    return {
+      background: props.background,
+    };
+  });
+</script>
+
+<style lang="scss" scoped>
+  // xs
+  .xs-coupon-card {
+    width: 227rpx;
+    // height: 145px;
+    border-radius: 10rpx;
+    overflow: hidden;
+
+    .value-text {
+      font-size: 50rpx;
+      line-height: 50rpx;
+      font-weight: bold;
+      color: v-bind('textColor');
+      vertical-align: text-bottom;
+    }
+
+    .value-unit {
+      color: v-bind('textColor');
+      font-size: 24rpx;
+      line-height: 38rpx;
+    }
+
+    .title-text {
+      color: v-bind('textColor');
+      font-size: 24rpx;
+      line-height: 30rpx;
+      width: 150rpx;
+      text-align: center;
+    }
+
+    .card-btn {
+      width: 140rpx;
+      height: 50rpx;
+      border-radius: 25rpx;
+      border-style: solid;
+      border-color: v-bind('btnTextColor');
+      border-width: 1px;
+      color: v-bind('btnTextColor');
+      background-color: v-bind('btnBg');
+      font-size: 24rpx;
+      line-height: 50rpx;
+    }
+  }
+
+  // md
+
+  .md-coupon-card {
+    width: 330rpx;
+    height: 168rpx;
+    border-radius: 10rpx;
+    overflow: hidden;
+
+    .card-right,
+    .card-left {
+      height: 100%;
+    }
+
+    .value-text {
+      font-size: 36rpx;
+      line-height: 36rpx;
+      font-weight: bold;
+      color: v-bind('textColor');
+      vertical-align: text-bottom;
+    }
+
+    .value-unit {
+      color: v-bind('textColor');
+      font-size: 22rpx;
+      line-height: 28rpx;
+    }
+
+    .title-text,
+    .surplus-text {
+      color: v-bind('textColor');
+      font-size: 22rpx;
+      line-height: 22rpx;
+    }
+
+    .card-btn {
+      width: 60rpx;
+      height: 100%;
+
+      .btn-text {
+        color: v-bind('btnTextColor');
+        font-size: 24rpx;
+        text-align: center;
+        writing-mode: vertical-lr;
+        writing-mode: tb-lr;
+      }
+    }
+  }
+
+  // lg
+  .lg-coupon-card {
+    width: 708rpx;
+    height: 168rpx;
+    border-radius: 10rpx;
+    overflow: hidden;
+
+    .card-right,
+    .card-left {
+      height: 100%;
+    }
+
+    .value-text {
+      font-size: 50rpx;
+      line-height: 50rpx;
+      font-weight: bold;
+      color: v-bind('textColor');
+      vertical-align: text-bottom;
+    }
+
+    .value-unit {
+      color: v-bind('textColor');
+      font-size: 22rpx;
+      line-height: 32rpx;
+    }
+
+    .title-text,
+    .sellby-text,
+    .surplus-text {
+      color: v-bind('textColor');
+      font-size: 22rpx;
+      line-height: 22rpx;
+    }
+
+    .card-right {
+      width: 200rpx;
+      .card-btn {
+        width: 140rpx;
+        height: 50rpx;
+        border-radius: 25rpx;
+        border-style: solid;
+        border-color: v-bind('btnTextColor');
+        border-width: 1px;
+        color: v-bind('btnTextColor');
+        background-color: v-bind('btnBg');
+        font-size: 24rpx;
+        line-height: 50rpx;
+      }
+    }
+  }
+</style>
diff --git a/sheep/ui/su-data-checkbox/su-data-checkbox.vue b/sheep/ui/su-data-checkbox/su-data-checkbox.vue
new file mode 100644
index 0000000..537ead5
--- /dev/null
+++ b/sheep/ui/su-data-checkbox/su-data-checkbox.vue
@@ -0,0 +1,894 @@
+<template>
+  <view class="uni-data-checklist" :style="{ 'margin-top': isTop + 'px' }">
+    <template v-if="!isLocal">
+      <view class="uni-data-loading">
+        <uni-load-more
+          v-if="!mixinDatacomErrorMessage"
+          status="loading"
+          iconType="snow"
+          :iconSize="18"
+          :content-text="contentText"
+        ></uni-load-more>
+        <text v-else>{{ mixinDatacomErrorMessage }}</text>
+      </view>
+    </template>
+    <template v-else>
+      <checkbox-group
+        v-if="multiple"
+        class="checklist-group"
+        :class="{ 'is-list': mode === 'list' || wrap }"
+        @change="chagne"
+      >
+        <label
+          class="checklist-box"
+          :class="[
+            'is--' + mode,
+            item.selected ? 'is-checked' : '',
+            disabled || !!item.disabled ? 'is-disable' : '',
+            index !== 0 && mode === 'list' ? 'is-list-border' : '',
+          ]"
+          :style="item.styleBackgroud"
+          v-for="(item, index) in dataList"
+          :key="index"
+        >
+          <checkbox
+            class="hidden"
+            hidden
+            :disabled="disabled || !!item.disabled"
+            :value="item[map.value] + ''"
+            :checked="item.selected"
+          />
+          <view
+            v-if="(mode !== 'tag' && mode !== 'list') || (mode === 'list' && icon === 'left')"
+            class="checkbox__inner"
+            :style="item.styleIcon"
+          >
+            <view class="checkbox__inner-icon"></view>
+          </view>
+          <view
+            class="checklist-content"
+            :class="{ 'list-content': mode === 'list' && icon === 'left' }"
+          >
+            <text class="checklist-text" :style="item.styleIconText">{{ item[map.text] }}</text>
+            <view
+              v-if="mode === 'list' && icon === 'right'"
+              class="checkobx__list"
+              :style="item.styleBackgroud"
+            ></view>
+          </view>
+        </label>
+      </checkbox-group>
+      <radio-group
+        v-else
+        class="checklist-group"
+        :class="{ 'is-list': mode === 'list', 'is-wrap': wrap }"
+        @change="chagne"
+      >
+        <!-- -->
+        <label
+          class="checklist-box"
+          :class="[
+            'is--' + mode,
+            item.selected ? 'is-checked' : '',
+            disabled || !!item.disabled ? 'is-disable' : '',
+            index !== 0 && mode === 'list' ? 'is-list-border' : '',
+          ]"
+          :style="item.styleBackgroud"
+          v-for="(item, index) in dataList"
+          :key="index"
+        >
+          <radio
+            class="hidden"
+            hidden
+            :disabled="disabled || item.disabled"
+            :value="item[map.value] + ''"
+            :checked="item.selected"
+          />
+          <view
+            v-if="(mode !== 'tag' && mode !== 'list') || (mode === 'list' && icon === 'left')"
+            class="radio__inner"
+            :style="item.styleBackgroud"
+          >
+            <view class="radio__inner-icon" :style="item.styleIcon"></view>
+          </view>
+          <view
+            class="checklist-content"
+            :class="{ 'list-content': mode === 'list' && icon === 'left' }"
+          >
+            <text class="checklist-text" :style="item.styleIconText">{{ item[map.text] }}</text>
+            <view
+              v-if="mode === 'list' && icon === 'right'"
+              :style="item.styleRightIcon"
+              class="checkobx__list"
+            ></view>
+          </view>
+        </label>
+      </radio-group>
+    </template>
+  </view>
+</template>
+
+<script>
+  /**
+   * DataChecklist 数据选择器
+   * @description 通过数据渲染 checkbox 和 radio
+   * @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
+   * @property {String} mode = [default| list | button | tag] 显示模式
+   * @value default  	默认横排模式
+   * @value list		列表模式
+   * @value button	按钮模式
+   * @value tag 		标签模式
+   * @property {Boolean} multiple = [true|false] 是否多选
+   * @property {Array|String|Number} value 默认值
+   * @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
+   * @property {Number|String} min 最小选择个数 ，multiple为true时生效
+   * @property {Number|String} max 最大选择个数 ，multiple为true时生效
+   * @property {Boolean} wrap 是否换行显示
+   * @property {String} icon = [left|right]  list 列表模式下icon显示位置
+   * @property {Boolean} selectedColor 选中颜色
+   * @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
+   * @property {Boolean} selectedTextColor 选中文本颜色，如不填写则自动显示
+   * @property {Object} map 字段映射， 默认 map={text:'text',value:'value'}
+   * @value left 左侧显示
+   * @value right 右侧显示
+   * @event {Function} change  选中发生变化触发
+   */
+
+  export default {
+    name: 'uniDataChecklist',
+    mixins: [uniCloud.mixinDatacom || {}],
+    emits: ['input', 'update:modelValue', 'change'],
+    props: {
+      mode: {
+        type: String,
+        default: 'default',
+      },
+
+      multiple: {
+        type: Boolean,
+        default: false,
+      },
+      value: {
+        type: [Array, String, Number],
+        default() {
+          return '';
+        },
+      },
+      // TODO vue3
+      modelValue: {
+        type: [Array, String, Number],
+        default() {
+          return '';
+        },
+      },
+      localdata: {
+        type: Array,
+        default() {
+          return [];
+        },
+      },
+      min: {
+        type: [Number, String],
+        default: '',
+      },
+      max: {
+        type: [Number, String],
+        default: '',
+      },
+      wrap: {
+        type: Boolean,
+        default: false,
+      },
+      icon: {
+        type: String,
+        default: 'left',
+      },
+      selectedColor: {
+        type: String,
+        default: '',
+      },
+      selectedTextColor: {
+        type: String,
+        default: '',
+      },
+      emptyText: {
+        type: String,
+        default: '暂无数据',
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      map: {
+        type: Object,
+        default() {
+          return {
+            text: 'text',
+            value: 'value',
+          };
+        },
+      },
+    },
+    watch: {
+      localdata: {
+        handler(newVal) {
+          this.range = newVal;
+          this.dataList = this.getDataList(this.getSelectedValue(newVal));
+        },
+        deep: true,
+      },
+      mixinDatacomResData(newVal) {
+        this.range = newVal;
+        this.dataList = this.getDataList(this.getSelectedValue(newVal));
+      },
+      value(newVal) {
+        this.dataList = this.getDataList(newVal);
+        // fix by mehaotian is_reset 在 uni-forms 中定义
+        if (!this.is_reset) {
+          this.is_reset = false;
+          this.formItem && this.formItem.setValue(newVal);
+        }
+      },
+      modelValue(newVal) {
+        this.dataList = this.getDataList(newVal);
+        if (!this.is_reset) {
+          this.is_reset = false;
+          this.formItem && this.formItem.setValue(newVal);
+        }
+      },
+    },
+    data() {
+      return {
+        dataList: [],
+        range: [],
+        contentText: {
+          contentdown: '查看更多',
+          contentrefresh: '加载中',
+          contentnomore: '没有更多',
+        },
+        isLocal: true,
+        styles: {
+          selectedColor: '#2979ff',
+          selectedTextColor: '#666',
+        },
+        isTop: 0,
+      };
+    },
+    computed: {
+      dataValue() {
+        if (this.value === '') return this.modelValue;
+        if (this.modelValue === '') return this.value;
+        return this.value;
+      },
+    },
+    created() {
+      this.form = this.getForm('uniForms');
+      this.formItem = this.getForm('uniFormsItem');
+      // this.formItem && this.formItem.setValue(this.value)
+
+      if (this.formItem) {
+        this.isTop = 6;
+        if (this.formItem.name) {
+          // 如果存在name添加默认值,否则formData 中不存在这个字段不校验
+          if (!this.is_reset) {
+            this.is_reset = false;
+            this.formItem.setValue(this.dataValue);
+          }
+          this.rename = this.formItem.name;
+          this.form.inputChildrens.push(this);
+        }
+      }
+
+      if (this.localdata && this.localdata.length !== 0) {
+        this.isLocal = true;
+        this.range = this.localdata;
+        this.dataList = this.getDataList(this.getSelectedValue(this.range));
+      } else {
+        if (this.collection) {
+          this.isLocal = false;
+          this.loadData();
+        }
+      }
+    },
+    methods: {
+      loadData() {
+        this.mixinDatacomGet()
+          .then((res) => {
+            this.mixinDatacomResData = res.result.data;
+            if (this.mixinDatacomResData.length === 0) {
+              this.isLocal = false;
+              this.mixinDatacomErrorMessage = this.emptyText;
+            } else {
+              this.isLocal = true;
+            }
+          })
+          .catch((err) => {
+            this.mixinDatacomErrorMessage = err.message;
+          });
+      },
+      /**
+       * 获取父元素实例
+       */
+      getForm(name = 'uniForms') {
+        let parent = this.$parent;
+        let parentName = parent.$options.name;
+        while (parentName !== name) {
+          parent = parent.$parent;
+          if (!parent) return false;
+          parentName = parent.$options.name;
+        }
+        return parent;
+      },
+      chagne(e) {
+        const values = e.detail.value;
+
+        let detail = {
+          value: [],
+          data: [],
+        };
+
+        if (this.multiple) {
+          this.range.forEach((item) => {
+            if (values.includes(item[this.map.value] + '')) {
+              detail.value.push(item[this.map.value]);
+              detail.data.push(item);
+            }
+          });
+        } else {
+          const range = this.range.find((item) => item[this.map.value] + '' === values);
+          if (range) {
+            detail = {
+              value: range[this.map.value],
+              data: range,
+            };
+          }
+        }
+        this.formItem && this.formItem.setValue(detail.value);
+        // TODO 兼容 vue2
+        this.$emit('input', detail.value);
+        // // TOTO 兼容 vue3
+        this.$emit('update:modelValue', detail.value);
+        this.$emit('change', {
+          detail,
+        });
+        if (this.multiple) {
+          // 如果 v-model 没有绑定 ，则走内部逻辑
+          // if (this.value.length === 0) {
+          this.dataList = this.getDataList(detail.value, true);
+          // }
+        } else {
+          this.dataList = this.getDataList(detail.value);
+        }
+      },
+
+      /**
+       * 获取渲染的新数组
+       * @param {Object} value 选中内容
+       */
+      getDataList(value) {
+        // 解除引用关系，破坏原引用关系，避免污染源数据
+        let dataList = JSON.parse(JSON.stringify(this.range));
+        let list = [];
+        if (this.multiple) {
+          if (!Array.isArray(value)) {
+            value = [];
+          }
+        }
+        dataList.forEach((item, index) => {
+          item.disabled = item.disable || item.disabled || false;
+          if (this.multiple) {
+            if (value.length > 0) {
+              let have = value.find((val) => val === item[this.map.value]);
+              item.selected = have !== undefined;
+            } else {
+              item.selected = false;
+            }
+          } else {
+            item.selected = value === item[this.map.value];
+          }
+
+          list.push(item);
+        });
+        return this.setRange(list);
+      },
+      /**
+       * 处理最大最小值
+       * @param {Object} list
+       */
+      setRange(list) {
+        let selectList = list.filter((item) => item.selected);
+        let min = Number(this.min) || 0;
+        let max = Number(this.max) || '';
+        list.forEach((item, index) => {
+          if (this.multiple) {
+            if (selectList.length <= min) {
+              let have = selectList.find((val) => val[this.map.value] === item[this.map.value]);
+              if (have !== undefined) {
+                item.disabled = true;
+              }
+            }
+
+            if (selectList.length >= max && max !== '') {
+              let have = selectList.find((val) => val[this.map.value] === item[this.map.value]);
+              if (have === undefined) {
+                item.disabled = true;
+              }
+            }
+          }
+          this.setStyles(item, index);
+          list[index] = item;
+        });
+        return list;
+      },
+      /**
+       * 设置 class
+       * @param {Object} item
+       * @param {Object} index
+       */
+      setStyles(item, index) {
+        //  设置自定义样式
+        item.styleBackgroud = this.setStyleBackgroud(item);
+        item.styleIcon = this.setStyleIcon(item);
+        item.styleIconText = this.setStyleIconText(item);
+        item.styleRightIcon = this.setStyleRightIcon(item);
+      },
+
+      /**
+       * 获取选中值
+       * @param {Object} range
+       */
+      getSelectedValue(range) {
+        if (!this.multiple) return this.dataValue;
+        let selectedArr = [];
+        range.forEach((item) => {
+          if (item.selected) {
+            selectedArr.push(item[this.map.value]);
+          }
+        });
+        return this.dataValue && this.dataValue.length > 0 ? this.dataValue : selectedArr;
+      },
+
+      /**
+       * 设置背景样式
+       */
+      setStyleBackgroud(item) {
+        let styles = {};
+        let selectedColor = this.selectedColor ? this.selectedColor : '#2979ff';
+        if (this.mode !== 'list') {
+          styles['border-color'] = item.selected ? selectedColor : '#DCDFE6';
+        }
+        if (this.mode === 'tag') {
+          styles['background-color'] = item.selected ? selectedColor : '#f5f5f5';
+        }
+        let classles = '';
+        for (let i in styles) {
+          classles += `${i}:${styles[i]};`;
+        }
+        return classles;
+      },
+      setStyleIcon(item) {
+        let styles = {};
+        let classles = '';
+        let selectedColor = this.selectedColor ? this.selectedColor : '#2979ff';
+        styles['background-color'] = item.selected ? selectedColor : '#fff';
+        styles['border-color'] = item.selected ? selectedColor : '#DCDFE6';
+
+        if (!item.selected && item.disabled) {
+          styles['background-color'] = '#F2F6FC';
+          styles['border-color'] = item.selected ? selectedColor : '#DCDFE6';
+        }
+
+        for (let i in styles) {
+          classles += `${i}:${styles[i]};`;
+        }
+        return classles;
+      },
+      setStyleIconText(item) {
+        let styles = {};
+        let classles = '';
+        let selectedColor = this.selectedColor ? this.selectedColor : '#2979ff';
+        if (this.mode === 'tag') {
+          styles.color = item.selected
+            ? this.selectedTextColor
+              ? this.selectedTextColor
+              : '#fff'
+            : '#666';
+        } else {
+          styles.color = item.selected
+            ? this.selectedTextColor
+              ? this.selectedTextColor
+              : selectedColor
+            : '#666';
+        }
+        if (!item.selected && item.disabled) {
+          styles.color = '#999';
+        }
+
+        for (let i in styles) {
+          classles += `${i}:${styles[i]};`;
+        }
+        return classles;
+      },
+      setStyleRightIcon(item) {
+        let styles = {};
+        let classles = '';
+        if (this.mode === 'list') {
+          styles['border-color'] = item.selected ? this.styles.selectedColor : '#DCDFE6';
+        }
+        for (let i in styles) {
+          classles += `${i}:${styles[i]};`;
+        }
+
+        return classles;
+      },
+    },
+  };
+</script>
+
+<style lang="scss">
+  $checked-color: var(--ui-BG-Main);
+  $border-color: #dcdfe6;
+  $disable: 0.4;
+
+  @mixin flex {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+  }
+
+  .uni-data-loading {
+    @include flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    height: 36px;
+    padding-left: 10px;
+    color: #999;
+  }
+
+  .uni-data-checklist {
+    position: relative;
+    z-index: 0;
+    flex: 1;
+    // 多选样式
+    .checklist-group {
+      @include flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+
+      &.is-list {
+        flex-direction: column;
+      }
+
+      .checklist-box {
+        @include flex;
+        flex-direction: row;
+        align-items: center;
+        position: relative;
+        margin: 5px 0;
+        margin-right: 25px;
+
+        .hidden {
+          position: absolute;
+          opacity: 0;
+        }
+
+        // 文字样式
+        .checklist-content {
+          @include flex;
+          flex: 1;
+          flex-direction: row;
+          align-items: center;
+          justify-content: space-between;
+          .checklist-text {
+            font-size: 14px;
+            color: #666;
+            margin-left: 5px;
+            line-height: 14px;
+          }
+
+          .checkobx__list {
+            border-right-width: 1px;
+            border-right-color: #007aff;
+            border-right-style: solid;
+            border-bottom-width: 1px;
+            border-bottom-color: #007aff;
+            border-bottom-style: solid;
+            height: 12px;
+            width: 6px;
+            left: -5px;
+            transform-origin: center;
+            transform: rotate(45deg);
+            opacity: 0;
+          }
+        }
+
+        // 多选样式
+        .checkbox__inner {
+          /* #ifndef APP-NVUE */
+          flex-shrink: 0;
+          box-sizing: border-box;
+          /* #endif */
+          position: relative;
+          width: 16px;
+          height: 16px;
+          border: 1px solid $border-color;
+          border-radius: 4px;
+          background-color: #fff;
+          z-index: 1;
+          .checkbox__inner-icon {
+            position: absolute;
+            /* #ifdef APP-NVUE */
+            top: 2px;
+            /* #endif */
+            /* #ifndef APP-NVUE */
+            top: 1px;
+            /* #endif */
+            left: 5px;
+            height: 8px;
+            width: 4px;
+            border-right-width: 1px;
+            border-right-color: #fff;
+            border-right-style: solid;
+            border-bottom-width: 1px;
+            border-bottom-color: #fff;
+            border-bottom-style: solid;
+            opacity: 0;
+            transform-origin: center;
+            transform: rotate(40deg);
+          }
+        }
+
+        // 单选样式
+        .radio__inner {
+          @include flex;
+          /* #ifndef APP-NVUE */
+          flex-shrink: 0;
+          box-sizing: border-box;
+          /* #endif */
+          justify-content: center;
+          align-items: center;
+          position: relative;
+          width: 16px;
+          height: 16px;
+          border: 1px solid $border-color;
+          border-radius: 16px;
+          background-color: #fff;
+          z-index: 1;
+
+          .radio__inner-icon {
+            width: 8px;
+            height: 8px;
+            border-radius: 10px;
+            opacity: 0;
+          }
+        }
+
+        // 默认样式
+        &.is--default {
+          // 禁用
+          &.is-disable {
+            /* #ifdef H5 */
+            cursor: not-allowed;
+            /* #endif */
+            .checkbox__inner {
+              background-color: #f2f6fc;
+              border-color: $border-color;
+              /* #ifdef H5 */
+              cursor: not-allowed;
+              /* #endif */
+            }
+
+            .radio__inner {
+              background-color: #f2f6fc;
+              border-color: $border-color;
+            }
+            .checklist-text {
+              color: #999;
+            }
+          }
+
+          // 选中
+          &.is-checked {
+            .checkbox__inner {
+              border-color: $checked-color;
+              background-color: $checked-color;
+
+              .checkbox__inner-icon {
+                opacity: 1;
+                transform: rotate(45deg);
+              }
+            }
+            .radio__inner {
+              border-color: $checked-color;
+              .radio__inner-icon {
+                opacity: 1;
+                background-color: $checked-color;
+              }
+            }
+            .checklist-text {
+              color: $checked-color;
+            }
+            // 选中禁用
+            &.is-disable {
+              .checkbox__inner {
+                opacity: $disable;
+              }
+
+              .checklist-text {
+                opacity: $disable;
+              }
+              .radio__inner {
+                opacity: $disable;
+              }
+            }
+          }
+        }
+
+        // 按钮样式
+        &.is--button {
+          margin-right: 10px;
+          padding: 5px 10px;
+          border: 1px $border-color solid;
+          border-radius: 3px;
+          transition: border-color 0.2s;
+
+          // 禁用
+          &.is-disable {
+            /* #ifdef H5 */
+            cursor: not-allowed;
+            /* #endif */
+            border: 1px #eee solid;
+            opacity: $disable;
+            .checkbox__inner {
+              background-color: #f2f6fc;
+              border-color: $border-color;
+              /* #ifdef H5 */
+              cursor: not-allowed;
+              /* #endif */
+            }
+            .radio__inner {
+              background-color: #f2f6fc;
+              border-color: $border-color;
+              /* #ifdef H5 */
+              cursor: not-allowed;
+              /* #endif */
+            }
+            .checklist-text {
+              color: #999;
+            }
+          }
+
+          &.is-checked {
+            border-color: $checked-color;
+            .checkbox__inner {
+              border-color: $checked-color;
+              background-color: $checked-color;
+              .checkbox__inner-icon {
+                opacity: 1;
+                transform: rotate(45deg);
+              }
+            }
+
+            .radio__inner {
+              border-color: $checked-color;
+
+              .radio__inner-icon {
+                opacity: 1;
+                background-color: $checked-color;
+              }
+            }
+
+            .checklist-text {
+              color: $checked-color;
+            }
+
+            // 选中禁用
+            &.is-disable {
+              opacity: $disable;
+            }
+          }
+        }
+
+        // 标签样式
+        &.is--tag {
+          margin-right: 10px;
+          padding: 5px 10px;
+          border: 1px $border-color solid;
+          border-radius: 3px;
+          background-color: #f5f5f5;
+
+          .checklist-text {
+            margin: 0;
+            color: #666;
+          }
+
+          // 禁用
+          &.is-disable {
+            /* #ifdef H5 */
+            cursor: not-allowed;
+            /* #endif */
+            opacity: $disable;
+          }
+
+          &.is-checked {
+            background-color: $checked-color;
+            border-color: $checked-color;
+
+            .checklist-text {
+              color: #fff;
+            }
+          }
+        }
+        // 列表样式
+        &.is--list {
+          /* #ifndef APP-NVUE */
+          display: flex;
+          /* #endif */
+          padding: 10px 15px;
+          padding-left: 0;
+          margin: 0;
+
+          &.is-list-border {
+            border-top: 1px #eee solid;
+          }
+
+          // 禁用
+          &.is-disable {
+            /* #ifdef H5 */
+            cursor: not-allowed;
+            /* #endif */
+            .checkbox__inner {
+              background-color: #f2f6fc;
+              border-color: $border-color;
+              /* #ifdef H5 */
+              cursor: not-allowed;
+              /* #endif */
+            }
+            .checklist-text {
+              color: #999;
+            }
+          }
+
+          &.is-checked {
+            .checkbox__inner {
+              border-color: $checked-color;
+              background-color: $checked-color;
+
+              .checkbox__inner-icon {
+                opacity: 1;
+                transform: rotate(45deg);
+              }
+            }
+            .radio__inner {
+              .radio__inner-icon {
+                opacity: 1;
+              }
+            }
+            .checklist-text {
+              color: $checked-color;
+            }
+
+            .checklist-content {
+              .checkobx__list {
+                opacity: 1;
+                border-color: $checked-color;
+              }
+            }
+
+            // 选中禁用
+            &.is-disable {
+              .checkbox__inner {
+                opacity: $disable;
+              }
+
+              .checklist-text {
+                opacity: $disable;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/sheep/ui/su-dialog/su-dialog.vue b/sheep/ui/su-dialog/su-dialog.vue
new file mode 100644
index 0000000..b53e9ce
--- /dev/null
+++ b/sheep/ui/su-dialog/su-dialog.vue
@@ -0,0 +1,269 @@
+<template>
+  <su-popup :show="show" type="center" @close="closeDialog">
+    <view class="uni-popup-dialog">
+      <view class="uni-dialog-title">
+        <text class="uni-dialog-title-text" :class="['uni-popup__' + dialogType]">
+          {{ titleText }}
+        </text>
+      </view>
+      <view v-if="mode === 'base'" class="uni-dialog-content">
+        <slot>
+          <text class="uni-dialog-content-text">{{ content }}</text>
+        </slot>
+      </view>
+      <view v-else class="uni-dialog-content">
+        <slot>
+          <input
+            class="uni-dialog-input"
+            v-model="val"
+            type="text"
+            :placeholder="placeholderText"
+            :focus="focus"
+          />
+        </slot>
+      </view>
+      <view class="uni-dialog-button-group">
+        <view class="uni-dialog-button" @click="closeDialog">
+          <text class="uni-dialog-button-text">{{ closeText }}</text>
+        </view>
+        <view class="uni-dialog-button uni-border-left" @click="onOk">
+          <text class="uni-dialog-button-text uni-button-color">{{ okText }}</text>
+        </view>
+      </view>
+    </view>
+  </su-popup>
+</template>
+
+<script>
+  /**
+   * PopUp 弹出层-对话框样式
+   * @description 弹出层-对话框样式
+   * @tutorial https://ext.dcloud.net.cn/plugin?id=329
+   * @property {String} value input 模式下的默认值
+   * @property {String} placeholder input 模式下输入提示
+   * @property {String} type = [success|warning|info|error] 主题样式
+   *  @value success 成功
+   * 	@value warning 提示
+   * 	@value info 消息
+   * 	@value error 错误
+   * @property {String} mode = [base|input] 模式、
+   * 	@value base 基础对话框
+   * 	@value input 可输入对话框
+   * @property {String} content 对话框内容
+   * @property {Boolean} beforeClose 是否拦截取消事件
+   * @event {Function} confirm 点击确认按钮触发
+   * @event {Function} close 点击取消按钮触发
+   */
+
+  export default {
+    name: 'SuDialog',
+    emits: ['confirm', 'close'],
+    props: {
+      show: {
+        type: Boolean,
+        default: false,
+      },
+      value: {
+        type: [String, Number],
+        default: '',
+      },
+      placeholder: {
+        type: [String, Number],
+        default: '',
+      },
+      type: {
+        type: String,
+        default: 'error',
+      },
+      mode: {
+        type: String,
+        default: 'base',
+      },
+      title: {
+        type: String,
+        default: '',
+      },
+      content: {
+        type: String,
+        default: '',
+      },
+      beforeClose: {
+        type: Boolean,
+        default: false,
+      },
+      cancelText: {
+        type: String,
+        default: '',
+      },
+      confirmText: {
+        type: String,
+        default: '',
+      },
+    },
+    data() {
+      return {
+        dialogType: 'error',
+        focus: false,
+        val: '',
+      };
+    },
+    computed: {
+      okText() {
+        return this.confirmText || '确认';
+      },
+      closeText() {
+        return this.cancelText || '取消';
+      },
+      placeholderText() {
+        return this.placeholder || '';
+      },
+      titleText() {
+        return this.title || '';
+      },
+    },
+    watch: {
+      type(val) {
+        this.dialogType = val;
+      },
+      mode(val) {
+        if (val === 'input') {
+          this.dialogType = 'info';
+        }
+      },
+      value(val) {
+        this.val = val;
+      },
+    },
+    created() {
+      if (this.mode === 'input') {
+        this.dialogType = 'info';
+        this.val = this.value;
+      } else {
+        this.dialogType = this.type;
+      }
+    },
+    mounted() {
+      this.focus = true;
+    },
+    methods: {
+      /**
+       * 点击确认按钮
+       */
+      onOk() {
+        if (this.mode === 'input') {
+          this.$emit('confirm', this.val);
+        } else {
+          this.$emit('confirm');
+        }
+        if (this.beforeClose) return;
+      },
+      /**
+       * 点击取消按钮
+       */
+      closeDialog() {
+        this.$emit('close');
+        if (this.beforeClose) return;
+      },
+    },
+  };
+</script>
+
+<style lang="scss">
+  .uni-popup-dialog {
+    width: 300px;
+    border-radius: 11px;
+    background-color: #fff;
+  }
+
+  .uni-dialog-title {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: row;
+    justify-content: center;
+    padding-top: 25px;
+  }
+
+  .uni-dialog-title-text {
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  .uni-dialog-content {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+  }
+
+  .uni-dialog-content-text {
+    font-size: 14px;
+    color: #6c6c6c;
+  }
+
+  .uni-dialog-button-group {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: row;
+    border-top-color: #f5f5f5;
+    border-top-style: solid;
+    border-top-width: 1px;
+  }
+
+  .uni-dialog-button {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+
+    flex: 1;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    height: 45px;
+  }
+
+  .uni-border-left {
+    border-left-color: #f0f0f0;
+    border-left-style: solid;
+    border-left-width: 1px;
+  }
+
+  .uni-dialog-button-text {
+    font-size: 16px;
+    color: #333;
+  }
+
+  .uni-button-color {
+    color: #007aff;
+  }
+
+  .uni-dialog-input {
+    flex: 1;
+    font-size: 14px;
+    border: 1px #eee solid;
+    height: 40px;
+    padding: 0 10px;
+    border-radius: 5px;
+    color: #555;
+  }
+
+  .uni-popup__success {
+    color: #4cd964;
+  }
+
+  .uni-popup__warn {
+    color: #f0ad4e;
+  }
+
+  .uni-popup__error {
+    color: #dd524d;
+  }
+
+  .uni-popup__info {
+    color: #909399;
+  }
+</style>
diff --git a/sheep/ui/su-fixed/su-fixed.vue b/sheep/ui/su-fixed/su-fixed.vue
new file mode 100644
index 0000000..e2a9808
--- /dev/null
+++ b/sheep/ui/su-fixed/su-fixed.vue
@@ -0,0 +1,217 @@
+<template>
+  <view class="ui-fixed">
+    <view
+      class="ui-fixed-box"
+      :id="`fixed-${uuid}`"
+      :class="[{ fixed: state.fixed }]"
+      :style="[
+        {
+          left: sticky ? 'auto' : '0px',
+          top: state.fixed && !bottom ? (noNav ? val : val + sys_navBar) + 'px' : 'auto',
+          bottom: insetHeight,
+          zIndex: index + sheep.$zIndex.navbar,
+        },
+        !alway ? { opacity: state.opacityVal } : '',
+      ]"
+    >
+      <view
+        class="ui-fixed-content"
+        @tap="toTop"
+        :style="[{ zIndex: index + sheep.$zIndex.navbar }]"
+      >
+        <slot></slot>
+        <view
+          v-if="safeAreaInsets.bottom && bottom && isInset"
+          class="inset-bottom"
+          :style="[{ height: safeAreaInsets.bottom + 'px' }]"
+        ></view>
+      </view>
+      <view class="ui-fixed-bottom" :class="[bg]" v-if="bottom"></view>
+      <view
+        class="ui-fixed-bg"
+        :class="[ui, bg]"
+        :style="[
+          { zIndex: index + sheep.$zIndex.navbar - 1 },
+          bgStyles,
+          opacity ? { opacity: state.opacityVal } : '',
+        ]"
+      ></view>
+    </view>
+    <view
+      class="skeleton"
+      :style="[{ height: state.content.height + 'px', width: width + 'px' }]"
+      v-if="sticky ? state.fixed : placeholder && state.fixed"
+    ></view>
+  </view>
+</template>
+
+<script setup>
+  import { onPageScroll } from '@dcloudio/uni-app';
+  import { getCurrentInstance, unref, onMounted, reactive, nextTick, computed } from 'vue';
+  import sheep from '@/sheep';
+  const { safeAreaInsets } = sheep.$platform.device;
+
+  const vm = getCurrentInstance();
+
+  const uuid = sheep.$helper.guid();
+  const sys_navBar = sheep.$platform.navbar;
+  const state = reactive({
+    content: {},
+    fixed: true,
+    scrollTop: 0,
+    opacityVal: 0,
+  });
+  const insetHeight = computed(() => {
+    if (state.fixed && props.bottom) {
+      if (props.isInset) {
+        return props.val + 'px';
+      } else {
+        return props.val + safeAreaInsets.bottom + 'px';
+      }
+    } else {
+      return 'auto';
+    }
+  });
+  const props = defineProps({
+    noNav: {
+      type: Boolean,
+      default: false,
+    },
+    bottom: {
+      type: Boolean,
+      default: false,
+    },
+    bg: {
+      type: String,
+      default: '',
+    },
+    bgStyles: {
+      type: Object,
+      default() {},
+    },
+    val: {
+      type: Number,
+      default: 0,
+    },
+    width: {
+      type: [String, Number],
+      default: 0,
+    },
+    alway: {
+      type: Boolean,
+      default: true,
+    },
+    opacity: {
+      type: Boolean,
+      default: false,
+    },
+    index: {
+      type: [Number, String],
+      default: 0,
+    },
+    placeholder: {
+      type: [Boolean],
+      default: false,
+    },
+    sticky: {
+      type: [Boolean],
+      default: false,
+    },
+    noFixed: {
+      type: Boolean,
+      default: false,
+    },
+    ui: {
+      type: String,
+      default: '',
+    },
+    clickTo: {
+      type: Boolean,
+      default: false,
+    },
+    //是否需要安全区
+    isInset: {
+      type: Boolean,
+      default: true,
+    },
+  });
+
+  state.fixed = !unref(props.sticky);
+  onPageScroll((e) => {
+    let top = e.scrollTop;
+    state.scrollTop = top;
+    state.opacityVal = top > sheep.$platform.navbar ? 1 : top * 0.01;
+  });
+
+  onMounted(() => {
+    nextTick(() => {
+      computedQuery();
+    });
+  });
+
+  const computedQuery = () => {
+    uni.createSelectorQuery()
+      .in(vm)
+      .select(`#fixed-${uuid}`)
+      .boundingClientRect((data) => {
+        if (data != null) {
+          state.content = data;
+          if (unref(props.sticky)) {
+            setFixed(state.scrollTop);
+          }
+        }
+      })
+      .exec();
+  };
+
+  const setFixed = (value) => {
+    if (unref(props.bottom)) {
+      state.fixed =
+        value >=
+        state.content.bottom -
+          sheep.$platform.device.windowHeight +
+          state.content.height +
+          unref(props.val);
+    } else {
+      state.fixed =
+        value >=
+        state.content.top -
+          (unref(props.noNav) ? unref(props.val) : unref(props.val) + sheep.$platform.navbar);
+    }
+  };
+
+  const toTop = () => {
+    if (props.hasToTop) {
+      uni.pageScrollTo({
+        scrollTop: state.content.top,
+        duration: 100,
+      });
+    }
+  };
+</script>
+
+<style lang="scss">
+  .ui-fixed {
+    .ui-fixed-box {
+      position: relative;
+      width: 100%;
+      &.fixed {
+        position: fixed;
+      }
+      .ui-fixed-content {
+        position: relative;
+      }
+      .ui-fixed-bg {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        z-index: 1;
+        pointer-events: none;
+      }
+    }
+  }
+  .inset-bottom {
+    background: #fff;
+  }
+</style>
diff --git a/sheep/ui/su-image/su-image.vue b/sheep/ui/su-image/su-image.vue
new file mode 100644
index 0000000..35f8410
--- /dev/null
+++ b/sheep/ui/su-image/su-image.vue
@@ -0,0 +1,130 @@
+<template>
+  <image
+    v-if="!state.isError"
+    class="su-img"
+    :style="customStyle"
+    :draggable="false"
+    :mode="mode"
+    :src="sheep.$url.cdn(src)"
+    @tap="onImgPreview"
+    @load="onImgLoad"
+    @error="onImgError"
+  ></image>
+</template>
+
+<script setup>
+  /**
+   * 图片组件
+   *
+   * @property {String} src 						- 图片地址
+   * @property {Number} mode 						- 裁剪方式
+   * @property {String} isPreview 		  		- 是否开启预览
+   * @property {Number} previewList 				- 预览列表
+   * @property {String} current 		  			- 预览首张下标
+   *
+   * @event {Function} load 						- 图片加载完毕触发
+   * @event {Function} error 						- 图片加载错误触发
+   *
+   */
+
+  import { reactive, computed } from 'vue';
+  import sheep from '@/sheep';
+
+  // 组件数据
+  const state = reactive({
+    isError: false,
+    imgHeight: 600,
+  });
+
+  // 接收参数
+  const props = defineProps({
+    src: {
+      type: String,
+      default: '',
+    },
+    errorSrc: {
+      type: String,
+      default: '/static/img/shop/empty_network.png',
+    },
+    mode: {
+      type: String,
+      default: 'widthFix',
+    },
+    isPreview: {
+      type: Boolean,
+      default: false,
+    },
+    previewList: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    current: {
+      type: Number,
+      default: -1,
+    },
+    height: {
+      type: Number,
+      default: 0,
+    },
+    width: {
+      type: Number,
+      default: 0,
+    },
+    radius: {
+      type: Number,
+      default: 0,
+    },
+  });
+
+  const emits = defineEmits(['load', 'error']);
+
+  const customStyle = computed(() => {
+    return {
+      height: (props.height || state.imgHeight) + 'rpx',
+      width: props.width ? props.width + 'rpx' : '100%',
+      borderRadius: props.radius ? props.radius + 'rpx' : '',
+    };
+  });
+
+  // 图片加载完成
+  function onImgLoad(e) {
+    if (props.height === 0) {
+      state.imgHeight = (e.detail.height / e.detail.width) * 750;
+    }
+  }
+
+  // 图片加载错误
+  function onImgError(e) {
+    state.isError = true;
+    emits('error', e);
+  }
+
+  // 预览图片
+  function onImgPreview() {
+    if (!props.isPreview) return;
+    uni.previewImage({
+      urls: props.previewList.length < 1 ? [props.src] : props.previewList,
+      current: props.current,
+      longPressActions: {
+        itemList: ['发送给朋友', '保存图片', '收藏'],
+        success: function (data) {
+          console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
+        },
+        fail: function (err) {
+          console.log(err.errMsg);
+        },
+      },
+    });
+  }
+</script>
+
+<style lang="scss" scoped>
+  .su-img {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+</style>
diff --git a/sheep/ui/su-inner-navbar/su-inner-navbar.vue b/sheep/ui/su-inner-navbar/su-inner-navbar.vue
new file mode 100644
index 0000000..9fc102d
--- /dev/null
+++ b/sheep/ui/su-inner-navbar/su-inner-navbar.vue
@@ -0,0 +1,365 @@
+<template>
+  <su-fixed
+    :noFixed="props.noFixed"
+    :alway="props.alway"
+    :bgStyles="props.bgStyles"
+    :val="0"
+    :index="props.zIndex"
+    noNav
+    :bg="props.bg"
+    :ui="props.ui"
+    :opacity="props.opacity"
+    :placeholder="props.placeholder"
+  >
+    <su-status-bar />
+    <!-- 
+      :class="[{ 'border-bottom': !props.opacity && props.bg != 'bg-none' }]"
+     -->
+    <view class="ui-navbar-box">
+      <view
+        class="ui-bar ss-p-x-20"
+        :class="state.isDark ? 'text-white' : 'text-black'"
+        :style="[{ height: sys_navBar - sys_statusBar + 'px' }]"
+      >
+        <view class="icon-box ss-flex">
+          <view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft">
+            <text class="sicon-back" v-if="hasHistory" />
+            <text class="sicon-home" v-else />
+          </view>
+          <view class="line"></view>
+          <view class="icon-button icon-button-right ss-flex ss-row-center" @tap="onClickRight">
+            <text class="sicon-more" />
+          </view>
+        </view>
+        <slot name="center">
+          <view class="center navbar-title">{{ title }}</view>
+        </slot>
+        <!-- #ifdef MP -->
+        <view :style="[state.capsuleStyle]"></view>
+        <!-- #endif -->
+      </view>
+    </view>
+  </su-fixed>
+</template>
+
+<script setup>
+  /**
+   * 标题栏 - 基础组件navbar
+   *
+   * @param {Number}  zIndex = 100  							- 层级
+   * @param {Boolean}  back = true 							- 是否返回上一页
+   * @param {String}  backtext = ''  							- 返回文本
+   * @param {String}  bg = 'bg-white'  						- 公共Class
+   * @param {String}  status = ''  							- 状态栏颜色
+   * @param {Boolean}  alway = true							- 是否常驻
+   * @param {Boolean}  opacity = false  						- 是否开启透明渐变
+   * @param {Boolean}  noFixed = false  						- 是否浮动
+   * @param {String}  ui = ''									- 公共Class
+   * @param {Boolean}  capsule = false  						- 是否开启胶囊返回
+   * @param {Boolean}  stopBack = false 					    - 是否禁用返回
+   * @param {Boolean}  placeholder = true 					- 是否开启占位
+   * @param {Object}   bgStyles = {} 					    	- 背景样式
+   *
+   */
+
+  import { computed, reactive, onBeforeMount, ref } from 'vue';
+  import sheep from '@/sheep';
+  import { onPageScroll } from '@dcloudio/uni-app';
+  import { showMenuTools, closeMenuTools } from '@/sheep/hooks/useModal';
+
+  // 本地数据
+  const state = reactive({
+    statusCur: '',
+    capsuleStyle: {},
+    capsuleBack: {},
+    isDark: true,
+  });
+
+  const sys_statusBar = sheep.$platform.device.statusBarHeight;
+  const sys_navBar = sheep.$platform.navbar;
+
+  const props = defineProps({
+    zIndex: {
+      type: Number,
+      default: 100,
+    },
+
+    title: {
+      //返回文本
+      type: String,
+      default: '',
+    },
+    bg: {
+      type: String,
+      default: 'bg-white',
+    },
+    // 常驻
+    alway: {
+      type: Boolean,
+      default: true,
+    },
+    opacity: {
+      //是否开启滑动渐变
+      type: Boolean,
+      default: true,
+    },
+    noFixed: {
+      //是否浮动
+      type: Boolean,
+      default: true,
+    },
+    ui: {
+      type: String,
+      default: '',
+    },
+    capsule: {
+      //是否开启胶囊返回
+      type: Boolean,
+      default: false,
+    },
+    stopBack: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: {
+      type: [Boolean],
+      default: false,
+    },
+    bgStyles: {
+      type: Object,
+      default() {},
+    },
+  });
+
+  const emits = defineEmits(['navback', 'clickLeft']);
+  const hasHistory = sheep.$router.hasHistory();
+
+  onBeforeMount(() => {
+    init();
+  });
+
+  onPageScroll((e) => {
+    let top = e.scrollTop;
+    state.isDark = top < sheep.$platform.navbar;
+  });
+
+  function onClickLeft() {
+    if (hasHistory) {
+      sheep.$router.back();
+    } else {
+      sheep.$router.go('/pages/index/index');
+    }
+    emits('clickLeft');
+  }
+  function onClickRight() {
+    showMenuTools();
+  }
+
+  // 初始化
+  const init = () => {
+    // #ifdef MP-ALIPAY
+    my.hideAllFavoriteMenu();
+    // #endif
+    state.capsuleStyle = {
+      width: sheep.$platform.capsule.width + 'px',
+      height: sheep.$platform.capsule.height + 'px',
+    };
+
+    state.capsuleBack = state.capsuleStyle;
+  };
+</script>
+
+<style lang="scss" scoped>
+  .icon-box {
+    box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08), 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
+    border-radius: 30rpx;
+    width: 134rpx;
+    height: 56rpx;
+    margin-left: 8rpx;
+    border: 1px solid rgba(#fff, 0.4);
+    .line {
+      width: 2rpx;
+      height: 24rpx;
+      background: #e5e5e7;
+    }
+    .sicon-back {
+      font-size: 32rpx;
+    }
+    .sicon-home {
+      font-size: 32rpx;
+    }
+    .sicon-more {
+      font-size: 32rpx;
+    }
+    .icon-button {
+      width: 67rpx;
+      height: 56rpx;
+      &-left:hover {
+        background: rgba(0, 0, 0, 0.16);
+        border-radius: 30rpx 0px 0px 30rpx;
+      }
+      &-right:hover {
+        background: rgba(0, 0, 0, 0.16);
+        border-radius: 0px 30rpx 30rpx 0px;
+      }
+    }
+  }
+  .navbar-title {
+    font-size: 36rpx;
+  }
+  .tools-icon {
+    font-size: 40rpx;
+  }
+  .ui-navbar-box {
+    background-color: transparent;
+    width: 100%;
+
+    .ui-bar {
+      position: relative;
+      z-index: 2;
+      white-space: nowrap;
+      display: flex;
+      position: relative;
+      align-items: center;
+      justify-content: space-between;
+
+      .left {
+        @include flex-bar;
+
+        .back {
+          @include flex-bar;
+
+          .back-icon {
+            @include flex-center;
+            width: 56rpx;
+            height: 56rpx;
+            margin: 0 10rpx;
+            font-size: 46rpx !important;
+
+            &.opacityIcon {
+              position: relative;
+              border-radius: 50%;
+              background-color: rgba(127, 127, 127, 0.5);
+
+              &::after {
+                content: '';
+                display: block;
+                position: absolute;
+                height: 200%;
+                width: 200%;
+                left: 0;
+                top: 0;
+                border-radius: inherit;
+                transform: scale(0.5);
+                transform-origin: 0 0;
+                opacity: 0.1;
+                border: 1px solid currentColor;
+                pointer-events: none;
+              }
+
+              &::before {
+                transform: scale(0.9);
+              }
+            }
+          }
+
+          /* #ifdef  MP-ALIPAY */
+          ._icon-back {
+            opacity: 0;
+          }
+
+          /* #endif */
+        }
+
+        .capsule {
+          @include flex-bar;
+          border-radius: 100px;
+          position: relative;
+
+          &.dark {
+            background-color: rgba(255, 255, 255, 0.5);
+          }
+
+          &.light {
+            background-color: rgba(0, 0, 0, 0.15);
+          }
+
+          &::after {
+            content: '';
+            display: block;
+            position: absolute;
+            height: 60%;
+            width: 1px;
+            left: 50%;
+            top: 20%;
+            background-color: currentColor;
+            opacity: 0.1;
+            pointer-events: none;
+          }
+
+          &::before {
+            content: '';
+            display: block;
+            position: absolute;
+            height: 200%;
+            width: 200%;
+            left: 0;
+            top: 0;
+            border-radius: inherit;
+            transform: scale(0.5);
+            transform-origin: 0 0;
+            opacity: 0.1;
+            border: 1px solid currentColor;
+            pointer-events: none;
+          }
+
+          .capsule-back,
+          .capsule-home {
+            @include flex-center;
+            flex: 1;
+          }
+
+          &.isFristPage {
+            .capsule-back,
+            &::after {
+              display: none;
+            }
+          }
+        }
+      }
+
+      .right {
+        @include flex-bar;
+
+        .right-content {
+          @include flex;
+          flex-direction: row-reverse;
+        }
+      }
+
+      .center {
+        @include flex-center;
+        text-overflow: ellipsis;
+        // text-align: center;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+
+        .image {
+          display: block;
+          height: 36px;
+          max-width: calc(100vw - 200px);
+        }
+      }
+    }
+
+    .ui-bar-bg {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      z-index: 1;
+      pointer-events: none;
+    }
+  }
+</style>
diff --git a/sheep/ui/su-navbar/su-navbar.vue b/sheep/ui/su-navbar/su-navbar.vue
new file mode 100644
index 0000000..af96f24
--- /dev/null
+++ b/sheep/ui/su-navbar/su-navbar.vue
@@ -0,0 +1,483 @@
+<!-- 自定义导航栏 -->
+<template>
+  <view class="uni-navbar" :class="{ 'uni-dark': dark }">
+    <view
+      :class="{
+        'uni-navbar--fixed': fixed,
+        'uni-navbar--shadow': shadow,
+        'uni-navbar--border': border,
+      }"
+      class="uni-navbar__content"
+    >
+      <view class="fixed-bg" :class="[opacity ? '' : opacityBgUi]"></view>
+      <su-status-bar v-if="statusBar" />
+      <view
+        :style="{
+          color: themeColor,
+          height: navbarHeight,
+          background: backgroundColor,
+        }"
+        class="uni-navbar__header"
+      >
+        <view
+          class="uni-navbar__header-btns uni-navbar__header-btns-left"
+          :style="{ width: leftIconWidth }"
+        >
+          <slot name="left">
+            <view class="uni-navbar__content_view" v-if="leftIcon.length > 0">
+              <view class="icon-box ss-flex">
+                <view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft">
+                  <text class="sicon-back" v-if="hasHistory" />
+                  <text class="sicon-home" v-else />
+                </view>
+                <view class="line"></view>
+                <view
+                  class="icon-button icon-button-right ss-flex ss-row-center"
+                  @tap="showMenuTools"
+                >
+                  <text class="sicon-more" />
+                </view>
+              </view>
+            </view>
+            <view
+              :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length > 0 }"
+              class="uni-navbar-btn-text"
+              v-if="
+                titleAlign === 'left' &&
+                title.length &&
+                sheep.$platform.name !== 'WechatOfficialAccount'
+              "
+            >
+              <text :style="{ color: themeColor, fontSize: '18px' }">{{ title }}</text>
+            </view>
+          </slot>
+        </view>
+        <view v-if="tools === 'search'" class="ss-flex-1">
+          <slot name="center">
+            <uni-search-bar
+              class="ss-flex-1 search-box"
+              :radius="20"
+              placeholder="请输入关键词"
+              cancelButton="none"
+              v-model="searchModel"
+              @confirm="onSearch"
+            />
+          </slot>
+        </view>
+        <view v-else class="uni-navbar__header-container" @tap="onClickTitle">
+          <slot name="center">
+            <view
+              v-if="tools === 'title' && titleAlign === 'center' && title.length"
+              class="uni-navbar__header-container-inner"
+            >
+              <text :style="{ color: themeColor, fontSize: '36rpx' }" class="ss-line-1">{{
+                title
+              }}</text>
+            </view>
+          </slot>
+        </view>
+      </view>
+    </view>
+    <view class="uni-navbar__placeholder" v-if="placeholder">
+      <su-status-bar v-if="statusBar" />
+      <view class="uni-navbar__placeholder-view" :style="{ height: navbarHeight }" />
+    </view>
+    <!-- 头部问题 -->
+    <!-- #ifdef MP -->
+    <!-- <view :style="[capsuleStyle]"></view> -->
+    <!-- #endif -->
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { onLoad } from '@dcloudio/uni-app';
+  import { showMenuTools, closeMenuTools } from '@/sheep/hooks/useModal';
+  import { computed, ref } from 'vue';
+
+  /**
+   * NavBar 自定义导航栏
+   * @description 导航栏组件，主要用于头部导航
+   * @property {Boolean} dark 开启黑暗模式
+   * @property {String} title 标题文字
+   * @property {String} rightText 右侧按钮文本
+   * @property {String} leftIcon 左侧按钮图标
+   * @property {String} rightIcon 右侧按钮图标
+   * @property {String} color 图标和文字颜色
+   * @property {String} backgroundColor 导航栏背景颜色
+   * @property {Boolean} fixed = [true|false] 是否固定顶部
+   * @property {Boolean} statusBar = [true|false] 是否包含状态栏
+   * @property {Boolean} shadow = [true|false] 导航栏下是否有阴影
+   * @event {Function} clickLeft 左侧按钮点击时触发
+   * @event {Function} clickRight 右侧按钮点击时触发
+   * @event {Function} clickTitle 中间标题点击时触发
+   */
+
+  const getVal = (val) => (typeof val === 'number' ? val + 'px' : val);
+
+  const emits = defineEmits(['clickLeft', 'clickRight', 'clickTitle', 'search']);
+  const props = defineProps({
+    dark: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: String,
+      default: '',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    titleAlign: {
+      type: String,
+      default: 'center', // left | center
+    },
+    rightText: {
+      type: String,
+      default: '',
+    },
+    leftIcon: {
+      type: String,
+      default: 'left',
+    },
+    rightIcon: {
+      type: String,
+      default: '',
+    },
+    fixed: {
+      type: [Boolean, String],
+      default: true,
+    },
+    placeholder: {
+      type: [Boolean, String],
+      default: true,
+    },
+    color: {
+      type: String,
+      default: '',
+    },
+    backgroundColor: {
+      type: String,
+      default: '',
+    },
+    opacity: {
+      type: [Boolean, String],
+      default: false,
+    },
+    opacityBgUi: {
+      type: String,
+      default: 'bg-white',
+    },
+    statusBar: {
+      type: [Boolean, String],
+      default: false,
+    },
+    shadow: {
+      type: [Boolean, String],
+      default: false,
+    },
+    border: {
+      type: [Boolean, String],
+      default: false,
+    },
+    height: {
+      type: [Number, String],
+      default: 44,
+    },
+    leftWidth: {
+      type: [Number, String],
+      default: 80,
+    },
+    rightWidth: {
+      type: [Number, String],
+      default: 0,
+    },
+    tools: {
+      type: String,
+      default: 'title',
+    },
+    defaultSearch: {
+      type: String,
+      default: '',
+    },
+  });
+
+  const capsuleStyle = computed(() => {
+    return {
+      width: sheep.$platform.capsule.width + 'px',
+      height: sheep.$platform.capsule.height + 'px',
+      margin: '0 ' + (sheep.$platform.device.windowWidth - sheep.$platform.capsule.right) + 'px',
+    };
+  });
+
+  const searchModel = computed(() => {
+		return props.defaultSearch
+	})
+
+  const themeBgColor = computed(() => {
+    if (props.dark) {
+      // 默认值
+      if (props.backgroundColor) {
+        return props.backgroundColor;
+      } else {
+        return props.dark ? '#333' : '#FFF';
+      }
+    }
+    return props.backgroundColor || '#FFF';
+  });
+  const themeColor = computed(() => {
+    if (props.dark) {
+      // 默认值
+      if (props.color) {
+        return props.color;
+      } else {
+        return props.dark ? '#fff' : '#333';
+      }
+    }
+    return props.color || '#333';
+  });
+  const navbarHeight = computed(() => {
+    return getVal(props.height);
+  });
+  const leftIconWidth = computed(() => {
+    return getVal(props.leftWidth);
+  });
+  const rightIconWidth = computed(() => {
+    return getVal(props.rightWidth);
+  });
+
+  function onSearch(e) {
+    emits('search', e.value);
+  }
+
+  onLoad(() => {
+    if (uni.report && props.title !== '') {
+      uni.report('title', props.title);
+    }
+  });
+
+  const hasHistory = sheep.$router.hasHistory();
+
+  function onClickLeft() {
+    if (hasHistory) {
+      sheep.$router.back();
+    } else {
+      sheep.$router.go('/pages/index/index');
+    }
+    emits('clickLeft');
+  }
+  function onClickRight() {
+    showMenuTools();
+  }
+  function onClickTitle() {
+    emits('clickTitle');
+  }
+</script>
+
+<style lang="scss" scoped>
+  .bg-main {
+    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient)) !important;
+    color: #fff !important;
+  }
+  .icon-box {
+    background: #ffffff;
+    box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08), 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
+    border-radius: 30rpx;
+    width: 134rpx;
+    height: 56rpx;
+    margin-left: 8rpx;
+    .line {
+      width: 2rpx;
+      height: 24rpx;
+      background: #e5e5e7;
+    }
+    .sicon-back {
+      font-size: 32rpx;
+      color: #000;
+    }
+    .sicon-home {
+      font-size: 32rpx;
+      color: #000;
+    }
+    .sicon-more {
+      font-size: 32rpx;
+      color: #000;
+    }
+    .icon-button {
+      width: 67rpx;
+      height: 56rpx;
+      &-left:hover {
+        background: rgba(0, 0, 0, 0.16);
+        border-radius: 30rpx 0px 0px 30rpx;
+      }
+      &-right:hover {
+        background: rgba(0, 0, 0, 0.16);
+        border-radius: 0px 30rpx 30rpx 0px;
+      }
+    }
+  }
+
+  $nav-height: 44px;
+
+  .fixed-bg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  .uni-nav-bar-text {
+    /* #ifdef APP-PLUS */
+    font-size: 34rpx;
+    /* #endif */
+    /* #ifndef APP-PLUS */
+    font-size: 14px;
+    /* #endif */
+  }
+
+  .uni-nav-bar-right-text {
+    font-size: 12px;
+  }
+
+  .uni-navbar__content {
+    position: relative;
+    // background-color: #fff;
+    // box-sizing: border-box;
+    background-color: transparent;
+  }
+
+  .uni-navbar__content_view {
+    // box-sizing: border-box;
+  }
+
+  .uni-navbar-btn-text {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    line-height: 18px;
+  }
+
+  .uni-navbar__header {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    padding: 0 10px;
+    flex-direction: row;
+    justify-content: space-between;
+    height: $nav-height;
+    font-size: 12px;
+    position: relative;
+    z-index: 2;
+  }
+
+  .uni-navbar__header-btns {
+    /* #ifndef APP-NVUE */
+    overflow: hidden;
+    display: flex;
+    /* #endif */
+    flex-wrap: nowrap;
+    flex-direction: row;
+    // min-width: 120rpx;
+    min-width: 40rpx;
+    // padding: 0 6px;
+    justify-content: center;
+    align-items: center;
+    /* #ifdef H5 */
+    cursor: pointer;
+    /* #endif */
+  }
+
+  .uni-navbar__header-btns-left {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    width: 120rpx;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .uni-navbar__header-btns-right {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: row;
+    // width: 150rpx;
+    // padding-right: 30rpx;
+    justify-content: flex-end;
+    align-items: center;
+  }
+  .uni-navbar__header-container {
+    /* #ifndef APP-NVUE */
+    // display: flex;
+    /* #endif */
+    // flex: 1;
+    // padding: 0 10px;
+    // overflow: hidden;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    top: 50%;
+  }
+
+  .uni-navbar__header-container-inner {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    overflow: hidden;
+    // box-sizing: border-box;
+  }
+
+  .uni-navbar__placeholder-view {
+    height: $nav-height;
+  }
+
+  .uni-navbar--fixed {
+    position: fixed;
+    z-index: 998;
+    /* #ifdef H5 */
+    left: var(--window-left);
+    right: var(--window-right);
+    /* #endif */
+    /* #ifndef H5 */
+    left: 0;
+    right: 0;
+    /* #endif */
+  }
+
+  .uni-navbar--shadow {
+    box-shadow: 0 1px 6px #ccc;
+  }
+
+  .uni-navbar--border {
+    border-bottom-width: 1rpx;
+    border-bottom-style: solid;
+    border-bottom-color: #eee;
+  }
+
+  .uni-ellipsis-1 {
+    overflow: hidden;
+    /* #ifndef APP-NVUE */
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    /* #endif */
+    /* #ifdef APP-NVUE */
+    lines: 1;
+    text-overflow: ellipsis;
+    /* #endif */
+  }
+
+  // 暗主题配置
+  .uni-dark {
+  }
+</style>
diff --git a/sheep/ui/su-notice-bar/su-notice-bar.vue b/sheep/ui/su-notice-bar/su-notice-bar.vue
new file mode 100644
index 0000000..fc5075a
--- /dev/null
+++ b/sheep/ui/su-notice-bar/su-notice-bar.vue
@@ -0,0 +1,473 @@
+<!-- 公告栏组件 -->
+<template>
+  <view
+    v-if="show"
+    class="uni-noticebar"
+    :style="{ backgroundColor: backgroundColor }"
+    @click="onClick"
+  >
+    <slot name="icon">
+      <uni-icons
+        v-if="showIcon === true || showIcon === 'true'"
+        class="uni-noticebar-icon"
+        type="sound"
+        :color="color"
+        size="22"
+      />
+    </slot>
+    <view
+      ref="textBox"
+      class="uni-noticebar__content-wrapper"
+      :class="{
+        'uni-noticebar__content-wrapper--scrollable': scrollable,
+        'uni-noticebar__content-wrapper--single': !scrollable && (single || moreText),
+      }"
+    >
+      <view
+        :id="elIdBox"
+        class="uni-noticebar__content"
+        :class="{
+          'uni-noticebar__content--scrollable': scrollable,
+          'uni-noticebar__content--single': !scrollable && (single || moreText),
+        }"
+      >
+        <text
+          :id="elId"
+          ref="animationEle"
+          class="uni-noticebar__content-text"
+          :class="{
+            'uni-noticebar__content-text--scrollable': scrollable,
+            'uni-noticebar__content-text--single': !scrollable && (single || showGetMore),
+          }"
+          :style="{
+            color: color,
+            width: wrapWidth + 'px',
+            animationDuration: animationDuration,
+            '-webkit-animationDuration': animationDuration,
+            animationPlayState: webviewHide ? 'paused' : animationPlayState,
+            '-webkit-animationPlayState': webviewHide ? 'paused' : animationPlayState,
+            animationDelay: animationDelay,
+            '-webkit-animationDelay': animationDelay,
+          }"
+        >
+          {{ text }}
+        </text>
+      </view>
+    </view>
+    <view
+      v-if="showGetMore === true || showGetMore === 'true'"
+      class="uni-noticebar__more uni-cursor-point"
+      @click="clickMore"
+    >
+      <text
+        v-if="moreText.length > 0"
+        :style="{ color: moreColor }"
+        class="uni-noticebar__more-text"
+      >
+        {{ moreText }}
+      </text>
+      <uni-icons v-else type="right" :color="moreColor" size="16" />
+    </view>
+    <view
+      class="uni-noticebar-close uni-cursor-point"
+      v-if="
+        (showClose === true || showClose === 'true') &&
+        (showGetMore === false || showGetMore === 'false')
+      "
+    >
+      <view @click="close">
+        <slot name="close">
+          <uni-icons type="closeempty" :color="color" size="16" />
+        </slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import sheep from '@/sheep';
+  // #ifdef APP-NVUE
+  const dom = weex.requireModule('dom');
+  const animation = weex.requireModule('animation');
+  // #endif
+
+  /**
+   * NoticeBar 自定义导航栏
+   * @description 通告栏组件
+   * @tutorial https://ext.dcloud.net.cn/plugin?id=30
+   * @property {Number} speed 文字滚动的速度，默认100px/秒
+   * @property {String} text 显示文字
+   * @property {String} backgroundColor 背景颜色
+   * @property {String} color 文字颜色
+   * @property {String} moreColor 查看更多文字的颜色
+   * @property {String} moreText 设置“查看更多”的文本
+   * @property {Boolean} single = [true|false] 是否单行
+   * @property {Boolean} scrollable = [true|false] 是否滚动，为true时，NoticeBar为单行
+   * @property {Boolean} showIcon = [true|false] 是否显示左侧喇叭图标
+   * @property {Boolean} showClose = [true|false] 是否显示左侧关闭按钮
+   * @property {Boolean} showGetMore = [true|false] 是否显示右侧查看更多图标，为true时，NoticeBar为单行
+   * @event {Function} click 点击 NoticeBar 触发事件
+   * @event {Function} close 关闭 NoticeBar 触发事件
+   * @event {Function} getmore 点击”查看更多“时触发事件
+   */
+
+  export default {
+    name: 'UniNoticeBar',
+    emits: ['click', 'getmore', 'close'],
+    props: {
+      text: {
+        type: String,
+        default: '',
+      },
+      moreText: {
+        type: String,
+        default: '',
+      },
+      backgroundColor: {
+        type: String,
+        default: '',
+      },
+      speed: {
+        // 默认1s滚动100px
+        type: Number,
+        default: 100,
+      },
+      color: {
+        type: String,
+        default: 'var(--ui-BG-Main)',
+      },
+      moreColor: {
+        type: String,
+        default: '#FF9A43',
+      },
+      single: {
+        // 是否单行
+        type: [Boolean, String],
+        default: false,
+      },
+      scrollable: {
+        // 是否滚动，添加后控制单行效果取消
+        type: [Boolean, String],
+        default: false,
+      },
+      showIcon: {
+        // 是否显示左侧icon
+        type: [Boolean, String],
+        default: false,
+      },
+      showGetMore: {
+        // 是否显示右侧查看更多
+        type: [Boolean, String],
+        default: false,
+      },
+      showClose: {
+        // 是否显示左侧关闭按钮
+        type: [Boolean, String],
+        default: false,
+      },
+    },
+    data() {
+      const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`;
+      const elIdBox = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`;
+      return {
+        textWidth: 0,
+        boxWidth: 0,
+        wrapWidth: '',
+        webviewHide: false,
+        // #ifdef APP-NVUE
+        stopAnimation: false,
+        // #endif
+        elId: elId,
+        elIdBox: elIdBox,
+        show: true,
+        animationDuration: 'none',
+        animationPlayState: 'paused',
+        animationDelay: '0s',
+      };
+    },
+    mounted() {
+      // #ifdef APP-PLUS
+      var pages = getCurrentPages();
+      var page = pages[pages.length - 1];
+      var currentWebview = page.$getAppWebview();
+      currentWebview.addEventListener('hide', () => {
+        this.webviewHide = true;
+      });
+      currentWebview.addEventListener('show', () => {
+        this.webviewHide = false;
+      });
+      // #endif
+      this.$nextTick(() => {
+        this.initSize();
+      });
+    },
+    // #ifdef APP-NVUE
+    beforeDestroy() {
+      this.stopAnimation = true;
+    },
+    // #endif
+    methods: {
+      initSize() {
+        if (this.scrollable) {
+          // #ifndef APP-NVUE
+          let query = [],
+            boxWidth = 0,
+            textWidth = 0;
+          let textQuery = new Promise((resolve, reject) => {
+            uni.createSelectorQuery()
+              // #ifndef MP-ALIPAY
+              .in(this)
+              // #endif
+              .select(`#${this.elId}`)
+              .boundingClientRect()
+              .exec((ret) => {
+                this.textWidth = ret[0].width;
+                resolve();
+              });
+          });
+          let boxQuery = new Promise((resolve, reject) => {
+            uni.createSelectorQuery()
+              // #ifndef MP-ALIPAY
+              .in(this)
+              // #endif
+              .select(`#${this.elIdBox}`)
+              .boundingClientRect()
+              .exec((ret) => {
+                this.boxWidth = ret[0].width;
+                resolve();
+              });
+          });
+          query.push(textQuery);
+          query.push(boxQuery);
+          Promise.all(query).then(() => {
+            this.animationDuration = `${this.textWidth / this.speed}s`;
+            this.animationDelay = `-${this.boxWidth / this.speed}s`;
+            setTimeout(() => {
+              this.animationPlayState = 'running';
+            }, 1000);
+          });
+          // #endif
+          // #ifdef APP-NVUE
+          dom.getComponentRect(this.$refs['animationEle'], (res) => {
+            let winWidth = sheep.$platform.device.windowWidth;
+            this.textWidth = res.size.width;
+            animation.transition(
+              this.$refs['animationEle'],
+              {
+                styles: {
+                  transform: `translateX(-${winWidth}px)`,
+                },
+                duration: 0,
+                timingFunction: 'linear',
+                delay: 0,
+              },
+              () => {
+                if (!this.stopAnimation) {
+                  animation.transition(
+                    this.$refs['animationEle'],
+                    {
+                      styles: {
+                        transform: `translateX(-${this.textWidth}px)`,
+                      },
+                      timingFunction: 'linear',
+                      duration: ((this.textWidth - winWidth) / this.speed) * 1000,
+                      delay: 1000,
+                    },
+                    () => {
+                      if (!this.stopAnimation) {
+                        this.loopAnimation();
+                      }
+                    },
+                  );
+                }
+              },
+            );
+          });
+          // #endif
+        }
+        // #ifdef APP-NVUE
+        if (!this.scrollable && (this.single || this.moreText)) {
+          dom.getComponentRect(this.$refs['textBox'], (res) => {
+            this.wrapWidth = res.size.width;
+          });
+        }
+        // #endif
+      },
+      loopAnimation() {
+        // #ifdef APP-NVUE
+        animation.transition(
+          this.$refs['animationEle'],
+          {
+            styles: {
+              transform: `translateX(0px)`,
+            },
+            duration: 0,
+          },
+          () => {
+            if (!this.stopAnimation) {
+              animation.transition(
+                this.$refs['animationEle'],
+                {
+                  styles: {
+                    transform: `translateX(-${this.textWidth}px)`,
+                  },
+                  duration: (this.textWidth / this.speed) * 1000,
+                  timingFunction: 'linear',
+                  delay: 0,
+                },
+                () => {
+                  if (!this.stopAnimation) {
+                    this.loopAnimation();
+                  }
+                },
+              );
+            }
+          },
+        );
+        // #endif
+      },
+      clickMore() {
+        this.$emit('getmore');
+      },
+      close() {
+        this.show = false;
+        this.$emit('close');
+      },
+      onClick() {
+        this.$emit('click');
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .uni-noticebar {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    width: 100%;
+    box-sizing: border-box;
+    /* #endif */
+    flex-direction: row;
+    align-items: center;
+    padding: 10px 12px;
+    // margin-bottom: 10px;
+  }
+
+  .uni-cursor-point {
+    /* #ifdef H5 */
+    cursor: pointer;
+    /* #endif */
+  }
+
+  .uni-noticebar-close {
+    margin-left: 8px;
+    margin-right: 5px;
+  }
+
+  .uni-noticebar-icon {
+    margin-right: 5px;
+  }
+
+  .uni-noticebar__content-wrapper {
+    flex: 1;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .uni-noticebar__content-wrapper--single {
+    /* #ifndef APP-NVUE */
+    line-height: 18px;
+    /* #endif */
+  }
+
+  .uni-noticebar__content-wrapper--single,
+  .uni-noticebar__content-wrapper--scrollable {
+    flex-direction: row;
+  }
+
+  /* #ifndef APP-NVUE */
+  .uni-noticebar__content-wrapper--scrollable {
+    position: relative;
+    height: 18px;
+  }
+
+  /* #endif */
+
+  .uni-noticebar__content--scrollable {
+    /* #ifdef APP-NVUE */
+    flex: 0;
+    /* #endif */
+    /* #ifndef APP-NVUE */
+    flex: 1;
+    display: block;
+    overflow: hidden;
+    /* #endif */
+  }
+
+  .uni-noticebar__content--single {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    flex: none;
+    width: 100%;
+    justify-content: center;
+    /* #endif */
+  }
+
+  .uni-noticebar__content-text {
+    font-size: 14px;
+    line-height: 18px;
+    /* #ifndef APP-NVUE */
+    word-break: break-all;
+    /* #endif */
+  }
+
+  .uni-noticebar__content-text--single {
+    /* #ifdef APP-NVUE */
+    lines: 1;
+    /* #endif */
+    /* #ifndef APP-NVUE */
+    display: block;
+    width: 100%;
+    white-space: nowrap;
+    /* #endif */
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .uni-noticebar__content-text--scrollable {
+    /* #ifdef APP-NVUE */
+    lines: 1;
+    padding-left: 750rpx;
+    /* #endif */
+    /* #ifndef APP-NVUE */
+    position: absolute;
+    display: block;
+    height: 18px;
+    line-height: 18px;
+    white-space: nowrap;
+    padding-left: 100%;
+    animation: notice 10s 0s linear infinite both;
+    animation-play-state: paused;
+    /* #endif */
+  }
+
+  .uni-noticebar__more {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    padding-left: 5px;
+  }
+
+  .uni-noticebar__more-text {
+    font-size: 14px;
+  }
+
+  @keyframes notice {
+    100% {
+      transform: translate3d(-100%, 0, 0);
+    }
+  }
+</style>
diff --git a/sheep/ui/su-number-box/su-number-box.vue b/sheep/ui/su-number-box/su-number-box.vue
new file mode 100644
index 0000000..6b662cd
--- /dev/null
+++ b/sheep/ui/su-number-box/su-number-box.vue
@@ -0,0 +1,225 @@
+<template>
+  <view class="uni-numbox">
+    <!-- <view @click="_calcValue('minus')" class="uni-numbox__minus uni-numbox-btns" :style="{ background }"> -->
+    <!-- <text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }"
+				:style="{ color }">
+				-
+			</text> -->
+    <text
+      class="cicon-move-round"
+      :class="{
+        'uni-numbox--disabled': inputValue <= min || disabled,
+        'groupon-btn': activity === 'groupon',
+        'seckill-btn': activity === 'seckill',
+      }"
+      @click="_calcValue('minus')"
+    ></text>
+    <!-- </view> -->
+    <input
+      :disabled="disabled"
+      @focus="_onFocus"
+      @blur="_onBlur"
+      class="uni-numbox__value"
+      type="number"
+      v-model="inputValue"
+      :style="{ color }"
+    />
+    <!-- <view @click="_calcValue('plus')" class="uni-numbox__plus uni-numbox-btns">
+			<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }">+</text>
+		</view> -->
+    <text
+      class="cicon-add-round"
+      :class="{
+        'uni-numbox--disabled': inputValue >= max || disabled,
+        'groupon-btn': activity === 'groupon',
+        'seckill-btn': activity === 'seckill',
+      }"
+      @click="_calcValue('plus')"
+    ></text>
+  </view>
+</template>
+<script>
+  /**
+   * NumberBox 数字输入框
+   * @description 带加减按钮的数字输入框
+   * @tutorial https://ext.dcloud.net.cn/plugin?id=31
+   * @property {Number} value 输入框当前值
+   * @property {Number} min 最小值
+   * @property {Number} max 最大值
+   * @property {Number} step 每次点击改变的间隔大小
+   * @property {String} background 背景色
+   * @property {String} color 字体颜色（前景色）
+   * @property {Boolean} disabled = [true|false] 是否为禁用状态
+   * @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value
+   * @event {Function} focus 输入框聚焦时触发的事件，参数为 event 对象
+   * @event {Function} blur 输入框失焦时触发的事件，参数为 event 对象
+   */
+
+  export default {
+    name: 'UniNumberBox',
+    emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'],
+    props: {
+      value: {
+        type: [Number, String],
+        default: 1,
+      },
+      modelValue: {
+        type: [Number, String],
+        default: 1,
+      },
+      min: {
+        type: Number,
+        default: 0,
+      },
+      max: {
+        type: Number,
+        default: 100,
+      },
+      step: {
+        type: Number,
+        default: 1,
+      },
+      background: {
+        type: String,
+        default: '#f5f5f5',
+      },
+      color: {
+        type: String,
+        default: '#333',
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      activity: {
+        type: String,
+        default: 'none',
+      },
+    },
+    data() {
+      return {
+        inputValue: 0,
+      };
+    },
+    watch: {
+      value(val) {
+        this.inputValue = +val;
+      },
+      modelValue(val) {
+        this.inputValue = +val;
+      },
+    },
+    created() {
+      if (this.value === 1) {
+        this.inputValue = +this.modelValue;
+      }
+      if (this.modelValue === 1) {
+        this.inputValue = +this.value;
+      }
+    },
+    methods: {
+      _calcValue(type) {
+        if (this.disabled) {
+          return;
+        }
+        const scale = this._getDecimalScale();
+        let value = this.inputValue * scale;
+        let step = this.step * scale;
+        if (type === 'minus') {
+          value -= step;
+          if (value < this.min * scale) {
+            return;
+          }
+          if (value > this.max * scale) {
+            value = this.max * scale;
+          }
+        }
+
+        if (type === 'plus') {
+          value += step;
+          if (value > this.max * scale) {
+            return;
+          }
+          if (value < this.min * scale) {
+            value = this.min * scale;
+          }
+        }
+
+        this.inputValue = (value / scale).toFixed(String(scale).length - 1);
+        this.$emit('change', +this.inputValue);
+        // TODO vue2 兼容
+        this.$emit('input', +this.inputValue);
+        // TODO vue3 兼容
+        this.$emit('update:modelValue', +this.inputValue);
+      },
+      _getDecimalScale() {
+        let scale = 1;
+        // 浮点型
+        if (~~this.step !== this.step) {
+          scale = Math.pow(10, String(this.step).split('.')[1].length);
+        }
+        return scale;
+      },
+      _onBlur(event) {
+        this.$emit('blur', event);
+        let value = event.detail.value;
+        if (!value) {
+          // this.inputValue = 0;
+          return;
+        }
+        value = +value;
+        if (value > this.max) {
+          value = this.max;
+        } else if (value < this.min) {
+          value = this.min;
+        }
+        const scale = this._getDecimalScale();
+        this.inputValue = value.toFixed(String(scale).length - 1);
+        this.$emit('change', +this.inputValue);
+        this.$emit('input', +this.inputValue);
+      },
+      _onFocus(event) {
+        this.$emit('focus', event);
+      },
+    },
+  };
+</script>
+<style lang="scss" scoped>
+  .uni-numbox .uni-numbox--disabled {
+    color: #c0c0c0 !important;
+    /* #ifdef H5 */
+    cursor: not-allowed;
+    /* #endif */
+  }
+
+  .uni-numbox {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    align-items: center;
+  }
+
+  .uni-numbox__value {
+    width: 74rpx;
+    text-align: center;
+    font-size: 30rpx;
+  }
+
+  .cicon-move-round {
+    font-size: 44rpx;
+    color: var(--ui-BG-Main);
+  }
+
+  .cicon-add-round {
+    font-size: 44rpx;
+    color: var(--ui-BG-Main);
+  }
+
+  .groupon-btn {
+    color: #ff6000;
+  }
+
+  .seckill-btn {
+    color: #ff5854;
+  }
+</style>
diff --git a/sheep/ui/su-popover/su-popover.vue b/sheep/ui/su-popover/su-popover.vue
new file mode 100644
index 0000000..adff127
--- /dev/null
+++ b/sheep/ui/su-popover/su-popover.vue
@@ -0,0 +1,314 @@
+<template>
+  <view class="ui-popover" :class="popover ? 'show' : 'hide'">
+    <view
+      class="ui-popover-button"
+      :class="[ui]"
+      :id="'popover-button-' + elId"
+      :style="{ zIndex: index + zIndexConfig.popover }"
+      @tap="popoverClick"
+      @mouseleave="mouseleave"
+      @mouseover="mouseover"
+    >
+      <slot></slot>
+    </view>
+    <view class="ui-popover-box" :style="BoxStyle">
+      <view class="ui-popover-content-box" :id="'popover-content-' + elId" :style="contentStyle">
+        <view
+          class="ui-popover-content radius text-a"
+          :class="bg"
+          :style="{ zIndex: index + zIndexConfig.popover + 2 }"
+        >
+          <view class="p-3 text-sm" v-if="tips">{{ tips }}</view>
+          <block v-else><slot name="content" /></block>
+        </view>
+        <view class="ui-popover-arrow" :class="bg" :style="arrowStyle"></view>
+      </view>
+    </view>
+    <view
+      class="ui-popover-mask"
+      :class="mask ? 'bg-mask-50' : ''"
+      :style="{ zIndex: index + zIndexConfig.popover - 1 }"
+      @tap="popover = false"
+      v-if="(popover && tips == '' && time == 0) || mask"
+    ></view>
+  </view>
+</template>
+
+<script>
+  import { guid } from '@/sheep/helper';
+  import zIndexConfig from '@/sheep/config/zIndex.js';
+  import sheep from '@/sheep';
+
+  export default {
+    name: 'suPopover',
+    data() {
+      return {
+        elId: guid(),
+        zIndexConfig,
+        popover: false,
+        BoxStyle: '',
+        contentStyle: '',
+        arrowStyle: '',
+        button: {},
+        content: {},
+      };
+    },
+    props: {
+      ui: {
+        type: String,
+        default: '',
+      },
+      tips: {
+        type: String,
+        default: '',
+      },
+      bg: {
+        type: String,
+        default: 'ui-BG',
+      },
+      mask: {
+        type: Boolean,
+        default: false,
+      },
+      show: {
+        type: [Boolean, String],
+        default: 'change',
+      },
+      hover: {
+        type: Boolean,
+        default: false,
+      },
+      index: {
+        type: Number,
+        default: 0,
+      },
+      time: {
+        type: Number,
+        default: 0,
+      },
+      bottom: {
+        type: Boolean,
+        default: false,
+      },
+      isChange: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    watch: {
+      popover(val) {
+        this._computedQuery(
+          sheep.$platform.device.windowWidth,
+          sheep.$platform.device.windowHeight,
+        );
+        if (val) {
+          if (this.tips != '' || this.time > 0) {
+            setTimeout(
+              () => {
+                this.popover = false;
+              },
+              this.time == 0 ? 3000 : this.time,
+            );
+          }
+          this.sys_layer = this.sys_layer + 100;
+        } else {
+          this.sys_layer = this.sys_layer - 100;
+        }
+        this.$emit('update:show', val);
+      },
+      show(val) {
+        this.popover = val;
+      },
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this._computedQuery(
+          sheep.$platform.device.windowWidth,
+          sheep.$platform.device.windowHeight,
+        );
+        // #ifdef H5
+        uni.onWindowResize((res) => {
+          this._computedQuery(res.size.windowWidth, res.size.windowHeight);
+        });
+        // #endif
+      });
+    },
+    methods: {
+      _onHide() {
+        this.popover = false;
+      },
+      _computedQuery(w, h) {
+        uni
+          .createSelectorQuery()
+          .in(this)
+          .select('#popover-button-' + this.elId)
+          .boundingClientRect((button) => {
+            if (button != null) {
+              this.button = button;
+            } else {
+              console.log('popover-button-' + this.elId + ' data error');
+            }
+          })
+          .select('#popover-content-' + this.elId)
+          .boundingClientRect((content) => {
+            if (content != null) {
+              this.content = content;
+              let button = this.button;
+              //contentStyle
+              let contentStyle = '';
+              let arrowStyle = '';
+              this.BoxStyle = `width:${w}px; left:-${button.left}px;z-index: ${
+                this.index + this.sys_layer + 102
+              }`;
+              // 判断气泡在上面还是下面
+              if (button.bottom < h / 2 || this.bottom) {
+                // '下';
+                contentStyle = contentStyle + `top:10px;`;
+                arrowStyle = arrowStyle + `top:${-5}px;`;
+              } else {
+                // '上';
+                contentStyle = contentStyle + `bottom:${button.height + 10}px;`;
+                arrowStyle = arrowStyle + `bottom:${-5}px;`;
+              }
+
+              // 判断气泡箭头在左中右
+              let btnCenter = button.right - button.width / 2;
+              let contentCenter = content.right - content.width / 2;
+              if (
+                (btnCenter < w / 3 && content.width > btnCenter) ||
+                (content.width > w / 2 && btnCenter < w / 2)
+              ) {
+                // '左';
+                contentStyle = contentStyle + `left:10px;`;
+                arrowStyle = arrowStyle + `left:${btnCenter - 17}px;`;
+              } else if (
+                (btnCenter > (w / 6) * 4 && content.width > w - btnCenter) ||
+                (content.width > w / 2 && btnCenter > w / 2)
+              ) {
+                // '右';
+                contentStyle = contentStyle + `right:10px;`;
+                arrowStyle = arrowStyle + `right:${w - btnCenter - 17}px;`;
+              } else {
+                // '中';
+                contentStyle =
+                  contentStyle + `left:${button.left - content.width / 2 + button.width / 2}px;`;
+                arrowStyle = arrowStyle + `left:0px;right:0px;margin:auto;`;
+              }
+
+              this.arrowStyle = arrowStyle + `z-index:${this.index + this.sys_layer + 1};`;
+              this.contentStyle = contentStyle + `z-index:${this.index + this.sys_layer + 2};`;
+            } else {
+              console.log('popover-content-' + this.elId + ' data error');
+            }
+          })
+          .exec();
+      },
+      popoverClick() {
+        if (this.isChange) {
+          return false;
+        }
+        if (this.tips == '') {
+          this.popover = !this.popover;
+        } else {
+          this.popover = true;
+        }
+      },
+      mouseover() {
+        if (this.hover && (this.tips != '' || this.content.height != 0)) {
+          this.popover = true;
+        }
+      },
+      mouseleave() {
+        if (this.hover) {
+          this.popover = false;
+        }
+      },
+    },
+  };
+</script>
+
+<style lang="scss">
+  .ui-popover {
+    position: relative;
+
+    .ui-popover-button {
+      position: relative;
+    }
+
+    .ui-popover-box {
+      position: absolute;
+
+      .ui-popover-content-box {
+        position: absolute;
+
+        .ui-popover-content {
+          position: relative;
+        }
+
+        .ui-popover-arrow {
+          position: absolute;
+          height: 15px;
+          width: 15px;
+          border-radius: 2px;
+          transform: rotate(45deg);
+        }
+
+        &::after {
+          content: '';
+          width: 100%;
+          height: 110%;
+          position: absolute;
+          background-color: #000000;
+          top: 5%;
+          left: 0;
+          filter: blur(15px);
+          opacity: 0.15;
+        }
+      }
+    }
+
+    .ui-popover-mask {
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+    }
+
+    &.show {
+      .ui-popover-button {
+      }
+
+      .ui-popover-content-box {
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      .ui-popover-arrow {
+        display: block;
+      }
+
+      .ui-popover-mask {
+        display: block;
+      }
+    }
+
+    &.hide {
+      .ui-popover-button {
+      }
+
+      .ui-popover-content-box {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .ui-popover-arrow {
+        display: none;
+      }
+
+      .ui-popover-mask {
+        display: none;
+      }
+    }
+  }
+</style>
diff --git a/sheep/ui/su-popup/keypress.js b/sheep/ui/su-popup/keypress.js
new file mode 100644
index 0000000..6141c4c
--- /dev/null
+++ b/sheep/ui/su-popup/keypress.js
@@ -0,0 +1,45 @@
+// #ifdef H5
+export default {
+  name: 'Keypress',
+  props: {
+    disable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  mounted() {
+    const keyNames = {
+      esc: ['Esc', 'Escape'],
+      tab: 'Tab',
+      enter: 'Enter',
+      space: [' ', 'Spacebar'],
+      up: ['Up', 'ArrowUp'],
+      left: ['Left', 'ArrowLeft'],
+      right: ['Right', 'ArrowRight'],
+      down: ['Down', 'ArrowDown'],
+      delete: ['Backspace', 'Delete', 'Del'],
+    };
+    const listener = ($event) => {
+      if (this.disable) {
+        return;
+      }
+      const keyName = Object.keys(keyNames).find((key) => {
+        const keyName = $event.key;
+        const value = keyNames[key];
+        return value === keyName || (Array.isArray(value) && value.includes(keyName));
+      });
+      if (keyName) {
+        // 避免和其他按键事件冲突
+        setTimeout(() => {
+          this.$emit(keyName, {});
+        }, 0);
+      }
+    };
+    document.addEventListener('keyup', listener);
+    // this.$once('hook:beforeDestroy', () => {
+    //   document.removeEventListener('keyup', listener)
+    // })
+  },
+  render: () => {},
+};
+// #endif
diff --git a/sheep/ui/su-popup/su-popup.vue b/sheep/ui/su-popup/su-popup.vue
new file mode 100644
index 0000000..b55b007
--- /dev/null
+++ b/sheep/ui/su-popup/su-popup.vue
@@ -0,0 +1,589 @@
+<template>
+  <view
+    v-if="showPopup"
+    class="uni-popup"
+    :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']"
+    :style="[{ zIndex: zIndex }]"
+    @touchmove.stop.prevent="clear"
+  >
+    <view @touchstart="touchstart">
+      <uni-transition
+        key="1"
+        v-if="maskShow"
+        name="mask"
+        mode-class="fade"
+        :styles="maskClass"
+        :duration="duration"
+        :show="showTrans"
+        @click="onTap"
+      />
+      <uni-transition
+        key="2"
+        :mode-class="ani"
+        name="content"
+        :styles="{ ...transClass, ...borderRadius }"
+        :duration="duration"
+        :show="showTrans"
+        @click="onTap"
+      >
+        <view
+          v-if="showPopup"
+          class="uni-popup__wrapper"
+          :style="[{ backgroundColor: bg }, borderRadius]"
+          :class="[popupstyle]"
+          @click="clear"
+        >
+          <uni-icons
+            v-if="showClose"
+            class="close-icon"
+            color="#F6F6F6"
+            type="closeempty"
+            size="32"
+            @click="close"
+          ></uni-icons>
+          <slot />
+        </view>
+      </uni-transition>
+    </view>
+    <!-- #ifdef H5 -->
+    <keypress v-if="maskShow" @esc="onTap" />
+    <!-- #endif -->
+  </view>
+  <!-- #ifdef MP -->
+  <view v-else style="display: none">
+    <slot></slot>
+  </view>
+  <!-- #endif -->
+</template>
+
+<script>
+  // #ifdef H5
+  import keypress from './keypress.js';
+  // #endif
+
+  /**
+   * PopUp 弹出层
+   * @description 弹出层组件，为了解决遮罩弹层的问题
+   * @tutorial https://ext.dcloud.net.cn/plugin?id=329
+   * @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
+   * 	@value top 顶部弹出
+   * 	@value center 中间弹出
+   * 	@value bottom 底部弹出
+   * 	@value left		左侧弹出
+   * 	@value right  右侧弹出
+   * 	@value message 消息提示
+   * 	@value dialog 对话框
+   * 	@value share 底部分享示例
+   * @property {Boolean} animation = [true|false] 是否开启动画
+   * @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃)
+   * @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
+   * @property {String}  backgroundColor 主窗口背景色
+   * @property {String}  maskBackgroundColor 蒙版颜色
+   * @property {Boolean} safeArea		   是否适配底部安全区
+   * @event {Function} change 打开关闭弹窗触发，e={show: false}
+   * @event {Function} maskClick 点击遮罩触发
+   */
+  import sheep from '@/sheep';
+
+  export default {
+    name: 'SuPopup',
+    components: {
+      // #ifdef H5
+      keypress,
+      // #endif
+    },
+    emits: ['change', 'maskClick', 'close'],
+    props: {
+      // 开启状态
+      show: {
+        type: Boolean,
+        default: false,
+      },
+      // 顶部，底部时有效
+      space: {
+        type: Number,
+        default: 0,
+      },
+      // 默认圆角
+      round: {
+        type: [String, Number],
+        default: 0,
+      },
+      // 是否显示关闭
+      showClose: {
+        type: Boolean,
+        default: false,
+      },
+      // 开启动画
+      animation: {
+        type: Boolean,
+        default: true,
+      },
+      // 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
+      // message: 消息提示 ; dialog : 对话框
+      type: {
+        type: String,
+        default: 'bottom',
+      },
+      // maskClick
+      isMaskClick: {
+        type: Boolean,
+        default: null,
+      },
+      // TODO 2 个版本后废弃属性 ，使用 isMaskClick
+      maskClick: {
+        type: Boolean,
+        default: null,
+      },
+      // 可设置none
+      backgroundColor: {
+        type: String,
+        default: '#ffffff',
+      },
+      backgroundImage: {
+        type: String,
+        default: '',
+      },
+      safeArea: {
+        type: Boolean,
+        default: true,
+      },
+      maskBackgroundColor: {
+        type: String,
+        default: 'rgba(0, 0, 0, 0.4)',
+      },
+      zIndex: {
+        type: [String, Number],
+        default: 10075,
+      },
+    },
+
+    watch: {
+      show: {
+        handler: function (newValue, oldValue) {
+          if (typeof oldValue === 'undefined' && !newValue) {
+            return;
+          }
+          if (newValue) {
+            this.open();
+          } else {
+            this.close();
+          }
+        },
+        immediate: true,
+      },
+      /**
+       * 监听type类型
+       */
+      type: {
+        handler: function (type) {
+          if (!this.config[type]) return;
+          this[this.config[type]](true);
+        },
+        immediate: true,
+      },
+      isDesktop: {
+        handler: function (newVal) {
+          if (!this.config[newVal]) return;
+          this[this.config[this.type]](true);
+        },
+        immediate: true,
+      },
+      /**
+       * 监听遮罩是否可点击
+       * @param {Object} val
+       */
+      maskClick: {
+        handler: function (val) {
+          this.mkclick = val;
+        },
+        immediate: true,
+      },
+      isMaskClick: {
+        handler: function (val) {
+          this.mkclick = val;
+        },
+        immediate: true,
+      },
+      // H5 下禁止底部滚动
+      showPopup(show) {
+        // #ifdef H5
+        // fix by mehaotian 处理 h5 滚动穿透的问题
+        document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible';
+        // #endif
+      },
+    },
+    data() {
+      return {
+        sheep,
+        duration: 300,
+        ani: [],
+        showPopup: false,
+        showTrans: false,
+        popupWidth: 0,
+        popupHeight: 0,
+        config: {
+          top: 'top',
+          bottom: 'bottom',
+          center: 'center',
+          left: 'left',
+          right: 'right',
+          message: 'top',
+          dialog: 'center',
+          share: 'bottom',
+        },
+        maskClass: {
+          position: 'fixed',
+          bottom: 0,
+          top: 0,
+          left: 0,
+          right: 0,
+          backgroundColor: 'rgba(0, 0, 0, 0.4)',
+        },
+        transClass: {
+          position: 'fixed',
+          left: 0,
+          right: 0,
+        },
+        maskShow: true,
+        mkclick: true,
+        popupstyle: this.isDesktop ? 'fixforpc-top' : 'top',
+      };
+    },
+    computed: {
+      isDesktop() {
+        return this.popupWidth >= 500 && this.popupHeight >= 500;
+      },
+      bg() {
+        if (this.backgroundColor === '' || this.backgroundColor === 'none') {
+          return 'transparent';
+        }
+        return this.backgroundColor;
+      },
+      borderRadius() {
+        if (this.round) {
+          if (this.type === 'bottom') {
+            return {
+              'border-top-left-radius': parseFloat(this.round) + 'px',
+              'border-top-right-radius': parseFloat(this.round) + 'px',
+            };
+          }
+          if (this.type === 'center') {
+            return {
+              'border-top-left-radius': parseFloat(this.round) + 'px',
+              'border-top-right-radius': parseFloat(this.round) + 'px',
+              'border-bottom-left-radius': parseFloat(this.round) + 'px',
+              'border-bottom-right-radius': parseFloat(this.round) + 'px',
+            };
+          }
+          if (this.type === 'top') {
+            return {
+              'border-bottom-left-radius': parseFloat(this.round) + 'px',
+              'border-bottom-right-radius': parseFloat(this.round) + 'px',
+            };
+          }
+        }
+      },
+    },
+    mounted() {
+      const fixSize = () => {
+        const { windowWidth, windowHeight, windowTop, safeArea, screenHeight, safeAreaInsets } =
+          sheep.$platform.device;
+        this.popupWidth = windowWidth;
+        this.popupHeight = windowHeight + (windowTop || 0);
+        // TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复
+        if (safeArea && this.safeArea) {
+          // #ifdef MP-WEIXIN
+          this.safeAreaInsets = screenHeight - safeArea.bottom;
+          // #endif
+          // #ifndef MP-WEIXIN
+          this.safeAreaInsets = safeAreaInsets.bottom;
+          // #endif
+        } else {
+          this.safeAreaInsets = 0;
+        }
+      };
+      fixSize();
+      // #ifdef H5
+      // window.addEventListener('resize', fixSize)
+      // this.$once('hook:beforeDestroy', () => {
+      // 	window.removeEventListener('resize', fixSize)
+      // })
+      // #endif
+    },
+    // #ifndef VUE3
+    // TODO vue2
+    destroyed() {
+      this.setH5Visible();
+    },
+    // #endif
+    // #ifdef VUE3
+    // TODO vue3
+    unmounted() {
+      this.setH5Visible();
+    },
+    // #endif
+    created() {
+      // this.mkclick =  this.isMaskClick || this.maskClick
+      if (this.isMaskClick === null && this.maskClick === null) {
+        this.mkclick = true;
+      } else {
+        this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick;
+      }
+      if (this.animation) {
+        this.duration = 300;
+      } else {
+        this.duration = 0;
+      }
+      // TODO 处理 message 组件生命周期异常的问题
+      this.messageChild = null;
+      // TODO 解决头条冒泡的问题
+      this.clearPropagation = false;
+      this.maskClass.backgroundColor = this.maskBackgroundColor;
+    },
+    methods: {
+      setH5Visible() {
+        // #ifdef H5
+        // fix by mehaotian 处理 h5 滚动穿透的问题
+        document.getElementsByTagName('body')[0].style.overflow = 'visible';
+        // #endif
+      },
+      /**
+       * 公用方法，不显示遮罩层
+       */
+      closeMask() {
+        this.maskShow = false;
+      },
+      /**
+       * 公用方法，遮罩层禁止点击
+       */
+      disableMask() {
+        this.mkclick = false;
+      },
+      // TODO nvue 取消冒泡
+      clear(e) {
+        // #ifndef APP-NVUE
+        e.stopPropagation();
+        // #endif
+        this.clearPropagation = true;
+      },
+
+      open(direction) {
+        // fix by mehaotian 处理快速打开关闭的情况
+        if (this.showPopup) {
+          clearTimeout(this.timer);
+          this.showPopup = false;
+        }
+        let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share'];
+        if (!(direction && innerType.indexOf(direction) !== -1)) {
+          direction = this.type;
+        }
+        if (!this.config[direction]) {
+          console.error('缺少类型：', direction);
+          return;
+        }
+        this[this.config[direction]]();
+        this.$emit('change', {
+          show: true,
+          type: direction,
+        });
+      },
+      close(type) {
+        this.showTrans = false;
+        this.$emit('change', {
+          show: false,
+          type: this.type,
+        });
+        this.$emit('close');
+        clearTimeout(this.timer);
+        // // 自定义关闭事件
+        // this.customOpen && this.customClose()
+        this.timer = setTimeout(() => {
+          this.showPopup = false;
+        }, 300);
+      },
+      // TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
+      touchstart() {
+        this.clearPropagation = false;
+      },
+
+      onTap() {
+        if (this.clearPropagation) {
+          // fix by mehaotian 兼容 nvue
+          this.clearPropagation = false;
+          return;
+        }
+        this.$emit('maskClick');
+        if (!this.mkclick) return;
+        this.close();
+      },
+      /**
+       * 顶部弹出样式处理
+       */
+      top(type) {
+        this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top';
+        this.ani = ['slide-top'];
+        this.transClass = {
+          position: 'fixed',
+          left: 0,
+          right: 0,
+          top: this.space + 'px',
+          backgroundColor: this.bg,
+        };
+        // TODO 兼容 type 属性 ，后续会废弃
+        if (type) return;
+        this.showPopup = true;
+        this.showTrans = true;
+        this.$nextTick(() => {
+          if (this.messageChild && this.type === 'message') {
+            this.messageChild.timerClose();
+          }
+        });
+      },
+      /**
+       * 底部弹出样式处理
+       */
+      bottom(type) {
+        this.popupstyle = 'bottom';
+        this.ani = ['slide-bottom'];
+        this.transClass = {
+          position: 'fixed',
+          left: 0,
+          right: 0,
+          bottom: 0,
+          paddingBottom: this.safeAreaInsets + this.space + 'px',
+          backgroundColor: this.bg,
+        };
+        // TODO 兼容 type 属性 ，后续会废弃
+        if (type) return;
+        this.showPopup = true;
+        this.showTrans = true;
+      },
+      /**
+       * 中间弹出样式处理
+       */
+      center(type) {
+        this.popupstyle = 'center';
+        this.ani = ['zoom-out', 'fade'];
+        this.transClass = {
+          position: 'fixed',
+          /* #ifndef APP-NVUE */
+          display: 'flex',
+          flexDirection: 'column',
+          /* #endif */
+          bottom: 0,
+          left: 0,
+          right: 0,
+          top: 0,
+          justifyContent: 'center',
+          alignItems: 'center',
+        };
+        // TODO 兼容 type 属性 ，后续会废弃
+        if (type) return;
+        this.showPopup = true;
+        this.showTrans = true;
+      },
+      left(type) {
+        this.popupstyle = 'left';
+        this.ani = ['slide-left'];
+        this.transClass = {
+          position: 'fixed',
+          left: 0,
+          bottom: 0,
+          top: 0,
+          backgroundColor: this.bg,
+          /* #ifndef APP-NVUE */
+          display: 'flex',
+          flexDirection: 'column',
+          /* #endif */
+        };
+        // TODO 兼容 type 属性 ，后续会废弃
+        if (type) return;
+        this.showPopup = true;
+        this.showTrans = true;
+      },
+      right(type) {
+        this.popupstyle = 'right';
+        this.ani = ['slide-right'];
+        this.transClass = {
+          position: 'fixed',
+          bottom: 0,
+          right: 0,
+          top: 0,
+          backgroundColor: this.bg,
+          /* #ifndef APP-NVUE */
+          display: 'flex',
+          flexDirection: 'column',
+          /* #endif */
+        };
+        // TODO 兼容 type 属性 ，后续会废弃
+        if (type) return;
+        this.showPopup = true;
+        this.showTrans = true;
+      },
+    },
+  };
+</script>
+<style lang="scss">
+  // 关闭icon
+  .close-icon {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: -80rpx;
+    z-index: 100;
+  }
+
+  .uni-popup {
+    position: fixed;
+    /* #ifndef APP-NVUE */
+    z-index: 99;
+
+    /* #endif */
+    &.top,
+    &.left,
+    &.right {
+      /* #ifdef H5 */
+      top: var(--window-top);
+      /* #endif */
+      /* #ifndef H5 */
+      top: 0;
+      /* #endif */
+    }
+
+    .uni-popup__wrapper {
+      /* #ifndef APP-NVUE */
+      display: block;
+      /* #endif */
+      position: relative;
+      background: v-bind(backgroundImage) no-repeat;
+      background-size: 100% 100%;
+
+      /* iphonex 等安全区设置，底部安全区适配 */
+      /* #ifndef APP-NVUE */
+      // padding-bottom: constant(safe-area-inset-bottom);
+      // padding-bottom: env(safe-area-inset-bottom);
+      /* #endif */
+      &.left,
+      &.right {
+        /* #ifdef H5 */
+        padding-top: var(--window-top);
+        /* #endif */
+        /* #ifndef H5 */
+        padding-top: 0;
+        /* #endif */
+        flex: 1;
+      }
+    }
+  }
+
+  .fixforpc-z-index {
+    /* #ifndef APP-NVUE */
+    z-index: 999;
+    /* #endif */
+  }
+
+  .fixforpc-top {
+    top: 0;
+  }
+</style>
diff --git a/sheep/ui/su-progress/su-progress.vue b/sheep/ui/su-progress/su-progress.vue
new file mode 100644
index 0000000..4612705
--- /dev/null
+++ b/sheep/ui/su-progress/su-progress.vue
@@ -0,0 +1,203 @@
+<template>
+  <view>
+    <view class="flex a-center content" v-if="lineData">
+      <view>
+        <slot name="content"></slot>
+      </view>
+    </view>
+    <view class="flex a-center" style="padding-right: 10rpx">
+      <view
+        class="progress-container"
+        id="container"
+        ref="progressContainer"
+        :style="{ background: inBgColor }"
+      >
+        <view
+          class="progress-content flex j-end"
+          id="content"
+          ref="progressContent"
+          :style="{
+            height: strokeWidth + 'px',
+            background: bgColor,
+            width: contentWidth,
+            transition: `width ${duration / 1000}s ease`,
+          }"
+          v-if="isAnimate"
+        >
+          <view class="textInside flex a-center j-center" v-if="textInside && !noData">
+            <view class="text">{{ percentage }}%</view>
+          </view>
+        </view>
+        <view
+          v-if="!isAnimate"
+          class="progress-content flex j-end"
+          :style="{ width: percentage + '%', height: strokeWidth + 'px', background: bgColor }"
+        >
+          <view class="textInside flex a-center j-center" v-if="textInside && !noData">
+            <view class="text">{{ percentage }}%</view>
+          </view>
+        </view>
+      </view>
+      <view>
+        <view class="percentage" v-if="!textInside && !lineData && !noData && !isAnimate"
+          >{{ percentage }}%
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'AiProgress',
+    components: {},
+    props: {
+      // 进度条的值
+      percentage: {
+        type: [Number, String],
+        required: true,
+      },
+      // 是否内联显示数据
+      textInside: {
+        type: Boolean,
+        default: false,
+      },
+      // 进度条高度
+      strokeWidth: {
+        type: [Number, String],
+        default: 6,
+      },
+      // 默认动画时长
+      duration: {
+        type: [Number, String],
+        default: 2000,
+      },
+      // 是否有动画
+      isAnimate: {
+        type: Boolean,
+        default: false,
+      },
+      // 背景颜色
+      bgColor: {
+        type: String,
+        default: 'linear-gradient(90deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%)',
+      },
+      // 是否不显示数据
+      noData: {
+        type: Boolean,
+        default: false,
+      },
+      // 是否自定义显示内容
+      lineData: {
+        type: Boolean,
+        default: false,
+      },
+      // 自定义底色
+      inBgColor: {
+        type: String,
+        default: '#ebeef5',
+      },
+    },
+    data() {
+      return {
+        width: 0,
+        timer: null,
+        containerWidth: 0,
+        contentWidth: 0,
+      };
+    },
+    methods: {
+      start() {
+        if (this.isAnimate) {
+          // #ifdef H5
+          this.$nextTick(() => {
+            let progressContainer = this.$refs.progressContainer.$el;
+            let progressContent = this.$refs.progressContent.$el;
+            let style = window.getComputedStyle(progressContainer, null);
+            let width = style.width.replace('px', '') * ((this.percentage * 1) / 100);
+            progressContent.style.width = width.toFixed(2) + 'px';
+            progressContent.style.transition = `width ${this.duration / 1000}s ease`;
+          });
+          // #endif
+          const container = uni.createSelectorQuery().in(this).selectAll('#container');
+          const content = uni.createSelectorQuery().in(this).selectAll('#content');
+          container.boundingClientRect().exec((res1) => {
+            this.contentWidth =
+              res1[0][0].width * 1 * ((this.percentage * 1) / 100).toFixed(2) + 'px';
+          });
+        }
+      },
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.start();
+      });
+    },
+    created() {},
+    filters: {},
+    computed: {},
+    watch: {},
+    directives: {},
+  };
+</script>
+
+<style scoped lang="scss">
+  .content {
+    margin-bottom: 10px;
+
+    .c-per {
+      font-size: 26px;
+    }
+  }
+
+  .progress-container {
+    width: 100%;
+    border-radius: 100px;
+
+    .progress-content {
+      border-radius: 100px;
+      width: 0;
+    }
+
+    .textInside {
+      color: #fff;
+      margin-right: 10rpx;
+      position: relative;
+    }
+  }
+
+  .text {
+    margin-left: 10rpx;
+    font-size: 16rpx;
+    width: 100rpx;
+    color: #FFB9B9;
+  }
+
+  .percentage {
+    margin-left: 6px;
+    font-size: 12px;
+    width: 30px;
+  }
+
+  .flex {
+    display: flex;
+  }
+
+  .a-center {
+    align-items: center;
+  }
+
+  .j-center {
+    justify-content: center;
+  }
+
+  .j-between {
+    justify-content: space-between;
+  }
+
+  .content {
+    margin-bottom: 10px;
+    color: #666;
+    font-size: 32rpx;
+  }
+</style>
diff --git a/sheep/ui/su-radio/su-radio.vue b/sheep/ui/su-radio/su-radio.vue
new file mode 100644
index 0000000..6fc4f74
--- /dev/null
+++ b/sheep/ui/su-radio/su-radio.vue
@@ -0,0 +1,301 @@
+<template>
+  <view
+    class="ui-radio ss-flex ss-col-center"
+    @tap="onRaido"
+    :class="[{ disabled: disabled }, { img: src }, ui]"
+    :style="[customStyle]"
+  >
+    <slot name="leftLabel"></slot>
+    <view
+      v-if="!none"
+      class="ui-radio-input"
+      :class="[isChecked ? 'cur ' + bg : unbg, src ? 'radius' : 'round']"
+    ></view>
+    <image class="ui-radio-img radius" v-if="src" :src="src" mode="aspectFill"></image>
+    <view class="ui-radio-content" v-else>
+      <slot>
+        <view class="ui-label-text" :style="[labelStyle]">{{ label }}</view>
+      </slot>
+    </view>
+    <view
+      v-if="ui.includes('card')"
+      class="ui-radio-bg round"
+      :class="[isChecked ? 'cur ' + bg : '']"
+    ></view>
+  </view>
+</template>
+
+<script setup>
+  /**
+   * 单选 - radio
+   *
+   *
+   * property {Object} customStyle 												- 自定义样式
+   * property {String} ui 														- radio样式Class
+   * property {String} modelValue													- 绑定值
+   * property {Boolean} disabled													- 是否禁用
+   * property {String} bg															- 选中时背景Class
+   * property {String} unbg														- 未选中时背景Class
+   * property {String} src														- 图片选中radio
+   * property {String} label														- label文本
+   * property {Boolean} none														- 是否隐藏raido按钮
+   *
+   * @slot default																- 自定义label样式
+   * @event {Function} change														- change事件
+   *
+   */
+  import { computed, reactive, watchPostEffect, getCurrentInstance } from 'vue';
+  const vm = getCurrentInstance();
+
+  // 组件数据
+  const state = reactive({
+    currentValue: false,
+  });
+
+  // 定义事件
+  const emits = defineEmits(['change', 'update:modelValue']);
+
+  // 接收参数
+  const props = defineProps({
+    customStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    ui: {
+      type: String,
+      default: 'check', //check line
+    },
+    modelValue: {
+      type: [String, Number, Boolean],
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    bg: {
+      type: String,
+      default: 'ui-BG-Main',
+    },
+    unbg: {
+      type: String,
+      default: 'borderss',
+    },
+    src: {
+      type: String,
+      default: '',
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    labelStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    none: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  watchPostEffect(() => {
+    state.currentValue = props.modelValue;
+    emits('update:modelValue', state.currentValue);
+  });
+
+  // 是否选中
+  const isChecked = computed(() => state.currentValue);
+
+  // 点击
+  const onRaido = () => {
+    if (props.disabled) return;
+    state.currentValue = !state.currentValue;
+    emits('update:modelValue', state.currentValue);
+    emits('change', {
+      label: props.label,
+      value: state.currentValue,
+    });
+  };
+</script>
+
+<style lang="scss" scoped>
+  .ui-radio {
+    display: flex;
+    align-items: center;
+    margin: 0 0.5em 0 0;
+    height: 18px;
+    .ui-radio-input {
+      margin: 0 0.5em 0 0;
+      display: inline-block;
+      width: 18px;
+      height: 18px;
+      vertical-align: middle;
+      line-height: 18px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        background-color: currentColor;
+        border-radius: 18px;
+        @include position-center;
+      }
+    }
+
+    .ui-radio-input.cur {
+      position: relative;
+
+      &::before {
+        width: 10px;
+        height: 10px;
+        transition: $transition-base;
+      }
+    }
+
+    &:last-child {
+      margin: 0 0.14286em;
+    }
+
+    &.check {
+      .ui-radio-input {
+        &::before {
+          font-family: 'colorui';
+          content: '\e69f';
+          width: 18px;
+          height: 18px;
+          font-size: 0;
+          background-color: transparent;
+        }
+      }
+
+      .ui-radio-input.cur {
+        &::before {
+          width: 18px;
+          height: 18px;
+          font-size: 1em;
+          transform: scale(0.8);
+          text-align: center;
+          line-height: 18px;
+        }
+      }
+    }
+
+    &.line {
+      .ui-radio-input.cur {
+        &::before {
+          width: calc(100% - 2px);
+          height: calc(100% - 2px);
+          background-color: var(--ui-BG);
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          width: 10px;
+          height: 10px;
+          background-color: inherit;
+          border-radius: 50%;
+          @include position-center;
+        }
+      }
+    }
+
+    &.lg {
+      .ui-radio-input {
+        font-size: 18px;
+      }
+    }
+
+    &.img {
+      position: relative;
+      margin: 0 0.28572em 0;
+
+      .ui-radio-input {
+        width: 42px;
+        height: 42px;
+        border-radius: 0px;
+        position: absolute;
+        margin: 0;
+        left: -1px;
+        top: -1px;
+
+        &::before {
+          width: 40px;
+          height: 40px;
+          border-radius: $radius;
+        }
+
+        &.cur {
+          width: 44px;
+          height: 44px;
+          top: -2px;
+          left: -2px;
+          border-radius: 7px !important;
+          opacity: 0.8;
+        }
+      }
+
+      .ui-radio-img {
+        width: 40px;
+        height: 40px;
+        display: block;
+        overflow: hidden;
+        border-radius: 10px;
+      }
+    }
+
+    &.card {
+      display: flex;
+      margin: 30rpx;
+      padding: 30rpx;
+      position: relative;
+      border-radius: $radius !important;
+      flex-direction: row-reverse;
+      justify-content: space-between;
+
+      .ui-radio-bg {
+        content: '';
+        position: absolute;
+        width: 200%;
+        height: 200%;
+        transform: scale(0.5);
+        border-radius: #{$radius * 2} !important;
+        z-index: 0;
+        left: 0;
+        top: 0;
+        transform-origin: 0 0;
+        background-color: var(--ui-BG);
+      }
+
+      .ui-radio-input {
+        position: relative;
+        z-index: 1;
+        margin-right: 0;
+      }
+
+      .ui-radio-bg::after {
+        content: '';
+        position: absolute;
+        width: calc(200% - 16px);
+        height: calc(200% - 16px);
+        transform: scale(0.5);
+        transform-origin: 0 0;
+        background-color: var(--ui-BG) !important;
+        left: 4px;
+        top: 4px;
+        border-radius: #{$radius * 2 + 8} !important;
+        z-index: 0;
+      }
+
+      .ui-radio-content {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        flex: 1;
+      }
+    }
+  }
+</style>
diff --git a/sheep/ui/su-region-picker/su-region-picker.vue b/sheep/ui/su-region-picker/su-region-picker.vue
new file mode 100644
index 0000000..958fd11
--- /dev/null
+++ b/sheep/ui/su-region-picker/su-region-picker.vue
@@ -0,0 +1,247 @@
+<!-- 省市区选择弹窗 -->
+<template>
+  <su-popup :show="show" @close="onCancel" round="20">
+    <view class="ui-region-picker">
+      <su-toolbar
+        :cancelColor="cancelColor"
+        :confirmColor="confirmColor"
+        :cancelText="cancelText"
+        :confirmText="confirmText"
+        title="选择区域"
+        @cancel="onCancel"
+        @confirm="onConfirm('confirm')"
+      />
+      <view class="ui-picker-body">
+        <picker-view
+          :value="state.currentIndex"
+          @change="change"
+          class="ui-picker-view"
+          @pickstart="pickstart"
+          @pickend="pickend"
+        >
+          <picker-view-column>
+            <view class="ui-column-item" v-for="province in provinceList" :key="province.id">
+              <view :style="getSizeByNameLength(province.name)">{{ province.name }}</view>
+            </view>
+          </picker-view-column>
+          <picker-view-column>
+            <view class="ui-column-item" v-for="city in cityList" :key="city.id">
+              <view :style="getSizeByNameLength(city.name)">{{ city.name }}</view>
+            </view>
+          </picker-view-column>
+          <picker-view-column>
+            <view class="ui-column-item" v-for="district in districtList" :key="district.id">
+              <view :style="getSizeByNameLength(district.name)">{{ district.name }}</view>
+            </view>
+          </picker-view-column>
+        </picker-view>
+      </view>
+    </view>
+  </su-popup>
+</template>
+
+<script setup>
+  /**
+   * picker picker弹出选择器
+   * @property {Object} params 需要显示的参
+   * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
+   * @property {Boolean} show-time-tag 时间模式时，是否显示后面的年月日中文提示
+   * @property {String} cancel-color 取消按钮的颜色
+   * @property {String} confirm-color 确认按钮的颜色
+   * @property {String} confirm-text 确认按钮的文字
+   * @property {String} cancel-text 取消按钮的文字
+   * @property {String} default-region 默认选中的地区，
+   * @property {String} default-code 默认选中的地区
+   * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
+   * @property {String Number} z-index 弹出时的z-index值（默认1075）
+   * @property {Array} default-selector 数组形式，其中每一项表示选择了range对应项中的第几个
+   * @property {String} range-key 当range参数的元素为对象时，指定Object中的哪个key的值作为选择器显示内容
+   * @event {Function} confirm 点击确定按钮，返回当前选择的值
+   * @event {Function} cancel 点击取消按钮，返回当前选择的值
+   */
+  import { computed, reactive } from 'vue';
+  const props = defineProps({
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    // "取消"按钮的颜色
+    cancelColor: {
+      type: String,
+      default: '#6666',
+    },
+    // "确定"按钮的颜色
+    confirmColor: {
+      type: String,
+      default: 'var(--ui-BG-Main)',
+    },
+    // 取消按钮的文字
+    cancelText: {
+      type: String,
+      default: '取消',
+    },
+    // 确认按钮的文字
+    confirmText: {
+      type: String,
+      default: '确认',
+    },
+  });
+  const areaData = uni.getStorageSync('areaData');
+
+  const getSizeByNameLength = (name) => {
+    let length = name.length;
+    if (length <= 7) return '';
+    if (length < 9) {
+      return 'font-size:28rpx';
+    } else {
+      return 'font-size: 24rpx';
+    }
+  };
+  const state = reactive({
+    currentIndex: [0, 0, 0],
+    moving: false, // 列是否还在滑动中，微信小程序如果在滑动中就点确定，结果可能不准确
+  });
+  const emits = defineEmits(['confirm', 'cancel', 'change']);
+
+  const provinceList = areaData;
+
+  const cityList = computed(() => {
+    return areaData[state.currentIndex[0]].children;
+  });
+  const districtList = computed(() => {
+    return cityList.value[state.currentIndex[1]]?.children;
+  });
+  // 标识滑动开始，只有微信小程序才有这样的事件
+  const pickstart = () => {
+    // #ifdef MP-WEIXIN
+    state.moving = true;
+    // #endif
+  };
+
+  // 标识滑动结束
+  const pickend = () => {
+    // #ifdef MP-WEIXIN
+    state.moving = false;
+    // #endif
+  };
+  const init = () => {};
+
+  const onCancel = () => {
+    emits('cancel');
+  };
+
+  // 用户更改picker的列选项
+  const change = (e) => {
+    if (
+      state.currentIndex[0] === e.detail.value[0] &&
+      state.currentIndex[1] === e.detail.value[1]
+    ) {
+      // 不更改省市区列表
+      state.currentIndex[2] = e.detail.value[2];
+      return;
+    } else {
+      // 更改省市区列表
+      if (state.currentIndex[0] !== e.detail.value[0]) {
+        e.detail.value[1] = 0;
+      }
+      e.detail.value[2] = 0;
+      state.currentIndex = e.detail.value;
+    }
+    emits('change', state.currentIndex);
+  };
+
+  // 用户点击确定按钮
+  const onConfirm = (event = null) => {
+    // #ifdef MP-WEIXIN
+    if (state.moving) return;
+    // #endif
+    let index = state.currentIndex;
+    let province = provinceList[index[0]];
+    let city = cityList.value[index[1]];
+    let district = districtList.value[index[2]];
+    let result = {
+      province_name: province.name,
+      province_id: province.id,
+      city_name: city.name,
+      city_id: city.id,
+      district_name: district.name,
+      district_id: district.id,
+    };
+
+    if (event) emits(event, result);
+  };
+</script>
+
+<style lang="scss" scoped>
+  .ui-region-picker {
+    position: relative;
+    z-index: 999;
+  }
+
+  .ui-picker-view {
+    height: 100%;
+    box-sizing: border-box;
+  }
+  .ui-picker-header {
+    width: 100%;
+    height: 90rpx;
+    padding: 0 40rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    font-size: 30rpx;
+    background: #fff;
+    position: relative;
+  }
+
+  .ui-picker-header::after {
+    content: '';
+    position: absolute;
+    border-bottom: 1rpx solid #eaeef1;
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+    bottom: 0;
+    right: 0;
+    left: 0;
+  }
+
+  .ui-picker__title {
+    color: #333;
+  }
+
+  .ui-picker-body {
+    width: 100%;
+    height: 500rpx;
+    overflow: hidden;
+    background-color: #fff;
+  }
+
+  .ui-column-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32rpx;
+    color: #333;
+    padding: 0 8rpx;
+  }
+
+  .ui-btn-picker {
+    padding: 16rpx;
+    box-sizing: border-box;
+    text-align: center;
+    text-decoration: none;
+  }
+
+  .ui-opacity {
+    opacity: 0.5;
+  }
+
+  .ui-btn-picker--primary {
+    color: blue;
+  }
+
+  .ui-btn-picker--tips {
+    color: red;
+  }
+</style>
diff --git a/sheep/ui/su-status-bar/su-status-bar.vue b/sheep/ui/su-status-bar/su-status-bar.vue
new file mode 100644
index 0000000..9af07f9
--- /dev/null
+++ b/sheep/ui/su-status-bar/su-status-bar.vue
@@ -0,0 +1,16 @@
+<!-- 自定义状态栏 -->
+<template>
+  <view :style="{ height: statusBarHeight }" class="uni-status-bar"><slot /></view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+
+  const statusBarHeight = sheep.$platform.device.statusBarHeight + 'px';
+</script>
+<style lang="scss">
+  .uni-status-bar {
+    // width: 750rpx;
+    height: var(--status-bar-height);
+  }
+</style>
diff --git a/sheep/ui/su-sticky/su-sticky.vue b/sheep/ui/su-sticky/su-sticky.vue
new file mode 100644
index 0000000..a8831a2
--- /dev/null
+++ b/sheep/ui/su-sticky/su-sticky.vue
@@ -0,0 +1,264 @@
+<template>
+  <view class="u-sticky" :id="elId" :style="[style]">
+    <view :style="[stickyContent]" class="u-sticky__content"><slot /></view>
+  </view>
+</template>
+
+<script>
+  import { deepMerge, addStyle, addUnit, sleep, guid, getPx, os, sys } from '@/sheep/helper';
+  import sheep from '@/sheep';
+  /**
+   * sticky 吸顶
+   * @description 该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。
+   * @property {String ｜ Number}	offsetTop		吸顶时与顶部的距离，单位px（默认 0 ）
+   * @property {String ｜ Number}	customNavHeight	自定义导航栏的高度 （h5 默认44  其他默认 0 ）
+   * @property {Boolean}			stickyToTop		是否开启吸顶功能 （默认 false ）
+   * @property {String}			bgColor			组件背景颜色（默认 '#ffffff' ）
+   * @property {String ｜ Number}	zIndex			吸顶时的z-index值
+   * @property {String ｜ Number}	index			自定义标识，用于区分是哪一个组件
+   * @property {Object}			customStyle		组件的样式，对象形式
+   * @event {Function} fixed		组件吸顶时触发
+   * @event {Function} unfixed	组件取消吸顶时触发
+   * @example <u-sticky offsetTop="200"><view>塞下秋来风景异，衡阳雁去无留意</view></u-sticky>
+   */
+  export default {
+    name: 'su-sticky',
+    props: {
+      // 吸顶容器到顶部某个距离的时候，进行吸顶，在H5平台，NavigationBar为44px
+      offsetTop: {
+        type: [String, Number],
+        default: 0,
+      },
+      // 自定义导航栏的高度
+      customNavHeight: {
+        type: [String, Number],
+        // #ifdef H5
+        // H5端的导航栏属于“自定义”导航栏的范畴，因为它是非原生的，与普通元素一致
+        default: 44,
+        // #endif
+        // #ifndef H5
+        default: sheep.$platform.navbar,
+        // #endif
+      },
+      // 是否开启吸顶功能
+      stickyToTop: {
+        type: Boolean,
+        default: false,
+      },
+      // 吸顶区域的背景颜色
+      bgColor: {
+        type: String,
+        default: 'transparent',
+      },
+      // z-index值
+      zIndex: {
+        type: [String, Number],
+        default: '',
+      },
+      // 列表中的索引值
+      index: {
+        type: [String, Number],
+        default: '',
+      },
+      customStyle: {
+        type: [Object, String],
+        default: () => ({}),
+      },
+    },
+    data() {
+      return {
+        cssSticky: false, // 是否使用css的sticky实现
+        stickyTop: 0, // 吸顶的top值，因为可能受自定义导航栏影响，最终的吸顶值非offsetTop值
+        elId: guid(),
+        left: 0, // js模式时，吸顶的内容因为处于postition: fixed模式，为了和原来保持一致的样式，需要记录并重新设置它的left，height，width属性
+        width: 'auto',
+        height: 'auto',
+        fixed: false, // js模式时，是否处于吸顶模式
+      };
+    },
+    computed: {
+      style() {
+        const style = {};
+        if (!this.stickyToTop) {
+          if (this.cssSticky) {
+            style.position = 'sticky';
+            style.zIndex = this.uZindex;
+            style.top = addUnit(this.stickyTop);
+          } else {
+            style.height = this.fixed ? this.height + 'px' : 'auto';
+          }
+        } else {
+          // 无需吸顶时，设置会默认的relative(nvue)和非nvue的static静态模式即可
+          // #ifdef APP-NVUE
+          style.position = 'relative';
+          // #endif
+          // #ifndef APP-NVUE
+          style.position = 'static';
+          // #endif
+        }
+        style.backgroundColor = this.bgColor;
+        return deepMerge(addStyle(this.customStyle), style);
+      },
+      // 吸顶内容的样式
+      stickyContent() {
+        const style = {};
+        if (!this.cssSticky) {
+          style.position = this.fixed ? 'fixed' : 'static';
+          style.top = this.stickyTop + 'px';
+          style.left = this.left + 'px';
+          style.width = this.width == 'auto' ? 'auto' : this.width + 'px';
+          style.zIndex = this.uZindex;
+        }
+        return style;
+      },
+      uZindex() {
+        return this.zIndex ? this.zIndex : 970;
+      },
+    },
+    mounted() {
+      this.init();
+    },
+    methods: {
+      init() {
+        this.getStickyTop();
+        // 判断使用的模式
+        this.checkSupportCssSticky();
+        // 如果不支持css sticky，则使用js方案，此方案性能比不上css方案
+        if (!this.cssSticky) {
+          !this.stickyToTop && this.initObserveContent();
+        }
+      },
+      $uGetRect(selector, all) {
+        return new Promise((resolve) => {
+          uni.createSelectorQuery()
+            .in(this)
+            [all ? 'selectAll' : 'select'](selector)
+            .boundingClientRect((rect) => {
+              if (all && Array.isArray(rect) && rect.length) {
+                resolve(rect);
+              }
+              if (!all && rect) {
+                resolve(rect);
+              }
+            })
+            .exec();
+        });
+      },
+      initObserveContent() {
+        // 获取吸顶内容的高度，用于在js吸顶模式时，给父元素一个填充高度，防止"塌陷"
+        this.$uGetRect('#' + this.elId).then((res) => {
+          this.height = res.height;
+          this.left = res.left;
+          this.width = res.width;
+          this.$nextTick(() => {
+            this.observeContent();
+          });
+        });
+      },
+      observeContent() {
+        // 先断掉之前的观察
+        this.disconnectObserver('contentObserver');
+        const contentObserver = uni.createIntersectionObserver({
+          // 检测的区间范围
+          thresholds: [0.95, 0.98, 1],
+        });
+        // 到屏幕顶部的高度时触发
+        contentObserver.relativeToViewport({
+          top: -this.stickyTop,
+        });
+        // 绑定观察的元素
+        contentObserver.observe(`#${this.elId}`, (res) => {
+          this.setFixed(res.boundingClientRect.top);
+        });
+        this.contentObserver = contentObserver;
+      },
+      setFixed(top) {
+        // 判断是否出于吸顶条件范围
+        const fixed = top <= this.stickyTop;
+        this.fixed = fixed;
+      },
+      disconnectObserver(observerName) {
+        // 断掉观察，释放资源
+        const observer = this[observerName];
+        observer && observer.disconnect();
+      },
+      getStickyTop() {
+        this.stickyTop = getPx(this.offsetTop) + getPx(this.customNavHeight);
+      },
+      async checkSupportCssSticky() {
+        // #ifdef H5
+        // H5，一般都是现代浏览器，是支持css sticky的，这里使用创建元素嗅探的形式判断
+        if (this.checkCssStickyForH5()) {
+          this.cssSticky = true;
+        }
+        // #endif
+
+        // 如果安卓版本高于8.0，依然认为是支持css sticky的(因为安卓7在某些机型，可能不支持sticky)
+        if (os() === 'android' && Number(sys().system) > 8) {
+          this.cssSticky = true;
+        }
+
+        // APP-Vue和微信平台，通过computedStyle判断是否支持css sticky
+        // #ifdef APP-VUE || MP-WEIXIN
+        this.cssSticky = await this.checkComputedStyle();
+        // #endif
+
+        // ios上，从ios6开始，都是支持css sticky的
+        if (os() === 'ios') {
+          this.cssSticky = true;
+        }
+
+        // nvue，是支持css sticky的
+        // #ifdef APP-NVUE
+        this.cssSticky = true;
+        // #endif
+      },
+      // 在APP和微信小程序上，通过uni.createSelectorQuery可以判断是否支持css sticky
+      checkComputedStyle() {
+        // 方法内进行判断，避免在其他平台生成无用代码
+        // #ifdef APP-VUE || MP-WEIXIN
+        return new Promise((resolve) => {
+          uni.createSelectorQuery()
+            .in(this)
+            .select('.u-sticky')
+            .fields({
+              computedStyle: ['position'],
+            })
+            .exec((e) => {
+              resolve('sticky' === e[0].position);
+            });
+        });
+        // #endif
+      },
+      // H5通过创建元素的形式嗅探是否支持css sticky
+      // 判断浏览器是否支持sticky属性
+      checkCssStickyForH5() {
+        // 方法内进行判断，避免在其他平台生成无用代码
+        // #ifdef H5
+        const vendorList = ['', '-webkit-', '-ms-', '-moz-', '-o-'],
+          vendorListLength = vendorList.length,
+          stickyElement = document.createElement('div');
+        for (let i = 0; i < vendorListLength; i++) {
+          stickyElement.style.position = vendorList[i] + 'sticky';
+          if (stickyElement.style.position !== '') {
+            return true;
+          }
+        }
+        return false;
+        // #endif
+      },
+    },
+    beforeDestroy() {
+      this.disconnectObserver('contentObserver');
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .u-sticky {
+    /* #ifdef APP-VUE || MP-WEIXIN */
+    // 此处默认写sticky属性，是为了给微信和APP通过uni.createSelectorQuery查询是否支持css sticky使用
+    position: sticky;
+    /* #endif */
+  }
+</style>
diff --git a/sheep/ui/su-subline/su-subline.vue b/sheep/ui/su-subline/su-subline.vue
new file mode 100644
index 0000000..c11d176
--- /dev/null
+++ b/sheep/ui/su-subline/su-subline.vue
@@ -0,0 +1,62 @@
+<template>
+  <view class="wrap" :style="{height: `${height}px`}">
+    <view class="divider" :style="[elStyle]"></view>
+  </view>
+</template>
+
+<script setup>
+  /**
+   * 分割线
+   */
+
+  import { computed } from 'vue';
+
+  // 接收参数
+  const props = defineProps({
+    // 线条颜色
+    lineColor: {
+      type: String,
+      default: '#000',
+    },
+    // 线条样式：'dotted', 'solid', 'double', 'dashed'
+    borderType: {
+      type: String,
+      default: 'dashed',
+    },
+    // 线条宽度
+    lineWidth: {
+      type: Number,
+      default: 1,
+    },
+    // 高度
+    height: {
+      type: [Number, String],
+      default: 'auto'
+    },
+    // 左右边距：none - 无边距，horizontal - 左右留边
+    paddingType: {
+      type: String,
+      default: 'none'
+    }
+  });
+
+  const elStyle = computed(() => {
+    return {
+      'border-top-width': `${props.lineWidth}px`,
+      'border-top-color': props.lineColor,
+      'border-top-style': props.borderType,
+      margin: props.paddingType === 'none' ? '0' : '0px 16px'
+    };
+  });
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+  display: flex;
+  align-items: center;
+
+  .divider {
+    width: 100%;
+  }
+}
+</style>
diff --git a/sheep/ui/su-swiper/su-swiper.vue b/sheep/ui/su-swiper/su-swiper.vue
new file mode 100644
index 0000000..cff1c4b
--- /dev/null
+++ b/sheep/ui/su-swiper/su-swiper.vue
@@ -0,0 +1,502 @@
+<template>
+  <view>
+    <view class="ui-swiper" :class="[props.mode, props.bg, props.ui]">
+      <swiper
+        :circular="props.circular"
+        :current="state.cur"
+        :autoplay="props.autoplay && !state.videoPlaySataus"
+        :interval="props.interval"
+        :duration="props.duration"
+        @transition="transition"
+        @animationfinish="animationfinish"
+        :style="customStyle"
+        @change="swiperChange"
+      >
+        <swiper-item
+          class="swiper-item"
+          v-for="(item, index) in props.list"
+          :key="index"
+          :class="{ cur: state.cur == index }"
+          @tap="onSwiperItem(item)"
+        >
+          <view class="ui-swiper-main">
+            <image
+              v-if="item.type === 'image'"
+              class="swiper-image"
+              :mode="props.imageMode"
+              :src="item.src"
+              width="100%"
+              height="100%"
+              @load="onImgLoad"
+            ></image>
+            <su-video
+              v-else
+              :ref="(el) => (refs.videoRef[`video_${index}`] = el)"
+              :poster="sheep.$url.cdn(item.poster)"
+              :src="sheep.$url.cdn(item.src)"
+              :index="index"
+              :moveX="state.moveX"
+              :initialTime="item.currentTime || 0"
+              :height="seizeHeight"
+              @videoTimeupdate="videoTimeupdate"
+            ></su-video>
+          </view>
+        </swiper-item>
+      </swiper>
+      <template v-if="!state.videoPlaySataus">
+        <view class="ui-swiper-dot" :class="props.dotStyle" v-if="props.dotStyle != 'tag'">
+          <view
+            class="line-box"
+            v-for="(item, index) in props.list"
+            :key="index"
+            :class="[state.cur == index ? 'cur' : '', props.dotCur]"
+          ></view>
+        </view>
+        <view class="ui-swiper-dot" :class="props.dotStyle" v-if="props.dotStyle == 'tag'">
+          <view
+            class="ui-tag radius-lg"
+            :class="[props.dotCur]"
+            style="pointer-events: none; padding: 0 10rpx"
+          >
+            <view style="transform: scale(0.7)">{{ state.cur + 1 }} / {{ props.list.length }}</view>
+          </view>
+        </view>
+      </template>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  /**
+   * 轮播组件
+   *
+   * @property {Boolean} circular = false  	- 是否采用衔接滑动，即播放到末尾后重新回到开头
+   * @property {Boolean} autoplay = true  	- 是否自动切换
+   * @property {Number} interval = 5000  		- 自动切换时间间隔
+   * @property {Number} duration = 500  		- 滑动动画时长,app-nvue不支持
+   * @property {Array} list = [] 				- 轮播数据
+   * @property {String} ui = ''  				- 样式class
+   * @property {String} mode  				- 模式
+   * @property {String} dotStyle  			- 指示点样式
+   * @property {String} dotCur= 'ui-BG-Main' 	- 当前指示点样式,默认主题色
+   * @property {String} bg  					- 背景
+   * @property {String} height = 300  		- 组件高度
+   * @property {String} imgHeight = 300   	- 图片高度
+   *
+   * @example list = [{url:'跳转路径',urlType:'跳转方式',type:'轮播类型',src:'轮播内容地址',poster:'视频必传'}]
+   */
+
+  import { reactive, computed } from 'vue';
+  import sheep from '@/sheep';
+  import { clone } from 'lodash';
+
+  // 数据
+  const state = reactive({
+    imgHeight: 0,
+    cur: 0,
+    moveX: 0,
+    videoPlaySataus: false,
+    heightList: [],
+  });
+
+  const refs = reactive({
+    videoRef: {},
+  });
+
+  // 接收参数
+
+  const props = defineProps({
+    circular: {
+      type: Boolean,
+      default: true,
+    },
+    autoplay: {
+      type: Boolean,
+      default: false,
+    },
+    interval: {
+      type: Number,
+      default: 3000,
+    },
+    duration: {
+      type: Number,
+      default: 500,
+    },
+    mode: {
+      type: String,
+      default: 'default',
+    },
+    imageMode: {
+      type: String,
+      default: 'scaleToFill',
+    },
+    list: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    dotStyle: {
+      type: String,
+      default: 'long', //default long tag
+    },
+    dotCur: {
+      type: String,
+      default: 'ss-bg-opactity-block',
+    },
+    bg: {
+      type: String,
+      default: 'bg-none',
+    },
+    height: {
+      type: Number,
+      default: 0,
+    },
+    imgHeight: {
+      type: Number,
+      default: 0,
+    },
+    imgTopRadius: {
+      type: Number,
+      default: 0,
+    },
+    imgBottomRadius: {
+      type: Number,
+      default: 0,
+    },
+    isPreview: {
+      type: Boolean,
+      default: false,
+    },
+    seizeHeight: {
+      type: Number,
+      default: 200,
+    },
+  });
+
+  // current 改变时会触发 change 事件
+  const swiperChange = (e) => {
+    if (e.detail.source !== 'touch' && e.detail.source !== 'autoplay') return;
+    state.cur = e.detail.current;
+    state.videoPlaySataus = false;
+    if (props.list[state.cur].type === 'video') {
+      refs.videoRef[`video_${state.cur}`].pausePlay();
+    }
+  };
+  // 点击轮播组件
+  const onSwiperItem = (item) => {
+    if (item.type === 'video') {
+      state.videoPlaySataus = true;
+    } else {
+      sheep.$router.go(item.url);
+      onPreview();
+    }
+  };
+
+  const onPreview = () => {
+    if (!props.isPreview) return;
+    let previewImage = clone(props.list);
+    previewImage.forEach((item,index) => {
+      if(item.type === 'video') {
+        previewImage.splice(index, 1);
+      }
+    })
+    uni.previewImage({
+      urls:
+        previewImage.length < 1
+          ? [props.src]
+          : previewImage.reduce((pre, cur) => {
+              pre.push(cur.src);
+              return pre;
+            }, []),
+      current: state.cur,
+      // longPressActions: {
+      //   itemList: ['发送给朋友', '保存图片', '收藏'],
+      //   success: function (data) {
+      //     console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
+      //   },
+      //   fail: function (err) {
+      //     console.log(err.errMsg);
+      //   },
+      // },
+    });
+  };
+  //
+
+  // swiper-item 的位置发生改变时会触发 transition
+  const transition = (e) => {
+    // #ifdef APP-PLUS
+    state.moveX = e.detail.dx;
+    // #endif
+  };
+
+  // 动画结束时会触发 animationfinish
+  const animationfinish = (e) => {
+    state.moveX = 0;
+  };
+
+  const videoTimeupdate = (e) => {
+    props.list[state.cur].currentTime = e.detail.currentTime;
+  };
+
+  // 自动计算高度
+  const customStyle = computed(() => {
+    let height;
+
+    // 固定高度情况
+    if (props.height !== 0) {
+      height = props.height;
+    }
+
+    // 自动高度情况
+    if (props.height === 0) {
+      // 图片预加载占位高度
+      if (state.imgHeight !== 0) {
+        height = state.imgHeight;
+      } else if (props.seizeHeight !== 0) {
+        height = props.seizeHeight;
+      }
+    }
+
+    return {
+      height: height + 'rpx',
+    };
+  });
+
+  // 计算轮播图片最大高度
+  function onImgLoad(e) {
+    if (props.height === 0) {
+      let newHeight = (e.detail.height / e.detail.width) * 750;
+      if (state.imgHeight < newHeight) {
+        state.imgHeight = newHeight;
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .ui-swiper {
+    position: relative;
+
+    .ui-swiper-main {
+      width: 100%;
+      height: 100%;
+    }
+
+    .ui-swiper-main .swiper-image {
+      width: 100%;
+      height: 100%;
+    }
+
+    .ui-swiper-dot {
+      position: absolute;
+      width: 100%;
+      bottom: 20rpx;
+      height: 30rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &.default .line-box {
+        display: inline-flex;
+        border-radius: 50rpx;
+        width: 6px;
+        height: 6px;
+        border: 2px solid transparent;
+        margin: 0 10rpx;
+        opacity: 0.3;
+        position: relative;
+        justify-content: center;
+        align-items: center;
+
+        &.cur {
+          width: 8px;
+          height: 8px;
+          opacity: 1;
+          border: 0px solid transparent;
+        }
+
+        &.cur::after {
+          content: '';
+          border-radius: 50rpx;
+          width: 4px;
+          height: 4px;
+          background-color: #fff;
+        }
+      }
+
+      &.long .line-box {
+        display: inline-block;
+        border-radius: 100rpx;
+        width: 6px;
+        height: 6px;
+        margin: 0 10rpx;
+        opacity: 0.3;
+        position: relative;
+
+        &.cur {
+          width: 24rpx;
+          opacity: 1;
+        }
+
+        &.cur::after {
+        }
+      }
+
+      &.line {
+        bottom: 20rpx;
+
+        .line-box {
+          display: inline-block;
+          width: 30px;
+          height: 3px;
+          opacity: 0.3;
+          position: relative;
+
+          &.cur {
+            opacity: 1;
+          }
+        }
+      }
+
+      &.tag {
+        justify-content: flex-end;
+        position: absolute;
+        bottom: 20rpx;
+        right: 20rpx;
+      }
+    }
+
+    &.card {
+      .swiper-item {
+        width: 610rpx !important;
+        left: 70rpx;
+        box-sizing: border-box;
+        padding: 20rpx 0rpx 60rpx;
+        overflow: initial;
+      }
+
+      .swiper-item .ui-swiper-main {
+        width: 100%;
+        display: block;
+        height: 100%;
+        transform: scale(0.9);
+        transition: all 0.2s ease-in 0s;
+        position: relative;
+        background-size: cover;
+
+        .swiper-image {
+          height: 100%;
+        }
+      }
+
+      .swiper-item .ui-swiper-main::before {
+        content: '';
+        display: block;
+        background: inherit;
+        filter: blur(5px);
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 10rpx;
+        left: 10rpx;
+        z-index: -1;
+        opacity: 0.3;
+        transform-origin: 0 0;
+        transform: scale(1, 1);
+      }
+
+      .swiper-item.cur .ui-swiper-main {
+        transform: scale(1);
+        transition: all 0.2s ease-in 0s;
+      }
+
+      .ui-swiper-dot.tag {
+        position: absolute;
+        bottom: 85rpx;
+        right: 75rpx;
+      }
+    }
+
+    &.hotelCard {
+      .swiper-item {
+        width: 650rpx !important;
+        left: 30rpx;
+        box-sizing: border-box;
+        padding: 0rpx 0rpx 50rpx;
+        overflow: initial;
+      }
+
+      .swiper-item .ui-swiper-main {
+        width: 100%;
+        display: block;
+        height: 100%;
+        transform: scale(0.9);
+        opacity: 0.8;
+        transition: all 0.2s ease-in 0s;
+        position: relative;
+        background-size: cover;
+
+        .swiper-image {
+          width: 100%;
+          height: 400rpx;
+        }
+      }
+
+      .swiper-item .ui-swiper-main::before {
+        content: '';
+        display: block;
+        background: inherit;
+        filter: blur(5px);
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 10rpx;
+        left: 10rpx;
+        z-index: -1;
+        opacity: 0.3;
+        transform-origin: 0 0;
+        transform: scale(1, 1);
+      }
+
+      .swiper-item.cur .ui-swiper-main {
+        transform: scale(1);
+        transition: all 0.2s ease-in 0s;
+        opacity: 1;
+      }
+
+      .ui-swiper-dot {
+        display: none;
+      }
+    }
+
+    &.hotelDetail {
+      .swiper-item {
+        width: 690rpx !important;
+        left: 30rpx;
+        box-sizing: border-box;
+        padding: 20rpx 0rpx;
+        overflow: initial;
+      }
+
+      .swiper-item .ui-swiper-main {
+        width: 100%;
+        display: block;
+        height: 100%;
+        transform: scale(0.96);
+        transition: all 0.2s ease-in 0s;
+        position: relative;
+        background-size: cover;
+
+        .swiper-image {
+          height: 100%;
+        }
+      }
+
+      .swiper-item.cur .ui-swiper-main {
+        transform: scale(0.96);
+        transition: all 0.2s ease-in 0s;
+      }
+    }
+  }
+</style>
diff --git a/sheep/ui/su-switch/su-switch.vue b/sheep/ui/su-switch/su-switch.vue
new file mode 100644
index 0000000..d63e800
--- /dev/null
+++ b/sheep/ui/su-switch/su-switch.vue
@@ -0,0 +1,100 @@
+<template>
+  <view class="ui-switch" :class="[{ disabled: props.disabled }, props.ui]">
+    <view class="ui-switch-wrapper" @tap="change">
+      <view
+        class="ui-switch-input"
+        :class="[
+          { 'ui-switch-input-checked': props.modelValue },
+          props.modelValue ? props.bg : '',
+          props.text,
+          props.size,
+        ]"
+      ></view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'UiSwitch',
+  };
+</script>
+<script setup>
+  const props = defineProps({
+    modelValue: {
+      type: [Boolean, Number],
+      default: false,
+    },
+    ui: {
+      type: String,
+      default: '',
+    },
+    bg: {
+      type: String,
+      default: 'ui-BG-Main',
+    },
+    text: {
+      type: String,
+      default: '',
+    },
+    size: {
+      type: String,
+      default: 'sm',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  });
+  const emits = defineEmits(['update:modelValue']);
+
+  const change = () => {
+    emits('update:modelValue', !props.modelValue);
+  };
+</script>
+
+<style lang="scss" scoped>
+  .ui-switch {
+    display: inline-block;
+    cursor: pointer;
+    .ui-switch-wrapper {
+      display: inline-flex;
+      align-items: center;
+      vertical-align: middle;
+    }
+    .ui-switch-input {
+      appearance: none;
+      position: relative;
+      width: 47px;
+      height: 26px;
+      outline: 0;
+      border-radius: 16px;
+      box-sizing: border-box;
+      background-color: rgba(119, 119, 119, 0.3);
+      transition: background-color 0.1s, border 0.1s;
+      &:after {
+        content: ' ';
+        position: absolute;
+        top: 0;
+        left: 0;
+        border-radius: 200px;
+        transition: transform 0.3s;
+        width: 20px;
+        height: 20px;
+        margin: 3px;
+        background-color: #fff;
+      }
+      &.ui-switch-input-checked {
+        &:after {
+          transform: translateX(21px);
+        }
+      }
+    }
+    &.disabled {
+      cursor: not-allowed;
+      .ui-switch-input {
+        opacity: 0.7;
+      }
+    }
+  }
+</style>
diff --git a/sheep/ui/su-tab-item/su-tab-item.vue b/sheep/ui/su-tab-item/su-tab-item.vue
new file mode 100644
index 0000000..615df2f
--- /dev/null
+++ b/sheep/ui/su-tab-item/su-tab-item.vue
@@ -0,0 +1,169 @@
+<template>
+  <view>
+    <view :id="'tab-' + props.index" class="ui-tab-item" :class="[{ cur: cur }, tpl]">
+      <view class="ui-tab-icon" :class="props.data.icon" v-if="props.data.icon"></view>
+      <view
+        class="ui-tab-text"
+        :class="[cur ? 'curColor cur' : 'default-color']"
+        :style="[{ color: cur ? titleStyle.activeColor : titleStyle.color }]"
+      >
+        {{ props.data.title }}
+      </view>
+
+      <view class="ui-tag badge ml-2" v-if="props.data.tag != null">{{ props.data.tag }}</view>
+    </view>
+    <view
+      v-if="tpl === 'subtitle'"
+      class="item-subtitle ss-flex ss-col-bottom ss-row-center"
+      :style="[{ color: cur ? subtitleStyle.activeColor : subtitleStyle.color }]"
+    >
+      {{ props.data.subtitle }}
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'UiTabItem',
+  };
+</script>
+
+<script setup>
+  /**
+   * 基础组件 - uiTabItem
+   */
+  import { computed, onMounted, getCurrentInstance, inject } from 'vue';
+  import sheep from '@/sheep';
+  const vm = getCurrentInstance();
+
+  const props = defineProps({
+    data: {
+      type: [Object, String, Number],
+      default() {},
+    },
+    index: {
+      type: Number,
+      default: 0,
+    },
+  });
+
+  const emits = defineEmits(['up']);
+
+  onMounted(() => {
+    computedQuery();
+    uni.onWindowResize((res) => {
+      computedQuery();
+    });
+  });
+
+  function getParent(name) {
+    let parent = vm?.parent;
+    // 无父级返回null
+    if (parent) {
+      let parentName = parent?.type?.name;
+      // 父组件name 为真返回父级，为假循环
+      while (parentName !== name) {
+        parent = parent?.parent;
+        // 存在父级循环，不存在打断循环
+        if (parent) {
+          parentName = parent?.type?.name;
+        } else {
+          return null;
+        }
+      }
+      return parent;
+    }
+    return null;
+  }
+
+  const UiTab = getParent('SuTab');
+
+  // 获取抛出的数据和方法
+  let uiTabProvide;
+  if (UiTab) {
+    uiTabProvide = inject('suTabProvide');
+  }
+  const cur = computed(() => uiTabProvide?.curValue.value === props.index);
+  const tpl = computed(() => uiTabProvide?.props?.tpl);
+  const subtitleStyle = computed(() => uiTabProvide?.props?.subtitleStyle);
+  const titleStyle = computed(() => uiTabProvide?.props?.titleStyle);
+
+  const computedQuery = () => {
+    uni.createSelectorQuery()
+      .in(vm)
+      .select('#tab-' + props.index)
+      .boundingClientRect((data) => {
+        if (data != null) {
+          // 传递到父组件进行计算
+          emits('up', props.index, data);
+        } else {
+          console.log('tab-item data error');
+        }
+      })
+      .exec();
+  };
+</script>
+
+<style lang="scss" scoped>
+  .default-color {
+    color: $black;
+  }
+  .ui-tab-item {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 1em;
+    min-height: 1.5em;
+    line-height: 1.5em;
+    position: relative;
+    z-index: 1;
+    opacity: 0.6;
+    transition: opacity 0.3s;
+    min-width: 60px;
+
+    .ui-tab-text {
+      width: 100%;
+      text-align: center;
+    }
+
+    .ui-tab-icon {
+      margin: 0 0.25em;
+      font-size: 120%;
+    }
+
+    &.cur {
+      opacity: 1;
+      font-weight: bold;
+    }
+
+    &.btn {
+      .ui-tab-text {
+        transform: scale(0.9);
+        transition: color 0.3s;
+        font-weight: bold;
+      }
+    }
+
+    &.subtitle {
+      .ui-tab-text {
+        transform: scale(0.9);
+        transition: color 0.3s;
+        font-weight: bold;
+        height: calc(100% - 2.6em);
+        line-height: calc(100% - 2.6em);
+        margin-top: 1.2em;
+        color: $white;
+      }
+    }
+  }
+
+  .item-subtitle {
+    height: 2em;
+    font-size: 22rpx;
+    color: $dark-9;
+    margin-bottom: 0.6em;
+  }
+
+  .cur-subtitle {
+    color: var(--ui-BG-Main);
+  }
+</style>
diff --git a/sheep/ui/su-tab/su-tab.vue b/sheep/ui/su-tab/su-tab.vue
new file mode 100644
index 0000000..17a7983
--- /dev/null
+++ b/sheep/ui/su-tab/su-tab.vue
@@ -0,0 +1,474 @@
+<template>
+  <view
+    class="ui-tab"
+    ref="tabRef"
+    :id="'tab-' + vm.uid"
+    :class="[
+      props.ui,
+      props.tpl,
+      props.bg,
+      props.align,
+      { 'ui-tab-inline': props.inline },
+      { 'ui-tab-scrolls': props.scroll },
+    ]"
+  >
+    <block v-if="scroll">
+      <view class="ui-tab-scroll-warp">
+        <scroll-view
+          scroll-x="true"
+          class="ui-tab-scroll"
+          :scroll-left="state.curValue > 1 ? state.tabNodeList[state.curValue - 1].left : 0"
+          scroll-with-animation
+          :style="{ width: `${state.content.width}px` }"
+        >
+          <view class="ss-flex ss-col-center">
+            <su-tab-item
+              v-for="(item, index) in props.tab"
+              :data="item"
+              :index="index"
+              :key="index"
+              @up="upitem"
+              @tap.native="click(index, item)"
+            ></su-tab-item>
+            <view
+              class="ui-tab-mark-warp"
+              :class="[{ over: state.over }]"
+              :style="[{ left: state.markLeft + 'px' }, { width: state.markWidth + 'px' }]"
+            >
+              <view
+                class="ui-tab-mark"
+                :class="[props.mark, { 'ui-btn': props.tpl == 'btn' || props.tpl == 'subtitle' }]"
+                :style="[
+                  {
+                    background:
+                      props.tpl == 'btn' || props.tpl == 'subtitle' ? titleStyle.activeBg : 'none',
+                  },
+                ]"
+              ></view>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+    </block>
+    <block v-else>
+      <su-tab-item
+        v-for="(item, index) in props.tab"
+        :data="item"
+        :index="index"
+        :key="index"
+        @up="upitem"
+        @tap.native="click(index, item)"
+      ></su-tab-item>
+      <view
+        class="ui-tab-mark-warp"
+        :class="[{ over: state.over }]"
+        :style="[{ left: state.markLeft + 'px' }, { width: state.markWidth + 'px' }]"
+      >
+        <view
+          class="ui-tab-mark"
+          :class="[props.mark, { 'ui-btn': props.tpl == 'btn' || props.tpl == 'subtitle' }]"
+        ></view>
+      </view>
+    </block>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'SuTab',
+  };
+</script>
+
+<script setup>
+  /**
+   * 基础组件 - suTab
+   */
+
+  import {
+    toRef,
+    ref,
+    reactive,
+    unref,
+    onMounted,
+    nextTick,
+    getCurrentInstance,
+    provide,
+  } from 'vue';
+  const vm = getCurrentInstance();
+
+  // 数据
+  const state = reactive({
+    curValue: 0,
+    tabNodeList: [],
+    scrollLeft: 0,
+    markLeft: 0,
+    markWidth: 0,
+    content: {
+      width: 100,
+    },
+    over: false,
+  });
+
+  const tabRef = ref(null);
+  // 参数
+  const props = defineProps({
+    modelValue: {
+      type: Number,
+      default: 0,
+    },
+    ui: {
+      type: String,
+      default: '',
+    },
+    bg: {
+      type: String,
+      default: '',
+    },
+    tab: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    // line dot long,subtitle,trapezoid
+    tpl: {
+      type: String,
+      default: 'line',
+    },
+    mark: {
+      type: String,
+      default: '',
+    },
+    align: {
+      type: String,
+      default: '',
+    },
+    curColor: {
+      type: String,
+      default: 'ui-TC',
+    },
+    defaultColor: {
+      type: String,
+      default: 'ui-TC',
+    },
+    scroll: {
+      type: Boolean,
+      default: false,
+    },
+    inline: {
+      type: Boolean,
+      default: false,
+    },
+    titleStyle: {
+      type: Object,
+      default: () => ({
+        activeBg: '#DA2B10',
+        activeColor: '#FEFEFE',
+        color: '#D70000',
+      }),
+    },
+    subtitleStyle: {
+      type: Object,
+      default: () => ({
+        activeColor: '#333',
+        color: '#C42222',
+      }),
+    },
+  });
+
+  const emits = defineEmits(['update:modelValue', 'change']);
+
+  onMounted(() => {
+    state.curValue = props.modelValue;
+    setCurValue(props.modelValue);
+    nextTick(() => {
+      computedQuery();
+    });
+    uni.onWindowResize((res) => {
+      computedQuery();
+    });
+  });
+
+  const computedQuery = () => {
+    uni.createSelectorQuery()
+      .in(vm)
+      .select('#tab-' + vm.uid)
+      .boundingClientRect((data) => {
+        if (data != null) {
+          if (data.left == 0 && data.right == 0) {
+            // setTimeout(() => {
+            computedQuery();
+            // }, 300);
+          } else {
+            state.content = data;
+            setTimeout(() => {
+              state.over = true;
+            }, 300);
+          }
+        } else {
+          console.log('tab-' + vm.uid + ' data error');
+        }
+      })
+      .exec();
+  };
+
+  const setCurValue = (value) => {
+    if (value == state.curValue) return;
+    state.curValue = value;
+    computedMark();
+  };
+
+  const click = (index, item) => {
+    setCurValue(index);
+    emits('update:modelValue', index);
+    emits('change', {
+      index: index,
+      data: item,
+    });
+  };
+
+  const upitem = (index, e) => {
+    state.tabNodeList[index] = e;
+    if (index == state.curValue) {
+      computedMark();
+    }
+  };
+
+  const computedMark = () => {
+    if (state.tabNodeList.length == 0) return;
+    let left = 0;
+    let list = unref(state.tabNodeList);
+    let cur = state.curValue;
+    state.markLeft = list[cur].left - state.content.left;
+    state.markWidth = list[cur].width;
+  };
+
+  const computedScroll = () => {
+    if (state.curValue == 0 || state.curValue == state.tabNodeList.length - 1) {
+      return false;
+    }
+    let i = 0;
+    let left = 0;
+    let list = state.tabNodeList;
+    for (i in list) {
+      if (i == state.curValue && i != 0) {
+        left = left - list[i - 1].width;
+        break;
+      }
+      left = left + list[i].width;
+    }
+    state.scrollLeft = left;
+  };
+
+  provide('suTabProvide', {
+    props,
+    curValue: toRef(state, 'curValue'),
+  });
+</script>
+
+<style lang="scss">
+  .ui-tab {
+    position: relative;
+    display: flex;
+    height: 4em;
+    align-items: center;
+
+    &.ui-tab-scrolls {
+      width: 100%;
+      /* #ifdef MP-WEIXIN */
+      padding-bottom: 10px;
+      /* #endif */
+      .ui-tab-scroll-warp {
+        overflow: hidden;
+        height: inherit;
+        width: 100%;
+        .ui-tab-scroll {
+          position: relative;
+          display: block;
+          white-space: nowrap;
+          overflow: auto;
+          min-height: 4em;
+          line-height: 4em;
+          width: 100% !important;
+          .ui-tab-mark-warp {
+            display: flex;
+            align-items: top;
+            justify-content: center;
+            .ui-tab-mark.ui-btn {
+              /* #ifndef MP-WEIXIN */
+              height: 2em;
+              width: calc(100% - 0.6em);
+              margin-top: 4px;
+              /* #endif */
+              /* #ifdef MP-WEIXIN */
+              height: 2em;
+              width: calc(100% - 0.6em);
+              margin-top: 4px;
+              /* #endif */
+            }
+          }
+        }
+      }
+    }
+
+    .ui-tab-mark-warp {
+      color: inherit;
+      position: absolute;
+      top: 0;
+      height: 100%;
+      z-index: 0;
+
+      &.over {
+        transition: 0.3s;
+      }
+
+      .ui-tab-mark {
+        color: var(--ui-BG-Main);
+        height: 100%;
+      }
+    }
+
+    &.line {
+      .ui-tab-mark {
+        border-bottom: 2px solid currentColor;
+      }
+    }
+
+    &.topline {
+      .ui-tab-mark {
+        border-top: 2px solid currentColor;
+      }
+    }
+
+    &.dot {
+      .ui-tab-mark::after {
+        content: '';
+        width: 0.5em;
+        height: 0.5em;
+        background-color: currentColor;
+        border-radius: 50%;
+        display: block;
+        position: absolute;
+        bottom: 0.3em;
+        left: 0;
+        right: 0;
+        margin: auto;
+      }
+    }
+
+    &.long {
+      .ui-tab-mark::after {
+        content: '';
+        width: 2em;
+        height: 0.35em;
+        background-color: currentColor;
+        border-radius: 5em;
+        display: block;
+        position: absolute;
+        bottom: 0.3em;
+        left: 0;
+        right: 0;
+        margin: auto;
+      }
+    }
+
+    &.trapezoid {
+      .ui-tab-mark::after {
+        content: '';
+        width: calc(100% - 2em);
+        height: 0.35em;
+        background-color: currentColor;
+        border-radius: 5em 5em 0 0;
+        display: block;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: auto;
+      }
+    }
+
+    &.btn {
+      .ui-tab-mark-warp {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .ui-tab-mark.ui-btn {
+          height: calc(100% - 1.6em);
+          width: calc(100% - 0.6em);
+        }
+      }
+
+      &.sm .ui-tab-mark.ui-btn {
+        height: calc(100% - 2px);
+        width: calc(100% - 2px);
+        border-radius: #{$radius - 2};
+      }
+    }
+
+    &.subtitle {
+      .ui-tab-mark-warp {
+        display: flex;
+        align-items: top;
+        justify-content: center;
+        padding-top: 0.6em;
+
+        .ui-tab-mark.ui-btn {
+          height: calc(100% - 2.8em);
+          width: calc(100% - 0.6em);
+        }
+      }
+    }
+
+    &.ui-tab-inline {
+      display: inline-flex;
+      height: 3.5em;
+
+      &.ui-tab-scrolls {
+        .ui-tab-scroll {
+          height: calc(3.5em + 17px);
+          line-height: 3.5em;
+
+          .ui-tab-mark-warp {
+            height: 3.5em;
+          }
+        }
+      }
+
+      &.btn {
+        .ui-tab-mark-warp {
+          .ui-tab-mark.ui-btn {
+            height: calc(100% - 10px);
+            width: calc(100% - 10px);
+          }
+        }
+      }
+    }
+
+    &.sm {
+      height: 70rpx !important;
+
+      &.ui-tab-inline {
+        height: 70rpx;
+
+        &.ui-tab-scrolls {
+          .ui-tab-scroll {
+            height: calc(70rpx + 17px);
+            line-height: 70rpx;
+
+            .ui-tab-mark-warp {
+              height: 70rpx;
+            }
+          }
+        }
+
+        &.btn .ui-tab-mark.ui-btn {
+          height: calc(100% - 2px);
+          width: calc(100% - 2px);
+          border-radius: #{$radius - 2};
+        }
+      }
+    }
+  }
+</style>
diff --git a/sheep/ui/su-tabbar-item/su-tabbar-item.vue b/sheep/ui/su-tabbar-item/su-tabbar-item.vue
new file mode 100644
index 0000000..cc55ac1
--- /dev/null
+++ b/sheep/ui/su-tabbar-item/su-tabbar-item.vue
@@ -0,0 +1,234 @@
+<!-- 自定义底部导航项 -->
+<template>
+  <view class="u-tabbar-item" :style="[addStyle(customStyle)]">
+    <view v-if="isCenter" class="tabbar-center-item">
+      <image class="center-image" :src="centerImage" mode="aspectFill"></image>
+    </view>
+    <template v-else>
+      <view class="u-tabbar-item__icon">
+        <image
+          v-if="icon"
+          :name="icon"
+          :color="isActive ? parentData.activeColor : parentData.color"
+          :size="20"
+        ></image>
+        <block v-else>
+          <slot v-if="isActive" name="active-icon" />
+          <slot v-else name="inactive-icon" />
+        </block>
+        <!-- <u-badge
+					absolute
+					:offset="[0, dot ? '34rpx' : badge > 9 ? '14rpx' : '20rpx']"
+					:customStyle="badgeStyle"
+					:isDot="dot"
+					:value="badge || (dot ? 1 : null)"
+					:show="dot || badge > 0"
+				></u-badge> -->
+      </view>
+
+      <slot name="text">
+        <text
+          class="u-tabbar-item__text"
+          :style="{
+            color: isActive ? parentData.activeColor : parentData.color,
+          }"
+        >
+          {{ text }}
+        </text>
+      </slot>
+    </template>
+  </view>
+</template>
+
+<script>
+  /**
+   * TabbarItem 底部导航栏子组件
+   * @description 此组件提供了自定义tabbar的能力。
+   * @property {String | Number}	name		item标签的名称，作为与u-tabbar的value参数匹配的标识符
+   * @property {String}			icon		uView内置图标或者绝对路径的图片
+   * @property {String | Number}	badge		右上角的角标提示信息
+   * @property {Boolean}			dot			是否显示圆点，将会覆盖badge参数（默认 false ）
+   * @property {String}			text		描述文本
+   * @property {Object | String}	badgeStyle	控制徽标的位置，对象或者字符串形式，可以设置top和right属性（默认 'top: 6px;right:2px;' ）
+   * @property {Object}			customStyle	定义需要用到的外部样式
+   *
+   */
+  import { deepMerge, addStyle, sleep, $parent } from '@/sheep/helper';
+  export default {
+    name: 'su-tabbar-item',
+    props: {
+      customStyle: {
+        type: [Object, String],
+        default: () => ({}),
+      },
+      customClass: {
+        type: String,
+        default: '',
+      },
+      // 跳转的页面路径
+      url: {
+        type: String,
+        default: '',
+      },
+      // 页面跳转的类型
+      linkType: {
+        type: String,
+        default: 'navigateTo',
+      },
+      // item标签的名称，作为与u-tabbar的value参数匹配的标识符
+      name: {
+        type: [String, Number, null],
+        default: '',
+      },
+      // uView内置图标或者绝对路径的图片
+      icon: {
+        icon: String,
+        default: '',
+      },
+      // 右上角的角标提示信息
+      badge: {
+        type: [String, Number, null],
+        default: '',
+      },
+      // 是否显示圆点，将会覆盖badge参数
+      dot: {
+        type: Boolean,
+        default: false,
+      },
+      // 描述文本
+      text: {
+        type: String,
+        default: '',
+      },
+      // 控制徽标的位置，对象或者字符串形式，可以设置top和right属性
+      badgeStyle: {
+        type: [Object, String],
+        default: '',
+      },
+      isCenter: {
+        type: Boolean,
+        default: false,
+      },
+      centerImage: {
+        type: String,
+        default: '',
+      },
+    },
+    data() {
+      return {
+        isActive: false, // 是否处于激活状态
+        addStyle,
+        parentData: {
+          value: null,
+          activeColor: '',
+          color: '',
+        },
+        parent: {},
+      };
+    },
+    created() {
+      this.init();
+    },
+    methods: {
+      getParentData(parentName = '') {
+        // 避免在created中去定义parent变量
+        if (!this.parent) this.parent = {};
+        // 这里的本质原理是，通过获取父组件实例(也即类似u-radio的父组件u-radio-group的this)
+        // 将父组件this中对应的参数，赋值给本组件(u-radio的this)的parentData对象中对应的属性
+        // 之所以需要这么做，是因为所有端中，头条小程序不支持通过this.parent.xxx去监听父组件参数的变化
+        // 此处并不会自动更新子组件的数据，而是依赖父组件u-radio-group去监听data的变化，手动调用更新子组件的方法去重新获取
+        this.parent = $parent.call(this, parentName);
+        if (this.parent.children) {
+          // 如果父组件的children不存在本组件的实例，才将本实例添加到父组件的children中
+          this.parent.children.indexOf(this) === -1 && this.parent.children.push(this);
+        }
+        if (this.parent && this.parentData) {
+          // 历遍parentData中的属性，将parent中的同名属性赋值给parentData
+          Object.keys(this.parentData).map((key) => {
+            this.parentData[key] = this.parent[key];
+          });
+        }
+      },
+      init() {
+        // 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
+        this.updateParentData();
+        if (!this.parent) {
+          console.log('u-tabbar-item必须搭配u-tabbar组件使用');
+        }
+        // 本子组件在u-tabbar的children数组中的索引
+        const index = this.parent.children.indexOf(this);
+        // 判断本组件的name(如果没有定义name，就用index索引)是否等于父组件的value参数
+        this.isActive = (this.name.split('?')[0] || index) === this.parentData.value;
+      },
+      updateParentData() {
+        // 此方法在mixin中
+        this.getParentData('su-tabbar');
+      },
+      // 此方法将会被父组件u-tabbar调用
+      updateFromParent() {
+        // 重新初始化
+        this.init();
+      },
+      clickHandler() {
+        this.$nextTick(() => {
+          const index = this.parent.children.indexOf(this);
+          const name = this.name || index;
+          // 点击的item为非激活的item才发出change事件
+          if (name !== this.parent.value) {
+            this.parent.$emit('change', name);
+          }
+          this.$emit('click', name);
+        });
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .tabbar-center-item {
+    height: 40px;
+    width: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: rebeccapurple;
+    transform: scale(1.3) translateY(-6px);
+    position: absolute;
+    z-index: 2;
+
+    .center-image {
+      width: 25px;
+      height: 25px;
+    }
+  }
+  .u-tabbar-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    position: relative;
+    z-index: 1;
+
+    &__icon {
+      display: flex;
+      position: relative;
+      width: 150rpx;
+      justify-content: center;
+    }
+
+    &__text {
+      margin-top: 2px;
+      font-size: 12px;
+      color: var(--textSize);
+    }
+  }
+
+  /* #ifdef MP */
+  // 由于小程序都使用shadow DOM形式实现，需要给影子宿主设置flex: 1才能让其撑开
+  :host {
+    flex: 1;
+  }
+  /* #endif */
+</style>
diff --git a/sheep/ui/su-tabbar/su-tabbar.vue b/sheep/ui/su-tabbar/su-tabbar.vue
new file mode 100644
index 0000000..92e0352
--- /dev/null
+++ b/sheep/ui/su-tabbar/su-tabbar.vue
@@ -0,0 +1,227 @@
+<!-- 底部导航栏 -->
+<template>
+  <view class="u-tabbar">
+    <view
+      class="u-tabbar__content"
+      ref="u-tabbar__content"
+      @touchmove.stop.prevent=""
+      :class="[border && 'u-border-top', fixed && 'u-tabbar--fixed', { 'mid-tabbar': midTabBar }]"
+      :style="[tabbarStyle]"
+    >
+      <view class="u-tabbar__content__item-wrapper">
+        <slot></slot>
+      </view>
+      <view v-if="safeAreaInsetBottom" :style="[{ height: safeBottomHeight + 'px' }]"></view>
+    </view>
+    <view
+      class="u-tabbar__placeholder"
+      v-if="placeholder"
+      :style="{
+        height: placeholderHeight + 'px',
+      }"
+    ></view>
+  </view>
+</template>
+
+<script>
+  // #ifdef APP-NVUE
+  const dom = uni.requireNativePlugin('dom');
+  // #endif
+  /**
+   * Tabbar 底部导航栏
+   * @description 此组件提供了自定义tabbar的能力。
+   * @property {String | Number}	value				当前匹配项的name
+   * @property {Boolean}			safeAreaInsetBottom	是否为iPhoneX留出底部安全距离（默认 true ）
+   * @property {Boolean}			border				是否显示上方边框（默认 true ）
+   * @property {String | Number}	zIndex				元素层级z-index（默认 1 ）
+   * @property {String}			activeColor			选中标签的颜色（默认 '#1989fa' ）
+   * @property {String}			inactiveColor		未选中标签的颜色（默认 '#7d7e80' ）
+   * @property {Boolean}			fixed				是否固定在底部（默认 true ）
+   * @property {Boolean}			placeholder			fixed定位固定在底部时，是否生成一个等高元素防止塌陷（默认 true ）
+   * @property {Object}			customStyle			定义需要用到的外部样式
+   *
+   */
+
+  import { deepMerge, addStyle, sleep } from '@/sheep/helper';
+  import sheep from '@/sheep';
+
+  export default {
+    name: 'su-tabbar',
+    props: {
+      customStyle: {
+        type: [Object, String],
+        default: () => ({}),
+      },
+      customClass: {
+        type: String,
+        default: '',
+      },
+      // 跳转的页面路径
+      url: {
+        type: String,
+        default: '',
+      },
+      // 页面跳转的类型
+      linkType: {
+        type: String,
+        default: 'navigateTo',
+      },
+      // 当前匹配项的name
+      value: {
+        type: [String, Number, null],
+        default: '',
+      },
+      // 是否为iPhoneX留出底部安全距离
+      safeAreaInsetBottom: {
+        type: Boolean,
+        default: true,
+      },
+      // 是否显示上方边框
+      border: {
+        type: Boolean,
+        default: true,
+      },
+      // 元素层级z-index
+      zIndex: {
+        type: [String, Number],
+        default: 10,
+      },
+      // 选中标签的颜色
+      activeColor: {
+        type: String,
+        default: '#1989fa',
+      },
+      // 未选中标签的颜色
+      inactiveColor: {
+        type: String,
+        default: '#7d7e80',
+      },
+      // 是否固定在底部
+      fixed: {
+        type: Boolean,
+        default: true,
+      },
+      // fixed定位固定在底部时，是否生成一个等高元素防止塌陷
+      placeholder: {
+        type: Boolean,
+        default: true,
+      },
+      midTabBar: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        placeholderHeight: 0,
+        safeBottomHeight: sheep.$platform.device.safeAreaInsets.bottom,
+      };
+    },
+    computed: {
+      tabbarStyle() {
+        const style = {
+          zIndex: this.zIndex,
+        };
+        // 合并来自父组件的customStyle样式
+        return deepMerge(style, addStyle(this.customStyle));
+      },
+      // 监听多个参数的变化，通过在computed执行对应的操作
+      updateChild() {
+        return [this.value, this.activeColor, this.inactiveColor];
+      },
+      updatePlaceholder() {
+        return [this.fixed, this.placeholder];
+      },
+    },
+    watch: {
+      updateChild() {
+        // 如果updateChildren中的元素发生了变化，则执行子元素初始化操作
+        this.updateChildren();
+      },
+      updatePlaceholder() {
+        // 如果fixed，placeholder等参数发生变化，重新计算占位元素的高度
+        this.setPlaceholderHeight();
+      },
+    },
+    created() {
+      this.children = [];
+    },
+    mounted() {
+      this.setPlaceholderHeight();
+    },
+    methods: {
+      updateChildren() {
+        // 如果存在子元素，则执行子元素的updateFromParent进行更新数据
+        this.children.length && this.children.map((child) => child.updateFromParent());
+      },
+      getRect(selector, all) {
+        return new Promise((resolve) => {
+          uni.createSelectorQuery()
+            .in(this)
+            [all ? 'selectAll' : 'select'](selector)
+            .boundingClientRect((rect) => {
+              if (all && Array.isArray(rect) && rect.length) {
+                resolve(rect);
+              }
+              if (!all && rect) {
+                resolve(rect);
+              }
+            })
+            .exec();
+        });
+      },
+      // 设置用于防止塌陷元素的高度
+      async setPlaceholderHeight() {
+        if (!this.fixed || !this.placeholder) return;
+        // 延时一定时间
+        await sleep(20);
+        // #ifndef APP-NVUE
+        this.getRect('.u-tabbar__content').then(({ height = 50 }) => {
+          // 修复IOS safearea bottom 未填充高度
+          this.placeholderHeight = height;
+        });
+        // #endif
+
+        // #ifdef APP-NVUE
+        dom.getComponentRect(this.$refs['u-tabbar__content'], (res) => {
+          const { size } = res;
+          this.placeholderHeight = size.height;
+        });
+        // #endif
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .u-tabbar {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      background-color: #fff;
+      box-shadow: 0px -2px 4px 0px rgba(51, 51, 51, 0.06);
+
+      &__item-wrapper {
+        height: 50px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+      }
+    }
+
+    .mid-tabbar {
+      border-radius: 30rpx 30rpx 0 0;
+    }
+
+    &--fixed {
+      position: fixed;
+      bottom: -1px;
+      left: 0;
+      right: 0;
+    }
+  }
+</style>
diff --git a/sheep/ui/su-tabs-item/props.js b/sheep/ui/su-tabs-item/props.js
new file mode 100644
index 0000000..3908c36
--- /dev/null
+++ b/sheep/ui/su-tabs-item/props.js
@@ -0,0 +1,3 @@
+export default {
+  props: {},
+};
diff --git a/sheep/ui/su-tabs-item/su-tabs-item.vue b/sheep/ui/su-tabs-item/su-tabs-item.vue
new file mode 100644
index 0000000..7139684
--- /dev/null
+++ b/sheep/ui/su-tabs-item/su-tabs-item.vue
@@ -0,0 +1,26 @@
+<template>
+  <swiper-item>
+    <slot />
+  </swiper-item>
+</template>
+
+<script>
+  import props from './props.js';
+  /**
+   * TabsItem  tabs标签组件的自组件
+   * @description tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。
+   * @tutorial https://www.uviewui.com/components/tabs.html
+   * @property {type}	prop_name
+   * @event {Function()}
+   * @example
+   */
+  export default {
+    name: 'u-tabs-item',
+    mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+    data() {
+      return {};
+    },
+  };
+</script>
+
+<style></style>
diff --git a/sheep/ui/su-tabs/su-tabs.vue b/sheep/ui/su-tabs/su-tabs.vue
new file mode 100644
index 0000000..05d7dcb
--- /dev/null
+++ b/sheep/ui/su-tabs/su-tabs.vue
@@ -0,0 +1,434 @@
+<template>
+  <view class="u-tabs">
+    <view class="u-tabs__wrapper">
+      <slot name="left" />
+      <view class="u-tabs__wrapper__scroll-view-wrapper">
+        <scroll-view
+          :scroll-x="scrollable"
+          :scroll-left="scrollLeft"
+          scroll-with-animation
+          enable-flex
+          class="u-tabs__wrapper__scroll-view white-space"
+          :show-scrollbar="false"
+          ref="u-tabs__wrapper__scroll-view"
+        >
+          <view class="u-tabs__wrapper__nav" ref="u-tabs__wrapper__nav">
+            <view
+              class="u-tabs__wrapper__nav__item"
+              v-for="(item, index) in list"
+              :key="index"
+              @tap="clickHandler(item, index)"
+              :ref="`u-tabs__wrapper__nav__item-${index}`"
+              :style="[addStyle(itemStyle), { flex: scrollable ? '' : 1 }]"
+              :class="[
+                `u-tabs__wrapper__nav__item-${index}`,
+                item.disabled && 'u-tabs__wrapper__nav__item--disabled',
+              ]"
+            >
+              <text
+                :class="[item.disabled && 'u-tabs__wrapper__nav__item__text--disabled']"
+                class="u-tabs__wrapper__nav__item__text"
+                :style="[textStyle(index)]"
+                >{{ item[keyName] }}</text
+              >
+            </view>
+            <!-- #ifdef APP-NVUE -->
+            <view
+              class="u-tabs__wrapper__nav__line"
+              ref="u-tabs__wrapper__nav__line"
+              :style="[
+                {
+                  width: addUnit(lineWidth),
+                  height: addUnit(lineHeight),
+                  background: lineColor ? lineColor : 'var(--ui-BG-Main)',
+                  backgroundSize: lineBgSize,
+                },
+              ]"
+            ></view>
+            <!-- #endif -->
+            <!-- #ifndef APP-NVUE -->
+            <view
+              class="u-tabs__wrapper__nav__line"
+              ref="u-tabs__wrapper__nav__line"
+              :style="[
+                {
+                  width: addUnit(lineWidth),
+                  transform: `translate(${lineOffsetLeft}px)`,
+                  transitionDuration: `${firstTime ? 0 : duration}ms`,
+                  height: addUnit(lineHeight),
+                  background: lineColor ? lineColor : 'var(--ui-BG-Main)',
+                  backgroundSize: lineBgSize,
+                },
+              ]"
+            >
+            </view>
+            <!-- #endif -->
+          </view>
+        </scroll-view>
+      </view>
+      <slot name="right" />
+    </view>
+  </view>
+</template>
+
+<script>
+  import { deepMerge, addStyle, addUnit, sleep, getPx, sys } from '@/sheep/helper';
+  // #ifdef APP-NVUE
+  const animation = uni.requireNativePlugin('animation');
+  const dom = uni.requireNativePlugin('dom');
+  // #endif
+
+  /**
+   * Tabs 标签
+   * @description tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。
+   * @tutorial https://www.uviewui.com/components/tabs.html
+   * @property {String | Number}	duration			滑块移动一次所需的时间，单位秒（默认 200 ）
+   * @property {String | Number}	swierWidth			swiper的宽度（默认 '750rpx' ）
+   * @property {String}	keyName	 从`list`元素对象中读取的键名（默认 'name' ）
+   * @event {Function(index)} change 标签改变时触发 index: 点击了第几个tab，索引从0开始
+   * @event {Function(index)} click 点击标签时触发 index: 点击了第几个tab，索引从0开始
+   * @example <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
+   */
+  export default {
+    name: 'su-tabs',
+    data() {
+      return {
+        addStyle,
+        addUnit,
+        firstTime: true,
+        scrollLeft: 0,
+        scrollViewWidth: 0,
+        lineOffsetLeft: 0,
+        tabsRect: {
+          left: 0,
+        },
+        innerCurrent: 0,
+        moving: false,
+      };
+    },
+    props: {
+      // 滑块的移动过渡时间，单位ms
+      duration: {
+        type: Number,
+        default: 300,
+      },
+      // tabs标签数组
+      list: {
+        type: Array,
+        default: [],
+      },
+      // 滑块颜色
+      lineColor: {
+        type: String,
+        default: '',
+      },
+      // 菜单选择中时的样式
+      activeStyle: {
+        type: [String, Object],
+        default() {
+          return {
+            color: '#303133',
+          };
+        },
+      },
+      // 菜单非选中时的样式
+      inactiveStyle: {
+        type: [String, Object],
+        default() {
+          return {
+            color: '#606266',
+          };
+        },
+      },
+      // 滑块长度
+      lineWidth: {
+        type: [String, Number],
+        default: 20,
+      },
+      // 滑块高度
+      lineHeight: {
+        type: [String, Number],
+        default: 3,
+      },
+      // 滑块背景显示大小，当滑块背景设置为图片时使用
+      lineBgSize: {
+        type: String,
+        default: 'cover',
+      },
+      // 菜单item的样式
+      itemStyle: {
+        type: [String, Object],
+        default() {
+          return {
+            height: '44px',
+          };
+        },
+      },
+      // 菜单是否可滚动
+      scrollable: {
+        type: Boolean,
+        default: true,
+      },
+      // 当前选中标签的索引
+      current: {
+        type: [Number, String],
+        default: 0,
+      },
+      // 默认读取的键名
+      keyName: {
+        type: String,
+        default: 'name',
+      },
+    },
+    watch: {
+      current: {
+        immediate: true,
+        handler(newValue, oldValue) {
+          // 内外部值不相等时，才尝试移动滑块
+          if (newValue !== this.innerCurrent) {
+            this.innerCurrent = newValue;
+            this.$nextTick(() => {
+              this.resize();
+            });
+          }
+        },
+      },
+      // list变化时，重新渲染list各项信息
+      list() {
+        this.$nextTick(() => {
+          this.resize();
+        });
+      },
+    },
+    computed: {
+      textStyle() {
+        return (index) => {
+          const style = {};
+          // 取当期是否激活的样式
+          const customeStyle =
+            index === this.innerCurrent ? addStyle(this.activeStyle) : addStyle(this.inactiveStyle);
+          // 如果当前菜单被禁用，则加上对应颜色，需要在此做处理，是因为nvue下，无法在style样式中通过!import覆盖标签的内联样式
+          if (this.list[index].disabled) {
+            style.color = '#c8c9cc';
+          }
+          return deepMerge(customeStyle, style);
+        };
+      },
+    },
+    async mounted() {
+      this.init();
+    },
+    methods: {
+      $uGetRect(selector, all) {
+        return new Promise((resolve) => {
+          uni.createSelectorQuery()
+            .in(this)
+            [all ? 'selectAll' : 'select'](selector)
+            .boundingClientRect((rect) => {
+              if (all && Array.isArray(rect) && rect.length) {
+                resolve(rect);
+              }
+              if (!all && rect) {
+                resolve(rect);
+              }
+            })
+            .exec();
+        });
+      },
+      setLineLeft() {
+        const tabItem = this.list[this.innerCurrent];
+        if (!tabItem) {
+          return;
+        }
+        // 获取滑块该移动的位置
+        let lineOffsetLeft = this.list
+          .slice(0, this.innerCurrent)
+          .reduce((total, curr) => total + curr.rect.width, 0);
+        // 获取下划线的数值px表示法
+        const lineWidth = getPx(this.lineWidth);
+        this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2;
+        // #ifdef APP-NVUE
+        // 第一次移动滑块，无需过渡时间
+        this.animation(this.lineOffsetLeft, this.firstTime ? 0 : parseInt(this.duration));
+        // #endif
+
+        // 如果是第一次执行此方法，让滑块在初始化时，瞬间滑动到第一个tab item的中间
+        // 这里需要一个定时器，因为在非nvue下，是直接通过style绑定过渡时间，需要等其过渡完成后，再设置为false(非第一次移动滑块)
+        if (this.firstTime) {
+          setTimeout(() => {
+            this.firstTime = false;
+          }, 10);
+        }
+      },
+      // nvue下设置滑块的位置
+      animation(x, duration = 0) {
+        // #ifdef APP-NVUE
+        const ref = this.$refs['u-tabs__wrapper__nav__line'];
+        animation.transition(ref, {
+          styles: {
+            transform: `translateX(${x}px)`,
+          },
+          duration,
+        });
+        // #endif
+      },
+      // 点击某一个标签
+      clickHandler(item, index) {
+        // 因为标签可能为disabled状态，所以click是一定会发出的，但是change事件是需要可用的状态才发出
+        this.$emit('click', {
+          ...item,
+          index,
+        });
+        // 如果disabled状态，返回
+        if (item.disabled) return;
+        this.innerCurrent = index;
+        this.resize();
+        this.$emit('change', {
+          ...item,
+          index,
+        });
+      },
+      init() {
+        sleep().then(() => {
+          this.resize();
+        });
+      },
+      setScrollLeft() {
+        // 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
+        const tabRect = this.list[this.innerCurrent];
+        // 累加得到当前item到左边的距离
+        const offsetLeft = this.list.slice(0, this.innerCurrent).reduce((total, curr) => {
+          return total + curr.rect.width;
+        }, 0);
+        // 此处为屏幕宽度
+        const windowWidth = sys().windowWidth;
+        // 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
+        let scrollLeft =
+          offsetLeft -
+          (this.tabsRect.width - tabRect.rect.width) / 2 -
+          (windowWidth - this.tabsRect.right) / 2 +
+          this.tabsRect.left / 2;
+        // 这里做一个限制，限制scrollLeft的最大值为整个scroll-view宽度减去tabs组件的宽度
+        scrollLeft = Math.min(scrollLeft, this.scrollViewWidth - this.tabsRect.width);
+        this.scrollLeft = Math.max(0, scrollLeft);
+      },
+      // 获取所有标签的尺寸
+      resize() {
+        // 如果不存在list，则不处理
+        if (this.list.length === 0) {
+          return;
+        }
+        Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(
+          ([tabsRect, itemRect = []]) => {
+            this.tabsRect = tabsRect;
+            this.scrollViewWidth = 0;
+            itemRect.map((item, index) => {
+              // 计算scroll-view的宽度，这里
+              this.scrollViewWidth += item.width;
+              // 另外计算每一个item的中心点X轴坐标
+              this.list[index].rect = item;
+            });
+            // 获取了tabs的尺寸之后，设置滑块的位置
+            this.setLineLeft();
+            this.setScrollLeft();
+          },
+        );
+      },
+      // 获取导航菜单的尺寸
+      getTabsRect() {
+        return new Promise((resolve) => {
+          this.queryRect('u-tabs__wrapper__scroll-view').then((size) => resolve(size));
+        });
+      },
+      // 获取所有标签的尺寸
+      getAllItemRect() {
+        return new Promise((resolve) => {
+          const promiseAllArr = this.list.map((item, index) =>
+            this.queryRect(`u-tabs__wrapper__nav__item-${index}`, true),
+          );
+          Promise.all(promiseAllArr).then((sizes) => resolve(sizes));
+        });
+      },
+      // 获取各个标签的尺寸
+      queryRect(el, item) {
+        // #ifndef APP-NVUE
+        // $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://www.uviewui.com/js/getRect.html
+        // 组件内部一般用this.$uGetRect，对外的为uni.$u.getRect，二者功能一致，名称不同
+        return new Promise((resolve) => {
+          this.$uGetRect(`.${el}`).then((size) => {
+            resolve(size);
+          });
+        });
+        // #endif
+
+        // #ifdef APP-NVUE
+        // nvue下，使用dom模块查询元素高度
+        // 返回一个promise，让调用此方法的主体能使用then回调
+        return new Promise((resolve) => {
+          dom.getComponentRect(item ? this.$refs[el][0] : this.$refs[el], (res) => {
+            resolve(res.size);
+          });
+        });
+        // #endif
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .u-tabs {
+    background: #fff;
+    border-bottom: 2rpx solid #eee;
+
+    &__wrapper {
+      @include flex;
+      align-items: center;
+
+      &__scroll-view-wrapper {
+        flex: 1;
+        /* #ifndef APP-NVUE */
+        overflow: auto hidden;
+        /* #endif */
+      }
+
+      &__nav {
+        @include flex;
+        position: relative;
+
+        &__item {
+          padding: 0 11px;
+          @include flex;
+          align-items: center;
+          justify-content: center;
+
+          &--disabled {
+            /* #ifndef APP-NVUE */
+            cursor: not-allowed;
+            /* #endif */
+          }
+
+          &__text {
+            font-size: 14px;
+            color: #606266;
+            white-space: nowrap !important;
+
+            &--disabled {
+              color: #c8c9cc !important;
+            }
+          }
+        }
+
+        &__line {
+          height: 3px;
+          background: #3c9cff;
+          width: 30px;
+          position: absolute;
+          bottom: 2px;
+          border-radius: 100px;
+          transition-property: transform;
+          transition-duration: 300ms;
+        }
+      }
+    }
+  }
+</style>
diff --git a/sheep/ui/su-time-line/su-time-line.vue b/sheep/ui/su-time-line/su-time-line.vue
new file mode 100644
index 0000000..9c3f8c1
--- /dev/null
+++ b/sheep/ui/su-time-line/su-time-line.vue
@@ -0,0 +1,37 @@
+<template>
+  <view class="u-time-axis"><slot /></view>
+</template>
+
+<script>
+  /**
+   * timeLine 时间轴
+   * @description 时间轴组件一般用于物流信息展示，各种跟时间相关的记录等场景。
+   * @tutorial https://www.uviewui.com/components/timeLine.html
+   * @example <u-time-line></u-time-line>
+   */
+  export default {
+    name: 'u-time-line',
+    data() {
+      return {};
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .u-time-axis {
+    padding-left: 40rpx;
+    position: relative;
+  }
+
+  .u-time-axis::before {
+    content: ' ';
+    position: absolute;
+    left: 0;
+    top: 12rpx;
+    width: 1px;
+    bottom: 0;
+    border-left: 1px solid #ddd;
+    transform-origin: 0 0;
+    transform: scaleX(0.5);
+  }
+</style>
diff --git a/sheep/ui/su-timeline-item/su-timeline-item.vue b/sheep/ui/su-timeline-item/su-timeline-item.vue
new file mode 100644
index 0000000..ddf7a0b
--- /dev/null
+++ b/sheep/ui/su-timeline-item/su-timeline-item.vue
@@ -0,0 +1,76 @@
+<template>
+  <view class="u-time-axis-item">
+    <slot name="content" />
+    <view class="u-time-axis-node" :style="[nodeStyle]">
+      <slot name="node"><view class="u-dot"></view></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  /**
+   * timeLineItem 时间轴Item
+   * @description 时间轴组件一般用于物流信息展示，各种跟时间相关的记录等场景。(搭配u-time-line使用)
+   * @tutorial https://www.uviewui.com/components/timeLine.html
+   * @property {String} bg-color 左边节点的背景颜色，一般通过slot内容自定义背景颜色即可（默认#ffffff）
+   * @property {String Number} node-top 节点左边图标绝对定位的top值，单位rpx
+   * @example <u-time-line-item node-top="2">...</u-time-line-item>
+   */
+  export default {
+    name: 'u-time-line-item',
+    props: {
+      // 节点的背景颜色
+      bgColor: {
+        type: String,
+        default: '#ffffff',
+      },
+      // 节点左边图标绝对定位的top值
+      nodeTop: {
+        type: [String, Number],
+        default: '',
+      },
+    },
+    data() {
+      return {};
+    },
+    computed: {
+      nodeStyle() {
+        let style = {
+          backgroundColor: this.bgColor,
+        };
+        if (this.nodeTop != '') style.top = this.nodeTop + 'rpx';
+        return style;
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .u-time-axis-item {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+    margin-bottom: 32rpx;
+  }
+
+  .u-time-axis-node {
+    position: absolute;
+    top: 12rpx;
+    left: -40rpx;
+    transform-origin: 0;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    font-size: 24rpx;
+  }
+
+  .u-dot {
+    height: 16rpx;
+    width: 16rpx;
+    border-radius: 100rpx;
+    background: #ddd;
+  }
+</style>
diff --git a/sheep/ui/su-toolbar/su-toolbar.vue b/sheep/ui/su-toolbar/su-toolbar.vue
new file mode 100644
index 0000000..17351ec
--- /dev/null
+++ b/sheep/ui/su-toolbar/su-toolbar.vue
@@ -0,0 +1,129 @@
+<template>
+  <view class="u-toolbar" @touchmove.stop.prevent="noop" v-if="show">
+    <view class="u-toolbar__cancel__wrapper" hover-class="u-hover-class">
+      <text
+        class="u-toolbar__wrapper__cancel"
+        @tap="cancel"
+        :style="{
+          color: cancelColor,
+        }"
+      >
+        {{ cancelText }}
+      </text>
+    </view>
+    <text class="u-toolbar__title u-line-1" v-if="title">{{ title }}</text>
+    <view class="u-toolbar__confirm__wrapper" hover-class="u-hover-class">
+      <text
+        class="u-toolbar__wrapper__confirm"
+        @tap="confirm"
+        :style="{
+          color: confirmColor,
+        }"
+      >
+        {{ confirmText }}
+      </text>
+    </view>
+  </view>
+</template>
+
+<script>
+  /**
+   * Toolbar 工具条
+   * @description
+   * @tutorial https://www.uviewui.com/components/toolbar.html
+   * @property {Boolean}	show			是否展示工具条（默认 true ）
+   * @property {String}	cancelText		取消按钮的文字（默认 '取消' ）
+   * @property {String}	confirmText		确认按钮的文字（默认 '确认' ）
+   * @property {String}	cancelColor		取消按钮的颜色（默认 '#909193' ）
+   * @property {String}	confirmColor	确认按钮的颜色（默认 '#3c9cff' ）
+   * @property {String}	title			标题文字
+   * @event {Function}
+   * @example
+   */
+  export default {
+    name: 'SuToolbar',
+    props: {
+      // 是否展示工具条
+      show: {
+        type: Boolean,
+        default: true,
+      },
+      // 取消按钮的文字
+      cancelText: {
+        type: String,
+        default: '取消',
+      },
+      // 确认按钮的文字
+      confirmText: {
+        type: String,
+        default: '确认',
+      },
+      // 取消按钮的颜色
+      cancelColor: {
+        type: String,
+        default: '#909193',
+      },
+      // 确认按钮的颜色
+      confirmColor: {
+        type: String,
+        default: '#3c9cff',
+      },
+      // 标题文字
+      title: {
+        type: String,
+        default: '',
+      },
+    },
+    methods: {
+      // 点击取消按钮
+      cancel() {
+        this.$emit('cancel');
+      },
+      // 点击确定按钮
+      confirm() {
+        this.$emit('confirm');
+      },
+      // 阻止事件冒泡
+      preventEvent(e) {
+        e && typeof e.stopPropagation === 'function' && e.stopPropagation();
+      },
+      // 空操作
+      noop(e) {
+        this.preventEvent(e);
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .u-toolbar {
+    height: 42px;
+    @include flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &__wrapper {
+      &__cancel {
+        color: #111111;
+        font-size: 15px;
+        padding: 0 15px;
+      }
+    }
+
+    &__title {
+      color: #000000;
+      padding: 0 60rpx;
+      font-size: 16px;
+      flex: 1;
+      text-align: center;
+    }
+
+    &__wrapper {
+      &__confirm {
+        color: #ffffff;
+        font-size: 15px;
+        padding: 0 15px;
+      }
+    }
+  }
+</style>
diff --git a/sheep/ui/su-video/su-video.vue b/sheep/ui/su-video/su-video.vue
new file mode 100644
index 0000000..a75a79c
--- /dev/null
+++ b/sheep/ui/su-video/su-video.vue
@@ -0,0 +1,199 @@
+<template>
+  <view class="ui-video-wrap">
+    <video
+      :id="`sVideo${uid}`"
+      class="radius"
+      :style="[{ height: height + 'rpx' }]"
+      :src="src"
+      controls
+      object-fit="contain"
+      :enable-progress-gesture="state.enableProgressGesture"
+      :initial-time="initialTime"
+      x5-video-player-type="h5"
+      x-webkit-airplay="allow"
+      webkit-playsinline="true"
+      @error="videoErrorCallback"
+      @timeupdate="timeupdate"
+      @play="play"
+      @pause="pause"
+      @ended="end"
+      :poster="poster"
+      :autoplay="autoplay"
+    >
+      <!-- #ifdef APP-PLUS -->
+      <cover-view :style="{ transform: 'translateX(' + moveX + 'px)' }" />
+      <!-- #endif -->
+    </video>
+  </view>
+</template>
+<script setup>
+  /**
+   * 视频组件
+   *
+   * @property {Number} uid = 0 						- 当前轮播下标,还用来标记视频Id
+   * @property {Number} moveX = 0 					- app端轮播滑动距离
+   * @property {String} height = 300 					- 高度（rpx)
+   * @property {String} width = 750 					- 宽度（rpx)
+   * @property {Number} initialTime = 0 				- 指定视频播放位置
+   * @property {String} videoSize						- 视频大小
+   * @property {String} src 							- 视频播放地址
+   * @property {String} poster 						- 视频封面
+   *
+   *
+   */
+
+  import { reactive, nextTick, getCurrentInstance } from 'vue';
+  import sheep from '@/sheep';
+  const vm = getCurrentInstance();
+
+  // 数据
+  const state = reactive({
+    // #ifdef APP-PLUS
+    enableProgressGesture: true, // 手势滑动
+    // #endif
+    // #ifndef APP-PLUS
+    enableProgressGesture: false, // 手势滑动
+    // #endif
+    showModal: false, // 弹框
+  });
+
+  // 接收参数
+  const props = defineProps({
+    moveX: {
+      type: [Number],
+      default: 0,
+    },
+    // 下标索引
+    uid: {
+      type: [Number, String],
+      default: 0,
+    },
+    // 视频高度
+    height: {
+      type: Number,
+      default: 300,
+    },
+    // 视频宽度
+    width: {
+      type: Number,
+      default: 750,
+    },
+    // 指定视频初始播放位置，单位为秒（s）
+    initialTime: {
+      type: Number,
+      default: 1,
+    },
+    src: {
+      type: String,
+      default: '',
+    },
+    poster: {
+      type: String,
+      default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto',
+    },
+    autoplay: {
+      type: Boolean,
+      default: false,
+    }
+  });
+
+  // 事件
+  const emits = defineEmits(['videoTimeupdate']);
+
+  // 播放进度变化时触发,播放进度传给父组件
+  const timeupdate = (e) => {
+    emits('videoTimeupdate', e);
+  };
+  const videoErrorCallback = (e) => {
+    console.log('视频错误信息:', e.target.errMsg);
+  };
+  // 当开始/继续播放时触发play事件
+  const play = () => {
+    console.log('视频开始');
+  };
+  // 当暂停播放时触发 pause 事件
+  const pause = () => {
+    console.log('视频暂停');
+  };
+  // 视频结束触发end 时间
+  const end = () => {
+    console.log('视频结束');
+  };
+  // 开始播放
+  const startPlay = () => {
+    nextTick(() => {
+      const video = uni.createVideoContext(`sVideo${props.index}`, vm);
+      video.play();
+    });
+  };
+
+  //暂停播放
+  const pausePlay = () => {
+    const video = uni.createVideoContext(`sVideo${props.index}`, vm);
+    video.pause();
+  };
+
+  // 播放前拦截
+  const beforePlay = () => {
+    uni.getNetworkType({
+      success: (res) => {
+        const networkType = res.networkType;
+        // if (networkType === 'wifi' || networkType === 'ethernet') {
+        //   startPlay();
+        // } else {
+        //   uni.showModal({
+        //     title: '提示',
+        //     content: `当前为移动网络，播放视频需消耗手机流量，是否继续播放？${networkType}`,
+        //     success: (res) => {
+        //       if (res.confirm) {
+        //         startPlay();
+        //       } else {
+        //         state.isplay = false;
+        //       }
+        //     },
+        //   });
+        //   sheep.$helper.toast('正在消耗流量播放');
+        //   startPlay();
+        // }
+        startPlay();
+      },
+    });
+  };
+
+  // 抛出方法供父组件调用
+  defineExpose({
+    pausePlay,
+  });
+</script>
+<style lang="scss" scoped>
+  .radius {
+    width: 100%;
+  }
+  .ui-video-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .poster-wrap {
+      position: relative;
+      width: 100%;
+      height: 100%;
+
+      .poster-image {
+        width: 100%;
+        height: 100%;
+      }
+
+      .play-icon {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 80rpx;
+        height: 80rpx;
+        transform: translate(-50%, -50%);
+        background-color: rgba($color: #000000, $alpha: 0.1);
+        border-radius: 50%;
+      }
+    }
+  }
+</style>
diff --git a/sheep/url/index.js b/sheep/url/index.js
new file mode 100644
index 0000000..d216f83
--- /dev/null
+++ b/sheep/url/index.js
@@ -0,0 +1,199 @@
+import $store from '@/sheep/store';
+import { staticUrl } from '@/sheep/config';
+
+const cdn = (url = '', cdnurl = '') => {
+  if (!url) return '';
+  if (url.indexOf('http') === 0) {
+    return url;
+  }
+  if (cdnurl === '') {
+    cdnurl = $store('app').info.cdnurl;
+  }
+  return cdnurl + url;
+};
+export default {
+  // 添加cdn域名前缀
+  cdn,
+  // 对象存储自动剪裁缩略图
+  thumb: (url = '', params) => {
+    url = cdn(url);
+    return append_thumbnail_params(url, params);
+  },
+  // 静态资源地址
+  static: (url = '', staticurl = '') => {
+    if (staticurl === '') {
+      staticurl = staticUrl;
+    }
+    if (staticurl !== 'local') {
+      url = cdn(url, staticurl);
+    }
+    return url;
+  },
+  // css背景图片地址
+  css: (url = '', staticurl = '') => {
+    if (staticurl === '') {
+      staticurl = staticUrl;
+    }
+    if (staticurl !== 'local') {
+      url = cdn(url, staticurl);
+    }
+    // #ifdef APP-PLUS
+    if (staticurl === 'local') {
+      url = plus.io.convertLocalFileSystemURL(url);
+    }
+    // #endif
+    return `url(${url})`;
+  },
+};
+
+/**
+ * 追加对象存储自动裁剪/压缩参数
+ *
+ * @return string
+ */
+function append_thumbnail_params(url, params) {
+  const filesystem = $store('app').info.filesystem;
+  if (filesystem === 'public') {
+    return url;
+  }
+  let width = params.width || '200'; // 宽度
+  let height = params.height || '200'; // 高度
+  let mode = params.mode || 'lfit'; // 缩放模式
+  let quality = params.quality || 90; // 压缩质量
+  let gravity = params.gravity || 'center'; // 剪裁质量
+  let suffix = '';
+  let crop_str = '';
+  let quality_str = '';
+  let size = width + 'x' + height;
+  switch (filesystem) {
+    case 'aliyun':
+      // 裁剪
+      if (!gravity && gravity != 'center') {
+        // 指定了裁剪区域
+        mode = 'mfit';
+        crop_str = '/crop,g_' + gravityFormatMap('aliyun', gravity) + ',w_' + width + ',h_' + height;
+      }
+
+      // 质量压缩
+      if (quality > 0 && quality < 100) {
+        quality_str = '/quality,q_' + quality;
+      }
+
+      // 缩放参数
+      suffix = 'x-oss-process=image/resize,m_' + mode + ',w_' + width + ',h_' + height;
+
+      // 拼接裁剪和质量压缩
+      suffix += crop_str + quality_str;
+      break;
+    case 'qcloud':
+      let mode_str = 'thumbnail';
+      if (mode == 'fill' || (!gravity && gravity != 'center')) {
+        // 指定了裁剪区域
+        mode_str = 'crop';
+        mode = 'fill';
+        crop_str = '/gravity/' + gravityFormatMap('qcloud', gravity);
+      }
+
+      // 质量压缩
+      if (quality > 0 && quality < 100) {
+        quality_str = '/rquality/' + quality;
+      }
+
+      switch (mode) {
+        case 'lfit':
+          size = '' + size + '>';
+          break;
+        case 'mfit':
+          size = '!' + size + 'r';
+        case 'fill':
+          break;
+        case 'pad':
+          size = size + '/pad/1';
+          break;
+        case 'fixed':
+          size = size + '!';
+          break;
+      }
+
+      suffix = 'imageMogr2/' + mode_str + '/' + size + crop_str + quality_str;
+      break;
+    case 'qiniu':
+      if (mode == 'fill' || (!gravity && gravity != 'center')) {
+        // 指定了裁剪区域,全部转为 mfit
+        mode = 'mfit';
+        crop_str = '/gravity/' + gravityFormatMap('qiniu', gravity) + '/crop/' + size;
+      }
+      // 质量压缩
+      if (quality > 0 && quality < 100) {
+        quality_str = '/quality/' + quality;
+      }
+
+      switch (mode) {
+        case 'lfit':
+        case 'pad': // 七牛不支持在缩放之后，尺寸不足时，填充背景色,所以这里和 lfit 模式一样
+          size = size + '>';
+          break;
+        case 'mfit':
+          size = '!' + size + 'r';
+          break;
+        case 'fill':
+          // 会被转为 mfit
+          break;
+        case 'fixed':
+          size = size + '!';
+          break;
+      }
+
+      suffix = 'imageMogr2/thumbnail/' + size + crop_str + quality_str;
+      break;
+  }
+  return url + '?' + suffix;
+}
+
+/**
+ * 裁剪区域格式转换
+ *
+ * @param string $type aliyun|qcloud|qiniu
+ * @param string $gravity 统一的裁剪区域字符
+ *
+ * @return string
+ */
+function gravityFormatMap(type, gravity) {
+  let gravityFormat = {
+    aliyun: {
+      north_west: 'nw', // 左上
+      north: 'north', // 中上
+      north_east: 'ne', // 右上
+      west: 'west', // 左中
+      center: 'center', // 中部
+      east: 'east', // 右中
+      south_west: 'sw', // 左下
+      south: 'south', // 中下
+      south_east: 'se', // 右下
+    },
+    qcloud: {
+      northwest: 'nw', // 左上
+      north: 'north', // 中上
+      northeast: 'ne', // 右上
+      west: 'west', // 左中
+      center: 'center', // 中部
+      east: 'east', // 右中
+      southwest: 'sw', // 左下
+      south: 'south', // 中下
+      southeast: 'se', // 右下
+    },
+    qiniu: {
+      NorthWest: 'nw', // 左上
+      North: 'north', // 中上
+      NorthEast: 'ne', // 右上
+      West: 'west', // 左中
+      Center: 'center', // 中部
+      East: 'east', // 右中
+      SouthWest: 'sw', // 左下
+      South: 'south', // 中下
+      SouthEast: 'se', // 右下
+    },
+  };
+
+  return gravityFormat[type][gravity];
+}
diff --git a/sheep/util/const.js b/sheep/util/const.js
new file mode 100644
index 0000000..e5eba0c
--- /dev/null
+++ b/sheep/util/const.js
@@ -0,0 +1,68 @@
+// ========== MALL - 营销模块 ==========
+
+import dayjs from "dayjs";
+
+/**
+ * 优惠类型枚举
+ */
+export const PromotionDiscountTypeEnum = {
+    PRICE: {
+        type: 1,
+        name: '满减'
+    },
+    PERCENT: {
+        type: 2,
+        name: '折扣'
+    }
+}
+
+/**
+ * 优惠劵模板的有限期类型的枚举
+ */
+export const CouponTemplateValidityTypeEnum = {
+    DATE: {
+        type: 1,
+        name: '固定日期可用'
+    },
+    TERM: {
+        type: 2,
+        name: '领取之后可用'
+    }
+}
+
+/**
+ * 营销的商品范围枚举
+ */
+export const PromotionProductScopeEnum = {
+    ALL: {
+        scope: 1,
+        name: '通用劵'
+    },
+    SPU: {
+        scope: 2,
+        name: '商品劵'
+    },
+    CATEGORY: {
+        scope: 3,
+        name: '品类劵'
+    }
+}
+
+
+// 时间段的状态枚举
+export const TimeStatusEnum = {
+    WAIT_START: '即将开始',
+    STARTED: '进行中',
+    END: '已结束',
+}
+
+export const getTimeStatusEnum = (startTime, endTime) => {
+    const now = dayjs();
+    if (now.isBefore(startTime)) {
+        return TimeStatusEnum.WAIT_START;
+    } else if (now.isAfter(endTime)) {
+        return TimeStatusEnum.END;
+    } else {
+        return TimeStatusEnum.STARTED;
+    }
+}
diff --git a/sheep/util/index.js b/sheep/util/index.js
new file mode 100644
index 0000000..9b355e8
--- /dev/null
+++ b/sheep/util/index.js
@@ -0,0 +1,115 @@
+import dayjs from "dayjs";
+
+/**
+ * 将一个整数转换为分数保留两位小数
+ * @param {number | string | undefined} num 整数
+ * @return {number} 分数
+ */
+export const formatToFraction = (num) => {
+  if (typeof num === 'undefined') return 0
+  const parsedNumber = typeof num === 'string' ? parseFloat(num) : num
+  return parseFloat((parsedNumber / 100).toFixed(2))
+}
+
+/**
+ * 将一个数转换为 1.00 这样
+ * 数据呈现的时候使用
+ *
+ * @param {number | string | undefined} num 整数
+ * @return {string} 分数
+ */
+export const floatToFixed2 = (num) => {
+  let str = '0.00'
+  if (typeof num === 'undefined') {
+    return str
+  }
+  const f = formatToFraction(num)
+  const decimalPart = f.toString().split('.')[1]
+  const len = decimalPart ? decimalPart.length : 0
+  switch (len) {
+    case 0:
+      str = f.toString() + '.00'
+      break
+    case 1:
+      str = f.toString() + '.0'
+      break
+    case 2:
+      str = f.toString()
+      break
+  }
+  return str
+}
+
+/**
+ * 将一个分数转换为整数
+ *
+ * @param {number | string | undefined} num 分数
+ * @return {number} 整数
+ */
+export const convertToInteger = (num) => {
+  if (typeof num === 'undefined') return 0
+  const parsedNumber = typeof num === 'string' ? parseFloat(num) : num
+  // TODO 分转元后还有小数则四舍五入
+  return Math.round(parsedNumber * 100)
+}
+
+/**
+ * 时间日期转换
+ * @param {dayjs.ConfigType} date 当前时间，new Date() 格式
+ * @param {string} format 需要转换的时间格式字符串
+ * @description format 字符串随意，如 `YYYY-mm、YYYY-mm-dd`
+ * @description format 季度："YYYY-mm-dd HH:MM:SS QQQQ"
+ * @description format 星期："YYYY-mm-dd HH:MM:SS WWW"
+ * @description format 几周："YYYY-mm-dd HH:MM:SS ZZZ"
+ * @description format 季度 + 星期 + 几周："YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ"
+ * @returns {string} 返回拼接后的时间字符串
+ */
+export function formatDate(date, format) {
+  // 日期不存在，则返回空
+  if (!date) {
+    return ''
+  }
+  // 日期存在，则进行格式化
+  if (format === undefined) {
+    format = 'YYYY-MM-DD HH:mm:ss'
+  }
+  return dayjs(date).format(format)
+}
+
+/**
+ * 构造树型结构数据
+ *
+ * @param {*} data 数据源
+ * @param {*} id id字段 默认 'id'
+ * @param {*} parentId 父节点字段 默认 'parentId'
+ * @param {*} children 孩子节点字段 默认 'children'
+ * @param {*} rootId 根Id 默认 0
+ */
+export function handleTree(data, id = 'id', parentId = 'parentId', children = 'children', rootId = 0) {
+  // 对源数据深度克隆
+  const cloneData = JSON.parse(JSON.stringify(data))
+  // 循环所有项
+  const treeData = cloneData.filter(father => {
+    let branchArr = cloneData.filter(child => {
+      //返回每一项的子级数组
+      return father[id] === child[parentId]
+    });
+    branchArr.length > 0 ? father.children = branchArr : '';
+    //返回第一层
+    return father[parentId] === rootId;
+  });
+  return treeData !== '' ? treeData : data;
+}
+
+/**
+ * 重置分页对象
+ *
+ * TODO 芋艿：需要处理其它页面
+ *
+ * @param pagination 分页对象
+ */
+export function resetPagination(pagination) {
+  pagination.list = [];
+  pagination.total = 0;
+  pagination.pageNo = 1;
+}
\ No newline at end of file
diff --git a/sheep/validate/form.js b/sheep/validate/form.js
new file mode 100644
index 0000000..07b5725
--- /dev/null
+++ b/sheep/validate/form.js
@@ -0,0 +1,164 @@
+/**
+ * Validate v1.0.0 通用验证
+ * @description 项目中用到的表单验证规则
+ */
+import test from '@/sheep/helper/test.js';
+
+// 手机号
+export const mobile = {
+  rules: [
+    {
+      required: true,
+      errorMessage: '请输入手机号',
+    },
+    {
+      validateFunction: function (rule, value, data, callback) {
+        if (!test.mobile(value)) {
+          callback('手机号码格式不正确');
+        }
+        return true;
+      },
+    },
+  ],
+};
+
+// 密码
+export const password = {
+  rules: [
+    {
+      required: true,
+      errorMessage: '请输入密码',
+    },
+    {
+      validateFunction: function (rule, value, data, callback) {
+        if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/.test(value)) {
+          callback('需包含字母和数字,长度在6-12之间');
+        }
+        return true;
+      },
+    },
+  ],
+};
+
+// 短信验证码
+export const code = {
+  rules: [
+    {
+      required: true,
+      errorMessage: '请输入验证码',
+    },
+  ],
+};
+
+// 真实姓名
+export const realName = {
+  rules: [
+    {
+      required: true,
+      errorMessage: '请输入姓名',
+    },
+    {
+      validateFunction: function (rule, value, data, callback) {
+        if (!test.chinese(value)) {
+          callback('请输入汉字');
+        }
+        return true;
+      },
+    },
+  ],
+};
+
+export const taxName = {
+  rules: [
+    {
+      required: true,
+      errorMessage: '请输入发票抬头名称',
+    },
+    {
+      validateFunction: function (rule, value, data, callback) {
+        if (!test.chinese(value)) {
+          callback('请输入汉字');
+        }
+        return true;
+      },
+    },
+  ],
+};
+
+// 税号
+export const taxNo = {
+  rules: [
+    {
+      required: true,
+      errorMessage: '请输入税号',
+    },
+  ],
+};
+
+// 开户行
+export const bankName = {
+  rules: [
+    {
+      required: true,
+      errorMessage: '请输入开户行',
+    },
+    {
+      validateFunction: function (rule, value, data, callback) {
+        if (!test.chinese(value)) {
+          callback('请输入汉字');
+        }
+        return true;
+      },
+    },
+  ],
+};
+// 银行卡号
+export const bankCode = {
+  rules: [
+    {
+      required: true,
+      errorMessage: '请输入银行卡号',
+    },
+    {
+      validateFunction: function (rule, value, data, callback) {
+        if (!test.number(value)) {
+          callback('请输入正确账号');
+        }
+        return true;
+      },
+    },
+  ],
+};
+
+// 支付宝账号
+export const alipayAccount = {
+  rules: [
+    {
+      required: true,
+      errorMessage: '请输入支付宝账号',
+    },
+    {
+      validateFunction: function (rule, value, data, callback) {
+        let isEmail = test.email(value);
+        let isMobile = test.mobile(value);
+
+        if (!isEmail && !isMobile) {
+          callback('请输入正确账号');
+        }
+        return true;
+      },
+    },
+  ],
+};
+
+export default {
+  mobile,
+  alipayAccount,
+  bankCode,
+  bankName,
+  realName,
+  password,
+  code,
+  taxNo,
+  taxName,
+};
diff --git a/static/activity-left.png b/static/activity-left.png
new file mode 100644
index 0000000..62e3b83
Binary files /dev/null and b/static/activity-left.png differ
diff --git a/static/activity-right.png b/static/activity-right.png
new file mode 100644
index 0000000..e18a96c
Binary files /dev/null and b/static/activity-right.png differ
diff --git a/static/cart-empty.png b/static/cart-empty.png
new file mode 100644
index 0000000..355d182
Binary files /dev/null and b/static/cart-empty.png differ
diff --git a/static/collect-empty.png b/static/collect-empty.png
new file mode 100644
index 0000000..300bd21
Binary files /dev/null and b/static/collect-empty.png differ
diff --git a/static/comment-empty.png b/static/comment-empty.png
new file mode 100644
index 0000000..810a3b1
Binary files /dev/null and b/static/comment-empty.png differ
diff --git a/static/coupon-empty.png b/static/coupon-empty.png
new file mode 100644
index 0000000..9e14d9d
Binary files /dev/null and b/static/coupon-empty.png differ
diff --git a/static/data-empty.png b/static/data-empty.png
new file mode 100644
index 0000000..a682ff7
Binary files /dev/null and b/static/data-empty.png differ
diff --git a/static/goods-empty.png b/static/goods-empty.png
new file mode 100644
index 0000000..bd42eca
Binary files /dev/null and b/static/goods-empty.png differ
diff --git a/static/images/search.png b/static/images/search.png
new file mode 100644
index 0000000..157be9d
Binary files /dev/null and b/static/images/search.png differ
diff --git a/static/images/sort1.png b/static/images/sort1.png
new file mode 100644
index 0000000..2a88241
Binary files /dev/null and b/static/images/sort1.png differ
diff --git a/static/images/sort2.png b/static/images/sort2.png
new file mode 100644
index 0000000..74faf73
Binary files /dev/null and b/static/images/sort2.png differ
diff --git a/static/images/sort3.png b/static/images/sort3.png
new file mode 100644
index 0000000..c3ce7d4
Binary files /dev/null and b/static/images/sort3.png differ
diff --git a/static/internet-empty.png b/static/internet-empty.png
new file mode 100644
index 0000000..55ac2f6
Binary files /dev/null and b/static/internet-empty.png differ
diff --git a/static/logo.png b/static/logo.png
new file mode 100644
index 0000000..b5771e2
Binary files /dev/null and b/static/logo.png differ
diff --git a/static/order-empty.png b/static/order-empty.png
new file mode 100644
index 0000000..a7b46fe
Binary files /dev/null and b/static/order-empty.png differ
diff --git a/static/soldout-empty.png b/static/soldout-empty.png
new file mode 100644
index 0000000..1761466
Binary files /dev/null and b/static/soldout-empty.png differ
diff --git a/uni.promisify.adaptor.js b/uni.promisify.adaptor.js
new file mode 100644
index 0000000..47fbce1
--- /dev/null
+++ b/uni.promisify.adaptor.js
@@ -0,0 +1,10 @@
+uni.addInterceptor({
+  returnValue (res) {
+    if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
+      return res;
+    }
+    return new Promise((resolve, reject) => {
+      res.then((res) => res[0] ? reject(res[0]) : resolve(res[1]));
+    });
+  },
+});
\ No newline at end of file
diff --git a/uni.scss b/uni.scss
new file mode 100644
index 0000000..eadc5cd
--- /dev/null
+++ b/uni.scss
@@ -0,0 +1,76 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+@import '@/sheep/scss/_var.scss';
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+
+/* 颜色变量 */
+
+/* 行为相关颜色 */
+$uni-color-primary: #007aff;
+$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:#e5e5e5;
+
+/* 尺寸变量 */
+
+/* 文字尺寸 */
+$uni-font-size-sm:12px;
+$uni-font-size-base:14px;
+$uni-font-size-lg:16;
+
+/* 图片尺寸 */
+$uni-img-size-sm:20px;
+$uni-img-size-base:26px;
+$uni-img-size-lg:40px;
+
+/* Border Radius */
+$uni-border-radius-sm: 2px;
+$uni-border-radius-base: 3px;
+$uni-border-radius-lg: 6px;
+$uni-border-radius-circle: 50%;
+
+/* 水平间距 */
+$uni-spacing-row-sm: 5px;
+$uni-spacing-row-base: 10px;
+$uni-spacing-row-lg: 15px;
+
+/* 垂直间距 */
+$uni-spacing-col-sm: 4px;
+$uni-spacing-col-base: 8px;
+$uni-spacing-col-lg: 12px;
+
+/* 透明度 */
+$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
+
+/* 文章场景相关 */
+$uni-color-title: #2C405A; // 文章标题颜色
+$uni-font-size-title:20px;
+$uni-color-subtitle: #555555; // 二级标题颜色
+$uni-font-size-subtitle:26px;
+$uni-color-paragraph: #3F536E; // 文章段落颜色
+$uni-font-size-paragraph:15px;
diff --git a/uni_modules/mp-html/README.md b/uni_modules/mp-html/README.md
new file mode 100644
index 0000000..7626289
--- /dev/null
+++ b/uni_modules/mp-html/README.md
@@ -0,0 +1,194 @@
+## 为减小组件包的大小，默认组件包中不包含编辑、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`  
+群3：`960265313`  
+
+查看 [问题反馈](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..6fd03eb
--- /dev/null
+++ b/uni_modules/mp-html/changelog.md
@@ -0,0 +1,150 @@
+## v2.5.0（2024-04-22）
+1. `U` `play` 事件增加返回 `src` 等信息 [详细](https://github.com/jin-yufeng/mp-html/issues/526)
+2. `U` `preview-img` 属性支持设置为 `all` 开启 `base64` 图片预览 [详细](https://github.com/jin-yufeng/mp-html/issues/536)
+3. `U` `editable` 插件增加简易模式（点击文字直接编辑）
+4. `U` `latex` 插件支持块级公式 [详细](https://github.com/jin-yufeng/mp-html/issues/582)
+5. `F` 修复了表格部分情况下背景丢失的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/587)
+6. `F` 修复了部分 `svg` 无法显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/591)
+7. `F` 修复了 `h5` 和 `app` 端部分情况下样式无法识别的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/518)
+8. `F` 修复了 `latex` 插件部分情况下显示不正确的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/580)
+9. `F` 修复了 `editable` 插件表格无法删除的问题
+10. `F` 修复了 `editable` 插件 `vue3` `h5` 端点击图片报错的问题
+11. `F` 修复了 `editable` 插件点击表格没有菜单栏的问题
+## 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..5d1d36d
--- /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="/uni_modules/mp-html/static/app-plus/mp-html/local.html" :style="'margin-top:-2px;height:' + height + 'px'" @onPostMessage="_onMessage" />
+    <!-- #endif -->
+  </view>
+</template>
+
+<script>
+/**
+ * mp-html v2.5.0
+ * @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..09252fd
--- /dev/null
+++ b/uni_modules/mp-html/components/mp-html/node/node.vue
@@ -0,0 +1,587 @@
+<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) {
+      const i = e.currentTarget.dataset.i
+      const node = this.childs[i]
+      this.root.$emit('play', {
+        source: node.name,
+        attrs: {
+          ...node.attrs,
+          src: node.src[this.ctrl[i] || 0]
+        }
+      })
+      // #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..5a93000
--- /dev/null
+++ b/uni_modules/mp-html/components/mp-html/parser.js
@@ -0,0 +1,1393 @@
+/**
+ * @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()
+  // #ifdef (VUE3 && (H5 || APP-PLUS)) || APP-PLUS-NVUE
+  if (name.includes('?') || name.includes(';')) {
+    this.attrName = undefined
+    return
+  }
+  // #endif
+  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:') && this.options.previewImg !== 'all' && !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.replace(/"/g, '')}"`
+        }
+      }
+      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 === 'tbody' || node.name === 'tr') && node.flag && node.c) {
+    node.flag = undefined;
+    (function traversal (nodes) {
+      for (let i = 0; i < nodes.length; i++) {
+        if (nodes[i].name === 'td') {
+          // 颜色样式设置给单元格避免丢失
+          for (const style of ['color', 'background', 'background-color']) {
+            if (styleObj[style]) {
+              nodes[i].attrs.style = style + ':' + styleObj[style] + ';' + (nodes[i].attrs.style || '')
+            }
+          }
+        } else {
+          traversal(nodes[i].children || [])
+        }
+      }
+    })(children)
+  } 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].name === 'tbody' || this.stack[i].name === 'tr') {
+        this.stack[i].flag = 1 // 指示含有合并单元格
+      }
+    }
+  } 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..84c07e3
--- /dev/null
+++ b/uni_modules/mp-html/package.json
@@ -0,0 +1,76 @@
+{
+    "id": "mp-html",
+    "displayName": "mp-html 富文本组件【全端支持，支持编辑、latex等扩展】",
+    "version": "v2.5.0",
+    "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/uni_modules/uni-badge/changelog.md b/uni_modules/uni-badge/changelog.md
new file mode 100644
index 0000000..e352c60
--- /dev/null
+++ b/uni_modules/uni-badge/changelog.md
@@ -0,0 +1,33 @@
+## 1.2.2（2023-01-28）
+- 修复 运行/打包 控制台警告问题
+## 1.2.1（2022-09-05）
+- 修复 当 text 超过 max-num 时，badge 的宽度计算是根据 text 的长度计算，更改为 css 计算实际展示宽度，详见:[https://ask.dcloud.net.cn/question/150473](https://ask.dcloud.net.cn/question/150473)
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-badge](https://uniapp.dcloud.io/component/uniui/uni-badge)
+## 1.1.7（2021-11-08）
+- 优化 升级ui
+- 修改 size 属性默认值调整为 small
+- 修改 type 属性，默认值调整为 error，info 替换 default
+## 1.1.6（2021-09-22）
+- 修复 在字节小程序上样式不生效的 bug
+## 1.1.5（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.1.4（2021-07-29）
+- 修复 去掉 nvue 不支持css 的 align-self 属性，nvue 下不暂支持 absolute 属性
+## 1.1.3（2021-06-24）
+- 优化 示例项目
+## 1.1.1（2021-05-12）
+- 新增 组件示例地址
+## 1.1.0（2021-05-12）
+- 新增 uni-badge 的 absolute 属性，支持定位
+- 新增 uni-badge 的 offset 属性，支持定位偏移
+- 新增 uni-badge 的 is-dot 属性，支持仅显示有一个小点
+- 新增 uni-badge 的 max-num 属性，支持自定义封顶的数字值，超过 99 显示99+
+- 优化 uni-badge 属性 custom-style， 支持以对象形式自定义样式
+## 1.0.7（2021-05-07）
+- 修复 uni-badge 在 App 端，数字小于10时不是圆形的bug
+- 修复 uni-badge 在父元素不是 flex 布局时，宽度缩小的bug
+- 新增 uni-badge 属性 custom-style， 支持自定义样式
+## 1.0.6（2021-02-04）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-badge/components/uni-badge/uni-badge.vue b/uni_modules/uni-badge/components/uni-badge/uni-badge.vue
new file mode 100644
index 0000000..956354b
--- /dev/null
+++ b/uni_modules/uni-badge/components/uni-badge/uni-badge.vue
@@ -0,0 +1,268 @@
+<template>
+	<view class="uni-badge--x">
+		<slot />
+		<text v-if="text" :class="classNames" :style="[positionStyle, customStyle, dotStyle]"
+			class="uni-badge" @click="onClick()">{{displayValue}}</text>
+	</view>
+</template>
+
+<script>
+	/**
+	 * Badge 数字角标
+	 * @description 数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=21
+	 * @property {String} text 角标内容
+	 * @property {String} size = [normal|small] 角标内容
+	 * @property {String} type = [info|primary|success|warning|error] 颜色类型
+	 * 	@value info 灰色
+	 * 	@value primary 蓝色
+	 * 	@value success 绿色
+	 * 	@value warning 黄色
+	 * 	@value error 红色
+	 * @property {String} inverted = [true|false] 是否无需背景颜色
+	 * @property {Number} maxNum 展示封顶的数字值，超过 99 显示 99+
+	 * @property {String} absolute = [rightTop|rightBottom|leftBottom|leftTop] 开启绝对定位, 角标将定位到其包裹的标签的四角上
+	 * 	@value rightTop 右上
+	 * 	@value rightBottom 右下
+	 * 	@value leftTop 左上
+	 * 	@value leftBottom 左下
+	 * @property {Array[number]} offset	距定位角中心点的偏移量，只有存在 absolute 属性时有效，例如：[-10, -10] 表示向外偏移 10px，[10, 10] 表示向 absolute 指定的内偏移 10px
+	 * @property {String} isDot = [true|false] 是否显示为一个小点
+	 * @event {Function} click 点击 Badge 触发事件
+	 * @example <uni-badge text="1"></uni-badge>
+	 */
+
+	export default {
+		name: 'UniBadge',
+		emits: ['click'],
+		props: {
+			type: {
+				type: String,
+				default: 'error'
+			},
+			inverted: {
+				type: Boolean,
+				default: false
+			},
+			isDot: {
+				type: Boolean,
+				default: false
+			},
+			maxNum: {
+				type: Number,
+				default: 99
+			},
+			absolute: {
+				type: String,
+				default: ''
+			},
+			offset: {
+				type: Array,
+				default () {
+					return [0, 0]
+				}
+			},
+			text: {
+				type: [String, Number],
+				default: ''
+			},
+			size: {
+				type: String,
+				default: 'small'
+			},
+			customStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			}
+		},
+		data() {
+			return {};
+		},
+		computed: {
+			width() {
+				return String(this.text).length * 8 + 12
+			},
+			classNames() {
+				const {
+					inverted,
+					type,
+					size,
+					absolute
+				} = this
+				return [
+					inverted ? 'uni-badge--' + type + '-inverted' : '',
+					'uni-badge--' + type,
+					'uni-badge--' + size,
+					absolute ? 'uni-badge--absolute' : ''
+				].join(' ')
+			},
+			positionStyle() {
+				if (!this.absolute) return {}
+				let w = this.width / 2,
+					h = 10
+				if (this.isDot) {
+					w = 5
+					h = 5
+				}
+				const x = `${- w  + this.offset[0]}px`
+				const y = `${- h + this.offset[1]}px`
+
+				const whiteList = {
+					rightTop: {
+						right: x,
+						top: y
+					},
+					rightBottom: {
+						right: x,
+						bottom: y
+					},
+					leftBottom: {
+						left: x,
+						bottom: y
+					},
+					leftTop: {
+						left: x,
+						top: y
+					}
+				}
+				const match = whiteList[this.absolute]
+				return match ? match : whiteList['rightTop']
+			},
+			dotStyle() {
+				if (!this.isDot) return {}
+				return {
+					width: '10px',
+					minWidth: '0',
+					height: '10px',
+					padding: '0',
+					borderRadius: '10px'
+				}
+			},
+			displayValue() {
+				const {
+					isDot,
+					text,
+					maxNum
+				} = this
+				return isDot ? '' : (Number(text) > maxNum ? `${maxNum}+` : text)
+			}
+		},
+		methods: {
+			onClick() {
+				this.$emit('click');
+			}
+		}
+	};
+</script>
+
+<style lang="scss" >
+	$uni-primary: #2979ff !default;
+	$uni-success: #4cd964 !default;
+	$uni-warning: #f0ad4e !default;
+	$uni-error: #dd524d !default;
+	$uni-info: #909399 !default;
+
+
+	$bage-size: 12px;
+	$bage-small: scale(0.8);
+
+	.uni-badge--x {
+		/* #ifdef APP-NVUE */
+		// align-self: flex-start;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		display: inline-block;
+		/* #endif */
+		position: relative;
+	}
+
+	.uni-badge--absolute {
+		position: absolute;
+	}
+
+	.uni-badge--small {
+		transform: $bage-small;
+		transform-origin: center center;
+	}
+
+	.uni-badge {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		overflow: hidden;
+		box-sizing: border-box;
+		font-feature-settings: "tnum";
+		min-width: 20px;
+		/* #endif */
+		justify-content: center;
+		flex-direction: row;
+		height: 20px;
+		padding: 0 4px;
+		line-height: 18px;
+		color: #fff;
+		border-radius: 100px;
+		background-color: $uni-info;
+		background-color: transparent;
+		border: 1px solid #fff;
+		text-align: center;
+		font-family: 'Helvetica Neue', Helvetica, sans-serif;
+		font-size: $bage-size;
+		/* #ifdef H5 */
+		z-index: 999;
+		cursor: pointer;
+		/* #endif */
+
+		&--info {
+			color: #fff;
+			background-color: $uni-info;
+		}
+
+		&--primary {
+			background-color: $uni-primary;
+		}
+
+		&--success {
+			background-color: $uni-success;
+		}
+
+		&--warning {
+			background-color: $uni-warning;
+		}
+
+		&--error {
+			background-color: $uni-error;
+		}
+
+		&--inverted {
+			padding: 0 5px 0 0;
+			color: $uni-info;
+		}
+
+		&--info-inverted {
+			color: $uni-info;
+			background-color: transparent;
+		}
+
+		&--primary-inverted {
+			color: $uni-primary;
+			background-color: transparent;
+		}
+
+		&--success-inverted {
+			color: $uni-success;
+			background-color: transparent;
+		}
+
+		&--warning-inverted {
+			color: $uni-warning;
+			background-color: transparent;
+		}
+
+		&--error-inverted {
+			color: $uni-error;
+			background-color: transparent;
+		}
+
+	}
+</style>
diff --git a/uni_modules/uni-badge/package.json b/uni_modules/uni-badge/package.json
new file mode 100644
index 0000000..b0bac93
--- /dev/null
+++ b/uni_modules/uni-badge/package.json
@@ -0,0 +1,85 @@
+{
+  "id": "uni-badge",
+  "displayName": "uni-badge 数字角标",
+  "version": "1.2.2",
+  "description": "数字角标（徽章）组件，在元素周围展示消息提醒，一般用于列表、九宫格、按钮等地方。",
+  "keywords": [
+    "",
+    "badge",
+    "uni-ui",
+    "uniui",
+    "数字角标",
+    "徽章"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "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": "y",
+          "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/uni-badge/readme.md b/uni_modules/uni-badge/readme.md
new file mode 100644
index 0000000..bdf175d
--- /dev/null
+++ b/uni_modules/uni-badge/readme.md
@@ -0,0 +1,10 @@
+## Badge 数字角标
+> **组件名：uni-badge**
+> 代码块： `uBadge`
+
+数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景，
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-badge)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
diff --git a/uni_modules/uni-calendar/changelog.md b/uni_modules/uni-calendar/changelog.md
new file mode 100644
index 0000000..a728bb8
--- /dev/null
+++ b/uni_modules/uni-calendar/changelog.md
@@ -0,0 +1,28 @@
+## 1.4.11（2024-01-10）
+- 修复 回到今天时，月份显示不一致问题
+## 1.4.10（2023-04-10）
+- 修复 某些情况 monthSwitch 未触发的Bug
+## 1.4.9（2023-02-02）
+- 修复 某些情况切换月份错误的Bug
+## 1.4.8（2023-01-30）
+- 修复 某些情况切换月份错误的Bug [详情](https://ask.dcloud.net.cn/question/161964)
+## 1.4.7（2022-09-16）
+- 优化 支持使用 uni-scss 控制主题色
+## 1.4.6（2022-09-08）
+- 修复 表头年月切换，导致改变当前日期为选择月1号，且未触发change事件的Bug
+## 1.4.5（2022-02-25）
+- 修复 条件编译 nvue 不支持的 css 样式的Bug
+## 1.4.4（2022-02-25）
+- 修复 条件编译 nvue 不支持的 css 样式的Bug
+## 1.4.3（2021-09-22）
+- 修复 startDate、 endDate 属性失效的Bug
+## 1.4.2（2021-08-24）
+- 新增 支持国际化
+## 1.4.1（2021-08-05）
+- 修复 弹出层被 tabbar 遮盖的Bug
+## 1.4.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.3.16（2021-05-12）
+- 新增 组件示例地址
+## 1.3.15（2021-02-04）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-calendar/components/uni-calendar/calendar.js b/uni_modules/uni-calendar/components/uni-calendar/calendar.js
new file mode 100644
index 0000000..b8d7d6f
--- /dev/null
+++ b/uni_modules/uni-calendar/components/uni-calendar/calendar.js
@@ -0,0 +1,546 @@
+/**
+* @1900-2100区间内的公历、农历互转
+* @charset UTF-8
+* @github  https://github.com/jjonline/calendar.js
+* @Author  Jea杨(JJonline@JJonline.Cn)
+* @Time    2014-7-21
+* @Time    2016-8-13 Fixed 2033hex、Attribution Annals
+* @Time    2016-9-25 Fixed lunar LeapMonth Param Bug
+* @Time    2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
+* @Version 1.0.3
+* @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
+* @农历转公历：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
+*/
+/* eslint-disable */
+var calendar = {
+
+  /**
+      * 农历1900-2100的润大小信息表
+      * @Array Of Property
+      * @return Hex
+      */
+  lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, // 1900-1909
+    0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, // 1910-1919
+    0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, // 1920-1929
+    0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, // 1930-1939
+    0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, // 1940-1949
+    0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, // 1950-1959
+    0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, // 1960-1969
+    0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, // 1970-1979
+    0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, // 1980-1989
+    0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, // 1990-1999
+    0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, // 2000-2009
+    0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, // 2010-2019
+    0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, // 2020-2029
+    0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, // 2030-2039
+    0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, // 2040-2049
+    /** Add By JJonline@JJonline.Cn**/
+    0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, // 2050-2059
+    0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, // 2060-2069
+    0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, // 2070-2079
+    0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, // 2080-2089
+    0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, // 2090-2099
+    0x0d520], // 2100
+
+  /**
+      * 公历每个月份的天数普通表
+      * @Array Of Property
+      * @return Number
+      */
+  solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
+
+  /**
+      * 天干地支之天干速查表
+      * @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
+      * @return Cn string
+      */
+  Gan: ['\u7532', '\u4e59', '\u4e19', '\u4e01', '\u620a', '\u5df1', '\u5e9a', '\u8f9b', '\u58ec', '\u7678'],
+
+  /**
+      * 天干地支之地支速查表
+      * @Array Of Property
+      * @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
+      * @return Cn string
+      */
+  Zhi: ['\u5b50', '\u4e11', '\u5bc5', '\u536f', '\u8fb0', '\u5df3', '\u5348', '\u672a', '\u7533', '\u9149', '\u620c', '\u4ea5'],
+
+  /**
+      * 天干地支之地支速查表<=>生肖
+      * @Array Of Property
+      * @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
+      * @return Cn string
+      */
+  Animals: ['\u9f20', '\u725b', '\u864e', '\u5154', '\u9f99', '\u86c7', '\u9a6c', '\u7f8a', '\u7334', '\u9e21', '\u72d7', '\u732a'],
+
+  /**
+      * 24节气速查表
+      * @Array Of Property
+      * @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
+      * @return Cn string
+      */
+  solarTerm: ['\u5c0f\u5bd2', '\u5927\u5bd2', '\u7acb\u6625', '\u96e8\u6c34', '\u60ca\u86f0', '\u6625\u5206', '\u6e05\u660e', '\u8c37\u96e8', '\u7acb\u590f', '\u5c0f\u6ee1', '\u8292\u79cd', '\u590f\u81f3', '\u5c0f\u6691', '\u5927\u6691', '\u7acb\u79cb', '\u5904\u6691', '\u767d\u9732', '\u79cb\u5206', '\u5bd2\u9732', '\u971c\u964d', '\u7acb\u51ac', '\u5c0f\u96ea', '\u5927\u96ea', '\u51ac\u81f3'],
+
+  /**
+      * 1900-2100各年的24节气日期速查表
+      * @Array Of Property
+      * @return 0x string For splice
+      */
+  sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f',
+    '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+    '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa',
+    '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f',
+    'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f',
+    '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa',
+    '97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2',
+    '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f',
+    '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+    '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+    '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722',
+    '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f',
+    '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+    '97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+    '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722',
+    '9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f',
+    '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
+    '97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
+    '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722',
+    '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+    '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+    '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
+    '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722',
+    '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+    '97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+    '97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
+    '9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722',
+    '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
+    '97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
+    '9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
+    '7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
+    '7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+    '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
+    '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
+    '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
+    '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+    '97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
+    '9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
+    '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721',
+    '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2',
+    '977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
+    '7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
+    '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd',
+    '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
+    '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
+    '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
+    '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd',
+    '7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
+    '977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
+    '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721',
+    '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5',
+    '7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722',
+    '7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
+    '7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
+    '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35',
+    '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
+    '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721',
+    '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd',
+    '7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35',
+    '7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
+    '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721',
+    '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5',
+    '7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35',
+    '665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
+    '7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
+    '7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35',
+    '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722'],
+
+  /**
+      * 数字转中文速查表
+      * @Array Of Property
+      * @trans ['日','一','二','三','四','五','六','七','八','九','十']
+      * @return Cn string
+      */
+  nStr1: ['\u65e5', '\u4e00', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341'],
+
+  /**
+      * 日期转农历称呼速查表
+      * @Array Of Property
+      * @trans ['初','十','廿','卅']
+      * @return Cn string
+      */
+  nStr2: ['\u521d', '\u5341', '\u5eff', '\u5345'],
+
+  /**
+      * 月份转农历称呼速查表
+      * @Array Of Property
+      * @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
+      * @return Cn string
+      */
+  nStr3: ['\u6b63', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341', '\u51ac', '\u814a'],
+
+  /**
+      * 返回农历y年一整年的总天数
+      * @param lunar Year
+      * @return Number
+      * @eg:var count = calendar.lYearDays(1987) ;//count=387
+      */
+  lYearDays: function (y) {
+    var i; var sum = 348
+    for (i = 0x8000; i > 0x8; i >>= 1) { sum += (this.lunarInfo[y - 1900] & i) ? 1 : 0 }
+    return (sum + this.leapDays(y))
+  },
+
+  /**
+      * 返回农历y年闰月是哪个月；若y年没有闰月 则返回0
+      * @param lunar Year
+      * @return Number (0-12)
+      * @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
+      */
+  leapMonth: function (y) { // 闰字编码 \u95f0
+    return (this.lunarInfo[y - 1900] & 0xf)
+  },
+
+  /**
+      * 返回农历y年闰月的天数 若该年没有闰月则返回0
+      * @param lunar Year
+      * @return Number (0、29、30)
+      * @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
+      */
+  leapDays: function (y) {
+    if (this.leapMonth(y)) {
+      return ((this.lunarInfo[y - 1900] & 0x10000) ? 30 : 29)
+    }
+    return (0)
+  },
+
+  /**
+      * 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法
+      * @param lunar Year
+      * @return Number (-1、29、30)
+      * @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
+      */
+  monthDays: function (y, m) {
+    if (m > 12 || m < 1) { return -1 }// 月份参数从1至12，参数错误返回-1
+    return ((this.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29)
+  },
+
+  /**
+      * 返回公历(!)y年m月的天数
+      * @param solar Year
+      * @return Number (-1、28、29、30、31)
+      * @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
+      */
+  solarDays: function (y, m) {
+    if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
+    var ms = m - 1
+    if (ms == 1) { // 2月份的闰平规律测算后确认返回28或29
+      return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28)
+    } else {
+      return (this.solarMonth[ms])
+    }
+  },
+
+  /**
+     * 农历年份转换为干支纪年
+     * @param  lYear 农历年的年份数
+     * @return Cn string
+     */
+  toGanZhiYear: function (lYear) {
+    var ganKey = (lYear - 3) % 10
+    var zhiKey = (lYear - 3) % 12
+    if (ganKey == 0) ganKey = 10// 如果余数为0则为最后一个天干
+    if (zhiKey == 0) zhiKey = 12// 如果余数为0则为最后一个地支
+    return this.Gan[ganKey - 1] + this.Zhi[zhiKey - 1]
+  },
+
+  /**
+     * 公历月、日判断所属星座
+     * @param  cMonth [description]
+     * @param  cDay [description]
+     * @return Cn string
+     */
+  toAstro: function (cMonth, cDay) {
+    var s = '\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf'
+    var arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22]
+    return s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + '\u5ea7'// 座
+  },
+
+  /**
+      * 传入offset偏移量返回干支
+      * @param offset 相对甲子的偏移量
+      * @return Cn string
+      */
+  toGanZhi: function (offset) {
+    return this.Gan[offset % 10] + this.Zhi[offset % 12]
+  },
+
+  /**
+      * 传入公历(!)y年获得该年第n个节气的公历日期
+      * @param y公历年(1900-2100)；n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起
+      * @return day Number
+      * @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
+      */
+  getTerm: function (y, n) {
+    if (y < 1900 || y > 2100) { return -1 }
+    if (n < 1 || n > 24) { return -1 }
+    var _table = this.sTermInfo[y - 1900]
+    var _info = [
+      parseInt('0x' + _table.substr(0, 5)).toString(),
+      parseInt('0x' + _table.substr(5, 5)).toString(),
+      parseInt('0x' + _table.substr(10, 5)).toString(),
+      parseInt('0x' + _table.substr(15, 5)).toString(),
+      parseInt('0x' + _table.substr(20, 5)).toString(),
+      parseInt('0x' + _table.substr(25, 5)).toString()
+    ]
+    var _calday = [
+      _info[0].substr(0, 1),
+      _info[0].substr(1, 2),
+      _info[0].substr(3, 1),
+      _info[0].substr(4, 2),
+
+      _info[1].substr(0, 1),
+      _info[1].substr(1, 2),
+      _info[1].substr(3, 1),
+      _info[1].substr(4, 2),
+
+      _info[2].substr(0, 1),
+      _info[2].substr(1, 2),
+      _info[2].substr(3, 1),
+      _info[2].substr(4, 2),
+
+      _info[3].substr(0, 1),
+      _info[3].substr(1, 2),
+      _info[3].substr(3, 1),
+      _info[3].substr(4, 2),
+
+      _info[4].substr(0, 1),
+      _info[4].substr(1, 2),
+      _info[4].substr(3, 1),
+      _info[4].substr(4, 2),
+
+      _info[5].substr(0, 1),
+      _info[5].substr(1, 2),
+      _info[5].substr(3, 1),
+      _info[5].substr(4, 2)
+    ]
+    return parseInt(_calday[n - 1])
+  },
+
+  /**
+      * 传入农历数字月份返回汉语通俗表示法
+      * @param lunar month
+      * @return Cn string
+      * @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
+      */
+  toChinaMonth: function (m) { // 月 => \u6708
+    if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
+    var s = this.nStr3[m - 1]
+    s += '\u6708'// 加上月字
+    return s
+  },
+
+  /**
+      * 传入农历日期数字返回汉字表示法
+      * @param lunar day
+      * @return Cn string
+      * @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
+      */
+  toChinaDay: function (d) { // 日 => \u65e5
+    var s
+    switch (d) {
+      case 10:
+        s = '\u521d\u5341'; break
+      case 20:
+        s = '\u4e8c\u5341'; break
+        break
+      case 30:
+        s = '\u4e09\u5341'; break
+        break
+      default :
+        s = this.nStr2[Math.floor(d / 10)]
+        s += this.nStr1[d % 10]
+    }
+    return (s)
+  },
+
+  /**
+      * 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
+      * @param y year
+      * @return Cn string
+      * @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
+      */
+  getAnimal: function (y) {
+    return this.Animals[(y - 4) % 12]
+  },
+
+  /**
+      * 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
+      * @param y  solar year
+      * @param m  solar month
+      * @param d  solar day
+      * @return JSON object
+      * @eg:console.log(calendar.solar2lunar(1987,11,01));
+      */
+  solar2lunar: function (y, m, d) { // 参数区间1900.1.31~2100.12.31
+    // 年份限定、上限
+    if (y < 1900 || y > 2100) {
+      return -1// undefined转换为数字变为NaN
+    }
+    // 公历传参最下限
+    if (y == 1900 && m == 1 && d < 31) {
+      return -1
+    }
+    // 未传参  获得当天
+    if (!y) {
+      var objDate = new Date()
+    } else {
+      var objDate = new Date(y, parseInt(m) - 1, d)
+    }
+    var i; var leap = 0; var temp = 0
+    // 修正ymd参数
+    var y = objDate.getFullYear()
+    var m = objDate.getMonth() + 1
+    var d = objDate.getDate()
+    var offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900, 0, 31)) / 86400000
+    for (i = 1900; i < 2101 && offset > 0; i++) {
+      temp = this.lYearDays(i)
+      offset -= temp
+    }
+    if (offset < 0) {
+      offset += temp; i--
+    }
+
+    // 是否今天
+    var isTodayObj = new Date()
+    var isToday = false
+    if (isTodayObj.getFullYear() == y && isTodayObj.getMonth() + 1 == m && isTodayObj.getDate() == d) {
+      isToday = true
+    }
+    // 星期几
+    var nWeek = objDate.getDay()
+    var cWeek = this.nStr1[nWeek]
+    // 数字表示周几顺应天朝周一开始的惯例
+    if (nWeek == 0) {
+      nWeek = 7
+    }
+    // 农历年
+    var year = i
+    var leap = this.leapMonth(i) // 闰哪个月
+    var isLeap = false
+
+    // 效验闰月
+    for (i = 1; i < 13 && offset > 0; i++) {
+      // 闰月
+      if (leap > 0 && i == (leap + 1) && isLeap == false) {
+        --i
+        isLeap = true; temp = this.leapDays(year) // 计算农历闰月天数
+      } else {
+        temp = this.monthDays(year, i)// 计算农历普通月天数
+      }
+      // 解除闰月
+      if (isLeap == true && i == (leap + 1)) { isLeap = false }
+      offset -= temp
+    }
+    // 闰月导致数组下标重叠取反
+    if (offset == 0 && leap > 0 && i == leap + 1) {
+      if (isLeap) {
+        isLeap = false
+      } else {
+        isLeap = true; --i
+      }
+    }
+    if (offset < 0) {
+      offset += temp; --i
+    }
+    // 农历月
+    var month = i
+    // 农历日
+    var day = offset + 1
+    // 天干地支处理
+    var sm = m - 1
+    var gzY = this.toGanZhiYear(year)
+
+    // 当月的两个节气
+    // bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
+    var firstNode = this.getTerm(y, (m * 2 - 1))// 返回当月「节」为几日开始
+    var secondNode = this.getTerm(y, (m * 2))// 返回当月「节」为几日开始
+
+    // 依据12节气修正干支月
+    var gzM = this.toGanZhi((y - 1900) * 12 + m + 11)
+    if (d >= firstNode) {
+      gzM = this.toGanZhi((y - 1900) * 12 + m + 12)
+    }
+
+    // 传入的日期的节气与否
+    var isTerm = false
+    var Term = null
+    if (firstNode == d) {
+      isTerm = true
+      Term = this.solarTerm[m * 2 - 2]
+    }
+    if (secondNode == d) {
+      isTerm = true
+      Term = this.solarTerm[m * 2 - 1]
+    }
+    // 日柱 当月一日与 1900/1/1 相差天数
+    var dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10
+    var gzD = this.toGanZhi(dayCyclical + d - 1)
+    // 该日期所属的星座
+    var astro = this.toAstro(m, d)
+
+    return { 'lYear': year, 'lMonth': month, 'lDay': day, 'Animal': this.getAnimal(year), 'IMonthCn': (isLeap ? '\u95f0' : '') + this.toChinaMonth(month), 'IDayCn': this.toChinaDay(day), 'cYear': y, 'cMonth': m, 'cDay': d, 'gzYear': gzY, 'gzMonth': gzM, 'gzDay': gzD, 'isToday': isToday, 'isLeap': isLeap, 'nWeek': nWeek, 'ncWeek': '\u661f\u671f' + cWeek, 'isTerm': isTerm, 'Term': Term, 'astro': astro }
+  },
+
+  /**
+      * 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
+      * @param y  lunar year
+      * @param m  lunar month
+      * @param d  lunar day
+      * @param isLeapMonth  lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
+      * @return JSON object
+      * @eg:console.log(calendar.lunar2solar(1987,9,10));
+      */
+  lunar2solar: function (y, m, d, isLeapMonth) { // 参数区间1900.1.31~2100.12.1
+    var isLeapMonth = !!isLeapMonth
+    var leapOffset = 0
+    var leapMonth = this.leapMonth(y)
+    var leapDay = this.leapDays(y)
+    if (isLeapMonth && (leapMonth != m)) { return -1 }// 传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
+    if (y == 2100 && m == 12 && d > 1 || y == 1900 && m == 1 && d < 31) { return -1 }// 超出了最大极限值
+    var day = this.monthDays(y, m)
+    var _day = day
+    // bugFix 2016-9-25
+    // if month is leap, _day use leapDays method
+    if (isLeapMonth) {
+      _day = this.leapDays(y, m)
+    }
+    if (y < 1900 || y > 2100 || d > _day) { return -1 }// 参数合法性效验
+
+    // 计算农历的时间差
+    var offset = 0
+    for (var i = 1900; i < y; i++) {
+      offset += this.lYearDays(i)
+    }
+    var leap = 0; var isAdd = false
+    for (var i = 1; i < m; i++) {
+      leap = this.leapMonth(y)
+      if (!isAdd) { // 处理闰月
+        if (leap <= i && leap > 0) {
+          offset += this.leapDays(y); isAdd = true
+        }
+      }
+      offset += this.monthDays(y, i)
+    }
+    // 转换闰月农历 需补充该年闰月的前一个月的时差
+    if (isLeapMonth) { offset += day }
+    // 1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
+    var stmap = Date.UTC(1900, 1, 30, 0, 0, 0)
+    var calObj = new Date((offset + d - 31) * 86400000 + stmap)
+    var cY = calObj.getUTCFullYear()
+    var cM = calObj.getUTCMonth() + 1
+    var cD = calObj.getUTCDate()
+
+    return this.solar2lunar(cY, cM, cD)
+  }
+}
+
+export default calendar
diff --git a/uni_modules/uni-calendar/components/uni-calendar/i18n/en.json b/uni_modules/uni-calendar/components/uni-calendar/i18n/en.json
new file mode 100644
index 0000000..fcbd13c
--- /dev/null
+++ b/uni_modules/uni-calendar/components/uni-calendar/i18n/en.json
@@ -0,0 +1,12 @@
+{
+	"uni-calender.ok": "ok",
+	"uni-calender.cancel": "cancel",
+	"uni-calender.today": "today",
+	"uni-calender.MON": "MON",
+	"uni-calender.TUE": "TUE",
+	"uni-calender.WED": "WED",
+	"uni-calender.THU": "THU",
+	"uni-calender.FRI": "FRI",
+	"uni-calender.SAT": "SAT",
+	"uni-calender.SUN": "SUN"
+}
diff --git a/uni_modules/uni-calendar/components/uni-calendar/i18n/index.js b/uni_modules/uni-calendar/components/uni-calendar/i18n/index.js
new file mode 100644
index 0000000..de7509c
--- /dev/null
+++ b/uni_modules/uni-calendar/components/uni-calendar/i18n/index.js
@@ -0,0 +1,8 @@
+import en from './en.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
+}
diff --git a/uni_modules/uni-calendar/components/uni-calendar/i18n/zh-Hans.json b/uni_modules/uni-calendar/components/uni-calendar/i18n/zh-Hans.json
new file mode 100644
index 0000000..1ca43de
--- /dev/null
+++ b/uni_modules/uni-calendar/components/uni-calendar/i18n/zh-Hans.json
@@ -0,0 +1,12 @@
+{
+	"uni-calender.ok": "确定",
+	"uni-calender.cancel": "取消",
+	"uni-calender.today": "今日",
+	"uni-calender.SUN": "日",
+	"uni-calender.MON": "一",
+	"uni-calender.TUE": "二",
+	"uni-calender.WED": "三",
+	"uni-calender.THU": "四",
+	"uni-calender.FRI": "五",
+	"uni-calender.SAT": "六"
+}
diff --git a/uni_modules/uni-calendar/components/uni-calendar/i18n/zh-Hant.json b/uni_modules/uni-calendar/components/uni-calendar/i18n/zh-Hant.json
new file mode 100644
index 0000000..e0fe33b
--- /dev/null
+++ b/uni_modules/uni-calendar/components/uni-calendar/i18n/zh-Hant.json
@@ -0,0 +1,12 @@
+{
+	"uni-calender.ok": "確定",
+	"uni-calender.cancel": "取消",
+	"uni-calender.today": "今日",
+	"uni-calender.SUN": "日",
+	"uni-calender.MON": "一",
+	"uni-calender.TUE": "二",
+	"uni-calender.WED": "三",
+	"uni-calender.THU": "四",
+	"uni-calender.FRI": "五",
+	"uni-calender.SAT": "六"
+}
diff --git a/uni_modules/uni-calendar/components/uni-calendar/uni-calendar-item.vue b/uni_modules/uni-calendar/components/uni-calendar/uni-calendar-item.vue
new file mode 100644
index 0000000..a54135e
--- /dev/null
+++ b/uni_modules/uni-calendar/components/uni-calendar/uni-calendar-item.vue
@@ -0,0 +1,187 @@
+<template>
+	<view class="uni-calendar-item__weeks-box" :class="{
+		'uni-calendar-item--disable':weeks.disable,
+		'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
+		'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate && !weeks.isDay) ,
+		'uni-calendar-item--before-checked':weeks.beforeMultiple,
+		'uni-calendar-item--multiple': weeks.multiple,
+		'uni-calendar-item--after-checked':weeks.afterMultiple,
+		}"
+	 @click="choiceDate(weeks)">
+		<view class="uni-calendar-item__weeks-box-item">
+			<text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
+			<text class="uni-calendar-item__weeks-box-text" :class="{
+				'uni-calendar-item--isDay-text': weeks.isDay,
+				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
+				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
+				'uni-calendar-item--before-checked':weeks.beforeMultiple,
+				'uni-calendar-item--multiple': weeks.multiple,
+				'uni-calendar-item--after-checked':weeks.afterMultiple,
+				'uni-calendar-item--disable':weeks.disable,
+				}">{{weeks.date}}</text>
+			<text v-if="!lunar&&!weeks.extraInfo && weeks.isDay" class="uni-calendar-item__weeks-lunar-text" :class="{
+				'uni-calendar-item--isDay-text':weeks.isDay,
+				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
+				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
+				'uni-calendar-item--before-checked':weeks.beforeMultiple,
+				'uni-calendar-item--multiple': weeks.multiple,
+				'uni-calendar-item--after-checked':weeks.afterMultiple,
+				}">{{todayText}}</text>
+			<text v-if="lunar&&!weeks.extraInfo" class="uni-calendar-item__weeks-lunar-text" :class="{
+				'uni-calendar-item--isDay-text':weeks.isDay,
+				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
+				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
+				'uni-calendar-item--before-checked':weeks.beforeMultiple,
+				'uni-calendar-item--multiple': weeks.multiple,
+				'uni-calendar-item--after-checked':weeks.afterMultiple,
+				'uni-calendar-item--disable':weeks.disable,
+				}">{{weeks.isDay ? todayText : (weeks.lunar.IDayCn === '初一'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}</text>
+			<text v-if="weeks.extraInfo&&weeks.extraInfo.info" class="uni-calendar-item__weeks-lunar-text" :class="{
+				'uni-calendar-item--extra':weeks.extraInfo.info,
+				'uni-calendar-item--isDay-text':weeks.isDay,
+				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
+				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
+				'uni-calendar-item--before-checked':weeks.beforeMultiple,
+				'uni-calendar-item--multiple': weeks.multiple,
+				'uni-calendar-item--after-checked':weeks.afterMultiple,
+				'uni-calendar-item--disable':weeks.disable,
+				}">{{weeks.extraInfo.info}}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { initVueI18n } from '@dcloudio/uni-i18n'
+	import i18nMessages from './i18n/index.js'
+	const {	t	} = initVueI18n(i18nMessages)
+
+	export default {
+		emits:['change'],
+		props: {
+			weeks: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			calendar: {
+				type: Object,
+				default: () => {
+					return {}
+				}
+			},
+			selected: {
+				type: Array,
+				default: () => {
+					return []
+				}
+			},
+			lunar: {
+				type: Boolean,
+				default: false
+			}
+		},
+		computed: {
+			todayText() {
+				return t("uni-calender.today")
+			},
+		},
+		methods: {
+			choiceDate(weeks) {
+				this.$emit('change', weeks)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	$uni-font-size-base:14px;
+	$uni-text-color:#333;
+	$uni-font-size-sm:12px;
+	$uni-color-error: #e43d33;
+	$uni-opacity-disabled: 0.3;
+	$uni-text-color-disable:#c0c0c0;
+	$uni-primary: #2979ff !default;
+	.uni-calendar-item__weeks-box {
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.uni-calendar-item__weeks-box-text {
+		font-size: $uni-font-size-base;
+		color: $uni-text-color;
+	}
+
+	.uni-calendar-item__weeks-lunar-text {
+		font-size: $uni-font-size-sm;
+		color: $uni-text-color;
+	}
+
+	.uni-calendar-item__weeks-box-item {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		width: 100rpx;
+		height: 100rpx;
+	}
+
+	.uni-calendar-item__weeks-box-circle {
+		position: absolute;
+		top: 5px;
+		right: 5px;
+		width: 8px;
+		height: 8px;
+		border-radius: 8px;
+		background-color: $uni-color-error;
+
+	}
+
+	.uni-calendar-item--disable {
+		background-color: rgba(249, 249, 249, $uni-opacity-disabled);
+		color: $uni-text-color-disable;
+	}
+
+	.uni-calendar-item--isDay-text {
+		color: $uni-primary;
+	}
+
+	.uni-calendar-item--isDay {
+		background-color: $uni-primary;
+		opacity: 0.8;
+		color: #fff;
+	}
+
+	.uni-calendar-item--extra {
+		color: $uni-color-error;
+		opacity: 0.8;
+	}
+
+	.uni-calendar-item--checked {
+		background-color: $uni-primary;
+		color: #fff;
+		opacity: 0.8;
+	}
+
+	.uni-calendar-item--multiple {
+		background-color: $uni-primary;
+		color: #fff;
+		opacity: 0.8;
+	}
+	.uni-calendar-item--before-checked {
+		background-color: #ff5a5f;
+		color: #fff;
+	}
+	.uni-calendar-item--after-checked {
+		background-color: #ff5a5f;
+		color: #fff;
+	}
+</style>
diff --git a/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue b/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue
new file mode 100644
index 0000000..0beebfb
--- /dev/null
+++ b/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue
@@ -0,0 +1,567 @@
+<template>
+	<view class="uni-calendar">
+		<view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}" @click="clean"></view>
+		<view v-if="insert || show" class="uni-calendar__content" :class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow}">
+			<view v-if="!insert" class="uni-calendar__header uni-calendar--fixed-top">
+				<view class="uni-calendar__header-btn-box" @click="close">
+					<text class="uni-calendar__header-text uni-calendar--fixed-width">{{cancelText}}</text>
+				</view>
+				<view class="uni-calendar__header-btn-box" @click="confirm">
+					<text class="uni-calendar__header-text uni-calendar--fixed-width">{{okText}}</text>
+				</view>
+			</view>
+			<view class="uni-calendar__header">
+				<view class="uni-calendar__header-btn-box" @click.stop="pre">
+					<view class="uni-calendar__header-btn uni-calendar--left"></view>
+				</view>
+				<picker mode="date" :value="date" fields="month" @change="bindDateChange">
+					<text class="uni-calendar__header-text">{{ (nowDate.year||'') +' / '+( nowDate.month||'')}}</text>
+				</picker>
+				<view class="uni-calendar__header-btn-box" @click.stop="next">
+					<view class="uni-calendar__header-btn uni-calendar--right"></view>
+				</view>
+				<text class="uni-calendar__backtoday" @click="backToday">{{todayText}}</text>
+
+			</view>
+			<view class="uni-calendar__box">
+				<view v-if="showMonth" class="uni-calendar__box-bg">
+					<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
+				</view>
+				<view class="uni-calendar__weeks">
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{monText}}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{TUEText}}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{WEDText}}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{THUText}}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{FRIText}}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{SATText}}</text>
+					</view>
+				</view>
+				<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
+					<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
+						<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar" :selected="selected" :lunar="lunar" @change="choiceDate"></calendar-item>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import Calendar from './util.js';
+	import CalendarItem from './uni-calendar-item.vue'
+
+	import { initVueI18n } from '@dcloudio/uni-i18n'
+	import i18nMessages from './i18n/index.js'
+	const {	t	} = initVueI18n(i18nMessages)
+
+	/**
+	 * Calendar 日历
+	 * @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=56
+	 * @property {String} date 自定义当前时间，默认为今天
+	 * @property {Boolean} lunar 显示农历
+	 * @property {String} startDate 日期选择范围-开始日期
+	 * @property {String} endDate 日期选择范围-结束日期
+	 * @property {Boolean} range 范围选择
+	 * @property {Boolean} insert = [true|false] 插入模式,默认为false
+	 * 	@value true 弹窗模式
+	 * 	@value false 插入模式
+	 * @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
+	 * @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
+	 * @property {Boolean} showMonth 是否选择月份为背景
+	 * @event {Function} change 日期改变，`insert :ture` 时生效
+	 * @event {Function} confirm 确认选择`insert :false` 时生效
+	 * @event {Function} monthSwitch 切换月份时触发
+	 * @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
+	 */
+	export default {
+		components: {
+			CalendarItem
+		},
+		emits:['close','confirm','change','monthSwitch'],
+		props: {
+			date: {
+				type: String,
+				default: ''
+			},
+			selected: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			lunar: {
+				type: Boolean,
+				default: false
+			},
+			startDate: {
+				type: String,
+				default: ''
+			},
+			endDate: {
+				type: String,
+				default: ''
+			},
+			range: {
+				type: Boolean,
+				default: false
+			},
+			insert: {
+				type: Boolean,
+				default: true
+			},
+			showMonth: {
+				type: Boolean,
+				default: true
+			},
+			clearDate: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				show: false,
+				weeks: [],
+				calendar: {},
+				nowDate: '',
+				aniMaskShow: false
+			}
+		},
+		computed:{
+			/**
+			 * for i18n
+			 */
+
+			okText() {
+				return t("uni-calender.ok")
+			},
+			cancelText() {
+				return t("uni-calender.cancel")
+			},
+			todayText() {
+				return t("uni-calender.today")
+			},
+			monText() {
+				return t("uni-calender.MON")
+			},
+			TUEText() {
+				return t("uni-calender.TUE")
+			},
+			WEDText() {
+				return t("uni-calender.WED")
+			},
+			THUText() {
+				return t("uni-calender.THU")
+			},
+			FRIText() {
+				return t("uni-calender.FRI")
+			},
+			SATText() {
+				return t("uni-calender.SAT")
+			},
+			SUNText() {
+				return t("uni-calender.SUN")
+			},
+		},
+		watch: {
+			date(newVal) {
+				// this.cale.setDate(newVal)
+				this.init(newVal)
+			},
+			startDate(val){
+				this.cale.resetSatrtDate(val)
+				this.cale.setDate(this.nowDate.fullDate)
+				this.weeks = this.cale.weeks
+			},
+			endDate(val){
+				this.cale.resetEndDate(val)
+				this.cale.setDate(this.nowDate.fullDate)
+				this.weeks = this.cale.weeks
+			},
+			selected(newVal) {
+				this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
+				this.weeks = this.cale.weeks
+			}
+		},
+		created() {
+			this.cale = new Calendar({
+				selected: this.selected,
+				startDate: this.startDate,
+				endDate: this.endDate,
+				range: this.range,
+			})
+			this.init(this.date)
+		},
+		methods: {
+			// 取消穿透
+			clean() {},
+			bindDateChange(e) {
+				const value = e.detail.value + '-1'
+				this.setDate(value)
+
+				const { year,month } = this.cale.getDate(value)
+        this.$emit('monthSwitch', {
+            year,
+            month
+        })
+			},
+			/**
+			 * 初始化日期显示
+			 * @param {Object} date
+			 */
+			init(date) {
+				this.cale.setDate(date)
+				this.weeks = this.cale.weeks
+				this.nowDate = this.calendar = this.cale.getInfo(date)
+			},
+			/**
+			 * 打开日历弹窗
+			 */
+			open() {
+				// 弹窗模式并且清理数据
+				if (this.clearDate && !this.insert) {
+					this.cale.cleanMultipleStatus()
+					// this.cale.setDate(this.date)
+					this.init(this.date)
+				}
+				this.show = true
+				this.$nextTick(() => {
+					setTimeout(() => {
+						this.aniMaskShow = true
+					}, 50)
+				})
+			},
+			/**
+			 * 关闭日历弹窗
+			 */
+			close() {
+				this.aniMaskShow = false
+				this.$nextTick(() => {
+					setTimeout(() => {
+						this.show = false
+						this.$emit('close')
+					}, 300)
+				})
+			},
+			/**
+			 * 确认按钮
+			 */
+			confirm() {
+				this.setEmit('confirm')
+				this.close()
+			},
+			/**
+			 * 变化触发
+			 */
+			change() {
+				if (!this.insert) return
+				this.setEmit('change')
+			},
+			/**
+			 * 选择月份触发
+			 */
+			monthSwitch() {
+				let {
+					year,
+					month
+				} = this.nowDate
+				this.$emit('monthSwitch', {
+					year,
+					month: Number(month)
+				})
+			},
+			/**
+			 * 派发事件
+			 * @param {Object} name
+			 */
+			setEmit(name) {
+				let {
+					year,
+					month,
+					date,
+					fullDate,
+					lunar,
+					extraInfo
+				} = this.calendar
+				this.$emit(name, {
+					range: this.cale.multipleStatus,
+					year,
+					month,
+					date,
+					fulldate: fullDate,
+					lunar,
+					extraInfo: extraInfo || {}
+				})
+			},
+			/**
+			 * 选择天触发
+			 * @param {Object} weeks
+			 */
+			choiceDate(weeks) {
+				if (weeks.disable) return
+				this.calendar = weeks
+				// 设置多选
+				this.cale.setMultiple(this.calendar.fullDate)
+				this.weeks = this.cale.weeks
+				this.change()
+			},
+			/**
+			 * 回到今天
+			 */
+			backToday() {
+				const nowYearMonth = `${this.nowDate.year}-${this.nowDate.month}`
+				const date = this.cale.getDate(new Date())
+        const todayYearMonth = `${date.year}-${date.month}`
+
+				this.init(date.fullDate)
+
+        if(nowYearMonth !== todayYearMonth) {
+          this.monthSwitch()
+        }
+
+				this.change()
+			},
+			/**
+			 * 上个月
+			 */
+			pre() {
+				const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
+				this.setDate(preDate)
+				this.monthSwitch()
+
+			},
+			/**
+			 * 下个月
+			 */
+			next() {
+				const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
+				this.setDate(nextDate)
+				this.monthSwitch()
+			},
+			/**
+			 * 设置日期
+			 * @param {Object} date
+			 */
+			setDate(date) {
+				this.cale.setDate(date)
+				this.weeks = this.cale.weeks
+				this.nowDate = this.cale.getInfo(date)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	$uni-bg-color-mask: rgba($color: #000000, $alpha: 0.4);
+	$uni-border-color: #EDEDED;
+	$uni-text-color: #333;
+	$uni-bg-color-hover:#f1f1f1;
+	$uni-font-size-base:14px;
+	$uni-text-color-placeholder: #808080;
+	$uni-color-subtitle: #555555;
+	$uni-text-color-grey:#999;
+	.uni-calendar {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+	}
+
+	.uni-calendar__mask {
+		position: fixed;
+		bottom: 0;
+		top: 0;
+		left: 0;
+		right: 0;
+		background-color: $uni-bg-color-mask;
+		transition-property: opacity;
+		transition-duration: 0.3s;
+		opacity: 0;
+		/* #ifndef APP-NVUE */
+		z-index: 99;
+		/* #endif */
+	}
+
+	.uni-calendar--mask-show {
+		opacity: 1
+	}
+
+	.uni-calendar--fixed {
+		position: fixed;
+		/* #ifdef APP-NVUE */
+		bottom: 0;
+		/* #endif */
+		left: 0;
+		right: 0;
+		transition-property: transform;
+		transition-duration: 0.3s;
+		transform: translateY(460px);
+		/* #ifndef APP-NVUE */
+		bottom: calc(var(--window-bottom));
+		z-index: 99;
+		/* #endif */
+	}
+
+	.uni-calendar--ani-show {
+		transform: translateY(0);
+	}
+
+	.uni-calendar__content {
+		background-color: #fff;
+	}
+
+	.uni-calendar__header {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		height: 50px;
+		border-bottom-color: $uni-border-color;
+		border-bottom-style: solid;
+		border-bottom-width: 1px;
+	}
+
+	.uni-calendar--fixed-top {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: space-between;
+		border-top-color: $uni-border-color;
+		border-top-style: solid;
+		border-top-width: 1px;
+	}
+
+	.uni-calendar--fixed-width {
+		width: 50px;
+	}
+
+	.uni-calendar__backtoday {
+		position: absolute;
+		right: 0;
+		top: 25rpx;
+		padding: 0 5px;
+		padding-left: 10px;
+		height: 25px;
+		line-height: 25px;
+		font-size: 12px;
+		border-top-left-radius: 25px;
+		border-bottom-left-radius: 25px;
+		color: $uni-text-color;
+		background-color: $uni-bg-color-hover;
+	}
+
+	.uni-calendar__header-text {
+		text-align: center;
+		width: 100px;
+		font-size: $uni-font-size-base;
+		color: $uni-text-color;
+	}
+
+	.uni-calendar__header-btn-box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		width: 50px;
+		height: 50px;
+	}
+
+	.uni-calendar__header-btn {
+		width: 10px;
+		height: 10px;
+		border-left-color: $uni-text-color-placeholder;
+		border-left-style: solid;
+		border-left-width: 2px;
+		border-top-color: $uni-color-subtitle;
+		border-top-style: solid;
+		border-top-width: 2px;
+	}
+
+	.uni-calendar--left {
+		transform: rotate(-45deg);
+	}
+
+	.uni-calendar--right {
+		transform: rotate(135deg);
+	}
+
+
+	.uni-calendar__weeks {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-calendar__weeks-item {
+		flex: 1;
+	}
+
+	.uni-calendar__weeks-day {
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		height: 45px;
+		border-bottom-color: #F5F5F5;
+		border-bottom-style: solid;
+		border-bottom-width: 1px;
+	}
+
+	.uni-calendar__weeks-day-text {
+		font-size: 14px;
+	}
+
+	.uni-calendar__box {
+		position: relative;
+	}
+
+	.uni-calendar__box-bg {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+	}
+
+	.uni-calendar__box-bg-text {
+		font-size: 200px;
+		font-weight: bold;
+		color: $uni-text-color-grey;
+		opacity: 0.1;
+		text-align: center;
+		/* #ifndef APP-NVUE */
+		line-height: 1;
+		/* #endif */
+	}
+</style>
diff --git a/uni_modules/uni-calendar/components/uni-calendar/util.js b/uni_modules/uni-calendar/components/uni-calendar/util.js
new file mode 100644
index 0000000..5ec8a92
--- /dev/null
+++ b/uni_modules/uni-calendar/components/uni-calendar/util.js
@@ -0,0 +1,360 @@
+import CALENDAR from './calendar.js'
+
+class Calendar {
+	constructor({
+		date,
+		selected,
+		startDate,
+		endDate,
+		range
+	} = {}) {
+		// 当前日期
+		this.date = this.getDate(new Date()) // 当前初入日期
+		// 打点信息
+		this.selected = selected || [];
+		// 范围开始
+		this.startDate = startDate
+		// 范围结束
+		this.endDate = endDate
+		this.range = range
+		// 多选状态
+		this.cleanMultipleStatus()
+		// 每周日期
+		this.weeks = {}
+		// this._getWeek(this.date.fullDate)
+	}
+	/**
+	 * 设置日期
+	 * @param {Object} date
+	 */
+	setDate(date) {
+		this.selectDate = this.getDate(date)
+		this._getWeek(this.selectDate.fullDate)
+	}
+
+	/**
+	 * 清理多选状态
+	 */
+	cleanMultipleStatus() {
+		this.multipleStatus = {
+			before: '',
+			after: '',
+			data: []
+		}
+	}
+
+	/**
+	 * 重置开始日期
+	 */
+	resetSatrtDate(startDate) {
+		// 范围开始
+		this.startDate = startDate
+
+	}
+
+	/**
+	 * 重置结束日期
+	 */
+	resetEndDate(endDate) {
+		// 范围结束
+		this.endDate = endDate
+	}
+
+	/**
+	 * 获取任意时间
+	 */
+	getDate(date, AddDayCount = 0, str = 'day') {
+		if (!date) {
+			date = new Date()
+		}
+		if (typeof date !== 'object') {
+			date = date.replace(/-/g, '/')
+		}
+		const dd = new Date(date)
+		switch (str) {
+			case 'day':
+				dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
+				break
+			case 'month':
+				if (dd.getDate() === 31 && AddDayCount>0) {
+					dd.setDate(dd.getDate() + AddDayCount)
+				} else {
+					const preMonth = dd.getMonth()
+					dd.setMonth(preMonth + AddDayCount) // 获取AddDayCount天后的日期
+					const nextMonth = dd.getMonth()
+					// 处理 pre 切换月份目标月份为2月没有当前日(30 31) 切换错误问题
+					if(AddDayCount<0 && preMonth!==0 && nextMonth-preMonth>AddDayCount){
+						dd.setMonth(nextMonth+(nextMonth-preMonth+AddDayCount))
+					}
+					// 处理 next 切换月份目标月份为2月没有当前日(30 31) 切换错误问题
+					if(AddDayCount>0 && nextMonth-preMonth>AddDayCount){
+						dd.setMonth(nextMonth-(nextMonth-preMonth-AddDayCount))
+					}
+				}
+				break
+			case 'year':
+				dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期
+				break
+		}
+		const y = dd.getFullYear()
+		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
+		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
+		return {
+			fullDate: y + '-' + m + '-' + d,
+			year: y,
+			month: m,
+			date: d,
+			day: dd.getDay()
+		}
+	}
+
+
+	/**
+	 * 获取上月剩余天数
+	 */
+	_getLastMonthDays(firstDay, full) {
+		let dateArr = []
+		for (let i = firstDay; i > 0; i--) {
+			const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate()
+			dateArr.push({
+				date: beforeDate,
+				month: full.month - 1,
+				lunar: this.getlunar(full.year, full.month - 1, beforeDate),
+				disable: true
+			})
+		}
+		return dateArr
+	}
+	/**
+	 * 获取本月天数
+	 */
+	_currentMonthDys(dateData, full) {
+		let dateArr = []
+		let fullDate = this.date.fullDate
+		for (let i = 1; i <= dateData; i++) {
+			let nowDate = full.year + '-' + (full.month < 10 ?
+				full.month : full.month) + '-' + (i < 10 ?
+				'0' + i : i)
+			// 是否今天
+			let isDay = fullDate === nowDate
+			// 获取打点信息
+			let info = this.selected && this.selected.find((item) => {
+				if (this.dateEqual(nowDate, item.date)) {
+					return item
+				}
+			})
+
+			// 日期禁用
+			let disableBefore = true
+			let disableAfter = true
+			if (this.startDate) {
+				// let dateCompBefore = this.dateCompare(this.startDate, fullDate)
+				// disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate)
+				disableBefore = this.dateCompare(this.startDate, nowDate)
+			}
+
+			if (this.endDate) {
+				// let dateCompAfter = this.dateCompare(fullDate, this.endDate)
+				// disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate)
+				disableAfter = this.dateCompare(nowDate, this.endDate)
+			}
+			let multiples = this.multipleStatus.data
+			let checked = false
+			let multiplesStatus = -1
+			if (this.range) {
+				if (multiples) {
+					multiplesStatus = multiples.findIndex((item) => {
+						return this.dateEqual(item, nowDate)
+					})
+				}
+				if (multiplesStatus !== -1) {
+					checked = true
+				}
+			}
+			let data = {
+				fullDate: nowDate,
+				year: full.year,
+				date: i,
+				multiple: this.range ? checked : false,
+				beforeMultiple: this.dateEqual(this.multipleStatus.before, nowDate),
+				afterMultiple: this.dateEqual(this.multipleStatus.after, nowDate),
+				month: full.month,
+				lunar: this.getlunar(full.year, full.month, i),
+				disable: !(disableBefore && disableAfter),
+				isDay
+			}
+			if (info) {
+				data.extraInfo = info
+			}
+
+			dateArr.push(data)
+		}
+		return dateArr
+	}
+	/**
+	 * 获取下月天数
+	 */
+	_getNextMonthDays(surplus, full) {
+		let dateArr = []
+		for (let i = 1; i < surplus + 1; i++) {
+			dateArr.push({
+				date: i,
+				month: Number(full.month) + 1,
+				lunar: this.getlunar(full.year, Number(full.month) + 1, i),
+				disable: true
+			})
+		}
+		return dateArr
+	}
+
+	/**
+	 * 获取当前日期详情
+	 * @param {Object} date
+	 */
+	getInfo(date) {
+		if (!date) {
+			date = new Date()
+		}
+		const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate)
+		return dateInfo
+	}
+
+	/**
+	 * 比较时间大小
+	 */
+	dateCompare(startDate, endDate) {
+		// 计算截止时间
+		startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
+		// 计算详细项的截止时间
+		endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
+		if (startDate <= endDate) {
+			return true
+		} else {
+			return false
+		}
+	}
+
+	/**
+	 * 比较时间是否相等
+	 */
+	dateEqual(before, after) {
+		// 计算截止时间
+		before = new Date(before.replace('-', '/').replace('-', '/'))
+		// 计算详细项的截止时间
+		after = new Date(after.replace('-', '/').replace('-', '/'))
+		if (before.getTime() - after.getTime() === 0) {
+			return true
+		} else {
+			return false
+		}
+	}
+
+
+	/**
+	 * 获取日期范围内所有日期
+	 * @param {Object} begin
+	 * @param {Object} end
+	 */
+	geDateAll(begin, end) {
+		var arr = []
+		var ab = begin.split('-')
+		var ae = end.split('-')
+		var db = new Date()
+		db.setFullYear(ab[0], ab[1] - 1, ab[2])
+		var de = new Date()
+		de.setFullYear(ae[0], ae[1] - 1, ae[2])
+		var unixDb = db.getTime() - 24 * 60 * 60 * 1000
+		var unixDe = de.getTime() - 24 * 60 * 60 * 1000
+		for (var k = unixDb; k <= unixDe;) {
+			k = k + 24 * 60 * 60 * 1000
+			arr.push(this.getDate(new Date(parseInt(k))).fullDate)
+		}
+		return arr
+	}
+	/**
+	 * 计算阴历日期显示
+	 */
+	getlunar(year, month, date) {
+		return CALENDAR.solar2lunar(year, month, date)
+	}
+	/**
+	 * 设置打点
+	 */
+	setSelectInfo(data, value) {
+		this.selected = value
+		this._getWeek(data)
+	}
+
+	/**
+	 *  获取多选状态
+	 */
+	setMultiple(fullDate) {
+		let {
+			before,
+			after
+		} = this.multipleStatus
+
+		if (!this.range) return
+		if (before && after) {
+			this.multipleStatus.before = ''
+			this.multipleStatus.after = ''
+			this.multipleStatus.data = []
+		} else {
+			if (!before) {
+				this.multipleStatus.before = fullDate
+			} else {
+				this.multipleStatus.after = fullDate
+				if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
+					this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
+				} else {
+					this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
+				}
+			}
+		}
+		this._getWeek(fullDate)
+	}
+
+	/**
+	 * 获取每周数据
+	 * @param {Object} dateData
+	 */
+	_getWeek(dateData) {
+		const {
+			year,
+			month
+		} = this.getDate(dateData)
+		let firstDay = new Date(year, month - 1, 1).getDay()
+		let currentDay = new Date(year, month, 0).getDate()
+		let dates = {
+			lastMonthDays: this._getLastMonthDays(firstDay, this.getDate(dateData)), // 上个月末尾几天
+			currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // 本月天数
+			nextMonthDays: [], // 下个月开始几天
+			weeks: []
+		}
+		let canlender = []
+		const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length)
+		dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData))
+		canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
+		let weeks = {}
+		// 拼接数组  上个月开始几天 + 本月天数+ 下个月开始几天
+		for (let i = 0; i < canlender.length; i++) {
+			if (i % 7 === 0) {
+				weeks[parseInt(i / 7)] = new Array(7)
+			}
+			weeks[parseInt(i / 7)][i % 7] = canlender[i]
+		}
+		this.canlender = canlender
+		this.weeks = weeks
+	}
+
+	//静态方法
+	// static init(date) {
+	// 	if (!this.instance) {
+	// 		this.instance = new Calendar(date);
+	// 	}
+	// 	return this.instance;
+	// }
+}
+
+
+export default Calendar
diff --git a/uni_modules/uni-calendar/package.json b/uni_modules/uni-calendar/package.json
new file mode 100644
index 0000000..bceaed3
--- /dev/null
+++ b/uni_modules/uni-calendar/package.json
@@ -0,0 +1,85 @@
+{
+  "id": "uni-calendar",
+  "displayName": "uni-calendar 日历",
+  "version": "1.4.11",
+  "description": "日历组件",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "日历",
+    "",
+    "打卡",
+    "日历选择"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-calendar/readme.md b/uni_modules/uni-calendar/readme.md
new file mode 100644
index 0000000..4e1748c
--- /dev/null
+++ b/uni_modules/uni-calendar/readme.md
@@ -0,0 +1,103 @@
+
+
+## Calendar 日历
+> **组件名：uni-calendar**
+> 代码块： `uCalendar`
+
+
+日历组件
+
+> **注意事项**
+> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
+> - 本组件农历转换使用的js是 [@1900-2100区间内的公历、农历互转](https://github.com/jjonline/calendar.js)  
+> - 仅支持自定义组件模式
+> - `date`属性传入的应该是一个 String ，如： 2019-06-27 ，而不是 new Date()
+> - 通过 `insert` 属性来确定当前的事件是 @change 还是 @confirm 。理应合并为一个事件，但是为了区分模式，现使用两个事件，这里需要注意
+> - 弹窗模式下无法阻止后面的元素滚动，如有需要阻止，请在弹窗弹出后，手动设置滚动元素为不可滚动
+
+
+### 安装方式
+
+本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
+
+如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
+
+### 基本用法
+
+在 ``template`` 中使用组件
+
+```html
+<view>
+	<uni-calendar 
+	:insert="true"
+	:lunar="true" 
+	:start-date="'2019-3-2'"
+	:end-date="'2019-5-20'"
+	@change="change"
+	 />
+</view>
+```
+
+### 通过方法打开日历
+
+需要设置 `insert` 为 `false`
+
+```html
+<view>
+	<uni-calendar 
+	ref="calendar"
+	:insert="false"
+	@confirm="confirm"
+	 />
+	 <button @click="open">打开日历</button>
+</view>
+```
+
+```javascript
+
+export default {
+	data() {
+		return {};
+	},
+	methods: {
+		open(){
+			this.$refs.calendar.open();
+		},
+		confirm(e) {
+			console.log(e);
+		}
+	}
+};
+
+```
+
+
+## API
+
+### Calendar Props
+
+|  属性名	|    类型	| 默认值| 说明																													|
+| -	| -	| - | - |
+| date		| String	|-		| 自定义当前时间，默认为今天																							|
+| lunar		| Boolean	| false	| 显示农历																												|
+| startDate	| String	|-		| 日期选择范围-开始日期																									|
+| endDate	| String	|-		| 日期选择范围-结束日期																									|
+| range		| Boolean	| false	| 范围选择																												|
+| insert	| Boolean	| false	| 插入模式,可选值，ture：插入模式；false：弹窗模式；默认为插入模式														|
+|clearDate	|Boolean	|true	|弹窗模式是否清空上次选择内容	|
+| selected	| Array		|-		| 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]	|
+|showMonth	| Boolean	| true	| 是否显示月份为背景																									|
+
+### Calendar Events
+
+|  事件名		| 说明								|返回值|
+| -	|	-	| -	|
+| open	| 弹出日历组件，`insert :false` 时生效|- 	|
+
+
+
+
+
+## 组件示例
+
+点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar](https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar)
diff --git a/uni_modules/uni-card/changelog.md b/uni_modules/uni-card/changelog.md
new file mode 100644
index 0000000..c3cd8c4
--- /dev/null
+++ b/uni_modules/uni-card/changelog.md
@@ -0,0 +1,26 @@
+## 1.3.1（2021-12-20）
+- 修复 在vue页面下略缩图显示不正常的bug
+## 1.3.0（2021-11-19）
+- 重构插槽的用法 ，header 替换为 title 
+- 新增 actions 插槽
+- 新增 cover 封面图属性和插槽
+- 新增 padding 内容默认内边距离
+- 新增 margin 卡片默认外边距离
+- 新增 spacing 卡片默认内边距
+- 新增 shadow 卡片阴影属性
+- 取消 mode 属性，可使用组合插槽代替
+- 取消 note 属性 ，使用actions插槽代替
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-card](https://uniapp.dcloud.io/component/uniui/uni-card)
+## 1.2.1（2021-07-30）
+- 优化 vue3下事件警告的问题
+## 1.2.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.1.8（2021-07-01）
+- 优化 图文卡片无图片加载时，提供占位图标
+- 新增 header 插槽，自定义卡片头部（ 图文卡片 mode="style" 时，不支持）
+- 修复 thumbnail 不存在仍然占位的 bug
+## 1.1.7（2021-05-12）
+- 新增 组件示例地址
+## 1.1.6（2021-02-04）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-card/components/uni-card/uni-card.vue b/uni_modules/uni-card/components/uni-card/uni-card.vue
new file mode 100644
index 0000000..38cf594
--- /dev/null
+++ b/uni_modules/uni-card/components/uni-card/uni-card.vue
@@ -0,0 +1,270 @@
+<template>
+	<view class="uni-card" :class="{ 'uni-card--full': isFull, 'uni-card--shadow': isShadow,'uni-card--border':border}"
+		:style="{'margin':isFull?0:margin,'padding':spacing,'box-shadow':isShadow?shadow:''}">
+		<!-- 封面 -->
+		<slot name="cover">
+			<view v-if="cover" class="uni-card__cover">
+				<image class="uni-card__cover-image" mode="widthFix" @click="onClick('cover')" :src="cover"></image>
+			</view>
+		</slot>
+		<slot name="title">
+			<view v-if="title || extra" class="uni-card__header">
+				<!-- 卡片标题 -->
+				<view class="uni-card__header-box" @click="onClick('title')">
+					<view v-if="thumbnail" class="uni-card__header-avatar">
+						<image class="uni-card__header-avatar-image" :src="thumbnail" mode="aspectFit" />
+					</view>
+					<view class="uni-card__header-content">
+						<text class="uni-card__header-content-title uni-ellipsis">{{ title }}</text>
+						<text v-if="title&&subTitle"
+							class="uni-card__header-content-subtitle uni-ellipsis">{{ subTitle }}</text>
+					</view>
+				</view>
+				<view class="uni-card__header-extra" @click="onClick('extra')">
+					<text class="uni-card__header-extra-text">{{ extra }}</text>
+				</view>
+			</view>
+		</slot>
+		<!-- 卡片内容 -->
+		<view class="uni-card__content" :style="{padding:padding}" @click="onClick('content')">
+			<slot></slot>
+		</view>
+		<view class="uni-card__actions" @click="onClick('actions')">
+			<slot name="actions"></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * Card 卡片
+	 * @description 卡片视图组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=22
+	 * @property {String} title 标题文字
+	 * @property {String} subTitle 副标题
+	 * @property {Number} padding 内容内边距
+	 * @property {Number} margin 卡片外边距
+	 * @property {Number} spacing 卡片内边距
+	 * @property {String} extra 标题额外信息
+	 * @property {String} cover 封面图（本地路径需要引入）
+	 * @property {String} thumbnail 标题左侧缩略图
+	 * @property {Boolean} is-full = [true | false] 卡片内容是否通栏，为 true 时将去除padding值
+	 * @property {Boolean} is-shadow = [true | false] 卡片内容是否开启阴影
+	 * @property {String} shadow 卡片阴影
+	 * @property {Boolean} border 卡片边框
+	 * @event {Function} click 点击 Card 触发事件
+	 */
+	export default {
+		name: 'UniCard',
+		emits: ['click'],
+		props: {
+			title: {
+				type: String,
+				default: ''
+			},
+			subTitle: {
+				type: String,
+				default: ''
+			},
+			padding: {
+				type: String,
+				default: '10px'
+			},
+			margin: {
+				type: String,
+				default: '15px'
+			},
+			spacing: {
+				type: String,
+				default: '0 10px'
+			},
+			extra: {
+				type: String,
+				default: ''
+			},
+			cover: {
+				type: String,
+				default: ''
+			},
+			thumbnail: {
+				type: String,
+				default: ''
+			},
+			isFull: {
+				// 内容区域是否通栏
+				type: Boolean,
+				default: false
+			},
+			isShadow: {
+				// 是否开启阴影
+				type: Boolean,
+				default: true
+			},
+			shadow: {
+				type: String,
+				default: '0px 0px 3px 1px rgba(0, 0, 0, 0.08)'
+			},
+			border: {
+				type: Boolean,
+				default: true
+			}
+		},
+		methods: {
+			onClick(type) {
+				this.$emit('click', type)
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	$uni-border-3: #EBEEF5 !default;
+	$uni-shadow-base:0 0px 6px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
+	$uni-main-color: #3a3a3a !default;
+	$uni-base-color: #6a6a6a !default;
+	$uni-secondary-color: #909399 !default;
+	$uni-spacing-sm: 8px !default;
+	$uni-border-color:$uni-border-3;
+	$uni-shadow: $uni-shadow-base;
+	$uni-card-title: 15px;
+	$uni-cart-title-color:$uni-main-color;
+	$uni-card-subtitle: 12px;
+	$uni-cart-subtitle-color:$uni-secondary-color;
+	$uni-card-spacing: 10px;
+	$uni-card-content-color: $uni-base-color;
+
+	.uni-card {
+		margin: $uni-card-spacing;
+		padding: 0 $uni-spacing-sm;
+		border-radius: 4px;
+		overflow: hidden;
+		font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+		background-color: #fff;
+		flex: 1;
+
+		.uni-card__cover {
+			position: relative;
+			margin-top: $uni-card-spacing;
+			flex-direction: row;
+			overflow: hidden;
+			border-radius: 4px;
+			.uni-card__cover-image {
+				flex: 1;
+				// width: 100%;
+				/* #ifndef APP-PLUS */
+				vertical-align: middle;
+				/* #endif */
+			}
+		}
+
+		.uni-card__header {
+			display: flex;
+			border-bottom: 1px $uni-border-color solid;
+			flex-direction: row;
+			align-items: center;
+			padding: $uni-card-spacing;
+			overflow: hidden;
+
+			.uni-card__header-box {
+				/* #ifndef APP-NVUE */
+				display: flex;
+				/* #endif */
+				flex: 1;
+				flex-direction: row;
+				align-items: center;
+				overflow: hidden;
+			}
+
+			.uni-card__header-avatar {
+				width: 40px;
+				height: 40px;
+				overflow: hidden;
+				border-radius: 5px;
+				margin-right: $uni-card-spacing;
+				.uni-card__header-avatar-image {
+					flex: 1;
+					width: 40px;
+					height: 40px;
+				}
+			}
+
+			.uni-card__header-content {
+				/* #ifndef APP-NVUE */
+				display: flex;
+				/* #endif */
+				flex-direction: column;
+				justify-content: center;
+				flex: 1;
+				// height: 40px;
+				overflow: hidden;
+
+				.uni-card__header-content-title {
+					font-size: $uni-card-title;
+					color: $uni-cart-title-color;
+					// line-height: 22px;
+				}
+
+				.uni-card__header-content-subtitle {
+					font-size: $uni-card-subtitle;
+					margin-top: 5px;
+					color: $uni-cart-subtitle-color;
+				}
+			}
+
+			.uni-card__header-extra {
+				line-height: 12px;
+
+				.uni-card__header-extra-text {
+					font-size: 12px;
+					color: $uni-cart-subtitle-color;
+				}
+			}
+		}
+
+		.uni-card__content {
+			padding: $uni-card-spacing;
+			font-size: 14px;
+			color: $uni-card-content-color;
+			line-height: 22px;
+		}
+
+		.uni-card__actions {
+			font-size: 12px;
+		}
+	}
+
+	.uni-card--border {
+		border: 1px solid $uni-border-color;
+	}
+
+	.uni-card--shadow {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		box-shadow: $uni-shadow;
+		/* #endif */
+	}
+
+	.uni-card--full {
+		margin: 0;
+		border-left-width: 0;
+		border-left-width: 0;
+		border-radius: 0;
+	}
+
+	/* #ifndef APP-NVUE */
+	.uni-card--full:after {
+		border-radius: 0;
+	}
+
+	/* #endif */
+	.uni-ellipsis {
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		lines: 1;
+		/* #endif */
+	}
+</style>
diff --git a/uni_modules/uni-card/package.json b/uni_modules/uni-card/package.json
new file mode 100644
index 0000000..f16224d
--- /dev/null
+++ b/uni_modules/uni-card/package.json
@@ -0,0 +1,90 @@
+{
+  "id": "uni-card",
+  "displayName": "uni-card 卡片",
+  "version": "1.3.1",
+  "description": "Card 组件，提供常见的卡片样式。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "card",
+    "",
+    "卡片"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-icons",
+			"uni-scss"
+		],
+    "encrypt": [],
+    "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/uni_modules/uni-card/readme.md b/uni_modules/uni-card/readme.md
new file mode 100644
index 0000000..7434e71
--- /dev/null
+++ b/uni_modules/uni-card/readme.md
@@ -0,0 +1,12 @@
+
+
+## Card 卡片
+> **组件名：uni-card**
+> 代码块： `uCard`
+
+卡片视图组件。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-card)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
diff --git a/uni_modules/uni-collapse/changelog.md b/uni_modules/uni-collapse/changelog.md
new file mode 100644
index 0000000..455308a
--- /dev/null
+++ b/uni_modules/uni-collapse/changelog.md
@@ -0,0 +1,38 @@
+## 1.4.4（2024-03-20）
+- 修复 titleBorder类型修正
+## 1.4.3（2022-01-25）
+- 修复 初始化的时候 ，open 属性失效的bug
+## 1.4.2（2022-01-21）
+- 修复 微信小程序resize后组件收起的bug
+## 1.4.1（2021-11-22）
+- 修复 vue3中个别scss变量无法找到的问题
+## 1.4.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-collapse](https://uniapp.dcloud.io/component/uniui/uni-collapse)
+## 1.3.3（2021-08-17）
+- 优化 show-arrow 属性默认为true
+## 1.3.2（2021-08-17）
+- 新增 show-arrow 属性，控制是否显示右侧箭头
+## 1.3.1（2021-07-30）
+- 优化 vue3下小程序事件警告的问题
+## 1.3.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.2.2（2021-07-21）
+- 修复 由1.2.0版本引起的 change 事件返回 undefined 的Bug
+## 1.2.1（2021-07-21）
+- 优化 组件示例
+## 1.2.0（2021-07-21）
+- 新增 组件折叠动画
+- 新增 value\v-model 属性 ，动态修改面板折叠状态
+- 新增 title 插槽 ，可定义面板标题
+- 新增 border 属性 ，显示隐藏面板内容分隔线
+- 新增 title-border 属性 ，显示隐藏面板标题分隔线
+- 修复 resize 方法失效的Bug
+- 修复 change 事件返回参数不正确的Bug
+- 优化 H5、App 平台自动更具内容更新高度，无需调用 reszie() 方法
+## 1.1.7（2021-05-12）
+- 新增 组件示例地址
+## 1.1.6（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+## 1.1.5（2021-02-05）
+- 调整为uni_modules目录规范
\ No newline at end of file
diff --git a/uni_modules/uni-collapse/components/uni-collapse-item/uni-collapse-item.vue b/uni_modules/uni-collapse/components/uni-collapse-item/uni-collapse-item.vue
new file mode 100644
index 0000000..2f0862e
--- /dev/null
+++ b/uni_modules/uni-collapse/components/uni-collapse-item/uni-collapse-item.vue
@@ -0,0 +1,402 @@
+<template>
+	<view class="uni-collapse-item">
+		<!-- onClick(!isOpen) -->
+		<view @click="onClick(!isOpen)" class="uni-collapse-item__title"
+			:class="{'is-open':isOpen &&titleBorder === 'auto' ,'uni-collapse-item-border':titleBorder !== 'none'}">
+			<view class="uni-collapse-item__title-wrap">
+				<slot name="title">
+					<view class="uni-collapse-item__title-box" :class="{'is-disabled':disabled}">
+						<image v-if="thumb" :src="thumb" class="uni-collapse-item__title-img" />
+						<text class="uni-collapse-item__title-text">{{ title }}</text>
+					</view>
+				</slot>
+			</view>
+			<view v-if="showArrow"
+				:class="{ 'uni-collapse-item__title-arrow-active': isOpen, 'uni-collapse-item--animation': showAnimation === true }"
+				class="uni-collapse-item__title-arrow">
+				<uni-icons :color="disabled?'#ddd':'#bbb'" size="14" type="bottom" />
+			</view>
+		</view>
+		<view class="uni-collapse-item__wrap" :class="{'is--transition':showAnimation}"
+			:style="{height: (isOpen?height:0) +'px'}">
+			<view :id="elId" ref="collapse--hook" class="uni-collapse-item__wrap-content"
+				:class="{open:isheight,'uni-collapse-item--border':border&&isOpen}">
+				<slot></slot>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	// #ifdef APP-NVUE
+	const dom = weex.requireModule('dom')
+	// #endif
+	/**
+	 * CollapseItem 折叠面板子组件
+	 * @description 折叠面板子组件
+	 * @property {String} title 标题文字
+	 * @property {String} thumb 标题左侧缩略图
+	 * @property {String} name 唯一标志符
+	 * @property {Boolean} open = [true|false] 是否展开组件
+	 * @property {Boolean} titleBorder = [true|false] 是否显示标题分隔线
+	 * @property {String} border = ['auto'|'show'|'none'] 是否显示分隔线
+	 * @property {Boolean} disabled = [true|false] 是否展开面板
+	 * @property {Boolean} showAnimation = [true|false] 开启动画
+	 * @property {Boolean} showArrow = [true|false] 是否显示右侧箭头
+	 */
+	export default {
+		name: 'uniCollapseItem',
+		props: {
+			// 列表标题
+			title: {
+				type: String,
+				default: ''
+			},
+			name: {
+				type: [Number, String],
+				default: ''
+			},
+			// 是否禁用
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			// #ifdef APP-PLUS
+			// 是否显示动画,app 端默认不开启动画，卡顿严重
+			showAnimation: {
+				type: Boolean,
+				default: false
+			},
+			// #endif
+			// #ifndef APP-PLUS
+			// 是否显示动画
+			showAnimation: {
+				type: Boolean,
+				default: true
+			},
+			// #endif
+			// 是否展开
+			open: {
+				type: Boolean,
+				default: false
+			},
+			// 缩略图
+			thumb: {
+				type: String,
+				default: ''
+			},
+			// 标题分隔线显示类型
+			titleBorder: {
+				type: String,
+				default: 'auto'
+			},
+			border: {
+				type: Boolean,
+				default: true
+			},
+			showArrow: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			// TODO 随机生生元素ID，解决百度小程序获取同一个元素位置信息的bug
+			const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
+			return {
+				isOpen: false,
+				isheight: null,
+				height: 0,
+				elId,
+				nameSync: 0
+			}
+		},
+		watch: {
+			open(val) {
+				this.isOpen = val
+				this.onClick(val, 'init')
+			}
+		},
+		updated(e) {
+			this.$nextTick(() => {
+				this.init(true)
+			})
+		},
+		created() {
+			this.collapse = this.getCollapse()
+			this.oldHeight = 0
+			this.onClick(this.open, 'init')
+		},
+		// #ifndef VUE3
+		// TODO vue2
+		destroyed() {
+			if (this.__isUnmounted) return
+			this.uninstall()
+		},
+		// #endif
+		// #ifdef VUE3
+		// TODO vue3
+		unmounted() {
+			this.__isUnmounted = true
+			this.uninstall()
+		},
+		// #endif
+		mounted() {
+			if (!this.collapse) return
+			if (this.name !== '') {
+				this.nameSync = this.name
+			} else {
+				this.nameSync = this.collapse.childrens.length + ''
+			}
+			if (this.collapse.names.indexOf(this.nameSync) === -1) {
+				this.collapse.names.push(this.nameSync)
+			} else {
+				console.warn(`name 值 ${this.nameSync} 重复`);
+			}
+			if (this.collapse.childrens.indexOf(this) === -1) {
+				this.collapse.childrens.push(this)
+			}
+			this.init()
+		},
+		methods: {
+			init(type) {
+				// #ifndef APP-NVUE
+				this.getCollapseHeight(type)
+				// #endif
+				// #ifdef APP-NVUE
+				this.getNvueHwight(type)
+				// #endif
+			},
+			uninstall() {
+				if (this.collapse) {
+					this.collapse.childrens.forEach((item, index) => {
+						if (item === this) {
+							this.collapse.childrens.splice(index, 1)
+						}
+					})
+					this.collapse.names.forEach((item, index) => {
+						if (item === this.nameSync) {
+							this.collapse.names.splice(index, 1)
+						}
+					})
+				}
+			},
+			onClick(isOpen, type) {
+				if (this.disabled) return
+				this.isOpen = isOpen
+				if (this.isOpen && this.collapse) {
+					this.collapse.setAccordion(this)
+				}
+				if (type !== 'init') {
+					this.collapse.onChange(isOpen, this)
+				}
+			},
+			getCollapseHeight(type, index = 0) {
+				const views = uni.createSelectorQuery().in(this)
+				views
+					.select(`#${this.elId}`)
+					.fields({
+						size: true
+					}, data => {
+						// TODO 百度中可能获取不到节点信息 ，需要循环获取
+						if (index >= 10) return
+						if (!data) {
+							index++
+							this.getCollapseHeight(false, index)
+							return
+						}
+						// #ifdef APP-NVUE
+						this.height = data.height + 1
+						// #endif
+						// #ifndef APP-NVUE
+						this.height = data.height
+						// #endif
+						this.isheight = true
+						if (type) return
+						this.onClick(this.isOpen, 'init')
+					})
+					.exec()
+			},
+			getNvueHwight(type) {
+				const result = dom.getComponentRect(this.$refs['collapse--hook'], option => {
+					if (option && option.result && option.size) {
+						// #ifdef APP-NVUE
+						this.height = option.size.height + 1
+						// #endif
+						// #ifndef APP-NVUE
+						this.height = option.size.height
+						// #endif
+						this.isheight = true
+						if (type) return
+						this.onClick(this.open, 'init')
+					}
+				})
+			},
+			/**
+			 * 获取父元素实例
+			 */
+			getCollapse(name = 'uniCollapse') {
+				let parent = this.$parent;
+				let parentName = parent.$options.name;
+				while (parentName !== name) {
+					parent = parent.$parent;
+					if (!parent) return false;
+					parentName = parent.$options.name;
+				}
+				return parent;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.uni-collapse-item {
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+
+		/* #endif */
+		&__title {
+			/* #ifndef APP-NVUE */
+			display: flex;
+			width: 100%;
+			box-sizing: border-box;
+			/* #endif */
+			flex-direction: row;
+			align-items: center;
+			transition: border-bottom-color .3s;
+
+			// transition-property: border-bottom-color;
+			// transition-duration: 5s;
+			&-wrap {
+				width: 100%;
+				flex: 1;
+
+			}
+
+			&-box {
+				padding: 0 15px;
+				/* #ifndef APP-NVUE */
+				display: flex;
+				width: 100%;
+				box-sizing: border-box;
+				/* #endif */
+				flex-direction: row;
+				justify-content: space-between;
+				align-items: center;
+				height: 48px;
+				line-height: 48px;
+				background-color: #fff;
+				color: #303133;
+				font-size: 13px;
+				font-weight: 500;
+				/* #ifdef H5 */
+				cursor: pointer;
+				outline: none;
+
+				/* #endif */
+				&.is-disabled {
+					.uni-collapse-item__title-text {
+						color: #999;
+					}
+				}
+
+			}
+
+			&.uni-collapse-item-border {
+				border-bottom: 1px solid #ebeef5;
+			}
+
+			&.is-open {
+				border-bottom-color: transparent;
+			}
+
+			&-img {
+				height: 22px;
+				width: 22px;
+				margin-right: 10px;
+			}
+
+			&-text {
+				flex: 1;
+				font-size: 14px;
+				/* #ifndef APP-NVUE */
+				white-space: nowrap;
+				color: inherit;
+				/* #endif */
+				/* #ifdef APP-NVUE */
+				lines: 1;
+				/* #endif */
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
+			&-arrow {
+				/* #ifndef APP-NVUE */
+				display: flex;
+				box-sizing: border-box;
+				/* #endif */
+				align-items: center;
+				justify-content: center;
+				width: 20px;
+				height: 20px;
+				margin-right: 10px;
+				transform: rotate(0deg);
+
+				&-active {
+					transform: rotate(-180deg);
+				}
+			}
+
+
+		}
+
+		&__wrap {
+			/* #ifndef APP-NVUE */
+			will-change: height;
+			box-sizing: border-box;
+			/* #endif */
+			background-color: #fff;
+			overflow: hidden;
+			position: relative;
+			height: 0;
+
+			&.is--transition {
+				// transition: all 0.3s;
+				transition-property: height, border-bottom-width;
+				transition-duration: 0.3s;
+				/* #ifndef APP-NVUE */
+				will-change: height;
+				/* #endif */
+			}
+
+
+
+			&-content {
+				position: absolute;
+				font-size: 13px;
+				color: #303133;
+				// transition: height 0.3s;
+				border-bottom-color: transparent;
+				border-bottom-style: solid;
+				border-bottom-width: 0;
+
+				&.uni-collapse-item--border {
+					border-bottom-width: 1px;
+					border-bottom-color: red;
+					border-bottom-color: #ebeef5;
+				}
+
+				&.open {
+					position: relative;
+				}
+			}
+		}
+
+		&--animation {
+			transition-property: transform;
+			transition-duration: 0.3s;
+			transition-timing-function: ease;
+		}
+
+	}
+</style>
diff --git a/uni_modules/uni-collapse/components/uni-collapse/uni-collapse.vue b/uni_modules/uni-collapse/components/uni-collapse/uni-collapse.vue
new file mode 100644
index 0000000..384c39a
--- /dev/null
+++ b/uni_modules/uni-collapse/components/uni-collapse/uni-collapse.vue
@@ -0,0 +1,147 @@
+<template>
+	<view class="uni-collapse">
+		<slot />
+	</view>
+</template>
+<script>
+	/**
+	 * Collapse 折叠面板
+	 * @description 展示可以折叠 / 展开的内容区域
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=23
+	 * @property {String|Array} value 当前激活面板改变时触发(如果是手风琴模式，参数类型为string，否则为array)
+	 * @property {Boolean} accordion = [true|false] 是否开启手风琴效果是否开启手风琴效果
+	 * @event {Function} change 切换面板时触发，如果是手风琴模式，返回类型为string，否则为array
+	 */
+	export default {
+		name: 'uniCollapse',
+		emits:['change','activeItem','input','update:modelValue'],
+		props: {
+			value: {
+				type: [String, Array],
+				default: ''
+			},
+			modelValue: {
+				type: [String, Array],
+				default: ''
+			},
+			accordion: {
+				// 是否开启手风琴效果
+				type: [Boolean, String],
+				default: false
+			},
+		},
+		data() {
+			return {}
+		},
+		computed: {
+			// TODO 兼容 vue2 和 vue3
+			dataValue() {
+				let value = (typeof this.value === 'string' && this.value === '') ||
+					(Array.isArray(this.value) && this.value.length === 0)
+				let modelValue = (typeof this.modelValue === 'string' && this.modelValue === '') ||
+					(Array.isArray(this.modelValue) && this.modelValue.length === 0)
+				if (value) {
+					return this.modelValue
+				}
+				if (modelValue) {
+					return this.value
+				}
+
+				return this.value
+			}
+		},
+		watch: {
+			dataValue(val) {
+				this.setOpen(val)
+			}
+		},
+		created() {
+			this.childrens = []
+			this.names = []
+		},
+		mounted() {
+			this.$nextTick(()=>{
+				this.setOpen(this.dataValue)
+			})
+		},
+		methods: {
+			setOpen(val) {
+				let str = typeof val === 'string'
+				let arr = Array.isArray(val)
+				this.childrens.forEach((vm, index) => {
+					if (str) {
+						if (val === vm.nameSync) {
+							if (!this.accordion) {
+								console.warn('accordion 属性为 false ,v-model 类型应该为 array')
+								return
+							}
+							vm.isOpen = true
+						}
+					}
+					if (arr) {
+						val.forEach(v => {
+							if (v === vm.nameSync) {
+								if (this.accordion) {
+									console.warn('accordion 属性为 true ,v-model 类型应该为 string')
+									return
+								}
+								vm.isOpen = true
+							}
+						})
+					}
+				})
+				this.emit(val)
+			},
+			setAccordion(self) {
+				if (!this.accordion) return
+				this.childrens.forEach((vm, index) => {
+					if (self !== vm) {
+						vm.isOpen = false
+					}
+				})
+			},
+			resize() {
+				this.childrens.forEach((vm, index) => {
+					// #ifndef APP-NVUE
+					vm.getCollapseHeight()
+					// #endif
+					// #ifdef APP-NVUE
+					vm.getNvueHwight()
+					// #endif
+				})
+			},
+			onChange(isOpen, self) {
+				let activeItem = []
+
+				if (this.accordion) {
+					activeItem = isOpen ? self.nameSync : ''
+				} else {
+					this.childrens.forEach((vm, index) => {
+						if (vm.isOpen) {
+							activeItem.push(vm.nameSync)
+						}
+					})
+				}
+				this.$emit('change', activeItem)
+				this.emit(activeItem)
+			},
+			emit(val){
+				this.$emit('input', val)
+				this.$emit('update:modelValue', val)
+			}
+		}
+	}
+</script>
+<style lang="scss" >
+	.uni-collapse {
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		display: flex;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		flex: 1;
+		/* #endif */
+		flex-direction: column;
+		background-color: #fff;
+	}
+</style>
diff --git a/uni_modules/uni-collapse/package.json b/uni_modules/uni-collapse/package.json
new file mode 100644
index 0000000..65c5c2e
--- /dev/null
+++ b/uni_modules/uni-collapse/package.json
@@ -0,0 +1,86 @@
+{
+  "id": "uni-collapse",
+  "displayName": "uni-collapse 折叠面板",
+  "version": "1.4.4",
+  "description": "Collapse 组件，可以折叠 / 展开的内容区域。",
+  "keywords": [
+    "uni-ui",
+    "折叠",
+    "折叠面板",
+    "手风琴"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+      "uni-icons"
+    ],
+    "encrypt": [],
+    "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/uni_modules/uni-collapse/readme.md b/uni_modules/uni-collapse/readme.md
new file mode 100644
index 0000000..bc758eb
--- /dev/null
+++ b/uni_modules/uni-collapse/readme.md
@@ -0,0 +1,12 @@
+
+
+## Collapse 折叠面板
+> **组件名：uni-collapse**
+> 代码块： `uCollapse`
+> 关联组件：`uni-collapse-item`、`uni-icons`。
+
+
+折叠面板用来折叠/显示过长的内容或者是列表。通常是在多内容分类项使用，折叠不重要的内容，显示重要内容。点击可以展开折叠部分。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-collapse)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/uni_modules/uni-combox/changelog.md b/uni_modules/uni-combox/changelog.md
new file mode 100644
index 0000000..23c2748
--- /dev/null
+++ b/uni_modules/uni-combox/changelog.md
@@ -0,0 +1,15 @@
+## 1.0.1（2021-11-23）
+- 优化 label、label-width 属性
+## 1.0.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-combox](https://uniapp.dcloud.io/component/uniui/uni-combox)
+## 0.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 0.0.6（2021-05-12）
+- 新增 组件示例地址
+## 0.0.5（2021-04-21）
+- 优化 添加依赖 uni-icons, 导入后自动下载依赖
+## 0.0.4（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+## 0.0.3（2021-02-04）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-combox/components/uni-combox/uni-combox.vue b/uni_modules/uni-combox/components/uni-combox/uni-combox.vue
new file mode 100644
index 0000000..d4cb79d
--- /dev/null
+++ b/uni_modules/uni-combox/components/uni-combox/uni-combox.vue
@@ -0,0 +1,275 @@
+<template>
+	<view class="uni-combox" :class="border ? '' : 'uni-combox__no-border'">
+		<view v-if="label" class="uni-combox__label" :style="labelStyle">
+			<text>{{label}}</text>
+		</view>
+		<view class="uni-combox__input-box">
+			<input class="uni-combox__input" type="text" :placeholder="placeholder" 
+			placeholder-class="uni-combox__input-plac" v-model="inputVal" @input="onInput" @focus="onFocus" 
+@blur="onBlur" />
+			<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" @click="toggleSelector">
+			</uni-icons>
+		</view>
+		<view class="uni-combox__selector" v-if="showSelector">
+			<view class="uni-popper__arrow"></view>
+			<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
+				<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
+					<text>{{emptyTips}}</text>
+				</view>
+				<view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index" 
+				@click="onSelectorClick(index)">
+					<text>{{item}}</text>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * Combox 组合输入框
+	 * @description 组合输入框一般用于既可以输入也可以选择的场景
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=1261
+	 * @property {String} label 左侧文字
+	 * @property {String} labelWidth 左侧内容宽度
+	 * @property {String} placeholder 输入框占位符
+	 * @property {Array} candidates 候选项列表
+	 * @property {String} emptyTips 筛选结果为空时显示的文字
+	 * @property {String} value 组合框的值
+	 */
+	export default {
+		name: 'uniCombox',
+		emits: ['input', 'update:modelValue'],
+		props: {
+			border: {
+				type: Boolean,
+				default: true
+			},
+			label: {
+				type: String,
+				default: ''
+			},
+			labelWidth: {
+				type: String,
+				default: 'auto'
+			},
+			placeholder: {
+				type: String,
+				default: ''
+			},
+			candidates: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			emptyTips: {
+				type: String,
+				default: '无匹配项'
+			},
+			// #ifndef VUE3
+			value: {
+				type: [String, Number],
+				default: ''
+			},
+			// #endif
+			// #ifdef VUE3
+			modelValue: {
+				type: [String, Number],
+				default: ''
+			},
+			// #endif
+		},
+		data() {
+			return {
+				showSelector: false,
+				inputVal: ''
+			}
+		},
+		computed: {
+			labelStyle() {
+				if (this.labelWidth === 'auto') {
+					return ""
+				}
+				return `width: ${this.labelWidth}`
+			},
+			filterCandidates() {
+				return this.candidates.filter((item) => {
+					return item.toString().indexOf(this.inputVal) > -1
+				})
+			},
+			filterCandidatesLength() {
+				return this.filterCandidates.length
+			}
+		},
+		watch: {
+			// #ifndef VUE3
+			value: {
+				handler(newVal) {
+					this.inputVal = newVal
+				},
+				immediate: true
+			},
+			// #endif
+			// #ifdef VUE3
+			modelValue: {
+				handler(newVal) {
+					this.inputVal = newVal
+				},
+				immediate: true
+			},
+			// #endif
+		},
+		methods: {
+			toggleSelector() {
+				this.showSelector = !this.showSelector
+			},
+			onFocus() {
+				this.showSelector = true
+			},
+			onBlur() {
+				setTimeout(() => {
+					this.showSelector = false
+				}, 153)
+			},
+			onSelectorClick(index) {
+				this.inputVal = this.filterCandidates[index]
+				this.showSelector = false
+				this.$emit('input', this.inputVal)
+				this.$emit('update:modelValue', this.inputVal)
+			},
+			onInput() {
+				setTimeout(() => {
+					this.$emit('input', this.inputVal)
+					this.$emit('update:modelValue', this.inputVal)
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uni-combox {
+		font-size: 14px;
+		border: 1px solid #DCDFE6;
+		border-radius: 4px;
+		padding: 6px 10px;
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		// height: 40px;
+		flex-direction: row;
+		align-items: center;
+		// border-bottom: solid 1px #DDDDDD;
+	}
+
+	.uni-combox__label {
+		font-size: 16px;
+		line-height: 22px;
+		padding-right: 10px;
+		color: #999999;
+	}
+
+	.uni-combox__input-box {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.uni-combox__input {
+		flex: 1;
+		font-size: 14px;
+		height: 22px;
+		line-height: 22px;
+	}
+
+	.uni-combox__input-plac {
+		font-size: 14px;
+		color: #999;
+	}
+
+	.uni-combox__selector {
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		/* #endif */
+		position: absolute;
+		top: calc(100% + 12px);
+		left: 0;
+		width: 100%;
+		background-color: #FFFFFF;
+		border: 1px solid #EBEEF5;
+		border-radius: 6px;
+		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+		z-index: 2;
+		padding: 4px 0;
+	}
+
+	.uni-combox__selector-scroll {
+		/* #ifndef APP-NVUE */
+		max-height: 200px;
+		box-sizing: border-box;
+		/* #endif */
+	}
+
+	.uni-combox__selector-empty,
+	.uni-combox__selector-item {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		cursor: pointer;
+		/* #endif */
+		line-height: 36px;
+		font-size: 14px;
+		text-align: center;
+		// border-bottom: solid 1px #DDDDDD;
+		padding: 0px 10px;
+	}
+
+	.uni-combox__selector-item:hover {
+		background-color: #f9f9f9;
+	}
+
+	.uni-combox__selector-empty:last-child,
+	.uni-combox__selector-item:last-child {
+		/* #ifndef APP-NVUE */
+		border-bottom: none;
+		/* #endif */
+	}
+
+	// picker 弹出层通用的指示小三角
+	.uni-popper__arrow,
+	.uni-popper__arrow::after {
+		position: absolute;
+		display: block;
+		width: 0;
+		height: 0;
+		border-color: transparent;
+		border-style: solid;
+		border-width: 6px;
+	}
+
+	.uni-popper__arrow {
+		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
+		top: -6px;
+		left: 10%;
+		margin-right: 3px;
+		border-top-width: 0;
+		border-bottom-color: #EBEEF5;
+	}
+
+	.uni-popper__arrow::after {
+		content: " ";
+		top: 1px;
+		margin-left: -6px;
+		border-top-width: 0;
+		border-bottom-color: #fff;
+	}
+
+	.uni-combox__no-border {
+		border: none;
+	}
+</style>
diff --git a/uni_modules/uni-combox/package.json b/uni_modules/uni-combox/package.json
new file mode 100644
index 0000000..4a05c3f
--- /dev/null
+++ b/uni_modules/uni-combox/package.json
@@ -0,0 +1,90 @@
+{
+  "id": "uni-combox",
+  "displayName": "uni-combox 组合框",
+  "version": "1.0.1",
+  "description": "可以选择也可以输入的表单项 ",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "combox",
+    "组合框",
+    "select"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+			"uni-icons"
+		],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "n"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-combox/readme.md b/uni_modules/uni-combox/readme.md
new file mode 100644
index 0000000..ffa2cc8
--- /dev/null
+++ b/uni_modules/uni-combox/readme.md
@@ -0,0 +1,11 @@
+
+
+## Combox 组合框
+> **组件名：uni-combox**
+> 代码块： `uCombox`
+
+
+组合框组件。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-combox)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/uni_modules/uni-countdown/changelog.md b/uni_modules/uni-countdown/changelog.md
new file mode 100644
index 0000000..16fc324
--- /dev/null
+++ b/uni_modules/uni-countdown/changelog.md
@@ -0,0 +1,26 @@
+## 1.2.3（2024-02-20）
+- 新增 支持控制小时，分钟的显隐：showHour showMinute
+## 1.2.2（2022-01-19）
+- 修复 在微信小程序中样式不生效的bug
+## 1.2.1（2022-01-18）
+- 新增 update 方法 ，在动态更新时间后，刷新组件
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-countdown](https://uniapp.dcloud.io/component/uniui/uni-countdown)
+## 1.1.3（2021-10-18）
+- 重构
+- 新增 font-size 支持自定义字体大小
+## 1.1.2（2021-08-24）
+- 新增 支持国际化
+## 1.1.1（2021-07-30）
+- 优化 vue3下小程序事件警告的问题
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.5（2021-06-18）
+- 修复 uni-countdown 重复赋值跳两秒的 bug
+## 1.0.4（2021-05-12）
+- 新增 组件示例地址
+## 1.0.3（2021-05-08）
+- 修复 uni-countdown 不能控制倒计时的 bug
+## 1.0.2（2021-02-04）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-countdown/components/uni-countdown/i18n/en.json b/uni_modules/uni-countdown/components/uni-countdown/i18n/en.json
new file mode 100644
index 0000000..06309cb
--- /dev/null
+++ b/uni_modules/uni-countdown/components/uni-countdown/i18n/en.json
@@ -0,0 +1,6 @@
+{
+	"uni-countdown.day": "day",
+	"uni-countdown.h": "h",
+	"uni-countdown.m": "m",
+	"uni-countdown.s": "s"
+}
diff --git a/uni_modules/uni-countdown/components/uni-countdown/i18n/index.js b/uni_modules/uni-countdown/components/uni-countdown/i18n/index.js
new file mode 100644
index 0000000..de7509c
--- /dev/null
+++ b/uni_modules/uni-countdown/components/uni-countdown/i18n/index.js
@@ -0,0 +1,8 @@
+import en from './en.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
+}
diff --git a/uni_modules/uni-countdown/components/uni-countdown/i18n/zh-Hans.json b/uni_modules/uni-countdown/components/uni-countdown/i18n/zh-Hans.json
new file mode 100644
index 0000000..358cdd1
--- /dev/null
+++ b/uni_modules/uni-countdown/components/uni-countdown/i18n/zh-Hans.json
@@ -0,0 +1,6 @@
+{
+	"uni-countdown.day": "天",
+	"uni-countdown.h": "时",
+	"uni-countdown.m": "分",
+	"uni-countdown.s": "秒"
+}
diff --git a/uni_modules/uni-countdown/components/uni-countdown/i18n/zh-Hant.json b/uni_modules/uni-countdown/components/uni-countdown/i18n/zh-Hant.json
new file mode 100644
index 0000000..e5a63de
--- /dev/null
+++ b/uni_modules/uni-countdown/components/uni-countdown/i18n/zh-Hant.json
@@ -0,0 +1,6 @@
+{
+	"uni-countdown.day": "天",
+	"uni-countdown.h": "時",
+	"uni-countdown.m": "分",
+	"uni-countdown.s": "秒"
+}
diff --git a/uni_modules/uni-countdown/components/uni-countdown/uni-countdown.vue b/uni_modules/uni-countdown/components/uni-countdown/uni-countdown.vue
new file mode 100644
index 0000000..1e28dda
--- /dev/null
+++ b/uni_modules/uni-countdown/components/uni-countdown/uni-countdown.vue
@@ -0,0 +1,281 @@
+<template>
+	<view class="uni-countdown">
+		<text v-if="showDay" :style="[timeStyle]" class="uni-countdown__number">{{ d }}</text>
+		<text v-if="showDay" :style="[splitorStyle]" class="uni-countdown__splitor">{{dayText}}</text>
+		<text v-if="showHour" :style="[timeStyle]" class="uni-countdown__number">{{ h }}</text>
+		<text v-if="showHour" :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : hourText }}</text>
+		<text v-if="showMinute" :style="[timeStyle]" class="uni-countdown__number">{{ i }}</text>
+		<text v-if="showMinute" :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : minuteText }}</text>
+		<text :style="[timeStyle]" class="uni-countdown__number">{{ s }}</text>
+		<text v-if="!showColon" :style="[splitorStyle]" class="uni-countdown__splitor">{{secondText}}</text>
+	</view>
+</template>
+<script>
+	import {
+		initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import messages from './i18n/index.js'
+	const {
+		t
+	} = initVueI18n(messages)
+	/**
+	 * Countdown 倒计时
+	 * @description 倒计时组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=25
+	 * @property {String} backgroundColor 背景色
+	 * @property {String} color 文字颜色
+	 * @property {Number} day 天数
+	 * @property {Number} hour 小时
+	 * @property {Number} minute 分钟
+	 * @property {Number} second 秒
+	 * @property {Number} timestamp 时间戳
+	 * @property {Boolean} showDay = [true|false] 是否显示天数
+	 * @property {Boolean} showHour = [true|false] 是否显示小时
+	 * @property {Boolean} showMinute = [true|false] 是否显示分钟
+	 * @property {Boolean} show-colon = [true|false] 是否以冒号为分隔符
+	 * @property {String} splitorColor 分割符号颜色
+	 * @event {Function} timeup 倒计时时间到触发事件
+	 * @example <uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown>
+	 */
+	export default {
+		name: 'UniCountdown',
+		emits: ['timeup'],
+		props: {
+			showDay: {
+				type: Boolean,
+				default: true
+			},
+			showHour: {
+				type: Boolean,
+				default: true
+			},
+			showMinute: {
+				type: Boolean,
+				default: true
+			},
+			showColon: {
+				type: Boolean,
+				default: true
+			},
+			start: {
+				type: Boolean,
+				default: true
+			},
+			backgroundColor: {
+				type: String,
+				default: ''
+			},
+			color: {
+				type: String,
+				default: '#333'
+			},
+			fontSize: {
+				type: Number,
+				default: 14
+			},
+			splitorColor: {
+				type: String,
+				default: '#333'
+			},
+			day: {
+				type: Number,
+				default: 0
+			},
+			hour: {
+				type: Number,
+				default: 0
+			},
+			minute: {
+				type: Number,
+				default: 0
+			},
+			second: {
+				type: Number,
+				default: 0
+			},
+			timestamp: {
+				type: Number,
+				default: 0
+			}
+		},
+		data() {
+			return {
+				timer: null,
+				syncFlag: false,
+				d: '00',
+				h: '00',
+				i: '00',
+				s: '00',
+				leftTime: 0,
+				seconds: 0
+			}
+		},
+		computed: {
+			dayText() {
+				return t("uni-countdown.day")
+			},
+			hourText(val) {
+				return t("uni-countdown.h")
+			},
+			minuteText(val) {
+				return t("uni-countdown.m")
+			},
+			secondText(val) {
+				return t("uni-countdown.s")
+			},
+			timeStyle() {
+				const {
+					color,
+					backgroundColor,
+					fontSize
+				} = this
+				return {
+					color,
+					backgroundColor,
+					fontSize: `${fontSize}px`,
+					width: `${fontSize * 22 / 14}px`, // 按字体大小为 14px 时的比例缩放
+ 					lineHeight: `${fontSize * 20 / 14}px`,
+					borderRadius: `${fontSize * 3 / 14}px`,
+				}
+			},
+			splitorStyle() {
+				const { splitorColor, fontSize, backgroundColor } = this
+				return {
+					color: splitorColor,
+					fontSize: `${fontSize * 12 / 14}px`,
+					margin: backgroundColor ? `${fontSize * 4 / 14}px` : ''
+				}
+			}
+		},
+		watch: {
+			day(val) {
+				this.changeFlag()
+			},
+			hour(val) {
+				this.changeFlag()
+			},
+			minute(val) {
+				this.changeFlag()
+			},
+			second(val) {
+				this.changeFlag()
+			},
+			start: {
+				immediate: true,
+				handler(newVal, oldVal) {
+					if (newVal) {
+						this.startData();
+					} else {
+						if (!oldVal) return
+						clearInterval(this.timer)
+					}
+				}
+
+			}
+		},
+		created: function(e) {
+			this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
+			this.countDown()
+		},
+		// #ifndef VUE3
+		destroyed() {
+			clearInterval(this.timer)
+		},
+		// #endif
+		// #ifdef VUE3
+		unmounted() {
+			clearInterval(this.timer)
+		},
+		// #endif
+		methods: {
+			toSeconds(timestamp, day, hours, minutes, seconds) {
+				if (timestamp) {
+					return timestamp - parseInt(new Date().getTime() / 1000, 10)
+				}
+				return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
+			},
+			timeUp() {
+				clearInterval(this.timer)
+				this.$emit('timeup')
+			},
+			countDown() {
+				let seconds = this.seconds
+				let [day, hour, minute, second] = [0, 0, 0, 0]
+				if (seconds > 0) {
+					day = Math.floor(seconds / (60 * 60 * 24))
+					hour = Math.floor(seconds / (60 * 60)) - (day * 24)
+					minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
+					second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
+				} else {
+					this.timeUp()
+				}
+				if (day < 10) {
+					day = '0' + day
+				}
+				if (hour < 10) {
+					hour = '0' + hour
+				}
+				if (minute < 10) {
+					minute = '0' + minute
+				}
+				if (second < 10) {
+					second = '0' + second
+				}
+				this.d = day
+				this.h = hour
+				this.i = minute
+				this.s = second
+			},
+			startData() {
+				this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
+				if (this.seconds <= 0) {
+					this.seconds = this.toSeconds(0, 0, 0, 0, 0)
+					this.countDown()
+					return
+				}
+				clearInterval(this.timer)
+				this.countDown()
+				this.timer = setInterval(() => {
+					this.seconds--
+					if (this.seconds < 0) {
+						this.timeUp()
+						return
+					}
+					this.countDown()
+				}, 1000)
+			},
+			update(){
+				this.startData();
+			},
+			changeFlag() {
+				if (!this.syncFlag) {
+					this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
+					this.startData();
+					this.syncFlag = true;
+				}
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	$font-size: 14px;
+
+	.uni-countdown {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
+
+		&__splitor {
+			margin: 0 2px;
+			font-size: $font-size;
+			color: #333;
+		}
+
+		&__number {
+			border-radius: 3px;
+			text-align: center;
+			font-size: $font-size;
+		}
+	}
+</style>
diff --git a/uni_modules/uni-countdown/package.json b/uni_modules/uni-countdown/package.json
new file mode 100644
index 0000000..6622074
--- /dev/null
+++ b/uni_modules/uni-countdown/package.json
@@ -0,0 +1,83 @@
+{
+  "id": "uni-countdown",
+  "displayName": "uni-countdown 倒计时",
+  "version": "1.2.3",
+  "description": "CountDown 倒计时组件",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "countdown",
+    "倒计时"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-countdown/readme.md b/uni_modules/uni-countdown/readme.md
new file mode 100644
index 0000000..4bcb1aa
--- /dev/null
+++ b/uni_modules/uni-countdown/readme.md
@@ -0,0 +1,10 @@
+
+
+## CountDown 倒计时
+> **组件名：uni-countdown**
+> 代码块： `uCountDown`
+
+倒计时组件。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-countdown)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/uni_modules/uni-data-checkbox/changelog.md b/uni_modules/uni-data-checkbox/changelog.md
new file mode 100644
index 0000000..b475fcb
--- /dev/null
+++ b/uni_modules/uni-data-checkbox/changelog.md
@@ -0,0 +1,49 @@
+## 1.0.5（2024-03-20）
+- 修复 单选模式下选中样式不生效的bug
+## 1.0.4（2024-01-27）
+- 修复 修复错别字chagne为change
+## 1.0.3（2022-09-16）
+- 可以使用 uni-scss 控制主题色
+## 1.0.2（2022-06-30）
+- 优化 在 uni-forms 中的依赖注入方式
+## 1.0.1（2022-02-07）
+- 修复 multiple 为 true 时，v-model 的值为 null 报错的 bug
+## 1.0.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-data-checkbox](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox)
+## 0.2.5（2021-08-23）
+- 修复 在uni-forms中 modelValue 中不存在当前字段，当前字段必填写也不参与校验的问题
+## 0.2.4（2021-08-17）
+- 修复 单选 list 模式下 ，icon 为 left 时，选中图标不显示的问题
+## 0.2.3（2021-08-11）
+- 修复 在 uni-forms 中重置表单，错误信息无法清除的问题
+## 0.2.2（2021-07-30）
+- 优化 在uni-forms组件，与label不对齐的问题
+## 0.2.1（2021-07-27）
+- 修复 单选默认值为0不能选中的Bug
+## 0.2.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 0.1.11（2021-07-06）
+- 优化 删除无用日志
+## 0.1.10（2021-07-05）
+- 修复 由 0.1.9 引起的非 nvue 端图标不显示的问题
+## 0.1.9（2021-07-05）
+- 修复 nvue 黑框样式问题
+## 0.1.8（2021-06-28）
+- 修复 selectedTextColor 属性不生效的Bug
+## 0.1.7（2021-06-02）
+- 新增 map 属性，可以方便映射text/value属性
+## 0.1.6（2021-05-26）
+- 修复 不关联服务空间的情况下组件报错的Bug
+## 0.1.5（2021-05-12）
+- 新增 组件示例地址
+## 0.1.4（2021-04-09）
+- 修复 nvue 下无法选中的问题
+## 0.1.3（2021-03-22）
+- 新增 disabled属性
+## 0.1.2（2021-02-24）
+- 优化 默认颜色显示
+## 0.1.1（2021-02-24）
+- 新增 支持nvue
+## 0.1.0（2021-02-18）
+- “暂无数据”显示居中
diff --git a/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue b/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue
new file mode 100644
index 0000000..81d3f07
--- /dev/null
+++ b/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue
@@ -0,0 +1,849 @@
+<template>
+	<view class="uni-data-checklist" :style="{'margin-top':isTop+'px'}">
+		<template v-if="!isLocal">
+			<view class="uni-data-loading">
+				<uni-load-more v-if="!mixinDatacomErrorMessage" status="loading" iconType="snow" :iconSize="18"
+					:content-text="contentText"></uni-load-more>
+				<text v-else>{{mixinDatacomErrorMessage}}</text>
+			</view>
+		</template>
+		<template v-else>
+			<checkbox-group v-if="multiple" class="checklist-group" :class="{'is-list':mode==='list' || wrap}"
+				@change="change">
+				<label class="checklist-box"
+					:class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
+					:style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
+					<checkbox class="hidden" hidden :disabled="disabled || !!item.disabled" :value="item[map.value]+''"
+						:checked="item.selected" />
+					<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')"
+						class="checkbox__inner" :style="item.styleIcon">
+						<view class="checkbox__inner-icon"></view>
+					</view>
+					<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
+						<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
+						<view v-if="mode === 'list' && icon === 'right'" class="checkobx__list" :style="item.styleBackgroud"></view>
+					</view>
+				</label>
+			</checkbox-group>
+			<radio-group v-else class="checklist-group" :class="{'is-list':mode==='list','is-wrap':wrap}" @change="change">
+				<label class="checklist-box"
+					:class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
+					:style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
+					<radio class="hidden" hidden :disabled="disabled || item.disabled" :value="item[map.value]+''"
+						:checked="item.selected" />
+					<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="radio__inner"
+						:style="item.styleBackgroud">
+						<view class="radio__inner-icon" :style="item.styleIcon"></view>
+					</view>
+					<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
+						<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
+						<view v-if="mode === 'list' && icon === 'right'" :style="item.styleRightIcon" class="checkobx__list"></view>
+					</view>
+				</label>
+			</radio-group>
+		</template>
+	</view>
+</template>
+
+<script>
+	/**
+	 * DataChecklist 数据选择器
+	 * @description 通过数据渲染 checkbox 和 radio
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
+	 * @property {String} mode = [default| list | button | tag] 显示模式
+	 * @value default  	默认横排模式
+	 * @value list		列表模式
+	 * @value button	按钮模式
+	 * @value tag 		标签模式
+	 * @property {Boolean} multiple = [true|false] 是否多选
+	 * @property {Array|String|Number} value 默认值
+	 * @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
+	 * @property {Number|String} min 最小选择个数 ，multiple为true时生效
+	 * @property {Number|String} max 最大选择个数 ，multiple为true时生效
+	 * @property {Boolean} wrap 是否换行显示
+	 * @property {String} icon = [left|right]  list 列表模式下icon显示位置
+	 * @property {Boolean} selectedColor 选中颜色
+	 * @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
+	 * @property {Boolean} selectedTextColor 选中文本颜色，如不填写则自动显示
+	 * @property {Object} map 字段映射， 默认 map={text:'text',value:'value'}
+	 * @value left 左侧显示
+	 * @value right 右侧显示
+	 * @event {Function} change  选中发生变化触发
+	 */
+
+	export default {
+		name: 'uniDataChecklist',
+		mixins: [uniCloud.mixinDatacom || {}],
+		emits: ['input', 'update:modelValue', 'change'],
+		props: {
+			mode: {
+				type: String,
+				default: 'default'
+			},
+
+			multiple: {
+				type: Boolean,
+				default: false
+			},
+			value: {
+				type: [Array, String, Number],
+				default () {
+					return ''
+				}
+			},
+			// TODO vue3
+			modelValue: {
+				type: [Array, String, Number],
+				default () {
+					return '';
+				}
+			},
+			localdata: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			min: {
+				type: [Number, String],
+				default: ''
+			},
+			max: {
+				type: [Number, String],
+				default: ''
+			},
+			wrap: {
+				type: Boolean,
+				default: false
+			},
+			icon: {
+				type: String,
+				default: 'left'
+			},
+			selectedColor: {
+				type: String,
+				default: ''
+			},
+			selectedTextColor: {
+				type: String,
+				default: ''
+			},
+			emptyText: {
+				type: String,
+				default: '暂无数据'
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			map: {
+				type: Object,
+				default () {
+					return {
+						text: 'text',
+						value: 'value'
+					}
+				}
+			}
+		},
+		watch: {
+			localdata: {
+				handler(newVal) {
+					this.range = newVal
+					this.dataList = this.getDataList(this.getSelectedValue(newVal))
+				},
+				deep: true
+			},
+			mixinDatacomResData(newVal) {
+				this.range = newVal
+				this.dataList = this.getDataList(this.getSelectedValue(newVal))
+			},
+			value(newVal) {
+				this.dataList = this.getDataList(newVal)
+				// fix by mehaotian is_reset 在 uni-forms 中定义
+				// if(!this.is_reset){
+				// 	this.is_reset = false
+				// 	this.formItem && this.formItem.setValue(newVal)
+				// }
+			},
+			modelValue(newVal) {
+				this.dataList = this.getDataList(newVal);
+				// if(!this.is_reset){
+				// 	this.is_reset = false
+				// 	this.formItem && this.formItem.setValue(newVal)
+				// }
+			}
+		},
+		data() {
+			return {
+				dataList: [],
+				range: [],
+				contentText: {
+					contentdown: '查看更多',
+					contentrefresh: '加载中',
+					contentnomore: '没有更多'
+				},
+				isLocal: true,
+				styles: {
+					selectedColor: '#2979ff',
+					selectedTextColor: '#666',
+				},
+				isTop: 0
+			};
+		},
+		computed: {
+			dataValue() {
+				if (this.value === '') return this.modelValue
+				if (this.modelValue === '') return this.value
+				return this.value
+			}
+		},
+		created() {
+			// this.form = this.getForm('uniForms')
+			// this.formItem = this.getForm('uniFormsItem')
+			// this.formItem && this.formItem.setValue(this.value)
+
+			// if (this.formItem) {
+			// 	this.isTop = 6
+			// 	if (this.formItem.name) {
+			// 		// 如果存在name添加默认值,否则formData 中不存在这个字段不校验
+			// 		if(!this.is_reset){
+			// 			this.is_reset = false
+			// 			this.formItem.setValue(this.dataValue)
+			// 		}
+			// 		this.rename = this.formItem.name
+			// 		this.form.inputChildrens.push(this)
+			// 	}
+			// }
+
+			if (this.localdata && this.localdata.length !== 0) {
+				this.isLocal = true
+				this.range = this.localdata
+				this.dataList = this.getDataList(this.getSelectedValue(this.range))
+			} else {
+				if (this.collection) {
+					this.isLocal = false
+					this.loadData()
+				}
+			}
+		},
+		methods: {
+			loadData() {
+				this.mixinDatacomGet().then(res => {
+					this.mixinDatacomResData = res.result.data
+					if (this.mixinDatacomResData.length === 0) {
+						this.isLocal = false
+						this.mixinDatacomErrorMessage = this.emptyText
+					} else {
+						this.isLocal = true
+					}
+				}).catch(err => {
+					this.mixinDatacomErrorMessage = err.message
+				})
+			},
+			/**
+			 * 获取父元素实例
+			 */
+			getForm(name = 'uniForms') {
+				let parent = this.$parent;
+				let parentName = parent.$options.name;
+				while (parentName !== name) {
+					parent = parent.$parent;
+					if (!parent) return false
+					parentName = parent.$options.name;
+				}
+				return parent;
+			},
+			change(e) {
+				const values = e.detail.value
+
+				let detail = {
+					value: [],
+					data: []
+				}
+
+				if (this.multiple) {
+					this.range.forEach(item => {
+
+						if (values.includes(item[this.map.value] + '')) {
+							detail.value.push(item[this.map.value])
+							detail.data.push(item)
+						}
+					})
+				} else {
+					const range = this.range.find(item => (item[this.map.value] + '') === values)
+					if (range) {
+						detail = {
+							value: range[this.map.value],
+							data: range
+						}
+					}
+				}
+				// this.formItem && this.formItem.setValue(detail.value)
+				// TODO 兼容 vue2
+				this.$emit('input', detail.value);
+				// // TOTO 兼容 vue3
+				this.$emit('update:modelValue', detail.value);
+				this.$emit('change', {
+					detail
+				})
+				if (this.multiple) {
+					// 如果 v-model 没有绑定 ，则走内部逻辑
+					// if (this.value.length === 0) {
+					this.dataList = this.getDataList(detail.value, true)
+					// }
+				} else {
+					this.dataList = this.getDataList(detail.value)
+				}
+			},
+
+			/**
+			 * 获取渲染的新数组
+			 * @param {Object} value 选中内容
+			 */
+			getDataList(value) {
+				// 解除引用关系，破坏原引用关系，避免污染源数据
+				let dataList = JSON.parse(JSON.stringify(this.range))
+				let list = []
+				if (this.multiple) {
+					if (!Array.isArray(value)) {
+						value = []
+					}
+				}
+				dataList.forEach((item, index) => {
+					item.disabled = item.disable || item.disabled || false
+					if (this.multiple) {
+						if (value.length > 0) {
+							let have = value.find(val => val === item[this.map.value])
+							item.selected = have !== undefined
+						} else {
+							item.selected = false
+						}
+					} else {
+						item.selected = value === item[this.map.value]
+					}
+
+					list.push(item)
+				})
+				return this.setRange(list)
+			},
+			/**
+			 * 处理最大最小值
+			 * @param {Object} list
+			 */
+			setRange(list) {
+				let selectList = list.filter(item => item.selected)
+				let min = Number(this.min) || 0
+				let max = Number(this.max) || ''
+				list.forEach((item, index) => {
+					if (this.multiple) {
+						if (selectList.length <= min) {
+							let have = selectList.find(val => val[this.map.value] === item[this.map.value])
+							if (have !== undefined) {
+								item.disabled = true
+							}
+						}
+
+						if (selectList.length >= max && max !== '') {
+							let have = selectList.find(val => val[this.map.value] === item[this.map.value])
+							if (have === undefined) {
+								item.disabled = true
+							}
+						}
+					}
+					this.setStyles(item, index)
+					list[index] = item
+				})
+				return list
+			},
+			/**
+			 * 设置 class
+			 * @param {Object} item
+			 * @param {Object} index
+			 */
+			setStyles(item, index) {
+				//  设置自定义样式
+				item.styleBackgroud = this.setStyleBackgroud(item)
+				item.styleIcon = this.setStyleIcon(item)
+				item.styleIconText = this.setStyleIconText(item)
+				item.styleRightIcon = this.setStyleRightIcon(item)
+			},
+
+			/**
+			 * 获取选中值
+			 * @param {Object} range
+			 */
+			getSelectedValue(range) {
+				if (!this.multiple) return this.dataValue
+				let selectedArr = []
+				range.forEach((item) => {
+					if (item.selected) {
+						selectedArr.push(item[this.map.value])
+					}
+				})
+				return this.dataValue.length > 0 ? this.dataValue : selectedArr
+			},
+
+			/**
+			 * 设置背景样式
+			 */
+			setStyleBackgroud(item) {
+				let styles = {}
+				let selectedColor = this.selectedColor ? this.selectedColor : '#2979ff'
+				if (this.selectedColor) {
+					if (this.mode !== 'list') {
+						styles['border-color'] = item.selected ? selectedColor : '#DCDFE6'
+					}
+					if (this.mode === 'tag') {
+						styles['background-color'] = item.selected ? selectedColor : '#f5f5f5'
+					}
+				}
+				let classles = ''
+				for (let i in styles) {
+					classles += `${i}:${styles[i]};`
+				}
+				return classles
+			},
+			setStyleIcon(item) {
+				let styles = {}
+				let classles = ''
+				if (this.selectedColor) {
+					let selectedColor = this.selectedColor ? this.selectedColor : '#2979ff'
+					styles['background-color'] = item.selected ? selectedColor : '#fff'
+					styles['border-color'] = item.selected ? selectedColor : '#DCDFE6'
+
+					if (!item.selected && item.disabled) {
+						styles['background-color'] = '#F2F6FC'
+						styles['border-color'] = item.selected ? selectedColor : '#DCDFE6'
+					}
+				}
+				for (let i in styles) {
+					classles += `${i}:${styles[i]};`
+				}
+				return classles
+			},
+			setStyleIconText(item) {
+				let styles = {}
+				let classles = ''
+				if (this.selectedColor) {
+					let selectedColor = this.selectedColor ? this.selectedColor : '#2979ff'
+					if (this.mode === 'tag') {
+						styles.color = item.selected ? (this.selectedTextColor ? this.selectedTextColor : '#fff') : '#666'
+					} else {
+						styles.color = item.selected ? (this.selectedTextColor ? this.selectedTextColor : selectedColor) : '#666'
+					}
+					if (!item.selected && item.disabled) {
+						styles.color = '#999'
+					}
+				}
+				for (let i in styles) {
+					classles += `${i}:${styles[i]};`
+				}
+				return classles
+			},
+			setStyleRightIcon(item) {
+				let styles = {}
+				let classles = ''
+				if (this.mode === 'list') {
+					styles['border-color'] = item.selected ? this.styles.selectedColor : '#DCDFE6'
+				}
+				for (let i in styles) {
+					classles += `${i}:${styles[i]};`
+				}
+
+				return classles
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	$uni-primary: #2979ff !default;
+	$border-color: #DCDFE6;
+	$disable: 0.4;
+
+	@mixin flex {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+	}
+
+	.uni-data-loading {
+		@include flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		height: 36px;
+		padding-left: 10px;
+		color: #999;
+	}
+
+	.uni-data-checklist {
+		position: relative;
+		z-index: 0;
+		flex: 1;
+
+		// 多选样式
+		.checklist-group {
+			@include flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+
+			&.is-list {
+				flex-direction: column;
+			}
+
+			.checklist-box {
+				@include flex;
+				flex-direction: row;
+				align-items: center;
+				position: relative;
+				margin: 5px 0;
+				margin-right: 25px;
+
+				.hidden {
+					position: absolute;
+					opacity: 0;
+				}
+
+				// 文字样式
+				.checklist-content {
+					@include flex;
+					flex: 1;
+					flex-direction: row;
+					align-items: center;
+					justify-content: space-between;
+
+					.checklist-text {
+						font-size: 14px;
+						color: #666;
+						margin-left: 5px;
+						line-height: 14px;
+					}
+
+					.checkobx__list {
+						border-right-width: 1px;
+						border-right-color: #007aff;
+						border-right-style: solid;
+						border-bottom-width: 1px;
+						border-bottom-color: #007aff;
+						border-bottom-style: solid;
+						height: 12px;
+						width: 6px;
+						left: -5px;
+						transform-origin: center;
+						transform: rotate(45deg);
+						opacity: 0;
+					}
+				}
+
+				// 多选样式
+				.checkbox__inner {
+					/* #ifndef APP-NVUE */
+					flex-shrink: 0;
+					box-sizing: border-box;
+					/* #endif */
+					position: relative;
+					width: 16px;
+					height: 16px;
+					border: 1px solid $border-color;
+					border-radius: 4px;
+					background-color: #fff;
+					z-index: 1;
+
+					.checkbox__inner-icon {
+						position: absolute;
+						/* #ifdef APP-NVUE */
+						top: 2px;
+						/* #endif */
+						/* #ifndef APP-NVUE */
+						top: 1px;
+						/* #endif */
+						left: 5px;
+						height: 8px;
+						width: 4px;
+						border-right-width: 1px;
+						border-right-color: #fff;
+						border-right-style: solid;
+						border-bottom-width: 1px;
+						border-bottom-color: #fff;
+						border-bottom-style: solid;
+						opacity: 0;
+						transform-origin: center;
+						transform: rotate(40deg);
+					}
+				}
+
+				// 单选样式
+				.radio__inner {
+					@include flex;
+					/* #ifndef APP-NVUE */
+					flex-shrink: 0;
+					box-sizing: border-box;
+					/* #endif */
+					justify-content: center;
+					align-items: center;
+					position: relative;
+					width: 16px;
+					height: 16px;
+					border: 1px solid $border-color;
+					border-radius: 16px;
+					background-color: #fff;
+					z-index: 1;
+
+					.radio__inner-icon {
+						width: 8px;
+						height: 8px;
+						border-radius: 10px;
+						opacity: 0;
+					}
+				}
+
+				// 默认样式
+				&.is--default {
+
+					// 禁用
+					&.is-disable {
+						/* #ifdef H5 */
+						cursor: not-allowed;
+
+						/* #endif */
+						.checkbox__inner {
+							background-color: #F2F6FC;
+							border-color: $border-color;
+							/* #ifdef H5 */
+							cursor: not-allowed;
+							/* #endif */
+						}
+
+						.radio__inner {
+							background-color: #F2F6FC;
+							border-color: $border-color;
+						}
+
+						.checklist-text {
+							color: #999;
+						}
+					}
+
+					// 选中
+					&.is-checked {
+						.checkbox__inner {
+							border-color: $uni-primary;
+							background-color: $uni-primary;
+
+							.checkbox__inner-icon {
+								opacity: 1;
+								transform: rotate(45deg);
+							}
+						}
+
+						.radio__inner {
+							border-color: $uni-primary;
+
+							.radio__inner-icon {
+								opacity: 1;
+								background-color: $uni-primary;
+							}
+						}
+
+						.checklist-text {
+							color: $uni-primary;
+						}
+
+						// 选中禁用
+						&.is-disable {
+							.checkbox__inner {
+								opacity: $disable;
+							}
+
+							.checklist-text {
+								opacity: $disable;
+							}
+
+							.radio__inner {
+								opacity: $disable;
+							}
+						}
+					}
+				}
+
+				// 按钮样式
+				&.is--button {
+					margin-right: 10px;
+					padding: 5px 10px;
+					border: 1px $border-color solid;
+					border-radius: 3px;
+					transition: border-color 0.2s;
+
+					// 禁用
+					&.is-disable {
+						/* #ifdef H5 */
+						cursor: not-allowed;
+						/* #endif */
+						border: 1px #eee solid;
+						opacity: $disable;
+
+						.checkbox__inner {
+							background-color: #F2F6FC;
+							border-color: $border-color;
+							/* #ifdef H5 */
+							cursor: not-allowed;
+							/* #endif */
+						}
+
+						.radio__inner {
+							background-color: #F2F6FC;
+							border-color: $border-color;
+							/* #ifdef H5 */
+							cursor: not-allowed;
+							/* #endif */
+						}
+
+						.checklist-text {
+							color: #999;
+						}
+					}
+
+					&.is-checked {
+						border-color: $uni-primary;
+
+						.checkbox__inner {
+							border-color: $uni-primary;
+							background-color: $uni-primary;
+
+							.checkbox__inner-icon {
+								opacity: 1;
+								transform: rotate(45deg);
+							}
+						}
+
+						.radio__inner {
+							border-color: $uni-primary;
+
+							.radio__inner-icon {
+								opacity: 1;
+								background-color: $uni-primary;
+							}
+						}
+
+						.checklist-text {
+							color: $uni-primary;
+						}
+
+						// 选中禁用
+						&.is-disable {
+							opacity: $disable;
+						}
+					}
+				}
+
+				// 标签样式
+				&.is--tag {
+					margin-right: 10px;
+					padding: 5px 10px;
+					border: 1px $border-color solid;
+					border-radius: 3px;
+					background-color: #f5f5f5;
+
+					.checklist-text {
+						margin: 0;
+						color: #666;
+					}
+
+					// 禁用
+					&.is-disable {
+						/* #ifdef H5 */
+						cursor: not-allowed;
+						/* #endif */
+						opacity: $disable;
+					}
+
+					&.is-checked {
+						background-color: $uni-primary;
+						border-color: $uni-primary;
+
+						.checklist-text {
+							color: #fff;
+						}
+					}
+				}
+
+				// 列表样式
+				&.is--list {
+					/* #ifndef APP-NVUE */
+					display: flex;
+					/* #endif */
+					padding: 10px 15px;
+					padding-left: 0;
+					margin: 0;
+
+					&.is-list-border {
+						border-top: 1px #eee solid;
+					}
+
+					// 禁用
+					&.is-disable {
+						/* #ifdef H5 */
+						cursor: not-allowed;
+
+						/* #endif */
+						.checkbox__inner {
+							background-color: #F2F6FC;
+							border-color: $border-color;
+							/* #ifdef H5 */
+							cursor: not-allowed;
+							/* #endif */
+						}
+
+						.checklist-text {
+							color: #999;
+						}
+					}
+
+					&.is-checked {
+						.checkbox__inner {
+							border-color: $uni-primary;
+							background-color: $uni-primary;
+
+							.checkbox__inner-icon {
+								opacity: 1;
+								transform: rotate(45deg);
+							}
+						}
+
+						.radio__inner {
+							border-color: $uni-primary;
+							.radio__inner-icon {
+								opacity: 1;
+								background-color: $uni-primary;
+							}
+						}
+
+						.checklist-text {
+							color: $uni-primary;
+						}
+
+						.checklist-content {
+							.checkobx__list {
+								opacity: 1;
+								border-color: $uni-primary;
+							}
+						}
+
+						// 选中禁用
+						&.is-disable {
+							.checkbox__inner {
+								opacity: $disable;
+							}
+
+							.checklist-text {
+								opacity: $disable;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>
diff --git a/uni_modules/uni-data-checkbox/package.json b/uni_modules/uni-data-checkbox/package.json
new file mode 100644
index 0000000..fc15e8b
--- /dev/null
+++ b/uni_modules/uni-data-checkbox/package.json
@@ -0,0 +1,84 @@
+{
+  "id": "uni-data-checkbox",
+  "displayName": "uni-data-checkbox 数据选择器",
+  "version": "1.0.5",
+  "description": "通过数据驱动的单选框和复选框",
+  "keywords": [
+    "uni-ui",
+    "checkbox",
+    "单选",
+    "多选",
+    "单选多选"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": "^3.1.1"
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-load-more","uni-scss"],
+    "encrypt": [],
+    "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/uni_modules/uni-data-checkbox/readme.md b/uni_modules/uni-data-checkbox/readme.md
new file mode 100644
index 0000000..6eb253d
--- /dev/null
+++ b/uni_modules/uni-data-checkbox/readme.md
@@ -0,0 +1,18 @@
+
+
+## DataCheckbox 数据驱动的单选复选框
+> **组件名：uni-data-checkbox**
+> 代码块： `uDataCheckbox`
+
+
+本组件是基于uni-app基础组件checkbox的封装。本组件要解决问题包括：
+
+1. 数据绑定型组件：给本组件绑定一个data，会自动渲染一组候选内容。再以往，开发者需要编写不少代码实现类似功能
+2. 自动的表单校验：组件绑定了data，且符合[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)组件的表单校验规范，搭配使用会自动实现表单校验
+3. 本组件合并了单选多选
+4. 本组件有若干风格选择，如普通的单选多选框、并列button风格、tag风格。开发者可以快速选择需要的风格。但作为一个封装组件，样式代码虽然不用自己写了，却会牺牲一定的样式自定义性
+
+在uniCloud开发中，`DB Schema`中配置了enum枚举等类型后，在web控制台的[自动生成表单](https://uniapp.dcloud.io/uniCloud/schema?id=autocode)功能中，会自动生成``uni-data-checkbox``组件并绑定好data
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/uni_modules/uni-data-picker/changelog.md b/uni_modules/uni-data-picker/changelog.md
new file mode 100644
index 0000000..8aaad24
--- /dev/null
+++ b/uni_modules/uni-data-picker/changelog.md
@@ -0,0 +1,77 @@
+## 2.0.0（2023-12-14）
+- 新增 支持 uni-app-x
+## 1.1.2（2023-04-11）
+- 修复 更改 modelValue 报错的 bug
+- 修复 v-for 未使用 key 值控制台 warning
+## 1.1.1（2023-02-21）
+- 修复代码合并时引发 value 属性为空时不渲染数据的问题
+## 1.1.0（2023-02-15）
+- 修复 localdata 不支持动态更新的bug
+## 1.0.9（2023-02-15）
+- 修复 localdata 不支持动态更新的bug
+## 1.0.8（2022-09-16）
+- 可以使用 uni-scss 控制主题色
+## 1.0.7（2022-07-06）
+- 优化 pc端图标位置不正确的问题
+## 1.0.6（2022-07-05）
+- 优化 显示样式
+## 1.0.5（2022-07-04）
+- 修复 uni-data-picker 在 uni-forms-item 中宽度不正确的bug
+## 1.0.4（2022-04-19）
+- 修复 字节小程序 本地数据无法选择下一级的Bug
+## 1.0.3（2022-02-25）
+- 修复 nvue 不支持的 v-show 的 bug
+## 1.0.2（2022-02-25）
+- 修复 条件编译 nvue 不支持的 css 样式
+## 1.0.1（2021-11-23）
+- 修复 由上个版本引发的map、v-model等属性不生效的bug
+## 1.0.0（2021-11-19）
+- 优化 组件 UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-data-picker](https://uniapp.dcloud.io/component/uniui/uni-data-picker)
+## 0.4.9（2021-10-28）
+- 修复 VUE2 v-model 概率无效的 bug
+## 0.4.8（2021-10-27）
+- 修复 v-model 概率无效的 bug
+## 0.4.7（2021-10-25）
+- 新增 属性 spaceInfo 服务空间配置 HBuilderX 3.2.11+
+- 修复 树型 uniCloud 数据类型为 int 时报错的 bug
+## 0.4.6（2021-10-19）
+- 修复 非 VUE3 v-model 为 0 时无法选中的 bug
+## 0.4.5（2021-09-26）
+- 新增 清除已选项的功能（通过 clearIcon 属性配置是否显示按钮），同时提供 clear 方法以供调用，二者等效
+- 修复 readonly 为 true 时报错的 bug
+## 0.4.4（2021-09-26）
+- 修复 上一版本造成的 map 属性失效的 bug
+- 新增 ellipsis 属性，支持配置 tab 选项长度过长时是否自动省略
+## 0.4.3（2021-09-24）
+- 修复 某些情况下级联未触发的 bug
+## 0.4.2（2021-09-23）
+- 新增 提供 show 和 hide 方法，开发者可以通过 ref 调用
+- 新增 选项内容过长自动添加省略号
+## 0.4.1（2021-09-15）
+- 新增 map 属性 字段映射，将 text/value 映射到数据中的其他字段
+## 0.4.0（2021-07-13）
+- 组件兼容 vue3，如何创建 vue3 项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 0.3.5（2021-06-04）
+- 修复 无法加载云端数据的问题
+## 0.3.4（2021-05-28）
+- 修复 v-model 无效问题
+- 修复 loaddata 为空数据组时加载时间过长问题
+- 修复 上个版本引出的本地数据无法选择带有 children 的 2 级节点
+## 0.3.3（2021-05-12）
+- 新增 组件示例地址
+## 0.3.2（2021-04-22）
+- 修复 非树形数据有 where 属性查询报错的问题
+## 0.3.1（2021-04-15）
+- 修复 本地数据概率无法回显时问题
+## 0.3.0（2021-04-07）
+- 新增 支持云端非树形表结构数据
+- 修复 根节点 parent_field 字段等于 null 时选择界面错乱问题
+## 0.2.0（2021-03-15）
+- 修复 nodeclick、popupopened、popupclosed 事件无法触发的问题
+## 0.1.9（2021-03-09）
+- 修复 微信小程序某些情况下无法选择的问题
+## 0.1.8（2021-02-05）
+- 优化 部分样式在 nvue 上的兼容表现
+## 0.1.7（2021-02-05）
+- 调整为 uni_modules 目录规范
diff --git a/uni_modules/uni-data-picker/components/uni-data-picker/keypress.js b/uni_modules/uni-data-picker/components/uni-data-picker/keypress.js
new file mode 100644
index 0000000..6ef26a2
--- /dev/null
+++ b/uni_modules/uni-data-picker/components/uni-data-picker/keypress.js
@@ -0,0 +1,45 @@
+// #ifdef H5
+export default {
+  name: 'Keypress',
+  props: {
+    disable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    const keyNames = {
+      esc: ['Esc', 'Escape'],
+      tab: 'Tab',
+      enter: 'Enter',
+      space: [' ', 'Spacebar'],
+      up: ['Up', 'ArrowUp'],
+      left: ['Left', 'ArrowLeft'],
+      right: ['Right', 'ArrowRight'],
+      down: ['Down', 'ArrowDown'],
+      delete: ['Backspace', 'Delete', 'Del']
+    }
+    const listener = ($event) => {
+      if (this.disable) {
+        return
+      }
+      const keyName = Object.keys(keyNames).find(key => {
+        const keyName = $event.key
+        const value = keyNames[key]
+        return value === keyName || (Array.isArray(value) && value.includes(keyName))
+      })
+      if (keyName) {
+        // 避免和其他按键事件冲突
+        setTimeout(() => {
+          this.$emit(keyName, {})
+        }, 0)
+      }
+    }
+    document.addEventListener('keyup', listener)
+    this.$once('hook:beforeDestroy', () => {
+      document.removeEventListener('keyup', listener)
+    })
+  },
+	render: () => {}
+}
+// #endif
diff --git a/uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.uvue b/uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.uvue
new file mode 100644
index 0000000..82031e1
--- /dev/null
+++ b/uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.uvue
@@ -0,0 +1,380 @@
+<template>
+  <view class="uni-data-tree">
+    <view class="uni-data-tree-input" @click="handleInput">
+      <slot :data="selectedPaths" :error="error">
+        <view class="input-value" :class="{'input-value-border': border}">
+          <text v-if="error!=null" class="error-text">{{error!.errMsg}}</text>
+          <scroll-view v-if="selectedPaths.length" class="selected-path" scroll-x="true">
+            <view class="selected-list">
+              <template v-for="(item, index) in selectedPaths">
+                <text class="text-color">{{item[mappingTextName]}}</text>
+                <text v-if="index<selectedPaths.length-1" class="input-split-line">{{split}}</text>
+              </template>
+            </view>
+          </scroll-view>
+          <text v-else-if="error==null&&!loading" class="placeholder">{{placeholder}}</text>
+          <view v-if="!readonly" class="arrow-area">
+            <view class="input-arrow"></view>
+          </view>
+        </view>
+      </slot>
+      <view v-if="loading && !isOpened" class="selected-loading">
+        <slot name="picker-loading" :loading="loading"></slot>
+      </view>
+    </view>
+    <view class="uni-data-tree-cover" v-if="isOpened" @click="handleClose"></view>
+    <view class="uni-data-tree-dialog" v-if="isOpened">
+      <view class="uni-popper__arrow"></view>
+      <view class="dialog-caption">
+        <view class="dialog-title-view">
+          <text class="dialog-title">{{popupTitle}}</text>
+        </view>
+        <view class="dialog-close" @click="handleClose">
+          <view class="dialog-close-plus" data-id="close"></view>
+          <view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
+        </view>
+      </view>
+      <view ref="pickerView" class="uni-data-pickerview">
+        <view v-if="error!=null" class="error">
+          <text class="error-text">{{error!.errMsg}}</text>
+        </view>
+        <scroll-view v-if="!isCloudDataList" :scroll-x="true">
+          <view class="selected-node-list">
+            <template v-for="(item, index) in selectedNodes">
+              <text class="selected-node-item" :class="{'selected-node-item-active':index==selectedIndex}"
+                @click="onTabSelect(index)">
+                {{item[mappingTextName]}}
+              </text>
+            </template>
+          </view>
+        </scroll-view>
+        <list-view class="list-view" :scroll-y="true">
+          <list-item class="list-item" v-for="(item, _) in currentDataList" @click="onNodeClick(item)">
+            <text class="item-text" :class="{'item-text-disabled': item['disable']}">{{item[mappingTextName]}}</text>
+            <text class="check" v-if="item[mappingValueName] == selectedNodes[selectedIndex][mappingValueName]"></text>
+          </list-item>
+        </list-view>
+        <view class="loading-cover" v-if="loading">
+          <slot name="pickerview-loading" :loading="loading"></slot>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import { dataPicker } from "../uni-data-pickerview/uni-data-picker.uts"
+
+  /**
+   * DataPicker 级联选择
+   * @description 支持单列、和多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。
+   * @tutorial https://ext.dcloud.net.cn/plugin?id=3796
+   * @property {String} popup-title 弹出窗口标题
+   * @property {Array} localdata 本地数据，参考
+   * @property {Boolean} border = [true|false] 是否有边框
+   * @property {Boolean} readonly = [true|false] 是否仅读
+   * @property {Boolean} preload = [true|false] 是否预加载数据
+   * @value true 开启预加载数据，点击弹出窗口后显示已加载数据
+   * @value false 关闭预加载数据，点击弹出窗口后开始加载数据
+   * @property {Boolean} step-searh = [true|false] 是否分布查询
+   * @value true 启用分布查询，仅查询当前选中节点
+   * @value false 关闭分布查询，一次查询出所有数据
+   * @property {String|DBFieldString} self-field 分布查询当前字段名称
+   * @property {String|DBFieldString} parent-field 分布查询父字段名称
+   * @property {String|DBCollectionString} collection 表名
+   * @property {String|DBFieldString} field 查询字段，多个字段用 `,` 分割
+   * @property {String} orderby 排序字段及正序倒叙设置
+   * @property {String|JQLString} where 查询条件
+   * @event {Function} popupshow 弹出的选择窗口打开时触发此事件
+   * @event {Function} popuphide 弹出的选择窗口关闭时触发此事件
+   */
+  export default {
+    name: 'UniDataPicker',
+    emits: ['popupopened', 'popupclosed', 'nodeclick', 'change', 'input', 'update:modelValue', 'inputclick'],
+    mixins: [dataPicker],
+    props: {
+      popupTitle: {
+        type: String,
+        default: '请选择'
+      },
+      placeholder: {
+        type: String,
+        default: '请选择'
+      },
+      heightMobile: {
+        type: String,
+        default: ''
+      },
+      readonly: {
+        type: Boolean,
+        default: false
+      },
+      clearIcon: {
+        type: Boolean,
+        default: true
+      },
+      border: {
+        type: Boolean,
+        default: true
+      },
+      split: {
+        type: String,
+        default: '/'
+      },
+      ellipsis: {
+        type: Boolean,
+        default: true
+      }
+    },
+    data() {
+      return {
+        isOpened: false
+      }
+    },
+    computed: {
+      isShowClearIcon() : boolean {
+        if (this.readonly) {
+          return false
+        }
+
+        if (this.clearIcon && this.selectedPaths.length > 0) {
+          return true
+        }
+
+        return false
+      }
+    },
+    created() {
+      this.load()
+    },
+    methods: {
+      clear() {
+      },
+      load() {
+        if (this.isLocalData) {
+          this.loadLocalData()
+        } else if (this.isCloudDataList || this.isCloudDataTree) {
+          this.loadCloudDataPath()
+        }
+      },
+      show() {
+        this.isOpened = true
+        this.$emit('popupopened')
+        if (!this.hasCloudTreeData) {
+          this.loadData()
+        }
+      },
+      hide() {
+        this.isOpened = false
+        this.$emit('popupclosed')
+      },
+      handleInput() {
+        if (this.readonly) {
+          this.$emit('inputclick')
+        } else {
+          this.show()
+        }
+      },
+      handleClose() {
+        this.hide()
+      },
+      onFinish() {
+        this.selectedPaths = this.getChangeNodes()
+        this.$emit('change', this.selectedPaths)
+        this.hide()
+      }
+    }
+  }
+</script>
+
+<style>
+  @import url("../uni-data-pickerview/uni-data-pickerview.css");
+
+  .uni-data-tree {
+    position: relative;
+  }
+
+  .uni-data-tree-input {
+    position: relative;
+  }
+
+  .selected-loading {
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .error-text {
+    flex: 1;
+    font-size: 12px;
+    color: #DD524D;
+  }
+
+  .input-value {
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: nowrap;
+    padding: 5px 5px;
+    padding-right: 5px;
+    overflow: hidden;
+    min-height: 28px;
+  }
+
+  .input-value-border {
+    border: 1px solid #e5e5e5;
+    border-radius: 5px;
+  }
+
+  .selected-path {
+    flex: 1;
+    flex-direction: row;
+    overflow: hidden;
+  }
+
+  .load-more {
+    width: 40px;
+  }
+
+  .selected-list {
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
+
+  .selected-item {
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
+
+  .text-color {
+    font-size: 14px;
+    color: #333;
+  }
+
+  .placeholder {
+    color: grey;
+    font-size: 14px;
+  }
+
+  .input-split-line {
+    opacity: .5;
+    margin-left: 1px;
+    margin-right: 1px;
+  }
+
+  .arrow-area {
+    position: relative;
+    padding: 0 12px;
+    margin-left: auto;
+    justify-content: center;
+    transform: rotate(-45deg);
+    transform-origin: center;
+  }
+
+  .input-arrow {
+    width: 8px;
+    height: 8px;
+    border-left: 2px solid #999;
+    border-bottom: 2px solid #999;
+  }
+
+  .uni-data-tree-cover {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, .4);
+    flex-direction: column;
+    z-index: 100;
+  }
+
+  .uni-data-tree-dialog {
+    position: fixed;
+    left: 0;
+    top: 20%;
+    right: 0;
+    bottom: 0;
+    background-color: #FFFFFF;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    flex-direction: column;
+    z-index: 102;
+    overflow: hidden;
+  }
+
+  .dialog-caption {
+    position: relative;
+    flex-direction: row;
+  }
+
+  .dialog-title-view {
+    flex: 1;
+  }
+
+  .dialog-title {
+    align-self: center;
+    padding: 0 10px;
+    line-height: 44px;
+  }
+
+  .dialog-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    flex-direction: row;
+    align-items: center;
+    padding: 0 15px;
+  }
+
+  .dialog-close-plus {
+    width: 16px;
+    height: 2px;
+    background-color: #666;
+    border-radius: 2px;
+    transform: rotate(45deg);
+  }
+
+  .dialog-close-rotate {
+    position: absolute;
+    transform: rotate(-45deg);
+  }
+
+  .uni-data-pickerview {
+    flex: 1;
+  }
+
+  .icon-clear {
+    display: flex;
+    align-items: center;
+  }
+
+  /* #ifdef H5 */
+  @media all and (min-width: 768px) {
+    .uni-data-tree-cover {
+      background-color: transparent;
+    }
+
+    .uni-data-tree-dialog {
+      position: absolute;
+      top: 55px;
+      height: auto;
+      min-height: 400px;
+      max-height: 50vh;
+      background-color: #fff;
+      border: 1px solid #EBEEF5;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      border-radius: 4px;
+      overflow: unset;
+    }
+
+    .dialog-caption {
+      display: none;
+    }
+  }
+  /* #endif */
+</style>
diff --git a/uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue b/uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue
new file mode 100644
index 0000000..179a4e0
--- /dev/null
+++ b/uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue
@@ -0,0 +1,551 @@
+<template>
+  <view class="uni-data-tree">
+    <view class="uni-data-tree-input" @click="handleInput">
+      <slot :options="options" :data="inputSelected" :error="errorMessage">
+        <view class="input-value" :class="{'input-value-border': border}">
+          <text v-if="errorMessage" class="selected-area error-text">{{errorMessage}}</text>
+          <view v-else-if="loading && !isOpened" class="selected-area">
+            <uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more>
+          </view>
+          <scroll-view v-else-if="inputSelected.length" class="selected-area" scroll-x="true">
+            <view class="selected-list">
+              <view class="selected-item" v-for="(item,index) in inputSelected" :key="index">
+                <text class="text-color">{{item.text}}</text><text v-if="index<inputSelected.length-1"
+                  class="input-split-line">{{split}}</text>
+              </view>
+            </view>
+          </scroll-view>
+          <text v-else class="selected-area placeholder">{{placeholder}}</text>
+          <view v-if="clearIcon && !readonly && inputSelected.length" class="icon-clear" @click.stop="clear">
+            <uni-icons type="clear" color="#c0c4cc" size="24"></uni-icons>
+          </view>
+          <view class="arrow-area" v-if="(!clearIcon || !inputSelected.length) && !readonly ">
+            <view class="input-arrow"></view>
+          </view>
+        </view>
+      </slot>
+    </view>
+    <view class="uni-data-tree-cover" v-if="isOpened" @click="handleClose"></view>
+    <view class="uni-data-tree-dialog" v-if="isOpened">
+      <view class="uni-popper__arrow"></view>
+      <view class="dialog-caption">
+        <view class="title-area">
+          <text class="dialog-title">{{popupTitle}}</text>
+        </view>
+        <view class="dialog-close" @click="handleClose">
+          <view class="dialog-close-plus" data-id="close"></view>
+          <view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
+        </view>
+      </view>
+      <data-picker-view class="picker-view" ref="pickerView" v-model="dataValue" :localdata="localdata"
+        :preload="preload" :collection="collection" :field="field" :orderby="orderby" :where="where"
+        :step-searh="stepSearh" :self-field="selfField" :parent-field="parentField" :managed-mode="true" :map="map"
+        :ellipsis="ellipsis" @change="onchange" @datachange="ondatachange" @nodeclick="onnodeclick">
+      </data-picker-view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import dataPicker from "../uni-data-pickerview/uni-data-picker.js"
+  import DataPickerView from "../uni-data-pickerview/uni-data-pickerview.vue"
+
+  /**
+   * DataPicker 级联选择
+   * @description 支持单列、和多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。
+   * @tutorial https://ext.dcloud.net.cn/plugin?id=3796
+   * @property {String} popup-title 弹出窗口标题
+   * @property {Array} localdata 本地数据，参考
+   * @property {Boolean} border = [true|false] 是否有边框
+   * @property {Boolean} readonly = [true|false] 是否仅读
+   * @property {Boolean} preload = [true|false] 是否预加载数据
+   * @value true 开启预加载数据，点击弹出窗口后显示已加载数据
+   * @value false 关闭预加载数据，点击弹出窗口后开始加载数据
+   * @property {Boolean} step-searh = [true|false] 是否分布查询
+   * @value true 启用分布查询，仅查询当前选中节点
+   * @value false 关闭分布查询，一次查询出所有数据
+   * @property {String|DBFieldString} self-field 分布查询当前字段名称
+   * @property {String|DBFieldString} parent-field 分布查询父字段名称
+   * @property {String|DBCollectionString} collection 表名
+   * @property {String|DBFieldString} field 查询字段，多个字段用 `,` 分割
+   * @property {String} orderby 排序字段及正序倒叙设置
+   * @property {String|JQLString} where 查询条件
+   * @event {Function} popupshow 弹出的选择窗口打开时触发此事件
+   * @event {Function} popuphide 弹出的选择窗口关闭时触发此事件
+   */
+  export default {
+    name: 'UniDataPicker',
+    emits: ['popupopened', 'popupclosed', 'nodeclick', 'input', 'change', 'update:modelValue','inputclick'],
+    mixins: [dataPicker],
+    components: {
+      DataPickerView
+    },
+    props: {
+      options: {
+        type: [Object, Array],
+        default () {
+          return {}
+        }
+      },
+      popupTitle: {
+        type: String,
+        default: '请选择'
+      },
+      placeholder: {
+        type: String,
+        default: '请选择'
+      },
+      heightMobile: {
+        type: String,
+        default: ''
+      },
+      readonly: {
+        type: Boolean,
+        default: false
+      },
+      clearIcon: {
+        type: Boolean,
+        default: true
+      },
+      border: {
+        type: Boolean,
+        default: true
+      },
+      split: {
+        type: String,
+        default: '/'
+      },
+      ellipsis: {
+        type: Boolean,
+        default: true
+      }
+    },
+    data() {
+      return {
+        isOpened: false,
+        inputSelected: []
+      }
+    },
+    created() {
+      this.$nextTick(() => {
+        this.load();
+      })
+    },
+    watch: {
+			localdata: {
+				handler() {
+					this.load()
+				},
+        deep: true
+			},
+    },
+    methods: {
+      clear() {
+        this._dispatchEvent([]);
+      },
+      onPropsChange() {
+        this._treeData = [];
+        this.selectedIndex = 0;
+
+        this.load();
+      },
+      load() {
+        if (this.readonly) {
+          this._processReadonly(this.localdata, this.dataValue);
+          return;
+        }
+
+        // 回显本地数据
+        if (this.isLocalData) {
+          this.loadData();
+          this.inputSelected = this.selected.slice(0);
+        } else if (this.isCloudDataList || this.isCloudDataTree) { // 回显 Cloud 数据
+          this.loading = true;
+          this.getCloudDataValue().then((res) => {
+            this.loading = false;
+            this.inputSelected = res;
+          }).catch((err) => {
+            this.loading = false;
+            this.errorMessage = err;
+          })
+        }
+      },
+      show() {
+        this.isOpened = true
+        setTimeout(() => {
+          this.$refs.pickerView.updateData({
+            treeData: this._treeData,
+            selected: this.selected,
+            selectedIndex: this.selectedIndex
+          })
+        }, 200)
+        this.$emit('popupopened')
+      },
+      hide() {
+        this.isOpened = false
+        this.$emit('popupclosed')
+      },
+      handleInput() {
+        if (this.readonly) {
+					this.$emit('inputclick')
+          return
+        }
+        this.show()
+      },
+      handleClose(e) {
+        this.hide()
+      },
+      onnodeclick(e) {
+        this.$emit('nodeclick', e)
+      },
+      ondatachange(e) {
+        this._treeData = this.$refs.pickerView._treeData
+      },
+      onchange(e) {
+        this.hide()
+        this.$nextTick(() => {
+          this.inputSelected = e;
+        })
+        this._dispatchEvent(e)
+      },
+      _processReadonly(dataList, value) {
+        var isTree = dataList.findIndex((item) => {
+          return item.children
+        })
+        if (isTree > -1) {
+          let inputValue
+          if (Array.isArray(value)) {
+            inputValue = value[value.length - 1]
+            if (typeof inputValue === 'object' && inputValue.value) {
+              inputValue = inputValue.value
+            }
+          } else {
+            inputValue = value
+          }
+          this.inputSelected = this._findNodePath(inputValue, this.localdata)
+          return
+        }
+
+        if (!this.hasValue) {
+          this.inputSelected = []
+          return
+        }
+
+        let result = []
+        for (let i = 0; i < value.length; i++) {
+          var val = value[i]
+          var item = dataList.find((v) => {
+            return v.value == val
+          })
+          if (item) {
+            result.push(item)
+          }
+        }
+        if (result.length) {
+          this.inputSelected = result
+        }
+      },
+      _filterForArray(data, valueArray) {
+        var result = []
+        for (let i = 0; i < valueArray.length; i++) {
+          var value = valueArray[i]
+          var found = data.find((item) => {
+            return item.value == value
+          })
+          if (found) {
+            result.push(found)
+          }
+        }
+        return result
+      },
+      _dispatchEvent(selected) {
+        let item = {}
+        if (selected.length) {
+          var value = new Array(selected.length)
+          for (var i = 0; i < selected.length; i++) {
+            value[i] = selected[i].value
+          }
+          item = selected[selected.length - 1]
+        } else {
+          item.value = ''
+        }
+        if (this.formItem) {
+          this.formItem.setValue(item.value)
+        }
+
+        this.$emit('input', item.value)
+        this.$emit('update:modelValue', item.value)
+        this.$emit('change', {
+          detail: {
+            value: selected
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style>
+  .uni-data-tree {
+    flex: 1;
+    position: relative;
+    font-size: 14px;
+  }
+
+  .error-text {
+    color: #DD524D;
+  }
+
+  .input-value {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: nowrap;
+    font-size: 14px;
+    /* line-height: 35px; */
+    padding: 0 10px;
+    padding-right: 5px;
+    overflow: hidden;
+    height: 35px;
+    /* #ifndef APP-NVUE */
+    box-sizing: border-box;
+    /* #endif */
+  }
+
+  .input-value-border {
+    border: 1px solid #e5e5e5;
+    border-radius: 5px;
+  }
+
+  .selected-area {
+    flex: 1;
+    overflow: hidden;
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: row;
+  }
+
+  .load-more {
+    /* #ifndef APP-NVUE */
+    margin-right: auto;
+    /* #endif */
+    /* #ifdef APP-NVUE */
+    width: 40px;
+    /* #endif */
+  }
+
+  .selected-list {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: row;
+    flex-wrap: nowrap;
+    /* padding: 0 5px; */
+  }
+
+  .selected-item {
+    flex-direction: row;
+    /* padding: 0 1px; */
+    /* #ifndef APP-NVUE */
+    white-space: nowrap;
+    /* #endif */
+  }
+
+  .text-color {
+    color: #333;
+  }
+
+  .placeholder {
+    color: grey;
+    font-size: 12px;
+  }
+
+  .input-split-line {
+    opacity: .5;
+  }
+
+  .arrow-area {
+    position: relative;
+    width: 20px;
+    /* #ifndef APP-NVUE */
+    margin-bottom: 5px;
+    margin-left: auto;
+    display: flex;
+    /* #endif */
+    justify-content: center;
+    transform: rotate(-45deg);
+    transform-origin: center;
+  }
+
+  .input-arrow {
+    width: 7px;
+    height: 7px;
+    border-left: 1px solid #999;
+    border-bottom: 1px solid #999;
+  }
+
+  .uni-data-tree-cover {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, .4);
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: column;
+    z-index: 100;
+  }
+
+  .uni-data-tree-dialog {
+    position: fixed;
+    left: 0;
+    /* #ifndef APP-NVUE */
+    top: 20%;
+    /* #endif */
+    /* #ifdef APP-NVUE */
+    top: 200px;
+    /* #endif */
+    right: 0;
+    bottom: 0;
+    background-color: #FFFFFF;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: column;
+    z-index: 102;
+    overflow: hidden;
+    /* #ifdef APP-NVUE */
+    width: 750rpx;
+    /* #endif */
+  }
+
+  .dialog-caption {
+    position: relative;
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: row;
+    /* border-bottom: 1px solid #f0f0f0; */
+  }
+
+  .title-area {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    align-items: center;
+    /* #ifndef APP-NVUE */
+    margin: auto;
+    /* #endif */
+    padding: 0 10px;
+  }
+
+  .dialog-title {
+    /* font-weight: bold; */
+    line-height: 44px;
+  }
+
+  .dialog-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: row;
+    align-items: center;
+    padding: 0 15px;
+  }
+
+  .dialog-close-plus {
+    width: 16px;
+    height: 2px;
+    background-color: #666;
+    border-radius: 2px;
+    transform: rotate(45deg);
+  }
+
+  .dialog-close-rotate {
+    position: absolute;
+    transform: rotate(-45deg);
+  }
+
+  .picker-view {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .icon-clear {
+    display: flex;
+    align-items: center;
+  }
+
+  /* #ifdef H5 */
+  @media all and (min-width: 768px) {
+    .uni-data-tree-cover {
+      background-color: transparent;
+    }
+
+    .uni-data-tree-dialog {
+      position: absolute;
+      top: 55px;
+      height: auto;
+      min-height: 400px;
+      max-height: 50vh;
+      background-color: #fff;
+      border: 1px solid #EBEEF5;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      border-radius: 4px;
+      overflow: unset;
+    }
+
+    .dialog-caption {
+      display: none;
+    }
+
+    .icon-clear {
+      /* margin-right: 5px; */
+    }
+  }
+
+  /* #endif */
+
+  /* picker 弹出层通用的指示小三角, todo：扩展至上下左右方向定位 */
+  /* #ifndef APP-NVUE */
+  .uni-popper__arrow,
+  .uni-popper__arrow::after {
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    border-width: 6px;
+  }
+
+  .uni-popper__arrow {
+    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
+    top: -6px;
+    left: 10%;
+    margin-right: 3px;
+    border-top-width: 0;
+    border-bottom-color: #EBEEF5;
+  }
+
+  .uni-popper__arrow::after {
+    content: " ";
+    top: 1px;
+    margin-left: -6px;
+    border-top-width: 0;
+    border-bottom-color: #fff;
+  }
+
+  /* #endif */
+</style>
diff --git a/uni_modules/uni-data-picker/components/uni-data-pickerview/loading.uts b/uni_modules/uni-data-picker/components/uni-data-pickerview/loading.uts
new file mode 100644
index 0000000..baa0dff
--- /dev/null
+++ b/uni_modules/uni-data-picker/components/uni-data-pickerview/loading.uts
@@ -0,0 +1 @@
+export const imgbase : string = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzlBMzU3OTlEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzlBMzU3OUFEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDOUEzNTc5N0Q5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDOUEzNTc5OEQ5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt+ALSwAAA6CSURBVHja1FsLkFZV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'
\ No newline at end of file
diff --git a/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-picker.js b/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-picker.js
new file mode 100644
index 0000000..cfae22a
--- /dev/null
+++ b/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-picker.js
@@ -0,0 +1,622 @@
+export default {
+  props: {
+    localdata: {
+      type: [Array, Object],
+      default () {
+        return []
+      }
+    },
+    spaceInfo: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    collection: {
+      type: String,
+      default: ''
+    },
+    action: {
+      type: String,
+      default: ''
+    },
+    field: {
+      type: String,
+      default: ''
+    },
+    orderby: {
+      type: String,
+      default: ''
+    },
+    where: {
+      type: [String, Object],
+      default: ''
+    },
+    pageData: {
+      type: String,
+      default: 'add'
+    },
+    pageCurrent: {
+      type: Number,
+      default: 1
+    },
+    pageSize: {
+      type: Number,
+      default: 500
+    },
+    getcount: {
+      type: [Boolean, String],
+      default: false
+    },
+    getone: {
+      type: [Boolean, String],
+      default: false
+    },
+    gettree: {
+      type: [Boolean, String],
+      default: false
+    },
+    manual: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: [Array, String, Number],
+      default () {
+        return []
+      }
+    },
+    modelValue: {
+      type: [Array, String, Number],
+      default () {
+        return []
+      }
+    },
+    preload: {
+      type: Boolean,
+      default: false
+    },
+    stepSearh: {
+      type: Boolean,
+      default: true
+    },
+    selfField: {
+      type: String,
+      default: ''
+    },
+    parentField: {
+      type: String,
+      default: ''
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    map: {
+      type: Object,
+      default () {
+        return {
+          text: "text",
+          value: "value"
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      errorMessage: '',
+      loadMore: {
+        contentdown: '',
+        contentrefresh: '',
+        contentnomore: ''
+      },
+      dataList: [],
+      selected: [],
+      selectedIndex: 0,
+      page: {
+        current: this.pageCurrent,
+        size: this.pageSize,
+        count: 0
+      }
+    }
+  },
+  computed: {
+    isLocalData() {
+      return !this.collection.length;
+    },
+    isCloudData() {
+      return this.collection.length > 0;
+    },
+    isCloudDataList() {
+      return (this.isCloudData && (!this.parentField && !this.selfField));
+    },
+    isCloudDataTree() {
+      return (this.isCloudData && this.parentField && this.selfField);
+    },
+    dataValue() {
+      let isModelValue = Array.isArray(this.modelValue) ? (this.modelValue.length > 0) : (this.modelValue !== null ||
+        this.modelValue !== undefined);
+      return isModelValue ? this.modelValue : this.value;
+    },
+    hasValue() {
+      if (typeof this.dataValue === 'number') {
+        return true
+      }
+      return (this.dataValue != null) && (this.dataValue.length > 0)
+    }
+  },
+  created() {
+    this.$watch(() => {
+      var al = [];
+      ['pageCurrent',
+        'pageSize',
+        'spaceInfo',
+        'value',
+        'modelValue',
+        'localdata',
+        'collection',
+        'action',
+        'field',
+        'orderby',
+        'where',
+        'getont',
+        'getcount',
+        'gettree'
+      ].forEach(key => {
+        al.push(this[key])
+      });
+      return al
+    }, (newValue, oldValue) => {
+      let needReset = false
+      for (let i = 2; i < newValue.length; i++) {
+        if (newValue[i] != oldValue[i]) {
+          needReset = true
+          break
+        }
+      }
+      if (newValue[0] != oldValue[0]) {
+        this.page.current = this.pageCurrent
+      }
+      this.page.size = this.pageSize
+
+      this.onPropsChange()
+    })
+    this._treeData = []
+  },
+  methods: {
+    onPropsChange() {
+      this._treeData = [];
+    },
+
+    // 填充 pickview 数据
+    async loadData() {
+      if (this.isLocalData) {
+        this.loadLocalData();
+      } else if (this.isCloudDataList) {
+        this.loadCloudDataList();
+      } else if (this.isCloudDataTree) {
+        this.loadCloudDataTree();
+      }
+    },
+
+    // 加载本地数据
+    async loadLocalData() {
+      this._treeData = [];
+      this._extractTree(this.localdata, this._treeData);
+
+      let inputValue = this.dataValue;
+      if (inputValue === undefined) {
+        return;
+      }
+
+      if (Array.isArray(inputValue)) {
+        inputValue = inputValue[inputValue.length - 1];
+        if (typeof inputValue === 'object' && inputValue[this.map.value]) {
+          inputValue = inputValue[this.map.value];
+        }
+      }
+
+      this.selected = this._findNodePath(inputValue, this.localdata);
+    },
+
+    // 加载 Cloud 数据 (单列)
+    async loadCloudDataList() {
+      if (this.loading) {
+        return;
+      }
+      this.loading = true;
+
+      try {
+        let response = await this.getCommand();
+        let responseData = response.result.data;
+
+        this._treeData = responseData;
+
+        this._updateBindData();
+        this._updateSelected();
+
+        this.onDataChange();
+      } catch (e) {
+        this.errorMessage = e;
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    // 加载 Cloud 数据 (树形)
+    async loadCloudDataTree() {
+      if (this.loading) {
+        return;
+      }
+      this.loading = true;
+
+      try {
+        let commandOptions = {
+          field: this._cloudDataPostField(),
+          where: this._cloudDataTreeWhere()
+        };
+        if (this.gettree) {
+          commandOptions.startwith = `${this.selfField}=='${this.dataValue}'`;
+        }
+
+        let response = await this.getCommand(commandOptions);
+        let responseData = response.result.data;
+
+        this._treeData = responseData;
+        this._updateBindData();
+        this._updateSelected();
+
+        this.onDataChange();
+      } catch (e) {
+        this.errorMessage = e;
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    // 加载 Cloud 数据 (节点)
+    async loadCloudDataNode(callback) {
+      if (this.loading) {
+        return;
+      }
+      this.loading = true;
+
+      try {
+        let commandOptions = {
+          field: this._cloudDataPostField(),
+          where: this._cloudDataNodeWhere()
+        };
+
+        let response = await this.getCommand(commandOptions);
+        let responseData = response.result.data;
+
+        callback(responseData);
+      } catch (e) {
+        this.errorMessage = e;
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    // 回显 Cloud 数据
+    getCloudDataValue() {
+      if (this.isCloudDataList) {
+        return this.getCloudDataListValue();
+      }
+
+      if (this.isCloudDataTree) {
+        return this.getCloudDataTreeValue();
+      }
+    },
+
+    // 回显 Cloud 数据 (单列)
+    getCloudDataListValue() {
+      // 根据 field's as value标识匹配 where 条件
+      let where = [];
+      let whereField = this._getForeignKeyByField();
+      if (whereField) {
+        where.push(`${whereField} == '${this.dataValue}'`)
+      }
+
+      where = where.join(' || ');
+
+      if (this.where) {
+        where = `(${this.where}) && (${where})`
+      }
+
+      return this.getCommand({
+        field: this._cloudDataPostField(),
+        where
+      }).then((res) => {
+        this.selected = res.result.data;
+        return res.result.data;
+      });
+    },
+
+    // 回显 Cloud 数据 (树形)
+    getCloudDataTreeValue() {
+      return this.getCommand({
+        field: this._cloudDataPostField(),
+        getTreePath: {
+          startWith: `${this.selfField}=='${this.dataValue}'`
+        }
+      }).then((res) => {
+        let treePath = [];
+        this._extractTreePath(res.result.data, treePath);
+        this.selected = treePath;
+        return treePath;
+      });
+    },
+
+    getCommand(options = {}) {
+      /* eslint-disable no-undef */
+      let db = uniCloud.database(this.spaceInfo)
+
+      const action = options.action || this.action
+      if (action) {
+        db = db.action(action)
+      }
+
+      const collection = options.collection || this.collection
+      db = db.collection(collection)
+
+      const where = options.where || this.where
+      if (!(!where || !Object.keys(where).length)) {
+        db = db.where(where)
+      }
+
+      const field = options.field || this.field
+      if (field) {
+        db = db.field(field)
+      }
+
+      const orderby = options.orderby || this.orderby
+      if (orderby) {
+        db = db.orderBy(orderby)
+      }
+
+      const current = options.pageCurrent !== undefined ? options.pageCurrent : this.page.current
+      const size = options.pageSize !== undefined ? options.pageSize : this.page.size
+      const getCount = options.getcount !== undefined ? options.getcount : this.getcount
+      const getTree = options.gettree !== undefined ? options.gettree : this.gettree
+
+      const getOptions = {
+        getCount,
+        getTree
+      }
+      if (options.getTreePath) {
+        getOptions.getTreePath = options.getTreePath
+      }
+
+      db = db.skip(size * (current - 1)).limit(size).get(getOptions)
+
+      return db
+    },
+
+    _cloudDataPostField() {
+      let fields = [this.field];
+      if (this.parentField) {
+        fields.push(`${this.parentField} as parent_value`);
+      }
+      return fields.join(',');
+    },
+
+    _cloudDataTreeWhere() {
+      let result = []
+      let selected = this.selected
+      let parentField = this.parentField
+      if (parentField) {
+        result.push(`${parentField} == null || ${parentField} == ""`)
+      }
+      if (selected.length) {
+        for (var i = 0; i < selected.length - 1; i++) {
+          result.push(`${parentField} == '${selected[i].value}'`)
+        }
+      }
+
+      let where = []
+      if (this.where) {
+        where.push(`(${this.where})`)
+      }
+
+      if (result.length) {
+        where.push(`(${result.join(' || ')})`)
+      }
+
+      return where.join(' && ')
+    },
+
+    _cloudDataNodeWhere() {
+      let where = []
+      let selected = this.selected;
+      if (selected.length) {
+        where.push(`${this.parentField} == '${selected[selected.length - 1].value}'`);
+      }
+
+      where = where.join(' || ');
+
+      if (this.where) {
+        return `(${this.where}) && (${where})`
+      }
+
+      return where
+    },
+
+    _getWhereByForeignKey() {
+      let result = []
+      let whereField = this._getForeignKeyByField();
+      if (whereField) {
+        result.push(`${whereField} == '${this.dataValue}'`)
+      }
+
+      if (this.where) {
+        return `(${this.where}) && (${result.join(' || ')})`
+      }
+
+      return result.join(' || ')
+    },
+
+    _getForeignKeyByField() {
+      let fields = this.field.split(',');
+      let whereField = null;
+      for (let i = 0; i < fields.length; i++) {
+        const items = fields[i].split('as');
+        if (items.length < 2) {
+          continue;
+        }
+        if (items[1].trim() === 'value') {
+          whereField = items[0].trim();
+          break;
+        }
+      }
+      return whereField;
+    },
+
+    _updateBindData(node) {
+      const {
+        dataList,
+        hasNodes
+      } = this._filterData(this._treeData, this.selected)
+
+      let isleaf = this._stepSearh === false && !hasNodes
+
+      if (node) {
+        node.isleaf = isleaf
+      }
+
+      this.dataList = dataList
+      this.selectedIndex = dataList.length - 1
+
+      if (!isleaf && this.selected.length < dataList.length) {
+        this.selected.push({
+          value: null,
+          text: "请选择"
+        })
+      }
+
+      return {
+        isleaf,
+        hasNodes
+      }
+    },
+
+    _updateSelected() {
+      let dl = this.dataList
+      let sl = this.selected
+      let textField = this.map.text
+      let valueField = this.map.value
+      for (let i = 0; i < sl.length; i++) {
+        let value = sl[i].value
+        let dl2 = dl[i]
+        for (let j = 0; j < dl2.length; j++) {
+          let item2 = dl2[j]
+          if (item2[valueField] === value) {
+            sl[i].text = item2[textField]
+            break
+          }
+        }
+      }
+    },
+
+    _filterData(data, paths) {
+      let dataList = []
+      let hasNodes = true
+
+      dataList.push(data.filter((item) => {
+        return (item.parent_value === null || item.parent_value === undefined || item.parent_value === '')
+      }))
+      for (let i = 0; i < paths.length; i++) {
+        let value = paths[i].value
+        let nodes = data.filter((item) => {
+          return item.parent_value === value
+        })
+
+        if (nodes.length) {
+          dataList.push(nodes)
+        } else {
+          hasNodes = false
+        }
+      }
+
+      return {
+        dataList,
+        hasNodes
+      }
+    },
+
+    _extractTree(nodes, result, parent_value) {
+      let list = result || []
+      let valueField = this.map.value
+      for (let i = 0; i < nodes.length; i++) {
+        let node = nodes[i]
+
+        let child = {}
+        for (let key in node) {
+          if (key !== 'children') {
+            child[key] = node[key]
+          }
+        }
+        if (parent_value !== null && parent_value !== undefined && parent_value !== '') {
+          child.parent_value = parent_value
+        }
+        result.push(child)
+
+        let children = node.children
+        if (children) {
+          this._extractTree(children, result, node[valueField])
+        }
+      }
+    },
+
+    _extractTreePath(nodes, result) {
+      let list = result || []
+      for (let i = 0; i < nodes.length; i++) {
+        let node = nodes[i]
+
+        let child = {}
+        for (let key in node) {
+          if (key !== 'children') {
+            child[key] = node[key]
+          }
+        }
+        result.push(child)
+
+        let children = node.children
+        if (children) {
+          this._extractTreePath(children, result)
+        }
+      }
+    },
+
+    _findNodePath(key, nodes, path = []) {
+      let textField = this.map.text
+      let valueField = this.map.value
+      for (let i = 0; i < nodes.length; i++) {
+        let node = nodes[i]
+        let children = node.children
+        let text = node[textField]
+        let value = node[valueField]
+
+        path.push({
+          value,
+          text
+        })
+
+        if (value === key) {
+          return path
+        }
+
+        if (children) {
+          const p = this._findNodePath(key, children, path)
+          if (p.length) {
+            return p
+          }
+        }
+
+        path.pop()
+      }
+      return []
+    }
+  }
+}
diff --git a/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-picker.uts b/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-picker.uts
new file mode 100644
index 0000000..372795d
--- /dev/null
+++ b/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-picker.uts
@@ -0,0 +1,693 @@
+export type PaginationType = {
+  current : number,
+  size : number,
+  count : number
+}
+
+export type LoadMoreType = {
+  contentdown : string,
+  contentrefresh : string,
+  contentnomore : string
+}
+
+export type SelectedItemType = {
+  name : string,
+  value : string,
+}
+
+export type GetCommandOptions = {
+  collection ?: UTSJSONObject,
+  field ?: string,
+  orderby ?: string,
+  where ?: any,
+  pageData ?: string,
+  pageCurrent ?: number,
+  pageSize ?: number,
+  getCount ?: boolean,
+  getTree ?: any,
+  getTreePath ?: UTSJSONObject,
+  startwith ?: string,
+  limitlevel ?: number,
+  groupby ?: string,
+  groupField ?: string,
+  distinct ?: boolean,
+  pageIndistinct ?: boolean,
+  foreignKey ?: string,
+  loadtime ?: string,
+  manual ?: boolean
+}
+
+const DefaultSelectedNode = {
+  text: '请选择',
+  value: ''
+}
+
+export const dataPicker = defineMixin({
+  props: {
+    localdata: {
+      type: Array as PropType<Array<UTSJSONObject>>,
+      default: [] as Array<UTSJSONObject>
+    },
+    collection: {
+      type: Object,
+      default: ''
+    },
+    field: {
+      type: String,
+      default: ''
+    },
+    orderby: {
+      type: String,
+      default: ''
+    },
+    where: {
+      type: Object,
+      default: ''
+    },
+    pageData: {
+      type: String,
+      default: 'add'
+    },
+    pageCurrent: {
+      type: Number,
+      default: 1
+    },
+    pageSize: {
+      type: Number,
+      default: 20
+    },
+    getcount: {
+      type: Boolean,
+      default: false
+    },
+    gettree: {
+      type: Object,
+      default: ''
+    },
+    gettreepath: {
+      type: Object,
+      default: ''
+    },
+    startwith: {
+      type: String,
+      default: ''
+    },
+    limitlevel: {
+      type: Number,
+      default: 10
+    },
+    groupby: {
+      type: String,
+      default: ''
+    },
+    groupField: {
+      type: String,
+      default: ''
+    },
+    distinct: {
+      type: Boolean,
+      default: false
+    },
+    pageIndistinct: {
+      type: Boolean,
+      default: false
+    },
+    foreignKey: {
+      type: String,
+      default: ''
+    },
+    loadtime: {
+      type: String,
+      default: 'auto'
+    },
+    manual: {
+      type: Boolean,
+      default: false
+    },
+    preload: {
+      type: Boolean,
+      default: false
+    },
+    stepSearh: {
+      type: Boolean,
+      default: true
+    },
+    selfField: {
+      type: String,
+      default: ''
+    },
+    parentField: {
+      type: String,
+      default: ''
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: Object,
+      default: ''
+    },
+    modelValue: {
+      type: Object,
+      default: ''
+    },
+    defaultProps: {
+      type: Object as PropType<UTSJSONObject>,
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      error: null as UniCloudError | null,
+      treeData: [] as Array<UTSJSONObject>,
+      selectedIndex: 0,
+      selectedNodes: [] as Array<UTSJSONObject>,
+      selectedPages: [] as Array<UTSJSONObject>[],
+      selectedValue: '',
+      selectedPaths: [] as Array<UTSJSONObject>,
+      pagination: {
+        current: 1,
+        size: 20,
+        count: 0
+      } as PaginationType
+    }
+  },
+  computed: {
+    mappingTextName() : string {
+      // TODO
+      return (this.defaultProps != null) ? this.defaultProps!.getString('text', 'text') : 'text'
+    },
+    mappingValueName() : string {
+      // TODO
+      return (this.defaultProps != null) ? this.defaultProps!.getString('value', 'value') : 'value'
+    },
+    currentDataList() : Array<UTSJSONObject> {
+      if (this.selectedIndex > this.selectedPages.length - 1) {
+        return [] as Array<UTSJSONObject>
+      }
+      return this.selectedPages[this.selectedIndex]
+    },
+    isLocalData() : boolean {
+      return this.localdata.length > 0
+    },
+    isCloudData() : boolean {
+      return this._checkIsNotNull(this.collection)
+    },
+    isCloudDataList() : boolean {
+      return (this.isCloudData && (this.parentField.length == 0 && this.selfField.length == 0))
+    },
+    isCloudDataTree() : boolean {
+      return (this.isCloudData && this.parentField.length > 0 && this.selfField.length > 0)
+    },
+    dataValue() : any {
+      return this.hasModelValue ? this.modelValue : this.value
+    },
+    hasCloudTreeData() : boolean {
+      return this.treeData.length > 0
+    },
+    hasModelValue() : boolean {
+      if (typeof this.modelValue == 'string') {
+        const valueString = this.modelValue as string
+        return (valueString.length > 0)
+      } else if (Array.isArray(this.modelValue)) {
+        const valueArray = this.modelValue as Array<string>
+        return (valueArray.length > 0)
+      }
+      return false
+    },
+    hasCloudDataValue() : boolean {
+      if (typeof this.dataValue == 'string') {
+        const valueString = this.dataValue as string
+        return (valueString.length > 0)
+      }
+      return false
+    }
+  },
+  created() {
+    this.pagination.current = this.pageCurrent
+    this.pagination.size = this.pageSize
+
+    this.$watch(
+      () : any => [
+        this.pageCurrent,
+        this.pageSize,
+        this.localdata,
+        this.value,
+        this.collection,
+        this.field,
+        this.getcount,
+        this.orderby,
+        this.where,
+        this.groupby,
+        this.groupField,
+        this.distinct
+      ],
+      (newValue : Array<any>, oldValue : Array<any>) => {
+        this.pagination.size = this.pageSize
+        if (newValue[0] !== oldValue[0]) {
+          this.pagination.current = this.pageCurrent
+        }
+
+        this.onPropsChange()
+      }
+    )
+  },
+  methods: {
+    onPropsChange() {
+      this.selectedIndex = 0
+      this.treeData.length = 0
+      this.selectedNodes.length = 0
+      this.selectedPages.length = 0
+      this.selectedPaths.length = 0
+
+      // 加载数据
+      this.$nextTick(() => {
+        this.loadData()
+      })
+    },
+
+    onTabSelect(index : number) {
+      this.selectedIndex = index
+    },
+
+    onNodeClick(nodeData : UTSJSONObject) {
+      if (nodeData.getBoolean('disable', false)) {
+        return
+      }
+
+      const isLeaf = this._checkIsLeafNode(nodeData)
+
+      this._trimSelectedNodes(nodeData)
+
+      this.$emit('nodeclick', nodeData)
+
+      if (this.isLocalData) {
+        if (isLeaf || !this._checkHasChildren(nodeData)) {
+          this.onFinish()
+        }
+      } else if (this.isCloudDataList) {
+        this.onFinish()
+      } else if (this.isCloudDataTree) {
+        if (isLeaf) {
+          this.onFinish()
+        } else if (!this._checkHasChildren(nodeData)) {
+          // 尝试请求一次，如果没有返回数据标记为叶子节点
+          this.loadCloudDataNode(nodeData)
+        }
+      }
+    },
+
+    getChangeNodes(): Array<UTSJSONObject> {
+      const nodes: Array<UTSJSONObject> = []
+      this.selectedNodes.forEach((node : UTSJSONObject) => {
+        const newNode: UTSJSONObject = {}
+        newNode[this.mappingTextName] = node.getString(this.mappingTextName)
+        newNode[this.mappingValueName] = node.getString(this.mappingValueName)
+        nodes.push(newNode)
+      })
+      return nodes
+    },
+
+    onFinish() { },
+
+    // 加载数据(自动判定环境)
+    loadData() {
+      if (this.isLocalData) {
+        this.loadLocalData()
+      } else if (this.isCloudDataList) {
+        this.loadCloudDataList()
+      } else if (this.isCloudDataTree) {
+        this.loadCloudDataTree()
+      }
+    },
+
+    // 加载本地数据
+    loadLocalData() {
+      this.treeData = this.localdata
+      if (Array.isArray(this.dataValue)) {
+        const value = this.dataValue as Array<UTSJSONObject>
+        this.selectedPaths = value.slice(0)
+        this._pushSelectedTreeNodes(value, this.localdata)
+      } else {
+        this._pushSelectedNodes(this.localdata)
+      }
+    },
+
+    // 加载 Cloud 数据 (单列)
+    loadCloudDataList() {
+      this._loadCloudData(null, (data : Array<UTSJSONObject>) => {
+        this.treeData = data
+        this._pushSelectedNodes(data)
+      })
+    },
+
+    // 加载 Cloud 数据 (树形)
+    loadCloudDataTree() {
+      let commandOptions = {
+        field: this._cloudDataPostField(),
+        where: this._cloudDataTreeWhere(),
+        getTree: true
+      } as GetCommandOptions
+      if (this._checkIsNotNull(this.gettree)) {
+        commandOptions.startwith = `${this.selfField}=='${this.dataValue as string}'`
+      }
+      this._loadCloudData(commandOptions, (data : Array<UTSJSONObject>) => {
+        this.treeData = data
+        if (this.selectedPaths.length > 0) {
+          this._pushSelectedTreeNodes(this.selectedPaths, data)
+        } else {
+          this._pushSelectedNodes(data)
+        }
+      })
+    },
+
+    // 加载 Cloud 数据 (节点)
+    loadCloudDataNode(nodeData : UTSJSONObject) {
+      const commandOptions = {
+        field: this._cloudDataPostField(),
+        where: this._cloudDataNodeWhere()
+      } as GetCommandOptions
+      this._loadCloudData(commandOptions, (data : Array<UTSJSONObject>) => {
+        nodeData['children'] = data
+        if (data.length == 0) {
+          nodeData['isleaf'] = true
+          this.onFinish()
+        } else {
+          this._pushSelectedNodes(data)
+        }
+      })
+    },
+
+    // 回显 Cloud Tree Path
+    loadCloudDataPath() {
+      if (!this.hasCloudDataValue) {
+        return
+      }
+
+      const command : GetCommandOptions = {}
+
+      // 单列
+      if (this.isCloudDataList) {
+        // 根据 field's as value标识匹配 where 条件
+        let where : Array<string> = [];
+        let whereField = this._getForeignKeyByField();
+        if (whereField.length > 0) {
+          where.push(`${whereField} == '${this.dataValue as string}'`)
+        }
+
+        let whereString = where.join(' || ')
+        if (this._checkIsNotNull(this.where)) {
+          whereString = `(${this.where}) && (${whereString})`
+        }
+
+        command.field = this._cloudDataPostField()
+        command.where = whereString
+      }
+
+      // 树形
+      if (this.isCloudDataTree) {
+        command.field = this._cloudDataPostField()
+        command.getTreePath = {
+          startWith: `${this.selfField}=='${this.dataValue as string}'`
+        }
+      }
+
+      this._loadCloudData(command, (data : Array<UTSJSONObject>) => {
+        this._extractTreePath(data, this.selectedPaths)
+      })
+    },
+
+    _loadCloudData(options ?: GetCommandOptions, callback ?: ((data : Array<UTSJSONObject>) => void)) {
+      if (this.loading) {
+        return
+      }
+      this.loading = true
+
+      this.error = null
+
+      this._getCommand(options).then((response : UniCloudDBGetResult) => {
+        callback?.(response.data)
+      }).catch((err : any | null) => {
+        this.error = err as UniCloudError
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+
+    _cloudDataPostField() : string {
+      let fields = [this.field];
+      if (this.parentField.length > 0) {
+        fields.push(`${this.parentField} as parent_value`)
+      }
+      return fields.join(',')
+    },
+
+    _cloudDataTreeWhere() : string {
+      let result : Array<string> = []
+      let selectedNodes = this.selectedNodes.length > 0 ? this.selectedNodes : this.selectedPaths
+      let parentField = this.parentField
+      if (parentField.length > 0) {
+        result.push(`${parentField} == null || ${parentField} == ""`)
+      }
+      if (selectedNodes.length > 0) {
+        for (var i = 0; i < selectedNodes.length - 1; i++) {
+          const parentFieldValue = selectedNodes[i].getString('value', '')
+          result.push(`${parentField} == '${parentFieldValue}'`)
+        }
+      }
+
+      let where : Array<string> = []
+      if (this._checkIsNotNull(this.where)) {
+        where.push(`(${this.where as string})`)
+      }
+
+      if (result.length > 0) {
+        where.push(`(${result.join(' || ')})`)
+      }
+
+      return where.join(' && ')
+    },
+
+    _cloudDataNodeWhere() : string {
+      const where : Array<string> = []
+      if (this.selectedNodes.length > 0) {
+        const value = this.selectedNodes[this.selectedNodes.length - 1].getString('value', '')
+        where.push(`${this.parentField} == '${value}'`)
+      }
+
+      let whereString = where.join(' || ')
+      if (this._checkIsNotNull(this.where)) {
+        return `(${this.where as string}) && (${whereString})`
+      }
+
+      return whereString
+    },
+
+    _getWhereByForeignKey() : string {
+      let result : Array<string> = []
+      let whereField = this._getForeignKeyByField();
+      if (whereField.length > 0) {
+        result.push(`${whereField} == '${this.dataValue as string}'`)
+      }
+
+      if (this._checkIsNotNull(this.where)) {
+        return `(${this.where}) && (${result.join(' || ')})`
+      }
+
+      return result.join(' || ')
+    },
+
+    _getForeignKeyByField() : string {
+      const fields = this.field.split(',')
+      let whereField = ''
+      for (let i = 0; i < fields.length; i++) {
+        const items = fields[i].split('as')
+        if (items.length < 2) {
+          continue
+        }
+        if (items[1].trim() === 'value') {
+          whereField = items[0].trim()
+          break
+        }
+      }
+      return whereField
+    },
+
+    _getCommand(options ?: GetCommandOptions) : Promise<UniCloudDBGetResult> {
+      let db = uniCloud.databaseForJQL()
+
+      let collection = Array.isArray(this.collection) ? db.collection(...(this.collection as Array<any>)) : db.collection(this.collection)
+
+      let filter : UniCloudDBFilter | null = null
+      if (this.foreignKey.length > 0) {
+        filter = collection.foreignKey(this.foreignKey)
+      }
+
+      const where : any = options?.where ?? this.where
+      if (typeof where == 'string') {
+        const whereString = where as string
+        if (whereString.length > 0) {
+          filter = (filter != null) ? filter.where(where) : collection.where(where)
+        }
+      } else {
+        filter = (filter != null) ? filter.where(where) : collection.where(where)
+      }
+
+      let query : UniCloudDBQuery | null = null
+      if (this.field.length > 0) {
+        query = (filter != null) ? filter.field(this.field) : collection.field(this.field)
+      }
+      if (this.groupby.length > 0) {
+        if (query != null) {
+          query = query.groupBy(this.groupby)
+        } else if (filter != null) {
+          query = filter.groupBy(this.groupby)
+        }
+      }
+      if (this.groupField.length > 0) {
+        if (query != null) {
+          query = query.groupField(this.groupField)
+        } else if (filter != null) {
+          query = filter.groupField(this.groupField)
+        }
+      }
+      if (this.distinct == true) {
+        if (query != null) {
+          query = query.distinct(this.field)
+        } else if (filter != null) {
+          query = filter.distinct(this.field)
+        }
+      }
+      if (this.orderby.length > 0) {
+        if (query != null) {
+          query = query.orderBy(this.orderby)
+        } else if (filter != null) {
+          query = filter.orderBy(this.orderby)
+        }
+      }
+
+      const size = this.pagination.size
+      const current = this.pagination.current
+      if (query != null) {
+        query = query.skip(size * (current - 1)).limit(size)
+      } else if (filter != null) {
+        query = filter.skip(size * (current - 1)).limit(size)
+      } else {
+        query = collection.skip(size * (current - 1)).limit(size)
+      }
+
+      const getOptions = {}
+      const treeOptions = {
+        limitLevel: this.limitlevel,
+        startWith: this.startwith
+      }
+      if (this.getcount == true) {
+        getOptions['getCount'] = this.getcount
+      }
+
+      const getTree : any = options?.getTree ?? this.gettree
+      if (typeof getTree == 'string') {
+        const getTreeString = getTree as string
+        if (getTreeString.length > 0) {
+          getOptions['getTree'] = treeOptions
+        }
+      } else if (typeof getTree == 'object') {
+        getOptions['getTree'] = treeOptions
+      } else {
+        getOptions['getTree'] = getTree
+      }
+
+      const getTreePath = options?.getTreePath ?? this.gettreepath
+      if (typeof getTreePath == 'string') {
+        const getTreePathString = getTreePath as string
+        if (getTreePathString.length > 0) {
+          getOptions['getTreePath'] = getTreePath
+        }
+      } else {
+        getOptions['getTreePath'] = getTreePath
+      }
+
+      return query.get(getOptions)
+    },
+
+    _checkIsNotNull(value : any) : boolean {
+      if (typeof value == 'string') {
+        const valueString = value as string
+        return (valueString.length > 0)
+      } else if (value instanceof UTSJSONObject) {
+        return true
+      }
+      return false
+    },
+
+    _checkIsLeafNode(nodeData : UTSJSONObject) : boolean {
+      if (this.selectedIndex >= this.limitlevel) {
+        return true
+      }
+
+      if (nodeData.getBoolean('isleaf', false)) {
+        return true
+      }
+
+      return false
+    },
+
+    _checkHasChildren(nodeData : UTSJSONObject) : boolean {
+      const children = nodeData.getArray('children') ?? ([] as Array<any>)
+      return children.length > 0
+    },
+
+    _pushSelectedNodes(nodes : Array<UTSJSONObject>) {
+      this.selectedNodes.push(DefaultSelectedNode)
+      this.selectedPages.push(nodes)
+      this.selectedIndex = this.selectedPages.length - 1
+    },
+
+    _trimSelectedNodes(nodeData : UTSJSONObject) {
+      this.selectedNodes.splice(this.selectedIndex)
+      this.selectedNodes.push(nodeData)
+
+      if (this.selectedPages.length > 0) {
+        this.selectedPages.splice(this.selectedIndex + 1)
+      }
+
+      const children = nodeData.getArray<UTSJSONObject>('children') ?? ([] as Array<UTSJSONObject>)
+      if (children.length > 0) {
+        this.selectedNodes.push(DefaultSelectedNode)
+        this.selectedPages.push(children)
+      }
+
+      this.selectedIndex = this.selectedPages.length - 1
+    },
+
+    _pushSelectedTreeNodes(paths : Array<UTSJSONObject>, nodes : Array<UTSJSONObject>) {
+      let children : Array<UTSJSONObject> = nodes
+      paths.forEach((node : UTSJSONObject) => {
+        const findNode = children.find((item : UTSJSONObject) : boolean => {
+          return (item.getString(this.mappingValueName) == node.getString(this.mappingValueName))
+        })
+        if (findNode != null) {
+          this.selectedPages.push(children)
+          this.selectedNodes.push(node)
+          children = findNode.getArray<UTSJSONObject>('children') ?? ([] as Array<UTSJSONObject>)
+        }
+      })
+      this.selectedIndex = this.selectedPages.length - 1
+    },
+
+    _extractTreePath(nodes : Array<UTSJSONObject>, result : Array<UTSJSONObject>) {
+      if (nodes.length == 0) {
+        return
+      }
+
+      const node = nodes[0]
+      result.push(node)
+
+      const children = node.getArray<UTSJSONObject>('children')
+      if (Array.isArray(children) && children!.length > 0) {
+        this._extractTreePath(children, result)
+      }
+    }
+  }
+})
diff --git a/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview.css b/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview.css
new file mode 100644
index 0000000..39fe1c3
--- /dev/null
+++ b/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview.css
@@ -0,0 +1,76 @@
+.uni-data-pickerview {
+  position: relative;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.loading-cover {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(150, 150, 150, .1);
+}
+
+.error {
+  background-color: #fff;
+  padding: 15px;
+}
+
+.error-text {
+  color: #DD524D;
+}
+
+.selected-node-list {
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+.selected-node-item {
+  margin-left: 10px;
+  margin-right: 10px;
+  padding: 8px 10px 8px 10px;
+  border-bottom: 2px solid transparent;
+}
+
+.selected-node-item-active {
+  color: #007aff;
+  border-bottom-color: #007aff;
+}
+
+.list-view {
+  flex: 1;
+}
+
+.list-item {
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 12px 15px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.item-text {
+  color: #333333;
+}
+
+.item-text-disabled {
+  opacity: .5;
+}
+
+.item-text-overflow {
+  overflow: hidden;
+}
+
+.check {
+  margin-right: 5px;
+  border: 2px solid #007aff;
+  border-left: 0;
+  border-top: 0;
+  height: 12px;
+  width: 6px;
+  transform-origin: center;
+  transform: rotate(45deg);
+}
diff --git a/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview.uvue b/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview.uvue
new file mode 100644
index 0000000..f4780f3
--- /dev/null
+++ b/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview.uvue
@@ -0,0 +1,69 @@
+<template>
+  <view class="uni-data-pickerview">
+    <view v-if="error!=null" class="error">
+      <text class="error-text">{{error!.errMsg}}</text>
+    </view>
+    <scroll-view v-if="!isCloudDataList" :scroll-x="true">
+      <view class="selected-node-list">
+        <template v-for="(item, index) in selectedNodes">
+          <text class="selected-node-item" :class="{'selected-node-item-active':index==selectedIndex}"
+            @click="onTabSelect(index)">
+            {{item[mappingTextName]}}
+          </text>
+        </template>
+      </view>
+    </scroll-view>
+    <list-view class="list-view" :scroll-y="true">
+      <list-item class="list-item" v-for="(item, _) in currentDataList" @click="onNodeClick(item)">
+        <text class="item-text" :class="{'item-text-disabled': item['disable']}">{{item[mappingTextName]}}</text>
+        <text class="check" v-if="item[mappingValueName] == selectedNodes[selectedIndex][mappingValueName]"></text>
+      </list-item>
+    </list-view>
+    <view class="loading-cover" v-if="loading">
+      <slot name="pickerview-loading" :loading="loading"></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  import { dataPicker } from "./uni-data-picker.uts"
+
+  /**
+   * DataPickerview
+   * @description uni-data-pickerview
+   * @tutorial https://ext.dcloud.net.cn/plugin?id=3796
+   * @property {Array} localdata 本地数据，参考
+   * @property {Boolean} step-searh = [true|false] 是否分布查询
+   * @value true 启用分布查询，仅查询当前选中节点
+   * @value false 关闭分布查询，一次查询出所有数据
+   * @property {String|DBFieldString} self-field 分布查询当前字段名称
+   * @property {String|DBFieldString} parent-field 分布查询父字段名称
+   * @property {String|DBCollectionString} collection 表名
+   * @property {String|DBFieldString} field 查询字段，多个字段用 `,` 分割
+   * @property {String} orderby 排序字段及正序倒叙设置
+   * @property {String|JQLString} where 查询条件
+   */
+  export default {
+    name: 'UniDataPickerView',
+    emits: ['nodeclick', 'change', 'update:modelValue'],
+    mixins: [dataPicker],
+    props: {
+      ellipsis: {
+        type: Boolean,
+        default: true
+      }
+    },
+    created() {
+      this.loadData()
+    },
+    methods: {
+      onFinish() {
+        this.$emit('change', this.getChangeNodes())
+      }
+    }
+  }
+</script>
+
+<style>
+  @import url("uni-data-pickerview.css");
+</style>
diff --git a/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview.vue b/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview.vue
new file mode 100644
index 0000000..6ebced9
--- /dev/null
+++ b/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview.vue
@@ -0,0 +1,323 @@
+<template>
+  <view class="uni-data-pickerview">
+    <scroll-view v-if="!isCloudDataList" class="selected-area" scroll-x="true">
+      <view class="selected-list">
+          <view 
+            class="selected-item"
+            v-for="(item,index) in selected"
+            :key="index"
+            :class="{
+              'selected-item-active':index == selectedIndex
+            }"
+            @click="handleSelect(index)"
+          >
+            <text>{{item.text || ''}}</text>
+          </view>
+      </view>
+    </scroll-view>
+    <view class="tab-c">
+      <scroll-view class="list" :scroll-y="true">
+        <view class="item" :class="{'is-disabled': !!item.disable}" v-for="(item, j) in dataList[selectedIndex]" :key="j"
+          @click="handleNodeClick(item, selectedIndex, j)">
+          <text class="item-text">{{item[map.text]}}</text>
+          <view class="check" v-if="selected.length > selectedIndex && item[map.value] == selected[selectedIndex].value"></view>
+        </view>
+      </scroll-view>
+
+      <view class="loading-cover" v-if="loading">
+        <uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more>
+      </view>
+      <view class="error-message" v-if="errorMessage">
+        <text class="error-text">{{errorMessage}}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import dataPicker from "./uni-data-picker.js"
+
+  /**
+   * DataPickerview
+   * @description uni-data-pickerview
+   * @tutorial https://ext.dcloud.net.cn/plugin?id=3796
+   * @property {Array} localdata 本地数据，参考
+   * @property {Boolean} step-searh = [true|false] 是否分布查询
+   * @value true 启用分布查询，仅查询当前选中节点
+   * @value false 关闭分布查询，一次查询出所有数据
+   * @property {String|DBFieldString} self-field 分布查询当前字段名称
+   * @property {String|DBFieldString} parent-field 分布查询父字段名称
+   * @property {String|DBCollectionString} collection 表名
+   * @property {String|DBFieldString} field 查询字段，多个字段用 `,` 分割
+   * @property {String} orderby 排序字段及正序倒叙设置
+   * @property {String|JQLString} where 查询条件
+   */
+  export default {
+    name: 'UniDataPickerView',
+    emits: ['nodeclick', 'change', 'datachange', 'update:modelValue'],
+    mixins: [dataPicker],
+    props: {
+      managedMode: {
+        type: Boolean,
+        default: false
+      },
+      ellipsis: {
+        type: Boolean,
+        default: true
+      }
+    },
+    created() {
+      if (!this.managedMode) {
+        this.$nextTick(() => {
+          this.loadData();
+        })
+      }
+    },
+    methods: {
+      onPropsChange() {
+        this._treeData = [];
+        this.selectedIndex = 0;
+        this.$nextTick(() => {
+          this.loadData();
+        })
+      },
+      handleSelect(index) {
+        this.selectedIndex = index;
+      },
+      handleNodeClick(item, i, j) {
+        if (item.disable) {
+          return;
+        }
+
+        const node = this.dataList[i][j];
+        const text = node[this.map.text];
+        const value = node[this.map.value];
+
+        if (i < this.selected.length - 1) {
+          this.selected.splice(i, this.selected.length - i)
+          this.selected.push({
+            text,
+            value
+          })
+        } else if (i === this.selected.length - 1) {
+          this.selected.splice(i, 1, {
+            text,
+            value
+          })
+        }
+
+        if (node.isleaf) {
+          this.onSelectedChange(node, node.isleaf)
+          return
+        }
+
+        const {
+          isleaf,
+          hasNodes
+        } = this._updateBindData()
+
+        // 本地数据
+        if (this.isLocalData) {
+          this.onSelectedChange(node, (!hasNodes || isleaf))
+        } else if (this.isCloudDataList) { // Cloud 数据 (单列)
+          this.onSelectedChange(node, true)
+        } else if (this.isCloudDataTree) { // Cloud 数据 (树形)
+          if (isleaf) {
+            this.onSelectedChange(node, node.isleaf)
+          } else if (!hasNodes) { // 请求一次服务器以确定是否为叶子节点
+            this.loadCloudDataNode((data) => {
+              if (!data.length) {
+                node.isleaf = true
+              } else {
+                this._treeData.push(...data)
+                this._updateBindData(node)
+              }
+              this.onSelectedChange(node, node.isleaf)
+            })
+          }
+        }
+      },
+      updateData(data) {
+        this._treeData = data.treeData
+        this.selected = data.selected
+        if (!this._treeData.length) {
+          this.loadData()
+        } else {
+          //this.selected = data.selected
+          this._updateBindData()
+        }
+      },
+      onDataChange() {
+        this.$emit('datachange');
+      },
+      onSelectedChange(node, isleaf) {
+        if (isleaf) {
+          this._dispatchEvent()
+        }
+
+        if (node) {
+          this.$emit('nodeclick', node)
+        }
+      },
+      _dispatchEvent() {
+        this.$emit('change', this.selected.slice(0))
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+	$uni-primary: #007aff !default;
+
+	.uni-data-pickerview {
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		overflow: hidden;
+		height: 100%;
+	}
+
+  .error-text {
+    color: #DD524D;
+  }
+
+  .loading-cover {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(255, 255, 255, .5);
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: column;
+    align-items: center;
+    z-index: 1001;
+  }
+
+  .load-more {
+    /* #ifndef APP-NVUE */
+    margin: auto;
+    /* #endif */
+  }
+
+  .error-message {
+    background-color: #fff;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    padding: 15px;
+    opacity: .9;
+    z-index: 102;
+  }
+
+  /* #ifdef APP-NVUE */
+  .selected-area {
+    width: 750rpx;
+  }
+  /* #endif */
+
+  .selected-list {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    flex-wrap: nowrap;
+    /* #endif */
+    flex-direction: row;
+    padding: 0 5px;
+    border-bottom: 1px solid #f8f8f8;
+  }
+
+  .selected-item {
+    margin-left: 10px;
+    margin-right: 10px;
+    padding: 12px 0;
+    text-align: center;
+    /* #ifndef APP-NVUE */
+    white-space: nowrap;
+    /* #endif */
+  }
+
+  .selected-item-text-overflow {
+    width: 168px;
+    /* fix nvue */
+    overflow: hidden;
+    /* #ifndef APP-NVUE */
+    width: 6em;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    -o-text-overflow: ellipsis;
+    /* #endif */
+  }
+
+	.selected-item-active {
+		border-bottom: 2px solid $uni-primary;
+	}
+
+	.selected-item-text {
+		color: $uni-primary;
+	}
+
+  .tab-c {
+    position: relative;
+    flex: 1;
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: row;
+    overflow: hidden;
+  }
+
+  .list {
+    flex: 1;
+  }
+
+  .item {
+    padding: 12px 15px;
+    /* border-bottom: 1px solid #f0f0f0; */
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .is-disabled {
+    opacity: .5;
+  }
+
+  .item-text {
+    /* flex: 1; */
+    color: #333333;
+  }
+
+  .item-text-overflow {
+    width: 280px;
+    /* fix nvue */
+    overflow: hidden;
+    /* #ifndef APP-NVUE */
+    width: 20em;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    -o-text-overflow: ellipsis;
+    /* #endif */
+  }
+
+	.check {
+		margin-right: 5px;
+		border: 2px solid $uni-primary;
+		border-left: 0;
+		border-top: 0;
+		height: 12px;
+		width: 6px;
+		transform-origin: center;
+		/* #ifndef APP-NVUE */
+		transition: all 0.3s;
+		/* #endif */
+		transform: rotate(45deg);
+	}
+</style>
diff --git a/uni_modules/uni-data-picker/package.json b/uni_modules/uni-data-picker/package.json
new file mode 100644
index 0000000..a508162
--- /dev/null
+++ b/uni_modules/uni-data-picker/package.json
@@ -0,0 +1,91 @@
+{
+  "id": "uni-data-picker",
+  "displayName": "uni-data-picker 数据驱动的picker选择器",
+  "version": "2.0.0",
+  "description": "单列、多列级联选择器，常用于省市区城市选择、公司部门选择、多级分类等场景",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "picker",
+    "级联",
+    "省市区",
+    ""
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": [
+      "uni-load-more",
+			"uni-icons",
+			"uni-scss"
+    ],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y",
+          "app-uvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+        "QQ": "y",
+        "京东": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/uni_modules/uni-data-picker/readme.md b/uni_modules/uni-data-picker/readme.md
new file mode 100644
index 0000000..19dd0e8
--- /dev/null
+++ b/uni_modules/uni-data-picker/readme.md
@@ -0,0 +1,22 @@
+## DataPicker 级联选择
+> **组件名：uni-data-picker**
+> 代码块： `uDataPicker`
+> 关联组件：`uni-data-pickerview`、`uni-load-more`。
+
+
+`<uni-data-picker>` 是一个选择类[datacom组件](https://uniapp.dcloud.net.cn/component/datacom)。
+
+支持单列、和多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。
+
+候选数据支持一次性加载完毕，也支持懒加载，比如示例图中，选择了“北京”后，动态加载北京的区县数据。
+
+`<uni-data-picker>` 组件尤其适用于地址选择、分类选择等选择类。
+
+`<uni-data-picker>` 支持本地数据、云端静态数据(json)，uniCloud云数据库数据。
+
+`<uni-data-picker>` 可以通过JQL直连uniCloud云数据库，配套[DB Schema](https://uniapp.dcloud.net.cn/uniCloud/schema)，可在schema2code中自动生成前端页面，还支持服务器端校验。
+
+在uniCloud数据表中新建表“uni-id-address”和“opendb-city-china”，这2个表的schema自带foreignKey关联。在“uni-id-address”表的表结构页面使用schema2code生成前端页面，会自动生成地址管理的维护页面，自动从“opendb-city-china”表包含的中国所有省市区信息里选择地址。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-picker)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
\ No newline at end of file
diff --git a/uni_modules/uni-data-select/changelog.md b/uni_modules/uni-data-select/changelog.md
new file mode 100644
index 0000000..016e3d2
--- /dev/null
+++ b/uni_modules/uni-data-select/changelog.md
@@ -0,0 +1,39 @@
+## 1.0.8（2024-03-28）
+- 修复 在vue2下:style动态绑定导致编译失败的bug
+## 1.0.7（2024-01-20）
+- 修复 长文本回显超过容器的bug，超过容器部分显示省略号
+## 1.0.6（2023-04-12）
+- 修复 微信小程序点击时会改变背景颜色的 bug
+## 1.0.5（2023-02-03）
+- 修复 禁用时会显示清空按钮
+## 1.0.4（2023-02-02）
+- 优化 查询条件短期内多次变更只查询最后一次变更后的结果
+- 调整 内部缓存键名调整为 uni-data-select-lastSelectedValue
+## 1.0.3（2023-01-16）
+- 修复 不关联服务空间报错的问题
+## 1.0.2（2023-01-14）
+- 新增  属性 `format` 可用于格式化显示选项内容
+## 1.0.1（2022-12-06）
+- 修复  当where变化时，数据不会自动更新的问题
+## 0.1.9（2022-09-05）
+- 修复 微信小程序下拉框出现后选择会点击到蒙板后面的输入框
+## 0.1.8（2022-08-29）
+- 修复 点击的位置不准确
+## 0.1.7（2022-08-12）
+- 新增 支持 disabled 属性
+## 0.1.6（2022-07-06）
+- 修复 pc端宽度异常的bug
+## 0.1.5
+- 修复 pc端宽度异常的bug
+## 0.1.4（2022-07-05）
+- 优化 显示样式
+## 0.1.3（2022-06-02）
+- 修复 localdata 赋值不生效的 bug
+- 新增 支持  uni.scss 修改颜色
+- 新增 支持选项禁用（数据选项设置 disabled: true 即禁用）
+## 0.1.2（2022-05-08）
+- 修复 当 value 为 0 时选择不生效的 bug
+## 0.1.1（2022-05-07）
+- 新增 记住上次的选项（仅 collection 存在时有效）
+## 0.1.0（2022-04-22）
+- 初始化
diff --git a/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue b/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue
new file mode 100644
index 0000000..edab65a
--- /dev/null
+++ b/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue
@@ -0,0 +1,562 @@
+<template>
+	<view class="uni-stat__select">
+		<span v-if="label" class="uni-label-text hide-on-phone">{{label + '：'}}</span>
+		<view class="uni-stat-box" :class="{'uni-stat__actived': current}">
+			<view class="uni-select" :class="{'uni-select--disabled':disabled}">
+				<view class="uni-select__input-box" @click="toggleSelector">
+					<view v-if="current" class="uni-select__input-text">{{textShow}}</view>
+					<view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view>
+					<view v-if="current && clear && !disabled" @click.stop="clearVal">
+						<uni-icons type="clear" color="#c0c4cc" size="24" />
+					</view>
+					<view v-else>
+						<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" />
+					</view>
+				</view>
+				<view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
+				<view class="uni-select__selector" :style="getOffsetByPlacement" v-if="showSelector">
+					<view :class="placement=='bottom'?'uni-popper__arrow_bottom':'uni-popper__arrow_top'"></view>
+					<scroll-view scroll-y="true" class="uni-select__selector-scroll">
+						<view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0">
+							<text>{{emptyTips}}</text>
+						</view>
+						<view v-else class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index"
+							@click="change(item)">
+							<text :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text>
+						</view>
+					</scroll-view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * DataChecklist 数据选择器
+	 * @description 通过数据渲染的下拉框组件
+	 * @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
+	 * @property {String} value 默认值
+	 * @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
+	 * @property {Boolean} clear 是否可以清空已选项
+	 * @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
+	 * @property {String} label 左侧标题
+	 * @property {String} placeholder 输入框的提示文字
+	 * @property {Boolean} disabled 是否禁用
+	 * @property {String} placement 弹出位置
+	 * 	@value top   		顶部弹出
+	 * 	@value bottom		底部弹出（default)
+	 * @event {Function} change  选中发生变化触发
+	 */
+
+	export default {
+		name: "uni-data-select",
+		mixins: [uniCloud.mixinDatacom || {}],
+		props: {
+			localdata: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			value: {
+				type: [String, Number],
+				default: ''
+			},
+			modelValue: {
+				type: [String, Number],
+				default: ''
+			},
+			label: {
+				type: String,
+				default: ''
+			},
+			placeholder: {
+				type: String,
+				default: '请选择'
+			},
+			emptyTips: {
+				type: String,
+				default: '无选项'
+			},
+			clear: {
+				type: Boolean,
+				default: true
+			},
+			defItem: {
+				type: Number,
+				default: 0
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			// 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}"
+			format: {
+				type: String,
+				default: ''
+			},
+			placement: {
+				type: String,
+				default: 'bottom'
+			}
+		},
+		data() {
+			return {
+				showSelector: false,
+				current: '',
+				mixinDatacomResData: [],
+				apps: [],
+				channels: [],
+				cacheKey: "uni-data-select-lastSelectedValue",
+			};
+		},
+		created() {
+			this.debounceGet = this.debounce(() => {
+				this.query();
+			}, 300);
+			if (this.collection && !this.localdata.length) {
+				this.debounceGet();
+			}
+		},
+		computed: {
+			typePlaceholder() {
+				const text = {
+					'opendb-stat-app-versions': '版本',
+					'opendb-app-channels': '渠道',
+					'opendb-app-list': '应用'
+				}
+				const common = this.placeholder
+				const placeholder = text[this.collection]
+				return placeholder ?
+					common + placeholder :
+					common
+			},
+			valueCom() {
+				// #ifdef VUE3
+				return this.modelValue;
+				// #endif
+				// #ifndef VUE3
+				return this.value;
+				// #endif
+			},
+			textShow() {
+				// 长文本显示
+				let text = this.current;
+				if (text.length > 10) {
+					return text.slice(0, 25) + '...';
+				}
+				return text;
+			},
+			getOffsetByPlacement() {
+				switch (this.placement) {
+					case 'top':
+						return "bottom:calc(100% + 12px);";
+					case 'bottom':
+						return "top:calc(100% + 12px);";
+				}
+			}
+		},
+
+		watch: {
+			localdata: {
+				immediate: true,
+				handler(val, old) {
+					if (Array.isArray(val) && old !== val) {
+						this.mixinDatacomResData = val
+					}
+				}
+			},
+			valueCom(val, old) {
+				this.initDefVal()
+			},
+			mixinDatacomResData: {
+				immediate: true,
+				handler(val) {
+					if (val.length) {
+						this.initDefVal()
+					}
+				}
+			},
+
+		},
+		methods: {
+			debounce(fn, time = 100) {
+				let timer = null
+				return function(...args) {
+					if (timer) clearTimeout(timer)
+					timer = setTimeout(() => {
+						fn.apply(this, args)
+					}, time)
+				}
+			},
+			// 执行数据库查询
+			query() {
+				this.mixinDatacomEasyGet();
+			},
+			// 监听查询条件变更事件
+			onMixinDatacomPropsChange() {
+				if (this.collection) {
+					this.debounceGet();
+				}
+			},
+			initDefVal() {
+				let defValue = ''
+				if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) {
+					defValue = this.valueCom
+				} else {
+					let strogeValue
+					if (this.collection) {
+						strogeValue = this.getCache()
+					}
+					if (strogeValue || strogeValue === 0) {
+						defValue = strogeValue
+					} else {
+						let defItem = ''
+						if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {
+							defItem = this.mixinDatacomResData[this.defItem - 1].value
+						}
+						defValue = defItem
+					}
+					if (defValue || defValue === 0) {
+						this.emit(defValue)
+					}
+				}
+				const def = this.mixinDatacomResData.find(item => item.value === defValue)
+				this.current = def ? this.formatItemName(def) : ''
+			},
+
+			/**
+			 * @param {[String, Number]} value
+			 * 判断用户给的 value 是否同时为禁用状态
+			 */
+			isDisabled(value) {
+				let isDisabled = false;
+
+				this.mixinDatacomResData.forEach(item => {
+					if (item.value === value) {
+						isDisabled = item.disable
+					}
+				})
+
+				return isDisabled;
+			},
+
+			clearVal() {
+				this.emit('')
+				if (this.collection) {
+					this.removeCache()
+				}
+			},
+			change(item) {
+				if (!item.disable) {
+					this.showSelector = false
+					this.current = this.formatItemName(item)
+					this.emit(item.value)
+				}
+			},
+			emit(val) {
+				this.$emit('input', val)
+				this.$emit('update:modelValue', val)
+				this.$emit('change', val)
+				if (this.collection) {
+					this.setCache(val);
+				}
+			},
+			toggleSelector() {
+				if (this.disabled) {
+					return
+				}
+
+				this.showSelector = !this.showSelector
+			},
+			formatItemName(item) {
+				let {
+					text,
+					value,
+					channel_code
+				} = item
+				channel_code = channel_code ? `(${channel_code})` : ''
+
+				if (this.format) {
+					// 格式化输出
+					let str = "";
+					str = this.format;
+					for (let key in item) {
+						str = str.replace(new RegExp(`{${key}}`, "g"), item[key]);
+					}
+					return str;
+				} else {
+					return this.collection.indexOf('app-list') > 0 ?
+						`${text}(${value})` :
+						(
+							text ?
+							text :
+							`未命名${channel_code}`
+						)
+				}
+			},
+			// 获取当前加载的数据
+			getLoadData() {
+				return this.mixinDatacomResData;
+			},
+			// 获取当前缓存key
+			getCurrentCacheKey() {
+				return this.collection;
+			},
+			// 获取缓存
+			getCache(name = this.getCurrentCacheKey()) {
+				let cacheData = uni.getStorageSync(this.cacheKey) || {};
+				return cacheData[name];
+			},
+			// 设置缓存
+			setCache(value, name = this.getCurrentCacheKey()) {
+				let cacheData = uni.getStorageSync(this.cacheKey) || {};
+				cacheData[name] = value;
+				uni.setStorageSync(this.cacheKey, cacheData);
+			},
+			// 删除缓存
+			removeCache(name = this.getCurrentCacheKey()) {
+				let cacheData = uni.getStorageSync(this.cacheKey) || {};
+				delete cacheData[name];
+				uni.setStorageSync(this.cacheKey, cacheData);
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	$uni-base-color: #6a6a6a !default;
+	$uni-main-color: #333 !default;
+	$uni-secondary-color: #909399 !default;
+	$uni-border-3: #e5e5e5;
+
+	/* #ifndef APP-NVUE */
+	@media screen and (max-width: 500px) {
+		.hide-on-phone {
+			display: none;
+		}
+	}
+
+	/* #endif */
+	.uni-stat__select {
+		display: flex;
+		align-items: center;
+		// padding: 15px;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+		width: 100%;
+		flex: 1;
+		box-sizing: border-box;
+	}
+
+	.uni-stat-box {
+		width: 100%;
+		flex: 1;
+	}
+
+	.uni-stat__actived {
+		width: 100%;
+		flex: 1;
+		// outline: 1px solid #2979ff;
+	}
+
+	.uni-label-text {
+		font-size: 14px;
+		font-weight: bold;
+		color: $uni-base-color;
+		margin: auto 0;
+		margin-right: 5px;
+	}
+
+	.uni-select {
+		font-size: 14px;
+		border: 1px solid $uni-border-3;
+		box-sizing: border-box;
+		border-radius: 4px;
+		padding: 0 5px;
+		padding-left: 10px;
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		user-select: none;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		border-bottom: solid 1px $uni-border-3;
+		width: 100%;
+		flex: 1;
+		height: 35px;
+
+		&--disabled {
+			background-color: #f5f7fa;
+			cursor: not-allowed;
+		}
+	}
+
+	.uni-select__label {
+		font-size: 16px;
+		// line-height: 22px;
+		height: 35px;
+		padding-right: 10px;
+		color: $uni-secondary-color;
+	}
+
+	.uni-select__input-box {
+		height: 35px;
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.uni-select__input {
+		flex: 1;
+		font-size: 14px;
+		height: 22px;
+		line-height: 22px;
+	}
+
+	.uni-select__input-plac {
+		font-size: 14px;
+		color: $uni-secondary-color;
+	}
+
+	.uni-select__selector {
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		/* #endif */
+		position: absolute;
+		left: 0;
+		width: 100%;
+		background-color: #FFFFFF;
+		border: 1px solid #EBEEF5;
+		border-radius: 6px;
+		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+		z-index: 3;
+		padding: 4px 0;
+	}
+
+	.uni-select__selector-scroll {
+		/* #ifndef APP-NVUE */
+		max-height: 200px;
+		box-sizing: border-box;
+		/* #endif */
+	}
+
+	/* #ifdef H5 */
+	@media (min-width: 768px) {
+		.uni-select__selector-scroll {
+			max-height: 600px;
+		}
+	}
+
+	/* #endif */
+
+	.uni-select__selector-empty,
+	.uni-select__selector-item {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		cursor: pointer;
+		/* #endif */
+		line-height: 35px;
+		font-size: 14px;
+		text-align: center;
+		/* border-bottom: solid 1px $uni-border-3; */
+		padding: 0px 10px;
+	}
+
+	.uni-select__selector-item:hover {
+		background-color: #f9f9f9;
+	}
+
+	.uni-select__selector-empty:last-child,
+	.uni-select__selector-item:last-child {
+		/* #ifndef APP-NVUE */
+		border-bottom: none;
+		/* #endif */
+	}
+
+	.uni-select__selector__disabled {
+		opacity: 0.4;
+		cursor: default;
+	}
+
+	/* picker 弹出层通用的指示小三角 */
+	.uni-popper__arrow_bottom,
+	.uni-popper__arrow_bottom::after,
+	.uni-popper__arrow_top,
+	.uni-popper__arrow_top::after,
+	{
+	position: absolute;
+	display: block;
+	width: 0;
+	height: 0;
+	border-color: transparent;
+	border-style: solid;
+	border-width: 6px;
+	}
+
+	.uni-popper__arrow_bottom {
+		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
+		top: -6px;
+		left: 10%;
+		margin-right: 3px;
+		border-top-width: 0;
+		border-bottom-color: #EBEEF5;
+	}
+
+	.uni-popper__arrow_bottom::after {
+		content: " ";
+		top: 1px;
+		margin-left: -6px;
+		border-top-width: 0;
+		border-bottom-color: #fff;
+	}
+
+	.uni-popper__arrow_top {
+		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
+		bottom: -6px;
+		left: 10%;
+		margin-right: 3px;
+		border-bottom-width: 0;
+		border-top-color: #EBEEF5;
+	}
+
+	.uni-popper__arrow_top::after {
+		content: " ";
+		bottom: 1px;
+		margin-left: -6px;
+		border-bottom-width: 0;
+		border-top-color: #fff;
+	}
+
+
+	.uni-select__input-text {
+		// width: 280px;
+		width: 100%;
+		color: $uni-main-color;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		-o-text-overflow: ellipsis;
+		overflow: hidden;
+	}
+
+	.uni-select__input-placeholder {
+		color: $uni-base-color;
+		font-size: 12px;
+	}
+
+	.uni-select--mask {
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		z-index: 2;
+	}
+</style>
diff --git a/uni_modules/uni-data-select/package.json b/uni_modules/uni-data-select/package.json
new file mode 100644
index 0000000..5864594
--- /dev/null
+++ b/uni_modules/uni-data-select/package.json
@@ -0,0 +1,86 @@
+{
+  "id": "uni-data-select",
+  "displayName": "uni-data-select 下拉框选择器",
+  "version": "1.0.8",
+  "description": "通过数据驱动的下拉框选择器",
+  "keywords": [
+    "uni-ui",
+    "select",
+    "uni-data-select",
+    "下拉框",
+    "下拉选"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": "^3.1.1"
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-load-more"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "n"
+      },
+      "client": {
+        "App": {
+          "app-vue": "u",
+          "app-nvue": "n"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "u",
+          "百度": "u",
+          "字节跳动": "u",
+        "QQ": "u",
+        "京东": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/uni_modules/uni-data-select/readme.md b/uni_modules/uni-data-select/readme.md
new file mode 100644
index 0000000..eb58de3
--- /dev/null
+++ b/uni_modules/uni-data-select/readme.md
@@ -0,0 +1,8 @@
+## DataSelect 下拉框选择器
+> **组件名：uni-data-select**
+> 代码块： `uDataSelect`
+
+当选项过多时，使用下拉菜单展示并选择内容
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-select)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
diff --git a/uni_modules/uni-dateformat/changelog.md b/uni_modules/uni-dateformat/changelog.md
new file mode 100644
index 0000000..d551d7b
--- /dev/null
+++ b/uni_modules/uni-dateformat/changelog.md
@@ -0,0 +1,10 @@
+## 1.0.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-dateformat](https://uniapp.dcloud.io/component/uniui/uni-dateformat)
+## 0.0.5（2021-07-08）
+- 调整 默认时间不再是当前时间，而是显示'-'字符
+## 0.0.4（2021-05-12）
+- 新增 组件示例地址
+## 0.0.3（2021-02-04）
+- 调整为uni_modules目录规范
+- 修复 iOS 平台日期格式化出错的问题
diff --git a/uni_modules/uni-dateformat/components/uni-dateformat/date-format.js b/uni_modules/uni-dateformat/components/uni-dateformat/date-format.js
new file mode 100644
index 0000000..e00d559
--- /dev/null
+++ b/uni_modules/uni-dateformat/components/uni-dateformat/date-format.js
@@ -0,0 +1,200 @@
+// yyyy-MM-dd hh:mm:ss.SSS 所有支持的类型
+function pad(str, length = 2) {
+	str += ''
+	while (str.length < length) {
+		str = '0' + str
+	}
+	return str.slice(-length)
+}
+
+const parser = {
+	yyyy: (dateObj) => {
+		return pad(dateObj.year, 4)
+	},
+	yy: (dateObj) => {
+		return pad(dateObj.year)
+	},
+	MM: (dateObj) => {
+		return pad(dateObj.month)
+	},
+	M: (dateObj) => {
+		return dateObj.month
+	},
+	dd: (dateObj) => {
+		return pad(dateObj.day)
+	},
+	d: (dateObj) => {
+		return dateObj.day
+	},
+	hh: (dateObj) => {
+		return pad(dateObj.hour)
+	},
+	h: (dateObj) => {
+		return dateObj.hour
+	},
+	mm: (dateObj) => {
+		return pad(dateObj.minute)
+	},
+	m: (dateObj) => {
+		return dateObj.minute
+	},
+	ss: (dateObj) => {
+		return pad(dateObj.second)
+	},
+	s: (dateObj) => {
+		return dateObj.second
+	},
+	SSS: (dateObj) => {
+		return pad(dateObj.millisecond, 3)
+	},
+	S: (dateObj) => {
+		return dateObj.millisecond
+	},
+}
+
+// 这都n年了iOS依然不认识2020-12-12，需要转换为2020/12/12
+function getDate(time) {
+	if (time instanceof Date) {
+		return time
+	}
+	switch (typeof time) {
+		case 'string':
+			{
+				// 2020-12-12T12:12:12.000Z、2020-12-12T12:12:12.000
+				if (time.indexOf('T') > -1) {
+					return new Date(time)
+				}
+				return new Date(time.replace(/-/g, '/'))
+			}
+		default:
+			return new Date(time)
+	}
+}
+
+export function formatDate(date, format = 'yyyy/MM/dd hh:mm:ss') {
+	if (!date && date !== 0) {
+		return ''
+	}
+	date = getDate(date)
+	const dateObj = {
+		year: date.getFullYear(),
+		month: date.getMonth() + 1,
+		day: date.getDate(),
+		hour: date.getHours(),
+		minute: date.getMinutes(),
+		second: date.getSeconds(),
+		millisecond: date.getMilliseconds()
+	}
+	const tokenRegExp = /yyyy|yy|MM|M|dd|d|hh|h|mm|m|ss|s|SSS|SS|S/
+	let flag = true
+	let result = format
+	while (flag) {
+		flag = false
+		result = result.replace(tokenRegExp, function(matched) {
+			flag = true
+			return parser[matched](dateObj)
+		})
+	}
+	return result
+}
+
+export function friendlyDate(time, {
+	locale = 'zh',
+	threshold = [60000, 3600000],
+	format = 'yyyy/MM/dd hh:mm:ss'
+}) {
+	if (time === '-') {
+		return time
+	}
+	if (!time && time !== 0) {
+		return ''
+	}
+	const localeText = {
+		zh: {
+			year: '年',
+			month: '月',
+			day: '天',
+			hour: '小时',
+			minute: '分钟',
+			second: '秒',
+			ago: '前',
+			later: '后',
+			justNow: '刚刚',
+			soon: '马上',
+			template: '{num}{unit}{suffix}'
+		},
+		en: {
+			year: 'year',
+			month: 'month',
+			day: 'day',
+			hour: 'hour',
+			minute: 'minute',
+			second: 'second',
+			ago: 'ago',
+			later: 'later',
+			justNow: 'just now',
+			soon: 'soon',
+			template: '{num} {unit} {suffix}'
+		}
+	}
+	const text = localeText[locale] || localeText.zh
+	let date = getDate(time)
+	let ms = date.getTime() - Date.now()
+	let absMs = Math.abs(ms)
+	if (absMs < threshold[0]) {
+		return ms < 0 ? text.justNow : text.soon
+	}
+	if (absMs >= threshold[1]) {
+		return formatDate(date, format)
+	}
+	let num
+	let unit
+	let suffix = text.later
+	if (ms < 0) {
+		suffix = text.ago
+		ms = -ms
+	}
+	const seconds = Math.floor((ms) / 1000)
+	const minutes = Math.floor(seconds / 60)
+	const hours = Math.floor(minutes / 60)
+	const days = Math.floor(hours / 24)
+	const months = Math.floor(days / 30)
+	const years = Math.floor(months / 12)
+	switch (true) {
+		case years > 0:
+			num = years
+			unit = text.year
+			break
+		case months > 0:
+			num = months
+			unit = text.month
+			break
+		case days > 0:
+			num = days
+			unit = text.day
+			break
+		case hours > 0:
+			num = hours
+			unit = text.hour
+			break
+		case minutes > 0:
+			num = minutes
+			unit = text.minute
+			break
+		default:
+			num = seconds
+			unit = text.second
+			break
+	}
+
+	if (locale === 'en') {
+		if (num === 1) {
+			num = 'a'
+		} else {
+			unit += 's'
+		}
+	}
+
+	return text.template.replace(/{\s*num\s*}/g, num + '').replace(/{\s*unit\s*}/g, unit).replace(/{\s*suffix\s*}/g,
+		suffix)
+}
diff --git a/uni_modules/uni-dateformat/components/uni-dateformat/uni-dateformat.vue b/uni_modules/uni-dateformat/components/uni-dateformat/uni-dateformat.vue
new file mode 100644
index 0000000..c5ed030
--- /dev/null
+++ b/uni_modules/uni-dateformat/components/uni-dateformat/uni-dateformat.vue
@@ -0,0 +1,88 @@
+<template>
+	<text>{{dateShow}}</text>
+</template>
+
+<script>
+	import {friendlyDate} from './date-format.js'
+	/**
+	 * Dateformat 日期格式化
+	 * @description 日期格式化组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3279
+	 * @property {Object|String|Number} date 日期对象/日期字符串/时间戳
+	 * @property {String} locale 格式化使用的语言
+	 * 	@value zh 中文
+	 * 	@value en 英文
+	 * @property {Array} threshold 应用不同类型格式化的阈值
+	 * @property {String} format 输出日期字符串时的格式
+	 */
+	export default {
+		name: 'uniDateformat',
+		props: {
+			date: {
+				type: [Object, String, Number],
+				default () {
+					return '-'
+				}
+			},
+			locale: {
+				type: String,
+				default: 'zh',
+			},
+			threshold: {
+				type: Array,
+				default () {
+					return [0, 0]
+				}
+			},
+			format: {
+				type: String,
+				default: 'yyyy/MM/dd hh:mm:ss'
+			},
+			// refreshRate使用不当可能导致性能问题，谨慎使用
+			refreshRate: {
+				type: [Number, String],
+				default: 0
+			}
+		},
+		data() {
+			return {
+				refreshMark: 0
+			}
+		},
+		computed: {
+			dateShow() {
+				this.refreshMark
+				return friendlyDate(this.date, {
+					locale: this.locale,
+					threshold: this.threshold,
+					format: this.format
+				})
+			}
+		},
+		watch: {
+			refreshRate: {
+				handler() {
+					this.setAutoRefresh()
+				},
+				immediate: true
+			}
+		},
+		methods: {
+			refresh() {
+				this.refreshMark++
+			},
+			setAutoRefresh() {
+				clearInterval(this.refreshInterval)
+				if (this.refreshRate) {
+					this.refreshInterval = setInterval(() => {
+						this.refresh()
+					}, parseInt(this.refreshRate))
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>
diff --git a/uni_modules/uni-dateformat/package.json b/uni_modules/uni-dateformat/package.json
new file mode 100644
index 0000000..786a670
--- /dev/null
+++ b/uni_modules/uni-dateformat/package.json
@@ -0,0 +1,88 @@
+{
+  "id": "uni-dateformat",
+  "displayName": "uni-dateformat 日期格式化",
+  "version": "1.0.0",
+  "description": "日期格式化组件，可以将日期格式化为1分钟前、刚刚等形式",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "日期格式化",
+    "时间格式化",
+    "格式化时间",
+    ""
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "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": "y",
+          "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/uni-dateformat/readme.md b/uni_modules/uni-dateformat/readme.md
new file mode 100644
index 0000000..37ddb6e
--- /dev/null
+++ b/uni_modules/uni-dateformat/readme.md
@@ -0,0 +1,11 @@
+
+
+### DateFormat 日期格式化
+> **组件名：uni-dateformat**
+> 代码块： `uDateformat`
+
+
+日期格式化组件。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-dateformat)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/uni_modules/uni-datetime-picker/changelog.md b/uni_modules/uni-datetime-picker/changelog.md
new file mode 100644
index 0000000..8798e93
--- /dev/null
+++ b/uni_modules/uni-datetime-picker/changelog.md
@@ -0,0 +1,160 @@
+## 2.2.34（2024-04-24）
+- 新增 日期点击事件，在点击日期时会触发该事件。
+## 2.2.33（2024-04-15）
+- 修复 抖音小程序事件传递失效bug
+## 2.2.32（2024-02-20）
+- 修复 日历的close事件触发异常的bug [详情](https://github.com/dcloudio/uni-ui/issues/844)
+## 2.2.31（2024-02-20）
+- 修复 h5平台 右边日历的月份默认+1的bug [详情](https://github.com/dcloudio/uni-ui/issues/841)
+## 2.2.30（2024-01-31）
+- 修复 隐藏“秒”时，在IOS15及以下版本时出现 结束时间在开始时间之前 的bug [详情](https://github.com/dcloudio/uni-ui/issues/788)
+## 2.2.29（2024-01-20）
+- 新增 show事件，弹窗弹出时触发该事件 [详情](https://github.com/dcloudio/uni-app/issues/4694)
+## 2.2.28（2024-01-18）
+- 去除 noChange事件，当进行日期范围选择时，若只选了一天，则开始结束日期都为同一天 [详情](https://github.com/dcloudio/uni-ui/issues/815)
+## 2.2.27（2024-01-10）
+- 优化 增加noChange事件，当进行日期范围选择时，若有空值，则触发该事件 [详情](https://github.com/dcloudio/uni-ui/issues/815)
+## 2.2.26（2024-01-08）
+- 修复 字节小程序时间选择范围器失效问题 [详情](https://github.com/dcloudio/uni-ui/issues/834)
+## 2.2.25（2023-10-18）
+- 修复 PC端初次修改时间，开始时间未更新的Bug [详情](https://github.com/dcloudio/uni-ui/issues/737)
+## 2.2.24（2023-06-02）
+- 修复 部分情况修改时间，开始、结束时间显示异常的Bug [详情](https://ask.dcloud.net.cn/question/171146)
+- 优化 当前月可以选择上月、下月的日期的Bug
+## 2.2.23（2023-05-02）
+- 修复 部分情况修改时间，开始时间未更新的Bug [详情](https://github.com/dcloudio/uni-ui/issues/737)
+- 修复 部分平台及设备第一次点击无法显示弹框的Bug
+- 修复 ios 日期格式未补零显示及使用异常的Bug [详情](https://ask.dcloud.net.cn/question/162979)
+## 2.2.22（2023-03-30）
+- 修复 日历 picker 修改年月后，自动选中当月1日的Bug [详情](https://ask.dcloud.net.cn/question/165937)
+- 修复 小程序端 低版本 ios NaN的Bug [详情](https://ask.dcloud.net.cn/question/162979)
+## 2.2.21（2023-02-20）
+- 修复 firefox 浏览器显示区域点击无法拉起日历弹框的Bug [详情](https://ask.dcloud.net.cn/question/163362)
+## 2.2.20（2023-02-17）
+- 优化 值为空依然选中当天问题
+- 优化 提供 default-value 属性支持配置选择器打开时默认显示的时间
+- 优化 非范围选择未选择日期时间，点击确认按钮选中当前日期时间
+- 优化 字节小程序日期时间范围选择，底部日期换行的Bug
+## 2.2.19（2023-02-09）
+- 修复 2.2.18 引起范围选择配置 end 选择无效的Bug [详情](https://github.com/dcloudio/uni-ui/issues/686)
+## 2.2.18（2023-02-08）
+- 修复 移动端范围选择change事件触发异常的Bug [详情](https://github.com/dcloudio/uni-ui/issues/684)
+- 优化 PC端输入日期格式错误时返回当前日期时间
+- 优化 PC端输入日期时间超出 start、end 限制的Bug
+- 优化 移动端日期时间范围用法时间展示不完整问题
+## 2.2.17（2023-02-04）
+- 修复 小程序端绑定 Date 类型报错的Bug [详情](https://github.com/dcloudio/uni-ui/issues/679)
+- 修复 vue3 time-picker 无法显示绑定时分秒的Bug
+## 2.2.16（2023-02-02）
+- 修复 字节小程序报错的Bug
+## 2.2.15（2023-02-02）
+- 修复 某些情况切换月份错误的Bug
+## 2.2.14（2023-01-30）
+- 修复 某些情况切换月份错误的Bug [详情](https://ask.dcloud.net.cn/question/162033)
+## 2.2.13（2023-01-10）
+- 修复 多次加载组件造成内存占用的Bug
+## 2.2.12（2022-12-01）
+- 修复 vue3 下 i18n 国际化初始值不正确的Bug
+## 2.2.11（2022-09-19）
+- 修复 支付宝小程序样式错乱的Bug [详情](https://github.com/dcloudio/uni-app/issues/3861)
+## 2.2.10（2022-09-19）
+- 修复 反向选择日期范围，日期显示异常的Bug [详情](https://ask.dcloud.net.cn/question/153401?item_id=212892&rf=false)
+## 2.2.9（2022-09-16）
+- 可以使用 uni-scss 控制主题色
+## 2.2.8（2022-09-08）
+- 修复 close事件无效的Bug
+## 2.2.7（2022-09-05）
+- 修复 移动端 maskClick 无效的Bug [详情](https://ask.dcloud.net.cn/question/140824)
+## 2.2.6（2022-06-30）
+- 优化 组件样式，调整了组件图标大小、高度、颜色等，与uni-ui风格保持一致
+## 2.2.5（2022-06-24）
+- 修复 日历顶部年月及底部确认未国际化的Bug
+## 2.2.4（2022-03-31）
+- 修复 Vue3 下动态赋值,单选类型未响应的Bug
+## 2.2.3（2022-03-28）
+- 修复 Vue3 下动态赋值未响应的Bug
+## 2.2.2（2021-12-10）
+- 修复 clear-icon 属性在小程序平台不生效的Bug
+## 2.2.1（2021-12-10）
+- 修复 日期范围选在小程序平台，必须多点击一次才能取消选中状态的Bug
+## 2.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源 [详情](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移 [https://uniapp.dcloud.io/component/uniui/uni-datetime-picker](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
+## 2.1.5（2021-11-09）
+- 新增 提供组件设计资源，组件样式调整
+## 2.1.4（2021-09-10）
+- 修复 hide-second 在移动端的Bug
+- 修复 单选赋默认值时，赋值日期未高亮的Bug
+- 修复 赋默认值时，移动端未正确显示时间的Bug
+## 2.1.3（2021-09-09）
+- 新增 hide-second 属性，支持只使用时分，隐藏秒
+## 2.1.2（2021-09-03）
+- 优化 取消选中时（范围选）直接开始下一次选择, 避免多点一次
+- 优化 移动端支持清除按钮，同时支持通过 ref 调用组件的 clear 方法
+- 优化 调整字号大小，美化日历界面
+- 修复 因国际化导致的 placeholder 失效的Bug
+## 2.1.1（2021-08-24）
+- 新增 支持国际化
+- 优化 范围选择器在 pc 端过宽的问题
+## 2.1.0（2021-08-09）
+- 新增 适配 vue3
+## 2.0.19（2021-08-09）
+- 新增 支持作为 uni-forms 子组件相关功能
+- 修复 在 uni-forms 中使用时，选择时间报 NAN 错误的Bug
+## 2.0.18（2021-08-05）
+- 修复 type 属性动态赋值无效的Bug
+- 修复 ‘确认’按钮被 tabbar 遮盖 bug
+- 修复 组件未赋值时范围选左、右日历相同的Bug
+## 2.0.17（2021-08-04）
+- 修复 范围选未正确显示当前值的Bug
+- 修复 h5 平台（移动端）报错 'cale' of undefined 的Bug
+## 2.0.16（2021-07-21）
+- 新增 return-type 属性支持返回 date 日期对象
+## 2.0.15（2021-07-14）
+- 修复 单选日期类型，初始赋值后不在当前日历的Bug
+- 新增 clearIcon 属性，显示框的清空按钮可配置显示隐藏（仅 pc 有效）
+- 优化 移动端移除显示框的清空按钮，无实际用途
+## 2.0.14（2021-07-14）
+- 修复 组件赋值为空，界面未更新的Bug
+- 修复 start 和 end 不能动态赋值的Bug
+- 修复 范围选类型，用户选择后再次选择右侧日历（结束日期）显示不正确的Bug
+## 2.0.13（2021-07-08）
+- 修复 范围选择不能动态赋值的Bug
+## 2.0.12（2021-07-08）
+- 修复 范围选择的初始时间在一个月内时，造成无法选择的bug
+## 2.0.11（2021-07-08）
+- 优化 弹出层在超出视窗边缘定位不准确的问题
+## 2.0.10（2021-07-08）
+- 修复 范围起始点样式的背景色与今日样式的字体前景色融合，导致日期字体看不清的Bug
+- 优化 弹出层在超出视窗边缘被遮盖的问题
+## 2.0.9（2021-07-07）
+- 新增 maskClick 事件
+- 修复 特殊情况日历 rpx 布局错误的Bug，rpx -> px
+- 修复 范围选择时清空返回值不合理的bug，['', ''] -> []
+## 2.0.8（2021-07-07）
+- 新增 日期时间显示框支持插槽
+## 2.0.7（2021-07-01）
+- 优化 添加 uni-icons 依赖
+## 2.0.6（2021-05-22）
+- 修复 图标在小程序上不显示的Bug
+- 优化 重命名引用组件，避免潜在组件命名冲突
+## 2.0.5（2021-05-20）
+- 优化 代码目录扁平化
+## 2.0.4（2021-05-12）
+- 新增 组件示例地址
+## 2.0.3（2021-05-10）
+- 修复 ios 下不识别 '-' 日期格式的Bug
+- 优化 pc 下弹出层添加边框和阴影
+## 2.0.2（2021-05-08）
+- 修复 在 admin 中获取弹出层定位错误的bug
+## 2.0.1（2021-05-08）
+- 修复 type 属性向下兼容，默认值从 date 变更为 datetime
+## 2.0.0（2021-04-30）
+- 支持日历形式的日期+时间的范围选择
+ > 注意：此版本不向后兼容，不再支持单独时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）
+## 1.0.6（2021-03-18）
+- 新增 hide-second 属性，时间支持仅选择时、分
+- 修复 选择跟显示的日期不一样的Bug
+- 修复 chang事件触发2次的Bug
+- 修复 分、秒 end 范围错误的Bug
+- 优化 更好的 nvue 适配
diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue
new file mode 100644
index 0000000..dba9887
--- /dev/null
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue
@@ -0,0 +1,177 @@
+<template>
+	<view class="uni-calendar-item__weeks-box" :class="{
+		'uni-calendar-item--disable':weeks.disable,
+		'uni-calendar-item--before-checked-x':weeks.beforeMultiple,
+		'uni-calendar-item--multiple': weeks.multiple,
+		'uni-calendar-item--after-checked-x':weeks.afterMultiple,
+		}" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)">
+		<view class="uni-calendar-item__weeks-box-item" :class="{
+				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover),
+				'uni-calendar-item--checked-range-text': checkHover,
+				'uni-calendar-item--before-checked':weeks.beforeMultiple,
+				'uni-calendar-item--multiple': weeks.multiple,
+				'uni-calendar-item--after-checked':weeks.afterMultiple,
+				'uni-calendar-item--disable':weeks.disable,
+				}">
+			<text v-if="selected && weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
+			<text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text>
+		</view>
+		<view :class="{'uni-calendar-item--today': weeks.isToday}"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			weeks: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			calendar: {
+				type: Object,
+				default: () => {
+					return {}
+				}
+			},
+			selected: {
+				type: Array,
+				default: () => {
+					return []
+				}
+			},
+			checkHover: {
+				type: Boolean,
+				default: false
+			}
+		},
+		methods: {
+			choiceDate(weeks) {
+				this.$emit('change', weeks)
+			},
+			handleMousemove(weeks) {
+				this.$emit('handleMouse', weeks)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	$uni-primary: #007aff !default;
+
+	.uni-calendar-item__weeks-box {
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		margin: 1px 0;
+		position: relative;
+	}
+
+	.uni-calendar-item__weeks-box-text {
+		font-size: 14px;
+		// font-family: Lato-Bold, Lato;
+		font-weight: bold;
+		color: darken($color: $uni-primary, $amount: 40%);
+	}
+
+	.uni-calendar-item__weeks-box-item {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		width: 40px;
+		height: 40px;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+
+	.uni-calendar-item__weeks-box-circle {
+		position: absolute;
+		top: 5px;
+		right: 5px;
+		width: 8px;
+		height: 8px;
+		border-radius: 8px;
+		background-color: #dd524d;
+
+	}
+
+	.uni-calendar-item__weeks-box .uni-calendar-item--disable {
+		cursor: default;
+	}
+
+	.uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
+		color: #D1D1D1;
+	}
+
+	.uni-calendar-item--today {
+		position: absolute;
+		top: 10px;
+		right: 17%;
+		background-color: #dd524d;
+		width:6px;
+		height: 6px;
+		border-radius: 50%;
+	}
+
+	.uni-calendar-item--extra {
+		color: #dd524d;
+		opacity: 0.8;
+	}
+
+	.uni-calendar-item__weeks-box .uni-calendar-item--checked {
+		background-color: $uni-primary;
+		border-radius: 50%;
+		box-sizing: border-box;
+		border: 3px solid #fff;
+	}
+
+	.uni-calendar-item--checked .uni-calendar-item--checked-text {
+		color: #fff;
+	}
+
+	.uni-calendar-item--multiple .uni-calendar-item--checked-range-text {
+		color: #333;
+	}
+
+	.uni-calendar-item--multiple {
+		background-color:  #F6F7FC;
+		// color: #fff;
+	}
+
+	.uni-calendar-item--multiple .uni-calendar-item--before-checked,
+	.uni-calendar-item--multiple .uni-calendar-item--after-checked {
+		background-color: $uni-primary;
+		border-radius: 50%;
+		box-sizing: border-box;
+		border: 3px solid #F6F7FC;
+	}
+
+	.uni-calendar-item--before-checked .uni-calendar-item--checked-text,
+	.uni-calendar-item--after-checked .uni-calendar-item--checked-text {
+		color: #fff;
+	}
+
+	.uni-calendar-item--before-checked-x {
+		border-top-left-radius: 50px;
+		border-bottom-left-radius: 50px;
+		box-sizing: border-box;
+		background-color: #F6F7FC;
+	}
+
+	.uni-calendar-item--after-checked-x {
+		border-top-right-radius: 50px;
+		border-bottom-right-radius: 50px;
+		background-color: #F6F7FC;
+	}
+</style>
diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue
new file mode 100644
index 0000000..0f9e121
--- /dev/null
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue
@@ -0,0 +1,947 @@
+<template>
+	<view class="uni-calendar" @mouseleave="leaveCale">
+
+		<view v-if="!insert && show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}"
+			@click="maskClick"></view>
+
+		<view v-if="insert || show" class="uni-calendar__content"
+			:class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow, 'uni-calendar__content-mobile': aniMaskShow}">
+			<view class="uni-calendar__header" :class="{'uni-calendar__header-mobile' :!insert}">
+
+				<view class="uni-calendar__header-btn-box" @click.stop="changeMonth('pre')">
+					<view class="uni-calendar__header-btn uni-calendar--left"></view>
+				</view>
+
+				<picker mode="date" :value="date" fields="month" @change="bindDateChange">
+					<text
+						class="uni-calendar__header-text">{{ (nowDate.year||'') + yearText + ( nowDate.month||'') + monthText}}</text>
+				</picker>
+
+				<view class="uni-calendar__header-btn-box" @click.stop="changeMonth('next')">
+					<view class="uni-calendar__header-btn uni-calendar--right"></view>
+				</view>
+
+				<view v-if="!insert" class="dialog-close" @click="maskClick">
+					<view class="dialog-close-plus" data-id="close"></view>
+					<view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
+				</view>
+			</view>
+			<view class="uni-calendar__box">
+
+				<view v-if="showMonth" class="uni-calendar__box-bg">
+					<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
+				</view>
+
+				<view class="uni-calendar__weeks" style="padding-bottom: 7px;">
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{MONText}}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{TUEText}}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{WEDText}}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{THUText}}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{FRIText}}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{SATText}}</text>
+					</view>
+				</view>
+
+				<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
+					<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
+						<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar" :selected="selected"
+							:checkHover="range" @change="choiceDate" @handleMouse="handleMouse">
+						</calendar-item>
+					</view>
+				</view>
+			</view>
+
+			<view v-if="!insert && !range && hasTime" class="uni-date-changed uni-calendar--fixed-top"
+				style="padding: 0 80px;">
+				<view class="uni-date-changed--time-date">{{tempSingleDate ? tempSingleDate : selectDateText}}</view>
+				<time-picker type="time" :start="timepickerStartTime" :end="timepickerEndTime" v-model="time"
+					:disabled="!tempSingleDate" :border="false" :hide-second="hideSecond" class="time-picker-style">
+				</time-picker>
+			</view>
+
+			<view v-if="!insert && range && hasTime" class="uni-date-changed uni-calendar--fixed-top">
+				<view class="uni-date-changed--time-start">
+					<view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}}
+					</view>
+					<time-picker type="time" :start="timepickerStartTime" v-model="timeRange.startTime" :border="false"
+						:hide-second="hideSecond" :disabled="!tempRange.before" class="time-picker-style">
+					</time-picker>
+				</view>
+				<view style="line-height: 50px;">
+					<uni-icons type="arrowthinright" color="#999"></uni-icons>
+				</view>
+				<view class="uni-date-changed--time-end">
+					<view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view>
+					<time-picker type="time" :end="timepickerEndTime" v-model="timeRange.endTime" :border="false"
+						:hide-second="hideSecond" :disabled="!tempRange.after" class="time-picker-style">
+					</time-picker>
+				</view>
+			</view>
+
+			<view v-if="!insert" class="uni-date-changed uni-date-btn--ok">
+				<view class="uni-datetime-picker--btn" @click="confirm">{{confirmText}}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		Calendar,
+		getDate,
+		getTime
+	} from './util.js';
+	import calendarItem from './calendar-item.vue'
+	import timePicker from './time-picker.vue'
+
+	import {
+		initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import i18nMessages from './i18n/index.js'
+	const {
+		t
+	} = initVueI18n(i18nMessages)
+
+	/**
+	 * Calendar 日历
+	 * @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=56
+	 * @property {String} date 自定义当前时间，默认为今天
+	 * @property {String} startDate 日期选择范围-开始日期
+	 * @property {String} endDate 日期选择范围-结束日期
+	 * @property {Boolean} range 范围选择
+	 * @property {Boolean} insert = [true|false] 插入模式,默认为false
+	 * 	@value true 弹窗模式
+	 * 	@value false 插入模式
+	 * @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
+	 * @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
+	 * @property {Boolean} showMonth 是否选择月份为背景
+	 * @property {[String} defaultValue 选择器打开时默认显示的时间
+	 * @event {Function} change 日期改变，`insert :ture` 时生效
+	 * @event {Function} confirm 确认选择`insert :false` 时生效
+	 * @event {Function} monthSwitch 切换月份时触发
+	 * @example <uni-calendar :insert="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
+	 */
+	export default {
+		components: {
+			calendarItem,
+			timePicker
+		},
+
+		options: {
+			// #ifdef MP-TOUTIAO
+			virtualHost: false,
+			// #endif
+			// #ifndef MP-TOUTIAO
+			virtualHost: true
+			// #endif
+		},
+		props: {
+			date: {
+				type: String,
+				default: ''
+			},
+			defTime: {
+				type: [String, Object],
+				default: ''
+			},
+			selectableTimes: {
+				type: [Object],
+				default () {
+					return {}
+				}
+			},
+			selected: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			startDate: {
+				type: String,
+				default: ''
+			},
+			endDate: {
+				type: String,
+				default: ''
+			},
+			startPlaceholder: {
+				type: String,
+				default: ''
+			},
+			endPlaceholder: {
+				type: String,
+				default: ''
+			},
+			range: {
+				type: Boolean,
+				default: false
+			},
+			hasTime: {
+				type: Boolean,
+				default: false
+			},
+			insert: {
+				type: Boolean,
+				default: true
+			},
+			showMonth: {
+				type: Boolean,
+				default: true
+			},
+			clearDate: {
+				type: Boolean,
+				default: true
+			},
+			checkHover: {
+				type: Boolean,
+				default: true
+			},
+			hideSecond: {
+				type: [Boolean],
+				default: false
+			},
+			pleStatus: {
+				type: Object,
+				default () {
+					return {
+						before: '',
+						after: '',
+						data: [],
+						fulldate: ''
+					}
+				}
+			},
+			defaultValue: {
+				type: [String, Object, Array],
+				default: ''
+			}
+		},
+		data() {
+			return {
+				show: false,
+				weeks: [],
+				calendar: {},
+				nowDate: {},
+				aniMaskShow: false,
+				firstEnter: true,
+				time: '',
+				timeRange: {
+					startTime: '',
+					endTime: ''
+				},
+				tempSingleDate: '',
+				tempRange: {
+					before: '',
+					after: ''
+				}
+			}
+		},
+		watch: {
+			date: {
+				immediate: true,
+				handler(newVal) {
+					if (!this.range) {
+						this.tempSingleDate = newVal
+						setTimeout(() => {
+							this.init(newVal)
+						}, 100)
+					}
+				}
+			},
+			defTime: {
+				immediate: true,
+				handler(newVal) {
+					if (!this.range) {
+						this.time = newVal
+					} else {
+						this.timeRange.startTime = newVal.start
+						this.timeRange.endTime = newVal.end
+					}
+				}
+			},
+			startDate(val) {
+				// 字节小程序 watch 早于 created
+				if (!this.cale) {
+					return
+				}
+				this.cale.setStartDate(val)
+				this.cale.setDate(this.nowDate.fullDate)
+				this.weeks = this.cale.weeks
+			},
+			endDate(val) {
+				// 字节小程序 watch 早于 created
+				if (!this.cale) {
+					return
+				}
+				this.cale.setEndDate(val)
+				this.cale.setDate(this.nowDate.fullDate)
+				this.weeks = this.cale.weeks
+			},
+			selected(newVal) {
+				// 字节小程序 watch 早于 created
+				if (!this.cale) {
+					return
+				}
+				this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
+				this.weeks = this.cale.weeks
+			},
+			pleStatus: {
+				immediate: true,
+				handler(newVal) {
+					const {
+						before,
+						after,
+						fulldate,
+						which
+					} = newVal
+					this.tempRange.before = before
+					this.tempRange.after = after
+					setTimeout(() => {
+						if (fulldate) {
+							this.cale.setHoverMultiple(fulldate)
+							if (before && after) {
+								this.cale.lastHover = true
+								if (this.rangeWithinMonth(after, before)) return
+								this.setDate(before)
+							} else {
+								this.cale.setMultiple(fulldate)
+								this.setDate(this.nowDate.fullDate)
+								this.calendar.fullDate = ''
+								this.cale.lastHover = false
+							}
+						} else {
+							// 字节小程序 watch 早于 created
+							if (!this.cale) {
+								return
+							}
+
+							this.cale.setDefaultMultiple(before, after)
+							if (which === 'left' && before) {
+								this.setDate(before)
+								this.weeks = this.cale.weeks
+							} else if (after) {
+								this.setDate(after)
+								this.weeks = this.cale.weeks
+							}
+							this.cale.lastHover = true
+						}
+					}, 16)
+				}
+			}
+		},
+		computed: {
+			timepickerStartTime() {
+				const activeDate = this.range ? this.tempRange.before : this.calendar.fullDate
+				return activeDate === this.startDate ? this.selectableTimes.start : ''
+			},
+			timepickerEndTime() {
+				const activeDate = this.range ? this.tempRange.after : this.calendar.fullDate
+				return activeDate === this.endDate ? this.selectableTimes.end : ''
+			},
+			/**
+			 * for i18n
+			 */
+			selectDateText() {
+				return t("uni-datetime-picker.selectDate")
+			},
+			startDateText() {
+				return this.startPlaceholder || t("uni-datetime-picker.startDate")
+			},
+			endDateText() {
+				return this.endPlaceholder || t("uni-datetime-picker.endDate")
+			},
+			okText() {
+				return t("uni-datetime-picker.ok")
+			},
+			yearText() {
+				return t("uni-datetime-picker.year")
+			},
+			monthText() {
+				return t("uni-datetime-picker.month")
+			},
+			MONText() {
+				return t("uni-calender.MON")
+			},
+			TUEText() {
+				return t("uni-calender.TUE")
+			},
+			WEDText() {
+				return t("uni-calender.WED")
+			},
+			THUText() {
+				return t("uni-calender.THU")
+			},
+			FRIText() {
+				return t("uni-calender.FRI")
+			},
+			SATText() {
+				return t("uni-calender.SAT")
+			},
+			SUNText() {
+				return t("uni-calender.SUN")
+			},
+			confirmText() {
+				return t("uni-calender.confirm")
+			},
+		},
+		created() {
+			// 获取日历方法实例
+			this.cale = new Calendar({
+				selected: this.selected,
+				startDate: this.startDate,
+				endDate: this.endDate,
+				range: this.range,
+			})
+			// 选中某一天
+			this.init(this.date)
+		},
+		methods: {
+			leaveCale() {
+				this.firstEnter = true
+			},
+			handleMouse(weeks) {
+				if (weeks.disable) return
+				if (this.cale.lastHover) return
+				let {
+					before,
+					after
+				} = this.cale.multipleStatus
+				if (!before) return
+				this.calendar = weeks
+				// 设置范围选
+				this.cale.setHoverMultiple(this.calendar.fullDate)
+				this.weeks = this.cale.weeks
+				// hover时，进入一个日历，更新另一个
+				if (this.firstEnter) {
+					this.$emit('firstEnterCale', this.cale.multipleStatus)
+					this.firstEnter = false
+				}
+			},
+			rangeWithinMonth(A, B) {
+				const [yearA, monthA] = A.split('-')
+				const [yearB, monthB] = B.split('-')
+				return yearA === yearB && monthA === monthB
+			},
+			// 蒙版点击事件
+			maskClick() {
+				this.close()
+				this.$emit('maskClose')
+			},
+
+			clearCalender() {
+				if (this.range) {
+					this.timeRange.startTime = ''
+					this.timeRange.endTime = ''
+					this.tempRange.before = ''
+					this.tempRange.after = ''
+					this.cale.multipleStatus.before = ''
+					this.cale.multipleStatus.after = ''
+					this.cale.multipleStatus.data = []
+					this.cale.lastHover = false
+				} else {
+					this.time = ''
+					this.tempSingleDate = ''
+				}
+				this.calendar.fullDate = ''
+				this.setDate(new Date())
+			},
+
+			bindDateChange(e) {
+				const value = e.detail.value + '-1'
+				this.setDate(value)
+			},
+			/**
+			 * 初始化日期显示
+			 * @param {Object} date
+			 */
+			init(date) {
+				// 字节小程序 watch 早于 created
+				if (!this.cale) {
+					return
+				}
+				this.cale.setDate(date || new Date())
+				this.weeks = this.cale.weeks
+				this.nowDate = this.cale.getInfo(date)
+				this.calendar = {
+					...this.nowDate
+				}
+				if (!date) {
+					// 优化date为空默认不选中今天
+					this.calendar.fullDate = ''
+					if (this.defaultValue && !this.range) {
+						// 暂时只支持移动端非范围选择
+						const defaultDate = new Date(this.defaultValue)
+						const fullDate = getDate(defaultDate)
+						const year = defaultDate.getFullYear()
+						const month = defaultDate.getMonth() + 1
+						const date = defaultDate.getDate()
+						const day = defaultDate.getDay()
+						this.calendar = {
+								fullDate,
+								year,
+								month,
+								date,
+								day
+							},
+							this.tempSingleDate = fullDate
+						this.time = getTime(defaultDate, this.hideSecond)
+					}
+				}
+			},
+			/**
+			 * 打开日历弹窗
+			 */
+			open() {
+				// 弹窗模式并且清理数据
+				if (this.clearDate && !this.insert) {
+					this.cale.cleanMultipleStatus()
+					this.init(this.date)
+				}
+				this.show = true
+				this.$nextTick(() => {
+					setTimeout(() => {
+						this.aniMaskShow = true
+					}, 50)
+				})
+			},
+			/**
+			 * 关闭日历弹窗
+			 */
+			close() {
+				this.aniMaskShow = false
+				this.$nextTick(() => {
+					setTimeout(() => {
+						this.show = false
+						this.$emit('close')
+					}, 300)
+				})
+			},
+			/**
+			 * 确认按钮
+			 */
+			confirm() {
+				this.setEmit('confirm')
+				this.close()
+			},
+			/**
+			 * 变化触发
+			 */
+			change(isSingleChange) {
+				if (!this.insert && !isSingleChange) return
+				this.setEmit('change')
+			},
+			/**
+			 * 选择月份触发
+			 */
+			monthSwitch() {
+				let {
+					year,
+					month
+				} = this.nowDate
+				this.$emit('monthSwitch', {
+					year,
+					month: Number(month)
+				})
+			},
+			/**
+			 * 派发事件
+			 * @param {Object} name
+			 */
+			setEmit(name) {
+				if (!this.range) {
+					if (!this.calendar.fullDate) {
+						this.calendar = this.cale.getInfo(new Date())
+						this.tempSingleDate = this.calendar.fullDate
+					}
+					if (this.hasTime && !this.time) {
+						this.time = getTime(new Date(), this.hideSecond)
+					}
+				}
+				let {
+					year,
+					month,
+					date,
+					fullDate,
+					extraInfo
+				} = this.calendar
+				this.$emit(name, {
+					range: this.cale.multipleStatus,
+					year,
+					month,
+					date,
+					time: this.time,
+					timeRange: this.timeRange,
+					fulldate: fullDate,
+					extraInfo: extraInfo || {}
+				})
+			},
+			/**
+			 * 选择天触发
+			 * @param {Object} weeks
+			 */
+			choiceDate(weeks) {
+				if (weeks.disable) return
+				this.calendar = weeks
+				this.calendar.userChecked = true
+				// 设置多选
+				this.cale.setMultiple(this.calendar.fullDate, true)
+				this.weeks = this.cale.weeks
+				this.tempSingleDate = this.calendar.fullDate
+				const beforeDate = new Date(this.cale.multipleStatus.before).getTime()
+				const afterDate = new Date(this.cale.multipleStatus.after).getTime()
+				if (beforeDate > afterDate && afterDate) {
+					this.tempRange.before = this.cale.multipleStatus.after
+					this.tempRange.after = this.cale.multipleStatus.before
+				} else {
+					this.tempRange.before = this.cale.multipleStatus.before
+					this.tempRange.after = this.cale.multipleStatus.after
+				}
+				this.change(true)
+			},
+			changeMonth(type) {
+				let newDate
+				if (type === 'pre') {
+					newDate = this.cale.getPreMonthObj(this.nowDate.fullDate).fullDate
+				} else if (type === 'next') {
+					newDate = this.cale.getNextMonthObj(this.nowDate.fullDate).fullDate
+				}
+
+				this.setDate(newDate)
+				this.monthSwitch()
+			},
+			/**
+			 * 设置日期
+			 * @param {Object} date
+			 */
+			setDate(date) {
+				this.cale.setDate(date)
+				this.weeks = this.cale.weeks
+				this.nowDate = this.cale.getInfo(date)
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	$uni-primary: #007aff !default;
+
+	.uni-calendar {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+	}
+
+	.uni-calendar__mask {
+		position: fixed;
+		bottom: 0;
+		top: 0;
+		left: 0;
+		right: 0;
+		background-color: rgba(0, 0, 0, 0.4);
+		transition-property: opacity;
+		transition-duration: 0.3s;
+		opacity: 0;
+		/* #ifndef APP-NVUE */
+		z-index: 99;
+		/* #endif */
+	}
+
+	.uni-calendar--mask-show {
+		opacity: 1
+	}
+
+	.uni-calendar--fixed {
+		position: fixed;
+		bottom: calc(var(--window-bottom));
+		left: 0;
+		right: 0;
+		transition-property: transform;
+		transition-duration: 0.3s;
+		transform: translateY(460px);
+		/* #ifndef APP-NVUE */
+		z-index: 99;
+		/* #endif */
+	}
+
+	.uni-calendar--ani-show {
+		transform: translateY(0);
+	}
+
+	.uni-calendar__content {
+		background-color: #fff;
+	}
+
+	.uni-calendar__content-mobile {
+		border-top-left-radius: 10px;
+		border-top-right-radius: 10px;
+		box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);
+	}
+
+	.uni-calendar__header {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		height: 50px;
+	}
+
+	.uni-calendar__header-mobile {
+		padding: 10px;
+		padding-bottom: 0;
+	}
+
+	.uni-calendar--fixed-top {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: space-between;
+		border-top-color: rgba(0, 0, 0, 0.4);
+		border-top-style: solid;
+		border-top-width: 1px;
+	}
+
+	.uni-calendar--fixed-width {
+		width: 50px;
+	}
+
+	.uni-calendar__backtoday {
+		position: absolute;
+		right: 0;
+		top: 25rpx;
+		padding: 0 5px;
+		padding-left: 10px;
+		height: 25px;
+		line-height: 25px;
+		font-size: 12px;
+		border-top-left-radius: 25px;
+		border-bottom-left-radius: 25px;
+		color: #fff;
+		background-color: #f1f1f1;
+	}
+
+	.uni-calendar__header-text {
+		text-align: center;
+		width: 100px;
+		font-size: 15px;
+		color: #666;
+	}
+
+	.uni-calendar__button-text {
+		text-align: center;
+		width: 100px;
+		font-size: 14px;
+		color: $uni-primary;
+		/* #ifndef APP-NVUE */
+		letter-spacing: 3px;
+		/* #endif */
+	}
+
+	.uni-calendar__header-btn-box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		width: 50px;
+		height: 50px;
+	}
+
+	.uni-calendar__header-btn {
+		width: 9px;
+		height: 9px;
+		border-left-color: #808080;
+		border-left-style: solid;
+		border-left-width: 1px;
+		border-top-color: #555555;
+		border-top-style: solid;
+		border-top-width: 1px;
+	}
+
+	.uni-calendar--left {
+		transform: rotate(-45deg);
+	}
+
+	.uni-calendar--right {
+		transform: rotate(135deg);
+	}
+
+
+	.uni-calendar__weeks {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-calendar__weeks-item {
+		flex: 1;
+	}
+
+	.uni-calendar__weeks-day {
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		height: 40px;
+		border-bottom-color: #F5F5F5;
+		border-bottom-style: solid;
+		border-bottom-width: 1px;
+	}
+
+	.uni-calendar__weeks-day-text {
+		font-size: 12px;
+		color: #B2B2B2;
+	}
+
+	.uni-calendar__box {
+		position: relative;
+		// padding: 0 10px;
+		padding-bottom: 7px;
+	}
+
+	.uni-calendar__box-bg {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+	}
+
+	.uni-calendar__box-bg-text {
+		font-size: 200px;
+		font-weight: bold;
+		color: #999;
+		opacity: 0.1;
+		text-align: center;
+		/* #ifndef APP-NVUE */
+		line-height: 1;
+		/* #endif */
+	}
+
+	.uni-date-changed {
+		padding: 0 10px;
+		// line-height: 50px;
+		text-align: center;
+		color: #333;
+		border-top-color: #DCDCDC;
+		;
+		border-top-style: solid;
+		border-top-width: 1px;
+		flex: 1;
+	}
+
+	.uni-date-btn--ok {
+		padding: 20px 15px;
+	}
+
+	.uni-date-changed--time-start {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		align-items: center;
+	}
+
+	.uni-date-changed--time-end {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		align-items: center;
+	}
+
+	.uni-date-changed--time-date {
+		color: #999;
+		line-height: 50px;
+		/* #ifdef MP-TOUTIAO */
+		font-size: 16px;
+		/* #endif */
+		margin-right: 5px;
+		// opacity: 0.6;
+	}
+
+	.time-picker-style {
+		// width: 62px;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center
+	}
+
+	.mr-10 {
+		margin-right: 10px;
+	}
+
+	.dialog-close {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		padding: 0 25px;
+		margin-top: 10px;
+	}
+
+	.dialog-close-plus {
+		width: 16px;
+		height: 2px;
+		background-color: #737987;
+		border-radius: 2px;
+		transform: rotate(45deg);
+	}
+
+	.dialog-close-rotate {
+		position: absolute;
+		transform: rotate(-45deg);
+	}
+
+	.uni-datetime-picker--btn {
+		border-radius: 100px;
+		height: 40px;
+		line-height: 40px;
+		background-color: $uni-primary;
+		color: #fff;
+		font-size: 16px;
+		letter-spacing: 2px;
+	}
+
+	/* #ifndef APP-NVUE */
+	.uni-datetime-picker--btn:active {
+		opacity: 0.7;
+	}
+
+	/* #endif */
+</style>
diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/en.json b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/en.json
new file mode 100644
index 0000000..024f22f
--- /dev/null
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/en.json
@@ -0,0 +1,22 @@
+{
+	"uni-datetime-picker.selectDate": "select date",
+	"uni-datetime-picker.selectTime": "select time",
+	"uni-datetime-picker.selectDateTime": "select date and time",
+	"uni-datetime-picker.startDate": "start date",
+	"uni-datetime-picker.endDate": "end date",
+	"uni-datetime-picker.startTime": "start time",
+	"uni-datetime-picker.endTime": "end time",
+	"uni-datetime-picker.ok": "ok",
+	"uni-datetime-picker.clear": "clear",
+	"uni-datetime-picker.cancel": "cancel",
+	"uni-datetime-picker.year": "-",
+	"uni-datetime-picker.month": "",
+	"uni-calender.MON": "MON",
+	"uni-calender.TUE": "TUE",
+	"uni-calender.WED": "WED",
+	"uni-calender.THU": "THU",
+	"uni-calender.FRI": "FRI",
+	"uni-calender.SAT": "SAT",
+	"uni-calender.SUN": "SUN",
+	"uni-calender.confirm": "confirm"
+}
diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/index.js b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/index.js
new file mode 100644
index 0000000..de7509c
--- /dev/null
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/index.js
@@ -0,0 +1,8 @@
+import en from './en.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
+}
diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hans.json b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hans.json
new file mode 100644
index 0000000..d2df5e7
--- /dev/null
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hans.json
@@ -0,0 +1,22 @@
+{
+	"uni-datetime-picker.selectDate": "选择日期",
+	"uni-datetime-picker.selectTime": "选择时间",
+	"uni-datetime-picker.selectDateTime": "选择日期时间",
+	"uni-datetime-picker.startDate": "开始日期",
+	"uni-datetime-picker.endDate": "结束日期",
+	"uni-datetime-picker.startTime": "开始时间",
+	"uni-datetime-picker.endTime": "结束时间",
+	"uni-datetime-picker.ok": "确定",
+	"uni-datetime-picker.clear": "清除",
+	"uni-datetime-picker.cancel": "取消",
+	"uni-datetime-picker.year": "年",
+	"uni-datetime-picker.month": "月",
+	"uni-calender.SUN": "日",
+	"uni-calender.MON": "一",
+	"uni-calender.TUE": "二",
+	"uni-calender.WED": "三",
+	"uni-calender.THU": "四",
+	"uni-calender.FRI": "五",
+	"uni-calender.SAT": "六",
+	"uni-calender.confirm": "确认"
+}
\ No newline at end of file
diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hant.json b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hant.json
new file mode 100644
index 0000000..d23fa3c
--- /dev/null
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hant.json
@@ -0,0 +1,22 @@
+{
+  "uni-datetime-picker.selectDate": "選擇日期",
+  "uni-datetime-picker.selectTime": "選擇時間",
+  "uni-datetime-picker.selectDateTime": "選擇日期時間",
+  "uni-datetime-picker.startDate": "開始日期",
+  "uni-datetime-picker.endDate": "結束日期",
+  "uni-datetime-picker.startTime": "開始时间",
+  "uni-datetime-picker.endTime": "結束时间",
+  "uni-datetime-picker.ok": "確定",
+  "uni-datetime-picker.clear": "清除",
+  "uni-datetime-picker.cancel": "取消",
+  "uni-datetime-picker.year": "年",
+  "uni-datetime-picker.month": "月",
+  "uni-calender.SUN": "日",
+  "uni-calender.MON": "一",
+  "uni-calender.TUE": "二",
+  "uni-calender.WED": "三",
+  "uni-calender.THU": "四",
+  "uni-calender.FRI": "五",
+  "uni-calender.SAT": "六",
+  "uni-calender.confirm": "確認"
+}
\ No newline at end of file
diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue
new file mode 100644
index 0000000..1817692
--- /dev/null
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue
@@ -0,0 +1,940 @@
+<template>
+	<view class="uni-datetime-picker">
+		<view @click="initTimePicker">
+			<slot>
+				<view class="uni-datetime-picker-timebox-pointer"
+					:class="{'uni-datetime-picker-disabled': disabled, 'uni-datetime-picker-timebox': border}">
+					<text class="uni-datetime-picker-text">{{time}}</text>
+					<view v-if="!time" class="uni-datetime-picker-time">
+						<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
+					</view>
+				</view>
+			</slot>
+		</view>
+		<view v-if="visible" id="mask" class="uni-datetime-picker-mask" @click="tiggerTimePicker"></view>
+		<view v-if="visible" class="uni-datetime-picker-popup" :class="[dateShow && timeShow ? '' : 'fix-nvue-height']"
+			:style="fixNvueBug">
+			<view class="uni-title">
+				<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
+			</view>
+			<view v-if="dateShow" class="uni-datetime-picker__container-box">
+				<picker-view class="uni-datetime-picker-view" :indicator-style="indicatorStyle" :value="ymd"
+					@change="bindDateChange">
+					<picker-view-column>
+						<view class="uni-datetime-picker-item" v-for="(item,index) in years" :key="index">
+							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column>
+						<view class="uni-datetime-picker-item" v-for="(item,index) in months" :key="index">
+							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column>
+						<view class="uni-datetime-picker-item" v-for="(item,index) in days" :key="index">
+							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
+						</view>
+					</picker-view-column>
+				</picker-view>
+				<!-- 兼容 nvue 不支持伪类 -->
+				<text class="uni-datetime-picker-sign sign-left">-</text>
+				<text class="uni-datetime-picker-sign sign-right">-</text>
+			</view>
+			<view v-if="timeShow" class="uni-datetime-picker__container-box">
+				<picker-view class="uni-datetime-picker-view" :class="[hideSecond ? 'time-hide-second' : '']"
+					:indicator-style="indicatorStyle" :value="hms" @change="bindTimeChange">
+					<picker-view-column>
+						<view class="uni-datetime-picker-item" v-for="(item,index) in hours" :key="index">
+							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column>
+						<view class="uni-datetime-picker-item" v-for="(item,index) in minutes" :key="index">
+							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column v-if="!hideSecond">
+						<view class="uni-datetime-picker-item" v-for="(item,index) in seconds" :key="index">
+							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
+						</view>
+					</picker-view-column>
+				</picker-view>
+				<!-- 兼容 nvue 不支持伪类 -->
+				<text class="uni-datetime-picker-sign" :class="[hideSecond ? 'sign-center' : 'sign-left']">:</text>
+				<text v-if="!hideSecond" class="uni-datetime-picker-sign sign-right">:</text>
+			</view>
+			<view class="uni-datetime-picker-btn">
+				<view @click="clearTime">
+					<text class="uni-datetime-picker-btn-text">{{clearText}}</text>
+				</view>
+				<view class="uni-datetime-picker-btn-group">
+					<view class="uni-datetime-picker-cancel" @click="tiggerTimePicker">
+						<text class="uni-datetime-picker-btn-text">{{cancelText}}</text>
+					</view>
+					<view @click="setTime">
+						<text class="uni-datetime-picker-btn-text">{{okText}}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import i18nMessages from './i18n/index.js'
+	const {
+		t
+	} = initVueI18n(i18nMessages)
+	import {
+		fixIosDateFormat
+	} from './util'
+
+	/**
+	 * DatetimePicker 时间选择器
+	 * @description 可以同时选择日期和时间的选择器
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
+	 * @property {String} type = [datetime | date | time] 显示模式
+	 * @property {Boolean} multiple = [true|false] 是否多选
+	 * @property {String|Number} value 默认值
+	 * @property {String|Number} start 起始日期或时间
+	 * @property {String|Number} end 起始日期或时间
+	 * @property {String} return-type = [timestamp | string]
+	 * @event {Function} change  选中发生变化触发
+	 */
+
+	export default {
+		name: 'UniDatetimePicker',
+		data() {
+			return {
+				indicatorStyle: `height: 50px;`,
+				visible: false,
+				fixNvueBug: {},
+				dateShow: true,
+				timeShow: true,
+				title: '日期和时间',
+				// 输入框当前时间
+				time: '',
+				// 当前的年月日时分秒
+				year: 1920,
+				month: 0,
+				day: 0,
+				hour: 0,
+				minute: 0,
+				second: 0,
+				// 起始时间
+				startYear: 1920,
+				startMonth: 1,
+				startDay: 1,
+				startHour: 0,
+				startMinute: 0,
+				startSecond: 0,
+				// 结束时间
+				endYear: 2120,
+				endMonth: 12,
+				endDay: 31,
+				endHour: 23,
+				endMinute: 59,
+				endSecond: 59,
+			}
+		},
+		options: {
+			// #ifdef MP-TOUTIAO
+			virtualHost: false,
+			// #endif
+			// #ifndef MP-TOUTIAO
+			virtualHost: true
+			// #endif
+		},
+		props: {
+			type: {
+				type: String,
+				default: 'datetime'
+			},
+			value: {
+				type: [String, Number],
+				default: ''
+			},
+			modelValue: {
+				type: [String, Number],
+				default: ''
+			},
+			start: {
+				type: [Number, String],
+				default: ''
+			},
+			end: {
+				type: [Number, String],
+				default: ''
+			},
+			returnType: {
+				type: String,
+				default: 'string'
+			},
+			disabled: {
+				type: [Boolean, String],
+				default: false
+			},
+			border: {
+				type: [Boolean, String],
+				default: true
+			},
+			hideSecond: {
+				type: [Boolean, String],
+				default: false
+			}
+		},
+		watch: {
+			// #ifndef VUE3
+			value: {
+				handler(newVal) {
+					if (newVal) {
+						this.parseValue(fixIosDateFormat(newVal))
+						this.initTime(false)
+					} else {
+						this.time = ''
+						this.parseValue(Date.now())
+					}
+				},
+				immediate: true
+			},
+			// #endif
+			// #ifdef VUE3
+			modelValue: {
+				handler(newVal) {
+					if (newVal) {
+						this.parseValue(fixIosDateFormat(newVal))
+						this.initTime(false)
+					} else {
+						this.time = ''
+						this.parseValue(Date.now())
+					}
+				},
+				immediate: true
+			},
+			// #endif
+			type: {
+				handler(newValue) {
+					if (newValue === 'date') {
+						this.dateShow = true
+						this.timeShow = false
+						this.title = '日期'
+					} else if (newValue === 'time') {
+						this.dateShow = false
+						this.timeShow = true
+						this.title = '时间'
+					} else {
+						this.dateShow = true
+						this.timeShow = true
+						this.title = '日期和时间'
+					}
+				},
+				immediate: true
+			},
+			start: {
+				handler(newVal) {
+					this.parseDatetimeRange(fixIosDateFormat(newVal), 'start')
+				},
+				immediate: true
+			},
+			end: {
+				handler(newVal) {
+					this.parseDatetimeRange(fixIosDateFormat(newVal), 'end')
+				},
+				immediate: true
+			},
+
+			// 月、日、时、分、秒可选范围变化后，检查当前值是否在范围内，不在则当前值重置为可选范围第一项
+			months(newVal) {
+				this.checkValue('month', this.month, newVal)
+			},
+			days(newVal) {
+				this.checkValue('day', this.day, newVal)
+			},
+			hours(newVal) {
+				this.checkValue('hour', this.hour, newVal)
+			},
+			minutes(newVal) {
+				this.checkValue('minute', this.minute, newVal)
+			},
+			seconds(newVal) {
+				this.checkValue('second', this.second, newVal)
+			}
+		},
+		computed: {
+			// 当前年、月、日、时、分、秒选择范围
+			years() {
+				return this.getCurrentRange('year')
+			},
+
+			months() {
+				return this.getCurrentRange('month')
+			},
+
+			days() {
+				return this.getCurrentRange('day')
+			},
+
+			hours() {
+				return this.getCurrentRange('hour')
+			},
+
+			minutes() {
+				return this.getCurrentRange('minute')
+			},
+
+			seconds() {
+				return this.getCurrentRange('second')
+			},
+
+			// picker 当前值数组
+			ymd() {
+				return [this.year - this.minYear, this.month - this.minMonth, this.day - this.minDay]
+			},
+			hms() {
+				return [this.hour - this.minHour, this.minute - this.minMinute, this.second - this.minSecond]
+			},
+
+			// 当前 date 是 start
+			currentDateIsStart() {
+				return this.year === this.startYear && this.month === this.startMonth && this.day === this.startDay
+			},
+
+			// 当前 date 是 end
+			currentDateIsEnd() {
+				return this.year === this.endYear && this.month === this.endMonth && this.day === this.endDay
+			},
+
+			// 当前年、月、日、时、分、秒的最小值和最大值
+			minYear() {
+				return this.startYear
+			},
+			maxYear() {
+				return this.endYear
+			},
+			minMonth() {
+				if (this.year === this.startYear) {
+					return this.startMonth
+				} else {
+					return 1
+				}
+			},
+			maxMonth() {
+				if (this.year === this.endYear) {
+					return this.endMonth
+				} else {
+					return 12
+				}
+			},
+			minDay() {
+				if (this.year === this.startYear && this.month === this.startMonth) {
+					return this.startDay
+				} else {
+					return 1
+				}
+			},
+			maxDay() {
+				if (this.year === this.endYear && this.month === this.endMonth) {
+					return this.endDay
+				} else {
+					return this.daysInMonth(this.year, this.month)
+				}
+			},
+			minHour() {
+				if (this.type === 'datetime') {
+					if (this.currentDateIsStart) {
+						return this.startHour
+					} else {
+						return 0
+					}
+				}
+				if (this.type === 'time') {
+					return this.startHour
+				}
+			},
+			maxHour() {
+				if (this.type === 'datetime') {
+					if (this.currentDateIsEnd) {
+						return this.endHour
+					} else {
+						return 23
+					}
+				}
+				if (this.type === 'time') {
+					return this.endHour
+				}
+			},
+			minMinute() {
+				if (this.type === 'datetime') {
+					if (this.currentDateIsStart && this.hour === this.startHour) {
+						return this.startMinute
+					} else {
+						return 0
+					}
+				}
+				if (this.type === 'time') {
+					if (this.hour === this.startHour) {
+						return this.startMinute
+					} else {
+						return 0
+					}
+				}
+			},
+			maxMinute() {
+				if (this.type === 'datetime') {
+					if (this.currentDateIsEnd && this.hour === this.endHour) {
+						return this.endMinute
+					} else {
+						return 59
+					}
+				}
+				if (this.type === 'time') {
+					if (this.hour === this.endHour) {
+						return this.endMinute
+					} else {
+						return 59
+					}
+				}
+			},
+			minSecond() {
+				if (this.type === 'datetime') {
+					if (this.currentDateIsStart && this.hour === this.startHour && this.minute === this.startMinute) {
+						return this.startSecond
+					} else {
+						return 0
+					}
+				}
+				if (this.type === 'time') {
+					if (this.hour === this.startHour && this.minute === this.startMinute) {
+						return this.startSecond
+					} else {
+						return 0
+					}
+				}
+			},
+			maxSecond() {
+				if (this.type === 'datetime') {
+					if (this.currentDateIsEnd && this.hour === this.endHour && this.minute === this.endMinute) {
+						return this.endSecond
+					} else {
+						return 59
+					}
+				}
+				if (this.type === 'time') {
+					if (this.hour === this.endHour && this.minute === this.endMinute) {
+						return this.endSecond
+					} else {
+						return 59
+					}
+				}
+			},
+
+			/**
+			 * for i18n
+			 */
+			selectTimeText() {
+				return t("uni-datetime-picker.selectTime")
+			},
+			okText() {
+				return t("uni-datetime-picker.ok")
+			},
+			clearText() {
+				return t("uni-datetime-picker.clear")
+			},
+			cancelText() {
+				return t("uni-datetime-picker.cancel")
+			}
+		},
+
+		mounted() {
+			// #ifdef APP-NVUE
+			const res = uni.getSystemInfoSync();
+			this.fixNvueBug = {
+				top: res.windowHeight / 2,
+				left: res.windowWidth / 2
+			}
+			// #endif
+		},
+
+		methods: {
+			/**
+			 * @param {Object} item
+			 * 小于 10 在前面加个 0
+			 */
+
+			lessThanTen(item) {
+				return item < 10 ? '0' + item : item
+			},
+
+			/**
+			 * 解析时分秒字符串，例如：00:00:00
+			 * @param {String} timeString
+			 */
+			parseTimeType(timeString) {
+				if (timeString) {
+					let timeArr = timeString.split(':')
+					this.hour = Number(timeArr[0])
+					this.minute = Number(timeArr[1])
+					this.second = Number(timeArr[2])
+				}
+			},
+
+			/**
+			 * 解析选择器初始值，类型可以是字符串、时间戳，例如：2000-10-02、'08:30:00'、 1610695109000
+			 * @param {String | Number} datetime
+			 */
+			initPickerValue(datetime) {
+				let defaultValue = null
+				if (datetime) {
+					defaultValue = this.compareValueWithStartAndEnd(datetime, this.start, this.end)
+				} else {
+					defaultValue = Date.now()
+					defaultValue = this.compareValueWithStartAndEnd(defaultValue, this.start, this.end)
+				}
+				this.parseValue(defaultValue)
+			},
+
+			/**
+			 * 初始值规则：
+			 * - 用户设置初始值 value
+			 * 	- 设置了起始时间 start、终止时间 end，并 start < value < end，初始值为 value， 否则初始值为 start
+			 * 	- 只设置了起始时间 start，并 start < value，初始值为 value，否则初始值为 start
+			 * 	- 只设置了终止时间 end，并 value < end，初始值为 value，否则初始值为 end
+			 * 	- 无起始终止时间，则初始值为 value
+			 * - 无初始值 value，则初始值为当前本地时间 Date.now()
+			 * @param {Object} value
+			 * @param {Object} dateBase
+			 */
+			compareValueWithStartAndEnd(value, start, end) {
+				let winner = null
+				value = this.superTimeStamp(value)
+				start = this.superTimeStamp(start)
+				end = this.superTimeStamp(end)
+
+				if (start && end) {
+					if (value < start) {
+						winner = new Date(start)
+					} else if (value > end) {
+						winner = new Date(end)
+					} else {
+						winner = new Date(value)
+					}
+				} else if (start && !end) {
+					winner = start <= value ? new Date(value) : new Date(start)
+				} else if (!start && end) {
+					winner = value <= end ? new Date(value) : new Date(end)
+				} else {
+					winner = new Date(value)
+				}
+
+				return winner
+			},
+
+			/**
+			 * 转换为可比较的时间戳，接受日期、时分秒、时间戳
+			 * @param {Object} value
+			 */
+			superTimeStamp(value) {
+				let dateBase = ''
+				if (this.type === 'time' && value && typeof value === 'string') {
+					const now = new Date()
+					const year = now.getFullYear()
+					const month = now.getMonth() + 1
+					const day = now.getDate()
+					dateBase = year + '/' + month + '/' + day + ' '
+				}
+				if (Number(value)) {
+					value = parseInt(value)
+					dateBase = 0
+				}
+				return this.createTimeStamp(dateBase + value)
+			},
+
+			/**
+			 * 解析默认值 value，字符串、时间戳
+			 * @param {Object} defaultTime
+			 */
+			parseValue(value) {
+				if (!value) {
+					return
+				}
+				if (this.type === 'time' && typeof value === "string") {
+					this.parseTimeType(value)
+				} else {
+					let defaultDate = null
+					defaultDate = new Date(value)
+					if (this.type !== 'time') {
+						this.year = defaultDate.getFullYear()
+						this.month = defaultDate.getMonth() + 1
+						this.day = defaultDate.getDate()
+					}
+					if (this.type !== 'date') {
+						this.hour = defaultDate.getHours()
+						this.minute = defaultDate.getMinutes()
+						this.second = defaultDate.getSeconds()
+					}
+				}
+				if (this.hideSecond) {
+					this.second = 0
+				}
+			},
+
+			/**
+			 * 解析可选择时间范围 start、end，年月日字符串、时间戳
+			 * @param {Object} defaultTime
+			 */
+			parseDatetimeRange(point, pointType) {
+				// 时间为空，则重置为初始值
+				if (!point) {
+					if (pointType === 'start') {
+						this.startYear = 1920
+						this.startMonth = 1
+						this.startDay = 1
+						this.startHour = 0
+						this.startMinute = 0
+						this.startSecond = 0
+					}
+					if (pointType === 'end') {
+						this.endYear = 2120
+						this.endMonth = 12
+						this.endDay = 31
+						this.endHour = 23
+						this.endMinute = 59
+						this.endSecond = 59
+					}
+					return
+				}
+				if (this.type === 'time') {
+					const pointArr = point.split(':')
+					this[pointType + 'Hour'] = Number(pointArr[0])
+					this[pointType + 'Minute'] = Number(pointArr[1])
+					this[pointType + 'Second'] = Number(pointArr[2])
+				} else {
+					if (!point) {
+						pointType === 'start' ? this.startYear = this.year - 60 : this.endYear = this.year + 60
+						return
+					}
+					if (Number(point)) {
+						point = parseInt(point)
+					}
+					// datetime 的 end 没有时分秒, 则不限制
+					const hasTime = /[0-9]:[0-9]/
+					if (this.type === 'datetime' && pointType === 'end' && typeof point === 'string' && !hasTime.test(
+							point)) {
+						point = point + ' 23:59:59'
+					}
+					const pointDate = new Date(point)
+					this[pointType + 'Year'] = pointDate.getFullYear()
+					this[pointType + 'Month'] = pointDate.getMonth() + 1
+					this[pointType + 'Day'] = pointDate.getDate()
+					if (this.type === 'datetime') {
+						this[pointType + 'Hour'] = pointDate.getHours()
+						this[pointType + 'Minute'] = pointDate.getMinutes()
+						this[pointType + 'Second'] = pointDate.getSeconds()
+					}
+				}
+			},
+
+			// 获取 年、月、日、时、分、秒 当前可选范围
+			getCurrentRange(value) {
+				const range = []
+				for (let i = this['min' + this.capitalize(value)]; i <= this['max' + this.capitalize(value)]; i++) {
+					range.push(i)
+				}
+				return range
+			},
+
+			// 字符串首字母大写
+			capitalize(str) {
+				return str.charAt(0).toUpperCase() + str.slice(1)
+			},
+
+			// 检查当前值是否在范围内，不在则当前值重置为可选范围第一项
+			checkValue(name, value, values) {
+				if (values.indexOf(value) === -1) {
+					this[name] = values[0]
+				}
+			},
+
+			// 每个月的实际天数
+			daysInMonth(year, month) { // Use 1 for January, 2 for February, etc.
+				return new Date(year, month, 0).getDate();
+			},
+
+			/**
+			 * 生成时间戳
+			 * @param {Object} time
+			 */
+			createTimeStamp(time) {
+				if (!time) return
+				if (typeof time === "number") {
+					return time
+				} else {
+					time = time.replace(/-/g, '/')
+					if (this.type === 'date') {
+						time = time + ' ' + '00:00:00'
+					}
+					return Date.parse(time)
+				}
+			},
+
+			/**
+			 * 生成日期或时间的字符串
+			 */
+			createDomSting() {
+				const yymmdd = this.year +
+					'-' +
+					this.lessThanTen(this.month) +
+					'-' +
+					this.lessThanTen(this.day)
+
+				let hhmmss = this.lessThanTen(this.hour) +
+					':' +
+					this.lessThanTen(this.minute)
+
+				if (!this.hideSecond) {
+					hhmmss = hhmmss + ':' + this.lessThanTen(this.second)
+				}
+
+				if (this.type === 'date') {
+					return yymmdd
+				} else if (this.type === 'time') {
+					return hhmmss
+				} else {
+					return yymmdd + ' ' + hhmmss
+				}
+			},
+
+			/**
+			 * 初始化返回值，并抛出 change 事件
+			 */
+			initTime(emit = true) {
+				this.time = this.createDomSting()
+				if (!emit) return
+				if (this.returnType === 'timestamp' && this.type !== 'time') {
+					this.$emit('change', this.createTimeStamp(this.time))
+					this.$emit('input', this.createTimeStamp(this.time))
+					this.$emit('update:modelValue', this.createTimeStamp(this.time))
+				} else {
+					this.$emit('change', this.time)
+					this.$emit('input', this.time)
+					this.$emit('update:modelValue', this.time)
+				}
+			},
+
+			/**
+			 * 用户选择日期或时间更新 data
+			 * @param {Object} e
+			 */
+			bindDateChange(e) {
+				const val = e.detail.value
+				this.year = this.years[val[0]]
+				this.month = this.months[val[1]]
+				this.day = this.days[val[2]]
+			},
+			bindTimeChange(e) {
+				const val = e.detail.value
+				this.hour = this.hours[val[0]]
+				this.minute = this.minutes[val[1]]
+				this.second = this.seconds[val[2]]
+			},
+
+			/**
+			 * 初始化弹出层
+			 */
+			initTimePicker() {
+				if (this.disabled) return
+				const value = fixIosDateFormat(this.time)
+				this.initPickerValue(value)
+				this.visible = !this.visible
+			},
+
+			/**
+			 * 触发或关闭弹框
+			 */
+			tiggerTimePicker(e) {
+				this.visible = !this.visible
+			},
+
+			/**
+			 * 用户点击“清空”按钮，清空当前值
+			 */
+			clearTime() {
+				this.time = ''
+				this.$emit('change', this.time)
+				this.$emit('input', this.time)
+				this.$emit('update:modelValue', this.time)
+				this.tiggerTimePicker()
+			},
+
+			/**
+			 * 用户点击“确定”按钮
+			 */
+			setTime() {
+				this.initTime()
+				this.tiggerTimePicker()
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	$uni-primary: #007aff !default;
+
+	.uni-datetime-picker {
+		/* #ifndef APP-NVUE */
+		/* width: 100%; */
+		/* #endif */
+	}
+
+	.uni-datetime-picker-view {
+		height: 130px;
+		width: 270px;
+		/* #ifndef APP-NVUE */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-datetime-picker-item {
+		height: 50px;
+		line-height: 50px;
+		text-align: center;
+		font-size: 14px;
+	}
+
+	.uni-datetime-picker-btn {
+		margin-top: 60px;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		cursor: pointer;
+		/* #endif */
+		flex-direction: row;
+		justify-content: space-between;
+	}
+
+	.uni-datetime-picker-btn-text {
+		font-size: 14px;
+		color: $uni-primary;
+	}
+
+	.uni-datetime-picker-btn-group {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-datetime-picker-cancel {
+		margin-right: 30px;
+	}
+
+	.uni-datetime-picker-mask {
+		position: fixed;
+		bottom: 0px;
+		top: 0px;
+		left: 0px;
+		right: 0px;
+		background-color: rgba(0, 0, 0, 0.4);
+		transition-duration: 0.3s;
+		z-index: 998;
+	}
+
+	.uni-datetime-picker-popup {
+		border-radius: 8px;
+		padding: 30px;
+		width: 270px;
+		/* #ifdef APP-NVUE */
+		height: 500px;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		width: 330px;
+		/* #endif */
+		background-color: #fff;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		transition-duration: 0.3s;
+		z-index: 999;
+	}
+
+	.fix-nvue-height {
+		/* #ifdef APP-NVUE */
+		height: 330px;
+		/* #endif */
+	}
+
+	.uni-datetime-picker-time {
+		color: grey;
+	}
+
+	.uni-datetime-picker-column {
+		height: 50px;
+	}
+
+	.uni-datetime-picker-timebox {
+
+		border: 1px solid #E5E5E5;
+		border-radius: 5px;
+		padding: 7px 10px;
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-datetime-picker-timebox-pointer {
+		/* #ifndef APP-NVUE */
+		cursor: pointer;
+		/* #endif */
+	}
+
+
+	.uni-datetime-picker-disabled {
+		opacity: 0.4;
+		/* #ifdef H5 */
+		cursor: not-allowed !important;
+		/* #endif */
+	}
+
+	.uni-datetime-picker-text {
+		font-size: 14px;
+		line-height: 50px
+	}
+
+	.uni-datetime-picker-sign {
+		position: absolute;
+		top: 53px;
+		/* 减掉 10px 的元素高度，兼容nvue */
+		color: #999;
+		/* #ifdef APP-NVUE */
+		font-size: 16px;
+		/* #endif */
+	}
+
+	.sign-left {
+		left: 86px;
+	}
+
+	.sign-right {
+		right: 86px;
+	}
+
+	.sign-center {
+		left: 135px;
+	}
+
+	.uni-datetime-picker__container-box {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-top: 40px;
+	}
+
+	.time-hide-second {
+		width: 180px;
+	}
+</style>
diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue
new file mode 100644
index 0000000..11fc45a
--- /dev/null
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue
@@ -0,0 +1,1057 @@
+<template>
+	<view class="uni-date">
+		<view class="uni-date-editor" @click="show">
+			<slot>
+				<view class="uni-date-editor--x"
+					:class="{'uni-date-editor--x__disabled': disabled,'uni-date-x--border': border}">
+					<view v-if="!isRange" class="uni-date-x uni-date-single">
+						<uni-icons class="icon-calendar" type="calendar" color="#c0c4cc" size="22"></uni-icons>
+						<view class="uni-date__x-input">{{ displayValue || singlePlaceholderText }}</view>
+					</view>
+
+					<view v-else class="uni-date-x uni-date-range">
+						<uni-icons class="icon-calendar" type="calendar" color="#c0c4cc" size="22"></uni-icons>
+						<view class="uni-date__x-input text-center">{{ displayRangeValue.startDate || startPlaceholderText }}</view>
+
+						<view class="range-separator">{{rangeSeparator}}</view>
+
+						<view class="uni-date__x-input text-center">{{ displayRangeValue.endDate || endPlaceholderText }}</view>
+					</view>
+
+					<view v-if="showClearIcon" class="uni-date__icon-clear" @click.stop="clear">
+						<uni-icons type="clear" color="#c0c4cc" size="22"></uni-icons>
+					</view>
+				</view>
+			</slot>
+		</view>
+
+		<view v-show="pickerVisible" class="uni-date-mask--pc" @click="close"></view>
+
+		<view v-if="!isPhone" v-show="pickerVisible" ref="datePicker" class="uni-date-picker__container">
+			<view v-if="!isRange" class="uni-date-single--x" :style="pickerPositionStyle">
+				<view class="uni-popper__arrow"></view>
+
+				<view v-if="hasTime" class="uni-date-changed popup-x-header">
+					<input class="uni-date__input text-center" type="text" v-model="inputDate" :placeholder="selectDateText" />
+
+					<time-picker type="time" v-model="pickerTime" :border="false" :disabled="!inputDate"
+						:start="timepickerStartTime" :end="timepickerEndTime" :hideSecond="hideSecond" style="width: 100%;">
+						<input class="uni-date__input text-center" type="text" v-model="pickerTime" :placeholder="selectTimeText"
+							:disabled="!inputDate" />
+					</time-picker>
+				</view>
+
+				<Calendar ref="pcSingle" :showMonth="false" :start-date="calendarRange.startDate"
+					:end-date="calendarRange.endDate" :date="calendarDate" @change="singleChange" :default-value="defaultValue"
+					style="padding: 0 8px;" />
+
+				<view v-if="hasTime" class="popup-x-footer">
+					<text class="confirm-text" @click="confirmSingleChange">{{okText}}</text>
+				</view>
+			</view>
+
+			<view v-else class="uni-date-range--x" :style="pickerPositionStyle">
+				<view class="uni-popper__arrow"></view>
+				<view v-if="hasTime" class="popup-x-header uni-date-changed">
+					<view class="popup-x-header--datetime">
+						<input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.startDate"
+							:placeholder="startDateText" />
+
+						<time-picker type="time" v-model="tempRange.startTime" :start="timepickerStartTime" :border="false"
+							:disabled="!tempRange.startDate" :hideSecond="hideSecond">
+							<input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.startTime"
+								:placeholder="startTimeText" :disabled="!tempRange.startDate" />
+						</time-picker>
+					</view>
+
+					<uni-icons type="arrowthinright" color="#999" style="line-height: 40px;"></uni-icons>
+
+					<view class="popup-x-header--datetime">
+						<input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.endDate"
+							:placeholder="endDateText" />
+
+						<time-picker type="time" v-model="tempRange.endTime" :end="timepickerEndTime" :border="false"
+							:disabled="!tempRange.endDate" :hideSecond="hideSecond">
+							<input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.endTime"
+								:placeholder="endTimeText" :disabled="!tempRange.endDate" />
+						</time-picker>
+					</view>
+				</view>
+
+				<view class="popup-x-body">
+					<Calendar ref="left" :showMonth="false" :start-date="calendarRange.startDate"
+						:end-date="calendarRange.endDate" :range="true" :pleStatus="endMultipleStatus" @change="leftChange"
+						@firstEnterCale="updateRightCale" style="padding: 0 8px;"/>
+					<Calendar ref="right" :showMonth="false" :start-date="calendarRange.startDate"
+						:end-date="calendarRange.endDate" :range="true" @change="rightChange" :pleStatus="startMultipleStatus"
+						@firstEnterCale="updateLeftCale" style="padding: 0 8px;border-left: 1px solid #F1F1F1;" />
+				</view>
+
+				<view v-if="hasTime" class="popup-x-footer">
+					<text @click="clear">{{clearText}}</text>
+					<text class="confirm-text" @click="confirmRangeChange">{{okText}}</text>
+				</view>
+			</view>
+		</view>
+
+		<Calendar v-if="isPhone" ref="mobile" :clearDate="false" :date="calendarDate" :defTime="mobileCalendarTime"
+			:start-date="calendarRange.startDate" :end-date="calendarRange.endDate" :selectableTimes="mobSelectableTime"
+			:startPlaceholder="startPlaceholder" :endPlaceholder="endPlaceholder" :default-value="defaultValue"
+			:pleStatus="endMultipleStatus" :showMonth="false" :range="isRange" :hasTime="hasTime" :insert="false"
+			:hideSecond="hideSecond" @confirm="mobileChange" @maskClose="close" @change="calendarClick"/>
+	</view>
+</template>
+<script>
+	/**
+	 * DatetimePicker 时间选择器
+	 * @description 同时支持 PC 和移动端使用日历选择日期和日期范围
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3962
+	 * @property {String} type 选择器类型
+	 * @property {String|Number|Array|Date} value 绑定值
+	 * @property {String} placeholder 单选择时的占位内容
+	 * @property {String} start 起始时间
+	 * @property {String} end 终止时间
+	 * @property {String} start-placeholder 范围选择时开始日期的占位内容
+	 * @property {String} end-placeholder 范围选择时结束日期的占位内容
+	 * @property {String} range-separator 选择范围时的分隔符
+	 * @property {Boolean} border = [true|false] 是否有边框
+	 * @property {Boolean} disabled = [true|false] 是否禁用
+	 * @property {Boolean} clearIcon = [true|false] 是否显示清除按钮（仅PC端适用）
+	 * @property {[String} defaultValue 选择器打开时默认显示的时间
+	 * @event {Function} change 确定日期时触发的事件
+	 * @event {Function} maskClick 点击遮罩层触发的事件
+	 * @event {Function} show 打开弹出层
+	 * @event {Function} close 关闭弹出层
+	 * @event {Function} clear 清除上次选中的状态和值
+	 **/
+	import Calendar from './calendar.vue'
+	import TimePicker from './time-picker.vue'
+	import {
+		initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import i18nMessages from './i18n/index.js'
+	import {
+		getDateTime,
+		getDate,
+		getTime,
+		getDefaultSecond,
+		dateCompare,
+		checkDate,
+		fixIosDateFormat
+	} from './util'
+
+	export default {
+		name: 'UniDatetimePicker',
+
+		options: {
+			// #ifdef MP-TOUTIAO
+			virtualHost: false,
+			// #endif
+			// #ifndef MP-TOUTIAO
+			virtualHost: true
+			// #endif
+		},
+		components: {
+			Calendar,
+			TimePicker
+		},
+		data() {
+			return {
+				isRange: false,
+				hasTime: false,
+				displayValue: '',
+				inputDate: '',
+				calendarDate: '',
+				pickerTime: '',
+				calendarRange: {
+					startDate: '',
+					startTime: '',
+					endDate: '',
+					endTime: ''
+				},
+				displayRangeValue: {
+					startDate: '',
+					endDate: '',
+				},
+				tempRange: {
+					startDate: '',
+					startTime: '',
+					endDate: '',
+					endTime: ''
+				},
+				// 左右日历同步数据
+				startMultipleStatus: {
+					before: '',
+					after: '',
+					data: [],
+					fulldate: ''
+				},
+				endMultipleStatus: {
+					before: '',
+					after: '',
+					data: [],
+					fulldate: ''
+				},
+				pickerVisible: false,
+				pickerPositionStyle: null,
+				isEmitValue: false,
+				isPhone: false,
+				isFirstShow: true,
+				i18nT: () => {}
+			}
+		},
+		props: {
+			type: {
+				type: String,
+				default: 'datetime'
+			},
+			value: {
+				type: [String, Number, Array, Date],
+				default: ''
+			},
+			modelValue: {
+				type: [String, Number, Array, Date],
+				default: ''
+			},
+			start: {
+				type: [Number, String],
+				default: ''
+			},
+			end: {
+				type: [Number, String],
+				default: ''
+			},
+			returnType: {
+				type: String,
+				default: 'string'
+			},
+			placeholder: {
+				type: String,
+				default: ''
+			},
+			startPlaceholder: {
+				type: String,
+				default: ''
+			},
+			endPlaceholder: {
+				type: String,
+				default: ''
+			},
+			rangeSeparator: {
+				type: String,
+				default: '-'
+			},
+			border: {
+				type: [Boolean],
+				default: true
+			},
+			disabled: {
+				type: [Boolean],
+				default: false
+			},
+			clearIcon: {
+				type: [Boolean],
+				default: true
+			},
+			hideSecond: {
+				type: [Boolean],
+				default: false
+			},
+			defaultValue: {
+				type: [String, Object, Array],
+				default: ''
+			}
+		},
+		watch: {
+			type: {
+				immediate: true,
+				handler(newVal) {
+					this.hasTime = newVal.indexOf('time') !== -1
+					this.isRange = newVal.indexOf('range') !== -1
+				}
+			},
+			// #ifndef VUE3
+			value: {
+				immediate: true,
+				handler(newVal) {
+					if (this.isEmitValue) {
+						this.isEmitValue = false
+						return
+					}
+					this.initPicker(newVal)
+				}
+			},
+			// #endif
+			// #ifdef VUE3
+			modelValue: {
+				immediate: true,
+				handler(newVal) {
+					if (this.isEmitValue) {
+						this.isEmitValue = false
+						return
+					}
+					this.initPicker(newVal)
+				}
+			},
+			// #endif
+			start: {
+				immediate: true,
+				handler(newVal) {
+					if (!newVal) return
+					this.calendarRange.startDate = getDate(newVal)
+					if (this.hasTime) {
+						this.calendarRange.startTime = getTime(newVal)
+					}
+				}
+			},
+			end: {
+				immediate: true,
+				handler(newVal) {
+					if (!newVal) return
+					this.calendarRange.endDate = getDate(newVal)
+					if (this.hasTime) {
+						this.calendarRange.endTime = getTime(newVal, this.hideSecond)
+					}
+				}
+			},
+		},
+		computed: {
+			timepickerStartTime() {
+				const activeDate = this.isRange ? this.tempRange.startDate : this.inputDate
+				return activeDate === this.calendarRange.startDate ? this.calendarRange.startTime : ''
+			},
+			timepickerEndTime() {
+				const activeDate = this.isRange ? this.tempRange.endDate : this.inputDate
+				return activeDate === this.calendarRange.endDate ? this.calendarRange.endTime : ''
+			},
+			mobileCalendarTime() {
+				const timeRange = {
+					start: this.tempRange.startTime,
+					end: this.tempRange.endTime
+				}
+				return this.isRange ? timeRange : this.pickerTime
+			},
+			mobSelectableTime() {
+				return {
+					start: this.calendarRange.startTime,
+					end: this.calendarRange.endTime
+				}
+			},
+			datePopupWidth() {
+				// todo
+				return this.isRange ? 653 : 301
+			},
+
+			/**
+			 * for i18n
+			 */
+			singlePlaceholderText() {
+				return this.placeholder || (this.type === 'date' ? this.selectDateText : this.selectDateTimeText)
+			},
+			startPlaceholderText() {
+				return this.startPlaceholder || this.startDateText
+			},
+			endPlaceholderText() {
+				return this.endPlaceholder || this.endDateText
+			},
+			selectDateText() {
+				return this.i18nT("uni-datetime-picker.selectDate")
+			},
+			selectDateTimeText() {
+				return this.i18nT("uni-datetime-picker.selectDateTime")
+			},
+			selectTimeText() {
+				return this.i18nT("uni-datetime-picker.selectTime")
+			},
+			startDateText() {
+				return this.startPlaceholder || this.i18nT("uni-datetime-picker.startDate")
+			},
+			startTimeText() {
+				return this.i18nT("uni-datetime-picker.startTime")
+			},
+			endDateText() {
+				return this.endPlaceholder || this.i18nT("uni-datetime-picker.endDate")
+			},
+			endTimeText() {
+				return this.i18nT("uni-datetime-picker.endTime")
+			},
+			okText() {
+				return this.i18nT("uni-datetime-picker.ok")
+			},
+			clearText() {
+				return this.i18nT("uni-datetime-picker.clear")
+			},
+			showClearIcon() {
+				return this.clearIcon && !this.disabled && (this.displayValue || (this.displayRangeValue.startDate && this
+					.displayRangeValue.endDate))
+			}
+		},
+		created() {
+			this.initI18nT()
+			this.platform()
+		},
+		methods: {
+			initI18nT() {
+				const vueI18n = initVueI18n(i18nMessages)
+				this.i18nT = vueI18n.t
+			},
+			initPicker(newVal) {
+				if ((!newVal && !this.defaultValue) || Array.isArray(newVal) && !newVal.length) {
+					this.$nextTick(() => {
+						this.clear(false)
+					})
+					return
+				}
+
+				if (!Array.isArray(newVal) && !this.isRange) {
+					if (newVal) {
+						this.displayValue = this.inputDate = this.calendarDate = getDate(newVal)
+						if (this.hasTime) {
+							this.pickerTime = getTime(newVal, this.hideSecond)
+							this.displayValue = `${this.displayValue} ${this.pickerTime}`
+						}
+					} else if (this.defaultValue) {
+						this.inputDate = this.calendarDate = getDate(this.defaultValue)
+						if (this.hasTime) {
+							this.pickerTime = getTime(this.defaultValue, this.hideSecond)
+						}
+					}
+				} else {
+					const [before, after] = newVal
+					if (!before && !after) return
+					const beforeDate = getDate(before)
+					const beforeTime = getTime(before, this.hideSecond)
+
+					const afterDate = getDate(after)
+					const afterTime = getTime(after, this.hideSecond)
+					const startDate = beforeDate
+					const endDate = afterDate
+					this.displayRangeValue.startDate = this.tempRange.startDate = startDate
+					this.displayRangeValue.endDate = this.tempRange.endDate = endDate
+
+					if (this.hasTime) {
+						this.displayRangeValue.startDate = `${beforeDate} ${beforeTime}`
+						this.displayRangeValue.endDate = `${afterDate} ${afterTime}`
+						this.tempRange.startTime = beforeTime
+						this.tempRange.endTime = afterTime
+					}
+					const defaultRange = {
+						before: beforeDate,
+						after: afterDate
+					}
+					this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, defaultRange, {
+						which: 'right'
+					})
+					this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, defaultRange, {
+						which: 'left'
+					})
+				}
+			},
+			updateLeftCale(e) {
+				const left = this.$refs.left
+				// 设置范围选
+				left.cale.setHoverMultiple(e.after)
+				left.setDate(this.$refs.left.nowDate.fullDate)
+			},
+			updateRightCale(e) {
+				const right = this.$refs.right
+				// 设置范围选
+				right.cale.setHoverMultiple(e.after)
+				right.setDate(this.$refs.right.nowDate.fullDate)
+			},
+			platform() {
+				if (typeof navigator !== "undefined") {
+					this.isPhone = navigator.userAgent.toLowerCase().indexOf('mobile') !== -1
+					return
+				}
+				const {
+					windowWidth
+				} = uni.getSystemInfoSync()
+				this.isPhone = windowWidth <= 500
+				this.windowWidth = windowWidth
+			},
+			show() {
+				this.$emit("show")
+				if (this.disabled) {
+					return
+				}
+				this.platform()
+				if (this.isPhone) {
+					setTimeout(() => {
+						this.$refs.mobile.open()
+					}, 0);
+					return
+				}
+				this.pickerPositionStyle = {
+					top: '10px'
+				}
+				const dateEditor = uni.createSelectorQuery().in(this).select(".uni-date-editor")
+				dateEditor.boundingClientRect(rect => {
+					if (this.windowWidth - rect.left < this.datePopupWidth) {
+						this.pickerPositionStyle.right = 0
+					}
+				}).exec()
+				setTimeout(() => {
+					this.pickerVisible = !this.pickerVisible
+					if (!this.isPhone && this.isRange && this.isFirstShow) {
+						this.isFirstShow = false
+						const {
+							startDate,
+							endDate
+						} = this.calendarRange
+						if (startDate && endDate) {
+							if (this.diffDate(startDate, endDate) < 30) {
+								this.$refs.right.changeMonth('pre')
+							}
+						} else {
+							// this.$refs.right.changeMonth('next')
+							if (this.isPhone) {
+								this.$refs.right.cale.lastHover = false;
+							}
+						}
+					}
+
+				}, 50)
+			},
+			close() {
+				setTimeout(() => {
+					this.pickerVisible = false
+					this.$emit('maskClick', this.value)
+					this.$refs.mobile && this.$refs.mobile.close()
+				}, 20)
+			},
+			setEmit(value) {
+				if (this.returnType === "timestamp" || this.returnType === "date") {
+					if (!Array.isArray(value)) {
+						if (!this.hasTime) {
+							value = value + ' ' + '00:00:00'
+						}
+						value = this.createTimestamp(value)
+						if (this.returnType === "date") {
+							value = new Date(value)
+						}
+					} else {
+						if (!this.hasTime) {
+							value[0] = value[0] + ' ' + '00:00:00'
+							value[1] = value[1] + ' ' + '00:00:00'
+						}
+						value[0] = this.createTimestamp(value[0])
+						value[1] = this.createTimestamp(value[1])
+						if (this.returnType === "date") {
+							value[0] = new Date(value[0])
+							value[1] = new Date(value[1])
+						}
+					}
+				}
+
+				this.$emit('update:modelValue', value)
+				this.$emit('input', value)
+				this.$emit('change', value)
+				this.isEmitValue = true
+			},
+			createTimestamp(date) {
+				date = fixIosDateFormat(date)
+				return Date.parse(new Date(date))
+			},
+			singleChange(e) {
+				this.calendarDate = this.inputDate = e.fulldate
+				if (this.hasTime) return
+				this.confirmSingleChange()
+			},
+			confirmSingleChange() {
+				if (!checkDate(this.inputDate)) {
+					const now = new Date()
+					this.calendarDate = this.inputDate = getDate(now)
+					this.pickerTime = getTime(now, this.hideSecond)
+				}
+
+				let startLaterInputDate = false
+				let startDate, startTime
+				if (this.start) {
+					let startString = this.start
+					if (typeof this.start === 'number') {
+						startString = getDateTime(this.start, this.hideSecond)
+					}
+					[startDate, startTime] = startString.split(' ')
+					if (this.start && !dateCompare(startDate, this.inputDate)) {
+						startLaterInputDate = true
+						this.inputDate = startDate
+					}
+				}
+
+				let endEarlierInputDate = false
+				let endDate, endTime
+				if (this.end) {
+					let endString = this.end
+					if (typeof this.end === 'number') {
+						endString = getDateTime(this.end, this.hideSecond)
+					}
+					[endDate, endTime] = endString.split(' ')
+					if (this.end && !dateCompare(this.inputDate, endDate)) {
+						endEarlierInputDate = true
+						this.inputDate = endDate
+					}
+				}
+				if (this.hasTime) {
+					if (startLaterInputDate) {
+						this.pickerTime = startTime || getDefaultSecond(this.hideSecond)
+					}
+					if (endEarlierInputDate) {
+						this.pickerTime = endTime || getDefaultSecond(this.hideSecond)
+					}
+					if (!this.pickerTime) {
+						this.pickerTime = getTime(Date.now(), this.hideSecond)
+					}
+					this.displayValue = `${this.inputDate} ${this.pickerTime}`
+				} else {
+					this.displayValue = this.inputDate
+				}
+				this.setEmit(this.displayValue)
+				this.pickerVisible = false
+			},
+			leftChange(e) {
+				const {
+					before,
+					after
+				} = e.range
+				this.rangeChange(before, after)
+				const obj = {
+					before: e.range.before,
+					after: e.range.after,
+					data: e.range.data,
+					fulldate: e.fulldate
+				}
+				this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, obj)
+				this.$emit('calendarClick', e)
+			},
+			rightChange(e) {
+				const {
+					before,
+					after
+				} = e.range
+				this.rangeChange(before, after)
+				const obj = {
+					before: e.range.before,
+					after: e.range.after,
+					data: e.range.data,
+					fulldate: e.fulldate
+				}
+				this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, obj)
+				this.$emit('calendarClick', e)
+			},
+			mobileChange(e) {
+				if (this.isRange) {
+					const {
+						before,
+						after
+					} = e.range
+					if (!before) {
+						return;
+					}
+
+					this.handleStartAndEnd(before, after, true)
+					if (this.hasTime) {
+						const {
+							startTime,
+							endTime
+						} = e.timeRange
+						this.tempRange.startTime = startTime
+						this.tempRange.endTime = endTime
+					}
+					this.confirmRangeChange()
+				} else {
+					if (this.hasTime) {
+						this.displayValue = e.fulldate + ' ' + e.time
+					} else {
+						this.displayValue = e.fulldate
+					}
+					this.setEmit(this.displayValue)
+				}
+				this.$refs.mobile.close()
+			},
+			rangeChange(before, after) {
+				if (!(before && after)) return
+				this.handleStartAndEnd(before, after, true)
+				if (this.hasTime) return
+				this.confirmRangeChange()
+			},
+			confirmRangeChange() {
+				if (!this.tempRange.startDate || !this.tempRange.endDate) {
+					this.pickerVisible = false
+					return
+				}
+				if (!checkDate(this.tempRange.startDate)) {
+					this.tempRange.startDate = getDate(Date.now())
+				}
+				if (!checkDate(this.tempRange.endDate)) {
+					this.tempRange.endDate = getDate(Date.now())
+				}
+
+				let start, end
+
+				let startDateLaterRangeStartDate = false
+				let startDateLaterRangeEndDate = false
+				let startDate, startTime
+				if (this.start) {
+					let startString = this.start
+					if (typeof this.start === 'number') {
+						startString = getDateTime(this.start, this.hideSecond)
+					}
+					[startDate, startTime] = startString.split(' ')
+					if (this.start && !dateCompare(this.start, this.tempRange.startDate)) {
+						startDateLaterRangeStartDate = true
+						this.tempRange.startDate = startDate
+					}
+					if (this.start && !dateCompare(this.start, this.tempRange.endDate)) {
+						startDateLaterRangeEndDate = true
+						this.tempRange.endDate = startDate
+					}
+				}
+				let endDateEarlierRangeStartDate = false
+				let endDateEarlierRangeEndDate = false
+				let endDate, endTime
+				if (this.end) {
+					let endString = this.end
+					if (typeof this.end === 'number') {
+						endString = getDateTime(this.end, this.hideSecond)
+					}
+					[endDate, endTime] = endString.split(' ')
+
+					if (this.end && !dateCompare(this.tempRange.startDate, this.end)) {
+						endDateEarlierRangeStartDate = true
+						this.tempRange.startDate = endDate
+					}
+					if (this.end && !dateCompare(this.tempRange.endDate, this.end)) {
+						endDateEarlierRangeEndDate = true
+						this.tempRange.endDate = endDate
+					}
+				}
+				if (!this.hasTime) {
+					start = this.displayRangeValue.startDate = this.tempRange.startDate
+					end = this.displayRangeValue.endDate = this.tempRange.endDate
+				} else {
+					if (startDateLaterRangeStartDate) {
+						this.tempRange.startTime = startTime || getDefaultSecond(this.hideSecond)
+					} else if (endDateEarlierRangeStartDate) {
+						this.tempRange.startTime = endTime || getDefaultSecond(this.hideSecond)
+					}
+					if (!this.tempRange.startTime) {
+						this.tempRange.startTime = getTime(Date.now(), this.hideSecond)
+					}
+
+					if (startDateLaterRangeEndDate) {
+						this.tempRange.endTime = startTime || getDefaultSecond(this.hideSecond)
+					} else if (endDateEarlierRangeEndDate) {
+						this.tempRange.endTime = endTime || getDefaultSecond(this.hideSecond)
+					}
+					if (!this.tempRange.endTime) {
+						this.tempRange.endTime = getTime(Date.now(), this.hideSecond)
+					}
+					start = this.displayRangeValue.startDate = `${this.tempRange.startDate} ${this.tempRange.startTime}`
+					end = this.displayRangeValue.endDate = `${this.tempRange.endDate} ${this.tempRange.endTime}`
+				}
+				if (!dateCompare(start, end)) {
+					[start, end] = [end, start]
+				}
+				this.displayRangeValue.startDate = start
+				this.displayRangeValue.endDate = end
+				const displayRange = [start, end]
+				this.setEmit(displayRange)
+				this.pickerVisible = false
+			},
+			handleStartAndEnd(before, after, temp = false) {
+				if (!before) return
+				if (!after) after = before;
+				const type = temp ? 'tempRange' : 'range'
+				const isStartEarlierEnd = dateCompare(before, after)
+				this[type].startDate = isStartEarlierEnd ? before : after
+				this[type].endDate = isStartEarlierEnd ? after : before
+			},
+			/**
+			 * 比较时间大小
+			 */
+			dateCompare(startDate, endDate) {
+				// 计算截止时间
+				startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
+				// 计算详细项的截止时间
+				endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
+				return startDate <= endDate
+			},
+
+			/**
+			 * 比较时间差
+			 */
+			diffDate(startDate, endDate) {
+				// 计算截止时间
+				startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
+				// 计算详细项的截止时间
+				endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
+				const diff = (endDate - startDate) / (24 * 60 * 60 * 1000)
+				return Math.abs(diff)
+			},
+
+			clear(needEmit = true) {
+				if (!this.isRange) {
+					this.displayValue = ''
+					this.inputDate = ''
+					this.pickerTime = ''
+					if (this.isPhone) {
+						this.$refs.mobile && this.$refs.mobile.clearCalender()
+					} else {
+						this.$refs.pcSingle && this.$refs.pcSingle.clearCalender()
+					}
+					if (needEmit) {
+						this.$emit('change', '')
+						this.$emit('input', '')
+						this.$emit('update:modelValue', '')
+					}
+				} else {
+					this.displayRangeValue.startDate = ''
+					this.displayRangeValue.endDate = ''
+					this.tempRange.startDate = ''
+					this.tempRange.startTime = ''
+					this.tempRange.endDate = ''
+					this.tempRange.endTime = ''
+					if (this.isPhone) {
+						this.$refs.mobile && this.$refs.mobile.clearCalender()
+					} else {
+						this.$refs.left && this.$refs.left.clearCalender()
+						this.$refs.right && this.$refs.right.clearCalender()
+						this.$refs.right && this.$refs.right.changeMonth('next')
+					}
+					if (needEmit) {
+						this.$emit('change', [])
+						this.$emit('input', [])
+						this.$emit('update:modelValue', [])
+					}
+				}
+			},
+
+			calendarClick(e) {
+				this.$emit('calendarClick', e)
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	$uni-primary: #007aff !default;
+
+	.uni-date {
+		width: 100%;
+		flex: 1;
+	}
+
+	.uni-date-x {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		border-radius: 4px;
+		background-color: #fff;
+		color: #666;
+		font-size: 14px;
+		flex: 1;
+
+		.icon-calendar {
+			padding-left: 3px;
+		}
+
+		.range-separator {
+			height: 35px;
+			/* #ifndef MP */
+			padding: 0 2px;
+			/* #endif */
+			line-height: 35px;
+		}
+	}
+
+	.uni-date-x--border {
+		box-sizing: border-box;
+		border-radius: 4px;
+		border: 1px solid #e5e5e5;
+	}
+
+	.uni-date-editor--x {
+		display: flex;
+		align-items: center;
+		position: relative;
+	}
+
+	.uni-date-editor--x .uni-date__icon-clear {
+		padding-right: 3px;
+		display: flex;
+		align-items: center;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-date__x-input {
+		width: auto;
+		height: 35px;
+		/* #ifndef MP */
+		padding-left: 5px;
+		/* #endif */
+		position: relative;
+		flex: 1;
+		line-height: 35px;
+		font-size: 14px;
+		overflow: hidden;
+	}
+
+	.text-center {
+		text-align: center;
+	}
+
+	.uni-date__input {
+		height: 40px;
+		width: 100%;
+		line-height: 40px;
+		font-size: 14px;
+	}
+
+	.uni-date-range__input {
+		text-align: center;
+		max-width: 142px;
+	}
+
+	.uni-date-picker__container {
+		position: relative;
+	}
+
+	.uni-date-mask--pc {
+		position: fixed;
+		bottom: 0px;
+		top: 0px;
+		left: 0px;
+		right: 0px;
+		background-color: rgba(0, 0, 0, 0);
+		transition-duration: 0.3s;
+		z-index: 996;
+	}
+
+	.uni-date-single--x {
+		background-color: #fff;
+		position: absolute;
+		top: 0;
+		z-index: 999;
+		border: 1px solid #EBEEF5;
+		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+		border-radius: 4px;
+	}
+
+	.uni-date-range--x {
+		background-color: #fff;
+		position: absolute;
+		top: 0;
+		z-index: 999;
+		border: 1px solid #EBEEF5;
+		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+		border-radius: 4px;
+	}
+
+	.uni-date-editor--x__disabled {
+		opacity: 0.4;
+		cursor: default;
+	}
+
+	.uni-date-editor--logo {
+		width: 16px;
+		height: 16px;
+		vertical-align: middle;
+	}
+
+	/* 添加时间 */
+	.popup-x-header {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.popup-x-header--datetime {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		flex: 1;
+	}
+
+	.popup-x-body {
+		display: flex;
+	}
+
+	.popup-x-footer {
+		padding: 0 15px;
+		border-top-color: #F1F1F1;
+		border-top-style: solid;
+		border-top-width: 1px;
+		line-height: 40px;
+		text-align: right;
+		color: #666;
+	}
+
+	.popup-x-footer text:hover {
+		color: $uni-primary;
+		cursor: pointer;
+		opacity: 0.8;
+	}
+
+	.popup-x-footer .confirm-text {
+		margin-left: 20px;
+		color: $uni-primary;
+	}
+
+	.uni-date-changed {
+		text-align: center;
+		color: #333;
+		border-bottom-color: #F1F1F1;
+		border-bottom-style: solid;
+		border-bottom-width: 1px;
+	}
+
+	.uni-date-changed--time text {
+		height: 50px;
+		line-height: 50px;
+	}
+
+	.uni-date-changed .uni-date-changed--time {
+		flex: 1;
+	}
+
+	.uni-date-changed--time-date {
+		color: #333;
+		opacity: 0.6;
+	}
+
+	.mr-50 {
+		margin-right: 50px;
+	}
+
+	/* picker 弹出层通用的指示小三角, todo：扩展至上下左右方向定位 */
+	.uni-popper__arrow,
+	.uni-popper__arrow::after {
+		position: absolute;
+		display: block;
+		width: 0;
+		height: 0;
+		border: 6px solid transparent;
+		border-top-width: 0;
+	}
+
+	.uni-popper__arrow {
+		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
+		top: -6px;
+		left: 10%;
+		margin-right: 3px;
+		border-bottom-color: #EBEEF5;
+	}
+
+	.uni-popper__arrow::after {
+		content: " ";
+		top: 1px;
+		margin-left: -6px;
+		border-bottom-color: #fff;
+	}
+</style>
diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js
new file mode 100644
index 0000000..01802fa
--- /dev/null
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js
@@ -0,0 +1,421 @@
+class Calendar {
+	constructor({
+		selected,
+		startDate,
+		endDate,
+		range,
+	} = {}) {
+		// 当前日期
+		this.date = this.getDateObj(new Date()) // 当前初入日期
+		// 打点信息
+		this.selected = selected || [];
+		// 起始时间
+		this.startDate = startDate
+		// 终止时间
+		this.endDate = endDate
+		// 是否范围选择
+		this.range = range
+		// 多选状态
+		this.cleanMultipleStatus()
+		// 每周日期
+		this.weeks = {}
+		this.lastHover = false
+	}
+	/**
+	 * 设置日期
+	 * @param {Object} date
+	 */
+	setDate(date) {
+		const selectDate = this.getDateObj(date)
+		this.getWeeks(selectDate.fullDate)
+	}
+
+	/**
+	 * 清理多选状态
+	 */
+	cleanMultipleStatus() {
+		this.multipleStatus = {
+			before: '',
+			after: '',
+			data: []
+		}
+	}
+
+	setStartDate(startDate) {
+		this.startDate = startDate
+	}
+
+	setEndDate(endDate) {
+		this.endDate = endDate
+	}
+
+	getPreMonthObj(date) {
+		date = fixIosDateFormat(date)
+		date = new Date(date)
+
+		const oldMonth = date.getMonth()
+		date.setMonth(oldMonth - 1)
+		const newMonth = date.getMonth()
+		if (oldMonth !== 0 && newMonth - oldMonth === 0) {
+			date.setMonth(newMonth - 1)
+		}
+		return this.getDateObj(date)
+	}
+	getNextMonthObj(date) {
+		date = fixIosDateFormat(date)
+		date = new Date(date)
+
+		const oldMonth = date.getMonth()
+		date.setMonth(oldMonth + 1)
+		const newMonth = date.getMonth()
+		if (newMonth - oldMonth > 1) {
+			date.setMonth(newMonth - 1)
+		}
+		return this.getDateObj(date)
+	}
+
+	/**
+	 * 获取指定格式Date对象
+	 */
+	getDateObj(date) {
+		date = fixIosDateFormat(date)
+		date = new Date(date)
+
+		return {
+			fullDate: getDate(date),
+			year: date.getFullYear(),
+			month: addZero(date.getMonth() + 1),
+			date: addZero(date.getDate()),
+			day: date.getDay()
+		}
+	}
+
+	/**
+	 * 获取上一个月日期集合
+	 */
+	getPreMonthDays(amount, dateObj) {
+		const result = []
+		for (let i = amount - 1; i >= 0; i--) {
+			const month = dateObj.month - 1
+			result.push({
+				date: new Date(dateObj.year, month, -i).getDate(),
+				month,
+				disable: true
+			})
+		}
+		return result
+	}
+	/**
+	 * 获取本月日期集合
+	 */
+	getCurrentMonthDays(amount, dateObj) {
+		const result = []
+		const fullDate = this.date.fullDate
+		for (let i = 1; i <= amount; i++) {
+			const currentDate = `${dateObj.year}-${dateObj.month}-${addZero(i)}`
+			const isToday = fullDate === currentDate
+			// 获取打点信息
+			const info = this.selected && this.selected.find((item) => {
+				if (this.dateEqual(currentDate, item.date)) {
+					return item
+				}
+			})
+
+			// 日期禁用
+			let disableBefore = true
+			let disableAfter = true
+			if (this.startDate) {
+				disableBefore = dateCompare(this.startDate, currentDate)
+			}
+
+			if (this.endDate) {
+				disableAfter = dateCompare(currentDate, this.endDate)
+			}
+
+			let multiples = this.multipleStatus.data
+			let multiplesStatus = -1
+			if (this.range && multiples) {
+				multiplesStatus = multiples.findIndex((item) => {
+					return this.dateEqual(item, currentDate)
+				})
+			}
+			const checked = multiplesStatus !== -1
+
+			result.push({
+				fullDate: currentDate,
+				year: dateObj.year,
+				date: i,
+				multiple: this.range ? checked : false,
+				beforeMultiple: this.isLogicBefore(currentDate, this.multipleStatus.before, this.multipleStatus.after),
+				afterMultiple: this.isLogicAfter(currentDate, this.multipleStatus.before, this.multipleStatus.after),
+				month: dateObj.month,
+				disable: (this.startDate && !dateCompare(this.startDate, currentDate)) || (this.endDate && !dateCompare(
+					currentDate, this.endDate)),
+				isToday,
+				userChecked: false,
+				extraInfo: info
+			})
+		}
+		return result
+	}
+	/**
+	 * 获取下一个月日期集合
+	 */
+	_getNextMonthDays(amount, dateObj) {
+		const result = []
+		const month = dateObj.month + 1
+		for (let i = 1; i <= amount; i++) {
+			result.push({
+				date: i,
+				month,
+				disable: true
+			})
+		}
+		return result
+	}
+
+	/**
+	 * 获取当前日期详情
+	 * @param {Object} date
+	 */
+	getInfo(date) {
+		if (!date) {
+			date = new Date()
+		}
+
+		return this.calendar.find(item => item.fullDate === this.getDateObj(date).fullDate)
+	}
+
+	/**
+	 * 比较时间是否相等
+	 */
+	dateEqual(before, after) {
+		before = new Date(fixIosDateFormat(before))
+		after = new Date(fixIosDateFormat(after))
+		return before.valueOf() === after.valueOf()
+	}
+
+	/**
+	 *  比较真实起始日期
+	 */
+
+	isLogicBefore(currentDate, before, after) {
+		let logicBefore = before
+		if (before && after) {
+			logicBefore = dateCompare(before, after) ? before : after
+		}
+		return this.dateEqual(logicBefore, currentDate)
+	}
+
+	isLogicAfter(currentDate, before, after) {
+		let logicAfter = after
+		if (before && after) {
+			logicAfter = dateCompare(before, after) ? after : before
+		}
+		return this.dateEqual(logicAfter, currentDate)
+	}
+
+	/**
+	 * 获取日期范围内所有日期
+	 * @param {Object} begin
+	 * @param {Object} end
+	 */
+	geDateAll(begin, end) {
+		var arr = []
+		var ab = begin.split('-')
+		var ae = end.split('-')
+		var db = new Date()
+		db.setFullYear(ab[0], ab[1] - 1, ab[2])
+		var de = new Date()
+		de.setFullYear(ae[0], ae[1] - 1, ae[2])
+		var unixDb = db.getTime() - 24 * 60 * 60 * 1000
+		var unixDe = de.getTime() - 24 * 60 * 60 * 1000
+		for (var k = unixDb; k <= unixDe;) {
+			k = k + 24 * 60 * 60 * 1000
+			arr.push(this.getDateObj(new Date(parseInt(k))).fullDate)
+		}
+		return arr
+	}
+
+	/**
+	 *  获取多选状态
+	 */
+	setMultiple(fullDate) {
+		if (!this.range) return
+
+		let {
+			before,
+			after
+		} = this.multipleStatus
+		if (before && after) {
+			if (!this.lastHover) {
+				this.lastHover = true
+				return
+			}
+			this.multipleStatus.before = fullDate
+			this.multipleStatus.after = ''
+			this.multipleStatus.data = []
+			this.multipleStatus.fulldate = ''
+			this.lastHover = false
+		} else {
+			if (!before) {
+				this.multipleStatus.before = fullDate
+				this.multipleStatus.after = undefined;
+				this.lastHover = false
+			} else {
+				this.multipleStatus.after = fullDate
+				if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
+					this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus
+						.after);
+				} else {
+					this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus
+						.before);
+				}
+				this.lastHover = true
+			}
+		}
+		this.getWeeks(fullDate)
+	}
+
+	/**
+	 *  鼠标 hover 更新多选状态
+	 */
+	setHoverMultiple(fullDate) {
+		//抖音小程序点击会触发hover事件，需要避免一下
+		// #ifndef MP-TOUTIAO
+		if (!this.range || this.lastHover) return
+		const {
+			before
+		} = this.multipleStatus
+
+		if (!before) {
+			this.multipleStatus.before = fullDate
+		} else {
+			this.multipleStatus.after = fullDate
+			if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
+				this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
+			} else {
+				this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
+			}
+		}
+		this.getWeeks(fullDate)
+		// #endif
+
+	}
+
+	/**
+	 * 更新默认值多选状态
+	 */
+	setDefaultMultiple(before, after) {
+		this.multipleStatus.before = before
+		this.multipleStatus.after = after
+		if (before && after) {
+			if (dateCompare(before, after)) {
+				this.multipleStatus.data = this.geDateAll(before, after);
+				this.getWeeks(after)
+			} else {
+				this.multipleStatus.data = this.geDateAll(after, before);
+				this.getWeeks(before)
+			}
+		}
+	}
+
+	/**
+	 * 获取每周数据
+	 * @param {Object} dateData
+	 */
+	getWeeks(dateData) {
+		const {
+			year,
+			month,
+		} = this.getDateObj(dateData)
+
+		const preMonthDayAmount = new Date(year, month - 1, 1).getDay()
+		const preMonthDays = this.getPreMonthDays(preMonthDayAmount, this.getDateObj(dateData))
+
+		const currentMonthDayAmount = new Date(year, month, 0).getDate()
+		const currentMonthDays = this.getCurrentMonthDays(currentMonthDayAmount, this.getDateObj(dateData))
+
+		const nextMonthDayAmount = 42 - preMonthDayAmount - currentMonthDayAmount
+		const nextMonthDays = this._getNextMonthDays(nextMonthDayAmount, this.getDateObj(dateData))
+
+		const calendarDays = [...preMonthDays, ...currentMonthDays, ...nextMonthDays]
+
+		const weeks = new Array(6)
+		for (let i = 0; i < calendarDays.length; i++) {
+			const index = Math.floor(i / 7)
+			if (!weeks[index]) {
+				weeks[index] = new Array(7)
+			}
+			weeks[index][i % 7] = calendarDays[i]
+		}
+
+		this.calendar = calendarDays
+		this.weeks = weeks
+	}
+}
+
+function getDateTime(date, hideSecond) {
+	return `${getDate(date)} ${getTime(date, hideSecond)}`
+}
+
+function getDate(date) {
+	date = fixIosDateFormat(date)
+	date = new Date(date)
+	const year = date.getFullYear()
+	const month = date.getMonth() + 1
+	const day = date.getDate()
+	return `${year}-${addZero(month)}-${addZero(day)}`
+}
+
+function getTime(date, hideSecond) {
+	date = fixIosDateFormat(date)
+	date = new Date(date)
+	const hour = date.getHours()
+	const minute = date.getMinutes()
+	const second = date.getSeconds()
+	return hideSecond ? `${addZero(hour)}:${addZero(minute)}` : `${addZero(hour)}:${addZero(minute)}:${addZero(second)}`
+}
+
+function addZero(num) {
+	if (num < 10) {
+		num = `0${num}`
+	}
+	return num
+}
+
+function getDefaultSecond(hideSecond) {
+	return hideSecond ? '00:00' : '00:00:00'
+}
+
+function dateCompare(startDate, endDate) {
+	startDate = new Date(fixIosDateFormat(startDate))
+	endDate = new Date(fixIosDateFormat(endDate))
+	return startDate <= endDate
+}
+
+function checkDate(date) {
+	const dateReg = /((19|20)\d{2})(-|\/)\d{1,2}(-|\/)\d{1,2}/g
+	return date.match(dateReg)
+}
+//ios低版本15及以下，无法匹配 没有 ’秒‘ 时的情况，所以需要在末尾 秒 加上 问号
+const dateTimeReg = /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])( [0-5]?[0-9]:[0-5]?[0-9](:[0-5]?[0-9])?)?$/;
+
+function fixIosDateFormat(value) {
+	if (typeof value === 'string' && dateTimeReg.test(value)) {
+		value = value.replace(/-/g, '/')
+	}
+	return value
+}
+
+export {
+	Calendar,
+	getDateTime,
+	getDate,
+	getTime,
+	addZero,
+	getDefaultSecond,
+	dateCompare,
+	checkDate,
+	fixIosDateFormat
+}
diff --git a/uni_modules/uni-datetime-picker/package.json b/uni_modules/uni-datetime-picker/package.json
new file mode 100644
index 0000000..4d1b05c
--- /dev/null
+++ b/uni_modules/uni-datetime-picker/package.json
@@ -0,0 +1,88 @@
+{
+  "id": "uni-datetime-picker",
+  "displayName": "uni-datetime-picker 日期选择器",
+  "version": "2.2.34",
+  "description": "uni-datetime-picker 日期时间选择器，支持日历，支持范围选择",
+  "keywords": [
+    "uni-datetime-picker",
+    "uni-ui",
+    "uniui",
+    "日期时间选择器",
+    "日期时间"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+			"uni-icons"
+		],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "n"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "n"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/uni_modules/uni-datetime-picker/readme.md b/uni_modules/uni-datetime-picker/readme.md
new file mode 100644
index 0000000..162fbef
--- /dev/null
+++ b/uni_modules/uni-datetime-picker/readme.md
@@ -0,0 +1,21 @@
+
+
+> `重要通知：组件升级更新 2.0.0 后，支持日期+时间范围选择，组件 ui 将使用日历选择日期，ui 变化较大，同时支持 PC 和 移动端。此版本不向后兼容，不再支持单独的时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）。若仍需使用旧版本，可在插件市场下载*非uni_modules版本*，旧版本将不再维护`
+
+## DatetimePicker 时间选择器
+
+> **组件名：uni-datetime-picker**
+> 代码块： `uDatetimePicker`
+
+
+该组件的优势是，支持**时间戳**输入和输出（起始时间、终止时间也支持时间戳），可**同时选择**日期和时间。
+
+若只是需要单独选择日期和时间，不需要时间戳输入和输出，可使用原生的 picker 组件。
+
+**_点击 picker 默认值规则：_**
+
+- 若设置初始值 value, 会显示在 picker 显示框中
+- 若无初始值 value，则初始值 value 为当前本地时间 Date.now()， 但不会显示在 picker 显示框中
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/uni_modules/uni-drawer/changelog.md b/uni_modules/uni-drawer/changelog.md
new file mode 100644
index 0000000..6d2488c
--- /dev/null
+++ b/uni_modules/uni-drawer/changelog.md
@@ -0,0 +1,13 @@
+## 1.2.1（2021-11-22）
+- 修复 vue3中个别scss变量无法找到的问题
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-drawer](https://uniapp.dcloud.io/component/uniui/uni-drawer)
+## 1.1.1（2021-07-30）
+- 优化 vue3下事件警告的问题
+## 1.1.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.7（2021-05-12）
+- 新增 组件示例地址
+## 1.0.6（2021-02-04）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-drawer/components/uni-drawer/keypress.js b/uni_modules/uni-drawer/components/uni-drawer/keypress.js
new file mode 100644
index 0000000..62dda46
--- /dev/null
+++ b/uni_modules/uni-drawer/components/uni-drawer/keypress.js
@@ -0,0 +1,45 @@
+// #ifdef H5
+export default {
+  name: 'Keypress',
+  props: {
+    disable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    const keyNames = {
+      esc: ['Esc', 'Escape'],
+      tab: 'Tab',
+      enter: 'Enter',
+      space: [' ', 'Spacebar'],
+      up: ['Up', 'ArrowUp'],
+      left: ['Left', 'ArrowLeft'],
+      right: ['Right', 'ArrowRight'],
+      down: ['Down', 'ArrowDown'],
+      delete: ['Backspace', 'Delete', 'Del']
+    }
+    const listener = ($event) => {
+      if (this.disable) {
+        return
+      }
+      const keyName = Object.keys(keyNames).find(key => {
+        const keyName = $event.key
+        const value = keyNames[key]
+        return value === keyName || (Array.isArray(value) && value.includes(keyName))
+      })
+      if (keyName) {
+        // 避免和其他按键事件冲突
+        setTimeout(() => {
+          this.$emit(keyName, {})
+        }, 0)
+      }
+    }
+    document.addEventListener('keyup', listener)
+    // this.$once('hook:beforeDestroy', () => {
+    //   document.removeEventListener('keyup', listener)
+    // })
+  },
+	render: () => {}
+}
+// #endif
diff --git a/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue b/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue
new file mode 100644
index 0000000..2471521
--- /dev/null
+++ b/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue
@@ -0,0 +1,183 @@
+<template>
+	<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear">
+		<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" />
+		<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth+'px'}">
+			<slot />
+		</view>
+		<!-- #ifdef H5 -->
+		<keypress @esc="close('mask')" />
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+	// #ifdef H5
+	import keypress from './keypress.js'
+	// #endif
+	/**
+	 * Drawer 抽屉
+	 * @description 抽屉侧滑菜单
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=26
+	 * @property {Boolean} mask = [true | false] 是否显示遮罩
+	 * @property {Boolean} maskClick = [true | false] 点击遮罩是否关闭
+	 * @property {Boolean} mode = [left | right] Drawer 滑出位置
+	 * 	@value left 从左侧滑出
+	 * 	@value right 从右侧侧滑出
+	 * @property {Number} width 抽屉的宽度 ，仅 vue 页面生效
+	 * @event {Function} close 组件关闭时触发事件
+	 */
+	export default {
+		name: 'UniDrawer',
+		components: {
+			// #ifdef H5
+			keypress
+			// #endif
+		},
+		emits:['change'],
+		props: {
+			/**
+			 * 显示模式（左、右），只在初始化生效
+			 */
+			mode: {
+				type: String,
+				default: ''
+			},
+			/**
+			 * 蒙层显示状态
+			 */
+			mask: {
+				type: Boolean,
+				default: true
+			},
+			/**
+			 * 遮罩是否可点击关闭
+			 */
+			maskClick:{
+				type: Boolean,
+				default: true
+			},
+			/**
+			 * 抽屉宽度
+			 */
+			width: {
+				type: Number,
+				default: 220
+			}
+		},
+		data() {
+			return {
+				visibleSync: false,
+				showDrawer: false,
+				rightMode: false,
+				watchTimer: null,
+				drawerWidth: 220
+			}
+		},
+		created() {
+			// #ifndef APP-NVUE
+			this.drawerWidth = this.width
+			// #endif
+			this.rightMode = this.mode === 'right'
+		},
+		methods: {
+			clear(){},
+			close(type) {
+				// fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
+				if((type === 'mask' && !this.maskClick) || !this.visibleSync) return
+				this._change('showDrawer', 'visibleSync', false)
+			},
+			open() {
+				// fixed by mehaotian 处理重复点击打开的事件
+				if(this.visibleSync) return
+				this._change('visibleSync', 'showDrawer', true)
+			},
+			_change(param1, param2, status) {
+				this[param1] = status
+				if (this.watchTimer) {
+					clearTimeout(this.watchTimer)
+				}
+				this.watchTimer = setTimeout(() => {
+					this[param2] = status
+					this.$emit('change',status)
+				}, status ? 50 : 300)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	$uni-mask: rgba($color: #000000, $alpha: 0.4) ;
+	// 抽屉宽度
+	$drawer-width: 220px;
+
+	.uni-drawer {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		overflow: hidden;
+		z-index: 999;
+	}
+
+	.uni-drawer__content {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		position: absolute;
+		top: 0;
+		width: $drawer-width;
+		bottom: 0;
+		background-color: $uni-bg-color;
+		transition: transform 0.3s ease;
+	}
+
+	.uni-drawer--left {
+		left: 0;
+		/* #ifdef APP-NVUE */
+		transform: translateX(-$drawer-width);
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		transform: translateX(-100%);
+		/* #endif */
+	}
+
+	.uni-drawer--right {
+		right: 0;
+		/* #ifdef APP-NVUE */
+		transform: translateX($drawer-width);
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		transform: translateX(100%);
+		/* #endif */
+	}
+
+	.uni-drawer__content--visible {
+		transform: translateX(0px);
+	}
+
+
+	.uni-drawer__mask {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		opacity: 0;
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		background-color: $uni-mask;
+		transition: opacity 0.3s;
+	}
+
+	.uni-drawer__mask--visible {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		opacity: 1;
+	}
+</style>
diff --git a/uni_modules/uni-drawer/package.json b/uni_modules/uni-drawer/package.json
new file mode 100644
index 0000000..dd056e4
--- /dev/null
+++ b/uni_modules/uni-drawer/package.json
@@ -0,0 +1,87 @@
+{
+  "id": "uni-drawer",
+  "displayName": "uni-drawer 抽屉",
+  "version": "1.2.1",
+  "description": "抽屉式导航，用于展示侧滑菜单，侧滑导航。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "drawer",
+    "抽屉",
+    "侧滑导航"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-drawer/readme.md b/uni_modules/uni-drawer/readme.md
new file mode 100644
index 0000000..dcf6e6b
--- /dev/null
+++ b/uni_modules/uni-drawer/readme.md
@@ -0,0 +1,10 @@
+
+
+## Drawer 抽屉
+> **组件名：uni-drawer**
+> 代码块： `uDrawer`
+
+抽屉侧滑菜单。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-drawer)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/uni_modules/uni-easyinput/changelog.md b/uni_modules/uni-easyinput/changelog.md
new file mode 100644
index 0000000..6677b07
--- /dev/null
+++ b/uni_modules/uni-easyinput/changelog.md
@@ -0,0 +1,113 @@
+## 1.1.18（2024-04-11）
+- 修复 easyinput组件双向绑定问题
+## 1.1.17（2024-03-28）
+- 修复 在头条小程序下丢失事件绑定的问题
+## 1.1.16（2024-03-20）
+- 修复 在密码输入情况下 清除和小眼睛覆盖bug 在edge浏览器下显示双眼睛bug
+## 1.1.15（2024-02-21）
+- 新增 左侧插槽：left
+## 1.1.14（2024-02-19）
+- 修复 onBlur的emit传值错误
+## 1.1.12（2024-01-29）
+- 补充 adjust-position文档属性补充
+## 1.1.11（2024-01-29）
+- 补充 adjust-position属性传递值：（Boolean）当键盘弹起时，是否自动上推页面
+## 1.1.10（2024-01-22）
+- 去除 移除无用的log输出
+## 1.1.9（2023-04-11）
+- 修复 vue3 下 keyboardheightchange 事件报错的bug
+## 1.1.8（2023-03-29）
+- 优化 trim 属性默认值
+## 1.1.7（2023-03-29）
+- 新增 cursor-spacing 属性
+## 1.1.6（2023-01-28）
+- 新增 keyboardheightchange 事件，可监听键盘高度变化
+## 1.1.5（2022-11-29）
+- 优化 主题样式
+## 1.1.4（2022-10-27）
+- 修复 props 中背景颜色无默认值的bug
+## 1.1.0（2022-06-30）
+
+- 新增 在 uni-forms 1.4.0 中使用可以在 blur 时校验内容
+- 新增 clear 事件，点击右侧叉号图标触发
+- 新增 change 事件 ，仅在输入框失去焦点或用户按下回车时触发
+- 优化 组件样式，组件获取焦点时高亮显示，图标颜色调整等
+
+## 1.0.5（2022-06-07）
+
+- 优化 clearable 显示策略
+
+## 1.0.4（2022-06-07）
+
+- 优化 clearable 显示策略
+
+## 1.0.3（2022-05-20）
+
+- 修复 关闭图标某些情况下无法取消的 bug
+
+## 1.0.2（2022-04-12）
+
+- 修复 默认值不生效的 bug
+
+## 1.0.1（2022-04-02）
+
+- 修复 value 不能为 0 的 bug
+
+## 1.0.0（2021-11-19）
+
+- 优化 组件 UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-easyinput](https://uniapp.dcloud.io/component/uniui/uni-easyinput)
+
+## 0.1.4（2021-08-20）
+
+- 修复 在 uni-forms 的动态表单中默认值校验不通过的 bug
+
+## 0.1.3（2021-08-11）
+
+- 修复 在 uni-forms 中重置表单，错误信息无法清除的问题
+
+## 0.1.2（2021-07-30）
+
+- 优化 vue3 下事件警告的问题
+
+## 0.1.1
+
+- 优化 errorMessage 属性支持 Boolean 类型
+
+## 0.1.0（2021-07-13）
+
+- 组件兼容 vue3，如何创建 vue3 项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+
+## 0.0.16（2021-06-29）
+
+- 修复 confirmType 属性（仅 type="text" 生效）导致多行文本框无法换行的 bug
+
+## 0.0.15（2021-06-21）
+
+- 修复 passwordIcon 属性拼写错误的 bug
+
+## 0.0.14（2021-06-18）
+
+- 新增 passwordIcon 属性，当 type=password 时是否显示小眼睛图标
+- 修复 confirmType 属性不生效的问题
+
+## 0.0.13（2021-06-04）
+
+- 修复 disabled 状态可清出内容的 bug
+
+## 0.0.12（2021-05-12）
+
+- 新增 组件示例地址
+
+## 0.0.11（2021-05-07）
+
+- 修复 input-border 属性不生效的问题
+
+## 0.0.10（2021-04-30）
+
+- 修复 ios 遮挡文字、显示一半的问题
+
+## 0.0.9（2021-02-05）
+
+- 调整为 uni_modules 目录规范
+- 优化 兼容 nvue 页面
diff --git a/uni_modules/uni-easyinput/components/uni-easyinput/common.js b/uni_modules/uni-easyinput/components/uni-easyinput/common.js
new file mode 100644
index 0000000..fde8d3c
--- /dev/null
+++ b/uni_modules/uni-easyinput/components/uni-easyinput/common.js
@@ -0,0 +1,54 @@
+/**
+ * @desc 函数防抖
+ * @param func 目标函数
+ * @param wait 延迟执行毫秒数
+ * @param immediate true - 立即执行， false - 延迟执行
+ */
+export const debounce = function(func, wait = 1000, immediate = true) {
+	let timer;
+	return function() {
+		let context = this,
+			args = arguments;
+		if (timer) clearTimeout(timer);
+		if (immediate) {
+			let callNow = !timer;
+			timer = setTimeout(() => {
+				timer = null;
+			}, wait);
+			if (callNow) func.apply(context, args);
+		} else {
+			timer = setTimeout(() => {
+				func.apply(context, args);
+			}, wait)
+		}
+	}
+}
+/**
+ * @desc 函数节流
+ * @param func 函数
+ * @param wait 延迟执行毫秒数
+ * @param type 1 使用表时间戳，在时间段开始的时候触发 2 使用表定时器，在时间段结束的时候触发
+ */
+export const throttle = (func, wait = 1000, type = 1) => {
+	let previous = 0;
+	let timeout;
+	return function() {
+		let context = this;
+		let args = arguments;
+		if (type === 1) {
+			let now = Date.now();
+
+			if (now - previous > wait) {
+				func.apply(context, args);
+				previous = now;
+			}
+		} else if (type === 2) {
+			if (!timeout) {
+				timeout = setTimeout(() => {
+					timeout = null;
+					func.apply(context, args)
+				}, wait)
+			}
+		}
+	}
+}
diff --git a/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue b/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue
new file mode 100644
index 0000000..d41411b
--- /dev/null
+++ b/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue
@@ -0,0 +1,693 @@
+<template>
+	<view class="uni-easyinput" :class="{ 'uni-easyinput-error': msg }" :style="boxStyle">
+		<view class="uni-easyinput__content" :class="inputContentClass" :style="inputContentStyle">
+			<uni-icons v-if="prefixIcon" class="content-clear-icon" :type="prefixIcon" color="#c0c4cc"
+				@click="onClickIcon('prefix')" size="22"></uni-icons>
+			<slot name="left">
+			</slot>
+			<!-- #ifdef MP-ALIPAY -->
+			<textarea :enableNative="enableNative" v-if="type === 'textarea'" class="uni-easyinput__content-textarea"
+				:class="{ 'input-padding': inputBorder }" :name="name" :value="val" :placeholder="placeholder"
+				:placeholderStyle="placeholderStyle" :disabled="disabled" placeholder-class="uni-easyinput__placeholder-class"
+				:maxlength="inputMaxlength" :focus="focused" :autoHeight="autoHeight" :cursor-spacing="cursorSpacing"
+				:adjust-position="adjustPosition" @input="onInput" @blur="_Blur" @focus="_Focus" @confirm="onConfirm"
+				@keyboardheightchange="onkeyboardheightchange"></textarea>
+			<input :enableNative="enableNative" v-else :type="type === 'password' ? 'text' : type"
+				class="uni-easyinput__content-input" :style="inputStyle" :name="name" :value="val"
+				:password="!showPassword && type === 'password'" :placeholder="placeholder" :placeholderStyle="placeholderStyle"
+				placeholder-class="uni-easyinput__placeholder-class" :disabled="disabled" :maxlength="inputMaxlength"
+				:focus="focused" :confirmType="confirmType" :cursor-spacing="cursorSpacing" :adjust-position="adjustPosition"
+				@focus="_Focus" @blur="_Blur" @input="onInput" @confirm="onConfirm"
+				@keyboardheightchange="onkeyboardheightchange" />
+			<!-- #endif -->
+			<!-- #ifndef MP-ALIPAY -->
+			<textarea v-if="type === 'textarea'" class="uni-easyinput__content-textarea"
+				:class="{ 'input-padding': inputBorder }" :name="name" :value="val" :placeholder="placeholder"
+				:placeholderStyle="placeholderStyle" :disabled="disabled" placeholder-class="uni-easyinput__placeholder-class"
+				:maxlength="inputMaxlength" :focus="focused" :autoHeight="autoHeight" :cursor-spacing="cursorSpacing"
+				:adjust-position="adjustPosition" @input="onInput" @blur="_Blur" @focus="_Focus" @confirm="onConfirm"
+				@keyboardheightchange="onkeyboardheightchange"></textarea>
+			<input v-else :type="type === 'password' ? 'text' : type" class="uni-easyinput__content-input" :style="inputStyle"
+				:name="name" :value="val" :password="!showPassword && type === 'password'" :placeholder="placeholder"
+				:placeholderStyle="placeholderStyle" placeholder-class="uni-easyinput__placeholder-class" :disabled="disabled"
+				:maxlength="inputMaxlength" :focus="focused" :confirmType="confirmType" :cursor-spacing="cursorSpacing"
+				:adjust-position="adjustPosition" @focus="_Focus" @blur="_Blur" @input="onInput" @confirm="onConfirm"
+				@keyboardheightchange="onkeyboardheightchange" />
+			<!-- #endif -->
+
+			<template v-if="type === 'password' && passwordIcon">
+				<!-- 开启密码时显示小眼睛 -->
+				<uni-icons v-if="isVal" class="content-clear-icon" :class="{ 'is-textarea-icon': type === 'textarea' }"
+					:type="showPassword ? 'eye-slash-filled' : 'eye-filled'" :size="22"
+					:color="focusShow ? primaryColor : '#c0c4cc'" @click="onEyes"></uni-icons>
+			</template>
+			<template v-if="suffixIcon">
+				<uni-icons v-if="suffixIcon" class="content-clear-icon" :type="suffixIcon" color="#c0c4cc"
+					@click="onClickIcon('suffix')" size="22"></uni-icons>
+			</template>
+			<template v-else>
+				<uni-icons v-if="clearable && isVal && !disabled && type !== 'textarea'" class="content-clear-icon"
+					:class="{ 'is-textarea-icon': type === 'textarea' }" type="clear" :size="clearSize"
+					:color="msg ? '#dd524d' : focusShow ? primaryColor : '#c0c4cc'" @click="onClear"></uni-icons>
+			</template>
+			<slot name="right"></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * Easyinput 输入框
+	 * @description 此组件可以实现表单的输入与校验，包括 "text" 和 "textarea" 类型。
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3455
+	 * @property {String}	value	输入内容
+	 * @property {String }	type	输入框的类型（默认text） password/text/textarea/..
+	 * 	@value text			文本输入键盘
+	 * 	@value textarea	多行文本输入键盘
+	 * 	@value password	密码输入键盘
+	 * 	@value number		数字输入键盘，注意iOS上app-vue弹出的数字键盘并非9宫格方式
+	 * 	@value idcard		身份证输入键盘，信、支付宝、百度、QQ小程序
+	 * 	@value digit		带小数点的数字键盘	，App的nvue页面、微信、支付宝、百度、头条、QQ小程序支持
+	 * @property {Boolean}	clearable	是否显示右侧清空内容的图标控件，点击可清空输入框内容（默认true）
+	 * @property {Boolean}	autoHeight	是否自动增高输入区域，type为textarea时有效（默认true）
+	 * @property {String }	placeholder	输入框的提示文字
+	 * @property {String }	placeholderStyle	placeholder的样式(内联样式，字符串)，如"color: #ddd"
+	 * @property {Boolean}	focus	是否自动获得焦点（默认false）
+	 * @property {Boolean}	disabled	是否禁用（默认false）
+	 * @property {Number }	maxlength	最大输入长度，设置为 -1 的时候不限制最大长度（默认140）
+	 * @property {String }	confirmType	设置键盘右下角按钮的文字，仅在type="text"时生效（默认done）
+	 * @property {Number }	clearSize	清除图标的大小，单位px（默认15）
+	 * @property {String}	prefixIcon	输入框头部图标
+	 * @property {String}	suffixIcon	输入框尾部图标
+	 * @property {String}	primaryColor	设置主题色（默认#2979ff）
+	 * @property {Boolean}	trim	是否自动去除两端的空格
+	 * @property {Boolean}	cursorSpacing	指定光标与键盘的距离，单位 px
+	 * @property {Boolean}  ajust-position 当键盘弹起时，是否上推内容，默认值：true
+	 * @value both	去除两端空格
+	 * @value left	去除左侧空格
+	 * @value right	去除右侧空格
+	 * @value start	去除左侧空格
+	 * @value end		去除右侧空格
+	 * @value all		去除全部空格
+	 * @value none	不去除空格
+	 * @property {Boolean}	inputBorder	是否显示input输入框的边框（默认true）
+	 * @property {Boolean}	passwordIcon	type=password时是否显示小眼睛图标
+	 * @property {Object}	styles	自定义颜色
+	 * @event {Function}	input	输入框内容发生变化时触发
+	 * @event {Function}	focus	输入框获得焦点时触发
+	 * @event {Function}	blur	输入框失去焦点时触发
+	 * @event {Function}	confirm	点击完成按钮时触发
+	 * @event {Function}	iconClick	点击图标时触发
+	 * @example <uni-easyinput v-model="mobile"></uni-easyinput>
+	 */
+	function obj2strClass(obj) {
+		let classess = '';
+		for (let key in obj) {
+			const val = obj[key];
+			if (val) {
+				classess += `${key} `;
+			}
+		}
+		return classess;
+	}
+
+	function obj2strStyle(obj) {
+		let style = '';
+		for (let key in obj) {
+			const val = obj[key];
+			style += `${key}:${val};`;
+		}
+		return style;
+	}
+	export default {
+		name: 'uni-easyinput',
+		emits: [
+			'click',
+			'iconClick',
+			'update:modelValue',
+			'input',
+			'focus',
+			'blur',
+			'confirm',
+			'clear',
+			'eyes',
+			'change',
+			'keyboardheightchange'
+		],
+		model: {
+			prop: 'modelValue',
+			event: 'update:modelValue'
+		},
+		options: {
+			// #ifdef MP-TOUTIAO
+			virtualHost: false,
+			// #endif
+			// #ifndef MP-TOUTIAO
+			virtualHost: true
+			// #endif
+		},
+		inject: {
+			form: {
+				from: 'uniForm',
+				default: null
+			},
+			formItem: {
+				from: 'uniFormItem',
+				default: null
+			}
+		},
+		props: {
+			name: String,
+			value: [Number, String],
+			modelValue: [Number, String],
+			type: {
+				type: String,
+				default: 'text'
+			},
+			clearable: {
+				type: Boolean,
+				default: true
+			},
+			autoHeight: {
+				type: Boolean,
+				default: false
+			},
+			placeholder: {
+				type: String,
+				default: ' '
+			},
+			placeholderStyle: String,
+			focus: {
+				type: Boolean,
+				default: false
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			maxlength: {
+				type: [Number, String],
+				default: 140
+			},
+			confirmType: {
+				type: String,
+				default: 'done'
+			},
+			clearSize: {
+				type: [Number, String],
+				default: 24
+			},
+			inputBorder: {
+				type: Boolean,
+				default: true
+			},
+			prefixIcon: {
+				type: String,
+				default: ''
+			},
+			suffixIcon: {
+				type: String,
+				default: ''
+			},
+			trim: {
+				type: [Boolean, String],
+				default: false
+			},
+			cursorSpacing: {
+				type: Number,
+				default: 0
+			},
+			passwordIcon: {
+				type: Boolean,
+				default: true
+			},
+			adjustPosition: {
+				type: Boolean,
+				default: true
+			},
+			primaryColor: {
+				type: String,
+				default: '#2979ff'
+			},
+			styles: {
+				type: Object,
+				default() {
+					return {
+						color: '#333',
+						backgroundColor: '#fff',
+						disableColor: '#F7F6F6',
+						borderColor: '#e5e5e5'
+					};
+				}
+			},
+			errorMessage: {
+				type: [String, Boolean],
+				default: ''
+			},
+			// #ifdef MP-ALIPAY
+			enableNative: {
+				type: Boolean,
+				default: false
+			}
+			// #endif
+		},
+		data() {
+			return {
+				focused: false,
+				val: '',
+				showMsg: '',
+				border: false,
+				isFirstBorder: false,
+				showClearIcon: false,
+				showPassword: false,
+				focusShow: false,
+				localMsg: '',
+				isEnter: false // 用于判断当前是否是使用回车操作
+			};
+		},
+		computed: {
+			// 输入框内是否有值
+			isVal() {
+				const val = this.val;
+				// fixed by mehaotian 处理值为0的情况，字符串0不在处理范围
+				if (val || val === 0) {
+					return true;
+				}
+				return false;
+			},
+
+			msg() {
+				// console.log('computed', this.form, this.formItem);
+				// if (this.form) {
+				// 	return this.errorMessage || this.formItem.errMsg;
+				// }
+				// TODO 处理头条 formItem 中 errMsg 不更新的问题
+				return this.localMsg || this.errorMessage;
+			},
+			// 因为uniapp的input组件的maxlength组件必须要数值，这里转为数值，用户可以传入字符串数值
+			inputMaxlength() {
+				return Number(this.maxlength);
+			},
+
+			// 处理外层样式的style
+			boxStyle() {
+				return `color:${
+					this.inputBorder && this.msg ? '#e43d33' : this.styles.color
+				};`;
+			},
+			// input 内容的类和样式处理
+			inputContentClass() {
+				return obj2strClass({
+					'is-input-border': this.inputBorder,
+					'is-input-error-border': this.inputBorder && this.msg,
+					'is-textarea': this.type === 'textarea',
+					'is-disabled': this.disabled,
+					'is-focused': this.focusShow
+				});
+			},
+			inputContentStyle() {
+				const focusColor = this.focusShow
+					? this.primaryColor
+					: this.styles.borderColor;
+				const borderColor =
+					this.inputBorder && this.msg ? '#dd524d' : focusColor;
+				return obj2strStyle({
+					'border-color': borderColor || '#e5e5e5',
+					'background-color': this.disabled
+						? this.styles.disableColor
+						: this.styles.backgroundColor
+				});
+			},
+			// input右侧样式
+			inputStyle() {
+				const paddingRight =
+					this.type === 'password' || this.clearable || this.prefixIcon
+						? ''
+						: '10px';
+				return obj2strStyle({
+					'padding-right': paddingRight,
+					'padding-left': this.prefixIcon ? '' : '10px'
+				});
+			}
+		},
+		watch: {
+			value(newVal) {
+				this.val = newVal;
+			},
+			modelValue(newVal) {
+				this.val = newVal;
+			},
+			focus(newVal) {
+				this.$nextTick(() => {
+					this.focused = this.focus;
+					this.focusShow = this.focus;
+				});
+			}
+		},
+		created() {
+			this.init();
+			// TODO 处理头条vue3 computed 不监听 inject 更改的问题（formItem.errMsg）
+			if (this.form && this.formItem) {
+				this.$watch('formItem.errMsg', newVal => {
+					this.localMsg = newVal;
+				});
+			}
+		},
+		mounted() {
+			this.$nextTick(() => {
+				this.focused = this.focus;
+				this.focusShow = this.focus;
+			});
+		},
+		methods: {
+			/**
+			 * 初始化变量值
+			 */
+			init() {
+				if (this.value || this.value === 0) {
+					this.val = this.value;
+				} else if (
+					this.modelValue ||
+					this.modelValue === 0 ||
+					this.modelValue === ''
+				) {
+					this.val = this.modelValue;
+				} else {
+					this.val = null;
+				}
+			},
+
+			/**
+			 * 点击图标时触发
+			 * @param {Object} type
+			 */
+			onClickIcon(type) {
+				this.$emit('iconClick', type);
+			},
+
+			/**
+			 * 显示隐藏内容，密码框时生效
+			 */
+			onEyes() {
+				this.showPassword = !this.showPassword;
+				this.$emit('eyes', this.showPassword);
+			},
+
+			/**
+			 * 输入时触发
+			 * @param {Object} event
+			 */
+			onInput(event) {
+				let value = event.detail.value;
+				// 判断是否去除空格
+				if (this.trim) {
+					if (typeof this.trim === 'boolean' && this.trim) {
+						value = this.trimStr(value);
+					}
+					if (typeof this.trim === 'string') {
+						value = this.trimStr(value, this.trim);
+					}
+				}
+				if (this.errMsg) this.errMsg = '';
+				this.val = value;
+				// TODO 兼容 vue2
+				this.$emit('input', value);
+				// TODO　兼容　vue3
+				this.$emit('update:modelValue', value);
+			},
+
+			/**
+			 * 外部调用方法
+			 * 获取焦点时触发
+			 * @param {Object} event
+			 */
+			onFocus() {
+				this.$nextTick(() => {
+					this.focused = true;
+				});
+				this.$emit('focus', null);
+			},
+
+			_Focus(event) {
+				this.focusShow = true;
+				this.$emit('focus', event);
+			},
+
+			/**
+			 * 外部调用方法
+			 * 失去焦点时触发
+			 * @param {Object} event
+			 */
+			onBlur() {
+				this.focused = false;
+				this.$emit('blur', null);
+			},
+			_Blur(event) {
+				let value = event.detail.value;
+				this.focusShow = false;
+				this.$emit('blur', event);
+				// 根据类型返回值，在event中获取的值理论上讲都是string
+				if (this.isEnter === false) {
+					this.$emit('change', this.val);
+				}
+				// 失去焦点时参与表单校验
+				if (this.form && this.formItem) {
+					const { validateTrigger } = this.form;
+					if (validateTrigger === 'blur') {
+						this.formItem.onFieldChange();
+					}
+				}
+			},
+
+			/**
+			 * 按下键盘的发送键
+			 * @param {Object} e
+			 */
+			onConfirm(e) {
+				this.$emit('confirm', this.val);
+				this.isEnter = true;
+				this.$emit('change', this.val);
+				this.$nextTick(() => {
+					this.isEnter = false;
+				});
+			},
+
+			/**
+			 * 清理内容
+			 * @param {Object} event
+			 */
+			onClear(event) {
+				this.val = '';
+				// TODO 兼容 vue2
+				this.$emit('input', '');
+				// TODO 兼容 vue2
+				// TODO　兼容　vue3
+				this.$emit('update:modelValue', '');
+				// 点击叉号触发
+				this.$emit('clear');
+			},
+
+			/**
+			 * 键盘高度发生变化的时候触发此事件
+			 * 兼容性：微信小程序2.7.0+、App 3.1.0+
+			 * @param {Object} event
+			 */
+			onkeyboardheightchange(event) {
+				this.$emit('keyboardheightchange', event);
+			},
+
+			/**
+			 * 去除空格
+			 */
+			trimStr(str, pos = 'both') {
+				if (pos === 'both') {
+					return str.trim();
+				} else if (pos === 'left') {
+					return str.trimLeft();
+				} else if (pos === 'right') {
+					return str.trimRight();
+				} else if (pos === 'start') {
+					return str.trimStart();
+				} else if (pos === 'end') {
+					return str.trimEnd();
+				} else if (pos === 'all') {
+					return str.replace(/\s+/g, '');
+				} else if (pos === 'none') {
+					return str;
+				}
+				return str;
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	$uni-error: #e43d33;
+	$uni-border-1: #dcdfe6 !default;
+
+	.uni-easyinput {
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		/* #endif */
+		flex: 1;
+		position: relative;
+		text-align: left;
+		color: #333;
+		font-size: 14px;
+	}
+
+	.uni-easyinput__content {
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		display: flex;
+		box-sizing: border-box;
+		// min-height: 36px;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		// 处理border动画刚开始显示黑色的问题
+		border-color: #fff;
+		transition-property: border-color;
+		transition-duration: 0.3s;
+	}
+
+	.uni-easyinput__content-input {
+		/* #ifndef APP-NVUE */
+		width: auto;
+		/* #endif */
+		position: relative;
+		overflow: hidden;
+		flex: 1;
+		line-height: 1;
+		font-size: 14px;
+		height: 35px;
+		// min-height: 36px;
+
+		/*ifdef H5*/
+		& ::-ms-reveal {
+			display: none;
+		}
+
+		& ::-ms-clear {
+			display: none;
+		}
+
+		& ::-o-clear {
+			display: none;
+		}
+		/*endif*/
+	}
+
+	.uni-easyinput__placeholder-class {
+		color: #999;
+		font-size: 12px;
+		// font-weight: 200;
+	}
+
+	.is-textarea {
+		align-items: flex-start;
+	}
+
+	.is-textarea-icon {
+		margin-top: 5px;
+	}
+
+	.uni-easyinput__content-textarea {
+		position: relative;
+		overflow: hidden;
+		flex: 1;
+		line-height: 1.5;
+		font-size: 14px;
+		margin: 6px;
+		margin-left: 0;
+		height: 80px;
+		min-height: 80px;
+		/* #ifndef APP-NVUE */
+		min-height: 80px;
+		width: auto;
+		/* #endif */
+	}
+
+	.input-padding {
+		padding-left: 10px;
+	}
+
+	.content-clear-icon {
+		padding: 0 5px;
+	}
+
+	.label-icon {
+		margin-right: 5px;
+		margin-top: -1px;
+	}
+
+	// 显示边框
+	.is-input-border {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		box-sizing: border-box;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		border: 1px solid $uni-border-1;
+		border-radius: 4px;
+		/* #ifdef MP-ALIPAY */
+		overflow: hidden;
+		/* #endif */
+	}
+
+	.uni-error-message {
+		position: absolute;
+		bottom: -17px;
+		left: 0;
+		line-height: 12px;
+		color: $uni-error;
+		font-size: 12px;
+		text-align: left;
+	}
+
+	.uni-error-msg--boeder {
+		position: relative;
+		bottom: 0;
+		line-height: 22px;
+	}
+
+	.is-input-error-border {
+		border-color: $uni-error;
+
+		.uni-easyinput__placeholder-class {
+			color: mix(#fff, $uni-error, 50%);
+		}
+	}
+
+	.uni-easyinput--border {
+		margin-bottom: 0;
+		padding: 10px 15px;
+		// padding-bottom: 0;
+		border-top: 1px #eee solid;
+	}
+
+	.uni-easyinput-error {
+		padding-bottom: 0;
+	}
+
+	.is-first-border {
+		/* #ifndef APP-NVUE */
+		border: none;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		border-width: 0;
+		/* #endif */
+	}
+
+	.is-disabled {
+		background-color: #f7f6f6;
+		color: #d5d5d5;
+
+		.uni-easyinput__placeholder-class {
+			color: #d5d5d5;
+			font-size: 12px;
+		}
+	}
+</style>
diff --git a/uni_modules/uni-easyinput/package.json b/uni_modules/uni-easyinput/package.json
new file mode 100644
index 0000000..62bbff5
--- /dev/null
+++ b/uni_modules/uni-easyinput/package.json
@@ -0,0 +1,88 @@
+{
+  "id": "uni-easyinput",
+  "displayName": "uni-easyinput 增强输入框",
+  "version": "1.1.18",
+  "description": "Easyinput 组件是对原生input组件的增强",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "input",
+    "uni-easyinput",
+    "输入框"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+      "uni-icons"
+    ],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "n"
+      },
+      "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-easyinput/readme.md b/uni_modules/uni-easyinput/readme.md
new file mode 100644
index 0000000..f1faf8f
--- /dev/null
+++ b/uni_modules/uni-easyinput/readme.md
@@ -0,0 +1,11 @@
+
+
+### Easyinput 增强输入框
+> **组件名：uni-easyinput**
+> 代码块： `uEasyinput`
+
+
+easyinput 组件是对原生input组件的增强 ，是专门为配合表单组件[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)而设计的，easyinput 内置了边框，图标等，同时包含 input 所有功能
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-easyinput)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/uni_modules/uni-fab/changelog.md b/uni_modules/uni-fab/changelog.md
new file mode 100644
index 0000000..9bd4729
--- /dev/null
+++ b/uni_modules/uni-fab/changelog.md
@@ -0,0 +1,23 @@
+## 1.2.5（2023-03-29）
+- 新增 pattern.icon 属性，可自定义图标
+## 1.2.4（2022-09-07）
+小程序端由于 style 使用了对象导致报错，[详情](https://ask.dcloud.net.cn/question/152790?item_id=211778&rf=false)
+## 1.2.3（2022-09-05）
+- 修复 nvue 环境下，具有 tabBar 时，fab 组件下部位置无法正常获取 --window-bottom 的bug，详见：[https://ask.dcloud.net.cn/question/110638?notification_id=826310](https://ask.dcloud.net.cn/question/110638?notification_id=826310)
+## 1.2.2（2021-12-29）
+- 更新 组件依赖
+## 1.2.1（2021-11-19）
+- 修复 阴影颜色不正确的bug
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-fab](https://uniapp.dcloud.io/component/uniui/uni-fab)
+## 1.1.1（2021-11-09） 
+- 新增 提供组件设计资源，组件样式调整
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.7（2021-05-12）
+- 新增 组件示例地址
+## 1.0.6（2021-02-05）
+- 调整为uni_modules目录规范
+- 优化 按钮背景色调整
+- 优化 兼容pc端
diff --git a/uni_modules/uni-fab/components/uni-fab/uni-fab.vue b/uni_modules/uni-fab/components/uni-fab/uni-fab.vue
new file mode 100644
index 0000000..dfa65c1
--- /dev/null
+++ b/uni_modules/uni-fab/components/uni-fab/uni-fab.vue
@@ -0,0 +1,491 @@
+<template>
+	<view class="uni-cursor-point">
+		<view v-if="popMenu && (leftBottom||rightBottom||leftTop||rightTop) && content.length > 0" :class="{
+        'uni-fab--leftBottom': leftBottom,
+        'uni-fab--rightBottom': rightBottom,
+        'uni-fab--leftTop': leftTop,
+        'uni-fab--rightTop': rightTop
+      }" class="uni-fab"
+				:style="nvueBottom"
+			>
+			<view :class="{
+          'uni-fab__content--left': horizontal === 'left',
+          'uni-fab__content--right': horizontal === 'right',
+          'uni-fab__content--flexDirection': direction === 'vertical',
+          'uni-fab__content--flexDirectionStart': flexDirectionStart,
+          'uni-fab__content--flexDirectionEnd': flexDirectionEnd,
+		  'uni-fab__content--other-platform': !isAndroidNvue
+        }" :style="{ width: boxWidth, height: boxHeight, backgroundColor: styles.backgroundColor }"
+				class="uni-fab__content" elevation="5">
+				<view v-if="flexDirectionStart || horizontalLeft" class="uni-fab__item uni-fab__item--first" />
+				<view v-for="(item, index) in content" :key="index" :class="{ 'uni-fab__item--active': isShow }"
+					class="uni-fab__item" @click="_onItemClick(index, item)">
+					<image :src="item.active ? item.selectedIconPath : item.iconPath" class="uni-fab__item-image"
+						mode="aspectFit" />
+					<text class="uni-fab__item-text"
+						:style="{ color: item.active ? styles.selectedColor : styles.color }">{{ item.text }}</text>
+				</view>
+				<view v-if="flexDirectionEnd || horizontalRight" class="uni-fab__item uni-fab__item--first" />
+			</view>
+		</view>
+		<view :class="{
+		  'uni-fab__circle--leftBottom': leftBottom,
+		  'uni-fab__circle--rightBottom': rightBottom,
+		  'uni-fab__circle--leftTop': leftTop,
+		  'uni-fab__circle--rightTop': rightTop,
+		  'uni-fab__content--other-platform': !isAndroidNvue
+		}" class="uni-fab__circle uni-fab__plus" :style="{ 'background-color': styles.buttonColor, 'bottom': nvueBottom }" @click="_onClick">
+			<uni-icons class="fab-circle-icon" :type="styles.icon" :color="styles.iconColor" size="32"
+				:class="{'uni-fab__plus--active': isShow && content.length > 0}"></uni-icons>
+			<!-- <view class="fab-circle-v"  :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view>
+			<view class="fab-circle-h" :class="{'uni-fab__plus--active': isShow  && content.length > 0}"></view> -->
+		</view>
+	</view>
+</template>
+
+<script>
+	let platform = 'other'
+	// #ifdef APP-NVUE
+	platform = uni.getSystemInfoSync().platform
+	// #endif
+
+	/**
+	 * Fab 悬浮按钮
+	 * @description 点击可展开一个图形按钮菜单
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=144
+	 * @property {Object} pattern 可选样式配置项
+	 * @property {Object} horizontal = [left | right] 水平对齐方式
+	 * 	@value left 左对齐
+	 * 	@value right 右对齐
+	 * @property {Object} vertical = [bottom | top] 垂直对齐方式
+	 * 	@value bottom 下对齐
+	 * 	@value top 上对齐
+	 * @property {Object} direction = [horizontal | vertical] 展开菜单显示方式
+	 * 	@value horizontal 水平显示
+	 * 	@value vertical 垂直显示
+	 * @property {Array} content 展开菜单内容配置项
+	 * @property {Boolean} popMenu 是否使用弹出菜单
+	 * @event {Function} trigger 展开菜单点击事件，返回点击信息
+	 * @event {Function} fabClick 悬浮按钮点击事件
+	 */
+	export default {
+		name: 'UniFab',
+		emits: ['fabClick', 'trigger'],
+		props: {
+			pattern: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			horizontal: {
+				type: String,
+				default: 'left'
+			},
+			vertical: {
+				type: String,
+				default: 'bottom'
+			},
+			direction: {
+				type: String,
+				default: 'horizontal'
+			},
+			content: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			show: {
+				type: Boolean,
+				default: false
+			},
+			popMenu: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				fabShow: false,
+				isShow: false,
+				isAndroidNvue: platform === 'android',
+				styles: {
+					color: '#3c3e49',
+					selectedColor: '#007AFF',
+					backgroundColor: '#fff',
+					buttonColor: '#007AFF',
+					iconColor: '#fff',
+					icon: 'plusempty'
+				}
+			}
+		},
+		computed: {
+			contentWidth(e) {
+				return (this.content.length + 1) * 55 + 15 + 'px'
+			},
+			contentWidthMin() {
+				return '55px'
+			},
+			// 动态计算宽度
+			boxWidth() {
+				return this.getPosition(3, 'horizontal')
+			},
+			// 动态计算高度
+			boxHeight() {
+				return this.getPosition(3, 'vertical')
+			},
+			// 计算左下位置
+			leftBottom() {
+				return this.getPosition(0, 'left', 'bottom')
+			},
+			// 计算右下位置
+			rightBottom() {
+				return this.getPosition(0, 'right', 'bottom')
+			},
+			// 计算左上位置
+			leftTop() {
+				return this.getPosition(0, 'left', 'top')
+			},
+			rightTop() {
+				return this.getPosition(0, 'right', 'top')
+			},
+			flexDirectionStart() {
+				return this.getPosition(1, 'vertical', 'top')
+			},
+			flexDirectionEnd() {
+				return this.getPosition(1, 'vertical', 'bottom')
+			},
+			horizontalLeft() {
+				return this.getPosition(2, 'horizontal', 'left')
+			},
+			horizontalRight() {
+				return this.getPosition(2, 'horizontal', 'right')
+			},
+			// 计算 nvue bottom
+			nvueBottom() {
+				const safeBottom = uni.getSystemInfoSync().windowBottom;
+				// #ifdef APP-NVUE
+				return 30 + safeBottom
+				// #endif
+				// #ifndef APP-NVUE
+				return 30
+				// #endif
+			}
+		},
+		watch: {
+			pattern: {
+				handler(val, oldVal) {
+					this.styles = Object.assign({}, this.styles, val)
+				},
+				deep: true
+			}
+		},
+		created() {
+			this.isShow = this.show
+			if (this.top === 0) {
+				this.fabShow = true
+			}
+			// 初始化样式
+			this.styles = Object.assign({}, this.styles, this.pattern)
+		},
+		methods: {
+			_onClick() {
+				this.$emit('fabClick')
+				if (!this.popMenu) {
+					return
+				}
+				this.isShow = !this.isShow
+			},
+			open() {
+				this.isShow = true
+			},
+			close() {
+				this.isShow = false
+			},
+			/**
+			 * 按钮点击事件
+			 */
+			_onItemClick(index, item) {
+				if (!this.isShow) {
+					return
+				}
+				this.$emit('trigger', {
+					index,
+					item
+				})
+			},
+			/**
+			 * 获取 位置信息
+			 */
+			getPosition(types, paramA, paramB) {
+				if (types === 0) {
+					return this.horizontal === paramA && this.vertical === paramB
+				} else if (types === 1) {
+					return this.direction === paramA && this.vertical === paramB
+				} else if (types === 2) {
+					return this.direction === paramA && this.horizontal === paramB
+				} else {
+					return this.isShow && this.direction === paramA ? this.contentWidth : this.contentWidthMin
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	$uni-shadow-base:0 1px 5px 2px rgba($color: #000000, $alpha: 0.3) !default;
+
+	.uni-fab {
+		position: fixed;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center;
+		z-index: 10;
+		border-radius: 45px;
+		box-shadow: $uni-shadow-base;
+	}
+
+	.uni-cursor-point {
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-fab--active {
+		opacity: 1;
+	}
+
+	.uni-fab--leftBottom {
+		left: 15px;
+		bottom: 30px;
+		/* #ifdef H5 */
+		left: calc(15px + var(--window-left));
+		bottom: calc(30px + var(--window-bottom));
+		/* #endif */
+		// padding: 10px;
+	}
+
+	.uni-fab--leftTop {
+		left: 15px;
+		top: 30px;
+		/* #ifdef H5 */
+		left: calc(15px + var(--window-left));
+		top: calc(30px + var(--window-top));
+		/* #endif */
+		// padding: 10px;
+	}
+
+	.uni-fab--rightBottom {
+		right: 15px;
+		bottom: 30px;
+		/* #ifdef H5 */
+		right: calc(15px + var(--window-right));
+		bottom: calc(30px + var(--window-bottom));
+		/* #endif */
+		// padding: 10px;
+	}
+
+	.uni-fab--rightTop {
+		right: 15px;
+		top: 30px;
+		/* #ifdef H5 */
+		right: calc(15px + var(--window-right));
+		top: calc(30px + var(--window-top));
+		/* #endif */
+		// padding: 10px;
+	}
+
+	.uni-fab__circle {
+		position: fixed;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center;
+		width: 55px;
+		height: 55px;
+		background-color: #3c3e49;
+		border-radius: 45px;
+		z-index: 11;
+		// box-shadow: $uni-shadow-base;
+	}
+
+	.uni-fab__circle--leftBottom {
+		left: 15px;
+		bottom: 30px;
+		/* #ifdef H5 */
+		left: calc(15px + var(--window-left));
+		bottom: calc(30px + var(--window-bottom));
+		/* #endif */
+	}
+
+	.uni-fab__circle--leftTop {
+		left: 15px;
+		top: 30px;
+		/* #ifdef H5 */
+		left: calc(15px + var(--window-left));
+		top: calc(30px + var(--window-top));
+		/* #endif */
+	}
+
+	.uni-fab__circle--rightBottom {
+		right: 15px;
+		bottom: 30px;
+		/* #ifdef H5 */
+		right: calc(15px + var(--window-right));
+		bottom: calc(30px + var(--window-bottom));
+		/* #endif */
+	}
+
+	.uni-fab__circle--rightTop {
+		right: 15px;
+		top: 30px;
+		/* #ifdef H5 */
+		right: calc(15px + var(--window-right));
+		top: calc(30px + var(--window-top));
+		/* #endif */
+	}
+
+	.uni-fab__circle--left {
+		left: 0;
+	}
+
+	.uni-fab__circle--right {
+		right: 0;
+	}
+
+	.uni-fab__circle--top {
+		top: 0;
+	}
+
+	.uni-fab__circle--bottom {
+		bottom: 0;
+	}
+
+	.uni-fab__plus {
+		font-weight: bold;
+	}
+
+	// .fab-circle-v {
+	// 	position: absolute;
+	// 	width: 2px;
+	// 	height: 24px;
+	// 	left: 0;
+	// 	top: 0;
+	// 	right: 0;
+	// 	bottom: 0;
+	// 	/* #ifndef APP-NVUE */
+	// 	margin: auto;
+	// 	/* #endif */
+	// 	background-color: white;
+	// 	transform: rotate(0deg);
+	// 	transition: transform 0.3s;
+	// }
+
+	// .fab-circle-h {
+	// 	position: absolute;
+	// 	width: 24px;
+	// 	height: 2px;
+	// 	left: 0;
+	// 	top: 0;
+	// 	right: 0;
+	// 	bottom: 0;
+	// 	/* #ifndef APP-NVUE */
+	// 	margin: auto;
+	// 	/* #endif */
+	// 	background-color: white;
+	// 	transform: rotate(0deg);
+	// 	transition: transform 0.3s;
+	// }
+
+	.fab-circle-icon {
+		transform: rotate(0deg);
+		transition: transform 0.3s;
+		font-weight: 200;
+	}
+
+	.uni-fab__plus--active {
+		transform: rotate(135deg);
+	}
+
+	.uni-fab__content {
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		border-radius: 55px;
+		overflow: hidden;
+		transition-property: width, height;
+		transition-duration: 0.2s;
+		width: 55px;
+		border-color: #DDDDDD;
+		border-width: 1rpx;
+		border-style: solid;
+	}
+
+	.uni-fab__content--other-platform {
+		border-width: 0px;
+		box-shadow: $uni-shadow-base;
+	}
+
+	.uni-fab__content--left {
+		justify-content: flex-start;
+	}
+
+	.uni-fab__content--right {
+		justify-content: flex-end;
+	}
+
+	.uni-fab__content--flexDirection {
+		flex-direction: column;
+		justify-content: flex-end;
+	}
+
+	.uni-fab__content--flexDirectionStart {
+		flex-direction: column;
+		justify-content: flex-start;
+	}
+
+	.uni-fab__content--flexDirectionEnd {
+		flex-direction: column;
+		justify-content: flex-end;
+	}
+
+	.uni-fab__item {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		width: 55px;
+		height: 55px;
+		opacity: 0;
+		transition: opacity 0.2s;
+	}
+
+	.uni-fab__item--active {
+		opacity: 1;
+	}
+
+	.uni-fab__item-image {
+		width: 20px;
+		height: 20px;
+		margin-bottom: 4px;
+	}
+
+	.uni-fab__item-text {
+		color: #FFFFFF;
+		font-size: 12px;
+		line-height: 12px;
+		margin-top: 2px;
+	}
+
+	.uni-fab__item--first {
+		width: 55px;
+	}
+</style>
diff --git a/uni_modules/uni-fab/package.json b/uni_modules/uni-fab/package.json
new file mode 100644
index 0000000..18c0810
--- /dev/null
+++ b/uni_modules/uni-fab/package.json
@@ -0,0 +1,84 @@
+{
+  "id": "uni-fab",
+  "displayName": "uni-fab 悬浮按钮",
+  "version": "1.2.5",
+  "description": "悬浮按钮 fab button ，点击可展开一个图标按钮菜单。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "按钮",
+    "悬浮按钮",
+    "fab"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss","uni-icons"],
+    "encrypt": [],
+    "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/uni_modules/uni-fab/readme.md b/uni_modules/uni-fab/readme.md
new file mode 100644
index 0000000..9a444e8
--- /dev/null
+++ b/uni_modules/uni-fab/readme.md
@@ -0,0 +1,9 @@
+## Fab 悬浮按钮
+> **组件名：uni-fab**
+> 代码块： `uFab`
+
+
+点击可展开一个图形按钮菜单
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-fab)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/uni_modules/uni-fav/changelog.md b/uni_modules/uni-fav/changelog.md
new file mode 100644
index 0000000..d8a08d4
--- /dev/null
+++ b/uni_modules/uni-fav/changelog.md
@@ -0,0 +1,19 @@
+## 1.2.1（2022-05-30）
+- 新增 stat 属性 ，是否开启uni统计功能
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-fav](https://uniapp.dcloud.io/component/uniui/uni-fav)
+## 1.1.1（2021-08-24）
+- 新增 支持国际化
+## 1.1.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.6（2021-05-12）
+- 新增 组件示例地址
+## 1.0.5（2021-04-21）
+- 优化 添加依赖 uni-icons, 导入后自动下载依赖
+## 1.0.4（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+## 1.0.3（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+## 1.0.2（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-fav/components/uni-fav/i18n/en.json b/uni_modules/uni-fav/components/uni-fav/i18n/en.json
new file mode 100644
index 0000000..9a0759e
--- /dev/null
+++ b/uni_modules/uni-fav/components/uni-fav/i18n/en.json
@@ -0,0 +1,4 @@
+{
+	"uni-fav.collect": "collect",
+	"uni-fav.collected": "collected"
+}
diff --git a/uni_modules/uni-fav/components/uni-fav/i18n/index.js b/uni_modules/uni-fav/components/uni-fav/i18n/index.js
new file mode 100644
index 0000000..de7509c
--- /dev/null
+++ b/uni_modules/uni-fav/components/uni-fav/i18n/index.js
@@ -0,0 +1,8 @@
+import en from './en.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
+}
diff --git a/uni_modules/uni-fav/components/uni-fav/i18n/zh-Hans.json b/uni_modules/uni-fav/components/uni-fav/i18n/zh-Hans.json
new file mode 100644
index 0000000..67c89bf
--- /dev/null
+++ b/uni_modules/uni-fav/components/uni-fav/i18n/zh-Hans.json
@@ -0,0 +1,4 @@
+{
+	"uni-fav.collect": "收藏",
+	"uni-fav.collected": "已收藏"
+}
diff --git a/uni_modules/uni-fav/components/uni-fav/i18n/zh-Hant.json b/uni_modules/uni-fav/components/uni-fav/i18n/zh-Hant.json
new file mode 100644
index 0000000..67c89bf
--- /dev/null
+++ b/uni_modules/uni-fav/components/uni-fav/i18n/zh-Hant.json
@@ -0,0 +1,4 @@
+{
+	"uni-fav.collect": "收藏",
+	"uni-fav.collected": "已收藏"
+}
diff --git a/uni_modules/uni-fav/components/uni-fav/uni-fav.vue b/uni_modules/uni-fav/components/uni-fav/uni-fav.vue
new file mode 100644
index 0000000..d2c58df
--- /dev/null
+++ b/uni_modules/uni-fav/components/uni-fav/uni-fav.vue
@@ -0,0 +1,161 @@
+<template>
+	<view :class="[circle === true || circle === 'true' ? 'uni-fav--circle' : '']" :style="[{ backgroundColor: checked ? bgColorChecked : bgColor }]"
+	 @click="onClick" class="uni-fav">
+		<!-- #ifdef MP-ALIPAY -->
+		<view class="uni-fav-star" v-if="!checked && (star === true || star === 'true')">
+			<uni-icons :color="fgColor" :style="{color: checked ? fgColorChecked : fgColor}" size="14" type="star-filled" />
+		</view>
+		<!-- #endif -->
+		<!-- #ifndef MP-ALIPAY -->
+		<uni-icons :color="fgColor" :style="{color: checked ? fgColorChecked : fgColor}" class="uni-fav-star" size="14" type="star-filled"
+		 v-if="!checked && (star === true || star === 'true')" />
+		<!-- #endif -->
+		<text :style="{color: checked ? fgColorChecked : fgColor}" class="uni-fav-text">{{ checked ? contentFav : contentDefault }}</text>
+	</view>
+</template>
+
+<script>
+
+	/**
+	 * Fav 收藏按钮
+	 * @description 用于收藏功能，可点击切换选中、不选中的状态
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=864
+	 * @property {Boolean} star = [true|false] 按钮是否带星星
+	 * @property {String} bgColor 未收藏时的背景色
+	 * @property {String} bgColorChecked 已收藏时的背景色
+	 * @property {String} fgColor 未收藏时的文字颜色
+	 * @property {String} fgColorChecked 已收藏时的文字颜色
+	 * @property {Boolean} circle = [true|false] 是否为圆角
+	 * @property {Boolean} checked = [true|false] 是否为已收藏
+	 * @property {Object} contentText = [true|false] 收藏按钮文字
+	 * @property {Boolean} stat 是否开启统计功能
+	 * @event {Function} click 点击 fav按钮触发事件
+	 * @example <uni-fav :checked="true"/>
+	 */
+
+	import {
+		initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import messages from './i18n/index.js'
+	const {	t	} = initVueI18n(messages)
+
+	export default {
+		name: "UniFav",
+		// TODO 兼容 vue3，需要注册事件
+		emits: ['click'],
+		props: {
+			star: {
+				type: [Boolean, String],
+				default: true
+			},
+			bgColor: {
+				type: String,
+				default: "#eeeeee"
+			},
+			fgColor: {
+				type: String,
+				default: "#666666"
+			},
+			bgColorChecked: {
+				type: String,
+				default: "#007aff"
+			},
+			fgColorChecked: {
+				type: String,
+				default: "#FFFFFF"
+			},
+			circle: {
+				type: [Boolean, String],
+				default: false
+			},
+			checked: {
+				type: Boolean,
+				default: false
+			},
+			contentText: {
+				type: Object,
+				default () {
+					return {
+						contentDefault: "",
+						contentFav: ""
+					};
+				}
+			},
+			stat:{
+				type: Boolean,
+				default: false
+			}
+		},
+		computed: {
+			contentDefault() {
+				return this.contentText.contentDefault || t("uni-fav.collect")
+			},
+			contentFav() {
+				return this.contentText.contentFav || t("uni-fav.collected")
+			},
+		},
+		watch: {
+			checked() {
+				if (uni.report && this.stat) {
+					if (this.checked) {
+						uni.report("收藏", "收藏");
+					} else {
+						uni.report("取消收藏", "取消收藏");
+					}
+				}
+			}
+		},
+		methods: {
+			onClick() {
+				this.$emit("click");
+			}
+		}
+	};
+</script>
+
+<style lang="scss" >
+	$fav-height: 25px;
+
+	.uni-fav {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		width: 60px;
+		height: $fav-height;
+		line-height: $fav-height;
+		text-align: center;
+		border-radius: 3px;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-fav--circle {
+		border-radius: 30px;
+	}
+
+	.uni-fav-star {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		height: $fav-height;
+		line-height: 24px;
+		margin-right: 3px;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.uni-fav-text {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		height: $fav-height;
+		line-height: $fav-height;
+		align-items: center;
+		justify-content: center;
+		font-size: 12px;
+	}
+</style>
diff --git a/uni_modules/uni-fav/package.json b/uni_modules/uni-fav/package.json
new file mode 100644
index 0000000..cc14697
--- /dev/null
+++ b/uni_modules/uni-fav/package.json
@@ -0,0 +1,89 @@
+{
+  "id": "uni-fav",
+  "displayName": "uni-fav 收藏按钮",
+  "version": "1.2.1",
+  "description": " Fav 收藏组件，可自定义颜色、大小。",
+  "keywords": [
+    "fav",
+    "uni-ui",
+    "uniui",
+    "收藏"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+			"uni-icons"
+		],
+    "encrypt": [],
+    "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/uni_modules/uni-fav/readme.md b/uni_modules/uni-fav/readme.md
new file mode 100644
index 0000000..4de125d
--- /dev/null
+++ b/uni_modules/uni-fav/readme.md
@@ -0,0 +1,10 @@
+
+
+## Fav 收藏按钮
+> **组件名：uni-fav**
+> 代码块： `uFav`
+
+用于收藏功能，可点击切换选中、不选中的状态。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-fav)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/uni_modules/uni-file-picker/changelog.md b/uni_modules/uni-file-picker/changelog.md
new file mode 100644
index 0000000..81e43b9
--- /dev/null
+++ b/uni_modules/uni-file-picker/changelog.md
@@ -0,0 +1,75 @@
+## 1.0.8（2024-03-20）
+- 补充 删除文件时返回文件下标
+## 1.0.7（2024-02-21）
+- 新增 微信小程序选择视频时改用chooseMedia,并返回视频缩略图
+## 1.0.6（2024-01-06）
+- 新增 微信小程序不再调用chooseImage,而是调用chooseMedia
+## 1.0.5（2024-01-03）
+- 新增 上传文件至云存储携带本地文件名称
+## 1.0.4（2023-03-29）
+- 修复 手动上传删除一个文件后不能再上传的bug
+## 1.0.3（2022-12-19）
+- 新增 sourceType 属性, 可以自定义图片和视频选择的来源
+## 1.0.2（2022-07-04）
+- 修复 在uni-forms下样式不生效的bug
+## 1.0.1（2021-11-23）
+- 修复 参数为对象的情况下，url在某些情况显示错误的bug
+## 1.0.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-file-picker](https://uniapp.dcloud.io/component/uniui/uni-file-picker)
+## 0.2.16（2021-11-08）
+- 修复 传入空对象 ，显示错误的Bug
+## 0.2.15（2021-08-30）
+- 修复 return-type="object" 时且存在v-model时，无法删除文件的Bug
+## 0.2.14（2021-08-23）
+- 新增 参数中返回 fileID 字段
+## 0.2.13（2021-08-23）
+- 修复 腾讯云传入fileID 不能回显的bug
+- 修复 选择图片后，不能放大的问题
+## 0.2.12（2021-08-17）
+- 修复 由于 0.2.11 版本引起的不能回显图片的Bug
+## 0.2.11（2021-08-16）
+- 新增 clearFiles(index) 方法，可以手动删除指定文件
+- 修复 v-model 值设为 null 报错的Bug
+## 0.2.10（2021-08-13）
+- 修复 return-type="object" 时，无法删除文件的Bug
+## 0.2.9（2021-08-03）
+- 修复 auto-upload 属性失效的Bug
+## 0.2.8（2021-07-31）
+- 修复 fileExtname属性不指定值报错的Bug
+## 0.2.7（2021-07-31）
+- 修复 在某种场景下图片不回显的Bug
+## 0.2.6（2021-07-30）
+- 修复 return-type为object下，返回值不正确的Bug
+## 0.2.5（2021-07-30）
+- 修复（重要） H5 平台下如果和uni-forms组件一同使用导致页面卡死的问题
+## 0.2.3（2021-07-28）
+- 优化 调整示例代码
+## 0.2.2（2021-07-27）
+- 修复 vue3 下赋值错误的Bug
+- 优化 h5平台下上传文件导致页面卡死的问题
+## 0.2.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 0.1.1（2021-07-02）
+- 修复 sourceType 缺少默认值导致 ios 无法选择文件
+## 0.1.0（2021-06-30）
+- 优化 解耦与uniCloud的强绑定关系 ，如不绑定服务空间，默认autoUpload为false且不可更改
+## 0.0.11（2021-06-30）
+- 修复 由 0.0.10 版本引发的 returnType 属性失效的问题
+## 0.0.10（2021-06-29）
+- 优化 文件上传后进度条消失时机
+## 0.0.9（2021-06-29）
+- 修复 在uni-forms 中，删除文件 ，获取的值不对的Bug
+## 0.0.8（2021-06-15）
+- 修复 删除文件时无法触发 v-model 的Bug
+## 0.0.7（2021-05-12）
+- 新增 组件示例地址
+## 0.0.6（2021-04-09）
+- 修复 选择的文件非 file-extname 字段指定的扩展名报错的Bug
+## 0.0.5（2021-04-09）
+- 优化 更新组件示例
+## 0.0.4（2021-04-09）
+- 优化 file-extname 字段支持字符串写法，多个扩展名需要用逗号分隔
+## 0.0.3（2021-02-05）
+- 调整为uni_modules目录规范
+- 修复 微信小程序不指定 fileExtname 属性选择失败的Bug
diff --git a/uni_modules/uni-file-picker/components/uni-file-picker/choose-and-upload-file.js b/uni_modules/uni-file-picker/components/uni-file-picker/choose-and-upload-file.js
new file mode 100644
index 0000000..9c6bcdf
--- /dev/null
+++ b/uni_modules/uni-file-picker/components/uni-file-picker/choose-and-upload-file.js
@@ -0,0 +1,287 @@
+'use strict';
+
+const ERR_MSG_OK = 'chooseAndUploadFile:ok';
+const ERR_MSG_FAIL = 'chooseAndUploadFile:fail';
+
+function chooseImage(opts) {
+	const {
+		count,
+		sizeType = ['original', 'compressed'],
+		sourceType,
+		extension
+	} = opts
+	return new Promise((resolve, reject) => {
+		// 微信由于旧接口不再维护，针对微信小程序平台改用chooseMedia接口
+		// #ifdef MP-WEIXIN
+		uni.chooseMedia({
+			count,
+			sizeType,
+			sourceType,
+			mediaType: ['image'],
+			extension,
+			success(res) {
+				res.tempFiles.forEach(item => {
+					item.path = item.tempFilePath;
+				})
+				resolve(normalizeChooseAndUploadFileRes(res, 'image'));
+			},
+			fail(res) {
+				reject({
+					errMsg: res.errMsg.replace('chooseImage:fail', ERR_MSG_FAIL),
+				});
+			},
+		})
+		// #endif
+		// #ifndef MP-WEIXIN
+		uni.chooseImage({
+			count,
+			sizeType,
+			sourceType,
+			extension,
+			success(res) {
+				resolve(normalizeChooseAndUploadFileRes(res, 'image'));
+			},
+			fail(res) {
+				reject({
+					errMsg: res.errMsg.replace('chooseImage:fail', ERR_MSG_FAIL),
+				});
+			},
+		});
+		// #endif
+
+	});
+}
+
+function chooseVideo(opts) {
+	const {
+		count,
+		camera,
+		compressed,
+		maxDuration,
+		sourceType,
+		extension
+	} = opts;
+	return new Promise((resolve, reject) => {
+		// 微信由于旧接口不再维护，针对微信小程序平台改用chooseMedia接口
+		// #ifdef MP-WEIXIN
+		uni.chooseMedia({
+			count,
+			compressed,
+			maxDuration,
+			sourceType,
+			extension,
+			mediaType: ['video'],
+			success(res) {
+				const {
+					tempFiles,
+				} = res;
+				resolve(normalizeChooseAndUploadFileRes({
+					errMsg: 'chooseVideo:ok',
+					tempFiles: tempFiles.map(item => {
+						return {
+							name: item.name || '',
+							path: item.tempFilePath,
+							thumbTempFilePath: item.thumbTempFilePath,
+							size:item.size,
+							type: (res.tempFile && res.tempFile.type) || '',
+							width:item.width,
+							height:item.height,
+							duration:item.duration,
+							fileType: 'video',
+							cloudPath: '',
+						}
+					}),
+				}, 'video'));
+			},
+			fail(res) {
+				reject({
+					errMsg: res.errMsg.replace('chooseVideo:fail', ERR_MSG_FAIL),
+				});
+			},
+		})
+		// #endif
+		// #ifndef MP-WEIXIN
+		uni.chooseVideo({
+			camera,
+			compressed,
+			maxDuration,
+			sourceType,
+			extension,
+			success(res) {
+				const {
+					tempFilePath,
+					duration,
+					size,
+					height,
+					width
+				} = res;
+				resolve(normalizeChooseAndUploadFileRes({
+					errMsg: 'chooseVideo:ok',
+					tempFilePaths: [tempFilePath],
+					tempFiles: [{
+						name: (res.tempFile && res.tempFile.name) || '',
+						path: tempFilePath,
+						size,
+						type: (res.tempFile && res.tempFile.type) || '',
+						width,
+						height,
+						duration,
+						fileType: 'video',
+						cloudPath: '',
+					}, ],
+				}, 'video'));
+			},
+			fail(res) {
+				reject({
+					errMsg: res.errMsg.replace('chooseVideo:fail', ERR_MSG_FAIL),
+				});
+			},
+		});
+		// #endif
+	});
+}
+
+function chooseAll(opts) {
+	const {
+		count,
+		extension
+	} = opts;
+	return new Promise((resolve, reject) => {
+		let chooseFile = uni.chooseFile;
+		if (typeof wx !== 'undefined' &&
+			typeof wx.chooseMessageFile === 'function') {
+			chooseFile = wx.chooseMessageFile;
+		}
+		if (typeof chooseFile !== 'function') {
+			return reject({
+				errMsg: ERR_MSG_FAIL + ' 请指定 type 类型，该平台仅支持选择 image 或 video。',
+			});
+		}
+		chooseFile({
+			type: 'all',
+			count,
+			extension,
+			success(res) {
+				resolve(normalizeChooseAndUploadFileRes(res));
+			},
+			fail(res) {
+				reject({
+					errMsg: res.errMsg.replace('chooseFile:fail', ERR_MSG_FAIL),
+				});
+			},
+		});
+	});
+}
+
+function normalizeChooseAndUploadFileRes(res, fileType) {
+	res.tempFiles.forEach((item, index) => {
+		if (!item.name) {
+			item.name = item.path.substring(item.path.lastIndexOf('/') + 1);
+		}
+		if (fileType) {
+			item.fileType = fileType;
+		}
+		item.cloudPath =
+			Date.now() + '_' + index + item.name.substring(item.name.lastIndexOf('.'));
+	});
+	if (!res.tempFilePaths) {
+		res.tempFilePaths = res.tempFiles.map((file) => file.path);
+	}
+	return res;
+}
+
+function uploadCloudFiles(files, max = 5, onUploadProgress) {
+	files = JSON.parse(JSON.stringify(files))
+	const len = files.length
+	let count = 0
+	let self = this
+	return new Promise(resolve => {
+		while (count < max) {
+			next()
+		}
+
+		function next() {
+			let cur = count++
+			if (cur >= len) {
+				!files.find(item => !item.url && !item.errMsg) && resolve(files)
+				return
+			}
+			const fileItem = files[cur]
+			const index = self.files.findIndex(v => v.uuid === fileItem.uuid)
+			fileItem.url = ''
+			delete fileItem.errMsg
+
+			uniCloud
+				.uploadFile({
+					filePath: fileItem.path,
+					cloudPath: fileItem.cloudPath,
+					fileType: fileItem.fileType,
+					onUploadProgress: res => {
+						res.index = index
+						onUploadProgress && onUploadProgress(res)
+					}
+				})
+				.then(res => {
+					fileItem.url = res.fileID
+					fileItem.index = index
+					if (cur < len) {
+						next()
+					}
+				})
+				.catch(res => {
+					fileItem.errMsg = res.errMsg || res.message
+					fileItem.index = index
+					if (cur < len) {
+						next()
+					}
+				})
+		}
+	})
+}
+
+
+
+
+
+function uploadFiles(choosePromise, {
+	onChooseFile,
+	onUploadProgress
+}) {
+	return choosePromise
+		.then((res) => {
+			if (onChooseFile) {
+				const customChooseRes = onChooseFile(res);
+				if (typeof customChooseRes !== 'undefined') {
+					return Promise.resolve(customChooseRes).then((chooseRes) => typeof chooseRes === 'undefined' ?
+						res : chooseRes);
+				}
+			}
+			return res;
+		})
+		.then((res) => {
+			if (res === false) {
+				return {
+					errMsg: ERR_MSG_OK,
+					tempFilePaths: [],
+					tempFiles: [],
+				};
+			}
+			return res
+		})
+}
+
+function chooseAndUploadFile(opts = {
+	type: 'all'
+}) {
+	if (opts.type === 'image') {
+		return uploadFiles(chooseImage(opts), opts);
+	} else if (opts.type === 'video') {
+		return uploadFiles(chooseVideo(opts), opts);
+	}
+	return uploadFiles(chooseAll(opts), opts);
+}
+
+export {
+	chooseAndUploadFile,
+	uploadCloudFiles
+};
diff --git a/uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue b/uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue
new file mode 100644
index 0000000..fb83f63
--- /dev/null
+++ b/uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue
@@ -0,0 +1,678 @@
+<template>
+	<view class="uni-file-picker">
+		<view v-if="title" class="uni-file-picker__header">
+			<text class="file-title">{{ title }}</text>
+			<text class="file-count">{{ filesList.length }}/{{ limitLength }}</text>
+		</view>
+		<upload-image v-if="fileMediatype === 'image' && showType === 'grid'" :readonly="readonly"
+			:image-styles="imageStyles" :files-list="filesList" :limit="limitLength" :disablePreview="disablePreview"
+			:delIcon="delIcon" @uploadFiles="uploadFiles" @choose="choose" @delFile="delFile">
+			<slot>
+				<view class="is-add">
+					<view class="icon-add"></view>
+					<view class="icon-add rotate"></view>
+				</view>
+			</slot>
+		</upload-image>
+		<upload-file v-if="fileMediatype !== 'image' || showType !== 'grid'" :readonly="readonly"
+			:list-styles="listStyles" :files-list="filesList" :showType="showType" :delIcon="delIcon"
+			@uploadFiles="uploadFiles" @choose="choose" @delFile="delFile">
+			<slot><button type="primary" size="mini">选择文件</button></slot>
+		</upload-file>
+	</view>
+</template>
+
+<script>
+	import {
+		chooseAndUploadFile,
+		uploadCloudFiles
+	} from './choose-and-upload-file.js'
+	import {
+		get_file_ext,
+		get_extname,
+		get_files_and_is_max,
+		get_file_info,
+		get_file_data
+	} from './utils.js'
+	import uploadImage from './upload-image.vue'
+	import uploadFile from './upload-file.vue'
+	let fileInput = null
+	/**
+	 * FilePicker 文件选择上传
+	 * @description 文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=4079
+	 * @property {Object|Array}	value	组件数据，通常用来回显 ,类型由return-type属性决定
+	 * @property {Boolean}	disabled = [true|false]	组件禁用
+	 * 	@value true 	禁用
+	 * 	@value false 	取消禁用
+	 * @property {Boolean}	readonly = [true|false]	组件只读，不可选择，不显示进度，不显示删除按钮
+	 * 	@value true 	只读
+	 * 	@value false 	取消只读
+	 * @property {String}	return-type = [array|object]	限制 value 格式，当为 object 时 ，组件只能单选，且会覆盖
+	 * 	@value array	规定 value 属性的类型为数组
+	 * 	@value object	规定 value 属性的类型为对象
+	 * @property {Boolean}	disable-preview = [true|false]	禁用图片预览，仅 mode:grid 时生效
+	 * 	@value true 	禁用图片预览
+	 * 	@value false 	取消禁用图片预览
+	 * @property {Boolean}	del-icon = [true|false]	是否显示删除按钮
+	 * 	@value true 	显示删除按钮
+	 * 	@value false 	不显示删除按钮
+	 * @property {Boolean}	auto-upload = [true|false]	是否自动上传，值为true则只触发@select,可自行上传
+	 * 	@value true 	自动上传
+	 * 	@value false 	取消自动上传
+	 * @property {Number|String}	limit	最大选择个数 ，h5 会自动忽略多选的部分
+	 * @property {String}	title	组件标题，右侧显示上传计数
+	 * @property {String}	mode = [list|grid]	选择文件后的文件列表样式
+	 * 	@value list 	列表显示
+	 * 	@value grid 	宫格显示
+	 * @property {String}	file-mediatype = [image|video|all]	选择文件类型
+	 * 	@value image	只选择图片
+	 * 	@value video	只选择视频
+	 * 	@value all		选择所有文件
+	 * @property {Array}	file-extname	选择文件后缀，根据 file-mediatype 属性而不同
+	 * @property {Object}	list-style	mode:list 时的样式
+	 * @property {Object}	image-styles	选择文件后缀，根据 file-mediatype 属性而不同
+	 * @event {Function} select 	选择文件后触发
+	 * @event {Function} progress 文件上传时触发
+	 * @event {Function} success 	上传成功触发
+	 * @event {Function} fail 		上传失败触发
+	 * @event {Function} delete 	文件从列表移除时触发
+	 */
+	export default {
+		name: 'uniFilePicker',
+		components: {
+			uploadImage,
+			uploadFile
+		},
+		options: {
+			virtualHost: true
+		},
+		emits: ['select', 'success', 'fail', 'progress', 'delete', 'update:modelValue', 'input'],
+		props: {
+			// #ifdef VUE3
+			modelValue: {
+				type: [Array, Object],
+				default () {
+					return []
+				}
+			},
+			// #endif
+
+			// #ifndef VUE3
+			value: {
+				type: [Array, Object],
+				default () {
+					return []
+				}
+			},
+			// #endif
+
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			disablePreview: {
+				type: Boolean,
+				default: false
+			},
+			delIcon: {
+				type: Boolean,
+				default: true
+			},
+			// 自动上传
+			autoUpload: {
+				type: Boolean,
+				default: true
+			},
+			// 最大选择个数 ，h5只能限制单选或是多选
+			limit: {
+				type: [Number, String],
+				default: 9
+			},
+			// 列表样式 grid | list | list-card
+			mode: {
+				type: String,
+				default: 'grid'
+			},
+			// 选择文件类型  image/video/all
+			fileMediatype: {
+				type: String,
+				default: 'image'
+			},
+			// 文件类型筛选
+			fileExtname: {
+				type: [Array, String],
+				default () {
+					return []
+				}
+			},
+			title: {
+				type: String,
+				default: ''
+			},
+			listStyles: {
+				type: Object,
+				default () {
+					return {
+						// 是否显示边框
+						border: true,
+						// 是否显示分隔线
+						dividline: true,
+						// 线条样式
+						borderStyle: {}
+					}
+				}
+			},
+			imageStyles: {
+				type: Object,
+				default () {
+					return {
+						width: 'auto',
+						height: 'auto'
+					}
+				}
+			},
+			readonly: {
+				type: Boolean,
+				default: false
+			},
+			returnType: {
+				type: String,
+				default: 'array'
+			},
+			sizeType: {
+				type: Array,
+				default () {
+					return ['original', 'compressed']
+				}
+			},
+			sourceType: {
+				type: Array,
+				default () {
+					return  ['album', 'camera']
+				}
+			},
+			provider: {
+				type: String,
+				default: '' // 默认上传到 unicloud 内置存储 extStorage 扩展存储
+			}
+		},
+		data() {
+			return {
+				files: [],
+				localValue: []
+			}
+		},
+		watch: {
+			// #ifndef VUE3
+			value: {
+				handler(newVal, oldVal) {
+					this.setValue(newVal, oldVal)
+				},
+				immediate: true
+			},
+			// #endif
+			// #ifdef VUE3
+			modelValue: {
+				handler(newVal, oldVal) {
+					this.setValue(newVal, oldVal)
+				},
+				immediate: true
+			},
+			// #endif
+		},
+		computed: {
+			filesList() {
+				let files = []
+				this.files.forEach(v => {
+					files.push(v)
+				})
+				return files
+			},
+			showType() {
+				if (this.fileMediatype === 'image') {
+					return this.mode
+				}
+				return 'list'
+			},
+			limitLength() {
+				if (this.returnType === 'object') {
+					return 1
+				}
+				if (!this.limit) {
+					return 1
+				}
+				if (this.limit >= 9) {
+					return 9
+				}
+				return this.limit
+			}
+		},
+		created() {
+			// TODO 兼容不开通服务空间的情况
+			if (!(uniCloud.config && uniCloud.config.provider)) {
+				this.noSpace = true
+				uniCloud.chooseAndUploadFile = chooseAndUploadFile
+			}
+			this.form = this.getForm('uniForms')
+			this.formItem = this.getForm('uniFormsItem')
+			if (this.form && this.formItem) {
+				if (this.formItem.name) {
+					this.rename = this.formItem.name
+					this.form.inputChildrens.push(this)
+				}
+			}
+		},
+		methods: {
+			/**
+			 * 公开用户使用，清空文件
+			 * @param {Object} index
+			 */
+			clearFiles(index) {
+				if (index !== 0 && !index) {
+					this.files = []
+					this.$nextTick(() => {
+						this.setEmit()
+					})
+				} else {
+					this.files.splice(index, 1)
+				}
+				this.$nextTick(() => {
+					this.setEmit()
+				})
+			},
+			/**
+			 * 公开用户使用，继续上传
+			 */
+			upload() {
+				let files = []
+				this.files.forEach((v, index) => {
+					if (v.status === 'ready' || v.status === 'error') {
+						files.push(Object.assign({}, v))
+					}
+				})
+				return this.uploadFiles(files)
+			},
+			async setValue(newVal, oldVal) {
+				const newData =  async (v) => {
+					const reg = /cloud:\/\/([\w.]+\/?)\S*/
+					let url = ''
+					if(v.fileID){
+						url = v.fileID
+					}else{
+						url = v.url
+					}
+					if (reg.test(url)) {
+						v.fileID = url
+						v.url = await this.getTempFileURL(url)
+					}
+					if(v.url) v.path = v.url
+					return v
+				}
+				if (this.returnType === 'object') {
+					if (newVal) {
+						await newData(newVal)
+					} else {
+						newVal = {}
+					}
+				} else {
+					if (!newVal) newVal = []
+					for(let i =0 ;i < newVal.length ;i++){
+						let v = newVal[i]
+						await newData(v)
+					}
+				}
+				this.localValue = newVal
+				if (this.form && this.formItem &&!this.is_reset) {
+					this.is_reset = false
+					this.formItem.setValue(this.localValue)
+				}
+				let filesData = Object.keys(newVal).length > 0 ? newVal : [];
+				this.files = [].concat(filesData)
+			},
+
+			/**
+			 * 选择文件
+			 */
+			choose() {
+				if (this.disabled) return
+				if (this.files.length >= Number(this.limitLength) && this.showType !== 'grid' && this.returnType ===
+					'array') {
+					uni.showToast({
+						title: `您最多选择 ${this.limitLength} 个文件`,
+						icon: 'none'
+					})
+					return
+				}
+				this.chooseFiles()
+			},
+
+			/**
+			 * 选择文件并上传
+			 */
+			chooseFiles() {
+				const _extname = get_extname(this.fileExtname)
+				// 获取后缀
+				uniCloud
+					.chooseAndUploadFile({
+						type: this.fileMediatype,
+						compressed: false,
+						sizeType: this.sizeType,
+						sourceType: this.sourceType,
+						// TODO 如果为空，video 有问题
+						extension: _extname.length > 0 ? _extname : undefined,
+						count: this.limitLength - this.files.length, //默认9
+						onChooseFile: this.chooseFileCallback,
+						onUploadProgress: progressEvent => {
+							this.setProgress(progressEvent, progressEvent.index)
+						}
+					})
+					.then(result => {
+						this.setSuccessAndError(result.tempFiles)
+					})
+					.catch(err => {
+						console.log('选择失败', err)
+					})
+			},
+
+			/**
+			 * 选择文件回调
+			 * @param {Object} res
+			 */
+			async chooseFileCallback(res) {
+				const _extname = get_extname(this.fileExtname)
+				const is_one = (Number(this.limitLength) === 1 &&
+						this.disablePreview &&
+						!this.disabled) ||
+					this.returnType === 'object'
+				// 如果这有一个文件 ，需要清空本地缓存数据
+				if (is_one) {
+					this.files = []
+				}
+
+				let {
+					filePaths,
+					files
+				} = get_files_and_is_max(res, _extname)
+				if (!(_extname && _extname.length > 0)) {
+					filePaths = res.tempFilePaths
+					files = res.tempFiles
+				}
+
+				let currentData = []
+				for (let i = 0; i < files.length; i++) {
+					if (this.limitLength - this.files.length <= 0) break
+					files[i].uuid = Date.now()
+					let filedata = await get_file_data(files[i], this.fileMediatype)
+					filedata.progress = 0
+					filedata.status = 'ready'
+					this.files.push(filedata)
+					currentData.push({
+						...filedata,
+						file: files[i]
+					})
+				}
+				this.$emit('select', {
+					tempFiles: currentData,
+					tempFilePaths: filePaths
+				})
+				res.tempFiles = files
+				// 停止自动上传
+				if (!this.autoUpload || this.noSpace) {
+					res.tempFiles = []
+				}
+				res.tempFiles.forEach((fileItem, index) => {
+					this.provider && (fileItem.provider = this.provider);
+					const fileNameSplit = fileItem.name.split('.')
+					const ext = fileNameSplit.pop()
+					const fileName = fileNameSplit.join('.').replace(/[\s\/\?<>\\:\*\|":]/g, '_')
+					fileItem.cloudPath = fileName + '_' + Date.now() + '_' + index + '.' + ext
+				})
+			},
+
+			/**
+			 * 批传
+			 * @param {Object} e
+			 */
+			uploadFiles(files) {
+				files = [].concat(files)
+				return uploadCloudFiles.call(this, files, 5, res => {
+						this.setProgress(res, res.index, true)
+					})
+					.then(result => {
+						this.setSuccessAndError(result)
+						return result;
+					})
+					.catch(err => {
+						console.log(err)
+					})
+			},
+
+			/**
+			 * 成功或失败
+			 */
+			async setSuccessAndError(res, fn) {
+				let successData = []
+				let errorData = []
+				let tempFilePath = []
+				let errorTempFilePath = []
+				for (let i = 0; i < res.length; i++) {
+					const item = res[i]
+					const index = item.uuid ? this.files.findIndex(p => p.uuid === item.uuid) : item.index
+
+					if (index === -1 || !this.files) break
+					if (item.errMsg === 'request:fail') {
+						this.files[index].url = item.path
+						this.files[index].status = 'error'
+						this.files[index].errMsg = item.errMsg
+						// this.files[index].progress = -1
+						errorData.push(this.files[index])
+						errorTempFilePath.push(this.files[index].url)
+					} else {
+						this.files[index].errMsg = ''
+						this.files[index].fileID = item.url
+						const reg = /cloud:\/\/([\w.]+\/?)\S*/
+						if (reg.test(item.url)) {
+							this.files[index].url = await this.getTempFileURL(item.url)
+						}else{
+							this.files[index].url = item.url
+						}
+
+						this.files[index].status = 'success'
+						this.files[index].progress += 1
+						successData.push(this.files[index])
+						tempFilePath.push(this.files[index].fileID)
+					}
+				}
+
+				if (successData.length > 0) {
+					this.setEmit()
+					// 状态改变返回
+					this.$emit('success', {
+						tempFiles: this.backObject(successData),
+						tempFilePaths: tempFilePath
+					})
+				}
+
+				if (errorData.length > 0) {
+					this.$emit('fail', {
+						tempFiles: this.backObject(errorData),
+						tempFilePaths: errorTempFilePath
+					})
+				}
+			},
+
+			/**
+			 * 获取进度
+			 * @param {Object} progressEvent
+			 * @param {Object} index
+			 * @param {Object} type
+			 */
+			setProgress(progressEvent, index, type) {
+				const fileLenth = this.files.length
+				const percentNum = (index / fileLenth) * 100
+				const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+				let idx = index
+				if (!type) {
+					idx = this.files.findIndex(p => p.uuid === progressEvent.tempFile.uuid)
+				}
+				if (idx === -1 || !this.files[idx]) return
+				// fix by mehaotian 100 就会消失，-1 是为了让进度条消失
+				this.files[idx].progress = percentCompleted - 1
+				// 上传中
+				this.$emit('progress', {
+					index: idx,
+					progress: parseInt(percentCompleted),
+					tempFile: this.files[idx]
+				})
+			},
+
+			/**
+			 * 删除文件
+			 * @param {Object} index
+			 */
+			delFile(index) {
+				this.$emit('delete', {
+					index,
+					tempFile: this.files[index],
+					tempFilePath: this.files[index].url
+				})
+				this.files.splice(index, 1)
+				this.$nextTick(() => {
+					this.setEmit()
+				})
+			},
+
+			/**
+			 * 获取文件名和后缀
+			 * @param {Object} name
+			 */
+			getFileExt(name) {
+				const last_len = name.lastIndexOf('.')
+				const len = name.length
+				return {
+					name: name.substring(0, last_len),
+					ext: name.substring(last_len + 1, len)
+				}
+			},
+
+			/**
+			 * 处理返回事件
+			 */
+			setEmit() {
+				let data = []
+				if (this.returnType === 'object') {
+					data = this.backObject(this.files)[0]
+					this.localValue = data?data:null
+				} else {
+					data = this.backObject(this.files)
+					if (!this.localValue) {
+						this.localValue = []
+					}
+					this.localValue = [...data]
+				}
+				// #ifdef VUE3
+				this.$emit('update:modelValue', this.localValue)
+				// #endif
+				// #ifndef VUE3
+				this.$emit('input', this.localValue)
+				// #endif
+			},
+
+			/**
+			 * 处理返回参数
+			 * @param {Object} files
+			 */
+			backObject(files) {
+				let newFilesData = []
+				files.forEach(v => {
+					newFilesData.push({
+						extname: v.extname,
+						fileType: v.fileType,
+						image: v.image,
+						name: v.name,
+						path: v.path,
+						size: v.size,
+						fileID:v.fileID,
+						url: v.url,
+						// 修改删除一个文件后不能再上传的bug, #694
+            uuid: v.uuid,
+            status: v.status,
+            cloudPath: v.cloudPath
+					})
+				})
+				return newFilesData
+			},
+			async getTempFileURL(fileList) {
+				fileList = {
+					fileList: [].concat(fileList)
+				}
+				const urls = await uniCloud.getTempFileURL(fileList)
+				return urls.fileList[0].tempFileURL || ''
+			},
+			/**
+			 * 获取父元素实例
+			 */
+			getForm(name = 'uniForms') {
+				let parent = this.$parent;
+				let parentName = parent.$options.name;
+				while (parentName !== name) {
+					parent = parent.$parent;
+					if (!parent) return false;
+					parentName = parent.$options.name;
+				}
+				return parent;
+			}
+		}
+	}
+</script>
+
+<style>
+	.uni-file-picker {
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		overflow: hidden;
+		width: 100%;
+		/* #endif */
+		flex: 1;
+	}
+
+	.uni-file-picker__header {
+		padding-top: 5px;
+		padding-bottom: 10px;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: space-between;
+	}
+
+	.file-title {
+		font-size: 14px;
+		color: #333;
+	}
+
+	.file-count {
+		font-size: 14px;
+		color: #999;
+	}
+
+	.is-add {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		align-items: center;
+		justify-content: center;
+	}
+
+	.icon-add {
+		width: 50px;
+		height: 5px;
+		background-color: #f1f1f1;
+		border-radius: 2px;
+	}
+
+	.rotate {
+		position: absolute;
+		transform: rotate(90deg);
+	}
+</style>
diff --git a/uni_modules/uni-file-picker/components/uni-file-picker/upload-file.vue b/uni_modules/uni-file-picker/components/uni-file-picker/upload-file.vue
new file mode 100644
index 0000000..625d92e
--- /dev/null
+++ b/uni_modules/uni-file-picker/components/uni-file-picker/upload-file.vue
@@ -0,0 +1,325 @@
+<template>
+	<view class="uni-file-picker__files">
+		<view v-if="!readonly" class="files-button" @click="choose">
+			<slot></slot>
+		</view>
+		<!-- :class="{'is-text-box':showType === 'list'}" -->
+		<view v-if="list.length > 0" class="uni-file-picker__lists is-text-box" :style="borderStyle">
+			<!-- ,'is-list-card':showType === 'list-card' -->
+
+			<view class="uni-file-picker__lists-box" v-for="(item ,index) in list" :key="index" :class="{
+				'files-border':index !== 0 && styles.dividline}"
+			 :style="index !== 0 && styles.dividline &&borderLineStyle">
+				<view class="uni-file-picker__item">
+					<!-- :class="{'is-text-image':showType === 'list'}" -->
+					<!-- 	<view class="files__image is-text-image">
+						<image class="header-image" :src="item.logo" mode="aspectFit"></image>
+					</view> -->
+					<view class="files__name">{{item.name}}</view>
+					<view v-if="delIcon&&!readonly" class="icon-del-box icon-files" @click="delFile(index)">
+						<view class="icon-del icon-files"></view>
+						<view class="icon-del rotate"></view>
+					</view>
+				</view>
+				<view v-if="(item.progress && item.progress !== 100) ||item.progress===0 " class="file-picker__progress">
+					<progress class="file-picker__progress-item" :percent="item.progress === -1?0:item.progress" stroke-width="4"
+					 :backgroundColor="item.errMsg?'#ff5a5f':'#EBEBEB'" />
+				</view>
+				<view v-if="item.status === 'error'" class="file-picker__mask" @click.stop="uploadFiles(item,index)">
+					点击重试
+				</view>
+			</view>
+
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "uploadFile",
+		emits:['uploadFiles','choose','delFile'],
+		props: {
+			filesList: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			delIcon: {
+				type: Boolean,
+				default: true
+			},
+			limit: {
+				type: [Number, String],
+				default: 9
+			},
+			showType: {
+				type: String,
+				default: ''
+			},
+			listStyles: {
+				type: Object,
+				default () {
+					return {
+						// 是否显示边框
+						border: true,
+						// 是否显示分隔线
+						dividline: true,
+						// 线条样式
+						borderStyle: {}
+					}
+				}
+			},
+			readonly:{
+				type:Boolean,
+				default:false
+			}
+		},
+		computed: {
+			list() {
+				let files = []
+				this.filesList.forEach(v => {
+					files.push(v)
+				})
+				return files
+			},
+			styles() {
+				let styles = {
+					border: true,
+					dividline: true,
+					'border-style': {}
+				}
+				return Object.assign(styles, this.listStyles)
+			},
+			borderStyle() {
+				let {
+					borderStyle,
+					border
+				} = this.styles
+				let obj = {}
+				if (!border) {
+					obj.border = 'none'
+				} else {
+					let width = (borderStyle && borderStyle.width) || 1
+					width = this.value2px(width)
+					let radius = (borderStyle && borderStyle.radius) || 5
+					radius = this.value2px(radius)
+					obj = {
+						'border-width': width,
+						'border-style': (borderStyle && borderStyle.style) || 'solid',
+						'border-color': (borderStyle && borderStyle.color) || '#eee',
+						'border-radius': radius
+					}
+				}
+				let classles = ''
+				for (let i in obj) {
+					classles += `${i}:${obj[i]};`
+				}
+				return classles
+			},
+			borderLineStyle() {
+				let obj = {}
+				let {
+					borderStyle
+				} = this.styles
+				if (borderStyle && borderStyle.color) {
+					obj['border-color'] = borderStyle.color
+				}
+				if (borderStyle && borderStyle.width) {
+					let width = borderStyle && borderStyle.width || 1
+					let style = borderStyle && borderStyle.style || 0
+					if (typeof width === 'number') {
+						width += 'px'
+					} else {
+						width = width.indexOf('px') ? width : width + 'px'
+					}
+					obj['border-width'] = width
+
+					if (typeof style === 'number') {
+						style += 'px'
+					} else {
+						style = style.indexOf('px') ? style : style + 'px'
+					}
+					obj['border-top-style'] = style
+				}
+				let classles = ''
+				for (let i in obj) {
+					classles += `${i}:${obj[i]};`
+				}
+				return classles
+			}
+		},
+
+		methods: {
+			uploadFiles(item, index) {
+				this.$emit("uploadFiles", {
+					item,
+					index
+				})
+			},
+			choose() {
+				this.$emit("choose")
+			},
+			delFile(index) {
+				this.$emit('delFile', index)
+			},
+			value2px(value) {
+				if (typeof value === 'number') {
+					value += 'px'
+				} else {
+					value = value.indexOf('px') !== -1 ? value : value + 'px'
+				}
+				return value
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.uni-file-picker__files {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: flex-start;
+	}
+
+	.files-button {
+		// border: 1px red solid;
+	}
+
+	.uni-file-picker__lists {
+		position: relative;
+		margin-top: 5px;
+		overflow: hidden;
+	}
+
+	.file-picker__mask {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center;
+		position: absolute;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		color: #fff;
+		font-size: 14px;
+		background-color: rgba(0, 0, 0, 0.4);
+	}
+
+	.uni-file-picker__lists-box {
+		position: relative;
+	}
+
+	.uni-file-picker__item {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		align-items: center;
+		padding: 8px 10px;
+		padding-right: 5px;
+		padding-left: 10px;
+	}
+
+	.files-border {
+		border-top: 1px #eee solid;
+	}
+
+	.files__name {
+		flex: 1;
+		font-size: 14px;
+		color: #666;
+		margin-right: 25px;
+		/* #ifndef APP-NVUE */
+		word-break: break-all;
+		word-wrap: break-word;
+		/* #endif */
+	}
+
+	.icon-files {
+		/* #ifndef APP-NVUE */
+		position: static;
+		background-color: initial;
+		/* #endif */
+	}
+
+	// .icon-files .icon-del {
+	// 	background-color: #333;
+	// 	width: 12px;
+	// 	height: 1px;
+	// }
+
+
+	.is-list-card {
+		border: 1px #eee solid;
+		margin-bottom: 5px;
+		border-radius: 5px;
+		box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);
+		padding: 5px;
+	}
+
+	.files__image {
+		width: 40px;
+		height: 40px;
+		margin-right: 10px;
+	}
+
+	.header-image {
+		width: 100%;
+		height: 100%;
+	}
+
+	.is-text-box {
+		border: 1px #eee solid;
+		border-radius: 5px;
+	}
+
+	.is-text-image {
+		width: 25px;
+		height: 25px;
+		margin-left: 5px;
+	}
+
+	.rotate {
+		position: absolute;
+		transform: rotate(90deg);
+	}
+
+	.icon-del-box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		margin: auto 0;
+		/* #endif */
+		align-items: center;
+		justify-content: center;
+		position: absolute;
+		top: 0px;
+		bottom: 0;
+		right: 5px;
+		height: 26px;
+		width: 26px;
+		// border-radius: 50%;
+		// background-color: rgba(0, 0, 0, 0.5);
+		z-index: 2;
+		transform: rotate(-45deg);
+	}
+
+	.icon-del {
+		width: 15px;
+		height: 1px;
+		background-color: #333;
+		// border-radius: 1px;
+	}
+
+	/* #ifdef H5 */
+	@media all and (min-width: 768px) {
+		.uni-file-picker__files {
+			max-width: 375px;
+		}
+	}
+
+	/* #endif */
+</style>
diff --git a/uni_modules/uni-file-picker/components/uni-file-picker/upload-image.vue b/uni_modules/uni-file-picker/components/uni-file-picker/upload-image.vue
new file mode 100644
index 0000000..2a29bc2
--- /dev/null
+++ b/uni_modules/uni-file-picker/components/uni-file-picker/upload-image.vue
@@ -0,0 +1,292 @@
+<template>
+	<view class="uni-file-picker__container">
+		<view class="file-picker__box" v-for="(item,index) in filesList" :key="index" :style="boxStyle">
+			<view class="file-picker__box-content" :style="borderStyle">
+				<image class="file-image" :src="item.url" mode="aspectFill" @click.stop="prviewImage(item,index)"></image>
+				<view v-if="delIcon && !readonly" class="icon-del-box" @click.stop="delFile(index)">
+					<view class="icon-del"></view>
+					<view class="icon-del rotate"></view>
+				</view>
+				<view v-if="(item.progress && item.progress !== 100) ||item.progress===0 " class="file-picker__progress">
+					<progress class="file-picker__progress-item" :percent="item.progress === -1?0:item.progress" stroke-width="4"
+					 :backgroundColor="item.errMsg?'#ff5a5f':'#EBEBEB'" />
+				</view>
+				<view v-if="item.errMsg" class="file-picker__mask" @click.stop="uploadFiles(item,index)">
+					点击重试
+				</view>
+			</view>
+		</view>
+		<view v-if="filesList.length < limit && !readonly" class="file-picker__box" :style="boxStyle">
+			<view class="file-picker__box-content is-add" :style="borderStyle" @click="choose">
+				<slot>
+					<view class="icon-add"></view>
+					<view class="icon-add rotate"></view>
+				</slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "uploadImage",
+		emits:['uploadFiles','choose','delFile'],
+		props: {
+			filesList: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			disabled:{
+				type: Boolean,
+				default: false
+			},
+			disablePreview: {
+				type: Boolean,
+				default: false
+			},
+			limit: {
+				type: [Number, String],
+				default: 9
+			},
+			imageStyles: {
+				type: Object,
+				default () {
+					return {
+						width: 'auto',
+						height: 'auto',
+						border: {}
+					}
+				}
+			},
+			delIcon: {
+				type: Boolean,
+				default: true
+			},
+			readonly:{
+				type:Boolean,
+				default:false
+			}
+		},
+		computed: {
+			styles() {
+				let styles = {
+					width: 'auto',
+					height: 'auto',
+					border: {}
+				}
+				return Object.assign(styles, this.imageStyles)
+			},
+			boxStyle() {
+				const {
+					width = 'auto',
+						height = 'auto'
+				} = this.styles
+				let obj = {}
+				if (height === 'auto') {
+					if (width !== 'auto') {
+						obj.height = this.value2px(width)
+						obj['padding-top'] = 0
+					} else {
+						obj.height = 0
+					}
+				} else {
+					obj.height = this.value2px(height)
+					obj['padding-top'] = 0
+				}
+
+				if (width === 'auto') {
+					if (height !== 'auto') {
+						obj.width = this.value2px(height)
+					} else {
+						obj.width = '33.3%'
+					}
+				} else {
+					obj.width = this.value2px(width)
+				}
+
+				let classles = ''
+				for(let i in obj){
+					classles+= `${i}:${obj[i]};`
+				}
+				return classles
+			},
+			borderStyle() {
+				let {
+					border
+				} = this.styles
+				let obj = {}
+				const widthDefaultValue = 1
+				const radiusDefaultValue = 3
+				if (typeof border === 'boolean') {
+					obj.border = border ? '1px #eee solid' : 'none'
+				} else {
+					let width = (border && border.width) || widthDefaultValue
+					width = this.value2px(width)
+					let radius = (border && border.radius) || radiusDefaultValue
+					radius = this.value2px(radius)
+					obj = {
+						'border-width': width,
+						'border-style': (border && border.style) || 'solid',
+						'border-color': (border && border.color) || '#eee',
+						'border-radius': radius
+					}
+				}
+				let classles = ''
+				for(let i in obj){
+					classles+= `${i}:${obj[i]};`
+				}
+				return classles
+			}
+		},
+		methods: {
+			uploadFiles(item, index) {
+				this.$emit("uploadFiles", item)
+			},
+			choose() {
+				this.$emit("choose")
+			},
+			delFile(index) {
+				this.$emit('delFile', index)
+			},
+			prviewImage(img, index) {
+				let urls = []
+				if(Number(this.limit) === 1&&this.disablePreview&&!this.disabled){
+					this.$emit("choose")
+				}
+				if(this.disablePreview) return
+				this.filesList.forEach(i => {
+					urls.push(i.url)
+				})
+
+				uni.previewImage({
+					urls: urls,
+					current: index
+				});
+			},
+			value2px(value) {
+				if (typeof value === 'number') {
+					value += 'px'
+				} else {
+					if (value.indexOf('%') === -1) {
+						value = value.indexOf('px') !== -1 ? value : value + 'px'
+					}
+				}
+				return value
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.uni-file-picker__container {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		box-sizing: border-box;
+		/* #endif */
+		flex-wrap: wrap;
+		margin: -5px;
+	}
+
+	.file-picker__box {
+		position: relative;
+		// flex: 0 0 33.3%;
+		width: 33.3%;
+		height: 0;
+		padding-top: 33.33%;
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		/* #endif */
+	}
+
+	.file-picker__box-content {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		margin: 5px;
+		border: 1px #eee solid;
+		border-radius: 5px;
+		overflow: hidden;
+	}
+
+	.file-picker__progress {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		/* border: 1px red solid; */
+		z-index: 2;
+	}
+
+	.file-picker__progress-item {
+		width: 100%;
+	}
+
+	.file-picker__mask {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center;
+		position: absolute;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		color: #fff;
+		font-size: 12px;
+		background-color: rgba(0, 0, 0, 0.4);
+	}
+
+	.file-image {
+		width: 100%;
+		height: 100%;
+	}
+
+	.is-add {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		align-items: center;
+		justify-content: center;
+	}
+
+	.icon-add {
+		width: 50px;
+		height: 5px;
+		background-color: #f1f1f1;
+		border-radius: 2px;
+	}
+
+	.rotate {
+		position: absolute;
+		transform: rotate(90deg);
+	}
+
+	.icon-del-box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		align-items: center;
+		justify-content: center;
+		position: absolute;
+		top: 3px;
+		right: 3px;
+		height: 26px;
+		width: 26px;
+		border-radius: 50%;
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 2;
+		transform: rotate(-45deg);
+	}
+
+	.icon-del {
+		width: 15px;
+		height: 2px;
+		background-color: #fff;
+		border-radius: 2px;
+	}
+</style>
diff --git a/uni_modules/uni-file-picker/components/uni-file-picker/utils.js b/uni_modules/uni-file-picker/components/uni-file-picker/utils.js
new file mode 100644
index 0000000..1bc9259
--- /dev/null
+++ b/uni_modules/uni-file-picker/components/uni-file-picker/utils.js
@@ -0,0 +1,110 @@
+/**
+ * 获取文件名和后缀
+ * @param {String} name
+ */
+export const get_file_ext = (name) => {
+	const last_len = name.lastIndexOf('.')
+	const len = name.length
+	return {
+		name: name.substring(0, last_len),
+		ext: name.substring(last_len + 1, len)
+	}
+}
+
+/**
+ * 获取扩展名
+ * @param {Array} fileExtname
+ */
+export const get_extname = (fileExtname) => {
+	if (!Array.isArray(fileExtname)) {
+		let extname = fileExtname.replace(/(\[|\])/g, '')
+		return extname.split(',')
+	} else {
+		return fileExtname
+	}
+	return []
+}
+
+/**
+ * 获取文件和检测是否可选
+ */
+export const get_files_and_is_max = (res, _extname) => {
+	let filePaths = []
+	let files = []
+	if(!_extname || _extname.length === 0){
+		return {
+			filePaths,
+			files
+		}
+	}
+	res.tempFiles.forEach(v => {
+		let fileFullName = get_file_ext(v.name)
+		const extname = fileFullName.ext.toLowerCase()
+		if (_extname.indexOf(extname) !== -1) {
+			files.push(v)
+			filePaths.push(v.path)
+		}
+	})
+	if (files.length !== res.tempFiles.length) {
+		uni.showToast({
+			title: `当前选择了${res.tempFiles.length}个文件 ，${res.tempFiles.length - files.length} 个文件格式不正确`,
+			icon: 'none',
+			duration: 5000
+		})
+	}
+
+	return {
+		filePaths,
+		files
+	}
+}
+
+
+/**
+ * 获取图片信息
+ * @param {Object} filepath
+ */
+export const get_file_info = (filepath) => {
+	return new Promise((resolve, reject) => {
+		uni.getImageInfo({
+			src: filepath,
+			success(res) {
+				resolve(res)
+			},
+			fail(err) {
+				reject(err)
+			}
+		})
+	})
+}
+/**
+ * 获取封装数据
+ */
+export const get_file_data = async (files, type = 'image') => {
+	// 最终需要上传数据库的数据
+	let fileFullName = get_file_ext(files.name)
+	const extname = fileFullName.ext.toLowerCase()
+	let filedata = {
+		name: files.name,
+		uuid: files.uuid,
+		extname: extname || '',
+		cloudPath: files.cloudPath,
+		fileType: files.fileType,
+		thumbTempFilePath: files.thumbTempFilePath,
+		url: files.path || files.path,
+		size: files.size, //单位是字节
+		image: {},
+		path: files.path,
+		video: {}
+	}
+	if (type === 'image') {
+		const imageinfo = await get_file_info(files.path)
+		delete filedata.video
+		filedata.image.width = imageinfo.width
+		filedata.image.height = imageinfo.height
+		filedata.image.location = imageinfo.path
+	} else {
+		delete filedata.image
+	}
+	return filedata
+}
diff --git a/uni_modules/uni-file-picker/package.json b/uni_modules/uni-file-picker/package.json
new file mode 100644
index 0000000..004d330
--- /dev/null
+++ b/uni_modules/uni-file-picker/package.json
@@ -0,0 +1,83 @@
+{
+  "id": "uni-file-picker",
+  "displayName": "uni-file-picker 文件选择上传",
+  "version": "1.0.8",
+  "description": "文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "图片上传",
+    "文件上传"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "n"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/uni_modules/uni-file-picker/readme.md b/uni_modules/uni-file-picker/readme.md
new file mode 100644
index 0000000..c8399a5
--- /dev/null
+++ b/uni_modules/uni-file-picker/readme.md
@@ -0,0 +1,11 @@
+
+## FilePicker 文件选择上传
+
+> **组件名：uni-file-picker**
+>  代码块： `uFilePicker`
+
+
+文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-file-picker)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/uni_modules/uni-forms/changelog.md b/uni_modules/uni-forms/changelog.md
new file mode 100644
index 0000000..3d998bc
--- /dev/null
+++ b/uni_modules/uni-forms/changelog.md
@@ -0,0 +1,94 @@
+## 1.4.10（2023-11-03）
+- 优化 labelWidth 描述错误
+## 1.4.9（2023-02-10）
+- 修复 required 参数无法动态绑定
+## 1.4.8（2022-08-23）
+- 优化 根据 rules 自动添加 required 的问题
+## 1.4.7（2022-08-22）
+- 修复 item 未设置 require 属性，rules 设置 require 后，星号也显示的 bug，详见：[https://ask.dcloud.net.cn/question/151540](https://ask.dcloud.net.cn/question/151540)
+## 1.4.6（2022-07-13）
+- 修复 model 需要校验的值没有声明对应字段时，导致第一次不触发校验的bug
+## 1.4.5（2022-07-05）
+- 新增 更多表单示例
+- 优化 子表单组件过期提示的问题
+- 优化 子表单组件uni-datetime-picker、uni-data-select、uni-data-picker的显示样式
+## 1.4.4（2022-07-04）
+- 更新 删除组件日志
+## 1.4.3（2022-07-04）
+- 修复 由 1.4.0 引发的 label 插槽不生效的bug
+## 1.4.2（2022-07-04）
+- 修复 子组件找不到 setValue 报错的bug
+## 1.4.1（2022-07-04）
+- 修复 uni-data-picker 在 uni-forms-item 中报错的bug
+- 修复 uni-data-picker 在 uni-forms-item 中宽度不正确的bug
+## 1.4.0（2022-06-30）
+- 【重要】组件逻辑重构，部分用法用旧版本不兼容，请注意兼容问题
+- 【重要】组件使用 Provide/Inject 方式注入依赖，提供了自定义表单组件调用 uni-forms 校验表单的能力
+- 新增 model 属性，等同于原 value/modelValue 属性，旧属性即将废弃
+- 新增 validateTrigger 属性的 blur 值，仅 uni-easyinput 生效
+- 新增 onFieldChange 方法，可以对子表单进行校验，可替代binddata方法
+- 新增 子表单的 setRules 方法，配合自定义校验函数使用
+- 新增 uni-forms-item 的 setRules 方法，配置动态表单使用可动态更新校验规则
+- 优化 动态表单校验方式，废弃拼接name的方式
+## 1.3.3（2022-06-22）
+- 修复 表单校验顺序无序问题
+## 1.3.2（2021-12-09）
+-
+## 1.3.1（2021-11-19）
+- 修复 label 插槽不生效的bug
+## 1.3.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-forms](https://uniapp.dcloud.io/component/uniui/uni-forms)
+## 1.2.7（2021-08-13）
+- 修复 没有添加校验规则的字段依然报错的Bug
+## 1.2.6（2021-08-11）
+- 修复 重置表单错误信息无法清除的问题
+## 1.2.5（2021-08-11）
+- 优化 组件文档
+## 1.2.4（2021-08-11）
+- 修复 表单验证只生效一次的问题
+## 1.2.3（2021-07-30）
+- 优化 vue3下事件警告的问题
+## 1.2.2（2021-07-26）
+- 修复 vue2 下条件编译导致destroyed生命周期失效的Bug
+- 修复 1.2.1 引起的示例在小程序平台报错的Bug
+## 1.2.1（2021-07-22）
+- 修复 动态校验表单，默认值为空的情况下校验失效的Bug
+- 修复 不指定name属性时，运行报错的Bug
+- 优化 label默认宽度从65调整至70，使required为true且四字时不换行
+- 优化 组件示例，新增动态校验示例代码
+- 优化 组件文档，使用方式更清晰
+## 1.2.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.1.2（2021-06-25）
+- 修复 pattern 属性在微信小程序平台无效的问题
+## 1.1.1（2021-06-22）
+- 修复 validate-trigger属性为submit且err-show-type属性为toast时不能弹出的Bug
+## 1.1.0（2021-06-22）
+- 修复 只写setRules方法而导致校验不生效的Bug
+- 修复 由上个办法引发的错误提示文字错位的Bug
+## 1.0.48（2021-06-21）
+- 修复 不设置 label 属性 ，无法设置label插槽的问题
+## 1.0.47（2021-06-21）
+- 修复 不设置label属性，label-width属性不生效的bug
+- 修复 setRules 方法与rules属性冲突的问题
+## 1.0.46（2021-06-04）
+- 修复 动态删减数据导致报错的问题
+## 1.0.45（2021-06-04）
+- 新增 modelValue 属性 ，value 即将废弃
+## 1.0.44（2021-06-02）
+- 新增 uni-forms-item 可以设置单独的 rules
+- 新增 validate 事件增加 keepitem 参数，可以选择那些字段不过滤
+- 优化 submit 事件重命名为 validate
+## 1.0.43（2021-05-12）
+- 新增 组件示例地址
+## 1.0.42（2021-04-30）
+- 修复 自定义检验器失效的问题
+## 1.0.41（2021-03-05）
+- 更新 校验器
+- 修复 表单规则设置类型为 number 的情况下，值为0校验失败的Bug
+## 1.0.40（2021-03-04）
+- 修复 动态显示uni-forms-item的情况下，submit 方法获取值错误的Bug
+## 1.0.39（2021-02-05）
+- 调整为uni_modules目录规范
+- 修复 校验器传入 int 等类型 ，返回String类型的Bug
diff --git a/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue b/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue
new file mode 100644
index 0000000..0aef9cc
--- /dev/null
+++ b/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue
@@ -0,0 +1,627 @@
+<template>
+	<view class="uni-forms-item"
+		:class="['is-direction-' + localLabelPos ,border?'uni-forms-item--border':'' ,border && isFirstBorder?'is-first-border':'']">
+		<slot name="label">
+			<view class="uni-forms-item__label" :class="{'no-label':!label && !required}"
+				:style="{width:localLabelWidth,justifyContent: localLabelAlign}">
+				<text v-if="required" class="is-required">*</text>
+				<text>{{label}}</text>
+			</view>
+		</slot>
+		<!-- #ifndef APP-NVUE -->
+		<view class="uni-forms-item__content">
+			<slot></slot>
+			<view class="uni-forms-item__error" :class="{'msg--active':msg}">
+				<text>{{msg}}</text>
+			</view>
+		</view>
+		<!-- #endif -->
+		<!-- #ifdef APP-NVUE -->
+		<view class="uni-forms-item__nuve-content">
+			<view class="uni-forms-item__content">
+				<slot></slot>
+			</view>
+			<view class="uni-forms-item__error" :class="{'msg--active':msg}">
+				<text class="error-text">{{msg}}</text>
+			</view>
+		</view>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+	/**
+	 * uni-fomrs-item 表单子组件
+	 * @description uni-fomrs-item 表单子组件，提供了基础布局已经校验能力
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=2773
+	 * @property {Boolean} required 是否必填，左边显示红色"*"号
+	 * @property {String } 	label 				输入框左边的文字提示
+	 * @property {Number } 	labelWidth 			label的宽度，单位px（默认70）
+	 * @property {String } 	labelAlign = [left|center|right] label的文字对齐方式（默认left）
+	 * 	@value left		label 左侧显示
+	 * 	@value center	label 居中
+	 * 	@value right	label 右侧对齐
+	 * @property {String } 	errorMessage 		显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
+	 * @property {String } 	name 				表单域的属性名，在使用校验规则时必填
+	 * @property {String } 	leftIcon 			【1.4.0废弃】label左边的图标，限 uni-ui 的图标名称
+	 * @property {String } 	iconColor 		【1.4.0废弃】左边通过icon配置的图标的颜色（默认#606266）
+	 * @property {String} validateTrigger = [bind|submit|blur]	【1.4.0废弃】校验触发器方式 默认 submit
+	 * 	@value bind 	发生变化时触发
+	 * 	@value submit 提交时触发
+	 * 	@value blur 	失去焦点触发
+	 * @property {String } 	labelPosition = [top|left] 【1.4.0废弃】label的文字的位置（默认left）
+	 * 	@value top	顶部显示 label
+	 * 	@value left	左侧显示 label
+	 */
+
+	export default {
+		name: 'uniFormsItem',
+		options: {
+			virtualHost: true
+		},
+		provide() {
+			return {
+				uniFormItem: this
+			}
+		},
+		inject: {
+			form: {
+				from: 'uniForm',
+				default: null
+			},
+		},
+		props: {
+			// 表单校验规则
+			rules: {
+				type: Array,
+				default () {
+					return null;
+				}
+			},
+			// 表单域的属性名，在使用校验规则时必填
+			name: {
+				type: [String, Array],
+				default: ''
+			},
+			required: {
+				type: Boolean,
+				default: false
+			},
+			label: {
+				type: String,
+				default: ''
+			},
+			// label的宽度
+			labelWidth: {
+				type: [String, Number],
+				default: ''
+			},
+			// label 居中方式，默认 left 取值 left/center/right
+			labelAlign: {
+				type: String,
+				default: ''
+			},
+			// 强制显示错误信息
+			errorMessage: {
+				type: [String, Boolean],
+				default: ''
+			},
+			// 1.4.0 弃用，统一使用 form 的校验时机
+			// validateTrigger: {
+			// 	type: String,
+			// 	default: ''
+			// },
+			// 1.4.0 弃用，统一使用 form 的label 位置
+			// labelPosition: {
+			// 	type: String,
+			// 	default: ''
+			// },
+			// 1.4.0 以下属性已经废弃，请使用  #label 插槽代替
+			leftIcon: String,
+			iconColor: {
+				type: String,
+				default: '#606266'
+			},
+		},
+		data() {
+			return {
+				errMsg: '',
+				userRules: null,
+				localLabelAlign: 'left',
+				localLabelWidth: '70px',
+				localLabelPos: 'left',
+				border: false,
+				isFirstBorder: false,
+			};
+		},
+		computed: {
+			// 处理错误信息
+			msg() {
+				return this.errorMessage || this.errMsg;
+			}
+		},
+		watch: {
+			// 规则发生变化通知子组件更新
+			'form.formRules'(val) {
+				// TODO 处理头条vue3 watch不生效的问题
+				// #ifndef MP-TOUTIAO
+				this.init()
+				// #endif
+			},
+			'form.labelWidth'(val) {
+				// 宽度
+				this.localLabelWidth = this._labelWidthUnit(val)
+
+			},
+			'form.labelPosition'(val) {
+				// 标签位置
+				this.localLabelPos = this._labelPosition()
+			},
+			'form.labelAlign'(val) {
+
+			}
+		},
+		created() {
+			this.init(true)
+			if (this.name && this.form) {
+				// TODO 处理头条vue3 watch不生效的问题
+				// #ifdef MP-TOUTIAO
+				this.$watch('form.formRules', () => {
+					this.init()
+				})
+				// #endif
+
+				// 监听变化
+				this.$watch(
+					() => {
+						const val = this.form._getDataValue(this.name, this.form.localData)
+						return val
+					},
+					(value, oldVal) => {
+						const isEqual = this.form._isEqual(value, oldVal)
+						// 简单判断前后值的变化，只有发生变化才会发生校验
+						// TODO  如果 oldVal = undefined ，那么大概率是源数据里没有值导致 ，这个情况不哦校验 ,可能不严谨 ，需要在做观察
+						// fix by mehaotian 暂时取消 && oldVal !== undefined ，如果formData 中不存在，可能会不校验
+						if (!isEqual) {
+							const val = this.itemSetValue(value)
+							this.onFieldChange(val, false)
+						}
+					}, {
+						immediate: false
+					}
+				);
+			}
+
+		},
+		// #ifndef VUE3
+		destroyed() {
+			if (this.__isUnmounted) return
+			this.unInit()
+		},
+		// #endif
+		// #ifdef VUE3
+		unmounted() {
+			this.__isUnmounted = true
+			this.unInit()
+		},
+		// #endif
+		methods: {
+			/**
+			 * 外部调用方法
+			 * 设置规则 ，主要用于小程序自定义检验规则
+			 * @param {Array} rules 规则源数据
+			 */
+			setRules(rules = null) {
+				this.userRules = rules
+				this.init(false)
+			},
+			// 兼容老版本表单组件
+			setValue() {
+				// console.log('setValue 方法已经弃用，请使用最新版本的 uni-forms 表单组件以及其他关联组件。');
+			},
+			/**
+			 * 外部调用方法
+			 * 校验数据
+			 * @param {any} value 需要校验的数据
+			 * @param {boolean} 是否立即校验
+			 * @return {Array|null} 校验内容
+			 */
+			async onFieldChange(value, formtrigger = true) {
+				const {
+					formData,
+					localData,
+					errShowType,
+					validateCheck,
+					validateTrigger,
+					_isRequiredField,
+					_realName
+				} = this.form
+				const name = _realName(this.name)
+				if (!value) {
+					value = this.form.formData[name]
+				}
+				// fixd by mehaotian 不在校验前清空信息，解决闪屏的问题
+				// this.errMsg = '';
+
+				// fix by mehaotian 解决没有检验规则的情况下，抛出错误的问题
+				const ruleLen = this.itemRules.rules && this.itemRules.rules.length
+				if (!this.validator || !ruleLen || ruleLen === 0) return;
+
+				// 检验时机
+				// let trigger = this.isTrigger(this.itemRules.validateTrigger, this.validateTrigger, validateTrigger);
+				const isRequiredField = _isRequiredField(this.itemRules.rules || []);
+				let result = null;
+				// 只有等于 bind 时 ，才能开启时实校验
+				if (validateTrigger === 'bind' || formtrigger) {
+					// 校验当前表单项
+					result = await this.validator.validateUpdate({
+							[name]: value
+						},
+						formData
+					);
+
+					// 判断是否必填,非必填，不填不校验，填写才校验 ,暂时只处理 undefined  和空的情况
+					if (!isRequiredField && (value === undefined || value === '')) {
+						result = null;
+					}
+
+					// 判断错误信息显示类型
+					if (result && result.errorMessage) {
+						if (errShowType === 'undertext') {
+							// 获取错误信息
+							this.errMsg = !result ? '' : result.errorMessage;
+						}
+						if (errShowType === 'toast') {
+							uni.showToast({
+								title: result.errorMessage || '校验错误',
+								icon: 'none'
+							});
+						}
+						if (errShowType === 'modal') {
+							uni.showModal({
+								title: '提示',
+								content: result.errorMessage || '校验错误'
+							});
+						}
+					} else {
+						this.errMsg = ''
+					}
+					// 通知 form 组件更新事件
+					validateCheck(result ? result : null)
+				} else {
+					this.errMsg = ''
+				}
+				return result ? result : null;
+			},
+			/**
+			 * 初始组件数据
+			 */
+			init(type = false) {
+				const {
+					validator,
+					formRules,
+					childrens,
+					formData,
+					localData,
+					_realName,
+					labelWidth,
+					_getDataValue,
+					_setDataValue
+				} = this.form || {}
+				// 对齐方式
+				this.localLabelAlign = this._justifyContent()
+				// 宽度
+				this.localLabelWidth = this._labelWidthUnit(labelWidth)
+				// 标签位置
+				this.localLabelPos = this._labelPosition()
+				// 将需要校验的子组件加入form 队列
+				this.form && type && childrens.push(this)
+
+				if (!validator || !formRules) return
+				// 判断第一个 item
+				if (!this.form.isFirstBorder) {
+					this.form.isFirstBorder = true;
+					this.isFirstBorder = true;
+				}
+
+				// 判断 group 里的第一个 item
+				if (this.group) {
+					if (!this.group.isFirstBorder) {
+						this.group.isFirstBorder = true;
+						this.isFirstBorder = true;
+					}
+				}
+				this.border = this.form.border;
+				// 获取子域的真实名称
+				const name = _realName(this.name)
+				const itemRule = this.userRules || this.rules
+				if (typeof formRules === 'object' && itemRule) {
+					// 子规则替换父规则
+					formRules[name] = {
+						rules: itemRule
+					}
+					validator.updateSchema(formRules);
+				}
+				// 注册校验规则
+				const itemRules = formRules[name] || {}
+				this.itemRules = itemRules
+				// 注册校验函数
+				this.validator = validator
+				// 默认值赋予
+				this.itemSetValue(_getDataValue(this.name, localData))
+			},
+			unInit() {
+				if (this.form) {
+					const {
+						childrens,
+						formData,
+						_realName
+					} = this.form
+					childrens.forEach((item, index) => {
+						if (item === this) {
+							this.form.childrens.splice(index, 1)
+							delete formData[_realName(item.name)]
+						}
+					})
+				}
+			},
+			// 设置item 的值
+			itemSetValue(value) {
+				const name = this.form._realName(this.name)
+				const rules = this.itemRules.rules || []
+				const val = this.form._getValue(name, value, rules)
+				this.form._setDataValue(name, this.form.formData, val)
+				return val
+			},
+
+			/**
+			 * 移除该表单项的校验结果
+			 */
+			clearValidate() {
+				this.errMsg = '';
+			},
+
+			// 是否显示星号
+			_isRequired() {
+				// TODO 不根据规则显示 星号，考虑后续兼容
+				// if (this.form) {
+				// 	if (this.form._isRequiredField(this.itemRules.rules || []) && this.required) {
+				// 		return true
+				// 	}
+				// 	return false
+				// }
+				return this.required
+			},
+
+			// 处理对齐方式
+			_justifyContent() {
+				if (this.form) {
+					const {
+						labelAlign
+					} = this.form
+					let labelAli = this.labelAlign ? this.labelAlign : labelAlign;
+					if (labelAli === 'left') return 'flex-start';
+					if (labelAli === 'center') return 'center';
+					if (labelAli === 'right') return 'flex-end';
+				}
+				return 'flex-start';
+			},
+			// 处理 label宽度单位 ,继承父元素的值
+			_labelWidthUnit(labelWidth) {
+
+				// if (this.form) {
+				// 	const {
+				// 		labelWidth
+				// 	} = this.form
+				return this.num2px(this.labelWidth ? this.labelWidth : (labelWidth || (this.label ? 70 : 'auto')))
+				// }
+				// return '70px'
+			},
+			// 处理 label 位置
+			_labelPosition() {
+				if (this.form) return this.form.labelPosition || 'left'
+				return 'left'
+
+			},
+
+			/**
+			 * 触发时机
+			 * @param {Object} rule 当前规则内时机
+			 * @param {Object} itemRlue 当前组件时机
+			 * @param {Object} parentRule 父组件时机
+			 */
+			isTrigger(rule, itemRlue, parentRule) {
+				//  bind  submit
+				if (rule === 'submit' || !rule) {
+					if (rule === undefined) {
+						if (itemRlue !== 'bind') {
+							if (!itemRlue) {
+								return parentRule === '' ? 'bind' : 'submit';
+							}
+							return 'submit';
+						}
+						return 'bind';
+					}
+					return 'submit';
+				}
+				return 'bind';
+			},
+			num2px(num) {
+				if (typeof num === 'number') {
+					return `${num}px`
+				}
+				return num
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	.uni-forms-item {
+		position: relative;
+		display: flex;
+		/* #ifdef APP-NVUE */
+		// 在 nvue 中，使用 margin-bottom error 信息会被隐藏
+		padding-bottom: 22px;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		margin-bottom: 22px;
+		/* #endif */
+		flex-direction: row;
+
+		&__label {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			text-align: left;
+			font-size: 14px;
+			color: #606266;
+			height: 36px;
+			padding: 0 12px 0 0;
+			/* #ifndef APP-NVUE */
+			vertical-align: middle;
+			flex-shrink: 0;
+			/* #endif */
+
+			/* #ifndef APP-NVUE */
+			box-sizing: border-box;
+
+			/* #endif */
+			&.no-label {
+				padding: 0;
+			}
+		}
+
+		&__content {
+			/* #ifndef MP-TOUTIAO */
+			// display: flex;
+			// align-items: center;
+			/* #endif */
+			position: relative;
+			font-size: 14px;
+			flex: 1;
+			/* #ifndef APP-NVUE */
+			box-sizing: border-box;
+			/* #endif */
+			flex-direction: row;
+
+			/* #ifndef APP || H5 || MP-WEIXIN || APP-NVUE */
+			// TODO 因为小程序平台会多一层标签节点 ，所以需要在多余节点继承当前样式
+			&>uni-easyinput,
+			&>uni-data-picker {
+				width: 100%;
+			}
+
+			/* #endif */
+
+		}
+
+		& .uni-forms-item__nuve-content {
+			display: flex;
+			flex-direction: column;
+			flex: 1;
+		}
+
+		&__error {
+			color: #f56c6c;
+			font-size: 12px;
+			line-height: 1;
+			padding-top: 4px;
+			position: absolute;
+			/* #ifndef APP-NVUE */
+			top: 100%;
+			left: 0;
+			transition: transform 0.3s;
+			transform: translateY(-100%);
+			/* #endif */
+			/* #ifdef APP-NVUE */
+			bottom: 5px;
+			/* #endif */
+
+			opacity: 0;
+
+			.error-text {
+				// 只有 nvue 下这个样式才生效
+				color: #f56c6c;
+				font-size: 12px;
+			}
+
+			&.msg--active {
+				opacity: 1;
+				transform: translateY(0%);
+			}
+		}
+
+		// 位置修饰样式
+		&.is-direction-left {
+			flex-direction: row;
+		}
+
+		&.is-direction-top {
+			flex-direction: column;
+
+			.uni-forms-item__label {
+				padding: 0 0 8px;
+				line-height: 1.5715;
+				text-align: left;
+				/* #ifndef APP-NVUE */
+				white-space: initial;
+				/* #endif */
+			}
+		}
+
+		.is-required {
+			// color: $uni-color-error;
+			color: #dd524d;
+			font-weight: bold;
+		}
+	}
+
+
+	.uni-forms-item--border {
+		margin-bottom: 0;
+		padding: 10px 0;
+		// padding-bottom: 0;
+		border-top: 1px #eee solid;
+
+		/* #ifndef APP-NVUE */
+		.uni-forms-item__content {
+			flex-direction: column;
+			justify-content: flex-start;
+			align-items: flex-start;
+
+			.uni-forms-item__error {
+				position: relative;
+				top: 5px;
+				left: 0;
+				padding-top: 0;
+			}
+		}
+
+		/* #endif */
+
+		/* #ifdef APP-NVUE */
+		display: flex;
+		flex-direction: column;
+
+		.uni-forms-item__error {
+			position: relative;
+			top: 0px;
+			left: 0;
+			padding-top: 0;
+			margin-top: 5px;
+		}
+
+		/* #endif */
+
+	}
+
+	.is-first-border {
+		/* #ifndef APP-NVUE */
+		border: none;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		border-width: 0;
+		/* #endif */
+	}
+</style>
diff --git a/uni_modules/uni-forms/components/uni-forms/uni-forms.vue b/uni_modules/uni-forms/components/uni-forms/uni-forms.vue
new file mode 100644
index 0000000..9bb9ae7
--- /dev/null
+++ b/uni_modules/uni-forms/components/uni-forms/uni-forms.vue
@@ -0,0 +1,397 @@
+<template>
+	<view class="uni-forms">
+		<form>
+			<slot></slot>
+		</form>
+	</view>
+</template>
+
+<script>
+	import Validator from './validate.js';
+	import {
+		deepCopy,
+		getValue,
+		isRequiredField,
+		setDataValue,
+		getDataValue,
+		realName,
+		isRealName,
+		rawData,
+		isEqual
+	} from './utils.js'
+
+	// #ifndef VUE3
+	// 后续会慢慢废弃这个方法
+	import Vue from 'vue';
+	Vue.prototype.binddata = function(name, value, formName) {
+		if (formName) {
+			this.$refs[formName].setValue(name, value);
+		} else {
+			let formVm;
+			for (let i in this.$refs) {
+				const vm = this.$refs[i];
+				if (vm && vm.$options && vm.$options.name === 'uniForms') {
+					formVm = vm;
+					break;
+				}
+			}
+			if (!formVm) return console.error('当前 uni-froms 组件缺少 ref 属性');
+			formVm.setValue(name, value);
+		}
+	};
+	// #endif
+	/**
+	 * Forms 表单
+	 * @description 由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=2773
+	 * @property {Object} rules	表单校验规则
+	 * @property {String} validateTrigger = [bind|submit|blur]	校验触发器方式 默认 submit
+	 * @value bind		发生变化时触发
+	 * @value submit	提交时触发
+	 * @value blur	  失去焦点时触发
+	 * @property {String} labelPosition = [top|left]	label 位置 默认 left
+	 * @value top		顶部显示 label
+	 * @value left	左侧显示 label
+	 * @property {String} labelWidth	label 宽度，默认 70px
+	 * @property {String} labelAlign = [left|center|right]	label 居中方式  默认 left
+	 * @value left		label 左侧显示
+	 * @value center	label 居中
+	 * @value right		label 右侧对齐
+	 * @property {String} errShowType = [undertext|toast|modal]	校验错误信息提示方式
+	 * @value undertext	错误信息在底部显示
+	 * @value toast			错误信息toast显示
+	 * @value modal			错误信息modal显示
+	 * @event {Function} submit	提交时触发
+	 * @event {Function} validate	校验结果发生变化触发
+	 */
+	export default {
+		name: 'uniForms',
+		emits: ['validate', 'submit'],
+		options: {
+			virtualHost: true
+		},
+		props: {
+			// 即将弃用
+			value: {
+				type: Object,
+				default () {
+					return null;
+				}
+			},
+			// vue3 替换 value 属性
+			modelValue: {
+				type: Object,
+				default () {
+					return null;
+				}
+			},
+			// 1.4.0 开始将不支持 v-model ，且废弃 value 和 modelValue
+			model: {
+				type: Object,
+				default () {
+					return null;
+				}
+			},
+			// 表单校验规则
+			rules: {
+				type: Object,
+				default () {
+					return {};
+				}
+			},
+			//校验错误信息提示方式 默认 undertext 取值 [undertext|toast|modal]
+			errShowType: {
+				type: String,
+				default: 'undertext'
+			},
+			// 校验触发器方式 默认 bind 取值 [bind|submit]
+			validateTrigger: {
+				type: String,
+				default: 'submit'
+			},
+			// label 位置，默认 left 取值  top/left
+			labelPosition: {
+				type: String,
+				default: 'left'
+			},
+			// label 宽度
+			labelWidth: {
+				type: [String, Number],
+				default: ''
+			},
+			// label 居中方式，默认 left 取值 left/center/right
+			labelAlign: {
+				type: String,
+				default: 'left'
+			},
+			border: {
+				type: Boolean,
+				default: false
+			}
+		},
+		provide() {
+			return {
+				uniForm: this
+			}
+		},
+		data() {
+			return {
+				// 表单本地值的记录，不应该与传如的值进行关联
+				formData: {},
+				formRules: {}
+			};
+		},
+		computed: {
+			// 计算数据源变化的
+			localData() {
+				const localVal = this.model || this.modelValue || this.value
+				if (localVal) {
+					return deepCopy(localVal)
+				}
+				return {}
+			}
+		},
+		watch: {
+			// 监听数据变化 ,暂时不使用，需要单独赋值
+			// localData: {},
+			// 监听规则变化
+			rules: {
+				handler: function(val, oldVal) {
+					this.setRules(val)
+				},
+				deep: true,
+				immediate: true
+			}
+		},
+		created() {
+			// #ifdef VUE3
+			let getbinddata = getApp().$vm.$.appContext.config.globalProperties.binddata
+			if (!getbinddata) {
+				getApp().$vm.$.appContext.config.globalProperties.binddata = function(name, value, formName) {
+					if (formName) {
+						this.$refs[formName].setValue(name, value);
+					} else {
+						let formVm;
+						for (let i in this.$refs) {
+							const vm = this.$refs[i];
+							if (vm && vm.$options && vm.$options.name === 'uniForms') {
+								formVm = vm;
+								break;
+							}
+						}
+						if (!formVm) return console.error('当前 uni-froms 组件缺少 ref 属性');
+						formVm.setValue(name, value);
+					}
+				}
+			}
+			// #endif
+
+			// 子组件实例数组
+			this.childrens = []
+			// TODO 兼容旧版 uni-data-picker ,新版本中无效，只是避免报错
+			this.inputChildrens = []
+			this.setRules(this.rules)
+		},
+		methods: {
+			/**
+			 * 外部调用方法
+			 * 设置规则 ，主要用于小程序自定义检验规则
+			 * @param {Array} rules 规则源数据
+			 */
+			setRules(rules) {
+				// TODO 有可能子组件合并规则的时机比这个要早，所以需要合并对象 ，而不是直接赋值，可能会被覆盖
+				this.formRules = Object.assign({}, this.formRules, rules)
+				// 初始化校验函数
+				this.validator = new Validator(rules);
+			},
+
+			/**
+			 * 外部调用方法
+			 * 设置数据，用于设置表单数据，公开给用户使用 ， 不支持在动态表单中使用
+			 * @param {Object} key
+			 * @param {Object} value
+			 */
+			setValue(key, value) {
+				let example = this.childrens.find(child => child.name === key);
+				if (!example) return null;
+				this.formData[key] = getValue(key, value, (this.formRules[key] && this.formRules[key].rules) || [])
+				return example.onFieldChange(this.formData[key]);
+			},
+
+			/**
+			 * 外部调用方法
+			 * 手动提交校验表单
+			 * 对整个表单进行校验的方法，参数为一个回调函数。
+			 * @param {Array} keepitem 保留不参与校验的字段
+			 * @param {type} callback 方法回调
+			 */
+			validate(keepitem, callback) {
+				return this.checkAll(this.formData, keepitem, callback);
+			},
+
+			/**
+			 * 外部调用方法
+			 * 部分表单校验
+			 * @param {Array|String} props 需要校验的字段
+			 * @param {Function} 回调函数
+			 */
+			validateField(props = [], callback) {
+				props = [].concat(props);
+				let invalidFields = {};
+				this.childrens.forEach(item => {
+					const name = realName(item.name)
+					if (props.indexOf(name) !== -1) {
+						invalidFields = Object.assign({}, invalidFields, {
+							[name]: this.formData[name]
+						});
+					}
+				});
+				return this.checkAll(invalidFields, [], callback);
+			},
+
+			/**
+			 * 外部调用方法
+			 * 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果
+			 * @param {Array|String} props 需要移除校验的字段 ，不填为所有
+			 */
+			clearValidate(props = []) {
+				props = [].concat(props);
+				this.childrens.forEach(item => {
+					if (props.length === 0) {
+						item.errMsg = '';
+					} else {
+						const name = realName(item.name)
+						if (props.indexOf(name) !== -1) {
+							item.errMsg = '';
+						}
+					}
+				});
+			},
+
+			/**
+			 * 外部调用方法 ，即将废弃
+			 * 手动提交校验表单
+			 * 对整个表单进行校验的方法，参数为一个回调函数。
+			 * @param {Array} keepitem 保留不参与校验的字段
+			 * @param {type} callback 方法回调
+			 */
+			submit(keepitem, callback, type) {
+				for (let i in this.dataValue) {
+					const itemData = this.childrens.find(v => v.name === i);
+					if (itemData) {
+						if (this.formData[i] === undefined) {
+							this.formData[i] = this._getValue(i, this.dataValue[i]);
+						}
+					}
+				}
+
+				if (!type) {
+					console.warn('submit 方法即将废弃，请使用validate方法代替！');
+				}
+
+				return this.checkAll(this.formData, keepitem, callback, 'submit');
+			},
+
+			// 校验所有
+			async checkAll(invalidFields, keepitem, callback, type) {
+				// 不存在校验规则 ，则停止校验流程
+				if (!this.validator) return
+				let childrens = []
+				// 处理参与校验的item实例
+				for (let i in invalidFields) {
+					const item = this.childrens.find(v => realName(v.name) === i)
+					if (item) {
+						childrens.push(item)
+					}
+				}
+
+				// 如果validate第一个参数是funciont ,那就走回调
+				if (!callback && typeof keepitem === 'function') {
+					callback = keepitem;
+				}
+
+				let promise;
+				// 如果不存在回调，那么使用 Promise 方式返回
+				if (!callback && typeof callback !== 'function' && Promise) {
+					promise = new Promise((resolve, reject) => {
+						callback = function(valid, invalidFields) {
+							!valid ? resolve(invalidFields) : reject(valid);
+						};
+					});
+				}
+
+				let results = [];
+				// 避免引用错乱 ，建议拷贝对象处理
+				let tempFormData = JSON.parse(JSON.stringify(invalidFields))
+				// 所有子组件参与校验,使用 for 可以使用  awiat
+				for (let i in childrens) {
+					const child = childrens[i]
+					let name = realName(child.name);
+					const result = await child.onFieldChange(tempFormData[name]);
+					if (result) {
+						results.push(result);
+						// toast ,modal 只需要执行第一次就可以
+						if (this.errShowType === 'toast' || this.errShowType === 'modal') break;
+					}
+				}
+
+
+				if (Array.isArray(results)) {
+					if (results.length === 0) results = null;
+				}
+				if (Array.isArray(keepitem)) {
+					keepitem.forEach(v => {
+						let vName = realName(v);
+						let value = getDataValue(v, this.localData)
+						if (value !== undefined) {
+							tempFormData[vName] = value
+						}
+					});
+				}
+
+				// TODO submit 即将废弃
+				if (type === 'submit') {
+					this.$emit('submit', {
+						detail: {
+							value: tempFormData,
+							errors: results
+						}
+					});
+				} else {
+					this.$emit('validate', results);
+				}
+
+				// const resetFormData = rawData(tempFormData, this.localData, this.name)
+				let resetFormData = {}
+				resetFormData = rawData(tempFormData, this.name)
+				callback && typeof callback === 'function' && callback(results, resetFormData);
+
+				if (promise && callback) {
+					return promise;
+				} else {
+					return null;
+				}
+
+			},
+
+			/**
+			 * 返回validate事件
+			 * @param {Object} result
+			 */
+			validateCheck(result) {
+				this.$emit('validate', result);
+			},
+			_getValue: getValue,
+			_isRequiredField: isRequiredField,
+			_setDataValue: setDataValue,
+			_getDataValue: getDataValue,
+			_realName: realName,
+			_isRealName: isRealName,
+			_isEqual: isEqual
+		}
+	};
+</script>
+
+<style lang="scss">
+	.uni-forms {}
+</style>
diff --git a/uni_modules/uni-forms/components/uni-forms/utils.js b/uni_modules/uni-forms/components/uni-forms/utils.js
new file mode 100644
index 0000000..6da2421
--- /dev/null
+++ b/uni_modules/uni-forms/components/uni-forms/utils.js
@@ -0,0 +1,293 @@
+/**
+ * 简单处理对象拷贝
+ * @param {Obejct} 被拷贝对象
+ * @@return {Object} 拷贝对象
+ */
+export const deepCopy = (val) => {
+	return JSON.parse(JSON.stringify(val))
+}
+/**
+ * 过滤数字类型
+ * @param {String} format 数字类型
+ * @@return {Boolean} 返回是否为数字类型
+ */
+export const typeFilter = (format) => {
+	return format === 'int' || format === 'double' || format === 'number' || format === 'timestamp';
+}
+
+/**
+ * 把 value 转换成指定的类型，用于处理初始值，原因是初始值需要入库不能为 undefined
+ * @param {String} key 字段名
+ * @param {any} value 字段值
+ * @param {Object} rules 表单校验规则
+ */
+export const getValue = (key, value, rules) => {
+	const isRuleNumType = rules.find(val => val.format && typeFilter(val.format));
+	const isRuleBoolType = rules.find(val => (val.format && val.format === 'boolean') || val.format === 'bool');
+	// 输入类型为 number
+	if (!!isRuleNumType) {
+		if (!value && value !== 0) {
+			value = null
+		} else {
+			value = isNumber(Number(value)) ? Number(value) : value
+		}
+	}
+
+	// 输入类型为 boolean
+	if (!!isRuleBoolType) {
+		value = isBoolean(value) ? value : false
+	}
+
+	return value;
+}
+
+/**
+ * 获取表单数据
+ * @param {String|Array} name 真实名称，需要使用 realName 获取
+ * @param {Object} data 原始数据
+ * @param {any} value  需要设置的值
+ */
+export const setDataValue = (field, formdata, value) => {
+	formdata[field] = value
+	return value || ''
+}
+
+/**
+ * 获取表单数据
+ * @param {String|Array} field 真实名称，需要使用 realName 获取
+ * @param {Object} data 原始数据
+ */
+export const getDataValue = (field, data) => {
+	return objGet(data, field)
+}
+
+/**
+ * 获取表单类型
+ * @param {String|Array} field 真实名称，需要使用 realName 获取
+ */
+export const getDataValueType = (field, data) => {
+	const value = getDataValue(field, data)
+	return {
+		type: type(value),
+		value
+	}
+}
+
+/**
+ * 获取表单可用的真实name
+ * @param {String|Array} name 表单name
+ * @@return {String} 表单可用的真实name
+ */
+export const realName = (name, data = {}) => {
+	const base_name = _basePath(name)
+	if (typeof base_name === 'object' && Array.isArray(base_name) && base_name.length > 1) {
+		const realname = base_name.reduce((a, b) => a += `#${b}`, '_formdata_')
+		return realname
+	}
+	return base_name[0] || name
+}
+
+/**
+ * 判断是否表单可用的真实name
+ * @param {String|Array} name 表单name
+ * @@return {String} 表单可用的真实name
+ */
+export const isRealName = (name) => {
+	const reg = /^_formdata_#*/
+	return reg.test(name)
+}
+
+/**
+ * 获取表单数据的原始格式
+ * @@return {Object|Array} object 需要解析的数据
+ */
+export const rawData = (object = {}, name) => {
+	let newData = JSON.parse(JSON.stringify(object))
+	let formData = {}
+	for(let i in newData){
+		let path = name2arr(i)
+		objSet(formData,path,newData[i])
+	}
+	return formData
+}
+
+/**
+ * 真实name还原为 array
+ * @param {*} name 
+ */
+export const name2arr = (name) => {
+	let field = name.replace('_formdata_#', '')
+	field = field.split('#').map(v => (isNumber(v) ? Number(v) : v))
+	return field
+}
+
+/**
+ * 对象中设置值
+ * @param {Object|Array} object 源数据
+ * @param {String| Array} path 'a.b.c' 或 ['a',0,'b','c']
+ * @param {String} value 需要设置的值
+ */
+export const objSet = (object, path, value) => {
+	if (typeof object !== 'object') return object;
+	_basePath(path).reduce((o, k, i, _) => {
+		if (i === _.length - 1) { 
+			// 若遍历结束直接赋值
+			o[k] = value
+			return null
+		} else if (k in o) { 
+			// 若存在对应路径，则返回找到的对象，进行下一次遍历
+			return o[k]
+		} else { 
+			// 若不存在对应路径，则创建对应对象，若下一路径是数字，新对象赋值为空数组，否则赋值为空对象
+			o[k] = /^[0-9]{1,}$/.test(_[i + 1]) ? [] : {}
+			return o[k]
+		}
+	}, object)
+	// 返回object
+	return object;
+}
+
+// 处理 path， path有三种形式：'a[0].b.c'、'a.0.b.c' 和 ['a','0','b','c']，需要统一处理成数组，便于后续使用
+function _basePath(path) {
+	// 若是数组，则直接返回
+	if (Array.isArray(path)) return path
+	// 若有 '[',']'，则替换成将 '[' 替换成 '.',去掉 ']'
+	return path.replace(/\[/g, '.').replace(/\]/g, '').split('.')
+}
+
+/**
+ * 从对象中获取值
+ * @param {Object|Array} object 源数据
+ * @param {String| Array} path 'a.b.c' 或 ['a',0,'b','c']
+ * @param {String} defaultVal 如果无法从调用链中获取值的默认值
+ */
+export const objGet = (object, path, defaultVal = 'undefined') => {
+	// 先将path处理成统一格式
+	let newPath = _basePath(path)
+	// 递归处理，返回最后结果
+	let val = newPath.reduce((o, k) => {
+		return (o || {})[k]
+	}, object);
+	return !val || val !== undefined ? val : defaultVal
+}
+
+
+/**
+ * 是否为 number 类型 
+ * @param {any} num 需要判断的值
+ * @return {Boolean} 是否为 number
+ */
+export const isNumber = (num) => {
+	return !isNaN(Number(num))
+}
+
+/**
+ * 是否为 boolean 类型 
+ * @param {any} bool 需要判断的值
+ * @return {Boolean} 是否为 boolean
+ */
+export const isBoolean = (bool) => {
+	return (typeof bool === 'boolean')
+}
+/**
+ * 是否有必填字段
+ * @param {Object} rules 规则
+ * @return {Boolean} 是否有必填字段
+ */
+export const isRequiredField = (rules) => {
+	let isNoField = false;
+	for (let i = 0; i < rules.length; i++) {
+		const ruleData = rules[i];
+		if (ruleData.required) {
+			isNoField = true;
+			break;
+		}
+	}
+	return isNoField;
+}
+
+
+/**
+ * 获取数据类型
+ * @param {Any} obj 需要获取数据类型的值
+ */
+export const type = (obj) => {
+	var class2type = {};
+
+	// 生成class2type映射
+	"Boolean Number String Function Array Date RegExp Object Error".split(" ").map(function(item, index) {
+		class2type["[object " + item + "]"] = item.toLowerCase();
+	})
+	if (obj == null) {
+		return obj + "";
+	}
+	return typeof obj === "object" || typeof obj === "function" ?
+		class2type[Object.prototype.toString.call(obj)] || "object" :
+		typeof obj;
+}
+
+/**
+ * 判断两个值是否相等
+ * @param {any} a 值  
+ * @param {any} b 值  
+ * @return {Boolean} 是否相等
+ */
+export const isEqual = (a, b) => {
+	//如果a和b本来就全等
+	if (a === b) {
+		//判断是否为0和-0
+		return a !== 0 || 1 / a === 1 / b;
+	}
+	//判断是否为null和undefined
+	if (a == null || b == null) {
+		return a === b;
+	}
+	//接下来判断a和b的数据类型
+	var classNameA = toString.call(a),
+		classNameB = toString.call(b);
+	//如果数据类型不相等，则返回false
+	if (classNameA !== classNameB) {
+		return false;
+	}
+	//如果数据类型相等，再根据不同数据类型分别判断
+	switch (classNameA) {
+		case '[object RegExp]':
+		case '[object String]':
+			//进行字符串转换比较
+			return '' + a === '' + b;
+		case '[object Number]':
+			//进行数字转换比较,判断是否为NaN
+			if (+a !== +a) {
+				return +b !== +b;
+			}
+			//判断是否为0或-0
+			return +a === 0 ? 1 / +a === 1 / b : +a === +b;
+		case '[object Date]':
+		case '[object Boolean]':
+			return +a === +b;
+	}
+	//如果是对象类型
+	if (classNameA == '[object Object]') {
+		//获取a和b的属性长度
+		var propsA = Object.getOwnPropertyNames(a),
+			propsB = Object.getOwnPropertyNames(b);
+		if (propsA.length != propsB.length) {
+			return false;
+		}
+		for (var i = 0; i < propsA.length; i++) {
+			var propName = propsA[i];
+			//如果对应属性对应值不相等，则返回false
+			if (a[propName] !== b[propName]) {
+				return false;
+			}
+		}
+		return true;
+	}
+	//如果是数组类型
+	if (classNameA == '[object Array]') {
+		if (a.toString() == b.toString()) {
+			return true;
+		}
+		return false;
+	}
+}
diff --git a/uni_modules/uni-forms/components/uni-forms/validate.js b/uni_modules/uni-forms/components/uni-forms/validate.js
new file mode 100644
index 0000000..1834c6c
--- /dev/null
+++ b/uni_modules/uni-forms/components/uni-forms/validate.js
@@ -0,0 +1,486 @@
+var pattern = {
+	email: /^\S+?@\S+?\.\S+?$/,
+	idcard: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
+	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')
+};
+
+const FORMAT_MAPPING = {
+	"int": 'integer',
+	"bool": 'boolean',
+	"double": 'number',
+	"long": 'number',
+	"password": 'string'
+	// "fileurls": 'array'
+}
+
+function formatMessage(args, resources = '') {
+	var defaultMessage = ['label']
+	defaultMessage.forEach((item) => {
+		if (args[item] === undefined) {
+			args[item] = ''
+		}
+	})
+
+	let str = resources
+	for (let key in args) {
+		let reg = new RegExp('{' + key + '}')
+		str = str.replace(reg, args[key])
+	}
+	return str
+}
+
+function isEmptyValue(value, type) {
+	if (value === undefined || value === null) {
+		return true;
+	}
+
+	if (typeof value === 'string' && !value) {
+		return true;
+	}
+
+	if (Array.isArray(value) && !value.length) {
+		return true;
+	}
+
+	if (type === 'object' && !Object.keys(value).length) {
+		return true;
+	}
+
+	return false;
+}
+
+const types = {
+	integer(value) {
+		return types.number(value) && parseInt(value, 10) === value;
+	},
+	string(value) {
+		return typeof value === 'string';
+	},
+	number(value) {
+		if (isNaN(value)) {
+			return false;
+		}
+		return typeof value === 'number';
+	},
+	"boolean": function(value) {
+		return typeof value === 'boolean';
+	},
+	"float": function(value) {
+		return types.number(value) && !types.integer(value);
+	},
+	array(value) {
+		return Array.isArray(value);
+	},
+	object(value) {
+		return typeof value === 'object' && !types.array(value);
+	},
+	date(value) {
+		return value instanceof Date;
+	},
+	timestamp(value) {
+		if (!this.integer(value) || Math.abs(value).toString().length > 16) {
+			return false
+		}
+		return true;
+	},
+	file(value) {
+		return typeof value.url === 'string';
+	},
+	email(value) {
+		return typeof value === 'string' && !!value.match(pattern.email) && value.length < 255;
+	},
+	url(value) {
+		return typeof value === 'string' && !!value.match(pattern.url);
+	},
+	pattern(reg, value) {
+		try {
+			return new RegExp(reg).test(value);
+		} catch (e) {
+			return false;
+		}
+	},
+	method(value) {
+		return typeof value === 'function';
+	},
+	idcard(value) {
+		return typeof value === 'string' && !!value.match(pattern.idcard);
+	},
+	'url-https'(value) {
+		return this.url(value) && value.startsWith('https://');
+	},
+	'url-scheme'(value) {
+		return value.startsWith('://');
+	},
+	'url-web'(value) {
+		return false;
+	}
+}
+
+class RuleValidator {
+
+	constructor(message) {
+		this._message = message
+	}
+
+	async validateRule(fieldKey, fieldValue, value, data, allData) {
+		var result = null
+
+		let rules = fieldValue.rules
+
+		let hasRequired = rules.findIndex((item) => {
+			return item.required
+		})
+		if (hasRequired < 0) {
+			if (value === null || value === undefined) {
+				return result
+			}
+			if (typeof value === 'string' && !value.length) {
+				return result
+			}
+		}
+
+		var message = this._message
+
+		if (rules === undefined) {
+			return message['default']
+		}
+
+		for (var i = 0; i < rules.length; i++) {
+			let rule = rules[i]
+			let vt = this._getValidateType(rule)
+
+			Object.assign(rule, {
+				label: fieldValue.label || `["${fieldKey}"]`
+			})
+
+			if (RuleValidatorHelper[vt]) {
+				result = RuleValidatorHelper[vt](rule, value, message)
+				if (result != null) {
+					break
+				}
+			}
+
+			if (rule.validateExpr) {
+				let now = Date.now()
+				let resultExpr = rule.validateExpr(value, allData, now)
+				if (resultExpr === false) {
+					result = this._getMessage(rule, rule.errorMessage || this._message['default'])
+					break
+				}
+			}
+
+			if (rule.validateFunction) {
+				result = await this.validateFunction(rule, value, data, allData, vt)
+				if (result !== null) {
+					break
+				}
+			}
+		}
+
+		if (result !== null) {
+			result = message.TAG + result
+		}
+
+		return result
+	}
+
+	async validateFunction(rule, value, data, allData, vt) {
+		let result = null
+		try {
+			let callbackMessage = null
+			const res = await rule.validateFunction(rule, value, allData || data, (message) => {
+				callbackMessage = message
+			})
+			if (callbackMessage || (typeof res === 'string' && res) || res === false) {
+				result = this._getMessage(rule, callbackMessage || res, vt)
+			}
+		} catch (e) {
+			result = this._getMessage(rule, e.message, vt)
+		}
+		return result
+	}
+
+	_getMessage(rule, message, vt) {
+		return formatMessage(rule, message || rule.errorMessage || this._message[vt] || message['default'])
+	}
+
+	_getValidateType(rule) {
+		var result = ''
+		if (rule.required) {
+			result = 'required'
+		} else if (rule.format) {
+			result = 'format'
+		} else if (rule.arrayType) {
+			result = 'arrayTypeFormat'
+		} else if (rule.range) {
+			result = 'range'
+		} else if (rule.maximum !== undefined || rule.minimum !== undefined) {
+			result = 'rangeNumber'
+		} else if (rule.maxLength !== undefined || rule.minLength !== undefined) {
+			result = 'rangeLength'
+		} else if (rule.pattern) {
+			result = 'pattern'
+		} else if (rule.validateFunction) {
+			result = 'validateFunction'
+		}
+		return result
+	}
+}
+
+const RuleValidatorHelper = {
+	required(rule, value, message) {
+		if (rule.required && isEmptyValue(value, rule.format || typeof value)) {
+			return formatMessage(rule, rule.errorMessage || message.required);
+		}
+
+		return null
+	},
+
+	range(rule, value, message) {
+		const {
+			range,
+			errorMessage
+		} = rule;
+
+		let list = new Array(range.length);
+		for (let i = 0; i < range.length; i++) {
+			const item = range[i];
+			if (types.object(item) && item.value !== undefined) {
+				list[i] = item.value;
+			} else {
+				list[i] = item;
+			}
+		}
+
+		let result = false
+		if (Array.isArray(value)) {
+			result = (new Set(value.concat(list)).size === list.length);
+		} else {
+			if (list.indexOf(value) > -1) {
+				result = true;
+			}
+		}
+
+		if (!result) {
+			return formatMessage(rule, errorMessage || message['enum']);
+		}
+
+		return null
+	},
+
+	rangeNumber(rule, value, message) {
+		if (!types.number(value)) {
+			return formatMessage(rule, rule.errorMessage || message.pattern.mismatch);
+		}
+
+		let {
+			minimum,
+			maximum,
+			exclusiveMinimum,
+			exclusiveMaximum
+		} = rule;
+		let min = exclusiveMinimum ? value <= minimum : value < minimum;
+		let max = exclusiveMaximum ? value >= maximum : value > maximum;
+
+		if (minimum !== undefined && min) {
+			return formatMessage(rule, rule.errorMessage || message['number'][exclusiveMinimum ?
+				'exclusiveMinimum' : 'minimum'
+			])
+		} else if (maximum !== undefined && max) {
+			return formatMessage(rule, rule.errorMessage || message['number'][exclusiveMaximum ?
+				'exclusiveMaximum' : 'maximum'
+			])
+		} else if (minimum !== undefined && maximum !== undefined && (min || max)) {
+			return formatMessage(rule, rule.errorMessage || message['number'].range)
+		}
+
+		return null
+	},
+
+	rangeLength(rule, value, message) {
+		if (!types.string(value) && !types.array(value)) {
+			return formatMessage(rule, rule.errorMessage || message.pattern.mismatch);
+		}
+
+		let min = rule.minLength;
+		let max = rule.maxLength;
+		let val = value.length;
+
+		if (min !== undefined && val < min) {
+			return formatMessage(rule, rule.errorMessage || message['length'].minLength)
+		} else if (max !== undefined && val > max) {
+			return formatMessage(rule, rule.errorMessage || message['length'].maxLength)
+		} else if (min !== undefined && max !== undefined && (val < min || val > max)) {
+			return formatMessage(rule, rule.errorMessage || message['length'].range)
+		}
+
+		return null
+	},
+
+	pattern(rule, value, message) {
+		if (!types['pattern'](rule.pattern, value)) {
+			return formatMessage(rule, rule.errorMessage || message.pattern.mismatch);
+		}
+
+		return null
+	},
+
+	format(rule, value, message) {
+		var customTypes = Object.keys(types);
+		var format = FORMAT_MAPPING[rule.format] ? FORMAT_MAPPING[rule.format] : (rule.format || rule.arrayType);
+
+		if (customTypes.indexOf(format) > -1) {
+			if (!types[format](value)) {
+				return formatMessage(rule, rule.errorMessage || message.typeError);
+			}
+		}
+
+		return null
+	},
+
+	arrayTypeFormat(rule, value, message) {
+		if (!Array.isArray(value)) {
+			return formatMessage(rule, rule.errorMessage || message.typeError);
+		}
+
+		for (let i = 0; i < value.length; i++) {
+			const element = value[i];
+			let formatResult = this.format(rule, element, message)
+			if (formatResult !== null) {
+				return formatResult
+			}
+		}
+
+		return null
+	}
+}
+
+class SchemaValidator extends RuleValidator {
+
+	constructor(schema, options) {
+		super(SchemaValidator.message);
+
+		this._schema = schema
+		this._options = options || null
+	}
+
+	updateSchema(schema) {
+		this._schema = schema
+	}
+
+	async validate(data, allData) {
+		let result = this._checkFieldInSchema(data)
+		if (!result) {
+			result = await this.invokeValidate(data, false, allData)
+		}
+		return result.length ? result[0] : null
+	}
+
+	async validateAll(data, allData) {
+		let result = this._checkFieldInSchema(data)
+		if (!result) {
+			result = await this.invokeValidate(data, true, allData)
+		}
+		return result
+	}
+
+	async validateUpdate(data, allData) {
+		let result = this._checkFieldInSchema(data)
+		if (!result) {
+			result = await this.invokeValidateUpdate(data, false, allData)
+		}
+		return result.length ? result[0] : null
+	}
+
+	async invokeValidate(data, all, allData) {
+		let result = []
+		let schema = this._schema
+		for (let key in schema) {
+			let value = schema[key]
+			let errorMessage = await this.validateRule(key, value, data[key], data, allData)
+			if (errorMessage != null) {
+				result.push({
+					key,
+					errorMessage
+				})
+				if (!all) break
+			}
+		}
+		return result
+	}
+
+	async invokeValidateUpdate(data, all, allData) {
+		let result = []
+		for (let key in data) {
+			let errorMessage = await this.validateRule(key, this._schema[key], data[key], data, allData)
+			if (errorMessage != null) {
+				result.push({
+					key,
+					errorMessage
+				})
+				if (!all) break
+			}
+		}
+		return result
+	}
+
+	_checkFieldInSchema(data) {
+		var keys = Object.keys(data)
+		var keys2 = Object.keys(this._schema)
+		if (new Set(keys.concat(keys2)).size === keys2.length) {
+			return ''
+		}
+
+		var noExistFields = keys.filter((key) => {
+			return keys2.indexOf(key) < 0;
+		})
+		var errorMessage = formatMessage({
+			field: JSON.stringify(noExistFields)
+		}, SchemaValidator.message.TAG + SchemaValidator.message['defaultInvalid'])
+		return [{
+			key: 'invalid',
+			errorMessage
+		}]
+	}
+}
+
+function Message() {
+	return {
+		TAG: "",
+		default: '验证错误',
+		defaultInvalid: '提交的字段{field}在数据库中并不存在',
+		validateFunction: '验证无效',
+		required: '{label}必填',
+		'enum': '{label}超出范围',
+		timestamp: '{label}格式无效',
+		whitespace: '{label}不能为空',
+		typeError: '{label}类型无效',
+		date: {
+			format: '{label}日期{value}格式无效',
+			parse: '{label}日期无法解析,{value}无效',
+			invalid: '{label}日期{value}无效'
+		},
+		length: {
+			minLength: '{label}长度不能少于{minLength}',
+			maxLength: '{label}长度不能超过{maxLength}',
+			range: '{label}必须介于{minLength}和{maxLength}之间'
+		},
+		number: {
+			minimum: '{label}不能小于{minimum}',
+			maximum: '{label}不能大于{maximum}',
+			exclusiveMinimum: '{label}不能小于等于{minimum}',
+			exclusiveMaximum: '{label}不能大于等于{maximum}',
+			range: '{label}必须介于{minimum}and{maximum}之间'
+		},
+		pattern: {
+			mismatch: '{label}格式不匹配'
+		}
+	};
+}
+
+
+SchemaValidator.message = new Message();
+
+export default SchemaValidator
diff --git a/uni_modules/uni-forms/package.json b/uni_modules/uni-forms/package.json
new file mode 100644
index 0000000..464b4e6
--- /dev/null
+++ b/uni_modules/uni-forms/package.json
@@ -0,0 +1,88 @@
+{
+  "id": "uni-forms",
+  "displayName": "uni-forms 表单",
+  "version": "1.4.10",
+  "description": "由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据",
+  "keywords": [
+    "uni-ui",
+    "表单",
+    "校验",
+    "表单校验",
+    "表单验证"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+      "uni-icons"
+    ],
+    "encrypt": [],
+    "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+        "QQ": "y",
+        "京东": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/uni_modules/uni-forms/readme.md b/uni_modules/uni-forms/readme.md
new file mode 100644
index 0000000..63d5a04
--- /dev/null
+++ b/uni_modules/uni-forms/readme.md
@@ -0,0 +1,23 @@
+
+
+## Forms 表单
+
+> **组件名：uni-forms**
+> 代码块： `uForms`、`uni-forms-item`
+> 关联组件：`uni-forms-item`、`uni-easyinput`、`uni-data-checkbox`、`uni-group`。
+
+
+uni-app的内置组件已经有了 `<form>`组件，用于提交表单内容。
+
+然而几乎每个表单都需要做表单验证，为了方便做表单验证，减少重复开发，`uni ui` 又基于 `<form>`组件封装了 `<uni-forms>`组件，内置了表单验证功能。
+
+`<uni-forms>` 提供了 `rules`属性来描述校验规则、`<uni-forms-item>`子组件来包裹具体的表单项，以及给原生或三方组件提供了 `binddata()` 来设置表单值。
+
+每个要校验的表单项，不管input还是checkbox，都必须放在`<uni-forms-item>`组件中，且一个`<uni-forms-item>`组件只能放置一个表单项。
+
+`<uni-forms-item>`组件内部预留了显示error message的区域，默认是在表单项的底部。
+
+另外，`<uni-forms>`组件下面的各个表单项，可以通过`<uni-group>`包裹为不同的分组。同一`<uni-group>`下的不同表单项目将聚拢在一起，同其他group保持垂直间距。`<uni-group>`仅影响视觉效果。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-forms)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/uni_modules/uni-goods-nav/changelog.md b/uni_modules/uni-goods-nav/changelog.md
new file mode 100644
index 0000000..c6264c6
--- /dev/null
+++ b/uni_modules/uni-goods-nav/changelog.md
@@ -0,0 +1,18 @@
+## 1.2.1（2022-05-30）
+- 新增 stat属性，是否开启uni统计功能
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-goods-nav](https://uniapp.dcloud.io/component/uniui/uni-goods-nav)
+## 1.1.1（2021-08-24）
+- 新增 支持国际化
+## 1.1.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.7（2021-05-12）
+- 新增 组件示例地址
+## 1.0.6（2021-04-21）
+- 优化 添加依赖 uni-icons, 导入后自动下载依赖
+## 1.0.5（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+
+## 1.0.4（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/en.json b/uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/en.json
new file mode 100644
index 0000000..dcdba41
--- /dev/null
+++ b/uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/en.json
@@ -0,0 +1,6 @@
+{
+	"uni-goods-nav.options.shop": "shop",
+	"uni-goods-nav.options.cart": "cart",
+	"uni-goods-nav.buttonGroup.addToCart": "add to cart",
+	"uni-goods-nav.buttonGroup.buyNow": "buy now"
+}
diff --git a/uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/index.js b/uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/index.js
new file mode 100644
index 0000000..de7509c
--- /dev/null
+++ b/uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/index.js
@@ -0,0 +1,8 @@
+import en from './en.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
+}
diff --git a/uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/zh-Hans.json b/uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/zh-Hans.json
new file mode 100644
index 0000000..48ee344
--- /dev/null
+++ b/uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/zh-Hans.json
@@ -0,0 +1,6 @@
+{
+	"uni-goods-nav.options.shop": "店铺",
+	"uni-goods-nav.options.cart": "购物车",
+	"uni-goods-nav.buttonGroup.addToCart": "加入购物车",
+	"uni-goods-nav.buttonGroup.buyNow": "立即购买"
+}
diff --git a/uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/zh-Hant.json b/uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/zh-Hant.json
new file mode 100644
index 0000000..d0a0255
--- /dev/null
+++ b/uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/zh-Hant.json
@@ -0,0 +1,6 @@
+{
+	"uni-goods-nav.options.shop": "店鋪",
+	"uni-goods-nav.options.cart": "購物車",
+	"uni-goods-nav.buttonGroup.addToCart": "加入購物車",
+	"uni-goods-nav.buttonGroup.buyNow": "立即購買"
+}
diff --git a/uni_modules/uni-goods-nav/components/uni-goods-nav/uni-goods-nav.vue b/uni_modules/uni-goods-nav/components/uni-goods-nav/uni-goods-nav.vue
new file mode 100644
index 0000000..8a16b17
--- /dev/null
+++ b/uni_modules/uni-goods-nav/components/uni-goods-nav/uni-goods-nav.vue
@@ -0,0 +1,229 @@
+<template>
+	<view class="uni-goods-nav">
+		<!-- 底部占位 -->
+		<view class="uni-tab__seat" />
+		<view class="uni-tab__cart-box flex">
+			<view class="flex uni-tab__cart-sub-left">
+				<view v-for="(item,index) in options" :key="index" class="flex uni-tab__cart-button-left uni-tab__shop-cart" @click="onClick(index,item)">
+					<view class="uni-tab__icon">
+						<uni-icons :type="item.icon" size="20" color="#646566"></uni-icons>
+						<!-- <image class="image" :src="item.icon" mode="widthFix" /> -->
+					</view>
+					<text class="uni-tab__text">{{ item.text }}</text>
+					<view class="flex uni-tab__dot-box">
+						<text v-if="item.info" :class="{ 'uni-tab__dots': item.info > 9 }" class="uni-tab__dot " :style="{'backgroundColor':item.infoBackgroundColor?item.infoBackgroundColor:'#ff0000',
+						color:item.infoColor?item.infoColor:'#fff'
+						}">{{ item.info }}</text>
+					</view>
+				</view>
+			</view>
+			<view :class="{'uni-tab__right':fill}" class="flex uni-tab__cart-sub-right ">
+				<view v-for="(item,index) in buttonGroup" :key="index" :style="{background:item.backgroundColor,color:item.color}"
+				 class="flex uni-tab__cart-button-right" @click="buttonClick(index,item)"><text :style="{color:item.color}" class="uni-tab__cart-button-right-text">{{ item.text }}</text></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+	initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import messages from './i18n/index.js'
+	const {	t	} = initVueI18n(messages)
+	/**
+	 * GoodsNav 商品导航
+	 * @description 商品加入购物车、立即购买等
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=865
+	 * @property {Array} options 组件参数
+	 * @property {Array} buttonGroup 组件按钮组参数
+	 * @property {Boolean} fill = [true | false] 组件按钮组参数
+	 * @property {Boolean} stat 是否开启统计功能
+	 * @event {Function} click 左侧点击事件
+	 * @event {Function} buttonClick 右侧按钮组点击事件
+	 * @example <uni-goods-nav :fill="true"  options="" buttonGroup="buttonGroup"  @click="" @buttonClick="" />
+	 */
+	export default {
+		name: 'UniGoodsNav',
+		emits:['click','buttonClick'],
+		props: {
+			options: {
+				type: Array,
+				default () {
+					return [{
+						icon: 'shop',
+						text: t("uni-goods-nav.options.shop"),
+					}, {
+						icon: 'cart',
+						text: t("uni-goods-nav.options.cart")
+					}]
+				}
+			},
+			buttonGroup: {
+				type: Array,
+				default () {
+					return [{
+							text: t("uni-goods-nav.buttonGroup.addToCart"),
+							backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
+							color: '#fff'
+						},
+						{
+							text: t("uni-goods-nav.buttonGroup.buyNow"),
+							backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
+							color: '#fff'
+						}
+					]
+				}
+			},
+			fill: {
+				type: Boolean,
+				default: false
+			},
+			stat:{
+				type: Boolean,
+				default: false
+			}
+		},
+		methods: {
+			onClick(index, item) {
+				this.$emit('click', {
+					index,
+					content: item,
+				})
+			},
+			buttonClick(index, item) {
+				if (uni.report && this.stat) {
+					uni.report(item.text, item.text)
+				}
+				this.$emit('buttonClick', {
+					index,
+					content: item
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	.flex {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-goods-nav {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+	}
+
+	.uni-tab__cart-box {
+		flex: 1;
+		height: 50px;
+		background-color: #fff;
+		z-index: 900;
+	}
+
+	.uni-tab__cart-sub-left {
+		padding: 0 5px;
+	}
+
+	.uni-tab__cart-sub-right {
+		flex: 1;
+	}
+
+	.uni-tab__right {
+		margin: 5px 0;
+		margin-right: 10px;
+		border-radius: 100px;
+		overflow: hidden;
+	}
+
+	.uni-tab__cart-button-left {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		// flex: 1;
+		position: relative;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+		margin: 0 10px;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-tab__icon {
+		width: 18px;
+		height: 18px;
+	}
+
+	.image {
+		width: 18px;
+		height: 18px;
+	}
+
+	.uni-tab__text {
+		margin-top: 3px;
+		font-size: 12px;
+		color: #646566;
+	}
+
+	.uni-tab__cart-button-right {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		flex-direction: column;
+		/* #endif */
+		flex: 1;
+		justify-content: center;
+		align-items: center;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-tab__cart-button-right-text {
+		font-size: 14px;
+		color: #fff;
+	}
+
+	.uni-tab__cart-button-right:active {
+		opacity: 0.7;
+	}
+
+	.uni-tab__dot-box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		flex-direction: column;
+		/* #endif */
+		position: absolute;
+		right: -2px;
+		top: 2px;
+		justify-content: center;
+		align-items: center;
+		// width: 0;
+		// height: 0;
+	}
+
+	.uni-tab__dot {
+		// width: 30rpx;
+		// height: 30rpx;
+		padding: 0 4px;
+		line-height: 15px;
+		color: #ffffff;
+		text-align: center;
+		font-size: 12px;
+		background-color: #ff0000;
+		border-radius: 15px;
+	}
+
+	.uni-tab__dots {
+		padding: 0 4px;
+		// width: auto;
+		border-radius: 15px;
+	}
+</style>
diff --git a/uni_modules/uni-goods-nav/package.json b/uni_modules/uni-goods-nav/package.json
new file mode 100644
index 0000000..636e45e
--- /dev/null
+++ b/uni_modules/uni-goods-nav/package.json
@@ -0,0 +1,88 @@
+{
+  "id": "uni-goods-nav",
+  "displayName": "uni-goods-nav 商品导航",
+  "version": "1.2.1",
+  "description": "商品导航组件主要用于电商类应用底部导航，可自定义加入购物车，购买等操作",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "商品导航"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+			"uni-icons"
+		],
+    "encrypt": [],
+    "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/uni_modules/uni-goods-nav/readme.md b/uni_modules/uni-goods-nav/readme.md
new file mode 100644
index 0000000..07df93f
--- /dev/null
+++ b/uni_modules/uni-goods-nav/readme.md
@@ -0,0 +1,10 @@
+
+
+## GoodsNav 商品导航
+> **组件名：uni-goods-nav**
+> 代码块： `uGoodsNav`
+
+商品加入购物车，立即购买等。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-goods-nav)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/uni_modules/uni-grid/changelog.md b/uni_modules/uni-grid/changelog.md
new file mode 100644
index 0000000..d301166
--- /dev/null
+++ b/uni_modules/uni-grid/changelog.md
@@ -0,0 +1,13 @@
+## 1.4.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-grid](https://uniapp.dcloud.io/component/uniui/uni-grid)
+## 1.3.2（2021-11-09） 
+- 新增 提供组件设计资源，组件样式调整
+## 1.3.1（2021-07-30）
+- 优化 vue3下事件警告的问题
+## 1.3.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.2.4（2021-05-12）
+- 新增 组件示例地址
+## 1.2.3（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-grid/components/uni-grid-item/uni-grid-item.vue b/uni_modules/uni-grid/components/uni-grid-item/uni-grid-item.vue
new file mode 100644
index 0000000..19c08d7
--- /dev/null
+++ b/uni_modules/uni-grid/components/uni-grid-item/uni-grid-item.vue
@@ -0,0 +1,127 @@
+<template>
+	<view v-if="width" :style="'width:'+width+';'+(square?'height:'+width:'')" class="uni-grid-item">
+		<view :class="{ 'uni-grid-item--border': showBorder,  'uni-grid-item--border-top': showBorder && index < column, 'uni-highlight': highlight }"
+		 :style="{'border-right-color': borderColor ,'border-bottom-color': borderColor ,'border-top-color': borderColor }"
+		 class="uni-grid-item__box" @click="_onClick">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * GridItem 宫格
+	 * @description 宫格组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=27
+	 * @property {Number} index 子组件的唯一标识 ，点击gird会返回当前的标识
+	 */
+	export default {
+		name: 'UniGridItem',
+		inject: ['grid'],
+		props: {
+			index: {
+				type: Number,
+				default: 0
+			}
+		},
+		data() {
+			return {
+				column: 0,
+				showBorder: true,
+				square: true,
+				highlight: true,
+				left: 0,
+				top: 0,
+				openNum: 2,
+				width: 0,
+				borderColor: '#e5e5e5'
+			}
+		},
+		created() {
+			this.column = this.grid.column
+			this.showBorder = this.grid.showBorder
+			this.square = this.grid.square
+			this.highlight = this.grid.highlight
+			this.top = this.hor === 0 ? this.grid.hor : this.hor
+			this.left = this.ver === 0 ? this.grid.ver : this.ver
+			this.borderColor = this.grid.borderColor
+			this.grid.children.push(this)
+			// this.grid.init()
+			this.width = this.grid.width
+		},
+		beforeDestroy() {
+			this.grid.children.forEach((item, index) => {
+				if (item === this) {
+					this.grid.children.splice(index, 1)
+				}
+			})
+		},
+		methods: {
+			_onClick() {
+				this.grid.change({
+					detail: {
+						index: this.index
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uni-grid-item {
+		/* #ifndef APP-NVUE */
+		height: 100%;
+		display: flex;
+		/* #endif */
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-grid-item__box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		width: 100%;
+		/* #endif */
+		position: relative;
+		flex: 1;
+		flex-direction: column;
+		// justify-content: center;
+		// align-items: center;
+	}
+
+	.uni-grid-item--border {
+		position: relative;
+		/* #ifdef APP-NVUE */
+		border-bottom-color: #D2D2D2;
+		border-bottom-style: solid;
+		border-bottom-width: 0.5px;
+		border-right-color: #D2D2D2;
+		border-right-style: solid;
+		border-right-width: 0.5px;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		z-index: 0;
+		border-bottom: 1px #D2D2D2 solid;
+		border-right: 1px #D2D2D2 solid;
+		/* #endif */
+	}
+	.uni-grid-item--border-top {
+		position: relative;
+		/* #ifdef APP-NVUE */
+		border-top-color: #D2D2D2;
+		border-top-style: solid;
+		border-top-width: 0.5px;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		border-top: 1px #D2D2D2 solid;
+		z-index: 0;
+		/* #endif */
+	}
+
+
+	.uni-highlight:active {
+		background-color: #f1f1f1;
+	}
+</style>
diff --git a/uni_modules/uni-grid/components/uni-grid/uni-grid.vue b/uni_modules/uni-grid/components/uni-grid/uni-grid.vue
new file mode 100644
index 0000000..0edc7ff
--- /dev/null
+++ b/uni_modules/uni-grid/components/uni-grid/uni-grid.vue
@@ -0,0 +1,142 @@
+<template>
+	<view class="uni-grid-wrap">
+		<view :id="elId" ref="uni-grid" class="uni-grid" :class="{ 'uni-grid--border': showBorder }" :style="{ 'border-left-color':borderColor}">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+	// #ifdef APP-NVUE
+	const dom = uni.requireNativePlugin('dom');
+	// #endif
+
+	/**
+	 * Grid 宫格
+	 * @description 宫格组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=27
+	 * @property {Number} column 每列显示个数
+	 * @property {String} borderColor 边框颜色
+	 * @property {Boolean} showBorder 是否显示边框
+	 * @property {Boolean} square 是否方形显示
+	 * @property {Boolean} Boolean 点击背景是否高亮
+	 * @event {Function} change 点击 grid 触发，e={detail:{index:0}}，index 为当前点击 gird 下标
+	 */
+	export default {
+		name: 'UniGrid',
+		emits:['change'],
+		props: {
+			// 每列显示个数
+			column: {
+				type: Number,
+				default: 3
+			},
+			// 是否显示边框
+			showBorder: {
+				type: Boolean,
+				default: true
+			},
+			// 边框颜色
+			borderColor: {
+				type: String,
+				default: '#D2D2D2'
+			},
+			// 是否正方形显示,默认为 true
+			square: {
+				type: Boolean,
+				default: true
+			},
+			highlight: {
+				type: Boolean,
+				default: true
+			}
+		},
+		provide() {
+			return {
+				grid: this
+			}
+		},
+		data() {
+			const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
+			return {
+				elId,
+				width: 0
+			}
+		},
+		created() {
+			this.children = []
+		},
+		mounted() {
+			this.$nextTick(()=>{
+				this.init()
+			})
+		},
+		methods: {
+			init() {
+				setTimeout(() => {
+					this._getSize((width) => {
+						this.children.forEach((item, index) => {
+							item.width = width
+						})
+					})
+				}, 50)
+			},
+			change(e) {
+				this.$emit('change', e)
+			},
+			_getSize(fn) {
+				// #ifndef APP-NVUE
+				uni.createSelectorQuery()
+					.in(this)
+					.select(`#${this.elId}`)
+					.boundingClientRect()
+					.exec(ret => {
+						this.width = parseInt((ret[0].width - 1) / this.column) + 'px'
+						fn(this.width)
+					})
+				// #endif
+				// #ifdef APP-NVUE
+				dom.getComponentRect(this.$refs['uni-grid'], (ret) => {
+					this.width = parseInt((ret.size.width - 1) / this.column) + 'px'
+					fn(this.width)
+				})
+				// #endif
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uni-grid-wrap {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: column;
+		/* #ifdef H5 */
+		width: 100%;
+		/* #endif */
+	}
+
+	.uni-grid {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		// flex: 1;
+		flex-direction: row;
+		flex-wrap: wrap;
+	}
+
+	.uni-grid--border {
+		position: relative;
+		/* #ifdef APP-NVUE */
+		border-left-color: #D2D2D2;
+		border-left-style: solid;
+		border-left-width: 0.5px;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		z-index: 1;
+		border-left: 1px #D2D2D2 solid;
+		/* #endif */
+	}
+</style>
diff --git a/uni_modules/uni-grid/package.json b/uni_modules/uni-grid/package.json
new file mode 100644
index 0000000..ccb2c91
--- /dev/null
+++ b/uni_modules/uni-grid/package.json
@@ -0,0 +1,86 @@
+{
+  "id": "uni-grid",
+  "displayName": "uni-grid 宫格",
+  "version": "1.4.0",
+  "description": "Grid 宫格组件，提供移动端常见的宫格布局，如九宫格。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "九宫格",
+    "表格"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss","uni-icons"],
+    "encrypt": [],
+    "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/uni_modules/uni-grid/readme.md b/uni_modules/uni-grid/readme.md
new file mode 100644
index 0000000..0aa44cc
--- /dev/null
+++ b/uni_modules/uni-grid/readme.md
@@ -0,0 +1,11 @@
+
+
+## Grid 宫格
+> **组件名：uni-grid**
+> 代码块： `uGrid`
+
+
+宫格组件。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-grid)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/uni_modules/uni-group/changelog.md b/uni_modules/uni-group/changelog.md
new file mode 100644
index 0000000..a7024fd
--- /dev/null
+++ b/uni_modules/uni-group/changelog.md
@@ -0,0 +1,16 @@
+## 1.2.2（2022-05-30）
+- 新增 stat属性，是否开启uni统计功能
+## 1.2.1（2021-11-22）
+- 修复 vue3中某些scss变量无法找到的问题
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-group](https://uniapp.dcloud.io/component/uniui/uni-group)
+## 1.1.7（2021-11-08）
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+- 优化 组件文档
+## 1.0.3（2021-05-12）
+- 新增 组件示例地址
+## 1.0.2（2021-02-05）
+- 调整为uni_modules目录规范
+- 优化 兼容 nvue 页面
diff --git a/uni_modules/uni-group/components/uni-group/uni-group.vue b/uni_modules/uni-group/components/uni-group/uni-group.vue
new file mode 100644
index 0000000..3425ecd
--- /dev/null
+++ b/uni_modules/uni-group/components/uni-group/uni-group.vue
@@ -0,0 +1,134 @@
+<template>
+	<view class="uni-group" :class="['uni-group--'+mode ,margin?'group-margin':'']" :style="{marginTop: `${top}px` }">
+		<slot name="title">
+			<view v-if="title" class="uni-group__title" :style="{'padding-left':border?'30px':'15px'}">
+				<text class="uni-group__title-text">{{ title }}</text>
+			</view>
+		</slot>
+		<view class="uni-group__content" :class="{'group-conent-padding':border}">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * Group 分组
+	 * @description 表单字段分组
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3281
+	 * @property {String} title 主标题
+	 * @property {Number} top 分组间隔
+	 * @property {Number} mode 模式
+	 */
+	export default {
+		name: 'uniGroup',
+		emits:['click'],
+		props: {
+			title: {
+				type: String,
+				default: ''
+			},
+			top: {
+				type: [Number, String],
+				default: 10
+			},
+			mode: {
+				type: String,
+				default: 'default'
+			},
+			stat:{
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				margin: false,
+				border: false
+			}
+		},
+		watch: {
+			title(newVal) {
+				if (uni.report && this.stat && newVal !== '') {
+					uni.report('title', newVal)
+				}
+			}
+		},
+		created() {
+			this.form = this.getForm()
+			if (this.form) {
+				this.margin = true
+				this.border = this.form.border
+			}
+		},
+		methods: {
+			/**
+			 * 获取父元素实例
+			 */
+			getForm() {
+				let parent = this.$parent;
+				let parentName = parent.$options.name;
+				while (parentName !== 'uniForms') {
+					parent = parent.$parent;
+					if (!parent) return false
+					parentName = parent.$options.name;
+				}
+				return parent;
+			},
+			onClick() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+<style lang="scss" >
+	.uni-group {
+		background: #fff;
+		margin-top: 10px;
+		// border: 1px red solid;
+	}
+
+	.group-margin {
+		// margin: 0 -15px;
+	}
+
+	.uni-group__title {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		padding-left: 15px;
+		height: 40px;
+		background-color: #eee;
+		font-weight: normal;
+		color: #666;
+	}
+
+	.uni-group__content {
+		padding: 15px;
+		// padding-bottom: 5px;
+		// background-color: #FFF;
+	}
+
+	.group-conent-padding {
+		padding: 0 15px;
+	}
+
+	.uni-group__title-text {
+		font-size: 14px;
+		color: #666;
+	}
+
+	.distraction {
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.uni-group--card {
+		margin: 10px;
+		border-radius: 5px;
+		overflow: hidden;
+		box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.08);
+	}
+</style>
diff --git a/uni_modules/uni-group/package.json b/uni_modules/uni-group/package.json
new file mode 100644
index 0000000..ea00a08
--- /dev/null
+++ b/uni_modules/uni-group/package.json
@@ -0,0 +1,87 @@
+{
+  "id": "uni-group",
+  "displayName": "uni-group 分组",
+  "version": "1.2.2",
+  "description": "分组组件可用于将组件用于分组，添加间隔，以产生明显的区块",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "group",
+    "分组",
+    ""
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-group/readme.md b/uni_modules/uni-group/readme.md
new file mode 100644
index 0000000..bae67f4
--- /dev/null
+++ b/uni_modules/uni-group/readme.md
@@ -0,0 +1,9 @@
+
+## Group 分组
+> **组件名：uni-group**
+> 代码块： `uGroup`
+
+分组组件可用于将组件分组，添加间隔，以产生明显的区块。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-group)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/uni_modules/uni-icons/changelog.md b/uni_modules/uni-icons/changelog.md
new file mode 100644
index 0000000..620ab02
--- /dev/null
+++ b/uni_modules/uni-icons/changelog.md
@@ -0,0 +1,40 @@
+## 2.0.9（2024-01-12）
+fix: 修复图标大小默认值错误的问题
+## 2.0.8（2023-12-14）
+- 修复 项目未使用 ts 情况下，打包报错的bug
+## 2.0.7（2023-12-14）
+- 修复 size 属性为 string 时，不加单位导致尺寸异常的bug
+## 2.0.6（2023-12-11）
+- 优化 兼容老版本icon类型，如 top ，bottom 等
+## 2.0.5（2023-12-11）
+- 优化 兼容老版本icon类型，如 top ，bottom 等
+## 2.0.4（2023-12-06）
+- 优化 uni-app x 下示例项目图标排序
+## 2.0.3（2023-12-06）
+- 修复 nvue下引入组件报错的bug
+## 2.0.2（2023-12-05）
+-优化 size 属性支持单位
+## 2.0.1（2023-12-05）
+- 新增 uni-app x 支持定义图标
+## 1.3.5（2022-01-24）
+- 优化 size 属性可以传入不带单位的字符串数值
+## 1.3.4（2022-01-24）
+- 优化 size 支持其他单位
+## 1.3.3（2022-01-17）
+- 修复 nvue 有些图标不显示的bug，兼容老版本图标
+## 1.3.2（2021-12-01）
+- 优化 示例可复制图标名称
+## 1.3.1（2021-11-23）
+- 优化 兼容旧组件 type 值
+## 1.3.0（2021-11-19）
+- 新增 更多图标
+- 优化 自定义图标使用方式
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-icons](https://uniapp.dcloud.io/component/uniui/uni-icons)
+## 1.1.7（2021-11-08）
+## 1.2.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.1.5（2021-05-12）
+- 新增 组件示例地址
+## 1.1.4（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-icons/components/uni-icons/uni-icons.uvue b/uni_modules/uni-icons/components/uni-icons/uni-icons.uvue
new file mode 100644
index 0000000..398678e
--- /dev/null
+++ b/uni_modules/uni-icons/components/uni-icons/uni-icons.uvue
@@ -0,0 +1,91 @@
+<template>
+	<text class="uni-icons" :style="styleObj">
+		<slot>{{unicode}}</slot>
+	</text>
+</template>
+
+<script>
+	import { fontData, IconsDataItem } from './uniicons_file'
+
+	/**
+	 * Icons 图标
+	 * @description 用于展示 icon 图标
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=28
+	 * @property {Number} size 图标大小
+	 * @property {String} type 图标图案，参考示例
+	 * @property {String} color 图标颜色
+	 * @property {String} customPrefix 自定义图标
+	 * @event {Function} click 点击 Icon 触发事件
+	 */
+	export default {
+		name: "uni-icons",
+		props: {
+			type: {
+				type: String,
+				default: ''
+			},
+			color: {
+				type: String,
+				default: '#333333'
+			},
+			size: {
+				type: Object,
+				default: 16
+			},
+			fontFamily: {
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {};
+		},
+		computed: {
+			unicode() : string {
+				let codes = fontData.find((item : IconsDataItem) : boolean => { return item.font_class == this.type })
+				if (codes !== null) {
+					return codes.unicode
+				}
+				return ''
+			},
+			iconSize() : string {
+				const size = this.size
+				if (typeof size == 'string') {
+					const reg = /^[0-9]*$/g
+					return reg.test(size as string) ? '' + size + 'px' : '' + size;
+					// return '' + this.size
+				}
+				return this.getFontSize(size as number)
+			},
+			styleObj() : UTSJSONObject {
+				if (this.fontFamily !== '') {
+					return { color: this.color, fontSize: this.iconSize, fontFamily: this.fontFamily }
+				}
+				return { color: this.color, fontSize: this.iconSize }
+			}
+		},
+		created() { },
+		methods: {
+			/**
+			 * 字体大小
+			 */
+			getFontSize(size : number) : string {
+				return size + 'px';
+			},
+		},
+	}
+</script>
+
+<style scoped>
+	@font-face {
+		font-family: UniIconsFontFamily;
+		src: url('./uniicons.ttf');
+	}
+
+	.uni-icons {
+		font-family: UniIconsFontFamily;
+		font-size: 18px;
+		font-style: normal;
+		color: #333;
+	}
+</style>
diff --git a/uni_modules/uni-icons/components/uni-icons/uni-icons.vue b/uni_modules/uni-icons/components/uni-icons/uni-icons.vue
new file mode 100644
index 0000000..7da5356
--- /dev/null
+++ b/uni_modules/uni-icons/components/uni-icons/uni-icons.vue
@@ -0,0 +1,110 @@
+<template>
+	<!-- #ifdef APP-NVUE -->
+	<text :style="styleObj" class="uni-icons" @click="_onClick">{{unicode}}</text>
+	<!-- #endif -->
+	<!-- #ifndef APP-NVUE -->
+	<text :style="styleObj" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick">
+		<slot></slot>
+	</text>
+	<!-- #endif -->
+</template>
+
+<script>
+	import { fontData } from './uniicons_file_vue.js';
+
+	const getVal = (val) => {
+		const reg = /^[0-9]*$/g
+		return (typeof val === 'number' || reg.test(val)) ? val + 'px' : val;
+	}
+
+	// #ifdef APP-NVUE
+	var domModule = weex.requireModule('dom');
+	import iconUrl from './uniicons.ttf'
+	domModule.addRule('fontFace', {
+		'fontFamily': "uniicons",
+		'src': "url('" + iconUrl + "')"
+	});
+	// #endif
+
+	/**
+	 * Icons 图标
+	 * @description 用于展示 icons 图标
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=28
+	 * @property {Number} size 图标大小
+	 * @property {String} type 图标图案，参考示例
+	 * @property {String} color 图标颜色
+	 * @property {String} customPrefix 自定义图标
+	 * @event {Function} click 点击 Icon 触发事件
+	 */
+	export default {
+		name: 'UniIcons',
+		emits: ['click'],
+		props: {
+			type: {
+				type: String,
+				default: ''
+			},
+			color: {
+				type: String,
+				default: '#333333'
+			},
+			size: {
+				type: [Number, String],
+				default: 16
+			},
+			customPrefix: {
+				type: String,
+				default: ''
+			},
+			fontFamily: {
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				icons: fontData
+			}
+		},
+		computed: {
+			unicode() {
+				let code = this.icons.find(v => v.font_class === this.type)
+				if (code) {
+					return code.unicode
+				}
+				return ''
+			},
+			iconSize() {
+				return getVal(this.size)
+			},
+			styleObj() {
+				if (this.fontFamily !== '') {
+					return `color: ${this.color}; font-size: ${this.iconSize}; font-family: ${this.fontFamily};`
+				}
+				return `color: ${this.color}; font-size: ${this.iconSize};`
+			}
+		},
+		methods: {
+			_onClick() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	/* #ifndef APP-NVUE */
+	@import './uniicons.css';
+
+	@font-face {
+		font-family: uniicons;
+		src: url('./uniicons.ttf');
+	}
+
+	/* #endif */
+	.uni-icons {
+		font-family: uniicons;
+		text-decoration: none;
+		text-align: center;
+	}
+</style>
diff --git a/uni_modules/uni-icons/components/uni-icons/uniicons.css b/uni_modules/uni-icons/components/uni-icons/uniicons.css
new file mode 100644
index 0000000..0a6b6fe
--- /dev/null
+++ b/uni_modules/uni-icons/components/uni-icons/uniicons.css
@@ -0,0 +1,664 @@
+
+.uniui-cart-filled:before {
+  content: "\e6d0";
+}
+
+.uniui-gift-filled:before {
+  content: "\e6c4";
+}
+
+.uniui-color:before {
+  content: "\e6cf";
+}
+
+.uniui-wallet:before {
+  content: "\e6b1";
+}
+
+.uniui-settings-filled:before {
+  content: "\e6ce";
+}
+
+.uniui-auth-filled:before {
+  content: "\e6cc";
+}
+
+.uniui-shop-filled:before {
+  content: "\e6cd";
+}
+
+.uniui-staff-filled:before {
+  content: "\e6cb";
+}
+
+.uniui-vip-filled:before {
+  content: "\e6c6";
+}
+
+.uniui-plus-filled:before {
+  content: "\e6c7";
+}
+
+.uniui-folder-add-filled:before {
+  content: "\e6c8";
+}
+
+.uniui-color-filled:before {
+  content: "\e6c9";
+}
+
+.uniui-tune-filled:before {
+  content: "\e6ca";
+}
+
+.uniui-calendar-filled:before {
+  content: "\e6c0";
+}
+
+.uniui-notification-filled:before {
+  content: "\e6c1";
+}
+
+.uniui-wallet-filled:before {
+  content: "\e6c2";
+}
+
+.uniui-medal-filled:before {
+  content: "\e6c3";
+}
+
+.uniui-fire-filled:before {
+  content: "\e6c5";
+}
+
+.uniui-refreshempty:before {
+  content: "\e6bf";
+}
+
+.uniui-location-filled:before {
+  content: "\e6af";
+}
+
+.uniui-person-filled:before {
+  content: "\e69d";
+}
+
+.uniui-personadd-filled:before {
+  content: "\e698";
+}
+
+.uniui-arrowthinleft:before {
+  content: "\e6d2";
+}
+
+.uniui-arrowthinup:before {
+  content: "\e6d3";
+}
+
+.uniui-arrowthindown:before {
+  content: "\e6d4";
+}
+
+.uniui-back:before {
+  content: "\e6b9";
+}
+
+.uniui-forward:before {
+  content: "\e6ba";
+}
+
+.uniui-arrow-right:before {
+  content: "\e6bb";
+}
+
+.uniui-arrow-left:before {
+  content: "\e6bc";
+}
+
+.uniui-arrow-up:before {
+  content: "\e6bd";
+}
+
+.uniui-arrow-down:before {
+  content: "\e6be";
+}
+
+.uniui-arrowthinright:before {
+  content: "\e6d1";
+}
+
+.uniui-down:before {
+  content: "\e6b8";
+}
+
+.uniui-bottom:before {
+  content: "\e6b8";
+}
+
+.uniui-arrowright:before {
+  content: "\e6d5";
+}
+
+.uniui-right:before {
+  content: "\e6b5";
+}
+
+.uniui-up:before {
+  content: "\e6b6";
+}
+
+.uniui-top:before {
+  content: "\e6b6";
+}
+
+.uniui-left:before {
+  content: "\e6b7";
+}
+
+.uniui-arrowup:before {
+  content: "\e6d6";
+}
+
+.uniui-eye:before {
+  content: "\e651";
+}
+
+.uniui-eye-filled:before {
+  content: "\e66a";
+}
+
+.uniui-eye-slash:before {
+  content: "\e6b3";
+}
+
+.uniui-eye-slash-filled:before {
+  content: "\e6b4";
+}
+
+.uniui-info-filled:before {
+  content: "\e649";
+}
+
+.uniui-reload:before {
+  content: "\e6b2";
+}
+
+.uniui-micoff-filled:before {
+  content: "\e6b0";
+}
+
+.uniui-map-pin-ellipse:before {
+  content: "\e6ac";
+}
+
+.uniui-map-pin:before {
+  content: "\e6ad";
+}
+
+.uniui-location:before {
+  content: "\e6ae";
+}
+
+.uniui-starhalf:before {
+  content: "\e683";
+}
+
+.uniui-star:before {
+  content: "\e688";
+}
+
+.uniui-star-filled:before {
+  content: "\e68f";
+}
+
+.uniui-calendar:before {
+  content: "\e6a0";
+}
+
+.uniui-fire:before {
+  content: "\e6a1";
+}
+
+.uniui-medal:before {
+  content: "\e6a2";
+}
+
+.uniui-font:before {
+  content: "\e6a3";
+}
+
+.uniui-gift:before {
+  content: "\e6a4";
+}
+
+.uniui-link:before {
+  content: "\e6a5";
+}
+
+.uniui-notification:before {
+  content: "\e6a6";
+}
+
+.uniui-staff:before {
+  content: "\e6a7";
+}
+
+.uniui-vip:before {
+  content: "\e6a8";
+}
+
+.uniui-folder-add:before {
+  content: "\e6a9";
+}
+
+.uniui-tune:before {
+  content: "\e6aa";
+}
+
+.uniui-auth:before {
+  content: "\e6ab";
+}
+
+.uniui-person:before {
+  content: "\e699";
+}
+
+.uniui-email-filled:before {
+  content: "\e69a";
+}
+
+.uniui-phone-filled:before {
+  content: "\e69b";
+}
+
+.uniui-phone:before {
+  content: "\e69c";
+}
+
+.uniui-email:before {
+  content: "\e69e";
+}
+
+.uniui-personadd:before {
+  content: "\e69f";
+}
+
+.uniui-chatboxes-filled:before {
+  content: "\e692";
+}
+
+.uniui-contact:before {
+  content: "\e693";
+}
+
+.uniui-chatbubble-filled:before {
+  content: "\e694";
+}
+
+.uniui-contact-filled:before {
+  content: "\e695";
+}
+
+.uniui-chatboxes:before {
+  content: "\e696";
+}
+
+.uniui-chatbubble:before {
+  content: "\e697";
+}
+
+.uniui-upload-filled:before {
+  content: "\e68e";
+}
+
+.uniui-upload:before {
+  content: "\e690";
+}
+
+.uniui-weixin:before {
+  content: "\e691";
+}
+
+.uniui-compose:before {
+  content: "\e67f";
+}
+
+.uniui-qq:before {
+  content: "\e680";
+}
+
+.uniui-download-filled:before {
+  content: "\e681";
+}
+
+.uniui-pyq:before {
+  content: "\e682";
+}
+
+.uniui-sound:before {
+  content: "\e684";
+}
+
+.uniui-trash-filled:before {
+  content: "\e685";
+}
+
+.uniui-sound-filled:before {
+  content: "\e686";
+}
+
+.uniui-trash:before {
+  content: "\e687";
+}
+
+.uniui-videocam-filled:before {
+  content: "\e689";
+}
+
+.uniui-spinner-cycle:before {
+  content: "\e68a";
+}
+
+.uniui-weibo:before {
+  content: "\e68b";
+}
+
+.uniui-videocam:before {
+  content: "\e68c";
+}
+
+.uniui-download:before {
+  content: "\e68d";
+}
+
+.uniui-help:before {
+  content: "\e679";
+}
+
+.uniui-navigate-filled:before {
+  content: "\e67a";
+}
+
+.uniui-plusempty:before {
+  content: "\e67b";
+}
+
+.uniui-smallcircle:before {
+  content: "\e67c";
+}
+
+.uniui-minus-filled:before {
+  content: "\e67d";
+}
+
+.uniui-micoff:before {
+  content: "\e67e";
+}
+
+.uniui-closeempty:before {
+  content: "\e66c";
+}
+
+.uniui-clear:before {
+  content: "\e66d";
+}
+
+.uniui-navigate:before {
+  content: "\e66e";
+}
+
+.uniui-minus:before {
+  content: "\e66f";
+}
+
+.uniui-image:before {
+  content: "\e670";
+}
+
+.uniui-mic:before {
+  content: "\e671";
+}
+
+.uniui-paperplane:before {
+  content: "\e672";
+}
+
+.uniui-close:before {
+  content: "\e673";
+}
+
+.uniui-help-filled:before {
+  content: "\e674";
+}
+
+.uniui-paperplane-filled:before {
+  content: "\e675";
+}
+
+.uniui-plus:before {
+  content: "\e676";
+}
+
+.uniui-mic-filled:before {
+  content: "\e677";
+}
+
+.uniui-image-filled:before {
+  content: "\e678";
+}
+
+.uniui-locked-filled:before {
+  content: "\e668";
+}
+
+.uniui-info:before {
+  content: "\e669";
+}
+
+.uniui-locked:before {
+  content: "\e66b";
+}
+
+.uniui-camera-filled:before {
+  content: "\e658";
+}
+
+.uniui-chat-filled:before {
+  content: "\e659";
+}
+
+.uniui-camera:before {
+  content: "\e65a";
+}
+
+.uniui-circle:before {
+  content: "\e65b";
+}
+
+.uniui-checkmarkempty:before {
+  content: "\e65c";
+}
+
+.uniui-chat:before {
+  content: "\e65d";
+}
+
+.uniui-circle-filled:before {
+  content: "\e65e";
+}
+
+.uniui-flag:before {
+  content: "\e65f";
+}
+
+.uniui-flag-filled:before {
+  content: "\e660";
+}
+
+.uniui-gear-filled:before {
+  content: "\e661";
+}
+
+.uniui-home:before {
+  content: "\e662";
+}
+
+.uniui-home-filled:before {
+  content: "\e663";
+}
+
+.uniui-gear:before {
+  content: "\e664";
+}
+
+.uniui-smallcircle-filled:before {
+  content: "\e665";
+}
+
+.uniui-map-filled:before {
+  content: "\e666";
+}
+
+.uniui-map:before {
+  content: "\e667";
+}
+
+.uniui-refresh-filled:before {
+  content: "\e656";
+}
+
+.uniui-refresh:before {
+  content: "\e657";
+}
+
+.uniui-cloud-upload:before {
+  content: "\e645";
+}
+
+.uniui-cloud-download-filled:before {
+  content: "\e646";
+}
+
+.uniui-cloud-download:before {
+  content: "\e647";
+}
+
+.uniui-cloud-upload-filled:before {
+  content: "\e648";
+}
+
+.uniui-redo:before {
+  content: "\e64a";
+}
+
+.uniui-images-filled:before {
+  content: "\e64b";
+}
+
+.uniui-undo-filled:before {
+  content: "\e64c";
+}
+
+.uniui-more:before {
+  content: "\e64d";
+}
+
+.uniui-more-filled:before {
+  content: "\e64e";
+}
+
+.uniui-undo:before {
+  content: "\e64f";
+}
+
+.uniui-images:before {
+  content: "\e650";
+}
+
+.uniui-paperclip:before {
+  content: "\e652";
+}
+
+.uniui-settings:before {
+  content: "\e653";
+}
+
+.uniui-search:before {
+  content: "\e654";
+}
+
+.uniui-redo-filled:before {
+  content: "\e655";
+}
+
+.uniui-list:before {
+  content: "\e644";
+}
+
+.uniui-mail-open-filled:before {
+  content: "\e63a";
+}
+
+.uniui-hand-down-filled:before {
+  content: "\e63c";
+}
+
+.uniui-hand-down:before {
+  content: "\e63d";
+}
+
+.uniui-hand-up-filled:before {
+  content: "\e63e";
+}
+
+.uniui-hand-up:before {
+  content: "\e63f";
+}
+
+.uniui-heart-filled:before {
+  content: "\e641";
+}
+
+.uniui-mail-open:before {
+  content: "\e643";
+}
+
+.uniui-heart:before {
+  content: "\e639";
+}
+
+.uniui-loop:before {
+  content: "\e633";
+}
+
+.uniui-pulldown:before {
+  content: "\e632";
+}
+
+.uniui-scan:before {
+  content: "\e62a";
+}
+
+.uniui-bars:before {
+  content: "\e627";
+}
+
+.uniui-checkbox:before {
+  content: "\e62b";
+}
+
+.uniui-checkbox-filled:before {
+  content: "\e62c";
+}
+
+.uniui-shop:before {
+  content: "\e62f";
+}
+
+.uniui-headphones:before {
+  content: "\e630";
+}
+
+.uniui-cart:before {
+  content: "\e631";
+}
diff --git a/uni_modules/uni-icons/components/uni-icons/uniicons.ttf b/uni_modules/uni-icons/components/uni-icons/uniicons.ttf
new file mode 100644
index 0000000..14696d0
Binary files /dev/null and b/uni_modules/uni-icons/components/uni-icons/uniicons.ttf differ
diff --git a/uni_modules/uni-icons/components/uni-icons/uniicons_file.ts b/uni_modules/uni-icons/components/uni-icons/uniicons_file.ts
new file mode 100644
index 0000000..98e93aa
--- /dev/null
+++ b/uni_modules/uni-icons/components/uni-icons/uniicons_file.ts
@@ -0,0 +1,664 @@
+
+export type IconsData = {
+	id : string
+	name : string
+	font_family : string
+	css_prefix_text : string
+	description : string
+	glyphs : Array<IconsDataItem>
+}
+
+export type IconsDataItem = {
+	font_class : string
+	unicode : string
+}
+
+
+export const fontData = [
+  {
+    "font_class": "arrow-down",
+    "unicode": "\ue6be"
+  },
+  {
+    "font_class": "arrow-left",
+    "unicode": "\ue6bc"
+  },
+  {
+    "font_class": "arrow-right",
+    "unicode": "\ue6bb"
+  },
+  {
+    "font_class": "arrow-up",
+    "unicode": "\ue6bd"
+  },
+  {
+    "font_class": "auth",
+    "unicode": "\ue6ab"
+  },
+  {
+    "font_class": "auth-filled",
+    "unicode": "\ue6cc"
+  },
+  {
+    "font_class": "back",
+    "unicode": "\ue6b9"
+  },
+  {
+    "font_class": "bars",
+    "unicode": "\ue627"
+  },
+  {
+    "font_class": "calendar",
+    "unicode": "\ue6a0"
+  },
+  {
+    "font_class": "calendar-filled",
+    "unicode": "\ue6c0"
+  },
+  {
+    "font_class": "camera",
+    "unicode": "\ue65a"
+  },
+  {
+    "font_class": "camera-filled",
+    "unicode": "\ue658"
+  },
+  {
+    "font_class": "cart",
+    "unicode": "\ue631"
+  },
+  {
+    "font_class": "cart-filled",
+    "unicode": "\ue6d0"
+  },
+  {
+    "font_class": "chat",
+    "unicode": "\ue65d"
+  },
+  {
+    "font_class": "chat-filled",
+    "unicode": "\ue659"
+  },
+  {
+    "font_class": "chatboxes",
+    "unicode": "\ue696"
+  },
+  {
+    "font_class": "chatboxes-filled",
+    "unicode": "\ue692"
+  },
+  {
+    "font_class": "chatbubble",
+    "unicode": "\ue697"
+  },
+  {
+    "font_class": "chatbubble-filled",
+    "unicode": "\ue694"
+  },
+  {
+    "font_class": "checkbox",
+    "unicode": "\ue62b"
+  },
+  {
+    "font_class": "checkbox-filled",
+    "unicode": "\ue62c"
+  },
+  {
+    "font_class": "checkmarkempty",
+    "unicode": "\ue65c"
+  },
+  {
+    "font_class": "circle",
+    "unicode": "\ue65b"
+  },
+  {
+    "font_class": "circle-filled",
+    "unicode": "\ue65e"
+  },
+  {
+    "font_class": "clear",
+    "unicode": "\ue66d"
+  },
+  {
+    "font_class": "close",
+    "unicode": "\ue673"
+  },
+  {
+    "font_class": "closeempty",
+    "unicode": "\ue66c"
+  },
+  {
+    "font_class": "cloud-download",
+    "unicode": "\ue647"
+  },
+  {
+    "font_class": "cloud-download-filled",
+    "unicode": "\ue646"
+  },
+  {
+    "font_class": "cloud-upload",
+    "unicode": "\ue645"
+  },
+  {
+    "font_class": "cloud-upload-filled",
+    "unicode": "\ue648"
+  },
+  {
+    "font_class": "color",
+    "unicode": "\ue6cf"
+  },
+  {
+    "font_class": "color-filled",
+    "unicode": "\ue6c9"
+  },
+  {
+    "font_class": "compose",
+    "unicode": "\ue67f"
+  },
+  {
+    "font_class": "contact",
+    "unicode": "\ue693"
+  },
+  {
+    "font_class": "contact-filled",
+    "unicode": "\ue695"
+  },
+  {
+    "font_class": "down",
+    "unicode": "\ue6b8"
+  },
+	{
+	  "font_class": "bottom",
+	  "unicode": "\ue6b8"
+	},
+  {
+    "font_class": "download",
+    "unicode": "\ue68d"
+  },
+  {
+    "font_class": "download-filled",
+    "unicode": "\ue681"
+  },
+  {
+    "font_class": "email",
+    "unicode": "\ue69e"
+  },
+  {
+    "font_class": "email-filled",
+    "unicode": "\ue69a"
+  },
+  {
+    "font_class": "eye",
+    "unicode": "\ue651"
+  },
+  {
+    "font_class": "eye-filled",
+    "unicode": "\ue66a"
+  },
+  {
+    "font_class": "eye-slash",
+    "unicode": "\ue6b3"
+  },
+  {
+    "font_class": "eye-slash-filled",
+    "unicode": "\ue6b4"
+  },
+  {
+    "font_class": "fire",
+    "unicode": "\ue6a1"
+  },
+  {
+    "font_class": "fire-filled",
+    "unicode": "\ue6c5"
+  },
+  {
+    "font_class": "flag",
+    "unicode": "\ue65f"
+  },
+  {
+    "font_class": "flag-filled",
+    "unicode": "\ue660"
+  },
+  {
+    "font_class": "folder-add",
+    "unicode": "\ue6a9"
+  },
+  {
+    "font_class": "folder-add-filled",
+    "unicode": "\ue6c8"
+  },
+  {
+    "font_class": "font",
+    "unicode": "\ue6a3"
+  },
+  {
+    "font_class": "forward",
+    "unicode": "\ue6ba"
+  },
+  {
+    "font_class": "gear",
+    "unicode": "\ue664"
+  },
+  {
+    "font_class": "gear-filled",
+    "unicode": "\ue661"
+  },
+  {
+    "font_class": "gift",
+    "unicode": "\ue6a4"
+  },
+  {
+    "font_class": "gift-filled",
+    "unicode": "\ue6c4"
+  },
+  {
+    "font_class": "hand-down",
+    "unicode": "\ue63d"
+  },
+  {
+    "font_class": "hand-down-filled",
+    "unicode": "\ue63c"
+  },
+  {
+    "font_class": "hand-up",
+    "unicode": "\ue63f"
+  },
+  {
+    "font_class": "hand-up-filled",
+    "unicode": "\ue63e"
+  },
+  {
+    "font_class": "headphones",
+    "unicode": "\ue630"
+  },
+  {
+    "font_class": "heart",
+    "unicode": "\ue639"
+  },
+  {
+    "font_class": "heart-filled",
+    "unicode": "\ue641"
+  },
+  {
+    "font_class": "help",
+    "unicode": "\ue679"
+  },
+  {
+    "font_class": "help-filled",
+    "unicode": "\ue674"
+  },
+  {
+    "font_class": "home",
+    "unicode": "\ue662"
+  },
+  {
+    "font_class": "home-filled",
+    "unicode": "\ue663"
+  },
+  {
+    "font_class": "image",
+    "unicode": "\ue670"
+  },
+  {
+    "font_class": "image-filled",
+    "unicode": "\ue678"
+  },
+  {
+    "font_class": "images",
+    "unicode": "\ue650"
+  },
+  {
+    "font_class": "images-filled",
+    "unicode": "\ue64b"
+  },
+  {
+    "font_class": "info",
+    "unicode": "\ue669"
+  },
+  {
+    "font_class": "info-filled",
+    "unicode": "\ue649"
+  },
+  {
+    "font_class": "left",
+    "unicode": "\ue6b7"
+  },
+  {
+    "font_class": "link",
+    "unicode": "\ue6a5"
+  },
+  {
+    "font_class": "list",
+    "unicode": "\ue644"
+  },
+  {
+    "font_class": "location",
+    "unicode": "\ue6ae"
+  },
+  {
+    "font_class": "location-filled",
+    "unicode": "\ue6af"
+  },
+  {
+    "font_class": "locked",
+    "unicode": "\ue66b"
+  },
+  {
+    "font_class": "locked-filled",
+    "unicode": "\ue668"
+  },
+  {
+    "font_class": "loop",
+    "unicode": "\ue633"
+  },
+  {
+    "font_class": "mail-open",
+    "unicode": "\ue643"
+  },
+  {
+    "font_class": "mail-open-filled",
+    "unicode": "\ue63a"
+  },
+  {
+    "font_class": "map",
+    "unicode": "\ue667"
+  },
+  {
+    "font_class": "map-filled",
+    "unicode": "\ue666"
+  },
+  {
+    "font_class": "map-pin",
+    "unicode": "\ue6ad"
+  },
+  {
+    "font_class": "map-pin-ellipse",
+    "unicode": "\ue6ac"
+  },
+  {
+    "font_class": "medal",
+    "unicode": "\ue6a2"
+  },
+  {
+    "font_class": "medal-filled",
+    "unicode": "\ue6c3"
+  },
+  {
+    "font_class": "mic",
+    "unicode": "\ue671"
+  },
+  {
+    "font_class": "mic-filled",
+    "unicode": "\ue677"
+  },
+  {
+    "font_class": "micoff",
+    "unicode": "\ue67e"
+  },
+  {
+    "font_class": "micoff-filled",
+    "unicode": "\ue6b0"
+  },
+  {
+    "font_class": "minus",
+    "unicode": "\ue66f"
+  },
+  {
+    "font_class": "minus-filled",
+    "unicode": "\ue67d"
+  },
+  {
+    "font_class": "more",
+    "unicode": "\ue64d"
+  },
+  {
+    "font_class": "more-filled",
+    "unicode": "\ue64e"
+  },
+  {
+    "font_class": "navigate",
+    "unicode": "\ue66e"
+  },
+  {
+    "font_class": "navigate-filled",
+    "unicode": "\ue67a"
+  },
+  {
+    "font_class": "notification",
+    "unicode": "\ue6a6"
+  },
+  {
+    "font_class": "notification-filled",
+    "unicode": "\ue6c1"
+  },
+  {
+    "font_class": "paperclip",
+    "unicode": "\ue652"
+  },
+  {
+    "font_class": "paperplane",
+    "unicode": "\ue672"
+  },
+  {
+    "font_class": "paperplane-filled",
+    "unicode": "\ue675"
+  },
+  {
+    "font_class": "person",
+    "unicode": "\ue699"
+  },
+  {
+    "font_class": "person-filled",
+    "unicode": "\ue69d"
+  },
+  {
+    "font_class": "personadd",
+    "unicode": "\ue69f"
+  },
+  {
+    "font_class": "personadd-filled",
+    "unicode": "\ue698"
+  },
+  {
+    "font_class": "personadd-filled-copy",
+    "unicode": "\ue6d1"
+  },
+  {
+    "font_class": "phone",
+    "unicode": "\ue69c"
+  },
+  {
+    "font_class": "phone-filled",
+    "unicode": "\ue69b"
+  },
+  {
+    "font_class": "plus",
+    "unicode": "\ue676"
+  },
+  {
+    "font_class": "plus-filled",
+    "unicode": "\ue6c7"
+  },
+  {
+    "font_class": "plusempty",
+    "unicode": "\ue67b"
+  },
+  {
+    "font_class": "pulldown",
+    "unicode": "\ue632"
+  },
+  {
+    "font_class": "pyq",
+    "unicode": "\ue682"
+  },
+  {
+    "font_class": "qq",
+    "unicode": "\ue680"
+  },
+  {
+    "font_class": "redo",
+    "unicode": "\ue64a"
+  },
+  {
+    "font_class": "redo-filled",
+    "unicode": "\ue655"
+  },
+  {
+    "font_class": "refresh",
+    "unicode": "\ue657"
+  },
+  {
+    "font_class": "refresh-filled",
+    "unicode": "\ue656"
+  },
+  {
+    "font_class": "refreshempty",
+    "unicode": "\ue6bf"
+  },
+  {
+    "font_class": "reload",
+    "unicode": "\ue6b2"
+  },
+  {
+    "font_class": "right",
+    "unicode": "\ue6b5"
+  },
+  {
+    "font_class": "scan",
+    "unicode": "\ue62a"
+  },
+  {
+    "font_class": "search",
+    "unicode": "\ue654"
+  },
+  {
+    "font_class": "settings",
+    "unicode": "\ue653"
+  },
+  {
+    "font_class": "settings-filled",
+    "unicode": "\ue6ce"
+  },
+  {
+    "font_class": "shop",
+    "unicode": "\ue62f"
+  },
+  {
+    "font_class": "shop-filled",
+    "unicode": "\ue6cd"
+  },
+  {
+    "font_class": "smallcircle",
+    "unicode": "\ue67c"
+  },
+  {
+    "font_class": "smallcircle-filled",
+    "unicode": "\ue665"
+  },
+  {
+    "font_class": "sound",
+    "unicode": "\ue684"
+  },
+  {
+    "font_class": "sound-filled",
+    "unicode": "\ue686"
+  },
+  {
+    "font_class": "spinner-cycle",
+    "unicode": "\ue68a"
+  },
+  {
+    "font_class": "staff",
+    "unicode": "\ue6a7"
+  },
+  {
+    "font_class": "staff-filled",
+    "unicode": "\ue6cb"
+  },
+  {
+    "font_class": "star",
+    "unicode": "\ue688"
+  },
+  {
+    "font_class": "star-filled",
+    "unicode": "\ue68f"
+  },
+  {
+    "font_class": "starhalf",
+    "unicode": "\ue683"
+  },
+  {
+    "font_class": "trash",
+    "unicode": "\ue687"
+  },
+  {
+    "font_class": "trash-filled",
+    "unicode": "\ue685"
+  },
+  {
+    "font_class": "tune",
+    "unicode": "\ue6aa"
+  },
+  {
+    "font_class": "tune-filled",
+    "unicode": "\ue6ca"
+  },
+  {
+    "font_class": "undo",
+    "unicode": "\ue64f"
+  },
+  {
+    "font_class": "undo-filled",
+    "unicode": "\ue64c"
+  },
+  {
+    "font_class": "up",
+    "unicode": "\ue6b6"
+  },
+	{
+	  "font_class": "top",
+	  "unicode": "\ue6b6"
+	},
+  {
+    "font_class": "upload",
+    "unicode": "\ue690"
+  },
+  {
+    "font_class": "upload-filled",
+    "unicode": "\ue68e"
+  },
+  {
+    "font_class": "videocam",
+    "unicode": "\ue68c"
+  },
+  {
+    "font_class": "videocam-filled",
+    "unicode": "\ue689"
+  },
+  {
+    "font_class": "vip",
+    "unicode": "\ue6a8"
+  },
+  {
+    "font_class": "vip-filled",
+    "unicode": "\ue6c6"
+  },
+  {
+    "font_class": "wallet",
+    "unicode": "\ue6b1"
+  },
+  {
+    "font_class": "wallet-filled",
+    "unicode": "\ue6c2"
+  },
+  {
+    "font_class": "weibo",
+    "unicode": "\ue68b"
+  },
+  {
+    "font_class": "weixin",
+    "unicode": "\ue691"
+  }
+] as IconsDataItem[]
+
+// export const fontData = JSON.parse<IconsDataItem>(fontDataJson)
diff --git a/uni_modules/uni-icons/components/uni-icons/uniicons_file_vue.js b/uni_modules/uni-icons/components/uni-icons/uniicons_file_vue.js
new file mode 100644
index 0000000..1cd11e1
--- /dev/null
+++ b/uni_modules/uni-icons/components/uni-icons/uniicons_file_vue.js
@@ -0,0 +1,649 @@
+
+export const fontData = [
+  {
+    "font_class": "arrow-down",
+    "unicode": "\ue6be"
+  },
+  {
+    "font_class": "arrow-left",
+    "unicode": "\ue6bc"
+  },
+  {
+    "font_class": "arrow-right",
+    "unicode": "\ue6bb"
+  },
+  {
+    "font_class": "arrow-up",
+    "unicode": "\ue6bd"
+  },
+  {
+    "font_class": "auth",
+    "unicode": "\ue6ab"
+  },
+  {
+    "font_class": "auth-filled",
+    "unicode": "\ue6cc"
+  },
+  {
+    "font_class": "back",
+    "unicode": "\ue6b9"
+  },
+  {
+    "font_class": "bars",
+    "unicode": "\ue627"
+  },
+  {
+    "font_class": "calendar",
+    "unicode": "\ue6a0"
+  },
+  {
+    "font_class": "calendar-filled",
+    "unicode": "\ue6c0"
+  },
+  {
+    "font_class": "camera",
+    "unicode": "\ue65a"
+  },
+  {
+    "font_class": "camera-filled",
+    "unicode": "\ue658"
+  },
+  {
+    "font_class": "cart",
+    "unicode": "\ue631"
+  },
+  {
+    "font_class": "cart-filled",
+    "unicode": "\ue6d0"
+  },
+  {
+    "font_class": "chat",
+    "unicode": "\ue65d"
+  },
+  {
+    "font_class": "chat-filled",
+    "unicode": "\ue659"
+  },
+  {
+    "font_class": "chatboxes",
+    "unicode": "\ue696"
+  },
+  {
+    "font_class": "chatboxes-filled",
+    "unicode": "\ue692"
+  },
+  {
+    "font_class": "chatbubble",
+    "unicode": "\ue697"
+  },
+  {
+    "font_class": "chatbubble-filled",
+    "unicode": "\ue694"
+  },
+  {
+    "font_class": "checkbox",
+    "unicode": "\ue62b"
+  },
+  {
+    "font_class": "checkbox-filled",
+    "unicode": "\ue62c"
+  },
+  {
+    "font_class": "checkmarkempty",
+    "unicode": "\ue65c"
+  },
+  {
+    "font_class": "circle",
+    "unicode": "\ue65b"
+  },
+  {
+    "font_class": "circle-filled",
+    "unicode": "\ue65e"
+  },
+  {
+    "font_class": "clear",
+    "unicode": "\ue66d"
+  },
+  {
+    "font_class": "close",
+    "unicode": "\ue673"
+  },
+  {
+    "font_class": "closeempty",
+    "unicode": "\ue66c"
+  },
+  {
+    "font_class": "cloud-download",
+    "unicode": "\ue647"
+  },
+  {
+    "font_class": "cloud-download-filled",
+    "unicode": "\ue646"
+  },
+  {
+    "font_class": "cloud-upload",
+    "unicode": "\ue645"
+  },
+  {
+    "font_class": "cloud-upload-filled",
+    "unicode": "\ue648"
+  },
+  {
+    "font_class": "color",
+    "unicode": "\ue6cf"
+  },
+  {
+    "font_class": "color-filled",
+    "unicode": "\ue6c9"
+  },
+  {
+    "font_class": "compose",
+    "unicode": "\ue67f"
+  },
+  {
+    "font_class": "contact",
+    "unicode": "\ue693"
+  },
+  {
+    "font_class": "contact-filled",
+    "unicode": "\ue695"
+  },
+  {
+    "font_class": "down",
+    "unicode": "\ue6b8"
+  },
+	{
+	  "font_class": "bottom",
+	  "unicode": "\ue6b8"
+	},
+  {
+    "font_class": "download",
+    "unicode": "\ue68d"
+  },
+  {
+    "font_class": "download-filled",
+    "unicode": "\ue681"
+  },
+  {
+    "font_class": "email",
+    "unicode": "\ue69e"
+  },
+  {
+    "font_class": "email-filled",
+    "unicode": "\ue69a"
+  },
+  {
+    "font_class": "eye",
+    "unicode": "\ue651"
+  },
+  {
+    "font_class": "eye-filled",
+    "unicode": "\ue66a"
+  },
+  {
+    "font_class": "eye-slash",
+    "unicode": "\ue6b3"
+  },
+  {
+    "font_class": "eye-slash-filled",
+    "unicode": "\ue6b4"
+  },
+  {
+    "font_class": "fire",
+    "unicode": "\ue6a1"
+  },
+  {
+    "font_class": "fire-filled",
+    "unicode": "\ue6c5"
+  },
+  {
+    "font_class": "flag",
+    "unicode": "\ue65f"
+  },
+  {
+    "font_class": "flag-filled",
+    "unicode": "\ue660"
+  },
+  {
+    "font_class": "folder-add",
+    "unicode": "\ue6a9"
+  },
+  {
+    "font_class": "folder-add-filled",
+    "unicode": "\ue6c8"
+  },
+  {
+    "font_class": "font",
+    "unicode": "\ue6a3"
+  },
+  {
+    "font_class": "forward",
+    "unicode": "\ue6ba"
+  },
+  {
+    "font_class": "gear",
+    "unicode": "\ue664"
+  },
+  {
+    "font_class": "gear-filled",
+    "unicode": "\ue661"
+  },
+  {
+    "font_class": "gift",
+    "unicode": "\ue6a4"
+  },
+  {
+    "font_class": "gift-filled",
+    "unicode": "\ue6c4"
+  },
+  {
+    "font_class": "hand-down",
+    "unicode": "\ue63d"
+  },
+  {
+    "font_class": "hand-down-filled",
+    "unicode": "\ue63c"
+  },
+  {
+    "font_class": "hand-up",
+    "unicode": "\ue63f"
+  },
+  {
+    "font_class": "hand-up-filled",
+    "unicode": "\ue63e"
+  },
+  {
+    "font_class": "headphones",
+    "unicode": "\ue630"
+  },
+  {
+    "font_class": "heart",
+    "unicode": "\ue639"
+  },
+  {
+    "font_class": "heart-filled",
+    "unicode": "\ue641"
+  },
+  {
+    "font_class": "help",
+    "unicode": "\ue679"
+  },
+  {
+    "font_class": "help-filled",
+    "unicode": "\ue674"
+  },
+  {
+    "font_class": "home",
+    "unicode": "\ue662"
+  },
+  {
+    "font_class": "home-filled",
+    "unicode": "\ue663"
+  },
+  {
+    "font_class": "image",
+    "unicode": "\ue670"
+  },
+  {
+    "font_class": "image-filled",
+    "unicode": "\ue678"
+  },
+  {
+    "font_class": "images",
+    "unicode": "\ue650"
+  },
+  {
+    "font_class": "images-filled",
+    "unicode": "\ue64b"
+  },
+  {
+    "font_class": "info",
+    "unicode": "\ue669"
+  },
+  {
+    "font_class": "info-filled",
+    "unicode": "\ue649"
+  },
+  {
+    "font_class": "left",
+    "unicode": "\ue6b7"
+  },
+  {
+    "font_class": "link",
+    "unicode": "\ue6a5"
+  },
+  {
+    "font_class": "list",
+    "unicode": "\ue644"
+  },
+  {
+    "font_class": "location",
+    "unicode": "\ue6ae"
+  },
+  {
+    "font_class": "location-filled",
+    "unicode": "\ue6af"
+  },
+  {
+    "font_class": "locked",
+    "unicode": "\ue66b"
+  },
+  {
+    "font_class": "locked-filled",
+    "unicode": "\ue668"
+  },
+  {
+    "font_class": "loop",
+    "unicode": "\ue633"
+  },
+  {
+    "font_class": "mail-open",
+    "unicode": "\ue643"
+  },
+  {
+    "font_class": "mail-open-filled",
+    "unicode": "\ue63a"
+  },
+  {
+    "font_class": "map",
+    "unicode": "\ue667"
+  },
+  {
+    "font_class": "map-filled",
+    "unicode": "\ue666"
+  },
+  {
+    "font_class": "map-pin",
+    "unicode": "\ue6ad"
+  },
+  {
+    "font_class": "map-pin-ellipse",
+    "unicode": "\ue6ac"
+  },
+  {
+    "font_class": "medal",
+    "unicode": "\ue6a2"
+  },
+  {
+    "font_class": "medal-filled",
+    "unicode": "\ue6c3"
+  },
+  {
+    "font_class": "mic",
+    "unicode": "\ue671"
+  },
+  {
+    "font_class": "mic-filled",
+    "unicode": "\ue677"
+  },
+  {
+    "font_class": "micoff",
+    "unicode": "\ue67e"
+  },
+  {
+    "font_class": "micoff-filled",
+    "unicode": "\ue6b0"
+  },
+  {
+    "font_class": "minus",
+    "unicode": "\ue66f"
+  },
+  {
+    "font_class": "minus-filled",
+    "unicode": "\ue67d"
+  },
+  {
+    "font_class": "more",
+    "unicode": "\ue64d"
+  },
+  {
+    "font_class": "more-filled",
+    "unicode": "\ue64e"
+  },
+  {
+    "font_class": "navigate",
+    "unicode": "\ue66e"
+  },
+  {
+    "font_class": "navigate-filled",
+    "unicode": "\ue67a"
+  },
+  {
+    "font_class": "notification",
+    "unicode": "\ue6a6"
+  },
+  {
+    "font_class": "notification-filled",
+    "unicode": "\ue6c1"
+  },
+  {
+    "font_class": "paperclip",
+    "unicode": "\ue652"
+  },
+  {
+    "font_class": "paperplane",
+    "unicode": "\ue672"
+  },
+  {
+    "font_class": "paperplane-filled",
+    "unicode": "\ue675"
+  },
+  {
+    "font_class": "person",
+    "unicode": "\ue699"
+  },
+  {
+    "font_class": "person-filled",
+    "unicode": "\ue69d"
+  },
+  {
+    "font_class": "personadd",
+    "unicode": "\ue69f"
+  },
+  {
+    "font_class": "personadd-filled",
+    "unicode": "\ue698"
+  },
+  {
+    "font_class": "personadd-filled-copy",
+    "unicode": "\ue6d1"
+  },
+  {
+    "font_class": "phone",
+    "unicode": "\ue69c"
+  },
+  {
+    "font_class": "phone-filled",
+    "unicode": "\ue69b"
+  },
+  {
+    "font_class": "plus",
+    "unicode": "\ue676"
+  },
+  {
+    "font_class": "plus-filled",
+    "unicode": "\ue6c7"
+  },
+  {
+    "font_class": "plusempty",
+    "unicode": "\ue67b"
+  },
+  {
+    "font_class": "pulldown",
+    "unicode": "\ue632"
+  },
+  {
+    "font_class": "pyq",
+    "unicode": "\ue682"
+  },
+  {
+    "font_class": "qq",
+    "unicode": "\ue680"
+  },
+  {
+    "font_class": "redo",
+    "unicode": "\ue64a"
+  },
+  {
+    "font_class": "redo-filled",
+    "unicode": "\ue655"
+  },
+  {
+    "font_class": "refresh",
+    "unicode": "\ue657"
+  },
+  {
+    "font_class": "refresh-filled",
+    "unicode": "\ue656"
+  },
+  {
+    "font_class": "refreshempty",
+    "unicode": "\ue6bf"
+  },
+  {
+    "font_class": "reload",
+    "unicode": "\ue6b2"
+  },
+  {
+    "font_class": "right",
+    "unicode": "\ue6b5"
+  },
+  {
+    "font_class": "scan",
+    "unicode": "\ue62a"
+  },
+  {
+    "font_class": "search",
+    "unicode": "\ue654"
+  },
+  {
+    "font_class": "settings",
+    "unicode": "\ue653"
+  },
+  {
+    "font_class": "settings-filled",
+    "unicode": "\ue6ce"
+  },
+  {
+    "font_class": "shop",
+    "unicode": "\ue62f"
+  },
+  {
+    "font_class": "shop-filled",
+    "unicode": "\ue6cd"
+  },
+  {
+    "font_class": "smallcircle",
+    "unicode": "\ue67c"
+  },
+  {
+    "font_class": "smallcircle-filled",
+    "unicode": "\ue665"
+  },
+  {
+    "font_class": "sound",
+    "unicode": "\ue684"
+  },
+  {
+    "font_class": "sound-filled",
+    "unicode": "\ue686"
+  },
+  {
+    "font_class": "spinner-cycle",
+    "unicode": "\ue68a"
+  },
+  {
+    "font_class": "staff",
+    "unicode": "\ue6a7"
+  },
+  {
+    "font_class": "staff-filled",
+    "unicode": "\ue6cb"
+  },
+  {
+    "font_class": "star",
+    "unicode": "\ue688"
+  },
+  {
+    "font_class": "star-filled",
+    "unicode": "\ue68f"
+  },
+  {
+    "font_class": "starhalf",
+    "unicode": "\ue683"
+  },
+  {
+    "font_class": "trash",
+    "unicode": "\ue687"
+  },
+  {
+    "font_class": "trash-filled",
+    "unicode": "\ue685"
+  },
+  {
+    "font_class": "tune",
+    "unicode": "\ue6aa"
+  },
+  {
+    "font_class": "tune-filled",
+    "unicode": "\ue6ca"
+  },
+  {
+    "font_class": "undo",
+    "unicode": "\ue64f"
+  },
+  {
+    "font_class": "undo-filled",
+    "unicode": "\ue64c"
+  },
+  {
+    "font_class": "up",
+    "unicode": "\ue6b6"
+  },
+	{
+	  "font_class": "top",
+	  "unicode": "\ue6b6"
+	},
+  {
+    "font_class": "upload",
+    "unicode": "\ue690"
+  },
+  {
+    "font_class": "upload-filled",
+    "unicode": "\ue68e"
+  },
+  {
+    "font_class": "videocam",
+    "unicode": "\ue68c"
+  },
+  {
+    "font_class": "videocam-filled",
+    "unicode": "\ue689"
+  },
+  {
+    "font_class": "vip",
+    "unicode": "\ue6a8"
+  },
+  {
+    "font_class": "vip-filled",
+    "unicode": "\ue6c6"
+  },
+  {
+    "font_class": "wallet",
+    "unicode": "\ue6b1"
+  },
+  {
+    "font_class": "wallet-filled",
+    "unicode": "\ue6c2"
+  },
+  {
+    "font_class": "weibo",
+    "unicode": "\ue68b"
+  },
+  {
+    "font_class": "weixin",
+    "unicode": "\ue691"
+  }
+]
+
+// export const fontData = JSON.parse<IconsDataItem>(fontDataJson)
diff --git a/uni_modules/uni-icons/package.json b/uni_modules/uni-icons/package.json
new file mode 100644
index 0000000..397be83
--- /dev/null
+++ b/uni_modules/uni-icons/package.json
@@ -0,0 +1,88 @@
+{
+  "id": "uni-icons",
+  "displayName": "uni-icons 图标",
+  "version": "2.0.9",
+  "description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "icon",
+    "图标"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": "^3.2.14"
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y",
+          "app-uvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y",
+					"钉钉": "y",
+					"快手": "y",
+					"飞书": "y",
+					"京东": "y"
+        },
+        "快应用": {
+          "华为": "y",
+          "联盟": "y"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/uni_modules/uni-icons/readme.md b/uni_modules/uni-icons/readme.md
new file mode 100644
index 0000000..86234ba
--- /dev/null
+++ b/uni_modules/uni-icons/readme.md
@@ -0,0 +1,8 @@
+## Icons 图标
+> **组件名：uni-icons**
+> 代码块： `uIcons`
+
+用于展示 icons 图标 。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
diff --git a/uni_modules/uni-indexed-list/changelog.md b/uni_modules/uni-indexed-list/changelog.md
new file mode 100644
index 0000000..08fa71c
--- /dev/null
+++ b/uni_modules/uni-indexed-list/changelog.md
@@ -0,0 +1,17 @@
+## 1.2.1（2021-11-22）
+- 修复 vue3中某些scss变量无法找到的问题
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-indexed-list](https://uniapp.dcloud.io/component/uniui/uni-indexed-list)
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.11（2021-05-12）
+- 新增 组件示例地址
+## 1.0.10（2021-04-21）
+- 优化 添加依赖 uni-icons, 导入后自动下载依赖
+## 1.0.9（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+
+## 1.0.8（2021-02-05）
+- 调整为uni_modules目录规范
+- 新增 支持 PC 端
diff --git a/uni_modules/uni-indexed-list/components/uni-indexed-list/uni-indexed-list-item.vue b/uni_modules/uni-indexed-list/components/uni-indexed-list/uni-indexed-list-item.vue
new file mode 100644
index 0000000..19284bd
--- /dev/null
+++ b/uni_modules/uni-indexed-list/components/uni-indexed-list/uni-indexed-list-item.vue
@@ -0,0 +1,144 @@
+<template>
+	<view>
+		<view v-if="loaded || list.itemIndex < 15" class="uni-indexed-list__title-wrapper">
+			<text v-if="list.items && list.items.length > 0" class="uni-indexed-list__title">{{ list.key }}</text>
+		</view>
+		<view v-if="(loaded || list.itemIndex < 15) && list.items && list.items.length > 0" class="uni-indexed-list__list">
+			<view v-for="(item, index) in list.items" :key="index" class="uni-indexed-list__item" hover-class="uni-indexed-list__item--hover">
+				<view class="uni-indexed-list__item-container" @click="onClick(idx, index)">
+					<view class="uni-indexed-list__item-border" :class="{'uni-indexed-list__item-border--last':index===list.items.length-1}">
+						<view v-if="showSelect" style="margin-right: 20rpx;">
+							<uni-icons :type="item.checked ? 'checkbox-filled' : 'circle'" :color="item.checked ? '#007aff' : '#C0C0C0'" size="24" />
+						</view>
+						<text class="uni-indexed-list__item-content">{{ item.name }}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'UniIndexedList',
+		emits:['itemClick'],
+		props: {
+			loaded: {
+				type: Boolean,
+				default: false
+			},
+			idx: {
+				type: Number,
+				default: 0
+			},
+			list: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			showSelect: {
+				type: Boolean,
+				default: false
+			}
+		},
+		methods: {
+			onClick(idx, index) {
+				this.$emit("itemClick", {
+					idx,
+					index
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uni-indexed-list__list {
+		background-color: $uni-bg-color;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		border-top-style: solid;
+		border-top-width: 1px;
+		border-top-color: #DEDEDE;
+	}
+
+	.uni-indexed-list__item {
+		font-size: 14px;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.uni-indexed-list__item-container {
+		padding-left: 15px;
+		flex: 1;
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		box-sizing: border-box;
+		/* #endif */
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-indexed-list__item-border {
+		flex: 1;
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		box-sizing: border-box;
+		/* #endif */
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		height: 50px;
+		padding: 25px;
+		padding-left: 0;
+		border-bottom-style: solid;
+		border-bottom-width: 1px;
+		border-bottom-color:  #DEDEDE;
+	}
+
+	.uni-indexed-list__item-border--last {
+		border-bottom-width: 0px;
+	}
+
+	.uni-indexed-list__item-content {
+		flex: 1;
+		font-size: 14px;
+		color: #191919;
+	}
+
+	.uni-indexed-list {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-indexed-list__title-wrapper {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		width: 100%;
+		/* #endif */
+		background-color: #f7f7f7;
+	}
+
+	.uni-indexed-list__title {
+		padding: 6px 12px;
+		line-height: 24px;
+		font-size: 16px;
+		font-weight: 500;
+	}
+</style>
diff --git a/uni_modules/uni-indexed-list/components/uni-indexed-list/uni-indexed-list.vue b/uni_modules/uni-indexed-list/components/uni-indexed-list/uni-indexed-list.vue
new file mode 100644
index 0000000..ee3a7ec
--- /dev/null
+++ b/uni_modules/uni-indexed-list/components/uni-indexed-list/uni-indexed-list.vue
@@ -0,0 +1,367 @@
+<template>
+	<view class="uni-indexed-list" ref="list" id="list">
+		<!-- #ifdef APP-NVUE -->
+		<list class="uni-indexed-list__scroll" scrollable="true" show-scrollbar="false">
+			<cell v-for="(list, idx) in lists" :key="idx" :ref="'uni-indexed-list-' + idx">
+				<!-- #endif -->
+				<!-- #ifndef APP-NVUE -->
+				<scroll-view :scroll-into-view="scrollViewId" class="uni-indexed-list__scroll" scroll-y>
+					<view v-for="(list, idx) in lists" :key="idx" :id="'uni-indexed-list-' + idx">
+						<!-- #endif -->
+						<indexed-list-item :list="list" :loaded="loaded" :idx="idx" :showSelect="showSelect"
+							@itemClick="onClick"></indexed-list-item>
+						<!-- #ifndef APP-NVUE -->
+					</view>
+				</scroll-view>
+				<!-- #endif -->
+				<!-- #ifdef APP-NVUE -->
+			</cell>
+		</list>
+		<!-- #endif -->
+		<view class="uni-indexed-list__menu" @touchstart="touchStart" @touchmove.stop.prevent="touchMove"
+			@touchend="touchEnd" @mousedown.stop="mousedown" @mousemove.stop.prevent="mousemove"
+			@mouseleave.stop="mouseleave">
+			<view v-for="(list, key) in lists" :key="key" class="uni-indexed-list__menu-item"
+				:class="touchmoveIndex == key ? 'uni-indexed-list__menu--active' : ''">
+				<text class="uni-indexed-list__menu-text"
+					:class="touchmoveIndex == key ? 'uni-indexed-list__menu-text--active' : ''">{{ list.key }}</text>
+			</view>
+		</view>
+		<view v-if="touchmove" class="uni-indexed-list__alert-wrapper">
+			<text class="uni-indexed-list__alert">{{ lists[touchmoveIndex].key }}</text>
+		</view>
+	</view>
+</template>
+<script>
+	import indexedListItem from './uni-indexed-list-item.vue'
+	// #ifdef APP-NVUE
+	const dom = weex.requireModule('dom');
+	// #endif
+	// #ifdef APP-PLUS
+	function throttle(func, delay) {
+		var prev = Date.now();
+		return function() {
+			var context = this;
+			var args = arguments;
+			var now = Date.now();
+			if (now - prev >= delay) {
+				func.apply(context, args);
+				prev = Date.now();
+			}
+		}
+	}
+
+	function touchMove(e) {
+		let pageY = e.touches[0].pageY
+		let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
+		if (this.touchmoveIndex === index) {
+			return false
+		}
+		let item = this.lists[index]
+		if (item) {
+			// #ifndef APP-NVUE
+			this.scrollViewId = 'uni-indexed-list-' + index
+			this.touchmoveIndex = index
+			// #endif
+			// #ifdef APP-NVUE
+			dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
+				animated: false
+			})
+			this.touchmoveIndex = index
+			// #endif
+		}
+	}
+	const throttleTouchMove = throttle(touchMove, 40)
+	// #endif
+
+	/**
+	 * IndexedList 索引列表
+	 * @description 用于展示索引列表
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=375
+	 * @property {Boolean} showSelect = [true|false] 展示模式
+	 * 	@value true 展示模式
+	 * 	@value false 选择模式
+	 * @property {Object} options 索引列表需要的数据对象
+	 * @event {Function} click 点击列表事件 ，返回当前选择项的事件对象
+	 * @example <uni-indexed-list options="" showSelect="false" @click=""></uni-indexed-list>
+	 */
+	export default {
+		name: 'UniIndexedList',
+		components: {
+			indexedListItem
+		},
+		emits: ['click'],
+		props: {
+			options: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			showSelect: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				lists: [],
+				winHeight: 0,
+				itemHeight: 0,
+				winOffsetY: 0,
+				touchmove: false,
+				touchmoveIndex: -1,
+				scrollViewId: '',
+				touchmovable: true,
+				loaded: false,
+				isPC: false
+			}
+		},
+		watch: {
+			options: {
+				handler: function() {
+					this.setList()
+				},
+				deep: true
+			}
+		},
+		mounted() {
+			// #ifdef H5
+			this.isPC = this.IsPC()
+			// #endif
+			setTimeout(() => {
+				this.setList()
+			}, 50)
+			setTimeout(() => {
+				this.loaded = true
+			}, 300);
+		},
+		methods: {
+			setList() {
+				let index = 0;
+				this.lists = []
+				this.options.forEach((value, index) => {
+					if (value.data.length === 0) {
+						return
+					}
+					let indexBefore = index
+					let items = value.data.map(item => {
+						let obj = {}
+						obj['key'] = value.letter
+						obj['name'] = item
+						obj['itemIndex'] = index
+						index++
+						obj.checked = item.checked ? item.checked : false
+						return obj
+					})
+					this.lists.push({
+						title: value.letter,
+						key: value.letter,
+						items: items,
+						itemIndex: indexBefore
+					})
+				})
+				// #ifndef APP-NVUE
+				uni.createSelectorQuery()
+					.in(this)
+					.select('#list')
+					.boundingClientRect()
+					.exec(ret => {
+						this.winOffsetY = ret[0].top
+						this.winHeight = ret[0].height
+						this.itemHeight = this.winHeight / this.lists.length
+					})
+				// #endif
+				// #ifdef APP-NVUE
+				dom.getComponentRect(this.$refs['list'], (res) => {
+					this.winOffsetY = res.size.top
+					this.winHeight = res.size.height
+					this.itemHeight = this.winHeight / this.lists.length
+				})
+				// #endif
+			},
+			touchStart(e) {
+				this.touchmove = true
+				let pageY = this.isPC ? e.pageY : e.touches[0].pageY
+				let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
+				let item = this.lists[index]
+				if (item) {
+					this.scrollViewId = 'uni-indexed-list-' + index
+					this.touchmoveIndex = index
+					// #ifdef APP-NVUE
+					dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
+						animated: false
+					})
+					// #endif
+				}
+			},
+			touchMove(e) {
+				// #ifndef APP-PLUS
+				let pageY = this.isPC ? e.pageY : e.touches[0].pageY
+				let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
+				if (this.touchmoveIndex === index) {
+					return false
+				}
+				let item = this.lists[index]
+				if (item) {
+					this.scrollViewId = 'uni-indexed-list-' + index
+					this.touchmoveIndex = index
+				}
+				// #endif
+				// #ifdef APP-PLUS
+				throttleTouchMove.call(this, e)
+				// #endif
+			},
+			touchEnd() {
+				this.touchmove = false
+				// this.touchmoveIndex = -1
+			},
+
+			/**
+			 * 兼容 PC @tian
+			 */
+
+			mousedown(e) {
+				if (!this.isPC) return
+				this.touchStart(e)
+			},
+			mousemove(e) {
+				if (!this.isPC) return
+				this.touchMove(e)
+			},
+			mouseleave(e) {
+				if (!this.isPC) return
+				this.touchEnd(e)
+			},
+
+			// #ifdef H5
+			IsPC() {
+				var userAgentInfo = navigator.userAgent;
+				var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
+				var flag = true;
+				for (let v = 0; v < Agents.length - 1; v++) {
+					if (userAgentInfo.indexOf(Agents[v]) > 0) {
+						flag = false;
+						break;
+					}
+				}
+				return flag;
+			},
+			// #endif
+
+
+			onClick(e) {
+				let {
+					idx,
+					index
+				} = e
+				let obj = {}
+				for (let key in this.lists[idx].items[index]) {
+					obj[key] = this.lists[idx].items[index][key]
+				}
+				let select = []
+				if (this.showSelect) {
+					this.lists[idx].items[index].checked = !this.lists[idx].items[index].checked
+					this.lists.forEach((value, idx) => {
+						value.items.forEach((item, index) => {
+							if (item.checked) {
+								let obj = {}
+								for (let key in this.lists[idx].items[index]) {
+									obj[key] = this.lists[idx].items[index][key]
+								}
+								select.push(obj)
+							}
+						})
+					})
+				}
+				this.$emit('click', {
+					item: obj,
+					select: select
+				})
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	.uni-indexed-list {
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-indexed-list__scroll {
+		flex: 1;
+	}
+
+	.uni-indexed-list__menu {
+		width: 24px;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+	}
+
+	.uni-indexed-list__menu-item {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		align-items: center;
+		justify-content: center;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-indexed-list__menu-text {
+		font-size: 12px;
+		text-align: center;
+		color: #aaa;
+	}
+
+	.uni-indexed-list__menu--active {
+		// background-color: rgb(200, 200, 200);
+	}
+
+	.uni-indexed-list__menu--active {}
+
+	.uni-indexed-list__menu-text--active {
+		border-radius: 16px;
+		width: 16px;
+		height: 16px;
+		line-height: 16px;
+		background-color: #007aff;
+		color: #fff;
+	}
+
+	.uni-indexed-list__alert-wrapper {
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.uni-indexed-list__alert {
+		width: 80px;
+		height: 80px;
+		border-radius: 80px;
+		text-align: center;
+		line-height: 80px;
+		font-size: 35px;
+		color: #fff;
+		background-color: rgba(0, 0, 0, 0.5);
+	}
+</style>
diff --git a/uni_modules/uni-indexed-list/package.json b/uni_modules/uni-indexed-list/package.json
new file mode 100644
index 0000000..125c0e7
--- /dev/null
+++ b/uni_modules/uni-indexed-list/package.json
@@ -0,0 +1,89 @@
+{
+  "id": "uni-indexed-list",
+  "displayName": "uni-indexed-list 索引列表",
+  "version": "1.2.1",
+  "description": "索引列表组件，右侧带索引的列表，方便快速定位到具体内容，通常用于城市/机场选择等场景",
+  "keywords": [
+    "uni-ui",
+    "索引列表",
+    "索引",
+    "列表"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+			"uni-icons"
+		],
+    "encrypt": [],
+    "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/uni_modules/uni-indexed-list/readme.md b/uni_modules/uni-indexed-list/readme.md
new file mode 100644
index 0000000..44ad84b
--- /dev/null
+++ b/uni_modules/uni-indexed-list/readme.md
@@ -0,0 +1,11 @@
+
+
+## IndexedList 索引列表
+> **组件名：uni-indexed-list**
+> 代码块： `uIndexedList`
+
+
+用于展示索引列表。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-indexed-list)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
diff --git a/uni_modules/uni-link/changelog.md b/uni_modules/uni-link/changelog.md
new file mode 100644
index 0000000..2cfbf59
--- /dev/null
+++ b/uni_modules/uni-link/changelog.md
@@ -0,0 +1,17 @@
+## 1.0.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-link](https://uniapp.dcloud.io/component/uniui/uni-link)
+## 1.1.7（2021-11-08）
+## 0.0.7（2021-09-03）
+- 修复 在 nvue 下不显示的 bug
+## 0.0.6（2021-07-30）
+- 新增 支持自定义插槽
+## 0.0.5（2021-06-21）
+- 新增 download 属性，H5平台下载文件名
+## 0.0.4（2021-05-12）
+- 新增 组件示例地址
+## 0.0.3（2021-03-09）
+- 新增 href 属性支持 tel:|mailto:
+
+## 0.0.2（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-link/components/uni-link/uni-link.vue b/uni_modules/uni-link/components/uni-link/uni-link.vue
new file mode 100644
index 0000000..27c5468
--- /dev/null
+++ b/uni_modules/uni-link/components/uni-link/uni-link.vue
@@ -0,0 +1,128 @@
+<template>
+	<a v-if="isShowA" class="uni-link" :href="href"
+		:class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}"
+		:style="{color,fontSize:fontSize+'px'}" :download="download">
+		<slot>{{text}}</slot>
+	</a>
+	<!-- #ifndef APP-NVUE -->
+	<text v-else class="uni-link" :class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}"
+		:style="{color,fontSize:fontSize+'px'}" @click="openURL">
+		<slot>{{text}}</slot>
+	</text>
+	<!-- #endif -->
+	<!-- #ifdef APP-NVUE -->
+	<text v-else class="uni-link" :class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}"
+		:style="{color,fontSize:fontSize+'px'}" @click="openURL">
+		{{text}}
+	</text>
+	<!-- #endif -->
+</template>
+
+<script>
+	/**
+	 * Link 外部网页超链接组件
+	 * @description uni-link是一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=1182
+	 * @property {String} href 点击后打开的外部网页url
+	 * @property {String} text 显示的文字
+	 * @property {String} downlaod H5平台下载文件名
+	 * @property {Boolean} showUnderLine 是否显示下划线
+	 * @property {String} copyTips 在小程序端复制链接时显示的提示语
+	 * @property {String} color 链接文字颜色
+	 * @property {String} fontSize 链接文字大小
+	 * @example * <uni-link href="https://ext.dcloud.net.cn" text="https://ext.dcloud.net.cn"></uni-link>
+	 */
+	export default {
+		name: 'uniLink',
+		props: {
+			href: {
+				type: String,
+				default: ''
+			},
+			text: {
+				type: String,
+				default: ''
+			},
+			download: {
+				type: String,
+				default: ''
+			},
+			showUnderLine: {
+				type: [Boolean, String],
+				default: true
+			},
+			copyTips: {
+				type: String,
+				default: '已自动复制网址，请在手机浏览器里粘贴该网址'
+			},
+			color: {
+				type: String,
+				default: '#999999'
+			},
+			fontSize: {
+				type: [Number, String],
+				default: 14
+			}
+		},
+		computed: {
+			isShowA() {
+				// #ifdef H5
+				this._isH5 = true;
+				// #endif
+				if ((this.isMail() || this.isTel()) && this._isH5 === true) {
+					return true;
+				}
+				return false;
+			}
+		},
+		created() {
+			this._isH5 = null;
+		},
+		methods: {
+			isMail() {
+				return this.href.startsWith('mailto:');
+			},
+			isTel() {
+				return this.href.startsWith('tel:');
+			},
+			openURL() {
+				// #ifdef APP-PLUS
+				if (this.isTel()) {
+					this.makePhoneCall(this.href.replace('tel:', ''));
+				} else {
+					plus.runtime.openURL(this.href);
+				}
+				// #endif
+				// #ifdef H5
+				window.open(this.href)
+				// #endif
+				// #ifdef MP
+				uni.setClipboardData({
+					data: this.href
+				});
+				uni.showModal({
+					content: this.copyTips,
+					showCancel: false
+				});
+				// #endif
+			},
+			makePhoneCall(phoneNumber) {
+				uni.makePhoneCall({
+					phoneNumber
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	/* #ifndef APP-NVUE */
+	.uni-link {
+		cursor: pointer;
+	}
+
+	/* #endif */
+	.uni-link--withline {
+		text-decoration: underline;
+	}
+</style>
diff --git a/uni_modules/uni-link/package.json b/uni_modules/uni-link/package.json
new file mode 100644
index 0000000..77b1986
--- /dev/null
+++ b/uni_modules/uni-link/package.json
@@ -0,0 +1,87 @@
+{
+  "id": "uni-link",
+  "displayName": "uni-link 超链接",
+  "version": "1.0.0",
+  "description": "uni-link是一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "link",
+    "超链接",
+    ""
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "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": "y",
+          "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/uni-link/readme.md b/uni_modules/uni-link/readme.md
new file mode 100644
index 0000000..7f09e94
--- /dev/null
+++ b/uni_modules/uni-link/readme.md
@@ -0,0 +1,11 @@
+
+
+## Link 链接
+> **组件名：uni-link**
+> 代码块： `uLink`
+
+
+uni-link是一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-link)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/uni_modules/uni-list/changelog.md b/uni_modules/uni-list/changelog.md
new file mode 100644
index 0000000..8254a18
--- /dev/null
+++ b/uni_modules/uni-list/changelog.md
@@ -0,0 +1,46 @@
+## 1.2.14（2023-04-14）
+- 优化 uni-list-chat 具名插槽`header` 非app端套一层元素，方便使用时通过外层元素定位实现样式修改
+## 1.2.13（2023-03-03）
+- uni-list-chat 新增 支持具名插槽`header`
+## 1.2.12（2023-02-01）
+- 新增 列表图标新增 customPrefix 属性 ，用法 [详见](https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html#icons-props)
+## 1.2.11（2023-01-31）
+- 修复 无反馈效果呈现的bug
+## 1.2.9（2022-11-22）
+- 修复 uni-list-chat 在vue3下跳转报错的bug
+## 1.2.8（2022-11-21）
+- 修复 uni-list-chat avatar属性 值为本地路径时错误的问题
+## 1.2.7（2022-11-21）
+- 修复 uni-list-chat avatar属性 在腾讯云版uniCloud下错误的问题
+## 1.2.6（2022-11-18）
+- 修复 uni-list-chat note属性 支持：“草稿”字样功能 文本少1位的问题
+## 1.2.5（2022-11-15）
+- 修复 uni-list-item 的 customStyle 属性 padding值在 H5端 无效的bug
+## 1.2.4（2022-11-15）
+- 修复 uni-list-item 的 customStyle 属性 padding值在nvue（vue2）下无效的bug
+## 1.2.3（2022-11-14）
+- uni-list-chat 新增 avatar 支持 fileId
+## 1.2.2（2022-11-11）
+- uni-list 新增属性 render-reverse 详情参考：[https://uniapp.dcloud.net.cn/component/list.html](https://uniapp.dcloud.net.cn/component/list.html)
+- uni-list-chat note属性 支持：“草稿”字样 加红显示 详情参考uni-im：[https://ext.dcloud.net.cn/plugin?name=uni-im](https://ext.dcloud.net.cn/plugin?name=uni-im)
+- uni-list-item 新增属性 customStyle 支持设置padding、backgroundColor
+## 1.2.1（2022-03-30）
+- 删除无用文件
+## 1.2.0（2021-11-23）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-list](https://uniapp.dcloud.io/component/uniui/uni-list)
+## 1.1.3（2021-08-30）
+- 修复 在vue3中to属性在发行应用的时候报错的bug
+## 1.1.2（2021-07-30）
+- 优化 vue3下事件警告的问题
+## 1.1.1（2021-07-21）
+- 修复 与其他组件嵌套使用时，点击失效的Bug
+## 1.1.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.17（2021-05-12）
+- 新增 组件示例地址
+## 1.0.16（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+## 1.0.15（2021-02-05）
+- 调整为uni_modules目录规范
+- 修复 uni-list-chat 角标显示不正常的问题
diff --git a/uni_modules/uni-list/components/uni-list-ad/uni-list-ad.vue b/uni_modules/uni-list/components/uni-list-ad/uni-list-ad.vue
new file mode 100644
index 0000000..b9349c2
--- /dev/null
+++ b/uni_modules/uni-list/components/uni-list-ad/uni-list-ad.vue
@@ -0,0 +1,107 @@
+<template>
+	<!-- #ifdef APP-NVUE -->
+	<cell>
+		<!-- #endif -->
+		<view class="uni-list-ad">
+			<view v-if="borderShow" :class="{'uni-list--border':border,'uni-list-item--first':isFirstChild}"></view>
+			<ad style="width: 200px;height: 300px;border-width: 1px;border-color: red;border-style: solid;" adpid="1111111111"
+			 unit-id="" appid="" apid="" type="feed" @error="aderror" @close="closeAd"></ad>
+		</view>
+		<!-- #ifdef APP-NVUE -->
+	</cell>
+	<!-- #endif -->
+
+</template>
+
+<script>
+	// #ifdef APP-NVUE
+	const dom = uni.requireNativePlugin('dom');
+	// #endif
+	export default {
+		name: 'UniListAd',
+		props: {
+			title: {
+				type: String,
+				default: '',
+
+			}
+		},
+		// inject: ['list'],
+		data() {
+			return {
+				isFirstChild: false,
+				border: false,
+				borderShow: true,
+			}
+		},
+
+		mounted() {
+			this.list = this.getForm()
+			if (this.list) {
+				if (!this.list.firstChildAppend) {
+					this.list.firstChildAppend = true
+					this.isFirstChild = true
+				}
+				this.border = this.list.border
+			}
+		},
+		methods: {
+			/**
+			 * 获取父元素实例
+			 */
+			getForm(name = 'uniList') {
+				let parent = this.$parent;
+				let parentName = parent.$options.name;
+				while (parentName !== name) {
+					parent = parent.$parent;
+					if (!parent) return false
+					parentName = parent.$options.name;
+				}
+				return parent;
+			},
+			aderror(e) {
+				console.log("aderror: " + JSON.stringify(e.detail));
+			},
+			closeAd(e) {
+				this.borderShow = false
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	.uni-list-ad {
+		position: relative;
+		border: 1px red solid;
+	}
+
+	.uni-list--border {
+		position: relative;
+		padding-bottom: 1px;
+		/* #ifdef APP-PLUS */
+		border-top-color: $uni-border-color;
+		border-top-style: solid;
+		border-top-width: 0.5px;
+		/* #endif */
+		margin-left: $uni-spacing-row-lg;
+	}
+
+	/* #ifndef APP-NVUE */
+	.uni-list--border:after {
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 0;
+		height: 1px;
+		content: '';
+		-webkit-transform: scaleY(.5);
+		transform: scaleY(.5);
+		background-color: $uni-border-color;
+	}
+
+	.uni-list-item--first:after {
+		height: 0px;
+	}
+
+	/* #endif */
+</style>
diff --git a/uni_modules/uni-list/components/uni-list-chat/uni-list-chat.scss b/uni_modules/uni-list/components/uni-list-chat/uni-list-chat.scss
new file mode 100644
index 0000000..311f8d9
--- /dev/null
+++ b/uni_modules/uni-list/components/uni-list-chat/uni-list-chat.scss
@@ -0,0 +1,58 @@
+/**
+ * 这里是 uni-list 组件内置的常用样式变量
+ * 如果需要覆盖样式，这里提供了基本的组件样式变量，您可以尝试修改这里的变量，去完成样式替换，而不用去修改源码
+ *
+ */
+
+// 背景色
+$background-color : #fff;
+// 分割线颜色
+$divide-line-color : #e5e5e5;
+
+// 默认头像大小，如需要修改此值，注意同步修改 js 中的值 const avatarWidth = xx ，目前只支持方形头像
+// nvue 页面不支持修改头像大小
+$avatar-width : 45px ;
+
+// 头像边框
+$avatar-border-radius: 5px;
+$avatar-border-color: #eee;
+$avatar-border-width: 1px;
+
+// 标题文字样式
+$title-size : 16px;
+$title-color : #3b4144;
+$title-weight : normal;
+
+// 描述文字样式
+$note-size : 12px;
+$note-color : #999;
+$note-weight : normal;
+
+// 右侧额外内容默认样式
+$right-text-size : 12px;
+$right-text-color : #999;
+$right-text-weight : normal;
+
+// 角标样式
+// nvue 页面不支持修改圆点位置以及大小
+// 角标在左侧时，角标的位置，默认为 0 ，负数左/下移动，正数右/上移动
+$badge-left: 0px;
+$badge-top: 0px;
+
+// 显示圆点时，圆点大小
+$dot-width: 10px;
+$dot-height: 10px;
+
+// 显示角标时，角标大小和字体大小
+$badge-size : 18px;
+$badge-font : 12px;
+// 显示角标时，角标前景色
+$badge-color : #fff;
+// 显示角标时，角标背景色
+$badge-background-color : #ff5a5f;
+// 显示角标时，角标左右间距
+$badge-space : 6px;
+
+// 状态样式
+// 选中颜色
+$hover : #f5f5f5;
diff --git a/uni_modules/uni-list/components/uni-list-chat/uni-list-chat.vue b/uni_modules/uni-list/components/uni-list-chat/uni-list-chat.vue
new file mode 100644
index 0000000..d49fd7c
--- /dev/null
+++ b/uni_modules/uni-list/components/uni-list-chat/uni-list-chat.vue
@@ -0,0 +1,593 @@
+<template>
+	<!-- #ifdef APP-NVUE -->
+	<cell>
+		<!-- #endif -->
+		<view :hover-class="!clickable && !link ? '' : 'uni-list-chat--hover'" class="uni-list-chat" @click.stop="onClick">
+			<view :class="{ 'uni-list--border': border, 'uni-list-chat--first': isFirstChild }"></view>
+			<view class="uni-list-chat__container">
+				<view class="uni-list-chat__header-warp">
+					<view v-if="avatarCircle || avatarList.length === 0" class="uni-list-chat__header" :class="{ 'header--circle': avatarCircle }">
+						<image class="uni-list-chat__header-image" :class="{ 'header--circle': avatarCircle }" :src="avatarUrl" mode="aspectFill"></image>
+					</view>
+					<!-- 头像组 -->
+					<view v-else class="uni-list-chat__header">
+						<view v-for="(item, index) in avatarList" :key="index" class="uni-list-chat__header-box" :class="computedAvatar"
+						 :style="{ width: imageWidth + 'px', height: imageWidth + 'px' }">
+							<image class="uni-list-chat__header-image" :style="{ width: imageWidth + 'px', height: imageWidth + 'px' }" :src="item.url"
+							 mode="aspectFill"></image>
+						</view>
+					</view>
+				</view>
+				<!-- #ifndef APP -->
+				<view class="slot-header">
+				<!-- #endif -->
+					<slot name="header"></slot>
+				<!-- #ifndef APP -->
+				</view>
+				<!-- #endif -->
+				<view v-if="badgeText && badgePositon === 'left'" class="uni-list-chat__badge uni-list-chat__badge-pos" :class="[isSingle]">
+					<text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text>
+				</view>
+				<view class="uni-list-chat__content">
+					<view class="uni-list-chat__content-main">
+						<text class="uni-list-chat__content-title uni-ellipsis">{{ title }}</text>
+						<view style="flex-direction: row;">
+							<text class="draft" v-if="isDraft">[草稿]</text>
+							<text class="uni-list-chat__content-note uni-ellipsis">{{isDraft?note.slice(14):note}}</text>
+						</view>
+					</view>
+					<view class="uni-list-chat__content-extra">
+						<slot>
+							<text class="uni-list-chat__content-extra-text">{{ time }}</text>
+							<view v-if="badgeText && badgePositon === 'right'" class="uni-list-chat__badge" :class="[isSingle, badgePositon === 'right' ? 'uni-list-chat--right' : '']">
+								<text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text>
+							</view>
+						</slot>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- #ifdef APP-NVUE -->
+	</cell>
+	<!-- #endif -->
+</template>
+
+<script>
+	// 头像大小
+	const avatarWidth = 45;
+
+	/**
+	 * ListChat 聊天列表
+	 * @description 聊天列表,用于创建聊天类列表
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=24
+	 * @property {String} 	title 							标题
+	 * @property {String} 	note 							描述
+	 * @property {Boolean} 	clickable = [true|false] 		是否开启点击反馈，默认为false
+	 * @property {String} 	badgeText						数字角标内容
+	 * @property {String}  	badgePositon = [left|right]		角标位置，默认为 right
+	 * @property {String} 	link = [false｜navigateTo|redirectTo|reLaunch|switchTab] 是否展示右侧箭头并开启点击反馈，默认为false
+	 *  @value false	 	不开启
+	 *  @value navigateTo 	同 uni.navigateTo()
+	 * 	@value redirectTo 	同 uni.redirectTo()
+	 * 	@value reLaunch   	同 uni.reLaunch()
+	 * 	@value switchTab  	同 uni.switchTab()
+	 * @property {String | PageURIString} 	to  			跳转目标页面
+	 * @property {String} 	time							右侧时间显示
+	 * @property {Boolean} 	avatarCircle = [true|false]		是否显示圆形头像，默认为false
+	 * @property {String} 	avatar							头像地址，avatarCircle 不填时生效
+	 * @property {Array} 	avatarList 						头像组，格式为 [{url:''}]
+	 * @event {Function} 	click 							点击 uniListChat 触发事件
+	 */
+	export default {
+		name: 'UniListChat',
+		emits:['click'],
+		props: {
+			title: {
+				type: String,
+				default: ''
+			},
+			note: {
+				type: String,
+				default: ''
+			},
+			clickable: {
+				type: Boolean,
+				default: false
+			},
+			link: {
+				type: [Boolean, String],
+				default: false
+			},
+			to: {
+				type: String,
+				default: ''
+			},
+			badgeText: {
+				type: [String, Number],
+				default: ''
+			},
+			badgePositon: {
+				type: String,
+				default: 'right'
+			},
+			time: {
+				type: String,
+				default: ''
+			},
+			avatarCircle: {
+				type: Boolean,
+				default: false
+			},
+			avatar: {
+				type: String,
+				default: ''
+			},
+			avatarList: {
+				type: Array,
+				default () {
+					return [];
+				}
+			}
+		},
+		// inject: ['list'],
+		computed: {
+			isDraft(){
+				return this.note.slice(0,14) == '[uni-im-draft]'
+			},
+			isSingle() {
+				if (this.badgeText === 'dot') {
+					return 'uni-badge--dot';
+				} else {
+					const badgeText = this.badgeText.toString();
+					if (badgeText.length > 1) {
+						return 'uni-badge--complex';
+					} else {
+						return 'uni-badge--single';
+					}
+				}
+			},
+			computedAvatar() {
+				if (this.avatarList.length > 4) {
+					this.imageWidth = avatarWidth * 0.31;
+					return 'avatarItem--3';
+				} else if (this.avatarList.length > 1) {
+					this.imageWidth = avatarWidth * 0.47;
+					return 'avatarItem--2';
+				} else {
+					this.imageWidth = avatarWidth;
+					return 'avatarItem--1';
+				}
+			}
+		},
+		watch: {
+			avatar:{
+				handler(avatar) {
+					if(avatar.substr(0,8) == 'cloud://'){
+						uniCloud.getTempFileURL({
+							fileList: [avatar]
+						}).then(res=>{
+							// console.log(res);
+							// 兼容uniCloud私有化部署
+							let fileList = res.fileList || res.result.fileList
+							this.avatarUrl = fileList[0].tempFileURL
+						})
+					}else{
+						this.avatarUrl = avatar
+					}
+				},
+				immediate: true
+			}
+		},
+		data() {
+			return {
+				isFirstChild: false,
+				border: true,
+				// avatarList: 3,
+				imageWidth: 50,
+				avatarUrl:''
+			};
+		},
+		mounted() {
+			this.list = this.getForm()
+			if (this.list) {
+				if (!this.list.firstChildAppend) {
+					this.list.firstChildAppend = true;
+					this.isFirstChild = true;
+				}
+				this.border = this.list.border;
+			}
+		},
+		methods: {
+			/**
+			 * 获取父元素实例
+			 */
+			getForm(name = 'uniList') {
+				let parent = this.$parent;
+				let parentName = parent.$options.name;
+				while (parentName !== name) {
+					parent = parent.$parent;
+					if (!parent) return false
+					parentName = parent.$options.name;
+				}
+				return parent;
+			},
+			onClick() {
+				if (this.to !== '') {
+					this.openPage();
+					return;
+				}
+
+				if (this.clickable || this.link) {
+					this.$emit('click', {
+						data: {}
+					});
+				}
+			},
+			openPage() {
+				if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) {
+					this.pageApi(this.link);
+				} else {
+					this.pageApi('navigateTo');
+				}
+			},
+			pageApi(api) {
+				let callback = {
+					url: this.to,
+					success: res => {
+						this.$emit('click', {
+							data: res
+						});
+					},
+					fail: err => {
+						this.$emit('click', {
+							data: err
+						});
+					}
+				}
+				switch (api) {
+					case 'navigateTo':
+						uni.navigateTo(callback)
+						break
+					case 'redirectTo':
+						uni.redirectTo(callback)
+						break
+					case 'reLaunch':
+						uni.reLaunch(callback)
+						break
+					case 'switchTab':
+						uni.switchTab(callback)
+						break
+					default:
+					uni.navigateTo(callback)
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss" >
+	$uni-font-size-lg:16px;
+	$uni-spacing-row-sm: 5px;
+	$uni-spacing-row-base: 10px;
+	$uni-spacing-row-lg: 15px;
+	$background-color: #fff;
+	$divide-line-color: #e5e5e5;
+	$avatar-width: 45px;
+	$avatar-border-radius: 5px;
+	$avatar-border-color: #eee;
+	$avatar-border-width: 1px;
+	$title-size: 16px;
+	$title-color: #3b4144;
+	$title-weight: normal;
+	$note-size: 12px;
+	$note-color: #999;
+	$note-weight: normal;
+	$right-text-size: 12px;
+	$right-text-color: #999;
+	$right-text-weight: normal;
+	$badge-left: 0px;
+	$badge-top: 0px;
+	$dot-width: 10px;
+	$dot-height: 10px;
+	$badge-size: 18px;
+	$badge-font: 12px;
+	$badge-color: #fff;
+	$badge-background-color: #ff5a5f;
+	$badge-space: 6px;
+	$hover: #f5f5f5;
+
+	.uni-list-chat {
+		font-size: $uni-font-size-lg;
+		position: relative;
+		flex-direction: column;
+		justify-content: space-between;
+		background-color: $background-color;
+	}
+
+	// .uni-list-chat--disabled {
+	// 	opacity: 0.3;
+	// }
+
+	.uni-list-chat--hover {
+		background-color: $hover;
+	}
+
+	.uni-list--border {
+		position: relative;
+		margin-left: $uni-spacing-row-lg;
+		/* #ifdef APP-PLUS */
+		border-top-color: $divide-line-color;
+		border-top-style: solid;
+		border-top-width: 0.5px;
+		/* #endif */
+	}
+
+	/* #ifndef APP-NVUE */
+	.uni-list--border:after {
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 0;
+		height: 1px;
+		content: '';
+		-webkit-transform: scaleY(0.5);
+		transform: scaleY(0.5);
+		background-color: $divide-line-color;
+	}
+
+	.uni-list-item--first:after {
+		height: 0px;
+	}
+
+	/* #endif */
+
+	.uni-list-chat--first {
+		border-top-width: 0px;
+	}
+
+	.uni-ellipsis {
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		lines: 1;
+		/* #endif */
+	}
+
+	.uni-ellipsis-2 {
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		/* #endif */
+
+		/* #ifdef APP-NVUE */
+		lines: 2;
+		/* #endif */
+	}
+
+	.uni-list-chat__container {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		flex: 1;
+		padding: $uni-spacing-row-base $uni-spacing-row-lg;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.uni-list-chat__header-warp {
+		position: relative;
+	}
+
+	.uni-list-chat__header {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		align-content: center;
+		/* #endif */
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		flex-wrap: wrap-reverse;
+		/* #ifdef APP-NVUE */
+		width: 50px;
+		height: 50px;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		width: $avatar-width;
+		height: $avatar-width;
+		/* #endif */
+
+		border-radius: $avatar-border-radius;
+		border-color: $avatar-border-color;
+		border-width: $avatar-border-width;
+		border-style: solid;
+		overflow: hidden;
+	}
+
+	.uni-list-chat__header-box {
+		/* #ifndef APP-PLUS */
+		box-sizing: border-box;
+		display: flex;
+		width: $avatar-width;
+		height: $avatar-width;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		width: 50px;
+		height: 50px;
+		/* #endif */
+		overflow: hidden;
+		border-radius: 2px;
+	}
+
+	.uni-list-chat__header-image {
+		margin: 1px;
+		/* #ifdef APP-NVUE */
+		width: 50px;
+		height: 50px;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		width: $avatar-width;
+		height: $avatar-width;
+		/* #endif */
+	}
+
+	/* #ifndef APP-NVUE */
+	.uni-list-chat__header-image {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+
+	.avatarItem--1 {
+		width: 100%;
+		height: 100%;
+	}
+
+	.avatarItem--2 {
+		width: 47%;
+		height: 47%;
+	}
+
+	.avatarItem--3 {
+		width: 32%;
+		height: 32%;
+	}
+
+	/* #endif */
+	.header--circle {
+		border-radius: 50%;
+	}
+
+	.uni-list-chat__content {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		flex: 1;
+		overflow: hidden;
+		padding: 2px 0;
+	}
+
+	.uni-list-chat__content-main {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: space-between;
+		padding-left: $uni-spacing-row-base;
+		flex: 1;
+		overflow: hidden;
+	}
+
+	.uni-list-chat__content-title {
+		font-size: $title-size;
+		color: $title-color;
+		font-weight: $title-weight;
+		overflow: hidden;
+	}
+
+	.draft ,.uni-list-chat__content-note {
+		margin-top: 3px;
+		color: $note-color;
+		font-size: $note-size;
+		font-weight: $title-weight;
+		overflow: hidden;
+	}
+	.draft{
+		color: #eb3a41;
+		/* #ifndef APP-NVUE */
+		flex-shrink: 0;
+		/* #endif */
+		padding-right: 3px;
+	}
+
+	.uni-list-chat__content-extra {
+		/* #ifndef APP-NVUE */
+		flex-shrink: 0;
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: space-between;
+		align-items: flex-end;
+		margin-left: 5px;
+	}
+
+	.uni-list-chat__content-extra-text {
+		color: $right-text-color;
+		font-size: $right-text-size;
+		font-weight: $right-text-weight;
+		overflow: hidden;
+	}
+
+	.uni-list-chat__badge-pos {
+		position: absolute;
+		/* #ifdef APP-NVUE */
+		left: 55px;
+		top: 3px;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		left: calc(#{$avatar-width} + 10px - #{$badge-space} + #{$badge-left});
+		top: calc(#{$uni-spacing-row-base}/ 2 + 1px + #{$badge-top});
+		/* #endif */
+	}
+
+	.uni-list-chat__badge {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center;
+		border-radius: 100px;
+		background-color: $badge-background-color;
+	}
+
+	.uni-list-chat__badge-text {
+		color: $badge-color;
+		font-size: $badge-font;
+	}
+
+	.uni-badge--single {
+		/* #ifndef APP-NVUE */
+		// left: calc(#{$avatar-width} + 7px + #{$badge-left});
+		/* #endif */
+		width: $badge-size;
+		height: $badge-size;
+	}
+
+	.uni-badge--complex {
+		/* #ifdef APP-NVUE */
+		left: 50px;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		width: auto;
+		/* #endif */
+		height: $badge-size;
+		padding: 0 $badge-space;
+	}
+
+	.uni-badge--dot {
+		/* #ifdef APP-NVUE */
+		left: 60px;
+		top: 6px;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		left: calc(#{$avatar-width} + 15px - #{$dot-width}/ 2 + 1px + #{$badge-left});
+		/* #endif */
+		width: $dot-width;
+		height: $dot-height;
+		padding: 0;
+	}
+
+	.uni-list-chat--right {
+		/* #ifdef APP-NVUE */
+		left: 0;
+		/* #endif */
+	}
+</style>
diff --git a/uni_modules/uni-list/components/uni-list-item/uni-list-item.vue b/uni_modules/uni-list/components/uni-list-item/uni-list-item.vue
new file mode 100644
index 0000000..a274ac8
--- /dev/null
+++ b/uni_modules/uni-list/components/uni-list-item/uni-list-item.vue
@@ -0,0 +1,534 @@
+<template>
+	<!-- #ifdef APP-NVUE -->
+	<cell :keep-scroll-position="keepScrollPosition">
+		<!-- #endif -->
+		<view :class="{ 'uni-list-item--disabled': disabled }" :style="{'background-color':customStyle.backgroundColor}"
+			:hover-class="(!clickable && !link) || disabled || showSwitch ? '' : 'uni-list-item--hover'"
+			class="uni-list-item" @click="onClick">
+			<view v-if="!isFirstChild" class="border--left" :class="{ 'uni-list--border': border }"></view>
+			<view class="uni-list-item__container"
+				:class="{ 'container--right': showArrow || link, 'flex--direction': direction === 'column'}"
+				:style="{paddingTop:padding.top,paddingLeft:padding.left,paddingRight:padding.right,paddingBottom:padding.bottom}">
+				<slot name="header">
+					<view class="uni-list-item__header">
+						<view v-if="thumb" class="uni-list-item__icon">
+							<image :src="thumb" class="uni-list-item__icon-img" :class="['uni-list--' + thumbSize]" />
+						</view>
+						<view v-else-if="showExtraIcon" class="uni-list-item__icon">
+							<uni-icons :customPrefix="extraIcon.customPrefix" :color="extraIcon.color" :size="extraIcon.size" :type="extraIcon.type" />
+						</view>
+					</view>
+				</slot>
+				<slot name="body">
+					<view class="uni-list-item__content"
+						:class="{ 'uni-list-item__content--center': thumb || showExtraIcon || showBadge || showSwitch }">
+						<text v-if="title" class="uni-list-item__content-title"
+							:class="[ellipsis !== 0 && ellipsis <= 2 ? 'uni-ellipsis-' + ellipsis : '']">{{ title }}</text>
+						<text v-if="note" class="uni-list-item__content-note">{{ note }}</text>
+					</view>
+				</slot>
+				<slot name="footer">
+					<view v-if="rightText || showBadge || showSwitch" class="uni-list-item__extra"
+						:class="{ 'flex--justify': direction === 'column' }">
+						<text v-if="rightText" class="uni-list-item__extra-text">{{ rightText }}</text>
+						<uni-badge v-if="showBadge" :type="badgeType" :text="badgeText" :custom-style="badgeStyle" />
+						<switch v-if="showSwitch" :disabled="disabled" :checked="switchChecked"
+							@change="onSwitchChange" />
+					</view>
+				</slot>
+			</view>
+			<uni-icons v-if="showArrow || link" :size="16" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
+		</view>
+		<!-- #ifdef APP-NVUE -->
+	</cell>
+	<!-- #endif -->
+</template>
+
+<script>
+	/**
+	 * ListItem 列表子组件
+	 * @description 列表子组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=24
+	 * @property {String} 	title 							标题
+	 * @property {String} 	note 							描述
+	 * @property {String} 	thumb 							左侧缩略图，若thumb有值，则不会显示扩展图标
+	 * @property {String}  	thumbSize = [lg|base|sm]		略缩图大小
+	 * 	@value 	 lg			大图
+	 * 	@value 	 base		一般
+	 * 	@value 	 sm			小图
+	 * @property {String} 	badgeText						数字角标内容
+	 * @property {String} 	badgeType 						数字角标类型，参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21)
+	 * @property {Object}   badgeStyle           数字角标样式
+	 * @property {String} 	rightText 						右侧文字内容
+	 * @property {Boolean} 	disabled = [true|false]			是否禁用
+	 * @property {Boolean} 	clickable = [true|false] 		是否开启点击反馈
+	 * @property {String} 	link = [navigateTo|redirectTo|reLaunch|switchTab] 是否展示右侧箭头并开启点击反馈
+	 *  @value 	navigateTo 	同 uni.navigateTo()
+	 * 	@value redirectTo 	同 uni.redirectTo()
+	 * 	@value reLaunch   	同 uni.reLaunch()
+	 * 	@value switchTab  	同 uni.switchTab()
+	 * @property {String | PageURIString} 	to  			跳转目标页面
+	 * @property {Boolean} 	showBadge = [true|false] 		是否显示数字角标
+	 * @property {Boolean} 	showSwitch = [true|false] 		是否显示Switch
+	 * @property {Boolean} 	switchChecked = [true|false] 	Switch是否被选中
+	 * @property {Boolean} 	showExtraIcon = [true|false] 	左侧是否显示扩展图标
+	 * @property {Object} 	extraIcon 						扩展图标参数，格式为 {color: '#4cd964',size: '22',type: 'spinner'}
+	 * @property {String} 	direction = [row|column]		排版方向
+	 * @value row 			水平排列
+	 * @value column 		垂直排列
+	 * @event {Function} 	click 							点击 uniListItem 触发事件
+	 * @event {Function} 	switchChange 					点击切换 Switch 时触发
+	 */
+	export default {
+		name: 'UniListItem',
+		emits: ['click', 'switchChange'],
+		props: {
+			direction: {
+				type: String,
+				default: 'row'
+			},
+			title: {
+				type: String,
+				default: ''
+			},
+			note: {
+				type: String,
+				default: ''
+			},
+			ellipsis: {
+				type: [Number, String],
+				default: 0
+			},
+			disabled: {
+				type: [Boolean, String],
+				default: false
+			},
+			clickable: {
+				type: Boolean,
+				default: false
+			},
+			showArrow: {
+				type: [Boolean, String],
+				default: false
+			},
+			link: {
+				type: [Boolean, String],
+				default: false
+			},
+			to: {
+				type: String,
+				default: ''
+			},
+			showBadge: {
+				type: [Boolean, String],
+				default: false
+			},
+			showSwitch: {
+				type: [Boolean, String],
+				default: false
+			},
+			switchChecked: {
+				type: [Boolean, String],
+				default: false
+			},
+			badgeText: {
+				type: String,
+				default: ''
+			},
+			badgeType: {
+				type: String,
+				default: 'success'
+			},
+			badgeStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			rightText: {
+				type: String,
+				default: ''
+			},
+			thumb: {
+				type: String,
+				default: ''
+			},
+			thumbSize: {
+				type: String,
+				default: 'base'
+			},
+			showExtraIcon: {
+				type: [Boolean, String],
+				default: false
+			},
+			extraIcon: {
+				type: Object,
+				default () {
+					return {
+						type: '',
+						color: '#000000',
+						size: 20,
+						customPrefix: ''
+					};
+				}
+			},
+			border: {
+				type: Boolean,
+				default: true
+			},
+			customStyle: {
+				type: Object,
+				default () {
+					return {
+						padding: '',
+						backgroundColor: '#FFFFFF'
+					}
+				}
+			},
+			keepScrollPosition: {
+				type: Boolean,
+				default: false
+			}
+		},
+		watch: {
+			'customStyle.padding': {
+				handler(padding) {
+					if(typeof padding == 'number'){
+						padding += ''
+					}
+					let paddingArr = padding.split(' ')
+					if (paddingArr.length === 1) {
+						const allPadding = paddingArr[0]
+						this.padding = {
+							"top": allPadding,
+							"right": allPadding,
+							"bottom": allPadding,
+							"left": allPadding
+						}
+					} else if (paddingArr.length === 2) {
+						const [verticalPadding, horizontalPadding] = paddingArr;
+						this.padding = {
+							"top": verticalPadding,
+							"right": horizontalPadding,
+							"bottom": verticalPadding,
+							"left": horizontalPadding
+						}
+					} else if (paddingArr.length === 4) {
+							const [topPadding, rightPadding, bottomPadding, leftPadding] = paddingArr;
+							this.padding = {
+								"top": topPadding,
+								"right": rightPadding,
+								"bottom": bottomPadding,
+								"left": leftPadding
+							}
+					}
+				},
+				immediate: true
+			}
+		},
+		// inject: ['list'],
+		data() {
+			return {
+				isFirstChild: false,
+				padding: {
+					top: "",
+					right: "",
+					bottom: "",
+					left: ""
+				}
+			};
+		},
+		mounted() {
+			this.list = this.getForm()
+			// 判断是否存在 uni-list 组件
+			if (this.list) {
+				if (!this.list.firstChildAppend) {
+					this.list.firstChildAppend = true;
+					this.isFirstChild = true;
+				}
+			}
+		},
+		methods: {
+			/**
+			 * 获取父元素实例
+			 */
+			getForm(name = 'uniList') {
+				let parent = this.$parent;
+				let parentName = parent.$options.name;
+				while (parentName !== name) {
+					parent = parent.$parent;
+					if (!parent) return false
+					parentName = parent.$options.name;
+				}
+				return parent;
+			},
+			onClick() {
+				if (this.to !== '') {
+					this.openPage();
+					return;
+				}
+				if (this.clickable || this.link) {
+					this.$emit('click', {
+						data: {}
+					});
+				}
+			},
+			onSwitchChange(e) {
+				this.$emit('switchChange', e.detail);
+			},
+			openPage() {
+				if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) {
+					this.pageApi(this.link);
+				} else {
+					this.pageApi('navigateTo');
+				}
+			},
+			pageApi(api) {
+				let callback = {
+					url: this.to,
+					success: res => {
+						this.$emit('click', {
+							data: res
+						});
+					},
+					fail: err => {
+						this.$emit('click', {
+							data: err
+						});
+					}
+				}
+				switch (api) {
+					case 'navigateTo':
+						uni.navigateTo(callback)
+						break
+					case 'redirectTo':
+						uni.redirectTo(callback)
+						break
+					case 'reLaunch':
+						uni.reLaunch(callback)
+						break
+					case 'switchTab':
+						uni.switchTab(callback)
+						break
+					default:
+						uni.navigateTo(callback)
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	$uni-font-size-sm:12px;
+	$uni-font-size-base:14px;
+	$uni-font-size-lg:16px;
+	$uni-spacing-col-lg: 12px;
+	$uni-spacing-row-lg: 15px;
+	$uni-img-size-sm:20px;
+	$uni-img-size-base:26px;
+	$uni-img-size-lg:40px;
+	$uni-border-color:#e5e5e5;
+	$uni-bg-color-hover:#f1f1f1;
+	$uni-text-color-grey:#999;
+	$list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg;
+
+	.uni-list-item {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		font-size: $uni-font-size-lg;
+		position: relative;
+		justify-content: space-between;
+		align-items: center;
+		background-color: #fff;
+		flex-direction: row;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-list-item--disabled {
+		opacity: 0.3;
+	}
+
+	.uni-list-item--hover {
+		background-color: $uni-bg-color-hover !important;
+	}
+
+	.uni-list-item__container {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		padding: $list-item-pd;
+		padding-left: $uni-spacing-row-lg;
+		flex: 1;
+		overflow: hidden;
+		// align-items: center;
+	}
+
+	.container--right {
+		padding-right: 0;
+	}
+
+	// .border--left {
+	// 	margin-left: $uni-spacing-row-lg;
+	// }
+	.uni-list--border {
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 0;
+		/* #ifdef APP-NVUE */
+		border-top-color: $uni-border-color;
+		border-top-style: solid;
+		border-top-width: 0.5px;
+		/* #endif */
+	}
+
+	/* #ifndef APP-NVUE */
+	.uni-list--border:after {
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 0;
+		height: 1px;
+		content: '';
+		-webkit-transform: scaleY(0.5);
+		transform: scaleY(0.5);
+		background-color: $uni-border-color;
+	}
+
+	/* #endif */
+	.uni-list-item__content {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		padding-right: 8px;
+		flex: 1;
+		color: #3b4144;
+		// overflow: hidden;
+		flex-direction: column;
+		justify-content: space-between;
+		overflow: hidden;
+	}
+
+	.uni-list-item__content--center {
+		justify-content: center;
+	}
+
+	.uni-list-item__content-title {
+		font-size: $uni-font-size-base;
+		color: #3b4144;
+		overflow: hidden;
+	}
+
+	.uni-list-item__content-note {
+		margin-top: 6rpx;
+		color: $uni-text-color-grey;
+		font-size: $uni-font-size-sm;
+		overflow: hidden;
+	}
+
+	.uni-list-item__extra {
+		// width: 25%;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: flex-end;
+		align-items: center;
+	}
+
+	.uni-list-item__header {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.uni-list-item__icon {
+		margin-right: 18rpx;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.uni-list-item__icon-img {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		height: $uni-img-size-base;
+		width: $uni-img-size-base;
+		margin-right: 10px;
+	}
+
+	.uni-icon-wrapper {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		align-items: center;
+		padding: 0 10px;
+	}
+
+	.flex--direction {
+		flex-direction: column;
+		/* #ifndef APP-NVUE */
+		align-items: initial;
+		/* #endif */
+	}
+
+	.flex--justify {
+		/* #ifndef APP-NVUE */
+		justify-content: initial;
+		/* #endif */
+	}
+
+	.uni-list--lg {
+		height: $uni-img-size-lg;
+		width: $uni-img-size-lg;
+	}
+
+	.uni-list--base {
+		height: $uni-img-size-base;
+		width: $uni-img-size-base;
+	}
+
+	.uni-list--sm {
+		height: $uni-img-size-sm;
+		width: $uni-img-size-sm;
+	}
+
+	.uni-list-item__extra-text {
+		color: $uni-text-color-grey;
+		font-size: $uni-font-size-sm;
+	}
+
+	.uni-ellipsis-1 {
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		lines: 1;
+		text-overflow: ellipsis;
+		/* #endif */
+	}
+
+	.uni-ellipsis-2 {
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		lines: 2;
+		text-overflow: ellipsis;
+		/* #endif */
+	}
+</style>
\ No newline at end of file
diff --git a/uni_modules/uni-list/components/uni-list/uni-list.vue b/uni_modules/uni-list/components/uni-list/uni-list.vue
new file mode 100644
index 0000000..6ef5972
--- /dev/null
+++ b/uni_modules/uni-list/components/uni-list/uni-list.vue
@@ -0,0 +1,123 @@
+<template>
+	<!-- #ifndef APP-NVUE -->
+	<view class="uni-list uni-border-top-bottom">
+		<view v-if="border" class="uni-list--border-top"></view>
+		<slot />
+		<view v-if="border" class="uni-list--border-bottom"></view>
+	</view>
+	<!-- #endif -->
+	<!-- #ifdef APP-NVUE -->
+	<list :bounce="false" :scrollable="true" show-scrollbar :render-reverse="renderReverse" @scroll="scroll" class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop"
+		loadmoreoffset="15">
+		<slot />
+	</list>
+	<!-- #endif -->
+</template>
+
+<script>
+	/**
+	 * List 列表
+	 * @description 列表组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=24
+	 * @property {String} 	border = [true|false] 		标题
+	 */
+	export default {
+		name: 'uniList',
+		'mp-weixin': {
+			options: {
+				multipleSlots: false
+			}
+		},
+		props: {
+			stackFromEnd:{
+				type: Boolean,
+				default:false
+			},
+			enableBackToTop: {
+				type: [Boolean, String],
+				default: false
+			},
+			scrollY: {
+				type: [Boolean, String],
+				default: false
+			},
+			border: {
+				type: Boolean,
+				default: true
+			},
+			renderReverse:{
+				type: Boolean,
+				default: false
+			}
+		},
+		// provide() {
+		// 	return {
+		// 		list: this
+		// 	};
+		// },
+		created() {
+			this.firstChildAppend = false;
+		},
+		methods: {
+			loadMore(e) {
+				this.$emit('scrolltolower');
+			},
+			scroll(e) {
+				this.$emit('scroll', e);
+			}
+		}
+	};
+</script>
+<style lang="scss">
+	$uni-bg-color:#ffffff;
+	$uni-border-color:#e5e5e5;
+
+	.uni-list {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		background-color: $uni-bg-color;
+		position: relative;
+		flex-direction: column;
+	}
+
+	.uni-list--border {
+		position: relative;
+		/* #ifdef APP-NVUE */
+		border-top-color: $uni-border-color;
+		border-top-style: solid;
+		border-top-width: 0.5px;
+		border-bottom-color: $uni-border-color;
+		border-bottom-style: solid;
+		border-bottom-width: 0.5px;
+		/* #endif */
+		z-index: -1;
+	}
+
+	/* #ifndef APP-NVUE */
+
+	.uni-list--border-top {
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 0;
+		height: 1px;
+		-webkit-transform: scaleY(0.5);
+		transform: scaleY(0.5);
+		background-color: $uni-border-color;
+		z-index: 1;
+	}
+
+	.uni-list--border-bottom {
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		height: 1px;
+		-webkit-transform: scaleY(0.5);
+		transform: scaleY(0.5);
+		background-color: $uni-border-color;
+	}
+
+	/* #endif */
+</style>
diff --git a/uni_modules/uni-list/components/uni-list/uni-refresh.vue b/uni_modules/uni-list/components/uni-list/uni-refresh.vue
new file mode 100644
index 0000000..3b4c5a2
--- /dev/null
+++ b/uni_modules/uni-list/components/uni-list/uni-refresh.vue
@@ -0,0 +1,65 @@
+<template>
+    <!-- #ifdef APP-NVUE -->
+    <refresh :display="display" @refresh="onrefresh" @pullingdown="onpullingdown">
+        <slot />
+    </refresh>
+    <!-- #endif -->
+    <!-- #ifndef APP-NVUE -->
+    <view ref="uni-refresh" class="uni-refresh" v-show="isShow">
+        <slot />
+    </view>
+    <!-- #endif -->
+</template>
+
+<script>
+    export default {
+        name: 'UniRefresh',
+        props: {
+            display: {
+                type: [String],
+                default: "hide"
+            }
+        },
+        data() {
+            return {
+                pulling: false
+            }
+        },
+        computed: {
+            isShow() {
+                if (this.display === "show" || this.pulling === true) {
+                    return true;
+                }
+                return false;
+            }
+        },
+        created() {},
+        methods: {
+            onchange(value) {
+                this.pulling = value;
+            },
+            onrefresh(e) {
+                this.$emit("refresh", e);
+            },
+            onpullingdown(e) {
+                // #ifdef APP-NVUE
+                this.$emit("pullingdown", e);
+                // #endif
+                // #ifndef APP-NVUE
+                var detail = {
+                    viewHeight: 90,
+                    pullingDistance: e.height
+                }
+                this.$emit("pullingdown", detail);
+                // #endif
+            }
+        }
+    }
+</script>
+
+<style>
+    .uni-refresh {
+        height: 0;
+        overflow: hidden;
+    }
+</style>
diff --git a/uni_modules/uni-list/components/uni-list/uni-refresh.wxs b/uni_modules/uni-list/components/uni-list/uni-refresh.wxs
new file mode 100644
index 0000000..818a6b7
--- /dev/null
+++ b/uni_modules/uni-list/components/uni-list/uni-refresh.wxs
@@ -0,0 +1,87 @@
+var pullDown = {
+    threshold: 95,
+    maxHeight: 200,
+    callRefresh: 'onrefresh',
+    callPullingDown: 'onpullingdown',
+    refreshSelector: '.uni-refresh'
+};
+
+function ready(newValue, oldValue, ownerInstance, instance) {
+    var state = instance.getState()
+    state.canPullDown = newValue;
+    // console.log(newValue);
+}
+
+function touchStart(e, instance) {
+    var state = instance.getState();
+    state.refreshInstance = instance.selectComponent(pullDown.refreshSelector);
+    state.canPullDown = (state.refreshInstance != null && state.refreshInstance != undefined);
+    if (!state.canPullDown) {
+        return
+    }
+
+    // console.log("touchStart");
+
+    state.height = 0;
+    state.touchStartY = e.touches[0].pageY || e.changedTouches[0].pageY;
+    state.refreshInstance.setStyle({
+        'height': 0
+    });
+    state.refreshInstance.callMethod("onchange", true);
+}
+
+function touchMove(e, ownerInstance) {
+    var instance = e.instance;
+    var state = instance.getState();
+    if (!state.canPullDown) {
+        return
+    }
+
+    var oldHeight = state.height;
+    var endY = e.touches[0].pageY || e.changedTouches[0].pageY;
+    var height = endY - state.touchStartY;
+    if (height > pullDown.maxHeight) {
+        return;
+    }
+
+    var refreshInstance = state.refreshInstance;
+    refreshInstance.setStyle({
+        'height': height + 'px'
+    });
+
+    height = height < pullDown.maxHeight ? height : pullDown.maxHeight;
+    state.height = height;
+    refreshInstance.callMethod(pullDown.callPullingDown, {
+        height: height
+    });
+}
+
+function touchEnd(e, ownerInstance) {
+    var state = e.instance.getState();
+    if (!state.canPullDown) {
+        return
+    }
+
+    state.refreshInstance.callMethod("onchange", false);
+
+    var refreshInstance = state.refreshInstance;
+    if (state.height > pullDown.threshold) {
+        refreshInstance.callMethod(pullDown.callRefresh);
+        return;
+    }
+
+    refreshInstance.setStyle({
+        'height': 0
+    });
+}
+
+function propObserver(newValue, oldValue, instance) {
+    pullDown = newValue;
+}
+
+module.exports = {
+    touchmove: touchMove,
+    touchstart: touchStart,
+    touchend: touchEnd,
+    propObserver: propObserver
+}
diff --git a/uni_modules/uni-list/package.json b/uni_modules/uni-list/package.json
new file mode 100644
index 0000000..8350efc
--- /dev/null
+++ b/uni_modules/uni-list/package.json
@@ -0,0 +1,88 @@
+{
+  "id": "uni-list",
+  "displayName": "uni-list 列表",
+  "version": "1.2.14",
+  "description": "List 组件 ，帮助使用者快速构建列表。",
+  "keywords": [
+    "",
+    "uni-ui",
+    "uniui",
+    "列表",
+    "",
+    "list"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": [
+      "uni-badge",
+      "uni-icons"
+    ],
+    "encrypt": [],
+    "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-list/readme.md b/uni_modules/uni-list/readme.md
new file mode 100644
index 0000000..32c2865
--- /dev/null
+++ b/uni_modules/uni-list/readme.md
@@ -0,0 +1,346 @@
+## List 列表
+> **组件名：uni-list**
+> 代码块： `uList`、`uListItem`
+> 关联组件：`uni-list-item`、`uni-badge`、`uni-icons`、`uni-list-chat`、`uni-list-ad`
+
+
+List 列表组件，包含基本列表样式、可扩展插槽机制、长列表性能优化、多端兼容。
+
+在vue页面里，它默认使用页面级滚动。在app-nvue页面里，它默认使用原生list组件滚动。这样的长列表，在滚动出屏幕外后，系统会回收不可见区域的渲染内存资源，不会造成滚动越长手机越卡的问题。
+
+uni-list组件是父容器，里面的核心是uni-list-item子组件，它代表列表中的一个可重复行，子组件可以无限循环。
+
+uni-list-item有很多风格，uni-list-item组件通过内置的属性，满足一些常用的场景。当内置属性不满足需求时，可以通过扩展插槽来自定义列表内容。
+
+内置属性可以覆盖的场景包括：导航列表、设置列表、小图标列表、通信录列表、聊天记录列表。
+
+涉及很多大图或丰富内容的列表，比如类今日头条的新闻列表、类淘宝的电商列表，需要通过扩展插槽实现。
+
+下文均有样例给出。
+
+uni-list不包含下拉刷新和上拉翻页。上拉翻页另见组件：[uni-load-more](https://ext.dcloud.net.cn/plugin?id=29)
+
+
+### 安装方式
+
+本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
+
+如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
+
+> **注意事项**
+> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
+> - 组件需要依赖 `sass` 插件 ，请自行手动安装
+> - 组件内部依赖 `'uni-icons'` 、`uni-badge` 组件
+> - `uni-list` 和 `uni-list-item` 需要配套使用，暂不支持单独使用 `uni-list-item`
+> - 只有开启点击反馈后，会有点击选中效果
+> - 使用插槽时，可以完全自定义内容
+> - note 、rightText 属性暂时没做限制，不支持文字溢出隐藏，使用时应该控制长度显示或通过默认插槽自行扩展
+> - 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： 详情 --> 项目配置 --> 启用 component2 编译
+> - 如果需要修改 `switch`、`badge` 样式，请使用插槽自定义
+> - 在 `HBuilderX` 低版本中，可能会出现组件显示 `undefined` 的问题，请升级最新的 `HBuilderX` 或者 `cli`
+> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
+ 
+
+### 基本用法 
+
+- 设置 `title` 属性，可以显示列表标题
+- 设置 `disabled` 属性，可以禁用当前项
+
+```html
+<uni-list>
+	<uni-list-item  title="列表文字" ></uni-list-item>
+	<uni-list-item :disabled="true" title="列表禁用状态" ></uni-list-item>
+</uni-list>
+			 
+```
+
+### 多行内容显示
+
+- 设置 `note` 属性 ，可以在第二行显示描述文本信息
+
+```html
+<uni-list>
+	<uni-list-item title="列表文字" note="列表描述信息"></uni-list-item>
+	<uni-list-item :disabled="true" title="列表文字" note="列表禁用状态"></uni-list-item>
+</uni-list>
+
+```
+
+### 右侧显示角标、switch
+
+- 设置 `show-badge` 属性 ，可以显示角标内容
+- 设置 `show-switch` 属性，可以显示 switch 开关
+
+```html
+<uni-list>
+	<uni-list-item  title="列表右侧显示角标" :show-badge="true" badge-text="12" ></uni-list-item>
+	<uni-list-item title="列表右侧显示 switch"  :show-switch="true"  @switchChange="switchChange" ></uni-list-item>
+</uni-list>
+
+```
+
+### 左侧显示略缩图、图标  
+
+- 设置 `thumb` 属性 ，可以在列表左侧显示略缩图
+- 设置 `show-extra-icon` 属性，并指定 `extra-icon` 可以在左侧显示图标
+
+```html
+ <uni-list>
+ 	<uni-list-item title="列表左侧带略缩图" note="列表描述信息" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
+ 	 thumb-size="lg" rightText="右侧文字"></uni-list-item>
+ 	<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="列表左侧带扩展图标" ></uni-list-item>
+</uni-list>
+```
+
+### 开启点击反馈和右侧箭头
+- 设置 `clickable` 为 `true` ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 `click` 事件
+- 设置 `link` 属性，会自动开启点击反馈，并给列表右侧添加一个箭头
+- 设置 `to` 属性，可以跳转页面，`link` 的值表示跳转方式，如果不指定，默认为 `navigateTo`
+
+```html
+
+<uni-list>
+	<uni-list-item title="开启点击反馈" clickable  @click="onClick" ></uni-list-item>
+	<uni-list-item title="默认 navigateTo 方式跳转页面" link to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
+	<uni-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
+</uni-list>
+
+```
+
+
+### 聊天列表示例
+- 设置 `clickable` 为 `true` ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 `click` 事件
+- 设置 `link` 属性，会自动开启点击反馈，`link` 的值表示跳转方式，如果不指定，默认为 `navigateTo`
+- 设置 `to` 属性，可以跳转页面
+- `time` 属性，通常会设置成时间显示，但是这个属性不仅仅可以设置时间，你可以传入任何文本，注意文本长度可能会影响显示
+- `avatar` 和 `avatarList` 属性同时只会有一个生效，同时设置的话，`avatarList` 属性的长度大于1 ，`avatar` 属性将失效
+- 可以通过默认插槽自定义列表右侧内容
+
+```html
+
+<uni-list>
+	<uni-list :border="true">
+		<!-- 显示圆形头像 -->
+		<uni-list-chat :avatar-circle="true" title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" ></uni-list-chat>
+		<!-- 右侧带角标 -->
+		<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-text="12" :badge-style="{backgroundColor:'#FF80AB'}"></uni-list-chat>
+		<!-- 头像显示圆点 -->
+		<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
+		<!-- 头像显示角标 -->
+		<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="99"></uni-list-chat>
+		<!-- 显示多头像 -->
+		<uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
+		<!-- 自定义右侧内容 -->
+		<uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot">
+			<view class="chat-custom-right">
+				<text class="chat-custom-text">刚刚</text>
+				<!-- 需要使用 uni-icons 请自行引入 -->
+				<uni-icons type="star-filled" color="#999" size="18"></uni-icons>
+			</view>
+		</uni-list-chat>
+	</uni-list>
+</uni-list>
+
+```
+
+```javascript
+
+export default {
+	components: {},
+	data() {
+		return {
+			avatarList: [{
+				url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
+			}, {
+				url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
+			}, {
+				url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
+			}]
+		}
+	}
+}
+
+```
+
+
+```css
+
+.chat-custom-right {
+	flex: 1;
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: column;
+	justify-content: space-between;
+	align-items: flex-end;
+}
+
+.chat-custom-text {
+	font-size: 12px;
+	color: #999;
+}
+
+```
+
+## API
+
+### List Props
+
+属性名			|类型		|默认值		|	说明																									
+:-:				|:-:		|:-:		|	:-:	
+border			|Boolean	|true		|	是否显示边框
+
+
+### ListItem Props
+
+属性名			|类型		|默认值		|	说明																					
+:-:				|:-:		|:-:		|	:-:	
+title			|String		|-			|	标题
+note			|String		|-			|	描述
+ellipsis		|Number		|0			|	title 是否溢出隐藏，可选值，0:默认;  1:显示一行;	2:显示两行;【nvue 暂不支持】
+thumb			|String		|-			|	左侧缩略图，若thumb有值，则不会显示扩展图标
+thumbSize		|String 	|medium 	|	略缩图尺寸，可选值，lg:大图;  medium:一般;	sm:小图;
+showBadge		|Boolean	|false		|	是否显示数字角标	
+badgeText		|String		|-			|	数字角标内容
+badgeType		|String		|-			|	数字角标类型，参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21)	
+badgeStyle  |Object   |-      | 数字角标样式，使用uni-badge的custom-style参数
+rightText		|String		|-			|	右侧文字内容
+disabled		|Boolean	|false		|	是否禁用	
+showArrow 		|Boolean	|true		|	是否显示箭头图标			
+link			|String 	|navigateTo	|	新页面跳转方式，可选值见下表
+to				|String		|-			|	新页面跳转地址，如填写此属性，click 会返回页面是否跳转成功			
+clickable		|Boolean	|false		|	是否开启点击反馈
+showSwitch	    |Boolean	|false		|	是否显示Switch																			
+switchChecked	|Boolean	|false		|	Switch是否被选中																			
+showExtraIcon   |Boolean	|false		|	左侧是否显示扩展图标																		
+extraIcon		|Object		|-			|	扩展图标参数，格式为 ``{color: '#4cd964',size: '22',type: 'spinner'}``，参考 [uni-icons](https://ext.dcloud.net.cn/plugin?id=28)	
+direction		| String	|row		|	排版方向，可选值，row:水平排列;  column:垂直排列; 3个插槽是水平排还是垂直排，也受此属性控制
+
+
+#### Link Options
+
+属性名				|	说明
+:-:					|	:-:
+navigateTo 	| 	同 uni.navigateTo()
+redirectTo 	|	同 uni.reLaunch()
+reLaunch		|	同 uni.reLaunch()
+switchTab  	|	同 uni.switchTab()
+
+### ListItem Events
+
+事件称名			|说明									|返回参数			
+:-:				|:-:									|:-:				
+click			|点击 uniListItem 触发事件，需开启点击反馈	|-					
+switchChange	|点击切换 Switch 时触发，需显示 switch		|e={value:checked}	
+
+
+
+### ListItem Slots
+
+名称	 	|	说明					
+:-:		|	:-:						
+header	|	左/上内容插槽，可完全自定义默认显示
+body	|	中间内容插槽，可完全自定义中间内容				
+footer	|	右/下内容插槽，可完全自定义右侧内容		
+
+
+> **通过插槽扩展**
+> 需要注意的是当使用插槽时，内置样式将会失效，只保留排版样式，此时的样式需要开发者自己实现
+> 如果	`uni-list-item` 组件内置属性样式无法满足需求，可以使用插槽来自定义uni-list-item里的内容。
+> uni-list-item提供了3个可扩展的插槽：`header`、`body`、`footer`
+> - 当 `direction` 属性为 `row` 时表示水平排列，此时 `header` 表示列表的左边部分，`body` 表示列表的中间部分，`footer` 表示列表的右边部分
+> - 当 `direction` 属性为 `column` 时表示垂直排列，此时 `header` 表示列表的上边部分，`body` 表示列表的中间部分，`footer` 表示列表的下边部分
+> 开发者可以只用1个插槽，也可以3个一起使用。在插槽中可自主编写view标签，实现自己所需的效果。
+
+	
+**示例**
+
+```html
+<uni-list>
+	<uni-list-item title="自定义右侧插槽" note="列表描述信息" link>
+		<template slot="header">
+			<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
+		</template>
+	</uni-list-item>
+	<uni-list-item>
+		<!-- 自定义 header -->
+		<view slot="header" class="slot-box"><image class="slot-image" src="/static/logo.png" mode="widthFix"></image></view>
+		<!-- 自定义 body -->
+		<text slot="body" class="slot-box slot-text">自定义插槽</text>
+		<!-- 自定义 footer-->
+		<template slot="footer">
+			<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
+		</template>
+	</uni-list-item>
+</uni-list>
+```
+
+
+
+
+
+### ListItemChat Props
+
+属性名			|类型		|默认值		|	说明																		
+:-:				|:-:		|:-:		|	:-:	
+title 			|String		|-			|	标题
+note 			|String		|-			|	描述
+clickable		|Boolean	|false		|	是否开启点击反馈
+badgeText		|String		|-			|	数字角标内容，设置为 `dot` 将显示圆点
+badgePositon 	|String		|right		|	角标位置
+link			|String 	|navigateTo	|	是否展示右侧箭头并开启点击反馈，可选值见下表
+clickable		|Boolean	|false		|	是否开启点击反馈
+to				|String		|-			|	跳转页面地址，如填写此属性，click 会返回页面是否跳转成功	
+time			|String 	|-			|	右侧时间显示
+avatarCircle 	|Boolean 	|false		|	是否显示圆形头像
+avatar			|String 	|-			|	头像地址，avatarCircle 不填时生效
+avatarList 		|Array	 	|-			|	头像组，格式为 [{url:''}]
+
+#### Link Options
+
+属性名		|	说明
+:-:			|	:-:
+navigateTo 	| 	同 uni.navigateTo()
+redirectTo 	|	同 uni.reLaunch()
+reLaunch	|	同 uni.reLaunch()
+switchTab  	|	同 uni.switchTab()
+
+### ListItemChat Slots
+
+名称	 	|	说明					
+:-		|	:-						
+default	|	自定义列表右侧内容（包括时间和角标显示）
+
+### ListItemChat Events
+事件称名			|	说明						|	返回参数			
+:-:				|	:-:						|	:-:	
+@click			|	点击 uniListChat 触发事件	|	{data:{}}	，如有 to 属性，会返回页面跳转信息	
+
+
+
+
+
+
+## 基于uni-list扩展的页面模板
+
+通过扩展插槽，可实现多种常见样式的列表
+
+**新闻列表类**
+
+1. 云端一体混合布局：[https://ext.dcloud.net.cn/plugin?id=2546](https://ext.dcloud.net.cn/plugin?id=2546)
+2. 云端一体垂直布局，大图模式：[https://ext.dcloud.net.cn/plugin?id=2583](https://ext.dcloud.net.cn/plugin?id=2583)
+3. 云端一体垂直布局，多行图文混排：[https://ext.dcloud.net.cn/plugin?id=2584](https://ext.dcloud.net.cn/plugin?id=2584)
+4. 云端一体垂直布局，多图模式：[https://ext.dcloud.net.cn/plugin?id=2585](https://ext.dcloud.net.cn/plugin?id=2585)
+5. 云端一体水平布局，左图右文：[https://ext.dcloud.net.cn/plugin?id=2586](https://ext.dcloud.net.cn/plugin?id=2586)
+6. 云端一体水平布局，左文右图：[https://ext.dcloud.net.cn/plugin?id=2587](https://ext.dcloud.net.cn/plugin?id=2587)
+7. 云端一体垂直布局，无图模式，主标题+副标题：[https://ext.dcloud.net.cn/plugin?id=2588](https://ext.dcloud.net.cn/plugin?id=2588)
+
+**商品列表类**
+
+1. 云端一体列表/宫格视图互切：[https://ext.dcloud.net.cn/plugin?id=2651](https://ext.dcloud.net.cn/plugin?id=2651)
+2. 云端一体列表（宫格模式）：[https://ext.dcloud.net.cn/plugin?id=2671](https://ext.dcloud.net.cn/plugin?id=2671)
+3. 云端一体列表（列表模式）：[https://ext.dcloud.net.cn/plugin?id=2672](https://ext.dcloud.net.cn/plugin?id=2672)
+
+## 组件示例
+
+点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/list/list](https://hellouniapp.dcloud.net.cn/pages/extUI/list/list)
\ No newline at end of file
diff --git a/uni_modules/uni-load-more/changelog.md b/uni_modules/uni-load-more/changelog.md
new file mode 100644
index 0000000..8f03f1d
--- /dev/null
+++ b/uni_modules/uni-load-more/changelog.md
@@ -0,0 +1,19 @@
+## 1.3.3（2022-01-20）
+- 新增 showText属性 ，是否显示文本
+## 1.3.2（2022-01-19）
+- 修复 nvue 平台下不显示文本的bug
+## 1.3.1（2022-01-19）
+- 修复 微信小程序平台样式选择器报警告的问题
+## 1.3.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-load-more](https://uniapp.dcloud.io/component/uniui/uni-load-more)
+## 1.2.1（2021-08-24）
+- 新增 支持国际化
+## 1.2.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.1.8（2021-05-12）
+- 新增 组件示例地址
+## 1.1.7（2021-03-30）
+- 修复 uni-load-more 在首页使用时，h5 平台报 'uni is not defined' 的 bug
+## 1.1.6（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-load-more/components/uni-load-more/i18n/en.json b/uni_modules/uni-load-more/components/uni-load-more/i18n/en.json
new file mode 100644
index 0000000..a4f14a5
--- /dev/null
+++ b/uni_modules/uni-load-more/components/uni-load-more/i18n/en.json
@@ -0,0 +1,5 @@
+{
+	"uni-load-more.contentdown": "Pull up to show more",
+	"uni-load-more.contentrefresh": "loading...",
+	"uni-load-more.contentnomore": "No more data"
+}
diff --git a/uni_modules/uni-load-more/components/uni-load-more/i18n/index.js b/uni_modules/uni-load-more/components/uni-load-more/i18n/index.js
new file mode 100644
index 0000000..de7509c
--- /dev/null
+++ b/uni_modules/uni-load-more/components/uni-load-more/i18n/index.js
@@ -0,0 +1,8 @@
+import en from './en.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
+}
diff --git a/uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hans.json b/uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hans.json
new file mode 100644
index 0000000..f15d510
--- /dev/null
+++ b/uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hans.json
@@ -0,0 +1,5 @@
+{
+	"uni-load-more.contentdown": "上拉显示更多",
+	"uni-load-more.contentrefresh": "正在加载...",
+	"uni-load-more.contentnomore": "没有更多数据了"
+}
diff --git a/uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hant.json b/uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hant.json
new file mode 100644
index 0000000..a255c6d
--- /dev/null
+++ b/uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hant.json
@@ -0,0 +1,5 @@
+{
+	"uni-load-more.contentdown": "上拉顯示更多",
+	"uni-load-more.contentrefresh": "正在加載...",
+	"uni-load-more.contentnomore": "沒有更多數據了"
+}
diff --git a/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue b/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue
new file mode 100644
index 0000000..e5eff4d
--- /dev/null
+++ b/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue
@@ -0,0 +1,399 @@
+<template>
+	<view class="uni-load-more" @click="onClick">
+		<!-- #ifdef APP-NVUE -->
+		<loading-indicator v-if="!webviewHide && status === 'loading' && showIcon"
+			:style="{color: color,width:iconSize+'px',height:iconSize+'px'}" :animating="true"
+			class="uni-load-more__img uni-load-more__img--nvue"></loading-indicator>
+		<!-- #endif -->
+		<!-- #ifdef H5 -->
+		<svg width="24" height="24" viewBox="25 25 50 50"
+			v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon"
+			:style="{width:iconSize+'px',height:iconSize+'px'}"
+			class="uni-load-more__img uni-load-more__img--android-H5">
+			<circle cx="50" cy="50" r="20" fill="none" :style="{color:color}" :stroke-width="3"></circle>
+		</svg>
+		<!-- #endif -->
+		<!-- #ifndef APP-NVUE || H5 -->
+		<view
+			v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon"
+			:style="{width:iconSize+'px',height:iconSize+'px'}"
+			class="uni-load-more__img uni-load-more__img--android-MP">
+			<view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
+			<view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
+			<view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
+		</view>
+		<!-- #endif -->
+		<!-- #ifndef APP-NVUE -->
+		<view v-else-if="!webviewHide && status === 'loading' && showIcon"
+			:style="{width:iconSize+'px',height:iconSize+'px'}" class="uni-load-more__img uni-load-more__img--ios-H5">
+			<image :src="imgBase64" mode="widthFix"></image>
+		</view>
+		<!-- #endif -->
+		<text v-if="showText" class="uni-load-more__text"
+			:style="{color: color}">{{ status === 'more' ? contentdownText : status === 'loading' ? contentrefreshText : contentnomoreText }}</text>
+	</view>
+</template>
+
+<script>
+	let platform
+	setTimeout(() => {
+		platform = uni.getSystemInfoSync().platform
+	}, 16)
+
+	import {
+		initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import messages from './i18n/index.js'
+	const {
+		t
+	} = initVueI18n(messages)
+
+	/**
+	 * LoadMore 加载更多
+	 * @description 用于列表中，做滚动加载使用，展示 loading 的各种状态
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=29
+	 * @property {String} status = [more|loading|noMore] loading 的状态
+	 * 	@value more loading前
+	 * 	@value loading loading中
+	 * 	@value noMore 没有更多了
+	 * @property {Number} iconSize 指定图标大小
+	 * @property {Boolean} iconSize = [true|false] 是否显示 loading 图标
+	 * @property {String} iconType = [snow|circle|auto] 指定图标样式
+	 * 	@value snow ios雪花加载样式
+	 * 	@value circle 安卓唤醒加载样式
+	 * 	@value auto 根据平台自动选择加载样式
+	 * @property {String} color 图标和文字颜色
+	 * @property {Object} contentText 各状态文字说明，值为：{contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}
+	 * @event {Function} clickLoadMore 点击加载更多时触发
+	 */
+	export default {
+		name: 'UniLoadMore',
+		emits: ['clickLoadMore'],
+		props: {
+			status: {
+				// 上拉的状态：more-loading前；loading-loading中；noMore-没有更多了
+				type: String,
+				default: 'more'
+			},
+			showIcon: {
+				type: Boolean,
+				default: true
+			},
+			iconType: {
+				type: String,
+				default: 'auto'
+			},
+			iconSize: {
+				type: Number,
+				default: 24
+			},
+			color: {
+				type: String,
+				default: '#777777'
+			},
+			contentText: {
+				type: Object,
+				default () {
+					return {
+						contentdown: '',
+						contentrefresh: '',
+						contentnomore: ''
+					}
+				}
+			},
+			showText: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				webviewHide: false,
+				platform: platform,
+				imgBase64: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzlBMzU3OTlEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzlBMzU3OUFEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDOUEzNTc5N0Q5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDOUEzNTc5OEQ5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt+ALSwAAA6CSURBVHja1FsLkFZV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'
+			}
+		},
+		computed: {
+			iconSnowWidth() {
+				return (Math.floor(this.iconSize / 24) || 1) * 2
+			},
+			contentdownText() {
+				return this.contentText.contentdown || t("uni-load-more.contentdown")
+			},
+			contentrefreshText() {
+				return this.contentText.contentrefresh || t("uni-load-more.contentrefresh")
+			},
+			contentnomoreText() {
+				return this.contentText.contentnomore || t("uni-load-more.contentnomore")
+			}
+		},
+		mounted() {
+			// #ifdef APP-PLUS
+			var pages = getCurrentPages();
+			var page = pages[pages.length - 1];
+			var currentWebview = page.$getAppWebview();
+			currentWebview.addEventListener('hide', () => {
+				this.webviewHide = true
+			})
+			currentWebview.addEventListener('show', () => {
+				this.webviewHide = false
+			})
+			// #endif
+		},
+		methods: {
+			onClick() {
+				this.$emit('clickLoadMore', {
+					detail: {
+						status: this.status,
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	.uni-load-more {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		height: 40px;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.uni-load-more__text {
+		font-size: 14px;
+		margin-left: 8px;
+	}
+
+	.uni-load-more__img {
+		width: 24px;
+		height: 24px;
+		// margin-right: 8px;
+	}
+
+	.uni-load-more__img--nvue {
+		color: #666666;
+	}
+
+	.uni-load-more__img--android,
+	.uni-load-more__img--ios {
+		width: 24px;
+		height: 24px;
+		transform: rotate(0deg);
+	}
+
+	/* #ifndef APP-NVUE */
+	.uni-load-more__img--android {
+		animation: loading-ios 1s 0s linear infinite;
+	}
+
+	@keyframes loading-android {
+		0% {
+			transform: rotate(0deg);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	.uni-load-more__img--ios-H5 {
+		position: relative;
+		animation: loading-ios-H5 1s 0s step-end infinite;
+	}
+
+	.uni-load-more__img--ios-H5 image {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		left: 0;
+		top: 0;
+	}
+
+	@keyframes loading-ios-H5 {
+		0% {
+			transform: rotate(0deg);
+		}
+
+		8% {
+			transform: rotate(30deg);
+		}
+
+		16% {
+			transform: rotate(60deg);
+		}
+
+		24% {
+			transform: rotate(90deg);
+		}
+
+		32% {
+			transform: rotate(120deg);
+		}
+
+		40% {
+			transform: rotate(150deg);
+		}
+
+		48% {
+			transform: rotate(180deg);
+		}
+
+		56% {
+			transform: rotate(210deg);
+		}
+
+		64% {
+			transform: rotate(240deg);
+		}
+
+		73% {
+			transform: rotate(270deg);
+		}
+
+		82% {
+			transform: rotate(300deg);
+		}
+
+		91% {
+			transform: rotate(330deg);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* #endif */
+
+	/* #ifdef H5 */
+	.uni-load-more__img--android-H5 {
+		animation: loading-android-H5-rotate 2s linear infinite;
+		transform-origin: center center;
+	}
+
+	.uni-load-more__img--android-H5 circle {
+		display: inline-block;
+		animation: loading-android-H5-dash 1.5s ease-in-out infinite;
+		stroke: currentColor;
+		stroke-linecap: round;
+	}
+
+	@keyframes loading-android-H5-rotate {
+		0% {
+			transform: rotate(0deg);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes loading-android-H5-dash {
+		0% {
+			stroke-dasharray: 1, 200;
+			stroke-dashoffset: 0;
+		}
+
+		50% {
+			stroke-dasharray: 90, 150;
+			stroke-dashoffset: -40;
+		}
+
+		100% {
+			stroke-dasharray: 90, 150;
+			stroke-dashoffset: -120;
+		}
+	}
+
+	/* #endif */
+
+	/* #ifndef APP-NVUE || H5 */
+	.uni-load-more__img--android-MP {
+		position: relative;
+		width: 24px;
+		height: 24px;
+		transform: rotate(0deg);
+		animation: loading-ios 1s 0s ease infinite;
+	}
+
+	.uni-load-more__img--android-MP .uni-load-more__img-icon {
+		position: absolute;
+		box-sizing: border-box;
+		width: 100%;
+		height: 100%;
+		border-radius: 50%;
+		border: solid 2px transparent;
+		border-top: solid 2px #777777;
+		transform-origin: center;
+	}
+
+	.uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(1) {
+		animation: loading-android-MP-1 1s 0s linear infinite;
+	}
+
+	.uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(2) {
+		animation: loading-android-MP-2 1s 0s linear infinite;
+	}
+
+	.uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(3) {
+		animation: loading-android-MP-3 1s 0s linear infinite;
+	}
+
+	@keyframes loading-android {
+		0% {
+			transform: rotate(0deg);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes loading-android-MP-1 {
+		0% {
+			transform: rotate(0deg);
+		}
+
+		50% {
+			transform: rotate(90deg);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes loading-android-MP-2 {
+		0% {
+			transform: rotate(0deg);
+		}
+
+		50% {
+			transform: rotate(180deg);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes loading-android-MP-3 {
+		0% {
+			transform: rotate(0deg);
+		}
+
+		50% {
+			transform: rotate(270deg);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* #endif */
+</style>
diff --git a/uni_modules/uni-load-more/package.json b/uni_modules/uni-load-more/package.json
new file mode 100644
index 0000000..2fa6f04
--- /dev/null
+++ b/uni_modules/uni-load-more/package.json
@@ -0,0 +1,86 @@
+{
+  "id": "uni-load-more",
+  "displayName": "uni-load-more 加载更多",
+  "version": "1.3.3",
+  "description": "LoadMore 组件，常用在列表里面，做滚动加载使用。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "加载更多",
+    "load-more"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-load-more/readme.md b/uni_modules/uni-load-more/readme.md
new file mode 100644
index 0000000..54dc1fa
--- /dev/null
+++ b/uni_modules/uni-load-more/readme.md
@@ -0,0 +1,14 @@
+
+
+### LoadMore 加载更多
+> **组件名：uni-load-more**
+> 代码块： `uLoadMore`
+
+
+用于列表中，做滚动加载使用，展示 loading 的各种状态。
+
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-load-more)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
diff --git a/uni_modules/uni-nav-bar/changelog.md b/uni_modules/uni-nav-bar/changelog.md
new file mode 100644
index 0000000..0f9a2f1
--- /dev/null
+++ b/uni_modules/uni-nav-bar/changelog.md
@@ -0,0 +1,51 @@
+## 1.3.11（2023-03-29）
+- 修复 自定义状态栏高度闪动BUG
+## 1.3.10（2023-03-29）
+- 修复 暗黑模式下边线颜色错误的bug
+## 1.3.9（2022-10-13）
+- 修复 条件编译错误的bug
+## 1.3.8（2022-10-12）
+- 修复 nvue 环境 fixed 为 true 的情况下，无法置顶的 bug
+## 1.3.7（2022-08-11）
+- 修复 nvue 环境下 fixed 为 true 的情况下，无法置顶的 bug
+## 1.3.6（2022-06-30）
+- 修复 组件示例中插槽用法无法显示内容的bug
+## 1.3.5（2022-05-24）
+- 新增 stat 属性 ，可开启统计title 上报 ，仅使用了title 属性且项目开启了uni统计生效
+## 1.3.4（2022-01-24）
+- 更新 组件示例
+## 1.3.3（2022-01-24）
+- 新增 left-width/right-width属性 ，可修改左右两侧的宽度
+## 1.3.2（2022-01-18）
+- 修复 在vue下，标题不垂直居中的bug
+## 1.3.1（2022-01-18）
+- 修复 height 属性类型错误
+## 1.3.0（2022-01-18）
+- 新增 height 属性,可修改组件高度
+- 新增 dark 属性可可开启暗黑模式
+- 优化 标题字数过多显示省略号
+- 优化 插槽，插入内容可完全覆盖
+## 1.2.1（2022-01-10）
+- 修复 color 属性不生效的bug
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-nav-bar](https://uniapp.dcloud.io/component/uniui/uni-nav-bar)
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.11（2021-05-12）
+- 新增 组件示例地址
+## 1.0.10（2021-04-30）
+- 修复 在nvue下fixed为true，宽度不能撑满的Bug
+## 1.0.9（2021-04-21）
+- 优化 添加依赖 uni-icons, 导入后自动下载依赖
+## 1.0.8（2021-04-14）
+- uni-ui 修复 uni-nav-bar 当 fixed 属性为 true 时铺不满屏幕的 bug
+
+## 1.0.7（2021-02-25）
+- 修复 easycom 下，找不到 uni-status-bar 的bug
+
+## 1.0.6（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+
+## 1.0.5（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue b/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue
new file mode 100644
index 0000000..c890860
--- /dev/null
+++ b/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue
@@ -0,0 +1,357 @@
+<template>
+	<view class="uni-navbar" :class="{'uni-dark':dark, 'uni-nvue-fixed': fixed}">
+		<view class="uni-navbar__content" :class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }"
+			:style="{ 'background-color': themeBgColor, 'border-bottom-color':themeColor }" >
+			<status-bar v-if="statusBar" />
+			<view :style="{ color: themeColor,backgroundColor: themeBgColor ,height:navbarHeight}"
+				class="uni-navbar__header">
+				<view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left"
+					:style="{width:leftIconWidth}">
+					<slot name="left">
+						<view class="uni-navbar__content_view" v-if="leftIcon.length > 0">
+							<uni-icons :color="themeColor" :type="leftIcon" size="20" />
+						</view>
+						<view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length > 0 }" class="uni-navbar-btn-text"
+							v-if="leftText.length">
+							<text :style="{ color: themeColor, fontSize: '12px' }">{{ leftText }}</text>
+						</view>
+					</slot>
+				</view>
+				<view class="uni-navbar__header-container " @tap="onClickTitle">
+					<slot>
+						<view class="uni-navbar__header-container-inner" v-if="title.length>0">
+							<text class="uni-nav-bar-text uni-ellipsis-1"
+								:style="{color: themeColor }">{{ title }}</text>
+						</view>
+					</slot>
+				</view>
+				<view @click="onClickRight" class="uni-navbar__header-btns uni-navbar__header-btns-right"
+					:style="{width:rightIconWidth}">
+					<slot name="right">
+						<view v-if="rightIcon.length">
+							<uni-icons :color="themeColor" :type="rightIcon" size="22" />
+						</view>
+						<view class="uni-navbar-btn-text" v-if="rightText.length && !rightIcon.length">
+							<text class="uni-nav-bar-right-text" :style="{ color: themeColor}">{{ rightText }}</text>
+						</view>
+					</slot>
+				</view>
+			</view>
+		</view>
+		<!-- #ifndef APP-NVUE -->
+		<view class="uni-navbar__placeholder" v-if="fixed">
+			<status-bar v-if="statusBar" />
+			<view class="uni-navbar__placeholder-view" :style="{ height:navbarHeight}" />
+		</view>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+	import statusBar from "./uni-status-bar.vue";
+	const getVal = (val) => typeof val === 'number' ? val + 'px' : val;
+
+	/**
+	 * 
+	 * 
+	 * NavBar 自定义导航栏
+	 * @description 导航栏组件，主要用于头部导航
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=52
+	 * @property {Boolean} dark 开启黑暗模式
+	 * @property {String} title 标题文字
+	 * @property {String} leftText 左侧按钮文本
+	 * @property {String} rightText 右侧按钮文本
+	 * @property {String} leftIcon 左侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
+	 * @property {String} rightIcon 右侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
+	 * @property {String} color 图标和文字颜色
+	 * @property {String} backgroundColor 导航栏背景颜色
+	 * @property {Boolean} fixed = [true|false] 是否固定顶部
+	 * @property {Boolean} statusBar = [true|false] 是否包含状态栏
+	 * @property {Boolean} shadow = [true|false] 导航栏下是否有阴影
+	 * @property {Boolean} stat 是否开启统计标题上报
+	 * @event {Function} clickLeft 左侧按钮点击时触发
+	 * @event {Function} clickRight 右侧按钮点击时触发
+	 * @event {Function} clickTitle 中间标题点击时触发
+	 */
+	export default {
+		name: "UniNavBar",
+		components: {
+			statusBar
+		},
+		emits: ['clickLeft', 'clickRight', 'clickTitle'],
+		props: {
+			dark: {
+				type: Boolean,
+				default: false
+			},
+			title: {
+				type: String,
+				default: ""
+			},
+			leftText: {
+				type: String,
+				default: ""
+			},
+			rightText: {
+				type: String,
+				default: ""
+			},
+			leftIcon: {
+				type: String,
+				default: ""
+			},
+			rightIcon: {
+				type: String,
+				default: ""
+			},
+			fixed: {
+				type: [Boolean, String],
+				default: false
+			},
+			color: {
+				type: String,
+				default: ""
+			},
+			backgroundColor: {
+				type: String,
+				default: ""
+			},
+			statusBar: {
+				type: [Boolean, String],
+				default: false
+			},
+			shadow: {
+				type: [Boolean, String],
+				default: false
+			},
+			border: {
+				type: [Boolean, String],
+				default: true
+			},
+			height: {
+				type: [Number, String],
+				default: 44
+			},
+			leftWidth: {
+				type: [Number, String],
+				default: 60
+			},
+			rightWidth: {
+				type: [Number, String],
+				default: 60
+			},
+			stat: {
+				type: [Boolean, String],
+				default: ''
+			}
+		},
+		computed: {
+			themeBgColor() {
+				if (this.dark) {
+					// 默认值
+					if (this.backgroundColor) {
+						return this.backgroundColor
+					} else {
+						return this.dark ? '#333' : '#FFF'
+					}
+				}
+				return this.backgroundColor || '#FFF'
+			},
+			themeColor() {
+				if (this.dark) {
+					// 默认值
+					if (this.color) {
+						return this.color
+					} else {
+						return this.dark ? '#fff' : '#333'
+					}
+				}
+				return this.color || '#333'
+			},
+			navbarHeight() {
+				return getVal(this.height)
+			},
+			leftIconWidth() {
+				return getVal(this.leftWidth)
+			},
+			rightIconWidth() {
+				return getVal(this.rightWidth)
+			}
+		},
+		mounted() {
+			if (uni.report && this.stat && this.title !== '') {
+				uni.report('title', this.title)
+			}
+		},
+		methods: {
+			onClickLeft() {
+				this.$emit("clickLeft");
+			},
+			onClickRight() {
+				this.$emit("clickRight");
+			},
+			onClickTitle() {
+				this.$emit("clickTitle");
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	$nav-height: 44px;
+
+	.uni-nvue-fixed {
+		/* #ifdef APP-NVUE */
+		position: sticky;
+		/* #endif */
+	}
+	.uni-navbar {
+		// box-sizing: border-box;
+	}
+
+	.uni-nav-bar-text {
+		/* #ifdef APP-PLUS */
+		font-size: 34rpx;
+		/* #endif */
+		/* #ifndef APP-PLUS */
+		font-size: 14px;
+		/* #endif */
+	}
+
+	.uni-nav-bar-right-text {
+		font-size: 12px;
+	}
+
+	.uni-navbar__content {
+		position: relative;
+		// background-color: #fff;
+		// box-sizing: border-box;
+		background-color: transparent;
+	}
+
+	.uni-navbar__content_view {
+		// box-sizing: border-box;
+	}
+
+	.uni-navbar-btn-text {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: center;
+		line-height: 12px;
+	}
+
+	.uni-navbar__header {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		padding: 0 10px;
+		flex-direction: row;
+		height: $nav-height;
+		font-size: 12px;
+	}
+
+	.uni-navbar__header-btns {
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		display: flex;
+		/* #endif */
+		flex-wrap: nowrap;
+		flex-direction: row;
+		width: 120rpx;
+		// padding: 0 6px;
+		justify-content: center;
+		align-items: center;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-navbar__header-btns-left {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		width: 120rpx;
+		justify-content: flex-start;
+		align-items: center;
+	}
+
+	.uni-navbar__header-btns-right {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		// width: 150rpx;
+		// padding-right: 30rpx;
+		justify-content: flex-end;
+		align-items: center;
+	}
+
+	.uni-navbar__header-container {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		padding: 0 10px;
+		overflow: hidden;
+	}
+
+	.uni-navbar__header-container-inner {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		font-size: 12px;
+		overflow: hidden;
+		// box-sizing: border-box;
+	}
+
+
+	.uni-navbar__placeholder-view {
+		height: $nav-height;
+	}
+
+	.uni-navbar--fixed {
+		position: fixed;
+		z-index: 998;
+		/* #ifdef H5 */
+		left: var(--window-left);
+		right: var(--window-right);
+		/* #endif */
+		/* #ifndef H5 */
+		left: 0;
+		right: 0;
+		/* #endif */
+
+	}
+
+	.uni-navbar--shadow {
+		box-shadow: 0 1px 6px #ccc;
+	}
+
+	.uni-navbar--border {
+		border-bottom-width: 1rpx;
+		border-bottom-style: solid;
+		border-bottom-color: #eee;
+	}
+
+	.uni-ellipsis-1 {
+		overflow: hidden;
+		/* #ifndef APP-NVUE */
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		lines: 1;
+		text-overflow: ellipsis;
+		/* #endif */
+	}
+
+	// 暗主题配置
+	.uni-dark {}
+</style>
diff --git a/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar.vue b/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar.vue
new file mode 100644
index 0000000..4ac73ae
--- /dev/null
+++ b/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar.vue
@@ -0,0 +1,24 @@
+<template>
+	<view :style="{ height: statusBarHeight }" class="uni-status-bar">
+		<slot />
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'UniStatusBar',
+		data() {
+			return {
+				statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px'
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	.uni-status-bar {
+		// width: 750rpx;
+		height: 20px;
+		// height: var(--status-bar-height);
+	}
+</style>
diff --git a/uni_modules/uni-nav-bar/package.json b/uni_modules/uni-nav-bar/package.json
new file mode 100644
index 0000000..240ae95
--- /dev/null
+++ b/uni_modules/uni-nav-bar/package.json
@@ -0,0 +1,86 @@
+{
+  "id": "uni-nav-bar",
+  "displayName": "uni-nav-bar 自定义导航栏",
+  "version": "1.3.11",
+  "description": "自定义导航栏组件，主要用于头部导航。",
+  "keywords": [
+    "uni-ui",
+    "导航",
+    "导航栏",
+    "自定义导航栏"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+			"uni-icons"
+		],
+    "encrypt": [],
+    "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-nav-bar/readme.md b/uni_modules/uni-nav-bar/readme.md
new file mode 100644
index 0000000..3934b32
--- /dev/null
+++ b/uni_modules/uni-nav-bar/readme.md
@@ -0,0 +1,15 @@
+
+
+## NavBar 导航栏
+> **组件名：uni-nav-bar**
+> 代码块： `uNavBar`
+
+导航栏组件，主要用于头部导航。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-nav-bar)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
+
+
+
diff --git a/uni_modules/uni-notice-bar/changelog.md b/uni_modules/uni-notice-bar/changelog.md
new file mode 100644
index 0000000..ce50674
--- /dev/null
+++ b/uni_modules/uni-notice-bar/changelog.md
@@ -0,0 +1,20 @@
+## 1.2.2（2023-12-20）
+- 修复动态绑定title时，滚动速度不一致的问题
+## 1.2.1（2022-09-05）
+- 新增 属性 fontSize，可修改文字大小。
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-notice-bar](https://uniapp.dcloud.io/component/uniui/uni-notice-bar)
+## 1.1.1（2021-11-09） 
+- 新增 提供组件设计资源，组件样式调整
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.9（2021-05-12）
+- 新增 组件示例地址
+## 1.0.8（2021-04-21）
+- 优化 添加依赖 uni-icons, 导入后自动下载依赖
+## 1.0.7（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+
+## 1.0.6（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue b/uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue
new file mode 100644
index 0000000..47fb9b3
--- /dev/null
+++ b/uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue
@@ -0,0 +1,431 @@
+<template>
+	<view v-if="show" class="uni-noticebar" :style="{ backgroundColor }" @click="onClick">
+		<uni-icons v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon" type="sound"
+			:color="color" :size="fontSize * 1.5" />
+		<view ref="textBox" class="uni-noticebar__content-wrapper"
+			:class="{
+				'uni-noticebar__content-wrapper--scrollable': scrollable,
+				'uni-noticebar__content-wrapper--single': !scrollable && (single || moreText)
+			}"
+			:style="{ height: scrollable ? fontSize * 1.5 + 'px' : 'auto' }"
+		>
+			<view :id="elIdBox" class="uni-noticebar__content"
+				:class="{
+					'uni-noticebar__content--scrollable': scrollable,
+					'uni-noticebar__content--single': !scrollable && (single || moreText)
+				}"
+			>
+				<text :id="elId" ref="animationEle" class="uni-noticebar__content-text" 
+					:class="{
+						'uni-noticebar__content-text--scrollable': scrollable,
+						'uni-noticebar__content-text--single': !scrollable && (single || showGetMore)
+					}" 
+					:style="{
+						color: color,
+						fontSize: fontSize + 'px',
+						lineHeight: fontSize * 1.5 + 'px',
+						width: wrapWidth + 'px',
+						'animationDuration': animationDuration,
+						'-webkit-animationDuration': animationDuration,
+						animationPlayState: webviewHide ? 'paused' : animationPlayState,
+						'-webkit-animationPlayState': webviewHide ? 'paused' : animationPlayState,
+						animationDelay: animationDelay,
+						'-webkit-animationDelay': animationDelay
+					}"
+				>{{text}}</text>
+			</view>
+		</view>
+		<view v-if="isShowGetMore" class="uni-noticebar__more uni-cursor-point"
+			@click="clickMore">
+			<text v-if="moreText.length > 0" :style="{ color: moreColor, fontSize: fontSize + 'px' }">{{ moreText }}</text>
+			<uni-icons v-else type="right" :color="moreColor" :size="fontSize * 1.1" />
+		</view>
+		<view class="uni-noticebar-close uni-cursor-point" v-if="isShowClose">
+			<uni-icons type="closeempty" :color="color" :size="fontSize * 1.1" @click="close" />
+		</view>
+	</view>
+</template>
+
+<script>
+	// #ifdef APP-NVUE
+	const dom = weex.requireModule('dom');
+	const animation = weex.requireModule('animation');
+	// #endif
+
+	/**
+	 * NoticeBar 自定义导航栏
+	 * @description 通告栏组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=30
+	 * @property {Number} speed 文字滚动的速度，默认100px/秒
+	 * @property {String} text 显示文字
+	 * @property {String} backgroundColor 背景颜色
+	 * @property {String} color 文字颜色
+	 * @property {String} moreColor 查看更多文字的颜色
+	 * @property {String} moreText 设置“查看更多”的文本
+	 * @property {Boolean} single = [true|false] 是否单行
+	 * @property {Boolean} scrollable = [true|false] 是否滚动，为true时，NoticeBar为单行
+	 * @property {Boolean} showIcon = [true|false] 是否显示左侧喇叭图标
+	 * @property {Boolean} showClose = [true|false] 是否显示左侧关闭按钮
+	 * @property {Boolean} showGetMore = [true|false] 是否显示右侧查看更多图标，为true时，NoticeBar为单行
+	 * @event {Function} click 点击 NoticeBar 触发事件
+	 * @event {Function} close 关闭 NoticeBar 触发事件
+	 * @event {Function} getmore 点击”查看更多“时触发事件
+	 */
+
+	export default {
+		name: 'UniNoticeBar',
+		emits: ['click', 'getmore', 'close'],
+		props: {
+			text: {
+				type: String,
+				default: ''
+			},
+			moreText: {
+				type: String,
+				default: ''
+			},
+			backgroundColor: {
+				type: String,
+				default: '#FFF9EA'
+			},
+			speed: {
+				// 默认1s滚动100px
+				type: Number,
+				default: 100
+			},
+			color: {
+				type: String,
+				default: '#FF9A43'
+			},
+			fontSize: {
+				type: Number,
+				default: 14
+			},
+			moreColor: {
+				type: String,
+				default: '#FF9A43'
+			},
+			single: {
+				// 是否单行
+				type: [Boolean, String],
+				default: false
+			},
+			scrollable: {
+				// 是否滚动，添加后控制单行效果取消
+				type: [Boolean, String],
+				default: false
+			},
+			showIcon: {
+				// 是否显示左侧icon
+				type: [Boolean, String],
+				default: false
+			},
+			showGetMore: {
+				// 是否显示右侧查看更多
+				type: [Boolean, String],
+				default: false
+			},
+			showClose: {
+				// 是否显示左侧关闭按钮
+				type: [Boolean, String],
+				default: false
+			}
+		},
+		data() {
+			const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
+			const elIdBox = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
+			return {
+				textWidth: 0,
+				boxWidth: 0,
+				wrapWidth: '',
+				webviewHide: false,
+				// #ifdef APP-NVUE
+				stopAnimation: false,
+				// #endif
+				elId: elId,
+				elIdBox: elIdBox,
+				show: true,
+				animationDuration: 'none',
+				animationPlayState: 'paused',
+				animationDelay: '0s'
+			}
+		},
+		watch:{
+			text:function(newValue,oldValue){
+				this.initSize();
+			}
+		},
+		computed: {
+			isShowGetMore() {
+				return this.showGetMore === true || this.showGetMore === 'true'
+			},
+			isShowClose() {
+				return (this.showClose === true || this.showClose === 'true') 
+					&& (this.showGetMore === false || this.showGetMore === 'false')
+			}
+		},
+		mounted() {
+			// #ifdef APP-PLUS
+			var pages = getCurrentPages();
+			var page = pages[pages.length - 1];
+			var currentWebview = page.$getAppWebview();
+			currentWebview.addEventListener('hide', () => {
+				this.webviewHide = true
+			})
+			currentWebview.addEventListener('show', () => {
+				this.webviewHide = false
+			})
+			// #endif
+			this.$nextTick(() => {
+				this.initSize()
+			})
+		},
+		// #ifdef APP-NVUE
+		beforeDestroy() {
+			this.stopAnimation = true
+		},
+		// #endif
+		methods: {
+			initSize() {
+				if (this.scrollable) {
+					// #ifndef APP-NVUE
+					let query = [],
+						boxWidth = 0,
+						textWidth = 0;
+					let textQuery = new Promise((resolve, reject) => {
+						uni.createSelectorQuery()
+							// #ifndef MP-ALIPAY
+							.in(this)
+							// #endif
+							.select(`#${this.elId}`)
+							.boundingClientRect()
+							.exec(ret => {
+								this.textWidth = ret[0].width
+								resolve()
+							})
+					})
+					let boxQuery = new Promise((resolve, reject) => {
+						uni.createSelectorQuery()
+							// #ifndef MP-ALIPAY
+							.in(this)
+							// #endif
+							.select(`#${this.elIdBox}`)
+							.boundingClientRect()
+							.exec(ret => {
+								this.boxWidth = ret[0].width
+								resolve()
+							})
+					})
+					query.push(textQuery)
+					query.push(boxQuery)
+					Promise.all(query).then(() => {
+						this.animationDuration = `${this.textWidth / this.speed}s`
+						this.animationDelay = `-${this.boxWidth / this.speed}s`
+						setTimeout(() => {
+							this.animationPlayState = 'running'
+						}, 1000)
+					})
+					// #endif
+					// #ifdef APP-NVUE
+					dom.getComponentRect(this.$refs['animationEle'], (res) => {
+						let winWidth = uni.getSystemInfoSync().windowWidth
+						this.textWidth = res.size.width
+						animation.transition(this.$refs['animationEle'], {
+							styles: {
+								transform: `translateX(-${winWidth}px)`
+							},
+							duration: 0,
+							timingFunction: 'linear',
+							delay: 0
+						}, () => {
+							if (!this.stopAnimation) {
+								animation.transition(this.$refs['animationEle'], {
+									styles: {
+										transform: `translateX(-${this.textWidth}px)`
+									},
+									timingFunction: 'linear',
+									duration: (this.textWidth - winWidth) / this.speed * 1000,
+									delay: 1000
+								}, () => {
+									if (!this.stopAnimation) {
+										this.loopAnimation()
+									}
+								});
+							}
+						});
+					})
+					// #endif
+				}
+				// #ifdef APP-NVUE
+				if (!this.scrollable && (this.single || this.moreText)) {
+					dom.getComponentRect(this.$refs['textBox'], (res) => {
+						this.wrapWidth = res.size.width
+					})
+				}
+				// #endif
+			},
+			loopAnimation() {
+				// #ifdef APP-NVUE
+				animation.transition(this.$refs['animationEle'], {
+					styles: {
+						transform: `translateX(0px)`
+					},
+					duration: 0
+				}, () => {
+					if (!this.stopAnimation) {
+						animation.transition(this.$refs['animationEle'], {
+							styles: {
+								transform: `translateX(-${this.textWidth}px)`
+							},
+							duration: this.textWidth / this.speed * 1000,
+							timingFunction: 'linear',
+							delay: 0
+						}, () => {
+							if (!this.stopAnimation) {
+								this.loopAnimation()
+							}
+						});
+					}
+				});
+				// #endif
+			},
+			clickMore() {
+				this.$emit('getmore')
+			},
+			close() {
+				this.show = false;
+				this.$emit('close')
+			},
+			onClick() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uni-noticebar {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		width: 100%;
+		box-sizing: border-box;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		padding: 10px 12px;
+		margin-bottom: 10px;
+	}
+
+	.uni-cursor-point {
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-noticebar-close {
+		margin-left: 8px;
+		margin-right: 5px;
+	}
+
+	.uni-noticebar-icon {
+		margin-right: 5px;
+	}
+
+	.uni-noticebar__content-wrapper {
+		flex: 1;
+		flex-direction: column;
+		overflow: hidden;
+	}
+
+	.uni-noticebar__content-wrapper--single {
+		/* #ifndef APP-NVUE */
+		line-height: 18px;
+		/* #endif */
+	}
+
+	.uni-noticebar__content-wrapper--single,
+	.uni-noticebar__content-wrapper--scrollable {
+		flex-direction: row;
+	}
+
+	/* #ifndef APP-NVUE */
+	.uni-noticebar__content-wrapper--scrollable {
+		position: relative;
+	}
+
+	/* #endif */
+
+	.uni-noticebar__content--scrollable {
+		/* #ifdef APP-NVUE */
+		flex: 0;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		flex: 1;
+		display: block;
+		overflow: hidden;
+		/* #endif */
+	}
+
+	.uni-noticebar__content--single {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		flex: none;
+		width: 100%;
+		justify-content: center;
+		/* #endif */
+	}
+
+	.uni-noticebar__content-text {
+		font-size: 14px;
+		line-height: 18px;
+		/* #ifndef APP-NVUE */
+		word-break: break-all;
+		/* #endif */
+	}
+
+	.uni-noticebar__content-text--single {
+		/* #ifdef APP-NVUE */
+		lines: 1;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		display: block;
+		width: 100%;
+		white-space: nowrap;
+		/* #endif */
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.uni-noticebar__content-text--scrollable {
+		/* #ifdef APP-NVUE */
+		lines: 1;
+		padding-left: 750rpx;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		position: absolute;
+		display: block;
+		height: 18px;
+		line-height: 18px;
+		white-space: nowrap;
+		padding-left: 100%;
+		animation: notice 10s 0s linear infinite both;
+		animation-play-state: paused;
+		/* #endif */
+	}
+
+	.uni-noticebar__more {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		flex-direction: row;
+		flex-wrap: nowrap;
+		align-items: center;
+		padding-left: 5px;
+	}
+
+	@keyframes notice {
+		100% {
+			transform: translate3d(-100%, 0, 0);
+		}
+	}
+</style>
diff --git a/uni_modules/uni-notice-bar/package.json b/uni_modules/uni-notice-bar/package.json
new file mode 100644
index 0000000..1e9762c
--- /dev/null
+++ b/uni_modules/uni-notice-bar/package.json
@@ -0,0 +1,87 @@
+{
+  "id": "uni-notice-bar",
+  "displayName": "uni-notice-bar 通告栏",
+  "version": "1.2.2",
+  "description": "NoticeBar 通告栏组件，常用于展示公告信息，可设为滚动公告",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "通告栏",
+    "公告",
+    "跑马灯"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+			"uni-icons"
+		],
+    "encrypt": [],
+    "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/uni_modules/uni-notice-bar/readme.md b/uni_modules/uni-notice-bar/readme.md
new file mode 100644
index 0000000..fb2ede2
--- /dev/null
+++ b/uni_modules/uni-notice-bar/readme.md
@@ -0,0 +1,13 @@
+
+
+## NoticeBar 通告栏
+> **组件名：uni-notice-bar**
+> 代码块： `uNoticeBar`
+
+
+通告栏组件 。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-notice-bar)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
diff --git a/uni_modules/uni-number-box/changelog.md b/uni_modules/uni-number-box/changelog.md
new file mode 100644
index 0000000..adf9221
--- /dev/null
+++ b/uni_modules/uni-number-box/changelog.md
@@ -0,0 +1,39 @@
+## 1.2.8（2024-04-26）
+- 修复 在vue2下H5黑边的bug
+## 1.2.7（2024-04-26）
+- 修复 在vue2手动输入后失焦导致清空数值的严重bug
+## 1.2.6（2024-02-22）
+- 新增 设置宽度属性width(单位：px)
+## 1.2.5（2024-02-21）
+- 修复 step步长小于1时，键盘类型为number的bug
+## 1.2.4（2024-02-02）
+- 修复 加减号垂直位置偏移样式问题
+## 1.2.3（2023-05-23）
+- 更新示例工程
+## 1.2.2（2023-05-08）
+- 修复 change 事件执行顺序错误的问题
+## 1.2.1（2021-11-22）
+- 修复 vue3中某些scss变量无法找到的问题
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-number-box](https://uniapp.dcloud.io/component/uniui/uni-number-box)
+## 1.1.2（2021-11-09） 
+- 新增 提供组件设计资源，组件样式调整
+## 1.1.1（2021-07-30）
+- 优化 vue3下事件警告的问题
+## 1.1.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.7（2021-05-12）
+- 新增 组件示例地址
+## 1.0.6（2021-04-20）
+- 修复 uni-number-box 浮点数运算不精确的 bug
+- 修复 uni-number-box change 事件触发不正确的 bug
+- 新增 uni-number-box v-model 双向绑定
+## 1.0.5（2021-02-05）
+- 调整为uni_modules目录规范
+
+## 1.0.7（2021-02-05）
+- 调整为uni_modules目录规范
+- 新增 支持 v-model
+- 新增 支持 focus、blur 事件
+- 新增 支持 PC 端
diff --git a/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue b/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue
new file mode 100644
index 0000000..4e203cc
--- /dev/null
+++ b/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue
@@ -0,0 +1,232 @@
+<template>
+	<view class="uni-numbox">
+		<view @click="_calcValue('minus')" class="uni-numbox__minus uni-numbox-btns" :style="{background}">
+			<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }"
+				:style="{color}">-</text>
+		</view>
+		<input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value"
+			:type="step<1?'digit':'number'" v-model="inputValue" :style="{background, color, width:widthWithPx}" />
+		<view @click="_calcValue('plus')" class="uni-numbox__plus uni-numbox-btns" :style="{background}">
+			<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }"
+				:style="{color}">+</text>
+		</view>
+	</view>
+</template>
+<script>
+	/**
+	 * NumberBox 数字输入框
+	 * @description 带加减按钮的数字输入框
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=31
+	 * @property {Number} value 输入框当前值
+	 * @property {Number} min 最小值
+	 * @property {Number} max 最大值
+	 * @property {Number} step 每次点击改变的间隔大小
+	 * @property {String} background 背景色
+	 * @property {String} color 字体颜色（前景色）
+	 * @property {Number} width 输入框宽度(单位:px)
+	 * @property {Boolean} disabled = [true|false] 是否为禁用状态
+	 * @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value
+	 * @event {Function} focus 输入框聚焦时触发的事件，参数为 event 对象
+	 * @event {Function} blur 输入框失焦时触发的事件，参数为 event 对象
+	 */
+
+	export default {
+		name: "UniNumberBox",
+		emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'],
+		props: {
+			value: {
+				type: [Number, String],
+				default: 1
+			},
+			modelValue: {
+				type: [Number, String],
+				default: 1
+			},
+			min: {
+				type: Number,
+				default: 0
+			},
+			max: {
+				type: Number,
+				default: 100
+			},
+			step: {
+				type: Number,
+				default: 1
+			},
+			background: {
+				type: String,
+				default: '#f5f5f5'
+			},
+			color: {
+				type: String,
+				default: '#333'
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			width: {
+				type: Number,
+				default: 40,
+			}
+		},
+		data() {
+			return {
+				inputValue: 0
+			};
+		},
+		watch: {
+			value(val) {
+				this.inputValue = +val;
+			},
+			modelValue(val) {
+				this.inputValue = +val;
+			}
+		},
+		computed: {
+			widthWithPx() {
+				return this.width + 'px';
+			}
+		},
+		created() {
+			if (this.value === 1) {
+				this.inputValue = +this.modelValue;
+			}
+			if (this.modelValue === 1) {
+				this.inputValue = +this.value;
+			}
+		},
+		methods: {
+			_calcValue(type) {
+				if (this.disabled) {
+					return;
+				}
+				const scale = this._getDecimalScale();
+				let value = this.inputValue * scale;
+				let step = this.step * scale;
+				if (type === "minus") {
+					value -= step;
+					if (value < (this.min * scale)) {
+						return;
+					}
+					if (value > (this.max * scale)) {
+						value = this.max * scale
+					}
+				}
+
+				if (type === "plus") {
+					value += step;
+					if (value > (this.max * scale)) {
+						return;
+					}
+					if (value < (this.min * scale)) {
+						value = this.min * scale
+					}
+				}
+
+				this.inputValue = (value / scale).toFixed(String(scale).length - 1);
+				// TODO vue2 兼容
+				this.$emit("input", +this.inputValue);
+				// TODO vue3 兼容
+				this.$emit("update:modelValue", +this.inputValue);
+				this.$emit("change", +this.inputValue);
+			},
+			_getDecimalScale() {
+
+				let scale = 1;
+				// 浮点型
+				if (~~this.step !== this.step) {
+					scale = Math.pow(10, String(this.step).split(".")[1].length);
+				}
+				return scale;
+			},
+			_onBlur(event) {
+				this.$emit('blur', event)
+				let value = event.detail.value;
+				if (isNaN(value)) {
+					this.inputValue = this.value;
+					return;
+				}
+				value = +value;
+				if (value > this.max) {
+					value = this.max;
+				} else if (value < this.min) {
+					value = this.min;
+				}
+				const scale = this._getDecimalScale();
+				this.inputValue = value.toFixed(String(scale).length - 1);
+				this.$emit("input", +this.inputValue);
+				this.$emit("update:modelValue", +this.inputValue);
+				this.$emit("change", +this.inputValue);
+			},
+			_onFocus(event) {
+				this.$emit('focus', event)
+			}
+		}
+	};
+</script>
+<style lang="scss">
+	$box-height: 26px;
+	$bg: #f5f5f5;
+	$br: 2px;
+	$color: #333;
+
+	.uni-numbox {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-numbox-btns {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		padding: 0 8px;
+		background-color: $bg;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-numbox__value {
+		margin: 0 2px;
+		background-color: $bg;
+		width: 40px;
+		height: $box-height;
+		text-align: center;
+		font-size: 14px;
+		border-width: 0;
+		color: $color;
+	}
+
+	.uni-numbox__minus {
+		border-top-left-radius: $br;
+		border-bottom-left-radius: $br;
+	}
+
+	.uni-numbox__plus {
+		border-top-right-radius: $br;
+		border-bottom-right-radius: $br;
+	}
+
+	.uni-numbox--text {
+		// fix nvue
+		line-height: 20px;
+		margin-bottom: 2px;
+		font-size: 20px;
+		font-weight: 300;
+		color: $color;
+	}
+
+	.uni-numbox .uni-numbox--disabled {
+		color: #c0c0c0 !important;
+		/* #ifdef H5 */
+		cursor: not-allowed;
+		/* #endif */
+	}
+</style>
diff --git a/uni_modules/uni-number-box/package.json b/uni_modules/uni-number-box/package.json
new file mode 100644
index 0000000..4ac9047
--- /dev/null
+++ b/uni_modules/uni-number-box/package.json
@@ -0,0 +1,83 @@
+{
+  "id": "uni-number-box",
+  "displayName": "uni-number-box 数字输入框",
+  "version": "1.2.8",
+  "description": "NumberBox 带加减按钮的数字输入框组件，用户可以控制每次点击增加的数值，支持小数。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "数字输入框"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "n"
+      },
+      "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-number-box/readme.md b/uni_modules/uni-number-box/readme.md
new file mode 100644
index 0000000..affc56f
--- /dev/null
+++ b/uni_modules/uni-number-box/readme.md
@@ -0,0 +1,13 @@
+
+
+## NumberBox 数字输入框
+> **组件名：uni-number-box**
+> 代码块： `uNumberBox`
+
+
+带加减按钮的数字输入框。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-number-box)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
diff --git a/uni_modules/uni-pagination/changelog.md b/uni_modules/uni-pagination/changelog.md
new file mode 100644
index 0000000..2e94adc
--- /dev/null
+++ b/uni_modules/uni-pagination/changelog.md
@@ -0,0 +1,27 @@
+## 1.2.4（2022-09-19）
+- 修复，未对主题色设置默认色，导致未引入 uni-scss 变量文件报错。
+- 修复，未对移动端当前页文字做主题色适配。
+## 1.2.3（2022-09-15）
+- 修复未使用 uni-scss 主题色的 bug。
+## 1.2.2（2022-07-06）
+- 修复 es 语言 i18n 错误
+## 1.2.1（2021-11-22）
+- 修复 vue3中某些scss变量无法找到的问题
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-pagination](https://uniapp.dcloud.io/component/uniui/uni-pagination)
+## 1.1.2（2021-10-08）
+- 修复 current 、value 属性未监听，导致高亮样式失效的 bug
+## 1.1.1（2021-08-20）
+- 新增 支持国际化
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.7（2021-05-12）
+- 新增 组件示例地址
+## 1.0.6（2021-04-12）
+- 新增 PC 和 移动端适配不同的 ui 
+## 1.0.5（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+
+## 1.0.4（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-pagination/components/uni-pagination/i18n/en.json b/uni_modules/uni-pagination/components/uni-pagination/i18n/en.json
new file mode 100644
index 0000000..d6e2897
--- /dev/null
+++ b/uni_modules/uni-pagination/components/uni-pagination/i18n/en.json
@@ -0,0 +1,5 @@
+{
+	"uni-pagination.prevText": "prev",
+	"uni-pagination.nextText": "next",
+	"uni-pagination.piecePerPage": "piece/page"
+}
diff --git a/uni_modules/uni-pagination/components/uni-pagination/i18n/es.json b/uni_modules/uni-pagination/components/uni-pagination/i18n/es.json
new file mode 100644
index 0000000..604a113
--- /dev/null
+++ b/uni_modules/uni-pagination/components/uni-pagination/i18n/es.json
@@ -0,0 +1,5 @@
+{
+	"uni-pagination.prevText": "anterior",
+	"uni-pagination.nextText": "prxima",
+	"uni-pagination.piecePerPage": "Art��culo/P��gina"
+}
diff --git a/uni_modules/uni-pagination/components/uni-pagination/i18n/fr.json b/uni_modules/uni-pagination/components/uni-pagination/i18n/fr.json
new file mode 100644
index 0000000..a7a0c77
--- /dev/null
+++ b/uni_modules/uni-pagination/components/uni-pagination/i18n/fr.json
@@ -0,0 +1,5 @@
+{
+	"uni-pagination.prevText": "précédente",
+	"uni-pagination.nextText": "suivante",
+	"uni-pagination.piecePerPage": "Articles/Pages"
+}
diff --git a/uni_modules/uni-pagination/components/uni-pagination/i18n/index.js b/uni_modules/uni-pagination/components/uni-pagination/i18n/index.js
new file mode 100644
index 0000000..2469dd0
--- /dev/null
+++ b/uni_modules/uni-pagination/components/uni-pagination/i18n/index.js
@@ -0,0 +1,12 @@
+import en from './en.json'
+import es from './es.json'
+import fr from './fr.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	es,
+	fr,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
+}
diff --git a/uni_modules/uni-pagination/components/uni-pagination/i18n/zh-Hans.json b/uni_modules/uni-pagination/components/uni-pagination/i18n/zh-Hans.json
new file mode 100644
index 0000000..782bbe4
--- /dev/null
+++ b/uni_modules/uni-pagination/components/uni-pagination/i18n/zh-Hans.json
@@ -0,0 +1,5 @@
+{
+	"uni-pagination.prevText": "上一页",
+	"uni-pagination.nextText": "下一页",
+	"uni-pagination.piecePerPage": "条/页"
+}
diff --git a/uni_modules/uni-pagination/components/uni-pagination/i18n/zh-Hant.json b/uni_modules/uni-pagination/components/uni-pagination/i18n/zh-Hant.json
new file mode 100644
index 0000000..180fddb
--- /dev/null
+++ b/uni_modules/uni-pagination/components/uni-pagination/i18n/zh-Hant.json
@@ -0,0 +1,5 @@
+{
+	"uni-pagination.prevText": "上一頁",
+	"uni-pagination.nextText": "下一頁",
+	"uni-pagination.piecePerPage": "條/頁"
+}
diff --git a/uni_modules/uni-pagination/components/uni-pagination/uni-pagination.vue b/uni_modules/uni-pagination/components/uni-pagination/uni-pagination.vue
new file mode 100644
index 0000000..5305b5f
--- /dev/null
+++ b/uni_modules/uni-pagination/components/uni-pagination/uni-pagination.vue
@@ -0,0 +1,465 @@
+<template>
+	<view class="uni-pagination">
+		<!-- #ifndef MP -->
+		<picker v-if="showPageSize === true || showPageSize === 'true'" class="select-picker" mode="selector"
+			:value="pageSizeIndex" :range="pageSizeRange" @change="pickerChange" @cancel="pickerClick"
+			@click.native="pickerClick">
+			<button type="default" size="mini" :plain="true">
+				<text>{{pageSizeRange[pageSizeIndex]}} {{piecePerPage}}</text>
+				<uni-icons class="select-picker-icon" type="arrowdown" size="12" color="#999"></uni-icons>
+			</button>
+		</picker>
+		<!-- #endif -->
+		<!-- #ifndef APP-NVUE -->
+		<view class="uni-pagination__total is-phone-hide">共 {{ total }} 条</view>
+		<!-- #endif -->
+		<view class="uni-pagination__btn"
+			:class="currentIndex === 1 ? 'uni-pagination--disabled' : 'uni-pagination--enabled'"
+			:hover-class="currentIndex === 1 ? '' : 'uni-pagination--hover'" :hover-start-time="20"
+			:hover-stay-time="70" @click="clickLeft">
+			<template v-if="showIcon === true || showIcon === 'true'">
+				<uni-icons color="#666" size="16" type="left" />
+			</template>
+			<template v-else>
+				<text class="uni-pagination__child-btn">{{ prevPageText }}</text>
+			</template>
+		</view>
+		<view class="uni-pagination__num uni-pagination__num-flex-none">
+			<view class="uni-pagination__num-current">
+				<text class="uni-pagination__num-current-text is-pc-hide current-index-text">{{ currentIndex }}</text>
+				<text class="uni-pagination__num-current-text is-pc-hide">/{{ maxPage || 0 }}</text>
+				<!-- #ifndef APP-NVUE -->
+				<view v-for="(item, index) in paper" :key="index" :class="{ 'page--active': item === currentIndex }"
+					class="uni-pagination__num-tag tag--active is-phone-hide" @click.top="selectPage(item, index)">
+					<text>{{ item }}</text>
+				</view>
+				<!-- #endif -->
+
+			</view>
+		</view>
+		<view class="uni-pagination__btn"
+			:class="currentIndex >= maxPage ? 'uni-pagination--disabled' : 'uni-pagination--enabled'"
+			:hover-class="currentIndex === maxPage ? '' : 'uni-pagination--hover'" :hover-start-time="20"
+			:hover-stay-time="70" @click="clickRight">
+			<template v-if="showIcon === true || showIcon === 'true'">
+				<uni-icons color="#666" size="16" type="right" />
+			</template>
+			<template v-else>
+				<text class="uni-pagination__child-btn">{{ nextPageText }}</text>
+			</template>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * Pagination 分页器
+	 * @description 分页器组件，用于展示页码、请求数据等
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=32
+	 * @property {String} prevText 左侧按钮文字
+	 * @property {String} nextText 右侧按钮文字
+	 * @property {String} piecePerPageText 条/页文字
+	 * @property {Number} current 当前页
+	 * @property {Number} total 数据总量
+	 * @property {Number} pageSize 每页数据量
+	 * @property {Boolean} showIcon = [true|false] 是否以 icon 形式展示按钮
+	 * @property {Boolean} showPageSize = [true|false] 是否展示每页条数
+	 * @property {Array} pageSizeRange = [20, 50, 100, 500] 每页条数选框
+	 * @event {Function} change 点击页码按钮时触发 ,e={type,current} current为当前页，type值为：next/prev，表示点击的是上一页还是下一个
+	 * * @event {Function} pageSizeChange 当前每页条数改变时触发 ,e={pageSize} pageSize 为当前所选的每页条数
+	 */
+
+	import {
+		initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import messages from './i18n/index.js'
+	const {
+		t
+	} = initVueI18n(messages)
+	export default {
+		name: 'UniPagination',
+		emits: ['update:modelValue', 'input', 'change', 'pageSizeChange'],
+		props: {
+			value: {
+				type: [Number, String],
+				default: 1
+			},
+			modelValue: {
+				type: [Number, String],
+				default: 1
+			},
+			prevText: {
+				type: String,
+			},
+			nextText: {
+				type: String,
+			},
+			piecePerPageText: {
+				type: String
+			},
+			current: {
+				type: [Number, String],
+				default: 1
+			},
+			total: {
+				// 数据总量
+				type: [Number, String],
+				default: 0
+			},
+			pageSize: {
+				// 每页数据量
+				type: [Number, String],
+				default: 10
+			},
+			showIcon: {
+				// 是否以 icon 形式展示按钮
+				type: [Boolean, String],
+				default: false
+			},
+			showPageSize: {
+				// 是否以 icon 形式展示按钮
+				type: [Boolean, String],
+				default: false
+			},
+			pagerCount: {
+				type: Number,
+				default: 7
+			},
+			pageSizeRange: {
+				type: Array,
+				default: () => [20, 50, 100, 500]
+			}
+		},
+		data() {
+			return {
+				pageSizeIndex: 0,
+				currentIndex: 1,
+				paperData: [],
+				pickerShow: false
+			}
+		},
+		computed: {
+			piecePerPage() {
+				return this.piecePerPageText || t('uni-pagination.piecePerPage')
+			},
+			prevPageText() {
+				return this.prevText || t('uni-pagination.prevText')
+			},
+			nextPageText() {
+				return this.nextText || t('uni-pagination.nextText')
+			},
+			maxPage() {
+				let maxPage = 1
+				let total = Number(this.total)
+				let pageSize = Number(this.pageSize)
+				if (total && pageSize) {
+					maxPage = Math.ceil(total / pageSize)
+				}
+				return maxPage
+			},
+			paper() {
+				const num = this.currentIndex
+				// TODO 最大页数
+				const pagerCount = this.pagerCount
+				// const total = 181
+				const total = this.total
+				const pageSize = this.pageSize
+				let totalArr = []
+				let showPagerArr = []
+				let pagerNum = Math.ceil(total / pageSize)
+				for (let i = 0; i < pagerNum; i++) {
+					totalArr.push(i + 1)
+				}
+				showPagerArr.push(1)
+				const totalNum = totalArr[totalArr.length - (pagerCount + 1) / 2]
+				totalArr.forEach((item, index) => {
+					if ((pagerCount + 1) / 2 >= num) {
+						if (item < pagerCount + 1 && item > 1) {
+							showPagerArr.push(item)
+						}
+					} else if (num + 2 <= totalNum) {
+						if (item > num - (pagerCount + 1) / 2 && item < num + (pagerCount + 1) / 2) {
+							showPagerArr.push(item)
+						}
+					} else {
+						if ((item > num - (pagerCount + 1) / 2 || pagerNum - pagerCount < item) && item < totalArr[
+								totalArr.length - 1]) {
+							showPagerArr.push(item)
+						}
+					}
+				})
+				if (pagerNum > pagerCount) {
+					if ((pagerCount + 1) / 2 >= num) {
+						showPagerArr[showPagerArr.length - 1] = '...'
+					} else if (num + 2 <= totalNum) {
+						showPagerArr[1] = '...'
+						showPagerArr[showPagerArr.length - 1] = '...'
+					} else {
+						showPagerArr[1] = '...'
+					}
+					showPagerArr.push(totalArr[totalArr.length - 1])
+				} else {
+					if ((pagerCount + 1) / 2 >= num) {} else if (num + 2 <= totalNum) {} else {
+						showPagerArr.shift()
+						showPagerArr.push(totalArr[totalArr.length - 1])
+					}
+				}
+
+				return showPagerArr
+			}
+		},
+		watch: {
+			current: {
+				immediate: true,
+				handler(val, old) {
+					if (val < 1) {
+						this.currentIndex = 1
+					} else {
+						this.currentIndex = val
+					}
+				}
+			},
+			value: {
+				immediate: true,
+				handler(val) {
+					if (Number(this.current) !== 1) return
+					if (val < 1) {
+						this.currentIndex = 1
+					} else {
+						this.currentIndex = val
+					}
+				}
+			},
+			pageSizeIndex(val) {
+				this.$emit('pageSizeChange', this.pageSizeRange[val])
+			}
+		},
+		methods: {
+			pickerChange(e) {
+				this.pageSizeIndex = e.detail.value
+				this.pickerClick()
+			},
+			pickerClick() {
+				// #ifdef H5
+				const body = document.querySelector('body')
+				if (!body) return
+
+				const className = 'uni-pagination-picker-show'
+				this.pickerShow = !this.pickerShow
+
+				if (this.pickerShow) {
+					body.classList.add(className)
+				} else {
+					setTimeout(() => body.classList.remove(className), 300)
+				}
+				// #endif
+			},
+			// 选择标签
+			selectPage(e, index) {
+				if (parseInt(e)) {
+					this.currentIndex = e
+					this.change('current')
+				} else {
+					let pagerNum = Math.ceil(this.total / this.pageSize)
+					// let pagerNum = Math.ceil(181 / this.pageSize)
+					// 上一页
+					if (index <= 1) {
+						if (this.currentIndex - 5 > 1) {
+							this.currentIndex -= 5
+						} else {
+							this.currentIndex = 1
+						}
+						return
+					}
+					// 下一页
+					if (index >= 6) {
+						if (this.currentIndex + 5 > pagerNum) {
+							this.currentIndex = pagerNum
+						} else {
+							this.currentIndex += 5
+						}
+						return
+					}
+				}
+			},
+			clickLeft() {
+				if (Number(this.currentIndex) === 1) {
+					return
+				}
+				this.currentIndex -= 1
+				this.change('prev')
+			},
+			clickRight() {
+				if (Number(this.currentIndex) >= this.maxPage) {
+					return
+				}
+				this.currentIndex += 1
+				this.change('next')
+			},
+			change(e) {
+				this.$emit('input', this.currentIndex)
+				this.$emit('update:modelValue', this.currentIndex)
+				this.$emit('change', {
+					type: e,
+					current: this.currentIndex
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	$uni-primary: #2979ff !default;
+	.uni-pagination {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		position: relative;
+		overflow: hidden;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.uni-pagination__total {
+		font-size: 14px;
+		color: #999;
+		margin-right: 15px;
+	}
+
+	.uni-pagination__btn {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		cursor: pointer;
+		/* #endif */
+		padding: 0 8px;
+		line-height: 30px;
+		font-size: 12px;
+		position: relative;
+		background-color: #F0F0F0;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		text-align: center;
+		border-radius: 5px;
+		// border-width: 1px;
+		// border-style: solid;
+		// border-color: $uni-border-color;
+	}
+
+	.uni-pagination__child-btn {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		font-size: 12px;
+		position: relative;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		text-align: center;
+		color: #666;
+		font-size: 12px;
+	}
+
+	.uni-pagination__num {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		height: 30px;
+		line-height: 30px;
+		font-size: 12px;
+		color: #666;
+		margin: 0 5px;
+	}
+
+	.uni-pagination__num-tag {
+		/* #ifdef H5 */
+		cursor: pointer;
+		min-width: 30px;
+		/* #endif */
+		margin: 0 5px;
+		height: 30px;
+		text-align: center;
+		line-height: 30px;
+		// border: 1px red solid;
+		color: #999;
+		border-radius: 4px;
+		// border-width: 1px;
+		// border-style: solid;
+		// border-color: $uni-border-color;
+	}
+
+	.uni-pagination__num-current {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-pagination__num-current-text {
+		font-size: 15px;
+	}
+
+	.current-index-text{
+		color: $uni-primary;
+	}
+
+	.uni-pagination--enabled {
+		color: #333333;
+		opacity: 1;
+	}
+
+	.uni-pagination--disabled {
+		opacity: 0.5;
+		/* #ifdef H5 */
+		cursor: default;
+		/* #endif */
+	}
+
+	.uni-pagination--hover {
+		color: rgba(0, 0, 0, 0.6);
+		background-color: #eee;
+	}
+
+	.tag--active:hover {
+		color: $uni-primary;
+	}
+
+	.page--active {
+		color: #fff;
+		background-color: $uni-primary;
+	}
+
+	.page--active:hover {
+		color: #fff;
+	}
+
+	/* #ifndef APP-NVUE */
+	.is-pc-hide {
+		display: block;
+	}
+
+	.is-phone-hide {
+		display: none;
+	}
+
+	@media screen and (min-width: 450px) {
+		.is-pc-hide {
+			display: none;
+		}
+
+		.is-phone-hide {
+			display: block;
+		}
+
+		.uni-pagination__num-flex-none {
+			flex: none;
+		}
+	}
+
+	/* #endif */
+</style>
diff --git a/uni_modules/uni-pagination/package.json b/uni_modules/uni-pagination/package.json
new file mode 100644
index 0000000..862d5ab
--- /dev/null
+++ b/uni_modules/uni-pagination/package.json
@@ -0,0 +1,83 @@
+{
+  "id": "uni-pagination",
+  "displayName": "uni-pagination 分页器",
+  "version": "1.2.4",
+  "description": "Pagination 分页器组件，用于展示页码、请求数据等。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "分页器",
+    "页码"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss","uni-icons"],
+    "encrypt": [],
+    "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-pagination/readme.md b/uni_modules/uni-pagination/readme.md
new file mode 100644
index 0000000..97ea1d6
--- /dev/null
+++ b/uni_modules/uni-pagination/readme.md
@@ -0,0 +1,11 @@
+
+
+## Pagination 分页器
+> **组件名：uni-pagination**
+> 代码块： `uPagination`
+
+
+分页器组件，用于展示页码、请求数据等。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-pagination)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
diff --git a/uni_modules/uni-popup/changelog.md b/uni_modules/uni-popup/changelog.md
new file mode 100644
index 0000000..decd775
--- /dev/null
+++ b/uni_modules/uni-popup/changelog.md
@@ -0,0 +1,84 @@
+## 1.9.1（2024-04-02）
+- 修复 uni-popup-dialog vue3下使用value无法进行绑定的bug(双向绑定兼容旧写法)
+## 1.9.0（2024-03-28）
+- 修复 uni-popup-dialog 双向绑定时初始化逻辑修正
+## 1.8.9（2024-03-20）
+- 修复 uni-popup-dialog 数据输入时修正为双向绑定
+## 1.8.8（2024-02-20）
+- 修复 uni-popup 在微信小程序下出现文字向上闪动的bug
+## 1.8.7（2024-02-02）
+- 新增 uni-popup-dialog 新增属性focus：input模式下，是否自动自动聚焦
+## 1.8.6（2024-01-30）
+- 新增 uni-popup-dialog 新增属性maxLength:限制输入框字数
+## 1.8.5（2024-01-26）
+- 新增 uni-popup-dialog 新增属性showClose:控制关闭按钮的显示
+## 1.8.4（2023-11-15）
+- 新增 uni-popup 支持uni-app-x 注意暂时仅支持 `maskClick` `@open` `@close`
+## 1.8.3（2023-04-17）
+- 修复 uni-popup 重复打开时的 bug
+## 1.8.2（2023-02-02）
+- uni-popup-dialog 组件新增 inputType 属性
+## 1.8.1（2022-12-01）
+- 修复 nvue 下 v-show 报错
+## 1.8.0（2022-11-29）
+- 优化 主题样式
+## 1.7.9（2022-04-02）
+- 修复 弹出层内部无法滚动的bug
+## 1.7.8（2022-03-28）
+- 修复 小程序中高度错误的bug
+## 1.7.7（2022-03-17）
+- 修复 快速调用open出现问题的Bug
+## 1.7.6（2022-02-14）
+- 修复 safeArea 属性不能设置为false的bug
+## 1.7.5（2022-01-19）
+- 修复 isMaskClick 失效的bug
+## 1.7.4（2022-01-19）
+- 新增 cancelText \ confirmText 属性 ，可自定义文本
+- 新增 maskBackgroundColor 属性 ，可以修改蒙版颜色
+- 优化 maskClick属性 更新为 isMaskClick ，解决微信小程序警告的问题
+## 1.7.3（2022-01-13）
+- 修复 设置 safeArea 属性不生效的bug
+## 1.7.2（2021-11-26）
+- 优化 组件示例
+## 1.7.1（2021-11-26）
+- 修复 vuedoc 文字错误
+## 1.7.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-popup](https://uniapp.dcloud.io/component/uniui/uni-popup)
+## 1.6.2（2021-08-24）
+- 新增 支持国际化
+## 1.6.1（2021-07-30）
+- 优化 vue3下事件警告的问题
+## 1.6.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.5.0（2021-06-23）
+- 新增 mask-click 遮罩层点击事件
+## 1.4.5（2021-06-22）
+- 修复 nvue 平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
+## 1.4.4（2021-06-18）
+- 修复 H5平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
+## 1.4.3（2021-06-08）
+- 修复 错误的 watch 字段
+- 修复 safeArea 属性不生效的问题
+- 修复 点击内容，再点击遮罩无法关闭的Bug
+## 1.4.2（2021-05-12）
+- 新增 组件示例地址
+## 1.4.1（2021-04-29）
+- 修复 组件内放置 input 、textarea 组件，无法聚焦的问题
+## 1.4.0 （2021-04-29）
+- 新增 type 属性的 left\right 值，支持左右弹出
+- 新增 open(String:type) 方法参数 ，可以省略 type 属性 ，直接传入类型打开指定弹窗
+- 新增 backgroundColor 属性，可定义主窗口背景色,默认不显示背景色
+- 新增 safeArea 属性，是否适配底部安全区
+- 修复 App\h5\微信小程序底部安全区占位不对的Bug
+- 修复 App 端弹出等待的Bug
+- 优化 提升低配设备性能，优化动画卡顿问题
+- 优化 更简单的组件自定义方式
+## 1.2.9（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+## 1.2.8（2021-02-05）
+- 调整为uni_modules目录规范
+## 1.2.7（2021-02-05）
+- 调整为uni_modules目录规范
+- 新增 支持 PC 端
+- 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端
diff --git a/uni_modules/uni-popup/components/uni-popup-dialog/keypress.js b/uni_modules/uni-popup/components/uni-popup-dialog/keypress.js
new file mode 100644
index 0000000..6ef26a2
--- /dev/null
+++ b/uni_modules/uni-popup/components/uni-popup-dialog/keypress.js
@@ -0,0 +1,45 @@
+// #ifdef H5
+export default {
+  name: 'Keypress',
+  props: {
+    disable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    const keyNames = {
+      esc: ['Esc', 'Escape'],
+      tab: 'Tab',
+      enter: 'Enter',
+      space: [' ', 'Spacebar'],
+      up: ['Up', 'ArrowUp'],
+      left: ['Left', 'ArrowLeft'],
+      right: ['Right', 'ArrowRight'],
+      down: ['Down', 'ArrowDown'],
+      delete: ['Backspace', 'Delete', 'Del']
+    }
+    const listener = ($event) => {
+      if (this.disable) {
+        return
+      }
+      const keyName = Object.keys(keyNames).find(key => {
+        const keyName = $event.key
+        const value = keyNames[key]
+        return value === keyName || (Array.isArray(value) && value.includes(keyName))
+      })
+      if (keyName) {
+        // 避免和其他按键事件冲突
+        setTimeout(() => {
+          this.$emit(keyName, {})
+        }, 0)
+      }
+    }
+    document.addEventListener('keyup', listener)
+    this.$once('hook:beforeDestroy', () => {
+      document.removeEventListener('keyup', listener)
+    })
+  },
+	render: () => {}
+}
+// #endif
diff --git a/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue b/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue
new file mode 100644
index 0000000..08707d4
--- /dev/null
+++ b/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue
@@ -0,0 +1,316 @@
+<template>
+	<view class="uni-popup-dialog">
+		<view class="uni-dialog-title">
+			<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{titleText}}</text>
+		</view>
+		<view v-if="mode === 'base'" class="uni-dialog-content">
+			<slot>
+				<text class="uni-dialog-content-text">{{content}}</text>
+			</slot>
+		</view>
+		<view v-else class="uni-dialog-content">
+			<slot>
+				<input class="uni-dialog-input" :maxlength="maxlength" v-model="val" :type="inputType"
+					:placeholder="placeholderText" :focus="focus">
+			</slot>
+		</view>
+		<view class="uni-dialog-button-group">
+			<view class="uni-dialog-button" v-if="showClose" @click="closeDialog">
+				<text class="uni-dialog-button-text">{{closeText}}</text>
+			</view>
+			<view class="uni-dialog-button" :class="showClose?'uni-border-left':''" @click="onOk">
+				<text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	import popup from '../uni-popup/popup.js'
+	import {
+		initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import messages from '../uni-popup/i18n/index.js'
+	const {
+		t
+	} = initVueI18n(messages)
+	/**
+	 * PopUp 弹出层-对话框样式
+	 * @description 弹出层-对话框样式
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
+	 * @property {String} value input 模式下的默认值
+	 * @property {String} placeholder input 模式下输入提示
+	 * @property {Boolean} focus input模式下是否自动聚焦，默认为true
+	 * @property {String} type = [success|warning|info|error] 主题样式
+	 *  @value success 成功
+	 * 	@value warning 提示
+	 * 	@value info 消息
+	 * 	@value error 错误
+	 * @property {String} mode = [base|input] 模式、
+	 * 	@value base 基础对话框
+	 * 	@value input 可输入对话框
+	 * @showClose {Boolean} 是否显示关闭按钮
+	 * @property {String} content 对话框内容
+	 * @property {Boolean} beforeClose 是否拦截取消事件
+	 * @property {Number} maxlength 输入
+	 * @event {Function} confirm 点击确认按钮触发
+	 * @event {Function} close 点击取消按钮触发
+	 */
+
+	export default {
+		name: "uniPopupDialog",
+		mixins: [popup],
+		emits: ['confirm', 'close', 'update:modelValue', 'input'],
+		props: {
+			inputType: {
+				type: String,
+				default: 'text'
+			},
+			showClose: {
+				type: Boolean,
+				default: true
+			},
+			// #ifdef VUE2
+			value: {
+				type: [String, Number],
+				default: ''
+			},
+			// #endif
+			// #ifdef VUE3
+			modelValue: {
+				type: [Number, String],
+				default: ''
+			},
+			// #endif
+
+
+			placeholder: {
+				type: [String, Number],
+				default: ''
+			},
+			type: {
+				type: String,
+				default: 'error'
+			},
+			mode: {
+				type: String,
+				default: 'base'
+			},
+			title: {
+				type: String,
+				default: ''
+			},
+			content: {
+				type: String,
+				default: ''
+			},
+			beforeClose: {
+				type: Boolean,
+				default: false
+			},
+			cancelText: {
+				type: String,
+				default: ''
+			},
+			confirmText: {
+				type: String,
+				default: ''
+			},
+			maxlength: {
+				type: Number,
+				default: -1,
+			},
+			focus: {
+				type: Boolean,
+				default: true,
+			}
+		},
+		data() {
+			return {
+				dialogType: 'error',
+				val: ""
+			}
+		},
+		computed: {
+			okText() {
+				return this.confirmText || t("uni-popup.ok")
+			},
+			closeText() {
+				return this.cancelText || t("uni-popup.cancel")
+			},
+			placeholderText() {
+				return this.placeholder || t("uni-popup.placeholder")
+			},
+			titleText() {
+				return this.title || t("uni-popup.title")
+			}
+		},
+		watch: {
+			type(val) {
+				this.dialogType = val
+			},
+			mode(val) {
+				if (val === 'input') {
+					this.dialogType = 'info'
+				}
+			},
+			value(val) {
+				if (this.maxlength != -1 && this.mode === 'input') {
+					this.val = val.slice(0, this.maxlength);
+				} else {
+					this.val = val
+				}
+			},
+			val(val) {
+				// #ifdef VUE2
+				// TODO 兼容 vue2
+				this.$emit('input', val);
+				// #endif
+				// #ifdef VUE3
+				// TODO　兼容　vue3
+				this.$emit('update:modelValue', val);
+				// #endif
+			}
+		},
+		created() {
+			// 对话框遮罩不可点击
+			this.popup.disableMask()
+			// this.popup.closeMask()
+			if (this.mode === 'input') {
+				this.dialogType = 'info'
+				this.val = this.value;
+				// #ifdef VUE3
+				this.val = this.modelValue;
+				// #endif
+			} else {
+				this.dialogType = this.type
+			}
+		},
+		methods: {
+			/**
+			 * 点击确认按钮
+			 */
+			onOk() {
+				if (this.mode === 'input') {
+					this.$emit('confirm', this.val)
+				} else {
+					this.$emit('confirm')
+				}
+				if (this.beforeClose) return
+				this.popup.close()
+			},
+			/**
+			 * 点击取消按钮
+			 */
+			closeDialog() {
+				this.$emit('close')
+				if (this.beforeClose) return
+				this.popup.close()
+			},
+			close() {
+				this.popup.close()
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.uni-popup-dialog {
+		width: 300px;
+		border-radius: 11px;
+		background-color: #fff;
+	}
+
+	.uni-dialog-title {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: center;
+		padding-top: 25px;
+	}
+
+	.uni-dialog-title-text {
+		font-size: 16px;
+		font-weight: 500;
+	}
+
+	.uni-dialog-content {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		padding: 20px;
+	}
+
+	.uni-dialog-content-text {
+		font-size: 14px;
+		color: #6C6C6C;
+	}
+
+	.uni-dialog-button-group {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		border-top-color: #f5f5f5;
+		border-top-style: solid;
+		border-top-width: 1px;
+	}
+
+	.uni-dialog-button {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+
+		flex: 1;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		height: 45px;
+	}
+
+	.uni-border-left {
+		border-left-color: #f0f0f0;
+		border-left-style: solid;
+		border-left-width: 1px;
+	}
+
+	.uni-dialog-button-text {
+		font-size: 16px;
+		color: #333;
+	}
+
+	.uni-button-color {
+		color: #007aff;
+	}
+
+	.uni-dialog-input {
+		flex: 1;
+		font-size: 14px;
+		border: 1px #eee solid;
+		height: 40px;
+		padding: 0 10px;
+		border-radius: 5px;
+		color: #555;
+	}
+
+	.uni-popup__success {
+		color: #4cd964;
+	}
+
+	.uni-popup__warn {
+		color: #f0ad4e;
+	}
+
+	.uni-popup__error {
+		color: #dd524d;
+	}
+
+	.uni-popup__info {
+		color: #909399;
+	}
+</style>
diff --git a/uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue b/uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue
new file mode 100644
index 0000000..91370a8
--- /dev/null
+++ b/uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue
@@ -0,0 +1,143 @@
+<template>
+	<view class="uni-popup-message">
+		<view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type">
+			<slot>
+				<text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text>
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	import popup from '../uni-popup/popup.js'
+	/**
+	 * PopUp 弹出层-消息提示
+	 * @description 弹出层-消息提示
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
+	 * @property {String} type = [success|warning|info|error] 主题样式
+	 *  @value success 成功
+	 * 	@value warning 提示
+	 * 	@value info 消息
+	 * 	@value error 错误
+	 * @property {String} message 消息提示文字
+	 * @property {String} duration 显示时间，设置为 0 则不会自动关闭
+	 */
+
+	export default {
+		name: 'uniPopupMessage',
+		mixins:[popup],
+		props: {
+			/**
+			 * 主题 success/warning/info/error	  默认 success
+			 */
+			type: {
+				type: String,
+				default: 'success'
+			},
+			/**
+			 * 消息文字
+			 */
+			message: {
+				type: String,
+				default: ''
+			},
+			/**
+			 * 显示时间，设置为 0 则不会自动关闭
+			 */
+			duration: {
+				type: Number,
+				default: 3000
+			},
+			maskShow:{
+				type:Boolean,
+				default:false
+			}
+		},
+		data() {
+			return {}
+		},
+		created() {
+			this.popup.maskShow = this.maskShow
+			this.popup.messageChild = this
+		},
+		methods: {
+			timerClose(){
+				if(this.duration === 0) return
+				clearTimeout(this.timer) 
+				this.timer = setTimeout(()=>{
+					this.popup.close()
+				},this.duration)
+			}
+		}
+	}
+</script>
+<style lang="scss" >
+	.uni-popup-message {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: center;
+	}
+
+	.uni-popup-message__box {
+		background-color: #e1f3d8;
+		padding: 10px 15px;
+		border-color: #eee;
+		border-style: solid;
+		border-width: 1px;
+		flex: 1;
+	}
+
+	@media screen and (min-width: 500px) {
+		.fixforpc-width {
+			margin-top: 20px;
+			border-radius: 4px;
+			flex: none;
+			min-width: 380px;
+			/* #ifndef APP-NVUE */
+			max-width: 50%;
+			/* #endif */
+			/* #ifdef APP-NVUE */
+			max-width: 500px;
+			/* #endif */
+		}
+	}
+
+	.uni-popup-message-text {
+		font-size: 14px;
+		padding: 0;
+	}
+
+	.uni-popup__success {
+		background-color: #e1f3d8;
+	}
+
+	.uni-popup__success-text {
+		color: #67C23A;
+	}
+
+	.uni-popup__warn {
+		background-color: #faecd8;
+	}
+
+	.uni-popup__warn-text {
+		color: #E6A23C;
+	}
+
+	.uni-popup__error {
+		background-color: #fde2e2;
+	}
+
+	.uni-popup__error-text {
+		color: #F56C6C;
+	}
+
+	.uni-popup__info {
+		background-color: #F2F6FC;
+	}
+
+	.uni-popup__info-text {
+		color: #909399;
+	}
+</style>
diff --git a/uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue b/uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue
new file mode 100644
index 0000000..f7e667c
--- /dev/null
+++ b/uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue
@@ -0,0 +1,187 @@
+<template>
+	<view class="uni-popup-share">
+		<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view>
+		<view class="uni-share-content">
+			<view class="uni-share-content-box">
+				<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
+					<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
+					<text class="uni-share-text">{{item.text}}</text>
+				</view>
+
+			</view>
+		</view>
+		<view class="uni-share-button-box">
+			<button class="uni-share-button" @click="close">{{cancelText}}</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	import popup from '../uni-popup/popup.js'
+	import {
+	initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import messages from '../uni-popup/i18n/index.js'
+	const {	t	} = initVueI18n(messages)
+	export default {
+		name: 'UniPopupShare',
+		mixins:[popup],
+		emits:['select'],
+		props: {
+			title: {
+				type: String,
+				default: ''
+			},
+			beforeClose: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				bottomData: [{
+						text: '微信',
+						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
+						name: 'wx'
+					},
+					{
+						text: '支付宝',
+						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
+						name: 'ali'
+					},
+					{
+						text: 'QQ',
+						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
+						name: 'qq'
+					},
+					{
+						text: '新浪',
+						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
+						name: 'sina'
+					},
+					// {
+					// 	text: '百度',
+					// 	icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
+					// 	name: 'copy'
+					// },
+					// {
+					// 	text: '其他',
+					// 	icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
+					// 	name: 'more'
+					// }
+				]
+			}
+		},
+		created() {},
+		computed: {
+			cancelText() {
+				return t("uni-popup.cancel")
+			},
+		shareTitleText() {
+				return this.title || t("uni-popup.shareTitle")
+			}
+		},
+		methods: {
+			/**
+			 * 选择内容
+			 */
+			select(item, index) {
+				this.$emit('select', {
+					item,
+					index
+				})
+				this.close()
+
+			},
+			/**
+			 * 关闭窗口
+			 */
+			close() {
+				if(this.beforeClose) return
+				this.popup.close()
+			}
+		}
+	}
+</script>
+<style lang="scss" >
+	.uni-popup-share {
+		background-color: #fff;
+		border-top-left-radius: 11px;
+		border-top-right-radius: 11px;
+	}
+	.uni-share-title {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		height: 40px;
+	}
+	.uni-share-title-text {
+		font-size: 14px;
+		color: #666;
+	}
+	.uni-share-content {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: center;
+		padding-top: 10px;
+	}
+
+	.uni-share-content-box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		flex-wrap: wrap;
+		width: 360px;
+	}
+
+	.uni-share-content-item {
+		width: 90px;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: center;
+		padding: 10px 0;
+		align-items: center;
+	}
+
+	.uni-share-content-item:active {
+		background-color: #f5f5f5;
+	}
+
+	.uni-share-image {
+		width: 30px;
+		height: 30px;
+	}
+
+	.uni-share-text {
+		margin-top: 10px;
+		font-size: 14px;
+		color: #3B4144;
+	}
+
+	.uni-share-button-box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		padding: 10px 15px;
+	}
+
+	.uni-share-button {
+		flex: 1;
+		border-radius: 50px;
+		color: #666;
+		font-size: 16px;
+	}
+
+	.uni-share-button::after {
+		border-radius: 50px;
+	}
+</style>
diff --git a/uni_modules/uni-popup/components/uni-popup/i18n/en.json b/uni_modules/uni-popup/components/uni-popup/i18n/en.json
new file mode 100644
index 0000000..7f1bd06
--- /dev/null
+++ b/uni_modules/uni-popup/components/uni-popup/i18n/en.json
@@ -0,0 +1,7 @@
+{
+	"uni-popup.cancel": "cancel",
+	"uni-popup.ok": "ok",
+	"uni-popup.placeholder": "pleace enter",
+	"uni-popup.title": "Hint",
+	"uni-popup.shareTitle": "Share to"
+}
diff --git a/uni_modules/uni-popup/components/uni-popup/i18n/index.js b/uni_modules/uni-popup/components/uni-popup/i18n/index.js
new file mode 100644
index 0000000..de7509c
--- /dev/null
+++ b/uni_modules/uni-popup/components/uni-popup/i18n/index.js
@@ -0,0 +1,8 @@
+import en from './en.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
+}
diff --git a/uni_modules/uni-popup/components/uni-popup/i18n/zh-Hans.json b/uni_modules/uni-popup/components/uni-popup/i18n/zh-Hans.json
new file mode 100644
index 0000000..5e3003c
--- /dev/null
+++ b/uni_modules/uni-popup/components/uni-popup/i18n/zh-Hans.json
@@ -0,0 +1,7 @@
+{
+	"uni-popup.cancel": "取消",
+	"uni-popup.ok": "确定",
+	"uni-popup.placeholder": "请输入",
+		"uni-popup.title": "提示",
+		"uni-popup.shareTitle": "分享到"
+}
diff --git a/uni_modules/uni-popup/components/uni-popup/i18n/zh-Hant.json b/uni_modules/uni-popup/components/uni-popup/i18n/zh-Hant.json
new file mode 100644
index 0000000..13e39eb
--- /dev/null
+++ b/uni_modules/uni-popup/components/uni-popup/i18n/zh-Hant.json
@@ -0,0 +1,7 @@
+{
+	"uni-popup.cancel": "取消",
+	"uni-popup.ok": "確定",
+	"uni-popup.placeholder": "請輸入",
+	"uni-popup.title": "提示",
+	"uni-popup.shareTitle": "分享到"
+}
diff --git a/uni_modules/uni-popup/components/uni-popup/keypress.js b/uni_modules/uni-popup/components/uni-popup/keypress.js
new file mode 100644
index 0000000..62dda46
--- /dev/null
+++ b/uni_modules/uni-popup/components/uni-popup/keypress.js
@@ -0,0 +1,45 @@
+// #ifdef H5
+export default {
+  name: 'Keypress',
+  props: {
+    disable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    const keyNames = {
+      esc: ['Esc', 'Escape'],
+      tab: 'Tab',
+      enter: 'Enter',
+      space: [' ', 'Spacebar'],
+      up: ['Up', 'ArrowUp'],
+      left: ['Left', 'ArrowLeft'],
+      right: ['Right', 'ArrowRight'],
+      down: ['Down', 'ArrowDown'],
+      delete: ['Backspace', 'Delete', 'Del']
+    }
+    const listener = ($event) => {
+      if (this.disable) {
+        return
+      }
+      const keyName = Object.keys(keyNames).find(key => {
+        const keyName = $event.key
+        const value = keyNames[key]
+        return value === keyName || (Array.isArray(value) && value.includes(keyName))
+      })
+      if (keyName) {
+        // 避免和其他按键事件冲突
+        setTimeout(() => {
+          this.$emit(keyName, {})
+        }, 0)
+      }
+    }
+    document.addEventListener('keyup', listener)
+    // this.$once('hook:beforeDestroy', () => {
+    //   document.removeEventListener('keyup', listener)
+    // })
+  },
+	render: () => {}
+}
+// #endif
diff --git a/uni_modules/uni-popup/components/uni-popup/popup.js b/uni_modules/uni-popup/components/uni-popup/popup.js
new file mode 100644
index 0000000..c4e5781
--- /dev/null
+++ b/uni_modules/uni-popup/components/uni-popup/popup.js
@@ -0,0 +1,26 @@
+
+export default {
+	data() {
+		return {
+			
+		}
+	},
+	created(){
+		this.popup = this.getParent()
+	},
+	methods:{
+		/**
+		 * 获取父元素实例
+		 */
+		getParent(name = 'uniPopup') {
+			let parent = this.$parent;
+			let parentName = parent.$options.name;
+			while (parentName !== name) {
+				parent = parent.$parent;
+				if (!parent) return false
+				parentName = parent.$options.name;
+			}
+			return parent;
+		},
+	}
+}
diff --git a/uni_modules/uni-popup/components/uni-popup/uni-popup.uvue b/uni_modules/uni-popup/components/uni-popup/uni-popup.uvue
new file mode 100644
index 0000000..5eb8d5b
--- /dev/null
+++ b/uni_modules/uni-popup/components/uni-popup/uni-popup.uvue
@@ -0,0 +1,90 @@
+<template>
+  <view class="popup-root" v-if="isOpen" v-show="isShow" @click="clickMask">
+    <view @click.stop>
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  type CloseCallBack = ()=> void;
+  let closeCallBack:CloseCallBack = () :void => {};
+  export default {
+    emits:["close","clickMask"],
+    data() {
+      return {
+        isShow:false,
+        isOpen:false
+      }
+    },
+    props: {
+      maskClick: {
+        type: Boolean,
+        default: true
+      },
+    },
+    watch: {
+      // 设置show = true 时，如果没有 open 需要设置为 open
+      isShow:{
+        handler(isShow) {
+          // console.log("isShow",isShow)
+          if(isShow && this.isOpen == false){
+            this.isOpen = true
+          }
+        },
+        immediate:true
+      },
+      // 设置isOpen = true 时，如果没有 isShow 需要设置为 isShow
+      isOpen:{
+        handler(isOpen) {
+          // console.log("isOpen",isOpen)
+          if(isOpen && this.isShow == false){
+            this.isShow = true
+          }
+        },
+        immediate:true
+      }
+    },
+    methods:{
+      open(){
+        // ...funs : CloseCallBack[]
+        // if(funs.length > 0){
+        //   closeCallBack = funs[0]
+        // }
+        this.isOpen = true;
+      },
+      clickMask(){
+        if(this.maskClick == true){
+          this.$emit('clickMask')
+          this.close()
+        }
+      },
+      close(): void{
+        this.isOpen = false;
+        this.$emit('close')
+        closeCallBack()
+      },
+      hiden(){
+        this.isShow = false
+      },
+      show(){
+        this.isShow = true
+      }
+    }
+  }
+</script>
+
+<style>
+.popup-root {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 750rpx;
+  height: 100%;
+  flex: 1;
+  background-color: rgba(0, 0, 0, 0.3);
+  justify-content: center;
+  align-items: center;
+  z-index: 99;
+}
+</style>
\ No newline at end of file
diff --git a/uni_modules/uni-popup/components/uni-popup/uni-popup.vue b/uni_modules/uni-popup/components/uni-popup/uni-popup.vue
new file mode 100644
index 0000000..8349e99
--- /dev/null
+++ b/uni_modules/uni-popup/components/uni-popup/uni-popup.vue
@@ -0,0 +1,503 @@
+<template>
+	<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']">
+		<view @touchstart="touchstart">
+			<uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass"
+				:duration="duration" :show="showTrans" @click="onTap" />
+			<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration"
+				:show="showTrans" @click="onTap">
+				<view class="uni-popup__wrapper" :style="getStyles" :class="[popupstyle]" @click="clear">
+					<slot />
+				</view>
+			</uni-transition>
+		</view>
+		<!-- #ifdef H5 -->
+		<keypress v-if="maskShow" @esc="onTap" />
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+	// #ifdef H5
+	import keypress from './keypress.js'
+	// #endif
+
+	/**
+	 * PopUp 弹出层
+	 * @description 弹出层组件，为了解决遮罩弹层的问题
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
+	 * @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
+	 * 	@value top 顶部弹出
+	 * 	@value center 中间弹出
+	 * 	@value bottom 底部弹出
+	 * 	@value left		左侧弹出
+	 * 	@value right  右侧弹出
+	 * 	@value message 消息提示
+	 * 	@value dialog 对话框
+	 * 	@value share 底部分享示例
+	 * @property {Boolean} animation = [true|false] 是否开启动画
+	 * @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃)
+	 * @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
+	 * @property {String}  backgroundColor 主窗口背景色
+	 * @property {String}  maskBackgroundColor 蒙版颜色
+	 * @property {String}  borderRadius 设置圆角(左上、右上、右下和左下) 示例:"10px 10px 10px 10px"
+	 * @property {Boolean} safeArea		   是否适配底部安全区
+	 * @event {Function} change 打开关闭弹窗触发，e={show: false}
+	 * @event {Function} maskClick 点击遮罩触发
+	 */
+
+	export default {
+		name: 'uniPopup',
+		components: {
+			// #ifdef H5
+			keypress
+			// #endif
+		},
+		emits: ['change', 'maskClick'],
+		props: {
+			// 开启动画
+			animation: {
+				type: Boolean,
+				default: true
+			},
+			// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
+			// message: 消息提示 ; dialog : 对话框
+			type: {
+				type: String,
+				default: 'center'
+			},
+			// maskClick
+			isMaskClick: {
+				type: Boolean,
+				default: null
+			},
+			// TODO 2 个版本后废弃属性 ，使用 isMaskClick
+			maskClick: {
+				type: Boolean,
+				default: null
+			},
+			backgroundColor: {
+				type: String,
+				default: 'none'
+			},
+			safeArea: {
+				type: Boolean,
+				default: true
+			},
+			maskBackgroundColor: {
+				type: String,
+				default: 'rgba(0, 0, 0, 0.4)'
+			},
+			borderRadius:{
+				type: String,
+			}
+		},
+
+		watch: {
+			/**
+			 * 监听type类型
+			 */
+			type: {
+				handler: function(type) {
+					if (!this.config[type]) return
+					this[this.config[type]](true)
+				},
+				immediate: true
+			},
+			isDesktop: {
+				handler: function(newVal) {
+					if (!this.config[newVal]) return
+					this[this.config[this.type]](true)
+				},
+				immediate: true
+			},
+			/**
+			 * 监听遮罩是否可点击
+			 * @param {Object} val
+			 */
+			maskClick: {
+				handler: function(val) {
+					this.mkclick = val
+				},
+				immediate: true
+			},
+			isMaskClick: {
+				handler: function(val) {
+					this.mkclick = val
+				},
+				immediate: true
+			},
+			// H5 下禁止底部滚动
+			showPopup(show) {
+				// #ifdef H5
+				// fix by mehaotian 处理 h5 滚动穿透的问题
+				document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible'
+				// #endif
+			}
+		},
+		data() {
+			return {
+				duration: 300,
+				ani: [],
+				showPopup: false,
+				showTrans: false,
+				popupWidth: 0,
+				popupHeight: 0,
+				config: {
+					top: 'top',
+					bottom: 'bottom',
+					center: 'center',
+					left: 'left',
+					right: 'right',
+					message: 'top',
+					dialog: 'center',
+					share: 'bottom'
+				},
+				maskClass: {
+					position: 'fixed',
+					bottom: 0,
+					top: 0,
+					left: 0,
+					right: 0,
+					backgroundColor: 'rgba(0, 0, 0, 0.4)'
+				},
+				transClass: {
+					backgroundColor: 'transparent',
+					borderRadius: this.borderRadius || "0",
+					position: 'fixed',
+					left: 0,
+					right: 0
+				},
+				maskShow: true,
+				mkclick: true,
+				popupstyle: 'top'
+			}
+		},
+		computed: {
+			getStyles() {
+				let res = { backgroundColor: this.bg };
+				if (this.borderRadius || "0") {
+					res = Object.assign(res, { borderRadius: this.borderRadius })
+				}
+				return res;
+			},
+			isDesktop() {
+				return this.popupWidth >= 500 && this.popupHeight >= 500
+			},
+			bg() {
+				if (this.backgroundColor === '' || this.backgroundColor === 'none') {
+					return 'transparent'
+				}
+				return this.backgroundColor
+			}
+		},
+		mounted() {
+			const fixSize = () => {
+				const {
+					windowWidth,
+					windowHeight,
+					windowTop,
+					safeArea,
+					screenHeight,
+					safeAreaInsets
+				} = uni.getSystemInfoSync()
+				this.popupWidth = windowWidth
+				this.popupHeight = windowHeight + (windowTop || 0)
+				// TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复
+				if (safeArea && this.safeArea) {
+					// #ifdef MP-WEIXIN
+					this.safeAreaInsets = screenHeight - safeArea.bottom
+					// #endif
+					// #ifndef MP-WEIXIN
+					this.safeAreaInsets = safeAreaInsets.bottom
+					// #endif
+				} else {
+					this.safeAreaInsets = 0
+				}
+			}
+			fixSize()
+			// #ifdef H5
+			// window.addEventListener('resize', fixSize)
+			// this.$once('hook:beforeDestroy', () => {
+			// 	window.removeEventListener('resize', fixSize)
+			// })
+			// #endif
+		},
+		// #ifndef VUE3
+		// TODO vue2
+		destroyed() {
+			this.setH5Visible()
+		},
+		// #endif
+		// #ifdef VUE3
+		// TODO vue3
+		unmounted() {
+			this.setH5Visible()
+		},
+		// #endif
+		activated() {
+   	  this.setH5Visible(!this.showPopup);
+    },
+    deactivated() {
+      this.setH5Visible(true);
+    },
+		created() {
+			// this.mkclick =  this.isMaskClick || this.maskClick
+			if (this.isMaskClick === null && this.maskClick === null) {
+				this.mkclick = true
+			} else {
+				this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick
+			}
+			if (this.animation) {
+				this.duration = 300
+			} else {
+				this.duration = 0
+			}
+			// TODO 处理 message 组件生命周期异常的问题
+			this.messageChild = null
+			// TODO 解决头条冒泡的问题
+			this.clearPropagation = false
+			this.maskClass.backgroundColor = this.maskBackgroundColor
+		},
+		methods: {
+			setH5Visible(visible = true) {
+				// #ifdef H5
+				// fix by mehaotian 处理 h5 滚动穿透的问题
+				document.getElementsByTagName('body')[0].style.overflow =  visible ? "visible" : "hidden";
+				// #endif
+			},
+			/**
+			 * 公用方法，不显示遮罩层
+			 */
+			closeMask() {
+				this.maskShow = false
+			},
+			/**
+			 * 公用方法，遮罩层禁止点击
+			 */
+			disableMask() {
+				this.mkclick = false
+			},
+			// TODO nvue 取消冒泡
+			clear(e) {
+				// #ifndef APP-NVUE
+				e.stopPropagation()
+				// #endif
+				this.clearPropagation = true
+			},
+
+			open(direction) {
+				// fix by mehaotian 处理快速打开关闭的情况
+				if (this.showPopup) {
+					return
+				}
+				let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
+				if (!(direction && innerType.indexOf(direction) !== -1)) {
+					direction = this.type
+				}
+				if (!this.config[direction]) {
+					console.error('缺少类型：', direction)
+					return
+				}
+				this[this.config[direction]]()
+				this.$emit('change', {
+					show: true,
+					type: direction
+				})
+			},
+			close(type) {
+				this.showTrans = false
+				this.$emit('change', {
+					show: false,
+					type: this.type
+				})
+				clearTimeout(this.timer)
+				// // 自定义关闭事件
+				// this.customOpen && this.customClose()
+				this.timer = setTimeout(() => {
+					this.showPopup = false
+				}, 300)
+			},
+			// TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
+			touchstart() {
+				this.clearPropagation = false
+			},
+
+			onTap() {
+				if (this.clearPropagation) {
+					// fix by mehaotian 兼容 nvue
+					this.clearPropagation = false
+					return
+				}
+				this.$emit('maskClick')
+				if (!this.mkclick) return
+				this.close()
+			},
+			/**
+			 * 顶部弹出样式处理
+			 */
+			top(type) {
+				this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top'
+				this.ani = ['slide-top']
+				this.transClass = {
+					position: 'fixed',
+					left: 0,
+					right: 0,
+					backgroundColor: this.bg,
+					borderRadius:this.borderRadius || "0"
+				}
+				// TODO 兼容 type 属性 ，后续会废弃
+				if (type) return
+				this.showPopup = true
+				this.showTrans = true
+				this.$nextTick(() => {
+					if (this.messageChild && this.type === 'message') {
+						this.messageChild.timerClose()
+					}
+				})
+			},
+			/**
+			 * 底部弹出样式处理
+			 */
+			bottom(type) {
+				this.popupstyle = 'bottom'
+				this.ani = ['slide-bottom']
+				this.transClass = {
+					position: 'fixed',
+					left: 0,
+					right: 0,
+					bottom: 0,
+					paddingBottom: this.safeAreaInsets + 'px',
+					backgroundColor: this.bg,
+					borderRadius:this.borderRadius || "0",
+				}
+				// TODO 兼容 type 属性 ，后续会废弃
+				if (type) return
+				this.showPopup = true
+				this.showTrans = true
+			},
+			/**
+			 * 中间弹出样式处理
+			 */
+			center(type) {
+				this.popupstyle = 'center'
+				//微信小程序下，组合动画会出现文字向上闪动问题，再此做特殊处理
+				// #ifdef MP-WEIXIN
+					this.ani = ['fade']
+				// #endif
+				// #ifndef MP-WEIXIN
+					this.ani = ['zoom-out', 'fade']
+				// #endif
+				this.transClass = {
+					position: 'fixed',
+					/* #ifndef APP-NVUE */
+					display: 'flex',
+					flexDirection: 'column',
+					/* #endif */
+					bottom: 0,
+					left: 0,
+					right: 0,
+					top: 0,
+					justifyContent: 'center',
+					alignItems: 'center',
+					borderRadius:this.borderRadius || "0"
+				}
+				// TODO 兼容 type 属性 ，后续会废弃
+				if (type) return
+				this.showPopup = true
+				this.showTrans = true
+			},
+			left(type) {
+				this.popupstyle = 'left'
+				this.ani = ['slide-left']
+				this.transClass = {
+					position: 'fixed',
+					left: 0,
+					bottom: 0,
+					top: 0,
+					backgroundColor: this.bg,
+					borderRadius:this.borderRadius || "0",
+					/* #ifndef APP-NVUE */
+					display: 'flex',
+					flexDirection: 'column'
+					/* #endif */
+				}
+				// TODO 兼容 type 属性 ，后续会废弃
+				if (type) return
+				this.showPopup = true
+				this.showTrans = true
+			},
+			right(type) {
+				this.popupstyle = 'right'
+				this.ani = ['slide-right']
+				this.transClass = {
+					position: 'fixed',
+					bottom: 0,
+					right: 0,
+					top: 0,
+					backgroundColor: this.bg,
+					borderRadius:this.borderRadius || "0",
+					/* #ifndef APP-NVUE */
+					display: 'flex',
+					flexDirection: 'column'
+					/* #endif */
+				}
+				// TODO 兼容 type 属性 ，后续会废弃
+				if (type) return
+				this.showPopup = true
+				this.showTrans = true
+			}
+		}
+	}
+</script>
+<style lang="scss">
+	.uni-popup {
+		position: fixed;
+		/* #ifndef APP-NVUE */
+		z-index: 99;
+
+		/* #endif */
+		&.top,
+		&.left,
+		&.right {
+			/* #ifdef H5 */
+			top: var(--window-top);
+			/* #endif */
+			/* #ifndef H5 */
+			top: 0;
+			/* #endif */
+		}
+
+		.uni-popup__wrapper {
+			/* #ifndef APP-NVUE */
+			display: block;
+			/* #endif */
+			position: relative;
+
+			/* iphonex 等安全区设置，底部安全区适配 */
+			/* #ifndef APP-NVUE */
+			// padding-bottom: constant(safe-area-inset-bottom);
+			// padding-bottom: env(safe-area-inset-bottom);
+			/* #endif */
+			&.left,
+			&.right {
+				/* #ifdef H5 */
+				padding-top: var(--window-top);
+				/* #endif */
+				/* #ifndef H5 */
+				padding-top: 0;
+				/* #endif */
+				flex: 1;
+			}
+		}
+	}
+
+	.fixforpc-z-index {
+		/* #ifndef APP-NVUE */
+		z-index: 999;
+		/* #endif */
+	}
+
+	.fixforpc-top {
+		top: 0;
+	}
+</style>
diff --git a/uni_modules/uni-popup/package.json b/uni_modules/uni-popup/package.json
new file mode 100644
index 0000000..3cfa384
--- /dev/null
+++ b/uni_modules/uni-popup/package.json
@@ -0,0 +1,88 @@
+{
+	"id": "uni-popup",
+	"displayName": "uni-popup 弹出层",
+	"version": "1.9.1",
+	"description": " Popup 组件，提供常用的弹层",
+	"keywords": [
+        "uni-ui",
+        "弹出层",
+        "弹窗",
+        "popup",
+        "弹框"
+    ],
+	"repository": "https://github.com/dcloudio/uni-ui",
+	"engines": {
+		"HBuilderX": ""
+	},
+	"directories": {
+		"example": "../../temps/example_temps"
+	},
+    "dcloudext": {
+        "sale": {
+			"regular": {
+				"price": "0.00"
+			},
+			"sourcecode": {
+				"price": "0.00"
+			}
+		},
+		"contact": {
+			"qq": ""
+		},
+		"declaration": {
+			"ads": "无",
+			"data": "无",
+			"permissions": "无"
+		},
+        "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+        "type": "component-vue"
+	},
+	"uni_modules": {
+		"dependencies": [
+			"uni-scss",
+			"uni-transition"
+		],
+		"encrypt": [],
+		"platforms": {
+			"cloud": {
+				"tcb": "y",
+                "aliyun": "y",
+                "alipay": "n"
+			},
+			"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": "y",
+					"Edge": "y",
+					"Firefox": "y",
+					"Safari": "y"
+				},
+				"小程序": {
+					"微信": "y",
+					"阿里": "y",
+					"百度": "y",
+					"字节跳动": "y",
+					"QQ": "y"
+				},
+				"快应用": {
+					"华为": "u",
+					"联盟": "u"
+                },
+                "Vue": {
+                    "vue2": "y",
+                    "vue3": "y"
+                }
+			}
+		}
+	}
+}
diff --git a/uni_modules/uni-popup/readme.md b/uni_modules/uni-popup/readme.md
new file mode 100644
index 0000000..fdad4b3
--- /dev/null
+++ b/uni_modules/uni-popup/readme.md
@@ -0,0 +1,17 @@
+
+
+## Popup 弹出层
+> **组件名：uni-popup**
+> 代码块： `uPopup`
+> 关联组件：`uni-transition`
+
+
+弹出层组件，在应用中弹出一个消息提示窗口、提示框等
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-popup)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
+
+
+
diff --git a/uni_modules/uni-rate/changelog.md b/uni_modules/uni-rate/changelog.md
new file mode 100644
index 0000000..8a98a61
--- /dev/null
+++ b/uni_modules/uni-rate/changelog.md
@@ -0,0 +1,25 @@
+## 1.3.1（2022-02-25）
+- 修复 条件判断 `NaN` 错误的 bug
+## 1.3.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-rate](https://uniapp.dcloud.io/component/uniui/uni-rate)
+## 1.2.2（2021-09-10）
+- 优化 默认值修改为 0 颗星
+## 1.2.1（2021-07-30）
+- 优化 vue3下事件警告的问题
+## 1.2.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.1.2（2021-05-12）
+- 新增 组件示例地址
+## 1.1.1（2021-04-21）
+- 修复 布局变化后 uni-rate  星星计算不准确的 bug
+- 优化 添加依赖 uni-icons, 导入 uni-rate 自动下载依赖
+## 1.1.0（2021-04-16）
+- 修复 uni-rate 属性 margin 值为 string 组件失效的 bug
+
+## 1.0.9（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+
+## 1.0.8（2021-02-05）
+- 调整为uni_modules目录规范
+- 支持 pc 端
diff --git a/uni_modules/uni-rate/components/uni-rate/uni-rate.vue b/uni_modules/uni-rate/components/uni-rate/uni-rate.vue
new file mode 100644
index 0000000..857f5f9
--- /dev/null
+++ b/uni_modules/uni-rate/components/uni-rate/uni-rate.vue
@@ -0,0 +1,361 @@
+<template>
+	<view>
+		<view ref="uni-rate" class="uni-rate">
+			<view class="uni-rate__icon" :class="{'uni-cursor-not-allowed': disabled}"
+				:style="{ 'margin-right': marginNumber + 'px' }" v-for="(star, index) in stars" :key="index"
+				@touchstart.stop="touchstart" @touchmove.stop="touchmove" @mousedown.stop="mousedown"
+				@mousemove.stop="mousemove" @mouseleave="mouseleave">
+				<uni-icons :color="color" :size="size" :type="isFill ? 'star-filled' : 'star'" />
+				<!-- #ifdef APP-NVUE -->
+				<view :style="{ width: star.activeWitch.replace('%','')*size/100+'px'}" class="uni-rate__icon-on">
+					<uni-icons style="text-align: left;" :color="disabled?'#ccc':activeColor" :size="size"
+						type="star-filled" />
+				</view>
+				<!-- #endif -->
+				<!-- #ifndef APP-NVUE -->
+				<view :style="{ width: star.activeWitch}" class="uni-rate__icon-on">
+					<uni-icons :color="disabled?disabledColor:activeColor" :size="size" type="star-filled" />
+				</view>
+				<!-- #endif -->
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	// #ifdef APP-NVUE
+	const dom = uni.requireNativePlugin('dom');
+	// #endif
+	/**
+	 * Rate 评分
+	 * @description 评分组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=33
+	 * @property {Boolean} 	isFill = [true|false] 		星星的类型，是否为实心类型, 默认为实心
+	 * @property {String} 	color 						未选中状态的星星颜色，默认为 "#ececec"
+	 * @property {String} 	activeColor 				选中状态的星星颜色，默认为 "#ffca3e"
+	 * @property {String} 	disabledColor 				禁用状态的星星颜色，默认为 "#c0c0c0"
+	 * @property {Number} 	size 						星星的大小
+	 * @property {Number} 	value/v-model 				当前评分
+	 * @property {Number} 	max 						最大评分评分数量，目前一分一颗星
+	 * @property {Number} 	margin 						星星的间距，单位 px
+	 * @property {Boolean} 	disabled = [true|false] 	是否为禁用状态，默认为 false
+	 * @property {Boolean} 	readonly = [true|false] 	是否为只读状态，默认为 false
+	 * @property {Boolean} 	allowHalf = [true|false] 	是否实现半星，默认为 false
+	 * @property {Boolean} 	touchable = [true|false] 	是否支持滑动手势，默认为 true
+	 * @event {Function} change 						uniRate 的 value 改变时触发事件，e={value:Number}
+	 */
+
+	export default {
+		name: "UniRate",
+		props: {
+			isFill: {
+				// 星星的类型，是否镂空
+				type: [Boolean, String],
+				default: true
+			},
+			color: {
+				// 星星未选中的颜色
+				type: String,
+				default: "#ececec"
+			},
+			activeColor: {
+				// 星星选中状态颜色
+				type: String,
+				default: "#ffca3e"
+			},
+			disabledColor: {
+				// 星星禁用状态颜色
+				type: String,
+				default: "#c0c0c0"
+			},
+			size: {
+				// 星星的大小
+				type: [Number, String],
+				default: 24
+			},
+			value: {
+				// 当前评分
+				type: [Number, String],
+				default: 0
+			},
+			modelValue: {
+				// 当前评分
+				type: [Number, String],
+				default: 0
+			},
+			max: {
+				// 最大评分
+				type: [Number, String],
+				default: 5
+			},
+			margin: {
+				// 星星的间距
+				type: [Number, String],
+				default: 0
+			},
+			disabled: {
+				// 是否可点击
+				type: [Boolean, String],
+				default: false
+			},
+			readonly: {
+				// 是否只读
+				type: [Boolean, String],
+				default: false
+			},
+			allowHalf: {
+				// 是否显示半星
+				type: [Boolean, String],
+				default: false
+			},
+			touchable: {
+				// 是否支持滑动手势
+				type: [Boolean, String],
+				default: true
+			}
+		},
+		data() {
+			return {
+				valueSync: "",
+				userMouseFristMove: true,
+				userRated: false,
+				userLastRate: 1
+			};
+		},
+		watch: {
+			value(newVal) {
+				this.valueSync = Number(newVal);
+			},
+			modelValue(newVal) {
+				this.valueSync = Number(newVal);
+			},
+		},
+		computed: {
+			stars() {
+				const value = this.valueSync ? this.valueSync : 0;
+				const starList = [];
+				const floorValue = Math.floor(value);
+				const ceilValue = Math.ceil(value);
+				for (let i = 0; i < this.max; i++) {
+					if (floorValue > i) {
+						starList.push({
+							activeWitch: "100%"
+						});
+					} else if (ceilValue - 1 === i) {
+						starList.push({
+							activeWitch: (value - floorValue) * 100 + "%"
+						});
+					} else {
+						starList.push({
+							activeWitch: "0"
+						});
+					}
+				}
+				return starList;
+			},
+
+			marginNumber() {
+				return Number(this.margin)
+			}
+		},
+		created() {
+			this.valueSync = Number(this.value || this.modelValue);
+			this._rateBoxLeft = 0
+			this._oldValue = null
+		},
+		mounted() {
+			setTimeout(() => {
+				this._getSize()
+			}, 100)
+			// #ifdef H5
+			this.PC = this.IsPC()
+			// #endif
+		},
+		methods: {
+			touchstart(e) {
+				// #ifdef H5
+				if (this.IsPC()) return
+				// #endif
+				if (this.readonly || this.disabled) return
+				const {
+					clientX,
+					screenX
+				} = e.changedTouches[0]
+				// TODO 做一下兼容，只有 Nvue 下才有 screenX，其他平台式 clientX
+				this._getRateCount(clientX || screenX)
+			},
+			touchmove(e) {
+				// #ifdef H5
+				if (this.IsPC()) return
+				// #endif
+				if (this.readonly || this.disabled || !this.touchable) return
+				const {
+					clientX,
+					screenX
+				} = e.changedTouches[0]
+				this._getRateCount(clientX || screenX)
+			},
+
+			/**
+			 * 兼容 PC @tian
+			 */
+
+			mousedown(e) {
+				// #ifdef H5
+				if (!this.IsPC()) return
+				if (this.readonly || this.disabled) return
+				const {
+					clientX,
+				} = e
+				this.userLastRate = this.valueSync
+				this._getRateCount(clientX)
+				this.userRated = true
+				// #endif
+			},
+			mousemove(e) {
+				// #ifdef H5
+				if (!this.IsPC()) return
+				if (this.userRated) return
+				if (this.userMouseFristMove) {
+					console.log('---mousemove----', this.valueSync);
+					this.userLastRate = this.valueSync
+					this.userMouseFristMove = false
+				}
+				if (this.readonly || this.disabled || !this.touchable) return
+				const {
+					clientX,
+				} = e
+				this._getRateCount(clientX)
+				// #endif
+			},
+			mouseleave(e) {
+				// #ifdef H5
+				if (!this.IsPC()) return
+				if (this.readonly || this.disabled || !this.touchable) return
+				if (this.userRated) {
+					this.userRated = false
+					return
+				}
+				this.valueSync = this.userLastRate
+				// #endif
+			},
+			// #ifdef H5
+			IsPC() {
+				var userAgentInfo = navigator.userAgent;
+				var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
+				var flag = true;
+				for (let v = 0; v < Agents.length - 1; v++) {
+					if (userAgentInfo.indexOf(Agents[v]) > 0) {
+						flag = false;
+						break;
+					}
+				}
+				return flag;
+			},
+			// #endif
+
+			/**
+			 * 获取星星个数
+			 */
+			_getRateCount(clientX) {
+				this._getSize()
+				const size = Number(this.size)
+				if (isNaN(size)) {
+					return new Error('size 属性只能设置为数字')
+				}
+				const rateMoveRange = clientX - this._rateBoxLeft
+				let index = parseInt(rateMoveRange / (size + this.marginNumber))
+				index = index < 0 ? 0 : index;
+				index = index > this.max ? this.max : index;
+				const range = parseInt(rateMoveRange - (size + this.marginNumber) * index);
+				let value = 0;
+				if (this._oldValue === index && !this.PC) return;
+				this._oldValue = index;
+				if (this.allowHalf) {
+					if (range > (size / 2)) {
+						value = index + 1
+					} else {
+						value = index + 0.5
+					}
+				} else {
+					value = index + 1
+				}
+
+				value = Math.max(0.5, Math.min(value, this.max))
+				this.valueSync = value
+				this._onChange()
+			},
+
+			/**
+			 * 触发动态修改
+			 */
+			_onChange() {
+
+				this.$emit("input", this.valueSync);
+				this.$emit("update:modelValue", this.valueSync);
+				this.$emit("change", {
+					value: this.valueSync
+				});
+			},
+			/**
+			 * 获取星星距离屏幕左侧距离
+			 */
+			_getSize() {
+				// #ifndef APP-NVUE
+				uni.createSelectorQuery()
+					.in(this)
+					.select('.uni-rate')
+					.boundingClientRect()
+					.exec(ret => {
+						if (ret) {
+							this._rateBoxLeft = ret[0].left
+						}
+					})
+				// #endif
+				// #ifdef APP-NVUE
+				dom.getComponentRect(this.$refs['uni-rate'], (ret) => {
+					const size = ret.size
+					if (size) {
+						this._rateBoxLeft = size.left
+					}
+				})
+				// #endif
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	.uni-rate {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		line-height: 1;
+		font-size: 0;
+		flex-direction: row;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-rate__icon {
+		position: relative;
+		line-height: 1;
+		font-size: 0;
+	}
+
+	.uni-rate__icon-on {
+		overflow: hidden;
+		position: absolute;
+		top: 0;
+		left: 0;
+		line-height: 1;
+		text-align: left;
+	}
+
+	.uni-cursor-not-allowed {
+		/* #ifdef H5 */
+		cursor: not-allowed !important;
+		/* #endif */
+	}
+</style>
diff --git a/uni_modules/uni-rate/package.json b/uni_modules/uni-rate/package.json
new file mode 100644
index 0000000..64e8e33
--- /dev/null
+++ b/uni_modules/uni-rate/package.json
@@ -0,0 +1,88 @@
+{
+  "id": "uni-rate",
+  "displayName": "uni-rate 评分",
+  "version": "1.3.1",
+  "description": "Rate 评分组件，可自定义评分星星图标的大小、间隔、评分数。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "评分"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+			"uni-icons"
+		],
+    "encrypt": [],
+    "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/uni_modules/uni-rate/readme.md b/uni_modules/uni-rate/readme.md
new file mode 100644
index 0000000..eae7b5c
--- /dev/null
+++ b/uni_modules/uni-rate/readme.md
@@ -0,0 +1,12 @@
+
+
+## Rate 评分
+> **组件名：uni-rate**
+> 代码块： `uRate`
+> 关联组件：`uni-icons`
+
+
+评分组件，多用于购买商品后，对商品进行评价等场景
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-rate)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/uni_modules/uni-row/changelog.md b/uni_modules/uni-row/changelog.md
new file mode 100644
index 0000000..5b465bc
--- /dev/null
+++ b/uni_modules/uni-row/changelog.md
@@ -0,0 +1,10 @@
+## 1.0.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-row](https://uniapp.dcloud.io/component/uniui/uni-row)
+## 0.1.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 0.0.4（2021-05-12）
+- 新增 组件示例地址
+## 0.0.3（2021-02-05）
+- 调整为uni_modules目录规范
+- 新增uni-row组件
diff --git a/uni_modules/uni-row/components/uni-col/uni-col.vue b/uni_modules/uni-row/components/uni-col/uni-col.vue
new file mode 100644
index 0000000..84e2deb
--- /dev/null
+++ b/uni_modules/uni-row/components/uni-col/uni-col.vue
@@ -0,0 +1,317 @@
+<template>
+	<!-- #ifndef APP-NVUE -->
+	<view :class="['uni-col', sizeClass, pointClassList]" :style="{
+		paddingLeft:`${Number(gutter)}rpx`,
+		paddingRight:`${Number(gutter)}rpx`,
+	}">
+		<slot></slot>
+	</view>
+	<!-- #endif -->
+	<!-- #ifdef APP-NVUE -->
+	<!-- 在nvue上，类名样式不生效，换为style -->
+	<!-- 设置right正值失效，设置 left 负值 -->
+	<view :class="['uni-col']" :style="{
+		paddingLeft:`${Number(gutter)}rpx`,
+		paddingRight:`${Number(gutter)}rpx`,
+		width:`${nvueWidth}rpx`,
+		position:'relative',
+		marginLeft:`${marginLeft}rpx`,
+		left:`${right === 0 ? left : -right}rpx`
+	}">
+		<slot></slot>
+	</view>
+	<!-- #endif -->
+</template>
+
+<script>
+	/**
+	 * Col	布局-列
+	 * @description	搭配uni-row使用，构建布局。
+	 * @tutorial	https://ext.dcloud.net.cn/plugin?id=3958
+	 *
+	 * @property	{span} type = Number 栅格占据的列数
+	 * 						默认 24
+	 * @property	{offset} type = Number 栅格左侧的间隔格数
+	 * @property	{push} type = Number 栅格向右移动格数
+	 * @property	{pull} type = Number 栅格向左移动格数
+	 * @property	{xs} type = [Number, Object] <768px 响应式栅格数或者栅格属性对象
+	 * 						@description	Number时表示在此屏幕宽度下，栅格占据的列数。Object时可配置多个描述{span: 4, offset: 4}
+	 * @property	{sm} type = [Number, Object] ≥768px 响应式栅格数或者栅格属性对象
+	 * 						@description	Number时表示在此屏幕宽度下，栅格占据的列数。Object时可配置多个描述{span: 4, offset: 4}
+	 * @property	{md} type = [Number, Object] ≥992px 响应式栅格数或者栅格属性对象
+	 * 						@description	Number时表示在此屏幕宽度下，栅格占据的列数。Object时可配置多个描述{span: 4, offset: 4}
+	 * @property	{lg} type = [Number, Object] ≥1200px 响应式栅格数或者栅格属性对象
+	 * 						@description	Number时表示在此屏幕宽度下，栅格占据的列数。Object时可配置多个描述{span: 4, offset: 4}
+	 * @property	{xl} type = [Number, Object] ≥1920px 响应式栅格数或者栅格属性对象
+	 * 						@description	Number时表示在此屏幕宽度下，栅格占据的列数。Object时可配置多个描述{span: 4, offset: 4}
+	 */
+	const ComponentClass = 'uni-col';
+
+	// -1 默认值，因为在微信小程序端只给Number会有默认值0
+	export default {
+		name: 'uniCol',
+		// #ifdef MP-WEIXIN
+		options: {
+			virtualHost: true // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现
+		},
+		// #endif
+		props: {
+			span: {
+				type: Number,
+				default: 24
+			},
+			offset: {
+				type: Number,
+				default: -1
+			},
+			pull: {
+				type: Number,
+				default: -1
+			},
+			push: {
+				type: Number,
+				default: -1
+			},
+			xs: [Number, Object],
+			sm: [Number, Object],
+			md: [Number, Object],
+			lg: [Number, Object],
+			xl: [Number, Object]
+		},
+		data() {
+			return {
+				gutter: 0,
+				sizeClass: '',
+				parentWidth: 0,
+				nvueWidth: 0,
+				marginLeft: 0,
+				right: 0,
+				left: 0
+			}
+		},
+		created() {
+			// 字节小程序中，在computed中读取$parent为undefined
+			let parent = this.$parent;
+
+			while (parent && parent.$options.componentName !== 'uniRow') {
+				parent = parent.$parent;
+			}
+
+			this.updateGutter(parent.gutter)
+			parent.$watch('gutter', (gutter) => {
+				this.updateGutter(gutter)
+			})
+
+			// #ifdef APP-NVUE
+			this.updateNvueWidth(parent.width)
+			parent.$watch('width', (width) => {
+				this.updateNvueWidth(width)
+			})
+			// #endif
+		},
+		computed: {
+			sizeList() {
+				let {
+					span,
+					offset,
+					pull,
+					push
+				} = this;
+
+				return {
+					span,
+					offset,
+					pull,
+					push
+				}
+			},
+			// #ifndef APP-NVUE
+			pointClassList() {
+				let classList = [];
+
+				['xs', 'sm', 'md', 'lg', 'xl'].forEach(point => {
+					const props = this[point];
+					if (typeof props === 'number') {
+						classList.push(`${ComponentClass}-${point}-${props}`)
+					} else if (typeof props === 'object' && props) {
+						Object.keys(props).forEach(pointProp => {
+							classList.push(
+								pointProp === 'span' ?
+								`${ComponentClass}-${point}-${props[pointProp]}` :
+								`${ComponentClass}-${point}-${pointProp}-${props[pointProp]}`
+							)
+						})
+					}
+				});
+
+				// 支付宝小程序使用 :class=[ ['a','b'] ]，渲染错误
+				return classList.join(' ');
+			}
+			// #endif
+		},
+		methods: {
+			updateGutter(parentGutter) {
+				parentGutter = Number(parentGutter);
+				if (!isNaN(parentGutter)) {
+					this.gutter = parentGutter / 2
+				}
+			},
+			// #ifdef APP-NVUE
+			updateNvueWidth(width) {
+				// 用于在nvue端，span，offset，pull，push的计算
+				this.parentWidth = width;
+				['span', 'offset', 'pull', 'push'].forEach(size => {
+					const curSize = this[size];
+					if ((curSize || curSize === 0) && curSize !== -1) {
+						let RPX = 1 / 24 * curSize * width
+						RPX = Number(RPX);
+						switch (size) {
+							case 'span':
+								this.nvueWidth = RPX
+								break;
+							case 'offset':
+								this.marginLeft = RPX
+								break;
+							case 'pull':
+								this.right = RPX
+								break;
+							case 'push':
+								this.left = RPX
+								break;
+						}
+					}
+				});
+			}
+			// #endif
+		},
+		watch: {
+			sizeList: {
+				immediate: true,
+				handler(newVal) {
+					// #ifndef APP-NVUE
+					let classList = [];
+					for (let size in newVal) {
+						const curSize = newVal[size];
+						if ((curSize || curSize === 0) && curSize !== -1) {
+							classList.push(
+								size === 'span' ?
+								`${ComponentClass}-${curSize}` :
+								`${ComponentClass}-${size}-${curSize}`
+							)
+						}
+					}
+					// 支付宝小程序使用 :class=[ ['a','b'] ]，渲染错误
+					this.sizeClass = classList.join(' ');
+					// #endif
+					// #ifdef APP-NVUE
+					this.updateNvueWidth(this.parentWidth);
+					// #endif
+				}
+			}
+		}
+	}
+</script>
+
+<style lang='scss' scoped>
+	/* breakpoints */
+	$--sm: 768px !default;
+	$--md: 992px !default;
+	$--lg: 1200px !default;
+	$--xl: 1920px !default;
+
+	$breakpoints: ('xs' : (max-width: $--sm - 1),
+	'sm' : (min-width: $--sm),
+	'md' : (min-width: $--md),
+	'lg' : (min-width: $--lg),
+	'xl' : (min-width: $--xl));
+
+	$layout-namespace: ".uni-";
+	$col: $layout-namespace+"col";
+
+	@function getSize($size) {
+		/* TODO 1/24 * $size * 100 * 1%; 使用计算后的值，为了解决 vue3 控制台报错 */
+		@return 0.04166666666 * $size * 100 * 1%;
+	}
+
+	@mixin res($key, $map:$breakpoints) {
+		@if map-has-key($map, $key) {
+			@media screen and #{inspect(map-get($map,$key))} {
+				@content;
+			}
+		}
+
+		@else {
+			@warn "Undeinfed point: `#{$key}`";
+		}
+	}
+
+	/* #ifndef APP-NVUE */
+	#{$col} {
+		float: left;
+		box-sizing: border-box;
+	}
+
+	#{$col}-0 {
+		/* #ifdef APP-NVUE */
+		width: 0;
+		height: 0;
+		margin-top: 0;
+		margin-right: 0;
+		margin-bottom: 0;
+		margin-left: 0;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		display: none;
+		/* #endif */
+	}
+
+	@for $i from 0 through 24 {
+		#{$col}-#{$i} {
+			width: getSize($i);
+		}
+
+		#{$col}-offset-#{$i} {
+			margin-left: getSize($i);
+		}
+
+		#{$col}-pull-#{$i} {
+			position: relative;
+			right: getSize($i);
+		}
+
+		#{$col}-push-#{$i} {
+			position: relative;
+			left: getSize($i);
+		}
+	}
+
+	@each $point in map-keys($breakpoints) {
+		@include res($point) {
+			#{$col}-#{$point}-0 {
+				display: none;
+			}
+
+			@for $i from 0 through 24 {
+				#{$col}-#{$point}-#{$i} {
+					width: getSize($i);
+				}
+
+				#{$col}-#{$point}-offset-#{$i} {
+					margin-left: getSize($i);
+				}
+
+				#{$col}-#{$point}-pull-#{$i} {
+					position: relative;
+					right: getSize($i);
+				}
+
+				#{$col}-#{$point}-push-#{$i} {
+					position: relative;
+					left: getSize($i);
+				}
+			}
+		}
+	}
+
+	/* #endif */
+</style>
diff --git a/uni_modules/uni-row/components/uni-row/uni-row.vue b/uni_modules/uni-row/components/uni-row/uni-row.vue
new file mode 100644
index 0000000..f8e8542
--- /dev/null
+++ b/uni_modules/uni-row/components/uni-row/uni-row.vue
@@ -0,0 +1,190 @@
+<template>
+	<view :class="[ 'uni-row', typeClass , justifyClass, alignClass, ]" :style="{
+		marginLeft:`${Number(marginValue)}rpx`,
+		marginRight:`${Number(marginValue)}rpx`,
+	}">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	const ComponentClass = 'uni-row';
+	const modifierSeparator = '--';
+	/**
+	 * Row	布局-行
+	 * @description	流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局。
+	 * @tutorial	https://ext.dcloud.net.cn/plugin?id=3958
+	 *
+	 * @property	{gutter} type = Number 栅格间隔
+	 * @property	{justify} type = String flex 布局下的水平排列方式
+	 * 						可选	start/end/center/space-around/space-between	start
+	 * 						默认值	start
+	 * @property	{align} type = String flex 布局下的垂直排列方式
+	 * 						可选	top/middle/bottom
+	 * 						默认值	top
+	 * @property	{width} type = String|Number nvue下需要自行配置宽度用于计算
+	 * 						默认值 750
+	 */
+
+
+	export default {
+		name: 'uniRow',
+		componentName: 'uniRow',
+		// #ifdef MP-WEIXIN
+		options: {
+			virtualHost: true // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现，可使用flex布局
+		},
+		// #endif
+		props: {
+			type: String,
+			gutter: Number,
+			justify: {
+				type: String,
+				default: 'start'
+			},
+			align: {
+				type: String,
+				default: 'top'
+			},
+			// nvue如果使用span等属性，需要配置宽度
+			width: {
+				type: [String, Number],
+				default: 750
+			}
+		},
+		created() {
+			// #ifdef APP-NVUE
+			this.type = 'flex';
+			// #endif
+		},
+		computed: {
+			marginValue() {
+				// #ifndef APP-NVUE
+				if (this.gutter) {
+					return -(this.gutter / 2);
+				}
+				// #endif
+				return 0;
+			},
+			typeClass() {
+				return this.type === 'flex' ? `${ComponentClass + modifierSeparator}flex` : '';
+			},
+			justifyClass() {
+				return this.justify !== 'start' ? `${ComponentClass + modifierSeparator}flex-justify-${this.justify}` : ''
+			},
+			alignClass() {
+				return this.align !== 'top' ? `${ComponentClass + modifierSeparator}flex-align-${this.align}` : ''
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	$layout-namespace: ".uni-";
+	$row:$layout-namespace+"row";
+	$modifier-separator: "--";
+
+	@mixin utils-clearfix {
+		$selector: &;
+
+		@at-root {
+
+			/* #ifndef APP-NVUE */
+			#{$selector}::before,
+			#{$selector}::after {
+				display: table;
+				content: "";
+			}
+
+			#{$selector}::after {
+				clear: both;
+			}
+
+			/* #endif */
+		}
+
+	}
+
+	@mixin utils-flex ($direction: row) {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: $direction;
+	}
+
+	@mixin set-flex($state) {
+		@at-root &-#{$state} {
+			@content
+		}
+	}
+
+	#{$row} {
+		position: relative;
+		flex-direction: row;
+
+		/* #ifdef APP-NVUE */
+		flex: 1;
+		/* #endif */
+
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		/* #endif */
+
+		// 非nvue使用float布局
+		@include utils-clearfix;
+
+		// 在QQ、字节、百度小程序平台，编译后使用shadow dom，不可使用flex布局，使用float
+		@at-root {
+
+			/* #ifndef MP-QQ || MP-TOUTIAO || MP-BAIDU */
+			&#{$modifier-separator}flex {
+				@include utils-flex;
+				flex-wrap: wrap;
+				flex: 1;
+
+				&:before,
+				&:after {
+					/* #ifndef APP-NVUE */
+					display: none;
+					/* #endif */
+				}
+
+				@include set-flex(justify-center) {
+					justify-content: center;
+				}
+
+				@include set-flex(justify-end) {
+					justify-content: flex-end;
+				}
+
+				@include set-flex(justify-space-between) {
+					justify-content: space-between;
+				}
+
+				@include set-flex(justify-space-around) {
+					justify-content: space-around;
+				}
+
+				@include set-flex(align-middle) {
+					align-items: center;
+				}
+
+				@include set-flex(align-bottom) {
+					align-items: flex-end;
+				}
+			}
+
+			/* #endif */
+		}
+
+	}
+
+	// 字节、QQ配置后不生效
+	// 此处用法无法使用scoped
+	/* #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ */
+	:host {
+		display: block;
+	}
+
+	/* #endif */
+</style>
diff --git a/uni_modules/uni-row/package.json b/uni_modules/uni-row/package.json
new file mode 100644
index 0000000..3f52fa6
--- /dev/null
+++ b/uni_modules/uni-row/package.json
@@ -0,0 +1,87 @@
+{
+  "id": "uni-row",
+  "displayName": "uni-row 布局-行",
+  "version": "1.0.0",
+  "description": "流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "栅格",
+    "布局",
+    "layout"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "u"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-row/readme.md b/uni_modules/uni-row/readme.md
new file mode 100644
index 0000000..3c9c8b9
--- /dev/null
+++ b/uni_modules/uni-row/readme.md
@@ -0,0 +1,10 @@
+## Layout 布局
+
+> **组件名 uni-row、uni-col**
+> 代码块： `uRow`、`uCol`
+
+
+流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-row)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/uni_modules/uni-scss/changelog.md b/uni_modules/uni-scss/changelog.md
new file mode 100644
index 0000000..b863bb0
--- /dev/null
+++ b/uni_modules/uni-scss/changelog.md
@@ -0,0 +1,8 @@
+## 1.0.3（2022-01-21）
+- 优化 组件示例
+## 1.0.2（2021-11-22）
+- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
+## 1.0.1（2021-11-22）
+- 修复 vue3中scss语法兼容问题
+## 1.0.0（2021-11-18）
+- init
diff --git a/uni_modules/uni-scss/index.scss b/uni_modules/uni-scss/index.scss
new file mode 100644
index 0000000..1744a5f
--- /dev/null
+++ b/uni_modules/uni-scss/index.scss
@@ -0,0 +1 @@
+@import './styles/index.scss';
diff --git a/uni_modules/uni-scss/package.json b/uni_modules/uni-scss/package.json
new file mode 100644
index 0000000..7cc0ccb
--- /dev/null
+++ b/uni_modules/uni-scss/package.json
@@ -0,0 +1,82 @@
+{
+  "id": "uni-scss",
+  "displayName": "uni-scss 辅助样式",
+  "version": "1.0.3",
+  "description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。",
+  "keywords": [
+    "uni-scss",
+    "uni-ui",
+    "辅助样式"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "category": [
+        "JS SDK",
+        "通用 SDK"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "n"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/uni_modules/uni-scss/readme.md b/uni_modules/uni-scss/readme.md
new file mode 100644
index 0000000..b7d1c25
--- /dev/null
+++ b/uni_modules/uni-scss/readme.md
@@ -0,0 +1,4 @@
+`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/uni_modules/uni-scss/styles/index.scss b/uni_modules/uni-scss/styles/index.scss
new file mode 100644
index 0000000..ffac4fe
--- /dev/null
+++ b/uni_modules/uni-scss/styles/index.scss
@@ -0,0 +1,7 @@
+@import './setting/_variables.scss';
+@import './setting/_border.scss';
+@import './setting/_color.scss';
+@import './setting/_space.scss';
+@import './setting/_radius.scss';
+@import './setting/_text.scss';
+@import './setting/_styles.scss';
diff --git a/uni_modules/uni-scss/styles/setting/_border.scss b/uni_modules/uni-scss/styles/setting/_border.scss
new file mode 100644
index 0000000..12a11c3
--- /dev/null
+++ b/uni_modules/uni-scss/styles/setting/_border.scss
@@ -0,0 +1,3 @@
+.uni-border {
+	border: 1px $uni-border-1 solid;
+}
\ No newline at end of file
diff --git a/uni_modules/uni-scss/styles/setting/_color.scss b/uni_modules/uni-scss/styles/setting/_color.scss
new file mode 100644
index 0000000..1ededd9
--- /dev/null
+++ b/uni_modules/uni-scss/styles/setting/_color.scss
@@ -0,0 +1,66 @@
+
+// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐
+// @mixin get-styles($k,$c) {
+// 	@if $k == size or $k == weight{
+// 		font-#{$k}:#{$c}
+// 	}@else{
+// 		#{$k}:#{$c}
+// 	}
+// }
+$uni-ui-color:(
+	// 主色
+	primary: $uni-primary,
+	primary-disable: $uni-primary-disable,
+	primary-light: $uni-primary-light,
+	// 辅助色
+	success: $uni-success,
+	success-disable: $uni-success-disable,
+	success-light: $uni-success-light,
+	warning: $uni-warning,
+	warning-disable: $uni-warning-disable,
+	warning-light: $uni-warning-light,
+	error: $uni-error,
+	error-disable: $uni-error-disable,
+	error-light: $uni-error-light,
+	info: $uni-info,
+	info-disable: $uni-info-disable,
+	info-light: $uni-info-light,
+	// 中性色
+	main-color: $uni-main-color,
+	base-color: $uni-base-color,
+	secondary-color: $uni-secondary-color,
+	extra-color: $uni-extra-color,
+	// 背景色
+	bg-color: $uni-bg-color,
+	// 边框颜色
+	border-1: $uni-border-1,
+	border-2: $uni-border-2,
+	border-3: $uni-border-3,
+	border-4: $uni-border-4,
+	// 黑色
+	black:$uni-black,
+	// 白色
+	white:$uni-white,
+	// 透明
+	transparent:$uni-transparent
+) !default;
+@each $key, $child in $uni-ui-color {
+	.uni-#{"" + $key} {
+		color: $child;
+	}
+	.uni-#{"" + $key}-bg {
+		background-color: $child;
+	}
+}
+.uni-shadow-sm {
+	box-shadow: $uni-shadow-sm;
+}
+.uni-shadow-base {
+	box-shadow: $uni-shadow-base;
+}
+.uni-shadow-lg {
+	box-shadow: $uni-shadow-lg;
+}
+.uni-mask {
+	background-color:$uni-mask;
+}
diff --git a/uni_modules/uni-scss/styles/setting/_radius.scss b/uni_modules/uni-scss/styles/setting/_radius.scss
new file mode 100644
index 0000000..9a0428b
--- /dev/null
+++ b/uni_modules/uni-scss/styles/setting/_radius.scss
@@ -0,0 +1,55 @@
+@mixin radius($r,$d:null ,$important: false){
+  $radius-value:map-get($uni-radius, $r) if($important, !important, null);
+  // Key exists within the $uni-radius variable
+  @if (map-has-key($uni-radius, $r) and  $d){
+		@if $d == t {
+				border-top-left-radius:$radius-value;
+				border-top-right-radius:$radius-value;
+		}@else if $d == r {
+				border-top-right-radius:$radius-value;
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == b {
+				border-bottom-left-radius:$radius-value;
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == l {
+				border-top-left-radius:$radius-value;
+				border-bottom-left-radius:$radius-value;
+		}@else if $d == tl {
+				border-top-left-radius:$radius-value;
+		}@else if $d == tr {
+				border-top-right-radius:$radius-value;
+		}@else if $d == br {
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == bl {
+				border-bottom-left-radius:$radius-value;
+		}
+  }@else{
+		border-radius:$radius-value;
+  }
+}
+
+@each $key, $child in $uni-radius {
+	@if($key){
+		.uni-radius-#{"" + $key} {
+				@include radius($key)
+		}
+	}@else{
+		.uni-radius {
+				@include radius($key)
+		}
+	}
+}
+
+@each $direction in t, r, b, l,tl, tr, br, bl {
+	@each $key, $child in $uni-radius {
+		@if($key){
+			.uni-radius-#{"" + $direction}-#{"" + $key} {
+				@include radius($key,$direction,false)
+			}
+		}@else{
+			.uni-radius-#{$direction} {
+				@include radius($key,$direction,false)
+			}
+		}
+	}
+}
diff --git a/uni_modules/uni-scss/styles/setting/_space.scss b/uni_modules/uni-scss/styles/setting/_space.scss
new file mode 100644
index 0000000..3c89528
--- /dev/null
+++ b/uni_modules/uni-scss/styles/setting/_space.scss
@@ -0,0 +1,56 @@
+
+@mixin fn($space,$direction,$size,$n) {
+	@if $n {
+		#{$space}-#{$direction}: #{$size*$uni-space-root}px
+	} @else {
+		 #{$space}-#{$direction}: #{-$size*$uni-space-root}px
+	}
+}
+@mixin get-styles($direction,$i,$space,$n){
+	@if $direction == t {
+		@include fn($space, top,$i,$n);
+	} 
+	@if $direction == r {
+		@include fn($space, right,$i,$n);
+	} 
+	@if $direction == b {
+		@include fn($space, bottom,$i,$n);
+	} 
+	@if $direction == l {
+	 @include fn($space, left,$i,$n);
+	} 
+	@if $direction == x {
+		@include fn($space, left,$i,$n);
+		@include fn($space, right,$i,$n);
+	} 
+	@if $direction == y {
+		@include fn($space, top,$i,$n);
+		@include fn($space, bottom,$i,$n);
+	} 
+	@if $direction == a {
+		@if $n {
+			#{$space}:#{$i*$uni-space-root}px;
+		} @else {
+			#{$space}:#{-$i*$uni-space-root}px;
+		}
+	} 
+}
+
+@each $orientation in m,p {
+	$space: margin;
+	@if $orientation == m {
+		$space: margin;
+	} @else {
+		$space: padding;
+	}
+	@for $i from 0 through 16 {
+		@each $direction in t, r, b, l, x, y, a {
+			.uni-#{$orientation}#{$direction}-#{$i} { 
+				@include  get-styles($direction,$i,$space,true);
+			} 
+			.uni-#{$orientation}#{$direction}-n#{$i} { 
+				@include  get-styles($direction,$i,$space,false);
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/uni_modules/uni-scss/styles/setting/_styles.scss b/uni_modules/uni-scss/styles/setting/_styles.scss
new file mode 100644
index 0000000..689afec
--- /dev/null
+++ b/uni_modules/uni-scss/styles/setting/_styles.scss
@@ -0,0 +1,167 @@
+/* #ifndef APP-NVUE */
+
+$-color-white:#fff;
+$-color-black:#000;
+@mixin base-style($color) {
+	color: #fff;
+	background-color: $color;
+	border-color: mix($-color-black, $color, 8%);
+	&:not([hover-class]):active {
+		background: mix($-color-black, $color, 10%);
+		border-color: mix($-color-black, $color, 20%);
+		color: $-color-white;
+		outline: none;
+	}
+}
+@mixin is-color($color) {
+	@include base-style($color);
+	&[loading] {
+		@include base-style($color);
+		&::before {
+			margin-right:5px;
+		}
+	}
+	&[disabled] {
+	  &,
+		&[loading],
+	  &:not([hover-class]):active {
+	    color: $-color-white;
+			border-color: mix(darken($color,10%), $-color-white);
+	    background-color: mix($color, $-color-white);
+	  }
+	}
+
+}
+@mixin base-plain-style($color) {
+	color:$color;
+	background-color: mix($-color-white, $color, 90%);
+	border-color: mix($-color-white, $color, 70%);
+	&:not([hover-class]):active {
+	  background: mix($-color-white, $color, 80%);
+	  color: $color;
+	  outline: none;
+		border-color: mix($-color-white, $color, 50%);
+	}
+}
+@mixin is-plain($color){
+	&[plain] {
+		@include base-plain-style($color);
+		&[loading] {
+			@include base-plain-style($color);
+			&::before {
+				margin-right:5px;
+			}
+		}
+		&[disabled] {
+		  &,
+		  &:active {
+		    color: mix($-color-white, $color, 40%);
+		    background-color: mix($-color-white, $color, 90%);
+				border-color: mix($-color-white, $color, 80%);
+		  }
+		}
+	}
+}
+
+
+.uni-btn {
+	margin: 5px;
+	color: #393939;
+	border:1px solid #ccc;
+	font-size: 16px;
+	font-weight: 200;
+	background-color: #F9F9F9;
+	// TODO 暂时处理边框隐藏一边的问题
+	overflow: visible;
+	&::after{
+		border: none;
+	}
+
+	&:not([type]),&[type=default] {
+		color: #999;
+		&[loading] {
+			background: none;
+			&::before {
+				margin-right:5px;
+			}
+		}
+
+
+
+		&[disabled]{
+			color: mix($-color-white, #999, 60%);
+		  &,
+			&[loading],
+		  &:active {
+				color: mix($-color-white, #999, 60%);
+		    background-color: mix($-color-white,$-color-black , 98%);
+				border-color: mix($-color-white,  #999, 85%);
+		  }
+		}
+
+		&[plain] {
+			color: #999;
+			background: none;
+			border-color: $uni-border-1;
+			&:not([hover-class]):active {
+				background: none;
+			  color: mix($-color-white, $-color-black, 80%);
+				border-color: mix($-color-white, $-color-black, 90%);
+			  outline: none;
+			}
+			&[disabled]{
+			  &,
+				&[loading],
+			  &:active {
+			    background: none;
+					color: mix($-color-white, #999, 60%);
+					border-color: mix($-color-white,  #999, 85%);
+			  }
+			}
+		}
+	}
+
+	&:not([hover-class]):active {
+	  color: mix($-color-white, $-color-black, 50%);
+	}
+
+	&[size=mini] {
+		font-size: 16px;
+		font-weight: 200;
+		border-radius: 8px;
+	}
+
+
+
+	&.uni-btn-small {
+		font-size: 14px;
+	}
+	&.uni-btn-mini {
+		font-size: 12px;
+	}
+
+	&.uni-btn-radius {
+		border-radius: 999px;
+	}
+	&[type=primary] {
+		@include is-color($uni-primary);
+		@include is-plain($uni-primary)
+	}
+	&[type=success] {
+		@include is-color($uni-success);
+		@include is-plain($uni-success)
+	}
+	&[type=error] {
+		@include is-color($uni-error);
+		@include is-plain($uni-error)
+	}
+	&[type=warning] {
+		@include is-color($uni-warning);
+		@include is-plain($uni-warning)
+	}
+	&[type=info] {
+		@include is-color($uni-info);
+		@include is-plain($uni-info)
+	}
+}
+/* #endif */
diff --git a/uni_modules/uni-scss/styles/setting/_text.scss b/uni_modules/uni-scss/styles/setting/_text.scss
new file mode 100644
index 0000000..a34d08f
--- /dev/null
+++ b/uni_modules/uni-scss/styles/setting/_text.scss
@@ -0,0 +1,24 @@
+@mixin get-styles($k,$c) {
+	@if $k == size or $k == weight{
+		font-#{$k}:#{$c}
+	}@else{
+		#{$k}:#{$c}
+	}
+}
+
+@each $key, $child in $uni-headings {
+	/* #ifndef APP-NVUE */
+	.uni-#{$key} {
+		@each $k, $c in $child {
+			@include get-styles($k,$c)
+		}
+	}
+	/* #endif */
+	/* #ifdef APP-NVUE */
+	.container .uni-#{$key} {
+		@each $k, $c in $child {
+			@include get-styles($k,$c)
+		}
+	}
+	/* #endif */
+}
diff --git a/uni_modules/uni-scss/styles/setting/_variables.scss b/uni_modules/uni-scss/styles/setting/_variables.scss
new file mode 100644
index 0000000..557d3d7
--- /dev/null
+++ b/uni_modules/uni-scss/styles/setting/_variables.scss
@@ -0,0 +1,146 @@
+// @use "sass:math";
+@import  '../tools/functions.scss';
+// 间距基础倍数
+$uni-space-root: 2 !default;
+// 边框半径默认值
+$uni-radius-root:5px !default;
+$uni-radius: () !default;
+// 边框半径断点
+$uni-radius: map-deep-merge(
+  (
+    0: 0,
+		// TODO 当前版本暂时不支持 sm 属性
+    // 'sm': math.div($uni-radius-root, 2),
+    null: $uni-radius-root,
+    'lg': $uni-radius-root * 2,
+    'xl': $uni-radius-root * 6,
+    'pill': 9999px,
+    'circle': 50%
+  ),
+  $uni-radius
+);
+// 字体家族
+$body-font-family: 'Roboto', sans-serif !default;
+// 文本
+$heading-font-family: $body-font-family !default;
+$uni-headings: () !default;
+$letterSpacing: -0.01562em;
+$uni-headings: map-deep-merge(
+  (
+    'h1': (
+      size: 32px,
+			weight: 300,
+			line-height: 50px,
+			// letter-spacing:-0.01562em
+    ),
+    'h2': (
+      size: 28px,
+      weight: 300,
+      line-height: 40px,
+      // letter-spacing: -0.00833em
+    ),
+    'h3': (
+      size: 24px,
+      weight: 400,
+      line-height: 32px,
+      // letter-spacing: normal
+    ),
+    'h4': (
+      size: 20px,
+      weight: 400,
+      line-height: 30px,
+      // letter-spacing: 0.00735em
+    ),
+    'h5': (
+      size: 16px,
+      weight: 400,
+      line-height: 24px,
+      // letter-spacing: normal
+    ),
+    'h6': (
+      size: 14px,
+      weight: 500,
+      line-height: 18px,
+      // letter-spacing: 0.0125em
+    ),
+    'subtitle': (
+      size: 12px,
+      weight: 400,
+      line-height: 20px,
+      // letter-spacing: 0.00937em
+    ),
+    'body': (
+      font-size: 14px,
+			font-weight: 400,
+			line-height: 22px,
+			// letter-spacing: 0.03125em
+    ),
+    'caption': (
+      'size': 12px,
+      'weight': 400,
+      'line-height': 20px,
+      // 'letter-spacing': 0.03333em,
+      // 'text-transform': false
+    )
+  ),
+  $uni-headings
+);
+
+
+
+// 主色
+$uni-primary: #2979ff !default;
+$uni-primary-disable:lighten($uni-primary,20%) !default;
+$uni-primary-light: lighten($uni-primary,25%) !default;
+
+// 辅助色
+// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
+$uni-success: #18bc37 !default;
+$uni-success-disable:lighten($uni-success,20%) !default;
+$uni-success-light: lighten($uni-success,25%) !default;
+
+$uni-warning: #f3a73f !default;
+$uni-warning-disable:lighten($uni-warning,20%) !default;
+$uni-warning-light: lighten($uni-warning,25%) !default;
+
+$uni-error: #e43d33 !default;
+$uni-error-disable:lighten($uni-error,20%) !default;
+$uni-error-light: lighten($uni-error,25%) !default;
+
+$uni-info: #8f939c !default;
+$uni-info-disable:lighten($uni-info,20%) !default;
+$uni-info-light: lighten($uni-info,25%) !default;
+
+// 中性色
+// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
+$uni-main-color: #3a3a3a !default; 			// 主要文字
+$uni-base-color: #6a6a6a !default;			// 常规文字
+$uni-secondary-color: #909399 !default;	// 次要文字
+$uni-extra-color: #c7c7c7 !default;			// 辅助说明
+
+// 边框颜色
+$uni-border-1: #F0F0F0 !default;
+$uni-border-2: #EDEDED !default;
+$uni-border-3: #DCDCDC !default;
+$uni-border-4: #B9B9B9 !default;
+
+// 常规色
+$uni-black: #000000 !default;
+$uni-white: #ffffff !default;
+$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
+
+// 背景色
+$uni-bg-color: #f7f7f7 !default;
+
+/* 水平间距 */
+$uni-spacing-sm: 8px !default;
+$uni-spacing-base: 15px !default;
+$uni-spacing-lg: 30px !default;
+
+// 阴影
+$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
+$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
+$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
+
+// 蒙版
+$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
diff --git a/uni_modules/uni-scss/styles/tools/functions.scss b/uni_modules/uni-scss/styles/tools/functions.scss
new file mode 100644
index 0000000..ac6f63e
--- /dev/null
+++ b/uni_modules/uni-scss/styles/tools/functions.scss
@@ -0,0 +1,19 @@
+// 合并 map
+@function map-deep-merge($parent-map, $child-map){
+	$result: $parent-map;
+	@each $key, $child in $child-map {
+		$parent-has-key: map-has-key($result, $key);
+		$parent-value: map-get($result, $key);
+		$parent-type: type-of($parent-value);
+		$child-type: type-of($child);
+		$parent-is-map: $parent-type == map;
+		$child-is-map: $child-type == map;
+			
+		@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
+			$result: map-merge($result, ( $key: $child ));
+		}@else {
+			$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
+		}
+	}
+	@return $result;
+};
diff --git a/uni_modules/uni-scss/theme.scss b/uni_modules/uni-scss/theme.scss
new file mode 100644
index 0000000..80ee62f
--- /dev/null
+++ b/uni_modules/uni-scss/theme.scss
@@ -0,0 +1,31 @@
+// 间距基础倍数
+$uni-space-root: 2;
+// 边框半径默认值
+$uni-radius-root:5px;
+// 主色
+$uni-primary: #2979ff;
+// 辅助色
+$uni-success: #4cd964;
+// 警告色
+$uni-warning: #f0ad4e;
+// 错误色
+$uni-error: #dd524d;
+// 描述色
+$uni-info: #909399;
+// 中性色
+$uni-main-color: #303133;
+$uni-base-color: #606266;
+$uni-secondary-color: #909399;
+$uni-extra-color: #C0C4CC;
+// 背景色
+$uni-bg-color: #f5f5f5;
+// 边框颜色
+$uni-border-1: #DCDFE6;
+$uni-border-2: #E4E7ED;
+$uni-border-3: #EBEEF5;
+$uni-border-4: #F2F6FC;
+
+// 常规色
+$uni-black: #000000;
+$uni-white: #ffffff;
+$uni-transparent: rgba($color: #000000, $alpha: 0);
diff --git a/uni_modules/uni-scss/variables.scss b/uni_modules/uni-scss/variables.scss
new file mode 100644
index 0000000..1c062d4
--- /dev/null
+++ b/uni_modules/uni-scss/variables.scss
@@ -0,0 +1,62 @@
+@import './styles/setting/_variables.scss';
+// 间距基础倍数
+$uni-space-root: 2;
+// 边框半径默认值
+$uni-radius-root:5px;
+
+// 主色
+$uni-primary: #2979ff;
+$uni-primary-disable:mix(#fff,$uni-primary,50%);
+$uni-primary-light: mix(#fff,$uni-primary,80%);
+
+// 辅助色
+// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
+$uni-success: #18bc37;
+$uni-success-disable:mix(#fff,$uni-success,50%);
+$uni-success-light: mix(#fff,$uni-success,80%);
+
+$uni-warning: #f3a73f;
+$uni-warning-disable:mix(#fff,$uni-warning,50%);
+$uni-warning-light: mix(#fff,$uni-warning,80%);
+
+$uni-error: #e43d33;
+$uni-error-disable:mix(#fff,$uni-error,50%);
+$uni-error-light: mix(#fff,$uni-error,80%);
+
+$uni-info: #8f939c;
+$uni-info-disable:mix(#fff,$uni-info,50%);
+$uni-info-light: mix(#fff,$uni-info,80%);
+
+// 中性色
+// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
+$uni-main-color: #3a3a3a; 			// 主要文字
+$uni-base-color: #6a6a6a;			// 常规文字
+$uni-secondary-color: #909399;	// 次要文字
+$uni-extra-color: #c7c7c7;			// 辅助说明
+
+// 边框颜色
+$uni-border-1: #F0F0F0;
+$uni-border-2: #EDEDED;
+$uni-border-3: #DCDCDC;
+$uni-border-4: #B9B9B9;
+
+// 常规色
+$uni-black: #000000;
+$uni-white: #ffffff;
+$uni-transparent: rgba($color: #000000, $alpha: 0);
+
+// 背景色
+$uni-bg-color: #f7f7f7;
+
+/* 水平间距 */
+$uni-spacing-sm: 8px;
+$uni-spacing-base: 15px;
+$uni-spacing-lg: 30px;
+
+// 阴影
+$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
+$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
+$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
+
+// 蒙版
+$uni-mask: rgba($color: #000000, $alpha: 0.4);
diff --git a/uni_modules/uni-search-bar/changelog.md b/uni_modules/uni-search-bar/changelog.md
new file mode 100644
index 0000000..2c6571c
--- /dev/null
+++ b/uni_modules/uni-search-bar/changelog.md
@@ -0,0 +1,47 @@
+## 1.3.0（2024-04-22）
+- 修复 textColor默认值导致的文字不显示的bug
+## 1.2.9（2024-04-17）
+- 修复 textColor不生效的bug
+## 1.2.8（2024-02-22）
+- 修复 清空按钮emit值错误的bug
+## 1.2.7（2024-02-21）
+- 新增 设置输入框字体颜色:textColor
+## 1.2.6（2024-02-20）
+- 修复 uni-search-bar在支付宝小程序下样式兼容问题
+## 1.2.5（2024-01-31）
+- 修复 uni-search-bar居中问题，现在默认居左，并修复样式偏移问题
+## 1.2.4（2023-05-09）
+- 修复 i18n 国际化不正确的 Bug
+## 1.2.3（2022-05-24）
+- 新增 readonly 属性，组件只读
+## 1.2.2（2022-05-06）
+- 修复  vue3 input 事件不生效的bug
+## 1.2.1（2022-05-06）
+- 修复 多余代码导致的bug
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-search-bar](https://uniapp.dcloud.io/component/uniui/uni-search-bar)
+## 1.1.2（2021-08-30）
+- 修复 value 属性与 modelValue 属性不兼容的Bug
+## 1.1.1（2021-08-24）
+- 新增 支持国际化
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.9（2021-05-12）
+- 新增 项目示例地址
+## 1.0.8（2021-04-21）
+- 优化 添加依赖 uni-icons, 导入后自动下载依赖
+## 1.0.7（2021-04-15）
+- uni-ui 新增 uni-search-bar 的 focus 事件
+
+## 1.0.6（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+
+## 1.0.5（2021-02-05）
+- 调整为uni_modules目录规范
+- 新增 支持双向绑定
+- 更改 input 事件的返回值，e={value:Number} --> e=value
+- 新增 支持图标插槽
+- 新增 支持 clear、blur 事件
+- 新增 支持 focus 属性
+- 去掉组件背景色
diff --git a/uni_modules/uni-search-bar/components/uni-search-bar/i18n/en.json b/uni_modules/uni-search-bar/components/uni-search-bar/i18n/en.json
new file mode 100644
index 0000000..dd083a5
--- /dev/null
+++ b/uni_modules/uni-search-bar/components/uni-search-bar/i18n/en.json
@@ -0,0 +1,4 @@
+{
+	"uni-search-bar.cancel": "cancel",
+	"uni-search-bar.placeholder": "Search enter content"
+}
\ No newline at end of file
diff --git a/uni_modules/uni-search-bar/components/uni-search-bar/i18n/index.js b/uni_modules/uni-search-bar/components/uni-search-bar/i18n/index.js
new file mode 100644
index 0000000..de7509c
--- /dev/null
+++ b/uni_modules/uni-search-bar/components/uni-search-bar/i18n/index.js
@@ -0,0 +1,8 @@
+import en from './en.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
+}
diff --git a/uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hans.json b/uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hans.json
new file mode 100644
index 0000000..d2a1ced
--- /dev/null
+++ b/uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hans.json
@@ -0,0 +1,4 @@
+{
+	"uni-search-bar.cancel": "取消",
+	"uni-search-bar.placeholder": "请输入搜索内容"
+}
diff --git a/uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hant.json b/uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hant.json
new file mode 100644
index 0000000..f1c96bc
--- /dev/null
+++ b/uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hant.json
@@ -0,0 +1,4 @@
+{
+	"uni-search-bar.cancel": "取消",
+	"uni-search-bar.placeholder": "請輸入搜索內容"
+}
diff --git a/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue b/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue
new file mode 100644
index 0000000..6b9b9c1
--- /dev/null
+++ b/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue
@@ -0,0 +1,309 @@
+<template>
+	<view class="uni-searchbar">
+		<view :style="{borderRadius:radius+'px',backgroundColor: bgColor}" class="uni-searchbar__box"
+			@click="searchClick">
+			<view class="uni-searchbar__box-icon-search">
+				<slot name="searchIcon">
+					<uni-icons color="#c0c4cc" size="18" type="search" />
+				</slot>
+			</view>
+			<input v-if="show || searchVal" :focus="showSync" :disabled="readonly" :placeholder="placeholderText" :maxlength="maxlength"
+				class="uni-searchbar__box-search-input" confirm-type="search" type="text" v-model="searchVal" :style="{color:textColor}"
+				@confirm="confirm" @blur="blur" @focus="emitFocus"/>
+			<text v-else class="uni-searchbar__text-placeholder">{{ placeholder }}</text>
+			<view v-if="show && (clearButton==='always'||clearButton==='auto'&&searchVal!=='') &&!readonly"
+				class="uni-searchbar__box-icon-clear" @click="clear">
+				<slot name="clearIcon">
+					<uni-icons color="#c0c4cc" size="20" type="clear" />
+				</slot>
+			</view>
+		</view>
+		<text @click="cancel" class="uni-searchbar__cancel"
+			v-if="cancelButton ==='always' || show && cancelButton ==='auto'">{{cancelTextI18n}}</text>
+	</view>
+</template>
+
+<script>
+	import {
+		initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import messages from './i18n/index.js'
+	const {
+		t
+	} = initVueI18n(messages)
+
+	/**
+	 * SearchBar 搜索栏
+	 * @description 搜索栏组件，通常用于搜索商品、文章等
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=866
+	 * @property {Number} radius 搜索栏圆角
+	 * @property {Number} maxlength 输入最大长度
+	 * @property {String} placeholder 搜索栏Placeholder
+	 * @property {String} clearButton = [always|auto|none] 是否显示清除按钮
+	 * 	@value always 一直显示
+	 * 	@value auto 输入框不为空时显示
+	 * 	@value none 一直不显示
+	 * @property {String} cancelButton = [always|auto|none] 是否显示取消按钮
+	 * 	@value always 一直显示
+	 * 	@value auto 输入框不为空时显示
+	 * 	@value none 一直不显示
+	 * @property {String} cancelText 取消按钮的文字
+	 * @property {String} bgColor 输入框背景颜色
+	 * @property {String} textColor 输入文字颜色
+	 * @property {Boolean} focus 是否自动聚焦
+	 * @property {Boolean} readonly 组件只读，不能有任何操作，只做展示
+	 * @event {Function} confirm uniSearchBar 的输入框 confirm 事件，返回参数为uniSearchBar的value，e={value:Number}
+	 * @event {Function} input uniSearchBar 的 value 改变时触发事件，返回参数为uniSearchBar的value，e=value
+	 * @event {Function} cancel 点击取消按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
+	 * @event {Function} clear 点击清除按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
+	 * @event {Function} blur input失去焦点时触发事件，返回参数为uniSearchBar的value，e={value:Number}
+	 */
+
+	export default {
+		name: "UniSearchBar",
+		emits: ['input', 'update:modelValue', 'clear', 'cancel', 'confirm', 'blur', 'focus'],
+		props: {
+			placeholder: {
+				type: String,
+				default: ""
+			},
+			radius: {
+				type: [Number, String],
+				default: 5
+			},
+			clearButton: {
+				type: String,
+				default: "auto"
+			},
+			cancelButton: {
+				type: String,
+				default: "auto"
+			},
+			cancelText: {
+				type: String,
+				default: ""
+			},
+			bgColor: {
+				type: String,
+				default: "#F8F8F8"
+			},
+			textColor: {
+				type: String,
+				default: "#000000"
+			},
+			maxlength: {
+				type: [Number, String],
+				default: 100
+			},
+			value: {
+				type: [Number, String],
+				default: ""
+			},
+			modelValue: {
+				type: [Number, String],
+				default: ""
+			},
+			focus: {
+				type: Boolean,
+				default: false
+			},
+			readonly: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				show: false,
+				showSync: false,
+				searchVal: ''
+			}
+		},
+		computed: {
+			cancelTextI18n() {
+				return this.cancelText || t("uni-search-bar.cancel")
+			},
+			placeholderText() {
+				return this.placeholder || t("uni-search-bar.placeholder")
+			}
+		},
+		watch: {
+			// #ifndef VUE3
+			value: {
+				immediate: true,
+				handler(newVal) {
+					this.searchVal = newVal
+					if (newVal) {
+						this.show = true
+					}
+				}
+			},
+			// #endif
+			// #ifdef VUE3
+			modelValue: {
+				immediate: true,
+				handler(newVal) {
+					this.searchVal = newVal
+					if (newVal) {
+						this.show = true
+					}
+				}
+			},
+			// #endif
+			focus: {
+				immediate: true,
+				handler(newVal) {
+					if (newVal) {
+						if(this.readonly) return
+						this.show = true;
+						this.$nextTick(() => {
+							this.showSync = true
+						})
+					}
+				}
+			},
+			searchVal(newVal, oldVal) {
+				this.$emit("input", newVal)
+				// #ifdef VUE3
+				this.$emit("update:modelValue", newVal)
+				// #endif
+			}
+		},
+		methods: {
+			searchClick() {
+				if(this.readonly) return
+				if (this.show) {
+					return
+				}
+				this.show = true;
+				this.$nextTick(() => {
+					this.showSync = true
+				})
+			},
+			clear() {
+				this.searchVal = ""
+				this.$nextTick(() => {
+					this.$emit("clear", { value: "" })
+				})
+			},
+			cancel() {
+				if(this.readonly) return
+				this.$emit("cancel", {
+					value: this.searchVal
+				});
+				this.searchVal = ""
+				this.show = false
+				this.showSync = false
+				// #ifndef APP-PLUS
+				uni.hideKeyboard()
+				// #endif
+				// #ifdef APP-PLUS
+				plus.key.hideSoftKeybord()
+				// #endif
+			},
+			confirm() {
+				// #ifndef APP-PLUS
+				uni.hideKeyboard();
+				// #endif
+				// #ifdef APP-PLUS
+				plus.key.hideSoftKeybord()
+				// #endif
+				this.$emit("confirm", {
+					value: this.searchVal
+				})
+			},
+			blur() {
+				// #ifndef APP-PLUS
+				uni.hideKeyboard();
+				// #endif
+				// #ifdef APP-PLUS
+				plus.key.hideSoftKeybord()
+				// #endif
+				this.$emit("blur", {
+					value: this.searchVal
+				})
+			},
+			emitFocus(e) {
+				this.$emit("focus", e.detail)
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	$uni-searchbar-height: 36px;
+
+	.uni-searchbar {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		position: relative;
+		padding: 10px;
+		// background-color: #fff;
+	}
+
+	.uni-searchbar__box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		box-sizing: border-box;
+		justify-content: left;
+		/* #endif */
+		overflow: hidden;
+		position: relative;
+		flex: 1;
+		flex-direction: row;
+		align-items: center;
+		height: $uni-searchbar-height;
+		padding: 5px 8px 5px 0px;
+	}
+
+	.uni-searchbar__box-icon-search {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		// width: 32px;
+		padding: 0 8px;
+		justify-content: center;
+		align-items: center;
+		color: #B3B3B3;
+	}
+
+	.uni-searchbar__box-search-input {
+		flex: 1;
+		font-size: 14px;
+		color: #333;
+		margin-left: 5px;
+		margin-top: 1px;
+		/* #ifndef APP-NVUE */
+		background-color: inherit;
+		/* #endif */
+	}
+
+	.uni-searchbar__box-icon-clear {
+		align-items: center;
+		line-height: 24px;
+		padding-left: 8px;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-searchbar__text-placeholder {
+		font-size: 14px;
+		color: #B3B3B3;
+		margin-left: 5px;
+		text-align: left;
+	}
+
+	.uni-searchbar__cancel {
+		padding-left: 10px;
+		line-height: $uni-searchbar-height;
+		font-size: 14px;
+		color: #333333;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+</style>
diff --git a/uni_modules/uni-search-bar/package.json b/uni_modules/uni-search-bar/package.json
new file mode 100644
index 0000000..1730d9d
--- /dev/null
+++ b/uni_modules/uni-search-bar/package.json
@@ -0,0 +1,87 @@
+{
+  "id": "uni-search-bar",
+  "displayName": "uni-search-bar 搜索栏",
+  "version": "1.3.0",
+  "description": "搜索栏组件，通常用于搜索商品、文章等",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "搜索框",
+    "搜索栏"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+			"uni-icons"
+		],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "n"
+      },
+      "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-search-bar/readme.md b/uni_modules/uni-search-bar/readme.md
new file mode 100644
index 0000000..253092f
--- /dev/null
+++ b/uni_modules/uni-search-bar/readme.md
@@ -0,0 +1,14 @@
+
+
+## SearchBar 搜索栏
+
+> **组件名：uni-search-bar**
+> 代码块： `uSearchBar`
+
+
+搜索栏组件
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-search-bar)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
diff --git a/uni_modules/uni-section/changelog.md b/uni_modules/uni-section/changelog.md
new file mode 100644
index 0000000..738f2b3
--- /dev/null
+++ b/uni_modules/uni-section/changelog.md
@@ -0,0 +1,2 @@
+## 0.0.1（2022-07-22）
+- 初始化
diff --git a/uni_modules/uni-section/components/uni-section/uni-section.vue b/uni_modules/uni-section/components/uni-section/uni-section.vue
new file mode 100644
index 0000000..9a52e0b
--- /dev/null
+++ b/uni_modules/uni-section/components/uni-section/uni-section.vue
@@ -0,0 +1,167 @@
+<template>
+	<view class="uni-section">
+		<view class="uni-section-header" @click="onClick">
+				<view class="uni-section-header__decoration" v-if="type" :class="type" />
+        <slot v-else name="decoration"></slot>
+
+        <view class="uni-section-header__content">
+          <text :style="{'font-size':titleFontSize,'color':titleColor}" class="uni-section__content-title" :class="{'distraction':!subTitle}">{{ title }}</text>
+          <text v-if="subTitle" :style="{'font-size':subTitleFontSize,'color':subTitleColor}" class="uni-section-header__content-sub">{{ subTitle }}</text>
+        </view>
+
+        <view class="uni-section-header__slot-right">
+          <slot name="right"></slot>
+        </view>
+		</view>
+
+		<view class="uni-section-content" :style="{padding: _padding}">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+
+	/**
+	 * Section 标题栏
+	 * @description 标题栏
+	 * @property {String} type = [line|circle|square] 标题装饰类型
+	 * 	@value line 竖线
+	 * 	@value circle 圆形
+	 * 	@value square 正方形
+	 * @property {String} title 主标题
+	 * @property {String} titleFontSize 主标题字体大小
+	 * @property {String} titleColor 主标题字体颜色
+	 * @property {String} subTitle 副标题
+	 * @property {String} subTitleFontSize 副标题字体大小
+	 * @property {String} subTitleColor 副标题字体颜色
+	 * @property {String} padding 默认插槽 padding
+	 */
+
+	export default {
+		name: 'UniSection',
+    emits:['click'],
+		props: {
+			type: {
+				type: String,
+				default: ''
+			},
+			title: {
+				type: String,
+				required: true,
+				default: ''
+			},
+      titleFontSize: {
+        type: String,
+        default: '14px'
+      },
+			titleColor:{
+				type: String,
+				default: '#333'
+			},
+			subTitle: {
+				type: String,
+				default: ''
+			},
+      subTitleFontSize: {
+        type: String,
+        default: '12px'
+      },
+      subTitleColor: {
+        type: String,
+        default: '#999'
+      },
+			padding: {
+				type: [Boolean, String],
+				default: false
+			}
+		},
+    computed:{
+      _padding(){
+        if(typeof this.padding === 'string'){
+          return this.padding
+        }
+
+        return this.padding?'10px':''
+      }
+    },
+		watch: {
+			title(newVal) {
+				if (uni.report && newVal !== '') {
+					uni.report('title', newVal)
+				}
+			}
+		},
+    methods: {
+			onClick() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+<style lang="scss" >
+	$uni-primary: #2979ff !default;
+
+	.uni-section {
+		background-color: #fff;
+    .uni-section-header {
+      position: relative;
+      /* #ifndef APP-NVUE */
+      display: flex;
+      /* #endif */
+      flex-direction: row;
+      align-items: center;
+      padding: 12px 10px;
+      font-weight: normal;
+
+      &__decoration{
+        margin-right: 6px;
+        background-color: $uni-primary;
+        &.line {
+          width: 4px;
+          height: 12px;
+          border-radius: 10px;
+        }
+
+        &.circle {
+          width: 8px;
+          height: 8px;
+          border-top-right-radius: 50px;
+          border-top-left-radius: 50px;
+          border-bottom-left-radius: 50px;
+          border-bottom-right-radius: 50px;
+        }
+
+        &.square {
+          width: 8px;
+          height: 8px;
+        }
+      }
+
+      &__content {
+        /* #ifndef APP-NVUE */
+        display: flex;
+        /* #endif */
+        flex-direction: column;
+        flex: 1;
+        color: #333;
+
+        .distraction {
+          flex-direction: row;
+          align-items: center;
+        }
+        &-sub {
+          margin-top: 2px;
+        }
+      }
+
+      &__slot-right{
+        font-size: 14px;
+      }
+    }
+
+    .uni-section-content{
+      font-size: 14px;
+    }
+	}
+</style>
diff --git a/uni_modules/uni-section/package.json b/uni_modules/uni-section/package.json
new file mode 100644
index 0000000..0a31fb5
--- /dev/null
+++ b/uni_modules/uni-section/package.json
@@ -0,0 +1,87 @@
+{
+  "id": "uni-section",
+  "displayName": "uni-section 标题栏",
+  "version": "0.0.1",
+  "description": "标题栏组件",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "标题栏"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+      "uni-scss"
+    ],
+    "encrypt": [],
+    "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-section/readme.md b/uni_modules/uni-section/readme.md
new file mode 100644
index 0000000..d47faab
--- /dev/null
+++ b/uni_modules/uni-section/readme.md
@@ -0,0 +1,8 @@
+## Section 标题栏
+> **组件名：uni-section**
+> 代码块： `uSection`
+
+uni-section 组件主要用于文章、列表详情等标题展示
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-section)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
diff --git a/uni_modules/uni-segmented-control/changelog.md b/uni_modules/uni-segmented-control/changelog.md
new file mode 100644
index 0000000..02d0c8a
--- /dev/null
+++ b/uni_modules/uni-segmented-control/changelog.md
@@ -0,0 +1,15 @@
+## 1.2.3（2024-04-02）
+- 修复 修复在微信小程序下inactiveColor失效bug
+## 1.2.2（2024-03-28）
+- 修复 在vue2下:style动态绑定导致编译失败的bug
+## 1.2.1（2024-03-20）
+- 新增 inActiveColor属性，可供配置未激活时的颜色
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-segmented-control](https://uniapp.dcloud.io/component/uniui/uni-segmented-control)
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.5（2021-05-12）
+- 新增 项目示例地址
+## 1.0.4（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue b/uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue
new file mode 100644
index 0000000..a69366a
--- /dev/null
+++ b/uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue
@@ -0,0 +1,146 @@
+<template>
+	<view :class="[styleType === 'text'?'segmented-control--text' : 'segmented-control--button' ]"
+		:style="{ borderColor: styleType === 'text' ? '' : activeColor }" class="segmented-control">
+		<view v-for="(item, index) in values" :class="[styleType === 'text' ? '' : 'segmented-control__item--button',
+					index === 0 && styleType === 'button' ? 'segmented-control__item--button--first' : '',
+					index === values.length - 1 && styleType === 'button' ? 'segmented-control__item--button--last':'']" :key="index"
+			:style="{backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : styleType === 'button' ?inActiveColor:'transparent', borderColor: index === currentIndex && styleType === 'text' || styleType === 'button' ? activeColor : inActiveColor}"
+			class="segmented-control__item" @click="_onClick(index)">
+			<view>
+				<text
+					:style="{color:index === currentIndex? styleType === 'text'? activeColor: '#fff': styleType === 'text'? '#000': activeColor}"
+					class="segmented-control__text"
+					:class="styleType === 'text' && index === currentIndex ? 'segmented-control__item--text': ''">{{ item }}</text>
+			</view>
+
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * SegmentedControl 分段器
+	 * @description 用作不同视图的显示
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=54
+	 * @property {Number} current 当前选中的tab索引值，从0计数
+	 * @property {String} styleType = [button|text] 分段器样式类型
+	 * 	@value button 按钮类型
+	 * 	@value text 文字类型
+	 * @property {String} activeColor 选中的标签背景色与边框颜色
+	 * @property {String} inActiveColor 未选中的标签背景色与边框颜色
+	 * @property {Array} values 选项数组
+	 * @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
+	 */
+
+	export default {
+		name: 'UniSegmentedControl',
+		emits: ['clickItem'],
+		props: {
+			current: {
+				type: Number,
+				default: 0
+			},
+			values: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			activeColor: {
+				type: String,
+				default: '#2979FF'
+			},
+			inActiveColor: {
+				type: String,
+				default: 'transparent'
+			},
+			styleType: {
+				type: String,
+				default: 'button'
+			}
+		},
+		data() {
+			return {
+				currentIndex: 0
+			}
+		},
+		watch: {
+			current(val) {
+				if (val !== this.currentIndex) {
+					this.currentIndex = val
+				}
+			}
+		},
+		computed: {},
+		created() {
+			this.currentIndex = this.current
+		},
+		methods: {
+			_onClick(index) {
+				if (this.currentIndex !== index) {
+					this.currentIndex = index
+					this.$emit('clickItem', {
+						currentIndex: index
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.segmented-control {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		box-sizing: border-box;
+		/* #endif */
+		flex-direction: row;
+		height: 36px;
+		overflow: hidden;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.segmented-control__item {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		box-sizing: border-box;
+		/* #endif */
+		position: relative;
+		flex: 1;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.segmented-control__item--button {
+		border-style: solid;
+		border-top-width: 1px;
+		border-bottom-width: 1px;
+		border-right-width: 1px;
+		border-left-width: 0;
+	}
+
+	.segmented-control__item--button--first {
+		border-left-width: 1px;
+		border-top-left-radius: 5px;
+		border-bottom-left-radius: 5px;
+	}
+
+	.segmented-control__item--button--last {
+		border-top-right-radius: 5px;
+		border-bottom-right-radius: 5px;
+	}
+
+	.segmented-control__item--text {
+		border-bottom-style: solid;
+		border-bottom-width: 2px;
+		padding: 6px 0;
+	}
+
+	.segmented-control__text {
+		font-size: 14px;
+		line-height: 20px;
+		text-align: center;
+	}
+</style>
diff --git a/uni_modules/uni-segmented-control/package.json b/uni_modules/uni-segmented-control/package.json
new file mode 100644
index 0000000..49f9eff
--- /dev/null
+++ b/uni_modules/uni-segmented-control/package.json
@@ -0,0 +1,85 @@
+{
+  "id": "uni-segmented-control",
+  "displayName": "uni-segmented-control 分段器",
+  "version": "1.2.3",
+  "description": "分段器由至少 2 个分段控件组成，用作不同视图的显示",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "分段器",
+    "segement",
+    "顶部选择"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "n"
+      },
+      "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-segmented-control/readme.md b/uni_modules/uni-segmented-control/readme.md
new file mode 100644
index 0000000..3527b03
--- /dev/null
+++ b/uni_modules/uni-segmented-control/readme.md
@@ -0,0 +1,13 @@
+
+
+## SegmentedControl 分段器
+> **组件名：uni-segmented-control**
+> 代码块： `uSegmentedControl`
+
+
+用作不同视图的显示
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-segmented-control)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
diff --git a/uni_modules/uni-steps/changelog.md b/uni_modules/uni-steps/changelog.md
new file mode 100644
index 0000000..04367d8
--- /dev/null
+++ b/uni_modules/uni-steps/changelog.md
@@ -0,0 +1,18 @@
+## 1.1.2（2024-03-28）
+- 修复 uni-steps为竖排列时，文本长度过长引起点错乱的bug
+## 1.1.1（2021-11-22）
+- 修复 vue3中某些scss变量无法找到的问题
+## 1.1.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-steps](https://uniapp.dcloud.io/component/uniui/uni-steps)
+## 1.0.8（2021-05-12）
+- 新增 项目示例地址
+## 1.0.7（2021-05-06）
+- 修复 uni-steps 横向布局时，多行文字高度不合理的 bug
+## 1.0.6（2021-04-21）
+- 优化 添加依赖 uni-icons, 导入后自动下载依赖
+## 1.0.5（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+
+## 1.0.4（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-steps/components/uni-steps/uni-steps.vue b/uni_modules/uni-steps/components/uni-steps/uni-steps.vue
new file mode 100644
index 0000000..81017fc
--- /dev/null
+++ b/uni_modules/uni-steps/components/uni-steps/uni-steps.vue
@@ -0,0 +1,280 @@
+<template>
+	<view class="uni-steps">
+		<view :class="[direction==='column'?'uni-steps__column':'uni-steps__row']">
+			<view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']">
+				<view v-for="(item,index) in options" :key="index"
+					:class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']">
+					<text :style="{color:index === active?activeColor:deactiveColor}"
+						:class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text>
+					<text :style="{color: deactiveColor}"
+						:class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">{{item.desc}}</text>
+				</view>
+			</view>
+			<view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']">
+				<view :class="[direction==='column'?'uni-steps__column-line-item':'uni-steps__row-line-item']"
+					v-for="(item,index) in options" :key="index" :style="{height: direction === 'column'?heightArr[index]+'px':'14px'}">
+					<view
+						:class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--before':'uni-steps__row-line--before']"
+						:style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}">
+					</view>
+					<view :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']"
+						v-if="index === active">
+						<uni-icons :color="activeColor" :type="activeIcon" size="14" />
+					</view>
+					<view v-else :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']"
+						:style="{backgroundColor:index<active?activeColor:deactiveColor}" />
+					<view
+						:class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']"
+						:style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}" />
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * Steps 步骤条
+	 * @description 评分组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=34
+	 * @property {Number} active 当前步骤
+	 * @property {String} direction = [row|column] 当前步骤
+	 * 	@value row 横向
+	 * 	@value column 纵向
+	 * @property {String} activeColor 选中状态的颜色
+	 * @property {Array} options 数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
+	 */
+
+	export default {
+		name: 'UniSteps',
+		props: {
+			direction: {
+				// 排列方向 row column
+				type: String,
+				default: 'row'
+			},
+			activeColor: {
+				// 激活状态颜色
+				type: String,
+				default: '#2979FF'
+			},
+			deactiveColor: {
+				// 未激活状态颜色
+				type: String,
+				default: '#B7BDC6'
+			},
+			active: {
+				// 当前步骤
+				type: Number,
+				default: 0
+			},
+			activeIcon: {
+				// 当前步骤
+				type: String,
+				default: 'checkbox-filled'
+			},
+			options: {
+				type: Array,
+				default () {
+					return []
+				}
+			} // 数据
+		},
+		data() {
+			return {
+				heightArr: [],
+			}
+		},
+		mounted() {
+			//根据内容设置步骤条的长度
+			if (this.direction === 'column') {
+				let that = this;
+				//只能用类选择器，用id选择器所获取的元素信息不准确
+				uni.createSelectorQuery().in(this).selectAll('.uni-steps__column-text').boundingClientRect(data => {
+					that.heightArr = data.map(item => item.height + 1);
+				}).exec()
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	$uni-primary: #2979ff !default;
+	$uni-border-color: #EDEDED;
+
+	.uni-steps {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		width: 100%;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		flex: 1;
+		/* #endif */
+		flex-direction: column;
+	}
+
+	.uni-steps__row {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+	}
+
+	.uni-steps__column {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row-reverse;
+	}
+
+	.uni-steps__row-text-container {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: flex-end;
+		margin-bottom: 8px;
+	}
+
+	.uni-steps__column-text-container {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		flex: 1;
+	}
+
+	.uni-steps__row-text {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: column;
+	}
+
+	.uni-steps__column-text {
+		padding: 6px 0px;
+		border-bottom-style: solid;
+		border-bottom-width: 1px;
+		border-bottom-color: $uni-border-color;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+	}
+
+	.uni-steps__row-title {
+		font-size: 14px;
+		line-height: 16px;
+		text-align: center;
+	}
+
+	.uni-steps__column-title {
+		font-size: 14px;
+		text-align: left;
+		line-height: 18px;
+	}
+
+	.uni-steps__row-desc {
+		font-size: 12px;
+		line-height: 14px;
+		text-align: center;
+	}
+
+	.uni-steps__column-desc {
+		font-size: 12px;
+		text-align: left;
+		line-height: 18px;
+	}
+
+	.uni-steps__row-container {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-steps__column-container {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		width: 30px;
+		flex-direction: column;
+	}
+
+	.uni-steps__row-line-item {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		flex-direction: row;
+		flex: 1;
+		height: 14px;
+		line-height: 14px;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.uni-steps__column-line-item {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.uni-steps__row-line {
+		flex: 1;
+		height: 1px;
+		background-color: #B7BDC6;
+	}
+
+	.uni-steps__column-line {
+		width: 1px;
+		background-color: #B7BDC6;
+	}
+
+	.uni-steps__row-line--after {
+		transform: translateX(1px);
+	}
+
+	.uni-steps__column-line--after {
+		flex: 1;
+		transform: translate(0px, 1px);
+	}
+
+	.uni-steps__row-line--before {
+		transform: translateX(-1px);
+	}
+
+	.uni-steps__column-line--before {
+		height: 6px;
+		transform: translate(0px, -13px);
+	}
+
+	.uni-steps__row-circle {
+		width: 5px;
+		height: 5px;
+		border-radius: 50%;
+		background-color: #B7BDC6;
+		margin: 0px 3px;
+	}
+
+	.uni-steps__column-circle {
+		width: 5px;
+		height: 5px;
+		border-radius: 50%;
+		background-color: #B7BDC6;
+		margin: 4px 0px 5px 0px;
+	}
+
+	.uni-steps__row-check {
+		margin: 0px 6px;
+	}
+
+	.uni-steps__column-check {
+		height: 14px;
+		line-height: 14px;
+		margin: 2px 0px;
+	}
+</style>
diff --git a/uni_modules/uni-steps/package.json b/uni_modules/uni-steps/package.json
new file mode 100644
index 0000000..4145ce9
--- /dev/null
+++ b/uni_modules/uni-steps/package.json
@@ -0,0 +1,87 @@
+{
+  "id": "uni-steps",
+  "displayName": "uni-steps 步骤条",
+  "version": "1.1.2",
+  "description": "步骤条组件，提供横向和纵向两种布局格式。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "步骤条",
+    "时间轴"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+			"uni-icons"
+		],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "n"
+      },
+      "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-steps/readme.md b/uni_modules/uni-steps/readme.md
new file mode 100644
index 0000000..da7a4bf
--- /dev/null
+++ b/uni_modules/uni-steps/readme.md
@@ -0,0 +1,13 @@
+
+
+## Steps 步骤条
+> **组件名：uni-steps**
+> 代码块： `uSteps`
+
+
+步骤条，常用于显示进度
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-steps)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
diff --git a/uni_modules/uni-swipe-action/changelog.md b/uni_modules/uni-swipe-action/changelog.md
new file mode 100644
index 0000000..e28472f
--- /dev/null
+++ b/uni_modules/uni-swipe-action/changelog.md
@@ -0,0 +1,47 @@
+## 1.3.10（2024-01-17）
+- 修复 点击按钮时，按钮会被点击穿透导致自动收缩的 bug(兼容阿里/百度/抖音小程序)
+## 1.3.9（2024-01-17）
+- 修复 点击按钮时，按钮会被点击穿透导致自动收缩的 bug
+## 1.3.8（2023-04-13）
+- 修复`uni-swipe-action`和`uni-swipe-action-item`不同时使用导致 closeOther 方法报错的 bug
+## 1.3.7（2022-06-06）
+- 修复 vue3 下使用组件不能正常运行的Bug
+## 1.3.6（2022-05-31）
+- 修复 h5端点击click触发两次的Bug
+## 1.3.5（2022-05-23）
+- 修复 isPC 找不到的Bug
+## 1.3.4（2022-05-19）
+-  修复 在 nvue 下 disabled 失效的bug
+## 1.3.3（2022-03-31）
+- 修复 按钮字体大小不能设置的bug
+## 1.3.2（2022-03-16）
+- 修复 h5和app端下报el错误的bug
+## 1.3.1（2022-03-07）
+- 修复 HBuilderX 1.4.X 版本中，h5和app端下报错的bug
+## 1.3.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-swipe-action](https://uniapp.dcloud.io/component/uniui/uni-swipe-action)
+## 1.2.4（2021-08-20）
+- 优化 close-all 方法
+## 1.2.3（2021-08-20）
+- 新增 close-all 方法，关闭所有已打开的组件
+## 1.2.2（2021-08-17）
+- 新增 resize() 方法，在非微信小程序、h5、app-vue端出现不能滑动的问题的时候，重置组件
+- 修复 app 端偶尔出现类似 Page[x][-x,xx;-x,xx,x,x-x] 的问题 
+- 优化 微信小程序、h5、app-vue 滑动逻辑，避免出现动态新增组件后不能滑动的问题
+## 1.2.1（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+- 修复 跨页面修改组件数据 ，导致不能滑动的问题
+## 1.1.10（2021-06-17）
+- 修复 按钮点击执行两次的bug
+## 1.1.9（2021-05-12）
+- 新增 项目示例地址
+## 1.1.8（2021-03-26）
+- 修复 微信小程序 nv_navigator is not defined 报错的bug
+## 1.1.7（2021-02-05）
+- 调整为uni_modules目录规范
+- 新增 左侧滑动
+- 新增 插槽使用方式
+- 新增 threshold 属性，可以控制滑动缺省值
+- 优化 长列表滚动性能
+- 修复 滚动页面时触发组件滑动的Bug
diff --git a/uni_modules/uni-swipe-action/components/uni-swipe-action-item/bindingx.js b/uni_modules/uni-swipe-action/components/uni-swipe-action-item/bindingx.js
new file mode 100644
index 0000000..707e432
--- /dev/null
+++ b/uni_modules/uni-swipe-action/components/uni-swipe-action-item/bindingx.js
@@ -0,0 +1,302 @@
+let bindIngXMixins = {}
+
+// #ifdef APP-NVUE
+const BindingX = uni.requireNativePlugin('bindingx');
+const dom = uni.requireNativePlugin('dom');
+const animation = uni.requireNativePlugin('animation');
+
+bindIngXMixins = {
+	data() {
+		return {}
+	},
+
+	watch: {
+		show(newVal) {
+			if (this.autoClose) return
+			if (this.stop) return
+			this.stop = true
+			if (newVal) {
+				this.open(newVal)
+			} else {
+				this.close()
+			}
+		},
+		leftOptions() {
+			this.getSelectorQuery()
+			this.init()
+		},
+		rightOptions(newVal) {
+			this.init()
+		}
+	},
+	created() {
+		this.swipeaction = this.getSwipeAction()
+		if (this.swipeaction && Array.isArray(this.swipeaction.children)) {
+			this.swipeaction.children.push(this)
+		}
+	},
+	mounted() {
+		this.box = this.getEl(this.$refs['selector-box--hock'])
+		this.selector = this.getEl(this.$refs['selector-content--hock']);
+		this.leftButton = this.getEl(this.$refs['selector-left-button--hock']);
+		this.rightButton = this.getEl(this.$refs['selector-right-button--hock']);
+		this.init()
+	},
+	// beforeDestroy() {
+	// 	this.swipeaction.children.forEach((item, index) => {
+	// 		if (item === this) {
+	// 			this.swipeaction.children.splice(index, 1)
+	// 		}
+	// 	})
+	// },
+	methods: {
+		init() {
+			this.$nextTick(() => {
+				this.x = 0
+				this.button = {
+					show: false
+				}
+				setTimeout(() => {
+					this.getSelectorQuery()
+				}, 200)
+			})
+		},
+		onClick(index, item, position) {
+			this.$emit('click', {
+				content: item,
+				index,
+				position
+			})
+		},
+		touchstart(e) {
+			// fix by mehaotian 禁止滑动
+			if (this.disabled) return
+			// 每次只触发一次，避免多次监听造成闪烁
+			if (this.stop) return
+			this.stop = true
+			if (this.autoClose && this.swipeaction) {
+				this.swipeaction.closeOther(this)
+			}
+
+			const leftWidth = this.button.left.width
+			const rightWidth = this.button.right.width
+			let expression = this.range(this.x, -rightWidth, leftWidth)
+			let leftExpression = this.range(this.x - leftWidth, -leftWidth, 0)
+			let rightExpression = this.range(this.x + rightWidth, 0, rightWidth)
+
+			this.eventpan = BindingX.bind({
+				anchor: this.box,
+				eventType: 'pan',
+				props: [{
+					element: this.selector,
+					property: 'transform.translateX',
+					expression
+				}, {
+					element: this.leftButton,
+					property: 'transform.translateX',
+					expression: leftExpression
+				}, {
+					element: this.rightButton,
+					property: 'transform.translateX',
+					expression: rightExpression
+				}, ]
+			}, (e) => {
+				// nope
+				if (e.state === 'end') {
+					this.x = e.deltaX + this.x;
+					this.isclick = true
+					this.bindTiming(e.deltaX)
+				}
+			});
+		},
+		touchend(e) {
+			if (this.isopen !== 'none' && !this.isclick) {
+				this.open('none')
+			}
+		},
+		bindTiming(x) {
+			const left = this.x
+			const leftWidth = this.button.left.width
+			const rightWidth = this.button.right.width
+			const threshold = this.threshold
+			if (!this.isopen || this.isopen === 'none') {
+				if (left > threshold) {
+					this.open('left')
+				} else if (left < -threshold) {
+					this.open('right')
+				} else {
+					this.open('none')
+				}
+			} else {
+				if ((x > -leftWidth && x < 0) || x > rightWidth) {
+					if ((x > -threshold && x < 0) || (x - rightWidth > threshold)) {
+						this.open('left')
+					} else {
+						this.open('none')
+					}
+				} else {
+					if ((x < threshold && x > 0) || (x + leftWidth < -threshold)) {
+						this.open('right')
+					} else {
+						this.open('none')
+					}
+				}
+			}
+		},
+
+		/**
+		 * 移动范围
+		 * @param {Object} num
+		 * @param {Object} mix
+		 * @param {Object} max
+		 */
+		range(num, mix, max) {
+			return `min(max(x+${num}, ${mix}), ${max})`
+		},
+
+		/**
+		 * 开启swipe
+		 */
+		open(type) {
+			this.animation(type)
+		},
+
+		/**
+		 * 关闭swipe
+		 */
+		close() {
+			this.animation('none')
+		},
+
+		/**
+		 * 开启关闭动画
+		 * @param {Object} type
+		 */
+		animation(type) {
+			const time = 300
+			const leftWidth = this.button.left.width
+			const rightWidth = this.button.right.width
+			if (this.eventpan && this.eventpan.token) {
+				BindingX.unbind({
+					token: this.eventpan.token,
+					eventType: 'pan'
+				})
+			}
+
+			switch (type) {
+				case 'left':
+					Promise.all([
+						this.move(this.selector, leftWidth),
+						this.move(this.leftButton, 0),
+						this.move(this.rightButton, rightWidth * 2)
+					]).then(() => {
+						this.setEmit(leftWidth, type)
+					})
+					break
+				case 'right':
+					Promise.all([
+						this.move(this.selector, -rightWidth),
+						this.move(this.leftButton, -leftWidth * 2),
+						this.move(this.rightButton, 0)
+					]).then(() => {
+						this.setEmit(-rightWidth, type)
+					})
+					break
+				default:
+					Promise.all([
+						this.move(this.selector, 0),
+						this.move(this.leftButton, -leftWidth),
+						this.move(this.rightButton, rightWidth)
+					]).then(() => {
+						this.setEmit(0, type)
+					})
+
+			}
+		},
+		setEmit(x, type) {
+			const leftWidth = this.button.left.width
+			const rightWidth = this.button.right.width
+			this.isopen = this.isopen || 'none'
+			this.stop = false
+			this.isclick = false
+			// 只有状态不一致才会返回结果
+			if (this.isopen !== type && this.x !== x) {
+				if (type === 'left' && leftWidth > 0) {
+					this.$emit('change', 'left')
+				}
+				if (type === 'right' && rightWidth > 0) {
+					this.$emit('change', 'right')
+				}
+				if (type === 'none') {
+					this.$emit('change', 'none')
+				}
+			}
+			this.x = x
+			this.isopen = type
+		},
+		move(ref, value) {
+			return new Promise((resolve, reject) => {
+				animation.transition(ref, {
+					styles: {
+						transform: `translateX(${value})`,
+					},
+					duration: 150, //ms
+					timingFunction: 'linear',
+					needLayout: false,
+					delay: 0 //ms
+				}, function(res) {
+					resolve(res)
+				})
+			})
+
+		},
+
+		/**
+		 * 获取ref
+		 * @param {Object} el
+		 */
+		getEl(el) {
+			return el.ref
+		},
+		/**
+		 * 获取节点信息
+		 */
+		getSelectorQuery() {
+			Promise.all([
+				this.getDom('left'),
+				this.getDom('right'),
+			]).then((data) => {
+				let show = 'none'
+				if (this.autoClose) {
+					show = 'none'
+				} else {
+					show = this.show
+				}
+
+				if (show === 'none') {
+					// this.close()
+				} else {
+					this.open(show)
+				}
+
+			})
+
+		},
+		getDom(str) {
+			return new Promise((resolve, reject) => {
+				dom.getComponentRect(this.$refs[`selector-${str}-button--hock`], (data) => {
+					if (data) {
+						this.button[str] = data.size
+						resolve(data)
+					} else {
+						reject()
+					}
+				})
+			})
+		}
+	}
+}
+
+// #endif
+
+export default bindIngXMixins
diff --git a/uni_modules/uni-swipe-action/components/uni-swipe-action-item/isPC.js b/uni_modules/uni-swipe-action/components/uni-swipe-action-item/isPC.js
new file mode 100644
index 0000000..917cb48
--- /dev/null
+++ b/uni_modules/uni-swipe-action/components/uni-swipe-action-item/isPC.js
@@ -0,0 +1,12 @@
+export function isPC() {
+	var userAgentInfo = navigator.userAgent;
+	var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
+	var flag = true;
+	for (let v = 0; v < Agents.length - 1; v++) {
+		if (userAgentInfo.indexOf(Agents[v]) > 0) {
+			flag = false;
+			break;
+		}
+	}
+	return flag;
+}
diff --git a/uni_modules/uni-swipe-action/components/uni-swipe-action-item/mpalipay.js b/uni_modules/uni-swipe-action/components/uni-swipe-action-item/mpalipay.js
new file mode 100644
index 0000000..35c796b
--- /dev/null
+++ b/uni_modules/uni-swipe-action/components/uni-swipe-action-item/mpalipay.js
@@ -0,0 +1,195 @@
+export default {
+	data() {
+		return {
+			x: 0,
+			transition: false,
+			width: 0,
+			viewWidth: 0,
+			swipeShow: 0
+		}
+	},
+	watch: {
+		show(newVal) {
+			if (this.autoClose) return
+			if (newVal && newVal !== 'none') {
+				this.transition = true
+				this.open(newVal)
+			} else {
+				this.close()
+			}
+		}
+	},
+	created() {
+		this.swipeaction = this.getSwipeAction()
+		if (this.swipeaction && Array.isArray(this.swipeaction.children)) {
+			this.swipeaction.children.push(this)
+		}
+	},
+	mounted() {
+		this.isopen = false
+		setTimeout(() => {
+			this.getQuerySelect()
+		}, 50)
+	},
+	methods: {
+		appTouchStart(e) {
+			const {
+				clientX
+			} = e.changedTouches[0]
+			this.clientX = clientX
+			this.timestamp = new Date().getTime()
+		},
+		appTouchEnd(e, index, item, position) {
+			const {
+				clientX
+			} = e.changedTouches[0]
+			// fixed by xxxx 模拟点击事件，解决 ios 13 点击区域错位的问题
+			let diff = Math.abs(this.clientX - clientX)
+			let time = (new Date().getTime()) - this.timestamp
+			if (diff < 40 && time < 300) {
+				this.$emit('click', {
+					content: item,
+					index,
+					position
+				})
+			}
+		},
+		/**
+		 * 移动触发
+		 * @param {Object} e
+		 */
+		onChange(e) {
+			this.moveX = e.detail.x
+			this.isclose = false
+		},
+		touchstart(e) {
+			this.transition = false
+			this.isclose = true
+			if (this.autoClose && this.swipeaction) {
+				this.swipeaction.closeOther(this)
+			}
+		},
+		touchmove(e) {},
+		touchend(e) {
+			// 0的位置什么都不执行
+			if (this.isclose && this.isopen === 'none') return
+			if (this.isclose && this.isopen !== 'none') {
+				this.transition = true
+				this.close()
+			} else {
+				this.move(this.moveX + this.leftWidth)
+			}
+		},
+
+		/**
+		 * 移动
+		 * @param {Object} moveX
+		 */
+		move(moveX) {
+			// 打开关闭的处理逻辑不太一样
+			this.transition = true
+			// 未打开状态
+			if (!this.isopen || this.isopen === 'none') {
+				if (moveX > this.threshold) {
+					this.open('left')
+				} else if (moveX < -this.threshold) {
+					this.open('right')
+				} else {
+					this.close()
+				}
+			} else {
+				if (moveX < 0 && moveX < this.rightWidth) {
+					const rightX = this.rightWidth + moveX
+					if (rightX < this.threshold) {
+						this.open('right')
+					} else {
+						this.close()
+					}
+				} else if (moveX > 0 && moveX < this.leftWidth) {
+					const leftX = this.leftWidth - moveX
+					if (leftX < this.threshold) {
+						this.open('left')
+					} else {
+						this.close()
+					}
+				}
+
+			}
+
+		},
+
+		/**
+		 * 打开
+		 */
+		open(type) {
+			this.x = this.moveX
+			this.animation(type)
+		},
+
+		/**
+		 * 关闭
+		 */
+		close() {
+			this.x = this.moveX
+			// TODO 解决 x 值不更新的问题，所以会多触发一次 nextTick ，待优化
+			this.$nextTick(() => {
+				this.x = -this.leftWidth
+				if (this.isopen !== 'none') {
+					this.$emit('change', 'none')
+				}
+				this.isopen = 'none'
+			})
+		},
+
+		/**
+		 * 执行结束动画
+		 * @param {Object} type
+		 */
+		animation(type) {
+			this.$nextTick(() => {
+				if (type === 'left') {
+					this.x = 0
+				} else {
+					this.x = -this.rightWidth - this.leftWidth
+				}
+
+				if (this.isopen !== type) {
+					this.$emit('change', type)
+				}
+				this.isopen = type
+			})
+
+		},
+		getSlide(x) {},
+		getQuerySelect() {
+			const query = uni.createSelectorQuery().in(this);
+			query.selectAll('.movable-view--hock').boundingClientRect(data => {
+				this.leftWidth = data[1].width
+				this.rightWidth = data[2].width
+				this.width = data[0].width
+				this.viewWidth = this.width + this.rightWidth + this.leftWidth
+				if (this.leftWidth === 0) {
+					// TODO 疑似bug ,初始化的时候如果x 是0，会导致移动位置错误，所以让元素超出一点
+					this.x = -0.1
+				} else {
+					this.x = -this.leftWidth
+				}
+				this.moveX = this.x
+				this.$nextTick(() => {
+					this.swipeShow = 1
+				})
+
+				if (!this.buttonWidth) {
+					this.disabledView = true
+				}
+
+				if (this.autoClose) return
+				if (this.show !== 'none') {
+					this.transition = true
+					this.open(this.shows)
+				}
+			}).exec();
+
+		}
+	}
+}
diff --git a/uni_modules/uni-swipe-action/components/uni-swipe-action-item/mpother.js b/uni_modules/uni-swipe-action/components/uni-swipe-action-item/mpother.js
new file mode 100644
index 0000000..d389bce
--- /dev/null
+++ b/uni_modules/uni-swipe-action/components/uni-swipe-action-item/mpother.js
@@ -0,0 +1,260 @@
+let otherMixins = {}
+
+// #ifndef APP-PLUS|| MP-WEIXIN  ||  H5
+const MIN_DISTANCE = 10;
+otherMixins = {
+	data() {
+		// TODO 随机生生元素ID，解决百度小程序获取同一个元素位置信息的bug
+		const elClass = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
+		return {
+			uniShow: false,
+			left: 0,
+			buttonShow: 'none',
+			ani: false,
+			moveLeft: '',
+			elClass
+		}
+	},
+	watch: {
+		show(newVal) {
+			if (this.autoClose) return
+			this.openState(newVal)
+		},
+		left() {
+			this.moveLeft = `translateX(${this.left}px)`
+		},
+		buttonShow(newVal) {
+			if (this.autoClose) return
+			this.openState(newVal)
+		},
+		leftOptions() {
+			this.init()
+		},
+		rightOptions() {
+			this.init()
+		}
+	},
+	mounted() {
+		this.swipeaction = this.getSwipeAction()
+		if (this.swipeaction && Array.isArray(this.swipeaction.children)) {
+			this.swipeaction.children.push(this)
+		}
+		this.init()
+	},
+	methods: {
+		init() {
+			clearTimeout(this.timer)
+			this.timer = setTimeout(() => {
+				this.getSelectorQuery()
+			}, 100)
+			// 移动距离
+			this.left = 0
+			this.x = 0
+		},
+
+		closeSwipe(e) {
+			if (this.autoClose && this.swipeaction) {
+				this.swipeaction.closeOther(this)
+			}
+		},
+		appTouchStart(e) {
+			const {
+				clientX
+			} = e.changedTouches[0]
+			this.clientX = clientX
+			this.timestamp = new Date().getTime()
+		},
+		appTouchEnd(e, index, item, position) {
+			const {
+				clientX
+			} = e.changedTouches[0]
+			// fixed by xxxx 模拟点击事件，解决 ios 13 点击区域错位的问题
+			let diff = Math.abs(this.clientX - clientX)
+			let time = (new Date().getTime()) - this.timestamp
+			if (diff < 40 && time < 300) {
+				this.$emit('click', {
+					content: item,
+					index,
+					position
+				})
+			}
+		},
+		touchstart(e) {
+			if (this.disabled) return
+			this.ani = false
+			this.x = this.left || 0
+			this.stopTouchStart(e)
+			this.autoClose && this.closeSwipe()
+		},
+		touchmove(e) {
+			if (this.disabled) return
+			// 是否可以滑动页面
+			this.stopTouchMove(e);
+			if (this.direction !== 'horizontal') {
+				return;
+			}
+			this.move(this.x + this.deltaX)
+			return false
+		},
+		touchend() {
+			if (this.disabled) return
+			this.moveDirection(this.left)
+		},
+		/**
+		 * 设置移动距离
+		 * @param {Object} value
+		 */
+		move(value) {
+			value = value || 0
+			const leftWidth = this.leftWidth
+			const rightWidth = this.rightWidth
+			// 获取可滑动范围
+			this.left = this.range(value, -rightWidth, leftWidth);
+		},
+
+		/**
+		 * 获取范围
+		 * @param {Object} num
+		 * @param {Object} min
+		 * @param {Object} max
+		 */
+		range(num, min, max) {
+			return Math.min(Math.max(num, min), max);
+		},
+		/**
+		 * 移动方向判断
+		 * @param {Object} left
+		 * @param {Object} value
+		 */
+		moveDirection(left) {
+			const threshold = this.threshold
+			const isopen = this.isopen || 'none'
+			const leftWidth = this.leftWidth
+			const rightWidth = this.rightWidth
+			if (this.deltaX === 0) {
+				this.openState('none')
+				return
+			}
+			if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth >
+					0 && rightWidth +
+					left < threshold)) {
+				// right
+				this.openState('right')
+			} else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth >
+					0 &&
+					leftWidth - left < threshold)) {
+				// left
+				this.openState('left')
+			} else {
+				// default
+				this.openState('none')
+			}
+		},
+
+		/**
+		 * 开启状态
+		 * @param {Boolean} type
+		 */
+		openState(type) {
+			const leftWidth = this.leftWidth
+			const rightWidth = this.rightWidth
+			let left = ''
+			this.isopen = this.isopen ? this.isopen : 'none'
+			switch (type) {
+				case "left":
+					left = leftWidth
+					break
+				case "right":
+					left = -rightWidth
+					break
+				default:
+					left = 0
+			}
+
+
+			if (this.isopen !== type) {
+				this.throttle = true
+				this.$emit('change', type)
+			}
+
+			this.isopen = type
+			// 添加动画类
+			this.ani = true
+			this.$nextTick(() => {
+				this.move(left)
+			})
+			// 设置最终移动位置,理论上只要进入到这个函数，肯定是要打开的
+		},
+		close() {
+			this.openState('none')
+		},
+		getDirection(x, y) {
+			if (x > y && x > MIN_DISTANCE) {
+				return 'horizontal';
+			}
+			if (y > x && y > MIN_DISTANCE) {
+				return 'vertical';
+			}
+			return '';
+		},
+
+		/**
+		 * 重置滑动状态
+		 * @param {Object} event
+		 */
+		resetTouchStatus() {
+			this.direction = '';
+			this.deltaX = 0;
+			this.deltaY = 0;
+			this.offsetX = 0;
+			this.offsetY = 0;
+		},
+
+		/**
+		 * 设置滑动开始位置
+		 * @param {Object} event
+		 */
+		stopTouchStart(event) {
+			this.resetTouchStatus();
+			const touch = event.touches[0];
+			this.startX = touch.clientX;
+			this.startY = touch.clientY;
+		},
+
+		/**
+		 * 滑动中，是否禁止打开
+		 * @param {Object} event
+		 */
+		stopTouchMove(event) {
+			const touch = event.touches[0];
+			this.deltaX = touch.clientX - this.startX;
+			this.deltaY = touch.clientY - this.startY;
+			this.offsetX = Math.abs(this.deltaX);
+			this.offsetY = Math.abs(this.deltaY);
+			this.direction = this.direction || this.getDirection(this.offsetX, this.offsetY);
+		},
+
+		getSelectorQuery() {
+			const views = uni.createSelectorQuery().in(this)
+			views
+				.selectAll('.' + this.elClass)
+				.boundingClientRect(data => {
+					if (data.length === 0) return
+					let show = 'none'
+					if (this.autoClose) {
+						show = 'none'
+					} else {
+						show = this.show
+					}
+					this.leftWidth = data[0].width || 0
+					this.rightWidth = data[1].width || 0
+					this.buttonShow = show
+				})
+				.exec()
+		}
+	}
+}
+
+// #endif
+
+export default otherMixins
diff --git a/uni_modules/uni-swipe-action/components/uni-swipe-action-item/mpwxs.js b/uni_modules/uni-swipe-action/components/uni-swipe-action-item/mpwxs.js
new file mode 100644
index 0000000..08de1c9
--- /dev/null
+++ b/uni_modules/uni-swipe-action/components/uni-swipe-action-item/mpwxs.js
@@ -0,0 +1,84 @@
+let mpMixins = {}
+let is_pc = null
+// #ifdef H5
+import {
+	isPC
+} from "./isPC"
+is_pc = isPC()
+// #endif
+// #ifdef APP-VUE|| MP-WEIXIN || H5
+
+mpMixins = {
+	data() {
+		return {
+			is_show: 'none'
+		}
+	},
+	watch: {
+		show(newVal) {
+			this.is_show = this.show
+		}
+	},
+	created() {
+		this.swipeaction = this.getSwipeAction()
+		if (this.swipeaction && Array.isArray(this.swipeaction.children)) {
+			this.swipeaction.children.push(this)
+		}
+	},
+	mounted() {
+		this.is_show = this.show
+	},
+	methods: {
+		// wxs 中调用
+		closeSwipe(e) {
+			if (this.autoClose && this.swipeaction) {
+				this.swipeaction.closeOther(this)
+			}
+		},
+
+		change(e) {
+			this.$emit('change', e.open)
+			if (this.is_show !== e.open) {
+				this.is_show = e.open
+			}
+		},
+
+		appTouchStart(e) {
+			if (is_pc) return
+			const {
+				clientX
+			} = e.changedTouches[0]
+			this.clientX = clientX
+			this.timestamp = new Date().getTime()
+		},
+		appTouchEnd(e, index, item, position) {
+			if (is_pc) return
+			const {
+				clientX
+			} = e.changedTouches[0]
+			// fixed by xxxx 模拟点击事件，解决 ios 13 点击区域错位的问题
+			let diff = Math.abs(this.clientX - clientX)
+			let time = (new Date().getTime()) - this.timestamp
+			if (diff < 40 && time < 300) {
+				this.$emit('click', {
+					content: item,
+					index,
+					position
+				})
+			}
+		},
+		onClickForPC(index, item, position) {
+			if (!is_pc) return
+			// #ifdef H5
+			this.$emit('click', {
+				content: item,
+				index,
+				position
+			})
+			// #endif
+		}
+	}
+}
+
+// #endif
+export default mpMixins
diff --git a/uni_modules/uni-swipe-action/components/uni-swipe-action-item/render.js b/uni_modules/uni-swipe-action/components/uni-swipe-action-item/render.js
new file mode 100644
index 0000000..78f0ec6
--- /dev/null
+++ b/uni_modules/uni-swipe-action/components/uni-swipe-action-item/render.js
@@ -0,0 +1,270 @@
+const MIN_DISTANCE = 10;
+export default {
+	showWatch(newVal, oldVal, ownerInstance, instance, self) {
+		var state = self.state
+		var $el = ownerInstance.$el || ownerInstance.$vm && ownerInstance.$vm.$el
+		if (!$el) return
+		this.getDom(instance, ownerInstance, self)
+		if (newVal && newVal !== 'none') {
+			this.openState(newVal, instance, ownerInstance, self)
+			return
+		}
+
+		if (state.left) {
+			this.openState('none', instance, ownerInstance, self)
+		}
+		this.resetTouchStatus(instance, self)
+	},
+
+	/**
+	 * 开始触摸操作
+	 * @param {Object} e
+	 * @param {Object} ins
+	 */
+	touchstart(e, ownerInstance, self) {
+		let instance = e.instance;
+		let disabled = instance.getDataset().disabled
+		let state = self.state;
+		this.getDom(instance, ownerInstance, self)
+		// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
+		disabled = this.getDisabledType(disabled)
+		if (disabled) return
+		// 开始触摸时移除动画类
+		instance.requestAnimationFrame(function() {
+			instance.removeClass('ani');
+			ownerInstance.callMethod('closeSwipe');
+		})
+
+		// 记录上次的位置
+		state.x = state.left || 0
+		// 计算滑动开始位置
+		this.stopTouchStart(e, ownerInstance, self)
+	},
+
+	/**
+	 * 开始滑动操作
+	 * @param {Object} e
+	 * @param {Object} ownerInstance
+	 */
+	touchmove(e, ownerInstance, self) {
+		let instance = e.instance;
+		// 删除之后已经那不到实例了
+		if (!instance) return;
+		let disabled = instance.getDataset().disabled
+		let state = self.state
+		// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
+		disabled = this.getDisabledType(disabled)
+		if (disabled) return
+		// 是否可以滑动页面
+		this.stopTouchMove(e, self);
+		if (state.direction !== 'horizontal') {
+			return;
+		}
+		if (e.preventDefault) {
+			// 阻止页面滚动
+			e.preventDefault()
+		}
+		let x = state.x + state.deltaX
+		this.move(x, instance, ownerInstance, self)
+	},
+
+	/**
+	 * 结束触摸操作
+	 * @param {Object} e
+	 * @param {Object} ownerInstance
+	 */
+	touchend(e, ownerInstance, self) {
+		let instance = e.instance;
+		let disabled = instance.getDataset().disabled
+		let state = self.state
+		// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
+		disabled = this.getDisabledType(disabled)
+
+		if (disabled) return
+		// 滑动过程中触摸结束,通过阙值判断是开启还是关闭
+		// fixed by mehaotian 定时器解决点击按钮，touchend 触发比 click 事件时机早的问题 ，主要是 ios13
+		this.moveDirection(state.left, instance, ownerInstance, self)
+
+	},
+
+	/**
+	 * 设置移动距离
+	 * @param {Object} value
+	 * @param {Object} instance
+	 * @param {Object} ownerInstance
+	 */
+	move(value, instance, ownerInstance, self) {
+		value = value || 0
+		let state = self.state
+		let leftWidth = state.leftWidth
+		let rightWidth = state.rightWidth
+		// 获取可滑动范围
+		state.left = this.range(value, -rightWidth, leftWidth);
+		instance.requestAnimationFrame(function() {
+			instance.setStyle({
+				transform: 'translateX(' + state.left + 'px)',
+				'-webkit-transform': 'translateX(' + state.left + 'px)'
+			})
+		})
+
+	},
+
+	/**
+	 * 获取元素信息
+	 * @param {Object} instance
+	 * @param {Object} ownerInstance
+	 */
+	getDom(instance, ownerInstance, self) {
+		var state = self.state
+		var $el = ownerInstance.$el || ownerInstance.$vm && ownerInstance.$vm.$el
+		var leftDom = $el.querySelector('.button-group--left')
+		var rightDom = $el.querySelector('.button-group--right')
+
+		state.leftWidth = leftDom.offsetWidth || 0
+		state.rightWidth = rightDom.offsetWidth || 0
+		state.threshold = instance.getDataset().threshold
+	},
+
+	getDisabledType(value) {
+		return (typeof(value) === 'string' ? JSON.parse(value) : value) || false;
+	},
+
+	/**
+	 * 获取范围
+	 * @param {Object} num
+	 * @param {Object} min
+	 * @param {Object} max
+	 */
+	range(num, min, max) {
+		return Math.min(Math.max(num, min), max);
+	},
+
+
+	/**
+	 * 移动方向判断
+	 * @param {Object} left
+	 * @param {Object} value
+	 * @param {Object} ownerInstance
+	 * @param {Object} ins
+	 */
+	moveDirection(left, ins, ownerInstance, self) {
+		var state = self.state
+		var threshold = state.threshold
+		var position = state.position
+		var isopen = state.isopen || 'none'
+		var leftWidth = state.leftWidth
+		var rightWidth = state.rightWidth
+		if (state.deltaX === 0) {
+			this.openState('none', ins, ownerInstance, self)
+			return
+		}
+		if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth > 0 &&
+				rightWidth +
+				left < threshold)) {
+			// right
+			this.openState('right', ins, ownerInstance, self)
+		} else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth > 0 &&
+				leftWidth - left < threshold)) {
+			// left
+			this.openState('left', ins, ownerInstance, self)
+		} else {
+			// default
+			this.openState('none', ins, ownerInstance, self)
+		}
+	},
+
+
+	/**
+	 * 开启状态
+	 * @param {Boolean} type
+	 * @param {Object} ins
+	 * @param {Object} ownerInstance
+	 */
+	openState(type, ins, ownerInstance, self) {
+		let state = self.state
+		let leftWidth = state.leftWidth
+		let rightWidth = state.rightWidth
+		let left = ''
+		state.isopen = state.isopen ? state.isopen : 'none'
+		switch (type) {
+			case "left":
+				left = leftWidth
+				break
+			case "right":
+				left = -rightWidth
+				break
+			default:
+				left = 0
+		}
+
+		// && !state.throttle
+
+		if (state.isopen !== type) {
+			state.throttle = true
+			ownerInstance.callMethod('change', {
+				open: type
+			})
+
+		}
+
+		state.isopen = type
+		// 添加动画类
+		ins.requestAnimationFrame(() => {
+			ins.addClass('ani');
+			this.move(left, ins, ownerInstance, self)
+		})
+	},
+
+
+	getDirection(x, y) {
+		if (x > y && x > MIN_DISTANCE) {
+			return 'horizontal';
+		}
+		if (y > x && y > MIN_DISTANCE) {
+			return 'vertical';
+		}
+		return '';
+	},
+
+	/**
+	 * 重置滑动状态
+	 * @param {Object} event
+	 */
+	resetTouchStatus(instance, self) {
+		let state = self.state;
+		state.direction = '';
+		state.deltaX = 0;
+		state.deltaY = 0;
+		state.offsetX = 0;
+		state.offsetY = 0;
+	},
+
+	/**
+	 * 设置滑动开始位置
+	 * @param {Object} event
+	 */
+	stopTouchStart(event, ownerInstance, self) {
+		let instance = event.instance;
+		let state = self.state
+		this.resetTouchStatus(instance, self);
+		var touch = event.touches[0];
+		state.startX = touch.clientX;
+		state.startY = touch.clientY;
+	},
+
+	/**
+	 * 滑动中，是否禁止打开
+	 * @param {Object} event
+	 */
+	stopTouchMove(event, self) {
+		let instance = event.instance;
+		let state = self.state;
+		let touch = event.touches[0];
+
+		state.deltaX = touch.clientX - state.startX;
+		state.deltaY = touch.clientY - state.startY;
+		state.offsetY = Math.abs(state.deltaY);
+		state.offsetX = Math.abs(state.deltaX);
+		state.direction = state.direction || this.getDirection(state.offsetX, state.offsetY);
+	}
+}
diff --git a/uni_modules/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item.vue b/uni_modules/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item.vue
new file mode 100644
index 0000000..a816e92
--- /dev/null
+++ b/uni_modules/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item.vue
@@ -0,0 +1,348 @@
+<template>
+	<!-- 在微信小程序 app vue端 h5 使用wxs 实现-->
+	<!-- #ifdef APP-VUE || MP-WEIXIN || H5 -->
+	<view class="uni-swipe">
+		<!--  #ifdef MP-WEIXIN || VUE3 -->
+		<view class="uni-swipe_box" :change:prop="wxsswipe.showWatch" :prop="is_show" :data-threshold="threshold"
+			:data-disabled="disabled" @touchstart="wxsswipe.touchstart" @touchmove="wxsswipe.touchmove"
+			@touchend="wxsswipe.touchend">
+		<!-- #endif -->
+			<!--  #ifndef MP-WEIXIN || VUE3 -->
+			<view class="uni-swipe_box" :change:prop="renderswipe.showWatch" :prop="is_show" :data-threshold="threshold"
+				:data-disabled="disabled+''" @touchstart="renderswipe.touchstart" @touchmove="renderswipe.touchmove"
+				@touchend="renderswipe.touchend">
+			<!-- #endif -->
+				<!-- 在微信小程序 app vue端 h5 使用wxs 实现-->
+				<view class="uni-swipe_button-group button-group--left">
+					<slot name="left">
+						<view v-for="(item,index) in leftOptions" :key="index" :style="{
+					  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
+					}" class="uni-swipe_button button-hock" @touchstart.stop="appTouchStart"
+							@touchend.stop="appTouchEnd($event,index,item,'left')" @click.stop="onClickForPC(index,item,'left')">
+							<text class="uni-swipe_button-text"
+								:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text>
+						</view>
+					</slot>
+				</view>
+				<view class="uni-swipe_text--center">
+					<slot></slot>
+				</view>
+				<view class="uni-swipe_button-group button-group--right">
+					<slot name="right">
+						<view v-for="(item,index) in rightOptions" :key="index" :style="{
+					  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
+					}" class="uni-swipe_button button-hock" @touchstart.stop="appTouchStart"
+							@touchend.stop="appTouchEnd($event,index,item,'right')" @click.stop="onClickForPC(index,item,'right')"><text
+								class="uni-swipe_button-text"
+								:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text>
+						</view>
+					</slot>
+				</view>
+			</view>
+		</view>
+		<!-- #endif -->
+		<!-- app nvue端 使用 bindingx -->
+		<!-- #ifdef APP-NVUE -->
+		<view ref="selector-box--hock" class="uni-swipe" @horizontalpan="touchstart" @touchend="touchend">
+			<view ref='selector-left-button--hock' class="uni-swipe_button-group button-group--left">
+				<slot name="left">
+					<view v-for="(item,index) in leftOptions" :key="index" :style="{
+				  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
+				}" class="uni-swipe_button button-hock" @click.stop="onClick(index,item,'left')">
+						<text class="uni-swipe_button-text"
+							:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF', fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">
+							{{ item.text }}
+						</text>
+					</view>
+				</slot>
+			</view>
+			<view ref='selector-right-button--hock' class="uni-swipe_button-group button-group--right">
+				<slot name="right">
+					<view v-for="(item,index) in rightOptions" :key="index" :style="{
+				  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
+				}" class="uni-swipe_button button-hock" @click.stop="onClick(index,item,'right')"><text
+							class="uni-swipe_button-text"
+							:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text>
+					</view>
+				</slot>
+			</view>
+			<view ref='selector-content--hock' class="uni-swipe_box">
+				<slot></slot>
+			</view>
+		</view>
+		<!-- #endif -->
+		<!-- 其他平台使用 js ，长列表性能可能会有影响-->
+		<!-- #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ -->
+		<view class="uni-swipe">
+			<view class="uni-swipe_box" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
+				:style="{transform:moveLeft}" :class="{ani:ani}">
+				<view class="uni-swipe_button-group button-group--left" :class="[elClass]">
+					<slot name="left">
+						<view v-for="(item,index) in leftOptions" :key="index" :style="{
+					  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
+					  fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
+					}" class="uni-swipe_button button-hock" @touchstart.stop="appTouchStart"
+							@touchend.stop="appTouchEnd($event,index,item,'left')"><text class="uni-swipe_button-text"
+								:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text>
+						</view>
+					</slot>
+				</view>
+				<slot></slot>
+				<view class="uni-swipe_button-group button-group--right" :class="[elClass]">
+					<slot name="right">
+						<view v-for="(item,index) in rightOptions" :key="index" :style="{
+					  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
+					  fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
+					}" @touchstart.stop="appTouchStart" @touchend.stop="appTouchEnd($event,index,item,'right')"
+							class="uni-swipe_button button-hock"><text class="uni-swipe_button-text"
+								:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text>
+						</view>
+					</slot>
+				</view>
+			</view>
+		</view>
+		<!-- #endif -->
+
+</template>
+<script src="./wx.wxs" module="wxsswipe" lang="wxs"></script>
+
+<script module="renderswipe" lang="renderjs">
+	import render from './render.js'
+	export default {
+		mounted(e, ins, owner) {
+			this.state = {}
+		},
+		methods: {
+			showWatch(newVal, oldVal, ownerInstance, instance) {
+				render.showWatch(newVal, oldVal, ownerInstance, instance, this)
+			},
+			touchstart(e, ownerInstance) {
+				render.touchstart(e, ownerInstance, this)
+			},
+			touchmove(e, ownerInstance) {
+				render.touchmove(e, ownerInstance, this)
+			},
+			touchend(e, ownerInstance) {
+				render.touchend(e, ownerInstance, this)
+			}
+		}
+	}
+</script>
+<script>
+	import mpwxs from './mpwxs'
+	import bindingx from './bindingx.js'
+	import mpother from './mpother'
+
+	/**
+	 * SwipeActionItem 滑动操作子组件
+	 * @description 通过滑动触发选项的容器
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=181
+	 * @property {Boolean} show = [left|right｜none] 	开启关闭组件，auto-close = false 时生效
+	 * @property {Boolean} disabled = [true|false] 		是否禁止滑动
+	 * @property {Boolean} autoClose = [true|false] 	滑动打开当前组件，是否关闭其他组件
+	 * @property {Number}  threshold 					滑动缺省值
+	 * @property {Array} leftOptions 					左侧选项内容及样式
+	 * @property {Array} rgihtOptions 					右侧选项内容及样式
+	 * @event {Function} click 							点击选项按钮时触发事件，e = {content,index} ，content（点击内容）、index（下标)
+	 * @event {Function} change 						组件打开或关闭时触发，left\right\none
+	 */
+
+	export default {
+		mixins: [mpwxs, bindingx, mpother],
+		emits: ['click', 'change'],
+		props: {
+			// 控制开关
+			show: {
+				type: String,
+				default: 'none'
+			},
+
+			// 禁用
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+
+			// 是否自动关闭
+			autoClose: {
+				type: Boolean,
+				default: true
+			},
+
+			// 滑动缺省距离
+			threshold: {
+				type: Number,
+				default: 20
+			},
+
+			// 左侧按钮内容
+			leftOptions: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+
+			// 右侧按钮内容
+			rightOptions: {
+				type: Array,
+				default () {
+					return []
+				}
+			}
+
+		},
+		// #ifndef VUE3
+		// TODO vue2
+		destroyed() {
+			if (this.__isUnmounted) return
+			this.uninstall()
+		},
+		// #endif
+		// #ifdef VUE3
+		// TODO vue3
+		unmounted() {
+			this.__isUnmounted = true
+			this.uninstall()
+		},
+		// #endif
+
+		methods: {
+			uninstall() {
+				if (this.swipeaction) {
+					this.swipeaction.children.forEach((item, index) => {
+						if (item === this) {
+							this.swipeaction.children.splice(index, 1)
+						}
+					})
+				}
+			},
+			/**
+			 * 获取父元素实例
+			 */
+			getSwipeAction(name = 'uniSwipeAction') {
+				let parent = this.$parent;
+				let parentName = parent.$options.name;
+				while (parentName !== name) {
+					parent = parent.$parent;
+					if (!parent) return false;
+					parentName = parent.$options.name;
+				}
+				return parent;
+			}
+		}
+	}
+</script>
+<style lang="scss">
+	.uni-swipe {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		/* #endif */
+	}
+
+	.uni-swipe_box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		flex-shrink: 0;
+		// touch-action: none;
+		/* #endif */
+		position: relative;
+	}
+
+	.uni-swipe_content {
+		// border: 1px red solid;
+	}
+
+	.uni-swipe_text--center {
+		width: 100%;
+		/* #ifndef APP-NVUE */
+		cursor: grab;
+		/* #endif */
+	}
+
+	.uni-swipe_button-group {
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.button-group--left {
+		left: 0;
+		transform: translateX(-100%)
+	}
+
+	.button-group--right {
+		right: 0;
+		transform: translateX(100%)
+	}
+
+	.uni-swipe_button {
+		/* #ifdef APP-NVUE */
+		flex: 1;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		padding: 0 20px;
+	}
+
+	.uni-swipe_button-text {
+		/* #ifndef APP-NVUE */
+		flex-shrink: 0;
+		/* #endif */
+		font-size: 14px;
+	}
+
+	.ani {
+		transition-property: transform;
+		transition-duration: 0.3s;
+		transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
+	}
+
+	/* #ifdef MP-ALIPAY */
+	.movable-area {
+		/* width: 100%; */
+		height: 45px;
+	}
+
+	.movable-view {
+		display: flex;
+		/* justify-content: center; */
+		position: relative;
+		flex: 1;
+		height: 45px;
+		z-index: 2;
+	}
+
+	.movable-view-button {
+		display: flex;
+		flex-shrink: 0;
+		flex-direction: row;
+		height: 100%;
+		background: #C0C0C0;
+	}
+
+	/* .transition {
+		transition: all 0.3s;
+	} */
+
+	.movable-view-box {
+		flex-shrink: 0;
+		height: 100%;
+		background-color: #fff;
+	}
+
+	/* #endif */
+</style>
diff --git a/uni_modules/uni-swipe-action/components/uni-swipe-action-item/wx.wxs b/uni_modules/uni-swipe-action/components/uni-swipe-action-item/wx.wxs
new file mode 100644
index 0000000..b394244
--- /dev/null
+++ b/uni_modules/uni-swipe-action/components/uni-swipe-action-item/wx.wxs
@@ -0,0 +1,341 @@
+var MIN_DISTANCE = 10;
+
+/**
+ * 判断当前是否为H5、app-vue
+ */
+var IS_HTML5 = false
+if (typeof window === 'object') IS_HTML5 = true
+
+/**
+ * 监听页面内值的变化,主要用于动态开关swipe-action
+ * @param {Object} newValue
+ * @param {Object} oldValue
+ * @param {Object} ownerInstance
+ * @param {Object} instance
+ */
+function showWatch(newVal, oldVal, ownerInstance, instance) {
+	var state = instance.getState()
+	getDom(instance, ownerInstance)
+	if (newVal && newVal !== 'none') {
+		openState(newVal, instance, ownerInstance)
+		return
+	}
+
+	if (state.left) {
+		openState('none', instance, ownerInstance)
+	}
+	resetTouchStatus(instance)
+}
+
+/**
+ * 开始触摸操作
+ * @param {Object} e
+ * @param {Object} ins
+ */
+function touchstart(e, ownerInstance) {
+	var instance = e.instance;
+	var disabled = instance.getDataset().disabled
+	var state = instance.getState();
+	getDom(instance, ownerInstance)
+	// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
+	disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
+	if (disabled) return
+	// 开始触摸时移除动画类
+	instance.requestAnimationFrame(function() {
+		instance.removeClass('ani');
+		ownerInstance.callMethod('closeSwipe');
+	})
+
+	// 记录上次的位置
+	state.x = state.left || 0
+	// 计算滑动开始位置
+	stopTouchStart(e, ownerInstance)
+}
+
+/**
+ * 开始滑动操作
+ * @param {Object} e
+ * @param {Object} ownerInstance
+ */
+function touchmove(e, ownerInstance) {
+	var instance = e.instance;
+	var disabled = instance.getDataset().disabled
+	var state = instance.getState()
+	// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
+	disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
+	if (disabled) return
+	// 是否可以滑动页面
+	stopTouchMove(e);
+	if (state.direction !== 'horizontal') {
+		return;
+	}
+
+	if (e.preventDefault) {
+		// 阻止页面滚动
+		e.preventDefault()
+	}
+
+	move(state.x + state.deltaX, instance, ownerInstance)
+}
+
+/**
+ * 结束触摸操作
+ * @param {Object} e
+ * @param {Object} ownerInstance
+ */
+function touchend(e, ownerInstance) {
+	var instance = e.instance;
+	var disabled = instance.getDataset().disabled
+	var state = instance.getState()
+	// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
+	disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
+
+	if (disabled) return
+	// 滑动过程中触摸结束,通过阙值判断是开启还是关闭
+	// fixed by mehaotian 定时器解决点击按钮，touchend 触发比 click 事件时机早的问题 ，主要是 ios13
+	moveDirection(state.left, instance, ownerInstance)
+
+}
+
+/**
+ * 设置移动距离
+ * @param {Object} value
+ * @param {Object} instance
+ * @param {Object} ownerInstance
+ */
+function move(value, instance, ownerInstance) {
+	value = value || 0
+	var state = instance.getState()
+	var leftWidth = state.leftWidth
+	var rightWidth = state.rightWidth
+	// 获取可滑动范围
+	state.left = range(value, -rightWidth, leftWidth);
+	instance.requestAnimationFrame(function() {
+		instance.setStyle({
+			transform: 'translateX(' + state.left + 'px)',
+			'-webkit-transform': 'translateX(' + state.left + 'px)'
+		})
+	})
+
+}
+
+/**
+ * 获取元素信息
+ * @param {Object} instance
+ * @param {Object} ownerInstance
+ */
+function getDom(instance, ownerInstance) {
+	var state = instance.getState()
+	var leftDom = ownerInstance.selectComponent('.button-group--left')
+	var rightDom = ownerInstance.selectComponent('.button-group--right')
+	var leftStyles = {
+		width: 0
+	}
+	var rightStyles = {
+		width: 0
+	}
+	leftStyles = leftDom.getBoundingClientRect()
+	rightStyles = rightDom.getBoundingClientRect()
+
+	state.leftWidth = leftStyles.width || 0
+	state.rightWidth = rightStyles.width || 0
+	state.threshold = instance.getDataset().threshold
+}
+
+/**
+ * 获取范围
+ * @param {Object} num
+ * @param {Object} min
+ * @param {Object} max
+ */
+function range(num, min, max) {
+	return Math.min(Math.max(num, min), max);
+}
+
+
+/**
+ * 移动方向判断
+ * @param {Object} left
+ * @param {Object} value
+ * @param {Object} ownerInstance
+ * @param {Object} ins
+ */
+function moveDirection(left, ins, ownerInstance) {
+	var state = ins.getState()
+	var threshold = state.threshold
+	var position = state.position
+	var isopen = state.isopen || 'none'
+	var leftWidth = state.leftWidth
+	var rightWidth = state.rightWidth
+	if (state.deltaX === 0) {
+		openState('none', ins, ownerInstance)
+		return
+	}
+	if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth > 0 &&
+			rightWidth +
+			left < threshold)) {
+		// right
+		openState('right', ins, ownerInstance)
+	} else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth > 0 &&
+			leftWidth - left < threshold)) {
+		// left
+		openState('left', ins, ownerInstance)
+	} else {
+		// default
+		openState('none', ins, ownerInstance)
+	}
+}
+
+
+/**
+ * 开启状态
+ * @param {Boolean} type
+ * @param {Object} ins
+ * @param {Object} ownerInstance
+ */
+function openState(type, ins, ownerInstance) {
+	var state = ins.getState()
+	var leftWidth = state.leftWidth
+	var rightWidth = state.rightWidth
+	var left = ''
+	state.isopen = state.isopen ? state.isopen : 'none'
+	switch (type) {
+		case "left":
+			left = leftWidth
+			break
+		case "right":
+			left = -rightWidth
+			break
+		default:
+			left = 0
+	}
+
+	// && !state.throttle
+
+	if (state.isopen !== type) {
+		state.throttle = true
+		ownerInstance.callMethod('change', {
+			open: type
+		})
+
+	}
+
+	state.isopen = type
+	// 添加动画类
+	ins.requestAnimationFrame(function() {
+		ins.addClass('ani');
+		move(left, ins, ownerInstance)
+	})
+	// 设置最终移动位置,理论上只要进入到这个函数，肯定是要打开的
+}
+
+
+function getDirection(x, y) {
+	if (x > y && x > MIN_DISTANCE) {
+		return 'horizontal';
+	}
+	if (y > x && y > MIN_DISTANCE) {
+		return 'vertical';
+	}
+	return '';
+}
+
+/**
+ * 重置滑动状态
+ * @param {Object} event
+ */
+function resetTouchStatus(instance) {
+	var state = instance.getState();
+	state.direction = '';
+	state.deltaX = 0;
+	state.deltaY = 0;
+	state.offsetX = 0;
+	state.offsetY = 0;
+}
+
+/**
+ * 设置滑动开始位置
+ * @param {Object} event
+ */
+function stopTouchStart(event) {
+	var instance = event.instance;
+	var state = instance.getState();
+	resetTouchStatus(instance);
+	var touch = event.touches[0];
+	if (IS_HTML5 && isPC()) {
+		touch = event;
+	}
+	state.startX = touch.clientX;
+	state.startY = touch.clientY;
+}
+
+/**
+ * 滑动中，是否禁止打开
+ * @param {Object} event
+ */
+function stopTouchMove(event) {
+	var instance = event.instance;
+	var state = instance.getState();
+	var touch = event.touches[0];
+	if (IS_HTML5 && isPC()) {
+		touch = event;
+	}
+	state.deltaX = touch.clientX - state.startX;
+	state.deltaY = touch.clientY - state.startY;
+	state.offsetY = Math.abs(state.deltaY);
+	state.offsetX = Math.abs(state.deltaX);
+	state.direction = state.direction || getDirection(state.offsetX, state.offsetY);
+}
+
+function isPC() {
+	var userAgentInfo = navigator.userAgent;
+	var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
+	var flag = true;
+	for (var v = 0; v < Agents.length - 1; v++) {
+		if (userAgentInfo.indexOf(Agents[v]) > 0) {
+			flag = false;
+			break;
+		}
+	}
+	return flag;
+}
+
+var movable = false
+
+function mousedown(e, ins) {
+	if (!IS_HTML5) return
+	if (!isPC()) return
+	touchstart(e, ins)
+	movable = true
+}
+
+function mousemove(e, ins) {
+	if (!IS_HTML5) return
+	if (!isPC()) return
+	if (!movable) return
+	touchmove(e, ins)
+}
+
+function mouseup(e, ins) {
+	if (!IS_HTML5) return
+	if (!isPC()) return
+	touchend(e, ins)
+	movable = false
+}
+
+function mouseleave(e, ins) {
+	if (!IS_HTML5) return
+	if (!isPC()) return
+	movable = false
+}
+
+module.exports = {
+	showWatch: showWatch,
+	touchstart: touchstart,
+	touchmove: touchmove,
+	touchend: touchend,
+	mousedown: mousedown,
+	mousemove: mousemove,
+	mouseup: mouseup,
+	mouseleave: mouseleave
+}
diff --git a/uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action.vue b/uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action.vue
new file mode 100644
index 0000000..4971782
--- /dev/null
+++ b/uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action.vue
@@ -0,0 +1,60 @@
+<template>
+	<view>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	/**
+	 * SwipeAction 滑动操作
+	 * @description 通过滑动触发选项的容器
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=181
+	 */
+	export default {
+		name:"uniSwipeAction",
+		data() {
+			return {};
+		},
+		created() {
+			this.children = [];
+		},
+		methods: {
+			// 公开给用户使用，重制组件样式
+			resize(){
+				// wxs 会自己计算组件大小，所以无需执行下面代码
+				// #ifndef APP-VUE || H5 || MP-WEIXIN
+				this.children.forEach(vm=>{
+					vm.init()
+				})
+				// #endif
+			},
+			// 公开给用户使用，关闭全部 已经打开的组件
+			closeAll(){
+				this.children.forEach(vm=>{
+					// #ifdef APP-VUE || H5 || MP-WEIXIN
+					vm.is_show = 'none'
+					// #endif
+
+					// #ifndef APP-VUE || H5 || MP-WEIXIN
+					vm.close()
+					// #endif
+				})
+			},
+			closeOther(vm) {
+				if (this.openItem && this.openItem !== vm) {
+					// #ifdef APP-VUE || H5 || MP-WEIXIN
+					this.openItem.is_show = 'none'
+					// #endif
+
+					// #ifndef APP-VUE || H5 || MP-WEIXIN
+					this.openItem.close()
+					// #endif
+				}
+				// 记录上一个打开的 swipe-action-item ,用于 auto-close
+				this.openItem = vm
+			}
+		}
+	};
+</script>
+
+<style></style>
diff --git a/uni_modules/uni-swipe-action/package.json b/uni_modules/uni-swipe-action/package.json
new file mode 100644
index 0000000..fc5dd8a
--- /dev/null
+++ b/uni_modules/uni-swipe-action/package.json
@@ -0,0 +1,84 @@
+{
+	"id": "uni-swipe-action",
+	"displayName": "uni-swipe-action 滑动操作",
+	"version": "1.3.10",
+	"description": "SwipeAction 滑动操作操作组件",
+	"keywords": [
+        "",
+        "uni-ui",
+        "uniui",
+        "滑动删除",
+        "侧滑删除"
+    ],
+	"repository": "https://github.com/dcloudio/uni-ui",
+	"engines": {
+		"HBuilderX": ""
+	},
+	"directories": {
+		"example": "../../temps/example_temps"
+	},
+    "dcloudext": {
+        "sale": {
+			"regular": {
+				"price": "0.00"
+			},
+			"sourcecode": {
+				"price": "0.00"
+			}
+		},
+		"contact": {
+			"qq": ""
+		},
+		"declaration": {
+			"ads": "无",
+			"data": "无",
+			"permissions": "无"
+		},
+        "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+        "type": "component-vue"
+	},
+	"uni_modules": {
+		"dependencies": ["uni-scss"],
+		"encrypt": [],
+		"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": "y",
+					"Edge": "y",
+					"Firefox": "y",
+					"Safari": "y"
+				},
+				"小程序": {
+					"微信": "y",
+					"阿里": "y",
+					"百度": "y",
+					"字节跳动": "y",
+					"QQ": "y"
+				},
+				"快应用": {
+					"华为": "y",
+					"联盟": "u"
+				},
+				"Vue": {
+					"vue2": "y",
+					"vue3": "y"
+				}
+			}
+		}
+	}
+}
diff --git a/uni_modules/uni-swipe-action/readme.md b/uni_modules/uni-swipe-action/readme.md
new file mode 100644
index 0000000..93a5cac
--- /dev/null
+++ b/uni_modules/uni-swipe-action/readme.md
@@ -0,0 +1,11 @@
+
+
+## SwipeAction 滑动操作
+> **组件名：uni-swipe-action**
+> 代码块： `uSwipeAction`、`uSwipeActionItem`
+
+
+通过滑动触发选项的容器
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-swipe-action)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/uni_modules/uni-swiper-dot/changelog.md b/uni_modules/uni-swiper-dot/changelog.md
new file mode 100644
index 0000000..85cf54d
--- /dev/null
+++ b/uni_modules/uni-swiper-dot/changelog.md
@@ -0,0 +1,12 @@
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-swiper-dot](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot)
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.6（2021-05-12）
+- 新增 示例地址
+- 修复 示例项目缺少组件的Bug
+## 1.0.5（2021-02-05）
+- 调整为uni_modules目录规范
+- 新增 clickItem 事件，支持指示点控制轮播
+- 新增 支持 pc 可用
diff --git a/uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue b/uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue
new file mode 100644
index 0000000..e66b6c7
--- /dev/null
+++ b/uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue
@@ -0,0 +1,218 @@
+<template>
+	<view class="uni-swiper__warp">
+		<slot />
+		<view v-if="mode === 'default'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='default'>
+			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
+        'width': (index === current? dots.width*2:dots.width ) + 'px','height':dots.width/2 +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border-radius':'0px'}"
+			 :key="index" class="uni-swiper__dots-item uni-swiper__dots-bar" />
+		</view>
+		<view v-if="mode === 'dot'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='dot'>
+			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
+        'width': dots.width + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
+			 :key="index" class="uni-swiper__dots-item" />
+		</view>
+		<view v-if="mode === 'round'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='round'>
+			<view v-for="(item,index) in info" @click="clickItem(index)" :class="[index === current&&'uni-swiper__dots-long']" :style="{
+		    'width':(index === current? dots.width*3:dots.width ) + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
+			 :key="index" class="uni-swiper__dots-item " />
+		</view>
+		<view v-if="mode === 'nav'" key='nav' :style="{'background-color':dotsStyles.backgroundColor,'bottom':'0'}" class="uni-swiper__dots-box uni-swiper__dots-nav">
+			<text :style="{'color':dotsStyles.color}" class="uni-swiper__dots-nav-item">{{ (current+1)+"/"+info.length +' ' +info[current][field] }}</text>
+		</view>
+		<view v-if="mode === 'indexes'" key='indexes' :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box">
+			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
+        'width':dots.width + 'px','height':dots.height +'px' ,'color':index === current?dots.selectedColor:dots.color,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
+			 :key="index" class="uni-swiper__dots-item uni-swiper__dots-indexes"><text class="uni-swiper__dots-indexes-text">{{ index+1 }}</text></view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+	/**
+	 * SwiperDod 轮播图指示点
+	 * @description 自定义轮播图指示点
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=284
+	 * @property {Number} current 当前指示点索引，必须是通过 `swiper` 的 `change` 事件获取到的 `e.detail.current`
+	 * @property {String} mode = [default|round|nav|indexes] 指示点的类型
+	 * 	@value defualt 默认指示点
+	 * 	@value round 圆形指示点
+	 * 	@value nav 条形指示点
+	 * 	@value indexes 索引指示点
+	 * @property {String} field mode 为 nav 时，显示的内容字段（mode = nav 时必填）
+	 * @property {String} info 轮播图的数据，通过数组长度决定指示点个数
+	 * @property {Object} dotsStyles 指示点样式
+	 * @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
+	 */
+
+	export default {
+		name: 'UniSwiperDot',
+		emits:['clickItem'],
+		props: {
+			info: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			current: {
+				type: Number,
+				default: 0
+			},
+			dotsStyles: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 类型 ：default(默认) indexes long nav
+			mode: {
+				type: String,
+				default: 'default'
+			},
+			// 只在 nav 模式下生效，变量名称
+			field: {
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				dots: {
+					width: 6,
+					height: 6,
+					bottom: 10,
+					color: '#fff',
+					backgroundColor: 'rgba(0, 0, 0, .3)',
+					border: '1px rgba(0, 0, 0, .3) solid',
+					selectedBackgroundColor: '#333',
+					selectedBorder: '1px rgba(0, 0, 0, .9) solid'
+				}
+			}
+		},
+		watch: {
+			dotsStyles(newVal) {
+				this.dots = Object.assign(this.dots, this.dotsStyles)
+			},
+			mode(newVal) {
+				if (newVal === 'indexes') {
+					this.dots.width = 14
+					this.dots.height = 14
+				} else {
+					this.dots.width = 6
+					this.dots.height = 6
+				}
+			}
+
+		},
+		created() {
+			if (this.mode === 'indexes') {
+				this.dots.width = 12
+				this.dots.height = 12
+			}
+			this.dots = Object.assign(this.dots, this.dotsStyles)
+		},
+		methods: {
+			clickItem(index) {
+				this.$emit('clickItem', index)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uni-swiper__warp {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: column;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.uni-swiper__dots-box {
+		position: absolute;
+		bottom: 10px;
+		left: 0;
+		right: 0;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.uni-swiper__dots-item {
+		width: 8px;
+		border-radius: 100px;
+		margin-left: 6px;
+		background-color: rgba(0, 0, 0, 0.4);
+		/* #ifndef APP-NVUE */
+		cursor: pointer;
+		/* #endif */
+		/* #ifdef H5 */
+		// border-width: 5px 0;
+		// border-style: solid;
+		// border-color: transparent;
+		// background-clip: padding-box;
+		/* #endif */
+		// transition: width 0.2s linear;  不要取消注释，不然会不能变色
+	}
+
+	.uni-swiper__dots-item:first-child {
+		margin: 0;
+	}
+
+	.uni-swiper__dots-default {
+		border-radius: 100px;
+	}
+
+	.uni-swiper__dots-long {
+		border-radius: 50px;
+	}
+
+	.uni-swiper__dots-bar {
+		border-radius: 50px;
+	}
+
+	.uni-swiper__dots-nav {
+		bottom: 0px;
+		// height: 26px;
+		padding: 8px 0;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
+		background-color: rgba(0, 0, 0, 0.2);
+	}
+
+	.uni-swiper__dots-nav-item {
+		/* overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap; */
+		font-size: 14px;
+		color: #fff;
+		margin: 0 15px;
+	}
+
+	.uni-swiper__dots-indexes {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		// flex: 1;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.uni-swiper__dots-indexes-text {
+		color: #fff;
+		font-size: 12px;
+		line-height: 14px;
+	}
+</style>
diff --git a/uni_modules/uni-swiper-dot/package.json b/uni_modules/uni-swiper-dot/package.json
new file mode 100644
index 0000000..f2dd8d2
--- /dev/null
+++ b/uni_modules/uni-swiper-dot/package.json
@@ -0,0 +1,87 @@
+{
+  "id": "uni-swiper-dot",
+  "displayName": "uni-swiper-dot 轮播图指示点",
+  "version": "1.2.0",
+  "description": "自定义轮播图指示点组件",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "轮播图指示点",
+    "dot",
+    "swiper"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-swiper-dot/readme.md b/uni_modules/uni-swiper-dot/readme.md
new file mode 100644
index 0000000..7d397e2
--- /dev/null
+++ b/uni_modules/uni-swiper-dot/readme.md
@@ -0,0 +1,11 @@
+
+
+## SwiperDot 轮播图指示点
+> **组件名：uni-swiper-dot**
+> 代码块： `uSwiperDot`
+
+
+自定义轮播图指示点
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/uni_modules/uni-table/changelog.md b/uni_modules/uni-table/changelog.md
new file mode 100644
index 0000000..842211c
--- /dev/null
+++ b/uni_modules/uni-table/changelog.md
@@ -0,0 +1,29 @@
+## 1.2.4（2023-12-19）
+- 修复 uni-tr只有一列时minWidth计算错误，列变化实时计算更新
+## 1.2.3（2023-03-28）
+- 修复 在vue3模式下可能会出现错误的问题
+## 1.2.2（2022-11-29）
+- 优化 主题样式
+## 1.2.1（2022-06-06）
+- 修复 微信小程序存在无使用组件的问题
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-table](https://uniapp.dcloud.io/component/uniui/uni-table)
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.7（2021-07-08）
+- 新增 uni-th 支持 date 日期筛选范围
+## 1.0.6（2021-07-05）
+- 新增 uni-th 支持 range 筛选范围
+## 1.0.5（2021-06-28）
+- 新增 uni-th 筛选功能
+## 1.0.4（2021-05-12）
+- 新增 示例地址
+- 修复 示例项目缺少组件的Bug
+## 1.0.3（2021-04-16）
+- 新增 sortable 属性，是否开启单列排序
+- 优化 表格多选逻辑
+## 1.0.2（2021-03-22）
+- uni-tr 添加 disabled 属性，用于 type=selection 时，设置某行是否可由全选按钮控制
+## 1.0.1（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-table/components/uni-table/uni-table.vue b/uni_modules/uni-table/components/uni-table/uni-table.vue
new file mode 100644
index 0000000..21d9527
--- /dev/null
+++ b/uni_modules/uni-table/components/uni-table/uni-table.vue
@@ -0,0 +1,455 @@
+<template>
+	<view class="uni-table-scroll" :class="{ 'table--border': border, 'border-none': !noData }">
+		<!-- #ifdef H5 -->
+		<table class="uni-table" border="0" cellpadding="0" cellspacing="0" :class="{ 'table--stripe': stripe }" :style="{ 'min-width': minWidth + 'px' }">
+			<slot></slot>
+			<tr v-if="noData" class="uni-table-loading">
+				<td class="uni-table-text" :class="{ 'empty-border': border }">{{ emptyText }}</td>
+			</tr>
+			<view v-if="loading" class="uni-table-mask" :class="{ 'empty-border': border }"><div class="uni-table--loader"></div></view>
+		</table>
+		<!-- #endif -->
+		<!-- #ifndef H5 -->
+		<view class="uni-table" :style="{ 'min-width': minWidth + 'px' }" :class="{ 'table--stripe': stripe }">
+			<slot></slot>
+			<view v-if="noData" class="uni-table-loading">
+				<view class="uni-table-text" :class="{ 'empty-border': border }">{{ emptyText }}</view>
+			</view>
+			<view v-if="loading" class="uni-table-mask" :class="{ 'empty-border': border }"><div class="uni-table--loader"></div></view>
+		</view>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+/**
+ * Table 表格
+ * @description 用于展示多条结构类似的数据
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
+ * @property {Boolean} 	border 				是否带有纵向边框
+ * @property {Boolean} 	stripe 				是否显示斑马线
+ * @property {Boolean} 	type 					是否开启多选
+ * @property {String} 	emptyText 			空数据时显示的文本内容
+ * @property {Boolean} 	loading 			显示加载中
+ * @event {Function} 	selection-change 	开启多选时，当选择项发生变化时会触发该事件
+ */
+export default {
+	name: 'uniTable',
+	options: {
+		virtualHost: true
+	},
+	emits:['selection-change'],
+	props: {
+		data: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		// 是否有竖线
+		border: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示斑马线
+		stripe: {
+			type: Boolean,
+			default: false
+		},
+		// 多选
+		type: {
+			type: String,
+			default: ''
+		},
+		// 没有更多数据
+		emptyText: {
+			type: String,
+			default: '没有更多数据'
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		rowKey: {
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			noData: true,
+			minWidth: 0,
+			multiTableHeads: []
+		}
+	},
+	watch: {
+		loading(val) {},
+		data(newVal) {
+			let theadChildren = this.theadChildren
+			let rowspan = 1
+			if (this.theadChildren) {
+				rowspan = this.theadChildren.rowspan
+			}
+			
+			// this.trChildren.length - rowspan
+			this.noData = false
+			// this.noData = newVal.length === 0 
+		}
+	},
+	created() {
+		// 定义tr的实例数组
+		this.trChildren = []
+		this.thChildren = []
+		this.theadChildren = null
+		this.backData = []
+		this.backIndexData = []
+	},
+
+	methods: {
+		isNodata() {
+			let theadChildren = this.theadChildren
+			let rowspan = 1
+			if (this.theadChildren) {
+				rowspan = this.theadChildren.rowspan
+			}
+			this.noData = this.trChildren.length - rowspan <= 0
+		},
+		/**
+		 * 选中所有
+		 */
+		selectionAll() {
+			let startIndex = 1
+			let theadChildren = this.theadChildren
+			if (!this.theadChildren) {
+				theadChildren = this.trChildren[0]
+			} else {
+				startIndex = theadChildren.rowspan - 1
+			}
+			let isHaveData = this.data && this.data.length > 0
+			theadChildren.checked = true
+			theadChildren.indeterminate = false
+			this.trChildren.forEach((item, index) => {
+				if (!item.disabled) {
+					item.checked = true
+					if (isHaveData && item.keyValue) {
+						const row = this.data.find(v => v[this.rowKey] === item.keyValue)
+						if (!this.backData.find(v => v[this.rowKey] === row[this.rowKey])) {
+							this.backData.push(row)
+						}
+					}
+					if (index > (startIndex - 1) && this.backIndexData.indexOf(index - startIndex) === -1) {
+						this.backIndexData.push(index - startIndex)
+					}
+				}
+			})
+			// this.backData = JSON.parse(JSON.stringify(this.data))
+			this.$emit('selection-change', {
+				detail: {
+					value: this.backData,
+					index: this.backIndexData
+				}
+			})
+		},
+		/**
+		 * 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
+		 */
+		toggleRowSelection(row, selected) {
+			// if (!this.theadChildren) return
+			row = [].concat(row)
+
+			this.trChildren.forEach((item, index) => {
+				// if (item.keyValue) {
+
+				const select = row.findIndex(v => {
+					//
+					if (typeof v === 'number') {
+						return v === index - 1
+					} else {
+						return v[this.rowKey] === item.keyValue
+					}
+				})
+				let ischeck = item.checked
+				if (select !== -1) {
+					if (typeof selected === 'boolean') {
+						item.checked = selected
+					} else {
+						item.checked = !item.checked
+					}
+					if (ischeck !== item.checked) {
+						this.check(item.rowData||item, item.checked, item.rowData?item.keyValue:null, true)
+					}
+				}
+				// }
+			})
+			this.$emit('selection-change', {
+				detail: {
+					value: this.backData,
+					index:this.backIndexData
+				}
+			})
+		},
+
+		/**
+		 * 用于多选表格，清空用户的选择
+		 */
+		clearSelection() {
+			let theadChildren = this.theadChildren
+			if (!this.theadChildren) {
+				theadChildren = this.trChildren[0]
+			}
+			// if (!this.theadChildren) return
+			theadChildren.checked = false
+			theadChildren.indeterminate = false
+			this.trChildren.forEach(item => {
+				// if (item.keyValue) {
+					item.checked = false
+				// }
+			})
+			this.backData = []
+			this.backIndexData = []
+			this.$emit('selection-change', {
+				detail: {
+					value: [],
+					index: []
+				}
+			})
+		},
+		/**
+		 * 用于多选表格，切换所有行的选中状态
+		 */
+		toggleAllSelection() {
+			let list = []
+			let startIndex = 1
+			let theadChildren = this.theadChildren
+			if (!this.theadChildren) {
+				theadChildren = this.trChildren[0]
+			} else {
+				startIndex = theadChildren.rowspan - 1
+			}
+			this.trChildren.forEach((item, index) => {
+				if (!item.disabled) {
+					if (index > (startIndex - 1) ) {
+						list.push(index-startIndex)
+					}
+				}
+			})
+			this.toggleRowSelection(list)
+		},
+
+		/**
+		 * 选中\取消选中
+		 * @param {Object} child
+		 * @param {Object} check
+		 * @param {Object} rowValue
+		 */
+		check(child, check, keyValue, emit) {
+			let theadChildren = this.theadChildren
+			if (!this.theadChildren) {
+				theadChildren = this.trChildren[0]
+			}
+			
+			
+			
+			let childDomIndex = this.trChildren.findIndex((item, index) => child === item)
+			if(childDomIndex < 0){
+				childDomIndex = this.data.findIndex(v=>v[this.rowKey] === keyValue) + 1
+			}
+			const dataLen = this.trChildren.filter(v => !v.disabled && v.keyValue).length
+			if (childDomIndex === 0) {
+				check ? this.selectionAll() : this.clearSelection()
+				return
+			}
+
+			if (check) {
+				if (keyValue) {
+					this.backData.push(child)
+				}
+				this.backIndexData.push(childDomIndex - 1)
+			} else {
+				const index = this.backData.findIndex(v => v[this.rowKey] === keyValue)
+				const idx = this.backIndexData.findIndex(item => item === childDomIndex - 1)
+				if (keyValue) {
+					this.backData.splice(index, 1)
+				}
+				this.backIndexData.splice(idx, 1)
+			}
+
+			const domCheckAll = this.trChildren.find((item, index) => index > 0 && !item.checked && !item.disabled)
+			if (!domCheckAll) {
+				theadChildren.indeterminate = false
+				theadChildren.checked = true
+			} else {
+				theadChildren.indeterminate = true
+				theadChildren.checked = false
+			}
+
+			if (this.backIndexData.length === 0) {
+				theadChildren.indeterminate = false
+			}
+
+			if (!emit) {
+				this.$emit('selection-change', {
+					detail: {
+						value: this.backData,
+						index: this.backIndexData
+					}
+				})
+			}
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+$border-color: #ebeef5;
+
+.uni-table-scroll {
+	width: 100%;
+	/* #ifndef APP-NVUE */
+	overflow-x: auto;
+	/* #endif */
+}
+
+.uni-table {
+	position: relative;
+	width: 100%;
+	border-radius: 5px;
+	// box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
+	background-color: #fff;
+	/* #ifndef APP-NVUE */
+	box-sizing: border-box;
+	display: table;
+	overflow-x: auto;
+	::v-deep .uni-table-tr:nth-child(n + 2) {
+		&:hover {
+			background-color: #f5f7fa;
+		}
+	}
+	::v-deep .uni-table-thead {
+		.uni-table-tr {
+			// background-color: #f5f7fa;
+			&:hover {
+				background-color:#fafafa;
+			}
+		}
+	}
+	/* #endif */
+}
+
+.table--border {
+	border: 1px $border-color solid;
+	border-right: none;
+}
+
+.border-none {
+	/* #ifndef APP-NVUE */
+	border-bottom: none;
+	/* #endif */
+}
+
+.table--stripe {
+	/* #ifndef APP-NVUE */
+	::v-deep .uni-table-tr:nth-child(2n + 3) {
+		background-color: #fafafa;
+	}
+	/* #endif */
+}
+
+/* 表格加载、无数据样式 */
+.uni-table-loading {
+	position: relative;
+	/* #ifndef APP-NVUE */
+	display: table-row;
+	/* #endif */
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	box-sizing: border-box;
+}
+.empty-border {
+	border-right: 1px $border-color solid;
+}
+.uni-table-text {
+	position: absolute;
+	right: 0;
+	left: 0;
+	text-align: center;
+	font-size: 14px;
+	color: #999;
+}
+
+.uni-table-mask {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: rgba(255, 255, 255, 0.8);
+	z-index: 99;
+	/* #ifndef APP-NVUE */
+	display: flex;
+	margin: auto;
+	transition: all 0.5s;
+	/* #endif */
+	justify-content: center;
+	align-items: center;
+}
+
+.uni-table--loader {
+	width: 30px;
+	height: 30px;
+	border: 2px solid #aaa;
+	// border-bottom-color: transparent;
+	border-radius: 50%;
+	/* #ifndef APP-NVUE */
+	animation: 2s uni-table--loader linear infinite;
+	/* #endif */
+	position: relative;
+}
+
+@keyframes uni-table--loader {
+	0% {
+		transform: rotate(360deg);
+	}
+
+	10% {
+		border-left-color: transparent;
+	}
+
+	20% {
+		border-bottom-color: transparent;
+	}
+
+	30% {
+		border-right-color: transparent;
+	}
+
+	40% {
+		border-top-color: transparent;
+	}
+
+	50% {
+		transform: rotate(0deg);
+	}
+
+	60% {
+		border-top-color: transparent;
+	}
+
+	70% {
+		border-left-color: transparent;
+	}
+
+	80% {
+		border-bottom-color: transparent;
+	}
+
+	90% {
+		border-right-color: transparent;
+	}
+
+	100% {
+		transform: rotate(-360deg);
+	}
+}
+</style>
diff --git a/uni_modules/uni-table/components/uni-tbody/uni-tbody.vue b/uni_modules/uni-table/components/uni-tbody/uni-tbody.vue
new file mode 100644
index 0000000..fbe1bdc
--- /dev/null
+++ b/uni_modules/uni-table/components/uni-tbody/uni-tbody.vue
@@ -0,0 +1,29 @@
+<template>
+	<!-- #ifdef H5 -->
+	<tbody>
+		<slot></slot>
+	</tbody>
+	<!-- #endif -->
+	<!-- #ifndef H5 -->
+	<view><slot></slot></view>
+	<!-- #endif -->
+</template>
+
+<script>
+export default {
+	name: 'uniBody',
+	options: {
+		virtualHost: true
+	},
+	data() {
+		return {
+			
+		}
+	},
+	created() {},
+	methods: {}
+}
+</script>
+
+<style>
+</style>
diff --git a/uni_modules/uni-table/components/uni-td/uni-td.vue b/uni_modules/uni-table/components/uni-td/uni-td.vue
new file mode 100644
index 0000000..9ce93e9
--- /dev/null
+++ b/uni_modules/uni-table/components/uni-td/uni-td.vue
@@ -0,0 +1,90 @@
+<template>
+	<!-- #ifdef H5 -->
+	<td class="uni-table-td" :rowspan="rowspan" :colspan="colspan" :class="{'table--border':border}" :style="{width:width + 'px','text-align':align}">
+		<slot></slot>
+	</td>
+	<!-- #endif -->
+	<!-- #ifndef H5 -->
+	<!-- :class="{'table--border':border}"  -->
+	<view class="uni-table-td" :class="{'table--border':border}" :style="{width:width + 'px','text-align':align}">
+		<slot></slot>
+	</view>
+	<!-- #endif -->
+	
+</template>
+
+<script>
+	/**
+	 * Td 单元格
+	 * @description 表格中的标准单元格组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
+	 * @property {Number} 	align = [left|center|right]	单元格对齐方式
+	 */
+	export default {
+		name: 'uniTd',
+		options: {
+			virtualHost: true
+		},
+		props: {
+			width: {
+				type: [String, Number],
+				default: ''
+			},
+			align: {
+				type: String,
+				default: 'left'
+			},
+			rowspan: {
+				type: [Number,String],
+				default: 1
+			},
+			colspan: {
+					type: [Number,String],
+				default: 1
+			}
+		},
+		data() {
+			return {
+				border: false
+			};
+		},
+		created() {
+			this.root = this.getTable()
+			this.border = this.root.border
+		},
+		methods: {
+			/**
+			 * 获取父元素实例
+			 */
+			getTable() {
+				let parent = this.$parent;
+				let parentName = parent.$options.name;
+				while (parentName !== 'uniTable') {
+					parent = parent.$parent;
+					if (!parent) return false;
+					parentName = parent.$options.name;
+				}
+				return parent;
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	$border-color:#EBEEF5;
+
+	.uni-table-td {
+		display: table-cell;
+		padding: 8px 10px;
+		font-size: 14px;
+		border-bottom: 1px $border-color solid;
+		font-weight: 400;
+		color: #606266;
+		line-height: 23px;
+		box-sizing: border-box;
+	}
+
+	.table--border {
+		border-right: 1px $border-color solid;
+	}
+</style>
diff --git a/uni_modules/uni-table/components/uni-th/filter-dropdown.vue b/uni_modules/uni-table/components/uni-th/filter-dropdown.vue
new file mode 100644
index 0000000..df22a71
--- /dev/null
+++ b/uni_modules/uni-table/components/uni-th/filter-dropdown.vue
@@ -0,0 +1,511 @@
+<template>
+	<view class="uni-filter-dropdown">
+		<view class="dropdown-btn" @click="onDropdown">
+			<view class="icon-select" :class="{active: canReset}" v-if="isSelect || isRange"></view>
+			<view class="icon-search" :class="{active: canReset}" v-if="isSearch">
+				<view class="icon-search-0"></view>
+				<view class="icon-search-1"></view>
+			</view>
+			<view class="icon-calendar" :class="{active: canReset}" v-if="isDate">
+				<view class="icon-calendar-0"></view>
+				<view class="icon-calendar-1"></view>
+			</view>
+		</view>
+		<view class="uni-dropdown-cover" v-if="isOpened" @click="handleClose"></view>
+		<view class="dropdown-popup dropdown-popup-right" v-if="isOpened" @click.stop>
+			<!-- select-->
+			<view v-if="isSelect" class="list">
+				<label class="flex-r a-i-c list-item" v-for="(item,index) in dataList" :key="index"
+					@click="onItemClick($event, index)">
+					<check-box class="check" :checked="item.checked" />
+					<view class="checklist-content">
+						<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
+					</view>
+				</label>
+			</view>
+			<view v-if="isSelect" class="flex-r opera-area">
+				<view class="flex-f btn btn-default" :class="{disable: !canReset}" @click="handleSelectReset">
+					{{resource.reset}}</view>
+				<view class="flex-f btn btn-submit" @click="handleSelectSubmit">{{resource.submit}}</view>
+			</view>
+			<!-- search -->
+			<view v-if="isSearch" class="search-area">
+				<input class="search-input" v-model="filterValue" />
+			</view>
+			<view v-if="isSearch" class="flex-r opera-area">
+				<view class="flex-f btn btn-submit" @click="handleSearchSubmit">{{resource.search}}</view>
+				<view class="flex-f btn btn-default" :class="{disable: !canReset}" @click="handleSearchReset">
+					{{resource.reset}}</view>
+			</view>
+			<!-- range -->
+			<view v-if="isRange">
+				<view class="input-label">{{resource.gt}}</view>
+				<input class="input" v-model="gtValue" />
+				<view class="input-label">{{resource.lt}}</view>
+				<input class="input" v-model="ltValue" />
+			</view>
+			<view v-if="isRange" class="flex-r opera-area">
+				<view class="flex-f btn btn-default" :class="{disable: !canReset}" @click="handleRangeReset">
+					{{resource.reset}}</view>
+				<view class="flex-f btn btn-submit" @click="handleRangeSubmit">{{resource.submit}}</view>
+			</view>
+			<!-- date -->
+			<view v-if="isDate">
+				<uni-datetime-picker ref="datetimepicker" :value="dateRange" type="datetimerange" return-type="timestamp" @change="datetimechange" @maskClick="timepickerclose">
+					<view></view>
+				</uni-datetime-picker>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import checkBox from '../uni-tr/table-checkbox.vue'
+
+	const resource = {
+		"reset": "重置",
+		"search": "搜索",
+		"submit": "确定",
+		"filter": "筛选",
+		"gt": "大于等于",
+		"lt": "小于等于",
+		"date": "日期范围"
+	}
+
+	const DropdownType = {
+		Select: "select",
+		Search: "search",
+		Range: "range",
+		Date: "date",
+		Timestamp: "timestamp"
+	}
+
+	export default {
+		name: 'FilterDropdown',
+		emits:['change'],
+		components: {
+			checkBox
+		},
+		options: {
+			virtualHost: true
+		},
+		props: {
+			filterType: {
+				type: String,
+				default: DropdownType.Select
+			},
+			filterData: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			mode: {
+				type: String,
+				default: 'default'
+			},
+			map: {
+				type: Object,
+				default () {
+					return {
+						text: 'text',
+						value: 'value'
+					}
+				}
+			},
+			filterDefaultValue: {
+				type: [Array,String],
+				default () {
+					return ""
+				}
+			}
+		},
+		computed: {
+			canReset() {
+				if (this.isSearch) {
+					return this.filterValue.length > 0
+				}
+				if (this.isSelect) {
+					return this.checkedValues.length > 0
+				}
+				if (this.isRange) {
+					return (this.gtValue.length > 0 && this.ltValue.length > 0)
+				}
+				if (this.isDate) {
+					return this.dateSelect.length > 0
+				}
+				return false
+			},
+			isSelect() {
+				return this.filterType === DropdownType.Select
+			},
+			isSearch() {
+				return this.filterType === DropdownType.Search
+			},
+			isRange() {
+				return this.filterType === DropdownType.Range
+			},
+			isDate() {
+				return (this.filterType === DropdownType.Date || this.filterType === DropdownType.Timestamp)
+			}
+		},
+		watch: {
+			filterData(newVal) {
+				this._copyFilters()
+			},
+			indeterminate(newVal) {
+				this.isIndeterminate = newVal
+			}
+		},
+		data() {
+			return {
+				resource,
+				enabled: true,
+				isOpened: false,
+				dataList: [],
+				filterValue: this.filterDefaultValue,
+				checkedValues: [],
+				gtValue: '',
+				ltValue: '',
+				dateRange: [],
+				dateSelect: []
+			};
+		},
+		created() {
+			this._copyFilters()
+		},
+		methods: {
+			_copyFilters() {
+				let dl = JSON.parse(JSON.stringify(this.filterData))
+				for (let i = 0; i < dl.length; i++) {
+					if (dl[i].checked === undefined) {
+						dl[i].checked = false
+					}
+				}
+				this.dataList = dl
+			},
+			openPopup() {
+				this.isOpened = true
+				if (this.isDate) {
+					this.$nextTick(() => {
+						if (!this.dateRange.length) {
+							this.resetDate()
+						}
+						this.$refs.datetimepicker.show()
+					})
+				}
+			},
+			closePopup() {
+				this.isOpened = false
+			},
+			handleClose(e) {
+				this.closePopup()
+			},
+			resetDate() {
+				let date = new Date()
+				let dateText = date.toISOString().split('T')[0]
+				this.dateRange = [dateText + ' 0:00:00', dateText + ' 23:59:59']
+			},
+			onDropdown(e) {
+				this.openPopup()
+			},
+			onItemClick(e, index) {
+				let items = this.dataList
+				let listItem = items[index]
+				if (listItem.checked === undefined) {
+					items[index].checked = true
+				} else {
+					items[index].checked = !listItem.checked
+				}
+
+				let checkvalues = []
+				for (let i = 0; i < items.length; i++) {
+					const item = items[i]
+					if (item.checked) {
+						checkvalues.push(item.value)
+					}
+				}
+				this.checkedValues = checkvalues
+			},
+			datetimechange(e) {
+				this.closePopup()
+				this.dateRange = e
+				this.dateSelect = e
+				this.$emit('change', {
+					filterType: this.filterType,
+					filter: e
+				})
+			},
+			timepickerclose(e) {
+				this.closePopup()
+			},
+			handleSelectSubmit() {
+				this.closePopup()
+				this.$emit('change', {
+					filterType: this.filterType,
+					filter: this.checkedValues
+				})
+			},
+			handleSelectReset() {
+				if (!this.canReset) {
+					return;
+				}
+				var items = this.dataList
+				for (let i = 0; i < items.length; i++) {
+					let item = items[i]
+					this.$set(item, 'checked', false)
+				}
+				this.checkedValues = []
+				this.handleSelectSubmit()
+			},
+			handleSearchSubmit() {
+				this.closePopup()
+				this.$emit('change', {
+					filterType: this.filterType,
+					filter: this.filterValue
+				})
+			},
+			handleSearchReset() {
+				if (!this.canReset) {
+					return;
+				}
+				this.filterValue = ''
+				this.handleSearchSubmit()
+			},
+			handleRangeSubmit(isReset) {
+				this.closePopup()
+				this.$emit('change', {
+					filterType: this.filterType,
+					filter: isReset === true ? [] : [parseInt(this.gtValue), parseInt(this.ltValue)]
+				})
+			},
+			handleRangeReset() {
+				if (!this.canReset) {
+					return;
+				}
+				this.gtValue = ''
+				this.ltValue = ''
+				this.handleRangeSubmit(true)
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	$uni-primary: #1890ff !default;
+	
+	.flex-r {
+		display: flex;
+		flex-direction: row;
+	}
+
+	.flex-f {
+		flex: 1;
+	}
+
+	.a-i-c {
+		align-items: center;
+	}
+
+	.j-c-c {
+		justify-content: center;
+	}
+
+	.icon-select {
+		width: 14px;
+		height: 16px;
+		border: solid 6px transparent;
+		border-top: solid 6px #ddd;
+		border-bottom: none;
+		background-color: #ddd;
+		background-clip: content-box;
+		box-sizing: border-box;
+	}
+
+	.icon-select.active {
+		background-color: $uni-primary;
+		border-top-color: $uni-primary;
+	}
+
+	.icon-search {
+		width: 12px;
+		height: 16px;
+		position: relative;
+	}
+
+	.icon-search-0 {
+		border: 2px solid #ddd;
+		border-radius: 8px;
+		width: 7px;
+		height: 7px;
+	}
+
+	.icon-search-1 {
+		position: absolute;
+		top: 8px;
+		right: 0;
+		width: 1px;
+		height: 7px;
+		background-color: #ddd;
+		transform: rotate(-45deg);
+	}
+
+	.icon-search.active .icon-search-0 {
+		border-color: $uni-primary;
+	}
+
+	.icon-search.active .icon-search-1 {
+		background-color: $uni-primary;
+	}
+
+	.icon-calendar {
+		color: #ddd;
+		width: 14px;
+		height: 16px;
+	}
+
+	.icon-calendar-0 {
+		height: 4px;
+		margin-top: 3px;
+		margin-bottom: 1px;
+		background-color: #ddd;
+		border-radius: 2px 2px 1px 1px;
+		position: relative;
+	}
+	.icon-calendar-0:before, .icon-calendar-0:after {
+		content: '';
+		position: absolute;
+		top: -3px;
+		width: 4px;
+		height: 3px;
+		border-radius: 1px;
+		background-color: #ddd;
+	}
+	.icon-calendar-0:before {
+		left: 2px;
+	}
+	.icon-calendar-0:after {
+		right: 2px;
+	}
+
+	.icon-calendar-1 {
+		height: 9px;
+		background-color: #ddd;
+		border-radius: 1px 1px 2px 2px;
+	}
+
+	.icon-calendar.active {
+		color: $uni-primary;
+	}
+
+	.icon-calendar.active .icon-calendar-0,
+	.icon-calendar.active .icon-calendar-1,
+	.icon-calendar.active .icon-calendar-0:before,
+	.icon-calendar.active .icon-calendar-0:after {
+		background-color: $uni-primary;
+	}
+
+	.uni-filter-dropdown {
+		position: relative;
+		font-weight: normal;
+	}
+
+	.dropdown-popup {
+		position: absolute;
+		top: 100%;
+		background-color: #fff;
+		box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
+		min-width: 150px;
+		z-index: 1000;
+	}
+
+	.dropdown-popup-left {
+		left: 0;
+	}
+
+	.dropdown-popup-right {
+		right: 0;
+	}
+
+	.uni-dropdown-cover {
+		position: fixed;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		background-color: transparent;
+		z-index: 100;
+	}
+
+	.list {
+		margin-top: 5px;
+		margin-bottom: 5px;
+	}
+
+	.list-item {
+		padding: 5px 10px;
+		text-align: left;
+	}
+
+	.list-item:hover {
+		background-color: #f0f0f0;
+	}
+
+	.check {
+		margin-right: 5px;
+	}
+
+	.search-area {
+		padding: 10px;
+	}
+
+	.search-input {
+		font-size: 12px;
+		border: 1px solid #f0f0f0;
+		border-radius: 3px;
+		padding: 2px 5px;
+		min-width: 150px;
+		text-align: left;
+	}
+
+	.input-label {
+		margin: 10px 10px 5px 10px;
+		text-align: left;
+	}
+
+	.input {
+		font-size: 12px;
+		border: 1px solid #f0f0f0;
+		border-radius: 3px;
+		margin: 10px;
+		padding: 2px 5px;
+		min-width: 150px;
+		text-align: left;
+	}
+
+	.opera-area {
+		cursor: default;
+		border-top: 1px solid #ddd;
+		padding: 5px;
+	}
+
+	.opera-area .btn {
+		font-size: 12px;
+		border-radius: 3px;
+		margin: 5px;
+		padding: 4px 4px;
+	}
+
+	.btn-default {
+		border: 1px solid #ddd;
+	}
+
+	.btn-default.disable {
+		border-color: transparent;
+	}
+
+	.btn-submit {
+		background-color: $uni-primary;
+		color: #ffffff;
+	}
+</style>
diff --git a/uni_modules/uni-table/components/uni-th/uni-th.vue b/uni_modules/uni-table/components/uni-th/uni-th.vue
new file mode 100644
index 0000000..14889dd
--- /dev/null
+++ b/uni_modules/uni-table/components/uni-th/uni-th.vue
@@ -0,0 +1,285 @@
+<template>
+	<!-- #ifdef H5 -->
+	<th :rowspan="rowspan" :colspan="colspan" class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: customWidth + 'px', 'text-align': align }">
+		<view class="uni-table-th-row">
+			<view class="uni-table-th-content" :style="{ 'justify-content': contentAlign }" @click="sort">
+				<slot></slot>
+				<view v-if="sortable" class="arrow-box">
+					<text class="arrow up" :class="{ active: ascending }" @click.stop="ascendingFn"></text>
+					<text class="arrow down" :class="{ active: descending }" @click.stop="descendingFn"></text>
+				</view>
+			</view>
+			<dropdown v-if="filterType || filterData.length" :filterDefaultValue="filterDefaultValue" :filterData="filterData" :filterType="filterType" @change="ondropdown"></dropdown>
+		</view>
+	</th>
+	<!-- #endif -->
+	<!-- #ifndef H5 -->
+	<view class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: customWidth + 'px', 'text-align': align }"><slot></slot></view>
+	<!-- #endif -->
+</template>
+
+<script>
+	// #ifdef H5
+	import dropdown from './filter-dropdown.vue'
+	// #endif
+/**
+ * Th 表头
+ * @description 表格内的表头单元格组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
+ * @property {Number | String} 	width 	单元格宽度（支持纯数字、携带单位px或rpx）
+ * @property {Boolean} 	sortable 					是否启用排序
+ * @property {Number} 	align = [left|center|right]	单元格对齐方式
+ * @value left   	单元格文字左侧对齐
+ * @value center	单元格文字居中
+ * @value right		单元格文字右侧对齐
+ * @property {Array}	filterData 筛选数据
+ * @property {String}	filterType	[search|select] 筛选类型
+ * @value search	关键字搜素
+ * @value select	条件选择
+ * @event {Function} sort-change 排序触发事件
+ */
+export default {
+	name: 'uniTh',
+	options: {
+		virtualHost: true
+	},
+	components: {
+		// #ifdef H5
+		dropdown
+		// #endif
+	},
+	emits:['sort-change','filter-change'],
+	props: {
+		width: {
+			type: [String, Number],
+			default: ''
+		},
+		align: {
+			type: String,
+			default: 'left'
+		},
+		rowspan: {
+			type: [Number, String],
+			default: 1
+		},
+		colspan: {
+			type: [Number, String],
+			default: 1
+		},
+		sortable: {
+			type: Boolean,
+			default: false
+		},
+		filterType: {
+			type: String,
+			default: ""
+		},
+		filterData: {
+			type: Array,
+			default () {
+				return []
+			}
+		},
+		filterDefaultValue: {
+			type: [Array,String],
+			default () {
+				return ""
+			}
+		}
+	},
+	data() {
+		return {
+			border: false,
+			ascending: false,
+			descending: false
+		}
+	},
+	computed: {
+		// 根据props中的width属性 自动匹配当前th的宽度(px)
+		customWidth(){
+			if(typeof this.width === 'number'){
+				return this.width
+			} else if(typeof this.width === 'string') {
+				let regexHaveUnitPx = new RegExp(/^[1-9][0-9]*px$/g)
+				let regexHaveUnitRpx = new RegExp(/^[1-9][0-9]*rpx$/g)
+				let regexHaveNotUnit = new RegExp(/^[1-9][0-9]*$/g)
+				if (this.width.match(regexHaveUnitPx) !== null) { // 携带了 px
+					return this.width.replace('px', '')
+				} else if (this.width.match(regexHaveUnitRpx) !== null) { // 携带了 rpx
+					let numberRpx = Number(this.width.replace('rpx', ''))
+					let widthCoe = uni.getSystemInfoSync().screenWidth / 750
+					return Math.round(numberRpx * widthCoe)
+				} else if (this.width.match(regexHaveNotUnit) !== null) { // 未携带 rpx或px 的纯数字 String
+					return this.width
+				} else { // 不符合格式
+					return ''
+				}
+			} else {
+				return ''
+			}
+		},
+		contentAlign() {
+			let align = 'left'
+			switch (this.align) {
+				case 'left':
+					align = 'flex-start'
+					break
+				case 'center':
+					align = 'center'
+					break
+				case 'right':
+					align = 'flex-end'
+					break
+			}
+			return align
+		}
+	},
+	created() {
+		this.root = this.getTable('uniTable')
+		this.rootTr = this.getTable('uniTr')
+		this.rootTr.minWidthUpdate(this.customWidth ? this.customWidth : 140)
+		this.border = this.root.border
+		this.root.thChildren.push(this)
+	},
+	methods: {
+		sort() {
+			if (!this.sortable) return
+			this.clearOther()
+			if (!this.ascending && !this.descending) {
+				this.ascending = true
+				this.$emit('sort-change', { order: 'ascending' })
+				return
+			}
+			if (this.ascending && !this.descending) {
+				this.ascending = false
+				this.descending = true
+				this.$emit('sort-change', { order: 'descending' })
+				return
+			}
+
+			if (!this.ascending && this.descending) {
+				this.ascending = false
+				this.descending = false
+				this.$emit('sort-change', { order: null })
+			}
+		},
+		ascendingFn() {
+			this.clearOther()
+			this.ascending = !this.ascending
+			this.descending = false
+			this.$emit('sort-change', { order: this.ascending ? 'ascending' : null })
+		},
+		descendingFn() {
+			this.clearOther()
+			this.descending = !this.descending
+			this.ascending = false
+			this.$emit('sort-change', { order: this.descending ? 'descending' : null })
+		},
+		clearOther() {
+			this.root.thChildren.map(item => {
+				if (item !== this) {
+					item.ascending = false
+					item.descending = false
+				}
+				return item
+			})
+		},
+		ondropdown(e) {
+			this.$emit("filter-change", e)
+		},
+		/**
+		 * 获取父元素实例
+		 */
+		getTable(name) {
+			let parent = this.$parent
+			let parentName = parent.$options.name
+			while (parentName !== name) {
+				parent = parent.$parent
+				if (!parent) return false
+				parentName = parent.$options.name
+			}
+			return parent
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+$border-color: #ebeef5;
+$uni-primary: #007aff !default;
+
+.uni-table-th {
+	padding: 12px 10px;
+	/* #ifndef APP-NVUE */
+	display: table-cell;
+	box-sizing: border-box;
+	/* #endif */
+	font-size: 14px;
+	font-weight: bold;
+	color: #909399;
+	border-bottom: 1px $border-color solid;
+}
+
+.uni-table-th-row {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+}
+
+.table--border {
+	border-right: 1px $border-color solid;
+}
+.uni-table-th-content {
+	display: flex;
+	align-items: center;
+	flex: 1;
+}
+.arrow-box {
+}
+.arrow {
+	display: block;
+	position: relative;
+	width: 10px;
+	height: 8px;
+	// border: 1px red solid;
+	left: 5px;
+	overflow: hidden;
+	cursor: pointer;
+}
+.down {
+	top: 3px;
+	::after {
+		content: '';
+		width: 8px;
+		height: 8px;
+		position: absolute;
+		left: 2px;
+		top: -5px;
+		transform: rotate(45deg);
+		background-color: #ccc;
+	}
+	&.active {
+		::after {
+			background-color: $uni-primary;
+		}
+	}
+}
+.up {
+	::after {
+		content: '';
+		width: 8px;
+		height: 8px;
+		position: absolute;
+		left: 2px;
+		top: 5px;
+		transform: rotate(45deg);
+		background-color: #ccc;
+	}
+	&.active {
+		::after {
+			background-color: $uni-primary;
+		}
+	}
+}
+</style>
diff --git a/uni_modules/uni-table/components/uni-thead/uni-thead.vue b/uni_modules/uni-table/components/uni-thead/uni-thead.vue
new file mode 100644
index 0000000..0dd18cd
--- /dev/null
+++ b/uni_modules/uni-table/components/uni-thead/uni-thead.vue
@@ -0,0 +1,129 @@
+<template>
+	<!-- #ifdef H5 -->
+	<thead class="uni-table-thead">
+		<tr class="uni-table-tr">
+			<th :rowspan="rowspan" colspan="1" class="checkbox" :class="{ 'tr-table--border': border }">
+				<table-checkbox :indeterminate="indeterminate" :checked="checked" @checkboxSelected="checkboxSelected"></table-checkbox>
+			</th>
+		</tr>
+		<slot></slot>
+	</thead>
+	<!-- #endif -->
+	<!-- #ifndef H5 -->
+	<view class="uni-table-thead"><slot></slot></view>
+	<!-- #endif -->
+</template>
+
+<script>
+import tableCheckbox from '../uni-tr/table-checkbox.vue'
+export default {
+	name: 'uniThead',
+	components: {
+		tableCheckbox
+	},
+	options: {
+		virtualHost: true
+	},
+	data() {
+		return {
+			border: false,
+			selection: false,
+			rowspan: 1,
+			indeterminate: false,
+			checked: false
+		}
+	},
+	created() {
+		this.root = this.getTable()
+		// #ifdef H5
+		this.root.theadChildren = this
+		// #endif
+		this.border = this.root.border
+		this.selection = this.root.type
+	},
+	methods: {
+		init(self) {
+			this.rowspan++
+		},
+		checkboxSelected(e) {
+			this.indeterminate = false
+			const backIndexData = this.root.backIndexData
+			const data = this.root.trChildren.filter(v => !v.disabled && v.keyValue)
+			if (backIndexData.length === data.length) {
+				this.checked = false
+				this.root.clearSelection()
+			} else {
+				this.checked = true
+				this.root.selectionAll()
+			}
+		},
+		/**
+		 * 获取父元素实例
+		 */
+		getTable(name = 'uniTable') {
+			let parent = this.$parent
+			let parentName = parent.$options.name
+			while (parentName !== name) {
+				parent = parent.$parent
+				if (!parent) return false
+				parentName = parent.$options.name
+			}
+			return parent
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+$border-color: #ebeef5;
+
+.uni-table-thead {
+	display: table-header-group;
+}
+
+.uni-table-tr {
+	/* #ifndef APP-NVUE */
+	display: table-row;
+	transition: all 0.3s;
+	box-sizing: border-box;
+	/* #endif */
+	border: 1px red solid;
+	background-color: #fafafa;
+}
+
+.checkbox {
+	padding: 0 8px;
+	width: 26px;
+	padding-left: 12px;
+	/* #ifndef APP-NVUE */
+	display: table-cell;
+	vertical-align: middle;
+	/* #endif */
+	color: #333;
+	font-weight: 500;
+	border-bottom: 1px $border-color solid;
+	font-size: 14px;
+	// text-align: center;
+}
+
+.tr-table--border {
+	border-right: 1px $border-color solid;
+}
+
+/* #ifndef APP-NVUE */
+.uni-table-tr {
+	::v-deep .uni-table-th {
+		&.table--border:last-child {
+			// border-right: none;
+		}
+	}
+
+	::v-deep .uni-table-td {
+		&.table--border:last-child {
+			// border-right: none;
+		}
+	}
+}
+
+/* #endif */
+</style>
diff --git a/uni_modules/uni-table/components/uni-tr/table-checkbox.vue b/uni_modules/uni-table/components/uni-tr/table-checkbox.vue
new file mode 100644
index 0000000..1089187
--- /dev/null
+++ b/uni_modules/uni-table/components/uni-tr/table-checkbox.vue
@@ -0,0 +1,179 @@
+<template>
+	<view class="uni-table-checkbox" @click="selected">
+		<view v-if="!indeterminate" class="checkbox__inner" :class="{'is-checked':isChecked,'is-disable':isDisabled}">
+			<view class="checkbox__inner-icon"></view>
+		</view>
+		<view v-else class="checkbox__inner checkbox--indeterminate">
+			<view class="checkbox__inner-icon"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'TableCheckbox',
+		emits:['checkboxSelected'],
+		props: {
+			indeterminate: {
+				type: Boolean,
+				default: false
+			},
+			checked: {
+				type: [Boolean,String],
+				default: false
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			index: {
+				type: Number,
+				default: -1
+			},
+			cellData: {
+				type: Object,
+				default () {
+					return {}
+				}
+			}
+		},
+		watch:{
+			checked(newVal){
+				if(typeof this.checked === 'boolean'){
+					this.isChecked = newVal
+				}else{
+					this.isChecked = true
+				}
+			},
+			indeterminate(newVal){
+				this.isIndeterminate = newVal
+			}
+		},
+		data() {
+			return {
+				isChecked: false,
+				isDisabled: false,
+				isIndeterminate:false
+			}
+		},
+		created() {
+			if(typeof this.checked === 'boolean'){
+				this.isChecked = this.checked
+			}
+			this.isDisabled = this.disabled
+		},
+		methods: {
+			selected() {
+				if (this.isDisabled) return
+				this.isIndeterminate = false
+				this.isChecked = !this.isChecked
+				this.$emit('checkboxSelected', {
+					checked: this.isChecked,
+					data: this.cellData
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	$uni-primary: #007aff !default;
+	$border-color: #DCDFE6;
+	$disable:0.4;
+
+	.uni-table-checkbox {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		margin: 5px 0;
+		cursor: pointer;
+
+		// 多选样式
+		.checkbox__inner {
+			/* #ifndef APP-NVUE */
+			flex-shrink: 0;
+			box-sizing: border-box;
+			/* #endif */
+			position: relative;
+			width: 16px;
+			height: 16px;
+			border: 1px solid $border-color;
+			border-radius: 2px;
+			background-color: #fff;
+			z-index: 1;
+
+			.checkbox__inner-icon {
+				position: absolute;
+				/* #ifdef APP-NVUE */
+				top: 2px;
+				/* #endif */
+				/* #ifndef APP-NVUE */
+				top: 2px;
+				/* #endif */
+				left: 5px;
+				height: 7px;
+				width: 3px;
+				border: 1px solid #fff;
+				border-left: 0;
+				border-top: 0;
+				opacity: 0;
+				transform-origin: center;
+				transform: rotate(45deg);
+				box-sizing: content-box;
+			}
+
+			&.checkbox--indeterminate {
+				border-color: $uni-primary;
+				background-color: $uni-primary;
+
+				.checkbox__inner-icon {
+					position: absolute;
+					opacity: 1;
+					transform: rotate(0deg);
+					height: 2px;
+					top: 0;
+					bottom: 0;
+					margin: auto;
+					left: 0px;
+					right: 0px;
+					bottom: 0;
+					width: auto;
+					border: none;
+					border-radius: 2px;
+					transform: scale(0.5);
+					background-color: #fff;
+				}
+			}
+			&:hover{
+				border-color: $uni-primary;
+			}
+			// 禁用
+			&.is-disable {
+				/* #ifdef H5 */
+				cursor: not-allowed;
+				/* #endif */
+				background-color: #F2F6FC;
+				border-color: $border-color;
+			}
+
+			// 选中
+			&.is-checked {
+				border-color: $uni-primary;
+				background-color: $uni-primary;
+
+				.checkbox__inner-icon {
+					opacity: 1;
+					transform: rotate(45deg);
+				}
+
+				// 选中禁用
+				&.is-disable {
+					opacity: $disable;
+				}
+			}
+			
+		}
+	}
+</style>
diff --git a/uni_modules/uni-table/components/uni-tr/uni-tr.vue b/uni_modules/uni-table/components/uni-tr/uni-tr.vue
new file mode 100644
index 0000000..4cb85f5
--- /dev/null
+++ b/uni_modules/uni-table/components/uni-tr/uni-tr.vue
@@ -0,0 +1,175 @@
+<template>
+	<!-- #ifdef H5 -->
+	<tr class="uni-table-tr">
+		<th v-if="selection === 'selection' && ishead" class="checkbox" :class="{ 'tr-table--border': border }">
+			<table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled" @checkboxSelected="checkboxSelected"></table-checkbox>
+		</th>
+		<slot></slot>
+		<!-- <uni-th class="th-fixed">123</uni-th> -->
+	</tr>
+	<!-- #endif -->
+	<!-- #ifndef H5 -->
+	<view class="uni-table-tr">
+		<view v-if="selection === 'selection' " class="checkbox" :class="{ 'tr-table--border': border }">
+			<table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled" @checkboxSelected="checkboxSelected"></table-checkbox>
+		</view>
+		<slot></slot>
+	</view>
+	<!-- #endif -->
+</template>
+
+<script>
+	import tableCheckbox from './table-checkbox.vue'
+/**
+ * Tr 表格行组件
+ * @description 表格行组件 仅包含 th,td 组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=
+ */
+export default {
+	name: 'uniTr',
+	components: { tableCheckbox },
+	props: {
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		keyValue: {
+			type: [String, Number],
+			default: ''
+		}
+	},
+	options: {
+		virtualHost: true
+	},
+	data() {
+		return {
+			value: false,
+			border: false,
+			selection: false,
+			widthThArr: [],
+			ishead: true,
+			checked: false,
+			indeterminate:false
+		}
+	},
+	created() {
+		this.root = this.getTable()
+		this.head = this.getTable('uniThead')
+		if (this.head) {
+			this.ishead = false
+			this.head.init(this)
+		}
+		this.border = this.root.border
+		this.selection = this.root.type
+		this.root.trChildren.push(this)
+		const rowData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
+		if(rowData){
+			this.rowData = rowData
+		}
+		this.root.isNodata()
+	},
+	mounted() {
+		if (this.widthThArr.length > 0) {
+			const selectionWidth = this.selection === 'selection' ? 50 : 0
+			this.root.minWidth = Number(this.widthThArr.reduce((a, b) => Number(a) + Number(b))) + selectionWidth;
+		}
+	},
+	// #ifndef VUE3
+	destroyed() {
+		const index = this.root.trChildren.findIndex(i => i === this)
+		this.root.trChildren.splice(index, 1)
+		this.root.isNodata()
+	},
+	// #endif
+	// #ifdef VUE3
+	unmounted() {
+		const index = this.root.trChildren.findIndex(i => i === this)
+		this.root.trChildren.splice(index, 1)
+		this.root.isNodata()
+	},
+	// #endif
+	methods: {
+		minWidthUpdate(width) {
+			this.widthThArr.push(width)
+			if (this.widthThArr.length > 0) {
+				const selectionWidth = this.selection === 'selection' ? 50 : 0;
+				this.root.minWidth = Number(this.widthThArr.reduce((a, b) => Number(a) + Number(b))) + selectionWidth;
+			}
+		},
+		// 选中
+		checkboxSelected(e) {
+			let rootData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
+			this.checked = e.checked
+			this.root.check(rootData||this, e.checked,rootData? this.keyValue:null)
+		},
+		change(e) {
+			this.root.trChildren.forEach(item => {
+				if (item === this) {
+					this.root.check(this, e.detail.value.length > 0 ? true : false)
+				}
+			})
+		},
+		/**
+		 * 获取父元素实例
+		 */
+		getTable(name = 'uniTable') {
+			let parent = this.$parent
+			let parentName = parent.$options.name
+			while (parentName !== name) {
+				parent = parent.$parent
+				if (!parent) return false
+				parentName = parent.$options.name
+			}
+			return parent
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+$border-color: #ebeef5;
+
+.uni-table-tr {
+	/* #ifndef APP-NVUE */
+	display: table-row;
+	transition: all 0.3s;
+	box-sizing: border-box;
+	/* #endif */
+}
+
+.checkbox {
+	padding: 0 8px;
+	width: 26px;
+	padding-left: 12px;
+	/* #ifndef APP-NVUE */
+	display: table-cell;
+	vertical-align: middle;
+	/* #endif */
+	color: #333;
+	font-weight: 500;
+	border-bottom: 1px $border-color solid;
+	font-size: 14px;
+	// text-align: center;
+}
+
+.tr-table--border {
+	border-right: 1px $border-color solid;
+}
+
+/* #ifndef APP-NVUE */
+.uni-table-tr {
+	::v-deep .uni-table-th {
+		&.table--border:last-child {
+			// border-right: none;
+		}
+	}
+
+	::v-deep .uni-table-td {
+		&.table--border:last-child {
+			// border-right: none;
+		}
+	}
+}
+
+/* #endif */
+</style>
diff --git a/uni_modules/uni-table/i18n/en.json b/uni_modules/uni-table/i18n/en.json
new file mode 100644
index 0000000..e32023c
--- /dev/null
+++ b/uni_modules/uni-table/i18n/en.json
@@ -0,0 +1,9 @@
+{
+	"filter-dropdown.reset": "Reset",
+	"filter-dropdown.search": "Search",
+	"filter-dropdown.submit": "Submit",
+	"filter-dropdown.filter": "Filter",
+	"filter-dropdown.gt": "Greater or equal to",
+	"filter-dropdown.lt": "Less than or equal to",
+	"filter-dropdown.date": "Date"
+}
diff --git a/uni_modules/uni-table/i18n/es.json b/uni_modules/uni-table/i18n/es.json
new file mode 100644
index 0000000..9afd04b
--- /dev/null
+++ b/uni_modules/uni-table/i18n/es.json
@@ -0,0 +1,9 @@
+{
+	"filter-dropdown.reset": "Reiniciar",
+	"filter-dropdown.search": "Búsqueda",
+	"filter-dropdown.submit": "Entregar",
+	"filter-dropdown.filter": "Filtrar",
+	"filter-dropdown.gt": "Mayor o igual a",
+	"filter-dropdown.lt": "Menos que o igual a",
+	"filter-dropdown.date": "Fecha"
+}
diff --git a/uni_modules/uni-table/i18n/fr.json b/uni_modules/uni-table/i18n/fr.json
new file mode 100644
index 0000000..b006237
--- /dev/null
+++ b/uni_modules/uni-table/i18n/fr.json
@@ -0,0 +1,9 @@
+{
+	"filter-dropdown.reset": "Réinitialiser",
+	"filter-dropdown.search": "Chercher",
+	"filter-dropdown.submit": "Soumettre",
+	"filter-dropdown.filter": "Filtre",
+	"filter-dropdown.gt": "Supérieur ou égal à",
+	"filter-dropdown.lt": "Inférieur ou égal à",
+	"filter-dropdown.date": "Date"
+}
diff --git a/uni_modules/uni-table/i18n/index.js b/uni_modules/uni-table/i18n/index.js
new file mode 100644
index 0000000..2469dd0
--- /dev/null
+++ b/uni_modules/uni-table/i18n/index.js
@@ -0,0 +1,12 @@
+import en from './en.json'
+import es from './es.json'
+import fr from './fr.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	es,
+	fr,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
+}
diff --git a/uni_modules/uni-table/i18n/zh-Hans.json b/uni_modules/uni-table/i18n/zh-Hans.json
new file mode 100644
index 0000000..862af17
--- /dev/null
+++ b/uni_modules/uni-table/i18n/zh-Hans.json
@@ -0,0 +1,9 @@
+{
+	"filter-dropdown.reset": "重置",
+	"filter-dropdown.search": "搜索",
+	"filter-dropdown.submit": "确定",
+	"filter-dropdown.filter": "筛选",
+	"filter-dropdown.gt": "大于等于",
+	"filter-dropdown.lt": "小于等于",
+	"filter-dropdown.date": "日期范围"
+}
diff --git a/uni_modules/uni-table/i18n/zh-Hant.json b/uni_modules/uni-table/i18n/zh-Hant.json
new file mode 100644
index 0000000..64f8061
--- /dev/null
+++ b/uni_modules/uni-table/i18n/zh-Hant.json
@@ -0,0 +1,9 @@
+{
+	"filter-dropdown.reset": "重置",
+	"filter-dropdown.search": "搜索",
+	"filter-dropdown.submit": "確定",
+	"filter-dropdown.filter": "篩選",
+	"filter-dropdown.gt": "大於等於",
+	"filter-dropdown.lt": "小於等於",
+	"filter-dropdown.date": "日期範圍"
+}
diff --git a/uni_modules/uni-table/package.json b/uni_modules/uni-table/package.json
new file mode 100644
index 0000000..a52821b
--- /dev/null
+++ b/uni_modules/uni-table/package.json
@@ -0,0 +1,83 @@
+{
+  "id": "uni-table",
+  "displayName": "uni-table 表格",
+  "version": "1.2.4",
+  "description": "表格组件，多用于展示多条结构类似的数据，如",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "table",
+    "表格"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss","uni-datetime-picker"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "n"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "n",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "n"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-table/readme.md b/uni_modules/uni-table/readme.md
new file mode 100644
index 0000000..bb08c79
--- /dev/null
+++ b/uni_modules/uni-table/readme.md
@@ -0,0 +1,13 @@
+
+
+## Table 表单
+> 组件名：``uni-table``，代码块： `uTable`。
+
+用于展示多条结构类似的数据
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-table)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
+
+
diff --git a/uni_modules/uni-tag/changelog.md b/uni_modules/uni-tag/changelog.md
new file mode 100644
index 0000000..ddee87a
--- /dev/null
+++ b/uni_modules/uni-tag/changelog.md
@@ -0,0 +1,23 @@
+## 2.1.1（2024-03-20）
+- 优化 app下边框过窄导致不显示的bug
+## 2.1.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-tag](https://uniapp.dcloud.io/component/uniui/uni-tag)
+## 2.0.0（2021-11-09）
+- 新增 提供组件设计资源，组件样式调整
+- 移除 插槽
+- 移除 type 属性的 royal 选项
+## 1.1.1（2021-08-11）
+- type 不是 default 时，size 为 small 字体大小显示不正确
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.7（2021-06-18）
+- 修复 uni-tag 在字节跳动小程序上 css 类名编译错误的 bug
+## 1.0.6（2021-06-04）
+- 修复 未定义 sass 变量 "$uni-color-royal" 的bug
+## 1.0.5（2021-05-10）
+- 修复 royal 类型无效的bug
+- 修复 uni-tag 宽度不自适应的bug
+- 新增 uni-tag 支持属性 custom-style 自定义样式
+## 1.0.4（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-tag/components/uni-tag/uni-tag.vue b/uni_modules/uni-tag/components/uni-tag/uni-tag.vue
new file mode 100644
index 0000000..7274436
--- /dev/null
+++ b/uni_modules/uni-tag/components/uni-tag/uni-tag.vue
@@ -0,0 +1,252 @@
+<template>
+	<text class="uni-tag" v-if="text" :class="classes" :style="customStyle" @click="onClick">{{text}}</text>
+</template>
+
+<script>
+	/**
+	 * Tag 标签
+	 * @description 用于展示1个或多个文字标签，可点击切换选中、不选中的状态
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=35
+	 * @property {String} text 标签内容
+	 * @property {String} size = [default|small|mini] 大小尺寸
+	 * 	@value default 正常
+	 * 	@value small 小尺寸
+	 * 	@value mini 迷你尺寸
+	 * @property {String} type = [default|primary|success｜warning｜error]  颜色类型
+	 * 	@value default 灰色
+	 * 	@value primary 蓝色
+	 * 	@value success 绿色
+	 * 	@value warning 黄色
+	 * 	@value error 红色
+	 * @property {Boolean} disabled = [true|false] 是否为禁用状态
+	 * @property {Boolean} inverted = [true|false] 是否无需背景颜色（空心标签）
+	 * @property {Boolean} circle = [true|false] 是否为圆角
+	 * @event {Function} click 点击 Tag 触发事件
+	 */
+
+	export default {
+		name: "UniTag",
+		emits: ['click'],
+		props: {
+			type: {
+				// 标签类型default、primary、success、warning、error、royal
+				type: String,
+				default: "default"
+			},
+			size: {
+				// 标签大小 normal, small
+				type: String,
+				default: "normal"
+			},
+			// 标签内容
+			text: {
+				type: String,
+				default: ""
+			},
+			disabled: {
+				// 是否为禁用状态
+				type: [Boolean, String],
+				default: false
+			},
+			inverted: {
+				// 是否为空心
+				type: [Boolean, String],
+				default: false
+			},
+			circle: {
+				// 是否为圆角样式
+				type: [Boolean, String],
+				default: false
+			},
+			mark: {
+				// 是否为标记样式
+				type: [Boolean, String],
+				default: false
+			},
+			customStyle: {
+				type: String,
+				default: ''
+			}
+		},
+		computed: {
+			classes() {
+				const {
+					type,
+					disabled,
+					inverted,
+					circle,
+					mark,
+					size,
+					isTrue
+				} = this
+				const classArr = [
+					'uni-tag--' + type,
+					'uni-tag--' + size,
+					isTrue(disabled) ? 'uni-tag--disabled' : '',
+					isTrue(inverted) ? 'uni-tag--' + type + '--inverted' : '',
+					isTrue(circle) ? 'uni-tag--circle' : '',
+					isTrue(mark) ? 'uni-tag--mark' : '',
+					// type === 'default' ? 'uni-tag--default' : 'uni-tag-text',
+					isTrue(inverted) ? 'uni-tag--inverted uni-tag-text--' + type : '',
+					size === 'small' ? 'uni-tag-text--small' : ''
+				]
+				// 返回类的字符串，兼容字节小程序
+				return classArr.join(' ')
+			}
+		},
+		methods: {
+			isTrue(value) {
+				return value === true || value === 'true'
+			},
+			onClick() {
+				if (this.isTrue(this.disabled)) return
+				this.$emit("click");
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	$uni-primary: #2979ff !default;
+	$uni-success: #18bc37 !default;
+	$uni-warning: #f3a73f !default;
+	$uni-error: #e43d33 !default;
+	$uni-info: #8f939c !default;
+
+
+	$tag-default-pd: 4px 7px;
+	$tag-small-pd: 2px 5px;
+	$tag-mini-pd: 1px 3px;
+
+	.uni-tag {
+		line-height: 14px;
+		font-size: 12px;
+		font-weight: 200;
+		padding: $tag-default-pd;
+		color: #fff;
+		border-radius: 3px;
+		background-color: $uni-info;
+		border-width: 1px;
+		border-style: solid;
+		border-color: $uni-info;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+
+		// size attr
+		&--default {
+			font-size: 12px;
+		}
+
+		&--default--inverted {
+			color: $uni-info;
+			border-color: $uni-info;
+		}
+
+		&--small {
+			padding: $tag-small-pd;
+			font-size: 12px;
+			border-radius: 2px;
+		}
+
+		&--mini {
+			padding: $tag-mini-pd;
+			font-size: 12px;
+			border-radius: 2px;
+		}
+
+		// type attr
+		&--primary {
+			background-color: $uni-primary;
+			border-color: $uni-primary;
+			color: #fff;
+		}
+
+		&--success {
+			color: #fff;
+			background-color: $uni-success;
+			border-color: $uni-success;
+		}
+
+		&--warning {
+			color: #fff;
+			background-color: $uni-warning;
+			border-color: $uni-warning;
+		}
+
+		&--error {
+			color: #fff;
+			background-color: $uni-error;
+			border-color: $uni-error;
+		}
+
+		&--primary--inverted {
+			color: $uni-primary;
+			border-color: $uni-primary;
+		}
+
+		&--success--inverted {
+			color: $uni-success;
+			border-color: $uni-success;
+		}
+
+		&--warning--inverted {
+			color: $uni-warning;
+			border-color: $uni-warning;
+		}
+
+		&--error--inverted {
+			color: $uni-error;
+			border-color: $uni-error;
+		}
+
+		&--inverted {
+			background-color: #fff;
+		}
+
+		// other attr
+		&--circle {
+			border-radius: 15px;
+		}
+
+		&--mark {
+			border-top-left-radius: 0;
+			border-bottom-left-radius: 0;
+			border-top-right-radius: 15px;
+			border-bottom-right-radius: 15px;
+		}
+
+		&--disabled {
+			opacity: 0.5;
+			/* #ifdef H5 */
+			cursor: not-allowed;
+			/* #endif */
+		}
+	}
+
+
+	.uni-tag-text {
+		color: #fff;
+		font-size: 14px;
+
+		&--primary {
+			color: $uni-primary;
+		}
+
+		&--success {
+			color: $uni-success;
+		}
+
+		&--warning {
+			color: $uni-warning;
+		}
+
+		&--error {
+			color: $uni-error;
+		}
+
+		&--small {
+			font-size: 12px;
+		}
+	}
+</style>
diff --git a/uni_modules/uni-tag/package.json b/uni_modules/uni-tag/package.json
new file mode 100644
index 0000000..71b41eb
--- /dev/null
+++ b/uni_modules/uni-tag/package.json
@@ -0,0 +1,84 @@
+{
+  "id": "uni-tag",
+  "displayName": "uni-tag 标签",
+  "version": "2.1.1",
+  "description": "Tag 组件，用于展示1个或多个文字标签，可点击切换选中、不选中的状态。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "",
+    "tag",
+    "标签"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-tag/readme.md b/uni_modules/uni-tag/readme.md
new file mode 100644
index 0000000..6e78ff5
--- /dev/null
+++ b/uni_modules/uni-tag/readme.md
@@ -0,0 +1,13 @@
+
+
+## Tag 标签
+> **组件名：uni-tag**
+> 代码块： `uTag`
+
+
+用于展示1个或多个文字标签，可点击切换选中、不选中的状态 。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-tag)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
diff --git a/uni_modules/uni-title/changelog.md b/uni_modules/uni-title/changelog.md
new file mode 100644
index 0000000..7626216
--- /dev/null
+++ b/uni_modules/uni-title/changelog.md
@@ -0,0 +1,10 @@
+## 1.1.1（2022-05-19）
+- 修改组件描述
+## 1.1.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-title](https://uniapp.dcloud.io/component/uniui/uni-title)
+## 1.0.2（2021-05-12）
+- 新增 示例地址
+- 修复 示例项目缺少组件的Bug
+## 1.0.1（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-title/components/uni-title/uni-title.vue b/uni_modules/uni-title/components/uni-title/uni-title.vue
new file mode 100644
index 0000000..bf4f926
--- /dev/null
+++ b/uni_modules/uni-title/components/uni-title/uni-title.vue
@@ -0,0 +1,171 @@
+<template>
+	<view class="uni-title__box" :style="{'align-items':textAlign}">
+		<text class="uni-title__base" :class="['uni-'+type]" :style="{'color':color}">{{title}}</text>
+	</view>
+</template>
+
+<script>
+	/**
+	 * Title 标题
+	 * @description 标题，通常用于记录页面标题，使用当前组件，uni-app 如果开启统计，将会自动统计页面标题
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=1066
+	 * @property {String} type = [h1|h2|h3|h4|h5] 标题类型
+	 * 	@value h1 一级标题
+	 * 	@value h2 二级标题
+	 * 	@value h3 三级标题
+	 * 	@value h4 四级标题
+	 * 	@value h5 五级标题
+	 * @property {String} title 标题内容
+	 * @property {String} align = [left|center|right] 对齐方式
+	 * 	@value left 做对齐
+	 * 	@value center 居中对齐
+	 * 	@value right 右对齐
+	 * @property {String} color 字体颜色
+	 * @property {Boolean} stat = [true|false] 是否开启统计功能呢，如不填写type值，默认为开启，填写 type 属性，默认为关闭
+	 */
+	export default {
+		name:"UniTitle",
+		props: {
+			type: {
+				type: String,
+				default: ''
+			},
+			title: {
+				type: String,
+				default: ''
+			},
+			align: {
+				type: String,
+				default: 'left'
+			},
+			color: {
+				type: String,
+				default: '#333333'
+			},
+			stat: {
+				type: [Boolean, String],
+				default: ''
+			}
+		},
+		data() {
+			return {
+
+			};
+		},
+		computed: {
+			textAlign() {
+				let align = 'center';
+				switch (this.align) {
+					case 'left':
+						align = 'flex-start'
+						break;
+					case 'center':
+						align = 'center'
+						break;
+					case 'right':
+						align = 'flex-end'
+						break;
+				}
+				return align
+			}
+		},
+		watch: {
+			title(newVal) {
+				if (this.isOpenStat()) {
+					// 上报数据
+					if (uni.report) {
+						uni.report('title', this.title)
+					}
+				}
+			}
+		},
+		mounted() {
+			if (this.isOpenStat()) {
+				// 上报数据
+				if (uni.report) {
+					uni.report('title', this.title)
+				}
+			}
+		},
+		methods: {
+			isOpenStat() {
+				if (this.stat === '') {
+					this.isStat = false
+				}
+				let stat_type = (typeof(this.stat) === 'boolean' && this.stat) || (typeof(this.stat) === 'string' && this.stat !==
+					'')
+				if (this.type === "") {
+					this.isStat = true
+					if (this.stat.toString() === 'false') {
+						this.isStat = false
+					}
+				}
+
+				if (this.type !== '') {
+					this.isStat = true
+					if (stat_type) {
+						this.isStat = true
+					} else {
+						this.isStat = false
+					}
+				}
+				return this.isStat
+			}
+		}
+	}
+</script>
+
+<style>
+	/* .uni-title {
+
+	} */
+	.uni-title__box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: center;
+		padding: 8px 0;
+		flex: 1;
+	}
+
+	.uni-title__base {
+		font-size: 15px;
+		color: #333;
+		font-weight: 500;
+	}
+
+	.uni-h1 {
+		font-size: 20px;
+		color: #333;
+		font-weight: bold;
+	}
+
+	.uni-h2 {
+		font-size: 18px;
+		color: #333;
+		font-weight: bold;
+	}
+
+	.uni-h3 {
+		font-size: 16px;
+		color: #333;
+		font-weight: bold;
+		/* font-weight: 400; */
+	}
+
+	.uni-h4 {
+		font-size: 14px;
+		color: #333;
+		font-weight: bold;
+		/* font-weight: 300; */
+	}
+
+	.uni-h5 {
+		font-size: 12px;
+		color: #333;
+		font-weight: bold;
+		/* font-weight: 200; */
+	}
+</style>
diff --git a/uni_modules/uni-title/package.json b/uni_modules/uni-title/package.json
new file mode 100644
index 0000000..2249f5a
--- /dev/null
+++ b/uni_modules/uni-title/package.json
@@ -0,0 +1,88 @@
+{
+  "id": "uni-title",
+  "displayName": "uni-title 章节标题",
+  "version": "1.1.1",
+  "description": "章节标题，通常用于记录页面标题，使用当前组件，uni-app 如果开启统计，将会自动统计页面标题",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "标题",
+    "章节",
+    "章节标题",
+    ""
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-title/readme.md b/uni_modules/uni-title/readme.md
new file mode 100644
index 0000000..0e60b1b
--- /dev/null
+++ b/uni_modules/uni-title/readme.md
@@ -0,0 +1,14 @@
+
+
+## Title 标题
+> **组件名：uni-title**
+> 代码块： `uTitle`
+
+
+章节标题，通常用于记录页面标题，使用当前组件，uni-app 如果开启统计，将会自动统计页面标题 。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-title)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
+
diff --git a/uni_modules/uni-tooltip/changelog.md b/uni_modules/uni-tooltip/changelog.md
new file mode 100644
index 0000000..285b676
--- /dev/null
+++ b/uni_modules/uni-tooltip/changelog.md
@@ -0,0 +1,16 @@
+## 0.2.4（2024-04-23）
+- 修复 弹出位置默认值不一致导致的错位
+## 0.2.3（2024-03-20）
+- 修复 弹出位置修正
+## 0.2.2（2024-01-15）
+- 新增 placement支持设置四个方向:top bottom left right
+## 0.2.1（2022-05-09）
+- 修复 content 为空时仍然弹出的bug
+## 0.2.0（2022-05-07）
+**注意：破坏性更新**
+- 更新 text 属性变更为 content
+- 更新 移除 width 属性
+## 0.1.1（2022-04-27）
+- 修复 组件根 text 嵌套组件 warning
+## 0.1.0（2022-04-21）
+- 初始化
diff --git a/uni_modules/uni-tooltip/components/uni-tooltip/uni-tooltip.vue b/uni_modules/uni-tooltip/components/uni-tooltip/uni-tooltip.vue
new file mode 100644
index 0000000..476a7dd
--- /dev/null
+++ b/uni_modules/uni-tooltip/components/uni-tooltip/uni-tooltip.vue
@@ -0,0 +1,108 @@
+<template>
+	<view class="uni-tooltip">
+		<slot></slot>
+		<view v-if="content || $slots.content" class="uni-tooltip-popup" :style="initPlacement">
+			<slot name="content">
+				{{content}}
+			</slot>
+		</view>
+	</view>
+</template>
+
+
+<script>
+	/**
+	 * Tooltip 提示文字
+	 * @description 常用于展示鼠标 hover 时的提示信息。
+	 * @tutorial https://uniapp.dcloud.io/component/uniui/uni-tooltip
+	 * @property {String} content   弹出层显示的内容
+	 * @property {String}  placement出现位置, 目前支持：left right top bottom
+	 */
+	export default {
+		name: "uni-tooltip",
+		data() {
+			return {
+
+			};
+		},
+		methods: {},
+		computed: {
+			initPlacement() {
+				let style = {};
+				switch (this.placement) {
+					case 'left':
+						style = {
+							top: '50%',
+							transform: 'translateY(-50%)',
+							right: '100%',
+							"margin-right": '10rpx',
+						}
+						break;
+					case 'right':
+						style = {
+							top: '50%',
+							transform: 'translateY(-50%)',
+							left: '100%',
+							"margin-left": '10rpx',
+						}
+						break;
+					case 'top':
+						style = {
+							bottom: '100%',
+							transform: 'translateX(-50%)',
+							left: '50%',
+							"margin-bottom": '10rpx',
+						}
+						break;
+					case 'bottom':
+						style = {
+							top: '100%',
+							transform: 'translateX(-50%)',
+							left: '50%',
+							"margin-top": '10rpx',
+						}
+						break;
+				}
+				return style;
+			}
+		},
+		props: {
+			content: {
+				type: String,
+				default: ''
+			},
+
+			placement: {
+				type: String,
+				default: 'bottom'
+			},
+		}
+	}
+</script>
+
+<style>
+	.uni-tooltip {
+		position: relative;
+		cursor: pointer;
+		display: inline-block;
+	}
+
+	.uni-tooltip-popup {
+		z-index: 1;
+		display: none;
+		position: absolute;
+		background-color: #333;
+		border-radius: 8px;
+		color: #fff;
+		font-size: 12px;
+		text-align: left;
+		line-height: 16px;
+		padding: 12px;
+		overflow: auto;
+	}
+
+
+	.uni-tooltip:hover .uni-tooltip-popup {
+		display: block;
+	}
+</style>
diff --git a/uni_modules/uni-tooltip/package.json b/uni_modules/uni-tooltip/package.json
new file mode 100644
index 0000000..44158e1
--- /dev/null
+++ b/uni_modules/uni-tooltip/package.json
@@ -0,0 +1,86 @@
+{
+  "id": "uni-tooltip",
+  "displayName": "uni-tooltip 提示文字",
+  "version": "0.2.4",
+  "description": "Tooltip 提示文字",
+  "keywords": [
+    "uni-tooltip",
+    "uni-ui",
+    "tooltip",
+    "tip",
+    "文字提示"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无 ",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "n"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "y"
+        },
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "u",
+          "百度": "u",
+          "字节跳动": "u",
+          "QQ": "u",
+          "京东": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-tooltip/readme.md b/uni_modules/uni-tooltip/readme.md
new file mode 100644
index 0000000..faafa2e
--- /dev/null
+++ b/uni_modules/uni-tooltip/readme.md
@@ -0,0 +1,8 @@
+## Badge 数字角标
+> **组件名：uni-tooltip**
+> 代码块： `uTooltip`
+
+数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景，
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-tooltip)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
diff --git a/uni_modules/uni-transition/changelog.md b/uni_modules/uni-transition/changelog.md
new file mode 100644
index 0000000..faaf336
--- /dev/null
+++ b/uni_modules/uni-transition/changelog.md
@@ -0,0 +1,24 @@
+## 1.3.3（2024-04-23）
+- 修复 当元素会受变量影响自动隐藏的bug
+## 1.3.2（2023-05-04）
+- 修复 NVUE 平台报错的问题
+## 1.3.1（2021-11-23）
+- 修复 init 方法初始化问题
+## 1.3.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-transition](https://uniapp.dcloud.io/component/uniui/uni-transition)
+## 1.2.1（2021-09-27）
+- 修复 init 方法不生效的 Bug
+## 1.2.0（2021-07-30）
+- 组件兼容 vue3，如何创建 vue3 项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.1.1（2021-05-12）
+- 新增 示例地址
+- 修复 示例项目缺少组件的 Bug
+## 1.1.0（2021-04-22）
+- 新增 通过方法自定义动画
+- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式
+- 优化 动画触发逻辑，使动画更流畅
+- 优化 支持单独的动画类型
+- 优化 文档示例
+## 1.0.2（2021-02-05）
+- 调整为 uni_modules 目录规范
diff --git a/uni_modules/uni-transition/components/uni-transition/createAnimation.js b/uni_modules/uni-transition/components/uni-transition/createAnimation.js
new file mode 100644
index 0000000..8f89b18
--- /dev/null
+++ b/uni_modules/uni-transition/components/uni-transition/createAnimation.js
@@ -0,0 +1,131 @@
+// const defaultOption = {
+// 	duration: 300,
+// 	timingFunction: 'linear',
+// 	delay: 0,
+// 	transformOrigin: '50% 50% 0'
+// }
+// #ifdef APP-NVUE
+const nvueAnimation = uni.requireNativePlugin('animation')
+// #endif
+class MPAnimation {
+	constructor(options, _this) {
+		this.options = options
+		// 在iOS10+QQ小程序平台下，传给原生的对象一定是个普通对象而不是Proxy对象，否则会报parameter should be Object instead of ProxyObject的错误
+		this.animation = uni.createAnimation({
+			...options
+		})
+		this.currentStepAnimates = {}
+		this.next = 0
+		this.$ = _this
+
+	}
+
+	_nvuePushAnimates(type, args) {
+		let aniObj = this.currentStepAnimates[this.next]
+		let styles = {}
+		if (!aniObj) {
+			styles = {
+				styles: {},
+				config: {}
+			}
+		} else {
+			styles = aniObj
+		}
+		if (animateTypes1.includes(type)) {
+			if (!styles.styles.transform) {
+				styles.styles.transform = ''
+			}
+			let unit = ''
+			if(type === 'rotate'){
+				unit = 'deg'
+			}
+			styles.styles.transform += `${type}(${args+unit}) `
+		} else {
+			styles.styles[type] = `${args}`
+		}
+		this.currentStepAnimates[this.next] = styles
+	}
+	_animateRun(styles = {}, config = {}) {
+		let ref = this.$.$refs['ani'].ref
+		if (!ref) return
+		return new Promise((resolve, reject) => {
+			nvueAnimation.transition(ref, {
+				styles,
+				...config
+			}, res => {
+				resolve()
+			})
+		})
+	}
+
+	_nvueNextAnimate(animates, step = 0, fn) {
+		let obj = animates[step]
+		if (obj) {
+			let {
+				styles,
+				config
+			} = obj
+			this._animateRun(styles, config).then(() => {
+				step += 1
+				this._nvueNextAnimate(animates, step, fn)
+			})
+		} else {
+			this.currentStepAnimates = {}
+			typeof fn === 'function' && fn()
+			this.isEnd = true
+		}
+	}
+
+	step(config = {}) {
+		// #ifndef APP-NVUE
+		this.animation.step(config)
+		// #endif
+		// #ifdef APP-NVUE
+		this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config)
+		this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin
+		this.next++
+		// #endif
+		return this
+	}
+
+	run(fn) {
+		// #ifndef APP-NVUE
+		this.$.animationData = this.animation.export()
+		this.$.timer = setTimeout(() => {
+			typeof fn === 'function' && fn()
+		}, this.$.durationTime)
+		// #endif
+		// #ifdef APP-NVUE
+		this.isEnd = false
+		let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref
+		if(!ref) return
+		this._nvueNextAnimate(this.currentStepAnimates, 0, fn)
+		this.next = 0
+		// #endif
+	}
+}
+
+
+const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
+	'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
+	'translateZ'
+]
+const animateTypes2 = ['opacity', 'backgroundColor']
+const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
+animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
+	MPAnimation.prototype[type] = function(...args) {
+		// #ifndef APP-NVUE
+		this.animation[type](...args)
+		// #endif
+		// #ifdef APP-NVUE
+		this._nvuePushAnimates(type, args)
+		// #endif
+		return this
+	}
+})
+
+export function createAnimation(option, _this) {
+	if(!_this) return
+	clearTimeout(_this.timer)
+	return new MPAnimation(option, _this)
+}
diff --git a/uni_modules/uni-transition/components/uni-transition/uni-transition.vue b/uni_modules/uni-transition/components/uni-transition/uni-transition.vue
new file mode 100644
index 0000000..f3ddd1f
--- /dev/null
+++ b/uni_modules/uni-transition/components/uni-transition/uni-transition.vue
@@ -0,0 +1,286 @@
+<template>
+  <!-- #ifndef APP-NVUE -->
+  <view v-show="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
+  <!-- #endif -->
+  <!-- #ifdef APP-NVUE -->
+  <view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
+  <!-- #endif -->
+</template>
+
+<script>
+import { createAnimation } from './createAnimation'
+
+/**
+ * Transition 过渡动画
+ * @description 简单过渡动画组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=985
+ * @property {Boolean} show = [false|true] 控制组件显示或隐藏
+ * @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
+ *  @value fade 渐隐渐出过渡
+ *  @value slide-top 由上至下过渡
+ *  @value slide-right 由右至左过渡
+ *  @value slide-bottom 由下至上过渡
+ *  @value slide-left 由左至右过渡
+ *  @value zoom-in 由小到大过渡
+ *  @value zoom-out 由大到小过渡
+ * @property {Number} duration 过渡动画持续时间
+ * @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
+ */
+export default {
+	name: 'uniTransition',
+	emits:['click','change'],
+	props: {
+		show: {
+			type: Boolean,
+			default: false
+		},
+		modeClass: {
+			type: [Array, String],
+			default() {
+				return 'fade'
+			}
+		},
+		duration: {
+			type: Number,
+			default: 300
+		},
+		styles: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		customClass:{
+			type: String,
+			default: ''
+		},
+		onceRender:{
+			type:Boolean,
+			default:false
+		},
+	},
+	data() {
+		return {
+			isShow: false,
+			transform: '',
+			opacity: 1,
+			animationData: {},
+			durationTime: 300,
+			config: {}
+		}
+	},
+	watch: {
+		show: {
+			handler(newVal) {
+				if (newVal) {
+					this.open()
+				} else {
+					// 避免上来就执行 close,导致动画错乱
+					if (this.isShow) {
+						this.close()
+					}
+				}
+			},
+			immediate: true
+		}
+	},
+	computed: {
+		// 生成样式数据
+		stylesObject() {
+			let styles = {
+				...this.styles,
+				'transition-duration': this.duration / 1000 + 's'
+			}
+			let transform = ''
+			for (let i in styles) {
+				let line = this.toLine(i)
+				transform += line + ':' + styles[i] + ';'
+			}
+			return transform
+		},
+		// 初始化动画条件
+		transformStyles() {
+			return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject
+		}
+	},
+	created() {
+		// 动画默认配置
+		this.config = {
+			duration: this.duration,
+			timingFunction: 'ease',
+			transformOrigin: '50% 50%',
+			delay: 0
+		}
+		this.durationTime = this.duration
+	},
+	methods: {
+		/**
+		 *  ref 触发 初始化动画
+		 */
+		init(obj = {}) {
+			if (obj.duration) {
+				this.durationTime = obj.duration
+			}
+			this.animation = createAnimation(Object.assign(this.config, obj),this)
+		},
+		/**
+		 * 点击组件触发回调
+		 */
+		onClick() {
+			this.$emit('click', {
+				detail: this.isShow
+			})
+		},
+		/**
+		 * ref 触发 动画分组
+		 * @param {Object} obj
+		 */
+		step(obj, config = {}) {
+			if (!this.animation) return
+			for (let i in obj) {
+				try {
+					if(typeof obj[i] === 'object'){
+						this.animation[i](...obj[i])
+					}else{
+						this.animation[i](obj[i])
+					}
+				} catch (e) {
+					console.error(`方法 ${i} 不存在`)
+				}
+			}
+			this.animation.step(config)
+			return this
+		},
+		/**
+		 *  ref 触发 执行动画
+		 */
+		run(fn) {
+			if (!this.animation) return
+			this.animation.run(fn)
+		},
+		// 开始过度动画
+		open() {
+			clearTimeout(this.timer)
+			this.transform = ''
+			this.isShow = true
+			let { opacity, transform } = this.styleInit(false)
+			if (typeof opacity !== 'undefined') {
+				this.opacity = opacity
+			}
+			this.transform = transform
+			// 确保动态样式已经生效后，执行动画，如果不加 nextTick ，会导致 wx 动画执行异常
+			this.$nextTick(() => {
+				// TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器
+				this.timer = setTimeout(() => {
+					this.animation = createAnimation(this.config, this)
+					this.tranfromInit(false).step()
+					this.animation.run()
+					this.$emit('change', {
+						detail: this.isShow
+					})
+				}, 20)
+			})
+		},
+		// 关闭过度动画
+		close(type) {
+			if (!this.animation) return
+			this.tranfromInit(true)
+				.step()
+				.run(() => {
+					this.isShow = false
+					this.animationData = null
+					this.animation = null
+					let { opacity, transform } = this.styleInit(false)
+					this.opacity = opacity || 1
+					this.transform = transform
+					this.$emit('change', {
+						detail: this.isShow
+					})
+				})
+		},
+		// 处理动画开始前的默认样式
+		styleInit(type) {
+			let styles = {
+				transform: ''
+			}
+			let buildStyle = (type, mode) => {
+				if (mode === 'fade') {
+					styles.opacity = this.animationType(type)[mode]
+				} else {
+					styles.transform += this.animationType(type)[mode] + ' '
+				}
+			}
+			if (typeof this.modeClass === 'string') {
+				buildStyle(type, this.modeClass)
+			} else {
+				this.modeClass.forEach(mode => {
+					buildStyle(type, mode)
+				})
+			}
+			return styles
+		},
+		// 处理内置组合动画
+		tranfromInit(type) {
+			let buildTranfrom = (type, mode) => {
+				let aniNum = null
+				if (mode === 'fade') {
+					aniNum = type ? 0 : 1
+				} else {
+					aniNum = type ? '-100%' : '0'
+					if (mode === 'zoom-in') {
+						aniNum = type ? 0.8 : 1
+					}
+					if (mode === 'zoom-out') {
+						aniNum = type ? 1.2 : 1
+					}
+					if (mode === 'slide-right') {
+						aniNum = type ? '100%' : '0'
+					}
+					if (mode === 'slide-bottom') {
+						aniNum = type ? '100%' : '0'
+					}
+				}
+				this.animation[this.animationMode()[mode]](aniNum)
+			}
+			if (typeof this.modeClass === 'string') {
+				buildTranfrom(type, this.modeClass)
+			} else {
+				this.modeClass.forEach(mode => {
+					buildTranfrom(type, mode)
+				})
+			}
+
+			return this.animation
+		},
+		animationType(type) {
+			return {
+				fade: type ? 0 : 1,
+				'slide-top': `translateY(${type ? '0' : '-100%'})`,
+				'slide-right': `translateX(${type ? '0' : '100%'})`,
+				'slide-bottom': `translateY(${type ? '0' : '100%'})`,
+				'slide-left': `translateX(${type ? '0' : '-100%'})`,
+				'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
+				'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
+			}
+		},
+		// 内置动画类型与实际动画对应字典
+		animationMode() {
+			return {
+				fade: 'opacity',
+				'slide-top': 'translateY',
+				'slide-right': 'translateX',
+				'slide-bottom': 'translateY',
+				'slide-left': 'translateX',
+				'zoom-in': 'scale',
+				'zoom-out': 'scale'
+			}
+		},
+		// 驼峰转中横线
+		toLine(name) {
+			return name.replace(/([A-Z])/g, '-$1').toLowerCase()
+		}
+	}
+}
+</script>
+
+<style></style>
diff --git a/uni_modules/uni-transition/package.json b/uni_modules/uni-transition/package.json
new file mode 100644
index 0000000..d5c20e1
--- /dev/null
+++ b/uni_modules/uni-transition/package.json
@@ -0,0 +1,85 @@
+{
+  "id": "uni-transition",
+  "displayName": "uni-transition 过渡动画",
+  "version": "1.3.3",
+  "description": "元素的简单过渡动画",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "动画",
+    "过渡",
+    "过渡动画"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "n"
+      },
+      "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-transition/readme.md b/uni_modules/uni-transition/readme.md
new file mode 100644
index 0000000..2f8a77e
--- /dev/null
+++ b/uni_modules/uni-transition/readme.md
@@ -0,0 +1,11 @@
+
+
+## Transition 过渡动画
+> **组件名：uni-transition**
+> 代码块： `uTransition`
+
+
+元素过渡动画
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-transition)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/uni_modules/uni-ui/changelog.md b/uni_modules/uni-ui/changelog.md
new file mode 100644
index 0000000..89e6284
--- /dev/null
+++ b/uni_modules/uni-ui/changelog.md
@@ -0,0 +1,566 @@
+## 1.5.0（2024-01-13）
+- 修复 npm包结构目录错误的问题
+- uni-calendar 修复 回到今天时，月份显示不一致问题
+- uni-data-picker 新增 支持 uni-app-x
+- uni-datetime-picker 优化 增加noChange事件，当进行日期范围选择时，若有空值，则触发该事件 [详情](https://github.com/dcloudio/uni-ui/issues/815)
+- uni-datetime-picker 修复 字节小程序时间选择范围器失效问题 [详情](https://github.com/dcloudio/uni-ui/issues/834)
+- uni-datetime-picker 修复 PC端初次修改时间，开始时间未更新的Bug [详情](https://github.com/dcloudio/uni-ui/issues/737)
+- uni-datetime-picker 修复 部分情况修改时间，开始、结束时间显示异常的Bug [详情](https://ask.dcloud.net.cn/question/171146)
+- uni-datetime-picker 优化 当前月可以选择上月、下月的日期的Bug
+- uni-file-picker 新增 微信小程序不再调用chooseImage,而是调用chooseMedia
+- uni-file-picker 新增 上传文件至云存储携带本地文件名称
+- uni-forms 优化 labelWidth 描述错误
+fix: 修复图标大小默认值错误的问题
+- uni-icons 修复 项目未使用 ts 情况下，打包报错的bug
+- uni-icons 修复 size 属性为 string 时，不加单位导致尺寸异常的bug
+- uni-icons 优化 兼容老版本icon类型，如 top ，bottom 等
+- uni-icons 优化 兼容老版本icon类型，如 top ，bottom 等
+- uni-icons 优化 uni-app x 下示例项目图标排序
+- uni-icons 修复 nvue下引入组件报错的bug
+-优化 size 属性支持单位
+- uni-icons 新增 uni-app x 支持定义图标
+- uni-notice-bar 修复动态绑定title时，滚动速度不一致的问题
+更新示例工程
+- uni-popup 新增 uni-popup 支持uni-app-x 注意暂时仅支持 `maskClick` `@open` `@close`
+- uni-table 修复 uni-tr只有一列时minWidth计算错误，列变化实时计算更新
+## 1.4.27（2023-04-21）
+- uni-calendar 修复 某些情况 monthSwitch 未触发的Bug
+- uni-calendar 修复 某些情况切换月份错误的Bug
+- uni-data-picker 修复 更改 modelValue 报错的 bug
+- uni-data-picker 修复 v-for 未使用 key 值控制台 warning
+- uni-data-picker 修复代码合并时引发 value 属性为空时不渲染数据的问题
+- uni-data-picker 修复 localdata 不支持动态更新的bug
+- uni-data-select 修复 微信小程序点击时会改变背景颜色的 bug
+- uni-data-select 修复 禁用时会显示清空按钮
+- uni-data-select 优化 查询条件短期内多次变更只查询最后一次变更后的结果
+- uni-data-select 调整 内部缓存键名调整为 uni-data-select-lastSelectedValue
+- uni-datetime-picker 修复 日历 picker 修改年月后，自动选中当月1日 [详情](https://ask.dcloud.net.cn/question/165937)
+- uni-datetime-picker 修复 小程序端 低版本 ios NaN [详情](https://ask.dcloud.net.cn/question/162979)
+- uni-datetime-picker 修复 firefox 浏览器显示区域点击无法拉起日历弹框的Bug [详情](https://ask.dcloud.net.cn/question/163362)
+- uni-datetime-picker 优化 值为空依然选中当天问题
+- uni-datetime-picker 优化 提供 default-value 属性支持配置选择器打开时默认显示的时间
+- uni-datetime-picker 优化 非范围选择未选择日期时间，点击确认按钮选中当前日期时间
+- uni-datetime-picker 优化 字节小程序日期时间范围选择，底部日期换行问题
+- uni-datetime-picker 修复 2.2.18 引起范围选择配置 end 选择无效的Bug [详情](https://github.com/dcloudio/uni-ui/issues/686)
+- uni-datetime-picker 修复 移动端范围选择change事件触发异常的Bug [详情](https://github.com/dcloudio/uni-ui/issues/684)
+- uni-datetime-picker 优化 PC端输入日期格式错误时返回当前日期时间
+- uni-datetime-picker 优化 PC端输入日期时间超出 start、end 限制的Bug
+- uni-datetime-picker 优化 移动端日期时间范围用法时间展示不完整问题
+- uni-datetime-picker 修复 小程序端绑定 Date 类型报错的Bug [详情](https://github.com/dcloudio/uni-ui/issues/679)
+- uni-datetime-picker 修复 vue3 time-picker 无法显示绑定时分秒的Bug
+- uni-datetime-picker 修复 字节小程序报错的Bug
+- uni-datetime-picker 修复 某些情况切换月份错误的Bug
+- uni-easyinput 修复 vue3 下 keyboardheightchange 事件报错的bug
+- uni-easyinput 优化 trim 属性默认值
+- uni-easyinput 新增 cursor-spacing 属性
+- uni-fab 新增 pattern.icon 属性，可自定义图标
+- uni-file-picker 修复 手动上传删除一个文件后不能再上传的bug
+- uni-forms 修复 required 参数无法动态绑定
+- uni-list 优化 uni-list-chat 具名插槽`header` 非app端套一层元素，方便使用时通过外层元素定位实现样式修改
+- uni-list uni-list-chat 新增 支持具名插槽`header`
+- uni-list 新增 列表图标新增 customPrefix 属性 ，用法 [详见](https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html#icons-props)
+- uni-nav-bar 修复 自定义状态栏高度闪动BUG
+- uni-nav-bar 修复 暗黑模式下边线颜色错误的bug
+- uni-popup 修复 uni-popup 重复打开时的 bug
+- uni-popup uni-popup-dialog 组件新增 inputType 属性
+- uni-swipe-action 修复`uni-swipe-action`和`uni-swipe-action-item`不同时使用导致 closeOther 方法报错的 bug
+- uni-table 修复 在vue3模式下可能会出现错误的问题
+## 1.4.26（2023-01-31）
+- uni-badge 修复 运行/打包 控制台警告问题
+- uni-calendar 修复 某些情况切换月份错误问题
+- uni-data-select 修复 不关联服务空间报错的问题
+- uni-data-select 新增  属性 `format` 可用于格式化显示选项内容
+- uni-datetime-picker 修复 某些情况切换月份错误问题
+- uni-easyinput 新增 keyboardheightchange 事件，可监听键盘高度变化
+- uni-list 修复 无反馈效果呈现的bug
+## 1.4.25（2023-01-11）
+- uni-file-picker 新增 sourceType 属性, 可以自定义图片和视频选择的来源
+## 1.4.24（2023-01-11）
+- uni-data-select 修复  当where变化时，数据不会自动更新的问题
+- uni-datetime-picker 修复 多次加载组件造成内存占用的 bug
+- uni-datetime-picker 修复 vue3 下 i18n 国际化初始值不正确的 bug
+- uni-easyinput 修复 props 中背景颜色无默认值的bug
+- uni-list 修复 uni-list-chat 在vue3下跳转报错的bug
+- uni-list 修复 uni-list-chat avatar属性 值为本地路径时错误的问题
+- uni-list 修复 uni-list-chat avatar属性 在腾讯云版uniCloud下错误的问题
+- uni-list 修复 uni-list-chat note属性 支持：“草稿”字样功能 文本少1位的问题
+- uni-list 修复 uni-list-item 的 customStyle 属性 padding值在 H5端 无效的bug
+- uni-list 修复 uni-list-item 的 customStyle 属性 padding值在nvue（vue2）下无效的bug
+- uni-list uni-list-chat 新增 avatar 支持 fileId
+- uni-list uni-list 新增属性 render-reverse 详情参考：[https://uniapp.dcloud.net.cn/component/list.html](https://uniapp.dcloud.net.cn/component/list.html)
+- uni-list uni-list-chat note属性 支持：“草稿”字样 加红显示 详情参考uni-im：[https://ext.dcloud.net.cn/plugin?name=uni-im](https://ext.dcloud.net.cn/plugin?name=uni-im)
+- uni-list uni-list-item 新增属性 customStyle 支持设置padding、backgroundColor
+- uni-popup 修复 nvue 下 v-show 报错
+## 1.4.23（2022-10-25）
+- uni-datetime-picker 修复，支付宝小程序样式错乱，[详情](https://github.com/dcloudio/uni-app/issues/3861)
+
+- uni-nav-bar 修复 条件编译错误的bug
+- uni-nav-bar 修复 nvue 环境 fixed 为 true 的情况下，无法置顶的 bug
+## 1.4.22（2022-09-19）
+- 优化 部分组件适配 uni-scss 主题色
+- uni-badge 修复 当 text 超过 max-num 时，badge 的宽度计算是根据 text 的长度计算，更改为 css 计算实际展示宽度，详见:[https://ask.dcloud.net.cn/question/150473](https://ask.dcloud.net.cn/question/150473)
+- uni-calendar 修复 表头年月切换，导致改变当前日期为选择月1号，且未触发change事件
+- uni-data-select 修复 微信小程序下拉框出现后选择会点击到蒙板后面的输入框
+- uni-data-select 修复 点击的位置不准确
+- uni-data-select 新增 支持 disabled 属性
+- uni-datetime-picker 修复，反向选择日期范围，日期显示异常，[详情](https://ask.dcloud.net.cn/question/153401?item_id=212892&rf=false)
+- uni-datetime-picker 修复 close事件无效的 bug
+- uni-datetime-picker 修复 移动端 maskClick 无效的 bug，详见:[https://ask.dcloud.net.cn/question/140824?item_id=209458&rf=false](https://ask.dcloud.net.cn/question/140824?item_id=209458&rf=false)
+- uni-fab 修复 小程序端由于 style 使用了对象导致报错，[详情](https://ask.dcloud.net.cn/question/152790?item_id=211778&rf=false)
+- uni-fab 修复 nvue 环境下，具有 tabBar 时，fab 组件下部位置无法正常获取 --window-bottom 的bug，详见：[https://ask.dcloud.net.cn/question/110638?notification_id=826310](https://ask.dcloud.net.cn/question/110638?notification_id=826310)
+- uni-forms 优化 根据 rules 自动添加 required 的问题
+- uni-forms 修复 item 未设置 require 属性，rules 设置 require 后，星号也显示的 bug，详见：[https://ask.dcloud.net.cn/question/151540](https://ask.dcloud.net.cn/question/151540)
+- uni-nav-bar 修复 nvue 环境下 fixed 为 true 的情况下，无法置顶的 bug
+- uni-notice-bar 新增 属性 fontSize，可修改文字大小。
+- uni-pagination 修复，未对主题色设置默认色，导致未引入 uni-scss 变量文件报错。
+- uni-pagination 修复，未对移动端当前页文字做主题色适配。
+- uni-pagination 修复 es 语言 i18n 错误
+## 1.4.21（2022-09-19）
+- 修复，安装时未导入 uni-data-select 和 uni-tooltip 的问题。
+## 1.4.20（2022-07-25）
+- uni-section 新增组件
+- uni-forms 修复 model 需要校验的值没有声明对应字段时，导致第一次不触发校验的bug
+
+## 1.4.19（2022-07-07）
+- uni-data-picker 优化 pc端图标位置不正确的问题
+- uni-data-select 修复 pc端宽度异常的bug
+## 1.4.18（2022-07-06）
+- uni-forms 【重要】组件逻辑重构，部分用法旧版本不兼容，请注意兼容问题
+- uni-forms 【重要】组件使用 Provide/Inject 方式注入依赖，提供了自定义表单组件调用 uni-forms 校验表单的能力
+- uni-forms 新增 更多表单示例
+- uni-forms 新增 model 属性，等同于原 value/modelValue 属性，旧属性即将废弃
+- uni-forms 新增 validateTrigger 属性的 blur 值，仅 uni-easyinput 生效
+- uni-forms 新增 onFieldChange 方法，可以对子表单进行校验，可替代binddata方法
+- uni-forms 新增 子表单的 setRules 方法，配合自定义校验函数使用
+- uni-forms 新增 uni-forms-item 的 setRules 方法，配置动态表单使用可动态更新校验规则
+- uni-forms 修复 由 1.4.0 引发的 label 插槽不生效的bug
+- uni-forms 修复 子组件找不到 setValue 报错的bug
+- uni-forms 修复 uni-data-picker 在 uni-forms-item 中报错的bug
+- uni-forms 修复 uni-data-picker 在 uni-forms-item 中宽度不正确的bug
+- uni-forms 修复 表单校验顺序无序问题
+- uni-forms 优化 子表单组件uni-datetime-picker、uni-data-select、uni-data-picker的显示样式
+- uni-forms 优化 动态表单校验方式，废弃拼接name的方式
+- uni-breadcrumb 修复 微信小程序 separator 不显示问题
+- uni-data-checkbox 优化 在 uni-forms 中的依赖注入方式
+- uni-data-picker 修复 uni-data-picker 在 uni-forms-item 中宽度不正确的bug
+- uni-data-picker 优化 显示样式
+- uni-data-select 优化 显示样式
+- uni-datetime-picker 修复 日历顶部年月及底部确认未国际化 bug
+- uni-datetime-picker 优化 组件样式，调整了组件图标大小、高度、颜色等，与uni-ui风格保持一致
+- uni-easyinput 新增 在 uni-forms 1.4.0 中使用可以在 blur 时校验内容
+- uni-easyinput 新增 clear 事件，点击右侧叉号图标触发
+- uni-easyinput 新增 change 事件 ，仅在输入框失去焦点或用户按下回车时触发
+- uni-easyinput 优化 组件样式，组件获取焦点时高亮显示，图标颜色调整等
+- uni-easyinput 优化 clearable 显示策略
+- uni-file-picker 修复 在uni-forms下样式不生效的bug
+- uni-nav-bar 修复 组件示例中插槽用法无法显示内容的bug
+- uni-swipe-action 修复 vue3 下使用组件不能正常运行的Bug
+- uni-swipe-action 修复 h5端点击click触发两次的Bug
+- uni-table 修复 微信小程序存在无使用组件的问题
+## 1.4.17（2022-06-30）
+- 支持 ios 安全区
+## 1.4.16（2022-06-06）
+- uni-breadcrumb 新增 支持 uni.scss 修改颜色
+- uni-data-select 修复 localdata 赋值不生效的 bug
+- uni-data-select 新增 支持选项禁用（数据选项设置 disabled: true 即禁用）
+- uni-data-select 修复 当 value 为 0 时选择不生效的 bug
+- uni-easyinput 修复 关闭图标某些情况下无法取消的bug
+- uni-fav 新增 stat 属性 ，是否开启uni统计功能
+- uni-goods-nav 新增 stat属性，是否开启uni统计功能
+- uni-group 新增 stat属性，是否开启uni统计功能
+- uni-nav-bar 新增 stat 属性 ，可开启统计 title 上报 ，仅使用了title 属性且项目开启了uni统计生效
+- uni-search-bar 新增 readonly 属性，组件只读
+- uni-swipe-action 修复 isPC 找不到的Bug
+- uni-swipe-action  修复 在 nvue 下 disabled 失效的bug
+- uni-tooltip 修复 content 为空时仍然弹出的bug
+## 1.4.15（2022-05-07）
+- uni-data-picker 修复 字节小程序 本地数据无法选择下一级的Bug
+- uni-data-select 新增 记住上次的选项（仅 collection 存在时有效）
+- uni-search-bar 修复  vue3 input 事件不生效的bug
+- uni-search-bar 修复 多余代码导致的bug
+- uni-tooltip 更新 text 属性变更为 content
+- uni-tooltip 更新 移除 width 属性
+- uni-tooltip 修复 组件根 text 嵌套组件 warning
+## 1.4.14（2022-04-18）
+- uni-datetime-picker 修复 Vue3 下动态赋值,单选类型未响应的 bug
+- uni-easyinput 修复 默认值不生效的bug
+## 1.4.13（2022-04-02）
+- uni-calendar 修复 条件编译 nvue 不支持的 css 样式
+- uni-calendar 修复 startDate、 endDate 属性失效的 bug
+- uni-data-picker 修复 nvue 不支持的 v-show 的 bug
+- uni-data-picker 修复 条件编译 nvue 不支持的 css 样式
+- uni-datetime-picker 修复 Vue3 下动态赋值未响应的 bug
+- uni-easyinput 修复 value不能为0的bug
+- uni-popup 修复 弹出层内部无法滚动的bug
+- uni-popup 修复 小程序中高度错误的bug
+- uni-popup 修复 快速调用open出现问题的Bug
+- uni-rate 修复 条件判断 `NaN` 错误的 bug
+- uni-swipe-action 修复 按钮字体大小不能设置的bug
+- uni-swipe-action 修复 h5和app端下报el错误的bug
+- uni-swipe-action 修复 HBuilderX 1.4.X 版本中，h5和app端下报错的bug
+## 1.4.12（2022-02-19）
+- uni-collapse 修复 初始化的时候 ，open 属性失效的bug
+- uni-data-checkbox 修复 multiple 为 true 时，v-model 的值为 null 报错的 bug
+- uni-icons 优化 size 属性可以传入不带单位的字符串数值
+- uni-icons 优化 size 支持其他单位
+- uni-nav-bar 新增 left-width/right-width属性 ，可修改左右两侧的宽度
+- uni-popup 修复 safeArea 属性不能设置为false的bug
+## 1.4.11（2022-01-21）
+- uni-collapse 修复 微信小程序resize后组件收起的bug
+- uni-countdown 修复 在微信小程序中样式不生效的bug
+- uni-countdown 新增 update 方法 ，在动态更新时间后，刷新组件
+- uni-load-more 新增 showText属性 ，是否显示文本
+- uni-load-more 修复 nvue 平台下不显示文本的bug
+- uni-load-more 修复 微信小程序平台样式选择器报警告的问题
+- uni-nav-bar 修复 在vue下，标题不垂直居中的bug
+- uni-nav-bar 修复 height 属性类型错误
+- uni-nav-bar 新增 height 属性,可修改组件高度
+- uni-nav-bar 新增 dark 属性可可开启暗黑模式
+- uni-nav-bar 优化 标题字数过多显示省略号
+- uni-nav-bar 优化 插槽，插入内容可完全覆盖
+- uni-popup 修复 isMaskClick 失效的bug
+- uni-popup 新增 cancelText \ confirmText 属性 ，可自定义文本
+- uni-popup 新增 maskBackgroundColor 属性 ，可以修改蒙版颜色
+- uni-popup 优化 maskClick属性 更新为 isMaskClick ，解决微信小程序警告的问题
+
+## 1.4.10（2022-01-17）
+- uni-card 修复 在vue页面下略缩图显示不正常的bug
+- uni-datetime-picker 修复 clear-icon 属性在小程序平台不生效的 bug
+- uni-datetime-picker 修复 日期范围选在小程序平台，必须多点击一次才能取消选中状态的 bug
+- uni-fab 更新 组件依赖
+-
+- uni-icons 修复 nvue 有些图标不显示的bug，兼容老版本图标
+- uni-icons 优化 示例可复制图标名称
+- uni-nav-bar 修复 color 属性不生效的bug
+- uni-popup 修复 设置 safeArea 属性不生效的bug
+- uni-popup 优化 组件示例
+- uni-popup 修复 vuedoc 文字错误
+## 1.4.9（2021-11-23）
+- uni-ui 修复 vue3中某些scss变量无法找到的问题
+- uni-combox 优化 label、label-width 属性
+- uni-data-picker 修复 由上个版本引发的map、v-model等属性不生效的bug
+- uni-file-picker 修复 参数为对象的情况下，url在某些情况显示错误的bug
+- uni-icons 优化 兼容旧组件 type 值
+- uni-list 修复 在vue3中to属性在发行应用的时候报错的bug
+- uni-scss 修复 vue3中scss语法兼容问题
+- uni-transition 修复 init 方法初始化问题
+## 1.4.8（2021-11-19）
+- uni-fab 修复 阴影颜色不正确的bug
+## 1.4.7（2021-11-19）
+- uni-ui 新增 支持国际化
+- uni-ui 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- uni-ui 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-ui](https://uniapp.dcloud.io/component/uniui/uni-ui)
+- uni-badge 修改 size 属性默认值调整为 small
+- uni-badge 修改 type 属性，默认值调整为 error，info 替换 default
+- uni-badge 修复 在字节小程序上样式不生效的 bug
+- uni-calendar 修复 弹出层被 tabbar 遮盖 bug
+- uni-card 重构插槽的用法 ，header 替换为 title
+- uni-card 新增 actions 插槽
+- uni-card 新增 cover 封面图属性和插槽
+- uni-card 新增 padding 内容默认内边距离
+- uni-card 新增 margin 卡片默认外边距离
+- uni-card 新增 spacing 卡片默认内边距
+- uni-card 新增 shadow 卡片阴影属性
+- uni-card 取消 mode 属性，可使用组合插槽代替
+- uni-card 取消 note 属性 ，使用actions插槽代替
+- uni-collapse 优化 show-arrow 属性默认为true
+- uni-collapse 新增 show-arrow 属性，控制是否显示右侧箭头
+- uni-countdown 新增 font-size 支持自定义字体大小
+- uni-data-checkbox 修复 在uni-forms中 modelValue 中不存在当前字段，当前字段必填写也不参与校验的问题
+- uni-data-checkbox 修复 单选 list 模式下 ，icon 为 left 时，选中图标不显示的问题
+- uni-data-checkbox 修复 在 uni-forms 中重置表单，错误信息无法清除的问题
+- uni-dateformat 优化 默认时间不再是当前时间，而是显示'-'字符
+- uni-datetime-picker 修复 hide-second 在移动端的 bug
+- uni-datetime-picker 修复 单选赋默认值时，赋值日期未高亮的 bug
+- uni-datetime-picker 修复 赋默认值时，移动端未正确显示时间的 bug
+- uni-datetime-picker 新增 hide-second 属性，支持只使用时分，隐藏秒
+- uni-datetime-picker 优化 取消选中时（范围选）直接开始下一次选择, 避免多点一次
+- uni-datetime-picker 优化 移动端支持清除按钮，同时支持通过 ref 调用组件的 clear 方法
+- uni-datetime-picker 优化 调整字号大小，美化日历界面
+- uni-datetime-picker 优化 范围选择器在 pc 端过宽的问题
+- uni-datetime-picker 新增 支持作为 uni-forms 子组件相关功能
+- uni-datetime-picker 修复 在 uni-forms 中使用时，选择时间报 NAN 错误的 bug
+- uni-datetime-picker 修复 type 属性动态赋值无效的 bug
+- uni-datetime-picker 修复 ‘确认’按钮被 tabbar 遮盖 bug
+- uni-datetime-picker 修复 组件未赋值时范围选左、右日历相同的 bug
+- uni-datetime-picker 修复 范围选未正确显示当前值的 bug
+- uni-datetime-picker 修复 h5 平台（移动端）报错 'cale' of undefined 的 bug
+- uni-easyinput 修复 在 uni-forms 的动态表单中默认值校验不通过的 bug
+- uni-easyinput 修复 在 uni-forms 中重置表单，错误信息无法清除的问题
+- uni-file-picker 新增 参数中返回 fileID 字段
+- uni-file-picker 修复 腾讯云传入fileID 不能回显的bug
+- uni-file-picker 修复 选择图片后，不能放大的问题
+- uni-file-picker 修复 由于 0.2.11 版本引起的不能回显图片的Bug
+- uni-file-picker 新增 clearFiles(index) 方法，可以手动删除指定文件
+- uni-file-picker 修复 v-model 值设为 null 报错的Bug
+- uni-file-picker 修复 return-type="object" 时，无法删除文件的Bug
+- uni-file-picker 修复 auto-upload 属性失效的Bug
+- uni-forms 修复 label 插槽不生效的bug
+- uni-forms 修复 没有添加校验规则的字段依然报错的Bug
+- uni-forms 修复 重置表单错误信息无法清除的问题
+- uni-forms 修复 表单验证只生效一次的问题
+- uni-icons 新增 更多图标
+- uni-icons 优化 自定义图标使用方式
+- uni-link 修复 在 nvue 下不显示的 bug
+- uni-pagination 修复 current 、value 属性未监听，导致高亮样式失效的 bug
+- uni-rate 优化 默认值修改为 0 颗星
+- uni-search-bar 修复 value 属性与 modelValue 属性不兼容的Bug
+- uni-swipe-action 新增 close-all 方法，关闭所有已打开的组件
+- uni-swipe-action 新增 resize() 方法，在非微信小程序、h5、app-vue端出现不能滑动的问题的时候，重置组件
+- uni-swipe-action 修复 app 端偶尔出现类似 Page[x][-x,xx;-x,xx,x,x-x] 的问题
+- uni-swipe-action 优化 微信小程序、h5、app-vue 滑动逻辑，避免出现动态新增组件后不能滑动的问题
+- uni-tag 新增 提供组件设计资源，组件样式调整
+- uni-tag 移除 插槽
+- uni-tag 移除 type 属性的 royal 选项
+- uni-tag type 不是 default 时，size 为 small 字体大小显示不正确
+## 1.4.2（2021-08-20）
+- 新增 uni-ui 组件支持国际化 i18n
+- uni-collapse 优化 show-arrow 属性默认为true
+- uni-collapse 新增 show-arrow 属性，控制是否显示右侧箭头
+- uni-data-checkbox 修复 单选 list 模式下 ，icon 为 left 时，选中图标不显示的问题
+- uni-easyinput 修复 在 uni-forms 的动态表单中默认值校验不通过的 bug
+- uni-file-picker 修复 由于 0.2.11 版本引起的不能回显图片的Bug
+- uni-file-picker 新增 clearFiles(index) 方法，可以手动删除指定文件
+- uni-file-picker 修复 v-model 值设为 null 报错的Bug
+- uni-swipe-action 新增 close-all 方法，关闭所有已打开的组件
+- uni-swipe-action 新增 resize() 方法，在非微信小程序、h5、app-vue端出现不能滑动的问题的时候，重置组件
+- uni-swipe-action 修复 app 端偶尔出现类似 Page[x][-x,xx;-x,xx,x,x-x] 的问题
+- uni-swipe-action 优化 微信小程序、h5、app-vue 滑动逻辑，避免出现动态新增组件后不能滑动的问题
+## 1.4.0（2021-08-13）
+- uni-calendar 修复 弹出层被 tabbar 遮盖 bug
+- uni-data-checkbox 修复 在 uni-forms 中重置表单，错误信息无法清除的问题
+- uni-dateformat 调整 默认时间不再是当前时间，而是显示'-'字符
+- uni-datetime-picker 新增 适配 vue3
+- uni-datetime-picker 新增 支持作为 uni-forms 子组件相关功能
+- uni-datetime-picker 修复 在 uni-forms 中使用时，选择时间报 NAN 错误的 bug
+- uni-datetime-picker 修复 type 属性动态赋值无效的 bug
+- uni-datetime-picker 修复 ‘确认’按钮被 tabbar 遮盖 bug
+- uni-datetime-picker 修复 组件未赋值时范围选左、右日历相同的 bug
+- uni-datetime-picker 修复 范围选未正确显示当前值的 bug
+- uni-datetime-picker 修复 h5 平台（移动端）报错 'cale' of undefined 的 bug
+- uni-easyinput 修复 在 uni-forms 中重置表单，错误信息无法清除的问题
+- uni-file-picker 修复 return-type="object" 时，无法删除文件的Bug
+- uni-file-picker 修复 auto-upload 属性失效的Bug
+- uni-forms 修复 没有添加校验规则的字段依然报错的Bug
+- uni-forms 修复 重置表单错误信息无法清除的问题
+- uni-forms 优化 组件文档
+- uni-forms 修复 表单验证只生效一次的问题
+- uni-tag type 不是 default 时，size 为 small 字体大小显示不正确
+## 1.3.9（2021-08-02）
+- uni-datetime-picker 新增 return-type 属性支持返回 date 日期对象
+- uni-file-picker 修复 fileExtname属性不指定值报错的Bug
+- uni-file-picker 修复 在某种场景下图片不回显的Bug
+- uni-link 支持自定义插槽
+## 1.3.8（2021-07-31）
+- uni-ui 组件兼容 vue3
+- uni-collapse 修复 由1.2.0版本引起的 change 事件返回 undefined 的Bug
+- uni-collapse 优化 组件示例
+- uni-collapse 新增 组件折叠动画
+- uni-collapse 新增 value\v-model 属性 ，动态修改面板折叠状态
+- uni-collapse 新增 title 插槽 ，可定义面板标题
+- uni-collapse 新增 border 属性 ，显示隐藏面板内容分隔线
+- uni-collapse 新增 title-border 属性 ，显示隐藏面板标题分隔线
+- uni-collapse 修复 resize 方法失效的Bug
+- uni-collapse 修复 change 事件返回参数不正确的Bug
+- uni-collapse 优化 H5、App 平台自动更具内容更新高度，无需调用 reszie() 方法
+- uni-data-checkbox 优化 在uni-forms组件，与label不对齐的问题
+- uni-data-checkbox 修复 单选默认值为0不能选中的Bug
+- uni-easyinput 优化 errorMessage 属性支持 Boolean 类型
+- uni-file-picker 修复 return-type为object下，返回值不正确的Bug
+- uni-file-picker 修复（重要） H5 平台下如果和uni-forms组件一同使用导致页面卡死的问题
+- uni-file-picker 优化 h5平台下上传文件导致页面卡死的问题
+- uni-forms 修复 vue2 下条件编译导致destroyed生命周期失效的Bug
+- uni-forms 修复 1.2.1 引起的示例在小程序平台报错的Bug
+- uni-forms 修复 动态校验表单，默认值为空的情况下校验失效的Bug
+- uni-forms 修复 不指定name属性时，运行报错的Bug
+- uni-forms 优化 label默认宽度从65调整至70，使required为true且四字时不换行
+- uni-forms 优化 组件示例，新增动态校验示例代码
+- uni-forms 优化 组件文档，使用方式更清晰
+- uni-list 修复 与其他组件嵌套使用时，点击失效的Bug
+- uni-swipe-action 修复 跨页面修改组件数据 ，导致不能滑动的问题
+## 1.3.7（2021-07-16）
+- uni-ui 兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+- uni-datetime-picker 修复 单选日期类型，初始赋值后不在当前日历的 bug
+- uni-datetime-picker 新增 clearIcon 属性，显示框的清空按钮可配置显示隐藏（仅 pc 有效）
+- uni-datetime-picker 优化 移动端移除显示框的清空按钮，无实际用途
+- uni-datetime-picker 修复 组件赋值为空，界面未更新的 bug
+- uni-datetime-picker 修复 start 和 end 不能动态赋值的 bug
+- uni-datetime-picker 修复 范围选类型，用户选择后再次选择右侧日历（结束日期）显示不正确的 bug
+## 1.3.6（2021-07-09）
+- uni-data-checkbox 优化 删除无用日志
+- uni-data-checkbox 修复 由 0.1.9 引起的非 nvue 端图标不显示的问题
+- uni-data-checkbox 修复 nvue 黑框样式问题
+- uni-datetime-picker 修复 范围选择不能动态赋值的 bug
+- uni-datetime-picker 修复 范围选择的初始时间在一个月内时，造成无法选择的bug
+- uni-datetime-picker 优化 弹出层在超出视窗边缘定位不准确的问题
+- uni-datetime-picker 修复 范围起始点样式的背景色与今日样式的字体前景色融合，导致日期字体看不清的 bug
+- uni-datetime-picker 优化 弹出层在超出视窗边缘被遮盖的问题
+- uni-datetime-picker 新增 maskClick 事件
+- uni-datetime-picker 修复 特殊情况日历 rpx 布局错误的 bug，rpx -> px
+- uni-datetime-picker 修复 范围选择时清空返回值不合理的bug，['', ''] -> []
+- uni-datetime-picker 新增 日期时间显示框支持插槽
+- uni-file-picker 修复 sourceType 缺少默认值导致 ios 无法选择文件
+- uni-file-picker 优化 解耦与uniCloud的强绑定关系 ，如不绑定服务空间，默认autoUpload为false且不可更改
+- uni-table 新增 uni-th 支持 date 日期筛选范围
+- uni-table 新增 uni-th 支持 range 筛选范围
+- uni-table 新增 uni-th 筛选功能
+## 1.3.5（2021-07-02）
+- uni-card 优化 图文卡片无图片加载时，提供占位图标
+- uni-card 新增 header 插槽，自定义卡片头部（ 图文卡片 mode="style" 时，不支持）
+- uni-card 修复 thumbnail 不存在仍然占位的 bug
+- uni-data-checkbox 修复 selectedTextColor 属性不生效的Bug
+- uni-datetime-picker 优化 添加 uni-icons 依赖
+- uni-easyinput 修复 confirmType 属性（仅 type="text" 生效）导致多行文本框无法换行的 bug
+- uni-file-picker 修复 由 0.0.10 版本引发的 returnType 属性失效的问题
+- uni-file-picker 优化 文件上传后进度条消失时机
+- uni-file-picker 修复 在uni-forms 中，删除文件 ，获取的值不对的Bug
+- uni-forms 修复 pattern 属性在微信小程序平台无效的问题
+## 1.3.4（2021-06-25）
+- uni-badge 优化 示例项目
+- uni-countdown 修复 uni-countdown 重复赋值跳两秒的 bug
+- uni-easyinput 修复 passwordIcon 属性拼写错误的 bug
+- uni-forms 修复 validate-trigger属性为submit且err-show-type属性为toast时不能弹出的Bug
+- uni-forms 修复 只写setRules方法而导致校验不生效的Bug
+- uni-forms 修复 由上个办法引发的错误提示文字错位的Bug
+- uni-forms 修复 不设置 label 属性 ，无法设置label插槽的问题
+- uni-forms 修复 不设置label属性，label-width属性不生效的bug
+- uni-forms 修复 setRules 方法与rules属性冲突的问题
+- uni-link 新增 download 属性，H5平台下载文件名
+- uni-popup 新增 mask-click 遮罩层点击事件
+- uni-popup 修复 nvue 平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
+- uni-tag 修复 uni-tag 在字节跳动小程序上 css 类名编译错误的 bug
+## 1.3.3（2021-06-18）
+- uni-easyinput 新增 passwordIcon 属性，当type=password时是否显示小眼睛图标
+- uni-easyinput 修复 confirmType 属性不生效的问题
+- uni-easyinput 修复 disabled 状态可清出内容的 bug
+- uni-file-picker 修复 删除文件时无法触发 v-model 的Bug
+- uni-popup 修复 H5平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
+- uni-popup 修复 错误的 watch 字段
+- uni-popup 修复 safeArea 属性不生效的问题
+- uni-popup 修复 点击内容，再点击遮罩无法关闭的Bug
+## 1.3.2（2021-06-04）
+- uni-data-checkbox 新增 map 属性，可以方便映射text/value属性
+- uni-data-checkbox 修复 不关联服务空间的情况下组件报错的Bug
+- uni-data-picker 修复 上个版本引出的本地数据无法选择带有children的2级节点
+- uni-forms 修复 动态删减数据导致报错的问题
+- uni-forms 新增 modelValue 属性 ，value 即将废弃
+- uni-forms 新增 uni-forms-item 可以设置单独的 rules
+- uni-forms 新增 validate 事件增加 keepitem 参数，可以选择那些字段不过滤
+- uni-forms 优化 submit 事件重命名为 validate
+- uni-data-picker 修复 无法加载云端数据的问题
+- uni-data-picker 修复 v-model无效问题
+- uni-data-picker 修复 loaddata 为空数据组时加载时间过长问题
+- uni-datetime-picker 修复 图标在小程序上不显示的 bug
+- uni-datetime-picker 优化 重命名引用组件，避免潜在组件命名冲突
+- uni-datetime-picker 优化 代码目录扁平化
+- uni-tag 修复 未定义 sass 变量 "$uni-color-royal" 的bug
+## 1.3.1（2021-05-14）
+- uni-badge 新增 uni-badge 的 absolute 属性，支持定位
+- uni-badge 新增 uni-badge 的 offset 属性，支持定位偏移
+- uni-badge 新增 uni-badge 的 is-dot 属性，支持仅显示有一个小点
+- uni-badge 新增 uni-badge 的 max-num 属性，支持自定义封顶的数字值，超过 99 显示99+
+- uni-badge 优化 uni-badge 属性 custom-style， 支持以对象形式自定义样式
+- uni-badge 修复 uni-badge 在 App 端，数字小于10时不是圆形的bug
+- uni-badge 修复 uni-badge 在父元素不是 flex 布局时，宽度缩小的bug
+- uni-badge 新增 uni-badge 属性 custom-style， 支持自定义样式
+- uni-datetime-picker 修复 ios 下不识别 '-' 日期格式的 bug
+- uni-datetime-picker 优化 pc 下弹出层添加边框和阴影
+- uni-datetime-picker 修复 在 admin 中获取弹出层定位错误的bug
+- uni-datetime-picker 修复 type 属性向下兼容，默认值从 date 变更为 datetime
+- uni-datetime-picker 支持日历形式的日期+时间的范围选择
+- uni-steps 修复 uni-steps 横向布局时，多行文字高度不合理的 bug
+- uni-countdown 修复 uni-countdown 不能控制倒计时的 bug
+- uni-tag 修复 royal 类型无效的bug
+- uni-tag 修复 uni-tag 宽度不自适应的bug
+- uni-tag 新增 uni-tag 支持属性 custom-style 自定义样式
+- uni-link 新增 href 属性支持 tel:|mailto:
+- uni-popup 修复 组件内放置 input 、textarea 组件，无法聚焦的问题
+- uni-popup 新增 type 属性的 left\right 值，支持左右弹出
+- uni-popup 新增 open(String:type) 方法参数 ，可以省略 type 属性 ，直接传入类型打开指定弹窗
+- uni-popup 新增 backgroundColor 属性，可定义主窗口背景色,默认不显示背景色
+- uni-popup 新增 safeArea 属性，是否适配底部安全区
+- uni-popup 修复 App\h5\微信小程序底部安全区占位不对的Bug
+- uni-popup 修复 App 端弹出等待的Bug
+- uni-popup 优化 提升低配设备性能，优化动画卡顿问题
+- uni-popup 优化 更简单的组件自定义方式
+- uni-table 修复 示例项目缺少组件的Bug
+- uni-forms 修复 自定义检验器失效的问题
+- uni-title 修复 示例项目缺少组件的Bug
+- uni-transition 修复 示例项目缺少组件的Bug
+- uni-swiper-dot 修复 示例项目缺少组件的Bug
+- uni-ui 新增 组件示例地址
+## 1.3.0（2021-04-23）
+- uni-combox 优化 添加依赖 uni-icons, 导入后自动下载依赖
+- uni-data-picker 修复 非树形数据有 where 属性查询报错的问题
+- uni-fav 优化 添加依赖 uni-icons, 导入后自动下载依赖
+- uni-goods-nav 优化 添加依赖 uni-icons, 导入后自动下载依赖
+- uni-nav-bar 优化 添加依赖 uni-icons, 导入后自动下载依赖
+- uni-notice-bar 优化 添加依赖 uni-icons, 导入后自动下载依赖
+- uni-number-box 修复 uni-number-box 浮点数运算不精确的 bug
+- uni-number-box 修复 uni-number-box change 事件触发不正确的 bug
+- uni-number-box 新增 uni-number-box v-model 双向绑定
+- uni-rate 修复 布局变化后 uni-rate  星星计算不准确的 bug
+- uni-rate 优化 添加依赖 uni-icons, 导入 uni-rate 自动下载依赖
+- uni-search-bar 优化 添加依赖 uni-icons, 导入后自动下载依赖
+- uni-steps 优化 添加依赖 uni-icons, 导入后自动下载依赖
+- uni-transition 新增 通过方法自定义动画
+- uni-transition 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式
+- uni-transition 优化 动画触发逻辑，使动画更流畅
+- uni-transition 优化 支持单独的动画类型
+- uni-transition 优化 文档示例
+## 1.2.13（2021-04-16）
+- uni-ui 新增 uni-data-picker 支持云端非树形表结构数据
+- uni-ui 修复 uni-data-checkbox nvue 下无法选中的问题
+- uni-ui 修复 uni-data-picker 根节点 parent_field 字段等于null时选择界面错乱问题
+- uni-ui 修复 uni-file-picker 选择的文件非 file-extname 字段指定的扩展名报错的Bug
+- uni-ui 修复 uni-swipe-action 报错 nv_navigator is not defined 的bug
+- uni-ui 修复 uni-load-more 在首页使用时，h5 平台报 'uni is not defined' 的 bug
+- uni-ui 优化 uni-file-picker file-extname 字段支持字符串写法，多个扩展名需要用逗号分隔
+- uni-ui 优化 uni-pagination PC 和 移动端适配不同的 ui
+- uni-ui 更新 uni-file-picker 组件示例
+- uni-ui 修复 uni-nav-bar 当 fixed 属性为 true 时铺不满屏幕的 bug
+- uni-ui 新增 uni-search-bar 的 focus 事件
+- uni-ui 修复 uni-rate 属性 margin 值为 string 组件失效的 bug
+- uni-data-picker 修复 本地数据概率无法回显时问题
+- uni-table 新增 sortable 属性，是否开启单列排序
+- uni-table 优化 表格多选逻辑
+## 1.2.12（2021-03-23）
+- uni-ui 新增 uni-datetime-picker 的 hide-second 属性、border 属性;
+- uni-ui 修复 uni-datetime-picker 选择跟显示的日期不一样的 bug，
+- uni-ui 修复 uni-datetime-picker change事件触发2次的 bug
+- uni-ui 修复 uni-datetime-picker 分、秒 end 范围错误的 bug
+- uni-ui 新增 uni-tr selectable 属性，用于 type=selection 时，设置某行是否可由全选按钮控制
+- uni-ui 新增 uni-data-checkbox 新增 disabled属性，支持nvue
+- uni-ui 优化 uni-data-checkbox  无选项时提示“暂无数据”
+- uni-ui 优化 uni-data-checkbox  默认颜色显示
+- uni-ui 新增 uni-link href 属性支持 tel:|mailto:
+- uni-ui 新增 uni-table 示例demo
+- uni-ui 修复 uni-data-picker 微信小程序某些情况下无法选择的问题，事件无法触发的问题
+- uni-ui 修复 uni-nav-bar easycom 下，找不到 uni-status-bar 的bug
+- uni-ui 修复 uni-easyinput 示例在 qq 小程序上的bug
+- uni-ui 修复 uni-forms 动态显示uni-forms-item的情况下，submit 方法获取值错误的Bug
+- uni-ui 调整 cli 项目 建议使用 easycom 方式引用组件，如使用按需引用，需手动维护组件内部引用
+
+## 1.2.11（2021-02-24）
+- 调整为uni_modules目录规范
+- uni-data-picker 新增  数据驱动的picker选择器
+- uni-file-picker 新增  文件选择上传
+- uni-row 新增 栅格系统
+- uni-data-checkbox 优化 支持 nvue
+- uni-forms 修复 偶发性获取表单值错误的Bug
+- uni-forms 修复 校验 uni-data-picker value 为 0 时，返回值错误的Bug
+- uni-forms 修复 uni-forms-item 组件隐藏时依然触发校验的bug
+- uni-forms 优化 实时校验
+- uni-forms 优化 兼容nvue页面
+- uni-easyinput 优化 兼容nvue页面
+- uni-group 优化 兼容nvue页面
+- uni-popup 优化 组件适配 PC
+- uni-fab 优化 适配 PC
+- uni-swiper-dot 优化 适配 PC
+- uni-rate 优化 适配 PC
+- uni-notice-bar 优化 适配 PC
+- uni-indexed-list 优化 适配 PC
+- uni-combox 优化 适配 PC
+- uni-transition 优化 适配 PC
+- uni-nav-bar 优化 适配 PC
+- uni-swipe-action 优化 适配 PC
diff --git a/uni_modules/uni-ui/components/uni-ui/uni-ui.vue b/uni_modules/uni-ui/components/uni-ui/uni-ui.vue
new file mode 100644
index 0000000..0970892
--- /dev/null
+++ b/uni_modules/uni-ui/components/uni-ui/uni-ui.vue
@@ -0,0 +1,7 @@
+<template>
+	<view>占位组件，请勿使用</view>
+</template>
+<script>
+</script>
+<style>
+</style>
diff --git a/uni_modules/uni-ui/package.json b/uni_modules/uni-ui/package.json
new file mode 100644
index 0000000..cc71ccc
--- /dev/null
+++ b/uni_modules/uni-ui/package.json
@@ -0,0 +1,129 @@
+{
+  "id": "uni-ui",
+  "displayName": "uni-ui",
+  "version": "1.5.0",
+  "description": "uni-ui 是基于uni-app的、全端兼容的、高性能UI框架",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "UI组件库",
+    "ui框架",
+    "ui库"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": "^3.2.10"
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": [
+      "uni-badge",
+      "uni-calendar",
+      "uni-card",
+      "uni-collapse",
+      "uni-combox",
+      "uni-countdown",
+      "uni-data-checkbox",
+      "uni-data-picker",
+      "uni-data-select",
+      "uni-dateformat",
+      "uni-datetime-picker",
+      "uni-drawer",
+      "uni-easyinput",
+      "uni-fab",
+      "uni-fav",
+      "uni-file-picker",
+      "uni-forms",
+      "uni-goods-nav",
+      "uni-grid",
+      "uni-group",
+      "uni-icons",
+      "uni-indexed-list",
+      "uni-link",
+      "uni-list",
+      "uni-load-more",
+      "uni-nav-bar",
+      "uni-notice-bar",
+      "uni-number-box",
+      "uni-pagination",
+      "uni-popup",
+      "uni-rate",
+      "uni-row",
+      "uni-search-bar",
+      "uni-section",
+      "uni-segmented-control",
+      "uni-steps",
+      "uni-swipe-action",
+      "uni-swiper-dot",
+      "uni-table",
+      "uni-tag",
+      "uni-title",
+      "uni-tooltip",
+      "uni-transition"
+    ],
+    "encrypt": [],
+    "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": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y",
+          "京东": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+          "vue2": "y",
+          "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/uni_modules/uni-ui/readme.md b/uni_modules/uni-ui/readme.md
new file mode 100644
index 0000000..23f8456
--- /dev/null
+++ b/uni_modules/uni-ui/readme.md
@@ -0,0 +1,247 @@
+> 当前插件不包含示例页面 ,如需示例请在 HBuiderX 中新建 `hello uni-app > 扩展组件` 中查看
+> 
+> 代码示例地址 ：[https://ext.dcloud.net.cn/plugin?id=4941](https://ext.dcloud.net.cn/plugin?id=4941)
+> 
+> 组件演示地址：[https://hellouniapp.dcloud.net.cn](https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge)
+> 
+> 组件文档地址：[https://uniapp.dcloud.io/component/uniui/uni-ui](https://uniapp.dcloud.io/component/uniui/uni-ui)
+
+# uni-ui 介绍
+
+## uni-ui产品特点
+
+### 1. 高性能
+
+目前为止，在小程序和混合app领域，暂时还没有比 `uni-ui` 更高性能的框架。
+- 自动差量更新数据
+
+虽然uni-app支持小程序自定义组件，所有小程序的ui库都可以用。但小程序自定义组件的ui库都需要使用setData手动更新数据，在大数据量时、或高频更新数据时，很容易产生性能问题。
+
+而 `uni-ui` 属于vue组件，uni-app引擎底层自动diff更新数据。当然其实插件市场里众多vue组件都具备这个特点。
+- 优化逻辑层和视图层通讯折损
+
+非H5，不管是小程序还是App，不管是app的webview渲染还是原生渲染，全都是逻辑层和视图层分离的。这里就有一个逻辑层和视图层通讯的折损问题。
+比如在视图层拖动一个可跟手的组件，由于通讯的损耗，用js监听很难做到实时跟手。
+
+这时就需要使用css动画以及平台底层提供的wxs、bindingx等技术。不过这些技术都比较复杂，所以 `uni-ui` 里做了封装，在需要跟手式操作的ui组件，比如swiperaction列表项左滑菜单，就在底层使用了这些技术，实现了高性能的交互体验
+- 背景停止
+
+很多ui组件是会一直动的，比如轮播图、跑马灯。即便这个窗体被新窗体挡住，它在背景层仍然在消耗着硬件资源。在Android的webview版本为chrome66以上，背景操作ui会引发很严重的性能问题，造成前台界面明显卡顿。
+
+而 `uni-ui` 的组件，会自动判断自己的显示状态，在组件不再可见时，不会再消耗硬件资源。
+
+### 2. 全端
+
+ `uni-ui` 的组件都是多端自适应的，底层会抹平很多小程序平台的差异或bug。
+
+比如导航栏navbar组件，会自动处理不同端的状态栏。
+比如swiperaction组件，在app和微信小程序上会使用交互体验更好的wxs技术，但在不支持wxs的其他小程序端会使用js模拟类似效果。
+
+ `uni-ui` 还支持nvue原生渲染，[详见](https://github.com/dcloudio/uni-ui/tree/nvue-uni-ui)
+
+未来 `uni-ui` 还会支持pc等大屏设备。
+
+### 3. 与uni统计自动集成实现免打点
+
+uni统计是优秀的多端统计平台，见[tongji.dcloud.net.cn](https://tongji.dcloud.net.cn)。
+
+除了一张报表看全端，它的另一个重要特点是免打点。
+比如使用 `uni-ui` 的navbar标题栏、收藏、购物车等组件，均可实现自动打点，统计页面标题等各种行为数据。
+当然你也可以关闭uni统计，这不是强制的。
+
+### 4. 主题扩展
+
+ `uni-ui` 支持[uni.scss](https://uniapp.dcloud.io/collocation/uni-scss)，可以方便的切换App的风格。
+
+ui是一种需求非常发散的产品，DCloud官方也无意用 `uni-ui` 压制第三方ui插件的空间，但官方有义务在性能和多端方面提供一个开源的标杆给大家。
+
+我们欢迎更多优秀的ui组件出现，也欢迎更多人贡献 `uni-ui` 的主题风格，满足更多用户的需求。
+
+
+## 快速开始
+
+uni-ui支持 HBuilderX直接新建项目模板、npm安装和单独导入个别组件等多种使用方式
+
+### 在HBuilderX 新建uni-app项目的模板中，选择uni-ui模板
+![HBuilderX内创建uni-ui项目](https://img.cdn.aliyun.dcloud.net.cn/uni-app/doc/create-uni-ui-project.jpg)
+
+由于uni-app独特的[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)技术，可以免引用、注册，直接使用各种符合规则的vue组件。
+
+在代码区键入`u`，拉出各种内置或uni-ui的组件列表，选择其中一个，即可使用该组件。
+
+光标放在组件名称上，按F1，可以查阅组件的文档。
+
+![uni-ui代码块](https://img.cdn.aliyun.dcloud.net.cn/uni-app/doc/uni-ui-snippet.jpg)
+
+### 通过 uni_modules 单独安装组件
+如果你没有创建uni-ui项目模板，也可以在你的工程里，通过 uni_modules 单独安装需要的某个组件。下表为uni-ui的扩展组件清单，点击每个组件在详情页面可以导入组件到项目下，导入后直接使用即可，无需import和注册。
+
+|组件名|组件说明|
+|---|---|
+|uni-badge|[数字角标](https://ext.dcloud.net.cn/plugin?name=uni-badge)|
+|uni-calendar|[日历](https://ext.dcloud.net.cn/plugin?name=uni-calendar)|
+|uni-card|[卡片](https://ext.dcloud.net.cn/plugin?name=uni-card)|
+|uni-collapse|[折叠面板](https://ext.dcloud.net.cn/plugin?name=uni-collapse)|
+|uni-combox|[组合框](https://ext.dcloud.net.cn/plugin?name=uni-combox)|
+|uni-countdown|[倒计时](https://ext.dcloud.net.cn/plugin?name=uni-countdown)|
+|uni-data-checkbox|[数据选择器](https://ext.dcloud.net.cn/plugin?name=uni-data-checkbox)|
+|uni-data-picker|[数据驱动的picker选择器](https://ext.dcloud.net.cn/plugin?name=uni-data-picker)|
+|uni-dateformat|[日期格式化](https://ext.dcloud.net.cn/plugin?name=uni-dateformat)|
+|uni-datetime-picker|[日期选择器](https://ext.dcloud.net.cn/plugin?name=uni-datetime-picker)|
+|uni-drawer|[抽屉](https://ext.dcloud.net.cn/plugin?name=uni-drawer)|
+|uni-easyinput|[增强输入框](https://ext.dcloud.net.cn/plugin?name=uni-easyinput)|
+|uni-fab|[悬浮按钮](https://ext.dcloud.net.cn/plugin?name=uni-fab)|
+|uni-fav|[收藏按钮](https://ext.dcloud.net.cn/plugin?name=uni-fav)|
+|uni-file-picker|[文件选择上传](https://ext.dcloud.net.cn/plugin?name=uni-file-picker)|
+|uni-forms|[表单](https://ext.dcloud.net.cn/plugin?name=uni-forms)|
+|uni-goods-nav|[商品导航](https://ext.dcloud.net.cn/plugin?name=uni-goods-nav)|
+|uni-grid|[宫格](https://ext.dcloud.net.cn/plugin?name=uni-grid)|
+|uni-group|[分组](https://ext.dcloud.net.cn/plugin?name=uni-group)|
+|uni-icons|[图标](https://ext.dcloud.net.cn/plugin?name=uni-icons)|
+|uni-indexed-list|[索引列表](https://ext.dcloud.net.cn/plugin?name=uni-indexed-list)|
+|uni-link|[超链接](https://ext.dcloud.net.cn/plugin?name=uni-link)|
+|uni-list|[列表](https://ext.dcloud.net.cn/plugin?name=uni-list)|
+|uni-load-more|[加载更多](https://ext.dcloud.net.cn/plugin?name=uni-load-more)|
+|uni-nav-bar|[自定义导航栏](https://ext.dcloud.net.cn/plugin?name=uni-nav-bar)|
+|uni-notice-bar|[通告栏](https://ext.dcloud.net.cn/plugin?name=uni-notice-bar)|
+|uni-number-box|[数字输入框](https://ext.dcloud.net.cn/plugin?name=uni-number-box)|
+|uni-pagination|[分页器](https://ext.dcloud.net.cn/plugin?name=uni-pagination)|
+|uni-popup|[弹出层](https://ext.dcloud.net.cn/plugin?name=uni-popup)|
+|uni-rate|[评分](https://ext.dcloud.net.cn/plugin?name=uni-rate)|
+|uni-row|[布局-行](https://ext.dcloud.net.cn/plugin?name=uni-row)|
+|uni-search-bar|[搜索栏](https://ext.dcloud.net.cn/plugin?name=uni-search-bar)|
+|uni-segmented-control|[分段器](https://ext.dcloud.net.cn/plugin?name=uni-segmented-control)|
+|uni-steps|[步骤条](https://ext.dcloud.net.cn/plugin?name=uni-steps)|
+|uni-swipe-action|[滑动操作](https://ext.dcloud.net.cn/plugin?name=uni-swipe-action)|
+|uni-swiper-dot|[轮播图指示点](https://ext.dcloud.net.cn/plugin?name=uni-swiper-dot)|
+|uni-table|[表格](https://ext.dcloud.net.cn/plugin?name=uni-table)|
+|uni-tag|[标签](https://ext.dcloud.net.cn/plugin?name=uni-tag)|
+|uni-title|[章节标题](https://ext.dcloud.net.cn/plugin?name=uni-title)|
+|uni-transition|[过渡动画](https://ext.dcloud.net.cn/plugin?name=uni-transition)|
+
+
+使用 `uni_modules` 方式安装组件库，可以直接通过插件市场导入，通过右键菜单快速更新组件，不需要引用、注册，直接在页面中使用 `uni-ui` 组件。[点击安装 uni-ui 组件库](https://ext.dcloud.net.cn/plugin?id=55)
+
+**注意：下载最新的组件目前仅支持 uni_modules ,非 uni_modules 版本最高支持到组件的1.2.10版本**
+
+如不能升级到 `uni_modules` 版本，可以使用 `uni_modules` 安装好对应组件，将组件拷贝到对应目录。
+
+例如需更新 `uni-list`和`uni-badge` ,将 `uni_modules>uni-list>components`和`uni_modules>uni-badege>components`下所有目录拷贝到如下目录即可：
+
+
+**目录示例**
+
+```json
+┌─components              组件目录
+│  ├─uni-list             list 列表目录
+│  │  └─uni-list.vue      list 组件文件
+│  ├─uni-list-item        list-item 列表目录
+│  │  └─uni-list-item.vue list 组件文件
+│  ├─uni-badge         	  badge 角标目录
+│  │  └─uni-badge.vue     badge 组件文件
+│  └─ //....              更多组件文件
+├─pages                   业务页面文件存放的目录
+│  ├─index
+│  │  └─index.vue         index示例页面
+├─main.js                 Vue初始化入口文件
+├─App.vue                 应用配置，用来配置App全局样式以及监听 应用生命周期
+├─manifest.json           配置应用名称、appid、logo、版本等打包信息，详见
+└─pages.json              配置页
+
+```
+
+### 通过  `uni_modules` 导入全部组件
+如果想一次把所有uni-ui组件导入到项目中，只需要导入一个 `uni-ui` 组件即可 [点击去导入](https://ext.dcloud.net.cn/plugin?id=55)。
+
+如果没有自动导入其他组件，可以在 uni-ui 组件目录上右键选择 `安装三方插件依赖` 即可。
+
+
+
+### npm安装 
+在 `vue-cli` 项目中可以使用 `npm` 安装 `uni-ui` 库 ，或者直接在 `HBuilderX` 项目中使用 `npm` 。
+
+> **注意**
+> cli 项目默认是不编译 `node_modules` 下的组件的，导致条件编译等功能失效 ，导致组件异常
+> 需要在根目录创建 `vue.config.js` 文件 ，增加 `@dcloudio/uni-ui` 包的编译即可正常
+> ```javascript
+> // vue.config.js
+> module.exports = {
+> 		transpileDependencies:['@dcloudio/uni-ui']
+> }
+> ```
+
+
+
+**准备 sass**
+
+`vue-cli` 项目请先安装 sass 及 sass-loader，如在 HBuliderX 中使用，可跳过此步。
+
+- 安装 sass
+```
+ npm i sass -D   或   yarn add sass -D  
+```
+
+- 安装 sass-loader
+```
+npm i sass-loader@10.1.1 -D   或   yarn add sass-loader@10.1.1 -D
+```
+
+> 如果 `node` 版本小于 16 ，sass-loader 请使用低于 @11.0.0 的版本，[sass-loader@11.0.0 不支持 vue@2.6.12 ](https://stackoverflow.com/questions/66082397/typeerror-this-getoptions-is-not-a-function)
+> 如果 `node` 版本大于 16 ， `sass-loader` 建议使用 `v8.x` 版本
+
+**安装 uni-ui**
+
+```
+npm i @dcloudio/uni-ui   或   yarn add @dcloudio/uni-ui
+```
+
+
+
+**配置easycom**
+
+使用 `npm` 安装好 `uni-ui` 之后，需要配置 `easycom` 规则，让 `npm` 安装的组件支持  `easycom`
+
+打开项目根目录下的 `pages.json` 并添加 `easycom` 节点：
+
+```javascript
+// pages.json
+{
+	"easycom": {
+		"autoscan": true,
+		"custom": {
+			// uni-ui 规则如下配置
+			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
+		}
+	},
+	
+	// 其他内容
+	pages:[
+		// ...
+	]
+}
+
+```
+
+在 ``template`` 中使用组件： 
+
+```html
+<uni-badge text="1"></uni-badge>
+<uni-badge text="2" type="success" @click="bindClick"></uni-badge>
+<uni-badge text="3" type="primary" :inverted="true"></uni-badge>
+```
+
+ **注意**
+ - uni-ui 现在只推荐使用 `easycom` ，如自己引用组件，可能会出现组件找不到的问题
+ - 使用 npm 安装的组件，默认情况下 babel-loader 会忽略所有 node_modules 中的文件 ，导致条件编译失效，需要通过配置 `vue.config.js` 解决：
+	 ```javascript
+	 // 在根目录创建 vue.config.js 文件，并配置如下
+	 module.exports = {
+		transpileDependencies: ['@dcloudio/uni-ui']
+	 }
+	 ```
+ - uni-ui 是uni-app内置组件的扩展。注意与web开发不同，uni-ui不包括基础组件，它是基础组件的补充。web开发中有的开发者习惯用一个ui库完成所有开发，但在uni-app体系中，推荐开发者首先使用性能更高的基础组件，然后按需引入必要的扩展组件。
+ - `uni-ui` 不支持使用 `Vue.use()` 的方式安装
+
+
+### 贡献代码
+在使用 `uni-ui` 中，如遇到无法解决的问题，请提 [Issues](https://github.com/dcloudio/uni-ui/issues) 给我们，假如您有更好的点子或更好的实现方式，也欢迎给我们提交 [PR](https://github.com/dcloudio/uni-ui/pulls)
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..40016f4
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,34 @@
+import { loadEnv } from 'vite';
+import uni from '@dcloudio/vite-plugin-uni';
+import path from 'path';
+// import viteCompression from 'vite-plugin-compression';
+import uniReadPagesV3Plugin from './sheep/router/utils/uni-read-pages-v3';
+import mpliveMainfestPlugin from './sheep/libs/mplive-manifest-plugin';
+
+
+// https://vitejs.dev/config/
+export default (command, mode) => {
+	const env = loadEnv(mode, __dirname, 'SHOPRO_');
+	return {
+		envPrefix: "SHOPRO_",
+		plugins: [
+			uni(),
+			// viteCompression({
+			// 	verbose: false
+			// }),
+			uniReadPagesV3Plugin({
+				pagesJsonDir: path.resolve(__dirname, './pages.json'),
+				includes: ['path', 'aliasPath', 'name', 'meta'],
+			}),
+			mpliveMainfestPlugin(env.SHOPRO_MPLIVE_ON)
+		],
+		server: {
+			host: true,
+			// open: true,
+			port: env.SHOPRO_DEV_PORT,
+			hmr: {
+				overlay: true,
+			},
+		},
+	};
+};