Browse Source

fix: 修复bug 101 - 统一图像状态控制和传输区域按钮布局

- 调整ImageStateControl.tsx和TransferArea.tsx的布局,与FunctionArea区域按钮布局保持一致

改动文件:
- src/pages/view/components/ImageStateControl.tsx
- src/pages/view/components/TransferArea.tsx
dengdx 3 weeks ago
parent
commit
19f7ff5783

+ 25 - 0
CHANGELOG.md

@@ -2,6 +2,31 @@
 
 本项目的所有重要变更都将记录在此文件中。
 
+## [1.11.5] - 2025-12-17 13:30
+
+### 修复 (Fixed)
+- **UI布局调整优化** (bug 101)
+  - 在 ImageStateControl.tsx 中为 Flex 组件添加 wrap 和 padding 样式
+  - 在 TransferArea.tsx 中引入 Flex 组件并调整布局结构
+  - 优化组件响应式布局和视觉一致性
+
+**核心改进:**
+- 提升UI组件的布局灵活性:通过 Flex wrap 实现更好的自适应布局
+- 统一样式规范:添加一致的 padding 样式,提升视觉统一性
+- 代码结构优化:TransferArea 组件从 div 改为 Flex,提高布局控制能力
+
+**技术实现:**
+- Flex 组件添加 wrap 属性支持内容换行
+- 统一添加 className="p-1" 提供标准 padding
+- TransferArea 布局从 div 改为 Flex,保持一致的布局系统
+
+**改动文件:**
+- src/pages/view/components/ImageStateControl.tsx
+- src/pages/view/components/TransferArea.tsx
+- package.json (版本更新: 1.11.4 -> 1.11.5)
+
+---
+
 ## [1.11.4] - 2025-12-17 13:14
 
 ### 修复 (Fixed)

+ 1 - 1
package.json

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

+ 1 - 1
src/pages/view/components/ImageStateControl.tsx

@@ -141,7 +141,7 @@ const ImageStateControl: React.FC = () => {
     selectedImage?.dview?.expose_status === 'Exposed';
 
   return (
-    <Flex gap="small" align="center" justify="start">
+    <Flex wrap gap="small"  align="center" justify="start" className="p-1">
       {showRejectButton && (
         <Button
           onClick={handleReject}

+ 3 - 3
src/pages/view/components/TransferArea.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from 'antd';
+import { Button,Flex } from 'antd';
 import { useDispatch } from 'react-redux';
 import { switchToSendPanel } from '../../../states/panelSwitchSliceForView';
 import { useButtonAvailability } from '@/utils/useButtonAvailability';
@@ -16,7 +16,7 @@ const TransferArea = () => {
   };
 
   return (
-    <div className="transfer-area">
+    <Flex wrap gap="small" align="center" justify="start" className="p-1">
       <Button
         style={{
           width: '1.5rem',
@@ -29,7 +29,7 @@ const TransferArea = () => {
       >
         Send
       </Button>
-    </div>
+    </Flex>
   );
 };