Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-15 09:48:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

🔥 移除 geetest 相关代码

Browse Source
This commit is contained in:
BTMuli
2023-10-26 13:19:24 +08:00
parent 5992567d55
commit 84b98e4ade
7 changed files with 1 additions and 447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/func/geetest.ts
View File

@@ -1,48 +0,0 @@
/**
* @file component func geetest.ts
* @description 封装自定义 geetest 组件，通过函数调用的方式，简化 geetest 的使用，使用时需要在 main.ts 中引入 geetest.js
* @since Beta v0.3.3
*/
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.3.3
* @extends ComponentInternalInstance
* @property {Function} exposeProxy.displayBox 弹出 geetest 验证
* @return GeetestInstance
*/
interface GeetestInstance extends ComponentInternalInstance {
exposeProxy: {
displayBox: () => boolean;
};
}
const renderBox = (): VNode => {
const container = document.createElement("div");
container.id = geetestId;
const boxVNode: VNode = h(geetest);
render(boxVNode, container);
document.body.appendChild(container);
return boxVNode;
};
let geetestInstance: VNode;
async function showGeetest(): Promise<boolean> {
if (geetestInstance !== undefined) {
const boxVue = <GeetestInstance>geetestInstance.component;
return boxVue.exposeProxy.displayBox();
} else {
geetestInstance = renderBox();
return await showGeetest();
}
}
export default showGeetest;

185
src/components/func/geetest.vue
View File

@@ -1,185 +0,0 @@
<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 { ref, watch } from "vue";
import showSnackbar from "./snackbar";
import { useUserStore } from "../../store/modules/user";
import TGRequest from "../../web/request/TGRequest";
const show = ref<boolean>(false);
const showOuter = ref<boolean>(false);
const showInner = ref<boolean>(false);
const userStore = useUserStore();
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);
}
});
async function displayBox(): Promise<void> {
const cookieGet = userStore.getCookieGroup3();
const resGet = await TGRequest.User.verification.get(cookieGet.ltoken, cookieGet.ltuid);
if ("retcode" in resGet) {
showSnackbar({
text: `[${resGet.retcode}]${resGet.message}`,
color: "error",
});
return;
}
show.value = true;
initGeetest(
{
gt: resGet.gt,
challenge: resGet.challenge,
offline: false,
new_captcha: true,
product: "custom",
area: "#verify",
width: "250px",
},
(captchaObj: TGApp.BBS.Geetest.GeetestCaptcha) => {
geetestRef.value.innerHTML = "";
captchaObj.appendTo("#geetest");
captchaObj.onSuccess(async () => {
const validate = captchaObj.getValidate();
const cookie = {
account_id: userStore.cookie.account_id,
cookie_token: userStore.cookie.cookie_token,
ltoken: userStore.cookie.ltoken,
ltuid: userStore.cookie.ltuid,
};
const resVerify = await TGRequest.User.verification.verify(cookie, validate);
if (resVerify.retcode !== 0) {
showSnackbar({
text: `[${resVerify.retcode}]${resVerify.message}`,
color: "error",
});
}
});
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>