gypsy-crm-frontend-vu/components/cwg-right-drawer.vue

<template>
    <uni-popup ref="popupRef" type="right" background-color="#f5f5f5">
        <view class="right-drawer">
            <view class="drawer-header">
                <image class="avatar" src="/static/logo.png" mode="aspectFill" />
                <view class="user-info">
                    <text class="name">{{ displayName }}</text>
                    <text class="cid">CID: {{ displayCid }}</text>
                </view>
            </view>

            <view class="menu-list">
                <view v-for="item in menuList" :key="item.key" class="menu-item"
                    :class="{ active: activePath === item.path }" @click="handleNavigate(item.path)">
                    <cwg-icon :name="item.icon" :size="16" :color="activePath === item.path ? '#fff' : '#0f172b'" />
                    <text>{{ item.name }}</text>
                </view>
            </view>
            <view class="logout-wrap">
                <view class="logout-btn" @click="handleLogout">
                    <cwg-icon name="logout" :size="16" color="#ff9800" />
                    <text>Logout</text>
                </view>
            </view>
        </view>
    </uni-popup>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import useRoute from '@/hooks/useRoute'
import useUserStore from '@/stores/use-user-store'
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const emit = defineEmits<{
    (e: 'navigate', path: string): void
    (e: 'logout'): void
}>()

const popupRef = ref<any>(null)
const userStore = useUserStore()
const userInfo = computed<any>(() => userStore.userInfo || {})
const route = useRoute()
const menuList = computed(() => [
    {
        id: 1, path: '/pages/mine/info?type=1', name: t('PersonalManagement.Title.PersonalInformation'), icon: 'crm-circle-user'
    },
    {
        id: 2, path: '/pages/mine/info?type=2', name: t('PersonalManagement.Title.BankInformation'), icon: 'crm-building-columns'
    },
    {
        id: 3, path: '/pages/mine/info?type=3', name: t('PersonalManagement.Title.FileManagement'), icon: 'crm-file'
    },
    {
        id: 4, path: '/pages/mine/info?type=4', name: t('PersonalManagement.Title.SecurityCenter'), icon: 'crm-lock'
    }
]);

const displayName = computed(() => {
    const fullName = `${userInfo.value?.firstName || ''} ${userInfo.value?.lastName || ''}`.trim()
    return fullName || userInfo.value?.name || userInfo.value?.email || '--'
})

const displayCid = computed(() => userInfo.value?.cId || userInfo.value?.id || '--')
const activePath = computed(() => route.path + (route.query?.type ? `?type=${route.query.type}` : '') || '')

function open() {
    popupRef.value?.open()
}

function close() {
    popupRef.value?.close()
}

function handleNavigate(path: string) {
    emit('navigate', path)
    close()
}

function handleLogout() {
    emit('logout')
    close()
}

defineExpose({
    open,
    close
})
</script>

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

.right-drawer {
    width: 300px;
    height: 100vh;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    padding: 20px 16px;
}

.drawer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    border-bottom: 1px solid #d9dde5;
}

.avatar {
    width: 76px;
    height: 76px;
    border-radius: 12px;
    background: #fff;
}

.user-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.name {
    font-size: 20px;
    font-weight: 600;
    color: #334155;
}

.cid {
    font-size: 14px;
    color: #ef4444;
}

.menu-list {
    padding: 12px 0;
}

.menu-item {
    height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    color: #0f172b;
    font-size: 16px;
    font-weight: 600;
}

.menu-item.active {
    background: #ea2027;
    color: #fff;
}

.logout-wrap {
    margin-top: auto;
    padding: 20px 16px;
    margin-bottom: 20px;
}

.logout-btn {
    height: 44px;
    background: #f4eadf;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ff9800;
    font-weight: 600;
}
</style>