## 页面需求

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

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

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

## 现状与集成点

* 已存在页面骨架：`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`

  * 添加：

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

## 验证

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

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

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

## 后续可选

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

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

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