From a2ba0e843c11bf07437652033dde411d17c54d9e Mon Sep 17 00:00:00 2001
From: Ethan-Zhang <ethanzhang55@outlook.com>
Date: Fri, 17 Oct 2025 17:48:30 +0800
Subject: [PATCH] =?UTF-8?q?Fix:=20=E7=94=A8=E6=88=B7=E5=81=8F=E5=A5=BD?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E5=BC=B9=E7=AA=97=E6=B8=B2=E6=9F=93=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/settings/Model.vue                  | 141 +++++++++++++-----
 .../components/SystemModelSettings.vue        |  31 +++-
 2 files changed, 126 insertions(+), 46 deletions(-)

diff --git a/src/views/settings/Model.vue b/src/views/settings/Model.vue
index 50648a2b..917e41fb 100644
--- a/src/views/settings/Model.vue
+++ b/src/views/settings/Model.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, markRaw, onMounted, ref, watch } from 'vue';
+import { computed, markRaw, onMounted, onUnmounted, ref, watch } from 'vue';
 import ModelCard from './components/ModelCard.vue';
 import SystemModelSettings from './components/SystemModelSettings.vue';
 import lightNull from '@/assets/svgs/light_null.svg';
@@ -128,8 +128,51 @@ const beDeleteModelId = ref('');
 
 // 系统模型设置相关
 const isSystemModelSettingsVisible = ref(false);
+const isSelectDropdownOpen = ref(false);
 
-// 移除手动控制，让 el-popover 自动管理显示状态
+// 处理选择器可见性变化
+function handleSelectVisibleChange(visible: boolean) {
+  isSelectDropdownOpen.value = visible;
+}
+
+// 处理点击外部关闭，但排除el-select下拉框
+function handleDocumentClick(event: MouseEvent) {
+  if (!isSystemModelSettingsVisible.value) return;
+  
+  // 如果有选择器下拉框打开，不关闭popover
+  if (isSelectDropdownOpen.value) {
+    return;
+  }
+  
+  const target = event.target as HTMLElement;
+  // 检查点击是否在el-select的下拉框内
+  const isInSelectDropdown = target.closest('.el-select-dropdown') || target.closest('.system-model-select-dropdown');
+  // 检查点击是否在popover内
+  const isInPopover = target.closest('.system-model-settings-popover-wrapper');
+  // 检查点击是否在按钮上
+  const isInButton = target.closest('.system-model-btn');
+  
+  // 如果点击在下拉框、popover或按钮内，不关闭
+  if (isInSelectDropdown || isInPopover || isInButton) {
+    return;
+  }
+  
+  // 否则关闭popover
+  isSystemModelSettingsVisible.value = false;
+}
+
+// 监听popover显示状态，添加/移除document点击监听
+watch(isSystemModelSettingsVisible, (visible) => {
+  if (visible) {
+    // 延迟添加监听，避免触发当前点击
+    setTimeout(() => {
+      document.addEventListener('click', handleDocumentClick, true);
+    }, 0);
+  } else {
+    document.removeEventListener('click', handleDocumentClick, true);
+    isSelectDropdownOpen.value = false; // 重置状态
+  }
+});
 
 async function handleSystemModelSettingsSave(settings: any) {
   try {
@@ -137,15 +180,53 @@ async function handleSystemModelSettingsSave(settings: any) {
     const preferences: any = {};
     
     if (settings.reasoningModel) {
-      preferences.reasoningModelPreference = models.value.find(m => m.llmId === settings.reasoningModel);
+      const model = models.value.find(m => m.llmId === settings.reasoningModel);
+      if (model) {
+        preferences.reasoningModelPreference = {
+          llmId: model.llmId,
+          icon: model.icon || '',
+          openaiBaseUrl: model.openaiBaseUrl || '',
+          openaiApiKey: model.openaiApiKey || '',
+          modelName: model.modelName || '',
+          maxTokens: model.maxTokens || 8192,
+          isEditable: model.isEditable
+        };
+      }
     }
     
     if (settings.embeddingModel) {
-      preferences.embeddingModelPreference = embeddingOptions.value.find(m => m.llmId === settings.embeddingModel);
+      const model = embeddingOptions.value.find(m => m.llmId === settings.embeddingModel);
+      if (model) {
+        preferences.embeddingModelPreference = {
+          llmId: model.llmId,
+          modelName: model.modelName || '',
+          icon: model.icon || '',
+          type: model.type || '',
+          endpoint: model.endpoint || '',
+          apiKey: model.apiKey || ''
+        };
+      }
     }
     
     if (settings.rerankModel) {
-      preferences.rerankerPreference = rerankerOptions.value.find(m => m.llmId === settings.rerankModel);
+      const model = rerankerOptions.value.find(m => m.llmId === settings.rerankModel);
+      if (model) {
+        preferences.rerankerPreference = {
+          llmId: model.llmId,
+          modelName: model.modelName || '',
+          icon: model.icon || '',
+          type: model.type || ''
+        };
+        
+        // 根据类型添加可选字段
+        if (model.type !== 'algorithm') {
+          preferences.rerankerPreference.endpoint = model.endpoint || null;
+          preferences.rerankerPreference.apiKey = model.apiKey || null;
+        }
+        if (model.type === 'algorithm') {
+          preferences.rerankerPreference.name = model.name || null;
+        }
+      }
     }
     
     // 思维链偏好总是包含，因为它有明确的boolean值
@@ -210,6 +291,11 @@ onMounted(() => {
   queryRerankerOptions();
   queryUserPreferences();
 });
+
+onUnmounted(() => {
+  // 清理document点击监听
+  document.removeEventListener('click', handleDocumentClick, true);
+});
 </script>
 <template>
   <div class="model">
@@ -221,39 +307,10 @@ onMounted(() => {
         :width="420"
         trigger="click"
         popper-class="system-model-settings-popover-wrapper"
-        :fallback-placements="['bottom-start', 'bottom', 'top-end', 'top-start', 'top']"
-        :offset="10"
         :hide-after="0"
-        :persistent="true"
-        :popper-options="{
+        :show-arrow="false"
+        :popperOptions="{
           modifiers: [
-            {
-              name: 'preventOverflow',
-              options: {
-                boundary: 'viewport',
-                padding: 16
-              }
-            },
-            {
-              name: 'flip',
-              options: {
-                fallbackPlacements: ['bottom-start', 'bottom', 'top-end', 'top-start', 'top']
-              }
-            },
-            {
-              name: 'offset',
-              options: {
-                offset: ({ placement, reference, popper }) => {
-                  if (placement === 'bottom-end') {
-                    const buttonWidth = reference.width;
-                    const popoverWidth = 120; // 悬浮窗口宽度
-                    const horizontalOffset = popoverWidth - buttonWidth;
-                    return [-horizontalOffset, 8];
-                  }
-                  return [0, 8];
-                }
-              }
-            },
             {
               name: 'eventListeners',
               options: {
@@ -286,6 +343,7 @@ onMounted(() => {
           :user-preferences="userPreferences"
           @save="handleSystemModelSettingsSave"
           @cancel="handleSystemModelSettingsCancel"
+          @select-visible-change="handleSelectVisibleChange"
         />
       </el-popover>
     </div>
@@ -445,14 +503,19 @@ onMounted(() => {
   padding: 0 !important;
   border-radius: 8px !important;
   box-shadow: var(--o-shadow-dark) !important;
+  max-width: 420px !important;
+}
+
+.system-model-settings-popover-wrapper .el-popover__content {
+  padding: 0 !important;
+  width: 100% !important;
 }
 
-/* 确保悬浮窗口与按钮右边界对齐 */
-.system-model-settings-popover-wrapper[data-popper-placement^="bottom-end"] {
+.system-model-settings-popover-wrapper[data-popper-placement^="bottom"] {
   transform-origin: top right !important;
 }
 
-.system-model-settings-popover-wrapper[data-popper-placement^="top-end"] {
+.system-model-settings-popover-wrapper[data-popper-placement^="top"] {
   transform-origin: bottom right !important;
 }
 </style>
diff --git a/src/views/settings/components/SystemModelSettings.vue b/src/views/settings/components/SystemModelSettings.vue
index d90105c5..c01048a6 100644
--- a/src/views/settings/components/SystemModelSettings.vue
+++ b/src/views/settings/components/SystemModelSettings.vue
@@ -22,8 +22,17 @@ const props = defineProps<{
 const emit = defineEmits<{
   'save': [settings: SystemModelSettings];
   'cancel': [];
+  'select-visible-change': [visible: boolean];
 }>();
 
+// 跟踪选择器的打开状态
+const isAnySelectOpen = ref(false);
+
+function handleSelectVisibleChange(visible: boolean) {
+  isAnySelectOpen.value = visible;
+  emit('select-visible-change', visible);
+}
+
 interface SystemModelSettings {
   reasoningModel: string;
   embeddingModel: string;
@@ -165,7 +174,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="system-model-settings-popover">
+  <div class="system-model-settings-popover" @click.stop>
     <div class="settings-content">
       <!-- 系统推理模型 -->
       <div class="setting-item">
@@ -182,7 +191,7 @@ onMounted(() => {
           v-model="currentSettings.reasoningModel" 
           class="setting-select"
           popper-class="system-model-select-dropdown"
-          :teleported="false"
+          @visible-change="handleSelectVisibleChange"
         >
           <template #prefix>
             <div class="selected-model-icon">
@@ -230,7 +239,7 @@ onMounted(() => {
           v-model="currentSettings.embeddingModel" 
           class="setting-select"
           popper-class="system-model-select-dropdown"
-          :teleported="false"
+          @visible-change="handleSelectVisibleChange"
         >
           <template #prefix>
             <div class="selected-model-icon">
@@ -278,7 +287,7 @@ onMounted(() => {
           v-model="currentSettings.rerankModel" 
           class="setting-select"
           popper-class="system-model-select-dropdown"
-          :teleported="false"
+          @visible-change="handleSelectVisibleChange"
         >
           <template #prefix>
             <div class="selected-model-icon">
@@ -337,15 +346,16 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .system-model-settings-popover {
-  width: 420px;
+  width: 100%;
+  max-width: 420px;
   background: var(--el-collapse-header-bg);
   border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  border: 1px solid var(--o-border-color-lighter);
+  overflow: hidden;
 }
 
 .settings-content {
   padding: 16px;
+  box-sizing: border-box;
 }
 
 .setting-item {
@@ -353,6 +363,7 @@ onMounted(() => {
   align-items: center;
   justify-content: space-between;
   margin-bottom: 16px;
+  gap: 12px;
   
   &:last-child {
     margin-bottom: 0;
@@ -367,15 +378,20 @@ onMounted(() => {
   color: var(--o-text-color-primary);
   font-weight: 500;
   min-width: 120px;
+  flex-shrink: 0;
+  white-space: nowrap;
   
   .help-icon {
     color: var(--o-text-color-secondary);
     cursor: help;
+    flex-shrink: 0;
   }
 }
 
 .setting-select {
   width: 220px;
+  max-width: 100%;
+  flex-shrink: 1;
 }
 
 .selected-model-icon {
@@ -427,6 +443,7 @@ onMounted(() => {
   border-top: 1px solid var(--o-border-color-lighter);
   background: var(--o-bg-color-base);
   border-radius: 0 0 8px 8px;
+  box-sizing: border-box;
 }
 
 .cancel-btn, .save-btn {
-- 
Gitee