feat: 短信验证码功能已完成，手机端同步实现。

web/src/components/BindMobile.vue

@@ -2,24 +2,28 @@
   <el-dialog
       v-model="showDialog"
       :close-on-click-modal="false"
-      :show-close="false"
+      :show-close="mobile !== ''"
+      :before-close="close"
       :title="title"
   >
-    <div class="form" id="password-form">
+    <div class="form" id="bind-mobile-form">
+      <el-alert v-if="mobile !== ''" type="info" show-icon :closable="false" style="margin-bottom: 20px;">
+        <p>当前用户已绑定手机号：{{ mobile }}, 绑定其他手机号之后自动解绑该手机号。</p>
+      </el-alert>
+
       <el-form :model="form" label-width="120px">
         <el-form-item label="手机号码">
-          <el-input v-model="form.mobile" type="password"/>
+          <el-input v-model="form.mobile"/>
         </el-form-item>
         <el-form-item label="手机验证码">
           <el-row :gutter="10">
             <el-col :span="12">
-              <el-input v-model="form.code" type="password"/>
+              <el-input v-model.number="form.code" maxlength="6"/>
             </el-col>
             <el-col :span="12">
-              <send-msg size="large" v-model:mobile="form.mobile"/>
+              <send-msg size="" :mobile="form.mobile"/>
             </el-col>
           </el-row>
-
         </el-form-item>
       </el-form>
     </div>
@@ -35,31 +39,51 @@
 </template>
 
 <script setup>
-import {ref} from "vue";
-import {checkSession} from "@/action/session";
+import {computed, ref} from "vue";
 import SendMsg from "@/components/SendMsg.vue";
+import {ElMessage} from "element-plus";
+import {httpPost} from "@/utils/http";
+import {validateMobile} from "@/utils/validate";
+
+const props = defineProps({
+  show: Boolean,
+  mobile: String
+});
+
+const showDialog = computed(() => {
+  return props.show
+})
 
 const title = ref('绑定手机号')
-const showDialog = ref(false)
 const form = ref({
   mobile: '',
   code: ''
 })
 
-checkSession().then(user => {
-  if (user.mobile === '') {
-    showDialog.value = true
-  }
-}).catch(e => {
-  console.log(e.message)
-})
+const emits = defineEmits(['hide']);
 
 const save = () => {
+  if (!validateMobile(form.value.mobile)) {
+    return ElMessage.error({message: "请输入正确的手机号码", appendTo: "#bind-mobile-form"});
+  }
+  if (form.value.code === '') {
+    return ElMessage.error({message: "请输入短信验证码", appendTo: "#bind-mobile-form"});
+  }
 
+  httpPost('/api/user/bind/mobile', form.value).then(() => {
+    ElMessage.success({
+      message: '绑定成功',
+      appendTo: '#bind-mobile-form',
+      duration: 1000,
+      onClose: () => emits('hide', false)
+    })
+  }).catch(e => {
+    ElMessage.error({message: "绑定失败：" + e.message, appendTo: "#bind-mobile-form"});
+  })
 }
 
-const sendMsg = () => {
-
+const close = function () {
+  emits('hide', false);
 }
 </script>
 

web/src/components/ConfigDialog.vue

@@ -28,6 +28,10 @@
           <el-input v-model="form.username" readonly disabled/>
         </el-form-item>
 
+        <el-form-item label="绑定手机号">
+          <el-input v-model="form.mobile" readonly disabled/>
+        </el-form-item>
+
         <el-form-item label="聊天上下文">
           <el-switch v-model="form.chat_config.enable_context"/>
         </el-form-item>
@@ -96,6 +100,7 @@ const form = ref({
   username: '',
   nickname: '',
   avatar: '',
+  mobile: '',
   calls: 0,
   tokens: 0,
   chat_configs: {}

web/src/components/PasswordDialog.vue

@@ -55,6 +55,7 @@ const save = function () {
     ElMessage.success({
       message: '更新成功',
       appendTo: '#password-form',
+      duration: 1000,
       onClose: () => emits('logout', false)
     })
   }).catch((e) => {

web/src/components/SendMsg.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-button type="primary" class="sms-btn" :disabled="!canSend" :size="size" @click="sendMsg" plain>{{
+  <el-button type="primary" :disabled="!canSend" :size="props.size" @click="sendMsg" plain>{{
       btnText
     }}
   </el-button>

web/src/components/mobile/BindMobile.vue

@@ -0,0 +1,76 @@
+<template>
+  <van-dialog v-model:show="showDialog"
+              :title="title"
+              :show-cancel-button="mobile !== ''"
+              @confirm="save"
+              @cancel="close">
+    <van-cell-group inset>
+      <van-field
+          v-model="form.mobile"
+          label="手机号"
+          placeholder="请输入手机号"
+      />
+      <van-field
+          v-model.number="form.code"
+          center
+          clearable
+          label="短信验证码"
+          placeholder="请输入短信验证码"
+      >
+        <template #button>
+          <!--          <van-button size="small" type="primary">发送验证码</van-button>-->
+          <send-msg size="small" :mobile="form.mobile"/>
+        </template>
+      </van-field>
+    </van-cell-group>
+  </van-dialog>
+</template>
+
+<script setup>
+import {computed, ref} from "vue";
+import SendMsg from "@/components/mobile/SendMsg.vue";
+import {ElMessage} from "element-plus";
+import {httpPost} from "@/utils/http";
+import {validateMobile} from "@/utils/validate";
+import {showNotify} from "vant";
+
+const props = defineProps({
+  show: Boolean,
+  mobile: String
+});
+
+const showDialog = computed(() => {
+  return props.show
+})
+
+const title = ref('绑定手机号')
+const form = ref({
+  mobile: '',
+  code: ''
+})
+
+const emits = defineEmits(['hide']);
+
+const save = () => {
+  if (!validateMobile(form.value.mobile)) {
+    return showNotify({type: 'danger', message: '请输入正确的手机号码'});
+  }
+  if (form.value.code === '') {
+    return showNotify({type: "danger", message: '请输入短信验证码'})
+  }
+
+  httpPost('/api/user/bind/mobile', form.value).then(() => {
+    showNotify({type: 'success', message: '绑定成功', duration: 1000, onClose: emits('hide', false)});
+  }).catch(e => {
+    showNotify({type: 'danger', message: '绑定失败：' + e.message, duration: 2000});
+  })
+}
+
+const close = function () {
+  emits('hide', false);
+}
+</script>
+
+<style scoped>
+
+</style>

web/src/components/mobile/SendMsg.vue

@@ -0,0 +1,62 @@
+<template>
+  <van-button size="small"
+              type="primary"
+              :disabled="!canSend"
+              :size="props.size"
+              @click="sendMsg">{{ btnText }}
+  </van-button>
+</template>
+
+<script setup>
+// 发送短信验证码组件
+import {ref} from "vue";
+import {validateMobile} from "@/utils/validate";
+import {ElMessage} from "element-plus";
+import {httpGet, httpPost} from "@/utils/http";
+import {showNotify} from "vant";
+
+const props = defineProps({
+  mobile: String,
+  size: String,
+});
+const btnText = ref('发送验证码')
+const canSend = ref(true)
+
+const sendMsg = () => {
+  if (!canSend.value) {
+    return
+  }
+
+  if (!validateMobile(props.mobile)) {
+    return showNotify({type: 'danger', message: '请输入合法的手机号'})
+  }
+  canSend.value = false
+  httpGet('/api/verify/token').then(res => {
+    httpPost('/api/verify/sms', {token: res.data, mobile: props.mobile}).then(() => {
+      showNotify({type: 'success', message: '短信发送成功'})
+      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
+      showNotify({type: 'danger', message: '短信发送失败：' + e.message})
+    })
+  }).catch(e => {
+    console.log('failed to fetch token: ' + e.message)
+  })
+}
+
+</script>
+
+<style scoped>
+
+</style>