perf: 登录

src/components/ReImageVerify/src/hooks.ts

@@ -1,85 +1,30 @@
 import { ref, onMounted } from "vue";
+import { getCode } from "@/api/login";
 
 /**
  * 绘制图形验证码
  * @param width - 图形宽度
  * @param height - 图形高度
  */
-export const useImageVerify = (width = 120, height = 40) => {
-  const domRef = ref<HTMLCanvasElement>();
+export const useImageVerify = () => {
   const imgCode = ref("");
-
-  function setImgCode(code: string) {
-    imgCode.value = code;
-  }
+  const imgSrc = ref("");
 
   function getImgCode() {
-    if (!domRef.value) return;
-    imgCode.value = draw(domRef.value, width, height);
+    getCode().then(data => {
+      if (data.status) {
+        imgCode.value = data.data.uuid;
+        imgSrc.value = data.data.img;
+      }
+    });
   }
 
   onMounted(() => {
     getImgCode();
   });
-
   return {
-    domRef,
+    imgSrc,
     imgCode,
-    setImgCode,
     getImgCode
   };
 };
-
-function randomNum(min: number, max: number) {
-  const num = Math.floor(Math.random() * (max - min) + min);
-  return num;
-}
-
-function randomColor(min: number, max: number) {
-  const r = randomNum(min, max);
-  const g = randomNum(min, max);
-  const b = randomNum(min, max);
-  return `rgb(${r},${g},${b})`;
-}
-
-function draw(dom: HTMLCanvasElement, width: number, height: number) {
-  let imgCode = "";
-
-  const NUMBER_STRING = "0123456789";
-
-  const ctx = dom.getContext("2d");
-  if (!ctx) return imgCode;
-
-  ctx.fillStyle = randomColor(180, 230);
-  ctx.fillRect(0, 0, width, height);
-  for (let i = 0; i < 4; i += 1) {
-    const text = NUMBER_STRING[randomNum(0, NUMBER_STRING.length)];
-    imgCode += text;
-    const fontSize = randomNum(18, 41);
-    const deg = randomNum(-30, 30);
-    ctx.font = `${fontSize}px Simhei`;
-    ctx.textBaseline = "top";
-    ctx.fillStyle = randomColor(80, 150);
-    ctx.save();
-    ctx.translate(30 * i + 15, 15);
-    ctx.rotate((deg * Math.PI) / 180);
-    ctx.fillText(text, -15 + 5, -15);
-    ctx.restore();
-  }
-  for (let i = 0; i < 5; i += 1) {
-    ctx.beginPath();
-    ctx.moveTo(randomNum(0, width), randomNum(0, height));
-    ctx.lineTo(randomNum(0, width), randomNum(0, height));
-    ctx.strokeStyle = randomColor(180, 230);
-    ctx.closePath();
-    ctx.stroke();
-  }
-  for (let i = 0; i < 41; i += 1) {
-    ctx.beginPath();
-    ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI);
-    ctx.closePath();
-    ctx.fillStyle = randomColor(150, 200);
-    ctx.fill();
-  }
-  return imgCode;
-}

src/components/ReImageVerify/src/index.vue

@@ -20,14 +20,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
-const { domRef, imgCode, setImgCode, getImgCode } = useImageVerify();
+const { imgSrc, imgCode, getImgCode } = useImageVerify();
 
-watch(
-  () => props.code,
-  newValue => {
-    setImgCode(newValue);
-  }
-);
 watch(imgCode, newValue => {
   emit("update:code", newValue);
 });
@@ -36,11 +30,10 @@ defineExpose({ getImgCode });
 </script>
 
 <template>
-  <canvas
-    ref="domRef"
-    width="120"
-    height="40"
-    class="cursor-pointer"
+  <el-image
+    style="width: 120; height: 40"
+    :src="imgSrc"
+    fit="contain"
     @click="getImgCode"
   />
 </template>