fix (1.24.0 -> 1.24.1): 修复诊断报告页面背景色不跟随主题的问题

- 重构 DiagnosisSection 组件，移除硬编码背景色
- 移除 ReportFooter 的硬编码白色背景
- 在 DiagnosticReport 页面添加主题背景色设置

改动文件：
- src/pages/patient/DiagnosticReport/components/DiagnosisSection.tsx
- src/pages/patient/DiagnosticReport/components/ReportFooter.tsx
- src/pages/patient/DiagnosticReport/index.tsx

CHANGELOG.md

@@ -2,6 +2,34 @@
 
 本项目的所有重要变更都将记录在此文件中。
 
+## [1.24.1] - 2025-12-23 20:05
+
+### 修复 (Fixed)
+- **诊断报告页面背景色不跟随主题问题** - 修复诊断报告页面在切换主题时背景色不更新的问题
+  - 重构 DiagnosisSection 组件，从使用 Layout/Header/Content 改为普通的 div/span，移除硬编码背景色
+  - 移除 ReportFooter 的硬编码白色背景类，确保背景色跟随主题
+  - 在 DiagnosticReport 页面添加主题背景色设置，使用 currentTheme.token.colorBgContainer
+  - 确保诊断报告页面在浅色和深色主题下都能正确显示背景色
+
+**核心改进:**
+- 主题一致性:诊断报告页面现在完全跟随主题系统，背景色会根据主题自动切换
+- 代码简化:移除硬编码的样式，使用主题 token 确保一致性
+- 用户体验:切换主题时诊断报告页面背景色立即响应，无需刷新
+
+**技术实现:**
+- DiagnosisSection.tsx:重构组件结构，移除 Ant Design Layout 相关组件和硬编码样式
+- ReportFooter.tsx:移除 `bg-white` 类，依赖主题系统提供背景色
+- index.tsx:添加主题状态获取和背景色样式设置
+
+**改动文件:**
+- src/pages/patient/DiagnosticReport/components/DiagnosisSection.tsx
+- src/pages/patient/DiagnosticReport/components/ReportFooter.tsx
+- src/pages/patient/DiagnosticReport/index.tsx
+- CHANGELOG.md
+- package.json (版本更新: 1.24.0 -> 1.24.1)
+
+---
+
 ## [1.24.0] - 2025-12-23 19:20
 
 ### 新增 (Added)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zsis",
-  "version": "1.24.0",
+  "version": "1.24.1",
   "private": true,
   "description": "医学成像系统",
   "main": "main.js",

src/pages/patient/DiagnosticReport/components/DiagnosisSection.tsx

@@ -4,11 +4,11 @@ import { useDispatch, useSelector } from 'react-redux';
 import { setDiagnosisDescription } from '@/states/patient/DiagnosticReport/diagnosisSlice';
 import { Input, Layout } from 'antd';
 
-const { Header, Content } = Layout;
+const { Content } = Layout;
 
 export const DiagnosisSection: React.FC = () => {
   const dispatch = useDispatch();
-   
+
   const diagnosisDescription = useSelector((state: any) => state.diagnosis.diagnosisDescription);
 
   const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -16,19 +16,18 @@ export const DiagnosisSection: React.FC = () => {
   };
 
   return (
-<Layout className="flex flex-col">
-<Header className="flex justify-between items-center p-4 bg-gray-100">
-        <div className="label">影像诊断</div>
-      </Header>
-<Content className="p-4">
-<Input.TextArea
-  className="w-full p-2 border border-gray-300 rounded"
-  value={diagnosisDescription}
-  onChange={handleInputChange}
-  placeholder="由用户输入"
-  rows={4}
-/>
-      </Content>
-    </Layout>
+    <div className="flex flex-col">
+      <div className="flex justify-between items-center">
+        <span className="label">影像诊断</span>
+      </div>
+
+      <Input.TextArea
+        className="w-full border rounded"
+        value={diagnosisDescription}
+        onChange={handleInputChange}
+        placeholder="由用户输入"
+        rows={4}
+      />
+    </div>
   );
 };

src/pages/patient/DiagnosticReport/components/ReportFooter.tsx

@@ -9,7 +9,7 @@ import { saveReportThunk } from '@/states/patient/DiagnosticReport/saveReportThu
 export const ReportFooter: React.FC<{ reportData: any }> = ({ reportData }) => {
   const dispatch = useAppDispatch();
   return (
-    <div className="p-4 text-right bg-white border-t">
+    <div className="p-4 text-right border-t">
       <Space>
         <Button onClick={() => dispatch(previewReportThunk())}>预览</Button>
         <Button type="primary" onClick={() => dispatch(saveReportThunk(reportData))}>

src/pages/patient/DiagnosticReport/index.tsx

@@ -10,7 +10,7 @@ const DiagnosticReport: React.FC = () => {
   const dispatch = useAppDispatch();
   const currentWork = useAppSelector((state) => state.diagnosticReport.currentWork);
   const reportData = {}; // Define reportData here or fetch it from state or props
-
+  const currentTheme = useAppSelector((state) => state.theme.currentTheme);
   // 初始化报告数据
   React.useEffect(() => {
     if (currentWork) {
@@ -34,7 +34,8 @@ const DiagnosticReport: React.FC = () => {
   }, [currentWork, dispatch]);
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full"
+      style={{ backgroundColor: currentTheme.token.colorBgContainer }}>
       <ReportHeader />
       <ReportMain className="flex-1 overflow-scroll" />
       <ReportFooter reportData={reportData} />