From 4947d0edb501d786416d5e26f35b7f5a9b0cb182 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Tue, 1 Jul 2025 15:01:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=9C=8B=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/sidebar.scss          |  2 +-
 src/layout/components/AppMain.vue       |  2 +-
 src/layout/components/Sidebar/index.vue | 58 ++++++++++++++++++++++++-
 src/layout/index.vue                    |  8 +---
 src/views/index.vue                     |  4 +-
 5 files changed, 64 insertions(+), 10 deletions(-)

diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index dbfc5b4..4a51d77 100644
--- a/src/assets/styles/sidebar.scss
+++ b/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;
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index a25c562..a4ec39d 100644
--- a/src/layout/components/AppMain.vue
+++ b/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 {
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 7f8f1e0..8409829 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 98b13b9..9bda9ee 100644
--- a/src/layout/index.vue
+++ b/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/>
diff --git a/src/views/index.vue b/src/views/index.vue
index b517fcd..0bb1c13 100644
--- a/src/views/index.vue
+++ b/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;
 }
 
 // 左侧设备树样式