From e86745380e509c7f8f1fb94454d18f9a34e7199f Mon Sep 17 00:00:00 2001
From: mehaotian <490272692@qq.com>
Date: Thu, 24 Aug 2023 19:16:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=8A=98=E5=8F=A0?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/uni-uvue.css                           |    4 +-
 .../uni-collapse-item/uni-collapse-item.vue   |  135 +++
 components/uni-collapse-item/util.uts         |   21 +
 components/uni-collapse/uni-collapse.vue      |   49 +
 pages/tabBar/API.uvue                         | 1015 ++++++++---------
 pages/tabBar/CSS.uvue                         |  715 ++++++------
 pages/tabBar/component.uvue                   |  601 +++++-----
 7 files changed, 1365 insertions(+), 1175 deletions(-)
 create mode 100644 components/uni-collapse-item/uni-collapse-item.vue
 create mode 100644 components/uni-collapse-item/util.uts
 create mode 100644 components/uni-collapse/uni-collapse.vue

diff --git a/common/uni-uvue.css b/common/uni-uvue.css
index 127baf67..839c5aee 100644
--- a/common/uni-uvue.css
+++ b/common/uni-uvue.css
@@ -124,7 +124,9 @@
 .uni-navigate-item:active {
     background-color: #f8f8f8;
 }
-
+.is--active {
+	 background-color: #f8f8f8;
+}
 .uni-navigate-text {
     color: #000000;
     font-size: 14px;
diff --git a/components/uni-collapse-item/uni-collapse-item.vue b/components/uni-collapse-item/uni-collapse-item.vue
new file mode 100644
index 00000000..d590cf4e
--- /dev/null
+++ b/components/uni-collapse-item/uni-collapse-item.vue
@@ -0,0 +1,135 @@
+<template>
+	<view class="uni-collapse-item">
+		<view class="uni-collapse-item__title" :class="{'open--active':is_open}" @click="openCollapse(!this.is_open)">
+			<text class="uni-collapse-item__title-text" :class="{'is-disabled':disabled}">{{title}}</text>
+			<view class="down_arrow" :class="{'down_arrow--active': is_open}"></view>
+		</view>
+		<view ref="boxRef" class="uni-collapse-item__content">
+			<view ref="contentRef" class="uni-collapse-item__content-box">
+				<slot></slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { $dispatch } from './util.uts'
+	export default {
+		name: "UniCollapseItem",
+		props: {
+			// 列表标题
+			title: {
+				type: String,
+				default: ''
+			},
+			open: {
+				type: Boolean,
+				default: false
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				height: 0,
+				is_open: this.open as boolean,
+				boxNode: null as INode | null,
+				contentNode: null as INode | null,
+			};
+		},
+		watch: {
+			open(value: boolean) {
+				// this.is_open = value
+				if (this.boxNode != null) {
+					this.openCollapse(value)
+				}
+			}
+		},
+		created() {
+			$dispatch(this, 'UniCollapse', 'init', this)
+		},
+		mounted() {
+			this.boxNode = this.$refs['boxRef'] as INode;
+			this.contentNode = this.$refs['contentRef'] as INode;
+			// this.openCollapse(this.open)
+		},
+		methods: {
+			// 开启或关闭折叠面板 
+			openCollapse(open: boolean) {
+				if (this.disabled) return
+				// 关闭其他已打开
+				$dispatch(this, 'UniCollapse', 'cloceAll')
+				this.is_open = open
+				this.oepnOrClose(open)
+			},
+			oepnOrClose(open: boolean) {
+				const boxNode = this.boxNode?.style!;
+				const contentNode = this.contentNode?.style!;
+				let hide = open ? 'flex' : 'none';
+				let ani_transform = open ? 'translateY(0)' : 'translateY(-100%)';
+				boxNode.setProperty('display', hide);
+				this.$nextTick(() => {
+					contentNode.setProperty('transform', ani_transform);
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.uni-collapse-item {
+		background-color: #fff;
+	}
+	.uni-collapse-item__title {
+		flex-direction: row;
+		align-items: center;
+		line-height: 22px;
+		padding: 12px;
+		background-color: #fff;
+	}
+
+	.open--active {
+		background-color: #f0f0f0;
+	}
+
+	.down_arrow {
+		width: 8px;
+		height: 8px;
+		transform: rotate(45deg);
+		border-right: 1px #999 solid;
+		border-bottom: 1px #999 solid;
+		margin-top: -3px;
+		transition-property: transform;
+		transition-duration: 0.2s;
+	}
+
+	.down_arrow--active {
+		transform: rotate(-135deg);
+		margin-top: 0px;
+	}
+
+	.uni-collapse-item__title-text {
+		flex: 1;
+		color: #000;
+		font-size: 14px;
+		font-weight: 400;
+	}
+
+	.is-disabled {
+		color: #999;
+	}
+
+	.uni-collapse-item__content {
+		display: none;
+		position: relative;
+	}
+
+	.uni-collapse-item__content-box {
+		width: 100%;
+		transition-property: transform;
+		transition-duration: 0.3s;
+		transform: translateY(-100%);
+	}
+</style>
\ No newline at end of file
diff --git a/components/uni-collapse-item/util.uts b/components/uni-collapse-item/util.uts
new file mode 100644
index 00000000..57297ad3
--- /dev/null
+++ b/components/uni-collapse-item/util.uts
@@ -0,0 +1,21 @@
+// import { ComponentPublicInstance } from 'vue'
+
+// 查找父组件实例
+export function $dispatch(
+	context : ComponentPublicInstance,
+	componentName : string,
+	eventName : string,
+	...params : any | null
+) {
+	let parent = context.$parent
+	let name = parent?.$options?.name
+	while (parent != null && (name == null || componentName != name)) {
+		parent = parent.$parent
+		if (parent != null) {
+			name = parent?.$options?.name
+		}
+	}
+	if (parent != null) {
+		parent.$callMethod(eventName, ...params)
+	}
+}
\ No newline at end of file
diff --git a/components/uni-collapse/uni-collapse.vue b/components/uni-collapse/uni-collapse.vue
new file mode 100644
index 00000000..9f071d9c
--- /dev/null
+++ b/components/uni-collapse/uni-collapse.vue
@@ -0,0 +1,49 @@
+<template>
+	<!-- 父组件暂时无用，后续子组件联动需要使用到父组件 -->
+	<view>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	// import { ComponentPublicInstance } from 'vue'
+	export default {
+		name: "UniCollapse",
+		props: {
+			// 是否开启手风琴效果
+			accordion: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				child_nodes: [] as Array < ComponentPublicInstance >
+			};
+		},
+
+		methods: {
+			init(child: ComponentPublicInstance) {
+				this.child_nodes.push(child)
+			},
+			// 关闭所有
+			cloceAll() {
+				// 开启手风琴效果才回关闭其他
+				if (this.accordion && this.child_nodes.length > 0) {
+					this.child_nodes.forEach((item) => {
+						const is_open = item.$data.get('is_open') as boolean
+						// TODO 暂时无法获取子组件上的属性和方法，暂时使用绕过方案
+						if (is_open) {
+							item.$data.set('is_open', false)
+							item.$callMethod('oepnOrClose', false)
+						}
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/pages/tabBar/API.uvue b/pages/tabBar/API.uvue
index 7fd3ec44..f140e7c4 100644
--- a/pages/tabBar/API.uvue
+++ b/pages/tabBar/API.uvue
@@ -1,522 +1,515 @@
 <template>
-  <!-- #ifdef APP -->
-  <scroll-view style="flex: 1">
-    <!-- #endif -->
-    <view class="uni-container">
-      <view class="uni-header-logo">
-        <image class="uni-header-image" src="/static/apiIndex.png"></image>
-      </view>
-      <view class="uni-hello-text">
-        <text class="hello-text">以下将演示uni-app接口能力，详细文档见：</text>
-        <u-link
-          :href="'https://uniapp.dcloud.io/api/'"
-          :text="'https://uniapp.dcloud.io/api/'"
-          :inWhiteList="true"
-        ></u-link>
-      </view>
-      <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
-        <view
-          class="uni-panel-h"
-          :class="item.open ? 'uni-panel-h-on' : ''"
-          @click="triggerCollapse(index, item)"
-        >
-          <text
-            class="uni-panel-text"
-            :class="item.enable == false ? 'text-disabled' : ''"
-            >{{ item.name }}</text
-          >
-          <image
-            :src="
-              item.pages.length > 0
+	<!-- #ifdef APP -->
+	<scroll-view style="flex: 1">
+		<!-- #endif -->
+		<view class="uni-container">
+			<view class="uni-header-logo">
+				<image class="uni-header-image" src="/static/apiIndex.png"></image>
+			</view>
+			<view class="uni-hello-text">
+				<text class="hello-text">以下将演示uni-app接口能力，详细文档见：</text>
+				<u-link :href="'https://uniapp.dcloud.io/api/'" :text="'https://uniapp.dcloud.io/api/'" :inWhiteList="true"></u-link>
+			</view>
+
+			<uni-collapse>
+				<template v-for="item in list" :key="item.id">
+					<uni-collapse-item :title="item.name" class="item">
+						<view class="uni-navigate-item" :hover-class="page.enable == false?'':'is--active'" v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
+							<text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
+							<image :src="arrowRightIcon" class="uni-icon"></image>
+						</view>
+					</uni-collapse-item>
+				</template>
+			</uni-collapse>
+
+			<!-- <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
+				<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)">
+					<text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{ item.name }}</text>
+					<image :src="
+              item.pages.length > 
                 ? item.open
                   ? arrowUpIcon
                   : arrowDownIcon
                 : arrowRightIcon
-            "
-            class="uni-icon"
-          ></image>
-        </view>
-        <view class="uni-panel-c" v-if="item.open">
-          <view
-            class="uni-navigate-item"
-            v-for="(page, key) in item.pages"
-            :key="key"
-            @click="goDetailPage(page)"
-          >
-            <text
-              class="uni-navigate-text"
-              :class="page.enable == false ? 'text-disabled' : ''"
-              >{{ page.name }}</text
-            >
-            <image :src="arrowRightIcon" class="uni-icon"></image>
-          </view>
-        </view>
-      </view>
-    </view>
-    <!-- #ifdef APP -->
-  </scroll-view>
-  <!-- #endif -->
+            " class="uni-icon"></image>
+				</view>
+				<view class="uni-panel-c" v-if="item.open">
+					<view class="uni-navigate-item" v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
+						<text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
+						<image :src="arrowRightIcon" class="uni-icon"></image>
+					</view>
+				</view>
+			</view> -->
+		</view>
+		<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
 </template>
 
 <script lang="ts">
-type Page = {
-  name: string
-  enable?: boolean
-  url: string
-}
-type ListItem = {
-  id: string
-  name: string
-  open: boolean
-  pages: Page[]
-  url?: string
-  enable?: boolean
-}
-export default {
-  data() {
-    return {
-      list: [
-        {
-          id: 'base',
-          name: '基础',
-          open: false,
-          pages: [
-            {
-              name: 'getApp',
-              url: 'get-app',
-            },
-            {
-              name: 'getCurrentPages',
-              url: 'get-current-pages',
-            },
-            {
-              name: '事件总线event-bus',
-              url: 'event-bus',
-            },
-            {
-              name: '获取启动参数',
-              url: 'get-launch-options-sync',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'page',
-          name: '页面',
-          open: false,
-          pages: [
-            {
-              name: '页面跳转',
-              url: 'navigator',
-            },
-            {
-              name: '页面栈管理',
-              url: 'getCurrentPages',
-              enable: false,
-            },
-            {
-              name: '设置导航条标题',
-              url: 'set-navigation-bar-title',
-              enable: false,
-            },
-            {
-              name: '设置导航条颜色',
-              url: 'set-navigation-bar-color',
-            },
-            {
-              name: '设置TabBar',
-              url: 'set-tabbar',
-              enable: false,
-            },
-            {
-              name: '下拉刷新',
-              url: 'pull-down-refresh',
-              // enable: false,
-            },
-            {
-              name: '将页面滚动到指定位置',
-              url: 'page-scroll-to',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'ui',
-          name: '界面',
-          open: false,
-          pages: [
-            /* {
-              name: "创建动画",
-              url: "animation",
-              enable: false
-            },
-            {
-              name: "创建绘画",
-              url: "canvas",
-              enable: false
-            },
-            {
-              name: "节点布局交互状态",
-              url: "intersection-observer",
-              enable: false
-            }, */
-            {
-              name: '节点信息',
-              url: 'nodes-info',
-            },
-            {
-              name: '显示操作菜单',
-              url: 'action-sheet',
-            },
-            {
-              name: '显示模态弹窗',
-              url: 'modal',
-            },
-            {
-              name: '显示加载提示框',
-              url: 'show-loading',
-            },
-            {
-              name: '显示消息提示框',
-              url: 'toast',
-            },
-            {
-              name: '动态加载字体',
-              url: 'load-font-face',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'device',
-          name: '设备',
-          open: false,
-          pages: [
-            {
-              name: '获取设备网络状态',
-              url: 'get-network-type',
-            },
-            {
-              name: '获取系统信息',
-              url: 'get-system-info',
-            },
-            {
-              name: '获取设备信息',
-              url: 'get-device-info',
-            },
-            {
-              name: '获取APP基础信息',
-              url: 'get-app-base-info',
-            },
-            {
-              name: '获取系统设置',
-              url: 'get-system-setting',
-            },
-            {
-              name: '获取APP授权设置',
-              url: 'get-app-authorize-setting',
-            },
-            {
-              name: '获取窗口信息',
-              url: 'get-window-info',
-            },
-            {
-              name: '电量',
-              url: 'get-battery-info',
-            },
-            /* {
-              name: "打电话",
-              url: "make-phone-call",
-            },
-            {
-              name: "震动",
-              url: "vibrate",
-            },
-            {
-              name: "添加手机联系人",
-              url: "add-phone-contact",
-            },
-            {
-              name: "扫码",
-              url: "scan-code",
-            },
-            {
-              name: "剪贴板",
-              url: "clipboard",
-            },
-            {
-              name: "屏幕亮度",
-              url: "brightness",
-            },
-            {
-              name: "蓝牙",
-              url: "bluetooth",
-            },
-            {
-              name: "生物认证",
-              url: "soter",
-            },
-            {
-              name: "iBeacon",
-              url: "ibeacon",
-            },
-            {
-              name: "监听加速度传感器",
-              url: "on-accelerometer-change",
-            },
-            {
-              name: "监听罗盘数据",
-              url: "on-compass-change",
-            },
-            {
-              name: "监听距离传感器",
-              url: "/platforms/app-plus/proximity/proximity",
-            },
-            {
-              name: "监听方向传感器",
-              url: "/platforms/app-plus/orientation/orientation",
-            }, */
-          ] as Page[],
-        },
-        {
-          id: 'network',
-          name: '网络',
-          open: false,
-          pages: [
-            {
-              name: '发起一个请求',
-              url: 'request',
-            },
-            {
-              name: '上传文件',
-              url: 'upload-file',
-            },
-            {
-              name: '下载文件',
-              url: 'download-file',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'websocket',
-          name: 'websocket',
-          open: false,
-          pages: [
-            {
-              name: 'socketTask',
-              url: 'websocket-socketTask',
-            },
-            {
-              name: '全局websocket',
-              url: 'websocket-global',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'media',
-          name: '媒体',
-          open: false,
-          pages: [
-            {
-              name: '图片选择和预览',
-              url: 'preview-image',
-            },
-            /* {
-              name: "图片选择和拍照",
-              url: "image",
-              enable: false
-            },{
-              name: "音频",
-              url: "inner-audio",
-            },
-            {
-              name: "录音",
-              url: "voice",
-            },
-            {
-              name: "背景音频",
-              url: "background-audio",
-            }, 
-            {
-              name: "视频选择和拍照",
-              url: "video",
-              enable: false
-            },
-            {
-              name: "文件",
-              url: "file",
-            },
-            {
-              name: "保存媒体到本地",
-              url: "save-media",
-            }, */
-          ] as Page[],
-        },
-        {
-          id: 'location',
-          name: '位置',
-          open: false,
-          pages: [
-            {
-              name: '获取当前位置',
-              url: 'get-location',
-            },
-            /* {
-              name: "使用地图查看位置",
-              url: "open-location",
-            },
-            {
-              name: "使用地图选择位置",
-              url: "choose-location",
-            },
-            {
-              name: "地图控制",
-              url: "map",
-            },
-            {
-              name: "地图搜索",
-              url: "map-search",
-            }, */
-          ] as Page[],
-        },
-        {
-          id: 'storage',
-          name: '存储',
-          open: false,
-          pages: [
-            {
-              name: 'storage（key-value存储）',
-              url: 'storage',
-            },
-          ] as Page[],
-        },
-        /* {
-          id: "rewarded-video-ad",
-          url: "rewarded-video-ad",
-          name: "激励视频广告",
-          open: false,
-          enable: false,
-          pages: [] as Page[]
-        },
-        {
-          id: "full-screen-video-ad",
-          url: "full-screen-video-ad",
-          name: "全屏视频广告",
-          open: false,
-          enable: false,
-          pages: [] as Page[]
-        },
-        {
-          id: "login",
-          name: "登录",
-          open: false,
-          pages: [
-            {
-              name: "登录",
-              url: "login",
-            },
-            {
-              name: "获取用户信息",
-              url: "get-user-info",
-            },
-          ] as Page[],
-        },
-        {
-          id: "share",
-          name: "分享",
-          open: false,
-          pages: [
-            {
-              name: "分享",
-              url: "share",
-            },
-          ] as Page[],
-        },
-        {
-          id: "payment",
-          name: "支付",
-          open: false,
-          pages: [
-            {
-              name: "发起支付",
-              url: "request-payment",
-            },
-          ] as Page[],
-        },
-        {
-          id: "speech",
-          name: "语音",
-          open: false,
-          pages: [
-            {
-              name: "语音识别",
-              url: "/platforms/app-plus/speech/speech",
-            },
-          ] as Page[],
-        },
-        {
-          id: "push",
-          name: "推送",
-          open: false,
-          pages: [
-            {
-              name: "推送",
-              url: "/platforms/app-plus/push/push",
-            },
-          ] as Page[],
-        }, */
-        {
-          id: 'exit',
-          name: '退出',
-          open: false,
-          pages: [
-            {
-              name: 'exit退出',
-              url: 'exit',
-              enable: true
-            },
-          ] as Page[],
-        },
-      ] as ListItem[],
-      arrowUpIcon: '/static/icons/arrow-up.png',
-      arrowDownIcon: '/static/icons/arrow-down.png',
-      arrowRightIcon: '/static/icons/arrow-right.png',
-    }
-  },
-  methods: {
-    triggerCollapse(index?: number, item: ListItem) {
-      if (item.pages.length == 0) {
-        const page: Page = {
-          name: item.name,
-          enable: item.enable,
-          url: item.url!,
-        }
-        this.goDetailPage(page)
-        return
-      }
-      for (var i = 0; i < this.list.length; ++i) {
-        if (index == i) {
-          this.list[i].open = !this.list[i].open
-        } else {
-          this.list[i].open = false
-        }
-      }
-    },
-    goDetailPage(e: Page) {
-      if (e.enable == false) {
-        uni.showToast({
-          title: '暂不支持',
-          icon: 'none',
-        })
-        return
-      }
-      const url =
-        e.url.indexOf('platform') > -1 ? e.url : `/pages/API/${e.url}/${e.url}`
-      uni.navigateTo({
-        url,
-      })
-    },
-  },
-}
+	type Page = {
+		name : string
+		enable ?: boolean
+		url : string
+	}
+	type ListItem = {
+		id : string
+		name : string
+		open : boolean
+		pages : Page[]
+		url ?: string
+		enable ?: boolean
+	}
+	export default {
+		data() {
+			return {
+				list: [
+					{
+						id: 'base',
+						name: '基础',
+						open: false,
+						pages: [
+							{
+								name: 'getApp',
+								url: 'get-app',
+							},
+							{
+								name: 'getCurrentPages',
+								url: 'get-current-pages',
+							},
+							{
+								name: '事件总线event-bus',
+								url: 'event-bus',
+							},
+							{
+								name: '获取启动参数',
+								url: 'get-launch-options-sync',
+							},
+						] as Page[],
+					},
+					{
+						id: 'page',
+						name: '页面',
+						open: false,
+						pages: [
+							{
+								name: '页面跳转',
+								url: 'navigator',
+							},
+							{
+								name: '页面栈管理',
+								url: 'getCurrentPages',
+								enable: false,
+							},
+							{
+								name: '设置导航条标题',
+								url: 'set-navigation-bar-title',
+								enable: false,
+							},
+							{
+								name: '设置导航条颜色',
+								url: 'set-navigation-bar-color',
+							},
+							{
+								name: '设置TabBar',
+								url: 'set-tabbar',
+								enable: false,
+							},
+							{
+								name: '下拉刷新',
+								url: 'pull-down-refresh',
+								enable: false,
+							},
+							{
+								name: '将页面滚动到指定位置',
+								url: 'page-scroll-to',
+							},
+						] as Page[],
+					},
+					{
+						id: 'ui',
+						name: '界面',
+						open: false,
+						pages: [
+							/* {
+								name: "创建动画",
+								url: "animation",
+								enable: false
+							},
+							{
+								name: "创建绘画",
+								url: "canvas",
+								enable: false
+							},
+							{
+								name: "节点布局交互状态",
+								url: "intersection-observer",
+								enable: false
+							}, */
+							{
+								name: '节点信息',
+								url: 'nodes-info',
+							},
+							{
+								name: '显示操作菜单',
+								url: 'action-sheet',
+							},
+							{
+								name: '显示模态弹窗',
+								url: 'modal',
+							},
+							{
+								name: '显示加载提示框',
+								url: 'show-loading',
+							},
+							{
+								name: '显示消息提示框',
+								url: 'toast',
+							},
+							{
+								name: '动态加载字体',
+								url: 'load-font-face',
+							},
+						] as Page[],
+					},
+					{
+						id: 'device',
+						name: '设备',
+						open: false,
+						pages: [
+							{
+								name: '获取设备网络状态',
+								url: 'get-network-type',
+							},
+							{
+								name: '获取系统信息',
+								url: 'get-system-info',
+							},
+							{
+								name: '获取设备信息',
+								url: 'get-device-info',
+							},
+							{
+								name: '获取APP基础信息',
+								url: 'get-app-base-info',
+							},
+							{
+								name: '获取系统设置',
+								url: 'get-system-setting',
+							},
+							{
+								name: '获取APP授权设置',
+								url: 'get-app-authorize-setting',
+							},
+							{
+								name: '获取窗口信息',
+								url: 'get-window-info',
+							},
+							{
+								name: '电量',
+								url: 'get-battery-info',
+							},
+							/* {
+								name: "打电话",
+								url: "make-phone-call",
+							},
+							{
+								name: "震动",
+								url: "vibrate",
+							},
+							{
+								name: "添加手机联系人",
+								url: "add-phone-contact",
+							},
+							{
+								name: "扫码",
+								url: "scan-code",
+							},
+							{
+								name: "剪贴板",
+								url: "clipboard",
+							},
+							{
+								name: "屏幕亮度",
+								url: "brightness",
+							},
+							{
+								name: "蓝牙",
+								url: "bluetooth",
+							},
+							{
+								name: "生物认证",
+								url: "soter",
+							},
+							{
+								name: "iBeacon",
+								url: "ibeacon",
+							},
+							{
+								name: "监听加速度传感器",
+								url: "on-accelerometer-change",
+							},
+							{
+								name: "监听罗盘数据",
+								url: "on-compass-change",
+							},
+							{
+								name: "监听距离传感器",
+								url: "/platforms/app-plus/proximity/proximity",
+							},
+							{
+								name: "监听方向传感器",
+								url: "/platforms/app-plus/orientation/orientation",
+							}, */
+						] as Page[],
+					},
+					{
+						id: 'network',
+						name: '网络',
+						open: false,
+						pages: [
+							{
+								name: '发起一个请求',
+								url: 'request',
+							},
+							{
+								name: '上传文件',
+								url: 'upload-file',
+							},
+							{
+								name: '下载文件',
+								url: 'download-file',
+							},
+						] as Page[],
+					},
+					{
+						id: 'websocket',
+						name: 'websocket',
+						open: false,
+						pages: [
+							{
+								name: 'socketTask',
+								url: 'websocket-socketTask',
+							},
+							{
+								name: '全局websocket',
+								url: 'websocket-global',
+							},
+						] as Page[],
+					},
+					{
+						id: 'media',
+						name: '媒体',
+						open: false,
+						pages: [
+							{
+								name: '图片选择和预览',
+								url: 'preview-image',
+							},
+							/* {
+								name: "图片选择和拍照",
+								url: "image",
+								enable: false
+							},{
+								name: "音频",
+								url: "inner-audio",
+							},
+							{
+								name: "录音",
+								url: "voice",
+							},
+							{
+								name: "背景音频",
+								url: "background-audio",
+							}, 
+							{
+								name: "视频选择和拍照",
+								url: "video",
+								enable: false
+							},
+							{
+								name: "文件",
+								url: "file",
+							},
+							{
+								name: "保存媒体到本地",
+								url: "save-media",
+							}, */
+						] as Page[],
+					},
+					{
+						id: 'location',
+						name: '位置',
+						open: false,
+						pages: [
+							{
+								name: '获取当前位置',
+								url: 'get-location',
+							},
+							/* {
+								name: "使用地图查看位置",
+								url: "open-location",
+							},
+							{
+								name: "使用地图选择位置",
+								url: "choose-location",
+							},
+							{
+								name: "地图控制",
+								url: "map",
+							},
+							{
+								name: "地图搜索",
+								url: "map-search",
+							}, */
+						] as Page[],
+					},
+					{
+						id: 'storage',
+						name: '存储',
+						open: false,
+						pages: [
+							{
+								name: 'storage（key-value存储）',
+								url: 'storage',
+							},
+						] as Page[],
+					},
+					/* {
+						id: "rewarded-video-ad",
+						url: "rewarded-video-ad",
+						name: "激励视频广告",
+						open: false,
+						enable: false,
+						pages: [] as Page[]
+					},
+					{
+						id: "full-screen-video-ad",
+						url: "full-screen-video-ad",
+						name: "全屏视频广告",
+						open: false,
+						enable: false,
+						pages: [] as Page[]
+					},
+					{
+						id: "login",
+						name: "登录",
+						open: false,
+						pages: [
+							{
+								name: "登录",
+								url: "login",
+							},
+							{
+								name: "获取用户信息",
+								url: "get-user-info",
+							},
+						] as Page[],
+					},
+					{
+						id: "share",
+						name: "分享",
+						open: false,
+						pages: [
+							{
+								name: "分享",
+								url: "share",
+							},
+						] as Page[],
+					},
+					{
+						id: "payment",
+						name: "支付",
+						open: false,
+						pages: [
+							{
+								name: "发起支付",
+								url: "request-payment",
+							},
+						] as Page[],
+					},
+					{
+						id: "speech",
+						name: "语音",
+						open: false,
+						pages: [
+							{
+								name: "语音识别",
+								url: "/platforms/app-plus/speech/speech",
+							},
+						] as Page[],
+					},
+					{
+						id: "push",
+						name: "推送",
+						open: false,
+						pages: [
+							{
+								name: "推送",
+								url: "/platforms/app-plus/push/push",
+							},
+						] as Page[],
+					}, */
+					{
+						id: 'exit',
+						name: '退出',
+						open: false,
+						pages: [
+							{
+								name: 'exit退出',
+								url: 'exit',
+								enable: true
+							},
+						] as Page[],
+					},
+				] as ListItem[],
+				arrowUpIcon: '/static/icons/arrow-up.png',
+				arrowDownIcon: '/static/icons/arrow-down.png',
+				arrowRightIcon: '/static/icons/arrow-right.png',
+			}
+		},
+		methods: {
+			triggerCollapse(index ?: number, item : ListItem) {
+				if (item.pages.length == 0) {
+					const page : Page = {
+						name: item.name,
+						enable: item.enable,
+						url: item.url!,
+					}
+					this.goDetailPage(page)
+					return
+				}
+				for (var i = 0; i < this.list.length; ++i) {
+					if (index == i) {
+						this.list[i].open = !this.list[i].open
+					} else {
+						this.list[i].open = false
+					}
+				}
+			},
+			goDetailPage(e : Page) {
+				if (e.enable == false) {
+					uni.showToast({
+						title: '暂不支持',
+						icon: 'none',
+					})
+					return
+				}
+				const url =
+					e.url.indexOf('platform') > -1 ? e.url : `/pages/API/${e.url}/${e.url}`
+				uni.navigateTo({
+					url,
+				})
+			},
+		},
+	}
 </script>
 
 <style>
-@import '../../common/uni-uvue.css';
-</style>
+	@import '../../common/uni-uvue.css';
+
+	.item {
+		margin-bottom: 12px;
+	}
+	
+</style>
\ No newline at end of file
diff --git a/pages/tabBar/CSS.uvue b/pages/tabBar/CSS.uvue
index 7e1b6009..94649026 100644
--- a/pages/tabBar/CSS.uvue
+++ b/pages/tabBar/CSS.uvue
@@ -1,376 +1,363 @@
 <template>
-  <!-- #ifdef APP -->
-  <scroll-view style="flex: 1">
-    <!-- #endif -->
-    <view class="uni-container">
-      <view class="uni-header-logo">
-        <image class="uni-header-image" src="/static/cssIndex.png"></image>
-      </view>
-      <view class="uni-hello-text">
-        <text class="hello-text"
-          >uni-app x目前已支持的CSS属性，展示样式仅供参考，文档详见：</text
-        >
-        <u-link
-          :href="'https://uniapp.dcloud.io/component/'"
-          :text="'https://uniapp.dcloud.io/component/'"
-          :inWhiteList="true"
-        ></u-link>
-      </view>
-      <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
-        <view
-          class="uni-panel-h"
-          :class="item.open ? 'uni-panel-h-on' : ''"
-          @click="triggerCollapse(index, item)"
-        >
-          <text
-            class="uni-panel-text"
-            :class="item.enable == false ? 'text-disabled' : ''"
-            >{{ item.name }}</text
-          >
-          <image
-            :src="
+	<!-- #ifdef APP -->
+	<scroll-view style="flex: 1">
+		<!-- #endif -->
+		<view class="uni-container">
+			<view class="uni-header-logo">
+				<image class="uni-header-image" src="/static/cssIndex.png"></image>
+			</view>
+			<view class="uni-hello-text">
+				<text class="hello-text">uni-app x目前已支持的CSS属性，展示样式仅供参考，文档详见：</text>
+				<u-link :href="'https://uniapp.dcloud.io/component/'" :text="'https://uniapp.dcloud.io/component/'" :inWhiteList="true"></u-link>
+			</view>
+			<uni-collapse>
+				<template v-for="item in list" :key="item.id">
+					<uni-collapse-item :title="item.name" class="item">
+						<view class="uni-navigate-item":hover-class="page.enable == false?'':'is--active'" v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
+							<text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
+							<image :src="arrowRightIcon" class="uni-icon"></image>
+						</view>
+					</uni-collapse-item>
+				</template>
+			</uni-collapse>
+			<!-- <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
+				<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)">
+					<text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{ item.name }}</text>
+					<image :src="
               item.pages.length > 0
                 ? item.open
                   ? arrowUpIcon
                   : arrowDownIcon
                 : arrowRightIcon
-            "
-            class="uni-icon"
-          ></image>
-        </view>
-        <view class="uni-panel-c" v-if="item.open">
-          <view
-            class="uni-navigate-item"
-            v-for="(page, key) in item.pages"
-            :key="key"
-            @click="goDetailPage(page)"
-          >
-            <text
-              class="uni-navigate-text"
-              :class="page.enable == false ? 'text-disabled' : ''"
-              >{{ page.name }}</text
-            >
-            <image :src="arrowRightIcon" class="uni-icon"></image>
-          </view>
-        </view>
-      </view>
-    </view>
-    <!-- #ifdef APP -->
-  </scroll-view>
-  <!-- #endif -->
+            " class="uni-icon"></image>
+				</view>
+				<view class="uni-panel-c" v-if="item.open">
+					<view class="uni-navigate-item" v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
+						<text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
+						<image :src="arrowRightIcon" class="uni-icon"></image>
+					</view>
+				</view>
+			</view> -->
+		</view>
+		<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
 </template>
 
 <script lang="ts">
-type Page = {
-  name: string
-  enable?: boolean
-  url?: string
-}
-type ListItem = {
-  id: string
-  name: string
-  open: boolean
-  pages: Page[]
-  url?: string
-  enable?: boolean
-}
-export default {
-  data() {
-    return {
-      list: [
-        {
-          id: 'background',
-          name: 'background',
-          open: false,
-          pages: [
-            {
-              name: 'background-color',
-              url: '/pages/CSS/background/background-color',
-            },
-            {
-              name: 'background-image',
-              url: '/pages/CSS/background/background-image',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'border',
-          name: 'border',
-          open: false,
-          pages: [
-            {
-              name: 'border',
-              url: '/pages/CSS/border/border',
-            },
-            {
-              name: 'border-width',
-              url: '/pages/CSS/border/border-width',
-            },
-            {
-              name: 'border-style',
-              url: '/pages/CSS/border/border-style',
-            },
-            {
-              name: 'border-color',
-              url: '/pages/CSS/border/border-color',
-            },
-            {
-              name: 'border-radius',
-              url: '/pages/CSS/border/border-radius',
-            },
-            {
-              name: 'border属性复合示例',
-              url: '/pages/CSS/border/complex-border/complex-border',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'box-shadow',
-          name: 'box-shadow',
-          open: false,
-          pages: [
-            {
-              name: 'box-shadow',
-              url: '/pages/CSS/box-shadow/box-shadow',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'flex',
-          name: 'flex',
-          open: false,
-          pages: [
-            {
-              name: 'align-content',
-              url: '/pages/CSS/flex/align-content',
-            },
-            {
-              name: 'align-items',
-              url: '/pages/CSS/flex/align-items',
-            },
-            {
-              name: 'flex-basis',
-              url: '/pages/CSS/flex/flex-basis',
-            },
-            {
-              name: 'flex-direction',
-              url: '/pages/CSS/flex/flex-direction',
-            },
-            {
-              name: 'flex-flow',
-              url: '/pages/CSS/flex/flex-flow',
-            },
-            {
-              name: 'flex-grow',
-              url: '/pages/CSS/flex/flex-grow',
-            },
-            {
-              name: 'flex-shrink',
-              url: '/pages/CSS/flex/flex-shrink',
-            },
-            {
-              name: 'flex',
-              url: '/pages/CSS/flex/flex',
-            },
-            {
-              name: 'justify-content',
-              url: '/pages/CSS/flex/justify-content',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'layout',
-          name: 'layout',
-          open: false,
-          pages: [
-            {
-              name: 'height',
-              url: '/pages/CSS/layout/height',
-            },
-            {
-              name: 'max-height',
-              url: '/pages/CSS/layout/max-height',
-            },
-            {
-              name: 'max-width',
-              url: '/pages/CSS/layout/max-width',
-            },
-            {
-              name: 'min-height',
-              url: '/pages/CSS/layout/min-height',
-            },
-            {
-              name: 'min-width',
-              url: '/pages/CSS/layout/min-width',
-            },
-            {
-              name: 'position',
-              url: '/pages/CSS/layout/position',
-            },
-            {
-              name: 'width',
-              url: '/pages/CSS/layout/width',
-            },
-            {
-              name: 'visibility',
-              url: '/pages/CSS/layout/visibility',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'margin',
-          name: 'margin',
-          open: false,
-          pages: [
-            {
-              name: 'margin-bottom',
-              url: '/pages/CSS/margin/margin-bottom',
-            },
-            {
-              name: 'margin-left',
-              url: '/pages/CSS/margin/margin-left',
-            },
-            {
-              name: 'margin-right',
-              url: '/pages/CSS/margin/margin-right',
-            },
-            {
-              name: 'margin-top',
-              url: '/pages/CSS/margin/margin-top',
-            },
-            {
-              name: 'margin',
-              url: '/pages/CSS/margin/margin',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'padding',
-          name: 'padding',
-          open: false,
-          pages: [
-            {
-              name: 'padding-bottom',
-              url: '/pages/CSS/padding/padding-bottom',
-            },
-            {
-              name: 'padding-left',
-              url: '/pages/CSS/padding/padding-left',
-            },
-            {
-              name: 'padding-right',
-              url: '/pages/CSS/padding/padding-right',
-            },
-            {
-              name: 'padding-top',
-              url: '/pages/CSS/padding/padding-top',
-            },
-            {
-              name: 'padding',
-              url: '/pages/CSS/padding/padding',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'text',
-          name: 'text',
-          open: false,
-          pages: [
-            {
-              name: 'color',
-              url: '/pages/CSS/text/color',
-            },
-            {
-              name: 'font-family',
-              url: '/pages/CSS/text/font-family',
-            },
-            {
-              name: 'font-size',
-              url: '/pages/CSS/text/font-size',
-            },
-            {
-              name: 'font-style',
-              url: '/pages/CSS/text/font-style',
-            },
-            {
-              name: 'font-weight',
-              url: '/pages/CSS/text/font-weight',
-            },
-            {
-              name: 'line-height',
-              url: '/pages/CSS/text/line-height',
-            },
-            {
-              name: 'text-align',
-              url: '/pages/CSS/text/text-align',
-            },
-            {
-              name: 'text-overflow',
-              url: '/pages/CSS/text/text-overflow',
-            },
-            {
-              name: 'text-decoration-line',
-              url: '/pages/CSS/text/text-decoration-line',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'animate',
-          name: '动画',
-          open: false,
-          pages: [
-            {
-              name: 'transition',
-              url: '/pages/CSS/transition/transition',
-            },
-            {
-              name: 'transform',
-              url: '/pages/CSS/transform/transform',
-            },
-          ] as Page[],
-        },
-      ] as ListItem[],
-      arrowUpIcon: '/static/icons/arrow-up.png',
-      arrowDownIcon: '/static/icons/arrow-down.png',
-      arrowRightIcon: '/static/icons/arrow-right.png',
-    }
-  },
-  methods: {
-    triggerCollapse(index?: number, item: ListItem) {
-      if (item.pages.length == 0) {
-        const page: Page = {
-          name: item.name,
-          enable: item.enable,
-          url: item.url,
-        }
-        this.goDetailPage(page)
-        return
-      }
-      for (var i = 0; i < this.list.length; ++i) {
-        if (index == i) {
-          this.list[i].open = !this.list[i].open
-        } else {
-          this.list[i].open = false
-        }
-      }
-    },
-    goDetailPage(e: Page) {
-      if (e.enable == false) {
-        uni.showToast({
-          icon: 'none',
-          title: '暂不支持',
-        })
-        return
-      }
-      const url = e.url != null ? e.url! : `/pages/CSS/${e.name}/${e.name}`
-      uni.navigateTo({
-        url,
-      })
-    },
-  },
-}
+	type Page = {
+		name : string
+		enable ?: boolean
+		url ?: string
+	}
+	type ListItem = {
+		id : string
+		name : string
+		open : boolean
+		pages : Page[]
+		url ?: string
+		enable ?: boolean
+	}
+	export default {
+		data() {
+			return {
+				list: [
+					{
+						id: 'background',
+						name: 'background',
+						open: false,
+						pages: [
+							{
+								name: 'background-color',
+								url: '/pages/CSS/background/background-color',
+							},
+							{
+								name: 'background-image',
+								url: '/pages/CSS/background/background-image',
+							},
+						] as Page[],
+					},
+					{
+						id: 'border',
+						name: 'border',
+						open: false,
+						pages: [
+							{
+								name: 'border',
+								url: '/pages/CSS/border/border',
+							},
+							{
+								name: 'border-width',
+								url: '/pages/CSS/border/border-width',
+							},
+							{
+								name: 'border-style',
+								url: '/pages/CSS/border/border-style',
+							},
+							{
+								name: 'border-color',
+								url: '/pages/CSS/border/border-color',
+							},
+							{
+								name: 'border-radius',
+								url: '/pages/CSS/border/border-radius',
+							},
+							{
+								name: 'border属性复合示例',
+								url: '/pages/CSS/border/complex-border/complex-border',
+							},
+						] as Page[],
+					},
+					{
+						id: 'box-shadow',
+						name: 'box-shadow',
+						open: false,
+						pages: [
+							{
+								name: 'box-shadow',
+								url: '/pages/CSS/box-shadow/box-shadow',
+							},
+						] as Page[],
+					},
+					{
+						id: 'flex',
+						name: 'flex',
+						open: false,
+						pages: [
+							{
+								name: 'align-content',
+								url: '/pages/CSS/flex/align-content',
+							},
+							{
+								name: 'align-items',
+								url: '/pages/CSS/flex/align-items',
+							},
+							{
+								name: 'flex-basis',
+								url: '/pages/CSS/flex/flex-basis',
+							},
+							{
+								name: 'flex-direction',
+								url: '/pages/CSS/flex/flex-direction',
+							},
+							{
+								name: 'flex-flow',
+								url: '/pages/CSS/flex/flex-flow',
+							},
+							{
+								name: 'flex-grow',
+								url: '/pages/CSS/flex/flex-grow',
+							},
+							{
+								name: 'flex-shrink',
+								url: '/pages/CSS/flex/flex-shrink',
+							},
+							{
+								name: 'flex',
+								url: '/pages/CSS/flex/flex',
+							},
+							{
+								name: 'justify-content',
+								url: '/pages/CSS/flex/justify-content',
+							},
+						] as Page[],
+					},
+					{
+						id: 'layout',
+						name: 'layout',
+						open: false,
+						pages: [
+							{
+								name: 'height',
+								url: '/pages/CSS/layout/height',
+							},
+							{
+								name: 'max-height',
+								url: '/pages/CSS/layout/max-height',
+							},
+							{
+								name: 'max-width',
+								url: '/pages/CSS/layout/max-width',
+							},
+							{
+								name: 'min-height',
+								url: '/pages/CSS/layout/min-height',
+							},
+							{
+								name: 'min-width',
+								url: '/pages/CSS/layout/min-width',
+							},
+							{
+								name: 'position',
+								url: '/pages/CSS/layout/position',
+							},
+							{
+								name: 'width',
+								url: '/pages/CSS/layout/width',
+							},
+							{
+								name: 'visibility',
+								url: '/pages/CSS/layout/visibility',
+							},
+						] as Page[],
+					},
+					{
+						id: 'margin',
+						name: 'margin',
+						open: false,
+						pages: [
+							{
+								name: 'margin-bottom',
+								url: '/pages/CSS/margin/margin-bottom',
+							},
+							{
+								name: 'margin-left',
+								url: '/pages/CSS/margin/margin-left',
+							},
+							{
+								name: 'margin-right',
+								url: '/pages/CSS/margin/margin-right',
+							},
+							{
+								name: 'margin-top',
+								url: '/pages/CSS/margin/margin-top',
+							},
+							{
+								name: 'margin',
+								url: '/pages/CSS/margin/margin',
+							},
+						] as Page[],
+					},
+					{
+						id: 'padding',
+						name: 'padding',
+						open: false,
+						pages: [
+							{
+								name: 'padding-bottom',
+								url: '/pages/CSS/padding/padding-bottom',
+							},
+							{
+								name: 'padding-left',
+								url: '/pages/CSS/padding/padding-left',
+							},
+							{
+								name: 'padding-right',
+								url: '/pages/CSS/padding/padding-right',
+							},
+							{
+								name: 'padding-top',
+								url: '/pages/CSS/padding/padding-top',
+							},
+							{
+								name: 'padding',
+								url: '/pages/CSS/padding/padding',
+							},
+						] as Page[],
+					},
+					{
+						id: 'text',
+						name: 'text',
+						open: false,
+						pages: [
+							{
+								name: 'color',
+								url: '/pages/CSS/text/color',
+							},
+							{
+								name: 'font-family',
+								url: '/pages/CSS/text/font-family',
+							},
+							{
+								name: 'font-size',
+								url: '/pages/CSS/text/font-size',
+							},
+							{
+								name: 'font-style',
+								url: '/pages/CSS/text/font-style',
+							},
+							{
+								name: 'font-weight',
+								url: '/pages/CSS/text/font-weight',
+							},
+							{
+								name: 'line-height',
+								url: '/pages/CSS/text/line-height',
+							},
+							{
+								name: 'text-align',
+								url: '/pages/CSS/text/text-align',
+							},
+							{
+								name: 'text-overflow',
+								url: '/pages/CSS/text/text-overflow',
+							},
+							{
+								name: 'text-decoration-line',
+								url: '/pages/CSS/text/text-decoration-line',
+							},
+						] as Page[],
+					},
+					{
+						id: 'animate',
+						name: '动画',
+						open: false,
+						pages: [
+							{
+								name: 'transition',
+								url: '/pages/CSS/transition/transition',
+							},
+							{
+								name: 'transform',
+								url: '/pages/CSS/transform/transform',
+							},
+						] as Page[],
+					},
+				] as ListItem[],
+				arrowUpIcon: '/static/icons/arrow-up.png',
+				arrowDownIcon: '/static/icons/arrow-down.png',
+				arrowRightIcon: '/static/icons/arrow-right.png',
+			}
+		},
+		methods: {
+			triggerCollapse(index ?: number, item : ListItem) {
+				if (item.pages.length == 0) {
+					const page : Page = {
+						name: item.name,
+						enable: item.enable,
+						url: item.url,
+					}
+					this.goDetailPage(page)
+					return
+				}
+				for (var i = 0; i < this.list.length; ++i) {
+					if (index == i) {
+						this.list[i].open = !this.list[i].open
+					} else {
+						this.list[i].open = false
+					}
+				}
+			},
+			goDetailPage(e : Page) {
+				if (e.enable == false) {
+					uni.showToast({
+						icon: 'none',
+						title: '暂不支持',
+					})
+					return
+				}
+				const url = e.url != null ? e.url! : `/pages/CSS/${e.name}/${e.name}`
+				uni.navigateTo({
+					url,
+				})
+			},
+		},
+	}
 </script>
 
 <style>
-@import '../../common/uni-uvue.css';
-</style>
+	@import '../../common/uni-uvue.css';
+	.item {
+		margin-bottom: 12px;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/tabBar/component.uvue b/pages/tabBar/component.uvue
index 56730bb9..cf133814 100644
--- a/pages/tabBar/component.uvue
+++ b/pages/tabBar/component.uvue
@@ -1,311 +1,314 @@
 <template>
-  <!-- #ifdef APP -->
-  <scroll-view style="flex: 1">
-    <!-- #endif -->
-    <view class="uni-container">
-      <view class="uni-header-logo">
-        <image
-          class="uni-header-image"
-          src="/static/componentIndex.png"
-        ></image>
-      </view>
-      <view class="uni-hello-text">
-        <text class="hello-text"
-          >uni-app内置组件，展示样式仅供参考，文档详见：</text
-        >
-        <u-link
-          :href="'https://uniapp.dcloud.io/component/'"
-          :text="'https://uniapp.dcloud.io/component/'"
-          :inWhiteList="true"
-        ></u-link>
-      </view>
-      <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
-        <view
-          class="uni-panel-h"
-          :class="item.open ? 'uni-panel-h-on' : ''"
-          @click="triggerCollapse(index, item)"
-        >
-          <text
-            class="uni-panel-text"
-            :class="item.enable == false ? 'text-disabled' : ''"
-            >{{ item.name }}</text
-          >
-          <image
-            :src="
+	<!-- #ifdef APP -->
+	<scroll-view style="flex: 1">
+		<!-- #endif -->
+		<view class="uni-container">
+			<view class="uni-header-logo">
+				<image class="uni-header-image" src="/static/componentIndex.png"></image>
+			</view>
+			<view class="uni-hello-text">
+				<text class="hello-text">uni-app内置组件，展示样式仅供参考，文档详见：</text>
+				<u-link :href="'https://uniapp.dcloud.io/component/'" :text="'https://uniapp.dcloud.io/component/'" :inWhiteList="true"></u-link>
+			</view>
+			<uni-collapse>
+				<template v-for="item in list" :key="item.id">
+					<uni-collapse-item :title="item.name" class="item">
+						<view class="uni-navigate-item" :hover-class="page.enable == false?'':'is--active'" v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
+							<text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
+							<image :src="arrowRightIcon" class="uni-icon"></image>
+						</view>
+					</uni-collapse-item>
+				</template>
+			</uni-collapse>
+			<!-- <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
+				<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)">
+					<text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{ item.name }}</text>
+					<image :src="
               item.pages.length > 0
                 ? item.open
                   ? arrowUpIcon
                   : arrowDownIcon
                 : arrowRightIcon
-            "
-            class="uni-icon"
-          ></image>
-        </view>
-        <view class="uni-panel-c" v-if="item.open">
-          <view
-            class="uni-navigate-item"
-            v-for="(page, key) in item.pages"
-            :key="key"
-            @click="goDetailPage(page)"
-          >
-            <text
-              class="uni-navigate-text"
-              :class="page.enable == false ? 'text-disabled' : ''"
-              >{{ page.name }}</text
-            >
-            <image :src="arrowRightIcon" class="uni-icon"></image>
-          </view>
-        </view>
-      </view>
-    </view>
-    <!-- #ifdef APP -->
-  </scroll-view>
-  <!-- #endif -->
+            " class="uni-icon"></image>
+				</view>
+				<view class="uni-panel-c" v-if="item.open">
+					<view class="uni-navigate-item" v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
+						<text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
+						<image :src="arrowRightIcon" class="uni-icon"></image>
+					</view>
+				</view>
+			</view> -->
+		</view>
+		<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
 </template>
 
 <script lang="ts">
-type Page = {
-  name: string
-  enable?: boolean
-  url?: string
-}
-type ListItem = {
-  id: string
-  name: string
-  open: boolean
-  pages: Page[]
-  url?: string
-  enable?: boolean
-}
-export default {
-  data() {
-    return {
-      list: [
-        {
-          id: 'view',
-          name: '视图容器',
-          open: false,
-          pages: [
-            {
-              name: 'view',
-            },
-            {
-              name: 'scroll-view',
-            },
-            {
-              name: 'swiper',
-            },
-            /*
-              {
-                name: 'movable-view',
-                enable: false
-              },
-              {
-                name: 'cover-view',
-                enable: false
-              },
-              */
-            {
-              name: 'list（新闻）',
-              url: '/pages/component/list-news/list',
-            },
-            {
-              name: 'list',
-              url: '/pages/component/long-list/long-list',
-            },
-            {
-              name: 'list-view-autotest',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'content',
-          name: '基础内容',
-          open: false,
-          pages: [
-            {
-              name: 'text',
-            },
-            {
-              name: 'rich-text',
-              enable: false,
-            },
-            {
-              name: 'progress',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'form',
-          name: '表单组件',
-          open: false,
-          pages: [
-            {
-              name: 'button',
-            },
-            {
-              name: 'checkbox',
-            },
-            /* {
-                name: 'form',
-                enable: false
-              }, */
-            {
-              name: 'input',
-              /* }, {
-                  name: 'label',
-                  enable: false
-                }, {
-                  name: 'picker',
-                  enable: false */
-            },
-            {
-              name: 'picker-view',
-            },
-            {
-              name: 'radio',
-            },
-            {
-              name: 'slider',
-            },
-            {
-              name: 'slider-100',
-            },
-            {
-              name: 'switch',
-            },
-            {
-              name: 'textarea',
-            },
-            /*
-              {
-                name: 'editor',
-                enable: false
-              },
-              */
-          ] as Page[],
-        },
-        {
-            id: 'nav',
-            name: '导航',
-            open: false,
-            pages: [{
-              name: 'navigator',
-              enable: true
-            }] as Page[],
-        },
-        {
-          id: 'media',
-          name: '媒体组件',
-          open: false,
-          pages: [
-            {
-              name: 'image',
-              enable: true,
-            },
-            {
-              name: 'video',
-              enable: true,
-            },
-            {
-              name: 'animation-view',
-              enable: false,
-            },
-          ] as Page[],
-        },
-        /*
-          {
-            id: 'map',
-            name: '地图',
-            open: false,
-            pages: [
-              {
-                name: 'map',
-                enable: false
-              }
-            ] as Page[]
-          },
-          {
-            id: 'canvas',
-            name: '画布',
-            open: false,
-            pages: [
-              {
-                name: 'canvas'
-              }
-            ] as Page[]
-          },
-          */
-        {
-          id: 'web-view',
-          name: '网页',
-          open: false,
-          pages: [
-            {
-              name: '网络网页',
-              enable: true,
-              url: '/pages/component/web-view/web-view',
-            },
-            {
-              name: '本地网页',
-              enable: true,
-              url: '/pages/component/web-view-local/web-view-local',
-            },
-          ] as Page[],
-        },
-        /*
-          {
-            id: 'ad',
-            url: 'ad',
-            name: 'AD组件',
-            enable: false,
-            open: false,
-            pages: [] as Page[]
-          }
-          */
-      ] as ListItem[],
-      arrowUpIcon: '/static/icons/arrow-up.png',
-      arrowDownIcon: '/static/icons/arrow-down.png',
-      arrowRightIcon: '/static/icons/arrow-right.png',
-    }
-  },
-  methods: {
-    triggerCollapse(index?: number, item: ListItem) {
-      if (item.pages.length == 0) {
-        const page: Page = {
-          name: item.name,
-          enable: item.enable,
-          url: item.url,
-        }
-        this.goDetailPage(page)
-        return
-      }
-      for (var i = 0; i < this.list.length; ++i) {
-        if (index == i) {
-          this.list[i].open = !this.list[i].open
-        } else {
-          this.list[i].open = false
-        }
-      }
-    },
-    goDetailPage(e: Page) {
-      if (e.enable == false) {
-        uni.showToast({
-          title: '暂不支持',
-          icon: 'none',
-        })
-        return
-      }
-      const url =
-        e.url != null ? e.url! : `/pages/component/${e.name}/${e.name}`
-      uni.navigateTo({
-        url,
-      })
-    },
-  },
-}
+	type Page = {
+		name : string
+		enable ?: boolean
+		url ?: string
+	}
+	type ListItem = {
+		id : string
+		name : string
+		open : boolean
+		pages : Page[]
+		url ?: string
+		enable ?: boolean
+	}
+	export default {
+		data() {
+			return {
+				list: [
+					{
+						id: 'view',
+						name: '视图容器',
+						open: false,
+						pages: [
+							{
+								name: 'view',
+							},
+							{
+								name: 'scroll-view',
+							},
+							{
+								name: 'swiper',
+							},
+							/*
+								{
+									name: 'movable-view',
+									enable: false
+								},
+								{
+									name: 'cover-view',
+									enable: false
+								},
+								*/
+							{
+								name: 'list（新闻）',
+								url: '/pages/component/list-news/list',
+							},
+							{
+								name: 'list',
+								url: '/pages/component/long-list/long-list',
+							},
+							{
+								name: 'list-view-autotest',
+							},
+						] as Page[],
+					},
+					{
+						id: 'content',
+						name: '基础内容',
+						open: false,
+						pages: [
+							{
+								name: 'text',
+							},
+							{
+								name: 'rich-text',
+								enable: false,
+							},
+							{
+								name: 'progress',
+							},
+						] as Page[],
+					},
+					{
+						id: 'form',
+						name: '表单组件',
+						open: false,
+						pages: [
+							{
+								name: 'button',
+							},
+							{
+								name: 'checkbox',
+							},
+							/* {
+									name: 'form',
+									enable: false
+								}, */
+							{
+								name: 'input',
+								/* }, {
+										name: 'label',
+										enable: false
+									}, {
+										name: 'picker',
+										enable: false */
+							},
+							{
+								name: 'picker-view',
+							},
+							{
+								name: 'radio',
+							},
+							{
+								name: 'slider',
+							},
+							{
+								name: 'slider-100',
+							},
+							{
+								name: 'switch',
+							},
+							{
+								name: 'textarea',
+							},
+							/*
+								{
+									name: 'editor',
+									enable: false
+								},
+								*/
+						] as Page[],
+					},
+					{
+						id: 'nav',
+						name: '导航',
+						open: false,
+						pages: [{
+							name: 'navigator',
+							enable: true
+						}] as Page[],
+					},
+					{
+						id: 'media',
+						name: '媒体组件',
+						open: false,
+						pages: [
+							{
+								name: 'image',
+								enable: true,
+							},
+							{
+								name: 'video',
+								enable: true,
+							},
+							{
+								name: 'animation-view',
+								enable: false,
+							},
+						] as Page[],
+					},
+					/*
+						{
+							id: 'map',
+							name: '地图',
+							open: false,
+							pages: [
+								{
+									name: 'map',
+									enable: false
+								}
+							] as Page[]
+						},
+						{
+							id: 'canvas',
+							name: '画布',
+							open: false,
+							pages: [
+								{
+									name: 'canvas'
+								}
+							] as Page[]
+						},
+						*/
+					{
+						id: 'web-view',
+						name: '网页',
+						open: false,
+						pages: [
+							{
+								name: '网络网页',
+								enable: true,
+								url: '/pages/component/web-view/web-view',
+							},
+							{
+								name: '本地网页',
+								enable: true,
+								url: '/pages/component/web-view-local/web-view-local',
+							},
+						] as Page[],
+					},
+					/*
+						{
+							id: 'ad',
+							url: 'ad',
+							name: 'AD组件',
+							enable: false,
+							open: false,
+							pages: [] as Page[]
+						}
+						*/
+					{
+						id: 'general-attr-event',
+						name: '通用属性和事件',
+						open: false,
+						pages: [
+							{
+								name: '通用属性',
+								url: 'general-attr',
+								enable: false,
+							},
+							{
+								name: '通用事件',
+								url: '/pages/component/general-event/general-event',
+								enable: true,
+							},
+						] as Page[],
+					},
+				] as ListItem[],
+				arrowUpIcon: '/static/icons/arrow-up.png',
+				arrowDownIcon: '/static/icons/arrow-down.png',
+				arrowRightIcon: '/static/icons/arrow-right.png',
+			}
+		},
+		methods: {
+			triggerCollapse(index ?: number, item : ListItem) {
+				if (item.pages.length == 0) {
+					const page : Page = {
+						name: item.name,
+						enable: item.enable,
+						url: item.url,
+					}
+					this.goDetailPage(page)
+					return
+				}
+				for (var i = 0; i < this.list.length; ++i) {
+					if (index == i) {
+						this.list[i].open = !this.list[i].open
+					} else {
+						this.list[i].open = false
+					}
+				}
+			},
+			goDetailPage(e : Page) {
+				if (e.enable == false) {
+					uni.showToast({
+						title: '暂不支持',
+						icon: 'none',
+					})
+					return
+				}
+				const url =
+					e.url != null ? e.url! : `/pages/component/${e.name}/${e.name}`
+				uni.navigateTo({
+					url,
+				})
+			},
+		},
+	}
 </script>
 
 <style>
-@import '../../common/uni-uvue.css';
-</style>
+	@import '../../common/uni-uvue.css';
+
+	.item {
+		margin-bottom: 12px;
+	}
+
+</style>
\ No newline at end of file
-- 
GitLab