From 15f4de9ea8c94f14e4da0eee2da4b4b8c3a86379 Mon Sep 17 00:00:00 2001
From: yyhhyyyyyy <yyhhyyyyyy8@gmail.com>
Date: Tue, 29 Jul 2025 11:27:18 +0800
Subject: [PATCH] feat: add auto scroll when enabling providers

---
 .../settings/ModelProviderSettings.vue        | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/components/settings/ModelProviderSettings.vue b/src/renderer/src/components/settings/ModelProviderSettings.vue
index ba3617200..160a33fe2 100644
--- a/src/renderer/src/components/settings/ModelProviderSettings.vue
+++ b/src/renderer/src/components/settings/ModelProviderSettings.vue
@@ -11,6 +11,7 @@
         >
           <template #item="{ element: provider }">
             <div
+              :data-provider-id="provider.id"
               :class="[
                 'flex flex-row hover:bg-accent  items-center gap-2 rounded-lg p-2 cursor-pointer group',
                 route.params?.providerId === provider.id
@@ -68,7 +69,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, nextTick } from 'vue'
 import { useSettingsStore } from '@/stores/settings'
 import { useRoute, useRouter } from 'vue-router'
 import ModelProviderSettingsDetail from './ModelProviderSettingsDetail.vue'
@@ -110,10 +111,27 @@ const setActiveProvider = (providerId: string) => {
   })
 }
 
+const scrollToProvider = (providerId: string) => {
+  const element = document.querySelector(`[data-provider-id="${providerId}"]`)
+  if (element) {
+    element.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center'
+    })
+  }
+}
+
 const toggleProviderStatus = async (provider: LLM_PROVIDER) => {
-  await settingsStore.updateProviderStatus(provider.id, !provider.enable)
+  const willEnable = !provider.enable
+  await settingsStore.updateProviderStatus(provider.id, willEnable)
   // 切换状态后，同时打开该服务商的详情页面
   setActiveProvider(provider.id)
+
+  // 仅在开启服务商时滚动
+  if (willEnable) {
+    await nextTick()
+    scrollToProvider(provider.id)
+  }
 }
 
 const activeProvider = computed(() => {