feat: 登录
This commit is contained in:
parent
5488804ea8
commit
833e966190
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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 {
|
||||||
|
|||||||
@ -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 {
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -1,4 +1,3 @@
|
|||||||
.login-submit-button {
|
.login-submit-button {
|
||||||
margin-top: 12px;
|
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user