fix: 采用弹窗的方式显示验证码，解决验证码在低分辨率下被掩盖的Bug

api/handler/user_handler.go

@@ -70,7 +70,6 @@ func (h *UserHandler) Register(c *gin.Context) {
 		var code int
 		err := h.leveldb.Get(key, &code)
 		if err != nil || code != data.Code {
-			logger.Info(code)
 			resp.ERROR(c, "短信验证码错误")
 			return
 		}

database/update-v3.1.0.sql

@@ -21,11 +21,11 @@ ALTER TABLE `chatgpt_chat_models`
     MODIFY `id` int NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;
 
 INSERT INTO `chatgpt_chat_models` (`id`, `platform`, `name`, `value`, `sort_num`, `enabled`, `created_at`, `updated_at`) VALUES
- (1, 'OpenAI', 'Bot GPT-3.5', 'gpt-3.5-turbo', 0, 1, '2023-08-23 12:06:36', '2023-09-02 16:49:36'),
- (2, 'Azure', 'Bot Azure-3.5', 'gpt-3.5-turbo', 0, 1, '2023-08-23 12:15:30', '2023-09-02 16:49:46'),
- (3, 'ChatGML', 'ChatGML-Pro', 'chatglm_pro', 3, 1, '2023-08-23 13:35:45', '2023-08-29 11:41:29'),
- (5, 'ChatGML', 'ChatGLM-Std', 'chatglm_std', 2, 1, '2023-08-24 15:05:38', '2023-08-29 11:41:28'),
- (6, 'ChatGML', 'ChatGLM-Lite', 'chatglm_lite', 4, 1, '2023-08-24 15:06:15', '2023-08-29 11:41:29');
+ (1, 'OpenAI', 'GPT-3.5', 'gpt-3.5-turbo', 0, 1, '2023-08-23 12:06:36', '2023-09-02 16:49:36'),
+ (2, 'Azure', 'Azure-3.5', 'gpt-3.5-turbo', 0, 1, '2023-08-23 12:15:30', '2023-09-02 16:49:46'),
+ (3, 'ChatGLM', 'ChatGML-Pro', 'chatglm_pro', 3, 1, '2023-08-23 13:35:45', '2023-08-29 11:41:29'),
+ (5, 'ChatGLM', 'ChatGLM-Std', 'chatglm_std', 2, 1, '2023-08-24 15:05:38', '2023-08-29 11:41:28'),
+ (6, 'ChatGLM', 'ChatGLM-Lite', 'chatglm_lite', 4, 1, '2023-08-24 15:06:15', '2023-08-29 11:41:29');
 
 ALTER TABLE `chatgpt_users`
 DROP `username`,

docker/build.sh

@@ -12,15 +12,15 @@ npm run build
 cd ../docker
 
 # remove docker image if exists
-docker rmi -f registry.cn-hangzhou.aliyuncs.com/geekmaster/chatgpt-plus-go:$version
+docker rmi -f registry.cn-shenzhen.aliyuncs.com/geekmaster/chatgpt-plus-api:$version
 # build docker image for chatgpt-plus-go
-docker build -t registry.cn-hangzhou.aliyuncs.com/geekmaster/chatgpt-plus-go:$version -f dockerfile-api-go ../
+docker build -t registry.cn-shenzhen.aliyuncs.com/geekmaster/chatgpt-plus-api:$version -f dockerfile-api-go ../
 
 # build docker image for chatgpt-plus-vue
-docker rmi -f registry.cn-hangzhou.aliyuncs.com/geekmaster/chatgpt-plus-vue:$version
-docker build --platform linux/amd64 -t registry.cn-hangzhou.aliyuncs.com/geekmaster/chatgpt-plus-vue:$version -f dockerfile-vue ../
+docker rmi -f registry.cn-shenzhen.aliyuncs.com/geekmaster/chatgpt-plus-web:$version
+docker build --platform linux/amd64 -t registry.cn-shenzhen.aliyuncs.com/geekmaster/chatgpt-plus-web:$version -f dockerfile-vue ../
 
 if [ "$2" = "push" ];then
-  docker push registry.cn-hangzhou.aliyuncs.com/geekmaster/chatgpt-plus-vue:$version
-  docker push registry.cn-hangzhou.aliyuncs.com/geekmaster/chatgpt-plus-go:$version
+  docker push registry.cn-shenzhen.aliyuncs.com/geekmaster/chatgpt-plus-api:$version
+  docker push registry.cn-shenzhen.aliyuncs.com/geekmaster/chatgpt-plus-web:$version
 fi

docker/docker-compose.yaml

@@ -2,7 +2,7 @@ version: '3'
 services:
   # 后端 API 程序
   chatgpt-plus-api:
-    image: registry.cn-hangzhou.aliyuncs.com/geekmaster/chatgpt-plus-api:v3.0.7.4
+    image: registry.cn-shenzhen.aliyuncs.com/geekmaster/chatgpt-plus-api:v3.1.0
     container_name: chatgpt-plus-api
     restart: always
     environment:
@@ -18,9 +18,9 @@ services:
       - ./static:/var/www/app/static
 
   # 前端应用
-  chatgpt-plus-vue:
-    image: registry.cn-hangzhou.aliyuncs.com/geekmaster/chatgpt-plus-vue:v3.0.7.4
-    container_name: chatgpt-plus-vue
+  chatgpt-plus-web:
+    image: registry.cn-shenzhen.aliyuncs.com/geekmaster/chatgpt-plus-web:v3.1.0
+    container_name: chatgpt-plus-web
     restart: always
     ports:
       - "8080:8080"

web/.env.development

@@ -4,5 +4,5 @@ VUE_APP_USER=18575670125
 VUE_APP_PASS=12345678
 VUE_APP_ADMIN_USER=admin
 VUE_APP_ADMIN_PASS=admin123
-VUE_APP_KEY_PREFIX=ChatPLUS_
+VUE_APP_KEY_PREFIX=ChatPLUS_DEV_
 VUE_APP_TITLE="ChatGPT-PLUS V3"

web/src/components/CaptchaPlus.vue

@@ -6,8 +6,11 @@
       <img class="wg-cap-wrap__thumb" v-if="thumbBase64Code" :src="thumbBase64Code" alt=" ">
     </div>
     <div class="wg-cap-wrap__body">
-        <img class="wg-cap-wrap__picture" v-if="imageBase64Code" :src="imageBase64Code" alt=" " @click="handleClickPos($event)">
-        <img class="wg-cap-wrap__loading" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiByZ2JhKDI0MSwgMjQyLCAyNDMsIDApOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjM2LjgxMDEiIHI9IjEzIiBmaWxsPSIjM2U3Y2ZmIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5IiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgY2FsY01vZGU9InNwbGluZSIga2V5U3BsaW5lcz0iMC40NSAwIDAuOSAwLjU1OzAgMC40NSAwLjU1IDAuOSIga2V5VGltZXM9IjA7MC41OzEiIHZhbHVlcz0iMjM7Nzc7MjMiPjwvYW5pbWF0ZT4KICA8L2NpcmNsZT4KPC9zdmc+" alt="正在加载中...">
+      <img class="wg-cap-wrap__picture" v-if="imageBase64Code" :src="imageBase64Code" alt=" "
+           @click="handleClickPos($event)">
+      <img class="wg-cap-wrap__loading"
+           src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiByZ2JhKDI0MSwgMjQyLCAyNDMsIDApOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjM2LjgxMDEiIHI9IjEzIiBmaWxsPSIjM2U3Y2ZmIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5IiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgY2FsY01vZGU9InNwbGluZSIga2V5U3BsaW5lcz0iMC40NSAwIDAuOSAwLjU1OzAgMC40NSAwLjU1IDAuOSIga2V5VGltZXM9IjA7MC41OzEiIHZhbHVlcz0iMjM7Nzc7MjMiPjwvYW5pbWF0ZT4KICA8L2NpcmNsZT4KPC9zdmc+"
+           alt="正在加载中...">
       <div v-for="(dot, key) in dots" :key="key" class="wg-cap-wrap__dot" :style="`top: ${dot.y}px; left:${dot.x}px;`">
         <span>{{ dot.index }}</span>
       </div>
@@ -22,7 +25,7 @@
              alt="刷新">
       </div>
       <div class="wg-cap-wrap__btn">
-          <button @click="handleConfirmEvent">确认</button>
+        <el-button type="primary" @click="handleConfirmEvent">确认</el-button>
       </div>
     </div>
   </div>
@@ -179,8 +182,7 @@
         let D = document.documentElement;
         x = box.left + Math.max(D.scrollLeft, document.body.scrollLeft) - D.clientLeft;
         y = box.top + Math.max(D.scrollTop, document.body.scrollTop) - D.clientTop
-        }
-        else{
+      } else {
         while (dom !== document.body) {
           x += dom.offsetLeft
           y += dom.offsetTop
@@ -196,7 +198,7 @@
 }
 </script>
 
-<style>
+<style scoped lang="stylus">
 .wg-cap-wrap {
   background: #ffffff;
 
@@ -209,7 +211,7 @@
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  }
+
   .wg-cap-wrap__header {
     height: 50px;
     width: 100%;
@@ -223,17 +225,19 @@
     -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
-  }
-  .wg-cap-wrap__header span{
+
+    span {
       padding-right: 5px;
-  }
-  .wg-cap-wrap__header span em{
+
+      em {
         padding: 0 3px;
         font-weight: bold;
         color: #3e7cff;
         font-style: normal;
       }
-  .wg-cap-wrap__header .wg-cap-wrap__image{
+    }
+
+    .wg-cap-wrap__image {
       -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
       border-radius: 5px;
@@ -241,16 +245,20 @@
       text-align: center;
       line-height: 1;
     }
-  .wg-cap-wrap__header .wg-cap-wrap__thumb{
+
+    .wg-cap-wrap__thumb {
       min-width: 150px;
       text-align: center;
       line-height: 1;
       max-height: 100%;
     }
-  .wg-cap-wrap__header .wg-cap-wrap__thumb.wg-cap-wrap__hidden{
+
+    .wg-cap-wrap__thumb.wg-cap-wrap__hidden {
       display: none;
     }
 
+  }
+
   .wg-cap-wrap__body {
     position: relative;
     display: -webkit-box;
@@ -264,22 +272,18 @@
     -moz-border-radius: 5px;
     border-radius: 5px;
     overflow: hidden;
-  }
-  .wg-cap-wrap__body .wg-cap-wrap__picture{
+
+    .wg-cap-wrap__picture {
       position: relative;
       z-index: 10;
       width: 100%;
-
-    /*height: 100%;*/
-    /*max-width: 100%;*/
-    /*max-height: 100%;*/
-    /*object-fit: cover;*/
-    /*text-align: center;*/
     }
-  .wg-cap-wrap__body .wg-cap-wrap__picture.wg-cap-wrap__hidden{
+
+    .wg-cap-wrap__picture.wg-cap-wrap__hidden {
       display: none;
     }
-  .wg-cap-wrap__body .wg-cap-wrap__loading{
+
+    .wg-cap-wrap__loading {
       position: absolute;
       z-index: 9;
       top: 50%;
@@ -291,7 +295,8 @@
       line-height: 68px;
       text-align: center;
     }
-  .wg-cap-wrap__body .wg-cap-wrap__dot{
+
+    .wg-cap-wrap__dot {
       position: absolute;
       z-index: 10;
       width: 22px;
@@ -306,6 +311,7 @@
       border-radius: 22px;
       cursor: default;
     }
+  }
 
   .wg-cap-wrap__footer {
     width: 100%;
@@ -320,50 +326,24 @@
     -ms-flex-align: center;
     align-items: center;
     padding-top: 15px;
-  }
-  .wg-cap-wrap__footer .wg-cap-wrap__ico{
+
+    .wg-cap-wrap__ico {
       flex: 1;
-  }
-  .wg-cap-wrap__footer .wg-cap-wrap__ico img{
+
+      img {
         width: 24px;
         height: 24px;
         color: #34383e;
         margin: 0 5px;
         cursor: pointer;
       }
-  .wg-cap-wrap__footer .wg-cap-wrap__btn{
+    }
+
+    .wg-cap-wrap__btn {
+      display flex
       width: 120px;
-    height: 40px;
+      justify-content right
     }
-  .wg-cap-wrap__footer .wg-cap-wrap__btn button{
-    width: 100%;
-    height: 40px;
-    letter-spacing: 2px;
-    text-align: center;
-    padding: 9px 15px;
-    font-size: 15px;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
-    display: inline-block;
-    line-height: 1;
-    white-space: nowrap;
-    cursor: pointer;
-    color: #fff;
-    background-color: #409eff;
-    border: 1px solid #409eff;
-    -webkit-appearance: none;
-    box-sizing: border-box;
-    outline: none;
-    margin: 0;
-    transition: .1s;
-    font-weight: 500;
-    -moz-user-select: none;
-    -webkit-user-select: none;
   }
-  .wg-cap-wrap__footer .wg-cap-wrap__btn button:hover {
-    background: #66b1ff;
-    border-color: #66b1ff;
-    color: #fff;
 }
 </style>

web/src/components/SendMsg.vue

@@ -1,29 +1,26 @@
 <template>
-  <el-container>
-    <el-popover
-        :visible="showCaptcha"
-        :hide-after="0"
-        placement="top"
-        :width="325"
-        trigger="click"
-        content="this is content, this is content, this is content"
+  <el-container class="captcha-box">
+    <el-button type="primary" class="send-btn" :size="props.size" :disabled="!canSend" @click="loadCaptcha" plain>
+      {{ btnText }}
+    </el-button>
+
+    <el-dialog
+        v-model="showCaptcha"
+        :close-on-click-modal="true"
+        :show-close="false"
+        style="width:90%;max-width: 360px;"
     >
       <captcha-plus
-          v-if="showCaptcha"
           :max-dot="maxDot"
           :image-base64="imageBase64"
           :thumb-base64="thumbBase64"
+          width="300"
           @close="showCaptcha = false"
           @refresh="handleRequestCaptCode"
           @confirm="handleConfirm"
       />
 
-      <template #reference>
-        <el-button type="primary" :size="props.size" :disabled="!canSend" @click="loadCaptcha" plain>
-          {{ btnText }}
-        </el-button>
-      </template>
-    </el-popover>
+    </el-dialog>
   </el-container>
 </template>
 
@@ -75,6 +72,7 @@ const handleConfirm = (dots) => {
     dots: dots.value,
     key: captKey.value
   }).then(() => {
+    // ElMessage.success('人机验证成功')
     showCaptcha.value = false
     sendMsg()
   }).catch(() => {
@@ -120,6 +118,21 @@ const sendMsg = () => {
 
 </script>
 
-<style scoped>
+<style lang="stylus">
 
+.captcha-box {
+  .send-btn {
+    width: 100%;
+  }
+
+  .el-dialog {
+    .el-dialog__header {
+      padding: 0;
+    }
+
+    .el-dialog__body {
+      //padding 0
+    }
+  }
+}
 </style>

web/src/components/mobile/BindMobile.vue

@@ -18,7 +18,7 @@
           placeholder="请输入短信验证码"
       >
         <template #button>
-          <send-msg-mobile size="small" :mobile="form.mobile"/>
+          <send-msg size="small" :mobile="form.mobile"/>
         </template>
       </van-field>
     </van-cell-group>
@@ -30,7 +30,7 @@ import {computed, ref} from "vue";
 import {httpPost} from "@/utils/http";
 import {validateMobile} from "@/utils/validate";
 import {showNotify} from "vant";
-import SendMsgMobile from "@/components/mobile/SendMsgMobile.vue";
+import SendMsg from "@/components/SendMsg.vue";
 
 const props = defineProps({
   show: Boolean,

web/src/components/mobile/SendMsgMobile.vue

@@ -1,137 +0,0 @@
-<template>
-  <el-container class="captcha-box">
-    <el-button type="primary" class="send-btn" :size="props.size" :disabled="!canSend" @click="loadCaptcha" plain>
-      {{ btnText }}
-    </el-button>
-
-    <el-dialog
-        v-model="showCaptcha"
-        :close-on-click-modal="true"
-        :show-close="false"
-        style="width:90%;max-width: 800px;"
-    >
-      <captcha-plus
-          :max-dot="maxDot"
-          :image-base64="imageBase64"
-          :thumb-base64="thumbBase64"
-          width="100%"
-          @close="showCaptcha = false"
-          @refresh="handleRequestCaptCode"
-          @confirm="handleConfirm"
-      />
-
-    </el-dialog>
-  </el-container>
-</template>
-
-<script setup>
-// 发送短信验证码组件
-import {ref} from "vue";
-import lodash from 'lodash'
-import {validateMobile} from "@/utils/validate";
-import {ElMessage} from "element-plus";
-import {httpGet, httpPost} from "@/utils/http";
-import CaptchaPlus from "@/components/CaptchaPlus.vue";
-
-const props = defineProps({
-  mobile: String,
-  size: String,
-});
-const btnText = ref('发送验证码')
-const canSend = ref(true)
-const showCaptcha = ref(false)
-const maxDot = ref(5)
-const imageBase64 = ref('')
-const thumbBase64 = ref('')
-const captKey = ref('')
-const dots = ref(null)
-
-const handleRequestCaptCode = () => {
-
-  httpGet('/api/captcha/get').then(res => {
-    const data = res.data
-    imageBase64.value = data.image
-    thumbBase64.value = data.thumb
-    captKey.value = data.key
-  }).catch(e => {
-    ElMessage.error('获取人机验证数据失败：' + e.message)
-  })
-}
-
-const handleConfirm = (dots) => {
-  if (lodash.size(dots) <= 0) {
-    return ElMessage.error('请进行人机验证再操作')
-  }
-
-  let dotArr = []
-  lodash.forEach(dots, (dot) => {
-    dotArr.push(dot.x, dot.y)
-  })
-  dots.value = dotArr.join(',')
-  httpPost('/api/captcha/check', {
-    dots: dots.value,
-    key: captKey.value
-  }).then(() => {
-    showCaptcha.value = false
-    sendMsg()
-  }).catch(() => {
-    ElMessage.error('人机验证失败')
-    handleRequestCaptCode()
-  })
-}
-
-const loadCaptcha = () => {
-  if (!validateMobile(props.mobile)) {
-    return ElMessage.error("请输入合法的手机号")
-  }
-
-  showCaptcha.value = true
-  handleRequestCaptCode() // 每次点开都刷新验证码
-}
-
-const sendMsg = () => {
-  if (!canSend.value) {
-    return
-  }
-
-  canSend.value = false
-  httpPost('/api/sms/code', {mobile: props.mobile, key: captKey.value, dots: dots.value}).then(() => {
-    ElMessage.success('短信发送成功')
-    let time = 120
-    btnText.value = time
-    const handler = setInterval(() => {
-      time = time - 1
-      if (time <= 0) {
-        clearInterval(handler)
-        btnText.value = '重新发送'
-        canSend.value = true
-      } else {
-        btnText.value = time
-      }
-    }, 1000)
-  }).catch(e => {
-    canSend.value = true
-    ElMessage.error('短信发送失败：' + e.message)
-  })
-}
-
-</script>
-
-<style lang="stylus">
-
-.captcha-box {
-  .send-btn {
-    width: 100%;
-  }
-
-  .el-dialog {
-    .el-dialog__header {
-      padding: 0;
-    }
-
-    .el-dialog__body {
-      //padding 0
-    }
-  }
-}
-</style>

web/src/views/Login.vue

@@ -9,7 +9,7 @@
         <div class="header">{{ title }}</div>
         <div class="content">
           <div class="block">
-            <el-input placeholder="手机号" size="large" v-model="username" autocomplete="off">
+            <el-input placeholder="手机号" size="large" maxlength="11" v-model="username" autocomplete="off">
               <template #prefix>
                 <el-icon>
                   <UserFilled/>
@@ -57,6 +57,7 @@ import FooterBar from "@/components/FooterBar.vue";
 import {isMobile} from "@/utils/libs";
 import {checkSession} from "@/action/session";
 import {setUserToken} from "@/store/session";
+import {validateMobile} from "@/utils/validate";
 
 const router = useRouter();
 const title = ref('ChatGPT-PLUS 用户登录');
@@ -81,8 +82,8 @@ onMounted(() => {
 })
 
 const login = function () {
-  if (username.value === '') {
-    return ElMessage.error('请输入用户名');
+  if (!validateMobile(username.value)) {
+    return ElMessage.error('请输入合法的手机号');
   }
   if (password.value.trim() === '') {
     return ElMessage.error('请输入密码');

web/src/views/Register.vue

@@ -64,8 +64,7 @@
                     </el-input>
                   </el-col>
                   <el-col :span="12">
-                    <send-msg-mobile size="large" :mobile="formData.mobile" v-if="isMobile()"/>
-                    <send-msg size="large" :mobile="formData.mobile" v-else/>
+                    <send-msg size="large" :mobile="formData.mobile"/>
                   </el-col>
                 </el-row>
               </div>
@@ -109,7 +108,7 @@ import FooterBar from "@/components/FooterBar.vue";
 import SendMsg from "@/components/SendMsg.vue";
 import {validateMobile} from "@/utils/validate";
 import {isMobile} from "@/utils/libs";
-import SendMsgMobile from "@/components/mobile/SendMsgMobile.vue";
+import SendMsgMobile from "@/components/SendMsg.vue";
 
 const router = useRouter();
 const title = ref('ChatGPT-PLUS 用户注册');