spider_creater/frontend/src/App.vue

<template>
  <el-container style="height: 100vh;">
    <el-aside :width="sidebarWidth" style="background-color: #333;overflow: hidden;">
      <div class="sidebar-header" @click="toggleSidebar">
        <el-icon :size="20" color="#fff">
          <Fold v-if="!isCollapse" />
          <Expand v-else />
        </el-icon>
      </div>
      <el-menu
        :default-active="defaultActiveMenu"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        background-color="#333"
        text-color="#fff"
        router
        active-text-color="#ffd04b">
        <el-menu-item v-for="menu in menuList" :key="menu.path" :index="menu.path">
          <el-icon><component :is="menu.icon" style="width:20px;height:20px;" /></el-icon>
          <span slot="title">{{ menu.title }}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    
    <el-container>
      <el-header class="header-container">
        <el-row>
          <el-col :span="14">
            <h3 class="header-content"><el-icon class="header-icon"><Guide /></el-icon>剑鱼可视化爬虫开发平台 v1.0</h3>
          </el-col>
          <el-col :span="10" style="padding:15px;text-align: right;" v-if="showLogoutModule">
            <!-- <span>当前用户: {{ userName }} / {{ userRole }} &nbsp;</span> -->
            <span>当前用户: {{ userName }} &nbsp;</span>
            <el-tooltip content="退出登录" placement="bottom">
              <el-button type="danger" @click="doLogout">
                <el-icon><SwitchButton /></el-icon>
              </el-button>
            </el-tooltip>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { computed, ref } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';

const store = useStore()
const router = useRouter()

const isCollapse = ref(false);
const sidebarWidth = ref('140px');

function toggleSidebar() {
  isCollapse.value = !isCollapse.value;
  sidebarWidth.value = isCollapse.value ? '70px' : '160px';
}
toggleSidebar()

const menuList = computed(() => store.getters.getCurrentMenu)
const userName = computed(() => store.state.userInfo.s_fullname)
const userRole = computed(() => store.getters.userRole)
const showLogoutModule = computed(() => store.state.isAuthenticated)
const defaultActiveMenu = computed(() => menuList.value[0]?.path || '/')

const doLogout = () => {
  router.replace({ name: 'logout' })
}
</script>

<style>
body {
  margin: 0;
}
.el-header {
  align-items: left;
  height: 10vh;
}
 
.sidebar-header {
  height: 60px;
  background-color: #333;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.el-menu-vertical-demo {
  overflow: hidden; 
  border:none;
}

.header-container {
  background-color: #F7F7F7;
  padding: 0 12px;
}
.header-icon {
  margin-right: 8px;
}
.header-content {
  display: flex;
  align-items: center;
}
</style>