jvs-ppt-ui 0.0.11 → 0.0.12

package/src/components/PptEditor.vue

@@ -80,6 +80,7 @@ const {
   aiPptDialogVisible,
   unsplashDialogVisible,
   isPresenting,
+  isReadonly,
   importSlides,
   exportSlides,
   currentEditingFormulaEl,
@@ -110,6 +111,10 @@ const {
   uploadMediaResourcesInSlides
 } = slidesState
 
+watch(() => props.readonly, (val) => {
+  isReadonly.value = !!val
+}, { immediate: true })
+
 // 弹层挂载闩锁：首次 visible 后保持挂载（异步组件只加载一次，关闭动画不被 v-if 掐断）
 function latchMount(source: Ref<boolean>) {
   const opened = ref(false)

package/src/components/SidebarLeft.vue

@@ -42,7 +42,7 @@ const {
   enterMasterView, addMaster, deleteMaster, addLayout, deleteLayout, duplicateLayout,
   clipboard, slideClipboard, handleUnifiedPaste, sortSlideElements, getEffectiveMasterElementsForSlide,
   getEffectiveSlideBackground, isCanvasDragging, activeSlideVersion, pauseHistory,
-  activeSidebarTab
+  activeSidebarTab, isReadonly
 } = useSlides()
 
 const displaySlides = shallowRef<any[]>([...slides.value])
@@ -2092,7 +2092,7 @@ const masterGroupedLayouts = computed(() => {
 
     <!-- Regular Sidebar Layouts -->
     <template v-else>
-      <div class="sidebar-add-slide-container" style="padding: 12px 16px; display: flex; flex-shrink: 0;">
+      <div v-if="!isReadonly" class="sidebar-add-slide-container" style="padding: 12px 16px; display: flex; flex-shrink: 0;">
         <div class="custom-split-button">
           <!-- Main Add Slide Button -->
           <button @click="addSlide" class="split-btn-left">
@@ -2153,7 +2153,7 @@ const masterGroupedLayouts = computed(() => {
       </button>
     </div> -->
 
-    <Draggable v-if="activeSidebarTab === 'outline'" class="slide-list" ref="slideListRef" :modelValue="displaySlides"
+    <Draggable v-if="activeSidebarTab === 'outline'" :disabled="isReadonly" class="slide-list" ref="slideListRef" :modelValue="displaySlides"
       :animation="200" :scroll="true" :scrollSensitivity="50" @end="handleDragEnd" itemKey="id"
       @mouseenter="isMouseOverSlideList = true" @mouseleave="isMouseOverSlideList = false">
       <template #item="{ element: slide, index }">
@@ -2759,6 +2759,17 @@ const masterGroupedLayouts = computed(() => {
         </template>
       </template>
 
+      <template v-else-if="isReadonly">
+        <div class="menu-item" @click="copySlide(rightClickedIndex)">
+          <span class="menu-label">{{ locale === 'zh' ? '复制' : 'Copy' }}</span>
+          <span class="menu-shortcut">Ctrl + C</span>
+        </div>
+        <div class="menu-item" @click="playFromCurrent">
+          <span class="menu-label">{{ locale === 'zh' ? '从当前放映' : 'Play from Current' }}</span>
+          <span class="menu-shortcut">Shift + F5</span>
+        </div>
+      </template>
+
       <template v-else>
         <div class="menu-item" @click="cutSlide(rightClickedIndex)">
           <span class="menu-label">{{ locale === 'zh' ? '剪切' : 'Cut' }}</span>

package/src/components/canvas/elements/CanvasShapeElement.vue

@@ -22,7 +22,7 @@ import { getFontVariantStyle } from '../../../configs/fonts'
 import { useSlides } from '../../../composables/useSlides'
 import { createTextSelectionOverlay, type TextSelectionOverlayHandle } from '../textSelectionOverlay'
 
-const { shapeFormatPainter } = useSlides()
+const { shapeFormatPainter, isReadonly } = useSlides()
 const isTextPaintActive = computed(() => !!(shapeFormatPainter.value && shapeFormatPainter.value.mode === 'text-range'))
 const isTextSelectable = computed(() => (props.isEditingText && props.selectedElementId === props.element.id) || isTextPaintActive.value)
 
@@ -262,7 +262,7 @@ function formatShapeHtml(el: any): string {
   <div
     class="element-content shape-element-content"
     style="width: 100%; height: 100%; position: relative;"
-    @dblclick.stop.prevent="isImagePlaceholder && isImagePlaceholder(element) ? emit('placeholderUpload', element.id) : (isTextSelectable ? null : emit('startEditing', $event))"
+    @dblclick.stop.prevent="isReadonly ? null : (isImagePlaceholder && isImagePlaceholder(element) ? emit('placeholderUpload', element.id) : (isTextSelectable ? null : emit('startEditing', $event)))"
   >
     <!-- Circle Shape (with fill) -->
     <div
@@ -666,7 +666,7 @@ function formatShapeHtml(el: any): string {
           @keydown="emit('textKeyDown', $event)"
           @mousemove="emit('mousemove', $event)"
           @mouseleave="emit('mouseleave', $event)"
-          @dblclick.stop.prevent="isImagePlaceholder && isImagePlaceholder(element) ? emit('placeholderUpload', element.id) : (isTextSelectable ? null : emit('startEditing', $event))"
+          @dblclick.stop.prevent="isReadonly ? null : (isImagePlaceholder && isImagePlaceholder(element) ? emit('placeholderUpload', element.id) : (isTextSelectable ? null : emit('startEditing', $event)))"
           class="shape-text-overlay"
           :style="{
             display: 'block',

package/src/components/canvas/elements/CanvasTextElement.vue

@@ -4,7 +4,7 @@ import { getFontVariantStyle } from '../../../configs/fonts'
 import { useSlides } from '../../../composables/useSlides'
 import { createTextSelectionOverlay, type TextSelectionOverlayHandle } from '../textSelectionOverlay'
 
-const { shapeFormatPainter } = useSlides()
+const { shapeFormatPainter, isReadonly } = useSlides()
 const isTextPaintActive = computed(() => !!(shapeFormatPainter.value && shapeFormatPainter.value.mode === 'text-range'))
 const isTextSelectable = computed(() => (props.isEditingText && props.element.id === props.selectedElementId) || isTextPaintActive.value)
 
@@ -176,7 +176,7 @@ function handleMaskMouseDown(e: MouseEvent) {
   >
     <!-- Sibling Table Edit Mask -->
     <div
-      v-if="element.id === selectedElementId && isTable(element) && !isEditingText"
+      v-if="!isReadonly && element.id === selectedElementId && isTable(element) && !isEditingText"
       class="table-edit-mask"
       @mousemove="handleMaskMouseMove"
       @mousedown="handleMaskMouseDown"
@@ -187,7 +187,7 @@ function handleMaskMouseDown(e: MouseEvent) {
 
     <!-- Sibling Formula Edit Mask -->
     <div
-      v-if="element.id === selectedElementId && element.latex && !isEditingText"
+      v-if="!isReadonly && element.id === selectedElementId && element.latex && !isEditingText"
       class="formula-edit-mask"
       @dblclick.stop="emit('formulaDblClick')"
     ></div>
@@ -203,7 +203,7 @@ function handleMaskMouseDown(e: MouseEvent) {
       @focusout="emit('focusout', $event)"
       @input="emit('input', $event)"
       @keydown="emit('keydown', $event)"
-      @dblclick.stop="isTextSelectable ? null : emit('dblclick', $event)"
+      @dblclick.stop="isReadonly ? null : (isTextSelectable ? null : emit('dblclick', $event))"
       @mousemove="emit('mousemove', $event)"
       @mouseleave="emit('mouseleave', $event)"
       :class="{

package/src/composables/canvas/useCanvasShortcuts.ts

@@ -36,6 +36,7 @@ export interface ShortcutsOptions {
   shapeFormatPainter?: Ref<any>
   notify: (msg: string) => void
   addHistorySnapshot?: () => void
+  isReadonly?: Ref<boolean>
 }
 
 export function useCanvasShortcuts(options: ShortcutsOptions) {
@@ -73,7 +74,8 @@ export function useCanvasShortcuts(options: ShortcutsOptions) {
     getElementPixels,
     shapeFormatPainter,
     notify,
-    addHistorySnapshot
+    addHistorySnapshot,
+    isReadonly
   } = options
 
   let historyDebounceTimer: any = null
@@ -89,6 +91,53 @@ export function useCanvasShortcuts(options: ShortcutsOptions) {
   function handleGlobalKeyDown(e: KeyboardEvent) {
     if (e.defaultPrevented) return
 
+    if (isReadonly?.value) {
+      if (e.key === 'F5') {
+        e.preventDefault()
+        if (!isPresenting.value) {
+          if (e.shiftKey) {
+            startPresentation()
+          } else {
+            activeIndex.value = 0
+            startPresentation()
+          }
+        }
+        return
+      }
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'f') {
+        showSearchPanel.value = !showSearchPanel.value
+        if (showSearchPanel.value) {
+          activeSearchTab.value = 'find'
+        }
+        e.preventDefault()
+        return
+      }
+      if (e.key === 'Escape') {
+        selectedElementId.value = null
+        selectedElementIds.value = []
+        return
+      }
+      if (e.key === 'ArrowUp' || e.key === 'PageUp') {
+        if (activeIndex.value > 0) activeIndex.value--
+        e.preventDefault()
+        return
+      }
+      if (e.key === 'ArrowDown' || e.key === 'PageDown') {
+        if (activeIndex.value < slides.value.length - 1) activeIndex.value++
+        e.preventDefault()
+        return
+      }
+      if ((e.ctrlKey || e.metaKey) && (e.key === 'c' || e.key === 'C')) {
+        copySelectedSlides()
+        return
+      }
+      if (['Delete', 'Backspace'].includes(e.key) || ((e.ctrlKey || e.metaKey) && ['d', 'g', 'z', 'y', 'v', 'x'].includes(e.key.toLowerCase()))) {
+        e.preventDefault()
+        e.stopPropagation()
+      }
+      return
+    }
+
     // Ctrl + D (Duplicate / 快速复制副本) - 拦截防止浏览器添加书签
     if ((e.ctrlKey || e.metaKey) && (e.key === 'd' || e.key === 'D')) {
       e.preventDefault()

package/src/composables/canvas/useCanvasTable.ts

@@ -12,6 +12,7 @@ export interface TableOptions {
   getOverlayHeight?: (el: any) => string
   selectedElementWidth?: Ref<string>
   selectedElementHeight?: Ref<string>
+  isReadonly?: Ref<boolean>
 }
 
 interface TableMeasure {
@@ -57,7 +58,8 @@ export function useCanvasTable(options: TableOptions) {
     getOverlayWidth = (el: any) => el?.style?.width || '500px',
     getOverlayHeight = (el: any) => el?.style?.height || '200px',
     selectedElementWidth,
-    selectedElementHeight
+    selectedElementHeight,
+    isReadonly
   } = options
 
   const selectedCellCount = ref(0)
@@ -461,7 +463,7 @@ export function useCanvasTable(options: TableOptions) {
   }
 
   function selectColumnCells(el: any, colIdx: number) {
-    if (!el || !el.id) return
+    if (isReadonly?.value || !el || !el.id) return
     selectedElementId.value = el.id
     if (!selectedElementIds.value.includes(el.id)) {
       selectedElementIds.value = [el.id]
@@ -508,7 +510,7 @@ export function useCanvasTable(options: TableOptions) {
   }
 
   function selectRowCells(el: any, rowIdx: number) {
-    if (!el || !el.id) return
+    if (isReadonly?.value || !el || !el.id) return
     selectedElementId.value = el.id
     if (!selectedElementIds.value.includes(el.id)) {
       selectedElementIds.value = [el.id]
@@ -1297,6 +1299,7 @@ export function useCanvasTable(options: TableOptions) {
   }
 
   function startTableColResize(e: MouseEvent, el: any, targetColIdx: number) {
+    if (isReadonly?.value) return
     e.preventDefault()
     e.stopPropagation()
 
@@ -1401,6 +1404,7 @@ export function useCanvasTable(options: TableOptions) {
   }
 
   function startTableRowResize(e: MouseEvent, el: any, targetRowIdx: number) {
+    if (isReadonly?.value) return
     e.preventDefault()
     e.stopPropagation()
 
@@ -1613,6 +1617,7 @@ export function useCanvasTable(options: TableOptions) {
   }
 
   function handleTableDblClick(e: MouseEvent, el: any) {
+    if (isReadonly?.value) return
     e.stopPropagation()
     const targetEl = el || selectedElement.value
     if (!targetEl) return

package/src/composables/canvas/useCanvasText.ts

@@ -25,6 +25,7 @@ export interface TextOptions {
   renderLatexToSvg: (latex: string) => string
   sanitizeNbspInHtml: (html: string) => string
   updateTextFontScale: (el: any) => void
+  isReadonly?: Ref<boolean>
 }
 
 export function useCanvasText(options: TextOptions) {
@@ -48,7 +49,8 @@ export function useCanvasText(options: TextOptions) {
     applyTextStyleToHtml,
     renderLatexToSvg,
     sanitizeNbspInHtml,
-    updateTextFontScale
+    updateTextFontScale,
+    isReadonly
   } = options
 
   const isEditingText = ref(false)
@@ -56,7 +58,7 @@ export function useCanvasText(options: TextOptions) {
   const editingPlaceholderOriginalValue = ref<{ [key: string]: string }>({})
 
   function updateElementContent(id: string, text: string) {
-    if (!activeSlide.value) return
+    if (isReadonly?.value || !activeSlide.value) return
     const el = activeSlide.value.elements.find((item: any) => item.id === id)
     if (el) {
       if (el.type === 'shape') {
@@ -198,6 +200,7 @@ export function useCanvasText(options: TextOptions) {
   }
 
   function startEditingShapeText(elOrId: any, mouseEvent?: MouseEvent) {
+    if (isReadonly?.value) return
     const elId = typeof elOrId === 'string' ? elOrId : elOrId?.id
     const el = typeof elOrId === 'string'
       ? (findElementInSlide(elOrId) || activeSlide.value?.elements.find((x: any) => x.id === elOrId))
@@ -255,6 +258,7 @@ export function useCanvasText(options: TextOptions) {
   }
 
   function startEditingTextElement(elId: string, mouseEvent?: MouseEvent) {
+    if (isReadonly?.value || !elId) return
     selectedElementId.value = elId
     selectedElementIds.value = [elId]
     isEditingText.value = true
@@ -406,7 +410,7 @@ export function useCanvasText(options: TextOptions) {
   }
 
   function handleFormulaDblClick(el: any) {
-    if (!el.latex) return
+    if (isReadonly?.value || !el.latex) return
     currentEditingFormulaEl.value = el
     formulaDialogVisible.value = true
   }

package/src/composables/useSlides.ts

@@ -2497,6 +2497,7 @@ watch(formulaDialogVisible, (visible) => {
   }
 })
 const isPresenting = ref(false)
+const isReadonly = ref(false)
 const showNotification = ref(false)
 const notificationMsg = ref('')
 const shapeFormatPainter = ref<any>(null)
@@ -2958,6 +2959,7 @@ function applyHistoryEntry<T>(entryStrs: string[], currentStrs: string[], list:
 }
 
 function undo() {
+  if (isReadonly.value) return
   if (isMasterEditingView.value) {
     // 先落盘防抖中的快照：编辑后 350ms 内撤销不再丢最后一步编辑
     flushPendingMasterHistorySnapshot()
@@ -3009,6 +3011,7 @@ function undo() {
 }
 
 function redo() {
+  if (isReadonly.value) return
   if (isMasterEditingView.value) {
     flushPendingMasterHistorySnapshot()
     if (masterHistoryIndex.value < masterHistoryStack.value.length - 1) {
@@ -3183,6 +3186,7 @@ function escapeRegExp(string: string) {
 }
 
 function addSlide() {
+  if (isReadonly.value) return
   const newId = Date.now().toString()
   const insertIndex = slides.value.length > 0 ? activeIndex.value + 1 : 0
   const curSlide = slides.value[activeIndex.value]
@@ -3202,6 +3206,7 @@ function addSlide() {
 }
 
 function deleteSlide(index: number) {
+  if (isReadonly.value) return
   const isLastSlide = slides.value.length === 1
   if (isLastSlide) {
     const newSlide = {
@@ -3232,7 +3237,7 @@ function deleteSlide(index: number) {
 }
 
 function pasteSlideData(targetSlideData: any, afterIndex = activeIndex.value, isCut = false) {
-  if (!targetSlideData) return
+  if (isReadonly.value || !targetSlideData) return
 
   if (Array.isArray(targetSlideData)) {
     if (targetSlideData.length === 0) return
@@ -3445,7 +3450,7 @@ function scaleElementIfNeeded(el: any, sX: number, sY: number) {
 }
 
 function pasteElementsData(elementsArray: any[], options?: { sourceWidth?: number; sourceHeight?: number }) {
-  if (!activeSlide.value || !elementsArray || !Array.isArray(elementsArray) || elementsArray.length === 0) return
+  if (isReadonly.value || !activeSlide.value || !elementsArray || !Array.isArray(elementsArray) || elementsArray.length === 0) return
   const pastedIds: string[] = []
   const oldIdToNewId = new Map<string, string>()
   const oldGroupIdToNewGroupId = new Map<string, string>()
@@ -3889,7 +3894,7 @@ function selectAllSlides() {
 }
 
 function deleteSelectedSlides() {
-  if (!slides.value || slides.value.length === 0) return
+  if (isReadonly.value || !slides.value || slides.value.length === 0) return
   const sortedIndexes = [...selectedSlideIndexes.value].filter(i => i >= 0 && i < slides.value.length).sort((a, b) => b - a)
   if (sortedIndexes.length === 0) {
     deleteSlide(activeIndex.value)
@@ -3942,12 +3947,14 @@ function copySelectedSlides() {
 }
 
 function cutSelectedSlides() {
+  if (isReadonly.value) return
   copySelectedSlides()
   deleteSelectedSlides()
   notify('已剪切选中的幻灯片')
 }
 
 function duplicateSelectedSlides() {
+  if (isReadonly.value) return
   const indexes = [...selectedSlideIndexes.value].filter(i => i >= 0 && i < slides.value.length).sort((a, b) => a - b)
   if (indexes.length === 0) indexes.push(activeIndex.value)
   const lastIndex = indexes[indexes.length - 1]
@@ -3976,6 +3983,7 @@ function duplicateSelectedSlides() {
 }
 
 function applyBackground(bg: string) {
+  if (isReadonly.value) return
   if (activeSlide.value) {
     activeSlide.value.background = bg
     activeSlide.value.bgType = 'gradient'
@@ -4009,7 +4017,7 @@ function addElement(
   initialDimensions?: { width?: number; height?: number; left?: number; top?: number },
   extraOptions?: { textType?: SlideTextType; name?: string; [key: string]: any }
 ) {
-  if (!activeSlide.value) return
+  if (isReadonly.value || !activeSlide.value) return
 
   const recipe = getActiveSlideThemeRecipe(activeSlide.value)
 
@@ -4824,7 +4832,7 @@ function updateGroupBounds(groupEl: SlideElement) {
 
 // Delete Element from current slide
 function deleteElement(id: string, silent = false) {
-  if (!activeSlide.value) return
+  if (isReadonly.value || !activeSlide.value) return
   const hasTopLevel = activeSlide.value.elements.some(item => item.id === id)
   if (hasTopLevel) {
     activeSlide.value.elements = activeSlide.value.elements.filter(item => item.id !== id)
@@ -9255,6 +9263,7 @@ export function useSlides() {
     selectedElementIds,
     croppingElementId,
     isPresenting,
+    isReadonly,
     showNotification,
     notificationMsg,
     notify,