Cold_offline_web/src/layout/index.vue

<template>
  <n-layout
    has-sider
    position="absolute"
    style="top: 0; right: 0; bottom: 0; left: 0"
  >
    <n-config-provider :theme="darkTheme">
      <n-layout-sider
        collapse-mode="transform"
        :collapsed-width="0"
        show-trigger="bar"
        :native-scrollbar="false"
        class="h-full"
      >
        <h2 class="text-center leading-[64px]">冷链验证报告生成系统</h2>
        <MenuComponent />
      </n-layout-sider>
    </n-config-provider>
    <n-layout>
      <n-layout-header class="h-16 px-6" bordered>
        <n-space justify="end" align="center" class="h-full">
          <n-dropdown trigger="hover" :options="options" @select="handleSelect">
            <n-avatar round class="cursor-pointer"> {{ username }} </n-avatar>
          </n-dropdown>
        </n-space>
      </n-layout-header>
      <n-layout-content
        content-style="padding: 24px; background-color: #f0f2f5"
        :native-scrollbar="false"
      >
        <n-card
          :bordered="false"
          style="height: calc(100vh - 112px); min-height: 600px"
        >
          <RouterView />
        </n-card>
      </n-layout-content>
    </n-layout>
  </n-layout>
</template>

<script setup>
import { darkTheme, NIcon } from "naive-ui";
import MenuComponent from "@/layout/components/menu/index.vue";
import { removeToken } from "@/utils/storage/sessionToken";
import { LogoutOutlined as LogoutIcon } from "@vicons/antd";

const router = useRouter();

const message = useMessage();

const username = window.sessionStorage.getItem("username");

const renderIcon = (icon) => {
  return () => {
    return h(NIcon, null, {
      default: () => h(icon),
    });
  };
};

// 下拉菜单传入的 options
const options = [
  {
    label: "退出登录",
    key: "/logout",
    icon: renderIcon(LogoutIcon),
  },
];

// select 选中时触发的回调函数
const handleSelect = () => {
  removeToken();
  message.success("退出登录成功");
  router.replace("/login");
};
</script>

<style scoped></style>