Browse Source

fix (1.57.3 -> 1.57.4): 修复图像状态控制组件图标样式问题

- 导入 antd 主题相关模块,使用 useToken 钩子获取主题颜色,为图标添加字体大小和主题颜色样式

改动文件:
- src/pages/view/components/ImageStateControl.tsx
- package.json
- CHANGELOG.md
dengdx 6 days ago
parent
commit
a986b2aae5
3 changed files with 34 additions and 10 deletions
  1. 11 0
      CHANGELOG.md
  2. 1 1
      package.json
  3. 22 9
      src/pages/view/components/ImageStateControl.tsx

+ 11 - 0
CHANGELOG.md

@@ -3,6 +3,17 @@
 本项目的所有重要变更都将记录在此文件中.
 
 
+## [1.57.4] - 2026-01-07 11:14
+
+### 修复 (Fixed)
+
+- **修复图像状态控制组件图标样式问题** - 导入 antd 主题相关模块,使用 useToken 钩子获取主题颜色,为图标添加字体大小和主题颜色样式
+
+**改动文件:**
+
+- src/pages/view/components/ImageStateControl.tsx
+- package.json
+
 ## [1.57.3] - 2026-01-07 10:50
 
 ### 修复 (Fixed)

+ 1 - 1
package.json

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

+ 22 - 9
src/pages/view/components/ImageStateControl.tsx

@@ -7,14 +7,15 @@ import {
   selectGridLayout,
   selectSelectedViewers,
 } from '@/states/view/viewerContainerSlice';
-import { 
+import {
   judgeImageThunk,
-  saveImageAsThunk 
+  saveImageAsThunk
 } from '@/states/exam/bodyPositionListSlice';
 import { getDcmImageUrl } from '@/API/bodyPosition';
 import Icon from '@/components/Icon';
 import { useButtonAvailability } from '@/utils/useButtonAvailability';
-
+import { theme } from 'antd';
+const { useToken } = theme;
 /**
  * 图像状态控制组件
  * 
@@ -31,9 +32,9 @@ import { useButtonAvailability } from '@/utils/useButtonAvailability';
 const ImageStateControl: React.FC = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
-  const { disabled:ofReject } = useButtonAvailability('拒绝');
-  const { disabled:ofRecover } = useButtonAvailability('恢复');
-  const { disabled:ofSaveAs } = useButtonAvailability('另存为');
+  const { disabled: ofReject } = useButtonAvailability('拒绝');
+  const { disabled: ofRecover } = useButtonAvailability('恢复');
+  const { disabled: ofSaveAs } = useButtonAvailability('另存为');
   // 获取必要的状态
   const selectedViewers = useSelector(selectSelectedViewers);
   const gridLayout = useSelector(selectGridLayout);
@@ -138,12 +139,12 @@ const ImageStateControl: React.FC = () => {
   };
 
   // 另存为按钮显示条件:单分格 + 有选中图像 + 图像已曝光
-  const showSaveAsButton = 
-    selectedImage !== null && 
+  const showSaveAsButton =
+    selectedImage !== null &&
     selectedImage?.dview?.expose_status === 'Exposed';
 
   return (
-    <Flex wrap gap="small"  align="center" justify="start" className="p-1">
+    <Flex wrap gap="small" align="center" justify="start" className="p-1">
       {showRejectButton && (
         <Button
           onClick={handleReject}
@@ -156,6 +157,10 @@ const ImageStateControl: React.FC = () => {
               theme="default"
               size="2x"
               state="normal"
+              /*控制svg图标的大小,暂时使用这种fontSize方式 */
+              style={{ fontSize: '48px' }}
+              /*控制svg图标的颜色,和主题相关 ,拼接成tailwindcss class*/
+              className={`text-[${useToken().token.colorPrimary}]`}
             />
           }
           style={{
@@ -179,6 +184,10 @@ const ImageStateControl: React.FC = () => {
               theme="default"
               size="2x"
               state="normal"
+              /*控制svg图标的大小,暂时使用这种fontSize方式 */
+              style={{ fontSize: '48px' }}
+              /*控制svg图标的颜色,和主题相关 ,拼接成tailwindcss class*/
+              className={`text-[${useToken().token.colorPrimary}]`}
             />
           }
           style={{
@@ -202,6 +211,10 @@ const ImageStateControl: React.FC = () => {
               theme="default"
               size="2x"
               state="normal"
+              /*控制svg图标的大小,暂时使用这种fontSize方式 */
+              style={{ fontSize: '48px' }}
+              /*控制svg图标的颜色,和主题相关 ,拼接成tailwindcss class*/
+              className={`text-[${useToken().token.colorPrimary}]`}
             />
           }
           style={{