src/views/Dashboard/src/components/BarChart.vue

@@ -45,7 +45,7 @@ const getOption = () => {
       left: 19,
       top: 9.5,
       textStyle: {
-        color: '#2B2F36',
+        color: themeStore.theme === 'dark' ? '#f0f1f3' : '#2B2F36',
         fontWeight: '700',
         fontFamily: 'Lato-Light',
         fontSize: '14px'
@@ -95,7 +95,7 @@ const getOption = () => {
       axisTick: { show: false },
       axisLine: {
         lineStyle: {
-          color: '#eaebed'
+          color: themeStore.theme === 'dark' ? '#8d9095' : '#eaebed'
         }
       },
       axisLabel: {
@@ -111,13 +111,13 @@ const getOption = () => {
         show: true,
         lineStyle: {
           type: 'dashed',
-          color: '#3F434A'
+          color: themeStore.theme === 'dark' ? '#8d9095' : '#eaebed'
         }
       },
       axisLine: {
         show: true,
         lineStyle: {
-          color: '#3F434A'
+          color: themeStore.theme === 'dark' ? '#8d9095' : '#eaebed'
         }
       },
       axisLabel: {
@@ -146,7 +146,7 @@ const getOption = () => {
       top: 6,
       right: 8,
       iconStyle: {
-        borderColor: '#2B2F36'
+        borderColor: themeStore.theme === 'dark' ? '#f0f1f3' : '#2B2F36'
       },
       emphasis: {
         iconStyle: {
@@ -235,7 +235,7 @@ watch(
       }
     })
   },
-  { immediate: true }
+  { immediate: true, deep: true }
 )
 
 // 监听窗口大小变化

src/views/Dashboard/src/components/SellerChart.vue

@@ -75,7 +75,7 @@ const updateOption = () => {
   const isDark = themeStore.theme === 'dark'
   const gridColor = isDark ? '#3F434A' : '#eaebed'
   const textColor = '#B5B9BF'
-  const toolboxBorderColor = isDark ? '#f0f1f3' : '#ed6d00'
+  const toolboxBorderColor = isDark ? '#f0f1f3' : '#2B2F36'
   const toolboxBgColor = isDark ? '#2B2F36' : '#fff'
 
   const option = {
@@ -169,6 +169,7 @@ const updateOption = () => {
           show: true,
           name: props.saveImageName,
           type: 'png',
+          color: themeStore.theme === 'dark' ? '#3F434A' : '#fff',
           backgroundColor: toolboxBgColor
         }
       }

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

@@ -3,6 +3,7 @@ const customer = ref('')
 const isShowMapping = ref(true)
 const visible = ref(false)
 const myPopover = ref()
+const customerSearchQuery = ref('')
 
 const customerList = ref([
   'alice@dummy customer.com',
@@ -10,7 +11,13 @@ const customerList = ref([
   'charlie@dummy customer.com',
   'dave@dummy customer.com'
 ])
+const showCustomerList = ref(customerList.value)
 
+const filterCustomer = (query: string) => {
+  showCustomerList.value = customerList.value.filter((item) => {
+    return item.includes(query)
+  })
+}
 const changeShowMapping = () => {
   customer.value = ''
 }
@@ -48,7 +55,12 @@ const changeCustomer = (cust: string) => {
           <span class="font_family icon-icon_dropdown_b"></span></div
       ></template>
       <div style="padding: 8px">
-        <el-input class="customer-input" placeholder="Search customer">
+        <el-input
+          v-model="customerSearchQuery"
+          @input="filterCustomer"
+          class="customer-input"
+          placeholder="Search customer"
+        >
           <template #suffix>
             <span class="font_family icon-icon_search_b"></span>
           </template>
@@ -56,7 +68,7 @@ const changeCustomer = (cust: string) => {
         <div class="select-customer-list">
           <div
             class="customer-item"
-            v-for="cust in customerList"
+            v-for="cust in showCustomerList"
             :key="cust"
             @click="changeCustomer(cust)"
           >