frontend-design

STOP AND READ THIS FIRST.

你是本项目的核心开发 Agent。本目录下的所有 Markdown 文件构成了 frontend-design 的强制性技术规范（Technical Specification）。

在进行任何前端表单、字段或交互逻辑开发之前，你必须严格遵循以下路由规则，使用你的文件读取能力查阅对应的细节文档。

1. 页面流程概览

1.1 新用户注册流程

新用户首次进入系统时，采用**分步式引导（Step-by-Step）**完成初始化：

新用户首次进入
      ↓
┌─────────────────────────────────────────────────────┐
│ login.html：登录/注册                                │
│   ├─ 已有账号？输入用户名+密码登录                    │
│   └─ 新用户？点击"立即注册"跳转                       │
└─────────────────────────────────────────────────────┘
      ↓
┌─────────────────────────────────────────────────────┐
│ index.html：用户画像初始化（第一阶段）               │
│   ├─ 基本信息（用户名、密码、身份类型）               │
│   ├─ 身份详情（根据类型动态展示）                     │
│   └─ 使用场景 & 兴趣标签（可选）                      │
└─────────────────────────────────────────────────────┘
      ↓
┌─────────────────────────────────────────────────────┐
│ index.html：AI 助手定制（第二阶段）                   │
│   ├─ AI 名字（用户给助手起名）                        │
│   ├─ AI 身份角色                                     │
│   ├─ AI 性格特点                                     │
│   └─ 沟通风格                                        │
└─────────────────────────────────────────────────────┘
      ↓
提交至后端 API：POST /v1/user/onboarding
      ↓
┌─────────────────────────────────────────────────────┐
│ settings.html：LLM 配置                              │
│   ├─ LLM 提供商选择                                  │
│   ├─ API Base URL（可选）                            │
│   ├─ API Key                                         │
│   ├─ 模型名称                                        │
│   └─ 保存并预热                                      │
└─────────────────────────────────────────────────────┘
      ↓
┌─────────────────────────────────────────────────────┐
│ chat.html：开始对话                                  │
└─────────────────────────────────────────────────────┘

1.2 老用户登录流程

老用户登录
      ↓
┌─────────────────────────────────────────────────────┐
│ login.html：输入用户名+密码                          │
└─────────────────────────────────────────────────────┘
      ↓
后端判断：是否已配置 LLM？
      ├─ 是 → 直接跳转 chat.html
      └─ 否 → 跳转 settings.html

2. 页面清单

页面	文件	功能
登录/注册	`login.html`	用户登录入口
初始化	`index.html`	新用户画像和 AI 定制
LLM 设置	`settings.html`	配置用户的 LLM API
聊天	`chat.html`	与 AI 助手对话

3. 编码前置依赖路由表

[ACTION REQUIRED] 当我要求你开发或修改特定模块时，你必须先读取以下对应的文件。

模块 A：用户画像表单

如果你需要实现或修改用户画像收集、身份详情动态展示相关的代码：

必须读取: forms/user-profile.md (基本信息、身份详情动态字段、使用场景、兴趣标签)

模块 B：AI 助手定制表单

如果你需要实现或修改AI 助手定制、性格选择、沟通风格相关的代码：

必须读取: forms/ai-customization.md (AI 名字、角色、性格、沟通风格)

模块 C：请求契约

如果你需要实现前端提交逻辑或字段校验相关的代码：

必须读取: api/request-schema.md (完整的请求 JSON 结构)

模块 D：LLM 设置表单

如果你需要实现或修改LLM 配置、预热状态相关的代码：

必须读取: forms/llm-settings.md (提供商、API Key、模型名称、预热状态)

4. 严格的开发约束

字段命名一致性：前端字段名必须与 api/request-schema.md 中定义的字段名完全一致。
动态字段逻辑：身份详情字段根据 identity_type 动态展示，详见 forms/user-profile.md。
称呼约定：AI 称呼用户时直接使用用户的 username，AI 自称使用 ai_name。
登录状态检查：聊天页和设置页需检查 localStorage 中的 userId，未登录跳转 login.html。

5. 相关 Skills 引用

后端处理逻辑：详见 input-pipeline skill
数据库表结构：详见 database-schema skill
LLM 配置：详见 llm-factory-design skill