mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-11-07 09:43:43 +08:00
opt: optimize the layout for regiseter page. add function to disable registration
This commit is contained in:
RockYang
@@ -1,101 +1,111 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="bg"></div>
|
||||
<div class="main">
|
||||
<div class="contain">
|
||||
<div class="logo">
|
||||
<el-image src="images/logo.png" fit="cover"/>
|
||||
</div>
|
||||
<div class="register-page">
|
||||
<div class="page-inner">
|
||||
<div class="contain" v-if="enableRegister">
|
||||
<div class="logo">
|
||||
<el-image src="images/logo.png" fit="cover"/>
|
||||
</div>
|
||||
|
||||
<div class="header">{{ title }}</div>
|
||||
<div class="content">
|
||||
<el-form :model="formData" label-width="120px" ref="formRef">
|
||||
<div class="block">
|
||||
<el-input placeholder="请输入用户名(4-30位)"
|
||||
size="large" maxlength="30"
|
||||
v-model="formData.username"
|
||||
autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<UserFilled/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="header">{{ title }}</div>
|
||||
<div class="content">
|
||||
<el-form :model="formData" label-width="120px" ref="formRef">
|
||||
<div class="block">
|
||||
<el-input placeholder="请输入用户名(4-30位)"
|
||||
size="large" maxlength="30"
|
||||
v-model="formData.username"
|
||||
autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<UserFilled/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
<el-input placeholder="请输入密码(8-16位)"
|
||||
maxlength="16" size="large"
|
||||
v-model="formData.password" show-password
|
||||
autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Lock/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="block">
|
||||
<el-input placeholder="请输入密码(8-16位)"
|
||||
maxlength="16" size="large"
|
||||
v-model="formData.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="formData.repass" 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="formData.repass" show-password
|
||||
autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Lock/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<div class="block" v-if="enableMsg">
|
||||
<el-input placeholder="手机号码"
|
||||
size="large" maxlength="11"
|
||||
v-model="formData.mobile"
|
||||
autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Iphone/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="block" v-if="enableMsg">
|
||||
<el-input placeholder="手机号码"
|
||||
size="large" maxlength="11"
|
||||
v-model="formData.mobile"
|
||||
autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Iphone/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<div class="block" v-if="enableMsg">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<el-input placeholder="手机验证码"
|
||||
size="large" maxlength="30"
|
||||
v-model.number="formData.code"
|
||||
autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Checked/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<send-msg size="large" :mobile="formData.mobile"/>
|
||||
</el-col>
|
||||
<div class="block" v-if="enableMsg">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<el-input placeholder="手机验证码"
|
||||
size="large" maxlength="30"
|
||||
v-model.number="formData.code"
|
||||
autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Checked/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<send-msg size="large" :mobile="formData.mobile"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-row class="btn-row">
|
||||
<el-button class="login-btn" size="large" type="primary" @click="register">注册</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-row class="btn-row">
|
||||
<el-button class="login-btn" size="large" type="primary" @click="register">注册</el-button>
|
||||
</el-row>
|
||||
|
||||
<el-row class="text-line">
|
||||
已经有账号？
|
||||
<el-link type="primary" @click="router.push('login')">登录</el-link>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-row class="text-line">
|
||||
已经有账号？
|
||||
<el-link type="primary" @click="router.push('login')">登录</el-link>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<footer-bar/>
|
||||
</footer>
|
||||
<div class="tip-result" v-else>
|
||||
<el-result icon="error" title="注册功能已关闭">
|
||||
<template #sub-title>
|
||||
<p>抱歉，系统已关闭注册功能，请联系管理员添加账号！</p>
|
||||
</template>
|
||||
</el-result>
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<footer-bar/>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -121,10 +131,12 @@ const formData = ref({
|
||||
})
|
||||
const formRef = ref(null)
|
||||
const enableMsg = ref(false)
|
||||
const enableRegister = ref(true)
|
||||
|
||||
httpGet('/api/sms/status').then(res => {
|
||||
if (res.data === true) {
|
||||
enableMsg.value = true
|
||||
if (res.data) {
|
||||
enableMsg.value = res.data['enabled_msg_service']
|
||||
enableRegister.value = res.data['enabled_register']
|
||||
}
|
||||
})
|
||||
|
||||
@@ -166,76 +178,108 @@ const register = function () {
|
||||
//filter: blur(10px); /* 调整模糊程度，可以根据需要修改值 */
|
||||
}
|
||||
|
||||
.main {
|
||||
.contain {
|
||||
position fixed
|
||||
left 50%
|
||||
top 40%
|
||||
width 90%
|
||||
max-width 400px
|
||||
transform translate(-50%, -50%)
|
||||
padding 20px 40px;
|
||||
color #ffffff
|
||||
border-radius 10px;
|
||||
background rgba(255, 255, 255, 0.3)
|
||||
.register-page {
|
||||
display flex
|
||||
justify-content center
|
||||
|
||||
.logo {
|
||||
text-align center
|
||||
.page-inner {
|
||||
max-width 450px
|
||||
height 100vh
|
||||
display flex
|
||||
justify-content center
|
||||
align-items center
|
||||
|
||||
.el-image {
|
||||
width 120px;
|
||||
.contain {
|
||||
padding 0 40px 20px 40px;
|
||||
color #ffffff
|
||||
border-radius 10px;
|
||||
z-index 10
|
||||
background-color rgba(255, 255, 255, 0.3)
|
||||
|
||||
.logo {
|
||||
text-align center
|
||||
|
||||
.el-image {
|
||||
width 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
width 100%
|
||||
margin-bottom 24px
|
||||
font-size 24px
|
||||
color $white_v1
|
||||
letter-space 2px
|
||||
text-align center
|
||||
}
|
||||
.header {
|
||||
width 100%
|
||||
margin-bottom 24px
|
||||
font-size 24px
|
||||
color $white_v1
|
||||
letter-space 2px
|
||||
text-align center
|
||||
}
|
||||
|
||||
.content {
|
||||
width 100%
|
||||
height: auto
|
||||
border-radius 3px
|
||||
.content {
|
||||
width 100%
|
||||
height: auto
|
||||
border-radius 3px
|
||||
|
||||
.block {
|
||||
margin-bottom 16px
|
||||
.block {
|
||||
margin-bottom 16px
|
||||
|
||||
.el-input__inner {
|
||||
border 1px solid $gray-v6 !important
|
||||
.el-input__inner {
|
||||
border 1px solid $gray-v6 !important
|
||||
|
||||
.el-icon-user, .el-icon-lock {
|
||||
font-size 20px
|
||||
.el-icon-user, .el-icon-lock {
|
||||
font-size 20px
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-row {
|
||||
padding-top 10px;
|
||||
.btn-row {
|
||||
padding-top 10px;
|
||||
|
||||
.login-btn {
|
||||
width 100%
|
||||
font-size 16px
|
||||
letter-spacing 2px
|
||||
.login-btn {
|
||||
width 100%
|
||||
font-size 16px
|
||||
letter-spacing 2px
|
||||
}
|
||||
}
|
||||
|
||||
.text-line {
|
||||
justify-content center
|
||||
padding-top 10px;
|
||||
font-size 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-line {
|
||||
justify-content center
|
||||
padding-top 10px;
|
||||
font-size 14px;
|
||||
|
||||
.tip-result {
|
||||
z-index 10
|
||||
}
|
||||
|
||||
.footer {
|
||||
color #ffffff;
|
||||
|
||||
.container {
|
||||
padding 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.footer {
|
||||
color #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
||||
.container {
|
||||
padding 20px;
|
||||
<style lang="stylus">
|
||||
.register-page {
|
||||
.el-result {
|
||||
|
||||
border-radius 10px;
|
||||
background-color rgba(14, 25, 30, 0.6)
|
||||
border 1px solid #666
|
||||
|
||||
.el-result__title p {
|
||||
color #ffffff
|
||||
}
|
||||
|
||||
.el-result__subtitle p {
|
||||
color #c1c1c1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,6 +12,9 @@
|
||||
<el-form-item label="注册赠送次数" prop="init_calls">
|
||||
<el-input v-model.number="system['user_init_calls']" placeholder="新用户注册赠送对话次数"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="开放用户注册" prop="init_calls">
|
||||
<el-switch v-model="system['enabled_register']"/>
|
||||
</el-form-item>
|
||||
<el-alert type="info" show-icon :closable="false">
|
||||
<p>在这里维护前端聊天页面可用的 GPT 模型列表</p>
|
||||
</el-alert>
|
||||
|
||||
Reference in New Issue
Block a user