feat: 按钮样式变更

frontend-web/src/pages/IframeChatPage.tsx

@@ -3,7 +3,6 @@
 import {
   BookMarkedIcon,
   BrainCircuitIcon,
-  CheckIcon,
   FileTextIcon,
   GraduationCapIcon,
 } from "lucide-react";
@@ -23,7 +22,9 @@ import {
 } from "@/components/workspace/messages";
 import { ThreadContext } from "@/components/workspace/messages/context";
 import { TodoList } from "@/components/workspace/todo-list";
+import { Tooltip } from "@/components/workspace/tooltip";
 import { Button } from "@/components/ui/button";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import { useAgentSelector } from "@/core/agents";
 import { getAccessToken } from "@/core/auth";
 import { useI18n } from "@/core/i18n/hooks";
@@ -369,7 +370,7 @@ export default function IframeChatPage() {
   }, [handleInterrupt, handleSubmit]);
 
   const isLandingState = isNewThread && !hasStartedConversation;
-  const bottomBarHeightClass = "pb-28";
+  const bottomBarHeightClass = "pb-24";
   const modeButtons = [
     {
       key: "writing",
@@ -377,8 +378,7 @@ export default function IframeChatPage() {
       icon: FileTextIcon,
       active: !!settings.context.writing_mode,
       onClick: toggleWritingMode,
-      activeClassName:
-        "border-amber-300 bg-amber-50 text-amber-700 hover:bg-amber-100",
+      activeClassName: "text-amber-600 hover:text-amber-700",
     },
     {
       key: "memory",
@@ -386,8 +386,7 @@ export default function IframeChatPage() {
       icon: BrainCircuitIcon,
       active: settings.context.memory_injection_enabled ?? true,
       onClick: toggleMemoryInjection,
-      activeClassName:
-        "border-blue-300 bg-blue-50 text-blue-700 hover:bg-blue-100",
+      activeClassName: "text-blue-600 hover:text-blue-700",
     },
     {
       key: "references",
@@ -396,8 +395,7 @@ export default function IframeChatPage() {
       active: ragModeEnabled,
       onClick: toggleRagMode,
       disabled: ragModeLocked,
-      activeClassName:
-        "border-emerald-300 bg-emerald-50 text-emerald-700 hover:bg-emerald-100",
+      activeClassName: "text-emerald-600 hover:text-emerald-700",
     },
     {
       key: "pro",
@@ -405,8 +403,7 @@ export default function IframeChatPage() {
       icon: GraduationCapIcon,
       active: proModeEnabled,
       onClick: toggleProMode,
-      activeClassName:
-        "border-violet-300 bg-violet-50 text-violet-700 hover:bg-violet-100",
+      activeClassName: "text-violet-600 hover:text-violet-700",
     },
   ] as const;
 
@@ -496,29 +493,32 @@ export default function IframeChatPage() {
               </div>
             </div>
             <div className="absolute right-0 bottom-0 left-0 z-40 border-t bg-background/95 backdrop-blur">
-              <div className="mx-auto flex max-w-(--container-width-lg) flex-wrap items-center justify-center gap-2 px-4 py-4">
-                {modeButtons.map((button) => {
-                  const Icon = button.icon;
-                  return (
-                    <Button
-                      key={button.key}
-                      type="button"
-                      variant="outline"
-                      disabled={button.disabled || isUploading}
-                      onClick={button.onClick}
-                      className={cn(
-                        "gap-1.5 rounded-full border border-transparent bg-muted/40 text-muted-foreground shadow-none hover:bg-muted hover:text-foreground",
-                        button.active && button.activeClassName,
-                        button.disabled && "cursor-not-allowed opacity-80",
-                      )}
-                    >
-                      {button.active && <CheckIcon className="size-3.5" />}
-                      <Icon className="size-3.5" />
-                      <span className="text-xs font-normal">{button.label}</span>
-                    </Button>
-                  );
-                })}
-              </div>
+              <TooltipProvider delayDuration={250}>
+                <div className="mx-auto flex max-w-(--container-width-lg) flex-wrap items-center justify-center gap-0 px-0 py-1">
+                  {modeButtons.map((button) => {
+                    const Icon = button.icon;
+                    return (
+                      <Tooltip key={button.key} content={button.label}>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          aria-label={button.label}
+                          disabled={button.disabled || isUploading}
+                          onClick={button.onClick}
+                          className={cn(
+                            "size-9 rounded-full text-muted-foreground shadow-none hover:bg-muted/60 hover:text-foreground",
+                            button.active && button.activeClassName,
+                            button.disabled && "cursor-not-allowed opacity-80",
+                          )}
+                        >
+                          <Icon className="size-4" />
+                        </Button>
+                      </Tooltip>
+                    );
+                  })}
+                </div>
+              </TooltipProvider>
             </div>
           </main>
         </div>