kjh2064/KArtSell.Aegis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(fe): replace tab text action buttons with ultra-compact 3-dot dropdown menu

Browse Source
This commit is contained in:
김재현
2026-08-15 21:08:23 +09:00
parent b24f97c81c
commit 2d8d710d0a
1 changed files with 102 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/shared/shell/KsTabs.vue
+102 -42
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed } from 'vue'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useLayoutStore } from './layoutStore'
@@ -28,12 +28,21 @@ const handleCloseTab = (event: Event, tabId: string) => {
}
}
const showMenu = ref(false)
const toggleMenu = (event: Event) => {
event.stopPropagation()
showMenu.value = !showMenu.value
}
const handleCloseOther = (tabId: string) => {
layoutStore.closeOtherTabs(tabId)
showMenu.value = false
}
const handleCloseAll = () => {
layoutStore.closeAllTabs()
showMenu.value = false
}
const isTabActive = (tabId: string) => activeTabId.value === tabId
@@ -65,33 +74,42 @@ const isTabActive = (tabId: string) => activeTabId.value === tabId
</div>
</div>
<!-- Tab actions -->
<div v-if="tabs.length > 0" class="ks-tabs__actions">
<button
v-if="tabs.length > 1 && activeTabId"
type="button"
class="ks-tabs__action-btn"
title="다른 탭 닫기"
aria-label="다른 탭 닫기"
@click="handleCloseOther(activeTabId!)"
>
<svg class="ks-tabs__action-icon" viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
<path d="M4.5 1.75a.75.75 0 0 0-1.5 0v12.5a.75.75 0 0 0 1.5 0V1.75zM13 3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V3z"/>
</svg>
<span>다른 탭 닫기</span>
</button>
<!-- Compact Tab Actions Dropdown -->
<div v-if="tabs.length > 0" class="ks-tabs__menu-wrapper">
<button
type="button"
class="ks-tabs__action-btn"
title="전체 탭 닫기"
aria-label="전체 탭 닫기"
@click="handleCloseAll"
class="ks-tabs__menu-trigger"
title="탭 작업 옵션"
aria-label="탭 작업 옵션"
@click="toggleMenu"
>
<svg class="ks-tabs__action-icon" viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
<path d="M2.343 2.343a.75.75 0 0 1 1.061 0L8 7.06l4.596-4.717a.75.75 0 1 1 1.06 1.06L9.06 8l4.596 4.596a.75.75 0 1 1-1.06 1.06L8 9.06l-4.596 4.596a.75.75 0 0 1-1.06-1.06L6.94 8 2.343 3.404a.75.75 0 0 1 0-1.061z"/>
</svg>
<span>전체 닫기</span>
⋮
</button>
<!-- Dropdown Menu -->
<div v-if="showMenu" class="ks-tabs__dropdown" @mouseleave="showMenu = false">
<button
v-if="tabs.length > 1 && activeTabId"
type="button"
class="ks-tabs__dropdown-item"
@click="handleCloseOther(activeTabId!)"
>
<svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
<path d="M4.5 1.75a.75.75 0 0 0-1.5 0v12.5a.75.75 0 0 0 1.5 0V1.75zM13 3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V3z"/>
</svg>
<span>다른 탭 닫기</span>
</button>
<button
type="button"
class="ks-tabs__dropdown-item ks-tabs__dropdown-item--danger"
@click="handleCloseAll"
>
<svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
<path d="M2.343 2.343a.75.75 0 0 1 1.061 0L8 7.06l4.596-4.717a.75.75 0 1 1 1.06 1.06L9.06 8l4.596 4.596a.75.75 0 1 1-1.06 1.06L8 9.06l-4.596 4.596a.75.75 0 0 1-1.06-1.06L6.94 8 2.343 3.404a.75.75 0 0 1 0-1.061z"/>
</svg>
<span>전체 탭 닫기</span>
</button>
</div>
</div>
</nav>
</template>
@@ -183,40 +201,82 @@ const isTabActive = (tabId: string) => activeTabId.value === tabId
opacity: 1;
}
.ks-tabs__actions {
.ks-tabs__menu-wrapper {
position: relative;
display: flex;
align-items: center;
gap: var(--ks-space-1);
flex-shrink: 0;
border-left: 1px solid var(--ks-color-border);
padding-left: var(--ks-space-2);
margin-left: var(--ks-space-2);
padding-left: var(--ks-space-1);
margin-left: var(--ks-space-1);
}
.ks-tabs__action-btn {
display: inline-flex;
.ks-tabs__menu-trigger {
display: flex;
align-items: center;
gap: var(--ks-space-1);
background: var(--ks-color-surface);
border: 1px solid var(--ks-color-border);
justify-content: center;
width: 24px;
height: 24px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--ks-radius-sm);
color: var(--ks-color-text-muted);
cursor: pointer;
padding: 3px 8px;
height: 26px;
border-radius: var(--ks-radius-sm);
font-size: 16px;
font-weight: bold;
transition: var(--ks-transition-fast);
font-size: var(--ks-font-caption);
white-space: nowrap;
}
.ks-tabs__action-btn:hover {
.ks-tabs__menu-trigger:hover {
background-color: var(--ks-color-neutral-100);
color: var(--ks-color-text);
border-color: var(--ks-color-neutral-300);
border-color: var(--ks-color-border);
}
.ks-tabs__action-icon {
flex-shrink: 0;
.ks-tabs__dropdown {
position: absolute;
top: 100%;
right: 0;
margin-top: 4px;
background: var(--ks-color-surface);
border: 1px solid var(--ks-color-border);
border-radius: var(--ks-radius-sm);
box-shadow: var(--ks-shadow-md);
padding: 4px;
display: flex;
flex-direction: column;
gap: 2px;
z-index: 120;
min-width: 120px;
}
.ks-tabs__dropdown-item {
display: flex;
align-items: center;
gap: var(--ks-space-2);
width: 100%;
padding: 5px 8px;
background: transparent;
border: none;
border-radius: var(--ks-radius-sm);
color: var(--ks-color-text);
font-size: var(--ks-font-caption);
cursor: pointer;
text-align: left;
white-space: nowrap;
transition: var(--ks-transition-fast);
}
.ks-tabs__dropdown-item:hover {
background-color: var(--ks-color-neutral-100);
}
.ks-tabs__dropdown-item--danger {
color: var(--ks-color-danger);
}
.ks-tabs__dropdown-item--danger:hover {
background-color: rgba(220, 38, 38, 0.08);
}
/* Scrollbar styling */