Skip to content

Commit b1d9bc2

Browse files
sokach7csokach7c
committed
feat: 修复登录页面
1 parent d01615f commit b1d9bc2

File tree

22 files changed

+2032
-1920
lines changed

22 files changed

+2032
-1920
lines changed

‎internal/vite-config/src/plugins/inject-app-loading/default-loading.html

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -33,33 +33,33 @@
3333
}
3434

3535
.loader {
36-
width: fit-content;
37-
font-family: system-ui, sans-serif;
38-
font-size: 40px;
39-
font-weight: bold;
40-
color: #0000;
41-
text-transform: uppercase;
42-
background: linear-gradient(-60deg, #0000 45%, #000 0 55%, #0000 0) 0/300%
43-
100% no-repeat text;
44-
animation: l3 2s linear infinite;
45-
-webkit-text-stroke: 1px #000;
36+
position: relative;
37+
width: 50px;
38+
aspect-ratio: 1;
39+
border: 8px solid #0000;
40+
border-right-color: hsl(var(--primary) / 20%);
41+
border-radius: 50%;
42+
animation: l24 1s infinite linear;
4643
}
4744

48-
.dark .loader {
49-
color: #fff;
50-
-webkit-text-stroke: 1px #000;
51-
background: linear-gradient(-60deg, #fff 45%, #fff 0 55%, #fff 0) 0/300%
52-
100% no-repeat text;
53-
animation: l3 2s linear infinite;
45+
.loader::before,
46+
.loader::after {
47+
position: absolute;
48+
inset: -8px;
49+
content: '';
50+
border: inherit;
51+
border-radius: 50%;
52+
animation: inherit;
53+
animation-duration: 2s;
5454
}
5555

56-
.loader::before {
57-
content: 'Loading...';
56+
.loader::after {
57+
animation-duration: 4s;
5858
}
5959

60-
@keyframes l3 {
61-
0% {
62-
background-position: 100%;
60+
@keyframes l24 {
61+
100% {
62+
transform: rotate(1turn);
6363
}
6464
}
6565
</style>

‎packages/@core/ui-kit/layout-ui/src/vben-layout.vue

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const props = withDefaults(defineProps<Props>(), {
6666
});
6767
6868
const emit = defineEmits<{ sideMouseLeave: []; toggleSidebar: [] }>();
69-
const { b, be } = useNamespace('layout');
69+
const { b } = useNamespace('layout');
7070
const sidebarCollapse = defineModel<boolean>('sidebarCollapse', {
7171
default: false,
7272
});
@@ -139,6 +139,10 @@ const sidebarEnableState = computed(() => {
139139
return !isHeaderNav.value && sidebarEnable.value;
140140
});
141141
142+
const sidebarCollapseHeight = computed(() => {
143+
return props.sidebarFixedButton || props.sidebarCollapsedButton ? 42 : 0;
144+
});
145+
142146
/**
143147
* 侧边区域离顶部高度
144148
*/
@@ -495,6 +499,7 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
495499
:show-collapse-button="sidebarCollapsedButton"
496500
:show-fixed-button="sidebarFixedButton"
497501
:collapse-width="getSideCollapseWidth"
502+
:collapse-height="sidebarCollapseHeight"
498503
:dom-visible="!isMobile"
499504
:extra-width="sidebarExtraWidth"
500505
:fixed-extra="sidebarExpandOnHover"
@@ -531,17 +536,18 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
531536
ref="contentRef"
532537
:class="
533538
cn(
534-
b('content'),
539+
b('content-wrapper'),
535540
'flex flex-1 flex-col overflow-hidden transition-all duration-300 ease-in',
536541
)
537542
"
538543
>
539544
<div
540545
:class="[
541-
{
542-
'shadow-[0_16px_24px_hsl(var(--background))]': scrollY > 20,
543-
},
546+
// {
547+
// 'shadow-[0_16px_24px_hsl(var(--background))]': scrollY > 20,
548+
// },
544549
SCROLL_FIXED_CLASS,
550+
b('header-wrapper'),
545551
]"
546552
:style="headerWrapperStyle"
547553
class="overflow-hidden transition-all duration-200"
@@ -593,9 +599,7 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
593599
:padding-right="contentPaddingRight"
594600
:padding-top="contentPaddingTop"
595601
:style="contentStyle"
596-
:class="
597-
cn(be('content', 'container'), 'transition-[margin-top] duration-200')
598-
"
602+
:class="cn(b('content'), 'transition-[margin-top] duration-200')"
599603
>
600604
<slot name="content"></slot>
601605

‎packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ function handleScroll(event: Event) {
135135
}
136136
}
137137
138-
.scrollbar-top-shadow {
138+
/* .scrollbar-top-shadow {
139139
background: linear-gradient(
140140
to bottom,
141141
hsl(var(--scroll-shadow, var(--background))),
@@ -149,5 +149,5 @@ function handleScroll(event: Event) {
149149
hsl(var(--scroll-shadow, var(--background))),
150150
transparent
151151
);
152-
}
152+
} */
153153
</style>

‎packages/@core/ui-kit/shadcn-ui/src/ui/label/Label.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const delegatedProps = computed(() => {
2121
v-bind="delegatedProps"
2222
:class="
2323
cn(
24-
'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
24+
'text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
2525
props.class,
2626
)
2727
"

‎packages/effects/layouts/src/authentication/authentication.vue

Lines changed: 73 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
import type { ToolbarType } from './types';
33
44
import { preferences, usePreferences } from '@vben/preferences';
5+
import { cn } from '@vben/utils';
6+
7+
import { useNamespace } from '@vben-core/composables';
58
69
import { Copyright } from '../basic/copyright';
710
import AuthenticationFormView from './form.vue';
@@ -32,14 +35,16 @@ withDefaults(defineProps<Props>(), {
3235
clickLogo: () => {},
3336
});
3437
38+
const { b } = useNamespace('auth-layout');
3539
const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
3640
usePreferences();
3741
</script>
3842

3943
<template>
4044
<div
41-
:class="[isDark]"
42-
class="flex min-h-full flex-1 select-none overflow-x-hidden"
45+
:class="
46+
cn(b(), isDark, 'flex min-h-full flex-1 select-none overflow-x-hidden')
47+
"
4348
>
4449
<template v-if="toolbar">
4550
<slot name="toolbar">
@@ -49,7 +54,7 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
4954
<!-- 左侧认证面板 -->
5055
<AuthenticationFormView
5156
v-if="authPanelLeft"
52-
class="min-h-full w-2/5 flex-1"
57+
:class="cn(b('panel'), 'min-h-full w-2/5 flex-1')"
5358
transition-name="slide-left"
5459
>
5560
<template v-if="copyright" #copyright>
@@ -63,67 +68,94 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
6368
</AuthenticationFormView>
6469

6570
<!-- 头部 Logo 和应用名称 -->
66-
<div
67-
v-if="logo || appName"
68-
class="absolute left-0 top-0 z-10 flex flex-1"
69-
@click="clickLogo"
70-
>
71+
<slot name="logo">
7172
<div
72-
class="text-foreground lg:text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
73+
v-if="logo || appName"
74+
class="absolute left-0 top-0 z-10 flex flex-1"
75+
@click="clickLogo"
7376
>
74-
<img v-if="logo" :alt="appName" :src="logo" class="mr-2" width="42" />
75-
<p v-if="appName" class="m-0 text-xl font-medium">
76-
{{ appName }}
77-
</p>
77+
<div
78+
class="text-foreground lg:text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
79+
>
80+
<img v-if="logo" :alt="appName" :src="logo" class="mr-2" width="42" />
81+
<p v-if="appName" class="m-0 text-xl font-medium">
82+
{{ appName }}
83+
</p>
84+
</div>
7885
</div>
79-
</div>
86+
</slot>
8087

8188
<!-- 系统介绍 -->
89+
8290
<div v-if="!authPanelCenter" class="relative hidden w-0 flex-1 lg:block">
8391
<div
8492
class="bg-background-deep absolute inset-0 h-full w-full dark:bg-[#070709]"
8593
>
86-
<div class="login-background absolute left-0 top-0 size-full"></div>
87-
<div class="flex-col-center -enter-x mr-20 h-full">
88-
<template v-if="sloganImage">
89-
<img
94+
<div
95+
:class="
96+
cn(
97+
b('container'),
98+
'login-background absolute left-0 top-0 size-full',
99+
)
100+
"
101+
></div>
102+
<slot name="slogan">
103+
<div class="flex-col-center -enter-x mr-20 h-full">
104+
<template v-if="sloganImage">
105+
<img
106+
:alt="appName"
107+
:src="sloganImage"
108+
class="animate-float h-64 w-2/5"
109+
/>
110+
</template>
111+
<SloganIcon
112+
v-else
90113
:alt="appName"
91-
:src="sloganImage"
92114
class="animate-float h-64 w-2/5"
93115
/>
94-
</template>
95-
<SloganIcon v-else :alt="appName" class="animate-float h-64 w-2/5" />
96-
<div class="text-1xl text-foreground mt-6 font-sans lg:text-2xl">
97-
{{ pageTitle }}
98-
</div>
99-
<div class="dark:text-muted-foreground mt-2">
100-
{{ pageDescription }}
116+
<div class="text-1xl text-foreground mt-6 font-sans lg:text-2xl">
117+
{{ pageTitle }}
118+
</div>
119+
<div class="dark:text-muted-foreground mt-2">
120+
{{ pageDescription }}
121+
</div>
101122
</div>
102-
</div>
123+
</slot>
103124
</div>
104125
</div>
105126

106127
<!-- 中心认证面板 -->
107128
<div v-if="authPanelCenter" class="flex-center relative w-full">
108-
<div class="login-background absolute left-0 top-0 size-full"></div>
109-
<AuthenticationFormView
110-
class="md:bg-background shadow-primary/5 shadow-float w-full rounded-3xl pb-20 md:w-2/3 lg:w-1/2 xl:w-[36%]"
111-
>
112-
<template v-if="copyright" #copyright>
113-
<slot name="copyright">
114-
<Copyright
115-
v-if="preferences.copyright.enable"
116-
v-bind="preferences.copyright"
117-
/>
118-
</slot>
119-
</template>
120-
</AuthenticationFormView>
129+
<div
130+
:class="
131+
cn(b('container'), 'login-background absolute left-0 top-0 size-full')
132+
"
133+
></div>
134+
<div :class="cn(b('panel-wrapper'), 'flex-center absolute flex w-full')">
135+
<AuthenticationFormView
136+
:class="
137+
cn(
138+
b('panel'),
139+
'md:bg-background shadow-primary/5 shadow-float w-full rounded-3xl pb-20 md:w-2/3 lg:w-1/2 xl:w-[36%]',
140+
)
141+
"
142+
>
143+
<template v-if="copyright" #copyright>
144+
<slot name="copyright">
145+
<Copyright
146+
v-if="preferences.copyright.enable"
147+
v-bind="preferences.copyright"
148+
/>
149+
</slot>
150+
</template>
151+
</AuthenticationFormView>
152+
</div>
121153
</div>
122154

123155
<!-- 右侧认证面板 -->
124156
<AuthenticationFormView
125157
v-if="authPanelRight"
126-
class="min-h-full w-[34%] flex-1"
158+
:class="cn(b('panel'), 'min-h-full w-[34%] flex-1')"
127159
>
128160
<template v-if="copyright" #copyright>
129161
<slot name="copyright">

‎packages/effects/layouts/src/authentication/form.vue

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,23 @@
11
<script setup lang="ts">
2+
import { cn } from '@vben/utils';
3+
4+
import { useNamespace } from '@vben-core/composables';
5+
26
defineOptions({
37
name: 'AuthenticationFormView',
48
});
9+
10+
const { be } = useNamespace('auth-layout-panel');
511
</script>
612

713
<template>
814
<div
9-
class="flex-col-center dark:bg-background-deep bg-background relative px-6 py-10 lg:flex-initial lg:px-8"
15+
:class="
16+
cn(
17+
be('form'),
18+
'flex-col-center dark:bg-background-deep bg-background relative px-6 py-10 lg:flex-initial lg:px-8',
19+
)
20+
"
1021
>
1122
<slot></slot>
1223
<!-- Router View with Transition and KeepAlive -->

‎playground/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
"#/*": "./src/*"
3131
},
3232
"dependencies": {
33+
"@sokach/theme-01": "workspace:*",
3334
"@tanstack/vue-query": "catalog:",
3435
"@vben-core/menu-ui": "workspace:*",
3536
"@vben/access": "workspace:*",

‎playground/public/login-bg.jpg

242 KB
Loading

‎playground/src/bootstrap.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ import { router } from '#/router';
1717
import { initComponentAdapter } from './adapter/component';
1818
import App from './app.vue';
1919

20+
// import '@sokach/theme-01/styles';
21+
// import '@sokach/theme-01/antd';
22+
2023
async function bootstrap(namespace: string) {
2124
// 初始化组件适配器
2225
await initComponentAdapter();

‎playground/src/layouts/auth.vue

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,40 @@ const clickLogo = () => {};
1818
:page-description="$t('authentication.pageDesc')"
1919
:page-title="$t('authentication.pageTitle')"
2020
:click-logo="clickLogo"
21+
form-width="w-[40%]"
22+
:toolbar="false"
23+
:copyright="false"
2124
>
25+
<template #slogan>
26+
<div class="auth-layout-bg">ss</div>
27+
</template>
2228
<!-- 自定义工具栏 -->
2329
<!-- <template #toolbar></template> -->
2430
</AuthPageLayout>
2531
</template>
32+
33+
<style lang="scss">
34+
$namespace: 'vben';
35+
36+
.#{$namespace}-auth-layout {
37+
&-panel-wrapper {
38+
@apply w-4/5 justify-start rounded-3xl;
39+
40+
background-image: url('/login-bg.jpg');
41+
background-position: center;
42+
background-size: cover;
43+
}
44+
45+
&-panel {
46+
@apply w-[22%];
47+
}
48+
}
49+
50+
.auth-layout-bg {
51+
@apply absolute h-full w-full;
52+
53+
background-image: url('/login-bg.jpg');
54+
background-position: center;
55+
background-size: cover;
56+
}
57+
</style>

0 commit comments

Comments
 (0)