style(webview): 优化样式变量及组件样式细节

hqwlkj · hqwlkj · commit 405659881cc6 · 2026-07-21T16:17:44.000+08:00
- 更新全局CSS变量，统一主色调为 #4d6bfe，替换原 vscode 主题色
- 修改 ContinuePrompt 和 PermissionPrompt 组件边框及背景为主色调变量
- 调整 PromptAttachments 中附件标签的文字颜色为主色调
- 优化 PromptAttachments 中移除按钮的圆角样式
- 修改 SkillsTags 组件 Badge 圆角为统一圆角样式

refactor(input-prompt): 用下拉菜单替代计划模式开关

- 用 DropdownMenu 替换旧版 Switch 组件控制 planMode
- planMode 状态类型调整为 "true" | "false" 字符串
- 添加下拉选项说明不同模式的行为含义
- 发送消息时将字符串状态转换为布尔值传递
- 优化按钮显示图标及文字切换，区分默认与计划模式

feat(messages): 当消息为空时显示欢迎界面

- 新增无消息时展示 Deep Code AI IDE 欢迎图标和提示文字
- 保持消息渲染逻辑稳定，分角色正确展示各消息气泡
- 改进滚动处理逻辑，自动滚到底部

fix(messages): 移除多余控制台日志语句

- 删除 handleToBottom 函数中的无用 console.log 调试信息
diff --git a/packages/vscode-ide-companion/src/webview/components/ContinuePrompt.tsx b/packages/vscode-ide-companion/src/webview/components/ContinuePrompt.tsx
@@ -9,7 +9,7 @@ export interface ContinuePromptProps {
 export default function ContinuePrompt({ onContinue, onDismiss }: ContinuePromptProps) {
   return (
     <div className="px-4 py-2 w-full max-w-237.5 mx-auto min-w-sm">
-      <div className="rounded-md border border-(--vscode-focusBorder) bg-(--vscode-editor-background) p-3 text-sm">
+      <div className="rounded-md border border-primary bg-background p-3 text-sm">
         <div className="flex items-center justify-between mb-2">
           <span className="font-medium">Session interrupted</span>
           <Button
diff --git a/packages/vscode-ide-companion/src/webview/components/InputPrompt.tsx b/packages/vscode-ide-companion/src/webview/components/InputPrompt.tsx
@@ -4,7 +4,7 @@ import SkillsTags from "@/webview/components/SkillsTags";
 import ContextIndicator from "@/webview/components/ContextIndicator";
 import { PromptAttachments, usePromptAttachments } from "@/webview/components/PromptAttachments";
 import type { ActiveEditor, EditingMessage, SessionMessage, SkillInfo, TokenTelemetry } from "@/webview/types";
-import { FileCodeIcon, Reply, Siren, Square } from "lucide-react";
+import { FileCodeIcon, Hand, Reply, Siren, Square, SquareChartGantt } from "lucide-react";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupTextarea } from "@/webview/components/ui/input-group";
 import { Separator } from "@/webview/components/ui/separator";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "./ui/hover-card";
@@ -13,6 +13,16 @@ import { Field, FieldDescription, FieldGroup } from "./ui/field";
 import { Spinner } from "@/webview/components/ui/spinner";
 import { Switch } from "@/webview/components/ui/switch";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/webview/components/ui/tooltip";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/webview/components/ui/dropdown-menu";
+import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "@/webview/components/ui/item";
 
 export interface InputPromptProps {
   loading: boolean;
@@ -54,7 +64,7 @@ export default function InputPrompt({
   onClearEditingMessage,
 }: InputPromptProps) {
   const [value, setValue] = useState<string>("");
-  const [planMode, setPlanMode] = useState<boolean>(false);
+  const [planMode, setPlanMode] = useState<"false" | "true">("false");
   const [history, setHistory] = useState<string[]>([]);
   const [historyIdx, setHistoryIdx] = useState<number>(-1);
   const [draftBeforeHistory, setDraftBeforeHistory] = useState<string>("");
@@ -125,7 +135,7 @@ export default function InputPrompt({
     setValue("");
     setHistoryIdx(-1);
 
-    onSendPrompt(trimmed, selectedSkills, images, { ...reply, planMode });
+    onSendPrompt(trimmed, selectedSkills, images, { ...reply, planMode: planMode === "true" });
     onSelectSkills([]);
     clearAttachments();
     onClearEditingMessage();
@@ -237,18 +247,6 @@ export default function InputPrompt({
               }}
             />
             <Separator orientation="vertical" className="h-5 mt-1.5" />
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <div className="flex items-center gap-1 cursor-pointer">
-                  <Siren className="size-3.5" />
-                  <Switch id="switch-size-sm" checked={planMode} onCheckedChange={(e) => setPlanMode(e)} size="sm" />
-                </div>
-              </TooltipTrigger>
-              <TooltipContent side="bottom">
-                <p>Plan Mode</p>
-              </TooltipContent>
-            </Tooltip>
-            <Separator orientation="vertical" className="h-5 mt-1.5" />
             <ContextIndicator tokenTelemetry={tokenTelemetry} />
             <Separator orientation="vertical" className="h-5 mt-1.5" />
             {activeEditor && (
@@ -272,31 +270,86 @@ export default function InputPrompt({
                 </HoverCardContent>
               </HoverCard>
             )}
-            {loading ? (
-              <InputGroupButton
-                variant="secondary"
-                size="icon-sm"
-                className="ml-auto group"
-                onClick={onInterrupt}
-                title="Stop"
-              >
-                <Square className="h-3 w-3 hidden fill-primary group-hover:block" strokeWidth={0} />
-                <Spinner className="h-4 w-4 block group-hover:hidden text-primary" />
-              </InputGroupButton>
-            ) : (
-              <InputGroupButton
-                variant="default"
-                className={cn("ml-auto cursor-pointer", {
-                  "cursor-not-allowed!": !hasContent && !loading,
-                })}
-                onClick={handleSend}
-                disabled={!hasContent && !loading}
-                title="Send"
-                size="icon-sm"
-              >
-                <Reply className="rotate-x-180" />
-              </InputGroupButton>
-            )}
+            <div className="ml-auto flex gap-2 items-center">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <InputGroupButton variant="ghost" className="h-8">
+                    {planMode === "true" ? (
+                      <div className="flex items-center gap-0.5">
+                        <SquareChartGantt className="size-3.5" strokeWidth={1.5} />
+                        <span className="text-xs font-normal">Plan</span>
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-0.5">
+                        <Hand className="size-3.5" strokeWidth={1.5} />
+                        <span className="text-xs font-normal">Default</span>
+                      </div>
+                    )}
+                  </InputGroupButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-80" side="top" align="end">
+                  <DropdownMenuGroup>
+                    <DropdownMenuLabel>Modes</DropdownMenuLabel>
+                    <DropdownMenuRadioGroup
+                      value={planMode}
+                      onValueChange={(value) => setPlanMode(value as "true" | "false")}
+                    >
+                      <DropdownMenuRadioItem value="false">
+                        <Item size="xs">
+                          <ItemMedia variant="icon">
+                            <Hand className="size-4.5 mt-2.5" strokeWidth={1.5} />
+                          </ItemMedia>
+                          <ItemContent>
+                            <ItemTitle className="text-xs">Default</ItemTitle>
+                            <ItemDescription className="text-[10px]">
+                              Deep code will ask for approval before making each edit
+                            </ItemDescription>
+                          </ItemContent>
+                        </Item>
+                      </DropdownMenuRadioItem>
+                      <DropdownMenuRadioItem value="true">
+                        <Item size="xs">
+                          <ItemMedia variant="icon">
+                            <SquareChartGantt className="size-4.5 mt-2.5" strokeWidth={1.5} />
+                          </ItemMedia>
+                          <ItemContent>
+                            <ItemTitle className="text-xs">Plan</ItemTitle>
+                            <ItemDescription className="text-[8px]">
+                              Deep code will explore the code and present a plan before editing
+                            </ItemDescription>
+                          </ItemContent>
+                        </Item>
+                      </DropdownMenuRadioItem>
+                    </DropdownMenuRadioGroup>
+                  </DropdownMenuGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
+              {loading ? (
+                <InputGroupButton
+                  variant="secondary"
+                  size="icon-sm"
+                  className="group"
+                  onClick={onInterrupt}
+                  title="Stop"
+                >
+                  <Square className="h-3 w-3 hidden fill-primary group-hover:block" strokeWidth={0} />
+                  <Spinner className="h-4 w-4 block group-hover:hidden text-primary" />
+                </InputGroupButton>
+              ) : (
+                <InputGroupButton
+                  variant="default"
+                  className={cn("cursor-pointer", {
+                    "cursor-not-allowed!": !hasContent && !loading,
+                  })}
+                  onClick={handleSend}
+                  disabled={!hasContent && !loading}
+                  title="Send"
+                  size="icon-sm"
+                >
+                  <Reply className="rotate-x-180" />
+                </InputGroupButton>
+              )}
+            </div>
           </InputGroupAddon>
           <SkillsTags
             selectedSkills={selectedSkills}
diff --git a/packages/vscode-ide-companion/src/webview/components/Messages.tsx b/packages/vscode-ide-companion/src/webview/components/Messages.tsx
@@ -10,6 +10,7 @@ import ToolBubble, {
 import SystemBubble from "@/webview/components/bubbles/SystemBubble";
 import type { EditingMessage, SessionMessage } from "@/webview/types";
 import AskQuestionSummary from "@/webview/components/AskQuestionSummary";
+import icon from "../../../assets/deepcoding_icon.png";
 
 interface MessagesProps {
   messages: SessionMessage[];
@@ -23,7 +24,6 @@ const Messages = forwardRef<HTMLDivElement, MessagesProps>(
     const bottomRef = useRef<HTMLDivElement>(null);
 
     const handleToBottom = () => {
-      console.log("handleToBottom");
       bottomRef.current?.scrollIntoView({ behavior: "smooth" });
     };
     useEffect(() => {
@@ -34,6 +34,17 @@ const Messages = forwardRef<HTMLDivElement, MessagesProps>(
     //   return bottomRef.current ? bottomRef.current : undefined;
     // })
 
+    if (messages.length === 0) {
+      return (
+        <div className="flex-1 flex flex-col justify-center items-center w-full">
+          <img src={icon} alt="" className="size-32 shrink-0 mb-6" />
+          <div className="mb-3 text-[16px] font-semibold">Welcome to the Deep Code AI IDE!</div>
+          <p className="text-xs text-muted-foreground">
+            What would you like to do? Ask about this codebase or we can start writing code.
+          </p>
+        </div>
+      );
+    }
     return (
       <ScrollArea
         ref={ref}
diff --git a/packages/vscode-ide-companion/src/webview/components/PermissionPrompt.tsx b/packages/vscode-ide-companion/src/webview/components/PermissionPrompt.tsx
@@ -249,7 +249,7 @@ export default function PermissionPrompt({
 
   return (
     <div className="px-4 py-2 w-full max-w-237.5 mx-auto min-w-sm">
-      <div className="rounded-md border border-(--vscode-focusBorder) bg-(--vscode-editor-background) p-3 text-sm">
+      <div className="rounded-md border border-primary bg-background p-3 text-sm">
         <div className="flex items-center justify-between mb-2">
           <div>
             <span className="font-medium">Permission required</span>
diff --git a/packages/vscode-ide-companion/src/webview/components/PromptAttachments.tsx b/packages/vscode-ide-companion/src/webview/components/PromptAttachments.tsx
@@ -121,15 +121,15 @@ export function PromptAttachments({ attachments, onRemove }: PromptAttachmentsPr
           <HoverCardTrigger asChild>
             <div
               key={attachment.id}
-              className="relative group flex items-center gap-1 rounded-md cursor-pointer border border-border bg-accent/50 text-xs text-muted-foreground hover:bg-accent transition-colors"
+              className="relative group flex items-center gap-1 rounded cursor-pointer border border-border bg-accent/50 text-xs text-muted-foreground hover:bg-accent transition-colors"
             >
               <div className="flex items-center gap-1 py-0.5 px-1.5">
                 <img src={attachment.dataUrl} alt={attachment.label} className="size-3 rounded-xs object-cover" />
-                <span className="max-w-20 truncate">{attachment.label}</span>
+                <span className="max-w-20 truncate text-primary">{attachment.label}</span>
               </div>
               <Button
                 variant="ghost"
-                className="py-2.5 size-3 inline-flex cursor-pointer text-muted-foreground hover:bg-destructive/10 hover:text-destructive focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+                className="py-2.5 size-3 inline-flex cursor-pointer rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
                 onClick={() => onRemove(attachment.id)}
                 title="Remove"
               >
diff --git a/packages/vscode-ide-companion/src/webview/components/SkillsTags.tsx b/packages/vscode-ide-companion/src/webview/components/SkillsTags.tsx
@@ -15,7 +15,7 @@ export default function SkillsTags({ selectedSkills, onRemove }: SkillsTagsProps
   return (
     <InputGroupAddon className="flex flex-wrap gap-1.5" align="block-start">
       {selectedSkills.map((skill) => (
-        <Badge key={skill.name} variant="secondary" className="h-6 gap-1 rounded-md text-xs pr-0">
+        <Badge key={skill.name} variant="secondary" className="h-6 gap-1 rounded text-xs pr-0">
           {skill.name}
           <Button
             variant="ghost"
diff --git a/packages/vscode-ide-companion/src/webview/index.css b/packages/vscode-ide-companion/src/webview/index.css
@@ -29,7 +29,7 @@
   /* editorHoverWidget is used for hover popups like HoverCard */
   --popover: var(--vscode-editorHoverWidget-background, var(--vscode-sideBar-background, #ffffff));
   --popover-foreground: var(--vscode-editorHoverWidget-foreground, var(--vscode-sideBar-foreground, #333333));
-  --primary: var(--vscode-button-background, #0066cc);
+  --primary: #4d6bfe;
   --primary-foreground: var(--vscode-button-foreground, #ffffff);
   --secondary: var(--vscode-toolbar-background, #e8e8e8);
   --secondary-foreground: var(--vscode-toolbar-foreground, #333333);
@@ -45,7 +45,7 @@
   --color-input: var(--vscode-input-border, var(--border));
   /* Input background uses editor background */
   --input-bg: var(--vscode-input-background, #ffffff);
-  --ring: var(--vscode-focusBorder, #0066cc);
+  --ring: #4d6bfe;;
   --chart-1: var(--vscode-charts-blue, #0066cc);
   --chart-2: var(--vscode-charts-orange, #cc6600);
   --chart-3: var(--vscode-charts-green, #22863a);
@@ -117,7 +117,7 @@
   /* editorHoverWidget is used for hover popups like HoverCard */
   --popover: var(--vscode-editorHoverWidget-background, var(--vscode-sideBar-background, #252526));
   --popover-foreground: var(--vscode-editorHoverWidget-foreground, var(--vscode-sideBar-foreground, #cccccc));
-  --primary: var(--vscode-button-background, #0e639c);
+  --primary: #4d6bfe;
   --primary-foreground: var(--vscode-button-foreground, #ffffff);
   --secondary: var(--vscode-toolbar-background, #2d2d2d);
   --secondary-foreground: var(--vscode-toolbar-foreground, #cccccc);
@@ -130,7 +130,7 @@
   --success-foreground: var(--vscode-editor-background, #1e1e1e);
   --border: var(--vscode-panel-border, #3c3c3c);
   --input: var(--vscode-input-background, #3c3c3c);
-  --ring: var(--vscode-focusBorder, #0e639c);
+  --ring: #4d6bfe;;
   --chart-1: var(--vscode-charts-blue, #75baff);
   --chart-2: var(--vscode-charts-orange, #d18616);
   --chart-3: var(--vscode-charts-green, #89d185);
