Merge branch 'dev_zyh' of United_Software/k_online_ui into dev

src/assets/main.css

@@ -13,7 +13,7 @@
   /* background-color: white; */
 }
 ::-webkit-scrollbar-thumb {
-  background-color: #dddee0;
+  background-color: var(--color-scrollbar-thumb);
   border-radius: 20px;
   box-shadow: inset 0 0 0 white;
 }

src/components/AutoComplete/src/AutoComplete.vue

@@ -233,9 +233,4 @@ const handleCurrentChange = (val: number) => {
 :deep(.el-popper) {
   border-radius: 12px !important;
 }
-:deep(.el-pagination) {
-  .is-active {
-    color: #b57b32 !important;
-  }
-}
 </style>

src/components/ContainerStatus/src/ContainerStatus.vue

@@ -1,7 +1,14 @@
 <script setup lang="ts">
-import emptyImage from './image/no-data.png'
 import { formatTimezone } from '@/utils/tools'
+import { useThemeStore } from '@/stores/modules/theme'
+import lightPng from './image/no_data.png'
+import darkPng from './image/no_data_dark.png'
 
+const themeStore = useThemeStore()
+
+const emptyImg = computed(() => {
+  return themeStore.theme === 'dark' ? darkPng : lightPng
+})
 const props = defineProps({
   data: Object
 })
@@ -58,7 +65,7 @@ watch(
       </el-collapse-item>
     </el-collapse>
     <div v-else class="empty-content" style="">
-      <el-image :src="emptyImage" alt="empty"></el-image>
+      <img :src="emptyImg" :class="{ 'is-dark': themeStore.theme === 'dark' }" alt="empty" />
       <div class="empty-text" style="">No data</div>
     </div>
     <div class="footer">
@@ -84,12 +91,8 @@ watch(
     flex-direction: column;
     align-items: center;
     height: 358px;
-    .el-image {
-      width: 200px;
-      height: 200px;
-      margin-top: 20px;
-      object-fit: cover;
-    }
+    padding-top: 140px;
+
     .empty-text {
       margin-top: 8px;
       color: #b5b9bf;
@@ -126,6 +129,7 @@ watch(
     line-height: 50px;
     & > .title {
       font-size: 16px;
+      color: var(--color-neutral-2);
       span {
         margin-left: 4px;
         font-weight: 700;
@@ -149,7 +153,7 @@ watch(
       display: flex;
       height: 52px;
       margin-top: -22px;
-      background-color: var(--color-table-header-bg);
+      background-color: var(--color-container-status-node-bg);
       border: 1px solid var(--color-border);
       border-radius: 6px;
       color: var(--color-neutral-1);

src/components/CustomizeColumns/src/CustomizeColumns.vue

@@ -349,11 +349,7 @@ defineExpose({
           placeholder="Search columns you preffered"
         >
           <template #prefix>
-            <span class="iconfont_icon">
-              <svg class="iconfont" aria-hidden="true">
-                <use xlink:href="#icon-icon_search_b"></use>
-              </svg>
-            </span>
+            <span class="font_family icon-icon_search_b"></span>
           </template>
           <el-option
             v-for="item in searchOptions"
@@ -577,9 +573,10 @@ defineExpose({
       padding-left: 12px;
       border: 1px solid var(--color-border);
       border-radius: 6px;
+      background-color: var(--color-customize-column-item-bg);
 
       &:hover {
-        background-color: #fff1e5;
+        background-color: var(--color-customize-column-item-hover-bg);
         box-shadow: 4px 4px 32px 0px rgba(0, 0, 0, 0.1);
       }
 
@@ -589,7 +586,7 @@ defineExpose({
 
       span.draggable-icon {
         margin-right: 12px;
-        color: var(--color-neutral-3);
+        color: var(--color-customize-column-item-drag-icon);
       }
 
       .font_family {
@@ -607,13 +604,18 @@ defineExpose({
   }
 
   .ghost-column {
-    opacity: 0;
     cursor: move !important;
+    span {
+      opacity: 0;
+    }
+    border: 1px dashed var(--color-customize-column-item-drag-border) !important;
+    background-color: var(--color-customize-column-item-drag-bg) !important;
+    box-shadow: none !important;
   }
 
   .fallback-class {
     opacity: 1 !important;
-    background-color: #fff1e5 !important;
+    background-color: var(--color-customize-column-item-hover-bg) !important;
     cursor: move !important;
   }
 }
@@ -629,7 +631,7 @@ defineExpose({
     .el-tabs {
       .el-tabs__header {
         margin-bottom: 0px;
-        border-bottom: 1px solid #ebeef5;
+        border-bottom: 1px solid var(--color-customize-column-tabs-header-border);
       }
 
       .el-tabs__item {
@@ -654,9 +656,9 @@ defineExpose({
 }
 
 .right-select-columns {
-  background-color: #fffbf7;
+  background-color: var(--color-customize-column-right-section-bg);
   padding-top: 0;
-  border: 1px dashed var(--color-border);
+  border: 1px dashed var(--color-customize-column-right-section-border);
   border-radius: 12px;
 
   & > .title {
@@ -671,10 +673,6 @@ defineExpose({
     padding: 8px;
     padding-bottom: 0px;
   }
-
-  .column-item {
-    background-color: #fff;
-  }
 }
 </style>
 <style lang="scss">
@@ -700,13 +698,16 @@ defineExpose({
 
   .el-tabs__nav-prev {
     border-right: 1px solid var(--color-border);
-    box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: 2px 0px 12px rgba(0, 0, 0, 0.3);
+    // .el-icon {
+    //   color: white;
+    // }
     /* 左侧阴影 */
   }
 
   .el-tabs__nav-next {
     border-left: 1px solid var(--color-border);
-    box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: -2px 0px 12px rgba(0, 0, 0, 0.2);
     /* 左侧阴影 */
   }
 

src/components/DateRange/src/DateRange.vue

@@ -293,18 +293,18 @@ const clearDaterangeObj = () => {
 </script>
 <template>
   <div class="select">
-    <el-popover trigger="click" :width="400" :visible="Date_visible">
+    <el-popover trigger="click" :width="400" :visible="Date_visible" popper-class="DaterangeClass">
       <template #reference>
         <div class="Date_Range" @blur="Date_visible = false" @click="Date_visible = !Date_visible">
           <div class="select_title">Date Range</div>
           <span class="iconfont_icon">
-            <svg class="iconfont" aria-hidden="true">
+            <svg class="iconfont icon_dark" aria-hidden="true">
               <use xlink:href="#icon-icon_dropdown_b"></use>
             </svg>
           </span>
         </div>
       </template>
-      <div>
+      <div class="date_header">
         <div class="title">Date Range</div>
         <div class="ETD">
           <CalendarDate
@@ -323,7 +323,7 @@ const clearDaterangeObj = () => {
         <div class="AddType" v-for="(item, index) in AddDateType" :key="item">
           <div>
             <div class="ETD_title Date_Title">
-              <div>Date Type</div>
+              <div class="Date_type">Date Type</div>
               <span class="iconfont_icon" @click="deleteType(index)">
                 <svg class="iconfont icon_delete" aria-hidden="true">
                   <use xlink:href="#icon-icon_delete_b"></use>
@@ -350,6 +350,7 @@ const clearDaterangeObj = () => {
               CalendarWidth="352px"
               :Date="DateCreation"
               @DateRangeChange="DateRangeChange"
+              :isType="true"
             ></CalendarDate>
           </div>
         </div>
@@ -379,7 +380,7 @@ const clearDaterangeObj = () => {
   cursor: pointer;
   display: flex;
   align-items: center;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-select-border);
   border-radius: var(--border-radius-6);
 }
 .Date_Range {
@@ -405,11 +406,12 @@ const clearDaterangeObj = () => {
 .title {
   font-weight: 700;
   font-size: var(--font-size-5);
-  background-color: #f6f8fa;
+  background-color: var(--color-header-bg);
   height: 48px;
   display: flex;
   align-items: center;
   padding-left: 16px;
+  border-radius: 12px 12px 0 0;
 }
 .ETD {
   margin: 8px 16px;
@@ -448,7 +450,7 @@ const clearDaterangeObj = () => {
   height: 40px;
 }
 .AddType {
-  background-color: var(--color-neutral-4);
+  background-color: var(--color-header-bg);
   margin: 0 16px 8px 16px;
   padding: 8px;
   border-radius: var(--border-radius-6);
@@ -458,7 +460,7 @@ const clearDaterangeObj = () => {
   justify-content: flex-end;
   align-items: center;
   height: 48px;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--border-color-2);
   margin-top: 5px;
   font-weight: 400;
   font-size: var(--font-size-3);
@@ -494,4 +496,14 @@ const clearDaterangeObj = () => {
   padding: 0 4px;
   height: 24px;
 }
+.icon_dark {
+  fill: var(--color-neutral-1);
+}
+.date_header {
+  background-color: var(--management-bg-color);
+  border-radius: 12px;
+}
+.Date_type {
+  color: var(--color-neutral-2);
+}
 </style>

src/components/DateRange/src/components/CalendarDate.vue

@@ -15,6 +15,10 @@ const props = defineProps({
   },
   Date: {
     type: Array
+  },
+  isType: {
+    type: Boolean,
+    default: false
   }
 })
 const ETDDate = ref(props.Date)
@@ -104,7 +108,10 @@ const isTwoDate = (date: any) => {
     <a-range-picker
       separator="To"
       :showToday="false"
-      :style="{ width: props.CalendarWidth }"
+      :style="{
+        width: props.CalendarWidth,
+        backgroundColor: props.isType ? 'var(--more-type-bg-color)' : 'var(--management-bg-color)'
+      }"
       :open="open"
       :disabled="Disabled"
       @change="changeRangeData"
@@ -117,7 +124,7 @@ const isTwoDate = (date: any) => {
     >
       <template #suffixIcon>
         <span class="iconfont_icon">
-          <svg class="iconfont" aria-hidden="true">
+          <svg class="iconfont icon_suffix" aria-hidden="true">
             <use xlink:href="#icon-icon_date_b"></use>
           </svg>
         </span>
@@ -148,13 +155,13 @@ const isTwoDate = (date: any) => {
 .footer_left {
   display: flex;
   flex: 50%;
-  padding: 0 4px 0 0;
+  padding: 0 0 0 5px;
   height: 48px;
   display: flex;
   align-items: center;
 }
 .footer_right {
-  border-left: 1px solid var(--color-border);
+  border-left: 1px solid var(--border-color-2);
   padding-left: 8px;
 }
 .el-button--noborder {
@@ -172,4 +179,7 @@ const isTwoDate = (date: any) => {
   width: 14px;
   height: 14px;
 }
+.icon_suffix {
+  fill: var(--color-neutral-1);
+}
 </style>

src/components/DateRange/src/components/QuickCalendarDate.vue

@@ -129,7 +129,7 @@ const placeholder = computed(() => {
     >
       <template #suffixIcon>
         <span class="iconfont_icon">
-          <svg class="iconfont" aria-hidden="true">
+          <svg class="iconfont icon_dark" aria-hidden="true">
             <use xlink:href="#icon-icon_date_b"></use>
           </svg>
         </span>
@@ -160,13 +160,14 @@ const placeholder = computed(() => {
 .footer_left {
   display: flex;
   flex: 50%;
-  padding: 0 4px 0 0;
+  padding: 0 0 0 5px;
   height: 48px;
   display: flex;
   align-items: center;
+  border-left: 1px solid var(--border-color-2);
 }
 .footer_right {
-  border-left: 1px solid var(--color-border);
+  border-left: 1px solid var(--border-color-2);
   padding-left: 8px;
 }
 .el-button--noborder {

src/components/FliterTags/src/FilterTags.vue

@@ -132,7 +132,7 @@ const checkedBox = (i: any, name: any, checked: any) => {
 }
 .v-tag__all {
   font-weight: 400;
-  background-color: #feecf3;
+  background-color: var(--color-tag-all-bg-color);
   color: #e26394;
 }
 .v-tag__created {

src/components/IconDropDown/src/IconDropDown.vue

@@ -13,6 +13,6 @@
 .iconfont_select {
   width: 17px;
   height: 17px;
-  fill: var(--color-btn-default-dark-bg);
+  fill: var(--color-neutral-1);
 }
 </style>

src/components/MoreFilters/src/components/SelectValue.vue

@@ -136,7 +136,7 @@ const clickSeeAll = () => {
         </div>
         <div v-else class="select_title_2">{{ Serval }}</div>
         <span class="iconfont_icon">
-          <svg class="iconfont" aria-hidden="true">
+          <svg class="iconfont icon_dark" aria-hidden="true">
             <use xlink:href="#icon-icon_dropdown_b"></use>
           </svg>
         </span>
@@ -198,13 +198,14 @@ const clickSeeAll = () => {
 .select {
   cursor: pointer;
   width: 368px;
-  height: 40px;
+  height: 32px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: white;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-select-border);
   border-radius: var(--border-radius-6);
+  background-color: transparent;
 }
 .select:hover {
   border: 1px solid var(--color-theme);
@@ -333,7 +334,7 @@ const clickSeeAll = () => {
   overflow: scroll;
 }
 .isDisabled {
-  background-color: #f5f7fa;
+  background-color: var(--input-disabled-bg-color);
   color: #a8abb2;
   cursor: not-allowed;
   box-shadow: none !important;

src/components/ScoringGrade/components/DialogColorful.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useThemeStore } from '@/stores/modules/theme'
+import BubbleLight from '../image/bubble_corner_colorful.png'
+import BubbleDark from '../image/bubble_corner_colorful_darkmode.png'
 const props = defineProps({
   colorfulSrc: String,
   isshowexpression: Boolean,
@@ -10,6 +13,7 @@ const emits = defineEmits(['submitDetails'])
 const submitDetails = (val: any) => {
   emits('submitDetails', val)
 }
+const themeStore = useThemeStore()
 </script>
 <template>
   <div class="colorfulflex">
@@ -18,7 +22,7 @@ const submitDetails = (val: any) => {
         <img :src="props.colorfulSrc" />
       </div>
       <div class="vector">
-        <img class="vector_img" src="../image/bubble_corner_colorful.png" />
+        <img class="vector_img" :src="themeStore.theme == 'light' ? BubbleLight : BubbleDark" />
       </div>
     </div>
     <div v-if="props.isshowDetails" class="dialogcolorful submit">
@@ -38,7 +42,7 @@ const submitDetails = (val: any) => {
         </div>
       </div>
       <div class="vector vector_submit">
-        <img class="vector_img" src="../image/bubble_corner_colorful.png" />
+        <img class="vector_img" :src="themeStore.theme == 'light' ? BubbleLight : BubbleDark" />
       </div>
     </div>
   </div>
@@ -62,7 +66,7 @@ const submitDetails = (val: any) => {
   color: var(--tag-info-text-color);
   font-size: var(--font-size-4);
   border-radius: var(--border-radius-12) var(--border-radius-12) 0 var(--border-radius-12);
-  background: linear-gradient(251deg, rgba(242, 244, 247) 0%, rgba(255, 237, 230) 100%);
+  background: var(--scoring-colurful-color);
   padding: 8px;
   width: 56px;
   height: 56px;
@@ -91,6 +95,7 @@ const submitDetails = (val: any) => {
   .el-textarea__inner {
     resize: none; // 去除右下角图标
     padding: 5px 7px 5px 10px;
+    box-shadow: 0 0 0 1px var(--color-select-border) inset;
   }
 }
 .submit_button {
@@ -108,4 +113,9 @@ const submitDetails = (val: any) => {
   font-weight: 400;
   font-size: var(--font-size-3);
 }
+.inputdetails {
+  background-color: var(--management-bg-color);
+  border-radius: 6px;
+  border-color: var(--color-select-border);
+}
 </style>

src/components/ScoringGrade/components/DialogUe.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useThemeStore } from '@/stores/modules/theme'
+import BubbleLight from '../image/bubble_corner.png'
+import BubbleDark from '../image/bubble_corner_darkmode.png'
 
 const props = defineProps({
   content: String,
@@ -77,6 +80,7 @@ const changeSmileRadio = (title: any, value: any) => {
   SmileObj[title] = value
   emits('changeSmileRadio', SmileObj)
 }
+const themeStore = useThemeStore()
 </script>
 <template>
   <div style="margin-bottom: 8px">
@@ -130,7 +134,9 @@ const changeSmileRadio = (title: any, value: any) => {
         </div>
       </div>
     </div>
-    <div class="vector"><img class="vector_img" src="../image/bubble_corner.png" /></div>
+    <div class="vector">
+      <img class="vector_img" :src="themeStore.theme == 'light' ? BubbleLight : BubbleDark" />
+    </div>
   </div>
 </template>
 <style lang="scss" scoped>
@@ -142,7 +148,7 @@ const changeSmileRadio = (title: any, value: any) => {
   color: var(--tag-info-text-color);
   font-size: var(--font-size-4);
   border-radius: var(--border-radius-12) var(--border-radius-12) var(--border-radius-12) 0;
-  background-color: #f2f4f7;
+  background-color: var(--scoring-bg-color);
   padding: 8px;
 }
 .vector {
@@ -154,6 +160,7 @@ const changeSmileRadio = (title: any, value: any) => {
 :deep(.el-checkbox-button__inner) {
   color: var(--tag-info-text-color);
   font-size: var(--font-size-3);
+  background-color: var(--management-bg-color);
   font-weight: 400;
   padding: 0;
   width: 180px;
@@ -161,7 +168,7 @@ const changeSmileRadio = (title: any, value: any) => {
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-select-border);
   border-radius: var(--border-radius-6);
   margin-bottom: 8px;
 }
@@ -174,7 +181,7 @@ const changeSmileRadio = (title: any, value: any) => {
   border-color: transparent;
 }
 :deep(.el-checkbox-button:first-child .el-checkbox-button__inner) {
-  border-left: 1px solid var(--color-border);
+  border-left: 1px solid var(--color-select-border);
   border-top-left-radius: var(--border-radius-6);
   border-bottom-left-radius: var(--border-radius-6);
 }
@@ -219,9 +226,9 @@ const changeSmileRadio = (title: any, value: any) => {
 }
 .content_left {
   height: 41px;
-  background-color: #fff;
+  background-color: var(--management-bg-color);
   font-weight: 400;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-select-border);
   font-size: var(--font-size-3);
   border-radius: 6px 0 0 6px;
   display: flex;
@@ -234,7 +241,7 @@ const changeSmileRadio = (title: any, value: any) => {
   justify-content: center;
 }
 .content_right {
-  background-color: #e0e2e6;
+  background-color: var(--scoring-smile-radio-color);
   border-radius: 0 6px 6px 0;
 }
 .el-radio {

src/components/ScoringGrade/src/ScoringGrade.vue

@@ -391,7 +391,7 @@ const SubmitText = ref()
   width: 64px;
   height: 64px;
   border-radius: 12px 0 0 12px;
-  background-color: #fff;
+  background-color: var(--management-bg-color);
   position: absolute;
   box-shadow: -2px 2px 12px rgba(0, 0, 0, 15%);
   z-index: 2013;
@@ -402,7 +402,7 @@ const SubmitText = ref()
   justify-content: center;
 }
 .el-avatar {
-  background-color: #fff;
+  background-color: var(--management-bg-color);
   cursor: pointer;
 }
 .score_flex {
@@ -412,7 +412,7 @@ const SubmitText = ref()
   position: absolute;
   right: 64px;
   top: -30px;
-  background-color: white;
+  background-color: var(--management-bg-color);
   border-radius: 12px 0 0 12px;
 }
 .score {
@@ -428,6 +428,9 @@ const SubmitText = ref()
   z-index: 2013 !important;
   border: none;
 }
+:deep(.scoreDialog) {
+  background-color: var(--management-bg-color);
+}
 .el-dialog.scoreDialog {
   position: absolute;
   margin-bottom: 0;

src/components/SelectTable/src/SelectTable.vue

@@ -297,7 +297,7 @@ const onInput = () => {
 
 :deep(.el-table__row:not(.current-row):hover) {
   td {
-    background-color: #fff1e6 !important;
+    background-color: var(--color-btn-default-bg-hover) !important;
   }
 }
 
@@ -313,7 +313,7 @@ const onInput = () => {
   height: 40px;
   justify-content: space-between;
   padding: 0 12px 0 8px;
-
+  background-color: var(--color-mode);
   > span {
     font-size: 13px;
   }
@@ -323,12 +323,6 @@ const onInput = () => {
   border-radius: 12px !important;
 }
 
-:deep(.el-pagination) {
-  .is-active {
-    color: #b57b32 !important;
-  }
-}
-
 :deep(.el-table--fit) {
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
@@ -339,8 +333,8 @@ const onInput = () => {
 }
 
 .is-disabled {
-  background-color: #f5f7fa;
-  color: #a8abb2;
+  background-color: var(--input-disabled-bg-color);
+  color: var(--input-disabled-text-color);
   cursor: not-allowed;
   box-shadow: none !important;
 }

src/components/ShipmentStatus/src/ShipmentStatus.vue

@@ -111,7 +111,7 @@ const { isOverflow: isPathOverflow } = useOverflow(pathRef, props)
       font-weight: 700;
       text-align: center;
       line-height: 16px;
-      color: #fff;
+      color: var(--color-mode);
     }
     .right-info {
       flex: 1;
@@ -143,7 +143,7 @@ const { isOverflow: isPathOverflow } = useOverflow(pathRef, props)
         .label {
           // width: 96px;
           background-color: var(--color-neutral-1);
-          color: #fff;
+          color: var(--color-mode);
           font-weight: 500;
           font-size: 12px;
           border-radius: 3px 0 0 3px;
@@ -151,7 +151,7 @@ const { isOverflow: isPathOverflow } = useOverflow(pathRef, props)
         .detail-path {
           flex: 1;
           width: 252px;
-          background-color: #fff;
+          background-color: transparent;
           font-weight: 700;
           color: var(--color-neutral-1);
           border: 1px solid #bfc1c3;
@@ -190,21 +190,22 @@ const { isOverflow: isPathOverflow } = useOverflow(pathRef, props)
   &.last {
     & > .data {
       .left-step-icon {
-        background-color: #ccd1db;
+        background-color: var(--color-shipment-status-label-bg);
       }
       .right-info {
         .step-dot {
-          background-color: #ccd1db;
+          background-color: var(--color-shipment-status-label-bg);
         }
         .path {
           .label {
-            background-color: #ccd1db;
+            background-color: var(--color-shipment-status-label-bg);
 
-            font-weight: 600;
-            color: var(--color-neutral-1);
+            font-weight: 500;
+            color: var(--color-shipment-status-label-font-color);
           }
           .detail-path {
-            border-color: #ccd1db;
+            color: var(--color-shipment-status-detail-path-font-color);
+            border-color: var(--color-shipment-status-label-bg);
           }
         }
       }

src/components/TransportMode/src/TransportMode.vue

@@ -180,7 +180,7 @@ const defaultTransport = () => {
       <div class="el-dropdown-link">
         <div class="select_title">Transport Mode</div>
         <span class="iconfont_icon">
-          <svg class="iconfont" aria-hidden="true">
+          <svg class="iconfont icon_dark" aria-hidden="true">
             <use xlink:href="#icon-icon_dropdown_b"></use>
           </svg>
         </span>
@@ -244,6 +244,7 @@ const defaultTransport = () => {
 .iconfont_select {
   width: 17px;
   height: 17px;
+  fill: var(--color-neutral-1);
 }
 .select {
   width: 186px;
@@ -251,7 +252,7 @@ const defaultTransport = () => {
   cursor: pointer;
   display: flex;
   align-items: center;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-select-border);
   border-radius: var(--border-radius-6);
 }
 .select:hover {
@@ -307,7 +308,7 @@ const defaultTransport = () => {
   justify-content: flex-end;
   align-items: center;
   height: 48px;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--border-color-2);
   margin-top: 5px;
   font-weight: 400;
   font-size: var(--font-size-3);
@@ -339,8 +340,13 @@ const defaultTransport = () => {
   border-radius: var(--border-radius-6);
   border-color: var(--border-hover-color);
 }
+:deep(.el-dropdown-menu) {
+  background-color: var(--management-bg-color);
+}
 .dropdownwidth {
   width: 248px;
+  background-color: var(--management-bg-color);
+  border-color: var(--management-bg-color);
 }
 @media only screen and (min-width: 1280px) {
   .el-dropdown-link,
@@ -362,6 +368,6 @@ const defaultTransport = () => {
 }
 .el-divider--horizontal {
   margin: 8px 0;
-  border-top-color: var(--color-border);
+  border-top-color: var(--border-color-2);
 }
 </style>

src/components/VBox_Dashboard/src/VBox_Dashboard.vue

@@ -75,6 +75,7 @@ const vBoxPopoverRef = ref()
   margin-right: 0;
 }
 .cancel {
+  fill: var(--color-neutral-1);
   position: absolute;
   right: 12px;
   top: 12px;
@@ -94,6 +95,7 @@ const vBoxPopoverRef = ref()
     padding: 0 16px 0 48px;
     height: 48px;
     line-height: 48px;
+    fill: var(--color-neutral-1);
     font-size: 18px;
     border-bottom: 1px solid var(--color-border);
     font-weight: 700;

src/components/VBreadcrumb/src/VBreadcrumb.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import { useBreadCrumb } from '@/stores/modules/breadCrumb'
+import { useThemeStore } from '@/stores/modules/theme'
 
 const router = useRouter()
 const breadCrumb = useBreadCrumb()
+const themeStore = useThemeStore()
 
 const handleGoBack = () => {
   const routeData = breadCrumb.getUpperRoute()
@@ -22,7 +24,11 @@ const jumpLink = (label: string, query: any) => {
 </script>
 
 <template>
-  <div class="v-breadcrumd" v-if="breadCrumb.routeList.length > 1">
+  <div
+    class="v-breadcrumd"
+    :class="{ 'is-dark': themeStore.theme === 'dark' }"
+    v-if="breadCrumb.routeList.length > 1"
+  >
     <span class="font_family icon-icon_back_b" @click="handleGoBack"></span>
     <template v-for="(routeItem, index) in breadCrumb.routeList" :key="routeItem.label">
       <template v-if="index + 1 !== breadCrumb.routeList.length">
@@ -31,7 +37,7 @@ const jumpLink = (label: string, query: any) => {
         }}</span>
         <span class="interval">|</span>
       </template>
-      <span v-else style="font-weight: 700">{{ routeItem.label }}</span>
+      <span v-else>{{ routeItem.label }}</span>
     </template>
   </div>
   <div v-else></div>
@@ -41,6 +47,7 @@ const jumpLink = (label: string, query: any) => {
 .v-breadcrumd {
   display: flex;
   align-items: center;
+  font-weight: 700;
   gap: 4px;
   .icon-icon_back_b {
     font-size: 18px;
@@ -55,9 +62,14 @@ const jumpLink = (label: string, query: any) => {
     color: var(--color-neutral-3);
     cursor: pointer;
     &:hover {
-      font-weight: 500;
       color: var(--color-theme);
     }
   }
+  &.is-dark {
+    .interval,
+    .previous-route {
+      color: var(--color-neutral-2);
+    }
+  }
 }
 </style>

src/components/VEmpty/src/VEmpty.vue

@@ -1,9 +1,19 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import lightPng from './images/default_image.png'
+import darkPng from './images/default_dark_image.png'
+import { useThemeStore } from '@/stores/modules/theme'
+
+const themeStore = useThemeStore()
+// 判断当前系统主题模式
+const emptyImg = computed(() => {
+  return themeStore.theme === 'dark' ? darkPng : lightPng
+})
+</script>
 
 <template>
   <div class="v-empty">
     <div class="empty-img">
-      <img src="./images/default_image.png" alt="" />
+      <img :src="emptyImg" alt="" />
     </div>
     <p class="title">
       <slot name="title">No Results Found</slot>

src/components/VLoading/src/VLoading.vue

@@ -62,7 +62,7 @@ const props = withDefaults(defineProps<internalProps>(), {
 }
 
 .loading-text {
-  color: var(--color-neutral-3);
+  color: #b5b9bf;
 }
 
 @keyframes loading-rotate {

src/components/VSliderVerification/src/VSliderVerification.vue

@@ -47,7 +47,7 @@ const addTipsNode = () => {
 
 const styleMap = {
   start: {
-    thumbColor: 'var(--color-neutral-1)',
+    thumbColor: 'var(--color-slider-thumb-start)',
     thumbIcon: 'icon-icon_drag__line_b',
     trackBackground: 'var(--color-success)'
   },
@@ -163,6 +163,9 @@ defineExpose({
   width: 400px;
   height: 373px;
   padding: 40px;
+  background-color: var(--color-slider-bg);
+  border-radius: 16px;
+  box-shadow: -2px 2px 12px 0 rgba(0, 0, 0, 0.5);
   .tips {
     margin-bottom: 16px;
     text-align: center;

src/hooks/rowClickStyle.ts

@@ -1,6 +1,6 @@
 import { onMounted, onBeforeUnmount } from 'vue'
 
-export function useRowClickStyle(tableRef: any, rowClass: string = 'row--clicked') {
+export function useRowClickStyle(tableRef: any, rowClass: string = 'vxe-table-row-clicked-style') {
   const handleMouseDown = (event: any) => {
     const trElement = event.target.closest('tr')
     if (trElement && trElement.hasAttribute('rowid')) {

src/main.ts

@@ -19,6 +19,7 @@ import { createPinia } from 'pinia'
 
 import App from './App.vue'
 import router from './router'
+import { useThemeStore } from '@/stores/modules/theme'
 
 const app = createApp(App)
 
@@ -41,4 +42,49 @@ app.use(Antd)
 // 注册全局指令
 app.directive('vloading', VLoading)
 
+const themeStore = useThemeStore()
+
+// 动态加载暗黑主题
+async function loadDarkTheme() {
+  await import('element-plus/theme-chalk/dark/css-vars.css') // 动态导入暗黑主题
+}
+// 动态移除暗黑主题
+function unloadDarkTheme() {
+  const darkThemeStylesheet = document.getElementById('dark-theme-style')
+  if (darkThemeStylesheet) {
+    darkThemeStylesheet.remove()
+  }
+}
+// 用户没有手动切换主题时，根据系统设置自动切换
+if (!themeStore.isManualChange) {
+  // 根据用户偏好或系统设置决定是否添加暗黑模式类名
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    themeStore.toggleTheme('dark')
+    loadDarkTheme()
+  } else {
+    unloadDarkTheme()
+    themeStore.toggleTheme('light')
+  }
+} else {
+  // 用户手动切换主题时，根据用户设置切换
+  if (themeStore.theme === 'dark') {
+    loadDarkTheme()
+    themeStore.toggleTheme('dark')
+  }
+}
+
+// 提供一个全局方法来切换主题
+app.config.globalProperties.$toggleDarkMode = () => {
+  const html = document.documentElement
+  if (html.classList.contains('dark')) {
+    unloadDarkTheme()
+    html.classList.remove('dark')
+    localStorage.setItem('theme', 'light')
+  } else {
+    loadDarkTheme()
+    html.classList.add('dark')
+    localStorage.setItem('theme', 'dark')
+  }
+}
+
 app.mount('#app')

src/stores/modules/theme.ts

@@ -0,0 +1,44 @@
+import { defineStore } from 'pinia'
+
+interface ThemeState {
+  theme: string
+  isManualChange: boolean
+}
+export const useThemeStore = defineStore('theme', {
+  state: (): ThemeState => ({
+    theme: localStorage.getItem('theme') || 'light',
+    isManualChange: JSON.parse(localStorage.getItem('isManualChange')) || false
+  }),
+  actions: {
+    toggleTheme(theme: string, isManualChange = false) {
+      localStorage.setItem('theme', theme)
+      this.theme = theme
+
+      const html = document.documentElement
+      if (html.classList.contains('dark') && theme === 'light') {
+        unloadDarkTheme()
+        html.classList.remove('dark')
+      } else if (!html.classList.contains('dark') && theme === 'dark') {
+        loadDarkTheme()
+        html.classList.add('dark')
+      }
+      // 主动修改主题后，不再跟随系统设置
+      if (isManualChange) {
+        localStorage.setItem('isManualChange', JSON.stringify(isManualChange))
+        this.isManualChange = isManualChange
+      }
+    }
+  }
+})
+
+// 动态加载暗黑主题
+async function loadDarkTheme() {
+  await import('element-plus/theme-chalk/dark/css-vars.css') // 动态导入暗黑主题
+}
+// 动态移除暗黑主题
+function unloadDarkTheme() {
+  const darkThemeStylesheet = document.getElementById('dark-theme-style')
+  if (darkThemeStylesheet) {
+    darkThemeStylesheet.remove()
+  }
+}

src/styles/Antdui.scss

@@ -1,6 +1,11 @@
+.ant-picker {
+  background-color: var(--management-bg-color);
+  color: var(--color-neutral-1);
+}
 .ant-picker-range {
-  height: 32px;
-  border: 1px solid var(--color-border-1);
+  height: 40px;
+  background-color: var(--management-bg-color);
+  border: 1px solid var(--color-select-border);
 }
 .ant-picker:hover, .ant-picker-focused {
   border-color: var(--color-theme);
@@ -55,11 +60,12 @@
   .ant-picker-dropdown .ant-picker-header-view button:hover {
     color: var(--color-theme);
   }
-  .ant-picker-dropdown .ant-picker-panel-container .ant-picker-panels .ant-picker-panel {
-    border-left: 1px solid var(--color-border);
+  .ant-picker-dropdown .ant-picker-panel-container {
+    background-color: var(--management-bg-color);
+    border: 1px solid var(--border-color-2);
   }
   .ant-picker-footer {
-    border-top: 1px solid var(--color-border);
+    border-top: 1px solid var(--border-color-2);
   }
   .ant-picker-dropdown .ant-picker-panel {
     border: none;
@@ -68,9 +74,30 @@
     background: var(--color-orange-6);
   }
  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content th {
-  color: var(--color-neutral-3);
+  color: var(--color-neutral-2);
  }
 .ant-picker-dropdown .ant-picker-decade-panel,.ant-picker-dropdown .ant-picker-year-panel,.ant-picker-dropdown .ant-picker-quarter-panel,.ant-picker-dropdown .ant-picker-month-panel,.ant-picker-dropdown .ant-picker-week-panel,.ant-picker-dropdown .ant-picker-date-panel,.ant-picker-dropdown .ant-picker-time-panel {
-  
-  border-left: 1px solid var(--color-border);
+  border-left: 1px solid var(--border-color-2);
+}
+.ant-picker .ant-picker-input >input, .ant-picker .ant-picker-input >input::placeholder {
+  color: var(--color-neutral-1);
+}
+.ant-picker-dropdown .ant-picker-cell .ant-picker-cell-inner {
+  color: var(--color-neutral-1);
+}
+.ant-picker-dropdown .ant-picker-header {
+  border-bottom: 1px solid var(--border-color-2);
+}
+.ant-picker .ant-picker-clear {
+  background-color: var(--management-bg-color);
+  color: var(--color-neutral-1);
+}
+.ant-picker .ant-picker-clear:hover {
+  color: var(--color-neutral-1);
+}
+.ant-picker.ant-picker-disabled {
+  border-color: var(--border-color-2);
+}
+.ant-picker-dropdown.ant-picker-dropdown-placement-bottomLeft .ant-picker-range-arrow {
+  display: none;
 }

src/styles/elementui.scss

@@ -1,7 +1,7 @@
 // button
 .el-button.el-button--noborder {
   border: none;
-  background-color: var(--color-white);
+  background-color: var(--management-bg-color);
   span {
     color: var(--color-theme);
   }
@@ -20,19 +20,22 @@ 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);
+    }
   }
 }
 
 .el-button.el-button--default {
-  background-color: var(--color-white);
+  background-color: var(--color-btn-default-bg-color);
   color: var(--color-neutral-1);
-  border: 1px solid var(--color-border);
+  fill: var(--color-neutral-1);
+  border: 1px solid var(--color-select-border);
   margin-left: 8px !important;
   &:hover {
     border: 1px solid var(--color-btn-default-bg-hover);
@@ -44,12 +47,13 @@ button.el-button.el-button--text {
   }
 }
 
-.el-button.el-button--main.is-plain {
+.el-button--main.is-plain {
   background-color: var(--color-white);
   border: 1px solid var(--color-border);
   span {
     color: var(--color-theme);
   }
+  fill: var(--color-theme);
   &:hover {
     border: 1px solid var(--color-btn-main-plain-bg-hover);
     background-color: var(--color-btn-main-plain-bg-hover);
@@ -58,12 +62,13 @@ button.el-button.el-button--text {
   }
 }
 
-.el-button.el-button--main {
+button.el-button--main {
   border: none;
   background-color: var(--color-theme);
   span {
     color: var(--color-white);
   }
+  fill: var(--color-white);
   &:hover {
     background-color: var(--color-btn-main-bg-hover);
     color: var(--color-white);
@@ -71,12 +76,30 @@ button.el-button.el-button--text {
   }
 }
 
+button.el-button.el-button--pain-theme {
+  border: 1px solid var(--color-el-btn-pain-theme-border);
+  background-color: var(--color-el-btn-pain-theme-bg);
+
+  fill: var(--color-el-btn-pain-theme-text);
+  color: var(--color-el-btn-pain-theme-text);
+  span {
+    color: var(--color-el-btn-pain-theme-text);
+  }
+  &:hover {
+    border-color: var(--color-el-btn-pain-theme-border);
+    background-color: var(--color-el-btn-pain-theme-bg-hover);
+    color: var(--color-white);
+    fill: var(--color-white);
+  }
+}
+
 .el-button.el-button--success {
   border: none;
   background-color: var(--color-success);
   span {
     color: var(--color-white);
   }
+  fill: var(--color-white);
   &:hover {
     background-color: var(--color-btn-success-bg-hover);
     color: var(--color-white);
@@ -90,6 +113,7 @@ button.el-button.el-button--text {
   span {
     color: var(--color-white);
   }
+  fill: var(--color-white);
   &:hover {
     background-color: var(--color-btn-warning-bg-hover);
     color: var(--color-white);
@@ -103,6 +127,7 @@ button.el-button.el-button--text {
   span {
     color: var(--color-white);
   }
+  fill: var(--color-white);
   &:hover {
     background-color: var(--color-btn-danger-bg-hover);
     color: var(--color-white);
@@ -113,7 +138,8 @@ button.el-button.el-button--text {
 .el-button.el-button--grey {
   border: none;
   background-color: var(--color-grey);
-  color: var(--color-accent-1);
+  color: var(--color-neutral-1);
+  fill: var(--color-neutral-1);
   &:hover {
     background-color: var(--color-btn-default-bg-hover);
     fill: var(--color-theme);
@@ -126,8 +152,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);
+  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);
@@ -142,9 +169,9 @@ button.el-button.el-button--icon {
   height: auto;
   padding: 4px;
   border: none;
-  background-color: #f6f6fe;
+  background-color: var(--color-btn-icon-bg);
   &:hover {
-    background-color: #f6f6fe;
+    background-color: var(--color-btn-icon-bg);
   }
 }
 // 初始为黑色
@@ -155,9 +182,10 @@ button.el-button.el-button--icon {
   span {
     color: var(--color-white);
   }
+  fill: var(--color-white);
   &:hover {
-    background-color: var(--color-btn-default-dark-bg);
-    fill: var(--color-btn-default-dark-hover);
+    background-color: var(--color-btn-default-dark-hover-bg);
+    fill: var(--color-btn-default-dark-hover-bg);
     span {
       color: var(--color-btn-default-dark-hover) !important;
     }
@@ -203,6 +231,7 @@ div.el-dialog {
   padding: 0 0 8px;
   border-radius: 12px;
   overflow: hidden;
+  background-color: var(--color-dialog-body-bg);
 }
 header.el-dialog__header {
   padding: 12px 16px;
@@ -276,7 +305,7 @@ div.el-message-box {
   .el-message-box__header {
     height: 56px;
     padding: 16px;
-    background-color: var(--color-table-header-bg);
+    background-color: var(--color-message-box-header-bg);
     & > span {
       font-weight: 700;
       font-size: var(--font-size-4);
@@ -320,6 +349,7 @@ div.el-drawer {
   }
   .el-drawer__body {
     padding: 16px;
+    background-color: var(--color-drawer-body-bg);
   }
   .el-drawer__close-btn:focus i,
   .el-drawer__close-btn:hover i {
@@ -331,7 +361,7 @@ div .el-input__inner {
   color: var(--color-neutral-1);
   font-size: var(--font-size-3);
 }
-input.el-input__inner::placeholder {
+.el-input__inner::placeholder {
   color: var(--color-neutral-3);
   font-size: var(--font-size-3);
 }
@@ -342,12 +372,12 @@ div .el-select__placeholder.is-transparent {
   }
 }
 div.el-input__wrapper {
-  box-shadow: 0 0 0 1px var(--color-border) inset;
-  padding-left: 8px;
+  box-shadow: 0 0 0 1px var(--el-border) inset;
+  padding: 0 8px;
 }
 div.el-input div.el-input__wrapper.is-focus {
   box-shadow: 0 0 0 1px var(--color-theme) inset;
-  background-color: #ffffff !important;
+  background-color: var(--color-mode) !important;
 }
 div.el-input__wrapper:hover {
   box-shadow: 0 0 0 1px var(--color-theme) inset;
@@ -373,7 +403,14 @@ div .el-dropdown__popper .el-dropdown__list {
   user-select: none;
 }
 div .el-checkbox__inner:hover {
-  border-color: var(--color-border);
+  border-color: var(--color-select-border);
+}
+div .el-checkbox__inner {
+  border-color: var(--color-select-border);
+  background-color: #fff;
+}
+div .el-checkbox__input.is-checked .el-checkbox__inner:after {
+  border-color: var(--color-mode);
 }
 div .el-checkbox__input.is-checked .el-checkbox__inner {
   background-color: var(--color-theme);
@@ -399,16 +436,28 @@ div .el-checkbox.el-checkbox--large span.el-checkbox__inner::after {
   width: 5px; /* 打勾图标宽度 */
   height: 10px; /* 打勾图标高度 */
 }
+/* 修改暗黑模式下选中时打勾图标的大小 */
+html.dark .el-checkbox.el-checkbox--large span.el-checkbox__inner::after {
+  left: 5px; /* 调整左边距 */
+  top: 1px; /* 调整上边距 */
+  width: 5px; /* 打勾图标宽度 */
+  height: 10px; /* 打勾图标高度 */
+}
 div .el-popper__arrow,
 div .el-popper__arrow:before {
-  height: 0;
-  width: 0;
+  // height: 0;
+  // width: 0;
+}
+.el-popper.is-dark,
+div.el-popper.is-dark > .el-popper__arrow:before {
+  background-color: var(--color-el-popper-bg);
+  border: var(--color-el-popper-bg);
 }
 div .el-popper[data-popper-placement^='bottom'] > .el-popper__arrow {
   top: 0;
 }
 div .el-dropdown-menu__item {
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-select-border);
   border-radius: var(--border-radius-6);
 }
 div .el-dropdown__popper.el-popper,
@@ -429,10 +478,12 @@ div .el-popper[data-popper-placement^='bottom'] .el-popper__arrow:before {
 div .el-popover.el-popper {
   padding: 0;
 }
-.el-popper.is-dark {
+div.el-popper.is-dark {
   span {
     color: #fff;
   }
+  background-color: var(--color-el-popper-bg);
+  border-color: var(--color-el-popper-bg);
 }
 div .el-collapse-item__arrow,
 .el-tabs__nav {
@@ -450,7 +501,7 @@ div .el-collapse-item__content {
   }
 }
 div .el-select__wrapper {
-  box-shadow: 0 0 0 1px var(--color-border);
+  box-shadow: 0 0 0 1px var(--color-select-border);
 }
 div .el-select__wrapper.is-focused {
   box-shadow: 0 0 0 1px var(--color-theme);
@@ -594,34 +645,24 @@ div .el-select-dropdown.is-multiple .el-select-dropdown__item.is-selected:after
 div .el-select__wrapper.is-disabled,
 .el-select__wrapper.is-disabled:hover {
   box-shadow: none !important;
+  background-color: var(--input-disabled-bg-color);
+  color: var(--input-disabled-text-color);
 }
 div .scoreDialog header.el-dialog__header {
-  background: linear-gradient(
-    251deg,
-    rgba(255, 255, 255),
-    rgba(255, 244, 235) 22.66%,
-    rgba(240, 243, 255) 44.57%,
-    rgba(224, 247, 249) 80.46%,
-    rgba(255, 255, 255)
-  );
+  background: var(--dashboard-scoring-bg-color);
   position: fixed;
   width: 640px;
   height: 48px;
   border-radius: 6px 6px 0 0;
 }
+div .el-dialog.scoreDialog {
+  background-color: var(--management-bg-color);
+}
 div .scoreDialog .el-dialog__body {
   margin-top: 40px;
 }
 div .scoreDialog2 header.el-dialog__header {
-  background: linear-gradient(
-    251deg,
-    rgba(255, 255, 255),
-    rgba(255, 244, 235) 22.66%,
-    rgba(240, 243, 255) 44.57%,
-    rgba(224, 247, 249) 80.46%,
-    rgba(255, 255, 255)
-  );
-  position: fixed;
+  background: var(--dashboard-scoring-bg-color);
   width: 640px;
   border-radius: 6px 6px 0 0;
   height: 48px;
@@ -704,14 +745,35 @@ div .el-loading-spinner .path {
 }
 div .ShowAlerIcon {
   width: 342px;
-}
-div .dash_popver {
-  border-radius: 12px !important;
+  background-color: var(--tips-bg-color) !important;
+  border-color: var(--tips-bg-color) !important;
 }
 div .el-month-table td .el-date-table-cell__text {
   color: var(--color-neutral-1);
 }
 div .el-month-table td.today .el-date-table-cell__text {
-  color: var(--color-neutral-1) ; 
-  font-weight: 400 ;
-}
+  color: var(--color-neutral-1);
+  font-weight: 400;
+}
+div .el-select-dropdown {
+  background-color: var(--management-bg-color);
+  border-color: var(--color-header-bg);
+}
+div label.smile_radio .el-radio__inner {
+  background-color: var(--management-bg-color);
+}
+span.el-radio__inner {
+  border: 1px solid var(--el-radio-input-border);
+}
+div .el-radio__inner:hover {
+  border-color: var(--color-theme);
+}
+div .dash_popver {
+  background-color: var(--management-bg-color) !important;
+  border-radius: 12px !important;
+}
+div .DaterangeClass {
+  background-color: var(--management-bg-color) !important;
+  border-color: var(--management-bg-color) !important;
+  border-radius: 12px !important;
+}

src/styles/index.scss

@@ -9,7 +9,7 @@
   font-size: var(--font-size-3);
   color: var(--color-neutral-1);
   // user-select: none;
-  background-color: white;
+  background-color: var(--color-mode);
 }
 @font-face {
   font-family: 'Lato-Light'; /* 为字体定义一个名称 */
@@ -47,3 +47,6 @@
   border-radius: var(--border-radius-6);
   background: var(--border-hover-color);
 }
+.icon_dark {
+  fill: var(--color-neutral-1);
+}

src/styles/theme-g.scss

@@ -0,0 +1,73 @@
+:root.dark {
+  // 菜单栏
+  --color-mune-active-bg: rgba(255, 117, 0, 0.2);
+  // 横幅
+  --dashboard-scoring-bg-color: linear-gradient(
+    270deg,
+    rgba(255, 182, 121,0.1) 0.9%,
+    rgba(118, 145, 255,0.1) 49.92%,
+    rgba(96, 242, 255,0.1) 98.78%
+  );
+  --scoring-colurful-color: linear-gradient(251deg, rgba(113, 103, 99) 0%,rgba(92, 106, 125) 100%);
+
+  // button 
+  --color-btn-default-bg-color: transparent;
+  --color-btn-default-bg-hover:rgba(255, 117, 0, 0.2);
+  --color-btn-default-dark-bg: #ED6D00;
+  --color-btn-default-dark-hover: #fff;
+  --color-grey: #3C414A;
+
+  --management-bg-color: #3e454f;
+  --more-type-bg-color: #343A43;
+
+  // filterstag
+  --color-tag-checked-all: rgba(255, 117, 0, 0.2);
+  --color-tag-all-bg: rgba(255, 117, 0, 0.2);
+  --color-tag-all-bg-color:rgba(226,99,148,0.2);
+  --color-tag-created-bg: rgba(1, 103, 251, 0.2);
+  --color-tag-confirmed-bg: rgba(179, 232, 93, 0.15);
+  --color-tag-cancelled-bg: rgba(240, 241, 243, 0.2);
+  --color-tag-cancelled: rgba(240,241,243,0.7)
+  --color-tag-departure: #40A6E5;
+  --color-tag-departure-bg: rgba(64, 166, 229, 0.2);
+  --color-tag-cargo-received-bg: rgba(111, 124, 241, 0.2);
+  --color-tag-cargo-received: #6f7cf1;
+  --color-tag-arrived-bg: rgba(1, 183, 161, 0.2);
+  --color-tag-completed-bg: rgba(91, 180, 98, 0.2);
+
+  --color-select-border: #656f7d;
+  --border-color-2: #4C515A;
+  --border-hover-color: rgba(255, 117, 0, 0.2);
+
+
+  --el-color-info: #fff;
+  --el-border-color-light: #3e454f;
+  --el-checkbox-bg-color: #656f7d;
+
+  // 日历
+  --color-orange-6: #614d3f;
+  --color-range-text: #ED6D00;
+
+  // more filters
+  --color-table-header-bg: #343A43;
+  --icon-color-black: #fff;
+  --more-filters-background-color: #2A2E34;
+  --addparties-background-color: #343A43;
+  --color-border-top: #3F434A;
+
+  // tag
+  --tag-bg-color: rgba(239, 239, 240, 0.1);
+  --tag-info-text-color: #fff;
+  --tips-bg-color: rgba(26, 28, 32, 1);
+  --tag-info-bg-color: rgba(239, 239, 240, 0.1);
+
+  // 评分
+  --scoring-bg-color: #525b69;
+  --scoring-smile-radio-color: #626871;
+
+  // 输入框禁用的颜色
+  --input-disabled-bg-color: rgba(244,244,244,0.2);
+  --input-disabled-text-color: #66696f;
+  --color-recent-name: rgba(240,241,243,0.1);
+  --color-disabled-bg: #2b2b2c;
+}

src/styles/theme.scss

@@ -1,7 +1,10 @@
+@import url(./theme-g.scss);
 :root {
   // color palettes
   --color-theme: #ed6d00;
 
+  --color-mode: #fff;
+
   --color-neutral-1: #2b2f36;
   --color-neutral-2: #646a73;
   --color-neutral-3: #b5b9bf;
@@ -63,6 +66,7 @@
   --color-tag-created-bg: #e5f0fb;
   --color-tag-booked-bg: #f3e6fa;
   --color-tag-all-bg: #ffe5cf;
+  --color-tag-all-bg-color: #feecf3;
   --color-tag-cargo-received-bg: #eaecff;
   --color-tag-departure-bg: #d9edfa;
   --color-tag-arrived-bg: #e7faf8;
@@ -70,6 +74,8 @@
   --color-tag-Departed-bg: #d9edfa;
 
   --color-border: #eaebed;
+  --color-select-border: #eaebed;
+  --border-color-2: #eaebed;
   --color-border-1: #e8eaee;
   --color-border-2: #eaebed;
 
@@ -78,15 +84,18 @@
   --color-table-header-bg: #f8f9fd;
 
   --color-dialog-header-bg: #f6f8fa;
+  --color-dialog-body-bg: #ffffff;
+  --color-drawer-body-bg: #fff;
 
   // 按钮
   // default
   --color-btn-default-bg-hover: #fff1e6;
+  --color-btn-default-bg-color: #fff;
   // dark
   --color-btn-default-dark-bg: #2b2f36;
   --color-btn-default-dark-hover: #ff7500;
   // main-plain
-  --color-btn-main-plain-bg-hover: #fff1e6;
+  --color-btn-main-plain-bg-hover: hsl(26, 100%, 95%);
   // main
   --color-btn-main-bg-hover: #d56200;
   // success
@@ -106,6 +115,9 @@
 
   --color-header-bg: #f6f8fa;
 
+  --management-bg-color: #fff;
+  --more-type-bg-color: #fff;
+
   // 字体
   --font-size-1: 10px;
   --font-size-2: 12px;
@@ -133,4 +145,222 @@
   --tag-info-text-color: #2b2f36;
 
   --dashboard-text-color: #646a73;
+
+  --el-input-focus: #fff;
+  .el-radio {
+    --el-radio-input-border: #dcdfe6;
+  }
+  // 发送邮件部分
+  --color-avatar: #fff;
+  --color-email-bg: #f6f8fa;
+  --color-detail-email-record-bg: #eceef1;
+  --color-email-border: #eaebed;
+  --w-e-textarea-bg-color: #ffffff;
+  --color-divider: #eaebed;
+  // 横幅
+  --dashboard-scoring-bg-color: linear-gradient(
+    251deg,
+    rgba(255, 255, 255, 0.3),
+    rgba(255, 244, 235, 0.5) 22.66%,
+    rgba(240, 243, 255, 0.5) 44.57%,
+    rgba(224, 247, 249, 0.6) 80.46%,
+    rgba(255, 255, 255, 0.3)
+  );
+
+  --color-range-text: #2b2f36;
+  --tag-bg-color: rgba(239, 239, 240);
+  --tips-bg-color: rgba(26, 28, 32, 1);
+  --scoring-bg-color: #f2f4f7;
+
+  --scoring-colurful-color: linear-gradient(
+    251deg,
+    rgba(242, 244, 247) 0%,
+    rgba(255, 237, 230) 100%
+  );
+  --scoring-smile-radio-color: #e0e2e6;
+
+  --color-el-popper-bg: #303133;
+  // 滚动条
+  --color-scrollbar-thumb: #d9dddf;
+
+  --color-message-box-header-bg: #f6f8fa;
+  --color-table-header-bg: #f8f9fd;
+  --color-table-click-row-bg: #ffe3cc;
+
+  --color-download-file-filter-tag-bg: #eceef0;
+  --color-download-file-selected-column-tag-bg: #eceef0;
+
+  --color-tracking-routes-item-bg: #fef8f3;
+  --color-tracking-routes-item-leg-bg: #f6f2ee;
+
+  --color-customize-column-right-section-bg: #fffbf7;
+  --color-customize-column-right-section-border: #eaebed;
+  --color-customize-column-item-bg: #fff;
+  --color-customize-column-item-hover-bg: #fff1e5;
+  --color-customize-column-item-drag-icon: var(--color-neutral-3);
+  --color-customize-column-item-drag-border: var(--color-customize-column-right-section-bg);
+  --color-customize-column-item-drag-bg: var(--color-customize-column-right-section-bg);
+  --color-customize-column-tabs-header-border: #ebeef5;
+
+  --color-shipment-status-header-bg: #f6f8fa;
+  --color-shipment-status-label-bg: #ccd1db;
+  --color-shipment-status-shadow: rgba(0, 0, 0, 0.1);
+
+  --color-slider-bg: #fff;
+  --color-slider-thumb-start: #2b2f36;
+
+  --color-public-tracking-bg-mask: rgba(255, 255, 255, 0.85);
+  --color-public-tracking-search-input-btn: #000;
+  --color-public-tracking-search-input-border: #2b2f36;
+
+  --color-v-box-content-drag-bg: #fff;
+
+  --color-toggle-btn-module-bg: #f0f1f3;
+  --color-toggle-btn-module-active-bg: #fff;
+
+  --color-user-config-title-bottom-border: #eeeeed;
+
+  --color-container-status-node-bg: #f8f9fd;
+
+  // 输入框禁用的颜色
+  --input-disabled-bg-color: #f5f7fa;
+  --input-disabled-text-color: #a8abb2;
+
+  --el-disabled-bg-color: #f4f4f4;
+
+  --color-btn-icon-bg: #f6f6fe;
+
+  --color-btn-blue-bg: #f6f6fe;
+
+  --color-btn-default-dark-hover-bg: #2b2f36;
+
+  --color-recent-name: rgba(43, 47, 54, 0.05);
+  --color-disabled-bg: #eaebed;
+
+  .el-input {
+    --el-border: #eaebed;
+  }
+}
+
+:root.dark {
+  --color-mode: #2b2f36;
+
+  // 文字颜色
+  --color-neutral-1: #f0f1f3;
+  --color-neutral-2: rgba(240, 241, 243, 0.7);
+  --color-neutral-3: rgba(240, 241, 243, 0.3);
+  --color-border: #3f434a;
+  --color-header-bg: #30353c;
+
+  --border-hover-color: #654f3f;
+
+  --color-download-file-filter-tag-bg: #3f4249;
+  --color-download-file-selected-column-tag-bg: #474e57;
+
+  --color-customize-column-right-section-bg: #453b36;
+  --color-customize-column-right-section-border: var(--color-theme);
+  --color-customize-column-item-bg: #3a4149;
+  --color-customize-column-item-hover-bg: #585b60;
+  --color-customize-column-item-drag-icon: var(--color-neutral-1);
+  --color-customize-column-item-drag-border: var(--color-theme);
+  --color-customize-column-item-drag-bg: #7d4c26;
+  --color-customize-column-tabs-header-border: #3f434a;
+
+  --color-shipment-status-header-bg: #3f434a;
+  --color-shipment-status-shadow: rgba(0, 0, 0, 0.5);
+  --color-shipment-status-label-bg: #656f7d;
+  --color-shipment-status-detail-path-font-color: #b5b7ba;
+  --color-shipment-status-label-font-color: #c6cad0;
+
+  --color-slider-bg: #3f434a;
+  --color-slider-thumb-start: #646a73;
+
+  --color-public-tracking-bg-mask: rgba(43, 47, 54, 0.75);
+  --color-public-tracking-search-input-btn: #ed6d00;
+  --color-public-tracking-search-input-border: #656f7d;
+
+  --color-toggle-btn-module-bg: #434b53;
+  --color-toggle-btn-module-active-bg: #656f7d;
+
+  --color-user-config-title-bottom-border: #3f434a;
+  --color-container-status-node-bg: #3e454f;
+
+  --color-btn-blue-bg: rgba(255, 255, 255, 0);
+
+  --color-el-btn-pain-theme-border: #ed6d00;
+  --color-el-btn-pain-theme-text: #ed6d00;
+  --color-el-btn-pain-theme-bg: rgba(237, 109, 0, 0.1);
+  --color-el-btn-pain-theme-bg-hover: rgba(237, 109, 0, 0.3);
+
+  --color-btn-default-dark-hover-bg: #d56200;
+
+  --color-btn-icon-bg: #3f434a;
+  // 滚动条
+  --color-scrollbar-thumb: #656f7d;
+
+  // 菜单选中背景
+  --color-mune-active-bg: #553d2b;
+
+  --color-tracking-routes-item-bg: #403631;
+  --color-tracking-routes-item-leg-bg: #524843;
+
+  --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);
+  --w-e-toolbar-border-color: #656f7d;
+  --w-e-toolbar-color: var(--color-neutral-1);
+  --w-e-toolbar-active-bg-color: rgba(255, 117, 0, 0.2);
+  --w-e-toolbar-active-color: #1a1c20;
+  button.w-e-menu-tooltip-v5::before {
+    color: var(--color-neutral-1);
+  }
+  div.w-e-bar-item button:hover {
+    color: var(--color-neutral-1);
+  }
+  --color-email-border: #656f7d;
+  --color-email-bg: #3c414a;
+  --color-detail-email-record-bg: #343a43;
+  --color-divider: #4c515a;
+  --color-avatar: var(--color-mode);
+  --color-header-bg: #343a43;
+
+  // ElementUI
+  --color-message-box-header-bg: #3e454f;
+  // 整体背景颜色
+  --el-bg-color: #30353c;
+  // 按钮边框颜色
+  --color-accent-13: #656f7d;
+  // 输入框边框颜色
+  --el-border: #656f7d;
+  .el-input {
+    --el-border: #656f7d;
+  }
+  --el-radio-input-border: #656f7d;
+  --color-table-header-bg: #34383f;
+  --el-input-focus: #2b2f36;
+  --color-dialog-header-bg: #3e454f;
+  --color-dialog-body-bg: #30353c;
+  --color-drawer-body-bg: #2b2f36;
+  div.el-card {
+    --el-card-bg-color: #30353c;
+  }
+  --color-el-popper-bg: #1a1c20;
+  // --el-bg-color: var(--color-neutral-1);
+  --el-bg-color-overlay: #30353c;
+  div.el-popper.is-dark {
+    --el-bg-color: var(--color-neutral-1);
+  }
+  --el-disabled-bg-color: rgba(244, 244, 244, 0.2);
+
+  // vxe-table
+  --vxe-ui-layout-background-color: #2b2f36;
+  --vxe-ui-table-border-color: #3f434a;
+  --vxe-ui-table-column-icon-border-color: #6a6d73;
+  --color-table-header-bg: #30353c;
+  --vxe-ui-table-header-background-color: #30353c;
+  --color-table-click-row-bg: #8b582f;
+  --vxe-ui-input-border-color: #656f7d;
 }

src/styles/vxeTable.scss

@@ -60,14 +60,14 @@ div.vxe-table .vxe-sort--desc-btn.sort--active {
 }
 
 // 表格点击样式
-.row--clicked {
-  background-color: #ffe3cc !important;
+.vxe-table-row-clicked-style {
+  background-color: var(--color-table-click-row-bg) !important;
 }
 div.vxe-table--render-default tr.vxe-body--row.row--hover,
 .vxe-table--render-default tr.vxe-body--row.row--stripe.row--hover {
   background-color: var(--border-hover-color);
 }
-div.vxe-table--render-default tr.vxe-body--row.row--clicked {
+div.vxe-table--render-default tr.vxe-body--row.vxe-table-row-clicked-style {
   background-color: var(--border-hover-color);
 }
 
@@ -103,3 +103,10 @@ div.w-e-bar svg {
 .w-e-bar.w-e-hover-bar.w-e-bar-show {
   display: none;
 }
+
+button.w-e-menu-tooltip-v5:before {
+  border-radius: 3px;
+}
+button.w-e-menu-tooltip-v5:after {
+  border: 0;
+}

src/views/Booking/src/BookingView.vue

@@ -399,11 +399,12 @@ const SearchInput = () => {
         <el-input
           placeholder="Enter Booking/HBL/PO/Carrier Booking No. "
           v-model="BookingSearch"
+          class="log_input"
           @keyup.enter="SearchInput"
         >
           <template #prefix>
             <span class="iconfont_icon">
-              <svg class="iconfont" aria-hidden="true">
+              <svg class="iconfont icon_search" aria-hidden="true">
                 <use xlink:href="#icon-icon_search_b"></use>
               </svg>
             </span>
@@ -418,7 +419,7 @@ const SearchInput = () => {
               placement="bottom"
             >
               <span class="iconfont_icon iconfont_icon_tip">
-                <svg class="iconfont" aria-hidden="true">
+                <svg class="iconfont icon_search" aria-hidden="true">
                   <use xlink:href="#icon-icon_info_b"></use>
                 </svg>
               </span>
@@ -513,12 +514,12 @@ const SearchInput = () => {
   flex-wrap: wrap;
 }
 .tag {
-  border-color: #efeff0;
   border-radius: var(--border-radius-22);
   margin: 0 8px 8px 0;
   color: var(--color-neutral-1);
   font-weight: 600;
   font-size: var(--font-size-2);
+  background-color: var(--tag-bg-color) !important;
 }
 .iconfont_icon_tip {
   margin-left: 8px;
@@ -527,6 +528,9 @@ const SearchInput = () => {
   display: flex;
   align-items: center;
 }
+.icon_search {
+  fill: var(--color-neutral-1);
+}
 @media only screen and (min-width: 1280px) {
   .search {
     width: 480px;
@@ -537,4 +541,8 @@ const SearchInput = () => {
     width: 740px;
   }
 }
+:deep(.log_input .el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--color-select-border) inset;
+  border-radius: 6px;
+}
 </style>

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;
@@ -317,6 +330,7 @@ const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allDat
           .line_container hr {
             width: 100%;
             border-radius: 0 2px 6px 0;
+            border-color: var(--color-neutral-1);
           }
           .line_container .right-icon {
             position: absolute;
@@ -324,7 +338,7 @@ const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allDat
             right: 0px;
             width: 10px;
             height: 11px;
-            border-top: 2px solid #000000;
+            border-top: 2px solid var(--color-neutral-1);
             transform: rotate(30deg);
             border-radius: 0 1px 0 0;
           }
@@ -339,9 +353,8 @@ const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allDat
 }
 .fallback-class {
   opacity: 1 !important;
-  // background-color: #fff1e5 !important;
   cursor: move !important;
-  background-color: #fff;
+  background-color: var(--color-v-box-content-drag-bg);
   box-shadow: 4px 4px 32px 0px rgba(0, 0, 0, 0.2);
   border-radius: 12px;
 }

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"
@@ -238,7 +238,7 @@ const sendEmail = () => {
   padding: 16px;
   border-radius: 12px;
   border-bottom: 1px solid var(--color-border);
-  background: var(--color-header-bg);
+  background: var(--color-email-bg);
 
   .show-records {
     max-height: 370px;
@@ -248,7 +248,7 @@ const sendEmail = () => {
 
 :deep(.w-e-text-container) {
   min-height: 170px;
-
+  border-radius: 0 0 6px 6px;
   p {
     margin: 0px;
   }
@@ -268,17 +268,28 @@ 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;
   border-radius: 6px;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-email-border);
+  // overflow: hidden;
+  :deep(div.w-e-toolbar) {
+    border-radius: 6px 6px 0 0;
+  }
 }
 
 .record-item {
@@ -296,14 +307,13 @@ const sendEmail = () => {
       align-items: center;
       width: 24px;
       height: 24px;
-      padding-top: 5px;
       text-align: center;
       border-radius: 50%;
       background-color: var(--color-theme);
       div {
         height: 14px;
         line-height: 14px;
-        color: #fff;
+        color: var(--color-avatar);
         font-weight: 700;
       }
     }
@@ -327,14 +337,14 @@ const sendEmail = () => {
 
   & > .content {
     padding: 16px 6px;
-    background-color: #eceef1;
+    background-color: var(--color-detail-email-record-bg);
     border-radius: 6px;
   }
 }
 
 :deep(.text-editor) {
   & > div:first-of-type {
-    border-bottom: 1px solid var(--color-border) !important;
+    border-bottom: 1px solid var(--color-email-border) !important;
   }
 }
 </style>

src/views/Booking/src/components/BookingTable/src/BookingTable.vue

@@ -7,7 +7,9 @@ import dayjs from 'dayjs'
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { transportationMode } from '@/components/TransportationMode'
+import { useThemeStore } from '@/stores/modules/theme'
 
+const themeStore = useThemeStore()
 const router = useRouter()
 const props = defineProps({
   height: {
@@ -430,7 +432,11 @@ defineExpose({
     <div class="table-tools">
       <div class="left-total-records">{{ selectedNumber }} Selected</div>
       <div class="right-tools-btn">
-        <el-button class="el-button--main" @click="handleDownload">
+        <el-button
+          :class="{ 'el-button--pain-theme': themeStore.theme === 'dark' }"
+          class="el-button--main"
+          @click="handleDownload"
+        >
           <span style="margin-right: 8px" class="font_family icon-icon_download_b"></span>
           Download
         </el-button>

src/views/Booking/src/components/BookingTable/src/components/DownloadDialog.vue

@@ -34,7 +34,7 @@ defineExpose({
 
 <template>
   <div>
-    <el-dialog @close="clearData" v-model="dialogVisible" title="Download File" width="480">
+    <el-dialog @close="clearData" v-model="dialogVisible" title="Download File" width="540">
       <div class="download-dialog">
         <div class="select-data">
           <div style="display: inline-block">
@@ -95,12 +95,14 @@ defineExpose({
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
+  max-height: 120px;
   margin-top: 8px;
+  overflow: auto;
 
   .filter-item {
     height: 22px;
     padding: 0px 8px;
-    background-color: #eceef0;
+    background-color: var(--color-download-file-filter-tag-bg);
     border-radius: 12px;
     line-height: 22px;
     font-size: 12px;
@@ -114,11 +116,9 @@ defineExpose({
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 8px;
 
     .el-radio {
-      height: auto;
-      margin-top: 8px;
+      height: 40px;
       align-items: center;
     }
 
@@ -144,11 +144,12 @@ defineExpose({
     }
 
     .select-columns {
+      max-height: 350px;
       padding: 8px;
       margin-top: 8px;
-      background-color: var(--color-header-bg);
+      background-color: var(--color-dialog-header-bg);
       border-radius: 6px;
-      overflow: hidden;
+      overflow: auto;
 
       &.show {
         max-height: 500px;
@@ -168,7 +169,7 @@ defineExpose({
         .column-item {
           height: 22px;
           padding: 0px 8px;
-          background-color: #eceef0;
+          background-color: var(--color-download-file-selected-column-tag-bg);
           line-height: 22px;
           border-radius: 12px;
           font-size: 12px;

src/views/Dashboard/src/DashboardView.vue

@@ -781,7 +781,7 @@ const ClickParams = (val: any) => {
     <div class="Title">
       <div>Dashboard</div>
       <div>
-        <el-popover trigger="click" width="400">
+        <el-popover trigger="click" width="400" popper-style="border-radius: 12px">
           <template #reference>
             <el-button class="el-button--default">
               <span class="iconfont_icon">
@@ -817,7 +817,12 @@ const ClickParams = (val: any) => {
         </el-popover>
         <el-popover
           :visible="SaveVisible"
-          :popper-style="{ display: 'flex', flexDirection: 'column', alignItems: 'center' }"
+          :popper-style="{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            backgroundColor: 'var(--management-bg-color)'
+          }"
         >
           <template #reference>
             <el-button
@@ -1207,6 +1212,7 @@ const ClickParams = (val: any) => {
 <style lang="scss" scoped>
 .Title {
   display: flex;
+  background-color: var(--color-mode);
   height: 68px;
   font-size: var(--font-size-6);
   font-weight: 700;
@@ -1220,6 +1226,8 @@ const ClickParams = (val: any) => {
 .Management {
   max-height: 640px;
   overflow-y: hidden;
+  border-radius: 12px;
+  background-color: var(--management-bg-color);
 }
 .Management:hover {
   overflow-y: scroll;
@@ -1259,6 +1267,10 @@ const ClickParams = (val: any) => {
 .tips {
   display: flex;
   justify-content: center;
+  padding-bottom: 8px;
+}
+.iconfont_tips {
+  fill: var(--color-neutral-2);
 }
 .tips_text {
   width: 278.43px;
@@ -1281,11 +1293,14 @@ const ClickParams = (val: any) => {
 }
 .iconfont_icon_save {
   margin-right: 16px;
+  fill: var(--color-neutral-1);
 }
 .Save_filters:hover {
   border-color: var(--color-btn-default-bg-hover);
   background-color: var(--color-btn-default-bg-hover);
-  fill: var(--color-theme);
+  .iconfont_icon_save {
+    fill: var(--color-theme);
+  }
   div {
     color: var(--color-theme);
   }
@@ -1334,6 +1349,7 @@ const ClickParams = (val: any) => {
 }
 .echarts {
   padding: 0 22px;
+  background-color: var(--color-mode);
 }
 .kpi {
   width: 50%;
@@ -1387,11 +1403,11 @@ const ClickParams = (val: any) => {
 .dashboard {
   z-index: 2014;
   position: relative;
-  background-color: white;
+  background-color: var(--color-mode);
   padding-bottom: 40px;
 }
 :deep(.el-tabs__header) {
   height: 48px;
   margin-bottom: 0;
 }
-</style>
+</style>

src/views/Dashboard/src/components/BarChart.vue

@@ -1,9 +1,11 @@
 <!-- 竖形柱状图 -->
 <script lang="ts" setup>
 import * as echarts from 'echarts'
+import { useThemeStore } from '@/stores/modules/theme'
 import { onMounted, ref, reactive, watch, computed } from 'vue'
 import updateIcon from '../image/xiazai.png'
 import * as XLSX from 'xlsx'
+const themeStore = useThemeStore()
 const props = defineProps({
   BarData: Object,
   barHeight: Object,
@@ -224,7 +226,8 @@ const initOption = reactive({
     splitLine: {
       show: true,
       lineStyle: {
-        type: 'dashed'
+        type: 'dashed',
+        color: '#eaebed'
       }
     },
     axisLine: {
@@ -284,6 +287,26 @@ const initOption = reactive({
 onMounted(() => {
   initChart()
   clickParams()
+  watch(
+    () => themeStore.theme,
+    (newVal) => {
+      if (newVal === 'dark') {
+        initOption.xAxis.axisLine.lineStyle.color = '#3F434A'
+        initOption.yAxis.axisLine.lineStyle.color = '#3F434A'
+        initOption.yAxis.splitLine.lineStyle.color = '#3F434A'
+        initChart()
+      } else {
+        initOption.xAxis.axisLine.lineStyle.color = '#eaebed'
+        initOption.yAxis.axisLine.lineStyle.color = '#eaebed'
+        initOption.yAxis.splitLine.lineStyle.color = '#eaebed'
+        initChart()
+      }
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  )
 })
 
 const emits = defineEmits(['ClickParams'])

src/views/Dashboard/src/components/DashFiters.vue

@@ -182,7 +182,7 @@ const DateRangeSearch = () => {
           </span>
           Filters
           <span class="iconfont_icon">
-            <svg class="iconfont" aria-hidden="true">
+            <svg class="iconfont icon_dark" aria-hidden="true">
               <use xlink:href="#icon-icon_dropdown_b"></use>
             </svg>
           </span>
@@ -227,7 +227,10 @@ const DateRangeSearch = () => {
         <div class="filter_filter" style="margin-left: 4px">
           <div v-if="props.isContainer">
             <el-date-picker
-              :style="{ width: props.isRevenue ? '110px' : '120px', height: '40px' }"
+              :style="{
+                width: props.isRevenue ? '110px' : '120px',
+                height: '40px'
+              }"
               v-model="startDate"
               format="MMM-YYYY"
               type="month"
@@ -283,7 +286,7 @@ const DateRangeSearch = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-select-border);
   margin-bottom: 8px;
 }
 :deep(.el-checkbox-button__inner:hover) {
@@ -292,10 +295,10 @@ const DateRangeSearch = () => {
   border-color: var(--color-btn-default-bg-hover);
 }
 :deep(.el-checkbox-button.is-focus .el-checkbox-button__inner) {
-  border-color: var(--color-border);
+  border-color: var(--color-select-border);
 }
 :deep(.el-checkbox-button:first-child .el-checkbox-button__inner) {
-  border-left: 1px solid var(--color-border);
+  border-left: 1px solid var(--color-select-border);
   border-top-left-radius: var(--border-radius-6);
   border-bottom-left-radius: var(--border-radius-6);
 }
@@ -314,14 +317,20 @@ const DateRangeSearch = () => {
   border-left-color: var(--color-theme);
 }
 :deep(.el-checkbox-button.is-disabled.is-checked .el-checkbox-button__inner) {
-  background-color: #eaebed;
-  border-color: var(--color-border);
-  color: #2b2f36;
+  background-color: var(--color-disabled-bg);
+  border-color: var(--color-select-border);
+  color: var(--color-neutral-1);
   font-weight: 700;
 }
 // :deep(.el-checkbox-button.is-focus .el-checkbox-button__inner) {
-//   border-color: var(--color-border);
+//   border-color: var(--color-select-border);
 // }
+:deep(.el-radio-button__original-radio:disabled + .el-radio-button__inner) {
+  border-color: var(--color-select-border);
+}
+:deep(.el-checkbox-button.is-disabled .el-checkbox-button__inner) {
+  border-color: var(--color-select-border);
+}
 .Dash_title {
   height: 48px;
   font-size: 16px;
@@ -345,7 +354,7 @@ const DateRangeSearch = () => {
   justify-content: flex-end;
   align-items: center;
   height: 48px;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--color-select-border);
   margin-top: 5px;
   font-weight: 400;
   font-size: var(--font-size-3);
@@ -378,15 +387,21 @@ const DateRangeSearch = () => {
   height: 40px;
   display: flex;
   align-items: center;
+  border: 1px solid var(--color-select-border);
 }
 :deep(.el-radio-button:first-child .el-radio-button__inner) {
   height: 40px;
   display: flex;
+  border: 1px solid var(--color-select-border);
   align-items: center;
 }
 :deep(.el-radio-button__inner) {
   display: flex;
   align-items: center;
   height: 40px;
+  border: 1px solid var(--color-select-border);
+}
+:deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--color-select-border) inset;
 }
 </style>

src/views/Dashboard/src/components/PieChart.vue

@@ -1,11 +1,13 @@
 <!-- 饼状图 -->
  <script lang="ts" setup>
 import * as echarts from 'echarts'
+import { useThemeStore } from '@/stores/modules/theme'
 import { onMounted, ref, reactive, watch, computed } from 'vue'
 const props = defineProps({
   PieData: Object
 })
 const pie_data = ref(props.PieData)
+const themeStore = useThemeStore()
 watch(
   () => props.PieData,
   (current) => {
@@ -116,7 +118,10 @@ const initOption: any = reactive({
       alignTo: 'labelLine',
       rich: {
         name: {
-          fontFamily: 'Lato-Light'
+          fontFamily: 'Lato-Light',
+          color: '#646A73',
+          fontSize: '12px',
+          fontWeight: '700'
         },
         time: {
           fontSize: '10px',
@@ -164,6 +169,28 @@ const initOption: any = reactive({
 onMounted(() => {
   initChart()
   clickParams()
+  watch(
+    () => themeStore.theme,
+    (newVal) => {
+      if (newVal === 'dark') {
+        initOption.title.textStyle.color = '#f0f1f3'
+        initOption.series.label.rich.time.color = 'rgba(240,241,243,0.7)'
+        initOption.series.label.rich.name.color = 'rgba(240,241,243,0.7)'
+        initOption.legend.textStyle.color = 'rgba(240,241,243,0.7)'
+        initChart()
+      } else {
+        initOption.title.textStyle.color = '#2B2F36'
+        initOption.series.label.rich.time.color = '#999'
+        initOption.series.label.rich.name.color = '#646A73'
+        initOption.legend.textStyle.color = '#646A73'
+        initChart()
+      }
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  )
 })
 const emits = defineEmits(['ClickParams'])
 const paramsdata = ref()

src/views/Dashboard/src/components/RecentStatus.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { useRouter } from 'vue-router'
-import dayjs from 'dayjs'
 import { formatTimezoneByUTCorGMT } from '@/utils/tools'
 
 const router = useRouter()
@@ -42,7 +41,7 @@ const RouteToDetail = (val: any) => {
       <div class="recent-header-left">
         <div>
           <span class="iconfont_icon">
-            <svg class="iconfont iconfont_route" aria-hidden="true">
+            <svg class="iconfont iconfont_route icon_dark" aria-hidden="true">
               <use xlink:href="#icon-icon_ocean_b"></use>
             </svg>
           </span>
@@ -89,7 +88,7 @@ const RouteToDetail = (val: any) => {
         <div class="startStation">
           <div class="startStation_title">
             <span class="iconfont_icon">
-              <svg class="iconfont" aria-hidden="true">
+              <svg class="iconfont icon_dark" aria-hidden="true">
                 <use xlink:href="#icon-icon_location_fill_b"></use>
               </svg>
             </span>
@@ -100,7 +99,7 @@ const RouteToDetail = (val: any) => {
         <div class="StationIcon">
           <div>
             <span class="iconfont_icon">
-              <svg class="iconfont" aria-hidden="true">
+              <svg class="iconfont icon_dark" aria-hidden="true">
                 <use xlink:href="#icon-icon_path_b"></use>
               </svg>
             </span>
@@ -110,7 +109,7 @@ const RouteToDetail = (val: any) => {
         <div class="startStation">
           <div class="startStation_title">
             <span class="iconfont_icon">
-              <svg class="iconfont" aria-hidden="true">
+              <svg class="iconfont icon_dark" aria-hidden="true">
                 <use xlink:href="#icon-icon_location_fill_b"></use>
               </svg>
             </span>
@@ -134,13 +133,13 @@ const RouteToDetail = (val: any) => {
 <style lang="scss" scoped>
 .recent_route {
   border-radius: var(--border-radius-12);
-  border: 1px solid var(--color-border-2);
+  border: 1px solid var(--color-border);
   margin: 8px;
 }
 .recent_header {
   background-color: var(--color-header-bg);
   border-radius: var(--border-radius-12) var(--border-radius-12) 0 0;
-  border-bottom: 1px solid var(--color-border-2);
+  border-bottom: 1px solid var(--color-border);
   display: flex;
   padding: 12px 16px;
   justify-content: space-between;
@@ -171,9 +170,9 @@ const RouteToDetail = (val: any) => {
   color: var(--color-theme);
 }
 .recent-name {
-  border: 1px solid var(--color-border-2);
+  border: 1px solid var(--color-border);
   border-radius: 3px;
-  background-color: rgba(43, 47, 54, 0.05);
+  background-color: var(--color-recent-name);
   padding: 4px;
   margin-right: 8px;
 }
@@ -207,7 +206,7 @@ const RouteToDetail = (val: any) => {
   }
 }
 .recent-content-left {
-  border-right: 1px solid var(--color-border-2);
+  border-right: 1px solid var(--color-border);
   padding-left: 16px;
   width: 37%;
   height: 76px;
@@ -218,14 +217,14 @@ const RouteToDetail = (val: any) => {
   line-height: 21px;
 }
 .recent-content-middle {
-  border-right: 1px solid var(--color-border-2);
+  border-right: 1px solid var(--color-border);
   padding-left: 8px;
   width: 37%;
   height: 76px;
   display: flex;
 }
 .left_title {
-  color: var(--dashboard-text-color);
+  color: var(--color-neutral-2);
 }
 .startStation {
   display: flex;
@@ -239,7 +238,7 @@ const RouteToDetail = (val: any) => {
 }
 .startStation_time {
   font-size: var(--font-size-2);
-  color: var(--dashboard-text-color);
+  color: var(--color-neutral-2);
 }
 .recent-content-right {
   width: 24%;

src/views/Dashboard/src/components/ScoringSystem.vue

@@ -175,7 +175,7 @@ const InnerTitle = ref()
 const InnerTileQues = ref()
 const checkexpression = ref()
 const OpenScoring = (item: any) => {
-  dialogVisible.value = false
+  // dialogVisible.value = false
   innerVisible.value = true
   InnerTitle.value = item.itemtext
   InnerTileQues.value = item.proposal
@@ -328,6 +328,7 @@ const submitDetails = (val: any) => {
         class="scoreDialog2"
         :destroy-on-close="true"
         @close="closeDialog"
+        :close-on-click-modal="false"
       >
         <div class="dialog" v-if="isshowDetails">
           <div class="das_in_title">
@@ -403,7 +404,7 @@ const submitDetails = (val: any) => {
           <div class="buttom">
             <div class="previous" @click="previous">
               <span class="iconfont_icon">
-                <svg class="iconfont" aria-hidden="true">
+                <svg class="iconfont icon_dark" aria-hidden="true">
                   <use xlink:href="#icon-icon_back_b"></use>
                 </svg>
               </span>
@@ -437,9 +438,9 @@ const submitDetails = (val: any) => {
         </el-result>
       </el-dialog>
     </div>
-    <div @click="isShowScoring = false" style="cursor: pointer">
+    <div @click="isShowScoring = false" style="cursor: pointer; fill: var(--color-neutral-1)">
       <span class="iconfont_icon">
-        <svg class="iconfont" aria-hidden="true">
+        <svg class="iconfont icon_dark" aria-hidden="true">
           <use xlink:href="#icon-icon_reject_b"></use>
         </svg>
       </span>
@@ -453,14 +454,7 @@ const submitDetails = (val: any) => {
   justify-content: space-between;
   padding-right: 24px;
   align-items: center;
-  background: linear-gradient(
-    251deg,
-    rgba(255, 255, 255, 0.3),
-    rgba(255, 244, 235, 0.5) 22.66%,
-    rgba(240, 243, 255, 0.5) 44.57%,
-    rgba(224, 247, 249, 0.6) 80.46%,
-    rgba(255, 255, 255, 0.3)
-  );
+  background: var(--dashboard-scoring-bg-color);
   height: 48px;
 }
 .scoring_img {
@@ -570,14 +564,15 @@ const submitDetails = (val: any) => {
 :deep(.el-checkbox-button__inner) {
   color: var(--tag-info-text-color);
   font-size: var(--font-size-3);
+  background-color: var(--management-bg-color);
   font-weight: 400;
   padding: 0;
-  width: 180px !important;
+  width: 180px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-select-border);
   border-radius: var(--border-radius-6);
   margin-bottom: 8px;
 }
@@ -590,7 +585,7 @@ const submitDetails = (val: any) => {
   border-color: transparent;
 }
 :deep(.el-checkbox-button:first-child .el-checkbox-button__inner) {
-  border-left: 1px solid var(--color-border);
+  border-left: 1px solid var(--color-select-border);
   border-top-left-radius: var(--border-radius-6);
   border-bottom-left-radius: var(--border-radius-6);
 }
@@ -609,13 +604,20 @@ const submitDetails = (val: any) => {
   background-color: var(--color-theme);
   border-color: var(--color-theme);
 }
+:deep(.scoreDialog2) {
+  background-color: var(--management-bg-color);
+}
 .inputdetails {
   margin-top: 8px;
+  background-color: var(--management-bg-color);
+  border-radius: 6px;
+  border-color: var(--color-select-border);
 }
 :deep(.el-textarea) {
   .el-textarea__inner {
     resize: none; // 去除右下角图标
     padding: 5px 7px 5px 10px;
+    box-shadow: 0 0 0 1px var(--color-select-border) inset;
   }
 }
 .smile_flex {
@@ -644,9 +646,9 @@ const submitDetails = (val: any) => {
 }
 .content_left {
   height: 41px;
-  background-color: #fff;
+  background-color: var(--management-bg-color);
   font-weight: 400;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-select-border);
   font-size: var(--font-size-3);
   border-radius: 6px 0 0 6px;
   display: flex;
@@ -659,7 +661,7 @@ const submitDetails = (val: any) => {
   justify-content: center;
 }
 .content_right {
-  background-color: #e0e2e6;
+  background-color: var(--scoring-smile-radio-color);
   border-radius: 0 6px 6px 0;
 }
 .el-radio {

src/views/Dashboard/src/components/SellerChart.vue

@@ -1,7 +1,9 @@
 <!-- 横形柱状图 -->
 <script lang="ts" setup>
 import * as echarts from 'echarts'
+import { useThemeStore } from '@/stores/modules/theme'
 import { onMounted, ref, reactive, watch, computed } from 'vue'
+const themeStore = useThemeStore()
 const props = defineProps({
   SellerData: Array,
   Interval: Object
@@ -87,7 +89,8 @@ const initOption = reactive({
   xAxis: {
     splitLine: {
       lineStyle: {
-        type: 'dashed'
+        type: 'dashed',
+        color: '#eaebed'
       }
     },
     type: 'value',
@@ -159,6 +162,22 @@ const initOption = reactive({
 onMounted(() => {
   initChart()
   clickParams()
+  watch(
+    () => themeStore.theme,
+    (newVal) => {
+      if (newVal === 'dark') {
+        initOption.xAxis.splitLine.lineStyle.color = '#3F434A'
+        initChart()
+      } else {
+        initOption.xAxis.splitLine.lineStyle.color = '#eaebed'
+        initChart()
+      }
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  )
 })
 const emits = defineEmits(['ClickParams'])
 const paramsdata = ref()

src/views/Dashboard/src/components/TopMap.vue

@@ -2,6 +2,9 @@
 import { onMounted, ref, watch } from 'vue'
 import OriginIcon from '../image/hhh_2.png'
 import L from 'leaflet'
+import { useThemeStore } from '@/stores/modules/theme'
+
+const themeStore = useThemeStore()
 const MapDataList = ref([])
 const mapobj = ref()
 const originIcon = L.icon({
@@ -131,7 +134,11 @@ defineExpose({
 })
 </script>
 <template>
-  <div id="map" style="width: 100%; height: 272px"></div>
+  <div
+    id="map"
+    style="width: 100%; height: 272px"
+    :class="{ 'dark-mode': themeStore.theme === 'dark' }"
+  ></div>
 </template>
 
 <style lang="scss">
@@ -180,6 +187,57 @@ defineExpose({
     }
   }
 }
+.dark-mode {
+  div.leaflet-control-zoom.leaflet-bar.leaflet-control {
+    border: 0;
+    border-radius: 4px;
+    box-shadow: none;
+    a {
+      background-color: #2b2f36;
+      border-bottom: none;
+      span {
+        color: var(--color-neutral-1);
+      }
+      &:first-child {
+        span {
+          display: inline-block;
+          width: 24px;
+          border-bottom: 1px solid #3f434a;
+        }
+      }
+    }
+  }
+  .reset-zoom-control {
+    border: none;
+    background-color: #2b2f36;
+  }
+  a.leaflet-bar-part {
+    background-color: #2b2f36;
+    border-radius: 4px;
+    box-shadow: none;
+    overflow: hidden;
+    div {
+      border-color: var(--color-neutral-1) !important;
+      div {
+        background-color: var(--color-neutral-1) !important;
+      }
+    }
+  }
+}
+/* 示例：将所有地图图片的颜色反转 */
+.dark-mode img:not(.leaflet-marker-icon) {
+  filter: invert(1) hue-rotate(230deg) saturate(60%) brightness(60%) opacity(80%);
+}
+// 防止暗黑模式下地图超出容器
+#map {
+  overflow: hidden;
+}
+// 修改暗黑模式下的背景色
+.leaflet-container.dark-mode,
+.leaflet-map-pane.dark-mode,
+.leaflet-tile-container.dark-mode {
+  background-color: #2b2f36;
+}
 /* 自定义重置缩放按钮控件样式 */
 .reset-zoom-control {
   margin-top: 10px; /* 增加上边距，使按钮与默认缩放按钮之间有间距 */

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

@@ -7,12 +7,20 @@ import { useUserStore } from '@/stores/modules/user'
 import { useHeaderSearch } from '@/stores/modules/headerSearch'
 import { onBeforeRouteUpdate } from 'vue-router'
 import { useLoadingState } from '@/stores/modules/loadingState'
+import { useThemeStore } from '@/stores/modules/theme'
 
+const themeStore = useThemeStore()
 const userStore = useUserStore()
 const route = useRoute()
 const router = useRouter()
 const headerSearch = useHeaderSearch()
 
+const themePopoverRef = ref()
+// 切换系统主题颜色
+const toggleThemeMode = (theme: string) => {
+  themeStore.toggleTheme(theme, true)
+}
+
 const searchValue = ref('')
 // 用于判断是否在搜索后跳转页面，跳转后清空搜索框的值
 const isJumpPageBySearch = ref(false)
@@ -136,6 +144,19 @@ const handleLogout = () => {
 const handleLogin = () => {
   router.push('/login')
 }
+
+// 定义是否显示popover的状态
+const isPopoverVisible = ref(false)
+
+// 切换popover显示状态的方法
+const togglePopover = () => {
+  isPopoverVisible.value = !isPopoverVisible.value
+}
+
+// 关闭popover的方法
+const closePopover = () => {
+  isPopoverVisible.value = false
+}
 </script>
 
 <template>
@@ -154,13 +175,84 @@ const handleLogin = () => {
       </el-input>
       <!-- <span class="font_family icon-icon_notice_b" style="font-size: 18px"></span>
       <span class="font_family icon-icon_language_b" style="font-size: 16px"></span> -->
+      <el-popover
+        placement="bottom-end"
+        :width="400"
+        trigger="click"
+        :visible="isPopoverVisible"
+        popper-class="toggle-theme-popover"
+        @show="isPopoverVisible = true"
+        @hide="isPopoverVisible = false"
+      >
+        <div>
+          <!-- Popover content remains the same -->
+          <div class="header">
+            <span class="title">Themes</span>
+            <el-button @click="closePopover" class="close-icon el-button--text">
+              <div class="font_family icon-icon_reject_b"></div>
+            </el-button>
+          </div>
+          <div class="tips">
+            Customize your workspace by changing the appearance and theme color
+          </div>
+          <div class="picture-module">
+            <div class="item" :class="{ active: themeStore.theme === 'light' }">
+              <img @click="toggleThemeMode('light')" src="./images/light.png" alt="" />
+              <div v-if="themeStore.theme === 'light'" class="selected-icon">
+                <span class="font_family icon-icon_confirm_b"></span>
+              </div>
+            </div>
+            <div class="item" :class="{ active: themeStore.theme === 'dark' }">
+              <img @click="toggleThemeMode('dark')" src="./images/dark.png" alt="" />
+              <div v-if="themeStore.theme === 'dark'" class="selected-icon">
+                <span class="font_family icon-icon_confirm_b"></span>
+              </div>
+            </div>
+          </div>
+          <div class="btn-module">
+            <div
+              class="btn-item"
+              @click="toggleThemeMode('light')"
+              :class="{ active: themeStore.theme === 'light' }"
+            >
+              <span class="font_family icon-icon_light_b"></span>Light
+            </div>
+            <div
+              class="btn-item"
+              @click="toggleThemeMode('dark')"
+              :class="{ active: themeStore.theme === 'dark' }"
+            >
+              <span class="font_family icon-icon_dark_b"></span>Dark
+            </div>
+          </div>
+        </div>
+
+        <!-- Tooltip is now inside the Popover, and it will only show when the Popover is open -->
+        <template #reference>
+          <el-tooltip
+            popper-class="theme-popper-class"
+            effect="dark"
+            content="Themes"
+            placement="top"
+            :offset="4"
+            trigger="hover"
+          >
+            <el-button
+              style="height: 40px; width: 40px"
+              class="el-button--text"
+              @click="togglePopover"
+            >
+              <span class="font_family icon-icon_themes_b" style="font-size: 16px"></span>
+            </el-button>
+          </el-tooltip>
+        </template>
+      </el-popover>
 
       <el-popover
         placement="bottom-end"
         :width="256"
         trigger="click"
         popper-class="user-config-popover"
-        content="this is content, this is content, this is content"
       >
         <div class="title">
           <div class="avatar">
@@ -184,14 +276,15 @@ const handleLogin = () => {
         </div>
         <template #reference>
           <div class="header-avatar" v-if="userStore.username && userStore.isFirstLogin !== true">
-            <span style="">{{ userStore.username?.slice(0, 1) }}</span>
+            <div>{{ userStore.username?.slice(0, 1) }}</div>
           </div>
         </template>
       </el-popover>
       <el-button
+        :class="{ 'el-button--pain-theme': themeStore.theme === 'dark' }"
         v-if="!userStore.username || (userStore.username && userStore.isFirstLogin === true)"
         class="el-button--main"
-        style="padding: 8px 10px"
+        style="padding: 8px 10px; margin-right: 10px; margin-left: 0"
         plain
         @click="handleDownload"
       >
@@ -214,19 +307,17 @@ const handleLogin = () => {
 
 <style lang="scss" scoped>
 .header-avatar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   width: 24px;
   height: 24px;
-  padding: 2px;
   text-align: center;
   border-radius: 50%;
   background-color: var(--color-theme);
   cursor: pointer;
-  & > span {
-    display: block;
-    height: 16px;
+  & > div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 24px;
     color: #fff;
     font-size: 16px;
     font-weight: 700;
@@ -241,7 +332,7 @@ const handleLogin = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 24px;
+  gap: 8px;
   height: 100%;
 
   .el-input {
@@ -265,6 +356,97 @@ const handleLogin = () => {
 }
 </style>
 <style lang="scss">
+div.el-popover.el-popper.toggle-theme-popover {
+  width: 400px;
+  height: 278px;
+  padding: 16px;
+  // right: 20px !important;
+  // top: 52px !important;
+  // left: auto !important;
+  inset: 56px 52.8px auto auto !important;
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+    .title {
+      font-size: 18px;
+      font-weight: 700;
+    }
+    .close-icon {
+      width: 24px;
+      cursor: pointer;
+    }
+  }
+  .tips {
+    color: var(--color-neutral-2);
+  }
+  .picture-module {
+    display: flex;
+    justify-content: center;
+    gap: 6px;
+    margin-top: 16px;
+    .item {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 174px;
+      height: 108px;
+      padding: 8px;
+      img {
+        width: 154px;
+        height: 90px;
+        cursor: pointer;
+      }
+      &.active {
+        border: 2px solid var(--color-theme);
+        border-radius: 6px;
+      }
+      .selected-icon {
+        position: absolute;
+        bottom: 8px;
+        left: 50%;
+        transform: translateX(-50%);
+        height: 16px;
+        span {
+          height: 16px;
+          width: 16px;
+          padding: 1px 1px 0 0;
+          background-color: var(--color-theme);
+          color: #fff;
+          border-radius: 50%;
+        }
+      }
+    }
+  }
+  .btn-module {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 368px;
+    height: 40px;
+    margin-top: 10px;
+    padding: 0 8px;
+    background-color: var(--color-toggle-btn-module-bg);
+    border-radius: 6px;
+    .btn-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+      width: 180px;
+      height: 32px;
+      border-radius: 6px;
+      color: var(--color-neutral-2);
+      cursor: pointer;
+      &.active {
+        background-color: var(--color-toggle-btn-module-active-bg);
+        color: var(--color-neutral-1);
+      }
+    }
+  }
+}
 div.el-popover.el-popper.user-config-popover {
   padding: 8px;
   width: 240px;
@@ -274,14 +456,13 @@ div.el-popover.el-popper.user-config-popover {
     align-items: center;
     gap: 8px;
     height: 70px;
-    border-bottom: 1px solid #eeeeed;
+    border-bottom: 1px solid var(--color-user-config-title-bottom-border);
     & > .avatar {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 48px;
       height: 48px;
-      padding-top: 7px;
       border-radius: 50%;
       text-align: center;
       background-color: var(--color-theme);
@@ -311,4 +492,7 @@ div.el-popover.el-popper.user-config-popover {
     }
   }
 }
+div.el-popper.theme-popper-class {
+  padding: 3px 4px;
+}
 </style>

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

@@ -154,7 +154,11 @@ defineExpose({
         <div class="error" v-if="loginError.newPassword">{{ newPwdErrTips }}</div>
         <div class="limit-tips">
           <div class="tip-item">
-            <span class="font_family icon-icon_confirm_b" :class="{ active: hasUppercase }"></span>
+            <span
+              style="padding-top: 2px"
+              class="font_family icon-icon_confirm_b"
+              :class="{ active: hasUppercase }"
+            ></span>
             <span>Password must contain uppercase letters</span>
           </div>
           <div class="tip-item">
@@ -210,7 +214,10 @@ defineExpose({
   .form-item {
     margin-bottom: 16px;
     .label {
+      display: inline-block;
+      margin-bottom: 4px;
       font-size: 12px;
+      color: var(--color-neutral-2);
     }
     .error {
       font-size: 12px;

src/views/Layout/src/components/Menu/MenuView.vue

@@ -221,6 +221,7 @@ const jumpLink = (link: string) => {
   margin: 0 12px 2px;
   padding-left: 8px !important;
   border-radius: 6px;
+  color: var(--color-neutral-1);
   &:hover {
     background-color: var(--color-mune-active-bg);
   }

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

@@ -1,9 +1,13 @@
 <script setup lang="ts">
+import { useThemeStore } from '@/stores/modules/theme'
 import { useRouter, useRoute } from 'vue-router'
 import { useUserStore } from '@/stores/modules/user'
 
 const userStore = useUserStore()
 const router = useRouter()
+
+const themeStore = useThemeStore()
+
 const route = useRoute()
 
 const tips = ref('Please change your password for security.')
@@ -125,9 +129,9 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="login">
+  <div class="login" :class="{ 'dark-bg': themeStore.theme === 'dark' }">
     <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>
@@ -194,7 +198,11 @@ onUnmounted(() => {
             <span>Password must contain numbers</span>
           </div>
           <div class="tip-item">
-            <span class="font_family icon-icon_confirm_b" :class="{ active: isValidLength }"></span>
+            <span
+              style="padding-top: 2px"
+              class="font_family icon-icon_confirm_b"
+              :class="{ active: isValidLength }"
+            ></span>
             <span>Password length between12 - 20 </span>
           </div>
         </div>
@@ -242,20 +250,27 @@ onUnmounted(() => {
   width: 100%;
   background: url(../image/bg.png) no-repeat center center;
   background-size: cover;
+  &.dark-bg {
+    background: url(../image/bg-dark.png) no-repeat center center;
+    background-size: cover;
+  }
 }
 
 .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;
@@ -307,7 +322,7 @@ onUnmounted(() => {
     }
     &.is-disabled {
       :deep(.el-input__wrapper) {
-        background-color: #f4f4f4;
+        // background-color: #f4f4f4;
       }
       :deep(.el-input__inner) {
         -webkit-text-fill-color: var(--color-neutral-1);
@@ -362,6 +377,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

@@ -3,12 +3,14 @@ import { useRouter, useRoute } from 'vue-router'
 import ErrorTips from './components/ErrorTips.vue'
 import FirstLoginTips from './components/FirstLoginTips.vue'
 import { useUserStore } from '@/stores/modules/user'
+import { useThemeStore } from '@/stores/modules/theme'
 import ScoringSystem from '@/views/Dashboard/src/components/ScoringSystem.vue'
 import CryptoJS from 'crypto-js'
 import dayjs from 'dayjs'
 
 const router = useRouter()
 const route = useRoute()
+const themeStore = useThemeStore()
 
 // 手动获取url中的参数，直接获取route.query的参数时如果有+号会被转义成空格
 const getQueryParams = (url: string) => {
@@ -322,10 +324,10 @@ const firstLoginTipsRef = ref()
 </script>
 
 <template>
-  <div class="login">
+  <div class="login" :class="{ 'dark-bg': themeStore.theme === 'dark' }">
     <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>
@@ -394,7 +396,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>
@@ -468,11 +470,15 @@ const firstLoginTipsRef = ref()
   width: 100%;
   background: url(../src/image/bg.png) no-repeat center center;
   background-size: cover;
+  &.dark-bg {
+    background: url(../src/image/bg-dark.png) no-repeat center center;
+    background-size: cover;
+  }
   .scoring-system {
     position: absolute;
     top: 0;
     width: 100%;
-    background: linear-gradient(251deg, #fff4eb 22.66%, #f0f3ff 44.57%, #e0f7f9 70.46%);
+    background: var(--dashboard-scoring-bg-color);
   }
 }
 
@@ -485,10 +491,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/OperationLog/src/OperationLog.vue

@@ -174,10 +174,10 @@ const DateChange = (date: any) => {
     <div class="display">
       <div class="heaer_top">
         <div class="search tips_filter">
-          <el-input placeholder="Search user name" v-model="OperationSearch">
+          <el-input placeholder="Search user name" v-model="OperationSearch" class="log_input">
             <template #prefix>
               <span class="iconfont_icon">
-                <svg class="iconfont" aria-hidden="true">
+                <svg class="iconfont icon_dark" aria-hidden="true">
                   <use xlink:href="#icon-icon_search_b"></use>
                 </svg>
               </span>
@@ -272,16 +272,22 @@ const DateChange = (date: any) => {
 :deep(.ETD_title) {
   margin-bottom: 0;
 }
-:deep(:where(.css-dev-only-do-not-override-19iuou).ant-picker-range) {
+:deep(.ant-picker-range) {
   width: 250px !important;
   height: 32px;
+  background-color: var(--color-mode) !important;
 }
 .tips_filter {
   margin-right: 8px;
+  height: 32px;
 }
 .dashboard {
   z-index: 2014;
   position: relative;
-  background-color: white;
+  background-color: var(--color-mode);
+}
+:deep(.log_input .el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--color-select-border) inset;
+  border-radius: 6px;
 }
 </style>

src/views/OperationLog/src/components/BookingTable/src/BookingTable.vue

@@ -5,6 +5,9 @@ import DownloadDialog from './components/DownloadDialog.vue'
 import { autoWidth } from '@/utils/table'
 import { useRowClickStyle } from '@/hooks/rowClickStyle'
 import dayjs from 'dayjs'
+import { useThemeStore } from '@/stores/modules/theme'
+
+const themeStore = useThemeStore()
 
 const props = defineProps({
   height: {
@@ -353,7 +356,11 @@ defineExpose({
     <div class="table-tools">
       <div class="left-total-records">{{ selectedNumber }} Selected</div>
       <div class="right-tools-btn">
-        <el-button class="el-button--main" @click="handleDownload">
+        <el-button
+          :class="{ 'el-button--pain-theme': themeStore.theme === 'dark' }"
+          class="el-button--main"
+          @click="handleDownload"
+        >
           <span style="margin-right: 8px" class="font_family icon-icon_download_b"></span>
           Download
         </el-button>

src/views/OperationLog/src/components/BookingTable/src/components/DownloadDialog.vue

@@ -32,7 +32,7 @@ defineExpose({
 
 <template>
   <div>
-    <el-dialog @close="clearData" v-model="dialogVisible" title="Download File" width="480">
+    <el-dialog @close="clearData" v-model="dialogVisible" title="Download File" width="540">
       <div class="download-dialog">
         <div class="select-data">
           <div style="display: inline-block">
@@ -90,12 +90,14 @@ defineExpose({
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
+  max-height: 120px;
   margin-top: 8px;
+  overflow: auto;
 
   .filter-item {
     height: 22px;
     padding: 0px 8px;
-    background-color: #eceef0;
+    background-color: var(--color-download-file-filter-tag-bg);
     border-radius: 12px;
     line-height: 22px;
     font-size: 12px;
@@ -109,11 +111,9 @@ defineExpose({
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 8px;
 
     .el-radio {
-      height: auto;
-      margin-top: 8px;
+      height: 40px;
       align-items: center;
     }
 
@@ -139,9 +139,10 @@ defineExpose({
     }
 
     .select-columns {
+      max-height: 350px;
       padding: 8px;
       margin-top: 8px;
-      background-color: var(--color-header-bg);
+      background-color: var(--color-dialog-header-bg);
       border-radius: 6px;
       overflow: hidden;
 
@@ -163,7 +164,7 @@ defineExpose({
         .column-item {
           height: 22px;
           padding: 0px 8px;
-          background-color: #eceef0;
+          background-color: var(--color-download-file-selected-column-tag-bg);
           line-height: 22px;
           border-radius: 12px;
           font-size: 12px;

src/views/Tracking/src/TrackingView.vue

@@ -645,11 +645,12 @@ const SearchInput = () => {
         <el-input
           placeholder="Enter Booking/HBL/PO/Container/Carrier Booking No. "
           v-model="TrackingSearch"
+          class="log_input"
           @keyup.enter="SearchInput"
         >
           <template #prefix>
             <span class="iconfont_icon">
-              <svg class="iconfont" aria-hidden="true">
+              <svg class="iconfont icon_search" aria-hidden="true">
                 <use xlink:href="#icon-icon_search_b"></use>
               </svg>
             </span>
@@ -664,7 +665,7 @@ const SearchInput = () => {
               placement="bottom"
             >
               <span class="iconfont_icon iconfont_icon_tip">
-                <svg class="iconfont" aria-hidden="true">
+                <svg class="iconfont icon_search" aria-hidden="true">
                   <use xlink:href="#icon-icon_info_b"></use>
                 </svg>
               </span>
@@ -733,6 +734,7 @@ const SearchInput = () => {
   display: flex;
   height: 68px;
   border: 1px solid var(--color-border);
+  border-top: none;
   border-width: 1px 0 1px 0;
   font-size: var(--font-size-6);
   font-weight: 700;
@@ -760,12 +762,22 @@ const SearchInput = () => {
   flex-wrap: wrap;
 }
 .tag {
-  border-color: #efeff0;
   border-radius: var(--border-radius-22);
   margin: 0 8px 8px 0;
   color: var(--color-neutral-1);
   font-weight: 600;
   font-size: var(--font-size-2);
+  background-color: var(--tag-bg-color) !important;
+}
+.iconfont_icon_tip {
+  margin-left: 8px;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+}
+.icon_search {
+  fill: var(--color-neutral-1);
 }
 @media only screen and (min-width: 1280px) {
   .search {
@@ -777,4 +789,8 @@ const SearchInput = () => {
     width: 740px;
   }
 }
+:deep(.log_input .el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--color-select-border) inset;
+  border-radius: 6px;
+}
 </style>

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

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import { useHeaderSearch } from '@/stores/modules/headerSearch'
-import SlideVerify from './components/SlideVerify.vue'
 import CryptoJS from 'crypto-js'
 import dayjs from 'dayjs'
+import { useThemeStore } from '@/stores/modules/theme'
+
+const themeStore = useThemeStore()
 
 const router = useRouter()
 
@@ -91,7 +93,7 @@ const encryptPassword = (password) => {
 </script>
 
 <template>
-  <div class="public-tracking-search" v-vloading="loading">
+  <div class="public-tracking-search" v-vloading="loading" :class="{ 'dark-bg': themeStore.theme }">
     <div class="search-info">
       <div class="title">Tracking</div>
       <el-input
@@ -130,7 +132,6 @@ const encryptPassword = (password) => {
         </VEmpty>
       </div>
     </div>
-    <!-- <SlideVerify ref="slideVerifyRef" @verify-success="confirmVerify"></SlideVerify> -->
     <VSliderVerification
       v-if="isShowSliderVerification"
       @close="confirmVerification"
@@ -155,6 +156,10 @@ const encryptPassword = (password) => {
   background-size: cover;
   z-index: 1;
   height: 100%;
+  &.dark-bg {
+    background: url(../../../../../Login/src/image/bg-dark.png) no-repeat center center;
+    background-size: cover;
+  }
 }
 
 .public-tracking-search::before {
@@ -164,7 +169,7 @@ const encryptPassword = (password) => {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(255, 255, 255, 0.85); /* 半透明白色背景层 */
+  background-color: var(--color-public-tracking-bg-mask); /* 半透明白色背景层 */
   z-index: -1; /* 将伪元素放置在背景图片的下方 */
 }
 
@@ -187,8 +192,8 @@ const encryptPassword = (password) => {
     }
     :deep(.el-input-group__append) {
       padding: 0;
-      background-color: black;
-      border: 1px solid black;
+      background-color: var(--color-public-tracking-search-input-btn);
+      border: 1px solid var(--color-public-tracking-search-input-btn);
       border-radius: 0 6px 6px 0;
       box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
       span {
@@ -217,7 +222,7 @@ const encryptPassword = (password) => {
 }
 .public-tracking-search-input {
   :deep(.el-input__wrapper) {
-    box-shadow: 0 0 0 1px #2b2f36 inset;
+    box-shadow: 0 0 0 1px var(--color-public-tracking-search-input-border) inset;
   }
 }
 </style>

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;
@@ -265,6 +278,7 @@ const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allDat
           .line_container hr {
             width: 100%;
             border-radius: 0 2px 6px 0;
+            border-color: var(--color-neutral-1);
           }
           .line_container .right-icon {
             position: absolute;
@@ -272,7 +286,7 @@ const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allDat
             right: 0px;
             width: 10px;
             height: 11px;
-            border-top: 2px solid #000000;
+            border-top: 2px solid var(--color-neutral-1);
             transform: rotate(30deg);
             border-radius: 0 1px 0 0;
           }

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

@@ -14,9 +14,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' },
@@ -113,7 +116,7 @@ const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allDat
 
 <template>
   <div class="tracking-detail" v-vloading="loading">
-    <div class="header">
+    <div class="header" :class="{ 'is-dark': themeStore.theme === 'dark' }">
       <div class="detail-status">
         <span
           class="font_family"
@@ -308,6 +311,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;
@@ -395,6 +408,7 @@ const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allDat
           .line_container hr {
             width: 100%;
             border-radius: 0 2px 6px 0;
+            border-color: var(--color-neutral-1);
           }
           .line_container .right-icon {
             position: absolute;
@@ -402,7 +416,7 @@ const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allDat
             right: 0px;
             width: 10px;
             height: 11px;
-            border-top: 2px solid #000000;
+            border-top: 2px solid var(--color-neutral-1);
             transform: rotate(30deg);
             border-radius: 0 1px 0 0;
           }
@@ -424,7 +438,7 @@ const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allDat
 .fallback-class {
   opacity: 1 !important;
   cursor: move !important;
-  background-color: #fff;
+  background-color: var(--color-v-box-content-drag-bg);
   box-shadow: 4px 4px 32px 0px rgba(0, 0, 0, 0.2);
   border-radius: 12px;
 }

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

@@ -59,9 +59,6 @@ watch(
         }
       ]
       tableData.value.data = attachment.document_data
-      // nextTick(() => {
-      //   tableRef.value && autoWidth(tableData.value, tableRef.value)
-      // })
     }
   },
   {

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

@@ -207,7 +207,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"
@@ -241,7 +241,7 @@ const sendEmail = () => {
   padding: 16px;
   border-radius: 12px;
   border-bottom: 1px solid var(--color-border);
-  background: var(--color-header-bg);
+  background: var(--color-email-bg);
 
   .show-records {
     max-height: 370px;
@@ -251,6 +251,7 @@ const sendEmail = () => {
 
 :deep(.w-e-text-container) {
   min-height: 170px;
+  border-radius: 0 0 6px 6px;
   p {
     margin: 0px;
   }
@@ -278,12 +279,20 @@ 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;
   border-radius: 6px;
-  border: 1px solid var(--color-border);
-  overflow: hidden;
+  border: 1px solid var(--color-email-border);
+  // overflow: hidden;
+  :deep(div.w-e-toolbar) {
+    border-radius: 6px 6px 0 0;
+  }
 }
 
 .record-item {
@@ -301,14 +310,13 @@ const sendEmail = () => {
       align-items: center;
       width: 24px;
       height: 24px;
-      padding-top: 5px;
       text-align: center;
       border-radius: 50%;
       background-color: var(--color-theme);
       div {
         height: 14px;
         line-height: 14px;
-        color: #fff;
+        color: var(--color-avatar);
         font-weight: 700;
       }
     }
@@ -332,14 +340,14 @@ const sendEmail = () => {
 
   & > .content {
     padding: 16px 6px;
-    background-color: #eceef1;
+    background-color: var(--color-detail-email-record-bg);
     border-radius: 6px;
   }
 }
 
 :deep(.text-editor) {
   & > div:first-of-type {
-    border-bottom: 1px solid var(--color-border) !important;
+    border-bottom: 1px solid var(--color-email-border) !important;
   }
 }
 </style>

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

@@ -1,5 +1,11 @@
 <template>
-  <div id="tracking-map" style="width: 100%; height: 448px" class="tracking-map"></div>
+  <div
+    id="tracking-map"
+    ref="mapContainer"
+    style="width: 100%; height: 448px"
+    class="tracking-map"
+    :class="{ 'dark-mode': themeStore.theme === 'dark' }"
+  ></div>
 </template>
 <script setup lang="ts">
 import L from 'leaflet'
@@ -7,6 +13,9 @@ import DestinationIcon from '../images/destinationIcon.png'
 import OriginIcon from '../images/originIcon.png'
 import TransferIcon from '../images/transferIcon.png'
 import { onMounted, ref, watch } from 'vue'
+import { useThemeStore } from '@/stores/modules/theme'
+
+const themeStore = useThemeStore()
 
 const props = defineProps<{
   serial_no?: string
@@ -88,10 +97,12 @@ let initialCenter: L.LatLng | null = null
 let initialZoomLevel: number | null = null
 let isFirstRender = true // 标记是否为首次渲染
 
+let allMarkers = []
+
 // 添加标记后更新中心和缩放级别
 const addMarkersToMap = () => {
   if (!map) return // 确保地图已经初始化
-  const latLngBounds: any = [] // 用来存储所有标记的坐标
+
   markerPositions.value.forEach((position) => {
     const marker = L.marker([position.lat, position.lng], { icon: position.icon }).addTo(map)
 
@@ -111,12 +122,13 @@ const addMarkersToMap = () => {
         closeOnClick: false
       })
       .openPopup()
-    latLngBounds.push([position.lat, position.lng])
+    allMarkers[`${position.lat},${position.lng}`] = marker
   })
 
-  if (latLngBounds.length > 0) {
-    const bounds = L.latLngBounds(latLngBounds)
-    map!.fitBounds(bounds, { paddingTopLeft: [20, 70], paddingBottomRight: [400, 0] })
+  if (viewData.value.length > 0) {
+    // 根据标记的位置设置中心点以及缩放级别
+    const bounds = L.latLngBounds(viewData.value)
+    map!.fitBounds(bounds, { paddingTopLeft: [20, 70], paddingBottomRight: [0, 0] })
     setTimeout(() => {
       if (isFirstRender) {
         initialCenter = map!.getCenter()
@@ -124,10 +136,12 @@ const addMarkersToMap = () => {
         isFirstRender = false
       }
       addResetZoomButton(initialCenter!, initialZoomLevel!)
-    }, 0)
+    }, 500)
   }
 }
 
+const allMapData = ref()
+const viewData = ref([])
 // 请求接口并处理标记
 const getMarker = () => {
   $api
@@ -137,6 +151,7 @@ const getMarker = () => {
     })
     .then((res) => {
       if (res.code === 200) {
+        allMapData.value = res.data
         const { data } = res
         data &&
           data.forEach((item) => {
@@ -146,15 +161,17 @@ const getMarker = () => {
               Transfer: { color: '#ed0000', icon: transferIcon }
             }
             markerPositions.value.push({
-              lat: item.lat,
-              lng: item.lng,
+              lat: Number(item.lat),
+              lng: Number(item.lng),
               city: item.infor,
               label: item.label,
               icon: iconColorList[item.label].icon,
               iconColor: iconColorList[item.label].color
             })
           })
-        // 请求成功后添加标记，并动态添加重置按钮
+        viewData.value = data?.map((item) => {
+          return [Number(item.lat), Number(item.lng)]
+        }) // 请求成功后添加标记，并动态添加重置按钮
         addMarkersToMap()
       }
     })
@@ -204,12 +221,13 @@ onUnmounted(() => {
           margin-left: -2px;
           font-size: 12px;
           font-weight: 700;
+          color: #2b2f36;
         }
       }
       .label {
         margin-bottom: 4px;
         font-size: 12px;
-        color: let(--color-neutral-2);
+        color: #646a73;
       }
     }
   }
@@ -218,19 +236,98 @@ onUnmounted(() => {
   .leaflet-popup-tip {
     display: none;
   }
-  .transport-map {
-    .leaflet-touch {
-      .leaflet-bar {
-        border: 0;
-        border-radius: 4px;
-        overflow: hidden;
+
+  .leaflet-control-zoom {
+    span {
+      color: #2b2f36;
+    }
+  }
+}
+.leaflet-control {
+  a.leaflet-control-zoom-in,
+  a.leaflet-control-zoom-out,
+  a.leaflet-bar-part {
+    width: 26px;
+    height: 26px;
+    font-size: 18px;
+  }
+  a.leaflet-control-zoom-in,
+  a.leaflet-control-zoom-out {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+.dark-mode {
+  div.leaflet-control-zoom.leaflet-bar.leaflet-control {
+    border: 0;
+    border-radius: 4px;
+    box-shadow: none;
+    a {
+      background-color: #30353c;
+      border-bottom: none;
+      span {
+        color: var(--color-neutral-1);
+      }
+      &:first-child {
+        span {
+          display: inline-block;
+          width: 24px;
+          height: 28px;
+          border-bottom: 1px solid #3f434a;
+        }
+      }
+    }
+  }
+  .reset-zoom-control {
+    border: none;
+    background-color: #30353c;
+  }
+  a.leaflet-bar-part {
+    background-color: #30353c;
+    border-radius: 4px;
+    box-shadow: none;
+    overflow: hidden;
+    div {
+      border-color: var(--color-neutral-1) !important;
+      div {
+        background-color: var(--color-neutral-1) !important;
       }
     }
   }
 }
+
+/* 示例：将所有地图图片的颜色反转 */
+.dark-mode img:not(.leaflet-marker-icon) {
+  filter: invert(1) hue-rotate(230deg) saturate(60%) brightness(60%) opacity(80%);
+}
+// 防止暗黑模式下地图超出容器
+.tracking-map {
+  overflow: hidden;
+}
+// 修改暗黑模式下的背景色
+.leaflet-container.dark-mode,
+.leaflet-map-pane.dark-mode,
+.leaflet-tile-container.dark-mode {
+  background-color: #2b2f36;
+}
+// 处理版权信息在切换模式后样式错误bug
+.leaflet-right .leaflet-control-attribution {
+  background: rgba(255, 255, 255, 0.8);
+  margin: 0 4px 4px 0;
+  color: #2b2f36;
+  span {
+    font-size: 12px;
+    color: #2b2f36;
+  }
+  a {
+    color: #0078a8;
+    font-size: 12px;
+  }
+}
 /* 自定义重置缩放按钮控件样式 */
 .reset-zoom-control {
-  margin-top: 10px; /* 增加上边距，使按钮与默认缩放按钮之间有间距 */
+  margin-top: 10px;
   border-radius: 4px;
   background-color: white;
   border: 1px solid #ccc;
@@ -244,3 +341,66 @@ onUnmounted(() => {
   padding: 6px;
 }
 </style>
+
+<style lang="scss">
+.tracking-map {
+  .container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 50px;
+    width: 50px;
+    /* background-color: #d9dddf; */
+    .font_family {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-12px, -12px);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 24px;
+      height: 24px;
+      padding-bottom: 2px;
+      padding-left: 1px;
+      color: white;
+      background-color: rgba(255, 117, 0, 1);
+      border-radius: 50%;
+      font-size: 14px;
+      border: 1px solid white;
+    }
+  }
+  .circle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    background-color: rgba(255, 117, 0, 1);
+    border-radius: 50%;
+    position: relative;
+    animation: expandAndFade 1.3s linear infinite;
+    overflow: hidden; /* 确保子元素不会溢出 */
+
+    opacity: 0.9;
+  }
+
+  @keyframes expandAndFade {
+    0% {
+      transform: scale(1);
+      opacity: 0.9;
+    }
+
+    50% {
+      transform: scale(1.5);
+      opacity: 0.7;
+    }
+
+    100% {
+      transform: scale(2);
+      opacity: 0.2;
+    }
+  }
+}
+</style>

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

@@ -233,9 +233,9 @@ const { isOverflow: isDetailDestinationOverflow } = useOverflow(detailDestinatio
   height: 80px;
   cursor: pointer;
   &:hover {
-    background-color: #fef8f3;
+    background-color: var(--color-tracking-routes-item-bg);
     .serial-number {
-      background-color: #f6f2ee;
+      background-color: var(--color-tracking-routes-item-leg-bg);
     }
   }
   .serial-number {
@@ -357,16 +357,16 @@ const { isOverflow: isDetailDestinationOverflow } = useOverflow(detailDestinatio
     margin-left: 8px;
   }
   .line_container hr {
-    border-color: #484c52;
+    border-color: var(--color-neutral-1);
     border-top: none;
   }
 
   .line_container .right-icon {
-    border-top: 1px solid #484c52;
-    border-radius: 0 1px 1px 0;
-    top: -2px;
+    border-top: 2px solid var(--color-neutral-1);
+    border-radius: 0 2px 2px 0px;
+    top: -4px;
     right: 0px;
-    width: 10px;
+    width: 12px;
     height: 12px;
   }
   .date-info {
@@ -487,6 +487,7 @@ const { isOverflow: isDetailDestinationOverflow } = useOverflow(detailDestinatio
   width: 100%;
   min-width: 16px;
   border-radius: 0 2px 6px 0;
+  border-color: var(--color-neutral-1);
 }
 
 .line_container .right-icon {
@@ -495,7 +496,7 @@ const { isOverflow: isDetailDestinationOverflow } = useOverflow(detailDestinatio
   right: 0px;
   width: 10px;
   height: 11px;
-  border-top: 2px solid #000000;
+  border-top: 2px solid var(--color-neutral-1);
   transform: rotate(30deg);
   border-radius: 0 1px 0 0;
 }

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

@@ -42,15 +42,16 @@ const handleTabClick = (name: string) => {
 <style lang="scss" scoped>
 .transport-step {
   width: 400px;
+  background-color: var(--color-header-bg);
   height: 448px;
-  background-color: #fff;
-  border: 1px solid #eaebed;
-  border-radius: 12px;
+  border-radius: 3px;
+  border: 1px solid var(--color-border);
+  // box-shadow: -2px 2px 12px 0px var(--color-shipment-status-shadow);
   .header {
     display: flex;
     height: 48px;
     border-radius: 6px 6px 0 0;
-    background-color: var(--color-header-bg);
+    background-color: var(--color-shipment-status-header-bg);
     .tab {
       flex: 1;
       text-align: center;
@@ -67,6 +68,10 @@ const handleTabClick = (name: string) => {
   }
   .content {
     height: calc(100% - 48px);
+    background-color: var(--color-mode);
+  }
+  :deep(.el-collapse-item__wrap) {
+    border-bottom: none;
   }
 }
 </style>

src/views/Tracking/src/components/TrackingTable/src/TrackingTable.vue

@@ -7,6 +7,9 @@ import { useRouter } from 'vue-router'
 import { ref, onMounted } from 'vue'
 import { transportationMode } from '@/components/TransportationMode'
 import { useLoadingState } from '@/stores/modules/loadingState'
+import { useThemeStore } from '@/stores/modules/theme'
+
+const themeStore = useThemeStore()
 
 const router = useRouter()
 const props = defineProps({
@@ -520,7 +523,11 @@ defineExpose({
     <div class="table-tools">
       <div class="left-total-records">{{ selectedNumber }} Selected</div>
       <div class="right-tools-btn">
-        <el-button class="el-button--main" @click="handleDownload">
+        <el-button
+          class="el-button--main"
+          :class="{ 'el-button--pain-theme': themeStore.theme === 'dark' }"
+          @click="handleDownload"
+        >
           <span style="margin-right: 8px" class="font_family icon-icon_download_b"></span>
           Download
         </el-button>

src/views/Tracking/src/components/TrackingTable/src/components/DownloadDialog.vue

@@ -34,7 +34,7 @@ defineExpose({
 
 <template>
   <div>
-    <el-dialog @close="clearData" v-model="dialogVisible" title="Download File" width="480">
+    <el-dialog @close="clearData" v-model="dialogVisible" title="Download File" width="540">
       <div class="download-dialog">
         <div class="select-data">
           <div style="display: inline-block">
@@ -95,12 +95,14 @@ defineExpose({
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
+  max-height: 120px;
   margin-top: 8px;
+  overflow: auto;
 
   .filter-item {
     height: 22px;
     padding: 0px 8px;
-    background-color: #eceef0;
+    background-color: var(--color-download-file-filter-tag-bg);
     border-radius: 12px;
     line-height: 22px;
     font-size: 12px;
@@ -114,11 +116,9 @@ defineExpose({
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 8px;
 
     .el-radio {
-      height: auto;
-      margin-top: 8px;
+      height: 40px;
       align-items: center;
     }
 
@@ -144,11 +144,12 @@ defineExpose({
     }
 
     .select-columns {
+      max-height: 350px;
       padding: 8px;
       margin-top: 8px;
-      background-color: var(--color-header-bg);
+      background-color: var(--color-dialog-header-bg);
       border-radius: 6px;
-      overflow: hidden;
+      overflow: auto;
 
       &.show {
         max-height: 500px;
@@ -168,7 +169,7 @@ defineExpose({
         .column-item {
           height: 22px;
           padding: 0px 8px;
-          background-color: #eceef0;
+          background-color: var(--color-download-file-selected-column-tag-bg);
           line-height: 22px;
           border-radius: 12px;
           font-size: 12px;