feat(website): 官网多页面 + 中英文切换 + Kimi 风格科技风重设计
- 多页路由:首页 / 功能 / 更新日志 / 下载(HashRouter,适配 GitHub Pages) - 中英文切换(zh/en 双语文案 + localStorage 记忆) - Kimi 品牌配色(中性灰 + 蓝)+ 科技风(网格底纹 / 辉光按钮 / 渐变强调词) - 更新日志页:运行时同步 GitHub Releases,localStorage 缓存 1h,网络失败回退内置列表 - 功能页 8 张截图卡片;下载页含自动更新说明 - 修复资源路径 404(asset() + %BASE_URL%);自托管 Inter/Fira Code 字体
This commit is contained in:
1 parent
ce282524db
commit
3fbd70932c
76 files changed
+5018
No files matched your search
@@ -0,0 +1,68 @@
|
||||
import { NavLink } from "react-router-dom";
|
||||
import { useLang } from "../i18n";
|
||||
import { asset } from "../lib/asset";
|
||||
|
||||
export default function Nav() {
|
||||
const { lang, setLang, t } = useLang();
|
||||
const links = [
|
||||
{ to: "/", label: t.nav.home, end: true },
|
||||
{ to: "/features", label: t.nav.features },
|
||||
{ to: "/changelog", label: t.nav.changelog },
|
||||
{ to: "/download", label: t.nav.download },
|
||||
];
|
||||
return (
|
||||
<header className="sticky top-0 z-40 border-b border-border bg-background/80 backdrop-blur">
|
||||
<div className="container-page flex h-14 items-center justify-between gap-4">
|
||||
<NavLink
|
||||
to="/"
|
||||
className="flex shrink-0 items-center gap-2 text-sm font-semibold tracking-tight"
|
||||
>
|
||||
<img
|
||||
src={asset("kimi.svg")}
|
||||
alt="Kimi Switch logo"
|
||||
className="h-7 w-7 rounded-lg"
|
||||
/>
|
||||
<span>Kimi Switch</span>
|
||||
</NavLink>
|
||||
<nav className="flex items-center gap-5 overflow-x-auto overflow-y-hidden text-sm text-muted-foreground [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
|
||||
{links.map((l) => (
|
||||
<NavLink
|
||||
key={l.to}
|
||||
to={l.to}
|
||||
end={l.end}
|
||||
className={({ isActive }) =>
|
||||
`relative shrink-0 pb-1 transition-colors ${
|
||||
isActive ? "text-foreground" : "hover:text-foreground"
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
{l.label}
|
||||
<span
|
||||
className={`absolute -bottom-1 left-0 h-0.5 bg-primary transition-all duration-300 ${
|
||||
isActive ? "w-full" : "w-0"
|
||||
}`}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
))}
|
||||
</nav>
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setLang(lang === "zh" ? "en" : "zh")}
|
||||
className="rounded-lg border border-border px-2.5 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
aria-label="Switch language / 切换语言"
|
||||
>
|
||||
{lang === "zh" ? "EN" : "中文"}
|
||||
</button>
|
||||
<NavLink to="/download" className="btn-primary hidden text-xs sm:inline-flex md:text-sm">
|
||||
{t.nav.downloadBtn}
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user