fix (1.57.4 -> 1.57.5): 修复组件渲染黑屏问题，避免useToken钩子调用数量不一致

- 在 ActionPanel 组件中提取 useToken 钩子调用，确保钩子调用顺序稳定
- 在 ImageStateControl 组件中提取 useToken 钩子调用，确保钩子调用顺序稳定

改动文件：
- src/pages/patient/components/ActionPanel.tsx
- src/pages/view/components/ImageStateControl.tsx

CHANGELOG.md

@@ -3,6 +3,18 @@
 本项目的所有重要变更都将记录在此文件中.
 
 
+## [1.57.5] - 2026-01-07 13:03
+
+### 修复 (Fixed)
+
+- **修复组件渲染黑屏问题** - 提取useToken钩子调用避免渲染时钩子调用数量不一致导致的黑屏问题
+  - 在ActionPanel和ImageStateControl组件中提取useToken钩子调用，确保钩子调用顺序稳定
+
+**改动文件:**
+
+- src/pages/patient/components/ActionPanel.tsx
+- src/pages/view/components/ImageStateControl.tsx
+
 ## [1.57.4] - 2026-01-07 11:14
 
 ### 修复 (Fixed)

package.json

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

src/pages/patient/components/ActionPanel.tsx

@@ -80,6 +80,7 @@ const ActionButton: React.FC<ActionButtonProps> = ({
 
 const ActionPanel: React.FC = () => {
   const dispatch = useDispatch<AppDispatch>();
+  const token = useToken();
 
   // RIS同步loading状态
   const [risSyncing, setRisSyncing] = useState(false);
@@ -554,7 +555,7 @@ const ActionPanel: React.FC = () => {
             /*控制svg图标的大小，暂时使用这种fontSize方式 */
             style={{ fontSize: '48px' }}
             /*控制svg图标的颜色，和主题相关 ，拼接成tailwindcss class*/
-            className={`text-[${useToken().token.colorPrimary}]`}
+            className={`text-[${token.token.colorPrimary}]`}
           />
         }
         tooltip={
@@ -578,7 +579,7 @@ const ActionPanel: React.FC = () => {
             /*控制svg图标的大小，暂时使用这种fontSize方式 */
             style={{ fontSize: '48px' }}
             /*控制svg图标的颜色，和主题相关 ，拼接成tailwindcss class*/
-            className={`text-[${useToken().token.colorPrimary}]`}
+            className={`text-[${token.token.colorPrimary}]`}
           />
         }
         tooltip={
@@ -609,7 +610,7 @@ const ActionPanel: React.FC = () => {
             /*控制svg图标的大小，暂时使用这种fontSize方式 */
             style={{ fontSize: '48px' }}
             /*控制svg图标的颜色，和主题相关 ，拼接成tailwindcss class*/
-            className={`text-[${useToken().token.colorPrimary}]`}
+            className={`text-[${token.token.colorPrimary}]`}
           />
         }
         tooltip={
@@ -633,7 +634,7 @@ const ActionPanel: React.FC = () => {
               /*控制svg图标的大小，暂时使用这种fontSize方式 */
               style={{ fontSize: '48px' }}
               /*控制svg图标的颜色，和主题相关 ，拼接成tailwindcss class*/
-              className={`text-[${useToken().token.colorPrimary}]`}
+              className={`text-[${token.token.colorPrimary}]`}
             />
           }
           tooltip={
@@ -661,7 +662,7 @@ const ActionPanel: React.FC = () => {
               /*控制svg图标的大小，暂时使用这种fontSize方式 */
               style={{ fontSize: '48px' }}
               /*控制svg图标的颜色，和主题相关 ，拼接成tailwindcss class*/
-              className={`text-[${useToken().token.colorPrimary}]`}
+              className={`text-[${token.token.colorPrimary}]`}
             />
           }
           tooltip={
@@ -689,7 +690,7 @@ const ActionPanel: React.FC = () => {
               /*控制svg图标的大小，暂时使用这种fontSize方式 */
               style={{ fontSize: '48px' }}
               /*控制svg图标的颜色，和主题相关 ，拼接成tailwindcss class*/
-              className={`text-[${useToken().token.colorPrimary}]`}
+              className={`text-[${token.token.colorPrimary}]`}
             />
           }
           tooltip={
@@ -714,7 +715,7 @@ const ActionPanel: React.FC = () => {
               /*控制svg图标的大小，暂时使用这种fontSize方式 */
               style={{ fontSize: '48px' }}
               /*控制svg图标的颜色，和主题相关 ，拼接成tailwindcss class*/
-              className={`text-[${useToken().token.colorPrimary}]`}
+              className={`text-[${token.token.colorPrimary}]`}
             />
           }
           tooltip={
@@ -740,7 +741,7 @@ const ActionPanel: React.FC = () => {
             /*控制svg图标的大小，暂时使用这种fontSize方式 */
             style={{ fontSize: '48px' }}
             /*控制svg图标的颜色，和主题相关 ，拼接成tailwindcss class*/
-            className={`text-[${useToken().token.colorPrimary}]`}
+            className={`text-[${token.token.colorPrimary}]`}
           />
         }
         tooltip={
@@ -764,7 +765,7 @@ const ActionPanel: React.FC = () => {
             /*控制svg图标的大小，暂时使用这种fontSize方式 */
             style={{ fontSize: '48px' }}
             /*控制svg图标的颜色，和主题相关 ，拼接成tailwindcss class*/
-            className={`text-[${useToken().token.colorPrimary}]`}
+            className={`text-[${token.token.colorPrimary}]`}
           />
         }
         tooltip={
@@ -788,7 +789,7 @@ const ActionPanel: React.FC = () => {
               /*控制svg图标的大小，暂时使用这种fontSize方式 */
               style={{ fontSize: '48px' }}
               /*控制svg图标的颜色，和主题相关 ，拼接成tailwindcss class*/
-              className={`text-[${useToken().token.colorPrimary}]`}
+              className={`text-[${token.token.colorPrimary}]`}
             />
           }
           tooltip={
@@ -852,7 +853,7 @@ const ActionPanel: React.FC = () => {
             /*控制svg图标的大小，暂时使用这种fontSize方式 */
             style={{ fontSize: '48px' }}
             /*控制svg图标的颜色，和主题相关 ，拼接成tailwindcss class*/
-            className={`text-[${useToken().token.colorPrimary}]`}
+            className={`text-[${token.token.colorPrimary}]`}
           />
         }
         tooltip={

src/pages/view/components/ImageStateControl.tsx

@@ -31,6 +31,7 @@ const { useToken } = theme;
  */
 const ImageStateControl: React.FC = () => {
   const intl = useIntl();
+  const token = useToken();
   const dispatch = useAppDispatch();
   const { disabled: ofReject } = useButtonAvailability('拒绝');
   const { disabled: ofRecover } = useButtonAvailability('恢复');
@@ -160,7 +161,7 @@ const ImageStateControl: React.FC = () => {
               /*控制svg图标的大小，暂时使用这种fontSize方式 */
               style={{ fontSize: '48px' }}
               /*控制svg图标的颜色，和主题相关 ，拼接成tailwindcss class*/
-              className={`text-[${useToken().token.colorPrimary}]`}
+              className={`text-[${token.token.colorPrimary}]`}
             />
           }
           style={{
@@ -187,7 +188,7 @@ const ImageStateControl: React.FC = () => {
               /*控制svg图标的大小，暂时使用这种fontSize方式 */
               style={{ fontSize: '48px' }}
               /*控制svg图标的颜色，和主题相关 ，拼接成tailwindcss class*/
-              className={`text-[${useToken().token.colorPrimary}]`}
+              className={`text-[${token.token.colorPrimary}]`}
             />
           }
           style={{
@@ -214,7 +215,7 @@ const ImageStateControl: React.FC = () => {
               /*控制svg图标的大小，暂时使用这种fontSize方式 */
               style={{ fontSize: '48px' }}
               /*控制svg图标的颜色，和主题相关 ，拼接成tailwindcss class*/
-              className={`text-[${useToken().token.colorPrimary}]`}
+              className={`text-[${token.token.colorPrimary}]`}
             />
           }
           style={{