fix: 模型选择器下拉框定位修复与滚动条优化

src/components/chat/chat-model-selector.tsx

@@ -19,13 +19,14 @@ interface ModelGroup {
 }
 
 const DROPDOWN_MAX_HEIGHT = 400
+const DROPDOWN_MIN_HEIGHT = 120
 const DROPDOWN_GAP = 6
 
 export function ChatModelSelector({ value, onChange, disabled }: ChatModelSelectorProps) {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
   const triggerRef = useRef<HTMLButtonElement>(null)
-  const [dropdownStyle, setDropdownStyle] = useState<{ left: number; top: number; width: number } | null>(null)
+  const [dropdownStyle, setDropdownStyle] = useState<{ left: number; top: number; width: number; maxHeight: number } | null>(null)
   const providerConfigs = useWikiStore((s) => s.providerConfigs)
 
   // 按预设/卡片分组：所有启用的内置预设 + 所有启用的自定义卡片
@@ -103,15 +104,19 @@ export function ChatModelSelector({ value, onChange, disabled }: ChatModelSelect
       const availableAbove = rect.top
       const availableBelow = window.innerHeight - rect.bottom
       let top: number
-      if (availableAbove >= DROPDOWN_MAX_HEIGHT + DROPDOWN_GAP || availableAbove >= availableBelow) {
-        top = Math.max(4, rect.top - DROPDOWN_MAX_HEIGHT - DROPDOWN_GAP)
+      let maxHeight: number
+      if (availableBelow < DROPDOWN_MAX_HEIGHT + DROPDOWN_GAP && availableAbove >= DROPDOWN_MAX_HEIGHT + DROPDOWN_GAP) {
+        top = rect.top - DROPDOWN_MAX_HEIGHT - DROPDOWN_GAP
+        maxHeight = Math.min(DROPDOWN_MAX_HEIGHT, Math.max(DROPDOWN_MIN_HEIGHT, availableAbove - DROPDOWN_GAP))
       } else {
         top = rect.bottom + DROPDOWN_GAP
+        maxHeight = Math.min(DROPDOWN_MAX_HEIGHT, Math.max(DROPDOWN_MIN_HEIGHT, availableBelow - DROPDOWN_GAP))
       }
       setDropdownStyle({
         left: Math.min(rect.left, window.innerWidth - width - 4),
         top,
         width,
+        maxHeight,
       })
     }
     updatePosition()
@@ -142,12 +147,12 @@ export function ChatModelSelector({ value, onChange, disabled }: ChatModelSelect
             onClick={() => setOpen(false)}
           />
           <div
-            className="fixed z-50 rounded-md border bg-popover p-1 shadow-md"
+            className="fixed z-50 rounded-md border bg-popover p-1 shadow-md model-selector-dropdown"
             style={{
               left: dropdownStyle.left,
               top: dropdownStyle.top,
               width: dropdownStyle.width,
-              maxHeight: DROPDOWN_MAX_HEIGHT,
+              maxHeight: dropdownStyle.maxHeight,
               overflowY: "auto",
             }}
           >

src/index.css

@@ -223,3 +223,26 @@
 .legend-scroll::-webkit-scrollbar-corner {
   background: transparent;
 }
+
+/* Model selector dropdown scrollbar */
+.model-selector-dropdown {
+  scrollbar-width: thin;
+  scrollbar-gutter: stable;
+}
+
+.model-selector-dropdown::-webkit-scrollbar {
+  width: 4px;
+}
+
+.model-selector-dropdown::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.model-selector-dropdown::-webkit-scrollbar-thumb {
+  background: oklch(0.55 0 0);
+  border-radius: 2px;
+}
+
+.model-selector-dropdown::-webkit-scrollbar-corner {
+  background: transparent;
+}