界面功能详解

本页面将详细介绍代班友友的每个界面元素和功能。

整体布局

┌─────────────────────────────────────────────────────┐
│              控制台（指标 + Token）                    │
├──────────────────────┬──────────────────────────────┤
│                      │                              │
│                      │                              │
│   实时对话            │      待办事项面板              │
│   （左侧）            │      （右侧）                 │
│                      │                              │
│                      │                              │
└──────────────────────┴──────────────────────────────┘

🎛️ 控制台（页面顶部）

控制台是整个系统的指挥中心，显示关键指标和Token信息。

指标卡片

5个并排显示的指标卡片，实时更新系统状态：

1. 待办事项

显示格式：3/5（表示5个任务已完成3个）
颜色指示：
- 🟢 绿色 - 全部完成
- 🔵 蓝色 - 进行中
- ⚪ 灰色 - 未开始
点击操作：点击可展开右侧待办面板

2. 执行轮次

含义：AI思考和执行的次数
计数规则：每次调用工具（搜索、生成文件等）算一轮
参考值：
- 简单任务：5-10轮
- 中等任务：10-30轮
- 复杂任务：30-50轮+

3. 搜索次数

含义：AI联网搜索的次数
显示：实时累加
说明：数值越高，说明获取的外部信息越多

4. 最终交付物

含义：生成的可交付文件数量
类型包括：
- 📄 文档文件
- 🎨 演示文稿
- 📊 数据文件
- 💻 代码文件
点击操作：点击可打开交付物预览窗口

5. 剩余次数

含义：您的Token还可以使用多少次
颜色警示：
- 🟢 绿色 - 次数充足（>10次）
- 🟡 黄色 - 次数较少（5-10次）
- 🔴 红色 - 即将用完（<5次）
耗尽提示：次数为0时无法发起新任务

Token输入框

位于指标卡片下方的认证区域。

功能：

输入使用凭证
自动验证有效性
显示剩余次数

使用方法：

粘贴或输入Token字符串
按回车或点击「验证」
验证成功后显示：✅ Token有效，剩余XX次
验证失败显示：❌ Token无效或已过期

安全提示

Token类似密码，请勿泄露给他人。建议定期更换Token。

会话信息

显示当前对话的技术信息（折叠显示）：

conversation_id - 当前对话的唯一标识符
previous_response_id - 上一次回复的编号

用途

这些ID用于系统内部管理和问题排查，普通使用无需关注。如需技术支持，可提供这些ID。

💬 实时对话（左下方卡片）

与AI进行交互的主要区域。

顶部状态栏

显示当前系统工作状态：

状态	颜色	说明
🟢 未开始	绿色	等待您输入需求
🔵 执行中	蓝色	AI正在工作，请稍候
🟢 待命	绿色	任务完成，可以继续提问
🔴 发生错误	红色	出现问题，查看错误提示
🟢 任务已收束	绿色	完整流程已结束

对话区域

显示您和AI的完整对话历史。

用户消息

样式：白色气泡，右对齐
内容：您输入的原始文本
时间戳：消息发送时间

AI回复

样式：蓝绿渐变气泡，左对齐
包含信息：
1. 轮次标识 - 如"第1轮"、"第2轮"
2. 阶段信息 - 当前处于哪个工作阶段
3. 工具调用 - AI使用了哪些工具（搜索、生成文件等）
4. 回复内容 - AI的思考过程和总结

示例：

第5轮 | 内容生成阶段

🔧 工具调用：
- 生成Markdown文档: report.md
- 生成数据文件: data.json

我已完成市场分析报告的主体内容，包含了最新的
行业数据和趋势分析。正在生成配套的数据文件...

消息类型

普通消息 - AI的回复和说明
工具调用消息 - 显示AI使用的工具及参数
系统消息 - 状态更新、警告、错误提示
完成消息 - 任务完成通知

输入框

位于卡片底部的输入区域。

功能特性：

📝 多行文本输入（自动扩展）
⌨️ 快捷键支持：
- Ctrl+Enter (Windows)
- Cmd+Enter (Mac)
📏 字符计数（可选显示）
💾 自动保存草稿（刷新页面不丢失）

状态提示：

🔄 "继续现有会话" - 将接续上次对话
🆕 "开始新对话" - 点击右侧「新建对话」后显示
🚫 "请先停止当前任务" - AI工作时无法发送新消息

输入建议：

尽量具体明确
可以分多段描述
支持Markdown格式（会保留）
可以包含示例和模板

📋 待办事项（右侧面板）

显示任务分解和执行进度。

进度条

顶部的可视化进度指示器。

显示内容：

彩色进度条（青色→绿色渐变）
百分比数字（如：60%）
完成数量（如：3/5）

颜色意义：

0-30%：红色系
30-70%：黄色系
70-100%：绿色系

任务列表

按工作阶段分组显示的任务清单。

阶段分组

典型的阶段包括：

📋 需求分析阶段
🔍 信息收集阶段
✍️ 内容生成阶段
📦 交付准备阶段

任务项样式

未完成任务：

☐ 搜索行业最新数据

灰色边框
空心复选框
正常字体

已完成任务：

☑ 搜索行业最新数据

绿色边框
实心打勾
删除线文字
淡化显示

进行中任务：

🔄 正在生成报告内容...

蓝色边框
加载动画
加粗字体

底部按钮

三个功能按钮，根据状态动态启用/禁用。

1. 查看交付物

图标：📦
功能：打开文件预览窗口
启用条件：至少有1个文件生成
快捷键：Alt+D

2. 新建对话

图标：🆕
功能：开始全新对话
效果：
- 清空对话历史
- 重置待办清单
- 清除交付物
- 重置指标计数
确认提示：会询问是否确认（防止误操作）

3. 停止

图标：⏹️
功能：中止AI执行
启用条件：仅在AI工作时可用
效果：
- 安全停止当前任务
- 保留已完成的部分
- 可查看已生成的文件

📦 交付物预览窗口

点击「查看交付物」后弹出的模态窗口。

顶部工具栏

左侧：

📦 标题 - "交付物预览"
🔢 数量 - 显示文件总数（如：共5个文件）

右侧按钮：

下载全部 - 打包所有文件为ZIP
- 显示打包进度
- 自动命名（如：files-20251010-143022.zip）
下载当前 - 下载正在查看的文件
- 保留原始文件名
关闭（❌） - 关闭预览窗口

左侧文件列表

显示所有生成的文件。

排序方式：

默认按字母顺序
可选按类型分组
可选按生成时间

文件项显示：

📄 文件类型图标
📝 文件名
📏 文件大小
🕐 生成时间（悬停显示）

交互：

点击切换预览
当前选中项高亮显示
支持键盘上下键切换

右侧预览区域

根据文件类型显示不同的预览效果。

Markdown文档

✅ 渲染后的排版
✅ 标题、列表、表格
✅ 代码块高亮
✅ 自动生成目录（长文档）
✅ 锚点跳转

代码文件

✅ 语法高亮
✅ 行号显示
✅ 支持的语言：
- Python, JavaScript, TypeScript
- Java, C++, C#, Go
- HTML, CSS, SQL
- JSON, YAML, XML
- 等数十种语言

JSON/CSV数据

✅ 格式化展示
✅ 折叠/展开（JSON）
✅ 表格视图（CSV）
✅ 搜索和筛选

图片文件

✅ 原图显示
✅ 缩放控制
✅ 支持格式：PNG, JPG, GIF, SVG, WebP

PDF文件

✅ 内嵌PDF阅读器
✅ 翻页控制
✅ 缩放和下载

其他格式

ℹ️ 显示"无法预览，请下载"
📥 提供下载按钮

特殊功能：

📖 长文档自动截断（前100KB）
🔍 内容搜索（Ctrl+F）
📋 一键复制内容
🖨️ 打印预览

快捷键参考

快捷键	功能
`Ctrl+Enter` / `Cmd+Enter`	发送消息
`Esc`	关闭预览窗口
`Alt+D`	打开交付物预览
`Alt+N`	新建对话
`Alt+S`	停止任务
`Ctrl+F`	预览窗口内搜索
`↑` `↓`	切换文件列表

状态指示参考

颜色系统

颜色	含义	应用场景
🟢 绿色	正常/成功/完成	完成任务、可用状态
🔵 蓝色	工作中/处理中	AI执行、加载状态
🟡 黄色	警告/注意	次数不足、等待输入
🔴 红色	错误/禁用	出错、不可用
⚪ 灰色	未开始/禁用	待执行任务、不可点击

图标系统

图标	含义
☐	未完成任务
☑	已完成任务
🔄	进行中
✅	成功
❌	失败/错误
⚠️	警告
ℹ️	信息提示

下一步

💬 实时对话指南 - 掌握对话技巧
📋 待办事项说明 - 理解任务管理
📦 交付物预览 - 学会查看和下载文件

熟悉了界面后，让我们学习如何高效使用！ 💡