first

src/utils/displayImageUrl.js

@@ -12,3 +12,30 @@ export function displayImageUrl(path) {
   if (p.startsWith('http://') || p.startsWith('https://') || p.startsWith('//')) return p
   return p
 }
+
+/**
+ * 素材库网格缩略图：对阿里云 OSS 地址追加 image/resize，避免侧栏同时拉 30 张原图导致极慢。
+ * 非 OSS / 已有 x-oss-process / data 链原样返回。
+ * @param {string|null|undefined} path
+ * @param {number} [maxEdge=256] 长边像素（格子约 100px，256 兼顾 2x 屏）
+ */
+export function materialThumbnailUrl(path, maxEdge = 256) {
+  const base = displayImageUrl(path)
+  if (!base || base.startsWith('data:') || base.startsWith('blob:')) return base
+  let u = base
+  if (u.startsWith('//')) u = 'https:' + u
+  if (!/^https?:\/\//i.test(u)) return base
+  try {
+    const parsed = new URL(u)
+    const host = parsed.hostname || ''
+    if (!host.includes('aliyuncs.com')) return base
+    if (parsed.searchParams.has('x-oss-process')) return base
+    parsed.searchParams.set(
+      'x-oss-process',
+      `image/resize,m_lfit,w_${maxEdge},h_${maxEdge}`
+    )
+    return parsed.toString()
+  } catch {
+    return base
+  }
+}

src/view/TemplateManagement/CreateTemplate.vue

@@ -86,6 +86,7 @@
             :scroll-chips-left="scrollChipsLeft"
             :scroll-chips-right="scrollChipsRight"
             :resolve-material-url="resolveMaterialUrl"
+            :resolve-material-thumbnail-url="resolveMaterialThumbnailUrl"
             :material-hover-preview="setMaterialHoverPreview"
           />
         </div>
@@ -768,6 +769,7 @@ import {
 } from './constants.js'
 import {
   resolveMaterialUrl,
+  resolveMaterialThumbnailUrl,
   getImageLoadUrl,
   toStoragePath,
   formatFileSize,

src/view/TemplateManagement/components/MaterialTabPane.vue

@@ -76,7 +76,13 @@
             @mouseenter="onMaterialPreviewEnter(material)"
             @mouseleave="onMaterialPreviewLeave"
           >
-            <img :src="resolveMaterialUrl(material.material_url)" :alt="material.id" decoding="async" />
+            <img
+              :src="materialThumbSrc(material)"
+              :alt="material.id"
+              loading="lazy"
+              decoding="async"
+              fetchpriority="low"
+            />
             <div class="material-overlay">
               <el-icon><Plus /></el-icon>
               <span>添加</span>
@@ -105,7 +111,13 @@
               @mouseenter="onMaterialPreviewEnter(material)"
               @mouseleave="onMaterialPreviewLeave"
             >
-              <img :src="resolveMaterialUrl(material.material_url)" :alt="material.id" decoding="async" />
+              <img
+              :src="materialThumbSrc(material)"
+              :alt="material.id"
+              loading="lazy"
+              decoding="async"
+              fetchpriority="low"
+            />
               <div class="material-overlay">
                 <el-icon><Plus /></el-icon>
                 <span>添加</span>
@@ -141,7 +153,13 @@
                 @mouseenter="onMaterialPreviewEnter(material)"
                 @mouseleave="onMaterialPreviewLeave"
               >
-                <img :src="resolveMaterialUrl(material.material_url)" :alt="material.id" decoding="async" />
+                <img
+              :src="materialThumbSrc(material)"
+              :alt="material.id"
+              loading="lazy"
+              decoding="async"
+              fetchpriority="low"
+            />
               </div>
             </div>
           </div>
@@ -193,12 +211,21 @@ const props = defineProps({
   scrollChipsLeft: { type: Function, required: true },
   scrollChipsRight: { type: Function, required: true },
   resolveMaterialUrl: { type: Function, required: true },
+  /** 网格缩略图 URL（OSS 可走 image/resize）；未传则与 resolveMaterialUrl 相同 */
+  resolveMaterialThumbnailUrl: { type: Function, default: null },
   /** (url: string | null) => void 悬停缩略图显示大图预览，移开传 null */
   materialHoverPreview: { type: Function, default: null }
 })
 
 const emit = defineEmits(['update:materialSearch', 'material-page-change'])
 
+const materialThumbSrc = (m) => {
+  const raw = m?.material_url
+  return props.resolveMaterialThumbnailUrl
+    ? props.resolveMaterialThumbnailUrl(raw)
+    : props.resolveMaterialUrl(raw)
+}
+
 const onMaterialPreviewEnter = (m) => {
   props.materialHoverPreview?.(props.resolveMaterialUrl(m?.material_url))
 }

src/view/TemplateManagement/utils.js

@@ -8,9 +8,9 @@
 
 
 
-import { displayImageUrl } from '@/utils/displayImageUrl.js'
-
+import { displayImageUrl, materialThumbnailUrl } from '@/utils/displayImageUrl.js'
 
+export { materialThumbnailUrl }
 
 /**
 
@@ -28,6 +28,14 @@ export function resolveMaterialUrl(path) {
 
 }
 
+/** 素材库网格专用：在 resolveMaterialUrl 基础上对 OSS 使用缩略参数，减轻列表加载压力 */
+
+export function resolveMaterialThumbnailUrl(path) {
+
+  return materialThumbnailUrl(resolveMaterialUrl(path))
+
+}
+
 
 
 /** getImageLoadUrl 的别名，用于画布与预览图 */