EasyFlow-Tech-Dev/EasyFlow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 登录界面重做

Browse Source
This commit is contained in:
陈子默
2026-03-11 20:28:42 +08:00
parent 99f792f6de
commit 0a8a7c8046
13 changed files with 726 additions and 383 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
easyflow-ui-admin/app/src/views/_core/authentication/login.vue
View File

@@ -1,14 +1,11 @@
<script lang="ts" setup>
import type { EasyFlowFormSchema } from '@easyflow/common-ui';
import type {EasyFlowFormSchema} from '@easyflow/common-ui';
import {AuthenticationLogin, z} from '@easyflow/common-ui';
import { computed, onMounted } from 'vue';
import { AuthenticationLogin, z } from '@easyflow/common-ui';
import { useAppConfig } from '@easyflow/hooks';
import { $t } from '@easyflow/locales';
import { preferences } from '@easyflow/preferences';
import { useAuthStore } from '#/store';
import {computed, onMounted} from 'vue';
import {useAppConfig} from '@easyflow/hooks';
import {$t} from '@easyflow/locales';
import {useAuthStore} from '#/store';
defineOptions({ name: 'Login' });
onMounted(() => {});
@@ -17,8 +14,6 @@ const authStore = useAuthStore();
const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
const title = computed(() => preferences.auth.welcomeBack);
const subTitle = computed(() => preferences.auth.loginSubtitle);
const formSchema = computed((): EasyFlowFormSchema[] => {
return [
{
@@ -91,23 +86,38 @@ function onSubmit(values: any) {
</script>
<template>
<div>
<div class="login-view">
<AuthenticationLogin
:form-schema="formSchema"
:loading="authStore.loginLoading"
:title="title"
:sub-title="subTitle"
:show-header="false"
@submit="onSubmit"
/>
<div id="captcha-box" class="captcha-div"></div>
>
<template #overlay>
<div id="captcha-box" class="captcha-anchor"></div>
</template>
</AuthenticationLogin>
</div>
</template>
<style scoped>
.captcha-div {
.login-view {
position: relative;
}
.captcha-anchor {
inset: 0;
pointer-events: none;
position: absolute;
top: 30vh;
left: 21vh;
z-index: 30;
}
.captcha-anchor:empty {
display: none;
}
.captcha-anchor :deep(*) {
pointer-events: auto;
}
.platform-icon {

6
easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/auth-title.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="auth-title mb-9 sm:mx-auto sm:w-full sm:max-w-md">
<div class="auth-title mb-8 w-full">
<h2
class="text-foreground mb-2.5 text-3xl font-semibold leading-[1.22] tracking-[-0.015em] lg:text-[2.15rem]"
class="text-foreground mb-2.5 text-[1.9rem] font-semibold leading-[1.12] tracking-[-0.03em] sm:text-[2.1rem]"
>
<slot></slot>
</h2>
<p class="text-muted-foreground text-[0.95rem] leading-7 lg:text-base">
<p class="text-muted-foreground max-w-[34rem] text-[0.97rem] leading-7 sm:text-[1rem]">
<slot name="desc"></slot>
</p>
</div>

31
easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/code-login.vue
View File

@@ -1,15 +1,14 @@
<script setup lang="ts">
import type { Recordable } from '@easyflow/types';
import type {Recordable} from '@easyflow/types';
import type { EasyFlowFormSchema } from '@easyflow-core/form-ui';
import type {EasyFlowFormSchema} from '@easyflow-core/form-ui';
import {useEasyFlowForm} from '@easyflow-core/form-ui';
import { computed, reactive } from 'vue';
import { useRouter } from 'vue-router';
import {computed, reactive} from 'vue';
import {useRouter} from 'vue-router';
import { $t } from '@easyflow/locales';
import { useEasyFlowForm } from '@easyflow-core/form-ui';
import { EasyFlowButton } from '@easyflow-core/shadcn-ui';
import {$t} from '@easyflow/locales';
import {EasyFlowButton} from '@easyflow-core/shadcn-ui';
import Title from './auth-title.vue';
@@ -89,10 +88,10 @@ defineExpose({
</script>
<template>
<div>
<div class="auth-code-login">
<Title>
<slot name="title">
{{ title || $t('authentication.welcomeBack') }} 📲
{{ title || $t('authentication.welcomeBack') }}
</slot>
<template #desc>
<span class="text-muted-foreground">
@@ -102,13 +101,15 @@ defineExpose({
</span>
</template>
</Title>
<div class="auth-form-group">
<Form />
</div>
<EasyFlowButton
:class="{
'cursor-wait': loading,
}"
:loading="loading"
class="w-full"
class="mt-6 h-11 w-full rounded-xl text-base font-medium"
@click="handleSubmit"
>
<slot name="submitButtonText">
@@ -117,7 +118,7 @@ defineExpose({
</EasyFlowButton>
<EasyFlowButton
v-if="showBack"
class="mt-4 w-full"
class="mt-3 h-11 w-full rounded-xl"
variant="outline"
@click="goToLogin()"
>
@@ -125,3 +126,9 @@ defineExpose({
</EasyFlowButton>
</div>
</template>
<style scoped>
.auth-form-group :deep(.easyflow-form-ui + .easyflow-form-ui) {
margin-top: 0.95rem;
}
</style>

33
easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/forget-password.vue
View File

@@ -1,13 +1,12 @@
<script setup lang="ts">
import type { EasyFlowFormSchema } from '@easyflow-core/form-ui';
import type {EasyFlowFormSchema} from '@easyflow-core/form-ui';
import {useEasyFlowForm} from '@easyflow-core/form-ui';
import { computed, reactive } from 'vue';
import { useRouter } from 'vue-router';
import {computed, reactive} from 'vue';
import {useRouter} from 'vue-router';
import { $t } from '@easyflow/locales';
import { useEasyFlowForm } from '@easyflow-core/form-ui';
import { EasyFlowButton } from '@easyflow-core/shadcn-ui';
import {$t} from '@easyflow/locales';
import {EasyFlowButton} from '@easyflow-core/shadcn-ui';
import Title from './auth-title.vue';
@@ -82,10 +81,10 @@ defineExpose({
</script>
<template>
<div>
<div class="auth-forget-password">
<Title>
<slot name="title">
{{ title || $t('authentication.forgetPassword') }} 🤦🏻‍♂️
{{ title || $t('authentication.forgetPassword') }}
</slot>
<template #desc>
<slot name="subTitle">
@@ -93,7 +92,9 @@ defineExpose({
</slot>
</template>
</Title>
<div class="auth-form-group">
<Form />
</div>
<div>
<EasyFlowButton
@@ -101,16 +102,26 @@ defineExpose({
'cursor-wait': loading,
}"
aria-label="submit"
class="mt-2 w-full"
class="mt-6 h-11 w-full rounded-xl text-base font-medium"
@click="handleSubmit"
>
<slot name="submitButtonText">
{{ submitButtonText || $t('authentication.sendResetLink') }}
</slot>
</EasyFlowButton>
<EasyFlowButton class="mt-4 w-full" variant="outline" @click="goToLogin()">
<EasyFlowButton
class="mt-3 h-11 w-full rounded-xl"
variant="outline"
@click="goToLogin()"
>
{{ $t('common.back') }}
</EasyFlowButton>
</div>
</div>
</template>
<style scoped>
.auth-form-group :deep(.easyflow-form-ui + .easyflow-form-ui) {
margin-top: 0.95rem;
}
</style>

166
easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/login.vue
View File

@@ -1,17 +1,16 @@
<script setup lang="ts">
import type { Recordable } from '@easyflow/types';
import type {Recordable} from '@easyflow/types';
import type { EasyFlowFormSchema } from '@easyflow-core/form-ui';
import type {EasyFlowFormSchema} from '@easyflow-core/form-ui';
import {useEasyFlowForm} from '@easyflow-core/form-ui';
import type { AuthenticationProps } from './types';
import type {AuthenticationProps} from './types';
import { computed, onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import {computed, onMounted, reactive, ref} from 'vue';
import {useRouter} from 'vue-router';
import { $t } from '@easyflow/locales';
import { useEasyFlowForm } from '@easyflow-core/form-ui';
import { EasyFlowButton, EasyFlowCheckbox } from '@easyflow-core/shadcn-ui';
import {$t} from '@easyflow/locales';
import {EasyFlowButton, EasyFlowCheckbox} from '@easyflow-core/shadcn-ui';
import Title from './auth-title.vue';
import ThirdPartyLogin from './third-party-login.vue';
@@ -33,6 +32,7 @@ const props = withDefaults(defineProps<Props>(), {
registerPath: '/auth/register',
showCodeLogin: false,
showForgetPassword: false,
showHeader: true,
showQrcodeLogin: false,
showRegister: false,
showRememberMe: false,
@@ -58,11 +58,9 @@ const [Form, formApi] = useEasyFlowForm(
);
const router = useRouter();
const REMEMBER_ME_KEY = `REMEMBER_ME_USERNAME_${location.hostname}`;
const localUsername = localStorage.getItem(REMEMBER_ME_KEY) || '';
const rememberMe = ref(!!localUsername);
const REMEMBER_ME_KEY = `REMEMBER_ME_ACCOUNT_${location.hostname}`;
const localAccount = localStorage.getItem(REMEMBER_ME_KEY) || '';
const rememberMe = ref(!!localAccount);
async function handleSubmit() {
const { valid } = await formApi.validate();
@@ -70,7 +68,7 @@ async function handleSubmit() {
if (valid) {
localStorage.setItem(
REMEMBER_ME_KEY,
rememberMe.value ? values?.username : '',
rememberMe.value ? (values?.account ?? '') : '',
);
emit('submit', values);
}
@@ -81,8 +79,8 @@ function handleGo(path: string) {
}
onMounted(() => {
if (localUsername) {
formApi.setFieldValue('username', localUsername);
if (localAccount) {
formApi.setFieldValue('account', localAccount);
}
});
@@ -93,12 +91,13 @@ defineExpose({
<template>
<div class="auth-login" @keydown.enter.prevent="handleSubmit">
<template v-if="showHeader">
<slot name="title">
<Title>
<slot name="title">
{{ title || $t('authentication.welcomeBack') }}
</slot>
<template #desc>
<template v-if="subTitle || $t('authentication.loginSubtitle')" #desc>
<span class="text-muted-foreground">
<slot name="subTitle">
{{ subTitle || $t('authentication.loginSubtitle') }}
@@ -107,51 +106,54 @@ defineExpose({
</template>
</Title>
</slot>
</template>
<div class="auth-form-group">
<Form />
</div>
<div
v-if="showRememberMe || showForgetPassword"
class="auth-login-options mb-7 mt-2 flex justify-between"
class="auth-login-options mt-1 flex items-center justify-between gap-3"
>
<div class="flex-center">
<EasyFlowCheckbox
v-if="showRememberMe"
v-model="rememberMe"
class="auth-checkbox"
name="rememberMe"
>
{{ $t('authentication.rememberMe') }}
</EasyFlowCheckbox>
</div>
<span
<button
v-if="showForgetPassword"
class="easyflow-link text-sm font-normal"
class="auth-inline-action"
type="button"
@click="handleGo(forgetPasswordPath)"
>
{{ $t('authentication.forgetPassword') }}
</span>
</button>
</div>
<EasyFlowButton
:class="{
'cursor-wait': loading,
}"
:class="{ 'cursor-wait': loading }"
:loading="loading"
aria-label="login"
class="auth-submit-button h-11 w-full rounded-xl text-base font-medium"
class="auth-submit-button auth-brand-submit mt-6 h-11 w-full rounded-xl text-base font-medium"
@click="handleSubmit"
>
{{ submitButtonText || $t('common.login') }}
</EasyFlowButton>
<slot name="overlay"></slot>
<div
v-if="showCodeLogin || showQrcodeLogin"
class="auth-login-quick mb-2 mt-5 flex items-center justify-between"
class="auth-alt-modes mt-5 grid gap-3 sm:grid-cols-2"
>
<EasyFlowButton
v-if="showCodeLogin"
class="w-1/2"
class="auth-secondary-button h-11 w-full rounded-xl"
variant="outline"
@click="handleGo(codeLoginPath)"
>
@@ -159,7 +161,7 @@ defineExpose({
</EasyFlowButton>
<EasyFlowButton
v-if="showQrcodeLogin"
class="ml-4 w-1/2"
class="auth-secondary-button h-11 w-full rounded-xl"
variant="outline"
@click="handleGo(qrCodeLoginPath)"
>
@@ -172,21 +174,113 @@ defineExpose({
</slot>
<slot name="to-register">
<div v-if="showRegister" class="mt-4 text-center text-sm">
<div v-if="showRegister" class="auth-footer-copy mt-5 text-center text-sm">
{{ $t('authentication.accountTip') }}
<span
class="easyflow-link text-sm font-normal"
<button
class="auth-inline-action"
type="button"
@click="handleGo(registerPath)"
>
{{ $t('authentication.createAccount') }}
</span>
</button>
</div>
</slot>
</div>
</template>
<style scoped>
.auth-login :deep(.easyflow-form-ui + .easyflow-form-ui) {
.auth-login {
position: relative;
}
.auth-form-group :deep(.easyflow-form-ui + .easyflow-form-ui) {
margin-top: 0.95rem;
}
.auth-form-group :deep(.easyflow-form-ui .text-destructive) {
font-size: 0.84rem;
margin-top: 0.45rem;
}
.auth-login-options {
min-height: 1.5rem;
}
.auth-checkbox {
color: hsl(var(--text-muted));
font-size: 0.92rem;
}
.auth-inline-action {
color: hsl(var(--nav-item-active-foreground));
font-size: 0.92rem;
font-weight: 500;
transition: opacity 0.18s ease;
}
.auth-inline-action:hover {
opacity: 0.76;
}
.auth-secondary-button {
background: hsl(var(--surface-elevated));
border-color: hsl(var(--line-subtle));
}
.auth-brand-submit {
background:
linear-gradient(
120deg,
rgb(11 111 211) 0%,
rgb(22 159 200) 38%,
rgb(38 199 193) 62%,
rgb(11 111 211) 100%
);
background-size: 200% 200%;
border: none;
box-shadow:
0 22px 34px -22px rgb(11 111 211 / 0.56),
inset 0 1px 0 rgb(255 255 255 / 0.24);
color: rgb(255 255 255);
transition:
transform 180ms ease,
box-shadow 180ms ease,
filter 180ms ease;
animation: auth-brand-gradient 6s ease infinite;
}
.auth-brand-submit:hover {
box-shadow:
0 24px 38px -22px rgb(11 111 211 / 0.62),
inset 0 1px 0 rgb(255 255 255 / 0.28);
filter: saturate(1.04);
transform: translateY(-1px);
}
.auth-brand-submit:active {
transform: translateY(0);
}
.auth-brand-submit:focus-visible {
outline: 2px solid rgb(78 176 255 / 0.8);
outline-offset: 2px;
}
.auth-footer-copy {
color: hsl(var(--text-muted));
}
@keyframes auth-brand-gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>

53
easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/qrcode-login.vue
View File

@@ -1,12 +1,12 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import {ref} from 'vue';
import {useRouter} from 'vue-router';
import { $t } from '@easyflow/locales';
import {$t} from '@easyflow/locales';
import { EasyFlowButton } from '@easyflow-core/shadcn-ui';
import {EasyFlowButton} from '@easyflow-core/shadcn-ui';
import { useQRCode } from '@vueuse/integrations/useQRCode';
import {useQRCode} from '@vueuse/integrations/useQRCode';
import Title from './auth-title.vue';
@@ -70,10 +70,10 @@ function goToLogin() {
</script>
<template>
<div>
<div class="auth-qrcode-login">
<Title>
<slot name="title">
{{ title || $t('authentication.welcomeBack') }} 📱
{{ title || $t('authentication.welcomeBack') }}
</slot>
<template #desc>
<span class="text-muted-foreground">
@@ -84,9 +84,11 @@ function goToLogin() {
</template>
</Title>
<div class="flex-col-center mt-6">
<img :src="qrcode" alt="qrcode" class="w-1/2" />
<p class="text-muted-foreground mt-4 text-sm">
<div class="auth-qrcode-panel mt-6">
<div class="auth-qrcode-frame">
<img :src="qrcode" alt="qrcode" class="auth-qrcode-image" />
</div>
<p class="text-muted-foreground mt-4 text-sm leading-6">
<slot name="description">
{{ description || $t('authentication.qrcodePrompt') }}
</slot>
@@ -95,7 +97,7 @@ function goToLogin() {
<EasyFlowButton
v-if="showBack"
class="mt-4 w-full"
class="mt-6 h-11 w-full rounded-xl"
variant="outline"
@click="goToLogin()"
>
@@ -103,3 +105,32 @@ function goToLogin() {
</EasyFlowButton>
</div>
</template>
<style scoped>
.auth-qrcode-panel {
text-align: center;
}
.auth-qrcode-frame {
align-items: center;
background: linear-gradient(180deg, rgb(255 255 255 / 0.92), rgb(244 249 255 / 0.96));
border: 1px solid hsl(var(--line-subtle));
border-radius: 1.5rem;
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6);
display: flex;
justify-content: center;
margin: 0 auto;
max-width: 17rem;
padding: 1rem;
}
.auth-qrcode-image {
aspect-ratio: 1;
border-radius: 1rem;
width: min(100%, 13rem);
}
.dark .auth-qrcode-frame {
background: linear-gradient(180deg, rgb(14 22 36 / 0.92), rgb(11 19 31 / 0.96));
}
</style>

46
easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/register.vue
View File

@@ -1,15 +1,14 @@
<script setup lang="ts">
import type { Recordable } from '@easyflow/types';
import type {Recordable} from '@easyflow/types';
import type { EasyFlowFormSchema } from '@easyflow-core/form-ui';
import type {EasyFlowFormSchema} from '@easyflow-core/form-ui';
import {useEasyFlowForm} from '@easyflow-core/form-ui';
import { computed, reactive } from 'vue';
import { useRouter } from 'vue-router';
import {computed, reactive} from 'vue';
import {useRouter} from 'vue-router';
import { $t } from '@easyflow/locales';
import { useEasyFlowForm } from '@easyflow-core/form-ui';
import { EasyFlowButton } from '@easyflow-core/shadcn-ui';
import {$t} from '@easyflow/locales';
import {EasyFlowButton} from '@easyflow-core/shadcn-ui';
import Title from './auth-title.vue';
@@ -85,10 +84,10 @@ defineExpose({
</script>
<template>
<div>
<div class="auth-register">
<Title>
<slot name="title">
{{ title || $t('authentication.createAnAccount') }} 🚀
{{ title || $t('authentication.createAnAccount') }}
</slot>
<template #desc>
<slot name="subTitle">
@@ -96,7 +95,9 @@ defineExpose({
</slot>
</template>
</Title>
<div class="auth-form-group">
<Form />
</div>
<EasyFlowButton
:class="{
@@ -104,18 +105,35 @@ defineExpose({
}"
:loading="loading"
aria-label="register"
class="mt-2 w-full"
class="mt-6 h-11 w-full rounded-xl text-base font-medium"
@click="handleSubmit"
>
<slot name="submitButtonText">
{{ submitButtonText || $t('authentication.signUp') }}
</slot>
</EasyFlowButton>
<div class="mt-4 text-center text-sm">
<div class="mt-5 text-center text-sm text-[hsl(var(--text-muted))]">
{{ $t('authentication.alreadyHaveAccount') }}
<span class="easyflow-link text-sm font-normal" @click="goToLogin()">
<button class="auth-inline-action" type="button" @click="goToLogin()">
{{ $t('authentication.goToLogin') }}
</span>
</button>
</div>
</div>
</template>
<style scoped>
.auth-form-group :deep(.easyflow-form-ui + .easyflow-form-ui) {
margin-top: 0.95rem;
}
.auth-inline-action {
color: hsl(var(--nav-item-active-foreground));
font-size: 0.92rem;
font-weight: 500;
transition: opacity 0.18s ease;
}
.auth-inline-action:hover {
opacity: 0.76;
}
</style>

5
easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/types.ts
View File

@@ -52,6 +52,11 @@ interface AuthenticationProps {
*/
showThirdPartyLogin?: boolean;
/**
* @zh_CN 是否显示登录头部
*/
showHeader?: boolean;
/**
* @zh_CN 登录框子标题
*/

442
easyflow-ui-admin/packages/effects/layouts/src/authentication/authentication.vue
View File

@@ -1,13 +1,14 @@
<script setup lang="ts">
import type { ToolbarType } from './types';
import type {ToolbarType} from './types';
import { computed, ref, watch } from 'vue';
import {computed, onBeforeUnmount, onMounted, ref} from 'vue';
import {useRoute} from 'vue-router';
import { preferences, usePreferences } from '@easyflow/preferences';
import {$t} from '@easyflow/locales';
import {preferences, usePreferences} from '@easyflow/preferences';
import { Copyright } from '../basic/copyright';
import {Copyright} from '../basic/copyright';
import AuthenticationFormView from './form.vue';
import SloganIcon from './icons/slogan.vue';
import Toolbar from './toolbar.vue';
interface Props {
@@ -16,7 +17,6 @@ interface Props {
logoDark?: string;
pageTitle?: string;
pageDescription?: string;
sloganImage?: string;
toolbar?: boolean;
copyright?: boolean;
toolbarList?: ToolbarType[];
@@ -30,20 +30,14 @@ const props = withDefaults(defineProps<Props>(), {
logoDark: '',
pageDescription: '',
pageTitle: '',
sloganImage: '',
toolbar: true,
toolbarList: () => ['color', 'language', 'layout', 'theme'],
toolbarList: () => ['language', 'theme'],
clickLogo: () => {},
});
const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
usePreferences();
const { isDark } = usePreferences();
const route = useRoute();
const isSloganLoadError = ref(false);
/**
* @zh_CN 根据主题选择合适的 logo 图标
*/
const logoSrc = computed(() => {
if (isDark.value && props.logoDark) {
return props.logoDark;
@@ -51,109 +45,112 @@ const logoSrc = computed(() => {
return props.logo;
});
watch(
() => props.sloganImage,
() => {
isSloganLoadError.value = false;
},
);
const activeCapabilityIndex = ref(0);
let capabilityTimer: null | number = null;
const currentHour = ref(new Date().getHours());
function handleSloganError() {
isSloganLoadError.value = true;
}
const isLoginRoute = computed(() => route.path === '/auth/login');
const capabilityLabels = computed(() => [
$t('authentication.capabilityModel'),
$t('authentication.capabilityAgent'),
$t('authentication.capabilityWorkflow'),
$t('authentication.capabilityKnowledge'),
]);
const stageGreeting = computed(() => {
if (currentHour.value >= 5 && currentHour.value < 11) {
return $t('authentication.greetingMorning');
}
if (currentHour.value >= 11 && currentHour.value < 14) {
return $t('authentication.greetingNoon');
}
if (currentHour.value >= 14 && currentHour.value < 18) {
return $t('authentication.greetingAfternoon');
}
return $t('authentication.greetingEvening');
});
onMounted(() => {
capabilityTimer = window.setInterval(() => {
activeCapabilityIndex.value =
(activeCapabilityIndex.value + 1) % capabilityLabels.value.length;
}, 2400);
});
onBeforeUnmount(() => {
if (capabilityTimer) {
clearInterval(capabilityTimer);
}
});
</script>
<template>
<div
:class="[isDark ? 'dark' : '']"
class="auth-shell relative flex min-h-full flex-1 select-none overflow-x-hidden"
class="auth-shell relative flex min-h-full flex-1 select-none overflow-hidden"
>
<div class="auth-shell-grid absolute inset-0"></div>
<div class="auth-shell-noise absolute inset-0"></div>
<div class="auth-glow auth-glow-primary"></div>
<div class="auth-glow auth-glow-secondary"></div>
<div class="auth-glow auth-glow-tertiary"></div>
<template v-if="toolbar">
<slot name="toolbar">
<Toolbar :toolbar-list="toolbarList" />
</slot>
</template>
<AuthenticationFormView
v-if="authPanelLeft"
class="auth-panel-form min-h-full w-full flex-1 lg:w-[42%] lg:flex-initial"
data-side="left"
>
<template v-if="copyright" #copyright>
<slot name="copyright">
<Copyright
v-if="preferences.copyright.enable"
v-bind="preferences.copyright"
/>
</slot>
</template>
</AuthenticationFormView>
<slot name="logo">
<div
v-if="logoSrc || appName"
class="absolute left-0 top-0 z-20 flex flex-1"
@click="clickLogo"
>
<div
class="text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
>
<div class="auth-brand-chip text-foreground ml-4 mt-4 flex items-center sm:ml-6 sm:mt-6">
<img
v-if="logoSrc"
:key="logoSrc"
:alt="appName"
:src="logoSrc"
class="mr-2"
width="120"
class="mr-2.5"
width="112"
/>
<span v-else class="auth-brand-name">{{ appName }}</span>
</div>
</div>
</slot>
<main class="auth-stage relative z-10 flex min-h-full w-full items-center justify-center px-6 pb-10 pt-28 sm:px-10 sm:pt-32">
<div class="auth-stage-inner mx-auto flex w-full max-w-[1080px] flex-col items-center">
<div
v-if="!authPanelCenter"
class="auth-hero relative hidden min-h-full w-0 flex-1 overflow-hidden lg:block"
v-if="isLoginRoute"
class="auth-stage-copy w-full max-w-[780px] text-center"
>
<div class="auth-hero-base absolute inset-0"></div>
<div class="auth-orb auth-orb-left"></div>
<div class="auth-orb auth-orb-right"></div>
<div class="auth-orb auth-orb-bottom"></div>
<div
:key="authPanelLeft ? 'left' : authPanelRight ? 'right' : 'center'"
class="auth-hero-content flex-col-center relative h-full px-12"
:class="{
'enter-x': authPanelLeft,
'-enter-x': authPanelRight,
}"
<h1 class="auth-page-title text-foreground">
{{ stageGreeting }}
</h1>
<div class="auth-stage-switcher text-muted-foreground" aria-label="同一入口能力切换">
<span class="auth-stage-switcher-label">在同一入口管理</span>
<span class="auth-stage-pill" aria-live="polite">
<Transition mode="out-in" name="auth-pill">
<span
:key="capabilityLabels[activeCapabilityIndex]"
class="auth-stage-pill-text"
>
<div class="auth-hero-visual">
<template v-if="sloganImage && !isSloganLoadError">
<img
:alt="appName"
:src="sloganImage"
class="auth-hero-image"
@error="handleSloganError"
/>
</template>
<SloganIcon v-else :alt="appName" class="auth-hero-fallback" />
</div>
<div class="auth-page-title text-foreground">
{{ pageTitle }}
</div>
<div class="auth-page-desc text-muted-foreground">
{{ pageDescription }}
</div>
{{ capabilityLabels[activeCapabilityIndex] }}
</span>
</Transition>
</span>
</div>
</div>
<div v-if="authPanelCenter" class="auth-center relative w-full">
<div class="auth-hero-base absolute inset-0"></div>
<div class="auth-orb auth-orb-left"></div>
<div class="auth-orb auth-orb-right"></div>
<AuthenticationFormView
class="auth-center-card shadow-float w-full rounded-3xl pb-20 md:w-2/3 lg:w-1/2 xl:w-[36%]"
:class="[
'auth-window-host w-full',
isLoginRoute ? 'max-w-[25rem] sm:max-w-[26rem]' : 'max-w-[31rem]',
isLoginRoute ? 'mt-8 sm:mt-10' : 'mt-0 sm:mt-4',
]"
data-side="bottom"
>
<template v-if="copyright" #copyright>
@@ -166,157 +163,220 @@ function handleSloganError() {
</template>
</AuthenticationFormView>
</div>
<AuthenticationFormView
v-if="authPanelRight"
class="auth-panel-form min-h-full w-full flex-1 lg:w-[42%] lg:flex-initial"
data-side="right"
>
<template v-if="copyright" #copyright>
<slot name="copyright">
<Copyright
v-if="preferences.copyright.enable"
v-bind="preferences.copyright"
/>
</slot>
</template>
</AuthenticationFormView>
</main>
</div>
</template>
<style scoped>
.auth-shell {
background: linear-gradient(180deg, #f8fbff 0%, #f1f6ff 100%);
}
.auth-panel-form {
backdrop-filter: blur(6px);
}
.auth-hero {
border-inline: 1px solid rgb(29 108 255 / 6%);
}
.auth-hero-base {
background:
radial-gradient(circle at 22% 18%, rgb(56 131 255 / 14%) 0, transparent 42%),
radial-gradient(circle at 82% 16%, rgb(88 179 255 / 12%) 0, transparent 35%),
radial-gradient(circle at 70% 86%, rgb(112 146 255 / 10%) 0, transparent 40%),
linear-gradient(145deg, #eef5ff 0%, #f4f8ff 45%, #eef4ff 100%);
radial-gradient(circle at top, rgb(255 255 255 / 78%), rgb(255 255 255 / 0) 36%),
linear-gradient(180deg, #f7faff 0%, #eef4fd 55%, #edf3fb 100%);
}
.auth-hero-content {
z-index: 2;
.auth-shell-grid {
background-image:
linear-gradient(rgb(13 74 160 / 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgb(13 74 160 / 0.06) 1px, transparent 1px);
background-position: center center;
background-size: 120px 120px;
mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.28), transparent 75%);
opacity: 0.42;
}
.auth-hero-visual {
width: min(860px, 90%);
max-width: 920px;
.auth-shell-noise {
background-image:
radial-gradient(circle at 20% 20%, rgb(255 255 255 / 0.35) 0 0.9px, transparent 1.2px),
radial-gradient(circle at 80% 30%, rgb(255 255 255 / 0.22) 0 1px, transparent 1.3px),
radial-gradient(circle at 40% 70%, rgb(11 111 211 / 0.08) 0 1px, transparent 1.4px);
background-size: 180px 180px, 240px 240px, 200px 200px;
mix-blend-mode: soft-light;
opacity: 0.65;
}
.auth-hero-image {
width: 100%;
height: auto;
object-fit: contain;
filter: drop-shadow(0 24px 48px rgb(24 78 173 / 10%));
.auth-glow {
border-radius: 9999px;
pointer-events: none;
position: absolute;
}
.auth-hero-fallback {
width: 100%;
height: auto;
.auth-glow-primary {
background: radial-gradient(circle, rgb(87 150 255 / 0.24) 0%, rgb(87 150 255 / 0) 68%);
height: 26rem;
left: 50%;
top: 4rem;
transform: translateX(-50%);
width: 26rem;
}
.auth-glow-secondary {
background: radial-gradient(circle, rgb(36 189 211 / 0.18) 0%, rgb(36 189 211 / 0) 72%);
height: 20rem;
left: 14%;
top: 46%;
width: 20rem;
}
.auth-glow-tertiary {
background: radial-gradient(circle, rgb(66 116 255 / 0.14) 0%, rgb(66 116 255 / 0) 74%);
bottom: 8%;
height: 22rem;
right: 10%;
width: 22rem;
}
.auth-brand-chip {
backdrop-filter: blur(12px);
background: rgb(255 255 255 / 0.72);
border: 1px solid rgb(255 255 255 / 0.84);
border-radius: 9999px;
box-shadow: 0 20px 44px -32px rgb(11 59 132 / 0.26);
min-height: 3rem;
padding: 0.45rem 0.95rem;
}
.auth-brand-name {
font-size: 0.95rem;
font-weight: 600;
letter-spacing: -0.01em;
}
.auth-page-title {
margin-top: 1.2rem;
font-size: clamp(1.9rem, 2.5vw, 2.45rem);
font-size: clamp(2.1rem, 4vw, 3.7rem);
font-weight: 700;
letter-spacing: -0.01em;
text-align: center;
letter-spacing: -0.04em;
line-height: 1.05;
margin: 0 auto;
max-width: 16ch;
}
.auth-page-desc {
margin-top: 0.9rem;
max-width: 42rem;
font-size: clamp(0.96rem, 1.1vw, 1.12rem);
line-height: 1.7;
text-align: center;
}
.auth-center {
.auth-stage-switcher {
align-items: center;
display: flex;
display: inline-flex;
flex-wrap: wrap;
gap: 0.7rem;
justify-content: center;
overflow: hidden;
margin-top: 1rem;
}
.auth-center-card {
position: relative;
z-index: 2;
.auth-stage-switcher-label {
font-size: 0.98rem;
line-height: 1.6;
}
.auth-orb {
.auth-stage-pill {
align-items: center;
backdrop-filter: blur(10px);
background: rgb(255 255 255 / 0.74);
border: 1px solid rgb(255 255 255 / 0.9);
border-radius: 9999px;
position: absolute;
box-shadow: 0 18px 34px -28px rgb(14 61 132 / 0.3);
color: hsl(var(--nav-item-active-foreground));
display: inline-flex;
font-size: 0.95rem;
font-weight: 600;
justify-content: center;
min-width: 6.5rem;
padding: 0.55rem 1rem;
}
.auth-stage-pill-text {
display: inline-flex;
justify-content: center;
min-width: 4em;
}
.auth-pill-enter-active,
.auth-pill-leave-active {
transition:
opacity 180ms ease,
transform 180ms ease;
}
.auth-pill-enter-from {
opacity: 0;
transform: translateY(8px);
}
.auth-pill-leave-to {
opacity: 0;
transform: translateY(-8px);
}
.auth-window-host {
position: relative;
z-index: 1;
}
.auth-orb-left {
background: rgb(101 149 255 / 18%);
height: 18rem;
left: -4rem;
top: 4.5rem;
width: 18rem;
}
.auth-orb-right {
background: rgb(124 188 255 / 16%);
height: 10rem;
right: 3rem;
top: 5rem;
width: 10rem;
}
.auth-orb-bottom {
background: rgb(93 154 255 / 12%);
bottom: 2rem;
height: 14rem;
right: 5rem;
width: 14rem;
}
.dark.auth-shell {
background: linear-gradient(180deg, #05080f 0%, #070b14 100%);
.auth-hero {
border-inline: 1px solid rgb(125 168 255 / 10%);
}
.auth-hero-base {
background:
radial-gradient(circle at 20% 18%, rgb(63 115 255 / 22%) 0, transparent 45%),
radial-gradient(circle at 82% 16%, rgb(56 149 255 / 18%) 0, transparent 38%),
radial-gradient(circle at 72% 86%, rgb(96 124 255 / 20%) 0, transparent 42%),
linear-gradient(150deg, #0a1326 0%, #091022 45%, #0b1529 100%);
radial-gradient(circle at top, rgb(35 66 114 / 0.32), rgb(15 22 35 / 0) 40%),
linear-gradient(180deg, #06101b 0%, #08111d 52%, #09131f 100%);
.auth-shell-grid {
background-image:
linear-gradient(rgb(118 160 241 / 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgb(118 160 241 / 0.08) 1px, transparent 1px);
opacity: 0.36;
}
.auth-page-desc {
color: rgb(181 194 226 / 82%);
.auth-shell-noise {
opacity: 0.38;
}
.auth-hero-image {
filter: drop-shadow(0 26px 52px rgb(8 19 42 / 48%));
.auth-brand-chip {
background: rgb(11 19 31 / 0.68);
border-color: rgb(138 174 255 / 0.18);
box-shadow: 0 24px 48px -34px rgb(0 0 0 / 0.52);
}
.auth-orb-left {
background: rgb(81 126 255 / 24%);
.auth-stage-switcher-label {
color: rgb(195 206 230 / 0.8);
}
.auth-orb-right {
background: rgb(59 140 248 / 22%);
.auth-stage-pill {
background: rgb(11 19 31 / 0.7);
border-color: rgb(138 174 255 / 0.18);
box-shadow: 0 18px 34px -28px rgb(0 0 0 / 0.46);
color: rgb(144 196 255 / 0.92);
}
.auth-orb-bottom {
background: rgb(94 105 239 / 20%);
.auth-glow-primary {
background: radial-gradient(circle, rgb(70 120 255 / 0.26) 0%, rgb(70 120 255 / 0) 70%);
}
.auth-glow-secondary {
background: radial-gradient(circle, rgb(41 170 201 / 0.18) 0%, rgb(41 170 201 / 0) 72%);
}
.auth-glow-tertiary {
background: radial-gradient(circle, rgb(95 128 255 / 0.16) 0%, rgb(95 128 255 / 0) 74%);
}
}
@media (max-width: 768px) {
.auth-page-title {
max-width: 14ch;
}
}
@media (max-width: 640px) {
.auth-stage {
padding-top: 6.75rem;
}
.auth-stage-copy {
text-align: left;
}
.auth-page-title {
margin-left: 0;
margin-right: 0;
max-width: none;
}
.auth-stage-switcher {
justify-content: flex-start;
}
}
</style>

107
easyflow-ui-admin/packages/effects/layouts/src/authentication/form.vue
View File

@@ -1,4 +1,7 @@
<script setup lang="ts">
import {computed} from 'vue';
import {useRoute} from 'vue-router';
defineOptions({
name: 'AuthenticationFormView',
});
@@ -6,12 +9,20 @@ defineOptions({
defineProps<{
dataSide?: 'bottom' | 'left' | 'right' | 'top';
}>();
const route = useRoute();
const isLoginRoute = computed(() => route.path === '/auth/login');
</script>
<template>
<div
class="auth-form-wrap flex-col-center bg-background dark:bg-background-deep relative min-h-full px-6 py-12 lg:px-10"
class="auth-form-wrap relative min-h-full"
>
<div :class="['auth-window-shell', { 'auth-window-shell-plain': isLoginRoute }]">
<template v-if="!isLoginRoute">
<div class="auth-window-edge auth-window-edge-top"></div>
<div class="auth-window-edge auth-window-edge-bottom"></div>
</template>
<slot></slot>
<RouterView v-slot="{ Component, route }">
@@ -20,15 +31,16 @@ defineProps<{
<component
:is="Component"
:key="route.fullPath"
class="side-content mt-8 w-full sm:mx-auto md:max-w-md"
class="side-content w-full"
:data-side="dataSide"
/>
</KeepAlive>
</Transition>
</RouterView>
</div>
<div
class="text-muted-foreground absolute bottom-4 flex text-center text-xs"
class="auth-copyright text-muted-foreground absolute left-1/2 flex -translate-x-1/2 text-center text-xs"
>
<slot name="copyright"> </slot>
</div>
@@ -37,12 +49,91 @@ defineProps<{
<style scoped>
.auth-form-wrap {
background-image:
linear-gradient(180deg, rgb(255 255 255 / 98%) 0%, rgb(247 250 255 / 98%) 100%);
padding: 0 0 4.5rem;
}
.dark .auth-form-wrap {
background-image:
linear-gradient(180deg, rgb(13 20 34 / 96%) 0%, rgb(9 16 29 / 98%) 100%);
.auth-window-shell {
backdrop-filter: blur(22px);
background:
linear-gradient(180deg, rgb(255 255 255 / 0.96) 0%, rgb(248 251 255 / 0.98) 100%);
border: 1px solid rgb(255 255 255 / 0.82);
border-radius: 2rem;
box-shadow:
0 40px 80px -48px rgb(13 61 132 / 0.38),
0 18px 36px -26px rgb(13 61 132 / 0.18);
overflow: hidden;
padding: 1.25rem;
position: relative;
}
.auth-window-shell-plain {
backdrop-filter: none;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
overflow: visible;
padding: 0;
}
.auth-window-edge {
border-radius: 9999px;
pointer-events: none;
position: absolute;
}
.auth-window-edge-top {
background: linear-gradient(90deg, rgb(11 111 211 / 0.18), rgb(22 159 200 / 0.08));
height: 10rem;
left: -4rem;
top: -6rem;
width: 14rem;
}
.auth-window-edge-bottom {
background: radial-gradient(circle, rgb(84 132 255 / 0.14) 0%, rgb(84 132 255 / 0) 72%);
bottom: -4rem;
height: 11rem;
right: -4rem;
width: 11rem;
}
.auth-copyright {
bottom: 0.55rem;
width: max-content;
}
.dark .auth-window-shell {
background:
linear-gradient(180deg, rgb(10 18 30 / 0.92) 0%, rgb(9 17 29 / 0.96) 100%);
border-color: rgb(136 168 235 / 0.16);
box-shadow:
0 42px 84px -50px rgb(0 0 0 / 0.64),
0 18px 36px -28px rgb(0 0 0 / 0.42);
}
.dark .auth-window-shell-plain {
background: transparent;
border: none;
box-shadow: none;
}
.dark .auth-window-edge-top {
background: linear-gradient(90deg, rgb(69 120 255 / 0.22), rgb(28 155 197 / 0.08));
}
.dark .auth-window-edge-bottom {
background: radial-gradient(circle, rgb(92 136 255 / 0.16) 0%, rgb(92 136 255 / 0) 72%);
}
@media (max-width: 640px) {
.auth-form-wrap {
padding-bottom: 4rem;
}
.auth-window-shell {
border-radius: 1.6rem;
padding: 1rem;
}
}
</style>

22
easyflow-ui-admin/packages/effects/layouts/src/authentication/toolbar.vue
View File

@@ -1,9 +1,9 @@
<script setup lang="ts">
import type { ToolbarType } from './types';
import type {ToolbarType} from './types';
import { computed } from 'vue';
import {computed} from 'vue';
import { preferences } from '@easyflow/preferences';
import {preferences} from '@easyflow/preferences';
import {
AuthenticationColorToggle,
@@ -21,7 +21,7 @@ defineOptions({
});
const props = withDefaults(defineProps<Props>(), {
toolbarList: () => ['color', 'language', 'layout', 'theme'],
toolbarList: () => ['language', 'theme'],
});
const showColor = computed(() => props.toolbarList.includes('color'));
@@ -35,7 +35,7 @@ const showTheme = computed(() => props.toolbarList.includes('theme'));
:class="{
'auth-toolbar': toolbarList.length > 1,
}"
class="flex-center absolute right-3 top-4 z-20"
class="flex-center absolute right-4 top-4 z-20 sm:right-6 sm:top-6"
>
<div class="hidden md:flex">
<AuthenticationColorToggle v-if="showColor" />
@@ -49,16 +49,16 @@ const showTheme = computed(() => props.toolbarList.includes('theme'));
<style scoped>
.auth-toolbar {
backdrop-filter: blur(10px);
background: rgb(255 255 255 / 72%);
border: 1px solid rgb(29 108 255 / 10%);
background: rgb(255 255 255 / 0.72);
border: 1px solid rgb(255 255 255 / 0.78);
border-radius: 9999px;
box-shadow: 0 12px 26px rgb(30 72 152 / 12%);
padding: 0.25rem 0.72rem;
box-shadow: 0 20px 42px -30px rgb(14 55 124 / 0.28);
padding: 0.25rem 0.58rem;
}
:deep(.dark) .auth-toolbar {
background: rgb(11 19 34 / 66%);
border-color: rgb(122 167 255 / 22%);
box-shadow: 0 12px 28px rgb(0 0 0 / 32%);
border-color: rgb(122 167 255 / 18%);
box-shadow: 0 20px 40px -28px rgb(0 0 0 / 0.46);
}
</style>

26
easyflow-ui-admin/packages/locales/src/langs/en-US/authentication.json
View File

@@ -1,10 +1,18 @@
{
"welcomeBack": "Welcome to EasyFlow User Center",
"pageTitle": "Integrated AI Workspace",
"pageDesc": "Multiple chat assistants provide conversational support, while intelligent agents focus on task execution, with both process and results clearly traceable",
"welcomeBack": "Welcome back to EasyFlow",
"greetingMorning": "Good morning, welcome to EasyFlow",
"greetingNoon": "Good noon, welcome to EasyFlow",
"greetingAfternoon": "Good afternoon, welcome to EasyFlow",
"greetingEvening": "Good evening, welcome to EasyFlow",
"capabilityModel": "Models",
"capabilityAgent": "Agents",
"capabilityWorkflow": "Workflows",
"capabilityKnowledge": "Knowledge",
"pageTitle": "Enter the EasyFlow AI Workspace",
"pageDesc": "Manage models, agents, workflows, and knowledge in one entry point.",
"loginSuccess": "Login Successful",
"loginSuccessDesc": "Welcome Back",
"loginSubtitle": "Enter your AI workspace and collaborate with multiple agents and chat assistants.",
"loginSubtitle": "Continue your workspace flow.",
"selectAccount": "Quick Select Account",
"username": "Username",
"password": "Password",
@@ -18,7 +26,7 @@
"alreadyHaveAccount": "Already have an account?",
"accountTip": "Don't have an account?",
"signUp": "Sign Up",
"signUpSubtitle": "Make managing your applications simple and fun",
"signUpSubtitle": "Create your workspace account and start building AI collaboration flows with clarity and confidence.",
"confirmPassword": "Confirm Password",
"confirmPasswordTip": "The passwords do not match",
"agree": "I agree to",
@@ -28,20 +36,20 @@
"goToLogin": "Login instead",
"passwordStrength": "Use 8 or more characters with a mix of letters, numbers & symbols",
"forgetPassword": "Forget Password?",
"forgetPasswordSubtitle": "Enter your email and we'll send you instructions to reset your password",
"forgetPasswordSubtitle": "Enter your email and we will send secure reset instructions to restore access to your workspace.",
"emailTip": "Please enter email",
"emailValidErrorTip": "The email format you entered is incorrect",
"sendResetLink": "Send Reset Link",
"email": "Email",
"qrcodeSubtitle": "Scan the QR code with your phone to login",
"qrcodePrompt": "Click 'Confirm' after scanning to complete login",
"qrcodeSubtitle": "Scan the QR code with your phone for a fast and trusted sign in.",
"qrcodePrompt": "Confirm on your phone after scanning to continue this workspace session.",
"qrcodeLogin": "QR Code Login",
"wechatLogin": "Wechat Login",
"qqLogin": "QQ Login",
"githubLogin": "Github Login",
"googleLogin": "Google Login",
"dingdingLogin": "Dingding Login",
"codeSubtitle": "Enter your phone number to start managing your project",
"codeSubtitle": "Enter your phone number and verify with a security code to return to your workspace quickly.",
"code": "Security code",
"codeTip": "Security code required {0} characters",
"mobile": "Mobile",

24
easyflow-ui-admin/packages/locales/src/langs/zh-CN/authentication.json
View File

@@ -1,10 +1,18 @@
{
"welcomeBack": "欢迎登录 EasyFlow",
"pageTitle": "EasyFlow 智能体开发平台",
"pageDesc": "统一模型管理、Bot 构建与发布、插件系统、RAG 知识库、AI Workflow 智能体编排...",
"greetingMorning": "上午好，欢迎进入 EasyFlow",
"greetingNoon": "中午好，欢迎进入 EasyFlow",
"greetingAfternoon": "下午好，欢迎进入 EasyFlow",
"greetingEvening": "晚上好，欢迎进入 EasyFlow",
"capabilityModel": "模型",
"capabilityAgent": "智能体",
"capabilityWorkflow": "工作流",
"capabilityKnowledge": "知识库",
"pageTitle": "进入 EasyFlow 智能工作台",
"pageDesc": "在同一入口管理模型、智能体、工作流与知识库。",
"loginSuccess": "登录成功",
"loginSuccessDesc": "欢迎回来",
"loginSubtitle": "一体化 AI 智能体开发平台",
"loginSubtitle": "继续你的工作台任务。",
"selectAccount": "快速选择账号",
"username": "账号",
"password": "密码",
@@ -18,7 +26,7 @@
"alreadyHaveAccount": "已经有账号了?",
"accountTip": "还没有账号?",
"signUp": "注册",
"signUpSubtitle": "让您的应用程序管理变得简单而有趣",
"signUpSubtitle": "创建你的工作台账号，开始搭建清晰、可信的 AI 协作流程。",
"confirmPassword": "确认密码",
"confirmPasswordTip": "两次输入的密码不一致",
"agree": "我同意",
@@ -28,20 +36,20 @@
"goToLogin": "去登录",
"passwordStrength": "使用 8 个或更多字符，混合字母、数字和符号",
"forgetPassword": "忘记密码?",
"forgetPasswordSubtitle": "输入您的电子邮件，我们将向您发送重置密码的连接",
"forgetPasswordSubtitle": "输入账号邮箱，我们会发送一封重置指引，帮助你安全取回访问权限。",
"emailTip": "请输入邮箱",
"emailValidErrorTip": "你输入的邮箱格式不正确",
"sendResetLink": "发送重置链接",
"email": "邮箱",
"qrcodeSubtitle": "请用手机扫描二维码登录",
"qrcodePrompt": "扫码后点击 '确认'，即可完成登录",
"qrcodeSubtitle": "使用手机扫描二维码，在可信设备上快速完成登录。",
"qrcodePrompt": "扫码后在手机上确认，即可继续当前工作台会话。",
"qrcodeLogin": "扫码登录",
"wechatLogin": "微信登录",
"qqLogin": "QQ登录",
"githubLogin": "Github登录",
"googleLogin": "Google登录",
"dingdingLogin": "钉钉登录",
"codeSubtitle": "请输入您的手机号码以开始管理您的项目",
"codeSubtitle": "输入手机号并完成验证码校验，快速返回你的智能工作台。",
"code": "验证码",
"codeTip": "请输入{0}位验证码",
"mobile": "手机号码",