fix: 实现功能按钮悬停状态和视觉反馈功能 (版本更新: 1.14.1 -> 1.14.2)

- 在 FunctionButton 组件中添加悬停状态管理 (isHovered)
- 实现鼠标进入/离开事件处理，提供动态悬停检测
- 添加按钮悬停时的边框和背景色视觉反馈，提升交互体验
- 集成 Redux 状态管理，支持按钮激活状态检测
- 实现图标样式根据状态变化：禁用时灰度，激活时蓝色，悬停时浅蓝色
- 优化按钮样式结构，确保悬停时显示浅蓝色边框和背景

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

CHANGELOG.md

@@ -2,6 +2,29 @@
 
 本项目的所有重要变更都将记录在此文件中。
 
+## [1.14.2] - 2025-12-19 18:05
+
+### 新增 (Added)
+- **功能按钮悬停状态和视觉反馈功能** ([src/pages/view/components/FunctionArea.tsx](src/pages/view/components/FunctionArea.tsx))
+  - 实现功能按钮的悬停状态管理，添加 isHovered 状态变量
+  - 添加鼠标进入和离开事件处理函数，实现动态悬停检测
+  - 实现图标样式根据状态变化：禁用时灰度显示，激活时蓝色高亮，悬停时浅蓝色显示
+  - 添加按钮悬停时的边框和背景色视觉反馈，提升交互体验
+  - 优化按钮样式结构，确保悬停时显示浅蓝色边框和背景
+
+**核心改进：**
+- 用户体验增强：按钮现在提供清晰的视觉反馈，悬停时显示边框和背景变化
+- 状态管理优化：集成 Redux 状态管理，支持按钮激活状态检测
+- 样式系统完善：根据按钮状态动态调整图标和按钮样式
+- 交互友好性：悬停状态提供即时反馈，提升操作流畅度
+
+**改动文件：**
+- src/pages/view/components/FunctionArea.tsx
+- CHANGELOG.md
+- package.json (版本更新: 1.14.1 -> 1.14.2)
+
+---
+
 ## [1.14.1] - 2025-12-18 17:30
 
 ### 修复 (Fixed)

package.json

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

src/pages/view/components/FunctionArea.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Button, Flex, Divider } from 'antd';
 import '@/themes/truncateText.css';
 import { useDispatch } from 'react-redux';
@@ -20,7 +20,24 @@ const FunctionButton = ({
 }) => {
   const dispatch = useDispatch();
   const themeType = useAppSelector((state) => state.theme.themeType);
+  const currentAction = useAppSelector((state) => state.functionArea.action);
   const { disabled } = useButtonAvailability(action);
+  const isActive = currentAction === action;
+  const [isHovered, setIsHovered] = useState(false);
+  
+  // 根据状态计算Icon的样式
+  const getIconStyle = () => {
+    if (disabled) {
+      return { opacity: 0.4, filter: 'grayscale(1)' };
+    }
+    if (isActive) {
+      return { color: '#1890ff' }; // 蓝色高亮（激活状态）
+    }
+    if (isHovered) {
+      return { color: '#40a9ff' }; // 浅蓝色（悬停状态）
+    }
+    return {}; // 默认颜色
+  };
   
   const handleButtonClick = () => {
     if (disabled) {
@@ -61,6 +78,8 @@ const FunctionButton = ({
   return (
     <Button
       onClick={handleButtonClick}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
       disabled={disabled}
       icon={
         <Icon
@@ -69,13 +88,16 @@ const FunctionButton = ({
           userId="base"
           theme={themeType}
           size="2x"
-          state="normal"
+          state={isActive ? "down" : "normal"}
+          style={getIconStyle()}
         />
       }
       style={{
         width: '1.5rem',
         height: '1.5rem',
         padding: 0, // 关键
+        border: isHovered ? '1px solid #40a9ff' : '1px solid transparent',
+        backgroundColor: isHovered ? '#e6f7ff' : 'transparent',
         //minWidth: 44,            // 保险
         //overflow: 'hidden',      // 超出的文字裁掉
       }}