问题描述

当前日程管理页面创建日程时，用户体验不佳：

• 前端 StreamingFeedback 组件只显示最后一条事件
• 用户无法实时了解 AI 处理进度和状态变化
• 存在"黑盒焦虑"，不知道 AI 正在做什么

相关文件：

• web/src/components/ScheduleQuickInput/StreamingFeedback.tsx
• web/src/hooks/useScheduleQueries.ts

解决方案

功能范围

包含：

• ✅ 4 阶段进度条（理解 → 解析 → 检查 → 创建）
• ✅ 当前状态文字提示
• ✅ 成功/失败状态反馈
• ✅ 错误状态高亮

不包含（未来扩展）：

• ❌ 取消处理功能
• ❌ 事件时间线详情展开

技术方案

效果预览

┌─────────────────────────────────────────────┐
│   ①━━━━━●━━━━━②━━━━━━━③━━━━━━━④            │
│   理解意图   解析时间   检查冲突   创建日程   │
│   ⚡ 正在查询日程...                        │
└─────────────────────────────────────────────┘

文件改动

web/src/components/ScheduleQuickInput/
├── StreamingFeedback.tsx          # 增强：集成进度条
├── PhaseProgress.tsx              # 新增：阶段进度条组件
└── phaseConfig.ts                 # 新增：阶段配置

web/src/locales/
├── en.json                        # 新增 phase.* keys
└── zh-Hans.json                   # 新增 phase.* keys

核心代码

1. phaseConfig.ts - 阶段配置

export const SCHEDULE_PHASES = [
  { key: "understand", labelKey: "schedule.phase.understand", eventTypes: ["plan", "thinking"] },
  { key: "parse", labelKey: "schedule.phase.parse", eventTypes: ["task_start"] },
  { key: "check", labelKey: "schedule.phase.check", eventTypes: ["tool_use"] },
  { key: "create", labelKey: "schedule.phase.create", eventTypes: ["tool_result", "answer"] },
];

export function getCurrentPhase(events: StreamingEvent[]): number;
export function getStatusText(event: StreamingEvent, t: TranslateFn): string;

2. PhaseProgress.tsx - 进度条组件

interface PhaseProgressProps {
  currentPhase: number;  // 0-3
  isComplete?: boolean;
  hasError?: boolean;
}

// 渲染 4 个圆形节点 + 连接线
// 已完成：绿色 ✓
// 当前：蓝色脉冲动画
// 未完成：灰色
// 错误：红色

3. StreamingFeedback.tsx - 增强版

// 集成 PhaseProgress + 状态文字
// 移除原有的单事件显示逻辑

i18n 更新

en.json:

{
  "schedule.phase.understand": "Understand",
  "schedule.phase.parse": "Parse",
  "schedule.phase.check": "Check",
  "schedule.phase.create": "Create",
  "schedule.ai.understanding": "Understanding your request...",
  "schedule.ai.generating": "Generating response..."
}

zh-Hans.json:

{
  "schedule.phase.understand": "理解意图",
  "schedule.phase.parse": "解析时间",
  "schedule.phase.check": "检查冲突",
  "schedule.phase.create": "创建日程",
  "schedule.ai.understanding": "正在理解您的请求...",
  "schedule.ai.generating": "正在生成回复..."
}

复杂度

• 工作量: 4 小时（0.5 人天）
• 风险: 低

验收标准

• make check-all 通过
• 进度条正确显示 4 个阶段
• 状态文字与当前操作匹配
• 错误状态正确高亮
• i18n 翻译完整（中英文）
• 移动端显示正常

依赖项

无前置依赖。

调研时间: 2026-02-20 | 版本: v1.0

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>