feat: 调整项目结构

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

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