mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-09-27 06:41:12 +00:00
feat(ai): 新增AI助手功能及相关组件
refactor(websocket): 重构WebSocket服务管理及字典同步功能 style(login): 优化登录页面样式及背景图 perf(menu): 改进菜单项展开状态监听逻辑 build: 更新依赖并添加prettier和lint-staged配置 docs: 更新README和注释说明 chore: 清理无用代码和文件
This commit is contained in:
zhangtao
@@ -38,22 +38,24 @@
|
||||
|
||||
<!-- 验证码 -->
|
||||
<el-form-item v-if="captchaState.enable" prop="captcha">
|
||||
<div flex>
|
||||
<div flex items-center gap-10px>
|
||||
<el-input
|
||||
v-model.trim="loginForm.captcha"
|
||||
:placeholder="t('login.captchaCode')"
|
||||
clearable
|
||||
style="width: 320px"
|
||||
@keyup.enter="handleLoginSubmit"
|
||||
>
|
||||
<template #prefix>
|
||||
<div class="i-svg:captcha" />
|
||||
</template>
|
||||
</el-input>
|
||||
<div cursor-pointer flex-center ml-10px>
|
||||
<el-icon v-if="codeLoading" class="is-loading">
|
||||
<div cursor-pointer flex-center w-100px>
|
||||
<el-icon v-if="codeLoading" class="is-loading" size="20">
|
||||
<Loading />
|
||||
</el-icon>
|
||||
<el-image v-else object-cover :src="captchaState.img_base" @click="getCaptcha" />
|
||||
<el-image v-else-if="captchaState.img_base" border-rd-4px object-cover :src="captchaState.img_base" @click="getCaptcha" />
|
||||
<el-text v-else type="info" size="small">点击获取验证码</el-text>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<div
|
||||
class="login-container"
|
||||
:style="{
|
||||
'background-image': configStore.configData?.sys_login_background?.config_value
|
||||
? `url(${configStore.configData.sys_login_background.config_value})`
|
||||
: '/background.svg',
|
||||
}"
|
||||
>
|
||||
<!-- 右侧切换主题、语言按钮 -->
|
||||
<div class="action-bar">
|
||||
<el-tooltip :content="t('login.themeToggle')" placement="bottom">
|
||||
<CommonWrapper>
|
||||
<DarkModeSwitch />
|
||||
</CommonWrapper>
|
||||
</el-tooltip>
|
||||
<el-tooltip :content="t('login.languageToggle')" placement="bottom">
|
||||
<CommonWrapper>
|
||||
<LangSelect size="text-20px" />
|
||||
</CommonWrapper>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<!-- 登录页主体 -->
|
||||
<div flex-1 flex-center>
|
||||
<div
|
||||
class="p-4xl w-full h-auto sm:w-450px border-rd-10px sm:h-680px shadow-[var(--el-box-shadow-light)] backdrop-blur-3px"
|
||||
>
|
||||
<div w-full flex flex-col items-center>
|
||||
<!-- logo -->
|
||||
<!-- <el-image :src="logo" style="width: 84px" /> -->
|
||||
<el-image :src="configStore.configData.sys_web_logo.config_value" style="width: 140px" />
|
||||
|
||||
<!-- 标题 -->
|
||||
<!-- 添加小图标用于显示提示信息 -->
|
||||
<div class="flex items-center justify-center mb-4">
|
||||
<el-tooltip
|
||||
:content="configStore.configData.sys_web_description.config_value"
|
||||
placement="bottom"
|
||||
>
|
||||
<el-icon class="cursor-help"><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
<div class="ml-2 text-xl font-bold">
|
||||
<el-badge
|
||||
:value="`v ${configStore.configData.sys_web_version.config_value}`"
|
||||
type="success"
|
||||
>
|
||||
{{ configStore.configData.sys_web_title.config_value }}
|
||||
</el-badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 组件切换 -->
|
||||
<transition name="fade-slide" mode="out-in">
|
||||
<component
|
||||
:is="formComponents[component]"
|
||||
v-model="component"
|
||||
v-model:preset-username="loginPreset.username"
|
||||
v-model:preset-password="loginPreset.password"
|
||||
class="w-90%"
|
||||
/>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 登录页底部版权 -->
|
||||
<el-text size="small" class="py-2.5! fixed bottom-0 text-center">
|
||||
<a :href="configStore.configData.sys_git_code.config_value" target="_blank">
|
||||
{{ configStore.configData.sys_web_copyright.config_value }} |
|
||||
</a>
|
||||
<a :href="configStore.configData.sys_help_doc.config_value" target="_blank">帮助 |</a>
|
||||
<a :href="configStore.configData.sys_web_privacy.config_value" target="_blank">隐私 |</a>
|
||||
<a :href="configStore.configData.sys_web_clause.config_value" target="_blank">条款</a>
|
||||
{{ configStore.configData.sys_keep_record.config_value }}
|
||||
</el-text>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// import logo from "@/assets/logo.png";
|
||||
// import { defaultSettings } from "@/settings";
|
||||
import CommonWrapper from "@/components/CommonWrapper/index.vue";
|
||||
import DarkModeSwitch from "@/components/DarkModeSwitch/index.vue";
|
||||
import { useConfigStore } from "@/store";
|
||||
|
||||
const configStore = useConfigStore();
|
||||
|
||||
type LayoutMap = "login" | "register" | "resetPwd";
|
||||
|
||||
const t = useI18n().t;
|
||||
|
||||
const component = ref<LayoutMap>("login"); // 切换显示的组件
|
||||
const formComponents = {
|
||||
login: defineAsyncComponent(() => import("./components/Login.vue")),
|
||||
register: defineAsyncComponent(() => import("./components/Register.vue")),
|
||||
resetPwd: defineAsyncComponent(() => import("./components/ResetPwd.vue")),
|
||||
};
|
||||
|
||||
// 预填登录信息（通过具名 v-model 双向绑定传递）
|
||||
const loginPreset = reactive<{ username: string; password: string }>({
|
||||
username: "admin",
|
||||
password: "123456",
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
configStore.getConfig();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.125rem;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
top: 10px;
|
||||
right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
top: 40px;
|
||||
right: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* fade-slide */
|
||||
.fade-slide-leave-active,
|
||||
.fade-slide-enter-active {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.fade-slide-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
|
||||
.fade-slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
</style>
|
||||
@@ -1,14 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
class="login-container"
|
||||
:style="{
|
||||
'background-image': configStore.configData?.sys_login_background?.config_value
|
||||
? `url(${configStore.configData.sys_login_background.config_value})`
|
||||
: '/background.svg',
|
||||
}"
|
||||
>
|
||||
<div class="auth-view">
|
||||
<!-- 右侧切换主题、语言按钮 -->
|
||||
<div class="action-bar">
|
||||
<div class="auth-view__toolbar">
|
||||
<el-tooltip :content="t('login.themeToggle')" placement="bottom">
|
||||
<CommonWrapper>
|
||||
<DarkModeSwitch />
|
||||
@@ -21,56 +14,82 @@
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<!-- 登录页主体 -->
|
||||
<div flex-1 flex-center>
|
||||
<div
|
||||
class="p-4xl w-full h-auto sm:w-450px border-rd-10px sm:h-680px shadow-[var(--el-box-shadow-light)] backdrop-blur-3px"
|
||||
>
|
||||
<div w-full flex flex-col items-center>
|
||||
<!-- logo -->
|
||||
<!-- <el-image :src="logo" style="width: 84px" /> -->
|
||||
<el-image :src="configStore.configData.sys_web_logo.config_value" style="width: 140px" />
|
||||
|
||||
<!-- 标题 -->
|
||||
<!-- 添加小图标用于显示提示信息 -->
|
||||
<div class="flex items-center justify-center mb-4">
|
||||
<el-tooltip
|
||||
:content="configStore.configData.sys_web_description.config_value"
|
||||
placement="bottom"
|
||||
>
|
||||
<el-icon class="cursor-help"><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
<div class="ml-2 text-xl font-bold">
|
||||
<el-badge
|
||||
:value="`v ${configStore.configData.sys_web_version.config_value}`"
|
||||
type="success"
|
||||
<div class="auth-view__wrapper">
|
||||
<!-- 可选：左侧产品介绍区域，如不需要可整段删除，右侧登录表单会自动居中展示 -->
|
||||
<section class="auth-feature">
|
||||
<div class="auth-feature__badge">
|
||||
<span class="auth-feature__dot" />
|
||||
Enterprise Ready
|
||||
</div>
|
||||
<h1 class="auth-feature__title">企业级管理系统</h1>
|
||||
<p class="auth-feature__subtitle">
|
||||
提供安全、高效、可扩展的管理解决方案，助力企业数字化转型与业务增长。
|
||||
</p>
|
||||
<ul class="auth-feature__highlights">
|
||||
<li>
|
||||
<span>⦿</span>
|
||||
统一身份认证与权限管理
|
||||
</li>
|
||||
<li>
|
||||
<span>⦿</span>
|
||||
数据安全与操作审计
|
||||
</li>
|
||||
<li>
|
||||
<span>⦿</span>
|
||||
灵活扩展与高可用架构
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- 登录页主体容器 -->
|
||||
<section class="auth-panel">
|
||||
<!-- 标题 -->
|
||||
<div class="auth-panel__brand">
|
||||
<div class="auth-panel__logo-wrap">
|
||||
<!-- logo -->
|
||||
<!-- <el-image :src="logo" style="width: 84px" /> -->
|
||||
<el-image :src="configStore.configData.sys_web_logo.config_value" class="auth-panel__logo" />
|
||||
</div>
|
||||
<div class="auth-panel__meta">
|
||||
<div class="auth-panel__title-row">
|
||||
<span class="auth-panel__title">{{ configStore.configData.sys_web_title.config_value }}</span>
|
||||
<el-tooltip
|
||||
:content="configStore.configData.sys_web_description.config_value"
|
||||
placement="bottom"
|
||||
>
|
||||
{{ configStore.configData.sys_web_title.config_value }}
|
||||
</el-badge>
|
||||
<el-icon class="cursor-help"><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="auth-panel__version-row">
|
||||
<span class="auth-panel__version-label">Version</span>
|
||||
<span class="auth-panel__version-pill">v{{ configStore.configData.sys_web_version.config_value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 组件切换 -->
|
||||
<transition name="fade-slide" mode="out-in">
|
||||
<component
|
||||
:is="formComponents[component]"
|
||||
v-model="component"
|
||||
v-model:preset-username="loginPreset.username"
|
||||
v-model:preset-password="loginPreset.password"
|
||||
class="w-90%"
|
||||
/>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 登录页底部版权 -->
|
||||
<el-text size="small" class="py-2.5! fixed bottom-0 text-center">
|
||||
<a :href="configStore.configData.sys_git_code.config_value" target="_blank">
|
||||
{{ configStore.configData.sys_web_copyright.config_value }} |
|
||||
</a>
|
||||
<a :href="configStore.configData.sys_help_doc.config_value" target="_blank">帮助 |</a>
|
||||
<a :href="configStore.configData.sys_web_privacy.config_value" target="_blank">隐私 |</a>
|
||||
<a :href="configStore.configData.sys_web_clause.config_value" target="_blank">条款</a>
|
||||
{{ configStore.configData.sys_keep_record.config_value }}
|
||||
</el-text>
|
||||
<!-- 组件切换 -->
|
||||
<transition name="fade-slide" mode="out-in">
|
||||
<component
|
||||
:is="formComponents[component]"
|
||||
v-model="component"
|
||||
v-model:preset-username="loginPreset.username"
|
||||
v-model:preset-password="loginPreset.password"
|
||||
class="auth-panel__form"
|
||||
/>
|
||||
</transition>
|
||||
|
||||
<!-- 登录页底部版权 -->
|
||||
<footer class="auth-panel__footer">
|
||||
<el-text size="small">
|
||||
<a :href="configStore.configData.sys_git_code.config_value" target="_blank">
|
||||
{{ configStore.configData.sys_web_copyright.config_value }} |
|
||||
</a>
|
||||
<a :href="configStore.configData.sys_help_doc.config_value" target="_blank">帮助 |</a>
|
||||
<a :href="configStore.configData.sys_web_privacy.config_value" target="_blank">隐私 |</a>
|
||||
<a :href="configStore.configData.sys_web_clause.config_value" target="_blank">条款</a>
|
||||
{{ configStore.configData.sys_keep_record.config_value }}
|
||||
</el-text>
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -101,62 +120,464 @@ const loginPreset = reactive<{ username: string; password: string }>({
|
||||
password: "123456",
|
||||
});
|
||||
|
||||
let notificationInstance: ReturnType<typeof ElNotification> | null = null;
|
||||
|
||||
const showVoteNotification = () => {
|
||||
notificationInstance = ElNotification({
|
||||
title: "⭐ FastapiAdmin 完全开源 · 期待您的 Star 支持 🙏",
|
||||
message: `项目持续迭代中，若对您有所帮助，欢迎点亮 Star 支持！
|
||||
<br/><a href="https://github.com/1014TaoTao/FastapiAdmin" target="_blank" style="color: var(--el-color-primary); text-decoration: none; font-weight: 500;">Github仓库 →</a>
|
||||
<br/><a href="https://gitee.com/tao__tao/FastapiAdmin" target="_blank" style="color: var(--el-color-warning); text-decoration: none; font-weight: 500;">Gitee仓库 →</a>`,
|
||||
type: "success",
|
||||
position: "bottom-left",
|
||||
duration: 0,
|
||||
dangerouslyUseHTMLString: true,
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(showVoteNotification, 500);
|
||||
configStore.getConfig();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (notificationInstance) {
|
||||
notificationInstance.close();
|
||||
notificationInstance = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-container {
|
||||
.auth-view {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
padding: clamp(1rem, 3vw, 2rem);
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 20% 20%, rgba(64, 128, 255, 0.18), transparent 55%),
|
||||
radial-gradient(circle at 80% 80%, rgba(22, 93, 255, 0.16), transparent 50%);
|
||||
|
||||
&::before {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -2;
|
||||
content: "";
|
||||
background: url("@/assets/images/login-bg.svg") center/cover no-repeat;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
background: linear-gradient(120deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
|
||||
}
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 10;
|
||||
.auth-view__toolbar {
|
||||
display: inline-flex;
|
||||
gap: 0.75rem;
|
||||
align-self: flex-end;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
border: 1px solid rgba(22, 93, 255, 0.15);
|
||||
border-radius: 999px;
|
||||
box-shadow: 0 10px 30px rgba(22, 93, 255, 0.12);
|
||||
transition:
|
||||
transform 0.3s ease,
|
||||
box-shadow 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 16px 40px rgba(22, 93, 255, 0.18);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
position: fixed;
|
||||
top: 12px;
|
||||
right: 16px;
|
||||
z-index: 20;
|
||||
align-self: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: rgba(24, 28, 43, 0.8);
|
||||
border-color: rgba(64, 128, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
/* 应用内暗黑主题下顶部设置面板的深色样式 */
|
||||
.dark .auth-view__toolbar {
|
||||
background-color: rgba(24, 28, 43, 0.9);
|
||||
border-color: rgba(64, 128, 255, 0.35);
|
||||
box-shadow:
|
||||
0 10px 30px rgba(0, 0, 0, 0.7),
|
||||
0 0 0 1px rgba(90, 140, 255, 0.25) inset;
|
||||
}
|
||||
|
||||
.auth-view__wrapper {
|
||||
display: grid;
|
||||
flex: 1;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: clamp(1.5rem, 3vw, 3rem);
|
||||
align-items: stretch;
|
||||
padding: clamp(1.5rem, 2vw, 2.5rem);
|
||||
}
|
||||
|
||||
.auth-feature {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: clamp(1.5rem, 3vw, 3rem);
|
||||
color: rgba(20, 40, 80, 0.95);
|
||||
text-shadow: 0 4px 16px rgba(15, 60, 110, 0.12);
|
||||
animation: featureFade 0.8s ease-out;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
// color: rgba(236, 242, 255, 0.92);
|
||||
color: rgba(160, 190, 255, 0.95);
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.auth-view__wrapper {
|
||||
display: block;
|
||||
padding: 1.25rem 0.75rem 1.75rem;
|
||||
}
|
||||
|
||||
.auth-feature {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.auth-panel {
|
||||
width: 100%;
|
||||
margin-inline: 0;
|
||||
box-shadow:
|
||||
0 12px 32px rgba(22, 93, 255, 0.18),
|
||||
0 2px 8px rgba(22, 93, 255, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
.auth-feature__badge {
|
||||
display: inline-flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
padding: 0.3rem 0.9rem;
|
||||
font-size: 0.875rem;
|
||||
color: rgba(22, 93, 255, 0.95);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
background: rgba(22, 93, 255, 0.1);
|
||||
border-radius: 999px;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: rgba(160, 190, 255, 0.95);
|
||||
background: rgba(64, 128, 255, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
.auth-feature__dot {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
background: #165dff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 12px rgba(22, 93, 255, 0.7);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: #7aa2ff;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-feature__title {
|
||||
margin: 1.5rem 0 0.5rem;
|
||||
font-size: clamp(2rem, 4vw, 2.75rem);
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.auth-feature__subtitle {
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
color: rgba(35, 40, 65, 0.85);
|
||||
|
||||
// @media (prefers-color-scheme: dark) {
|
||||
// color: rgba(220, 230, 255, 0.75);
|
||||
// }
|
||||
}
|
||||
|
||||
.auth-feature__highlights {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-start;
|
||||
padding: 0.75rem 1rem;
|
||||
font-weight: 500;
|
||||
color: rgba(32, 37, 60, 0.9);
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
border: 1px solid rgba(64, 128, 255, 0.08);
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(6px);
|
||||
|
||||
span {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.6;
|
||||
color: rgba(22, 93, 255, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
li {
|
||||
color: rgba(230, 236, 255, 0.85);
|
||||
background: rgba(18, 22, 36, 0.7);
|
||||
border-color: rgba(98, 149, 255, 0.18);
|
||||
|
||||
span {
|
||||
color: rgba(122, 162, 255, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
justify-content: flex-start;
|
||||
justify-self: end;
|
||||
width: min(520px, 100%);
|
||||
padding: clamp(2rem, 3vw, 2.75rem);
|
||||
margin-inline: auto;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 1px solid rgba(22, 93, 255, 0.1);
|
||||
border-radius: 24px;
|
||||
box-shadow:
|
||||
0 16px 48px rgba(22, 93, 255, 0.12),
|
||||
0 4px 16px rgba(22, 93, 255, 0.08),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.5) inset;
|
||||
backdrop-filter: blur(20px);
|
||||
animation: panelLift 0.7s ease;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: rgba(18, 20, 32, 0.88);
|
||||
border-color: rgba(64, 128, 255, 0.25);
|
||||
box-shadow:
|
||||
0 20px 60px rgba(0, 0, 0, 0.6),
|
||||
0 4px 16px rgba(0, 0, 0, 0.4),
|
||||
0 0 0 1px rgba(90, 140, 255, 0.12) inset;
|
||||
}
|
||||
}
|
||||
|
||||
/* 应用内暗黑主题（例如 html/body 上挂 .dark 类）下的登录表单样式 */
|
||||
.dark .auth-panel {
|
||||
background: rgba(26, 32, 48, 0.9);
|
||||
border-color: rgba(86, 140, 255, 0.28);
|
||||
box-shadow:
|
||||
0 20px 60px rgba(0, 0, 0, 0.58),
|
||||
0 4px 16px rgba(0, 0, 0, 0.36),
|
||||
0 0 0 1px rgba(110, 150, 255, 0.16) inset;
|
||||
}
|
||||
|
||||
.auth-panel__brand {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border-bottom: 1px solid rgba(22, 93, 255, 0.06);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border-color: rgba(64, 128, 255, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
.auth-panel__logo-wrap {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.125rem;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
background: radial-gradient(circle at 30% 20%, #ffffff, #e6efff);
|
||||
border-radius: 18px;
|
||||
box-shadow:
|
||||
0 8px 20px rgba(22, 93, 255, 0.16),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.8) inset;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
top: 10px;
|
||||
right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
top: 40px;
|
||||
right: 40px;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: radial-gradient(circle at 30% 20%, #1f2438, #141827);
|
||||
box-shadow:
|
||||
0 8px 20px rgba(0, 0, 0, 0.7),
|
||||
0 0 0 1px rgba(90, 140, 255, 0.3) inset;
|
||||
}
|
||||
}
|
||||
|
||||
/* fade-slide */
|
||||
.fade-slide-leave-active,
|
||||
.fade-slide-enter-active {
|
||||
transition: all 0.3s;
|
||||
.auth-panel__logo {
|
||||
flex-shrink: 0;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.auth-panel__meta {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.auth-panel__title-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.auth-panel__title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 650;
|
||||
line-height: 1.4;
|
||||
color: var(--el-text-color-primary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.auth-panel__version-row {
|
||||
display: inline-flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.auth-panel__version-label {
|
||||
color: var(--el-text-color-placeholder);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.auth-panel__version-pill {
|
||||
padding: 0.1rem 0.55rem;
|
||||
font-weight: 500;
|
||||
color: var(--el-color-primary);
|
||||
background: linear-gradient(135deg, rgba(22, 93, 255, 0.12), rgba(64, 150, 255, 0.18));
|
||||
border: 1px solid rgba(22, 93, 255, 0.18);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.auth-panel__form {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-inline: auto;
|
||||
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
box-shadow: 0 0 0 1px var(--el-border-color) inset;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px var(--el-border-color-hover) inset;
|
||||
}
|
||||
|
||||
&.is-focus {
|
||||
box-shadow: 0 0 0 1px var(--el-color-primary) inset;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-card) {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-panel__footer {
|
||||
padding-top: 1.25rem;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
border-top: 1px solid rgba(22, 93, 255, 0.06);
|
||||
|
||||
a {
|
||||
margin-left: 0.25rem;
|
||||
color: rgba(22, 93, 255, 0.85);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: rgba(22, 93, 255, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border-color: rgba(64, 128, 255, 0.12);
|
||||
|
||||
a {
|
||||
color: rgba(140, 170, 255, 0.88);
|
||||
|
||||
&:hover {
|
||||
color: rgba(160, 190, 255, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes featureFade {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes panelLift {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px) scale(0.98);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-slide-enter-active,
|
||||
.fade-slide-leave-active {
|
||||
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.fade-slide-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
transform: translateX(-40px) scale(0.95);
|
||||
}
|
||||
|
||||
.fade-slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
transform: translateX(40px) scale(0.95);
|
||||
}
|
||||
|
||||
.fade-slide-enter-to,
|
||||
.fade-slide-leave-from {
|
||||
opacity: 1;
|
||||
transform: translateX(0) scale(1);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user