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的是接口文檔的地址 不需要快速開發不需要改