MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-17 22:03:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

replace navmenu

Browse Source
This commit is contained in:
pa
2026-01-16 17:11:54 +09:00
committed by Natsumi
parent 9cde6c5bb0
commit 78f3bc512d
9 changed files with 383 additions and 907 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/composables/useAuthenticatedLayoutResizable.js
View File

@@ -1,4 +1,4 @@
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useAppearanceSettingsStore } from '../stores';
@@ -6,16 +6,11 @@ import { useAppearanceSettingsStore } from '../stores';
import configRepository from '../service/config';
export function useAuthenticatedLayoutResizable() {
const navCollapsedPx = 64;
const navDefaultPx = 240;
const navMinPx = 180;
const navMaxPx = 300;
const asideMaxPx = 500;
const appearanceStore = useAppearanceSettingsStore();
const { setAsideWidth, setNavWidth } = appearanceStore;
const { asideWidth, isNavCollapsed, isSideBarTabShow, navWidth } =
storeToRefs(appearanceStore);
const { setAsideWidth } = appearanceStore;
const { asideWidth, isSideBarTabShow, isNavCollapsed } = storeToRefs(appearanceStore);
const fallbackWidth =
typeof window !== 'undefined' && window.innerWidth
@@ -23,9 +18,7 @@ export function useAuthenticatedLayoutResizable() {
: 1200;
const panelGroupRef = ref(null);
const navPanelRef = ref(null);
const asidePanelRef = ref(null);
const navExpandedSize = ref(null);
const groupWidth = ref(fallbackWidth);
const draggingCount = ref(0);
let resizeObserver = null;
@@ -70,27 +63,7 @@ export function useAuthenticatedLayoutResizable() {
const percentToPx = (percent, groupWidth) => (percent / 100) * groupWidth;
const isAsideCollapsed = (layout) =>
Array.isArray(layout) &&
layout.length >= 3 &&
layout[layout.length - 1] <= 1;
const navCollapsedSize = computed(() =>
pxToPercent(navCollapsedPx, groupWidth.value)
);
const navExpandedPx = computed(() => navWidth.value || navDefaultPx);
const navDefaultSize = computed(() =>
isNavCollapsed.value
? navCollapsedSize.value
: pxToPercent(navExpandedPx.value)
);
const navMinSize = computed(() =>
isNavCollapsed.value ? navCollapsedSize.value : pxToPercent(navMinPx)
);
const navMaxSize = computed(() =>
isNavCollapsed.value ? navCollapsedSize.value : pxToPercent(navMaxPx)
);
Array.isArray(layout) && layout.length >= 2 && layout[layout.length - 1] <= 1;
const asideDefaultSize = computed(() =>
pxToPercent(asideWidth.value, undefined, 0)
@@ -98,14 +71,11 @@ export function useAuthenticatedLayoutResizable() {
const asideMaxSize = computed(() => pxToPercent(asideMaxPx, undefined, 0));
const mainDefaultSize = computed(
() =>
100 -
navDefaultSize.value -
(isSideBarTabShow.value ? asideDefaultSize.value : 0)
() => 100 - (isSideBarTabShow.value ? asideDefaultSize.value : 0)
);
const handleLayout = (sizes) => {
if (!Array.isArray(sizes) || sizes.length < 2) {
if (!Array.isArray(sizes) || sizes.length < 1) {
return;
}
@@ -113,22 +83,16 @@ export function useAuthenticatedLayoutResizable() {
return;
}
if (!isSideBarTabShow.value || sizes.length < 2) {
return;
}
const rawWidth = getGroupWidthRaw();
if (!Number.isFinite(rawWidth) || rawWidth <= 0) {
return;
}
const width = rawWidth;
const navSize = sizes[0];
if (!isNavCollapsed.value && Number.isFinite(navSize) && navSize > 0) {
navExpandedSize.value = navSize;
setNavWidth(Math.round(percentToPx(navSize, width)));
}
if (!isSideBarTabShow.value || sizes.length < 3) {
return;
}
const asideSize = sizes[sizes.length - 1];
if (!Number.isFinite(asideSize)) {
return;
@@ -142,9 +106,6 @@ export function useAuthenticatedLayoutResizable() {
setAsideWidth(Math.round(percentToPx(asideSize, width)));
};
const resizeNavPanel = (targetSize) =>
navPanelRef.value?.resize?.(targetSize);
const resizeAsidePanel = (targetSize) =>
asidePanelRef.value?.resize?.(targetSize);
@@ -152,14 +113,6 @@ export function useAuthenticatedLayoutResizable() {
const width = getGroupWidth();
groupWidth.value = width;
if (isNavCollapsed.value) {
resizeNavPanel(navCollapsedSize.value);
} else {
const targetSize = pxToPercent(navExpandedPx.value, width);
navExpandedSize.value = targetSize;
resizeNavPanel(targetSize);
}
if (!isSideBarTabShow.value) {
return;
}
@@ -194,27 +147,9 @@ export function useAuthenticatedLayoutResizable() {
}
};
watch(isNavCollapsed, async (collapsed) => {
await nextTick();
if (collapsed) {
resizeNavPanel(navCollapsedSize.value);
return;
}
const targetSize =
navExpandedSize.value ?? pxToPercent(navExpandedPx.value);
resizeNavPanel(targetSize);
});
onMounted(async () => {
await nextTick();
updateGroupWidth();
let panelSize = null;
panelSize = navPanelRef.value?.getSize?.() ?? null;
navExpandedSize.value = panelSize ?? navDefaultSize.value;
if (isNavCollapsed.value) {
resizeNavPanel(navCollapsedSize.value);
}
const element = panelGroupRef.value?.$el ?? panelGroupRef.value;
if (element && typeof ResizeObserver !== 'undefined') {
@@ -232,11 +167,7 @@ export function useAuthenticatedLayoutResizable() {
return {
panelGroupRef,
navPanelRef,
asidePanelRef,
navDefaultSize,
navMinSize,
navMaxSize,
asideDefaultSize,
asideMaxSize,
mainDefaultSize,