---
name: 调整组件结构计划
overview: 将 SinglePageContainer 从 App.vue 迁移到 pages/index/index.vue，并清理重复的商圈卡片内容
todos:
  - id: backup-files
    content: 备份 App.vue 和 pages/index/index.vue 文件
    status: completed
  - id: modify-index-page
    content: 在 pages/index/index.vue 中引入并使用 SinglePageContainer 组件
    status: completed
    dependencies:
      - backup-files
  - id: clean-index-content
    content: 清理 pages/index/index.vue 中的商圈卡片和功能入口等重复内容
    status: completed
    dependencies:
      - modify-index-page
  - id: modify-app-vue
    content: 移除 App.vue 中的 SinglePageContainer 组件和相关导入
    status: completed
    dependencies:
      - clean-index-content
  - id: test-functionality
    content: 测试滑动容器功能和商圈场景切换是否正常
    status: completed
    dependencies:
      - modify-app-vue
  - id: verify-global-style
    content: 验证横屏提示等全局功能是否仍然有效
    status: completed
    dependencies:
      - test-functionality
---

## 产品概述

调整 uniapp vue3 项目的组件结构，优化页面层级关系，消除重复内容。

## 核心功能

- 将 SinglePageContainer 组件从 App.vue 迁移到 pages/index/index.vue
- 清理 pages/index/index.vue 中重复的商圈卡片内容
- 确保应用整体结构和滑动体验保持一致

## 技术栈

- 框架：uniapp + Vue 3
- 构建工具：Vite
- 状态管理：Pinia
- 路由：uniapp 内置路由

## 架构设计

### 当前问题分析

1. **组件层级不合理**：SinglePageContainer 在 App.vue 中，导致所有页面都包含滑动容器
2. **内容重复**：pages/index/index.vue 包含商圈卡片，而 SinglePageContainer 内部也有商圈场景
3. **职责不清晰**：首页应该负责展示入口，而不是同时包含滑动逻辑

### 调整方案

将 SinglePageContainer 下放到 pages/index/index.vue，使组件层级更加合理：

- App.vue：应用根组件，只保留全局样式和横屏提示
- pages/index/index.vue：首页，使用 SinglePageContainer 提供滑动体验
- SinglePageContainer：保持完整的商圈场景滑动逻辑

### 数据流

```mermaid
graph TD
    App.vue -->|引入| pages/index/index.vue
    pages/index/index.vue -->|引入| SinglePageContainer.vue
    SinglePageContainer.vue -->|使用| 各商圈场景组件
    SinglePageContainer.vue -->|调用| Store(状态管理)
```

## 实现细节

### 核心目录结构

```
project-root/
├── App.vue                     # 移除 SinglePageContainer，保留全局配置
└── pages/
    └── index/
        └── index.vue           # 使用 SinglePageContainer，移除商圈卡片
```

### 关键修改点

**App.vue 修改**：

- 移除 `import SinglePageContainer`
- 移除模板中的 `<SinglePageContainer />`
- 保留横屏提示和全局样式

**pages/index/index.vue 修改**：

- 导入 `SinglePageContainer` 组件
- 在模板中使用 `<SinglePageContainer />`
- 移除原有的商圈卡片列表、功能入口等重复内容
- 保留必要的样式和逻辑

### 技术实现步骤

1. 备份现有文件，确保可以回滚
2. 修改 pages/index/index.vue，替换内容为 SinglePageContainer
3. 修改 App.vue，移除 SinglePageContainer 引用
4. 验证滑动功能和商圈场景是否正常
5. 测试横屏提示是否仍然有效