Cursor 科技感的登录页面提示词
页面结构与设计
- 使用Vue 3的
<template>和<script setup>语法 - 登录页面包含视觉元素：网格背景、动态光点、扫描线效果
- 采用Ant Design Vue组件库的表单、输入框、按钮等UI组件
- 响应式设计，适配不同屏幕尺寸
核心功能模块
- 表单验证功能
- 用户名必填验证
- 密码长度不少于6位的验证
- 登录流程
- 密码加密处理
- 调用登录API接口
- 处理登录响应
- 用户信息获取
- 成功登录后获取当前用户信息
- 存储用户信息和token
状态管理
- 使用Pinia进行全局状态管理
- globalStore存储用户信息
- chatStore管理登录状态
- 本地存储方案
- sessionStorage临时存储
- localStorage持久化存储
安全措施
- 密码加密传输
- Token存储与传递
- 错误处理机制
路由与导航
- 使用Vue Router进行页面跳转
- 登录成功后跳转到智能代理页面
辅助功能
- 加载状态显示
- 错误信息提示
- 回车键提交支持
代码结构
- 组件导入清晰有序
- 响应式数据管理
- 异步请求处理
- 表单引用管理
环境配置
- 开发与生产环境区分
- API基础URL配置
视觉元素实现
- CSS动画效果
- 粒子动画
- 扫描线动画
- 布局结构
- 背景层与内容层分离
- 响应式盒子模型
错误处理
- 表单验证错误提示
- API请求错误处理
- 用户信息获取失败处理