feat: Group list scroll positioning (#284)

* 当选中一个分组或页面加载时，分组列表会自动滚动，确保所选分组始终处于可见区域。优化了在分组数量过多导致列表出现滚动条时的用户体验，避免了手动滚动的麻烦。

* 重构了自动滚动功能的实现细节。通过将 `watch` 监听器从深度监听整个对象优化为仅监听选中项的 ID，提升了组件性能。

* style: ES Lint

---------

Co-authored-by: tbphp <[email protected]>

Author: xunxun1982

web/src/components/keys/GroupList.vue

@@ -3,7 +3,7 @@ import type { Group } from "@/types/models";
 import { getGroupDisplayName } from "@/utils/display";
 import { Add, Search } from "@vicons/ionicons5";
 import { NButton, NCard, NEmpty, NInput, NSpin, NTag } from "naive-ui";
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import GroupFormModal from "./GroupFormModal.vue";
 
@@ -29,6 +29,8 @@ const emit = defineEmits<Emits>();
 
 const searchText = ref("");
 const showGroupModal = ref(false);
+// 存储分组项 DOM 元素的引用
+const groupItemRefs = ref(new Map());
 
 // 过滤后的分组列表
 const filteredGroups = computed(() => {
@@ -43,6 +45,28 @@ const filteredGroups = computed(() => {
   );
 });
 
+// 监听选中项 ID 的变化，并自动滚动到该项
+watch(
+  () => props.selectedGroup?.id,
+  id => {
+    if (!id || props.groups.length === 0) {
+      return;
+    }
+
+    const element = groupItemRefs.value.get(id);
+    if (element) {
+      element.scrollIntoView({
+        behavior: "smooth", // 平滑滚动
+        block: "nearest", // 将元素滚动到最近的边缘
+      });
+    }
+  },
+  {
+    flush: "post", // 确保在 DOM 更新后执行回调
+    immediate: true, // 立即执行一次以处理初始加载
+  }
+);
+
 function handleGroupClick(group: Group) {
   emit("group-select", group);
 }
@@ -107,6 +131,11 @@ function handleGroupCreated(group: Group) {
               class="group-item"
               :class="{ active: selectedGroup?.id === group.id }"
               @click="handleGroupClick(group)"
+              :ref="
+                el => {
+                  if (el) groupItemRefs.set(group.id, el);
+                }
+              "
             >
               <div class="group-icon">
                 <span v-if="group.channel_type === 'openai'">🤖</span>