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