feat(terminal): 新增多 shell 类型支持的 terminal 创建按钮

MarkShawn2020 · claude · MarkShawn2020 · commit ee1f78e5faf6 · 2026-01-01T22:39:03.000+07:00
- 新增 NewTerminalSplitButton 组件，支持 Terminal/Claude Code/Codex - VerticalFeatureTabs 项目头部添加新建 terminal 下拉按钮 - 单 tab 关闭时等价于关闭整个 panel - DRY: PanelGrid 复用 NewTerminalSplitButton 组件 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
diff --git a/src/components/GlobalHeader/VerticalFeatureTabs.tsx b/src/components/GlobalHeader/VerticalFeatureTabs.tsx
@@ -53,6 +53,7 @@ import {
 import { ProjectLogo } from "@/views/Workspace/ProjectLogo";
 import { CreateFeatureDialog } from "./CreateFeatureDialog";
 import { SessionDropdownMenuItems } from "@/components/shared/SessionMenuItems";
+import { NewTerminalSplitButton } from "@/components/ui/new-terminal-button";
 import type { Feature, WorkspaceData, WorkspaceProject } from "@/views/Workspace/types";
 
 const MIN_WIDTH = 180;
@@ -810,6 +811,109 @@ function ProjectSessionsGroup({
     }
   };
 
+  const handleNewTerminal = async (command?: string) => {
+    let savedWorkspace: WorkspaceData | null = null;
+
+    setWorkspace((currentWorkspace) => {
+      if (!currentWorkspace) return currentWorkspace;
+
+      const currentProject = currentWorkspace.projects.find((p) => p.id === project.id);
+      if (!currentProject) return currentWorkspace;
+
+      const targetFeature = currentProject.features.find((f) => !f.archived);
+
+      if (!targetFeature) {
+        savedWorkspace = {
+          ...currentWorkspace,
+          active_project_id: project.id,
+        };
+        return savedWorkspace;
+      }
+
+      const panelId = targetFeature.panels[0]?.id;
+      const title = command === "claude" ? "Claude Code" : command === "codex" ? "Codex" : "Terminal";
+
+      if (!panelId) {
+        const newPanelId = crypto.randomUUID();
+        const ptySessionId = crypto.randomUUID();
+        const ptyId = crypto.randomUUID();
+
+        const newPanel = {
+          id: newPanelId,
+          sessions: [{ id: ptySessionId, pty_id: ptyId, title, command }],
+          active_session_id: ptySessionId,
+          is_shared: false,
+          cwd: project.path,
+        };
+
+        const newProjects = currentWorkspace.projects.map((p) => {
+          if (p.id !== project.id) return p;
+          return {
+            ...p,
+            features: p.features.map((f) => {
+              if (f.id !== targetFeature.id) return f;
+              return {
+                ...f,
+                panels: [...f.panels, newPanel],
+                layout: { type: "panel" as const, panelId: newPanelId },
+              };
+            }),
+            active_feature_id: targetFeature.id,
+            view_mode: "features" as const,
+          };
+        });
+
+        savedWorkspace = {
+          ...currentWorkspace,
+          projects: newProjects,
+          active_project_id: project.id,
+        };
+        return savedWorkspace;
+      } else {
+        const ptySessionId = crypto.randomUUID();
+        const ptyId = crypto.randomUUID();
+
+        const newProjects = currentWorkspace.projects.map((p) => {
+          if (p.id !== project.id) return p;
+          return {
+            ...p,
+            features: p.features.map((f) => {
+              if (f.id !== targetFeature.id) return f;
+              return {
+                ...f,
+                panels: f.panels.map((panel) => {
+                  if (panel.id !== panelId) return panel;
+                  return {
+                    ...panel,
+                    sessions: [
+                      ...(panel.sessions || []),
+                      { id: ptySessionId, pty_id: ptyId, title, command },
+                    ],
+                    active_session_id: ptySessionId,
+                  };
+                }),
+              };
+            }),
+            active_feature_id: targetFeature.id,
+            view_mode: "features" as const,
+          };
+        });
+
+        savedWorkspace = {
+          ...currentWorkspace,
+          projects: newProjects,
+          active_project_id: project.id,
+        };
+        return savedWorkspace;
+      }
+    });
+
+    if (savedWorkspace) {
+      await invoke("workspace_save", { data: savedWorkspace });
+      navigate({ type: "workspace", projectId: project.id, mode: "features" });
+    }
+  };
+
   const projectDisplayName = project.name
     .split(/[-_]/)
     .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
@@ -819,7 +923,7 @@ function ProjectSessionsGroup({
     <div className="px-2">
       {/* Project Header */}
       <div
-        className={`flex items-center gap-1 px-2 py-1.5 rounded-lg cursor-pointer transition-colors ${
+        className={`group flex items-center gap-1 px-2 py-1.5 rounded-lg cursor-pointer transition-colors ${
           isActiveProject
             ? "bg-primary/10 text-primary"
             : "text-ink hover:bg-card-alt"
@@ -853,6 +957,13 @@ function ProjectSessionsGroup({
         <span className="text-xs text-muted-foreground">
           {isLoading ? "..." : filteredSessions.length}
         </span>
+
+        {/* New Terminal Button */}
+        <NewTerminalSplitButton
+          variant="icon"
+          onSelect={handleNewTerminal}
+          className="opacity-0 group-hover:opacity-100"
+        />
       </div>
 
       {/* Sessions List */}
diff --git a/src/components/PanelGrid/PanelGrid.tsx b/src/components/PanelGrid/PanelGrid.tsx
@@ -1,15 +1,10 @@
 import { useCallback, useEffect, useState } from "react";
 import { Allotment } from "allotment";
 import "allotment/dist/style.css";
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, DrawingPinFilledIcon, PlusIcon } from "@radix-ui/react-icons";
+import { ChevronLeftIcon, ChevronRightIcon, DrawingPinFilledIcon } from "@radix-ui/react-icons";
 import { SessionPanel } from "./SessionPanel";
 import type { LayoutNode } from "../../views/Workspace/types";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "../ui/dropdown-menu";
+import { NewTerminalSplitButton } from "../ui/new-terminal-button";
 
 export interface SessionState {
   id: string;
@@ -184,33 +179,7 @@ export function PanelGrid({
         <div className="text-center">
           <p className="text-muted-foreground mb-4">No terminals open</p>
           {onInitialPanelCreate && (
-            <div className="inline-flex rounded-lg overflow-hidden">
-              <button
-                onClick={() => onInitialPanelCreate()}
-                className="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
-              >
-                <PlusIcon className="w-4 h-4" />
-                New Terminal
-              </button>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <button className="px-2 py-2 bg-primary text-primary-foreground hover:bg-primary/90 border-l border-primary-foreground/20 transition-colors">
-                    <ChevronDownIcon className="w-4 h-4" />
-                  </button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                  <DropdownMenuItem onClick={() => onInitialPanelCreate()}>
-                    Terminal
-                  </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => onInitialPanelCreate("claude")}>
-                    Claude Code
-                  </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => onInitialPanelCreate("codex")}>
-                    Codex
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
+            <NewTerminalSplitButton onSelect={onInitialPanelCreate} />
           )}
         </div>
       </div>
diff --git a/src/components/PanelGrid/SessionPanel.tsx b/src/components/PanelGrid/SessionPanel.tsx
@@ -144,20 +144,18 @@ export const SessionPanel = memo(function SessionPanel({
                 fallback={titleFallback}
                 onRename={handleTitleChange(session.id)}
               />
-              {panel.sessions.length > 1 && (
-                <span
-                  role="button"
-                  tabIndex={-1}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    onSessionClose(session.id);
-                  }}
-                  className="absolute right-1 p-0.5 rounded opacity-0 group-hover:opacity-100 hover:bg-card-alt transition-opacity cursor-pointer"
-                >
-                  <Cross2Icon className="w-3 h-3" />
-                </span>
-              )}
+              <span
+                role="button"
+                tabIndex={-1}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  onSessionClose(session.id);
+                }}
+                className="absolute right-1 p-0.5 rounded opacity-0 group-hover:opacity-100 hover:bg-card-alt transition-opacity cursor-pointer"
+              >
+                <Cross2Icon className="w-3 h-3" />
+              </span>
             </TabsTrigger>
           ))}
         </TabsList>
diff --git a/src/components/ui/new-terminal-button.tsx b/src/components/ui/new-terminal-button.tsx
@@ -0,0 +1,94 @@
+import { PlusIcon, ChevronDownIcon } from "@radix-ui/react-icons";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "./dropdown-menu";
+
+export type TerminalType = "terminal" | "claude" | "codex";
+
+export interface TerminalOption {
+  type: TerminalType;
+  label: string;
+  command?: string;
+}
+
+export const TERMINAL_OPTIONS: TerminalOption[] = [
+  { type: "terminal", label: "Terminal" },
+  { type: "claude", label: "Claude Code", command: "claude" },
+  { type: "codex", label: "Codex", command: "codex" },
+];
+
+interface NewTerminalSplitButtonProps {
+  onSelect: (command?: string) => void;
+  variant?: "primary" | "icon";
+  className?: string;
+}
+
+/**
+ * Split button for creating new terminals with multiple shell options.
+ * - Primary variant: Full button with "New Terminal" text (for empty state)
+ * - Icon variant: Compact icon-only button (for inline use)
+ */
+export function NewTerminalSplitButton({
+  onSelect,
+  variant = "primary",
+  className = "",
+}: NewTerminalSplitButtonProps) {
+  if (variant === "icon") {
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            className={`p-0.5 text-muted-foreground hover:text-ink transition-colors ${className}`}
+            title="New terminal"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <PlusIcon className="w-3.5 h-3.5" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          {TERMINAL_OPTIONS.map((opt) => (
+            <DropdownMenuItem
+              key={opt.type}
+              onClick={(e) => {
+                e.stopPropagation();
+                onSelect(opt.command);
+              }}
+            >
+              {opt.label}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  }
+
+  // Primary variant - full split button
+  return (
+    <div className={`inline-flex rounded-lg overflow-hidden ${className}`}>
+      <button
+        onClick={() => onSelect()}
+        className="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+      >
+        <PlusIcon className="w-4 h-4" />
+        New Terminal
+      </button>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button className="px-2 py-2 bg-primary text-primary-foreground hover:bg-primary/90 border-l border-primary-foreground/20 transition-colors">
+            <ChevronDownIcon className="w-4 h-4" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          {TERMINAL_OPTIONS.map((opt) => (
+            <DropdownMenuItem key={opt.type} onClick={() => onSelect(opt.command)}>
+              {opt.label}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
diff --git a/src/views/Workspace/WorkspaceView.tsx b/src/views/Workspace/WorkspaceView.tsx
