Skip to content

Commit fcb15b0

Browse files
lichunnlichunn
authored
fix：Login module UI optimization (opentiny#1769)
1 parent cd231d8 commit fcb15b0

5 files changed

Lines changed: 98 additions & 46 deletions

File tree

‎packages/design-core/src/login/ForgotPassword.vue‎

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,14 +52,17 @@
5252
</tiny-tooltip>
5353
</tiny-form-item>
5454
<tiny-form-item>
55-
<tiny-button type="primary" @click="handleForgot"> 提交</tiny-button>
55+
<tiny-button :disabled="!isReady" type="primary" @click="handleForgot"> 提交</tiny-button>
5656
</tiny-form-item>
5757
</tiny-form>
58+
<div class="forgot-bottom">
59+
<div class="to-login" @click="toLogin">去登录</div>
60+
</div>
5861
</div>
5962
</template>
6063

6164
<script lang="ts">
62-
import { reactive, watch } from 'vue'
65+
import { reactive, watch, computed } from 'vue'
6366
import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyTooltip } from '@opentiny/vue'
6467
import useLogin from './js/useLogin'
6568
import { getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
@@ -87,6 +90,17 @@ export default {
8790
rules: [...useLogin().passwordRules]
8891
})
8992
93+
const isReady = computed(() => {
94+
return (
95+
state.forgotData.username &&
96+
state.forgotData.password &&
97+
state.forgotData.key &&
98+
state.forgotData.confirmPassword &&
99+
!state.pwManualShow &&
100+
state.forgotData.confirmPassword === state.forgotData.password
101+
)
102+
})
103+
90104
const handleConfirmPwChange = () => {
91105
if (state.forgotData.confirmPassword !== state.forgotData.password) {
92106
state.confirmManualShow = true
@@ -131,6 +145,10 @@ export default {
131145
}
132146
}
133147
148+
const toLogin = () => {
149+
emit('changeStatus', useLogin().LOGIN)
150+
}
151+
134152
watch(
135153
() => state.forgotData.password,
136154
() => {
@@ -139,7 +157,9 @@ export default {
139157
)
140158
return {
141159
state,
142-
handleForgot
160+
isReady,
161+
handleForgot,
162+
toLogin
143163
}
144164
}
145165
}
@@ -150,7 +170,7 @@ export default {
150170
color: #191919;
151171
font-size: 24px;
152172
font-weight: 600;
153-
margin-bottom: 28px;
173+
margin-bottom: 36px;
154174
}
155175
156176
.pw-tips {
@@ -170,6 +190,16 @@ export default {
170190
}
171191
}
172192
193+
.forgot-bottom {
194+
display: flex;
195+
justify-content: center;
196+
font-size: 14px;
197+
.to-login {
198+
cursor: pointer;
199+
color: #1476ff;
200+
}
201+
}
202+
173203
:deep(.tiny-form-item__content) {
174204
margin-left: 0 !important;
175205
}

‎packages/design-core/src/login/Index.vue‎

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -61,12 +61,11 @@ export default {
6161
height: 100vh;
6262
background: linear-gradient(to top left, #e7f0ff, #fff);
6363
display: flex;
64-
padding: 10%;
64+
padding: 10% 10% 0 10%;
6565
.login-left {
6666
flex: 2;
6767
.login-img {
6868
max-height: 500px;
69-
min-height: 298px;
7069
width: 100%;
7170
height: 100%;
7271
background-image: url(../../assets/login-bg.svg);
@@ -77,21 +76,46 @@ export default {
7776
}
7877
7978
.login-right {
80-
flex: 1;
79+
flex: 1.2;
80+
margin-top: 50px;
8181
margin-left: 80px;
8282
.login-form {
8383
box-sizing: border-box;
8484
max-width: 440px;
8585
min-width: 340px;
86-
max-height: 500px;
87-
min-height: 298px;
8886
width: 100%;
89-
height: 100%;
9087
background: #fff;
9188
border-radius: 12px;
9289
box-shadow: 0 8px 40px 0 #dce6f6;
93-
padding: 48px 60px;
90+
padding: 52px 60px 80px 60px;
91+
max-height: 100%;
92+
overflow-y: auto;
9493
}
9594
}
95+
96+
:deep(.tiny-form-item__content) {
97+
margin-left: 0 !important;
98+
}
99+
:deep(.tiny-button.tiny-button.tiny-button.tiny-button) {
100+
width: 100%;
101+
background: #191919;
102+
height: 32px;
103+
margin-top: 20px;
104+
font-size: 14px;
105+
}
106+
:deep(.tiny-button.tiny-button.tiny-button.tiny-button.tiny-button--primary) {
107+
border: none;
108+
}
109+
:deep(.tiny-input.tiny-input .tiny-input__inner.tiny-input__inner) {
110+
height: 32px;
111+
font-size: 14px;
112+
}
113+
:deep(.tiny-input.tiny-input .tiny-input__inner.tiny-input__inner)::placeholder {
114+
font-size: 14px;
115+
}
116+
117+
:deep(.tiny-form.tiny-form.tiny-form .tiny-form-item) {
118+
margin-bottom: 20px;
119+
}
96120
}
97121
</style>

‎packages/design-core/src/login/Login.vue‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
></tiny-input>
1515
</tiny-form-item>
1616
<tiny-form-item>
17-
<tiny-button type="primary" @click="handleLogin"> 登录 </tiny-button>
17+
<tiny-button :disabled="!isReady" type="primary" @click="handleLogin"> 登录 </tiny-button>
1818
</tiny-form-item>
1919
</tiny-form>
2020
<div class="login-bottom">
@@ -29,7 +29,7 @@
2929
</template>
3030

3131
<script lang="ts">
32-
import { reactive } from 'vue'
32+
import { reactive, computed } from 'vue'
3333
import { TinyForm, TinyFormItem, TinyInput, TinyButton } from '@opentiny/vue'
3434
import { getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
3535
import useLogin from './js/useLogin'
@@ -51,6 +51,10 @@ export default {
5151
}
5252
})
5353
54+
const isReady = computed(() => {
55+
return state.loginData.username && state.loginData.password
56+
})
57+
5458
const handleLogin = () => {
5559
getMetaApi(META_SERVICE.Http)
5660
.post('/platform-center/api/user/login', {
@@ -78,8 +82,10 @@ export default {
7882
const toForgot = () => {
7983
emit('changeStatus', useLogin().FORGOT)
8084
}
85+
8186
return {
8287
state,
88+
isReady,
8389
handleLogin,
8490
toRegister,
8591
toForgot
@@ -93,15 +99,14 @@ export default {
9399
color: #191919;
94100
font-size: 24px;
95101
font-weight: 600;
96-
margin-bottom: 28px;
102+
margin-bottom: 36px;
97103
}
98104
99105
.login-bottom {
100-
margin-top: 16px;
101106
display: flex;
102107
justify-content: space-between;
103108
color: #1476ff;
104-
margin-bottom: 32px;
109+
font-size: 14px;
105110
div {
106111
cursor: pointer;
107112
}
@@ -140,11 +145,4 @@ export default {
140145
cursor: pointer;
141146
}
142147
}
143-
:deep(.tiny-form-item__content) {
144-
margin-left: 0 !important;
145-
}
146-
:deep(.tiny-button.tiny-button.tiny-button.tiny-button) {
147-
width: 100%;
148-
background: #595959;
149-
}
150148
</style>

‎packages/design-core/src/login/Register.vue‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
</tiny-tooltip>
5050
</tiny-form-item>
5151
<tiny-form-item>
52-
<tiny-button type="primary" @click="handleRegister"> 注册</tiny-button>
52+
<tiny-button :disabled="!isReady" type="primary" @click="handleRegister"> 注册</tiny-button>
5353
</tiny-form-item>
5454
</tiny-form>
5555
<div class="register-bottom">
@@ -60,7 +60,7 @@
6060
</template>
6161

6262
<script lang="ts">
63-
import { reactive, watch } from 'vue'
63+
import { reactive, watch, computed } from 'vue'
6464
import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyTooltip } from '@opentiny/vue'
6565
import useLogin from './js/useLogin'
6666
import { getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
@@ -86,6 +86,16 @@ export default {
8686
rules: [...useLogin().passwordRules]
8787
})
8888
89+
const isReady = computed(() => {
90+
return (
91+
state.registerData.username &&
92+
state.registerData.password &&
93+
state.registerData.confirmPassword &&
94+
!state.pwManualShow &&
95+
state.registerData.confirmPassword === state.registerData.password
96+
)
97+
})
98+
8999
const handleConfirmPwChange = () => {
90100
if (state.registerData.confirmPassword !== state.registerData.password) {
91101
state.confirmManualShow = true
@@ -144,6 +154,7 @@ export default {
144154
145155
return {
146156
state,
157+
isReady,
147158
handleRegister,
148159
handlePwChange,
149160
toLogin
@@ -157,7 +168,7 @@ export default {
157168
color: #191919;
158169
font-size: 24px;
159170
font-weight: 600;
160-
margin-bottom: 28px;
171+
margin-bottom: 36px;
161172
}
162173
163174
.pw-tips {
@@ -178,11 +189,10 @@ export default {
178189
}
179190
180191
.register-bottom {
181-
margin-top: 16px;
182192
display: flex;
183193
justify-content: center;
184194
color: #808080;
185-
margin-bottom: 32px;
195+
font-size: 14px;
186196
.to-login {
187197
cursor: pointer;
188198
color: #1476ff;

‎packages/design-core/src/login/RegisterSuccess.vue‎

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
import { reactive, computed } from 'vue'
2020
import { TinyCheckbox, TinyButton } from '@opentiny/vue'
2121
import useLogin from './js/useLogin'
22+
import { useModal } from '@opentiny/tiny-engine-meta-register'
2223
2324
export default {
2425
components: {
@@ -37,14 +38,13 @@ export default {
3738
emit('changeStatus', useLogin().LOGIN)
3839
}
3940
40-
const copy = () => {
41-
const textarea = document.createElement('textarea')
42-
43-
textarea.value = `${publicKey.value}`
44-
document.body.appendChild(textarea)
45-
textarea.select()
46-
document.execCommand('copy')
47-
document.body.removeChild(textarea)
41+
const copy = async () => {
42+
try {
43+
await navigator.clipboard.writeText(publicKey.value)
44+
useModal().message({ message: '复制成功', status: 'success' })
45+
} catch (err) {
46+
useModal().message({ message: '复制失败', status: 'error' })
47+
}
4848
}
4949
5050
return {
@@ -94,14 +94,4 @@ export default {
9494
margin-bottom: 20px;
9595
}
9696
}
97-
98-
:deep(.tiny-button.tiny-button.tiny-button.tiny-button) {
99-
margin-top: 20px;
100-
background: #fff;
101-
color: #191919;
102-
border: 1px solid #c9c9c9;
103-
}
104-
:deep(.tiny-button.tiny-button.tiny-button.tiny-button.tiny-button--primary:not(.is-disabled)):hover {
105-
background: #fff;
106-
}
10797
</style>

0 commit comments

Comments
 (0)