jvs-ppt-ui 0.0.11 → 0.0.14

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/PresentationMode.vue

@@ -21,6 +21,7 @@ import {
 import {
   getLineElementPath, getLineElementRenderPath, getLineDashArray, getSvgWidth, getSvgHeight, isEllipseShape
 } from '../utils/line'
+import { isTextContainingElement } from '../utils/groupFlip'
 
 const {
   isPresenting, activeIndex, slides, stopPresentation, renderLatexToSvg, notify, execNext, execPrev,
@@ -1200,7 +1201,7 @@ function getSafeShapeText(el: any): string {
               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})`,
+              transform: `rotate(${el.style.rotate || 0}deg) scale(${!isTextContainingElement(el) && ((el.style as any)?.flipH || el.flipH || el.isFlipH) ? -1 : 1}, ${!isTextContainingElement(el) && ((el.style as any)?.flipV || el.flipV || el.isFlipV) ? -1 : 1})`,
               opacity: (el.style as any).opacity !== undefined ? (el.style as any).opacity : 1,
               filter: (el.type !== 'image' && el.type !== 'chart' && (el.style as any).boxShadow && (el.style as any).boxShadow !== 'none') ? `drop-shadow(${(el.style as any).boxShadow})` : '',
               cursor: (el.link || hasTriggerAnimations(el.id)) ? 'pointer' : 'default',

package/src/components/SidebarLeft.vue

@@ -28,6 +28,7 @@ import PresentationGroupChild from './PresentationGroupChild.vue'
 import {
   getLineElementPath, getLineElementRenderPath, getLineDashArray, getSvgWidth, getSvgHeight, isEllipseShape, scaleSvgPath
 } from '../utils/line'
+import { isTextContainingElement } from '../utils/groupFlip'
 import { SHAPE_LIST, type ShapePoolItem } from '../utils/shapes'
 
 const flatShapePoolItems: ShapePoolItem[] = SHAPE_LIST.flatMap(c => c.children)
@@ -42,7 +43,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 +2093,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 +2154,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 }">
@@ -2246,7 +2247,7 @@ const masterGroupedLayouts = computed(() => {
                   width: el.style?.width || (el.width !== undefined ? `${el.width}px` : 'auto'),
                   height: el.style?.height || (el.height !== undefined ? `${el.height}px` : 'auto'),
                   zIndex: 1,
-                  transform: `rotate(${el.style?.rotate || el.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})`,
+                  transform: `rotate(${el.style?.rotate || el.rotate || 0}deg) scale(${!isTextContainingElement(el) && ((el.style as any)?.flipH || el.flipH || el.isFlipH) ? -1 : 1}, ${!isTextContainingElement(el) && ((el.style as any)?.flipV || el.flipV || el.isFlipV) ? -1 : 1})`,
                   opacity: el.style?.opacity !== undefined ? el.style.opacity : 1,
                   pointerEvents: 'none'
                 }">
@@ -2347,7 +2348,7 @@ const masterGroupedLayouts = computed(() => {
                   width: el.style?.width || 'auto',
                   height: 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})`,
+                  transform: `rotate(${el.style.rotate || 0}deg) scale(${!isTextContainingElement(el) && ((el.style as any)?.flipH || el.flipH || el.isFlipH) ? -1 : 1}, ${!isTextContainingElement(el) && ((el.style as any)?.flipV || el.flipV || el.isFlipV) ? -1 : 1})`,
                   opacity: (el.style as any).opacity !== undefined ? (el.style as any).opacity : 1,
                   filter: (el.type !== 'image' && el.type !== 'chart' && (el.style as any).boxShadow && (el.style as any).boxShadow !== 'none') ? `drop-shadow(${(el.style as any).boxShadow})` : ''
                 }">
@@ -2759,6 +2760,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/TemplateGallery.vue

@@ -245,13 +245,43 @@ const colorOptions = [
   { name: '黑色系', hex: '#212121' }
 ]
 
+/**
+ * 资产细分子类型枚举 (对应后端 AssetSubType 与 jvs-material-ui)
+ */
+export type StockSubType =
+  | 'Photos'
+  | 'Illustrations'
+  | 'Vectors'
+  | 'Icons'
+  | 'Videos'
+  | 'Music'
+  | 'Sound_Effects'
+  | 'GIF'
+  | '_3D_Models'
+
+// 页面分类 Tab -> 后端 /stock/search subType 映射 (对应 jvs-dam-2.5 AssetSubType)
+const tabToSubTypeMap: Record<string, StockSubType | undefined> = {
+  all: undefined,
+  image: 'Photos',
+  gif: 'GIF',
+  sticker: 'Icons',
+  svg: 'Vectors',
+  slide: undefined
+}
+
 const loading = ref(false)
-const categoryTree = ref<MaterialCategory[]>([])
 const pagedMaterials = ref<MaterialItem[]>([])
 const currentPage = ref(1)
 const pageSize = 24
 const totalRecords = ref(0)
 
+// 分页与异常熔断状态（彻底杜绝滚动到底部时的无限死循环请求）
+const loadingMore = ref(false)
+const loadFailed = ref(false)
+const loadErrorMsg = ref('')
+const reachEnd = ref(false)
+let scrollThrottleTimer: number | null = null
+
 // 预设类型中文名映射
 const typeNameMap: Record<string, string> = {
   image: '图库图片',
@@ -279,11 +309,33 @@ async function safeFetchJson(url: string, options: RequestInit = {}): Promise<an
   }
 }
 
-// 规范化素材数据项
+// 获取有效的公网素材搜索接口 URL（平滑兼容旧配置并默认使用 /jvs-dam/stock/search）
+function getEffectiveStockUrl(): string {
+  let url = (materialPageApiUrl?.value && materialPageApiUrl.value.trim()) ||
+            (materialApiUrl?.value && materialApiUrl.value.trim()) ||
+            DEFAULT_MATERIAL_PAGE_API_URL
+  if (url.includes('/api/dam/material/tree') || url.includes('/api/dam/material/page')) {
+    url = DEFAULT_MATERIAL_PAGE_API_URL
+  }
+  return url
+}
+
+// 规范化素材数据项（支持 MediaResource 格式及自定义素材项）
 function normalizeMaterialItem(item: any, defaultCatName = '', defaultType = ''): MaterialItem {
-  const type = item.type || defaultType || 'image'
-  let previewUrl = item.previewUrl || item.url || item.downloadUrl || ''
-  let url = item.url || item.previewUrl || item.downloadUrl || ''
+  const subType = item.assetSubType || item.subType || ''
+  let type = item.type || defaultType || ''
+  if (!type) {
+    if (subType === 'GIF') type = 'gif'
+    else if (subType === 'Icons') type = 'sticker'
+    else if (subType === 'Vectors') type = 'svg'
+    else if (subType === 'Photos' || subType === 'Illustrations') type = 'image'
+    else if (item.assetType === 'VIDEO') type = 'video'
+    else type = 'image'
+  }
+
+  let previewUrl = item.previewUrl || item.image || item.url || item.downloadUrl || item.sourceUrl || ''
+  let sourceUrl = item.sourceUrl || item.downloadUrl || item.url || previewUrl
+  let url = sourceUrl || previewUrl
 
   if (type === 'slide') {
     if (!previewUrl || previewUrl.includes('gold-cover.png')) {
@@ -294,19 +346,39 @@ function normalizeMaterialItem(item: any, defaultCatName = '', defaultType = '')
     }
   }
 
-  const fmt = item.format || getItemFormat({ ...item, url, previewUrl, type })
+  // 来源平台识别（如 PEXELS, PIXABAY, UNSPLASH, ICONIFY 等）
+  const platform = item.sourcePlatform || (item.id && typeof item.id === 'string' && item.id.includes('_') ? item.id.split('_')[0].toUpperCase() : '')
+
+  const fmt = item.format || getItemFormat({ ...item, url, previewUrl, sourceUrl, type, assetSubType: subType })
+
+  // 宽高比解析
+  let ratio = item.aspectRatio ? String(item.aspectRatio).replace(':', '/') : undefined
+  if (!ratio && item.width && item.height) {
+    ratio = `${item.width} / ${item.height}`
+  }
 
   return {
     ...item,
+    id: item.id || `stock-${Math.random().toString(36).slice(2, 9)}`,
+    title: item.title || `${platform ? `${platform} ` : ''}${subType ? typeNameMap[type] || subType : '素材'}`,
     type,
+    assetSubType: subType,
+    sourcePlatform: platform,
     format: fmt,
-    category: item.category || defaultCatName || (type && typeNameMap[type]) || type || '素材',
+    category: item.category || defaultCatName || (subType ? typeNameMap[type] || subType : '') || type || '素材',
     previewUrl,
-    url
+    url,
+    sourceUrl,
+    color: item.color || item.primaryColor || '',
+    primaryColor: item.primaryColor || item.color || '',
+    aspectRatio: ratio || '4 / 3',
+    originalWidth: item.width || item.originalWidth,
+    originalHeight: item.height || item.originalHeight,
+    tags: Array.isArray(item.tags) ? item.tags : []
   }
 }
 
-// 统一数据格式解析
+// 统一数据格式解析（兼容 jvs-dam-2.5 StockController R.ok(list) 及各种分页结构）
 function parseMaterialList(data: any): MaterialItem[] {
   if (!data) return []
   let rawList: any[] = []
@@ -328,59 +400,20 @@ function parseMaterialList(data: any): MaterialItem[] {
   return rawList.map(item => normalizeMaterialItem(item))
 }
 
-// 1. 获取首页分类树的 API 请求 (/jvs-dam/api/dam/material/tree)
-async function loadTreeMaterials(query = '') {
-  const baseTreeUrl = (materialTreeApiUrl?.value && materialTreeApiUrl.value.trim() && !materialTreeApiUrl.value.includes('/templates/index.json')) 
-    ? materialTreeApiUrl.value.trim() 
-    : ((materialApiUrl.value && materialApiUrl.value.trim() && !materialApiUrl.value.includes('/templates/index.json')) 
-        ? materialApiUrl.value.trim() 
-        : DEFAULT_MATERIAL_API_URL)
-
-  if (!baseTreeUrl) return
-
-  try {
-    loading.value = true
-    const q = query.trim()
-    const treeUrl = q 
-      ? `${baseTreeUrl}${baseTreeUrl.includes('?') ? '&' : '?'}title=${encodeURIComponent(q)}` 
-      : baseTreeUrl
-
-    const data = await safeFetchJson(treeUrl, {
-      headers: {
-        ...(materialHeaders.value || {})
-      }
-    })
-
-    if (Array.isArray(data?.data) && data.data.length > 0 && Array.isArray(data.data[0]?.items)) {
-      categoryTree.value = data.data.map((cat: any) => ({
-        ...cat,
-        name: cat.name || (cat.type ? typeNameMap[cat.type] : '') || cat.type,
-        items: (cat.items || []).map((item: any) => normalizeMaterialItem(item, cat.name, cat.type))
-      }))
-    } else {
-      const flatList = parseMaterialList(data)
-      categoryTree.value = flatList.length > 0 ? [
-        { id: 'all-items', type: 'image', name: '素材', hasMore: true, items: flatList }
-      ] : []
-    }
-  } catch (err: any) {
-    console.error('加载素材树出错:', err)
-  } finally {
-    loading.value = false
+// 核心检索方法：请求后端 stock/search 接口并发抓取 Pexels, Pixabay, Unsplash, Iconify 等平台
+async function fetchMaterials(page = 1, append = false) {
+  // 单页模板独立处理
+  if (filterParams.activeType === 'slide') {
+    await fetchSlideTemplates(page, append)
+    return
   }
-}
-
-// 分页与异常熔断状态（彻底杜绝滚动到底部时的无限死循环请求）
-const loadingMore = ref(false)
-const loadFailed = ref(false)
-const loadErrorMsg = ref('')
-const reachEnd = ref(false)
-let scrollThrottleTimer: number | null = null
 
-// 2. 请求某一分类的分页接口 (/jvs-dam/api/dam/material/page)
-async function fetchCategoryPage(type: string, page = 1, append = false, query = '') {
-  const pageUrl = (materialPageApiUrl?.value && materialPageApiUrl.value.trim()) || DEFAULT_MATERIAL_PAGE_API_URL
-  if (!pageUrl) {
+  const stockUrl = getEffectiveStockUrl()
+  if (!stockUrl) {
+    if (!append) {
+      pagedMaterials.value = []
+      totalRecords.value = 0
+    }
     reachEnd.value = true
     return
   }
@@ -391,87 +424,119 @@ async function fetchCategoryPage(type: string, page = 1, append = false, query =
     loadFailed.value = false
     loadErrorMsg.value = ''
 
-    let url = `${pageUrl}${pageUrl.includes('?') ? '&' : '?'}current=${page}&size=${pageSize}`
-    if (type && type !== 'all') {
-      url += `&type=${encodeURIComponent(type)}`
-    }
-    const q = query.trim()
+    const params = new URLSearchParams()
+    params.append('current', String(page))
+    params.append('size', String(pageSize))
+
+    const q = filterParams.query.trim()
     if (q) {
-      url += `&title=${encodeURIComponent(q)}`
+      params.append('keyword', q)
+    }
+
+    const subType = tabToSubTypeMap[filterParams.activeType]
+    if (subType) {
+      params.append('subType', subType)
     }
-    const data = await safeFetchJson(url, {
+
+    const fullUrl = `${stockUrl}${stockUrl.includes('?') ? '&' : '?'}${params.toString()}`
+    const data = await safeFetchJson(fullUrl, {
       headers: {
         ...(materialHeaders.value || {})
       }
     })
 
+    // 针对接口返回非成功状态（如未登录 code: -2 或业务异常）
+    if (data && data.code !== undefined && data.code !== 0 && data.code !== 200) {
+      if (!append) {
+        pagedMaterials.value = []
+        totalRecords.value = 0
+      }
+      reachEnd.value = true
+      return
+    }
+
     const newRecords = parseMaterialList(data)
 
-    // 若返回空数组，说明后续已无更多数据，彻底关闭加载开关
-    if (newRecords.length === 0) {
+    if (newRecords.length === 0 || newRecords.length < pageSize) {
       reachEnd.value = true
     } else {
       reachEnd.value = false
     }
 
     if (append) {
-      pagedMaterials.value = [...pagedMaterials.value, ...newRecords]
+      const existingIds = new Set(pagedMaterials.value.map(i => i.id))
+      const uniqueItems = newRecords.filter(i => !existingIds.has(i.id))
+      pagedMaterials.value = [...pagedMaterials.value, ...uniqueItems]
     } else {
       pagedMaterials.value = newRecords
     }
+
     currentPage.value = page
-    totalRecords.value = data.data?.total ?? (newRecords.length < pageSize ? (page - 1) * pageSize + newRecords.length : 9999)
+    totalRecords.value = data?.data?.total ?? data?.total ?? (reachEnd.value ? pagedMaterials.value.length : 9999)
   } catch (err: any) {
-    console.error('加载分页素材出错:', err)
-    // 熔断保护：记录失败并终止滚动自动重试
-    loadFailed.value = true
-    loadErrorMsg.value = err.message || '网络连接或接口异常'
+    console.warn('[Stock Search] 加载公网素材出错:', err)
+    if (!append) {
+      pagedMaterials.value = []
+      totalRecords.value = 0
+      reachEnd.value = true
+    } else {
+      loadFailed.value = true
+      loadErrorMsg.value = err.message || '网络连接或接口异常'
+    }
   } finally {
     loading.value = false
     loadingMore.value = false
   }
 }
 
-// 聚合当前素材列表
-const rawSourceMaterials = computed<MaterialItem[]>(() => {
-  if (pagedMaterials.value.length > 0) {
-    if (filterParams.activeType === 'all') {
-      const treeItems: MaterialItem[] = []
-      categoryTree.value.forEach(cat => {
-        if (cat.items && cat.items.length > 0) {
-          treeItems.push(...cat.items)
-        }
-      })
-      const map = new Map<string | number, MaterialItem>()
-      treeItems.forEach(i => map.set(i.id, i))
-      pagedMaterials.value.forEach(i => map.set(i.id, i))
-      return Array.from(map.values())
+// 加载单页 PPT 模板
+async function fetchSlideTemplates(page = 1, append = false) {
+  try {
+    loading.value = !append
+    loadingMore.value = append
+    loadFailed.value = false
+    loadErrorMsg.value = ''
+
+    const data = await safeFetchJson('/templates/index.json')
+    const templates = parseMaterialList(data)
+    if (templates.length > 0) {
+      pagedMaterials.value = templates
+      totalRecords.value = templates.length
+      reachEnd.value = true
+    } else {
+      pagedMaterials.value = []
+      totalRecords.value = 0
+      reachEnd.value = true
     }
-    return pagedMaterials.value
+  } catch (err: any) {
+    pagedMaterials.value = []
+    totalRecords.value = 0
+    reachEnd.value = true
+  } finally {
+    loading.value = false
+    loadingMore.value = false
   }
-  const items: MaterialItem[] = []
-  categoryTree.value.forEach(cat => {
-    if (cat.items && cat.items.length > 0) {
-      items.push(...cat.items)
-    }
-  })
-  return items
+}
+
+// 聚合当前素材列表
+const rawSourceMaterials = computed<MaterialItem[]>(() => {
+  return pagedMaterials.value
 })
 
 // 是否还有更多数据可供加载（若已失败或已到底，立即返回 false，防止触底循环）
 const hasMore = computed(() => {
   if (reachEnd.value || loadFailed.value) return false
   if (totalRecords.value > 0) {
-    return displayedMaterials.value.length < totalRecords.value
+    return pagedMaterials.value.length < totalRecords.value
   }
-  return false
+  return !reachEnd.value
 })
 
 // 加载更多分页数据
 async function loadMore() {
   if (loading.value || loadingMore.value || !hasMore.value || loadFailed.value || reachEnd.value) return
   const nextPage = currentPage.value + 1
-  await fetchCategoryPage(filterParams.activeType, nextPage, true, filterParams.query)
+  await fetchMaterials(nextPage, true)
 }
 
 // 手动点击重试（重置失败状态并重新触发加载）
@@ -479,7 +544,7 @@ async function retryLoadMore() {
   loadFailed.value = false
   loadErrorMsg.value = ''
   const targetPage = currentPage.value + 1
-  await fetchCategoryPage(filterParams.activeType, targetPage, true, filterParams.query)
+  await fetchMaterials(targetPage, true)
 }
 
 // 瀑布流滚动触底自动加载监听（带 250ms 节流与熔断保护）
@@ -505,7 +570,15 @@ const displayedMaterials = computed<MaterialItem[]>(() => {
   return rawSourceMaterials.value.filter(item => {
     // 1. 类型过滤 (红框2)
     if (filterParams.activeType !== 'all') {
-      if (item.type !== filterParams.activeType) return false
+      if (filterParams.activeType === 'slide') {
+        if (item.type !== 'slide' && !item.slide) return false
+      } else {
+        const subType = tabToSubTypeMap[filterParams.activeType]
+        if (subType) {
+          if (item.assetSubType && item.assetSubType !== subType) return false
+          if (!item.assetSubType && item.type !== filterParams.activeType) return false
+        }
+      }
     }
     // 2. 格式过滤 (红框3)
     if (filterParams.format) {
@@ -513,8 +586,9 @@ const displayedMaterials = computed<MaterialItem[]>(() => {
       if (fmt.toUpperCase() !== filterParams.format.toUpperCase()) return false
     }
     // 3. 颜色过滤 (红框3)
-    if (filterParams.color && item.color) {
-      if (item.color.toLowerCase() !== filterParams.color.toLowerCase()) return false
+    if (filterParams.color) {
+      const c = (item.color || item.primaryColor || '').toLowerCase()
+      if (!c || c !== filterParams.color.toLowerCase()) return false
     }
     return true
   })
@@ -541,22 +615,18 @@ async function switchCategoryTab(typeValue: string) {
   filterParams.activeType = typeValue
   currentPage.value = 1
   pagedMaterials.value = []
-  if (typeValue !== 'all') {
-    await fetchCategoryPage(typeValue, 1, false, filterParams.query)
-  } else {
-    await loadTreeMaterials(filterParams.query)
-  }
+  reachEnd.value = false
+  loadFailed.value = false
+  await fetchMaterials(1, false)
 }
 
 // 搜索处理（红框1）
 async function handleSearch() {
   currentPage.value = 1
   pagedMaterials.value = []
-  if (filterParams.activeType !== 'all') {
-    await fetchCategoryPage(filterParams.activeType, 1, false, filterParams.query)
-  } else {
-    await loadTreeMaterials(filterParams.query)
-  }
+  reachEnd.value = false
+  loadFailed.value = false
+  await fetchMaterials(1, false)
 }
 
 function clearQuery() {
@@ -591,9 +661,23 @@ function handleSelectMaterial(meta: MaterialItem) {
   if (meta.type === 'slide' || meta.slide) {
     handleInsertSlide(meta)
   } else {
-    const imgUrl = meta.url || meta.previewUrl || meta.downloadUrl
+    // 优先采用高清 sourceUrl，回退到 url / previewUrl / downloadUrl
+    const imgUrl = meta.sourceUrl || meta.url || meta.previewUrl || meta.downloadUrl
     if (imgUrl) {
-      addElement('image', imgUrl)
+      // 若包含长宽信息，按比例设定元素尺寸插入画布
+      let initialDimensions: { width?: number; height?: number } | undefined = undefined
+      const rawW = meta.originalWidth || meta.width
+      const rawH = meta.originalHeight || meta.height
+      if (rawW && rawH && rawW > 0 && rawH > 0) {
+        const maxWidth = 480
+        const maxHeight = 360
+        const scale = Math.min(maxWidth / rawW, maxHeight / rawH, 1)
+        initialDimensions = {
+          width: Math.round(rawW * scale),
+          height: Math.round(rawH * scale)
+        }
+      }
+      addElement('image', imgUrl, undefined, undefined, undefined, initialDimensions)
       notify(`已成功添加素材 "${meta.title || '图片'}" 到画布`)
     } else {
       notify('该素材暂无可用的图片地址')
@@ -650,7 +734,7 @@ async function handleInsertSlide(meta: MaterialItem) {
 }
 
 onMounted(() => {
-  loadTreeMaterials()
+  fetchMaterials(1, false)
 
   // 监听容器大小以实现极致自适应
   if (containerRef.value) {
@@ -674,8 +758,8 @@ onUnmounted(() => {
   window.removeEventListener('keydown', handleKeydown)
 })
 
-watch(() => materialTreeApiUrl?.value, () => {
-  loadTreeMaterials()
+watch([() => materialApiUrl?.value, () => materialPageApiUrl?.value, () => materialTreeApiUrl?.value], () => {
+  fetchMaterials(1, false)
 })
 </script>
 
@@ -884,6 +968,7 @@ watch(() => materialTreeApiUrl?.value, () => {
               <div class="card-bottom-info">
                 <div class="format-badge-box">
                   <span class="format-tag">{{ getItemFormat(item) }}</span>
+                  <span v-if="item.sourcePlatform" class="platform-tag">{{ item.sourcePlatform }}</span>
                   <span v-if="item.title" class="format-title-hint" :title="item.title">{{ item.title }}</span>
                 </div>
                 <button type="button" class="more-options-dot-btn" @click.stop="openItemMenu(item)">
@@ -1483,6 +1568,19 @@ watch(() => materialTreeApiUrl?.value, () => {
   flex-shrink: 0;
 }
 
+.platform-tag {
+  font-size: 9px;
+  font-weight: 700;
+  color: #2563eb;
+  background: #eff6ff;
+  border: 1px solid #dbeafe;
+  padding: 1px 5px;
+  border-radius: 3px;
+  letter-spacing: 0.4px;
+  flex-shrink: 0;
+  text-transform: uppercase;
+}
+
 .format-title-hint {
   font-size: 11px;
   color: #64748b;

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',