You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampark.apache.org by kr...@apache.org on 2022/10/27 03:23:14 UTC
[incubator-streampark] branch dev updated: [Improve] login page style Improvement (#1914)
This is an automated email from the ASF dual-hosted git repository.
kriszu pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampark.git
The following commit(s) were added to refs/heads/dev by this push:
new b783094f6 [Improve] login page style Improvement (#1914)
b783094f6 is described below
commit b783094f6bb88fc3e192190ffce94299750672ae
Author: benjobs <be...@apache.org>
AuthorDate: Thu Oct 27 11:23:08 2022 +0800
[Improve] login page style Improvement (#1914)
---
.../src/assets/images/logo.png | Bin 0 -> 56632 bytes
.../src/assets/images/sign-bg.jpg | Bin 0 -> 339710 bytes
.../src/views/base/login/Login.vue | 220 ++++++++++-----------
.../src/views/base/login/LoginForm.vue | 38 +---
.../src/views/base/login/LoginFormTitle.vue | 9 +-
5 files changed, 119 insertions(+), 148 deletions(-)
diff --git a/streampark-console/streampark-console-newui/src/assets/images/logo.png b/streampark-console/streampark-console-newui/src/assets/images/logo.png
new file mode 100644
index 000000000..21e01edea
Binary files /dev/null and b/streampark-console/streampark-console-newui/src/assets/images/logo.png differ
diff --git a/streampark-console/streampark-console-newui/src/assets/images/sign-bg.jpg b/streampark-console/streampark-console-newui/src/assets/images/sign-bg.jpg
new file mode 100644
index 000000000..f590256ce
Binary files /dev/null and b/streampark-console/streampark-console-newui/src/assets/images/sign-bg.jpg differ
diff --git a/streampark-console/streampark-console-newui/src/views/base/login/Login.vue b/streampark-console/streampark-console-newui/src/views/base/login/Login.vue
index 4297352d8..dfcde4316 100644
--- a/streampark-console/streampark-console-newui/src/views/base/login/Login.vue
+++ b/streampark-console/streampark-console-newui/src/views/base/login/Login.vue
@@ -16,15 +16,13 @@
-->
<template>
<div :class="prefixCls" class="relative w-full h-full px-4">
- <div class="container relative h-full py-2">
+ <div class="relative h-full">
<div class="flex h-full">
<div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0">
<div
:class="`${prefixCls}-form`"
- class="relative w-auto px-8 bg-[rgba(0,0,0,0.5)] py-10 mx-auto my-auto rounded-md shadow-md enter-y"
- >
- <LoginForm />
- <ForgetPasswordForm />
+ class="relative w-auto px-12 bg-[rgba(0,0,0,0.4)] py-5 mx-auto my-auto shadow-md enter-y">
+ <LoginForm/>
</div>
</div>
</div>
@@ -32,141 +30,137 @@
</div>
</template>
<script lang="ts" setup>
- import LoginForm from './LoginForm.vue';
- import ForgetPasswordForm from './ForgetPasswordForm.vue';
- import { useDesign } from '/@/hooks/web/useDesign';
-
- defineProps({
- sessionTimeout: {
- type: Boolean,
- },
- });
-
- // const globSetting = useGlobSetting();
- const { prefixCls } = useDesign('login');
- // const title = computed(() => globSetting?.title ?? '');
+import LoginForm from './LoginForm.vue';
+import ForgetPasswordForm from './ForgetPasswordForm.vue';
+import {useDesign} from '/@/hooks/web/useDesign';
+
+defineProps({
+ sessionTimeout: {
+ type: Boolean,
+ },
+});
+
+// const globSetting = useGlobSetting();
+const {prefixCls} = useDesign('login');
+// const title = computed(() => globSetting?.title ?? '');
</script>
<style lang="less">
- @prefix-cls: ~'@{namespace}-login';
- @logo-prefix-cls: ~'@{namespace}-app-logo';
- @countdown-prefix-cls: ~'@{namespace}-countdown-input';
- @dark-bg: #293146;
+@prefix-cls: ~'@{namespace}-login';
+@logo-prefix-cls: ~'@{namespace}-app-logo';
+@countdown-prefix-cls: ~'@{namespace}-countdown-input';
+@active-color: 255, 255, 255;
+
+input.fix-auto-fill, .fix-auto-fill input {
+ box-shadow: inherit !important;
+}
+
+.@{prefix-cls} {
+ min-height: 100%;
+ overflow: hidden;
+ background: url('/@/assets/images/sign-bg.jpg') no-repeat 50%;
+ background-size: cover;
+
+ .ant-input-affix-wrapper {
+ border: 1px solid rgba(@active-color, 0.55);
+ border-radius: 1px;
+ color: rgba(@active-color, 0.65);
+ margin-top: 10px;
+ background-color: rgba(@active-color, 0.05) !important;
+ }
- html[data-theme='dark'] {
- .@{prefix-cls} {
- background-color: @dark-bg;
+ .signin-title {
+ padding-top: 20px;
+ font-size: 16px;
+ color: rgba(255, 255, 255, 0.65);
+ margin-top: 12px;
+ margin-bottom: 20px;
+ }
- .ant-input-affix-wrapper {
- background-color: #232a3b !important;
- }
- .ant-input,
- .ant-input-password {
- background-color: #232a3b;
- }
+ .logo {
+ padding-top: 20px;
+ height: 130px;
+ margin: auto;
+ }
- .ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
- border: 1px solid #4a5569;
- }
+ .signin-form {
+ .ant-input {
+ padding-top: 3px;
+ padding-bottom: 3px;
- .app-iconify {
- color: #fff;
+ .ant-input-affix-wrapper:hover, .ant-input:not(.ant-input-disabled) {
+ border-color: rgba(@active-color, .95);
}
}
- input.fix-auto-fill,
- .fix-auto-fill input {
- box-shadow: inherit !important;
- }
- }
-
- .@{prefix-cls} {
- min-height: 100%;
- overflow: hidden;
- background: url('/@/assets/images/logo-bg.jpg') no-repeat 50%;
- background-size: cover;
- &::after {
- content: '';
- width: 100%;
- position: absolute;
- left: 0;
- top: 0;
- bottom: -20px;
- background: inherit;
- filter: blur(4px);
- z-index: 2;
- }
-
- .@{logo-prefix-cls} {
- position: absolute;
- top: 12px;
- height: 30px;
-
- &__title {
- font-size: 16px;
- color: #fff;
+ .signin-btn {
+ .ant-btn {
+ margin-top: 30px;
+ height: 40px;
+ background: rgba(@active-color, .40);
+ border: unset;
}
+ }
- img {
- width: 180px;
+ .text-left {
+ .ant-btn {
+ padding: 0px;
}
}
- .container {
- .@{logo-prefix-cls} {
- display: flex;
- width: 60%;
- height: 80px;
+ }
- &__title {
- font-size: 24px;
- color: #fff;
- }
+ &::after {
+ content: '';
+ width: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: -20px;
+ background: inherit;
+ z-index: 2;
+ filter: blur(1px);
+ }
- img {
- width: 180px;
- }
- }
- }
- &-sign-in-way {
- .anticon {
- font-size: 22px;
- color: #888;
- cursor: pointer;
+ &-sign-in-way {
+ .anticon {
+ font-size: 22px;
+ color: #888;
+ cursor: pointer;
- &:hover {
- color: @primary-color;
- }
+ &:hover {
+ color: @primary-color;
}
}
+ }
- input:not([type='checkbox']) {
- min-width: 360px;
-
- @media (max-width: @screen-xl) {
- min-width: 320px;
- }
-
- @media (max-width: @screen-lg) {
- min-width: 260px;
- }
+ input {
+ min-width: 300px;
- @media (max-width: @screen-md) {
- min-width: 240px;
- }
+ @media (max-width: @screen-xl) {
+ min-width: 260px;
+ }
- @media (max-width: @screen-sm) {
- min-width: 160px;
- }
+ @media (max-width: @screen-lg) {
+ min-width: 200px;
}
- .@{countdown-prefix-cls} input {
- min-width: unset;
+ @media (max-width: @screen-md) {
+ min-width: 180px;
}
- .ant-divider-inner-text {
- font-size: 12px;
- color: @text-color-secondary;
+ @media (max-width: @screen-sm) {
+ min-width: 100px;
}
}
+
+ .@{countdown-prefix-cls} input {
+ min-width: unset;
+ }
+
+ .ant-divider-inner-text {
+ font-size: 12px;
+ color: @text-color-secondary;
+ }
+}
</style>
diff --git a/streampark-console/streampark-console-newui/src/views/base/login/LoginForm.vue b/streampark-console/streampark-console-newui/src/views/base/login/LoginForm.vue
index 881eda7c5..98f36c91c 100644
--- a/streampark-console/streampark-console-newui/src/views/base/login/LoginForm.vue
+++ b/streampark-console/streampark-console-newui/src/views/base/login/LoginForm.vue
@@ -17,7 +17,7 @@
<template>
<LoginFormTitle v-show="getShow" class="enter-x mb-40px text-light-50" />
<Form
- class="p-4 enter-x"
+ class="p-4 enter-x signin-form"
:model="formData"
:rules="getFormRules"
ref="formRef"
@@ -28,8 +28,7 @@
<Input
v-model:value="formData.account"
:placeholder="t('sys.login.userName')"
- class="fix-auto-fill"
- >
+ class="fix-auto-fill">
<template #prefix>
<user-outlined type="user" />
</template>
@@ -39,33 +38,13 @@
<InputPassword
visibilityToggle
v-model:value="formData.password"
- :placeholder="t('sys.login.password')"
- >
+ :placeholder="t('sys.login.password')">
<template #prefix>
<lock-outlined type="user" />
</template>
</InputPassword>
</FormItem>
-
- <ARow class="enter-x">
- <ACol :span="12">
- <FormItem>
- <!-- No logic, you need to deal with it yourself -->
- <Checkbox v-model:checked="rememberMe" size="small" class="!text-light-500">
- {{ t('sys.login.rememberMe') }}
- </Checkbox>
- </FormItem>
- </ACol>
- <!-- No logic, you need to deal with it yourself -->
- <!-- <ACol :span="12">
- <FormItem :style="{ 'text-align': 'right' }">
- <Button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">
- {{ t('sys.login.forgetPassword') }}
- </Button>
- </FormItem>
- </ACol> -->
- </ARow>
- <FormItem class="enter-x">
+ <FormItem class="enter-x signin-btn">
<Button type="primary" block @click="handleLogin" :loading="loading">
{{ loginText.buttonText }}
</Button>
@@ -80,7 +59,7 @@
import { reactive, ref, unref, computed } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
- import { Checkbox, Form, Input, Row, Col, Button } from 'ant-design-vue';
+ import { Form, Input, Button } from 'ant-design-vue';
import LoginFormTitle from './LoginFormTitle.vue';
import { useI18n } from '/@/hooks/web/useI18n';
@@ -101,9 +80,6 @@
import { fetchUserTeam } from '/@/api/system/member';
import { LoginResultModel } from '/@/api/system/model/userModel';
import { Result } from '/#/axios';
-
- const ACol = Col;
- const ARow = Row;
const FormItem = Form.Item;
const InputPassword = Input.Password;
@@ -121,7 +97,6 @@
const loading = ref(false);
const userId = ref('');
const modelVisible = ref(false);
- const rememberMe = ref(false);
const loginType = ref(LoginTypeEnum.LOCAL);
const formData = reactive<LoginForm>({
account: '',
@@ -145,7 +120,7 @@
try {
const loginFormValue = await validForm();
if (!loginFormValue) return;
- handleLoginAction(loginFormValue);
+ await handleLoginAction(loginFormValue);
} catch (error) {
console.error(error);
}
@@ -182,7 +157,6 @@
userId.value = data as unknown as string;
const teamList = await fetchUserTeam({ userId: userId.value });
userStore.setTeamList(teamList.map((i) => ({ label: i.teamName, value: i.id })));
-
modelVisible.value = true;
return;
} else {
diff --git a/streampark-console/streampark-console-newui/src/views/base/login/LoginFormTitle.vue b/streampark-console/streampark-console-newui/src/views/base/login/LoginFormTitle.vue
index 05284e4b8..e7c2dd61e 100644
--- a/streampark-console/streampark-console-newui/src/views/base/login/LoginFormTitle.vue
+++ b/streampark-console/streampark-console-newui/src/views/base/login/LoginFormTitle.vue
@@ -15,9 +15,12 @@
limitations under the License.
-->
<template>
- <h2 class="mb-6 text-2xl font-bold text-center xl:text-3xl enter-x">
- {{ getFormTitle }}
- </h2>
+ <div class="text-center enter-x">
+ <img class="logo" src="/@/assets/images/logo.png">
+ <div class="signin-title">
+ StreamPark ── Make stream processing easier!
+ </div>
+ </div>
</template>
<script lang="ts" setup>
import { computed, unref } from 'vue';