fix: use slide captcha for iphone

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绘画）全部使用算力来兑换。

api/handler/admin/power_log_handler.go

@@ -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})
 }

api/handler/captcha_handler.go

@@ -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)
+	}
+
+}

api/main.go

@@ -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/")

api/service/captcha_service.go

@@ -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
+}

deploy/conf/config.toml

@@ -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 即可

deploy/conf/xxl-job/application.properties

@@ -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

deploy/docker-compose.yaml

@@ -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:

web/src/components/SendMsg.vue

@@ -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">

web/src/components/SlideCaptcha.vue

@@ -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>

web/src/utils/libs.js

@@ -220,23 +220,7 @@ export function escapeHTML(html) {
         .replace(/>/g, ">");
 }
 
-// 处理数学公式
+// 判断是否为 iphone 设备
-export function processMathFormula(input) {
+export function isIphone() {
-    const arr = []
+    return /iPhone/i.test(navigator.userAgent) && !/iPad/i.test(navigator.userAgent);
-    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")
 }

web/src/views/admin/PowerLog.vue

@@ -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) {
+    const data = res.data.data
-      items.value = res.data.items
+    if (data) {
-      total.value = res.data.total
+      items.value = data.items
-      page.value = res.data.page
+      total.value = data.total
-      pageSize.value = res.data.page_size
+      page.value = data.page
+      pageSize.value = data.page_size
     }
+    totalPower.value = res.data.stat
     loading.value = false
   }).catch(e => {
     loading.value = false