refactor: 修改tab-bar组件，修改规范

src/App.vue

@@ -1,3 +1,7 @@
 <script setup lang="ts">
 onLaunch(() => {})
 </script>
+
+<template>
+  <TabBar />
+</template>

src/components.d.ts

@@ -7,9 +7,6 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    AppFooter: typeof import('./components/AppFooter.vue')['default']
-    AppLogos: typeof import('./components/AppLogos.vue')['default']
-    HiCounter: typeof import('./components/HiCounter.vue')['default']
-    InputEntry: typeof import('./components/InputEntry.vue')['default']
+    TabBar: typeof import('./components/TabBar.vue')['default']
   }
 }

src/components/TabBar.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import home from '@/static/image/tab-bar/home.png'
+import homeSelect from '@/static/image/tab-bar/home-select.png'
+import manual from '@/static/image/tab-bar/manual.png'
+import manualSelect from '@/static/image/tab-bar/manual-select.png'
+import my from '@/static/image/tab-bar/me.png'
+import mySelect from '@/static/image/tab-bar/me-select.png'
+import plan from '@/static/image/tab-bar/plan.png'
+import planSelect from '@/static/image/tab-bar/plan-select.png'
+
+interface BottomItem {
+  name: string
+  icon: string
+  iconSelect: string
+  url: string
+}
+
+const tabList: Ref<BottomItem[]> = ref([
+  { name: '首页', icon: home, iconSelect: homeSelect, url: 'pages/home/index' },
+  { name: '喂养计划', icon: plan, iconSelect: planSelect, url: 'pages/feed-plan/index' },
+  { name: '养宠手册', icon: manual, iconSelect: manualSelect, url: 'pages/pet-manual/index' },
+  { name: '我的', icon: my, iconSelect: mySelect, url: 'pages/me/index' },
+])
+
+function handleTap(item: BottomItem) {
+  uni.reLaunch({ url: `/${item.url}` })
+}
+
+function getCurrentPageUrl() {
+  const pages = getCurrentPages() // Get the current pages stack
+  const currentPage = pages[pages.length - 1] // Get the current page
+  return currentPage.route // Return the route of the current page
+}
+
+const selectedIndex = computed(() => {
+  return tabList.value.findIndex(item => item.url === getCurrentPageUrl())
+})
+</script>
+
+<template>
+  <view class="w-full p-2 fixed bottom-0 left-0 safe-area">
+    <view class="w-full flex gap-2">
+      <view v-for="(item, index) in tabList" :key="index" class="flex flex-col items-center justify-center w-1/4" @tap="handleTap(item)">
+        <image :src="selectedIndex === index ? item.iconSelect : item.icon" class="w-8 h-8" />
+        <text
+          class="text-3 mt-1"
+          :class="selectedIndex === index ? 'text-primary' : 'text-default'"
+        >
+          {{ item.name }}
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.safe-area{
+  padding-bottom: env(safe-area-inset-bottom);
+}
+</style>

src/components/tabbar/index.vue

@@ -1,74 +0,0 @@
-<script setup lang="ts">
-import type { Ref } from 'vue'
-import home from '@/static/image/tabbar/home.png'
-import home_select from '@/static/image/tabbar/home-select.png'
-import manual from '@/static/image/tabbar/manual.png'
-import manual_select from '@/static/image/tabbar/manual-select.png'
-import my from '@/static/image/tabbar/my.png'
-import my_select from '@/static/image/tabbar/my-select.png'
-import plan from '@/static/image/tabbar/plan.png'
-import plan_select from '@/static/image/tabbar/plan-select.png'
-
-const props = defineProps<{
-  page: number
-}>()
-interface BottomItem {
-  name: string
-  icon: any
-  icon_select: any
-  isSelected: boolean
-  url: string
-}
-
-const bottomList: Ref<BottomItem[]> = ref([
-  { name: '首页', icon: home, icon_select: home_select, isSelected: true, url: '' },
-  { name: '喂养计划', icon: plan, icon_select: plan_select, isSelected: false, url: '' },
-  { name: '养宠手册', icon: manual, icon_select: manual_select, isSelected: false, url: '' },
-  { name: '我的', icon: my, icon_select: my_select, isSelected: false, url: '' },
-])
-
-function handleBottom(item: BottomItem) {
-  // eslint-disable-next-line style/max-statements-per-line
-  bottomList.value.forEach((item2) => { item2.isSelected = false })
-  item.isSelected = true
-  uni.navigateTo({ url: item.url })
-}
-
-function onLoad() {
-  if (props.page) {
-    // eslint-disable-next-line style/max-statements-per-line
-    bottomList.value.forEach((item2) => { item2.isSelected = false })
-    bottomList.value[props.page - 1].isSelected = true
-  }
-}
-onLoad()
-</script>
-
-<template>
-  <view class="w-full p-2 fixed bottom-0 left-0 model">
-    <view class="w-full flex gap-2 ">
-      <view v-for="(item, index) in bottomList" :key="index" class="flex flex-col items-center justify-center w-1/4" @click="handleBottom(item)">
-        <image :src="item.isSelected ? item.icon_select : item.icon" class="w-8 h-8" />
-        <text
-          class="text-3 mt-1" :class="[item.isSelected ? 'bottom_select_span' : 'bottom_span']"
-        >
-          {{ item.name }}
-        </text>
-      </view>
-    </view>
-  </view>
-</template>
-
-<style scoped>
-.model{
-  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
-  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
-}
-
-.bottom_span{
-  color: #828282;
-}
-.bottom_select_span{
-  color: #4545E5;
-}
-</style>

src/layouts/default.vue

@@ -1,8 +1,10 @@
+<script setup lang="ts">
+import TabBar from '@/components/TabBar.vue'
+</script>
+
 <template>
-  <view class="px-10 py-20 text-center">
+  <view>
     <slot />
-    <view class="mx-auto mt-5 text-center text-sm opacity-25">
-      [Default Layout]
-    </view>
+    <TabBar />
   </view>
 </template>

src/layouts/home.vue

@@ -1,8 +1,10 @@
+<script setup lang="ts">
+import TabBar from '@/components/TabBar.vue'
+</script>
+
 <template>
-  <view class="px-10 py-20 text-center">
+  <view>
     <slot />
-    <view class="mx-auto mt-5 text-center text-sm opacity-25">
-      [Home Layout]
-    </view>
+    <TabBar />
   </view>
 </template>

src/pages.json

@@ -1,8 +1,20 @@
 {
   "pages": [
+    {
+      "path": "pages/feed-plan/index",
+      "type": "page"
+    },
     {
       "path": "pages/home/index",
       "type": "page"
+    },
+    {
+      "path": "pages/me/index",
+      "type": "page"
+    },
+    {
+      "path": "pages/pet-manual/index",
+      "type": "page"
     }
   ],
   "globalStyle": {

src/pages/feed-plan/index.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <view>喂养计划</view>
+</template>
+
+<style scoped>
+
+</style>

src/pages/home/index.vue

@@ -1,14 +1,11 @@
 <script setup lang="ts">
-import Tabbar from "@/components/tabbar/index.vue"
 </script>
 
 <template>
   <view class="text-lg text-red-900">
     Hello World
   </view>
-  <Tabbar  :page="1"/>
 </template>
 
 <style scoped>
-
 </style>

src/pages/me/index.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <view>我的</view>
+</template>
+
+<style scoped>
+
+</style>

src/pages/pet-manual/index.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <view>宠物手册</view>
+</template>
+
+<style scoped>
+
+</style>

src/uni-pages.d.ts

@@ -4,7 +4,10 @@
 // Generated by vite-plugin-uni-pages
 
 interface NavigateToOptions {
-  url: "/pages/home/index";
+  url: "/pages/feed-plan/index" |
+       "/pages/home/index" |
+       "/pages/me/index" |
+       "/pages/pet-manual/index";
 }
 interface RedirectToOptions extends NavigateToOptions {}
 

tailwind.config.ts

@@ -15,7 +15,12 @@ else {
   presets.push(elementPlusPreset())
 }
 
-const theme: Config['theme'] = {}
+const theme: Config['theme'] = {
+  colors: {
+    primary: '#4545E5',
+    default: '#828282',
+  },
+}
 if (isMp || isQuickapp)
   theme.screens = {}