# F1 · 登录页与个人页

> 分支：`task/f1-fe` ｜ worktree：`G:\meida-app-f1` ｜ 只改：`app/entry/src/main/ets/pages/LoginPage.ets`、`pages/ProfilePage.ets`（填桩）、`ets/components/f1/`（可自建）
> 先读《README-FE批次.md》（协作规程 + ArkTS 铁律 + API 速查），严格遵守。

## 目标

登录闭环与个人中心：dev-token 登录页（含 baseUrl 设置）+ 个人页（用户信息、配额卡片、登出）。

## LoginPage 要求

1. 品牌区（"美搭"标题 + 一句 slogan）+ 设备标识输入框（默认值随机生成一次并 @State 记住，可改）+「进入美搭」按钮
2. **服务器地址设置**：折叠区（"高级设置"）显示当前 `AuthStore.getBaseUrl()`，可编辑保存（`setBaseUrl`）——真机连开发机靠它
3. 登录流程：按钮 loading 态 → `AuthStore.loginByDevToken(deviceKey)` → 成功 `router.replaceUrl({url:'pages/HomePage'})`；失败 catch ApiError 展示 message+hint（错误横幅/对话框）
4. 已登录态进入本页时 aboutToAppear 直接跳 HomePage

## ProfilePage 要求

1. 顶部：用户 ID（`AuthStore.getUserId()`，脱敏显示前 6 后 4）、登出按钮（确认弹窗 → `AuthStore.logout()` → 回 LoginPage）
2. **配额卡片**：并行拉 `agent_chat`、`tryon`、`report_basic` 三个 `GET /api/v1/quota`（具名 interface 对齐速查结构；`reset_at` 显示"明日恢复"或日期，null=终身/月度文案区分）
3. 进度条展示 `used/(limit_value+bonus_granted)`，剩余数大字
4. 「最近流水」：`GET /api/v1/quota/ledger?limit=10` 列表（tx_type 中文映射：consume=消耗/refund=退还/system_grant=奖励；status 颜色区分）
5. 下拉刷新（Refresh 组件）可加分但非必须

## 验收

1. 构建门禁 `BUILD SUCCESSFUL`（见规程 §1 命令）
2. 无 ArkTS 铁律违规（规程 §3 逐条自查）
3. 请求全部走 `ApiClient`/`AuthStore`（不直接碰 http）
4. 单次提交，信息：`feat(app): login page with dev-token flow and profile with quota cards（F1）` + 正文中文说明 + 偏差说明