6.9 KiB
6.9 KiB
“食话食说” App 原型功能说明文档
文档目的: 本文档旨在为技术开发团队提供最终版的页面功能说明、交互反馈及布局规范，作为前端开发的最终参考依据。
版本: 2.1 (补充 Onboarding 复杂交互)
页面流程总览
应用启动后，用户将经历以下流程：
启动页 -> 登录/注册页 -> 用户引导流程 (Onboarding) -> 应用主页
用户在登录页也可以跳转至 用户协议/隐私政策页。
1. 启动页 (SplashView.vue)
- 页面名称: Splash Screen / 启动页
- 文件路径:
shihuashishuo-ui/src/views/SplashView.vue
1.1. 功能描述
- 核心功能: 作为应用的入口，展示品牌信息，并在短暂延迟后自动导航到下一页面。
- 显示元素:
- 应用 Logo: 💬
- 应用名称: "食话食说"
- 应用口号: "食品真相, 实话实说"
- 版本号: "Version 1.0.0"
1.2. 交互反馈
- 自动跳转: 页面加载完成
2.5秒后，系统自动跳转到 登录/注册页 (/login)。 - 用户交互: 此页面无任何用户可操作的交互元素。
1.3. 布局与自适应效果
- 布局: 采用 Flexbox 垂直居中布局，确保品牌信息在各种屏幕尺寸上都能完美居中。
- 背景色: 页面背景色为淡绿色 (
#f0fdf4)。 - 品牌色: 应用名称字体颜色为品牌绿色 (
#22c55e)。
2. 登录/注册页 (LoginView.vue)
- 页面名称: Login / Register Page / 登录注册页
- 文件路径:
shihuashishuo-ui/src/views/LoginView.vue
2.1. 功能描述
- 核心功能: 提供用户注册和登录的入口。
- 显示元素:
- 主标题: "食话食说 Talk of Food"
- 副标题: "守护您和家人的每一餐"
- 手机号输入框 (带 📱 图标)
- 验证码输入框 (带 ✉️ 图标)
- "获取验证码" 按钮
- "登录 / 注册" 主按钮
- "或" 分割线
- "微信一键登录" 按钮 (带 🟢 图标)
- 政策同意复选框及链接
2.2. 交互反馈
- 微信一键登录: 点击后，跳转到 用户引导流程页 (
/onboarding)。 - 政策链接: 点击
用户协议或隐私政策链接，页面跳转到 政策详情页 (/policy)。
2.3. 布局与自适应效果
- 整体布局:
- 采用垂直 Flex 布局，内容水平居中。
- 页面整体可垂直滚动，以完美适配矮屏幕（如 Nest Hub），确保所有内容可见。
- 核心间距:
- 页面左右留白为 40px。
- 顶部欢迎语区域距离屏幕顶部的距离为 100px (
padding-top)。 - 欢迎语区域与下方表单区域的间距为 40px (
margin-bottom)。 - 两个输入框之间、验证码输入框与“登录/注册”按钮之间的垂直间距，统一为 20px。
- 元素尺寸与样式:
- 手机号和验证码输入框的垂直内边距为 12px，与下方“登录/注册”和“微信登录”按钮的垂直内边距保持一致，视觉上高度统一。
- “获取验证码”按钮字体大小为 14px，并设置了
white-space: nowrap以防止在窄屏幕上换行。 - “或”分割线的字体大小为 12px，其上下外边距均为 10px，布局紧凑。
- 响应式修复:
- 输入框元素已添加
min-width: 0样式，从根本上解决了在极窄屏幕（如 Samsung Galaxy S8+）上，“获取验证码”按钮被挤出边界的 bug。
- 输入框元素已添加
3. 用户引导流程 (OnboardingView.vue & OnboardingStep.vue)
- 页面名称: Onboarding / 用户偏好设置
- 文件路径:
shihuashishuo-ui/src/views/OnboardingView.vue(流程控制器)shihuashishuo-ui/src/views/OnboardingStep.vue(可复用步骤组件)
3.1. 功能描述
- 核心功能: 在用户首次登录后，通过一个 4 步骤的流程收集用户的健康和饮食偏好。
- 流程步骤:
- 关注点 (多选): "您的首要关注点是？"
- 过敏原 (多选): "有需要特别避开的过敏原吗？"
- 基础疾病 (多选): "是否有需要关注的基础疾病？"
- 饮食偏好 (多选): "有没有特别的饮食偏好或忌口？"
3.2. 交互反馈 (详细)
- 通用交互:
跳过按钮: 在任何步骤点击，都会立即退出引导流程，并跳转到应用主页 (/)。下一步按钮: 保存当前步骤的选择，并进入下一个步骤。< 返回按钮 (从第二步开始): 返回上一个步骤。完成按钮: 在最后一步，下一步按钮变为完成，开启健康生活。点击后，记录所有偏好，并跳转到应用主页 (/)。
- 步骤 1 (独立实现):
- 交互: 用户可点击多个选项按钮进行选择。被选中的按钮会变为蓝色高亮状态。
- 引导: 第一个选项 "食品安全" 在未被选中时，会有一个品牌绿色的高亮边框，以引导用户开始选择。
- 步骤 2, 3, 4 (复用
OnboardingStep.vue组件):- 搜索功能: 用户可以在顶部的搜索框中输入关键词，下方的选项列表会实时过滤，匹配的选项会以品牌绿色的高亮边框突出显示。
- Tag 式选择反馈: 所有被选中的选项，都会以蓝色的 Tag 标签形式显示在搜索框下方。用户可以通过点击 Tag 上的 "×" 来快速取消选择。
- "无" 选项互斥逻辑: 如果选择了 "无" 选项，其他所有已选的 Tag 会被自动清除。反之，如果选择了任何其他选项，"无" 选项的 Tag 会被自动清除。
- 自定义添加: 如果用户在搜索框中输入的文本，在现有选项中找不到完全匹配，系统会自动显示一个
+ 添加自定义：“...”的按钮。点击该按钮，会将当前输入的文本作为一个新的 Tag 添加到已选列表中。
3.3. 布局与自适应效果
- 布局:
- 所有步骤的选项都采用两列网格布局 (
grid-template-columns: repeat(2, 1fr))，在所有屏幕尺寸上都能保持一致的两列表单结构。 - 步骤 2, 3, 4 在标题下方新增了一个全宽的搜索框。
- 所有步骤的选项都采用两列网格布局 (
- 按钮样式: 选项按钮为更显方的圆角矩形 (
border-radius: 8px)。
4. 政策详情页 (PolicyView.vue)
- 页面名称: Policy Page / 用户协议或隐私政策页
- 文件路径:
shihuashishuo-ui/src/views/PolicyView.vue
4.1. 功能描述
- 核心功能: 显示静态的法律条款文本。
- 显示元素:
- 带返回按钮的顶部导航栏
- 页面标题 (如: "用户协议")
- 条款内容
4.2. 交互反馈
- 返回: 点击左上角的
< 返回按钮，页面会返回到之前的页面。
4.3. 布局与自适应效果
- 导航栏: 采用 Flexbox 布局，标题居中，返回按钮居左。