From 556d23ade5e07f19a4b2ca8236dd3c359e344a6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=91=A3=E5=AE=8F=E5=87=AF?= <hkdong@kland.com.cn>
Date: Wed, 20 May 2026 17:13:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/workspace/input-box.tsx    | 34 ++++++----
 .../components/workspace/recent-chat-list.tsx | 18 +++--
 .../workspace/workspace-nav-chat-list.tsx     | 37 +++++++---
 frontend-web/src/pages/ChatPage.tsx           | 68 +++++++++++--------
 frontend-web/src/styles/globals.css           | 59 ++++++++++++++++
 5 files changed, 160 insertions(+), 56 deletions(-)

diff --git a/frontend-web/src/components/workspace/input-box.tsx b/frontend-web/src/components/workspace/input-box.tsx
index d23ada46..1c59aa79 100644
--- a/frontend-web/src/components/workspace/input-box.tsx
+++ b/frontend-web/src/components/workspace/input-box.tsx
@@ -516,7 +516,12 @@ export function InputBox({
       )}
       <PromptInput
         className={cn(
-          "rounded-[1.85rem] border border-[#eadfce] bg-white shadow-[0_24px_70px_-34px_rgba(120,83,42,0.32)] ring-1 ring-[#f6efe5] transition-all duration-300 ease-out *:data-[slot='input-group']:rounded-[1.85rem] dark:bg-slate-800 dark:border-slate-700 dark:ring-slate-700 dark:shadow-none",
+          "transition-all duration-300 ease-out *:data-[slot='input-group']:rounded-3xl",
+          // landing 态：透明，让外层 gemini-gradient-border 提供白卡 + 旋转描边
+          // 对话态：常规白卡 + 中性边框 + 轻阴影
+          isNewThread
+            ? "rounded-3xl bg-transparent border-0 shadow-none ring-0"
+            : "rounded-3xl bg-background border border-border shadow-sm dark:bg-slate-800 dark:border-slate-700",
           className,
         )}
         disabled={disabled}
@@ -531,7 +536,8 @@ export function InputBox({
         <PromptInputBody className="absolute top-0 right-0 left-0 z-3">
           <PromptInputTextarea
             className={cn(
-              "size-full px-2 py-1 text-[15px] leading-7 placeholder:text-[#b7ab9a] dark:placeholder:text-slate-500",
+              "size-full px-2 py-1 text-[15px] leading-7 placeholder:text-muted-foreground/60",
+              isNewThread && "min-h-[110px]!",
             )}
             disabled={disabled}
             placeholder={t.inputBox.placeholder}
@@ -539,7 +545,7 @@ export function InputBox({
             defaultValue={initialValue}
           />
         </PromptInputBody>
-        <PromptInputFooter className="flex items-center border-t border-[#f4ede4] dark:border-slate-700 px-2 pt-2.5 pb-1.5">
+        <PromptInputFooter className="flex items-center border-t border-border/40 dark:border-slate-700 px-2 pt-2.5 pb-1.5">
           <PromptInputTools className="gap-1.5">
             {/* TODO: Add more connectors here
           <PromptInputActionMenu>
@@ -550,7 +556,7 @@ export function InputBox({
               />
             </PromptInputActionMenuContent>
           </PromptInputActionMenu> */}
-            <AddAttachmentsButton className="rounded-full border border-[#eee3d5] bg-[#fffaf5] px-2.5! shadow-none hover:bg-white dark:border-slate-600 dark:bg-slate-700/50 dark:text-slate-300 dark:hover:bg-slate-700" />
+            <AddAttachmentsButton className="rounded-full border border-border bg-muted/50 px-2.5! shadow-none text-muted-foreground hover:bg-muted hover:text-foreground dark:border-slate-600 dark:bg-slate-700/50 dark:text-slate-300 dark:hover:bg-slate-700" />
             <Tooltip
               content={
                 context.writing_mode
@@ -562,8 +568,8 @@ export function InputBox({
                 className={cn(
                   "gap-1.5! rounded-full border px-3! shadow-none",
                   context.writing_mode
-                    ? "border-[#d8b878] bg-[#fff3cf] text-[#6d5625] hover:bg-[#ffedbd]"
-                    : "border-[#eee3d5] bg-[#fffaf5] text-[#7e6a57] hover:bg-white",
+                    ? "border-amber-300 bg-amber-50 text-amber-700 hover:bg-amber-100 dark:border-amber-700 dark:bg-amber-950/40 dark:text-amber-200"
+                    : "border-border bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground dark:border-slate-600 dark:bg-slate-700/50 dark:text-slate-300 dark:hover:bg-slate-700",
                 )}
                 onClick={handleWritingModeToggle}
               >
@@ -582,7 +588,7 @@ export function InputBox({
                     : "flash"
                 }
               >
-                <PromptInputActionMenuTrigger className="gap-1.5! rounded-full border border-[#eee3d5] bg-[#fffaf5] px-3! text-[#7e6a57] shadow-none hover:bg-white dark:border-slate-600 dark:bg-slate-700/50 dark:text-slate-300 dark:hover:bg-slate-700">
+                <PromptInputActionMenuTrigger className="gap-1.5! rounded-full border border-border bg-muted/50 px-3! text-muted-foreground shadow-none hover:bg-muted hover:text-foreground dark:border-slate-600 dark:bg-slate-700/50 dark:text-slate-300 dark:hover:bg-slate-700">
                   <div>
                     {context.mode === "flash" && <ZapIcon className="size-3" />}
                     {context.mode === "thinking" && (
@@ -744,7 +750,7 @@ export function InputBox({
             </PromptInputActionMenu>
             {supportReasoningEffort && context.mode !== "flash" && (
               <PromptInputActionMenu>
-                <PromptInputActionMenuTrigger className="gap-1.5! rounded-full border border-[#eee3d5] bg-[#fffaf5] px-3! text-[#7e6a57] shadow-none hover:bg-white dark:border-slate-600 dark:bg-slate-700/50 dark:text-slate-300 dark:hover:bg-slate-700">
+                <PromptInputActionMenuTrigger className="gap-1.5! rounded-full border border-border bg-muted/50 px-3! text-muted-foreground shadow-none hover:bg-muted hover:text-foreground dark:border-slate-600 dark:bg-slate-700/50 dark:text-slate-300 dark:hover:bg-slate-700">
                   <div className="text-xs font-normal">
                     {t.inputBox.reasoningEffort}:
                     {context.reasoning_effort === "minimal" &&
@@ -875,15 +881,15 @@ export function InputBox({
                   className={cn(
                     "rounded-full border px-3 shadow-none transition-colors",
                     promptPrefix.on
-                      ? "border-[#d6a868] bg-[#fff3df] text-[#7a5417] hover:bg-[#ffe8c4]"
-                      : "border-[#eee3d5] bg-[#fffaf5] text-[#8a7558] hover:bg-white",
+                      ? "border-amber-300 bg-amber-50 text-amber-700 hover:bg-amber-100 dark:border-amber-700 dark:bg-amber-950/40 dark:text-amber-200"
+                      : "border-border bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground",
                   )}
                 >
                   <span className="max-w-[160px] truncate text-xs font-normal">
                     {promptPrefix.label}
                   </span>
                   {promptPrefix.on && (
-                    <CheckIcon className="ml-1 size-3.5 text-[#7a5417]" />
+                    <CheckIcon className="ml-1 size-3.5 text-amber-700 dark:text-amber-200" />
                   )}
                 </PromptInputButton>
               </Tooltip>
@@ -893,7 +899,7 @@ export function InputBox({
               onOpenChange={setModelDialogOpen}
             >
               <ModelSelectorTrigger asChild>
-                <PromptInputButton className="rounded-full border border-[#eee3d5] bg-[#fffaf5] px-3 shadow-none hover:bg-white dark:border-slate-600 dark:bg-slate-700/50 dark:text-slate-300 dark:hover:bg-slate-700">
+                <PromptInputButton className="rounded-full border border-border bg-muted/50 px-3 shadow-none text-muted-foreground hover:bg-muted hover:text-foreground dark:border-slate-600 dark:bg-slate-700/50 dark:text-slate-300 dark:hover:bg-slate-700">
                   <div className="flex min-w-0 flex-col items-start text-left">
                     <ModelSelectorName className="text-xs font-normal">
                       {selectedModel?.display_name}
@@ -927,7 +933,7 @@ export function InputBox({
               </ModelSelectorContent>
             </ModelSelector>
             <PromptInputSubmit
-              className="rounded-full border-[#e7d9c7] bg-white shadow-[0_10px_24px_-18px_rgba(120,83,42,0.34)] dark:bg-blue-500 dark:border-blue-500 dark:text-white dark:hover:bg-blue-400 dark:shadow-none"
+              className="rounded-full border-border bg-background shadow-sm hover:bg-muted dark:bg-blue-500 dark:border-blue-500 dark:text-white dark:hover:bg-blue-400 dark:shadow-none"
               disabled={disabled}
               variant="outline"
               status={status}
@@ -935,7 +941,7 @@ export function InputBox({
           </PromptInputTools>
         </PromptInputFooter>
         {!isNewThread && (
-          <div className="absolute right-0 -bottom-[17px] left-0 z-0 h-4 bg-[#fffdfa] dark:bg-background"></div>
+          <div className="absolute right-0 -bottom-[17px] left-0 z-0 h-4 bg-background"></div>
         )}
       </PromptInput>
 
diff --git a/frontend-web/src/components/workspace/recent-chat-list.tsx b/frontend-web/src/components/workspace/recent-chat-list.tsx
index de78d861..b878eee4 100644
--- a/frontend-web/src/components/workspace/recent-chat-list.tsx
+++ b/frontend-web/src/components/workspace/recent-chat-list.tsx
@@ -158,15 +158,15 @@ export function RecentChatList() {
   }
   return (
     <>
-      <SidebarGroup className="px-2">
-        <SidebarGroupLabel className="text-muted-foreground/90 px-2 text-[11px] font-semibold tracking-wide uppercase">
+      <SidebarGroup className="px-2 pt-3 mt-2 border-t border-sidebar-border/60">
+        <SidebarGroupLabel className="text-muted-foreground/70 px-3 mb-1 text-[10px] font-semibold tracking-[0.12em] uppercase">
           {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY !== "true"
             ? t.sidebar.recentChats
             : t.sidebar.demoChats}
         </SidebarGroupLabel>
         <SidebarGroupContent className="group-data-[collapsible=icon]:pointer-events-none group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0">
           <SidebarMenu>
-            <div className="flex w-full flex-col gap-1">
+            <div className="flex w-full flex-col gap-0.5">
               {visibleThreads.map((thread) => {
                 const isActive = pathOfThread(thread) === pathname;
                 return (
@@ -174,9 +174,17 @@ export function RecentChatList() {
                     key={thread.thread_id}
                     className="group/side-menu-item"
                   >
-                    <SidebarMenuButton isActive={isActive} asChild>
+                    <SidebarMenuButton
+                      isActive={isActive}
+                      asChild
+                      className={
+                        "rounded-lg h-7 px-3 text-[13px] text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/60 " +
+                        "data-[active=true]:bg-white data-[active=true]:text-foreground data-[active=true]:shadow-[0_1px_2px_rgba(15,23,42,0.05)] " +
+                        "dark:data-[active=true]:bg-slate-700/80 dark:data-[active=true]:text-slate-100 dark:data-[active=true]:shadow-none"
+                      }
+                    >
                       <Link
-                        className="text-muted-foreground block w-full whitespace-nowrap group-hover/side-menu-item:overflow-hidden"
+                        className="block w-full whitespace-nowrap group-hover/side-menu-item:overflow-hidden"
                         href={pathOfThread(thread)}
                       >
                         {titleOfThread(thread)}
diff --git a/frontend-web/src/components/workspace/workspace-nav-chat-list.tsx b/frontend-web/src/components/workspace/workspace-nav-chat-list.tsx
index ba93871f..eaff53d7 100644
--- a/frontend-web/src/components/workspace/workspace-nav-chat-list.tsx
+++ b/frontend-web/src/components/workspace/workspace-nav-chat-list.tsx
@@ -15,26 +15,43 @@ import { useI18n } from "@/core/i18n/hooks";
 // import { BotIcon, BrainIcon, ListChecks, MessageSquarePlus, MessagesSquare, SparklesIcon, UsersIcon } from "lucide-react";
 import { BotIcon, BrainIcon, CalendarClock, ListChecks, MessageSquarePlus, MessagesSquare, SparklesIcon, UsersIcon } from "lucide-react";
 
+// 普通导航项：放大圆角到 xl、增加内边距，激活态用白底+柔阴影（参考 Gemini 风格的胶囊）
+const NAV_ITEM_CLASS =
+  "text-sidebar-foreground/80 hover:text-sidebar-foreground rounded-xl h-9 px-3 transition-colors " +
+  "data-[active=true]:bg-white data-[active=true]:text-foreground data-[active=true]:shadow-[0_1px_2px_rgba(15,23,42,0.06),0_1px_3px_rgba(15,23,42,0.04)] " +
+  "dark:data-[active=true]:bg-slate-700/80 dark:data-[active=true]:text-slate-100 dark:data-[active=true]:shadow-none";
+
+// 「新对话」专属：始终主色 chip，让它在导航里更显眼
+const NEW_CHAT_CLASS =
+  "rounded-xl h-9 px-3 bg-primary/10 text-primary hover:bg-primary/15 hover:text-primary " +
+  "data-[active=true]:bg-primary/15 data-[active=true]:text-primary data-[active=true]:shadow-none " +
+  "dark:bg-primary/15 dark:text-primary-foreground dark:hover:bg-primary/25 dark:data-[active=true]:bg-primary/25";
+
 export function WorkspaceNavChatList() {
   const { t } = useI18n();
   const pathname = usePathname();
   return (
     <SidebarGroup className="px-2 pt-2">
-      <SidebarMenu>
+      <SidebarMenu className="gap-1">
         <SidebarMenuItem>
           <SidebarMenuButton
             isActive={pathname === "/page/workspace/chats/new"}
             asChild
+            className={NEW_CHAT_CLASS}
           >
-            <Link className="text-sidebar-foreground" href="/page/workspace/chats/new">
+            <Link href="/page/workspace/chats/new">
               <MessageSquarePlus />
               <span>{t.sidebar.newChat}</span>
             </Link>
           </SidebarMenuButton>
         </SidebarMenuItem>
         <SidebarMenuItem>
-          <SidebarMenuButton isActive={pathname === "/page/workspace/chats"} asChild>
-            <Link className="text-sidebar-foreground" href="/page/workspace/chats">
+          <SidebarMenuButton
+            isActive={pathname === "/page/workspace/chats"}
+            asChild
+            className={NAV_ITEM_CLASS}
+          >
+            <Link href="/page/workspace/chats">
               <MessagesSquare />
               <span>{t.sidebar.chats}</span>
             </Link>
@@ -44,8 +61,9 @@ export function WorkspaceNavChatList() {
           <SidebarMenuButton
             isActive={pathname.startsWith("/page/workspace/agents")}
             asChild
+            className={NAV_ITEM_CLASS}
           >
-            <Link className="text-sidebar-foreground" href="/page/workspace/agents">
+            <Link href="/page/workspace/agents">
               <BotIcon />
               <span>{t.sidebar.agents}</span>
             </Link>
@@ -55,8 +73,9 @@ export function WorkspaceNavChatList() {
           <SidebarMenuButton
             isActive={pathname.startsWith("/page/workspace/skills")}
             asChild
+            className={NAV_ITEM_CLASS}
           >
-            <Link className="text-sidebar-foreground" href="/page/workspace/skills">
+            <Link href="/page/workspace/skills">
               <SparklesIcon />
               <span>技能</span>
             </Link>
@@ -66,8 +85,9 @@ export function WorkspaceNavChatList() {
           <SidebarMenuButton
             isActive={pathname.startsWith("/page/workspace/memory")}
             asChild
+            className={NAV_ITEM_CLASS}
           >
-            <Link className="text-sidebar-foreground" href="/page/workspace/memory">
+            <Link href="/page/workspace/memory">
               <BrainIcon />
               <span>记忆</span>
             </Link>
@@ -77,8 +97,9 @@ export function WorkspaceNavChatList() {
           <SidebarMenuButton
             isActive={pathname === "/page/workspace/scheduled/tasks"}
             asChild
+            className={NAV_ITEM_CLASS}
           >
-            <Link className="text-sidebar-foreground" href="/page/workspace/scheduled/tasks">
+            <Link href="/page/workspace/scheduled/tasks">
               <ListChecks />
               <span>任务管理</span>
             </Link>
diff --git a/frontend-web/src/pages/ChatPage.tsx b/frontend-web/src/pages/ChatPage.tsx
index ff0b85b5..a5a583b6 100644
--- a/frontend-web/src/pages/ChatPage.tsx
+++ b/frontend-web/src/pages/ChatPage.tsx
@@ -229,40 +229,50 @@ export default function ChatPage() {
                     />
                   </div>
                 </div>
-                {mounted ? (
-                  <InputBox
-                    className={cn("bg-background/5 w-full -translate-y-4")}
-                    isNewThread={isLandingState}
-                    threadId={threadId}
-                    autoFocus={isLandingState}
-                    status={
-                      thread.error
-                        ? "error"
-                        : thread.isLoading
-                          ? "streaming"
-                          : "ready"
-                    }
-                    context={settings.context}
-                    extraHeader={
-                      isLandingState && <Welcome mode={settings.context.mode} />
-                    }
-                    disabled={
-                      env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" ||
-                      isUploading
-                    }
-                    onContextChange={(context) =>
-                      setSettings("context", context)
-                    }
-                    promptPrefix={promptPrefixProp}
-                    onFollowupsVisibilityChange={setShowFollowups}
-                    onSubmit={handleSubmit}
-                    onStop={handleStop}
+                {isLandingState && mounted && (
+                  <Welcome
+                    mode={settings.context.mode}
+                    className="mb-6 -translate-y-4"
                   />
+                )}
+                {mounted ? (
+                  <div
+                    className={cn(
+                      "w-full -translate-y-4",
+                      isLandingState && "gemini-gradient-border gemini-shadow",
+                    )}
+                  >
+                    <InputBox
+                      className="w-full"
+                      isNewThread={isLandingState}
+                      threadId={threadId}
+                      autoFocus={isLandingState}
+                      status={
+                        thread.error
+                          ? "error"
+                          : thread.isLoading
+                            ? "streaming"
+                            : "ready"
+                      }
+                      context={settings.context}
+                      disabled={
+                        env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" ||
+                        isUploading
+                      }
+                      onContextChange={(context) =>
+                        setSettings("context", context)
+                      }
+                      promptPrefix={promptPrefixProp}
+                      onFollowupsVisibilityChange={setShowFollowups}
+                      onSubmit={handleSubmit}
+                      onStop={handleStop}
+                    />
+                  </div>
                 ) : (
                   <div
                     aria-hidden="true"
                     className={cn(
-                      "bg-background/5 h-32 w-full -translate-y-4 rounded-2xl border",
+                      "bg-background/5 h-32 w-full -translate-y-4 rounded-3xl border",
                     )}
                   />
                 )}
diff --git a/frontend-web/src/styles/globals.css b/frontend-web/src/styles/globals.css
index 3b8f86da..e21e851a 100644
--- a/frontend-web/src/styles/globals.css
+++ b/frontend-web/src/styles/globals.css
@@ -752,3 +752,62 @@
   --container-width-md: calc(var(--spacing) * 204);
   --container-width-lg: calc(var(--spacing) * 256);
 }
+
+/* ── Landing 态输入框 Gemini 风格：旋转彩色描边 + 多色柔光阴影 ───────── */
+/* 关键：::before 转动的彩色锥形渐变 + ::after 内嵌白板遮罩中央，只在 1.5px 边缘可见模糊彩光 */
+.gemini-shadow {
+  box-shadow:
+    0 0 20px rgba(66, 133, 244, 0.10),
+    0 0 40px rgba(219, 68, 55, 0.05),
+    0 0 60px rgba(244, 180, 0, 0.05),
+    0 0 80px rgba(15, 157, 88, 0.05);
+}
+.dark .gemini-shadow {
+  box-shadow:
+    0 0 24px rgba(66, 133, 244, 0.20),
+    0 0 48px rgba(219, 68, 55, 0.10),
+    0 0 72px rgba(244, 180, 0, 0.10),
+    0 0 96px rgba(15, 157, 88, 0.10);
+}
+
+.gemini-gradient-border {
+  position: relative;
+  background: var(--background);
+  border-radius: 1.5rem;
+  z-index: 0;
+  overflow: hidden;
+}
+.gemini-gradient-border::before {
+  content: '';
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  top: -50%;
+  left: -50%;
+  background: conic-gradient(
+    from 0deg,
+    #4285F4 0deg,
+    #DB4437 90deg,
+    #F4B400 180deg,
+    #0F9D58 270deg,
+    #4285F4 360deg
+  );
+  z-index: -2;
+  animation: gemini-rotate 4s linear infinite;
+  filter: blur(10px);
+  pointer-events: none;
+}
+.gemini-gradient-border::after {
+  content: '';
+  position: absolute;
+  inset: 2.5px;
+  background: var(--background);
+  border-radius: calc(1.5rem - 2px);
+  z-index: -1;
+}
+
+@keyframes gemini-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}