评卷员主界面增加图片加载的loading过渡效果，防止网速慢

server.config.ts

@@ -3,11 +3,11 @@ import type { ServerOptions } from 'vite'
 const server: ServerOptions = {
   proxy: {
     '^/?(api|file)/': {
-      target: 'http://192.168.10.41:8200',
+      // target: 'http://192.168.10.41:8200',
       // target: 'http://192.168.10.178:8200',
       // target: 'http://192.168.10.108:8200',
       // target: 'http://cet-test.markingtool.cn',
-      // target: 'http://192.168.10.136:80',
+      target: 'http://192.168.10.136:80',
       // target: 'http://cet-dev.markingtool.cn:8200',
     },
   },

src/hooks/useSetImgBg.ts

@@ -139,10 +139,12 @@ export const useSetImgBg = (option: Ref<SetImgBgOption>, frontColor?: Ref<string
   const imageWorker = new TintImageWorker()
   const drawing = ref<boolean>(false)
   const dataUrl = ref('')
+  const imgLoading = ref(false)
   imageWorker.addEventListener('message', (e) => {
     const data = e.data as MessageData
     drawing.value = data.drawing
     dataUrl.value = data.blob ? URL.createObjectURL(data.blob) : ''
+    imgLoading.value = false
   })
 
   watch(
@@ -153,6 +155,7 @@ export const useSetImgBg = (option: Ref<SetImgBgOption>, frontColor?: Ref<string
       () => option.value?.enableSharpen,
     ],
     () => {
+      imgLoading.value = true
       nextTick(() => {
         const opt = unref(option)
         if (!opt.image) {
@@ -228,5 +231,6 @@ export const useSetImgBg = (option: Ref<SetImgBgOption>, frontColor?: Ref<string
   return {
     drawing,
     dataUrl,
+    imgLoading,
   }
 }

src/modules/marking/mark/index.vue

@@ -34,6 +34,7 @@
       </div>
       <div
         v-else-if="!!currentTask"
+        v-loading="imgLoading"
         class="flex flex-1 direction-column radius-base full fill-blank mark-content"
         :style="{ 'background-color': backgroundColor }"
       >
@@ -594,7 +595,7 @@ const imgOption = computed<SetImgBgOption>(() => {
   }
 })
 
-const { drawing, dataUrl } = useSetImgBg(imgOption, frontColor, setFrontColor)
+const { drawing, dataUrl, imgLoading } = useSetImgBg(imgOption, frontColor, setFrontColor)
 
 const getEnableRemark = () => {
   useFetch('getMarkHistory')