初始化
This commit is contained in:
149
src/layouts/modules/global-tab/context-menu.vue
Normal file
149
src/layouts/modules/global-tab/context-menu.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import type { VNode } from 'vue';
|
||||
import type { DropdownInstance } from 'element-plus';
|
||||
import { useTabStore } from '@/store/modules/tab';
|
||||
import { useSvgIcon } from '@/hooks/common/icon';
|
||||
import { $t } from '@/locales';
|
||||
|
||||
defineOptions({ name: 'ContextMenu' });
|
||||
|
||||
interface Props {
|
||||
/** ClientX */
|
||||
x: number;
|
||||
/** ClientY */
|
||||
y: number;
|
||||
tabId: string;
|
||||
excludeKeys?: App.Global.DropdownKey[];
|
||||
disabledKeys?: App.Global.DropdownKey[];
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
excludeKeys: () => [],
|
||||
disabledKeys: () => []
|
||||
});
|
||||
|
||||
const { removeTab, clearTabs, clearLeftTabs, clearRightTabs } = useTabStore();
|
||||
const { SvgIconVNode } = useSvgIcon();
|
||||
|
||||
type DropdownOption = {
|
||||
key: App.Global.DropdownKey;
|
||||
label: string;
|
||||
icon?: () => VNode;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
const options = computed(() => {
|
||||
const opts: DropdownOption[] = [
|
||||
{
|
||||
key: 'closeCurrent',
|
||||
label: $t('dropdown.closeCurrent'),
|
||||
icon: SvgIconVNode({ icon: 'ant-design:close-outlined', fontSize: 18 })
|
||||
},
|
||||
{
|
||||
key: 'closeOther',
|
||||
label: $t('dropdown.closeOther'),
|
||||
icon: SvgIconVNode({ icon: 'ant-design:column-width-outlined', fontSize: 18 })
|
||||
},
|
||||
{
|
||||
key: 'closeLeft',
|
||||
label: $t('dropdown.closeLeft'),
|
||||
icon: SvgIconVNode({ icon: 'mdi:format-horizontal-align-left', fontSize: 18 })
|
||||
},
|
||||
{
|
||||
key: 'closeRight',
|
||||
label: $t('dropdown.closeRight'),
|
||||
icon: SvgIconVNode({ icon: 'mdi:format-horizontal-align-right', fontSize: 18 })
|
||||
},
|
||||
{
|
||||
key: 'closeAll',
|
||||
label: $t('dropdown.closeAll'),
|
||||
icon: SvgIconVNode({ icon: 'ant-design:line-outlined', fontSize: 18 })
|
||||
}
|
||||
];
|
||||
const { excludeKeys, disabledKeys } = props;
|
||||
|
||||
const result = opts.filter(opt => !excludeKeys.includes(opt.key));
|
||||
|
||||
disabledKeys.forEach(key => {
|
||||
const opt = result.find(item => item.key === key);
|
||||
|
||||
if (opt) {
|
||||
opt.disabled = true;
|
||||
}
|
||||
});
|
||||
|
||||
return result;
|
||||
});
|
||||
|
||||
const visible = defineModel<boolean>('visible');
|
||||
|
||||
const dropdown = ref<DropdownInstance>();
|
||||
|
||||
watch(visible, val => {
|
||||
if (val) {
|
||||
dropdown.value!.handleOpen();
|
||||
} else {
|
||||
dropdown.value!.handleClose();
|
||||
}
|
||||
});
|
||||
|
||||
function hideDropdown() {
|
||||
visible.value = false;
|
||||
dropdown.value!.handleClose();
|
||||
}
|
||||
|
||||
const dropdownAction: Record<App.Global.DropdownKey, () => void> = {
|
||||
closeCurrent() {
|
||||
removeTab(props.tabId);
|
||||
},
|
||||
closeOther() {
|
||||
clearTabs([props.tabId]);
|
||||
},
|
||||
closeLeft() {
|
||||
clearLeftTabs(props.tabId);
|
||||
},
|
||||
closeRight() {
|
||||
clearRightTabs(props.tabId);
|
||||
},
|
||||
closeAll() {
|
||||
clearTabs();
|
||||
}
|
||||
};
|
||||
|
||||
function handleDropdown(optionKey: App.Global.DropdownKey) {
|
||||
dropdownAction[optionKey]?.();
|
||||
hideDropdown();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="absolute" :style="{ top: `${y - 60}px`, left: `${x + 60}px` }">
|
||||
<ElDropdown ref="dropdown" popper-class="arrow-hide" trigger="click" @command="handleDropdown">
|
||||
<!-- Avoid waning: [ElOnlyChild] no valid child node found -->
|
||||
<span></span>
|
||||
<template #dropdown>
|
||||
<ElDropdownMenu>
|
||||
<ElDropdownItem
|
||||
v-for="{ key, label, icon, disabled } in options"
|
||||
:key="key"
|
||||
class="mx-4px my-1px rounded-6px"
|
||||
:icon="icon"
|
||||
:command="key"
|
||||
:disabled="disabled"
|
||||
>
|
||||
{{ label }}
|
||||
</ElDropdownItem>
|
||||
</ElDropdownMenu>
|
||||
</template>
|
||||
</ElDropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.arrow-hide {
|
||||
.el-popper__arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
208
src/layouts/modules/global-tab/index.vue
Normal file
208
src/layouts/modules/global-tab/index.vue
Normal file
@@ -0,0 +1,208 @@
|
||||
<script setup lang="ts">
|
||||
import { nextTick, ref, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useElementBounding } from '@vueuse/core';
|
||||
import { PageTab } from '@sa/materials';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { useTabStore } from '@/store/modules/tab';
|
||||
import { isPC } from '@/utils/agent';
|
||||
import BetterScroll from '@/components/custom/better-scroll.vue';
|
||||
import ContextMenu from './context-menu.vue';
|
||||
|
||||
defineOptions({ name: 'GlobalTab' });
|
||||
|
||||
const route = useRoute();
|
||||
const appStore = useAppStore();
|
||||
const themeStore = useThemeStore();
|
||||
const tabStore = useTabStore();
|
||||
|
||||
const bsWrapper = ref<HTMLElement>();
|
||||
const { width: bsWrapperWidth, left: bsWrapperLeft } = useElementBounding(bsWrapper);
|
||||
const bsScroll = ref<InstanceType<typeof BetterScroll>>();
|
||||
const tabRef = ref<HTMLElement>();
|
||||
const isPCFlag = isPC();
|
||||
|
||||
const TAB_DATA_ID = 'data-tab-id';
|
||||
|
||||
type TabNamedNodeMap = NamedNodeMap & {
|
||||
[TAB_DATA_ID]: Attr;
|
||||
};
|
||||
|
||||
async function scrollToActiveTab() {
|
||||
await nextTick();
|
||||
if (!tabRef.value) return;
|
||||
|
||||
const { children } = tabRef.value;
|
||||
|
||||
for (let i = 0; i < children.length; i += 1) {
|
||||
const child = children[i];
|
||||
|
||||
const { value: tabId } = (child.attributes as TabNamedNodeMap)[TAB_DATA_ID];
|
||||
|
||||
if (tabId === tabStore.activeTabId) {
|
||||
const { left, width } = child.getBoundingClientRect();
|
||||
const clientX = left + width / 2;
|
||||
|
||||
setTimeout(() => {
|
||||
scrollByClientX(clientX);
|
||||
}, 50);
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function scrollByClientX(clientX: number) {
|
||||
const currentX = clientX - bsWrapperLeft.value;
|
||||
const deltaX = currentX - bsWrapperWidth.value / 2;
|
||||
|
||||
if (bsScroll.value?.instance) {
|
||||
const { maxScrollX, x: leftX, scrollBy } = bsScroll.value.instance;
|
||||
|
||||
const rightX = maxScrollX - leftX;
|
||||
const update = deltaX > 0 ? Math.max(-deltaX, rightX) : Math.min(-deltaX, -leftX);
|
||||
|
||||
scrollBy(update, 0, 300);
|
||||
}
|
||||
}
|
||||
|
||||
function getContextMenuDisabledKeys(tabId: string) {
|
||||
const disabledKeys: App.Global.DropdownKey[] = [];
|
||||
|
||||
if (tabStore.isTabRetain(tabId)) {
|
||||
const homeDisable: App.Global.DropdownKey[] = ['closeCurrent', 'closeLeft'];
|
||||
disabledKeys.push(...homeDisable);
|
||||
}
|
||||
|
||||
return disabledKeys;
|
||||
}
|
||||
|
||||
function handleCloseTab(tab: App.Global.Tab) {
|
||||
tabStore.removeTab(tab.id);
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
appStore.reloadPage(500);
|
||||
}
|
||||
|
||||
interface DropdownConfig {
|
||||
visible: boolean;
|
||||
x: number;
|
||||
y: number;
|
||||
tabId: string;
|
||||
}
|
||||
|
||||
const dropdown = ref<DropdownConfig>({
|
||||
visible: false,
|
||||
x: 0,
|
||||
y: 0,
|
||||
tabId: ''
|
||||
});
|
||||
|
||||
function setDropdown(config: Partial<DropdownConfig>) {
|
||||
Object.assign(dropdown.value, config);
|
||||
}
|
||||
|
||||
let isClickContextMenu = false;
|
||||
|
||||
function handleDropdownVisible(visible: boolean | undefined) {
|
||||
if (!isClickContextMenu) {
|
||||
setDropdown({ visible });
|
||||
}
|
||||
}
|
||||
|
||||
async function handleContextMenu(e: MouseEvent, tabId: string) {
|
||||
e.preventDefault();
|
||||
|
||||
const { clientX, clientY } = e;
|
||||
|
||||
isClickContextMenu = true;
|
||||
|
||||
const DURATION = dropdown.value.visible ? 150 : 0;
|
||||
|
||||
setDropdown({ visible: false });
|
||||
|
||||
setTimeout(() => {
|
||||
setDropdown({
|
||||
visible: true,
|
||||
x: clientX,
|
||||
y: clientY,
|
||||
tabId
|
||||
});
|
||||
isClickContextMenu = false;
|
||||
}, DURATION);
|
||||
}
|
||||
|
||||
function init() {
|
||||
tabStore.initTabStore(route);
|
||||
}
|
||||
|
||||
function removeFocus() {
|
||||
(document.activeElement as HTMLElement)?.blur();
|
||||
}
|
||||
|
||||
// watch
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
() => {
|
||||
tabStore.addTab(route);
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => tabStore.activeTabId,
|
||||
() => {
|
||||
scrollToActiveTab();
|
||||
}
|
||||
);
|
||||
|
||||
// init
|
||||
init();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DarkModeContainer class="size-full flex-y-center px-16px shadow-tab">
|
||||
<div ref="bsWrapper" class="h-full flex-1-hidden">
|
||||
<BetterScroll ref="bsScroll" :options="{ scrollX: true, scrollY: false, click: !isPCFlag }" @click="removeFocus">
|
||||
<div
|
||||
ref="tabRef"
|
||||
class="h-full flex pr-18px"
|
||||
:class="[themeStore.tab.mode === 'chrome' ? 'items-end' : 'items-center gap-12px']"
|
||||
>
|
||||
<PageTab
|
||||
v-for="tab in tabStore.tabs"
|
||||
:key="tab.id"
|
||||
:[TAB_DATA_ID]="tab.id"
|
||||
:mode="themeStore.tab.mode"
|
||||
:dark-mode="themeStore.darkMode"
|
||||
:active="tab.id === tabStore.activeTabId"
|
||||
:active-color="themeStore.themeColor"
|
||||
:closable="!tabStore.isTabRetain(tab.id)"
|
||||
@click="tabStore.switchRouteByTab(tab)"
|
||||
@close="handleCloseTab(tab)"
|
||||
@contextmenu="handleContextMenu($event, tab.id)"
|
||||
>
|
||||
<template #prefix>
|
||||
<SvgIcon :icon="tab.icon" :local-icon="tab.localIcon" class="inline-block align-text-bottom text-16px" />
|
||||
</template>
|
||||
<div class="max-w-240px ellipsis-text">{{ tab.label }}</div>
|
||||
</PageTab>
|
||||
</div>
|
||||
</BetterScroll>
|
||||
</div>
|
||||
<div>
|
||||
<ReloadButton :loading="!appStore.reloadFlag" @click="refresh" />
|
||||
</div>
|
||||
<FullScreen :full="appStore.fullContent" @click="appStore.toggleFullContent" />
|
||||
</DarkModeContainer>
|
||||
<ContextMenu
|
||||
:visible="dropdown.visible"
|
||||
:tab-id="dropdown.tabId"
|
||||
:disabled-keys="getContextMenuDisabledKeys(dropdown.tabId)"
|
||||
:x="dropdown.x"
|
||||
:y="dropdown.y"
|
||||
@update:visible="handleDropdownVisible"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user