完成用户基础界面编写

itbaima-monitor-web/src/component/TabItem.vue

@@ -0,0 +1,33 @@
+<script setup>
+defineProps({
+  name: String,
+  active: Boolean
+})
+</script>
+
+<template>
+  <div :class="`tab-item ${active ? 'active' : ''}`">
+    {{name}}
+  </div>
+</template>
+
+<style scoped>
+.tab-item {
+  font-size: 15px;
+  width: 55px;
+  height: 55px;
+  text-align: center;
+  line-height: 55px;
+  box-sizing: border-box;
+  transition: color .3s;
+
+  &:hover {
+    cursor: pointer;
+    color: var(--el-color-primary);
+  }
+}
+
+.active {
+  border-bottom: solid 2px var(--el-color-primary);
+}
+</style>

itbaima-monitor-web/src/views/IndexView.vue

@@ -1,18 +1,97 @@
 <template>
-  <div>
-    <el-button @click="userLogout">退出登录</el-button>
+  <el-container class="main-container">
+    <el-header class="main-header">
+      <el-image style="height: 30px"
+                src="https://element-plus.org/images/element-plus-logo.svg"/>
+      <div class="tabs">
+        <tab-item v-for="item in tabs"
+                  :name="item.name" :active="item.id === tab"
+                  @click="changePage(item)"/>
       </div>
+      <el-switch style="margin: 0 20px"
+                 v-model="dark" active-color="#424242"
+                 :active-action-icon="Moon"
+                 :inactive-action-icon="Sunny"/>
+      <el-dropdown>
+        <el-avatar class="avatar"
+                   src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item @click="userLogout">
+              <el-icon><Back/></el-icon>
+              退出登录
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </el-header>
+    <el-main class="main-content">
+      <router-view v-slot="{ Component }">
+        <transition name="el-fade-in-linear" mode="out-in">
+          <component :is="Component"/>
+        </transition>
+      </router-view>
+    </el-main>
+  </el-container>
 </template>
 
 <script setup>
 import { logout } from '@/net'
 import router from "@/router";
+import {Back, Moon, Sunny} from "@element-plus/icons-vue";
+import TabItem from "@/component/TabItem.vue";
+import {ref} from "vue";
+import {useDark} from "@vueuse/core";
 
 function userLogout() {
   logout(() => router.push("/"))
 }
+
+const dark = ref(useDark())
+const tab = ref(1)
+const tabs = [
+  {id: 1, name: '管理', route: 'manage'},
+  {id: 2, name: '安全', route: 'security'}
+]
+function changePage(item) {
+  tab.value = item.id
+  router.push({name: item.route})
+}
 </script>
 
 <style scoped>
+.main-container {
+  height: 100vh;
+  width: 100vw;
 
+  .main-header {
+    height: 55px;
+    background-color: var(--el-bg-color);
+    border-bottom: solid 1px var(--el-border-color);
+    display: flex;
+    align-items: center;
+
+    .tabs {
+      height: 55px;
+      gap: 10px;
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: right;
+    }
+
+    .avatar {
+      border: solid 1px var(--el-border-color);
+    }
+  }
+
+  .main-content {
+    height: 100%;
+    background-color: #f5f5f5;
+  }
+}
+
+.dark .main-container .main-content {
+  background-color: #232323;
+}
 </style>