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\，使其与当前的代码实现和功能逻辑完全保持一致，为后续开发提供了准确的参考。
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. 功能描述
|
||
- **核心功能:** 显示静态的法律条款文本。
|
||
- **交互反馈:** 点击左上角的 `< 返回` 按钮，页面会返回到之前的页面。
|