From b5d90cc59a25809b493e3dd693c71ab9f26cad3d Mon Sep 17 00:00:00 2001
From: landaiqing <landaiqing@126.com>
Date: Sun, 5 Oct 2025 18:53:49 +0800
Subject: [PATCH] :sparkles: Added the ability to automatically scroll to
 active tabs

---
 frontend/src/common/constant/config.ts        |  2 +-
 frontend/src/components/tabs/TabContainer.vue | 46 ++++++++++++++++++-
 internal/models/config.go                     |  2 +-
 3 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/frontend/src/common/constant/config.ts b/frontend/src/common/constant/config.ts
index 09806ea..f76b1bc 100644
--- a/frontend/src/common/constant/config.ts
+++ b/frontend/src/common/constant/config.ts
@@ -119,7 +119,7 @@ export const DEFAULT_CONFIG: AppConfig = {
     editing: {
         fontSize: CONFIG_LIMITS.fontSize.default,
         fontFamily: FONT_OPTIONS[0].value,
-        fontWeight: 'normal',
+        fontWeight: '400',
         lineHeight: CONFIG_LIMITS.lineHeight.default,
         enableTabIndent: true,
         tabSize: CONFIG_LIMITS.tabSize.default,
diff --git a/frontend/src/components/tabs/TabContainer.vue b/frontend/src/components/tabs/TabContainer.vue
index 363794b..55a824a 100644
--- a/frontend/src/components/tabs/TabContainer.vue
+++ b/frontend/src/components/tabs/TabContainer.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import TabItem from './TabItem.vue';
 import TabContextMenu from './TabContextMenu.vue';
 import { useTabStore } from '@/stores/tabStore';
@@ -107,6 +107,40 @@ const onWheelScroll = (event: WheelEvent) => {
   el.scrollLeft += delta;
 };
 
+// 自动滚动到活跃标签页
+const scrollToActiveTab = async () => {
+  await nextTick();
+  
+  const scrollWrapper = tabScrollWrapperRef.value;
+  const tabList = tabListRef.value;
+  
+  if (!scrollWrapper || !tabList) return;
+  
+  // 查找当前活跃的标签页元素
+  const activeTabElement = tabList.querySelector('.tab-item.active') as HTMLElement;
+  if (!activeTabElement) return;
+  
+  const scrollWrapperRect = scrollWrapper.getBoundingClientRect();
+  const activeTabRect = activeTabElement.getBoundingClientRect();
+  
+  // 计算活跃标签页相对于滚动容器的位置
+  const activeTabLeft = activeTabRect.left - scrollWrapperRect.left + scrollWrapper.scrollLeft;
+  const activeTabRight = activeTabLeft + activeTabRect.width;
+  
+  // 获取滚动容器的可视区域
+  const scrollLeft = scrollWrapper.scrollLeft;
+  const scrollRight = scrollLeft + scrollWrapper.clientWidth;
+  
+  // 如果活跃标签页不在可视区域内，则滚动到合适位置
+  if (activeTabLeft < scrollLeft) {
+    // 标签页在左侧不可见，滚动到左边
+    scrollWrapper.scrollLeft = activeTabLeft - 10; // 留一点边距
+  } else if (activeTabRight > scrollRight) {
+    // 标签页在右侧不可见，滚动到右边
+    scrollWrapper.scrollLeft = activeTabRight - scrollWrapper.clientWidth + 10; // 留一点边距
+  }
+};
+
 onMounted(() => {
   // 组件挂载时的初始化逻辑
 });
@@ -114,6 +148,16 @@ onMounted(() => {
 onUnmounted(() => {
   // 组件卸载时的清理逻辑
 });
+
+// 监听当前活跃标签页的变化
+watch(() => tabStore.currentDocumentId, () => {
+  scrollToActiveTab();
+});
+
+// 监听标签页列表变化
+watch(() => tabStore.tabs.length, () => {
+  scrollToActiveTab();
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/internal/models/config.go b/internal/models/config.go
index b00a812..dfc9610 100644
--- a/internal/models/config.go
+++ b/internal/models/config.go
@@ -169,7 +169,7 @@ func NewDefaultAppConfig() *AppConfig {
 			// 字体设置
 			FontSize:   13,
 			FontFamily: `"HarmonyOS"`,
-			FontWeight: "normal",
+			FontWeight: "400",
 			LineHeight: 1.5,
 			// Tab设置
 			EnableTabIndent: true,