diff --git a/App.uvue b/App.uvue
index 8de34e7e1cac8f916da6dbc67046305ff3c31fad..63e9f45b16319b056b5e3173ae40b09717784278 100644
--- a/App.uvue
+++ b/App.uvue
@@ -83,4 +83,12 @@
 <style>
   /*每个页面公共css */
   @import "./common/uni.css";
+  /* #ifdef WEB */
+  .uni-top-window uni-tabbar .uni-tabbar {
+  	background-color: #fff !important;
+  }
+  .uni-app--showleftwindow .uni-page-head-btn {
+  	display: none !important;
+  }
+  /* #endif */
 </style>
diff --git a/common/uni.css b/common/uni.css
index 3de6b336ffe226a9ed76440450ca197d347358c7..131efc2607c9ad65ebb69a7688ee5a6920821c44 100644
--- a/common/uni.css
+++ b/common/uni.css
@@ -123,7 +123,7 @@
 
 .uni-bg-blue {
   background: #007AFF;
-}
+}
 
 .uni-btn-v {
   padding: 5px 0;
@@ -189,7 +189,7 @@
 }
 
 .text-disabled {
-  color: #a0a0a0;
+  color: #a0a0a0!important;
 }
 
 
@@ -244,6 +244,11 @@
   color: #000000;
   font-size: 14px;
   font-weight: normal;
+}
+
+/* left-windows */
+.left-win-active {
+  color: #007AFF!important;
 }
 
 /* --tab-bar-end-- */
diff --git a/pages.json b/pages.json
index 9d6d6a3e98a99e65c01d55bd9bbf50c524c2e7d6..36087128cf98f237645fc3849841ae0f21b0a20b 100644
--- a/pages.json
+++ b/pages.json
@@ -1,4 +1,16 @@
 {
+  "leftWindow": {
+  	"path": "windows/left-window.uvue",
+  	"style": {
+  		"width": "350px"
+  	}
+  },
+  "topWindow": {
+  	"path": "windows/top-window.uvue",
+  	"style": {
+  		"height": "60px"
+  	}
+  },
 	"pages": [
 		{
 			"path": "pages/tabBar/component",
diff --git a/pages/tabBar/API.uvue b/pages/tabBar/API.uvue
index 116cd43bdf661913a93295b5a1fdae2a63043bec..90fa1b07f10bb3528e96ed0ebf72922fb8bf5cb6 100644
--- a/pages/tabBar/API.uvue
+++ b/pages/tabBar/API.uvue
@@ -3,23 +3,21 @@
   <scroll-view style="flex: 1; background-color: #f8f8f8" enable-back-to-top="true">
   <!-- #endif -->
     <view class="uni-container">
-      <view class="uni-header-logo">
+      <view v-if="!hasLeftWin" class="uni-header-logo">
         <image class="uni-header-image" src="/static/apiIndex.png"></image>
       </view>
-      <view class="uni-text-box">
+      <view v-if="!hasLeftWin" class="uni-text-box">
         <text class="hello-text">以下将演示uni-app接口能力，详细文档见：</text>
         <u-link :href="'https://uniapp.dcloud.io/uni-app-x/api/'" :text="'https://uniapp.dcloud.io/uni-app-x/api/'"
           :inWhiteList="true"></u-link>
       </view>
      <uni-collapse>
-       <uni-collapse-item v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name"
+       <uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name"
          class="item">
-         <view v-for="page in menuItem.pages" :key="page!.path" class="uni-navigate-item" hover-class="is--active"
+         <view v-for="page in menuItem.pages" :key="page!.path" class="uni-navigate-item"  hover-class="is--active"
            @click="goPage(`/${page.path}`)">
-           <text class="uni-navigate-text">{{
-               page.style["navigationBarTitleText"]
-             }}</text>
-           <image :src="arrowRightIcon" class="uni-icon-size"></image>
+           <text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{page.style["navigationBarTitleText"]}}</text>
+           <image :src="arrowRightIcon" class="uni-icon-size" style="color: #898fdd;"></image>
          </view>
          <uni-collapse style="width: 100%" v-for="childMenu in menuItem.children" :key="childMenu!.id">
            <uni-collapse-item :title="childMenu.name" class="item" style="margin-bottom: 0">
@@ -33,28 +31,37 @@
            </uni-collapse-item>
          </uni-collapse>
        </uni-collapse-item>
-     </uni-collapse>
+     </uni-collapse>
+     <view v-if="!hasLeftWin" ref="pop" @click="hidePop()" class="popup">
+       <view style="width: 90%; background-color: white" @click="stopClickPop">
+         <api-set-tabbar></api-set-tabbar>
+       </view>
+     </view>
     </view>
   <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
-  <view ref="pop" @click="hidePop()" class="popup">
-    <view style="width: 90%; background-color: white" @click="stopClickPop">
-      <api-set-tabbar></api-set-tabbar>
-    </view>
-  </view>
 </template>
 
 <script lang="uts">
   import { generateMenu } from './generateMenu.uts'
   import { MenuItem } from './generateMenu.uts'
-  const menu = generateMenu('pages/API')
+  const menu = generateMenu('pages/API')
+  import { state } from '@/store/index.uts'
   export default {
     data() {
       return {
         menu: menu as (MenuItem | null)[],
         arrowRightIcon: '/static/icons/arrow-right.png',
       }
+    },
+    computed: {
+      hasLeftWin():boolean{
+        return !state.noMatchLeftWindow
+      },
+      leftWinActive():string{
+        return state.leftWinActive.slice(1)
+      }
     },
     methods: {
       goPage(url : string) {
@@ -73,7 +80,24 @@
       stopClickPop: function (e : PointerEvent) {
         e.stopPropagation() //点击到pop的非灰色区域，拦截点击事件
       }
-    },
+    },
+    // #ifdef WEB
+    watch:{
+    	$route: {
+    		immediate: true,
+    		handler(newRoute) {
+    			if (newRoute.matched.length) {
+            const activeCategoryIndex = this.menu.findIndex(menuItem => menuItem?.pages.some(page => this.leftWinActive && this.leftWinActive === page?.path))
+            if (activeCategoryIndex > -1) {
+              this.$nextTick(() => {
+                ((this.$refs.category as ComponentPublicInstance[])[activeCategoryIndex])?.$callMethod('openCollapse', true)
+              })
+            }
+    			}
+    		}
+    	}
+    },
+    // #endif
   }
 </script>
 
diff --git a/pages/tabBar/CSS.uvue b/pages/tabBar/CSS.uvue
index 2577cc0dfd92ae158bbc2c2531ed33b3c4720545..1179c56a31f56415a62639eeab6e24eda113de0c 100644
--- a/pages/tabBar/CSS.uvue
+++ b/pages/tabBar/CSS.uvue
@@ -3,20 +3,20 @@
   <scroll-view style="flex: 1; background-color: #f8f8f8" enable-back-to-top="true">
   <!-- #endif -->
     <view class="uni-container">
-      <view class="uni-header-logo">
+      <view v-if="!hasLeftWin" class="uni-header-logo">
         <image class="uni-header-image" src="/static/cssIndex.png"></image>
       </view>
-      <view class="uni-text-box">
+      <view v-if="!hasLeftWin" class="uni-text-box">
         <text class="hello-text">uni-app x目前已支持的CSS属性，展示样式仅供参考，文档详见：</text>
         <u-link :href="'https://uniapp.dcloud.io/uni-app-x/css/'" :text="'https://uniapp.dcloud.io/uni-app-x/css/'"
           :inWhiteList="true"></u-link>
       </view>
       <uni-collapse>
-        <uni-collapse-item v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name"
+        <uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name"
           class="item">
           <view v-for="page in menuItem.pages" :key="page!.path" class="uni-navigate-item" hover-class="is--active"
             @click="goPage(`/${page.path}`)">
-            <text class="uni-navigate-text">{{
+            <text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{
                 page.style["navigationBarTitleText"]
               }}</text>
             <image :src="arrowRightIcon" class="uni-icon-size"></image>
@@ -43,19 +43,45 @@
 <script lang="uts">
   import { generateMenu } from './generateMenu.uts'
   import { MenuItem } from './generateMenu.uts'
-  const menu = generateMenu('pages/CSS')
+  const menu = generateMenu('pages/CSS')
+  import { state } from '@/store/index.uts'
   export default {
     data() {
       return {
         menu: menu as (MenuItem | null)[],
         arrowRightIcon: '/static/icons/arrow-right.png',
       }
+    },
+    computed: {
+      hasLeftWin():boolean{
+        return !state.noMatchLeftWindow
+      },
+      leftWinActive():string{
+        return state.leftWinActive.slice(1)
+      }
     },
     methods: {
       goPage(url : string) {
         uni.navigateTo({ url })
       },
-    },
+    },
+    // #ifdef WEB
+    watch:{
+    	$route: {
+    		immediate: true,
+    		handler(newRoute) {
+    			if (newRoute.matched.length) {
+            const activeCategoryIndex = this.menu.findIndex(menuItem => menuItem?.pages.some(page => this.leftWinActive && this.leftWinActive === page?.path))
+            if (activeCategoryIndex > -1) {
+              this.$nextTick(() => {
+               ((this.$refs.category as ComponentPublicInstance[])[activeCategoryIndex]).$callMethod('openCollapse', true)
+              })
+            }
+    			}
+    		}
+    	}
+    },
+    // #endif
   }
 </script>
 
diff --git a/pages/tabBar/component.uvue b/pages/tabBar/component.uvue
index e733d859ab3465b45f669baf6eb23c93040695c6..dc1a6cbac724041827dca0fabb0d18db979c6e5f 100644
--- a/pages/tabBar/component.uvue
+++ b/pages/tabBar/component.uvue
@@ -3,20 +3,20 @@
   <scroll-view style="flex: 1; background-color: #f8f8f8" enable-back-to-top="true">
   <!-- #endif -->
     <view class="uni-container">
-      <view class="uni-header-logo">
+      <view v-if="!hasLeftWin" class="uni-header-logo">
         <image class="uni-header-image" src="/static/componentIndex.png"></image>
       </view>
-      <view class="uni-text-box">
+      <view v-if="!hasLeftWin" class="uni-text-box">
         <text class="hello-text">uni-app内置组件，展示样式仅供参考，文档详见：</text>
         <u-link :href="'https://uniapp.dcloud.io/uni-app-x/component/'"
           :text="'https://uniapp.dcloud.io/uni-app-x/component/'" :inWhiteList="true"></u-link>
       </view>
       <uni-collapse>
-        <uni-collapse-item v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name"
+        <uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name"
           class="item">
           <view v-for="page in menuItem.pages" :key="page!.path" class="uni-navigate-item" hover-class="is--active"
             @click="goPage(`/${page.path}`)">
-            <text class="uni-navigate-text">{{
+            <text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{
                 page.style["navigationBarTitleText"]
               }}</text>
             <image :src="arrowRightIcon" class="uni-icon-size"></image>
@@ -25,7 +25,7 @@
             <uni-collapse-item :title="childMenu.name" class="item" style="margin-bottom: 0">
               <view class="uni-navigate-item" hover-class="is--active" v-for="childPage in childMenu.pages"
                 :key="childPage!.path" @click="goPage(`/${childPage.path}`)">
-                <text class="uni-navigate-text">{{
+                <text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === childPage.path && hasLeftWin}">{{
                     childPage.style["navigationBarTitleText"]
                   }}</text>
                 <image :src="arrowRightIcon" class="uni-icon-size"></image>
@@ -51,7 +51,7 @@
   // #ifdef UNI-APP-X && APP
   import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update'
   // #endif
-
+  import { state } from '@/store/index.uts'
   export default {
     data() {
       return {
@@ -59,7 +59,15 @@
         arrowRightIcon: '/static/icons/arrow-right.png' as string.ImageURIString,
         pageHiden: false
       }
-    },
+    },
+    computed: {
+      hasLeftWin():boolean{
+        return !state.noMatchLeftWindow
+      },
+      leftWinActive():string{
+        return state.leftWinActive.slice(1)
+      }
+    },
     methods: {
       goPage(url : string) {
         uni.navigateTo({ url })
@@ -76,7 +84,24 @@
         uni.showTabBar()?.catch(_ => { })
       }
       // #endif
-    },
+    },
+    // #ifdef WEB
+    watch:{
+    	$route: {
+    		immediate: true,
+    		handler(newRoute) {
+    			if (newRoute.matched.length) {
+            const activeCategoryIndex = this.menu.findIndex(menuItem => menuItem?.pages.some(page => this.leftWinActive && this.leftWinActive === page?.path))
+            if (activeCategoryIndex > -1) {
+              this.$nextTick(() => {
+                ((this.$refs.category as ComponentPublicInstance[])[activeCategoryIndex])?.$callMethod('openCollapse', true)
+              })
+            }
+    			}
+    		}
+    	}
+    },
+    // #endif
     onReady() {
       // #ifdef UNI-APP-X && APP
       checkUpdate(this.$refs['upgradePopup'] as UniUpgradeCenterAppComponentPublicInstance)
diff --git a/pages/tabBar/generateMenu.uts b/pages/tabBar/generateMenu.uts
index a7c8a052fb0473b7feaa6ab49a2726b94795f509..3b425532784d782d8102c19e4dd0d64d03db0f68 100644
--- a/pages/tabBar/generateMenu.uts
+++ b/pages/tabBar/generateMenu.uts
@@ -1,5 +1,5 @@
 import { pages, groups } from '@/pages.json'
-
+import { state } from '@/store/index.uts'
 type Group = {
   id : string,
   name : string,
@@ -141,7 +141,7 @@ function removeNullItem(arr : (MenuItem | null)[]) : (MenuItem | null)[] {
 
 function addSetTabBarPage(menuItem : MenuItem) {
   const { id, name } = menuItem
-  if (id == 'page' && name == '页面和路由') {
+  if (id == 'page' && name == '页面和路由' && !state.noMatchLeftWindow) {
     menuItem.pages.push({
       path: 'set-tab-bar',
       style: {
diff --git a/pages/tabBar/template.uvue b/pages/tabBar/template.uvue
index 7d98eee7dbcdb91d662da3d7d18cca66c0b712f4..81b845e44706f48a89fb711d873398bd213a8a4c 100644
--- a/pages/tabBar/template.uvue
+++ b/pages/tabBar/template.uvue
@@ -3,16 +3,16 @@
   <scroll-view style="flex: 1; background-color: #f8f8f8" enable-back-to-top="true">
   <!-- #endif -->
     <view class="uni-container">
-      <view class="uni-header-logo">
+      <view v-if="!hasLeftWin" class="uni-header-logo">
         <image class="uni-header-image" src="/static/templateIndex.png"></image>
       </view>
-      <view class="uni-text-box">
+      <view v-if="!hasLeftWin" class="uni-text-box">
         <text class="hello-text">以下是部分模板示例，更多模板见插件市场：</text>
         <u-link href="https://ext.dcloud.net.cn" :text="'https://ext.dcloud.net.cn'" :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>
+        <view class="uni-panel-h" @click="triggerCollapse(index, item)">
+          <text class="uni-panel-text" :class="item.enable == false || item.open == true ? 'text-disabled' : '',item.url == leftWinActive && item.pages.length == 0 ? 'left-win-active' : ''">{{ item.name }}</text>
           <image :src="
               item.pages.length > 0
                 ? item.open
@@ -25,7 +25,7 @@
         <view v-if="item.open">
           <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>
+            <text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === page.url  && hasLeftWin,'text-disabled' : page.enable == false}">{{ page.name }}</text>
             <image :src="arrowRightIcon" class="uni-icon-size"></image>
           </view>
         </view>
@@ -50,7 +50,8 @@
     pages : Page[]
     url ?: string
     enable ?: boolean
-  }
+  }
+  import { state } from '@/store/index.uts'
   export default {
     data() {
       return {
@@ -231,6 +232,14 @@
         arrowDownIcon: '/static/icons/arrow-down.png',
         arrowRightIcon: '/static/icons/arrow-right.png',
       }
+    },
+    computed: {
+      hasLeftWin():boolean{
+        return !state.noMatchLeftWindow
+      },
+      leftWinActive():string{
+        return state.leftWinActive.split('/')[3]
+      }
     },
     methods: {
       triggerCollapse(index : number, item : ListItem) {
@@ -267,6 +276,27 @@
           url,
         })
       },
-    },
+    },
+    // #ifdef WEB
+    watch: {
+    	$route: {
+    		immediate: true,
+    		handler(newRoute) {
+    			if (newRoute.matched.length) {
+    				let path = newRoute.path.split('/')[3]
+    				for (const item of this.list) {
+    					if (Array.isArray(item.pages)) {
+    						for (const page of item.pages) {
+    							if (page.url && page.url === path) {
+    								item.open = true
+    							}
+    						}
+    					}
+    				}
+    			}
+    		}
+    	}
+    },
+    // #endif
   }
 </script>
diff --git a/static/logo.png b/static/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..b5771e209bb677e2ebd5ff766ad5ee11790f305a
Binary files /dev/null and b/static/logo.png differ
diff --git a/store/index.uts b/store/index.uts
index b6dda9cf9fbbfad1ec81c076a64c7433288be81e..f5e10a141cebb72350cfff6773ef9927535d4040 100644
--- a/store/index.uts
+++ b/store/index.uts
@@ -15,14 +15,22 @@ type State = {
   // 设备像素比
   devicePixelRatio : number
   // 事件判断回调
-  eventCallbackNum: number
+  eventCallbackNum: number
+  // 是否匹配左侧窗口
+  noMatchLeftWindow:boolean
+  // 当前激活的tab页
+  active: string
+  leftWinActive:string
 }
 
 export const state = reactive({
   lifeCycleNum: 0,
   statusBarHeight: 0,
   devicePixelRatio: 1,
-  eventCallbackNum: 0,
+  eventCallbackNum: 0,
+  noMatchLeftWindow: true,
+  active: 'componentPage',
+  leftWinActive: '/pages/component/public-properties/public-properties',
   safeArea: {
     top: 0,
     right: 0,
@@ -53,3 +61,15 @@ export const setDevicePixelRatio = (devicePixelRatio : number) => {
   state.devicePixelRatio = devicePixelRatio
 }
 
+export const setMatchLeftWindow = (matchLeftWindow:boolean) => {
+  state.noMatchLeftWindow = !matchLeftWindow
+}
+
+export const setActive = (tabPage:string) => {
+  state.active = tabPage
+}
+
+export const setLeftWinActive = (leftWinActive:string) => {
+  state.leftWinActive = leftWinActive
+}
+
diff --git a/windows/left-window.uvue b/windows/left-window.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..d96e8c6fa7aeee9728d3fdde38e9df56705c586c
--- /dev/null
+++ b/windows/left-window.uvue
@@ -0,0 +1,140 @@
+<template>
+	<view class="left-window-style">
+		<view class="second-menu">
+			<keep-alive>
+        <component :is="active" :hasLeftWin="hasLeftWin" :leftWinActive="leftWinActive"></component>
+			</keep-alive>
+		</view>
+	</view>
+</template>
+
+<script lang="uts">
+	import componentPage from '@/pages/tabBar/component.uvue'
+	import API from '@/pages/tabBar/API.uvue'
+	import CSS from '@/pages/tabBar/CSS.uvue'
+	import templatePage from '@/pages/tabBar/template.uvue'
+  import { state, setMatchLeftWindow, setActive, setLeftWinActive } from '@/store/index.uts'
+	let isPcObserver, isPhoneObserver
+	export default {
+		data() {
+			return {
+				nav: [
+					'component',
+					'API',
+					'CSS',
+					'template'
+				],
+				isPC: false
+			}
+		},
+		components: {
+			componentPage,
+			API,
+			CSS,
+			templatePage
+		},
+		computed: {
+      active(){
+        return state.active
+      },
+      hasLeftWin(){
+        return !state.noMatchLeftWindow
+      },
+      leftWinActive(){
+        return state.leftWinActive.split('/')[3]
+      }
+		},
+		mounted() {
+			isPcObserver = uni.createMediaQueryObserver(this)
+			isPhoneObserver = uni.createMediaQueryObserver(this)
+			isPcObserver.observe({
+				minWidth: 768
+			}, matched => {
+				this.isPC = matched
+				const pageUrl = this.$route.path
+				if (!pageUrl) return
+				const pageName = this.$route.path.split('/')[4]
+        if(pageUrl === '/'){
+          uni.reLaunch({
+          	url: "/pages/component/public-properties/public-properties"
+          })
+        }else{
+          uni.reLaunch({
+          	url: pageUrl
+          })
+        }
+			})
+			isPhoneObserver.observe({
+				maxWidth: 767
+			}, matched => {
+				this.isPC = !matched
+				if (matched) {
+					const pageUrl = this.$route.path
+					const tabbarName = this.$route.path.split('/')[2]
+					const tabbarUrl = tabbarName && (tabbarName === 'component' ? '/' : `/pages/tabBar/${tabbarName}`)
+					uni.switchTab({
+						url: tabbarUrl,
+						success(e) {
+							uni.navigateTo({
+								url: pageUrl
+							})
+						}
+					})
+				}
+			})
+		},
+		unmounted() {
+			isPcObserver.disconnect()
+			isPhoneObserver.disconnect()
+		},
+		watch: {
+			isPC: {
+				immediate: true,
+				handler(newMatches:boolean) {
+					setMatchLeftWindow(newMatches)
+				}
+			},
+			$route(newRoute) {
+				this.handlerRoute(newRoute)
+			}
+		},
+		methods: {
+			handlerRoute(newRoute) {
+				if (this.isPC) {
+					if (newRoute.path === '/') {
+						uni.redirectTo({
+							url: '/pages/component/public-properties/public-properties'
+						})
+					} else if (!newRoute.matched.length) {
+						uni.redirectTo({
+							url: '/pages/error/404'
+						})
+					} else {
+						setLeftWinActive(newRoute.path)
+						let active = newRoute.path.split('/')[2]
+						if (this.nav.includes(active)) {
+							if (active === 'component') {
+								active = 'componentPage'
+							}
+							if (active === 'template') {
+								active = 'templatePage'
+							}
+							setActive(active)
+						}
+					}
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+	.left-window-style {
+		min-height: calc(100vh - var(--top-window-height));
+		background-color: #f8f8f8;
+	}
+	.second-menu {
+		width: 350px;
+		background-color: #F8F8F8;
+	}
+</style>
diff --git a/windows/top-window.uvue b/windows/top-window.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..9e3f78ac8d41207991ceb919341efee2753c5709
--- /dev/null
+++ b/windows/top-window.uvue
@@ -0,0 +1,109 @@
+<template>
+	<view class="top-window-header">
+    <view class="left-header">
+    	<navigator class="left-header" open-type="reLaunch" url="/pages/component/public-properties/public-properties">
+    		<image src="/static/logo.png" class="logo" mode="heightFix"></image>
+    		<text>hello uni-app</text>
+    	</navigator>
+    </view>
+    <custom-tab-bar class="tab-bar-flex" direction="horizontal" :show-icon="false" :selected="current"
+    	@onTabItemTap="toSecondMenu" />
+	</view>
+</template>
+
+<script lang="uts">
+  type IndexPageItem = {
+  	tabBar: string ;
+  	index: string ;
+  }
+	export default {
+		data() {
+			return {
+        selected: {
+        	component: 0,
+        	API: 1,
+        	CSS: 2,
+        	template: 3
+        },
+        current: 0,
+        indexPage: [{
+        	tabBar: '/pages/tabBar/component',
+        	index: '/pages/component/public-properties/public-properties'
+        }, {
+        	tabBar: '/pages/tabBar/API',
+        	index: '/pages/API/get-app/get-app'
+        }, {
+        	tabBar: '/pages/tabBar/CSS',
+        	index: '/pages/CSS/layout/width'
+        }, {
+        	tabBar: '/pages/tabBar/template',
+        	index: '/pages/template/long-list/long-list'
+        }] as IndexPageItem[]
+			}
+		},
+    watch: {
+    	$route: {
+    		immediate: true,
+    		handler(newRoute) {
+    			const width = uni.getSystemInfoSync().screenWidth
+    			if (width >= 768) {
+    				let path = newRoute.path
+    				let comp
+    				if (path === '/') {
+    					comp = 'component'
+    					path = '/pages/component/public-properties/public-properties'
+    				} else {
+    					comp = path.split('/')[2]
+    				}
+    				this.current = this.selected[comp]
+    				for (const item of this.indexPage) {
+    					if (path === item.tabBar) {
+    						uni.redirectTo({
+    							url: item.index
+    						})
+    					}
+    				}
+    			}
+    		}
+    	}
+    },
+		methods: {
+      toSecondMenu(e) {
+      	const activeTabBar = '/' + e.pagePath
+      	for (const item of this.indexPage) {
+      		if (activeTabBar === item.tabBar) {
+      			uni.redirectTo({
+      				url: item.index
+      			})
+      		}
+      	}
+      }
+		}
+	}
+</script>
+
+<style>
+	.top-window-header {
+		height: 60px;
+		padding: 0 15px;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		box-sizing: border-box;
+		border-bottom: 1px solid #e1e1e1;
+		background-color: #FFFFFF;
+	}
+	.left-header {
+		flex-direction: row;
+		align-items: center;
+		flex: 1;
+	}
+	.logo{
+		height: 30px;
+		width: 30px;
+    margin-right: 8px;
+	}
+	.tab-bar-flex {
+		width: 360px;
+	}
+</style>