From a2a7cb893b50797721e3c4a8eb6c8cc189b4d4e5 Mon Sep 17 00:00:00 2001
From: TradeMate Dev <dev@trademate.com>
Date: Thu, 21 May 2026 09:53:30 +0800
Subject: [PATCH] Add responsive desktop layout with left sidebar navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Desktop (≥1024px):
- Tab bar becomes a 220px left sidebar with brand name and nav items
- Page content shifts right and max-width constrained to 1200px
- Base font-size reset to 16px for readable text
- AI assistant floating button stays in bottom-right corner
- No change to mobile layout (bottom tab bar preserved)
---
 uni-app/src/App.vue                  | 33 ++++++++++++
 uni-app/src/custom-tab-bar/index.vue | 77 ++++++++++++++++++++++++++--
 2 files changed, 107 insertions(+), 3 deletions(-)

diff --git a/uni-app/src/App.vue b/uni-app/src/App.vue
index b18e9c6..f4b3a23 100644
--- a/uni-app/src/App.vue
+++ b/uni-app/src/App.vue
@@ -26,4 +26,37 @@ uni-page-body {
   overflow-y: auto !important;
   min-height: 100% !important;
 }
+
+/* ===== Desktop responsive (≥1024px) ===== */
+@media (min-width: 1024px) {
+  /* Sidebar — shift page content right */
+  uni-page-body {
+    margin-left: 220px !important;
+    font-size: 16px !important;
+  }
+
+  /* Constrain + center page content */
+  uni-page-body > view {
+    max-width: 1200px !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    padding: 40px 48px !important;
+  }
+
+  /* Cards more breathing room */
+  uni-page-body .card {
+    padding: 32px !important;
+    border-radius: 20px !important;
+  }
+
+  /* Fix floating AI assistant (clear sidebar + reasonable position) */
+  .ai-float-btn {
+    right: 40px !important;
+    bottom: 40px !important;
+  }
+  .ai-dialog {
+    right: 40px !important;
+    bottom: 100px !important;
+  }
+}
 </style>
diff --git a/uni-app/src/custom-tab-bar/index.vue b/uni-app/src/custom-tab-bar/index.vue
index cc1f1f0..b882c48 100644
--- a/uni-app/src/custom-tab-bar/index.vue
+++ b/uni-app/src/custom-tab-bar/index.vue
@@ -1,13 +1,15 @@
 <template>
-  <div class="tab-bar" :style="{ opacity: 1 }">
+  <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" :class="{ active: currentIndex === index }">{{ item.text }}</span>
+      <span class="tab-bar-text">{{ item.text }}</span>
     </div>
   </div>
 </template>
@@ -55,6 +57,7 @@ onUnmounted(() => {
 </script>
 
 <style>
+/* ===== Mobile: bottom tab bar ===== */
 .tab-bar {
   position: fixed !important;
   bottom: 0 !important;
@@ -80,6 +83,10 @@ onUnmounted(() => {
   cursor: pointer;
 }
 
+.tab-bar-brand {
+  display: none;
+}
+
 .tab-bar-icon {
   font-size: 28px !important;
   line-height: 1.5 !important;
@@ -92,8 +99,72 @@ onUnmounted(() => {
   color: #999 !important;
 }
 
-.tab-bar-text.active {
+.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