From 8e917c1b619a65ac29d477dd6ba7884bd982a494 Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Fri, 2 Aug 2024 15:43:20 +0800
Subject: [PATCH] =?UTF-8?q?style(tabBar):=20=E4=BC=98=E5=8C=96=E6=8A=98?=
 =?UTF-8?q?=E5=8F=A0=E9=9D=A2=E6=9D=BF=E7=BC=A9=E8=BF=9B=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/tabBar/API.uvue       |  78 ++++++++++++++-------------
 pages/tabBar/CSS.uvue       | 102 ++++++++++++++++++------------------
 pages/tabBar/component.uvue |  98 +++++++++++++++++-----------------
 pages/tabBar/template.uvue  |   2 +-
 4 files changed, 144 insertions(+), 136 deletions(-)

diff --git a/pages/tabBar/API.uvue b/pages/tabBar/API.uvue
index c4f2d5a8..39a825f6 100644
--- a/pages/tabBar/API.uvue
+++ b/pages/tabBar/API.uvue
@@ -11,32 +11,36 @@
         <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 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" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{page.style["navigationBarTitleText"]}}</text>
-           <image :src="arrowRightIcon" class="uni-icon-size"></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">
-             <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">{{
-                   childPage.style["navigationBarTitleText"]
-                 }}</text>
-               <image :src="arrowRightIcon" class="uni-icon-size"></image>
-             </view>
-           </uni-collapse-item>
-         </uni-collapse>
-       </uni-collapse-item>
-     </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>
+      <uni-collapse>
+        <uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name"
+          class="item">
+          <view style='padding-left:18px;' 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" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{
+                page.style["navigationBarTitleText"]
+              }}</text>
+            <image :src="arrowRightIcon" class="uni-icon-size"></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;padding-left: 5px;padding-right: 5px;">
+              <view style='padding-left: 18px;' 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"
+                  :class="{'left-win-active': leftWinActive === childPage.path && hasLeftWin}">{{
+                    childPage.style["navigationBarTitleText"]
+                  }}</text>
+                <image :src="arrowRightIcon" class="uni-icon-size"></image>
+              </view>
+            </uni-collapse-item>
+          </uni-collapse>
+        </uni-collapse-item>
+      </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>
@@ -56,10 +60,10 @@
       }
     },
     computed: {
-      hasLeftWin():boolean{
+      hasLeftWin() : boolean {
         return !state.noMatchLeftWindow
       },
-      leftWinActive():string{
+      leftWinActive() : string {
         return state.leftWinActive.slice(1)
       }
     },
@@ -82,20 +86,20 @@
       }
     },
     // #ifdef WEB
-    watch:{
-    	$route: {
-    		immediate: true,
-    		handler(newRoute) {
-    			if (newRoute.matched.length) {
+    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
   }
@@ -122,4 +126,4 @@
     display: none;
     background-color: rgba(16, 16, 16, 0.5);
   }
-</style>
+</style>
diff --git a/pages/tabBar/CSS.uvue b/pages/tabBar/CSS.uvue
index 1179c56a..02bee0bb 100644
--- a/pages/tabBar/CSS.uvue
+++ b/pages/tabBar/CSS.uvue
@@ -11,28 +11,30 @@
         <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 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" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{
-                page.style["navigationBarTitleText"]
-              }}</text>
-            <image :src="arrowRightIcon" class="uni-icon-size"></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">
-              <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">{{
-                    childPage.style["navigationBarTitleText"]
-                  }}</text>
-                <image :src="arrowRightIcon" class="uni-icon-size"></image>
-              </view>
-            </uni-collapse-item>
-          </uni-collapse>
-        </uni-collapse-item>
+      <uni-collapse>
+        <uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name"
+          class="item">
+          <view style='padding-left:18px;' 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" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{
+                page.style["navigationBarTitleText"]
+              }}</text>
+            <image :src="arrowRightIcon" class="uni-icon-size"></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;padding-left: 5px;padding-right: 5px;">
+              <view style='padding-left: 18px;' 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"
+                  :class="{'left-win-active': leftWinActive === childPage.path && hasLeftWin}">{{
+                    childPage.style["navigationBarTitleText"]
+                  }}</text>
+                <image :src="arrowRightIcon" class="uni-icon-size"></image>
+              </view>
+            </uni-collapse-item>
+          </uni-collapse>
+        </uni-collapse-item>
       </uni-collapse>
     </view>
   <!-- #ifdef APP -->
@@ -41,9 +43,9 @@
 </template>
 
 <script lang="uts">
-  import { generateMenu } from './generateMenu.uts'
-  import { MenuItem } from './generateMenu.uts'
-  const menu = generateMenu('pages/CSS')
+  import { generateMenu } from './generateMenu.uts'
+  import { MenuItem } from './generateMenu.uts'
+  const menu = generateMenu('pages/CSS')
   import { state } from '@/store/index.uts'
   export default {
     data() {
@@ -51,36 +53,36 @@
         menu: menu as (MenuItem | null)[],
         arrowRightIcon: '/static/icons/arrow-right.png',
       }
-    },
-    computed: {
-      hasLeftWin():boolean{
-        return !state.noMatchLeftWindow
-      },
-      leftWinActive():string{
-        return state.leftWinActive.slice(1)
-      }
+    },
+    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)
-              })
-            }
-    			}
-    		}
-    	}
-    },
+    },
+    // #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 dc1a6cba..b4512900 100644
--- a/pages/tabBar/component.uvue
+++ b/pages/tabBar/component.uvue
@@ -11,28 +11,30 @@
         <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 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" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{
-                page.style["navigationBarTitleText"]
-              }}</text>
-            <image :src="arrowRightIcon" class="uni-icon-size"></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">
-              <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" :class="{'left-win-active': leftWinActive === childPage.path && hasLeftWin}">{{
-                    childPage.style["navigationBarTitleText"]
-                  }}</text>
-                <image :src="arrowRightIcon" class="uni-icon-size"></image>
-              </view>
-            </uni-collapse-item>
-          </uni-collapse>
-        </uni-collapse-item>
+      <uni-collapse>
+        <uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name"
+          class="item">
+          <view style='padding-left:18px;' 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" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{
+                page.style["navigationBarTitleText"]
+              }}</text>
+            <image :src="arrowRightIcon" class="uni-icon-size"></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;padding-left: 5px;padding-right: 5px;">
+              <view style='padding-left: 18px;' 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"
+                  :class="{'left-win-active': leftWinActive === childPage.path && hasLeftWin}">{{
+                    childPage.style["navigationBarTitleText"]
+                  }}</text>
+                <image :src="arrowRightIcon" class="uni-icon-size"></image>
+              </view>
+            </uni-collapse-item>
+          </uni-collapse>
+        </uni-collapse-item>
       </uni-collapse>
 
       <!-- #ifdef UNI-APP-X && APP -->
@@ -59,15 +61,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)
-      }
-    },
+    },
+    computed: {
+      hasLeftWin() : boolean {
+        return !state.noMatchLeftWindow
+      },
+      leftWinActive() : string {
+        return state.leftWinActive.slice(1)
+      }
+    },
     methods: {
       goPage(url : string) {
         uni.navigateTo({ url })
@@ -84,23 +86,23 @@
         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)
-              })
-            }
-    			}
-    		}
-    	}
-    },
+    },
+    // #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
diff --git a/pages/tabBar/template.uvue b/pages/tabBar/template.uvue
index d856df0e..422f1759 100644
--- a/pages/tabBar/template.uvue
+++ b/pages/tabBar/template.uvue
@@ -23,7 +23,7 @@
           </image>
         </view>
         <view v-if="item.open">
-          <view class="uni-navigate-item" :hover-class="page.enable == false ? '' : 'is--active'"
+          <view style="padding-left: 18px;" 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="{'left-win-active': leftWinActive === page.url  && hasLeftWin,'text-disabled' : page.enable == false}">{{ page.name }}</text>
             <image :src="arrowRightIcon" class="uni-icon-size"></image>
-- 
GitLab