wenzhe
/
qs_xinchun2026_h5
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
qs_xinchun2026_h5/.codebuddy/plans/调整组件结构计划_26ff8952.md

3.4 KiB
Raw Permalink Blame History

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

数据流

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