refactor(web): code review DRY/YAGNI 收敛

manerfan · manerfan · commit 93860b54b105 · 2026-06-20T22:42:02.000+08:00
- 抽 components/ui/ActivateCover，InspectorPane 与 ChatComposer 共用
  会话未激活覆盖层(替代 InspectorPane.ResumeCover 与 ChatComposer 内联块，
  保留 sender-overlay 磨砂遮罩)
- 抽 components/session/inspectorActions 导出 INSPECTOR_ACTIONS，
  空态卡片与「+」下拉菜单共用，消除能力漂移风险
- 删除 InspectorTabKind 死类型与 InspectorTabEntry.kind 单值字段(零消费方)
diff --git a/packages/web/src/components/composer/ChatComposer.tsx b/packages/web/src/components/composer/ChatComposer.tsx
@@ -16,7 +16,7 @@
 
 import { useState, useCallback, useMemo, useRef, useEffect } from 'react'
 import { Button, Tooltip, Select, theme, Typography, Popover, message } from 'antd'
-import { PlusOutlined, PlayCircleOutlined, SwapOutlined, SafetyOutlined, RightOutlined, InboxOutlined } from '@ant-design/icons'
+import { PlusOutlined, SwapOutlined, SafetyOutlined, RightOutlined, InboxOutlined } from '@ant-design/icons'
 import { Sender } from '@ant-design/x'
 import { useTranslation } from 'react-i18next'
 import styled from '@emotion/styled'
@@ -41,6 +41,7 @@ import { MentionDropdown } from './MentionDropdown'
 import { SlashCommandDropdown } from './SlashCommandDropdown'
 import { CommandHintBar } from './CommandHintBar'
 import { ResponsiveActionBar, type ActionItem } from './ResponsiveActionBar'
+import { ActivateCover } from '@/components/ui/ActivateCover'
 import { getPermissionModeColor } from './permissionModeColors'
 import { useHasFinePointer } from '@/core/data/hooks/useMediaQuery'
 
@@ -799,27 +800,12 @@ export function ChatComposer(props: ChatComposerProps) {
 
                 {/* 未激活覆盖层 */}
                 {showInactiveCover && (
-                    <div
+                    <ActivateCover
                         className="sender-overlay"
-                        style={{
-                            position: 'absolute',
-                            inset: 0,
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            borderRadius: 'var(--ant-border-radius)',
-                            zIndex: 10,
-                        }}
-                    >
-                        <Button
-                            type="primary"
-                            icon={<PlayCircleOutlined />}
-                            loading={activatePending}
-                            onClick={onActivate}
-                        >
-                            {t('composer.activate')}
-                        </Button>
-                    </div>
+                        loading={activatePending}
+                        onActivate={onActivate!}
+                        borderRadius="var(--ant-border-radius)"
+                    />
                 )}
 
                 {/* 本地模式覆盖层 */}
diff --git a/packages/web/src/components/session/InspectorEmptyState.tsx b/packages/web/src/components/session/InspectorEmptyState.tsx
@@ -15,52 +15,41 @@
  */
 
 import { useTranslation } from 'react-i18next'
-import { Folder, Terminal, FileSearch } from 'lucide-react'
 import styled from '@emotion/styled'
 import { theme as antTheme } from 'antd'
+import { INSPECTOR_ACTIONS } from './inspectorActions'
 
 interface InspectorEmptyStateProps {
     /** 点「文件」 */
     onOpenFile: () => void
 }
 
-interface ActionItem {
-    key: string
-    icon: React.ReactNode
-    labelKey: string
-    disabled?: boolean
-    onClick?: () => void
-}
-
 /**
  * 空态：居中的卡片行列表（参考 macOS 菜单风格——图标 + 标签，浅灰圆角卡）。
- * 终端/审查 disabled（未支持）。仅「文件」可点。
+ * 动作清单与「+」下拉菜单共用 INSPECTOR_ACTIONS，避免两处能力漂移。
  */
 export function InspectorEmptyState({ onOpenFile }: InspectorEmptyStateProps) {
     const { t } = useTranslation()
     const { token } = antTheme.useToken()
 
-    const items: ActionItem[] = [
-        { key: 'file', icon: <Folder size={18} />, labelKey: 'session.inspector.openFile', onClick: onOpenFile },
-        { key: 'terminal', icon: <Terminal size={18} />, labelKey: 'session.inspector.terminal', disabled: true },
-        { key: 'review', icon: <FileSearch size={18} />, labelKey: 'session.inspector.review', disabled: true },
-    ]
-
     return (
         <Wrap>
             <List role="list">
-                {items.map((item) => (
-                    <Row
-                        key={item.key}
-                        type="button"
-                        disabled={item.disabled}
-                        onClick={item.disabled ? undefined : item.onClick}
-                        $token={token}
-                    >
-                        <span className="icon">{item.icon}</span>
-                        <span className="label">{t(item.labelKey)}</span>
-                    </Row>
-                ))}
+                {INSPECTOR_ACTIONS.map((item) => {
+                    const { Icon } = item
+                    return (
+                        <Row
+                            key={item.key}
+                            type="button"
+                            disabled={item.disabled}
+                            onClick={item.disabled ? undefined : onOpenFile}
+                            $token={token}
+                        >
+                            <span className="icon"><Icon size={18} /></span>
+                            <span className="label">{t(item.labelKey)}</span>
+                        </Row>
+                    )
+                })}
             </List>
         </Wrap>
     )
diff --git a/packages/web/src/components/session/InspectorPane.tsx b/packages/web/src/components/session/InspectorPane.tsx
@@ -19,10 +19,12 @@ import { Layout, Tabs, Button, Tooltip, Dropdown } from 'antd'
 import type { MenuProps } from 'antd'
 import { useTranslation } from 'react-i18next'
 import styled from '@emotion/styled'
-import { PanelRightClose, Folder, Terminal, FileSearch, Maximize, Minimize, Plus, PlayCircle } from 'lucide-react'
+import { PanelRightClose, Folder, FileSearch, Maximize, Minimize, Plus } from 'lucide-react'
 import FileTreeView from '@/components/files/FileTreeView'
 import FileContentView from '@/components/files/FileContentView'
+import { ActivateCover } from '@/components/ui/ActivateCover'
 import { InspectorEmptyState } from './InspectorEmptyState'
+import { INSPECTOR_ACTIONS } from './inspectorActions'
 import { useIsMobile } from '@/core/data/hooks/useMediaQuery'
 import { useSessionActions } from '@/core/data/hooks/mutations/useSessionActions'
 import { useWorkspaceStore, type InspectorTabEntry } from '@/core/data/stores/workspaceStore'
@@ -131,7 +133,7 @@ export function InspectorPane({ sessionId, active = true }: InspectorPaneProps)
     if (!active) {
         return (
             <Layout style={{ height: '100%', position: 'relative' }}>
-                <ResumeCover loading={isResumePending} onResume={() => resumeSession()} label={t('composer.activate')} />
+                <ActivateCover loading={isResumePending} onActivate={() => resumeSession()} />
                 <div style={{ position: 'absolute', top: 4, right: 8, zIndex: 2 }}>{rightChrome}</div>
             </Layout>
         )
@@ -149,16 +151,17 @@ export function InspectorPane({ sessionId, active = true }: InspectorPaneProps)
 
     if (!everExpanded) return <Layout style={{ height: '100%' }} />
 
-    const addMenuItems: MenuProps['items'] = [
-        {
-            key: 'file',
-            icon: <Folder size={14} />,
-            label: t('session.inspector.openFile'),
-            onClick: () => openFileTreeTab(sessionId),
-        },
-        { key: 'terminal', icon: <Terminal size={14} />, label: t('session.inspector.terminal'), disabled: true },
-        { key: 'review', icon: <FileSearch size={14} />, label: t('session.inspector.review'), disabled: true },
-    ]
+    // 「+」下拉菜单：与空态卡片共用 INSPECTOR_ACTIONS，仅「文件」可点
+    const addMenuItems: MenuProps['items'] = INSPECTOR_ACTIONS.map((action) => {
+        const { Icon } = action
+        return {
+            key: action.key,
+            icon: <Icon size={14} />,
+            label: t(action.labelKey),
+            disabled: action.disabled,
+            onClick: action.disabled ? undefined : () => openFileTreeTab(sessionId),
+        }
+    })
 
     const renderTabContent = (tab: InspectorTabEntry): ReactNode => {
         if (tab.mode === 'file' && tab.filePath) {
@@ -232,24 +235,6 @@ export function InspectorPane({ sessionId, active = true }: InspectorPaneProps)
     )
 }
 
-/** session 离线覆盖层：居中「恢复会话」按钮，覆盖整个检视面板内容区。 */
-function ResumeCover({ loading, onResume, label }: {
-    loading: boolean
-    onResume: () => void
-    label: string
-}) {
-    return (
-        <div style={{
-            position: 'absolute', inset: 0, zIndex: 1,
-            display: 'flex', alignItems: 'center', justifyContent: 'center',
-        }}>
-            <Button type="primary" icon={<PlayCircle size={18} />} loading={loading} onClick={onResume}>
-                {label}
-            </Button>
-        </div>
-    )
-}
-
 /** 右上角 chrome：最大化/恢复 + 收起。空态与 Tab 态共用。 */
 function RightChrome({
     isMobile,
diff --git a/packages/web/src/components/session/inspectorActions.tsx b/packages/web/src/components/session/inspectorActions.tsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright Maner·Fan
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Folder, Terminal, FileSearch, type LucideIcon } from 'lucide-react'
+
+/** 检视面板可用动作的唯一真相源：空态卡片列表与「+」下拉菜单共同消费。 */
+export interface InspectorActionDescriptor {
+    key: 'file' | 'terminal' | 'review'
+    /** lucide 图标组件（调用方按需传 size） */
+    Icon: LucideIcon
+    /** 文案 i18n key */
+    labelKey: string
+    /** 暂未支持的动作置灰（终端/审查） */
+    disabled: boolean
+}
+
+/**
+ * 检视面板动作清单。新增/启用某项能力时只改这里，
+ * 空态卡片与「+」下拉菜单自动一致，避免两处能力漂移。
+ */
+export const INSPECTOR_ACTIONS: readonly InspectorActionDescriptor[] = [
+    { key: 'file', Icon: Folder, labelKey: 'session.inspector.openFile', disabled: false },
+    { key: 'terminal', Icon: Terminal, labelKey: 'session.inspector.terminal', disabled: true },
+    { key: 'review', Icon: FileSearch, labelKey: 'session.inspector.review', disabled: true },
+]
diff --git a/packages/web/src/components/ui/ActivateCover.tsx b/packages/web/src/components/ui/ActivateCover.tsx
@@ -0,0 +1,68 @@
+/*
+ * Copyright Maner·Fan
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Button } from 'antd'
+import { PlayCircle } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+
+interface ActivateCoverProps {
+    /** 点击「恢复/激活」回调 */
+    onActivate: () => void
+    /** 恢复请求进行中 */
+    loading?: boolean
+    /** 按钮文案的 i18n key，默认 composer.activate */
+    labelKey?: string
+    /** 覆盖层 zIndex，默认 10 */
+    zIndex?: number
+    /** 覆盖层圆角，默认 0 */
+    borderRadius?: string | number
+    /** 透传 className（如磨砂遮罩 sender-overlay） */
+    className?: string
+}
+
+/**
+ * 会话未激活（CLI runner 未连接）时的覆盖层：铺满父容器、居中「恢复会话」按钮。
+ * 聊天输入框与检视面板共用，避免两处各自维护样式/loading/文案。
+ * 父容器需 position: relative。
+ */
+export function ActivateCover({
+    onActivate,
+    loading = false,
+    labelKey = 'composer.activate',
+    zIndex = 10,
+    borderRadius = 0,
+    className,
+}: ActivateCoverProps) {
+    const { t } = useTranslation()
+    return (
+        <div
+            className={className}
+            style={{
+                position: 'absolute',
+                inset: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius,
+                zIndex,
+            }}
+        >
+            <Button type="primary" icon={<PlayCircle size={18} />} loading={loading} onClick={onActivate}>
+                {t(labelKey)}
+            </Button>
+        </div>
+    )
+}
diff --git a/packages/web/src/core/data/stores/workspaceStore.ts b/packages/web/src/core/data/stores/workspaceStore.ts
@@ -17,13 +17,9 @@
 import { create } from 'zustand'
 import { uuid } from '@/core/lib/uuid'
 
-/** tab 类型；'terminal' | 'review' 暂不接入（占位） */
-export type InspectorTabKind = 'files'
-
 /** 单个 tab：文件树视图或已打开的文件 */
 export interface InspectorTabEntry {
     id: string
-    kind: 'files'
     mode: 'tree' | 'file'
     /** mode='file'：相对路径（去重 key + tooltip） */
     filePath?: string
@@ -123,7 +119,7 @@ export const useWorkspaceStore = create<WorkspaceState>((set, get) => ({
                 next.set(sessionId, { ...cur, activeTabId: existedTree.id })
                 return { sessions: next }
             }
-            const entry: InspectorTabEntry = { id: uuid(), kind: 'files', mode: 'tree' }
+            const entry: InspectorTabEntry = { id: uuid(), mode: 'tree' }
             const tabs = [...cur.tabs, entry]
             const next = new Map(state.sessions)
             next.set(sessionId, { ...cur, tabs, activeTabId: entry.id })
