93 lines
2.5 KiB
Markdown
93 lines
2.5 KiB
Markdown
# 财经新闻要点获取页面
|
||
|
||
## 功能概述
|
||
|
||
财经新闻要点获取页面是一个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格式展示，支持丰富的文本格式 |