refactor: login page (#259)

src/components/ReIcon/src/iconifyIconOffline.ts

@@ -18,7 +18,6 @@ import Close from "@iconify-icons/ep/close";
 import CloseBold from "@iconify-icons/ep/close-bold";
 import Bell from "@iconify-icons/ep/bell";
 import Guide from "@iconify-icons/ep/guide";
-import User from "@iconify-icons/ep/user";
 import Iphone from "@iconify-icons/ep/iphone";
 import Location from "@iconify-icons/ep/location";
 import Tickets from "@iconify-icons/ep/tickets";
@@ -48,7 +47,6 @@ addIcon("close", Close);
 addIcon("close-bold", CloseBold);
 addIcon("bell", Bell);
 addIcon("guide", Guide);
-addIcon("user", User);
 addIcon("iphone", Iphone);
 addIcon("location", Location);
 addIcon("tickets", Tickets);
@@ -87,6 +85,8 @@ import Dept from "@iconify-icons/ri/git-branch-line";
 import Password from "@iconify-icons/ri/lock-password-line";
 import Ppt from "@iconify-icons/ri/file-ppt-2-line";
 import TerminalWindowLine from "@iconify-icons/ri/terminal-window-line";
+import User from "@iconify-icons/ri/user-3-fill";
+import Lock from "@iconify-icons/ri/lock-fill";
 addIcon("arrow-right-s-line", ArrowRightSLine);
 addIcon("arrow-left-s-line", ArrowLeftSLine);
 addIcon("logout-circle-r-line", LogoutCircleRLine);
@@ -110,6 +110,8 @@ addIcon("dept", Dept);
 addIcon("password", Password);
 addIcon("ppt", Ppt);
 addIcon("terminal-window-line", TerminalWindowLine);
+addIcon("user", User);
+addIcon("lock", Lock);
 
 // Font Awesome 4
 import FaUser from "@iconify-icons/fa/user";

src/components/ReIcon/src/iconifyIconOnline.ts

@@ -9,11 +9,6 @@ export default defineComponent({
     icon: {
       type: String,
       default: ""
-    },
-    // default element plus icon
-    type: {
-      type: String,
-      default: "ep:"
     }
   },
   render() {
@@ -21,7 +16,7 @@ export default defineComponent({
     return h(
       IconifyIcon,
       {
-        icon: `${this.type}${this.icon}`,
+        icon: `${this.icon}`,
         ...attrs
       },
       {

src/components/ReIcon/src/select.vue

@@ -130,7 +130,7 @@ watch(
               class="w-40px h-32px cursor-pointer flex justify-center items-center"
               @click="visible = !visible"
             >
-              <IconifyIconOnline :icon="icon" :type="currentActiveType" />
+              <IconifyIconOnline :icon="currentActiveType + icon" />
             </div>
           </template>
 
@@ -160,7 +160,7 @@ watch(
                     :style="iconItemStyle(item)"
                     @click="onChangeIcon(item)"
                   >
-                    <IconifyIconOnline :icon="item" :type="currentActiveType" />
+                    <IconifyIconOnline :icon="currentActiveType + item" />
                   </li>
                 </ul>
               </el-scrollbar>

src/components/ReImageVerify/index.ts

@@ -0,0 +1,12 @@
+import { App } from "vue";
+import reImageVerify from "./src/index.vue";
+
+export const ReImageVerify = Object.assign(reImageVerify, {
+  install(app: App) {
+    app.component(reImageVerify.name, reImageVerify);
+  }
+});
+
+export default {
+  ReImageVerify
+};

src/components/ReImageVerify/src/hooks.ts

@@ -0,0 +1,85 @@
+import { ref, onMounted } from "vue";
+
+/**
+ * 绘制图形验证码
+ * @param width - 图形宽度
+ * @param height - 图形高度
+ */
+export const useImageVerify = (width = 120, height = 40) => {
+  const domRef = ref<HTMLCanvasElement>();
+  const imgCode = ref("");
+
+  function setImgCode(code: string) {
+    imgCode.value = code;
+  }
+
+  function getImgCode() {
+    if (!domRef.value) return;
+    imgCode.value = draw(domRef.value, width, height);
+  }
+
+  onMounted(() => {
+    getImgCode();
+  });
+
+  return {
+    domRef,
+    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

@@ -0,0 +1,48 @@
+<script lang="ts">
+export default {
+  name: "ReImageVerify"
+};
+</script>
+
+<script setup lang="ts">
+import { watch } from "vue";
+import { useImageVerify } from "./hooks";
+
+interface Props {
+  code?: string;
+}
+
+interface Emits {
+  (e: "update:code", code: string): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  code: ""
+});
+
+const emit = defineEmits<Emits>();
+
+const { domRef, imgCode, setImgCode, getImgCode } = useImageVerify();
+
+watch(
+  () => props.code,
+  newValue => {
+    setImgCode(newValue);
+  }
+);
+watch(imgCode, newValue => {
+  emit("update:code", newValue);
+});
+
+defineExpose({ getImgCode });
+</script>
+
+<template>
+  <canvas
+    ref="domRef"
+    width="120"
+    height="40"
+    class="cursor-pointer"
+    @click="getImgCode"
+  />
+</template>