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,52 @@
|
||||
import { useEffect } from "react";
|
||||
import { Route, Routes, useLocation } from "react-router-dom";
|
||||
import Nav from "./components/Nav";
|
||||
import Hero from "./sections/Hero";
|
||||
import Features from "./sections/Features";
|
||||
import Changelog from "./sections/Changelog";
|
||||
import Download from "./sections/Download";
|
||||
import Privacy from "./sections/Privacy";
|
||||
import CTA from "./sections/CTA";
|
||||
import Footer from "./components/Footer";
|
||||
|
||||
function ScrollToTop() {
|
||||
const { pathname } = useLocation();
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, [pathname]);
|
||||
return null;
|
||||
}
|
||||
|
||||
const homePage = (
|
||||
<>
|
||||
<Hero />
|
||||
<CTA />
|
||||
</>
|
||||
);
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col">
|
||||
<Nav />
|
||||
<main className="flex-1">
|
||||
<ScrollToTop />
|
||||
<Routes>
|
||||
<Route path="/" element={homePage} />
|
||||
<Route
|
||||
path="/features"
|
||||
element={
|
||||
<>
|
||||
<Features />
|
||||
<Privacy />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<Route path="/changelog" element={<Changelog />} />
|
||||
<Route path="/download" element={<Download />} />
|
||||
<Route path="*" element={homePage} />
|
||||
</Routes>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
export interface RecommendLink {
|
||||
name: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
export const recommendLinks: RecommendLink[] = [
|
||||
{
|
||||
name: "Kimi",
|
||||
url: "https://kimi-bot.com/activities/zh-cn/invite/share?scenario=invite&from=share_poster&invitation_code=6UJX7J",
|
||||
},
|
||||
{
|
||||
name: "智谱 GLM",
|
||||
url: "https://www.bigmodel.cn/invite?icode=s2o6ZfY5VjEPIJj05K%2BhW2czbXFgPRGIalpycrEwJ28%3D",
|
||||
},
|
||||
{
|
||||
name: "DeepSeek",
|
||||
url: "https://platform.deepseek.com",
|
||||
},
|
||||
{
|
||||
name: "OpenCodeGo",
|
||||
url: "https://opencode.ai/go?ref=DFCNADQCEM",
|
||||
},
|
||||
{
|
||||
name: "MiniMax",
|
||||
url: "https://platform.minimaxi.com/subscribe/token-plan?code=GmmZA629b5&source=link",
|
||||
},
|
||||
{
|
||||
name: "基元律动",
|
||||
url: "https://tokenrhythm.studio/i/rf_tr_v0QXuBTzyl3-bJOS2uFFPg6x",
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,44 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
/** Fires once when the element scrolls into view. */
|
||||
export function useInView<T extends Element = Element>(
|
||||
options: IntersectionObserverInit = { threshold: 0.15 },
|
||||
) {
|
||||
const ref = useRef<T | null>(null);
|
||||
const [inView, setInView] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const node = ref.current;
|
||||
if (!node || inView) return;
|
||||
const io = new IntersectionObserver(([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
setInView(true);
|
||||
io.disconnect();
|
||||
}
|
||||
}, options);
|
||||
io.observe(node);
|
||||
return () => io.disconnect();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [inView]);
|
||||
|
||||
return [ref, inView] as const;
|
||||
}
|
||||
|
||||
/** Animates a numeric value once `trigger` flips to true. */
|
||||
export function useCountUp(target: number, trigger: boolean, durationMs = 900) {
|
||||
const [value, setValue] = useState(0);
|
||||
useEffect(() => {
|
||||
if (!trigger) return;
|
||||
const start = performance.now();
|
||||
const easeOut = (t: number) => 1 - Math.pow(1 - t, 3);
|
||||
let raf = 0;
|
||||
const tick = (now: number) => {
|
||||
const p = Math.min(1, (now - start) / durationMs);
|
||||
setValue(target * easeOut(p));
|
||||
if (p < 1) raf = requestAnimationFrame(tick);
|
||||
};
|
||||
raf = requestAnimationFrame(tick);
|
||||
return () => cancelAnimationFrame(raf);
|
||||
}, [target, trigger, durationMs]);
|
||||
return value;
|
||||
}
|
||||
@@ -0,0 +1,575 @@
|
||||
import {
|
||||
createContext,
|
||||
useContext,
|
||||
useEffect,
|
||||
useState,
|
||||
type ReactNode,
|
||||
} from "react";
|
||||
|
||||
export type Lang = "zh" | "en";
|
||||
|
||||
const zh = {
|
||||
nav: {
|
||||
home: "首页",
|
||||
features: "功能",
|
||||
showcase: "演示",
|
||||
performance: "性能",
|
||||
changelog: "更新日志",
|
||||
download: "下载",
|
||||
downloadBtn: "下载 v0.6.7",
|
||||
},
|
||||
hero: {
|
||||
badge: "开源 MIT · Windows 10 / 11",
|
||||
titleBefore: "统一管理你的",
|
||||
titleAccent: "AI 供应商",
|
||||
titleAfter: "",
|
||||
subtitle:
|
||||
"一键切换 Kimi / 智谱 GLM / MiniMax / DeepSeek / OpenRouter / 基元律动，用量与账单一目了然。",
|
||||
download: "免费下载",
|
||||
source: "查看源码",
|
||||
stats: [
|
||||
{ value: "22", label: "预设供应商" },
|
||||
{ value: "5910", label: "模型价格库" },
|
||||
{ value: "100%", label: "开源免费" },
|
||||
],
|
||||
},
|
||||
features: {
|
||||
title: "核心功能",
|
||||
subtitle: "从多供应商管理到用量监控，一站搞定。",
|
||||
items: [
|
||||
{
|
||||
id: "multi-provider",
|
||||
title: "多供应商管理",
|
||||
desc: "Kimi / 智谱 GLM / MiniMax / DeepSeek / OpenRouter / 基元律动等 22 个预设，一键添加与切换。",
|
||||
img: "screenshots/preset-picker.png",
|
||||
},
|
||||
{
|
||||
id: "custom-provider",
|
||||
title: "自定义供应商",
|
||||
desc: "自定义 Base URL / API Key / 模型映射，支持 JSON 高级编辑。",
|
||||
img: "screenshots/edit-provider-basic-managed.png",
|
||||
},
|
||||
{
|
||||
id: "usage",
|
||||
title: "用量与账单监控",
|
||||
desc: "套餐类 5 小时 / 每周用量 + 按量余额，models.dev 真实价格计算成本，卡片直显。",
|
||||
img: "screenshots/dashboard-light.png",
|
||||
},
|
||||
{
|
||||
id: "sessions",
|
||||
title: "会话管理",
|
||||
desc: "跨供应商浏览、搜索与恢复历史会话。",
|
||||
img: "screenshots/sessions-light.png",
|
||||
},
|
||||
{
|
||||
id: "kimi-auth",
|
||||
title: "Kimi 一键授权登录",
|
||||
desc: "应用内置设备码授权（等同 kimi login），浏览器授权即用，15 分钟过期自动续期。",
|
||||
img: "screenshots/kimi-oauth-dialog.png",
|
||||
},
|
||||
{
|
||||
id: "usage-config",
|
||||
title: "配置用量查询",
|
||||
desc: "全屏配置页：NewAPI 中转站模板、超时时间、自动刷新间隔、测试查询。",
|
||||
img: "screenshots/usage-config-page.png",
|
||||
},
|
||||
{
|
||||
id: "model-discovery",
|
||||
title: "智能模型发现",
|
||||
desc: "模型能力 / 上下文大小自动从 models.dev 同步，构建时自动拉取，5910 模型覆盖。",
|
||||
img: "screenshots/kimi-cli-select-model.png",
|
||||
},
|
||||
{
|
||||
id: "auto-update",
|
||||
title: "自动更新",
|
||||
desc: "自动检测新版本，一键下载安装，始终保持最新。",
|
||||
img: "screenshots/settings.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
showcase: {
|
||||
title: "界面演示",
|
||||
subtitle: "真实界面截图，所见即所得。",
|
||||
items: [
|
||||
{
|
||||
src: "screenshots/usage-config-page.png",
|
||||
title: "配置用量查询",
|
||||
desc: "NewAPI 中转站模板、超时与自动刷新、测试查询一屏搞定",
|
||||
},
|
||||
{
|
||||
src: "screenshots/preset-picker.png",
|
||||
title: "预设供应商",
|
||||
desc: "22 个预设开箱即用，一键添加常用厂商",
|
||||
},
|
||||
{
|
||||
src: "screenshots/kimi-oauth-dialog.png",
|
||||
title: "Kimi 授权登录",
|
||||
desc: "设备码授权等同 kimi login，过期自动续期",
|
||||
},
|
||||
{
|
||||
src: "screenshots/dashboard-daily-detail.png",
|
||||
title: "用量明细",
|
||||
desc: "按天查看 Token 与费用走势",
|
||||
},
|
||||
{
|
||||
src: "screenshots/sessions-light.png",
|
||||
title: "会话管理",
|
||||
desc: "跨供应商浏览与恢复历史会话",
|
||||
},
|
||||
{
|
||||
src: "screenshots/kimi-plan-quota-card.png",
|
||||
title: "套餐余量卡",
|
||||
desc: "5 小时 / 每周额度直读，余量一眼可见",
|
||||
},
|
||||
],
|
||||
},
|
||||
performance: {
|
||||
title: "轻量原生",
|
||||
subtitle: "Tauri + Rust 内核，WebView2 前端，常驻托盘零负担。",
|
||||
metrics: [
|
||||
{ target: 93, suffix: " MB", label: "Working Set", desc: "程序空闲态工作集内存" },
|
||||
{ target: 34, suffix: " MB", label: "Private WS", desc: "独占内存（WebView2 共享部分扣除）" },
|
||||
{ target: 0.3, decimals: 1, suffix: "%", label: "CPU 空闲", desc: "无活跃任务时几乎零占用" },
|
||||
],
|
||||
lightCaption: "浅色主题",
|
||||
darkCaption: "深色主题",
|
||||
},
|
||||
changelog: {
|
||||
title: "更新日志",
|
||||
subtitle: "每个版本的重要变更记录。",
|
||||
syncedNote: "数据已同步 GitHub Releases",
|
||||
fallbackNote: "内置版本记录",
|
||||
entries: [
|
||||
{
|
||||
version: "v0.6.7",
|
||||
date: "2026-08-01",
|
||||
items: [
|
||||
"应用内置 Kimi 设备授权登录（等同 kimi login），浏览器授权即用，过期自动续期",
|
||||
"外链打开统一走 Rust 命令，修复部分链接无法跳转",
|
||||
],
|
||||
},
|
||||
{
|
||||
version: "v0.6.6",
|
||||
date: "2026-08-01",
|
||||
items: [
|
||||
"模型价格对标 models.dev，覆盖 5910 个模型",
|
||||
"新增基元律动供应商与推荐链接",
|
||||
"设置页文案与参考来源说明优化",
|
||||
],
|
||||
},
|
||||
{
|
||||
version: "v0.6.5",
|
||||
date: "2026-08-01",
|
||||
items: [
|
||||
"更新检查优化：私有仓库优先，GitHub 回退，8 秒超时",
|
||||
"修复按量余额显示",
|
||||
],
|
||||
},
|
||||
{
|
||||
version: "v0.6.4",
|
||||
date: "2026-08-01",
|
||||
items: [
|
||||
"新增套餐账单查询（5 小时 / 每周用量卡片直显）",
|
||||
"OpenCode Zen 预设补充推荐链接",
|
||||
],
|
||||
},
|
||||
{
|
||||
version: "v0.6.3",
|
||||
date: "2026-07-30",
|
||||
items: [
|
||||
"添加默认供应商支持，新增 StepFun Plan 套餐预设",
|
||||
"供应商编辑页新增 API Key 获取链接（支持推广链接）",
|
||||
"修复链接无法打开浏览器的问题",
|
||||
],
|
||||
},
|
||||
{
|
||||
version: "v0.6.2",
|
||||
date: "2026-07-30",
|
||||
items: [
|
||||
"仪表盘布局重构：每日用量趋势折线图（Token / 缓存命中率 / 请求数）",
|
||||
"热力图独立整行，格子放大",
|
||||
"新增 OpenCode Go / Zen 预设",
|
||||
],
|
||||
},
|
||||
{
|
||||
version: "v0.6.0",
|
||||
date: "2026-07-29",
|
||||
items: [
|
||||
"预设供应商与供应商账单查询上线",
|
||||
"多平台打包：macOS / Linux / Windows CI 同步发布",
|
||||
],
|
||||
},
|
||||
{
|
||||
version: "v0.5.2",
|
||||
date: "2026-07-29",
|
||||
items: ["用量趋势改为 tab 容器，新增供应商模型两级下钻"],
|
||||
},
|
||||
{
|
||||
version: "v0.5.1",
|
||||
date: "2026-07-29",
|
||||
items: ["窗口与托盘行为优化；模型表格与能力编辑 UI 打磨"],
|
||||
},
|
||||
],
|
||||
},
|
||||
privacy: {
|
||||
title: "你的数据，只在你的电脑上",
|
||||
subtitle: "三句话讲清楚隐私与开源承诺。",
|
||||
items: [
|
||||
{
|
||||
id: "local",
|
||||
title: "本地存储",
|
||||
desc: "配置与用量仅存本机 ~/.kimi-switch 与 config.toml，绝不上传。",
|
||||
},
|
||||
{
|
||||
id: "direct",
|
||||
title: "官方直连",
|
||||
desc: "账单查询直连各厂商官方 API，无中间商、无统计埋点。",
|
||||
},
|
||||
{
|
||||
id: "open",
|
||||
title: "开源可审计",
|
||||
desc: "MIT 协议全量开源（GitHub），欢迎审阅与共建。",
|
||||
},
|
||||
],
|
||||
},
|
||||
download: {
|
||||
title: "下载 Kimi Switch",
|
||||
subtitle: "当前版本 v0.6.7 · Windows 10 / 11 主推，macOS 与 Linux 路线图上。",
|
||||
autoUpdate: "应用内置自动检测更新，新版本发布后在设置页一键升级。",
|
||||
ready: "已发布",
|
||||
wip: "开发中",
|
||||
githubBtn: "GitHub 下载",
|
||||
mirrorBtn: "镜像下载",
|
||||
items: [
|
||||
{ id: "windows", name: "Windows", ready: true, note: ".msi 与 .exe 安装包，系统托盘常驻" },
|
||||
{ id: "macos", name: "macOS", ready: false, note: "GitHub Actions 已能构建 .dmg，待官方适配" },
|
||||
{ id: "linux", name: "Linux", ready: false, note: ".AppImage / .deb / .rpm 构建中" },
|
||||
],
|
||||
},
|
||||
cta: {
|
||||
title: "现在就把所有供应商，放进一个应用",
|
||||
subtitle: "免费 · 开源 MIT · 一分钟完成安装",
|
||||
download: "免费下载",
|
||||
source: "GitHub 源码",
|
||||
},
|
||||
footer: {
|
||||
recommend: "推荐供应商",
|
||||
mirror: "国内镜像",
|
||||
creditBefore: "仪表盘与会话管理功能基于 ",
|
||||
creditAfter: " (MIT, © JochenYang) 移植",
|
||||
recommendText: {
|
||||
Kimi: "完成 Kimi 注册，你我都能 100% 拿奖，最高可得 1 年会员等值权益",
|
||||
"智谱 GLM":
|
||||
"通过我的邀请链接注册 BigModel.cn，即可获得 2000 万 Tokens 大礼包，畅享新一代旗舰模型 GLM-5.2",
|
||||
DeepSeek: "",
|
||||
OpenCodeGo: "",
|
||||
MiniMax:
|
||||
"MiniMax Token Plan：订阅套餐解锁最新模型，好友订阅享 9 折 + Builder 权益，邀请人得 10% 返利",
|
||||
基元律动: "",
|
||||
} as Record<string, string>,
|
||||
},
|
||||
};
|
||||
|
||||
export type Dict = typeof zh;
|
||||
|
||||
const en: Dict = {
|
||||
nav: {
|
||||
home: "Home",
|
||||
features: "Features",
|
||||
showcase: "Demo",
|
||||
performance: "Performance",
|
||||
changelog: "Changelog",
|
||||
download: "Download",
|
||||
downloadBtn: "Download v0.6.7",
|
||||
},
|
||||
hero: {
|
||||
badge: "Open source MIT · Windows 10 / 11",
|
||||
titleBefore: "One app for all your ",
|
||||
titleAccent: "AI providers",
|
||||
titleAfter: "",
|
||||
subtitle:
|
||||
"Switch between Kimi, Zhipu GLM, MiniMax, DeepSeek, OpenRouter and TokenRhythm in one click, with usage and billing at a glance.",
|
||||
download: "Free Download",
|
||||
source: "View Source",
|
||||
stats: [
|
||||
{ value: "22", label: "Provider presets" },
|
||||
{ value: "5910", label: "Model price DB" },
|
||||
{ value: "100%", label: "Open source" },
|
||||
],
|
||||
},
|
||||
features: {
|
||||
title: "Core Features",
|
||||
subtitle: "From multi-provider management to usage monitoring, all in one place.",
|
||||
items: [
|
||||
{
|
||||
id: "multi-provider",
|
||||
title: "Multi-Provider Management",
|
||||
desc: "22 presets including Kimi, Zhipu GLM, MiniMax, DeepSeek, OpenRouter and TokenRhythm. Add and switch in one click.",
|
||||
img: "screenshots/preset-picker.png",
|
||||
},
|
||||
{
|
||||
id: "custom-provider",
|
||||
title: "Custom Providers",
|
||||
desc: "Custom Base URL, API Key and model mapping, with advanced JSON editing.",
|
||||
img: "screenshots/edit-provider-basic-managed.png",
|
||||
},
|
||||
{
|
||||
id: "usage",
|
||||
title: "Usage & Billing",
|
||||
desc: "5-hour / weekly plan quotas plus pay-as-you-go balance, priced with real models.dev rates and shown on cards.",
|
||||
img: "screenshots/dashboard-light.png",
|
||||
},
|
||||
{
|
||||
id: "sessions",
|
||||
title: "Session Manager",
|
||||
desc: "Browse, search and resume past sessions across providers.",
|
||||
img: "screenshots/sessions-light.png",
|
||||
},
|
||||
{
|
||||
id: "kimi-auth",
|
||||
title: "One-Click Kimi Login",
|
||||
desc: "Built-in device-code authorization (same as kimi login). Authorize in the browser; 15-minute expiry auto-renews.",
|
||||
img: "screenshots/kimi-oauth-dialog.png",
|
||||
},
|
||||
{
|
||||
id: "usage-config",
|
||||
title: "Usage Query Setup",
|
||||
desc: "Full-page config: NewAPI relay templates, timeout, auto-refresh interval, and a test query.",
|
||||
img: "screenshots/usage-config-page.png",
|
||||
},
|
||||
{
|
||||
id: "model-discovery",
|
||||
title: "Smart Model Discovery",
|
||||
desc: "Model capabilities and context sizes sync from models.dev at build time, covering 5910 models.",
|
||||
img: "screenshots/kimi-cli-select-model.png",
|
||||
},
|
||||
{
|
||||
id: "auto-update",
|
||||
title: "Auto Updates",
|
||||
desc: "Automatically detects new versions and installs them in one click.",
|
||||
img: "screenshots/settings.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
showcase: {
|
||||
title: "Screenshots",
|
||||
subtitle: "Real screenshots from the app. What you see is what you get.",
|
||||
items: [
|
||||
{
|
||||
src: "screenshots/usage-config-page.png",
|
||||
title: "Usage Query Setup",
|
||||
desc: "NewAPI relay templates, timeout and auto-refresh, plus a test query, all on one page",
|
||||
},
|
||||
{
|
||||
src: "screenshots/preset-picker.png",
|
||||
title: "Provider Presets",
|
||||
desc: "22 presets ready out of the box, add popular vendors in one click",
|
||||
},
|
||||
{
|
||||
src: "screenshots/kimi-oauth-dialog.png",
|
||||
title: "Kimi Authorization",
|
||||
desc: "Device-code flow identical to kimi login, auto-renews on expiry",
|
||||
},
|
||||
{
|
||||
src: "screenshots/dashboard-daily-detail.png",
|
||||
title: "Usage Details",
|
||||
desc: "Daily token and cost trends",
|
||||
},
|
||||
{
|
||||
src: "screenshots/sessions-light.png",
|
||||
title: "Session Manager",
|
||||
desc: "Browse and resume past sessions across providers",
|
||||
},
|
||||
{
|
||||
src: "screenshots/kimi-plan-quota-card.png",
|
||||
title: "Plan Quota Card",
|
||||
desc: "5-hour / weekly quotas at a glance",
|
||||
},
|
||||
],
|
||||
},
|
||||
performance: {
|
||||
title: "Lightweight & Native",
|
||||
subtitle: "Tauri + Rust core with a WebView2 frontend. Zero tray overhead.",
|
||||
metrics: [
|
||||
{ target: 93, suffix: " MB", label: "Working Set", desc: "Idle working-set memory" },
|
||||
{ target: 34, suffix: " MB", label: "Private WS", desc: "Private memory (shared WebView2 excluded)" },
|
||||
{ target: 0.3, decimals: 1, suffix: "%", label: "Idle CPU", desc: "Nearly zero when idle" },
|
||||
],
|
||||
lightCaption: "Light theme",
|
||||
darkCaption: "Dark theme",
|
||||
},
|
||||
changelog: {
|
||||
title: "Changelog",
|
||||
subtitle: "Notable changes in every release.",
|
||||
syncedNote: "Synced from GitHub Releases",
|
||||
fallbackNote: "Built-in release notes",
|
||||
entries: [
|
||||
{
|
||||
version: "v0.6.7",
|
||||
date: "2026-08-01",
|
||||
items: [
|
||||
"Built-in Kimi device-code login (same as kimi login): authorize in the browser, auto-renews on expiry",
|
||||
"External links now open via a unified Rust command, fixing broken jumps",
|
||||
],
|
||||
},
|
||||
{
|
||||
version: "v0.6.6",
|
||||
date: "2026-08-01",
|
||||
items: [
|
||||
"Model pricing aligned with models.dev, covering 5910 models",
|
||||
"New TokenRhythm provider with referral link",
|
||||
"Settings copy and source attribution polish",
|
||||
],
|
||||
},
|
||||
{
|
||||
version: "v0.6.5",
|
||||
date: "2026-08-01",
|
||||
items: [
|
||||
"Update check rework: private mirror first, GitHub fallback, 8s timeout",
|
||||
"Fix pay-as-you-go balance display",
|
||||
],
|
||||
},
|
||||
{
|
||||
version: "v0.6.4",
|
||||
date: "2026-08-01",
|
||||
items: [
|
||||
"Plan billing queries (5-hour / weekly usage shown on cards)",
|
||||
"OpenCode Zen preset gains a referral link",
|
||||
],
|
||||
},
|
||||
{
|
||||
version: "v0.6.3",
|
||||
date: "2026-07-30",
|
||||
items: [
|
||||
"Default provider support and a new StepFun Plan preset",
|
||||
"API Key helper links on the provider edit page (referral links supported)",
|
||||
"Fix links failing to open the browser",
|
||||
],
|
||||
},
|
||||
{
|
||||
version: "v0.6.2",
|
||||
date: "2026-07-30",
|
||||
items: [
|
||||
"Dashboard layout rework: daily trend line chart (tokens / cache hit rate / requests)",
|
||||
"Heatmap gets its own full-width row with larger cells",
|
||||
"New OpenCode Go / Zen presets",
|
||||
],
|
||||
},
|
||||
{
|
||||
version: "v0.6.0",
|
||||
date: "2026-07-29",
|
||||
items: [
|
||||
"Provider presets and per-provider billing queries launch",
|
||||
"Multi-platform packaging: macOS / Linux / Windows CI releases",
|
||||
],
|
||||
},
|
||||
{
|
||||
version: "v0.5.2",
|
||||
date: "2026-07-29",
|
||||
items: ["Usage trends moved into a tab container with provider-model two-level drill-down"],
|
||||
},
|
||||
{
|
||||
version: "v0.5.1",
|
||||
date: "2026-07-29",
|
||||
items: ["Window and tray behavior polish; model table and capability editor UI refinements"],
|
||||
},
|
||||
],
|
||||
},
|
||||
privacy: {
|
||||
title: "Your Data Stays on Your Machine",
|
||||
subtitle: "Our privacy and open-source commitments in three sentences.",
|
||||
items: [
|
||||
{
|
||||
id: "local",
|
||||
title: "Local Storage",
|
||||
desc: "Configs and usage data live only in ~/.kimi-switch and config.toml. Nothing is uploaded.",
|
||||
},
|
||||
{
|
||||
id: "direct",
|
||||
title: "Direct Connections",
|
||||
desc: "Billing queries go straight to each vendor's official API. No middlemen, no tracking.",
|
||||
},
|
||||
{
|
||||
id: "open",
|
||||
title: "Open & Auditable",
|
||||
desc: "Fully open source under MIT on GitHub. Reviews and contributions welcome.",
|
||||
},
|
||||
],
|
||||
},
|
||||
download: {
|
||||
title: "Download Kimi Switch",
|
||||
subtitle: "Current version v0.6.7 · Windows 10 / 11 first, macOS and Linux on the roadmap.",
|
||||
autoUpdate: "Built-in update detection: upgrade in one click from Settings when a new version ships.",
|
||||
ready: "Available",
|
||||
wip: "In development",
|
||||
githubBtn: "Download from GitHub",
|
||||
mirrorBtn: "China mirror",
|
||||
items: [
|
||||
{ id: "windows", name: "Windows", ready: true, note: ".msi and .exe installers, lives in the system tray" },
|
||||
{ id: "macos", name: "macOS", ready: false, note: "GitHub Actions already builds .dmg, official support pending" },
|
||||
{ id: "linux", name: "Linux", ready: false, note: ".AppImage / .deb / .rpm builds in progress" },
|
||||
],
|
||||
},
|
||||
cta: {
|
||||
title: "Bring every provider into one app",
|
||||
subtitle: "Free · Open source MIT · One-minute install",
|
||||
download: "Free Download",
|
||||
source: "GitHub Source",
|
||||
},
|
||||
footer: {
|
||||
recommend: "Recommended Providers",
|
||||
mirror: "China mirror",
|
||||
creditBefore: "Dashboard & session management adapted from ",
|
||||
creditAfter: " (MIT, © JochenYang)",
|
||||
recommendText: {
|
||||
Kimi: "Sign up with my invite link and we both win rewards, up to a 1-year membership equivalent",
|
||||
"智谱 GLM":
|
||||
"Register on BigModel.cn via my invite link and get a 20M token gift pack for the new GLM-5.2 flagship",
|
||||
DeepSeek: "",
|
||||
OpenCodeGo: "",
|
||||
MiniMax:
|
||||
"MiniMax Token Plan: subscribe to unlock the latest models. Friends get 10% off, inviters get 10% rebate",
|
||||
基元律动: "",
|
||||
} as Record<string, string>,
|
||||
},
|
||||
};
|
||||
|
||||
const dicts: Record<Lang, Dict> = { zh, en };
|
||||
|
||||
const STORAGE_KEY = "kimi-switch-site-lang";
|
||||
|
||||
function detect(): Lang {
|
||||
if (typeof window === "undefined") return "zh";
|
||||
const saved = localStorage.getItem(STORAGE_KEY);
|
||||
if (saved === "zh" || saved === "en") return saved;
|
||||
return navigator.language.toLowerCase().startsWith("zh") ? "zh" : "en";
|
||||
}
|
||||
|
||||
const LangContext = createContext<{
|
||||
lang: Lang;
|
||||
setLang: (l: Lang) => void;
|
||||
t: Dict;
|
||||
}>({ lang: "zh", setLang: () => {}, t: zh });
|
||||
|
||||
export function LangProvider({ children }: { children: ReactNode }) {
|
||||
const [lang, setLangState] = useState<Lang>(detect);
|
||||
|
||||
const setLang = (l: Lang) => {
|
||||
setLangState(l);
|
||||
localStorage.setItem(STORAGE_KEY, l);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
document.documentElement.lang = lang === "zh" ? "zh-CN" : "en";
|
||||
}, [lang]);
|
||||
|
||||
return (
|
||||
<LangContext.Provider value={{ lang, setLang, t: dicts[lang] }}>
|
||||
{children}
|
||||
</LangContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useLang() {
|
||||
return useContext(LangContext);
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
@import "@fontsource/inter/400.css";
|
||||
@import "@fontsource/inter/500.css";
|
||||
@import "@fontsource/inter/600.css";
|
||||
@import "@fontsource/inter/700.css";
|
||||
@import "@fontsource/inter/800.css";
|
||||
@import "@fontsource/fira-code/400.css";
|
||||
@import "@fontsource/fira-code/500.css";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Design tokens — Kimi brand: neutral gray + blue accent (matches the app UI).
|
||||
Light is the default; dark follows prefers-color-scheme. */
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 240 11% 97%;
|
||||
--foreground: 240 9% 11%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 240 9% 11%;
|
||||
--muted: 240 6% 94%;
|
||||
--muted-foreground: 220 9% 46%;
|
||||
--accent: 240 6% 94%;
|
||||
--accent-foreground: 240 9% 11%;
|
||||
--border: 240 6% 90%;
|
||||
--primary: 221 83% 53%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--ring: 221 83% 53%;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: 222 47% 6%;
|
||||
--foreground: 220 20% 92%;
|
||||
--card: 222 32% 10%;
|
||||
--card-foreground: 220 20% 92%;
|
||||
--muted: 222 25% 14%;
|
||||
--muted-foreground: 220 12% 62%;
|
||||
--accent: 222 25% 14%;
|
||||
--accent-foreground: 220 20% 92%;
|
||||
--border: 222 22% 17%;
|
||||
--primary: 217 91% 60%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--ring: 217 91% 60%;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground antialiased;
|
||||
}
|
||||
/* 科技风底纹：固定网格线，极低透明度，不干扰阅读 */
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(to right, hsl(var(--primary) / 0.05) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, hsl(var(--primary) / 0.05) 1px, transparent 1px);
|
||||
background-size: 44px 44px;
|
||||
mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 30%, transparent 75%);
|
||||
}
|
||||
#root {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.container-page {
|
||||
@apply mx-auto w-full max-w-6xl px-6;
|
||||
}
|
||||
.btn {
|
||||
@apply inline-flex items-center justify-center gap-2 rounded-xl px-5 py-2.5 text-sm font-medium transition-colors;
|
||||
}
|
||||
.btn-primary {
|
||||
@apply btn bg-primary text-primary-foreground hover:opacity-90;
|
||||
box-shadow: 0 0 20px hsl(var(--primary) / 0.35);
|
||||
}
|
||||
.btn-ghost {
|
||||
@apply btn border border-border text-foreground hover:bg-accent;
|
||||
}
|
||||
.card {
|
||||
@apply rounded-xl border border-border bg-card p-6 transition-shadow;
|
||||
}
|
||||
.card:hover {
|
||||
box-shadow: 0 0 28px hsl(var(--primary) / 0.12);
|
||||
}
|
||||
/* 截图容器：限定最大宽高，避免撑满页面 */
|
||||
.screenshot {
|
||||
@apply overflow-hidden rounded-xl border border-border bg-muted;
|
||||
box-shadow: 0 0 36px hsl(var(--primary) / 0.1);
|
||||
}
|
||||
.screenshot > img {
|
||||
@apply block h-auto w-full;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* Resolve a public-asset path against Vite's base URL.
|
||||
* All site assets live under `/KimiSwitch/` in dev and on GitHub Pages,
|
||||
* so bare absolute paths like `/logos/x.svg` would 404 — always go through here.
|
||||
*/
|
||||
export const asset = (p: string) =>
|
||||
`${import.meta.env.BASE_URL}${p.replace(/^\/+/, "")}`;
|
||||
@@ -0,0 +1,16 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { HashRouter } from "react-router-dom";
|
||||
import { LangProvider } from "./i18n";
|
||||
import App from "./App";
|
||||
import "./index.css";
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<HashRouter>
|
||||
<LangProvider>
|
||||
<App />
|
||||
</LangProvider>
|
||||
</HashRouter>
|
||||
</StrictMode>,
|
||||
);
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
Reference in new issue
Block a user