diff --git a/uni-app/src/App.vue b/uni-app/src/App.vue
index 3f75744..eb2918e 100644
--- a/uni-app/src/App.vue
+++ b/uni-app/src/App.vue
@@ -1,12 +1,59 @@
 <template>
   <div class="app-wrapper">
-    <NavBar />
+    <div class="app-nav" id="appNav">
+      <div class="app-nav-brand">TradeMate</div>
+      <div
+        v-for="(item, index) in navList"
+        :key="index"
+        class="app-nav-item"
+        :class="{ active: currentIndex === index }"
+        @click="switchTab(index)"
+      >
+        <span class="app-nav-icon">{{ item.icon }}</span>
+        <span class="app-nav-text">{{ item.text }}</span>
+      </div>
+    </div>
     <router-view />
   </div>
 </template>
 
 <script setup>
-import NavBar from './components/nav-bar.vue'
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const currentIndex = ref(0)
+
+const navList = [
+  { 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.length; i++) {
+    if (hash.includes(navList[i].pagePath)) {
+      currentIndex.value = i
+      return
+    }
+  }
+  currentIndex.value = 0
+}
+
+const switchTab = (index) => {
+  if (currentIndex.value === index) return
+  uni.switchTab({ url: navList[index].pagePath })
+}
+
+onMounted(() => {
+  updateCurrentIndex()
+  window.addEventListener('hashchange', updateCurrentIndex)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('hashchange', updateCurrentIndex)
+})
 </script>
 
 <style>
@@ -31,15 +78,15 @@ uni-page-body {
   min-height: 100% !important;
 }
 
-/* ===== NavBar — hidden on mobile (uni-app default tab bar is used) ===== */
-.app-wrapper > .nav-bar {
+/* ===== Nav: hidden on mobile (uni-app default tab bar is used) ===== */
+.app-nav {
   display: none;
 }
 
 /* ===== Desktop responsive (≥1024px) ===== */
 @media (min-width: 1024px) {
-  /* NavBar sidebar */
-  .app-wrapper > .nav-bar {
+  /* Sidebar nav */
+  .app-nav {
     display: flex;
     flex-direction: column;
     position: fixed;
@@ -54,7 +101,7 @@ uni-page-body {
     padding-top: 24px;
   }
 
-  .nav-brand {
+  .app-nav-brand {
     font-size: 20px;
     font-weight: 700;
     color: #1890ff;
@@ -62,7 +109,7 @@ uni-page-body {
     text-align: center;
   }
 
-  .nav-item {
+  .app-nav-item {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -74,26 +121,26 @@ uni-page-body {
     transition: background 0.15s;
   }
 
-  .nav-item:hover {
+  .app-nav-item:hover {
     background: #f0f7ff;
   }
 
-  .nav-item.active {
+  .app-nav-item.active {
     background: #e6f0ff;
   }
 
-  .nav-icon {
+  .app-nav-icon {
     font-size: 22px;
     line-height: 1;
     font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
   }
 
-  .nav-text {
+  .app-nav-text {
     font-size: 15px;
     color: #555;
   }
 
-  .nav-item.active .nav-text {
+  .app-nav-item.active .app-nav-text {
     color: #1890ff;
     font-weight: 600;
   }
diff --git a/uni-app/src/components/nav-bar.vue b/uni-app/src/components/nav-bar.vue
deleted file mode 100644
index 405a15e..0000000
--- a/uni-app/src/components/nav-bar.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<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>