feat: 登录

This commit is contained in:
wangdan-fit2cloud 2023-12-12 11:32:45 +08:00
parent 5488804ea8
commit 833e966190
10 changed files with 79 additions and 89 deletions

View File

@ -1,13 +1,17 @@
<template> <template>
<div class="login-form-container"> <div class="login-form-container">
<div class="login-title"> <div class="login-title">
<div class="title flex-center"> <div class="title flex-center mb-8">
<div class="logo"></div> <div class="logo mr-4"></div>
<div class="app-logo-font">{{ title || defaultTitle }}</div> <div class="app-logo-font">{{ title || defaultTitle }}</div>
</div> </div>
<div class="sub-title" v-if="subTitle">{{ subTitle }}</div> <div class="sub-title text-center" v-if="subTitle">
<el-text type="info">{{ subTitle }}</el-text>
</div>
</div> </div>
<slot></slot> <el-card class="login-card">
<slot></slot>
</el-card>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -20,27 +24,28 @@ defineProps({
</script> </script>
<style lang="scss" scope> <style lang="scss" scope>
.login-form-container { .login-form-container {
width: 420px; width: 480px;
.login-title { .login-title {
margin-bottom: 30px; margin-bottom: 32px;
.title { .title {
font-size: 28px; font-size: 32px;
height: 60px;
.logo { .logo {
background-image: url('@/assets/logo.png'); background-image: url('@/assets/logo.svg');
background-size: 100% 100%; background-size: 100% 100%;
width: 48px; width: 45px;
height: 48px; height: 45px;
background-position: center -2px;
} }
} }
.sub-title { .sub-title {
text-align: center; font-size: 16px;
color: #101010;
font-size: 18px;
} }
} }
.login-card {
border-radius: 8px;
padding: 18px;
}
} }
</style> </style>

View File

@ -3,17 +3,17 @@
<div class="login-container w-full h-full"> <div class="login-container w-full h-full">
<el-row class="container w-full h-full"> <el-row class="container w-full h-full">
<el-col <el-col
:xs="8" :xs="0"
:sm="6" :sm="0"
:md="14" :md="10"
:lg="14" :lg="10"
:xl="14" :xl="10"
class="left-container" class="left-container"
v-if="screenWidth && screenWidth >= 990" v-if="screenWidth && screenWidth >= 990"
> >
<div class="login-image"></div> <div class="login-image"></div>
</el-col> </el-col>
<el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" class="right-container flex-center"> <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14" class="right-container flex-center">
<slot></slot> <slot></slot>
</el-col> </el-col>
</el-row> </el-row>

View File

@ -126,7 +126,9 @@ h4 {
.mb-16 { .mb-16 {
margin-bottom: calc(var(--app-base-px) * 2); margin-bottom: calc(var(--app-base-px) * 2);
} }
.mb-24 {
margin-bottom: calc(var(--app-base-px) * 3);
}
.ml-4 { .ml-4 {
margin-left: calc(var(--app-base-px) - 4px); margin-left: calc(var(--app-base-px) - 4px);
} }

View File

@ -28,6 +28,11 @@
--el-form-inline-content-width: 100%; --el-form-inline-content-width: 100%;
} }
.el-form-item {
margin-bottom: 24px;
}
.el-dialog { .el-dialog {
--el-dialog-title-font-size: 16px; --el-dialog-title-font-size: 16px;
.dialog-sub-title { .dialog-sub-title {

View File

@ -3,13 +3,13 @@
<el-result icon="success" title="🎉 数据集创建成功 🎉"> <el-result icon="success" title="🎉 数据集创建成功 🎉">
<template #sub-title> <template #sub-title>
<div class="mt-8"> <div class="mt-8">
<span class="bold">{{ data?.document_count || 0 }}</span> <span class="bold">{{ data?.documment_list.length || 0 }}</span>
<el-text type="info" class="ml-4">文档</el-text> <el-text type="info" class="ml-4">文档</el-text>
<el-divider direction="vertical" /> <el-divider direction="vertical" />
<span class="bold">{{ data?.document_list.length || 0 }}</span> <span class="bold">{{ paragraph_count || 0 }}</span>
<el-text type="info" class="ml-4">分段</el-text> <el-text type="info" class="ml-4">分段</el-text>
<el-divider direction="vertical" /> <el-divider direction="vertical" />
<span class="bold">{{ numberFormat(data?.char_length) || 0 }}</span> <span class="bold">{{ numberFormat(char_length) || 0 }}</span>
<el-text type="info" class="ml-4">字符</el-text> <el-text type="info" class="ml-4">字符</el-text>
</div> </div>
</template> </template>
@ -54,7 +54,8 @@
</el-scrollbar> </el-scrollbar>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useRouter, useRoute } from 'vue-router' import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { numberFormat } from '@/utils/utils' import { numberFormat } from '@/utils/utils'
import { filesize, getImgUrl } from '@/utils/utils' import { filesize, getImgUrl } from '@/utils/utils'
const props = defineProps({ const props = defineProps({
@ -64,6 +65,14 @@ const props = defineProps({
} }
}) })
const router = useRouter() const router = useRouter()
const paragraph_count = computed(
() => props.data?.document_list.reduce((sum: number, obj: any) => (sum += obj.paragraph_count), 0)
)
const char_length = computed(
() =>
props.data?.document_list.reduce((sum: number, obj: any) => (sum += obj.char_length), 0) || 0
)
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.result-success { .result-success {

View File

@ -1,7 +1,7 @@
<template> <template>
<login-layout> <login-layout>
<LoginContainer> <LoginContainer>
<h4 class="mb-16">忘记密码</h4> <h4 class="mb-24">忘记密码</h4>
<el-form <el-form
class="register-form" class="register-form"
ref="resetPasswordFormRef" ref="resetPasswordFormRef"
@ -15,9 +15,6 @@
v-model="CheckEmailForm.email" v-model="CheckEmailForm.email"
placeholder="请输入邮箱" placeholder="请输入邮箱"
> >
<template #prepend>
<el-button icon="UserFilled" />
</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="code"> <el-form-item prop="code">
@ -28,9 +25,6 @@
v-model="CheckEmailForm.code" v-model="CheckEmailForm.code"
placeholder="请输入验证码" placeholder="请输入验证码"
> >
<template #prepend>
<el-button icon="Key" />
</template>
</el-input> </el-input>
<el-button <el-button
size="large" size="large"
@ -42,16 +36,16 @@
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-button type="primary" class="login-submit-button w-full" @click="checkCode" <el-button type="primary" class="login-submit-button w-full mt-4" @click="checkCode"
>立即验证</el-button >立即验证</el-button
> >
<div class="operate-container mt-8"> <div class="operate-container mt-12">
<el-button <el-button
class="register" class="register"
@click="router.push('/login')" @click="router.push('/login')"
link link
type="primary" type="primary"
icon="DArrowLeft" icon="ArrowLeft"
> >
返回登录 返回登录
</el-button> </el-button>
@ -115,4 +109,4 @@ const sendEmail = () => {
</script> </script>
<style lang="scss" scope> <style lang="scss" scope>
@import '../index.scss'; @import '../index.scss';
</style> </style>

View File

@ -1,4 +1,3 @@
.login-submit-button { .login-submit-button {
margin-top: 12px;
height: 40px; height: 40px;
} }

View File

@ -1,20 +1,18 @@
<template> <template>
<login-layout v-loading="loading"> <login-layout v-loading="loading">
<LoginContainer subTitle="欢迎使用 MaxKB 管理平台"> <LoginContainer subTitle="欢迎使用 MaxKB 管理平台">
<h2 class="mb-24">普通登录</h2>
<el-form class="login-form" :rules="rules" :model="loginForm" ref="loginFormRef"> <el-form class="login-form" :rules="rules" :model="loginForm" ref="loginFormRef">
<el-form-item> <el-form-item prop="username">
<el-input <el-input
size="large" size="large"
class="input-item" class="input-item"
v-model="loginForm.username" v-model="loginForm.username"
placeholder="请输入用户名" placeholder="请输入用户名"
> >
<template #prepend>
<el-button icon="UserFilled" />
</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item prop="password">
<el-input <el-input
type="password" type="password"
size="large" size="large"
@ -23,13 +21,13 @@
placeholder="请输入密码" placeholder="请输入密码"
show-password show-password
> >
<template #prepend>
<el-button icon="Lock" />
</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="operate-container flex-between"> <el-button type="primary" class="login-submit-button mt-4 w-full" @click="login"
>登录</el-button
>
<div class="operate-container flex-between mt-12">
<el-button class="register" @click="router.push('/register')" link type="primary"> <el-button class="register" @click="router.push('/register')" link type="primary">
注册 注册
</el-button> </el-button>
@ -42,7 +40,6 @@
忘记密码 忘记密码
</el-button> </el-button>
</div> </div>
<el-button type="primary" class="login-submit-button w-full" @click="login">登录</el-button>
</LoginContainer> </LoginContainer>
</login-layout> </login-layout>
</template> </template>
@ -77,8 +74,8 @@ const rules = ref<FormRules<LoginRequest>>({
}, },
{ {
min: 6, min: 6,
max: 30, max: 20,
message: '长度在 6 到 30 个字符', message: '长度在 6 到 20 个字符',
trigger: 'blur' trigger: 'blur'
} }
] ]
@ -99,4 +96,4 @@ const login = () => {
</script> </script>
<style lang="scss" scope> <style lang="scss" scope>
@import './index.scss'; @import './index.scss';
</style> </style>

View File

@ -1,7 +1,7 @@
<template> <template>
<login-layout> <login-layout>
<LoginContainer> <LoginContainer>
<h4 class="mb-16">注册</h4> <h4 class="mb-24">用户注册</h4>
<el-form class="register-form" :model="registerForm" :rules="rules" ref="registerFormRef"> <el-form class="register-form" :model="registerForm" :rules="rules" ref="registerFormRef">
<el-form-item prop="username"> <el-form-item prop="username">
<el-input <el-input
@ -10,9 +10,6 @@
v-model="registerForm.username" v-model="registerForm.username"
placeholder="请输入用户名" placeholder="请输入用户名"
> >
<template #prepend>
<el-button :icon="UserFilled" />
</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
@ -24,9 +21,6 @@
placeholder="请输入密码" placeholder="请输入密码"
show-password show-password
> >
<template #prepend>
<el-button :icon="Lock" />
</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="repassword"> <el-form-item prop="repassword">
@ -38,9 +32,6 @@
placeholder="请输入确认密码" placeholder="请输入确认密码"
show-password show-password
> >
<template #prepend>
<el-button :icon="Lock" />
</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="email"> <el-form-item prop="email">
@ -50,9 +41,6 @@
v-model="registerForm.email" v-model="registerForm.email"
placeholder="请输入邮箱" placeholder="请输入邮箱"
> >
<template #prepend>
<el-button :icon="Message" />
</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="code"> <el-form-item prop="code">
@ -63,9 +51,6 @@
v-model="registerForm.code" v-model="registerForm.code"
placeholder="请输入验证码" placeholder="请输入验证码"
> >
<template #prepend>
<el-button :icon="Key" />
</template>
</el-input> </el-input>
<el-button <el-button
size="large" size="large"
@ -77,16 +62,16 @@
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-button type="primary" class="login-submit-button w-full" @click="register" <el-button type="primary" class="login-submit-button w-full mt-4" @click="register"
>注册</el-button >注册</el-button
> >
<div class="operate-container mt-8"> <div class="operate-container mt-12">
<el-button <el-button
class="register" class="register"
@click="router.push('/login')" @click="router.push('/login')"
link link
type="primary" type="primary"
icon="DArrowLeft" icon="ArrowLeft"
> >
返回登录 返回登录
</el-button> </el-button>
@ -128,8 +113,8 @@ const rules = ref<FormRules<RegisterRequest>>({
}, },
{ {
min: 6, min: 6,
max: 30, max: 20,
message: '长度在 6 到 30 个字符', message: '长度在 6 到 20 个字符',
trigger: 'blur' trigger: 'blur'
} }
], ],
@ -141,8 +126,8 @@ const rules = ref<FormRules<RegisterRequest>>({
}, },
{ {
min: 6, min: 6,
max: 30, max: 20,
message: '长度在 6 到 30 个字符', message: '长度在 6 到 20 个字符',
trigger: 'blur' trigger: 'blur'
}, },
{ {
@ -200,4 +185,4 @@ const sendEmail = () => {
</script> </script>
<style lang="scss" scope> <style lang="scss" scope>
@import '../index.scss'; @import '../index.scss';
</style> </style>

View File

@ -1,7 +1,7 @@
<template> <template>
<login-layout> <login-layout>
<LoginContainer> <LoginContainer>
<h4 class="mb-16">修改密码</h4> <h4 class="mb-24">修改密码</h4>
<el-form <el-form
class="reset-password-form" class="reset-password-form"
ref="resetPasswordFormRef" ref="resetPasswordFormRef"
@ -17,9 +17,6 @@
placeholder="请输入密码" placeholder="请输入密码"
show-password show-password
> >
<template #prepend>
<el-button icon="Lock" />
</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="re_password"> <el-form-item prop="re_password">
@ -31,22 +28,19 @@
placeholder="请输入确认密码" placeholder="请输入确认密码"
show-password show-password
> >
<template #prepend>
<el-button icon="Lock" />
</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-button type="primary" class="login-submit-button w-full" @click="resetPassword" <el-button type="primary" class="login-submit-button w-full mt-4" @click="resetPassword"
>确认修改</el-button >确认修改</el-button
> >
<div class="operate-container mt-8"> <div class="operate-container mt-12">
<el-button <el-button
class="register" class="register"
@click="router.push('/login')" @click="router.push('/login')"
link link
type="primary" type="primary"
icon="DArrowLeft" icon="ArrowLeft"
> >
返回登录 返回登录
</el-button> </el-button>
@ -91,8 +85,8 @@ const rules = ref<FormRules<ResetPasswordRequest>>({
}, },
{ {
min: 6, min: 6,
max: 30, max: 20,
message: '长度在 6 到 30 个字符', message: '长度在 6 到 20 个字符',
trigger: 'blur' trigger: 'blur'
} }
], ],
@ -104,8 +98,8 @@ const rules = ref<FormRules<ResetPasswordRequest>>({
}, },
{ {
min: 6, min: 6,
max: 30, max: 20,
message: '长度在 6 到 30 个字符', message: '长度在 6 到 20 个字符',
trigger: 'blur' trigger: 'blur'
}, },
{ {