adtec-core-package 3.1.7 → 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.7",
+  "version": "3.1.8",
   "private": false,
   "type": "module",
   "exports": {

package/src/components/upload/ExcelJsViewer.vue

@@ -1,13 +1,26 @@
 <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">
+  <div class="excel-js-viewer">
+    <div ref="scrollRef" class="excel-grid-scroll">
+      <div v-if="loading" class="excel-loading">正在解析表格…</div>
+      <div v-else-if="sheets.length === 0" class="excel-empty">表格为空或无法解析</div>
+      <div v-else class="excel-scale-host" :style="scaleHostStyle">
         <table class="excel-table" :style="tableStyle">
+          <thead>
+            <tr>
+              <th class="excel-corner" />
+              <th
+                v-for="col in columnHeaders"
+                :key="col"
+                class="excel-col-header"
+                :style="{ minWidth: `${getColWidth(col)}px`, width: `${getColWidth(col)}px` }"
+              >
+                {{ toExcelColumnLabel(col) }}
+              </th>
+            </tr>
+          </thead>
           <tbody>
             <tr v-for="(row, rowIndex) in activeSheet?.rows || []" :key="rowIndex">
+              <th class="excel-row-header">{{ (row[0]?.row ?? rowIndex) + 1 }}</th>
               <td
                 v-for="cell in row"
                 :key="`${cell.row}-${cell.col}`"
@@ -16,6 +29,8 @@
                 :data-row="cell.row"
                 :data-col="cell.col"
                 :class="cellClass(cell)"
+                :style="cellInlineStyle(cell)"
+                @click="selectCell(cell)"
               >
                 {{ cell.value }}
               </td>
@@ -24,6 +39,24 @@
         </table>
       </div>
     </div>
+
+    <div v-if="sheets.length > 1" class="excel-sheet-tabs">
+      <button
+        v-for="(sheet, index) in sheets"
+        :key="sheet.name + index"
+        type="button"
+        class="excel-sheet-tab"
+        :class="{ 'is-active': currentSheet === index + 1 }"
+        @click="switchSheet(index + 1)"
+      >
+        {{ sheet.name }}
+      </button>
+    </div>
+
+    <div v-if="sheets.length > 0 && !loading" class="excel-zoom-float">
+      <button type="button" class="excel-zoom-btn" title="放大" @click="emit('zoom-in')">+</button>
+      <button type="button" class="excel-zoom-btn" title="缩小" @click="emit('zoom-out')">−</button>
+    </div>
   </div>
 </template>
 
@@ -33,8 +66,10 @@ import {
   type ExcelPreviewCell,
   type ExcelPreviewSheet,
   type ExcelSearchMatch,
+  cellStyleToCss,
   parseExcelWorkbook,
   searchExcelSheets,
+  toExcelColumnLabel,
 } from '../../utils/excelPreviewUtil.ts'
 
 const props = withDefaults(
@@ -49,6 +84,8 @@ const emit = defineEmits<{
   loaded: []
   error: [err?: unknown]
   'page-change': [page: number]
+  'zoom-in': []
+  'zoom-out': []
 }>()
 
 const scrollRef = ref<HTMLElement | null>(null)
@@ -57,10 +94,19 @@ const loading = ref(false)
 const currentSheet = ref(1)
 const searchMatches = ref<ExcelSearchMatch[]>([])
 const activeMatchIndex = ref(-1)
+const selectedCell = ref<{ row: number; col: number } | null>(null)
 
 const totalPages = ref(0)
 const activeSheet = computed(() => sheets.value[currentSheet.value - 1])
 
+const columnHeaders = computed(() => {
+  const sheet = activeSheet.value
+  if (!sheet) return []
+  const cols: number[] = []
+  for (let c = sheet.startCol; c <= sheet.endCol; c++) cols.push(c)
+  return cols
+})
+
 const userScale = computed(() => props.scale ?? 1)
 const tableStyle = computed(() => ({
   transform: `scale(${userScale.value})`,
@@ -70,11 +116,11 @@ 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
+  const colCount = columnHeaders.value.length || 1
+  const baseWidth = columnHeaders.value.reduce((sum, col) => sum + getColWidth(col), 42)
+  const baseHeight = rowCount * 24 + 28
   return {
-    width: `${baseWidth * userScale.value}px`,
+    width: `${Math.max(baseWidth, colCount * 72 + 42) * userScale.value}px`,
     height: `${baseHeight * userScale.value}px`,
   }
 })
@@ -83,6 +129,8 @@ const activeMatch = computed(() =>
   activeMatchIndex.value >= 0 ? searchMatches.value[activeMatchIndex.value] : null,
 )
 
+const getColWidth = (col: number) => activeSheet.value?.colWidths[col] ?? 72
+
 const cellClass = (cell: ExcelPreviewCell) => {
   const classes: string[] = []
   const hasMatch = searchMatches.value.some(
@@ -97,8 +145,32 @@ const cellClass = (cell: ExcelPreviewCell) => {
   ) {
     classes.push('excel-cell--active')
   }
-  if (classes.length === 0) return undefined
-  return classes
+  if (
+    selectedCell.value &&
+    selectedCell.value.row === cell.row &&
+    selectedCell.value.col === cell.col
+  ) {
+    classes.push('excel-cell--selected')
+  }
+  return classes.length > 0 ? classes : undefined
+}
+
+const cellInlineStyle = (cell: ExcelPreviewCell) => {
+  const css = cellStyleToCss(cell.style)
+  if (cell.width) {
+    css.minWidth = `${cell.width}px`
+    css.width = `${cell.width}px`
+    css.maxWidth = `${Math.max(cell.width, 280)}px`
+  }
+  return css
+}
+
+const selectCell = (cell: ExcelPreviewCell) => {
+  selectedCell.value = { row: cell.row, col: cell.col }
+}
+
+const switchSheet = async (sheetIndex: number) => {
+  await scrollToPage(sheetIndex)
 }
 
 const resetViewer = () => {
@@ -107,6 +179,7 @@ const resetViewer = () => {
   currentSheet.value = 1
   searchMatches.value = []
   activeMatchIndex.value = -1
+  selectedCell.value = null
   loading.value = false
 }
 
@@ -116,6 +189,7 @@ const loadWorkbook = async (src: Blob | ArrayBuffer) => {
     sheets.value = await parseExcelWorkbook(src)
     totalPages.value = sheets.value.length
     currentSheet.value = 1
+    selectedCell.value = null
     emit('page-change', 1)
     emit('loaded')
   } catch (err) {
@@ -138,15 +212,17 @@ const scrollToCell = async (match: ExcelSearchMatch) => {
   ) 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 left = cellEl.offsetLeft - container.clientWidth * 0.2
+  container.scrollTo({ top: Math.max(0, top), left: Math.max(0, left), behavior: 'smooth' })
 }
 
 const scrollToPage = async (pageNum: number) => {
   const target = Math.min(Math.max(1, pageNum), totalPages.value || 1)
   currentSheet.value = target
+  selectedCell.value = null
   emit('page-change', target)
   await nextTick()
-  scrollRef.value?.scrollTo({ top: 0, behavior: 'smooth' })
+  scrollRef.value?.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
 }
 
 const runSearch = async (query: string) => {
@@ -178,7 +254,7 @@ const gotoSearchMatch = async (direction: 1 | -1) => {
 }
 
 const refitLayout = () => {
-  scrollRef.value?.scrollTo({ top: 0 })
+  scrollRef.value?.scrollTo({ top: 0, left: 0 })
 }
 
 watch(
@@ -202,51 +278,94 @@ defineExpose({
 
 <style scoped lang="scss">
 .excel-js-viewer {
+  position: relative;
+  display: flex;
   flex: 1;
+  flex-direction: column;
   width: 100%;
   min-height: 0;
-  overflow: auto;
-  background: #f5f5f5;
-}
-
-.excel-body {
-  min-height: 100%;
-  padding: 12px;
+  background: #e6e6e6;
 }
 
-.excel-sheet-name {
-  margin: 0 0 8px;
-  font-size: 13px;
-  font-weight: 600;
-  color: #374151;
+.excel-grid-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  background: #e6e6e6;
 }
 
 .excel-scale-host {
   display: inline-block;
   min-width: 100%;
+  padding: 0;
 }
 
 .excel-table {
-  border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 0;
   background: #fff;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
-  font-size: 13px;
-  line-height: 1.4;
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.excel-corner,
+.excel-col-header,
+.excel-row-header {
+  position: sticky;
+  z-index: 2;
+  background: #f0f0f0;
+  color: #444;
+  font-weight: 400;
+  text-align: center;
+  user-select: none;
+}
+
+.excel-corner {
+  top: 0;
+  left: 0;
+  z-index: 4;
+  width: 42px;
+  min-width: 42px;
+  border-right: 1px solid #c7c7c7;
+  border-bottom: 1px solid #c7c7c7;
+}
+
+.excel-col-header {
+  top: 0;
+  z-index: 3;
+  min-width: 72px;
+  height: 22px;
+  padding: 2px 6px;
+  border-right: 1px solid #d4d4d4;
+  border-bottom: 1px solid #c7c7c7;
+}
+
+.excel-row-header {
+  left: 0;
+  z-index: 2;
+  width: 42px;
+  min-width: 42px;
+  padding: 2px 4px;
+  border-right: 1px solid #c7c7c7;
+  border-bottom: 1px solid #d4d4d4;
 }
 
 .excel-table td {
   min-width: 72px;
-  max-width: 280px;
-  padding: 6px 10px;
-  border: 1px solid #e5e7eb;
+  max-width: 320px;
+  padding: 2px 6px;
+  border-right: 1px solid #d4d4d4;
+  border-bottom: 1px solid #d4d4d4;
   color: #111827;
-  vertical-align: top;
+  vertical-align: middle;
   word-break: break-word;
   white-space: pre-wrap;
+  background: #fff;
+  cursor: cell;
 }
 
-.excel-table tr:nth-child(even) td {
-  background: #fafafa;
+.excel-cell--selected {
+  box-shadow: inset 0 0 0 2px #217346 !important;
 }
 
 .excel-cell--match {
@@ -258,6 +377,61 @@ defineExpose({
   box-shadow: inset 0 0 0 2px rgba(255, 87, 34, 0.75);
 }
 
+.excel-sheet-tabs {
+  display: flex;
+  gap: 2px;
+  align-items: stretch;
+  min-height: 30px;
+  padding: 0 6px;
+  overflow-x: auto;
+  background: #f0f0f0;
+  border-top: 1px solid #c7c7c7;
+}
+
+.excel-sheet-tab {
+  flex-shrink: 0;
+  padding: 4px 14px;
+  border: none;
+  border-top: 2px solid transparent;
+  background: #e2e2e2;
+  color: #333;
+  font-size: 12px;
+  cursor: pointer;
+
+  &.is-active {
+    background: #fff;
+    border-top-color: #217346;
+    font-weight: 600;
+  }
+}
+
+.excel-zoom-float {
+  position: absolute;
+  right: 16px;
+  bottom: 42px;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.excel-zoom-btn {
+  width: 34px;
+  height: 34px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  color: #333;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+
+  &:hover {
+    background: #fff;
+  }
+}
+
 .excel-loading,
 .excel-empty {
   display: flex;

package/src/components/upload/OfficePreview.vue

@@ -11,7 +11,7 @@
         :search-index="searchMatchIndex"
         :search-total="searchMatchTotal"
         :show-search="showSearch"
-        :show-page-nav="showPageNav"
+        :show-page-nav="showPageNav && officeType !== 'excel'"
         :show-zoom="showZoom"
         :show-download="showDownload"
         :show-refresh="showRefresh"
@@ -55,6 +55,8 @@
           @loaded="handleRendered"
           @error="handleError"
           @page-change="previewCurrentPage = $event"
+          @zoom-in="zoomIn"
+          @zoom-out="zoomOut"
         />
         <docx-js-viewer
           v-else-if="officeType === 'docx' && !previewAsPdf"