250 lines
9.0 KiB
Markdown
250 lines
9.0 KiB
Markdown
# 注册界面 + 设置界面 功能设计
|
||
|
||
## 概述
|
||
|
||
为 Jarvis 系统添加用户注册功能和完整的设置界面。用户可以：
|
||
- 在前端注册账号
|
||
- 在设置界面管理个人信息和 LLM 配置
|
||
- 配置定时任务等系统参数
|
||
|
||
**核心价值：** 支持多用户、每个用户独立配置自己的 LLM 提供商和参数。
|
||
|
||
## 现状分析
|
||
|
||
### 已有的功能
|
||
- 后端已有 `/api/auth/register` API
|
||
- 后端使用 `pydantic-settings` 从 `.env` 读取配置
|
||
- 前端只有登录页面，无注册入口
|
||
|
||
### 需要改动的地方
|
||
- 前端 LoginView 添加注册表单
|
||
- User 模型增加 `llm_config` 和 `scheduler_config` JSON 字段
|
||
- 新建 Settings 路由和服务
|
||
- 新建 SettingsView 页面
|
||
|
||
## 数据模型
|
||
|
||
### User 表扩展
|
||
|
||
```sql
|
||
ALTER TABLE users ADD COLUMN llm_config TEXT;
|
||
ALTER TABLE users ADD COLUMN scheduler_config TEXT;
|
||
```
|
||
|
||
### 字段结构
|
||
|
||
**llm_config (JSON):**
|
||
```json
|
||
{
|
||
"chat": {
|
||
"provider": "openai|claude|ollama|deepseek|custom",
|
||
"model": "gpt-4o",
|
||
"base_url": "https://api.openai.com/v1",
|
||
"api_key": "sk-..."
|
||
},
|
||
"vlm": {
|
||
"provider": "openai",
|
||
"model": "gpt-4o",
|
||
"base_url": "...",
|
||
"api_key": "..."
|
||
},
|
||
"embedding": {
|
||
"provider": "openai",
|
||
"model": "text-embedding-3-small",
|
||
"base_url": "...",
|
||
"api_key": "..."
|
||
},
|
||
"rerank": {
|
||
"provider": "openai",
|
||
"model": "bge-reranker-v2",
|
||
"base_url": "...",
|
||
"api_key": "..."
|
||
}
|
||
}
|
||
```
|
||
|
||
**scheduler_config (JSON):**
|
||
```json
|
||
{
|
||
"daily_plan_time": "08:00",
|
||
"forum_scan_interval_minutes": 30,
|
||
"todo_ai_generate_time": "08:00",
|
||
"enabled": true
|
||
}
|
||
```
|
||
|
||
## API 设计
|
||
|
||
### 1. 注册 API (已有)
|
||
```
|
||
POST /api/auth/register
|
||
Body: { email, password, full_name }
|
||
Response: UserOut
|
||
```
|
||
|
||
### 2. 获取用户设置
|
||
```
|
||
GET /api/settings
|
||
Response: {
|
||
profile: { id, email, full_name, created_at },
|
||
llm_config: { ... },
|
||
scheduler_config: { ... }
|
||
}
|
||
```
|
||
|
||
### 3. 更新用户资料
|
||
```
|
||
PUT /api/settings/profile
|
||
Body: { full_name?, password? }
|
||
Response: UserOut
|
||
```
|
||
|
||
### 4. 更新 LLM 配置
|
||
```
|
||
PUT /api/settings/llm
|
||
Body: { chat?: {...}, vlm?: {...}, embedding?: {...}, rerank?: {...} }
|
||
Response: { llm_config: { ... } } // 返回更新后的完整配置
|
||
```
|
||
|
||
### 5. 测试 LLM 连接
|
||
```
|
||
POST /api/settings/llm/test
|
||
Body: { type: "chat"|"vlm"|"embedding"|"rerank", provider, model, base_url, api_key }
|
||
Response: { success: true, message: "连接成功" } 或 { success: false, error: "错误信息" }
|
||
```
|
||
|
||
### 6. 更新定时任务配置
|
||
```
|
||
PUT /api/settings/scheduler
|
||
Body: { daily_plan_time?, forum_scan_interval_minutes?, todo_ai_generate_time?, enabled? }
|
||
Response: { scheduler_config: { ... } } // 返回更新后的完整配置
|
||
```
|
||
|
||
## 前端页面
|
||
|
||
### LoginView.vue 改动
|
||
- 添加"注册"和"登录"切换 Tab
|
||
- 注册表单：邮箱、密码、确认密码、用户名
|
||
- 复用现有 sci-fi 登录风格
|
||
|
||
### SettingsView.vue (新建)
|
||
|
||
#### 页面布局
|
||
```
|
||
┌─────────────────────────────────────────────────┐
|
||
│ [⚙] SETTINGS │
|
||
├─────────────────────────────────────────────────┤
|
||
│ ┌─────────────────────────────────────────────┐ │
|
||
│ │ PROFILE │ │
|
||
│ │ Email: operator@jarvis.ai │ │
|
||
│ │ Name: [___________] │ │
|
||
│ │ Password: [********] [Change] │ │
|
||
│ └─────────────────────────────────────────────┘ │
|
||
│ ┌─────────────────────────────────────────────┐ │
|
||
│ │ LLM CONFIGURATION │ │
|
||
│ │ ┌─ Chat ────────────────────────────────┐ │ │
|
||
│ │ │ Provider: [OpenAI ▼] │ │ │
|
||
│ │ │ Model: [gpt-4o ____________] │ │ │
|
||
│ │ │ Base URL:[https://...] ] │ │ │
|
||
│ │ │ API Key: [•••••••••••••••••] │ │ │
|
||
│ │ └──────────────────────────────────────┘ │ │
|
||
│ │ ┌─ VLM ─────────────────────────────────┐ │ │
|
||
│ │ │ ... (同上结构) │ │ │
|
||
│ │ └──────────────────────────────────────┘ │ │
|
||
│ │ ┌─ Embedding ───────────────────────────┐ │ │
|
||
│ │ │ ... (同上结构) │ │ │
|
||
│ │ └──────────────────────────────────────┘ │ │
|
||
│ │ ┌─ Rerank ──────────────────────────────┐ │ │
|
||
│ │ │ ... (同上结构) │ │ │
|
||
│ │ └──────────────────────────────────────┘ │ │
|
||
│ └─────────────────────────────────────────────┘ │
|
||
│ ┌─────────────────────────────────────────────┐ │
|
||
│ │ SCHEDULER │ │
|
||
│ │ Daily Plan Time: [08:00] │ │
|
||
│ │ Forum Scan Interval: [30] 分钟 │ │
|
||
│ │ Todo AI Generate: [08:00] │ │
|
||
│ │ Scheduler Enabled: [ON] │ │
|
||
│ └─────────────────────────────────────────────┘ │
|
||
│ ┌─────────────────────────────────────────────┐ │
|
||
│ │ [SAVE ALL SETTINGS] │ │
|
||
│ └─────────────────────────────────────────────┘ │
|
||
└─────────────────────────────────────────────────┘
|
||
```
|
||
|
||
#### 交互行为
|
||
- 修改后点击"保存"按钮，按钮显示 loading 状态
|
||
- 保存成功显示 toast 提示"保存成功"
|
||
- 保存失败显示 toast 提示错误信息
|
||
- 密码修改需二次确认弹窗
|
||
- API Key 字段支持显示/隐藏切换
|
||
- 每个模型配置卡片有独立的"测试"按钮
|
||
- Provider 切换时自动填充默认值（如 Ollama 切换到 localhost:11434）
|
||
- Scheduler enabled 关闭时，时间输入框显示禁用状态
|
||
- 空配置时显示"点击配置"占位提示
|
||
|
||
#### 注册表单
|
||
- 邮箱：必填，格式校验
|
||
- 用户名：必填，2-20 字符
|
||
- 密码：必填，最少 8 字符
|
||
- 确认密码：必填，需与密码一致
|
||
- 密码强度指示器（弱/中/强）
|
||
|
||
## 路由和侧边栏
|
||
|
||
### router/index.ts
|
||
```typescript
|
||
{
|
||
path: 'settings',
|
||
name: 'settings',
|
||
component: () => import('@/views/SettingsView.vue'),
|
||
}
|
||
```
|
||
|
||
### SidebarNav.vue
|
||
```typescript
|
||
{ name: '设置', path: '/settings', icon: Settings }
|
||
```
|
||
|
||
## 技术实现
|
||
|
||
### 后端文件
|
||
```
|
||
backend/app/
|
||
models/
|
||
user.py # 修改：添加 llm_config, scheduler_config 字段
|
||
schemas/
|
||
auth.py # 修改：UserCreate 支持 full_name
|
||
settings.py # 新建：SettingsOut, LLMConfigIn, SchedulerConfigIn
|
||
routers/
|
||
settings.py # 新建：settings router
|
||
services/
|
||
settings_service.py # 新建：设置逻辑服务
|
||
```
|
||
|
||
### 前端文件
|
||
```
|
||
frontend/src/
|
||
api/
|
||
settings.ts # 新建：settings API 客户端
|
||
views/
|
||
LoginView.vue # 修改：添加注册 Tab
|
||
SettingsView.vue # 新建：设置页面
|
||
router/
|
||
index.ts # 修改：添加 /settings 路由
|
||
components/
|
||
SidebarNav.vue # 修改：添加设置菜单
|
||
```
|
||
|
||
## 验证清单
|
||
|
||
1. 注册功能正常 - 可以通过注册页面创建新账号
|
||
2. 登录功能正常 - 新老用户都可以登录
|
||
3. 设置页面可访问 - 登录后可进入设置页面
|
||
4. 个人信息修改正常 - 用户名、密码可修改
|
||
5. LLM 配置保存正常 - 四种模型配置可保存
|
||
6. LLM 测试连接正常 - 可以验证配置是否正确
|
||
7. 定时任务配置正常 - 时间间隔可修改
|
||
8. 配置持久化正常 - 重新登录后配置保留
|
||
9. UI 风格一致 - 设置页面与其他页面风格统一
|
||
10. 注册表单验证正常 - 密码强度、格式校验有效
|