refactor: 暗黑模式自定义样式统一

Former-commit-id: 83dc3250edd859af22c13cf12835327c71709f55

src/components/Breadcrumb/index.vue

@@ -1,15 +1,12 @@
 <template>
-  <el-breadcrumb
-    separator-class="el-icon-arrow-right"
-    class="h-[50px] flex items-center"
-  >
+  <el-breadcrumb class="h-[50px] flex items-center">
     <transition-group name="breadcrumb">
       <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
         <span
           v-if="
             item.redirect === 'noredirect' || index === breadcrumbs.length - 1
           "
-          class="text-[#97a8be]"
+          class="text-[var(--el-disabled-text-color)]"
           >{{ translateRouteTitleI18n(item.meta.title) }}</span
         >
         <a v-else @click.prevent="handleLink(item)">
@@ -96,10 +93,11 @@ onBeforeMount(() => {
   font-size: 14px;
   line-height: 50px;
   margin-left: 8px;
+}
 
-  .no-redirect {
-    color: #97a8be;
-    cursor: text;
-  }
+// 覆盖 element-plus 的样式
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
 }
 </style>

src/components/Hamburger/index.vue

@@ -4,11 +4,11 @@
     class="px-[15px] hover:bg-gray-50 cursor-pointer h-[50px] leading-[50px] dark:hover:bg-[var(--el-fill-color-light)]"
   >
     <svg
-      :class="{ 'is-active': isActive  } "
+      :class="{ 'is-active': isActive }"
       class="hamburger"
       viewBox="0 0 1024 1024"
       xmlns="http://www.w3.org/2000/svg"
-      style="color:#FFF!important"
+      style="color: #fff !important"
     >
       <path
         d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
@@ -37,7 +37,7 @@ function toggleClick() {
 .hamburger {
   width: 20px;
   height: 20px;
-  vertical-align:-4px;
+  vertical-align: -4px;
   &.is-active {
     transform: rotate(180deg);
   }

src/components/RightPanel/index.vue

@@ -104,6 +104,7 @@ onBeforeUnmount(() => {
 }
 
 .right-panel {
+  background-color: var(--el-bg-color);
   width: 100%;
   max-width: 300px;
   height: 100vh;
@@ -113,7 +114,6 @@ onBeforeUnmount(() => {
   box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
   transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
   transform: translate(100%);
-  background: #fff;
   z-index: 199;
 
   .icon {
@@ -125,7 +125,6 @@ onBeforeUnmount(() => {
 
 .show {
   transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
-
   .right-panel-background {
     z-index: 99;
     opacity: 1;
@@ -139,22 +138,18 @@ onBeforeUnmount(() => {
 }
 
 .right-panel__button {
+  background-color: var(--el-color-primary);
+  color: var(--el-color-white);
   width: 48px;
   height: 48px;
-  position: absolute;
   left: -48px;
+  line-height: 48px;
+  position: absolute;
   text-align: center;
   font-size: 24px;
-  border-radius: 6px 0 0 6px !important;
+  border-radius: 6px 0 0 6px;
   z-index: 0;
   pointer-events: auto;
   cursor: pointer;
-  color: #fff;
-  line-height: 48px;
-
-  i {
-    font-size: 24px;
-    line-height: 48px;
-  }
 }
 </style>