@templmf/temp-solf-lmf 0.0.135 → 0.0.136

package/package.json

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

package/server.js

@@ -0,0 +1,58 @@
+import express from "express";
+import cors from "cors";
+import { ChatAnthropic } from "@langchain/anthropic";
+import { StateGraph, MessagesAnnotation } from "@langchain/langgraph";
+import { HumanMessage, AIMessage } from "@langchain/core/messages";
+
+const app = express();
+app.use(cors());
+app.use(express.json());
+
+const llm = new ChatAnthropic({
+  model: "claude-3-5-sonnet-20241022",
+  apiKey: process.env.ANTHROPIC_API_KEY,
+});
+
+const graph = new StateGraph(MessagesAnnotation)
+  .addNode("chat", async (state) => ({
+    messages: [await llm.invoke(state.messages)],
+  }))
+  .addEdge("__start__", "chat")
+  .addEdge("chat", "__end__")
+  .compile();
+
+app.post("/chat/stream", async (req, res) => {
+  const { messages } = req.body;
+  // messages 格式: [{ role: "user"|"assistant", content: "..." }]
+
+  // SSE headers
+  res.setHeader("Content-Type", "text/event-stream");
+  res.setHeader("Cache-Control", "no-cache");
+  res.setHeader("Connection", "keep-alive");
+
+  // 将前端传来的历史消息转换为 LangChain 格式
+  const history = messages.map((m) =>
+    m.role === "user" ? new HumanMessage(m.content) : new AIMessage(m.content)
+  );
+
+  try {
+    const stream = await graph.stream(
+      { messages: history },
+      { streamMode: "messages" }
+    );
+
+    for await (const [chunk, metadata] of stream) {
+      if (metadata?.langgraph_node === "chat" && chunk.content) {
+        res.write(`data: ${JSON.stringify({ token: chunk.content })}\n\n`);
+      }
+    }
+
+    res.write(`data: [DONE]\n\n`);
+  } catch (err) {
+    res.write(`data: ${JSON.stringify({ error: err.message })}\n\n`);
+  } finally {
+    res.end();
+  }
+});
+
+app.listen(3000, () => console.log("Server running on http://localhost:3000"));

package/HomeView.vue

@@ -1,481 +0,0 @@
-<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/src/data/features.js

@@ -1,177 +0,0 @@
-// src/data/features.js
-// 新增能力只需在对应模块的 items 数组里追加一条记录即可
-// date 格式: "YYYY-MM"
-// isNew: true  → 显示「新」标签
-// isBeta: true → 显示「Beta」标签
-
-export const FEATURE_MODULES = [
-  {
-    id: 'component',
-    cls: 'blue',
-    icon: 'ti-components',
-    name: '组件渲染',
-    desc: 'Vue、ElementPlus、HTML 实时渲染',
-    items: [
-      {
-        name: 'Vue SFC',
-        desc: '支持 <script setup>、<style scoped>，右侧 Artifact 面板实时预览。',
-        tags: ['Vue 3', 'Composition API'],
-        date: '2024-09',
-      },
-      {
-        name: 'React JSX',
-        desc: 'Artifact 面板渲染函数组件，支持 useState、useEffect 等 Hooks。',
-        tags: ['React 18', 'JSX'],
-        date: '2024-09',
-      },
-      {
-        name: 'Element Plus',
-        desc: 'AI 生成组件自动引入 Element Plus，无需手动配置依赖。',
-        tags: ['Element Plus'],
-        date: '2025-01',
-      },
-      {
-        name: 'Less / CSS',
-        desc: '内置 Less 编译器，支持嵌套、变量、mixin，实时编译输出。',
-        tags: ['Less', 'CSS Variables'],
-        date: '2024-11',
-      },
-      {
-        name: 'HTML 片段',
-        desc: '任意 HTML + JS 代码段，iframe 沙箱隔离运行，安全预览。',
-        tags: ['iframe 沙箱'],
-        date: '2024-09',
-      },
-    ],
-  },
-  {
-    id: 'chart',
-    cls: 'green',
-    icon: 'ti-chart-dots',
-    name: '图表 & 图库',
-    desc: 'ECharts、G6、Mermaid、D3',
-    items: [
-      {
-        name: 'ECharts',
-        desc: '折线、柱状、饼图、散点、热力图，支持大数据量渲染。',
-        tags: ['Apache ECharts 5'],
-        date: '2024-10',
-      },
-      {
-        name: 'AntV G6',
-        desc: '关系图、拓扑图、树图，适合节点连线类可视化场景。',
-        tags: ['@antv/g6'],
-        date: '2025-03',
-        isNew: true,
-      },
-      {
-        name: 'Mermaid',
-        desc: 'Markdown 消息中直接渲染流程图、时序图、甘特图，支持缩放查看。',
-        tags: ['Mermaid 10', '流程图', '时序图'],
-        date: '2024-12',
-      },
-      {
-        name: 'D3.js',
-        desc: '支持自定义数据驱动图形，适合复杂定制化可视化需求。',
-        tags: ['D3 v7'],
-        date: '2025-04',
-        isNew: true,
-      },
-      {
-        name: 'SVG / Canvas',
-        desc: 'AI 生成原生 SVG 矢量图或 Canvas 绘图代码，直接嵌入渲染。',
-        tags: ['SVG', 'Canvas 2D'],
-        date: '2024-09',
-      },
-    ],
-  },
-  {
-    id: 'tool',
-    cls: 'amber',
-    icon: 'ti-plug',
-    name: '工具集成',
-    desc: 'GitLab、文件上传、Skills 插件',
-    items: [
-      {
-        name: 'GitLab',
-        desc: '读取项目列表、MR、Issue，AI 直接基于仓库内容回答和生成代码。',
-        tags: ['GitLab API', '工具调用'],
-        date: '2025-02',
-      },
-      {
-        name: '文件上传',
-        desc: '支持图片、PDF 上传，AI 读取内容结合对话上下文分析。',
-        tags: ['图片', 'PDF'],
-        date: '2024-11',
-      },
-      {
-        name: 'Skills 插件',
-        desc: '从 Skills 市场安装能力插件，扩展 AI 在特定场景下的执行能力。',
-        tags: ['官方', '社区'],
-        date: '2025-05',
-        isBeta: true,
-      },
-    ],
-  },
-  {
-    id: 'markdown',
-    cls: 'purple',
-    icon: 'ti-markdown',
-    name: 'Markdown 增强',
-    desc: '代码高亮、LaTeX、GFM',
-    items: [
-      {
-        name: '代码高亮',
-        desc: '基于 Shiki，支持 100+ 语言语法高亮，深浅主题自动切换。',
-        tags: ['Shiki', '100+ 语言'],
-        date: '2024-09',
-      },
-      {
-        name: 'LaTeX 公式',
-        desc: '行内 $ 和块级 $$ 公式均可渲染，适合数学、算法类内容。',
-        tags: ['KaTeX', '行内 & 块级'],
-        date: '2024-10',
-      },
-      {
-        name: '表格 / 任务列表',
-        desc: '完整 GFM 支持，表格、任务列表、引用块、分割线均正确渲染。',
-        tags: ['GFM'],
-        date: '2024-09',
-      },
-    ],
-  },
-  {
-    id: 'model',
-    cls: 'coral',
-    icon: 'ti-brain',
-    name: '模型 & 对话',
-    desc: '多模型、流式输出、持久化',
-    items: [
-      {
-        name: '多模型切换',
-        desc: '对话中随时切换模型，配置即时生效，不打断上下文。',
-        tags: ['DashScope'],
-        date: '2025-01',
-      },
-      {
-        name: '流式输出',
-        desc: 'SSE 实时流式返回，逐字渲染，响应不等待完整结果。',
-        tags: ['SSE', 'Stream'],
-        date: '2024-09',
-      },
-      {
-        name: '对话历史持久化',
-        desc: 'IndexedDB 本地存储，刷新不丢记录，支持跨会话回溯。',
-        tags: ['IndexedDB'],
-        date: '2024-12',
-      },
-      {
-        name: '思考链展示',
-        desc: 'AI 推理过程可折叠展示，方便理解模型决策路径。',
-        tags: ['CoT'],
-        date: '2025-03',
-        isNew: true,
-      },
-    ],
-  },
-]

package/src/router/index.js

@@ -1,44 +0,0 @@
-import { createRouter, createWebHistory } from 'vue-router'
-
-const routes = [
-  { path: '/',                   component: () => import('../views/HomeView.vue') },
-  { path: '/chat',               component: () => import('../views/ChatView.vue') },
-  { path: '/chat/share/:uuid',  component: () => import('../views/ChatView.vue') },
-  { path: '/market',            component: () => import('../views/MarketView.vue') },
-  { path: '/skills',            component: () => import('../views/SkillsView.vue') },
-  { path: '/practices',         component: () => import('../views/PracticesView.vue') },
-  // ── 新增 ──
-  {
-    path: '/features',
-    name: 'features',
-    component: () => import('../views/FeaturesView.vue')
-  },
-  { path: '/:pathMatch(.*)*',   redirect: '/' },
-]
-
-const router = createRouter({
-  history: createWebHistory(),
-  routes,
-  scrollBehavior: () => ({ top: 0 }),
-})
-
-/**
- * 路由守卫：首页和 public 页面跳过鉴权，其他页面检查登录态
- */
-router.beforeEach(async (to) => {
-  if (to.path === '/' || to.meta.public) return true
-
-  const { useAuthStore } = await import('../composables/useAuth.js')
-  const authStore = useAuthStore()
-
-  const result = await authStore.checkAuth(to.fullPath)
-  if (result.ok) return true
-
-  if (result.redirectUrl) {
-    window.location.href = result.redirectUrl
-    return false
-  }
-  return false
-})
-
-export default router

package/src/views/FeaturesView.vue

@@ -1,475 +0,0 @@
-<template>
-  <div class="features-page">
-    <!-- Hero -->
-    <section class="hero" :class="{ visible: mounted }">
-      <p class="eyebrow">AI对话能力地图</p>
-      <h1 class="hero-title">
-        我们支持<br />
-        <em>哪些能力</em>
-      </h1>
-      <div class="hero-stats">
-        <div class="stat">
-          <span class="stat-n">{{ visibleStats.total }}</span>
-          <span class="stat-l">支持项</span>
-        </div>
-        <div class="stat">
-          <span class="stat-n">{{ visibleStats.newCount }}</span>
-          <span class="stat-l">近期新增</span>
-        </div>
-        <div class="stat">
-          <span class="stat-n">{{ visibleStats.modCount }}</span>
-          <span class="stat-l">功能模块</span>
-        </div>
-      </div>
-    </section>
-
-    <!-- 筛选栏 -->
-    <div class="filter-bar" :class="{ visible: mounted }" style="animation-delay: 0.08s">
-      <button
-        v-for="f in filters"
-        :key="f.id"
-        class="fbtn"
-        :class="{ on: activeFilter === f.id }"
-        @click="setFilter(f.id)"
-      >
-        {{ f.label }}
-      </button>
-    </div>
-
-    <!-- 模块列表 -->
-    <div class="modules" :class="{ visible: mounted }" style="animation-delay: 0.14s">
-      <div
-        v-for="mod in visibleModules"
-        :key="mod.id"
-        class="module"
-        :class="mod.cls"
-      >
-        <!-- 模块标题行 -->
-        <div class="mhead" @click="handleModuleClick(mod.id)">
-          <div class="micon">
-            <el-icon :size="18"><component :is="iconMap[mod.icon] || 'Grid'" /></el-icon>
-          </div>
-          <div class="minfo">
-            <span class="mname">{{ mod.name }}</span>
-            <span class="mdesc">{{ mod.desc }}</span>
-          </div>
-          <div class="mright">
-            <span class="mcount">{{ mod.items.length }} 项</span>
-            <i
-              class="ti ti-chevron-down mchevron"
-              :class="{ open: openState[mod.id] }"
-            />
-          </div>
-        </div>
-
-        <!-- 模块内容 -->
-        <Transition name="slide">
-          <div v-if="openState[mod.id]" class="mbody">
-            <div
-              v-for="(item, idx) in getVisibleItems(mod)"
-              :key="idx"
-              class="row"
-            >
-              <div class="row-main">
-                <div class="rname">{{ item.name }}</div>
-                <div class="rdesc" v-html="item.desc" />
-                <div class="rtags">
-                  <span v-for="t in item.tags" :key="t" class="tag">{{ t }}</span>
-                  <span v-if="item.isNew" class="tag new">新</span>
-                  <span v-if="item.isBeta" class="tag beta">Beta</span>
-                </div>
-              </div>
-              <div class="rdate">
-                <span class="rdate-mon">{{ formatDate(item.date).mon }}</span>
-                <span class="rdate-yr">{{ formatDate(item.date).yr }}</span>
-              </div>
-            </div>
-
-            <!-- 展开/收起更多 -->
-            <div
-              v-if="mod.items.length > COLLAPSE_AT"
-              class="more-row"
-              @click="toggleExpand(mod.id)"
-            >
-              <i
-                class="ti"
-                :class="expandState[mod.id] ? 'ti-chevron-up' : 'ti-chevron-down'"
-              />
-              <span v-if="expandState[mod.id]">收起</span>
-              <span v-else>还有 {{ mod.items.length - COLLAPSE_AT }} 项，点击展开</span>
-            </div>
-          </div>
-        </Transition>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted } from 'vue'
-import { FEATURE_MODULES } from '../data/features.js'
-
-const COLLAPSE_AT = 5
-
-const MONTHS = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
-
-function formatDate(d) {
-  const [y, mo] = d.split('-')
-  return { mon: MONTHS[parseInt(mo, 10) - 1], yr: y }
-}
-
-// 入场动画
-const mounted = ref(false)
-onMounted(() => {
-  requestAnimationFrame(() => {
-    mounted.value = true
-  })
-})
-
-// 筛选
-const activeFilter = ref('all')
-const filters = computed(() => [
-  { id: 'all', label: '全部模块' },
-  ...FEATURE_MODULES.map(m => ({ id: m.id, label: m.name })),
-])
-
-function setFilter(id) {
-  activeFilter.value = id
-  if (id === 'all') {
-    FEATURE_MODULES.forEach(m => { openState.value[m.id] = false })
-  } else {
-    openState.value[id] = true
-  }
-}
-
-const visibleModules = computed(() =>
-  activeFilter.value === 'all'
-    ? FEATURE_MODULES
-    : FEATURE_MODULES.filter(m => m.id === activeFilter.value)
-)
-
-// 顶部统计数字
-const visibleStats = computed(() => {
-  const mods = visibleModules.value
-  return {
-    total: mods.reduce((a, m) => a + m.items.length, 0),
-    newCount: mods.reduce((a, m) => a + m.items.filter(i => i.isNew || i.isBeta).length, 0),
-    modCount: mods.length,
-  }
-})
-
-// 模块折叠状态
-const openState = ref(
-  Object.fromEntries(FEATURE_MODULES.map(m => [m.id, false]))
-)
-const expandState = ref(
-  Object.fromEntries(FEATURE_MODULES.map(m => [m.id, false]))
-)
-
-function handleModuleClick(id) {
-  if (activeFilter.value !== id) {
-    setFilter(id)
-  } else {
-    toggleOpen(id)
-  }
-}
-function toggleOpen(id) {
-  openState.value[id] = !openState.value[id]
-}
-function toggleExpand(id) {
-  expandState.value[id] = !expandState.value[id]
-}
-
-function getVisibleItems(mod) {
-  if (mod.items.length <= COLLAPSE_AT || expandState.value[mod.id]) {
-    return mod.items
-  }
-  return mod.items.slice(0, COLLAPSE_AT)
-}
-
-// Element Plus 图标映射（按需替换为项目中实际已注册的图标）
-const iconMap = {
-  'ti-components': 'Grid',
-  'ti-chart-dots': 'TrendCharts',
-  'ti-plug': 'Connection',
-  'ti-markdown': 'Document',
-  'ti-brain': 'Cpu',
-}
-</script>
-
-<style scoped>
-/* ── 入场动画 ── */
-@keyframes fadeUp {
-  from { opacity: 0; transform: translateY(18px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-.hero,
-.filter-bar,
-.modules {
-  opacity: 0;
-  transition: none;
-}
-.hero.visible,
-.filter-bar.visible,
-.modules.visible {
-  animation: fadeUp 0.45s ease both;
-}
-.filter-bar.visible { animation-delay: 0.08s; }
-.modules.visible    { animation-delay: 0.14s; }
-
-/* ── 页面容器 ── */
-.features-page {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 2.5rem 1.5rem 4rem;
-}
-
-/* ── Hero ── */
-.hero {
-  padding-bottom: 2rem;
-  margin-bottom: 2rem;
-  border-bottom: 0.5px solid var(--el-border-color-light);
-}
-.eyebrow {
-  font-size: 11px;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--el-text-color-placeholder);
-  margin-bottom: 1rem;
-}
-.hero-title {
-  font-size: 48px;
-  font-weight: 500;
-  line-height: 1.05;
-  letter-spacing: -1.5px;
-  color: var(--el-text-color-primary);
-  margin-bottom: 1.5rem;
-}
-.hero-title em {
-  font-style: normal;
-  color: var(--el-color-primary);
-}
-.hero-stats {
-  display: flex;
-  gap: 2.5rem;
-}
-.stat {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-.stat-n {
-  font-size: 28px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-  letter-spacing: -0.5px;
-  line-height: 1;
-}
-.stat-l {
-  font-size: 12px;
-  color: var(--el-text-color-placeholder);
-}
-
-/* ── 筛选栏 ── */
-.filter-bar {
-  display: flex;
-  gap: 6px;
-  flex-wrap: wrap;
-  margin-bottom: 1.75rem;
-}
-.fbtn {
-  font-size: 12px;
-  padding: 5px 14px;
-  border-radius: 999px;
-  border: 0.5px solid var(--el-border-color);
-  background: transparent;
-  color: var(--el-text-color-secondary);
-  cursor: pointer;
-  transition: all 0.12s;
-  font-family: inherit;
-}
-.fbtn:hover {
-  border-color: var(--el-border-color-darker);
-  color: var(--el-text-color-primary);
-}
-.fbtn.on {
-  background: var(--el-text-color-primary);
-  color: var(--el-bg-color);
-  border-color: transparent;
-}
-
-/* ── 模块卡片 ── */
-.module {
-  margin-bottom: 1rem;
-  border: 0.5px solid var(--el-border-color-light);
-  border-radius: 12px;
-  overflow: hidden;
-}
-.mhead {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 1rem 1.25rem;
-  cursor: pointer;
-  user-select: none;
-  transition: background 0.1s;
-}
-.mhead:hover {
-  background: var(--el-fill-color-light);
-}
-.micon {
-  width: 36px;
-  height: 36px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  border: 0.5px solid transparent;
-}
-.minfo {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-.mname {
-  font-size: 15px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-}
-.mdesc {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-.mright {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.mcount {
-  font-size: 12px;
-  color: var(--el-text-color-placeholder);
-}
-.mchevron {
-  font-size: 14px;
-  color: var(--el-text-color-placeholder);
-  transition: transform 0.2s;
-}
-.mchevron.open {
-  transform: rotate(180deg);
-}
-
-/* 模块主题色 */
-.blue  .micon { background: #E6F1FB; color: #185FA5; border-color: #B5D4F4; }
-.green .micon { background: #EAF3DE; color: #3B6D11; border-color: #C0DD97; }
-.amber .micon { background: #FAEEDA; color: #854F0B; border-color: #FAC775; }
-.purple .micon{ background: #EEEDFE; color: #534AB7; border-color: #CECBF6; }
-.coral .micon { background: #FAECE7; color: #993C1D; border-color: #F5C4B3; }
-
-/* ── 模块内容体 ── */
-.mbody {
-  border-top: 0.5px solid var(--el-border-color-light);
-}
-
-/* 展开动画 */
-.slide-enter-active,
-.slide-leave-active {
-  transition: max-height 0.25s ease, opacity 0.2s ease;
-  overflow: hidden;
-  max-height: 2000px;
-}
-.slide-enter-from,
-.slide-leave-to {
-  max-height: 0;
-  opacity: 0;
-}
-
-/* ── 每行能力 ── */
-.row {
-  display: grid;
-  grid-template-columns: 1fr 80px;
-  gap: 1rem;
-  padding: 0.75rem 1.25rem;
-  border-bottom: 0.5px solid var(--el-border-color-lighter);
-  align-items: start;
-  transition: background 0.1s;
-}
-.row:last-of-type {
-  border-bottom: none;
-}
-.row:hover {
-  background: var(--el-fill-color-light);
-}
-.rname {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-  margin-bottom: 3px;
-}
-.rdesc {
-  font-size: 13px;
-  color: var(--el-text-color-secondary);
-  line-height: 1.55;
-}
-.rtags {
-  display: flex;
-  gap: 5px;
-  flex-wrap: wrap;
-  margin-top: 6px;
-}
-.tag {
-  font-size: 11px;
-  padding: 2px 8px;
-  border-radius: 999px;
-  border: 0.5px solid var(--el-border-color);
-  color: var(--el-text-color-secondary);
-}
-.tag.new  { background: #E6F1FB; border-color: #B5D4F4; color: #0C447C; }
-.tag.beta { background: #FAEEDA; border-color: #FAC775; color: #633806; }
-
-.rdate {
-  text-align: right;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding-top: 2px;
-}
-.rdate-mon {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--el-text-color-secondary);
-}
-.rdate-yr {
-  font-size: 11px;
-  color: var(--el-text-color-placeholder);
-}
-
-/* ── 展开更多行 ── */
-.more-row {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 0.6rem 1.25rem;
-  font-size: 12px;
-  color: var(--el-text-color-placeholder);
-  background: var(--el-fill-color-light);
-  cursor: pointer;
-  border-top: 0.5px solid var(--el-border-color-lighter);
-  transition: color 0.1s;
-}
-.more-row:hover {
-  color: var(--el-text-color-secondary);
-}
-.more-row .ti {
-  font-size: 13px;
-}
-
-/* ── 响应式 ── */
-@media (max-width: 600px) {
-  .hero-title { font-size: 32px; }
-  .hero-stats { gap: 1.5rem; }
-  .stat-n { font-size: 22px; }
-}
-</style>