eiacloud-mcp-ui/src/components/pcHeader.vue

<template>
    <header class="desktop-header">
        <div class="header-inner">
            <div class="header-left">
                <div class="brand-wrapper" @click="navigateToRoute('/')">
                    <icon-svg name="systemLogoCircle" size="40px" />
                    <div class="brand-text">
                        <span class="brand-title">环评云助手</span>
                    </div>
                </div>
                <nav class="navigation-list" aria-label="顶部导航">
                    <button v-for="navigationItem in desktopNavigationItems" :key="navigationItem.key" type="button"
                        class="navigation-item" :class="{ active: isNavigationActive(navigationItem) }"
                        @click="handleNavigationClick(navigationItem)">
                        <div class="ai-auto-fill" v-if="navigationItem.key === 'publicPlatform'">
                            <img src="https://cdntest.eiacloud.com/hpyzs/ai-auto-fill.png">
                            <span>AI填写</span>
                        </div>
                        {{ navigationItem.label }}
                    </button>

                    <button
                        type="button"
                        class="navigation-item active"
                        @click="navigateToRoute('/')"
                    >
                        MCP服务
                    </button>

                    <div class="upload-metrial">
                        <div class="top-load">
                            <img src="https://cdntest.eiacloud.com/ai/approval/icons/upload_metrial.png" alt="上传">
                            <span>资料</span>
                        </div>
                        <div class="upload-category">
                            <ul class="upload-category-wrapper">
                                <li v-for="uploadMaterialItem in uploadMaterialItems"
                                    :key="uploadMaterialItem.shareType" class="upload-category-li"
                                    @click="handleUploadMaterialClick(uploadMaterialItem.shareType)">
                                    <img :src="uploadMaterialItem.icon" :alt="uploadMaterialItem.label">
                                    <span>{{ uploadMaterialItem.label }}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
            <div class="header-right">
                <a class="head-middle-link" :href="orgDomain + '/#/home/control?openVip=1'" target="_blank">
                    <img src="https://cdntest.eiacloud.com/pc/banner/upgrade_enp_vip_1.png" alt="限时钜惠">
                </a>
                <div v-for="quickActionItem in quickActionItems" :key="quickActionItem.key" class="quick-action-wrapper"
                    :class="{ 'has-dropdown': quickActionItem.key === 'client' }">
                    <button type="button" class="text-action" @click="handleQuickActionClick(quickActionItem)">
                        <icon-svg v-if="quickActionItem.iconName" :name="quickActionItem.iconName" size="14px" />
                        <span>{{ quickActionItem.label }}</span>
                    </button>
                    <div v-if="quickActionItem.key === 'client'" class="aq-dropdown">
                        <div class="aq-down-app">
                            <img src="@/assets/images/siderBar/appInstallPkg.png" alt="APP下载二维码" class="aq-qr-image">
                            <div class="download-app-contents">
                                <div class="download-app-text">
                                    <div>扫一扫下载APP</div>
                                </div>
                                <a :href="CLIENT_DOWNLOAD_PAGE_URL" target="_blank" rel="noopener noreferrer"
                                    class="gda-btn gda-btn-sm">
                                    <span>手机/电脑端下载</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="isLoggedIn" class="user-panel-wrapper" @mouseleave="hideFeedbackPopover">
                    <button type="button" class="avatar-button" @click="emit('user-center')">
                        <img :src="userAvatar" alt="用户头像" class="avatar-image" />
                    </button>
                    <div class="user-profile-dropdown">
                        <div class="user-profile-panel">
                            <div class="panel-top">
                                <div class="panel-top-right">
                                    <div class="panel-top-right-primary">
                                        <span class="panel-user-name">{{ userDisplayName }}</span>
                                        <img :src="levelBadgeImg" alt="等级" class="panel-level-badge" />
                                        <span class="panel-vip-badge">
                                            <img :src="vipBadgeImg" alt="会员状态" />
                                        </span>
                                    </div>
                                    <div class="panel-top-right-secondary">
                                        <div class="panel-balance-item">
                                            <img :src="USER_PANEL_ASSETS.yunbeiBadge" alt="云贝" class="panel-status-icon" />
                                            <span>云贝：{{ userYundbeiCount }}</span>
                                        </div>
                                        <div class="panel-balance-item">
                                            <icon-svg name="top_yd" size="16px" class="panel-yundian-icon" />
                                            <span>云点：{{ userYundianCount }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel-bottom">
                                <template v-for="menuItem in userProfileMenuItems" :key="menuItem.key">
                                    <el-popover
                                        v-if="menuItem.action === 'feedback'"
                                        ref="feedbackPopoverRef"
                                        placement="left-start"
                                        :width="140"
                                        trigger="hover"
                                        :offset="8"
                                        :teleported="false"
                                        :show-after="120"
                                        :hide-after="80"
                                        popper-class="user-panel-feedback-popover"
                                    >
                                        <template #reference>
                                            <div class="panel-menu-item panel-menu-item-feedback">
                                                <img
                                                    :src="menuItem.icon"
                                                    :alt="menuItem.label"
                                                    class="panel-menu-icon"
                                                />
                                                <span class="panel-menu-text">{{ menuItem.label }}</span>
                                            </div>
                                        </template>
                                        <div class="weChatService">
                                            <img
                                                src="@/assets/images/siderBar/weChatService.png"
                                                alt="微信客服二维码"
                                            />
                                            <span>扫码添加微信客服</span>
                                        </div>
                                    </el-popover>
                                    <button
                                        v-else
                                        type="button"
                                        class="panel-menu-item"
                                        @click="handleUserPanelAction(menuItem)"
                                    >
                                        <img
                                            :src="menuItem.icon"
                                            :alt="menuItem.label"
                                            class="panel-menu-icon"
                                            :class="{ 'panel-menu-icon-upload': menuItem.key === 'upload' }"
                                        />
                                        <span
                                            class="panel-menu-text"
                                            :class="{ 'panel-menu-text-logout': menuItem.key === 'logout' }"
                                        >
                                            {{ menuItem.label }}
                                            <span v-if="menuItem.showDot" class="panel-menu-dot"></span>
                                        </span>
                                    </button>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
                <p class="login-button" v-else @click="$emit('login')">登录 | 注册</p>
            </div>
        </div>
    </header>
</template>

<script setup>
import { computed, ref } from "vue";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { loginout } from "@/api/login";
import globalStore from "@/store/modules/global";
import { isPcBoolean, orgDomain } from "@/utils/config";

const CLIENT_DOWNLOAD_URL =
    "https://www.eiacloud.com/hpy/jx/apk/download.html";
const CLIENT_DOWNLOAD_PAGE_URL = "https://www.eiacloud.com/bbs/download";
const HOME_WEBSITE_URL = "https://www.eiacloud.com/hpyzs/";
const HOME_WEBSITE_LEARN_URL = "https://www.eiacloud.com/hpyzs/academy";
const USER_ORGANIZATION_URL = "https://www.eiacloud.com/hpyzs/center/org";
const USER_CENTER_URL = "https://www.eiacloud.com/hpyzs/center?uri=/center/personalCenter";
const USER_COURSE_URL = "https://www.eiacloud.com/hpyzs/center?uri=/center/academy/course";
const USER_ORDER_URL = "https://www.eiacloud.com/hpyzs/center?uri=/center/academy/order";
const USER_UPLOAD_MATERIAL_URL = "https://www.eiacloud.com/hpyzs/center?uri=/share/myMaterial?ifOpen%3D1";
const USER_API_URL = isPcBoolean
    ? "https://orgtest.eiacloud.com/#/home/property?tab=2"
    : "https://org.eiacloud.com/#/home/property?tab=2";
const OPEN_PLATFORM_URL = "https://www.eiacloud.com/gs/";
const FORUM_URL = "https://www.eiacloud.com/bbs/";
const SHOP_URL = "https://shop.eiacloud.com/";
const LIVE_URL = "https://www.eiacloud.com/hpyzs/live";
const MAP_URL = "https://www.eiacloud.com/hpyzs/map/stationProjectMap";
const UPLOAD_MATERIAL_BASE_URL = "https://www.eiacloud.com/hpyzs/share/uploadMaterial";
const DEFAULT_USER_NAME = "用户";
const USER_PANEL_ASSETS = Object.freeze({
    vipBadge1: "https://www.eiacloud.com/hpyzs/images/2021/vip-0.png",
    vipBadge3: "https://www.eiacloud.com/hpyzs/images/2021/vip-1.png",
    vipBadge8: "https://www.eiacloud.com/hpyzs/images/2021/vip-2.png",
    levelBadge: "https://cdntest.eiacloud.com/ai/personInfo/level/level_",
    yunbeiBadge: "https://www.eiacloud.com/hpyzs/images/2021/yunbei.png",
    personalCenter: "https://cdntest.eiacloud.com/pc/user/person.png",
    collection: "https://cdntest.eiacloud.com/pc/user/collect.png",
    organization: "https://cdntest.eiacloud.com/pc/user/orga.png",
    course: "https://cdntest.eiacloud.com/pc/user/gongshi.png",
    order: "https://cdntest.eiacloud.com/pc/user/order.png",
    upload: "https://cdntest.eiacloud.com/pc/share/icon/my-material-upload.png",
    api: "https://cdntest.eiacloud.com/pc/user/my-api.png",
    feedback: "https://cdntest.eiacloud.com/pc/user/feedback.svg",
    logout: "https://cdntest.eiacloud.com/pc/user/exit.png",
});

const props = defineProps({
    isLoggedIn: {
        type: Boolean,
        default: false,
    },
    userAvatar: {
        type: String,
        default: "",
    },
});

const emit = defineEmits(["login", "user-center"]);

const router = useRouter();
const route = useRoute();
const global = globalStore();
const isLoggingOut = ref(false);
const feedbackPopoverRef = ref(null);
const globalUserInfo = computed(() => global.userInfo ?? {});
const vipBadgeImg = computed(() => USER_PANEL_ASSETS[`vipBadge${globalUserInfo.value?.role || 1}`]);
const levelBadgeImg = computed(() => USER_PANEL_ASSETS.levelBadge + `${globalUserInfo.value?.level || 1}.png`);
const userDisplayName = computed(() => globalUserInfo.value?.showName || globalUserInfo.value?.username || DEFAULT_USER_NAME);
const userYundbeiCount = computed(() => globalUserInfo.value?.yunbeiCount ?? 0);
const userYundianCount = computed(() => {
    if (global.yundian != null && global.yundian !== "") return global.yundian;
    return globalUserInfo.value?.ydCount ?? 0;
});

const desktopNavigationItems = Object.freeze([
    { key: "dialog", label: "首页", type: "external", target: HOME_WEBSITE_URL },
    { key: "lanceCloud", label: "监测云", type: "external", target: MAP_URL },
    { key: "publicPlatform", label: "公示平台", type: "external", target: OPEN_PLATFORM_URL },
    { key: "forum", label: "环评论坛", type: "external", target: FORUM_URL },
    { key: "shop", label: "云商城", type: "external", target: SHOP_URL },
    { key: "live", label: "直播", type: "external", target: LIVE_URL },
    { key: "academy", label: "云学苑", type: "external", target: HOME_WEBSITE_LEARN_URL },
    { key: "approveUpload", label: "云助手AI", type: "external", target: "https://ai.eiacloud.com/#/dialog" },
]);

const quickActionItems = Object.freeze([
    { key: "search", label: "搜索", type: "external", target: "https://www.eiacloud.com/hpyzs/lawsRegulations/searchContent", iconName: "historSearch" },
    { key: "client", label: "客户端", type: "external", target: CLIENT_DOWNLOAD_URL, iconName: "clientApp" },
]);

const userProfileMenuItems = computed(() => {
    const collectionUrl = "https://www.eiacloud.com/hpyzs/center/myCollection";
    const showApiMenu = global.userData?.orgUserType !== 3;

    return Object.freeze([
        { key: "user-center", label: "个人中心", icon: USER_PANEL_ASSETS.personalCenter, action: "link", target: USER_CENTER_URL },
        { key: "collection", label: "我的收藏", icon: USER_PANEL_ASSETS.collection, action: "link", target: collectionUrl },
        { key: "organization", label: "企业认证", icon: USER_PANEL_ASSETS.organization, action: "link", target: USER_ORGANIZATION_URL },
        { key: "course", label: "我的课程", icon: USER_PANEL_ASSETS.course, action: "link", target: USER_COURSE_URL },
        { key: "order", label: "我的订单", icon: USER_PANEL_ASSETS.order, action: "link", target: USER_ORDER_URL },
        { key: "upload", label: "我的上传资料", icon: USER_PANEL_ASSETS.upload, action: "link", target: USER_UPLOAD_MATERIAL_URL, showDot: false },
        ...(showApiMenu
            ? [{ key: "api", label: "我的API", icon: USER_PANEL_ASSETS.api, action: "link", target: USER_API_URL }]
            : []),
        { key: "feedback", label: "意见反馈", icon: USER_PANEL_ASSETS.feedback, action: "feedback" },
        { key: "logout", label: "退出", icon: USER_PANEL_ASSETS.logout, action: "logout" },
    ]);
});

const uploadMaterialItems = Object.freeze([
    {
        shareType: 1,
        label: "法律法规规范",
        icon: "https://cdntest.eiacloud.com/pc/share/icon/policy.png",
    },
    {
        shareType: 2,
        label: "国家或地方标准",
        icon: "https://cdntest.eiacloud.com/pc/share/icon/standard.png",
    },
    {
        shareType: 3,
        label: "书籍文献资料",
        icon: "https://cdntest.eiacloud.com/pc/share/icon/book.png",
    },
    {
        shareType: 4,
        label: "报告资料",
        icon: "https://cdntest.eiacloud.com/pc/share/icon/law-report.png",
    },
    {
        shareType: 5,
        label: "其他类型资料",
        icon: "https://cdntest.eiacloud.com/pc/share/icon/other.png",
    },
]);

/**
 * 判断当前导航项是否需要高亮。
 * MCP 项目由独立 MCP 标签定位，云助手AI 不高亮。
 */
const isNavigationActive = () => false;

/**
 * 处理顶部导航点击。
 * 根据目标类型分发到站内路由或站外页面。
 */
const handleNavigationClick = (navigationItem) => {
    if (navigationItem.type === "route") {
        navigateToRoute(navigationItem.target);
        return;
    }

    openExternalLink(navigationItem.target);
};

/**
 * 处理右侧快捷入口点击。
 * 保持和主导航一致的跳转逻辑。
 */
const handleQuickActionClick = (quickActionItem) => {
    if (quickActionItem.type === "route") {
        navigateToRoute(quickActionItem.target);
        return;
    }

    openExternalLink(quickActionItem.target);
};

/**
 * 处理个人信息面板菜单点击。
 * 根据不同动作执行站内跳转、站外打开或退出登录。
 */
const hideFeedbackPopover = () => {
    feedbackPopoverRef.value?.hide?.();
};

const handleUserPanelAction = async (menuItem) => {
    if (menuItem.action === "feedback") {
        return;
    }

    if (menuItem.action === "logout") {
        await logoutHandle();
        return;
    }

    openExternalLink(menuItem.target);
};

/**
 * 处理资料上传分类点击。
 * 根据分类编号拼接上传页参数，并在新窗口打开。
 */
const handleUploadMaterialClick = (shareType) => {
    openExternalLink(`${UPLOAD_MATERIAL_BASE_URL}?shareType=${shareType}`);
};

/**
 * 退出当前登录账号。
 * 成功后清理全局登录状态，并跳转登录页。
 */
const logoutHandle = async () => {
    if (isLoggingOut.value) {
        return;
    }

    isLoggingOut.value = true;

    try {
        const response = await loginout();

        if (response.code === 200) {
            ElMessage.success("退出登录成功!");
            await global.logout();
            router.replace({ name: "login" });
            return;
        }

        ElMessage.error(response.msg || "退出登录失败，请稍后重试");
    } catch (error) {
        ElMessage.error("退出登录失败，请稍后重试");
    } finally {
        isLoggingOut.value = false;
    }
};

/**
 * 跳转到站内页面。
 * 已位于目标页时不重复压栈。
 */
const navigateToRoute = (targetPath) => {
    if (route.path === targetPath) {
        return;
    }

    router.push({
        path: targetPath,
    });
};

/**
 * 打开站外页面。
 * 使用新窗口打开，避免打断当前会话。
 */
const openExternalLink = (targetUrl) => {
    if (typeof window === "undefined" || !targetUrl) {
        return;
    }

    window.open(targetUrl, "_blank", "noopener,noreferrer");
};
</script>

<style scoped lang="less">
.desktop-header {
    position: relative;
    z-index: 30;
    background: #ffffff;

    .header-inner {
        min-height: 64px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0;
    }

    .header-left {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .brand-wrapper {
        width: auto;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
    }

    .brand-logo {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

    .brand-text {
        display: flex;
        align-items: center;
    }

    .brand-title {
        font-weight: 600;
        font-size: 28px;
        line-height: 1;
        color: #1678FF;
        letter-spacing: 1px;
    }

    .navigation-list {
        min-width: 0;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0;
    }

    .upload-metrial {
        position: relative;
        padding-bottom: 12px;
        margin-bottom: -12px;

        &:hover {
            .upload-category {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
                pointer-events: auto;
            }
        }
    }

    .top-load {
        height: 36px;
        padding: 0 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border-radius: 18px;
        background: #1678FF;
        box-shadow: 0px 2px 6px 0px rgba(66, 133, 244, 0.4);
        color: #ffffff;
        cursor: pointer;
        user-select: none;

        img {
            width: 18px;
            height: 18px;
            object-fit: contain;
        }

        span {
            font-size: 15px;
            font-weight: 600;
            line-height: 20px;
        }
    }

    .upload-category {
        position: absolute;
        top: calc(100% - 2px);
        left: 0;
        z-index: 20;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    }

    .upload-category-wrapper {
        width: 180px;
        margin: 0;
        padding: 4px 0;
        list-style: none;
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 12px 30px rgba(31, 52, 88, 0.16);
        border: 1px solid #eef2f8;
    }

    .upload-category-li {
        height: 40px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease;

        &:hover {
            background: #f4f8ff;

            span {
                color: #1678ff;
            }
        }

        img {
            width: 20px;
            height: 20px;
            object-fit: contain;
            flex-shrink: 0;
        }

        span {
            font-size: 14px;
            line-height: 20px;
            color: #333333;
            transition: color 0.2s ease;
            white-space: nowrap;
        }
    }

    .navigation-item,
    .text-action,
    .resource-button,
    .ai-badge,
    .avatar-button {
        border: none;
        outline: none;
        background: transparent;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .navigation-item {
        padding: 0;
        margin-right: 30px;
        font-size: 16px;
        line-height: 20px;
        color: #333333;
        white-space: nowrap;
        position: relative;
        flex-shrink: 0;

        &:hover,
        &.active {
            color: #1678FF;
        }
    }

    .ai-auto-fill {
        position: absolute;
        top: -17px;
        left: 31px;
        background: url(https://cdntest.eiacloud.com/hpyzs/ai-auto-fill-bg.png);
        display: flex;
        font-size: 12px;
        line-height: 16px;
        color: #fff;
        height: 20px;
        background-size: 100% 100%;
        font-family: PingFang SC, PingFang SC;
        gap: 1px;
        width: 56px;
        height: 20px;
        padding:0 4px 4px 1px;
    }

    .ai-auto-fill img {
        width: 14px;
        height: 14px;
        margin-top: 1px;
    }

    .ai-auto-fill span {
        line-height: 16px;
    }

    .header-right {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 20px;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
    }

    .head-middle-link {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        line-height: 0;

        img {
            height: 54px;
            display: block;
            object-fit: contain;
        }
    }

    .ai-badge {
        height: 24px;
        padding: 0 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: linear-gradient(90deg, #8c59ff 0%, #cf54ff 100%);
        font-size: 12px;
        font-weight: 500;
        color: #ffffff;
    }

    .resource-button {
        height: 34px;
        padding: 0 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 18px;
        background: linear-gradient(90deg, #2487ff 0%, #1678ff 100%);
        box-shadow: 0 6px 16px rgba(22, 120, 255, 0.18);
        font-size: 14px;
        font-weight: 500;
        color: #ffffff;
    }

    .text-action {
        margin-right: 10px;
        height: 32px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;

        &:hover {
            color: #1678ff;
        }
    }

    .quick-action-wrapper {
        position: relative;
        display: inline-flex;
        align-items: center;

        &.has-dropdown {
            padding-bottom: 16px;
            margin-bottom: -16px;

            &:hover {
                .aq-dropdown {
                    opacity: 1;
                    visibility: visible;
                    transform: translate(-50%, 0);
                    pointer-events: auto;
                }
            }
        }
    }

    .aq-dropdown {
        position: absolute;
        top: 100%;
        left: 50%;
        z-index: 40;
        padding-top: 8px;
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 8px);
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    }

    .aq-down-app {
        width: 200px;
        padding: 16px;
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 12px 30px rgba(31, 52, 88, 0.16);
        border: 1px solid #eef2f8;
        text-align: center;
    }

    .aq-qr-image {
        width: 160px;
        height: 160px;
        display: block;
        margin: 0 auto;
        object-fit: cover;
    }

    .download-app-contents {
        margin-top: 12px;
    }

    .download-app-text {
        margin-bottom: 12px;
        font-size: 14px;
        line-height: 22px;
        font-weight: 600;
        color: #4c535c;
    }

    .gda-btn {
        width: 100%;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #e8eaec;
        background: transparent;
        color: #333333;
        text-decoration: none;
        box-sizing: border-box;
        transition: all 0.2s ease;

        &:hover {
            color: #1678ff;
            border-color: #1678ff;
            background: #f4f8ff;
        }
    }

    .gda-btn-sm {
        font-size: 16px;
        line-height: 22px;
    }

    .avatar-button {
        padding: 0;
        width: 34px;
        height: 34px;
        border-radius: 50%;
    }

    .user-panel-wrapper {
        position: relative;
        padding-bottom: 12px;
        margin-bottom: -12px;

        &:hover,
        &:focus-within {
            .user-profile-dropdown {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
                pointer-events: auto;
            }
        }
    }

    .user-profile-dropdown {
        position: absolute;
        top: calc(100% - 4px);
        right: 0;
        z-index: 60;
        padding-top: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
        overflow: visible;
    }

    .user-profile-panel {
        width: 220px;
        overflow: visible;
        border-radius: 4px;
        background: #ffffff;
        box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
    }

    .panel-top {
        padding: 21px;
        background: url('https://www.eiacloud.com/hpyzs/images/2021/msg-bg.png') no-repeat center center;
        background-size: 100% 100%;
    }

    .panel-top-right {
        min-width: 0;
        flex: 1;
    }

    .panel-top-right-primary {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .panel-level-badge {
        height: 14px;
        display: block;
        object-fit: contain;
        flex-shrink: 0;
    }

    .panel-user-name {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
    }

    .panel-vip-badge {
        line-height: 0;

        img {
            height: 14px;
            display: block;
            object-fit: contain;
        }
    }

    .panel-top-right-secondary {
        margin-top: 11px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        font-size: 12px;
        color: #757575;
        line-height: 14px;
    }

    .panel-balance-item {
        display: flex;
        align-items: center;
        gap: 4px;
        min-width: 0;
        white-space: nowrap;
    }

    .panel-yundian-icon {
        flex-shrink: 0;
    }

    .panel-status-icon {
        height: 14px;
        display: block;
        object-fit: contain;
        flex-shrink: 0;
    }

    .panel-bottom {
        padding: 1px;
        overflow: visible;
    }

    .panel-menu-item {
        width: 100%;
        padding: 0 20px;
        border: none;
        background: transparent;
        display: flex;
        align-items: center;
        gap: 10px;
        height: 40px;
        cursor: pointer;
        transition: background-color 0.2s ease;
        box-sizing: border-box;

        &:hover {
            background: #f4f8ff;

            .panel-menu-text {
                color: #1678ff;
            }
        }
    }

    .panel-menu-item-feedback {
        cursor: default;
    }

    .panel-menu-icon {
        width: 18px;
        height: 18px;
        display: block;
        object-fit: contain;
        flex-shrink: 0;
    }

    .panel-menu-icon-upload {
        width: 18px;
        height: 18px;
    }

    .panel-menu-text {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        color: #333333;
        transition: color 0.2s ease;
    }

    .panel-menu-text-logout {
        color: #757575;
    }

    .panel-menu-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #ff4d4f;
        flex-shrink: 0;
    }

    .avatar-image {
        width: 38px;
        height: 38px;
        display: block;
        border-radius: 50%;
        object-fit: cover;
        border: 1px solid #e8edf5;
    }

    .login-button {
        cursor: pointer;

        &:hover {
            color: #1678ff;
        }
    }
}

@media screen and (max-width: 1600px) {
    .desktop-header .header-left {
        gap: 20px;
    }

    .desktop-header .navigation-item {
        margin-right: 15px;
    }

    .desktop-header .header-right {
        gap: 10px;
    }
}

@media screen and (max-width: 1440px) {
    .desktop-header {
        .header-inner {
            padding: 0 20px;
            gap: 20px;
        }

        .header-left {
            gap: 20px;
        }

        .brand-title {
            font-size: 24px;
        }

        .header-right {
            gap: 10px;
        }
    }
}

@media screen and (max-width: 1280px) {
    .desktop-header .navigation-list {
        display: none;
    }

    .desktop-header {
        .navigation-list {
            gap: 0;
        }

        .navigation-item {
            padding: 8px 8px;
            font-size: 13px;
        }

        .text-action {
            font-size: 12px;
        }
    }
}

@media screen and (max-width: 768px) {
    .desktop-header .navigation-list {
        display: none;
    }

    .desktop-header .head-middle-link {
        display: none;
    }
}
</style>

<style lang="less">
.user-panel-feedback-popover {
    padding: 12px !important;
    min-width: 140px !important;
    z-index: 80 !important;

    &.el-popper[data-popper-placement^="left"] .el-popper__arrow::before {
        border-right-color: #ffffff;
    }

    .weChatService {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-size: 12px;
        color: #666666;
        line-height: 17px;
        text-align: center;

        img {
            width: 120px;
            height: 120px;
            object-fit: contain;
        }

        span {
            margin-top: 4px;
        }
    }
}
</style>