Skip to content

Commit 39870b0

Browse files
IGCrystal-AIGCrystal-A
committed
perf: image rendering
1 parent a99e902 commit 39870b0

File tree

2 files changed

+24
-15
lines changed

2 files changed

+24
-15
lines changed

‎src/app/page.tsx‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -119,37 +119,37 @@ function Navbar() {
119119
</div>
120120
<ul className="hidden md:flex items-center gap-3 text-sm">
121121
<li>
122-
<a href="https://docs.astrbot.app" className="inline-flex items-center h-9 px-3 rounded-full border border-ui opacity-80 hover:opacity-100 transition">
122+
<a href="https://docs.astrbot.app" className="inline-flex items-center h-9 px-3 rounded-full border border-ui opacity-80 hover:opacity-100 transition duration-200">
123123
{t("nav.quickStart")}
124124
</a>
125125
</li>
126126
<li>
127-
<a href="https://plugins.astrbot.app/" className="inline-flex items-center h-9 px-3 rounded-full border border-ui opacity-80 hover:opacity-100 transition">
127+
<a href="https://plugins.astrbot.app/" className="inline-flex items-center h-9 px-3 rounded-full border border-ui opacity-80 hover:opacity-100 transition duration-200">
128128
{t("nav.plugin")}
129129
</a>
130130
</li>
131131
<li>
132-
<a href="https://github.com/AstrBotDevs/AstrBot" className="inline-flex items-center h-9 px-3 rounded-full border border-ui opacity-80 hover:opacity-100 transition">
132+
<a href="https://github.com/AstrBotDevs/AstrBot" className="inline-flex items-center h-9 px-3 rounded-full border border-ui opacity-80 hover:opacity-100 transition duration-200">
133133
{t("nav.github")}
134134
</a>
135135
</li>
136136
<li>
137137
<button onClick={toggleTheme} aria-label="切换深浅模式" className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-ui" style={{ lineHeight: 1 }}>
138138
<span className="grid place-items-center">
139-
<svg className="w-4 h-4 brand-text col-start-1 row-start-1 transition-opacity duration-300" style={{opacity: isDark ? 0 : 1}} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
139+
<svg className="w-4 h-4 brand-text col-start-1 row-start-1 transition-opacity duration-200" style={{opacity: isDark ? 0 : 1}} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
140140
<circle cx="12" cy="12" r="5" />
141141
<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
142142
</svg>
143-
<svg className="w-4 h-4 brand-text col-start-1 row-start-1 transition-opacity duration-300" style={{opacity: isDark ? 1 : 0}} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
143+
<svg className="w-4 h-4 brand-text col-start-1 row-start-1 transition-opacity duration-200" style={{opacity: isDark ? 1 : 0}} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
144144
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
145145
</svg>
146146
</span>
147147
</button>
148148
</li>
149149
<li ref={langRef} className="relative">
150-
<button aria-expanded={openLang} onClick={() => setOpenLang((v) => !v)} className="inline-flex items-center gap-2 h-9 px-3 rounded-full border border-ui">
151-
<span className="current-language">{langLabel}</span>
152-
<span aria-hidden>▾</span>
150+
<button aria-expanded={openLang} onClick={() => setOpenLang((v) => !v)} className="inline-flex items-center gap-2 h-9 px-3 rounded-full border border-ui opacity-80 hover:opacity-100 transition duration-200">
151+
<span className="current-language transition-colors duration-200 text-[var(--foreground)]">{langLabel}</span>
152+
<span aria-hidden className="transition-colors duration-200 text-[var(--foreground)]">▾</span>
153153
</button>
154154
{openLang && (
155155
<ul className="absolute right-0 mt-2 w-36 rounded-lg border border-ui bg-background shadow">
@@ -198,7 +198,7 @@ function Navbar() {
198198
onClick={() => setOpenLangMobile((v) => !v)}
199199
aria-expanded={openLangMobile}
200200
aria-label="语言"
201-
className="inline-flex h-10 px-3 items-center justify-center rounded-full border border-ui gap-2"
201+
className="inline-flex h-10 px-3 items-center justify-center rounded-full border border-ui gap-2 opacity-80 hover:opacity-100 transition duration-200"
202202
>
203203
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
204204
<circle cx="12" cy="12" r="9" />
@@ -210,9 +210,9 @@ function Navbar() {
210210
</button>
211211
{openLangMobile && (
212212
<div className="flex items-center gap-2 flex-wrap">
213-
<button onClick={() => { setLocale('zh-CN'); setOpenMenu(false); }} className={`inline-flex items-center h-9 px-3 rounded-full border border-ui text-xs ${locale === 'zh-CN' ? 'bg-black/[.06] dark:bg-white/[.08]' : 'opacity-80 hover:opacity-100'}`}>简体中文</button>
214-
<button onClick={() => { setLocale('en-US'); setOpenMenu(false); }} className={`inline-flex items-center h-9 px-3 rounded-full border border-ui text-xs ${locale === 'en-US' ? 'bg-black/[.06] dark:bg-white/[.08]' : 'opacity-80 hover:opacity-100'}`}>English</button>
215-
<button onClick={() => { setLocale('ja-JP'); setOpenMenu(false); }} className={`inline-flex items-center h-9 px-3 rounded-full border border-ui text-xs ${locale === 'ja-JP' ? 'bg-black/[.06] dark:bg-white/[.08]' : 'opacity-80 hover:opacity-100'}`}>日本語</button>
213+
<button onClick={() => { setLocale('zh-CN'); setOpenMenu(false); }} className={`inline-flex items-center h-9 px-3 rounded-full border border-ui text-xs transition duration-200 ${locale === 'zh-CN' ? 'bg-black/[.06] dark:bg-white/[.08]' : 'opacity-80 hover:opacity-100'}`}>简体中文</button>
214+
<button onClick={() => { setLocale('en-US'); setOpenMenu(false); }} className={`inline-flex items-center h-9 px-3 rounded-full border border-ui text-xs transition duration-200 ${locale === 'en-US' ? 'bg-black/[.06] dark:bg-white/[.08]' : 'opacity-80 hover:opacity-100'}`}>English</button>
215+
<button onClick={() => { setLocale('ja-JP'); setOpenMenu(false); }} className={`inline-flex items-center h-9 px-3 rounded-full border border-ui text-xs transition duration-200 ${locale === 'ja-JP' ? 'bg-black/[.06] dark:bg-white/[.08]' : 'opacity-80 hover:opacity-100'}`}>日本語</button>
216216
</div>
217217
)}
218218
</div>
@@ -441,7 +441,9 @@ function Providers() {
441441
<Reveal key={it.name} delay={100 + idx * 40} className="h-full">
442442
<a href={it.href} target="_blank" rel="noreferrer" className="h-full min-h-28 rounded-xl border border-ui p-3 sm:p-4 flex flex-col items-center gap-2 hover:bg-[var(--brand-soft)] transition">
443443
<div className="h-10 w-10 rounded-md bg-white dark:bg-white flex items-center justify-center ring-1 ring-black/[.06] dark:ring-white/[.12]">
444-
<Image src={it.src} alt={it.name} width={24} height={24} className="h-6 w-auto" unoptimized style={{ width: "auto", height: "auto" }} />
444+
<div className="relative h-6 w-6">
445+
<Image src={it.src} alt={it.name} fill sizes="24px" className="object-contain" unoptimized />
446+
</div>
445447
</div>
446448
<span className="text-sm opacity-80 underline underline-offset-4 brand-text">{it.name}</span>
447449
</a>
@@ -450,7 +452,9 @@ function Providers() {
450452
<Reveal key={it.name} delay={100 + idx * 40} className="h-full">
451453
<div className="h-full min-h-28 rounded-xl border border-ui p-3 sm:p-4 flex flex-col items-center gap-2">
452454
<div className="h-10 w-10 rounded-md bg-white dark:bg-white flex items-center justify-center ring-1 ring-black/[.06] dark:ring-white/[.12]">
453-
<Image src={it.src} alt={it.name} width={24} height={24} className="h-6 w-auto" unoptimized style={{ width: "auto", height: "auto" }} />
455+
<div className="relative h-6 w-6">
456+
<Image src={it.src} alt={it.name} fill sizes="24px" className="object-contain" unoptimized />
457+
</div>
454458
</div>
455459
<span className="text-sm opacity-80">{it.name}</span>
456460
</div>

‎src/assets/globals.css‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ body {
108108
background: var(--background);
109109
color: var(--foreground);
110110
font-family: var(--font-sans);
111-
transition: background-color .3s ease, color .3s ease;
111+
transition: background-color .2s ease, color .2s ease;
112112
}
113113

114114
/* Explicitly control UA theming to avoid browser auto-forced dark overriding our toggle */
@@ -139,6 +139,11 @@ html.snap-temp-disable {
139139
/* Unified UI border utility */
140140
.border-ui { border-color: var(--border-ui) !important; }
141141

142+
/* Unify theme transition timing across interactive elements */
143+
a, button, .btn-brand, .btn-outline-brand, .tag-brand, .border-ui {
144+
transition: color .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease;
145+
}
146+
142147
.btn-brand {
143148
background-color: var(--brand);
144149
color: #fff;

0 commit comments

Comments
 (0)