admin/KimiCodeSwitch
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 42 Wiki Activity

feat(website): 官网企业版视觉升级

Browse Source 
- 引入 Geist 字体，去除紫色渐变，克制阴影与交互态
- 导航/卡片/按钮统一企业风格，各区块视觉收敛
This commit is contained in:
KimiSwitch Dev committed 2026-08-06 01:56:37 +08:00
1 parent b2f6e7a166
commit 75e48bc4c6
15 files changed
+145 -55
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

website/src/components/Footer.tsx
+6 -5
View File
@@ -19,7 +19,7 @@ export default function Footer() {
<div className="container-page space-y-8">
{/* 推荐链接 */}
<div>
<h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-muted-foreground">
<h3 className="mb-4 text-sm font-semibold text-muted-foreground">
{t.footer.recommend}
</h3>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
@@ -32,9 +32,10 @@ export default function Footer() {
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"
className="group flex items-start gap-3 rounded-2xl border border-border bg-card p-4 transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40"
style={{ boxShadow: "var(--shadow-soft)" }}
>
<div className="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border bg-white">
<div className="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-border bg-white">
{logo ? (
<img
src={asset(logo)}
@@ -48,11 +49,11 @@ export default function Footer() {
)}
</div>
<div className="min-w-0 flex-1">
<div className="font-semibold group-hover:text-primary">
<div className="font-semibold tracking-tight group-hover:text-primary">
{link.name}
</div>
{text && (
<p className="mt-1 line-clamp-3 text-xs text-muted-foreground">
<p className="mt-1 line-clamp-3 text-xs leading-relaxed text-muted-foreground">
{text}
</p>
)}
website/src/components/Nav.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ export default function Nav() {
{ to: "/download", label: t.nav.download },
];
return (
<header className="sticky top-0 z-40 border-b border-border bg-background/80 backdrop-blur">
<header className="sticky top-0 z-40 border-b border-border bg-background/70 backdrop-blur-md">
<div className="container-page flex h-14 items-center justify-between gap-4">
<NavLink
to="/"
website/src/components/SectionShell.tsx
+2 -2
View File
@@ -25,12 +25,12 @@ export default function SectionShell({ id, title, subtitle, children }: SectionS
<div className="mb-12 max-w-3xl">
<h2
id={`${id}-title`}
className="text-3xl font-bold tracking-tight md:text-4xl"
className="text-3xl font-bold tracking-[-0.03em] md:text-4xl"
>
{title}
</h2>
{subtitle && (
<p className="mt-3 text-base text-muted-foreground">{subtitle}</p>
<p className="mt-3 text-base leading-relaxed text-muted-foreground">{subtitle}</p>
)}
</div>
{children}
website/src/i18n.tsx
+11 -2
View File
@@ -164,6 +164,15 @@ const zh = {
"仪表盘性能再优化：价格解析记忆化缓存，扫描从秒级降到百毫秒级；右上角新增加载耗时/数据量跟踪",
],
},
{
version: "v0.6.7",
date: "2026-08-01",
items: [
"应用内置 Kimi 授权登录（Device Code Flow，等同 kimi login）：浏览器授权即用，无需命令行",
"授权后凭据自动写入，15 分钟过期自动续期，用量查询直接可用",
"修复外链打开问题：授权页 / 设置页超链接统一走 Rust 侧 opener 命令（更可靠）",
],
},
{
version: "v0.6.8",
date: "2026-08-01",
@@ -310,7 +319,7 @@ const zh = {
"智谱 GLM":
"通过我的邀请链接注册 BigModel.cn，即可获得 2000 万 Tokens 大礼包，畅享新一代旗舰模型 GLM-5.2",
DeepSeek: "",
OpenCodeGo: "",
OpenCodeGo: "好友订阅后，您可获得 $5，对方也可获得 $5。",
MiniMax:
"MiniMax Token Plan：订阅套餐解锁最新模型，好友订阅享 9 折 + Builder 权益，邀请人得 10% 返利",
基元律动: "",
@@ -630,7 +639,7 @@ const en: Dict = {
"智谱 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: "",
OpenCodeGo: "When a friend subscribes, you get $5 and they get $5.",
MiniMax:
"MiniMax Token Plan: subscribe to unlock the latest models. Friends get 10% off, inviters get 10% rebate",
基元律动: "",
website/src/index.css
+53 -15
View File
@@ -1,8 +1,8 @@
@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/geist/400.css";
@import "@fontsource/geist/500.css";
@import "@fontsource/geist/600.css";
@import "@fontsource/geist/700.css";
@import "@fontsource/geist/800.css";
@import "@fontsource/fira-code/400.css";
@import "@fontsource/fira-code/500.css";
@@ -26,6 +26,11 @@
--primary: 221 83% 53%;
--primary-foreground: 0 0% 100%;
--ring: 221 83% 53%;
/* 克制分层阴影（色相一致的 tinted shadow，非荧光发光） */
--shadow-soft: 0 1px 2px hsl(240 9% 11% / 0.05),
0 8px 24px hsl(240 9% 11% / 0.06);
--shadow-lift: 0 1px 2px hsl(240 9% 11% / 0.05),
0 12px 36px hsl(240 9% 11% / 0.1);
}
@media (prefers-color-scheme: dark) {
@@ -42,6 +47,10 @@
--primary: 217 91% 60%;
--primary-foreground: 0 0% 100%;
--ring: 217 91% 60%;
--shadow-soft: 0 1px 2px hsl(222 47% 2% / 0.5),
0 8px 24px hsl(222 47% 2% / 0.45);
--shadow-lift: 0 1px 2px hsl(222 47% 2% / 0.5),
0 12px 36px hsl(222 47% 2% / 0.55);
}
}
@@ -59,8 +68,8 @@
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);
linear-gradient(to right, hsl(var(--primary) / 0.04) 1px, transparent 1px),
linear-gradient(to bottom, hsl(var(--primary) / 0.04) 1px, transparent 1px);
background-size: 44px 44px;
mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 30%, transparent 75%);
}
@@ -68,6 +77,21 @@
position: relative;
z-index: 1;
}
/* 选中色与键盘焦点（无障碍） */
::selection {
background: hsl(var(--primary) / 0.16);
}
:focus-visible {
outline: 2px solid hsl(var(--ring));
outline-offset: 2px;
}
/* 展示标题：更紧字距 + 防孤词 */
h1,
h2 {
text-wrap: balance;
letter-spacing: -0.02em;
}
}
@layer components {
@@ -75,27 +99,41 @@
@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;
@apply inline-flex items-center justify-center gap-2 rounded-xl px-5 py-2.5 text-sm font-medium transition-all duration-200;
}
.btn-primary {
@apply btn bg-primary text-primary-foreground hover:opacity-90;
box-shadow: 0 0 20px hsl(var(--primary) / 0.35);
@apply btn bg-primary text-primary-foreground hover:bg-primary/90 hover:-translate-y-px active:translate-y-0 active:scale-[0.98];
box-shadow: 0 1px 2px hsl(var(--primary) / 0.3),
0 6px 16px hsl(var(--primary) / 0.22);
}
.btn-primary:hover {
box-shadow: 0 1px 2px hsl(var(--primary) / 0.3),
0 10px 24px hsl(var(--primary) / 0.3);
}
.btn-ghost {
@apply btn border border-border text-foreground hover:bg-accent;
@apply btn border border-border bg-card/60 text-foreground hover:border-foreground/25 hover:bg-accent active:scale-[0.98];
}
.card {
@apply rounded-xl border border-border bg-card p-6 transition-shadow;
@apply rounded-2xl border border-border bg-card p-6;
box-shadow: var(--shadow-soft);
transition:
box-shadow 0.3s ease,
transform 0.3s ease,
border-color 0.3s ease;
}
.card:hover {
box-shadow: 0 0 28px hsl(var(--primary) / 0.12);
box-shadow: var(--shadow-lift);
}
/* 截图容器：限定最大宽高，避免撑满页面 */
.screenshot {
@apply overflow-hidden rounded-xl border border-border bg-muted;
box-shadow: 0 0 36px hsl(var(--primary) / 0.1);
@apply overflow-hidden rounded-2xl border border-border bg-muted;
box-shadow: var(--shadow-lift);
}
.screenshot > img {
@apply block h-auto w-full;
}
/* 图标容器：统一的蓝色徽标容器 */
.icon-chip {
@apply flex h-10 w-10 items-center justify-center rounded-xl border border-primary/20 bg-primary/10 text-primary;
}
}
website/src/sections/CTA.tsx
+9 -5
View File
@@ -10,20 +10,24 @@ export default function CTA() {
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 className="card relative overflow-hidden 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"
className="pointer-events-none absolute -top-24 left-1/2 h-64 w-[480px] -translate-x-1/2 rounded-full bg-primary/10 blur-3xl"
/>
<div
aria-hidden="true"
className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent"
/>
<div className="relative">
<h2
id="cta-title"
className="text-3xl font-bold tracking-tight md:text-5xl"
className="text-3xl font-bold tracking-[-0.03em] md:text-5xl"
>
{t.cta.title}
</h2>
<p className="mt-4 text-base text-muted-foreground md:text-lg">
<p className="mx-auto mt-4 max-w-2xl text-base text-muted-foreground md:text-lg">
{t.cta.subtitle}
</p>
<div className="mt-8 flex flex-wrap justify-center gap-3">
website/src/sections/Changelog.tsx
+37 -10
View File
@@ -18,12 +18,38 @@ function cacheKey(embedded: ChangelogEntry[]) {
return `kimi-switch-changelog-${embedded[0]?.version ?? "v1"}`;
}
/** Parse a GitHub release body into bullet items. */
/** Compare semantic versions like "v0.7.1" for descending order. */
function compareVersionsDesc(a: string, b: string): number {
const parse = (v: string) =>
v.replace(/^v/, "").split(".").map((n) => Number(n) || 0);
const pa = parse(a);
const pb = parse(b);
for (let i = 0; i < 3; i++) {
const da = pa[i] ?? 0;
const db = pb[i] ?? 0;
if (da !== db) return db - da;
}
return 0;
}
/** Parse a GitHub release body into bullet items, stripping markdown syntax
* and the release-template "Downloads by platform" section (changelog entries
* are about changes, not installers). */
function parseBody(body: string): string[] {
return body
.split("\n")
.map((l) => l.replace(/^\s*[-*]\s+/, "").trim())
.filter((l) => l.length > 0 && l !== "---");
const items: string[] = [];
for (const raw of body.split("\n")) {
const line = raw.replace(/^\s*[-*]\s+/, "").trim();
if (line.length === 0 || line === "---") continue;
// Drop the release template's download section and everything after it.
if (/downloads?\s+by\s+platform/i.test(line)) break;
const cleaned = line
.replace(/^#{1,6}\s+/, "") // markdown heading markers
.replace(/\*\*(.+?)\*\*/g, "$1") // bold
.replace(/`([^`]+)`/g, "$1") // inline code
.trim();
if (cleaned.length > 0) items.push(cleaned);
}
return items;
}
async function fetchReleases(): Promise<ChangelogEntry[]> {
@@ -94,12 +120,13 @@ export default function Changelog() {
}, []);
// 远端拉到的版本优先显示（含未翻译的新版本），内置列表补齐缺失版本。
// 合并后按版本倒序排序，避免未翻译版本被无脑塞到最前导致时间轴顺序错乱。
const entries: ChangelogEntry[] = [
...(remote ?? []).filter(
(r) => !embedded.some((e) => e.version === r.version),
),
...embedded,
];
].sort((a, b) => compareVersionsDesc(a.version, b.version));
return (
<SectionShell
@@ -107,16 +134,16 @@ export default function Changelog() {
title={t.changelog.title}
subtitle={t.changelog.subtitle}
>
<ol className="relative space-y-8 border-l border-border pl-8">
<ol className="relative space-y-10 border-l border-border pl-7">
{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" />
<span className="absolute -left-[34px] top-[5px] h-3 w-3 rounded-full border-2 border-background bg-primary ring-4 ring-primary/10" />
<div className="flex flex-wrap items-baseline gap-3">
<h3 className="font-mono text-lg font-semibold">{e.version}</h3>
<h3 className="font-mono text-lg font-semibold tracking-tight">{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">
<ul className="mt-2 list-disc space-y-1 pl-5 text-sm leading-relaxed text-muted-foreground">
{e.items.map((item) => (
<li key={item}>{item}</li>
))}
website/src/sections/Download.tsx
+3 -3
View File
@@ -45,14 +45,14 @@ export default function Download() {
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">
<div className="icon-chip">
<Icon className="h-5 w-5" weight="duotone" />
</div>
<span className="rounded-full border border-primary/25 bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary">
<span className="rounded-md border border-primary/20 bg-primary/10 px-2 py-0.5 text-[11px] font-medium tracking-wide text-primary">
{t.download.ready}
</span>
</div>
<h3 className="mb-2 text-lg font-semibold">{p.name}</h3>
<h3 className="mb-2 text-lg font-semibold tracking-tight">{p.name}</h3>
<p className="text-sm text-muted-foreground">{p.note}</p>
<div className="mt-4 flex flex-wrap gap-2">
{links.map((l) => (
website/src/sections/Features.tsx
+2 -2
View File
@@ -59,10 +59,10 @@ export default function Features() {
/>
</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">
<div className="icon-chip mb-3">
<Icon className="h-5 w-5" weight="duotone" />
</div>
<h3 className="mb-2 text-lg font-semibold">{f.title}</h3>
<h3 className="mb-2 text-lg font-semibold tracking-tight">{f.title}</h3>
<p className="text-sm leading-relaxed text-muted-foreground">
{f.desc}
</p>
website/src/sections/Hero.tsx
+6 -6
View File
@@ -23,29 +23,29 @@ export default function 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"
className="pointer-events-none absolute -top-32 right-[-10%] h-[420px] w-[420px] rounded-full bg-primary/10 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"
className="pointer-events-none absolute -left-40 top-1/2 h-[320px] w-[320px] rounded-full bg-primary/5 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">
<span className="inline-block rounded-full border border-primary/25 bg-primary/10 px-3 py-1 text-xs font-medium tracking-wide 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")}
{...reveal(100, "mt-5 text-4xl font-bold leading-[1.05] tracking-[-0.03em] 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">
<span className="whitespace-nowrap text-primary">
{t.hero.titleAccent}
</span>
{t.hero.titleAfter}
website/src/sections/Performance.tsx
+1 -1
View File
@@ -65,7 +65,7 @@ function Counter({
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">
<div className="font-mono text-4xl font-bold tracking-[-0.03em] tabular-nums">
{v.toFixed(decimals)}
{suffix}
</div>
website/src/sections/Privacy.tsx
+2 -2
View File
@@ -21,10 +21,10 @@ export default function Privacy() {
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">
<div className="icon-chip mb-3">
<Icon className="h-5 w-5" weight="duotone" />
</div>
<h3 className="mb-2 text-lg font-semibold">{it.title}</h3>
<h3 className="mb-2 text-lg font-semibold tracking-tight">{it.title}</h3>
<p className="text-sm leading-relaxed text-muted-foreground">
{it.desc}
</p>