feat (1.27.0 -> 1.28.0): 修复 bug#152 - 实现图像处理页面患者信息显示功能

- 在 ImageProcessingPageLarge.tsx 中导入 useAppSelector 和 Flex 组件
- 添加患者信息提取逻辑，从 selectedBodyPosition 中获取 PatientID 和 PatientName
- 重构页面布局，使用 Flex 容器包裹患者信息区域和原有内容
- 保持原有功能完整性，确保 OperationPanel 和 BodyPositionList 正常工作

改动文件：
- src/pages/view/ImageProcessingPageLarge.tsx
- CHANGELOG.md
- package.json

CHANGELOG.md

@@ -2,6 +2,34 @@
 
 本项目的所有重要变更都将记录在此文件中。
 
+## [1.28.0] - 2025-12-25 17:37
+
+### 新增 (Added)
+- **图像处理页面患者信息显示功能** - 在图像处理页面顶部添加患者ID和姓名的显示
+  - 使用 Redux state 获取当前选中体位的患者信息
+  - 在 ImageProcessingPageLarge 组件中添加患者信息显示区域
+  - 将原有的 Layout 布局改为 Flex 布局，提升布局灵活性
+  - 确保患者信息在图像处理界面中始终可见，提升用户体验
+
+**核心功能实现:**
+- 患者信息展示：在图像处理页面顶部显示当前选中体位的患者ID和姓名
+- 状态管理集成：通过 useAppSelector 从 bodyPositionList 状态获取数据
+- 布局优化：使用 Flex 布局替代原有的 Layout，提升页面结构
+- 用户体验提升：患者信息始终可见，方便医生确认当前处理对象
+
+**技术实现:**
+- 在 ImageProcessingPageLarge.tsx 中导入 useAppSelector 和 Flex 组件
+- 添加患者信息提取逻辑，从 selectedBodyPosition 中获取 PatientID 和 PatientName
+- 重构页面布局，使用 Flex 容器包裹患者信息区域和原有内容
+- 保持原有功能完整性，确保 OperationPanel 和 BodyPositionList 正常工作
+
+**改动文件:**
+- src/pages/view/ImageProcessingPageLarge.tsx
+- CHANGELOG.md
+- package.json (版本更新: 1.27.0 -> 1.28.0)
+
+---
+
 ## [1.27.0] - 2025-12-25 14:24
 
 ### 新增 (Added)

package.json

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

src/pages/view/ImageProcessingPageLarge.tsx

@@ -1,4 +1,5 @@
-import { Layout } from 'antd';
+import { Flex, Layout } from 'antd';
+import { useAppSelector } from '@/states/store';
 import ImageControl from './components/ImageControl';
 import OperationPanel from './components/OperationPanel';
 import BodyPositionList from '../exam/components/BodyPositionList';
@@ -7,37 +8,52 @@ import InvertContrastModal from './components/InvertContrastModal';
 const { Content, Sider } = Layout;
 
 const ImageProcessingPageLarge = () => {
+  const selectedBodyPosition = useAppSelector(
+    (state) => state.bodyPositionList.selectedBodyPosition
+  );
+
+  const patientId = selectedBodyPosition?.work?.PatientID || '';
+  const patientName = selectedBodyPosition?.work?.PatientName || '';
+  const patientSex = selectedBodyPosition?.work?.PatientSex || '';
+
   return (
-    <Layout className="h-full">
-      <Sider width={200} className="custom-sider">
-        {/**使用style注入方式修改Sider内部div的样式，使体位列表显示出体位信息 */}
-        <style>{`
+    <Flex className="h-full m-0 p-0" vertical>
+      <div className="text-[15px] m-0">
+        <span className="mr-4">患者ID: {patientId}</span>
+        <span>患者姓名: {patientName}</span>
+        <span>性别: {patientSex}</span>
+      </div>
+      <Layout className="flex-1">
+        <Sider width={200} className="custom-sider">
+          {/**使用style注入方式修改Sider内部div的样式，使体位列表显示出体位信息 */}
+          <style>{`
             .custom-sider > .ant-layout-sider-children {
               display: flex;
               flex-direction: column;
               height: 100%;
             }
           `}</style>
-        <BodyPositionList layout="vertical" showAddButton={false} />
-      </Sider>
-      <Content>
-        <ImageControl />
-      </Content>
-      <Sider width={300} className="operation-panel-sider">
-        {/**使用style注入方式确保OperationPanel获得100%高度 */}
-        <style>{`
+          <BodyPositionList layout="vertical" showAddButton={false} />
+        </Sider>
+        <Content>
+          <ImageControl />
+        </Content>
+        <Sider width={300} className="operation-panel-sider">
+          {/**使用style注入方式确保OperationPanel获得100%高度 */}
+          <style>{`
             .operation-panel-sider > .ant-layout-sider-children {
               display: flex;
               flex-direction: column;
               height: 100%;
             }
           `}</style>
-        <OperationPanel />
-      </Sider>
-      
-      {/* 反色对比Modal */}
-      <InvertContrastModal />
-    </Layout>
+          <OperationPanel />
+        </Sider>
+
+        {/* 反色对比Modal */}
+        <InvertContrastModal />
+      </Layout>
+    </Flex>
   );
 };