86 lines
2.6 KiB
Markdown
86 lines
2.6 KiB
Markdown
## 页面需求
|
||
|
||
* 输入：账号、密码；按钮：登录
|
||
|
||
* 交互：输入校验（必填、长度/格式）、回车提交、禁用按钮（加载中/校验失败）、错误提示、明文/密文切换
|
||
|
||
* 布局：简约卡片居中、品牌标题、副文、响应式（桌面）、浅色渐变背景
|
||
|
||
## 现状与集成点
|
||
|
||
* 已存在页面骨架：`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` 路由。
|