Просмотр исходного кода

fix(ui): 修复AI大纲输入框底部溢出,添加overflow-hidden和shrink-0约束

Mochocyang 3 месяцев назад
Родитель
Сommit
c3d350c667
2 измененных файлов с 39 добавлено и 37 удалено
  1. 4 4
      src/components/chat/chat-input.tsx
  2. 35 33
      src/components/sources/outline-chat-panel.tsx

+ 4 - 4
src/components/chat/chat-input.tsx

@@ -302,7 +302,7 @@ export function ChatInput({ onSend, onStop, isStreaming, placeholder, leftContro
       : "拖动调整输入框高度,双击重置"
 
   return (
-    <div ref={rootRef} className="border-t px-3 pt-2 pb-0">
+    <div ref={rootRef} className="border-t px-3 pt-1.5 pb-0">
       <div className="rounded-2xl border bg-background shadow-sm overflow-hidden flex flex-col">
         <div
           role="separator"
@@ -314,7 +314,7 @@ export function ChatInput({ onSend, onStop, isStreaming, placeholder, leftContro
         >
           <span className={`h-0.5 w-10 rounded-full transition-colors ${handleBarColor}`} />
         </div>
-        <div className="px-4 pt-2">
+        <div className="px-3 pt-1.5">
           <textarea
             ref={textareaRef}
             value={value}
@@ -324,11 +324,11 @@ export function ChatInput({ onSend, onStop, isStreaming, placeholder, leftContro
             placeholder={placeholder ?? "输入消息,Enter 发送,Shift+Enter 换行"}
             disabled={isStreaming}
             rows={1}
-            className="w-full resize-none bg-transparent px-0 py-2 text-sm placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+            className="w-full resize-none bg-transparent px-0 py-1.5 text-sm placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
             style={{ height: inputHeight, maxHeight: inputHeight, overflowY: "auto" }}
           />
         </div>
-        <div className="flex items-center justify-between border-t px-3 py-2.5 gap-2">
+        <div className="flex items-center justify-between border-t px-3 py-2 gap-2">
           {leftToolbarContent ? (
             <div className="flex items-center gap-2 min-w-0 overflow-x-auto">
               {leftToolbarContent}

+ 35 - 33
src/components/sources/outline-chat-panel.tsx

@@ -554,7 +554,7 @@ export function OutlineChatPanel({ onClose }: { onClose: () => void }) {
   }, [project])
 
   return (
-    <div className="flex h-full flex-col border-border bg-background">
+    <div className="flex h-full flex-col overflow-hidden border-border bg-background">
       {/* Header with conversation tabs */}
       <div className="flex items-center gap-1 border-b px-2 py-1.5 overflow-x-auto">
         <button
@@ -634,7 +634,7 @@ export function OutlineChatPanel({ onClose }: { onClose: () => void }) {
       </div>
 
       {/* Input */}
-      <div className="border-t px-3 py-2">
+      <div className="shrink-0 border-t px-3 py-2">
         <div className="mb-2 flex flex-wrap gap-1.5">
           {OUTLINE_SECTION_GENERATION_CONFIGS.map((config) => (
             <button
@@ -649,37 +649,39 @@ export function OutlineChatPanel({ onClose }: { onClose: () => void }) {
           ))}
         </div>
       </div>
-      <ChatInput
-        onSend={(text) => void handleSend(text)}
-        onStop={handleStop}
-        isStreaming={isStreaming}
-        placeholder="输入关于大纲的问题..."
-        value={inputValue}
-        onChange={setInputValue}
-        leftControls={
-          <TooltipProvider delay={200}>
-            <div className="flex items-center gap-2 flex-nowrap overflow-x-auto">
-              <ChatDockControls />
-            </div>
-          </TooltipProvider>
-        }
-        rightControls={
-          hasAvailableModels ? (
-            <ChatModelSelector
-              value={localModelId}
-              onChange={(value) => {
-                setLocalModelId(value)
-                if (activeConversationId) {
-                  setConversationModel(activeConversationId, value)
-                }
-              }}
-              disabled={isStreaming}
-            />
-          ) : (
-            <p className="text-xs text-destructive">请先在「设置 → 大语言模型」中添加并启用一个模型。</p>
-          )
-        }
-      />
+      <div className="shrink-0">
+        <ChatInput
+          onSend={(text) => void handleSend(text)}
+          onStop={handleStop}
+          isStreaming={isStreaming}
+          placeholder="输入关于大纲的问题..."
+          value={inputValue}
+          onChange={setInputValue}
+          leftControls={
+            <TooltipProvider delay={200}>
+              <div className="flex items-center gap-2 flex-nowrap overflow-x-auto">
+                <ChatDockControls />
+              </div>
+            </TooltipProvider>
+          }
+          rightControls={
+            hasAvailableModels ? (
+              <ChatModelSelector
+                value={localModelId}
+                onChange={(value) => {
+                  setLocalModelId(value)
+                  if (activeConversationId) {
+                    setConversationModel(activeConversationId, value)
+                  }
+                }}
+                disabled={isStreaming}
+              />
+            ) : (
+              <p className="text-xs text-destructive">请先在「设置 → 大语言模型」中添加并启用一个模型。</p>
+            )
+          }
+        />
+      </div>
     </div>
   )
 }