style: 修改暗黑模式样式

src/components/ContainerStatus/src/ContainerStatus.vue

@@ -134,6 +134,7 @@ watch(
     line-height: 50px;
     & > .title {
       font-size: 16px;
+      color: var(--color-neutral-2);
       span {
         margin-left: 4px;
         font-weight: 700;
@@ -157,7 +158,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/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/styles/elementui.scss

@@ -372,7 +372,7 @@ div .el-select__placeholder.is-transparent {
   }
 }
 div.el-input__wrapper {
-  box-shadow: 0 0 0 1px var(--color-border) inset;
+  box-shadow: 0 0 0 1px var(--el-border) inset;
   padding: 0 8px;
 }
 div.el-input div.el-input__wrapper.is-focus {
@@ -755,6 +755,9 @@ div .el-select-dropdown {
 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);
 }

src/styles/theme.scss

@@ -66,7 +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-all-bg-color: #feecf3;
   --color-tag-cargo-received-bg: #eaecff;
   --color-tag-departure-bg: #d9edfa;
   --color-tag-arrived-bg: #e7faf8;
@@ -146,9 +146,10 @@
   --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;
@@ -200,6 +201,7 @@
   --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);
 
@@ -216,6 +218,9 @@
   --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;
@@ -230,6 +235,10 @@
 
   --color-recent-name: rgba(43, 47, 54, 0.05);
   --color-disabled-bg: #eaebed;
+
+  .el-input {
+    --el-border: #eaebed;
+  }
 }
 
 :root.dark {
@@ -256,6 +265,7 @@
   --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;
@@ -272,6 +282,7 @@
   --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);
 
@@ -300,7 +311,8 @@
   --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: #553d2b;
+  --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);
   }
@@ -320,10 +332,12 @@
   --el-bg-color: #30353c;
   // 按钮边框颜色
   --color-accent-13: #656f7d;
+  // 输入框边框颜色
   --el-border: #656f7d;
   .el-input {
-    --el-input-border: #656f7d;
+    --el-border: #656f7d;
   }
+  --el-radio-input-border: #656f7d;
   --color-table-header-bg: #34383f;
   --el-input-focus: #2b2f36;
   --color-dialog-header-bg: #3e454f;
@@ -344,6 +358,7 @@
   --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

@@ -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/components/BookingTable/src/components/DownloadDialog.vue

@@ -116,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;
     }
 
@@ -149,7 +147,7 @@ defineExpose({
       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: auto;
 

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

@@ -193,7 +193,7 @@ defineExpose({
     border-radius: 4px;
     box-shadow: none;
     a {
-      background-color: #3c414a;
+      background-color: #2b2f36;
       border-bottom: none;
       span {
         color: var(--color-neutral-1);
@@ -202,17 +202,17 @@ defineExpose({
         span {
           display: inline-block;
           width: 24px;
-          border-bottom: 2px solid #575c64;
+          border-bottom: 1px solid #3f434a;
         }
       }
     }
   }
   .reset-zoom-control {
     border: none;
-    background-color: #3c414a;
+    background-color: #2b2f36;
   }
   a.leaflet-bar-part {
-    background-color: #3c414a;
+    background-color: #2b2f36;
     border-radius: 4px;
     box-shadow: none;
     overflow: hidden;

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

@@ -216,6 +216,18 @@ const handleLogin = () => {
           <el-button style="height: 40px; width: 40px" class="el-button--text">
             <span class="font_family icon-icon_themes_b" style="font-size: 16px"></span
           ></el-button>
+          <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">
+              <span class="font_family icon-icon_themes_b" style="font-size: 16px"></span
+            ></el-button>
+          </el-tooltip>
         </template>
       </el-popover>
 
@@ -455,4 +467,7 @@ div.el-popover.el-popper.user-config-popover {
     }
   }
 }
+div.el-popper.theme-popper-class {
+  padding: 3px 4px;
+}
 </style>

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

@@ -111,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;
     }
 
@@ -144,7 +142,7 @@ defineExpose({
       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;
 

src/views/Tracking/src/TrackingView.vue

@@ -733,6 +733,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;

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

@@ -315,7 +315,7 @@ const addMarkersToMap = () => {
         isFirstRender = false
       }
       addResetZoomButton(initialCenter!, initialZoomLevel!)
-    }, 0)
+    }, 1000)
   }
 }
 
@@ -584,6 +584,12 @@ onUnmounted(() => {
     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 {
@@ -591,7 +597,7 @@ onUnmounted(() => {
     border-radius: 4px;
     box-shadow: none;
     a {
-      background-color: #3c414a;
+      background-color: #2b2f36;
       border-bottom: none;
       span {
         color: var(--color-neutral-1);
@@ -601,17 +607,17 @@ onUnmounted(() => {
           display: inline-block;
           width: 24px;
           height: 28px;
-          border-bottom: 2px solid #575c64;
+          border-bottom: 1px solid #3f434a;
         }
       }
     }
   }
   .reset-zoom-control {
     border: none;
-    background-color: #3c414a;
+    background-color: #2b2f36;
   }
   a.leaflet-bar-part {
-    background-color: #3c414a;
+    background-color: #2b2f36;
     border-radius: 4px;
     box-shadow: none;
     overflow: hidden;

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

@@ -1,8 +1,80 @@
 <script setup lang="ts">
+import { contain } from 'echarts/types/src/scale/helper.js'
+
 const props = defineProps({
   data: Object
 })
 
+const dataA = {
+  containerStatusData: [
+    {
+      label: 'CAAU2233090 / 20SD',
+      content: [
+        {
+          code: 'VD',
+          title: 'Vessel Departure',
+          date: '2025-01-02 00:00',
+          country: 'CNQDG',
+          timezone: 'Asia/Shanghai'
+        },
+        {
+          code: 'I',
+          title: 'Gate in full for a booking',
+          date: '2024-12-19 15:07',
+          country: 'CNTAO',
+          timezone: 'Asia/Shanghai'
+        },
+        {
+          code: 'EE',
+          title: 'Empty Equipment Dispatched',
+          date: '2024-12-13 11:45',
+          country: 'CNTAO',
+          timezone: 'Asia/Shanghai'
+        }
+      ]
+    }
+  ],
+  simplexData: [
+    {
+      index: 1,
+      label: 'Place of Receipt',
+      path: 'QINGDAO, CHINA/CNQDG',
+      isArrival: true,
+      children: []
+    },
+    {
+      index: 2,
+      label: 'Port of Loading',
+      path: 'QINGDAO, CHINA/CNQDG',
+      isArrival: true,
+      children: [
+        {
+          label: 'Departure(ATD)',
+          date: '2025-01-02 00:00'
+        }
+      ]
+    },
+    {
+      index: 3,
+      label: 'Port of Discharge',
+      path: 'NEWARK, NJ/USEWR',
+      isArrival: false,
+      children: [
+        {
+          label: 'Arrival(ETA)',
+          date: '2025-02-09'
+        }
+      ]
+    },
+    {
+      index: 4,
+      label: 'Place of Delivery',
+      path: 'NEWARK, NJ/USEWR',
+      isArrival: false
+    }
+  ]
+}
+
 const activeName = ref('shipmentStatus')
 
 const handleTabClick = (name: string) => {
@@ -30,10 +102,10 @@ const handleTabClick = (name: string) => {
     </div>
     <div class="content">
       <template v-if="activeName === 'shipmentStatus'">
-        <ShipmentStatus :data="props.data?.simplexData" />
+        <ShipmentStatus :data="dataA?.simplexData" />
       </template>
       <template v-else-if="activeName === 'containerStatus'">
-        <ContainerStatus :data="props.data?.containerStatusData" />
+        <ContainerStatus :data="dataA?.containerStatusData" />
       </template>
     </div>
   </div>
@@ -51,7 +123,7 @@ const handleTabClick = (name: string) => {
     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;
@@ -70,5 +142,8 @@ const handleTabClick = (name: string) => {
     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/components/DownloadDialog.vue

@@ -116,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;
     }
 
@@ -149,7 +147,7 @@ defineExpose({
       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: auto;