feat: optimize login dialog

web/src/App.vue

@@ -7,6 +7,26 @@
 <script setup>
 import {ElConfigProvider} from 'element-plus';
 import zhCn from 'element-plus/es/locale/lang/zh-cn';
+
+const debounce = (fn, delay) => {
+  let timer
+  return (...args) => {
+    if (timer) {
+      clearTimeout(timer)
+    }
+    timer = setTimeout(() => {
+      fn(...args)
+    }, delay)
+  }
+}
+
+const _ResizeObserver = window.ResizeObserver;
+window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
+  constructor(callback) {
+    callback = debounce(callback, 200);
+    super(callback);
+  }
+}
 </script>
 
 

web/src/components/LoginDialog.vue

@@ -3,12 +3,21 @@
       class="login-dialog"
       v-model="showDialog"
       :close-on-click-modal="true"
-      :show-close="true"
+      :show-close="false"
       :before-close="close"
-      :width="400"
-      title="用户登录"
   >
-    <div class="form">
+    <template #header="{ close, titleId, titleClass }">
+      <div class="header">
+        <div class="title">用户登录</div>
+        <div class="close-icon">
+          <el-icon>
+            <Close/>
+          </el-icon>
+        </div>
+      </div>
+    </template>
+
+    <div class="login-box">
       <el-form label-width="75px">
         <el-form-item>
           <template #label>
@@ -20,7 +29,7 @@
             </div>
           </template>
           <template #default>
-            <el-input v-model="username" size="large" placeholder="手机号码"/>
+            <el-input v-model="data.username" size="large" placeholder="账号"/>
           </template>
         </el-form-item>
         <el-form-item>
@@ -33,15 +42,100 @@
             </div>
           </template>
           <template #default>
-            <el-input v-model="password" type="password" size="large" placeholder="密码"/>
+            <el-input v-model="data.password" type="password" size="large" placeholder="密码"/>
           </template>
         </el-form-item>
 
         <div class="login-btn">
           <el-button type="primary" @click="submit" size="large" round>登录</el-button>
+          <el-button plain @click="submit" size="large" round>注册</el-button>
         </div>
       </el-form>
     </div>
+
+    <div class="register-box">
+      <el-form :model="data" label-width="120px" ref="formRef">
+        <div class="block">
+          <el-input placeholder="账号"
+                    size="large"
+                    v-model="data.username"
+                    autocomplete="off">
+            <template #prefix>
+              <el-icon>
+                <Iphone/>
+              </el-icon>
+            </template>
+          </el-input>
+        </div>
+
+        <div class="block">
+          <el-input placeholder="请输入密码(8-16位)"
+                    maxlength="16" size="large"
+                    v-model="data.password" show-password
+                    autocomplete="off">
+            <template #prefix>
+              <el-icon>
+                <Lock/>
+              </el-icon>
+            </template>
+          </el-input>
+        </div>
+
+        <div class="block">
+          <el-input placeholder="重复密码(8-16位)"
+                    size="large" maxlength="16" v-model="data.repass" show-password
+                    autocomplete="off">
+            <template #prefix>
+              <el-icon>
+                <Lock/>
+              </el-icon>
+            </template>
+          </el-input>
+        </div>
+
+        <div class="block">
+          <el-row :gutter="10">
+            <el-col :span="12">
+              <el-input placeholder="验证码"
+                        size="large" maxlength="30"
+                        v-model="data.code"
+                        autocomplete="off">
+                <template #prefix>
+                  <el-icon>
+                    <Checked/>
+                  </el-icon>
+                </template>
+              </el-input>
+            </el-col>
+            <el-col :span="12">
+              <send-msg size="large" :receiver="data.username"/>
+            </el-col>
+          </el-row>
+        </div>
+
+        <div class="block">
+          <el-input placeholder="邀请码(可选)"
+                    size="large"
+                    v-model="data.invite_code"
+                    autocomplete="off">
+            <template #prefix>
+              <el-icon>
+                <Message/>
+              </el-icon>
+            </template>
+          </el-input>
+        </div>
+
+        <el-row class="btn-row">
+          <el-button class="login-btn" type="primary" @click="">注册</el-button>
+        </el-row>
+
+        <el-row class="text-line">
+          已经有账号？
+          <el-link type="primary" @click="">登录</el-link>
+        </el-row>
+      </el-form>
+    </div>
   </el-dialog>
 </template>
 
@@ -51,7 +145,8 @@ import {httpPost} from "@/utils/http";
 import {ElMessage} from "element-plus";
 import {setUserToken} from "@/store/session";
 import {validateMobile} from "@/utils/validate";
-import {Lock, User} from "@element-plus/icons-vue";
+import {Checked, Close, Iphone, Lock, Message, Position, User} from "@element-plus/icons-vue";
+import SendMsg from "@/components/SendMsg.vue";
 
 // eslint-disable-next-line no-undef
 const props = defineProps({
@@ -60,19 +155,14 @@ const props = defineProps({
 const showDialog = computed(() => {
   return props.show
 })
-const username = ref("")
-const password = ref("")
+const data = ref({
+  username: "",
+  password: ""
+})
 // eslint-disable-next-line no-undef
 const emits = defineEmits(['hide']);
 const submit = function () {
-  if (!validateMobile(username.value)) {
-    return ElMessage.error('请输入合法的手机号');
-  }
-  if (password.value.trim() === '') {
-    return ElMessage.error('请输入密码');
-  }
-
-  httpPost('/api/user/login', {username: username.value.trim(), password: password.value.trim()}).then((res) => {
+  httpPost('/api/user/login', data.value).then((res) => {
     setUserToken(res.data)
     ElMessage.success("登录成功！")
     emits("hide")
@@ -87,30 +177,58 @@ const close = function () {
 
 <style lang="stylus">
 .login-dialog {
-  border-radius 20px
+  border-radius 10px
+  max-width 600px
 
-  .label {
-    padding-top 3px
+  .header {
+    position relative
 
-    .el-icon {
-      position relative
+    .title {
+      padding 0
+      font-size 18px
+    }
+
+    .close-icon {
+      cursor pointer
+      position absolute
+      right 0
+      top 0
+      font-weight normal
       font-size 20px
-      margin-right 6px
-      top 4px
-    }
 
-    span {
-      font-size 16px
+      &:hover {
+        color #20a0ff
+      }
     }
   }
 
-  .login-btn {
-    text-align center
-    padding-top 10px
+  .login-box {
+    .label {
+      padding-top 3px
 
-    .el-button {
-      width 50%
+      .el-icon {
+        position relative
+        font-size 20px
+        margin-right 6px
+        top 4px
+      }
+
+      span {
+        font-size 16px
+      }
+    }
+
+    .login-btn {
+      display flex
+      padding-top 10px
+      justify-content center
+
+      .el-button {
+        font-size 16px
+        width 100px
+      }
     }
   }
+
 }
 </style>

web/src/views/ChatPlus.vue

@@ -237,6 +237,8 @@
     </el-dialog>
 
     <config-dialog v-if="isLogin" :show="showConfigDialog" :models="models" @hide="showConfigDialog = false"/>
+
+    <login-dialog :show="true"/>
   </div>
 
 
@@ -271,6 +273,7 @@ import {checkSession} from "@/action/session";
 import Welcome from "@/components/Welcome.vue";
 import ChatMidJourney from "@/components/ChatMidJourney.vue";
 import FileSelect from "@/components/FileSelect.vue";
+import LoginDialog from "@/components/LoginDialog.vue";
 
 const title = ref('ChatGPT-智能助手');
 const models = ref([])