jvs-ppt-ui 0.0.15 → 0.0.17

package/src/components/SidebarLeft.vue

@@ -20,7 +20,9 @@ import {
   getElementBorderGradientCss,
   getGradientAngleDeg,
   getSvgGradientCoords,
-  isImagePlaceholder
+  isImagePlaceholder,
+  isElementPatternTile,
+  getElementPatternTileSize
 } from '../utils/canvas/elementStyles'
 import CanvasImageElement from './canvas/elements/CanvasImageElement.vue'
 
@@ -75,29 +77,59 @@ function observeThumbItem(el: HTMLElement | null, index: number) {
   if (!el || typeof IntersectionObserver === 'undefined') return
   if (!thumbObserver) {
     thumbObserver = new IntersectionObserver((entries) => {
+      let mutated = false
       entries.forEach(entry => {
         if (entry.isIntersecting) {
           const idx = Number((entry.target as HTMLElement).dataset.slideIndex)
           if (!isNaN(idx) && !renderedThumbIndexes.value.has(idx)) {
             renderedThumbIndexes.value.add(idx)
+            mutated = true
           }
         }
       })
+      if (mutated) {
+        renderedThumbIndexes.value = new Set(renderedThumbIndexes.value)
+      }
     }, {
       rootMargin: '300px 0px'
     })
   }
-  thumbObserver.observe(el)
+  if (!renderedThumbIndexes.value.has(index)) {
+    thumbObserver.observe(el)
+  }
 }
 
 watch(activeIndex, (newIdx) => {
   if (!renderedThumbIndexes.value.has(newIdx)) {
-    renderedThumbIndexes.value.add(newIdx)
+    const next = new Set(renderedThumbIndexes.value)
+    next.add(newIdx)
+    renderedThumbIndexes.value = next
   }
 })
 
-watch(() => slides.value.length, () => {
-  renderedThumbIndexes.value = new Set([0, 1, 2, 3, 4, 5, activeIndex.value])
+watch(() => slides.value.length, (newLen, oldLen) => {
+  const delta = typeof oldLen === 'number' ? newLen - oldLen : 0
+  const isBulkImport = typeof oldLen === 'number' && delta > 5 && activeIndex.value === 0
+  if (isBulkImport) {
+    if (thumbObserver) {
+      thumbObserver.disconnect()
+      thumbObserver = null
+    }
+    renderedThumbIndexes.value = new Set<number>([0, 1, 2, 3, 4, 5, activeIndex.value])
+    return
+  }
+  const next = new Set<number>([0, 1, 2, 3, 4, 5, activeIndex.value])
+  renderedThumbIndexes.value.forEach(idx => {
+    if (idx >= 0 && idx < newLen) {
+      next.add(idx)
+    }
+    if (delta > 0 && delta <= 5 && idx + delta >= 0 && idx + delta < newLen) {
+      next.add(idx + delta)
+    }
+  })
+  if (activeIndex.value - 1 >= 0) next.add(activeIndex.value - 1)
+  if (activeIndex.value + 1 < newLen) next.add(activeIndex.value + 1)
+  renderedThumbIndexes.value = next
 })
 
 onUnmounted(() => {
@@ -744,6 +776,7 @@ const addSlideWithLayout = (layoutId: string) => {
     newSlide.subtitle = ''
   }
 
+  activeSlideVersion.value++
   presetPopoverVisible.value = false
 }
 
@@ -1035,6 +1068,22 @@ function getElementWidthHeight(el: any, parentGroup?: any, anchorGroup?: any): {
   return { width, height }
 }
 
+function getShapePatternTransform(el: any, isTriangle = false): string | undefined {
+  if (!isElementPatternTile(el)) return undefined
+  const dim = getElementWidthHeight(el)
+  const w = Math.max(1, dim.width || 100)
+  const h = Math.max(1, dim.height || 100)
+  if (isTriangle) {
+    return `scale(${+(100 / w).toFixed(4)}, ${+(100 / h).toFixed(4)})`
+  }
+  const vbW = el.viewBox ? el.viewBox[0] : 200
+  const vbH = el.viewBox ? el.viewBox[1] : 200
+  const bw = el.shapType === 'arc' ? 0 : (el.style?.borderWidth ? parseFloat(el.style.borderWidth) : 2)
+  const effW = Math.max(1, w - bw)
+  const effH = Math.max(1, h - bw)
+  return `scale(${+(vbW / effW).toFixed(4)}, ${+(vbH / effH).toFixed(4)})`
+}
+
 function getTextStrokeStyle(el: any) {
   if (!el.style || !el.style.enableTextStroke) return 'none'
   const width = el.style.textStrokeWidth || '1px'
@@ -2290,8 +2339,9 @@ const masterGroupedLayouts = computed(() => {
                     height: '100%',
                     backgroundColor: getElementPattern(el) ? 'transparent' : ((getElementGradientCss(el) || (getElementFill(el) !== undefined && getElementFill(el) !== 'none')) ? (getElementGradientCss(el) ? 'transparent' : getElementFill(el)) : (getElementFill(el) === 'none' ? 'transparent' : '#3b82f6')),
                     backgroundImage: getElementPattern(el) ? `url('${getElementPattern(el)}')` : (getElementGradientCss(el) || 'none'),
-                    backgroundSize: getElementPattern(el) ? 'cover' : undefined,
-                    backgroundPosition: getElementPattern(el) ? 'center center' : undefined,
+                    backgroundSize: getElementPattern(el) ? (isElementPatternTile(el) ? `${getElementPatternTileSize(el).w}px ${getElementPatternTileSize(el).h}px` : 'cover') : undefined,
+                    backgroundPosition: getElementPattern(el) ? (isElementPatternTile(el) ? '0 0' : 'center center') : undefined,
+                    backgroundRepeat: getElementPattern(el) ? (isElementPatternTile(el) ? 'repeat' : 'no-repeat') : undefined,
                     borderRadius: '50%',
                     borderWidth: el.style?.borderWidth || '0px',
                     borderStyle: el.style?.borderStyle || 'solid',
@@ -2302,8 +2352,16 @@ const masterGroupedLayouts = computed(() => {
                     :viewBox="`0 0 ${el.viewBox ? el.viewBox[0] : (el.width || 200)} ${el.viewBox ? el.viewBox[1] : (el.height || 200)}`"
                     preserveAspectRatio="none" style="width: 100%; height: 100%; display: block; overflow: visible;">
                     <defs>
-                      <pattern v-if="getElementPattern(el)" :id="`thumb-master-pat-${slide.id || index}-${el.id}`" width="100%" height="100%" patternContentUnits="objectBoundingBox">
-                        <image :href="getElementPattern(el)" width="1" height="1" preserveAspectRatio="none" />
+                      <pattern v-if="getElementPattern(el)" :id="`thumb-master-pat-${slide.id || index}-${el.id}`"
+                        :width="isElementPatternTile(el) ? getElementPatternTileSize(el).w : '100%'"
+                        :height="isElementPatternTile(el) ? getElementPatternTileSize(el).h : '100%'"
+                        :patternUnits="isElementPatternTile(el) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+                        :patternContentUnits="isElementPatternTile(el) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+                        :patternTransform="getShapePatternTransform(el, false)">
+                        <image :href="getElementPattern(el)"
+                          :width="isElementPatternTile(el) ? getElementPatternTileSize(el).w : 1"
+                          :height="isElementPatternTile(el) ? getElementPatternTileSize(el).h : 1"
+                          preserveAspectRatio="none" />
                       </pattern>
                       <template v-if="getElementGradientConfig(el)">
                         <radialGradient v-if="getElementGradientConfig(el)!.path && getElementGradientConfig(el)!.path !== 'line'"
@@ -2345,7 +2403,9 @@ const masterGroupedLayouts = computed(() => {
                   <div v-else :style="{
                     backgroundColor: getElementPattern(el) ? 'transparent' : ((getElementGradientCss(el) || (getElementFill(el) !== undefined && getElementFill(el) !== 'none')) ? (getElementGradientCss(el) ? 'transparent' : getElementFill(el)) : (getElementFill(el) === 'none' ? 'transparent' : '#3b82f6')),
                     backgroundImage: getElementPattern(el) ? `url('${getElementPattern(el)}')` : (getElementGradientCss(el) || 'none'),
-                    backgroundSize: getElementPattern(el) ? 'cover' : undefined,
+                    backgroundSize: getElementPattern(el) ? (isElementPatternTile(el) ? `${getElementPatternTileSize(el).w}px ${getElementPatternTileSize(el).h}px` : 'cover') : undefined,
+                    backgroundPosition: getElementPattern(el) ? (isElementPatternTile(el) ? '0 0' : 'center center') : undefined,
+                    backgroundRepeat: getElementPattern(el) ? (isElementPatternTile(el) ? 'repeat' : 'no-repeat') : undefined,
                     width: '100%',
                     height: '100%',
                     borderRadius: el.style?.borderRadius || '0px',
@@ -2463,8 +2523,9 @@ const masterGroupedLayouts = computed(() => {
                       height: '100%',
                       backgroundColor: getElementPattern(el) ? 'transparent' : ((getElementGradientCss(el) || (getElementFill(el) !== undefined && getElementFill(el) !== 'none')) ? (getElementGradientCss(el) ? 'transparent' : getElementFill(el)) : (getElementFill(el) === 'none' ? 'transparent' : '#3b82f6')),
                       backgroundImage: getElementPattern(el) ? `url('${getElementPattern(el)}')` : (getElementGradientCss(el) || 'none'),
-                      backgroundSize: getElementPattern(el) ? 'cover' : undefined,
-                      backgroundPosition: getElementPattern(el) ? 'center center' : undefined,
+                      backgroundSize: getElementPattern(el) ? (isElementPatternTile(el) ? `${getElementPatternTileSize(el).w}px ${getElementPatternTileSize(el).h}px` : 'cover') : undefined,
+                      backgroundPosition: getElementPattern(el) ? (isElementPatternTile(el) ? '0 0' : 'center center') : undefined,
+                      backgroundRepeat: getElementPattern(el) ? (isElementPatternTile(el) ? 'repeat' : 'no-repeat') : undefined,
                       borderRadius: '50%',
                       borderWidth: `${getElementBorderWidth(el)}px`,
                       borderStyle: el.style?.borderStyle || (el as any).borderType || 'solid',
@@ -2478,8 +2539,16 @@ const masterGroupedLayouts = computed(() => {
                         style="width: 100%; height: 100%; display: block; overflow: visible;"
                         :style="{ filter: (el.shadow && el.shadow.type === 'inner') ? `url(#thumb-shape-inner-shadow-${el.id})` : '' }">
                         <defs>
-                          <pattern v-if="getElementPattern(el)" :id="`thumb-shape-pattern-${slide.id || index}-${el.id}`" width="100%" height="100%" patternContentUnits="objectBoundingBox">
-                            <image :href="getElementPattern(el)" width="1" height="1" preserveAspectRatio="none" />
+                          <pattern v-if="getElementPattern(el)" :id="`thumb-shape-pattern-${slide.id || index}-${el.id}`"
+                            :width="isElementPatternTile(el) ? getElementPatternTileSize(el).w : '100%'"
+                            :height="isElementPatternTile(el) ? getElementPatternTileSize(el).h : '100%'"
+                            :patternUnits="isElementPatternTile(el) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+                            :patternContentUnits="isElementPatternTile(el) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+                            :patternTransform="getShapePatternTransform(el, true)">
+                            <image :href="getElementPattern(el)"
+                              :width="isElementPatternTile(el) ? getElementPatternTileSize(el).w : 1"
+                              :height="isElementPatternTile(el) ? getElementPatternTileSize(el).h : 1"
+                              preserveAspectRatio="none" />
                           </pattern>
                           <template v-if="getElementGradientConfig(el)">
                             <radialGradient v-if="getElementGradientConfig(el)!.path && getElementGradientConfig(el)!.path !== 'line'"
@@ -2523,8 +2592,16 @@ const masterGroupedLayouts = computed(() => {
                       <svg overflow="visible" style="width: 100%; height: 100%; display: block; overflow: visible;"
                         :style="{ filter: (el.shadow && el.shadow.type === 'inner') ? `url(#thumb-shape-inner-shadow-${el.id})` : '' }">
                         <defs>
-                          <pattern v-if="getElementPattern(el)" :id="`thumb-shape-pattern-${slide.id || index}-${el.id}`" width="100%" height="100%" patternContentUnits="objectBoundingBox">
-                            <image :href="getElementPattern(el)" width="1" height="1" preserveAspectRatio="none" />
+                          <pattern v-if="getElementPattern(el)" :id="`thumb-shape-pattern-${slide.id || index}-${el.id}`"
+                            :width="isElementPatternTile(el) ? getElementPatternTileSize(el).w : '100%'"
+                            :height="isElementPatternTile(el) ? getElementPatternTileSize(el).h : '100%'"
+                            :patternUnits="isElementPatternTile(el) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+                            :patternContentUnits="isElementPatternTile(el) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+                            :patternTransform="getShapePatternTransform(el, false)">
+                            <image :href="getElementPattern(el)"
+                              :width="isElementPatternTile(el) ? getElementPatternTileSize(el).w : 1"
+                              :height="isElementPatternTile(el) ? getElementPatternTileSize(el).h : 1"
+                              preserveAspectRatio="none" />
                           </pattern>
                           <template v-if="getElementGradientConfig(el)">
                             <radialGradient v-if="getElementGradientConfig(el)!.path && getElementGradientConfig(el)!.path !== 'line'"
@@ -2572,8 +2649,9 @@ const masterGroupedLayouts = computed(() => {
                       height: '100%',
                       backgroundColor: getElementPattern(el) ? 'transparent' : ((isImagePlaceholder(el) && !getElementGradientCss(el)) ? ((getElementFill(el) && getElementFill(el) !== '#f1f5f9' && getElementFill(el) !== '#f8fafc') ? getElementFill(el) : '#d9dde3') : ((getElementGradientCss(el) || (getElementFill(el) !== undefined && getElementFill(el) !== 'none')) ? (getElementGradientCss(el) ? 'transparent' : getElementFill(el)) : (getElementFill(el) === 'none' ? 'transparent' : '#10b981'))),
                       backgroundImage: getElementPattern(el) ? `url('${getElementPattern(el)}')` : (getElementGradientCss(el) || 'none'),
-                      backgroundSize: getElementPattern(el) ? 'cover' : undefined,
-                      backgroundPosition: getElementPattern(el) ? 'center center' : undefined,
+                      backgroundSize: getElementPattern(el) ? (isElementPatternTile(el) ? `${getElementPatternTileSize(el).w}px ${getElementPatternTileSize(el).h}px` : 'cover') : undefined,
+                      backgroundPosition: getElementPattern(el) ? (isElementPatternTile(el) ? '0 0' : 'center center') : undefined,
+                      backgroundRepeat: getElementPattern(el) ? (isElementPatternTile(el) ? 'repeat' : 'no-repeat') : undefined,
                       borderRadius: isImagePlaceholder(el) ? ((el.style?.borderRadius && el.style.borderRadius !== '0px' && el.style.borderRadius !== '4px') ? el.style.borderRadius : '12px') : (el.style?.borderRadius !== undefined ? el.style.borderRadius : '0px'),
                       borderWidth: (isImagePlaceholder(el) && (el.style as any)?.enableBorder !== true) ? '0px' : `${getElementBorderWidth(el)}px`,
                       borderStyle: el.style?.borderStyle || (el as any).borderType || 'solid',

package/src/components/SidebarRight.vue

@@ -465,12 +465,15 @@ function applyTextStyleToHtml(html: string, styles: any) {
     paragraphs.forEach(applyTextStyles)
   }
 
-  // 综合处理字体与样式覆盖：如果指定了 fontFamily，清理/更新所有块级和内联节点的原有硬编码字体
-  if (styles.fontFamily) {
+  // 综合处理字体与样式覆盖：如果指定了 fontFamily 或 fontSize，清理/更新所有块级和内联节点的原有硬编码值
+  if (styles.fontFamily || styles.fontSize) {
     div.querySelectorAll('p, div, li, h1, h2, h3, h4, h5, h6, span, b, strong, i, em, a').forEach((elem: any) => {
-      if (elem.style && elem.style.fontFamily) {
+      if (styles.fontFamily && elem.style && elem.style.fontFamily) {
         elem.style.fontFamily = styles.fontFamily
       }
+      if (styles.fontSize && elem.style && elem.style.fontSize) {
+        elem.style.fontSize = styles.fontSize
+      }
     })
   }
 
@@ -571,11 +574,12 @@ function setStyleVal(prop: string, val: any) {
           }
         }
 
-        if (prop === 'fontFamily') {
+        if (prop === 'fontFamily' || prop === 'fontSize') {
           const container = document.getElementById(`editable-${el.id}`)
           if (container) {
-            container.style.fontFamily = val
-            container.innerHTML = applyTextStyleToHtml(container.innerHTML, { fontFamily: val })
+            if (prop === 'fontFamily') container.style.fontFamily = val
+            else container.style.fontSize = val
+            container.innerHTML = applyTextStyleToHtml(container.innerHTML, { [prop]: val })
             if (el.type === 'shape') {
               el.text = container.innerHTML
             } else {
@@ -916,6 +920,9 @@ const {
   gradientDirection,
   updateElementGradient,
   shapePatternFill,
+  shapePatternType,
+  shapePatternFg,
+  shapePatternBg,
   handleShapePatternUpload,
   clearShapePatternFill,
   styleBorderStyle,
@@ -1709,9 +1716,9 @@ function handleUndockToPopover() {
               v-model:gradient-angle="gradientAngle"
               @update:element-gradient="updateElementGradient"
               v-model:shape-pattern-fill="shapePatternFill"
-              :shape-pattern-type="shapeFillType"
-              :shape-pattern-fg="fillHex"
-              :shape-pattern-bg="fillHex"
+              v-model:shape-pattern-type="shapePatternType"
+              v-model:shape-pattern-fg="shapePatternFg"
+              v-model:shape-pattern-bg="shapePatternBg"
               :fill-opacity="fillAlpha"
               :is-border-enabled="enableBorder"
               v-model:is-border-expanded="isBorderExpanded"

package/src/components/TemplateGallery.vue

@@ -11,6 +11,7 @@ import {
   VideoPlay
 } from '@element-plus/icons-vue'
 import { useSlides, DEFAULT_MATERIAL_PAGE_API_URL } from '../composables/useSlides'
+import { isImagePlaceholder } from '../utils/canvas/elementStyles'
 
 const {
   addElement,
@@ -20,7 +21,12 @@ const {
   materialPageApiUrl,
   materialHeaders,
   activeTab,
-  materialPopoverVisible
+  materialPopoverVisible,
+  activeSlide,
+  selectedElementId,
+  placeholderMaterialTargetId,
+  resolveActivePlaceholderTargetId,
+  replacePlaceholderElement
 } = useSlides()
 
 export interface MaterialItem {
@@ -682,7 +688,7 @@ function formatMaterialTitle(title?: string, fallback = '素材', maxLen = 12):
   return text.length > maxLen ? `${text.slice(0, maxLen)}...` : text
 }
 
-// 点击素材卡片插入画布（区分视频与图片/矢量/插画）
+// 点击素材卡片插入画布（区分视频与图片/矢量/插画，若当前处于图片占位符替换状态则优先替换占位符）
 function handleSelectMaterial(meta: MaterialItem) {
   const isVid = isVideoMaterial(meta)
   const targetUrl = meta.sourceUrl || meta.url || meta.downloadUrl || meta.previewUrl
@@ -692,9 +698,36 @@ function handleSelectMaterial(meta: MaterialItem) {
     return
   }
 
-  let initialDimensions: { width?: number; height?: number } | undefined = undefined
   const rawW = meta.originalWidth || meta.width
   const rawH = meta.originalHeight || meta.height
+
+  const currentSelectedEl = selectedElementId?.value
+    ? activeSlide?.value?.elements?.find((el: any) => el.id === selectedElementId.value)
+    : null
+
+  const explicitTargetId =
+    placeholderMaterialTargetId?.value ||
+    (typeof window !== 'undefined' ? (window as any).__jvsPlaceholderTargetId : null)
+
+  const targetPlaceholderId =
+    (resolveActivePlaceholderTargetId ? resolveActivePlaceholderTargetId() : null) ||
+    (explicitTargetId && (!currentSelectedEl || currentSelectedEl.id === explicitTargetId)
+      ? explicitTargetId
+      : (currentSelectedEl && isImagePlaceholder(currentSelectedEl) ? currentSelectedEl.id : null))
+
+  if (targetPlaceholderId && replacePlaceholderElement) {
+    const replaced = replacePlaceholderElement(targetPlaceholderId, targetUrl, {
+      isVideo: isVid,
+      width: Number(rawW) || undefined,
+      height: Number(rawH) || undefined,
+      notifyMessage: isVid
+        ? `已使用视频 "${formatMaterialTitle(meta.title, '高清视频', 12)}" 替换占位符`
+        : `已使用素材 "${formatMaterialTitle(meta.title, '图片', 12)}" 替换占位符图片`
+    })
+    if (replaced) return
+  }
+
+  let initialDimensions: { width?: number; height?: number } | undefined = undefined
   if (rawW && rawH && rawW > 0 && rawH > 0) {
     const maxWidth = 480
     const maxHeight = 360

package/src/components/Toolbar.vue

@@ -1359,7 +1359,7 @@ async function handleAudioFileChange(e: Event) {
               </el-popover>
 
               <!-- Chart Popover -->
-              <el-popover trigger="click" placement="bottom-start" :width="516" popper-class="chart-popover-popper"
+              <el-popover trigger="click" placement="bottom-start" :width="568" popper-class="chart-popover-popper"
                 v-model:visible="chartPopoverVisible" :show-arrow="false" :offset="2">
                 <template #reference>
                   <div class="toolbar-btn-stacked" :class="{ 'btn-active': chartPopoverVisible }" title="插入图表"