refactor(ui): 调整多组件样式与布局优化

hqwlkj · hqwlkj · commit 3e092d009c06 · 2026-07-13T12:11:33.000+08:00
- 将 Messages 组件移动至 App.tsx 以优化界面结构
- ContextMeter 中调整字体大小，统一文本样式细节
- 取消 markdown 代码块内边距，改善视觉效果
- PlanRenderer 优化缩进及元素间距，改善文本换行表现
- SessionList 中添加按钮点击事件以控制抽屉状态
- 各类型气泡组件微调顶部间距，提升对齐一致性
- ThinkingLiveBubble 添加响应式宽度限制，居中显示
- ToolBubble 中引入 Tooltip 组件，为参数文本添加悬浮提示展示
- 移除 Messages.tsx 内部分 console.log 调试信息
diff --git a/packages/vscode-ide-companion/src/webview/App.tsx b/packages/vscode-ide-companion/src/webview/App.tsx
@@ -16,6 +16,13 @@ export default function App() {
         onSelectSession={actions.selectSession}
         onCreateNewSession={actions.createNewSession}
       />
+      <Messages
+        messages={state.messages}
+        loading={state.loading}
+        llmStreamProgress={state.llmStreamProgress}
+        processes={state.processes}
+        onEditMessage={actions.editMessage}
+      />
       <PermissionPrompt
         askPermissions={state.askPermissions}
         sessionStatus={state.activeSessionStatus}
@@ -27,13 +34,6 @@ export default function App() {
         activeSessionId={state.activeSessionId}
         onInterrupt={actions.interrupt}
       />
-      <Messages
-        messages={state.messages}
-        loading={state.loading}
-        llmStreamProgress={state.llmStreamProgress}
-        processes={state.processes}
-        onEditMessage={actions.editMessage}
-      />
       {state.loading && (
         <ThinkingLiveBubble
           llmStreamProgress={state.llmStreamProgress}
diff --git a/packages/vscode-ide-companion/src/webview/components/ContextMeter.tsx b/packages/vscode-ide-companion/src/webview/components/ContextMeter.tsx
@@ -30,29 +30,29 @@ export default function ContextMeter({ tokenTelemetry }: ContextMeterProps) {
         </InputGroupButton>
       </HoverCardTrigger>
       <HoverCardContent className="flex w-xs flex-col gap-5">
-        <div className="font-semibold text-lg text-center">Context Window</div>
+        <div className="font-semibold text-[16px] text-center">Context Window</div>
         <Field className="w-full max-w-xs">
           <FieldLabel htmlFor="progress-upload" className="flex items-end">
             <span className="text-primary text-xl font-bold">{percent}%</span>
-            <span className="text-muted-foreground">used</span>
+            <span className="text-xs text-muted-foreground">used</span>
           </FieldLabel>
           <Progress value={percent} id="progress-upload" />
         </Field>
         <div className="space-y-1">
           <div className="flex justify-between">
-            <span className="text-muted-foreground">Model</span>
+            <span className="text-xs text-muted-foreground">Model</span>
             <span className="text-primary">{tokenTelemetry?.model || "unknown"}</span>
           </div>
           <div className="flex justify-between">
-            <span className="text-muted-foreground">Thinking</span>
+            <span className="text-xs text-muted-foreground">Thinking</span>
             <span className="text-primary">{tokenTelemetry?.thinkingEnabled ? "true" : "false"}</span>
           </div>
           <div className="flex justify-between">
-            <span className="text-muted-foreground">Effort</span>
+            <span className="text-xs text-muted-foreground">Effort</span>
             <span className="text-primary">{tokenTelemetry?.reasoningEffort || "max"}</span>
           </div>
           <div className="flex justify-between">
-            <span className="text-muted-foreground">Active Tokens</span>
+            <span className="text-xs text-muted-foreground">Active Tokens</span>
             <span className="text-primary">{formatTokenCount(activeTokens)}</span>
           </div>
         </div>
@@ -63,7 +63,7 @@ export default function ContextMeter({ tokenTelemetry }: ContextMeterProps) {
               <div className="font-semibold text-muted-foreground">Session Usage</div>
               {(usedRows || []).map(([key, value]) => (
                 <div className="flex justify-between" key={key}>
-                  <span className="text-muted-foreground">{toTitleCase(formatUsageFieldLabel(key))}</span>
+                  <span className="text-xs text-muted-foreground">{toTitleCase(formatUsageFieldLabel(key))}</span>
                   <span className="text-primary">{formatTokenCount(value)}</span>
                 </div>
               ))}
diff --git a/packages/vscode-ide-companion/src/webview/components/Messages.tsx b/packages/vscode-ide-companion/src/webview/components/Messages.tsx
@@ -23,7 +23,6 @@ export default function Messages({ messages, loading, llmStreamProgress, process
   console.log("processes: ", processes);
 
   useEffect(() => {
-    console.log("messages:", JSON.stringify(messages));
     bottomRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages, loading]);
 
@@ -33,7 +32,7 @@ export default function Messages({ messages, loading, llmStreamProgress, process
         {messages.map((msg, index) => {
           const prevMsg = index > 0 ? messages[index - 1] : null;
           const shouldConnect = prevMsg ? prevMsg.role !== "user" && msg.role !== "user" : false;
-          console.log(`Rendering message ${index}:`, JSON.stringify(msg));
+
           switch (msg.role) {
             case "user":
               return (
diff --git a/packages/vscode-ide-companion/src/webview/components/PlanRenderer.tsx b/packages/vscode-ide-companion/src/webview/components/PlanRenderer.tsx
@@ -68,12 +68,10 @@ export default function PlanRenderer({ plan }: PlanRendererProps) {
                   : "text-muted-foreground";
 
           return (
-            <div key={i} className="pl-2">
-              <div className="flex items-center gap-2 py-0.5" style={{ paddingLeft: `${indent * 16}px` }}>
-                <span className={`size-4 font-mono text-xs ${colorClass}`}>{label || " "}</span>
-                <div className="break-normal text-nowrap w-auto truncate flex-1">
-                  <span dangerouslySetInnerHTML={{ __html: toInlineHtml(taskMatch[3].trim()) }} />
-                </div>
+            <div key={i} className="pl-2 min-w-0">
+              <div className="flex items-start gap-2 py-0.5 min-w-0" style={{ paddingLeft: `${indent * 16}px` }}>
+                <span className={`shrink-0 size-4 mt-0.5 font-mono text-xs ${colorClass}`}>{label || " "}</span>
+                <span className="text-xs" dangerouslySetInnerHTML={{ __html: toInlineHtml(taskMatch[3].trim()) }} />
               </div>
             </div>
           );
diff --git a/packages/vscode-ide-companion/src/webview/components/SessionList.tsx b/packages/vscode-ide-companion/src/webview/components/SessionList.tsx
@@ -88,7 +88,13 @@ export default function SessionList({ sessions, activeSessionId, onSelect, onCre
       <DrawerTrigger asChild>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button variant="ghost" size="icon" className="shrink-0 cursor-pointer" title="Show Agent Sessions Sidebar">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="shrink-0 cursor-pointer"
+              title="Show Agent Sessions Sidebar"
+              onClick={() => setDrawerOpen(true)}
+            >
               <PanelRight className="h-4 w-4" />
             </Button>
           </TooltipTrigger>
diff --git a/packages/vscode-ide-companion/src/webview/components/ThinkingLiveBubble.tsx b/packages/vscode-ide-companion/src/webview/components/ThinkingLiveBubble.tsx
@@ -51,7 +51,7 @@ export default function ThinkingLiveBubble({
   }, [llmStreamProgress, processes]);
 
   return (
-    <div className="flex gap-2 mb-3 px-4">
+    <div className="flex gap-2 mb-3 px-4 w-full max-w-237.5 mx-auto min-w-sm">
       <BubbleDot connectToPrev={shouldConnect} className="mt-1" />
       <div className="flex items-center gap-2 text-sm text-muted-foreground">
         <Spinner className="h-3 w-3" />
diff --git a/packages/vscode-ide-companion/src/webview/components/bubbles/SystemBubble.tsx b/packages/vscode-ide-companion/src/webview/components/bubbles/SystemBubble.tsx
@@ -17,7 +17,7 @@ export default function SystemBubble({ content, meta, shouldConnect = false }: S
 
   return (
     <Collapsible open={open} onOpenChange={setOpen} className="relative w-full flex gap-2 mb-3">
-      <BubbleDot connectToPrev={shouldConnect} className="mt-4" />
+      <BubbleDot connectToPrev={shouldConnect} className="mt-3.5" />
       <div className="absolute left-0.75 h-full w-px bg-muted-foreground top-6"></div>
       <div className="flex-1 min-w-0">
         <CollapsibleTrigger asChild>
diff --git a/packages/vscode-ide-companion/src/webview/components/bubbles/ThinkingBubble.tsx b/packages/vscode-ide-companion/src/webview/components/bubbles/ThinkingBubble.tsx
@@ -15,7 +15,7 @@ export default function ThinkingBubble({ content, shouldConnect = false }: Think
 
   return (
     <Collapsible open={open} onOpenChange={setOpen} className="relative flex w-full gap-2 rounded-md mb-3">
-      <BubbleDot connectToPrev={shouldConnect} className="mt-4" />
+      <BubbleDot connectToPrev={shouldConnect} className="mt-3.5" />
       <div className="absolute left-0.75 h-full w-px bg-muted-foreground top-6"></div>
       <div className="flex-1 min-w-0 data-[state=open]:bg-muted">
         <CollapsibleTrigger asChild>
diff --git a/packages/vscode-ide-companion/src/webview/components/bubbles/ToolBubble.tsx b/packages/vscode-ide-companion/src/webview/components/bubbles/ToolBubble.tsx
@@ -6,6 +6,7 @@ import PlanRenderer from "@/webview/components/PlanRenderer";
 import DiffPreview from "@/webview/components/DiffPreview";
 import { ChevronDown } from "lucide-react";
 import { Button } from "@/webview/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/webview/components/ui/tooltip";
 
 interface ToolBubbleProps {
   content: string;
@@ -59,7 +60,7 @@ export default function ToolBubble({ content, meta, shouldConnect = false }: Too
 
   return (
     <Collapsible open={open} onOpenChange={setOpen} className="relative flex w-full gap-2 mb-3">
-      <BubbleDot variant={isOk ? "success" : "error"} connectToPrev={shouldConnect} className="mt-4" />
+      <BubbleDot variant={isOk ? "success" : "error"} connectToPrev={shouldConnect} className="mt-3.5" />
       <div className="absolute left-0.75 h-full w-px bg-muted-foreground top-6"></div>
       <div className="flex-1 min-w-0">
         <CollapsibleTrigger asChild>
@@ -69,7 +70,16 @@ export default function ToolBubble({ content, meta, shouldConnect = false }: Too
           >
             <span className="font-medium">{toolName}</span>
             {paramsMd && (
-              <div className="text-xs break-all w-auto text-left flex-1 text-muted-foreground truncate">{paramsMd}</div>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div className="flex-1 min-w-0 text-left text-xs text-muted-foreground cursor-pointer">
+                    <span className="text-wrap line-clamp-1">{paramsMd}</span>
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>{paramsMd}</p>
+                </TooltipContent>
+              </Tooltip>
             )}
             <ChevronDown className={`ml-auto group-data-[state=open]:rotate-180`} />
           </Button>
diff --git a/packages/vscode-ide-companion/src/webview/components/markdown/index.css b/packages/vscode-ide-companion/src/webview/components/markdown/index.css
@@ -132,7 +132,7 @@
 
 .markdown-content pre {
   margin: 1em 0;
-  padding: 1em;
+  /*padding: 1em;*/
   overflow-x: auto;
   background-color: var(--muted, rgba(0, 0, 0, 0.05));
   border: 1px solid var(--border);
