xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2026-04-27 13:34:25 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

用户注册和用户登录增加用户协议和隐私政策功能，需要用户同意协议才可注册和登录。

Browse Source
This commit is contained in:
清柯
2025-05-08 03:19:51 +08:00
parent 26c18fcd5a
commit c4fe6c825e
7 changed files with 429 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
web/src/views/Register.vue
View File

@@ -62,6 +62,17 @@
<el-input placeholder="请输入邀请码(可选)" size="large" v-model="data.invite_code" autocomplete="off"> </el-input>
</el-form-item>
<el-form-item label="" prop="agreement" :class="{'agreement-error': agreementError}">
<div class="agreement-box" :class="{'shake': isShaking}">
<el-checkbox v-model="data.agreement" @change="handleAgreementChange">
我已阅读并同意
<span class="agreement-link" @click.stop.prevent="openAgreement">《用户协议》</span>
和
<span class="agreement-link" @click.stop.prevent="openPrivacy">《隐私政策》</span>
</el-checkbox>
</div>
</el-form-item>
<el-row class="btn-row" :gutter="20">
<el-col :span="24">
<el-button class="login-btn" type="primary" size="large" @click="submitRegister">注册</el-button>
@@ -97,8 +108,9 @@ import AccountTop from "@/components/AccountTop.vue";
import AccountBg from "@/components/AccountBg.vue";
import { httpGet, httpPost } from "@/utils/http";
import { ElMessage } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import MarkdownIt from "markdown-it";
import SendMsg from "@/components/SendMsg.vue";
import { arrayContains, isMobile } from "@/utils/libs";
@@ -119,6 +131,7 @@ const data = ref({
code: "",
repass: "",
invite_code: router.currentRoute.value.query["invite_code"],
agreement: false,
});
const enableMobile = ref(false);
@@ -130,6 +143,18 @@ const wxImg = ref("/images/wx.png");
const licenseConfig = ref({});
const enableVerify = ref(false);
const captchaRef = ref(null);
const agreementError = ref(false);
const isShaking = ref(false);
// 初始化markdown解析器
const md = new MarkdownIt({
html: true,
linkify: true,
typographer: true
});
const agreementContent = ref('');
const privacyContent = ref('');
// 记录邀请码点击次数
if (data.value.invite_code) {
@@ -168,6 +193,34 @@ getSystemInfo()
ElMessage.error("获取系统配置失败：" + e.message);
});
// 获取用户协议
httpGet('/api/config/get?key=agreement')
.then((res) => {
if (res.data && res.data.content) {
agreementContent.value = res.data.content;
} else {
agreementContent.value = '# 用户协议\n\n用户在使用本服务前应当阅读并同意本协议。本协议内容包括协议正文及所有本平台已经发布的或将来可能发布的各类规则。所有规则为本协议不可分割的组成部分，与协议正文具有同等法律效力。';
}
})
.catch((e) => {
console.warn(e);
agreementContent.value = '# 用户协议\n\n用户在使用本服务前应当阅读并同意本协议。本协议内容包括协议正文及所有本平台已经发布的或将来可能发布的各类规则。所有规则为本协议不可分割的组成部分，与协议正文具有同等法律效力。';
});
// 获取隐私政策
httpGet('/api/config/get?key=privacy')
.then((res) => {
if (res.data && res.data.content) {
privacyContent.value = res.data.content;
} else {
privacyContent.value = '# 隐私政策\n\n我们非常重视用户的隐私和个人信息保护。您在使用我们的产品与服务时，我们可能会收集和使用您的相关信息。我们希望通过本《隐私政策》向您说明我们在收集和使用您相关信息时对应的处理规则。';
}
})
.catch((e) => {
console.warn(e);
privacyContent.value = '# 隐私政策\n\n我们非常重视用户的隐私和个人信息保护。您在使用我们的产品与服务时，我们可能会收集和使用您的相关信息。我们希望通过本《隐私政策》向您说明我们在收集和使用您相关信息时对应的处理规则。';
});
getLicenseInfo()
.then((res) => {
licenseConfig.value = res.data;
@@ -201,6 +254,16 @@ const submitRegister = () => {
return showMessageError("请输入验证码");
}
if (!data.value.agreement) {
agreementError.value = true;
isShaking.value = true;
setTimeout(() => {
isShaking.value = false;
}, 500);
showMessageError("请先阅读并同意用户协议和隐私政策");
return;
}
// 如果是用户名和密码登录，那么需要加载验证码
if (enableVerify.value && activeName.value === "username") {
captchaRef.value.loadCaptcha();
@@ -228,6 +291,36 @@ const doSubmitRegister = (verifyData) => {
showMessageError("注册失败，" + e.message);
});
};
const handleAgreementChange = () => {
agreementError.value = !data.value.agreement;
};
const openAgreement = () => {
// 使用弹窗显示用户协议内容，支持Markdown格式
ElMessageBox.alert(
`<div class="markdown-content">${md.render(agreementContent.value)}</div>`,
'用户协议',
{
confirmButtonText: '我已阅读',
dangerouslyUseHTMLString: true,
callback: () => {}
}
);
};
const openPrivacy = () => {
// 使用弹窗显示隐私政策内容，支持Markdown格式
ElMessageBox.alert(
`<div class="markdown-content">${md.render(privacyContent.value)}</div>`,
'隐私政策',
{
confirmButtonText: '我已阅读',
dangerouslyUseHTMLString: true,
callback: () => {}
}
);
};
</script>
<style lang="stylus" scoped>
@@ -243,4 +336,83 @@ const doSubmitRegister = (verifyData) => {
margin-top: 20px
}
.agreement-box
margin-bottom: 10px
transition: all 0.3s
.agreement-link
color: var(--el-color-primary)
cursor: pointer
.agreement-error
.el-checkbox
.el-checkbox__input
.el-checkbox__inner
border-color: #F56C6C !important
.shake
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both
@keyframes shake
10%, 90%
transform: translate3d(-1px, 0, 0)
20%, 80%
transform: translate3d(2px, 0, 0)
30%, 50%, 70%
transform: translate3d(-4px, 0, 0)
40%, 60%
transform: translate3d(4px, 0, 0)
</style>
<style>
/* 全局样式，用于Markdown内容显示 */
.markdown-content {
text-align: left;
max-height: 60vh;
overflow-y: auto;
padding: 10px;
}
.markdown-content h1 {
font-size: 1.5em;
margin-bottom: 15px;
}
.markdown-content h2 {
font-size: 1.3em;
margin: 15px 0 10px;
}
.markdown-content p {
margin-bottom: 10px;
line-height: 1.5;
}
.markdown-content ul, .markdown-content ol {
padding-left: 20px;
margin-bottom: 10px;
}
.markdown-content blockquote {
border-left: 4px solid #ccc;
padding-left: 10px;
color: #666;
margin: 10px 0;
}
.markdown-content code {
background-color: #f0f0f0;
padding: 2px 4px;
border-radius: 3px;
font-family: monospace;
}
.markdown-content pre {
background-color: #f0f0f0;
padding: 10px;
border-radius: 5px;
overflow-x: auto;
margin: 10px 0;
}
</style>