LoadingSignal 升级:换用新品牌 logo,明亮简洁蓝色旋转动画

logo 改用 apple-touch-icon,spinner 改为蓝色渐变环 + 微光晕
+ cubic-bezier 缓动曲线,整体更轻盈现代。
同时 ScanTerminalScreen 加载态接入 ScanTerminalLoadingScreen。
This commit is contained in:
2569718930@qq.com
2026-05-25 02:29:04 +08:00
parent ad936bfd91
commit f7eeca1021
3 changed files with 20 additions and 18 deletions
@@ -56,6 +56,8 @@ import {
useScanTerminalTheme, useScanTerminalTheme,
useUserLocalClock, useUserLocalClock,
} from "@/components/dashboard/scan-terminal/use-scan-terminal-ui-state"; } from "@/components/dashboard/scan-terminal/use-scan-terminal-ui-state";
import { ScanTerminalLoadingScreen } from "@/components/dashboard/scan-terminal/ScanTerminalShellParts";
import { scanRootClass } from "@/components/dashboard/scan-root-styles";
import { useRelativeTime } from "@/hooks/useRelativeTime"; import { useRelativeTime } from "@/hooks/useRelativeTime";
function createEmptyAccess(loading = true): ProAccessState { function createEmptyAccess(loading = true): ProAccessState {
@@ -1165,7 +1167,7 @@ function ScanTerminalScreen() {
const isPro = const isPro =
hydrated && (proAccess.subscriptionActive || canUseLocalFullAccess); hydrated && (proAccess.subscriptionActive || canUseLocalFullAccess);
const userLocalTime = useUserLocalClock(); const userLocalTime = useUserLocalClock();
useScanTerminalTheme(); const { themeMode } = useScanTerminalTheme();
useEffect(() => { useEffect(() => {
let cancelled = false; let cancelled = false;
@@ -1253,11 +1255,12 @@ function ScanTerminalScreen() {
if (!hydrated || (proAccess.loading && !canUseLocalFullAccess)) { if (!hydrated || (proAccess.loading && !canUseLocalFullAccess)) {
return ( return (
<div className="grid h-screen w-full place-items-center bg-[#e9edf3]"> <ScanTerminalLoadingScreen
<div className="rounded border border-slate-300 bg-white px-5 py-4 text-sm font-bold text-slate-600 shadow-sm"> isEn={isEn}
Loading paid terminal... rootClassName={scanRootClass}
</div> themeMode={themeMode}
</div> userLocalTime={userLocalTime}
/>
); );
} }
@@ -124,8 +124,8 @@
.root :global(.scan-loading-spinner-wrapper) { .root :global(.scan-loading-spinner-wrapper) {
position: relative; position: relative;
width: 90px; width: 96px;
height: 90px; height: 96px;
display: grid; display: grid;
place-items: center; place-items: center;
margin: 0 auto; margin: 0 auto;
@@ -134,17 +134,19 @@
.root :global(.scan-loading-spinner-ring) { .root :global(.scan-loading-spinner-ring) {
position: absolute; position: absolute;
inset: 0; inset: 0;
border: 1.5px solid transparent; border: 2px solid transparent;
border-top-color: var(--color-text-primary); border-top-color: #3b82f6;
border-right-color: var(--color-text-primary); border-right-color: #60a5fa;
border-radius: 50%; border-radius: 50%;
animation: scan-loading-spin 1s linear infinite; animation: scan-loading-spin 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
box-shadow: 0 0 12px rgba(59, 130, 246, 0.12);
} }
.root :global(.scan-loading-spinner-logo) { .root :global(.scan-loading-spinner-logo) {
width: 44px; width: 48px;
height: 44px; height: 48px;
object-fit: contain; object-fit: contain;
border-radius: 8px;
} }
.root :global(.scan-loading-copy-block) { .root :global(.scan-loading-copy-block) {
@@ -18,12 +18,9 @@ export function LoadingSignal({
<div className="scan-loading-spinner-wrapper" aria-hidden="true"> <div className="scan-loading-spinner-wrapper" aria-hidden="true">
<div className="scan-loading-spinner-ring" /> <div className="scan-loading-spinner-ring" />
<img <img
src="/static/logo.png" src="/apple-touch-icon.png"
alt="PolyWeather" alt="PolyWeather"
className="scan-loading-spinner-logo" className="scan-loading-spinner-logo"
onError={(e) => {
(e.target as HTMLImageElement).src = "/logo.png";
}}
/> />
</div> </div>
<div className="scan-loading-copy-block"> <div className="scan-loading-copy-block">