merge v4.1.3

web/src/components/BindEmail.vue

@@ -2,26 +2,24 @@
   <el-dialog
       v-model="showDialog"
       :close-on-click-modal="true"
-      style="max-width: 600px"
-      :before-close="close"
+      style="max-width: 400px"
+      @close="close"
       :title="title"
   >
-    <div class="form" id="bind-mobile-form">
-      <el-alert v-if="username !== ''" type="info" show-icon :closable="false" style="margin-bottom: 20px;">
-        <p>当前绑定账号：{{ username }}，只允许使绑定有效的手机号或者邮箱地址作为登录账号。</p>
-      </el-alert>
+    <div class="form">
+      <div class="text-center" v-if="email !== ''">当前已绑定邮箱：{{ email }}</div>
 
-      <el-form :model="form" label-width="120px">
-        <el-form-item label="新账号">
-          <el-input v-model="form.username"/>
+      <el-form label-position="top">
+        <el-form-item label="邮箱地址">
+          <el-input v-model="form.email"/>
         </el-form-item>
         <el-form-item label="验证码">
-          <el-row :gutter="20">
+          <el-row :gutter="0">
             <el-col :span="16">
               <el-input v-model="form.code" maxlength="6"/>
             </el-col>
-            <el-col :span="8">
-              <send-msg size="" :receiver="form.username"/>
+            <el-col :span="8" style="padding-left: 10px">
+              <send-msg :receiver="form.email" type="email"/>
             </el-col>
           </el-row>
         </el-form-item>
@@ -39,55 +37,67 @@
 </template>
 
 <script setup>
-import {computed, ref} from "vue";
+import {computed, ref, watch} from "vue";
 import SendMsg from "@/components/SendMsg.vue";
 import {ElMessage} from "element-plus";
 import {httpPost} from "@/utils/http";
-import {validateEmail, validateMobile} from "@/utils/validate";
+import {checkSession} from "@/store/cache";
 
 const props = defineProps({
   show: Boolean,
-  username: String
 });
 
 const showDialog = computed(() => {
   return props.show
 })
 
-const title = ref('重置登录账号')
+const title = ref('绑定邮箱')
+const email = ref('')
 const form = ref({
-  username: '',
+  email: '',
   code: ''
 })
 
+watch(showDialog, (val) => {
+  if (val) {
+    form.value.code = ''
+    form.value.email = ''
+    checkSession().then(user => {
+      email.value = user.email
+    })
+  }
+})
+
 const emits = defineEmits(['hide']);
 
 const save = () => {
-  if (!validateMobile(form.value.username) && !validateEmail(form.value.username)) {
-    return ElMessage.error("请输入合法的手机号/邮箱地址")
-  }
   if (form.value.code === '') {
     return ElMessage.error("请输入验证码");
   }
 
-  httpPost('/api/user/bind/username', form.value).then(() => {
-    ElMessage.success({
-      message: '绑定成功',
-      duration: 1000,
-      onClose: () => emits('hide', false)
-    })
+  httpPost('/api/user/bind/email', form.value).then(() => {
+    ElMessage.success("绑定成功")
+    emits('hide')
   }).catch(e => {
     ElMessage.error("绑定失败：" + e.message);
   })
 }
 
 const close = function () {
-  emits('hide', false);
+  emits('hide');
 }
 </script>
 
 <style lang="stylus" scoped>
-#bind-mobile-form {
+.form {
+  .text-center {
+    text-align center
+    padding-bottom 15px
+    font-size 14px
+    color #a1a1a1
+    font-weight 700
+  }
+
   .el-form-item__content {
     .el-row {
       width 100%

web/src/components/BindMobile.vue

@@ -0,0 +1,110 @@
+<template>
+  <el-dialog
+      v-model="showDialog"
+      :close-on-click-modal="true"
+      style="max-width: 400px"
+      @close="close"
+      :title="title"
+  >
+    <div class="form">
+      <div class="text-center" v-if="mobile !== ''">当前已绑手机号：{{ mobile }}</div>
+
+      <el-form label-position="top">
+        <el-form-item label="手机号">
+          <el-input v-model="form.mobile"/>
+        </el-form-item>
+        <el-form-item label="验证码">
+          <el-row :gutter="0">
+            <el-col :span="16">
+              <el-input v-model="form.code" maxlength="6"/>
+            </el-col>
+            <el-col :span="8" style="padding-left: 10px">
+              <send-msg :receiver="form.mobile" type="mobile"/>
+            </el-col>
+          </el-row>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="save">
+          提交绑定
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {computed, ref, watch} from "vue";
+import SendMsg from "@/components/SendMsg.vue";
+import {ElMessage} from "element-plus";
+import {httpPost} from "@/utils/http";
+import {checkSession} from "@/store/cache";
+
+const props = defineProps({
+  show: Boolean,
+});
+
+const showDialog = computed(() => {
+  return props.show
+})
+
+const title = ref('绑定手机')
+const mobile = ref('')
+const form = ref({
+  mobile: '',
+  code: ''
+})
+
+watch(showDialog, (val) => {
+  if (val) {
+    form.value = {
+      mobile: '',
+      code: ''
+    }
+
+    checkSession().then(user => {
+      mobile.value = user.mobile
+    })
+  }
+})
+
+const emits = defineEmits(['hide']);
+
+const save = () => {
+  if (form.value.code === '') {
+    return ElMessage.error("请输入验证码");
+  }
+
+  httpPost('/api/user/bind/mobile', form.value).then(() => {
+    ElMessage.success("绑定成功")
+    emits('hide')
+  }).catch(e => {
+    ElMessage.error("绑定失败：" + e.message);
+  })
+}
+
+const close = function () {
+  emits('hide');
+}
+</script>
+
+<style lang="stylus" scoped>
+.form {
+  .text-center {
+    text-align center
+    padding-bottom 15px
+    font-size 14px
+    color #a1a1a1
+    font-weight 700
+  }
+
+  .el-form-item__content {
+    .el-row {
+      width 100%
+    }
+  }
+}
+</style>

web/src/components/Captcha.vue

@@ -0,0 +1,144 @@
+<template>
+  <el-container class="captcha-box">
+    <el-dialog
+        v-model="show"
+        :close-on-click-modal="true"
+        :show-close="false"
+        style="width: 360px;"
+    >
+      <slide-captcha
+          v-if="isMobile()"
+          :bg-img="bgImg"
+          :bk-img="bkImg"
+          :result="result"
+          @refresh="getSlideCaptcha"
+          @confirm="handleSlideConfirm"
+          @hide="show = false"/>
+
+      <captcha-plus
+          v-else
+          :max-dot="maxDot"
+          :image-base64="imageBase64"
+          :thumb-base64="thumbBase64"
+          width="300"
+          @close="show = false"
+          @refresh="handleRequestCaptCode"
+          @confirm="handleConfirm"
+      />
+    </el-dialog>
+
+  </el-container>
+</template>
+
+<script setup>
+import {ref} from "vue";
+import lodash from 'lodash'
+import {validateEmail, validateMobile} from "@/utils/validate";
+import {httpGet, httpPost} from "@/utils/http";
+import CaptchaPlus from "@/components/CaptchaPlus.vue";
+import SlideCaptcha from "@/components/SlideCaptcha.vue";
+import {isMobile} from "@/utils/libs";
+import {showMessageError, showMessageOK} from "@/utils/dialog";
+
+const show = ref(false)
+const maxDot = ref(5)
+const imageBase64 = ref('')
+const thumbBase64 = ref('')
+const captKey = ref('')
+const dots = ref(null)
+
+const emits = defineEmits(['success']);
+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 => {
+    showMessageError('获取人机验证数据失败：' + e.message)
+  })
+}
+
+const handleConfirm = (dts) => {
+  if (lodash.size(dts) <= 0) {
+    return showMessageError('请进行人机验证再操作')
+  }
+
+  let dotArr = []
+  lodash.forEach(dts, (dot) => {
+    dotArr.push(dot.x, dot.y)
+  })
+  dots.value = dotArr.join(',')
+  httpPost('/api/captcha/check', {
+    dots: dots.value,
+    key: captKey.value
+  }).then(() => {
+    // ElMessage.success('人机验证成功')
+    show.value = false
+    emits('success', {key:captKey.value, dots:dots.value})
+  }).catch(() => {
+    showMessageError('人机验证失败')
+    handleRequestCaptCode()
+  })
+}
+
+const loadCaptcha = () => {
+  show.value = true
+  // 手机用滑动验证码
+  if (isMobile()) {
+    getSlideCaptcha()
+  } else {
+    handleRequestCaptCode()
+  }
+}
+
+// 滑动验证码
+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 => {
+    showMessageError('获取人机验证数据失败：' + e.message)
+  })
+}
+
+const handleSlideConfirm = (x) => {
+  httpPost("/api/captcha/slide/check", {
+    key: captKey.value,
+    x: x
+  }).then(() => {
+    result.value = 1
+    show.value = false
+    emits('success',{key:captKey.value, x:x})
+  }).catch(() => {
+    result.value = 2
+  })
+}
+
+// 导出方法以便父组件调用
+defineExpose({
+  loadCaptcha
+});
+</script>
+
+<style lang="stylus">
+
+.captcha-box {
+  .el-dialog {
+    .el-dialog__header {
+      padding: 0;
+    }
+
+    .el-dialog__body {
+      padding 0
+    }
+  }
+}
+</style>

web/src/components/FileSelect.vue

@@ -20,7 +20,7 @@
                   :auto-upload="true"
                   :show-file-list="false"
                   :http-request="afterRead"
-                  accept=".doc,.docx,.jpg,.png,.jpeg,.xls,.xlsx,.ppt,.pptx,.pdf"
+                  accept=".doc,.docx,.jpg,.png,.jpeg,.xls,.xlsx,.ppt,.pptx,.pdf,.mp4,.mp3"
               >
                 <el-icon class="avatar-uploader-icon">
                   <Plus/>

web/src/components/InviteList.vue

@@ -33,11 +33,10 @@
 </template>
 
 <script setup>
-import {onMounted, ref, watch} from "vue";
-import {httpGet, httpPost} from "@/utils/http";
+import {onMounted, ref} from "vue";
+import {httpGet} from "@/utils/http";
 import {ElMessage} from "element-plus";
 import {dateFormat} from "@/utils/libs";
-import {DocumentCopy} from "@element-plus/icons-vue";
 import Clipboard from "clipboard";
 
 const items = ref([])
@@ -60,7 +59,7 @@ onMounted(() => {
 
 // 获取数据
 const fetchData = () => {
-  httpPost('/api/invite/list', {page: page.value, page_size: pageSize.value}).then((res) => {
+  httpGet('/api/invite/list', {page: page.value, page_size: pageSize.value}).then((res) => {
     if (res.data) {
       items.value = res.data.items
       total.value = res.data.total

web/src/components/LoginDialog.vue

@@ -47,16 +47,29 @@
         </div>
 
         <el-row class="btn-row" :gutter="20">
-          <el-col :span="12">
+          <el-col :span="24">
             <el-button class="login-btn" type="primary" size="large" @click="submitLogin">登录</el-button>
           </el-col>
+        </el-row>
+
+        <el-row>
           <el-col :span="12">
-            <div class="text">
+            <div class="reg">
               还没有账号？
-              <el-tag @click="login = false">注册</el-tag>
+              <el-button type="primary" class="forget" size="small" @click="login = false">注册</el-button>
+
+              <el-button type="info" class="forget" size="small" @click="showResetPass = true">忘记密码？</el-button>
             </div>
           </el-col>
 
+          <el-col :span="12">
+            <div class="c-login" v-if="wechatLoginURL !== ''">
+              <div class="text">其他登录方式：</div>
+              <div class="login-type">
+                <a class="wechat-login" :href="wechatLoginURL"  @click="setRoute(router.currentRoute.value.path)"><i class="iconfont icon-wechat"></i></a>
+              </div>
+            </div>
+          </el-col>
         </el-row>
       </el-form>
     </div>
@@ -68,7 +81,7 @@
             <div class="block">
               <el-input placeholder="手机号码"
                         size="large"
-                        v-model="data.username"
+                        v-model="data.mobile"
                         maxlength="11"
                         autocomplete="off">
                 <template #prefix>
@@ -93,7 +106,7 @@
                   </el-input>
                 </el-col>
                 <el-col :span="12">
-                  <send-msg size="large" :receiver="data.username"/>
+                  <send-msg size="large" :receiver="data.mobile" type="mobile"/>
                 </el-col>
               </el-row>
             </div>
@@ -102,7 +115,7 @@
             <div class="block">
               <el-input placeholder="邮箱地址"
                         size="large"
-                        v-model="data.username"
+                        v-model="data.email"
                         autocomplete="off">
                 <template #prefix>
                   <el-icon>
@@ -126,7 +139,7 @@
                   </el-input>
                 </el-col>
                 <el-col :span="12">
-                  <send-msg size="large" :receiver="data.username"/>
+                  <send-msg size="large" :receiver="data.email" type="email"/>
                 </el-col>
               </el-row>
             </div>
@@ -217,12 +230,16 @@
         </el-row>
       </div>
     </div>
+
+    <captcha v-if="enableVerify" @success="submit" ref="captchaRef"/>
+
+    <reset-pass @hide="showResetPass = false" :show="showResetPass"/>
   </el-dialog>
 </template>
 
 <script setup>
-import {ref, watch} from "vue"
-import {httpPost} from "@/utils/http";
+import {onMounted, ref, watch} from "vue"
+import {httpGet, httpPost} from "@/utils/http";
 import {ElMessage} from "element-plus";
 import {setUserToken} from "@/store/session";
 import {validateEmail, validateMobile} from "@/utils/validate";
@@ -230,6 +247,10 @@ import {Checked, Close, Iphone, Lock, Message} from "@element-plus/icons-vue";
 import SendMsg from "@/components/SendMsg.vue";
 import {arrayContains} from "@/utils/libs";
 import {getSystemInfo} from "@/store/cache";
+import Captcha from "@/components/Captcha.vue";
+import ResetPass from "@/components/ResetPass.vue";
+import {setRoute} from "@/store/system";
+import {useRouter} from "vue-router";
 
 // eslint-disable-next-line no-undef
 const props = defineProps({
@@ -242,8 +263,10 @@ watch(() => props.show, (newValue) => {
 
 const login = ref(true)
 const data = ref({
-  username: process.env.VUE_APP_USER,
-  password: process.env.VUE_APP_PASS,
+  username: "",
+  password: "",
+  mobile: "",
+  email: "",
   repass: "",
   code: "",
   invite_code: ""
@@ -251,38 +274,62 @@ const data = ref({
 const enableMobile = ref(false)
 const enableEmail = ref(false)
 const enableUser = ref(false)
-const enableRegister = ref(false)
+const enableRegister = ref(true)
+const wechatLoginURL = ref('')
 const activeName = ref("")
 const wxImg = ref("/images/wx.png")
+const captchaRef = ref(null)
 // eslint-disable-next-line no-undef
 const emits = defineEmits(['hide', 'success']);
+const action = ref("login")
+const enableVerify = ref(false)
+const showResetPass = ref(false)
+const router = useRouter()
 
-getSystemInfo().then(res => {
-  if (res.data) {
-    const registerWays = res.data['register_ways']
-    if (arrayContains(registerWays, "mobile")) {
-      enableMobile.value = true
-      activeName.value = activeName.value === "" ? "mobile" : activeName.value
+onMounted(() => {
+  const returnURL = `${location.protocol}//${location.host}/login/callback?action=login`
+  httpGet("/api/user/clogin?return_url="+returnURL).then(res => {
+    wechatLoginURL.value = res.data.url
+  }).catch(e => {
+    console.log(e.message)
+  })
+
+  getSystemInfo().then(res => {
+    if (res.data) {
+      const registerWays = res.data['register_ways']
+      if (arrayContains(registerWays, "mobile")) {
+        enableMobile.value = true
+        activeName.value = activeName.value === "" ? "mobile" : activeName.value
+      }
+      if (arrayContains(registerWays, "email")) {
+        enableEmail.value = true
+        activeName.value = activeName.value === "" ? "email" : activeName.value
+      }
+      if (arrayContains(registerWays, "username")) {
+        enableUser.value = true
+        activeName.value = activeName.value === "" ? "username" : activeName.value
+      }
+      // 是否启用注册
+      enableRegister.value = res.data['enabled_register']
+      // 使用后台上传的客服微信二维码
+      if (res.data['wechat_card_url'] !== '') {
+        wxImg.value = res.data['wechat_card_url']
+      }
+      enableVerify.value = res.data['enabled_verify']
     }
-    if (arrayContains(registerWays, "email")) {
-      enableEmail.value = true
-      activeName.value = activeName.value === "" ? "email" : activeName.value
-    }
-    if (arrayContains(registerWays, "username")) {
-      enableUser.value = true
-      activeName.value = activeName.value === "" ? "username" : activeName.value
-    }
-    // 是否启用注册
-    enableRegister.value = res.data['enabled_register']
-    // 使用后台上传的客服微信二维码
-    if (res.data['wechat_card_url'] !== '') {
-      wxImg.value = res.data['wechat_card_url']
-    }
-  }
-}).catch(e => {
-  ElMessage.error("获取系统配置失败：" + e.message)
+  }).catch(e => {
+    ElMessage.error("获取系统配置失败：" + e.message)
+  })
 })
 
+const submit = (verifyData) => {
+  if (action.value === "login") {
+      doLogin(verifyData)
+  } else if (action.value === "register") {
+    doRegister(verifyData)
+  }
+}
+
 // 登录操作
 const submitLogin = () => {
   if (data.value.username === '') {
@@ -291,7 +338,18 @@ const submitLogin = () => {
   if (data.value.password === '') {
     return ElMessage.error('请输入密码');
   }
+  if (enableVerify.value) {
+    captchaRef.value.loadCaptcha()
+    action.value = "login"
+  } else {
+    doLogin({})
+  }
+}
 
+const doLogin = (verifyData) => {
+  data.value.key = verifyData.key
+  data.value.dots = verifyData.dots
+  data.value.x = verifyData.x
   httpPost('/api/user/login', data.value).then((res) => {
     setUserToken(res.data.token)
     ElMessage.success("登录成功！")
@@ -304,15 +362,15 @@ const submitLogin = () => {
 
 // 注册操作
 const submitRegister = () => {
-  if (data.value.username === '') {
+  if (activeName.value === 'username' && data.value.username === '') {
     return ElMessage.error('请输入用户名');
   }
 
-  if (activeName.value === 'mobile' && !validateMobile(data.value.username)) {
+  if (activeName.value === 'mobile' && !validateMobile(data.value.mobile)) {
     return ElMessage.error('请输入合法的手机号');
   }
 
-  if (activeName.value === 'email' && !validateEmail(data.value.username)) {
+  if (activeName.value === 'email' && !validateEmail(data.value.email)) {
     return ElMessage.error('请输入合法的邮箱地址');
   }
 
@@ -326,9 +384,21 @@ const submitRegister = () => {
   if ((activeName.value === 'mobile' || activeName.value === 'email') && data.value.code === '') {
     return ElMessage.error('请输入验证码');
   }
+  if (enableVerify.value) {
+    captchaRef.value.loadCaptcha()
+    action.value = "register"
+  } else {
+    doRegister({})
+  }
+}
+
+const doRegister = (verifyData) => {
+  data.value.key = verifyData.key
+  data.value.dots = verifyData.dots
+  data.value.x = verifyData.x
   data.value.reg_way = activeName.value
   httpPost('/api/user/register', data.value).then((res) => {
-    setUserToken(res.data)
+    setUserToken(res.data.token)
     ElMessage.success({
       "message": "注册成功!",
       onClose: () => {
@@ -388,7 +458,7 @@ const close = function () {
     .btn-row {
       display flex
 
-      .el-button {
+      .login-btn {
         width 100%
       }
 
@@ -400,6 +470,44 @@ const close = function () {
         }
       }
 
+      .forget {
+        margin-left 10px
+      }
+    }
+
+    .c-login {
+      display flex
+      .text {
+        font-size 16px
+        color #a1a1a1
+        display: flex;
+        align-items: center;
+      }
+      .login-type {
+        padding 15px
+        display flex
+        justify-content center
+
+        .iconfont {
+          font-size 18px
+          background: #E9F1F6;
+          padding: 8px;
+          border-radius: 50%;
+        }
+        .iconfont.icon-wechat {
+          color #0bc15f
+        }
+      }
+    }
+
+    .reg {
+      height 50px
+      display flex
+      align-items center
+
+      .el-button {
+        margin-left 10px
+      }
     }
   }
 

web/src/components/RedeemVerify.vue

@@ -2,7 +2,6 @@
   <el-dialog
       v-model="showDialog"
       :close-on-click-modal="true"
-      :show-close="mobile !== ''"
       :before-close="close"
       :width="450"
       :title="title"

web/src/components/ResetPass.vue

@@ -6,27 +6,44 @@
         width="540px"
         :before-close="close"
         :title="title"
+        class="reset-pass-dialog"
     >
       <div class="form">
-
         <el-form :model="form" label-width="80px" label-position="left">
-          <el-form-item label="用户名">
-            <el-input v-model="form.username" placeholder="手机号/邮箱地址"/>
-          </el-form-item>
-          <el-form-item label="验证码">
-            <div class="code-box">
-              <el-input v-model="form.code" maxlength="6"/>
-              <send-msg size="" :receiver="form.username" style="margin-left: 10px; min-width: 100px"/>
-            </div>
-            <el-row :gutter="20">
-              <el-col :span="12">
+          <el-tabs v-model="form.type" class="demo-tabs">
+            <el-tab-pane label="手机号验证" name="mobile">
+              <el-form-item label="手机号">
+                <el-input v-model="form.mobile" placeholder="请输入手机号"/>
+              </el-form-item>
+              <el-form-item label="验证码">
+                <el-row class="code-row">
+                  <el-col :span="16">
+                    <el-input v-model="form.code" maxlength="6"/>
+                  </el-col>
+                  <el-col :span="8" class="send-button">
+                    <send-msg size="" :receiver="form.mobile" type="mobile"/>
+                  </el-col>
+                </el-row>
+              </el-form-item>
 
-              </el-col>
-              <el-col :span="12" style="justify-content: right">
+            </el-tab-pane>
+            <el-tab-pane label="邮箱验证" name="email">
+              <el-form-item label="邮箱地址">
+                <el-input v-model="form.email" placeholder="请输入邮箱地址"/>
+              </el-form-item>
+              <el-form-item label="验证码">
+                <el-row class="code-row">
+                  <el-col :span="16">
+                    <el-input v-model="form.code" maxlength="6"/>
+                  </el-col>
+                  <el-col :span="8" class="send-button">
+                    <send-msg size="" :receiver="form.email" type="email"/>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-tab-pane>
+          </el-tabs>
 
-              </el-col>
-            </el-row>
-          </el-form-item>
           <el-form-item label="新密码">
             <el-input v-model="form.password" type="password"/>
           </el-form-item>
@@ -65,7 +82,9 @@ const showDialog = computed(() => {
 
 const title = ref('重置密码')
 const form = ref({
-  username: '',
+  mobile: '',
+  email: '',
+  type: 'mobile',
   code: '',
   password: '',
   repass: ''
@@ -74,12 +93,12 @@ const form = ref({
 const emits = defineEmits(['hide']);
 
 const save = () => {
-  if (!validateMobile(form.value.username) && !validateEmail(form.value.username)) {
-    return ElMessage.error("请输入正确的手机号码/邮箱地址");
-  }
   if (form.value.code === '') {
     return ElMessage.error("请输入验证码");
   }
+  if (form.value.password.length < 8) {
+    return ElMessage.error("密码长度必须大于8位");
+  }
   if (form.value.repass !== form.value.password) {
     return ElMessage.error("两次输入密码不一致");
   }
@@ -101,15 +120,24 @@ const close = function () {
 <style lang="stylus">
 .reset-pass {
   .form {
-    padding 10px 20px
+    padding 0 20px
   }
-  .code-box {
-    display: flex;
-    justify-content: space-between;
-    width: 100%
+
+  .code-row {
+    width 100%
+    .send-button {
+      padding-left 10px
+    }
   }
-  .el-dialog__footer {
-    text-align center
+
+  .reset-pass-dialog {
+    .el-dialog__footer {
+      text-align center
+      padding-top 0
+    }
+    .el-dialog__body {
+      padding 0
+    }
   }
 }
 

web/src/components/SendMsg.vue

@@ -1,121 +1,64 @@
 <template>
-  <el-container class="captcha-box">
-    <el-button type="primary" class="send-btn" :size="props.size" :disabled="!canSend" @click="loadCaptcha" plain>
+  <el-container class="send-verify-code">
+    <el-button type="primary" class="send-btn" :size="props.size" :disabled="!canSend" @click="sendMsg" plain>
       {{ btnText }}
     </el-button>
 
-    <el-dialog
-        v-model="showCaptcha"
-        :close-on-click-modal="true"
-        :show-close="false"
-        style="width: 360px;"
-    >
-      <slide-captcha
-          v-if="isMobile()"
-          :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"
-          width="300"
-          @close="showCaptcha = false"
-          @refresh="handleRequestCaptCode"
-          @confirm="handleConfirm"
-      />
-    </el-dialog>
+    <captcha @success="doSendMsg" ref="captchaRef"/>
   </el-container>
 </template>
 
 <script setup>
 // 发送短信验证码组件
 import {ref} from "vue";
-import lodash from 'lodash'
 import {validateEmail, validateMobile} from "@/utils/validate";
-import {httpGet, httpPost} from "@/utils/http";
-import CaptchaPlus from "@/components/CaptchaPlus.vue";
-import SlideCaptcha from "@/components/SlideCaptcha.vue";
-import {isMobile} from "@/utils/libs";
+import {httpPost} from "@/utils/http";
 import {showMessageError, showMessageOK} from "@/utils/dialog";
+import Captcha from "@/components/Captcha.vue";
+import {getSystemInfo} from "@/store/cache";
 
 // eslint-disable-next-line no-undef
 const props = defineProps({
   receiver: String,
   size: String,
+  type: {
+    type: String,
+    default: 'mobile'
+  }
 });
 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 captchaRef = ref(null)
+const enableVerify = ref(false)
 
-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 => {
-    showMessageError('获取人机验证数据失败：' + e.message)
-  })
-}
-
-const handleConfirm = (dots) => {
-  if (lodash.size(dots) <= 0) {
-    return showMessageError('请进行人机验证再操作')
-  }
-
-  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(() => {
-    // ElMessage.success('人机验证成功')
-    showCaptcha.value = false
-    sendMsg()
-  }).catch(() => {
-    showMessageError('人机验证失败')
-    handleRequestCaptCode()
-  })
-}
-
-const loadCaptcha = () => {
-  if (!validateMobile(props.receiver) && !validateEmail(props.receiver)) {
-    return showMessageError("请输入合法的手机号/邮箱地址")
-  }
-
-  showCaptcha.value = true
-  // 手机用滑动验证码
-  if (isMobile()) {
-    getSlideCaptcha()
-  } else {
-    handleRequestCaptCode()
-  }
-}
+getSystemInfo().then(res => {
+  enableVerify.value = res.data['enabled_verify']
+})
 
 const sendMsg = () => {
+  if (!validateMobile(props.receiver) && props.type === 'mobile') {
+    return showMessageError("请输入合法的手机号")
+  }
+  if (!validateEmail(props.receiver) && props.type === 'email') {
+    return showMessageError("请输入合法的邮箱地址")
+  }
+  
+  if (enableVerify.value) {
+    captchaRef.value.loadCaptcha()
+  } else {
+    doSendMsg({})
+  }
+}
+
+const doSendMsg = (data) => {
   if (!canSend.value) {
     return
   }
 
   canSend.value = false
-  httpPost('/api/sms/code', {receiver: props.receiver, key: captKey.value, dots: dots.value}).then(() => {
+  httpPost('/api/sms/code', {receiver: props.receiver, key: data.key, dots: data.dots, x:data.x}).then(() => {
     showMessageOK('验证码发送成功')
-    let time = 120
+    let time = 60
     btnText.value = time
     const handler = setInterval(() => {
       time = time - 1
@@ -132,52 +75,13 @@ const sendMsg = () => {
     showMessageError('验证码发送失败：' + e.message)
   })
 }
-
-// 滑动验证码
-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 => {
-    showMessageError('获取人机验证数据失败：' + 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">
+<style lang="stylus" scoped>
 
-.captcha-box {
+.send-verify-code {
   .send-btn {
     width: 100%;
   }
-
-  .el-dialog {
-    .el-dialog__header {
-      padding: 0;
-    }
-
-    .el-dialog__body {
-      padding 0
-    }
-  }
 }
 </style>

web/src/components/ThirdLogin.vue

@@ -0,0 +1,93 @@
+<template>
+  <el-dialog
+      v-model="showDialog"
+      :close-on-click-modal="true"
+      style="max-width: 400px"
+      @close="close"
+      :title="title"
+  >
+    <div class="third-login" v-loading="loading">
+      <div class="item" v-if="wechatBindURL !== ''">
+        <a class="link" :href="wechatBindURL"><i class="iconfont icon-wechat"></i></a>
+        <span class="text ok" v-if="openid !== ''">已绑定</span>
+        <span class="text" v-else>未绑定</span>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+import {computed, ref, watch} from "vue";
+import {httpGet} from "@/utils/http";
+import {checkSession} from "@/store/cache";
+import {showMessageError} from "@/utils/dialog";
+
+const props = defineProps({
+  show: Boolean,
+});
+const emits = defineEmits(['hide']);
+
+const showDialog = computed(() => {
+  return props.show
+})
+
+
+const title = ref('绑定第三方登录')
+const openid = ref('')
+const wechatBindURL = ref('')
+const loading = ref(true)
+
+watch(showDialog, (val) => {
+  if (val) {
+    checkSession().then(user => {
+      openid.value = user.openid
+    })
+    const returnURL = `${location.protocol}//${location.host}/login/callback?action=bind`
+    httpGet("/api/user/clogin?return_url="+returnURL).then(res => {
+      wechatBindURL.value = res.data.url
+      loading.value = false
+    }).catch(e => {
+      showMessageError(e.message)
+    })
+  }
+})
+
+const close = function () {
+  emits('hide');
+}
+</script>
+
+<style lang="stylus" scoped>
+.third-login {
+  display flex
+  justify-content center
+  min-height 100px
+
+  .item {
+    display flex
+    flex-flow column
+    align-items center
+
+    .link {
+      display flex
+      .iconfont {
+        font-size 30px
+        cursor pointer
+        background #e9f1f6
+        padding 10px
+        border-radius 50%
+      }
+      margin-bottom 10px
+    }
+
+
+    .text {
+      font-size 14px
+    }
+
+    .icon-wechat,.ok {
+      color: #0bc15f;
+    }
+  }
+}
+</style>

web/src/components/ui/BlackDialog.vue

@@ -20,10 +20,10 @@
       <div class="dialog-body">
         <slot></slot>
       </div>
-      <template #footer>
+      <template #footer v-if="!hideFooter">
         <div class="dialog-footer">
           <el-button @click="cancel">{{cancelText}}</el-button>
-          <el-button type="primary" @click="$emit('confirm')">{{confirmText}}</el-button>
+          <el-button type="primary" @click="$emit('confirm')" v-if="!hideConfirm">{{confirmText}}</el-button>
         </div>
       </template>
     </el-dialog>
@@ -43,6 +43,14 @@ const props = defineProps({
     type: Number,
     default: 500,
   },
+  hideFooter:{
+    type: Boolean,
+    default: false
+  },
+  hideConfirm:{
+    type: Boolean,
+    default: false
+  },
   confirmText: {
     type: String,
     default: '确定',

web/src/components/ui/Generating.vue

@@ -12,10 +12,22 @@
       <div class="bar"></div>
       <div class="bar"></div>
     </div>
-    <div class="text">正在生成歌曲</div>
+    <div class="text">
+      <slot>{{message}}</slot>
+    </div>
   </div>
 </template>
 
+<script setup>
+// eslint-disable-next-line
+defineProps({
+  message: {
+    type: String,
+    default: '任务正在执行',
+  },
+});
+</script>
+
 <style scoped lang="stylus">
 .container {
   display: flex;