diff --git a/src/components/TopNavBar/README.md b/src/components/TopNavBar/README.md
deleted file mode 100644
index 789d89c..0000000
--- a/src/components/TopNavBar/README.md
+++ /dev/null
@@ -1,176 +0,0 @@
-# TopNavBar 顶部导航栏组件
-
-一个功能完整的顶部导航栏组件，支持固定定位、自定义样式和插槽内容。
-
-## 功能特性
-
-- ✅ 支持固定在页面顶部（可配置）
-- ✅ 自动适配状态栏高度
-- ✅ 支持自定义标题和颜色
-- ✅ 支持插槽自定义内容
-- ✅ 内置返回按钮功能
-- ✅ 响应式设计
-- ✅ 深色模式支持
-- ✅ 安全区域适配
-
-## 基础用法
-
-### 简单使用
-```vue
-<template>
-  <TopNavBar title="页面标题" />
-</template>
-
-<script setup>
-import TopNavBar from '@/components/TopNavBar/index.vue'
-</script>
-```
-
-### 固定在顶部
-```vue
-<template>
-  <TopNavBar title="页面标题" :fixed="true" />
-</template>
-```
-
-### 自定义样式
-```vue
-<template>
-  <TopNavBar 
-    title="页面标题" 
-    backgroundColor="#007AFF"
-    titleColor="#ffffff"
-    backIconColor="#ffffff"
-  />
-</template>
-```
-
-### 标题对齐方式
-```vue
-<template>
-  <!-- 标题居中显示（默认） -->
-  <TopNavBar title="居中标题" titleAlign="center" />
-  
-  <!-- 标题左对齐显示 -->
-  <TopNavBar title="左对齐标题" titleAlign="left" />
-</template>
-```
-
-### 使用插槽
-```vue
-<template>
-  <TopNavBar>
-    <template #title>
-      <view class="custom-title">
-        <text>自定义标题内容</text>
-      </view>
-    </template>
-    
-    <template #right>
-      <uni-icons type="more" size="20" color="#333" />
-    </template>
-  </TopNavBar>
-</template>
-```
-
-## API
-
-### Props
-
-| 参数 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| title | String | '' | 导航栏标题 |
-| fixed | Boolean | false | 是否固定在页面顶部 |
-| showBack | Boolean | true | 是否显示返回按钮 |
-| backgroundColor | String | '#ffffff' | 背景颜色 |
-| titleColor | String | '#333333' | 标题文字颜色 |
-| backIconColor | String | '#333333' | 返回按钮图标颜色 |
-| hideStatusBar | Boolean | false | 是否隐藏状态栏占位 |
-| zIndex | Number | 999 | 层级索引 |
-| titleAlign | String | 'center' | 标题对齐方式，可选值：'center'、'left' |
-
-### Events
-
-| 事件名 | 说明 | 参数 |
-|--------|------|------|
-| back | 点击返回按钮时触发 | - |
-
-### Slots
-
-| 插槽名 | 说明 |
-|--------|------|
-| title | 自定义标题内容 |
-| right | 自定义右侧内容 |
-
-## 使用示例
-
-### 订单列表页面
-```vue
-<template>
-  <view>
-    <TopNavBar>
-      <template #title>
-        <Tabs 
-          :tabs="tabList" 
-          :defaultActive="currentTabIndex" 
-          @change="handleTabChange" 
-        />
-      </template>
-    </TopNavBar>
-    
-    <!-- 页面内容 -->
-    <view class="page-content">
-      <!-- 内容区域 -->
-    </view>
-  </view>
-</template>
-```
-
-### 商品详情页面
-```vue
-<template>
-  <view>
-    <TopNavBar 
-      title="商品详情" 
-      :fixed="true"
-      @back="handleBack"
-    >
-      <template #right>
-        <uni-icons type="share" size="20" color="#333" />
-      </template>
-    </TopNavBar>
-    
-    <!-- 页面内容 -->
-    <view class="page-content">
-      <!-- 内容区域 -->
-    </view>
-  </view>
-</template>
-
-<script setup>
-const handleBack = () => {
-  // 自定义返回逻辑
-  console.log('自定义返回处理')
-}
-</script>
-```
-
-## 注意事项
-
-1. **固定定位使用**：当设置 `fixed="true"` 时，组件会固定在页面顶部，此时需要为页面内容添加适当的顶部间距。
-
-2. **状态栏适配**：组件会自动获取系统状态栏高度并进行适配，无需手动处理。
-
-3. **返回按钮**：默认点击返回按钮会执行 `uni.navigateBack()`，如果需要自定义返回逻辑，请监听 `@back` 事件。
-
-4. **样式覆盖**：如需自定义样式，建议通过 props 传入颜色值，或在父组件中使用深度选择器覆盖样式。
-
-5. **插槽使用**：title 插槽会完全替换默认的标题显示，right 插槽用于添加右侧操作按钮。
-
-## 更新日志
-
-### v1.0.0
-- 初始版本发布
-- 支持基础导航栏功能
-- 支持固定定位配置
-- 支持自定义样式和插槽
\ No newline at end of file
diff --git a/src/components/TopNavBar/demo.vue b/src/components/TopNavBar/demo.vue
deleted file mode 100644
index 48972c1..0000000
--- a/src/components/TopNavBar/demo.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <view class="demo-container">
-    <!-- 示例1: 基础用法 -->
-    <view class="demo-section">
-      <view class="demo-title">基础用法</view>
-      <TopNavBar title="基础导航栏" />
-    </view>
-
-    <!-- 示例2: 固定在顶部 -->
-    <view class="demo-section">
-      <view class="demo-title">固定在顶部</view>
-      <TopNavBar title="固定导航栏" :fixed="true" />
-    </view>
-
-    <!-- 示例3: 自定义颜色 -->
-    <view class="demo-section">
-      <view class="demo-title">自定义颜色</view>
-      <TopNavBar 
-        title="蓝色导航栏" 
-        backgroundColor="#007AFF"
-        titleColor="#ffffff"
-        backIconColor="#ffffff"
-      />
-    </view>
-
-    <!-- 示例4: 隐藏返回按钮 -->
-    <view class="demo-section">
-      <view class="demo-title">隐藏返回按钮</view>
-      <TopNavBar title="无返回按钮" :showBack="false" />
-    </view>
-
-    <!-- 示例5: 标题左对齐 -->
-    <view class="demo-section">
-      <view class="demo-title">标题左对齐</view>
-      <TopNavBar title="左对齐标题" titleAlign="left" />
-    </view>
-
-    <!-- 示例6: 标题居中对齐（默认） -->
-    <view class="demo-section">
-      <view class="demo-title">标题居中对齐（默认）</view>
-      <TopNavBar title="居中对齐标题" titleAlign="center" />
-    </view>
-
-    <!-- 示例7: 使用插槽 -->
-    <view class="demo-section">
-      <view class="demo-title">使用插槽</view>
-      <TopNavBar>
-        <template #title>
-          <view class="custom-title">
-            <uni-icons type="star" size="16" color="#FFD700" />
-            <text class="title-text">自定义标题</text>
-          </view>
-        </template>
-        
-        <template #right>
-          <view class="right-actions">
-            <uni-icons type="search" size="20" color="#333" style="margin-right: 10px;" />
-            <uni-icons type="more" size="20" color="#333" />
-          </view>
-        </template>
-      </TopNavBar>
-    </view>
-
-    <!-- 示例8: 渐变背景 -->
-    <view class="demo-section">
-      <view class="demo-title">渐变背景</view>
-      <TopNavBar 
-        title="渐变导航栏" 
-        backgroundColor="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
-        titleColor="#ffffff"
-        backIconColor="#ffffff"
-      />
-    </view>
-
-    <!-- 内容区域 -->
-    <view class="content-area">
-      <view class="content-item" v-for="i in 20" :key="i">
-        <text>内容项 {{ i }}</text>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script setup>
-import TopNavBar from './index.vue'
-</script>
-
-<style scoped lang="scss">
-.demo-container {
-  padding: 20px;
-  background-color: #f5f5f5;
-  min-height: 100vh;
-}
-
-.demo-section {
-  margin-bottom: 30px;
-  background-color: #ffffff;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.demo-title {
-  padding: 15px 20px;
-  background-color: #f8f9fa;
-  font-size: 16px;
-  font-weight: 500;
-  color: #333;
-  border-bottom: 1px solid #e9ecef;
-}
-
-.custom-title {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  
-  .title-text {
-    margin-left: 8px;
-    font-size: 18px;
-    font-weight: 500;
-    color: #333;
-  }
-}
-
-.right-actions {
-  display: flex;
-  align-items: center;
-}
-
-.content-area {
-  margin-top: 40px;
-  padding: 20px;
-  background-color: #ffffff;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.content-item {
-  padding: 15px 0;
-  border-bottom: 1px solid #f0f0f0;
-  
-  &:last-child {
-    border-bottom: none;
-  }
-  
-  text {
-    font-size: 16px;
-    color: #666;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/components/TopNavBar/index.vue b/src/components/TopNavBar/index.vue
index bb38505..12272ab 100644
--- a/src/components/TopNavBar/index.vue
+++ b/src/components/TopNavBar/index.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from "vue";
+import { computed, getCurrentInstance, onMounted, ref } from "vue";
 
 // 定义props
 const props = defineProps({
@@ -85,14 +85,11 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  customBack: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 // 定义emits
 const emit = defineEmits(["back"]);
+const instance = getCurrentInstance();
 
 // 系统信息
 const statusBarHeight = ref(0);
@@ -148,9 +145,23 @@ const navContentStyle = computed(() => {
   };
 });
 
+const hasBackListener = computed(() => {
+  const vnodeProps = instance?.vnode?.props || {};
+  return Boolean(vnodeProps.onBack);
+});
+
 // 处理返回事件
 const handleBack = () => {
-  if (props.customBack) {
+  const pages = getCurrentPages();
+
+  if (pages.length <= 1) {
+    uni.reLaunch({
+      url: "/pages/index/index",
+    });
+    return;
+  }
+
+  if (hasBackListener.value) {
     emit("back");
     return;
   }
diff --git a/src/components/TopNavBar/使用指南.md b/src/components/TopNavBar/使用指南.md
deleted file mode 100644
index 7448198..0000000
--- a/src/components/TopNavBar/使用指南.md
+++ /dev/null
@@ -1,312 +0,0 @@
-# TopNavBar 组件使用指南
-
-## 组件概述
-
-TopNavBar 是一个功能完整的顶部导航栏组件，专为 uni-app 项目设计。该组件支持固定定位、自定义样式、插槽内容等功能，可以满足大部分页面的导航需求。
-
-## 核心特性
-
-### 1. 可配置固定定位
-- **默认行为**: 组件默认不固定，跟随页面滚动
-- **固定模式**: 设置 `fixed="true"` 可将导航栏固定在页面顶部
-- **自动适配**: 固定模式下自动处理状态栏高度和安全区域
-
-### 2. 智能状态栏适配
-- 自动获取系统状态栏高度
-- 支持不同平台的导航栏高度适配（iOS: 44px, Android: 48px）
-- 可选择隐藏状态栏占位区域
-
-### 3. 灵活的自定义选项
-- 支持自定义背景色、标题色、图标色
-- 可控制返回按钮显示/隐藏
-- 支持自定义 z-index 层级
-- 支持标题对齐方式配置（居中/左对齐）
-
-## 快速开始
-
-### 基础使用
-
-```vue
-<!-- 最简单的使用方式 -->
-<TopNavBar title="页面标题" />
-```
-
-### 固定在顶部
-
-```vue
-<!-- 固定导航栏，适合长页面滚动 -->
-<template>
-  <view class="page-container">
-    <TopNavBar title="商品详情" :fixed="true" />
-    <view class="page-content">
-      <!-- 页面内容 -->
-    </view>
-  </view>
-</template>
-
-<style>
-.page-content {
-  /* 为固定导航栏预留空间 */
-  padding-top: calc(var(--status-bar-height, 44px) + 44px);
-}
-</style>
-```
-
-### 自定义样式
-
-```vue
-<!-- 深色主题导航栏 -->
-<TopNavBar 
-  title="深色导航栏" 
-  backgroundColor="#1a1a1a"
-  titleColor="#ffffff"
-  backIconColor="#ffffff"
-/>
-
-<!-- 品牌色导航栏 -->
-<TopNavBar 
-  title="品牌导航栏" 
-  backgroundColor="#007AFF"
-  titleColor="#ffffff"
-  backIconColor="#ffffff"
-/>
-
-<!-- 左对齐标题 -->
-<TopNavBar 
-  title="左对齐标题" 
-  titleAlign="left"
-/>
-
-<!-- 居中标题（默认） -->
-<TopNavBar 
-  title="居中标题" 
-  titleAlign="center"
-/>
-```
-
-## 高级用法
-
-### 使用插槽自定义内容
-
-```vue
-<template>
-  <TopNavBar>
-    <!-- 自定义标题区域 -->
-    <template #title>
-      <view class="custom-title">
-        <image src="/static/logo.png" class="logo" />
-        <text class="brand-name">品牌名称</text>
-      </view>
-    </template>
-    
-    <!-- 自定义右侧操作 -->
-    <template #right>
-      <view class="nav-actions">
-        <uni-icons type="search" size="20" @click="handleSearch" />
-        <uni-icons type="more" size="20" @click="showMore" />
-      </view>
-    </template>
-  </TopNavBar>
-</template>
-
-<style>
-.custom-title {
-  display: flex;
-  align-items: center;
-  
-  .logo {
-    width: 24px;
-    height: 24px;
-    margin-right: 8px;
-  }
-  
-  .brand-name {
-    font-size: 18px;
-    font-weight: 600;
-  }
-}
-
-.nav-actions {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-}
-</style>
-```
-
-### 监听返回事件
-
-```vue
-<template>
-  <TopNavBar 
-    title="自定义返回" 
-    @back="handleCustomBack"
-  />
-</template>
-
-<script setup>
-const handleCustomBack = () => {
-  // 自定义返回逻辑
-  uni.showModal({
-    title: '提示',
-    content: '确定要离开当前页面吗？',
-    success: (res) => {
-      if (res.confirm) {
-        uni.navigateBack()
-      }
-    }
-  })
-}
-</script>
-```
-
-## 实际应用场景
-
-### 1. 商品详情页
-
-```vue
-<template>
-  <view class="goods-detail">
-    <TopNavBar 
-      title="商品详情" 
-      :fixed="true"
-      backgroundColor="rgba(255, 255, 255, 0.95)"
-    >
-      <template #right>
-        <uni-icons type="share" size="20" @click="shareGoods" />
-      </template>
-    </TopNavBar>
-    
-    <view class="goods-content">
-      <!-- 商品内容 -->
-    </view>
-  </view>
-</template>
-```
-
-### 2. 订单列表页
-
-```vue
-<template>
-  <view class="order-list">
-    <TopNavBar>
-      <template #title>
-        <Tabs 
-          :tabs="orderTabs" 
-          :active="activeTab" 
-          @change="switchTab"
-        />
-      </template>
-    </TopNavBar>
-    
-    <view class="order-content">
-      <!-- 订单列表 -->
-    </view>
-  </view>
-</template>
-```
-
-### 3. 聊天页面
-
-```vue
-<template>
-  <view class="chat-page">
-    <TopNavBar 
-      title="客服小沐" 
-      :fixed="true"
-      backgroundColor="#f8f9fa"
-    >
-      <template #right>
-        <uni-icons type="phone" size="20" @click="makeCall" />
-      </template>
-    </TopNavBar>
-    
-    <view class="chat-content">
-      <!-- 聊天内容 -->
-    </view>
-  </view>
-</template>
-```
-
-## 最佳实践
-
-### 1. 固定导航栏的页面布局
-
-```scss
-// 推荐的页面结构
-.page-container {
-  .page-content {
-    // 方法1: 使用 padding-top
-    padding-top: calc(var(--status-bar-height, 44px) + 44px);
-    
-    // 方法2: 使用 margin-top
-    // margin-top: calc(var(--status-bar-height, 44px) + 44px);
-  }
-}
-```
-
-### 2. 响应式设计
-
-```scss
-// 适配不同屏幕尺寸
-@media screen and (max-width: 375px) {
-  .page-content {
-    padding-top: calc(var(--status-bar-height, 44px) + 40px);
-  }
-}
-```
-
-### 3. 主题适配
-
-```vue
-<script setup>
-import { computed } from 'vue'
-
-// 根据系统主题动态调整颜色
-const navBarStyle = computed(() => {
-  const isDark = uni.getSystemInfoSync().theme === 'dark'
-  return {
-    backgroundColor: isDark ? '#1a1a1a' : '#ffffff',
-    titleColor: isDark ? '#ffffff' : '#333333',
-    backIconColor: isDark ? '#ffffff' : '#333333'
-  }
-})
-</script>
-
-<template>
-  <TopNavBar 
-    title="自适应主题" 
-    :backgroundColor="navBarStyle.backgroundColor"
-    :titleColor="navBarStyle.titleColor"
-    :backIconColor="navBarStyle.backIconColor"
-  />
-</template>
-```
-
-## 注意事项
-
-1. **固定定位的性能考虑**: 固定导航栏会创建新的层叠上下文，在复杂页面中可能影响性能
-
-2. **状态栏适配**: 在不同设备上状态栏高度可能不同，组件会自动处理，但建议在测试时验证各种设备
-
-3. **插槽内容**: 使用插槽时注意内容的响应式设计，确保在不同屏幕尺寸下都能正常显示
-
-4. **z-index 管理**: 如果页面中有其他固定定位元素，注意调整 z-index 避免层级冲突
-
-5. **返回按钮**: 默认返回行为是 `uni.navigateBack()`，如需自定义请监听 `@back` 事件
-
-## 故障排除
-
-### 常见问题
-
-**Q: 固定导航栏下的内容被遮挡了？**
-A: 需要为页面内容添加顶部间距，参考上面的最佳实践。
-
-**Q: 在某些设备上状态栏高度不正确？**
-A: 组件会自动获取状态栏高度，如果仍有问题，可以手动设置 `hideStatusBar="true"` 并自行处理。
-
-**Q: 自定义颜色不生效？**
-A: 确保传入的颜色值格式正确，支持 hex、rgb、rgba 等标准 CSS 颜色格式。
-
-**Q: 插槽内容显示异常？**
-A: 检查插槽内容的样式，确保没有影响导航栏布局的 CSS 属性。
\ No newline at end of file