♻️ refactor: code

mock/controller/user.js

@@ -74,12 +74,7 @@ module.exports = [
         data: {
           permissions,
           username,
-          'avatar|1': [
-            'https://gcore.jsdelivr.net/gh/zxwk1998/image/avatar/avatar_1.png',
-            'https://gcore.jsdelivr.net/gh/zxwk1998/image/avatar/avatar_2.png',
-            'https://gcore.jsdelivr.net/gh/zxwk1998/image/avatar/avatar_3.png',
-            'https://gcore.jsdelivr.net/gh/zxwk1998/image/avatar/avatar_4.png',
-          ],
+          'avatar|1': ['https://gcore.jsdelivr.net/gh/zxwk1998/image/avatar/avatar_1.png'],
         },
       }
     },

src/components/VabPageHeader/index.vue

@@ -98,23 +98,4 @@
       }
     }
   }
-
-  // 响应式设计
-  @media (max-width: 768px) {
-    .page-header {
-      padding: 20px;
-
-      .header-content {
-        flex-direction: column;
-        gap: 16px;
-        text-align: center;
-
-        .header-left {
-          .page-title {
-            font-size: 1.5rem;
-          }
-        }
-      }
-    }
-  }
 </style>

src/layouts/components/VabAvatar/index.vue

@@ -251,28 +251,4 @@
       margin: 8px 0;
     }
   }
-
-  // 响应式设计
-  @media (max-width: 768px) {
-    .avatar-container {
-      padding: 6px 8px;
-
-      .user-info {
-        display: none;
-      }
-
-      .dropdown-icon {
-        display: none;
-      }
-    }
-
-    .custom-dropdown {
-      min-width: 200px;
-    }
-  }
-
-  // 隐藏下拉菜单箭头
-  ::v-deep .popper__arrow {
-    display: none !important;
-  }
 </style>

src/layouts/components/VabBreadcrumb/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-breadcrumb class="breadcrumb-container" separator=">">
+  <el-breadcrumb class="breadcrumb-container hidden-sm-and-down" separator=">">
     <el-breadcrumb-item v-for="item in list" :key="item.path">
       {{ item.meta.title }}
     </el-breadcrumb-item>

src/layouts/components/VabNav/index.vue

@@ -3,12 +3,7 @@
     <el-row :gutter="15">
       <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="4">
         <div class="left-panel">
-          <vab-icon
-            :icon="['fas', collapse ? 'indent' : 'outdent']"
-            :title="collapse ? '展开' : '收起'"
-            class="fold-unfold"
-            @click="handleCollapse"
-          />
+          <vab-icon :icon="['fas', collapse ? 'indent' : 'outdent']" class="fold-unfold" @click="handleCollapse" />
           <vab-breadcrumb class="hidden-xs-only" />
         </div>
       </el-col>
@@ -117,7 +112,6 @@
         border: 1px solid rgba(0, 0, 0, 0.08);
         border-radius: 50%;
         cursor: pointer;
-        fill: rgba(0, 0, 0, 0.7);
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         backdrop-filter: blur(10px);
         -webkit-backdrop-filter: blur(10px);

src/layouts/components/VabTabs/index.vue

@@ -425,31 +425,6 @@
       }
     }
   }
-
-  // 响应式设计
-  @media (max-width: 768px) {
-    .tabs-container {
-      padding: 0 12px;
-
-      .tabs-content {
-        width: calc(100% - 80px);
-
-        ::v-deep {
-          .el-tabs__item {
-            padding: 0 12px;
-            margin-right: 6px;
-            font-size: 12px;
-            border-radius: 12px;
-          }
-        }
-      }
-
-      .more {
-        padding: 6px 12px;
-        font-size: 12px;
-      }
-    }
-  }
 </style>
 
 <style lang="scss">

src/layouts/components/VabTop/index.vue

@@ -9,10 +9,7 @@
           <el-menu
             active-text-color=" hsla(0, 0%, 100%, 0.95)"
             background-color="#191a23"
-            :collapse="collapse"
-            :collapse-transition="false"
             :default-active="activeMenu"
-            :default-openeds="defaultOpens"
             text-color=" hsla(0, 0%, 100%, 0.95)"
             menu-trigger="hover"
             mode="horizontal"

src/layouts/index.vue

@@ -12,7 +12,7 @@
         <vab-top />
         <div v-if="tabsBar === 'true' || tabsBar === true" :class="{ 'tag-view-show': tabsBar }">
           <el-scrollbar>
-            <vab-tabs />
+            <div class="vab-main main-padding"><vab-tabs /></div>
           </el-scrollbar>
         </div>
       </div>

src/styles/vab.scss

@@ -8,8 +8,7 @@
 @import './normalize.scss';
 @import './transition.scss';
 @import './loading.scss';
-
-$base: '.vab';
+@import 'element-ui/lib/theme-chalk/display.css';
 
 @mixin scrollbar {
   max-height: 88vh;

src/views/vab/more/index.vue

@@ -600,48 +600,4 @@
       }
     }
   }
-
-  // 响应式设计
-  @media (max-width: 768px) {
-    .more-container {
-      .modern-card {
-        .card-content {
-          padding: 24px;
-        }
-
-        .card-header {
-          .icon-wrapper {
-            width: 56px;
-            height: 56px;
-            font-size: 24px;
-          }
-
-          .header-text {
-            .card-title {
-              font-size: 20px;
-            }
-          }
-        }
-
-        .open-source .features-grid {
-          grid-template-columns: 1fr;
-        }
-
-        .custom-service {
-          .service-header {
-            flex-direction: column;
-            text-align: center;
-
-            .service-price {
-              text-align: center;
-            }
-          }
-
-          .service-features {
-            grid-template-columns: 1fr;
-          }
-        }
-      }
-    }
-  }
 </style>