bug fix

src/hooks/useSetImgBg.ts

@@ -1,7 +1,9 @@
-import { ref, onScopeDispose, watch, nextTick, unref } from 'vue'
+import { ref, onScopeDispose, watch, nextTick, unref, computed, watchEffect } from 'vue'
 import type { Ref } from 'vue'
 import { isDom } from '@/utils/common'
 import TintImageWorker from '@/utils/image.worker?worker'
+import useMainStore from '@/store/main'
+import { useRoute } from 'vue-router'
 
 export type RGBA = number[]
 
@@ -68,39 +70,51 @@ function getHex(...value: any) {
   return hex
 }
 
-export const initImage = async ({ image, frontColor, setFrontColor }: InitOption) => {
-  if (!image) {
-    return console.warn(`return for img define ${image}`)
-  }
-
-  if (!isDom<HTMLImageElement>(image)) {
-    image = await new Promise<HTMLImageElement>((resolve, reject) => {
-      const img = new Image()
-      img.src = image as string
-      img.onload = function () {
-        if (frontColor && setFrontColor && frontColor.value === 'transparent') {
-          const canvas = document.createElement('canvas')
-          const maxVal = getRgba(canvas, this)
-          console.log('maxVal:', maxVal)
-          const splitArr = maxVal.split(',')
-          const hex = getHex(Number(splitArr[0]), Number(splitArr[1]), Number(splitArr[2]))
-          setFrontColor('#' + hex)
-        }
-
-        resolve(img)
-      }
-      img.onerror = reject
-    })
-  }
-  return image
-}
-
 interface MessageData {
   drawing: boolean
   blob?: Blob
 }
 
 export const useSetImgBg = (option: Ref<SetImgBgOption>, frontColor?: Ref<string>, setFrontColor?: any) => {
+  const { fullPath } = useRoute()
+  const mainStore = useMainStore()
+  const userSetColor = computed(() => {
+    return mainStore.userMarkConfig?.[fullPath]?.frontColor
+  })
+  watchEffect(() => {
+    if (!!userSetColor.value && setFrontColor) {
+      setFrontColor(userSetColor.value)
+    }
+  })
+  const initImage = async ({ image, frontColor, setFrontColor }: InitOption) => {
+    if (!image) {
+      return console.warn(`return for img define ${image}`)
+    }
+
+    if (!isDom<HTMLImageElement>(image)) {
+      image = await new Promise<HTMLImageElement>((resolve, reject) => {
+        const img = new Image()
+        img.src = image as string
+        img.onload = function () {
+          if (frontColor && setFrontColor) {
+            const canvas = document.createElement('canvas')
+            const maxVal = getRgba(canvas, this)
+            console.log('maxVal:', maxVal)
+            const splitArr = maxVal.split(',')
+            const hex = getHex(Number(splitArr[0]), Number(splitArr[1]), Number(splitArr[2]))
+            if (!userSetColor?.value) {
+              setFrontColor('#' + hex)
+            }
+          }
+
+          resolve(img)
+        }
+        img.onerror = reject
+      })
+    }
+    return image
+  }
+
   const imageWorker = new TintImageWorker()
   const drawing = ref<boolean>(false)
   const dataUrl = ref('')
@@ -126,8 +140,6 @@ export const useSetImgBg = (option: Ref<SetImgBgOption>, frontColor?: Ref<string
           return
         }
         initImage({ image: opt.image, frontColor, setFrontColor }).then((image) => {
-          console.log('opt.image:', opt.image)
-
           if (!image) return
           createImageBitmap(image).then((imageBitMap) => {
             imageWorker.postMessage(

src/modules/expert/standard/index.vue

@@ -10,7 +10,7 @@
         </span>
         <right-button class="next-button" @click="checkNext" />
         <div class="flex-1 p-base scroll-auto mark-content-paper">
-          <img :src="dataUrl" alt="" class="paper-img" />
+          <img :src="dataUrl" alt="" class="paper-img" :style="{ 'background-color': frontColor }" />
         </div>
       </div>
       <div class="flex direction-column p-base radius-base fill-blank scroll-auto m-l-base table-view">
@@ -133,25 +133,27 @@ const formItems = computed<EpFormItem[]>(() => [
     rowKey: 'row-2',
     label: '分数',
     prop: 'scoreStart',
-    slotType: 'inputNumber',
-    slot: {
-      step: 1,
-      stepStrictly: true,
-      min: 0,
-      max: 999999,
-    },
+    slotType: 'input',
+    // slotType: 'inputNumber',
+    // slot: {
+    //   step: 1,
+    //   stepStrictly: true,
+    //   min: 0,
+    //   max: 999999,
+    // },
   }),
   span5({
     rowKey: 'row-2',
     label: '至',
     prop: 'scoreEnd',
-    slotType: 'inputNumber',
-    slot: {
-      step: 1,
-      stepStrictly: true,
-      min: 0,
-      max: 999999,
-    },
+    slotType: 'input',
+    // slotType: 'inputNumber',
+    // slot: {
+    //   step: 1,
+    //   stepStrictly: true,
+    //   min: 0,
+    //   max: 999999,
+    // },
   }),
 ])