前端工程创建
首先我们借助于Sealos的DevBox帮助创建一个前端Vue项目，后续我们使用Cursor完成项目开发
然后输入项目名称、选择vue，选完之后点击右上角的创建即可
同理，我们继续Cursor打开当前工程
前端工程启动
如果大家具备一定的基础，肯定知道怎么启动，如果不知道可以参照前面的后端工作进行咨询
而我们要做的，就是在命令控制台执行：npm run dev即可
然后执行命令：npm run dev，就会马上提示我们访问地址
但我们也知道，现在要访问肯定是需要公网地址的，所以我们访问Sealos里面的公网地址信息
因为这个公网地址默认绑定的就是3000端口，所以这里直接访问域名：https://rwcezvlxrwzm.sealoshzh.site
提示语编写
提示语的编写，是基于页面原型来的，所以大家务必认真分析，得出自己的分析语才是学会的关键
自己手动截图页面原型，可以框一下，让AI工具更明确有三个部分
请根据提供的页面原型的截图，基于Vue3 + ElementPlus帮我制作 “智学云帆-教学管理系统” 的页面，首先先完成页面的基本布局 。 具体要求如下:
- 页面的顶部，要展示系统的标题，标题内容：“智学云帆-教学管理系统”，字体类型：楷体，字体大小：30，居左对齐。 在顶部标题栏的右侧，要展示 “退出登录【张三】” 的超链接，这里的张三，将来要展示的当前登录员工，目前可以先写死。
- 左侧的侧边栏，展示出这个管理系统的菜单，具体的菜单结构为：
- 首页
- 班级学员管理
2.1 班级管理
2.2 学员管理 - 系统信息管理
3.1 部门管理
3.2 员工管理
- 右侧为核心展示区域，点击左侧菜单，在右侧要展示出对应的页面，比如点击 "首页"，右侧核心展示区域就要展示首页的页面 。
代码运行与优化
此时当你选择接受全部代码后，会发现运行报错，如下
这是因为，他生成的代码是有一些外部依赖的，你必须先执行，我们只需点击run即可
然后我们再次：npm run dev运行项目，官网访问会发现依然存在错误
聪明的小伙伴们，肯定已经知道如何去解决了
然后选择accept all，我们再次运行项目，访问就可以了：https://rwcezvlxrwzm.sealoshzh.site/
不过也有点小问题，比如宽度不够、左侧和右侧没有一个背景色区别，你可以不断优化
帮我为左侧菜单栏和顶部，设计一个协调的背景颜色，同时目前页面没有铺满浏览器，请一起优化
你可以继续优化首页：
帮我设计一下这个系统的首页，要求：简洁大气
