feat: update ui

frontend/wechat/src/layouts/MainLayout.vue

@@ -1,25 +1,26 @@
 <script setup>
 import { ref } from 'vue'
+import { AiOutlineHome, AiOutlineShoppingCart, AiOutlineUser } from 'vue-icons-plus/ai'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
 const activeTab = ref(0)
 
 const tabs = [
-    { label: '列表', route: '/' },
-    { label: '已购买', route: '/purchased' },
-    { label: '我的', route: '/profile' }
+    { label: '列表', route: '/', icon: AiOutlineHome },
+    { label: '已购买', route: '/purchased', icon: AiOutlineShoppingCart },
+    { label: '我的', route: '/profile', icon: AiOutlineUser }
 ]
 
-const switchTab = (index) => {
+const switchTab = (index, route) => {
     activeTab.value = index
-    router.push(tabs[index].route)
+    router.push(route)
 }
 </script>
 
 <template>
-    <div class="layout">
-        <div class="content">
+    <div class="h-screen flex flex-col bg-gray-50">
+        <div class="flex-1 overflow-hidden">
             <router-view v-slot="{ Component }">
                 <keep-alive>
                     <component :is="Component" />
@@ -27,23 +28,22 @@ const switchTab = (index) => {
             </router-view>
         </div>
 
-        <TabMenu :model="tabs" :activeIndex="activeTab" @tab-change="switchTab" class="bottom-tabs" />
+        <nav class="flex-none bg-white border-t border-gray-200">
+            <div class="flex justify-around items-center h-14">
+                <button v-for="(tab, index) in tabs" :key="index"
+                    class="flex flex-col items-center justify-center w-full h-full py-1 focus:outline-none" :class="[
+                        activeTab === index
+                            ? 'text-blue-600'
+                            : 'text-gray-600 hover:text-blue-600 active:text-blue-700'
+                    ]" @click="switchTab(index, tab.route)">
+                    <component :is="tab.icon" class="w-6 h-6" />
+                    <span class="mt-1 text-xs">{{ tab.label }}</span>
+                </button>
+            </div>
+        </nav>
     </div>
 </template>
 
 <style scoped>
-.layout {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-}
-
-.content {
-    flex: 1;
-    overflow-y: auto;
-}
-
-.bottom-tabs {
-    border-top: 1px solid #eee;
-}
+/* Remove all existing styles */
 </style>