feat: 统一 tooltip 样式并优化工具箱 toast 提示

- IconButton 组件添加自定义 tooltip 支持，支持 top/bottom/left/right 四个方向
- 侧边栏图标添加 tooltip，窄布局时显示在右侧，宽布局时显示在上方
- header 图标 tooltip 显示在下方，避免被顶部边缘截断
- 工具箱文本处理（翻译/OCR/优化提示词）改用持续 toast，显示模型名称和计时
- 思考过程复制按钮添加自定义 tooltip

Author: QAbot-zh

app/components/button.module.scss

@@ -142,3 +142,94 @@
     margin-left: 5px;
   }
 }
+
+.icon-button-wrapper {
+  position: relative;
+  display: inline-flex;
+  flex: inherit;
+  flex-grow: inherit;
+
+  .icon-button {
+    flex-grow: inherit;
+  }
+}
+
+.icon-button-tooltip {
+  position: absolute;
+  padding: 4px 8px;
+  background-color: var(--primary);
+  color: var(--white);
+  font-size: var(--text-xs);
+  border-radius: 4px;
+  white-space: nowrap;
+  z-index: 100;
+  pointer-events: none;
+  animation: tooltip-fade-in ease 0.15s;
+
+  &::after {
+    content: "";
+    position: absolute;
+    border: 5px solid transparent;
+  }
+
+  &.tooltip-top {
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+
+    &::after {
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border-top-color: var(--primary);
+    }
+  }
+
+  &.tooltip-bottom {
+    top: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+
+    &::after {
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border-bottom-color: var(--primary);
+    }
+  }
+
+  &.tooltip-right {
+    left: calc(100% + 8px);
+    top: 50%;
+    transform: translateY(-50%);
+
+    &::after {
+      right: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      border-right-color: var(--primary);
+    }
+  }
+
+  &.tooltip-left {
+    right: calc(100% + 8px);
+    top: 50%;
+    transform: translateY(-50%);
+
+    &::after {
+      left: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      border-left-color: var(--primary);
+    }
+  }
+}
+
+@keyframes tooltip-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

app/components/button.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useState } from "react";
 
 import styles from "./button.module.scss";
 import { CSSProperties } from "react";
@@ -19,44 +20,62 @@ export function IconButton(props: {
   autoFocus?: boolean;
   style?: CSSProperties;
   aria?: string;
+  tooltipPosition?: "top" | "bottom" | "left" | "right";
 }) {
+  const [showTooltip, setShowTooltip] = useState(false);
+  const tooltipPosition = props.tooltipPosition || "top";
+
   return (
-    <button
-      className={
-        styles["icon-button"] +
-        ` ${props.bordered && styles.border} ${props.shadow && styles.shadow} ${
-          props.className ?? ""
-        } clickable ${styles[props.type ?? ""]}`
-      }
-      onClick={props.onClick}
-      title={props.title}
-      disabled={props.disabled}
-      role="button"
-      tabIndex={props.tabIndex}
-      autoFocus={props.autoFocus}
-      style={props.style}
-      aria-label={props.aria}
+    <div
+      className={`${styles["icon-button-wrapper"]} ${props.className ?? ""}`}
     >
-      {props.icon && (
-        <div
-          aria-label={props.text || props.title}
-          className={
-            styles["icon-button-icon"] +
-            ` ${props.type === "primary" && "no-dark"}`
-          }
-        >
-          {props.icon}
-        </div>
-      )}
+      <button
+        className={
+          styles["icon-button"] +
+          ` ${props.bordered && styles.border} ${
+            props.shadow && styles.shadow
+          } clickable ${styles[props.type ?? ""]}`
+        }
+        onClick={props.onClick}
+        disabled={props.disabled}
+        role="button"
+        tabIndex={props.tabIndex}
+        autoFocus={props.autoFocus}
+        style={props.style}
+        aria-label={props.aria || props.title}
+        onMouseEnter={() => props.title && setShowTooltip(true)}
+        onMouseLeave={() => setShowTooltip(false)}
+      >
+        {props.icon && (
+          <div
+            aria-label={props.text || props.title}
+            className={
+              styles["icon-button-icon"] +
+              ` ${props.type === "primary" && "no-dark"}`
+            }
+          >
+            {props.icon}
+          </div>
+        )}
 
-      {props.text && (
+        {props.text && (
+          <div
+            aria-label={props.text || props.title}
+            className={styles["icon-button-text"]}
+          >
+            {props.text}
+          </div>
+        )}
+      </button>
+      {showTooltip && props.title && !props.text && (
         <div
-          aria-label={props.text || props.title}
-          className={styles["icon-button-text"]}
+          className={`${styles["icon-button-tooltip"]} ${
+            styles[`tooltip-${tooltipPosition}`]
+          }`}
         >
-          {props.text}
+          {props.title}
         </div>
       )}
-    </button>
+    </div>
   );
 }