在本篇文章中，我将分享一个基于 Vue3 + Element Plus 构建的「智能题目生成页面」的实现思路与设计理念。该页面作为在线学习平台的一部分，核心功能是：用户上传学习资料，AI 自动为其生成定制化题目。以下将从页面风格、功能模块、交互体验等方面进行拆解说明。
一、页面风格设计
1. 整体视觉风格
-
现代感：整体采用渐变背景（淡蓝+紫色系），辅以毛玻璃效果，营造出清新、智能、科技感十足的学习环境。
-
一致性：配合平台首页的导航栏样式，保持品牌风格一致。
-
响应式排版：通过
clamp()与弹性布局实现良好的自适应排版，确保在不同尺寸屏幕下均有良好的视觉呈现。
2. 色彩与字体
-
主色调：
#667eea ~ #764ba2的渐变配色，统一用于图标背景、高亮文字、按钮等重点元素。 -
中性色：文本与辅助信息采用黑灰色系（如
#1d1d1f,#86868b），提升可读性。 -
字体选择：使用系统默认字体栈，兼容性好，加载快。
二、功能设计模块
1. 顶部导航栏
-
固定在页面顶部，用户在滚动页面时仍可随时切换功能模块（主页、题目生成、错题分析）。
-
用户区域采用下拉菜单，支持查看个人信息与退出登录。
2. Hero Section（宣传引导）
-
强调产品核心价值：“上传资料，AI 自动生成题目”。
-
使用醒目的大标题与高亮关键词吸引用户注意力。
3. 上传学习资料模块
-
功能描述：
-
支持拖拽或点击选择文件上传；
-
支持多种文档格式：
.pdf,.doc(x),.ppt(x),.txt,.png等； -
文件大小限制在 10MB 以内。
-
-
交互优化：
-
文件上传后模拟进度条加载效果，提升用户信任感；
-
自动校验格式和大小，并提供友好提示。
-
4. 参数设置区域
用户可以根据实际需求设置：
-
题目类型（选择题、填空题、简答题）；
-
题目数量（2~30 道）；
-
题目难度（简单、中等、困难）。
使用 Element Plus 的
el-select实现选择控件，交互自然流畅。
5. 生成按钮与提示
-
生成按钮启用条件：用户完成上传并设置好所有参数；
-
点击生成后会显示 loading 动画，并通过 streaming 方式实时接收生成进度；
-
生成完成后自动跳转到练习页面，题目以
sessionStorage暂存并通过router传递参数。
三、技术实现要点
1. 文件处理逻辑
const beforeUpload = (file) => {// 检查扩展名和大小return isValidFile(file)
}
上传前判断合法性，配合 Element Plus 的 el-upload 组件，使用 :before-upload 和 :on-change 控制上传行为。
2. 题目生成请求逻辑
采用流式（Streaming）方式接收题目生成进度和结果：
const response = await fetch('/api/question/generate', {method: 'POST',body: formData,
})const reader = response.body.getReader()
// 持续读取流数据，逐条解析题目信息
通过 TextDecoder 实时解析后端返回的 SSE-like 数据格式，动态更新 UI 状态。
3. 数据传递方式
生成的题目对象不直接传参，而是通过 sessionStorage 缓存，避免路由参数过长或页面刷新丢失。
const storageKey = 'temp_questions_' + Date.now()
sessionStorage.setItem(storageKey, JSON.stringify(dataToPass))
router.push({ name: 'Exercise', query: { dataKey: storageKey } })
四、用户体验优化
状态感知：按钮禁用条件、上传进度提示、生成中的动态文案，让用户明确当前操作状态；
错误处理：包括上传失败、格式错误、生成失败等场景都提供了完整的反馈信息；
动画与细节：loading spinner、hover 效果、渐变按钮等微交互，提升整体精致度。
五、页面展示
