adtec-core-package 3.1.8 → 3.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adtec-core-package",
-  "version": "3.1.8",
+  "version": "3.1.9",
   "private": false,
   "type": "module",
   "exports": {
@@ -82,6 +82,7 @@
     "es-drager": "1.2.11",
     "exceljs": "4.4.0",
     "fast-glob": "3.3.3",
+    "fflate": "^0.3.8",
     "file-saver": "2.0.5",
     "hotkeys-js": "4.0.2",
     "jsbarcode": "3.12.3",

package/src/components/upload/FileView.vue

@@ -5,7 +5,7 @@
 <template>
   <Teleport to="body" v-if="model">
     <div
-      v-loading="loading"
+      v-loading="showOverlayLoading"
       element-loading-text="加载中，请稍后。。。"
       class="file-view-overlay"
     >
@@ -86,11 +86,16 @@ const isHeaderPreview = computed(() =>
   isHeaderPreviewFile(undefined, title.value, url.value),
 )
 
+/** 富文本预览由 OfficePreview 自带 loading，避免与 v-loading 双层转圈 */
+const showOverlayLoading = computed(() => loading.value && !isHeaderPreview.value)
+
 watch(
   [model, url],
   ([visible, fileUrl]) => {
     if (visible && fileUrl) {
-      loading.value = true
+      if (!isHeaderPreview.value) {
+        loading.value = true
+      }
       previewScale.value = 1
     } else if (!visible) {
       loading.value = false

package/src/components/upload/OfficePreview.vue

@@ -71,7 +71,7 @@
           @error="handleError"
           @page-change="previewCurrentPage = $event"
         />
-        <div v-if="isPreviewLoading" class="office-rich-loading">
+        <div v-if="isPreviewLoading && !fileSrc" class="office-rich-loading">
           <div class="loading-card">
             <span class="loading-spinner" />
             <p class="loading-title">{{ loadingMessage }}</p>

package/src/components/upload/PdfJsViewer.vue

@@ -43,7 +43,7 @@ import {
 import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf.mjs'
 import pdfWorker from 'pdfjs-dist/legacy/build/pdf.worker.mjs?url'
 import { searchPdfDocument, type PdfSearchMatch } from '../../utils/pdfSearchUtil'
-import { computePdfDefaultFitScale } from '../../utils/officePreviewUtil.ts'
+import { computePdfDefaultFitScale, buildPdfJsLoadOptions } from '../../utils/officePreviewUtil.ts'
 
 pdfjsLib.GlobalWorkerOptions.workerSrc = pdfWorker
 
@@ -667,7 +667,7 @@ const loadPdf = async (src: Blob | ArrayBuffer) => {
     const data = await toArrayBuffer(src)
     if (token !== loadToken) return
 
-    const loadingTask = pdfjsLib.getDocument({ data })
+    const loadingTask = pdfjsLib.getDocument(buildPdfJsLoadOptions(data))
     activeTask = loadingTask
     const doc = await loadingTask.promise
     if (token !== loadToken) return

package/src/utils/excelPreviewUtil.ts

@@ -1,4 +1,5 @@
 import * as XLSX from 'xlsx-js-style'
+import { unzipSync } from 'fflate'
 
 export interface ExcelPreviewCellStyle {
   backgroundColor?: string
@@ -43,7 +44,14 @@ export interface ExcelSearchMatch {
 
 type ColorStyle = { rgb?: string; theme?: number; tint?: number; indexed?: number }
 
-/** Excel 默认主题色（Office 2013+） */
+type WorkbookStyles = {
+  Fonts?: Array<Record<string, unknown>>
+  Fills?: Array<Record<string, unknown>>
+  Borders?: Array<Record<string, unknown>>
+  CellXf?: Array<Record<string, unknown>>
+}
+
+/** Excel 默认主题色（Office 2013+，含 accent / hyperlink） */
 const EXCEL_THEME_COLORS: Record<number, string> = {
   0: '#FFFFFF',
   1: '#000000',
@@ -55,6 +63,68 @@ const EXCEL_THEME_COLORS: Record<number, string> = {
   7: '#FFC000',
   8: '#5B9BD5',
   9: '#70AD47',
+  10: '#0563C1',
+  11: '#954F72',
+}
+
+/** Excel 标准 indexed 色板（常用前 16 色） */
+const INDEXED_COLORS: Record<number, string> = {
+  0: '#000000',
+  1: '#FFFFFF',
+  2: '#FF0000',
+  3: '#00FF00',
+  4: '#0000FF',
+  5: '#FFFF00',
+  6: '#FF00FF',
+  7: '#00FFFF',
+  8: '#000000',
+  9: '#FFFFFF',
+  10: '#FF0000',
+  11: '#00FF00',
+  12: '#0000FF',
+  13: '#FFFF00',
+  14: '#FF00FF',
+  15: '#00FFFF',
+  16: '#800000',
+  17: '#008000',
+  18: '#000080',
+  19: '#808000',
+  20: '#800080',
+  21: '#008080',
+  22: '#C0C0C0',
+  23: '#808080',
+  24: '#9999FF',
+  25: '#993366',
+  26: '#FFFFCC',
+  27: '#CCFFFF',
+  28: '#660066',
+  29: '#FF8080',
+  30: '#0066CC',
+  31: '#CCCCFF',
+  40: '#00CCFF',
+  41: '#CCFFFF',
+  42: '#CCFFCC',
+  43: '#FFFF99',
+  44: '#99CCFF',
+  45: '#FF99CC',
+  46: '#CC99FF',
+  47: '#FFCC99',
+  48: '#3366FF',
+  49: '#33CCCC',
+  50: '#99CC00',
+  51: '#FFCC00',
+  52: '#FF9900',
+  53: '#FF6600',
+  54: '#666699',
+  55: '#969696',
+  56: '#003366',
+  57: '#339966',
+  58: '#003300',
+  59: '#333300',
+  60: '#993300',
+  61: '#993366',
+  62: '#333399',
+  63: '#333333',
 }
 
 const BORDER_WIDTH: Record<string, string> = {
@@ -69,6 +139,16 @@ const BORDER_WIDTH: Record<string, string> = {
 
 const DEFAULT_COL_WIDTH = 72
 
+const isOleXls = (buffer: ArrayBuffer) => {
+  const sig = new Uint8Array(buffer, 0, 4)
+  return sig[0] === 0xd0 && sig[1] === 0xcf && sig[2] === 0x11 && sig[3] === 0xe0
+}
+
+const isZipXlsx = (buffer: ArrayBuffer) => {
+  const sig = new Uint8Array(buffer, 0, 2)
+  return sig[0] === 0x50 && sig[1] === 0x4b
+}
+
 const hexToRgb = (hex: string) => {
   const normalized = hex.replace('#', '')
   const value =
@@ -106,8 +186,9 @@ const resolveColor = (color?: ColorStyle): string | undefined => {
     if (raw.length === 6) return `#${raw}`
     return undefined
   }
+  if (color.indexed != null) return INDEXED_COLORS[color.indexed]
   if (color.theme != null) {
-    const base = EXCEL_THEME_COLORS[color.theme] ?? '#FFFFFF'
+    const base = EXCEL_THEME_COLORS[color.theme] ?? '#000000'
     return color.tint ? applyTint(base, color.tint) : base
   }
   return undefined
@@ -116,63 +197,64 @@ const resolveColor = (color?: ColorStyle): string | undefined => {
 const resolveBorderSide = (side?: { style?: string; color?: ColorStyle }) => {
   if (!side?.style || side.style === 'none') return undefined
   const width = BORDER_WIDTH[side.style] ?? '1px'
-  const color = resolveColor(side.color) ?? '#d0d0d0'
+  const color = resolveColor(side.color) ?? '#000000'
   const lineStyle = side.style === 'dashed' ? 'dashed' : side.style === 'dotted' ? 'dotted' : 'solid'
   return `${width} ${lineStyle} ${color}`
 }
 
-const extractCellStyle = (cell?: XLSX.CellObject): ExcelPreviewCellStyle | undefined => {
-  const rawStyle = cell?.s
-  if (!rawStyle || typeof rawStyle === 'number') return undefined
-  const style = rawStyle as Record<string, unknown>
+const toNumber = (value: unknown, fallback = 0) => {
+  const num = Number(value)
+  return Number.isFinite(num) ? num : fallback
+}
+
+const isTruthy = (value: unknown) => value === true || value === 1 || value === '1'
+
+const styleFromParts = (parts: {
+  font?: Record<string, unknown>
+  fill?: Record<string, unknown>
+  border?: Record<string, unknown>
+  alignment?: Record<string, unknown>
+}): ExcelPreviewCellStyle | undefined => {
   const css: ExcelPreviewCellStyle = {}
 
-  const fill = style.fill as { patternType?: string; fgColor?: ColorStyle; bgColor?: ColorStyle } | undefined
+  const fill = parts.fill
   if (fill && fill.patternType !== 'none') {
-    const bg = resolveColor(fill.fgColor) || resolveColor(fill.bgColor)
-    if (bg) css.backgroundColor = bg
+    const fg = fill.fgColor as ColorStyle | undefined
+    const bg = fill.bgColor as ColorStyle | undefined
+    const background = resolveColor(fg) || resolveColor(bg)
+    if (background) css.backgroundColor = background
   }
 
-  const font = style.font as {
-    bold?: boolean
-    italic?: boolean
-    underline?: boolean | string
-    sz?: number | string
-    color?: ColorStyle
-  } | undefined
+  const font = parts.font
   if (font) {
-    if (font.bold) css.fontWeight = 'bold'
-    if (font.italic) css.fontStyle = 'italic'
+    if (isTruthy(font.bold)) css.fontWeight = 'bold'
+    if (isTruthy(font.italic)) css.fontStyle = 'italic'
     if (font.underline) css.textDecoration = 'underline'
     if (font.sz) css.fontSize = `${font.sz}pt`
-    const color = resolveColor(font.color)
+    const color = resolveColor(font.color as ColorStyle | undefined)
     if (color) css.color = color
   }
 
-  const alignment = style.alignment as {
-    horizontal?: string
-    vertical?: string
-    wrapText?: boolean
-  } | undefined
+  const alignment = parts.alignment
   if (alignment) {
-    if (alignment.horizontal && alignment.horizontal !== 'general') {
-      css.textAlign = alignment.horizontal as ExcelPreviewCellStyle['textAlign']
+    const horizontal = alignment.horizontal as string | undefined
+    if (horizontal && horizontal !== 'general') {
+      css.textAlign = horizontal as ExcelPreviewCellStyle['textAlign']
     }
-    if (alignment.vertical) {
+    const vertical = alignment.vertical as string | undefined
+    if (vertical) {
       css.verticalAlign =
-        alignment.vertical === 'center'
-          ? 'middle'
-          : (alignment.vertical as ExcelPreviewCellStyle['verticalAlign'])
+        vertical === 'center' ? 'middle' : (vertical as ExcelPreviewCellStyle['verticalAlign'])
     }
-    if (alignment.wrapText) css.whiteSpace = 'pre-wrap'
+    if (isTruthy(alignment.wrapText)) css.whiteSpace = 'pre-wrap'
   }
 
-  const border = style.border as Record<string, { style?: string; color?: ColorStyle }> | undefined
+  const border = parts.border
   if (border) {
-    const top = resolveBorderSide(border.top)
-    const right = resolveBorderSide(border.right)
-    const bottom = resolveBorderSide(border.bottom)
-    const left = resolveBorderSide(border.left)
+    const top = resolveBorderSide(border.top as { style?: string; color?: ColorStyle })
+    const right = resolveBorderSide(border.right as { style?: string; color?: ColorStyle })
+    const bottom = resolveBorderSide(border.bottom as { style?: string; color?: ColorStyle })
+    const left = resolveBorderSide(border.left as { style?: string; color?: ColorStyle })
     if (top) css.borderTop = top
     if (right) css.borderRight = right
     if (bottom) css.borderBottom = bottom
@@ -182,6 +264,83 @@ const extractCellStyle = (cell?: XLSX.CellObject): ExcelPreviewCellStyle | undef
   return Object.keys(css).length > 0 ? css : undefined
 }
 
+const resolveXfStyle = (
+  styles: WorkbookStyles | undefined,
+  xfIndex: number,
+): ExcelPreviewCellStyle | undefined => {
+  if (!styles?.CellXf?.length || xfIndex < 0) return undefined
+  const xf = styles.CellXf[xfIndex]
+  if (!xf) return undefined
+
+  const fontId = toNumber(xf.fontId ?? xf.fontid, 0)
+  const fillId = toNumber(xf.fillId ?? xf.fillid, 0)
+  const borderId = toNumber(xf.borderId ?? xf.borderid, 0)
+
+  return styleFromParts({
+    font: styles.Fonts?.[fontId] as Record<string, unknown> | undefined,
+    fill: styles.Fills?.[fillId] as Record<string, unknown> | undefined,
+    border: styles.Borders?.[borderId] as Record<string, unknown> | undefined,
+    alignment: xf.alignment as Record<string, unknown> | undefined,
+  })
+}
+
+/** xlsx-js-style 读入后 cell.s 往往只有 fill，字体/边框需用 XML 中的 s 索引关联 CellXf */
+const parseXlsxStyleIndexMaps = (buffer: ArrayBuffer, sheetCount: number) => {
+  if (!isZipXlsx(buffer) || sheetCount <= 0) return [] as Map<string, number>[]
+
+  try {
+    const files = unzipSync(new Uint8Array(buffer))
+    const decoder = new TextDecoder('utf-8')
+    const maps: Map<string, number>[] = []
+
+    for (let i = 0; i < sheetCount; i++) {
+      const path = `xl/worksheets/sheet${i + 1}.xml`
+      const xmlBytes = files[path]
+      const map = new Map<string, number>()
+      if (xmlBytes) {
+        const xml = decoder.decode(xmlBytes)
+        const cellTagRe = /<c\b([^>/]*)(?:\/>|>)/g
+        let match: RegExpExecArray | null
+        while ((match = cellTagRe.exec(xml))) {
+          const attrs = match[1]
+          const addr = attrs.match(/\br="([^"]+)"/)?.[1]
+          const styleIndex = attrs.match(/\bs="(\d+)"/)?.[1]
+          if (addr && styleIndex != null) {
+            map.set(addr, Number(styleIndex))
+          }
+        }
+      }
+      maps.push(map)
+    }
+    return maps
+  } catch {
+    return Array.from({ length: sheetCount }, () => new Map<string, number>())
+  }
+}
+
+const extractCellStyle = (
+  cell?: XLSX.CellObject,
+  styles?: WorkbookStyles,
+  xfIndex?: number,
+): ExcelPreviewCellStyle | undefined => {
+  if (styles && xfIndex != null && xfIndex >= 0) {
+    const resolved = resolveXfStyle(styles, xfIndex)
+    if (resolved) return resolved
+  }
+
+  if (typeof cell?.s === 'number' && styles) {
+    return resolveXfStyle(styles, cell.s)
+  }
+
+  const rawStyle = cell?.s
+  if (!rawStyle || typeof rawStyle !== 'object') return undefined
+
+  // cell.s 对象通常仅含 fill，作为兜底
+  return styleFromParts({
+    fill: rawStyle as Record<string, unknown>,
+  })
+}
+
 export const cellStyleToCss = (style?: ExcelPreviewCellStyle): Record<string, string> => {
   if (!style) return {}
   const css: Record<string, string> = {}
@@ -228,13 +387,23 @@ const parseColWidths = (sheet: XLSX.WorkSheet, startCol: number, endCol: number)
 
 export const parseExcelWorkbook = async (src: Blob | ArrayBuffer): Promise<ExcelPreviewSheet[]> => {
   const buffer = src instanceof Blob ? await src.arrayBuffer() : src
-  const workbook = XLSX.read(buffer, { type: 'array', cellDates: true, cellStyles: true })
-  return workbook.SheetNames.map((name) => {
+  const workbook = XLSX.read(buffer, {
+    type: 'array',
+    cellDates: true,
+    cellStyles: true,
+    ...(isOleXls(buffer) ? {} : {}),
+  })
+  const styles = workbook.Styles as WorkbookStyles | undefined
+  const styleIndexMaps = isZipXlsx(buffer)
+    ? parseXlsxStyleIndexMaps(buffer, workbook.SheetNames.length)
+    : []
+
+  return workbook.SheetNames.map((name, sheetIndex) => {
     const sheet = workbook.Sheets[name]
     const range = sheet?.['!ref'] ? XLSX.utils.decode_range(sheet['!ref']) : null
     return {
       name,
-      rows: buildSheetRows(sheet),
+      rows: buildSheetRows(sheet, styles, styleIndexMaps[sheetIndex]),
       startCol: range?.s.c ?? 0,
       endCol: range?.e.c ?? 0,
       colWidths: range ? parseColWidths(sheet, range.s.c, range.e.c) : {},
@@ -242,7 +411,11 @@ export const parseExcelWorkbook = async (src: Blob | ArrayBuffer): Promise<Excel
   })
 }
 
-const buildSheetRows = (sheet?: XLSX.WorkSheet): ExcelPreviewCell[][] => {
+const buildSheetRows = (
+  sheet?: XLSX.WorkSheet,
+  styles?: WorkbookStyles,
+  styleIndexMap?: Map<string, number>,
+): ExcelPreviewCell[][] => {
   if (!sheet || !sheet['!ref']) return []
   const range = XLSX.utils.decode_range(sheet['!ref'])
   const colWidths = parseColWidths(sheet, range.s.c, range.e.c)
@@ -268,13 +441,14 @@ const buildSheetRows = (sheet?: XLSX.WorkSheet): ExcelPreviewCell[][] => {
       const addr = XLSX.utils.encode_cell({ r, c })
       const cellObj = sheet[addr]
       const merge = mergeStarts.get(`${r},${c}`)
+      const xfIndex = styleIndexMap?.get(addr)
       row.push({
         value: formatCellValue(cellObj),
         row: r,
         col: c,
         rowSpan: merge?.rowSpan,
         colSpan: merge?.colSpan,
-        style: extractCellStyle(cellObj),
+        style: extractCellStyle(cellObj, styles, xfIndex),
         width: colWidths[c],
       })
     }

package/src/utils/officePreviewUtil.ts

@@ -120,3 +120,20 @@ export const isLegacyDocFile = (type?: string, name?: string, fileUrl?: string)
 /** 弹层等场景：使用 OfficePreview 内置标题栏（PDF / Word / Excel） */
 export const isHeaderPreviewFile = (type?: string, name?: string, fileUrl?: string) =>
   HEADER_PREVIEW_TYPES.has(toOfficePreviewType(type, name, fileUrl))
+
+const pdfAssetBase = () => {
+  const base = import.meta.env.BASE_URL || '/'
+  return base.endsWith('/') ? base : `${base}/`
+}
+
+/** pdf.js 加载参数：CJK 预览需 cMap；缺嵌入字体时尝试系统字体 */
+export const buildPdfJsLoadOptions = (data: ArrayBuffer) => {
+  const assetBase = pdfAssetBase()
+  return {
+    data,
+    useSystemFonts: true,
+    cMapUrl: `${assetBase}pdfjs/cmaps/`,
+    cMapPacked: true,
+    standardFontDataUrl: `${assetBase}pdfjs/standard_fonts/`,
+  }
+}