L.star
f2034c6709
本次提交对用户认证与引导流程进行了全面的重构和功能增强。
核心变更:
1. **文件结构重构:**
* 将所有登录、注册、引导相关的页面组件（共9个）统一移动到了新的 \shihuashishuo-ui/src/views/通用基础页/\ 目录下，使项目结构更清晰。
* 删除了旧路径下的相应文件。
2. **新增功能页面:**
* **密码登录:** 新增了 \PasswordLoginView-密码登录页.vue\，为用户提供了手机验证码之外的另一种登录选择。
* **忘记密码:** 新增了 \ForgotPasswordView-忘记密码页.vue\，包含一个完整的、带验证码校验的两步式密码重设流程。
* **第三方授权:** 新增了 \ThirdPartyAuthView-授权登录页.vue\ 作为处理社交登录的中转页。
3. **功能增强与修复:**
* **登录页 (\LoginView\):**
* UI更新：将原有的微信一键登录按钮替换为包含微信、QQ等多种方式的社交登录图标组。
* 交互增强：为获取验证码按钮增加了60秒倒计时功能，并对手机号和验证码输入框增加了长度和字符类型限制。
* **闪屏页 (\SplashView\):**
* UI更新：根据新的设计稿，将页面重构为包含Logo、应用名称和Slogan的居中布局，并增加了渐变背景效果。
* **路由 (\
outer/index.ts\):**
* 全面更新了所有相关页面的导入路径以匹配新的文件结构。
* 移除了对已废弃的 \HomeView-首页-1.0.vue\ 的引用，修复了编译错误。
4. **文档更新:**
* 新增并全面重写了 \1.1.2通用基础页面-原型功能说明文档-2.0.md\，使其与当前的代码实现和功能逻辑完全保持一致，为后续开发提供了准确的参考。
103 lines
4.7 KiB
Markdown
103 lines
4.7 KiB
Markdown
# “食话食说”APP - 视图层(Views)工作日志快照
|
||
|
||
**最后更新**: 2025-07-23 13:12:29 (UTC+8)
|
||
**目的**: 为 `shihuashishuo-ui/src/views` 目录下的所有页面组件提供一份简明扼要的功能说明和状态记录，以便于快速理解项目结构和进行后续开发。
|
||
|
||
---
|
||
|
||
## 设计依据
|
||
|
||
本文件中所有页面的设计思路、功能定义及交互逻辑，均源于以下核心文档，并应以此为准：
|
||
|
||
* **产品需求文档**: [`0-产品需求文档/`](0-产品需求文档/)
|
||
* **原型设计及功能说明**: [`1-原型设计及功能说明/`](1-原型设计及功能说明/)
|
||
|
||
---
|
||
|
||
## 1. 核心体验流程页面
|
||
|
||
这些页面构成了用户使用APP最核心的功能路径。
|
||
|
||
* **`ScanView-扫码页.vue`**
|
||
* **用途**: APP的核心功能页面，用于拉起设备摄像头，进行食品包装的二维码或条形码扫描。
|
||
* **状态**: 结构占位，需实现相机调用、扫码识别及与后端API的交互逻辑。
|
||
|
||
* **`SearchView-搜索页.vue`**
|
||
* **用途**: 提供手动输入关键词搜索食品、成分或品牌的功能，是扫码功能的补充。
|
||
* **状态**: 结构占位，需实现搜索框、历史记录、搜索建议及API调用逻辑。
|
||
|
||
* **`SearchResultView-搜索结果页.vue`**
|
||
* **用途**: 展示通过关键词搜索返回的结果列表。
|
||
* **状态**: 结构占位，需实现结果列表的渲染、分页加载和错误状态处理。
|
||
|
||
* **`ResultView-结果页.vue`**
|
||
* **用途**: 展示单个食品的最终分析结果。这是对用户最有价值的页面之一，会包含成分解析、安全评级、营养信息等。
|
||
* **状态**: 结构占位，需根据后端API返回的数据结构，设计精细化的数据可视化组件。
|
||
|
||
---
|
||
|
||
## 2. 主要导航页面 (底部Tab栏)
|
||
|
||
这些页面是APP的一级模块，通过底部导航栏进行切换。
|
||
|
||
* **`HomeView-首页-2.0.vue`**
|
||
* **用途**: 用户登录后的主入口，也是我们本次迭代的核心。
|
||
* **状态**: **v2.5.1 (已完成)**。经过多轮迭代，现已包含搜索热词、精巧的扫码按钮、个性化提示、含圆形进度盘的健康看板及内容信息流。功能完善，设计现代。
|
||
|
||
* **`DiscoverView-发现页.vue`**
|
||
* **用途**: 内容中心，以信息流形式展示与食品安全、健康知识相关的文章、资讯和评测。
|
||
* **状态**: 结构占位，需实现文章列表的渲染和分类筛选功能。
|
||
|
||
* **`KitchenView-厨房页.vue`**
|
||
* **用途**: 健康厨房模块，提供健康菜谱、饮食搭配建议等功能。
|
||
* **状态**: 结构占位，需实现菜谱的展示和搜索功能。
|
||
|
||
* **`MallView-商城页.vue`**
|
||
* **用途**: 电商模块，用于推荐和销售与健康饮食相关的商品。
|
||
* **状态**: 结构占位，需实现商品列表、分类及详情页的跳转逻辑。
|
||
|
||
* **`MeView-我的.vue`**
|
||
* **用途**: 个人中心，用于管理用户资料、健康档案、设置、查看收藏等。
|
||
* **状态**: 结构占位，需实现各功能入口的列表展示。
|
||
|
||
---
|
||
|
||
## 3. 用户引导与认证页面
|
||
|
||
这些页面负责用户的首次进入、注册、登录等流程。
|
||
|
||
* **`SplashView-闪屏页.vue`**
|
||
* **用途**: APP启动时展示的第一个页面，通常用于显示品牌Logo或进行短暂的初始化。
|
||
* **状态**: 基础实现，通常在几秒后自动跳转到引导页或登录页。
|
||
|
||
* **`OnboardingView-引导页.vue`**
|
||
* **用途**: 用户首次打开APP时的功能介绍和引导流程，通常是可滑动的卡片。
|
||
* **状态**: 结构占位，需与 `OnboardingStep-引导步骤.vue` 配合实现。
|
||
|
||
* **`OnboardingStep-引导步骤.vue`**
|
||
* **用途**: 单个引导步骤的组件，被 `OnboardingView` 复用。
|
||
* **状态**: 结构占位。
|
||
|
||
* **`LoginView-登录页.vue`**
|
||
* **用途**: 用户登录/注册页面。
|
||
* **状态**: 结构占位，需实现输入框、按钮及登录认证逻辑。
|
||
|
||
* **`PolicyView-协议页.vue`**
|
||
* **用途**: 用于展示用户协议和隐私政策的静态文本页面。
|
||
* **状态**: 结构占位，需填充具体的协议内容。
|
||
|
||
---
|
||
|
||
## 4. 其他功能与历史版本页面
|
||
|
||
* **`MessageView-消息列表页.vue`**
|
||
* **用途**: 用于展示系统通知、用户互动等消息。
|
||
* **状态**: 结构占位。
|
||
|
||
* **`HomeView-首页-1.0.vue`**
|
||
* **用途**: 首页的早期版本。
|
||
* **状态**: **已废弃**。功能和代码与 `2.0` 初始版本一致，可作为历史参考。
|
||
|
||
* **`HomeView-首页-2.0.backup.vue`**
|
||
* **用途**: 在第三轮迭代 (v2.3) 开始前创建的 **v2.2 版本备份**。
|
||
* **状态**: **备份文件**。可用于回滚或对比。 |