Vue3项目开发专题精讲【左扬精讲】—— 在线教育网站系统（基于 Vue3+TypeScript+Vite 的在线教育网站系统系统设计与实现）

Vue3 项目开发专题精讲【左扬精讲】—— 基于 Vue3+TypeScript+Vite 的在线教育平台前端系统设计与实现文档 

模仿 https://www.xuetangx.com 学堂在线

学堂在线 是由清华大学研发出的中文MOOC平台，是教育部在线教育研究中心的研究交流和成果应用平台，面向全球提供在线课程。

一、系统设计（从需求到架构）

1.1、需求分析（明确核心目标与用户场景）

1.1.1、核心目标

搭建一个基于 Vue3+TypeScript+Arco Design 的在线教育平台，提供课程展示、学习、院校合作等功能，满足用户在线学习需求，同时支持高职教育特色内容展示。

1.1.2、用户场景

• • 普通用户：浏览平台课程、观看直播课程、报名课程、学习课程内容、参与平台活动
  • 院校用户：查看院校合作信息、了解合作流程、咨询合作相关事宜
  • 管理员：在前端展示层面，完成课程管理、用户管理、活动管理等操作

1.2、前端系统功能设计表

基于 Vue3+TypeScript+Arco Design+Vite 技术栈，围绕“用户体验优先、功能闭环完整、场景覆盖全面”的设计原则，对核心页面功能进行精细化设计，确保每个模块满足业务需求与交互体验要求，又能满足优质交互体验标准。

页面模块	功能模块	功能细节	交互反馈	响应式适配	技术依赖
登录注册页	整体布局	1. 双栏结构：左侧品牌区（logo + 插画 + slogan），右侧表单区；   2. 品牌区 logo 支持点击返回首页；   3. 插画加载时显示骨架屏，保持 16:9 比例。	1. logo hover 时无额外效果，点击立即跳转；   2. 插画加载完成后淡入（300ms），避免突兀。	1. 桌面端（≥1200px）：品牌区 55%，表单区 45%；   2. 平板端（768-1199px）：品牌区 40%，表单区 60%；   3. 移动端（≤767px）：品牌区置顶（180px 高），表单区全屏。	Arco Design 布局组件、骨架屏组件
登录注册页	表单切换	1. 默认显示登录表单，点击 “没有账号？注册”/“已有账号？登录” 切换；   2. 表单包裹在白色卡片内（圆角 12px，阴影 0 4px 20px rgba (0,0,0,0.08)）；   3. 卡片顶部显示表单标题（“账号登录”/“手机注册”，20px 加粗）。	1. 切换时触发 “横向滑动 + 淡入淡出” 动画（300ms，ease-in-out 曲线）；   2. 表单标题随切换同步更新，无延迟。	1. 桌面端 / 平板端：卡片宽度固定（表单区 80%）；   2. 移动端：卡片宽度 90%，左右居中。	CSS 动画、Arco Design 卡片组件
登录注册页	登录表单 - 账号输入框	1. 支持手机号（11 位数字识别）、邮箱（@ 符号验证）、用户名输入；   2. 占位提示 “请输入手机号 / 邮箱 / 用户名”；   3. 输入时实时校验格式，错误时显示红色提示。	1. 获焦：边框变 #165DFF，底部显示淡蓝色下划线；   2. 失焦：格式错误则边框变红，显示 “请输入正确的账号格式”；   3. 输入符合格式时，错误提示自动消失。	1. 桌面端 / 平板端：输入框宽度 300px；   2. 移动端：输入框宽度 100%（父容器宽度）。	Arco Design Input 组件、自定义校验函数
登录注册页	登录表单 - 密码输入框	1. 右侧带 “眼睛” 图标，支持显示 / 隐藏密码；   2. 密码规则：6-20 位，支持字母、数字、特殊符号；   3. 占位提示 “请输入密码”。	1. 输入不足 6 位：显示 “密码长度不能少于 6 位”；   2. 点击 “眼睛” 图标：图标旋转 180°（200ms），同步切换密码显隐状态；   3. 获焦 / 失焦效果与账号输入框一致。	同 “账号输入框” 宽度适配。	Arco Design Input.Password 组件
登录注册页	登录表单 - 记住密码复选框	1. 默认未勾选，勾选后加密存储用户信息至 localStorage（有效期 7 天）；   2. 文字 “记住我 7 天内自动登录”（14px，#666）。	1. 勾选：复选框图标填充 #165DFF；   2. hover 文字：颜色变 #165DFF，无下划线；   3. 页面刷新后，若有存储信息则自动勾选。	1. 桌面端 / 平板端：复选框与文字横向排列；   2. 移动端：同横向排列，文字自适应换行。	Arco Design Checkbox 组件、localStorage
登录注册页	登录表单 - 登录按钮	1. 默认状态：背景 #165DFF，圆角 8px，白色字体；   2. 禁用状态：背景 #C9D8FF，点击无响应（未填完表单 / 格式错误时触发）；   3. 加载状态：按钮内显示 Spin 动画（16px），文字 “登录中...”。	1. 点击：微小按压效果（缩放至 0.98，200ms）；   2. 登录失败：按钮左右抖动（5px，300ms），下方显示具体错误（如 “账号不存在”）；   3. 登录成功：按钮变绿色，显示 “登录成功”（200ms 后跳转首页）。	1. 桌面端 / 平板端：宽度 300px；   2. 移动端：宽度 100%。	Arco Design Button、Spin 组件
登录注册页	登录表单 - 忘记密码链接	1. 位于登录按钮右侧，14px，#165DFF；   2. 点击跳转至 “密码找回” 弹窗（支持手机号验证码找回）。	1. hover：文字下划线显示，颜色变 #0E42D2；   2. 点击：弹窗淡入（透明度 0→1，300ms），禁止页面滚动。	1. 桌面端 / 平板端：与登录按钮横向对齐；   2. 移动端：位于登录按钮下方，左对齐。	Arco Design Modal 组件
登录注册页	注册表单 - 手机号输入框	1. 左侧带区号下拉框（默认 “+86”，支持切换 “+1”“+852” 等）；   2. 国内手机号验证 11 位数字，国际号按对应规则校验；   3. 占位提示 “请输入手机号”。	1. 区号下拉框 hover：背景 #F5F7FA；   2. 手机号格式错误：显示 “请输入正确的手机号”；   3. 获焦 / 失焦效果与登录账号输入框一致。	同 “登录账号输入框” 宽度适配，区号下拉框宽度 80px（桌面端 / 平板端）、60px（移动端）。	Arco Design Input、Select 组件
登录注册页	注册表单 - 验证码模块	1. 输入框：4-6 位数字，占位提示 “请输入验证码”；   2. 发送按钮：默认 “获取验证码”，点击后触发 60 秒倒计时（文字 “60s 后重发”）；   3. 倒计时期间按钮禁用（背景 #C9D8FF，#999 字体）。	1. 发送成功：按钮立即切换倒计时，下方显示 “验证码已发送至手机号 XXX”；   2. 验证码错误：输入框边框变红，显示 “验证码不正确”；   3. 倒计时结束：按钮恢复 “获取验证码” 状态，支持重新点击。	1. 桌面端 / 平板端：输入框 200px，按钮 100px，横向排列；   2. 移动端：输入框 60%，按钮 35%，横向排列。	自定义倒计时函数、Arco Design Input 组件
登录注册页	注册表单 - 密码强度检测	1. 密码规则：6-20 位，至少含字母和数字；   2. 实时显示强度（弱：红 / 中：黄 / 强：绿），下方带对应颜色进度条；   3. 占位提示 “请设置密码（6-20 位，含字母和数字）”。	1. 输入时：进度条实时更新（200ms 动画）；   2. 强度 “弱”：显示 “密码强度过低，建议增加特殊符号”；   3. 强度 “强”：进度条满宽，无额外提示。	同 “登录密码输入框” 宽度适配，进度条宽度与输入框一致。	自定义强度检测函数、CSS 进度条
登录注册页	注册表单 - 确认密码输入框	1. 占位提示 “请再次输入密码”；   2. 实时校验与原密码一致性，不一致时显示错误。	1. 输入不一致：显示 “两次输入的密码不一致”；   2. 输入一致：右侧显示绿色 “√” 图标；   3. 获焦 / 失焦效果与其他输入框一致。	同 “登录密码输入框” 宽度适配。	Arco Design Input 组件、自定义校验函数
登录注册页	注册表单 - 注册协议复选框	1. 左侧复选框，右侧文字 “我已阅读并同意《用户注册协议》和《隐私政策》”（协议为蓝色链接）；   2. 未勾选时注册按钮禁用。	1. 未勾选点击注册：按钮无响应，下方显示 “请阅读并同意用户协议和隐私政策”；   2. 协议链接 hover：下划线显示，颜色变 #0E42D2；   3. 点击协议链接：新窗口打开协议详情页。	1. 桌面端 / 平板端：复选框与文字横向排列，文字自适应换行；   2. 移动端：同横向排列，文字换行后与复选框对齐。	Arco Design Checkbox 组件
登录注册页	注册表单 - 注册按钮	1. 样式与登录按钮一致，未满足条件（未勾选协议 / 表单错误）时禁用；   2. 加载状态：显示 “注册中...”，禁止重复点击。	1. 注册成功：按钮变绿色，显示 “注册成功”（200ms 后跳转登录页，或自动填充账号）；   2. 注册失败：显示具体错误（如 “手机号已被注册”）；   3. 点击反馈与登录按钮一致。	同 “登录按钮” 宽度适配。	Arco Design Button、Spin 组件
登录注册页	第三方登录	1. 位于表单底部，顶部 “其他登录方式” 文字（居中，14px，#999，两侧 40px 灰色分割线）；   2. 展示微信（绿）、QQ（蓝）、微博（橙）图标（32px，间距 24px）。	1. 图标 hover：缩放至 1.1 倍（200ms）；   2. 点击：显示 “跳转中...” 提示，避免重复点击；   3. 跳转失败：显示 “登录失败，请重试”。	1. 桌面端 / 平板端：图标横向排列，居中显示；   2. 移动端：同横向排列，间距缩小至 16px。	Arco Design Icon 组件、CSS 缩放动画
登录注册页	键盘支持	1. 登录页：输入密码后按 Enter 触发登录；   2. 注册页：输入确认密码后按 Enter 触发注册；   3. Tab 键切换表单元素（顺序：账号→密码→记住密码→登录按钮）。	1. 按 Enter 时：触发对应按钮点击效果（如登录按钮按压动画）；   2. 按 Tab 时：当前元素失焦，下一个元素获焦（同步获焦样式）。	全终端一致，无适配差异。	原生键盘事件监听
首页	顶部导航栏 - 布局与滚动	1. 桌面端：logo→主导航→搜索框→用户区；   2. 移动端：汉堡菜单→logo→搜索 / 用户图标；   3. 高度：桌面端 64px，移动端 56px；   4. 滚动时背景从透明变白色（带阴影 0 2px 10px rgba (0,0,0,0.05)）。	1. 滚动触发：背景切换过渡 300ms，无突兀感；   2. 汉堡菜单点击：侧边栏滑入（200ms），禁止页面滚动；   3. 用户区图标 hover：显示 tooltip（如 “消息通知”）。	1. 桌面端（≥1200px）：全元素横向排列；   2. 平板端（768-1199px）：隐藏搜索框，点击图标展开；   3. 移动端（≤767px）：隐藏主导航，汉堡菜单触发。	Arco Design NavBar、Drawer 组件
首页	顶部导航栏 - 主导航菜单	1. 包含 “首页”“课程列表”“合作院校”“高职课堂”；   2. 当前页文字加粗、#165DFF 色，底部带 2px 蓝色下划线。	1. 菜单 hover：文字变 #165DFF（无下划线）；   2. 点击菜单：跳转对应页面，同步更新当前页样式；   3. 移动端侧边栏菜单：点击后侧边栏关闭（200ms）。	1. 桌面端 / 平板端：横向排列，间距 24px；   2. 移动端：侧边栏纵向排列，间距 16px。	Arco Design Menu 组件
首页	顶部导航栏 - 搜索框	1. 桌面端宽度 300px，移动端全屏（点击图标展开）；   2. 输入 2 个字符后触发实时搜索建议（热门搜索、历史记录）；   3. 输入内容后显示 “搜索” 文字按钮。	1. 搜索建议 hover：背景 #F5F7FA；   2. 点击建议：自动填充输入框并触发搜索；   3. 按 Enter / 点击 “搜索”：跳转课程列表页（携带关键词）；   4. 移动端展开 / 收起：淡入淡出动画（200ms）。	1. 桌面端：固定宽度 300px；   2. 平板端：隐藏输入框，点击图标展开（宽度 80%）；   3. 移动端：点击图标展开全屏搜索框。	Arco Design Input.Search 组件
首页	顶部导航栏 - 用户区	1. 未登录：显示 “登录” 按钮（#165DFF 色，hover 背景 #F0F5FF）；   2. 已登录：用户头像（36px 圆形）→下拉菜单（个人中心、我的课程、退出登录）+ 消息图标（未读红点）+ 购物车（数量角标）。	1. 头像 hover：无效果，点击展开下拉菜单（淡入 200ms）；   2. 消息图标 hover：显示未读数量 tooltip；   3. 退出登录：点击后清除状态，跳转首页（无动画）；   4. 购物车角标：数量变化时数字跳动（100ms）。	1. 桌面端：全元素横向排列，间距 16px；   2. 移动端：仅显示头像、消息、购物车图标（间距 12px）。	Arco Design Avatar、Dropdown、Badge 组件
首页	轮播 Banner	1. 展示 3-5 张推广图（课程 / 活动 / 公告），每张图带标题（24px 加粗）、副标题（16px，#333）、跳转按钮（#165DFF 背景，圆角 8px）；   2. 自动轮播（5 秒 / 次），hover 暂停；   3. 底部圆形指示器（间距 8px）。	1. 自动轮播：平滑过渡（500ms）；   2. 点击左右箭头：立即切换（无延迟），指示器同步更新；   3. 点击跳转按钮：跳转对应页面（如课程详情页）；   4. 指示器 hover：颜色变 #165DFF（未选中时 #DCDFE6）。	1. 桌面端：高度 480px；   2. 平板

1.2、系统功能结构图

在线教育平台前端系统
├── 公共基础模块
│   ├── 路由配置（Route Config）
│   │   ├── 路由守卫（登录态校验、权限拦截）
│   │   ├── 路由映射（页面路径与组件关联）
│   │   └── 嵌套路由（如用户中心子路由）
│   ├── 全局状态管理（Store）
│   │   ├── 用户状态（登录信息、权限角色、个人信息）
│   │   ├── 公共状态（全局加载状态、消息提示、主题配置）
│   │   └── 缓存状态（历史搜索记录、临时表单数据）
│   ├── 工具函数库（Utils）
│   │   ├── 格式校验（手机号/邮箱/密码规则校验）
│   │   ├── 存储处理（localStorage 加密/解密、过期管理）
│   │   ├── 事件监听（键盘事件、滚动事件封装）
│   │   └── 接口辅助（请求拦截、响应处理、错误统一捕获）
│   └── 全局组件（Global Components）
│       ├── 骨架屏（Skeleton）
│       ├── 消息提示（Message/Toast）
│       ├── 弹窗组件（Modal/Dialog）
│       └── 加载动画（Spin/Loading）
├── 页面模块（Pages）
│   ├── 登录注册页（Login & Register）
│   │   ├── 品牌展示区（Logo、插画、Slogan）
│   │   ├── 表单容器（登录表单、注册表单）
│   │   │   ├── 登录表单
│   │   │   │   ├── 账号输入模块（多格式支持、实时校验）
│   │   │   │   ├── 密码输入模块（显隐切换、长度校验）
│   │   │   │   ├── 辅助操作（记住密码、忘记密码）
│   │   │   │   └── 登录触发（按钮状态控制、结果反馈）
│   │   │   └── 注册表单
│   │   │       ├── 手机号输入模块（区号切换、国际号校验）
│   │   │       ├── 验证码模块（倒计时、发送/校验逻辑）
│   │   │       ├── 密码设置模块（强度检测、一致性校验）
│   │   │       ├── 协议确认（复选控制、协议跳转）
│   │   │       └── 注册触发（按钮状态控制、结果反馈）
│   │   └── 第三方登录模块（微信/QQ/微博登录）
│   ├── 首页（Home）
│   │   ├── 顶部导航栏（NavBar）
│   │   │   ├── 导航布局（桌面端/平板端/移动端适配）
│   │   │   ├── 主导航菜单（首页、课程列表、合作院校、高职课堂）
│   │   │   ├── 搜索模块（实时搜索建议、Enter触发、移动端全屏展开）
│   │   │   └── 用户功能区（登录态切换、头像下拉菜单、消息/购物车标识）
│   │   ├── 轮播Banner模块
│   │   │   ├── 内容展示（推广图、标题/副标题、跳转按钮）
│   │   │   ├── 控制交互（自动轮播、hover暂停、箭头切换、指示器）
│   │   │   └── 响应式适配（桌面端/平板端/移动端尺寸调整）
│   │   ├── 课程展示区（待扩展，如热门课程、推荐课程）
│   │   ├── 合作院校区（待扩展，院校信息、合作流程展示）
│   │   └── 高职课堂专区（待扩展，特色内容、分类入口）
│   ├── 课程相关页面（Course）
│   │   ├── 课程列表页（Course List）
│   │   │   ├── 筛选功能（分类、难度、价格区间筛选）
│   │   │   ├── 排序功能（最新、最热、评分排序）
│   │   │   ├── 课程卡片（封面、标题、简介、价格、评分）
│   │   │   └── 分页控制（页码切换、每页条数设置）
│   │   ├── 课程详情页（Course Detail）
│   │   │   ├── 课程信息（封面、标题、讲师、大纲、详情介绍）
│   │   │   ├── 报名模块（价格展示、报名按钮、表单提交）
│   │   │   ├── 直播入口（若有直播，显示直播状态、进入按钮）
│   │   │   └── 相关推荐（同类课程、热门课程推荐）
│   │   └── 课程学习页（Course Learning）
│   │       ├── 视频播放模块（进度记忆、倍速、全屏控制）
│   │       ├── 课程大纲（章节切换、学习进度标记）
│   │       ├── 笔记功能（添加、编辑、删除笔记）
│   │       └── 问答互动（提问、查看回答、点赞）
│   ├── 院校合作页面（School Cooperation）
│   │   ├── 合作信息展示（合作模式、优势、案例）
│   │   ├── 合作流程介绍（步骤拆解、条件说明）
│   │   └── 咨询模块（表单提交、联系方式展示）
│   └── 用户中心页面（User Center）
│       ├── 个人信息页（信息展示、编辑提交）
│       ├── 我的课程页（已报名课程、学习进度、继续学习）
│       ├── 活动管理页（参与的活动、活动进度、结果查看）
│       └── 系统设置页（账号安全、通知设置、主题切换）
├── 样式与资源模块（Styles & Assets）
│   ├── 全局样式（Global Styles）
│   │   ├── 基础样式（重置样式、字体、颜色变量）
│   │   ├── 响应式适配（媒体查询、断点配置）
│   │   └── 动画样式（过渡动画、交互反馈动画）
│   ├── 组件样式（Component Styles）
│   │   ├── 页面专属样式（各页面独立样式文件）
│   │   └── 组件局部样式（Scoped CSS）
│   └── 静态资源（Static Assets）
│       ├── 图片资源（Logo、插画、Banner图、默认头像）
│       ├── 图标资源（Icon字体、SVG图标）
│       └── 文档资源（协议文档、帮助手册）
└── 接口请求模块（API）
    ├── 登录注册接口（login、register、sendCode、findPassword）
    ├── 用户接口（getUserInfo、editUserInfo、logout）
    ├── 课程接口（getCourseList、getCourseDetail、enrollCourse、getLearningProgress）
    ├── 院校接口（getCooperationInfo、submitConsultForm）
    └── 公共接口（getBannerList、getHotSearch、getSystemNotice）

二、​商城网站系统运行

2.1、运行系统

2.1.1、环境准备

2.1.2、项目初始化与依赖安装

三、系统主要功能实现

以下框架按 “页面模块→功能模块→实现要点→技术依赖→接口需求” 五级结构设计，明确每个功能的技术边界、实现逻辑与协作要求，便于需求对齐与进度跟踪。

页面模块	功能模块	实现要点	技术依赖	接口需求
登录注册页	账号密码登录	1. 实时校验账号格式（手机号 / 邮箱）、密码长度（≥6 位）； 2. 「记住密码」功能通过 localStorage 存储（加密处理），下次登录自动填充； 3. 登录按钮状态控制：未填完 / 格式错误时禁用，请求中显示加载动画； 4. 登录失败提示具体原因（账号不存在 / 密码错误）。	Vue Router（跳转）、CryptoJS（密码加密）、Pinia（存储登录态）	POST /api/login（入参：account/password/remember，出参：token/userInfo）
登录注册页	手机验证码注册	1. 手机号校验（国际区号切换，默认 + 86）； 2. 验证码倒计时（60 秒，期间按钮禁用并显示倒计时）； 3. 密码强度检测（弱 / 中 / 强，根据字符类型实时更新）； 4. 注册协议必勾选，未勾选时注册按钮禁用。	Vue3 响应式（实时检测）、CountDown 组件（倒计时）、Vant（协议复选框）	1. POST /api/sendCode（入参：phone/areaCode，出参：codeStatus）；2. POST /api/register（入参：phone/code/password，出参：token）
首页	轮播 Banner	1. 支持自动轮播（5 秒 / 次），hover 时暂停，离开后恢复； 2. 响应式适配：桌面端显示完整文案，移动端简化文案并缩小尺寸； 3. 轮播指示器联动，点击指示器切换对应 Banner； 4. 首次加载时显示骨架屏占位。	Swiper.js（轮播控制）、Vue Skeleton（骨架屏）、CSS Media Query（适配）	GET /api/getBannerList（入参：position=home，出参：bannerList [img/title/url]）
首页	顶部搜索	1. 输入时实时触发搜索建议（防抖处理，300ms 延迟）；2. 移动端点击搜索框展开全屏搜索面板，支持点击空白关闭；3. 显示历史搜索记录（localStorage 存储，最多 10 条，支持清空）；4. Enter 键触发搜索跳转。	Lodash.debounce（防抖）、Vue Router（跳转课程列表页）、localStorage	GET /api/getHotSearch（入参：keyword，出参：suggestList [name/courseId]）
课程列表页	筛选与排序	1. 多维度筛选：分类（前端 / 后端）、难度（入门 / 进阶）、价格（免费 / 付费），筛选条件联动生效； 2. 排序切换：最新（按创建时间）、最热（按报名人数）、评分（按用户评分），切换时显示加载动画； 3. 筛选 / 排序状态持久化，刷新页面不丢失。	Vue3 组合式 API（状态管理）、Element Plus（下拉选择器）、Pinia（状态持久化）	GET /api/getCourseList（入参：category/difficulty/price/sortType/page，出参：courseList/totalPage）
课程详情页	课程报名	1. 未登录时点击报名，跳转登录页（携带课程 ID，登录后返回）； 2. 已报名用户显示「继续学习」按钮，未报名显示「立即报名」； 3. 报名时校验用户信息完整性，信息不全时弹出补填表单； 4. 报名成功显示弹窗提示，支持点击「去学习」跳转。	Vue Router（路由传参）、Pinia（用户状态判断）、Element Plus（弹窗）	1. GET /api/checkEnroll（入参：courseId，出参：isEnrolled）；2. POST /api/enrollCourse（入参：courseId，出参：enrollStatus）
课程学习页	视频播放与进度记忆	1. 视频支持倍速（0.5x-2.0x）、全屏、音量调节，播放中暂停时显示封面； 2. 离开页面时自动保存播放进度（每 30 秒同步一次），下次进入从上次进度继续； 3. 视频加载失败时显示重试按钮，支持重新拉取视频资源。	Video.js（视频控制）、Pinia（进度存储）、Axios（进度同步）	1. GET /api/getVideoUrl（入参：courseId/chapterId，出参：videoUrl）；2. POST /api/saveProgress（入参：courseId/progress，出参：saveStatus）
用户中心 - 我的课程	学习进度展示	1. 按「进行中」「已完成」分类展示课程，进行中课程显示进度条（百分比）； 2. 进度条支持点击，跳转对应课程学习页并定位到当前章节； 3. 已完成课程显示「重新学习」按钮，点击重置进度并跳转。	Vue Router（带参跳转）、Element Plus（进度条组件）、Pinia（用户课程状态）	GET /api/getUserCourses（入参：status [inProgress/finished]，出参：courseList [title/progress/courseId]）
用户中心 - 系统设置	账号安全（密码修改）	1. 校验原密码正确性，错误时显示提示； 2. 新密码需满足「≥8 位 + 字母 + 数字」，两次输入不一致时高亮提示； 3. 提交后需重新登录，跳转登录页并携带「密码已修改」提示。	Vuelidate（表单校验）、Vue Router（跳转）、Pinia（清空登录态）	POST /api/changePassword（入参：oldPwd/newPwd/confirmPwd，出参：changeStatus）
院校合作页	咨询表单提交	1. 表单校验：院校名称 / 联系人 / 手机号为必填项，手机号格式错误时实时提示； 2. 提交按钮状态控制：未填完 / 格式错误时禁用，请求中显示加载； 3. 提交成功显示「已收到咨询，将在 1-2 个工作日联系」弹窗。	Element Plus（表单组件）、Vue3 响应式（校验）、Axios（表单提交）	POST /api/submitConsultForm（入参：schoolName/contact/phone/content，出参：submitStatus）