zn-ai/.trae/documents/实现简约美观的登录页（Vue + Tailwind）.md

页面需求

• 输入：账号、密码；按钮：登录

• 交互：输入校验（必填、长度/格式）、回车提交、禁用按钮（加载中/校验失败）、错误提示、明文/密文切换

• 布局：简约卡片居中、品牌标题、副文、响应式（桌面）、浅色渐变背景

现状与集成点

• 已存在页面骨架：src/views/login/index.vue（中心卡片+标题，待补表单）

• 路由：登录路由目前注释（src/router/index.ts），默认首页为 / 的 BrowserLayout（标签页界面）

实现步骤

1. 表单与校验

• 在 src/views/login/index.vue 中添加账号/密码输入框与登录按钮

• 使用 ref/reactive 管理表单；规则：

  • 账号：必填、长度 4-32、允许邮箱/手机号/用户名（简单格式校验）

  • 密码：必填、长度 ≥ 6

• 按钮禁用条件：!valid || loading

• 支持 Enter 键触发提交

• 密码框添加“显示/隐藏”切换

1. 反馈与跳转

• 登录过程显示 loading（按钮文案切换为“登录中…”）

• 失败显示错误提示（红色文本）；成功暂时跳转到 /（浏览器标签页界面）

• 留出接口占位：login(account, password)（后续接入真实 API）

1. 样式

• Tailwind 构建简约风格：卡片圆角阴影、输入框边框、聚焦效果、按钮主色（蓝色）

• 响应式：移动端输入宽度 100%，桌面端 max-w-md 保持卡片紧凑

1. 路由接入

• 在 src/router/index.ts 增加登录路由：/login → views/login/index.vue

• 暂不改默认首页；如需登录守卫，可后续将 /login 作为默认或在未认证时重定向到 /login

代码改动概览（不执行，仅说明）

• src/views/login/index.vue

  • 模板：两个输入框（账号、密码）、显示/隐藏密码按钮、登录按钮、错误提示区域

  • 逻辑：form、errors、validate()、onSubmit()、loading、togglePassword()；成功后：router.push('/')

  • 样式：Tailwind 类名添加于容器/卡片/输入/按钮

• src/router/index.ts

  • 添加：

    { path: '/login', name: 'Login', component: () => import('@/views/login/index.vue') }
    

验证

• 输入为空时按钮禁用；填入合法后启用

• 按 Enter 能提交；失败提示文案显示；成功跳转到首页

• 移动端/桌面端居中显示良好

后续可选

• 接入真实认证 API（axios），保存 token（Pinia/LocalStorage），路由守卫控制访问

• 增加“记住我”、忘记密码、国际化

请确认以上方案，确认后我将直接补全 index.vue 表单与交互，并注册 /login 路由。