feat(admin): 官网落地页融进 admin —— / 是官网、/admin 是运维后台
用户要 agent.sundynix.cn/ 打开是营销官网、/admin 是后台,且只用一个前端。 把 sundynix-site/web 的营销落地页融进 sundynix-admin 这一个 Vite 工程(不挂两份 embed): - 拷官网到 src/site/:home(hero/功能/架构/快速上手/下载)+layout(header/footer) +terminal-demo/logo/reveal 等 + content/site.ts(文案本就是本产品)。去掉博客/posts/埋点/RSS (营销 only,零后端改动);use-release 改纯静态版本号。public/ 加 brand logo+favicon。 - Tailwind v4→v3 对齐:site 的 ink/ground/accent/term 等 token 加进 tailwind.config(var 引用) + :root/.dark 变量+keyframes 进 index.css;bg-ground/85 用 color-mix 还原。admin 自身用默认 gray/violet 调色板,不冲突;landing 的 bg-ground 只作用在 SiteLayout 容器、不改 body。 - 路由重构:App.tsx 换 BrowserRouter —— / 官网(公开)、/admin/* 后台(AdminGate 内做 me/Login/AppShell)。 routes.tsx path 改相对、AppShell 链接加 /admin 前缀。@ 别名指向 src/site。 - gateway/Dockerfile/nginx 零改动:单份 dist 挂根 + NoRoute SPA 兜底已支持 BrowserRouter 深链。 验证:tsc + vite build(Tailwind 编译过)+ vitest 41 过;gateway 二进制冒烟打真 serve—— / 返回官网 index.html、/admin 与 /admin/tasks SPA 兜底 200、/brand/*.webp 200、/api/v1 走 API 401; dist 里确认落地页文案已进 bundle。(注:MCP 浏览器当前断开,视觉渲染待部署后线上看。) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Blizzard
@@ -3,7 +3,9 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>sundynix-agentix · 运维控制台</title>
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||
<title>sundynix agentix · 事件驱动的 AI Agent 工作台</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
Generated
+32
-1
@@ -8,9 +8,12 @@
|
||||
"name": "sundynix-admin",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^1.25.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-router-dom": "^7.1.0"
|
||||
"react-router-dom": "^7.1.0",
|
||||
"tailwind-merge": "^3.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/jest-dom": "^6.9.1",
|
||||
@@ -2357,6 +2360,15 @@
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/clsx": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
|
||||
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/commander": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
|
||||
@@ -3220,6 +3232,15 @@
|
||||
"yallist": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/lucide-react": {
|
||||
"version": "1.25.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.25.0.tgz",
|
||||
"integrity": "sha512-/mdJTRbiwcLOQ1NZZK1amZF9rIZyvO18D6r9TngE6TG1NmqHgFuT4eE7Xrkm9UsXMbBJD1NlfwHVltCDWHrOTw==",
|
||||
"license": "ISC",
|
||||
"peerDependencies": {
|
||||
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/lz-string": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
|
||||
@@ -4040,6 +4061,16 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tailwind-merge": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
|
||||
"integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/dcastil"
|
||||
}
|
||||
},
|
||||
"node_modules/tailwindcss": {
|
||||
"version": "3.4.19",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
|
||||
|
||||
@@ -11,9 +11,12 @@
|
||||
"test:watch": "vitest"
|
||||
},
|
||||
"dependencies": {
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^1.25.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-router-dom": "^7.1.0"
|
||||
"react-router-dom": "^7.1.0",
|
||||
"tailwind-merge": "^3.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/jest-dom": "^6.9.1",
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 308 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
@@ -1,11 +1,18 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { HashRouter } from "react-router-dom";
|
||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||
import { AppShell } from "./shell/AppShell";
|
||||
import { Login } from "./Login";
|
||||
import { me, clearToken, type AuthUser } from "./api";
|
||||
|
||||
// 用 HashRouter：纯静态托管/桌面内嵌都能深链，无需服务端路由配置。
|
||||
export default function App() {
|
||||
// 官网落地页（融进本工程，src/site/），挂根 /。
|
||||
import { SiteLayout } from "./site/components/layout/site-layout";
|
||||
import HomePage from "./site/pages/home";
|
||||
import DownloadPage from "./site/pages/download";
|
||||
import NotFoundPage from "./site/pages/not-found";
|
||||
|
||||
// 后台鉴权门：只在访问 /admin 时跑 me()（官网公开、不打鉴权）。
|
||||
// 未登录 → Login；登录后 → AppShell（其内部再渲染 /admin/* 子路由）。
|
||||
function AdminGate() {
|
||||
const [user, setUser] = useState<AuthUser | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
@@ -26,7 +33,6 @@ export default function App() {
|
||||
return <Login onAuthed={setUser} />;
|
||||
}
|
||||
return (
|
||||
<HashRouter>
|
||||
<AppShell
|
||||
user={user}
|
||||
onLogout={() => {
|
||||
@@ -34,6 +40,24 @@ export default function App() {
|
||||
setUser(null);
|
||||
}}
|
||||
/>
|
||||
</HashRouter>
|
||||
);
|
||||
}
|
||||
|
||||
// 用 BrowserRouter（路径式）：/ = 官网、/admin = 运维后台。
|
||||
// gateway 的 NoRoute 对非 /api、非文件路径回退 index.html，故深链/刷新都能工作。
|
||||
export default function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
{/* 后台：/admin 前缀，最具体，优先匹配 */}
|
||||
<Route path="/admin/*" element={<AdminGate />} />
|
||||
{/* 官网：根 / + /download，公开；未知路径落官网 404（保留 header/footer） */}
|
||||
<Route element={<SiteLayout />}>
|
||||
<Route index element={<HomePage />} />
|
||||
<Route path="download" element={<DownloadPage />} />
|
||||
<Route path="*" element={<NotFoundPage />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -8,3 +8,111 @@ body,
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ══ 官网落地页设计 token（跟随 logo：青→蓝→紫）══
|
||||
仅 src/site/ 的落地页组件用这些；admin 控制台用默认 gray/violet 调色板，互不影响。
|
||||
bg-ground/text-ink 等只作用在 SiteLayout 的容器上（见 site-layout.tsx），不改 body。 */
|
||||
:root {
|
||||
--ground: #f5f7f9;
|
||||
--surface: #ffffff;
|
||||
--ink: #151c24;
|
||||
--ink-2: #526069;
|
||||
--ink-3: #8595a0;
|
||||
--hairline: #e0e7ec;
|
||||
--hairline-strong: #c6d2da;
|
||||
--accent: #0284c7;
|
||||
--accent-ink: #075985;
|
||||
--accent-soft: #e0f2fe;
|
||||
--code-bg: #ebf1f5;
|
||||
--term-bg: #0e1620;
|
||||
--term-ink: #c9e4f5;
|
||||
--brand-g1: #0891b2;
|
||||
--brand-g2: #2563eb;
|
||||
--brand-g3: #9333ea;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--ground: #0b1117;
|
||||
--surface: #111925;
|
||||
--ink: #e6edf3;
|
||||
--ink-2: #93a6b4;
|
||||
--ink-3: #62737f;
|
||||
--hairline: #1f2c38;
|
||||
--hairline-strong: #32434f;
|
||||
--accent: #38bdf8;
|
||||
--accent-ink: #7dd3fc;
|
||||
--accent-soft: #0b3049;
|
||||
--code-bg: #14202b;
|
||||
--term-bg: #0a121b;
|
||||
--term-ink: #bfe3f7;
|
||||
--brand-g1: #22d3ee;
|
||||
--brand-g2: #60a5fa;
|
||||
--brand-g3: #c084fc;
|
||||
}
|
||||
|
||||
/* v3 对 var() 色不支持 /opacity 修饰，用 color-mix 还原 bg-ground/85（sticky 头透底 + 模糊）。 */
|
||||
.bg-ground-85 {
|
||||
background-color: color-mix(in srgb, var(--ground) 85%, transparent);
|
||||
}
|
||||
|
||||
/* 品牌渐变文字（logo 同源：青→蓝→紫），落地页克制使用 */
|
||||
.text-brand-gradient {
|
||||
background: linear-gradient(92deg, var(--brand-g1), var(--brand-g2) 55%, var(--brand-g3));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* 终端光标 */
|
||||
@keyframes caret-blink {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.caret-blink {
|
||||
animation: caret-blink 1.1s steps(1) infinite;
|
||||
}
|
||||
|
||||
/* 滚动进场（配合 Reveal 组件） */
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
transition:
|
||||
opacity 0.6s ease,
|
||||
transform 0.6s ease;
|
||||
}
|
||||
.reveal-in {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* 终端事件流：逐行浮现 */
|
||||
@keyframes term-line-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
.term-line {
|
||||
opacity: 0;
|
||||
animation: term-line-in 0.45s ease forwards;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.caret-blink,
|
||||
.term-line {
|
||||
animation: none;
|
||||
}
|
||||
.term-line {
|
||||
opacity: 1;
|
||||
}
|
||||
.reveal {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,84 +27,84 @@ export interface RouteDef {
|
||||
|
||||
export const routes: RouteDef[] = [
|
||||
{
|
||||
path: "/dashboard",
|
||||
path: "dashboard",
|
||||
label: "概览",
|
||||
group: "分析",
|
||||
ready: true,
|
||||
element: <DashboardPage />,
|
||||
},
|
||||
{
|
||||
path: "/usage",
|
||||
path: "usage",
|
||||
label: "计费 & 用量",
|
||||
group: "分析",
|
||||
ready: true,
|
||||
element: <UsagePage />,
|
||||
},
|
||||
{
|
||||
path: "/models",
|
||||
path: "models",
|
||||
label: "模型",
|
||||
group: "配置",
|
||||
ready: true,
|
||||
element: <ModelsPage />,
|
||||
},
|
||||
{
|
||||
path: "/datasources",
|
||||
path: "datasources",
|
||||
label: "数据源 & RAG",
|
||||
group: "配置",
|
||||
ready: true,
|
||||
element: <DatasourcesPage />,
|
||||
},
|
||||
{
|
||||
path: "/prompts",
|
||||
path: "prompts",
|
||||
label: "提示词",
|
||||
group: "配置",
|
||||
ready: true,
|
||||
element: <PromptsPage />,
|
||||
},
|
||||
{
|
||||
path: "/status",
|
||||
path: "status",
|
||||
label: "服务状态",
|
||||
group: "运维",
|
||||
ready: true,
|
||||
element: <StatusPage />,
|
||||
},
|
||||
{
|
||||
path: "/tasks",
|
||||
path: "tasks",
|
||||
label: "任务观测",
|
||||
group: "运维",
|
||||
ready: true,
|
||||
element: <TasksPage />,
|
||||
},
|
||||
{
|
||||
path: "/evals",
|
||||
path: "evals",
|
||||
label: "自动评测",
|
||||
group: "运维",
|
||||
ready: true,
|
||||
element: <EvalsPage />,
|
||||
},
|
||||
{
|
||||
path: "/audit",
|
||||
path: "audit",
|
||||
label: "审计 & 安全",
|
||||
group: "运维",
|
||||
ready: true,
|
||||
element: <AuditPage />,
|
||||
},
|
||||
{
|
||||
path: "/tenants",
|
||||
path: "tenants",
|
||||
label: "租户 & 用户",
|
||||
group: "平台",
|
||||
ready: true,
|
||||
element: <TenantsPage />,
|
||||
},
|
||||
{
|
||||
path: "/spaces",
|
||||
path: "spaces",
|
||||
label: "空间",
|
||||
group: "平台",
|
||||
ready: true,
|
||||
element: <SpacesPage />,
|
||||
},
|
||||
{
|
||||
path: "/guardrails",
|
||||
path: "guardrails",
|
||||
label: "安全护栏",
|
||||
group: "平台",
|
||||
ready: true,
|
||||
@@ -112,7 +112,7 @@ export const routes: RouteDef[] = [
|
||||
},
|
||||
];
|
||||
|
||||
export const defaultPath = "/dashboard";
|
||||
export const defaultPath = "dashboard";
|
||||
|
||||
// 派生分组导航（保持注册顺序）。
|
||||
export function navGroups(): Array<{ group: string; items: RouteDef[] }> {
|
||||
|
||||
@@ -4,11 +4,15 @@ import { NavLink, Routes, Route, Navigate, useLocation } from "react-router-dom"
|
||||
import { routes, navGroups, defaultPath } from "../routes";
|
||||
import { gatewayOnline, type AuthUser } from "../api";
|
||||
|
||||
// 控制台挂在 /admin 前缀下（根 / 是官网）。路由注册表里 path 为相对（dashboard 等），
|
||||
// 链接/匹配时统一加 /admin 前缀。
|
||||
const ADMIN_BASE = "/admin";
|
||||
|
||||
// 控制台外壳：导航与内容均由路由注册表派生（动态路由）。
|
||||
export function AppShell({ user, onLogout }: { user: AuthUser; onLogout: () => void }) {
|
||||
const [online, setOnline] = useState(false);
|
||||
const loc = useLocation();
|
||||
const current = routes.find((r) => r.path === loc.pathname);
|
||||
const current = routes.find((r) => `${ADMIN_BASE}/${r.path}` === loc.pathname);
|
||||
|
||||
useEffect(() => {
|
||||
const ping = () => gatewayOnline().then(setOnline);
|
||||
@@ -31,7 +35,7 @@ export function AppShell({ user, onLogout }: { user: AuthUser; onLogout: () => v
|
||||
{g.items.map((r) => (
|
||||
<NavLink
|
||||
key={r.path}
|
||||
to={r.path}
|
||||
to={`${ADMIN_BASE}/${r.path}`}
|
||||
className={({ isActive }) =>
|
||||
`flex items-center justify-between rounded px-3 py-2 text-sm ${
|
||||
isActive ? "bg-violet-50 font-medium text-violet-700" : "text-gray-600 hover:bg-gray-100"
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
import { DOWNLOADS } from '@/content/site'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
export function DownloadGrid() {
|
||||
return (
|
||||
<div className="mx-auto grid max-w-[780px] grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
{DOWNLOADS.map((d) => (
|
||||
<div
|
||||
key={d.os}
|
||||
className="rounded-xl border border-hairline bg-surface p-6 text-center transition-colors hover:border-accent"
|
||||
>
|
||||
<div className="mb-1 text-[15.5px] font-semibold">{d.os}</div>
|
||||
<div className="mb-4 font-mono text-[11.5px] text-ink-3">
|
||||
{d.meta}
|
||||
</div>
|
||||
<a
|
||||
href={d.href}
|
||||
className={cn(
|
||||
'inline-block rounded-[7px] px-5 py-1.5 text-[13.5px] font-medium transition-opacity hover:opacity-90',
|
||||
d.highlight
|
||||
? 'bg-accent text-ground'
|
||||
: 'border border-hairline-strong text-accent-ink',
|
||||
)}
|
||||
>
|
||||
{d.action}
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import { SITE } from '@/content/site'
|
||||
import { LogoMark } from '@/components/logo'
|
||||
|
||||
const COLUMNS = [
|
||||
{
|
||||
title: 'PRODUCT',
|
||||
links: [
|
||||
{ label: '功能', href: '/#features' },
|
||||
{ label: '架构', href: '/#architecture' },
|
||||
{ label: '下载', href: '/download', internal: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'RESOURCES',
|
||||
links: [
|
||||
{ label: '下载桌面版', href: '/download', internal: true },
|
||||
{ label: '源码仓库', href: SITE.repo },
|
||||
],
|
||||
},
|
||||
] as const
|
||||
|
||||
export function SiteFooter() {
|
||||
return (
|
||||
<footer className="border-t border-hairline">
|
||||
<div className="mx-auto grid max-w-6xl gap-10 px-6 py-12 md:grid-cols-[1.5fr_1fr_1fr] lg:px-10">
|
||||
<div>
|
||||
<p className="flex items-center gap-2.5 font-mono text-[15px] font-semibold">
|
||||
<LogoMark size={30} />
|
||||
sundynix <em className="not-italic text-accent">agentix</em>
|
||||
</p>
|
||||
<p className="mt-2 text-[14px] text-ink-2">{SITE.tagline}</p>
|
||||
<p className="mt-4 font-mono text-[11.5px] tracking-[0.08em] text-ink-3">
|
||||
{SITE.version} · MACOS / WINDOWS / SELF-HOSTED
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{COLUMNS.map((col) => (
|
||||
<nav key={col.title} aria-label={col.title}>
|
||||
<p className="mb-3.5 font-mono text-[11px] tracking-[0.16em] text-ink-3">
|
||||
{col.title}
|
||||
</p>
|
||||
<ul className="space-y-2.5">
|
||||
{col.links.map((link) => (
|
||||
<li key={link.label}>
|
||||
{'internal' in link && link.internal ? (
|
||||
<Link
|
||||
to={link.href}
|
||||
className="text-[13.5px] text-ink-2 transition-colors hover:text-accent-ink"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
) : (
|
||||
<a
|
||||
href={link.href}
|
||||
target={link.href.startsWith('http') ? '_blank' : undefined}
|
||||
rel={link.href.startsWith('http') ? 'noreferrer' : undefined}
|
||||
className="text-[13.5px] text-ink-2 transition-colors hover:text-accent-ink"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-hairline">
|
||||
<div className="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-x-6 gap-y-2 px-6 py-5 font-mono text-[12px] text-ink-3 lg:px-10">
|
||||
<span>© 2026 SUNDYNIX AGENTIX</span>
|
||||
<a
|
||||
href="https://beian.miit.gov.cn/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="transition-colors hover:text-accent-ink"
|
||||
>
|
||||
{SITE.icp}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
import { useState } from 'react'
|
||||
import { Link, NavLink } from 'react-router-dom'
|
||||
import { Menu, Moon, Sun, X } from 'lucide-react'
|
||||
import { useTheme } from '@/components/theme-provider'
|
||||
import { LogoMark } from '@/components/logo'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const NAV_ITEMS = [
|
||||
{ label: '产品', to: '/', end: true },
|
||||
{ label: '功能', to: '/#features' },
|
||||
{ label: '架构', to: '/#architecture' },
|
||||
]
|
||||
|
||||
function ThemeToggle() {
|
||||
const { resolved, setTheme } = useTheme()
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
aria-label={resolved === 'dark' ? '切换到浅色主题' : '切换到深色主题'}
|
||||
onClick={() => setTheme(resolved === 'dark' ? 'light' : 'dark')}
|
||||
className="flex size-8 items-center justify-center rounded-full border border-hairline-strong text-ink-2 transition-colors hover:border-accent hover:text-accent-ink"
|
||||
>
|
||||
{resolved === 'dark' ? (
|
||||
<Sun className="size-4" />
|
||||
) : (
|
||||
<Moon className="size-4" />
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export function SiteHeader() {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const links = NAV_ITEMS.map((item) =>
|
||||
item.to.includes('#') ? (
|
||||
<a
|
||||
key={item.to}
|
||||
href={item.to}
|
||||
onClick={() => setOpen(false)}
|
||||
className="text-sm text-ink-2 transition-colors hover:text-ink"
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
) : (
|
||||
<NavLink
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
end={item.end}
|
||||
onClick={() => setOpen(false)}
|
||||
className={({ isActive }) =>
|
||||
cn(
|
||||
'text-sm transition-colors hover:text-ink',
|
||||
isActive ? 'text-ink' : 'text-ink-2',
|
||||
)
|
||||
}
|
||||
>
|
||||
{item.label}
|
||||
</NavLink>
|
||||
),
|
||||
)
|
||||
|
||||
return (
|
||||
<header className="bg-ground-85 sticky top-0 z-40 border-b border-hairline backdrop-blur">
|
||||
<div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6 lg:px-10">
|
||||
<Link to="/" className="flex items-center gap-2.5 font-mono text-[15px] font-semibold">
|
||||
<LogoMark size={26} />
|
||||
sundynix <em className="not-italic text-accent">agentix</em>
|
||||
</Link>
|
||||
|
||||
<nav className="hidden items-center gap-7 md:flex">
|
||||
{links}
|
||||
<ThemeToggle />
|
||||
<Link
|
||||
to="/download"
|
||||
className="rounded-[7px] bg-accent px-4 py-1.5 text-[13px] font-medium text-ground transition-opacity hover:opacity-90"
|
||||
>
|
||||
下载桌面版
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-3 md:hidden">
|
||||
<ThemeToggle />
|
||||
<button
|
||||
type="button"
|
||||
aria-label={open ? '关闭菜单' : '打开菜单'}
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
className="flex size-8 items-center justify-center text-ink-2"
|
||||
>
|
||||
{open ? <X className="size-5" /> : <Menu className="size-5" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{open && (
|
||||
<nav className="flex flex-col gap-4 border-t border-hairline px-6 py-5 md:hidden">
|
||||
{links}
|
||||
<Link
|
||||
to="/download"
|
||||
onClick={() => setOpen(false)}
|
||||
className="w-fit rounded-[7px] bg-accent px-4 py-1.5 text-[13px] font-medium text-ground"
|
||||
>
|
||||
下载桌面版
|
||||
</Link>
|
||||
</nav>
|
||||
)}
|
||||
</header>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { useEffect } from 'react'
|
||||
import { Outlet, useLocation } from 'react-router-dom'
|
||||
import { SiteHeader } from '@/components/layout/site-header'
|
||||
import { SiteFooter } from '@/components/layout/site-footer'
|
||||
|
||||
export function SiteLayout() {
|
||||
const { pathname } = useLocation()
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0)
|
||||
}, [pathname])
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col bg-ground font-sans text-ink antialiased">
|
||||
<SiteHeader />
|
||||
<main className="flex-1">
|
||||
<Outlet />
|
||||
</main>
|
||||
<SiteFooter />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
interface LogoMarkProps {
|
||||
size?: number
|
||||
className?: string
|
||||
}
|
||||
|
||||
/** 品牌 Logo：霓虹数据流 S（用户原版位图裁切，源图在 design-assets/） */
|
||||
export function LogoMark({ size = 28, className }: LogoMarkProps) {
|
||||
return (
|
||||
<img
|
||||
src="/brand/logo-mark.webp"
|
||||
width={size}
|
||||
height={size}
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
className={className}
|
||||
style={{ borderRadius: '22%' }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { useEffect, useRef, useState, type ReactNode } from 'react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface RevealProps {
|
||||
children: ReactNode
|
||||
className?: string
|
||||
/** 进场延迟（毫秒），用于同屏元素错峰 */
|
||||
delay?: number
|
||||
}
|
||||
|
||||
/** 滚动进场：进入视口后淡入上移一次；prefers-reduced-motion 时直接显示 */
|
||||
export function Reveal({ children, className, delay = 0 }: RevealProps) {
|
||||
const ref = useRef<HTMLDivElement>(null)
|
||||
const [visible, setVisible] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current
|
||||
if (!el) return
|
||||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
||||
setVisible(true)
|
||||
return
|
||||
}
|
||||
const io = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
setVisible(true)
|
||||
io.disconnect()
|
||||
}
|
||||
},
|
||||
{ threshold: 0.15, rootMargin: '0px 0px -40px 0px' },
|
||||
)
|
||||
io.observe(el)
|
||||
return () => io.disconnect()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
style={delay ? { transitionDelay: `${delay}ms` } : undefined}
|
||||
className={cn('reveal', visible && 'reveal-in', className)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
export function SectionLabel({ children }: { children: string }) {
|
||||
return (
|
||||
<span className="mb-2.5 block font-mono text-[11px] tracking-[0.18em] text-accent">
|
||||
{children}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import { TERMINAL_DEMO } from '@/content/site'
|
||||
|
||||
/** Hero 事件流终端窗 — 双主题共用深色 */
|
||||
export function TerminalDemo() {
|
||||
return (
|
||||
<div className="mx-auto mt-13 max-w-[720px] overflow-hidden rounded-t-xl border border-b-0 border-hairline-strong bg-term text-left">
|
||||
<div className="flex items-center gap-2 border-b border-white/[0.07] px-4 py-2.5">
|
||||
{[0, 1, 2].map((i) => (
|
||||
<span key={i} className="size-2.5 rounded-full bg-white/[0.18]" />
|
||||
))}
|
||||
<span className="ml-2.5 font-mono text-[11.5px] tracking-[0.1em] text-white/40">
|
||||
{TERMINAL_DEMO.title}
|
||||
</span>
|
||||
</div>
|
||||
<div className="overflow-x-auto px-5 pb-6 pt-5 font-mono text-[13.5px] leading-[2.05] text-term-ink">
|
||||
<div className="term-line">
|
||||
<span className="font-semibold text-[#22d3ee]">› </span>
|
||||
{TERMINAL_DEMO.prompt}
|
||||
</div>
|
||||
<div className="term-line text-white/35" style={{ animationDelay: '0.35s' }}>
|
||||
──────────────────────────────────
|
||||
</div>
|
||||
{TERMINAL_DEMO.events.map((ev, i) => (
|
||||
<div
|
||||
key={ev.tag}
|
||||
className="term-line whitespace-nowrap"
|
||||
style={{ animationDelay: `${0.7 + i * 0.45}s` }}
|
||||
>
|
||||
<span className={ev.ok ? 'text-[#a6d96a]' : 'text-[#60a5fa]'}>
|
||||
[{ev.tag}]
|
||||
</span>{' '}
|
||||
{ev.text}
|
||||
{i === TERMINAL_DEMO.events.length - 1 && (
|
||||
<span className="caret-blink ml-1 inline-block h-[15px] w-2 translate-y-0.5 bg-[#22d3ee]" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import {
|
||||
createContext,
|
||||
useContext,
|
||||
useEffect,
|
||||
useState,
|
||||
type ReactNode,
|
||||
} from 'react'
|
||||
|
||||
type Theme = 'light' | 'dark' | 'system'
|
||||
|
||||
interface ThemeContextValue {
|
||||
theme: Theme
|
||||
resolved: 'light' | 'dark'
|
||||
setTheme: (t: Theme) => void
|
||||
}
|
||||
|
||||
const ThemeContext = createContext<ThemeContextValue | null>(null)
|
||||
|
||||
const STORAGE_KEY = 'sundynix-theme'
|
||||
|
||||
function systemTheme(): 'light' | 'dark' {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
? 'dark'
|
||||
: 'light'
|
||||
}
|
||||
|
||||
export function ThemeProvider({ children }: { children: ReactNode }) {
|
||||
const [theme, setThemeState] = useState<Theme>(
|
||||
() => (localStorage.getItem(STORAGE_KEY) as Theme) ?? 'system',
|
||||
)
|
||||
const [resolved, setResolved] = useState<'light' | 'dark'>(() =>
|
||||
theme === 'system' ? systemTheme() : theme,
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
const apply = () => {
|
||||
const r = theme === 'system' ? systemTheme() : theme
|
||||
setResolved(r)
|
||||
document.documentElement.classList.toggle('dark', r === 'dark')
|
||||
}
|
||||
apply()
|
||||
const mq = window.matchMedia('(prefers-color-scheme: dark)')
|
||||
mq.addEventListener('change', apply)
|
||||
return () => mq.removeEventListener('change', apply)
|
||||
}, [theme])
|
||||
|
||||
const setTheme = (t: Theme) => {
|
||||
localStorage.setItem(STORAGE_KEY, t)
|
||||
setThemeState(t)
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={{ theme, resolved, setTheme }}>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function useTheme() {
|
||||
const ctx = useContext(ThemeContext)
|
||||
if (!ctx) throw new Error('useTheme must be used within ThemeProvider')
|
||||
return ctx
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
/** 站点文案与数据，改这里即可，不用动组件 */
|
||||
|
||||
export const SITE = {
|
||||
/** 静态回退版本号；线上以 /api/releases/latest 为准 */
|
||||
version: 'v0.1.2',
|
||||
tagline: '事件驱动的 AI Agent 工作台',
|
||||
repo: 'https://git.sundynix.cn/sundynix/sundynix-agentix',
|
||||
icp: '滇ICP备2025056308号-1',
|
||||
}
|
||||
|
||||
export const TERMINAL_DEMO = {
|
||||
title: 'SUNDYNIX.STREAMS.RT-7F2A',
|
||||
prompt: '帮我调研「2026 国产大模型推理成本」，出一份带图表的报告',
|
||||
events: [
|
||||
{
|
||||
tag: 'coordinator',
|
||||
text: '已拆解为 3 个子任务，派发 researcher × 2 · writer × 1',
|
||||
},
|
||||
{
|
||||
tag: 'knowledge',
|
||||
text: '三路混合检索 · vector + fulltext + graph · RRF 融合',
|
||||
},
|
||||
{ tag: 'harness', text: '输出守卫通过 · 预算 ¥2.00 剩余 ¥1.37' },
|
||||
{
|
||||
tag: 'report',
|
||||
text: '大纲 5 章已确认，并行撰写中 → 推理成本分析.docx',
|
||||
ok: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
export const FEATURES = [
|
||||
{
|
||||
label: 'STUDIO',
|
||||
title: '可视化编排画布',
|
||||
desc: 'React Flow 画布拖出工作流，导出 JSON DSL 直接执行；分支路由、map 并行扇出、⌘K 命令面板。',
|
||||
},
|
||||
{
|
||||
label: 'MULTI-AGENT',
|
||||
title: '多智能体协作',
|
||||
desc: 'Orchestrator–Worker 模式：主脑撰写任务简报，并行派发专家 Agent，团队视图实时看它们「上班」。',
|
||||
},
|
||||
{
|
||||
label: 'KNOWLEDGE',
|
||||
title: '三路混合检索知识库',
|
||||
desc: '向量 + 全文 + 知识图谱三路召回，RRF 融合重排；双链笔记、反向链接与关系图谱，检索过程可调试。',
|
||||
},
|
||||
{
|
||||
label: 'REPORT',
|
||||
title: '真 · Word 报告生成',
|
||||
desc: '选题 → 大纲规划 → 分章并行研究撰写，产出原生 .docx（零依赖 OOXML 渲染），另有 PDF / Markdown。',
|
||||
},
|
||||
{
|
||||
label: 'MEMORY',
|
||||
title: '长期记忆',
|
||||
desc: '异步批量固化（ADD/UPDATE/DELETE），近因 × 重要性衰减打分，记忆面板随时可查可改。',
|
||||
},
|
||||
{
|
||||
label: 'HARNESS',
|
||||
title: '可靠性套件',
|
||||
desc: '提示注入拦截、流式密钥脱敏、熔断器、LLM 评审自动纠偏、成本预算上限——生产级守卫全内置。',
|
||||
},
|
||||
{
|
||||
label: 'SANDBOX',
|
||||
title: '代码解释器沙箱',
|
||||
desc: 'AST 静态审查 + Docker 隔离：无网络、非 root、只读根文件系统，让 Agent 放心跑代码。',
|
||||
},
|
||||
{
|
||||
label: 'STREAMING',
|
||||
title: '一切皆流式',
|
||||
desc: 'NATS 零拷贝骨干网直推 SSE/WS，节点级执行轨迹实时可见，Prometheus + OTel 全链路观测。',
|
||||
},
|
||||
]
|
||||
|
||||
export const ARCH_LAYERS = [
|
||||
{
|
||||
id: 'L1 · CLIENT',
|
||||
name: '桌面工作台',
|
||||
detail: '· Web / 管理控制台',
|
||||
tech: 'wails3 · react19',
|
||||
},
|
||||
{
|
||||
id: 'L2 · GATEWAY',
|
||||
name: 'API 网关',
|
||||
detail: '· 鉴权 / DSL 解析 / 计费 / 守卫',
|
||||
tech: 'gin · postgres · redis',
|
||||
},
|
||||
{
|
||||
id: 'L4 · DISPATCHER',
|
||||
name: '图执行引擎',
|
||||
detail: '· Agent Loop / LLM Pool',
|
||||
tech: 'eino · openai-compat',
|
||||
},
|
||||
{
|
||||
id: 'L5 · TOOLS',
|
||||
name: 'MCP 工具层',
|
||||
detail: '· 检索 / 解析 / 沙箱',
|
||||
tech: 'milvus · bleve · neo4j · py3.11',
|
||||
},
|
||||
]
|
||||
|
||||
export const QUICKSTART_STEPS = [
|
||||
{
|
||||
title: '下载或克隆。',
|
||||
desc: '桌面版开箱即用；自部署走 docker compose。',
|
||||
},
|
||||
{
|
||||
title: '接入模型。',
|
||||
desc: '任何 OpenAI 兼容端点：DeepSeek、百炼……填 Key 即可。',
|
||||
},
|
||||
{
|
||||
title: '喂知识，派任务。',
|
||||
desc: '拖入文档建库，画布编排或直接对话，看团队开工。',
|
||||
},
|
||||
]
|
||||
|
||||
export const DOWNLOADS = [
|
||||
{
|
||||
os: 'macOS',
|
||||
meta: 'universal · .app · v0.1.2',
|
||||
action: '下载 .dmg',
|
||||
href: `${SITE.repo}/releases`,
|
||||
highlight: true,
|
||||
},
|
||||
{
|
||||
os: 'Windows',
|
||||
meta: 'x64 · .exe · v0.1.2',
|
||||
action: '下载 .exe',
|
||||
href: `${SITE.repo}/releases`,
|
||||
highlight: false,
|
||||
},
|
||||
{
|
||||
os: '自托管',
|
||||
meta: 'docker compose · 全平台',
|
||||
action: '部署文档',
|
||||
href: SITE.repo,
|
||||
highlight: false,
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,14 @@
|
||||
import { useEffect } from 'react'
|
||||
|
||||
const BASE = 'sundynix agentix'
|
||||
const DEFAULT = `${BASE} — 事件驱动的 AI Agent 工作台`
|
||||
|
||||
/** 设置页面标题；不传参恢复默认 */
|
||||
export function usePageTitle(title?: string) {
|
||||
useEffect(() => {
|
||||
document.title = title ? `${title} — ${BASE}` : DEFAULT
|
||||
return () => {
|
||||
document.title = DEFAULT
|
||||
}
|
||||
}, [title])
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { SITE } from '@/content/site'
|
||||
|
||||
export interface ReleaseInfo {
|
||||
version: string
|
||||
page_url: string
|
||||
macos_url?: string
|
||||
windows_url?: string
|
||||
source: 'gitea' | 'fallback'
|
||||
}
|
||||
|
||||
// 官网融进 admin 后不接 posts/releases 后端（营销落地页 only）：直接用静态版本号，
|
||||
// 去掉原来那次必然失败的 fetch('/api/releases/latest')。
|
||||
const STATIC: ReleaseInfo = {
|
||||
version: SITE.version,
|
||||
page_url: `${SITE.repo}/releases`,
|
||||
source: 'fallback',
|
||||
}
|
||||
|
||||
/** 最新版本信息（静态，来自 content/site.ts）。 */
|
||||
export function useRelease(): ReleaseInfo {
|
||||
return STATIC
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { clsx, type ClassValue } from 'clsx'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { SectionLabel } from '@/components/section-label'
|
||||
import { DownloadGrid } from '@/components/download-grid'
|
||||
import { usePageTitle } from '@/hooks/use-page-title'
|
||||
|
||||
export default function DownloadPage() {
|
||||
usePageTitle('下载')
|
||||
return (
|
||||
<section className="px-6 py-16 lg:px-10">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<div className="mx-auto mb-9 max-w-[560px] text-center">
|
||||
<SectionLabel>DOWNLOAD</SectionLabel>
|
||||
<h1 className="text-balance text-[28px] font-[650] tracking-[-0.02em]">
|
||||
下载 sundynix agentix
|
||||
</h1>
|
||||
<p className="mt-2.5 text-[15px] text-ink-2">
|
||||
macOS 与 Windows 桌面版，或用 docker compose 私有化部署。
|
||||
</p>
|
||||
</div>
|
||||
<DownloadGrid />
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import { Fragment } from 'react'
|
||||
import { ARCH_LAYERS } from '@/content/site'
|
||||
import { SectionLabel } from '@/components/section-label'
|
||||
import { Reveal } from '@/components/reveal'
|
||||
|
||||
export function Architecture() {
|
||||
return (
|
||||
<section
|
||||
id="architecture"
|
||||
className="border-t border-hairline px-6 py-16 lg:px-10"
|
||||
>
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<Reveal>
|
||||
<div className="mx-auto mb-9 max-w-[560px] text-center">
|
||||
<SectionLabel>ARCHITECTURE</SectionLabel>
|
||||
<h2 className="text-balance text-[26px] font-[650] tracking-[-0.02em]">
|
||||
五层架构，一条零拷贝总线
|
||||
</h2>
|
||||
<p className="mt-2.5 text-[15px] text-ink-2">
|
||||
Monolith First，为微服务演进预留缝隙（Morph B）。
|
||||
</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={120} className="mx-auto max-w-[760px]">
|
||||
{ARCH_LAYERS.map((layer, i) => (
|
||||
<Fragment key={layer.id}>
|
||||
{/* NATS 总线插在 L2 和 L4 之间 */}
|
||||
{i === 2 && (
|
||||
<div className="mb-2.5 flex items-center justify-center gap-3.5 rounded-[10px] border border-dashed border-accent bg-accent-soft px-5 py-3 font-mono text-xs tracking-[0.1em] text-accent-ink">
|
||||
⇅ NATS JETSTREAM — 零拷贝消息骨干网 · sundynix.* ⇅
|
||||
</div>
|
||||
)}
|
||||
<div className="mb-2.5 grid grid-cols-1 items-center gap-1 rounded-[10px] border border-hairline bg-surface px-5 py-3.5 sm:grid-cols-[120px_1fr_auto] sm:gap-5">
|
||||
<span className="font-mono text-[11px] tracking-[0.14em] text-ink-3">
|
||||
{layer.id}
|
||||
</span>
|
||||
<span className="text-sm font-medium">
|
||||
{layer.name}{' '}
|
||||
<span className="text-[13px] font-normal text-ink-2">
|
||||
{layer.detail}
|
||||
</span>
|
||||
</span>
|
||||
<span className="font-mono text-[11.5px] text-accent-ink">
|
||||
{layer.tech}
|
||||
</span>
|
||||
</div>
|
||||
</Fragment>
|
||||
))}
|
||||
</Reveal>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { SectionLabel } from '@/components/section-label'
|
||||
import { DownloadGrid } from '@/components/download-grid'
|
||||
import { Reveal } from '@/components/reveal'
|
||||
|
||||
export function DownloadCta() {
|
||||
return (
|
||||
<section className="border-t border-hairline px-6 py-16 lg:px-10">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<Reveal>
|
||||
<div className="mx-auto mb-9 max-w-[560px] text-center">
|
||||
<SectionLabel>DOWNLOAD</SectionLabel>
|
||||
<h2 className="text-balance text-[26px] font-[650] tracking-[-0.02em]">
|
||||
把 AI 团队装进桌面
|
||||
</h2>
|
||||
<p className="mt-2.5 text-[15px] text-ink-2">
|
||||
内置应用内更新，发布流水线自动出包。
|
||||
</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal delay={120}>
|
||||
<DownloadGrid />
|
||||
</Reveal>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { FEATURES } from '@/content/site'
|
||||
import { SectionLabel } from '@/components/section-label'
|
||||
import { Reveal } from '@/components/reveal'
|
||||
|
||||
export function Features() {
|
||||
return (
|
||||
<section id="features" className="border-t border-hairline px-6 py-16 lg:px-10">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<Reveal>
|
||||
<div className="mx-auto mb-9 max-w-[560px] text-center">
|
||||
<SectionLabel>CAPABILITIES</SectionLabel>
|
||||
<h2 className="text-balance text-[26px] font-[650] tracking-[-0.02em]">
|
||||
一个工作台，一支 AI 团队
|
||||
</h2>
|
||||
<p className="mt-2.5 text-[15px] text-ink-2">
|
||||
从编排到交付，每个环节都是流式的、可观测的、有守卫的。
|
||||
</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={120}>
|
||||
<div className="grid grid-cols-1 gap-px overflow-hidden rounded-xl border border-hairline bg-hairline sm:grid-cols-2 lg:grid-cols-4">
|
||||
{FEATURES.map((f) => (
|
||||
<div
|
||||
key={f.label}
|
||||
className="group bg-surface p-6 transition-colors hover:bg-ground"
|
||||
>
|
||||
<span className="mb-3 block font-mono text-[10.5px] tracking-[0.16em] text-accent-ink transition-colors group-hover:text-accent">
|
||||
{f.label}
|
||||
</span>
|
||||
<h3 className="mb-1.5 text-base font-semibold">{f.title}</h3>
|
||||
<p className="text-[13.5px] leading-[1.7] text-ink-2">{f.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Download } from 'lucide-react'
|
||||
import { SITE } from '@/content/site'
|
||||
import { TerminalDemo } from '@/components/terminal-demo'
|
||||
import { Reveal } from '@/components/reveal'
|
||||
|
||||
export function Hero() {
|
||||
return (
|
||||
<section className="px-6 pt-21 text-center lg:px-10">
|
||||
<Reveal>
|
||||
<span className="mb-6.5 inline-flex items-center gap-2 rounded-full border border-hairline-strong px-3.5 py-1 font-mono text-xs tracking-[0.08em] text-accent-ink">
|
||||
<span className="size-[7px] rounded-full bg-accent" />
|
||||
{SITE.version} 已发布 · macOS / Windows
|
||||
</span>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={80}>
|
||||
<h1 className="mx-auto max-w-[17em] text-balance text-4xl font-[650] leading-[1.18] tracking-[-0.028em] md:text-[52px] lg:text-[58px]">
|
||||
事件驱动的
|
||||
<br />
|
||||
<span className="text-brand-gradient">AI Agent 工作台</span>
|
||||
<span className="text-ink-3">。</span>
|
||||
</h1>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={160}>
|
||||
<p className="mx-auto mt-5.5 max-w-[37em] text-[17px] text-ink-2">
|
||||
在画布上编排智能体，让多 Agent
|
||||
团队替你研究、检索、写出真正的 Word
|
||||
报告。桌面开箱即用，也可一条命令私有化部署。
|
||||
</p>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={240}>
|
||||
<div className="mt-9 flex flex-wrap justify-center gap-3">
|
||||
<Link
|
||||
to="/download"
|
||||
className="inline-flex items-center gap-2 rounded-lg bg-accent px-6 py-2.5 text-[14.5px] font-medium text-ground transition-opacity hover:opacity-90"
|
||||
>
|
||||
下载桌面版 <Download className="size-4" />
|
||||
</Link>
|
||||
<a
|
||||
href={SITE.repo}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-flex items-center rounded-lg border border-hairline-strong px-6 py-2.5 font-mono text-[14px] transition-colors hover:border-accent"
|
||||
>
|
||||
$ make demo
|
||||
</a>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={320}>
|
||||
<TerminalDemo />
|
||||
</Reveal>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { Hero } from '@/pages/home/hero'
|
||||
import { Features } from '@/pages/home/features'
|
||||
import { Architecture } from '@/pages/home/architecture'
|
||||
import { Quickstart } from '@/pages/home/quickstart'
|
||||
import { DownloadCta } from '@/pages/home/download-cta'
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<Hero />
|
||||
<Features />
|
||||
<Architecture />
|
||||
<Quickstart />
|
||||
<DownloadCta />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import { QUICKSTART_STEPS } from '@/content/site'
|
||||
import { SectionLabel } from '@/components/section-label'
|
||||
import { Reveal } from '@/components/reveal'
|
||||
|
||||
export function Quickstart() {
|
||||
return (
|
||||
<section className="border-t border-hairline px-6 py-16 lg:px-10">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<Reveal>
|
||||
<div className="mb-9 max-w-[560px]">
|
||||
<SectionLabel>QUICKSTART</SectionLabel>
|
||||
<h2 className="text-[26px] font-[650] tracking-[-0.02em]">
|
||||
五分钟跑起来
|
||||
</h2>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<Reveal
|
||||
delay={120}
|
||||
className="grid grid-cols-1 items-start gap-6 md:grid-cols-2"
|
||||
>
|
||||
<pre className="overflow-x-auto rounded-[10px] bg-term px-5.5 py-5 font-mono text-[13.5px] leading-8 text-term-ink">
|
||||
<code>
|
||||
<span className="text-white/35"># 内嵌 NATS，零配置体验</span>
|
||||
{'\n'}
|
||||
<span className="text-[#22d3ee]">$</span> git clone
|
||||
https://git.sundynix.cn/sundynix/sundynix-agentix{'\n'}
|
||||
<span className="text-[#22d3ee]">$</span> make demo{'\n'}
|
||||
{'\n'}
|
||||
<span className="text-white/35"># 或一条命令私有化部署</span>
|
||||
{'\n'}
|
||||
<span className="text-[#22d3ee]">$</span> docker compose up -d
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
<ul>
|
||||
{QUICKSTART_STEPS.map((step, i) => (
|
||||
<li
|
||||
key={step.title}
|
||||
className="flex gap-4 border-b border-hairline py-3 text-[14.5px] text-ink-2"
|
||||
>
|
||||
<span className="pt-[3px] font-mono text-xs tracking-[0.08em] text-accent">
|
||||
0{i + 1}
|
||||
</span>
|
||||
<span>
|
||||
<b className="font-semibold text-ink">{step.title}</b>
|
||||
{step.desc}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Reveal>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import { usePageTitle } from '@/hooks/use-page-title'
|
||||
|
||||
export default function NotFoundPage() {
|
||||
usePageTitle('页面不存在')
|
||||
return (
|
||||
<section className="flex flex-col items-center px-6 py-28 text-center">
|
||||
<p className="font-mono text-[13px] tracking-[0.18em] text-accent">
|
||||
404 · NOT FOUND
|
||||
</p>
|
||||
<h1 className="mt-4 text-[28px] font-[650] tracking-[-0.02em]">
|
||||
这条事件流不存在
|
||||
</h1>
|
||||
<p className="mt-2 text-[15px] text-ink-2">
|
||||
地址可能已变更，回首页重新出发。
|
||||
</p>
|
||||
<Link
|
||||
to="/"
|
||||
className="mt-8 rounded-lg bg-accent px-6 py-2.5 text-[14.5px] font-medium text-ground transition-opacity hover:opacity-90"
|
||||
>
|
||||
回首页
|
||||
</Link>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -1,6 +1,38 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ["./index.html", "./src/**/*.{ts,tsx}"],
|
||||
theme: { extend: {} },
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
// 官网落地页设计 token（跟随 logo：青→蓝→紫）。值引用 CSS 变量（见 src/index.css 的
|
||||
// :root/.dark），admin 自身页面用默认 gray/violet 调色板、不碰这些 token，故不冲突。
|
||||
colors: {
|
||||
ground: "var(--ground)",
|
||||
surface: "var(--surface)",
|
||||
ink: "var(--ink)",
|
||||
"ink-2": "var(--ink-2)",
|
||||
"ink-3": "var(--ink-3)",
|
||||
hairline: "var(--hairline)",
|
||||
"hairline-strong": "var(--hairline-strong)",
|
||||
accent: "var(--accent)",
|
||||
"accent-ink": "var(--accent-ink)",
|
||||
"accent-soft": "var(--accent-soft)",
|
||||
code: "var(--code-bg)",
|
||||
term: "var(--term-bg)",
|
||||
"term-ink": "var(--term-ink)",
|
||||
},
|
||||
fontFamily: {
|
||||
sans: [
|
||||
"-apple-system",
|
||||
"PingFang SC",
|
||||
"Hiragino Sans GB",
|
||||
"Microsoft YaHei",
|
||||
"Noto Sans SC",
|
||||
"sans-serif",
|
||||
],
|
||||
mono: ["ui-monospace", "SF Mono", "JetBrains Mono", "Menlo", "Consolas", "monospace"],
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
@@ -10,7 +10,9 @@
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"strict": true
|
||||
"strict": true,
|
||||
"baseUrl": ".",
|
||||
"paths": { "@/*": ["./src/site/*"] }
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
/// <reference types="vitest/config" />
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import path from "node:path";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
// 官网落地页融进 admin，代码在 src/site/ 下且沿用 @ 别名导入（@/content/site 等）。
|
||||
resolve: { alias: { "@": path.resolve(__dirname, "./src/site") } },
|
||||
server: { port: 5174 },
|
||||
// 单元/组件测试：纯逻辑 + 关键控制面（jsdom 环境）。运行：npm test
|
||||
test: {
|
||||
|
||||
Reference in New Issue
Block a user