Merge branch 'feat_theme_g' of United_Software/k_online_ui into feat_theme

src/components/ScoringGrade/components/DialogColorful.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted, watch } 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({
@@ -12,16 +13,34 @@ const emits = defineEmits(['submitDetails'])
 const submitDetails = (val: any) => {
   emits('submitDetails', val)
 }
-const theme = localStorage.getItem('theme')
+const themeStore = useThemeStore()
+const ScoringRef = ref()
+// 判断当前系统主题模式
+onMounted(() => {
+  watch(
+    () => themeStore.theme,
+    (newVal) => {
+      if (newVal === 'dark') {
+        ScoringRef.value.classList.add('dark-bg')
+      } else {
+        ScoringRef.value.classList.remove('dark-bg')
+      }
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  )
+})
 </script>
 <template>
-  <div class="colorfulflex">
+  <div class="colorfulflex" ref="ScoringRef">
     <div v-if="props.isshowexpression" class="dialogcolorful">
       <div class="dialogue">
         <img :src="props.colorfulSrc" />
       </div>
       <div class="vector">
-        <img class="vector_img" :src="theme == 'light' ? BubbleLight : BubbleDark" />
+        <img class="vector_img" :src="themeStore.theme == 'light' ? BubbleLight : BubbleDark" />
       </div>
     </div>
     <div v-if="props.isshowDetails" class="dialogcolorful submit">
@@ -41,7 +60,7 @@ const theme = localStorage.getItem('theme')
         </div>
       </div>
       <div class="vector vector_submit">
-        <img class="vector_img" :src="theme == 'light' ? BubbleLight : BubbleDark" />
+        <img class="vector_img" :src="themeStore.theme == 'light' ? BubbleLight : BubbleDark" />
       </div>
     </div>
   </div>

src/components/ScoringGrade/components/DialogUe.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted, watch } from 'vue'
+import { useThemeStore } from '@/stores/modules/theme'
 import BubbleLight from '../image/bubble_corner.png'
 import BubbleDark from '../image/bubble_corner_darkmode.png'
 
@@ -79,10 +80,28 @@ const changeSmileRadio = (title: any, value: any) => {
   SmileObj[title] = value
   emits('changeSmileRadio', SmileObj)
 }
-const theme = localStorage.getItem('theme')
+const themeStore = useThemeStore()
+const ScoringRef = ref()
+// 判断当前系统主题模式
+onMounted(() => {
+  watch(
+    () => themeStore.theme,
+    (newVal) => {
+      if (newVal === 'dark') {
+        ScoringRef.value.classList.add('dark-bg')
+      } else {
+        ScoringRef.value.classList.remove('dark-bg')
+      }
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  )
+})
 </script>
 <template>
-  <div style="margin-bottom: 8px">
+  <div style="margin-bottom: 8px" ref="ScoringRef">
     <div class="dialogue" :style="{ width: props.dialogWidth }">
       {{ props.content }}
       <div v-if="props.isShowAngry" class="dialogflex">
@@ -134,7 +153,7 @@ const theme = localStorage.getItem('theme')
       </div>
     </div>
     <div class="vector">
-      <img class="vector_img" :src="theme == 'light' ? BubbleLight : BubbleDark" />
+      <img class="vector_img" :src="themeStore.theme == 'light' ? BubbleLight : BubbleDark" />
     </div>
   </div>
 </template>

src/styles/Antdui.scss

@@ -96,4 +96,7 @@
 }
 .ant-picker .ant-picker-clear:hover {
   color: var(--color-neutral-1);
+}
+.ant-picker.ant-picker-disabled {
+  border-color: var(--border-color-2);
 }

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

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

src/views/OperationLog/src/OperationLog.vue

@@ -177,7 +177,7 @@ const DateChange = (date: any) => {
           <el-input placeholder="Search user name" v-model="OperationSearch" class="log_input">
             <template #prefix>
               <span class="iconfont_icon">
-                <svg class="iconfont" aria-hidden="true">
+                <svg class="iconfont icon_dark" aria-hidden="true">
                   <use xlink:href="#icon-icon_search_b"></use>
                 </svg>
               </span>