You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@seatunnel.apache.org by ty...@apache.org on 2023/03/01 08:52:39 UTC
[incubator-seatunnel-web] branch main updated: [Feature][UI] Perf login (#32)
This is an automated email from the ASF dual-hosted git repository.
tyrantlucifer pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-seatunnel-web.git
The following commit(s) were added to refs/heads/main by this push:
new f9e9304d [Feature][UI] Perf login (#32)
f9e9304d is described below
commit f9e9304df83bea6cd274f5476153e5fb70476473
Author: songjianet <17...@qq.com>
AuthorDate: Wed Mar 1 16:52:33 2023 +0800
[Feature][UI] Perf login (#32)
* [Perf][UI] Optimize landing page style.
* [Perf][UI] Optimize landing page style.
---
seatunnel-ui/src/views/login/index.tsx | 109 +++++++++++++++++++--------------
1 file changed, 63 insertions(+), 46 deletions(-)
diff --git a/seatunnel-ui/src/views/login/index.tsx b/seatunnel-ui/src/views/login/index.tsx
index 3d665735..59e0b80b 100644
--- a/seatunnel-ui/src/views/login/index.tsx
+++ b/seatunnel-ui/src/views/login/index.tsx
@@ -16,7 +16,16 @@
*/
import { defineComponent, toRefs, withKeys, getCurrentInstance } from 'vue'
-import { NSpace, NForm, NFormItem, NInput, NButton, useMessage } from 'naive-ui'
+import {
+ NSpace,
+ NLayout,
+ NLayoutContent,
+ NForm,
+ NFormItem,
+ NInput,
+ NButton,
+ useMessage
+} from 'naive-ui'
import { useI18n } from 'vue-i18n'
import { useForm } from './use-form'
@@ -36,52 +45,60 @@ const Login = defineComponent({
},
render() {
return (
- <NSpace
- justify='center'
- align='center'
- class='w-full h-screen bg-blue-400'
- >
- <div class='w-96 bg-white px-10 py-8'>
- <h2 class='text-2xl mb-6'>{this.t('login.login_to_sea_tunnel')}</h2>
- <NForm rules={this.rules} ref='loginFormRef'>
- <NFormItem
- label={this.t('login.username')}
- label-style={{ color: 'black' }}
- path='userName'
- >
- <NInput
- allowInput={this.trim}
- type='text'
- v-model={[this.loginForm.username, 'value']}
- placeholder={this.t('login.username_tips')}
- autofocus
- onKeydown={withKeys(this.handleLogin, ['enter'])}
- />
- </NFormItem>
- <NFormItem
- label={this.t('login.password')}
- label-style={{ color: 'black' }}
- path='userPassword'
- >
- <NInput
- allowInput={this.trim}
- type='password'
- v-model={[this.loginForm.password, 'value']}
- placeholder={this.t('login.password_tips')}
- onKeydown={withKeys(this.handleLogin, ['enter'])}
- />
- </NFormItem>
- </NForm>
- <NButton
- type='info'
- disabled={!this.loginForm.username || !this.loginForm.password}
- style={{ width: '100%' }}
- onClick={this.handleLogin}
+ <NLayout>
+ <NLayoutContent>
+ <NSpace
+ justify='center'
+ align='center'
+ class='w-full h-screen bg-gray-100'
>
- {this.t('login.login')}
- </NButton>
- </div>
- </NSpace>
+ <div class='w-96 bg-white px-16 py-20 border border-gray-100 rounded-2xl'>
+ <h2 class='text-2xl mb-16 font-bold'>
+ {this.t('login.login_to_sea_tunnel')}
+ </h2>
+ <NForm rules={this.rules} ref='loginFormRef' class='mb-4'>
+ <NFormItem
+ label={this.t('login.username')}
+ label-style={{ color: 'black' }}
+ path='userName'
+ >
+ <NInput
+ clearable
+ allowInput={this.trim}
+ type='text'
+ v-model={[this.loginForm.username, 'value']}
+ placeholder={this.t('login.username_tips')}
+ autofocus
+ onKeydown={withKeys(this.handleLogin, ['enter'])}
+ />
+ </NFormItem>
+ <NFormItem
+ label={this.t('login.password')}
+ label-style={{ color: 'black' }}
+ path='userPassword'
+ >
+ <NInput
+ clearable
+ allowInput={this.trim}
+ type='password'
+ v-model={[this.loginForm.password, 'value']}
+ placeholder={this.t('login.password_tips')}
+ onKeydown={withKeys(this.handleLogin, ['enter'])}
+ />
+ </NFormItem>
+ </NForm>
+ <NButton
+ type='info'
+ disabled={!this.loginForm.username || !this.loginForm.password}
+ style={{ width: '100%' }}
+ onClick={this.handleLogin}
+ >
+ {this.t('login.login')}
+ </NButton>
+ </div>
+ </NSpace>
+ </NLayoutContent>
+ </NLayout>
)
}
})