sundynix/sundynix-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): 用户端设计完善 + ICP 备案号

Browse Source 
- 页脚升级双层结构：品牌区 + 产品/资源链接列 + 底栏（© + 滇ICP备2025056308号-1，链接工信部备案系统）
- 滚动进场动效：Reveal 组件（IntersectionObserver），首页各区块错峰淡入，尊重 prefers-reduced-motion
- Hero 终端窗事件流逐行浮现动画
- 功能卡片 hover 时 mono 标签点亮强调色
- 全站动态页面标题（博客详情随文章名变化）

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Blizzard
2026-07-17 11:20:32 +08:00
parent 0250355dcd
commit 4423a770e2
15 changed files with 306 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/layout/site-footer.tsx
+72 -15
View File
@@ -1,26 +1,83 @@
const FOOTER_LINKS = [
{ label: 'GITHUB', href: 'https://github.com/sundynix' },
{ label: 'DOCS', href: '/docs' },
{ label: 'RELEASES', href: '/download' },
{ label: 'RSS', href: '/rss.xml' },
]
import { Link } from 'react-router-dom'
import { SITE } from '@/content/site'
const COLUMNS = [
{
title: 'PRODUCT',
links: [
{ label: '功能', href: '/#features' },
{ label: '架构', href: '/#architecture' },
{ label: '下载', href: '/download', internal: true },
],
},
{
title: 'RESOURCES',
links: [
{ label: '博客', href: '/blog', internal: true },
{ label: 'GitHub', href: SITE.github },
{ label: 'RSS 订阅', href: '/rss.xml' },
],
},
] as const
export function SiteFooter() {
return (
<footer className="border-t border-hairline">
<div className="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-2 px-6 py-6 font-mono text-[12.5px] text-ink-3 lg:px-10">
<span>© 2026 SUNDYNIX AGENTIX</span>
<span className="flex gap-4">
{FOOTER_LINKS.map((l) => (
<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="font-mono text-[15px] font-semibold">
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
key={l.label}
href={l.href}
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"
>
{l.label}
{SITE.icp}
</a>
))}
</span>
</div>
</div>
</footer>
)
web/src/components/reveal.tsx
+45
View File
@@ -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>
)
}
web/src/components/terminal-demo.tsx
+7 -3
View File
@@ -13,15 +13,19 @@ export function TerminalDemo() {
</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>
<div className="term-line">
<span className="font-semibold text-[#3ecdad]">› </span>
{TERMINAL_DEMO.prompt}
</div>
<div className="text-white/35">
<div className="term-line text-white/35" style={{ animationDelay: '0.35s' }}>
──────────────────────────────────
</div>
{TERMINAL_DEMO.events.map((ev, i) => (
<div key={ev.tag} className="whitespace-nowrap">
<div
key={ev.tag}
className="term-line whitespace-nowrap"
style={{ animationDelay: `${0.7 + i * 0.45}s` }}
>
<span className={ev.ok ? 'text-[#a6d96a]' : 'text-[#7fb8e8]'}>
[{ev.tag}]
</span>{' '}
web/src/content/site.ts
+1
View File
@@ -4,6 +4,7 @@ export const SITE = {
version: 'v0.1.2',
tagline: '事件驱动的 AI Agent 工作台',
github: 'https://github.com/sundynix/agentix',
icp: '滇ICP备2025056308号-1',
}
export const TERMINAL_DEMO = {
web/src/hooks/use-page-title.ts
+14
View File
@@ -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])
}
web/src/index.css
+42 -3
View File
@@ -113,8 +113,47 @@ body {
.caret-blink {
animation: caret-blink 1.1s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) {
.caret-blink {
animation: none;
/* 滚动进场（配合 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;
}
}
web/src/pages/blog-post.tsx
+2
View File
@@ -5,6 +5,7 @@ import remarkGfm from 'remark-gfm'
import { ArrowLeft } from 'lucide-react'
import { fetchPost, formatDate, isNotFound, type Post } from '@/api/posts'
import NotFoundPage from '@/pages/not-found'
import { usePageTitle } from '@/hooks/use-page-title'
type State =
| { status: 'loading' }
@@ -15,6 +16,7 @@ type State =
export default function BlogPostPage() {
const { slug = '' } = useParams()
const [state, setState] = useState<State>({ status: 'loading' })
usePageTitle(state.status === 'ready' ? state.post.title : undefined)
useEffect(() => {
let cancelled = false
web/src/pages/blog.tsx
+2
View File
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { fetchPosts, formatDate, type PostListItem } from '@/api/posts'
import { SectionLabel } from '@/components/section-label'
import { usePageTitle } from '@/hooks/use-page-title'
type State =
| { status: 'loading' }
@@ -9,6 +10,7 @@ type State =
| { status: 'ready'; posts: PostListItem[] }
export default function BlogPage() {
usePageTitle('博客')
const [state, setState] = useState<State>({ status: 'loading' })
useEffect(() => {
web/src/pages/download.tsx
+2
View File
@@ -1,7 +1,9 @@
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">
web/src/pages/home/architecture.tsx
+5 -2
View File
@@ -1,6 +1,7 @@
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 (
@@ -9,6 +10,7 @@ export function 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]">
@@ -18,8 +20,9 @@ export function Architecture() {
Monolith First，为微服务演进预留缝隙（Morph B）。
</p>
</div>
</Reveal>
<div className="mx-auto max-w-[760px]">
<Reveal delay={120} className="mx-auto max-w-[760px]">
{ARCH_LAYERS.map((layer, i) => (
<Fragment key={layer.id}>
{/* NATS 总线插在 L2 和 L4 之间 */}
@@ -44,7 +47,7 @@ export function Architecture() {
</div>
</Fragment>
))}
</div>
</Reveal>
</div>
</section>
)
web/src/pages/home/download-cta.tsx
+5
View File
@@ -1,10 +1,12 @@
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]">
@@ -14,7 +16,10 @@ export function DownloadCta() {
内置应用内更新，发布流水线自动出包。
</p>
</div>
</Reveal>
<Reveal delay={120}>
<DownloadGrid />
</Reveal>
</div>
</section>
)
web/src/pages/home/features.tsx
+7 -2
View File
@@ -1,10 +1,12 @@
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]">
@@ -14,14 +16,16 @@ export function Features() {
从编排到交付，每个环节都是流式的、可观测的、有守卫的。
</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="bg-surface p-6 transition-colors hover:bg-ground"
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">
<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>
@@ -29,6 +33,7 @@ export function Features() {
</div>
))}
</div>
</Reveal>
</div>
</section>
)
web/src/pages/home/hero.tsx
+11
View File
@@ -2,27 +2,35 @@ 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 />
AI Agent 工作台<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"
@@ -39,8 +47,11 @@ export function Hero() {
$ make demo
</a>
</div>
</Reveal>
<Reveal delay={320}>
<TerminalDemo />
</Reveal>
</section>
)
}
web/src/pages/home/quickstart.tsx
+8 -2
View File
@@ -1,18 +1,24 @@
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>
<div className="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
<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>
@@ -43,7 +49,7 @@ export function Quickstart() {
</li>
))}
</ul>
</div>
</Reveal>
</div>
</section>
)
web/src/pages/not-found.tsx
+2
View File
@@ -1,6 +1,8 @@
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">