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\，使其与当前的代码实现和功能逻辑完全保持一致，为后续开发提供了准确的参考。
6.6 KiB
6.6 KiB
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. 功能描述
- 核心功能: 通过两步验证，引导用户安全地重设密码。
- 流程步骤:
- 验证身份: 输入手机号和验证码，点击 "下一步"。
- 重设密码: 验证通过后，输入新密码和确认密码，点击 "确认重设"。
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. 功能描述
- 核心功能: 显示静态的法律条款文本。
- 交互反馈: 点击左上角的
< 返回按钮，页面会返回到之前的页面。