zhuchaowe/maxkb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 登录

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
ui/src/components/login-container/index.vue
View File

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

12
ui/src/components/login-layout/index.vue
View File

@ -3,17 +3,17 @@
<div class="login-container w-full h-full">
<el-row class="container w-full h-full">
<el-col
:xs="8"
:sm="6"
:md="14"
:lg="14"
:xl="14"
:xs="0"
:sm="0"
:md="10"
:lg="10"
:xl="10"
class="left-container"
v-if="screenWidth && screenWidth >= 990"
>
<div class="login-image"></div>
</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>
</el-col>
</el-row>

4
ui/src/styles/app.scss
View File

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

5
ui/src/styles/element-plus.scss
View File

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

17
ui/src/views/dataset/step/ResultSuccess.vue
View File

@ -3,13 +3,13 @@
<el-result icon="success" title="🎉 数据集创建成功 🎉">
<template #sub-title>
<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-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-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>
</div>
</template>
@ -54,7 +54,8 @@
</el-scrollbar>
</template>
<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 { filesize, getImgUrl } from '@/utils/utils'
const props = defineProps({
@ -64,6 +65,14 @@ const props = defineProps({
}
})
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>
<style scoped lang="scss">
.result-success {

16
ui/src/views/login/forgot-password/index.vue
View File

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

1
ui/src/views/login/index.scss
View File

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

23
ui/src/views/login/index.vue
View File

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

33
ui/src/views/login/register/index.vue
View File

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

22
ui/src/views/login/reset-password/index.vue
View File

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