todo.md

LLMs Assistants Web App - TODO

阶段一：项目搭建与核心布局 (步骤 001-002)

• 001.1: 创建 Next.js 项目结构 (llm-assistants-webapp)
• 002.1: 设计并实现应用主布局（左侧 Dock 栏，右侧主内容区）
• 002.2: 实现左侧 Dock 栏基本结构和样式 (浅灰色背景)
• 002.3: 在 Dock 栏顶部添加 Logo 占位符
• 002.4: 在 Dock 栏底部添加提示词管理和设置图标占位符

阶段二：助手列表与管理 (步骤 003-005)

• 003.1: 实现 Dock 栏助手列表的静态展示
• 003.2: 实现助手列表项（头像、名称）
• 003.3: 实现拖拽排序助手列表功能
• 003.4: 实现选中助手后，在右侧显示对应聊天界面的切换逻辑（占位符）
• 003.5: 在助手列表末尾添加“查看全部助手”和“添加助手”图标
• 004.1: 实现“查看全部助手”页面布局（卡片宫格）
• 004.2: 实现助手卡片展示（头像、名称、指令提示词单行显示）
• 004.3: 区分展示“已添加的助手”和“助手库”
• 004.4: 实现助手库预设助手数据的加载与展示
• 005.1: 实现“添加助手”功能：点击图标跳转或弹窗
• 005.2: 实现手动填写助手字段表单：头像（Emoji下拉选择）、名称、指令提示词、模型ID（下拉选择，按API域名分组）
• 005.3: 实现将新助手添加到“我的助手”列表并在Dock栏实时显示
• 005.4: 实现编辑已添加助手的功能（可更改模型）
• 005.5: 实现删除已添加助手的功能
• 005.6: 实现默认助手的预添加：“头像（bot）、名称（默认助手）、指令提示词（我可以回答任何问题）”
• 005.7: 实现新添加/从库添加助手时，默认使用用户添加的模型（若无则用默认模型）

阶段三：提示词与设置管理 (步骤 006-007)

• 006.1: 实现“提示词管理”页面布局
• 006.2: 实现提示词卡片列表展示（固定2行内容，点击弹窗显示完整内容）
• 006.3: 实现提示词卡片编辑功能（弹窗内编辑，关闭即保存）
• 006.4: 实现提示词卡片拖拽排序功能
• 006.5: 实现提示词卡片 Hover 显示删除图标及删除功能
• 007.1: 实现“设置”页面布局
• 007.2: 实现已添加 LLM 服务列表的卡片展示
• 007.3: 实现添加模型服务功能：API密钥（含获取链接）、API地址（自动补全后缀）、模型ID（标签形式，支持输入框筛选和手动输入）
• 007.4: 实现编辑和删除已添加模型服务的功能
• 007.5: 实现导入和导出模型设置功能
• 007.6: 兼容 OpenAI、Gemini、DeepSeek、Anthropic 及自定义 API 服务
• 007.7: 实现 API 连通性测试功能（使用添加的模型ID测试）
• 007.8: 实现默认预添加模型（DeepSeek & Qwen on OpenRouter, API 地址 api.riiio.chat），并禁用编辑/删除，隐藏真实API地址

阶段四：聊天界面与交互 (步骤 008)

• 008.1: 实现聊天界面顶部信息栏：当前助手头像、名称、模型ID（点击头像可编辑助手）
• 008.2: 实现聊天记录区域的实时流式显示 (模拟)
• 008.3: 支持渲染 Markdown 格式的聊天消息
• 008.4: 支持预览聊天消息中的图片链接
• 008.5: 实现深度思考内容（模式）的收起/展开
• 008.6: 实现底部悬浮输入框和功能区布局
• 008.7: 实现多行输入框（默认显示一行，与右侧功能区图标对齐）
• 008.8: 实现输入框内 Paperclip 图标：上传图片并在输入区预览，随消息发送
• 008.9: 实现输入框内 Note 图标：点击弹出提示词列表（单行显示），点击插入输入框
• 008.10: 实现输入框内 Columns 图标：点击弹出模型ID选择菜单（按API域名分组，默认勾选当前模型）
• 008.11: 实现多模型提问：勾选多个模型ID，聊天区分割显示，共用输入框，同时回答 (模拟)
• 008.12: 实现输入框内 Clock-circle 图标：点击弹出历史会话列表（自动命名，支持删除、查看、新建）(UI占位符已添加，完整功能待实现)
• 008.13: 实现发送按钮及点击后变为停止生成按钮的逻辑
• 008.14: 实现输入框快捷键：Enter 发送，Shift + Enter 换行
• 008.15: 实现按钮主题色为黑色，所有图标 Hover 显示 Tooltips (基本实现)
• 008.16: 实现聊天记录本地持久化存储，默认继续上次会话，无会话自动创建
• 008.17: 实现进入页面默认选择第一个助手

阶段五：整合、测试与交付 (步骤 009-010)

• 009.1: 整体功能完整性测试 (代码层面已完成，用户需实际测试)
• [~] 009.2: UI 响应式设计在不同设备上的测试与调整 (基础已实现，用户需详细测试)
• [~] 009.3: 将所有 SVG 图标存放到 assets 文件夹并正确引用 (使用 lucide-react 图标库替代)
• 010.1: 准备最终的可部署 Web 应用文件
• 010.2: 编写交付报告，说明应用功能和使用方法
• 010.3: 将应用和报告发送给用户