79 lines
2.0 KiB
TypeScript
79 lines
2.0 KiB
TypeScript
import { defineStore } from "pinia";
|
|
|
|
interface Tab {
|
|
key: number; // 1~10
|
|
label: string;
|
|
to: string; // 페이지 라우트
|
|
componentName: string;
|
|
}
|
|
|
|
const defaultTab = { key: 1, label: "홈", to: "/", componentName: "home" };
|
|
|
|
export const useTabsStore = defineStore("tabs", {
|
|
state: () => ({
|
|
tabs: [defaultTab] as Tab[],
|
|
activeTab: 1,
|
|
}),
|
|
actions: {
|
|
// 새 탭 추가 (기본 페이지는 "/")
|
|
addTab() {
|
|
const { $router } = useNuxtApp();
|
|
|
|
if (this.tabs.length >= 10) {
|
|
alert("탭은 최대 10개까지 열 수 있습니다.");
|
|
return;
|
|
}
|
|
// 빈 key 찾기
|
|
let key = 1;
|
|
while (this.tabs.find(t => t.key === key)) key++;
|
|
|
|
this.tabs.push({ ...defaultTab, key: key });
|
|
this.activeTab = key;
|
|
$router.push(defaultTab.to);
|
|
return key;
|
|
},
|
|
|
|
// 활성 탭 내용 변경 (서브메뉴 클릭)
|
|
updateActiveTab(sub: { label: string; to: string; componentName: string }) {
|
|
const { $router } = useNuxtApp();
|
|
|
|
const tab = this.tabs.find(t => t.key === this.activeTab);
|
|
if (tab) {
|
|
tab.label = sub.label;
|
|
tab.to = sub.to;
|
|
tab.componentName = sub.componentName;
|
|
}
|
|
$router.push(`/${tab?.key}${tab?.to}`);
|
|
},
|
|
|
|
// 활설 탭 제거
|
|
removeTab(key: number) {
|
|
this.tabs = this.tabs.filter(t => t.key !== key);
|
|
if (this.activeTab === key) {
|
|
this.activeTab = this.tabs.length
|
|
? this.tabs[this.tabs.length - 1].key
|
|
: 0;
|
|
}
|
|
},
|
|
|
|
// 활성 탭 변경
|
|
setActiveTab(key: number) {
|
|
const { $router } = useNuxtApp();
|
|
this.activeTab = key;
|
|
|
|
const tab = this.tabs.find(t => t.key === this.activeTab);
|
|
$router.push(`/${tab?.key}${tab?.to}`);
|
|
},
|
|
|
|
// 탭 초기화
|
|
resetTabs() {
|
|
const { $router } = useNuxtApp();
|
|
|
|
this.tabs = [defaultTab];
|
|
this.activeTab = 1;
|
|
$router.push(defaultTab.to);
|
|
},
|
|
},
|
|
persist: true,
|
|
});
|