# 项目架构说明

## 页面结构

### 单页应用架构

项目采用**单页面 + 组件切换**的架构，实现类似原生TabBar的效果，同时保持头部和底部固定不变。

```
pages/
├── login/
│   └── login.vue           # 登录页面（独立页面）
└── index.vue               # 主容器页面（核心）

pages-content/              # 内容组件目录（独立）
├── home/
│   └── index.vue           # 首页内容组件
├── scan/
│   └── index.vue           # 扫描内容组件
└── my/
    └── index.vue           # 我的内容组件
```

## 主容器页面 (pages/index.vue)

### 结构组成

```
┌─────────────────────────────┐
│   自定义头部（固定）          │  ← 白色背景，显示当前标题
│   - 自适应状态栏高度         │     根据currentTab自动切换
├─────────────────────────────┤
│                             │
│   主内容区（动态切换）        │  ← 使用 v-if 切换组件
│   - HomePage 组件           │     - currentTab = 'home'
│   - ScanPage 组件           │     - currentTab = 'scan'
│   - MyPage 组件             │     - currentTab = 'mine'
│                             │
├─────────────────────────────┤
│   自定义底部导航栏（固定）    │  ← 白色背景，三个菜单
│   🏠 首页 | 📷 扫描 | 👤 我的 │     点击切换 currentTab
└─────────────────────────────┘
```

### 核心代码逻辑

```javascript
// 当前激活的tab
const currentTab = ref('home')

// 切换tab - 只需要改变currentTab值
const switchTab = (name) => {
  if (currentTab.value === name) return
  currentTab.value = name
}

// 标题自动跟随当前tab
const currentPageTitle = computed(() => {
  const titles = {
    home: '首页',
    scan: '扫描',
    mine: '我的'
  }
  return titles[currentTab.value] || '首页'
})
```

### 组件切换

```vue
<view class="main-content">
  <!-- 通过 v-if 实现组件切换 -->
  <HomePage v-if="currentTab === 'home'" />
  <ScanPage v-else-if="currentTab === 'scan'" />
  <MyPage v-else-if="currentTab === 'mine'" />
</view>
```

## 内容组件

### 首页组件 (pages-content/home/index.vue)

```vue
<template>
  <view class="home-page">
    <view class="page-header">
      <text class="title">首页内容</text>
    </view>
    <view class="page-body">
      <text class="placeholder">首页主体内容区域</text>
    </view>
  </view>
</template>
```

**特点**：
- 纯内容组件，无头部和底部
- 有自己的内部结构和样式
- 可独立开发和维护

### 扫描组件 (pages-content/scan/index.vue)

```vue
<template>
  <view class="scan-page">
    <view class="page-header">
      <text class="title">扫描内容</text>
    </view>
    <view class="page-body">
      <text class="placeholder">扫描主体内容区域</text>
    </view>
  </view>
</template>
```

**特点**：
- 用于实现扫描相关功能
- 可以调用相机API、扫码API等

### 我的组件 (pages-content/my/index.vue)

```vue
<template>
  <view class="my-page">
    <view class="page-header">
      <text class="title">我的内容</text>
    </view>
    <view class="page-body">
      <text class="placeholder">我的主体内容区域</text>
    </view>
  </view>
</template>
```

**特点**：
- 用于个人中心相关功能
- 可以显示用户信息、设置等

## 页面跳转流程

### 登录成功后跳转

```javascript
// pages/login/login.vue
uni.navigateTo({
  url: '/pages/index'  // 跳转到主容器页面
})
```

### 主容器内切换

```javascript
// pages/index.vue
switchTab('scan')  // 切换到扫描页
// ↓
currentTab.value = 'scan'
// ↓
<ScanPage /> 组件显示
// ↓
头部标题变为"扫描"
// ↓
底部导航高亮"扫描"
```

## 架构优势

### 1. 性能优化

| 操作 | 重新渲染 | 说明 |
|------|---------|------|
| 初始加载 | 完整渲染 | 加载主容器 + 首页组件 |
| 切换tab | 只渲染内容 | 头部和底部不变 |
| 返回登录 | 完整渲染 | 卸载主容器 |

### 2. 开发便利

- ✅ 每个内容组件独立开发
- ✅ 头部和底部统一管理
- ✅ 切换逻辑简单清晰
- ✅ 易于维护和扩展

### 3. 用户体验

- ✅ 切换流畅，无闪烁
- ✅ 头部标题自动更新
- ✅ 底部高亮自动切换
- ✅ 类似原生TabBar体验

## 扩展指南

### 添加新的Tab页面

**1. 创建内容组件**

```bash
pages-content/newpage/index.vue
```

**2. 在主容器中引入**

```vue
<!-- pages/index.vue -->
<script setup>
import NewPage from '../pages-content/newpage/index.vue'
</script>

<template>
  <NewPage v-else-if="currentTab === 'newpage'" />
</template>
```

**3. 添加底部导航配置**

```javascript
const tabList = ref([
  // ...现有配置
  {
    name: 'newpage',
    label: '新页面',
    icon: '🎯'
  }
])
```

**4. 添加标题映射**

```javascript
const currentPageTitle = computed(() => {
  const titles = {
    // ...
    newpage: '新页面'
  }
  return titles[currentTab.value]
})
```

### 自定义头部

如果需要不同页面有不同的头部样式：

```vue
<!-- 方案1：使用 computed 动态样式 -->
<view 
  class="custom-header" 
  :style="{ 
    background: headerBackground,
    paddingTop: statusBarHeight + 'px' 
  }"
>
  <text>{{ currentPageTitle }}</text>
</view>

<script>
const headerBackground = computed(() => {
  const colors = {
    home: '#ffffff',
    scan: '#667eea',
    mine: '#ffffff'
  }
  return colors[currentTab.value]
})
</script>
```

### 组件通信

如果需要在内容组件间共享数据：

**使用 Pinia Store**
```javascript
// store/tab.js
export const useTabStore = defineStore('tab', {
  state: () => ({
    sharedData: null
  })
})

// 在任意组件中使用
import { useTabStore } from '@/store/tab'
const tabStore = useTabStore()
```

## 配置文件

### pages.json

```json
{
  "pages": [
    {
      "path": "pages/login/login",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/index",
      "style": {
        "navigationStyle": "custom"  // 使用自定义导航栏
      }
    }
  ]
}
```

**注意**：
- 不需要配置 `tabBar`
- 所有tab功能都由 `pages/index.vue` 实现
- `pages-content/*` 下的组件不需要在 `pages.json` 中注册

## 总结

这是一个**轻量级、高性能**的单页应用架构：

- 🎯 **简单** - 只有一个主页面 + 三个内容组件
- ⚡ **快速** - 切换tab只更新内容区域
- 🎨 **灵活** - 每个组件独立开发维护
- 📦 **可扩展** - 易于添加新的tab页面

适合需要底部导航的小程序项目！