feat(input-area): 添加拖拽调整文本区域大小功能

Licoy · Licoy · commit 255a0d6a3060 · 2026-04-03T15:30:10.000+08:00
diff --git a/src/components/chat/InputArea.tsx b/src/components/chat/InputArea.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import { Button, Tooltip, App, theme, Dropdown, Tag, Popover, Checkbox, Badge } from 'antd';
 import type { MenuProps } from 'antd';
-import { Paperclip, Trash2, Mic, Eraser, Scissors, Globe, Brain, BrainCog, Plug, SlidersHorizontal, ArrowUp, Square, Check, Zap, ZapOff, Gauge, Shrink, Upload, LayoutGrid, X, BookOpen } from 'lucide-react';
+import { Paperclip, Trash2, Mic, Eraser, Scissors, Globe, Brain, BrainCog, Plug, SlidersHorizontal, ArrowUp, Square, Check, Zap, ZapOff, Gauge, Shrink, Upload, LayoutGrid, X, BookOpen, GripHorizontal } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useConversationStore, useProviderStore, useSettingsStore, useSearchStore, useMcpStore, useMemoryStore, useKnowledgeStore } from '@/stores';
 import { useUIStore } from '@/stores/uiStore';
@@ -58,6 +58,15 @@ export function InputArea() {
     useConversationStore.getState().activeConversationId ?? null
   );
 
+  // Drag-to-resize state: userMinHeight controls the minimum visible height of the textarea
+  const INITIAL_MIN_HEIGHT = 44;
+  const ABSOLUTE_MAX_HEIGHT = 600;
+  const [userMinHeight, setUserMinHeight] = useState(INITIAL_MIN_HEIGHT);
+  const userMinHeightRef = useRef(userMinHeight);
+  userMinHeightRef.current = userMinHeight;
+  const dragStateRef = useRef<{ startY: number; startH: number } | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
   // Multi-model companion state
   const [companionModels, setCompanionModels] = useState<Array<{ providerId: string; modelId: string }>>([]);
   const [multiModelOpen, setMultiModelOpen] = useState(false);
@@ -583,7 +592,8 @@ export function InputArea() {
         const textarea = textareaRef.current;
         if (textarea) {
           textarea.style.height = 'auto';
-          textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+          const desired = Math.max(textarea.scrollHeight, userMinHeightRef.current);
+          textarea.style.height = Math.min(desired, ABSOLUTE_MAX_HEIGHT) + 'px';
         }
       });
     }
@@ -601,7 +611,8 @@ export function InputArea() {
       if (!textarea) return;
       textarea.focus();
       textarea.style.height = 'auto';
-      textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+      const desired = Math.max(textarea.scrollHeight, userMinHeightRef.current);
+      textarea.style.height = Math.min(desired, ABSOLUTE_MAX_HEIGHT) + 'px';
     });
   }, [messages, streaming]);
 
@@ -712,12 +723,47 @@ export function InputArea() {
     [handleSend],
   );
 
-  // Auto-resize textarea
+  // Auto-resize textarea: height = max(userMinHeight, contentHeight), capped at ABSOLUTE_MAX
+  const autoResizeTextarea = useCallback((el: HTMLTextAreaElement) => {
+    el.style.height = 'auto';
+    const desired = Math.max(el.scrollHeight, userMinHeightRef.current);
+    el.style.height = Math.min(desired, ABSOLUTE_MAX_HEIGHT) + 'px';
+  }, []);
+
   const handleInput = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setValue(e.target.value);
-    const el = e.target;
-    el.style.height = 'auto';
-    el.style.height = Math.min(el.scrollHeight, 200) + 'px';
+    autoResizeTextarea(e.target);
+  }, [autoResizeTextarea]);
+
+  // Drag-to-resize: changes userMinHeight so the textarea grows even with short content
+  const handleResizeMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    const textarea = textareaRef.current;
+    const startHeight = textarea ? textarea.offsetHeight : userMinHeightRef.current;
+    dragStateRef.current = { startY: e.clientY, startH: startHeight };
+    const onMouseMove = (ev: MouseEvent) => {
+      if (!dragStateRef.current) return;
+      const delta = dragStateRef.current.startY - ev.clientY;
+      const newH = Math.max(INITIAL_MIN_HEIGHT, Math.min(ABSOLUTE_MAX_HEIGHT, dragStateRef.current.startH + delta));
+      setUserMinHeight(newH);
+      userMinHeightRef.current = newH;
+      if (textarea) {
+        textarea.style.height = 'auto';
+        const desired = Math.max(textarea.scrollHeight, newH);
+        textarea.style.height = Math.min(desired, ABSOLUTE_MAX_HEIGHT) + 'px';
+      }
+    };
+    const onMouseUp = () => {
+      dragStateRef.current = null;
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+    document.body.style.cursor = 'ns-resize';
+    document.body.style.userSelect = 'none';
   }, []);
 
   // Listen for Escape to close voice overlay
@@ -778,7 +824,8 @@ export function InputArea() {
         if (!textarea) return;
         textarea.focus();
         textarea.style.height = 'auto';
-        textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+        const desired = Math.max(textarea.scrollHeight, userMinHeightRef.current);
+        textarea.style.height = Math.min(desired, ABSOLUTE_MAX_HEIGHT) + 'px';
       });
     };
     window.addEventListener('aqbot:fill-input', onFillInput);
@@ -821,13 +868,28 @@ export function InputArea() {
 
       {/* Main input container */}
       <div
+        ref={containerRef}
         style={{
           border: '1px solid var(--border-color)',
           borderRadius: 16,
           backgroundColor: token.colorBgContainer,
           overflow: 'hidden',
         }}
       >
+        {/* Drag-to-resize handle */}
+        <div
+          onMouseDown={handleResizeMouseDown}
+          style={{
+            height: 10,
+            cursor: 'ns-resize',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+          }}
+        >
+          <GripHorizontal size={14} style={{ color: token.colorTextQuaternary, opacity: 0.5 }} />
+        </div>
         {/* Companion model tags */}
         {companionModels.length > 0 && (
           <div className="flex flex-wrap gap-1.5 px-3 pt-3 pb-1">
@@ -893,14 +955,15 @@ export function InputArea() {
             border: 'none',
             outline: 'none',
             resize: 'none',
-            padding: '14px 16px 8px',
+            padding: '4px 16px 8px',
             fontSize: token.fontSize,
             lineHeight: 1.6,
             backgroundColor: 'transparent',
             color: token.colorText,
             fontFamily: 'inherit',
-            minHeight: 44,
-            maxHeight: 200,
+            minHeight: userMinHeight,
+            maxHeight: ABSOLUTE_MAX_HEIGHT,
+            overflowY: 'auto',
           }}
         />
 
diff --git a/src/components/settings/SettingsSidebar.tsx b/src/components/settings/SettingsSidebar.tsx
@@ -1,5 +1,5 @@
 import { Menu, theme } from 'antd';
-import { Cloud, Settings, Palette, Globe, Zap, Database, Info, Search, Plug, CloudUpload, Bot, HardDrive, MessageSquare } from 'lucide-react';
+import { Cloud, Settings, Palette, Globe, Zap, Database, Info, Search, Plug, CloudUpload, Bot, HardDrive, MessageSquare, ArrowLeft } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useUIStore } from '@/stores';
 import type { SettingsSection } from '@/types';
@@ -41,6 +41,7 @@ export function SettingsSidebar() {
   const { token } = theme.useToken();
   const settingsSection = useUIStore((s) => s.settingsSection);
   const setSettingsSection = useUIStore((s) => s.setSettingsSection);
+  const exitSettings = useUIStore((s) => s.exitSettings);
 
   const items = SECTION_KEYS.map((key) => ({
     key,
@@ -49,14 +50,54 @@ export function SettingsSidebar() {
   }));
 
   return (
-    <div className="h-full pt-1" data-os-scrollbar style={{ backgroundColor: token.colorBgContainer, overflowY: 'auto' }}>
-      <Menu
-        mode="inline"
-        selectedKeys={[settingsSection]}
-        items={items}
-        style={{ borderInlineEnd: 'none' }}
-        onClick={({ key }) => setSettingsSection(key as SettingsSection)}
-      />
+    <div className="h-full flex flex-col" data-os-scrollbar style={{ backgroundColor: token.colorBgContainer, overflowY: 'auto' }}>
+      {/* Back button */}
+      <div
+        className="flex items-center gap-2 cursor-pointer"
+        style={{
+          color: token.colorTextSecondary,
+          borderBottom: `1px solid ${token.colorBorderSecondary}`,
+          flexShrink: 0,
+          paddingLeft: 26,
+          paddingRight: 16,
+          paddingTop: 12,
+          paddingBottom: 12,
+        }}
+        onClick={exitSettings}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.color = token.colorText;
+          e.currentTarget.style.backgroundColor = token.colorFillSecondary;
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.color = token.colorTextSecondary;
+          e.currentTarget.style.backgroundColor = 'transparent';
+        }}
+      >
+        <ArrowLeft size={16} />
+        <span style={{ fontSize: 14 }}>{t('common.back', '返回')}</span>
+        <span
+          style={{
+            fontSize: 11,
+            color: token.colorTextQuaternary,
+            border: `1px solid ${token.colorBorderSecondary}`,
+            borderRadius: 4,
+            padding: '1px 6px',
+            marginLeft: 4,
+            lineHeight: '16px',
+          }}
+        >
+          Esc
+        </span>
+      </div>
+      <div className="flex-1 pt-1" style={{ overflowY: 'auto' }}>
+        <Menu
+          mode="inline"
+          selectedKeys={[settingsSection]}
+          items={items}
+          style={{ borderInlineEnd: 'none' }}
+          onClick={({ key }) => setSettingsSection(key as SettingsSection)}
+        />
+      </div>
     </div>
   );
 }
