Browse Source

feat:修改部分暗黑样式

AmandaG 11 months ago
parent
commit
0653146469

+ 24 - 5
src/components/ScoringGrade/components/DialogColorful.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 <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 BubbleLight from '../image/bubble_corner_colorful.png'
 import BubbleDark from '../image/bubble_corner_colorful_darkmode.png'
 import BubbleDark from '../image/bubble_corner_colorful_darkmode.png'
 const props = defineProps({
 const props = defineProps({
@@ -12,16 +13,34 @@ const emits = defineEmits(['submitDetails'])
 const submitDetails = (val: any) => {
 const submitDetails = (val: any) => {
   emits('submitDetails', val)
   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>
 </script>
 <template>
 <template>
-  <div class="colorfulflex">
+  <div class="colorfulflex" ref="ScoringRef">
     <div v-if="props.isshowexpression" class="dialogcolorful">
     <div v-if="props.isshowexpression" class="dialogcolorful">
       <div class="dialogue">
       <div class="dialogue">
         <img :src="props.colorfulSrc" />
         <img :src="props.colorfulSrc" />
       </div>
       </div>
       <div class="vector">
       <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>
     </div>
     <div v-if="props.isshowDetails" class="dialogcolorful submit">
     <div v-if="props.isshowDetails" class="dialogcolorful submit">
@@ -41,7 +60,7 @@ const theme = localStorage.getItem('theme')
         </div>
         </div>
       </div>
       </div>
       <div class="vector vector_submit">
       <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>
     </div>
   </div>
   </div>

+ 23 - 4
src/components/ScoringGrade/components/DialogUe.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 <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 BubbleLight from '../image/bubble_corner.png'
 import BubbleDark from '../image/bubble_corner_darkmode.png'
 import BubbleDark from '../image/bubble_corner_darkmode.png'
 
 
@@ -79,10 +80,28 @@ const changeSmileRadio = (title: any, value: any) => {
   SmileObj[title] = value
   SmileObj[title] = value
   emits('changeSmileRadio', SmileObj)
   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>
 </script>
 <template>
 <template>
-  <div style="margin-bottom: 8px">
+  <div style="margin-bottom: 8px" ref="ScoringRef">
     <div class="dialogue" :style="{ width: props.dialogWidth }">
     <div class="dialogue" :style="{ width: props.dialogWidth }">
       {{ props.content }}
       {{ props.content }}
       <div v-if="props.isShowAngry" class="dialogflex">
       <div v-if="props.isShowAngry" class="dialogflex">
@@ -134,7 +153,7 @@ const theme = localStorage.getItem('theme')
       </div>
       </div>
     </div>
     </div>
     <div class="vector">
     <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>
   </div>
 </template>
 </template>

+ 3 - 0
src/styles/Antdui.scss

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

+ 1 - 1
src/views/Layout/src/components/Header/HeaderView.vue

@@ -213,7 +213,7 @@ const handleLogin = () => {
           </div>
           </div>
         </div>
         </div>
         <template #reference>
         <template #reference>
-          <el-button>
+          <el-button style="border: none">
             <span class="font_family icon-icon_themes_b" style="font-size: 16px"></span
             <span class="font_family icon-icon_themes_b" style="font-size: 16px"></span
           ></el-button>
           ></el-button>
         </template>
         </template>

+ 1 - 1
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">
           <el-input placeholder="Search user name" v-model="OperationSearch" class="log_input">
             <template #prefix>
             <template #prefix>
               <span class="iconfont_icon">
               <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>
                   <use xlink:href="#icon-icon_search_b"></use>
                 </svg>
                 </svg>
               </span>
               </span>