refactor: 侧边面板收敛为浏览器专属，删除不存在功能的全部痕迹

apps/desktop/src/renderer/src/App.tsx

@@ -10,45 +10,38 @@ import { Composer } from './components/Composer'
 import { SettingsModal } from './components/SettingsModal'
 import { Search } from './components/Search'
 import { BrowserPanel } from './components/browser/BrowserPanel'
-import { SidePanel, SIDE_TAB_ORDER, type SideTabType } from './components/SidePanel'
+import { SidePanel } from './components/SidePanel'
 import { applyThemeColor } from './lib/theme'
 
-// ---- 侧边面板状态（开合 / 标签 / 宽度），跨启动持久化 ----
+// ---- 侧边面板状态（开合 / 宽度），跨启动持久化 ----
 
-const SIDE_STORAGE_KEY = 'aso.sidepanel.v1'
+const SIDE_STORAGE_KEY = 'aso.sidepanel.v2'
 const SIDE_DEFAULT_WIDTH = 480
 const SIDE_MIN_WIDTH = 380
 const SIDE_MAX_WIDTH = 760
 
 interface SideState {
   open: boolean
-  tabs: SideTabType[]
-  active: SideTabType | null
   width: number
 }
 
 function loadSideState(): SideState {
-  const fallback: SideState = { open: false, tabs: [], active: null, width: SIDE_DEFAULT_WIDTH }
   try {
     const raw = localStorage.getItem(SIDE_STORAGE_KEY)
-    if (!raw) return fallback
+    if (raw) {
-    const parsed = JSON.parse(raw) as Partial<SideState>
+      const parsed = JSON.parse(raw) as Partial<SideState>
-    const tabs = Array.isArray(parsed.tabs)
+      return {
-      ? parsed.tabs.filter((t): t is SideTabType => SIDE_TAB_ORDER.includes(t))
+        open: Boolean(parsed.open),
-      : []
+        width:
-    return {
+          typeof parsed.width === 'number'
-      open: Boolean(parsed.open),
+            ? Math.min(SIDE_MAX_WIDTH, Math.max(SIDE_MIN_WIDTH, parsed.width))
-      tabs,
+            : SIDE_DEFAULT_WIDTH
-      active:
+      }
-        parsed.active && tabs.includes(parsed.active) ? parsed.active : (tabs[tabs.length - 1] ?? null),
-      width:
-        typeof parsed.width === 'number'
-          ? Math.min(SIDE_MAX_WIDTH, Math.max(SIDE_MIN_WIDTH, parsed.width))
-          : SIDE_DEFAULT_WIDTH
     }
   } catch {
-    return fallback
+    // 损坏/不可用时按默认处理
   }
+  return { open: false, width: SIDE_DEFAULT_WIDTH }
 }
 
 export default function App(): JSX.Element {
@@ -74,7 +67,7 @@ export default function App(): JSX.Element {
   const [searchOpen, setSearchOpen] = useState(false)
   const browser = useBrowser()
   const [side, setSide] = useState<SideState>(loadSideState)
-  const { open: sideOpen, tabs: sideTabs, active: activeSideTab, width: sideWidth } = side
+  const { open: sideOpen, width: sideWidth } = side
 
   useEffect(() => {
     try {
@@ -84,48 +77,14 @@ export default function App(): JSX.Element {
     }
   }, [side])
 
-  const openSideTab = useCallback((type: SideTabType): void => {
-    setSide((s) => ({
-      ...s,
-      open: true,
-      tabs: s.tabs.includes(type) ? s.tabs : [...s.tabs, type],
-      active: type
-    }))
-  }, [])
-
-  const closeSideTab = useCallback((type: SideTabType): void => {
-    setSide((s) => {
-      const tabs = s.tabs.filter((t) => t !== type)
-      return { ...s, tabs, active: s.active === type ? (tabs[tabs.length - 1] ?? null) : s.active }
-    })
-  }, [])
-
   const toggleSide = useCallback((): void => {
-    setSide((s) => {
+    setSide((s) => ({ ...s, open: !s.open }))
-      if (s.open) return { ...s, open: false }
-      // 当前面板仅承载浏览器标签：打开时无标签则自动补上
-      const tabs: SideTabType[] = s.tabs.includes('browser') ? s.tabs : [...s.tabs, 'browser']
-      return { ...s, open: true, tabs, active: s.active ?? 'browser' }
-    })
   }, [])
 
   const setSideWidth = useCallback((width: number): void => {
     setSide((s) => ({ ...s, width }))
   }, [])
 
-  const setSideActive = useCallback((type: SideTabType): void => {
-    setSide((s) => ({ ...s, active: type }))
-  }, [])
-
-  // Agent 首次创建受管浏览器页签时，自动打开侧边面板的浏览器标签
-  const browserTabCount = browser.state?.tabs.length ?? 0
-  const prevBrowserTabCount = useRef(0)
-  useEffect(() => {
-    const prev = prevBrowserTabCount.current
-    prevBrowserTabCount.current = browserTabCount
-    if (browserTabCount > 0 && prev === 0) openSideTab('browser')
-  }, [browserTabCount, openSideTab])
-
   // 启动时应用持久化的主题色
   useEffect(() => {
     void window.api
@@ -230,32 +189,22 @@ export default function App(): JSX.Element {
             />
           </div>
           {sideOpen && (
-            <SidePanel
+            <SidePanel width={sideWidth} onWidthChange={setSideWidth} onCollapse={toggleSide}>
-              tabs={sideTabs}
+              <BrowserPanel
-              active={activeSideTab}
+                state={browser.state}
-              width={sideWidth}
+                suspended={settingsOpen || searchOpen}
-              onWidthChange={setSideWidth}
+                onNavigate={browser.navigate}
-              onSelectTab={setSideActive}
+                onGoBack={browser.goBack}
-              onCloseTab={closeSideTab}
+                onGoForward={browser.goForward}
-              onOpenTab={openSideTab}
+                onReload={browser.reload}
-              onCollapse={toggleSide}
+                onNewTab={browser.newTab}
-              browser={
+                onSelectTab={browser.selectTab}
-                <BrowserPanel
+                onCloseTab={browser.closeTab}
-                  state={browser.state}
+                onAcknowledgeRisk={browser.acknowledgeRisk}
-                  suspended={settingsOpen || searchOpen}
+                onDetectSources={browser.detectSources}
-                  onNavigate={browser.navigate}
+                onImportProfile={browser.importProfile}
-                  onGoBack={browser.goBack}
+              />
-                  onGoForward={browser.goForward}
+            </SidePanel>
-                  onReload={browser.reload}
-                  onNewTab={browser.newTab}
-                  onSelectTab={browser.selectTab}
-                  onCloseTab={browser.closeTab}
-                  onAcknowledgeRisk={browser.acknowledgeRisk}
-                  onDetectSources={browser.detectSources}
-                  onImportProfile={browser.importProfile}
-                />
-              }
-            />
           )}
         </div>
       </main>

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

@@ -1,62 +1,24 @@
-import { useEffect, useRef, type ComponentType, type JSX, type ReactNode } from 'react'
+import { useEffect, useRef, type JSX, type ReactNode } from 'react'
-import {
+import { LuChevronDown, LuGlobe } from 'react-icons/lu'
-  LuChevronDown,
-  LuFileDiff,
-  LuGlobe,
-  LuMessagesSquare,
-  LuSquareTerminal,
-  LuX
-} from 'react-icons/lu'
 
 /**
- * 右侧通用侧边面板（ZCode 式标签页容器）。
+ * 右侧侧边面板（当前承载内置浏览器）。
- * 面板负责：标签栏（收起 / 标签）、空态「打开标签页」宫格、左缘宽度拖拽；
+ * 顶栏为 ZCode 式标签条形态（收起按钮 + 浏览器标签），左缘可拖拽调宽；
- * 各标签的内容由外部传入。标签架构按多类型设计，当前仅开放浏览器，
+ * 后续新增面板类型时，再扩展为多标签结构。
- * 后续新标签在 SIDE_TAB_ORDER 与内容分支里扩展即可。
  */
 
-export type SideTabType = 'assistant' | 'review' | 'terminal' | 'browser'
-
-/** 当前对外开放的标签类型（浏览器）；新标签就绪后加入即可显示 */
-export const SIDE_TAB_ORDER: SideTabType[] = ['browser']
-
-type TabIcon = ComponentType<{ size?: number; className?: string }>
-
-export const SIDE_TAB_META: Record<SideTabType, { title: string; icon: TabIcon }> = {
-  assistant: { title: '辅助对话', icon: LuMessagesSquare },
-  review: { title: '审查', icon: LuFileDiff },
-  terminal: { title: '终端', icon: LuSquareTerminal },
-  browser: { title: '浏览器', icon: LuGlobe }
-}
-
 const PANEL_MIN_WIDTH = 380
 const PANEL_MAX_WIDTH = 760
 
 interface SidePanelProps {
-  tabs: SideTabType[]
-  active: SideTabType | null
   width: number
   onWidthChange: (width: number) => void
-  onSelectTab: (type: SideTabType) => void
-  onCloseTab: (type: SideTabType) => void
-  onOpenTab: (type: SideTabType) => void
-  /** 收起整个面板（标签栏左端的 ˅ 按钮，与标题栏开关等效） */
   onCollapse: () => void
-  /** 浏览器标签的内容 */
+  /** 面板内容（浏览器标签） */
-  browser: ReactNode
+  children: ReactNode
 }
 
-export function SidePanel({
+export function SidePanel({ width, onWidthChange, onCollapse, children }: SidePanelProps): JSX.Element {
-  tabs,
-  active,
-  width,
-  onWidthChange,
-  onSelectTab,
-  onCloseTab,
-  onOpenTab,
-  onCollapse,
-  browser
-}: SidePanelProps): JSX.Element {
   const dragRef = useRef<{ startX: number; startWidth: number } | null>(null)
 
   // 面板宽度拖拽（左边缘把手）
@@ -81,8 +43,6 @@ export function SidePanel({
     dragRef.current = { startX: e.clientX, startWidth: width }
   }
 
-  const current = active ?? tabs[tabs.length - 1] ?? null
-
   return (
     <aside
       className="relative flex h-full shrink-0 flex-col border-l border-zinc-200 bg-zinc-50"
@@ -97,86 +57,24 @@ export function SidePanel({
         aria-orientation="vertical"
       />
 
-      {tabs.length > 0 && (
+      {/* 标签条：收起 + 当前标签 */}
-        <div className="flex h-9 shrink-0 items-center gap-1 border-b border-zinc-200 bg-white px-1.5">
+      <div className="flex h-9 shrink-0 items-center gap-1 border-b border-zinc-200 bg-white px-1.5">
-          <button
+        <button
-            type="button"
+          type="button"
-            aria-label="收起侧边面板"
+          aria-label="收起侧边面板"
-            title="收起侧边面板"
+          title="收起侧边面板"
-            onClick={onCollapse}
+          onClick={onCollapse}
-            className="flex size-7 shrink-0 items-center justify-center rounded text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600"
+          className="flex size-7 shrink-0 items-center justify-center rounded text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600"
-          >
+        >
-            <LuChevronDown size={13} />
+          <LuChevronDown size={13} />
-          </button>
+        </button>
-
+        <div className="flex h-7 shrink-0 items-center gap-1.5 rounded bg-accent-tint px-2 text-[11.5px] text-accent-ink">
-          {tabs.map((type) => {
+          <LuGlobe size={11} />
-            const { title, icon: Icon } = SIDE_TAB_META[type]
+          <span>浏览器</span>
-            const isActive = type === current
-            return (
-              <button
-                key={type}
-                type="button"
-                onClick={() => onSelectTab(type)}
-                className={`group flex h-7 max-w-44 min-w-20 shrink-0 items-center gap-1.5 rounded px-2 text-left text-[11.5px] transition-colors ${
-                  isActive
-                    ? 'bg-accent-tint text-accent-ink'
-                    : 'text-zinc-500 hover:bg-zinc-100 hover:text-zinc-700'
-                }`}
-              >
-                <Icon size={11} className="shrink-0" />
-                <span className="min-w-0 flex-1 truncate">{title}</span>
-                <span
-                  role="button"
-                  tabIndex={-1}
-                  aria-label={`关闭${title}标签`}
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    onCloseTab(type)
-                  }}
-                  className="hidden shrink-0 rounded p-0.5 hover:bg-zinc-200 group-hover:block"
-                >
-                  <LuX size={10} />
-                </span>
-              </button>
-            )
-          })}
-          {/* “+”新增标签菜单随更多标签类型一起回归（当前仅浏览器，无需新增入口） */}
         </div>
-      )}
+      </div>
 
-      {tabs.length === 0 ? (
+      <div className="relative min-h-0 flex-1">{children}</div>
-        <EmptyState onOpen={onOpenTab} />
-      ) : (
-        <div className="relative min-h-0 flex-1">{current === 'browser' ? browser : null}</div>
-      )}
     </aside>
   )
 }
-
-/** 空态：无任何标签时的「打开标签页」宫格（随 SIDE_TAB_ORDER 展示可用标签） */
-function EmptyState({ onOpen }: { onOpen: (type: SideTabType) => void }): JSX.Element {
-  return (
-    <div className="flex h-full min-w-0 flex-1 flex-col items-center justify-center gap-6 px-8">
-      <div className="text-center">
-        <h2 className="text-[16px] font-medium text-zinc-700">打开标签页</h2>
-        <p className="mt-1.5 text-[12px] text-zinc-400">选择要在侧边面板中打开的标签。</p>
-      </div>
-      <div className="grid grid-cols-2 gap-3">
-        {SIDE_TAB_ORDER.map((type) => {
-          const { title, icon: Icon } = SIDE_TAB_META[type]
-          return (
-            <button
-              key={type}
-              type="button"
-              onClick={() => onOpen(type)}
-              className="flex h-[76px] w-[112px] flex-col items-center justify-center gap-2 rounded-xl border border-zinc-200 bg-white text-zinc-500 transition-colors hover:border-accent/40 hover:bg-accent-tint/50 hover:text-accent-ink"
-            >
-              <Icon size={18} />
-              <span className="text-[12px]">{title}</span>
-            </button>
-          )
-        })}
-      </div>
-    </div>
-  )
-}