diff --git a/packages/core/scripts/generate-site.mjs b/packages/core/scripts/generate-site.mjs index 26c5dec..23509f8 100644 --- a/packages/core/scripts/generate-site.mjs +++ b/packages/core/scripts/generate-site.mjs @@ -23,6 +23,7 @@ const SITES_ROOT = path.join(REPO_ROOT, "sites"); // ==================================================================== const SITES = { "ai-stack": { + themeClass: "site-ai-stack", brandZh: { name: "AI Stack", tagline: "由真实用户排名的专业 AI 工具目录。", @@ -91,6 +92,7 @@ const SITES = { }, }, launchai: { + themeClass: "site-launchai", brandZh: { name: "LaunchAI", tagline: "发现并投票今日的 AI 新品。", @@ -157,6 +159,7 @@ const SITES = { }, }, "the-ai-ledger": { + themeClass: "site-the-ai-ledger", brandZh: { name: "The AI Ledger", tagline: "独立 AI 报道，附社区排名目录。", @@ -224,6 +227,7 @@ const SITES = { }, }, "devai-tools": { + themeClass: "site-devai-tools", brandZh: { name: "DevAI.tools", tagline: "面向开发者的 AI 工具——精选、实测、社区排名。", @@ -289,6 +293,7 @@ const SITES = { }, }, findai: { + themeClass: "site-findai", brandZh: { name: "findai", tagline: "极简 AI 工具搜索引擎。", diff --git a/packages/core/src/i18n/routing.ts b/packages/core/src/i18n/routing.ts index e839645..a6ee2a6 100644 --- a/packages/core/src/i18n/routing.ts +++ b/packages/core/src/i18n/routing.ts @@ -4,7 +4,10 @@ import { createNavigation } from 'next-intl/navigation'; export const routing = defineRouting({ locales: ['en', 'zh'], defaultLocale: 'en', - localePrefix: 'as-needed' + localePrefix: 'as-needed', + // 品牌站根路径固定默认语言（英文）：不按 cookie/Accept-Language 自动跳转。 + // 中文用户通过导航语言切换器显式进入 /zh。 + localeDetection: false }); export type Locale = (typeof routing.locales)[number]; diff --git a/packages/core/src/kit/chrome.tsx b/packages/core/src/kit/chrome.tsx index cac7b3a..c8aa8c5 100644 --- a/packages/core/src/kit/chrome.tsx +++ b/packages/core/src/kit/chrome.tsx @@ -48,7 +48,11 @@ export async function SiteChrome({ const footerGroups = footerGroupsRaw ?? config.footerGroups; return ( -
+
{/* Hero */} -
+

{th("title")} @@ -88,13 +88,28 @@ async function ClassicHome({ locale }: { locale: string }) {

-
- {t("popularLabel")} + + {/* 统计条（深色 Hero 内的白色数字） */} +
+ {[ + { v: "1,000+", l: "AI tools" }, + { v: "14", l: "Categories" }, + { v: "7", l: "Rankings" }, + ].map((s) => ( +
+
{s.v}
+
{s.l}
+
+ ))} +
+ +
+ {t("popularLabel")} {t.raw("popularSearches").map((q: string) => ( {q} diff --git a/packages/core/src/kit/site-themes/editorial/index.tsx b/packages/core/src/kit/site-themes/editorial/index.tsx index f9e8a59..2b1fa79 100644 --- a/packages/core/src/kit/site-themes/editorial/index.tsx +++ b/packages/core/src/kit/site-themes/editorial/index.tsx @@ -59,8 +59,17 @@ async function EditorialHome({ locale }: { locale: string }) { return (
+ {/* Masthead：黑色报头条（当日日期 + 期号），报纸头版签名 */} +
+
+ {new Date().toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" })} + Est. 2026 + Daily +
+
+ {/* Masthead */} -
+

{t("mastheadLabel")} diff --git a/packages/core/src/kit/site-themes/minimal/index.tsx b/packages/core/src/kit/site-themes/minimal/index.tsx index 6e0802b..9a1db2b 100644 --- a/packages/core/src/kit/site-themes/minimal/index.tsx +++ b/packages/core/src/kit/site-themes/minimal/index.tsx @@ -77,6 +77,7 @@ async function MinimalHome({ locale }: { locale: string }) {

+
{popularSearches.map((q) => ( - {/* Terminal 风格 Hero */} + {/* Terminal 风格 Hero + 绿色系统状态条 */} +
+
+ + system: online · 1,000+ tools indexed · updated hourly +
+
diff --git a/packages/core/src/kit/site-themes/product/index.tsx b/packages/core/src/kit/site-themes/product/index.tsx index 940a619..0c500d1 100644 --- a/packages/core/src/kit/site-themes/product/index.tsx +++ b/packages/core/src/kit/site-themes/product/index.tsx @@ -115,7 +115,7 @@ async function ProductHome({ locale }: { locale: string }) { return (
{/* Hero：今日发布 */} -
+

{th("title")} diff --git a/packages/core/src/kit/types.ts b/packages/core/src/kit/types.ts index 4a6e7e8..1705a64 100644 --- a/packages/core/src/kit/types.ts +++ b/packages/core/src/kit/types.ts @@ -32,6 +32,8 @@ export interface SiteConfig { seo?: Record; /** 品牌强调色 HSL 三元组（登录页分栏模板） */ accent?: string; + /** 站点视觉签名 class（挂载在站点外壳根元素，驱动全站差异化样式） */ + themeClass?: string; /** 中文品牌文案（导航/页脚/hero/搜索占位） */ brandZh?: { name?: string; diff --git a/packages/core/src/styles/globals.css b/packages/core/src/styles/globals.css index c6efd6c..2294cad 100644 --- a/packages/core/src/styles/globals.css +++ b/packages/core/src/styles/globals.css @@ -119,3 +119,267 @@ html { .animate-drawer-in { animation: bu-drawer-in 0.18s ease-out; } + +/* ============================================================ + 五站视觉签名（Site Identity Layers） + 每个网站一套独立设计语言：字体 / 底色 / 圆角 / 边框 / 按钮形态 + 由 SiteChrome 的 data-theme 驱动，仅作用于主题表现层 + ============================================================ */ + +/* ---------- 1. AI Stack（classic）：深蓝专业 SaaS ---------- + 密度较高、细边框、轻阴影、蓝色主色 */ +[data-theme="ai-stack"] { + --primary: 224 64% 33%; + --primary-foreground: 0 0% 100%; + --ring: 224 64% 33%; +} +[data-theme="ai-stack"] .rounded-xl, +[data-theme="ai-stack"] .rounded-2xl { + border-radius: 0.625rem; +} +[data-theme="ai-stack"] .group.relative.rounded-xl { + box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); +} + +/* ---------- 2. LaunchAI（product）：暖橙活力社区 ---------- + 暖白底、胶囊按钮、大圆角卡片、橙色主色 */ +[data-theme="launchai"] { + --primary: 16 85% 53%; + --primary-foreground: 0 0% 100%; + --background: 30 55% 97%; + --secondary: 28 50% 92%; + --ring: 16 85% 53%; +} +[data-theme="launchai"] .bg-background { + background-color: hsl(var(--background)); +} +[data-theme="launchai"] .rounded-xl { border-radius: 1.1rem; } +[data-theme="launchai"] .rounded-2xl { border-radius: 1.4rem; } +[data-theme="launchai"] h1, [data-theme="launchai"] h2 { + letter-spacing: -0.02em; +} + +/* ---------- 3. The AI Ledger（editorial）：报纸编辑风 ---------- + 纸白底、衬线字体、直角、黑主色、无阴影、粗黑分隔 */ +[data-theme="the-ai-ledger"] { + --primary: 24 10% 12%; + --primary-foreground: 40 40% 98%; + --background: 42 45% 97%; + --border: 30 10% 82%; + --radius: 0px; +} +[data-theme="the-ai-ledger"] { + font-family: Georgia, "Times New Roman", "Noto Serif SC", serif; +} +[data-theme="the-ai-ledger"] h1, +[data-theme="the-ai-ledger"] h2, +[data-theme="the-ai-ledger"] h3 { + font-family: Georgia, "Times New Roman", "Noto Serif SC", serif; + letter-spacing: -0.005em; +} +[data-theme="the-ai-ledger"] .rounded-full, +[data-theme="the-ai-ledger"] .rounded-xl, +[data-theme="the-ai-ledger"] .rounded-2xl, +[data-theme="the-ai-ledger"] .rounded-lg { + border-radius: 1px; +} +[data-theme="the-ai-ledger"] .shadow, +[data-theme="the-ai-ledger"] .shadow-sm, +[data-theme="the-ai-ledger"] .shadow-lg { + box-shadow: none; +} +[data-theme="the-ai-ledger"] .bg-primary, +[data-theme="the-ai-ledger"] .hover\:bg-primary { + background-color: hsl(24 10% 12%); +} +[data-theme="the-ai-ledger"] header .rounded-lg { + border-radius: 1px; +} + +/* ---------- 4. DevAI.tools（niche）：深色终端 ---------- + 深色底、等宽字体、绿色主色、代码面板感 */ +[data-theme="devai-tools"] { + --background: 220 25% 7%; + --foreground: 210 20% 92%; + --primary: 150 60% 45%; + --primary-foreground: 220 25% 7%; + --secondary: 220 20% 13%; + --muted: 220 20% 13%; + --muted-foreground: 215 15% 62%; + --border: 218 18% 17%; + --ring: 150 60% 45%; + --card: 220 25% 9%; + --popover: 220 25% 9%; + --accent: 220 20% 15%; +} +[data-theme="devai-tools"] { + font-family: ui-sans-serif, system-ui, sans-serif; +} +[data-theme="devai-tools"] h1, +[data-theme="devai-tools"] h2, +[data-theme="devai-tools"] h3, +[data-theme="devai-tools"] header .font-bold { + font-family: ui-monospace, "SF Mono", Menlo, monospace; + letter-spacing: -0.01em; +} +[data-theme="devai-tools"] .bg-background, +[data-theme="devai-tools"] .group.relative { + background-color: hsl(220 25% 9%); +} +[data-theme="devai-tools"] .rounded-xl { border-radius: 0.5rem; } +[data-theme="devai-tools"] .text-primary { color: hsl(150 60% 45%); } + +/* ---------- 5. findai（minimal）：极简紫 ---------- + 纯白、无边框卡片、细分隔、紫罗兰、大留白 */ +[data-theme="findai"] { + --primary: 262 65% 52%; + --primary-foreground: 0 0% 100%; + --ring: 262 65% 52%; +} +[data-theme="findai"] .group.relative { + border-color: transparent; + box-shadow: none; + transition: background-color 0.15s ease; +} +[data-theme="findai"] .group.relative:hover { + background-color: hsl(262 40% 97%); +} +[data-theme="findai"] .shadow-lg { + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); +} +[data-theme="findai"] .rounded-full { border-radius: 999px; } + +/* ============================================================ + 深度设计层 v2 —— 每站完整的视觉语言（不只是换色） + ============================================================ */ + +/* ---------- 1. AI Stack：深蓝渐变 Hero + 统计条（专业 SaaS） ---------- */ +[data-theme="ai-stack"] .hero-dark { + background: linear-gradient(180deg, hsl(224 60% 14%) 0%, hsl(224 55% 22%) 75%, hsl(var(--background)) 100%); +} +[data-theme="ai-stack"] .hero-dark h1 { + color: white; +} +[data-theme="ai-stack"] .hero-dark p, +[data-theme="ai-stack"] .hero-dark span { + color: rgba(255, 255, 255, 0.65); +} +[data-theme="ai-stack"] .hero-dark input { + background: white; + border-color: transparent; +} +[data-theme="ai-stack"] .hero-dark .bg-secondary { + background-color: rgba(255, 255, 255, 0.12); + color: rgba(255, 255, 255, 0.85); +} +[data-theme="ai-stack"] .hero-dark .bg-secondary:hover { + background-color: rgba(255, 255, 255, 0.2); +} +[data-theme="ai-stack"] .group.relative { + border-left: 3px solid transparent; + transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; +} +[data-theme="ai-stack"] .group.relative:hover { + border-left-color: hsl(224 64% 40%); + box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); +} + +/* ---------- 2. LaunchAI：橙色渐变 Banner + 活力大字 ---------- */ +[data-theme="launchai"] .hero-launch { + background: linear-gradient(135deg, hsl(16 90% 50%) 0%, hsl(24 90% 55%) 100%); +} +[data-theme="launchai"] .hero-launch h1, +[data-theme="launchai"] .hero-launch p { + color: white; +} +[data-theme="launchai"] .hero-launch .text-muted-foreground { + color: rgba(255, 255, 255, 0.85); +} +[data-theme="launchai"] .hero-launch a.bg-primary, +[data-theme="launchai"] .hero-launch button.bg-primary { + background: white; + color: hsl(16 90% 50%); +} +[data-theme="launchai"] .border-l-4 { border-left-width: 4px; } +[data-theme="launchai"] .group.relative:hover { + transform: translateY(-1px); +} + +/* ---------- 3. The AI Ledger：黑色报头 + 报纸排版 ---------- */ +[data-theme="the-ai-ledger"] header { + border-bottom: 3px double hsl(24 10% 12%); +} +[data-theme="the-ai-ledger"] section:first-of-type { + border-bottom: 1px solid hsl(24 10% 12%); + background: transparent; +} +[data-theme="the-ai-ledger"] section:first-of-type h1 { + font-size: clamp(2rem, 5vw, 3.5rem); + font-weight: 900; +} +[data-theme="the-ai-ledger"] .hero-mast p:first-of-type { + text-transform: uppercase; + letter-spacing: 0.35em; + font-size: 11px; +} +[data-theme="the-ai-ledger"] .group.relative:hover h3 { + text-decoration: underline; + text-underline-offset: 3px; +} +[data-theme="the-ai-ledger"] .rounded-full.bg-primary, +[data-theme="the-ai-ledger"] a.bg-primary { + border-radius: 1px; +} +/* 首页大标题区域居中双细线（报纸报头风格） */ +[data-theme="the-ai-ledger"] .border-b.border-border { + border-bottom-style: double; + border-bottom-width: 3px; +} + +/* ---------- 4. DevAI.tools：扫描线 + 终端霓虹 ---------- */ +[data-theme="devai-tools"] { + background-image: repeating-linear-gradient( + 0deg, + rgba(150, 60% 45% / 0.015) 0px, + rgba(150, 60% 45% / 0.015) 1px, + transparent 1px, + transparent 3px + ); +} +[data-theme="devai-tools"] .group.relative { + border: 1px solid hsl(218 18% 17%); + transition: border-color 0.15s ease, box-shadow 0.15s ease; +} +[data-theme="devai-tools"] .group.relative:hover { + border-color: hsl(150 60% 45% / 0.5); + box-shadow: 0 0 0 1px hsl(150 60% 45% / 0.15), 0 0 24px hsl(150 60% 45% / 0.06); +} +[data-theme="devai-tools"] .rounded-xl.bg-primary { + background-color: hsl(150 60% 45%); + color: hsl(220 25% 7%); +} +[data-theme="devai-tools"] header .bg-secondary { + background-color: hsl(220 20% 13%); +} + +/* ---------- 5. findai：聚焦光圈 + 无界卡片 ---------- */ +[data-theme="findai"] input:focus { + box-shadow: 0 0 0 6px hsl(262 65% 52% / 0.08), 0 8px 30px hsl(262 65% 52% / 0.1); + border-color: hsl(262 65% 52% / 0.4); +} +[data-theme="findai"] .group.relative:hover h3 { + color: hsl(262 65% 52%); +} +[data-theme="findai"] .rounded-full.border { + border-color: hsl(0 0% 90%); +} + +/* LaunchAI hero 斜切签名条 */ +[data-theme="launchai"] section:first-of-type::after { + content: ""; + display: block; + height: 18px; + margin-top: -18px; + background: hsl(var(--background)); + clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%); +} diff --git a/sites/ai-stack/src/site/brand.tsx b/sites/ai-stack/src/site/brand.tsx index 7cc836a..a2505c9 100644 --- a/sites/ai-stack/src/site/brand.tsx +++ b/sites/ai-stack/src/site/brand.tsx @@ -2,6 +2,7 @@ import type { SiteConfig } from "@/kit/types"; // AI Stack —— 独立站点的全部品牌/导航/页脚配置 export const siteConfig: SiteConfig = { + "themeClass": "site-ai-stack", "brandZh": { "name": "AI Stack", "tagline": "由真实用户排名的专业 AI 工具目录。", diff --git a/sites/ai-stack/src/site/home.tsx b/sites/ai-stack/src/site/home.tsx index de1259f..9c35d33 100644 --- a/sites/ai-stack/src/site/home.tsx +++ b/sites/ai-stack/src/site/home.tsx @@ -58,7 +58,7 @@ async function SiteHome({ locale }: { locale: string }) { return (
{/* Hero */} -
+

{th("title")} @@ -83,13 +83,28 @@ async function SiteHome({ locale }: { locale: string }) {

-
- {t("popularLabel")} + + {/* 统计条（深色 Hero 内的白色数字） */} +
+ {[ + { v: "1,000+", l: "AI tools" }, + { v: "14", l: "Categories" }, + { v: "7", l: "Rankings" }, + ].map((s) => ( +
+
{s.v}
+
{s.l}
+
+ ))} +
+ +
+ {t("popularLabel")} {t.raw("popularSearches").map((q: string) => ( {q} diff --git a/sites/devai-tools/src/site/brand.tsx b/sites/devai-tools/src/site/brand.tsx index c62f491..5057ae9 100644 --- a/sites/devai-tools/src/site/brand.tsx +++ b/sites/devai-tools/src/site/brand.tsx @@ -2,6 +2,7 @@ import type { SiteConfig } from "@/kit/types"; // DevAI.tools —— 独立站点的全部品牌/导航/页脚配置 export const siteConfig: SiteConfig = { + "themeClass": "site-devai-tools", "brandZh": { "name": "DevAI.tools", "tagline": "面向开发者的 AI 工具——精选、实测、社区排名。", diff --git a/sites/devai-tools/src/site/home.tsx b/sites/devai-tools/src/site/home.tsx index e08674d..c1e5218 100644 --- a/sites/devai-tools/src/site/home.tsx +++ b/sites/devai-tools/src/site/home.tsx @@ -51,7 +51,13 @@ async function SiteHome({ locale }: { locale: string }) { return (
- {/* Terminal 风格 Hero */} + {/* Terminal 风格 Hero + 绿色系统状态条 */} +
+
+ + system: online · 1,000+ tools indexed · updated hourly +
+
diff --git a/sites/findai/src/site/brand.tsx b/sites/findai/src/site/brand.tsx index fc7f901..c6a8a66 100644 --- a/sites/findai/src/site/brand.tsx +++ b/sites/findai/src/site/brand.tsx @@ -2,6 +2,7 @@ import type { SiteConfig } from "@/kit/types"; // findai —— 独立站点的全部品牌/导航/页脚配置 export const siteConfig: SiteConfig = { + "themeClass": "site-findai", "brandZh": { "name": "findai", "tagline": "极简 AI 工具搜索引擎。", diff --git a/sites/findai/src/site/home.tsx b/sites/findai/src/site/home.tsx index 596b60d..4d2d223 100644 --- a/sites/findai/src/site/home.tsx +++ b/sites/findai/src/site/home.tsx @@ -73,6 +73,7 @@ async function SiteHome({ locale }: { locale: string }) {
+
{popularSearches.map((q) => ( {/* Hero：今日发布 */} -
+

{th("title")} diff --git a/sites/the-ai-ledger/src/site/brand.tsx b/sites/the-ai-ledger/src/site/brand.tsx index 65a6981..694d175 100644 --- a/sites/the-ai-ledger/src/site/brand.tsx +++ b/sites/the-ai-ledger/src/site/brand.tsx @@ -2,6 +2,7 @@ import type { SiteConfig } from "@/kit/types"; // The AI Ledger —— 独立站点的全部品牌/导航/页脚配置 export const siteConfig: SiteConfig = { + "themeClass": "site-the-ai-ledger", "brandZh": { "name": "The AI Ledger", "tagline": "独立 AI 报道，附社区排名目录。", diff --git a/sites/the-ai-ledger/src/site/home.tsx b/sites/the-ai-ledger/src/site/home.tsx index df52662..a1f22c5 100644 --- a/sites/the-ai-ledger/src/site/home.tsx +++ b/sites/the-ai-ledger/src/site/home.tsx @@ -54,6 +54,15 @@ async function SiteHome({ locale }: { locale: string }) { return (
+ {/* Masthead：黑色报头条（当日日期 + 期号），报纸头版签名 */} +
+
+ {new Date().toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" })} + Est. 2026 + Daily +
+
+ {/* Masthead */}