adtec-core-package 3.1.6 → 3.1.8

package/package/src/assets/base.css

@@ -0,0 +1,86 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/package/src/assets/main.css

@@ -0,0 +1,35 @@
+@import './base.css';
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+  padding: 3px;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}

package/package/src/components/editor-main/src/extensions/bookmark.js

@@ -0,0 +1,110 @@
+import { Mark, mergeAttributes } from '@tiptap/core'
+import { TextSelection } from '@tiptap/pm/state'
+
+import { shortId } from '../utils/short-id'
+
+// 书签格式 创建一个书签
+export default Mark.create({
+  name: 'bookmark',
+  priority: 1000,
+  keepOnSplit: false,
+  exitable: true,
+  addOptions() {
+    return {
+      bookmarkName: '',
+      class: 'umo-editor-bookmark',
+    }
+  },
+  addAttributes() {
+    return {
+      bookmarkName: {
+        default: 'bookmarkName',
+      },
+      class: {
+        default: this.options.class,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'bookmark',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['bookmark', mergeAttributes(this.options, HTMLAttributes), 0]
+  },
+
+  addCommands() {
+    return {
+      // 设置书签 若书签有选中区域数据 否则默认值为书签名称
+      setBookmark:
+        (attributes) =>
+        ({ chain, editor }) => {
+          try {
+            chain().setMark(this.name, attributes).run()
+            const { empty } = editor.state.selection
+            if (empty && attributes.bookmarkName) {
+              chain().focus().insertContent(attributes.bookmarkName).run()
+            }
+            return true
+          } catch (e) {
+            return false
+          }
+        },
+      focusBookmark:
+        (bookmarkName) =>
+        ({ editor, tr }) => {
+          if (bookmarkName) {
+            const element = editor.view.dom.querySelector(
+              `bookmark[bookmarkName="${bookmarkName}"]`,
+            )
+            if (element) {
+              element.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center',
+                inline: 'nearest',
+              })
+              const pos = editor.view.posAtDOM(element, 0)
+              if (tr) {
+                tr.setSelection(new TextSelection(tr.doc.resolve(pos)))
+                editor.view.dispatch(tr)
+                editor.view.focus()
+              }
+            }
+            return true
+          } else return false
+        },
+      getAllBookmarks:
+        (callback) =>
+        ({ editor }) => {
+          const bookmarkData = []
+          try {
+            const alltext = editor.getHTML()
+            const parser = new DOMParser()
+            const doc = parser.parseFromString(alltext, 'text/html')
+            // 获取所有的 <bookmark> 元素
+            const bookmarks = doc.body.querySelectorAll(this.name)
+            const keyNode = []
+            Array.from(bookmarks).forEach((node) => {
+              if (node !== null) {
+                const bookName = node.getAttribute('bookmarkName')
+                if (bookName && !keyNode.includes(bookName)) {
+                  keyNode.push(bookName)
+                  bookmarkData.push({
+                    bookmarkRowId: shortId(),
+                    bookmarkRowName: bookName,
+                  })
+                }
+              }
+            })
+          } catch (e) {}
+          callback(bookmarkData)
+          return true
+        },
+    }
+  },
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adtec-core-package",
-  "version": "3.1.6",
+  "version": "3.1.8",
   "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>