Merge pull request #5 from GwIhViEte/main

设置界面新增模型选项

Author: ooboqoo

src/main/ai.ts

@@ -10,7 +10,7 @@ export function getSolutionStream(base64Image: string) {
   })
 
   const { textStream } = streamText({
-    model: openai(settings.model),
+    model: openai(settings.model || 'gpt-4o-mini'),
     system: settings.customPrompt || PROMPT_SYSTEM,
     messages: [
       {

src/renderer/src/lib/store/settings.ts

@@ -9,6 +9,7 @@ interface Settings {
 
   opacity: number
   codeLanguage: string
+  model: string
 }
 
 interface SettingsStore extends Settings {
@@ -21,6 +22,7 @@ const defaultSettings: Settings = {
   apiKey: '',
   customPrompt: '',
   codeLanguage: '',
+  model: '',
 
   opacity: 0.8
 }

src/renderer/src/settings/SelectModel.tsx

@@ -0,0 +1,115 @@
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { ChevronsUpDown, Check, Plus } from 'lucide-react'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command'
+
+const defaultModels = [
+  { value: 'gpt-4o-mini', label: 'gpt-4o-mini' },
+  { value: 'gpt-4o', label: 'gpt-4o' },
+  { value: 'gpt-4.1-mini', label: 'gpt-4.1-mini' },
+  { value: 'gpt-4.1', label: 'gpt-4.1' }
+]
+
+export function SelectModel({
+  value,
+  onChange,
+  disabled,
+  className
+}: {
+  value?: string
+  onChange?: (value: string) => void
+  disabled?: boolean
+  className?: string
+}) {
+  const [open, setOpen] = useState(false)
+  const [models, setModels] = useState(defaultModels)
+  const [searchValue, setSearchValue] = useState('')
+
+  const addCustomModel = (newModel: string) => {
+    const trimmed = newModel.trim()
+    if (!trimmed) return
+    const newValue = trimmed
+    const exists = models.some((m) => m.value === newValue)
+    if (exists) {
+      onChange?.(newValue)
+      setOpen(false)
+      setSearchValue('')
+      return
+    }
+    const item = { value: newValue, label: trimmed }
+    setModels((prev) => [...prev, item])
+    onChange?.(newValue)
+    setSearchValue('')
+    setOpen(false)
+  }
+
+  const filtered = models.filter((m) => m.label.toLowerCase().includes(searchValue.toLowerCase()))
+  const showCreate =
+    searchValue && !filtered.some((m) => m.label.toLowerCase() === searchValue.toLowerCase())
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn('w-60 justify-between', className)}
+        >
+          {value ? models.find((m) => m.value === value)?.label : '选择模型...'}
+          <ChevronsUpDown className="opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-60 p-0">
+        <Command>
+          <CommandInput
+            placeholder="输入以搜索或创建..."
+            className="h-9"
+            value={searchValue}
+            onValueChange={setSearchValue}
+          />
+          <CommandList>
+            <CommandEmpty>未找到结果</CommandEmpty>
+            <CommandGroup>
+              {filtered.map((m) => (
+                <CommandItem
+                  key={m.value}
+                  value={m.value}
+                  onSelect={(current) => {
+                    onChange?.(current === value ? '' : current)
+                    setSearchValue('')
+                    setOpen(false)
+                  }}
+                >
+                  {m.label}
+                  <Check className={cn('ml-auto', value === m.value ? 'opacity-100' : 'opacity-0')} />
+                </CommandItem>
+              ))}
+              {showCreate && (
+                <CommandItem
+                  value={`create-${searchValue}`}
+                  onSelect={() => addCustomModel(searchValue)}
+                  className="!text-blue-600"
+                >
+                  <Plus className="mr-2 h-4 w-4" />
+                  创建 “{searchValue}”
+                </CommandItem>
+              )}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
+

src/renderer/src/settings/index.tsx

@@ -17,9 +17,10 @@ import { Switch } from '@/components/ui/switch'
 import { useSettingsStore } from '@/lib/store/settings'
 import { SelectLanguage } from './SelectLanguage'
 import { CustomShortcuts, ResetDefaultShortcuts } from './CustomShortcuts'
+import { SelectModel } from './SelectModel'
 
 export default function SettingsPage() {
-  const { opacity, codeLanguage, apiBaseURL, apiKey, customPrompt, updateSetting } =
+  const { opacity, codeLanguage, apiBaseURL, apiKey, customPrompt, model, updateSetting } =
     useSettingsStore()
   const [showApiKey, setShowApiKey] = useState(false)
   const [enableCustomPrompt, setEnableCustomPrompt] = useState(customPrompt.trim().length > 0)
@@ -69,7 +70,7 @@ export default function SettingsPage() {
                 value={apiBaseURL}
                 onChange={(e) => updateSetting('apiBaseURL', e.target.value)}
                 className="w-60 px-3 py-2 border border-gray-300 rounded-md bg-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-                placeholder="可不填，默认使用 OpenAI 的 API"
+                placeholder="可为空，默认使用 OpenAI 的 API"
               />
             </div>
 
@@ -81,7 +82,7 @@ export default function SettingsPage() {
                   value={apiKey}
                   onChange={(e) => updateSetting('apiKey', e.target.value)}
                   className="flex-1 px-3 py-2 border border-gray-300 rounded-l-md bg-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  placeholder="请输入 API Key"
+                  placeholder="输入 API Key"
                 />
                 <Button
                   variant="ghost"
@@ -93,10 +94,13 @@ export default function SettingsPage() {
                 </Button>
               </div>
             </div>
+
+            <div className="flex items-center justify-between">
+              <label className="text-sm font-medium">Model</label>
+              <SelectModel value={model} onChange={(val) => updateSetting('model', val)} />
+            </div>
           </div>
         </div>
-
-        {/* General Settings */}
         <div className="bg-gray-300/80 rounded-lg p-6">
           <h2 className="text-lg font-semibold mb-4 flex items-center">
             <SquareTerminal className="h-5 w-5 mr-2" />
@@ -206,4 +210,4 @@ export default function SettingsPage() {
       </div>
     </>
   )
-}
+}