jvs-ppt-ui 0.0.15 → 0.0.16

package/src/components/sidebar/panels/SidebarShapeFormatPanel.vue

@@ -10,10 +10,12 @@ import GradientEditor from './GradientEditor.vue'
 import { SHAPE_LIST } from '../../../utils/shapes'
 import { isImagePlaceholder, getElementGradientConfig, getElementGradientCss } from '../../../utils/canvas/elementStyles'
 import { isEllipseShape } from '../../../utils/line'
-import { PATTERN_PRESETS, parseColor, generateGradientEndColor } from '../../../composables/sidebar/useSidebarShapeFormat'
+import { PATTERN_PRESETS, parseColor, hexToRgba, generateGradientEndColor, buildPatternSvgDataUrl, parsePatternSvgMeta } from '../../../composables/sidebar/useSidebarShapeFormat'
 
 const shapePopoverVisible = ref(false)
 const fillPopoverVisible = ref(false)
+const patternFgPopoverVisible = ref(false)
+const patternBgPopoverVisible = ref(false)
 const imageFileInputRef = ref<HTMLInputElement | null>(null)
 
 const props = defineProps<{
@@ -353,8 +355,84 @@ function handleImageFileChange(e: Event) {
   }
 }
 
-function selectPatternPreset(url: string) {
-  emit('update:shapePatternFill', url)
+const activePatternType = computed(() => {
+  if (props.shapePatternType && props.shapePatternType !== 'pattern' && props.shapePatternType !== 'solid') {
+    return props.shapePatternType
+  }
+  const meta = parsePatternSvgMeta(currentPatternImage.value)
+  return meta.type || 'diag-up'
+})
+
+const parsedPatternFg = computed(() => {
+  const raw = props.shapePatternFg || parsePatternSvgMeta(currentPatternImage.value).fg || '#3B82F6'
+  return parseColor(raw)
+})
+
+const parsedPatternBg = computed(() => {
+  const raw = props.shapePatternBg || parsePatternSvgMeta(currentPatternImage.value).bg || '#FFFFFF'
+  return parseColor(raw)
+})
+
+function getPatternPresetPreviewUrl(p: { key: string; url: string }) {
+  const fg = props.shapePatternFg || '#3B82F6'
+  const bg = props.shapePatternBg || '#FFFFFF'
+  return buildPatternSvgDataUrl(p.key, fg, bg)
+}
+
+function isPatternPresetActive(p: { key: string; url: string }) {
+  return activePatternType.value === p.key
+}
+
+function selectPatternPreset(p: { key: string; url: string }) {
+  emit('update:shapePatternType', p.key)
+}
+
+function onSelectPatternFgColor(color: string) {
+  if (!color || color === 'transparent' || color === 'none') {
+    emit('update:shapePatternFg', 'transparent')
+    return
+  }
+  emit('update:shapePatternFg', color)
+}
+
+function handlePatternFgOpacityInput(e: Event) {
+  const target = e.target as HTMLInputElement
+  let val = parseInt(target.value)
+  if (isNaN(val)) val = 100
+  val = Math.max(0, Math.min(100, val))
+  if (val === 0) {
+    emit('update:shapePatternFg', 'transparent')
+  } else if (val === 100) {
+    const hex = parsedPatternFg.value.hex === 'transparent' ? '#3B82F6' : parsedPatternFg.value.hex
+    emit('update:shapePatternFg', hex)
+  } else {
+    const hex = parsedPatternFg.value.hex === 'transparent' ? '#3B82F6' : parsedPatternFg.value.hex
+    emit('update:shapePatternFg', hexToRgba(hex, val))
+  }
+}
+
+function onSelectPatternBgColor(color: string) {
+  if (!color || color === 'transparent' || color === 'none') {
+    emit('update:shapePatternBg', 'transparent')
+    return
+  }
+  emit('update:shapePatternBg', color)
+}
+
+function handlePatternBgOpacityInput(e: Event) {
+  const target = e.target as HTMLInputElement
+  let val = parseInt(target.value)
+  if (isNaN(val)) val = 100
+  val = Math.max(0, Math.min(100, val))
+  if (val === 0) {
+    emit('update:shapePatternBg', 'transparent')
+  } else if (val === 100) {
+    const hex = parsedPatternBg.value.hex === 'transparent' ? '#FFFFFF' : parsedPatternBg.value.hex
+    emit('update:shapePatternBg', hex)
+  } else {
+    const hex = parsedPatternBg.value.hex === 'transparent' ? '#FFFFFF' : parsedPatternBg.value.hex
+    emit('update:shapePatternBg', hexToRgba(hex, val))
+  }
 }
 
 const displayFillOpacity = computed(() => {
@@ -578,7 +656,7 @@ function onSelectFillColor(color: string) {
             </svg>
           </button>
           <button type="button" class="fill-type-icon-btn" :class="{ active: activeFillMode === 'pattern' }"
-            @click="selectFillMode('pattern')" title="纹理填充">
+            @click="selectFillMode('pattern')" title="图案填充">
             <svg viewBox="0 0 18 18" width="18" height="18">
               <defs>
                 <pattern id="fillBarPattern" width="4" height="4" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
@@ -663,16 +741,85 @@ function onSelectFillColor(color: string) {
 
         <!-- Pattern Fill -->
         <template v-else-if="shapeFillType === 'pattern'">
-          <div class="pattern-presets-grid">
-            <div
-              v-for="p in PATTERN_PRESETS"
-              :key="p.name"
-              class="pattern-preset-card"
-              :class="{ active: currentPatternImage === p.url }"
-              :title="p.name"
-              :style="{ backgroundImage: `url(${p.url})` }"
-              @click="selectPatternPreset(p.url)"
-            ></div>
+          <div class="pattern-fill-container">
+            <div class="pattern-presets-grid">
+              <div
+                v-for="p in PATTERN_PRESETS"
+                :key="p.key"
+                class="pattern-preset-card"
+                :class="{ active: isPatternPresetActive(p) }"
+                :title="p.name"
+                :style="{ backgroundImage: `url('${getPatternPresetPreviewUrl(p)}')` }"
+                @click="selectPatternPreset(p)"
+              ></div>
+            </div>
+
+            <!-- 前景 / 背景 颜色选择 (对齐 PPT / WPS 图案填充) -->
+            <div class="pattern-colors-section">
+              <div class="shape-property-row">
+                <span class="shape-property-label" style="width: 44px;">前景</span>
+                <div class="full-color-pill" style="flex: 1;">
+                  <QuickColorPopover
+                    v-model:visible="patternFgPopoverVisible"
+                    :color="parsedPatternFg.hex === 'transparent' ? '#3B82F6' : parsedPatternFg.hex"
+                    :alpha="parsedPatternFg.alpha"
+                    :recent-colors="recentColors"
+                    @select-color="onSelectPatternFgColor"
+                  >
+                    <template #reference>
+                      <div class="color-left-info">
+                        <div :style="{ background: parsedPatternFg.hex === 'transparent' ? 'transparent' : parsedPatternFg.hex }" class="color-square-preview"></div>
+                        <span class="color-hex-text">{{ formatHexDisplay(parsedPatternFg.hex) }}</span>
+                      </div>
+                    </template>
+                  </QuickColorPopover>
+                  <div class="color-opacity-input-wrapper" @click.stop title="前景不透明度">
+                    <input
+                      type="number"
+                      class="color-opacity-num-input"
+                      :value="parsedPatternFg.alpha"
+                      min="0"
+                      max="100"
+                      @input="handlePatternFgOpacityInput"
+                      @keydown.enter="($event.target as HTMLElement).blur()"
+                    />
+                    <span class="percent-unit">%</span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="shape-property-row">
+                <span class="shape-property-label" style="width: 44px;">背景</span>
+                <div class="full-color-pill" style="flex: 1;">
+                  <QuickColorPopover
+                    v-model:visible="patternBgPopoverVisible"
+                    :color="parsedPatternBg.hex === 'transparent' ? '#FFFFFF' : parsedPatternBg.hex"
+                    :alpha="parsedPatternBg.alpha"
+                    :recent-colors="recentColors"
+                    @select-color="onSelectPatternBgColor"
+                  >
+                    <template #reference>
+                      <div class="color-left-info">
+                        <div :style="{ background: parsedPatternBg.hex === 'transparent' ? 'transparent' : parsedPatternBg.hex }" class="color-square-preview"></div>
+                        <span class="color-hex-text">{{ formatHexDisplay(parsedPatternBg.hex) }}</span>
+                      </div>
+                    </template>
+                  </QuickColorPopover>
+                  <div class="color-opacity-input-wrapper" @click.stop title="背景不透明度">
+                    <input
+                      type="number"
+                      class="color-opacity-num-input"
+                      :value="parsedPatternBg.alpha"
+                      min="0"
+                      max="100"
+                      @input="handlePatternBgOpacityInput"
+                      @keydown.enter="($event.target as HTMLElement).blur()"
+                    />
+                    <span class="percent-unit">%</span>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </template>
       </div>
@@ -798,8 +945,8 @@ function onSelectFillColor(color: string) {
 }
 
 .shape-accordion-header-label {
-  font-size: 13px;
-  font-weight: 500;
+  font-size: 14px;
+  font-weight: 400;
   color: #1e293b;
   display: flex;
   align-items: center;
@@ -1149,6 +1296,19 @@ function onSelectFillColor(color: string) {
   }
 }
 
+.pattern-fill-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.pattern-colors-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 2px;
+}
+
 .pattern-presets-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);

package/src/components/sidebar/panels/SidebarTableFormatPanel.vue

@@ -426,8 +426,8 @@ function applyTheme(theme: any) {
 }
 
 .shape-accordion-header-label {
-  font-size: 13px;
-  font-weight: 600;
+  font-size: 14px;
+  font-weight: 400;
   color: var(--text-primary);
   display: flex;
   align-items: center;

package/src/components/sidebar/panels/SidebarTextFormatPanel.vue

@@ -1420,8 +1420,8 @@ function startDragAngle(e: MouseEvent) {
 }
 
 .accordion-title {
-  font-size: 13px;
-  font-weight: 500;
+  font-size: 14px;
+  font-weight: 400;
   color: #1e293b;
 }
 

package/src/components/sidebar/panels/SidebarTransitionPanel.vue

@@ -123,20 +123,18 @@ function playPreview(transitionType?: string) {
 
   const scale = (zoomRatio?.value || 100) / 100
 
-  if (t === 'none') {
-    if (activeAnimation) {
-      activeAnimation.cancel()
-      activeAnimation = null
-    }
-    restoreSlideTransform()
-    return
-  }
-
   if (activeAnimation) {
+    activeAnimation.onfinish = null
+    activeAnimation.oncancel = null
     activeAnimation.cancel()
     activeAnimation = null
   }
 
+  if (t === 'none') {
+    restoreSlideTransform()
+    return
+  }
+
   let actualType = t
   if (t === 'random') {
     const pool = [
@@ -220,7 +218,6 @@ function playPreview(transitionType?: string) {
 
   // 临时防止滚动条跳动
   const wrapper = document.querySelector('.canvas-slide-wrapper') as HTMLElement
-  const originalOverflow = wrapper ? wrapper.style.overflow : ''
   if (wrapper) {
     wrapper.style.overflow = 'hidden'
   }
@@ -228,16 +225,15 @@ function playPreview(transitionType?: string) {
   slideEl.style.transformOrigin = 'center center'
   slideEl.style.pointerEvents = 'none'
 
-  activeAnimation = slideEl.animate(keyframes, {
+  const currentAnim = slideEl.animate(keyframes, {
     duration: dur,
     easing: 'cubic-bezier(0.2, 0.8, 0.2, 1)'
   })
+  activeAnimation = currentAnim
 
   const cleanup = () => {
-    if (activeAnimation) {
-      activeAnimation.cancel()
-      activeAnimation = null
-    }
+    if (activeAnimation !== currentAnim) return
+    activeAnimation = null
     if (slideEl) {
       // 关键：强制保留当前缩放比例 scale(scale)，绝不能置空清除！
       slideEl.style.transform = `scale(${scale})`
@@ -247,17 +243,30 @@ function playPreview(transitionType?: string) {
       slideEl.style.pointerEvents = ''
     }
     if (wrapper) {
-      wrapper.style.overflow = originalOverflow
+      wrapper.style.overflow = ''
     }
   }
 
-  activeAnimation.onfinish = cleanup
-  activeAnimation.oncancel = cleanup
+  currentAnim.onfinish = cleanup
+  currentAnim.oncancel = cleanup
+}
+
+const hoveredTransition = ref<string | null>(null)
+
+function onHoverTransition(val: string) {
+  if (hoveredTransition.value === val) return
+  hoveredTransition.value = val
+  playPreview(val)
+}
+
+function onLeaveTransition(val: string) {
+  if (hoveredTransition.value === val) {
+    hoveredTransition.value = null
+  }
 }
 
 function selectTransition(val: string) {
   emit('update:activeSlideTransition', val)
-  playPreview(val)
 }
 
 const transitionIcons: Record<string, { default: string; selected: string }> = {
@@ -313,6 +322,8 @@ function handleApplyAll() {
         :key="item.value"
         class="transition-item"
         :class="{ active: activeSlideTransition === item.value }"
+        @mouseenter="onHoverTransition(item.value)"
+        @mouseleave="onLeaveTransition(item.value)"
         @click="selectTransition(item.value)"
       >
         <div class="transition-card">

package/src/composables/canvas/useCanvasTransform.ts

@@ -350,6 +350,19 @@ export function useCanvasTransform(options: CanvasTransformOptions) {
         if (typeof item.height === 'number') item.height = newH
       }
 
+      if (item.type === 'shape' && item.pathFormula === 'roundRect') {
+        const formulaObj = shapeFormulas()[item.pathFormula]
+        if (formulaObj && typeof formulaObj.formula === 'function') {
+          const kps = Array.isArray(item.keypoints) && item.keypoints.length > 0
+            ? item.keypoints
+            : (formulaObj.defaultValue ? [...formulaObj.defaultValue] : [0.125])
+          item.viewBox = [newW, newH]
+          const newPath = formulaObj.formula(newW, newH, kps)
+          item.content = newPath
+          item.path = newPath
+        }
+      }
+
       // Auto-update font scaling for autoFit text boxes
       updateTextFontScale(item)
 
@@ -645,6 +658,9 @@ export function useCanvasTransform(options: CanvasTransformOptions) {
     const geom = getElementPixels(curEl)
     const actualW = geom.width || 200
     const actualH = geom.height || 200
+    if (curEl.pathFormula === 'roundRect') {
+      curEl.viewBox = [actualW, actualH]
+    }
     const viewBoxW = curEl.viewBox?.[0] || 200
     const viewBoxH = curEl.viewBox?.[1] || 200
 
@@ -1048,6 +1064,14 @@ export function useCanvasTransform(options: CanvasTransformOptions) {
     const newPath = formulaObj.formula(viewBoxW, viewBoxH, curEl.keypoints)
     curEl.content = newPath
     curEl.path = newPath
+    if (curEl.pathFormula === 'roundRect') {
+      if (curEl.style && curEl.style.borderRadius !== undefined) {
+        delete curEl.style.borderRadius
+      }
+      if (curEl.radius !== undefined) {
+        delete curEl.radius
+      }
+    }
   
     const parentGroup = findParentGroup(curEl.id)
     if (parentGroup && parentGroup.elements) {