✨ Added the ability to automatically scroll to active tabs
This commit is contained in:
@@ -119,7 +119,7 @@ export const DEFAULT_CONFIG: AppConfig = {
|
|||||||
editing: {
|
editing: {
|
||||||
fontSize: CONFIG_LIMITS.fontSize.default,
|
fontSize: CONFIG_LIMITS.fontSize.default,
|
||||||
fontFamily: FONT_OPTIONS[0].value,
|
fontFamily: FONT_OPTIONS[0].value,
|
||||||
fontWeight: 'normal',
|
fontWeight: '400',
|
||||||
lineHeight: CONFIG_LIMITS.lineHeight.default,
|
lineHeight: CONFIG_LIMITS.lineHeight.default,
|
||||||
enableTabIndent: true,
|
enableTabIndent: true,
|
||||||
tabSize: CONFIG_LIMITS.tabSize.default,
|
tabSize: CONFIG_LIMITS.tabSize.default,
|
||||||
|
|||||||
@@ -31,7 +31,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, onUnmounted } from 'vue';
|
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
|
||||||
import TabItem from './TabItem.vue';
|
import TabItem from './TabItem.vue';
|
||||||
import TabContextMenu from './TabContextMenu.vue';
|
import TabContextMenu from './TabContextMenu.vue';
|
||||||
import { useTabStore } from '@/stores/tabStore';
|
import { useTabStore } from '@/stores/tabStore';
|
||||||
@@ -107,6 +107,40 @@ const onWheelScroll = (event: WheelEvent) => {
|
|||||||
el.scrollLeft += delta;
|
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(() => {
|
onMounted(() => {
|
||||||
// 组件挂载时的初始化逻辑
|
// 组件挂载时的初始化逻辑
|
||||||
});
|
});
|
||||||
@@ -114,6 +148,16 @@ onMounted(() => {
|
|||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
// 组件卸载时的清理逻辑
|
// 组件卸载时的清理逻辑
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 监听当前活跃标签页的变化
|
||||||
|
watch(() => tabStore.currentDocumentId, () => {
|
||||||
|
scrollToActiveTab();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 监听标签页列表变化
|
||||||
|
watch(() => tabStore.tabs.length, () => {
|
||||||
|
scrollToActiveTab();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
@@ -169,7 +169,7 @@ func NewDefaultAppConfig() *AppConfig {
|
|||||||
// 字体设置
|
// 字体设置
|
||||||
FontSize: 13,
|
FontSize: 13,
|
||||||
FontFamily: `"HarmonyOS"`,
|
FontFamily: `"HarmonyOS"`,
|
||||||
FontWeight: "normal",
|
FontWeight: "400",
|
||||||
LineHeight: 1.5,
|
LineHeight: 1.5,
|
||||||
// Tab设置
|
// Tab设置
|
||||||
EnableTabIndent: true,
|
EnableTabIndent: true,
|
||||||
|
|||||||
Reference in New Issue
Block a user