From 83511dee5f9ae834c8270c5ca42bf3433545231b Mon Sep 17 00:00:00 2001
From: MT-Mint <798521692@qq.com>
Date: Wed, 18 Mar 2026 11:32:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20UI=20=E6=A0=B7=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- sonner.tsx: 修改 toast 为灰色圆角样式，禁用图标
- globals.css: 添加 toast 居中样式
- layout.tsx: 使用本地 Toaster 组件
- dev-dialog.tsx: 添加 singleColumn 属性支持单列布局
- prompt-input.tsx: 提交按钮添加 tooltip 提示
- suggestion.tsx: 修改建议按钮样式为 ghost + 浅灰背景
- input-box.tsx: 调整输入框高度200px样式
- zh-CN.ts: 更新建议列表文案和 skill_id
---
 frontend/src/app/workspace/layout.tsx         |  4 +-
 .../components/ai-elements/prompt-input.tsx   |  3 ++
 .../src/components/ai-elements/suggestion.tsx |  4 +-
 frontend/src/components/ui/dev-dialog.tsx     | 10 ++--
 frontend/src/components/ui/sonner.tsx         | 49 +++++++++++--------
 .../src/components/workspace/input-box.tsx    |  8 +--
 frontend/src/core/i18n/locales/zh-CN.ts       | 22 ++++++---
 frontend/src/styles/globals.css               | 17 ++++++-
 8 files changed, 76 insertions(+), 41 deletions(-)

diff --git a/frontend/src/app/workspace/layout.tsx b/frontend/src/app/workspace/layout.tsx
index d871ebff..e770ec59 100644
--- a/frontend/src/app/workspace/layout.tsx
+++ b/frontend/src/app/workspace/layout.tsx
@@ -2,9 +2,9 @@
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useCallback, useEffect, useLayoutEffect, useState } from "react";
-import { Toaster } from "sonner";
 
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { Toaster } from "@/components/ui/sonner";
 import { WorkspaceSidebar } from "@/components/workspace/workspace-sidebar";
 import { getLocalSettings, useLocalSettings } from "@/core/settings";
 
@@ -40,7 +40,7 @@ export default function WorkspaceLayout({
         {/* <WorkspaceSidebar className="" /> */}
         <SidebarInset className="min-w-0">{children}</SidebarInset>
       </SidebarProvider>
-      <Toaster position="top-center" />
+      <Toaster />
     </QueryClientProvider>
   );
 }
diff --git a/frontend/src/components/ai-elements/prompt-input.tsx b/frontend/src/components/ai-elements/prompt-input.tsx
index 5c480557..25852a41 100644
--- a/frontend/src/components/ai-elements/prompt-input.tsx
+++ b/frontend/src/components/ai-elements/prompt-input.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
+import { Tooltip } from "@/components/workspace/tooltip";
 import {
   Command,
   CommandEmpty,
@@ -1097,6 +1098,7 @@ export const PromptInputSubmit = ({
   }
 
   return (
+    <Tooltip content="请注意，此功能将消耗token，请保证账户余额大于200可学豆。">
     <InputGroupButton
       aria-label="Submit"
       // 被button{bgc:#fff}覆盖了，只能加"!"
@@ -1116,6 +1118,7 @@ export const PromptInputSubmit = ({
       {/* {children ?? Icon} */}
       {text}
     </InputGroupButton>
+    </Tooltip>
   );
 };
 
diff --git a/frontend/src/components/ai-elements/suggestion.tsx b/frontend/src/components/ai-elements/suggestion.tsx
index 80cff963..6a630302 100644
--- a/frontend/src/components/ai-elements/suggestion.tsx
+++ b/frontend/src/components/ai-elements/suggestion.tsx
@@ -49,7 +49,7 @@ export const Suggestion = ({
   onClick,
   className,
   icon: Icon,
-  variant = "outline",
+  variant = "ghost",
   size = "sm",
   children,
   ...props
@@ -61,7 +61,7 @@ export const Suggestion = ({
   return (
     <Button
       className={cn(
-        "text-muted-foreground cursor-pointer rounded-full px-[20px] py-[15px] text-xs font-normal",
+        "text-muted-foreground cursor-pointer bg-[#F9F8FA] rounded-full px-[20px] py-[15px] text-xs font-normal",
         className,
       )}
       onClick={handleClick}
diff --git a/frontend/src/components/ui/dev-dialog.tsx b/frontend/src/components/ui/dev-dialog.tsx
index 9e020b54..36b600bf 100644
--- a/frontend/src/components/ui/dev-dialog.tsx
+++ b/frontend/src/components/ui/dev-dialog.tsx
@@ -90,13 +90,17 @@ function DevDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
-function DevDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+function DevDialogFooter({
+  className,
+  singleColumn = false,
+  ...props
+}: React.ComponentProps<"div"> & { singleColumn?: boolean }) {
   return (
     <div
       data-slot="dev-dialog-footer"
       className={cn(
-        // sm:justify-end
-        "grid w-full grid-cols-2 justify-between gap-[30px] sm:flex-row",
+        "grid w-full justify-between gap-[30px] sm:flex-row",
+        singleColumn ? "grid-cols-1" : "grid-cols-2",
         className,
       )}
       {...props}
diff --git a/frontend/src/components/ui/sonner.tsx b/frontend/src/components/ui/sonner.tsx
index 28c5ec35..ea1eea1b 100644
--- a/frontend/src/components/ui/sonner.tsx
+++ b/frontend/src/components/ui/sonner.tsx
@@ -1,35 +1,42 @@
 "use client";
 
-import {
-  CircleCheckIcon,
-  InfoIcon,
-  Loader2Icon,
-  OctagonXIcon,
-  TriangleAlertIcon,
-} from "lucide-react";
-import { useTheme } from "next-themes";
 import { Toaster as Sonner, type ToasterProps } from "sonner";
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme();
-
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
+      theme="dark"
+      className="toaster group "
+      position="top-center"
       icons={{
-        success: <CircleCheckIcon className="size-4" />,
-        info: <InfoIcon className="size-4" />,
-        warning: <TriangleAlertIcon className="size-4" />,
-        error: <OctagonXIcon className="size-4" />,
-        loading: <Loader2Icon className="size-4 animate-spin" />,
+        success: null,
+        info: null,
+        warning: null,
+        error: null,
+        loading: null,
+      }}
+      toastOptions={{
+        style: {
+          background: "#4a4a4a",
+          color: "#ffffff",
+          border: "none",
+          borderRadius: "12px",
+          fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+          fontSize: "14px",
+          fontWeight: 400,
+          padding: "12px 20px",
+          textAlign: "center",
+          maxWidth: "320px",
+          minWidth:"300px",
+          justifyContent:"center"
+        },
       }}
       style={
         {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
-          "--border-radius": "var(--radius)",
+          "--normal-bg": "#4a4a4a",
+          "--normal-text": "#ffffff",
+          "--normal-border": "transparent",
+          "--border-radius": "12px",
         } as React.CSSProperties
       }
       {...props}
diff --git a/frontend/src/components/workspace/input-box.tsx b/frontend/src/components/workspace/input-box.tsx
index e3e1cb95..7e174af6 100644
--- a/frontend/src/components/workspace/input-box.tsx
+++ b/frontend/src/components/workspace/input-box.tsx
@@ -430,10 +430,10 @@ export function InputBox({
       <PromptInput
         className={cn("w-full", className)}
         inputGroupClassName={cn(
-          "border-0 backdrop-blur-sm w-[720px] rounded-[20px]",
+          "border-0 backdrop-blur-sm w-[720px]  rounded-[20px]",
           "transition-[height] duration-300 ease-out",
           !isNewThread && "shadow-[0_0_20px_2px_rgba(0,0,0,0.10)]",
-          effectiveIsFocused ? "h-[200px]" : "h-[80px]",
+          effectiveIsFocused ? "!h-[200px]" : "h-[80px]",
         )}
         disabled={disabled}
         globalDrop
@@ -963,7 +963,7 @@ function SuggestionList({
           onClick={() => handleSuggestionClick(suggestion)}
         />
       ))}
-      <DropdownMenu>
+      {/* <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Suggestion icon={PlusIcon} suggestion={t.common.create} />
         </DropdownMenuTrigger>
@@ -986,7 +986,7 @@ function SuggestionList({
             )}
           </DropdownMenuGroup>
         </DropdownMenuContent>
-      </DropdownMenu>
+      </DropdownMenu> */}
     </Suggestions>
   );
 }
diff --git a/frontend/src/core/i18n/locales/zh-CN.ts b/frontend/src/core/i18n/locales/zh-CN.ts
index 3be3a015..1fc6529a 100644
--- a/frontend/src/core/i18n/locales/zh-CN.ts
+++ b/frontend/src/core/i18n/locales/zh-CN.ts
@@ -102,36 +102,42 @@ export const zhCN: Translations = {
     followupConfirmReplace: "替换并发送",
     suggestions: [
       {
-        suggestion: "论文写作",
+        suggestion: "自媒体文案",
         prompt:
           "撰写一篇关于[主题]的学术论文，包含摘要、引言、正文和参考文献。",
         icon: PenLineIcon,
-        skill_id: "1",
+        skill_id: "432",
       },
       {
-        suggestion: "报告生成",
+        suggestion: "需求文档",
         prompt: "深入分析[主题]，生成一份结构清晰的调研报告。",
         icon: MicroscopeIcon,
-        skill_id: "2",
+        skill_id: "521",
       },
       {
-        suggestion: "策划文案",
+        suggestion: "使用指南",
         prompt: "为[项目/活动]撰写一份完整的策划方案和宣传文案。",
         icon: ShapesIcon,
-        skill_id: "3",
+        skill_id: "410",
       },
       {
         suggestion: "PPT生成",
         prompt: "生成一个关于[主题]的PPT演示文稿大纲和内容。",
         icon: GraduationCapIcon,
-        skill_id: "4",
+        skill_id: "180",
       },
       {
-        suggestion: "文档处理",
+        suggestion: "Excel数据分析",
         prompt: "对[文档]进行阅读、总结、翻译或格式转换等处理。",
         icon: CompassIcon,
         skill_id: "5",
       },
+      {
+        suggestion: "市场调研",
+        prompt: "对[文档]进行阅读、总结、翻译或格式转换等处理。",
+        icon: CompassIcon,
+        skill_id: "31",
+      },
     ],
     suggestionsCreate: [
       {
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index 593623c9..21e440d7 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -244,7 +244,7 @@
   --muted: #1500331a;
   --muted-foreground: oklch(0.556 0 0);
   /* --accent: oklch(0.94 0.0098 87.47); */
-  --accent: #1500331a;
+  --accent: #EAE9EB;
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0.0098 87.47);
@@ -453,3 +453,18 @@ p {
 .cm-line {
   font-size: calc(14px * var(--zoom-scale));
 }
+
+/* Sonner Toast 居中样式 */
+[data-sonner-toaster] {
+  left: 50% !important;
+  transform: translateX(-50%);
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: center;
+}
+
+[data-sonner-toast] {
+  margin: 0 auto;
+}
+