diff --git a/.env.development b/.env.development
index 5bee1e2..e29fc9f 100644
--- a/.env.development
+++ b/.env.development
@@ -4,7 +4,7 @@ VUE_APP_TITLE = 供应商自助管理平台
 # 开发环境配置
 ENV = 'development'
 
-VUE_APP_BASE_API = 'http://192.168.0.188:9993'
+VUE_APP_BASE_API = 'http://127.0.0.1:9993'
 
 # 应用访问路径 例如使用前缀 /admin/
 VUE_APP_CONTEXT_PATH = '/'
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index a48a18e..2e65582 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -26,6 +26,30 @@
     z-index: 1001;
     overflow: hidden;
     box-shadow: $menu-box-shadow;
+    
+    // 左侧边框渐变
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: 4px;
+      background: $primary-gradient;
+      z-index: 2;
+    }
+    
+    // 底部装饰效果
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 20px;
+      left: 20px;
+      right: 20px;
+      height: 1px;
+      background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent);
+      z-index: 1;
+    }
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -34,6 +58,7 @@
 
     .scrollbar-wrapper {
       overflow-x: hidden !important;
+      padding: 0 8px;
     }
 
     .el-scrollbar__bar.is-vertical {
@@ -46,7 +71,7 @@
 
     &.has-logo {
       .el-scrollbar {
-        height: calc(100% - 60px);
+        height: calc(100% - 110px);
       }
     }
 
@@ -63,6 +88,7 @@
     .svg-icon {
       margin-right: 16px;
       color: $base-menu-icon-color;
+      transition: $base-transition;
     }
 
     .el-menu {
@@ -81,6 +107,8 @@
       font-size: 14px;
       color: $base-menu-color;
       transition: $base-transition;
+      border-radius: $base-border-radius;
+      margin: 4px 0;
     }
 
     // menu hover
@@ -89,6 +117,11 @@
       &:hover {
         background-color: $base-menu-hover !important;
         color: $base-menu-color-active !important;
+        
+        .svg-icon {
+          transform: translateX(3px);
+          color: $base-menu-color-active;
+        }
       }
     }
 
@@ -100,6 +133,8 @@
     & .el-submenu .el-menu-item {
       min-width: $base-sidebar-width !important;
       background-color: $base-sub-menu-background !important;
+      border-radius: $base-border-radius;
+      margin: 3px 0;
 
       &:hover {
         background-color: $base-sub-menu-hover !important;
@@ -120,7 +155,7 @@
     .el-menu-item.is-active {
       background-color: $base-menu-active-background !important;
       color: $base-menu-color-active !important;
-      border-right: 3px solid $blue;
+      border-left: 3px solid $blue;
       
       &:hover {
         background-color: $base-menu-active-background !important;
@@ -130,15 +165,36 @@
         color: $base-menu-color-active;
       }
     }
+    
+    // 子菜单上下边距
+    .el-submenu {
+      .el-menu {
+        padding: 2px 0;
+      }
+    }
+    
+    // 添加滚动条美化
+    .el-scrollbar__thumb {
+      background-color: rgba(0, 0, 0, 0.1);
+      border-radius: 20px;
+      
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.2);
+      }
+    }
   }
 
   .hideSidebar {
     .sidebar-container {
-      width: 54px !important;
+      width: 64px !important;
+      
+      .scrollbar-wrapper {
+        padding: 0 2px;
+      }
     }
 
     .main-container {
-      margin-left: 54px;
+      margin-left: 64px;
     }
 
     .submenu-title-noDropdown {
@@ -232,9 +288,13 @@
   >.el-menu--popup {
     max-height: 100vh;
     overflow-y: auto;
+    background-color: $base-menu-background;
+    padding: 4px;
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 
     &::-webkit-scrollbar-track-piece {
-      background: #f0f2f5;
+      background: $base-sub-menu-background;
     }
 
     &::-webkit-scrollbar {
@@ -242,51 +302,93 @@
     }
 
     &::-webkit-scrollbar-thumb {
-      background: #c0c4cc;
+      background: rgba(0, 0, 0, 0.1);
       border-radius: 20px;
     }
+    
+    .el-menu-item {
+      border-radius: 6px;
+      margin: 2px 0;
+      
+      &.is-active {
+        background-color: $base-menu-active-background !important;
+        color: $base-menu-color-active !important;
+      }
+    }
   }
 }
 
-// 侧边栏 Logo 样式
+// Logo样式
 .sidebar-logo-container {
   position: relative;
   width: 100%;
-  height: 60px;
-  line-height: 60px;
-  background: $base-menu-background;
+  height: 110px;
+  line-height: 50px;
   text-align: center;
   overflow: hidden;
-  
+  padding: 10px 15px;
+
   & .sidebar-logo-link {
     height: 100%;
     width: 100%;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     
+    .logo-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 80px;
+      height: 80px;
+      border-radius: 16px;
+      background: linear-gradient(135deg, rgba(255,255,255,1), rgba(240,242,245,0.7));
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+      border: 1px solid rgba(255,255,255,0.8);
+      margin-bottom: 6px;
+      transition: all 0.3s;
+      
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
+      }
+    }
+
     & .sidebar-logo {
-      width: 32px;
-      height: 32px;
+      width: 50px;
+      height: 50px;
       vertical-align: middle;
-      margin-right: 12px;
     }
-    
+
     & .sidebar-title {
-      display: inline-block;
+      display: block;
       margin: 0;
-      color: $base-menu-color-active;
+      color: $base-logo-title-color;
       font-weight: 600;
-      line-height: 60px;
+      line-height: 24px;
       font-size: 16px;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-      vertical-align: middle;
+      font-family: 'Nunito', sans-serif;
+      white-space: nowrap;
     }
   }
-  
+
   &.collapse {
-    .sidebar-logo {
-      margin-right: 0;
+    .sidebar-logo-link {
+      justify-content: center;
+      
+      .logo-wrapper {
+        width: 50px;
+        height: 50px;
+        margin-bottom: 0;
+      }
+      
+      .sidebar-logo {
+        width: 32px;
+        height: 32px;
+      }
     }
   }
 }
diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss
index 45962d7..bdbe646 100644
--- a/src/assets/styles/variables.scss
+++ b/src/assets/styles/variables.scss
@@ -1,13 +1,13 @@
 // base color
-$blue: #1890ff;
-$light-blue: #36cfc9;
-$red: #f5222d;
+$blue: #409eff;
+$light-blue: #3f8cff;
+$red: #ef476f;
 $pink: #E65D6E;
-$green: #52c41a;
+$green: #06d6a0;
 $tiffany: #4AB7BD;
-$yellow: #faad14;
+$yellow: #ffd166;
 $panGreen: #30B08F;
-$purple: #722ed1;
+$purple: #7209b7;
 
 // 新增渐变色和背景色
 $primary-gradient: linear-gradient(45deg, $blue, $light-blue);
@@ -16,27 +16,29 @@ $background-dark: #141414;
 $card-background-light: #ffffff;
 $card-background-dark: #1f1f1f;
 
-// 默认菜单主题风格
-$base-menu-color: #bfcbd9;
-$base-menu-color-active: #f4f4f5;
-$base-menu-background: #001529;
-$base-logo-title-color: #ffffff;
+// 默认菜单主题风格 - 浅色系
+$base-menu-color: #303133;
+$base-menu-color-active: #409eff;
+$base-menu-background: #f0f2f5;
+$base-logo-title-color: #303133;
 
+// 保持原有的亮色配置作为备用
 $base-menu-light-color: rgba(0,0,0,.70);
 $base-menu-light-background: #ffffff;
-$base-logo-light-title-color: #001529;
+$base-logo-light-title-color: #303133;
 
-$base-sub-menu-background: #000c17;
-$base-sub-menu-hover: #001528;
-$base-menu-hover: rgba(0, 0, 0, 0.06);
-$base-menu-active-background: rgba(24, 144, 255, 0.1);
-$base-menu-icon-color: #bfcbd9;
+// 子菜单颜色
+$base-sub-menu-background: #e8ebf0;
+$base-sub-menu-hover: #dde2e9;
+$base-menu-hover: rgba(64, 158, 255, 0.1);
+$base-menu-active-background: rgba(64, 158, 255, 0.15);
+$base-menu-icon-color: #606266;
 
 // 菜单阴影
-$menu-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+$menu-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
 
 // 新增样式变量
-$base-border-radius: 8px;
+$base-border-radius: 4px;
 $base-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
 $base-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
index be3285d..cfd0cc6 100644
--- a/src/layout/components/Sidebar/Item.vue
+++ b/src/layout/components/Sidebar/Item.vue
@@ -30,4 +30,4 @@ export default {
     return vnodes
   }
 }
-</script>
+</script> 
\ No newline at end of file
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index 044eb3b..0317a04 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -3,16 +3,18 @@
        :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo"/>
-        <h1 v-show="false" v-else class="sidebar-title"
-            :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">
-          {{ title }} </h1>
+        <div class="logo-wrapper">
+          <img v-if="logo" :src="logo" class="sidebar-logo"/>
+        </div>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo"/>
-        <h1 v-show="false" class="sidebar-title"
+        <div class="logo-wrapper">
+          <img v-if="logo" :src="logo" class="sidebar-logo"/>
+        </div>
+        <h1 class="sidebar-title"
             :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">
-          {{ title }} </h1>
+          {{ title }}
+        </h1>
       </router-link>
     </transition>
   </div>
@@ -62,40 +64,70 @@ export default {
   width: 100%;
   height: 110px;
   line-height: 50px;
-  background: #2b2f3a;
   text-align: center;
   overflow: hidden;
+  padding: 10px 15px;
 
   & .sidebar-logo-link {
     height: 100%;
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    
+    .logo-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 80px;
+      height: 80px;
+      border-radius: 16px;
+      background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+      border: 1px solid rgba(255,255,255,0.08);
+      margin-bottom: 6px;
+      transition: all 0.3s;
+      
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+      }
+    }
 
     & .sidebar-logo {
-      width: 100px;
-      height: 100px;
-      margin-top: 12px;
+      width: 50px;
+      height: 50px;
       vertical-align: middle;
-      margin-right: 12px;
     }
 
     & .sidebar-title {
-      width: 100%;
-      display: inline-block;
+      display: block;
       margin: 0;
       color: #fff;
       font-weight: 600;
-      line-height: 50px;
-      font-size: 14px;
-      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
-      vertical-align: middle;
+      line-height: 24px;
+      font-size: 16px;
+      font-family: 'Nunito', sans-serif;
+      white-space: nowrap;
     }
   }
 
   &.collapse {
-    .sidebar-logo {
-      width: 44px;
-      height: 44px;
-      margin-right: 0px;
+    .sidebar-logo-link {
+      justify-content: center;
+      
+      .logo-wrapper {
+        width: 50px;
+        height: 50px;
+        margin-bottom: 0;
+      }
+      
+      .sidebar-logo {
+        width: 32px;
+        height: 32px;
+      }
     }
   }
 }
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 51d0839..859acff 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+    <div class="sidebar-container" :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
         <logo v-if="showLogo" :collapse="isCollapse" />
         <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
             <el-menu
@@ -55,3 +55,7 @@ export default {
     }
 };
 </script>
+
+<style lang="scss" scoped>
+// 样式已移至sidebar.scss，此处移除以避免冲突
+</style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index f048657..c0632ee 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -71,6 +71,8 @@ export default {
     position: relative;
     height: 100%;
     width: 100%;
+    background-color: #f9fafc;
+    overflow: hidden;
 
     &.mobile.openSidebar {
       position: fixed;
@@ -98,7 +100,7 @@ export default {
   }
 
   .hideSidebar .fixed-header {
-    width: calc(100% - 54px);
+    width: calc(100% - 64px);
   }
 
   .sidebarHide .fixed-header {
@@ -108,4 +110,19 @@ export default {
   .mobile .fixed-header {
     width: 100%;
   }
+  
+  .main-container {
+    padding: 10px;
+    transition: margin-left 0.28s;
+    position: relative;
+    overflow: auto;
+    height: 100%;
+    width: calc(100% - #{$base-sidebar-width});
+    float: right;
+    box-sizing: border-box;
+  }
+  
+  .hideSidebar .main-container {
+    width: calc(100% - 64px);
+  }
 </style>