blog_front/src/components/admin/MainWrapper.vue

<template>
  <Simplebar>
    <div id="container">
      <div class="leftSidebar" :style="{ width: state.menuWidth }">
        <a-flex justify="center" align="center" style="height: 48px;">
          <component :is=iconComponents.TitleOutLined :class="collapsed ? 'small' : 'large'" />
          <span v-if="!collapsed">{{ state.name }}</span>
        </a-flex>
        <a-menu v-model:selectedKeys="state.selectedKeys" mode="inline" theme="light"
          :inline-collapsed="state.collapsed" :items="items" style="border-inline-end: none;" @click="menuItemclick">
        </a-menu>
      </div>
      <div class="contentArea">
        <div>
          <a-flex>
            <a-space>
              <a-button @click="toggleCollapsed">
                <MenuUnfoldOutlined v-if="state.collapsed" />
                <MenuFoldOutlined v-else />
              </a-button>
              <a-button type="text" @click="jumpdashboard">首页</a-button>
            </a-space>
          </a-flex>
          <a-flex align="center" gap="middle">
            <span>{{ username }}</span>
            <div>
              <a-button type="primary" @click="showModal" danger>
                <LogoutOutlined />
              </a-button>
              <a-modal v-model:open="open" title="提示" @ok="handleOk" @cancel="handleCancel" ok-text="确认"
                cancel-text="取消">
                <p>确定要注销吗？</p>
              </a-modal>
            </div>
          </a-flex>
        </div>
        <RouterView />
      </div>
    </div>
  </Simplebar>
</template>

<script setup lang='ts'>
import { computed, ref, onMounted, h, reactive, watch } from 'vue';
import iconComponents from "@/assets/index"
import { RouterView, useRouter, useRoute } from 'vue-router'
import { MenuFoldOutlined, MenuUnfoldOutlined, LogoutOutlined, DashboardOutlined } from '@ant-design/icons-vue';
import { get } from "@/tools/request"
import { message } from 'ant-design-vue';
import { useAuthStore } from '@/stores/index'
const router = useRouter()
const state = reactive({
  collapsed: false,
  selectedKeys: ['1'],
  name: '博客后台系统',
  menuWidth: '10%'
});
const items = reactive([
  {
    key: 'dashboard',
    icon: () => h(DashboardOutlined),
    label: "仪表盘",
    title: '仪表盘',
  },
  {
    key: 'blogmanage',
    icon: () => h(iconComponents.BlogOutLined),
    label: '博客管理',
    title: '博客管理',
    children: [
      {
        key: 'blogmanage',
        label: '博客管理',
        title: '博客管理',
      },
      {
        key: 'blogtype',
        label: '博客分类',
        title: '博客分类',
      },
      {
        key: 'bloglabel',
        icon: () => h(iconComponents.TypeOutLined),
        label: '博客标签',
        title: '博客标签',
      }
    ],
  },
  {
    key: 'diarymanage',
    icon: () => h(iconComponents.DiaryOutLined),
    label: '日记管理',
    title: '日记管理',
    children: [
      {
        key: 'diarymanage',
        label: '日记管理',
        title: '日记管理',
      },
      {
        key: 'diarytype',
        label: '日记分类',
        title: '日记分类',
      }
    ],
  },
  {
    key: 'classticmanage',
    icon: () => h(iconComponents.DiaryOutLined),
    label: '语录管理',
    title: '语录管理',
  },
  {
    key: 'commonlinkmanage',
    icon: () => h(iconComponents.DiaryOutLined),
    label: '链接管理',
    title: '链接管理',
  },
  {
    key: 'commentmanage',
    icon: () => h(iconComponents.CommentOutLined),
    label: '评论管理',
    title: '评论管理',
  },
  {
    key: 'imagemanage',
    icon: () => h(iconComponents.PhotoOutLined),
    label: '相册管理',
    title: '相册管理',
  },
  {
    key: 'filemanage',
    icon: () => h(iconComponents.FileOutLined),
    label: '文件管理',
    title: '文件管理',
  },
  {
    key: 'systemmanage',
    icon: () => h(iconComponents.SystemOutLined),
    label: '系统设置',
    title: '系统设置',
  },
]);
const menuItemclick = ({ key }: { key: any }) => {
  router.push(key)
}
const collapsed = computed(() => state.collapsed);
const authStore = useAuthStore()
const username = ref("")
const toggleCollapsed = () => {
  state.collapsed = !state.collapsed;
  state.menuWidth = state.collapsed ? 'auto' : '10%'
};
const jumpdashboard = function () {
  state.selectedKeys = ['1']
  router.push('/admin/dashboard')
}

onMounted(async () => {
  const userinfo = await get(
    '/users/me',
    {
      'Accept': 'application/json',
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  )
  username.value = userinfo.data.username
});
const open = ref<boolean>(false);
const showModal = () => {
  open.value = true;
};
const handleOk = (e: MouseEvent) => {
  console.log(e);
  authStore.removeToken()
  message.loading("注销成功")
  setTimeout(() => {
    router.push('/login')
  }, 2000);
  open.value = false;
};
const handleCancel = (e: MouseEvent) => {
  message.warn('取消注销');
}
</script>

<style scoped>
#container {
  display: flex;
}

.leftSidebar {
  border-right: 1px solid rgba(5, 5, 5, 0.06);
  font-size: 20px;
}

.leftSidebar>* {
  margin: 12px 0;
}

.leftSidebar>:first-child {
  font-size: 20px;
}

.contentArea {
  flex: 1;
}

.contentArea>:first-child {
  margin: 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.small {
  font-size: 30px;
  margin: 0 5px 0 5px;
}

.large {
  font-size: 50px;
  margin: 0 10px 0 10px;
}
</style>