新增: 粘贴文件附件坞与抽屉预览,支持全屏查看

src/App.vue

@@ -7,6 +7,9 @@ import { store } from './core/store'
 import { readAsDataURL, fileToImageElement } from './core/importer'
 import { checkImageQuota } from './core/ai'
 import AppDialog from './components/common/AppDialog.vue'
+import FileDock from './components/common/FileDock.vue'
+import FilePreviewDrawer from './components/common/FilePreviewDrawer.vue'
+import { addFiles } from './core/attachments'
 import Toolbar from './components/editor/Toolbar.vue'
 import ThumbBar from './components/editor/ThumbBar.vue'
 import Canvas from './components/editor/Canvas.vue'
@@ -244,7 +247,30 @@ async function onPaste(e: ClipboardEvent) {
     }
   }
 
-  // 2) 文本：图片 URL → 图片元素；其他文本 → 文本元素（内部元素剪贴板优先级更高，keydown 已处理）
+  // 2) 常规文件（非图片：PDF/视频/文档/压缩包等）→ 附件坞（仅会话态）
+  //    两路兜底：cd.files（多数浏览器直接给 FileList）+ items.getAsFile()（部分只在 items 暴露）
+  const regularFiles: File[] = []
+  const seen = new Set<string>()  // 名称+大小去重，避免两路重复
+  const collect = (f: File | null) => {
+    if (!f) return
+    if (f.type.startsWith('image/')) return  // 图片已在上面处理
+    const key = `${f.name}${f.size}`
+    if (seen.has(key)) return
+    seen.add(key)
+    regularFiles.push(f)
+  }
+  for (const f of Array.from(cd.files)) collect(f)
+  for (const item of items) {
+    if (item.kind === 'file' && !item.type.startsWith('image/')) collect(item.getAsFile())
+  }
+  if (regularFiles.length) {
+    e.preventDefault()
+    const n = addFiles(regularFiles)
+    toast(`已添加 ${n} 个附件`)
+    return
+  }
+
+  // 3) 文本：图片 URL → 图片元素；其他文本 → 文本元素（内部元素剪贴板优先级更高，keydown 已处理）
   if (store.hasClipboard()) return
   const text = cd.getData('text/plain')
   if (!text || !text.trim()) return
@@ -440,6 +466,10 @@ onUnmounted(() => {
     </div>
   </div>
 
+  <!-- 会话态附件坞与右侧预览抽屉 -->
+  <FileDock />
+  <FilePreviewDrawer />
+
   <!-- 全局统一对话框（appAlert/appConfirm/appPrompt） -->
   <AppDialog />
 </template>

src/components/common/FileDock.vue

@@ -0,0 +1,132 @@
+<!-- =====================================================================
+  FileDock.vue — 附件坞：页面粘贴常规文件后浮现的可点击附件条
+  由 core/attachments 模块级状态驱动；点击文件 → 打开右侧预览抽屉
+  仅会话态，不落盘（刷新即失）
+  ===================================================================== -->
+<script setup lang="ts">
+import { attachmentState, openPreview, removeAttachment, clearAttachments, formatSize } from '../../core/attachments'
+
+/* 类型 → 图标（纯 emoji，与工具栏风格一致，零依赖） */
+const ICONS: Record<string, string> = {
+  image: '🖼️', video: '🎬', pdf: '📕',
+  markdown: '📝', text: '📄', doc: '📘', meta: '📎'
+}
+</script>
+
+<template>
+  <!-- 有附件才显示 -->
+  <div v-if="attachmentState.list.value.length" class="file-dock">
+    <div class="file-dock-head">
+      <span class="file-dock-title">📎 附件 {{ attachmentState.list.value.length }}</span>
+      <button class="file-dock-clear" title="清空附件" @click="clearAttachments">清空</button>
+    </div>
+    <div class="file-dock-list">
+      <div
+        v-for="att in attachmentState.list.value"
+        :key="att.id"
+        class="file-chip"
+        :class="{ active: attachmentState.activeId.value === att.id }"
+        :title="`${att.name} · ${formatSize(att.size)}`"
+        @click="openPreview(att.id)"
+      >
+        <span class="file-chip-icon">{{ ICONS[att.kind] || '📎' }}</span>
+        <span class="file-chip-name">{{ att.name }}</span>
+        <span class="file-chip-size">{{ formatSize(att.size) }}</span>
+        <button
+          class="file-chip-del"
+          title="移除"
+          @click.stop="removeAttachment(att.id)"
+        >×</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 附件坞：贴底居中悬浮条 */
+.file-dock {
+  position: fixed;
+  left: 50%;
+  bottom: 16px;
+  transform: translateX(-50%);
+  z-index: 60;
+  max-width: min(80vw, 760px);
+  background: var(--ui-panel);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-lg);
+  padding: 8px 10px;
+}
+.file-dock-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 6px;
+}
+.file-dock-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ui-muted);
+}
+.file-dock-clear {
+  border: none;
+  background: none;
+  color: var(--ui-muted);
+  font-size: 12px;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+}
+.file-dock-clear:hover { background: var(--ui-hover); color: var(--ui-danger); }
+
+.file-dock-list {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  padding-bottom: 2px;
+}
+.file-chip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+  max-width: 220px;
+  padding: 6px 8px;
+  background: var(--ui-bg);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: border-color .15s, background .15s;
+}
+.file-chip:hover { border-color: var(--ui-primary); }
+.file-chip.active {
+  border-color: var(--ui-primary);
+  background: var(--ui-primary-soft);
+}
+.file-chip-icon { font-size: 16px; line-height: 1; }
+.file-chip-name {
+  font-size: 13px;
+  color: var(--ui-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.file-chip-size {
+  font-size: 11px;
+  color: var(--ui-muted);
+  flex: 0 0 auto;
+}
+.file-chip-del {
+  border: none;
+  background: none;
+  color: var(--ui-muted);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0 2px;
+  border-radius: 4px;
+  flex: 0 0 auto;
+}
+.file-chip-del:hover { color: var(--ui-danger); background: var(--ui-hover); }
+</style>

src/components/common/FilePreviewDrawer.vue

@@ -0,0 +1,276 @@
+<!-- =====================================================================
+  FilePreviewDrawer.vue — 附件右侧抽屉预览
+  图片/视频直接 ObjectURL 预览；PDF/DOCX 提取文本；MD 走 renderMd；
+  其余类型展示元数据和下载。双击内容或点击放大按钮可占满窗口。
+  ===================================================================== -->
+<script setup lang="ts">
+import { computed, ref, onMounted, onBeforeUnmount, watch } from 'vue'
+import { attachmentState, closePreview, downloadAttachment, getAttachment, loadPreviewText } from '../../core/attachments'
+import { renderMd } from '../../core/markdown'
+
+const activeAttachment = computed(() => getAttachment(attachmentState.activeId.value))
+const renderedMarkdown = computed(() => renderMd(activeAttachment.value?.text || ''))
+
+/* 媒体 ObjectURL：每个附件只创建一份，切换/关闭/卸载时统一回收，防泄漏 */
+const mediaUrl = ref('')
+function revokeMedia() {
+  if (mediaUrl.value) { URL.revokeObjectURL(mediaUrl.value); mediaUrl.value = '' }
+}
+watch(() => attachmentState.activeId.value, () => {
+  revokeMedia()
+  const att = activeAttachment.value
+  if (att && (att.kind === 'image' || att.kind === 'video')) {
+    mediaUrl.value = URL.createObjectURL(att.file)
+  }
+  void loadPreviewText(att)
+}, { immediate: true })
+onBeforeUnmount(revokeMedia)
+
+function toggleMaximize() {
+  attachmentState.maximized.value = !attachmentState.maximized.value
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    if (attachmentState.maximized.value) attachmentState.maximized.value = false
+    else closePreview()
+  }
+}
+
+onMounted(() => document.addEventListener('keydown', onKeydown))
+onBeforeUnmount(() => document.removeEventListener('keydown', onKeydown))
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="activeAttachment"
+      class="file-preview-mask"
+      :class="{ maximized: attachmentState.maximized.value }"
+    >
+      <aside class="file-preview-drawer" role="dialog" aria-modal="true" :aria-label="`${activeAttachment.name} 预览`">
+        <header class="file-preview-head">
+          <div class="file-preview-title" :title="activeAttachment.name">
+            <span class="file-preview-title-icon">📎</span>
+            <span>{{ activeAttachment.name }}</span>
+          </div>
+          <div class="file-preview-actions">
+            <button class="file-preview-btn" :title="attachmentState.maximized.value ? '退出放大' : '放大预览'" @click="toggleMaximize">
+              {{ attachmentState.maximized.value ? '↙' : '↗' }}
+            </button>
+            <button class="file-preview-btn close" title="关闭预览" @click="closePreview">×</button>
+          </div>
+        </header>
+
+        <main class="file-preview-body" @dblclick="toggleMaximize">
+          <!-- 图片 -->
+          <img
+            v-if="activeAttachment.kind === 'image'"
+            class="file-preview-image"
+            :src="mediaUrl"
+            :alt="activeAttachment.name"
+          />
+
+          <!-- 视频 -->
+          <video
+            v-else-if="activeAttachment.kind === 'video'"
+            class="file-preview-video"
+            :src="mediaUrl"
+            controls
+          >你的浏览器不支持视频预览。</video>
+
+          <!-- Markdown -->
+          <article
+            v-else-if="activeAttachment.kind === 'markdown' && activeAttachment.textState === 'done'"
+            class="file-preview-markdown"
+            v-html="renderedMarkdown"
+          />
+
+          <!-- PDF / DOC / TXT：统一纯文本阅读 -->
+          <pre
+            v-else-if="(activeAttachment.kind === 'pdf' || activeAttachment.kind === 'doc' || activeAttachment.kind === 'text') && activeAttachment.textState === 'done'"
+            class="file-preview-text"
+          >{{ activeAttachment.text }}</pre>
+
+          <!-- 文本加载 / 错误 -->
+          <div v-else-if="activeAttachment.textState === 'loading'" class="file-preview-status">正在提取文件内容…</div>
+          <div v-else-if="activeAttachment.textState === 'error'" class="file-preview-status error">
+            预览读取失败：{{ activeAttachment.textError }}
+          </div>
+
+          <!-- 无结构化预览的文件 -->
+          <div v-else class="file-preview-meta">
+            <span class="file-preview-meta-icon">📎</span>
+            <strong>{{ activeAttachment.name }}</strong>
+            <span>{{ activeAttachment.file.type || '未知文件类型' }}</span>
+            <span>{{ activeAttachment.size.toLocaleString() }} B</span>
+            <button class="file-preview-download" @click="downloadAttachment(activeAttachment)">下载文件</button>
+          </div>
+        </main>
+
+        <footer class="file-preview-foot">
+          <span>{{ activeAttachment.file.type || '未知类型' }}</span>
+          <button class="file-preview-download link" @click="downloadAttachment(activeAttachment)">下载</button>
+        </footer>
+      </aside>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.file-preview-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  pointer-events: none;
+}
+.file-preview-drawer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: min(480px, 100vw);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--ui-panel);
+  border-left: 1px solid var(--ui-border);
+  box-shadow: var(--shadow-lg);
+  pointer-events: auto;
+  animation: drawer-enter .18s ease-out;
+}
+.file-preview-mask.maximized .file-preview-drawer {
+  width: 100vw;
+  border-left: none;
+}
+@keyframes drawer-enter {
+  from { transform: translateX(28px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+.file-preview-head,
+.file-preview-foot {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--ui-border);
+}
+.file-preview-title {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  gap: 7px;
+  flex: 1;
+  color: var(--ui-text);
+  font-size: 14px;
+  font-weight: 600;
+}
+.file-preview-title span:last-child {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.file-preview-title-icon { font-size: 17px; }
+.file-preview-actions { display: flex; gap: 4px; }
+.file-preview-btn {
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--ui-muted);
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+}
+.file-preview-btn:hover { background: var(--ui-hover); color: var(--ui-text); }
+.file-preview-btn.close:hover { color: var(--ui-danger); }
+.file-preview-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 16px;
+  background: var(--ui-bg);
+}
+.file-preview-image,
+.file-preview-video {
+  display: block;
+  width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  margin: auto;
+}
+.file-preview-image { min-height: 200px; }
+.file-preview-text {
+  margin: 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  color: var(--ui-text);
+  font: 13px/1.7 var(--mono);
+}
+.file-preview-markdown {
+  color: var(--ui-text);
+  font-size: 14px;
+  line-height: 1.7;
+  overflow-wrap: anywhere;
+}
+.file-preview-markdown :deep(h1),
+.file-preview-markdown :deep(h2),
+.file-preview-markdown :deep(h3) { margin: 1.1em 0 .5em; }
+.file-preview-markdown :deep(p),
+.file-preview-markdown :deep(ul),
+.file-preview-markdown :deep(ol) { margin: .6em 0; }
+.file-preview-markdown :deep(pre) {
+  padding: 10px;
+  overflow: auto;
+  background: #0f172a;
+  color: #e2e8f0;
+  border-radius: var(--radius-sm);
+}
+.file-preview-markdown :deep(code) { font-family: var(--mono); }
+.file-preview-status {
+  display: grid;
+  place-items: center;
+  height: 100%;
+  color: var(--ui-muted);
+  font-size: 14px;
+  text-align: center;
+}
+.file-preview-status.error { color: var(--ui-danger); }
+.file-preview-meta {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  min-height: 100%;
+  color: var(--ui-muted);
+  font-size: 13px;
+  text-align: center;
+}
+.file-preview-meta strong { color: var(--ui-text); overflow-wrap: anywhere; }
+.file-preview-meta-icon { font-size: 44px; }
+.file-preview-download {
+  padding: 7px 12px;
+  border: 1px solid var(--ui-primary);
+  border-radius: var(--radius-sm);
+  background: var(--ui-primary);
+  color: #fff;
+  font-size: 13px;
+  cursor: pointer;
+}
+.file-preview-download:hover { filter: brightness(.94); }
+.file-preview-foot {
+  justify-content: space-between;
+  border-top: 1px solid var(--ui-border);
+  border-bottom: none;
+  color: var(--ui-muted);
+  font-size: 12px;
+}
+.file-preview-download.link {
+  padding: 3px 6px;
+  border: none;
+  background: transparent;
+  color: var(--ui-primary);
+}
+</style>

src/core/attachments.ts

@@ -0,0 +1,159 @@
+/* =====================================================================
+ * attachments.ts — 会话态附件坞服务（模块级响应式状态，参考 dialog.ts 设计）
+ *
+ * 定位：页面粘贴常规文件（非图片）→ 附件坞展示 → 抽屉预览/下载
+ * 约束：
+ *   - 仅会话内存态，不写 deck / localStorage，刷新即失
+ *   - ObjectURL 统一在本模块创建/释放（remove/clear 时 revoke）
+ *   - 预览文本（PDF/DOCX/MD/TXT）懒加载并缓存在附件对象上
+ * ===================================================================== */
+import { ref } from 'vue'
+import { extractPdfText, extractDocxText } from './importer'
+
+/** 附件预览类型（决定抽屉渲染方式） */
+export type PreviewKind = 'image' | 'video' | 'pdf' | 'markdown' | 'text' | 'doc' | 'meta'
+
+/** 会话态附件 */
+export interface Attachment {
+  id: number
+  file: File
+  name: string
+  ext: string
+  size: number
+  /** 预览分类 */
+  kind: PreviewKind
+  /** 懒加载的提取文本（pdf/doc/md/txt 预览用） */
+  text?: string
+  /** 文本提取状态 */
+  textState: 'none' | 'loading' | 'done' | 'error'
+  textError?: string
+}
+
+/* ---------- 模块级响应式状态（FileDock / FilePreviewDrawer 消费） ---------- */
+export const attachmentState = {
+  /** 附件列表 */
+  list: ref<Attachment[]>([]),
+  /** 当前预览的附件 id（null = 抽屉关闭） */
+  activeId: ref<number | null>(null),
+  /** 预览放大占满窗口 */
+  maximized: ref(false)
+}
+
+let nextId = 1
+
+/** 扩展名 → 预览类型映射 */
+const KIND_BY_EXT: Record<string, PreviewKind> = {
+  '.png': 'image', '.jpg': 'image', '.jpeg': 'image', '.gif': 'image',
+  '.webp': 'image', '.svg': 'image', '.bmp': 'image', '.ico': 'image',
+  '.pdf': 'pdf',
+  '.md': 'markdown', '.markdown': 'markdown',
+  '.txt': 'text', '.text': 'text',
+  '.doc': 'doc', '.docx': 'doc'
+}
+
+/** 取小写扩展名（含点；无扩展名为空串） */
+export function getExt(name: string): string {
+  const dot = name.lastIndexOf('.')
+  return dot >= 0 ? name.slice(dot).toLowerCase() : ''
+}
+
+/** 文件 → 预览类型：扩展名优先，MIME（video/*）兜底，其余回落 meta（仅元数据+下载） */
+export function getPreviewKind(file: File): PreviewKind {
+  const byExt = KIND_BY_EXT[getExt(file.name)]
+  if (byExt) return byExt
+  if (file.type.startsWith('video/')) return 'video'
+  if (file.type.startsWith('image/')) return 'image'
+  if (file.type === 'text/plain') return 'text'
+  if (file.type === 'application/pdf') return 'pdf'
+  return 'meta'
+}
+
+/** 人性化文件大小 */
+export function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+  return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`
+}
+
+/** 加入附件坞（仅会话态，不落盘） */
+export function addFiles(files: File[] | FileList): number {
+  let added = 0
+  for (const file of Array.from(files)) {
+    attachmentState.list.value.push({
+      id: nextId++,
+      file,
+      name: file.name || `粘贴文件-${nextId}`,
+      ext: getExt(file.name),
+      size: file.size,
+      kind: getPreviewKind(file),
+      textState: 'none'
+    })
+    added++
+  }
+  return added
+}
+
+/** 按类型查找附件 */
+export function getAttachment(id: number | null): Attachment | null {
+  if (id == null) return null
+  return attachmentState.list.value.find(a => a.id === id) ?? null
+}
+
+/** 移除单个附件（若是当前预览项则顺带关抽屉） */
+export function removeAttachment(id: number) {
+  const idx = attachmentState.list.value.findIndex(a => a.id === id)
+  if (idx < 0) return
+  attachmentState.list.value.splice(idx, 1)
+  if (attachmentState.activeId.value === id) {
+    attachmentState.activeId.value = null
+    attachmentState.maximized.value = false
+  }
+}
+
+/** 清空附件坞 */
+export function clearAttachments() {
+  attachmentState.list.value = []
+  attachmentState.activeId.value = null
+  attachmentState.maximized.value = false
+}
+
+/** 打开抽屉预览 */
+export function openPreview(id: number) {
+  attachmentState.activeId.value = id
+  attachmentState.maximized.value = false
+  void loadPreviewText(getAttachment(id))
+}
+
+/** 关闭抽屉 */
+export function closePreview() {
+  attachmentState.activeId.value = null
+  attachmentState.maximized.value = false
+}
+
+/** 懒加载预览文本（复用 importer 的 PDF/DOCX 提取），结果缓存在附件对象上 */
+export async function loadPreviewText(att: Attachment | null): Promise<void> {
+  if (!att) return
+  if (att.textState !== 'none') return
+  if (att.kind !== 'pdf' && att.kind !== 'doc' && att.kind !== 'markdown' && att.kind !== 'text') return
+  att.textState = 'loading'
+  try {
+    if (att.kind === 'pdf') att.text = await extractPdfText(att.file)
+    else if (att.kind === 'doc') att.text = await extractDocxText(att.file)
+    else att.text = await att.file.text()
+    att.textState = 'done'
+  } catch (e: any) {
+    att.textState = 'error'
+    att.textError = e?.message || String(e)
+  }
+}
+
+/** 下载附件（meta 类型兜底出口，也供常规预览手动另存） */
+export function downloadAttachment(att: Attachment) {
+  const url = URL.createObjectURL(att.file)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = att.name
+  a.click()
+  URL.revokeObjectURL(url)
+}