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\，使其与当前的代码实现和功能逻辑完全保持一致，为后续开发提供了准确的参考。
56 lines
5.6 KiB
Markdown
56 lines
5.6 KiB
Markdown
# 1.1.2 通用基础页面 - 原型功能说明文档
|
||
|
||
本说明文档基于《1.1.1 通用基础页面 - 原型初设计》中的线框图，旨在对每个页面的功能、交互逻辑和关键业务规则进行详细阐述。
|
||
|
||
---
|
||
|
||
## 1. 首页 (Home)
|
||
|
||
| 区域/元素 | 功能说明 | 交互逻辑与规则 |
|
||
| :--- | :--- | :--- |
|
||
| **搜索框** | 1. 提供全局搜索入口。<br>2. 默认显示引导性文字，如“搜索食品、成分、文章”。 | 1. 点击后，跳转至独立的“搜索页”。<br>2. 搜索框内应有清除按钮。 |
|
||
| **核心扫码/拍照入口** | 1. APP最核心的功能入口，必须在视觉上最醒目。<br>2. 承载“拍照识别配料表”和“扫描识别条形码”两大功能。 | 1. 点击后，直接调起“扫码/拍照页”。<br>2. 需向用户请求相机权限（首次）。 |
|
||
| **个性化动态卡片** | 1. 基于用户的健康档案和历史行为，推送强相关的动态。<br>2. 示例：“您关注的宝宝辅食有新的评测”、“您设置的过敏原‘坚果’在一款新产品中被发现”。 | 1. 此区域为动态内容，若无相关动态则不显示。<br>2. 点击卡片，应跳转至对应的内容详情页或产品分析页。 |
|
||
| **“健康知食”信息流** | 1. 以信息流形式，向用户推荐平台精选的健康资讯、科普文章、评测报告等。 | 1. 采用“无限滚动”加载机制。<br>2. 点击任一卡片，跳转至对应的“文章/视频详情页”。 |
|
||
| **底部导航栏** | 1. 提供APP四大核心模块的固定入口：首页、发现、健康厨房、我的。 | 1. “首页”为当前选中状态。<br>2. 点击其他图标，切换到对应的一级模块页面。 |
|
||
|
||
---
|
||
|
||
## 2. 智能食鉴 - 扫码/拍照页
|
||
|
||
| 区域/元素 | 功能说明 | 交互逻辑与规则 |
|
||
| :--- | :--- | :--- |
|
||
| **相机视图与对齐框** | 1. 实时展示手机摄像头捕捉的画面。<br>2. 提供清晰的对齐框，引导用户将“条形码”或“配料表”置于框内以获得最佳识别效果。 | 1. 系统自动对焦。<br>2. 当识别到有效的条形码或清晰的配料表文字时，自动触发分析，并跳转至“分析结果页”。<br>3. 若3-5秒内无法自动识别，可提示用户“请确保光线充足、文字清晰”。 |
|
||
| **手电筒开关** | 在光线不足的环境下，打开手机闪光灯进行补光。 | 点击图标可开启/关闭手电筒。 |
|
||
| **“相册”入口** | 允许用户从手机相册中选择已拍好的食品包装图片进行分析。 | 点击后，调用系统相册让用户选择图片。 |
|
||
| **“输入”入口** | 提供手动输入条形码数字的备用方案。 | 点击后，弹出数字键盘，供用户输入条形码。 |
|
||
|
||
---
|
||
|
||
## 3. 智能食鉴 - 分析结果页
|
||
|
||
| 区域/元素 | 功能说明 | 交互逻辑与规则 |
|
||
| :--- | :--- | :--- |
|
||
| **核心结论区** | 1. **品类“照妖镜”**：揭示产品法定真实品类，打破营销误导。<br>2. **安全/营养双重评级**：用最直观的方式（颜色+等级）给出核心判断。<br>3. **一句话总结**：用大白话概括结论，尤其对风险进行强提示。 | 1. 此区域内容为页面核心，必须在首屏完整展示，不可折叠。<br>2. 安全评级必须使用醒目的颜色块（绿/黄/橙/红）以强化视觉感知。 |
|
||
| **个性化风险高亮** | 基于用户的“健康档案”，如果产品成分触发了用户的过敏原、禁忌等，在此处用醒目方式（如红色文字、警告图标）进行强提醒。 | 1. 此为个性化模块，仅在触发时显示。<br>2. 需明确指出是为哪位家庭成员（如“宝宝”）触发的风险。 |
|
||
| **健康替代品推荐** | 对于评级为C/D的“不推荐”产品，提供2-3个同品类、更高评级的“推荐”产品作为替代方案，完成商业闭环。 | 1. 以横向滑动卡片形式展示。<br>2. 点击卡片可跳转至该替代品的“分析结果页”或“商品详情页”。 |
|
||
| **完整成分列表** | 默认收起，供希望深度了解的用户点击查看。列表中的成分会根据风险等级进行标记。 | 点击后，在当前页面展开详细列表。 |
|
||
| **SHI健康指数** | 展示该产品最终的SHI分数，并提供入口让用户了解该分数的计算方法，以建立信任。 | 点击“查看评分模型说明”链接，跳转至独立的“SHI评分模型说明页”。 |
|
||
|
||
---
|
||
|
||
## 4. SHI评分模型说明页
|
||
|
||
| 区域/元素 | 功能说明 | 交互逻辑与规则 |
|
||
| :--- | :--- | :--- |
|
||
| **内容区** | 作为一个静态内容页面，详细、透明地解释SHI指数的构成（基础分、加分项、减分项），以及各项的判断依据。 | 页面内容应图文并茂，通俗易懂，避免使用过分专业的术语。 |
|
||
|
||
---
|
||
|
||
## 5. 搜索页 & 搜索结果页
|
||
|
||
| 区域/元素 | 功能说明 | 交互逻辑与规则 |
|
||
| :--- | :--- | :--- |
|
||
| **搜索页** | 1. **历史记录**：方便用户快速进行重复搜索。<br>2. **热门搜索**：引导用户发现平台内的热点内容。 | 1. 历史记录最多显示最近的5-10条，并提供“清空历史记录”的按钮。<br>2. 点击任一历史记录或热门搜索词，直接执行搜索并跳转至“搜索结果页”。 |
|
||
| **搜索结果页** | 1. **Tab分类**：将搜索结果清晰地分为“全部”、“食品”、“文章”等类别，方便用户筛选。<br>2. **结果列表**：根据用户选择的Tab，展示对应的搜索结果。 | 1. 默认选中“全部”Tab。<br>2. 点击不同Tab，下方结果列表进行相应切换。<br>3. 若某一分类下无结果，应显示空状态提示，如“未找到相关的食品”。 |
|