@templmf/temp-solf-lmf 0.0.54 → 0.0.55

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

@@ -0,0 +1,254 @@
+<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

@@ -0,0 +1,142 @@
+<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

@@ -0,0 +1,17 @@
+/**
+ * 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')