✨ feat(ai-entry): 优化AI助手贴边入口交互体验

- 将 AI 助手入口从侧栏工具区迁移为主内容区右侧贴边标签 - 调整打开态贴边标签锚点到面板左外沿，避免遮挡头部操作区 - 重排侧栏顶部工具布局，恢复四项按钮的稳定网格结构 - 新增 aiEntryLayout 布局辅助与回归测试，覆盖打开态附着位置
2026-06-05 05:59:43 +08:00 · 2026-03-28 16:48:06 +08:00
parent 09d013f27d
commit a7bee7f3b6
6 changed files with 520 additions and 20 deletions
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -28,6 +28,13 @@ import {
  isShortcutMatch,
  normalizeShortcutCombo,
 } from './utils/shortcuts';
+import {
+  SIDEBAR_UTILITY_ITEM_KEYS,
+  resolveAIEntryPlacement,
+  resolveAIEdgeHandleAttachment,
+  resolveAIEdgeHandleDockStyle,
+  resolveAIEdgeHandleStyle,
+} from './utils/aiEntryLayout';
 import { ConfigureGlobalProxy, SetMacNativeWindowControls, SetWindowTranslucency } from '../wailsjs/go/app/App';
 import './App.css';

@@ -1125,6 +1132,61 @@ function App() {
  const [capturingShortcutAction, setCapturingShortcutAction] = useState<ShortcutAction | null>(null);
  const [isProxyModalOpen, setIsProxyModalOpen] = useState(false);
  const [isAISettingsOpen, setIsAISettingsOpen] = useState(false);
+  const aiEntryPlacement = resolveAIEntryPlacement();
+  const aiEdgeHandleAttachment = resolveAIEdgeHandleAttachment(aiPanelVisible);
+  const aiEdgeHandleDockStyle = useMemo(
+      () => resolveAIEdgeHandleDockStyle(aiEdgeHandleAttachment),
+      [aiEdgeHandleAttachment],
+  );
+  const aiEdgeHandleStyle = useMemo(() => (
+      resolveAIEdgeHandleStyle({
+          darkMode,
+          aiPanelVisible,
+          effectiveUiScale,
+      })
+  ), [aiPanelVisible, darkMode, effectiveUiScale]);
+  const sidebarUtilityItems = useMemo(() => {
+      const itemMap = {
+          tools: {
+              key: 'tools',
+              title: '工具',
+              icon: <ToolOutlined />,
+              onClick: () => setIsToolsModalOpen(true),
+          },
+          proxy: {
+              key: 'proxy',
+              title: '代理',
+              icon: <GlobalOutlined />,
+              onClick: () => setIsProxyModalOpen(true),
+          },
+          theme: {
+              key: 'theme',
+              title: '主题',
+              icon: <SkinOutlined />,
+              onClick: () => setIsThemeModalOpen(true),
+          },
+          about: {
+              key: 'about',
+              title: '关于',
+              icon: <InfoCircleOutlined />,
+              onClick: () => setIsAboutOpen(true),
+          },
+      } as const;
+
+      return SIDEBAR_UTILITY_ITEM_KEYS.map((key) => itemMap[key]);
+  }, []);
+  const renderAIEdgeHandle = () => (
+      <Tooltip title="AI 助手">
+          <Button
+              type="text"
+              icon={<RobotOutlined />}
+              onClick={toggleAIPanel}
+              style={aiEdgeHandleStyle}
+          >
+              AI
+          </Button>
+      </Tooltip>
+  );


  // Log Panel: 最小高度按“工具栏 + 1 条日志行（微增）”限制
@@ -1634,24 +1696,12 @@ function App() {
          >
            <div style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
                <div style={{ padding: `12px ${sidebarHorizontalPadding}px 8px`, borderBottom: 'none', display: 'flex', alignItems: 'center', flexShrink: 0 }}>
-                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
-                        <Tooltip title="工具"><Button type="text" icon={<ToolOutlined />} style={utilityButtonStyle} onClick={() => setIsToolsModalOpen(true)} /></Tooltip>
-                        <Tooltip title="代理"><Button type="text" icon={<GlobalOutlined />} style={utilityButtonStyle} onClick={() => setIsProxyModalOpen(true)} /></Tooltip>
-                        <Tooltip title="主题"><Button type="text" icon={<SkinOutlined />} style={utilityButtonStyle} onClick={() => setIsThemeModalOpen(true)} /></Tooltip>
-                        <Tooltip title="关于"><Button type="text" icon={<InfoCircleOutlined />} style={utilityButtonStyle} onClick={() => setIsAboutOpen(true)} /></Tooltip>
-                        <div style={{ width: 1, height: 16, background: 'rgba(128,128,128,0.2)', margin: '0 4px' }} />
-                        <Tooltip title="AI 助手">
-                            <Button
-                                type="text"
-                                icon={<RobotOutlined />}
-                                onClick={toggleAIPanel}
-                                style={{
-                                    ...utilityButtonStyle,
-                                    color: aiPanelVisible ? (darkMode ? '#ffd666' : '#1677ff') : utilityButtonStyle.color,
-                                    background: aiPanelVisible ? (darkMode ? 'rgba(255,214,102,0.16)' : 'rgba(24,144,255,0.12)') : 'transparent'
-                                }}
-                            />
-                        </Tooltip>
+                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 8, width: '100%' }}>
+                        {sidebarUtilityItems.map((item) => (
+                            <Tooltip key={item.key} title={item.title}>
+                                <Button type="text" icon={item.icon} style={utilityButtonStyle} onClick={item.onClick} />
+                            </Tooltip>
+                        ))}
                    </div>
                </div>
                <div style={{ padding: `0 ${sidebarHorizontalPadding}px 10px`, borderBottom: 'none', display: 'flex', alignItems: 'center', flexShrink: 0 }}>
@@ -1760,12 +1810,24 @@ function App() {
            />
          </Sider>
           <Content style={{ background: isLogPanelOpen ? bgContent : 'transparent', overflow: 'hidden', display: 'flex', flexDirection: 'column', minWidth: 0, flex: 1 }}>
-             <div style={{ flex: 1, minHeight: 0, minWidth: 0, overflow: 'hidden', display: 'flex', flexDirection: 'row' }}>
+             <div style={{ flex: 1, minHeight: 0, minWidth: 0, overflow: 'hidden', display: 'flex', flexDirection: 'row', position: 'relative' }}>
               <div style={{ flex: 1, minHeight: 0, minWidth: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column', background: bgContent, marginBottom: isLogPanelOpen ? 8 : 0, borderRadius: isLogPanelOpen ? windowCornerRadius : 0, clipPath: isLogPanelOpen ? `inset(0 round ${windowCornerRadius}px)` : 'none' }}>
                  <TabManager />
               </div>
+               {aiEntryPlacement === 'content-edge' && aiEdgeHandleAttachment === 'content-shell' && (
+                  <div style={aiEdgeHandleDockStyle}>
+                      {renderAIEdgeHandle()}
+                  </div>
+               )}
               {aiPanelVisible && (
-                  <AIChatPanel darkMode={darkMode} bgColor={bgContent} onClose={() => setAIPanelVisible(false)} onOpenSettings={() => setIsAISettingsOpen(true)} overlayTheme={overlayTheme} />
+                  <div style={{ position: 'relative', display: 'flex', flexShrink: 0, overflow: 'visible' }}>
+                      {aiEntryPlacement === 'content-edge' && aiEdgeHandleAttachment === 'panel-shell' && (
+                          <div style={aiEdgeHandleDockStyle}>
+                              {renderAIEdgeHandle()}
+                          </div>
+                      )}
+                      <AIChatPanel darkMode={darkMode} bgColor={bgContent} onClose={() => setAIPanelVisible(false)} onOpenSettings={() => setIsAISettingsOpen(true)} overlayTheme={overlayTheme} />
+                  </div>
               )}
             </div>
             {isLogPanelOpen && (
--- a/frontend/src/utils/aiEntryLayout.test.ts
+++ b/frontend/src/utils/aiEntryLayout.test.ts
@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest';
+import {
+  SIDEBAR_UTILITY_ITEM_KEYS,
+  resolveAIEntryPlacement,
+  resolveAIEdgeHandleAttachment,
+  resolveAIEdgeHandleDockStyle,
+  resolveAIEdgeHandleStyle,
+} from './aiEntryLayout';
+
+describe('ai entry layout', () => {
+  it('keeps the sidebar utility group free of the AI entry', () => {
+    expect(SIDEBAR_UTILITY_ITEM_KEYS).toEqual(['tools', 'proxy', 'theme', 'about']);
+  });
+
+  it('anchors the AI entry to the content edge', () => {
+    expect(resolveAIEntryPlacement()).toBe('content-edge');
+  });
+
+  it('attaches the closed handle to the content shell', () => {
+    expect(resolveAIEdgeHandleAttachment(false)).toBe('content-shell');
+  });
+
+  it('attaches the open handle to the panel shell', () => {
+    expect(resolveAIEdgeHandleAttachment(true)).toBe('panel-shell');
+  });
+
+  it('keeps the closed handle docked on the content edge', () => {
+    expect(resolveAIEdgeHandleDockStyle('content-shell')).toMatchObject({
+      position: 'absolute',
+      top: 16,
+      right: 0,
+      zIndex: 12,
+    });
+  });
+
+  it('keeps the open handle outside the panel shell to avoid header overlap', () => {
+    expect(resolveAIEdgeHandleDockStyle('panel-shell')).toMatchObject({
+      position: 'absolute',
+      top: 16,
+      right: '100%',
+      zIndex: 12,
+    });
+  });
+
+  it('uses the attached active appearance when the AI panel is open', () => {
+    const style = resolveAIEdgeHandleStyle({
+      darkMode: true,
+      aiPanelVisible: true,
+      effectiveUiScale: 1,
+    });
+
+    expect(style.color).toBe('#ffd666');
+    expect(style.background).toBe('rgba(255,214,102,0.12)');
+    expect(style.borderRadius).toBe('10px 0 0 10px');
+    expect(style.borderRight).toBe('none');
+    expect(style.height).toBe(24);
+  });
+
+  it('uses the subdued attached appearance when the AI panel is closed', () => {
+    const style = resolveAIEdgeHandleStyle({
+      darkMode: false,
+      aiPanelVisible: false,
+      effectiveUiScale: 1,
+    });
+
+    expect(style.color).toBe('rgba(22,32,51,0.82)');
+    expect(style.background).toBe('rgba(15,23,42,0.04)');
+    expect(style.paddingInline).toBe(8);
+    expect(style.borderRadius).toBe('10px 0 0 10px');
+  });
+});
--- a/frontend/src/utils/aiEntryLayout.ts
+++ b/frontend/src/utils/aiEntryLayout.ts
@@ -0,0 +1,59 @@
+import type { CSSProperties } from 'react';
+
+export const SIDEBAR_UTILITY_ITEM_KEYS = ['tools', 'proxy', 'theme', 'about'] as const;
+
+export type AIEntryPlacement = 'content-edge';
+export type AIEdgeHandleAttachment = 'content-shell' | 'panel-shell';
+
+export interface ResolveAIEdgeHandleStyleInput {
+  darkMode: boolean;
+  aiPanelVisible: boolean;
+  effectiveUiScale: number;
+}
+
+export const resolveAIEntryPlacement = (): AIEntryPlacement => 'content-edge';
+
+export const resolveAIEdgeHandleAttachment = (
+  aiPanelVisible: boolean,
+): AIEdgeHandleAttachment => (aiPanelVisible ? 'panel-shell' : 'content-shell');
+
+export const resolveAIEdgeHandleDockStyle = (
+  attachment: AIEdgeHandleAttachment,
+): CSSProperties => ({
+  position: 'absolute',
+  top: 16,
+  right: attachment === 'panel-shell' ? '100%' : 0,
+  zIndex: 12,
+});
+
+export const resolveAIEdgeHandleStyle = ({
+  darkMode,
+  aiPanelVisible,
+  effectiveUiScale,
+}: ResolveAIEdgeHandleStyleInput): CSSProperties => {
+  const inactiveColor = darkMode ? 'rgba(255,255,255,0.86)' : 'rgba(22,32,51,0.82)';
+  const inactiveBackground = darkMode ? 'rgba(255,255,255,0.04)' : 'rgba(15,23,42,0.04)';
+  const inactiveBorder = darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.08)';
+
+  return {
+    height: Math.max(24, Math.round(24 * effectiveUiScale)),
+    paddingInline: Math.max(8, Math.round(8 * effectiveUiScale)),
+    borderRadius: '10px 0 0 10px',
+    border: `1px solid ${aiPanelVisible ? (darkMode ? 'rgba(255,214,102,0.22)' : 'rgba(24,144,255,0.18)') : inactiveBorder}`,
+    borderRight: 'none',
+    background: aiPanelVisible ? (darkMode ? 'rgba(255,214,102,0.12)' : 'rgba(24,144,255,0.10)') : inactiveBackground,
+    color: aiPanelVisible ? (darkMode ? '#ffd666' : '#1677ff') : inactiveColor,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: Math.max(4, Math.round(4 * effectiveUiScale)),
+    fontSize: Math.max(12, Math.round(12 * effectiveUiScale)),
+    fontWeight: 600,
+    lineHeight: 1,
+    boxShadow: 'none',
+    backdropFilter: 'none',
+    WebkitBackdropFilter: 'none',
+    whiteSpace: 'nowrap',
+    flexShrink: 0,
+  };
+};