jvs-ppt-ui 0.0.12 → 0.0.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jvs-ppt-ui",
   "private": false,
-  "version": "0.0.12",
+  "version": "0.0.14",
   "type": "module",
   "main": "./dist/lib/jvs-ppt-ui.umd.js",
   "module": "./dist/lib/jvs-ppt-ui.es.js",

package/src/App.vue

@@ -46,8 +46,8 @@ async function handleCustomUpload(fileOrBlob: File | Blob, context: UploadResour
 <template>
   <!-- :custom-upload="handleCustomUpload" -->
   <PptEditor ref="editorRef" :custom-upload="handleCustomUpload" :enable-mcp="true" :enable-ai="true"
-    ai-api-url="/jvs-dam/api/ppt/ai-replace" :enable-material="true" :readonly="true" :show-sidebar-right="false"
-    material-tree-api-url="/jvs-dam/api/dam/material/tree" material-page-api-url="/jvs-dam/api/dam/material/page"
-    material-api-url="/jvs-dam/api/dam/material/tree" material-save-api-url="/jvs-dam/api/dam/material/save"
+    ai-api-url="/jvs-dam/api/ppt/ai-replace" :enable-material="true"
+    material-api-url="/jvs-dam/stock/search" material-page-api-url="/jvs-dam/stock/search"
+    material-save-api-url="/jvs-dam/api/dam/material/save"
     @save="handleSave" @ready="handleReady" />
 </template>

package/src/components/CanvasArea.vue

@@ -18,6 +18,7 @@ import CanvasGroupElement from './canvas/elements/CanvasGroupElement.vue'
 import CanvasSymbolPanel from './canvas/panels/CanvasSymbolPanel.vue'
 import CanvasSearchPanel from './canvas/panels/CanvasSearchPanel.vue'
 import CanvasSelectionPanel from './canvas/panels/CanvasSelectionPanel.vue'
+import { isTextContainingElement } from '../utils/groupFlip'
 
 import { useCanvasTable, cleanTableDOMForSaving } from '../composables/canvas/useCanvasTable'
 import { useCanvasAlignment } from '../composables/canvas/useCanvasAlignment'
@@ -4405,7 +4406,7 @@ function getOverlayStyle(el: any) {
       width: `${w}px`,
       height: `${h}px`,
       zIndex: isSelectedActive ? 300 : 100,
-      transform: `rotate(${((parentPixels.rotate || 0) + (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(${((parentPixels.rotate || 0) + (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})`,
       pointerEvents: 'none' as const,
       boxSizing: 'border-box' as const,
       '--handle-scale': +(100 / (zoomRatio.value || 100)).toFixed(4)
@@ -4419,7 +4420,7 @@ function getOverlayStyle(el: any) {
     width: getOverlayWidth(el),
     height: getOverlayHeight(el),
     zIndex: isSelectedActive ? 300 : 100,
-    transform: el.type === 'line' ? 'none' : `rotate(${el.style.rotate || 0}deg) scale(${el.type !== 'text' && ((el.style as any)?.flipH || el.flipH || el.isFlipH) ? -1 : 1}, ${el.type !== 'text' && ((el.style as any)?.flipV || el.flipV || el.isFlipV) ? -1 : 1})`,
+    transform: el.type === 'line' ? 'none' : `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})`,
     pointerEvents: 'none' as const,
     boxSizing: 'border-box' as const,
     '--handle-scale': +(100 / (zoomRatio.value || 100)).toFixed(4)
@@ -7857,7 +7858,7 @@ async function handleGlobalPaste(e: ClipboardEvent) {
                   width: (replica.el.type === 'text' && !isMasterOrPlaceholder(replica.el) && (replica.el.autoFit?.type === 'shape' || replica.el.style?.width === 'auto') && !replica.el.content?.includes('<table') && !replica.el.latex && (replica.el.style?.writingMode === 'vertical-rl' || replica.el.style?.writingMode === 'vertical-lr')) ? 'auto' : (replica.el.style?.width || (replica.el.width ? `${replica.el.width}px` : 'auto')),
                   height: (replica.el.type === 'text' && !isMasterOrPlaceholder(replica.el) && (replica.el.autoFit?.type === 'shape' || replica.el.style?.height === 'auto') && !replica.el.content?.includes('<table') && !replica.el.latex && replica.el.style?.writingMode !== 'vertical-rl' && replica.el.style?.writingMode !== 'vertical-lr') ? 'auto' : (replica.el.style?.height || (replica.el.height ? `${replica.el.height}px` : 'auto')),
                   zIndex: 2,
-                  transform: replica.el.type === 'line' ? 'none' : `rotate(${replica.el.style?.rotate || replica.el.rotate || 0}deg) scale(${replica.el.type !== 'text' && ((replica.el.style as any)?.flipH || replica.el.flipH || replica.el.isFlipH) ? -1 : 1}, ${replica.el.type !== 'text' && ((replica.el.style as any)?.flipV || replica.el.flipV || replica.el.isFlipV) ? -1 : 1})`,
+                  transform: replica.el.type === 'line' ? 'none' : `rotate(${replica.el.style?.rotate || replica.el.rotate || 0}deg) scale(${!isTextContainingElement(replica.el) && ((replica.el.style as any)?.flipH || replica.el.flipH || replica.el.isFlipH) ? -1 : 1}, ${!isTextContainingElement(replica.el) && ((replica.el.style as any)?.flipV || replica.el.flipV || replica.el.isFlipV) ? -1 : 1})`,
                   opacity: (replica.el.style as any)?.opacity !== undefined ? (replica.el.style as any)?.opacity : 1,
                   filter: getElementDropShadowFilter(replica.el),
                   pointerEvents: 'none'
@@ -7947,7 +7948,7 @@ async function handleGlobalPaste(e: ClipboardEvent) {
                 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.style as any)?.flipH || el.flipH || el.isFlipH) ? -1 : 1}, ${el.type !== 'text' && ((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'
               }">
@@ -8047,7 +8048,7 @@ async function handleGlobalPaste(e: ClipboardEvent) {
                 height: (el.type === 'text' && !isMasterOrPlaceholder(el) && (el.autoFit?.type === 'shape' || el.style?.height === 'auto') && !el.content?.includes('<table') && !el.latex && el.style?.writingMode !== 'vertical-rl' && el.style?.writingMode !== 'vertical-lr') ? 'auto' : (el.style?.height || (el.height ? `${el.height}px` : 'auto')),
                 zIndex: 3,
                 cursor: isReadonly ? 'default' : ((isEditingText && (selectedElementId === el.id || editingElementId === el.id) && (el.type === 'text' || el.type === 'shape') && !el.latex && !el.content?.includes('<table')) ? 'text' : undefined),
-                transform: el.type === 'line' ? 'none' : `rotate(${el.style?.rotate || 0}deg) scale(${el.type !== 'text' && ((el.style as any)?.flipH || el.flipH || el.isFlipH) ? -1 : 1}, ${el.type !== 'text' && ((el.style as any)?.flipV || el.flipV || el.isFlipV) ? -1 : 1})`,
+                transform: el.type === 'line' ? 'none' : `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: getElementDropShadowFilter(el),
                 pointerEvents: (isDragging || isCanvasDragging) ? 'none' : ((isDraggingLine && el.id === selectedElementId) ? 'none' : (isLockedMasterElement(el) ? 'none' : (el.type === 'group' ? 'none' : (el.type === 'line' ? 'none' : (((el.type === 'shape' || !el.type) && !hasElementFill(el) && !hasElementBorder(el) && !isImagePlaceholder(el)) ? 'none' : 'auto')))))

package/src/components/Header.vue

@@ -13,6 +13,7 @@ import { parseColorString, extractTextAlignFromHtml, updateTextAlignInHtml, norm
 
 import { shapeFormulas, shapeList as getPptxShapeList, ensurePptxShapes } from '../utils/pptxShapesLazy'
 import { inferElementTextType, type SlideTextType } from '../utils/textTypes'
+import { applyGroupGeometryFlip } from '../utils/groupFlip'
 // 快捷键弹层异步化；mock DSL 模板(~77KB)改为触发时动态加载
 const ShortcutsDialog = defineAsyncComponent(() => import('./ShortcutsDialog.vue'))
 
@@ -5829,6 +5830,10 @@ const parsePPTXJSONData = (json: any, zipMeta?: any) => {
             elements: sortedTopGroupChildren.map((child: any) => convertChildElement(child, topW, topH, childIdMap))
           }
 
+          if (grpFlipH || grpFlipV) {
+            applyGroupGeometryFlip(groupElement, grpFlipH, grpFlipV)
+          }
+
           slide.elements.push(groupElement)
         }
         else if (el.type === 'diagram') {

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)
@@ -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})` : ''
                 }">

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;