🌱 继续优化验证码登录，尝试引入geetest

src/components/func/geetest.ts

@@ -0,0 +1,59 @@
+/**
+ * @file component/func/geetest.ts
+ * @description 封装自定义 geetest 组件，通过函数调用的方式，简化 geetest 的使用
+ * @since Beta v0.5.1
+ */
+
+import { h, render } from "vue";
+import type { ComponentInternalInstance, VNode } from "vue";
+
+import geetest from "./geetest.vue";
+
+const geetestId = "tg-func-geetest";
+
+/**
+ * @description 自定义 geetest 组件
+ * @since Beta v0.5.1
+ * @extends ComponentInternalInstance
+ * @property {Function} exposeProxy.displayBox 弹出 geetest 验证
+ * @return GeetestInstance
+ */
+interface GeetestInstance extends ComponentInternalInstance {
+  exposeProxy: {
+    displayBox: (
+      props: TGApp.Plugins.Mys.Geetest.reqResp,
+    ) => Promise<TGApp.Plugins.Mys.Geetest.validateResp | false>;
+  };
+}
+
+const renderBox = (props: TGApp.Plugins.Mys.Geetest.reqResp): VNode => {
+  const container = document.createElement("div");
+  container.id = geetestId;
+  const boxVNode: VNode = h(geetest, props);
+  render(boxVNode, container);
+  document.body.appendChild(container);
+  return boxVNode;
+};
+
+let geetestInstance: VNode;
+
+/**
+ * @function showGeetest
+ * @since Beta v0.5.1
+ * @description 弹出 geetest 验证
+ * @param {TGApp.Plugins.Mys.Geetest.reqResp} props geetest 验证的参数
+ * @return {Promise<TGApp.Plugins.Mys.Geetest.validateResp>} 验证成功返回验证数据
+ */
+async function showGeetest(
+  props: TGApp.Plugins.Mys.Geetest.reqResp,
+): Promise<TGApp.Plugins.Mys.Geetest.validateResp | false> {
+  if (geetestInstance !== undefined) {
+    const boxVue = <GeetestInstance>geetestInstance.component;
+    return boxVue.exposeProxy.displayBox(props);
+  } else {
+    geetestInstance = renderBox(props);
+    return await showGeetest(props);
+  }
+}
+
+export default showGeetest;

src/components/func/geetest.vue

@@ -0,0 +1,182 @@
+<template>
+  <transition name="func-geetest-outer">
+    <div v-show="show || showOuter" class="geetest-overlay" @click.self.prevent>
+      <transition name="func-geetest-inner">
+        <div v-show="showInner" class="geetest-box">
+          <div class="geetest-top">
+            <div class="geetest-title">请完成如下极验测试</div>
+          </div>
+          <div id="verify" class="geetest-mid">
+            <div id="geetest" ref="geetestRef"></div>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </transition>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+
+interface GeetestProps {
+  gt: string;
+  challenge: string;
+  new_captcha: number;
+  success: number;
+}
+
+const props = withDefaults(defineProps<GeetestProps>(), {
+  gt: "",
+  challenge: "",
+  new_captcha: 0,
+  success: 0,
+});
+
+const show = ref<boolean>(false);
+const showOuter = ref<boolean>(false);
+const showInner = ref<boolean>(false);
+
+const geetestRef = ref<HTMLElement>(<HTMLElement>document.getElementById("geetest"));
+
+watch(show, () => {
+  if (show.value) {
+    showOuter.value = true;
+    setTimeout(() => {
+      showInner.value = true;
+    }, 100);
+  } else {
+    setTimeout(() => {
+      showInner.value = false;
+    }, 100);
+    setTimeout(() => {
+      showOuter.value = false;
+    }, 300);
+  }
+});
+
+onMounted(async () => {
+  await displayBox(props);
+});
+
+async function displayBox(
+  props: TGApp.Plugins.Mys.Geetest.reqResp,
+): Promise<TGApp.Plugins.Mys.Geetest.validateResp | false> {
+  if (!props.gt || !props.challenge) return false;
+  show.value = true;
+  return await new Promise<TGApp.Plugins.Mys.Geetest.validateResp>((resolve) => {
+    // eslint-disable-next-line no-undef
+    initGeetest(
+      {
+        gt: props.gt,
+        challenge: props.challenge,
+        offline: false,
+        new_captcha: true,
+        product: "custom",
+        area: "#verify",
+        width: "250px",
+      },
+      (captchaObj: TGApp.Plugins.Mys.Geetest.GeetestCaptcha) => {
+        geetestRef.value.innerHTML = "";
+        captchaObj.appendTo("#geetest");
+        captchaObj.onSuccess(async () => {
+          const validate = captchaObj.getValidate();
+          resolve(validate);
+          captchaObj.onClose(() => {
+            show.value = false;
+          });
+        });
+      },
+    );
+  });
+}
+
+defineExpose({
+  displayBox,
+});
+</script>
+<style lang="css" scoped>
+.func-geetest-outer-enter-active,
+.func-geetest-outer-leave-active,
+.func-geetest-inner-enter-active {
+  transition: all 0.3s;
+}
+
+.func-geetest-inner-leave-active {
+  transition: all 0.5s ease-in-out;
+}
+
+.func-geetest-inner-enter-from {
+  opacity: 0;
+  transform: scale(1.5);
+}
+
+.func-geetest-inner-enter-to,
+.func-geetest-inner-leave-from {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.func-geetest-outer-enter-to,
+.func-geetest-outer-leave-from {
+  opacity: 1;
+}
+
+.func-geetest-outer-enter-from,
+.func-geetest-outer-leave-to {
+  opacity: 0;
+}
+
+.func-geetest-inner-leave-to {
+  opacity: 0;
+  transform: scale(0);
+}
+
+.geetest-overlay {
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(20px);
+  background: rgb(0 0 0 / 50%);
+}
+
+.geetest-box {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  border-radius: 5px;
+  background-color: var(--box-bg-1);
+  color: var(--app-page-content);
+  gap: 10px;
+}
+
+.geetest-top {
+  border-bottom: 1px solid var(--common-shadow-4);
+  font-family: var(--font-title);
+  text-align: center;
+}
+
+.geetest-title {
+  color: var(--common-text-title);
+  font-size: 20px;
+}
+
+.geetest-mid {
+  display: flex;
+  width: 100%;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 10px;
+  border-radius: 5px;
+  background: var(--box-bg-2);
+}
+
+#verify {
+  width: 256px;
+  height: 320px;
+}
+</style>