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:
KimiSwitch Dev committed
1 parent
ce282524db
commit
3fbd70932c
76 files changed
+5018
No files matched your search
@@ -0,0 +1,105 @@
|
||||
import { recommendLinks } from "../data/recommendLinks";
|
||||
import { useLang } from "../i18n";
|
||||
import { asset } from "../lib/asset";
|
||||
|
||||
/** Map recommendLink.name → logo file in public/logos (only when we have one). */
|
||||
const logoFor: Record<string, string> = {
|
||||
"Kimi": "logos/kimi.svg",
|
||||
"智谱 GLM": "logos/glm.svg",
|
||||
"DeepSeek": "logos/deepseek.svg",
|
||||
"OpenCodeGo": "logos/opencode.svg",
|
||||
"MiniMax": "logos/minimax.svg",
|
||||
"基元律动": "logos/tokenrhythm.svg",
|
||||
};
|
||||
|
||||
export default function Footer() {
|
||||
const { t } = useLang();
|
||||
return (
|
||||
<footer className="border-t border-border py-12">
|
||||
<div className="container-page space-y-8">
|
||||
{/* 推荐链接 */}
|
||||
<div>
|
||||
<h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
{t.footer.recommend}
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{recommendLinks.map((link) => {
|
||||
const logo = logoFor[link.name];
|
||||
const text = t.footer.recommendText[link.name] ?? "";
|
||||
return (
|
||||
<a
|
||||
key={link.name}
|
||||
href={link.url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="group flex items-start gap-3 rounded-xl border border-border bg-card p-4 transition-all hover:-translate-y-0.5 hover:border-primary/50"
|
||||
>
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border bg-white">
|
||||
{logo ? (
|
||||
<img
|
||||
src={asset(logo)}
|
||||
alt={`${link.name} logo`}
|
||||
className="h-7 w-7 object-contain"
|
||||
/>
|
||||
) : (
|
||||
<span className="text-base font-bold text-muted-foreground">
|
||||
{link.name.slice(0, 1)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="font-semibold group-hover:text-primary">
|
||||
{link.name}
|
||||
</div>
|
||||
{text && (
|
||||
<p className="mt-1 line-clamp-3 text-xs text-muted-foreground">
|
||||
{text}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 版权与开源 */}
|
||||
<div className="flex flex-col gap-2 border-t border-border pt-6 text-sm text-muted-foreground md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
© 2026 Kimi Switch ·{" "}
|
||||
<a
|
||||
href="https://github.com/billowliu2/KimiSwitch"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="underline hover:text-foreground"
|
||||
>
|
||||
GitHub
|
||||
</a>{" "}
|
||||
·{" "}
|
||||
<a
|
||||
href="https://git.codingplan.site/admin/KimiCodeSwitch"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="underline hover:text-foreground"
|
||||
>
|
||||
{t.footer.mirror}
|
||||
</a>{" "}
|
||||
· MIT License
|
||||
</div>
|
||||
<div className="text-xs opacity-80">
|
||||
{t.footer.creditBefore}
|
||||
<a
|
||||
href="https://github.com/JochenYang/kimicode-dashboard"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="underline hover:text-foreground"
|
||||
>
|
||||
kimicode-dashboard
|
||||
</a>
|
||||
{t.footer.creditAfter}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { useInView } from "../hooks";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
interface SectionShellProps {
|
||||
id: string;
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export default function SectionShell({ id, title, subtitle, children }: SectionShellProps) {
|
||||
const [ref, inView] = useInView<HTMLElement>();
|
||||
return (
|
||||
<section
|
||||
ref={ref}
|
||||
id={id}
|
||||
aria-labelledby={`${id}-title`}
|
||||
className={`py-20 transition-all duration-700 ease-out ${
|
||||
inView
|
||||
? "motion-safe:opacity-100 motion-safe:translate-y-0"
|
||||
: "motion-safe:opacity-0 motion-safe:translate-y-6"
|
||||
}`}
|
||||
>
|
||||
<div className="container-page">
|
||||
<div className="mb-12 max-w-3xl">
|
||||
<h2
|
||||
id={`${id}-title`}
|
||||
className="text-3xl font-bold tracking-tight md:text-4xl"
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
{subtitle && (
|
||||
<p className="mt-3 text-base text-muted-foreground">{subtitle}</p>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user