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

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

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

web/src/components/layout/site-footer.tsx

@@ -1,26 +1,83 @@
-const FOOTER_LINKS = [
+import { Link } from 'react-router-dom'
-  { label: 'GITHUB', href: 'https://github.com/sundynix' },
+import { SITE } from '@/content/site'
-  { label: 'DOCS', href: '/docs' },
+
-  { label: 'RELEASES', href: '/download' },
+const COLUMNS = [
-  { label: 'RSS', href: '/rss.xml' },
+  {
-]
+    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">
+      <div className="mx-auto grid max-w-6xl gap-10 px-6 py-12 md:grid-cols-[1.5fr_1fr_1fr] lg:px-10">
-        <span>© 2026 SUNDYNIX AGENTIX</span>
+        <div>
-        <span className="flex gap-4">
+          <p className="font-mono text-[15px] font-semibold">
-          {FOOTER_LINKS.map((l) => (
+            sundynix <em className="not-italic text-accent">agentix</em>
-            <a
+          </p>
-              key={l.label}
+          <p className="mt-2 text-[14px] text-ink-2">{SITE.tagline}</p>
-              href={l.href}
+          <p className="mt-4 font-mono text-[11.5px] tracking-[0.08em] text-ink-3">
-              className="transition-colors hover:text-accent-ink"
+            {SITE.version} · MACOS / WINDOWS / SELF-HOSTED
-            >
+          </p>
-              {l.label}
+        </div>
-            </a>
+
-          ))}
+        {COLUMNS.map((col) => (
-        </span>
+          <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>
   )

web/src/components/reveal.tsx

@@ -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

@@ -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

@@ -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

@@ -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

@@ -113,8 +113,47 @@ body {
 .caret-blink {
   animation: caret-blink 1.1s steps(1) infinite;
 }
-@media (prefers-reduced-motion: reduce) {
+
-  .caret-blink {
+/* 滚动进场（配合 Reveal 组件） */
-    animation: none;
+.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

@@ -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,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

@@ -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

@@ -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,17 +10,19 @@ export function Architecture() {
       className="border-t border-hairline 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">
+        <Reveal>
-          <SectionLabel>ARCHITECTURE</SectionLabel>
+          <div className="mx-auto mb-9 max-w-[560px] text-center">
-          <h2 className="text-balance text-[26px] font-[650] tracking-[-0.02em]">
+            <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">
+            </h2>
-            Monolith First，为微服务演进预留缝隙（Morph B）。
+            <p className="mt-2.5 text-[15px] text-ink-2">
-          </p>
+              Monolith First，为微服务演进预留缝隙（Morph B）。
-        </div>
+            </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

@@ -1,20 +1,25 @@
 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">
-        <div className="mx-auto mb-9 max-w-[560px] text-center">
+        <Reveal>
-          <SectionLabel>DOWNLOAD</SectionLabel>
+          <div className="mx-auto mb-9 max-w-[560px] text-center">
-          <h2 className="text-balance text-[26px] font-[650] tracking-[-0.02em]">
+            <SectionLabel>DOWNLOAD</SectionLabel>
-            把 AI 团队装进桌面
+            <h2 className="text-balance text-[26px] font-[650] tracking-[-0.02em]">
-          </h2>
+              把 AI 团队装进桌面
-          <p className="mt-2.5 text-[15px] text-ink-2">
+            </h2>
-            内置应用内更新，发布流水线自动出包。
+            <p className="mt-2.5 text-[15px] text-ink-2">
-          </p>
+              内置应用内更新，发布流水线自动出包。
-        </div>
+            </p>
-        <DownloadGrid />
+          </div>
+        </Reveal>
+        <Reveal delay={120}>
+          <DownloadGrid />
+        </Reveal>
       </div>
     </section>
   )

web/src/pages/home/features.tsx

@@ -1,34 +1,39 @@
 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">
-        <div className="mx-auto mb-9 max-w-[560px] text-center">
+        <Reveal>
-          <SectionLabel>CAPABILITIES</SectionLabel>
+          <div className="mx-auto mb-9 max-w-[560px] text-center">
-          <h2 className="text-balance text-[26px] font-[650] tracking-[-0.02em]">
+            <SectionLabel>CAPABILITIES</SectionLabel>
-            一个工作台，一支 AI 团队
+            <h2 className="text-balance text-[26px] font-[650] tracking-[-0.02em]">
-          </h2>
+              一个工作台，一支 AI 团队
-          <p className="mt-2.5 text-[15px] text-ink-2">
+            </h2>
-            从编排到交付，每个环节都是流式的、可观测的、有守卫的。
+            <p className="mt-2.5 text-[15px] text-ink-2">
-          </p>
+              从编排到交付，每个环节都是流式的、可观测的、有守卫的。
-        </div>
+            </p>
+          </div>
+        </Reveal>
 
-        <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">
+        <Reveal delay={120}>
-          {FEATURES.map((f) => (
+          <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">
-            <div
+            {FEATURES.map((f) => (
-              key={f.label}
+              <div
-              className="bg-surface p-6 transition-colors hover:bg-ground"
+                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">
+              >
-                {f.label}
+                <span className="mb-3 block font-mono text-[10.5px] tracking-[0.16em] text-accent-ink transition-colors group-hover:text-accent">
-              </span>
+                  {f.label}
-              <h3 className="mb-1.5 text-base font-semibold">{f.title}</h3>
+                </span>
-              <p className="text-[13.5px] leading-[1.7] text-ink-2">{f.desc}</p>
+                <h3 className="mb-1.5 text-base font-semibold">{f.title}</h3>
-            </div>
+                <p className="text-[13.5px] leading-[1.7] text-ink-2">{f.desc}</p>
-          ))}
+              </div>
-        </div>
+            ))}
+          </div>
+        </Reveal>
       </div>
     </section>
   )

web/src/pages/home/hero.tsx

@@ -2,45 +2,56 @@ 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">
-      <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">
+      <Reveal>
-        <span className="size-[7px] rounded-full bg-accent" />
+        <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">
-        {SITE.version} 已发布 · macOS / Windows
+          <span className="size-[7px] rounded-full bg-accent" />
-      </span>
+          {SITE.version} 已发布 · macOS / Windows
+        </span>
+      </Reveal>
 
-      <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]">
+      <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>
+          <br />
-      </h1>
+          AI Agent 工作台<span className="text-ink-3">。</span>
+        </h1>
+      </Reveal>
 
-      <p className="mx-auto mt-5.5 max-w-[37em] text-[17px] text-ink-2">
+      <Reveal delay={160}>
-        在画布上编排智能体，让多 Agent
+        <p className="mx-auto mt-5.5 max-w-[37em] text-[17px] text-ink-2">
-        团队替你研究、检索、写出真正的 Word
+          在画布上编排智能体，让多 Agent
-        报告。桌面开箱即用，也可一条命令私有化部署。
+          团队替你研究、检索、写出真正的 Word
-      </p>
+          报告。桌面开箱即用，也可一条命令私有化部署。
+        </p>
+      </Reveal>
 
-      <div className="mt-9 flex flex-wrap justify-center gap-3">
+      <Reveal delay={240}>
-        <Link
+        <div className="mt-9 flex flex-wrap justify-center gap-3">
-          to="/download"
+          <Link
-          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"
+            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>
+            下载桌面版 <Download className="size-4" />
-        <a
+          </Link>
-          href={SITE.github}
+          <a
-          target="_blank"
+            href={SITE.github}
-          rel="noreferrer"
+            target="_blank"
-          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"
+            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>
+            $ make demo
-      </div>
+          </a>
+        </div>
+      </Reveal>
 
-      <TerminalDemo />
+      <Reveal delay={320}>
+        <TerminalDemo />
+      </Reveal>
     </section>
   )
 }

web/src/pages/home/quickstart.tsx

@@ -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">
-        <div className="mb-9 max-w-[560px]">
+        <Reveal>
-          <SectionLabel>QUICKSTART</SectionLabel>
+          <div className="mb-9 max-w-[560px]">
-          <h2 className="text-[26px] font-[650] tracking-[-0.02em]">
+            <SectionLabel>QUICKSTART</SectionLabel>
-            五分钟跑起来
+            <h2 className="text-[26px] font-[650] tracking-[-0.02em]">
-          </h2>
+              五分钟跑起来
-        </div>
+            </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

@@ -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">