修改看板

src/assets/styles/sidebar.scss

@@ -1,7 +1,7 @@
 #app {
 
   .main-container {
-    height: 100%;
+    height: calc(100% - 50px);
     transition: margin-left .28s;
     margin-left: $base-sidebar-width;
     position: relative;

src/layout/components/AppMain.vue

@@ -42,7 +42,7 @@ export default {
 .hasTagsView {
   .app-main {
     /* 84 = navbar + tags-view = 50 + 34 */
-    min-height: calc(100vh - 84px);
+    min-height: calc(100vh - 134px);
   }
 
   .fixed-header + .app-main {

src/layout/components/Sidebar/index.vue

@@ -1,6 +1,16 @@
 <template>
     <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
 <!--        <logo v-if="showLogo" :collapse="isCollapse" />-->
+      <div class="sidebarContainer">
+        <img class="sidebarAvatar" :src="avatar" alt="头像"/>
+        <div class="sidebarInfo">
+          <div class="sidebarText">{{ name }}</div>
+          <div class="sidebarStatus">
+            <span class="sidebarDot"></span>
+            <span class="sidebarStatusText">在线</span>
+          </div>
+        </div>
+      </div>
         <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
             <el-menu
                 :default-active="activeMenu"
@@ -34,7 +44,7 @@ export default {
   components: { SidebarItem,  },
     computed: {
         ...mapState(["settings"]),
-        ...mapGetters(["sidebarRouters", "sidebar"]),
+      ...mapGetters(["sidebarRouters", "sidebar", 'avatar','name']),
         activeMenu() {
             const route = this.$route;
             const { meta, path } = route;
@@ -56,3 +66,49 @@ export default {
     }
 };
 </script>
+<style>
+.sidebarContainer {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-family: sans-serif;
+  margin-left: 20px;
+}
+
+.sidebarAvatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.sidebarInfo {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 60px;
+}
+
+.sidebarText {
+  font-size: 16px;
+  font-weight: 500;
+  color: #fff;
+}
+
+.sidebarStatus {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  color: green;
+}
+
+.sidebarDot {
+  width: 10px;
+  height: 10px;
+  background-color: green;
+  border-radius: 50%;
+  color: #fff;
+}
+
+</style>

src/layout/index.vue

@@ -1,15 +1,11 @@
 <template>
   <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <div class="logoDIV" style="display: inline-block">
-      <logo v-if="showLogo" :collapse="true"/>
-    </div>
-    <div class="navbarDIV" style="display: inline-block">
-      <navbar/>
-    </div>
+    <logo v-if="showLogo" :collapse="true"/>
     <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
     <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
       <div :class="{'fixed-header':fixedHeader}">
+        <navbar/>
         <tags-view v-if="needTagsView"/>
       </div>
       <app-main/>

src/views/index.vue

@@ -605,7 +605,9 @@ export default {
 .app-container {
   padding: 20px;
   background-color: #f5f7fa;
-  min-height: 100vh;
+  //min-height: 100vh;
+  height: calc(100vh - 134px);
+  overflow: auto;
 }
 
 // 左侧设备树样式