@templmf/temp-solf-lmf 0.0.55 → 0.0.57

package/guanwang/src/chat-sdk/features/mermaid/MermaidZoom.vue

@@ -1,254 +0,0 @@
-<template>
-  <Teleport to="body">
-    <div
-      v-if="visible"
-      class="mermaid-zoom-overlay"
-      @click.self="emit('close')"
-      @keydown.esc="emit('close')"
-    >
-      <div class="mermaid-zoom-box">
-        <div class="mermaid-zoom-toolbar">
-          <button class="mermaid-zoom-scale-btn" @click="zoomOut">－</button>
-          <span class="mermaid-zoom-scale-label">{{ Math.round(scale * 100) }}%</span>
-          <button class="mermaid-zoom-scale-btn" @click="zoomIn">＋</button>
-          <button class="mermaid-zoom-scale-btn" @click="resetScale">重置</button>
-          <button class="mermaid-zoom-dl-btn" :disabled="downloading" @click="downloadPng">
-            <span v-if="downloading">导出中...</span>
-            <span v-else>下载 PNG</span>
-          </button>
-          <button class="mermaid-zoom-close" @click="emit('close')">✕</button>
-        </div>
-        <div ref="scrollRef" class="mermaid-zoom-scroll">
-          <div
-            ref="svgWrapRef"
-            class="mermaid-zoom-svg"
-            :style="{ width: svgWidth }"
-            v-html="normalizedSvg"
-          />
-        </div>
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<script setup>
-import { ref, computed, watch, nextTick } from 'vue'
-
-const props = defineProps({
-  visible: { type: Boolean, default: false },
-  svgHtml: { type: String,  default: '' },
-})
-
-const emit = defineEmits(['close'])
-
-const scale      = ref(1)
-const scrollRef  = ref(null)
-const svgWrapRef = ref(null)
-const naturalW   = ref(0)  // SVG 自然宽度（px），从 viewBox 或 width 属性读取
-
-// 去掉 SVG 的固定 width/height/style，只保留 viewBox，让 CSS 控制尺寸
-const normalizedSvg = computed(() => {
-  if (!props.svgHtml) return ''
-  return props.svgHtml
-    .replace(/(<svg[^>]*)\swidth="[^"]*"/,  '$1')
-    .replace(/(<svg[^>]*)\sheight="[^"]*"/, '$1')
-    .replace(/(<svg[^>]*)\sstyle="[^"]*"/,  '$1')
-})
-
-// 从原始 svgHtml 解析 SVG 自然宽度：优先 width 属性，其次 viewBox 第3列
-function parseSvgNaturalWidth(html) {
-  const wMatch = html.match(/\swidth="([^"]+)"/)
-  if (wMatch) {
-    const v = parseFloat(wMatch[1])
-    if (v > 0) return v
-  }
-  const vbMatch = html.match(/\sviewBox="[^"]*?[\s,]([0-9.]+)[\s,]([0-9.]+)"/)
-  if (vbMatch) {
-    const v = parseFloat(vbMatch[2])  // viewBox 第3列 = width
-    if (v > 0) return v
-  }
-  return 0
-}
-
-// SVG 渲染宽度：以自然宽度为基准 × scale
-// 若自然宽度超过容器，scale=1 时 fit 到容器宽度（不超出）
-const svgWidth = computed(() => {
-  const containerW = scrollRef.value?.clientWidth || 800
-  const base = naturalW.value > 0
-    ? Math.min(naturalW.value, containerW)  // scale=1 时不超过容器
-    : containerW
-  const w = Math.round(base * scale.value)
-  return `${w}px`
-})
-
-const downloading = ref(false)
-
-async function downloadPng() {
-  debugger
-  const svgEl = svgWrapRef.value?.querySelector('svg')
-  if (!svgEl || downloading.value) return
-  downloading.value = true
-  try {
-    const vb   = svgEl.viewBox?.baseVal
-    const natW = (vb?.width  > 0 ? vb.width  : svgEl.clientWidth)  || 800
-    const natH = (vb?.height > 0 ? vb.height : svgEl.clientHeight) || 600
-    const dpr  = window.devicePixelRatio || 1
-    const outW = Math.round(natW * scale.value * dpr)
-    const outH = Math.round(natH * scale.value * dpr)
-
-    // 克隆 SVG：只保留自身 <style>，不内联外部字体，避免 Canvas 污染
-    const clone = svgEl.cloneNode(true)
-    clone.setAttribute('width',  outW)
-    clone.setAttribute('height', outH)
-    clone.setAttribute('xmlns',  'http://www.w3.org/2000/svg')
-
-    // 清理可能导致 Canvas 污染的外部资源引用
-    // 1. 去除 href 指向外部 URL 的属性
-    clone.querySelectorAll('[href],[xlink\:href]').forEach(el => {
-      const href = el.getAttribute('href') || el.getAttribute('xlink:href') || ''
-      if (/^https?:\/\//.test(href)) el.removeAttribute('href')
-    })
-    // 2. 去除 <style> 里的 @font-face 及 url() 外链
-    clone.querySelectorAll('style').forEach(s => {
-      s.textContent = s.textContent
-        .replace(/@font-face\s*\{[^}]*\}/g, '')
-        .replace(/url\(['"]?https?:\/\/[^)]*['"]?\)/g, 'none')
-    })
-    // 3. 用纯系统字体覆盖，确保不触发任何网络字体请求
-    const safeFont = 'Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif'
-    clone.style.fontFamily = safeFont
-    clone.querySelectorAll('[style*="font-family"]').forEach(el => {
-      el.style.fontFamily = safeFont
-    })
-
-    const svgStr = new XMLSerializer().serializeToString(clone)
-    // 用 data URI 而非 Blob URL，规避跨域污染
-    const dataUri = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgStr)
-
-    await new Promise((resolve, reject) => {
-      const img = new Image()
-      img.onload = () => {
-        const canvas  = document.createElement('canvas')
-        canvas.width  = outW
-        canvas.height = outH
-        const ctx = canvas.getContext('2d')
-        ctx.fillStyle = '#ffffff'
-        ctx.fillRect(0, 0, outW, outH)
-        ctx.drawImage(img, 0, 0, outW, outH)
-        canvas.toBlob(pngBlob => {
-          if (!pngBlob) { reject(new Error('toBlob failed')); return }
-          const a = document.createElement('a')
-          a.href = URL.createObjectURL(pngBlob)
-          a.download = `mermaid-${Math.round(scale.value * 100)}pct.png`
-          a.click()
-          setTimeout(() => URL.revokeObjectURL(a.href), 3000)
-          resolve()
-        }, 'image/png')
-      }
-      img.onerror = () => {
-        // Canvas 仍被污染时降级为直接下载 SVG
-        console.warn('[MermaidZoom] Canvas 污染，降级下载 SVG')
-        const a = document.createElement('a')
-        a.href = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgStr)
-        a.download = `mermaid-${Math.round(scale.value * 100)}pct.svg`
-        a.click()
-        resolve()
-      }
-      img.src = dataUri
-    })
-  } catch (e) {
-    console.warn('[MermaidZoom] 导出失败', e)
-  } finally {
-    downloading.value = false
-  }
-}
-
-function zoomIn()    { scale.value = Math.min(4,  +(scale.value + 0.2).toFixed(1)) }
-function zoomOut()   { scale.value = Math.max(0.2, +(scale.value - 0.2).toFixed(1)) }
-function resetScale(){ scale.value = 1 }
-
-// 打开时重置 scale 并解析自然宽度
-watch(() => props.visible, async v => {
-  if (v) {
-    scale.value = 1
-    naturalW.value = parseSvgNaturalWidth(props.svgHtml)
-    await nextTick()
-    // DOM 挂载后用实际渲染宽度修正（更准确）
-    const svgEl = svgWrapRef.value?.querySelector('svg')
-    if (svgEl?.viewBox?.baseVal?.width > 0) {
-      naturalW.value = svgEl.viewBox.baseVal.width
-    }
-  }
-})
-</script>
-
-<style scoped>
-.mermaid-zoom-overlay {
-  position: fixed; inset: 0; z-index: 9999;
-  background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
-  display: flex; align-items: center; justify-content: center;
-  padding: 24px;
-}
-.mermaid-zoom-box {
-  background: var(--bg-primary);
-  border-radius: 14px;
-  display: flex; flex-direction: column;
-  width: 90vw; height: 80vh;
-  box-shadow: 0 24px 80px rgba(0,0,0,0.4);
-  overflow: hidden;
-}
-.mermaid-zoom-toolbar {
-  display: flex; align-items: center; gap: 6px;
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--border-subtle);
-  background: var(--bg-secondary);
-  border-radius: 14px 14px 0 0;
-  flex-shrink: 0;
-}
-.mermaid-zoom-scale-btn {
-  min-width: 28px; height: 26px; padding: 0 8px;
-  border: 1px solid var(--border-default); border-radius: 5px;
-  background: transparent; color: var(--text-muted);
-  font-size: 13px; cursor: pointer; transition: all 0.12s;
-}
-.mermaid-zoom-scale-btn:hover { border-color: var(--brand-500); color: var(--brand-400); }
-.mermaid-zoom-dl-btn {
-  height: 26px; padding: 0 12px;
-  border: 1px solid var(--brand-500); border-radius: 5px;
-  background: var(--brand-500); color: #fff;
-  font-size: 12px; cursor: pointer; transition: all 0.12s;
-  white-space: nowrap;
-}
-.mermaid-zoom-dl-btn:hover:not(:disabled) { background: var(--brand-600); border-color: var(--brand-600); }
-.mermaid-zoom-dl-btn:disabled { opacity: 0.6; cursor: not-allowed; }
-.mermaid-zoom-scale-label {
-  min-width: 44px; text-align: center;
-  font-size: 12px; font-family: 'Cascadia Code', monospace;
-  color: var(--text-secondary);
-}
-.mermaid-zoom-close {
-  margin-left: auto;
-  width: 26px; height: 26px; border-radius: 50%;
-  border: 1px solid var(--border-default); background: transparent;
-  color: var(--text-muted); font-size: 13px;
-  cursor: pointer; display: flex; align-items: center; justify-content: center;
-  transition: background 0.15s, color 0.15s;
-}
-.mermaid-zoom-close:hover { background: var(--border-subtle); color: var(--text-primary); }
-.mermaid-zoom-scroll {
-  flex: 1;
-  overflow: auto;
-  padding: 24px;
-  min-width: 0;
-}
-.mermaid-zoom-svg {
-  /* width 由 :style 动态设置；margin auto 实现水平居中 */
-  margin: 0 auto;
-  transition: width 0.15s ease;
-}
-.mermaid-zoom-svg :deep(svg) {
-  display: block;
-  width: 100%;
-  height: auto;
-}
-</style>

package/guanwang/src/chat-sdk/features/upload/FileAttachment.vue

@@ -1,142 +0,0 @@
-<template>
-  <!-- 附件预览条：显示在输入框上方 -->
-  <div v-if="attachments.length > 0" class="attachment-bar">
-    <div
-      v-for="att in attachments"
-      :key="att.id"
-      class="att-chip"
-      :class="{ 'att-chip--visual': att.type === 'visual' }"
-    >
-      <!-- 图片缩略图 -->
-      <img
-        v-if="att.preview"
-        :src="att.preview"
-        class="att-thumb"
-        :alt="att.fileName"
-      />
-      <!-- 文件图标 -->
-      <div v-else class="att-icon">
-        <component :is="fileIcon(att.ext)" :size="16" color="var(--brand-400)" />
-      </div>
-
-      <!-- 文件信息 -->
-      <div class="att-info">
-        <span class="att-name">{{ truncateName(att.fileName) }}</span>
-        <span class="att-meta">
-          {{ att.type === 'visual' ? '视觉模型' : '文本模型' }}
-          · {{ att.fileSize }}
-          <template v-if="att.pageCount"> · {{ att.pageCount }}页</template>
-        </span>
-      </div>
-
-      <!-- 删除按钮 -->
-      <el-button
-        text
-        circle
-        size="small"
-        class="att-remove"
-        @click="$emit('remove', att.id)"
-      >
-        <X :size="13" />
-      </el-button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { X, FileText, FileCode, FileSpreadsheet, Image, File } from 'lucide-vue-next'
-
-defineProps({
-  attachments: { type: Array, default: () => [] },
-})
-defineEmits(['remove'])
-
-function truncateName(name) {
-  return name.length > 20 ? name.slice(0, 17) + '...' : name
-}
-
-function fileIcon(ext) {
-  const codeExts = new Set(['js','ts','jsx','tsx','vue','html','css','py','go','rs','java','sh','json','sql'])
-  const sheetExts = new Set(['xlsx','xls','csv'])
-  const imageExts = new Set(['jpg','jpeg','png','webp','gif','svg'])
-  if (imageExts.has(ext)) return Image
-  if (codeExts.has(ext))  return FileCode
-  if (sheetExts.has(ext)) return FileSpreadsheet
-  if (ext === 'pdf' || ext === 'docx' || ext === 'txt' || ext === 'md') return FileText
-  return File
-}
-</script>
-
-<style scoped>
-.attachment-bar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding: 10px 14px 6px;
-  border-bottom: 1px solid var(--border-subtle);
-  background: var(--bg-secondary);
-}
-
-.att-chip {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 8px 6px 6px;
-  border-radius: 10px;
-  border: 1px solid var(--border-default);
-  background: var(--bg-tertiary);
-  max-width: 240px;
-  transition: border-color 0.15s;
-}
-.att-chip:hover { border-color: rgba(26,111,196,0.4); }
-.att-chip--visual { border-color: rgba(26,111,196,0.3); background: var(--tag-bg); }
-
-.att-thumb {
-  width: 36px;
-  height: 36px;
-  object-fit: cover;
-  border-radius: 6px;
-  flex-shrink: 0;
-}
-
-.att-icon {
-  width: 36px;
-  height: 36px;
-  border-radius: 6px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-subtle);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.att-info {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-  flex: 1;
-}
-.att-name {
-  font-size: 12px;
-  font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-  color: var(--text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.att-meta {
-  font-size: 10px;
-  font-family: 'Cascadia Code', 'Consolas', monospace;
-  color: var(--brand-400);
-}
-
-.att-remove {
-  flex-shrink: 0;
-  color: var(--text-muted) !important;
-  opacity: 0.6;
-  transition: opacity 0.15s !important;
-}
-.att-remove:hover { opacity: 1 !important; color: #f87171 !important; }
-</style>

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

@@ -1,17 +0,0 @@
-/**
- * features/upload
- *
- * core   — 纯能力：文件处理、类型判断、base64 转换
- * UI     — FileAttachment.vue 附件预览组件
- */
-
-// ── core ──────────────────────────────────────────────────────────
-export {
-  processFile,
-  buildMessageContent,
-  ACCEPT_TYPES,
-  FILE_TYPE_HINT,
-} from './useFileHandler.js'
-
-// ── UI ────────────────────────────────────────────────────────────
-export const FileAttachment = () => import('./FileAttachment.vue')