feat(website): 官网多页面 + 中英文切换 + Kimi 风格科技风重设计

- 多页路由：首页 / 功能 / 更新日志 / 下载（HashRouter，适配 GitHub Pages） - 中英文切换（zh/en 双语文案 + localStorage 记忆） - Kimi 品牌配色（中性灰 + 蓝）+ 科技风（网格底纹 / 辉光按钮 / 渐变强调词） - 更新日志页：运行时同步 GitHub Releases，localStorage 缓存 1h，网络失败回退内置列表 - 功能页 8 张截图卡片；下载页含自动更新说明 - 修复资源路径 404（asset() + %BASE_URL%）；自托管 Inter/Fira Code 字体
2026-08-01 19:04:33 +08:00
1 parent ce282524db
commit 3fbd70932c
@@ -0,0 +1,47 @@
+import { Link } from "react-router-dom";
+import { useLang } from "../i18n";
+
+export default function CTA() {
+  const { t } = useLang();
+  return (
+    <section
+      id="cta"
+      aria-labelledby="cta-title"
+      className="py-24"
+    >
+      <div className="container-page">
+        <div className="relative overflow-hidden rounded-xl border border-primary/25 bg-gradient-to-r from-primary/10 via-primary/5 to-violet-500/10 p-12 text-center md:p-16">
+          {/* 科技风光晕 */}
+          <div
+            aria-hidden="true"
+            className="pointer-events-none absolute -top-24 left-1/2 h-64 w-[480px] -translate-x-1/2 rounded-full bg-primary/15 blur-3xl"
+          />
+          <div className="relative">
+            <h2
+              id="cta-title"
+              className="text-3xl font-bold tracking-tight md:text-5xl"
+            >
+              {t.cta.title}
+            </h2>
+            <p className="mt-4 text-base text-muted-foreground md:text-lg">
+              {t.cta.subtitle}
+            </p>
+            <div className="mt-8 flex flex-wrap justify-center gap-3">
+              <Link to="/download" className="btn-primary">
+                {t.cta.download}
+              </Link>
+              <a
+                href="https://github.com/billowliu2/KimiSwitch"
+                target="_blank"
+                rel="noreferrer"
+                className="btn-ghost"
+              >
+                {t.cta.source}
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,144 @@
+import { useEffect, useState } from "react";
+import SectionShell from "../components/SectionShell";
+import { useLang } from "../i18n";
+
+interface ChangelogEntry {
+  version: string;
+  date: string;
+  items: string[];
+}
+
+const API_URL =
+  "https://api.github.com/repos/billowliu2/KimiSwitch/releases?per_page=20";
+const CACHE_KEY = "kimi-switch-changelog";
+const CACHE_TTL = 60 * 60 * 1000; // 1 hour
+
+/** Parse a GitHub release body into bullet items. */
+function parseBody(body: string): string[] {
+  return body
+    .split("\n")
+    .map((l) => l.replace(/^\s*[-*]\s+/, "").trim())
+    .filter((l) => l.length > 0 && l !== "---");
+}
+
+async function fetchReleases(): Promise<ChangelogEntry[]> {
+  const res = await fetch(API_URL);
+  if (!res.ok) throw new Error(`GitHub API ${res.status}`);
+  const list = (await res.json()) as Array<{
+    tag_name: string;
+    published_at: string | null;
+    body: string | null;
+  }>;
+  return list.map((r) => ({
+    version: r.tag_name,
+    date: (r.published_at ?? "").slice(0, 10),
+    items: parseBody(r.body ?? ""),
+  }));
+}
+
+function readCache(): ChangelogEntry[] | null {
+  try {
+    const raw = localStorage.getItem(CACHE_KEY);
+    if (!raw) return null;
+    const { ts, data } = JSON.parse(raw) as { ts: number; data: ChangelogEntry[] };
+    if (Date.now() - ts > CACHE_TTL) return null;
+    return data;
+  } catch {
+    return null;
+  }
+}
+
+function writeCache(data: ChangelogEntry[]) {
+  try {
+    localStorage.setItem(
+      CACHE_KEY,
+      JSON.stringify({ ts: Date.now(), data }),
+    );
+  } catch {
+    /* ignore quota/private-mode errors */
+  }
+}
+
+export default function Changelog() {
+  const { t } = useLang();
+  const embedded = t.changelog.entries as ChangelogEntry[];
+  const [remote, setRemote] = useState<ChangelogEntry[] | null>(null);
+  const [synced, setSynced] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    const cached = readCache();
+    if (cached) {
+      setRemote(cached);
+      setSynced(true);
+      return;
+    }
+    fetchReleases()
+      .then((data) => {
+        if (cancelled) return;
+        setRemote(data);
+        setSynced(true);
+        writeCache(data);
+      })
+      .catch(() => {
+        /* 网络不通时使用内置列表兜底 */
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // 远端拉到的版本优先显示（含未翻译的新版本），内置列表补齐缺失版本。
+  const entries: ChangelogEntry[] = [
+    ...(remote ?? []).filter(
+      (r) => !embedded.some((e) => e.version === r.version),
+    ),
+    ...embedded,
+  ];
+
+  return (
+    <SectionShell
+      id="changelog"
+      title={t.changelog.title}
+      subtitle={t.changelog.subtitle}
+    >
+      <ol className="relative space-y-8 border-l border-border pl-8">
+        {entries.map((e) => (
+          <li key={e.version} className="relative">
+            <span className="absolute -left-[37px] top-1.5 h-2.5 w-2.5 rounded-full bg-primary" />
+            <div className="flex flex-wrap items-baseline gap-3">
+              <h3 className="font-mono text-lg font-semibold">{e.version}</h3>
+              <time className="text-xs text-muted-foreground">{e.date}</time>
+            </div>
+            {e.items.length > 0 && (
+              <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-muted-foreground">
+                {e.items.map((item) => (
+                  <li key={item}>{item}</li>
+                ))}
+              </ul>
+            )}
+          </li>
+        ))}
+      </ol>
+      <p className="mt-10 text-xs text-muted-foreground">
+        <a
+          href="https://github.com/billowliu2/KimiSwitch/releases"
+          target="_blank"
+          rel="noreferrer"
+          className="underline hover:text-foreground"
+        >
+          {synced ? t.changelog.syncedNote : t.changelog.fallbackNote}
+        </a>
+        {" · "}
+        <a
+          href="https://git.codingplan.site/admin/KimiCodeSwitch/releases"
+          target="_blank"
+          rel="noreferrer"
+          className="underline hover:text-foreground"
+        >
+          {t.footer.mirror}
+        </a>
+      </p>
+    </SectionShell>
+  );
+}
@@ -0,0 +1,74 @@
+import SectionShell from "../components/SectionShell";
+import { WindowsLogo, AppleLogo, LinuxLogo, DownloadSimple, type Icon } from "@phosphor-icons/react";
+import { useLang } from "../i18n";
+
+const icons: Record<string, Icon> = {
+  windows: WindowsLogo,
+  macos: AppleLogo,
+  linux: LinuxLogo,
+};
+
+const GITHUB_RELEASES = "https://github.com/billowliu2/KimiSwitch/releases";
+const MIRROR_RELEASES = "https://git.codingplan.site/admin/KimiCodeSwitch/releases";
+
+export default function Download() {
+  const { t } = useLang();
+  return (
+    <SectionShell
+      id="download"
+      title={t.download.title}
+      subtitle={t.download.subtitle}
+    >
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+        {t.download.items.map((p) => {
+          const Icon = icons[p.id] ?? WindowsLogo;
+          return (
+            <div key={p.id} className="card flex flex-col">
+              <div className="mb-3 flex items-center justify-between">
+                <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-primary/25 bg-primary/10 text-primary">
+                  <Icon className="h-5 w-5" weight="duotone" />
+                </div>
+                <span
+                  className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${
+                    p.ready
+                      ? "bg-primary/10 text-primary border border-primary/25"
+                      : "bg-muted text-muted-foreground border border-border"
+                  }`}
+                >
+                  {p.ready ? t.download.ready : t.download.wip}
+                </span>
+              </div>
+              <h3 className="mb-2 text-lg font-semibold">{p.name}</h3>
+              <p className="text-sm text-muted-foreground">{p.note}</p>
+              {p.ready && (
+                <div className="mt-4 flex flex-wrap gap-2">
+                  <a
+                    href={GITHUB_RELEASES}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="btn-primary text-xs"
+                  >
+                    {t.download.githubBtn}
+                  </a>
+                  <a
+                    href={MIRROR_RELEASES}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="btn-ghost text-xs"
+                  >
+                    {t.download.mirrorBtn}
+                  </a>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      <p className="mt-6 flex items-center gap-2 text-sm text-muted-foreground">
+        <DownloadSimple className="h-4 w-4 text-primary" weight="duotone" />
+        {t.download.autoUpdate}
+      </p>
+    </SectionShell>
+  );
+}
@@ -0,0 +1,76 @@
+import SectionShell from "../components/SectionShell";
+import { useInView } from "../hooks";
+import { useLang } from "../i18n";
+import { asset } from "../lib/asset";
+import {
+  Stack,
+  PlusCircle,
+  Gauge,
+  ChatsCircle,
+  Key,
+  SlidersHorizontal,
+  MagnifyingGlass,
+  DownloadSimple,
+  type Icon,
+} from "@phosphor-icons/react";
+
+const icons: Record<string, Icon> = {
+  "multi-provider": Stack,
+  "custom-provider": PlusCircle,
+  usage: Gauge,
+  sessions: ChatsCircle,
+  "kimi-auth": Key,
+  "usage-config": SlidersHorizontal,
+  "model-discovery": MagnifyingGlass,
+  "auto-update": DownloadSimple,
+};
+
+export default function Features() {
+  const { t } = useLang();
+  const [gridRef, gridInView] = useInView<HTMLDivElement>();
+  return (
+    <SectionShell
+      id="features"
+      title={t.features.title}
+      subtitle={t.features.subtitle}
+    >
+      <div
+        ref={gridRef}
+        className="grid grid-cols-1 gap-6 sm:grid-cols-2"
+      >
+        {t.features.items.map((f, i) => {
+          const Icon = icons[f.id] ?? Stack;
+          return (
+            <div
+              key={f.id}
+              style={{ transitionDelay: `${i * 60}ms` }}
+              className={`card overflow-hidden p-0 transition-all duration-500 ease-out hover:border-primary/50 ${
+                gridInView
+                  ? "motion-safe:opacity-100 motion-safe:translate-y-0"
+                  : "motion-safe:opacity-0 motion-safe:translate-y-4"
+              }`}
+            >
+              <div className="border-b border-border bg-muted">
+                <img
+                  src={asset(f.img)}
+                  alt={`Kimi Switch - ${f.title}`}
+                  loading="lazy"
+                  className="aspect-[16/9] w-full object-cover object-top"
+                />
+              </div>
+              <div className="p-6">
+                <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-xl border border-primary/25 bg-primary/10 text-primary">
+                  <Icon className="h-5 w-5" weight="duotone" />
+                </div>
+                <h3 className="mb-2 text-lg font-semibold">{f.title}</h3>
+                <p className="text-sm leading-relaxed text-muted-foreground">
+                  {f.desc}
+                </p>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </SectionShell>
+  );
+}
@@ -0,0 +1,98 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { useLang } from "../i18n";
+import { asset } from "../lib/asset";
+
+export default function Hero() {
+  const { t } = useLang();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  const reveal = (delay: number, extra = "") => ({
+    style: { transitionDelay: `${delay}ms` },
+    className: `transition-all duration-700 ease-out ${
+      mounted
+        ? "motion-safe:opacity-100 motion-safe:translate-y-0"
+        : "motion-safe:opacity-0 motion-safe:translate-y-4"
+    } ${extra}`,
+  });
+
+  return (
+    <section
+      id="hero"
+      aria-labelledby="hero-title"
+      className="relative overflow-hidden pt-16 pb-20 md:pt-24"
+    >
+      {/* 科技风光晕 */}
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -top-32 right-[-10%] h-[420px] w-[420px] rounded-full bg-primary/15 blur-3xl"
+      />
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -left-40 top-1/2 h-[320px] w-[320px] rounded-full bg-violet-500/10 blur-3xl"
+      />
+      <div className="container-page relative grid grid-cols-1 gap-10 md:grid-cols-2 md:items-center">
+        <div>
+          <div {...reveal(0)}>
+            <span className="inline-block rounded-full border border-primary/25 bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
+              {t.hero.badge}
+            </span>
+          </div>
+          <h1
+            id="hero-title"
+            {...reveal(100, "mt-4 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl")}
+          >
+            {t.hero.titleBefore}
+            <br />
+            <span className="whitespace-nowrap bg-gradient-to-r from-blue-500 to-violet-500 bg-clip-text text-transparent">
+              {t.hero.titleAccent}
+            </span>
+            {t.hero.titleAfter}
+          </h1>
+          <p
+            {...reveal(200, "mt-5 max-w-[52ch] text-base leading-relaxed text-muted-foreground md:text-lg")}
+          >
+            {t.hero.subtitle}
+          </p>
+          <div {...reveal(300, "mt-8 flex flex-wrap gap-3")}>
+            <Link to="/download" className="btn-primary">
+              {t.hero.download}
+            </Link>
+            <a
+              href="https://github.com/billowliu2/KimiSwitch"
+              target="_blank"
+              rel="noreferrer"
+              className="btn-ghost"
+            >
+              {t.hero.source}
+            </a>
+          </div>
+          <dl {...reveal(400, "mt-10 flex gap-8 font-mono")}>
+            {t.hero.stats.map((s) => (
+              <div key={s.label}>
+                <dt className="sr-only">{s.label}</dt>
+                <dd className="text-2xl font-semibold tabular-nums">
+                  {s.value}
+                </dd>
+                <dd className="mt-1 text-xs text-muted-foreground">
+                  {s.label}
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+
+        <div {...reveal(250)}>
+          <div className="screenshot max-h-[420px]">
+            <img
+              src={asset("screenshots/hero.png")}
+              alt="Kimi Switch: multi-LLM provider list with one-click switching"
+              loading="eager"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,76 @@
+import SectionShell from "../components/SectionShell";
+import { useInView, useCountUp } from "../hooks";
+import { useLang } from "../i18n";
+import { asset } from "../lib/asset";
+
+export default function Performance() {
+  const { t } = useLang();
+  return (
+    <SectionShell
+      id="performance"
+      title={t.performance.title}
+      subtitle={t.performance.subtitle}
+    >
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        {t.performance.metrics.map((m) => (
+          <Counter key={m.label} {...m} />
+        ))}
+      </div>
+
+      {/* 仪表盘截图示例 */}
+      <div className="mt-8 grid grid-cols-1 gap-4 md:grid-cols-2">
+        <figure>
+          <div className="screenshot max-h-[340px]">
+            <img
+              src={asset("screenshots/dashboard-light.png")}
+              alt="Kimi Switch usage dashboard (light theme)"
+              loading="lazy"
+            />
+          </div>
+          <figcaption className="mt-2 text-center text-xs text-muted-foreground">
+            {t.performance.lightCaption}
+          </figcaption>
+        </figure>
+        <figure>
+          <div className="screenshot max-h-[340px]">
+            <img
+              src={asset("screenshots/dashboard-dark.png")}
+              alt="Kimi Switch usage dashboard (dark theme)"
+              loading="lazy"
+            />
+          </div>
+          <figcaption className="mt-2 text-center text-xs text-muted-foreground">
+            {t.performance.darkCaption}
+          </figcaption>
+        </figure>
+      </div>
+    </SectionShell>
+  );
+}
+
+function Counter({
+  target,
+  decimals = 0,
+  suffix,
+  label,
+  desc,
+}: {
+  target: number;
+  decimals?: number;
+  suffix: string;
+  label: string;
+  desc: string;
+}) {
+  const [ref, inView] = useInView<HTMLDivElement>();
+  const v = useCountUp(target, inView);
+  return (
+    <div ref={ref} className="card text-center">
+      <div className="font-mono text-4xl font-bold tracking-tight tabular-nums">
+        {v.toFixed(decimals)}
+        {suffix}
+      </div>
+      <div className="mt-2 text-sm font-medium">{label}</div>
+      <div className="mt-1 text-xs text-muted-foreground">{desc}</div>
+    </div>
+  );
+}
@@ -0,0 +1,37 @@
+import SectionShell from "../components/SectionShell";
+import { Database, LinkSimple, BookOpen, type Icon } from "@phosphor-icons/react";
+import { useLang } from "../i18n";
+
+const icons: Record<string, Icon> = {
+  local: Database,
+  direct: LinkSimple,
+  open: BookOpen,
+};
+
+export default function Privacy() {
+  const { t } = useLang();
+  return (
+    <SectionShell
+      id="privacy"
+      title={t.privacy.title}
+      subtitle={t.privacy.subtitle}
+    >
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+        {t.privacy.items.map((it) => {
+          const Icon = icons[it.id] ?? Database;
+          return (
+            <div key={it.id} className="card">
+              <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-xl border border-primary/25 bg-primary/10 text-primary">
+                <Icon className="h-5 w-5" weight="duotone" />
+              </div>
+              <h3 className="mb-2 text-lg font-semibold">{it.title}</h3>
+              <p className="text-sm leading-relaxed text-muted-foreground">
+                {it.desc}
+              </p>
+            </div>
+          );
+        })}
+      </div>
+    </SectionShell>
+  );
+}
@@ -0,0 +1,46 @@
+import SectionShell from "../components/SectionShell";
+import { useInView } from "../hooks";
+import { useLang } from "../i18n";
+import { asset } from "../lib/asset";
+
+export default function Showcase() {
+  const { t } = useLang();
+  const [gridRef, gridInView] = useInView<HTMLDivElement>();
+  return (
+    <SectionShell
+      id="showcase"
+      title={t.showcase.title}
+      subtitle={t.showcase.subtitle}
+    >
+      <div
+        ref={gridRef}
+        className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"
+      >
+        {t.showcase.items.map((s, i) => (
+          <figure
+            key={s.src}
+            style={{ transitionDelay: `${i * 60}ms` }}
+            className={`transition-all duration-500 ease-out ${
+              gridInView
+                ? "motion-safe:opacity-100 motion-safe:translate-y-0"
+                : "motion-safe:opacity-0 motion-safe:translate-y-4"
+            }`}
+          >
+            <div className="screenshot group aspect-[4/3] overflow-hidden">
+              <img
+                src={asset(s.src)}
+                alt={`Kimi Switch - ${s.title}`}
+                loading="lazy"
+                className="h-full w-full object-cover object-top transition-transform duration-500 group-hover:scale-[1.03]"
+              />
+            </div>
+            <figcaption className="mt-3">
+              <div className="text-sm font-semibold">{s.title}</div>
+              <p className="mt-0.5 text-xs text-muted-foreground">{s.desc}</p>
+            </figcaption>
+          </figure>
+        ))}
+      </div>
+    </SectionShell>
+  );
+}