@templmf/temp-solf-lmf 0.0.55 → 0.0.57

package/guanwang/src/chat-sdk/features/artifact/ArtifactPanel.vue

@@ -1,963 +0,0 @@
-<template>
-  <transition name="panel-slide">
-    <div v-if="store.panelVisible.value" class="artifact-panel">
-
-      <!-- ① 文件 Tab 栏：只显示当前打开的文件 -->
-      <div class="panel-tabbar">
-        <div class="panel-tabbar__scroll">
-          <button v-if="activeArtifact" class="panel-filetab active">
-            <component :is="getIcon(activeArtifact.lang)" :size="12" :stroke-width="1.8" />
-            <span class="tab-name">{{ activeArtifact.fileName }}</span>
-            <span v-if="activeArtifact.streaming" class="tab-streaming-dot" />
-          </button>
-        </div>
-
-        <!-- 右侧操作区 -->
-        <div class="panel-tabbar__actions">
-          <!-- Vue SFC：固定分屏，使用 @vue/repl -->
-          <el-tooltip v-if="!isVueSfcReady" content="切换代码/预览" placement="bottom" :show-after="400">
-            <button
-              class="panel-icon-btn"
-              :class="{ active: viewMode === 'preview' }"
-              :disabled="!canPreview"
-              @click="toggleView"
-            >
-              <Eye :size="14" />
-            </button>
-          </el-tooltip>
-          <el-tooltip content="复制代码" placement="bottom" :show-after="400">
-            <button class="panel-icon-btn" @click="copyCode">
-              <Check v-if="copied" :size="14" color="#4ade80" />
-              <Copy  v-else        :size="14" />
-            </button>
-          </el-tooltip>
-          <el-tooltip content="下载文件" placement="bottom" :show-after="400">
-            <button class="panel-icon-btn" :disabled="!activeArtifact?.code" @click="downloadFile">
-              <Download :size="14" />
-            </button>
-          </el-tooltip>
-          <el-tooltip v-if="isMermaid && mermaidSvgHtml" content="放大预览" placement="bottom" :show-after="400">
-            <button class="panel-icon-btn" @click="mermaidZoomVisible = true">
-              <Maximize2 :size="14" />
-            </button>
-          </el-tooltip>
-          <el-tooltip content="收起面板" placement="bottom" :show-after="400">
-            <button class="panel-icon-btn" @click="store.close()">
-              <PanelRightClose :size="14" />
-            </button>
-          </el-tooltip>
-        </div>
-      </div>
-
-      <!-- ② 内容区 -->
-      <div class="panel-content">
-
-        <!-- Vue SFC：固定分屏（仅 streaming 完成后显示） -->
-        <template v-if="isVueSfcReady">
-          <div v-if="!replStore" class="panel-waiting" style="flex:1;justify-content:center;">
-            <span class="panel-waiting__dot" />
-            <span class="panel-waiting__dot" />
-            <span class="panel-waiting__dot" />
-          </div>
-          <Repl
-            v-else
-            :store="replStore"
-            :editor="CodeMirror"
-            layout="vertical"
-            :show-compile-output="false"
-            :show-import-map="false"
-            :show-ts-config="false"
-            :clear-console="false"
-            :show-error="false"
-            :auto-save="false"
-            :theme="isDarkTheme() ? 'dark' : 'light'"
-            class="panel-vue-repl"
-          />
-        </template>
-
-        <!-- 代码视图（vue streaming 中 或 非 vue） -->
-        <div v-else-if="viewMode === 'code'" class="panel-view panel-view--code">
-          <!-- 流式：有内容时显示进度条，无内容时显示呼吸占位 -->
-          <template v-if="activeArtifact?.streaming">
-            <div v-if="highlightedHtml" class="streaming-bar">
-              <span class="streaming-bar__dot" />
-              <span>正在生成 {{ activeArtifact.fileName }}...</span>
-            </div>
-            <div v-else class="panel-waiting">
-              <span class="panel-waiting__dot" />
-              <span class="panel-waiting__dot" />
-              <span class="panel-waiting__dot" />
-            </div>
-          </template>
-          <div class="shiki-wrap" v-html="highlightedHtml" @click="onCodeClick" />
-        </div>
-
-        <!-- 预览视图（非 vue） -->
-        <div v-else-if="viewMode === 'preview'" class="panel-view panel-view--preview">
-          <div v-if="isMermaid" ref="mermaidRef" class="preview-mermaid" />
-          <div v-else-if="isSvg" class="preview-svg" v-html="sanitizedSvg" />
-          <div v-else-if="isMath" class="preview-math" v-html="renderedMath" />
-          <iframe
-            v-else-if="isHtmlPreviewable"
-            :key="iframeKey"
-            ref="iframeRef"
-            sandbox="allow-scripts allow-modals allow-forms"
-            class="preview-iframe"
-          />
-          <div v-else-if="isMarkdown" class="preview-markdown" v-html="renderedMarkdown" @click="onMarkdownClick" />
-          <div v-else class="preview-unsupported">
-            <FileCode :size="32" style="opacity:0.3;margin-bottom:8px;" />
-            <p>该语言暂不支持预览</p>
-          </div>
-        </div>
-      </div>
-
-      <!-- ③ 底部状态栏 -->
-      <div class="panel-statusbar">
-        <span class="status-lang">{{ LANG_LABEL[activeArtifact?.lang] || activeArtifact?.lang }}</span>
-        <span class="status-sep">·</span>
-        <span v-if="activeArtifact?.streaming" class="status-streaming">
-          <span class="status-dot" />生成中
-        </span>
-        <template v-else>
-          <span class="status-lines">{{ activeArtifact?.lines }} 行</span>
-          <span class="status-sep">·</span>
-          <span class="status-cursor">行 {{ cursorLine }}，列 {{ cursorCol }}</span>
-        </template>
-        <span class="status-sep">·</span>
-        <span class="status-file">{{ activeArtifact?.fileName }}</span>
-      </div>
-    </div>
-  </transition>
-
-  <!-- mermaid 全屏放大 -->
-  <MermaidZoom
-    :visible="mermaidZoomVisible"
-    :svg-html="mermaidSvgHtml"
-    @close="mermaidZoomVisible = false"
-  />
-</template>
-
-<script setup>
-import { ref, computed, watch, nextTick, onUnmounted, defineAsyncComponent } from 'vue'
-import {
-  Eye, Copy, Check, PanelRightClose, Download,
-  FileCode, FileText, Globe, Layers, BarChart2,
-  Braces, Terminal, Maximize2,
-} from 'lucide-vue-next'
-import MermaidZoom from '../../features/mermaid/MermaidZoom.vue'
-import DOMPurify from 'dompurify'
-import { useArtifactStore, LANG_LABEL } from './useArtifactStore.js'
-import { renderMarkdown, handleCodeAction, sanitizeMermaidCode } from '../../features/markdown/useMarkdown.js'
-import { useChatTracker } from '../../../tracker/useChatTracker.js'
-
-// 内网 Vue ESM 资源路径（与 CodePreview.vue 保持一致）
-// @vue/repl 内部只通过 import map 消费这两个包：
-//   vue              → 运行时（用于预览 iframe 内的组件渲染）
-//   vue/server-renderer → SSR 渲染器（编译输出检查用）
-// compiler-sfc 由 @vue/repl 自身打包的 defaultCompiler 处理，不走 import map
-const VUE_ASSETS_BASE = '/vue-repl-assets'
-const INTERNAL_IMPORT_MAP = {
-  imports: {
-    'vue':                `${VUE_ASSETS_BASE}/vue.esm-browser.js`,
-    'vue/server-renderer':`${VUE_ASSETS_BASE}/server-renderer.esm-browser.js`,
-  },
-}
-
-// JSX/TSX iframe 预览用的本地 React 运行时
-// 文件由 vite-plugin-static-copy 在构建时从 node_modules 复制，
-// 开发时需手动执行：
-//   mkdir -p public/react-runtime
-//   cp node_modules/react/umd/react.production.min.js public/react-runtime/react.min.js
-//   cp node_modules/react-dom/umd/react-dom.production.min.js public/react-runtime/react-dom.min.js
-//   cp node_modules/@babel/standalone/babel.min.js public/react-runtime/babel.min.js
-const REACT_RUNTIME_BASE = '/react-runtime'
-
-// @vue/repl 按需加载
-const Repl       = defineAsyncComponent(() => import('@vue/repl').then(m => m.Repl))
-const CodeMirror = defineAsyncComponent(() => import('@vue/repl/codemirror-editor'))
-
-const store          = useArtifactStore()
-const activeArtifact = computed(() => store.activeArtifact.value)
-const tracker        = useChatTracker()
-
-// ── 视图模式 ──────────────────────────────────────────────────────
-const viewMode          = ref('code')  // 'code' | 'preview'
-const mermaidZoomVisible = ref(false)
-const mermaidSvgHtml     = ref('')
-const copied    = ref(false)
-const iframeKey = ref(0)
-const mermaidRef = ref(null)
-const iframeRef  = ref(null)
-
-// ── 语言属性 ──────────────────────────────────────────────────────
-const lang = computed(() => activeArtifact.value?.lang || 'text')
-
-const isVueSfc         = computed(() => lang.value === 'vue')
-const isMermaid        = computed(() => lang.value === 'mermaid')
-const isSvg            = computed(() => lang.value === 'svg')
-const isMath           = computed(() => lang.value === 'math' || lang.value === 'latex')
-const isHtmlPreviewable = computed(() =>
-  ['html','javascript','js','jsx','tsx','css'].includes(lang.value)
-)
-const isMarkdown = computed(() => lang.value === 'markdown' || lang.value === 'md')
-const canPreview = computed(() =>
-  isMermaid.value || isSvg.value || isMath.value || isHtmlPreviewable.value || isMarkdown.value
-)
-
-// ── Vue SFC Repl ──────────────────────────────────────────────────
-// streaming 期间走普通 shiki 代码视图，完成后才初始化 repl 并切换到分屏
-const replStore      = ref(null)
-const replReady      = ref(false)   // repl 已初始化且代码已写入
-let _replStore       = null
-
-// 仅当 vue + streaming 已完成时才展示分屏
-const isVueSfcReady  = computed(() => isVueSfc.value && replReady.value)
-
-async function initReplStore(code) {
-  try {
-    const { useStore } = await import('@vue/repl')
-    if (!_replStore) {
-      _replStore = useStore({ builtinImportMap: ref(INTERNAL_IMPORT_MAP) })
-      replStore.value = _replStore
-    }
-    const mainFile = _replStore.mainFile?.value ?? _replStore.mainFile ?? 'src/App.vue'
-    if (_replStore.files?.[mainFile]) {
-      _replStore.files[mainFile].code = code
-    } else {
-      await _replStore.setFiles?.({ [mainFile]: code }, mainFile)
-    }
-    replReady.value = true
-  } catch (e) {
-    console.warn('[ArtifactPanel] @vue/repl 加载失败', e)
-    replStore.value = null
-    replReady.value = false
-  }
-}
-
-// ── 预览内容（shallowRef 驱动，避免 shallowRef map 内部属性追踪失效）────
-// sanitizedSvg / renderedMath / renderedMarkdown 均不能用 computed 自动追踪
-// 因为 activeArtifact.value.code 是普通对象属性，不是响应式 ref，computed 感知不到变化
-const sanitizedSvg     = ref('')
-const renderedMath     = ref('')
-const renderedMarkdown = ref('')
-
-async function computePreviewContent(code, l) {
-  const curLang = l || lang.value
-
-  if (curLang === 'svg') {
-    sanitizedSvg.value = code
-      ? DOMPurify.sanitize(code, { USE_PROFILES: { svg: true } })
-      : ''
-  } else {
-    sanitizedSvg.value = ''
-  }
-
-  if (curLang === 'math' || curLang === 'latex') {
-    try {
-      renderedMath.value = code
-        ? (window.katex?.renderToString(code, { displayMode: true, throwOnError: false }) || code)
-        : ''
-    } catch { renderedMath.value = code || '' }
-  } else {
-    renderedMath.value = ''
-  }
-
-  if (curLang === 'markdown' || curLang === 'md') {
-    if (!code) { renderedMarkdown.value = ''; return }
-    try {
-      // 使用 renderMarkdown（内含 safeMarkdownParse + innerDepth 状态机）
-      // 能正确处理 markdown 内嵌套多个代码块的情况，避免 marked 裸解析截断
-      renderedMarkdown.value = renderMarkdown(code, { noPreview: true })
-    } catch(e) {
-      console.warn('[ArtifactPanel] markdown 预览失败', e)
-      renderedMarkdown.value = '<p>预览失败</p>'
-    }
-  } else {
-    renderedMarkdown.value = ''
-  }
-}
-
-// ── 语言图标 ──────────────────────────────────────────────────────
-const ICON_MAP = {
-  vue:Layers, html:Globe, jsx:Layers, tsx:Layers,
-  javascript:FileCode, js:FileCode, typescript:FileCode, ts:FileCode,
-  python:FileCode, go:FileCode, rust:FileCode, java:FileCode,
-  css:Braces, scss:Braces, bash:Terminal, sh:Terminal,
-  mermaid:BarChart2, svg:Globe, math:FileText, latex:FileText, markdown:FileText,
-}
-function getIcon(l) { return ICON_MAP[l] || FileCode }
-
-// ── Shiki 高亮 ────────────────────────────────────────────────────
-let _hl = null
-const highlightedHtml = ref('')
-
-// 取消令牌：每次新的 highlight 调用时递增，旧的异步结果发现令牌不匹配则丢弃
-// 解决流式阶段多次异步调用产生的竞态问题（后发先至导致内容定格在中间快照）
-let _highlightToken = 0
-
-async function ensureShiki() {
-  if (_hl) return _hl
-  const { createHighlighter } = await import('shiki')
-  _hl = await createHighlighter({
-    themes: ['one-dark-pro','github-light'],
-    langs:  ['javascript','typescript','vue','html','css','scss','json','bash','shell',
-             'python','java','go','rust','sql','yaml','toml','xml','jsx','tsx','mermaid',
-             'markdown','kotlin','swift','graphql'],
-  })
-  return _hl
-}
-
-function isDarkTheme() {
-  return document.documentElement.getAttribute('data-theme') !== 'light'
-}
-
-function fallbackHtml(code) {
-  const lines = code.split('\n')
-  const rows = lines.map((line, i) =>
-    `<tr><td class="ln">${i + 1}</td><td class="lc">${line.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')}</td></tr>`
-  ).join('')
-  return `<table class="fallback-table"><tbody>${rows}</tbody></table>`
-}
-
-async function highlight(code, l) {
-  if (!code) { highlightedHtml.value = ''; return }
-  // 每次调用拿到当前令牌，异步完成后校验，不匹配则丢弃（说明有更新的调用在后面）
-  const token = ++_highlightToken
-  try {
-    const hl   = await ensureShiki()
-    if (token !== _highlightToken) return   // 已被更新的调用取代，丢弃
-    const safe = hl.getLoadedLanguages().includes(l) ? l : null
-    if (!safe) {
-      highlightedHtml.value = fallbackHtml(code)
-      return
-    }
-    const html = hl.codeToHtml(code, {
-      lang: safe,
-      theme: isDarkTheme() ? 'one-dark-pro' : 'github-light',
-    })
-    if (token !== _highlightToken) return   // 再次校验，防止 codeToHtml 期间被抢占
-    highlightedHtml.value = html
-  } catch {
-    if (token !== _highlightToken) return
-    highlightedHtml.value = fallbackHtml(code)
-  }
-}
-
-const PREVIEW_BY_DEFAULT = new Set(['markdown', 'md', 'mermaid', 'svg', 'math', 'latex'])
-
-// ── debounce highlight（流式期间限频，完成后立即刷新）────────────
-let _debounceTimer = null
-function scheduleHighlight(code, l) {
-  if (_debounceTimer) clearTimeout(_debounceTimer)
-  _debounceTimer = setTimeout(() => {
-    _debounceTimer = null
-    highlight(code, l)
-  }, 80)
-}
-
-// ── 监听 artifact 内容变化（流式实时更新代码视图）────────────────
-watch(
-  () => store.activeCode.value,
-  (code) => {
-    console.log('code========>', code)
-    const l = activeArtifact.value?.lang
-    // Vue SFC streaming 期间：走普通 shiki 高亮，不初始化 repl（避免每 token 编译）
-    // Vue SFC 完成后：由 streaming watcher 统一触发 initReplStore
-    if (code && l) scheduleHighlight(code, l)
-    if (!isVueSfc.value) {
-      // mermaid/svg/math 等：streaming 期间保持代码视图，避免每个 token 都触发重渲染闪屏
-      // streaming 结束后由 streaming watcher 统一切换到预览
-      const isStreaming = activeArtifact.value?.streaming
-      if (PREVIEW_BY_DEFAULT.has(l) && isStreaming) {
-        viewMode.value = 'code'
-      } else if (PREVIEW_BY_DEFAULT.has(l) && !isStreaming) {
-        viewMode.value = 'preview'
-        computePreviewContent(code, l)
-        nextTick(() => renderPreview())
-      } else {
-        computePreviewContent(code, l)
-        if (viewMode.value === 'preview') {
-          nextTick(() => renderPreview())
-        }
-      }
-    }
-  },
-  { immediate: true }
-)
-
-// artifact 切换时重置状态
-watch(() => activeArtifact.value?.id, (newId, oldId) => {
-  if (newId !== oldId) {
-    copied.value = false
-    highlightedHtml.value = ''
-    replReady.value = false
-    if (_debounceTimer) { clearTimeout(_debounceTimer); _debounceTimer = null }
-    const art = activeArtifact.value
-    if (!art) return
-    if (isVueSfc.value) {
-      // 切换到已完成的 vue artifact：直接初始化 repl
-      if (art.code && !art.streaming) {
-        initReplStore(art.code)
-      } else {
-        // 还在 streaming：先高亮展示代码片段
-        highlight(art.code || '', 'vue')
-      }
-      return
-    }
-    // mermaid 等 streaming 中先显示代码，结束后再切预览
-    viewMode.value = (PREVIEW_BY_DEFAULT.has(art.lang) && !art.streaming) ? 'preview' : 'code'
-    if (art.code && art.lang) {
-      highlight(art.code, art.lang)
-      computePreviewContent(art.code, art.lang)
-      if (viewMode.value === 'preview') nextTick(() => renderPreview())
-    } else {
-      computePreviewContent('', art.lang)
-    }
-  }
-})
-
-// streaming 结束：强制用完整代码刷新；vue sfc 此时才初始化 repl
-watch(
-  () => activeArtifact.value?.streaming,
-  (streaming) => {
-    if (streaming === false && activeArtifact.value?.code) {
-      if (_debounceTimer) { clearTimeout(_debounceTimer); _debounceTimer = null }
-      const { code, lang: l } = activeArtifact.value
-      if (isVueSfc.value) {
-        // 代码完整了，现在才初始化 repl，切换到分屏
-        initReplStore(code)
-      } else {
-        highlight(code, l)
-        // mermaid/svg/math 等：streaming 结束后才切换到预览视图并渲染
-        if (PREVIEW_BY_DEFAULT.has(l)) {
-          viewMode.value = 'preview'
-          computePreviewContent(code, l)
-          nextTick(() => renderPreview())
-        }
-      }
-    }
-  }
-)
-
-// 主题切换重新高亮（onUnmounted 时断开，避免内存泄漏）
-const themeObs = new MutationObserver(() => {
-  if (activeArtifact.value && !isVueSfc.value) {
-    highlight(activeArtifact.value.code, activeArtifact.value.lang)
-    computePreviewContent(activeArtifact.value.code, activeArtifact.value.lang)
-  }
-})
-themeObs.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })
-onUnmounted(() => {
-  themeObs.disconnect()
-  if (_debounceTimer) clearTimeout(_debounceTimer)
-})
-
-// ── 预览渲染 ──────────────────────────────────────────────────────
-async function renderPreview() {
-  const art = activeArtifact.value
-  if (!art) return
-
-  if (isMermaid.value && mermaidRef.value) {
-    const { default: mermaid } = await import('mermaid')
-    mermaid.initialize({
-      startOnLoad: false,
-      suppressErrorRendering: true,
-      theme: isDarkTheme() ? 'dark' : 'default',
-      fontFamily: "Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, 微软雅黑, Arial, sans-serif",
-    })
-    const id = 'mer-' + Date.now()
-    try {
-      const { svg } = await mermaid.render(id, sanitizeMermaidCode(art.code))
-      // 检查是否返回了错误 SVG
-      const tmp = document.createElement('div'); tmp.innerHTML = svg
-      const isErr = tmp.querySelector('svg')?.getAttribute('aria-roledescription') === 'error'
-      if (isErr) throw new Error('mermaid error svg')
-      if (mermaidRef.value) mermaidRef.value.innerHTML = svg
-      // 存储 SVG 供放大预览使用
-      mermaidSvgHtml.value = svg
-    } catch (e) {
-      // 静默降级：不暴露 mermaid 内部报错，显示原始代码
-      console.warn('[mermaid] render failed:', e.message)
-      if (mermaidRef.value) {
-        mermaidRef.value.innerHTML = `<pre style="margin:0;padding:16px;font-size:12px;font-family:monospace;white-space:pre-wrap;color:var(--text-secondary);">${art.code.replace(/</g,'&lt;')}</pre>`
-      }
-      mermaidSvgHtml.value = ''
-    }
-    return
-  }
-
-  if (isHtmlPreviewable.value && iframeRef.value) {
-    const doc  = buildDoc(art.code, art.lang)
-    const blob = new Blob([doc], { type: 'text/html' })
-    const url  = URL.createObjectURL(blob)
-    iframeRef.value.src = url
-    setTimeout(() => URL.revokeObjectURL(url), 8000)
-  }
-}
-
-function buildDoc(code, l) {
-  if (l === 'html') return code
-  if (l === 'css')
-    return `<!DOCTYPE html><html><head><style>body{font-family:sans-serif;padding:20px;background:#fff;color:#333}${code}</style></head><body><div class="demo">示例内容</div></body></html>`
-  if (l === 'javascript' || l === 'js')
-    return `<!DOCTYPE html><html><head><meta charset="utf-8"><style>body{font-family:monospace;padding:16px;background:#1a1a2e;color:#e2e8f0;}</style></head><body><script type="module">\n${code}\n<\/script></body></html>`
-  if (l === 'jsx' || l === 'tsx')
-    return `<!DOCTYPE html><html><head><meta charset="utf-8">
-<script crossorigin src="${REACT_RUNTIME_BASE}/react.min.js"><\/script>
-<script crossorigin src="${REACT_RUNTIME_BASE}/react-dom.min.js"><\/script>
-<script src="${REACT_RUNTIME_BASE}/babel.min.js"><\/script>
-<style>body{font-family:sans-serif;padding:16px;margin:0;}</style>
-</head><body><div id="root"></div>
-<script type="text/babel">
-${code}
-const el=document.getElementById('root');
-if(typeof App!=='undefined')ReactDOM.createRoot(el).render(React.createElement(App))
-<\/script></body></html>`
-  return `<!DOCTYPE html><html><body><pre style="padding:16px;font-family:monospace;">${code.replace(/</g,'&lt;')}</pre></body></html>`
-}
-
-function toggleView() {
-  if (!canPreview.value) return
-  if (viewMode.value === 'code') {
-    viewMode.value = 'preview'
-    nextTick(() => renderPreview())
-  } else {
-    viewMode.value = 'code'
-  }
-}
-
-function copyCode() {
-  navigator.clipboard?.writeText(activeArtifact.value?.code || '').catch(() => {})
-  copied.value = true
-  setTimeout(() => { copied.value = false }, 2000)
-  // 埋点：采纳 - 复制 Artifact
-  tracker.contentCopy({
-    source: 'artifact_panel',
-    lang:   activeArtifact.value?.lang || '',
-  })
-}
-
-function downloadFile() {
-  const art = activeArtifact.value
-  if (!art?.code) return
-  const blob = new Blob([art.code], { type: 'text/plain;charset=utf-8' })
-  const url  = URL.createObjectURL(blob)
-  const a    = document.createElement('a')
-  a.href     = url
-  a.download = art.fileName || `artifact.${art.lang || 'txt'}`
-  document.body.appendChild(a)
-  a.click()
-  document.body.removeChild(a)
-  setTimeout(() => URL.revokeObjectURL(url), 3000)
-  // 埋点：采纳 - 下载文件
-  tracker.fileDownload({ lang: art.lang || '' })
-}
-
-// ── markdown 预览区代码块点击委托（复制按钮）────────────────────
-function onMarkdownClick(e) {
-  // 复用 useMarkdown 的事件委托，处理 [data-action="copy"] 点击
-  // 预览按钮（data-action="preview"）在 markdown artifact 中不启用，传 null 即可
-  handleCodeAction(e, null)
-}
-
-// ── 光标位置追踪（点击代码区域时更新行列号）────────────────────
-const cursorLine = ref(1)
-const cursorCol  = ref(1)
-
-function onCodeClick(e) {
-  // 从点击的 .line 元素找到行号
-  const lineEl = e.target.closest('.line')
-  if (!lineEl) return
-  const pre = lineEl.closest('pre')
-  if (!pre) return
-  const lines = [...pre.querySelectorAll('.line')]
-  const lineIdx = lines.indexOf(lineEl)
-  if (lineIdx === -1) return
-  cursorLine.value = lineIdx + 1
-  // 列号：根据点击位置粗略估算（基于字符宽度）
-  cursorCol.value = 1
-}
-</script>
-
-<style scoped>
-/* ── 面板容器 ── */
-.artifact-panel {
-  width: 46%;
-  min-width: 360px;
-  max-width: 640px;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  border-left: 1px solid var(--border-subtle);
-  background: var(--bg-primary);
-  transition: background 0.3s;
-  overflow: hidden;
-}
-
-/* 滑入动画 */
-.panel-slide-enter-active { transition: width 0.22s cubic-bezier(0.4,0,0.2,1), opacity 0.18s; }
-.panel-slide-leave-active { transition: width 0.18s cubic-bezier(0.4,0,1,1), opacity 0.12s; }
-.panel-slide-enter-from, .panel-slide-leave-to { width: 0 !important; opacity: 0; overflow: hidden; }
-
-/* ── Tab 栏（对标 Claude 顶部文件切换条）── */
-.panel-tabbar {
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid var(--border-subtle);
-  background: var(--bg-secondary);
-  flex-shrink: 0;
-  min-height: 40px;
-  overflow: hidden;
-}
-.panel-tabbar__scroll {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-.panel-tabbar__scroll::-webkit-scrollbar { display: none; }
-
-.panel-filetab {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  padding: 0 14px;
-  height: 40px;
-  font-size: 12px;
-  font-family: 'Cascadia Code', 'Consolas', monospace;
-  color: var(--text-muted);
-  background: transparent;
-  border: none;
-  border-bottom: 2px solid transparent;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: color 0.12s, border-color 0.12s, background 0.12s;
-  flex-shrink: 0;
-}
-.panel-filetab:hover {
-  color: var(--text-secondary);
-  background: var(--border-subtle);
-}
-.panel-filetab.active {
-  color: var(--text-primary);
-  border-bottom-color: var(--brand-500);
-  background: var(--bg-primary);
-}
-.tab-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
-.tab-streaming-dot {
-  width: 5px; height: 5px; border-radius: 50%;
-  background: #4ade80; flex-shrink: 0;
-  animation: pulseSlow 1.2s ease infinite;
-}
-
-.panel-tabbar__actions {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 0 8px;
-  border-left: 1px solid var(--border-subtle);
-  flex-shrink: 0;
-}
-.panel-icon-btn {
-  width: 28px; height: 28px; border-radius: 5px;
-  border: none; background: transparent;
-  color: var(--text-muted);
-  display: flex; align-items: center; justify-content: center;
-  cursor: pointer; transition: all 0.12s;
-}
-.panel-icon-btn:hover:not(:disabled) {
-  background: var(--border-subtle);
-  color: var(--text-primary);
-}
-.panel-icon-btn.active { color: var(--brand-400); }
-.panel-icon-btn:disabled { opacity: 0.3; cursor: not-allowed; }
-
-/* ── 内容区 ── */
-.panel-content {
-  flex: 1;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
-.panel-view { flex: 1; overflow: auto; }
-
-/* 代码视图 */
-.panel-view--code { background: var(--bg-primary); }
-
-.streaming-bar {
-  display: flex; align-items: center; gap: 7px;
-  padding: 7px 16px;
-  background: rgba(26,111,196,0.06);
-  border-bottom: 1px solid rgba(26,111,196,0.15);
-  font-size: 12px; font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-  color: var(--brand-400);
-  flex-shrink: 0;
-}
-.streaming-bar__dot {
-  width: 6px; height: 6px; border-radius: 50%;
-  background: #4ade80; animation: pulseSlow 1.2s ease infinite;
-}
-
-/* 面板等待中（内容尚未到达时的呼吸动画）*/
-.panel-waiting {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  height: 120px;
-  flex-shrink: 0;
-}
-.panel-waiting__dot {
-  width: 8px; height: 8px; border-radius: 50%;
-  background: var(--brand-400);
-  animation: ai-bounce 1.2s ease-in-out infinite;
-  opacity: 0.5;
-}
-.panel-waiting__dot:nth-child(1) { animation-delay: 0s; }
-.panel-waiting__dot:nth-child(2) { animation-delay: 0.2s; }
-.panel-waiting__dot:nth-child(3) { animation-delay: 0.4s; }
-
-.shiki-wrap {
-  height: 100%;
-  overflow: auto;
-}
-
-/* ── Shiki 输出：紧凑风格 + 行号 ── */
-:deep(.shiki-wrap .shiki) {
-  min-height: 100%;
-  margin: 0 !important;
-  border-radius: 0 !important;
-  font-size: 12px !important;
-  line-height: 1.5 !important;
-  font-family: 'Cascadia Code', 'Consolas', monospace !important;
-  padding: 0 !important;
-  tab-size: 2;
-}
-:deep(.shiki-wrap pre) {
-  min-height: 100%;
-  margin: 0 !important;
-  padding: 0 !important;
-  counter-reset: line;
-}
-:deep(.shiki-wrap .shiki code) {
-  display: block;
-  padding: 14px 0;
-  font-family: 'Cascadia Code', 'Consolas', monospace !important;
-  /* 消灭 span.line 之间换行符产生的匿名行盒（ghost whitespace）
-     换行符文本节点继承 line-height 后会撑出额外行高，font-size:0 让其高度归零 */
-  font-size: 0;
-}
-/* 每行：data-line 注入后用伪元素显示行号 */
-:deep(.shiki-wrap .shiki code .line) {
-  display: block;
-  padding: 0 16px 0 0;
-  line-height: 20px;
-  /* 在 code font-size:0 的环境下，.line 必须显式恢复字体大小 */
-  font-size: 12px;
-}
-:deep(.shiki-wrap .shiki code .line::before) {
-  counter-increment: line;
-  content: counter(line);
-  display: inline-block;
-  width: 2.8em;
-  padding-right: 1em;
-  margin-right: 0.8em;
-  text-align: right;
-  color: var(--text-faint);
-  border-right: 1px solid var(--border-subtle);
-  user-select: none;
-  font-size: 10px;
-  line-height: 20px;
-  vertical-align: top;
-}
-
-/* ── Fallback 行号表格 ── */
-:deep(.fallback-table) {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 11.5px;
-  line-height: 1.55;
-  font-family: 'Cascadia Code', 'Consolas', monospace;
-  padding: 14px 0;
-}
-:deep(.fallback-table .ln) {
-  width: 2.8em;
-  padding: 0 0.8em 0 0;
-  text-align: right;
-  color: var(--text-faint);
-  border-right: 1px solid var(--border-subtle);
-  user-select: none;
-  font-size: 10px;
-  vertical-align: top;
-  white-space: nowrap;
-}
-:deep(.fallback-table .lc) {
-  padding: 0 16px 0 0.8em;
-  color: var(--code-color);
-  white-space: pre;
-  word-break: break-all;
-}
-
-/* 预览视图 */
-.panel-view--preview { background: #ffffff; }
-.preview-iframe { width: 100%; height: 100%; border: none; display: block; }
-.preview-mermaid {
-  padding: 32px;
-  display: flex; justify-content: center; align-items: flex-start;
-  background: var(--bg-secondary);
-  min-height: 100%;
-}
-.preview-svg {
-  padding: 32px;
-  display: flex; justify-content: center; align-items: center;
-  min-height: 100%;
-  background: var(--bg-secondary);
-}
-:deep(.preview-svg svg) { max-width: 100%; height: auto; }
-.preview-math {
-  padding: 40px;
-  display: flex; justify-content: center; align-items: center;
-  background: var(--bg-secondary); min-height: 100%;
-}
-.preview-markdown {
-  padding: 28px 36px;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-  font-size: 14px;
-  line-height: 1.75;
-  overflow: auto;
-  min-height: 100%;
-}
-:deep(.preview-markdown h1) { font-size: 1.5em; font-weight: 700; margin: 0 0 12px; font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; border-bottom: 1px solid var(--border-subtle); padding-bottom: 8px; }
-:deep(.preview-markdown h2) { font-size: 1.25em; font-weight: 700; margin: 20px 0 8px; font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; }
-:deep(.preview-markdown h3) { font-size: 1.1em; font-weight: 600; margin: 16px 0 6px; }
-:deep(.preview-markdown h4),:deep(.preview-markdown h5),:deep(.preview-markdown h6) { font-size: 1em; font-weight: 600; margin: 12px 0 4px; }
-:deep(.preview-markdown p) { margin: 0 0 10px; }
-:deep(.preview-markdown strong) { font-weight: 600; }
-:deep(.preview-markdown em) { font-style: italic; }
-:deep(.preview-markdown code) { font-family: 'Cascadia Code', 'Consolas', monospace; font-size: 12px; background: var(--bg-tertiary); padding: 1px 5px; border-radius: 3px; }
-:deep(.preview-markdown pre) { margin: 10px 0; border-radius: 8px; overflow: hidden; }
-:deep(.preview-markdown pre code) { background: none; padding: 0; border-radius: 0; font-size: 13px; }
-/* Shiki 输出在 markdown 预览里的适配 */
-:deep(.preview-markdown .shiki) { margin: 10px 0 !important; border-radius: 8px !important; font-size: 13px !important; line-height: 1.6 !important; overflow-x: auto; padding: 14px 16px !important; }
-:deep(.preview-markdown .shiki code) { font-family: 'Cascadia Code', 'Consolas', monospace !important; font-size: 0; }
-:deep(.preview-markdown .shiki code .line) { display: block; font-size: 13px; line-height: 20px; }
-/* plain fallback */
-:deep(.preview-markdown .md-code-block) { margin: 10px 0; padding: 14px 16px; border-radius: 8px; background: var(--bg-tertiary); overflow-x: auto; }
-:deep(.preview-markdown .md-code-block code) { background: none; padding: 0; font-size: 13px; line-height: 1.6; color: var(--code-color); white-space: pre; }
-:deep(.preview-markdown blockquote) { border-left: 3px solid var(--brand-500); margin: 10px 0; padding: 6px 14px; color: var(--text-secondary); background: var(--bg-secondary); border-radius: 0 6px 6px 0; }
-:deep(.preview-markdown hr) { border: none; border-top: 1px solid var(--border-subtle); margin: 16px 0; }
-:deep(.preview-markdown li) { margin: 3px 0; }
-:deep(.preview-markdown a) { color: var(--brand-400); text-decoration: underline; }
-/* renderMarkdown 输出的代码块（.code-wrapper）在 preview-markdown 区域的样式 */
-:deep(.preview-markdown .code-wrapper) {
-  margin: 10px 0;
-  border-radius: 10px;
-  border: 1px solid var(--border-subtle);
-  overflow: hidden;
-  background: var(--bg-tertiary);
-}
-:deep(.preview-markdown .cb-actions) {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 6px 12px;
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border-subtle);
-}
-:deep(.preview-markdown .cb-lang) {
-  font-family: 'Cascadia Code', 'Consolas', monospace;
-  font-size: 11px;
-  color: var(--brand-400);
-  letter-spacing: 0.04em;
-}
-:deep(.preview-markdown .cb-btn) {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 3px 8px;
-  font-size: 11px;
-  font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-  border: 1px solid var(--border-default);
-  border-radius: 5px;
-  background: transparent;
-  color: var(--text-muted);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-:deep(.preview-markdown .cb-btn:hover) {
-  border-color: rgba(26,111,196,0.4);
-  color: var(--brand-400);
-  background: var(--tag-bg);
-}
-:deep(.preview-markdown .shiki) {
-  margin: 0 !important;
-  border-radius: 0 0 8px 8px !important;
-  font-size: 13px !important;
-  line-height: 1.6 !important;
-  overflow-x: auto !important;
-  padding: 14px 16px !important;
-}
-:deep(.preview-markdown .shiki code) {
-  font-family: 'Cascadia Code', 'Consolas', monospace !important;
-  font-size: 0;
-}
-:deep(.preview-markdown .shiki code .line) {
-  display: block;
-  font-size: 13px;
-  line-height: 20px;
-}
-.preview-unsupported {
-  display: flex; flex-direction: column;
-  align-items: center; justify-content: center;
-  height: 100%;
-  color: var(--text-muted);
-  font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-  font-size: 14px;
-}
-.preview-error { color: #f87171; padding: 16px; font-size: 13px; font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; }
-
-/* ── 状态栏 ── */
-.panel-statusbar {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 5px 14px;
-  border-top: 1px solid var(--border-subtle);
-  background: var(--bg-secondary);
-  flex-shrink: 0;
-  font-size: 11px;
-  font-family: 'Cascadia Code', 'Consolas', monospace;
-  color: var(--text-muted);
-  overflow: hidden;
-}
-.status-lang { color: var(--brand-400); }
-.status-sep  { opacity: 0.4; }
-.status-file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.status-streaming {
-  display: inline-flex; align-items: center; gap: 4px;
-  color: #4ade80;
-}
-.status-dot {
-  width: 5px; height: 5px; border-radius: 50%;
-  background: #4ade80; animation: pulseSlow 1.2s ease infinite;
-}
-.status-cursor { color: var(--text-muted); white-space: nowrap; }
-
-/* ── Vue SFC 分屏（@vue/repl）── */
-.panel-vue-repl {
-  flex: 1;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-:deep(.vue-repl) {
-  border: none !important;
-  border-radius: 0 !important;
-  height: 100% !important;
-}
-</style>