feat: 实现部分暗黑模式

src/styles/elementui.scss

@@ -20,12 +20,14 @@ button.el-button.el-button--text {
   padding: 4px 8px;
   border: none;
   background-color: transparent;
-  span {
-    color: var(--color-theme);
-  }
+
   &:hover {
     background-color: var(--color-btn-default-bg-hover);
-    color: var(--color-theme);
+  }
+  &:active {
+    span {
+      color: var(--color-theme);
+    }
   }
 }
 
@@ -133,9 +135,9 @@ button.el-button.el-button--text {
 .el-button.el-button--blue {
   border: none;
   padding: 0 4px;
-  background-color: #f6f6fe;
-  color: var(--color-accent-1);
-  fill: var(--color-accent-1);
+  background-color: var(--color-btn-blue-bg);
+  color: var(--color-neutral-1);
+  fill: var(--color-neutral-1);
   &:hover {
     background-color: var(--color-btn-default-bg-hover);
     fill: var(--color-theme);
@@ -388,7 +390,7 @@ div .el-checkbox__inner:hover {
 }
 div .el-checkbox__inner {
   border-color: var(--color-select-border);
-  background-color: #FFF;
+  background-color: #fff;
 }
 div .el-checkbox__input.is-checked .el-checkbox__inner:after {
   border-color: var(--color-mode);
@@ -748,4 +750,4 @@ div .DaterangeClass {
   background-color: var(--management-bg-color) !important;
   border-color: var(--management-bg-color) !important;
   border-radius: 12px !important;
-}
+}

src/styles/theme.scss

@@ -219,6 +219,8 @@
   --input-disabled-text-color: #a8abb2;
 
   --el-disabled-bg-color: #f4f4f4;
+
+  --color-btn-blue-bg: #f6f6fe;
 }
 
 :root.dark {
@@ -260,6 +262,8 @@
   --color-toggle-btn-module-active-bg: #656f7d;
 
   --color-user-config-title-bottom-border: #3f434a;
+
+  --color-btn-blue-bg: rgba(255, 255, 255, 0);
   // 滚动条
   --color-scrollbar-thumb: #656f7d;
 
@@ -271,6 +275,7 @@
 
   --color-v-box-content-drag-bg: #2b2f36;
 
+  --color-input-disabled-border: #656f7d;
   // 邮件
   --w-e-toolbar-bg-color: var(--color-email-bg);
   --w-e-textarea-bg-color: var(--color-email-bg);

src/views/Booking/src/components/BookingDetail/src/BookingDetail.vue

@@ -8,9 +8,12 @@ import { transportationMode } from '@/components/TransportationMode'
 import { useRoute } from 'vue-router'
 import { useOverflow } from '@/hooks/useOverflow'
 import { formatTimezone } from '@/utils/tools'
+import { useThemeStore } from '@/stores/modules/theme'
 
 const route = useRoute()
 
+const themeStore = useThemeStore()
+
 // 可拖拽模块的列表
 const boxList = ref([
   { id: 1, name: 'Basic Information' },
@@ -94,7 +97,7 @@ const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allDat
 
 <template>
   <div class="booking-detail" v-vloading="loading">
-    <div class="header">
+    <div class="header" :class="{ 'is-dark': themeStore.theme === 'dark' }">
       <div class="detail-status">
         <span
           class="font_family"
@@ -243,6 +246,16 @@ const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allDat
       rgba(224, 247, 249, 0.6) 80.46%,
       rgba(255, 255, 255, 0.3)
     );
+    &.is-dark {
+      background: linear-gradient(
+        270deg,
+        rgba(43, 47, 54, 0.1) 1.88%,
+        rgba(255, 182, 121, 0.1) 15.6%,
+        rgba(118, 145, 255, 0.1) 49.92%,
+        rgba(96, 242, 255, 0.1) 81.78%,
+        rgba(43, 47, 54, 0.1) 97.95%
+      );
+    }
 
     .detail-status {
       position: relative;

src/views/Booking/src/components/BookingDetail/src/components/EmailView.vue

@@ -204,7 +204,7 @@ const sendEmail = () => {
         @click="handleFocusEditor"
       />
     </div>
-    <div style="border-bottom: 1px solid var(--color-border)">
+    <div style="border-bottom: 1px solid var(--color-divider)">
       <el-button
         @click="sendEmail"
         class="el-button--dark"
@@ -268,12 +268,19 @@ const sendEmail = () => {
   }
 
   & > .content {
+    display: inline-block;
+    flex: 1;
     padding-top: 2px;
     line-height: 18px;
     color: var(--color-theme);
     word-break: break-all;
   }
 }
+.separated-by {
+  :deep(.el-input__wrapper) {
+    box-shadow: 0 0 0 1px var(--color-email-border) inset;
+  }
+}
 
 .text-editor {
   margin-top: 16px;

src/views/Layout/src/components/Header/HeaderView.vue

@@ -174,7 +174,7 @@ const handleLogin = () => {
           <div class="header">
             <span class="title">Themes</span>
             <el-button @click="themePopoverRef.hide()" class="close-icon el-button--text">
-              <span class="font_family icon-icon_reject_b"></span>
+              <div class="font_family icon-icon_reject_b"></div>
             </el-button>
           </div>
           <div class="tips">
@@ -213,7 +213,7 @@ const handleLogin = () => {
           </div>
         </div>
         <template #reference>
-          <el-button>
+          <el-button style="height: 40px; width: 40px" class="el-button--text">
             <span class="font_family icon-icon_themes_b" style="font-size: 16px"></span
           ></el-button>
         </template>
@@ -301,7 +301,7 @@ const handleLogin = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 24px;
+  gap: 8px;
   height: 100%;
 
   .el-input {

src/views/Login/src/components/ChangePasswordCard.vue

@@ -149,7 +149,7 @@ onUnmounted(() => {
 <template>
   <div class="login" ref="changePasswordRef">
     <el-card class="login-card">
-      <div class="title">
+      <div class="title" :class="{ 'is-dark': themeStore.theme === 'dark' }">
         <span class="welcome">Change Password</span>
         <span class="tips">{{ tips }}</span>
       </div>
@@ -272,16 +272,19 @@ onUnmounted(() => {
 
 .login-card {
   width: 400px;
-
+  border-radius: 12px;
   .title {
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-bottom: 24px;
     padding: 40px 40px 0;
-    background: url(../image/bg-login-card.png) no-repeat center center;
+    background: url(../image/bg-login-card.png) no-repeat;
     background-position: top left; /* 从左上角开始显示 */
     background-size: 400px 100px; /* 保持背景图像的原始尺寸 */
+    &.is-dark {
+      background: url(../image/bg-login-card-dark.png) no-repeat;
+    }
     .welcome {
       margin-bottom: 16px;
       font-size: 24px;
@@ -388,6 +391,7 @@ onUnmounted(() => {
   .el-input.user-name {
     :deep(.el-input__wrapper) {
       padding-right: 6px;
+      box-shadow: 0 0 0 1px var(--color-input-disabled-border) inset;
     }
   }
 

src/views/Login/src/loginView.vue

@@ -346,7 +346,7 @@ const firstLoginTipsRef = ref()
   <div class="login" ref="loginRef">
     <ScoringSystem class="scoring-system"></ScoringSystem>
     <el-card class="login-card" v-if="status === 'login'">
-      <div class="card-title">
+      <div class="card-title" :class="{ 'is-dark': themeStore.theme === 'dark' }">
         <span class="welcome">Welcome to KLN Portal</span>
         <span class="tips">Login to your account</span>
       </div>
@@ -415,7 +415,7 @@ const firstLoginTipsRef = ref()
       </template>
     </el-card>
     <el-card class="login-card" v-else-if="status === 'reset'">
-      <div class="card-title">
+      <div class="card-title" :class="{ 'is-dark': themeStore.theme === 'dark' }">
         <span class="welcome">Password Retrieval</span>
         <span class="tips">We'll send your password to your email address.</span>
       </div>
@@ -510,10 +510,12 @@ const firstLoginTipsRef = ref()
     align-items: center;
     height: 94px;
     padding-top: 32px;
-    background: url(../src/image/bg-login-card.png) no-repeat center center;
+    background: url(../src/image/bg-login-card.png) no-repeat;
     background-position: top left; /* 从左上角开始显示 */
     background-size: 400px 100px; /* 保持背景图像的原始尺寸 */
-
+    &.is-dark {
+      background: url(../src/image/bg-login-card-dark.png) no-repeat;
+    }
     .welcome {
       margin-bottom: 16px;
       font-size: 24px;

src/views/Tracking/src/components/PublicTracking/src/components/PublicTrackingDetail.vue

@@ -4,10 +4,13 @@ import MilestonesTable from './MilestonesTable.vue'
 import { transportationMode } from '@/components/TransportationMode'
 import { useRoute } from 'vue-router'
 import { useOverflow } from '@/hooks/useOverflow'
+import { useThemeStore } from '@/stores/modules/theme'
 import { formatTimezone } from '@/utils/tools'
 
 const route = useRoute()
 
+const themeStore = useThemeStore()
+
 const allData: any = ref({
   transportInfo: {
     'Tracking No.': '',
@@ -72,7 +75,7 @@ const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allDat
 
 <template>
   <div class="tracking-detail">
-    <div class="header">
+    <div class="header" :class="{ 'is-dark': themeStore.theme === 'dark' }">
       <div class="detail-status">
         <span
           class="font_family"
@@ -191,6 +194,16 @@ const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allDat
       rgba(224, 247, 249, 0.6) 80.46%,
       rgba(255, 255, 255, 0.3)
     );
+    &.is-dark {
+      background: linear-gradient(
+        270deg,
+        rgba(43, 47, 54, 0.1) 1.88%,
+        rgba(255, 182, 121, 0.1) 15.6%,
+        rgba(118, 145, 255, 0.1) 49.92%,
+        rgba(96, 242, 255, 0.1) 81.78%,
+        rgba(43, 47, 54, 0.1) 97.95%
+      );
+    }
 
     .detail-status {
       position: relative;

src/views/Tracking/src/components/TrackingDetail/src/TrackingDetail.vue

@@ -432,6 +432,7 @@ const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allDat
       top: 8px;
       right: 16px;
       z-index: 1000;
+      overflow: hidden;
     }
   }
 }

src/views/Tracking/src/components/TrackingDetail/src/components/EmailDrawer.vue

@@ -279,6 +279,11 @@ const sendEmail = () => {
     color: var(--color-theme);
   }
 }
+.separated-by {
+  :deep(.el-input__wrapper) {
+    box-shadow: 0 0 0 1px var(--color-email-border) inset;
+  }
+}
 
 .text-editor {
   margin-top: 16px;

src/views/Tracking/src/components/TrackingDetail/src/components/MapView.vue

@@ -410,6 +410,15 @@ onMounted(() => {
       }
     }
   }
+  .leaflet-control-zoom {
+    span {
+      color: #2b2f36;
+    }
+  }
+}
+/* 示例：将所有地图元素的颜色反转 */
+.leaflet-container img {
+  filter: invert(1) hue-rotate(10deg);
 }
 /* 自定义重置缩放按钮控件样式 */
 .reset-zoom-control {

src/views/Tracking/src/components/TrackingDetail/src/components/TransportStep.vue

@@ -44,7 +44,6 @@ const handleTabClick = (name: string) => {
   width: 400px;
   height: 484px;
   background-color: #fff;
-  border: 1px solid #eaebed;
   border-radius: 12px;
   .header {
     display: flex;