优化 AI 模型选择控件布局

Co-authored-by: staff <staff@qimaos-MacBook-Pro.local>

apps/desktop/src/components/editor/AiAssistant.vue

@@ -1271,10 +1271,22 @@ const messageRenderer = computed(() => {
             @compositionend="promptCompositionActive = false"
             @keydown="onPromptKeydown"
           />
-          <div class="flex items-center gap-1.5">
-            <LightDropdown v-model="assistantMode" :items="assistantModeItems" :aria-label="activeModeHint" item-class="text-xs px-2" />
-            <LightDropdown :model-value="activeAction" :items="actionMenuItems" content-class="w-max min-w-0" item-class="text-xs px-2" @update:model-value="(value) => selectAction(value as AiAction)" />
-            <span class="flex-1" />
+          <div class="flex min-w-0 flex-nowrap items-center gap-1.5 overflow-hidden">
+            <LightDropdown
+              v-model="assistantMode"
+              :items="assistantModeItems"
+              :aria-label="activeModeHint"
+              trigger-class="flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full border px-2 py-0.5 text-[11px] text-muted-foreground hover:bg-muted hover:text-foreground"
+              item-class="text-xs px-2"
+            />
+            <LightDropdown
+              :model-value="activeAction"
+              :items="actionMenuItems"
+              content-class="w-max min-w-0"
+              trigger-class="flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full border px-2 py-0.5 text-[11px] text-muted-foreground hover:bg-muted hover:text-foreground"
+              item-class="text-xs px-2"
+              @update:model-value="(value) => selectAction(value as AiAction)"
+            />
             <SearchableSelect
               v-if="settings.isConfigured()"
               :model-value="settings.aiConfig.model"
@@ -1285,14 +1297,14 @@ const messageRenderer = computed(() => {
               :loading-text="t('ai.loadingModels')"
               :loading="modelLoading"
               :display-name="displayModelName"
-              trigger-class="rounded-full border px-2 py-0.5 text-[11px] text-muted-foreground hover:bg-muted hover:text-foreground truncate max-w-[130px]"
+              trigger-class="min-w-0 flex-1 shrink justify-end rounded-full border px-2 py-0.5 text-[11px] text-muted-foreground hover:bg-muted hover:text-foreground"
               content-class="w-72"
               item-class="text-xs px-2"
               @update:model-value="handleModelSelect"
               @update:open="(open: boolean) => open && fetchModelOptions()"
             >
               <template #trigger-label="{ label, loading }">
-                <span class="truncate">{{ loading ? t("ai.loadingModels") : label }}</span>
+                <span class="min-w-0 truncate">{{ loading ? t("ai.loadingModels") : label }}</span>
               </template>
               <template #option-label="{ option, label }">
                 <span class="flex min-w-0 flex-col">

apps/desktop/src/components/ui/searchable-select/SearchableSelect.vue

@@ -139,7 +139,7 @@ function handleKeydown(event: KeyboardEvent) {
 <template>
   <Popover v-model:open="open">
     <PopoverTrigger as-child>
-      <Button type="button" variant="ghost" :title="selectedLabel" :class="cn('h-6 w-auto max-w-56 justify-between gap-1 border-0 bg-transparent px-1 text-xs font-normal shadow-none hover:bg-muted/50 focus-visible:ring-0', triggerClass)">
+      <Button type="button" variant="ghost" :title="selectedLabel" :class="cn('h-6 w-auto max-w-56 min-w-0 justify-between gap-1 border-0 bg-transparent px-1 text-xs font-normal shadow-none hover:bg-muted/50 focus-visible:ring-0', triggerClass)">
         <slot name="trigger-label" :value="modelValue" :label="selectedLabel" :loading="loading">
           <span class="truncate">{{ loading ? loadingText : selectedLabel }}</span>
         </slot>
@@ -147,9 +147,10 @@ function handleKeydown(event: KeyboardEvent) {
       </Button>
     </PopoverTrigger>
     <PopoverContent align="end" :class="cn('w-52 gap-1 p-1.5', contentClass)">
-      <div class="flex items-center gap-1.5 rounded-sm border bg-background px-2">
-        <Search class="h-3 w-3 shrink-0 text-muted-foreground" />
-        <Input ref="searchInput" :model-value="searchText" :placeholder="searchPlaceholder" class="h-6 border-0 px-0 text-sm shadow-none focus-visible:ring-0" @update:model-value="(value) => (searchText = String(value))" @keydown="handleKeydown" />
+      <div class="relative rounded-sm border bg-background">
+        <Search class="pointer-events-none absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground" />
+        <span v-if="!searchText" class="pointer-events-none absolute left-[25px] top-1/2 -translate-y-1/2 text-sm text-muted-foreground">{{ searchPlaceholder }}</span>
+        <Input ref="searchInput" :model-value="searchText" class="h-6 border-0 pl-6 pr-2 text-sm caret-foreground shadow-none focus-visible:ring-0" @update:model-value="(value) => (searchText = String(value))" @keydown="handleKeydown" />
       </div>
       <div ref="listContainer" class="max-h-64 overflow-y-auto py-1">
         <div v-if="loading" class="px-2 py-2 text-sm text-muted-foreground">