adtec-core-package 3.1.6 → 3.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adtec-core-package",
-  "version": "3.1.6",
+  "version": "3.1.7",
   "private": false,
   "type": "module",
   "exports": {
@@ -34,7 +34,6 @@
     "@element-plus/icons-vue": "^2.3.1",
     "@eslint/object-schema": "3.0.2",
     "@floating-ui/dom": "1.7.5",
-    "@onlyoffice/document-editor-vue": "1.4.0",
     "@tiptap/core": "3.20.0",
     "@tiptap/extension-bold": "3.20.0",
     "@tiptap/extension-code-block": "3.20.0",
@@ -76,6 +75,7 @@
     "@vxe-ui/plugin-render-element": "4.0.10",
     "axios": "^1.7.7",
     "crypto-js": "^4.2.0",
+    "docx-preview": "^0.3.7",
     "dom-to-image-more": "3.7.2",
     "echarts": "^5.6.0",
     "element-plus": "2.8.7",
@@ -91,6 +91,7 @@
     "linq-to-ts": "^1.3.0",
     "lowlight": "3.3.0",
     "nzh": "1.0.14",
+    "pdfjs-dist": "^4.10.38",
     "pinia": "^2.3.0",
     "pinia-plugin-store": "^2.2.9",
     "pretty-bytes": "7.1.0",
@@ -102,6 +103,7 @@
     "tdesign-vue-next": "1.18.2",
     "uuid": "^11.0.3",
     "vue": "^3.5.13",
+    "vue-demi": "^0.14.10",
     "vue-focus-lock": "^3.0.0",
     "vue-i18n": "11.2.8",
     "vue-img-viewr": "2.0.11",

package/src/api/DocumentApi.ts

@@ -1,4 +1,5 @@
 import request from '../utils/request'
+import axiosRequest from '../utils/AxiosConfig'
 import type { ISysUploadFiles } from '../interface/ISysUploadFiles.ts'
 
 /**
@@ -30,5 +31,14 @@ export default {
   },
   delSysUploadFiles(ids: string[]): Promise<Record<string, string>> {
     return request.post(basePath + 'delSysUploadFiles', ids)
-  }
+  },
+  /** 旧版 .doc 转 PDF 流，仅供预览，下载仍用原文件 */
+  previewWordAsPdf(id: string): Promise<Blob> {
+    return axiosRequest<Blob>({
+      url: basePath + 'preview/wordToPdf',
+      method: 'get',
+      params: { id },
+      responseType: 'blob',
+    }).then((res) => res.data)
+  },
 }

package/src/components/upload/DocxJsViewer.vue

@@ -0,0 +1,286 @@
+<template>
+  <div ref="scrollRef" class="docx-js-viewer">
+    <div v-if="loading" class="docx-loading">正在解析 Word 文档…</div>
+    <div v-else-if="legacyDoc" class="docx-legacy-tip">
+      <el-empty description="旧版 Word（.doc）暂不支持浏览器内预览，请下载后查看或转换为 docx。" />
+    </div>
+    <div v-else-if="loadError" class="docx-legacy-tip">
+      <el-empty :description="loadError" />
+    </div>
+    <div v-else class="docx-body">
+      <div ref="styleHostRef" class="docx-style-host" />
+      <div class="docx-scale-host" :style="scaleHostStyle">
+        <div ref="bodyHostRef" class="docx-render-host" :style="renderStyle" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { renderAsync } from 'docx-preview'
+import { computed, nextTick, ref, watch } from 'vue'
+import {
+  activateDocxSearchMark,
+  clearDocxSearchMarks,
+  detectWordBinaryFormat,
+  type DocxSearchMatch,
+  resolveRawWordExt,
+  searchDocxPages,
+} from '../../utils/docxPreviewUtil.ts'
+
+const props = withDefaults(
+  defineProps<{
+    src?: Blob | ArrayBuffer
+    scale?: number
+    fileName?: string
+    fileType?: string
+    fileUrl?: string
+  }>(),
+  { scale: 1 },
+)
+
+const emit = defineEmits<{
+  loaded: []
+  error: [err?: unknown]
+  'page-change': [page: number]
+}>()
+
+const scrollRef = ref<HTMLElement | null>(null)
+const styleHostRef = ref<HTMLElement | null>(null)
+const bodyHostRef = ref<HTMLElement | null>(null)
+const loading = ref(false)
+const legacyDoc = ref(false)
+const loadError = ref('')
+const totalPages = ref(0)
+const currentPage = ref(1)
+const pageSections = ref<HTMLElement[]>([])
+const searchMatches = ref<DocxSearchMatch[]>([])
+const activeMatchIndex = ref(-1)
+
+const userScale = computed(() => props.scale ?? 1)
+const renderStyle = computed(() => ({
+  transform: `scale(${userScale.value})`,
+  transformOrigin: 'top left',
+}))
+const scaleHostStyle = computed(() => {
+  const section = pageSections.value[currentPage.value - 1]
+  if (!section) return { minHeight: '100%' }
+  return {
+    width: `${Math.max(section.offsetWidth, 1) * userScale.value}px`,
+    minHeight: `${Math.max(section.offsetHeight, 1) * userScale.value}px`,
+  }
+})
+
+const resetViewer = () => {
+  legacyDoc.value = false
+  loadError.value = ''
+  totalPages.value = 0
+  currentPage.value = 1
+  pageSections.value = []
+  searchMatches.value = []
+  activeMatchIndex.value = -1
+  styleHostRef.value && (styleHostRef.value.innerHTML = '')
+  bodyHostRef.value && (bodyHostRef.value.innerHTML = '')
+}
+
+const collectPageSections = () => {
+  const host = bodyHostRef.value
+  if (!host) {
+    pageSections.value = []
+    totalPages.value = 0
+    return
+  }
+  const sections = Array.from(
+    host.querySelectorAll<HTMLElement>('section.docx, .docx-wrapper > section, .docx > section'),
+  )
+  if (sections.length > 0) {
+    pageSections.value = sections
+  } else if (host.firstElementChild instanceof HTMLElement) {
+    pageSections.value = [host.firstElementChild]
+  } else {
+    pageSections.value = [host]
+  }
+  totalPages.value = pageSections.value.length
+  currentPage.value = 1
+  emit('page-change', 1)
+}
+
+const loadDocument = async (src: Blob | ArrayBuffer) => {
+  loading.value = true
+  resetViewer()
+  try {
+    const buffer = src instanceof Blob ? await src.arrayBuffer() : src
+    const binaryFormat = detectWordBinaryFormat(buffer)
+    const rawExt = resolveRawWordExt(props.fileType, props.fileName, props.fileUrl)
+    if (binaryFormat === 'doc' || rawExt === 'doc') {
+      legacyDoc.value = true
+      emit('loaded')
+      return
+    }
+    const bodyHost = bodyHostRef.value
+    const styleHost = styleHostRef.value
+    if (!bodyHost || !styleHost) {
+      throw new Error('预览容器未就绪')
+    }
+    await renderAsync(buffer, bodyHost, styleHost, {
+      className: 'docx',
+      inWrapper: true,
+      breakPages: true,
+      ignoreLastRenderedPageBreak: true,
+      useBase64URL: true,
+      renderHeaders: true,
+      renderFooters: true,
+      renderFootnotes: true,
+      renderEndnotes: true,
+    })
+    await nextTick()
+    collectPageSections()
+    emit('loaded')
+  } catch (err) {
+    loadError.value = 'Word 文档解析失败，请下载后查看'
+    emit('error', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+const scrollToPage = async (pageNum: number) => {
+  const target = Math.min(Math.max(1, pageNum), totalPages.value || 1)
+  const section = pageSections.value[target - 1]
+  currentPage.value = target
+  emit('page-change', target)
+  await nextTick()
+  const container = scrollRef.value
+  if (!container || !section) return
+  const top = section.offsetTop - 12
+  container.scrollTo({ top: Math.max(0, top), behavior: 'smooth' })
+}
+
+const scrollToMatch = async (match: DocxSearchMatch) => {
+  await scrollToPage(match.pageIndex + 1)
+  await nextTick()
+  const host = bodyHostRef.value
+  if (!host) return
+  activateDocxSearchMark(host, match.markId)
+  const mark = host.querySelector<HTMLElement>(`[data-match-id="${match.markId}"]`)
+  const container = scrollRef.value
+  if (!mark || !container) return
+  const top = mark.offsetTop - container.clientHeight * 0.3
+  container.scrollTo({ top: Math.max(0, top), behavior: 'smooth' })
+}
+
+const runSearch = async (query: string) => {
+  const host = bodyHostRef.value
+  if (!host || pageSections.value.length === 0) return { total: 0, index: -1 }
+  clearDocxSearchMarks(host)
+  const matches = searchDocxPages(pageSections.value, query)
+  searchMatches.value = matches
+  if (matches.length === 0) {
+    activeMatchIndex.value = -1
+    return { total: 0, index: -1 }
+  }
+  activeMatchIndex.value = 0
+  await scrollToMatch(matches[0])
+  return { total: matches.length, index: 0 }
+}
+
+const clearSearch = () => {
+  const host = bodyHostRef.value
+  if (host) clearDocxSearchMarks(host)
+  searchMatches.value = []
+  activeMatchIndex.value = -1
+}
+
+const gotoSearchMatch = async (direction: 1 | -1) => {
+  if (searchMatches.value.length === 0) return { total: 0, index: -1 }
+  const total = searchMatches.value.length
+  let next = activeMatchIndex.value + direction
+  if (next < 0) next = total - 1
+  if (next >= total) next = 0
+  activeMatchIndex.value = next
+  await scrollToMatch(searchMatches.value[next])
+  return { total, index: next }
+}
+
+const refitLayout = () => {
+  scrollRef.value?.scrollTo({ top: 0 })
+}
+
+watch(
+  () => props.src,
+  (src) => {
+    if (src) void loadDocument(src)
+    else resetViewer()
+  },
+  { immediate: true },
+)
+
+defineExpose({
+  totalPages,
+  scrollToPage,
+  runSearch,
+  clearSearch,
+  gotoSearchMatch,
+  refitLayout,
+})
+</script>
+
+<style scoped lang="scss">
+.docx-js-viewer {
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+  overflow: auto;
+  background: #e5e7eb;
+}
+
+.docx-body {
+  min-height: 100%;
+  padding: 12px;
+}
+
+.docx-style-host {
+  display: none;
+}
+
+.docx-scale-host {
+  display: inline-block;
+  min-width: 100%;
+}
+
+.docx-render-host {
+  background: transparent;
+}
+
+.docx-loading,
+.docx-legacy-tip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 240px;
+  color: #6b7280;
+  font-size: 14px;
+}
+
+:deep(.docx-wrapper) {
+  background: #e5e7eb;
+  padding: 0;
+}
+
+:deep(.docx-wrapper > section.docx) {
+  margin: 0 auto 16px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
+  background: #fff;
+}
+
+:deep(mark.docx-search-mark) {
+  background: rgba(255, 214, 0, 0.42);
+  border-radius: 2px;
+  padding: 0 1px;
+}
+
+:deep(mark.docx-search-mark--active) {
+  background: rgba(255, 87, 34, 0.5);
+  box-shadow: 0 0 0 2px rgba(255, 87, 34, 0.75);
+}
+</style>

package/src/components/upload/ExcelJsViewer.vue

@@ -0,0 +1,270 @@
+<template>
+  <div ref="scrollRef" class="excel-js-viewer">
+    <div v-if="loading" class="excel-loading">正在解析表格…</div>
+    <div v-else-if="sheets.length === 0" class="excel-empty">表格为空或无法解析</div>
+    <div v-else class="excel-body">
+      <div class="excel-sheet-name">{{ activeSheet?.name }}</div>
+      <div class="excel-scale-host" :style="scaleHostStyle">
+        <table class="excel-table" :style="tableStyle">
+          <tbody>
+            <tr v-for="(row, rowIndex) in activeSheet?.rows || []" :key="rowIndex">
+              <td
+                v-for="cell in row"
+                :key="`${cell.row}-${cell.col}`"
+                :rowspan="cell.rowSpan"
+                :colspan="cell.colSpan"
+                :data-row="cell.row"
+                :data-col="cell.col"
+                :class="cellClass(cell)"
+              >
+                {{ cell.value }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, shallowRef, watch } from 'vue'
+import {
+  type ExcelPreviewCell,
+  type ExcelPreviewSheet,
+  type ExcelSearchMatch,
+  parseExcelWorkbook,
+  searchExcelSheets,
+} from '../../utils/excelPreviewUtil.ts'
+
+const props = withDefaults(
+  defineProps<{
+    src?: Blob | ArrayBuffer
+    scale?: number
+  }>(),
+  { scale: 1 },
+)
+
+const emit = defineEmits<{
+  loaded: []
+  error: [err?: unknown]
+  'page-change': [page: number]
+}>()
+
+const scrollRef = ref<HTMLElement | null>(null)
+const sheets = shallowRef<ExcelPreviewSheet[]>([])
+const loading = ref(false)
+const currentSheet = ref(1)
+const searchMatches = ref<ExcelSearchMatch[]>([])
+const activeMatchIndex = ref(-1)
+
+const totalPages = ref(0)
+const activeSheet = computed(() => sheets.value[currentSheet.value - 1])
+
+const userScale = computed(() => props.scale ?? 1)
+const tableStyle = computed(() => ({
+  transform: `scale(${userScale.value})`,
+  transformOrigin: 'top left',
+}))
+const scaleHostStyle = computed(() => {
+  const sheet = activeSheet.value
+  if (!sheet) return {}
+  const rowCount = sheet.rows.length || 1
+  const colCount = Math.max(...sheet.rows.map((row) => row.length), 1)
+  const baseWidth = colCount * 96 + 32
+  const baseHeight = rowCount * 28 + 48
+  return {
+    width: `${baseWidth * userScale.value}px`,
+    height: `${baseHeight * userScale.value}px`,
+  }
+})
+
+const activeMatch = computed(() =>
+  activeMatchIndex.value >= 0 ? searchMatches.value[activeMatchIndex.value] : null,
+)
+
+const cellClass = (cell: ExcelPreviewCell) => {
+  const classes: string[] = []
+  const hasMatch = searchMatches.value.some(
+    (m) => m.sheetIndex === currentSheet.value - 1 && m.row === cell.row && m.col === cell.col,
+  )
+  if (hasMatch) classes.push('excel-cell--match')
+  if (
+    activeMatch.value &&
+    activeMatch.value.sheetIndex === currentSheet.value - 1 &&
+    activeMatch.value.row === cell.row &&
+    activeMatch.value.col === cell.col
+  ) {
+    classes.push('excel-cell--active')
+  }
+  if (classes.length === 0) return undefined
+  return classes
+}
+
+const resetViewer = () => {
+  sheets.value = []
+  totalPages.value = 0
+  currentSheet.value = 1
+  searchMatches.value = []
+  activeMatchIndex.value = -1
+  loading.value = false
+}
+
+const loadWorkbook = async (src: Blob | ArrayBuffer) => {
+  loading.value = true
+  try {
+    sheets.value = await parseExcelWorkbook(src)
+    totalPages.value = sheets.value.length
+    currentSheet.value = 1
+    emit('page-change', 1)
+    emit('loaded')
+  } catch (err) {
+    emit('error', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+const scrollToCell = async (match: ExcelSearchMatch) => {
+  const targetSheet = match.sheetIndex + 1
+  if (currentSheet.value !== targetSheet) {
+    currentSheet.value = targetSheet
+    emit('page-change', targetSheet)
+  }
+  await nextTick()
+  const container = scrollRef.value
+  const cellEl = container?.querySelector(
+    `td[data-row="${match.row}"][data-col="${match.col}"]`,
+  ) as HTMLElement | null
+  if (!container || !cellEl) return
+  const top = cellEl.offsetTop - container.clientHeight * 0.3
+  container.scrollTo({ top: Math.max(0, top), behavior: 'smooth' })
+}
+
+const scrollToPage = async (pageNum: number) => {
+  const target = Math.min(Math.max(1, pageNum), totalPages.value || 1)
+  currentSheet.value = target
+  emit('page-change', target)
+  await nextTick()
+  scrollRef.value?.scrollTo({ top: 0, behavior: 'smooth' })
+}
+
+const runSearch = async (query: string) => {
+  const matches = searchExcelSheets(sheets.value, query)
+  searchMatches.value = matches
+  if (matches.length === 0) {
+    activeMatchIndex.value = -1
+    return { total: 0, index: -1 }
+  }
+  activeMatchIndex.value = 0
+  await scrollToCell(matches[0])
+  return { total: matches.length, index: 0 }
+}
+
+const clearSearch = () => {
+  searchMatches.value = []
+  activeMatchIndex.value = -1
+}
+
+const gotoSearchMatch = async (direction: 1 | -1) => {
+  if (searchMatches.value.length === 0) return { total: 0, index: -1 }
+  const total = searchMatches.value.length
+  let next = activeMatchIndex.value + direction
+  if (next < 0) next = total - 1
+  if (next >= total) next = 0
+  activeMatchIndex.value = next
+  await scrollToCell(searchMatches.value[next])
+  return { total, index: next }
+}
+
+const refitLayout = () => {
+  scrollRef.value?.scrollTo({ top: 0 })
+}
+
+watch(
+  () => props.src,
+  (src) => {
+    resetViewer()
+    if (src) void loadWorkbook(src)
+  },
+  { immediate: true },
+)
+
+defineExpose({
+  totalPages,
+  scrollToPage,
+  runSearch,
+  clearSearch,
+  gotoSearchMatch,
+  refitLayout,
+})
+</script>
+
+<style scoped lang="scss">
+.excel-js-viewer {
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+  overflow: auto;
+  background: #f5f5f5;
+}
+
+.excel-body {
+  min-height: 100%;
+  padding: 12px;
+}
+
+.excel-sheet-name {
+  margin: 0 0 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #374151;
+}
+
+.excel-scale-host {
+  display: inline-block;
+  min-width: 100%;
+}
+
+.excel-table {
+  border-collapse: collapse;
+  background: #fff;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.excel-table td {
+  min-width: 72px;
+  max-width: 280px;
+  padding: 6px 10px;
+  border: 1px solid #e5e7eb;
+  color: #111827;
+  vertical-align: top;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+
+.excel-table tr:nth-child(even) td {
+  background: #fafafa;
+}
+
+.excel-cell--match {
+  background: rgba(255, 214, 0, 0.35) !important;
+}
+
+.excel-cell--active {
+  background: rgba(255, 87, 34, 0.45) !important;
+  box-shadow: inset 0 0 0 2px rgba(255, 87, 34, 0.75);
+}
+
+.excel-loading,
+.excel-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 240px;
+  color: #6b7280;
+  font-size: 14px;
+}
+</style>