jvs-ppt-ui 0.0.8 → 0.0.10

package/src/components/PptEditor.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick, useSlots, getCurrentInstance, defineAsyncComponent, type Ref } from 'vue'
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick, useSlots, getCurrentInstance, defineAsyncComponent, toRaw, type Ref } from 'vue'
 import jvsPickerColorV3 from 'jvs-picker-color-v3'
 import '../assets/iconfont/iconfont.js'
 import { saveAs } from 'file-saver'
@@ -33,6 +33,8 @@ const props = withDefaults(defineProps<PptEditorProps>(), {
   modelValue: null,
   readonly: false,
   showHeader: true,
+  showMenu: true,
+  toolbarMode: 'auto',
   showSidebarLeft: true,
   showSidebarRight: true,
   enableMcp: false,
@@ -63,6 +65,7 @@ const emit = defineEmits<{
 const slidesState = useSlides()
 const {
   slides,
+  slidesRevision,
   activeIndex,
   activeSlide,
   presentationTitle,
@@ -211,8 +214,10 @@ if (props.config?.title) {
 function getDeck(): DeckData {
   return {
     title: presentationTitle.value || '未命名演示文稿',
-    slides: JSON.parse(JSON.stringify(slides.value || [])),
-    slideMasters: JSON.parse(JSON.stringify(slideMasters.value || [])),
+    // toRaw 序列化：避免 stringify 遍历响应式代理时把调用方的 active effect 订阅到整册
+    // （曾在 computed 里调用 getDeck 导致拖拽每步都整册深拷贝，页数越多越卡）
+    slides: JSON.parse(JSON.stringify(toRaw(slides.value) || [])),
+    slideMasters: JSON.parse(JSON.stringify(toRaw(slideMasters.value) || [])),
     themeClrScheme: themeClrScheme.value,
     slideRatio: slideRatio.value,
     slideHeight: slideHeight.value,
@@ -769,16 +774,14 @@ function scheduleEmitDeck() {
   }, 300)
 }
 
-// 监听内部 slides 变化，向外部同步（拖拽/变形交互期间冻结，避免高频触发几十毫秒的深拷贝序列化）
-watch(
-  () => slides.value,
-  () => {
-    if (isInternalUpdating) return
-    if (isCanvasDragging?.value || pauseHistory?.value) return
-    scheduleEmitDeck()
-  },
-  { deep: true }
-)
+// 监听内部 slides 变化，向外部同步（拖拽/变形交互期间冻结，避免高频触发几十毫秒的深拷贝序列化）。
+// 用 slidesRevision 版本号替代 slides deep watch：deep watch 每次变更都要整册深遍历重收集依赖，
+// 100+ 页文档拖拽时每步移动都遍历全册（实测每步数百 ms）；版本号由 useSlides 在各变更点 bump，O(1)
+watch(slidesRevision, () => {
+  if (isInternalUpdating) return
+  if (isCanvasDragging?.value || pauseHistory?.value) return
+  scheduleEmitDeck()
+})
 
 // 拖拽/变形结束后，立即冲刷防抖中的对外同步
 watch([() => isCanvasDragging?.value, () => pauseHistory?.value], ([isDragging, isPaused], [prevDragging, prevPaused]) => {
@@ -869,7 +872,10 @@ const slots = useSlots()
 // 顶部工具栏插槽作用域上下文数据
 const headerSlotContext = computed(() => ({
   api: editorApi,
-  deck: getDeck(),
+  // deck 必须走 getter：直接 getDeck() 会让 JSON.stringify 遍历整棵响应式树，本 computed 因此
+  // 订阅全册所有属性——拖拽/打字每步都重算并整册深拷贝（110 页实测每步 ~500ms）。getter 只在
+  // 宿主真正读取 deck 时才现算；且去掉 stringify 订阅后，本 computed 不再随页内元素变更失效
+  get deck() { return getDeck() },
   slides: slidesState.slides.value,
   activeSlide: slidesState.activeSlide.value || null,
   activeIndex: slidesState.activeIndex.value,
@@ -895,6 +901,18 @@ const headerSlotContext = computed(() => ({
 // 对外通过 ref 暴露所有方法
 defineExpose(editorApi)
 
+const computedShowMenu = computed(() => {
+  if (props.showMenu !== undefined) return props.showMenu
+  if (props.config?.showMenu !== undefined) return props.config.showMenu
+  return true
+})
+
+const computedToolbarMode = computed(() => {
+  if (props.toolbarMode !== undefined) return props.toolbarMode
+  if (props.config?.toolbarMode !== undefined) return props.config.toolbarMode
+  return 'auto'
+})
+
 onMounted(async () => {
   // 触发 ready 事件
   emit('ready', editorApi)
@@ -928,7 +946,7 @@ onMounted(async () => {
   <div class="app-container jvs-ppt-editor-root" :class="{ 'is-readonly': readonly }">
     <!-- Main top Navigation bar (支持完整 header 插槽替换或精细区域插槽定制) -->
     <slot name="header" v-bind="headerSlotContext">
-      <Header ref="headerRef" v-show="showHeader" :slot-props="headerSlotContext">
+      <Header ref="headerRef" :visible="showHeader" :show-menu="computedShowMenu" :toolbar-mode="computedToolbarMode" :slot-props="headerSlotContext">
         <!-- 左侧前置 (Logo、返回按钮等) -->
         <template v-if="slots['header-left-prefix']" #left-prefix="sp">
           <slot name="header-left-prefix" v-bind="sp"></slot>

package/src/components/PresentationMode.vue

@@ -634,6 +634,26 @@ function getElementBorderWidth(el: any): number {
   return 0
 }
 
+// 顶层文本"随文字调整大小"(autoFit=shape / width|height=auto)：
+// 画布(CanvasArea 顶层容器)按此规则用 auto 尺寸让文本框随内容撑开，横排撑高、竖排撑宽。
+// 放映侧若钉死 style.height 渲染，画布里已撑开的文本会被压回 PPTX 原始小盒子 → 看起来拉伸/被裁
+function isAutoSizeText(el: any): boolean {
+  if (el.type !== 'text') return false
+  if (el.isMaster || el.placeholder || el.isPlaceholder) return false
+  if ((el.content || '').includes('<table') || !!el.latex) return false
+  return true
+}
+function isAutoSizeHeightText(el: any): boolean {
+  if (!isAutoSizeText(el)) return false
+  if (el.style?.writingMode === 'vertical-rl' || el.style?.writingMode === 'vertical-lr') return false
+  return el.autoFit?.type === 'shape' || el.style?.height === 'auto'
+}
+function isAutoSizeWidthText(el: any): boolean {
+  if (!isAutoSizeText(el)) return false
+  if (el.style?.writingMode !== 'vertical-rl' && el.style?.writingMode !== 'vertical-lr') return false
+  return el.autoFit?.type === 'shape' || el.style?.width === 'auto'
+}
+
 // 组内子元素按 order / style.zIndex 升序 = 视觉层级顺序（与 CanvasArea sortGroupElements 一致）
 function sortGroupChildren(elements: any[]): any[] {
   if (!Array.isArray(elements) || elements.length <= 1) return elements || []
@@ -1177,8 +1197,8 @@ function getSafeShapeText(el: any): string {
               position: 'absolute',
               top: el.style.top,
               left: el.style.left,
-              width: el.style?.width || 'auto',
-              height: el.style?.height || 'auto',
+              width: isAutoSizeWidthText(el) ? 'auto' : (el.style?.width || 'auto'),
+              height: isAutoSizeHeightText(el) ? 'auto' : (el.style?.height || 'auto'),
               zIndex: 3,
               transform: `rotate(${el.style.rotate || 0}deg) scale(${el.type !== 'text' && el.type !== 'line' && ((el.style as any)?.flipH || el.flipH || el.isFlipH) ? -1 : 1}, ${el.type !== 'text' && el.type !== 'line' && ((el.style as any)?.flipV || el.flipV || el.isFlipV) ? -1 : 1})`,
               opacity: (el.style as any).opacity !== undefined ? (el.style as any).opacity : 1,
@@ -1253,7 +1273,7 @@ function getSafeShapeText(el: any): string {
                   flexDirection: el.style.verticalAlign ? 'column' : undefined,
                   justifyContent: (el.style.verticalAlign === 'middle' || el.style.verticalAlign === 'mid') ? 'center' : ((el.style.verticalAlign === 'bottom' || el.style.verticalAlign === 'down') ? 'flex-end' : undefined),
                   writingMode: (el.style.writingMode as any) || 'horizontal-tb',
-                  height: el.style.height || (el.style.verticalAlign || el.content.includes('<table') || el.latex ? '100%' : 'auto'),
+                  height: isAutoSizeHeightText(el) ? 'auto' : (el.style.height || (el.style.verticalAlign || el.content.includes('<table') || el.latex ? '100%' : 'auto')),
                   zoom: (el.autoFit?.type === 'text' && el.autoFit?.fontScale) ? (el.autoFit.fontScale / 100) : 1,
                   transform: 'none',
                   transformOrigin: 'top left',
@@ -1728,7 +1748,7 @@ function getSafeShapeText(el: any): string {
                     flexDirection: el.style.verticalAlign ? 'column' : undefined,
                     justifyContent: (el.style.verticalAlign === 'middle' || el.style.verticalAlign === 'mid') ? 'center' : ((el.style.verticalAlign === 'bottom' || el.style.verticalAlign === 'down') ? 'flex-end' : undefined),
                     writingMode: (el.style as any).writingMode || 'horizontal-tb',
-                    height: el.style.height || (el.style.verticalAlign || el.content.includes('<table') || el.latex ? '100%' : 'auto'),
+                    height: isAutoSizeHeightText(el) ? 'auto' : (el.style.height || (el.style.verticalAlign || el.content.includes('<table') || el.latex ? '100%' : 'auto')),
                     zoom: (el.autoFit?.type === 'text' && el.autoFit?.fontScale) ? (el.autoFit.fontScale / 100) : 1,
                     transform: 'none',
                     '--paragraphSpace': `${(el.style as any).paragraphSpace === undefined ? 3 : (el.style as any).paragraphSpace}px`

package/src/components/SidebarRight.vue

@@ -322,6 +322,7 @@ function getStyleVal(prop: string, fallback: any = ''): any {
     else if (prop === 'fill' && el.fill) val = el.fill
     else if (prop === 'borderColor' && el.borderColor) val = el.borderColor
     else if (prop === 'fontFamily' && el.fontFamily) val = el.fontFamily
+    else if (prop === 'lineHeight') val = el.lineHeight || el.text?.lineHeight
   }
   if (prop === 'textAlign' && !val) {
     const htmlContent = el.content || (typeof el.text === 'string' ? el.text : el.text?.content) || ''
@@ -1174,7 +1175,7 @@ function handleUndockToPopover() {
 
 <template>
   <!-- Right Sidebar: Inspector Panel -->
-  <aside class="sidebar sidebar-right">
+  <aside class="sidebar sidebar-right" :class="{ 'sidebar-wide-material': activeTab === 'material' || activeTab === 'library' }">
     <!-- Sidebar Header -->
     <div class="panel-tabs" style="align-items: center; justify-content: space-between; padding: 0 16px;">
       <span style="font-size: 14px; font-weight: 600; color: var(--text-primary);">{{ sidebarTitle }}</span>
@@ -2043,6 +2044,12 @@ function handleUndockToPopover() {
   display: flex;
   flex-direction: column;
   height: 100%;
+  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &.sidebar-wide-material {
+    width: 380px !important;
+    max-width: 90vw;
+  }
 }
 
 .material-undock-btn {

package/src/components/SvgChart.vue

@@ -388,12 +388,15 @@ const linePaths = computed<LinePath[]>(() => {
   const max = maxVal.value
 
   return datasets.value.map((ds, j) => {
-    const points = ds.data.map((val, i) => {
+    const points = (ds.data || []).map((val, i) => {
       const x = padding.value.left + i * dx
       const y = padding.value.top + chartHeight.value - (val / max) * chartHeight.value
       return { x, y, val }
     })
 
+    // 空数据系列会拼出 dLine="M "、dArea="M  L ..."，触发浏览器 <path> attribute d 控制台报错；整组跳过
+    if (points.length === 0) return null
+
     const linePointsStr = points.map(p => `${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' L ')
     const dLine = `M ${linePointsStr}`
 
@@ -409,7 +412,7 @@ const linePaths = computed<LinePath[]>(() => {
       color: chartColors.value[j % chartColors.value.length],
       points
     }
-  })
+  }).filter((lp): lp is LinePath => lp !== null)
 })
 
 // Radar Grid levels and axis vectors