大幅度修改样式布局

src/layouts/MainLayout.vue

@@ -1,11 +1,9 @@
 <template>
   <div class="full-screen-layout">
     <el-container class="full-screen-container">
-      <!-- 侧边栏 -->
       <el-aside width="200px" class="siderbar">
         <div class="sidebar-header">
           <div class="logo-container">
-            <!-- 添加 logo 图片 -->
             <img src="@/assets/logo.jpg" alt="方舟网络" class="logo-image" />
             <div class="text-content">
               <h2 class="company-name">方舟网络</h2>
@@ -13,32 +11,31 @@
             </div>
           </div>
         </div>
-        <!-- 这里可以放菜单 -->
         <el-menu default-active="/" class="sidebar-menu" router>
           <el-menu-item index="/">
             <el-icon><icon-menu /></el-icon>
             <span>工单管理</span>
           </el-menu-item>
-
           <el-menu-item index="/stats">
-            <el-icon><document /></el-icon> 
+            <el-icon>
+              <document />
+            </el-icon>
             <span>数据统计</span>
           </el-menu-item>
-
           <el-menu-item index="/customers">
-            <el-icon><User /></el-icon>
+            <el-icon>
+              <User />
+            </el-icon>
             <span>客户管理</span>
           </el-menu-item>
         </el-menu>
       </el-aside>
 
-      <!-- 主内容区域 -->
       <el-container class="main-container">
-        <!-- 顶部导航栏 -->
         <el-header class="main-header">
           <div class="header-content">
             <div class="user-info">
-              <el-dropdown>
+              <el-dropdown trigger="click">
                 <div class="user-profile">
                   <el-avatar :size="32" :src="user.avatar" />
                   <span class="username">{{ user.name }}</span>
@@ -53,7 +50,6 @@
           </div>
         </el-header>
 
-        <!-- 主要内容 -->
         <el-main class="main-content">
           <router-view v-slot="{ Component }">
             <transition name="fade-transform" mode="out-in">
@@ -66,11 +62,37 @@
   </div>
 </template>
 
+<script setup>
+import { reactive, onMounted } from "vue";
+import { Menu as IconMenu, Document, User } from "@element-plus/icons-vue";
+import { useRouter } from "vue-router";
 
+const router = useRouter();
+const user = reactive({
+  name: "加载中...",
+  avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
+});
 
+onMounted(() => {
+  const savedUser =
+    localStorage.getItem("user_info") || sessionStorage.getItem("user_info");
+  if (savedUser) {
+    const data = JSON.parse(savedUser);
+    user.name = data.username || "管理员";
+  }
+});
+
+const handleLogout = () => {
+  localStorage.clear();
+  sessionStorage.clear();
+  router.push("/login");
+};
+</script>
 
 <style scoped>
-.full-screen-layout {
+/* --- 基础布局保持不变 --- */
+.full-screen-layout,
+.full-screen-container {
   height: 100vh;
   width: 100vw;
   margin: 0;
@@ -78,18 +100,10 @@
   overflow: hidden;
 }
 
-.full-screen-container {
+/* --- 侧边栏颜色保持原样 --- */
-  height: 100vh;
-  width: 100vw;
-  margin: 0;
-  padding: 0;
-}
-
 .siderbar {
   background-color: #001529;
   color: white;
-  margin: 0;
-  padding: 0;
 }
 
 .sidebar-header {
@@ -104,7 +118,6 @@
   display: flex;
   align-items: center;
   gap: 12px;
-  width: 100%;
 }
 
 .logo-image {
@@ -112,14 +125,6 @@
   height: 40px;
   border-radius: 6px;
   object-fit: cover;
-  flex-shrink: 0;
-}
-
-.text-content {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  overflow: hidden;
 }
 
 .company-name {
@@ -127,18 +132,12 @@
   font-size: 16px;
   font-weight: 600;
   color: #ffffff;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .system-name {
   margin: 0;
   font-size: 12px;
   color: rgba(255, 255, 255, 0.7);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .sidebar-menu {
@@ -160,12 +159,7 @@
   color: #ffffff;
 }
 
-.main-container {
+/* --- 右侧 Header 布局优化 --- */
-  height: 100vh;
-  margin: 0;
-  padding: 0;
-}
-
 .main-header {
   background-color: #fff;
   border-bottom: 1px solid #e6e6e6;
@@ -174,72 +168,66 @@
   justify-content: flex-end;
   padding: 0 20px;
   height: 60px;
-  margin: 0;
 }
 
-.header-content {
+.user-profile {
-  display: flex;
-  align-items: center;
-}
-
-.user-info {
   display: flex;
   align-items: center;
   gap: 10px;
+  cursor: pointer;
+  outline: none;
+  /* 保持隐藏默认框 */
+  height: 48px;
+  /* 稍微缩小高度，让点击范围更精致 */
+  padding: 0 12px;
+  /* 左右加点间距 */
+  border-radius: 6px;
+  /* 加个圆角 */
+  transition: all 0.2s;
+  /* 让颜色变化更顺滑 */
+}
+
+/* 鼠标悬停时的效果 */
+.user-profile:hover {
+  background-color: #f0f2f5;
+}
+
+/* 关键：鼠标点击那一瞬间的效果 */
+.user-profile:active {
+  background-color: #e6e8eb;
+  /* 背景变深 */
+  transform: scale(0.98);
+  /* 轻轻缩放，增加“按下去”的质感 */
 }
 
 .username {
   font-size: 14px;
   color: #333;
+  line-height: 1;
+  /* 消除默认行高导致的下偏 */
+  display: inline-block;
 }
 
 .main-content {
   padding: 20px;
   background-color: #f5f7fa;
   height: calc(100vh - 60px);
-  margin: 0;
   overflow-y: auto;
 }
+
+/* 过渡动画 */
+.fade-transform-enter-active,
+.fade-transform-leave-active {
+  transition: all 0.3s;
+}
+
+.fade-transform-enter-from {
+  opacity: 0;
+  transform: translateX(-10px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(10px);
+}
 </style>
-
-
-
-
-
-
-
-
-<script setup>
-import { reactive, onMounted } from 'vue'
-import { 
-  Menu as IconMenu, 
-  Document, 
-  User       
-} from '@element-plus/icons-vue'
-
-import { useRouter } from 'vue-router'
-
-
-const router = useRouter()
-
-const user = reactive({
-  name: '加载中...',
-  avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
-})
-
-onMounted(() => {
-  const savedUser = localStorage.getItem('user_info') || sessionStorage.getItem('user_info')
-  if (savedUser) {
-    const data = JSON.parse(savedUser)
-    // 根据你 ThinkPHP 返回的字段来赋值，假设是 username
-    user.name = data.username || '管理员'
-  }
-})
-
-
-const handleLogout = () => {
-  localStorage.clear()
-  sessionStorage.clear()
-  router.push('/login')
-}
-</script>