feat: 新增迭代树组件并优化概念展示区

Geniusay · Geniusay · commit aed67b0515dd · 2026-03-15T23:47:39.000+08:00
- 新增交互式迭代树组件，替换原有的静态 ASCII 树展示
- 在英雄区添加种子输入框，支持跳转至演示页面
- 优化循环区仪表盘，用数据面板替换代码预览
- 更新 .gitignore 和 Nuxt 配置文件
- 新增 OpenSpec 变更提案、任务和设计文档
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,5 @@
-.cursor
-.trae
+.cursor/
+.trae/
 node_modules/
 dist/
 build/
diff --git a/content-forest-front/.nuxt/components.d.ts b/content-forest-front/.nuxt/components.d.ts
@@ -19,6 +19,7 @@ export const ConceptsSection: typeof import("../components/ConceptsSection.vue")
 export const CtaSection: typeof import("../components/CtaSection.vue")['default']
 export const HeroNav: typeof import("../components/HeroNav.vue")['default']
 export const HeroSection: typeof import("../components/HeroSection.vue")['default']
+export const IterationTree: typeof import("../components/IterationTree.vue")['default']
 export const LoopSection: typeof import("../components/LoopSection.vue")['default']
 export const SiteFooter: typeof import("../components/SiteFooter.vue")['default']
 export const NuxtWelcome: typeof import("../node_modules/nuxt/dist/app/components/welcome.vue")['default']
@@ -49,6 +50,7 @@ export const LazyConceptsSection: LazyComponent<typeof import("../components/Con
 export const LazyCtaSection: LazyComponent<typeof import("../components/CtaSection.vue")['default']>
 export const LazyHeroNav: LazyComponent<typeof import("../components/HeroNav.vue")['default']>
 export const LazyHeroSection: LazyComponent<typeof import("../components/HeroSection.vue")['default']>
+export const LazyIterationTree: LazyComponent<typeof import("../components/IterationTree.vue")['default']>
 export const LazyLoopSection: LazyComponent<typeof import("../components/LoopSection.vue")['default']>
 export const LazySiteFooter: LazyComponent<typeof import("../components/SiteFooter.vue")['default']>
 export const LazyNuxtWelcome: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/welcome.vue")['default']>
diff --git a/content-forest-front/.nuxt/manifest/latest.json b/content-forest-front/.nuxt/manifest/latest.json
@@ -1 +1 @@
-{"id":"dev","timestamp":1773585554081}
+{"id":"dev","timestamp":1773588357897}
diff --git a/content-forest-front/.nuxt/manifest/meta/dev.json b/content-forest-front/.nuxt/manifest/meta/dev.json
@@ -1 +1 @@
-{"id":"dev","timestamp":1773585554081,"prerendered":[]}
+{"id":"dev","timestamp":1773588357897,"prerendered":[]}
diff --git a/content-forest-front/.nuxt/nitro.json b/content-forest-front/.nuxt/nitro.json
@@ -1,5 +1,5 @@
 {
-  "date": "2026-03-15T14:39:25.304Z",
+  "date": "2026-03-15T15:26:02.705Z",
   "preset": "nitro-dev",
   "framework": {
     "name": "nuxt",
@@ -9,9 +9,9 @@
     "nitro": "2.13.1"
   },
   "dev": {
-    "pid": 8816,
+    "pid": 44720,
     "workerAddress": {
-      "socketPath": "\\\\.\\pipe\\nitro-worker-8816-1-1-1086.sock"
+      "socketPath": "\\\\.\\pipe\\nitro-worker-44720-1-1-8911.sock"
     }
   }
 }
diff --git a/content-forest-front/.nuxt/nuxt.d.ts b/content-forest-front/.nuxt/nuxt.d.ts
@@ -1,7 +1,7 @@
+/// <reference types="@nuxtjs/tailwindcss" />
 /// <reference types="@vueuse/nuxt" />
 /// <reference types="@nuxt/telemetry" />
 /// <reference types="@nuxt/devtools" />
-/// <reference types="@nuxtjs/tailwindcss" />
 /// <reference path="types/nitro-layouts.d.ts" />
 /// <reference path="types/builder-env.d.ts" />
 /// <reference types="nuxt" />
diff --git a/content-forest-front/.nuxt/tailwind/postcss.mjs b/content-forest-front/.nuxt/tailwind/postcss.mjs
@@ -1,4 +1,4 @@
-// generated by the @nuxtjs/tailwindcss <https://github.com/nuxt-modules/tailwindcss> module at 2026/3/15 22:39:21
+// generated by the @nuxtjs/tailwindcss <https://github.com/nuxt-modules/tailwindcss> module at 2026/3/15 23:31:03
 import "@nuxtjs/tailwindcss/config-ctx"
 import configMerger from "@nuxtjs/tailwindcss/merger";
 
diff --git a/content-forest-front/.nuxt/tsconfig.json b/content-forest-front/.nuxt/tsconfig.json
@@ -116,7 +116,7 @@
         "./imports"
       ],
       "#app-manifest": [
-        "./manifest/meta/dev.json"
+        "./manifest/meta/dev"
       ],
       "#components": [
         "./components"
diff --git a/content-forest-front/.nuxt/types/components.d.ts b/content-forest-front/.nuxt/types/components.d.ts
@@ -19,6 +19,7 @@ interface _GlobalComponents {
   CtaSection: typeof import("../../components/CtaSection.vue")['default']
   HeroNav: typeof import("../../components/HeroNav.vue")['default']
   HeroSection: typeof import("../../components/HeroSection.vue")['default']
+  IterationTree: typeof import("../../components/IterationTree.vue")['default']
   LoopSection: typeof import("../../components/LoopSection.vue")['default']
   SiteFooter: typeof import("../../components/SiteFooter.vue")['default']
   NuxtWelcome: typeof import("../../node_modules/nuxt/dist/app/components/welcome.vue")['default']
@@ -49,6 +50,7 @@ interface _GlobalComponents {
   LazyCtaSection: LazyComponent<typeof import("../../components/CtaSection.vue")['default']>
   LazyHeroNav: LazyComponent<typeof import("../../components/HeroNav.vue")['default']>
   LazyHeroSection: LazyComponent<typeof import("../../components/HeroSection.vue")['default']>
+  LazyIterationTree: LazyComponent<typeof import("../../components/IterationTree.vue")['default']>
   LazyLoopSection: LazyComponent<typeof import("../../components/LoopSection.vue")['default']>
   LazySiteFooter: LazyComponent<typeof import("../../components/SiteFooter.vue")['default']>
   LazyNuxtWelcome: LazyComponent<typeof import("../../node_modules/nuxt/dist/app/components/welcome.vue")['default']>
diff --git a/content-forest-front/components/ConceptsSection.vue b/content-forest-front/components/ConceptsSection.vue
@@ -54,10 +54,9 @@
         <div class="flex items-center gap-3 mb-8">
           <div class="font-mono text-xs tracking-widest text-bio-green uppercase">// Iteration Tree · 迭代树</div>
           <div class="flex-1 h-px bg-gradient-to-r from-bio-green/30 to-transparent"></div>
+          <div class="font-mono text-xs text-mist-2">Hover nodes to explore</div>
         </div>
-        <div class="font-mono text-xs leading-7 text-slate-400 overflow-x-auto">
-          <div class="whitespace-pre" v-html="treeText"></div>
-        </div>
+        <IterationTree />
       </div>
     </div>
   </section>
diff --git a/content-forest-front/components/HeroSection.vue b/content-forest-front/components/HeroSection.vue
@@ -51,8 +51,31 @@
         <span class="block mt-2 text-sm text-slate-500">Content isn't disposable. It's alive — it seeds, grows, evolves, and breeds.</span>
       </p>
 
+      <!-- Seed input interaction -->
+      <div class="mt-12 max-w-xl mx-auto">
+        <div class="border border-mist-3/40 bg-void-2/60 backdrop-blur p-1 flex gap-0 group focus-within:border-bio-green/50 transition-colors duration-300">
+          <div class="flex items-center px-4 border-r border-mist-3/30">
+            <span class="font-mono text-xs text-bio-green/70 whitespace-nowrap">seed =</span>
+          </div>
+          <input
+            v-model="seedInput"
+            type="text"
+            :placeholder="seedPlaceholder"
+            class="flex-1 bg-transparent px-4 py-3 font-mono text-sm text-slate-200 placeholder-mist-2/50 focus:outline-none"
+            @keydown.enter="goDemo"
+          />
+          <button
+            @click="goDemo"
+            class="px-5 py-3 bg-bio-green text-void font-mono text-xs tracking-widest uppercase hover:bg-bio-green-dim transition-colors duration-200 whitespace-nowrap"
+          >
+            进化 →
+          </button>
+        </div>
+        <p class="font-mono text-xs text-mist-2/60 mt-2 text-center">输入你的产品/创意，看看内容森林如何让它进化</p>
+      </div>
+
       <!-- CTAs -->
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mt-12">
+      <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mt-8">
         <a href="#waitlist"
            class="group relative px-8 py-4 bg-bio-green text-void font-mono text-sm tracking-widest uppercase font-medium hover:bg-bio-green-dim transition-all duration-300 overflow-hidden">
           <span class="relative z-10">申请早期访问 / Request Access</span>
@@ -111,6 +134,33 @@ function typeNext() {
 onMounted(() => { typeNext() })
 onUnmounted(() => { clearTimeout(timer) })
 
+const seedInput = ref('')
+const seedPlaceholders = [
+  '我在做一款 AI 效率工具...',
+  'A fitness app for busy professionals...',
+  '帮助独立开发者找到第一批用户的产品...',
+  'My handmade jewelry brand...',
+]
+const seedPlaceholder = ref(seedPlaceholders[0])
+let phIdx = 0
+let phTimer: ReturnType<typeof setInterval>
+
+onMounted(() => {
+  phTimer = setInterval(() => {
+    phIdx = (phIdx + 1) % seedPlaceholders.length
+    seedPlaceholder.value = seedPlaceholders[phIdx]
+  }, 3000)
+})
+onUnmounted(() => clearInterval(phTimer))
+
+function goDemo() {
+  const q = seedInput.value.trim() || seedPlaceholder.value
+  if (typeof window !== 'undefined') {
+    sessionStorage.setItem('cf_seed', q)
+    window.location.href = '/demo'
+  }
+}
+
 const stats = [
   { value: '5', label: 'Phase Loop' },
   { value: '3×', label: 'Mutation Types' },
diff --git a/content-forest-front/components/IterationTree.vue b/content-forest-front/components/IterationTree.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="relative w-full overflow-hidden" style="height:340px">
+    <svg ref="svgRef" class="absolute inset-0 w-full" viewBox="0 0 860 340" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <filter id="glow-green" x="-50%" y="-50%" width="200%" height="200%">
+          <feGaussianBlur stdDeviation="3" result="b"/>
+          <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
+        </filter>
+        <filter id="glow-blue" x="-50%" y="-50%" width="200%" height="200%">
+          <feGaussianBlur stdDeviation="2.5" result="b"/>
+          <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
+        </filter>
+        <filter id="glow-amber" x="-50%" y="-50%" width="200%" height="200%">
+          <feGaussianBlur stdDeviation="3" result="b"/>
+          <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
+        </filter>
+      </defs>
+      <path v-for="e in edges" :key="e.id" :d="e.path" fill="none"
+        :stroke="e.color" stroke-width="1.5" :stroke-dasharray="e.len"
+        :stroke-dashoffset="started ? 0 : e.len" stroke-linecap="round"
+        :opacity="e.opacity"
+        :style="`transition:stroke-dashoffset ${e.dur}ms cubic-bezier(.4,0,.2,1) ${e.delay}ms`"
+      />
+      <circle v-for="n in pulsingNodes" :key="'p'+n.id"
+        :cx="n.x" :cy="n.y" :r="n.r+8" fill="none"
+        :stroke="n.color" stroke-width="1" :opacity="pulseOp"
+      />
+      <circle v-for="n in nodes" :key="n.id"
+        :cx="n.x" :cy="n.y" :r="n.r"
+        :fill="n.fill" :stroke="n.color" stroke-width="1.5"
+        :filter="`url(#glow-${n.glow})`"
+        :opacity="started ? 1 : 0"
+        :style="`transition:opacity 500ms ease ${n.delay}ms`"
+        class="cursor-pointer"
+        @mouseenter="hovered=n.id" @mouseleave="hovered=null"
+      />
+      <text v-for="n in nodes" :key="'l'+n.id"
+        :x="n.x" :y="n.y+n.r+14" text-anchor="middle"
+        :fill="n.color" font-family="DM Mono,monospace" :font-size="n.fs"
+        :opacity="started ? 1 : 0"
+        :style="`transition:opacity 500ms ease ${n.delay+100}ms`"
+      >{{ n.label }}</text>
+      <text v-for="n in metricNodes" :key="'m'+n.id"
+        :x="n.x" :y="n.y+n.r+25" text-anchor="middle"
+        fill="#64748b" font-family="DM Mono,monospace" font-size="8"
+        :opacity="started ? 0.85 : 0"
+        :style="`transition:opacity 500ms ease ${n.delay+200}ms`"
+      >{{ n.metric }}</text>
+    </svg>
+    <Transition name="tt">
+      <div v-if="hovered && tip" class="absolute z-20 pointer-events-none bg-void-2 border border-mist-3/60 px-3 py-2 text-xs font-mono whitespace-nowrap"
+        :style="{left:tip.x+'px',top:tip.y+'px',transform:'translate(-50%,-110%)'}">
+        <div class="text-slate-200 mb-1 font-medium">{{ tip.name }}</div>
+        <div v-for="m in tip.metrics" :key="m.k" class="flex gap-2 text-mist-2">
+          <span>{{ m.k }}</span><span :class="m.c">{{ m.v }}</span>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+const svgRef = ref<SVGSVGElement | null>(null)
+const hovered = ref<string | null>(null)
+const started = ref(false)
+const pulseOp = ref(0.35)
+
+interface N {
+  id: string; label: string; metric?: string
+  x: number; y: number; r: number
+  color: string; fill: string; glow: string; fs: number
+  delay: number; pulsing?: boolean
+  tip: { k: string; v: string; c: string }[]
+  parent?: string
+}
+
+const nodes: N[] = [
+  { id:'seed',  label:'SEED',    metric:'AI�����ƹ�',   x:70,  y:170, r:14, color:'#f59e0b', fill:'rgba(245,158,11,0.18)', glow:'amber', fs:9,  delay:0,    pulsing:true,  parent:undefined, tip:[{k:'type',v:'Origin Seed',c:'text-mutation'}] },
+  { id:'fA',    label:'Fruit A', metric:'1,247 likes',  x:230, y:85,  r:10, color:'#00ff9f', fill:'rgba(0,255,159,0.14)',  glow:'green', fs:9,  delay:600,  pulsing:true,  parent:'seed',    tip:[{k:'platform',v:'С����',c:'text-slate-300'},{k:'likes',v:'1,247',c:'text-bio-green'}] },
+  { id:'fB',    label:'Fruit B', metric:'rejected',      x:230, y:195, r:7,  color:'#334155', fill:'rgba(51,65,85,0.10)',   glow:'green', fs:8,  delay:700,  parent:'seed',    tip:[{k:'status',v:'rejected',c:'text-death-red'}] },
+  { id:'fC',    label:'Fruit C', metric:'580 fav',       x:230, y:290, r:10, color:'#00ff9f', fill:'rgba(0,255,159,0.14)',  glow:'green', fs:9,  delay:800,  pulsing:true,  parent:'seed',    tip:[{k:'platform',v:'֪������',c:'text-slate-300'},{k:'favorites',v:'580',c:'text-bio-green'}] },
+  { id:'fA1',   label:'A1',      metric:'2,100 likes',  x:400, y:35,  r:7,  color:'#00ff9f', fill:'rgba(0,255,159,0.10)',  glow:'green', fs:8,  delay:1300, parent:'fA',      tip:[{k:'type',v:'�Ż�����',c:'text-slate-300'},{k:'likes',v:'2,100',c:'text-bio-green'}] },
+  { id:'fA2',   label:'A2',      metric:'85K views',    x:400, y:110, r:9,  color:'#0ea5e9', fill:'rgba(14,165,233,0.14)', glow:'blue',  fs:8,  delay:1450, parent:'fA',      tip:[{k:'platform',v:'����',c:'text-slate-300'},{k:'views',v:'85,000',c:'text-gene-blue'}] },
+  { id:'fA3',   label:'A3 mut',  metric:'ctr:12.4%',    x:400, y:185, r:7,  color:'#ef4444', fill:'rgba(239,68,68,0.14)',  glow:'amber', fs:8,  delay:1600, parent:'fA',      tip:[{k:'mutation',v:'anti-logic',c:'text-death-red'},{k:'ctr',v:'12.4%',c:'text-death-red'}] },
+  { id:'fA2a',  label:'A2a hot', metric:'210K views',   x:590, y:75,  r:12, color:'#0ea5e9', fill:'rgba(14,165,233,0.22)', glow:'blue',  fs:8,  delay:2200, pulsing:true,  parent:'fA2',     tip:[{k:'type',v:'��������',c:'text-slate-300'},{k:'views',v:'210,000',c:'text-gene-blue'}] },
+  { id:'fA2a1', label:'A2a-1',   metric:'iterating...',  x:760, y:45,  r:5,  color:'#0ea5e9', fill:'rgba(14,165,233,0.08)', glow:'blue',  fs:7,  delay:2900, parent:'fA2a',    tip:[{k:'status',v:'iterating',c:'text-gene-blue'}] },
+  { id:'fA2a2', label:'A2a-2',   metric:'iterating...',  x:760, y:115, r:5,  color:'#0ea5e9', fill:'rgba(14,165,233,0.08)', glow:'blue',  fs:7,  delay:3100, parent:'fA2a',    tip:[{k:'status',v:'iterating',c:'text-gene-blue'}] },
+  { id:'fC1',   label:'C1',      metric:'������',         x:400, y:290, r:7,  color:'#00ff9f', fill:'rgba(0,255,159,0.08)',  glow:'green', fs:8,  delay:1900, parent:'fC',      tip:[{k:'type',v:'������',c:'text-slate-300'},{k:'status',v:'������',c:'text-mutation'}] },
+]
+
+const nodeMap = Object.fromEntries(nodes.map(n => [n.id, n]))
+const pulsingNodes = computed(() => nodes.filter(n => n.pulsing))
+const metricNodes = computed(() => nodes.filter(n => n.metric))
+
+function bez(x1:number,y1:number,x2:number,y2:number){
+  const cx=(x1+x2)/2
+  return `M${x1} ${y1} C${cx} ${y1},${cx} ${y2},${x2} ${y2}`
+}
+
+interface E { id:string; path:string; len:number; color:string; opacity:number; dur:number; delay:number }
+const edges = computed<E[]>(() =>
+  nodes.filter(n => n.parent).map(n => {
+    const p = nodeMap[n.parent!]
+    const len = Math.hypot(n.x-p.x, n.y-p.y) * 1.3
+    return {
+      id: `${p.id}-${n.id}`,
+      path: bez(p.x, p.y, n.x, n.y),
+      len,
+      color: n.color === '#334155' ? '#1e293b' : n.color,
+      opacity: n.color === '#334155' ? 0.2 : 0.45,
+      dur: 550,
+      delay: Math.max(0, n.delay - 120),
+    }
+  })
+)
+
+const tip = computed(() => {
+  if (!hovered.value) return null
+  const n = nodeMap[hovered.value]
+  if (!n) return null
+  return { x: n.x, y: n.y - n.r - 6, name: n.label, metrics: n.tip }
+})
+
+let pulseTimer: ReturnType<typeof setInterval>
+onMounted(() => {
+  setTimeout(() => { started.value = true }, 300)
+  pulseTimer = setInterval(() => {
+    const t = Date.now() / 1000
+    pulseOp.value = 0.15 + 0.25 * Math.abs(Math.sin(t * 1.8))
+  }, 60)
+  const obs = new IntersectionObserver(entries => {
+    if (entries[0].isIntersecting && !started.value) started.value = true
+  }, { threshold: 0.2 })
+  if (svgRef.value) obs.observe(svgRef.value)
+})
+onUnmounted(() => clearInterval(pulseTimer))
+</script>
+
+<style scoped>
+.tt-enter-active, .tt-leave-active { transition: opacity 0.15s ease, transform 0.15s ease; }
+.tt-enter-from, .tt-leave-to { opacity: 0; transform: translate(-50%, -90%); }
+</style>
diff --git a/content-forest-front/components/LoopSection.vue b/content-forest-front/components/LoopSection.vue
diff --git a/openspec/changes/landing-page-integrations/.openspec.yaml b/openspec/changes/landing-page-integrations/.openspec.yaml
diff --git a/openspec/changes/landing-page-integrations/design.md b/openspec/changes/landing-page-integrations/design.md
diff --git a/openspec/changes/landing-page-integrations/proposal.md b/openspec/changes/landing-page-integrations/proposal.md
diff --git a/openspec/changes/landing-page-integrations/tasks.md b/openspec/changes/landing-page-integrations/tasks.md
diff --git a/openspec/config.yaml b/openspec/config.yaml

-Original file line number
+Diff line change
@@ @@ -1,5 +1,5 @@ @@
 -.cursor
 -.trae
 +.cursor/
 +.trae/
 node_modules/
 dist/
 build/
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-{"id":"dev","timestamp":1773585554081}`
	`1`	`+{"id":"dev","timestamp":1773588357897}`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-{"id":"dev","timestamp":1773585554081,"prerendered":[]}`
	`1`	`+{"id":"dev","timestamp":1773588357897,"prerendered":[]}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "date": "2026-03-15T14:39:25.304Z",`
	`2`	`+ "date": "2026-03-15T15:26:02.705Z",`
`3`	`3`	`"preset": "nitro-dev",`
`4`	`4`	`"framework": {`
`5`	`5`	`"name": "nuxt",`
`@@ -9,9 +9,9 @@`
`9`	`9`	`"nitro": "2.13.1"`
`10`	`10`	`},`
`11`	`11`	`"dev": {`
`12`		`- "pid": 8816,`
	`12`	`+ "pid": 44720,`
`13`	`13`	`"workerAddress": {`
`14`		`- "socketPath": "\\\\.\\pipe\\nitro-worker-8816-1-1-1086.sock"`
	`14`	`+ "socketPath": "\\\\.\\pipe\\nitro-worker-44720-1-1-8911.sock"`
`15`	`15`	`}`
`16`	`16`	`}`
`17`	`17`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-// generated by the @nuxtjs/tailwindcss <https://github.com/nuxt-modules/tailwindcss> module at 2026/3/15 22:39:21`
	`1`	`+// generated by the @nuxtjs/tailwindcss <https://github.com/nuxt-modules/tailwindcss> module at 2026/3/15 23:31:03`
`2`	`2`	`import "@nuxtjs/tailwindcss/config-ctx"`
`3`	`3`	`import configMerger from "@nuxtjs/tailwindcss/merger";`
`4`	`4`