9 months ago · eb88a87f2f
--- a/.env
+++ b/.env
@@ -0,0 +1,2 @@
 
															+VITE_API_HOST = 'http://localhost/api'
														
 
															+VITE_BASE_URL = '/k_new_online/'
														
--- a/.env.development
+++ b/.env.development
@@ -0,0 +1,2 @@
 
															+VITE_API_HOST = 'http://192.168.0.161/Customer_Service_Online'
														
 
															+VITE_BASE_URL = '/k_new_online/'
														
--- a/.env.product
+++ b/.env.product
@@ -0,0 +1,2 @@
 
															+VITE_API_HOST = '/online_backend'
														
 
															+VITE_BASE_URL = '/'
														
--- a/.env.test
+++ b/.env.test
@@ -0,0 +1,2 @@
 
															+VITE_API_HOST = 'https://ra.kerryapex.com/new/online_backend'
														
 
															+VITE_BASE_URL = '/new/'
														
--- a/.gitignore
+++ b/.gitignore
@@ -16,6 +16,7 @@ coverage
 
															 components.d.ts
														
 
															 package-lock.json
														
 
															 pnpm-lock.yaml
														
 
															+auto-imports.d.ts
														
 
															 /cypress/videos/
														
 
															 /cypress/screenshots/
														
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -5,4 +5,4 @@
 
															   "singleQuote": true,
														
 
															   "printWidth": 100,
														
 
															   "trailingComma": "none"
														
 
															-}
														
 
															+}
														
--- a/index.html
+++ b/index.html
@@ -4,7 +4,10 @@
 
															     <meta charset="UTF-8" />
														
 
															     <link rel="icon" href="/favicon.ico" />
														
 
															     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
														
 
															-    <title>online</title>
														
 
															+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
														
 
															+    <meta http-equiv="Pragma" content="no-cache" />
														
 
															+    <meta http-equiv="Expires" content="0" />
														
 
															+    <title>KLN Online Tracking</title>
														
 
															   </head>
														
 
															   <body>
														
 
															     <div id="app"></div>
														
--- a/package.json
+++ b/package.json
@@ -5,43 +5,56 @@
 
															   "type": "module",
														
 
															   "scripts": {
														
 
															     "dev": "vite",
														
 
															+    "dev:test": "vite --host --mode test",
														
 
															+    "dev:dev": "vite --host --mode development",
														
 
															     "build": "run-p type-check \"build-only {@}\" --",
														
 
															     "preview": "vite preview",
														
 
															     "build-only": "vite build",
														
 
															+    "build:dev": "vite build --mode development",
														
 
															+    "build:test": "vite build --mode test",
														
 
															+    "build:pro": "vite build --mode product",
														
 
															     "type-check": "vue-tsc --build --force",
														
 
															     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
														
 
															     "format": "prettier --write src/"
														
 
															   },
														
 
															   "dependencies": {
														
 
															     "@element-plus/icons-vue": "^2.3.1",
														
 
															+    "@turf/turf": "^7.1.0",
														
 
															     "@wangeditor/editor": "^5.1.23",
														
 
															     "@wangeditor/editor-for-vue": "^5.1.12",
														
 
															     "ant-design-vue": "^4.2.3",
														
 
															     "axios": "^1.7.5",
														
 
															+    "crypto-js": "^4.2.0",
														
 
															     "dayjs": "^1.11.13",
														
 
															+    "decimal.js": "^10.4.3",
														
 
															     "echarts": "^5.5.1",
														
 
															     "element-plus": "^2.8.1",
														
 
															     "exceljs": "^4.4.0",
														
 
															-    "js-md5": "^0.8.3",
														
 
															+    "leaflet": "^1.9.4",
														
 
															     "lodash": "^4.17.21",
														
 
															     "mitt": "^3.0.1",
														
 
															     "moment": "^2.30.1",
														
 
															+    "moment-timezone": "^0.5.46",
														
 
															     "pinia": "^2.2.2",
														
 
															+    "sass-loader": "^16.0.2",
														
 
															     "vue": "^3.4.29",
														
 
															     "vue-draggable-plus": "^0.5.3",
														
 
															     "vue-router": "^4.3.3",
														
 
															+    "vue3-puzzle-vcode": "^1.1.7",
														
 
															     "vuedraggable": "^2.24.3",
														
 
															     "vxe-pc-ui": "^4.1.7",
														
 
															     "vxe-table": "^4.7.70",
														
 
															     "vxe-table-plugin-export-xlsx": "^4.0.5",
														
 
															-    "xe-clipboard": "^1.10.2"
														
 
															+    "xe-clipboard": "^1.10.2",
														
 
															+    "xlsx": "^0.18.5"
														
 
															   },
														
 
															   "devDependencies": {
														
 
															     "@rushstack/eslint-patch": "^1.8.0",
														
 
															     "@tsconfig/node20": "^20.1.4",
														
 
															+    "@types/leaflet": "^1.9.12",
														
 
															     "@types/lodash": "^4.17.7",
														
 
															     "@types/node": "^20.14.5",
														
 
															-    "@vitejs/plugin-vue": "^5.0.5",
														
 
															+    "@vitejs/plugin-vue": "^5.1.4",
														
 
															     "@vue/eslint-config-prettier": "^9.0.0",
														
 
															     "@vue/eslint-config-typescript": "^13.0.0",
														
 
															     "@vue/tsconfig": "^0.5.1",
														
@@ -52,10 +65,10 @@
 
															     "postcss": "^8.4.41",
														
 
															     "postcss-loader": "^8.1.1",
														
 
															     "prettier": "^3.2.5",
														
 
															-    "sass": "^1.77.8",
														
 
															+    "sass": "^1.79.4",
														
 
															     "typescript": "~5.4.0",
														
 
															     "unplugin-auto-import": "^0.18.2",
														
 
															-    "unplugin-icons": "^0.19.2",
														
 
															+    "unplugin-icons": "^0.19.3",
														
 
															     "unplugin-vue-components": "^0.27.4",
														
 
															     "vite": "^5.3.1",
														
 
															     "vue-tsc": "^2.0.21"
														
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,5 @@
 
															 <script setup lang="ts">
														
 
															-import { RouterLink, RouterView } from 'vue-router'
														
 
															-import HelloWorld from './components/HelloWorld.vue'
														
 
															+import { RouterView } from 'vue-router'
														
 
															 </script>
														
 
															 <template>
														
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -1,6 +1,8 @@
 
															 import * as booking from './module/booking'
														
 
															 import * as tracking from './module/tracking'
														
 
															 import * as common from './module/common'
														
 
															+import * as login from './module/login'
														
 
															+import * as other from './module/other'
														
 
															 /**
														
 
															  * api 对象接口定义
														
 
															  */
														
@@ -15,7 +17,9 @@ function generateApiMap(maps: any) {
 
															 const apis = generateApiMap({
														
 
															   ...booking,
														
 
															   ...tracking,
														
 
															-  ...common
														
 
															+  ...common,
														
 
															+  ...login,
														
 
															+  ...other
														
 
															 })
														
 
															 export default {
														
 
															   ...apis // 取出所有可遍历属性赋值在新的对象上
														
--- a/src/api/module/booking.ts
+++ b/src/api/module/booking.ts
@@ -1,6 +1,7 @@
 
															 import HttpAxios from '@/utils/axios'
														
 
															-const baseUrl = 'http://localhost/api/Customer_Service_Online/main_new_version.php'
														
 
															+const base = import.meta.env.VITE_API_HOST
														
 
															+const baseUrl = `${base}/main_new_version.php`
														
 
															 /**
														
 
															  * Booking首页表格列数据
														
@@ -41,7 +42,6 @@ export const getBookingDetail = (params: any, config: any) => {
 
															     {
														
 
															       action: 'ocean_booking',
														
 
															       operate: 'detail',
														
 
															-      _schemas: 'public',
														
 
															       ...params
														
 
															     },
														
 
															     config
														
@@ -51,11 +51,10 @@ export const getBookingDetail = (params: any, config: any) => {
 
															 /**
														
 
															  * 获取Booking详情页发送邮件
														
 
															  */
														
 
															-export const bookingSendEmail = (params: any, config: any) => {
														
 
															+export const sendEmailApi = (params: any, config: any) => {
														
 
															   return HttpAxios.post(
														
 
															     `${baseUrl}`,
														
 
															     {
														
 
															-      action: 'ocean_booking',
														
 
															       operate: 'save_communication',
														
 
															       ...params
														
 
															     },
														
@@ -90,3 +89,18 @@ export const getMoreFiltersTableData = (params: any, config: any) => {
 
															     config
														
 
															   )
														
 
															 }
														
 
															+
														
 
															+/**
														
 
															+ * 用户下载表格时获取所有数据
														
 
															+ */
														
 
															+export const getAllBookingTableData = (params: any, config: any) => {
														
 
															+  return HttpAxios.post(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'ocean_booking',
														
 
															+      operate: 'excel',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
--- a/src/api/module/common.ts
+++ b/src/api/module/common.ts
@@ -1,6 +1,7 @@
 
															 import HttpAxios from '@/utils/axios'
														
 
															-const baseUrl = 'http://localhost/api/Customer_Service_Online/main_new_version.php'
														
 
															+const base = import.meta.env.VITE_API_HOST
														
 
															+const baseUrl = `${base}/main_new_version.php`
														
 
															 /**
														
 
															  * 获取表格定制列功能数据
														
@@ -24,3 +25,248 @@ export const saveTableSettingColumns = (params: any, config: any) => {
 
															     config
														
 
															   )
														
 
															 }
														
 
															+
														
 
															+/**
														
 
															+ * 修改密码
														
 
															+ */
														
 
															+export const changePwdByLogin = (params: any, config: any) => {
														
 
															+  return HttpAxios.post(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'password',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+
														
 
															+/**
														
 
															+ * 获取菜单列表
														
 
															+ */
														
 
															+export const getMenuList = (params: any, config: any) => {
														
 
															+  return HttpAxios.get(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'main',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+
														
 
															+/**
														
 
															+ * 获取日志列
														
 
															+ */
														
 
															+export const getOperationTableColumns = (params: any, config: any) => {
														
 
															+  return HttpAxios.get(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'opreation_log'
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+/**
														
 
															+ * 查询日志
														
 
															+ */
														
 
															+export const SearchOperationLog = (params: any, config: any) => {
														
 
															+  return HttpAxios.post(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'opreation_log',
														
 
															+      operate: 'search',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+/**
														
 
															+ * 日志表格下载
														
 
															+ */
														
 
															+export const OperationLogDownload = (params: any, config: any) => {
														
 
															+  return HttpAxios.post(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'opreation_log',
														
 
															+      operate: 'excel',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+/**
														
 
															+ * 获取首页数据
														
 
															+ */
														
 
															+export const GetDashboardData = (params: any, config: any) => {
														
 
															+  return HttpAxios.post(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'main_welcome',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+/**
														
 
															+ * 获取ETD to ETA (Days)
														
 
															+ */
														
 
															+export const GetETDEcharts = (params: any, config: any) => {
														
 
															+  return HttpAxios.get(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'main_report_etd',
														
 
															+      r_type: 'r1',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+/**
														
 
															+ * 获取KPI Echarts
														
 
															+ */
														
 
															+export const GetKPIEcharts = (params: any, config: any) => {
														
 
															+  return HttpAxios.get(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'main_report_kpi',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+/**
														
 
															+ * 获取Pending Echarts
														
 
															+ */
														
 
															+export const GetPendingEcharts = (params: any, config: any) => {
														
 
															+  return HttpAxios.get(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'main_report',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+/**
														
 
															+ * 获取ContainerCount Echarts
														
 
															+ */
														
 
															+export const GetContainerCountEcharts = (params: any, config: any) => {
														
 
															+  return HttpAxios.get(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'main_report_container_bar',
														
 
															+      r_type: 'r2',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+/**
														
 
															+ * 获取CO2 Emission
														
 
															+ */
														
 
															+export const GetCo2EmissionEcharts = (params: any, config: any) => {
														
 
															+  return HttpAxios.get(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'main_report_co2e_bar',
														
 
															+      r_type: 'co2e_orgin',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+/**
														
 
															+ * 获取CO2 Destination
														
 
															+ */
														
 
															+export const GetCo2DestinationEcharts = (params: any, config: any) => {
														
 
															+  return HttpAxios.get(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'main_report_co2e_bar',
														
 
															+      r_type: 'co2e_destination',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+/**
														
 
															+ * Top10 Origin/Destination
														
 
															+ */
														
 
															+export const GetTop10ODEcharts = (params: any, config: any) => {
														
 
															+  return HttpAxios.get(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'main_report_top10_bar',
														
 
															+      r_type: 'top',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+/**
														
 
															+ * Revenue Spent
														
 
															+ */
														
 
															+export const GetRevenueEcharts = (params: any, config: any) => {
														
 
															+  return HttpAxios.get(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'main_report_revenue',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+/**
														
 
															+ * Save Layout
														
 
															+ */
														
 
															+export const SaveLayout = (params: any, config: any) => {
														
 
															+  return HttpAxios.post(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'save_layout',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+/**
														
 
															+ * 评分提交
														
 
															+ */
														
 
															+export const scoringgrade = (params: any, config: any) => {
														
 
															+  return HttpAxios.post(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'tools',
														
 
															+      operate: 'mark_save',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+/**
														
 
															+ * 获取首页筛选条件
														
 
															+ */
														
 
															+export const getDashboardFilters = (config: any) => {
														
 
															+  return HttpAxios.get(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'main_filter',
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+
														
 
															+/**
														
 
															+ * 获取首页筛选条件
														
 
															+ */
														
 
															+export const RevenueDownload = (params:any,config: any) => {
														
 
															+  return HttpAxios.get(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'ocean_order',
														
 
															+      operate: 'revenue',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
--- a/src/api/module/login.ts
+++ b/src/api/module/login.ts
@@ -0,0 +1,122 @@
 
															+import HttpAxios from '@/utils/axios'
														
 
															+
														
 
															+const base = import.meta.env.VITE_API_HOST
														
 
															+const baseUrl = `${base}/login.php`
														
 
															+
														
 
															+/**
														
 
															+ * 获取验证码
														
 
															+ */
														
 
															+export const getVerifcationCode = (params: any, config: any) => {
														
 
															+  return HttpAxios.get(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'login',
														
 
															+      operate: 'verifcation_code',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+
														
 
															+/**
														
 
															+ * 验证用户名是否存在
														
 
															+ */
														
 
															+export const isUserNameExit = (params: any, config: any) => {
														
 
															+  return HttpAxios.post(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'login',
														
 
															+      operate: 'check_uname',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+
														
 
															+/**
														
 
															+ * 登录
														
 
															+ */
														
 
															+export const login = (params: any, config: any) => {
														
 
															+  return HttpAxios.post(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'login',
														
 
															+      operate: 'do_login',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+
														
 
															+// 退出登录
														
 
															+export const logout = (params: any, config: any) => {
														
 
															+  return HttpAxios.post(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'login',
														
 
															+      operate: 'logout',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+
														
 
															+/**
														
 
															+ * 忘记密码
														
 
															+ */
														
 
															+export const forgotPassword = (params: any, config: any) => {
														
 
															+  return HttpAxios.post(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'login',
														
 
															+      operate: 'forgot_password',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+
														
 
															+/**
														
 
															+ * 更新密码
														
 
															+ */
														
 
															+export const changePassword = (params: any, config: any) => {
														
 
															+  return HttpAxios.post(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'login',
														
 
															+      operate: 'update_pwd_expires',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+
														
 
															+/**
														
 
															+ * 获取public tracking detail详情数据
														
 
															+ */
														
 
															+export const getPublicTrackingDetail = (params: any, config: any) => {
														
 
															+  return HttpAxios.post(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'login',
														
 
															+      operate: 'tracking_checked',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+
														
 
															+/**
														
 
															+ * reset password
														
 
															+ */
														
 
															+export const resetPwd = (params: any, config: any) => {
														
 
															+  return HttpAxios.post(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'login',
														
 
															+      operate: 'update_pwd_expires',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
--- a/src/api/module/other.ts
+++ b/src/api/module/other.ts
@@ -0,0 +1,15 @@
 
															+import axios from 'axios'
														
 
															+
														
 
															+const base = import.meta.env.VITE_API_HOST
														
 
															+const baseUrl = `${base}/main_new_version.php`
														
 
															+/**
														
 
															+ * user guide
														
 
															+ */
														
 
															+export const getUserGuide = () => {
														
 
															+  return axios.get(baseUrl, {
														
 
															+    params: {
														
 
															+      action: 'user_guide'
														
 
															+    },
														
 
															+    responseType: 'blob'
														
 
															+  })
														
 
															+}
														
--- a/src/api/module/tracking.ts
+++ b/src/api/module/tracking.ts
@@ -1,6 +1,7 @@
 
															 import HttpAxios from '@/utils/axios'
														
 
															-const baseUrl = 'http://localhost/api/Customer_Service_Online/main_new_version.php'
														
 
															+const base = import.meta.env.VITE_API_HOST
														
 
															+const baseUrl = `${base}/main_new_version.php`
														
 
															 /**
														
 
															  * Tracking首页表格列数据
														
@@ -47,3 +48,122 @@ export const getTrackingDetail = (params: any, config: any) => {
 
															     config
														
 
															   )
														
 
															 }
														
 
															+
														
 
															+/**
														
 
															+ * 获取Tracking详情页中地图数据
														
 
															+ */
														
 
															+export const getTrackingDetailMapData = (params: any, config: any) => {
														
 
															+  return HttpAxios.get(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'main_map_new',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+
														
 
															+/**
														
 
															+ * 获取Tracking详情页中AMS/ISF表格数据
														
 
															+ */
														
 
															+export const getTrackingAmsIsf = (params: any, config: any) => {
														
 
															+  return HttpAxios.get(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'ocean_order',
														
 
															+      operate: 'ams_isf_log',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+
														
 
															+/**
														
 
															+ * 获取add vgm页面数据
														
 
															+ */
														
 
															+export const getVGMData = (params: any, config: any) => {
														
 
															+  return HttpAxios.get(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'ocean_order',
														
 
															+      operate: 'ocean_vgm',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+
														
 
															+/**
														
 
															+ * 保存 vgm页面数据
														
 
															+ */
														
 
															+export const saveVGMData = (params: any, config: any) => {
														
 
															+  return HttpAxios.post(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'ocean_order',
														
 
															+      operate: 'save_ocean_vgm',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+
														
 
															+/**
														
 
															+ * 用户下载表格时获取所有数据
														
 
															+ */
														
 
															+export const getAllTrackingTableData = (params: any, config: any) => {
														
 
															+  return HttpAxios.post(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'ocean_order',
														
 
															+      operate: 'excel',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+
														
 
															+/**
														
 
															+ * 用户点击分享链接后请求接口留下记录
														
 
															+ */
														
 
															+export const recordShareLinkClicked = (params: any, config: any) => {
														
 
															+  return HttpAxios.post(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'ocean_order',
														
 
															+      operate: 'share_shipment',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+
														
 
															+/**
														
 
															+ * 获取文件上传的类型
														
 
															+ */
														
 
															+export const getUploadType = (params: any, config: any) => {
														
 
															+  return HttpAxios.post(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'ocean_order',
														
 
															+      operate: 'document_upload',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
 
															+
														
 
															+/**
														
 
															+ * 上传文件
														
 
															+ */
														
 
															+export const uploadFile = (params: any, config: any) => {
														
 
															+  return HttpAxios.post(
														
 
															+    `${baseUrl}`,
														
 
															+    {
														
 
															+      action: 'ocean_order',
														
 
															+      operate: 'document_upload_do',
														
 
															+      ...params
														
 
															+    },
														
 
															+    config
														
 
															+  )
														
 
															+}
														
--- a/src/assets/main.css
+++ b/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;
														
 
															 }
														
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -3,6 +3,7 @@
 
															 // @ts-nocheck
														
 
															 // noinspection JSUnusedGlobalSymbols
														
 
															 // Generated by unplugin-auto-import
														
 
															+// biome-ignore lint: disable
														
 
															 export {}
														
 
															 declare global {
														
 
															   const $api: typeof import('@/api/index')['default']
														
@@ -38,6 +39,7 @@ declare global {
 
															   const onServerPrefetch: typeof import('vue')['onServerPrefetch']
														
 
															   const onUnmounted: typeof import('vue')['onUnmounted']
														
 
															   const onUpdated: typeof import('vue')['onUpdated']
														
 
															+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
														
 
															   const provide: typeof import('vue')['provide']
														
 
															   const reactive: typeof import('vue')['reactive']
														
 
															   const readonly: typeof import('vue')['readonly']
														
@@ -55,7 +57,10 @@ declare global {
 
															   const useAttrs: typeof import('vue')['useAttrs']
														
 
															   const useCssModule: typeof import('vue')['useCssModule']
														
 
															   const useCssVars: typeof import('vue')['useCssVars']
														
 
															+  const useId: typeof import('vue')['useId']
														
 
															+  const useModel: typeof import('vue')['useModel']
														
 
															   const useSlots: typeof import('vue')['useSlots']
														
 
															+  const useTemplateRef: typeof import('vue')['useTemplateRef']
														
 
															   const watch: typeof import('vue')['watch']
														
 
															   const watchEffect: typeof import('vue')['watchEffect']
														
 
															   const watchPostEffect: typeof import('vue')['watchPostEffect']
														
@@ -64,6 +69,6 @@ declare global {
 
															 // for type re-export
														
 
															 declare global {
														
 
															   // @ts-ignore
														
 
															-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
														
 
															+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
														
 
															   import('vue')
														
 
															 }
														
--- a/src/components/AutoComplete/src/AutoComplete.vue
+++ b/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>
														
--- a/src/components/AutoSelect/src/AutoSelect.vue
+++ b/src/components/AutoSelect/src/AutoSelect.vue
@@ -13,6 +13,15 @@ const props = defineProps({
 
															   },
														
 
															   ASType: {
														
 
															     type: String
														
 
															+  },
														
 
															+  ASSearchFiled: {
														
 
															+    type: String
														
 
															+  },
														
 
															+  ASSearchMode: {
														
 
															+    type: String
														
 
															+  },
														
 
															+  ASSearchObj: {
														
 
															+    type: Object
														
 
															   }
														
 
															 })
														
@@ -25,6 +34,9 @@ const list = ref<ListItem[]>([])
 
															 const options = ref<ListItem[]>([])
														
 
															 const value = ref(props.ASValue)
														
 
															 const type = ref(props.ASType)
														
 
															+const search_field = ref(props.ASSearchFiled)
														
 
															+const search_mode = ref(props.ASSearchMode)
														
 
															+const MoreFiltersObj = ref(props.ASSearchObj)
														
 
															 const loading = ref(false)
														
 
															 watch(
														
 
															   () => props.ASValue,
														
@@ -32,6 +44,12 @@ watch(
 
															     value.value = current
														
 
															   }
														
 
															 )
														
 
															+watch(
														
 
															+  () => props.ASSearchObj,
														
 
															+  (current) => {
														
 
															+    MoreFiltersObj.value = current
														
 
															+  }
														
 
															+)
														
 
															 const remoteMethod = (query: string) => {
														
 
															   if (query) {
														
 
															     loading.value = true
														
@@ -39,10 +57,12 @@ const remoteMethod = (query: string) => {
 
															       $api
														
 
															         .getMoreFiltersData({
														
 
															           term: query,
														
 
															-          type: type.value
														
 
															+          type: type.value,
														
 
															+          search_field: search_field.value,
														
 
															+          search_mode: search_mode.value,
														
 
															+          ...MoreFiltersObj.value
														
 
															         })
														
 
															         .then((res: any) => {
														
 
															-          console.log(res)
														
 
															           loading.value = false
														
 
															           if (res.code == 200) {
														
 
															             list.value = res.data.map((item: any) => {
														
--- a/src/components/ContainerStatus/src/ContainerStatus.vue
+++ b/src/components/ContainerStatus/src/ContainerStatus.vue
@@ -1,42 +1,29 @@
 
															 <script setup lang="ts">
														
 
															-import dayjs from 'dayjs'
														
 
															+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
														
 
															 })
														
 
															-const containerStatusData: any = ref([
														
 
															-  {
														
 
															-    title: 'Empty Equipment Dispatched',
														
 
															-    date: 'May-31-2024 10:03(GMT+02)',
														
 
															-    country: 'CN,SHK'
														
 
															-  },
														
 
															-  {
														
 
															-    title: 'In-Gate',
														
 
															-    date: 'May-31-2024 10:03(GMT+02)',
														
 
															-    country: 'CN,SHK'
														
 
															-  },
														
 
															-  {
														
 
															-    title: 'Loaded On Vessel',
														
 
															-    date: 'Jun-05-2024 10:03(GMT+02)',
														
 
															-    country: 'CN,SHK'
														
 
															-  },
														
 
															-  {
														
 
															-    title: 'Vessel Departure',
														
 
															-    date: 'Jun-06-2024 10:03(GMT+02)',
														
 
															-    country: 'CN,SHK'
														
 
															-  },
														
 
															-  {
														
 
															-    title: 'Vessel Arrival',
														
 
															-    date: 'Jun-07-2024 14:00(GMT+02)',
														
 
															-    country: 'ES,BCN'
														
 
															-  }
														
 
															-])
														
 
															+const activeNames = ref<number[]>([])
														
 
															+
														
 
															+const containerStatusData: any = ref([])
														
 
															 watch(
														
 
															   () => props.data,
														
 
															   (newVal) => {
														
 
															     if (newVal) {
														
 
															-      containerStatusData.value = newVal[0].content
														
 
															+      containerStatusData.value = newVal
														
 
															+      if (containerStatusData.value.length === 1) {
														
 
															+        activeNames.value = [0]
														
 
															+      }
														
 
															     } else {
														
 
															       containerStatusData.value = []
														
 
															     }
														
@@ -46,80 +33,158 @@ watch(
 
															     deep: true
														
 
															   }
														
 
															 )
														
 
															-
														
 
															-const formatDate = (date: string) => {
														
 
															-  return date ? dayjs(date).format('MMM-DD-YYYY HH:mm [(GMT]Z[)]') : '--'
														
 
															-}
														
 
															 </script>
														
 
															 <template>
														
 
															   <div class="container-status">
														
 
															-    <div class="step-item" v-for="(item, index) in containerStatusData" :key="item.title">
														
 
															-      <div class="step-data">
														
 
															-        <div class="step-dot-icon"></div>
														
 
															-        <div class="info">
														
 
															-          <div class="left-info">
														
 
															-            <div class="title">{{ item.title }}</div>
														
 
															-            <div class="date">{{ formatDate(item.date) }}</div>
														
 
															+    <el-collapse class="container" v-if="containerStatusData.length !== 0" v-model="activeNames">
														
 
															+      <el-collapse-item
														
 
															+        :title="containers.label"
														
 
															+        v-for="(containers, name) in containerStatusData"
														
 
															+        :key="name"
														
 
															+        :name="name"
														
 
															+      >
														
 
															+        <template #title>
														
 
															+          <div class="title">
														
 
															+            Container <span>{{ containers.label }}</span>
														
 
															           </div>
														
 
															-          <div class="right-country">{{ item.country }}</div>
														
 
															+        </template>
														
 
															+        <div class="step-item" v-for="(item, index) in containers.content" :key="item.title">
														
 
															+          <div class="step-data">
														
 
															+            <div class="step-dot-icon"></div>
														
 
															+            <div class="info">
														
 
															+              <div class="left-info">
														
 
															+                <div class="title">{{ item.title }}</div>
														
 
															+                <div class="date">{{ formatTimezone(item.date, item.timezone) }}</div>
														
 
															+              </div>
														
 
															+              <div class="right-country">{{ item.country }}</div>
														
 
															+            </div>
														
 
															+          </div>
														
 
															+          <div class="line" v-if="index + 1 !== containers.content.length"></div>
														
 
															         </div>
														
 
															-      </div>
														
 
															-      <div class="line" v-if="index + 1 !== containerStatusData.length"></div>
														
 
															+      </el-collapse-item>
														
 
															+    </el-collapse>
														
 
															+    <div v-else class="empty-content" style="">
														
 
															+      <img :src="emptyImg" :class="{ 'is-dark': themeStore.theme === 'dark' }" alt="empty" />
														
 
															+      <div class="empty-text" style="">No data</div>
														
 
															+    </div>
														
 
															+    <div class="footer">
														
 
															+      Tracking on carrier website:
														
 
															+      <a href="http://www.rcjgroup.com/" target="_blank" class="link">http://www.rcjgroup.com/</a>
														
 
															     </div>
														
 
															   </div>
														
 
															 </template>
														
 
															 <style lang="scss" scoped>
														
 
															 .container-status {
														
 
															+  position: relative;
														
 
															   width: 100%;
														
 
															-  padding: 22px 0 22px;
														
 
															-}
														
 
															+  height: 100%;
														
 
															+  overflow: auto;
														
 
															+  .container {
														
 
															+    height: 358px;
														
 
															+    padding-bottom: 8px;
														
 
															+    overflow: auto;
														
 
															+  }
														
 
															+  .empty-content {
														
 
															+    display: flex;
														
 
															+    flex-direction: column;
														
 
															+    align-items: center;
														
 
															+    height: 358px;
														
 
															+    padding-top: 140px;
														
 
															-.step-data {
														
 
															-  display: flex;
														
 
															-  gap: 8px;
														
 
															-  height: 8px;
														
 
															-  width: 100%;
														
 
															-  .step-dot-icon {
														
 
															-    height: 8px;
														
 
															-    width: 8px;
														
 
															-    background-color: var(--color-neutral-1);
														
 
															-    border-radius: 50%;
														
 
															+    .empty-text {
														
 
															+      margin-top: 8px;
														
 
															+      color: #b5b9bf;
														
 
															+    }
														
 
															   }
														
 
															-  .info {
														
 
															-    flex: 1;
														
 
															+  .footer {
														
 
															+    line-height: 38px;
														
 
															+    color: #999;
														
 
															+    font-size: 12px;
														
 
															+    text-align: center;
														
 
															+    border-top: 1px solid var(--color-border);
														
 
															+    overflow: hidden;
														
 
															+    .link {
														
 
															+      text-decoration: none;
														
 
															+      color: var(--color-theme);
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
 
															+<style lang="scss">
														
 
															+.container-status {
														
 
															+  .el-collapse {
														
 
															+    height: auto;
														
 
															+    border-bottom: 0;
														
 
															+  }
														
 
															+  .el-collapse-item__content {
														
 
															+    padding: 30px 16px 38px;
														
 
															+    border-top: 1px solid var(--color-border);
														
 
															+  }
														
 
															+  .el-collapse-item__header {
														
 
															+    height: 40px;
														
 
															+    padding-left: 16px;
														
 
															+    padding-right: 8px;
														
 
															+    line-height: 50px;
														
 
															+    & > .title {
														
 
															+      font-size: 16px;
														
 
															+      color: var(--color-neutral-2);
														
 
															+      span {
														
 
															+        margin-left: 4px;
														
 
															+        font-weight: 700;
														
 
															+        color: var(--color-neutral-1);
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															+  .step-data {
														
 
															     display: flex;
														
 
															-    height: 52px;
														
 
															-    margin-top: -22px;
														
 
															-    background-color: var(--color-table-header-bg);
														
 
															-    border: 1px solid var(--color-border);
														
 
															-    border-radius: 6px;
														
 
															-    color: var(--color-neutral-1);
														
 
															-    .left-info {
														
 
															+    gap: 8px;
														
 
															+    height: 8px;
														
 
															+    width: 100%;
														
 
															+    .step-dot-icon {
														
 
															+      height: 8px;
														
 
															+      width: 8px;
														
 
															+      background-color: var(--color-neutral-1);
														
 
															+      border-radius: 50%;
														
 
															+    }
														
 
															+    .info {
														
 
															       flex: 1;
														
 
															-      padding: 8px 10px;
														
 
															-      border-right: 1px solid var(--color-border);
														
 
															-      .title {
														
 
															-        font-size: 14px;
														
 
															-        font-weight: 700;
														
 
															+      display: flex;
														
 
															+      height: 52px;
														
 
															+      margin-top: -22px;
														
 
															+      background-color: var(--color-container-status-node-bg);
														
 
															+      border: 1px solid var(--color-border);
														
 
															+      border-radius: 6px;
														
 
															+      color: var(--color-neutral-1);
														
 
															+      .left-info {
														
 
															+        flex: 1;
														
 
															+        display: flex;
														
 
															+        flex-direction: column;
														
 
															+        padding: 8px 10px;
														
 
															+        border-right: 1px solid var(--color-border);
														
 
															+        .title {
														
 
															+          font-size: 14px;
														
 
															+          line-height: 18px;
														
 
															+          font-weight: 700;
														
 
															+        }
														
 
															+        .date {
														
 
															+          font-size: 12px;
														
 
															+        }
														
 
															       }
														
 
															-      .date {
														
 
															-        margin-top: 4px;
														
 
															-        font-size: 12px;
														
 
															+      .right-country {
														
 
															+        width: 94px;
														
 
															+        padding: 0 24px;
														
 
															+        line-height: 52px;
														
 
															+        font-weight: 700;
														
 
															       }
														
 
															     }
														
 
															-    .right-country {
														
 
															-      padding: 0 24px;
														
 
															-      line-height: 52px;
														
 
															-      font-weight: 700;
														
 
															-    }
														
 
															   }
														
 
															-}
														
 
															-.line {
														
 
															-  height: 60px;
														
 
															-  width: 0;
														
 
															-  margin-left: 3px;
														
 
															-  border-left: 1px solid var(--color-neutral-1);
														
 
															+  .line {
														
 
															+    height: 60px;
														
 
															+    width: 0;
														
 
															+    margin-left: 3px;
														
 
															+    border-left: 1px solid var(--color-neutral-1);
														
 
															+  }
														
 
															 }
														
 
															 </style>
														
--- a/src/components/ContainerStatus/src/image/no_data.png
+++ b/src/components/ContainerStatus/src/image/no_data.png
--- a/src/components/ContainerStatus/src/image/no_data_dark.png
+++ b/src/components/ContainerStatus/src/image/no_data_dark.png
--- a/src/components/CustomizeColumns/src/CustomizeColumns.vue
+++ b/src/components/CustomizeColumns/src/CustomizeColumns.vue
@@ -1,6 +1,8 @@
 
															 <script setup lang="ts">
														
 
															 import { VueDraggable } from 'vue-draggable-plus'
														
 
															+import { useRoute } from 'vue-router'
														
 
															+const route = useRoute()
														
 
															 const dialogVisible = ref(false)
														
 
															 // search筛选的字段
														
 
															 const searchColumn = ref('')
														
@@ -105,13 +107,21 @@ const scrollToItem = (itemId: string) => {
 
															 }
														
 
															 // 系统首次加载时，会有引导操作
														
 
															-let firstLoad = localStorage.getItem('firstLoadCustomizeColumns')
														
 
															+let firstLoad = ref()
														
 
															 const step1 = ref()
														
 
															 const open1 = ref(false)
														
 
															+const isShowStep1 = ref(false)
														
 
															 const step2 = ref()
														
 
															 const open2 = ref(false)
														
 
															+const isShowStep2 = ref(false)
														
 
															 const handleCloseTour = (stepStr: string) => {
														
 
															-  stepStr === 'step1' ? (open1.value = false) : (open2.value = false)
														
 
															+  if (stepStr === 'step1') {
														
 
															+    isShowStep1.value = false
														
 
															+    open1.value = false
														
 
															+  } else {
														
 
															+    isShowStep2.value = false
														
 
															+    open2.value = false
														
 
															+  }
														
 
															   localStorage.setItem('firstLoadCustomizeColumns', 'true')
														
 
															   // firstLoad = 'true'
														
 
															 }
														
@@ -142,6 +152,13 @@ const getData = async (reset?: string) => {
 
															       selectColumns.value = res.data.GroupColumnsRight
														
 
															       nextTick(() => {
														
 
															         handleTabArrow()
														
 
															+        // 八秒后关闭引导
														
 
															+        if (!firstLoad.value) {
														
 
															+          setTimeout(() => {
														
 
															+            handleCloseTour('step1')
														
 
															+            handleCloseTour('step2')
														
 
															+          }, 8000)
														
 
															+        }
														
 
															       })
														
 
															     }
														
 
															   })
														
@@ -151,14 +168,17 @@ const getData = async (reset?: string) => {
 
															 const params = ref()
														
 
															 // rightDistance是右侧箭头消失所需要translateX的值
														
 
															 const openDialog = async (paramsData: Object, rightDistance: number) => {
														
 
															+  firstLoad.value = localStorage.getItem('firstLoadCustomizeColumns')
														
 
															   params.value = paramsData
														
 
															   dialogVisible.value = true
														
 
															   await getData()
														
 
															   rightArrowHideDistance.value = rightDistance
														
 
															   nextTick(() => {
														
 
															-    if (!firstLoad) {
														
 
															+    if (!firstLoad.value) {
														
 
															       open1.value = true
														
 
															+      isShowStep1.value = true
														
 
															       open2.value = true
														
 
															+      isShowStep2.value = true
														
 
															     }
														
 
															   })
														
 
															 }
														
@@ -329,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"
														
@@ -346,8 +362,8 @@ defineExpose({
 
															       <div class="tips">
														
 
															         <span style="font-size: 16px">* </span>
														
 
															         <span
														
 
															-          >Drag item over to this selection or click "add" icon to show the column on your booking
														
 
															-          list</span
														
 
															+          >Drag item over to this selection or click "add" icon to show the column on your
														
 
															+          {{ route.path.includes('booking') ? 'booking' : 'shipment' }} list</span
														
 
															         >
														
 
															       </div>
														
 
															     </div>
														
@@ -364,7 +380,6 @@ defineExpose({
 
															               <VueDraggable
														
 
															                 v-model="groupItem.children"
														
 
															                 class="column-list"
														
 
															-                :sort="false"
														
 
															                 ghost-class="ghost-column"
														
 
															                 :forceFallback="true"
														
 
															                 fallbackClass="fallback-class"
														
@@ -383,7 +398,7 @@ defineExpose({
 
															                     <span class="title">{{ item.label }}</span>
														
 
															                     <span
														
 
															                       ref="step1"
														
 
															-                      v-if="hoverAllIcon === item.field || (index === 0 && !firstLoad)"
														
 
															+                      v-if="hoverAllIcon === item.field || (index === 0 && isShowStep1)"
														
 
															                       class="font_family icon-icon_add_b move-icon"
														
 
															                       @click="handleAddSelect(item)"
														
 
															                     ></span>
														
@@ -395,7 +410,10 @@ defineExpose({
 
															         </div>
														
 
															       </div>
														
 
															       <div class="right-select-columns">
														
 
															-        <div class="title">Selected columns on your booking list</div>
														
 
															+        <div class="title">
														
 
															+          Selected columns on your
														
 
															+          {{ route.path.includes('booking') ? 'booking' : 'shipment' }} list
														
 
															+        </div>
														
 
															         <VueDraggable
														
 
															           v-vloading="loading"
														
 
															           v-model="selectColumns"
														
@@ -419,18 +437,18 @@ defineExpose({
 
															               ></span>
														
 
															               <span class="title">{{ item.label }}</span>
														
 
															               <span
														
 
															-                v-if="hoverSelectIcon === item.field || (index === 0 && !firstLoad)"
														
 
															+                v-if="hoverSelectIcon === item.field || (index === 0 && isShowStep2)"
														
 
															                 class="font_family icon-icon_moveup_b move-icon"
														
 
															                 @click="handleMoveUpSelect(item)"
														
 
															               ></span>
														
 
															               <span
														
 
															-                v-if="hoverSelectIcon === item.field || (index === 0 && !firstLoad)"
														
 
															+                v-if="hoverSelectIcon === item.field || (index === 0 && isShowStep2)"
														
 
															                 class="font_family icon-icon_movedown_b move-icon"
														
 
															                 @click="handleMoveDownSelect(item)"
														
 
															               ></span>
														
 
															               <span
														
 
															                 ref="step2"
														
 
															-                v-if="hoverSelectIcon === item.field || (index === 0 && !firstLoad)"
														
 
															+                v-if="hoverSelectIcon === item.field || (index === 0 && isShowStep2)"
														
 
															                 class="font_family icon-icon_reduce_b move-icon"
														
 
															                 @click="handleDeleteSelect(item)"
														
 
															               ></span>
														
@@ -440,23 +458,36 @@ defineExpose({
 
															       </div>
														
 
															     </div>
														
 
															     <template #footer>
														
 
															-      <el-button type="default" @click="dialogVisible = false">Cancel</el-button>
														
 
															-      <el-button type="default" @click="handleReset">Reset to default</el-button>
														
 
															-      <el-button class="el-button--dark" @click="handleApply"> Apply </el-button>
														
 
															+      <el-button
														
 
															+        type="default"
														
 
															+        style="height: 40px; padding: 8px 40px"
														
 
															+        @click="dialogVisible = false"
														
 
															+        >Cancel</el-button
														
 
															+      >
														
 
															+      <el-button type="default" style="height: 40px; padding: 8px 20px" @click="handleReset"
														
 
															+        >Reset to default</el-button
														
 
															+      >
														
 
															+      <el-button
														
 
															+        class="el-button--dark"
														
 
															+        style="height: 40px; padding: 8px 40px"
														
 
															+        @click="handleApply"
														
 
															+      >
														
 
															+        Apply
														
 
															+      </el-button>
														
 
															     </template>
														
 
															     <el-tour
														
 
															       :target-area-clickable="false"
														
 
															       class="step1-tour"
														
 
															       v-model="open1"
														
 
															-      type="primary"
														
 
															       :mask="false"
														
 
															+      type="primary"
														
 
															       v-if="step1?.[0]"
														
 
															     >
														
 
															       <el-tour-step :show-close="false" :target="step1?.[0]">
														
 
															         <template #default>
														
 
															           <div class="description">
														
 
															             <span>Drag</span> items to the right group or click the "<span>Add</span>" icon to add
														
 
															-            columns to the shipment list.
														
 
															+            columns to the {{ route.path.includes('booking') ? 'booking' : 'shipment' }} list.
														
 
															           </div>
														
 
															           <div class="got-it-text" @click="handleCloseTour('step1')">Got it</div>
														
 
															         </template>
														
@@ -474,10 +505,12 @@ defineExpose({
 
															         <template #default>
														
 
															           <div class="description">
														
 
															             <span>Drag</span> items to the left group or click the "<span>Remove</span>" icon to
														
 
															-            delete columns from the shipment list.
														
 
															+            delete columns from the
														
 
															+            {{ route.path.includes('booking') ? 'booking' : 'shipment' }} list.
														
 
															           </div>
														
 
															           <div class="description">
														
 
															-            <span>Drag</span> items up or down to reorder the shipment list, or use the "<span
														
 
															+            <span>Drag</span> items up or down to reorder the
														
 
															+            {{ route.path.includes('booking') ? 'booking' : 'shipment' }} list, or use the "<span
														
 
															               >Move up</span
														
 
															             >" and "<span>Move down</span>" icons.
														
 
															           </div>
														
@@ -540,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);
														
 
															       }
														
@@ -552,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 {
														
@@ -570,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;
														
 
															   }
														
 
															 }
														
@@ -592,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 {
														
@@ -617,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 {
														
@@ -634,10 +673,6 @@ defineExpose({
 
															     padding: 8px;
														
 
															     padding-bottom: 0px;
														
 
															   }
														
 
															-
														
 
															-  .column-item {
														
 
															-    background-color: #fff;
														
 
															-  }
														
 
															 }
														
 
															 </style>
														
 
															 <style lang="scss">
														
@@ -663,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);
														
 
															     /* 左侧阴影 */
														
 
															   }
														
--- a/src/components/DateRange/src/DateRange.vue
+++ b/src/components/DateRange/src/DateRange.vue
@@ -1,10 +1,13 @@
 
															 <script setup lang="ts">
														
 
															 import emitter from '@/utils/bus'
														
 
															-import { ref, computed, onMounted, onBeforeMount } from 'vue'
														
 
															+import { ref, watch, onMounted, onBeforeMount } from 'vue'
														
 
															 import IconDropDown from '@/components/IconDropDown'
														
 
															 import CalendarDate from './components/CalendarDate.vue'
														
 
															+import moment from 'moment'
														
 
															+import dayjs from 'dayjs'
														
 
															 onMounted(() => {
														
 
															+  defaultDate()
														
 
															   emitter.on('clearTag', (tag: any) => {
														
 
															     if (tag.includes('ETD')) {
														
 
															       clearDateStart()
														
@@ -43,71 +46,265 @@ const AddType = () => {
 
															 const deleteType = (i: any) => {
														
 
															   AddDateType.value.splice(i, 1)
														
 
															   DateType.value = ''
														
 
															+  clearDateCreation()
														
 
															 }
														
 
															+const props = defineProps({
														
 
															+  isShipment: Boolean
														
 
															+})
														
 
															 let daterangeObj: any = {}
														
 
															 const DateStart = ref()
														
 
															+DateStart.value = []
														
 
															 const DateEnd = ref()
														
 
															+DateEnd.value = []
														
 
															 const DateCreation = ref()
														
 
															+DateCreation.value = []
														
 
															+const searchTableQeury = ref()
														
 
															+const searchTableQeuryTracking = ref()
														
 
															+// 查询默认日期
														
 
															+const defaultDate = () => {
														
 
															+  if (props.isShipment) {
														
 
															+    if (
														
 
															+      sessionStorage.getItem('clickParams') == null ||
														
 
															+      sessionStorage.getItem('clickParams') == '{}'
														
 
															+    ) {
														
 
															+      if (sessionStorage.getItem('searchTableQeuryTracking') == null) {
														
 
															+        DateStart.value = [dayjs().subtract(2, 'month').startOf('month'), dayjs().add(1, 'month')]
														
 
															+        daterangeObj.ETD =
														
 
															+          DateStart.value[0].format('MMM/DD/YYYY') +
														
 
															+          ' To ' +
														
 
															+          DateStart.value[1].format('MMM/DD/YYYY')
														
 
															+        const obj = {
														
 
															+          title: 'ETD',
														
 
															+          data: [DateStart.value[0].format('MM/DD/YYYY'), DateStart.value[1].format('MM/DD/YYYY')]
														
 
															+        }
														
 
															+        daterangeObj2.ETD = obj
														
 
															+      } else {
														
 
															+        searchTableQeuryTracking.value =
														
 
															+          JSON.parse(sessionStorage.getItem('searchTableQeuryTracking') as string) || {}
														
 
															+        if (searchTableQeuryTracking.value.etd_start) {
														
 
															+          DateStart.value = [
														
 
															+            dayjs(searchTableQeuryTracking.value.etd_start),
														
 
															+            dayjs(searchTableQeuryTracking.value.etd_end)
														
 
															+          ]
														
 
															+          daterangeObj.ETD =
														
 
															+            DateStart.value[0].format('MMM/DD/YYYY') +
														
 
															+            ' To ' +
														
 
															+            DateStart.value[1].format('MMM/DD/YYYY')
														
 
															+          const obj = {
														
 
															+            title: 'ETD',
														
 
															+            data: [DateStart.value[0].format('MM/DD/YYYY'), DateStart.value[1].format('MM/DD/YYYY')]
														
 
															+          }
														
 
															+          daterangeObj2.ETD = obj
														
 
															+        }
														
 
															+        if (searchTableQeuryTracking.value.eta_start) {
														
 
															+          DateEnd.value = [
														
 
															+            dayjs(searchTableQeuryTracking.value.eta_start),
														
 
															+            dayjs(searchTableQeuryTracking.value.eta_end)
														
 
															+          ]
														
 
															+          daterangeObj.ETA =
														
 
															+            DateEnd.value[0].format('MMM/DD/YYYY') + ' To ' + DateEnd.value[1].format('MMM/DD/YYYY')
														
 
															+          const obj = {
														
 
															+            title: 'ETA',
														
 
															+            data: [DateEnd.value[0].format('MM/DD/YYYY'), DateEnd.value[1].format('MM/DD/YYYY')]
														
 
															+          }
														
 
															+          daterangeObj2.ETA = obj
														
 
															+        }
														
 
															+        if (searchTableQeuryTracking.value.created_time_start) {
														
 
															+          DateCreation.value = [
														
 
															+            dayjs(searchTableQeuryTracking.value.created_time_start),
														
 
															+            dayjs(searchTableQeuryTracking.value.created_time_end)
														
 
															+          ]
														
 
															+          daterangeObj['Creation Time'] =
														
 
															+            DateCreation.value[0].format('MMM/DD/YYYY') +
														
 
															+            ' To ' +
														
 
															+            DateCreation.value[1].format('MMM/DD/YYYY')
														
 
															+          const obj = {
														
 
															+            title: 'Creation Time',
														
 
															+            data: [
														
 
															+              DateCreation.value[0].format('MM/DD/YYYY'),
														
 
															+              DateCreation.value[1].format('MM/DD/YYYY')
														
 
															+            ]
														
 
															+          }
														
 
															+          daterangeObj2['Creation Time'] = obj
														
 
															+        }
														
 
															+      }
														
 
															+      emit('defaultDate', daterangeObj, daterangeObj2, searchTableQeuryTracking.value)
														
 
															+    } else {
														
 
															+      const data = JSON.parse(sessionStorage.getItem('reportList') as string) || {}
														
 
															+      searchTableQeuryTracking.value =
														
 
															+        JSON.parse(sessionStorage.getItem('searchTableQeuryTracking') as string) || {}
														
 
															+      if (data.eta_start) {
														
 
															+        DateEnd.value = [dayjs(data.eta_start), dayjs(data.eta_end)]
														
 
															+        daterangeObj.ETA =
														
 
															+          DateEnd.value[0].format('MMM/DD/YYYY') + ' To ' + DateEnd.value[1].format('MMM/DD/YYYY')
														
 
															+        const obj = {
														
 
															+          title: 'ETA',
														
 
															+          data: [DateEnd.value[0].format('MM/DD/YYYY'), DateEnd.value[1].format('MM/DD/YYYY')]
														
 
															+        }
														
 
															+        daterangeObj2.ETA = obj
														
 
															+        emit('defaultDate', daterangeObj, daterangeObj2, searchTableQeuryTracking.value)
														
 
															+      }
														
 
															+      if (data.etd_start) {
														
 
															+        DateStart.value = [dayjs(data.etd_start), dayjs(data.etd_end)]
														
 
															+        daterangeObj.ETD =
														
 
															+          DateStart.value[0].format('MMM/DD/YYYY') +
														
 
															+          ' To ' +
														
 
															+          DateStart.value[1].format('MMM/DD/YYYY')
														
 
															+        const obj = {
														
 
															+          title: 'ETD',
														
 
															+          data: [DateStart.value[0].format('MM/DD/YYYY'), DateStart.value[1].format('MM/DD/YYYY')]
														
 
															+        }
														
 
															+        daterangeObj2.ETD = obj
														
 
															+        emit('defaultDate', daterangeObj, daterangeObj2, searchTableQeuryTracking.value)
														
 
															+      }
														
 
															+    }
														
 
															+  } else {
														
 
															+    if (sessionStorage.getItem('searchTableQeury') == null) {
														
 
															+      DateStart.value = [dayjs().subtract(2, 'month').startOf('month'), dayjs().add(1, 'month')]
														
 
															+      daterangeObj.ETD =
														
 
															+        DateStart.value[0].format('MMM/DD/YYYY') + ' To ' + DateStart.value[1].format('MMM/DD/YYYY')
														
 
															+      const obj = {
														
 
															+        title: 'ETD',
														
 
															+        data: [DateStart.value[0].format('MM/DD/YYYY'), DateStart.value[1].format('MM/DD/YYYY')]
														
 
															+      }
														
 
															+      daterangeObj2.ETD = obj
														
 
															+    } else {
														
 
															+      searchTableQeury.value =
														
 
															+        JSON.parse(sessionStorage.getItem('searchTableQeury') as string) || {}
														
 
															+      if (searchTableQeury.value.f_etd_start) {
														
 
															+        DateStart.value = [
														
 
															+          dayjs(searchTableQeury.value.f_etd_start),
														
 
															+          dayjs(searchTableQeury.value.f_etd_end)
														
 
															+        ]
														
 
															+        daterangeObj.ETD =
														
 
															+          DateStart.value[0].format('MMM/DD/YYYY') +
														
 
															+          ' To ' +
														
 
															+          DateStart.value[1].format('MMM/DD/YYYY')
														
 
															+        const obj = {
														
 
															+          title: 'ETD',
														
 
															+          data: [DateStart.value[0].format('MM/DD/YYYY'), DateStart.value[1].format('MM/DD/YYYY')]
														
 
															+        }
														
 
															+        daterangeObj2.ETD = obj
														
 
															+      }
														
 
															+      if (searchTableQeury.value.m_eta_start) {
														
 
															+        DateEnd.value = [
														
 
															+          dayjs(searchTableQeury.value.m_eta_start),
														
 
															+          dayjs(searchTableQeury.value.m_eta_end)
														
 
															+        ]
														
 
															+        daterangeObj.ETA =
														
 
															+          DateEnd.value[0].format('MMM/DD/YYYY') + ' To ' + DateEnd.value[1].format('MMM/DD/YYYY')
														
 
															+        const obj = {
														
 
															+          title: 'ETA',
														
 
															+          data: [DateEnd.value[0].format('MM/DD/YYYY'), DateEnd.value[1].format('MM/DD/YYYY')]
														
 
															+        }
														
 
															+        daterangeObj2.ETA = obj
														
 
															+      }
														
 
															+      if (searchTableQeury.value.created_time_start) {
														
 
															+        DateCreation.value = [
														
 
															+          dayjs(searchTableQeury.value.created_time_start),
														
 
															+          dayjs(searchTableQeury.value.created_time_end)
														
 
															+        ]
														
 
															+        daterangeObj['Creation Time'] =
														
 
															+          DateCreation.value[0].format('MMM/DD/YYYY') +
														
 
															+          ' To ' +
														
 
															+          DateCreation.value[1].format('MMM/DD/YYYY')
														
 
															+        const obj = {
														
 
															+          title: 'Creation Time',
														
 
															+          data: [
														
 
															+            DateCreation.value[0].format('MM/DD/YYYY'),
														
 
															+            DateCreation.value[1].format('MM/DD/YYYY')
														
 
															+          ]
														
 
															+        }
														
 
															+        daterangeObj2['Creation Time'] = obj
														
 
															+      }
														
 
															+    }
														
 
															+    emit('defaultDate', daterangeObj, daterangeObj2, searchTableQeury.value)
														
 
															+  }
														
 
															+}
														
 
															 const daterangedata = ref()
														
 
															 daterangedata.value = []
														
 
															+let daterangeObj2: any = {}
														
 
															 const DateRangeChange = (val: any) => {
														
 
															-  daterangeObj[val.title] = val.data[0] + ' To ' + val.data[1]
														
 
															+  if (val.data != null) {
														
 
															+    const date1 = moment(String(val.data[0])).format('MMM-DD-YYYY')
														
 
															+    const date2 = moment(String(val.data[1])).format('MMM-DD-YYYY')
														
 
															+    daterangeObj[val.title] = date1 + ' To ' + date2
														
 
															+    daterangeObj2[val.title] = val
														
 
															+  } else {
														
 
															+    delete daterangeObj[val.title]
														
 
															+    delete daterangeObj2[val.title]
														
 
															+    if (val.title == 'ETD') {
														
 
															+      DateStart.value = []
														
 
															+    } else if (val.title == 'ETA') {
														
 
															+      DateEnd.value = []
														
 
															+    } else {
														
 
															+      DateCreation.value = []
														
 
															+      AddDateType.value = []
														
 
															+      DateType.value = ''
														
 
															+    }
														
 
															+  }
														
 
															 }
														
 
															-const emit = defineEmits(['DateRangeSearch', 'clearDaterangeTags'])
														
 
															+const emit = defineEmits(['DateRangeSearch', 'clearDaterangeTags', 'defaultDate'])
														
 
															 const DateRangeSearch = () => {
														
 
															-  emit('DateRangeSearch', daterangeObj)
														
 
															+  emit('DateRangeSearch', daterangeObj, daterangeObj2)
														
 
															   Date_visible.value = false
														
 
															 }
														
 
															-const CalendarTitle = computed(() => {
														
 
															-  if (DateType.value == 'undefined') {
														
 
															-    return 'Date Range'
														
 
															-  } else {
														
 
															-    return DateType.value
														
 
															+const CalendarTitle = ref('Date Range')
														
 
															+watch(
														
 
															+  () => DateType.value,
														
 
															+  (current) => {
														
 
															+    CalendarTitle.value = current
														
 
															   }
														
 
															-})
														
 
															+)
														
 
															 // 清除
														
 
															 const clearrest = () => {
														
 
															   emit('clearDaterangeTags')
														
 
															   clearDateStart()
														
 
															   clearDateEnd()
														
 
															   clearDateCreation()
														
 
															+  clearDaterangeObj()
														
 
															 }
														
 
															 // 清除EDT
														
 
															 const clearDateStart = () => {
														
 
															   DateStart.value = []
														
 
															   delete daterangeObj['ETD']
														
 
															+  delete daterangeObj2['ETD']
														
 
															 }
														
 
															 // 清除EDA
														
 
															 const clearDateEnd = () => {
														
 
															   DateEnd.value = []
														
 
															   delete daterangeObj['ETA']
														
 
															+  delete daterangeObj2['ETA']
														
 
															 }
														
 
															 // 清除Creation Time
														
 
															 const clearDateCreation = () => {
														
 
															   DateCreation.value = []
														
 
															   AddDateType.value = []
														
 
															   DateType.value = ''
														
 
															+  CalendarTitle.value = 'Date Range'
														
 
															   delete daterangeObj['Creation Time']
														
 
															+  delete daterangeObj2['Creation Time']
														
 
															 }
														
 
															 // 清除 daterangeObj
														
 
															 const clearDaterangeObj = () => {
														
 
															   daterangeObj = {}
														
 
															+  daterangeObj2 = {}
														
 
															 }
														
 
															 </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" @click="Date_visible = !Date_visible">
														
 
															+        <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
														
@@ -126,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>
														
@@ -153,11 +350,12 @@ const clearDaterangeObj = () => {
 
															               CalendarWidth="352px"
														
 
															               :Date="DateCreation"
														
 
															               @DateRangeChange="DateRangeChange"
														
 
															+              :isType="true"
														
 
															             ></CalendarDate>
														
 
															           </div>
														
 
															         </div>
														
 
															         <div class="MoreType" @click="AddType" v-if="AddDateType.length != DateTypeoptions.length">
														
 
															-          + More Date Type
														
 
															+          <el-button class="el-button--noborder moretype">+ More Date Type</el-button>
														
 
															         </div>
														
 
															         <div class="daterange_bottom">
														
 
															           <div><el-button type="default" @click="clearrest" class="Clear">Reset</el-button></div>
														
@@ -182,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 {
														
@@ -208,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;
														
@@ -251,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);
														
@@ -261,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);
														
@@ -292,4 +491,19 @@ const clearDaterangeObj = () => {
 
															     width: 336px;
														
 
															   }
														
 
															 }
														
 
															+.moretype {
														
 
															+  background-color: transparent;
														
 
															+  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>
														
--- a/src/components/DateRange/src/components/CalendarDate.vue
+++ b/src/components/DateRange/src/components/CalendarDate.vue
@@ -1,6 +1,7 @@
 
															 <script lang="ts" setup>
														
 
															 import dayjs, { Dayjs } from 'dayjs'
														
 
															 import { ref, watch } from 'vue'
														
 
															+import moment from 'moment'
														
 
															 // type RangeValue = [Dayjs, Dayjs]
														
 
															 // const ETDDate = ref<RangeValue>()
														
@@ -14,6 +15,10 @@ const props = defineProps({
 
															   },
														
 
															   Date: {
														
 
															     type: Array
														
 
															+  },
														
 
															+  isType: {
														
 
															+    type: Boolean,
														
 
															+    default: false
														
 
															   }
														
 
															 })
														
 
															 const ETDDate = ref(props.Date)
														
@@ -23,41 +28,66 @@ watch(
 
															     ETDDate.value = current
														
 
															   }
														
 
															 )
														
 
															-const emit = defineEmits(['DateRangeChange'])
														
 
															+const emit = defineEmits(['DateRangeChange', 'DateChange'])
														
 
															 const open = ref(false)
														
 
															 const Disabled = ref([false, false])
														
 
															 const isShowExtra = ref(true)
														
 
															+const DateList = ref()
														
 
															+DateList.value = []
														
 
															+const daterange = (val: any) => {
														
 
															+  if (DateList.value.length == 2 && val != undefined) {
														
 
															+    const rangedata = {
														
 
															+      title: props.CalendarTitle,
														
 
															+      data: DateList.value
														
 
															+    }
														
 
															+    emit('DateRangeChange', rangedata)
														
 
															+  }
														
 
															+}
														
 
															 const ChangeToday = (val: any) => {
														
 
															-  console.log(ETDDate.value)
														
 
															   if (val == 'Earliest') {
														
 
															     // ETDDate.value = [dayjs(), dayjs()]
														
 
															     ETDDate.value[0] = dayjs()
														
 
															-    open.value = false
														
 
															-    console.log(ETDDate.value)
														
 
															+    const date1 = moment(String(ETDDate.value[0])).format('MM/DD/YYYY')
														
 
															+    DateList.value[0] = date1
														
 
															+    daterange(DateList.value[1])
														
 
															   } else {
														
 
															     ETDDate.value[1] = dayjs()
														
 
															-    open.value = false
														
 
															-    // ETDDate.value = [dayjs(), dayjs()]
														
 
															+    const date1 = moment(String(ETDDate.value[1])).format('MM/DD/YYYY')
														
 
															+    DateList.value[1] = date1
														
 
															+    daterange(DateList.value[0])
														
 
															   }
														
 
															 }
														
 
															-const handleCalendarOpen = () => {
														
 
															+const handleCalendarOpen = (date: any) => {
														
 
															   open.value = !open.value
														
 
															+  if (open.value == false) {
														
 
															+    if (date.length != 2) {
														
 
															+      DateList.value = []
														
 
															+      ETDDate.value = []
														
 
															+    }
														
 
															+  }
														
 
															 }
														
 
															 const Earliest = () => {
														
 
															-  Disabled.value = [true, false]
														
 
															-  ETDDate.value = [dayjs('Oct-05-2009'), dayjs()]
														
 
															+  ETDDate.value[0] = dayjs('Oct-05-2009')
														
 
															+  const date1 = moment(String(ETDDate.value[0])).format('MM/DD/YYYY')
														
 
															+  DateList.value[0] = date1
														
 
															+  daterange(DateList.value[1])
														
 
															 }
														
 
															 const Latest = () => {
														
 
															-  Disabled.value = [false, true]
														
 
															+  ETDDate.value[1] = dayjs()
														
 
															+  const date1 = moment(String(ETDDate.value[1])).format('MM/DD/YYYY')
														
 
															+  DateList.value[1] = date1
														
 
															+  daterange(DateList.value[0])
														
 
															 }
														
 
															 const changeRangeData = (value: any) => {
														
 
															+  DateList.value = value
														
 
															   if (value != '') {
														
 
															     const rangedata = {
														
 
															       title: props.CalendarTitle,
														
 
															       data: value
														
 
															     }
														
 
															     emit('DateRangeChange', rangedata)
														
 
															+    emit('DateChange', value)
														
 
															   }
														
 
															 }
														
 
															 const handlePanelChange = (value: any, mode: any) => {
														
@@ -67,6 +97,10 @@ const handlePanelChange = (value: any, mode: any) => {
 
															     isShowExtra.value = true
														
 
															   }
														
 
															 }
														
 
															+// 判断失焦时是否两个都有值
														
 
															+const isTwoDate = (date: any) => {
														
 
															+  console.log(date)
														
 
															+}
														
 
															 </script>
														
 
															 <template>
														
 
															   <div>
														
@@ -74,27 +108,29 @@ const handlePanelChange = (value: any, mode: any) => {
 
															     <a-range-picker
														
 
															       separator="To"
														
 
															       :showToday="false"
														
 
															-      :allowClear="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"
														
 
															       :placeholder="['Start Time', 'End Time']"
														
 
															       format="MMM-DD-YYYY"
														
 
															-      valueFormat="MMM-DD-YYYY"
														
 
															-      @openChange="handleCalendarOpen"
														
 
															+      valueFormat="MM/DD/YYYY"
														
 
															+      @openChange="handleCalendarOpen(ETDDate)"
														
 
															       @panelChange="handlePanelChange"
														
 
															       v-model:value="ETDDate"
														
 
															     >
														
 
															       <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>
														
 
															       </template>
														
 
															       <template #renderExtraFooter v-if="isShowExtra">
														
 
															-        <div class="flex">
														
 
															+        <div class="calender_flex">
														
 
															           <div class="footer_left">
														
 
															             <el-button class="el-button--noborder" @click="Earliest">Earliest Time</el-button>
														
 
															             <el-button class="el-button--noborder" @click="ChangeToday('Earliest')"
														
@@ -112,17 +148,21 @@ const handlePanelChange = (value: any, mode: any) => {
 
															 </template>
														
 
															 <style lang="scss" scoped>
														
 
															-.flex {
														
 
															+.calender_flex {
														
 
															   display: flex;
														
 
															   justify-content: space-between;
														
 
															 }
														
 
															 .footer_left {
														
 
															   display: flex;
														
 
															   flex: 50%;
														
 
															-  padding: 4px 0 4px 8px;
														
 
															+  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 {
														
 
															   color: var(--color-theme);
														
@@ -132,4 +172,14 @@ const handlePanelChange = (value: any, mode: any) => {
 
															   margin-bottom: 4px;
														
 
															   color: var(--color-neutral-2);
														
 
															 }
														
 
															+.iconfont_icon {
														
 
															+  margin-right: 0;
														
 
															+}
														
 
															+.iconfont {
														
 
															+  width: 14px;
														
 
															+  height: 14px;
														
 
															+}
														
 
															+.icon_suffix {
														
 
															+  fill: var(--color-neutral-1);
														
 
															+}
														
 
															 </style>
														
--- a/src/components/DateRange/src/components/QuickCalendarDate.vue
+++ b/src/components/DateRange/src/components/QuickCalendarDate.vue
@@ -0,0 +1,184 @@
 
															+<script lang="ts" setup>
														
 
															+import dayjs from 'dayjs'
														
 
															+import { ref, watch, computed } from 'vue'
														
 
															+import moment from 'moment'
														
 
															+
														
 
															+const props = defineProps({
														
 
															+  CalendarWidth: {
														
 
															+    type: String,
														
 
															+    default: '250px'
														
 
															+  },
														
 
															+  CalendarTitle: {
														
 
															+    type: String
														
 
															+  },
														
 
															+  Date: {
														
 
															+    type: Array
														
 
															+  },
														
 
															+  isDisabled: {
														
 
															+    type: Boolean,
														
 
															+    default: false
														
 
															+  }
														
 
															+})
														
 
															+const ETDDate = ref(props.Date)
														
 
															+watch(
														
 
															+  () => props.Date,
														
 
															+  (current) => {
														
 
															+    ETDDate.value = current
														
 
															+  }
														
 
															+)
														
 
															+const emit = defineEmits(['DateRangeChange', 'DateChange'])
														
 
															+const open = ref(false)
														
 
															+const isShowExtra = ref(true)
														
 
															+
														
 
															+const DateList = ref()
														
 
															+const daterange = (val: any) => {
														
 
															+  if (DateList.value.length == 2 && val != undefined) {
														
 
															+    emit('DateChange', DateList.value)
														
 
															+  }
														
 
															+}
														
 
															+const ChangeToday = (val: any) => {
														
 
															+  if (val == 'Earliest') {
														
 
															+    // ETDDate.value = [dayjs(), dayjs()]
														
 
															+    ETDDate.value[0] = dayjs()
														
 
															+    const date1 = moment(String(ETDDate.value[0])).format('MM/DD/YYYY')
														
 
															+    DateList.value[0] = date1
														
 
															+    daterange(DateList.value[1])
														
 
															+  } else {
														
 
															+    ETDDate.value[1] = dayjs()
														
 
															+    const date1 = moment(String(ETDDate.value[1])).format('MM/DD/YYYY')
														
 
															+    DateList.value[1] = date1
														
 
															+    daterange(DateList.value[0])
														
 
															+  }
														
 
															+}
														
 
															+const handleCalendarOpen = (date: any) => {
														
 
															+  open.value = !open.value
														
 
															+  if (open.value == false) {
														
 
															+    if (date.length != 2) {
														
 
															+      DateList.value = []
														
 
															+      ETDDate.value = []
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+const Earliest = () => {
														
 
															+  ETDDate.value[0] = dayjs('Oct-05-2009')
														
 
															+  const date1 = moment(String(ETDDate.value[0])).format('MM/DD/YYYY')
														
 
															+  DateList.value[0] = date1
														
 
															+  daterange(DateList.value[1])
														
 
															+}
														
 
															+const Latest = () => {
														
 
															+  ETDDate.value[1] = dayjs()
														
 
															+  const date1 = moment(String(ETDDate.value[1])).format('MM/DD/YYYY')
														
 
															+  DateList.value[1] = date1
														
 
															+  daterange(DateList.value[0])
														
 
															+}
														
 
															+const changeRangeData = (value: any) => {
														
 
															+  if (value != '') {
														
 
															+    const rangedata = {
														
 
															+      title: props.CalendarTitle,
														
 
															+      data: value
														
 
															+    }
														
 
															+    emit('DateRangeChange', rangedata)
														
 
															+    emit('DateChange', value)
														
 
															+  }
														
 
															+}
														
 
															+const handlePanelChange = (value: any, mode: any) => {
														
 
															+  if (mode[0] == 'year' || mode[0] == 'month') {
														
 
															+    isShowExtra.value = false
														
 
															+  } else {
														
 
															+    isShowExtra.value = true
														
 
															+  }
														
 
															+}
														
 
															+//预设范围
														
 
															+const rangePresets = ref([
														
 
															+  { label: 'Current Month', value: [dayjs().startOf('month'), dayjs().endOf('month')] },
														
 
															+  {
														
 
															+    label: 'Last Month',
														
 
															+    value: [
														
 
															+      dayjs().startOf('month').subtract(1, 'month'),
														
 
															+      dayjs().endOf('month').subtract(1, 'month')
														
 
															+    ]
														
 
															+  },
														
 
															+  { label: 'This Year', value: [dayjs().startOf('year'), dayjs().endOf('year')] }
														
 
															+])
														
 
															+const placeholder = computed(() => {
														
 
															+  if (props.isDisabled) {
														
 
															+    return ['No Start Limit', 'No End Limit']
														
 
															+  } else {
														
 
															+    return ['Start Time', 'End Time']
														
 
															+  }
														
 
															+})
														
 
															+</script>
														
 
															+<template>
														
 
															+  <div>
														
 
															+    <a-range-picker
														
 
															+      separator="To"
														
 
															+      :showToday="false"
														
 
															+      :allowClear="false"
														
 
															+      :style="{ width: props.CalendarWidth }"
														
 
															+      :open="open"
														
 
															+      style="height: 40px"
														
 
															+      :presets="rangePresets"
														
 
															+      :disabled="props.isDisabled"
														
 
															+      @change="changeRangeData"
														
 
															+      :placeholder="placeholder"
														
 
															+      format="MMM-DD-YYYY"
														
 
															+      valueFormat="MM/DD/YYYY"
														
 
															+      @openChange="handleCalendarOpen(ETDDate)"
														
 
															+      @panelChange="handlePanelChange"
														
 
															+      v-model:value="ETDDate"
														
 
															+    >
														
 
															+      <template #suffixIcon>
														
 
															+        <span class="iconfont_icon">
														
 
															+          <svg class="iconfont icon_dark" aria-hidden="true">
														
 
															+            <use xlink:href="#icon-icon_date_b"></use>
														
 
															+          </svg>
														
 
															+        </span>
														
 
															+      </template>
														
 
															+      <template #renderExtraFooter v-if="isShowExtra">
														
 
															+        <div class="calender_flex">
														
 
															+          <div class="footer_left">
														
 
															+            <el-button class="el-button--noborder" @click="Earliest">Earliest Time</el-button>
														
 
															+            <el-button class="el-button--noborder" @click="ChangeToday('Earliest')"
														
 
															+              >Today</el-button
														
 
															+            >
														
 
															+          </div>
														
 
															+          <div class="footer_left footer_right">
														
 
															+            <el-button @click="Latest" class="el-button--noborder">Latest Time</el-button>
														
 
															+            <el-button class="el-button--noborder" @click="ChangeToday('Latest')">Today</el-button>
														
 
															+          </div>
														
 
															+        </div>
														
 
															+      </template>
														
 
															+    </a-range-picker>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.calender_flex {
														
 
															+  display: flex;
														
 
															+  justify-content: space-between;
														
 
															+}
														
 
															+.footer_left {
														
 
															+  display: flex;
														
 
															+  flex: 50%;
														
 
															+  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(--border-color-2);
														
 
															+  padding-left: 8px;
														
 
															+}
														
 
															+.el-button--noborder {
														
 
															+  color: var(--color-theme);
														
 
															+}
														
 
															+.ETD_title {
														
 
															+  font-size: var(--font-size-2);
														
 
															+  margin-bottom: 4px;
														
 
															+  color: var(--color-neutral-2);
														
 
															+}
														
 
															+:deep(.ant-picker-range) {
														
 
															+  padding: 4px 8px;
														
 
															+}
														
 
															+</style>
														
--- a/src/components/DateRange/src/components/QuickMonth.vue
+++ b/src/components/DateRange/src/components/QuickMonth.vue
@@ -0,0 +1,81 @@
 
															+<script lang="ts" setup>
														
 
															+import { ref, watch } from 'vue'
														
 
															+import moment from 'moment'
														
 
															+
														
 
															+const props = defineProps({
														
 
															+  MonthStartDate: {
														
 
															+    type: String
														
 
															+  },
														
 
															+  MonthEndDate: {
														
 
															+    type: String
														
 
															+  },
														
 
															+  isETDToETA: {
														
 
															+    type: Boolean,
														
 
															+    default: false
														
 
															+  }
														
 
															+})
														
 
															+const startDate = ref(props.MonthStartDate)
														
 
															+const EndDate = ref(props.MonthEndDate)
														
 
															+watch(
														
 
															+  () => props.MonthStartDate,
														
 
															+  (current) => {
														
 
															+    startDate.value = current
														
 
															+  }
														
 
															+)
														
 
															+watch(
														
 
															+  () => props.MonthEndDate,
														
 
															+  (current) => {
														
 
															+    EndDate.value = current
														
 
															+  }
														
 
															+)
														
 
															+const emit = defineEmits(['DateChange'])
														
 
															+const StartChange = (val: any) => {
														
 
															+  if (!props.isETDToETA) {
														
 
															+    const nextMonth = new Date(val)
														
 
															+    let currentYear = nextMonth.getFullYear() + 1
														
 
															+    let currentMonth = nextMonth.getMonth() + 2
														
 
															+    let current = currentYear + '-' + currentMonth
														
 
															+    EndDate.value = current
														
 
															+  }
														
 
															+  const date1 = moment(String(val)).format('MM/YYYY')
														
 
															+  const date2 = moment(EndDate.value).format('MM/YYYY')
														
 
															+  emit('DateChange', date1, date2)
														
 
															+}
														
 
															+const EndChange = (val: any) => {
														
 
															+  if (!props.isETDToETA) {
														
 
															+    const nextMonth = new Date(val)
														
 
															+    let currentYear = nextMonth.getFullYear() - 1
														
 
															+    let currentMonth = nextMonth.getMonth()
														
 
															+    let current = currentYear + '-' + currentMonth
														
 
															+    startDate.value = current
														
 
															+  }
														
 
															+  const date1 = moment(startDate.value).format('MM/YYYY')
														
 
															+  const date2 = moment(String(val)).format('MM/YYYY')
														
 
															+  emit('DateChange', date1, date2)
														
 
															+}
														
 
															+</script>
														
 
															+
														
 
															+<template>
														
 
															+  <div>
														
 
															+    <el-date-picker
														
 
															+      style="width: 120px"
														
 
															+      v-model="startDate"
														
 
															+      format="MMM-YYYY"
														
 
															+      type="month"
														
 
															+      @change="StartChange"
														
 
															+      :clearable="false"
														
 
															+      placeholder="Start month"
														
 
															+      placement="bottom"
														
 
															+    />
														
 
															+    <el-date-picker
														
 
															+      style="width: 120px; margin-left: 8px"
														
 
															+      v-model="EndDate"
														
 
															+      format="MMM-YYYY"
														
 
															+      type="month"
														
 
															+      @change="EndChange"
														
 
															+      :clearable="false"
														
 
															+      placeholder="End month"
														
 
															+      placement="bottom"
														
 
															+    />
														
 
															+  </div>
														
 
															+</template>
														
--- a/src/components/FliterTags/src/FilterTags.vue
+++ b/src/components/FliterTags/src/FilterTags.vue
@@ -1,5 +1,6 @@
 
															 <script setup lang="ts">
														
 
															-import { ref, watch } from 'vue'
														
 
															+import { ref, onMounted, onBeforeMount, watch, computed } from 'vue'
														
 
															+import emitter from '@/utils/bus'
														
 
															 interface ListItem {
														
 
															   name: string
														
 
															   number: number
														
@@ -20,6 +21,23 @@ watch(
 
															     TagsList.value = current
														
 
															   }
														
 
															 )
														
 
															+onMounted(() => {
														
 
															+  emitter.on('clearTag', (tag: any) => {
														
 
															+    if (tag.includes('Shipment status')) {
														
 
															+      checkedCount = []
														
 
															+      // TagsList.value.forEach((item: any) => {
														
 
															+      //   item.checked = false
														
 
															+      // })
														
 
															+      // TagsList.value[0].checked = true
														
 
															+      NewTagsList.value = ['All']
														
 
															+      emits('changeTag', NewTagsList.value, false)
														
 
															+    }
														
 
															+  })
														
 
															+})
														
 
															+
														
 
															+onBeforeMount(() => {
														
 
															+  emitter.off('clearTag')
														
 
															+})
														
 
															 NewTagsList.value = []
														
@@ -40,7 +58,7 @@ const checkedBox = (i: any, name: any, checked: any) => {
 
															     checkedCount.forEach((item) => map.set(item, true))
														
 
															     checkedCount = [...map.keys()]
														
 
															   } else {
														
 
															-    checkedCount.pop()
														
 
															+    checkedCount.splice(checkedCount.indexOf(name), 1)
														
 
															     TagsList.value[0].checked = false
														
 
															     TagsList.value[i].checked = !TagsList.value[i].checked
														
 
															   }
														
@@ -56,7 +74,7 @@ const checkedBox = (i: any, name: any, checked: any) => {
 
															   } else {
														
 
															     NewTagsList.value = checkedCount
														
 
															   }
														
 
															-  emits('changeTag', NewTagsList.value)
														
 
															+  emits('changeTag', NewTagsList.value, true)
														
 
															 }
														
 
															 </script>
														
@@ -94,7 +112,6 @@ const checkedBox = (i: any, name: any, checked: any) => {
 
															   flex-wrap: wrap;
														
 
															 }
														
 
															 .list {
														
 
															-  margin-right: 16px;
														
 
															   min-width: 93px;
														
 
															   padding: 5.42px 16px;
														
 
															   color: var(--color-neutral-2);
														
@@ -106,17 +123,17 @@ const checkedBox = (i: any, name: any, checked: any) => {
 
															   border-radius: var(--border-radius-12);
														
 
															 }
														
 
															 .v-tag {
														
 
															-  min-width: 36px;
														
 
															+  min-width: 18px;
														
 
															   font-size: var(--font-size-2);
														
 
															   margin-left: 6px;
														
 
															   border-radius: 6px;
														
 
															-  padding: 3px;
														
 
															+  padding: 3px 4px;
														
 
															   text-align: center;
														
 
															 }
														
 
															 .v-tag__all {
														
 
															   font-weight: 400;
														
 
															-  background-color: var(--color-tag-all-bg);
														
 
															-  color: var(--color-tag-all);
														
 
															+  background-color: var(--color-tag-all-bg-color);
														
 
															+  color: #e26394;
														
 
															 }
														
 
															 .v-tag__created {
														
 
															   font-weight: 400;
														
--- a/src/components/IconDropDown/src/IconDropDown.vue
+++ b/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>
														
--- a/src/components/MoreFilters/src/MoreFilters.vue
+++ b/src/components/MoreFilters/src/MoreFilters.vue
--- a/src/components/MoreFilters/src/components/SelectValue.vue
+++ b/src/components/MoreFilters/src/components/SelectValue.vue
@@ -4,7 +4,6 @@ import type { DropdownInstance } from 'element-plus'
 
															 interface ListItem {
														
 
															   name: string
														
 
															-  number: number
														
 
															   checked: boolean
														
 
															 }
														
 
															 interface Props {
														
@@ -41,15 +40,6 @@ watch(
 
															 const dropdown1 = ref<DropdownInstance>()
														
 
															 let checkedCount: any[] = []
														
 
															-const TotalAll = computed(() => {
														
 
															-  var total_sum = 0
														
 
															-  if (TransportList.value != undefined) {
														
 
															-    TransportList.value.map((item) => {
														
 
															-      total_sum += item.number
														
 
															-    })
														
 
															-  }
														
 
															-  return total_sum
														
 
															-})
														
 
															 const handleCheckAllChange = (val: any) => {
														
 
															   checkedCount = []
														
@@ -90,65 +80,99 @@ const clearList = () => {
 
															 }
														
 
															 const emit = defineEmits(['generalSearch'])
														
 
															 const changedata = ref()
														
 
															+const changedata2 = ref()
														
 
															 //点击搜索
														
 
															 const TransportSearch = (visible: any) => {
														
 
															   if (checkedCount.length == TransportList.value.length) {
														
 
															     changedata.value = 'All'
														
 
															+    changedata2.value = 'All'
														
 
															   } else {
														
 
															     changedata.value = checkedCount.join(', ')
														
 
															+    changedata2.value = checkedCount
														
 
															   }
														
 
															   const TransportData = {
														
 
															     title: Title.value,
														
 
															     data: changedata.value
														
 
															   }
														
 
															   Serval.value = changedata.value
														
 
															-  emit('generalSearch', TransportData)
														
 
															+  emit('generalSearch', TransportData, changedata2.value)
														
 
															   if (!dropdown1.value) return
														
 
															   if (visible) {
														
 
															     dropdown1.value.handleClose()
														
 
															   } else {
														
 
															     dropdown1.value.handleOpen()
														
 
															   }
														
 
															+  checkedCount = []
														
 
															+}
														
 
															+const seeall = ref(false)
														
 
															+const clickSeeAll = () => {
														
 
															+  seeall.value = !seeall.value
														
 
															 }
														
 
															 </script>
														
 
															 <template>
														
 
															-  <div class="select">
														
 
															-    <el-dropdown ref="dropdown1" trigger="click" :hide-on-click="false">
														
 
															+  <div class="select" :class="{ isDisabled: TransportList.length == 0 }">
														
 
															+    <el-dropdown
														
 
															+      ref="dropdown1"
														
 
															+      trigger="click"
														
 
															+      :hide-on-click="false"
														
 
															+      :disabled="TransportList.length == 0"
														
 
															+    >
														
 
															       <div class="el-dropdown-link">
														
 
															-        <div v-if="Serval == 'Please Select Date Range' || Serval == ''" class="select_title">
														
 
															+        <div
														
 
															+          v-if="
														
 
															+            props.title == 'Incoterms' && (Serval == 'Please Select Date Range' || Serval == '')
														
 
															+          "
														
 
															+          class="select_title"
														
 
															+        >
														
 
															           Please Select Date Range
														
 
															         </div>
														
 
															+        <div
														
 
															+          v-else-if="
														
 
															+            props.title == 'Service' && (Serval == 'Please Select Service' || Serval == '')
														
 
															+          "
														
 
															+          class="select_title"
														
 
															+        >
														
 
															+          Please Select Service
														
 
															+        </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>
														
 
															       </div>
														
 
															       <template #dropdown>
														
 
															         <div class="dropdownwidth">
														
 
															-          <div class="title">{{ Title }} {{ checkAll }}</div>
														
 
															+          <div class="title">{{ Title }}</div>
														
 
															           <el-dropdown-menu>
														
 
															             <el-dropdown-item>
														
 
															               <el-checkbox v-model="checkAll" class="checkbox" @change="handleCheckAllChange">
														
 
															                 <div class="checkbox_title">Select All</div>
														
 
															-                <div class="checkbox_number">({{ TotalAll }})</div>
														
 
															               </el-checkbox>
														
 
															             </el-dropdown-item>
														
 
															             <el-divider></el-divider>
														
 
															-            <el-dropdown-item v-for="(item, index) in TransportList" :key="index">
														
 
															-              <el-checkbox
														
 
															-                :value="item.name"
														
 
															-                v-model="item.checked"
														
 
															-                class="checkbox"
														
 
															-                @change="handleCheckedTransportChange(item.name, item.checked, index)"
														
 
															-              >
														
 
															-                <div class="checkbox_title">
														
 
															-                  {{ item.name }}
														
 
															-                </div>
														
 
															-                <div class="checkbox_number">({{ item.number }})</div>
														
 
															-              </el-checkbox>
														
 
															-            </el-dropdown-item>
														
 
															+            <div class="inval" :class="{ seeall: seeall }">
														
 
															+              <el-dropdown-item v-for="(item, index) in TransportList" :key="index">
														
 
															+                <el-checkbox
														
 
															+                  :value="item.name"
														
 
															+                  v-model="item.checked"
														
 
															+                  class="checkbox"
														
 
															+                  @change="handleCheckedTransportChange(item.name, item.checked, index)"
														
 
															+                >
														
 
															+                  <div class="checkbox_title">
														
 
															+                    {{ item.name }}
														
 
															+                  </div>
														
 
															+                </el-checkbox>
														
 
															+              </el-dropdown-item>
														
 
															+            </div>
														
 
															+            <div class="See_all" @click="clickSeeAll">
														
 
															+              <span class="iconfont_icon iconfont_icon_text" :class="{ transformTotal: seeall }">
														
 
															+                <svg class="iconfont" aria-hidden="true">
														
 
															+                  <use xlink:href="#icon-icon_dropdown__line_b"></use>
														
 
															+                </svg>
														
 
															+              </span>
														
 
															+              See All
														
 
															+            </div>
														
 
															             <div class="transport_bottom">
														
 
															               <div>
														
 
															                 <el-button class="clear" type="default" @click="clearList">Reset</el-button>
														
@@ -174,13 +198,14 @@ const TransportSearch = (visible: any) => {
 
															 .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);
														
@@ -280,4 +305,41 @@ const TransportSearch = (visible: any) => {
 
															   margin: 8px 0;
														
 
															   border-top-color: var(--color-border);
														
 
															 }
														
 
															+.See_all {
														
 
															+  width: 60px;
														
 
															+  height: 24px;
														
 
															+  border-radius: 3px;
														
 
															+  color: var(--color-theme);
														
 
															+  margin: 0 16px;
														
 
															+  cursor: pointer;
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+}
														
 
															+.See_all:hover {
														
 
															+  background-color: var(--color-btn-default-bg-hover);
														
 
															+}
														
 
															+.iconfont_icon_text {
														
 
															+  margin-right: 2px;
														
 
															+  fill: var(--color-theme);
														
 
															+}
														
 
															+.transformTotal {
														
 
															+  transform: rotate(-180deg);
														
 
															+}
														
 
															+.inval {
														
 
															+  max-height: 100px;
														
 
															+  overflow-y: clip;
														
 
															+}
														
 
															+.seeall {
														
 
															+  max-height: 426px;
														
 
															+  overflow: scroll;
														
 
															+}
														
 
															+.isDisabled {
														
 
															+  background-color: var(--input-disabled-bg-color);
														
 
															+  color: #a8abb2;
														
 
															+  cursor: not-allowed;
														
 
															+  box-shadow: none !important;
														
 
															+}
														
 
															+.isDisabled:hover {
														
 
															+  border-color: var(--color-border);
														
 
															+}
														
 
															 </style>
														
--- a/src/components/ScoringGrade/components/DialogColorful.vue
+++ b/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="/src/styles/images/bubble_corner_colorful.png" />
														
 
															+        <img class="vector_img" :src="themeStore.theme == 'light' ? BubbleLight : BubbleDark" />
														
 
															       </div>
														
 
															     </div>
														
 
															     <div v-if="props.isshowDetails" class="dialogcolorful submit">
														
@@ -29,7 +33,7 @@ const submitDetails = (val: any) => {
 
															           style="width: 554px"
														
 
															           :rows="4"
														
 
															           type="textarea"
														
 
															-          placeholder="We look forward to hearing from you.  thank you for helping to build a better customer system"
														
 
															+          placeholder="We look forward to hearing from you. Thank you for helping to build a better customer system."
														
 
															         />
														
 
															         <div class="button_submit">
														
 
															           <el-button class="submit_button el-button--dark" @click="submitDetails(inputdetails)"
														
@@ -38,7 +42,7 @@ const submitDetails = (val: any) => {
 
															         </div>
														
 
															       </div>
														
 
															       <div class="vector vector_submit">
														
 
															-        <img class="vector_img" src="/src/styles/images/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>
														
--- a/src/components/ScoringGrade/components/DialogUe.vue
+++ b/src/components/ScoringGrade/components/DialogUe.vue
@@ -1,23 +1,38 @@
 
															 <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,
														
 
															   dialogWidth: String,
														
 
															   isShowAngry: Boolean,
														
 
															-  isShowSmile: Boolean
														
 
															+  isShowSmile: Boolean,
														
 
															+  isShowHappy: Boolean
														
 
															 })
														
 
															 const checkboxGroup1 = ref([])
														
 
															+const checkboxGroup2 = ref([])
														
 
															 const evaluate = [
														
 
															-  'Complete funtionality',
														
 
															-  'Accurate information',
														
 
															-  'Visualization of shipments',
														
 
															-  'Easy to use',
														
 
															-  'Performance'
														
 
															+  'Functionality',
														
 
															+  'Data accuracy',
														
 
															+  'Look and feel',
														
 
															+  'Ease of use',
														
 
															+  'Website performance'
														
 
															 ]
														
 
															-const emits = defineEmits(['changeAngryDetails', 'changeSmileRadio'])
														
 
															+const happyevaluate = [
														
 
															+  'Functionality',
														
 
															+  'Data accuracy',
														
 
															+  'Look and feel',
														
 
															+  'Ease of use',
														
 
															+  'Website performance'
														
 
															+]
														
 
															+const emits = defineEmits(['changeAngryDetails', 'changeSmileRadio', 'changeHappybuttonbox'])
														
 
															 const changebuttonbox = () => {
														
 
															-  emits('changeAngryDetails')
														
 
															+  emits('changeAngryDetails', checkboxGroup1.value)
														
 
															+}
														
 
															+const changeHappybuttonbox = () => {
														
 
															+  emits('changeHappybuttonbox', checkboxGroup2.value)
														
 
															 }
														
 
															 const Aspects = ref([
														
 
															   'Highly Dissatisfied',
														
@@ -35,27 +50,27 @@ interface smileAspectsItem {
 
															 const smileAspects = ref<smileAspectsItem[]>([])
														
 
															 smileAspects.value = [
														
 
															   {
														
 
															-    title: 'Complete funtionality',
														
 
															+    title: 'Functionality',
														
 
															     proposal: ['Highly Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Highly Satisfied'],
														
 
															     radio: ''
														
 
															   },
														
 
															   {
														
 
															-    title: 'Accurate information',
														
 
															+    title: 'Data accuracy',
														
 
															     proposal: ['Highly Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Highly Satisfied'],
														
 
															     radio: ''
														
 
															   },
														
 
															   {
														
 
															-    title: 'Visualization of shipments',
														
 
															+    title: 'Look and feel',
														
 
															     proposal: ['Highly Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Highly Satisfied'],
														
 
															     radio: ''
														
 
															   },
														
 
															   {
														
 
															-    title: 'Easy to use',
														
 
															+    title: 'Ease of use',
														
 
															     proposal: ['Highly Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Highly Satisfied'],
														
 
															     radio: ''
														
 
															   },
														
 
															   {
														
 
															-    title: 'Performance',
														
 
															+    title: 'Website performance',
														
 
															     proposal: ['Highly Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Highly Satisfied'],
														
 
															     radio: ''
														
 
															   }
														
@@ -65,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">
														
@@ -82,6 +98,18 @@ const changeSmileRadio = (title: any, value: any) => {
 
															           </el-checkbox-button>
														
 
															         </el-checkbox-group>
														
 
															       </div>
														
 
															+      <div v-if="props.isShowHappy" class="dialogflex">
														
 
															+        <el-checkbox-group v-model="checkboxGroup2" size="large">
														
 
															+          <el-checkbox-button
														
 
															+            @change="changeHappybuttonbox"
														
 
															+            v-for="item in happyevaluate"
														
 
															+            :key="item"
														
 
															+            :value="item"
														
 
															+          >
														
 
															+            {{ item }}
														
 
															+          </el-checkbox-button>
														
 
															+        </el-checkbox-group>
														
 
															+      </div>
														
 
															       <div v-if="props.isShowSmile">
														
 
															         <div class="smile_flex">
														
 
															           <div class="smile_title_left"></div>
														
@@ -106,7 +134,9 @@ const changeSmileRadio = (title: any, value: any) => {
 
															         </div>
														
 
															       </div>
														
 
															     </div>
														
 
															-    <div class="vector"><img class="vector_img" src="/src/styles/images/bubble_corner.png" /></div>
														
 
															+    <div class="vector">
														
 
															+      <img class="vector_img" :src="themeStore.theme == 'light' ? BubbleLight : BubbleDark" />
														
 
															+    </div>
														
 
															   </div>
														
 
															 </template>
														
 
															 <style lang="scss" scoped>
														
@@ -118,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 {
														
@@ -130,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;
														
@@ -137,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;
														
 
															 }
														
@@ -150,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);
														
 
															 }
														
@@ -195,8 +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-select-border);
														
 
															   font-size: var(--font-size-3);
														
 
															   border-radius: 6px 0 0 6px;
														
 
															   display: flex;
														
@@ -209,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 {
														
--- a/src/components/ScoringGrade/image/Vector.png
+++ b/src/components/ScoringGrade/image/Vector.png
--- a/src/components/ScoringGrade/image/angry_2.png
+++ b/src/components/ScoringGrade/image/angry_2.png
--- a/src/components/ScoringGrade/image/bubble_corner.png
+++ b/src/components/ScoringGrade/image/bubble_corner.png
--- a/src/components/ScoringGrade/image/bubble_corner@2x.png
+++ b/src/components/ScoringGrade/image/bubble_corner@2x.png
--- a/src/components/ScoringGrade/image/bubble_corner_colorful.png
+++ b/src/components/ScoringGrade/image/bubble_corner_colorful.png
--- a/src/components/ScoringGrade/image/bubble_corner_colorful@2x.png
+++ b/src/components/ScoringGrade/image/bubble_corner_colorful@2x.png
--- a/src/components/ScoringGrade/image/bubble_corner_colorful_darkmode.png
+++ b/src/components/ScoringGrade/image/bubble_corner_colorful_darkmode.png
--- a/src/components/ScoringGrade/image/bubble_corner_darkmode.png
+++ b/src/components/ScoringGrade/image/bubble_corner_darkmode.png
--- a/src/components/ScoringGrade/image/dashboard_scoring.png
+++ b/src/components/ScoringGrade/image/dashboard_scoring.png
--- a/src/components/ScoringGrade/image/happy_2.png
+++ b/src/components/ScoringGrade/image/happy_2.png
--- a/src/components/ScoringGrade/image/hhh_2.png
+++ b/src/components/ScoringGrade/image/hhh_2.png
--- a/src/components/ScoringGrade/image/sad_2.png
+++ b/src/components/ScoringGrade/image/sad_2.png
--- a/src/components/ScoringGrade/image/score_angry.png
+++ b/src/components/ScoringGrade/image/score_angry.png
--- a/src/components/ScoringGrade/image/score_happy.png
+++ b/src/components/ScoringGrade/image/score_happy.png
--- a/src/components/ScoringGrade/image/score_hhh.png
+++ b/src/components/ScoringGrade/image/score_hhh.png
--- a/src/components/ScoringGrade/image/score_normal.png
+++ b/src/components/ScoringGrade/image/score_normal.png
--- a/src/components/ScoringGrade/image/score_sad.png
+++ b/src/components/ScoringGrade/image/score_sad.png
--- a/src/components/ScoringGrade/image/score_smile.png
+++ b/src/components/ScoringGrade/image/score_smile.png
--- a/src/components/ScoringGrade/image/smile_2.png
+++ b/src/components/ScoringGrade/image/smile_2.png
--- a/src/components/ScoringGrade/image/submit_successful.png
+++ b/src/components/ScoringGrade/image/submit_successful.png
--- a/src/components/ScoringGrade/src/ScoringGrade.vue
+++ b/src/components/ScoringGrade/src/ScoringGrade.vue
@@ -2,11 +2,24 @@
 
															 import { ref } from 'vue'
														
 
															 import DialogUe from '../components/DialogUe.vue'
														
 
															 import DialogColorful from '../components/DialogColorful.vue'
														
 
															+import angryPng from '../image/score_angry.png'
														
 
															+import angryPng2 from '../image/angry_2.png'
														
 
															+import sadPng from '../image/score_sad.png'
														
 
															+import sadPng2 from '../image/sad_2.png'
														
 
															+import smilePng from '../image/score_smile.png'
														
 
															+import smilePng2 from '../image/smile_2.png'
														
 
															+import hhhPng from '../image/score_hhh.png'
														
 
															+import hhhPng2 from '../image/hhh_2.png'
														
 
															+import happyPng from '../image/score_happy.png'
														
 
															+import happyPng2 from '../image/happy_2.png'
														
 
															+import normalPng from '../image/score_normal.png'
														
 
															+import submitsucessful from '../image/submit_successful.png'
														
 
															-const isShow = ref(true)
														
 
															+// const isShow = ref(true)
														
 
															 const visible = ref(false)
														
 
															 const isLoaded = ref(false)
														
 
															 const isShowAngry = ref(false)
														
 
															+const isShowHappy = ref(false)
														
 
															 const isShowSmile = ref(false)
														
 
															 const isLoaded_share = ref(false)
														
 
															 const isshowexpression = ref(true)
														
@@ -15,6 +28,7 @@ const isshowDetails_submit = ref(false)
 
															 const isshowDetails = ref(true)
														
 
															 interface AvaterItem {
														
 
															   src: string
														
 
															+  src1: string
														
 
															   itemsrc: string
														
 
															   itemtext: string
														
 
															   expression: string
														
@@ -25,39 +39,44 @@ const colorfulSrc = ref()
 
															 const dialogcontent = ref()
														
 
															 const angryproposal = ref()
														
 
															 const smileproposal = ref()
														
 
															-const clickSrc = ref('/src/styles/images/score_normal.png')
														
 
															+const clickSrc = ref(normalPng)
														
 
															 avater.value = [
														
 
															   {
														
 
															-    src: '/src/styles/images/score_angry.png',
														
 
															-    itemsrc: '/src/styles/images/angry_2.png',
														
 
															+    src: angryPng,
														
 
															+    src1: angryPng,
														
 
															+    itemsrc: angryPng2,
														
 
															     itemtext: 'We are so sorry for the inconveniences. We value your experience immensely. ',
														
 
															     expression: 'angry',
														
 
															     proposal: 'Could you please tell us which aspects of the system you are dissatisfied with?'
														
 
															   },
														
 
															   {
														
 
															-    src: '/src/styles/images/score_sad.png',
														
 
															-    itemsrc: '/src/styles/images/sad_2.png',
														
 
															+    src: sadPng,
														
 
															+    src1: sadPng,
														
 
															+    itemsrc: sadPng2,
														
 
															     itemtext: 'We are so sorry for the inconveniences. We value your experience immensely. ',
														
 
															-    expression: 'angry',
														
 
															+    expression: 'sad',
														
 
															     proposal: 'Could you please tell us which aspects of the system you are dissatisfied with?'
														
 
															   },
														
 
															   {
														
 
															-    src: '/src/styles/images/score_smile.png',
														
 
															-    itemsrc: '/src/styles/images/smile_2.png',
														
 
															+    src: smilePng,
														
 
															+    src1: smilePng,
														
 
															+    itemsrc: smilePng2,
														
 
															     itemtext: 'Thank you for sharing your thoughts with us. We value your experience greatly.',
														
 
															     expression: 'smile',
														
 
															     proposal: 'Could you share what aspects you liked and what could be improved ?'
														
 
															   },
														
 
															   {
														
 
															-    src: '/src/styles/images/score_hhh.png',
														
 
															-    itemsrc: '/src/styles/images/hhh_2.png',
														
 
															+    src: hhhPng,
														
 
															+    src1: hhhPng,
														
 
															+    itemsrc: hhhPng2,
														
 
															     itemtext: 'Thank you very much for giving us a satisfied rating on our service or system.',
														
 
															-    expression: 'happy',
														
 
															+    expression: 'hhh',
														
 
															     proposal: 'We are curious to learn more about what specifically made you feel satisfied. '
														
 
															   },
														
 
															   {
														
 
															-    src: '/src/styles/images/score_happy.png',
														
 
															-    itemsrc: '/src/styles/images/happy_2.png',
														
 
															+    src: happyPng,
														
 
															+    src1: happyPng,
														
 
															+    itemsrc: happyPng2,
														
 
															     itemtext: 'Thank you very much for giving us a satisfied rating on our service or system.',
														
 
															     expression: 'happy',
														
 
															     proposal: 'We are curious to learn more about what specifically made you feel satisfied. '
														
@@ -66,76 +85,195 @@ avater.value = [
 
															 const dialogVisible = ref(false)
														
 
															 // 控制表情normal的显隐
														
 
															-const showPopver = () => {
														
 
															-  isShow.value = false
														
 
															-}
														
 
															+// const showPopver = () => {
														
 
															+//   isShow.value = false
														
 
															+// }
														
 
															 // 控制popover的显隐
														
 
															+const checkexpression = ref()
														
 
															 const showScore = (item: any) => {
														
 
															   visible.value = false
														
 
															   dialogVisible.value = true
														
 
															   clickSrc.value = item.itemsrc
														
 
															-  isShow.value = true
														
 
															+  // isShow.value = true
														
 
															   colorfulSrc.value = item.itemsrc
														
 
															   setTimeout(() => {
														
 
															     isLoaded.value = true
														
 
															     dialogcontent.value = item.itemtext
														
 
															     if (item.expression == 'angry') {
														
 
															+      SubmitText.value = 'Apologize once again for your experience.'
														
 
															+      checkexpression.value = 'angry'
														
 
															       setTimeout(() => {
														
 
															         isShowAngry.value = true
														
 
															         angryproposal.value = item.proposal
														
 
															-      }, 1500)
														
 
															+      }, 1000)
														
 
															+    } else if (item.expression == 'sad') {
														
 
															+      SubmitText.value = 'Apologize once again for your experience.'
														
 
															+      checkexpression.value = 'sad'
														
 
															+      setTimeout(() => {
														
 
															+        isShowAngry.value = true
														
 
															+        angryproposal.value = item.proposal
														
 
															+      }, 1000)
														
 
															     } else if (item.expression == 'smile') {
														
 
															+      SubmitText.value = 'We greatly appreciate your valuable time and feedback.'
														
 
															+      checkexpression.value = 'smile'
														
 
															       setTimeout(() => {
														
 
															         isShowSmile.value = true
														
 
															         smileproposal.value = item.proposal
														
 
															-      }, 1500)
														
 
															-    } else {
														
 
															+      }, 1000)
														
 
															+    } else if (item.expression == 'hhh') {
														
 
															+      SubmitText.value = 'Once again, thank you for your positive evaluation.'
														
 
															+      checkexpression.value = 'hhh'
														
 
															       setTimeout(() => {
														
 
															-        isShowAngry.value = true
														
 
															+        isShowHappy.value = true
														
 
															+        angryproposal.value = item.proposal
														
 
															+      }, 1000)
														
 
															+    } else if (item.expression == 'happy') {
														
 
															+      SubmitText.value = 'Once again, thank you for your positive evaluation.'
														
 
															+      checkexpression.value = 'happy'
														
 
															+      setTimeout(() => {
														
 
															+        isShowHappy.value = true
														
 
															         angryproposal.value = item.proposal
														
 
															-      }, 1500)
														
 
															+      }, 1000)
														
 
															     }
														
 
															   }, 1000)
														
 
															 }
														
 
															 const avatarClick = () => {
														
 
															-  visible.value = true
														
 
															+  visible.value = !visible.value
														
 
															   isshowDetails.value = true
														
 
															 }
														
 
															 //关闭对话框后，隐藏有动画的对话框
														
 
															 const closeDialog = () => {
														
 
															-  isLoaded.value = false
														
 
															-  isLoaded.value = false
														
 
															-  isLoaded_share.value = false
														
 
															-  isShowAngry.value = false
														
 
															-  isshowDetails.value = false
														
 
															-  isShowSmile.value = false
														
 
															-  isshowexpression_details.value = false
														
 
															+  setTimeout(() => {
														
 
															+    isLoaded.value = false
														
 
															+    isLoaded_share.value = false
														
 
															+    isShowAngry.value = false
														
 
															+    isShowHappy.value = false
														
 
															+    isShowSmile.value = false
														
 
															+    isshowexpression_details.value = false
														
 
															+    isshowDetails_submit.value = false
														
 
															+    smileCheckbox.value = {}
														
 
															+    angryCheckbox.value = []
														
 
															+    happyCheckbox.value = []
														
 
															+  }, 1500)
														
 
															 }
														
 
															 //生气表情，选择建议后显示对话
														
 
															-const changeAngryDetails = () => {
														
 
															+const angryCheckbox = ref([])
														
 
															+const happyCheckbox = ref([])
														
 
															+const smileCheckbox = ref()
														
 
															+const changeAngryDetails = (val: any) => {
														
 
															+  angryCheckbox.value = val
														
 
															   setTimeout(() => {
														
 
															     isLoaded_share.value = true
														
 
															     setTimeout(() => {
														
 
															       isshowexpression_details.value = true
														
 
															-    }, 1500)
														
 
															-  }, 1500)
														
 
															+      setTimeout(() => {
														
 
															+        document.getElementById('moreMerchant').scrollIntoView()
														
 
															+      }, 200)
														
 
															+    }, 1000)
														
 
															+  }, 500)
														
 
															+}
														
 
															+//开心表情，选择建议后显示对话
														
 
															+const changeHappybuttonbox = (val: any) => {
														
 
															+  happyCheckbox.value = val
														
 
															+  setTimeout(() => {
														
 
															+    isLoaded_share.value = true
														
 
															+    setTimeout(() => {
														
 
															+      isshowexpression_details.value = true
														
 
															+      setTimeout(() => {
														
 
															+        document.getElementById('moreMerchant').scrollIntoView()
														
 
															+      }, 200)
														
 
															+    }, 1000)
														
 
															+  }, 500)
														
 
															 }
														
 
															 // smile提交后显示对话
														
 
															 const changeSmileRadio = (val: any) => {
														
 
															+  smileCheckbox.value = val
														
 
															   if (Object.keys(val).length == 5) {
														
 
															-    changeAngryDetails()
														
 
															+    setTimeout(() => {
														
 
															+      isLoaded_share.value = true
														
 
															+      setTimeout(() => {
														
 
															+        isshowexpression_details.value = true
														
 
															+        setTimeout(() => {
														
 
															+          document.getElementById('moreMerchant').scrollIntoView()
														
 
															+        }, 200)
														
 
															+      }, 1000)
														
 
															+    }, 500)
														
 
															   }
														
 
															 }
														
 
															 // 提交details
														
 
															 const submitDetails = (val: any) => {
														
 
															-  console.log(val)
														
 
															-  isshowDetails_submit.value = true
														
 
															+  const username = localStorage.getItem('account') ? localStorage.getItem('account') : ''
														
 
															+  if (angryCheckbox.value.length) {
														
 
															+    $api
														
 
															+      .scoringgrade({
														
 
															+        suggestion: angryCheckbox.value,
														
 
															+        proposal: val,
														
 
															+        expression: checkexpression.value,
														
 
															+        username: username
														
 
															+      })
														
 
															+      .then((res: any) => {
														
 
															+        if (res.code == 200) {
														
 
															+          isshowDetails.value = false
														
 
															+          isshowDetails_submit.value = true
														
 
															+          setTimeout(() => {
														
 
															+            isshowDetails_submit.value = false
														
 
															+            dialogVisible.value = false
														
 
															+          }, 3000)
														
 
															+        }
														
 
															+      })
														
 
															+  } else if (happyCheckbox.value.length) {
														
 
															+    $api
														
 
															+      .scoringgrade({
														
 
															+        suggestion: happyCheckbox.value,
														
 
															+        proposal: val,
														
 
															+        expression: checkexpression.value
														
 
															+      })
														
 
															+      .then((res: any) => {
														
 
															+        if (res.code == 200) {
														
 
															+          isshowDetails.value = false
														
 
															+          isshowDetails_submit.value = true
														
 
															+          setTimeout(() => {
														
 
															+            isshowDetails_submit.value = false
														
 
															+            dialogVisible.value = false
														
 
															+          }, 3000)
														
 
															+        }
														
 
															+      })
														
 
															+  } else {
														
 
															+    let obj: any = {}
														
 
															+    obj.Complete_funtionality = smileCheckbox.value['Complete funtionality']
														
 
															+    obj.Accurate_data = smileCheckbox.value['Accurate data']
														
 
															+    obj.Clear_information = smileCheckbox.value['Clear information']
														
 
															+    obj.Easy_to_use = smileCheckbox.value['Easy to use']
														
 
															+    obj.System_Performance = smileCheckbox.value['System Performance']
														
 
															+    $api
														
 
															+      .scoringgrade({
														
 
															+        proposal: val,
														
 
															+        expression: checkexpression.value,
														
 
															+        ...obj
														
 
															+      })
														
 
															+      .then((res: any) => {
														
 
															+        if (res.code == 200) {
														
 
															+          isshowDetails.value = false
														
 
															+          isshowDetails_submit.value = true
														
 
															+          setTimeout(() => {
														
 
															+            isshowDetails_submit.value = false
														
 
															+            dialogVisible.value = false
														
 
															+          }, 3000)
														
 
															+        }
														
 
															+      })
														
 
															+  }
														
 
															+}
														
 
															+const mouseenter = (item: any) => {
														
 
															+  item.src = item.itemsrc
														
 
															 }
														
 
															+const mouseout = (item: any) => {
														
 
															+  item.src = item.src1
														
 
															+}
														
 
															+const SubmitText = ref()
														
 
															 </script>
														
 
															 <template>
														
 
															-  <div class="scoring" :style="[{ display: isShow ? 'flex' : 'none' }]">
														
 
															+  <div class="scoring">
														
 
															     <el-popover
														
 
															-      @show="showPopver"
														
 
															       :visible="visible"
														
 
															       placement="left"
														
 
															       trigger="click"
														
@@ -143,26 +281,28 @@ const submitDetails = (val: any) => {
 
															       popper-class="popver_class"
														
 
															     >
														
 
															       <template #reference>
														
 
															-        <el-avatar
														
 
															-          @click="avatarClick"
														
 
															-          :style="[{ display: isShow ? 'block' : 'none' }]"
														
 
															-          :size="46"
														
 
															-          shape="square"
														
 
															-          :src="clickSrc"
														
 
															-        />
														
 
															+        <el-avatar @click="avatarClick" :size="46" shape="square" :src="clickSrc" />
														
 
															       </template>
														
 
															-      <div class="flex">
														
 
															+      <div class="score_flex">
														
 
															         <el-popover
														
 
															           placement="top"
														
 
															-          :width="260"
														
 
															+          :width="276"
														
 
															           trigger="hover"
														
 
															           v-for="(item, index) in avater"
														
 
															           :key="index"
														
 
															+          popper-class="avater_popver"
														
 
															           content="How satisfied are you with this system?"
														
 
															         >
														
 
															           <template #reference>
														
 
															             <div class="score">
														
 
															-              <el-avatar @click="showScore(item)" :size="40" shape="square" :src="item.src" />
														
 
															+              <el-avatar
														
 
															+                @mouseenter="mouseenter(item)"
														
 
															+                @mouseout="mouseout(item)"
														
 
															+                @click="showScore(item)"
														
 
															+                :size="40"
														
 
															+                shape="square"
														
 
															+                :src="item.src"
														
 
															+              />
														
 
															             </div>
														
 
															           </template>
														
 
															         </el-popover>
														
@@ -170,7 +310,7 @@ const submitDetails = (val: any) => {
 
															     </el-popover>
														
 
															     <el-dialog
														
 
															       v-model="dialogVisible"
														
 
															-      title="Hi,Caroline!"
														
 
															+      title="Hi!"
														
 
															       :destroy-on-close="true"
														
 
															       @close="closeDialog"
														
 
															       width="640"
														
@@ -197,6 +337,14 @@ const submitDetails = (val: any) => {
 
															             dialogWidth="573px"
														
 
															           ></DialogUe>
														
 
															         </transition>
														
 
															+        <transition name="fade" v-if="isShowHappy">
														
 
															+          <DialogUe
														
 
															+            :content="angryproposal"
														
 
															+            :isShowHappy="isShowHappy"
														
 
															+            @changeHappybuttonbox="changeHappybuttonbox"
														
 
															+            dialogWidth="573px"
														
 
															+          ></DialogUe>
														
 
															+        </transition>
														
 
															         <transition name="fade" v-if="isShowSmile">
														
 
															           <DialogUe
														
 
															             :isShowSmile="isShowSmile"
														
@@ -211,7 +359,7 @@ const submitDetails = (val: any) => {
 
															             dialogWidth="334px"
														
 
															           ></DialogUe>
														
 
															         </transition>
														
 
															-        <transition name="fade" v-if="isshowexpression_details">
														
 
															+        <transition name="fade" id="moreMerchant" v-if="isshowexpression_details">
														
 
															           <DialogColorful
														
 
															             :isshowDetails="isshowexpression_details"
														
 
															             @submitDetails="submitDetails"
														
@@ -225,10 +373,10 @@ const submitDetails = (val: any) => {
 
															         title="Submit Successful"
														
 
															       >
														
 
															         <template #icon>
														
 
															-          <el-image src="/src/styles/images/submit_successful.png" />
														
 
															+          <el-image :src="submitsucessful" />
														
 
															         </template>
														
 
															         <template #sub-title>
														
 
															-          <div class="sub_title_text">Apologize once again for your experience.</div>
														
 
															+          <div class="sub_title_text">{{ SubmitText }}</div>
														
 
															           <div class="sub_title_text">
														
 
															             We are committed to working hard to provide better services.
														
 
															           </div>
														
@@ -243,23 +391,29 @@ const submitDetails = (val: any) => {
 
															   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;
														
 
															   right: 0;
														
 
															-  bottom: 168px;
														
 
															+  bottom: 80px;
														
 
															   display: flex;
														
 
															   align-items: center;
														
 
															   justify-content: center;
														
 
															 }
														
 
															 .el-avatar {
														
 
															-  background-color: #fff;
														
 
															+  background-color: var(--management-bg-color);
														
 
															   cursor: pointer;
														
 
															 }
														
 
															-.flex {
														
 
															+.score_flex {
														
 
															   display: flex;
														
 
															   height: 64px;
														
 
															   align-items: center;
														
 
															+  position: absolute;
														
 
															+  right: 64px;
														
 
															+  top: -30px;
														
 
															+  background-color: var(--management-bg-color);
														
 
															+  border-radius: 12px 0 0 12px;
														
 
															 }
														
 
															 .score {
														
 
															   margin: 0 16px;
														
@@ -269,16 +423,25 @@ const submitDetails = (val: any) => {
 
															   box-shadow: none;
														
 
															   filter: drop-shadow(-2px 2px 12px rgba(0, 0, 0, 0.15));
														
 
															   right: 0 !important;
														
 
															+  height: 0;
														
 
															+  background: transparent;
														
 
															+  z-index: 2013 !important;
														
 
															+  border: none;
														
 
															+}
														
 
															+:deep(.scoreDialog) {
														
 
															+  background-color: var(--management-bg-color);
														
 
															 }
														
 
															 .el-dialog.scoreDialog {
														
 
															   position: absolute;
														
 
															   margin-bottom: 0;
														
 
															   right: 0;
														
 
															-  bottom: 168px;
														
 
															+  bottom: 60px;
														
 
															+  max-height: 640px;
														
 
															+  overflow-y: scroll;
														
 
															 }
														
 
															 .fade-enter-active,
														
 
															 .fade-leave-active {
														
 
															-  transition: opacity 3s;
														
 
															+  transition: opacity 1s;
														
 
															 }
														
 
															 .fade-enter-from,
														
 
															 .fade-leave-to {
														
@@ -286,8 +449,15 @@ const submitDetails = (val: any) => {
 
															 }
														
 
															 .sub_title_text {
														
 
															   color: var(--color-neutral-3);
														
 
															+  font-size: 14px;
														
 
															+  line-height: 21px;
														
 
															 }
														
 
															 .result {
														
 
															-  height: 578px;
														
 
															+  height: 560px;
														
 
															+  padding: 0;
														
 
															+}
														
 
															+.avater_popver {
														
 
															+  padding-left: 8px !important;
														
 
															+  color: var(--color-neutral-1) !important;
														
 
															 }
														
 
															-</style>
														
 
															+</style>
														
--- a/src/components/SelectTable/src/SelectTable.vue
+++ b/src/components/SelectTable/src/SelectTable.vue
@@ -20,6 +20,21 @@ const props = defineProps({
 
															   keyVal: {
														
 
															     type: String,
														
 
															     default: 'city'
														
 
															+  },
														
 
															+  isError: {
														
 
															+    type: Boolean,
														
 
															+    default: false
														
 
															+  },
														
 
															+  ASSearchMode: {
														
 
															+    type: String,
														
 
															+    default: ''
														
 
															+  },
														
 
															+  ASSearchFiled: {
														
 
															+    type: String,
														
 
															+    default: ''
														
 
															+  },
														
 
															+  ASSearchObj: {
														
 
															+    type: Object
														
 
															   }
														
 
															 })
														
@@ -74,7 +89,10 @@ const handleSearch = _.debounce((val?) => {
 
															         term: searchVal.value ? searchVal.value : '',
														
 
															         cp: state.currentPage,
														
 
															         ps: state.pageSize,
														
 
															-        rc: '-1'
														
 
															+        rc: '-1',
														
 
															+        search_field: props.ASSearchFiled,
														
 
															+        search_mode: props.ASSearchMode,
														
 
															+        ...props.ASSearchObj
														
 
															       })
														
 
															       .then((res: any) => {
														
 
															         if (res.code == 200) {
														
@@ -104,7 +122,10 @@ const handleCurrentChange = () => {
 
															         term: searchVal.value ? searchVal.value : '',
														
 
															         cp: state.currentPage,
														
 
															         ps: state.pageSize,
														
 
															-        rc: state.total
														
 
															+        rc: state.total,
														
 
															+        search_field: props.ASSearchFiled,
														
 
															+        search_mode: props.ASSearchMode,
														
 
															+        ...props.ASSearchObj
														
 
															       })
														
 
															       .then((res: any) => {
														
 
															         if (res.code == 200) {
														
@@ -148,6 +169,7 @@ const onInput = () => {
 
															         <div
														
 
															           class="el-input el-input--suffix el-tooltip__trigger"
														
 
															           @click="disabled ? null : onInput"
														
 
															+          :class="{ is_error: props.isError }"
														
 
															         >
														
 
															           <div class="el-input__wrapper" :class="{ 'is-disabled': disabled }">
														
 
															             <el-space :class="[innerTags.length ? 'custom-el-spaceno' : 'custom-el-space']">
														
@@ -275,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;
														
 
															   }
														
 
															 }
														
@@ -291,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;
														
 
															   }
														
@@ -301,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;
														
@@ -317,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;
														
 
															 }
														
@@ -338,4 +354,10 @@ const onInput = () => {
 
															 :deep(.custom-el-space .el-space__item) {
														
 
															   width: 100%;
														
 
															 }
														
 
															+
														
 
															+.is_error {
														
 
															+  :deep(.el-input__wrapper) {
														
 
															+    box-shadow: 0 0 0 0.5px var(--color-danger) !important;
														
 
															+  }
														
 
															+}
														
 
															 </style>
														
--- a/src/components/SelectTableSelect/src/SelectTableSelect.vue
+++ b/src/components/SelectTableSelect/src/SelectTableSelect.vue
@@ -1,13 +1,11 @@
 
															 <script setup lang="ts">
														
 
															 import { ref, watch } from 'vue'
														
 
															 import IconDropDown from '@/components/IconDropDown'
														
 
															-import VerrifyInformation from '@/components/VerrifyInformation'
														
 
															 import SelectTable from '@/components/SelectTable'
														
 
															 interface TypeItem {
														
 
															   placesType: ''
														
 
															   placesname: []
														
 
															-  isshowVerfication: boolean
														
 
															 }
														
 
															 interface dateoptions {
														
 
															   value: string
														
@@ -17,8 +15,9 @@ interface Props {
 
															   AddDateType: TypeItem[]
														
 
															   ASPlaceholder: string
														
 
															   DateTypeoptions: dateoptions[]
														
 
															-  Verification: string
														
 
															   selectedPartyTypeoptions: Array<string>
														
 
															+  TablesearchTableQeury: Object
														
 
															+  TablesearchMode: String
														
 
															 }
														
 
															 interface optionsItem {
														
 
															   value: string
														
@@ -74,10 +73,16 @@ const changeSelect = (val: any) => {
 
															 }
														
 
															 // 选中name改变
														
 
															 const emit = defineEmits(['changeAutoSelectAddType', 'delSelect', 'changeAutoSelect'])
														
 
															+const errorBoolean = ref(false)
														
 
															 let AutoSelectObj: any = {}
														
 
															 const changeAutoSelect = (val: any, value: any) => {
														
 
															-  AutoSelectObj[val] = value.join()
														
 
															-  emit('changeAutoSelect', AutoSelectObj)
														
 
															+  if (value.length) {
														
 
															+    errorBoolean.value = true
														
 
															+  } else {
														
 
															+    errorBoolean.value = false
														
 
															+  }
														
 
															+  AutoSelectObj[val] = value
														
 
															+  emit('changeAutoSelect', AutoSelectObj, errorBoolean.value)
														
 
															 }
														
 
															 const typeSelectFocus = (index: any, e: any) => {
														
 
															   typeSelectIndex.value = index
														
@@ -168,20 +173,30 @@ const checkdestination = (row: any, index: any) => {
 
															     <div style="margin-top: 16px">
														
 
															       <div class="ETD_title">Places Details</div>
														
 
															       <SelectTable
														
 
															+        :ASSearchFiled="AddType[index].placesType"
														
 
															+        :ASSearchObj="props.TablesearchTableQeury"
														
 
															+        :ASSearchMode="props.TablesearchMode"
														
 
															         :key-val="
														
 
															-          AddType[index].placesType && AddType[index].placesType === 'Port of Loading'
														
 
															+          AddType[index].placesType &&
														
 
															+          (AddType[index].placesType === 'Port of Loading' ||
														
 
															+            AddType[index].placesType === 'Port of Discharge')
														
 
															             ? 'uncode'
														
 
															             : 'city'
														
 
															         "
														
 
															+        :is-error="
														
 
															+          AddType[index].placesType != '' && AddType[index].placesname.length == 0 ? true : false
														
 
															+        "
														
 
															         :disabled="AddType[index].placesType ? false : true"
														
 
															         :searchInput="AddType[index].placesname"
														
 
															         @check="(row) => checkdestination(row, index)"
														
 
															       />
														
 
															-      <VerrifyInformation
														
 
															-        :isshowVerfication="AddDateType[index]?.isshowVerfication"
														
 
															-        :verification="props.Verification"
														
 
															+
														
 
															+      <div
														
 
															+        class="error"
														
 
															+        v-if="AddType[index].placesType != '' && AddType[index].placesname.length == 0"
														
 
															       >
														
 
															-      </VerrifyInformation>
														
 
															+        Please Input Places Details
														
 
															+      </div>
														
 
															     </div>
														
 
															   </div>
														
 
															 </template>
														
@@ -233,8 +248,10 @@ const checkdestination = (row: any, index: any) => {
 
															     color: var(--badge__content--warning);
														
 
															   }
														
 
															 }
														
 
															-
														
 
															-.AlertInput :deep(.el-select__wrapper) {
														
 
															-  box-shadow: 0 0 0 0.5px var(--color-danger);
														
 
															+.error {
														
 
															+  font-size: 12px;
														
 
															+  color: var(--color-danger);
														
 
															+  line-height: 14px;
														
 
															+  margin-top: 5px;
														
 
															 }
														
 
															 </style>
														
--- a/src/components/ShipmentStatus/src/ShipmentStatus.vue
+++ b/src/components/ShipmentStatus/src/ShipmentStatus.vue
@@ -1,5 +1,6 @@
 
															 <script setup lang="ts">
														
 
															 import dayjs from 'dayjs'
														
 
															+import { useOverflow } from '@/hooks/useOverflow'
														
 
															 const props = defineProps({
														
 
															   data: Object
														
@@ -36,6 +37,10 @@ const getDateHeight = (index: number) => {
 
															 const formatDate = (date: string) => {
														
 
															   return date ? dayjs(date).format('MMM-DD-YYYY') : '--'
														
 
															 }
														
 
															+
														
 
															+const pathRef = ref()
														
 
															+
														
 
															+const { isOverflow: isPathOverflow } = useOverflow(pathRef, props)
														
 
															 </script>
														
 
															 <template>
														
@@ -45,7 +50,7 @@ const formatDate = (date: string) => {
 
															       :class="{
														
 
															         last: !stepItem.isArrival
														
 
															       }"
														
 
															-      v-for="stepItem in simplexData"
														
 
															+      v-for="(stepItem, index) in simplexData"
														
 
															       :key="stepItem.index"
														
 
															     >
														
 
															       <div class="data">
														
@@ -53,7 +58,14 @@ const formatDate = (date: string) => {
 
															         <div class="right-info">
														
 
															           <div class="path">
														
 
															             <div class="label">{{ stepItem.label }}</div>
														
 
															-            <div class="detail-path">{{ stepItem.path }}</div>
														
 
															+            <el-tooltip v-if="isPathOverflow?.[index]" placement="top">
														
 
															+              <template #content>{{ stepItem.path }}</template>
														
 
															+
														
 
															+              <div ref="pathRef" class="detail-path single-line-ellipsis">{{ stepItem.path }}</div>
														
 
															+            </el-tooltip>
														
 
															+            <div v-else ref="pathRef" class="detail-path single-line-ellipsis">
														
 
															+              {{ stepItem.path }}
														
 
															+            </div>
														
 
															           </div>
														
 
															           <div
														
 
															             class="transport-info"
														
@@ -81,7 +93,7 @@ const formatDate = (date: string) => {
 
															 // 单式样式
														
 
															 .simplex-content {
														
 
															   width: 100%;
														
 
															-  padding: 8px 0 9px;
														
 
															+  padding: 24px 8px 9px 16px;
														
 
															 }
														
 
															 .detail-step-item {
														
 
															   & > .data {
														
@@ -99,7 +111,7 @@ const formatDate = (date: string) => {
 
															       font-weight: 700;
														
 
															       text-align: center;
														
 
															       line-height: 16px;
														
 
															-      color: #fff;
														
 
															+      color: var(--color-mode);
														
 
															     }
														
 
															     .right-info {
														
 
															       flex: 1;
														
@@ -131,7 +143,7 @@ const formatDate = (date: string) => {
 
															         .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;
														
@@ -139,7 +151,7 @@ const formatDate = (date: string) => {
 
															         .detail-path {
														
 
															           flex: 1;
														
 
															           width: 252px;
														
 
															-          background-color: #fff;
														
 
															+          background-color: transparent;
														
 
															           font-weight: 700;
														
 
															           color: var(--color-neutral-1);
														
 
															           border: 1px solid #bfc1c3;
														
@@ -178,21 +190,22 @@ const formatDate = (date: string) => {
 
															   &.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);
														
 
															           }
														
 
															         }
														
 
															       }
														
@@ -202,4 +215,11 @@ const formatDate = (date: string) => {
 
															     }
														
 
															   }
														
 
															 }
														
 
															+.single-line-ellipsis {
														
 
															+  height: 18px;
														
 
															+  display: inline-block; /* 或者根据需要使用 inline-block */
														
 
															+  white-space: nowrap; /* 不换行 */
														
 
															+  overflow: hidden; /* 隐藏超出部分 */
														
 
															+  text-overflow: ellipsis; /* 超出部分显示省略号 */
														
 
															+}
														
 
															 </style>
														
--- a/src/components/TransportMode/src/TransportMode.vue
+++ b/src/components/TransportMode/src/TransportMode.vue
@@ -5,19 +5,33 @@ import emitter from '@/utils/bus'
 
															 interface ListItem {
														
 
															   name: string
														
 
															+  sname: string
														
 
															   number: number
														
 
															   icon: string
														
 
															   checked: boolean
														
 
															 }
														
 
															 interface Props {
														
 
															   TransportListItem: ListItem[]
														
 
															+  isShipment: Boolean
														
 
															 }
														
 
															 const props = withDefaults(defineProps<Props>(), {})
														
 
															 const TransportList = ref(props.TransportListItem)
														
 
															 watch(
														
 
															   () => props.TransportListItem,
														
 
															   (current) => {
														
 
															+    console.log(current)
														
 
															     TransportList.value = current
														
 
															+    TransportList.value.forEach((item: any) => {
														
 
															+      if (item.checked) {
														
 
															+        checkedCount.push(item.sname)
														
 
															+        const map = new Map()
														
 
															+        checkedCount.forEach((item) => map.set(item, true))
														
 
															+        checkedCount = [...map.keys()]
														
 
															+      }
														
 
															+      if (checkedCount.length == TransportList.value.length) {
														
 
															+        checkAll.value = true
														
 
															+      }
														
 
															+    })
														
 
															   }
														
 
															 )
														
@@ -27,6 +41,7 @@ onMounted(() => {
 
															       clearList()
														
 
															     }
														
 
															   })
														
 
															+  defaultTransport()
														
 
															 })
														
 
															 onBeforeMount(() => {
														
@@ -51,25 +66,21 @@ const handleCheckAllChange = (val: any) => {
 
															   TransportList.value.forEach((item: any) => {
														
 
															     if (val) {
														
 
															       item.checked = true
														
 
															-      checkedCount.push(item.name)
														
 
															+      checkedCount.push(item.sname)
														
 
															     } else {
														
 
															       item.checked = false
														
 
															       checkedCount = []
														
 
															     }
														
 
															   })
														
 
															 }
														
 
															-const handleCheckedTransportChange = (value: any, checked: any, index: any) => {
														
 
															+const handleCheckedTransportChange = (value: any, checked: any) => {
														
 
															   if (checked) {
														
 
															     checkedCount.push(value)
														
 
															     const map = new Map()
														
 
															     checkedCount.forEach((item) => map.set(item, true))
														
 
															     checkedCount = [...map.keys()]
														
 
															   } else {
														
 
															-    if (checkedCount.length == 1) {
														
 
															-      checkedCount.splice(0, 1)
														
 
															-    } else {
														
 
															-      checkedCount.splice(index, 1)
														
 
															-    }
														
 
															+    checkedCount.splice(checkedCount.indexOf(value), 1)
														
 
															   }
														
 
															   checkAll.value = checkedCount.length === TransportList.value.length
														
 
															 }
														
@@ -77,26 +88,37 @@ const handleCheckedTransportChange = (value: any, checked: any, index: any) => {
 
															 // 清除选中
														
 
															 const clearList = () => {
														
 
															   checkAll.value = false
														
 
															-  TransportList.value.forEach((item: any) => {
														
 
															-    item.checked = false
														
 
															-  })
														
 
															+  if (TransportList.value != undefined) {
														
 
															+    TransportList.value.forEach((item: any) => {
														
 
															+      item.checked = false
														
 
															+    })
														
 
															+  }
														
 
															   changedata.value = ''
														
 
															   checkedCount = []
														
 
															   emit('clearTransportTags')
														
 
															 }
														
 
															-const emit = defineEmits(['TransportSearch', 'clearTransportTags'])
														
 
															+const emit = defineEmits(['TransportSearch', 'clearTransportTags', 'defaultTransport'])
														
 
															 const changedata = ref()
														
 
															 //点击搜索
														
 
															+const TransportData = {
														
 
															+  title: 'Transport Mode',
														
 
															+  data: ['']
														
 
															+}
														
 
															 const TransportSearch = (visible: any) => {
														
 
															+  TransportList.value.forEach((item: any) => {
														
 
															+    if (item.checked) {
														
 
															+      checkedCount.push(item.sname)
														
 
															+      const map = new Map()
														
 
															+      checkedCount.forEach((item) => map.set(item, true))
														
 
															+      checkedCount = [...map.keys()]
														
 
															+    }
														
 
															+  })
														
 
															   if (checkedCount.length == TransportList.value.length) {
														
 
															-    changedata.value = 'All'
														
 
															+    changedata.value = ['All']
														
 
															   } else {
														
 
															-    changedata.value = checkedCount.join(', ')
														
 
															-  }
														
 
															-  const TransportData = {
														
 
															-    title: 'Transport Mode',
														
 
															-    data: changedata.value
														
 
															+    changedata.value = checkedCount
														
 
															   }
														
 
															+  TransportData.data = changedata.value
														
 
															   emit('TransportSearch', TransportData)
														
 
															   if (!dropdown1.value) return
														
 
															   if (visible) {
														
@@ -105,6 +127,76 @@ const TransportSearch = (visible: any) => {
 
															     dropdown1.value.handleOpen()
														
 
															   }
														
 
															 }
														
 
															+const searchTableQeury = ref()
														
 
															+const searchTableQeuryTracking = ref()
														
 
															+const defaultTransport = () => {
														
 
															+  if (props.isShipment) {
														
 
															+    if (
														
 
															+      sessionStorage.getItem('clickParams') == null ||
														
 
															+      sessionStorage.getItem('clickParams') == '{}'
														
 
															+    ) {
														
 
															+      if (sessionStorage.getItem('searchTableQeuryTracking') == null) {
														
 
															+        checkAll.value = true
														
 
															+        TransportData.data = ['All']
														
 
															+      } else {
														
 
															+        searchTableQeuryTracking.value =
														
 
															+          JSON.parse(sessionStorage.getItem('searchTableQeuryTracking') as string) || {}
														
 
															+        if (searchTableQeuryTracking.value.transport_mode.length !== 0) {
														
 
															+          TransportData.data = searchTableQeuryTracking.value.transport_mode
														
 
															+          searchTableQeuryTracking.value.transport_mode.forEach((item: any) => {
														
 
															+            if (item == 'All') {
														
 
															+              checkAll.value = true
														
 
															+            } else {
														
 
															+              checkAll.value = false
														
 
															+            }
														
 
															+          })
														
 
															+        } else {
														
 
															+          TransportData.data = []
														
 
															+          checkAll.value = false
														
 
															+        }
														
 
															+      }
														
 
															+      emit('defaultTransport', TransportData, searchTableQeuryTracking.value)
														
 
															+    } else {
														
 
															+      const data = JSON.parse(sessionStorage.getItem('reportList') as string) || {}
														
 
															+      searchTableQeuryTracking.value =
														
 
															+        JSON.parse(sessionStorage.getItem('searchTableQeuryTracking') as string) || {}
														
 
															+      if (data.transport_mode) {
														
 
															+        const obj = {
														
 
															+          title: 'Transport Mode',
														
 
															+          data: data.transport_mode
														
 
															+        }
														
 
															+        data.transport_mode.forEach((item: any) => {
														
 
															+          if (item == 'All') {
														
 
															+            checkAll.value = true
														
 
															+          }
														
 
															+        })
														
 
															+        emit('defaultTransport', obj, searchTableQeuryTracking.value)
														
 
															+      }
														
 
															+    }
														
 
															+  } else {
														
 
															+    if (sessionStorage.getItem('searchTableQeury') == null) {
														
 
															+      checkAll.value = true
														
 
															+      TransportData.data = ['All']
														
 
															+    } else {
														
 
															+      searchTableQeury.value =
														
 
															+        JSON.parse(sessionStorage.getItem('searchTableQeury') as string) || {}
														
 
															+      if (searchTableQeury.value.transport_mode.length !== 0) {
														
 
															+        TransportData.data = searchTableQeury.value.transport_mode
														
 
															+        searchTableQeury.value.transport_mode.forEach((item: any) => {
														
 
															+          if (item == 'All') {
														
 
															+            checkAll.value = true
														
 
															+          } else {
														
 
															+            checkAll.value = false
														
 
															+          }
														
 
															+        })
														
 
															+      } else {
														
 
															+        TransportData.data = []
														
 
															+        checkAll.value = false
														
 
															+      }
														
 
															+    }
														
 
															+    emit('defaultTransport', TransportData, searchTableQeury.value)
														
 
															+  }
														
 
															+}
														
 
															 </script>
														
 
															 <template>
														
 
															   <div class="select">
														
@@ -112,7 +204,7 @@ const TransportSearch = (visible: any) => {
 
															       <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>
														
@@ -140,7 +232,7 @@ const TransportSearch = (visible: any) => {
 
															                 :value="item.name"
														
 
															                 v-model="item.checked"
														
 
															                 class="checkbox"
														
 
															-                @change="handleCheckedTransportChange(item.name, item.checked, index)"
														
 
															+                @change="handleCheckedTransportChange(item.sname, item.checked)"
														
 
															               >
														
 
															                 <div class="checkbox_title">
														
 
															                   <span class="iconfont_icon">
														
@@ -176,6 +268,7 @@ const TransportSearch = (visible: any) => {
 
															 .iconfont_select {
														
 
															   width: 17px;
														
 
															   height: 17px;
														
 
															+  fill: var(--color-neutral-1);
														
 
															 }
														
 
															 .select {
														
 
															   width: 186px;
														
@@ -183,7 +276,7 @@ const TransportSearch = (visible: any) => {
 
															   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 {
														
@@ -239,7 +332,7 @@ const TransportSearch = (visible: any) => {
 
															   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);
														
@@ -271,8 +364,13 @@ const TransportSearch = (visible: any) => {
 
															   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,
														
@@ -294,6 +392,6 @@ const TransportSearch = (visible: any) => {
 
															 }
														
 
															 .el-divider--horizontal {
														
 
															   margin: 8px 0;
														
 
															-  border-top-color: var(--color-border);
														
 
															+  border-top-color: var(--border-color-2);
														
 
															 }
														
 
															 </style>
														
--- a/src/components/VBox/src/VBox.vue
+++ b/src/components/VBox/src/VBox.vue
@@ -74,7 +74,7 @@ const vBoxPopoverRef = ref()
 
															             </div>
														
 
															           </div>
														
 
															           <template #reference v-if="props.isDraggable">
														
 
															-            <el-button type="text" class="sort handle-draggable">
														
 
															+            <el-button class="sort handle-draggable el-button--text">
														
 
															               <span class="font_family icon-icon_dragsort__b" style="font-size: 16px"></span>
														
 
															             </el-button>
														
 
															           </template>
														
@@ -116,6 +116,8 @@ const vBoxPopoverRef = ref()
 
															       display: flex;
														
 
															       align-items: center;
														
 
															       justify-content: center;
														
 
															+      height: 32px;
														
 
															+      width: 32px;
														
 
															       span.icon-icon_dragsort__b {
														
 
															         color: var(--color-neutral-1);
														
 
															       }
														
--- a/src/components/VBox_Dashboard/src/VBox_Dashboard.vue
+++ b/src/components/VBox_Dashboard/src/VBox_Dashboard.vue
@@ -45,25 +45,6 @@ const vBoxPopoverRef = ref()
 
															     <div class="header">
														
 
															       <slot name="header">Title</slot>
														
 
															       <div class="option">
														
 
															-        <!-- <el-popover
														
 
															-          ref="vBoxPopoverRef"
														
 
															-          popper-class="v-box-options"
														
 
															-          :width="172"
														
 
															-          placement="bottom"
														
 
															-          trigger="click"
														
 
															-        >
														
 
															-          <div class="options">
														
 
															-            <div
														
 
															-              class="move-item"
														
 
															-              @click="handleDraggable(item.name)"
														
 
															-              v-for="item in optionList"
														
 
															-              :key="item.name"
														
 
															-            >
														
 
															-              <span class="font_family" :class="[`icon-${item.icon}`]"></span>
														
 
															-              <span>{{ item.name }}</span>
														
 
															-            </div>
														
 
															-          </div>
														
 
															-          <template #reference> -->
														
 
															         <el-button type="text" class="sort handle-draggable">
														
 
															           <span class="iconfont_icon">
														
 
															             <svg class="iconfont" aria-hidden="true">
														
@@ -71,11 +52,9 @@ const vBoxPopoverRef = ref()
 
															             </svg>
														
 
															           </span>
														
 
															         </el-button>
														
 
															-        <!-- </template>
														
 
															-        </el-popover> -->
														
 
															       </div>
														
 
															       <div class="cancel" @click="changeCancel">
														
 
															-        <span class="iconfont_icon">
														
 
															+        <span class="iconfont_icon iconfont_cancel">
														
 
															           <svg class="iconfont" aria-hidden="true">
														
 
															             <use xlink:href="#icon-icon_reject_b"></use>
														
 
															           </svg>
														
@@ -92,6 +71,21 @@ const vBoxPopoverRef = ref()
 
															 </template>
														
 
															 <style lang="scss" scoped>
														
 
															+.iconfont_icon {
														
 
															+  margin-right: 0;
														
 
															+}
														
 
															+.cancel {
														
 
															+  fill: var(--color-neutral-1);
														
 
															+  position: absolute;
														
 
															+  right: 12px;
														
 
															+  top: 12px;
														
 
															+  height: 24px;
														
 
															+  width: 24px;
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  justify-content: center;
														
 
															+  cursor: pointer;
														
 
															+}
														
 
															 .v-box {
														
 
															   border: 1px solid var(--color-border);
														
 
															   overflow: hidden;
														
@@ -101,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;
														
@@ -112,16 +107,16 @@ const vBoxPopoverRef = ref()
 
															       display: flex;
														
 
															       align-items: center;
														
 
															     }
														
 
															-    .cancel {
														
 
															-      position: absolute;
														
 
															-      right: 26px;
														
 
															-      cursor: pointer;
														
 
															-      top: 0;
														
 
															+    .cancel:hover {
														
 
															+      background-color: var(--color-btn-default-bg-hover);
														
 
															+      border-radius: 6px;
														
 
															     }
														
 
															     .sort {
														
 
															       position: absolute;
														
 
															       top: 50%;
														
 
															-      right: -40px;
														
 
															+      width: 24px;
														
 
															+      height: 24px;
														
 
															+      left: 12px;
														
 
															       transform: translateY(-50%);
														
 
															       display: flex;
														
 
															       align-items: center;
														
--- a/src/components/VBreadcrumb/index.ts
+++ b/src/components/VBreadcrumb/index.ts
@@ -0,0 +1 @@
 
															+export { default } from './src/VBreadcrumb.vue'
														
--- a/src/components/VBreadcrumb/src/VBreadcrumb.vue
+++ b/src/components/VBreadcrumb/src/VBreadcrumb.vue
@@ -0,0 +1,75 @@
 
															+<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()
														
 
															+  router.push({
														
 
															+    name: routeData.label,
														
 
															+    query: routeData.query
														
 
															+  })
														
 
															+}
														
 
															+const jumpLink = (label: string, query: any) => {
														
 
															+  label &&
														
 
															+    router.push({
														
 
															+      name: label,
														
 
															+      query: query
														
 
															+    })
														
 
															+}
														
 
															+</script>
														
 
															+
														
 
															+<template>
														
 
															+  <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">
														
 
															+        <span @click="jumpLink(routeItem.label, routeItem.query)" class="previous-route">{{
														
 
															+          routeItem.label
														
 
															+        }}</span>
														
 
															+        <span class="interval">|</span>
														
 
															+      </template>
														
 
															+      <span v-else>{{ routeItem.label }}</span>
														
 
															+    </template>
														
 
															+  </div>
														
 
															+  <div v-else></div>
														
 
															+</template>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.v-breadcrumd {
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  font-weight: 700;
														
 
															+  gap: 4px;
														
 
															+  .icon-icon_back_b {
														
 
															+    font-size: 18px;
														
 
															+    cursor: pointer;
														
 
															+  }
														
 
															+  .interval {
														
 
															+    margin: 0 2px;
														
 
															+    color: var(--color-neutral-3);
														
 
															+    transform: rotate(20deg);
														
 
															+  }
														
 
															+  .previous-route {
														
 
															+    color: var(--color-neutral-3);
														
 
															+    cursor: pointer;
														
 
															+    &:hover {
														
 
															+      color: var(--color-theme);
														
 
															+    }
														
 
															+  }
														
 
															+  &.is-dark {
														
 
															+    .interval,
														
 
															+    .previous-route {
														
 
															+      color: var(--color-neutral-2);
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
--- a/src/components/VBreadcrumd/index.ts
+++ b/src/components/VBreadcrumd/index.ts
@@ -1 +0,0 @@
 
															-export { default } from './src/VBreadcrumd.vue'
														
--- a/src/components/VBreadcrumd/src/VBreadcrumd.vue
+++ b/src/components/VBreadcrumd/src/VBreadcrumd.vue
@@ -1,38 +0,0 @@
 
															-<script setup lang="ts">
														
 
															-import { useParentPathStore } from '@/stores/modules/parentPath'
														
 
															-import { useRouter } from 'vue-router'
														
 
															-
														
 
															-const router = useRouter()
														
 
															-const parentPathStore = useParentPathStore()
														
 
															-
														
 
															-const handleGoBack = () => {
														
 
															-  router.push({ path: parentPathStore.parentPathInfo?.fullPath })
														
 
															-}
														
 
															-</script>
														
 
															-
														
 
															-<template>
														
 
															-  <div class="v-breadcrumd" v-if="parentPathStore.parentPathInfo?.name">
														
 
															-    <span class="font_family icon-icon_back_b" @click="handleGoBack"></span>
														
 
															-    <span style="color: var(--color-neutral-3)">{{ parentPathStore.parentPathInfo?.name }}</span>
														
 
															-    <span class="interval">|</span>
														
 
															-    <span style="font-weight: 700">Detail</span>
														
 
															-  </div>
														
 
															-  <div v-else></div>
														
 
															-</template>
														
 
															-
														
 
															-<style lang="scss" scoped>
														
 
															-.v-breadcrumd {
														
 
															-  display: flex;
														
 
															-  align-items: center;
														
 
															-  gap: 4px;
														
 
															-  .icon-icon_back_b {
														
 
															-    font-size: 18px;
														
 
															-    cursor: pointer;
														
 
															-  }
														
 
															-  .interval {
														
 
															-    margin: 0 2px;
														
 
															-    color: var(--color-neutral-3);
														
 
															-    transform: rotate(20deg);
														
 
															-  }
														
 
															-}
														
 
															-</style>
														
--- a/src/components/VEmpty/src/VEmpty.vue
+++ b/src/components/VEmpty/src/VEmpty.vue
@@ -1,15 +1,29 @@
 
															-<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">Whoops, No matches</p>
														
 
															-    <p class="light">We didn't find any search results,</p>
														
 
															-    <p class="light">please try to adjust your search keywords.</p>
														
 
															+    <p class="title">
														
 
															+      <slot name="title">No Results Found</slot>
														
 
															+    </p>
														
 
															+    <slot name="result">
														
 
															+      <p class="light">We didn't find any search results,</p>
														
 
															+      <p class="light">please try to adjust your search keywords.</p>
														
 
															+    </slot>
														
 
															     <div class="suggestion">
														
 
															-      <slot></slot>
														
 
															+      <slot name="suggestion"></slot>
														
 
															     </div>
														
 
															   </div>
														
 
															 </template>
														
--- a/src/components/VEmpty/src/images/default_dark_image.png
+++ b/src/components/VEmpty/src/images/default_dark_image.png
--- a/src/components/VLoading/src/VLoading.vue
+++ b/src/components/VLoading/src/VLoading.vue
@@ -8,7 +8,7 @@
 
															 interface internalProps {
														
 
															   target?: string
														
 
															   loading: boolean
														
 
															-  isLoadingBackground: boolean
														
 
															+  isLoadingBackground?: boolean
														
 
															 }
														
 
															 const props = withDefaults(defineProps<internalProps>(), {
														
@@ -18,8 +18,11 @@ const props = withDefaults(defineProps<internalProps>(), {
 
															 </script>
														
 
															 <template>
														
 
															   <Teleport :to="props.target">
														
 
															-    <div v-if="props.loading" class="v-loading-mask"
														
 
															-      :style="{ background: props.isLoadingBackground ? 'none' : '#2B2F36' }">
														
 
															+    <div
														
 
															+      v-if="props.loading"
														
 
															+      class="v-loading-mask"
														
 
															+      :style="{ background: props.isLoadingBackground ? 'none' : '#2B2F36' }"
														
 
															+    >
														
 
															       <div class="v-loading-spinner">
														
 
															         <div>
														
 
															           <img class="circular" src="./images/icon_loading.png" alt="" />
														
@@ -43,11 +46,11 @@ const props = withDefaults(defineProps<internalProps>(), {
 
															 }
														
 
															 .v-loading-spinner {
														
 
															+  position: sticky;
														
 
															   top: 50%;
														
 
															-  margin-top: -24px;
														
 
															+  transform: translateY(-50%);
														
 
															   width: 100%;
														
 
															   text-align: center;
														
 
															-  position: absolute;
														
 
															 }
														
 
															 .circular {
														
@@ -59,7 +62,7 @@ const props = withDefaults(defineProps<internalProps>(), {
 
															 }
														
 
															 .loading-text {
														
 
															-  color: var(--color-neutral-3);
														
 
															+  color: #b5b9bf;
														
 
															 }
														
 
															 @keyframes loading-rotate {
														
--- a/src/components/VSliderVerification/index.ts
+++ b/src/components/VSliderVerification/index.ts
@@ -0,0 +1 @@
 
															+export { default } from './src/VSliderVerification.vue'
														
--- a/src/components/VSliderVerification/src/VSliderVerification.vue
+++ b/src/components/VSliderVerification/src/VSliderVerification.vue
@@ -0,0 +1,238 @@
 
															+<script lang="ts" setup>
														
 
															+//滑动图片验证码部分
														
 
															+import Img01 from './image/verification-img-1.png'
														
 
															+import Img02 from './image/verification-img-2.png'
														
 
															+import Img03 from './image/verification-img-3.png'
														
 
															+import Img04 from './image/verification-img-4.png'
														
 
															+import { ref } from 'vue'
														
 
															+//引入'vue3-puzzle-vcode'插件
														
 
															+import Vcode from 'vue3-puzzle-vcode'
														
 
															+
														
 
															+const openDialog = () => {
														
 
															+  isShow.value = true
														
 
															+  nextTick(() => {
														
 
															+    addElement()
														
 
															+    onSuccess()
														
 
															+    updateSliderBackground('success')
														
 
															+  })
														
 
															+}
														
 
															+// 添加自定义元素
														
 
															+const addElement = () => {
														
 
															+  addTipsNode()
														
 
															+  addSliderBtnNode('start')
														
 
															+  updateRefreshImg()
														
 
															+}
														
 
															+
														
 
															+const updateRefreshImg = () => {
														
 
															+  const targetNode: any = document.querySelector('img.reset_')
														
 
															+  if (targetNode) {
														
 
															+    // 使用 import.meta.url 结合 new URL 获取图片的正确路径
														
 
															+    targetNode.src = new URL('./image/icon_refresh_bold_b.png', import.meta.url).href
														
 
															+  }
														
 
															+}
														
 
															+const addTipsNode = () => {
														
 
															+  const childNode = document.createElement('div')
														
 
															+  childNode.className = 'tips'
														
 
															+  childNode.innerHTML = `
														
 
															+    <p>Please drag the slider below to complete the</p>
														
 
															+    <p>verification to ensure normal access</p>
														
 
															+  `
														
 
															+  const parentNode = document.querySelector('.vue-auth-box_')
														
 
															+  if (parentNode.firstChild) {
														
 
															+    parentNode.insertBefore(childNode, parentNode.firstChild)
														
 
															+  } else {
														
 
															+    parentNode.appendChild(childNode)
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const styleMap = {
														
 
															+  start: {
														
 
															+    thumbColor: 'var(--color-slider-thumb-start)',
														
 
															+    thumbIcon: 'icon-icon_drag__line_b',
														
 
															+    trackBackground: 'var(--color-success)'
														
 
															+  },
														
 
															+  success: {
														
 
															+    thumbColor: '#fff',
														
 
															+    thumbIcon: 'icon-icon_confirm_b',
														
 
															+    trackBackground: 'var(--color-success)'
														
 
															+  },
														
 
															+  error: {
														
 
															+    thumbColor: '#fff',
														
 
															+    thumbIcon: 'icon-icon_reject_b',
														
 
															+    trackBackground: '#c7353f'
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const addSliderBtnNode = (state: string) => {
														
 
															+  const parentNode = document.querySelector('.range-btn')
														
 
															+  if (state === 'start') {
														
 
															+    parentNode.innerHTML = `
														
 
															+      <span style="color: ${styleMap[state].thumbColor}" class="font_family ${styleMap[state].thumbIcon}"></span>
														
 
															+  `
														
 
															+  } else {
														
 
															+    parentNode.innerHTML = `
														
 
															+    <div class="icon-border" style="background: ${styleMap[state].trackBackground}">
														
 
															+      <span style="color: ${styleMap[state].thumbColor}" class="font_family ${styleMap[state].thumbIcon}"></span>
														
 
															+    </div>
														
 
															+  `
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const isShow = ref(false)
														
 
															+
														
 
															+// 根据不同的状态，设置已滑动区域的背景颜色
														
 
															+const updateSliderBackground = (state: string) => {
														
 
															+  const targetNode: any = document.querySelector('.range-slider')
														
 
															+  targetNode.style.background = styleMap[state].trackBackground
														
 
															+}
														
 
															+
														
 
															+const emit = defineEmits<{
														
 
															+  close: []
														
 
															+}>()
														
 
															+// 监听验证成功事件，因为这里库中的成功事件有0.8秒的延迟，所以这里手动监听验证成功事件
														
 
															+const onSuccess = () => {
														
 
															+  // 选择要监听的目标元素
														
 
															+  const targetNode = document.querySelector('.info-box_') // 将此选择器替换为你的实际目标
														
 
															+  if (targetNode) {
														
 
															+    const observer = new MutationObserver((mutationsList) => {
														
 
															+      mutationsList.forEach((mutation) => {
														
 
															+        if (mutation.type === 'childList') {
														
 
															+          if ((mutation.target as any).innerHTML === 'Verification successful') {
														
 
															+            updateSliderBackground('success')
														
 
															+            addSliderBtnNode('success')
														
 
															+            setTimeout(() => {
														
 
															+              emit('close')
														
 
															+              isShow.value = false
														
 
															+            }, 500)
														
 
															+          }
														
 
															+        }
														
 
															+      })
														
 
															+    })
														
 
															+
														
 
															+    // 配置 MutationObserver，监听子节点的变化
														
 
															+    const config = { childList: true, subtree: true }
														
 
															+
														
 
															+    // 启动监听
														
 
															+    observer.observe(targetNode, config)
														
 
															+  }
														
 
															+}
														
 
															+const close = () => {
														
 
															+  isShow.value = true
														
 
															+}
														
 
															+const fail = () => {
														
 
															+  updateSliderBackground('error')
														
 
															+  addSliderBtnNode('error')
														
 
															+  setTimeout(() => {
														
 
															+    updateSliderBackground('start')
														
 
															+    addSliderBtnNode('start')
														
 
															+  }, 800)
														
 
															+}
														
 
															+
														
 
															+defineExpose({
														
 
															+  openDialog
														
 
															+})
														
 
															+</script>
														
 
															+<template>
														
 
															+  <Vcode
														
 
															+    :show="isShow"
														
 
															+    @close="close"
														
 
															+    @fail="fail"
														
 
															+    :canvasWidth="320"
														
 
															+    :canvasHeight="180"
														
 
															+    sliderText="Swipe to verify"
														
 
															+    :sliderSize="38"
														
 
															+    successText="Verification successful"
														
 
															+    failText="Verification failed"
														
 
															+    :range="5"
														
 
															+    :imgs="[Img01, Img02, Img03, Img04]"
														
 
															+  ></Vcode>
														
 
															+</template>
														
 
															+<style lang="scss" scoped>
														
 
															+.slider-verification {
														
 
															+  width: 400px;
														
 
															+  height: 373px;
														
 
															+  padding: 40px;
														
 
															+  .tips {
														
 
															+    text-align: center;
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
 
															+<style lang="scss">
														
 
															+// 整体框架
														
 
															+.vue-auth-box_ {
														
 
															+  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;
														
 
															+  }
														
 
															+  .icon-border {
														
 
															+    display: flex;
														
 
															+    justify-content: center;
														
 
															+    align-items: center;
														
 
															+    width: 16px !important;
														
 
															+    height: 16px !important;
														
 
															+    border-radius: 50%;
														
 
															+    border: none !important;
														
 
															+    span {
														
 
															+      font-size: 14px !important;
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+div.vue-puzzle-vcode {
														
 
															+  background-color: rgba(43, 47, 54, 0.7);
														
 
															+}
														
 
															+
														
 
															+.vue-auth-box_ .auth-control_ div.range-box {
														
 
															+  background-color: #87909e;
														
 
															+  box-shadow: none;
														
 
															+}
														
 
															+.vue-auth-box_ div.auth-body_ {
														
 
															+  border-radius: 6px;
														
 
															+}
														
 
															+// 已滑动区域的样式
														
 
															+.vue-auth-box_ .auth-control_ .range-box div.range-slider {
														
 
															+  background-color: var(--color-success);
														
 
															+}
														
 
															+
														
 
															+.vue-auth-box_ .auth-body_ div.loading-box_.hide_ {
														
 
															+  display: none;
														
 
															+}
														
 
															+
														
 
															+// 成功的提示
														
 
															+.vue-auth-box_ .auth-body_ div.info-box_ {
														
 
															+  background: var(--color-success);
														
 
															+}
														
 
															+// 失败的提示
														
 
															+.vue-auth-box_ .auth-body_ div.info-box_.fail {
														
 
															+  background: #c7353f;
														
 
															+}
														
 
															+
														
 
															+.vue-auth-box_ .auth-control_ .range-box .range-slider {
														
 
															+  border-radius: 6px;
														
 
															+}
														
 
															+
														
 
															+.vue-auth-box_ .auth-control_ div.range-box {
														
 
															+  border-radius: 6px;
														
 
															+}
														
 
															+// 滑块
														
 
															+.vue-auth-box_ .auth-control_ .range-box .range-slider .range-btn {
														
 
															+  border-radius: 6px;
														
 
															+}
														
 
															+
														
 
															+.vue-auth-box_ .auth-body_ .reset_ {
														
 
															+  width: 20px;
														
 
															+  height: 20px;
														
 
															+  top: 10px;
														
 
															+  right: 10px;
														
 
															+}
														
 
															+
														
 
															+.vue-auth-box_ .auth-control_ .range-box .range-text {
														
 
															+  color: #fff;
														
 
															+}
														
 
															+</style>
														
--- a/src/components/VSliderVerification/src/image/icon_refresh_bold_b.png
+++ b/src/components/VSliderVerification/src/image/icon_refresh_bold_b.png
--- a/src/components/VSliderVerification/src/image/verification-img-1.png
+++ b/src/components/VSliderVerification/src/image/verification-img-1.png
--- a/src/components/VSliderVerification/src/image/verification-img-2.png
+++ b/src/components/VSliderVerification/src/image/verification-img-2.png
--- a/src/components/VSliderVerification/src/image/verification-img-3.png
+++ b/src/components/VSliderVerification/src/image/verification-img-3.png
--- a/src/components/VSliderVerification/src/image/verification-img-4.png
+++ b/src/components/VSliderVerification/src/image/verification-img-4.png
--- a/src/components/VTag/src/VTag.vue
+++ b/src/components/VTag/src/VTag.vue
@@ -9,6 +9,7 @@ interface internalProps {
 
															     | 'Departure'
														
 
															     | 'Arrived'
														
 
															     | 'Completed'
														
 
															+    | 'Departed'
														
 
															   large?: boolean
														
 
															 }
														
@@ -20,7 +21,8 @@ const mappingTable = new Map([
 
															   ['Cargo Received', 'cargo-received'],
														
 
															   ['Departure', 'departure'],
														
 
															   ['Arrived', 'arrived'],
														
 
															-  ['Completed', 'completed']
														
 
															+  ['Completed', 'completed'],
														
 
															+  ['Departed', 'Departed']
														
 
															 ])
														
 
															 defineProps<internalProps>()
														
 
															 </script>
														
@@ -38,7 +40,7 @@ defineProps<internalProps>()
 
															   justify-content: center;
														
 
															   cursor: default;
														
 
															   align-items: center;
														
 
															-  padding: 4px 8px;
														
 
															+  padding: 5px 8px;
														
 
															   height: 22px;
														
 
															   line-height: 28px;
														
 
															   font-size: 12px;
														
@@ -113,6 +115,13 @@ defineProps<internalProps>()
 
															       background-color: var(--color-tag-completed);
														
 
															     }
														
 
															   }
														
 
															+  &.v-tag__Departed {
														
 
															+    background-color: var(--color-tag-Departed-bg);
														
 
															+    color: var(--color-tag-Departed);
														
 
															+    .dot {
														
 
															+      background-color: var(--color-tag-Departed);
														
 
															+    }
														
 
															+  }
														
 
															   & + .v-tag {
														
 
															     margin-left: 8px;
														
 
															   }
														
--- a/src/components/selectAutoSelect/src/selectAutoSelect.vue
+++ b/src/components/selectAutoSelect/src/selectAutoSelect.vue
@@ -1,11 +1,9 @@
 
															 <script setup lang="ts">
														
 
															 import { ref, watch } from 'vue'
														
 
															 import IconDropDown from '@/components/IconDropDown'
														
 
															-import VerrifyInformation from '@/components/VerrifyInformation'
														
 
															 interface TypeItem {
														
 
															   partyType: ''
														
 
															   partyname: []
														
 
															-  isshowVerfication: boolean
														
 
															 }
														
 
															 interface ListItem {
														
 
															   value: string
														
@@ -19,19 +17,31 @@ interface Props {
 
															   AddDateType: TypeItem[]
														
 
															   ASPlaceholder: string
														
 
															   DateTypeoptions: dateoptions[]
														
 
															-  Verification: string
														
 
															   selectedPartyTypeoptions: Array<string>
														
 
															+  ASSearchMode: String
														
 
															+  ASSearchObj: Object
														
 
															 }
														
 
															 interface optionsItem {
														
 
															   value: string
														
 
															   label: string
														
 
															 }
														
 
															+
														
 
															 const list = ref<ListItem[]>([])
														
 
															 const options = ref<ListItem[]>([])
														
 
															 const loading = ref(false)
														
 
															 const props = withDefaults(defineProps<Props>(), {})
														
 
															 const AddType = ref(props.AddDateType)
														
 
															-const value = ref()
														
 
															+watch(
														
 
															+  () => props.AddDateType,
														
 
															+  (val) => {
														
 
															+    AddType.value = val
														
 
															+  },
														
 
															+  {
														
 
															+    immediate: true,
														
 
															+    deep: true
														
 
															+  }
														
 
															+)
														
 
															+// const ErrorNumber = ref(0)
														
 
															 const dataTypeoptions = ref<optionsItem[]>([])
														
 
															 const typeSelectIndex = ref(-1)
														
 
															 watch(
														
@@ -57,8 +67,11 @@ watch(
 
															     deep: true
														
 
															   }
														
 
															 )
														
 
															+const ErrorNumber = ref(true)
														
 
															 const str = ref()
														
 
															+const search_field = ref()
														
 
															 const InputAutoSelect = (val: any) => {
														
 
															+  search_field.value = val
														
 
															   if (val.includes('Agent')) {
														
 
															     str.value = 'apex'
														
 
															   } else {
														
@@ -72,7 +85,10 @@ const remoteMethod = (query: string) => {
 
															       $api
														
 
															         .getMoreFiltersData({
														
 
															           term: query,
														
 
															-          type: str.value
														
 
															+          type: str.value,
														
 
															+          search_field: search_field.value,
														
 
															+          search_mode: props.ASSearchMode,
														
 
															+          ...props.ASSearchObj
														
 
															         })
														
 
															         .then((res: any) => {
														
 
															           if (res.code == 200) {
														
@@ -102,18 +118,16 @@ const changeSelect = (val: any) => {
 
															 // 选中name改变
														
 
															 const emit = defineEmits(['changeAutoSelectAddType', 'delSelect', 'changeAutoSelect'])
														
 
															 let AutoSelectObj: any = {}
														
 
															+let AutoSelectObj2: any = {}
														
 
															 const changeAutoSelect = (val: any, value: any) => {
														
 
															   AutoSelectObj[val] = value.join()
														
 
															-  emit('changeAutoSelect', AutoSelectObj)
														
 
															-}
														
 
															-// 清除警告样式
														
 
															-const removeClass = (val: any, index: any) => {
														
 
															-  const input_change = document.getElementsByClassName('input_change')
														
 
															-  if (input_change.length && val.partyname.length != 0) {
														
 
															-    if (input_change[index].classList.value.indexOf('AlertInput') != -1) {
														
 
															-      input_change[index].classList.remove('AlertInput')
														
 
															-    }
														
 
															+  AutoSelectObj2[val] = value
														
 
															+  if (value.length) {
														
 
															+    ErrorNumber.value = true
														
 
															+  } else {
														
 
															+    ErrorNumber.value = false
														
 
															   }
														
 
															+  emit('changeAutoSelect', AutoSelectObj, AutoSelectObj2, ErrorNumber.value)
														
 
															 }
														
 
															 const typeSelectFocus = (index: any, e: any) => {
														
 
															   typeSelectIndex.value = index
														
@@ -201,11 +215,12 @@ const typeSelectClick = (index: any, val: any) => {
 
															         multiple
														
 
															         filterable
														
 
															         remote
														
 
															-        class="input_change"
														
 
															+        :class="{
														
 
															+          is_error: AddType[index].partyType != '' && AddType[index].partyname.length == 0
														
 
															+        }"
														
 
															         :reserve-keyword="false"
														
 
															         :placeholder="props.ASPlaceholder"
														
 
															         collapse-tags
														
 
															-        @blur="removeClass(AddType[index], index)"
														
 
															         @input="InputAutoSelect(AddType[index].partyType)"
														
 
															         @change="changeAutoSelect(AddType[index].partyType, AddType[index].partyname)"
														
 
															         :disabled="AddType[index].partyType ? false : true"
														
@@ -220,14 +235,16 @@ const typeSelectClick = (index: any, val: any) => {
 
															           :label="item.label"
														
 
															           :value="item.value"
														
 
															         >
														
 
															-          <el-checkbox :checked="value?.includes(item.value)"></el-checkbox>
														
 
															+          <el-checkbox :checked="AddType[index].partyname?.includes(item.value)"></el-checkbox>
														
 
															           <div class="label">{{ item.value }}</div>
														
 
															         </el-option>
														
 
															       </el-select>
														
 
															-      <VerrifyInformation
														
 
															-        :isshowVerfication="AddDateType[index].isshowVerfication"
														
 
															-        :verification="props.Verification"
														
 
															-      ></VerrifyInformation>
														
 
															+      <div
														
 
															+        class="error"
														
 
															+        v-if="AddType[index].partyType != '' && AddType[index].partyname.length == 0"
														
 
															+      >
														
 
															+        Please Input Party Details
														
 
															+      </div>
														
 
															     </div>
														
 
															   </div>
														
 
															 </template>
														
@@ -280,7 +297,15 @@ const typeSelectClick = (index: any, val: any) => {
 
															   }
														
 
															 }
														
 
															-.AlertInput :deep(.el-select__wrapper) {
														
 
															-  box-shadow: 0 0 0 0.5px var(--color-danger);
														
 
															+.is_error {
														
 
															+  :deep(.el-select__wrapper) {
														
 
															+    box-shadow: 0 0 0 0.5px var(--color-danger);
														
 
															+  }
														
 
															+}
														
 
															+.error {
														
 
															+  font-size: 12px;
														
 
															+  color: var(--color-danger);
														
 
															+  line-height: 14px;
														
 
															+  margin-top: 5px;
														
 
															 }
														
 
															 </style>
														
--- a/src/components/transportationMode.ts
+++ b/src/components/transportationMode.ts
@@ -0,0 +1,6 @@
 
															+export const transportationMode: any = {
														
 
															+  'Ocean Freight': 'icon_ocean_b',
														
 
															+  'Air Freight': 'icon_airplane_b',
														
 
															+  'Road Freight': 'icon_truck_b',
														
 
															+  'Rail Freight': 'icon_railway_b'
														
 
															+}
														
--- a/src/hooks/rowClickStyle.ts
+++ b/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')) {
														
--- a/src/hooks/useOverflow.ts
+++ b/src/hooks/useOverflow.ts
@@ -0,0 +1,49 @@
 
															+import { ref, watch, onMounted, nextTick } from 'vue'
														
 
															+
														
 
															+export const useOverflow = (elementRef, dataRef) => {
														
 
															+  // 根据 elementRef 类型来初始化 isOverflow
														
 
															+  const isOverflow = Array.isArray(elementRef.value) ? ref([]) : ref(false)
														
 
															+
														
 
															+  const checkOverflow = (element) => {
														
 
															+    if (element) {
														
 
															+      return element.scrollWidth > element.clientWidth
														
 
															+    }
														
 
															+    return false
														
 
															+  }
														
 
															+
														
 
															+  // 用于处理单个或多个元素的溢出检查
														
 
															+  const updateOverflowStatus = () => {
														
 
															+    if (Array.isArray(elementRef.value)) {
														
 
															+      // 如果是数组，检查每个元素
														
 
															+      isOverflow.value = elementRef.value.map((el) => checkOverflow(el))
														
 
															+    } else {
														
 
															+      // 如果是单个元素，直接返回布尔值
														
 
															+      isOverflow.value = checkOverflow(elementRef.value)
														
 
															+    }
														
 
															+  }
														
 
															+
														
 
															+  // 初次 mounted 时检查是否溢出
														
 
															+  onMounted(() => {
														
 
															+    nextTick(() => {
														
 
															+      updateOverflowStatus()
														
 
															+    })
														
 
															+  })
														
 
															+
														
 
															+  // 监听数据变化，更新溢出状态
														
 
															+  watch(
														
 
															+    () => dataRef,
														
 
															+    () => {
														
 
															+      nextTick(() => {
														
 
															+        updateOverflowStatus()
														
 
															+      })
														
 
															+    },
														
 
															+    {
														
 
															+      deep: true,
														
 
															+      immediate: true
														
 
															+    }
														
 
															+  )
														
 
															+
														
 
															+  return {
														
 
															+    isOverflow
														
 
															+  }
														
 
															+}
														
--- a/src/main.ts
+++ b/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)
														
 
															-app.mount('#app')
														
 
															+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')
														
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,13 +1,14 @@
 
															 import { createRouter, createWebHistory } from 'vue-router'
														
 
															-import { useParentPathStore } from '@/stores/modules/parentPath'
														
 
															+import { useUserStore } from '@/stores/modules/user'
														
 
															+import { useBreadCrumb } from '@/stores/modules/breadCrumb'
														
 
															 const router = createRouter({
														
 
															-  history: createWebHistory(import.meta.env.BASE_URL),
														
 
															+  history: createWebHistory(`${import.meta.env.VITE_BASE_URL}`),
														
 
															   routes: [
														
 
															     {
														
 
															       path: '/',
														
 
															       name: 'Home',
														
 
															-      redirect: '/booking',
														
 
															+      redirect: '/dashboard',
														
 
															       component: () => import('../views/Layout'),
														
 
															       children: [
														
 
															         {
														
@@ -25,7 +26,7 @@ const router = createRouter({
 
															           name: 'Booking Detail',
														
 
															           component: () => import('../views/Booking/src/components/BookingDetail'),
														
 
															           meta: {
														
 
															-            parentPath: '/booking'
														
 
															+            activeMenu: '/booking'
														
 
															           }
														
 
															         },
														
 
															         {
														
@@ -36,12 +37,27 @@ const router = createRouter({
 
															         {
														
 
															           path: '/tracking/detail',
														
 
															           name: 'Tracking Detail',
														
 
															-          component: () => import('../views/Tracking/src/components/TrackingDetail')
														
 
															+          component: () => import('../views/Tracking/src/components/TrackingDetail'),
														
 
															+          meta: {
														
 
															+            activeMenu: '/tracking'
														
 
															+          }
														
 
															+        },
														
 
															+        {
														
 
															+          path: '/tracking/add-vgm',
														
 
															+          name: 'Add VGM',
														
 
															+          component: () =>
														
 
															+            import('../views/Tracking/src/components/TrackingTable/src/components/VGMView.vue'),
														
 
															+          meta: {
														
 
															+            activeMenu: '/tracking'
														
 
															+          }
														
 
															         },
														
 
															         {
														
 
															           path: '/public-tracking',
														
 
															           name: 'Public Tracking',
														
 
															-          component: () => import('../views/Tracking/src/components/PublicTracking')
														
 
															+          component: () => import('../views/Tracking/src/components/PublicTracking'),
														
 
															+          meta: {
														
 
															+            activeMenu: '/tracking'
														
 
															+          }
														
 
															         },
														
 
															         {
														
 
															           path: '/public-tracking/detail',
														
@@ -49,12 +65,23 @@ const router = createRouter({
 
															           component: () =>
														
 
															             import(
														
 
															               '../views/Tracking/src/components/PublicTracking/src/components/PublicTrackingDetail.vue'
														
 
															-            )
														
 
															+            ),
														
 
															+          meta: {
														
 
															+            activeMenu: '/tracking'
														
 
															+          }
														
 
															         },
														
 
															         {
														
 
															           path: '/login',
														
 
															           name: 'Login',
														
 
															-          component: () => import('../views/Login')
														
 
															+          component: () => import('../views/Login'),
														
 
															+          meta: {
														
 
															+            activeMenu: '/tracking'
														
 
															+          }
														
 
															+        },
														
 
															+        {
														
 
															+          path: '/reset-password',
														
 
															+          name: 'Reset Password',
														
 
															+          component: () => import('../views/Login/src/components/ChangePasswordCard.vue')
														
 
															         },
														
 
															         {
														
 
															           path: '/Operationlog',
														
@@ -68,11 +95,33 @@ const router = createRouter({
 
															 // * 路由拦截 beforeEach
														
 
															 router.beforeEach(async (to, from, next) => {
														
 
															-  const parentPathStore = useParentPathStore()
														
 
															-  if (to.path.includes('/detail')) {
														
 
															-    parentPathStore.setParentPath(from)
														
 
															-  } else {
														
 
															-    parentPathStore.clearParentPath()
														
 
															+  useBreadCrumb().setRouteList(to)
														
 
															+  // 如果手动跳转登录页，清除登录信息
														
 
															+  if (to.path === '/login') {
														
 
															+    if (localStorage.getItem('username')) {
														
 
															+      const userStore = useUserStore()
														
 
															+      await userStore.logout()
														
 
															+    }
														
 
															+    sessionStorage.removeItem('trackingTablePageInfo')
														
 
															+    sessionStorage.removeItem('bookingTablePageInfo')
														
 
															+  }
														
 
															+
														
 
															+  // 未登录白名单
														
 
															+  const whiteList = ['/login', '/public-tracking', '/public-tracking/detail', '/reset-password']
														
 
															+  // 判断是否登录
														
 
															+  if (!whiteList.includes(to.path) && !localStorage.getItem('username')) {
														
 
															+    const userStore = useUserStore()
														
 
															+    await userStore.logout()
														
 
															+    if (whiteList.includes(from.path)) {
														
 
															+      ElMessage.warning({
														
 
															+        message: 'Please log in to use this feature.',
														
 
															+        grouping: true
														
 
															+      })
														
 
															+      next(false)
														
 
															+      return
														
 
															+    } else {
														
 
															+      next('/login')
														
 
															+    }
														
 
															   }
														
 
															   next()
														
 
															 })
														
--- a/src/stores/modules/breadCrumb.ts
+++ b/src/stores/modules/breadCrumb.ts
@@ -0,0 +1,58 @@
 
															+import { defineStore } from 'pinia'
														
 
															+
														
 
															+interface Route {
														
 
															+  label: string
														
 
															+  path: string
														
 
															+  query?: string
														
 
															+}
														
 
															+interface BreadCrumb {
														
 
															+  routeList: Route[]
														
 
															+}
														
 
															+// 需要添加多级菜单的页面，值为route的name
														
 
															+const whiteList = ['Booking Detail', 'Tracking Detail', 'Add VGM', 'Public Tracking Detail']
														
 
															+
														
 
															+export const useBreadCrumb = defineStore('breadCrumb', {
														
 
															+  state: (): BreadCrumb => ({
														
 
															+    routeList: JSON.parse(localStorage.getItem('routeList')) || []
														
 
															+  }),
														
 
															+  getters: {},
														
 
															+  actions: {
														
 
															+    setRouteList(toRoute: any) {
														
 
															+      const index = this.routeList.findIndex((item) => item.label === toRoute.name)
														
 
															+      if (index !== -1) {
														
 
															+        this.routeList.splice(index + 1)
														
 
															+      } else if (toRoute.name === 'Public Tracking Detail') {
														
 
															+        this.routeList = [
														
 
															+          {
														
 
															+            label: 'Public Tracking',
														
 
															+            path: '/public-tracking',
														
 
															+            query: ''
														
 
															+          },
														
 
															+          {
														
 
															+            label: 'Public Tracking Detail',
														
 
															+            path: '/public-tracking/detail',
														
 
															+            query: toRoute.query
														
 
															+          }
														
 
															+        ]
														
 
															+      } else if (toRoute.name && whiteList.includes(toRoute.name)) {
														
 
															+        this.routeList.push({
														
 
															+          label: toRoute.name,
														
 
															+          path: toRoute.path,
														
 
															+          query: toRoute.query
														
 
															+        })
														
 
															+      } else {
														
 
															+        this.routeList = [
														
 
															+          {
														
 
															+            label: toRoute.name,
														
 
															+            path: toRoute.path,
														
 
															+            query: toRoute.query
														
 
															+          }
														
 
															+        ]
														
 
															+      }
														
 
															+      localStorage.setItem('routeList', JSON.stringify(this.routeList))
														
 
															+    },
														
 
															+    getUpperRoute() {
														
 
															+      return this.routeList[this.routeList.length - 2]
														
 
															+    }
														
 
															+  }
														
 
															+})
														
--- a/src/stores/modules/headerSearch.ts
+++ b/src/stores/modules/headerSearch.ts
@@ -0,0 +1,30 @@
 
															+import { defineStore } from 'pinia'
														
 
															+
														
 
															+interface HeaderSearch {
														
 
															+  searchValue: string
														
 
															+  searchResult?: string
														
 
															+  trackingData?: any
														
 
															+}
														
 
															+export const useHeaderSearch = defineStore('headerSearch', {
														
 
															+  state: (): HeaderSearch => ({
														
 
															+    searchValue: JSON.parse(localStorage.getItem('searchData'))?.searchValue || '',
														
 
															+    searchResult: JSON.parse(localStorage.getItem('searchData'))?.searchResult || '',
														
 
															+    trackingData: JSON.parse(localStorage.getItem('searchData'))?.searchResult || {}
														
 
															+  }),
														
 
															+  getters: {},
														
 
															+  actions: {
														
 
															+    setSearchData(searchData: any) {
														
 
															+      localStorage.setItem('searchData', JSON.stringify(searchData))
														
 
															+      this.searchValue = searchData.searchValue
														
 
															+      this.searchResult = searchData?.searchResult
														
 
															+      this.trackingData = searchData?.trackingData
														
 
															+    },
														
 
															+
														
 
															+    clearSearchData() {
														
 
															+      localStorage.removeItem('searchData')
														
 
															+      this.searchValue = ''
														
 
															+      this.searchResult = ''
														
 
															+      this.trackingData = ''
														
 
															+    }
														
 
															+  }
														
 
															+})
														
--- a/src/stores/modules/loadingState.ts
+++ b/src/stores/modules/loadingState.ts
@@ -0,0 +1,18 @@
 
															+import { defineStore } from 'pinia'
														
 
															+
														
 
															+interface LoadingState {
														
 
															+  trackingTableLoading: boolean
														
 
															+}
														
 
															+
														
 
															+export const useLoadingState = defineStore('loadingState', {
														
 
															+  state: (): LoadingState => ({
														
 
															+    trackingTableLoading: JSON.parse(localStorage.getItem('trackingTableLoading')) || false
														
 
															+  }),
														
 
															+  getters: {},
														
 
															+  actions: {
														
 
															+    setTrackingTableLoading(state: boolean) {
														
 
															+      localStorage.setItem('trackingTableLoading', JSON.stringify(state))
														
 
															+      this.trackingTableLoading = state
														
 
															+    }
														
 
															+  }
														
 
															+})
														
--- a/src/stores/modules/parentPath.ts
+++ b/src/stores/modules/parentPath.ts
@@ -1,28 +0,0 @@
 
															-import { defineStore } from 'pinia'
														
 
															-interface ParentPath {
														
 
															-  parentPathInfo: {
														
 
															-    fullPath?: string
														
 
															-    name?: string
														
 
															-  }
														
 
															-}
														
 
															-
														
 
															-export const useParentPathStore = defineStore('parentPath', {
														
 
															-  state: (): ParentPath => ({
														
 
															-    parentPathInfo: JSON.parse(localStorage.getItem('parentPathInfo') as string) || {}
														
 
															-  }),
														
 
															-  getters: {},
														
 
															-  actions: {
														
 
															-    setParentPath(route: any) {
														
 
															-      const pathInfo = {
														
 
															-        name: route.name,
														
 
															-        fullPath: route.fullPath
														
 
															-      }
														
 
															-      localStorage.setItem('parentPath', JSON.stringify(pathInfo))
														
 
															-      this.parentPathInfo = pathInfo
														
 
															-    },
														
 
															-    clearParentPath() {
														
 
															-      localStorage.removeItem('parentPath')
														
 
															-      this.parentPathInfo = {}
														
 
															-    }
														
 
															-  }
														
 
															-})
														
--- a/src/stores/modules/theme.ts
+++ b/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()
														
 
															+  }
														
 
															+}
														
--- a/src/stores/modules/user.ts
+++ b/src/stores/modules/user.ts
@@ -0,0 +1,38 @@
 
															+import { defineStore } from 'pinia'
														
 
															+import { useVisitedRowState } from './visitedRow'
														
 
															+
														
 
															+interface UserState {
														
 
															+  username: string
														
 
															+  isFirstLogin: boolean
														
 
															+}
														
 
															+export const useUserStore = defineStore('user', {
														
 
															+  state: (): UserState => ({
														
 
															+    username: localStorage.getItem('username') || '',
														
 
															+    isFirstLogin: localStorage.getItem('isFirstLogin')
														
 
															+      ? JSON.parse(localStorage.getItem('isFirstLogin'))
														
 
															+      : false
														
 
															+  }),
														
 
															+  getters: {},
														
 
															+  actions: {
														
 
															+    setUsername(username: any, isFirstLogin?: boolean) {
														
 
															+      localStorage.setItem('username', username)
														
 
															+      this.username = username
														
 
															+      if (isFirstLogin !== undefined) {
														
 
															+        localStorage.setItem('isFirstLogin', JSON.stringify(isFirstLogin))
														
 
															+        this.isFirstLogin = isFirstLogin
														
 
															+      }
														
 
															+    },
														
 
															+    async logout(isNeedLogout: boolean = true) {
														
 
															+      if (isNeedLogout) {
														
 
															+        await $api.logout().then(() => {})
														
 
															+      }
														
 
															+      localStorage.removeItem('username')
														
 
															+      this.username = ''
														
 
															+      if (localStorage.getItem('isFirstLogin')) {
														
 
															+        localStorage.removeItem('isFirstLogin')
														
 
															+      }
														
 
															+      this.isFirstLogin = false
														
 
															+      useVisitedRowState().clearVisitedRow()
														
 
															+    }
														
 
															+  }
														
 
															+})
														
--- a/src/stores/modules/visitedRow.ts
+++ b/src/stores/modules/visitedRow.ts
@@ -0,0 +1,30 @@
 
															+import { defineStore } from 'pinia'
														
 
															+
														
 
															+interface VisitedRowState {
														
 
															+  trackingTableData: Array<String>
														
 
															+  bookingTableData: Array<String>
														
 
															+}
														
 
															+
														
 
															+export const useVisitedRowState = defineStore('visitedRowState', {
														
 
															+  state: (): VisitedRowState => ({
														
 
															+    trackingTableData: JSON.parse(localStorage.getItem('trackingTableData')) || [],
														
 
															+    bookingTableData: JSON.parse(localStorage.getItem('bookingTableData')) || []
														
 
															+  }),
														
 
															+  getters: {},
														
 
															+  actions: {
														
 
															+    setTrackingTableData(item: String) {
														
 
															+      this.trackingTableData.push(item)
														
 
															+      localStorage.setItem('trackingTableData', JSON.stringify(this.trackingTableData))
														
 
															+    },
														
 
															+    setBookingTableData(item: String) {
														
 
															+      this.bookingTableData.push(item)
														
 
															+      localStorage.setItem('bookingTableData', JSON.stringify(this.bookingTableData))
														
 
															+    },
														
 
															+    clearVisitedRow() {
														
 
															+      this.trackingTableData = []
														
 
															+      this.bookingTableData = []
														
 
															+      localStorage.removeItem('trackingTableData')
														
 
															+      localStorage.removeItem('bookingTableData')
														
 
															+    }
														
 
															+  }
														
 
															+})
														
--- a/src/styles/Antdui.scss
+++ b/src/styles/Antdui.scss
@@ -1,31 +1,36 @@
 
															-:where(.css-dev-only-do-not-override-19iuou).ant-picker-range {
														
 
															+.ant-picker {
														
 
															+  background-color: var(--management-bg-color);
														
 
															+  color: var(--color-neutral-1);
														
 
															+}
														
 
															+.ant-picker-range {
														
 
															   height: 40px;
														
 
															-  border: 1px solid var(--color-border-1);
														
 
															+  background-color: var(--management-bg-color);
														
 
															+  border: 1px solid var(--color-select-border);
														
 
															 }
														
 
															-:where(.css-dev-only-do-not-override-19iuou).ant-picker:hover, :where(.css-dev-only-do-not-override-19iuou).ant-picker-focused {
														
 
															+.ant-picker:hover, .ant-picker-focused {
														
 
															   border-color: var(--color-theme);
														
 
															   box-shadow: none;
														
 
															 }
														
 
															 .ant-picker-active-bar {
														
 
															   display: none;
														
 
															 }
														
 
															-:where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown-range {
														
 
															-  z-index: 9999;
														
 
															+.ant-picker-dropdown-range {
														
 
															+  z-index: 9999 ;
														
 
															 }
														
 
															-:where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before {
														
 
															+.ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before {
														
 
															   border: none;
														
 
															 }
														
 
															-:where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {
														
 
															+.ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner, .ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner, .ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {
														
 
															   background-color: var(--color-theme);
														
 
															   color: #FFFFFF;
														
 
															 }
														
 
															-:where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-in-range::before {
														
 
															+.ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-in-range::before {
														
 
															   background-color: var(--color-orange-6);
														
 
															 }
														
 
															-:where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before {
														
 
															+.ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before, .ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before {
														
 
															   background-color: var(--color-orange-6);
														
 
															 }
														
 
															-:where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-in-range {
														
 
															+.ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-in-range {
														
 
															   color: var(--color-theme);
														
 
															 }
														
 
															 .ant-picker-cell:hover:not(.ant-picker-cell-in-view).ant-picker-cell-inner,
														
@@ -36,31 +41,63 @@
 
															       background-color: var(--color-orange-6) !important;
														
 
															       color: var(--color-theme);
														
 
															   }
														
 
															-  :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-date-panel .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start .ant-picker-cell-inner::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-date-panel .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end .ant-picker-cell-inner::after {
														
 
															+  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start .ant-picker-cell-inner::after, .ant-picker-dropdown .ant-picker-date-panel .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end .ant-picker-cell-inner::after {
														
 
															     background-color: var(--color-orange-6);
														
 
															   }
														
 
															-  :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-hover::before, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-end.ant-picker-cell-range-hover::before, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single).ant-picker-cell-range-hover-start::before, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single).ant-picker-cell-range-hover-end::before, .ant-picker-panel>:not(.ant-picker-date-panel) :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before, .ant-picker-panel>:not(.ant-picker-date-panel) :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before {
														
 
															+  .ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before, .ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-hover::before, .ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-end.ant-picker-cell-range-hover::before, .ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single).ant-picker-cell-range-hover-start::before, .ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single).ant-picker-cell-range-hover-end::before, .ant-picker-panel>:not(.ant-picker-date-panel) .ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before, .ant-picker-panel>:not(.ant-picker-date-panel) .ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before {
														
 
															     background-color: var(--color-orange-6);
														
 
															   }
														
 
															-  :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end)::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-end:not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end)::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-start.ant-picker-cell-range-start-single::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-start.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-end-near-hover::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-end.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-start-near-hover::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-end.ant-picker-cell-range-end-single::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover:not(.ant-picker-cell-in-range)::after {
														
 
															+  .ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end)::after, .ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-end:not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end)::after, .ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-start.ant-picker-cell-range-start-single::after, .ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-start.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-end-near-hover::after, .ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-end.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-start-near-hover::after, .ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-end.ant-picker-cell-range-end-single::after, .ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover:not(.ant-picker-cell-in-range)::after {
														
 
															     border-top: none;
														
 
															     border-bottom: none;
														
 
															   }
														
 
															-  tr>:where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover:first-child::after, tr>:where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-end:first-child::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-start.ant-picker-cell-range-hover-edge-start.ant-picker-cell-range-hover-edge-start-near-range::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-edge-start:not(.ant-picker-cell-range-hover-edge-start-near-range)::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-start::after {
														
 
															+  tr>.ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover:first-child::after, tr>.ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-end:first-child::after, .ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-start.ant-picker-cell-range-hover-edge-start.ant-picker-cell-range-hover-edge-start-near-range::after, .ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-edge-start:not(.ant-picker-cell-range-hover-edge-start-near-range)::after, .ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-start::after {
														
 
															     border-inline-start: none;
														
 
															   }
														
 
															-  tr>:where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover:last-child::after, tr>:where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-end.ant-picker-cell-range-hover-edge-end.ant-picker-cell-range-hover-edge-end-near-range::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-edge-end:not(.ant-picker-cell-range-hover-edge-end-near-range)::after, :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-end::after {
														
 
															+  tr>.ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover:last-child::after, tr>.ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::after, .ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-end.ant-picker-cell-range-hover-edge-end.ant-picker-cell-range-hover-edge-end-near-range::after, .ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-edge-end:not(.ant-picker-cell-range-hover-edge-end-near-range)::after, .ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-hover-end::after {
														
 
															     border-inline-end: none;
														
 
															   }
														
 
															-  :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-header-view button:hover {
														
 
															+  .ant-picker-dropdown .ant-picker-header-view button:hover {
														
 
															     color: var(--color-theme);
														
 
															   }
														
 
															-  :where(.css-dev-only-do-not-override-19iuou).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);
														
 
															   }
														
 
															-  :where(.css-dev-only-do-not-override-19iuou).ant-picker-dropdown .ant-picker-panel {
														
 
															+  .ant-picker-dropdown .ant-picker-panel {
														
 
															     border: none;
														
 
															-  }
														
 
															+  }
														
 
															+  .ant-picker-dropdown .ant-picker-panel-container .ant-picker-presets ul li:hover {
														
 
															+    background: var(--color-orange-6);
														
 
															+  }
														
 
															+ .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content th {
														
 
															+  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(--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;
														
 
															+}
														
--- a/src/styles/elementui.scss
+++ b/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,23 @@ 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);
														
 
															     background-color: var(--color-btn-default-bg-hover);
														
@@ -41,22 +45,15 @@ button.el-button.el-button--text {
 
															       color: var(--color-theme);
														
 
															     }
														
 
															   }
														
 
															-  &:focus {
														
 
															-    border: 1px solid var(--color-btn-default-bg-hover);
														
 
															-    background-color: var(--color-btn-default-bg-hover);
														
 
															-    fill: var(--color-theme);
														
 
															-    span {
														
 
															-      color: var(--color-theme);
														
 
															-    }
														
 
															-  }
														
 
															 }
														
 
															-.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);
														
@@ -65,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);
														
@@ -78,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);
														
@@ -97,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);
														
@@ -110,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);
														
@@ -120,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);
														
@@ -133,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);
														
@@ -149,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);
														
 
															   }
														
 
															 }
														
 
															 // 初始为黑色
														
@@ -162,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;
														
 
															     }
														
@@ -173,6 +194,9 @@ button.el-button.el-button--icon {
 
															 button.el-button {
														
 
															   border-radius: 6px;
														
 
															+  & + .el-button {
														
 
															+    margin-left: 8px;
														
 
															+  }
														
 
															 }
														
 
															 // pagination
														
@@ -207,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;
														
@@ -222,6 +247,13 @@ footer.el-dialog__footer {
 
															 div.el-dialog__body {
														
 
															   padding: 16px;
														
 
															 }
														
 
															+button.el-dialog__headerbtn:focus .el-dialog__close,
														
 
															+button.el-dialog__headerbtn:hover .el-dialog__close {
														
 
															+  color: var(--color-theme);
														
 
															+}
														
 
															+div.el-overlay {
														
 
															+  background-color: rgba(43, 47, 54, 0.7);
														
 
															+}
														
 
															 // radio
														
 
															 label.el-radio {
														
@@ -239,6 +271,70 @@ label.el-radio {
 
															   }
														
 
															 }
														
 
															+// message
														
 
															+div.el-message {
														
 
															+  display: flex;
														
 
															+  justify-content: center;
														
 
															+  width: 800px;
														
 
															+  .el-badge.el-message__badge {
														
 
															+    display: none;
														
 
															+  }
														
 
															+}
														
 
															+div.el-message--error {
														
 
															+  --el-message-bg-color: #faebec;
														
 
															+  --el-message-border-color: #faebec;
														
 
															+  --el-message-text-color: var(--color-danger);
														
 
															+}
														
 
															+div.el-message--success {
														
 
															+  --el-message-bg-color: #e5f6f1;
														
 
															+  --el-message-border-color: #e5f6f1;
														
 
															+  --el-message-text-color: var(--color-success);
														
 
															+}
														
 
															+
														
 
															+div.el-message--warning {
														
 
															+  --el-message-bg-color: #fef5eb;
														
 
															+  --el-message-border-color: #fef5eb;
														
 
															+  --el-message-text-color: #f19d38;
														
 
															+}
														
 
															+
														
 
															+// message box
														
 
															+div.el-message-box {
														
 
															+  --el-messagebox-width: 640px;
														
 
															+  --el-messagebox-border-radius: 12px;
														
 
															+  padding: 0;
														
 
															+  .el-message-box__header {
														
 
															+    height: 56px;
														
 
															+    padding: 16px;
														
 
															+    background-color: var(--color-message-box-header-bg);
														
 
															+    & > span {
														
 
															+      font-weight: 700;
														
 
															+      font-size: var(--font-size-4);
														
 
															+    }
														
 
															+  }
														
 
															+  .el-message-box__container {
														
 
															+    padding: 24px 16px;
														
 
															+    gap: 6px;
														
 
															+  }
														
 
															+  .el-message-box__headerbtn {
														
 
															+    height: 56px;
														
 
															+  }
														
 
															+  .el-message-box__status {
														
 
															+    font-size: 16px;
														
 
															+  }
														
 
															+  .el-message-box__title {
														
 
															+    font-weight: 700;
														
 
															+    font-size: var(--font-size-4);
														
 
															+  }
														
 
															+  .el-message-box__message {
														
 
															+    font-size: var(--font-size-3);
														
 
															+  }
														
 
															+  .el-message-box__btns {
														
 
															+    padding: 8px;
														
 
															+    padding-right: 16px;
														
 
															+    border-top: 1px solid var(--color-border);
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															 // drawer抽屉
														
 
															 div.el-drawer {
														
 
															   .el-drawer__header {
														
@@ -253,6 +349,11 @@ 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 {
														
 
															+    color: var(--color-theme);
														
 
															   }
														
 
															 }
														
@@ -260,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);
														
 
															 }
														
@@ -271,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;
														
@@ -302,22 +403,61 @@ 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);
														
 
															   border-color: var(--color-theme);
														
 
															 }
														
 
															+div .el-checkbox.el-checkbox--large .el-checkbox__inner {
														
 
															+  height: 16px;
														
 
															+  width: 16px;
														
 
															+  font-size: 16px;
														
 
															+  border-radius: 3px;
														
 
															+}
														
 
															+div .el-checkbox--large .el-checkbox__label {
														
 
															+  margin-top: 1px;
														
 
															+  padding-left: 4px;
														
 
															+}
														
 
															+span.el-checkbox__input.is-checked + .el-checkbox__label {
														
 
															+  color: var(--color-neutral-2);
														
 
															+}
														
 
															+/* 修改选中时打勾图标的大小 */
														
 
															+div .el-checkbox.el-checkbox--large span.el-checkbox__inner::after {
														
 
															+  left: 4px; /* 调整左边距 */
														
 
															+  top: 0px; /* 调整上边距 */
														
 
															+  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,
														
@@ -338,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 {
														
@@ -359,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);
														
@@ -376,6 +518,11 @@ div .el-select-dropdown__item.is-hovering {
 
															 .el-select-dropdown__item {
														
 
															   border-radius: var(--border-radius-6);
														
 
															   margin: 0 8px;
														
 
															+
														
 
															+  margin-bottom: 4px;
														
 
															+  &:last-child {
														
 
															+    margin-bottom: 0;
														
 
															+  }
														
 
															 }
														
 
															 div .el-badge__content--warning {
														
@@ -389,6 +536,53 @@ div .el-badge {
 
															   margin: 8px 0 0 8px;
														
 
															 }
														
 
															+.el-date-table td.current:not(.disabled) span.el-date-table-cell__text {
														
 
															+  background-color: var(--color-theme);
														
 
															+}
														
 
															+.el-month-table td.current:not(.disabled) span.el-date-table-cell__text {
														
 
															+  background-color: var(--color-theme);
														
 
															+}
														
 
															+.el-month-table td span.el-date-table-cell__text:hover {
														
 
															+  color: var(--color-theme);
														
 
															+}
														
 
															+.el-year-table td.current:not(.disabled) span.el-date-table-cell__text {
														
 
															+  background-color: var(--color-theme);
														
 
															+}
														
 
															+.el-year-table td.today span.el-date-table-cell__text {
														
 
															+  color: var(--color-theme);
														
 
															+}
														
 
															+.el-year-table td span.el-date-table-cell__text:hover {
														
 
															+  color: var(--color-theme);
														
 
															+}
														
 
															+div.el-date-picker {
														
 
															+  --el-datepicker-header-text-color: #b5b9bf;
														
 
															+}
														
 
															+div.el-date-picker__header {
														
 
															+  padding-top: 4px;
														
 
															+}
														
 
															+span.el-date-picker__header-label {
														
 
															+  display: inline-block;
														
 
															+  margin-top: 11px;
														
 
															+}
														
 
															+div.el-picker-panel__content {
														
 
															+  margin-top: 6px;
														
 
															+}
														
 
															+button.el-picker-panel__icon-btn:hover {
														
 
															+  color: var(--color-theme);
														
 
															+}
														
 
															+span.el-date-picker__header-label:hover {
														
 
															+  color: var(--color-theme);
														
 
															+}
														
 
															+button.el-time-panel__btn.confirm {
														
 
															+  color: var(--color-theme);
														
 
															+}
														
 
															+.el-picker-panel__footer {
														
 
															+  .el-button.is-plain {
														
 
															+    --el-button-hover-text-color: var(--color-theme);
														
 
															+    --el-button-hover-border-color: var(--color-theme);
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															 div .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
														
 
															   background-color: var(--color-table-header-bg);
														
 
															 }
														
@@ -399,9 +593,18 @@ div .el-range-editor.is-active,
 
															   box-shadow: 0 0 0 1px var(--color-theme) !important;
														
 
															   border-color: var(--color-theme);
														
 
															 }
														
 
															-div .el-date-table td.today .el-date-table-cell__text,
														
 
															-.el-date-table td.available:hover {
														
 
															-  color: var(--color-theme);
														
 
															+
														
 
															+table.el-date-table td.available:hover {
														
 
															+  span {
														
 
															+    color: var(--color-theme);
														
 
															+  }
														
 
															+}
														
 
															+div .el-date-table td.today .el-date-table-cell__text {
														
 
															+  color: var(--color-neutral-1);
														
 
															+  font-weight: 400;
														
 
															+}
														
 
															+.el-date-table td .el-date-table-cell span.el-date-table-cell__text {
														
 
															+  border-radius: 6px;
														
 
															 }
														
 
															 div .el-date-table td.in-range .el-date-table-cell {
														
 
															   background-color: var(--color-orange-6) !important;
														
@@ -447,16 +650,30 @@ 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, 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);
														
 
															+  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: var(--dashboard-scoring-bg-color);
														
 
															+  width: 640px;
														
 
															+  border-radius: 6px 6px 0 0;
														
 
															+  height: 48px;
														
 
															+}
														
 
															+div .scoreDialog2 .el-dialog__body {
														
 
															+  margin-top: 40px;
														
 
															 }
														
 
															 div .el-textarea__inner:hover {
														
@@ -512,10 +729,14 @@ div .el-tabs__active-bar {
 
															   background-color: var(--color-accent-2);
														
 
															 }
														
 
															-div .el-radio-button.is-active .el-radio-button__original-radio:not(:disabled)+.el-radio-button__inner {
														
 
															+div
														
 
															+  .el-radio-button.is-active
														
 
															+  .el-radio-button__original-radio:not(:disabled)
														
 
															+  + .el-radio-button__inner {
														
 
															   background-color: var(--color-theme);
														
 
															   border-color: var(--color-theme);
														
 
															-  box-shadow:none
														
 
															+  box-shadow: none;
														
 
															+  font-weight: 700;
														
 
															 }
														
 
															 div .el-radio-button__inner:hover {
														
 
															   color: var(--color-theme);
														
@@ -523,4 +744,41 @@ div .el-radio-button__inner:hover {
 
															 div .el-space {
														
 
															   flex-wrap: wrap;
														
 
															   margin: 3px 0 0 0;
														
 
															-}
														
 
															+}
														
 
															+div .el-loading-spinner .path {
														
 
															+  stroke: var(--color-theme);
														
 
															+}
														
 
															+div .ShowAlerIcon {
														
 
															+  width: 342px;
														
 
															+  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;
														
 
															+}
														
 
															+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;
														
 
															+}
														
--- a/src/styles/icons/iconfont.css
+++ b/src/styles/icons/iconfont.css
@@ -1,9 +1,9 @@
 
															 @font-face {
														
 
															   font-family: "font_family"; /* Project id 4672385 */
														
 
															-  src: url('iconfont.woff2?t=1726717215398') format('woff2'),
														
 
															-       url('iconfont.woff?t=1726717215398') format('woff'),
														
 
															-       url('iconfont.ttf?t=1726717215398') format('truetype'),
														
 
															-       url('iconfont.svg?t=1726717215398#font_family') format('svg');
														
 
															+  src: url('iconfont.woff2?t=1736324058852') format('woff2'),
														
 
															+       url('iconfont.woff?t=1736324058852') format('woff'),
														
 
															+       url('iconfont.ttf?t=1736324058852') format('truetype'),
														
 
															+       url('iconfont.svg?t=1736324058852#font_family') format('svg');
														
 
															 }
														
 
															 .font_family {
														
@@ -14,6 +14,246 @@
 
															   -moz-osx-font-smoothing: grayscale;
														
 
															 }
														
 
															+.icon-icon_currentlink_b:before {
														
 
															+  content: "\e6fc";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_jumplink_b1:before {
														
 
															+  content: "\e6fd";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_arrow_b:before {
														
 
															+  content: "\e6fb";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_dark_b1:before {
														
 
															+  content: "\e6f9";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_manual_b:before {
														
 
															+  content: "\e6fa";
														
 
															+}
														
 
															+
														
 
															+.icon-a-KLNLogo-Orange:before {
														
 
															+  content: "\e6f8";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_themes_b:before {
														
 
															+  content: "\e6f5";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_light_b:before {
														
 
															+  content: "\e6f6";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_dark_b:before {
														
 
															+  content: "\e6f7";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_list_b:before {
														
 
															+  content: "\e6f4";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_tracking__line_b:before {
														
 
															+  content: "\e6f1";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_form_b:before {
														
 
															+  content: "\e6f2";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_filters_b:before {
														
 
															+  content: "\e6f3";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_submit_b:before {
														
 
															+  content: "\e6f0";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_previous_b:before {
														
 
															+  content: "\e6ee";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_next_b:before {
														
 
															+  content: "\e6ef";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_view_b:before {
														
 
															+  content: "\e6ed";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_index_b:before {
														
 
															+  content: "\e6eb";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_preference_b:before {
														
 
															+  content: "\e6ec";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_container__load_plan_b:before {
														
 
															+  content: "\e6e9";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_company_b1:before {
														
 
															+  content: "\e6ea";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_my_shipment_b:before {
														
 
															+  content: "\e6d7";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_air_booking_b:before {
														
 
															+  content: "\e6d8";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_data_insight_b:before {
														
 
															+  content: "\e6d9";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_exception__maintenace_b:before {
														
 
															+  content: "\e6da";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_destination__delivery_b:before {
														
 
															+  content: "\e6db";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_my_cargo_b:before {
														
 
															+  content: "\e6dc";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_po__confirmation_b:before {
														
 
															+  content: "\e6dd";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_my_po_b:before {
														
 
															+  content: "\e6de";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_my_booking_b:before {
														
 
															+  content: "\e6df";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_my__shipment_b:before {
														
 
															+  content: "\e6e0";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_document__maintenance_b:before {
														
 
															+  content: "\e6e1";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_po_cancel_b:before {
														
 
															+  content: "\e6e2";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_dashboard_b:before {
														
 
															+  content: "\e6e3";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_administration_fill_b:before {
														
 
															+  content: "\e6e4";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_data_insight__fill_b:before {
														
 
															+  content: "\e6e5";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_administration_b:before {
														
 
															+  content: "\e6e6";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_container_b:before {
														
 
															+  content: "\e6e7";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_exception__approval_b:before {
														
 
															+  content: "\e6e8";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_po_mass__maintenance_b:before {
														
 
															+  content: "\e6cf";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_security_b:before {
														
 
															+  content: "\e6d0";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_packing_b:before {
														
 
															+  content: "\e6d1";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_my__shipment_fill_b:before {
														
 
															+  content: "\e6d2";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_general__maintenace_b:before {
														
 
															+  content: "\e6d3";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_invoice_b:before {
														
 
															+  content: "\e6d4";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_control__tower_search_b:before {
														
 
															+  content: "\e6d5";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_po_follow_up_b:before {
														
 
															+  content: "\e6d6";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_seabooking_b:before {
														
 
															+  content: "\e6c8";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_sku__maintenace_b:before {
														
 
															+  content: "\e6c9";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_po_restore_b:before {
														
 
															+  content: "\e6ca";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_road__booking_b:before {
														
 
															+  content: "\e6cb";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_po_close_b:before {
														
 
															+  content: "\e6cc";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_reports_b:before {
														
 
															+  content: "\e6cd";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_po__maintenance_b:before {
														
 
															+  content: "\e6ce";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_warning_fill_b:before {
														
 
															+  content: "\e6c6";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_fail_fill_b:before {
														
 
															+  content: "\e6c7";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_publish_fill_b:before {
														
 
															+  content: "\e6c5";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_refresh_bold_b:before {
														
 
															+  content: "\e6c4";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_drag__line_b:before {
														
 
															+  content: "\e6c3";
														
 
															+}
														
 
															+
														
 
															+.icon-icon_success_b:before {
														
 
															+  content: "\e6c2";
														
 
															+}
														
 
															+
														
 
															 .icon-icon_location_fill_b:before {
														
 
															   content: "\e6c0";
														
 
															 }
														
@@ -510,18 +750,10 @@
 
															   content: "\e654";
														
 
															 }
														
 
															-.icon-icon_view_b:before {
														
 
															-  content: "\e639";
														
 
															-}
														
 
															-
														
 
															 .icon-icon_createpo_b:before {
														
 
															   content: "\e63a";
														
 
															 }
														
 
															-.icon-icon_submit_b:before {
														
 
															-  content: "\e63b";
														
 
															-}
														
 
															-
														
 
															 .icon-icon_save_b:before {
														
 
															   content: "\e63c";
														
 
															 }
														
--- a/src/styles/icons/iconfont.js
+++ b/src/styles/icons/iconfont.js
--- a/src/styles/icons/iconfont.svg
+++ b/src/styles/icons/iconfont.svg
--- a/src/styles/icons/iconfont.ttf
+++ b/src/styles/icons/iconfont.ttf
--- a/src/styles/icons/iconfont.woff
+++ b/src/styles/icons/iconfont.woff
--- a/src/styles/icons/iconfont.woff2
+++ b/src/styles/icons/iconfont.woff2
--- a/src/styles/images/dashboard_scoring.png
+++ b/src/styles/images/dashboard_scoring.png
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -9,6 +9,7 @@
 
															   font-size: var(--font-size-3);
														
 
															   color: var(--color-neutral-1);
														
 
															   // user-select: none;
														
 
															+  background-color: var(--color-mode);
														
 
															 }
														
 
															 @font-face {
														
 
															   font-family: 'Lato-Light'; /* 为字体定义一个名称 */
														
@@ -46,3 +47,6 @@
 
															   border-radius: var(--border-radius-6);
														
 
															   background: var(--border-hover-color);
														
 
															 }
														
 
															+.icon_dark {
														
 
															+  fill: var(--color-neutral-1);
														
 
															+}
														
--- a/src/styles/theme-g.scss
+++ b/src/styles/theme-g.scss
@@ -0,0 +1,72 @@
 
															+: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;
														
 
															+}
	`@@ -0,0 +1,2 @@`
			`+VITE_API_HOST = 'http://localhost/api'`
			`+VITE_BASE_URL = '/k_new_online/'`
	`@@ -0,0 +1,2 @@`
			`+VITE_API_HOST = 'http://192.168.0.161/Customer_Service_Online'`
			`+VITE_BASE_URL = '/k_new_online/'`
	`@@ -0,0 +1,2 @@`
			`+VITE_API_HOST = '/online_backend'`
			`+VITE_BASE_URL = '/'`
	`@@ -0,0 +1,2 @@`
			`+VITE_API_HOST = 'https://ra.kerryapex.com/new/online_backend'`
			`+VITE_BASE_URL = '/new/'`
	`@@ -0,0 +1 @@`
			`+export { default } from './src/VBreadcrumb.vue'`
	`@@ -1 +0,0 @@`
	`-export { default } from './src/VBreadcrumd.vue'`
	`@@ -0,0 +1 @@`
			`+export { default } from './src/VSliderVerification.vue'`