【眼底辅助诊断开放平台】项目笔记

1. src/coponents 目录下新增新文件 MarkdownRenderer.tsx
2. 修改页面 src/pages/SelfDeployAI/index.tsx

任务一

前端页面开发：

所涉及知识点：《眼底视网膜解读》

1. 页面位于 page 目录下的两个新文件中，查看 Git 提交记录可以找到具体文件。
2. 需要适配手机端，支持弹性变化布局。

后端接口配置：

1. 将 config.tsx 中的端口替换为 10.3.36.106，以便访问的后端服务。✅

• 修改 ./proxy 文件：确保 target 指向 http://。✅

重启项目：确保配置生效。

http://7529

负责前端页面开发、后端接口配置和代码拉取。

任务二

自行部署

1、历史记录实现✅已实现
2、后台任务上传、假、真 列表展示✅已实现

3、excel导出 pdf打印

• 安装必要的依赖：

  yarn add jspdf jspdf-autotable
  

• 更改导出方式
  最适合这种场景的库通常是jsPDF，它是一个轻量级的客户端PDF生成库，易于使用。

  // 导出诊断报告const exportReport = () => {if (messages.length === 0) {message.info('暂无诊断结果可导出');return;}// 找最近的一次分析结果let reportContent = '';let hasAnalysis = false;for (let i = messages.length - 1; i >= 0; i--) {if (messages[i].aiAnalysis) {// 找到了分析结果const analysis = messages[i].aiAnalysis;const content = messages[i].content;reportContent = `
# 眼底诊断报告
生成时间：${moment().format('YYYY-MM-DD HH:mm:ss')}## 分析结果
主要诊断: ${analysis.main_class.label} (置信度: ${(analysis.main_class.confidence * 100).toFixed(2)}%)
分级: ${analysis.main_class.grade}级
左眼: ${analysis.left_eye.severity} (置信度: ${(analysis.left_eye.confidence * 100).toFixed(2)}%)
右眼: ${analysis.right_eye.severity} (置信度: ${(analysis.right_eye.confidence * 100).toFixed(2)}%)
预测年龄: ${analysis.age_prediction}
预测性别: ${analysis.gender_prediction}## 病灶测量
微血管瘤: ${analysis.measurements?.microaneurysm_count ?? '未测量'}个
出血点: ${analysis.measurements?.hemorrhage_count ?? '未测量'}处
硬性渗出: ${analysis.measurements?.exudate_count ?? '未测量'}处## 特征重要性
${analysis.feature_importance?.factors?.map(f =>`- ${f.name}: ${(f.value * 100).toFixed(1)}%`).join('\n') || '无特征重要性数据'}## 可视化分析
- 左眼分析图: ${analysis.visualizations?.left_eye ? '已生成' : '无'}
- 右眼分析图: ${analysis.visualizations?.right_eye ? '已生成' : '无'}
- 包含视图: ${analysis.visualizations?.left_eye?.filtered_views ?Object.keys(analysis.visualizations.left_eye.filtered_views).join(', ') : '无'}## 诊断解读
${analysis.explanation.text}
关键发现：${analysis.explanation.findings.join('，')}## 诊断建议
${content}`;hasAnalysis = true;break;}}if (!hasAnalysis) {message.info('暂无分析结果可导出');return;}// 创建下载链接const blob = new Blob([reportContent], {type: 'text/plain'});const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = `眼底诊断报告_${moment().format('YYYYMMDD_HHmmss')}.txt`;document.body.appendChild(a);a.click();document.body.removeChild(a);URL.revokeObjectURL(url);message.success('诊断报告已导出');};

• 创建导出工具函数
  创建src/utils/exportUtils.ts文件：
  exportUtils.ts文件的作用是提供可重用的导出功能，比如将数据导出为PDF或Excel等格式。这样可以避免在多个组件中重复编写相同的导出逻辑，使代码更加模块化和易于维护。

创建完成后，将我之前提供的PDF导出代码放入这个文件中，然后在主组件中导入使用。

或者直接靠浏览器自带的下载

接入服务

1、添加详细介绍
2、提示词预设
3、功能介绍如可以智能导诊、查看名医

• 创建更详细的提示词分类和数据结构
• 增加一个侧边栏或下拉菜单来展示提示词预设
• 添加功能让用户选择这些预设
• 将选择的预设直接填入输入框或直接发送

日志

修改样式和解析MD文档

• SelfDeployAI/index.tsx

1. 修改 Layout 的样式
   
   
   
   
   怎么感觉没变化啊靠

2. 修改加载动画的样式

接入服务

1. 导入缺失的Avatar组件。

- import { Card, message, Typography, Layout, Button, Switch, Space, Tooltip, Spin } from 'antd';
+ import { Card, message, Typography, Layout, Button, Switch, Space, Tooltip, Spin, Avatar } from 'antd';

2. 新增消息元数据字段

// 原结构
setMessages([...prev, { sender, content, timestamp }])// 修改后应包含AI角色和消息类型
setMessages([...prev, {sender: '用户',role: 'patient', // 新增用户角色标识contentType: 'text', // 新增消息类型(text/image)attachments: [], // 新增附件字段diagnosticData: {}, // 新增诊断数据字段timestamp
}])

Note

前端登陆不进去/更改后端api接口

多半是因为后端没有部署，或者可以更改后端api
config -> config.ts

openAPI: [{requestLibPath: "import { request } from '@umijs/max'",schemaPath: 'http://localhost:7529/api/v3/api-docs', //更改后端apiprojectName: 'cai-api-backend',},],

304 Not Modified

浏览器缓存问题，但是刷新后仍然出现报错，我查看了其他报错原因

mf-dep____vendor.0983249d.js:343218POST http://127.0.0.1:7529/api/user/login?token%20=%20123 net::ERR_CONNECTION_REFUSED

我的端口并不是这个，所以肯定有哪些遗漏的
可以排查：后端服务未启动、端口配置错误、网络问题或跨域问题

login.cache.json

账号密码

"payload": {"username": "admin","password": "ant.design","autoLogin": true,"type": "account"},

ERR_CONNECTION_TIMED_OUT

浏览器在尝试连接到服务器时，等待响应的时间过长，超出了设置的超时时间

1. 网络连接较慢
2. 服务器无法响应
3. 求目标地址不可访问

建议：查看端口号，我这里需要的端口号不是8080，所以需要更改

跨域

有的时候直接申请网址会出现失败的情况
这种就是跨域了

一般提交格式

feat: - 新功能
fix: - 修复问题
docs: - 文档相关
style: - 样式/格式变更
refactor: - 代码重构
perf: - 性能优化
test: - 测试相关
chore: - 日常维护任务

proxy.ts

• pre是生产环境
• dev配置是开发环境 改掉dev的target为10.3.36.106:7529
• openapi的是接口文档的地址 不需要快速开发不需要改