新增: 登录页 UI 重构 + 品牌 logo 与 Lottie 启动动画

视觉与品牌
- public/logo.svg、public/login-illustration.svg、favicon 替换为 logo.svg。
- preferences.ts 新增 logo.source 指向 /logo.svg。
- packages/effects/layouts 导出 LoginIllustration 共享组件(浮动插画,加载失败自动隐藏)。

Auth 布局重构
- layouts/auth.vue 替换默认 AuthPageLayout:主题色渐变背景 + 左侧浮动插画 +
  品牌卡片 + 右上 LanguageToggle + 圆角登录卡片;KeepAlive 仅缓存 Login
  (CodeLogin/QrCodeLogin 需要每次刷新验证码/二维码)。
- 表单样式通过 :deep(.login-form-container) 覆盖输入框、选择框、主按钮,
  全部走 --primary 变量,与主题色联动。

登录组件
- views/_core/authentication/login.vue: 关闭默认 codeLogin/qrcodeLogin/
  thirdPartyLogin/register/docLink,改为手机 / 二维码 / 企微三按钮(IconifyIcon);
  三方登录前检查租户,缺失时 message.warning + validateField。
- packages/effects/common-ui/authentication/login.vue + types.ts:
  新增 showDocLink prop(默认 true),替代原本 HTML 注释掉 DocLink 的做法。
- sso-callback.vue: 等待提示改为 LottieLoading 动画。

Lottie 启动动画
- 新增 loading.html(注入进 index.html)+ public/loading.json + 运行时拷贝的
  public/lottie_light.min.js(.gitignore 忽略)。
- 新增 public/lottie-tint.js:共享主题色适配器(LIGHTNESSES / SHADE_MAP /
  hslToRgb / patchColors / readPrimary),同时被启动白屏脚本与 Vue 组件使用,
  消除两份几乎一致的实现。
- 新增 src/components/lottie-loading/LottieLoading.vue:按需加载 lottie-tint.js
  并根据 CSS 变量 --primary 重新上色。
- vite.config.mts 新增 copyLottiePlayer 插件:configResolved 时无条件把
  node_modules/lottie-web/.../lottie_light.min.js 拷到 public/,避免 mtime 误判。
- package.json 新增 lottie-web ^5.13.0 依赖。

i18n
- 新增 otherLoginMethods / contactSupport / weComLogin 三个文案(zh-CN / en-US)。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
lzh
2026-04-23 19:35:04 +08:00
parent 7b429d1ffd
commit e3f12e4548
22 changed files with 727 additions and 26 deletions

View File

@@ -0,0 +1,77 @@
<style data-app-loading="inject-css">
html {
/* same as ant-design-vue/dist/reset.css setting */
line-height: 1.15;
}
.loading {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #f4f7f9;
}
.loading.hidden {
visibility: hidden;
pointer-events: none;
opacity: 0;
transition: all 0.8s ease-out;
}
.dark .loading {
background: #0d0d10;
}
.title {
margin-top: 24px;
font-family:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
Arial, sans-serif !important;
font-size: 24px;
font-weight: 600 !important;
color: rgb(0 0 0 / 85%) !important;
}
.dark .title {
color: #fff !important;
}
#__app-loading-lottie__ {
width: 220px;
height: 220px;
}
</style>
<div class="loading" id="__app-loading__">
<div id="__app-loading-lottie__"></div>
<div class="title"><%= VITE_APP_TITLE %></div>
</div>
<script src="/lottie_light.min.js"></script>
<script src="/lottie-tint.js"></script>
<script>
(function () {
var container = document.getElementById('__app-loading-lottie__');
if (!container || typeof lottie === 'undefined' || !window.__lottieTint) return;
var tint = window.__lottieTint;
fetch('/loading.json')
.then(function (r) { return r.json(); })
.then(function (data) {
var shades = tint.buildShades(tint.readPrimary());
lottie.loadAnimation({
container: container,
renderer: 'svg',
loop: true,
autoplay: true,
animationData: tint.patchColors(data, shades),
});
})
.catch(function (e) { console.error('[app-loading] lottie error', e); });
})();
</script>