feat: 合并feature分支代码

src/components/AddRules/src/AddRules.vue

@@ -526,7 +526,7 @@ defineExpose({
           <el-collapse-item name="SelectMilestone">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -562,7 +562,7 @@ defineExpose({
           <el-collapse-item name="SelectMilestone">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -590,7 +590,7 @@ defineExpose({
           <el-collapse-item name="SelectMilestone">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -626,7 +626,7 @@ defineExpose({
           <el-collapse-item name="SelectMilestone">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -662,7 +662,7 @@ defineExpose({
           <el-collapse-item name="NotificationFrequency">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsTwoActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -706,7 +706,7 @@ defineExpose({
           <el-collapse-item name="NotificationMethod">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsThreeActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -938,7 +938,7 @@ defineExpose({
   padding: 0 !important;
 }
 :deep(.el-collapse-item__header):hover {
-  background-color: #fff !important;
+  background-color: var(--color-system-color-bg) !important;
   border: none !important;
 }
 :deep(.el-collapse-item__arrow) {
@@ -964,26 +964,26 @@ defineExpose({
   transform: rotate(0);
 }
 :deep(.Ocean_collapse .el-collapse-item__header) {
-  background-color: #fff !important;
+  background-color: var(--color-system-color-bg) !important;
   padding: 0 8px !important;
   height: 40px !important;
 }
 :deep(.Ocean_collapse .el-collapse-item) {
-  background-color: var(--color-dialog-header-bg);
+  background-color: var(--color-system-color-bg);
   border-radius: 12px;
 }
 :deep(.Ocean_collapse .el-collapse-item__wrap) {
   padding: 0 8px !important;
 }
 :deep(.Ocean_collapse .el-collapse-item__header.is-active) {
-  background-color: var(--color-dialog-header-bg) !important;
+  background-color: var(--color-system-color-bg) !important;
 }
 :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
   color: var(--color-neutral-1);
 }
 .Rules_buttom {
   padding: 8px;
-  border-top: 1px solid var(--color-border-1);
+  border-top: 1px solid var(--color-system-border-1);
 }
 .rules_button {
   width: 100px;
@@ -1007,7 +1007,7 @@ defineExpose({
   align-items: center;
 }
 :deep(header.el-dialog__header) {
-  background-color: #fff;
+  background-color: var(--color-system-body-bg);
 }
 :deep(footer.el-dialog__footer) {
   border-top: none;

src/components/AddRules/src/components/AddedrluesTag.vue

@@ -58,6 +58,7 @@ const handleClose = (tag: any) => {
   padding: 8px !important;
   max-height: 400px;
   overflow-y: scroll;
+  background-color: var(--color-system-card-bg);
 }
 :deep(.el-tag .el-tag__close svg) {
   width: 16px !important;

src/components/AddRules/src/components/DelayedType.vue

@@ -228,13 +228,13 @@ defineExpose({
 
 <style lang="scss" scoped>
 :deep(.el-checkbox-group) {
-  border: 1px solid var(--color-select-border);
+  border: 1px solid var(--color-system-border);
   border-radius: 5px;
 }
 :deep(.el-checkbox) {
   width: 100%;
-  background-color: var(--color-drawer-body-bg);
-  border-bottom: 1px solid var(--color-select-border);
+  background-color: var(--color-system-body-bg);
+  border-bottom: 1px solid var(--color-system-border);
   padding: 8px;
 }
 :deep(.el-checkbox:first-child) {
@@ -264,7 +264,7 @@ defineExpose({
 }
 :deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
   padding: 5px 10px;
-  background-color: #fff;
+  background-color: var(--color-system-body-bg);
 }
 .delayedTitle {
   color: var(--color-neutral-2);
@@ -276,4 +276,10 @@ defineExpose({
 .oceanCheckbox {
   margin-bottom: 8px;
 }
+:deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--color-system-border-1) inset;
+}
+:deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
+  box-shadow: 0 1px 0 0 var(--color-system-border-1) inset,0 -1px 0 0 var(--color-system-border-1) inset,-1px 0 0 0 var(--color-system-border-1) inset;
+}
 </style>

src/components/AddRules/src/components/ETDShipments.vue

@@ -273,13 +273,13 @@ const clampedETAValue = computed(() => {
 
 <style lang="scss" scoped>
 :deep(.el-checkbox-group) {
-  border: 1px solid var(--color-select-border);
+  border: 1px solid var(--color-system-border);
   border-radius: 5px;
 }
 :deep(.el-checkbox) {
   width: 100%;
-  background-color: var(--color-drawer-body-bg);
-  border-bottom: 1px solid var(--color-select-border);
+  background-color: var(--color-system-body-bg);
+  border-bottom: 1px solid var(--color-system-border);
   padding: 8px;
 }
 :deep(.el-checkbox:first-child) {
@@ -292,6 +292,9 @@ const clampedETAValue = computed(() => {
 :deep(.el-radio) {
   border: none !important;
 }
+:deep( .el-radio__inner) {
+  border: 1px solid var(--color-system-checkbox-border);
+}
 .delayedType {
   align-items: start;
   height: fit-content;
@@ -312,7 +315,7 @@ const clampedETAValue = computed(() => {
 }
 :deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
   padding: 5px 10px;
-  background-color: #fff;
+  background-color: var(--color-system-body-bg);
 }
 .delayedIcon {
   margin: 0 8px;
@@ -326,7 +329,8 @@ const clampedETAValue = computed(() => {
 :deep(.el-radio) {
   display: flex;
   min-height: 32px;
-  border: 1px solid var(--color-select-border);
+  border: 1px solid var(--color-system-border);
+  background-color: var(--color-system-body-bg);
   margin-bottom: 4px;
   border-radius: 6px;
   padding: 0 8px;
@@ -338,4 +342,10 @@ const clampedETAValue = computed(() => {
 :deep(.el-radio__input.is-checked + .el-radio__label) {
   color: var(--color-neutral-1);
 }
+:deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--color-system-border-1) inset;
+}
+:deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
+  box-shadow: 0 1px 0 0 var(--color-system-border-1) inset,0 -1px 0 0 var(--color-system-border-1) inset,-1px 0 0 0 var(--color-system-border-1) inset;
+}
 </style>

src/components/AddRules/src/components/NotiFrequency.vue

@@ -362,7 +362,8 @@ defineExpose({
 :deep(.el-radio) {
   display: flex;
   min-height: 32px;
-  border: 1px solid var(--color-select-border);
+  border: 1px solid var(--color-system-border);
+  background-color: var(--color-system-body-bg);
   margin-bottom: 4px;
   border-radius: 6px;
   padding: 0 8px;
@@ -374,6 +375,9 @@ defineExpose({
 :deep(.el-radio__input.is-checked + .el-radio__label) {
   color: var(--color-neutral-1);
 }
+:deep( .el-radio__inner) {
+  border: 1px solid var(--color-system-checkbox-border);
+}
 .Daily {
   margin: 0 0 9px 0;
   display: flex;

src/components/AddRules/src/components/NotiMethods.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
+import Light_methods from '../images/illustration_system massage@2x.png'
+import Dark_methods from '../images/illustration_system massage_darkmode@2x.png'
+import { useThemeStore } from '@/stores/modules/theme'
+
+const themeStore = useThemeStore()
 
 const checkMethodList = ref()
 checkMethodList.value = []
@@ -7,6 +12,9 @@ let savesubscribeobj: any = {}
 const props = defineProps({
   MethodsData: Object
 })
+const MethodsImg = computed(() => {
+  return themeStore.theme === 'dark' ? Dark_methods : Light_methods
+})
 
 const methods_data = ref(props.MethodsData)
 watch(
@@ -68,7 +76,7 @@ const user_type = localStorage.getItem('user_type')
         <el-checkbox class="methodcheckbox" value="By System Message">
           <div>By System Message</div>
           <div class="methos_image">
-            <img src="../images/illustration_system massage@2x.png" />
+            <img :src="MethodsImg" />
           </div>
         </el-checkbox>
       </el-checkbox-group>
@@ -82,7 +90,7 @@ const user_type = localStorage.getItem('user_type')
   height: fit-content;
   width: 49%;
   margin-right: 5px;
-  background-color: var(--color-dialog-header-bg);
+  background-color: var(--color-system-notification-bg);
   border-radius: 6px;
   padding: 11px 0 0 13px;
 }

src/components/AddRules/src/components/RulesShipments.vue

@@ -68,13 +68,13 @@ const CheckChange = (val: any) => {
 
 <style lang="scss" scoped>
 :deep(.el-checkbox-group) {
-  border: 1px solid var(--color-select-border);
+  border: 1px solid var(--color-system-border);
   border-radius: 5px;
 }
 :deep(.el-checkbox) {
   width: 100%;
-  background-color: var(--color-drawer-body-bg);
-  border-bottom: 1px solid var(--color-select-border);
+  background-color: var(--color-system-body-bg);
+  border-bottom: 1px solid var(--color-system-border);
   padding: 8px;
 }
 :deep(.el-checkbox:first-child) {

src/components/AddRules/src/components/ShipmentRange.vue

@@ -193,4 +193,7 @@ defineExpose({
 :deep(.el-radio) {
   background-color: var(--color-drawer-body-bg);
 }
+:deep( .el-radio__inner) {
+  border: 1px solid var(--color-system-checkbox-border);
+}
 </style>

src/components/CreateAddRules/src/CreateAddRules.vue

@@ -44,6 +44,8 @@ const IsTwoActive = ref(true)
 const IsThreeActive = ref(true)
 const IsFourActive = ref(true)
 const UnableSaveVisible = ref(false)
+const SaveVisibleError = ref(false)
+const SaveVisibleDetected = ref(false)
 const SaveedVisible = ref(false)
 const DelayedDeparturedList = ref()
 const DelayedAirdList = ref()
@@ -85,9 +87,11 @@ onMounted(() => {
   Initdata()
 })
 // 初始赋值
+const editTableidtwo = ref('')
 const Initdata = () => {
   if (sessionStorage.getItem('editTableid') != null) {
     const editTableid = sessionStorage.getItem('editTableid')
+    editTableidtwo.value = sessionStorage.getItem('editTableid')
     const editTablerules_type = sessionStorage.getItem('editTablerules_type')
     $api
       .EditMonitoringTable({
@@ -529,19 +533,50 @@ const missingmessage = ref('')
 const SaveSuceessful = () => {
   $api
     .MonitoringSave({
-      ...savesubscribeobj
+      ...savesubscribeobj,
+      is_similar_rule: false,
+      id: editTableidtwo.value
     })
     .then((res: any) => {
       if (res.code === 200) {
-        SaveedVisible.value = true
-        setTimeout(() => {
-          SaveedVisible.value = false
-          sessionStorage.setItem('activeTab', 'Monitoring Settings')
-          router.push({
-            path: '/SystemSettings',
-            query: {}
-          })
-        }, 3000)
+        console.log(res.data)
+        if(res.data.msg == 'Update Successful') {
+          SaveedVisible.value = true
+          setTimeout(() => {
+            SaveedVisible.value = false
+            sessionStorage.setItem('activeTab', 'Monitoring Settings')
+            router.push({
+              path: '/SystemSettings',
+              query: {}
+            })
+          }, 3000)
+        } else if(res.data.msg == 'Similar Rule Detected') {
+          SaveVisibleDetected.value = true
+        } else if(res.data.msg == 'Unable to Save')
+        SaveVisibleError.value = true
+      }
+    })
+}
+
+const HandelSaveVisibleDetected = () => {
+  SaveVisibleDetected.value = false
+  $api
+    .MonitoringSave({
+      ...savesubscribeobj,
+      is_similar_rule: true,
+      id: editTableidtwo.value
+    })
+    .then((res: any) => {
+      if (res.code === 200) {
+          SaveedVisible.value = true
+          setTimeout(() => {
+            SaveedVisible.value = false
+            sessionStorage.setItem('activeTab', 'Monitoring Settings')
+            router.push({
+              path: '/SystemSettings',
+              query: {}
+            })
+          }, 3000)
       }
     })
 }
@@ -718,7 +753,7 @@ defineExpose({
           <el-collapse-item name="ShipmentRange">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsFourActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -768,7 +803,7 @@ defineExpose({
           <el-collapse-item name="SelectMilestone">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -804,7 +839,7 @@ defineExpose({
           <el-collapse-item name="SelectMilestone">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -832,7 +867,7 @@ defineExpose({
           <el-collapse-item name="SelectMilestone">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -868,7 +903,7 @@ defineExpose({
           <el-collapse-item name="SelectMilestone">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -904,7 +939,7 @@ defineExpose({
           <el-collapse-item name="NotificationFrequency">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsTwoActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -948,7 +983,7 @@ defineExpose({
           <el-collapse-item name="NotificationMethod">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsThreeActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -1123,6 +1158,65 @@ defineExpose({
     <div style="text-align: center"><el-image :src="submitsucessful" /></div>
     <div style="text-align: center; margin-top: 20px">Saved successfully</div>
   </el-dialog>
+  <!-- 保存失败 -->
+  <el-dialog v-model="SaveVisibleError" width="480">
+      <div>Duplicate Rule Error.</div>
+      <div>This rule exactly matches an existing rule.</div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button
+            class="el-button--danger"
+            @click="SaveVisibleError = false"
+            style="width: 100px"
+          >
+            OK
+          </el-button>
+        </div>
+      </template>
+      <template #header>
+        <div class="cancel_header">
+          <span class="iconfont_icon iconfont_warning">
+            <svg class="iconfont icon_danger" aria-hidden="true">
+              <use xlink:href="#icon-icon_fail_fill_b"></use>
+            </svg>
+          </span>
+          Unable to Save
+        </div>
+      </template>
+    </el-dialog>
+    <!-- 三项重合提示 -->
+  <el-dialog v-model="SaveVisibleDetected" width="480">
+      <div>A similar configuration rule already exists.</div>
+      <div>Would you like to proceed with creating this rule?</div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button
+            class="el-button--default"
+            @click="SaveVisibleDetected = false"
+            style="width: 100px"
+          >
+            Cancel
+          </el-button>
+          <el-button
+            class="el-button--warning"
+            @click="HandelSaveVisibleDetected"
+            style="width: 100px"
+          >
+            Save
+          </el-button>
+        </div>
+      </template>
+      <template #header>
+        <div class="cancel_header">
+          <span class="iconfont_icon iconfont_warning">
+            <svg class="iconfont icon_warning" aria-hidden="true">
+              <use xlink:href="#icon-icon_tipsfilled_b"></use>
+            </svg>
+          </span>
+          Similar Rule Detected
+        </div>
+      </template>
+    </el-dialog>
 </template>
 
 <style lang="scss" scoped>
@@ -1172,7 +1266,7 @@ defineExpose({
   padding: 0 !important;
 }
 :deep(.el-collapse-item__header):hover {
-  background-color: #fff !important;
+  background-color: var(--color-system-color-bg) !important;
   border: none !important;
 }
 :deep(.el-collapse-item__arrow) {
@@ -1198,26 +1292,26 @@ defineExpose({
   transform: rotate(0);
 }
 :deep(.Ocean_collapse .el-collapse-item__header) {
-  background-color: #fff !important;
+  background-color: var(--color-system-color-bg) !important;
   padding: 0 8px !important;
   height: 40px !important;
 }
 :deep(.Ocean_collapse .el-collapse-item) {
-  background-color: var(--color-dialog-header-bg);
+  background-color: var(--color-system-color-bg);
   border-radius: 12px;
 }
 :deep(.Ocean_collapse .el-collapse-item__wrap) {
   padding: 0 8px !important;
 }
 :deep(.Ocean_collapse .el-collapse-item__header.is-active) {
-  background-color: var(--color-dialog-header-bg) !important;
+  background-color: var(--color-system-color-bg) !important;
 }
 :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
   color: var(--color-neutral-1);
 }
 .Rules_buttom {
   padding: 8px;
-  border-top: 1px solid var(--color-border-1);
+  border-top: 1px solid var(--color-system-border-1);
 }
 .rules_button {
   width: 100px;
@@ -1241,7 +1335,7 @@ defineExpose({
   align-items: center;
 }
 :deep(header.el-dialog__header) {
-  background-color: #fff;
+  background-color: var(--color-system-body-bg);
 }
 :deep(footer.el-dialog__footer) {
   border-top: none;
@@ -1249,24 +1343,4 @@ defineExpose({
 :deep(.el-collapse) {
   margin-right: 8px;
 }
-
-:deep(.el-radio-group) {
-  display: block;
-}
-:deep(.el-radio) {
-  display: flex;
-  min-height: 32px;
-  border: 1px solid var(--color-select-border);
-  margin-bottom: 4px;
-  border-radius: 6px;
-  padding: 0 8px;
-  margin-right: 0;
-  height: fit-content;
-  line-height: 32px;
-  align-items: start;
-  align-items: start;
-}
-:deep(.el-radio__input.is-checked + .el-radio__label) {
-  color: var(--color-neutral-1);
-}
 </style>

src/components/CreateAddRules/src/components/AddedrluesTag.vue

@@ -58,6 +58,7 @@ const handleClose = (tag: any) => {
   padding: 8px !important;
   max-height: 400px;
   overflow-y: scroll;
+  background-color: var(--color-system-card-bg);
 }
 :deep(.el-tag .el-tag__close svg) {
   width: 16px !important;

src/components/CreateAddRules/src/components/DelayedType.vue

@@ -228,13 +228,13 @@ defineExpose({
 
 <style lang="scss" scoped>
 :deep(.el-checkbox-group) {
-  border: 1px solid var(--color-select-border);
+  border: 1px solid var(--color-system-border);
   border-radius: 5px;
 }
 :deep(.el-checkbox) {
   width: 100%;
-  background-color: var(--color-drawer-body-bg);
-  border-bottom: 1px solid var(--color-select-border);
+  background-color: var(--color-system-body-bg);
+  border-bottom: 1px solid var(--color-system-border);
   padding: 8px;
 }
 :deep(.el-checkbox:first-child) {
@@ -264,7 +264,7 @@ defineExpose({
 }
 :deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
   padding: 5px 10px;
-  background-color: #fff;
+  background-color: var(--color-system-body-bg);
 }
 .delayedTitle {
   color: var(--color-neutral-2);
@@ -279,4 +279,10 @@ defineExpose({
 :deep(.el-radio) {
   align-items: center !important;
 }
+:deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--color-system-border-1) inset;
+}
+:deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
+  box-shadow: 0 1px 0 0 var(--color-system-border-1) inset,0 -1px 0 0 var(--color-system-border-1) inset,-1px 0 0 0 var(--color-system-border-1) inset;
+}
 </style>

src/components/CreateAddRules/src/components/ETDShipments.vue

@@ -273,13 +273,13 @@ const clampedETAValue = computed(() => {
 
 <style lang="scss" scoped>
 :deep(.el-checkbox-group) {
-  border: 1px solid var(--color-select-border);
+  border: 1px solid var(--color-system-border);
   border-radius: 5px;
 }
 :deep(.el-checkbox) {
   width: 100%;
-  background-color: var(--color-drawer-body-bg);
-  border-bottom: 1px solid var(--color-select-border);
+  background-color: var(--color-system-body-bg);
+  border-bottom: 1px solid var(--color-system-border);
   padding: 8px;
 }
 :deep(.el-checkbox:first-child) {
@@ -292,6 +292,9 @@ const clampedETAValue = computed(() => {
 :deep(.el-radio) {
   border: none !important;
 }
+:deep( .el-radio__inner) {
+  border: 1px solid var(--color-system-checkbox-border);
+}
 .delayedType {
   align-items: start;
   height: fit-content;
@@ -312,7 +315,7 @@ const clampedETAValue = computed(() => {
 }
 :deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
   padding: 5px 10px;
-  background-color: #fff;
+  background-color: var(--color-system-body-bg);
 }
 .delayedIcon {
   margin: 0 8px;
@@ -326,7 +329,8 @@ const clampedETAValue = computed(() => {
 :deep(.el-radio) {
   display: flex;
   min-height: 32px;
-  border: 1px solid var(--color-select-border);
+  border: 1px solid var(--color-system-border);
+  background-color: var(--color-system-body-bg);
   margin-bottom: 4px;
   border-radius: 6px;
   padding: 0 8px;
@@ -338,4 +342,10 @@ const clampedETAValue = computed(() => {
 :deep(.el-radio__input.is-checked + .el-radio__label) {
   color: var(--color-neutral-1);
 }
+:deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--color-system-border-1) inset;
+}
+:deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
+  box-shadow: 0 1px 0 0 var(--color-system-border-1) inset,0 -1px 0 0 var(--color-system-border-1) inset,-1px 0 0 0 var(--color-system-border-1) inset;
+}
 </style>

src/components/CreateAddRules/src/components/NotiFrequency.vue

@@ -362,7 +362,8 @@ defineExpose({
 :deep(.el-radio) {
   display: flex;
   min-height: 32px;
-  border: 1px solid var(--color-select-border);
+  border: 1px solid var(--color-system-border);
+  background-color: var(--color-system-body-bg);
   margin-bottom: 4px;
   border-radius: 6px;
   padding: 0 8px;
@@ -371,6 +372,9 @@ defineExpose({
   line-height: 32px;
   align-items: start;
 }
+:deep( .el-radio__inner) {
+  border: 1px solid var(--color-system-checkbox-border);
+}
 :deep(.el-radio__input.is-checked + .el-radio__label) {
   color: var(--color-neutral-1);
 }

src/components/CreateAddRules/src/components/NotiMethods.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
+import Light_methods from '../images/illustration_system massage@2x.png'
+import Dark_methods from '../images/illustration_system massage_darkmode@2x.png'
+import { useThemeStore } from '@/stores/modules/theme'
+
+const themeStore = useThemeStore()
 
 const checkMethodList = ref()
 checkMethodList.value = []
@@ -7,6 +12,9 @@ let savesubscribeobj: any = {}
 const props = defineProps({
   MethodsData: Object
 })
+const MethodsImg = computed(() => {
+  return themeStore.theme === 'dark' ? Dark_methods : Light_methods
+})
 
 const methods_data = ref(props.MethodsData)
 watch(
@@ -68,7 +76,7 @@ const user_type = localStorage.getItem('user_type')
         <el-checkbox class="methodcheckbox" value="By System Message">
           <div>By System Message</div>
           <div class="methos_image">
-            <img src="../images/illustration_system massage@2x.png" />
+            <img :src="MethodsImg" />
           </div>
         </el-checkbox>
       </el-checkbox-group>
@@ -82,7 +90,7 @@ const user_type = localStorage.getItem('user_type')
   height: fit-content;
   width: 49%;
   margin-right: 5px;
-  background-color: var(--color-dialog-header-bg);
+  background-color: var(--color-system-notification-bg);
   border-radius: 6px;
   padding: 11px 0 0 13px;
 }

src/components/CreateAddRules/src/components/RulesShipments.vue

@@ -66,13 +66,13 @@ const CheckChange = (val: any) => {
 
 <style lang="scss" scoped>
 :deep(.el-checkbox-group) {
-  border: 1px solid var(--color-select-border);
+  border: 1px solid var(--color-system-border);
   border-radius: 5px;
 }
 :deep(.el-checkbox) {
   width: 100%;
-  background-color: var(--color-drawer-body-bg);
-  border-bottom: 1px solid var(--color-select-border);
+  background-color: var(--color-system-body-bg);
+  border-bottom: 1px solid var(--color-system-border);
   padding: 8px;
 }
 :deep(.el-checkbox:first-child) {

src/components/CreateAddRules/src/components/ShipmentRange.vue

@@ -171,13 +171,13 @@ defineExpose({
 
 <style lang="scss" scoped>
 :deep(.el-checkbox-group) {
-  border: 1px solid var(--color-select-border);
+  border: 1px solid var(--color-system-border);
   border-radius: 5px;
 }
 :deep(.el-checkbox) {
   width: 100%;
-  background-color: var(--color-drawer-body-bg);
-  border-bottom: 1px solid var(--color-select-border);
+  background-color: var(--color-system-body-bg);
+  border-bottom: 1px solid var(--color-system-border);
   padding: 8px;
 }
 :deep(.el-checkbox:first-child) {
@@ -210,9 +210,9 @@ defineExpose({
 }
 .Days {
   width: 64px;
-  border: 1px solid var(--color-select-border);
+  border: 1px solid var(--color-system-border);
   border-radius: 0 6px 6px 0;
-  background-color: var(--color-drawer-body-bg);
+  background-color: var(--color-system-body-bg);
   border-left: 0;
   display: flex;
   align-items: center;
@@ -220,8 +220,32 @@ defineExpose({
   opacity: 0.8;
   height: 28px;
 }
+:deep(.el-radio-group) {
+  display: block;
+}
 :deep(.el-radio) {
-  background-color: var(--color-drawer-body-bg);
-  align-items: center !important;
+  display: flex;
+  min-height: 32px;
+  border: 1px solid var(--color-system-border);
+  background-color: var(--color-system-body-bg);
+  margin-bottom: 4px;
+  border-radius: 6px;
+  padding: 0 8px;
+  margin-right: 0;
+  height: fit-content;
+  line-height: 32px;
+  align-items: center;
+}
+:deep( .el-radio__inner) {
+  border: 1px solid var(--color-system-checkbox-border);
+}
+:deep(.el-radio__input.is-checked + .el-radio__label) {
+  color: var(--color-neutral-1);
+}
+:deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--color-system-border-1) inset;
+}
+:deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
+  box-shadow: 0 1px 0 0 var(--color-system-border-1) inset,0 -1px 0 0 var(--color-system-border-1) inset,-1px 0 0 0 var(--color-system-border-1) inset;
 }
 </style>

src/styles/elementui.scss

@@ -400,11 +400,11 @@ div .el-dropdown__popper .el-dropdown__list {
   user-select: none;
 }
 div .el-checkbox__inner:hover {
-  border-color: var(--color-select-border);
+  border-color: var(--color-system-checkbox-border);
 }
 div .el-checkbox__inner {
-  border-color: var(--color-select-border);
-  background-color: #fff;
+  border: 1px solid var(--color-system-checkbox-border);
+  background-color: transparent;
 }
 div .el-checkbox__input.is-checked .el-checkbox__inner:after {
   border-color: var(--color-mode);

src/styles/theme-g.scss

@@ -69,4 +69,12 @@
   --input-disabled-text-color: #66696f;
   --color-recent-name: rgba(240, 241, 243, 0.1);
   --color-disabled-bg: #2b2b2c;
+
+  --color-system-color-bg:#3f434a;
+  --color-system-border: #3f434a;
+  --color-system-checkbox-border: #3f434a;
+  --color-system-body-bg:#30353c;
+  --color-system-notification-bg:#343a43;
+  --color-system-card-bg:#2B2F36;
+  --color-system-border-1: #3F434A;
 }

src/styles/theme.scss

@@ -271,6 +271,14 @@
   --color-change-tag-bg: #f5f2e6;
 
   --color-previous-bg: #e1e3e9;
+  --color-system-color-bg: #f6f8fa;
+  --color-system-border: #eaebed;
+  --color-system-checkbox-bg: #fff;
+  --color-system-checkbox-border: #eaebed;
+  --color-system-body-bg: #fff;
+  --color-system-notification-bg: #f6f8fa;
+  --color-system-card-bg: #fff;
+  --color-system-border-1: #e8eaee;
 }
 
 :root.dark {
@@ -316,7 +324,7 @@
   --color-user-config-title-bottom-border: #3f434a;
   --color-container-status-node-bg: #3e454f;
 
-  --color-btn-blue-bg: rgba(255, 255, 255, 0);
+  --color-btn-blue-bg: rgba(248, 249, 253, 0.1);
 
   --color-el-btn-pain-theme-border: #ed6d00;
   --color-el-btn-pain-theme-text: #ed6d00;

src/views/SystemSettings/src/components/CreateNewrule/src/CreateNewrule.vue

@@ -55,7 +55,7 @@ onMounted(() => {
   <div class="Title">
     <div>Create New Rule</div>
     <div>
-      <el-button class="create_button" type="default" @click="CancelRulesVisible = true">
+      <el-button class="create_button" style="margin-right: 8px;" type="default" @click="CancelRulesVisible = true">
         <span class="iconfont_icon">
           <svg class="iconfont" aria-hidden="true">
             <use xlink:href="#icon-icon_return_b"></use>
@@ -256,7 +256,7 @@ onMounted(() => {
   align-items: center;
 }
 :deep(header.el-dialog__header) {
-  background-color: #fff;
+  background-color: var(--color-system-body-bg);
 }
 :deep(footer.el-dialog__footer) {
   border-top: none;

src/views/SystemSettings/src/components/MonitoringTable/src/MonitoringTable.vue

@@ -145,7 +145,18 @@ const deleteMoniTable = (row: any) => {
 }
 
 // 编辑表格数据
-const handleedit = (row: any) => {
+const handleedit = ({ row }: any) => {
+  sessionStorage.setItem('activeTab', 'Monitoring Settings')
+  sessionStorage.setItem('editTableid', row.id)
+  sessionStorage.setItem('editTablerules_type', row.rules_type)
+  sessionStorage.setItem('editTableoption', row.notifications_option)
+  router.push({
+    path: '/SystemSettings/createnewrule',
+    query: {}
+  })
+}
+
+const handleedittow = (row: any) => {
   sessionStorage.setItem('activeTab', 'Monitoring Settings')
   sessionStorage.setItem('editTableid', row.id)
   sessionStorage.setItem('editTablerules_type', row.rules_type)
@@ -164,7 +175,12 @@ onMounted(() => {
 
 <template>
   <div class="SettingTable">
-    <vxe-grid ref="tableRef" :style="{ border: 'none' }" v-bind="tableData">
+    <vxe-grid
+      ref="tableRef"
+      :style="{ border: 'none' }"
+      v-bind="tableData"
+      @cell-dblclick="handleedit"
+    >
       <!-- 空数据时的插槽 -->
       <template #empty v-if="tableData.data.length === 0">
         <TableEmpty EmptyTitle="Customize your shipment tracking preferences.">
@@ -174,7 +190,7 @@ onMounted(() => {
         </TableEmpty>
       </template>
       <template #action="{ row }">
-        <el-button class="el-button--blue" style="height: 24px" @click="handleedit(row)">
+        <el-button class="el-button--blue" style="height: 24px" @click="handleedittow(row)">
           <span class="font_family icon-icon_edit_b"></span>
         </el-button>
         <el-popover trigger="click" :visible="row.visible" placement="left" :width="480">