feat:merge dev

src/components/ContainerStatus/src/ContainerStatus.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
+<<<<<<< HEAD
 import emptyImage from './image/no_data.png'
+=======
+>>>>>>> dev
 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'
+<<<<<<< HEAD
 
 const emptyImg = ref(lightPng)
 
@@ -26,7 +30,14 @@ onMounted(() => {
     }
   )
 })
+=======
+>>>>>>> dev
+
+const themeStore = useThemeStore()
 
+const emptyImg = computed(() => {
+  return themeStore.theme === 'dark' ? darkPng : lightPng
+})
 const props = defineProps({
   data: Object
 })
@@ -83,12 +94,16 @@ watch(
       </el-collapse-item>
     </el-collapse>
     <div v-else class="empty-content" style="">
+<<<<<<< HEAD
       <img
         :src="emptyImg"
         :class="{ 'is-dark': themeStore.theme === 'dark' }"
         fit="contain"
         alt="empty"
       />
+=======
+      <img :src="emptyImg" :class="{ 'is-dark': themeStore.theme === 'dark' }" alt="empty" />
+>>>>>>> dev
       <div class="empty-text" style="">No data</div>
     </div>
     <div class="footer">
@@ -119,12 +134,17 @@ watch(
 
 =======
     height: 358px;
+<<<<<<< HEAD
     .el-image {
       width: 200px;
       height: 200px;
       margin-top: 20px;
       object-fit: cover;
     }
+>>>>>>> dev
+=======
+    padding-top: 140px;
+
 >>>>>>> dev
     .empty-text {
       margin-top: 8px;
@@ -162,6 +182,7 @@ watch(
     line-height: 50px;
     & > .title {
       font-size: 16px;
+      color: var(--color-neutral-2);
       span {
         margin-left: 4px;
         font-weight: 700;
@@ -185,7 +206,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/components/VEmpty/src/VEmpty.vue

@@ -3,25 +3,10 @@ import lightPng from './images/default_image.png'
 import darkPng from './images/default_dark_image.png'
 import { useThemeStore } from '@/stores/modules/theme'
 
-const emptyImg = ref(lightPng)
-
 const themeStore = useThemeStore()
 // 判断当前系统主题模式
-onMounted(() => {
-  watch(
-    () => themeStore.theme,
-    (newVal) => {
-      if (newVal === 'dark') {
-        emptyImg.value = darkPng
-      } else {
-        emptyImg.value = lightPng
-      }
-    },
-    {
-      immediate: true,
-      deep: true
-    }
-  )
+const emptyImg = computed(() => {
+  return themeStore.theme === 'dark' ? darkPng : lightPng
 })
 </script>
 

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/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)
 
@@ -75,4 +76,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

@@ -2,24 +2,30 @@ import { defineStore } from 'pinia'
 
 interface ThemeState {
   theme: string
+  isManualChange: boolean
 }
 export const useThemeStore = defineStore('theme', {
   state: (): ThemeState => ({
-    theme: localStorage.getItem('theme') || 'light'
+    theme: localStorage.getItem('theme') || 'light',
+    isManualChange: JSON.parse(localStorage.getItem('isManualChange')) || false
   }),
   actions: {
-    toggleTheme(theme: string) {
+    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')
-        localStorage.setItem('theme', 'light')
-        this.theme = 'light'
       } else if (!html.classList.contains('dark') && theme === 'dark') {
         loadDarkTheme()
         html.classList.add('dark')
-        localStorage.setItem('theme', 'dark')
-        this.theme = 'dark'
+      }
+      // 主动修改主题后，不再跟随系统设置
+      if (isManualChange) {
+        localStorage.setItem('isManualChange', JSON.stringify(isManualChange))
+        this.isManualChange = isManualChange
       }
     }
   }

src/styles/elementui.scss

@@ -349,7 +349,7 @@ div.el-drawer {
   }
   .el-drawer__body {
     padding: 16px;
-    background-color: var(--color-table-header-bg);
+    background-color: var(--color-drawer-body-bg);
   }
   .el-drawer__close-btn:focus i,
   .el-drawer__close-btn:hover i {
@@ -362,17 +362,21 @@ div .el-input__inner {
   font-size: var(--font-size-3);
 }
 .el-input__inner::placeholder {
+<<<<<<< HEAD
   color: #6c6f75;
-  font-size: var(--font-size-3);
-}
+=======
+  color: var(--color-neutral-3);
 div .el-select__placeholder.is-transparent {
-  span {
     color: var(--color-neutral-3) !important;
     font-size: var(--font-size-3);
   }
 }
 div.el-input__wrapper {
+<<<<<<< HEAD
   box-shadow: 0 0 0 1px var(--color-border) inset;
+=======
+  box-shadow: 0 0 0 1px var(--el-border) inset;
+>>>>>>> dev
   padding: 0 8px;
 }
 div.el-input div.el-input__wrapper.is-focus {
@@ -436,6 +440,13 @@ 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;
@@ -755,6 +766,12 @@ div .el-select-dropdown {
 div label.smile_radio .el-radio__inner {
   background-color: var(--management-bg-color);
 }
+<<<<<<< HEAD
+=======
+span.el-radio__inner {
+  border: 1px solid var(--el-radio-input-border);
+}
+>>>>>>> dev
 div .el-radio__inner:hover {
   border-color: var(--color-theme);
 }

src/styles/theme-g.scss

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

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;
@@ -85,10 +85,8 @@
 
   --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;
@@ -146,9 +144,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 +199,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 +216,12 @@
   --color-toggle-btn-module-active-bg: #fff;
 
   --color-user-config-title-bottom-border: #eeeeed;
+<<<<<<< HEAD
+=======
+
+  --color-container-status-node-bg: #f8f9fd;
+
+>>>>>>> dev
   // 输入框禁用的颜色
   --input-disabled-bg-color: #f5f7fa;
   --input-disabled-text-color: #a8abb2;
@@ -230,6 +236,10 @@
 
   --color-recent-name: rgba(43, 47, 54, 0.05);
   --color-disabled-bg: #eaebed;
+
+  .el-input {
+    --el-border: #eaebed;
+  }
 }
 
 :root.dark {
@@ -256,6 +266,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 +283,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 +312,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,14 +333,17 @@
   --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;
   --color-dialog-body-bg: #30353c;
+  --color-drawer-body-bg: #2b2f36;
   div.el-card {
     --el-card-bg-color: #30353c;
   }
@@ -344,6 +360,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/BookingView.vue

@@ -400,6 +400,7 @@ const SearchInput = () => {
           placeholder="Enter Booking/HBL/PO/Container/Carrier Booking No. "
           v-model="BookingSearch"
           class="log_input"
+          @keyup.enter="SearchInput"
         >
           <template #prefix>
             <span class="iconfont_icon">

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

@@ -307,7 +307,6 @@ const sendEmail = () => {
       align-items: center;
       width: 24px;
       height: 24px;
-      padding-top: 5px;
       text-align: center;
       border-radius: 50%;
       background-color: var(--color-theme);

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/DashboardView.vue

@@ -1267,6 +1267,10 @@ const ClickParams = (val: any) => {
 .tips {
   display: flex;
   justify-content: center;
+  padding-bottom: 8px;
+}
+.iconfont_tips {
+  fill: var(--color-neutral-2);
 }
 .iconfont_tips {
   fill: var(--color-neutral-2);
@@ -1409,4 +1413,4 @@ const ClickParams = (val: any) => {
   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/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

@@ -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;
@@ -226,7 +226,7 @@ defineExpose({
 }
 /* 示例：将所有地图图片的颜色反转 */
 .dark-mode img:not(.leaflet-marker-icon) {
-  filter: invert(1) hue-rotate(170deg);
+  filter: invert(1) hue-rotate(230deg) saturate(60%) brightness(60%) opacity(80%);
 }
 // 防止暗黑模式下地图超出容器
 #map {

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

@@ -18,7 +18,7 @@ const headerSearch = useHeaderSearch()
 const themePopoverRef = ref()
 // 切换系统主题颜色
 const toggleThemeMode = (theme: string) => {
-  themeStore.toggleTheme(theme)
+  themeStore.toggleTheme(theme, true)
 }
 
 const searchValue = ref('')
@@ -144,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>
@@ -162,6 +175,78 @@ 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"
@@ -247,7 +332,7 @@ 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>
@@ -278,19 +363,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;
@@ -333,6 +416,10 @@ 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;
@@ -366,6 +453,7 @@ div.el-popover.el-popper.toggle-theme-popover {
       img {
         width: 154px;
         height: 90px;
+        cursor: pointer;
       }
       &.active {
         border: 2px solid var(--color-theme);
@@ -380,6 +468,7 @@ div.el-popover.el-popper.toggle-theme-popover {
         span {
           height: 16px;
           width: 16px;
+          padding: 1px 1px 0 0;
           background-color: var(--color-theme);
           color: #fff;
           border-radius: 50%;
@@ -430,7 +519,6 @@ div.el-popover.el-popper.user-config-popover {
       justify-content: center;
       width: 48px;
       height: 48px;
-      padding-top: 7px;
       border-radius: 50%;
       text-align: center;
       background-color: var(--color-theme);
@@ -460,4 +548,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">

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

@@ -7,24 +7,6 @@ const userStore = useUserStore()
 const router = useRouter()
 
 const themeStore = useThemeStore()
-const changePasswordRef = ref()
-// 判断当前系统主题模式
-onMounted(() => {
-  watch(
-    () => themeStore.theme,
-    (newVal) => {
-      if (newVal === 'dark') {
-        changePasswordRef.value.classList.add('dark-bg')
-      } else {
-        changePasswordRef.value.classList.remove('dark-bg')
-      }
-    },
-    {
-      immediate: true,
-      deep: true
-    }
-  )
-})
 
 const route = useRoute()
 
@@ -147,7 +129,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="login" ref="changePasswordRef">
+  <div class="login" :class="{ 'dark-bg': themeStore.theme === 'dark' }">
     <el-card class="login-card">
       <div class="title" :class="{ 'is-dark': themeStore.theme === 'dark' }">
         <span class="welcome">Change Password</span>
@@ -216,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>

src/views/Login/src/loginView.vue

@@ -12,25 +12,6 @@ const router = useRouter()
 const route = useRoute()
 const themeStore = useThemeStore()
 
-const loginRef = ref()
-// 判断当前系统主题模式
-onMounted(() => {
-  watch(
-    () => themeStore.theme,
-    (newVal) => {
-      if (newVal === 'dark') {
-        loginRef.value.classList.add('dark-bg')
-      } else {
-        loginRef.value.classList.remove('dark-bg')
-      }
-    },
-    {
-      immediate: true,
-      deep: true
-    }
-  )
-})
-
 // 手动获取url中的参数，直接获取route.query的参数时如果有+号会被转义成空格
 const getQueryParams = (url: string) => {
   const params = url.split('?')[1]
@@ -343,7 +324,7 @@ const firstLoginTipsRef = ref()
 </script>
 
 <template>
-  <div class="login" ref="loginRef">
+  <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" :class="{ 'is-dark': themeStore.theme === 'dark' }">

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

@@ -646,6 +646,7 @@ const SearchInput = () => {
           placeholder="Enter Booking/HBL/PO/Container/Carrier Booking No. "
           v-model="TrackingSearch"
           class="log_input"
+          @keyup.enter="SearchInput"
         >
           <template #prefix>
             <span class="iconfont_icon">
@@ -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;

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

@@ -1,30 +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 publicTrackingRef = ref()
-// 判断当前系统主题模式
-onMounted(() => {
-  watch(
-    () => themeStore.theme,
-    (newVal) => {
-      if (newVal === 'dark') {
-        publicTrackingRef.value.classList.add('dark-bg')
-      } else {
-        publicTrackingRef.value.classList.remove('dark-bg')
-      }
-    },
-    {
-      immediate: true,
-      deep: true
-    }
-  )
-})
 
 const router = useRouter()
 
@@ -112,7 +93,7 @@ const encryptPassword = (password) => {
 </script>
 
 <template>
-  <div class="public-tracking-search" ref="publicTrackingRef" 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
@@ -151,7 +132,6 @@ const encryptPassword = (password) => {
         </VEmpty>
       </div>
     </div>
-    <!-- <SlideVerify ref="slideVerifyRef" @verify-success="confirmVerify"></SlideVerify> -->
     <VSliderVerification
       v-if="isShowSliderVerification"
       @close="confirmVerification"

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

@@ -310,7 +310,6 @@ const sendEmail = () => {
       align-items: center;
       width: 24px;
       height: 24px;
-      padding-top: 5px;
       text-align: center;
       border-radius: 50%;
       background-color: var(--color-theme);

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
@@ -89,7 +98,6 @@ let initialZoomLevel: number | null = null
 let isFirstRender = true // 标记是否为首次渲染
 
 let allMarkers = []
-let visibleMarkers = new Set()
 
 // 添加标记后更新中心和缩放级别
 const addMarkersToMap = () => {
@@ -118,166 +126,19 @@ const addMarkersToMap = () => {
     allMarkers[`${position.lat},${position.lng}`] = marker
   })
 
+<<<<<<< HEAD
   updateVisibleMarkers()
 
   if (viewData.value.length > 0) {
-    // 根据标记的位置设置中心点以及缩放级别
-    const bounds = L.latLngBounds(viewData.value)
-    map!.fitBounds(bounds, { paddingTopLeft: [20, 70], paddingBottomRight: [400, 0] })
+>>>>>>> dev
     setTimeout(() => {
       if (isFirstRender) {
         initialCenter = map!.getCenter()
-        initialZoomLevel = map!.getZoom()
         isFirstRender = false
       }
       addResetZoomButton(initialCenter!, initialZoomLevel!)
-    }, 0)
-  }
-}
-
-// 新增轮船当前位置标记
-const addShipMarker = (x: number) => {
-  const solidLine = allMapData.value.solidLine
-  // 如果轮船还未出发，则显示起点轮船标记
-  if (solidLine.length === 0) {
-    // 创建轮船图标
-    const arrowIcon = L.divIcon({
-      html: `
-        <div class="container">
-          <div class="circle"></div>
-          <span style="padding: 0; color:white; border:1px solid white" class="font_family icon-icon_ocean_b"></span>
-        </div>
-        `,
-      className: 'arrow-icon',
-      iconSize: [50, 50],
-      iconAnchor: [25, 25], // 箭头的中心点
-      popupAnchor: [0, -25] // 弹出框的锚点
-    })
-
-    let curMarkerLocation = markerPositions.value.find((item) => item.label === 'Origin')
-    const arrowMarker = L.marker([curMarkerLocation.lat, curMarkerLocation.lng + x * 360], {
-      icon: arrowIcon
-    }).addTo(map)
-    track_added_marker.push(arrowMarker)
-  } else if (solidLine.length > 0) {
-    // 如果轮船已经出发，则显示轮船当前位置标记
-    // 如果线段至少有两个点，才添加箭头
-    // 获取线段的最后一个点和倒数第二个点
-    const lastPoint = solidLine[solidLine.length - 1]
-    const secondLastPoint = solidLine[solidLine.length - 2]
-    console.log(lastPoint, secondLastPoint, 'lastPoint, secondLastPoint')
-    // 计算线段末端的角度（以弧度为单位）
-    const angle =
-      (Math.atan2(
-        Number(lastPoint.lon) - Number(secondLastPoint.lon), // Δlon (x)
-        Number(lastPoint.lat) - Number(secondLastPoint.lat) // Δlat (y)
-      ) *
-        (180 / Math.PI) +
-        360) %
-      360
-    // 创建自定义箭头图标
-    const arrowIcon = L.divIcon({
-      html: `
-      <div style="transform: rotate(${angle}deg);" class="container">
-        <div class="circle"></div>
-        <span style="color:white;border:1px solid white" class="font_family icon-icon_arrow_b"></span>
-      </div>
-      `,
-      className: 'arrow-icon',
-      iconSize: [50, 50],
-      iconAnchor: [25, 25], // 箭头的中心点
-      popupAnchor: [0, -25] // 弹出框的锚点
-    })
-    // 创建箭头标记，并根据计算出的角度旋转箭头
-    const arrowMarker = L.marker([Number(lastPoint.lat), Number(lastPoint.lon) + x * 360], {
-      icon: arrowIcon
-    }).addTo(map)
-    // 将箭头标记也存储在 track_added_marker 数组中，以便后续管理
-    track_added_marker.push(arrowMarker)
-  }
-}
-
-// 更新可见标记
-const updateVisibleMarkers = () => {
-  const newVisibleMarkers = new Set()
-
-  let bnd = map.getBounds()
-  let ww = bnd.getEast() - bnd.getWest()
-
-  let cc = Math.ceil(ww / 360)
-
-  let cc1 = Math.floor(bnd.getWest() / 360)
-  let cc2 = Math.ceil(bnd.getEast() / 360)
-  cc = cc2 - cc1 + 1
-
-  let x = cc1
-
-  // 移除不再可见的标记
-  visibleMarkers.forEach((marker: any) => {
-    if (!newVisibleMarkers.has(marker)) {
-      map.removeLayer(marker)
-      delete allMarkers[`${marker.getLatLng().lat},${marker._lng},${marker._x}`]
-    }
-  })
-
-  // 计算当前视图中的标记，包括多地球的情况
-  while (x >= cc1 && x <= cc2 && cc > 0) {
-    Object.values(allMarkers).forEach((marker) => {
-      const latLng = marker.getLatLng()
-      const key = `${latLng.lat},${latLng.lng},${x}`
-      if (!allMarkers[key]) {
-        const newMarker: any = L.marker([latLng.lat, latLng.lng + x * 360], {
-          icon: marker.options.icon
-        })
-          .bindPopup(marker.getPopup().getContent(), marker.getPopup().options)
-          .openPopup()
-        newMarker._x = x
-        // 使用原始的经度作为标记的唯一标识
-        newMarker._lng = latLng.lng
-        allMarkers[key] = newMarker
-        map.addLayer(newMarker)
-      }
-      newVisibleMarkers.add(allMarkers[key])
-    })
-
-    addShipMarker(x)
-
-    x++
-    cc--
+    }, 500)
   }
-
-  // 更新可见标记集合
-  visibleMarkers = newVisibleMarkers
-}
-
-// 处理得到的数据
-const handleData = (data) => {
-  let key = 0
-  let curLine = []
-  let resultLine = []
-  data.forEach((item, index) => {
-    if (item.sn === '1' && key === 0) {
-      key++
-      curLine.push([Number(item.lat), Number(item.lon)])
-    } else if (item.sn === '1' && key !== 0) {
-      resultLine.push({
-        name: key,
-        pts: curLine
-      })
-      curLine = [[Number(item.lat), Number(item.lon)]]
-      key++
-    }
-    if (item.sn !== '1') {
-      curLine.push([Number(item.lat), Number(item.lon)])
-    }
-    if (index === data.length - 1 && item.sn !== '1') {
-      resultLine.push({
-        name: key,
-        pts: curLine
-      })
-    }
-  })
-  return resultLine
 }
 
 const allMapData = ref()
@@ -301,20 +162,17 @@ const getMarker = () => {
               Transfer: { color: '#ed0000', icon: transferIcon }
             }
             markerPositions.value.push({
-              lat: item.lat,
-              lng: (Number(item.lng) + 360) % 360,
+              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?.rangePoint.length > 0 ? data?.rangePoint : data?.point)?.map(
-          (item) => {
-            return [Number(item.lat), (Number(item.lon || item.lng) + 360) % 360]
-          }
-        )
-        // 请求成功后添加标记，并动态添加重置按钮
+        viewData.value = data?.map((item) => {
+          return [Number(item.lat), Number(item.lng)]
+        }) // 请求成功后添加标记，并动态添加重置按钮
         addMarkersToMap()
         if (data?.dottedLine) {
           draw_marker(handleData(data.dottedLine), handleData(data.solidLine))
@@ -405,6 +263,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 {
@@ -412,17 +276,31 @@ onUnmounted(() => {
     border-radius: 4px;
     box-shadow: none;
     a {
-      background-color: #3c414a;
+      background-color: #30353c;
       border-bottom: none;
       span {
         color: var(--color-neutral-1);
       }
       &:first-child {
         span {
-          display: inline-block;
-          width: 24px;
-          border-bottom: 2px solid #575c64;
-        }
+          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;
       }
     }
   }
@@ -472,6 +350,35 @@ onUnmounted(() => {
     font-size: 12px;
   }
 }
+
+/* 示例：将所有地图图片的颜色反转 */
+.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;

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

@@ -42,17 +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);
+  // 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;
@@ -71,5 +70,7 @@ 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;