style: 调整样式目录

src/assets/styles/color.scss

@@ -1,3 +0,0 @@
-body {
-  --div-bg-box: #f5f7fa;
-}

src/assets/styles/element-dark.scss

@@ -1,32 +0,0 @@
-/* 自定义 element 暗黑模式 */
-html.dark {
-  /* wangEditor */
-  --w-e-toolbar-color: #eeeeee;
-  --w-e-toolbar-bg-color: #141414;
-  --w-e-textarea-bg-color: #141414;
-  --w-e-textarea-color: #eeeeee;
-  --w-e-toolbar-active-bg-color: #464646;
-  --w-e-toolbar-border-color: var(--el-border-color-darker);
-
-  .w-e-bar-item button:hover,
-  .w-e-menu-tooltip-v5::before {
-    color: #eeeeee;
-  }
-
-  /* login */
-  .login-container {
-    background-color: #191919 !important;
-
-    .login-box {
-      background-color: rgb(0 0 0 / 80%) !important;
-
-      .login-form {
-        box-shadow: rgb(255 255 255 / 12%) 0 2px 10px 2px !important;
-
-        .logo-text {
-          color: var(--el-text-color-primary) !important;
-        }
-      }
-    }
-  }
-}

src/assets/styles/index.scss

@@ -1,14 +1,14 @@
 // reset style sheet
-// color css
-@use '@/assets/styles/color';
 @use '@/assets/styles/reset';
+
 // CSS common style sheet
 @use '@/assets/styles/common';
+
 // iconfont css
 @use '@/assets/styles/iconfont/iconfont';
+
 // font css
 @use '@/assets/styles/fonts/font';
-// custom element dark css
-@use '@/assets/styles/element-dark';
+
 // custom element css
 @use '@/assets/styles/element';

src/assets/styles/var.scss

@@ -1,2 +0,0 @@
-/* global css variable */
-$primary-color: var(--el-color-primary);

src/assets/styles/variables.scss

@@ -0,0 +1,6 @@
+/** 全局SCSS变量 */
+html:root {
+  // layout
+  --layout-header-bg-color: #8b9e7e;
+  --layout-header-height: 55px;
+}

src/assets/vue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/axios/config.ts

@@ -17,6 +17,7 @@ const defaultResponseInterceptors = (response: AxiosResponse) => {
   } else if (code === ResultEnum.SUCCESS) {
     return response.data
   } else {
+    console.error(msg)
     ElMessage.error(msg)
   }
 }

src/axios/service.ts

@@ -44,7 +44,8 @@ axiosInstance.interceptors.response.use(
     return res
   },
   (error: AxiosError) => {
-    console.log('err： ' + error)
+    ElMessage.error('服务未连接!')
+    console.error('response.use： ' + error)
     return Promise.reject(error)
   }
 )

src/layouts/container/AppTransverse/index.scss

@@ -1,60 +1,4 @@
-.el-container {
-  width: 100%;
-  height: 100%;
-  :deep(.el-header) {
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 55px;
-    padding: 0 15px 0 0;
-    background-color: var(primary-color);
-    border-bottom: 1px solid var(--el-header-border-color);
-    .logo {
-      width: 210px;
-      margin-right: 30px;
-      .logo-img {
-        width: 28px;
-        object-fit: contain;
-        margin-right: 6px;
-      }
-      .logo-text {
-        font-size: 21.5px;
-        font-weight: bold;
-        color: var(--el-header-logo-text-color);
-        white-space: nowrap;
-      }
-    }
-    .el-menu {
-      flex: 1;
-      height: 100%;
-      overflow: hidden;
-      border-bottom: none;
-      .el-sub-menu__hide-arrow {
-        width: 65px;
-        height: 55px;
-      }
-      .el-menu-item.is-active {
-        color: #ffffff !important;
-      }
-      .is-active {
-        background-color: var(--el-color-primary) !important;
-        border-bottom-color: var(--el-color-primary) !important;
-        &::before {
-          width: 0;
-        }
-        .el-sub-menu__title {
-          color: #ffffff !important;
-          background-color: var(--el-color-primary) !important;
-          border-bottom-color: var(--el-color-primary) !important;
-        }
-      }
-    }
-  }
-
-  @media screen and (width <= 730px) {
-    .logo {
-      display: none !important;
-    }
-  }
+.el-header {
+  height: var(--layout-header-height);
+  background-color: var(--layout-header-bg-color);
 }

src/layouts/container/AppTransverse/index.vue

@@ -1,6 +1,6 @@
 <template>
   <el-container class="layout">
-    <el-header></el-header>
+    <el-header>菜单</el-header>
     <el-main>
       <router-view v-slot="{ Component, route }">
         <transition appear name="fade-transform" mode="out-in">
@@ -14,6 +14,6 @@
   </el-container>
 </template>
 <script lang="tsx" setup name="LayoutTransverse"></script>
-<style lang="scss">
+<style lang="scss" scoped>
 @use './index';
 </style>

vite.config.ts

@@ -29,7 +29,7 @@ export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
     css: {
       preprocessorOptions: {
         scss: {
-          additionalData: `@use "@/assets/styles/element/index.scss" as *;`
+          additionalData: `@use "@/assets/styles/variables.scss" as *;`
         }
       }
     },