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

<template>
    <view class="cwg-submenu">
        <view class="submenu">
            <view class="cwg-submenu-item" :class="{ 'active': activePath === item.path }" v-for="item in submenuItems"
                :key="item.path" @click="handleClick(item)">
                <text v-t="item.label"></text>
                <cwg-icon v-if="item.isExternal" name="crm-fx" :size="20" :color="!isDark ? '#6c8595' : '#fff'" />
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { computed, watch, nextTick } from 'vue';
import { openExternalUrl } from '@/utils/openExternalUrl'
import { useI18n } from 'vue-i18n'
import { lang } from '@/composables/config'
import { switchAppLanguage } from '@/locale/index'
const { locale } = useI18n()
import useRouter from "@/hooks/useRouter";
const router = useRouter();
import useRoute from '@/hooks/useRoute'
const route = useRoute()
import useGlobalStore from '@/stores/use-global-store'
const globalStore = useGlobalStore()
const isDark = computed(() => globalStore.theme === 'dark')
interface MenuItem {
    key: string;
    label: string;
    icon?: string;
    type?: string;
    lang?: string;
    path?: string;
    isExternal?: boolean;
    children?: MenuItem[];
}
const props = defineProps({
    submenuItems: {
        type: Array as () => MenuItem[],
        default: () => []
    }
})
const activePath = computed(() => route.path + (route.query?.type ? `?type=${route.query.type}` : '') || '')
const emit = defineEmits(['submenu-click']);
function handleClick(item: MenuItem) {
    if (item.type == 'lang') {
        handleMenuClick(item.lang)
    } else {
        if (item.isExternal) {
            openExternalUrl(item.path);
        } else if (route.path !== item.path) {
            router.push(item.path);
        }
    }
    emit('submenu-click', item)
}

function handleMenuClick(a: string) {
    switchAppLanguage(a, { locale, lang })
}
</script>

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

.cwg-submenu {
    width: 100%;

    .submenu {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: px2rpx(8);
        padding: px2rpx(8) px2rpx(8) px2rpx(8) px2rpx(32);
        box-sizing: border-box;
    }

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

        .tabler-icon-external-link {
            width: px2rpx(20);
            height: px2rpx(20);
        }

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

        &.active {
            background: rgba(108, 133, 149, 0.12) !important;
            border-radius: px2rpx(4);
        }
    }
}
</style>