feat: 优化全屏按钮提示及工具箱 hover 展开交互

Author: QAbot-zh

app/components/chat.tsx

@@ -620,6 +620,24 @@ export function ChatActions(props: {
 
   const [showTools, setShowTools] = useState(false);
   const toolsRef = useRef<HTMLDivElement>(null);
+  const toolsCloseTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
+
+  const handleToolsMouseEnter = () => {
+    if (toolsCloseTimeoutRef.current) {
+      clearTimeout(toolsCloseTimeoutRef.current);
+      toolsCloseTimeoutRef.current = null;
+    }
+    setShowTools(true);
+  };
+
+  const handleToolsMouseLeave = () => {
+    toolsCloseTimeoutRef.current = setTimeout(() => {
+      setShowTools(false);
+    }, 150);
+  };
+
   useEffect(() => {
     if (!showTools) return; // 菜单没开时不监听，省一次注册
     const handle = (e: MouseEvent) => {
@@ -1478,6 +1496,8 @@ export function ChatActions(props: {
         <div
           ref={toolsRef}
           className={clsx(styles["desktop-only"], styles["tool-wrapper"])}
+          onMouseEnter={handleToolsMouseEnter}
+          onMouseLeave={handleToolsMouseLeave}
         >
           <ChatAction
             onClick={() => setShowTools((v) => !v)}
@@ -4677,8 +4697,16 @@ function ChatComponent() {
               <IconButton
                 icon={config.tightBorder ? <MinIcon /> : <MaxIcon />}
                 bordered
-                title={Locale.Chat.Actions.FullScreen}
-                aria={Locale.Chat.Actions.FullScreen}
+                title={
+                  config.tightBorder
+                    ? Locale.Chat.Actions.ExitFullScreen
+                    : Locale.Chat.Actions.FullScreen
+                }
+                aria={
+                  config.tightBorder
+                    ? Locale.Chat.Actions.ExitFullScreen
+                    : Locale.Chat.Actions.FullScreen
+                }
                 onClick={() => {
                   config.update(
                     (config) => (config.tightBorder = !config.tightBorder),
@@ -5879,8 +5907,16 @@ function ChatComponent() {
               <IconButton
                 icon={isExpanded ? <MinIcon /> : <MaxIcon />}
                 bordered
-                title={Locale.Chat.Actions.FullScreen}
-                aria={Locale.Chat.Actions.FullScreen}
+                title={
+                  isExpanded
+                    ? Locale.Chat.Actions.ExitFullScreen
+                    : Locale.Chat.Actions.FullScreen
+                }
+                aria={
+                  isExpanded
+                    ? Locale.Chat.Actions.ExitFullScreen
+                    : Locale.Chat.Actions.FullScreen
+                }
                 onClick={toggleExpand}
               />
               <IconButton

app/locales/cn.ts

@@ -53,6 +53,7 @@ const cn = {
       Save: "保存",
       Cancel: "取消",
       FullScreen: "全屏",
+      ExitFullScreen: "退出全屏",
       RefreshTitle: "刷新标题",
       RefreshToast: "已发送刷新标题请求",
       FailTitleToast: "标题生成失败，检查压缩模型设置后点击🔄手动刷新标题",

app/locales/en.ts

@@ -55,6 +55,7 @@ const en: LocaleType = {
       Save: "Save",
       Cancel: "Cancel",
       FullScreen: "FullScreen",
+      ExitFullScreen: "Exit FullScreen",
       RefreshTitle: "Refresh Title",
       RefreshToast: "Title refresh request sent",
       FailTitleToast: