@templmf/temp-solf-lmf 0.0.55 → 0.0.57

package/guanwang/src/chat-sdk/features/codepreview/CodePreview.vue

@@ -1,523 +0,0 @@
-<template>
-  <el-dialog
-    v-model="show"
-    :title="`代码预览 · ${langLabel}`"
-    width="960px"
-    top="4vh"
-    align-center
-    destroy-on-close
-    @closed="emit('close')"
-  >
-    <!-- 工具栏 -->
-    <div class="preview-toolbar">
-      <div class="preview-tabs">
-        <button
-          v-for="tab in availableTabs"
-          :key="tab.value"
-          class="preview-tab"
-          :class="{ active: activeTab === tab.value }"
-          @click="activeTab = tab.value"
-        >{{ tab.label }}</button>
-      </div>
-      <div style="display:flex;gap:8px;align-items:center;">
-        <el-tooltip v-if="!isVueSfc" content="刷新预览" placement="top">
-          <el-button text circle size="small" @click="refreshIframe">
-            <RefreshCw :size="14" />
-          </el-button>
-        </el-tooltip>
-        <el-tooltip content="复制代码" placement="top">
-          <el-button text circle size="small" @click="copyCode">
-            <Check v-if="copied" :size="14" color="#4ade80" />
-            <Copy  v-else        :size="14" />
-          </el-button>
-        </el-tooltip>
-      </div>
-    </div>
-
-    <!-- 内容区 -->
-    <div class="preview-body">
-
-      <!-- ══ Vue SFC：完全交给 <Repl>，tab 切换控制其布局 ══ -->
-      <template v-if="isVueSfc">
-        <div v-if="!replStore" class="vue-repl-loading">
-          <span>正在加载 Vue Playground...</span>
-        </div>
-        <Repl
-          v-else
-          :store="replStore"
-          :editor="CodeMirror"
-          :layout="replLayout"
-          :show-compile-output="false"
-          :show-import-map="false"
-          :show-ts-config="false"
-          :clear-console="false"
-          :editorOptions="{
-            showErrorText: false,
-            autoSaveText: false
-          }"
-          :theme="isDark ? 'dark' : 'light'"
-          class="vue-repl-full"
-        />
-      </template>
-
-      <!-- ══ 非 Vue SFC：自己的代码 + 预览双面板 ══ -->
-      <template v-else>
-        <!-- 代码面板 -->
-        <div
-          v-show="activeTab === 'code' || activeTab === 'split'"
-          class="preview-pane code-pane"
-        >
-          <div class="shiki-scroll" @click="onCodeClick">
-            <div ref="codeContainerRef" class="shiki-container" v-html="highlightedCode" />
-          </div>
-          <div class="code-statusbar">
-            <span class="code-statusbar__lang">{{ langLabel }}</span>
-            <span class="code-statusbar__sep">·</span>
-            <span>{{ lineCount }} 行</span>
-            <span class="code-statusbar__sep">·</span>
-            <span>行 {{ cursorLine }}，列 {{ cursorCol }}</span>
-          </div>
-        </div>
-
-        <!-- 预览面板 -->
-        <div
-          v-show="activeTab === 'preview' || activeTab === 'split'"
-          class="preview-pane render-pane"
-        >
-          <div v-if="isSvg" class="svg-preview" v-html="sanitizedSvg" />
-          <iframe
-            v-else
-            :key="iframeKey"
-            ref="iframeRef"
-            sandbox="allow-scripts allow-modals allow-forms"
-            style="width:100%;height:100%;border:none;background:#fff;"
-          />
-        </div>
-      </template>
-
-    </div>
-  </el-dialog>
-</template>
-
-<script setup>
-import { ref, computed, watch, nextTick, onMounted, defineAsyncComponent } from 'vue'
-import { RefreshCw, Copy, Check } from 'lucide-vue-next'
-import DOMPurify from 'dompurify'
-import { marked } from 'marked'
-
-// 样式单独顶层加载
-import('@vue/repl/style.css').catch(() => {})
-import('@vue/repl/codemirror-editor').catch(() => {})  // 预加载 codemirror CSS
-
-// ─────────────────────────────────────────────────────────────────
-// 内网 Vue ESM 资源基础路径
-// ⚠️  将下面的路径替换为你们内网实际托管地址，例如：
-//     '/static/vue-assets'  或  'http://cdn.internal/vue'
-// 需要托管的文件：执行项目根目录的 scripts/copy-vue-assets.sh 复制到该目录
-// ─────────────────────────────────────────────────────────────────
-const VUE_ASSETS_BASE = '/vue-repl-assets'
-
-// JSX/TSX iframe 预览用的本地 React 运行时（同 ArtifactPanel.vue）
-// 文件由 vite-plugin-static-copy 构建时自动复制，开发时需手动执行：
-//   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'
-
-const INTERNAL_IMPORT_MAP = {
-  imports: {
-    'vue':                `${VUE_ASSETS_BASE}/vue.esm-browser.js`,
-    'vue/server-renderer':`${VUE_ASSETS_BASE}/server-renderer.esm-browser.js`,
-  },
-}
-
-// @vue/repl 按需异步加载（新版 ≥4.x 需要显式传 editor prop）
-const Repl = defineAsyncComponent(() => import('@vue/repl').then(m => m.Repl))
-const CodeMirror = defineAsyncComponent(() =>
-  import('@vue/repl/codemirror-editor').then(m => m.default)
-)
-
-const props = defineProps({
-  visible: { type: Boolean, default: false },
-  lang:    { type: String,  default: 'html' },
-  code:    { type: String,  default: '' },
-})
-const emit = defineEmits(['close'])
-
-const show         = ref(props.visible)
-const activeTab    = ref('split')
-const copied       = ref(false)
-const iframeKey    = ref(0)
-const iframeRef    = ref(null)
-const codeContainerRef = ref(null)
-const highlightedCode  = ref('')
-const replStore    = ref(null)   // <Repl> 需要 store 实例本身
-
-const isDark = computed(() => document.documentElement.getAttribute('data-theme') !== 'light')
-
-// 语言判断
-const isVueSfc  = computed(() => props.lang === 'vue')
-const isSvg     = computed(() => props.lang === 'svg')
-const isHtml     = computed(() => ['html', 'javascript', 'js', 'jsx', 'tsx', 'css'].includes(props.lang))
-const isMarkdown = computed(() => ['markdown', 'md'].includes(props.lang))
-
-const langLabel = computed(() => {
-  const map = {
-    vue: 'Vue SFC', html: 'HTML', javascript: 'JavaScript', js: 'JavaScript',
-    jsx: 'React JSX', tsx: 'React TSX', css: 'CSS', svg: 'SVG',
-    markdown: 'Markdown', md: 'Markdown',
-  }
-  return map[props.lang] || props.lang.toUpperCase()
-})
-
-// Vue SFC 时：tab 切换映射到 <Repl layout> prop
-// 'split'   → 'horizontal'（左代码右预览）
-// 'code'    → 'horizontal' + layoutReverse=false，但隐藏 preview 用 showOutput=false
-// 'preview' → 只看右侧 PREVIEW 面板
-// @vue/repl 没有 "仅代码" 模式，用 layout-reverse + 宽度比例控制
-const replLayout = computed(() => {
-  if (activeTab.value === 'preview') return 'horizontal'  // 切到 PREVIEW tab 由 <Repl> 内部 tab 控制
-  return 'horizontal'   // split / code 都用水平分屏
-})
-
-// Vue SFC tab 初始值：进来默认分屏
-watch(isVueSfc, (v) => { if (v) activeTab.value = 'split' }, { immediate: true })
-
-const availableTabs = computed(() => {
-  if (isVueSfc.value) {
-    return [
-      { label: '分屏', value: 'split' },
-      { label: '代码', value: 'code' },
-      { label: '预览', value: 'preview' },
-    ]
-  }
-  const tabs = [{ label: '代码', value: 'code' }]
-  if (isHtml.value || isSvg.value || isMarkdown.value) {
-    tabs.push({ label: '预览', value: 'preview' })
-    tabs.unshift({ label: '分屏', value: 'split' })
-  }
-  return tabs
-})
-
-const sanitizedSvg = computed(() =>
-  isSvg.value ? DOMPurify.sanitize(props.code, { USE_PROFILES: { svg: true } }) : ''
-)
-
-watch(() => props.visible, v => { show.value = v })
-watch(show, v => { if (!v) emit('close') })
-
-// 代码高亮
-watch(() => [props.code, props.lang], async () => {
-  try {
-    const { createHighlighter } = await import('shiki')
-    const hl = await createHighlighter({
-      themes: ['one-dark-pro', 'github-light'],
-      langs: [props.lang || 'text'],
-    })
-    const theme = isDark.value ? 'one-dark-pro' : 'github-light'
-    const loaded = hl.getLoadedLanguages()
-    highlightedCode.value = hl.codeToHtml(props.code, {
-      lang: loaded.includes(props.lang) ? props.lang : 'text',
-      theme,
-    })
-  } catch {
-    highlightedCode.value = `<pre style="margin:0;padding:16px;font-size:13px;">${props.code.replace(/</g,'&lt;')}</pre>`
-  }
-}, { immediate: true })
-
-// Vue SFC repl
-// <Repl> 内部会自己调用 store.init()，这里只负责创建 store 并写入代码
-// store 实例只创建一次，代码变化时直接修改 files[mainFile].code
-let _replStore = null
-watch(() => [props.code, props.lang], async () => {
-  if (!isVueSfc.value) return
-  try {
-    const { useStore } = await import('@vue/repl')
-    if (!_replStore) {
-      _replStore = useStore({ builtinImportMap: ref(INTERNAL_IMPORT_MAP) })
-      const mainFile = _replStore.mainFile?.value ?? _replStore.mainFile ?? 'src/App.vue'
-      if (_replStore.files?.[mainFile]) {
-        _replStore.files[mainFile].code = props.code
-      }
-      replStore.value = _replStore
-    } else {
-      const mainFile = _replStore.mainFile?.value ?? _replStore.mainFile ?? 'src/App.vue'
-      if (_replStore.files?.[mainFile]) {
-        _replStore.files[mainFile].code = props.code
-      } else {
-        await _replStore.setFiles({ [mainFile]: props.code }, mainFile)
-      }
-    }
-  } catch (e) {
-    console.warn('[CodePreview] @vue/repl 加载失败', e)
-    replStore.value = null
-  }
-}, { immediate: true })
-
-// tab 切换时同步 <Repl> 内部的 showOutput（控制是否显示 PREVIEW 面板）
-// 'preview' → showOutput=true；'code' → showOutput=false；'split' 保持默认
-watch(activeTab, (tab) => {
-  if (!_replStore) return
-  if (tab === 'preview') _replStore.showOutput = true
-  else if (tab === 'code') _replStore.showOutput = false
-  // split 时保持当前状态
-})
-
-// iframe 预览
-watch([() => props.code, () => props.lang, show], ([code, lang, visible]) => {
-  if (!visible || isVueSfc.value || isSvg.value) return
-  nextTick(() => renderIframe(code, lang))
-}, { immediate: false })
-
-function buildIframeDoc(code, lang) {
-  if (lang === 'html') return code
-  if (['javascript', 'js'].includes(lang)) {
-    return `<!DOCTYPE html><html><head><meta charset="utf-8"><style>body{font-family:sans-serif;padding:16px;background:#1e1e2e;color:#cdd6f4;}</style></head><body><script type="module">\n${code}\n<\/script></body></html>`
-  }
-  if (lang === 'jsx' || lang === '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;}</style>
-</head><body><div id="root"></div>
-<script type="text/babel">\n${code}\nconst _el=document.getElementById('root');if(typeof App!=='undefined')ReactDOM.createRoot(_el).render(React.createElement(App))\n<\/script></body></html>`
-  }
-  if (lang === 'css') {
-    return `<!DOCTYPE html><html><head><meta charset="utf-8"><style>${code}</style></head><body><p>CSS 已应用</p><div class="demo">示例元素</div></body></html>`
-  }
-  if (lang === 'markdown' || lang === 'md') {
-    // 用项目内的 marked 渲染，不依赖外部 CDN
-    const html = marked.parse(code, { gfm: true, breaks: true })
-    const sanitized = DOMPurify.sanitize(html)
-    return `<!DOCTYPE html><html><head><meta charset="utf-8"><style>
-  body { font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; padding: 28px 36px; line-height: 1.75; color: #1a1a1a; font-size: 14px; max-width: 860px; margin: 0 auto; }
-  h1 { font-size: 1.5em; font-weight: 700; border-bottom: 1px solid #e5e7eb; padding-bottom: 8px; margin: 0 0 16px; }
-  h2 { font-size: 1.25em; font-weight: 700; margin: 24px 0 8px; }
-  h3 { font-size: 1.1em; font-weight: 600; margin: 18px 0 6px; }
-  h4,h5,h6 { font-size: 1em; font-weight: 600; margin: 14px 0 4px; }
-  p { margin: 0 0 12px; }
-  code { font-family: 'Cascadia Code', Consolas, monospace; font-size: 12px; background: #f3f4f6; padding: 1px 5px; border-radius: 3px; }
-  pre { background: #1e1e2e; border-radius: 8px; padding: 14px 16px; overflow-x: auto; margin: 12px 0; }
-  pre code { background: none; color: #cdd6f4; font-size: 13px; padding: 0; }
-  blockquote { border-left: 3px solid #3b82f6; margin: 12px 0; padding: 6px 14px; color: #555; background: #f8fafc; border-radius: 0 6px 6px 0; }
-  table { border-collapse: collapse; width: 100%; margin: 12px 0; }
-  th, td { border: 1px solid #e5e7eb; padding: 8px 12px; text-align: left; }
-  th { background: #f9fafb; font-weight: 600; }
-  hr { border: none; border-top: 1px solid #e5e7eb; margin: 18px 0; }
-  a { color: #3b82f6; text-decoration: underline; }
-  img { max-width: 100%; border-radius: 6px; }
-  ul, ol { padding-left: 1.5em; margin: 0 0 12px; }
-  li { margin: 4px 0; }
-  input[type=checkbox] { margin-right: 6px; }
-</style></head><body>${sanitized}</body></html>`
-  }
-  return `<!DOCTYPE html><html><body><pre>${code.replace(/</g,'&lt;')}</pre></body></html>`
-}
-
-function renderIframe(code, lang) {
-  if (!iframeRef.value) return
-  const doc = buildIframeDoc(code, lang)
-  const blob = new Blob([doc], { type: 'text/html' })
-  const url  = URL.createObjectURL(blob)
-  iframeRef.value.src = url
-  setTimeout(() => URL.revokeObjectURL(url), 5000)
-}
-
-function refreshIframe() {
-  if (isVueSfc.value || isSvg.value) return
-  iframeKey.value++
-  nextTick(() => renderIframe(props.code, props.lang))
-}
-
-function copyCode() {
-  navigator.clipboard?.writeText(props.code).catch(() => {})
-  copied.value = true
-  setTimeout(() => { copied.value = false }, 2000)
-}
-
-// ── 行列号追踪 ────────────────────────────────────────────────────
-const cursorLine = ref(1)
-const cursorCol  = ref(1)
-const lineCount  = computed(() => props.code ? props.code.split('\n').length : 0)
-
-function onCodeClick(e) {
-  const lineEl = e.target.closest('.line')
-  if (lineEl) {
-    const pre = lineEl.closest('pre')
-    if (pre) {
-      const lines = [...pre.querySelectorAll('.line')]
-      const idx   = lines.indexOf(lineEl)
-      if (idx !== -1) cursorLine.value = idx + 1
-    }
-    // 估算列号：点击 X - 行号区宽度（行号 3em≈33px + 分隔线 + margin ≈ 58px）
-    const rect  = lineEl.getBoundingClientRect()
-    const charW = 7.8   // 13px monospace 约 7.8px/字符
-    cursorCol.value = Math.max(1, Math.round((e.clientX - rect.left - 58) / charW) + 1)
-  }
-}
-
-onMounted(() => {
-  if (props.visible && !isVueSfc.value && !isSvg.value) {
-    nextTick(() => renderIframe(props.code, props.lang))
-  }
-})
-</script>
-
-<style scoped>
-.preview-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--border-subtle);
-  background: var(--bg-secondary);
-  border-radius: 8px 8px 0 0;
-}
-.preview-tabs { display: flex; gap: 2px; }
-.preview-tab {
-  padding: 5px 14px;
-  font-size: 12px;
-  font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-  border: none;
-  background: transparent;
-  border-radius: 6px;
-  cursor: pointer;
-  color: var(--text-muted);
-  transition: all 0.15s;
-}
-.preview-tab:hover  { background: var(--border-subtle); color: var(--text-secondary); }
-.preview-tab.active { background: var(--brand-500); color: white; }
-
-.preview-body {
-  display: flex;
-  height: 520px;
-  border-radius: 0 0 8px 8px;
-  overflow: hidden;
-  border: 1px solid var(--border-subtle);
-}
-/* preview-pane 基础：flex child，不要自带 overflow */
-.preview-pane { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
-
-/* code-pane：flex 列，代码区滚动，状态栏固定底部 */
-.code-pane {
-  border-right: 1px solid var(--border-subtle);
-  background: var(--bg-tertiary);
-}
-
-/* 代码滚动区：撑满剩余高度，独立双向滚动 */
-.shiki-scroll {
-  flex: 1;
-  overflow: auto;
-  min-height: 0;   /* 关键：消除 flex 子元素默认 min-height: auto */
-}
-
-/* ── Shiki 输出：行号 + 合适内边距 ── */
-.shiki-container {
-  display: inline-block; /* 让宽度跟随内容，横向滚动正确 */
-  min-width: 100%;
-}
-:deep(.shiki-container .shiki) {
-  margin: 0 !important;
-  border-radius: 0 !important;
-  font-size: 13px !important;
-  line-height: 1.6 !important;
-  padding: 0 !important;
-  tab-size: 2;
-  background: transparent !important;
-}
-:deep(.shiki-container pre) {
-  margin: 0 !important;
-  padding: 0 !important;
-  border-radius: 0 !important;
-  counter-reset: line;
-  background: transparent !important;
-}
-/* code 容器：font-size: 0 消除匿名行盒间距 */
-:deep(.shiki-container .shiki code) {
-  display: block;
-  padding: 16px 24px 16px 0;
-  font-size: 0;
-  font-family: 'Cascadia Code', 'Consolas', monospace !important;
-}
-/* 每行 */
-:deep(.shiki-container .shiki code .line) {
-  display: block;
-  white-space: pre;
-  line-height: 22px;
-  font-size: 13px;
-}
-/* 行号伪元素 */
-:deep(.shiki-container .shiki code .line::before) {
-  counter-increment: line;
-  content: counter(line);
-  display: inline-block;
-  width: 3em;
-  padding-right: 0.9em;
-  margin-right: 1em;
-  text-align: right;
-  color: var(--text-faint, #334155);
-  border-right: 1px solid var(--border-subtle);
-  user-select: none;
-  font-size: 11px;
-  line-height: 22px;
-  vertical-align: top;
-  opacity: 0.55;
-}
-
-/* 行列号状态栏：固定在 flex 列底部，不随代码滚动 */
-.code-statusbar {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 4px 16px;
-  background: var(--bg-secondary);
-  border-top: 1px solid var(--border-subtle);
-  font-size: 11px;
-  font-family: 'Cascadia Code', 'Consolas', monospace;
-  color: var(--text-muted);
-  user-select: none;
-}
-.code-statusbar__lang { color: var(--brand-400); }
-.code-statusbar__sep  { opacity: 0.35; }
-
-.render-pane { background: #ffffff; }
-.svg-preview {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-  flex: 1;
-  overflow: auto;
-}
-:deep(.svg-preview svg) { max-width: 100%; max-height: 100%; }
-
-/* Vue SFC：<Repl> 撑满整个内容区，覆盖 preview-body 的全部空间 */
-.vue-repl-full {
-  width: 100%;
-  height: 100%;
-  border: none;
-}
-/* 去掉 @vue/repl 自带的上边框和圆角，与我们的工具栏无缝衔接 */
-:deep(.vue-repl) {
-  border: none !important;
-  border-radius: 0 !important;
-  height: 100% !important;
-}
-
-.vue-repl-loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  color: var(--text-muted);
-  font-size: 13px;
-  font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-}
-
-/* Dialog 背景对齐 */
-:deep(.el-dialog__body) { padding: 0 !important; }
-</style>

package/guanwang/src/chat-sdk/features/codepreview/index.js

@@ -1,7 +0,0 @@
-/**
- * features/codepreview
- *
- * 仅 UI：CodePreview 弹框，没有独立的 core 层
- * headless 模式下代码预览由消费方自己实现
- */
-export const CodePreview = () => import('./CodePreview.vue')

package/guanwang/src/chat-sdk/features/markdown/index.js

@@ -1,13 +0,0 @@
-/**
- * features/markdown
- *
- * core — Shiki 高亮、marked 渲染、KaTeX 数学、Mermaid 图表
- * headless 和 createAIChat 都需要 markdown 渲染能力，统一从这里导出
- */
-export {
-  renderMarkdown,
-  createStreamingParser,
-  postRender,
-  handleCodeAction,
-  shikiReady,
-} from './useMarkdown.js'