feat: 商品详情页面交互

components/TopNavBar/README.md

@@ -0,0 +1,176 @@
+# 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
+- 初始版本发布
+- 支持基础导航栏功能
+- 支持固定定位配置
+- 支持自定义样式和插槽