@templmf/temp-solf-lmf 0.0.133 → 0.0.134

package/HomeView.vue

@@ -0,0 +1,481 @@
+<template>
+  <div class="dot-grid" style="position: relative;">
+    <div class="glow-orb" style="width: 400px; height: 400px; background: rgba(26,111,196,0.2); top: 0; left: 25%;" />
+    <div class="glow-orb" style="width: 260px; height: 260px; background: rgba(96,165,250,0.1); top: 140px; right: 25%;" />
+
+    <!-- Hero -->
+    <section style="position: relative; max-width: 860px; margin: 0 auto; padding: 80px 24px 96px; display: flex; flex-direction: column; align-items: center; text-align: center;">
+      <div class="animate-fade-up" style="display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--tag-border); background: var(--tag-bg); margin-bottom: 28px;">
+        <span class="animate-pulse-slow" style="width: 7px; height: 7px; border-radius: 50%; background: #4ade80; display: inline-block;" />
+        <span class="font-mono" style="font-size: 12px; color: var(--brand-400);">v1.0 现已上线 · 对话即服务</span>
+      </div>
+
+      <h1 class="font-display animate-fade-up stagger-1" style="font-weight: 800; line-height: 1.1; margin-bottom: 16px; font-size: clamp(2.4rem, 5.5vw, 3.8rem);">
+        <span class="gradient-text">Citic Frontend</span><br />
+      </h1>
+
+      <p class="animate-fade-up stagger-2" style="color: var(--text-secondary); margin-bottom: 36px; max-width: 480px; font-size: 1rem; line-height: 1.7; font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
+        前端开发全流程智能伙伴
+      </p>
+
+      <div class="glass animate-fade-up stagger-3" style="width: 100%; max-width: 600px; border-radius: 16px; padding: 18px 18px 14px; box-shadow: 0 0 60px rgba(26,111,196,0.08), 0 20px 40px rgba(0,0,0,0.12);">
+        <div style="display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;">
+          <button
+            v-for="s in QUICK"
+            :key="s"
+            class="quick-btn"
+            style="font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; transition: all 0.15s;"
+            @click="handleSend(s)"
+          >{{ s }}</button>
+        </div>
+        <InputBar
+          :is-loading="false"
+          placeholder="描述您的需求，回车即进入 AI 对话..."
+          :available-models="props.chatStore.availableModels"
+          :selected-model-id="props.chatStore.selectedModel.value?.id || ''"
+          :show-model-selector="true"
+          :has-image-attachment="homeHasImage"
+          @send="handleSend"
+          @select-model="props.chatStore.selectModel"
+          @attachment-change="onHomeAttachmentChange"
+        />
+        <p class="font-mono" style="font-size: 11px; color: var(--text-muted); text-align: center; margin-top: 10px;">
+          发送后自动跳转到 AI 对话页面
+        </p>
+      </div>
+    </section>
+
+    <!-- Capability Graph -->
+    <section style="max-width: 960px; margin: 0 auto; padding: 0 24px 96px;">
+      <h2 class="section-title" style="text-align: center; margin-bottom: 10px;">能力图谱</h2>
+      <p style="color: var(--text-secondary); text-align: center; margin-bottom: 32px; font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
+        拖拽节点探索 · 点击查看详情
+      </p>
+      <div class="glass" style="border-radius: 16px; overflow: hidden; position: relative;">
+        <div ref="graphRef" style="width: 100%; height: 480px; position: relative;">
+          <canvas ref="bgCanvas" style="position:absolute;inset:0;pointer-events:none;border-radius:16px;z-index: 1;"></canvas>
+          <svg ref="graphSvg" style="position:absolute;inset:0;width:100%;height:100%;"></svg>
+          <div ref="graphTip" style="position:absolute;pointer-events:none;padding:5px 11px;background:var(--bg-secondary);border:1px solid var(--tag-border);border-radius:8px;font-size:12px;color:var(--text-secondary);white-space:nowrap;opacity:0;transition:opacity .15s;z-index:10;">
+          </div>
+        </div>
+        <div style="padding: 14px 20px; border-top: 1px solid var(--border-subtle); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;">
+          <div style="display:flex;gap:16px;flex-wrap:wrap;">
+            <span v-for="leg in GRAPH_LEGEND" :key="leg.label" style="display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-muted);">
+              <span :style="`width:8px;height:8px;border-radius:50%;background:${leg.color};display:inline-block;flex-shrink:0`" />
+              {{ leg.label }}
+            </span>
+          </div>
+          <button class="btn-ghost" style="font-size:12px;padding:5px 14px;border:1px solid var(--border-subtle);border-radius:999px;" @click="router.push('/features')">
+            查看全部能力 →
+          </button>
+        </div>
+      </div>
+    </section>
+
+
+    <!-- Features -->
+    <section style="max-width: 960px; margin: 0 auto; padding: 0 24px 96px;">
+      <h2 class="section-title" style="text-align: center; margin-bottom: 10px;">核心能力</h2>
+      <p style="color: var(--text-secondary); text-align: center; margin-bottom: 40px; font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">四大场景，全部通过对话驱动</p>
+      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;">
+        <div v-for="f in FEATURES" :key="f.title" class="card">
+          <div style="width: 44px; height: 44px; border-radius: 12px; background: var(--tag-bg); border: 1px solid var(--tag-border); display: flex; align-items: center; justify-content: center; margin-bottom: 14px;">
+            <component :is="f.Icon" :size="22" color="var(--brand-400)" :stroke-width="1.75" />
+          </div>
+          <h3 class="font-display" style="font-weight: 600; color: var(--text-primary); font-size: 15px; margin-bottom: 8px;">{{ f.title }}</h3>
+          <p style="color: var(--text-secondary); font-size: 13px; line-height: 1.6; font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">{{ f.desc }}</p>
+          <div style="margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-subtle);">
+            <span class="font-mono" style="font-size: 12px; color: var(--brand-400);">{{ f.example }}</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Stats -->
+    <section ref="statsRef" style="max-width: 960px; margin: 0 auto; padding: 0 24px 96px;">
+      <div class="glass" style="border-radius: 16px; padding: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px; text-align: center;">
+        <div v-for="(stat, i) in RAW_STATS" :key="stat.label" style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
+          <div class="font-display" style="font-weight: 700; color: var(--text-primary); font-size: 2rem;">
+            {{ counters[i].current.value.toLocaleString() }}<span style="color: var(--brand-400);">{{ stat.suffix }}</span>
+          </div>
+          <div style="color: var(--text-muted); font-size: 14px; font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">{{ stat.label }}</div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA -->
+    <section style="max-width: 960px; margin: 0 auto; padding: 0 24px 112px; text-align: center;">
+      <div class="glass" style="border-radius: 16px; padding: 48px 32px; position: relative; overflow: hidden;">
+        <div class="glow-orb" style="width: 256px; height: 256px; background: rgba(26,111,196,0.15); top: -40px; left: 50%; transform: translateX(-50%);" />
+        <h2 class="section-title" style="margin-bottom: 14px; position: relative; z-index: 1;">立即体验对话式开发</h2>
+        <p style="color: var(--text-secondary); margin-bottom: 28px; font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; position: relative; z-index: 1;">无需配置，直接对话，从第一个消息开始提速</p>
+        <div style="display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1;">
+          <button class="btn-primary" style="padding: 12px 32px; font-size: 15px;" @click="router.push('/chat')">
+            <MessageSquare :size="16" /> 开始 AI 对话
+          </button>
+          <button class="btn-ghost" style="padding: 12px 32px; font-size: 15px; border: 1px solid var(--border-default); border-radius: 8px;" @click="router.push('/market')">
+            <Layers :size="16" /> 浏览组件市场
+          </button>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { Rocket, Package, BarChart2, Wrench, MessageSquare, Layers } from 'lucide-vue-next'
+import InputBar from '../chat-sdk/core/components/InputBar.vue'
+import { useCountUp } from '../composables/useCountUp.js'
+
+const props = defineProps({
+  chatStore: { type: Object, required: true },
+})
+
+const router = useRouter()
+
+const homeHasImage = ref(false)
+function onHomeAttachmentChange(attachments) {
+  homeHasImage.value = attachments.some(a => a.type === 'visual')
+}
+
+const FEATURES = [
+  { Icon: Rocket,    title: '脚手架生成', desc: '描述项目类型和技术栈，AI 即时生成可运行的工程模板', example: '「生成 Vue 3 + TS + Pinia 项目」' },
+  { Icon: Package,   title: '组件搜索',   desc: '用自然语言找到最合适的组件，直接获取安装命令',       example: '「找一个企业级 Table 组件」' },
+  { Icon: BarChart2, title: '流水线监控', desc: '对话查询 CI/CD 状态，异常时自动推送修复建议',       example: '「查看 main 分支构建状态」' },
+  { Icon: Wrench,    title: '异常修复',   desc: '粘贴报错信息，获取精准定位分析与可执行修复方案',     example: '「分析这个 TypeScript 报错」' },
+]
+
+const RAW_STATS = [
+  { label: '接入开发者',   target: 12000, suffix: '+' },
+  { label: '组件总数',     target: 380,   suffix: '+' },
+  { label: 'Skills 数量', target: 95,    suffix: '+' },
+  { label: 'GitHub Stars', target: 2100,  suffix: '★' },
+]
+
+const QUICK = ['写一个炫酷的HTML页面', '将截图转为vue3代码', '画一个完整的cdn回源原理图']
+
+// ── Stats 滚动计数 ──
+const counters = RAW_STATS.map(s => useCountUp(s.target))
+const statsRef = ref(null)
+let statsObserver = null
+
+// ── 能力图谱 ──
+const graphRef = ref(null)
+const bgCanvas = ref(null)
+const graphSvg = ref(null)
+const graphTip = ref(null)
+let graphObserver = null
+let d3Instance   = null
+let animFrame    = null
+
+const GRAPH_LEGEND = [
+  { label: '核心节点', color: '#1a6fc4' },
+  { label: '功能模块 (二级圆盘)', color: '#1D9E75' },
+  { label: '支持能力 (三级微锚点)', color: '#637a99' },
+]
+
+const MODULES = [
+  { id: 'comp',  name: '组件渲染',  color: '#1D9E75' },
+  { id: 'chart', name: '图表图库',  color: '#BA7517' },
+  { id: 'tool',  name: '工具集成',  color: '#7F77DD' },
+  { id: 'md',    name: 'Markdown', color: '#D85A30' },
+  { id: 'model', name: '模型对话',  color: '#0F6E56' },
+]
+
+const LEAVES = [
+  { id: 'vue',     name: 'Vue SFC',     mod: 'comp'  },
+  { id: 'react',   name: 'React JSX',   mod: 'comp'  },
+  { id: 'less',    name: 'Less / CSS',  mod: 'comp'  },
+  { id: 'html',    name: 'HTML 沙箱',   mod: 'comp'  },
+  { id: 'echarts', name: 'ECharts',     mod: 'chart' },
+  { id: 'g6',      name: 'AntV G6',     mod: 'chart' },
+  { id: 'mermaid', name: 'Mermaid',     mod: 'chart' },
+  { id: 'd3',      name: 'D3.js',       mod: 'chart' },
+  { id: 'gitlab',  name: 'GitLab',      mod: 'tool'  },
+  { id: 'upload',  name: '文件上传',    mod: 'tool'  },
+  { id: 'skills',  name: 'Skills 插件', mod: 'tool'  },
+  { id: 'shiki',   name: 'Shiki 高亮',  mod: 'md'    },
+  { id: 'latex',   name: 'LaTeX',       mod: 'md'    },
+  { id: 'gfm',     name: 'GFM 表格',    mod: 'md'    },
+  { id: 'multi',   name: '多模型切换',  mod: 'model' },
+  { id: 'sse',     name: 'SSE 流式',    mod: 'model' },
+  { id: 'idb',     name: 'IndexedDB',   mod: 'model' },
+]
+
+function loadD3() {
+  return new Promise((resolve) => {
+    if (window.d3) { resolve(window.d3); return }
+    const s = document.createElement('script')
+    s.src = 'https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js'
+    s.onload = () => resolve(window.d3)
+    document.head.appendChild(s)
+  })
+}
+
+async function initGraph() {
+  const d3 = await loadD3()
+  d3Instance = d3
+  const container = graphRef.value
+  if (!container) return
+
+  const W = container.offsetWidth
+  const H = 480
+
+  // ── 1. 星点背景（精简密度，避免与网格线冲突） ──
+  // ── 1. 星点背景微调 ──
+  const bc = bgCanvas.value
+  bc.width = W
+  bc.height = H
+  const bx = bc.getContext('2d')
+  const isDark = document.documentElement.classList.contains('dark')
+    || window.matchMedia('(prefers-color-scheme: dark)').matches
+
+  const stars = Array.from({ length: 40 }, () => ({
+    x: Math.random() * W,
+    y: Math.random() * H,
+    r: Math.random() * 1.2 + 0.4, // 稍微增加一点物理半径（0.4 ~ 1.6px），提升可见度
+    a: Math.random() * 0.12 + 0.04,
+    da: (Math.random() - 0.5) * 0.003,
+  }))
+
+  function drawStars() {
+    bx.clearRect(0, 0, W, H)
+    
+    // 【新增】采用经典的高级滤色/屏幕叠加混合模式，让微光自然融入底层
+    bx.globalCompositeOperation = isDark ? 'screen' : 'source-over'
+    
+    stars.forEach(s => {
+      s.a = Math.max(isDark ? 0.08 : 0.05, Math.min(isDark ? 0.25 : 0.15, s.a + s.da))
+      bx.beginPath()
+      bx.arc(s.x, s.y, s.r, 0, Math.PI * 2)
+      
+      // 【优化】亮色模式下改用带有呼吸感的浅灰蓝/暮灰色，暗色下采用通透的幽蓝色
+      bx.fillStyle = isDark ? `rgba(160,200,255,${s.a})` : `rgba(71,114,179,${s.a})`
+      bx.fill()
+    })
+    animFrame = requestAnimationFrame(drawStars)
+  }
+  drawStars()
+
+  // ── 2. 严格的层级数据规范（重塑半径与尺寸） ──
+  const modColorMap = Object.fromEntries(MODULES.map(m => [m.id, m.color]))
+  
+  const nodes = [
+    // 核心大圆
+    { id: 'root', name: 'Frontend AI', type: 'root', color: '#1a6fc4', r: 48 },
+    // 二级模块
+    ...MODULES.map(m => ({ ...m, type: 'module', color: m.color, r: 30 })),
+    // 三级技能
+    ...LEAVES.map(l => ({ ...l, type: 'leaf', color: modColorMap[l.mod], r: 5 })),
+  ]
+
+  // 保持清晰的内、中、外三层星环布局
+  const links = [
+    ...MODULES.map(m => ({ source: 'root', target: m.id, dist: 110, str: 0.6, isCore: true })),
+    ...LEAVES.map(l => ({ source: l.mod,   target: l.id,  dist: 60,  str: 0.8, isCore: false })),
+  ]
+
+  // ── 3. SVG 初始化与高级渐变定义 ──
+  const svgEl = graphSvg.value
+  svgEl.innerHTML = ''
+  const svg = d3.select(svgEl).attr('viewBox', `0 0 ${W} ${H}`)
+  const defs = svg.append('defs')
+
+  // 核心圆线性渐变
+  const rootGrad = defs.append('linearGradient').attr('id', 'grad-root-solid').attr('x1', '0%').attr('y1', '0%').attr('x2', '100%').attr('y2', '100%')
+  rootGrad.append('stop').attr('offset', '0%').attr('stop-color', '#1a6fc4')
+  rootGrad.append('stop').attr('offset', '100%').attr('stop-color', '#0b4585')
+
+  // 【修复后】二级能力节点的不透明渐变底色
+  MODULES.forEach(m => {
+    const mGrad = defs.append('linearGradient').attr('id', `grad-mod-opaque-${m.id}`).attr('x1', '0%').attr('y1', '0%').attr('x2', '0%').attr('y2', '100%')
+    if (isDark) {
+      // 暗色模式：从深灰网格色平滑过渡到微弱的模块主题色
+      mGrad.append('stop').attr('offset', '0%').attr('stop-color', '#1f2937')
+      mGrad.append('stop').attr('offset', '100%').attr('stop-color', d3.hsl(m.color).darker(1.5).toString())
+    } else {
+      // 明亮模式：从纯白平滑过渡到极其淡雅的浅主题色（修复此处）
+      const hslColor = d3.hsl(m.color)
+      hslColor.l = 0.96 // 直接修改明度属性 l
+      
+      mGrad.append('stop').attr('offset', '0%').attr('stop-color', '#ffffff')
+      mGrad.append('stop').attr('offset', '100%').attr('stop-color', hslColor.toString())
+    }
+  })
+
+  // ── 3.5 【新增背景层】精密工程网格 + 环形星轨 ──
+  const bgGroup = svg.append('g').attr('class', 'graph-bg')
+  
+  // 绘制 1px 极淡工程网格细线（绝对直角网格，填补两侧空白且留白高级）
+  const gridSize = 40 
+  const gridColor = isDark ? 'rgba(51, 65, 85, 0.15)' : 'rgba(226, 232, 240, 0.5)'
+  
+  // 横线
+  for (let y = 0; y < H; y += gridSize) {
+    bgGroup.append('line').attr('x1', 0).attr('y1', y).attr('x2', W).attr('y2', y).attr('stroke', gridColor).attr('stroke-width', 0.8)
+  }
+  // 竖线
+  for (let x = 0; x < W; x += gridSize) {
+    bgGroup.append('line').attr('x1', x).attr('y1', 0).attr('x2', x).attr('y2', H).attr('stroke', gridColor).attr('stroke-width', 0.8)
+  }
+
+  // 绘制二级能力层、三级技能层的同心圆虚线轨道
+  const orbitGroup = bgGroup.append('g').attr('class', 'orbits').attr('opacity', isDark ? 0.2 : 0.4)
+  const orbitRadii = [110, 170] // 对应核心到能力的 110px 轴距，以及外围延展区
+  orbitRadii.forEach(radius => {
+    orbitGroup.append('circle')
+      .attr('cx', W / 2).attr('cy', H / 2).attr('r', radius)
+      .attr('fill', 'none')
+      .attr('stroke', isDark ? '#475569' : '#cbd5e1')
+      .attr('stroke-width', 0.8)
+      .attr('stroke-dasharray', '3, 4') // 精密虚线
+  })
+
+  // ── 4. 力导向核心调优（层级隔离） ──
+  const sim = d3.forceSimulation(nodes)
+    .force('link', d3.forceLink(links).id(d => d.id).distance(d => d.dist).strength(d => d.str))
+    .force('charge', d3.forceManyBody().strength(d => d.type === 'root' ? -700 : d.type === 'module' ? -350 : -40))
+    .force('center', d3.forceCenter(W / 2, H / 2))
+    .force('x', d3.forceX(W / 2).strength(0.2))
+    .force('y', d3.forceY(H / 2).strength(0.2))
+    .force('collision', d3.forceCollide().radius(d => {
+      if (d.type === 'root') return 70
+      if (d.type === 'module') return 55
+      return 30
+    }))
+
+  // ── 5. 先画线（确保线条乖乖呆在圆盘底层） ──
+  const linkSel = svg.append('g').selectAll('line').data(links).join('line')
+    .attr('stroke', d => {
+      const t = nodes.find(n => n.id === (d.target.id ?? d.target))
+      return t?.color ?? '#1a6fc4'
+    })
+    .attr('stroke-width', d => d.isCore ? 1.5 : 0.8)
+    .attr('stroke-opacity', d => d.isCore ? 0.35 : 0.15)
+
+  // ── 6. 渲染节点组 ──
+  const nodeSel = svg.append('g').selectAll('g').data(nodes).join('g')
+    .attr('cursor', 'pointer')
+    .call(
+      d3.drag()
+        .on('start', (e, d) => { if (!e.active) sim.alphaTarget(0.1).restart(); d.fx = d.x; d.fy = d.y })
+        .on('drag',  (e, d) => { d.fx = e.x; d.fy = e.y })
+        .on('end',   (e, d) => { if (!e.active) sim.alphaTarget(0); d.fx = null; d.fy = null })
+    )
+
+  // ── 7. 后画圆（四方框已删，能力节点启用全新不透明渐变） ──
+  nodeSel.append('circle')
+    .attr('r', d => d.r)
+    .attr('fill', d => {
+      if (d.type === 'root') return 'url(#grad-root-solid)'
+      if (d.type === 'module') return `url(#grad-mod-opaque-${d.id})` // 注入渐变底色
+      return d.color // 三级原子技能：实心原色微锚点
+    })
+    .attr('stroke', d => d.type === 'leaf' ? 'none' : d.color)
+    .attr('stroke-width', d => d.type === 'module' ? 1.5 : 0)
+
+  // ── 8. 精准文字排版 ──
+  // 8.1 核心与能力大类文字：锁在圆盘中央
+  nodeSel.filter(d => d.type !== 'leaf').append('text')
+    .text(d => d.name)
+    .attr('text-anchor', 'middle')
+    .attr('dominant-baseline', 'central')
+    .attr('font-family', 'Inter, "PingFang SC", sans-serif')
+    .attr('font-size', d => d.type === 'root' ? 12 : 10)
+    .attr('font-weight', '600')
+    .attr('fill', d => {
+      if (d.type === 'root') return '#ffffff'
+      return isDark ? '#f1f5f9' : '#0f172a'
+    })
+
+  // 8.2 具体技能（叶子）文字：优雅悬挂在核心色点下方
+  nodeSel.filter(d => d.type === 'leaf').append('text')
+    .text(d => d.name)
+    .attr('text-anchor', 'middle')
+    .attr('dominant-baseline', 'central')
+    .attr('font-family', 'Inter, "PingFang SC", sans-serif')
+    .attr('font-size', 9)
+    .attr('font-weight', '400')
+    .attr('fill', isDark ? '#94a3b8' : '#576575')
+    .attr('dy', 14) 
+    .attr('pointer-events', 'none')
+
+  // ── 9. Tooltip & 交互 ──
+  const tip = graphTip.value
+  nodeSel
+    .on('mouseenter', (e, d) => {
+      tip.style.opacity = '1'
+      tip.textContent = d.type === 'root' ? 'Frontend AI — 前端开发全流程智能伙伴' : d.name
+    })
+    .on('mousemove', (e) => {
+      const b = container.getBoundingClientRect()
+      tip.style.left = (e.clientX - b.left + 14) + 'px'
+      tip.style.top  = (e.clientY - b.top  - 36) + 'px'
+    })
+    .on('mouseleave', () => { tip.style.opacity = '0' })
+    .on('click', (_, d) => {
+      if (d.type !== 'root') router.push('/features')
+    })
+
+  // ── 10. 每帧坐标更新 ──
+  sim.on('tick', () => {
+    const pad = 35
+    nodes.forEach(d => {
+      d.x = Math.max(pad + d.r, Math.min(W - pad - d.r, d.x))
+      d.y = Math.max(pad + d.r, Math.min(H - pad - d.r, d.y))
+    })
+    linkSel
+      .attr('x1', d => d.source.x).attr('y1', d => d.source.y)
+      .attr('x2', d => d.target.x).attr('y2', d => d.target.y)
+    nodeSel.attr('transform', d => `translate(${d.x},${d.y})`)
+  })
+}
+
+function handleSend(val) {
+  const sid = props.chatStore.newSession(val)
+  router.push('/chat')
+  setTimeout(() => props.chatStore.sendMessage(val, sid), 80)
+}
+
+onMounted(() => {
+  // Stats 计数器
+  statsObserver = new IntersectionObserver(
+    ([entry]) => {
+      if (entry.isIntersecting) {
+        counters.forEach(c => c.start())
+        statsObserver.disconnect()
+      }
+    },
+    { threshold: 0.3 }
+  )
+  if (statsRef.value) statsObserver.observe(statsRef.value)
+
+  // 图谱懒加载
+  graphObserver = new IntersectionObserver(
+    ([entry]) => {
+      if (entry.isIntersecting) {
+        initGraph()
+        graphObserver.disconnect()
+      }
+    },
+    { threshold: 0.1 }
+  )
+  if (graphRef.value) graphObserver.observe(graphRef.value)
+})
+
+onUnmounted(() => {
+  statsObserver?.disconnect()
+  graphObserver?.disconnect()
+  if (animFrame) cancelAnimationFrame(animFrame)
+})
+</script>
+
+<style scoped>
+.quick-btn:hover {
+  border-color: rgba(26,111,196,0.4) !important;
+  color: var(--brand-400) !important;
+  background: var(--tag-bg) !important;
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@templmf/temp-solf-lmf",
-  "version": "0.0.133",
+  "version": "0.0.134",
   "description": "",
   "main": "index.js",
   "scripts": {