gypsy-crm-frontend-vu/components/cwg-sidebar.vue

<template>
    <view class="cwg-sidebar">
        <view class="menu" v-for="(item, index) in menu" :key="item.path">
            <view class="menu-item" @click="handleClick(index)">
                <cwg-icon :name="item.icon" :size="20" color="#6c8595" />
                <view class="menu-label" v-t="item.label" />
                <view class="chevron-icon" :class="{ 'expanded': item.isOpenMenu }">
                    <cwg-icon v-if="item.children && item.children.length" name="crm-chevron-down" :size="20"
                        color="#6c8595" />
                </view>
            </view>
            <view ref="submenuRefs" class="submenu-box" :style="{
                height: item.isOpenMenu ? item.submenuHeight + 'px' : '0px',
                transition: 'height 281ms cubic-bezier(0.4, 0, 0.2, 1)'
            }" :class="{ 'active': item.isOpenMenu }">
                <cwg-submenu v-if="item.children" :submenu-items="item.children" @submenu-click="handleSubmenuClick" />
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick, watch } from 'vue';
import useRouter from "@/hooks/useRouter";
const router = useRouter();
import useRoute from '@/hooks/useRoute'
const route = useRoute()
interface MenuItem {
    key: string;
    label: string;
    icon?: string;
    children?: MenuItem[];
}
const emit = defineEmits(['menu-click']);
// 菜单数据
const menu = ref<MenuItem[]>([
    {
        isOpenMenu: false, submenuHeight: 0,
        path: '/pages/customer/index', label: 'Home.msg.Custom', icon: 'crm-house',
        children: [
            { path: '/pages/customer/index', label: 'Client Zone', icon: 'icon-client' },
            { path: '/pages/customer/promotion', label: 'Promotion Center', icon: 'icon-promotion' },
            { path: '/pages/customer/deposit', label: 'Deposit', icon: 'icon-deposit' },
            { path: '/pages/customer/withdrawal', label: 'Withdrawal', icon: 'icon-withdrawal' },
            { path: '/pages/customer/payment-history', label: 'Payment History', icon: 'icon-payment' },
            { path: '/pages/customer/transfer', label: 'Internal Transfer', icon: 'icon-transfer' },
            { path: '/pages/customer/recording-history', label: 'Application History', icon: 'icon-application' }
        ]
    },
    {
        isOpenMenu: false, submenuHeight: 0,
        path: '/pages/customer/index', label: 'Home.msg.Custom', icon: 'crm-house',
        children: []
    },
    {
        isOpenMenu: false,
        path: '/pages/customer/promotion', label: 'Home.msg.Ib', icon: 'crm-users',
        children: []
    },
    {
        path: '/pages/customer/deposit', isOpenMenu: false, label: 'Documentary.title', icon: 'crm-chart-area',
        children: []
    },
    {
        path: '/pages/customer/withdrawal', isOpenMenu: false, label: 'Downloadpage.item1', icon: 'crm-download',
        children: []
    },
    {
        path: '/pages/customer/support', isOpenMenu: false, label: 'Downloadpage.item16', icon: 'crm-headset',
        children: []
    },
]);
const submenuRefs = ref<any[]>([]);
const measureHeight = (element: HTMLElement): number => {
    const originalDisplay = element.style.display;
    const originalPosition = element.style.position;
    const originalVisibility = element.style.visibility;
    const originalWidth = element.style.width;
    element.style.display = 'block';
    element.style.position = 'absolute';
    element.style.visibility = 'hidden';
    element.style.width = '100%';
    const height = element.scrollHeight || element.offsetHeight;
    element.style.display = originalDisplay;
    element.style.position = originalPosition;
    element.style.visibility = originalVisibility;
    element.style.width = originalWidth;

    return height;
};
const updateSubmenuHeight = (index: number) => {
    const refs = submenuRefs.value;
    if (refs && refs[index]) {
        const el = refs[index].$el || refs[index];
        const height = measureHeight(el);

        if (height > 0) {
            menu.value[index].submenuHeight = height;
        }
    }
};
function handleClick(index: number) {
    menu.value[index].isOpenMenu = !menu.value[index].isOpenMenu;
}
watch(route, () => {
    const currentPath = route.path;
    menu.value.forEach((item, index) => {
        if (item.children) {
            const isActive = item.children.some(child => child.path === currentPath);
            menu.value[index].isOpenMenu = isActive;
            if (isActive) {
                nextTick(() => {
                    updateSubmenuHeight(index);
                });
            }
        }
    });
}, { immediate: true })

onMounted(() => {
    nextTick(() => {
        menu.value.forEach((item, index) => {
            if (item.children) {
                updateSubmenuHeight(index);
            }
        });
    });
});
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.cwg-sidebar {
    width: px2rpx(280);
    color: #6c8595;
    height: calc(100vh - 56px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: px2rpx(8);
    padding-top: px2rpx(20);
    box-sizing: border-box;
    gap: px2rpx(8);
    border-right: 1px solid rgba(108, 133, 149, 0.12);

    .logo {
        width: px2rpx(54);
    }

    .submenu-box {
        width: 100%;
        height: 0;
        overflow: hidden;
    }

    .menu {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;

    }

    .menu-item {
        width: 100%;
        height: px2rpx(40);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: px2rpx(8);
        padding: px2rpx(10);
        box-sizing: border-box;
        font-size: 14px;

        .menu-label {
            flex: 1;
        }

        &:hover {
            background: rgba(108, 133, 149, 0.12) !important;
            border: 1px solid rgb(145, 163, 176) !important;
            border-radius: px2rpx(4);
        }

        .expanded .icon {
            transform: rotate(180deg);
        }
    }
}
</style>