refactor: 对话输入框响应式布局重构，支持水平/垂直布局自动切换

2026-04-10 17:46:56 +08:00
parent 3f815db0b2
commit 6e73e6a297
8 changed files with 448 additions and 56 deletions
--- a/src/pages/console/ChatPage.jsx
+++ b/src/pages/console/ChatPage.jsx
@@ -4,8 +4,9 @@ import { getChatScenes } from '../../data/conversations.js';
 import { FiPaperclip, FiCode, FiSend, FiChevronDown } from 'react-icons/fi';
 import { api } from '../../services/api.js';

-function ModelSelector({ selectedModel, onSelectModel }) {
+function ModelSelector({ selectedModel, onSelectModel, variant = 'standard' }) {
  const [open, setOpen] = useState(false);
+  const [dropdownDirection, setDropdownDirection] = useState('down');
  const ref = useRef(null);

  const platformModels = api.admin.modelConfigs.list().map(c => ({
@@ -45,13 +46,49 @@ function ModelSelector({ selectedModel, onSelectModel }) {
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

+  useEffect(() => {
+    if (open && ref.current) {
+      const rect = ref.current.getBoundingClientRect();
+      const dropdownHeight = 350;
+      const spaceBelow = window.innerHeight - rect.bottom;
+      
+      if (spaceBelow < dropdownHeight && rect.top > dropdownHeight) {
+        setDropdownDirection('up');
+      } else {
+        setDropdownDirection('down');
+      }
+    }
+  }, [open]);
+
  const handleSelect = (model) => {
    onSelectModel(model);
    setOpen(false);
  };

+  const getDropdownPosition = () => {
+    if (!ref.current) return {};
+
+    const rect = ref.current.getBoundingClientRect();
+    const dropdownHeight = 350;
+    const spaceBelow = window.innerHeight - rect.bottom;
+
+    if (dropdownDirection === 'down') {
+      return {
+        top: rect.bottom,
+        left: rect.left,
+        width: rect.width,
+      };
+    } else {
+      return {
+        bottom: window.innerHeight - rect.top,
+        left: rect.left,
+        width: rect.width,
+      };
+    }
+  };
+
  return (
-    <div className={`model-selector ${open ? 'model-selector--open' : ''}`} ref={ref}>
+    <div className={`model-selector ${open ? 'model-selector--open' : ''} ${variant === 'compact' ? 'model-selector--compact' : ''}`} ref={ref}>
      <div
        className="model-selector__trigger"
        onClick={() => setOpen(!open)}
@@ -60,9 +97,8 @@ function ModelSelector({ selectedModel, onSelectModel }) {
          <span className="model-selector__icon">
            <FiCode size={12} />
          </span>
-          <span className="model-selector__name">{selectedModel?.name || '选择模型'}</span>
-          {selectedModel?.isDefault && (
-            <span className="model-selector__tag">默认</span>
+          {variant !== 'compact' && (
+            <span className="model-selector__name">{selectedModel?.name || '选择模型'}</span>
          )}
        </div>
        <span className={`model-selector__arrow ${open ? 'model-selector__arrow--open' : ''}`}>
@@ -71,23 +107,23 @@ function ModelSelector({ selectedModel, onSelectModel }) {
      </div>

      {open && (
-        <div className="model-selector__dropdown">
-          {groups.map(group => (
-            <div key={group.key} className="model-selector__group">
-              <div className="model-selector__group-title">{group.title}</div>
-              {group.models.map(model => (
-                <div
-                  key={model.id}
-                  className={`model-selector__item ${selectedModel?.id === model.id ? 'model-selector__item--selected' : ''}`}
-                  onClick={() => handleSelect(model)}
-                >
-                  <span className="model-selector__item-text">{model.name}</span>
-                  {model.isDefault && (
-                    <span className="model-selector__item-tag">默认</span>
-                  )}
+        <div
+          className={`model-selector__dropdown model-selector__dropdown--${dropdownDirection}`}
+          style={getDropdownPosition()}
+        >
+              {groups.map(group => (
+                <div key={group.key} className="model-selector__group">
+                  <div className="model-selector__group-title">{group.title}</div>
+                  {group.models.map(model => (
+                    <div
+                      key={model.id}
+                      className={`model-selector__item ${selectedModel?.id === model.id ? 'model-selector__item--selected' : ''}`}
+                      onClick={() => handleSelect(model)}
+                    >
+                      <span className="model-selector__item-text">{model.name}</span>
+                    </div>
+                  ))}
                </div>
-              ))}
-            </div>
          ))}
        </div>
      )}
@@ -101,6 +137,7 @@ function ChatPage() {
    const chatScenes = getChatScenes();
    const html = chatScenes[currentScene] || '';
    const chatMessagesRef = useRef(null);
+    const [isCompact, setIsCompact] = useState(false);

    const defaultPlatformModel = api.admin.modelConfigs.list().find(c => c.isActive);
    const defaultProjectModel = api.consoleModels.project.list().find(c => c.isActive);
@@ -135,6 +172,16 @@ function ChatPage() {
        };
    }, [scene, html]);

+    useEffect(() => {
+        const checkScreenSize = () => {
+            setIsCompact(window.innerWidth >= 480 && window.innerWidth < 768);
+        };
+
+        checkScreenSize();
+        window.addEventListener('resize', checkScreenSize);
+        return () => window.removeEventListener('resize', checkScreenSize);
+    }, []);
+
    return (
        <div className="chat-layout">
            <div className="chat-content">
@@ -143,10 +190,11 @@ function ChatPage() {
                </div>
                <div className="chat-input-wrapper">
                    <div className="chat-input-container">
-                        <div className="chat-input-box">
+                        <div className="chat-input-box chat-input-box--horizontal">
                            <ModelSelector
                              selectedModel={selectedModel}
                              onSelectModel={setSelectedModel}
+                              variant={isCompact ? 'compact' : 'standard'}
                            />
                            <div className="chat-input-main">
                                <textarea
--- a/src/styles/pages/_console.scss
+++ b/src/styles/pages/_console.scss
@@ -208,11 +208,18 @@
 .chat-input-box {
    border: 1px solid var(--color-border-3);
    border-radius: 16px;
-    overflow: hidden;
    background: var(--color-bg-1);
    transition: all var(--transition);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);

+    &--horizontal {
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+        padding: 8px 12px 8px 8px;
+        min-height: 44px;
+    }
+
    &:hover {
        border-color: #CBD5E1;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
@@ -226,21 +233,27 @@

 .chat-input-main {
    display: flex;
-    align-items: flex-end;
+    align-items: center;
    gap: 8px;
-    padding: 10px 12px 10px 14px;
+    padding: 0;
+    flex: 1;
+
+    @include chat-mobile {
+        width: 100%;
+        padding: 0;
+    }
 }

 .chat-input {
    flex: 1;
-    padding: 6px 2px;
+    padding: 0 2px;
    border: none;
    outline: none;
    font-size: 15px;
    resize: none;
-    min-height: 24px;
+    height: 28px;
    max-height: 200px;
-    line-height: 1.6;
+    line-height: 28px;
    background: transparent;
    color: var(--color-text-1);

@@ -254,6 +267,11 @@
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
+
+    @include chat-mobile {
+        width: 100%;
+        justify-content: space-between;
+    }
 }

 .chat-input-tools {
@@ -261,6 +279,10 @@
    gap: 2px;
    padding-right: 6px;
    border-right: 1px solid var(--color-border-2);
+
+    @include chat-mobile {
+        border-right: none;
+    }
 }

 .chat-input-tool {
@@ -876,3 +898,24 @@
        padding: 12px 16px 16px;
    }
 }
+
+// 聊天输入框响应式布局
+@include chat-mobile {
+    .chat-input-box {
+        &--horizontal {
+            flex-direction: column;
+            padding: 8px 12px;
+        }
+    }
+
+    .model-selector {
+        width: 100%;
+        flex-shrink: 0;
+
+        .model-selector__trigger {
+            border-right: none;
+            border-bottom: 1px solid var(--color-border-2);
+            border-radius: 16px;
+        }
+    }
+}
--- a/src/styles/pages/model-selector/_index.scss
+++ b/src/styles/pages/model-selector/_index.scss
@@ -2,7 +2,28 @@

 .model-selector {
    position: relative;
-    z-index: 100;
+    z-index: 1;
+    display: flex;
+    align-items: stretch;
+    margin-right: 8px;
+
+    &--open {
+        z-index: 1000;
+    }
+
+    &__dropdown {
+        z-index: 1001;
+    }
+
+    &--compact {
+        width: 100px;
+        flex-shrink: 0;
+    }
+
+    &:not(.model-selector--compact) {
+        width: 160px;
+        flex-shrink: 0;
+    }
 }

 .model-selector--open {
@@ -21,17 +42,26 @@
    align-items: center;
    justify-content: space-between;
    gap: $spacing-2;
-    padding: 6px $spacing-3;
+    padding: 0 10px;
    background: var(--color-bg-2);
    border: none;
-    border-bottom: 1px solid var(--color-border-2);
+    border-right: 1px solid var(--color-border-2);
+    border-radius: 16px;
    cursor: pointer;
    transition: background var(--transition);
    user-select: none;
+    width: 100%;
+    box-sizing: border-box;

    &:hover {
        background: var(--color-bg-3);
    }
+
+    .model-selector--compact & {
+        border-right: 1px solid var(--color-border-2);
+        border-radius: 16px;
+        padding: 0 8px;
+    }
 }

 .model-selector__content {
@@ -40,6 +70,7 @@
    gap: $spacing-2;
    flex: 1;
    min-width: 0;
+    overflow: hidden;
 }

 .model-selector__icon {
@@ -82,19 +113,16 @@
 }

 .model-selector__dropdown {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
+    position: fixed;
    background: var(--color-bg-1);
    border: 1px solid var(--color-primary);
-    border-top: none;
-    border-radius: 0 0 $radius-lg $radius-lg;
+    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
-    overflow: hidden;
    animation: dropdownExpand 0.2s ease-out;
    max-height: 350px;
    overflow-y: auto;
+    min-width: 160px;
+    padding: 4px 0;

    &::-webkit-scrollbar {
        width: 6px;
@@ -197,7 +225,7 @@

@include mobile {
    .model-selector__trigger {
-        padding: 4px $spacing-2;
+        padding: 0 8px;
    }

    .model-selector__name {
--- a/src/styles/tokens/_breakpoints.scss
+++ b/src/styles/tokens/_breakpoints.scss
@@ -3,3 +3,8 @@
 $breakpoint-mobile: 768px;
 $breakpoint-tablet: 1024px;
 $breakpoint-desktop: 1025px;
+
+// 聊天输入框断点
+$breakpoint-chat-mobile: 480px;
+$breakpoint-chat-tablet: 768px;
+$breakpoint-chat-desktop: 769px;
--- a/src/styles/tokens/_mixins.scss
+++ b/src/styles/tokens/_mixins.scss
@@ -23,6 +23,25 @@
    }
 }

+// 聊天输入框响应式断点
+@mixin chat-mobile {
+    @media (max-width: #{$breakpoint-chat-mobile}) {
+        @content;
+    }
+}
+
+@mixin chat-tablet {
+    @media (min-width: #{$breakpoint-chat-mobile + 1}) and (max-width: #{$breakpoint-chat-tablet}) {
+        @content;
+    }
+}
+
+@mixin chat-desktop {
+    @media (min-width: #{$breakpoint-chat-desktop}) {
+        @content;
+    }
+}
+
 // 弹性布局
@mixin flex-center {
    display: flex;