diff --git a/1-原型设计及功能说明/1.1.2通用基础页面-原型功能说明文档-2.0.md b/1-原型设计及功能说明/1.1.2通用基础页面-原型功能说明文档-2.0.md
new file mode 100644
index 0000000..39774da
--- /dev/null
+++ b/1-原型设计及功能说明/1.1.2通用基础页面-原型功能说明文档-2.0.md
@@ -0,0 +1,151 @@
+# 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. 功能描述
+-   **核心功能:** 显示静态的法律条款文本。
+-   **交互反馈:** 点击左上角的 `< 返回` 按钮，页面会返回到之前的页面。
diff --git a/1-原型设计及功能说明/1.1.2通用基础页-原型功能说明文档.md b/1-原型设计及功能说明/2.1.2核心体验页-原型功能说明文档.md
similarity index 100%
rename from 1-原型设计及功能说明/1.1.2通用基础页-原型功能说明文档.md
rename to 1-原型设计及功能说明/2.1.2核心体验页-原型功能说明文档.md
diff --git a/3-工作日志/3.1-工作日志-视图层(Views)快照-v1.0.md b/3-工作日志/3.1-工作日志-视图层(Views)快照-v1.0.md
new file mode 100644
index 0000000..5823e7a
--- /dev/null
+++ b/3-工作日志/3.1-工作日志-视图层(Views)快照-v1.0.md
@@ -0,0 +1,103 @@
+# “食话食说”APP - 视图层(Views)工作日志快照
+
+**最后更新**: 2025-07-23 13:12:29 (UTC+8)
+**目的**: 为 `shihuashishuo-ui/src/views` 目录下的所有页面组件提供一份简明扼要的功能说明和状态记录，以便于快速理解项目结构和进行后续开发。
+
+---
+
+## 设计依据
+
+本文件中所有页面的设计思路、功能定义及交互逻辑，均源于以下核心文档，并应以此为准：
+
+*   **产品需求文档**: [`0-产品需求文档/`](0-产品需求文档/)
+*   **原型设计及功能说明**: [`1-原型设计及功能说明/`](1-原型设计及功能说明/)
+
+---
+
+## 1. 核心体验流程页面
+
+这些页面构成了用户使用APP最核心的功能路径。
+
+*   **`ScanView-扫码页.vue`**
+    *   **用途**: APP的核心功能页面，用于拉起设备摄像头，进行食品包装的二维码或条形码扫描。
+    *   **状态**: 结构占位，需实现相机调用、扫码识别及与后端API的交互逻辑。
+
+*   **`SearchView-搜索页.vue`**
+    *   **用途**: 提供手动输入关键词搜索食品、成分或品牌的功能，是扫码功能的补充。
+    *   **状态**: 结构占位，需实现搜索框、历史记录、搜索建议及API调用逻辑。
+
+*   **`SearchResultView-搜索结果页.vue`**
+    *   **用途**: 展示通过关键词搜索返回的结果列表。
+    *   **状态**: 结构占位，需实现结果列表的渲染、分页加载和错误状态处理。
+
+*   **`ResultView-结果页.vue`**
+    *   **用途**: 展示单个食品的最终分析结果。这是对用户最有价值的页面之一，会包含成分解析、安全评级、营养信息等。
+    *   **状态**: 结构占位，需根据后端API返回的数据结构，设计精细化的数据可视化组件。
+
+---
+
+## 2. 主要导航页面 (底部Tab栏)
+
+这些页面是APP的一级模块，通过底部导航栏进行切换。
+
+*   **`HomeView-首页-2.0.vue`**
+    *   **用途**: 用户登录后的主入口，也是我们本次迭代的核心。
+    *   **状态**: **v2.5.1 (已完成)**。经过多轮迭代，现已包含搜索热词、精巧的扫码按钮、个性化提示、含圆形进度盘的健康看板及内容信息流。功能完善，设计现代。
+
+*   **`DiscoverView-发现页.vue`**
+    *   **用途**: 内容中心，以信息流形式展示与食品安全、健康知识相关的文章、资讯和评测。
+    *   **状态**: 结构占位，需实现文章列表的渲染和分类筛选功能。
+
+*   **`KitchenView-厨房页.vue`**
+    *   **用途**: 健康厨房模块，提供健康菜谱、饮食搭配建议等功能。
+    *   **状态**: 结构占位，需实现菜谱的展示和搜索功能。
+
+*   **`MallView-商城页.vue`**
+    *   **用途**: 电商模块，用于推荐和销售与健康饮食相关的商品。
+    *   **状态**: 结构占位，需实现商品列表、分类及详情页的跳转逻辑。
+
+*   **`MeView-我的.vue`**
+    *   **用途**: 个人中心，用于管理用户资料、健康档案、设置、查看收藏等。
+    *   **状态**: 结构占位，需实现各功能入口的列表展示。
+
+---
+
+## 3. 用户引导与认证页面
+
+这些页面负责用户的首次进入、注册、登录等流程。
+
+*   **`SplashView-闪屏页.vue`**
+    *   **用途**: APP启动时展示的第一个页面，通常用于显示品牌Logo或进行短暂的初始化。
+    *   **状态**: 基础实现，通常在几秒后自动跳转到引导页或登录页。
+
+*   **`OnboardingView-引导页.vue`**
+    *   **用途**: 用户首次打开APP时的功能介绍和引导流程，通常是可滑动的卡片。
+    *   **状态**: 结构占位，需与 `OnboardingStep-引导步骤.vue` 配合实现。
+
+*   **`OnboardingStep-引导步骤.vue`**
+    *   **用途**: 单个引导步骤的组件，被 `OnboardingView` 复用。
+    *   **状态**: 结构占位。
+
+*   **`LoginView-登录页.vue`**
+    *   **用途**: 用户登录/注册页面。
+    *   **状态**: 结构占位，需实现输入框、按钮及登录认证逻辑。
+
+*   **`PolicyView-协议页.vue`**
+    *   **用途**: 用于展示用户协议和隐私政策的静态文本页面。
+    *   **状态**: 结构占位，需填充具体的协议内容。
+
+---
+
+## 4. 其他功能与历史版本页面
+
+*   **`MessageView-消息列表页.vue`**
+    *   **用途**: 用于展示系统通知、用户互动等消息。
+    *   **状态**: 结构占位。
+
+*   **`HomeView-首页-1.0.vue`**
+    *   **用途**: 首页的早期版本。
+    *   **状态**: **已废弃**。功能和代码与 `2.0` 初始版本一致，可作为历史参考。
+
+*   **`HomeView-首页-2.0.backup.vue`**
+    *   **用途**: 在第三轮迭代 (v2.3) 开始前创建的 **v2.2 版本备份**。
+    *   **状态**: **备份文件**。可用于回滚或对比。
\ No newline at end of file
diff --git a/3-工作日志/3.2-工作日志-首页迭代开发日志-v1.0.md b/3-工作日志/3.2-工作日志-首页迭代开发日志-v1.0.md
new file mode 100644
index 0000000..3c1f2f3
--- /dev/null
+++ b/3-工作日志/3.2-工作日志-首页迭代开发日志-v1.0.md
@@ -0,0 +1,101 @@
+# “食话食说”APP - 首页迭代开发工作日志
+
+**最后更新**: 2025-07-23 13:12:00 (UTC+8)
+**核心负责人**: L.star
+**目标**: 对产品首页进行多轮迭代设计与开发，以满足用户需求并提升产品体验。
+
+---
+
+## 1. 初始状态分析 (RESEARCH)
+
+*   **起始文件**: `shihuashishuo-ui/src/views/HomeView-首页-1.0.vue` & `...-2.0.vue`
+*   **设计文档**: `0-产品需求文档/设计文档-Home页面.md`
+*   **核心问题**:
+    1.  **路由错误**: 应用的 `home` 路由指向一个不存在的文件 (`HomeView-首页.vue`)。
+    2.  **功能缺失**: 对比设计文档，当前实现**完全缺失“内容信息流 (Feed)”模块**。
+    3.  **实现偏差**: 核心扫码按钮尺寸偏小，视觉冲击力不足；底部导航与设计稿不符。
+    4.  **版本存疑**: `v1.0` 与 `v2.0` 文件内容完全一致，未发生实质性迭代。
+
+---
+
+## 2. 迭代历程 (INNOVATE → EXECUTE → REVIEW)
+
+### **第一轮迭代: 框架完善 (v2.1 → v2.2)**
+
+*   **用户反馈/目标**:
+    *   修复路由，让页面能正常显示。
+    *   补全缺失的“内容信息流”模块。
+    *   强化核心扫码按钮的视觉效果。
+    *   追求“简单大气”的设计，移除 Slogan。
+*   **解决方案**:
+    *   **v2.1 提案**: 提出补全信息流、放大扫码按钮的方案。
+    *   **v2.2 提案**: 根据“简单大气”的反馈，移除 Slogan，形成最终方案。
+*   **核心实现**:
+    *   **路由修复**: 将 `router/index.ts` 中的 `home` 路由指向 `HomeView-首页-2.0.vue`。
+    *   **备份**: 创建了 `HomeView-首页-2.0.backup.vue` 作为安全备份。
+    *   **代码修改**:
+        *   在页面底部新增了 `feed-section`，并填充了示例数据。
+        *   显著增大了 `.scan-cta` 的尺寸和样式权重。
+        *   从模板中移除了 Slogan 元素。
+
+### **第二轮迭代: 功能增强 (v2.3)**
+
+*   **用户反馈/目标**:
+    1.  在搜索栏下方增加搜索热词。
+    2.  将扫码按钮改得小巧一些。
+    3.  将个性化提示框升级为包含“每日营养、热量、喝水记录”的健康看板。
+*   **解决方案**:
+    *   **v2.3 提案**: 设计了包含热词、精巧按钮和多功能健康看板的布局。
+*   **核心实现**:
+    *   **代码修改**:
+        *   新增 `hot-searches-section` 并填充了关键词数据。
+        *   缩小了 `.scan-cta` 的尺寸。
+        *   将 `.dynamic-card` 替换为全新的 `.health-dashboard`，并使用 `grid` 布局实现三栏式健康数据展示。
+    *   **问题修复**: 修复了因复用 `goToSearch` 方法导致的 TypeScript 类型冲突。
+
+### **第三轮迭代: 布局优化 (v2.4)**
+
+*   **用户反馈/目标**:
+    1.  恢复被替换掉的“个性化使用提示”卡片。
+    2.  解决健康看板三栏式布局“比较奇怪”的问题。
+*   **解决方案**:
+    *   **v2.4 提案**: 提出恢复提示卡片，并将健康看板重排为垂直布局的方案。
+*   **核心实现**:
+    *   **代码修改**:
+        *   在扫码按钮下方重新加入了 `.dynamic-card` 的 HTML 结构与样式。
+        *   将 `.health-dashboard` 的布局从 `grid` 修改为 `flex-direction: column`，使其内部模块垂直排列，更清晰规整。
+
+### **第四轮迭代: 视觉升级 (v2.5)**
+
+*   **用户反馈/目标**:
+    1.  将“热量”和“喝水”记录合并到一张卡片里。
+    2.  使用两个并列的圆形图案来记录摄入量。
+*   **解决方案**:
+    *   **v2.5 提案**: 设计了包含两个并列圆形进度盘的组合卡片。
+*   **核心实现**:
+    *   **代码修改**:
+        *   新增 `.progress-card` 来容纳两个进度盘。
+        *   使用 **SVG** 技术绘制圆形进度盘，通过动态绑定 `stroke-dashoffset` 属性来反映数据进度。
+        *   新增 `computed` 属性 (`calorieProgressOffset`, `waterProgressOffset`) 来处理 SVG 计算。
+
+### **第五轮迭代: 文本优化 (v2.5.1 - 最终版)**
+
+*   **用户反馈/目标**:
+    *   明确指出“热量”应为“热量摄入”，避免用户误解。
+*   **解决方案**:
+    *   将标签文本从“热量”修改为“热量摄入”。
+*   **核心实现**:
+    *   使用 `apply_diff` 工具，精准地将 `<p>热量</p>` 修改为 `<p>热量摄入</p>`。
+
+---
+
+## 3. 最终状态与关键资产
+
+*   **当前版本**: **v2.5.1**
+*   **核心文件**:
+    *   `shihuashishuo-ui/src/views/HomeView-首页-2.0.vue` (最终版代码)
+    *   `shihuashishuo-ui/src/views/HomeView-首页-2.0.backup.vue` (v2.2 版备份)
+    *   `shihuashishuo-ui/src/router/index.ts` (已修复路由)
+*   **本日志**: `3-工作日志/3-工作日志-首页迭代开发日志.md`
+
+**任务已全部完成。**
\ No newline at end of file
diff --git a/shihuashishuo-ui/src/router/index.ts b/shihuashishuo-ui/src/router/index.ts
index fdc0912..8c28b24 100644
--- a/shihuashishuo-ui/src/router/index.ts
+++ b/shihuashishuo-ui/src/router/index.ts
@@ -1,8 +1,8 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import SplashView from '../views/SplashView-闪屏页.vue'
-import LoginView from '../views/LoginView-登录页.vue'
-import PolicyView from '../views/PolicyView-协议页.vue'
-import OnboardingView from '../views/OnboardingView-引导页.vue'
+import SplashView from '../views/通用基础页/SplashView-闪屏页.vue'
+import LoginView from '../views/通用基础页/LoginView-登录页-2.0.vue'
+import PolicyView from '../views/通用基础页/PolicyView-协议页.vue'
+import OnboardingView from '../views/通用基础页/OnboardingView-引导页.vue'
 import MainLayout from '../layouts/MainLayout.vue'
 
 const router = createRouter({
@@ -32,6 +32,21 @@ const router = createRouter({
       name: 'onboarding',
       component: OnboardingView,
     },
+    {
+      path: '/password-login',
+      name: 'password-login',
+      component: () => import('../views/通用基础页/PasswordLoginView-密码登录页.vue'),
+    },
+    {
+      path: '/auth',
+      name: 'auth',
+      component: () => import('../views/通用基础页/ThirdPartyAuthView-授权登录页.vue'),
+    },
+    {
+      path: '/forgot-password',
+      name: 'forgot-password',
+      component: () => import('../views/通用基础页/ForgotPasswordView-忘记密码页.vue'),
+    },
     // Main application layout with bottom navigation
     {
       path: '/app',
@@ -91,11 +106,6 @@ const router = createRouter({
       name: 'messages',
       component: () => import('../views/MessageView-消息列表页.vue'),
     },
-    {
-      path: '/home-v1',
-      name: 'home-v1-standalone',
-      component: () => import('../views/HomeView-首页-1.0.vue'),
-    },
   ],
 })
 
diff --git a/shihuashishuo-ui/src/views/HomeView-首页-1.0.vue b/shihuashishuo-ui/src/views/HomeView-首页-1.0.vue
deleted file mode 100644
index c08eb8b..0000000
--- a/shihuashishuo-ui/src/views/HomeView-首页-1.0.vue
+++ /dev/null
@@ -1,297 +0,0 @@
-<template>
-  <div class="home-view">
-    <!-- 1. Top Status Bar -->
-    <header class="top-bar">
-      <div class="greeting">晚上好, 王女士</div>
-      <div class="message-icon" @click="goToMessages">
-        <img src="@/assets/message-icon.svg" alt="Messages" />
-      </div>
-    </header>
-
-    <!-- Search Bar Section -->
-    <section class="search-section" @click="goToSearch">
-       <div class="search-bar-container">
-         <input type="text" placeholder="疾病 / 症状 / 药品 / 问题" readonly>
-         <div class="separator"></div>
-         <div class="search-button">搜索</div>
-       </div>
-    </section>
-
-    <!-- Banner Section -->
-    <section class="banner-section">
-      <div class="banner-wrapper" :style="bannerStyle">
-        <div v-for="item in bannerItems" :key="item.id" class="banner-slide">
-          <img :src="item.imageUrl" :alt="item.alt" />
-        </div>
-      </div>
-      <div class="banner-dots">
-        <span v-for="(item, index) in bannerItems" :key="item.id"
-              :class="{ active: index === currentIndex }"
-              @click="goToSlide(index)"></span>
-      </div>
-    </section>
-
-    <!-- 2. Hero Section -->
-    <main class="hero-section">
-      <p class="slogan">食品真相，食话食说</p>
-      <div class="scan-cta" @click="goToScan">
-        <div class="scan-icon">📷</div>
-        <span>扫码/拍照</span>
-      </div>
-
-      <!-- 3. Personalized Dynamics -->
-      <div class="dynamic-card">
-        <div class="card-text">
-          <p>本周您已分析 <strong>8</strong> 种食品，成功为家人避开 <strong>4</strong> 个高风险成分！</p>
-        </div>
-        <div class="card-avatar">
-          <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?q=80&w=1780&auto=format&fit=crop" alt="User Avatar" />
-        </div>
-      </div>
-    </main>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue';
-import { useRouter } from 'vue-router';
-
-const bannerItems = ref([
-  { id: 1, imageUrl: 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?q=80&w=2080&auto=format&fit=crop', alt: 'Healthy Salad' },
-  { id: 2, imageUrl: 'https://images.unsplash.com/photo-1540189549336-e6e99c3679fe?q=80&w=1887&auto=format&fit=crop', alt: 'Fresh Berries' },
-  { id: 3, imageUrl: 'https://images.unsplash.com/photo-1482049016688-2d3e1b311543?q=80&w=1910&auto=format&fit=crop', alt: 'Avocado Toast' },
-]);
-const currentIndex = ref(0);
-let intervalId: number;
-
-const bannerStyle = computed(() => ({
-  transform: `translateX(-${currentIndex.value * 100}%)`
-}));
-
-const goToSlide = (index: number) => {
-  currentIndex.value = index;
-  // Reset autoplay timer
-  clearInterval(intervalId);
-  intervalId = window.setInterval(nextSlide, 3000);
-};
-
-const nextSlide = () => {
-  currentIndex.value = (currentIndex.value + 1) % bannerItems.value.length;
-};
-
-onMounted(() => {
-  intervalId = window.setInterval(nextSlide, 3000);
-});
-
-onUnmounted(() => {
-  clearInterval(intervalId);
-});
-
-const router = useRouter();
-
-const goToMessages = () => {
-  router.push({ name: 'messages' });
-};
-
-const goToScan = () => {
-  router.push({ name: 'scan' });
-};
-
-const goToSearch = () => {
-  router.push({ name: 'search' });
-};
-</script>
-
-<style scoped>
-.home-view {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  padding: 20px;
-  box-sizing: border-box;
-  background-color: var(--color-background);
-}
-
-.top-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.search-section {
- /* The parent .home-view now handles padding and background */
- margin-top: 20px; /* Adjust this value to increase/decrease space */
- margin-bottom: 5px;
-}
-
-.search-bar-container {
- display: flex;
- align-items: center;
- background-color: #fff;
- border-radius: 25px;
- padding: 10px 15px;
- border: 1px solid #07C160; /* WeChat Green */
- /* box-shadow: 0 2px 4px rgba(0,0,0,0.05); */ /* Removing shadow for a flatter look */
- cursor: pointer;
- max-width: 90%; /* Adjust width */
- margin: 0 auto; /* Center the search bar */
-}
-
-.search-bar-container input {
- border: none;
- outline: none;
- background: transparent;
- flex-grow: 1; /* Allow input to take up remaining space */
- width: 0; /* Necessary for flex-grow to work correctly */
- font-size: 14px;
- color: #333;
- pointer-events: none; /* Makes the input not focusable, click is handled by parent */
-}
-
-.search-bar-container input::placeholder {
-  color: #ccc; /* Lighter gray for placeholder */
-  font-style: normal; /* Remove italic */
-}
-
-.separator {
-  width: 1px;
-  height: 16px;
-  background-color: #e0e0e0;
-  margin: 0 12px;
-}
-
-.search-button {
-  color: #07C160; /* WeChat Green */
-  font-weight: bold;
-  font-size: 15px;
-  cursor: pointer;
-  white-space: nowrap; /* Prevent text from wrapping */
-}
-
-.banner-section {
-  width: 100%;
-  margin-top: 10px; /* Adjust space between search-bar and banner */
-  margin-bottom: 20px;
-  overflow: hidden;
-  position: relative;
-  border-radius: 8px;
-}
-.banner-wrapper {
-  display: flex;
-  transition: transform 0.5s ease-in-out;
-}
-.banner-slide {
-  flex-shrink: 0;
-  width: 100%;
-  height: 150px; /* Set a fixed height for the banner */
-  overflow: hidden;
-}
-.banner-slide img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover; /* Ensure the image covers the area without distortion */
-  display: block;
-}
-.banner-dots {
-  position: absolute;
-  bottom: 10px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  gap: 8px;
-}
-.banner-dots span {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: rgba(255, 255, 255, 0.5);
-  cursor: pointer;
-}
-.banner-dots span.active {
-  background-color: white;
-}
-
-.greeting {
-  font-size: 18px;
-  font-weight: bold;
-}
-
-.message-icon {
-  cursor: pointer;
-}
-
-.message-icon img {
-  width: 24px;
-  height: 24px;
-  display: block;
-}
-
-.hero-section {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start; /* Move content towards the top */
-  align-items: center;
-  text-align: center;
-  padding-top: 10%; /* Add some padding from the banner */
-}
-
-.slogan {
-  font-size: 24px;
-  color: var(--color-text-secondary);
-  margin-bottom: 20px;
-}
-
-.scan-cta {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 180px; /* Smaller size */
-  height: 180px; /* Smaller size */
-  border-radius: 50%;
-  background: var(--color-background-soft); /* Light grey to stand out on white */
-  color: var(--color-text-primary);
-  cursor: pointer;
-  border: 1px solid #07C160; /* WeChat Green */
-  box-shadow: none; /* Remove shadow */
-}
-
-.scan-icon {
-  font-size: 50px; /* Smaller icon */
-  margin-bottom: 8px;
-  color: var(--color-text-primary);
-}
-
-.dynamic-card {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: var(--color-background-soft);
-  border-radius: 8px;
-  padding: 15px;
-  font-size: 14px;
-  margin-top: 25px; /* Adjust space */
-  width: 90%;
-  max-width: 350px;
-  border: 1px solid #07C160; /* WeChat Green */
-}
-
-.card-text {
-  flex-grow: 1;
-  text-align: left;
-  margin-right: 15px;
-}
-
-.card-avatar img {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-.dynamic-card strong {
-  color: var(--color-primary-accent);
-}
-</style>
\ No newline at end of file
diff --git a/shihuashishuo-ui/src/views/HomeView-首页-2.0.vue b/shihuashishuo-ui/src/views/HomeView-首页-2.0.vue
index b57f568..3fec45e 100644
--- a/shihuashishuo-ui/src/views/HomeView-首页-2.0.vue
+++ b/shihuashishuo-ui/src/views/HomeView-首页-2.0.vue
@@ -46,32 +46,62 @@
       </div>
     </main>
 
-    <!-- 3. Health Dashboard -->
+    <!-- 3. Personalized Dynamic Card (Restored) -->
+    <section class="dynamic-card-section">
+        <div class="dynamic-card">
+            <div class="card-text">
+            <p>本周您已分析 <strong>8</strong> 种食品，成功为家人避开 <strong>4</strong> 个高风险成分！</p>
+            </div>
+            <div class="card-avatar">
+            <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?q=80&w=1780&auto=format&fit=crop" alt="User Avatar" />
+            </div>
+        </div>
+    </section>
+
+    <!-- 4. Health Dashboard (v2.5 Visual Upgrade) -->
     <section class="health-dashboard">
       <div class="dashboard-item nutrition-tracker">
         <h4>每日营养</h4>
         <div class="nutrition-details">
-          <span>蛋白: {{ healthDashboardData.nutrition.protein }}/{{ healthDashboardData.nutrition.proteinGoal }}g</span>
-          <span>脂肪: {{ healthDashboardData.nutrition.fat }}/{{ healthDashboardData.nutrition.fatGoal }}g</span>
+          <div>
+            <p>蛋白质</p>
+            <strong>{{ healthDashboardData.nutrition.protein }} / {{ healthDashboardData.nutrition.proteinGoal }}g</strong>
+          </div>
+          <div>
+            <p>脂肪</p>
+            <strong>{{ healthDashboardData.nutrition.fat }} / {{ healthDashboardData.nutrition.fatGoal }}g</strong>
+          </div>
         </div>
       </div>
-      <div class="dashboard-item calorie-tracker">
-        <h4>热量记录</h4>
-        <div class="progress-bar">
-          <div class="progress" :style="{ width: healthDashboardData.calories.progress + '%' }"></div>
+      <div class="dashboard-item progress-card">
+        <!-- Calorie Progress Ring -->
+        <div class="progress-ring">
+          <svg class="progress-ring__svg" :width="ringSize" :height="ringSize">
+            <circle class="progress-ring__circle-bg" :r="radius" :cx="center" :cy="center" />
+            <circle class="progress-ring__circle" :stroke-dasharray="circumference" :stroke-dashoffset="calorieProgressOffset" :r="radius" :cx="center" :cy="center" />
+          </svg>
+          <div class="progress-ring__text">
+            <p>热量摄入</p>
+            <strong>{{ healthDashboardData.calories.current }}</strong>
+            <span>/ {{ healthDashboardData.calories.goal }} kcal</span>
+          </div>
         </div>
-        <span>{{ healthDashboardData.calories.current }}/{{ healthDashboardData.calories.goal }} kcal</span>
-      </div>
-      <div class="dashboard-item water-tracker">
-        <h4>喝水记录</h4>
-        <div class="water-icons">
-          <span v-for="i in 8" :key="i" :class="{ filled: i <= healthDashboardData.water.cups }">💧</span>
+        <!-- Water Progress Ring -->
+        <div class="progress-ring">
+          <svg class="progress-ring__svg" :width="ringSize" :height="ringSize">
+            <circle class="progress-ring__circle-bg" :r="radius" :cx="center" :cy="center" />
+            <circle class="progress-ring__circle water" :stroke-dasharray="circumference" :stroke-dashoffset="waterProgressOffset" :r="radius" :cx="center" :cy="center" />
+          </svg>
+          <div class="progress-ring__text">
+            <p>饮水</p>
+            <strong>{{ healthDashboardData.water.current / 1000 }}</strong>
+            <span>/ {{ healthDashboardData.water.goal / 1000 }} L</span>
+          </div>
         </div>
-        <span>{{ healthDashboardData.water.current }}/{{ healthDashboardData.water.goal }} ml</span>
       </div>
     </section>
 
-    <!-- 4. Content Feed -->
+    <!-- 5. Content Feed -->
     <section class="feed-section">
       <div v-for="item in feedItems" :key="item.id" class="feed-card" @click="goTo(item.link)">
         <div v-if="item.type === 'discover'" class="discover-card">
@@ -110,10 +140,28 @@ const hotSearches = ref(['无糖酸奶', '酱油', '儿童零食', '高钙牛奶
 
 const healthDashboardData = ref({
   nutrition: { protein: 30, proteinGoal: 60, fat: 20, fatGoal: 50 },
-  calories: { current: 800, goal: 1800, progress: computed(() => (800 / 1800) * 100) },
-  water: { current: 1000, goal: 2000, cups: 4 },
+  calories: { current: 800, goal: 1800 },
+  water: { current: 1000, goal: 2000 },
 });
 
+// Progress Ring Computations
+const ringSize = 120;
+const strokeWidth = 10;
+const center = ringSize / 2;
+const radius = center - strokeWidth / 2;
+const circumference = 2 * Math.PI * radius;
+
+const calorieProgressOffset = computed(() => {
+  const progress = healthDashboardData.value.calories.current / healthDashboardData.value.calories.goal;
+  return circumference * (1 - progress);
+});
+
+const waterProgressOffset = computed(() => {
+  const progress = healthDashboardData.value.water.current / healthDashboardData.value.water.goal;
+  return circumference * (1 - progress);
+});
+
+
 const feedItems = ref([
   { id: 'd1', type: 'discover', title: "警惕！这5种'儿童酱油'其实是钠含量炸弹", summary: '深度评测10款热门儿童酱油，结果令人震惊...', imageUrl: 'https://images.unsplash.com/photo-1598134493282-85b82454f754?q=80&w=1887&auto=format&fit=crop', link: { name: 'discover' } },
   { id: 'r1', type: 'recipe', title: '适合减脂期的你：牛油果鸡胸肉沙拉', imageUrl: 'https://images.unsplash.com/photo-1505253716362-af78f6d38348?q=80&w=1887&auto=format&fit=crop', link: { name: 'kitchen' } },
@@ -295,8 +343,8 @@ const goTo = (link: object) => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 160px; /* Adjusted size */
-  height: 160px; /* Adjusted size */
+  width: 160px;
+  height: 160px;
   border-radius: 50%;
   background: var(--color-background-soft);
   cursor: pointer;
@@ -305,74 +353,144 @@ const goTo = (link: object) => {
 }
 
 .scan-icon {
-  font-size: 60px; /* Adjusted icon size */
+  font-size: 60px;
   margin-bottom: 8px;
 }
 
 .scan-cta span {
-    font-size: 16px; /* Adjusted font size */
+    font-size: 16px;
     font-weight: bold;
 }
 
+.dynamic-card-section {
+    margin-bottom: 20px;
+}
+
+.dynamic-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--color-background-soft);
+  border-radius: 8px;
+  padding: 15px;
+  font-size: 14px;
+  width: 90%;
+  max-width: 350px;
+  border: 1px solid #07C160;
+  margin: 0 auto;
+}
+
+.card-text {
+  flex-grow: 1;
+  text-align: left;
+  margin-right: 15px;
+}
+
+.card-avatar img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.dynamic-card strong {
+  color: var(--color-primary-accent);
+}
+
 .health-dashboard {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  display: flex;
+  flex-direction: column;
   gap: 15px;
   padding: 15px;
-  background-color: var(--color-background-soft);
+  background-color: #f9f9f9;
   border-radius: 12px;
   border: 1px solid #e0e0e0;
 }
 
 .dashboard-item {
-  text-align: center;
+  background-color: #fff;
+  padding: 15px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
 }
 
 .dashboard-item h4 {
   font-size: 14px;
   color: #333;
-  margin-bottom: 10px;
+  margin: 0 0 10px 0;
+  text-align: left;
 }
 
 .nutrition-details {
   display: flex;
-  flex-direction: column;
-  gap: 5px;
-  font-size: 12px;
-  color: #666;
+  justify-content: space-around;
+  text-align: center;
 }
 
-.progress-bar {
-  width: 100%;
-  height: 8px;
-  background-color: #e0e0e0;
-  border-radius: 4px;
-  overflow: hidden;
-  margin-bottom: 5px;
+.nutrition-details p {
+    margin: 0 0 5px 0;
+    font-size: 12px;
+    color: #666;
+}
+.nutrition-details strong {
+    font-size: 16px;
+    color: #333;
 }
 
-.progress {
-  height: 100%;
-  background-color: #07C160;
-  border-radius: 4px;
+.progress-card {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
 }
 
-.calorie-tracker span, .water-tracker span {
-  font-size: 12px;
-  color: #666;
+.progress-ring {
+    position: relative;
+    text-align: center;
 }
 
-.water-icons {
-  font-size: 20px;
-  margin-bottom: 5px;
+.progress-ring__svg {
+    transform: rotate(-90deg);
 }
 
-.water-icons span {
-  opacity: 0.3;
+.progress-ring__circle-bg {
+    fill: none;
+    stroke: #e6e6e6;
+    stroke-width: 10;
 }
 
-.water-icons span.filled {
-  opacity: 1;
+.progress-ring__circle {
+    fill: none;
+    stroke: #07C160;
+    stroke-width: 10;
+    stroke-linecap: round;
+    transition: stroke-dashoffset 0.35s;
+}
+
+.progress-ring__circle.water {
+    stroke: #007bff;
+}
+
+.progress-ring__text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.progress-ring__text p {
+    margin: 0;
+    font-size: 12px;
+    color: #666;
+}
+
+.progress-ring__text strong {
+    font-size: 20px;
+    color: #333;
+}
+
+.progress-ring__text span {
+    font-size: 12px;
+    color: #999;
 }
 
 .feed-section {
diff --git a/shihuashishuo-ui/src/views/通用基础页/ForgotPasswordView-忘记密码页.vue b/shihuashishuo-ui/src/views/通用基础页/ForgotPasswordView-忘记密码页.vue
new file mode 100644
index 0000000..e80de70
--- /dev/null
+++ b/shihuashishuo-ui/src/views/通用基础页/ForgotPasswordView-忘记密码页.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="forgot-password-page">
+    <div class="welcome-section">
+      <h2>找回密码</h2>
+      <p>请通过绑定的手机号重设您的密码</p>
+    </div>
+
+    <div class="form-section">
+      <!-- Step 1: Verify Identity -->
+      <div v-if="step === 1">
+        <div class="input-group">
+          <span class="icon">📱</span>
+          <input type="tel" placeholder="请输入手机号" v-model="phone" maxlength="11" @input="formatInput('phone')" />
+        </div>
+        <div class="input-group">
+          <span class="icon">✉️</span>
+          <input type="text" placeholder="请输入验证码" v-model="code" maxlength="6" @input="formatInput('code')" />
+          <button class="get-code-btn" @click="getVerificationCode" :disabled="isCountingDown">
+            {{ countdownText }}
+          </button>
+        </div>
+        <button class="submit-btn" @click="verifyCode">下一步</button>
+      </div>
+
+      <!-- Step 2: Reset Password -->
+      <div v-if="step === 2">
+        <div class="input-group">
+          <span class="icon">🔒</span>
+          <input type="password" placeholder="请输入新密码" v-model="newPassword" />
+        </div>
+        <div class="input-group">
+          <span class="icon">🔒</span>
+          <input type="password" placeholder="请再次输入新密码" v-model="confirmPassword" />
+        </div>
+        <button class="submit-btn" @click="resetPassword">确认重设</button>
+      </div>
+
+      <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
+    </div>
+
+    <div class="links-section">
+        <a href="#" @click.prevent="goBack">← 返回登录</a>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const step = ref(1); // 1: verify, 2: reset
+const phone = ref('');
+const code = ref('');
+const newPassword = ref('');
+const confirmPassword = ref('');
+const countdown = ref(0);
+const errorMessage = ref('');
+
+const isCountingDown = computed(() => countdown.value > 0);
+const countdownText = computed(() => {
+  return isCountingDown.value ? `${countdown.value}s 后重试` : '获取验证码';
+});
+
+const getVerificationCode = () => {
+  if (isCountingDown.value) return;
+  countdown.value = 60;
+  const timer = setInterval(() => {
+    countdown.value--;
+    if (countdown.value <= 0) {
+      clearInterval(timer);
+    }
+  }, 1000);
+};
+
+const formatInput = (type: 'phone' | 'code') => {
+  if (type === 'phone') {
+    phone.value = phone.value.replace(/\D/g, '');
+  } else {
+    code.value = code.value.replace(/\D/g, '');
+  }
+};
+
+const goBack = () => {
+    router.back();
+};
+
+const verifyCode = () => {
+  errorMessage.value = '';
+  // Mock verification logic
+  if (code.value === '111111') {
+    step.value = 2;
+  } else {
+    errorMessage.value = '验证码错误，请重试';
+  }
+};
+
+const resetPassword = () => {
+    // Mock reset logic
+    if (newPassword.value && newPassword.value === confirmPassword.value) {
+        console.log('密码重设成功');
+        router.push('/login');
+    } else {
+        errorMessage.value = '两次输入的密码不一致';
+    }
+};
+</script>
+
+<style scoped>
+.forgot-password-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 80px 40px 20px;
+  box-sizing: border-box;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.welcome-section {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.welcome-section h2 {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.welcome-section p {
+  color: #6b7280;
+}
+
+.form-section {
+  width: 100%;
+  max-width: 400px;
+}
+
+.input-group {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  padding: 12px 10px;
+}
+
+.input-group .icon {
+  margin-right: 10px;
+}
+
+.input-group input {
+  border: none;
+  outline: none;
+  flex-grow: 1;
+  background: transparent;
+}
+
+.get-code-btn {
+  background: none;
+  border: none;
+  color: #22c55e;
+  cursor: pointer;
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.get-code-btn:disabled {
+  color: #9ca3af;
+  cursor: not-allowed;
+}
+
+.submit-btn {
+  width: 100%;
+  padding: 12px;
+  border: none;
+  border-radius: 8px;
+  background-color: #22c55e;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.links-section {
+  margin-top: 20px;
+}
+
+.links-section a {
+  color: #6b7280;
+  text-decoration: none;
+  font-size: 14px;
+}
+
+.error-message {
+    color: #ef4444;
+    font-size: 14px;
+    text-align: center;
+    margin-top: 15px;
+}
+</style>
\ No newline at end of file
diff --git a/shihuashishuo-ui/src/views/LoginView-登录页.vue b/shihuashishuo-ui/src/views/通用基础页/LoginView-登录页-1.0.backup.vue
similarity index 99%
rename from shihuashishuo-ui/src/views/LoginView-登录页.vue
rename to shihuashishuo-ui/src/views/通用基础页/LoginView-登录页-1.0.backup.vue
index 5f78bb9..2593c3b 100644
--- a/shihuashishuo-ui/src/views/LoginView-登录页.vue
+++ b/shihuashishuo-ui/src/views/通用基础页/LoginView-登录页-1.0.backup.vue
@@ -162,4 +162,4 @@ const wechatLogin = () => {
   color: #22c55e;
   text-decoration: none;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/shihuashishuo-ui/src/views/通用基础页/LoginView-登录页-2.0.vue b/shihuashishuo-ui/src/views/通用基础页/LoginView-登录页-2.0.vue
new file mode 100644
index 0000000..807e7e5
--- /dev/null
+++ b/shihuashishuo-ui/src/views/通用基础页/LoginView-登录页-2.0.vue
@@ -0,0 +1,230 @@
+<template>
+  <div class="login-page">
+    <div class="welcome-section">
+      <h2>食话食说 Talk of Food</h2>
+      <p>守护您和家人的每一餐</p>
+    </div>
+
+    <div class="form-section">
+      <div class="input-group">
+        <span class="icon">📱</span>
+        <input type="tel" placeholder="请输入手机号" v-model="phone" maxlength="11" @input="formatInput('phone')" />
+      </div>
+      <div class="input-group">
+        <span class="icon">✉️</span>
+        <input type="text" placeholder="请输入验证码" v-model="code" maxlength="6" @input="formatInput('code')" />
+        <button class="get-code-btn" @click="getVerificationCode" :disabled="isCountingDown">
+          {{ countdownText }}
+        </button>
+      </div>
+      <button class="login-btn" @click="mainLogin">登录 / 注册</button>
+    </div>
+
+    <div class="social-login-section">
+      <button class="password-login-btn" @click="goToPasswordLogin">密码登录</button>
+      <div class="social-icons-container">
+        <div class="social-icon" @click="socialLogin('WeChat')">🟢</div>
+        <div class="social-icon" @click="socialLogin('QQ')">🐧</div>
+        <div class="social-icon" @click="socialLogin('TikTok')">🎵</div>
+        <div class="social-icon" @click="socialLogin('Weibo')">🔴</div>
+      </div>
+    </div>
+
+    <div class="policy-section">
+      <input type="checkbox" id="policy-check" checked />
+      <label for="policy-check">
+        我已阅读并同意
+        <router-link to="/policy">用户协议</router-link> 和
+        <router-link to="/policy">隐私政策</router-link>
+      </label>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const phone = ref('');
+const code = ref('');
+const countdown = ref(0);
+
+const isCountingDown = computed(() => countdown.value > 0);
+const countdownText = computed(() => {
+  return isCountingDown.value ? `${countdown.value}s 后重试` : '获取验证码';
+});
+
+const getVerificationCode = () => {
+  if (isCountingDown.value) return;
+  // 在这里可以添加手机号格式校验
+  console.log(`向手机号 ${phone.value} 发送验证码`);
+
+  countdown.value = 60;
+  const timer = setInterval(() => {
+    countdown.value--;
+    if (countdown.value <= 0) {
+      clearInterval(timer);
+    }
+  }, 1000);
+};
+
+const goToPasswordLogin = () => {
+  router.push('/password-login');
+};
+
+const socialLogin = (platform: string) => {
+  router.push({ path: '/auth', query: { platform } });
+};
+
+const formatInput = (type: 'phone' | 'code') => {
+  if (type === 'phone') {
+    phone.value = phone.value.replace(/\D/g, '');
+  } else {
+    code.value = code.value.replace(/\D/g, '');
+  }
+};
+
+const mainLogin = () => {
+  // TODO: 替换为真实的登录逻辑
+  console.log('执行首次登录，跳转到引导页...');
+  router.push('/onboarding');
+};
+</script>
+
+<style scoped>
+.login-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 100px 40px 20px;
+  box-sizing: border-box;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.welcome-section {
+  text-align: center;
+  margin-bottom: 40px;
+  flex-shrink: 0;
+}
+
+.welcome-section h2 {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.welcome-section p {
+  color: #6b7280;
+}
+
+.form-section {
+  width: 100%;
+  max-width: 400px;
+  flex-shrink: 0;
+}
+
+.input-group {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  padding: 12px 10px;
+}
+
+.input-group .icon {
+  margin-right: 10px;
+}
+
+.input-group input {
+  border: none;
+  outline: none;
+  flex-grow: 1;
+  background: transparent;
+  min-width: 0;
+}
+
+.get-code-btn {
+  background: none;
+  border: none;
+  color: #22c55e;
+  cursor: pointer;
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.get-code-btn:disabled {
+  color: #9ca3af;
+  cursor: not-allowed;
+}
+
+.login-btn {
+  width: 100%;
+  padding: 12px;
+  border: none;
+  border-radius: 8px;
+  background-color: #22c55e;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.social-login-section {
+  width: 100%;
+  max-width: 400px;
+  text-align: center;
+  margin-top: 10px;
+  flex-shrink: 0;
+}
+
+.divider {
+  color: #9ca3af;
+  margin-bottom: 10px;
+  font-size: 12px;
+}
+
+.password-login-btn {
+  background: none;
+  border: none;
+  color: #6b7280;
+  cursor: pointer;
+  font-size: 14px;
+  margin-bottom: 15px;
+}
+
+.social-icons-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 25px;
+  width: 100%;
+  margin-top: 10px;
+}
+
+.social-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 1px solid #e5e7eb;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  font-size: 24px;
+}
+
+.policy-section {
+  margin-top: 20px;
+  font-size: 12px;
+  color: #6b7280;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.policy-section a {
+  color: #22c55e;
+  text-decoration: none;
+}
+</style>
\ No newline at end of file
diff --git a/shihuashishuo-ui/src/views/OnboardingStep-引导步骤.vue b/shihuashishuo-ui/src/views/通用基础页/OnboardingStep-引导步骤.vue
similarity index 100%
rename from shihuashishuo-ui/src/views/OnboardingStep-引导步骤.vue
rename to shihuashishuo-ui/src/views/通用基础页/OnboardingStep-引导步骤.vue
diff --git a/shihuashishuo-ui/src/views/OnboardingView-引导页.vue b/shihuashishuo-ui/src/views/通用基础页/OnboardingView-引导页.vue
similarity index 100%
rename from shihuashishuo-ui/src/views/OnboardingView-引导页.vue
rename to shihuashishuo-ui/src/views/通用基础页/OnboardingView-引导页.vue
diff --git a/shihuashishuo-ui/src/views/通用基础页/PasswordLoginView-密码登录页.vue b/shihuashishuo-ui/src/views/通用基础页/PasswordLoginView-密码登录页.vue
new file mode 100644
index 0000000..601c02b
--- /dev/null
+++ b/shihuashishuo-ui/src/views/通用基础页/PasswordLoginView-密码登录页.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="password-login-page">
+    <div class="welcome-section">
+      <h2>密码登录</h2>
+      <p>欢迎回来！</p>
+    </div>
+
+    <div class="form-section">
+      <div class="input-group">
+        <span class="icon">📱</span>
+        <input type="tel" placeholder="请输入手机号" />
+      </div>
+      <div class="input-group">
+        <span class="icon">🔒</span>
+        <input type="password" placeholder="请输入密码" />
+      </div>
+      <button class="login-btn" @click="passwordLogin">登录</button>
+    </div>
+
+    <div class="links-section">
+      <a href="#" @click.prevent="goToSmsLogin">← 其它登录方式</a>
+      <a href="#" @click.prevent="goToForgotPassword">忘记密码?</a>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const goToSmsLogin = () => {
+  // 假设您的验证码登录页路由为 /login
+  router.push('/login');
+};
+
+const passwordLogin = () => {
+  // TODO: 替换为真实的密码登录逻辑
+  console.log('执行首次登录，跳转到引导页...');
+  router.push('/onboarding');
+};
+
+const goToForgotPassword = () => {
+  router.push('/forgot-password');
+};
+</script>
+
+<style scoped>
+.password-login-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 100px 40px 20px;
+  box-sizing: border-box;
+  height: 100%;
+  overflow-y: auto;
+  background-color: #fff;
+}
+
+.welcome-section {
+  text-align: center;
+  margin-bottom: 40px;
+  flex-shrink: 0;
+}
+
+.welcome-section h2 {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.welcome-section p {
+  color: #6b7280;
+}
+
+.form-section {
+  width: 100%;
+  max-width: 400px;
+  flex-shrink: 0;
+}
+
+.input-group {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  padding: 12px 10px;
+}
+
+.input-group .icon {
+  margin-right: 10px;
+}
+
+.input-group input {
+  border: none;
+  outline: none;
+  flex-grow: 1;
+  background: transparent;
+  min-width: 0;
+}
+
+.login-btn {
+  width: 100%;
+  padding: 12px;
+  border: none;
+  border-radius: 8px;
+  background-color: #22c55e;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.links-section {
+  width: 100%;
+  max-width: 400px;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+  font-size: 14px;
+}
+
+.links-section a {
+  color: #6b7280;
+  text-decoration: none;
+}
+
+.links-section a:hover {
+  text-decoration: underline;
+}
+</style>
\ No newline at end of file
diff --git a/shihuashishuo-ui/src/views/PolicyView-协议页.vue b/shihuashishuo-ui/src/views/通用基础页/PolicyView-协议页.vue
similarity index 100%
rename from shihuashishuo-ui/src/views/PolicyView-协议页.vue
rename to shihuashishuo-ui/src/views/通用基础页/PolicyView-协议页.vue
diff --git a/shihuashishuo-ui/src/views/SplashView-闪屏页.vue b/shihuashishuo-ui/src/views/通用基础页/SplashView-闪屏页.vue
similarity index 50%
rename from shihuashishuo-ui/src/views/SplashView-闪屏页.vue
rename to shihuashishuo-ui/src/views/通用基础页/SplashView-闪屏页.vue
index c590022..131fbbc 100644
--- a/shihuashishuo-ui/src/views/SplashView-闪屏页.vue
+++ b/shihuashishuo-ui/src/views/通用基础页/SplashView-闪屏页.vue
@@ -1,11 +1,10 @@
 <template>
   <div class="splash-screen">
-    <div class="logo-container">
-      <span class="logo-icon">💬</span>
-      <h1 class="app-title">食话食说</h1>
-      <p class="app-slogan">食品真相, 实话实说</p>
+    <div class="content-wrapper">
+      <img src="@/assets/logo.svg" alt="App Logo" class="main-logo" />
+      <h1 class="app-title">食话食说 Talk of Food</h1>
+      <p class="app-slogan">食品真相，食话食说</p>
     </div>
-    <p class="version">Version 1.0.0</p>
   </div>
 </template>
 
@@ -27,42 +26,32 @@ onMounted(() => {
 <style scoped>
 .splash-screen {
   display: flex;
-  flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100vh;
-  width: 100vw;
-  background-color: #f0fdf4; /* 淡绿色背景 */
+  background-image: linear-gradient(to bottom, #fafff5, #f0fdf4); /* A light, fresh green gradient */
 }
 
-.logo-container {
+.content-wrapper {
   text-align: center;
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
 }
 
-.logo-icon {
-  font-size: 80px;
+.main-logo {
+  width: 80px;
+  height: 80px;
+  margin-bottom: 20px;
 }
 
 .app-title {
-  font-size: 36px;
+  font-size: 32px;
   font-weight: bold;
-  color: #22c55e; /* 品牌绿色 */
+  color: #22c55e; /* Brand green */
   margin: 10px 0;
 }
 
 .app-slogan {
   font-size: 16px;
-  color: #4b5563;
-}
-
-.version {
-  position: absolute;
-  bottom: 20px;
-  font-size: 12px;
-  color: #9ca3af;
+  color: #4b5563; /* A calm, dark gray */
+  margin-top: 12px;
 }
 </style>
\ No newline at end of file
diff --git a/shihuashishuo-ui/src/views/通用基础页/ThirdPartyAuthView-授权登录页.vue b/shihuashishuo-ui/src/views/通用基础页/ThirdPartyAuthView-授权登录页.vue
new file mode 100644
index 0000000..c55f06e
--- /dev/null
+++ b/shihuashishuo-ui/src/views/通用基础页/ThirdPartyAuthView-授权登录页.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="auth-page">
+    <div class="spinner"></div>
+    <h2>正在授权</h2>
+    <p>正在通过 {{ platform }} 安全登录...</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+const route = useRoute();
+const router = useRouter();
+const platform = ref('');
+
+onMounted(() => {
+  // 从路由参数中获取授权平台名称
+  platform.value = route.query.platform as string || '第三方平台';
+
+  // 模拟授权过程
+  setTimeout(() => {
+    // 授权成功后，跳转到引导页
+    router.push('/onboarding');
+  }, 2000);
+});
+</script>
+
+<style scoped>
+.auth-page {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #f9fafb;
+  color: #374151;
+}
+
+.spinner {
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border-left-color: #22c55e;
+  animation: spin 1s ease infinite;
+  margin-bottom: 20px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+h2 {
+  font-size: 22px;
+  margin-bottom: 8px;
+}
+
+p {
+  font-size: 16px;
+  color: #6b7280;
+}
+</style>
\ No newline at end of file