feat: 面板标签右侧新增「+」打开新标签

apps/desktop/src/renderer/src/components/SidePanel.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState, type ComponentType, type JSX, type ReactNode } from 'react'
-import { LuChevronDown, LuX } from 'react-icons/lu'
+import { LuChevronDown, LuPlus, LuX } from 'react-icons/lu'
 
 /**
  * 右侧通用标签面板（TabPanel，ZCode 式）。
@@ -59,6 +59,7 @@ export function SidePanel({
 }: SidePanelProps): JSX.Element {
   const dragRef = useRef<{ startX: number; startWidth: number } | null>(null)
   const [listOpen, setListOpen] = useState(false)
+  const [plusOpen, setPlusOpen] = useState(false)
   const [ctxMenu, setCtxMenu] = useState<{ x: number; y: number; tabId: string } | null>(null)
 
   // 面板宽度拖拽（左边缘把手）
@@ -85,21 +86,22 @@ export function SidePanel({
 
   // 菜单打开时 Esc 关闭
   useEffect(() => {
-    if (!listOpen && !ctxMenu) return
+    if (!listOpen && !plusOpen && !ctxMenu) return
     const onKey = (e: KeyboardEvent): void => {
       if (e.key === 'Escape') {
         setListOpen(false)
+        setPlusOpen(false)
         setCtxMenu(null)
       }
     }
     window.addEventListener('keydown', onKey)
     return () => window.removeEventListener('keydown', onKey)
-  }, [listOpen, ctxMenu])
+  }, [listOpen, plusOpen, ctxMenu])
 
   // 覆盖层开合上报（宿主借此暂停原生视图）
   useEffect(() => {
-    onOverlayChange?.(listOpen || ctxMenu !== null)
+    onOverlayChange?.(listOpen || plusOpen || ctxMenu !== null)
-  }, [listOpen, ctxMenu, onOverlayChange])
+  }, [listOpen, plusOpen, ctxMenu, onOverlayChange])
 
   const current = tabs.find((t) => t.id === activeId) ?? tabs[tabs.length - 1] ?? null
 
@@ -196,6 +198,52 @@ export function SidePanel({
             )}
           </div>
 
+          {/* 新增标签：列出注册表中的类型，已打开的置灰 */}
+          {available.length > 0 && (
+            <div className="relative shrink-0">
+              <button
+                type="button"
+                aria-label="打开新的标签"
+                title="打开新的标签"
+                onClick={() => setPlusOpen((v) => !v)}
+                className={`flex size-7 items-center justify-center rounded-md border transition-colors ${
+                  plusOpen
+                    ? 'border-accent/50 bg-accent-tint/40 text-accent-ink'
+                    : 'border-zinc-200 bg-white text-zinc-400 hover:border-accent/40 hover:text-zinc-600'
+                }`}
+              >
+                <LuPlus size={12} />
+              </button>
+
+              {plusOpen && (
+                <>
+                  <div className="fixed inset-0 z-20" onClick={() => setPlusOpen(false)} />
+                  <div className="absolute left-0 top-8 z-30 w-40 rounded-lg border border-zinc-200 bg-white py-1 shadow-xl shadow-zinc-300/40">
+                    {available.map(({ id, title, icon: Icon }) => {
+                      const opened = tabs.some((t) => t.id === id)
+                      return (
+                        <button
+                          key={id}
+                          type="button"
+                          disabled={opened}
+                          onClick={() => {
+                            setPlusOpen(false)
+                            onOpenTab(id)
+                          }}
+                          className="flex w-full items-center gap-2 px-2.5 py-1.5 text-left text-[12px] text-zinc-600 transition-colors hover:bg-zinc-100 disabled:cursor-default disabled:text-zinc-300 disabled:hover:bg-transparent"
+                        >
+                          <Icon size={12} className="shrink-0" />
+                          {title}
+                          {opened && <span className="ml-auto text-[10px] text-zinc-300">已打开</span>}
+                        </button>
+                      )
+                    })}
+                  </div>
+                </>
+              )}
+            </div>
+          )}
+
           {ctxMenu && (
             <>
               <div