1.1 色彩系统升级

.env.development

@@ -4,7 +4,7 @@ VUE_APP_TITLE = 供应商自助管理平台
 # 开发环境配置
 ENV = 'development'
 
-VUE_APP_BASE_API = 'http://192.168.0.166:9993'
+VUE_APP_BASE_API = 'http://192.168.0.188:9993'
 
 # 应用访问路径 例如使用前缀 /admin/
 VUE_APP_CONTEXT_PATH = '/'

package.json

@@ -5,7 +5,7 @@
   "author": "LionLi",
   "license": "MIT",
   "scripts": {
-    "dev": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --open",
+    "dev": "vue-cli-service serve --open",
     "build:prod": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build --mode production",
     "build:test": "vue-cli-service build --mode test",
     "preview": "node build/index.js --preview",

src/assets/styles/btn.scss

@@ -2,14 +2,35 @@
 
 @mixin colorBtn($color) {
   background: $color;
+  border: none;
+  color: #fff;
+  transition: $base-transition;
 
   &:hover {
-    color: $color;
+    background: lighten($color, 8%);
+    color: #fff;
+  }
+  
+  &:focus {
+    background: darken($color, 5%);
+    color: #fff;
+  }
+}
 
-    &:before,
-    &:after {
-      background: $color;
-    }
+@mixin outlineBtn($color) {
+  background: transparent;
+  border: 1px solid $color;
+  color: $color;
+  transition: $base-transition;
+
+  &:hover {
+    background: rgba($color, 0.1);
+    color: darken($color, 10%);
+  }
+  
+  &:focus {
+    background: rgba($color, 0.2);
+    color: darken($color, 15%);
   }
 }
 
@@ -41,19 +62,67 @@
   @include colorBtn($yellow)
 }
 
+.purple-btn {
+  @include colorBtn($purple)
+}
+
+.blue-outline-btn {
+  @include outlineBtn($blue)
+}
+
+.green-outline-btn {
+  @include outlineBtn($green)
+}
+
+.red-outline-btn {
+  @include outlineBtn($red)
+}
+
+.yellow-outline-btn {
+  @include outlineBtn($yellow)
+}
+
+.purple-outline-btn {
+  @include outlineBtn($purple)
+}
+
+.gradient-btn {
+  background: $primary-gradient;
+  color: #fff;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 4px;
+  font-weight: 500;
+  transition: $base-transition;
+  
+  &:hover {
+    filter: brightness(1.1);
+    transform: translateY(-1px);
+  }
+  
+  &:active {
+    filter: brightness(0.95);
+    transform: translateY(0);
+  }
+}
+
 .pan-btn {
   font-size: 14px;
   color: #fff;
-  padding: 14px 36px;
-  border-radius: 8px;
+  padding: 12px 24px;
+  border-radius: $base-border-radius;
   border: none;
   outline: none;
-  transition: 600ms ease all;
+  transition: $base-transition;
   position: relative;
   display: inline-block;
+  font-weight: 500;
+  box-shadow: $base-box-shadow;
 
   &:hover {
     background: #fff;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
 
     &:before,
     &:after {
@@ -87,13 +156,70 @@
   white-space: nowrap;
   cursor: pointer;
   background: #fff;
-  color: #fff;
+  color: #606266;
   -webkit-appearance: none;
   text-align: center;
   box-sizing: border-box;
   outline: 0;
   margin: 0;
-  padding: 10px 15px;
+  padding: 10px 20px;
   font-size: 14px;
   border-radius: 4px;
+  border: 1px solid #dcdfe6;
+  transition: $base-transition;
+  
+  &:hover {
+    color: $blue;
+    border-color: lighten($blue, 30%);
+    background-color: rgba($blue, 0.05);
+  }
+  
+  &:active {
+    color: darken($blue, 10%);
+    border-color: $blue;
+    outline: none;
+  }
+  
+  &.is-plain {
+    background: transparent;
+    
+    &:hover {
+      background: #fff;
+    }
+  }
+  
+  &.is-round {
+    border-radius: 20px;
+    padding: 10px 24px;
+  }
+}
+
+// 按钮尺寸
+.btn-lg {
+  padding: 12px 24px;
+  font-size: 16px;
+  border-radius: 6px;
+}
+
+.btn-sm {
+  padding: 6px 12px;
+  font-size: 12px;
+  border-radius: 3px;
+}
+
+.btn-xs {
+  padding: 4px 8px;
+  font-size: 12px;
+  border-radius: 2px;
+}
+
+// 图标按钮
+.icon-btn {
+  padding: 8px;
+  border-radius: 4px;
+  line-height: 1;
+  
+  i {
+    font-size: 16px;
+  }
 }

src/assets/styles/element-ui.scss

@@ -1,4 +1,5 @@
 // cover some element-ui styles
+@import './variables.scss';
 
 .el-breadcrumb__inner,
 .el-breadcrumb__inner a {
@@ -52,6 +53,21 @@
   left: 0;
   position: relative;
   margin: 0 auto;
+  border-radius: $base-border-radius;
+  
+  .el-dialog__header {
+    padding: 20px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  }
+  
+  .el-dialog__body {
+    padding: 24px;
+  }
+  
+  .el-dialog__footer {
+    padding: 16px 20px;
+    border-top: 1px solid rgba(0, 0, 0, 0.05);
+  }
 }
 
 // refine element ui upload
@@ -62,6 +78,7 @@
     .el-upload-dragger {
       width: 100%;
       height: 200px;
+      border-radius: $base-border-radius;
     }
   }
 }
@@ -71,6 +88,14 @@
   a {
     display: block
   }
+  
+  .el-dropdown-menu__item {
+    transition: $base-transition;
+    
+    &:hover {
+      background-color: rgba($blue, 0.08);
+    }
+  }
 }
 
 // fix date-picker ui bug in filter-item
@@ -89,4 +114,120 @@
   > .el-submenu__title
   .el-submenu__icon-arrow {
   display: none;
+}
+
+// 按钮样式优化
+.el-button {
+  transition: $base-transition;
+  border-radius: 4px;
+  
+  &--primary {
+    background: $primary-gradient;
+    border: none;
+    
+    &:hover, &:focus {
+      background: $primary-gradient;
+      filter: brightness(1.1);
+    }
+  }
+  
+  &--success {
+    background-color: $green;
+    border-color: $green;
+    
+    &:hover, &:focus {
+      background-color: lighten($green, 5%);
+      border-color: lighten($green, 5%);
+    }
+  }
+  
+  &--warning {
+    background-color: $yellow;
+    border-color: $yellow;
+    
+    &:hover, &:focus {
+      background-color: lighten($yellow, 5%);
+      border-color: lighten($yellow, 5%);
+    }
+  }
+  
+  &--danger {
+    background-color: $red;
+    border-color: $red;
+    
+    &:hover, &:focus {
+      background-color: lighten($red, 5%);
+      border-color: lighten($red, 5%);
+    }
+  }
+}
+
+// 卡片样式优化
+.el-card {
+  border-radius: $base-border-radius;
+  box-shadow: $base-box-shadow;
+  transition: $base-transition;
+  border: none;
+  
+  &:hover {
+    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
+    transform: translateY(-2px);
+  }
+  
+  .el-card__header {
+    padding: 16px 20px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    font-weight: 500;
+  }
+  
+  .el-card__body {
+    padding: 20px;
+  }
+}
+
+// 表单样式优化
+.el-form {
+  .el-form-item {
+    margin-bottom: 20px;
+  }
+  
+  .el-input__inner {
+    border-radius: 4px;
+    transition: $base-transition;
+    
+    &:hover {
+      border-color: lighten($blue, 10%);
+    }
+    
+    &:focus {
+      border-color: $blue;
+    }
+  }
+}
+
+// 表格样式优化
+.el-table {
+  border-radius: $base-border-radius;
+  overflow: hidden;
+  
+  th {
+    background-color: $background-light;
+    font-weight: 500;
+  }
+  
+  td, th {
+    padding: 12px 0;
+  }
+  
+  .el-table__row {
+    transition: $base-transition;
+    
+    &:hover {
+      background-color: rgba($blue, 0.04);
+    }
+  }
+  
+  .el-table--striped .el-table__body tr.el-table__row--striped td {
+    background-color: rgba($blue, 0.02);
+  }
 }

src/assets/styles/element-variables.scss

@@ -1,23 +1,43 @@
 /**
-* I think element-ui's default theme color is too light for long-term use.
-* So I modified the default color and you can modify it to your liking.
+* 更新系统主题色彩，使用更现代的色彩方案
 **/
 
+/* 导入基础变量 */
+@import './variables.scss';
+
 /* theme color */
-$--color-primary: #1890ff;
-$--color-success: #13ce66;
-$--color-warning: #ffba00;
-$--color-danger: #ff4949;
-// $--color-info: #1E1E1E;
+$--color-primary: $blue;
+$--color-success: $green;
+$--color-warning: $yellow;
+$--color-danger: $red;
+$--color-info: #909399;
+
+$--button-font-weight: 500;
+
+$--color-text-primary: #303133;
+$--color-text-regular: #606266;
+$--color-text-secondary: #909399;
+$--color-text-placeholder: #c0c4cc;
+
+$--border-color-base: #dcdfe6;
+$--border-color-light: #e4e7ed;
+$--border-color-lighter: #ebeef5;
+$--border-color-extra-light: #f2f6fc;
 
-$--button-font-weight: 400;
+$--background-color-base: $background-light;
 
-// $--color-text-regular: #1f2d3d;
+$--box-shadow-base: $base-box-shadow;
+$--border-radius-base: 4px;
+$--border-radius-small: 2px;
+$--border-radius-circle: 100%;
 
-$--border-color-light: #dfe4ed;
-$--border-color-lighter: #e6ebf5;
+/* 卡片阴影 */
+$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+$--box-shadow-dark: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
 
-$--table-border: 1px solid #dfe6ec;
+/* 表格边框 */
+$--table-border: 1px solid #ebeef5;
+$--table-header-background-color: $background-light;
 
 /* icon font path, required */
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
@@ -28,4 +48,11 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {
   theme: $--color-primary;
+  primaryGradient: $primary-gradient;
+  success: $--color-success;
+  warning: $--color-warning;
+  danger: $--color-danger;
+  info: $--color-info;
+  backgroundLight: $background-light;
+  backgroundDark: $background-dark;
 }

src/assets/styles/index.scss

@@ -10,11 +10,14 @@ body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  background-color: $background-light;
+  color: #303133;
+  line-height: 1.5;
 }
 
 label {
-  font-weight: 700;
+  font-weight: 500;
 }
 
 html {
@@ -49,8 +52,9 @@ a,
 a:focus,
 a:hover {
   cursor: pointer;
-  color: inherit;
+  color: $blue;
   text-decoration: none;
+  transition: $base-transition;
 }
 
 div:focus {
@@ -82,7 +86,7 @@ div:focus {
 }
 
 .inlineBlock {
-  display: block;
+  display: inline-block;
 }
 
 .clearfix {
@@ -96,32 +100,121 @@ div:focus {
   }
 }
 
+// 新增常用边距类
+.m-0 { margin: 0 !important; }
+.mt-0 { margin-top: 0 !important; }
+.mr-0 { margin-right: 0 !important; }
+.mb-0 { margin-bottom: 0 !important; }
+.ml-0 { margin-left: 0 !important; }
+
+.m-1 { margin: 4px !important; }
+.mt-1 { margin-top: 4px !important; }
+.mr-1 { margin-right: 4px !important; }
+.mb-1 { margin-bottom: 4px !important; }
+.ml-1 { margin-left: 4px !important; }
+
+.m-2 { margin: 8px !important; }
+.mt-2 { margin-top: 8px !important; }
+.mr-2 { margin-right: 8px !important; }
+.mb-2 { margin-bottom: 8px !important; }
+.ml-2 { margin-left: 8px !important; }
+
+.m-3 { margin: 16px !important; }
+.mt-3 { margin-top: 16px !important; }
+.mr-3 { margin-right: 16px !important; }
+.mb-3 { margin-bottom: 16px !important; }
+.ml-3 { margin-left: 16px !important; }
+
+.m-4 { margin: 24px !important; }
+.mt-4 { margin-top: 24px !important; }
+.mr-4 { margin-right: 24px !important; }
+.mb-4 { margin-bottom: 24px !important; }
+.ml-4 { margin-left: 24px !important; }
+
+.p-0 { padding: 0 !important; }
+.pt-0 { padding-top: 0 !important; }
+.pr-0 { padding-right: 0 !important; }
+.pb-0 { padding-bottom: 0 !important; }
+.pl-0 { padding-left: 0 !important; }
+
+.p-1 { padding: 4px !important; }
+.pt-1 { padding-top: 4px !important; }
+.pr-1 { padding-right: 4px !important; }
+.pb-1 { padding-bottom: 4px !important; }
+.pl-1 { padding-left: 4px !important; }
+
+.p-2 { padding: 8px !important; }
+.pt-2 { padding-top: 8px !important; }
+.pr-2 { padding-right: 8px !important; }
+.pb-2 { padding-bottom: 8px !important; }
+.pl-2 { padding-left: 8px !important; }
+
+.p-3 { padding: 16px !important; }
+.pt-3 { padding-top: 16px !important; }
+.pr-3 { padding-right: 16px !important; }
+.pb-3 { padding-bottom: 16px !important; }
+.pl-3 { padding-left: 16px !important; }
+
+.p-4 { padding: 24px !important; }
+.pt-4 { padding-top: 24px !important; }
+.pr-4 { padding-right: 24px !important; }
+.pb-4 { padding-bottom: 24px !important; }
+.pl-4 { padding-left: 24px !important; }
+
+// 文本对齐
+.text-left { text-align: left !important; }
+.text-center { text-align: center !important; }
+.text-right { text-align: right !important; }
+
+// 文本颜色
+.text-primary { color: $blue !important; }
+.text-success { color: $green !important; }
+.text-warning { color: $yellow !important; }
+.text-danger { color: $red !important; }
+.text-info { color: #909399 !important; }
+.text-muted { color: #606266 !important; }
+
 aside {
-  background: #eef1f6;
-  padding: 8px 24px;
+  background: $background-light;
+  padding: 16px 24px;
   margin-bottom: 20px;
-  border-radius: 2px;
+  border-radius: $base-border-radius;
+  box-shadow: $base-box-shadow;
   display: block;
-  line-height: 32px;
+  line-height: 1.6;
   font-size: 16px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   color: #2c3e50;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  transition: $base-transition;
+
+  &:hover {
+    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
+  }
 
   a {
-    color: #337ab7;
+    color: $blue;
     cursor: pointer;
 
     &:hover {
-      color: rgb(32, 160, 255);
+      color: lighten($blue, 10%);
     }
   }
 }
 
 //main-container全局样式
 .app-container {
-  padding: 20px;
+  padding: 24px;
+  background-color: $card-background-light;
+  border-radius: $base-border-radius;
+  box-shadow: $base-box-shadow;
+  margin-bottom: 20px;
+  transition: $base-transition;
+  
+  &:hover {
+    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
+  }
 }
 
 .components-container {
@@ -130,11 +223,12 @@ aside {
 }
 
 .pagination-container {
-  margin-top: 30px;
+  margin-top: 24px;
+  text-align: right;
 }
 
 .text-center {
-  text-align: center
+  text-align: center;
 }
 
 .sub-navbar {
@@ -144,12 +238,14 @@ aside {
   width: 100%;
   text-align: right;
   padding-right: 20px;
-  transition: 600ms ease position;
-  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
+  transition: $base-transition;
+  background: $primary-gradient;
+  border-radius: $base-border-radius $base-border-radius 0 0;
 
   .subtitle {
-    font-size: 20px;
+    font-size: 18px;
     color: #fff;
+    font-weight: 500;
   }
 
   &.draft {
@@ -163,20 +259,26 @@ aside {
 
 .link-type,
 .link-type:focus {
-  color: #337ab7;
+  color: $blue;
   cursor: pointer;
+  transition: $base-transition;
 
   &:hover {
-    color: rgb(32, 160, 255);
+    color: lighten($blue, 10%);
+    text-decoration: underline;
   }
 }
 
 .filter-container {
-  padding-bottom: 10px;
+  padding-bottom: 16px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
 
   .filter-item {
     display: inline-block;
     vertical-align: middle;
+    margin-right: 10px;
     margin-bottom: 10px;
   }
 }
@@ -190,7 +292,7 @@ aside {
   z-index: 1000 !important;
 }
 
-
+// 表格内边距优化
 .el-table--mini .el-table__cell {
-  padding:0px!important;
+  padding: 4px 0 !important;
 }

src/assets/styles/sidebar.scss

@@ -1,3 +1,5 @@
+@import './variables.scss';
+
 #app {
 
   .main-container {
@@ -12,7 +14,6 @@
   }
 
   .sidebar-container {
-    -webkit-transition: width .28s;
     transition: width 0.28s;
     width: $base-sidebar-width !important;
     background-color: $base-menu-background;
@@ -24,8 +25,7 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
-    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
-    box-shadow: 2px 0 6px rgba(0,21,41,.35);
+    box-shadow: $menu-box-shadow;
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -46,7 +46,7 @@
 
     &.has-logo {
       .el-scrollbar {
-        height: calc(100% - 50px);
+        height: calc(100% - 60px);
       }
     }
 
@@ -62,26 +62,33 @@
 
     .svg-icon {
       margin-right: 16px;
+      color: $base-menu-icon-color;
     }
 
     .el-menu {
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: transparent;
     }
 
     .el-menu-item, .el-submenu__title {
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
-      height: 45px;     //侧边菜单栏高度
+      height: 50px;
+      line-height: 50px;
+      font-size: 14px;
+      color: $base-menu-color;
+      transition: $base-transition;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: $base-menu-hover !important;
+        color: $base-menu-color-active !important;
       }
     }
 
@@ -92,9 +99,11 @@
     & .nest-menu .el-submenu>.el-submenu__title,
     & .el-submenu .el-menu-item {
       min-width: $base-sidebar-width !important;
+      background-color: $base-sub-menu-background !important;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: $base-sub-menu-hover !important;
+        color: $base-menu-color-active !important;
       }
     }
 
@@ -106,6 +115,21 @@
         background-color: $base-sub-menu-hover !important;
       }
     }
+    
+    // 活跃菜单项样式
+    .el-menu-item.is-active {
+      background-color: $base-menu-active-background !important;
+      color: $base-menu-color-active !important;
+      border-right: 3px solid $blue;
+      
+      &:hover {
+        background-color: $base-menu-active-background !important;
+      }
+      
+      .svg-icon {
+        color: $base-menu-color-active;
+      }
+    }
   }
 
   .hideSidebar {
@@ -139,7 +163,6 @@
         .svg-icon {
           margin-left: 20px;
         }
-
       }
     }
 
@@ -183,7 +206,6 @@
   }
 
   .withoutAnimation {
-
     .main-container,
     .sidebar-container {
       transition: none;
@@ -202,8 +224,7 @@
   .nest-menu .el-submenu>.el-submenu__title,
   .el-menu-item {
     &:hover {
-      // you can use $subMenuHover
-      background-color: rgba(0, 0, 0, 0.06) !important;
+      background-color: $base-menu-hover !important;
     }
   }
 
@@ -213,7 +234,7 @@
     overflow-y: auto;
 
     &::-webkit-scrollbar-track-piece {
-      background: #d3dce6;
+      background: #f0f2f5;
     }
 
     &::-webkit-scrollbar {
@@ -221,8 +242,51 @@
     }
 
     &::-webkit-scrollbar-thumb {
-      background: #99a9bf;
+      background: #c0c4cc;
       border-radius: 20px;
     }
   }
 }
+
+// 侧边栏 Logo 样式
+.sidebar-logo-container {
+  position: relative;
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  background: $base-menu-background;
+  text-align: center;
+  overflow: hidden;
+  
+  & .sidebar-logo-link {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    & .sidebar-logo {
+      width: 32px;
+      height: 32px;
+      vertical-align: middle;
+      margin-right: 12px;
+    }
+    
+    & .sidebar-title {
+      display: inline-block;
+      margin: 0;
+      color: $base-menu-color-active;
+      font-weight: 600;
+      line-height: 60px;
+      font-size: 16px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      vertical-align: middle;
+    }
+  }
+  
+  &.collapse {
+    .sidebar-logo {
+      margin-right: 0;
+    }
+  }
+}

src/assets/styles/transition.scss

@@ -1,28 +1,30 @@
+@import './variables.scss';
+
 // global transition css
 
 /* fade */
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.28s;
+  transition: opacity 0.28s ease;
 }
 
-.fade-enter,
-.fade-leave-active {
+.fade-enter-from,
+.fade-leave-to {
   opacity: 0;
 }
 
 /* fade-transform */
-.fade-transform--move,
+.fade-transform-move,
 .fade-transform-leave-active,
 .fade-transform-enter-active {
-  transition: all .5s;
+  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .fade-transform-leave-active {
   position: absolute;
 }
 
-.fade-transform-enter {
+.fade-transform-enter-from {
   opacity: 0;
   transform: translateX(-30px);
 }
@@ -35,19 +37,135 @@
 /* breadcrumb transition */
 .breadcrumb-enter-active,
 .breadcrumb-leave-active {
-  transition: all .5s;
+  transition: all 0.4s ease;
 }
 
-.breadcrumb-enter,
-.breadcrumb-leave-active {
+.breadcrumb-enter-from,
+.breadcrumb-leave-to {
   opacity: 0;
   transform: translateX(20px);
 }
 
 .breadcrumb-move {
-  transition: all .5s;
+  transition: all 0.4s ease;
 }
 
 .breadcrumb-leave-active {
   position: absolute;
 }
+
+/* slide-fade */
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: all 0.3s ease-out;
+}
+
+.slide-fade-enter-from {
+  transform: translateY(-20px);
+  opacity: 0;
+}
+
+.slide-fade-leave-to {
+  transform: translateY(20px);
+  opacity: 0;
+}
+
+/* zoom-fade */
+.zoom-fade-enter-active,
+.zoom-fade-leave-active {
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+.zoom-fade-enter-from {
+  opacity: 0;
+  transform: scale(0.92);
+}
+
+.zoom-fade-leave-to {
+  opacity: 0;
+  transform: scale(1.06);
+}
+
+/* scale */
+.scale-enter-active,
+.scale-leave-active {
+  transition: all 0.3s ease;
+}
+
+.scale-enter-from,
+.scale-leave-to {
+  opacity: 0;
+  transform: scale(0);
+}
+
+/* slide-right */
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* slide-down */
+.slide-down-enter-active,
+.slide-down-leave-active {
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.slide-down-enter-from {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+.slide-down-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+/* list transition */
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.3s ease;
+}
+
+.list-enter-from {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.list-leave-to {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+/* card hover effect */
+.card-hover-effect {
+  transition: $base-transition;
+  
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.09);
+  }
+}
+
+/* button hover effect */
+.btn-hover-effect {
+  transition: $base-transition;
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.09);
+  }
+  
+  &:active {
+    transform: translateY(0);
+  }
+}

src/assets/styles/variables.scss

@@ -1,42 +1,46 @@
 // base color
-$blue:#324157;
-$light-blue:#3A71A8;
-$red:#C03639;
+$blue: #1890ff;
+$light-blue: #36cfc9;
+$red: #f5222d;
 $pink: #E65D6E;
-$green: #30B08F;
+$green: #52c41a;
 $tiffany: #4AB7BD;
-$yellow:#FEC171;
+$yellow: #faad14;
 $panGreen: #30B08F;
+$purple: #722ed1;
+
+// 新增渐变色和背景色
+$primary-gradient: linear-gradient(45deg, $blue, $light-blue);
+$background-light: #f5f7fa;
+$background-dark: #141414;
+$card-background-light: #ffffff;
+$card-background-dark: #1f1f1f;
 
 // 默认菜单主题风格
-$base-menu-color:#bfcbd9;
-$base-menu-color-active:#f4f4f5;
-$base-menu-background:#304156;
+$base-menu-color: #bfcbd9;
+$base-menu-color-active: #f4f4f5;
+$base-menu-background: #001529;
 $base-logo-title-color: #ffffff;
 
-$base-menu-light-color:rgba(0,0,0,.70);
-$base-menu-light-background:#ffffff;
+$base-menu-light-color: rgba(0,0,0,.70);
+$base-menu-light-background: #ffffff;
 $base-logo-light-title-color: #001529;
 
-$base-sub-menu-background:#1f2d3d;
-$base-sub-menu-hover:#001528;
-
-// 自定义暗色菜单风格
-/**
-$base-menu-color:hsla(0,0%,100%,.65);
-$base-menu-color-active:#fff;
-$base-menu-background:#001529;
-$base-logo-title-color: #ffffff;
+$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-menu-light-color:rgba(0,0,0,.70);
-$base-menu-light-background:#ffffff;
-$base-logo-light-title-color: #001529;
+// 菜单阴影
+$menu-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
 
-$base-sub-menu-background:#000c17;
-$base-sub-menu-hover:#001528;
-*/
+// 新增样式变量
+$base-border-radius: 8px;
+$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);
 
-$base-sidebar-width: 225px;
+$base-sidebar-width: 240px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
@@ -50,5 +54,15 @@ $base-sidebar-width: 225px;
   subMenuHover: $base-sub-menu-hover;
   sideBarWidth: $base-sidebar-width;
   logoTitleColor: $base-logo-title-color;
-  logoLightTitleColor: $base-logo-light-title-color
+  logoLightTitleColor: $base-logo-light-title-color;
+  primaryColor: $blue;
+  primaryGradient: $primary-gradient;
+  successColor: $green;
+  warningColor: $yellow;
+  dangerColor: $red;
+  accentColor: $purple;
+  backgroundLight: $background-light;
+  backgroundDark: $background-dark;
+  menuBoxShadow: $menu-box-shadow;
+  menuActiveBackground: $base-menu-active-background;
 }