From d170a9d189b390bf66771dd1467691256aebd20a Mon Sep 17 00:00:00 2001
From: zhuoda <zhuoluodada@qq.com>
Date: Wed, 13 Mar 2024 21:05:28 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90smart-app=E6=9B=B4=E6=96=B0=E3=80=911?=
 =?UTF-8?q?=E3=80=81=E7=89=88=E6=9C=AC=E6=9B=B4=E6=96=B0=E8=AE=B0=E5=BD=95?=
 =?UTF-8?q?=EF=BC=9B2=E3=80=81=E5=A4=8D=E6=9D=82=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E2=80=983=E3=80=81=E5=BC=95=E5=85=A5tabs=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 smart-app/src/api/support/change-log-api.js   |    7 +
 smart-app/src/pages.json                      |   14 +-
 .../form/components/font-size-select.vue      |   49 -
 .../src/pages/form/components/interest.vue    |   59 -
 .../src/pages/form/components/radio-sex.vue   |   60 -
 smart-app/src/pages/form/form.vue             |  251 +--
 smart-app/src/pages/home/components/menu.vue  |   20 +-
 smart-app/src/pages/list/list.vue             |    2 +-
 .../support/change-log/change-log-detail.vue  |   79 +
 .../support/change-log/change-log-list.vue    |   16 +-
 smart-app/src/theme/index.scss                |    9 +-
 .../y-tabs/components/css/index.scss          |  464 ++++++
 .../uni_modules/y-tabs/components/js/const.js |  194 +++
 .../y-tabs/components/js/touchMixin.js        |   75 +
 .../uni_modules/y-tabs/components/js/uitls.js |  177 +++
 .../y-tabs/components/js/utilMixin.js         |    8 +
 .../y-tabs/components/y-tab/y-tab.vue         |  238 +++
 .../y-tabs/components/y-tabs/y-tabs.vue       | 1363 +++++++++++++++++
 18 files changed, 2717 insertions(+), 368 deletions(-)
 delete mode 100644 smart-app/src/pages/form/components/font-size-select.vue
 delete mode 100644 smart-app/src/pages/form/components/interest.vue
 delete mode 100644 smart-app/src/pages/form/components/radio-sex.vue
 create mode 100644 smart-app/src/pages/support/change-log/change-log-detail.vue
 create mode 100644 smart-app/src/uni_modules/y-tabs/components/css/index.scss
 create mode 100644 smart-app/src/uni_modules/y-tabs/components/js/const.js
 create mode 100644 smart-app/src/uni_modules/y-tabs/components/js/touchMixin.js
 create mode 100644 smart-app/src/uni_modules/y-tabs/components/js/uitls.js
 create mode 100644 smart-app/src/uni_modules/y-tabs/components/js/utilMixin.js
 create mode 100644 smart-app/src/uni_modules/y-tabs/components/y-tab/y-tab.vue
 create mode 100644 smart-app/src/uni_modules/y-tabs/components/y-tabs/y-tabs.vue

diff --git a/smart-app/src/api/support/change-log-api.js b/smart-app/src/api/support/change-log-api.js
index 67727d95..9fbe1efa 100644
--- a/smart-app/src/api/support/change-log-api.js
+++ b/smart-app/src/api/support/change-log-api.js
@@ -14,4 +14,11 @@ export const changeLogApi = {
   queryPage: (param) => {
     return postRequest('/support/changeLog/queryPage', param);
   },
+
+  /**
+   * 详情  @author  卓大
+   */
+  getDetail: (changeLogId) => {
+    return getRequest(`/support/changeLog/getDetail/${changeLogId}`);
+  },
 };
diff --git a/smart-app/src/pages.json b/smart-app/src/pages.json
index 44d5ed04..e1c224f3 100644
--- a/smart-app/src/pages.json
+++ b/smart-app/src/pages.json
@@ -2,7 +2,8 @@
 	"easycom": {
 		"autoscan": true,
 		"custom": {
-			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
+			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
+			"^y-(.*)": "@/uni_modules/y-$1/components/y-$1.vue"
 		}
 	},
 	"pages": [
@@ -69,7 +70,7 @@
 			"path" : "pages/notice/notice-detail",
 			"style" :
 			{
-				"navigationBarTitleText" : "通知公告",
+				"navigationBarTitleText" : "公告内容",
 				"enablePullDownRefresh" : false,
 				"navigationBarBackgroundColor": "#fff"
 			}
@@ -92,6 +93,15 @@
 				"navigationBarBackgroundColor": "#fff"
 			}
 		},
+		{
+			"path" : "pages/support/change-log/change-log-detail",
+			"style" :
+			{
+				"navigationBarTitleText" : "版本更新内容",
+				"enablePullDownRefresh" : false,
+				"navigationBarBackgroundColor": "#fff"
+			}
+		},
 		{
 			"path" : "pages/list/list",
 			"style" :
diff --git a/smart-app/src/pages/form/components/font-size-select.vue b/smart-app/src/pages/form/components/font-size-select.vue
deleted file mode 100644
index f1cb8c01..00000000
--- a/smart-app/src/pages/form/components/font-size-select.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-	<view class="font-item-box">
-		<text :class="modelValue==0?'active':''" @click="modelValue=0">标准</text>
-		<view></view>
-		<text :class="modelValue==1?'active':''" @click="modelValue=1">大号</text>
-		<view></view>
-		<text :class="modelValue==2?'active':''" @click="modelValue=2">小号</text>
-	</view>
-</template>
-
-<script setup>
-import { watch } from 'vue';
-const emits = defineEmits(['update:modelValue'])
-const props = defineProps({
-	modelValue:{
-		type:Number,
-		default:0
-	}
-})
-
-watch(()=>props.modelValue,(newValue,oldValue)=>{
-	emits('update:modelValue',newValue)
-})
-</script>
-
-<style lang="scss" scoped>
-	.font-item-box {
-		width: 100%;
-		display: flex;
-		justify-content: flex-end;
-		align-items: center;
-
-		text {
-			font-size: 30rpx;
-			color: #cccccc;
-
-			&.active {
-				color: #1A9AFF;
-			}
-		}
-
-		view {
-			width: 4rpx;
-			height: 16rpx;
-			background-color: #e6e6e6;
-			margin: 0 42rpx;
-		}
-	}
-</style>
diff --git a/smart-app/src/pages/form/components/interest.vue b/smart-app/src/pages/form/components/interest.vue
deleted file mode 100644
index 32b2e70c..00000000
--- a/smart-app/src/pages/form/components/interest.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-	<view class="card-content">
-		<view @click="modelValue = index" :class="modelValue == index?'active':''"
-			v-for="(item,index) in list" :key="index">
-			{{item}}
-		</view>
-	</view>
-</template>
-
-<script setup>
-import { watch } from 'vue';
-const emits = defineEmits(['update:modelValue'])
-const props = defineProps({
-	modelValue:{
-		type:Number,
-		default:0
-	},
-	list:{
-		type:Array,
-		default:[]
-	}
-})
-
-watch(()=>props.modelValue,(newValue,oldValue)=>{
-	emits('update:modelValue',newValue)
-})
-</script>
-
-<style lang="scss" scoped>
-	.card-content {
-		padding: 0 30rpx 24rpx;
-		display: flex;
-		flex-wrap: wrap;
-
-		view {
-			box-sizing: border-box;
-			width: 197rpx;
-			height: 72rpx;
-			background: #f7f8f9;
-			border-radius: 8rpx;
-			text-align: center;
-			line-height: 72rpx;
-			margin-right: 24rpx;
-			margin-top: 24rpx;
-			font-size: 30rpx;
-			color: #323333;
-			border: 2rpx solid #f7f8f9;
-
-			&:nth-child(3n) {
-				margin-right: 0;
-			}
-		}
-
-		.active {
-			background: #eff8ff;
-			border: 2rpx solid #2291f9;
-		}
-	}
-</style>
\ No newline at end of file
diff --git a/smart-app/src/pages/form/components/radio-sex.vue b/smart-app/src/pages/form/components/radio-sex.vue
deleted file mode 100644
index 913a950f..00000000
--- a/smart-app/src/pages/form/components/radio-sex.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-	<view class="sex-box">
-		<view class="sex-item" :class="modelValue?'active':''" @click="modelValue=true">
-			<uni-icons type="circle" v-if="!modelValue" color="#ccc" size="30"></uni-icons>
-			<uni-icons v-else type="checkbox-filled" color="#1A9AFF" size="30"></uni-icons>
-			<view>
-				男
-			</view>
-		</view>
-		<view class="sex-item" :class="!modelValue?'active':''" @click="modelValue=false">
-			<uni-icons type="circle" v-if="modelValue" color="#ccc" size="30"></uni-icons>
-			<uni-icons v-else type="checkbox-filled" color="#1A9AFF" size="30"></uni-icons>
-			<view>
-				女
-			</view>
-		</view>
-	</view>
-</template>
-
-<script setup>
-import { watch } from 'vue';
-const emits = defineEmits(['update:modelValue'])
-const props = defineProps({
-	modelValue:{
-		type:Boolean,
-		default:true
-	}
-})
-
-watch(()=>props.modelValue,(newValue,oldValue)=>{
-	emits('update:modelValue',newValue)
-})
-</script>
-
-<style lang="scss" scoped>
-.sex-box {
-	width: 100%;
-	display: flex;
-	justify-content: flex-end;
-
-	.sex-item {
-		display: flex;
-		width: 112rpx;
-		height: 64rpx;
-		background-color: #f3f3f3;
-		border: 1rpx solid #ededed;
-		align-items: center;
-		margin-left: 40rpx;
-		justify-content: center;
-		border-radius: 8rpx;
-		font-size: 32rpx;
-	}
-
-	.active {
-		background: #f1f9ff;
-		border: 1rpx solid #1a9aff;
-		color: #1A9AFF;
-	}
-}
-</style>
diff --git a/smart-app/src/pages/form/form.vue b/smart-app/src/pages/form/form.vue
index f22d9f0e..816d1d54 100644
--- a/smart-app/src/pages/form/form.vue
+++ b/smart-app/src/pages/form/form.vue
@@ -1,199 +1,94 @@
 <template>
-  <view class="">
-    <view class="form-card">
-      <view class="title"> 常用功能 </view>
-      <view class="content">
-        <uni-forms :label-width="100" :modelValue="formData" label-position="left">
-          <uni-forms-item class="uni-forms-item" label="姓名" name="name">
-            <input class="input" type="text" v-model="formData.name" placeholder="请输入姓名" />
+  <view class="smart-form">
+    <uni-forms :label-width="100" :modelValue="formData" label-position="left">
+      <view class="smart-form-group">
+        <view class="smart-form-group-title"> 常用功能 </view>
+        <view class="smart-form-group-content">
+          <uni-forms-item class="smart-form-item" label="姓名" name="name" required>
+            <uni-easyinput trim="all" v-model="formData.name" placeholder="请输入姓名" />
           </uni-forms-item>
-          <uni-forms-item class="uni-forms-item" label="手机号码" name="name">
-            <input class="input" type="text" v-model="formData.name" placeholder="请输入手机号码" />
+          <uni-forms-item class="smart-form-item" label="手机号码" name="name" required>
+            <uni-easyinput trim="all" v-model="formData.name" placeholder="请输入手机号码" />
           </uni-forms-item>
-          <uni-forms-item class="uni-forms-item" label="邮箱地址" name="name">
-            <input class="input" type="text" v-model="formData.name" placeholder="请输入邮箱地址" />
+          <uni-forms-item class="smart-form-item" label="邮箱地址" name="name">
+            <uni-easyinput trim="all" v-model="formData.name" placeholder="请输入邮箱地址" />
           </uni-forms-item>
-          <uni-forms-item class="uni-forms-item" label="性别" name="name">
-            <RadioSex v-model="formData.sex"></RadioSex>
+          <uni-forms-item class="smart-form-item" label="性别" required>
+            <uni-data-checkbox v-model="formData.sex" :localdata="sexs" />
           </uni-forms-item>
-          <uni-forms-item class="uni-forms-item" label="出生日期" name="name">
-            <view class="item-box">
-              <picker ref="datePickerRef" mode="date" @change="bindDateChange">
-                <input ref="dateInputRef" class="input" type="text" v-model="date" placeholder="点击选择时间" />
-              </picker>
-            </view>
+          <uni-forms-item class="smart-form-item" label="出生日期" name="name">
+            <uni-datetime-picker type="date" return-type="timestamp" v-model="formData.datetimesingle" />
           </uni-forms-item>
-          <uni-forms-item class="uni-forms-item" label="所在地" name="name">
-            <input class="input" disabled type="text" v-model="formData.name" placeholder="点击选择所在地" />
-          </uni-forms-item>
-        </uni-forms>
+        </view>
       </view>
-    </view>
-    <view class="form-card">
-      <view class="title"> 推送用户 </view>
-      <view class="content">
-        <uni-forms :label-width="100" :modelValue="formData" label-position="left">
-          <uni-forms-item class="uni-forms-item" label="选择用户" name="name">
-            <view class="item-box" @click="openSelectPeople">
-              <image class="user-select-image" src="/src/static/images/form/add.png" mode=""></image>
-            </view>
+      <view class="smart-form-group">
+        <view class="smart-form-group-title"> 兴趣爱好 </view>
+        <view class="smart-form-group-content">
+          <uni-forms-item class="smart-form-item" label="兴趣爱好" name="interest">
+            <uni-data-checkbox mode="button" multiple v-model="formData.interest" :localdata="interestList"></uni-data-checkbox>
           </uni-forms-item>
-        </uni-forms>
+        </view>
       </view>
-    </view>
-    <view class="form-card">
-      <view class="title"> 兴趣爱好 </view>
-      <Interest v-model="formData.interest" :list="interestList"></Interest>
-    </view>
-    <view class="form-card">
-      <view class="title"> 推送用户 </view>
-      <view class="content">
-        <uni-forms :label-width="100" :modelValue="formData" label-position="left">
-          <uni-forms-item class="uni-forms-item" label="亮度调整" name="name">
-            <view class="item-box">
-              <slider style="width: 100%" value="50" activeColor="#2291F9" backgroundColor="#f5f6f8" block-color="#2291F9" block-size="20" />
-            </view>
+      <view class="smart-form-group">
+        <view class="smart-form-group-title"> 屏幕设置 </view>
+        <view class="smart-form-group-content">
+          <uni-forms-item class="smart-form-item" label="亮度调整" name="name">
+            <slider style="width: 100%" value="50" activeColor="#2291F9" backgroundColor="#f5f6f8" block-color="#2291F9" block-size="20" />
           </uni-forms-item>
-          <uni-forms-item class="uni-forms-item" label="字体大小" name="name">
-            <FontSizeSelece v-model="formData.fontType"></FontSizeSelece>
+        </view>
+      </view>
+      <view class="smart-form-group">
+        <view class="smart-form-group-title"> 自我介绍 </view>
+        <view class="smart-form-group-content">
+          <uni-forms-item class="smart-form-item" label="兴趣爱好" name="interest">
+            <uni-easyinput type="textarea" autoHeight v-model="value" placeholder="请输入自我介绍" />
           </uni-forms-item>
-        </uni-forms>
-      </view>
-    </view>
-    <view class="form-card">
-      <view class="title"> 自我介绍 </view>
-      <view class="content">
-        <uni-forms :modelValue="formData" label-position="left">
-          <view class="textarea">
-            <textarea auto-height style="font-size: 30rpx" placeholder="请输入自我介绍" placeholder-class="textarea-placeholder" />
-          </view>
-          <view class="example-body">
-            <uni-file-picker limit="9" title="上传图片">
-              <image style="width: 100%; height: 100%" src="/static/images/form/add-image.png" mode=""></image>
-            </uni-file-picker>
-          </view>
-        </uni-forms>
+
+          <uni-forms-item class="smart-form-item" label="上传图片" name="interest">
+            <uni-file-picker limit="9" title="最多选择9张图片" />
+          </uni-forms-item>
+        </view>
       </view>
+    </uni-forms>
+    <view class="smart-form-submit fixed-bottom-button">
+      <button class="smart-form-submit-btn smart-margin-right20" type="default">取消</button>
+      <button class="smart-form-submit-btn" type="warn">重置</button>
+      <button class="smart-form-submit-btn" type="primary">确定</button>
     </view>
   </view>
 </template>
 
 <script setup>
-  import RadioSex from './components/radio-sex.vue';
-  import Interest from './components/interest.vue';
-  import FontSizeSelece from './components/font-size-select.vue';
-  import { reactive, ref } from 'vue';
+  import { reactive } from 'vue';
 
-  const interestList = ['唱歌', '跳舞', 'RAP', '篮球', '音乐', '唱歌', '跳舞', 'RAP', '篮球'];
-  const formData = reactive({
-    interest: 4,
-    fontType: 0,
-  });
-  const hobby = ref('');
-  const date = ref();
-  const bindDateChange = (e) => {
-    date.value = e.detail.value;
-  };
+  const sexs = [
+    {
+      text: '男',
+      value: 0,
+    },
+    {
+      text: '女',
+      value: 1,
+    },
+    {
+      text: '你懂的',
+      value: 2,
+    },
+  ];
 
-  const openSelectPeople = () => {
-    uni.navigateTo({
-      url: '/pages/select-people/select-people',
-    });
-  };
+  const interestList = [
+    { text: '唱歌', value: 1 },
+    { text: '足球', value: 2 },
+    { text: '篮球', value: 3 },
+    { text: '跑步', value: 4 },
+    { text: '写字', value: 5 },
+    { text: '美术', value: 6 },
+    { text: '射击', value: 7 },
+    { text: '健身', value: 8 },
+    { text: '马术', value: 9 },
+    { text: '美食', value: 10 },
+  ];
+  const formData = reactive({});
 </script>
 
-<style lang="scss" scoped>
-  page {
-    background: #f5f6f8;
-  }
-
-  ::v-deep .uni-forms-item__content {
-    display: flex;
-    align-items: center;
-  }
-
-  ::v-deep .uni-forms-item__label {
-    font-size: 32rpx;
-    color: #000000;
-    padding-top: 28rpx;
-  }
-
-  ::v-deep .uni-forms-item {
-    margin-bottom: 0 !important;
-  }
-
-  ::v-deep .uni-slider-thumb {
-    background: #fff !important;
-    border: 10rpx solid #1a9aff;
-    box-sizing: border-box;
-  }
-
-  .uni-forms-item {
-    height: 100rpx;
-    border-bottom: 1rpx solid #ededed;
-
-    &:last-child {
-      border: none;
-    }
-  }
-
-  .form-card {
-    box-sizing: border-box;
-    width: 700rpx;
-    margin: 20rpx auto 0;
-    background: #fff;
-    border-radius: 16rpx;
-
-    .title {
-      width: 100%;
-      height: 84rpx;
-      background-image: url('/static/images/list/form-list.png');
-      background-size: 100% 84rpx;
-      line-height: 84rpx;
-      text-indent: 30rpx;
-      font-size: 32rpx;
-      color: #323333;
-      font-weight: bold;
-    }
-
-    .content {
-      padding: 0 30rpx;
-    }
-
-    .input {
-      font-size: 30rpx;
-      text-align: right;
-      width: 100%;
-    }
-  }
-
-  .item-box {
-    width: 100%;
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  .user-select-image {
-    width: 40rpx;
-    height: 40rpx;
-  }
-
-  .textarea {
-    background: #fcfcfc;
-    border: 0.5px solid #ededed;
-    border-radius: 4px;
-    width: 100%;
-    height: 320rpx;
-    margin-top: 24rpx;
-    padding: 24rpx 30rpx;
-    box-sizing: border-box;
-    .textarea-placeholder {
-      color: #cccccc;
-      font-size: 30rpx;
-    }
-  }
-
-  .example-body {
-    padding-bottom: 24rpx;
-  }
-</style>
+<style lang="scss" scoped></style>
diff --git a/smart-app/src/pages/home/components/menu.vue b/smart-app/src/pages/home/components/menu.vue
index 30956f36..0f49beae 100644
--- a/smart-app/src/pages/home/components/menu.vue
+++ b/smart-app/src/pages/home/components/menu.vue
@@ -38,10 +38,15 @@
       <uni-grid-item class="menu-grid">
         <view class="menu-item" @click="navigateTo('/pages/form/form')">
           <image class="item-image" src="/@/static/images/index/ic_home_menu6.png"></image>
-          <view class="item-text"> 表单 </view>
+          <view class="item-text"> 复杂表单 </view>
+        </view>
+      </uni-grid-item>
+      <uni-grid-item class="menu-grid">
+        <view class="menu-item" @click="switchTab('/pages/list/list')">
+          <image class="item-image" src="/@/static/images/index/ic_home_menu9.png"></image>
+          <view class="item-text"> 常见列表 </view>
         </view>
       </uni-grid-item>
-
       <uni-grid-item class="menu-grid">
         <view class="menu-item" @click="navigateTo('/pages/order-detail/order-detail')">
           <image class="item-image" src="/@/static/images/index/ic_home_menu7.png"></image>
@@ -54,12 +59,6 @@
           <view class="item-text"> 优惠券 </view>
         </view>
       </uni-grid-item>
-      <uni-grid-item class="menu-grid">
-        <view class="menu-item" @click="navigateTo('/pages/list/list')">
-          <image class="item-image" src="/@/static/images/index/ic_home_menu9.png"></image>
-          <view class="item-text"> 精品课程 </view>
-        </view>
-      </uni-grid-item>
       <uni-grid-item class="menu-grid">
         <view class="menu-item" @click="navigateTo('/pages/change-log/change-log-list')">
           <image class="item-image" src="/@/static/images/index/ic_home_menu10.png"></image>
@@ -82,6 +81,11 @@
       url,
     });
   }
+  function switchTab(url) {
+    uni.switchTab({
+      url,
+    });
+  }
 </script>
 
 <style lang="scss" scoped>
diff --git a/smart-app/src/pages/list/list.vue b/smart-app/src/pages/list/list.vue
index d81da871..2e1f7824 100644
--- a/smart-app/src/pages/list/list.vue
+++ b/smart-app/src/pages/list/list.vue
@@ -66,5 +66,5 @@ const tabsList = [{
 			color: #ccc;
 		}
 	}
-	
+
 </style>
diff --git a/smart-app/src/pages/support/change-log/change-log-detail.vue b/smart-app/src/pages/support/change-log/change-log-detail.vue
new file mode 100644
index 00000000..d33314be
--- /dev/null
+++ b/smart-app/src/pages/support/change-log/change-log-detail.vue
@@ -0,0 +1,79 @@
+<template>
+  <view class="container">
+    <view class="title">
+      <uni-title type="h1" align="center" :title="detail.title"></uni-title>
+      <uni-title type="h4" align="center" color="#999999" :title="detail.subTitle"></uni-title>
+    </view>
+    <view class="content">
+      <rich-text :nodes="detail.content" />
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { inject, reactive } from 'vue';
+  import { changeLogApi } from '/@/api/support/change-log-api';
+  import { onLoad } from '@dcloudio/uni-app';
+  import { smartSentry } from '/@/lib/smart-sentry';
+
+  const smartEnumPlugin = inject('smartEnumPlugin');
+
+  const detail = reactive({
+    title: '',
+    subTitle: '',
+    content: '',
+  });
+
+  async function getDetail(changeLogId) {
+    try {
+      uni.showLoading({ title: '加载中' });
+      let res = await changeLogApi.getDetail(changeLogId);
+      detail.title = res.data.version + '版本' + smartEnumPlugin.getDescByValue('CHANGE_LOG_TYPE_ENUM', res.data.type);
+      detail.content =
+        '<pre style="' +
+        'line-height: 18px;\n' +
+        'font-size: 14px;\n' +
+        'white-space: pre-wrap;\n' +
+        '  white-space: -moz-pre-wrap;\n' +
+        '  white-space: -pre-wrap;\n' +
+        '  white-space: -o-pre-wrap;\n' +
+        '  word-wrap: break-word;">' +
+        res.data.content +
+        '</pre>';
+      let subTitleArray = [];
+      if (res.data.publishAuthor) {
+        subTitleArray.push(res.data.publishAuthor);
+      }
+      if (res.data.publicDate) {
+        subTitleArray.push(res.data.publicDate);
+      }
+      detail.subTitle = subTitleArray.join(' | ');
+    } catch (e) {
+      smartSentry.captureError(e);
+    } finally {
+      uni.hideLoading();
+    }
+  }
+
+  onLoad((option) => {
+    uni.pageScrollTo({
+      scrollTop: 0,
+    });
+    getDetail(option.changeLogId);
+  });
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    height: 100vh;
+    padding: 20rpx;
+
+    .content {
+      border-top: #cccccc 1px solid;
+      margin-top: 50rpx;
+      padding: 50rpx 16rpx 50rpx 16rpx;
+      line-height: 30px;
+      color: #333333;
+    }
+  }
+</style>
diff --git a/smart-app/src/pages/support/change-log/change-log-list.vue b/smart-app/src/pages/support/change-log/change-log-list.vue
index a7b9a4c4..41e2d1b9 100644
--- a/smart-app/src/pages/support/change-log/change-log-list.vue
+++ b/smart-app/src/pages/support/change-log/change-log-list.vue
@@ -25,23 +25,20 @@
       <view class="list-container">
         <view class="list-item" @click="gotoDetail(item.changeLogId)" v-for="item in listData" :key="item.changeLogId">
           <view class="list-item-row">
-            <view class="list-item-content bolder">{{ item.version }}</view>
+            <view class="list-item-content bolder"
+              >{{ item.version }}版本{{ $smartEnumPlugin.getDescByValue('CHANGE_LOG_TYPE_ENUM', item.type) }}</view
+            >
             <uni-tag
               :text="$smartEnumPlugin.getDescByValue('CHANGE_LOG_TYPE_ENUM', item.type)"
               :type="$smartEnumPlugin.getObjectByValue('CHANGE_LOG_TYPE_ENUM', item.type).type"
             />
           </view>
           <view class="list-item-row">
-            <view class="list-item-label">发布日期：{{ item.publicDate }} - {{ item.publishAuthor }}</view>
-          </view>
-          <view class="list-item-row">
-            <view class="list-item-label">{{ item.content }}</view>
+            <view class="list-item-label">发布日期：{{ item.publicDate }}</view>
           </view>
         </view>
       </view>
     </mescroll-body>
-
-    <uni-fab ref="fab" :pattern="fabPattern" horizontal="right" @fabClick="gotoAdd" />
   </view>
 </template>
 
@@ -121,7 +118,7 @@
   // --------------------------- 详情 ---------------------------------
 
   function gotoDetail(id) {
-    uni.navigateTo({ url: '/pages/enterprise/enterprise-detail?enterpriseId=' + id });
+    uni.navigateTo({ url: '/pages/support/change-log/change-log-detail?changeLogId=' + id });
   }
 </script>
 
@@ -172,9 +169,10 @@
           font-size: 30rpx;
           font-weight: 400;
           text-align: left;
+          color: $uni-text-color-grey;
         }
         .bolder {
-          font-weight: 600 !important;
+          font-weight: 500 !important;
           font-size: 34rpx !important;
         }
         .list-item-content {
diff --git a/smart-app/src/theme/index.scss b/smart-app/src/theme/index.scss
index bec37d28..dcab77d7 100644
--- a/smart-app/src/theme/index.scss
+++ b/smart-app/src/theme/index.scss
@@ -136,9 +136,9 @@
   }
 
   .smart-form-item {
-    height: 100rpx;
+    min-height: 100rpx;
+    height: auto;
     padding-bottom: 24rpx;
-    //border-bottom: 1rpx solid #ededed;
     align-items: center;
     &:last-child {
       border: none;
@@ -191,4 +191,9 @@
       flex: 1;
     }
   }
+
+  .fixed-bottom-button {
+    position: fixed;
+    bottom: 0;
+  }
 }
diff --git a/smart-app/src/uni_modules/y-tabs/components/css/index.scss b/smart-app/src/uni_modules/y-tabs/components/css/index.scss
new file mode 100644
index 00000000..579d60b2
--- /dev/null
+++ b/smart-app/src/uni_modules/y-tabs/components/css/index.scss
@@ -0,0 +1,464 @@
+.y-tabs {
+	position: relative;
+	display: block;
+
+	// 标签栏垂直方位下的根容器样式
+	&.is-vertical {
+		display: flex;
+		flex-wrap: nowrap;
+		flex-direction: row;
+		justify-content: flex-end;
+		flex: 1;
+
+		// 垂直时标签栏scroll-view的子项垂直排列
+		.y-tabs__scroll {
+			flex-direction: column;
+		}
+	}
+
+	// 区域滚动下的滚动导航
+	&.is-areaScroll.is-scrollNav {
+		display: flex;
+		height: 100vh;
+		flex-direction: column;
+
+		// 标签栏不收缩
+		.y-tabs__wrap {
+			flex-shrink: 0;
+		}
+
+		.y-tabs__track,
+		.y-tabs__content-scrollview {
+			height: 100%;
+		}
+	}
+
+	// 区域滚动下的侧边栏导航
+	&.is-areaScroll.is-sidebarNav {
+		display: flex;
+		height: 100vh;
+		flex-direction: row;
+
+		.y-tabs__scroll {
+			height: 100%;
+		}
+
+		// 标签栏不收缩
+		.y-tabs__wrap {
+			flex-shrink: 0;
+		}
+
+		.y-tabs__track,
+		.y-tabs__content-scrollview {
+			height: 100%;
+		}
+	}
+}
+
+// 依赖元素
+.y-tabs__depend {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 1px; //必须保证有高度，否则observer无效
+	width: 100%;
+}
+
+// 透明标签栏所需的依赖元素
+.y-tabs__depend--transparent {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 1px; //必须保证有高度，否则observer无效
+	width: 1px;
+}
+
+// 模拟标签栏吸顶时设置offset时距屏幕顶部的元素
+.y-tabs__depend--offset {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: -1;
+	height: 1px;
+}
+
+// 标签栏占位元素
+.y-tabs__placeholder {
+	position: relative;
+}
+
+// 标签垂直展示且吸顶时，标签栏占位元素不伸缩
+.y-tabs.is-fixed.is-vertical .y-tabs__placeholder {
+	flex-shrink: 0;
+}
+
+// 文字省略
+.y-tabs__ellipsis {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+// 导航区域包裹层
+.y-tabs__wrap {
+	position: relative;
+	display: flex;
+	align-items: center;
+	overflow: hidden;
+	visibility: visible;
+	background: #fff;
+	touch-action: none;
+
+	// 标签栏垂直展示时包裹层样式
+	&.is-vertical {
+		width: 100px;
+		display: flex;
+		flex-direction: column;
+		flex-shrink: 0;
+	}
+
+	// 粘性定位布局下的导航区域包裹层
+	&.is-fixed {
+		position: fixed;
+		top: 0;
+		right: 0;
+		left: 0;
+		z-index: 99;
+	}
+
+	// 标签垂直展示且吸顶时，给定bottom，否则scroll-view不会滚动
+	&.is-fixed.is-vertical {
+		bottom: 0;
+	}
+
+	// 透明的导航区域包裹层
+	&.is-transparent {
+		background: rgba(255, 255, 255, 0);
+	}
+
+	// 标签栏水平时按钮风格的包裹层
+	&.is-button:not(.is-vertical),
+	&.is-line-button:not(.is-vertical) {
+		padding: 0 8px;
+	}
+}
+
+// scroll-view组件样式
+.y-tabs__scroll {
+	position: relative;
+	width: 100%;
+	white-space: nowrap; // 使用横向滚动时，需要给<scroll-view>添加white-space: nowrap;样式
+	flex-direction: row;
+}
+
+// 条件编译不放在样式中，vue3无效
+
+// H5、APP端去滚动条
+// 小程序端会报：Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.
+/* #ifdef H5 || APP */
+.y-tabs__scroll ::-webkit-scrollbar {
+	display: none;
+	width: 0;
+	height: 0;
+	-webkit-appearance: none;
+	background: transparent;
+	color: transparent;
+}
+/* #endif */
+
+// IOS 13 以下的系统，当滚动区域设置了-webkit-overflow-scrolling: touch;时（必须设置，否者几乎无法滚动），::-webkit-scrollbar 相关属性会失效，iOS 13 已经修复了此Bug。
+// 小程序端: 去除 scroll-view 组件的滚动条
+/* #ifndef H5 || APP  */
+::-webkit-scrollbar {
+	display: none;
+	width: 0;
+	height: 0;
+	-webkit-appearance: none;
+	background: transparent;
+	color: transparent;
+}
+/* #endif */
+
+// 导航区域
+.y-tabs__nav {
+	position: relative;
+	box-sizing: border-box;
+	user-select: none;
+	flex: 1;
+	display: flex;
+	
+	&.is-shrink{
+		display: inline-flex;
+	}
+	
+	// 卡片风格
+	&.is-card {
+		margin: 6px 16px;
+		border-radius: 4px;
+		box-sizing: border-box;
+		border: 1px solid #0022ab;
+	}
+
+	// 标签栏垂直时导航区域样式
+	&.is-vertical {
+		flex-direction: column;
+		height: auto;
+
+		.y-tab {
+			flex: unset;
+		}
+	}
+
+	// 标签左侧、右侧的补充区域
+	&-left,
+	&-right {
+		position: relative;
+		display: inline-flex;
+		white-space: nowrap;
+	}
+}
+
+// 导航标签
+.y-tab {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	height: 40px;
+	font-size: 28rpx;
+	color: #646566;
+	text-align: center;
+	padding: 0 4px;
+	flex: 1;
+	cursor: pointer;
+	// webkit的css扩展：1、-webkit-tap-highlight-color:这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。有事件监听的元素被点击的时候会被高亮显示，比如我的android上表现为一个蓝框加上半透明的背景
+	-webkit-tap-highlight-color: transparent;
+	// transition-duration: 0.2s;
+	// transition-property: background;
+	flex-shrink: 0;
+	z-index: 2;
+
+	// 选中状态
+	&.is-active {
+		color: #323233;
+		font-weight: 500;
+	}
+
+	// 禁用状态
+	&.is-disabled {
+		color: #c8c9cc !important;
+		cursor: not-allowed;
+	}
+
+	// 收缩布局
+	&.is-shrink {
+		flex: none;
+		padding: 0 8px;
+	}
+
+	//卡片风格
+	&.is-card {
+		height: 28px;
+		line-height: 28px;
+	}
+}
+
+// 标题区域
+.y-tab__title {
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	height: inherit;
+}
+
+// 标题区域垂直排列
+.y-tab__title--top,
+.y-tab__title--bottom {
+	flex-direction: column;
+}
+
+// 标题文字
+.y-tab__text {
+	position: relative;
+	display: block;
+	line-height: 1.2;
+	order: 2;
+	white-space: nowrap; //字节会设置white-space:normal
+}
+
+// 标签垂直展示时，未达到文字超出隐藏的条件时
+.y-tabs__nav.is-vertical .y-tab__text:not(.y-tabs__ellipsis) {
+	white-space: normal;
+}
+
+// 使用order排序
+.y-tab__text--left,
+.y-tab__text--top {
+	order: 0;
+}
+
+// 标题图标/图片包裹层
+.y-tab__icons {
+	display: flex;
+	align-items: center;
+	order: 1;
+	z-index: 1;
+}
+
+//标题图片
+.y-tab__image {
+	width: 20px;
+	height: 20px;
+}
+
+// 右上角信息区域
+.y-tab__info {
+	display: inline-flex;
+	position: relative;
+
+	&--dot,
+	&--badge {
+		display: inline-block;
+		position: absolute;
+		top: 0;
+		left: 0;
+		box-sizing: border-box;
+		background-color: #e53935;
+		transform-origin: 100%;
+	}
+
+	// 小红点
+	&--dot {
+		width: 6px;
+		height: 6px;
+		border-radius: 100%;
+		transform: translate(0%, -180%);
+	}
+
+	// 徽标
+	&--badge {
+		line-height: 13px;
+		min-width: 18px;
+		border-radius: 18px;
+		padding: 0 2px;
+		transform: translate(0%, -120%);
+		font-size: 18rpx;
+		font-weight: 500;
+		text-align: center;
+		color: #fff;
+	}
+}
+
+// 底部条滑块
+.y-tabs__bar {
+	position: absolute;
+	display: inline-flex;
+	left: 0;
+	z-index: 1;
+
+	width: 20px;
+	height: 3px;
+	border-radius: 3px;
+	background-color: #0022ab;
+
+	// line风格的滑块
+	&.is-line {
+		z-index: 2; //z-index与y-tab一样,避免被遮挡
+
+		// 标签水平展示时
+		&:not(.is-vertical) {
+			bottom: 3px;
+			width: 20px;
+			height: 3px;
+			border-radius: 3px;
+		}
+
+		// 标签垂直展示时
+		&.is-vertical {
+			top: 0;
+			left: 3px;
+			width: 3px;
+			height: 20px;
+			border-radius: 3px;
+		}
+	}
+
+	// button、line-button风格的滑块
+	&.is-button,
+	&.is-line-button {
+		// top: 0;
+		justify-content: center;
+		align-items: center;
+		border-radius: 26px;
+
+		// 标签水平展示时
+		&:not(.is-vertical) {
+			height: calc(100% - 8px);
+			bottom: 4px;
+		}
+
+		// 标签垂直展示时
+		&.is-vertical {
+			width: calc(100% - 8px);
+			height: calc(100% - 8px);
+		}
+	}
+
+	// 线性按钮风格的滑块
+	&.is-line-button {
+		background-color: transparent;
+		border: 2rpx solid transparent;
+	}
+}
+
+// 标签内容
+.y-tabs__content {
+	display: block;
+	position: relative;
+	overflow: hidden; //会导致uni-data-select无法撑开显示下拉选项,最好给pane中的内容设置一个高度(如果包裹select的父元素都没有设置relative，则不会裁剪absolute属性的元素)
+	// 标签栏垂直展示，内容减去标签栏默认宽度
+	&.is-vertical {
+		width: 100%;
+	}
+}
+// 标签内容的滑动轨道容器
+.y-tabs__track {
+	position: relative;
+	display: flex;
+	width: 100%;
+	will-change: left;
+
+	// 滚动导航模式下内容卡片垂直排列
+	&.is-scrollspy {
+		flex-direction: column;
+	}
+}
+
+// 标签内容卡片
+.y-tab__pane {
+	flex-shrink: 0;
+	box-sizing: border-box;
+	width: 100%;
+	height: 0;
+	position: relative;
+	flex-direction: row;
+	display: block;
+	visibility: visible;
+
+	// 选中时
+	&.is-active {
+		height: auto;
+	}
+	// 滚动导航
+	&.is-scrollspy {
+		height: auto;
+	}
+}
+.y-tab__pane--wrap {
+	position: relative;
+}
+// 区域滚动下的标签内容scroll-view
+.y-tabs__content-scrollview {
+	flex-direction: column;
+}
diff --git a/smart-app/src/uni_modules/y-tabs/components/js/const.js b/smart-app/src/uni_modules/y-tabs/components/js/const.js
new file mode 100644
index 00000000..854d8faf
--- /dev/null
+++ b/smart-app/src/uni_modules/y-tabs/components/js/const.js
@@ -0,0 +1,194 @@
+// styleIsolation：组件样式隔离方式，具体配置选项参见：微信小程序自定义组件的样式
+// 自定义组件 JSON 中的 styleIsolation 选项从基础库版本 2.10.1 开始支持。它支持以下取值：
+// isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
+// apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
+// shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）
+
+const options = {
+	styleIsolation: 'shared',
+	virtualHost: true // [微信小程序、支付宝小程序（默认值为 true）] 将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定
+	// 微信（可以使用virtualHost配置）/QQ/百度/字节跳动这四家小程序，自定义组件在渲染时会比App/H5端多一级节点，导致flex无效，是否考虑在组件上增加class控制
+}
+
+
+
+const emits = [
+	"input",
+	'update:modelValue', //　更新v-model绑定的变量
+	'click', //点击标签时触发 回调参数：name：标识符，title：标题
+	'change', //当前激活的标签改变时触发 回调参数：name：标识符，title：标题
+	'disabled', //点击被禁用的标签时触发 回调参数：name：标识符，title：标题
+	'rendered', //标签内容首次渲染时触发（仅在开启延迟渲染后触发） 回调参数：name：标识符，title：标题
+	'sticky-change', //吸顶时触发，仅在 sticky 模式下生效 回调参数：name：标识符，title：标题
+	'loaded', //组件内部初始化完成后调用 回调参数：{ isFixed: 是否吸顶 }
+	'slide-change', //内容页滑动时触发（仅barAnimateMode为linear、worm、worm-ease时有效） 回调参数：{ dx：滑动距离； rate：当前滑动长度占滑动区域的比例；targetIndex：目标下标；}
+	'slide-end' //内容页滑动结束时触发（仅barAnimateMode为linear、worm、worm-ease时有效） 回调参数：{ targetIndex：目标下标；}
+];
+
+const props = {
+	// v-model绑定属性，绑定当前选中标签的标识符（标签的下标）
+	value: {
+		type: [Number, String],
+		default: 0,
+	},
+	modelValue: {
+		type: [Number, String],
+		default: 0,
+	},
+	// 样式风格类型，可选值为 text、card、button、line-button
+	type: {
+		type: String,
+		default: "line",
+		validator(value) {
+			return ['line', 'text', 'card', 'button', 'line-button'].includes(value)
+		}
+	},
+	color: {
+		type: [String, null],
+		default: "#0022AB"
+	}, //标签主题色, 默认值为"#0022AB"
+	background: {
+		type: [String, null],
+		// default: "#fff"
+	}, //标签栏背景色,默认值为"#fff"
+	// 标签栏样式
+	wrapStyle: {
+		type: [Object, null],
+		default: () => {}
+	},
+	// 标签栏的展示方位,可选值：vertical。
+	direction: {
+		type: String,
+		default: "horizontal",
+		validator(value) {
+			return ['horizontal', 'vertical'].includes(value)
+		}
+	},
+	titleActiveColor: String, //标题选中态颜色
+	titleInactiveColor: String, //标题默认态颜色
+	// 是否开启左侧收缩布局,开启后，所有的标签会向左侧收缩对齐。
+	shrink: {
+		type: Boolean,
+		default: false
+	},
+
+	// 动画时间，单位秒，默认为0.3s。仅支持type为line、button、line-button的滑块切换动画，切换标签内容时的转场动画、滚动导航下的内容定位动画。
+	duration: {
+		type: [Number, String],
+		default: 0.2,
+	},
+	// 滑块宽度，默认单位为px, 支持数字、rpx、vh、vw等单位及calc() 函数。 仅支持type为line、button、line-button。
+	// 标签栏水平/垂直展示时,type为line,宽度默认为20px/3px, 而type为button、line-button时,宽度默认为选中标签宽度-8px。 
+	barWidth: [Number, String], //inherit：继承tab的宽高
+	// 滑块高度，默认单位为px, 支持数字、rpx、vh、vw等单位及calc() 函数。 仅支持type为line、button、line-button。
+	// 标签栏水平/垂直展示时,type为line,高度默认为3px/20px, 而type为button、line-button时,宽度默认为选中标签高度-8px。 
+	barHeight: [Number, String],
+	//滑块样式，仅支持type为line、button、line-button。
+	barStyle: Object,
+	// 滑动切换tab内容时滑块的动画模式，默认值为line，即切换tab时滑块宽度保持不变，线性运动。可选值为worm(毛毛虫效果)、worm-ease(毛毛虫缓动)、none(不设置)。
+	// 可结合swiper组件使用，滑动效果更好。
+	// 仅支持type为line。
+	barAnimateMode: {
+		type: String,
+		default: "linear",
+		validator(value) {
+			return ['none', 'linear', 'worm', 'worm-ease'].includes(value);
+		}
+	},
+	// 标签宽高是否动态变化
+	// 表示标签切换了选中状态后宽高是否有变化，有则需要开启该属性，否则会导致滑块错位
+	isDynamic: {
+		type: Boolean,
+		default: false,
+	},
+	// 是否省略过长的标题文字。标签栏水平展示时，如果标签数量未超过滚动阈值则生效，垂直展示不限制。
+	ellipsis: {
+		type: Boolean,
+		default: true,
+	},
+	// 滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动
+	scrollThreshold: {
+		type: [Number, String],
+		default: 5
+	},
+	// 标签栏滚动时当前标签居中
+	scrollToCenter: {
+		type: Boolean,
+		default: true,
+	},
+	// 切换标签前的回调函数，返回 false 可阻止切换，支持返回 Promise
+	beforeChange: Function,
+	// 是否开启延迟渲染（首次切换到标签时才触发内容渲染）
+	isLazyRender: Boolean,
+	// 是否开启切换动画
+	// 用于标签栏滚动动画、切换标签内容时的转场动画、滚动导航下的内容定位动画
+	animated: {
+		type: Boolean,
+		default: true
+	},
+	// 在滚动导航模式下，滚动到最后一个标签内容但其顶部未超过可视区域时，是否激活对应的标签项
+	activeLast: {
+		type: Boolean,
+		default: false,
+	},
+	// ---------------------------------- 用于内容区域左右滑动的配置 ----------------------------------------
+	// 是否开启手势滑动切换
+	swipeable: {
+		type: Boolean,
+		default: false,
+	},
+	// 是否开启标签内容滑动时的拖动动画
+	// swipeable为true时有效，建议设置is-lazy-render=false。（该属性开启时考虑给包裹内容的容器增加一个min-height，因为其他未显示的标签内容会沿用当前显示的高度，拖动切换后由于高度不一致会有回弹）
+	swipeAnimated: {
+		type: Boolean,
+		default: true,
+	},
+	// 滑动切换的滑动距离阈值，单位为px；表示开启手势滑动时，横向滑动多少px切换标签内容（快速滑动时不受限制）
+	swipeThreshold: {
+		type: [Number, String],
+		default: 120,
+	},
+	// ---------------------------------- 用于滚动吸顶的配置 ----------------------------------------
+	// 是否使用粘性定位布局进行滚动吸顶
+	sticky: Boolean,
+	// 粘性布局下与顶部的最小距离，单位为px
+	offsetTop: {
+		type: Number,
+		default: 0
+	},
+	// 粘性布局下标签栏的z-index值
+	zIndex: {
+		type: Number,
+		default: 99
+	},
+	// 粘性布局的判断阈值：表示在页面滚动过程中,标签栏距屏幕顶部多少px时，触发吸顶函数进行吸顶判断
+	stickyThreshold: {
+		type: Number,
+		default: 0
+	},
+	// 页面滚动过程中,标题栏背景色是否透明渐变
+	// background属性值必须为rgba格式
+	transparent: {
+		type: Boolean,
+		default: false
+	},
+	// 标题栏背景色透明渐变的滚动距离
+	transparentOffset: {
+		type: Number,
+		default: 100
+	},
+	// 是否开启滚动导航；该模式下，内容将会平铺展示
+	// 如果标签栏垂直展示，且内容平铺展示，就为侧边栏模式
+	scrollspy: Boolean,
+	// 滚动导航模式下，内容区域是否跟随页面滚动
+	// 为true时，整体区域跟随页面而滚动，为false时，内容区域是放在scroll-view中实现的局部滚动
+	pageScroll: {
+		type: Boolean,
+		default: true
+	},
+}
+export {
+	options,
+	emits,
+	props,
+}
\ No newline at end of file
diff --git a/smart-app/src/uni_modules/y-tabs/components/js/touchMixin.js b/smart-app/src/uni_modules/y-tabs/components/js/touchMixin.js
new file mode 100644
index 00000000..997972a8
--- /dev/null
+++ b/smart-app/src/uni_modules/y-tabs/components/js/touchMixin.js
@@ -0,0 +1,75 @@
+import { getDirection, now } from "./uitls"
+
+export const touchMixin = {
+	data() {
+		return {
+			direction: '', //滑动方向
+			startX: '', //开始滑动的x坐标
+			startY: '', //开始滑动的y坐标
+			nextIndex: -1, //下一个切换的标签下标
+			moved: false, //是否为一次水平滑动
+			startTimestamp: 0,
+		};
+	},
+	methods: {
+		touchStart(event) {
+			if (!this.parent.swipeable) return;
+			this.resetTouchStatus();
+			this.startX = event.touches[0].clientX;
+			this.startY = event.touches[0].clientY;
+			this.startTimestamp = now();
+		},
+		touchMove(event) {
+			if (!this.parent.swipeable) return;
+			const touch = event.touches[0];
+			this.deltaX = touch.clientX < 0 ? 0 : this.startX - touch.clientX;
+			this.deltaY = this.startY - touch.clientY;
+			const offsetX = Math.abs(this.deltaX);
+			const offsetY = Math.abs(this.deltaY);
+			// 当距离大于某个值时锁定方向
+			if (!this.direction || (offsetX < 10 && offsetY < 10)) this.direction = getDirection(offsetX, offsetY);
+
+			if (this.direction === "horizontal") { //水平滑动
+				const { dataLen, contentWidth, currentIndex, tabs, swipeAnimated } = this.parent;
+				const isRight = this.deltaX < 0; //判断是否向右滑动
+
+				// 如果为第一页，则不允许向右滑；为最后一页，则不允许左滑
+				if ((isRight && currentIndex === 0) || (!isRight && currentIndex === dataLen - 1)) return;
+
+				this.nextIndex = currentIndex + (isRight ? -1 : 1); //下一个标签
+				if (tabs[this.nextIndex]?.disabled) return; //禁用的标签不允许滑动
+
+				this.moved = true; //标记为一次水平滑动
+
+				// 改变标签内容滑动轨道样式，模拟拖动动画效果
+				if (swipeAnimated) {
+					const offsetWidth = contentWidth * currentIndex * -1 + offsetX * (isRight ? 1 : -1);
+					this.parent.changeTrackStyle(true, 0, offsetWidth);
+					this.parent.setDx(this.deltaX, false);
+				}
+			}
+		},
+		touchEnd() {
+			if (this.moved) {
+				// 何时可切换标签,当横向滑动距离大于设定阈值，或快速滑动(300ms内)切滑动距离大于18px时
+				const deltaTime = now() - this.startTimestamp;
+				const distance = Math.abs(this.deltaX);
+				const speed = (distance / deltaTime).toFixed(4);
+				const isChange = speed > 0.25 || distance >= this.parent.swipeThreshold;//是否切换
+				const currIndex = this.parent.currentIndex; //当前选中下标
+				const targetIndex = isChange ? this.nextIndex : currIndex; //目标标签的下标
+				this.parent.touchEndForPane(this.deltaX, currIndex, targetIndex, isChange);
+
+			}
+		},
+		// 重置触摸状态
+		resetTouchStatus() {
+			this.direction = '';
+			this.deltaX = 0;
+			this.deltaY = 0;
+			this.nextIndex = -1;
+			this.moved = false;
+			this.startTimestamp = 0;
+		},
+	}
+}
\ No newline at end of file
diff --git a/smart-app/src/uni_modules/y-tabs/components/js/uitls.js b/smart-app/src/uni_modules/y-tabs/components/js/uitls.js
new file mode 100644
index 00000000..ee840896
--- /dev/null
+++ b/smart-app/src/uni_modules/y-tabs/components/js/uitls.js
@@ -0,0 +1,177 @@
+/**
+ * 判断传入的值是否为空
+ * @param {*} val 
+ * @returns 
+ */
+export function isNull(val) {
+	if (typeof val == "boolean") {
+		return false;
+	}
+	if (typeof val == "number") {
+		return false;
+	}
+	if (val instanceof Array) {
+		if (val.length == 0) return true;
+	} else if (val instanceof Object) {
+		if (JSON.stringify(val) === "{}") return true;
+	} else {
+		if (
+			val == "null" ||
+			val == null ||
+			val == "undefined" ||
+			val == undefined ||
+			val == ""
+		)
+			return true;
+		return false;
+	}
+	return false;
+}
+
+// 不为空
+export function isDef(val) {
+	return val !== undefined && val !== null;
+}
+
+// 是否是一个数字
+export function isNumeric(val) {
+	return /^\d+(\.\d+)?$/.test(val);
+}
+
+// 是一个对象
+export function isObject(val) {
+	return val !== null && typeof val === 'object';
+}
+// 是一个字符串
+export function isString(val) {
+	return Object.prototype.toString.call(val) === "[object String]"
+}
+
+// 空操作
+export function noop() {}
+
+// 是一个函数
+export function isFunction(val) {
+	return typeof val === 'function';
+}
+
+// 是一个promise对象
+export function isPromise(val) {
+	return isObject(val) && isFunction(val.then) && isFunction(val.catch);
+}
+
+
+
+// 添加单位
+export function addUnit(value) {
+	if (!isDef(value)) {
+		return undefined;
+	}
+
+	value = String(value);
+	return isNumeric(value) ? `${value}px` : value;
+}
+
+// 调用拦截器
+export function callInterceptor(options) {
+	const {
+		interceptor,
+		args,
+		done
+	} = options;
+
+	if (interceptor) {
+		const returnVal = interceptor(...args);
+		if (isPromise(returnVal)) {
+			returnVal.then((value) => {
+				if (value) done();
+			}).catch(noop);
+		} else if (returnVal) {
+			done();
+		}
+	} else {
+		done();
+	}
+}
+
+const rgbaRegex = /^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d*(?:\.\d+)?)\)$/;
+export const getColor = function(colorStr) {
+	const matches = colorStr.match(rgbaRegex);
+	if (matches && matches.length === 5) {
+		return [
+			matches[1],
+			matches[2],
+			matches[3],
+			matches[4]
+		];
+	}
+	return [];
+};
+
+export function toClass(classObj, ...classArray) {
+	const arr = Object.keys(classObj || {}).filter(key => classObj[key])
+	arr.push(...classArray)
+	return arr.join(" ")
+}
+
+
+// 判断是水平滑动还是垂直滑动
+export function getDirection(x, y) {
+	if (x > y) return 'horizontal';
+	if (y > x) return 'vertical';
+	return '';
+}
+
+
+
+// 缓动函数
+function easingFunction(time, duration, type = "linear") {
+	let pos = time / duration;
+	let value = 0;
+	switch (type) {
+		case "easeOutCubic":
+			value = (Math.pow((pos - 1), 3) + 1)
+			break;
+		case "easeInOutCubic":
+			if ((pos /= 0.5) < 1) value = 0.5 * Math.pow(pos, 3);
+			else value = 0.5 * (Math.pow((pos - 2), 3) + 2);
+			break;
+		default: //linear
+			value = pos;
+			break;
+	}
+	return value;
+}
+
+/**
+ * 进度函数
+ * @param {Object} time 当前已经运动的时间
+ * @param {Object} begin 距离的初始值
+ * @param {Object} end 距离的结束值
+ * @param {Object} duration 运动时长
+ */
+export function progress(time, begin, end, duration, type) {
+	return begin + (end - begin) * easingFunction(time, duration, type);
+}
+
+
+let uid = 0;
+export function getUid() {
+	return uid++
+}
+
+
+const hasOwnProperty = Object.prototype.hasOwnProperty
+/**
+ * 检查对象是否具有该属性
+ * @param {*} obj 对象
+ * @param {*} key 对象属性名
+ * @returns 
+ */
+export function hasOwn(obj, key) {
+	return hasOwnProperty.call(obj, key)
+}
+
+export const now = Date.now || function() {
+	return +new Date();
+};
\ No newline at end of file
diff --git a/smart-app/src/uni_modules/y-tabs/components/js/utilMixin.js b/smart-app/src/uni_modules/y-tabs/components/js/utilMixin.js
new file mode 100644
index 00000000..8654bea0
--- /dev/null
+++ b/smart-app/src/uni_modules/y-tabs/components/js/utilMixin.js
@@ -0,0 +1,8 @@
+
+export const utilMixin = function() {
+	return {
+		methods: {
+			 
+		},
+	}
+}
\ No newline at end of file
diff --git a/smart-app/src/uni_modules/y-tabs/components/y-tab/y-tab.vue b/smart-app/src/uni_modules/y-tabs/components/y-tab/y-tab.vue
new file mode 100644
index 00000000..5a6a82af
--- /dev/null
+++ b/smart-app/src/uni_modules/y-tabs/components/y-tab/y-tab.vue
@@ -0,0 +1,238 @@
+<template>
+  <view
+    class="y-tab__pane"
+    :data-index="index"
+    :class="[uniquePaneClass, paneClass]"
+    :style="[paneStyle]"
+    @touchstart="touchStart"
+    @touchmove="touchMove"
+    @touchend="touchEnd"
+  >
+    <!-- 渲染过的则不再渲染，未渲染的根据激活状态进行渲染 -->
+    <view class="y-tab__pane--wrap" v-if="rendered ? true : active">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  import { isNull, toClass, getUid } from '../js/uitls';
+  import { touchMixin } from '../js/touchMixin';
+  import { options } from '../js/const';
+
+  export default {
+    name: 'yTab',
+    mixins: [touchMixin],
+    options,
+    props: {
+      title: String, // 标题
+      disabled: Boolean, // 是否禁用标签
+      dot: Boolean, // 是否在标题右上角显示小红点
+      badge: {
+        type: [Number, String],
+        default: '',
+      }, // 图标右上角徽标的内容
+      // 徽标数最大数字限制,超过这个数字将变成badgeMaxCount+,如果传空字符串则不设置
+      badgeMaxCount: {
+        type: [Number, String],
+        default: 99,
+      },
+      name: [Number, String], // 标签名称，作为匹配的标识符
+      titleStyle: Object, //	自定义标题样式
+      titleClass: String, //	自定义标题类名
+      iconType: String, //图标图案，为uniapp扩展组件（uni-ui）下的uni-icons的type值，customPrefix用法等同
+      iconSize: {
+        type: [Number, String],
+        default: 16,
+      }, //图标大小
+      customPrefix: String, //自定义图标
+      imageSrc: String, //图片路径
+      imageMode: {
+        type: String,
+        default: 'scaleToFill',
+        validator(value) {
+          return [
+            'scaleToFill',
+            'aspectFit',
+            'aspectFill',
+            'widthFix',
+            'heightFix',
+            'top',
+            'bottom',
+            'center',
+            'left',
+            'right',
+            'top left',
+            'top right',
+            'bottom left',
+            'bottom right',
+          ].includes(value);
+        },
+      }, //图片裁剪、缩放的模式，为uniapp内置组件->媒体组件—>image下的mode值
+      position: {
+        type: String,
+        default: 'right',
+        validator(value) {
+          return ['top', 'bottom', 'left', 'right'].includes(value);
+        },
+      }, //如果存在图片或图标，标题围绕它们的位置
+    },
+    data() {
+      return {
+        isUnmounted: false,
+        index: -1, //内容卡片对应的下标
+        parent: null, //父元素实例
+        active: false, //是否为激活状态
+        rendered: false, //是否渲染过
+        swipeable: false, //是否开启手势滑动切换
+        paneStyle: null, //内容样式
+        scrollspy: false, //是否为滚动导航模式
+        paneObserver: null, //pane交叉观察器
+        isDisjoint: false, //当前pane是否与参照节点布局区域相离
+        isActiveLast: false, // 最后一个pane在滚动导航模式下是否激活对应的标签项
+      };
+    },
+    computed: {
+      computedName() {
+        return !isNull(this.name) ? this.name : this.index;
+      },
+      unqieKey() {
+        return getUid();
+      },
+      // 保证唯一的样式
+      uniquePaneClass() {
+        return 'y-tab__pane' + this.unqieKey;
+      },
+      // 内容class
+      paneClass() {
+        return toClass({ 'is-active': this.active, 'is-scrollspy': this.scrollspy });
+      },
+    },
+    watch: {
+      $props: {
+        deep: true,
+        // immediate: true,
+        handler(newValue, oldValue) {
+          // 更新tab
+          if (this.parent) {
+            this.parent.updateTab({
+              newValue: { ...newValue, badge: this.formatBadge() },
+              oldValue: oldValue && { ...oldValue },
+              index: this.index,
+            });
+          }
+        },
+      },
+    },
+    created() {
+      this.parent = this.getParent();
+      if (this.parent) {
+        this.parent.children.push(this);
+        this.parent.putTab({ newValue: { ...this.$props, key: this.unqieKey, badge: this.formatBadge() } });
+        this.scrollspy = this.parent.scrollspy;
+        this.rendered = !this.parent.isLazyRender || this.parent.scrollspy; //标记是否渲染过，非懒加载与滚动导航模式下默认渲染
+      }
+    },
+    // #ifndef VUE3
+    destroyed() {
+      if (this.isUnmounted) return;
+      this.unInit();
+    },
+    // #endif
+    // #ifdef VUE3
+    unmounted() {
+      this.isUnmounted = true;
+      this.unInit();
+    },
+    // #endif
+    methods: {
+      // 徽标格式化
+      formatBadge() {
+        if (!isNull(this.badge) && !isNull(this.badgeMaxCount) && this.badge > this.badgeMaxCount) {
+          return this.badgeMaxCount + '+';
+        } else {
+          return this.badge;
+        }
+      },
+      // 获取查询节点信息的对象
+      getSelectorQuery() {
+        let query = null;
+        // #ifdef MP-ALIPAY
+        query = uni.createSelectorQuery();
+        // #endif
+        // #ifndef MP-ALIPAY
+        query = uni.createSelectorQuery().in(this);
+        // #endif
+        return query;
+      },
+      // 获取元素位置信息
+      getRect(selector) {
+        return new Promise((resolve, reject) => {
+          selector = `.${this.uniquePaneClass}` + (!isNull(selector) ? ' ' + selector : '');
+          this.getSelectorQuery()
+            .select(selector)
+            .boundingClientRect()
+            .exec((rect) => {
+              resolve(rect[0] || {});
+            });
+        });
+      },
+      // 卸载组件的处理
+      unInit() {
+        this.disconnectObserver(); //销毁观察器
+        if (this.parent) {
+          const index = this.parent.children.findIndex((item) => item === this);
+          this.parent.children.splice(index, 1);
+          this.parent.tabs.splice(index, 1);
+          this.parent.tabRects.splice(index, 1);
+        }
+      },
+      //获取父元素实例
+      getParent(name = 'yTabs') {
+        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;
+      },
+      // 断掉观察，释放资源
+      disconnectObserver() {
+        this.paneObserver && this.paneObserver?.disconnect();
+      },
+      // 观察 - 标签内容滚动时定位标签项
+      async observePane(top) {
+        this.disconnectObserver();
+        const paneObserver = uni.createIntersectionObserver(this, { thresholds: [0, 0.01, 0.99, 1] });
+
+        // 注意：如果y-tabs使用的区域滚动，整个页面的布局跟随页面滚动，当pane跟随页面移动了之后，
+        //      那么y-tabs__content的top就会变化，导致交互区域位置不准确，可以在onPageScroll使用定时器实现滚动结束的处理重新resize一下组件创建pane的监听
+        // 如果pane内容超过页面的可视区域，最好舍弃这种交互布局，uniapp未实现Android的嵌套滑动机制，页面滑动到底后无法将事件分发给scroll-view，使scroll-view继承滑动
+
+        paneObserver.relativeToViewport({ top: -top }); // 到屏幕顶部的高度时触发
+        // 不能观察根节点 unk-vendors.js:14596 [system] Node .y-tab__pane9 is not found. Intersection observer will not trigger.
+        paneObserver.observe(`.${this.uniquePaneClass} .y-tab__pane--wrap`, (res) => {
+          // console.log('res:', this.title, res);
+          if (!this.isActiveLast) {
+            // 如果目标节点布局区域的top小于参照节点的top,则说明目标节点在参照节点布局区域之上，intersectionRatio不大于0则说明两者不相交
+            this.isDisjoint = res.intersectionRatio <= 0 && res.boundingClientRect.top < res.relativeRect.top;
+          } else {
+            // 滚动导航模式下，最后一个pane完成显示但未超出可视范围顶部时，是否设置相离而激活最后一个标签项
+            this.isDisjoint = res.intersectionRatio > 0 && res.boundingClientRect.bottom <= res.relativeRect.bottom;
+          }
+
+          // 保证组件初始化完成时执行，避免创建时触发一次监听器的回调函数，导致执行顺序先于tabs的init方法，使底部条错位:
+          // 标签栏点击时触发的滚动不允许设置激活下标
+          if (this.parent.isLoaded && !this.parent.lockedScrollspy) this.parent.setActivedIndexToScroll();
+        });
+        this.paneObserver = paneObserver;
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import '../css/index';
+</style>
diff --git a/smart-app/src/uni_modules/y-tabs/components/y-tabs/y-tabs.vue b/smart-app/src/uni_modules/y-tabs/components/y-tabs/y-tabs.vue
new file mode 100644
index 00000000..121f9731
--- /dev/null
+++ b/smart-app/src/uni_modules/y-tabs/components/y-tabs/y-tabs.vue
@@ -0,0 +1,1363 @@
+<template>
+  <view class="y-tabs" :class="[uniqueTabsClass, tabsClass]">
+    <view class="y-tabs__depend--offset" :style="[dependOffsetStyle]" />
+    <!-- 依赖元素，用于处理滚动吸顶所需 -->
+    <view class="y-tabs__depend" :style="[dependStyle]" />
+    <!-- 依赖元素,用于模拟透明标签栏渐变所需 -->
+    <view v-if="transparent" class="y-tabs__depend--transparent" :style="[dependTranStyle]" />
+
+    <!-- 标签栏区域 -->
+    <!-- touchmove.prevent阻止触摸移动事件 -->
+    <view class="y-tabs__wrap" :style="[innerWrapStyle, wrapStyle]" :class="[wrapClass]" @touchmove.prevent>
+      <!-- 标签栏左侧插槽 -->
+      <view class="y-tabs__nav-left">
+        <slot name="nav-left" />
+      </view>
+
+      <!-- 
+				@touchmove.stop.prevent="() => {}"  写在scroll-view里是为了兼容电脑端，阻断上下拖拽动作，
+				手机端使用 overscroll-behavior-y: contain !important;就足够阻断滚动穿透了，@mousewheel.prevent阻止电脑端滚轮滚动穿透
+				小程序端: 侧边栏导航时,滑动内容区域,再触摸标签栏区域无法阻止滚动穿透导致页面滚动
+			-->
+
+      <!-- 标签栏 -->
+      <scroll-view
+        class="y-tabs__scroll"
+        :scroll-x="scrollX"
+        :scroll-y="scrollY"
+        :scroll-with-animation="scrollWithAnimation"
+        scroll-anchoring
+        enable-flex
+        :scroll-left="scrollLeft"
+        :scroll-top="scrollTop"
+        :style="[scrollStyle]"
+        @touchmove.stop="() => {}"
+        @scroll="handleScrollByNav"
+      >
+        <view class="y-tabs__nav" :class="[navClass]" :style="[navStyle]">
+          <!-- 标签项 -->
+          <view
+            class="y-tab"
+            v-for="(tab, index) in tabs"
+            :key="tab.key"
+            @tap.stop="onClick(index)"
+            :class="[tabClass(index, tab), tab.titleClass]"
+            :style="[tabStyle(index), tab.titleStyle]"
+          >
+            <!-- 标签 -->
+            <view class="y-tab__title" :class="[titleClass(tab)]">
+              <!-- 图标或图片 -->
+              <view class="y-tab__icons" v-if="tab.iconType || tab.imageSrc">
+                <uni-icons v-if="tab.iconType" :custom-prefix="tab.customPrefix" :type="tab.iconType" :size="Number(tab.iconSize)" />
+                <image class="y-tab__image" v-if="tab.imageSrc" :mode="tab.imageMode" :src="tab.imageSrc" />
+              </view>
+              <!-- 标签文本 -->
+              <view class="y-tab__text" :class="[textClass(tab)]">
+                <!-- 
+									统一改为具名的作用域插槽（暂时不做）:
+										1.避开vue3中小程序端循环生成动态插槽名的插槽时后备内容不显示
+										2.在小程序使用template会被编译成view,导致y-tab__text样式无效,标签栏未超过滚动数量时超出隐藏也同样失效,H5和APP不会
+										3.验证QQ/微信/支付宝/百度/飞书/快手；vue2中快手 、vue3中百度/飞书/快手小程序有异常；无法验证京东、字节、快应用
+										4.微信报： 
+											a.[Component] generic "wx-scoped-slots-title" is not instantiated. The default component is used instead.
+										    b.[Component] More than one slot named "title" are found inside a single component instance (in component "uni_modules/y-tabs/components/y-tabs/y-tabs"). The first one was accepted.
+								-->
+                <!-- 	<slot name="title" :index="index">
+									{{ tab.title }}
+								</slot> -->
+                <!-- <template #title="{index}">
+									自定义{{index}}
+								</template> -->
+
+                <!-- 快应用联盟不支持动态插槽名 -->
+                <!-- #ifndef VUE3 -->
+                <!-- <slot :name="tab.titleSlot">{{ tab.title }}</slot> -->
+                <!-- #ifndef QUICKAPP-WEBVIEW-UNION -->
+                <slot :name="tab.titleSlot">{{ tab.title }}</slot>
+                <!-- #endif -->
+                <!-- #ifdef QUICKAPP-WEBVIEW-UNION -->
+                {{ tab.title }}
+                <!-- #endif -->
+                <!-- #endif -->
+
+                <!-- vue3,小程序端循环生成动态插槽名插槽时后备内容不显示，只支持H5、APP -->
+                <!-- #ifdef VUE3 -->
+                <!-- #ifndef APP-PLUS || H5 -->
+                {{ tab.title }}
+                <!-- #endif -->
+                <!-- #ifdef APP-PLUS || H5 -->
+                <slot :name="tab.titleSlot">{{ tab.title }}</slot>
+                <!-- #endif -->
+                <!-- #endif -->
+              </view>
+            </view>
+            <!-- 标签右上角信息 -->
+            <view class="y-tab__info" v-if="tab.dot || tab.badge">
+              <!-- 提示小红点 -->
+              <text class="y-tab__info--dot" v-if="tab.dot" />
+              <!-- 徽标 -->
+              <text class="y-tab__info--badge" v-if="tab.badge">{{ tab.badge }}</text>
+            </view>
+          </view>
+          <!-- 滑块: 仅支持line、button、line-button -->
+          <!-- 滑块内容：可使用插槽自定义 -->
+          <view v-if="isSlideBlock" class="y-tabs__bar" :class="[barClass]" :style="[barAnimatedStyle, barInnerStyle, barStyle]">
+            <slot name="bar">
+              <!-- <view class="y-tabs__bar-inner" :style="[barInnerStyle,barStyle]" /> -->
+            </slot>
+          </view>
+        </view>
+      </scroll-view>
+
+      <!-- 标签栏右侧插槽 -->
+      <view class="y-tabs__nav-right">
+        <slot name="nav-right" />
+      </view>
+    </view>
+
+    <!-- 标签栏占位容器 -->
+    <view class="y-tabs__placeholder" :style="[placeholderStyle]" />
+
+    <!-- 标签内容 -->
+    <view class="y-tabs__content" :class="[contentClass]" @touchstart="touchstartByContent">
+      <view class="y-tabs__track" :class="[{ 'is-scrollspy': scrollspy }]" :style="[trackStyle]">
+        <!-- 滚动导航与侧边栏导航的内容区域：使用scroll-view实现区域滚动，否则就是页面级滚动 -->
+        <scroll-view
+          class="y-tabs__content-scrollview"
+          v-if="scrollspy && !pageScroll"
+          scroll-y
+          :scroll-with-animation="scrollWithAnimation"
+          :scroll-top="paneScrollTop"
+          scroll-anchoring
+          enable-flex
+        >
+          <slot />
+        </scroll-view>
+        <slot v-else></slot>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+  // 验证各端小程序是否兼容（京东、字节注册账号需要企业资质，快手使用ks+18位数字当测试的appid）
+  // 毛毛虫蠕动动效 ✔
+  // swpier组件切换内容 ✔
+  // 增加u-popup里嵌套的案例 ✔
+  // 鼠标滚轮滚动释放锁 ✔
+  // 滑动距离超过阈值时切换tab样式，类似于各大网站标签页切换时tab颜色、字体大小会变化、过渡 ✔
+  // 是否滑动切换的时候提供slide-change、slide-end事件，滑动过程中锁住scroll-view的上下滑动  ✔
+  // swipe-threshold兼容bar-animate-mode为worm、worm-ease ✔
+
+  // 提供slotTitle prop以供只渲染标签栏，而非内容区域，这样可以避开vue3下小程序端循环生成标签项的嵌套插槽无法自定义标签的问题（vue3下部分小程序对具名的作用域插槽支持度不好，暂不考虑）
+  // 用户反映select-picker被遮挡：下拉区域使用absolute，被内容的overflow所裁剪，除非select组件使用fixed定位
+
+  import { isNull, addUnit, isDef, isObject, callInterceptor, getColor, toClass, getUid, progress, noop } from '../js/uitls';
+  import { options, emits, props } from '../js/const';
+
+  export default {
+    name: 'yTabs',
+    options,
+    emits,
+    props,
+    data() {
+      return {
+        isUnmounted: false, //标记组件是否卸载
+        isLoaded: false, //标记组件内部是否已经初始化完成
+        initTimer: null,
+        currentIndex: null, //当前选中下标
+        lastIndex: null, //上一个选中的下标
+        children: [], // 存放子组件数组
+        tabs: [], //存放标签栏数据
+        tabRects: [], //存放标签节点信息等数据
+        reseted: true, //组件是否重置完成
+        shouldSetDx: true, //是否可以执行setDx函数
+
+        // 元素节点信息
+        wrapRect: {}, //标签栏
+        contentRect: {}, // 标签内容容器
+        barRect: {}, //滑块
+        dependOffsetRect: {}, //标签栏吸顶设置offset时的模拟元素
+        extraWidth: 0, //标签栏nav-left、nav-right插槽宽度
+        extraHeight: 0, //标签栏nav-left、nav-right插槽高度
+
+        // 标签栏的scroll-view相关
+        scrollLeft: 0, //设置横向滚动条位置
+        scrollTop: 0, //设置竖向滚动条位置
+        scrollViewRect: 0, //标签栏scroll-view的节点信息
+        scrollDetail: { scrollLeft: 0, scrollTop: 0 }, //标签栏scroll-view滚动时的详情信息
+
+        // 标签栏滑块动画相关
+        barOffset: 0, //滑块偏移量：水平展示为left值，垂直为top值
+        barAnimated: false, //是否开启滑块切换动画（首次不开启）
+        barCalcedWidth: undefined,
+        barCalcedHeight: undefined,
+        disabledSetLine: false, //是否允许标签切换时设置滑块位置
+
+        // 内容区域相关
+        paneScrollTop: 0, //设置内容区域scroll-view的竖向滚动条位置
+        trackStyle: null, //内容区域滑动轨道样式
+        lockedScrollspy: false, //锁定滚动导航模式下点击标签栏触发的pane交互观察器的回调执行
+
+        // 标签栏吸顶相关
+        dependObserver: null,
+        isFixed: false, //是否吸顶
+
+        // 标签栏渐变相关
+        tranObserver: null,
+        transparentBgColor: 'rgba(255,255,255,0)', //标签栏透明背景色
+        rgba: {
+          R: '',
+          G: '',
+          B: '',
+          A: '',
+        },
+      };
+    },
+    computed: {
+      // 传入的实际值
+      // #ifndef VUE3
+      realValue() {
+        return this.value;
+      },
+      // #endif
+      // #ifdef VUE3
+      realValue() {
+        return this.modelValue;
+      },
+      // #endif
+      // 标签栏是否垂直展示
+      isVertical() {
+        return this.direction === 'vertical';
+      },
+      // 标签栏垂直展示时允许垂直滚动
+      scrollY() {
+        return this.isVertical;
+      },
+      // 标签栏是否允许横向滚动
+      scrollX() {
+        return !this.isVertical && this.tabs.length > Number(this.scrollThreshold);
+      },
+      // 是否省略过长的标题文字
+      isEllipsis() {
+        // 标签水平展示时，如果ellipsis为true，且标签数量大于阈值，则超出隐藏
+        // 标签垂直展示时,ellipsis为true则超出隐藏
+        return (!this.scrollX || this.isVertical) && this.ellipsis;
+      },
+      // 是否为滚动导航
+      scrollNav() {
+        return this.scrollspy && !this.isVertical;
+      },
+      // 是否为侧边栏导航
+      sidebarNav() {
+        return this.scrollspy && this.isVertical;
+      },
+      // 样式风格为滑块
+      isLine() {
+        return this.type === 'line';
+      },
+      // 样式风格为胶囊，type为button、line-button
+      isPills() {
+        return ['button', 'line-button'].includes(this.type);
+      },
+      // 为滑块切换的样式风格,仅支持type为line、button、line-button的样式风格
+      isSlideBlock() {
+        // 用于滑块切换的样式风格，仅支持type为line、button、line-button
+        return this.isLine || this.isPills;
+      },
+      // 滑块切换模式为线性运动
+      isLineMode() {
+        return this.isLine && this.barAnimateMode === 'linear';
+      },
+      // 滑块切换模式为毛毛虫运动
+      isWormMode() {
+        return this.isLine && this.barAnimateMode.indexOf('worm') >= 0;
+      },
+      // 当前激活标签的name值
+      currentName() {
+        const activeTab = this.children[this.currentIndex];
+        return activeTab?.computedName || '';
+      },
+      // 标签数量
+      dataLen() {
+        return this.tabs.length;
+      },
+      // 滑动动画时长(ms)
+      msDuration() {
+        return this.animated ? Number(this.duration) * 1000 : 0;
+      },
+      // 在设置滚动条位置时使用动画过渡
+      // （scroll-view的过渡动画时长为300ms，不能设置，因此为300ms时使用scroll-view自身的过渡，否则模拟一组数据实现过渡,setInterval时间不准确，暂时不做）
+      scrollWithAnimation() {
+        return this.animated && this.reseted;
+      },
+      // 保证标签页唯一的样式
+      uniqueTabsClass() {
+        return 'y-tabs' + getUid();
+      },
+      // 标签页class
+      tabsClass() {
+        return toClass(
+          {
+            'is-fixed': this.isFixed,
+            'is-vertical': this.isVertical, //标签栏是否垂直
+            'is-scrollNav': this.scrollNav, //滚动导航
+            'is-sidebarNav': this.sidebarNav, //侧边栏导航
+            'is-areaScroll': !this.pageScroll, //pane是否为区域滚动
+          },
+          `y-tabs--${this.type}`
+        );
+      },
+      // 标签栏容器class
+      wrapClass() {
+        return toClass(
+          {
+            'is-fixed': this.isFixed,
+            'is-transparent': this.transparent,
+            'is-vertical': this.isVertical,
+          },
+          `is-${this.type}`
+        );
+      },
+      // 标签栏class
+      navClass() {
+        return toClass({ 'is-vertical': this.isVertical, 'is-shrink': this.shrink }, `is-${this.type}`);
+      },
+      // 滑块class
+      barClass() {
+        return toClass({ 'is-vertical': this.isVertical }, `is-${this.type}`);
+      },
+      // 内容卡片class
+      contentClass() {
+        return toClass({ 'is-scrollspy': this.scrollspy, 'is-vertical': this.isVertical });
+      },
+      // 标签栏容器样式
+      innerWrapStyle() {
+        // 透明标签栏使用transparentBgColor
+        const style = { background: !this.transparent ? this.background : this.transparentBgColor };
+        // 滚动吸顶
+        if (this.isFixed) style.top = this.offsetTop + 'px';
+        return style;
+      },
+      // 标签栏样式
+      navStyle() {
+        const style = {};
+        // 卡片样式添加边框颜色
+        if (this.type === 'card') style.borderColor = this.color;
+        return style;
+      },
+      // 标签栏吸顶的依赖元素样式
+      dependStyle() {
+        // stickyThreshold：是一个边界值，用于设置标签栏滚动到距屏幕顶部多少px时，触发吸顶函数进行吸顶判断
+        return { top: `-${this.stickyThreshold}px` };
+      },
+      // 模拟标签栏吸顶时设置offset的样式
+      dependOffsetStyle() {
+        return { top: `${this.offsetTop}px` };
+      },
+      dependTranStyle() {
+        return { height: `${this.transparentOffset}px` };
+      },
+      // 标签栏占位元素样式
+      placeholderStyle() {
+        if (!this.isFixed) return {};
+        if (!this.isVertical) return { height: this.scrollViewRect?.height + 'px' }; //标签栏水平展示时设置占位元素高度
+        else return { width: this.scrollViewRect?.width + 'px' }; //标签栏垂直展示时设置占位元素宽度
+      },
+      // 滑块透明度
+      lineOpacity() {
+        return !this.isSlideBlock || this.currentIndex === null ? 0 : 1;
+      },
+      // 滑块容器动画样式
+      barAnimatedStyle() {
+        const x = !this.isVertical ? `${this.barOffset}px` : 0;
+        const y = !this.isVertical ? 0 : `${this.barOffset}px`;
+        const style = {
+          opacity: this.lineOpacity,
+          transform: `translate3d(${x},${y},0)`,
+          transition: this.barAnimated ? `all ${this.duration}s linear` : 'none',
+        };
+        // 垂直时胶囊风格: 设置高度等于当前选中标签的高度
+        if (this.isPills && this.isVertical) style.height = addUnit(this.barCalcedHeight);
+        return style;
+      },
+      // 滑块内容样式
+      barInnerStyle() {
+        const style = {};
+        // 水平和垂直的处理
+        style.transition = this.barAnimated ? `all ${this.duration}s linear` : 'none';
+        const width = !isNull(this.barCalcedWidth) ? addUnit(this.barCalcedWidth) : null;
+        const height = !isNull(this.barHeight) ? addUnit(this.barHeight) : null;
+        if (width) style.width = width;
+        if (height) style.height = height;
+
+        // line:标签水平展示时,外边框圆角等于高度;垂直展示,外边框圆角等于宽度;
+        // button、line-button,外边框圆角等于高度;
+        switch (this.type) {
+          case 'line':
+            if (this.color) style.backgroundColor = this.color;
+            if (this.isVertical && width) style.borderRadius = width;
+            if (!this.isVertical && height) style.borderRadius = height;
+            break;
+          case 'button':
+            if (this.color) style.backgroundColor = this.color;
+            if (height) style.borderRadius = height;
+            break;
+          case 'line-button':
+            if (this.color) style.borderColor = this.color;
+            if (height) style.borderRadius = height;
+            break;
+        }
+        return style;
+      },
+      // 标签栏scroll-view样式
+      scrollStyle() {
+        // 标签水平展示,计算width,只需减去扩展插槽宽度
+        if (!this.isVertical) return { width: `calc(100% - ${this.extraWidth}px)` };
+        // 标签垂直展示,计算height,只需减去扩展插槽高度
+        return { height: `calc(100% - ${this.extraHeight}px)` };
+      },
+      // 标签水平展示时到中心点的宽度
+      tabCenterWidth() {
+        // 首次获取scrollViewRect时，宽度不正确（没有剔除扩展插槽，可能是由于渲染机制的问题）
+        // 因此这里作个比较,如果viewW小于wrapW，则使用viewW，否则wrapW-extraWidth
+        // 注意：不要给yui-tabs__scroll设置margin、padding，并设定插槽
+        const wrapW = this.wrapRect?.width;
+        const viewW = this.scrollViewRect?.width;
+        const width = viewW < wrapW ? viewW : wrapW - this.extraWidth;
+        return width / 2;
+      },
+      // 标签垂直展示时到中心点的高度
+      tabCenterHeight() {
+        const wrapH = this.wrapRect?.height;
+        const viewH = this.scrollViewRect?.height;
+        const height = viewH < wrapH ? viewH : wrapH - this.extraHeight;
+        return height / 2;
+      },
+      // 内容宽度
+      contentWidth() {
+        // 在快手小程序中不知道为什么会获取错误，这里使用标签栏宽度处理
+        let width = this.contentRect?.width || 0;
+        // #ifdef MP-KUAISHOU
+        width = this.wrapRect?.width || 0;
+        // #endif
+        return width;
+      },
+    },
+    watch: {
+      // 监听子组件数组长度变化，赋index值
+      'children.length'() {
+        const lastIndex = this.children.length - 1;
+        this.children.forEach((child, index) => {
+          child.index = index;
+          child.isActiveLast = this.activeLast ? lastIndex === index : false;
+          this.$set(this.tabs[index], 'index', index); //与pane引用绑定对应关系
+        });
+      },
+      // 监听选中标识符变化,用于绑定的v-model变化时激活对应的标签
+      realValue(value) {
+        // 必须保证初始化完成后才能更正活动选项卡的索引
+        if (this.isLoaded && value !== this.currentName) this.setCurrentIndexByName(value);
+      },
+      // 监听选中下标变化
+      currentIndex(newIdx, oldIdx) {
+        if (isNull(newIdx)) return;
+        this.lastIndex = oldIdx;
+
+        //滚动导航模式下，更新子组件是否相离参照区域
+        if (this.scrollspy) this.children.forEach((child, index) => (child.isDisjoint = index < newIdx));
+
+        // 需要$nextTick一下，否则导致新选中的标签节点信息获取有误
+        this.$nextTick(() => {
+          this.setLine(); //设置底部线条位置
+          this.changeStatus(newIdx, oldIdx); // 状态变更
+          this.changeStyle(); // 样式切换
+        });
+      },
+      // 监听背景色变化，重新获取rgba各值
+      background: {
+        immediate: true,
+        handler(value) {
+          if (this.transparent) {
+            const color = getColor(isNull(value) ? 'rgba(255,255,255,0)' : value);
+            if (color.length) {
+              const [R, G, B, A] = color;
+              this.rgba = { R, G, B, A: parseFloat(A) };
+            } else {
+              throw new Error('元素背景颜色必须为RGBA');
+            }
+          }
+        },
+      },
+      isFixed(val) {
+        // emit 吸顶变化事件
+        this.$emit('sticky-change', { isFixed: val });
+        this.updateTabsWrapRect(); //更新标签栏wrap的节点信息
+      },
+      // 更新滑块计算宽度
+      barWidth: {
+        handler(val) {
+          this.barCalcedWidth = val;
+        },
+        immediate: true,
+      },
+    },
+    // #ifndef VUE3
+    destroyed() {
+      if (this.isUnmounted) return;
+      this.unInit();
+    },
+    // #endif
+    // #ifdef VUE3
+    unmounted() {
+      this.isUnmounted = true;
+      this.unInit();
+    },
+    // #endif
+    // 组件创建了Observer监听，当切换页面时页面不一定会销毁， 因此tabs组件也没有销毁，就无法触发destroyed或unmounted钩子，导致unInit方法不会调用从而断开监听。
+    // 在页面隐藏后，组件仍然保持监听，会因为获取不到元素的节点信息而报错：Cannot read property 'bottom' of null
+    // 因此在组件失活后手动断开监听来解决这个报错
+    activated() {
+      this.createObserver();
+    },
+    deactivated() {
+      this.destroyObserver(); // 断开observer的监听
+    },
+    methods: {
+      // 卸载组件的处理
+      unInit() {
+        this.destroyObserver(); // 断开observer的监听
+      },
+      // @exposed-api 重置组件的一些状态
+      reset(callback) {
+        this.reseted = false;
+        this.barAnimated = false;
+        this.lockedScrollspy = true;
+        this.disabledSetLine = false;
+        this.shouldSetDx = true;
+        this.scrollLeft = 0;
+        this.scrollTop = 0;
+        this.scrollDetail = { scrollLeft: 0, scrollTop: 0 };
+        this.paneScrollTop = 0;
+        this.barCalcedWidth = this.barWidth;
+        this.$nextTick(() => {
+          this.reseted = true;
+          this.resize(callback);
+        });
+      },
+      // @exposed-api 外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘
+      resize(callback) {
+        this.init(async () => {
+          await this.setLine(); //修正滑块位置
+          callback && callback();
+        });
+      },
+      // @exposed-api 滚动到指定的标签页，在滚动导航模式下可用
+      scrollTo(name) {
+        this.$nextTick(() => {
+          this.setCurrentIndexByName(name);
+          this.scrollToCurrentContent(false);
+        });
+      },
+      // 添加tab
+      putTab({ newValue, oldValue }) {
+        this.tabs.push({
+          ...newValue,
+          titleSlot: 'title' + this.tabs.length, //标签插槽名，以"title"+下标命名,vue3只有H5、app支持自定义标签插槽
+          show: this.scrollspy, //是否显示内容（滚动导航模式默认显示）
+        });
+        this.$nextTick(() => {
+          this.initTimer && clearTimeout(this.initTimer);
+          this.initTimer = setTimeout(() => this.init(), 5); //初始化
+        });
+      },
+      // 更新tab
+      updateTab({ newValue, oldValue, index }) {
+        const tab = this.tabs[index];
+        Object.entries(newValue || {}).forEach((ele) => this.$set(tab, ele[0], ele[1]));
+      },
+      // 标签项class
+      tabClass(index, tab) {
+        return toClass(
+          {
+            'is-active': this.currentIndex === index,
+            'is-disabled': tab.disabled,
+            'is-animated': this.isSlideBlock,
+            'is-shrink': this.shrink,
+            'y-tabs__ellipsis': this.isEllipsis,
+            'y-tab__prev': index === this.currentIndex - 1, //与当前标签相邻的前面的标签
+            'y-tab__next': index === this.currentIndex + 1, //与当前标签相邻的后面的标签
+          },
+          `is-${this.type}`,
+          `y-tab_${index}`
+        );
+      },
+      // 标签区域class
+      titleClass(tab) {
+        return toClass({ 'y-tabs__ellipsis': this.isEllipsis }, `y-tab__title--${tab.position}`);
+      },
+      // 标签文字class
+      textClass(tab) {
+        return toClass({ 'y-tabs__ellipsis': this.isEllipsis }, `y-tab__text--${tab.position}`);
+      },
+      // 标签项style
+      tabStyle(index) {
+        const activated = this.currentIndex === index;
+        let { titleActiveColor: color, titleInactiveColor: defColor } = this;
+        let background = '';
+        let borderColor = '';
+
+        if (this.type === 'line') {
+          if (isNull(color)) color = '#323233';
+          if (isNull(defColor)) defColor = '#646566';
+        } else if (this.type === 'text') {
+          // type="text" 时，选中时使用主题色
+          if (isNull(color)) color = this.color;
+          if (isNull(defColor)) defColor = '#323233';
+        } else if (this.type === 'card') {
+          // type="card" 时，未选中则使用主题色
+          background = this.color;
+          if (isNull(color)) color = '#fff';
+          if (isNull(defColor)) defColor = this.color;
+        } else if (this.type === 'button') {
+          // 非滑块时设置背景色
+          // if (!this.isSlideBlock) background = this.color;
+          if (isNull(color)) color = '#fff';
+          if (isNull(defColor)) defColor = '#323233';
+        } else if (this.type === 'line-button') {
+          // 非滑块时设置边框颜色
+          // if (!this.isSlideBlock) borderColor = this.color;
+          if (isNull(color)) color = this.color;
+          if (isNull(defColor)) defColor = '#323233';
+        }
+
+        const style = {
+          color: activated ? color : defColor,
+          background: activated ? background : '',
+          borderColor: activated ? borderColor : '',
+        };
+        return style;
+      },
+      // 初始化操作
+      async init(callback) {
+        try {
+          this.wrapRect = await this.getRect('.y-tabs__wrap'); //标签栏包裹层节点信息（在小程序中，偶发性高度获取不正确）
+          this.scrollViewRect = await this.getRect('.y-tabs__scroll'); //标签栏scroll-view的节点信息
+          this.barRect = await this.getRect('.y-tabs__bar'); //滑块节点信息
+          this.contentRect = await this.getRect('.y-tabs__content'); //标签内容节点信息
+          this.dependOffsetRect = await this.getRect('.y-tabs__depend--offset'); //标签栏吸顶设置offset时的模拟元素
+          // nav-left、nav-right插槽宽度、高度,计算额外宽高
+          const r1 = await this.getRect('.y-tabs__nav-left');
+          const r2 = await this.getRect('.y-tabs__nav-right');
+          this.extraWidth = r1?.width + r2?.width;
+          this.extraHeight = r1?.height + r2?.height;
+
+          // 标签水平展示时，line风格滑块设置默认宽度
+          const barWidth = this.barRect?.width;
+          //barWidth大于0才设置:首次初始化时,因为v-show为false,width获取为0,会导致底部条的宽度一直是0
+          if (!this.isVertical && this.isLine && barWidth > 0) this.barCalcedWidth = barWidth;
+
+          await this.updateTabRect(true); //首次全量更新标签节点信息
+
+          await this.createObserver(); // 创建观察器
+
+          this.setCurrentIndexByName(this.realValue); //更正活动选项卡的索引
+
+          // 滚动到指定的pane (非第一个标签时内容滚动到指定位置可能会不准确，取决于pane中的内容何时渲染完)
+          if (this.currentIndex > 0) this.scrollToCurrentContent(true);
+          this.emitLoaded(); // emit loaded事件
+        } finally {
+          callback && callback();
+        }
+      },
+      // 触发组件内部初始化完成的事件"loaded"
+      emitLoaded() {
+        if (this.isLoaded) return;
+        this.$nextTick(() => {
+          this.isLoaded = true;
+          this.$emit('loaded');
+        });
+      },
+      // 创建观察器
+      async createObserver() {
+        await this.observeSticky();
+        await this.observerTransparent();
+        await this.observePane();
+      },
+      // 销毁观察器
+      destroyObserver() {
+        ['dependObserver', 'tranObserver'].forEach((name) => this.disconnectObserver(name));
+        this.children.forEach((child) => child.disconnectObserver());
+      },
+      // 断掉观察，释放资源
+      disconnectObserver(observerName) {
+        const observer = this[observerName];
+        observer && observer.disconnect();
+      },
+      // 观察 - 标签栏吸顶
+      async observeSticky() {
+        //  offsetTop（只在初始化时有效，不能动态变更），使用resize初始化一下可生效。
+        if (!this.sticky) return;
+        this.disconnectObserver('dependObserver'); // 先断掉之前的观察
+        // 检测的区间范围(在目标节点与参照节点在页面显示区域内相交或相离，且相交或相离程度达到目标节点布局区域的20%和50%时，触发回调函数)
+        const dependObserver = uni.createIntersectionObserver(this, {
+          thresholds: [0.01, 0.5, 1],
+        });
+        dependObserver.relativeToViewport({ top: -this.offsetTop }); // 到屏幕顶部的高度时触发
+        // 绑定观察的元素
+        dependObserver.observe(`.${this.uniqueTabsClass} .y-tabs__depend`, (res) => {
+          this.isFixed = res.intersectionRatio <= 0 && res.boundingClientRect.top <= this.offsetTop; // 判断是否达到吸顶条件范围
+        });
+        this.dependObserver = dependObserver;
+      },
+      // 观察 - 透明渐变标签栏
+      async observerTransparent() {
+        if (!this.transparent) return;
+
+        // 通过observer模拟出滚动效果，得到预设阈值触发时的相交高度从而计算出透明度
+        // 1.通过bottom将参照节点布局区域高度设置为 目标节点区域到屏幕顶部的高度
+        // 2.指定目标节点的高度为transparentOffset的值,页面滚动时目标节点与参照节点就有有一个最大为transparentOffset的相交高度
+        // 2.当目标节点进入参照节点时达到预设的阈值时调用回调函数获取相交比例
+        // 3.通过相交比例计算透明度
+
+        const screenHeight = uni.getSystemInfoSync().screenHeight;
+        const rect = await this.getRect('.y-tabs__depend--transparent');
+        const visibleHeight = screenHeight - rect.top; //可见高度
+        const length = 30; //预设阈值数量为30个
+        const increment = (1 / this.transparentOffset) * Math.floor(this.transparentOffset / length); //增量
+        const thresholds = Array.from({ length: length + 1 }, (_, i) => {
+          let value = (i * increment).toFixed(3);
+          //避免阈值范围超过0-1
+          if (value > 1) value = 1;
+          if (value < 0) value = 0;
+          return value;
+        });
+        this.disconnectObserver('tranObserver');
+        const tranObserver = uni.createIntersectionObserver(this, { thresholds });
+        tranObserver.relativeToViewport({ bottom: -visibleHeight });
+        tranObserver.observe('.y-tabs__depend--transparent', (res) => {
+          let opacity = res.boundingClientRect.top > res.relativeRect.top ? res.intersectionRatio + this.rgba.A : 1;
+          opacity = Math.min(Math.max(this.rgba.A, opacity), 1);
+          this.transparentBgColor = `rgba(${this.rgba.R},${this.rgba.G},${this.rgba.B},${opacity})`;
+        });
+        this.tranObserver = tranObserver;
+      },
+      // 观察 - 标签内容滚动时定位标签项
+      async observePane() {
+        if (!this.scrollspy) return; //非滚动导航时不创建观察器
+
+        // 页面级滚动：以offsetTop为参照区域top，如果是滚动导航，需加上标签栏高度
+        // 区域滚动：以pane的父容器的top为参照区域top
+        const top = this.pageScroll ? this.offsetTop + (this.scrollNav ? this.wrapRect?.height || 0 : 0) : this.contentRect?.top || 0;
+        this.children.forEach(async (child) => await child.observePane(top));
+      },
+      // 标签点击事件
+      onClick(index) {
+        const { title, disabled, computedName } = this.children[index];
+        if (disabled) {
+          this.$emit('disabled', computedName, title); //emit 禁用事件
+        } else {
+          this.$emit('click', computedName, title); // emit click事件:点击标签时触发
+          callInterceptor({
+            interceptor: this.beforeChange,
+            args: [computedName],
+            done: () => {
+              this.disabledSetLine = false;
+              this._lockDx(); //锁定dx
+              this.setCurrentIndex(index); //设置当前下标
+              setTimeout(() => this.scrollToCurrentContent(), 0); //滚动到当前标签内容
+            },
+          });
+        }
+      },
+      // 更正活动选项卡的索引
+      setCurrentIndexByName(name) {
+        const matched = this.children.find((child) => child.computedName === name);
+        const defaultIndex = this.children[0] ? this.children[0].index : 0;
+        this.setCurrentIndex(matched ? matched.index : defaultIndex);
+      },
+      // 设置当前下标
+      setCurrentIndex(currentIndex) {
+        const newIndex = this.findAvailableTab(currentIndex); //查询可用tab
+        if (!isDef(newIndex)) return;
+
+        const shouldEmit = newIndex !== this.currentIndex; //激活下标是否重复
+        const shouldEmitChange = this.currentIndex !== null;
+        const { title, computedName, rendered } = this.children[newIndex];
+
+        // 非scrollspy且是延迟渲染,emit rendered事件:标签内容首次渲染时触发（仅在开启延迟渲染后触发）
+        if (this.isLazyRender && !this.scrollspy && !rendered) this.$emit('rendered', computedName, title);
+        this.currentIndex = newIndex; //更改当前激活下标
+
+        //禁止重复切换
+        if (shouldEmit) {
+          // 更新v-model绑定的值
+          this.$emit('input', computedName);
+          this.$emit('update:modelValue', computedName);
+          if (shouldEmitChange) this.$emit('change', computedName, title); //emit change事件:当前激活的标签改变时触发
+        }
+      },
+      // 查询可用tab
+      findAvailableTab(index) {
+        const diff = index < this.currentIndex ? -1 : 1;
+        while (index >= 0 && index < this.tabs.length) {
+          if (!this.tabs[index]?.disabled) {
+            return index;
+          }
+          index += diff;
+        }
+      },
+      // 设置滑块位置
+      async setLine() {
+        // 标签宽高动态变化时需要更新tab的节点信息
+        if (this.isDynamic) await this.updateTabRect(false);
+        const rect = this.tabRects[this.currentIndex];
+        // 标签切换时设置滑块位置
+        if (this.isSlideBlock && !this.disabledSetLine) {
+          // 胶囊风格的滑块，需要设置滑块宽度(水平)与高度(垂直)等于当前标签的宽高
+          if (this.isPills) {
+            if (!this.isVertical) this.barCalcedWidth = rect?.width;
+            else this.barCalcedHeight = rect?.height;
+          }
+          this.barOffset = rect?.barOffset;
+          if (!this.barAnimated)
+            this.delayedFn(() => {
+              this.barAnimated = true;
+            }, 'barAnimatedTimer'); //开启滑块动画
+        }
+
+        // 延迟一下，避免在快速滑动时，设置scrollLeft或scrollTop不一定生效
+        // 可能是在设置滚动条位置时有动画过渡，scroll-view组件节流
+        this.delayedFn(() => this.scrollIntoView(), 'scrollIntoViewTimer'); //将激活的tab滚动到可见区域中
+      },
+      // 将激活的tab滚动到可见区域中
+      async scrollIntoView() {
+        if (!this.scrollX && !this.scrollY) return; // 不能水平滚动也不能垂直滚动时就阻止
+
+        // 由于标签栏滚动是scroll-view实现的，需要动画的话只能模拟一组在指定时间内进行连续偏移的数据
+        const rect = this.tabRects[this.currentIndex];
+        const duration = this.msDuration; // 标签栏滚动动画时间依赖于animated及duration
+        const fieldName = !this.isVertical ? 'scrollLeft' : 'scrollTop'; //设置标签栏scroll-view水平/垂直滚动偏移量的变量名
+        // 结束的滚动位置：如果标签需滚动至中心,取scrollOffset；否则标签水平展示取offsetLeft，垂直展示取offsetTop
+        let scrollOffset = this.scrollToCenter ? rect?.scrollOffset : rect?.[!this.isVertical ? 'offsetLeft' : 'offsetTop'];
+        if (scrollOffset < 0) scrollOffset = 0;
+        this[fieldName] = scrollOffset;
+      },
+      // 滚动到当前标签内容
+      async scrollToCurrentContent(immediate = false) {
+        // 只有滚动导航模式才能定位pane
+        if (!this.scrollspy) return;
+        this.lockedScrollspy = true; //滚动锁
+        //获取滚动距离
+        let { scrollTop = 0 } = await this.getScrollViewRect();
+
+        // 获取当前pane上边距与页面顶部的距离
+        let { top = 0 } = await this.children[this.currentIndex].getRect();
+
+        if (this.pageScroll) {
+          // 页面滚动，滚动导航模式下设置了吸顶，需要减去标签栏高度及标签栏距离屏幕顶部的高度
+          if (this.scrollNav && this.sticky) {
+            top -= this.dependOffsetRect?.top || 0;
+            top -= this.wrapRect?.height || 0;
+          }
+        } else {
+          // 区域滚动,减去内容区域距离页面顶部的高度
+          const rect = await this.getRect('.y-tabs__content'); //实时获取top
+          top -= rect?.top || 0;
+        }
+
+        // 实际的滚动距离 = 滚动距离 + 计算得到的pane距滚动区域顶部的真实距离
+        scrollTop += top;
+
+        // 页面滚动使用自己设定的动画时长，区域滚动时使用scroll-view设置的动画效果,大概300ms
+        if (this.pageScroll) uni.pageScrollTo({ scrollTop, duration: immediate ? 0 : this.msDuration });
+        else this.paneScrollTop = scrollTop;
+
+        this.unLockedPane(scrollTop); // 释放pane滚动锁
+      },
+      // 标签栏scroll-view滚动时触发
+      handleScrollByNav(e) {
+        this.scrollDetail = e?.detail;
+      },
+      // 内容区域触摸开始事件,释放滚动锁，解除pane区域滚动时对tab标签进行定位时的锁定
+      touchstartByContent() {
+        this.lockedScrollspy = false;
+      },
+      // 释放pane滚动锁
+      async unLockedPane(scrollTop) {
+        // 通过定时器查询当前页面滚动的距离，来判断页面或者scroll-view是否滚动结束
+        // 滚动结束时，释放滚动锁，避免使用鼠标滚轮滚动因锁无法定位到tab标签
+        await this.$nextTick(noop); //fixed：传一个空函数进去，部分用户使用了uView库，该库对$nextTick进行了重写但是未判空，因此需要一个空函数
+        const ms = (this.pageScroll ? this.msDuration : 300) + 50;
+        this.intervalFn(
+          async (clear) => {
+            const rect = await this.getScrollViewRect();
+            if (rect.scrollTop >= scrollTop - 5 && rect.scrollTop <= scrollTop + 5) {
+              this.touchstartByContent();
+              clear();
+            }
+          },
+          'paneLockedTimer',
+          ms
+        );
+      },
+      // 设置内容区域滚动时激活的下标
+      setActivedIndexToScroll() {
+        // 取最后一个相离的pane的下一个兄弟pane,则为当前激活的pane,如果没找到,则默认为第一个
+        const childs = this.children.filter((o) => o.isDisjoint);
+        let index = 0;
+        if (childs.length > 0) {
+          const dIndex = childs[childs.length - 1].index;
+          index = dIndex === this.children.length - 1 ? dIndex : dIndex + 1; //如果是最后一个，则直接取下标，否则+1取下一个
+        }
+        this.setCurrentIndex(index);
+      },
+      // 状态变更
+      changeStatus(newIdx, oldIdx) {
+        //非滚动导航
+        if (!this.scrollspy) {
+          this.tabs[oldIdx] && (this.tabs[oldIdx].show = false); //标记旧tab内容隐藏
+          this.tabs[newIdx] && (this.tabs[newIdx].show = true); // 标记当前tab内容显示
+          this.children[newIdx] && (this.children[newIdx].rendered = true); //标记当前tab内容渲染过
+        }
+
+        // 子数组标记激活状态
+        this.children.forEach((child, index) => (child.active = newIdx === index));
+      },
+      // 样式切换
+      changeStyle() {
+        // 非滚动导航
+        if (!this.scrollspy) {
+          this.changeTrackStyle(false); //改变标签内容滑动轨道样式
+          //改变标签内容样式
+          // #ifdef H5
+          setTimeout(() => this.changePaneStyle(), 50); // H5端首页时第一次获取高度有问题,使用setTimeout
+          // #endif
+          // #ifndef H5
+          this.$nextTick(() => this.changePaneStyle());
+          // #endif
+        }
+      },
+      // 改变标签内容滑动轨道样式
+      changeTrackStyle(isSlide = false, duration, offsetWidth = 0) {
+        // isSlide为true，表示左右滑动；false表示点击标签切换内容的转场动画；
+        const left = isSlide ? offsetWidth + 'px' : -100 * this.currentIndex + '%';
+        duration = isNull(duration) ? this.duration : duration;
+        const transition = this.animated ? `left ${duration}s ease-in-out` : 'none';
+        // 使用left替换transform，因为transform会导致设置了fixed的元素变成绝对定位
+        this.trackStyle = { left, transition };
+      },
+      // 改变标签内容样式
+      async changePaneStyle() {
+        const curr = this.children[this.currentIndex]; //当前pane
+        if (!curr) return;
+        curr.paneStyle = null;
+        const rect = await curr.getRect('.y-tab__pane--wrap');
+        const panStyle = { height: rect?.height + 'px' };
+        this.tabs
+          .filter((o) => !o.show)
+          .forEach((tab) => {
+            const pane = this.children[tab.index];
+            if (pane) pane.paneStyle = panStyle;
+          });
+      },
+      // 获取标签栏scroll-view当前的滚动偏移量
+      getTabScrollOffset() {
+        return new Promise((resolve, reject) => {
+          // 标签栏水平，返回scrollLeft；垂直时，返回scrollTop
+          const nodeRef = this.getSelectorQuery().select(`.${this.uniqueTabsClass} .y-tabs__scroll`);
+          const fieldName = !this.isVertical ? 'scrollLeft' : 'scrollTop';
+          nodeRef.scrollOffset((res) => resolve(res?.[fieldName] || 0)).exec();
+        });
+      },
+      // 获取页面或内容区域的滚动高度
+      getScrollViewRect() {
+        return new Promise((resolve, reject) => {
+          const query = this.getSelectorQuery();
+          // 页面级滚动，获取viewport的滚动距离;区域滚动，获取scroll-view的滚动距离
+          const nodeRef = this.pageScroll ? query.selectViewport() : query.select(`.${this.uniqueTabsClass} .y-tabs__content-scrollview`);
+          nodeRef.fields({ size: true, scrollOffset: true }, (res) => resolve(res || {})).exec();
+        });
+      },
+      // 更新标签栏wrap的节点信息
+      updateTabsWrapRect() {
+        // 标签栏垂直展示下的吸顶，需重新获取标签栏wrap的节点信息，并更新tab的barOffset、scrollOffset
+        this.$nextTick(async () => {
+          this.wrapRect = await this.getRect('.y-tabs__wrap'); //标签栏节点信息
+          this.scrollViewRect = await this.getRect('.y-tabs__scroll'); //标签栏scroll-view的节点信息
+          this.tabRects.forEach((item) => {
+            const res = this.getTabOffset(item);
+            this.$set(item, 'barOffset', res.barOffset);
+            this.$set(item, 'scrollOffset', res.scrollOffset);
+          });
+        });
+      },
+      //更新标签节点信息
+      async updateTabRect(isFull = false) {
+        // 百度、支付宝、字节等小程序是否支持批量查询节点信息，是否根节点套一层view
+        // init时标签宽高全量更新
+        if (isFull) {
+          //scrollLeft,scrollTop均为0，表示组件初始化，标签节点均处于初始位置
+          const isInit = this.scrollDetail?.scrollLeft === 0 && this.scrollDetail?.scrollTop === 0;
+          // 获取tab的节点信息
+          const rects = await this.getBatchRect(this.tabs.map((_, i) => `.y-tab_${i}`));
+          this.tabRects = this.tabs.map((tab, index) => {
+            const r = rects[index] || {};
+            const result = {
+              index, //记录tab下标
+              width: r.width, //标签宽度
+              height: r.height, //标签高度
+              left: r?.left, //标签左边界距屏幕左边界的距离
+              top: r?.top, //标签上边界距屏幕上边界的距离
+              leftSpace: 0, //与上一个tab的水平间隙
+              topSpace: 0, //与上一个tab的垂直间隙
+              offsetLeft: 0, //标签左边界距scroll-view左边界的距离
+              offsetTop: 0, //标签上边界距scroll-view上边界的距离
+              barOffset: 0, //滑块水平/垂直偏移量
+              scrollOffset: 0, //croll-view水平/垂直的滚动偏移量
+            };
+            // 上一个节点的right、bottom
+            let prevRight = rects[index - 1]?.right;
+            let prevBottom = rects[index - 1]?.bottom;
+
+            // 非初始化时，当前left、top需要加上滚动距离作为最初位置的left、top
+            // 因为动态增删标签时，会调用init方法触发updateTabRect的节点信息计算，如果不加上滚动距离，位置会计算错误
+            if (!isInit) {
+              const { scrollLeft, scrollTop } = this.scrollDetail || {};
+              result.left += scrollLeft;
+              result.top += scrollTop;
+              prevRight += scrollLeft;
+              prevBottom += scrollTop;
+            }
+            result.leftSpace = result.left - (index === 0 ? this.scrollViewRect?.left : prevRight);
+            result.topSpace = result.top - (index === 0 ? this.scrollViewRect?.top : prevBottom);
+            return result;
+          });
+        } else {
+          // 非全量更新，只更新当前及上一个选中tab的节点信息，并改变后面tab的节点信息,旧节点也需要
+          const idxs = [this.currentIndex];
+          if (!isNull(this.lastIndex)) idxs.push(this.lastIndex);
+          const rects = await this.getBatchRect(idxs.map((i) => `.y-tab_${i}`));
+          const keys = ['width', 'height', 'top', 'left'];
+          idxs.forEach((i, idx) => {
+            const matched = this.tabRects?.[i],
+              rect = rects?.[idx];
+            if (matched && rect) keys.forEach((key) => this.$set(matched, key, rect?.[key]));
+          });
+        }
+
+        // 计算相关偏移量
+        let tabRects = [];
+        if (isFull) {
+          tabRects = this.tabRects;
+        } else {
+          // 如果标签宽高会根据选中态进行变化，需进行差量更新，取最小的动态节点开始向后重新计算
+          const start = !isNull(this.lastIndex) ? Math.min(this.lastIndex, this.currentIndex) : this.currentIndex;
+          tabRects = this.tabRects.filter((_, i) => i >= start);
+        }
+        tabRects.forEach((item, i) => {
+          const prev = this.tabRects[item.index - 1] || {};
+          //首个标签取leftSpace
+          if (!this.isVertical) {
+            this.$set(item, 'offsetLeft', item.index === 0 ? item.leftSpace : prev.offsetLeft + prev.width + item.leftSpace);
+          } else {
+            this.$set(item, 'offsetTop', item.index === 0 ? item.topSpace : prev.offsetTop + prev.height + item.topSpace);
+          }
+          const res = this.getTabOffset(item);
+          this.$set(item, 'barOffset', res.barOffset);
+          this.$set(item, 'scrollOffset', res.scrollOffset);
+        });
+      },
+      // 获取动态偏移量等数据
+      getTabOffset({ width, height, offsetLeft, offsetTop }) {
+        if (!this.isVertical) {
+          const cLeft = offsetLeft + width / 2; // 水平展示下的选中标签中心点
+          // 滑块定位到标签的水平偏移量；胶囊风格时，由于滑块宽度等于标签宽度,无需像line处于中心位置，因此barOffset等于offsetLeft
+          const barOffset = this.isLine ? cLeft - this.barRect.width / 2 : offsetLeft;
+          let scrollOffset = cLeft - this.tabCenterWidth; //标签栏滚动到中心时的left值
+          if (scrollOffset < 0) scrollOffset = 0;
+          return { barOffset, scrollOffset };
+        } else {
+          const cTop = offsetTop + height / 2; //垂直展示下的选中标签中心点
+          const barOffset = this.isLine ? cTop - this.barRect.height / 2 : offsetTop;
+          const scrollOffset = cTop - this.tabCenterHeight;
+          return { barOffset, scrollOffset };
+        }
+      },
+      // pane触摸结束事件
+      async touchEndForPane(deltaX, currIndex, targetIndex, isChange) {
+        const isAnimatedMode = this.isLineMode || this.isWormMode; //是否底部条有动画模式
+
+        // 有动画时，禁止触发setLine函数
+        isAnimatedMode && (this.disabledSetLine = true);
+
+        // 达到阈值，切换标签；未达到阈值，pane归位；
+        isChange ? this.setCurrentIndex(targetIndex) : this.changeTrackStyle(false);
+
+        // 对触摸结束时底部条动画的执行
+        if (isAnimatedMode) await this.handleWormAnimated(deltaX, currIndex, targetIndex, isChange);
+
+        // 如果标签宽高动态变化，会导致滑块错位，这里修正一下；如果使用了过渡，仍会错位
+        if (this.isDynamic) {
+          await this.$nextTick(noop);
+          this.disabledSetLine = false;
+          this.setLine();
+        }
+        this.unlockDx();
+      },
+      // 内容滑动结束时的毛毛虫动画模拟
+      handleWormAnimated(deltaX, currIndex, targetIndex, isChange) {
+        // 使用transform与widht同时过渡时，两者不一定并行变化，会导致滑块错位，因此使用定时器模拟过渡；
+        return new Promise((resolve) => {
+          this.barAnimated = false; //关闭滑块动画
+          const duration = this.msDuration,
+            increment = 10;
+
+          const endX = isChange ? this.contentWidth * (deltaX <= 0 ? -1 : 1) : 0; //结束的滑动距离（右滑为负，左滑为正）
+          // 模拟一组触摸滑动开始位置到最终位置的数据
+          const dxList = Array.from({ length: duration / increment }, (_, i) => {
+            const currDx = progress((i + 1) * increment, deltaX, endX, duration);
+            return this.getBarPostion(currIndex, currDx);
+          });
+
+          this.intervalFn(
+            (clear) => {
+              if (dxList.length === 0) {
+                //内容页滑动结束时触发（仅barAnimateMode为linear、worm、worm-ease时有效）
+                this.$emit('slide-end', { targetIndex });
+                clear();
+                resolve();
+              } else {
+                const values = dxList.shift();
+                if (values) {
+                  this.barOffset = values.barOffset;
+                  this.barCalcedWidth = values.barCalcedWidth;
+                  // 内容页滑动时触发（仅barAnimateMode为linear、worm、worm-ease时有效）
+                  this.$emit('slide-change', { dx: values.dx, rate: values.rate, targetIndex });
+                }
+              }
+            },
+            'barIntervalTimer',
+            increment
+          );
+        });
+      },
+      //锁定dx，用于避免在swiper被动触发滚动时候执行setDx中的代码
+      _lockDx() {
+        this.shouldSetDx = false;
+      },
+      //在swiper的@animationfinish中通知y-tabs对setDx的锁定，若在父组件中调用了setDx，则必须调用unlockDx
+      unlockDx() {
+        this.$nextTick(() => {
+          this.barAnimated = true;
+          this.shouldSetDx = true;
+        });
+      },
+      /**
+       * @exposed-api 设置滑块的水平偏移量
+       * @param {number} dx 横向滑动的值
+       * @param {boolean} isSwiper 代表是否为swiper组件滑动时调用
+       */
+      setDx(dx, isSwiper = true) {
+        if (!this.shouldSetDx && isSwiper) return;
+        if (!this.isLineMode && !this.isWormMode) return;
+
+        // swiper组件的current初始化时一定要保证是第一项的下标，否则在微信小程序中dx会异常
+        if (isSwiper) {
+          // 飞书、快手通过swiper组件的@transition返回的dx不统一，使用setDx()错位,因此需要统一dx的变化,与微信、H5端一致
+          // 飞书小程序的dx变化规律难以与微信小程序统一，因此暂无法实现
+
+          // 正确的dx变化
+          // 向左滑动： 第一屏 {dx:0} -> {dx:222} -> {dx:375}     第二屏  {dx:0} -> {dx:222} -> {dx:375}
+          // 向右滑动： 第一屏 {dx:0} -> {dx:-222} -> {dx:-375}   第二屏  {dx:0} -> {dx:-222} -> {dx:-375}
+
+          // 飞书：
+          // 向左滑动： 第一屏 {dx:0} -> {dx:222} -> {dx:375}   第二屏  {dx:375} -> {dx:680} -> {dx:750}
+          // 向右滑动： 第一屏 {dx:375} -> {dx:222} -> {dx:0}   第二屏  {dx:750} -> {dx:680} -> {dx:375}
+          // #ifdef MP-KUAISHOU
+          dx = dx - this.currentIndex * this.contentWidth; //向左滑动时，算出一屏的变化
+          // #endif
+
+          // swiper组件调用的setDx,仅支持App、H5、微信、支付宝、字节跳动、QQ、快手小程序
+          // #ifdef APP-PLUS || H5  || MP-WEIXIN || MP-ALIPAY || MP-TOUTIAO || MP-QQ || MP-KUAISHOU
+          this.handleDx(dx);
+          // #endif
+        } else {
+          this.handleDx(dx, false);
+        }
+      },
+      handleDx(deltaX, isSwiper = true) {
+        const values = this.getBarPostion(this.currentIndex, deltaX);
+        if (!values) return;
+        this.barAnimated = false; //滑动不开启动画
+        const { barOffset, barCalcedWidth, dx, rate, targetIndex } = values || {};
+        this.barOffset = barOffset;
+        this.barCalcedWidth = barCalcedWidth;
+        // 内容页滑动时触发（仅barAnimateMode为linear、worm、worm-ease时有效）
+        if (!isSwiper) this.$emit('slide-change', { dx, rate, targetIndex });
+      },
+      getBarPostion(currIndex, dx) {
+        let barOffset = this.barOffset;
+        let barCalcedWidth = this.barCalcedWidth;
+        dx = Number(dx.toFixed(0)); //取整，避免超过contentWidth
+        const isRight = dx <= 0; //通过dx判断是否向右滑动
+
+        let dxRate = dx / (this.contentWidth + 0.1); //+0.1，避免dxRate为1时造成的底部条错位
+        const currSwiperIndex = currIndex + parseInt(dxRate);
+        if (currSwiperIndex !== currIndex) dxRate = dxRate - (currSwiperIndex - currIndex);
+
+        // 下一个tab下标，保证不能超过tab的范围
+        let nextIndex = currSwiperIndex + (isRight ? -1 : 1);
+        nextIndex = Math.max(0, nextIndex);
+        nextIndex = Math.min(nextIndex, this.dataLen - 1);
+
+        if (currSwiperIndex === nextIndex) return null;
+
+        // tab对应的滑块偏移量
+        const nextOffset = this.tabRects[nextIndex]?.barOffset;
+        const currOffset = this.tabRects[currSwiperIndex]?.barOffset;
+        let distanceX = Math.abs(nextOffset - currOffset); //以当前tab与下一个tab的滑块offset之间的距离作为滑动轨道
+
+        if (this.isLineMode) {
+          barOffset = currOffset + dxRate * distanceX;
+        } else if (this.isWormMode) {
+          const organWidth = this.barRect?.width; //滑块原始宽度
+          if (this.barAnimateMode === 'worm') {
+            const isHalf = Math.abs(dxRate) >= 0.5; //滑动距离超过一半的内容区域
+            dxRate = Math.abs(dxRate * 2);
+            let calcedWidth = 0;
+            // 滑动距离小于一半
+            if (!isHalf) {
+              // 滑动距离小于一半，滑块宽度持续增加
+              calcedWidth = organWidth + dxRate * distanceX;
+              // 右滑，滑块位置应向左不断减少
+              if (isRight) barOffset = currOffset - dxRate * distanceX;
+            } else {
+              // 滑动距离超过一半，滑块宽度减少
+              calcedWidth = organWidth + (2 - dxRate) * distanceX;
+              // 左滑，滑块位置应向右不断增加
+              if (!isRight) barOffset = currOffset + (dxRate - 1) * distanceX;
+              else barOffset = nextOffset; //修正因dxRate无法达到1时滑块位置的偏移
+            }
+
+            barCalcedWidth = Math.max(calcedWidth, organWidth);
+          } else {
+            // 先增加至最大宽度再减少到原始宽度
+            const maxWidth = distanceX * 0.5; //滑块增加到的最大宽度(这里设置为滑动轨道的一半)
+            // 滑块扩张区域的移动宽度及占比
+            const extendWidth = (distanceX - maxWidth) / 2;
+            const extendRange = extendWidth / distanceX;
+
+            // 滑块收缩区域的移动宽度及占比
+            const shrinkWidth = maxWidth + extendWidth;
+            const shrinkRange = shrinkWidth / distanceX;
+
+            // 滑块变化宽度
+            const changeWidth = maxWidth - organWidth;
+
+            const rate = Math.abs(dxRate);
+            if (rate < extendRange) {
+              // 滑块宽度增加
+              const addWidth = (changeWidth / extendRange) * rate; //滑块增加的宽度
+              barCalcedWidth = Math.max(organWidth + addWidth, organWidth); //不允许小于原始宽度
+              if (!isRight) {
+                // 向左滑动，仅移动滑块扩张至最大时距离
+                barOffset = currOffset + (extendWidth / extendRange) * dxRate; //滑块位置变化
+              } else {
+                // 向右滑动，减去滑块增加的宽度及移动比例所占的距离
+                barOffset = currOffset + dxRate * distanceX - addWidth;
+              }
+            } else {
+              // 滑块宽度减少
+              const reduceWidth = (changeWidth / shrinkRange) * (1 - rate); //滑块减少的宽度
+              barCalcedWidth = Math.max(organWidth + reduceWidth, organWidth);
+              if (!isRight) {
+                barOffset = currOffset + extendWidth + (shrinkWidth / shrinkRange) * (dxRate - extendRange);
+              } else {
+                barOffset = currOffset + dxRate * distanceX - reduceWidth;
+              }
+            }
+          }
+        }
+
+        return {
+          barOffset, //底部条偏移量
+          barCalcedWidth, //底部条宽度
+          dx, //滑动距离
+          targetIndex: nextIndex, //滑动到的目标下标
+          rate: Math.abs(dx / this.contentWidth), //滑动比例
+        };
+      },
+      // 获取查询节点信息的对象
+      getSelectorQuery() {
+        let query = null;
+        // #ifdef MP-ALIPAY
+        query = uni.createSelectorQuery();
+        // #endif
+        // #ifndef MP-ALIPAY
+        query = uni.createSelectorQuery().in(this);
+        // #endif
+        return query;
+      },
+      // 获取元素位置信息
+      getRect(selector) {
+        return new Promise((resolve, reject) => {
+          if (!selector) reject('Parameter is empty');
+          const query = this.getSelectorQuery();
+          // 在百度小程序中，如果有多个tabs共存在一个页面，则获取的节点信息永远是第一个，这里使用根节点唯一的class进行隔离
+          query.select(`.${this.uniqueTabsClass} ${selector}`).boundingClientRect();
+          query.exec((data) => resolve(Array.isArray(data) ? data[0] : data));
+        });
+      },
+      // 批量查询节点信息
+      getBatchRect(selectors) {
+        return new Promise((resolve, reject) => {
+          if (!selectors) reject('Parameter is empty');
+          const query = this.getSelectorQuery();
+          // 在百度小程序中，如果有多个tabs共存在一个页面，则获取的节点信息永远是第一个，这里使用根节点唯一的class进行隔离
+          const prefix = `.${this.uniqueTabsClass} `;
+          selectors.forEach((seletor) => {
+            query.select(prefix + seletor).boundingClientRect();
+          });
+          query.exec((data) => resolve(data || []));
+        });
+      },
+      // 延时执行函数，用于执行指定动画时长(duration)完成后需要触发的逻辑
+      delayedFn(cb, name, ms) {
+        const self = this;
+
+        function clear() {
+          if (self[name]) {
+            clearTimeout(self[name]);
+            self[name] = null;
+          }
+        }
+        clear();
+        this[name] = setTimeout(
+          () => {
+            cb && cb();
+            clear();
+          },
+          isNull(ms) ? this.msDuration : ms
+        );
+      },
+      // 定时器
+      intervalFn(cb, name, ms) {
+        const self = this;
+
+        function clear() {
+          if (self[name]) {
+            clearInterval(self[name]);
+            self[name] = null;
+          }
+        }
+        clear();
+        this[name] = setInterval(() => {
+          cb && cb(clear);
+        }, ms);
+      },
+    },
+  };
+</script>
+<style lang="scss" scoped>
+  @import '../css/index';
+</style>