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
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user