lkddi/certd
1
0
Fork 0
mirror of https://github.com/certd/certd.git synced 2026-05-15 04:27:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'v2-dev' into v2-dev-buy

Browse Source
This commit is contained in:
xiaojunnuo
2025-11-04 23:04:11 +08:00
parent c4ebbaba74 feae105426
commit bcac810f71
225 changed files with 5865 additions and 1654 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/certd-client/src/components/captcha/captcha-input.vue
+11 -3
View File
@@ -12,6 +12,14 @@ const props = defineProps({
type: Object,
default: () => ({}),
},
type: {
type: String,
default: "image",
},
addonId: {
type: Number,
default: 0,
},
});
const captchaRef = ref(null);
const settingStore = useSettingStore();
@@ -23,7 +31,7 @@ const captchaAddonId = computed(() => {
return settingStore.sysPublic.captchaAddonId ?? 0;
});
const captchaComponent = computed(() => {
let type: any = "image";
let type: any = props.type ?? "image";
if (settingStore.sysPublic.captchaAddonId && settingStore.sysPublic.captchaType) {
type = settingStore.sysPublic.captchaType;
}
@@ -48,10 +56,10 @@ function onChange(data: any) {
}
async function getCaptchaForm() {
return await captchaRef.value.getCaptchaForm();
return await captchaRef.value?.getCaptchaForm();
}
async function reset() {
await captchaRef.value.reset();
await captchaRef.value?.reset();
}
defineExpose({
getCaptchaForm,
packages/ui/certd-client/src/components/captcha/captchas/geetest_captcha.vue
+9 -6
View File
@@ -7,6 +7,14 @@ import { useSettingStore } from "/@/store/settings";
import { request } from "/src/api/service";
import { notification } from "ant-design-vue";
import { loadScript } from "vue-plugin-load-script";
const loaded = ref(false);
async function loadCaptchaScript() {
// 加载验证码js
await loadScript("https://static.geetest.com/v4/gt4.js");
loaded.value = true;
}
defineOptions({
name: "GeetestCaptcha",
});
@@ -16,15 +24,10 @@ const props = defineProps<{
captchaGet: () => Promise<any>;
}>();
const captchaRef = ref(null);
// const addonApi = createAddonApi();
const settingStore = useSettingStore();
const captchaInstanceRef: Ref = ref({});
async function init() {
// if (!initGeetest4) {
// await import("https://static.geetest.com/v4/gt4.js");
// }
await loadCaptchaScript();
const { captchaId } = await props.captchaGet();
// @ts-ignore
initGeetest4(
packages/ui/certd-client/src/components/captcha/captchas/tencent_captcha.vue
+233
View File
@@ -0,0 +1,233 @@
<template>
<div ref="captchaRef" class="tencent_captcha_wrapper" :class="{ tencent_captcha_ok: modelValue }" @click="triggerCaptcha">
<div class="validation-box" :class="{ validated: modelValue != null }">
<div class="sweep-animation"></div>
<div class="box-content">
<div class="box-icon">✓</div>
<span v-if="modelValue == null" class="status-text">点击进行验证</span>
<span v-else class="status-text">验证成功</span>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted, defineProps, defineEmits, ref, onUnmounted, Ref, watch } from "vue";
import { notification } from "ant-design-vue";
import { loadScript } from "vue-plugin-load-script";
const loaded = ref(false);
async function loadCaptchaScript() {
// 加载验证码js
// var appid = "您的CaptchaAppId";
// loadScript("https://turing.captcha.qq.com/TJCaptcha.js?appid=" + appid);
await loadScript("https://turing.captcha.qcloud.com/TJCaptcha.js");
loaded.value = true;
}
loadCaptchaScript();
defineOptions({
name: "TencentCaptcha",
});
const emit = defineEmits(["update:modelValue", "change"]);
const props = defineProps<{
modelValue: any;
captchaGet: () => Promise<any>;
}>();
const captchaRef = ref(null);
const captchaInstanceRef: Ref = ref({});
// 定义回调函数
function callback(res: { ret: number; ticket: string; randstr: string; errorCode?: number; errorMessage?: string }) {
// 第一个参数传入回调结果，结果如下：
// ret Int 验证结果，0：验证成功。2：用户主动关闭验证码。
// ticket String 验证成功的票据，当且仅当 ret = 0 时 ticket 有值。
// CaptchaAppId String 验证码应用ID。
// bizState Any 自定义透传参数。
// randstr String 本次验证的随机串，后续票据校验时需传递该参数。
// verifyDuration Int 验证码校验接口耗时（ms）。
// actionDuration Int 操作校验成功耗时（用户动作+校验完成）(ms)。
// sid String 链路sid。
console.log("callback:", res);
// res（用户主动关闭验证码）= {ret: 2, ticket: null}
// res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
// res（请求验证码发生错误，验证码自动返回trerror_前缀的容灾票据） = {ret: 0, ticket: "String", randstr: "String", errorCode: Number, errorMessage: "String"}
// 此处代码仅为验证结果的展示示例，真实业务接入，建议基于ticket和errorCode情况做不同的业务处理
if (res.errorCode && res.errorCode > 0) {
notification.error({
message: `验证码验证失败：${res.errorMessage || res.errorCode}`,
});
}
if (res.ret === 0) {
emitChange({
ticket: res.ticket,
randstr: res.randstr,
});
} else if (res.ret === 2) {
console.log("用户主动关闭验证码");
}
}
// 定义验证码js加载错误处理函数
function loadErrorCallback(error: any) {
// var appid = "您的CaptchaAppId";
// // 生成容灾票据或自行做其它处理
// var ticket = "trerror_1001_" + appid + "_" + Math.floor(new Date().getTime() / 1000);
// callback({
// ret: 0,
// randstr: "@" + Math.random().toString(36).substr(2),
// ticket: ticket,
// errorCode: 1001,
// errorMessage: "jsload_error",
// });
notification.error({
message: `验证码加载失败：${error?.message || error}`,
});
}
async function triggerCaptcha() {
if (!loaded.value) {
notification.error({
message: "验证码还未加载完成，请稍后再试",
});
return;
}
const { captchaAppId } = await props.captchaGet();
try {
// 生成一个验证码对象
// CaptchaAppId：登录验证码控制台，从【验证管理】页面进行查看。如果未创建过验证，请先新建验证。注意：不可使用客户端类型为小程序的CaptchaAppId，会导致数据统计错误。
//callback：定义的回调函数
// @ts-ignore
var captcha = new TencentCaptcha(captchaAppId + "", callback, {
userLanguage: "zh-cn",
// showFn: (ret: any) => {
// const {
// duration, // 验证码渲染完成的耗时(ms)
// sid, // 链路sid
// } = ret;
// },
});
// 调用方法，显示验证码
captcha.show();
} catch (error) {
// 加载异常，调用验证码js加载错误处理函数
loadErrorCallback(error);
}
}
function emitChange(value: any) {
emit("update:modelValue", value);
emit("change", value);
}
function reset() {
captchaInstanceRef.value?.instance?.reset();
}
watch(
() => {
return props.modelValue;
},
value => {
if (value == null) {
reset();
}
}
);
defineExpose({
reset,
});
</script>
<style lang="less">
.tencent_captcha_wrapper {
.validation-box {
width: 100%;
height: 40px;
margin: 0 auto 30px;
border: 1px solid #ddd;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
background-color: #f9f9f9;
}
.validation-box:hover {
border-color: #aaa;
background-color: #f0f0f0;
}
.validation-box.validated {
border-color: #4caf50;
background-color: #f1f8e9;
}
.box-content {
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
position: relative;
}
.box-icon {
font-size: 18px;
color: #bbb;
margin-right: 15px;
transition: all 0.3s ease;
}
.validation-box.validated .box-icon {
color: #4caf50;
}
.status-text {
font-size: 14px;
font-weight: 500;
color: #888;
transition: all 0.3s ease;
}
.validation-box.validated .status-text {
color: #4caf50;
font-weight: 600;
}
/* 划过动画效果 */
.sweep-animation {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(76, 175, 80, 0.2), transparent);
z-index: 1;
opacity: 0;
transition: opacity 0.3s;
}
.validation-box.validated .sweep-animation {
animation: sweep 0.8s ease forwards;
opacity: 1;
}
@keyframes sweep {
0% {
left: -100%;
}
50% {
left: 0;
}
100% {
left: 100%;
}
}
}
</style>
packages/ui/certd-client/src/components/plugins/cert/domains-verify-plan-editor/api.ts
+10
View File
@@ -45,6 +45,16 @@ export async function DoVerify(id: number) {
});
}
export async function ResetStatus(id: number) {
return await request({
url: apiPrefix + "/resetStatus",
method: "post",
data: {
id,
},
});
}
export async function ParseDomain(fullDomain: string) {
return await request({
url: subDomainApiPrefix + "/parseDomain",
packages/ui/certd-client/src/components/plugins/cert/domains-verify-plan-editor/cname-record-info.vue
+19 -1
View File
@@ -16,6 +16,9 @@
<a-tooltip v-if="cnameRecord.error" :title="cnameRecord.error">
<fs-icon class="ml-5 color-red" icon="ion:warning-outline"></fs-icon>
</a-tooltip>
<a-tooltip v-if="cnameRecord.status === 'valid'" title="重置校验状态，重新校验">
<fs-icon class="ml-2 color-yellow text-md pointer" icon="solar:undo-left-square-bold" @click="resetStatus"></fs-icon>
</a-tooltip>
</td>
<td class="center">
<template v-if="cnameRecord.status !== 'valid'">
@@ -35,6 +38,7 @@ import { ref, watch } from "vue";
import { dict } from "@fast-crud/fast-crud";
import * as api from "./api.js";
import CnameTip from "./cname-tip.vue";
import { Modal } from "ant-design-vue";
const statusDict = dict({
data: [
{ label: "待设置CNAME", value: "cname", color: "warning" },
@@ -71,12 +75,15 @@ function onRecordChange() {
});
}
async function loadRecord() {
cnameRecord.value = await GetByDomain(props.domain);
}
let refreshIntervalId: any = null;
async function doRefresh() {
if (!props.domain) {
return;
}
cnameRecord.value = await GetByDomain(props.domain);
await loadRecord();
onRecordChange();
if (cnameRecord.value.status === "validating") {
@@ -114,6 +121,17 @@ async function doVerify() {
}
await doRefresh();
}
async function resetStatus() {
Modal.confirm({
title: "重置状态",
content: "确定要重置校验状态吗？",
onOk: async () => {
await api.ResetStatus(cnameRecord.value.id);
await loadRecord();
},
});
}
</script>
<style lang="less">