111 lines
3.4 KiB
Markdown
111 lines
3.4 KiB
Markdown
---
|
||
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. 测试横屏提示是否仍然有效 |