57 lines
2.9 KiB
Markdown
57 lines
2.9 KiB
Markdown
|
# “食话食说”APP - 核心体验模块前端实现说明
|
|||
|
|
|
|||
|
|
**版本:** 1.0
|
|||
|
|
**日期:** 2025-07-22
|
|||
|
|
**作者:** Roo (AI Assistant)
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 1. 概述
|
|||
|
|
|
|||
|
|
本文档记录了“食话食说”APP核心体验模块的前端实现细节。本次开发基于 `1-原型设计及功能说明/2.1.1核心体验页-原型初设计.md` 文档，在 `shihuashishuo-ui` (Vue 3 + TypeScript) 项目中完成了相关页面的纯前端实现。
|
|||
|
|
|
|||
|
|
## 2. 核心架构决策
|
|||
|
|
|
|||
|
|
### 2.1. 布局 (Layout)
|
|||
|
|
|
|||
|
|
- 为了实现带底部导航栏的通用布局，我们创建了 `src/layouts/MainLayout.vue` 组件。
|
|||
|
|
- 该组件使用 Flexbox 布局，包含一个可独立滚动的内容区 (`<main>`) 和一个固定在底部的导航栏 (`<nav>`)。
|
|||
|
|
- 所有需要底部导航的页面都将作为此布局的子路由进行渲染。
|
|||
|
|
|
|||
|
|
### 2.2. 路由 (Routing)
|
|||
|
|
|
|||
|
|
- 我们在 `src/router/index.ts` 中引入了**嵌套路由**。
|
|||
|
|
- 创建了一个新的顶层路由 `/app`，它使用 `MainLayout.vue` 作为组件。
|
|||
|
|
- 所有核心页面（如 `home`, `scan`, `search` 等）都作为 `/app` 的子路由进行配置，确保它们能被正确地渲染在 `MainLayout` 的 `<RouterView>` 中。
|
|||
|
|
|
|||
|
|
## 3. 已实现页面清单
|
|||
|
|
|
|||
|
|
以下是本次开发中创建或修改的主要文件：
|
|||
|
|
|
|||
|
|
- **布局:**
|
|||
|
|
- `src/layouts/MainLayout.vue`: 核心应用布局。
|
|||
|
|
|
|||
|
|
- **视图 (Views):**
|
|||
|
|
- `src/views/HomeView.vue`: 首页，包含核心功能入口和内容信息流。
|
|||
|
|
- `src/views/ScanView.vue`: 扫码/拍照页，使用模拟的UI来代表摄像头功能。
|
|||
|
|
- `src/views/ResultView.vue`: 分析结果页，静态展示了所有设计元素。
|
|||
|
|
- `src/views/SearchView.vue`: 搜索页，包含输入框、历史记录和热门搜索。
|
|||
|
|
- `src/views/SearchResultView.vue`: 搜索结果页，包含Tab分类和结果列表。
|
|||
|
|
- `src/views/DiscoverView.vue`: “发现”页面的占位桩。
|
|||
|
|
- `src/views/CommunityView.vue`: “社区”页面的占位桩。
|
|||
|
|
- `src/views/MeView.vue`: “我的”页面的占位桩。
|
|||
|
|
|
|||
|
|
- **路由配置:**
|
|||
|
|
- `src/router/index.ts`: 已更新，包含了上述所有页面的路由配置。
|
|||
|
|
|
|||
|
|
## 4. 样式与风格
|
|||
|
|
|
|||
|
|
- 本次实现**没有引入任何第三方UI库**。
|
|||
|
|
- 所有组件的样式均通过**范围化CSS (Scoped CSS)** 实现，以避免全局样式污染。
|
|||
|
|
- 编码风格严格参考了项目中已有的 `LoginView.vue`，确保了视觉和代码风格的统一性。主色调为绿色 (`#22c55e`)。
|
|||
|
|
|
|||
|
|
## 5. 后续工作建议
|
|||
|
|
|
|||
|
|
- **数据模拟**: 当前所有页面均使用硬编码的静态数据。下一步可以引入 Pinia 来管理状态，并创建 mock data store 来模拟API请求和数据流。
|
|||
|
|
- **组件拆分**: 对于 `ResultView.vue` 和 `HomeView.vue` 等复杂页面，可以考虑将其中的卡片（如评级卡、信息流卡）拆分为更小的、可复用的子组件，以提高代码的可维护性。
|
|||
|
|
- **相机API**: `ScanView.vue` 的摄像头功能需要与原生设备API或Cordova/Capacitor等跨平台方案进行集成。
|