claudecode/frontend/src/components/WelcomeScreen.tsx
fengmengqi 4a04faf926 feat: 添加 Web 前端及服务端 SSE 流式支持,扩展多模型兼容
后端:
  - server: 实现完整的 HTTP 会话管理(CRUD)+ SSE 事件流推送,
    支持双通道架构(POST 发消息 + GET SSE 接收流式响应)
  - runtime: ContentBlock 新增 Thinking / RedactedThinking 变体,
    支持思考过程和已编辑思考的序列化/反序列化
  - api: 注册 GLM 系列模型(glm-4/5 等)到模型注册表,
    扩展 XAI/OpenAI 兼容提供商的请求构建逻辑

  前端:
  - 基于 Ant Design X 构建完整聊天界面:Bubble.List 消息列表、
    Sender 输入框、Conversations 会话管理、Think 思考过程折叠、
    ThoughtChain 工具调用链展示
  - XMarkdown 集成:代码高亮、Mermaid 图表、LaTeX 公式、
    自定义脚注、流式渲染(incomplete 占位符)
  - SSE Hook 对接服务端事件流,手动管理 AssistantBuffer 累积 delta
  - 深色/浅色主题切换,会话侧边栏(新建/切换/删除)
2026-04-10 16:29:27 +08:00

42 lines
1.1 KiB
TypeScript

import React from 'react';
import { Welcome, Prompts } from '@ant-design/x';
const examplePrompts = [
{ key: '1', label: '总结当前工作区', description: '分析项目结构和代码' },
{ key: '2', label: '帮我写一个测试', description: '为指定模块生成测试用例' },
{ key: '3', label: '查找 Bug', description: '检查代码中的潜在问题' },
];
interface WelcomeScreenProps {
onSelect: (prompt: string) => void;
}
const WelcomeScreen: React.FC<WelcomeScreenProps> = ({ onSelect }) => {
return (
<div style={{
flex: 1,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
padding: 48,
}}>
<Welcome
icon="🐾"
title="Claw Code"
description="本地编码助手,连接你的 Claw Server"
style={{ marginBottom: 32 }}
/>
<Prompts
title="试试这些"
items={examplePrompts}
onItemClick={(info) => {
onSelect(String(info.data.label));
}}
/>
</div>
);
};
export default WelcomeScreen;