152 lines
6.6 KiB
Markdown
152 lines
6.6 KiB
Markdown
|
# 1.1.2 通用基础页面 - 功能说明文档 (v2.0)
|
|||
|
|
|
|||
|
|
**文档目的:** 本文档旨在为技术开发团队提供最终版的页面功能说明、交互反馈及业务规则，作为前端开发的最终参考依据。
|
|||
|
|
|
|||
|
|
**版本:** 2.0 (同步代码重构，新增登录流程页面)
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 页面流程总览
|
|||
|
|
|
|||
|
|
应用启动后，用户将经历以下核心流程：
|
|||
|
|
|
|||
|
|
`启动页` -> `登录/注册页` -> `用户引导流程 (Onboarding)` -> `应用主页`
|
|||
|
|
|
|||
|
|
**登录/注册流程分支:**
|
|||
|
|
* 用户可在 `登录/注册页` 选择 `密码登录`。
|
|||
|
|
* 用户可在 `密码登录页` 选择 `忘记密码`。
|
|||
|
|
* 用户可在 `登录/注册页` 选择 `第三方社交账户登录`。
|
|||
|
|
* 用户可在 `登录/注册页` 查看 `用户协议/隐私政策`。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 1. 启动页 (`SplashView-闪屏页.vue`)
|
|||
|
|
|
|||
|
|
- **页面名称:** Splash Screen / 启动页
|
|||
|
|
- **文件路径:** `shihuashishuo-ui/src/views/通用基础页/SplashView-闪屏页.vue`
|
|||
|
|
|
|||
|
|
### 1.1. 功能描述
|
|||
|
|
- **核心功能:** 作为应用的入口，展示品牌信息，并在短暂延迟后自动导航到登录页。
|
|||
|
|
- **显示元素:**
|
|||
|
|
- 应用 Logo (居中，位于文字上方)
|
|||
|
|
- 应用名称: "食话食说 Talk of Food"
|
|||
|
|
- 应用口号: "食品真相，食话食说"
|
|||
|
|
|
|||
|
|
### 1.2. 交互反馈
|
|||
|
|
- **自动跳转:** 页面加载完成 `2.5` 秒后，系统自动跳转到 **登录/注册页** (`/login`)。
|
|||
|
|
- **用户交互:** 此页面无任何用户可操作的交互元素。
|
|||
|
|
|
|||
|
|
### 1.3. 布局与样式
|
|||
|
|
- **布局:** 采用 Flexbox 垂直居中布局。
|
|||
|
|
- **背景:** 柔和的从上至下线性渐变 (`#fafff5` -> `#f0fdf4`)。
|
|||
|
|
- **字体大小:** 应用标题为 `32px` 以适应中英文组合。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 2. 登录认证流程
|
|||
|
|
|
|||
|
|
### 2.1. 登录/注册页 (`LoginView-登录页-2.0.vue`)
|
|||
|
|
|
|||
|
|
- **页面名称:** Login / Register Page / 登录注册页
|
|||
|
|
- **文件路径:** `shihuashishuo-ui/src/views/通用基础页/LoginView-登录页-2.0.vue`
|
|||
|
|
|
|||
|
|
#### 2.1.1. 功能描述
|
|||
|
|
- **核心功能:** 提供用户通过手机验证码注册/登录的主入口，并分流至其他登录方式。
|
|||
|
|
- **显示元素:**
|
|||
|
|
- 手机号输入框 (11位数字限制)
|
|||
|
|
- 验证码输入框 (6位数字限制)
|
|||
|
|
- "获取验证码" 按钮
|
|||
|
|
- "登录 / 注册" 主按钮
|
|||
|
|
- "密码登录" 文字按钮
|
|||
|
|
- 第三方社交登录图标 (微信, QQ, 抖音, 微博)
|
|||
|
|
- 政策同意复选框及链接
|
|||
|
|
|
|||
|
|
#### 2.1.2. 交互反馈
|
|||
|
|
- **获取验证码:** 点击后，按钮进入60秒倒计时，期间不可再次点击。
|
|||
|
|
- **登录/注册:** (临时) 点击后，跳转到 **用户引导流程页** (`/onboarding`)。
|
|||
|
|
- **密码登录:** 点击后，跳转到 **密码登录页** (`/password-login`)。
|
|||
|
|
- **社交登录:** 点击任一社交图标，跳转到 **第三方授权页** (`/auth`)，并通过URL参数传递平台名称。
|
|||
|
|
- **政策链接:** 点击 `用户协议` 或 `隐私政策` 链接，页面跳转到 **政策详情页** (`/policy`)。
|
|||
|
|
|
|||
|
|
### 2.2. 密码登录页 (`PasswordLoginView-密码登录页.vue`)
|
|||
|
|
|
|||
|
|
- **页面名称:** Password Login Page / 密码登录页
|
|||
|
|
- **文件路径:** `shihuashishuo-ui/src/views/通用基础页/PasswordLoginView-密码登录页.vue`
|
|||
|
|
|
|||
|
|
#### 2.2.1. 功能描述
|
|||
|
|
- **核心功能:** 为已注册用户提供通过手机号和密码登录的方式。
|
|||
|
|
- **显示元素:**
|
|||
|
|
- 手机号输入框
|
|||
|
|
- 密码输入框
|
|||
|
|
- "登录" 按钮
|
|||
|
|
- "← 其它登录方式" 链接
|
|||
|
|
- "忘记密码?" 链接
|
|||
|
|
|
|||
|
|
#### 2.2.2. 交互反馈
|
|||
|
|
- **登录:** (临时) 点击后，跳转到 **用户引导流程页** (`/onboarding`)。
|
|||
|
|
- **其它登录方式:** 点击后，返回 **登录/注册页** (`/login`)。
|
|||
|
|
- **忘记密码?:** 点击后，跳转到 **忘记密码页** (`/forgot-password`)。
|
|||
|
|
|
|||
|
|
### 2.3. 忘记密码页 (`ForgotPasswordView-忘记密码页.vue`)
|
|||
|
|
|
|||
|
|
- **页面名称:** Forgot Password Page / 忘记密码页
|
|||
|
|
- **文件路径:** `shihuashishuo-ui/src/views/通用基础页/ForgotPasswordView-忘记密码页.vue`
|
|||
|
|
|
|||
|
|
#### 2.3.1. 功能描述
|
|||
|
|
- **核心功能:** 通过两步验证，引导用户安全地重设密码。
|
|||
|
|
- **流程步骤:**
|
|||
|
|
1. **验证身份:** 输入手机号和验证码，点击 "下一步"。
|
|||
|
|
2. **重设密码:** 验证通过后，输入新密码和确认密码，点击 "确认重设"。
|
|||
|
|
|
|||
|
|
#### 2.3.2. 交互反馈
|
|||
|
|
- **获取验证码:** 与登录页逻辑相同，有60秒倒计时。
|
|||
|
|
- **下一步:**
|
|||
|
|
- (临时) 如果验证码为 "111111"，则进入重设密码步骤。
|
|||
|
|
- 如果验证码错误，页面下方显示红色错误提示 "验证码错误，请重试"。
|
|||
|
|
- **确认重设:**
|
|||
|
|
- 如果两次输入的密码不一致，显示错误提示 "两次输入的密码不一致"。
|
|||
|
|
- (临时) 如果密码一致，模拟重设成功并跳转回 **登录/注册页** (`/login`)。
|
|||
|
|
- **返回登录:** 点击后，返回上一页。
|
|||
|
|
|
|||
|
|
### 2.4. 第三方授权页 (`ThirdPartyAuthView-授权登录页.vue`)
|
|||
|
|
|
|||
|
|
- **页面名称:** Third Party Auth Page / 第三方授权页
|
|||
|
|
- **文件路径:** `shihuashishuo-ui/src/views/通用基础页/ThirdPartyAuthView-授权登录页.vue`
|
|||
|
|
|
|||
|
|
#### 2.4.1. 功能描述
|
|||
|
|
- **核心功能:** 作为用户点击社交登录图标后的中转页面，模拟向第三方平台请求授权的过程。
|
|||
|
|
- **显示元素:**
|
|||
|
|
- 加载动画 (Spinner)
|
|||
|
|
- 动态文本，如 "正在通过 微信 安全登录..."
|
|||
|
|
|
|||
|
|
#### 2.4.2. 交互反馈
|
|||
|
|
- **自动跳转:** 页面加载 `2` 秒后，模拟授权成功，自动跳转到 **用户引导流程页** (`/onboarding`)。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 3. 用户引导流程 (`OnboardingView.vue` & `OnboardingStep.vue`)
|
|||
|
|
|
|||
|
|
- **页面名称:** Onboarding / 用户偏好设置
|
|||
|
|
- **文件路径:**
|
|||
|
|
- `shihuashishuo-ui/src/views/通用基础页/OnboardingView.vue` (流程控制器)
|
|||
|
|
- `shihuashishuo-ui/src/views/通用基础页/OnboardingStep.vue` (可复用步骤组件)
|
|||
|
|
|
|||
|
|
### 3.1. 功能描述
|
|||
|
|
- **核心功能:** 在用户首次登录后，通过一个多步骤的流程收集用户的健康和饮食偏好。
|
|||
|
|
- **流程步骤:** 关注点 -> 过敏原 -> 基础疾病 -> 饮食偏好。
|
|||
|
|
|
|||
|
|
### 3.2. 交互反馈
|
|||
|
|
- **通用交互:** `跳过`, `下一步`, `返回`, `完成` 按钮逻辑与之前版本一致。
|
|||
|
|
- **核心交互:** 搜索、Tag式选择、"无"选项互斥、自定义添加等复杂交互逻辑均已实现。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 4. 政策详情页 (`PolicyView.vue`)
|
|||
|
|
|
|||
|
|
- **页面名称:** Policy Page / 用户协议或隐私政策页
|
|||
|
|
- **文件路径:** `shihuashishuo-ui/src/views/通用基础页/PolicyView.vue`
|
|||
|
|
|
|||
|
|
### 4.1. 功能描述
|
|||
|
|
- **核心功能:** 显示静态的法律条款文本。
|
|||
|
|
- **交互反馈:** 点击左上角的 `< 返回` 按钮，页面会返回到之前的页面。
|