# 财经新闻要点获取页面

## 功能概述

财经新闻要点获取页面是一个AI驱动的工具，能够自动获取最新财经新闻并智能聚合提炼核心要点。

## 实现特性

### 1. 页面结构
- **页面标题区**: 显示"最新财经新闻要点获取工具"及功能描述
- **操作按钮区**: 一键获取新闻要点按钮
- **内容展示区**: 实时显示AI生成的财经新闻要点

### 2. 交互功能
- 一键式操作，无需用户输入参数
- 流式响应，实时更新内容
- 错误处理和加载状态管理
- 响应式设计，支持各种屏幕尺寸

### 3. 技术实现
- **前端框架**: React 18 + TypeScript
- **UI组件**: Ant Design 5.x
- **样式**: Tailwind CSS 4.x + 内联样式
- **Markdown渲染**: react-markdown
- **API集成**: Dify平台流式接口

### 4. API集成
- **接口地址**: https://copilot.sino-bridge.com/v1/chat-messages
- **请求方式**: POST
- **鉴权方式**: Bearer Token
- **响应模式**: 流式响应 (streaming)

## 文件结构

```
src/
├── api/
│   └── financial-news.ts      # API接口定义和调用逻辑
├── pages/
│   ├── financial-news/
│   │   └── index.tsx          # 财经新闻页面主文件
│   └── home/
│       └── index.tsx          # 首页（已更新添加入口）
└── router/
    └── index.tsx              # 路由配置（已添加新页面）
```

## 使用方法

1. 访问首页，点击"财经新闻要点获取"卡片
2. 进入财经新闻页面
3. 点击"获取新闻要点"按钮
4. 等待AI处理并显示结果

## 技术细节

### API调用流程
1. 用户点击按钮触发 `handleGenerate()` 函数
2. 发送POST请求到Dify平台
3. 接收流式响应数据
4. 实时更新内容展示区
5. 响应完成后显示完整结果

### Markdown样式定制
- 自定义标题样式（蓝色主题）
- 段落间距和行高优化
- 列表和强调文本样式
- 响应式内容容器

### 错误处理
- 网络请求失败提示
- 加载状态管理
- 用户友好的错误消息

## 依赖更新

已在 `package.json` 中添加：
- `react-markdown`: "^9.0.0" - 用于Markdown内容渲染

## 启动开发服务器

```bash
pnpm dev
```

访问 http://localhost:5173/ 查看效果。

## 注意事项

1. 确保网络连接正常，能够访问Dify API
2. API token已配置在代码中
3. 页面采用流式响应，请耐心等待内容加载
4. 所有内容以Markdown格式展示，支持丰富的文本格式