在 /home/enzo/projects/hive-manage-v3/frontend/ 下实现前端鉴权体系。

## 1. API 客户端

创建 frontend/src/api/client.ts:
- axios 实例 baseURL='/api/v1'
- 请求拦截器: 从 localStorage('access_token') 读取 JWT, 加到 Authorization: Bearer header
- 响应拦截器: 401 自动清除 token → 跳转 /login

创建 frontend/src/api/auth.ts:
```typescript
import client from './client'
export const login = (username: string, password: string) => client.post('/auth/login', {username, password})
export const register = (data: {username, email, password}) => client.post('/auth/register', data)
export const refresh = () => client.post('/auth/refresh')
export const changePassword = (data: {old_password, new_password}) => client.post('/auth/change-password', data)
```

创建 frontend/src/api/users.ts:
```typescript
import client from './client'
export const getUsers = (params?) => client.get('/users', {params})
export const getUser = (id: string) => client.get(`/users/${id}`)
export const updateUser = (id: string, data) => client.patch(`/users/${id}`, data)
export const approveUser = (id: string) => client.post(`/users/${id}/approve`)
```

创建 frontend/src/api/audit.ts:
```typescript
import client from './client'
export const getAuditLogs = (params?) => client.get('/audit', {params})
```

## 2. useAuth hook

创建/修改 frontend/src/hooks/useAuth.ts:
```typescript
import { useState, useEffect, createContext, useContext } from 'react'
// AuthContext 提供: user, token, login(), logout(), isAuthenticated
// token 存 localStorage('access_token')
// user 从 JWT payload 解码获取 (username, role, user_id)
```

## 3. Login 页面

修改 frontend/src/pages/LoginPage.tsx:
- 居中卡片, 暗色背景
- Logo "🐝 知微蜂巢" + "Hive Manage v3"
- 用户名 + 密码输入框
- 登入按钮 (primary, full width)
- 注册链接 (跳转注册页)
- 错误提示 (用户名/密码错误, 账户锁定 15 分钟等)
- 成功后跳转 /dashboard

## 4. 用户管理页面

修改 frontend/src/pages/UserManagementPage.tsx:
- 使用 Table 组件
- 列: 用户名, 邮箱, 角色(下拉可改), 状态(active/inactive), 审批状态, 创建时间, 操作
- 仅 owner 可见操作按钮
- 角色修改: owner 可改, API PATCH /users/{id}
- 审批: owner 可点, API POST /users/{id}/approve
- 分页: 每页 20 条

## 5. 审计日志页面

修改 frontend/src/pages/AuditLogPage.tsx:
- 使用 Table 组件
- 列: 时间, 用户, 操作(action), 目标(target), 详情(detail), IP
- action 筛选: 下拉列表 (全部/keys.batch_overwrite/gateway.toggle/cron.trigger/...)
- 分页: 每页 20 条
- 仅 owner 可见

## 6. 路由守卫

修改 App.tsx:
- 未登录: 任何页面 → 重定向 /login
- 登录后: 根据角色隐藏/显示导航项和操作按钮
- Viewer 看不到: 用户管理、审计日志、Gateway 启停、密钥覆盖、Cron 操作

完成后提交:
```bash
cd /home/enzo/projects/hive-manage-v3 && git add frontend/src/api/ frontend/src/hooks/useAuth.ts frontend/src/pages/LoginPage.tsx frontend/src/pages/UserManagementPage.tsx frontend/src/pages/AuditLogPage.tsx frontend/src/App.tsx && git commit -m "feat: frontend auth flow (login, user management, audit logs, route guards)"
```