utools-plug-in
/
markdown
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(TabBar): 为首页标签添加图标和文字显示 

- 将首页标签的图标和文字包裹在单独的容器中
- 添加首页文字显示并应用文本溢出样式
- 简化模板结构，移除多余换行和缩进
This commit is contained in:
cfq 2026-01-28 14:48:40 +08:00
parent e56fc4b5f1
commit c639ebb6bf
1 changed files with 22 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/TabBar.vue
View File

@ -1,39 +1,24 @@
<template>
<div class="tab-bar">
<a-dropdown
v-for="tab in state.tabs"
:key="tab.id"
:trigger="['contextmenu']"
>
<div
:class="['tab-item', { active: tab.id === state.activeTabId }]"
@click="activateTab(tab.id)"
@mousedown.middle.prevent="tab.closable && closeTab(tab.id)"
>
<HomeOutlined v-if="tab.type === 'home'" />
<a-dropdown v-for="tab in state.tabs" :key="tab.id" :trigger="['contextmenu']">
<div :class="['tab-item', { active: tab.id === state.activeTabId }]" @click="activateTab(tab.id)" @mousedown.middle.prevent="tab.closable && closeTab(tab.id)">
<div class="tab-icon" v-if="tab.type === 'home'">
<HomeOutlined />
<span class="tab-home">首页</span>
</div>
<span v-else class="tab-title">{{ tab.title }}</span>
<span v-if="tab.isDirty" class="dirty-dot">●</span>
<div
v-if="tab.closable"
class="close-btn"
@click.stop="closeTab(tab.id)"
>
<div v-if="tab.closable" class="close-btn" @click.stop="closeTab(tab.id)">
<CloseOutlined />
</div>
</div>
<template #overlay>
<a-menu>
<a-menu-item key="close" :disabled="!tab.closable" @click="closeTab(tab.id)">
关闭
</a-menu-item>
<a-menu-item key="closeOther" @click="closeOtherTabs(tab.id)">
保留当前关闭其他
</a-menu-item>
<a-menu-item key="closeAll" @click="closeAllTabs()">
全部关闭
</a-menu-item>
<a-menu-item key="close" :disabled="!tab.closable" @click="closeTab(tab.id)"> 关闭 </a-menu-item>
<a-menu-item key="closeOther" @click="closeOtherTabs(tab.id)"> 保留当前关闭其他 </a-menu-item>
<a-menu-item key="closeAll" @click="closeAllTabs()"> 全部关闭 </a-menu-item>
</a-menu>
</template>
</a-dropdown>
@ -41,11 +26,10 @@
</template>
<script setup>
import { HomeOutlined, CloseOutlined } from '@ant-design/icons-vue';
import { useTabs } from '../composables/useTabs';
import { HomeOutlined, CloseOutlined } from "@ant-design/icons-vue";
import { useTabs } from "../composables/useTabs";
const { state, activateTab, closeTab, closeOtherTabs, closeAllTabs } = useTabs();
</script>
<style scoped>
@ -84,6 +68,14 @@ const { state, activateTab, closeTab, closeOtherTabs, closeAllTabs } = useTabs()
color: var(--text-color);
}
.tab-home {
margin-left: 10px;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tab-title {
flex: 1;
overflow: hidden;