优化黑色主题

src/assets/styles/black.scss

@@ -1,48 +1,46 @@
 // 黑夜模式
 [data-theme='theme-black'] {
-  --base-color: #304156;
+  --base-color: #22272e; // #304156;
   --base-color-rgba: rgba(48, 65, 86, 0.3);
+  --base-color-white: #ffffff;
+
   // root
-  --base-menu-color: var(--base-color);
-  --base-menu-color-active: #f4f4f5;
   --base-bg-main: var(--base-color);
   --base-menu-background: var(--base-color);
-  --base-logo-title-color: #ffffff;
+  --base-logo-title-color: var(--base-color-white);
   --base-topBar-background: var(--base-color) !important;
-  --base-topBar-color: #fff;
+  --base-topBar-color: var(--base-color-white);
 
-  --base-color-white: #ffffff;
+  --base-color-bar: #dadada;
-  --next-color-bar: #dadada;
+  --base-border-color: #424242;
-  --next-border-color: #424242;
+  --base-border-black: #333333;
-  --next-border-black: #333333;
+  --base-text-color-regular: #9b9da1;
-  --next-text-color-regular: #9b9da1;
+  --base-text-color-placeholder: #7a7a7a;
-  --next-text-color-placeholder: #7a7a7a;
+  --base-color-hover: #3c3c3c;
-  --next-color-hover: #3c3c3c;
-  --next-color-hover-rgba: rgba(0, 0, 0, 0.3);
 
   // el-ement ui 设置
-  --el-fill-color-light: var(--next-color-hover-rgba) !important;
+  --el-fill-color-light: var(--base-color-rgba) !important;
   --el-fill-color-blank: var(--base-bg-main) !important;
-  // element plus
+  // --el-table-bg-color: var(--el-fill-color-blank);
-  --el-table-bg-color: var(--el-fill-color-blank);
   --el-color-white: var(--base-color) !important;
-  --el-text-color-primary: var(--next-color-bar) !important;
+  --el-text-color-primary: var(--base-color-bar) !important;
-  --el-border-color-base: var(--next-border-black) !important;
+  --el-border-color-base: var(--base-border-black) !important;
-  --el-border-color-light: var(--next-border-black) !important;
+  --el-border-color-light: var(--base-border-black) !important;
-  --el-text-color-regular: var(--next-text-color-regular) !important;
+  --el-text-color-regular: var(--base-text-color-regular) !important;
   --el-bg-color: var(--base-bg-main) !important;
   --el-color-success-lighter: var(--base-color) !important;
   --el-color-warning-lighter: var(--base-color) !important;
   --el-color-danger-lighter: var(--base-color) !important;
   --el-color-primary-lighter: var(--base-color) !important;
-  --el-color-primary-light-9: var(--next-color-hover) !important;
+  --el-color-primary-light-9: var(--base-color-hover) !important;
   --el-text-color-disabled-base: var(--el-color-primary) !important;
-  --el-border-color-lighter: var(--next-border-black) !important;
+  --el-border-color-lighter: var(--base-border-black) !important;
-  --el-text-color-placeholder: var(--next-text-color-placeholder) !important;
+  // --el-text-color-placeholder: var(--base-text-color-placeholder) !important;
-  --el-disabled-bg-color: var(--base-color) !important;
+  // --el-disabled-bg-color: var(--base-color) !important;
   --el-fill-base: var(--base-color-white) !important;
   // el-date-picker bg
   --el-bg-color-overlay: var(--base-bg-main) !important;
+  --el-disabled-text-color: var(--base-bg-main) !important;
   // drawer
   .drawer-item,
   .drawer-title {
@@ -82,11 +80,11 @@
 
   // alert / notice-bar
   .home-card-item {
-    border: 1px solid var(--next-border-color-light) !important;
+    border: 1px solid var(--base-border-color-light) !important;
   }
   .el-alert,
   .notice-bar {
-    border: 1px solid var(--next-border-color) !important;
+    border: 1px solid var(--base-border-color) !important;
     background-color: var(--base-color) !important;
   }
 
@@ -95,16 +93,16 @@
     background: unset !important;
   }
   .el-color-picker__trigger {
-    border: 1px solid var(--next-border-color-light) !important;
+    border: 1px solid var(--base-border-color-light) !important;
   }
 
   // popper / dropdown
   .el-popper {
-    border: 1px solid var(--next-border-color) !important;
+    border: 1px solid var(--base-border-color) !important;
     color: var(--el-text-color-primary) !important;
     .el-popper__arrow:before {
       background: var(--el-color-white) !important;
-      border: 1px solid var(--next-border-color);
+      border: 1px solid var(--base-border-color);
     }
     a {
       color: var(--el-text-color-primary) !important;

src/assets/styles/variables.module.scss

@@ -10,32 +10,23 @@ $panGreen: #30b08f;
 
 // 默认菜单主题风格
 :root {
-  --base-menu-color: #bfcbd9;
-  --base-menu-color-active: #f4f4f5;
   --base-menu-background: #ffffff;
   --base-logo-title-color: #ffffff;
   --base-topBar-background: #ffffff;
   --base-topBar-color: #5a5e66;
   --base-sidebar-width: 210px;
-
-  --base-tags-bg-border: #d8dce5;
 }
 /***默认主题颜色配置***/
 [data-theme='theme-light'] {
-  --base-menu-color: #bfcbd9;
-  --base-menu-color-active: #f4f4f5;
   // 菜单背景
   --base-menu-background: #ffffff;
   // logo部分文字颜色
   --base-logo-title-color: #001529;
   // 顶部导航栏背景色
   --base-topBar-background: #ffffff;
-
 }
 /***深色主题颜色配置***/
 [data-theme='theme-dark'] {
-  --base-menu-color: #bfcbd9;
-  --base-menu-color-active: #f4f4f5;
   --base-menu-background: #304156;
   --base-logo-title-color: #ffffff;
   --base-topBar-background: #ffffff;

src/views/index_v1.vue

@@ -65,19 +65,20 @@
           <template #header>
             <div>
               <span>在线用户</span>
-              <el-button class="home-card-more" type="text" @click="onOpenGitee">更多</el-button>
+              <el-button class="home-card-more" text @click="onOpenGitee">更多</el-button>
             </div>
           </template>
           <div class="info">
             <!-- <vue3-seamless-scroll :list="onlineUsers" class="info-scroll" :step="0.2" :limitScrollNum="1"> -->
+            <el-scrollbar wrap-class="scrollbar-wrapper">
               <div class="info-scroll">
                 <ul class="info-ul">
                   <li v-for="(v, k) in onlineUsers" :key="k" class="info-item">
                     <div class="info-item-left" v-text="v.name"></div>
                     <div class="info-item-right" v-text="dayjs(v.loginTime).format('HH:mm:ss')"></div>
                   </li>
-              </ul>
+                </ul></div
-            </div>
+            ></el-scrollbar>
             <!-- </vue3-seamless-scroll> -->
           </div>
         </el-card>
@@ -119,8 +120,8 @@ import LineChart from './dashboard/LineChart'
 import RaddarChart from './dashboard/RaddarChart'
 import PieChart from './dashboard/PieChart'
 import BarChart from './dashboard/BarChart'
-import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
+// import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
-import { listNewArticle } from '@/api/article/article.js'
+
 import dayjs from 'dayjs'
 
 const data = {
@@ -151,11 +152,7 @@ const currentTime = computed(() => {
 const onlineUsers = computed(() => {
   return proxy.$store.getters.onlineUsers
 })
-let newArticleList = reactive([])
 
-listNewArticle().then((res) => {
-  newArticleList = res.data
-})
 let lineChartData = reactive([])
 const dataType = ref(null)
 function handleSetLineChartData(type) {
@@ -175,12 +172,7 @@ function onOpenGitee() {}
     padding: 3px 0;
     font-size: 13px;
   }
-  .home-card-time {
+
-    float: right;
-    font-size: 13px;
-    width: 130px;
-    margin-top: -4px;
-  }
   .user-item {
     height: 198px;
     display: flex;
@@ -219,7 +211,7 @@ function onOpenGitee() {}
     // overflow-y: scroll;
     .info-scroll {
       height: 100%;
-      overflow-y: scroll;
+      overflow: auto;
       .info-ul {
         list-style: none;
         padding: 0;
@@ -250,101 +242,6 @@ function onOpenGitee() {}
       }
     }
   }
-  .home-recommend-row {
-    .home-recommend {
-      position: relative;
-      height: 100px;
-      color: #ffffff;
-      border-radius: 4px;
-      overflow: hidden;
-      cursor: pointer;
-
-      &:hover {
-        i {
-          right: 0px !important;
-          bottom: 0px !important;
-          transition: all ease 0.3s;
-        }
-      }
-
-      i {
-        position: absolute;
-        right: -10px;
-        bottom: -10px;
-        font-size: 70px;
-        transform: rotate(-30deg);
-        transition: all ease 0.3s;
-      }
-
-      .home-recommend-auto {
-        padding: 15px;
-        position: absolute;
-        left: 0;
-        top: 5%;
-        .home-recommend-msg {
-          font-size: 12px;
-          margin-top: 10px;
-        }
-      }
-    }
-  }
-  .charts {
-    width: 100%;
-    height: 282.6px;
-    display: flex;
-    padding: 12px 15px;
-    .charts-left {
-      flex: 1;
-      height: 100%;
-    }
-    .charts-right {
-      flex: 1;
-      height: 100%;
-    }
-  }
-  .home-charts {
-    height: 282.6px;
-    .home-charts-item {
-      background-color: #f5f5f5;
-      padding: 19px 15px;
-      border-radius: 2px;
-      display: flex;
-      align-items: center;
-      margin-bottom: 12px;
-      cursor: pointer;
-
-      &:last-of-type {
-        margin-bottom: 0;
-      }
-
-      &:hover {
-        .home-charts-item-right {
-          i {
-            transform: rotate(45deg);
-            transition: all ease 0.3s;
-          }
-        }
-      }
-      .home-charts-item-left {
-        flex: 1;
-        .home-charts-item-title {
-          font-size: 13px;
-        }
-        .home-charts-item-num {
-          font-size: 20px;
-          margin-top: 5px;
-        }
-      }
-      .home-charts-item-right {
-        i {
-          font-size: 20px;
-          padding: 8px;
-          border-radius: 100%;
-          transition: all ease 0.3s;
-        }
-      }
-    }
-  }
 }
 .dashboard-editor-container {
   padding: 18px;