From b71b7e6cdfe894dfc6a2225e1929624e5b61d43b Mon Sep 17 00:00:00 2001
From: TradeMate Dev <dev@trademate.com>
Date: Thu, 21 May 2026 10:10:11 +0800
Subject: [PATCH] Fix desktop responsive layout: sidebar, content sizing,
 remove duplicate tab bar

- Replace uni-app custom-tab-bar with manual NavBar component in App.vue
  (uni-app auto-detection was not including component in build)
- Mobile: NavBar hidden via CSS display:none, uni-app default tab bar handles nav
- Desktop: NavBar visible as 220px left sidebar, uni-app tab bar hidden
- Content area: max-width 1200px with margin-left:220px, centered
- Buttons/inputs/cards: global desktop CSS overrides for reasonable sizing
- Clean approach: NavBar always in DOM, CSS media queries control visibility
  (no v-if, no conflicting !important)
---
 uni-app/src/App.vue                  |  39 +++++-
 uni-app/src/components/nav-bar.vue   | 123 +++++++++++++++++++
 uni-app/src/custom-tab-bar/index.vue | 170 ---------------------------
 uni-app/src/pages.json               |   2 +-
 4 files changed, 160 insertions(+), 174 deletions(-)
 create mode 100644 uni-app/src/components/nav-bar.vue
 delete mode 100644 uni-app/src/custom-tab-bar/index.vue

diff --git a/uni-app/src/App.vue b/uni-app/src/App.vue
index f4b3a23..5e626d7 100644
--- a/uni-app/src/App.vue
+++ b/uni-app/src/App.vue
@@ -1,8 +1,12 @@
 <template>
-  <router-view />
+  <div class="app-wrapper">
+    <NavBar />
+    <router-view />
+  </div>
 </template>
 
 <script setup>
+import NavBar from './components/nav-bar.vue'
 </script>
 
 <style>
@@ -18,7 +22,7 @@ html, body, #app {
   width: 100%;
 }
 
-/* Let uni-app framework manage layout for native tabbar */
+/* Let uni-app pages scroll */
 uni-page {
   overflow-y: auto !important;
 }
@@ -29,12 +33,22 @@ uni-page-body {
 
 /* ===== Desktop responsive (≥1024px) ===== */
 @media (min-width: 1024px) {
+  /* Hide the built-in uni-app tab bar on desktop */
+  uni-tabbar {
+    display: none !important;
+  }
+
   /* Sidebar — shift page content right */
   uni-page-body {
     margin-left: 220px !important;
     font-size: 16px !important;
   }
 
+  /* Remove the tab-bar-height bottom padding that uni-app adds for tab pages */
+  .uni-app--showtabbar uni-page-wrapper:after {
+    display: none !important;
+  }
+
   /* Constrain + center page content */
   uni-page-body > view {
     max-width: 1200px !important;
@@ -49,7 +63,26 @@ uni-page-body {
     border-radius: 20px !important;
   }
 
-  /* Fix floating AI assistant (clear sidebar + reasonable position) */
+  /* Buttons: reasonable desktop sizing */
+  uni-page-body button,
+  uni-page-body .btn-primary,
+  uni-page-body .btn-secondary,
+  uni-page-body .uni-btn,
+  uni-page-body [class*="btn-"] {
+    min-width: 120px;
+    padding: 12px 32px !important;
+    font-size: 15px !important;
+  }
+
+  /* Inputs */
+  uni-page-body input,
+  uni-page-body textarea,
+  uni-page-body .uni-input-input {
+    font-size: 15px !important;
+    padding: 10px 16px !important;
+  }
+
+  /* Fix floating AI assistant (clear sidebar) */
   .ai-float-btn {
     right: 40px !important;
     bottom: 40px !important;
diff --git a/uni-app/src/components/nav-bar.vue b/uni-app/src/components/nav-bar.vue
new file mode 100644
index 0000000..4ec58f6
--- /dev/null
+++ b/uni-app/src/components/nav-bar.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="nav-bar">
+    <div class="nav-brand">TradeMate</div>
+    <div
+      v-for="(item, index) in navList"
+      :key="index"
+      class="nav-item"
+      :class="{ active: currentIndex === index }"
+      @click="handleNav(index)"
+    >
+      <span class="nav-icon">{{ item.icon }}</span>
+      <span class="nav-text">{{ item.text }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const currentIndex = ref(0)
+
+const navList = ref([
+  { pagePath: '/pages/index/index', text: '首页', icon: '🏠' },
+  { pagePath: '/pages/customers/customers', text: '客户', icon: '👥' },
+  { pagePath: '/pages/marketing/marketing', text: '营销', icon: '📢' },
+  { pagePath: '/pages/quotation/quotation', text: '报价', icon: '📄' },
+  { pagePath: '/pages/profile/profile', text: '我的', icon: '👤' },
+])
+
+const updateCurrentIndex = () => {
+  const hash = window.location.hash || ''
+  for (let i = 0; i < navList.value.length; i++) {
+    if (hash.includes(navList.value[i].pagePath)) {
+      currentIndex.value = i
+      return
+    }
+  }
+  currentIndex.value = 0
+}
+
+const handleNav = (index) => {
+  if (currentIndex.value === index) return
+  const url = navList.value[index].pagePath
+  uni.switchTab({ url })
+}
+
+onMounted(() => {
+  updateCurrentIndex()
+  window.addEventListener('hashchange', updateCurrentIndex)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('hashchange', updateCurrentIndex)
+})
+</script>
+
+<style>
+.nav-bar {
+  display: none;
+}
+
+@media (min-width: 1024px) {
+  .nav-bar {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 220px;
+    height: 100vh;
+    background: #fff;
+    box-shadow: 4px 0 16px rgba(0,0,0,0.08);
+    z-index: 999999;
+    border-right: 1px solid #e0e0e0;
+    box-sizing: border-box;
+    padding-top: 24px;
+  }
+
+  .nav-brand {
+    font-size: 20px;
+    font-weight: 700;
+    color: #1890ff;
+    padding: 20px 24px 32px;
+    text-align: center;
+  }
+
+  .nav-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 14px 24px;
+    margin: 2px 12px;
+    border-radius: 12px;
+    gap: 14px;
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+
+  .nav-item:hover {
+    background: #f0f7ff;
+  }
+
+  .nav-item.active {
+    background: #e6f0ff;
+  }
+
+  .nav-icon {
+    font-size: 22px;
+    line-height: 1;
+    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
+  }
+
+  .nav-text {
+    font-size: 15px;
+    color: #555;
+  }
+
+  .nav-item.active .nav-text {
+    color: #1890ff;
+    font-weight: 600;
+  }
+}
+</style>
diff --git a/uni-app/src/custom-tab-bar/index.vue b/uni-app/src/custom-tab-bar/index.vue
deleted file mode 100644
index b882c48..0000000
--- a/uni-app/src/custom-tab-bar/index.vue
+++ /dev/null
@@ -1,170 +0,0 @@
-<template>
-  <div class="tab-bar">
-    <div class="tab-bar-brand">TradeMate</div>
-    <div
-      v-for="(item, index) in tabList"
-      :key="index"
-      class="tab-bar-item"
-      :class="{ active: currentIndex === index }"
-      @click="handleSwitchTab(index)"
-    >
-      <span class="tab-bar-icon">{{ item.icon }}</span>
-      <span class="tab-bar-text">{{ item.text }}</span>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
-
-const currentIndex = ref(0)
-
-const tabList = ref([
-  { pagePath: '/pages/index/index', text: '首页', icon: '🏠' },
-  { pagePath: '/pages/customers/customers', text: '客户', icon: '👥' },
-  { pagePath: '/pages/marketing/marketing', text: '营销', icon: '📢' },
-  { pagePath: '/pages/quotation/quotation', text: '报价', icon: '📄' },
-  { pagePath: '/pages/profile/profile', text: '我的', icon: '👤' },
-])
-
-const updateCurrentIndex = () => {
-  const hash = window.location.hash || ''
-  console.log('Hash:', hash)
-  for (let i = 0; i < tabList.value.length; i++) {
-    if (hash.includes(tabList.value[i].pagePath)) {
-      currentIndex.value = i
-      return
-    }
-  }
-  currentIndex.value = 0
-}
-
-const handleSwitchTab = (index) => {
-  if (currentIndex.value === index) return
-  const url = tabList.value[index].pagePath
-  uni.switchTab({ url })
-}
-
-onMounted(() => {
-  console.log('TabBar mounted, tabList:', tabList.value)
-  updateCurrentIndex()
-  window.addEventListener('hashchange', updateCurrentIndex)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('hashchange', updateCurrentIndex)
-})
-</script>
-
-<style>
-/* ===== Mobile: bottom tab bar ===== */
-.tab-bar {
-  position: fixed !important;
-  bottom: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  height: 80px !important;
-  background: #fff !important;
-  display: flex !important;
-  flex-direction: row !important;
-  box-shadow: 0 -4px 16px rgba(0,0,0,0.2) !important;
-  z-index: 999999 !important;
-  border-top: 1px solid #e0e0e0 !important;
-  padding-bottom: env(safe-area-inset-bottom) !important;
-  box-sizing: border-box !important;
-}
-
-.tab-bar-item {
-  flex: 1 !important;
-  display: flex !important;
-  flex-direction: column !important;
-  align-items: center !important;
-  justify-content: center !important;
-  cursor: pointer;
-}
-
-.tab-bar-brand {
-  display: none;
-}
-
-.tab-bar-icon {
-  font-size: 28px !important;
-  line-height: 1.5 !important;
-  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
-  margin-bottom: 4px;
-}
-
-.tab-bar-text {
-  font-size: 12px !important;
-  color: #999 !important;
-}
-
-.tab-bar-item.active .tab-bar-text {
-  color: #1890ff !important;
-  font-weight: bold !important;
-}
-
-/* ===== Desktop: left sidebar ===== */
-@media (min-width: 1024px) {
-  .tab-bar {
-    top: 0 !important;
-    left: 0 !important;
-    bottom: 0 !important;
-    right: auto !important;
-    width: 220px !important;
-    height: 100vh !important;
-    flex-direction: column !important;
-    box-shadow: 4px 0 16px rgba(0,0,0,0.08) !important;
-    border-top: none !important;
-    border-right: 1px solid #e0e0e0 !important;
-    padding-bottom: 0 !important;
-    padding-top: 24px !important;
-    align-items: stretch !important;
-  }
-
-  .tab-bar-brand {
-    display: flex !important;
-    font-size: 20px !important;
-    font-weight: 700 !important;
-    color: #1890ff !important;
-    padding: 20px 24px 32px !important;
-    text-align: center !important;
-    justify-content: center !important;
-  }
-
-  .tab-bar-item {
-    flex: 0 0 auto !important;
-    flex-direction: row !important;
-    padding: 16px 24px !important;
-    margin: 2px 12px !important;
-    border-radius: 12px !important;
-    justify-content: flex-start !important;
-    gap: 14px !important;
-    transition: background 0.15s !important;
-  }
-
-  .tab-bar-item:hover {
-    background: #f0f7ff !important;
-  }
-
-  .tab-bar-item.active {
-    background: #e6f0ff !important;
-  }
-
-  .tab-bar-icon {
-    font-size: 22px !important;
-    margin-bottom: 0 !important;
-    line-height: 1 !important;
-  }
-
-  .tab-bar-text {
-    font-size: 15px !important;
-    color: #555 !important;
-  }
-
-  .tab-bar-item.active .tab-bar-text {
-    color: #1890ff !important;
-    font-weight: 600 !important;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/uni-app/src/pages.json b/uni-app/src/pages.json
index 3182aec..eea5f9a 100644
--- a/uni-app/src/pages.json
+++ b/uni-app/src/pages.json
@@ -111,7 +111,7 @@
     "backgroundColor": "#f5f5f5"
   },
   "tabBar": {
-    "custom": true,
+    "custom": false,
     "color": "#666666",
     "selectedColor": "#1890ff",
     "backgroundColor": "#ffffff",