@wanghe1995/docx-editor-ui-lite 1.0.3 → 1.0.4

package/fonts/material-icons/material-icons.css

@@ -0,0 +1,23 @@
+/* Material Icons Local Font */
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url('./material-icons.woff2') format('woff2');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 0.9em;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wanghe1995/docx-editor-ui-lite",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "DocxEditor 精简版UI库（Lite）",
   "author": "wanghe",
   "license": "MIT",
@@ -20,6 +20,8 @@
   },
   "files": [
     "dist",
+    "static",
+    "fonts",
     "README.md",
     "package.json"
   ],
@@ -27,7 +29,7 @@
     "dev": "vite --config vite.config.ts",
     "clean": "node -e \"const fs = require('fs'); if(fs.existsSync('dist')) fs.rmSync('dist', {recursive: true})\"",
     "build": "npm run clean && tsc && vite build --config vite.config.ts --mode lib",
-    "build:ui": "vite build --config vite.config.deploy.ts",
+    "build:ui": "vite build --config vite.config.ts --mode ui",
     "lint": "eslint .",
     "type:check": "tsc --noEmit"
   },

package/static/css/style.css

@@ -0,0 +1,115 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+html, body { height: 100%; overflow: auto; }
+body { font-family: 'Microsoft YaHei', '微软雅黑', 'Google Sans', Roboto, Arial, sans-serif; background: #f1f3f4; display: flex; flex-direction: column; min-height: 100vh; }
+
+.top-fixed-area { position: sticky; top: 0; z-index: 100; background: #fff; }
+
+.menu-bar { display: flex; align-items: center; background: #fff; padding: 8px 12px; border-bottom: 1px solid #dadce0; }
+.menu-bar .logo { width: 40px; height: 40px; margin-right: 12px; display: flex; align-items: center; justify-content: center; }
+.menu-bar .doc-info { flex: 1; min-width: 0; }
+.doc-title-row { display: flex; align-items: center; width: fit-content; max-width: 100%; }
+.menu-bar .doc-title { font-size: 18px; font-weight: 500; color: #202124; border: none; outline: none; padding: 4px 8px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.menu-bar .doc-title:hover { background: #f1f3f4; }
+.menu-bar .menu-items { display: flex; gap: 4px; margin-top: 4px; }
+.menu-bar .menu-item { padding: 4px 8px; font-size: 13px; color: #5f6368; cursor: pointer; border-radius: 4px; position: relative; }
+.menu-bar .menu-item:hover { background: #f1f3f4; }
+
+.dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid #dadce0; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); min-width: 180px; z-index: 200; padding: 4px 0; }
+.dropdown-menu.show { display: block; }
+.dropdown-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px; font-size: 13px; color: #3c4043; cursor: pointer; white-space: nowrap; }
+.dropdown-item:hover { background: #edf2fa; }
+.dropdown-item .shortcut-hint { font-size: 12px; color: #80868b; margin-left: 24px; }
+.dropdown-separator { height: 1px; background: #dadce0; margin: 4px 0; }
+.dropdown-item .sub-arrow { margin-left: auto; font-size: 12px; color: #80868b; }
+.dropdown-submenu { display: none; position: absolute; left: 100%; top: 0; background: #fff; border: 1px solid #dadce0; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); min-width: 200px; z-index: 201; padding: 4px 0; }
+.dropdown-item:hover > .dropdown-submenu { display: block; }
+
+.toolbar { display: flex; align-items: center; background: #edf2fa; padding: 4px 12px; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid #dadce0; }
+.toolbar-divider { width: 1px; height: 24px; background: #dadce0; margin: 0 4px; }
+.toolbar-btn { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 4px; cursor: pointer; font-size: 18px; color: #444746; position: relative; }
+.toolbar-btn:hover { background: #d3e3fd; }
+.toolbar-btn[title]:hover::after { content: attr(title); position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); background: #3c4043; color: #fff; font-size: 11px; padding: 4px 8px; border-radius: 4px; white-space: nowrap; z-index: 1000; }
+.toolbar-select { height: 32px; padding: 0 8px; border: none; background: transparent; border-radius: 4px; font-size: 13px; color: #444746; cursor: pointer; outline: none; }
+.toolbar-select:hover { background: #d3e3fd; }
+.color-picker { width: 32px; height: 32px; padding: 4px; border: none; background: transparent; border-radius: 4px; cursor: pointer; }
+.color-picker:hover { background: #d3e3fd; }
+
+.body-area { display: flex; flex: 1; min-height: 0; }
+
+.catalog-sidebar { width: 0; overflow: hidden; background: #fff; border-right: 1px solid #dadce0; transition: width 0.2s ease; flex-shrink: 0; margin-left: 8px; }
+.catalog-sidebar.open { width: 300px; }
+.catalog-sidebar-inner { height: 100%; display: flex; flex-direction: column; }
+.catalog-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #e8eaed; }
+.catalog-header h3 { font-size: 14px; font-weight: 500; color: #202124; }
+.catalog-close { background: none; border: none; cursor: pointer; color: #5f6368; font-size: 18px; padding: 2px; border-radius: 4px; }
+.catalog-close:hover { background: #f1f3f4; }
+.catalog-tree { flex: 1; overflow-y: auto; padding: 8px 0; }
+.catalog-empty { padding: 20px 12px; font-size: 13px; color: #80868b; text-align: center; }
+
+.catalog-node { padding: 4px 8px; cursor: pointer; border-radius: 4px; margin: 1px 8px; font-size: 13px; color: #3c4043; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.catalog-node:hover { background: #edf2fa; }
+.catalog-node.level-1 { font-weight: 500; font-size: 14px; }
+.catalog-node.level-2 { padding-left: 20px; }
+.catalog-node.level-3 { padding-left: 32px; }
+.catalog-node.level-4 { padding-left: 44px; }
+.catalog-node.level-5 { padding-left: 56px; }
+.catalog-node.level-6 { padding-left: 68px; }
+
+.editor-wrapper { display: flex; justify-content: center; padding: 20px; flex: 1; overflow-y: auto; min-height: 0; }
+#editor-container { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
+
+.status-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #dadce0; padding: 4px 12px; font-size: 12px; color: #5f6368; display: flex; justify-content: space-between; z-index: 50; align-items: center; }
+.status-left { display: flex; align-items: center; gap: 12px; }
+.status-right { display: flex; align-items: center; gap: 4px; }
+.status-btn { background: none; border: none; color: #5f6368; font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 3px; }
+.status-btn:hover { background: #f1f3f4; }
+.status-icon-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; }
+.status-divider { width: 1px; height: 14px; background: #dadce0; }
+.zoom-display { min-width: 36px; text-align: center; font-size: 12px; color: #444746; }
+.catalog-toggle-label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; }
+.catalog-toggle-label input[type="checkbox"] { margin: 0; cursor: pointer; }
+.catalog-toggle-label span { font-size: 12px; }
+.paper-size-wrap { position: relative; }
+.paper-size-dropdown { display: none; position: absolute; bottom: 100%; left: 0; background: #fff; border: 1px solid #dadce0; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); min-width: 180px; max-height: 240px; overflow-y: auto; z-index: 200; padding: 4px 0; margin-bottom: 4px; }
+.paper-size-dropdown.show { display: block; }
+.paper-size-item { padding: 6px 12px; font-size: 12px; color: #3c4043; cursor: pointer; white-space: nowrap; }
+.paper-size-item:hover { background: #edf2fa; }
+.paper-size-item.active { background: #d3e3fd; color: #1a73e8; font-weight: 500; }
+
+.popup-panel { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); padding: 20px; z-index: 1000; min-width: 320px; }
+.popup-panel.show { display: block; }
+.popup-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); z-index: 999; }
+.popup-overlay.show { display: block; }
+.popup-title { font-size: 16px; font-weight: 500; margin-bottom: 16px; }
+.popup-row { margin-bottom: 12px; }
+.popup-row label { display: block; font-size: 13px; color: #5f6368; margin-bottom: 4px; }
+.popup-row input, .popup-row select { width: 100%; padding: 8px 12px; border: 1px solid #dadce0; border-radius: 4px; font-size: 14px; }
+.popup-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
+.popup-btn { padding: 8px 20px; border: none; border-radius: 4px; font-size: 14px; cursor: pointer; }
+.popup-btn-primary { background: #1a73e8; color: #fff; }
+.popup-btn-primary:hover { background: #1557b0; }
+.popup-btn-secondary { background: #f1f3f4; color: #3c4043; }
+.popup-btn-secondary:hover { background: #e8eaed; }
+
+.zoom-control { display: flex; align-items: center; gap: 4px; }
+.zoom-value { font-size: 13px; color: #444746; min-width: 40px; text-align: center; }
+
+.shortcuts-content { max-height: 60vh; overflow-y: auto; padding: 0 8px; }
+.shortcut-group { margin-bottom: 20px; }
+.shortcut-group h3 { margin: 0 0 10px 0; font-size: 15px; font-weight: 600; color: #202124; padding-bottom: 8px; border-bottom: 1px solid #e8eaed; }
+.shortcut-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #5f6368; padding: 3px 0; }
+.shortcut-row kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 6px; background: #f1f3f4; border: 1px solid #dadce0; border-radius: 4px; font-size: 12px; font-family: inherit; color: #202124; margin: 0 2px; }
+
+.save-indicator { display: inline-flex; align-items: center; font-size: 12px; color: #80868b; margin-left: 12px; }
+.save-indicator.saving { color: #1a73e8; }
+
+.import-notification { position: fixed; bottom: 60px; right: 20px; background: #fff; border: 1px solid #dadce0; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); padding: 16px; z-index: 500; min-width: 280px; display: none; }
+.import-notification.show { display: block; }
+.import-notification h4 { font-size: 14px; font-weight: 500; margin-bottom: 8px; color: #202124; }
+.import-notification p { font-size: 12px; color: #5f6368; margin-bottom: 12px; }
+.import-notification .import-actions { display: flex; gap: 8px; justify-content: flex-end; }
+.import-notification .import-btn { padding: 6px 16px; border: none; border-radius: 4px; font-size: 13px; cursor: pointer; min-width: 64px; }
+.import-notification .import-btn-primary { background: #1a73e8; color: #fff; }
+.import-notification .import-btn-primary:hover { background: #1557b0; }
+.import-notification .import-btn-secondary { background: #f1f3f4; color: #3c4043; }
+.import-notification .import-btn-secondary:hover { background: #e8eaed; }

package/static/js/app.js

@@ -0,0 +1,418 @@
+import { WordEditor, RowFlex, TitleLevel, ListType, ListStyle, parseDocx } from '../../src/editor/index.ts'
+
+const testData = {
+  main: []
+}
+
+let documentMeta = {
+  id: 'DEU' + Array.from({length: 4}, () => Math.random().toString(16).slice(2).toUpperCase().padEnd(4, '0').slice(0, 4)).join(''),
+  name: '新建文档',
+  createdAt: new Date().toISOString(),
+  submittedAt: ''
+}
+
+let importModeResolver = null
+
+const editor = new WordEditor({
+  container: '#editor-container',
+  data: testData,
+  options: {
+    width: 794,
+    height: 1123,
+    margins: [96, 120, 96, 120],
+    defaultFont: '微软雅黑',
+    defaultSize: 14,
+    marginIndicatorDisabled: true,
+    lineBreak: { disabled: false, color: '#AAAAAA' }
+  },
+  onPageChange: (pageNo) => {
+    const el = document.getElementById('status-page')
+    if (el) el.textContent = `第 ${pageNo} 页`
+  },
+  onChange: () => {
+    updateWordCount()
+    debounceRefreshCatalog()
+  },
+  onScaleChange: (scale) => {
+    const pct = `${Math.round(scale * 100)}%`
+    document.getElementById('zoom-value').textContent = pct
+    const statusZoom = document.getElementById('status-zoom')
+    if (statusZoom) statusZoom.textContent = pct
+  }
+})
+
+function updateWordCount() {
+  try {
+    const result = editor.command.getWordCount()
+    const count = result?.count ?? 0
+    document.getElementById('status-words').textContent = `${count} 字`
+  } catch (e) {
+    // ignore
+  }
+}
+
+setTimeout(() => updateWordCount(), 500)
+
+window.editor = editor
+window.RowFlex = RowFlex
+window.TitleLevel = TitleLevel
+window.ListType = ListType
+window.ListStyle = ListStyle
+
+window.execCmd = (cmd, ...args) => {
+  try {
+    focusEditorAgent()
+    editor.command[cmd](...args)
+  } catch (e) { console.error(`执行失败: ${cmd}`, e) }
+}
+
+function focusEditorAgent() {
+  try {
+    const container = document.getElementById('editor-container')
+    const agentDom = container?.querySelector('textarea')
+    if (agentDom && typeof agentDom.focus === 'function') {
+      agentDom.focus()
+    }
+  } catch (e) { /* ignore */ }
+}
+
+window.setRowFlex = (flex) => { editor.command.executeRowFlex(RowFlex[flex]) }
+window.setTitle = (level) => {
+  if (!level) { editor.command.executeTitle(null); return }
+  const levels = {
+    '1': TitleLevel.FIRST, '2': TitleLevel.SECOND, '3': TitleLevel.THIRD,
+    '4': TitleLevel.FOURTH, '5': TitleLevel.FIFTH, '6': TitleLevel.SIXTH
+  }
+  editor.command.executeTitle(levels[level])
+}
+window.setList = (type) => {
+  if (type === 'OL') { editor.command.executeList(ListType.OL, ListStyle.DECIMAL) }
+  else { editor.command.executeList(ListType.UL, ListStyle.DISC) }
+}
+window.setLineHeight = (value) => { editor.command.executeLineHeight(parseFloat(value)) }
+
+window.showPopup = (id) => { document.getElementById('popup-overlay').classList.add('show'); document.getElementById(id).classList.add('show') }
+window.closePopup = () => { document.getElementById('popup-overlay').classList.remove('show'); document.querySelectorAll('.popup-panel').forEach(p => p.classList.remove('show')) }
+
+window.insertTable = () => showPopup('table-popup')
+window.confirmInsertTable = () => { const rows = parseInt(document.getElementById('table-rows').value) || 3; const cols = parseInt(document.getElementById('table-cols').value) || 4; editor.command.executeInsertTable(rows, cols); closePopup() }
+
+window.insertHyperlink = () => showPopup('link-popup')
+window.confirmInsertLink = () => { const text = document.getElementById('link-text').value; const url = document.getElementById('link-url').value; if (url) { editor.command.executeHyperlink({ type: 'hyperlink', value: text || url, url }); } closePopup() }
+
+window.insertImage = () => {
+  const input = document.createElement('input'); input.type = 'file'; input.accept = 'image/*'
+  input.onchange = (e) => {
+    const file = e.target.files[0]; if (!file) return
+    const reader = new FileReader()
+    reader.onload = (event) => {
+      const img = new Image(); img.onload = () => { const maxWidth = 400; const scale = img.width > maxWidth ? maxWidth / img.width : 1; editor.command.executeImage({ value: event.target.result, width: img.width * scale, height: img.height * scale }) }; img.src = event.target.result
+    }
+    reader.readAsDataURL(file)
+  }
+  input.click()
+}
+
+window.searchReplace = () => showPopup('search-popup')
+window.doSearch = () => { const text = document.getElementById('search-text').value; if (text) { const result = editor.command.executeSearch(text); alert(`找到 ${result?.count || 0} 处匹配`) } }
+window.doReplace = () => { const search = document.getElementById('search-text').value; const replace = document.getElementById('replace-text').value; if (search) { editor.command.executeReplace(replace) } }
+window.doReplaceAll = () => { const search = document.getElementById('search-text').value; const replace = document.getElementById('replace-text').value; if (search) { editor.command.executeSearch(search); let count = 0; while (editor.command.executeReplace(replace)) { count++; if (count > 1000) break; } alert(`已替换 ${count} 处`) } }
+
+window.showShortcutsDialog = () => showPopup('shortcuts-popup')
+
+// 菜单下拉交互
+let activeDropdown = null
+document.addEventListener('click', (e) => {
+  if (activeDropdown) {
+    activeDropdown.classList.remove('show')
+    activeDropdown = null
+  }
+  const menuItem = e.target.closest('.menu-item')
+  if (menuItem) {
+    const dropdown = menuItem.querySelector('.dropdown-menu')
+    if (dropdown) {
+      e.stopPropagation()
+      if (dropdown !== activeDropdown) {
+        if (activeDropdown) activeDropdown.classList.remove('show')
+        dropdown.classList.add('show')
+        activeDropdown = dropdown
+      }
+    }
+  }
+})
+
+// 确保编辑器保持焦点（core快捷键监听在agentDom上）
+const editorContainer = document.getElementById('editor-container')
+if (editorContainer) {
+  const focusEditor = () => {
+    try {
+      const agentDom = editor.instance?.command?.__proxyGetAgentDom?.() 
+        || editorContainer.querySelector('textarea')
+      if (agentDom && typeof agentDom.focus === 'function') {
+        agentDom.focus()
+      }
+    } catch (e) { /* ignore */ }
+  }
+
+  document.addEventListener('mousedown', (e) => {
+    const target = e.target
+    if (target && !editorContainer.contains(target) && !target.closest('.toolbar') && !target.closest('.menu-bar') && !target.closest('.popup-panel') && !target.closest('.status-bar') && !target.closest('.catalog-sidebar')) {
+      setTimeout(focusEditor, 0)
+    }
+  })
+}
+
+// 快捷键全局监听
+const editorContainerEl = document.getElementById('editor-container')
+document.addEventListener('keydown', (e) => {
+  // 如果事件已被core库处理（焦点在编辑器内），则跳过编辑器内置快捷键
+  const inEditor = editorContainerEl && editorContainerEl.contains(e.target)
+  const ctrl = e.ctrlKey || e.metaKey
+  const shift = e.shiftKey
+  const key = e.key.toLowerCase()
+
+  // 应用级快捷键（始终拦截）
+  if (ctrl && key === 's') { e.preventDefault(); handleSave(); return }
+  if (ctrl && key === 'p') { e.preventDefault(); execCmd('executePrint'); return }
+  if (ctrl && key === 'f') { e.preventDefault(); searchReplace(); return }
+  if (ctrl && key === 'h') { e.preventDefault(); searchReplace(); return }
+
+  // 编辑器内置快捷键：仅焦点不在编辑器时兜底处理
+  if (inEditor) return
+  if (ctrl && !shift && key === 'z') { e.preventDefault(); execCmd('executeUndo'); return }
+  if (ctrl && shift && key === 'z') { e.preventDefault(); execCmd('executeRedo'); return }
+  if (ctrl && key === 'y') { e.preventDefault(); execCmd('executeRedo'); return }
+  if (ctrl && key === 'b') { e.preventDefault(); execCmd('executeBold'); return }
+  if (ctrl && key === 'i') { e.preventDefault(); execCmd('executeItalic'); return }
+  if (ctrl && key === 'u') { e.preventDefault(); execCmd('executeUnderline'); return }
+  if (ctrl && key === 'k') { e.preventDefault(); insertHyperlink(); return }
+  if (ctrl && key === '\\') { e.preventDefault(); execCmd('executeFormat'); return }
+  if (ctrl && key === 'enter') { e.preventDefault(); execCmd('executePageBreak'); return }
+})
+
+// 保存功能
+window.handleSave = () => {
+  const indicator = document.getElementById('save-indicator')
+  try {
+    const content = editor.command.getValue()
+    if (!content) return
+    const snapshot = { meta: { ...documentMeta }, content }
+    documentMeta.submittedAt = new Date().toISOString()
+    indicator.textContent = '保存中...'
+    indicator.classList.add('saving')
+    setTimeout(() => {
+      indicator.textContent = `已保存 ${formatTime(new Date())}`
+      indicator.classList.remove('saving')
+      console.log('[save] 保存快照:', snapshot)
+    }, 300)
+  } catch (e) {
+    indicator.textContent = '保存失败'
+    indicator.classList.remove('saving')
+    console.error('保存失败:', e)
+  }
+}
+
+function formatTime(date) {
+  return `${String(date.getHours()).padStart(2,'0')}:${String(date.getMinutes()).padStart(2,'0')}:${String(date.getSeconds()).padStart(2,'0')}`
+}
+
+// 导入文档功能
+window.handleImportDoc = () => {
+  const input = document.createElement('input')
+  input.type = 'file'
+  input.accept = '.docx,.doc'
+  input.onchange = (e) => {
+    const file = e.target.files[0]
+    if (!file) return
+    const fileSize = file.size < 1024 * 1024
+      ? `${(file.size / 1024).toFixed(1)} KB`
+      : `${(file.size / 1024 / 1024).toFixed(1)} MB`
+
+    const notification = document.getElementById('import-notification')
+    document.getElementById('import-info').textContent = `${file.name} (${fileSize})`
+    notification.classList.add('show')
+
+    importModeResolver = (mode) => {
+      notification.classList.remove('show')
+      if (mode === 'cancel') return
+
+      const hex = () => Math.random().toString(16).slice(2).toUpperCase().padEnd(4, '0').slice(0, 4)
+      const newId = 'DEU' + hex() + hex() + hex() + hex()
+      documentMeta.id = newId
+      documentMeta.name = file.name.replace(/\.\w+$/, '')
+      const titleInput = document.getElementById('doc-title')
+      titleInput.value = documentMeta.name
+      titleInput.title = documentMeta.name
+
+      const reader = new FileReader()
+      reader.onload = async (event) => {
+        try {
+          const arrayBuffer = event.target.result
+          const result = await parseDocx(arrayBuffer)
+
+          if (!result.success || !result.elements || result.elements.length === 0) {
+            alert('文档解析失败: ' + (result.error || '未知错误'))
+            return
+          }
+
+          if (mode === 'overwrite') {
+            editor.command.executeSetValue({ main: result.elements })
+          } else {
+            const current = editor.command.getValue()
+            const currentElements = current?.data?.main || current?.main || []
+            const merged = [...currentElements, ...result.elements]
+            editor.command.executeSetValue({ main: merged })
+          }
+
+          updateWordCount()
+          refreshCatalog()
+          handleSave()
+        } catch (err) {
+          console.error('导入失败:', err)
+          alert('导入失败: ' + (err.message || '未知错误'))
+        }
+      }
+      reader.readAsArrayBuffer(file)
+    }
+  }
+  input.click()
+}
+
+window.handleImportAction = (mode) => {
+  if (importModeResolver) {
+    const resolver = importModeResolver
+    importModeResolver = null
+    resolver(mode)
+  }
+}
+
+// 文档标题同步
+document.getElementById('doc-title').addEventListener('input', (e) => {
+  documentMeta.name = e.target.value
+  e.target.title = e.target.value
+})
+
+// 目录功能
+const levelOrderMap = {
+  first: 1, second: 2, third: 3, fourth: 4, fifth: 5, sixth: 6
+}
+
+let catalogOpen = true
+let catalogRefreshTimer = null
+
+const debounceRefreshCatalog = () => {
+  if (catalogRefreshTimer) clearTimeout(catalogRefreshTimer)
+  catalogRefreshTimer = setTimeout(() => refreshCatalog(), 1000)
+}
+
+async function refreshCatalog() {
+  try {
+    const catalog = await editor.command.getCatalog()
+    renderCatalog(Array.isArray(catalog) ? catalog : [])
+  } catch (e) {
+    // ignore
+  }
+}
+
+function getLevelNumber(level) {
+  if (typeof level === 'number') return level
+  return levelOrderMap[level] || 1
+}
+
+function renderCatalog(catalog) {
+  const treeEl = document.getElementById('catalog-tree')
+  const emptyEl = document.getElementById('catalog-empty')
+
+  treeEl.querySelectorAll('.catalog-node').forEach(n => n.remove())
+
+  if (!catalog || catalog.length === 0) {
+    emptyEl.style.display = 'block'
+    return
+  }
+  emptyEl.style.display = 'none'
+
+  const renderItems = (items) => {
+    for (const item of items) {
+      const node = document.createElement('div')
+      node.className = `catalog-node level-${getLevelNumber(item.level)}`
+      node.textContent = item.name || ''
+      node.title = item.name || ''
+      if (item.id) {
+        node.addEventListener('click', () => {
+          try { editor.command.executeLocationCatalog(item.id) } catch (e) { console.error('定位失败:', e) }
+        })
+      }
+      treeEl.appendChild(node)
+      if (item.subCatalog && item.subCatalog.length > 0) {
+        renderItems(item.subCatalog)
+      }
+    }
+  }
+  renderItems(catalog)
+}
+
+window.toggleCatalog = (checked) => {
+  catalogOpen = typeof checked === 'boolean' ? checked : !catalogOpen
+  const sidebar = document.getElementById('catalog-sidebar')
+  const cb = document.getElementById('catalog-toggle-cb')
+  if (catalogOpen) {
+    sidebar.classList.add('open')
+    if (cb) cb.checked = true
+    refreshCatalog()
+  } else {
+    sidebar.classList.remove('open')
+    if (cb) cb.checked = false
+  }
+}
+
+// 初始化时打开目录并刷新
+setTimeout(() => {
+  const sidebar = document.getElementById('catalog-sidebar')
+  if (sidebar) sidebar.classList.add('open')
+  refreshCatalog()
+}, 800)
+
+// 纸张方向切换
+let paperDirection = 'vertical'
+window.togglePaperDirection = () => {
+  paperDirection = paperDirection === 'vertical' ? 'horizontal' : 'vertical'
+  document.getElementById('paper-direction-btn').textContent = paperDirection === 'vertical' ? '纵向' : '横向'
+  try {
+    editor.command.executePaperDirection(paperDirection)
+  } catch (e) { console.error('切换纸张方向失败:', e) }
+}
+
+// 纸张大小选择
+let paperSizeMenuOpen = false
+window.togglePaperSizeMenu = () => {
+  paperSizeMenuOpen = !paperSizeMenuOpen
+  const dropdown = document.getElementById('paper-size-dropdown')
+  if (paperSizeMenuOpen) {
+    dropdown.classList.add('show')
+  } else {
+    dropdown.classList.remove('show')
+  }
+}
+
+document.addEventListener('click', (e) => {
+  if (paperSizeMenuOpen && !e.target.closest('.paper-size-wrap')) {
+    paperSizeMenuOpen = false
+    document.getElementById('paper-size-dropdown').classList.remove('show')
+  }
+})
+
+window.setPaperSize = (width, height, label) => {
+  document.getElementById('paper-size-btn').textContent = label
+  paperSizeMenuOpen = false
+  document.getElementById('paper-size-dropdown').classList.remove('show')
+  document.querySelectorAll('.paper-size-item').forEach(item => {
+    item.classList.toggle('active', item.dataset.label === label)
+  })
+  try {
+    const w = paperDirection === 'horizontal' ? height : width
+    const h = paperDirection === 'horizontal' ? width : height
+    editor.command.executePaperSize(w, h)
+  } catch (e) { console.error('设置纸张大小失败:', e) }
+}
+
+console.log('DocxEditor UI Lite 初始化成功！')