mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-09-17 16:56:38 +08:00
fix: use slide captcha for iphone
This commit is contained in:
RockYang
parent
1f964c74e9
commit
f1855fd0a1
10
CHANGELOG.md
10
CHANGELOG.md
@ -1,12 +1,16 @@
|
||||
# 更新日志
|
||||
## 4.0.2
|
||||
* 功能新增：支持前端菜单可以配置
|
||||
* 功能优化：手机端支持免登录预览功能
|
||||
* 功能新增：手机端支持 Stable-Diffusion 绘画
|
||||
* 功能新增：管理后台登录页面增加行为验证码，防止爆破
|
||||
|
||||
## v4.0.1
|
||||
* 功能重构：重构 Stable-Diffusion 绘画实现，使用 SDAPI 替换之前的 websocket 接口，SDAPI 兼容各种 stable-diffusion 发行版，稳定性更强一些
|
||||
* 功能优化：使用 [midjouney-proxy](https://github.com/novicezk/midjourney-proxy) 项目替换内置的原生 MidJourney API，兼容 MJ-Plus 中转
|
||||
* 功能新增：用户算力消费日志增加统计功能，统计一段时间内用户消费的算力
|
||||
* 功能新增：支持前端菜单可以配置
|
||||
* 功能优化：手机端支持免登录预览功能
|
||||
* 功能新增：手机端支持 Stable-Diffusion 绘画
|
||||
* Bug修复：修复 iphone 手机无法通过图形验证码的Bug，使用滑动验证码替换
|
||||
* Bug修复：修复手机端 MidJourney 绘画页面滚动条无法滚动的Bug
|
||||
|
||||
## v4.0.0
|
||||
非兼容版本，重大重构，引入算力概念，将系统中所有的能力（AI对话，MJ绘画，SD绘画，DALL绘画）全部使用算力来兑换。
|
||||
|
||||
@ -67,5 +67,11 @@ func (h *PowerLogHandler) List(c *gin.Context) {
|
||||
list = append(list, log)
|
||||
}
|
||||
}
|
||||
resp.SUCCESS(c, vo.NewPage(total, data.Page, data.PageSize, list))
|
||||
|
||||
// 统计消费算力总和
|
||||
var totalPower float64
|
||||
if len(data.Date) == 2 {
|
||||
session.Where("mark", 0).Select("SUM(amount) as total_sum").Scan(&totalPower)
|
||||
}
|
||||
resp.SUCCESS(c, gin.H{"data": vo.NewPage(total, data.Page, data.PageSize, list), "stat": totalPower})
|
||||
}
|
||||
|
||||
@ -45,3 +45,33 @@ func (h *CaptchaHandler) Check(c *gin.Context) {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// SlideGet 获取滑动验证图片
|
||||
func (h *CaptchaHandler) SlideGet(c *gin.Context) {
|
||||
data, err := h.service.SlideGet()
|
||||
if err != nil {
|
||||
resp.ERROR(c, err.Error())
|
||||
return
|
||||
}
|
||||
|
||||
resp.SUCCESS(c, data)
|
||||
}
|
||||
|
||||
// SlideCheck 滑动验证结果校验
|
||||
func (h *CaptchaHandler) SlideCheck(c *gin.Context) {
|
||||
var data struct {
|
||||
Key string `json:"key"`
|
||||
X int `json:"x"`
|
||||
}
|
||||
if err := c.ShouldBindJSON(&data); err != nil {
|
||||
resp.ERROR(c, types.InvalidArgs)
|
||||
return
|
||||
}
|
||||
|
||||
if h.service.SlideCheck(data) {
|
||||
resp.SUCCESS(c)
|
||||
} else {
|
||||
resp.ERROR(c)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -238,6 +238,8 @@ func main() {
|
||||
group := s.Engine.Group("/api/captcha/")
|
||||
group.GET("get", h.Get)
|
||||
group.POST("check", h.Check)
|
||||
group.GET("slide/get", h.SlideGet)
|
||||
group.POST("slide/check", h.SlideCheck)
|
||||
}),
|
||||
fx.Invoke(func(s *core.AppServer, h *handler.RewardHandler) {
|
||||
group := s.Engine.Group("/api/reward/")
|
||||
|
||||
@ -60,3 +60,44 @@ func (s *CaptchaService) Check(data interface{}) bool {
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
func (s *CaptchaService) SlideGet() (interface{}, error) {
|
||||
if s.config.Token == "" {
|
||||
return nil, errors.New("无效的 API Token")
|
||||
}
|
||||
|
||||
url := fmt.Sprintf("%s/api/captcha/slide/get", s.config.ApiURL)
|
||||
var res types.BizVo
|
||||
r, err := s.client.R().
|
||||
SetHeader("AppId", s.config.AppId).
|
||||
SetHeader("Authorization", fmt.Sprintf("Bearer %s", s.config.Token)).
|
||||
SetSuccessResult(&res).Get(url)
|
||||
if err != nil || r.IsErrorState() {
|
||||
return nil, fmt.Errorf("请求 API 失败：%v", err)
|
||||
}
|
||||
|
||||
if res.Code != types.Success {
|
||||
return nil, fmt.Errorf("请求 API 失败：%s", res.Message)
|
||||
}
|
||||
|
||||
return res.Data, nil
|
||||
}
|
||||
|
||||
func (s *CaptchaService) SlideCheck(data interface{}) bool {
|
||||
url := fmt.Sprintf("%s/api/captcha/slide/check", s.config.ApiURL)
|
||||
var res types.BizVo
|
||||
r, err := s.client.R().
|
||||
SetHeader("AppId", s.config.AppId).
|
||||
SetHeader("Authorization", fmt.Sprintf("Bearer %s", s.config.Token)).
|
||||
SetBodyJsonMarshal(data).
|
||||
SetSuccessResult(&res).Post(url)
|
||||
if err != nil || r.IsErrorState() {
|
||||
return false
|
||||
}
|
||||
|
||||
if res.Code != types.Success {
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
@ -42,7 +42,7 @@ WeChatBot = false
|
||||
CodeTempId = ""
|
||||
|
||||
[OSS] # OSS 配置，用于存储 MJ 绘画图片
|
||||
Active = "local" # 默认使用本地文件存储引擎
|
||||
Active = "Local" # 默认使用本地文件存储引擎
|
||||
[OSS.Local]
|
||||
BasePath = "./static/upload" # 本地文件上传根路径
|
||||
BaseURL = "/static/upload" # 本地上传文件根 URL 如果是线上，则直接设置为 /static/upload 即可
|
||||
|
||||
@ -23,9 +23,9 @@ mybatis.mapper-locations=classpath:/mybatis-mapper/*Mapper.xml
|
||||
#mybatis.type-aliases-package=com.xxl.job.admin.core.model
|
||||
|
||||
### xxl-job, datasource
|
||||
spring.datasource.url=jdbc:mysql://172.22.11.200:3306/xxl_job?useUnicode=true&characterEncoding=UTF-8&autoReconnect=true&serverTimezone=Asia/Shanghai
|
||||
spring.datasource.url=jdbc:mysql://chatgpt-plus-mysql:3306/xxl_job?useUnicode=true&characterEncoding=UTF-8&autoReconnect=true&serverTimezone=Asia/Shanghai
|
||||
spring.datasource.username=root
|
||||
spring.datasource.password=mysql_pass
|
||||
spring.datasource.password=12345678
|
||||
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
|
||||
|
||||
### datasource-pool
|
||||
|
||||
@ -38,6 +38,8 @@ services:
|
||||
volumes:
|
||||
- ./logs/xxl-job:/data/applogs
|
||||
- ./conf/xxl-job/application.properties:/application.properties
|
||||
depends_on:
|
||||
- chatgpt-plus-mysql
|
||||
|
||||
# 后端 API 程序
|
||||
chatgpt-plus-api:
|
||||
|
||||
@ -10,7 +10,17 @@
|
||||
:show-close="false"
|
||||
style="width:90%;max-width: 360px;"
|
||||
>
|
||||
<slide-captcha
|
||||
v-if="isIphone()"
|
||||
:bg-img="bgImg"
|
||||
:bk-img="bkImg"
|
||||
:result="result"
|
||||
@refresh="getSlideCaptcha"
|
||||
@confirm="handleSlideConfirm"
|
||||
@hide="showCaptcha = false"/>
|
||||
|
||||
<captcha-plus
|
||||
v-else
|
||||
:max-dot="maxDot"
|
||||
:image-base64="imageBase64"
|
||||
:thumb-base64="thumbBase64"
|
||||
@ -19,7 +29,6 @@
|
||||
@refresh="handleRequestCaptCode"
|
||||
@confirm="handleConfirm"
|
||||
/>
|
||||
|
||||
</el-dialog>
|
||||
</el-container>
|
||||
</template>
|
||||
@ -32,6 +41,8 @@ import {validateEmail, validateMobile} from "@/utils/validate";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {httpGet, httpPost} from "@/utils/http";
|
||||
import CaptchaPlus from "@/components/CaptchaPlus.vue";
|
||||
import SlideCaptcha from "@/components/SlideCaptcha.vue";
|
||||
import {isIphone} from "@/utils/libs";
|
||||
|
||||
const props = defineProps({
|
||||
receiver: String,
|
||||
@ -87,7 +98,12 @@ const loadCaptcha = () => {
|
||||
}
|
||||
|
||||
showCaptcha.value = true
|
||||
handleRequestCaptCode() // 每次点开都刷新验证码
|
||||
// iphone 手机用滑动验证码
|
||||
if (isIphone()) {
|
||||
getSlideCaptcha()
|
||||
} else {
|
||||
handleRequestCaptCode()
|
||||
}
|
||||
}
|
||||
|
||||
const sendMsg = () => {
|
||||
@ -116,6 +132,34 @@ const sendMsg = () => {
|
||||
})
|
||||
}
|
||||
|
||||
// 滑动验证码
|
||||
const bgImg = ref('')
|
||||
const bkImg = ref('')
|
||||
const result = ref(0)
|
||||
|
||||
const getSlideCaptcha = () => {
|
||||
result.value = 0
|
||||
httpGet("/api/captcha/slide/get").then(res => {
|
||||
bkImg.value = res.data.bkImg
|
||||
bgImg.value = res.data.bgImg
|
||||
captKey.value = res.data.key
|
||||
}).catch(e => {
|
||||
ElMessage.error('获取人机验证数据失败：' + e.message)
|
||||
})
|
||||
}
|
||||
|
||||
const handleSlideConfirm = (x) => {
|
||||
httpPost("/api/captcha/slide/check", {
|
||||
key: captKey.value,
|
||||
x: x
|
||||
}).then(() => {
|
||||
result.value = 1
|
||||
showCaptcha.value = false
|
||||
sendMsg()
|
||||
}).catch(() => {
|
||||
result.value = 2
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
|
||||
297
web/src/components/SlideCaptcha.vue
Normal file
297
web/src/components/SlideCaptcha.vue
Normal file
@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<div class="slide-captcha">
|
||||
<div class="bg-img">
|
||||
<el-image :src="backgroundImg" />
|
||||
<div :class="verifyMsgClass" v-if="checked !== 0">
|
||||
<span v-if="checked ===1">{{time}}s</span>
|
||||
{{verifyMsg}}
|
||||
</div>
|
||||
<div class="refresh" @click="emits('refresh')">
|
||||
<el-icon><Refresh /></el-icon>
|
||||
</div>
|
||||
<span class="block">
|
||||
<el-image :src="blockImg" :style="{left: blockLeft+'px'}" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="verify">
|
||||
<div class="verify-bar-area">
|
||||
<span class="verify-msg">{{verifyText}}</span>
|
||||
|
||||
<div :class="leftBarClass" :style="{width: leftBarWidth+'px'}">
|
||||
<div :class="blockClass" id="dragBlock"
|
||||
:style="{left: blockLeft+'px'}">
|
||||
<el-icon v-if="checked === 0"><ArrowRightBold /></el-icon>
|
||||
<el-icon v-if="checked === 1"><CircleCheckFilled /></el-icon>
|
||||
<el-icon v-if="checked === 2"><CircleCloseFilled /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// eslint-disable-next-line no-undef
|
||||
import {onMounted, ref, watch} from "vue";
|
||||
import {ArrowRightBold, CircleCheckFilled, CircleCloseFilled, Refresh} from "@element-plus/icons-vue";
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
const props = defineProps({
|
||||
bgImg: String,
|
||||
bkImg: String,
|
||||
result: Number,
|
||||
})
|
||||
|
||||
const verifyText = ref('向右滑动完成验证')
|
||||
const verifyMsg = ref('')
|
||||
const verifyMsgClass = ref("verify-text success")
|
||||
const blockClass = ref('verify-move-block')
|
||||
const leftBarClass = ref('verify-left-bar')
|
||||
const backgroundImg = ref('')
|
||||
const blockImg = ref('')
|
||||
const leftBarWidth = ref(0)
|
||||
const blockLeft = ref(0)
|
||||
const checked = ref(0)
|
||||
const time = ref('')
|
||||
|
||||
watch(() => props.bgImg, (newVal) => {
|
||||
backgroundImg.value = newVal;
|
||||
});
|
||||
watch(() => props.bkImg, (newVal) => {
|
||||
blockImg.value = newVal;
|
||||
});
|
||||
watch(() => props.result, (newVal) => {
|
||||
checked.value = newVal;
|
||||
if (newVal === 1) {
|
||||
verifyMsgClass.value = "verify-text success"
|
||||
blockClass.value = 'verify-move-block success'
|
||||
leftBarClass.value = 'verify-left-bar success'
|
||||
verifyMsg.value = '验证成功'
|
||||
setTimeout(() => emits('hide'), 1000)
|
||||
} else if (newVal ===2) {
|
||||
verifyMsgClass.value = "verify-text error"
|
||||
blockClass.value = 'verify-move-block error'
|
||||
leftBarClass.value = 'verify-left-bar error'
|
||||
verifyMsg.value = '验证失败'
|
||||
setTimeout(() => {
|
||||
reset()
|
||||
emits('refresh')
|
||||
}, 1000)
|
||||
} else {
|
||||
reset()
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
const emits = defineEmits(['confirm','refresh','hide']);
|
||||
|
||||
let offsetX = 0, isDragging = false
|
||||
let start = 0
|
||||
onMounted(() => {
|
||||
const dragBlock = document.getElementById('dragBlock');
|
||||
dragBlock.addEventListener('mousedown', (evt) => {
|
||||
blockClass.value = 'verify-move-block active'
|
||||
leftBarClass.value = 'verify-left-bar active'
|
||||
leftBarWidth.value = 32
|
||||
isDragging = true
|
||||
verifyText.value = ""
|
||||
offsetX = evt.clientX
|
||||
start = new Date().getTime()
|
||||
evt.preventDefault();
|
||||
})
|
||||
|
||||
document.body.addEventListener('mousemove',(evt) => {
|
||||
if (!isDragging) {
|
||||
return
|
||||
}
|
||||
const x = Math.max(evt.clientX - offsetX, 0)
|
||||
blockLeft.value = x;
|
||||
leftBarWidth.value = x + 32
|
||||
})
|
||||
|
||||
document.body.addEventListener('mouseup', () => {
|
||||
if (!isDragging) {
|
||||
return
|
||||
}
|
||||
time.value = ((new Date().getTime() - start)/1000).toFixed(2)
|
||||
isDragging = false
|
||||
emits('confirm', Math.floor(blockLeft.value))
|
||||
})
|
||||
|
||||
// 触摸事件
|
||||
dragBlock.addEventListener('touchstart', function (e) {
|
||||
isDragging = true;
|
||||
blockClass.value = 'verify-move-block active'
|
||||
leftBarClass.value = 'verify-left-bar active'
|
||||
leftBarWidth.value = 32
|
||||
isDragging = true
|
||||
verifyText.value = ""
|
||||
offsetX = e.touches[0].clientX - dragBlock.getBoundingClientRect().left;
|
||||
start = new Date().getTime()
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
document.addEventListener('touchmove', function (e) {
|
||||
if (!isDragging) {
|
||||
return
|
||||
}
|
||||
e.preventDefault();
|
||||
const x = Math.max(e.touches[0].clientX - offsetX, 0)
|
||||
blockLeft.value = x;
|
||||
leftBarWidth.value = x + 32
|
||||
});
|
||||
|
||||
document.addEventListener('touchend', function () {
|
||||
if (!isDragging) {
|
||||
return
|
||||
}
|
||||
time.value = ((new Date().getTime() - start)/1000).toFixed(2)
|
||||
isDragging = false
|
||||
emits('confirm', Math.floor(blockLeft.value))
|
||||
});
|
||||
})
|
||||
|
||||
|
||||
// 重置验证码
|
||||
const reset = () => {
|
||||
blockClass.value = 'verify-move-block'
|
||||
leftBarClass.value = 'verify-left-bar'
|
||||
leftBarWidth.value = 0
|
||||
blockLeft.value = 0
|
||||
checked.value = 0
|
||||
verifyText.value = "向右滑动完成验证"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="stylus">
|
||||
@keyframes expandUp {
|
||||
0% {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
100% {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-captcha {
|
||||
* {
|
||||
margin 0
|
||||
padding 0
|
||||
}
|
||||
|
||||
.bg-img {
|
||||
position relative
|
||||
width 310px
|
||||
.verify-text {
|
||||
position absolute
|
||||
bottom 3px
|
||||
padding 5px 10px
|
||||
width 290px
|
||||
color #ffffff
|
||||
|
||||
animation: expandUp 0.3s ease-in-out forwards;
|
||||
transform-origin: bottom center;
|
||||
transform: scaleY(0); /* 初始状态，元素高度为0 */
|
||||
}
|
||||
|
||||
.verify-text.success {
|
||||
background-color rgba(92,184,92, 0.5)
|
||||
}
|
||||
|
||||
.verify-text.error {
|
||||
background-color rgba(184,92,92, 0.5)
|
||||
}
|
||||
|
||||
.refresh {
|
||||
position absolute
|
||||
right 5px
|
||||
top 5px
|
||||
font-size 20px
|
||||
cursor pointer
|
||||
color #ffffff
|
||||
}
|
||||
|
||||
.block {
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.verify {
|
||||
.verify-bar-area {
|
||||
position relative
|
||||
border: 1px solid #dddddd
|
||||
overflow hidden
|
||||
height 34px
|
||||
|
||||
.verify-msg {
|
||||
display flex
|
||||
line-height 32px
|
||||
width 100%
|
||||
justify-content center
|
||||
}
|
||||
|
||||
.verify-left-bar {
|
||||
position absolute
|
||||
left 0
|
||||
top 0
|
||||
height 32px;
|
||||
|
||||
.verify-move-block {
|
||||
position absolute
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
border-top 1px solid #ffffff
|
||||
border-bottom 1px solid #ffffff
|
||||
border-right 1px solid #dddddd
|
||||
|
||||
display flex
|
||||
justify-content center
|
||||
align-items center
|
||||
.el-icon {
|
||||
font-size 20px
|
||||
cursor pointer
|
||||
}
|
||||
}
|
||||
|
||||
.verify-move-block.active {
|
||||
background #409eff
|
||||
color #ffffff
|
||||
border 1px solid #409eff
|
||||
}
|
||||
|
||||
.verify-move-block.success {
|
||||
background #57AD57
|
||||
color #ffffff
|
||||
border 1px solid #57AD57
|
||||
}
|
||||
.verify-move-block.error {
|
||||
background #D9534F
|
||||
color #ffffff
|
||||
border 1px solid #D9534F
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.verify-left-bar.active {
|
||||
background-color #F0FFF0
|
||||
border 1px solid #409eff
|
||||
}
|
||||
.verify-left-bar.success {
|
||||
background-color #F0FFF0
|
||||
border 1px solid #57AD57
|
||||
}
|
||||
.verify-left-bar.error {
|
||||
background-color #F0FFF0
|
||||
border 1px solid #D9534F
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -220,23 +220,7 @@ export function escapeHTML(html) {
|
||||
.replace(/>/g, ">");
|
||||
}
|
||||
|
||||
// 处理数学公式
|
||||
export function processMathFormula(input) {
|
||||
const arr = []
|
||||
const lines = input.split("\n")
|
||||
if (lines.length <= 1) {
|
||||
return input
|
||||
}
|
||||
// 定义匹配数学公式的正则表达式
|
||||
const mathFormulaRegex = /[+\-*/^()\d.]/;
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
if (i > 0 && mathFormulaRegex.test(lines) && lines[i - 1].indexOf("$$") === -1) {
|
||||
arr.push("$$")
|
||||
arr.push(lines[i])
|
||||
arr.push("$$")
|
||||
} else {
|
||||
arr.push(lines[i])
|
||||
}
|
||||
}
|
||||
return arr.join("\n")
|
||||
// 判断是否为 iphone 设备
|
||||
export function isIphone() {
|
||||
return /iPhone/i.test(navigator.userAgent) && !/iPad/i.test(navigator.userAgent);
|
||||
}
|
||||
|
||||
@ -19,7 +19,9 @@
|
||||
value-format="YYYY-MM-DD"
|
||||
style="margin: 0 10px;width: 200px; position: relative;top:3px;"
|
||||
/>
|
||||
<el-button type="primary" :icon="Search" @click="fetchData">搜索</el-button>
|
||||
<el-button type="primary" :icon="Search" @click="search">搜索</el-button>
|
||||
|
||||
<el-button v-if="totalPower > 0">算力总额：{{ totalPower }}</el-button>
|
||||
</div>
|
||||
|
||||
<el-row v-if="items.length > 0">
|
||||
@ -82,6 +84,8 @@ const query = ref({
|
||||
date: [],
|
||||
type: 0
|
||||
})
|
||||
const totalPower = ref(0)
|
||||
|
||||
const tagColors = ref(["", "success", "primary", "danger", "info", "warning"])
|
||||
|
||||
onMounted(() => {
|
||||
@ -96,6 +100,12 @@ onMounted(() => {
|
||||
})
|
||||
})
|
||||
|
||||
// 搜索
|
||||
const search = () => {
|
||||
page.value = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const fetchData = () => {
|
||||
loading.value = true
|
||||
@ -106,12 +116,14 @@ const fetchData = () => {
|
||||
page: page.value,
|
||||
page_size: pageSize.value
|
||||
}).then((res) => {
|
||||
if (res.data) {
|
||||
items.value = res.data.items
|
||||
total.value = res.data.total
|
||||
page.value = res.data.page
|
||||
pageSize.value = res.data.page_size
|
||||
const data = res.data.data
|
||||
if (data) {
|
||||
items.value = data.items
|
||||
total.value = data.total
|
||||
page.value = data.page
|
||||
pageSize.value = data.page_size
|
||||
}
|
||||
totalPower.value = res.data.stat
|
||||
loading.value = false
|
||||
}).catch(e => {
|
||||
loading.value = false
|
||||
|
||||
Loading…
Reference in New Issue
Block a user