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

- 将 AI 助手入口从侧栏工具区迁移为主内容区右侧贴边标签
- 调整打开态贴边标签锚点到面板左外沿，避免遮挡头部操作区
- 重排侧栏顶部工具布局，恢复四项按钮的稳定网格结构
- 新增 aiEntryLayout 布局辅助与回归测试，覆盖打开态附着位置

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');
+  });
+});

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,
+  };
+};