jvs-ppt-ui 0.0.8 → 0.0.10

package/src/components/TemplateGallery.vue

@@ -1,6 +1,16 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue'
-import { ElImageViewer } from 'element-plus'
+import { ref, reactive, computed, onMounted, onUnmounted, watch } from 'vue'
+import {
+  Search,
+  Plus,
+  Close,
+  CircleCloseFilled,
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  MoreFilled,
+  View
+} from '@element-plus/icons-vue'
 import { useSlides, DEFAULT_MATERIAL_API_URL, DEFAULT_MATERIAL_PAGE_API_URL } from '../composables/useSlides'
 
 const {
@@ -12,10 +22,16 @@ const {
   materialPageApiUrl,
   materialHeaders,
   saveCurrentSlideToMaterial,
-  activeSlide
+  activeSlide,
+  materialPopoverVisible
 } = useSlides()
 
-// 默认单页模板封面地址（slide 也应该显示 https://frame.bctools.cn/jvs-oss/material/templates/gold-cover.png）
+// 容器响应式宽度监听（区分浮窗大屏与侧边栏窄屏模式）
+const containerRef = ref<HTMLElement | null>(null)
+const isNarrow = ref(false)
+let resizeObserver: ResizeObserver | null = null
+
+// 默认单页模板封面地址
 const DEFAULT_SLIDE_COVER = 'https://frame.bctools.cn/jvs-oss/material/templates/gold-cover.png'
 
 function getMaterialThumb(item: MaterialItem): string {
@@ -29,65 +45,141 @@ function getMaterialThumb(item: MaterialItem): string {
   return item.previewUrl || item.url || item.downloadUrl || ''
 }
 
-// 图片素材大图预览状态（支持同类型素材上下/左右切换）
+// 提取格式标签
+function getItemFormat(item: MaterialItem): string {
+  if (item.format) return item.format.toUpperCase()
+  const u = (item.url || item.previewUrl || item.fileName || '').toLowerCase()
+  if (u.includes('.png')) return 'PNG'
+  if (u.includes('.gif')) return 'GIF'
+  if (u.includes('.svg')) return 'SVG'
+  if (u.includes('.psd')) return 'PSD'
+  if (u.includes('.ai')) return 'AI'
+  if (u.includes('.mov') || u.includes('.mp4')) return 'MOV'
+  if (item.type === 'gif') return 'GIF'
+  if (item.type === 'svg') return 'SVG'
+  if (item.type === 'sticker') return 'PNG'
+  return 'JPG'
+}
+
+// 100% 自研可靠的全屏大图画廊预览状态
+interface PreviewItem {
+  url: string
+  title: string
+  format: string
+  meta: MaterialItem
+}
+
 const previewVisible = ref(false)
-const previewList = ref<string[]>([])
+const previewList = ref<PreviewItem[]>([])
 const previewInitialIndex = ref(0)
+const wasPopoverOpenBeforePreview = ref(false)
+
+const currentPreviewItem = computed(() => {
+  if (previewList.value.length === 0) return null
+  return previewList.value[previewInitialIndex.value] || null
+})
+
+function openPreview(item: MaterialItem, e?: Event) {
+  if (e) {
+    e.stopPropagation()
+    e.preventDefault()
+  }
 
-function openPreview(item: MaterialItem, contextList?: MaterialItem[]) {
   const currentUrl = getMaterialThumb(item)
   if (!currentUrl) {
     notify('该素材暂无可用预览地址')
     return
   }
 
-  const targetType = item.type || (activeCategory.value?.type) || 'image'
+  const validItems: PreviewItem[] = []
+  displayedMaterials.value.forEach(m => {
+    const u = getMaterialThumb(m)
+    if (u) {
+      validItems.push({
+        url: u,
+        title: m.title || '素材大图',
+        format: getItemFormat(m),
+        meta: m
+      })
+    }
+  })
 
-  // 1. 优先从给定的 contextList 中筛选同类型素材
-  let candidateItems: MaterialItem[] = []
-  if (contextList && contextList.length > 0) {
-    candidateItems = contextList.filter(m => (m.type === targetType || !m.type))
-  } else if (viewMode.value === 'category' && detailMaterials.value.length > 0) {
-    // 2. 如果在分类模式中，从 detailMaterials 中筛选
-    candidateItems = detailMaterials.value.filter(m => (m.type === targetType || !m.type))
+  const targetIdx = validItems.findIndex(i => i.url === currentUrl)
+  if (targetIdx >= 0) {
+    previewInitialIndex.value = targetIdx
   } else {
-    // 3. 首页树模式中，从 categoryTree 中找对应分类的 items 或所有同类型 items
-    const matchedCat = categoryTree.value.find(c => c.type === targetType)
-    if (matchedCat && matchedCat.items && matchedCat.items.length > 0) {
-      candidateItems = matchedCat.items
-    } else {
-      candidateItems = categoryTree.value
-        .flatMap(c => c.items || [])
-        .filter(m => (m.type === targetType))
-    }
+    validItems.unshift({
+      url: currentUrl,
+      title: item.title || '素材大图',
+      format: getItemFormat(item),
+      meta: item
+    })
+    previewInitialIndex.value = 0
   }
 
-  // 提取出有效的图片 URL 列表
-  const validUrls: string[] = []
-  candidateItems.forEach(m => {
-    const u = getMaterialThumb(m)
-    if (u && !validUrls.includes(u)) {
-      validUrls.push(u)
-    }
-  })
+  previewList.value = validItems
 
-  // 如果筛选出的列表里没有当前图，确保加进去
-  if (!validUrls.includes(currentUrl)) {
-    validUrls.unshift(currentUrl)
+  // 预览大图时，隐藏素材弹窗，并记录状态以便关闭预览后无缝恢复
+  if (materialPopoverVisible && materialPopoverVisible.value) {
+    wasPopoverOpenBeforePreview.value = true
+    materialPopoverVisible.value = false
+  } else {
+    wasPopoverOpenBeforePreview.value = false
   }
 
-  previewList.value = validUrls
-  const idx = validUrls.indexOf(currentUrl)
-  previewInitialIndex.value = idx >= 0 ? idx : 0
   previewVisible.value = true
 }
 
-interface MaterialItem {
-  id: string
+function closePreview() {
+  previewVisible.value = false
+  if (wasPopoverOpenBeforePreview.value && materialPopoverVisible) {
+    wasPopoverOpenBeforePreview.value = false
+    // 延时微任务以防预览弹窗的点击事件穿透触发 Popover 的外部关闭逻辑
+    setTimeout(() => {
+      materialPopoverVisible.value = true
+    }, 60)
+  }
+}
+
+function prevPreview() {
+  if (previewList.value.length <= 1) return
+  previewInitialIndex.value = (previewInitialIndex.value - 1 + previewList.value.length) % previewList.value.length
+}
+
+function nextPreview() {
+  if (previewList.value.length <= 1) return
+  previewInitialIndex.value = (previewInitialIndex.value + 1) % previewList.value.length
+}
+
+function handleInsertFromPreview() {
+  if (currentPreviewItem.value) {
+    handleSelectMaterial(currentPreviewItem.value.meta)
+    wasPopoverOpenBeforePreview.value = false
+    previewVisible.value = false
+  }
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (!previewVisible.value) return
+  if (e.key === 'Escape' || e.key === 'Esc') {
+    e.preventDefault()
+    e.stopPropagation()
+    closePreview()
+  } else if (e.key === 'ArrowLeft') {
+    prevPreview()
+  } else if (e.key === 'ArrowRight') {
+    nextPreview()
+  }
+}
+
+export interface MaterialItem {
+  id: string | number
   title: string
   pptSource?: string
   category?: string
   type?: string
+  format?: string
+  color?: string
   slideIndex?: number
   fileName?: string
   url?: string
@@ -99,10 +191,11 @@ interface MaterialItem {
   originalHeight?: number
   originalSize?: { width: number; height: number }
   tags?: string[]
+  aspectRatio?: string
   [key: string]: any
 }
 
-interface MaterialCategory {
+export interface MaterialCategory {
   id: string
   type: string
   name: string
@@ -110,21 +203,56 @@ interface MaterialCategory {
   items?: MaterialItem[]
 }
 
-// 视图模式：'tree' (首页分类树分块模式) | 'category' (进入单独分类详情模式)
-const viewMode = ref<'tree' | 'category'>('tree')
-const activeCategory = ref<MaterialCategory | null>(null)
+// 统一筛选与搜索模型（红框1 + 红框2 + 红框3）
+const filterParams = reactive({
+  query: '', // 红框1：搜索关键词
+  activeType: 'all', // 红框2：分类 Tabs
+  sort: 'recommend', // 红框3：综合排序
+  format: '', // 红框3：格式筛选
+  color: '' // 红框3：颜色筛选
+})
+
+// 分类 Tabs（红框2）
+const categoryTabs = [
+  { label: '全部', value: 'all' },
+  { label: '图片', value: 'image' },
+  { label: '动图', value: 'gif' },
+  { label: '免抠', value: 'sticker' },
+  { label: '矢量', value: 'svg' },
+  { label: '模板', value: 'slide' }
+]
+
+// 排序选项（红框3）
+const sortOptions = [
+  { label: '综合排序', value: 'recommend' },
+  { label: '最新上传', value: 'latest' },
+  { label: '热门下载', value: 'hot' }
+]
+
+// 格式选项（红框3下拉）
+const formatOptions = ['JPG', 'PNG', 'GIF', 'SVG', 'EPS', 'PSD', 'MOV', 'AI']
+
+// 常用色系
+const colorOptions = [
+  { name: '蓝色系', hex: '#2196F3' },
+  { name: '青色系', hex: '#00BCD4' },
+  { name: '绿色系', hex: '#4CAF50' },
+  { name: '黄色系', hex: '#FFC107' },
+  { name: '橙色系', hex: '#FF9800' },
+  { name: '红色系', hex: '#F44336' },
+  { name: '紫色系', hex: '#9C27B0' },
+  { name: '白色系', hex: '#FFFFFF' },
+  { name: '黑色系', hex: '#212121' }
+]
 
 const loading = ref(false)
-const searchQuery = ref('')
 const categoryTree = ref<MaterialCategory[]>([])
-
-// 分页列表（用于进入分类详情模式和搜索模式）
-const detailMaterials = ref<MaterialItem[]>([])
+const pagedMaterials = ref<MaterialItem[]>([])
 const currentPage = ref(1)
-const pageSize = 20
+const pageSize = 24
 const totalRecords = ref(0)
 
-// 预设类型映射字典
+// 预设类型中文名映射
 const typeNameMap: Record<string, string> = {
   image: '图库图片',
   gif: '动图GIF',
@@ -133,14 +261,6 @@ const typeNameMap: Record<string, string> = {
   slide: '单页模板'
 }
 
-// 保存素材弹窗状态
-const saveDialogVisible = ref(false)
-const saveLoading = ref(false)
-const saveForm = ref({
-  title: '',
-  category: '正文'
-})
-
 // 安全的 JSON 请求辅助函数
 async function safeFetchJson(url: string, options: RequestInit = {}): Promise<any> {
   const response = await fetch(url, options)
@@ -150,7 +270,7 @@ async function safeFetchJson(url: string, options: RequestInit = {}): Promise<an
   }
   const trimmed = rawText.trim()
   if (trimmed.startsWith('<') || trimmed.toLowerCase().startsWith('<!doctype')) {
-    throw new Error(`接口地址 [${url}] 返回了 HTML 网页而非有效 JSON 数据，请确认接口地址是否正确或后端代理是否配置。`)
+    throw new Error(`接口地址返回了 HTML 网页而非有效 JSON 数据`)
   }
   try {
     return JSON.parse(rawText)
@@ -159,9 +279,9 @@ async function safeFetchJson(url: string, options: RequestInit = {}): Promise<an
   }
 }
 
-// 规范化素材数据项（单页模板自动补充规范的封面图地址）
+// 规范化素材数据项
 function normalizeMaterialItem(item: any, defaultCatName = '', defaultType = ''): MaterialItem {
-  const type = item.type || defaultType
+  const type = item.type || defaultType || 'image'
   let previewUrl = item.previewUrl || item.url || item.downloadUrl || ''
   let url = item.url || item.previewUrl || item.downloadUrl || ''
 
@@ -174,9 +294,12 @@ function normalizeMaterialItem(item: any, defaultCatName = '', defaultType = '')
     }
   }
 
+  const fmt = item.format || getItemFormat({ ...item, url, previewUrl, type })
+
   return {
     ...item,
     type,
+    format: fmt,
     category: item.category || defaultCatName || (type && typeNameMap[type]) || type || '素材',
     previewUrl,
     url
@@ -206,7 +329,6 @@ function parseMaterialList(data: any): MaterialItem[] {
 }
 
 // 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() 
@@ -230,14 +352,12 @@ async function loadTreeMaterials(query = '') {
     })
 
     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 }
@@ -245,38 +365,36 @@ async function loadTreeMaterials(query = '') {
     }
   } catch (err: any) {
     console.error('加载素材树出错:', err)
-    notify(err.message || '无法加载素材库，请确认素材接口地址或配置文件是否正确。')
   } finally {
     loading.value = false
   }
 }
 
-// 2. 进入具体分类详情 (切换为分类模式，并调用 /page 接口)
-async function enterCategory(cat: MaterialCategory) {
-  activeCategory.value = cat
-  viewMode.value = 'category'
-  currentPage.value = 1
-  detailMaterials.value = []
-  await fetchCategoryPage(cat.type, 1, false, searchQuery.value.trim())
-}
-
-// 返回首页分类树
-function backToTree() {
-  viewMode.value = 'tree'
-  activeCategory.value = null
-  currentPage.value = 1
-  detailMaterials.value = []
-  loadTreeMaterials(searchQuery.value.trim())
-}
+// 分页与异常熔断状态（彻底杜绝滚动到底部时的无限死循环请求）
+const loadingMore = ref(false)
+const loadFailed = ref(false)
+const loadErrorMsg = ref('')
+const reachEnd = ref(false)
+let scrollThrottleTimer: number | null = null
 
-// 请求具体分类的分页数据 (/jvs-dam/api/dam/material/page)
+// 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) return
+  if (!pageUrl) {
+    reachEnd.value = true
+    return
+  }
 
   try {
     loading.value = !append
-    let url = `${pageUrl}${pageUrl.includes('?') ? '&' : '?'}type=${encodeURIComponent(type)}&current=${page}&size=${pageSize}`
+    loadingMore.value = append
+    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()
     if (q) {
       url += `&title=${encodeURIComponent(q)}`
@@ -288,110 +406,187 @@ async function fetchCategoryPage(type: string, page = 1, append = false, query =
     })
 
     const newRecords = parseMaterialList(data)
+
+    // 若返回空数组，说明后续已无更多数据，彻底关闭加载开关
+    if (newRecords.length === 0) {
+      reachEnd.value = true
+    } else {
+      reachEnd.value = false
+    }
+
     if (append) {
-      detailMaterials.value = [...detailMaterials.value, ...newRecords]
+      pagedMaterials.value = [...pagedMaterials.value, ...newRecords]
     } else {
-      detailMaterials.value = newRecords
+      pagedMaterials.value = newRecords
     }
     currentPage.value = page
-    totalRecords.value = data.data?.total ?? newRecords.length
+    totalRecords.value = data.data?.total ?? (newRecords.length < pageSize ? (page - 1) * pageSize + newRecords.length : 9999)
   } catch (err: any) {
-    console.error('加载分类详情出错:', err)
-    notify(err.message || '获取分类素材失败，请稍后重试')
+    console.error('加载分页素材出错:', err)
+    // 熔断保护：记录失败并终止滚动自动重试
+    loadFailed.value = true
+    loadErrorMsg.value = err.message || '网络连接或接口异常'
   } finally {
     loading.value = false
+    loadingMore.value = false
   }
 }
 
-// 3. 搜索处理
-// 规则：未进入单独分类时，搜索调用树接口 (/tree?title=...)
-// 进入单独分类后，搜索调用该分类的分页接口 (/page?type=...&title=...)
-async function handleSearch() {
-  const query = searchQuery.value.trim()
+// 聚合当前素材列表
+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())
+    }
+    return pagedMaterials.value
+  }
+  const items: MaterialItem[] = []
+  categoryTree.value.forEach(cat => {
+    if (cat.items && cat.items.length > 0) {
+      items.push(...cat.items)
+    }
+  })
+  return items
+})
 
-  if (viewMode.value === 'category' && activeCategory.value) {
-    // 在具体分类内搜索
-    currentPage.value = 1
-    detailMaterials.value = []
-    await fetchCategoryPage(activeCategory.value.type, 1, false, query)
-  } else {
-    // 在首页树搜索
-    viewMode.value = 'tree'
-    activeCategory.value = null
-    await loadTreeMaterials(query)
+// 是否还有更多数据可供加载（若已失败或已到底，立即返回 false，防止触底循环）
+const hasMore = computed(() => {
+  if (reachEnd.value || loadFailed.value) return false
+  if (totalRecords.value > 0) {
+    return displayedMaterials.value.length < totalRecords.value
   }
+  return false
+})
+
+// 加载更多分页数据
+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)
 }
 
-// 加载更多（仅分类详情模式生效）
-function loadMore() {
-  if (viewMode.value === 'category' && activeCategory.value) {
-    fetchCategoryPage(activeCategory.value.type, currentPage.value + 1, true, searchQuery.value.trim())
-  }
+// 手动点击重试（重置失败状态并重新触发加载）
+async function retryLoadMore() {
+  loadFailed.value = false
+  loadErrorMsg.value = ''
+  const targetPage = currentPage.value + 1
+  await fetchCategoryPage(filterParams.activeType, targetPage, true, filterParams.query)
 }
 
-const hasMore = computed(() => {
-  return detailMaterials.value.length < totalRecords.value
-})
+// 瀑布流滚动触底自动加载监听（带 250ms 节流与熔断保护）
+function handleScroll(e: Event) {
+  if (loading.value || loadingMore.value || loadFailed.value || reachEnd.value || !hasMore.value) {
+    return
+  }
 
-const scrollStates = ref<Record<string, { canLeft: boolean; canRight: boolean }>>({})
+  if (scrollThrottleTimer) return
+  scrollThrottleTimer = window.setTimeout(() => {
+    scrollThrottleTimer = null
+  }, 250)
 
-function onCategoryScroll(catId: string, e: Event) {
   const el = e.target as HTMLElement
   if (!el) return
-  const canLeft = el.scrollLeft > 10
-  const hasOverflow = el.scrollWidth > el.clientWidth + 10
-  const canRight = hasOverflow ? (el.scrollLeft < el.scrollWidth - el.clientWidth - 10) : false
-  scrollStates.value[catId] = { canLeft, canRight }
+  if (el.scrollHeight - (el.scrollTop + el.clientHeight) < 140) {
+    loadMore()
+  }
 }
 
-// 维护组件实例内的滚动容器引用，杜绝跨组件/跨实例 document.getElementById 冲突
-const categoryScrollRefs = ref<Record<string, HTMLElement | null>>({})
-
-function setCategoryScrollRef(catId: string, el: any) {
-  if (el) {
-    categoryScrollRefs.value[catId] = el as HTMLElement
-    // 默认保持初始状态：左翻页隐藏，右翻页显示（保证初次挂载布局未稳定时不被误隐藏）
-    if (!scrollStates.value[catId]) {
-      scrollStates.value[catId] = { canLeft: false, canRight: true }
+// 根据红框筛选条件过滤后的瀑布流素材列表（红框4）
+const displayedMaterials = computed<MaterialItem[]>(() => {
+  return rawSourceMaterials.value.filter(item => {
+    // 1. 类型过滤 (红框2)
+    if (filterParams.activeType !== 'all') {
+      if (item.type !== filterParams.activeType) return false
+    }
+    // 2. 格式过滤 (红框3)
+    if (filterParams.format) {
+      const fmt = getItemFormat(item)
+      if (fmt.toUpperCase() !== filterParams.format.toUpperCase()) return false
     }
+    // 3. 颜色过滤 (红框3)
+    if (filterParams.color && item.color) {
+      if (item.color.toLowerCase() !== filterParams.color.toLowerCase()) return false
+    }
+    return true
+  })
+})
+
+// 筛选标签计算
+const currentSortLabel = computed(() => {
+  const match = sortOptions.find(o => o.value === filterParams.sort)
+  return match ? match.label : '综合排序'
+})
+
+const currentColorLabel = computed(() => {
+  if (!filterParams.color) return '颜色'
+  const match = colorOptions.find(c => c.hex.toLowerCase() === filterParams.color.toLowerCase())
+  return match ? match.name : '已选色'
+})
+
+const hasActiveFilters = computed(() => {
+  return !!filterParams.format || !!filterParams.color || filterParams.sort !== 'recommend'
+})
+
+// 切换分类 Tab（红框2）
+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)
   }
 }
 
-// 横向平滑滚动辅助（支持向左和向右翻页，具备多层级 DOM 节点获取兜底）
-function scrollCategory(catId: string, direction: 'left' | 'right', event?: MouseEvent) {
-  let el = categoryScrollRefs.value[catId]
-  if (!el && event?.currentTarget) {
-    const wrapper = (event.currentTarget as HTMLElement).closest('.category-row-wrapper')
-    el = wrapper?.querySelector('.category-row-scroll') as HTMLElement | null
-  }
-  if (!el) {
-    el = document.getElementById(`cat-scroll-${catId}`)
-  }
-  if (el) {
-    // 平滑滚动步长：取容器当前可视宽度的 75%（至少 160px，至多 320px）
-    const step = Math.max(160, Math.min(320, Math.floor(el.clientWidth * 0.75)))
-    const offset = direction === 'right' ? step : -step
-    el.scrollBy({ left: offset, behavior: 'smooth' })
-    setTimeout(() => {
-      if (el) {
-        const canLeft = el.scrollLeft > 10
-        const hasOverflow = el.scrollWidth > el.clientWidth + 10
-        const canRight = hasOverflow ? (el.scrollLeft < el.scrollWidth - el.clientWidth - 10) : false
-        scrollStates.value[catId] = { canLeft, canRight }
-      }
-    }, 320)
+// 搜索处理（红框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)
   }
 }
 
-// 判断素材是否为图片类资产
-function isImageMaterial(meta: MaterialItem): boolean {
-  if (meta.type === 'slide') return false
-  if (meta.type === 'image' || meta.type === 'gif' || meta.type === 'sticker' || meta.type === 'svg') return true
-  const u = (meta.url || meta.previewUrl || '').toLowerCase()
-  return u.endsWith('.png') || u.endsWith('.jpg') || u.endsWith('.jpeg') || u.endsWith('.gif') || u.endsWith('.svg') || u.endsWith('.webp')
+function clearQuery() {
+  filterParams.query = ''
+  handleSearch()
+}
+
+function handleSortChange(val: string) {
+  filterParams.sort = val
+}
+
+function handleFormatChange(val: string) {
+  filterParams.format = val
+}
+
+function handleColorChange(val: string) {
+  filterParams.color = val
+}
+
+function resetFilters() {
+  filterParams.sort = 'recommend'
+  filterParams.format = ''
+  filterParams.color = ''
+}
+
+function openItemMenu(item: MaterialItem) {
+  notify(`素材: ${item.title || '无标题'} (${getItemFormat(item)})`)
 }
 
-// 点击插入素材
+// 点击使用/插入素材至画布
 function handleSelectMaterial(meta: MaterialItem) {
   if (meta.type === 'slide' || meta.slide) {
     handleInsertSlide(meta)
@@ -399,9 +594,9 @@ function handleSelectMaterial(meta: MaterialItem) {
     const imgUrl = meta.url || meta.previewUrl || meta.downloadUrl
     if (imgUrl) {
       addElement('image', imgUrl)
-      notify(`已添加素材 "${meta.title || '图片'}" 到画布`)
+      notify(`已成功添加素材 "${meta.title || '图片'}" 到画布`)
     } else {
-      notify('该素材暂无可用的预览或图片地址')
+      notify('该素材暂无可用的图片地址')
     }
   }
 }
@@ -410,7 +605,6 @@ function handleSelectMaterial(meta: MaterialItem) {
 async function handleInsertSlide(meta: MaterialItem) {
   try {
     notify(`正在读取页面素材 [${meta.title || '单页模板'}]...`)
-
     const fallbackSize = (typeof meta.originalWidth === 'number' && typeof meta.originalHeight === 'number')
       ? { width: meta.originalWidth, height: meta.originalHeight }
       : undefined
@@ -446,181 +640,219 @@ async function handleInsertSlide(meta: MaterialItem) {
     if (!slideObj) {
       throw new Error('单页数据格式异常')
     }
-    
+
     insertExternalSlide(slideObj, originalSize)
+    notify(`已成功插入单页模板 [${meta.title || '素材'}]`)
   } catch (err: any) {
-    console.error('导入单页出错:', err)
-    notify(`导入单页失败: ${err.message || '未知错误'}`)
-  }
-}
-
-function truncateText(text: string, len = 20): string {
-  if (!text || text === '无文字页面') return '（排版占位/纯图形页）'
-  return text.length > len ? text.substring(0, len) + '...' : text
-}
-
-// 打开保存当前页对话框
-function openSaveDialog() {
-  const currentTitle = activeSlide.value?.title || `幻灯片素材_${Date.now().toString().slice(-4)}`
-  saveForm.value = {
-    title: currentTitle,
-    category: '正文'
+    console.error('加载单页模板失败:', err)
+    notify(err.message || '加载单页模板失败')
   }
-  saveDialogVisible.value = true
 }
 
-// 执行保存素材的 API 请求
-async function handleConfirmSave() {
-  if (!saveForm.value.title.trim()) {
-    notify('请输入素材名称')
-    return
-  }
+onMounted(() => {
+  loadTreeMaterials()
 
-  try {
-    saveLoading.value = true
-    const success = await saveCurrentSlideToMaterial({
-      title: saveForm.value.title.trim(),
-      category: saveForm.value.category
+  // 监听容器大小以实现极致自适应
+  if (containerRef.value) {
+    resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        isNarrow.value = entry.contentRect.width < 520
+      }
     })
-    if (success) {
-      saveDialogVisible.value = false
-      await loadTreeMaterials()
-    }
-  } finally {
-    saveLoading.value = false
+    resizeObserver.observe(containerRef.value)
   }
-}
 
-onMounted(() => {
-  loadTreeMaterials()
+  // 键盘快捷键监听
+  window.addEventListener('keydown', handleKeydown)
 })
 
-watch(() => materialApiUrl.value, () => {
-  loadTreeMaterials()
+onUnmounted(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+    resizeObserver = null
+  }
+  window.removeEventListener('keydown', handleKeydown)
 })
+
 watch(() => materialTreeApiUrl?.value, () => {
   loadTreeMaterials()
 })
-
-// 搜索词清空时自动还原对应模式的数据
-watch(searchQuery, (newVal) => {
-  if (!newVal.trim()) {
-    if (viewMode.value === 'category' && activeCategory.value) {
-      currentPage.value = 1
-      fetchCategoryPage(activeCategory.value.type, 1, false, '')
-    } else if (viewMode.value === 'tree') {
-      loadTreeMaterials('')
-    }
-  }
-})
 </script>
 
 <template>
-  <div class="template-gallery-container">
-    <!-- 头部搜索栏 -->
-    <div class="gallery-filters">
-      <div class="filter-top-bar">
+  <div 
+    ref="containerRef"
+    class="template-gallery-container"
+    :class="{ 'is-narrow-view': isNarrow }"
+  >
+    <!-- 1. 顶部现代化搜索栏（红框1） -->
+    <div class="gallery-top-search">
+      <div class="search-input-capsule">
+        <!-- 搜索输入框 -->
         <input 
-          v-model="searchQuery" 
+          v-model="filterParams.query" 
           type="text" 
-          :placeholder="viewMode === 'category' ? `在「${activeCategory?.name || '当前分类'}」中搜索...` : '搜索素材标题、关键词...'" 
-          class="gallery-search-input"
+          :placeholder="isNarrow ? '搜索素材、关键词...' : '搜索素材标题、关键词，按回车检索...'" 
+          class="native-search-input"
           @keyup.enter="handleSearch"
         />
-        <!-- 搜索按钮 -->
+
+        <!-- 清空图标 -->
+        <el-icon 
+          v-if="filterParams.query" 
+          class="search-clear-icon" 
+          @click="clearQuery"
+        >
+          <CircleCloseFilled />
+        </el-icon>
+
+        <!-- 搜索胶囊按钮（窄屏下仅显示放大镜图标，腾出输入空间） -->
         <button 
           type="button" 
-          class="gallery-search-btn" 
+          class="capsule-search-btn" 
           @click="handleSearch"
-          title="搜索素材"
+          :disabled="loading"
+          :title="isNarrow ? '搜索素材' : ''"
         >
-          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2">
-            <circle cx="11" cy="11" r="8" />
-            <line x1="21" y1="21" x2="16.65" y2="16.65" />
-          </svg>
-          <span>搜索</span>
+          <el-icon v-if="!loading"><Search /></el-icon>
+          <span v-else class="btn-spinner-ring"></span>
+          <span class="btn-text">搜索</span>
         </button>
       </div>
+    </div>
 
-      <!-- 进入单独分类时的返回导航条 -->
-      <div v-if="viewMode === 'category'" class="view-mode-nav-bar">
-        <button type="button" class="nav-back-btn" @click="backToTree">
-          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2">
-            <polyline points="15 18 9 12 15 6" />
-          </svg>
-          <span>返回全部素材</span>
+    <!-- 2. 分类 Tabs 与多维筛选工具栏（红框2 + 红框3） -->
+    <div class="gallery-toolbar-row">
+      <!-- 红框2：分类类型胶囊组（支持横向触摸/滚轮滑动，不换行截断） -->
+      <div class="category-pill-group">
+        <button
+          v-for="tab in categoryTabs"
+          :key="tab.value"
+          class="pill-tab-btn"
+          :class="{ active: filterParams.activeType === tab.value }"
+          @click="switchCategoryTab(tab.value)"
+        >
+          {{ tab.label }}
         </button>
-        <span class="nav-current-title">
-          {{ activeCategory?.name || '分类详情' }}
-          <span v-if="searchQuery.trim()" style="font-weight: normal; font-size: 12px; color: #64748b; margin-left: 6px;">
-            （搜索: "{{ searchQuery }}"）
+      </div>
+
+      <!-- 红框3：右侧筛选下拉项 -->
+      <div class="filter-dropdown-group">
+        <!-- 综合排序 -->
+        <el-dropdown trigger="click" @command="handleSortChange">
+          <span class="toolbar-dropdown-btn" :class="{ 'is-active': filterParams.sort !== 'recommend' }">
+            {{ currentSortLabel }}
+            <el-icon class="dropdown-arrow"><ArrowDown /></el-icon>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item
+                v-for="item in sortOptions"
+                :key="item.value"
+                :command="item.value"
+                :class="{ 'is-selected': filterParams.sort === item.value }"
+              >
+                {{ item.label }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+
+        <!-- 格式筛选 -->
+        <el-dropdown trigger="click" @command="handleFormatChange">
+          <span class="toolbar-dropdown-btn" :class="{ 'is-active': !!filterParams.format }">
+            {{ filterParams.format ? `格式: ${filterParams.format}` : '格式' }}
+            <el-icon class="dropdown-arrow"><ArrowDown /></el-icon>
           </span>
-        </span>
+          <template #dropdown>
+            <el-dropdown-menu class="custom-dropdown-menu">
+              <el-dropdown-item command="" :class="{ 'is-selected': !filterParams.format }">
+                全部格式
+              </el-dropdown-item>
+              <el-dropdown-item
+                v-for="fmt in formatOptions"
+                :key="fmt"
+                :command="fmt"
+                :class="{ 'is-selected': filterParams.format === fmt }"
+              >
+                {{ fmt }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+
+        <!-- 颜色筛选 -->
+        <el-dropdown trigger="click" @command="handleColorChange">
+          <span class="toolbar-dropdown-btn" :class="{ 'is-active': !!filterParams.color }">
+            <span v-if="filterParams.color" class="color-badge-dot" :style="{ backgroundColor: filterParams.color }"></span>
+            {{ currentColorLabel }}
+            <el-icon class="dropdown-arrow"><ArrowDown /></el-icon>
+          </span>
+          <template #dropdown>
+            <div class="color-picker-palette">
+              <div class="palette-header-label">按主色调筛选</div>
+              <div class="palette-swatch-grid">
+                <div
+                  class="swatch-item all-swatch"
+                  :class="{ active: !filterParams.color }"
+                  @click="handleColorChange('')"
+                  title="全部颜色"
+                >
+                  全部
+                </div>
+                <div
+                  v-for="color in colorOptions"
+                  :key="color.hex"
+                  class="swatch-item"
+                  :class="{ active: filterParams.color === color.hex }"
+                  :style="{ backgroundColor: color.hex }"
+                  :title="color.name"
+                  @click="handleColorChange(color.hex)"
+                ></div>
+              </div>
+            </div>
+          </template>
+        </el-dropdown>
+
+        <!-- 一键重置 -->
+        <button
+          v-if="hasActiveFilters"
+          class="reset-filters-link"
+          @click="resetFilters"
+          title="清除所有筛选"
+        >
+          重置
+        </button>
       </div>
     </div>
 
-    <!-- 加载中 -->
-    <div v-if="loading && detailMaterials.length === 0 && categoryTree.length === 0" class="gallery-loading">
-      <div class="loading-spinner"></div>
-      <span>正在加载素材内容...</span>
+    <!-- 加载中动画 -->
+    <div v-if="loading && displayedMaterials.length === 0" class="gallery-loading-box">
+      <div class="loading-ring-spinner"></div>
+      <span class="loading-tip-text">正在检索素材媒体库...</span>
     </div>
 
-    <!-- 1. 首页分类树模式 (viewMode === 'tree')：按分类区块展示横向滚动列表 -->
-    <div v-else-if="viewMode === 'tree'" class="gallery-tree-scroll">
-      <div 
-        v-for="cat in categoryTree" 
-        :key="cat.id" 
-        class="category-block"
-      >
-        <!-- 分类标题栏（点击进入该分类） -->
-        <div class="category-block-header" @click="enterCategory(cat)" title="点击查看全部">
-          <div class="category-title-wrap">
-            <span class="category-title-text">{{ cat.name }}</span>
-            <svg class="category-arrow-icon" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5">
-              <line x1="5" y1="12" x2="19" y2="12" />
-              <polyline points="12 5 19 12 12 19" />
-            </svg>
-          </div>
-          <span class="category-more-text">查看全部</span>
-        </div>
-
-        <!-- 分类素材横向流容器 -->
-        <div class="category-row-wrapper">
-          <!-- 左翻页平滑滚动按钮 -->
-          <button 
-            v-if="cat.items && cat.items.length > 2 && (scrollStates[cat.id]?.canLeft ?? false)" 
-            type="button" 
-            class="scroll-nav-btn scroll-left-btn" 
-            @click.stop="scrollCategory(cat.id, 'left', $event)"
-            title="向左滚动"
-          >
-            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5">
-              <polyline points="15 18 9 12 15 6" />
-            </svg>
-          </button>
-
+    <!-- 3. 主体内容区：纯瀑布流排版（红框4），支持滚动触底自动加载 -->
+    <div v-else class="waterfall-scroll-container" @scroll="handleScroll">
+      <div v-if="displayedMaterials.length > 0" class="waterfall-masonry-wrapper">
+        <div class="waterfall-masonry-layout">
           <div 
-            :ref="(el) => setCategoryScrollRef(cat.id, el)"
-            :id="`cat-scroll-${cat.id}`" 
-            class="category-row-scroll" 
-            @scroll="onCategoryScroll(cat.id, $event)"
+            v-for="(item, idx) in displayedMaterials" 
+            :key="item.id || idx" 
+            class="waterfall-card-item"
+            @click="handleSelectMaterial(item)"
           >
-            <div 
-              v-for="item in (cat.items || [])" 
-              :key="item.id" 
-              class="tree-item-card"
-              @click="handleSelectMaterial(item)"
-            >
-              <div class="tree-item-img-box">
+            <div class="card-box">
+              <!-- 图片视口 -->
+              <div class="card-media-viewport">
                 <img 
                   v-if="getMaterialThumb(item)"
                   :src="getMaterialThumb(item)" 
-                  :alt="item.title" 
+                  :alt="item.title || '素材'" 
                   loading="lazy" 
-                  class="tree-thumb-img" 
+                  class="card-thumb-image" 
                 />
-                <!-- 无图时的占位相框 -->
-                <div v-else class="thumb-placeholder">
+                <div v-else class="card-empty-placeholder">
                   <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#94a3b8" stroke-width="1.5">
                     <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
                     <circle cx="8.5" cy="8.5" r="1.5" />
@@ -628,832 +860,1055 @@ watch(searchQuery, (newVal) => {
                   </svg>
                 </div>
 
-                <!-- hover 悬浮层：右上角预览图标，右下角使用按钮 -->
-                <div class="item-hover-mask img-hover-mask">
+                <!-- hover 悬浮层：中央大加号插入 + 右上角大图预览 -->
+                <div class="card-hover-mask">
                   <button 
                     v-if="getMaterialThumb(item)"
                     type="button" 
-                    class="card-preview-btn" 
-                    title="预览图片" 
-                    @click.stop="openPreview(item, cat.items)"
-                  >
-                    <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2">
-                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
-                      <circle cx="12" cy="12" r="3" />
-                    </svg>
-                  </button>
-                  <button 
-                    type="button" 
-                    class="card-use-btn" 
-                    title="使用素材" 
-                    @click.stop="handleSelectMaterial(item)"
+                    class="preview-float-btn" 
+                    title="大图预览" 
+                    @click.stop.prevent="openPreview(item, $event)"
                   >
-                    使用
+                    <el-icon><View /></el-icon>
                   </button>
+                  <div class="insert-float-action">
+                    <div class="insert-circle-btn">
+                      <el-icon><Plus /></el-icon>
+                    </div>
+                    <span class="insert-tip">点击插入画布</span>
+                  </div>
                 </div>
               </div>
-              <div class="tree-item-title" :title="item.title">{{ item.title || '素材' }}</div>
-            </div>
 
-            <!-- 若当前分类下暂无内容 -->
-            <div v-if="!cat.items || cat.items.length === 0" class="tree-empty-tip">
-              暂无素材推荐
+              <!-- 卡片底部信息条 -->
+              <div class="card-bottom-info">
+                <div class="format-badge-box">
+                  <span class="format-tag">{{ getItemFormat(item) }}</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)">
+                  <el-icon><MoreFilled /></el-icon>
+                </button>
+              </div>
             </div>
           </div>
+        </div>
 
-          <!-- 右翻页平滑滚动按钮 -->
-          <button 
-            v-if="cat.items && cat.items.length > 2 && (scrollStates[cat.id]?.canRight ?? true)" 
-            type="button" 
-            class="scroll-nav-btn scroll-right-btn" 
-            @click.stop="scrollCategory(cat.id, 'right', $event)"
-            title="向右滚动"
+        <!-- 瀑布流底部加载更多与完成状态 -->
+        <div class="waterfall-footer-status">
+          <!-- 1. 正在加载中 -->
+          <div v-if="loadingMore" class="loading-more-row">
+            <span class="btn-spinner-ring dark"></span>
+            <span>正在加载更多素材...</span>
+          </div>
+
+          <!-- 2. 加载失败：展示重试按钮，彻底阻断滚动死循环 -->
+          <div v-else-if="loadFailed" class="load-failed-row">
+            <span class="load-error-text">加载失败: {{ loadErrorMsg || '网络连接或接口异常' }}</span>
+            <button type="button" class="retry-load-btn" @click="retryLoadMore">
+              点击重试
+            </button>
+          </div>
+
+          <!-- 3. 还有更多数据可供加载 -->
+          <button
+            v-else-if="hasMore"
+            type="button"
+            class="load-more-action-btn"
+            @click="loadMore"
           >
-            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5">
-              <polyline points="9 18 15 12 9 6" />
-            </svg>
+            <span>加载更多素材</span>
+            <span v-if="totalRecords > 0" class="load-more-count">({{ displayedMaterials.length }} / {{ totalRecords }})</span>
           </button>
+
+          <!-- 4. 已全部加载完毕 -->
+          <div v-else class="all-loaded-divider">
+            <span>— 已展示全部素材 (共 {{ displayedMaterials.length }} 项) —</span>
+          </div>
         </div>
       </div>
 
-      <!-- 若整个分类树为空或无匹配项 -->
-      <div v-if="categoryTree.length === 0 || categoryTree.every(c => !c.items || c.items.length === 0)" class="gallery-empty">
-        {{ searchQuery.trim() ? `未找到与 "${searchQuery}" 相关的素材` : '未加载到素材分类数据' }}
+      <!-- 空状态 -->
+      <div v-else class="gallery-empty-state">
+        <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#cbd5e1" stroke-width="1.2">
+          <circle cx="11" cy="11" r="8" />
+          <line x1="21" y1="21" x2="16.65" y2="16.65" />
+        </svg>
+        <p class="empty-title">{{ filterParams.query ? `未检索到与 "${filterParams.query}" 相关的素材` : '当前分类暂无素材推荐' }}</p>
+        <span class="empty-subtitle">尝试切换上方「全部/图片」分类或调整筛选条件</span>
       </div>
     </div>
 
-    <!-- 2. 单独分类详情模式：多列网格流展示 (/page 分页数据) -->
-    <div v-else class="gallery-grid-scroll">
-      <div class="gallery-grid">
+    <!-- 100% 自研可靠的高清全屏大图预览 Modal（Teleport 挂载到 body 顶层） -->
+    <teleport to="body">
+      <transition name="preview-backdrop-fade">
         <div 
-          v-for="item in detailMaterials" 
-          :key="item.id" 
-          class="grid-item-card-wrapper"
-          @click="handleSelectMaterial(item)"
+          v-if="previewVisible" 
+          class="custom-fullscreen-preview-modal"
+          @click.self="closePreview"
         >
-          <div class="grid-image-card">
-            <div class="grid-img-box">
-              <img 
-                v-if="getMaterialThumb(item)"
-                :src="getMaterialThumb(item)" 
-                :alt="item.title" 
-                loading="lazy" 
-                class="grid-thumb-img" 
-              />
-              <!-- 无图时的占位相框 -->
-              <div v-else class="thumb-placeholder">
-                <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="#94a3b8" stroke-width="1.5">
-                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-                  <circle cx="8.5" cy="8.5" r="1.5" />
-                  <polyline points="21 15 16 10 5 21" />
-                </svg>
-              </div>
-
-              <!-- hover 悬浮层：右上角预览图标，右下角使用按钮 -->
-              <div class="grid-hover-overlay img-hover-mask">
-                <button 
-                  v-if="getMaterialThumb(item)"
-                  type="button" 
-                  class="card-preview-btn" 
-                  title="预览图片" 
-                  @click.stop="openPreview(item, detailMaterials)"
-                >
-                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2">
-                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                </button>
-                <button 
-                  type="button" 
-                  class="card-use-btn" 
-                  title="使用素材" 
-                  @click.stop="handleSelectMaterial(item)"
-                >
-                  使用
-                </button>
-              </div>
-            </div>
-            <div class="grid-item-info">
-              <div class="grid-item-title" :title="item.title">{{ item.title || '素材' }}</div>
-              <span class="grid-tag-badge">{{ item.category || (item.type ? typeNameMap[item.type] : '') || item.type || '素材' }}</span>
+          <!-- 顶部浮动信息条 -->
+          <div class="preview-header-bar">
+            <div class="preview-title-wrap">
+              <span class="preview-format-pill">{{ currentPreviewItem?.format || 'IMG' }}</span>
+              <span class="preview-title-text">{{ currentPreviewItem?.title || '素材大图预览' }}</span>
             </div>
+            <button 
+              type="button" 
+              class="preview-close-cross-btn" 
+              title="关闭预览 (Esc)"
+              @click="closePreview"
+            >
+              <el-icon><Close /></el-icon>
+            </button>
           </div>
-        </div>
-      </div>
 
-      <!-- 无数据 -->
-      <div v-if="detailMaterials.length === 0 && !loading" class="gallery-empty">
-        {{ searchQuery.trim() ? `当前分类下未找到与 "${searchQuery}" 相关的素材` : '当前分类暂无素材数据' }}
-      </div>
+          <!-- 左侧上一张 -->
+          <button 
+            v-if="previewList.length > 1" 
+            type="button" 
+            class="preview-arrow-btn prev-arrow" 
+            title="上一张 (←)"
+            @click.stop="prevPreview"
+          >
+            <el-icon><ArrowLeft /></el-icon>
+          </button>
 
-      <!-- 加载更多 -->
-      <div v-if="hasMore" class="gallery-loadmore-wrapper">
-        <button class="loadmore-btn" :disabled="loading" @click="loadMore">
-          {{ loading ? '正在加载...' : `加载更多 (${detailMaterials.length} / ${totalRecords})` }}
-        </button>
-      </div>
-    </div>
+          <!-- 右侧下一张 -->
+          <button 
+            v-if="previewList.length > 1" 
+            type="button" 
+            class="preview-arrow-btn next-arrow" 
+            title="下一张 (→)"
+            @click.stop="nextPreview"
+          >
+            <el-icon><ArrowRight /></el-icon>
+          </button>
 
-    <!-- 保存素材对话框 -->
-    <el-dialog
-      v-model="saveDialogVisible"
-      title="保存页面到素材库"
-      width="420px"
-      append-to-body
-      destroy-on-close
-    >
-      <div style="display: flex; flex-direction: column; gap: 14px; padding: 10px 0;">
-        <el-input v-model="saveForm.title" placeholder="请输入素材名称" maxlength="50" show-word-limit />
-        <el-select v-model="saveForm.category" placeholder="请选择素材分类">
-          <el-option label="封面" value="封面" />
-          <el-option label="目录" value="目录" />
-          <el-option label="正文" value="正文" />
-          <el-option label="图表" value="图表" />
-          <el-option label="过渡" value="过渡" />
-          <el-option label="结尾" value="结尾" />
-        </el-select>
-      </div>
-      <template #footer>
-        <div style="display: flex; justify-content: flex-end; gap: 8px;">
-          <el-button @click="saveDialogVisible = false">取消</el-button>
-          <el-button type="primary" :loading="saveLoading" @click="handleConfirmSave">保存</el-button>
+          <!-- 中央超清大图视口 -->
+          <div class="preview-stage-viewport" @click.self="closePreview">
+            <img 
+              v-if="currentPreviewItem?.url"
+              :src="currentPreviewItem.url" 
+              :alt="currentPreviewItem.title" 
+              class="preview-stage-img"
+            />
+          </div>
+
+          <!-- 底部工具动作条 -->
+          <div class="preview-footer-bar">
+            <span v-if="previewList.length > 1" class="preview-page-indicator">
+              {{ previewInitialIndex + 1 }} / {{ previewList.length }}
+            </span>
+            <button 
+              type="button" 
+              class="preview-quick-insert-btn"
+              @click="handleInsertFromPreview"
+            >
+              <el-icon><Plus /></el-icon>
+              <span>插入此素材到画布</span>
+            </button>
+          </div>
         </div>
-      </template>
-    </el-dialog>
-
-    <!-- 图片/GIF/SVG 素材大图预览（支持同类型上下/左右切换） -->
-    <ElImageViewer
-      v-if="previewVisible"
-      :url-list="previewList"
-      :initial-index="previewInitialIndex"
-      :hide-on-click-modal="true"
-      :infinite="true"
-      @close="previewVisible = false"
-    />
+      </transition>
+    </teleport>
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .template-gallery-container {
   display: flex;
   flex-direction: column;
   height: 100%;
-  background: var(--theme-sidebar-bg, #ffffff);
-  color: var(--theme-sidebar-text, #333333);
+  padding: 14px 16px 16px;
   box-sizing: border-box;
+  background: var(--bg-surface, #ffffff);
+  gap: 12px;
+  overflow: hidden;
 }
 
-.gallery-filters {
-  padding: 12px 14px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+/* 1. 顶部现代搜索栏（红框1） */
+.gallery-top-search {
+  width: 100%;
 }
 
-.filter-top-bar {
+.search-input-capsule {
   display: flex;
   align-items: center;
-  gap: 8px;
   width: 100%;
+  height: 42px;
+  background: #f4f6f8;
+  border: 1.5px solid transparent;
+  border-radius: 21px;
+  padding: 3px 4px 3px 14px;
+  box-sizing: border-box;
+  transition: all 0.25s ease;
+}
+
+.search-input-capsule:focus-within {
+  background: #ffffff;
+  border-color: var(--el-color-primary, #ff5000);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
 }
 
-.gallery-search-input {
+
+.native-search-input {
   flex: 1;
-  min-width: 0;
-  padding: 8px 12px;
-  border-radius: 6px;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  font-size: 13px;
+  border: none;
   outline: none;
-  transition: border-color 0.2s;
-  box-sizing: border-box;
+  background: transparent;
+  font-size: 13.5px;
+  color: #1e293b;
+  min-width: 0;
+}
+
+.native-search-input::placeholder {
+  color: #94a3b8;
+}
+
+.search-clear-icon {
+  font-size: 16px;
+  color: #94a3b8;
+  cursor: pointer;
+  margin-right: 8px;
+  transition: color 0.2s;
+  flex-shrink: 0;
 }
 
-.gallery-search-input:focus {
-  border-color: var(--theme-color-1, #3b82f6);
+.search-clear-icon:hover {
+  color: #64748b;
 }
 
-.gallery-search-btn {
+.capsule-search-btn {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 8px 16px;
-  border-radius: 6px;
-  border: 1px solid var(--theme-color-1, #3b82f6);
-  background: var(--theme-color-1, #3b82f6);
+  gap: 5px;
+  height: 34px;
+  padding: 0 16px;
+  background: #1e293b;
   color: #ffffff;
+  border: none;
+  border-radius: 17px;
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
-  white-space: nowrap;
-  transition: all 0.2s;
+  transition: all 0.2s ease;
   flex-shrink: 0;
-  box-sizing: border-box;
 }
 
-.gallery-search-btn:hover {
-  opacity: 0.9;
-  transform: translateY(-1px);
+.capsule-search-btn:hover:not(:disabled) {
+  background: #0f172a;
+}
+
+.capsule-search-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn-spinner-ring {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 2px solid rgba(255, 255, 255, 0.4);
+  border-top-color: #ffffff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
 }
 
-/* 导航返回栏 */
-.view-mode-nav-bar {
+/* 2. 工具栏行：分类 Tabs + 多维筛选（红框2 + 红框3） */
+.gallery-toolbar-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 4px 2px;
-  font-size: 12px;
+  gap: 10px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid #f1f5f9;
+  flex-shrink: 0;
 }
 
-.nav-back-btn {
-  display: inline-flex;
+/* 红框2：分类类型胶囊组 */
+.category-pill-group {
+  display: flex;
   align-items: center;
   gap: 4px;
-  background: transparent;
-  border: none;
-  color: var(--theme-color-1, #3b82f6);
-  cursor: pointer;
-  font-size: 12px;
-  font-weight: 500;
-  padding: 2px 4px;
-  border-radius: 4px;
-  transition: background-color 0.2s;
+  background: #f1f5f9;
+  padding: 3px;
+  border-radius: 18px;
+  flex-shrink: 0;
 }
 
-.nav-back-btn:hover {
-  background: rgba(59, 130, 246, 0.08);
-}
-
-.nav-current-title {
+.pill-tab-btn {
+  border: none;
+  outline: none;
+  background: transparent;
+  padding: 5px 12px;
+  font-size: 13px;
   color: #64748b;
-  font-size: 12px;
   font-weight: 500;
+  border-radius: 15px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
 }
 
-/* 首页分类树滚动区域 */
-.gallery-tree-scroll {
-  flex: 1;
-  overflow-y: auto;
-  padding: 14px 10px 14px 14px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  scrollbar-width: thin;
-}
-
-.gallery-tree-scroll::-webkit-scrollbar,
-.gallery-grid-scroll::-webkit-scrollbar {
-  width: 6px;
-}
-
-.gallery-tree-scroll::-webkit-scrollbar-track,
-.gallery-grid-scroll::-webkit-scrollbar-track {
-  background: transparent;
-  margin-top: 4px;
-  margin-bottom: 8px;
-}
-
-.gallery-tree-scroll::-webkit-scrollbar-thumb,
-.gallery-grid-scroll::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.18);
-  border-radius: 4px;
-}
-
-.gallery-tree-scroll::-webkit-scrollbar-thumb:hover,
-.gallery-grid-scroll::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.32);
+.pill-tab-btn:hover {
+  color: #0f172a;
 }
 
-.category-block {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+.pill-tab-btn.active {
+  background: #0f172a;
+  color: #ffffff;
+  font-weight: 600;
+  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
 }
 
-/* 分类标题栏（如：图库图片 ->） */
-.category-block-header {
+/* 红框3：筛选下拉项 */
+.filter-dropdown-group {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-  user-select: none;
-  padding-right: 4px;
+  gap: 8px;
+  flex-shrink: 0;
 }
 
-.category-title-wrap {
+.toolbar-dropdown-btn {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  color: var(--theme-color-1, #2563eb);
-  transition: transform 0.2s, opacity 0.2s;
+  gap: 4px;
+  padding: 4px 8px;
+  font-size: 12.5px;
+  color: #475569;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  user-select: none;
+  white-space: nowrap;
 }
 
-.category-block-header:hover .category-title-wrap {
-  transform: translateX(2px);
-  opacity: 0.85;
+.toolbar-dropdown-btn:hover {
+  background: #f8fafc;
+  color: #0f172a;
 }
 
-.category-title-text {
-  font-size: 15px;
+.toolbar-dropdown-btn.is-active {
+  color: #ff5000;
   font-weight: 600;
-  letter-spacing: 0.2px;
+  background: rgba(255, 80, 0, 0.08);
 }
 
-.category-arrow-icon {
-  stroke-width: 2.5;
-  transition: transform 0.2s;
+.dropdown-arrow {
+  font-size: 11px;
 }
 
-.category-block-header:hover .category-arrow-icon {
-  transform: translateX(3px);
+.color-badge-dot {
+  display: inline-block;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  border: 1px solid rgba(0, 0, 0, 0.15);
 }
 
-.category-more-text {
+.reset-filters-link {
+  border: none;
+  background: none;
   font-size: 12px;
   color: #94a3b8;
+  cursor: pointer;
+  padding: 3px 6px;
+  text-decoration: underline;
   transition: color 0.2s;
+  white-space: nowrap;
 }
 
-.category-block-header:hover .category-more-text {
-  color: var(--theme-color-1, #2563eb);
+.reset-filters-link:hover {
+  color: #ef4444;
 }
 
-/* 分类横向流容器 */
-.category-row-wrapper {
-  position: relative;
-  width: 100%;
+/* 颜色选择面板 */
+.color-picker-palette {
+  padding: 10px;
+  width: 170px;
 }
 
-.category-row-scroll {
-  display: flex;
-  gap: 10px;
-  overflow-x: auto;
-  padding: 4px 2px 8px 2px;
-  scroll-behavior: smooth;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+.palette-header-label {
+  font-size: 12px;
+  color: #64748b;
+  margin-bottom: 8px;
+  font-weight: 500;
 }
 
-/* 末尾垫片，彻底解决 flex overflow-x 滚动到最右端时最后一张卡片被截断显示不全的问题 */
-.category-row-scroll::after {
-  content: '';
-  flex: 0 0 12px;
-  width: 12px;
-  height: 1px;
-  flex-shrink: 0;
+.palette-swatch-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 6px;
+}
+
+.swatch-item {
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  cursor: pointer;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  transition: all 0.2s ease;
 }
 
-.category-row-scroll::-webkit-scrollbar {
-  display: none;
-  width: 0;
-  height: 0;
+.swatch-item:hover {
+  transform: scale(1.15);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
 }
 
-/* 横向流卡片 */
-.tree-item-card {
-  flex: 0 0 132px;
-  width: 132px;
-  max-width: 132px;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  cursor: pointer;
-  box-sizing: border-box;
+.swatch-item.active {
+  box-shadow: 0 0 0 2px #ff5000;
 }
 
-.tree-item-img-box {
-  width: 132px;
-  height: 94px;
+.swatch-item.all-swatch {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  color: #64748b;
   background: #f1f5f9;
-  border-radius: 8px;
-  overflow: hidden;
-  position: relative;
-  border: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+/* 加载中状态 */
+.gallery-loading-box {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
+  padding: 60px 0;
+  gap: 12px;
 }
 
-.tree-thumb-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: transform 0.3s;
+.loading-ring-spinner {
+  width: 28px;
+  height: 28px;
+  border: 3px solid #e2e8f0;
+  border-top-color: #0f172a;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
 }
 
-.tree-item-card:hover .tree-thumb-img {
-  transform: scale(1.06);
+.loading-tip-text {
+  font-size: 13px;
+  color: #64748b;
 }
 
-.tree-item-card:hover .tree-item-img-box {
-  border-color: var(--theme-color-1, #3b82f6);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+/* 3. 主体内容区：纯瀑布流排版（红框4） */
+.waterfall-scroll-container {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 4px;
 }
 
-.thumb-placeholder {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #f1f5f9;
-  color: #94a3b8;
+.waterfall-scroll-container::-webkit-scrollbar {
+  width: 5px;
+}
+.waterfall-scroll-container::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 3px;
+}
+.waterfall-scroll-container::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
 }
 
-.thumb-placeholder.is-hidden {
-  display: none !important;
+.waterfall-masonry-layout {
+  column-count: 4;
+  column-gap: 12px;
 }
 
-/* 单页模板卡片在树列表中的展示 */
-.tree-item-slide-box {
-  width: 132px;
-  height: 94px;
-  background: #fafafa;
-  border-radius: 8px;
+@media (max-width: 820px) {
+  .waterfall-masonry-layout {
+    column-count: 3;
+  }
+}
+
+.waterfall-card-item {
+  break-inside: avoid;
+  margin-bottom: 12px;
+  cursor: pointer;
+}
+
+.card-box {
+  border-radius: 10px;
   overflow: hidden;
+  background: #ffffff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  border: 1px solid #f1f5f9;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  display: flex;
+  flex-direction: column;
+}
+
+.card-box:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
+  border-color: #e2e8f0;
+}
+
+.card-media-viewport {
   position: relative;
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  width: 100%;
+  overflow: hidden;
+  background: #f1f5f9;
+  min-height: 90px;
+  max-height: 260px;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
 }
 
-.slide-card-placeholder {
-  padding: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  align-items: flex-start;
+.card-thumb-image {
   width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-}
-
-.slide-badge {
-  font-size: 9px;
-  font-weight: 600;
-  background: #e2e8f0;
-  color: #475569;
-  padding: 1px 4px;
-  border-radius: 3px;
+  height: auto;
+  max-height: 260px;
+  display: block;
+  object-fit: cover;
+  transition: transform 0.4s ease;
 }
 
-.slide-card-preview {
-  font-size: 11px;
-  color: #334155;
-  font-weight: 500;
-  line-height: 1.3;
+.card-box:hover .card-thumb-image {
+  transform: scale(1.04);
 }
 
-.tree-item-card:hover .tree-item-slide-box {
-  border-color: var(--theme-color-1, #3b82f6);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+.card-empty-placeholder {
+  padding: 30px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.item-hover-mask {
+/* 悬浮遮罩 */
+.card-hover-mask {
   position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.35);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(15, 23, 42, 0.55);
+  backdrop-filter: blur(2px);
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   opacity: 0;
-  transition: opacity 0.2s;
+  transition: opacity 0.2s ease;
 }
 
-.tree-item-card:hover .item-hover-mask {
+.card-box:hover .card-hover-mask {
   opacity: 1;
 }
 
-.item-insert-tag {
-  background: var(--theme-color-1, #3b82f6);
-  color: #fff;
-  font-size: 11px;
-  font-weight: 500;
-  padding: 4px 8px;
-  border-radius: 4px;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+.preview-float-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.85);
+  color: #1e293b;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  transition: all 0.2s;
 }
 
-/* 图片/GIF/SVG 专属悬浮遮罩与操作按钮 */
-.img-hover-mask {
-  pointer-events: none;
+.preview-float-btn:hover {
+  background: #ffffff;
+  transform: scale(1.1);
 }
 
-.tree-item-card:hover .img-hover-mask,
-.grid-image-card:hover .img-hover-mask {
-  pointer-events: auto;
+.insert-float-action {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: 600;
 }
 
-/* 右上角预览图标 */
-.card-preview-btn {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  width: 26px;
-  height: 26px;
-  border-radius: 4px;
-  background: rgba(0, 0, 0, 0.55);
+.insert-circle-btn {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background: #ff5000;
   color: #ffffff;
-  border: 1px solid rgba(255, 255, 255, 0.25);
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0;
-  cursor: pointer;
-  backdrop-filter: blur(2px);
-  transition: all 0.2s ease;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+  font-size: 18px;
+  box-shadow: 0 2px 8px rgba(255, 80, 0, 0.4);
+  transition: transform 0.2s;
 }
 
-.card-preview-btn:hover {
-  background: rgba(0, 0, 0, 0.85);
-  color: #38bdf8;
-  border-color: rgba(255, 255, 255, 0.45);
+.card-box:hover .insert-circle-btn {
   transform: scale(1.08);
 }
 
-/* 右下角使用按钮 */
-.card-use-btn {
-  position: absolute;
-  bottom: 6px;
-  right: 6px;
-  background: var(--theme-color-1, #2563eb);
-  color: #ffffff;
-  border: none;
-  font-size: 11px;
-  font-weight: 500;
-  padding: 3px 9px;
-  border-radius: 4px;
-  cursor: pointer;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-  transition: all 0.2s ease;
-  line-height: 1.35;
+.insert-tip {
+  font-size: 12px;
 }
 
-.card-use-btn:hover {
-  background: #1d4ed8;
-  transform: scale(1.05);
+/* 卡片底部栏（红框4版权信息条） */
+.card-bottom-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  background: #ffffff;
+  border-top: 1px solid #f8fafc;
 }
 
-.tree-item-title {
-  display: block;
-  width: 100%;
-  max-width: 100%;
+.format-badge-box {
+  display: flex;
+  align-items: center;
+  gap: 6px;
   min-width: 0;
-  font-size: 11px;
+  overflow: hidden;
+}
+
+.format-tag {
+  font-size: 10px;
+  font-weight: 600;
   color: #475569;
+  background: #f1f5f9;
+  padding: 1px 5px;
+  border-radius: 3px;
+  letter-spacing: 0.5px;
+  flex-shrink: 0;
+}
+
+.format-title-hint {
+  font-size: 11px;
+  color: #64748b;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  padding: 0 2px;
-  box-sizing: border-box;
+  max-width: 140px;
 }
 
-.tree-empty-tip {
-  padding: 20px 10px;
-  font-size: 12px;
+.more-options-dot-btn {
+  border: none;
+  background: transparent;
   color: #94a3b8;
+  cursor: pointer;
+  padding: 2px 4px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  transition: all 0.2s;
 }
 
-/* 左右平滑滚动悬浮按钮 */
-.scroll-nav-btn {
-  position: absolute;
-  top: calc(50% - 15px);
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  background: #ffffff;
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
+.more-options-dot-btn:hover {
+  color: #334155;
+  background: #f1f5f9;
+}
+
+/* 瀑布流底部加载更多区域 */
+.waterfall-footer-status {
+  padding: 16px 0 24px;
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
-  color: #334155;
-  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
-  z-index: 5;
+  width: 100%;
 }
 
-.scroll-nav-btn:hover {
-  transform: scale(1.12);
-  background: #ffffff;
-  color: var(--theme-color-1, #3b82f6);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
+.loading-more-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #64748b;
 }
 
-.scroll-left-btn {
-  left: 4px;
+.load-failed-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  padding: 6px 14px;
+  border-radius: 20px;
 }
 
-.scroll-right-btn {
-  right: 4px;
+.load-error-text {
+  font-size: 12px;
+  color: #b91c1c;
 }
 
-/* 分类详情与搜索网格流滚动区 */
-.gallery-grid-scroll {
-  flex: 1;
-  overflow-y: auto;
-  padding: 12px 10px 12px 14px;
-  scrollbar-width: thin;
+.retry-load-btn {
+  border: none;
+  background: #dc2626;
+  color: #ffffff;
+  padding: 3px 10px;
+  border-radius: 12px;
+  font-size: 11.5px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.2s;
 }
 
-.gallery-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 12px;
+.retry-load-btn:hover {
+  background: #b91c1c;
 }
 
-.grid-item-card-wrapper {
+.btn-spinner-ring.dark {
+  border-color: rgba(15, 23, 42, 0.15);
+  border-top-color: #0f172a;
+}
+
+.load-more-action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 24px;
+  background: #f1f5f9;
+  border: 1px solid #e2e8f0;
+  border-radius: 20px;
+  color: #334155;
+  font-size: 12.5px;
+  font-weight: 500;
   cursor: pointer;
+  transition: all 0.2s ease;
 }
 
-.grid-image-card,
-.grid-template-card {
-  background: #ffffff;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  border-radius: 8px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  transition: all 0.25s;
+.load-more-action-btn:hover {
+  background: #0f172a;
+  color: #ffffff;
+  border-color: #0f172a;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
 }
 
-.grid-image-card:hover,
-.grid-template-card:hover {
-  transform: translateY(-2px);
-  border-color: var(--theme-color-1, #3b82f6);
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+.load-more-count {
+  font-size: 11px;
+  opacity: 0.8;
 }
 
-.grid-img-box,
-.template-box {
-  width: 100%;
-  height: 130px;
-  background: #f1f5f9;
-  position: relative;
+.all-loaded-divider {
+  font-size: 12px;
+  color: #94a3b8;
+  letter-spacing: 0.5px;
+}
+
+/* 空状态 */
+.gallery-empty-state {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  overflow: hidden;
+  padding: 60px 16px;
+  gap: 10px;
+  text-align: center;
 }
 
-.grid-thumb-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: transform 0.3s;
+.empty-title {
+  font-size: 13.5px;
+  color: #64748b;
+  margin: 0;
+  font-weight: 500;
 }
 
-.grid-image-card:hover .grid-thumb-img,
-.grid-template-card:hover .grid-thumb-img {
-  transform: scale(1.05);
+.empty-subtitle {
+  font-size: 12px;
+  color: #94a3b8;
 }
 
-.template-placeholder-box {
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
-.template-card-badge {
-  font-size: 10px;
-  font-weight: 600;
-  background: #e2e8f0;
-  color: #475569;
-  padding: 2px 6px;
-  border-radius: 3px;
-  align-self: flex-start;
-}
+/* ==========================================================================
+   重点优化：当在右侧边栏（宽度 <= 520px / is-narrow-view）打开时的响应式完美适配
+   ========================================================================== */
+.template-gallery-container.is-narrow-view {
+  padding: 10px 12px 14px;
+  gap: 10px;
 
-.template-card-title {
-  font-size: 12px;
-  color: #334155;
-  font-weight: 500;
-  line-height: 1.4;
+  /* 1. 搜索栏收敛紧凑 */
+  .search-input-capsule {
+    height: 38px;
+    padding: 2px 4px 2px 10px;
+  }
+
+  .native-search-input {
+    font-size: 12.5px;
+  }
+
+  .capsule-search-btn {
+    height: 30px;
+    padding: 0 10px;
+    font-size: 12px;
+  }
+
+  /* 在狭窄侧边栏下，隐藏“搜索”文字，只保留放大镜图标，彻底防止截断输入框 */
+  .capsule-search-btn .btn-text {
+    display: none;
+  }
+
+  /* 2. 工具栏分为上下两行，彻底解决挤压溢出 */
+  .gallery-toolbar-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+    padding-bottom: 8px;
+  }
+
+  /* 第一行：分类 Tabs 单行横向平滑滚动 */
+  .category-pill-group {
+    width: 100%;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    display: flex;
+    flex-wrap: nowrap;
+    padding: 2px 4px;
+    box-sizing: border-box;
+  }
+
+  .category-pill-group::-webkit-scrollbar {
+    display: none;
+  }
+
+  .pill-tab-btn {
+    flex-shrink: 0;
+    padding: 4px 10px;
+    font-size: 12px;
+  }
+
+  /* 第二行：多维筛选下拉平铺 */
+  .filter-dropdown-group {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 6px;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .filter-dropdown-group::-webkit-scrollbar {
+    display: none;
+  }
+
+  .toolbar-dropdown-btn {
+    padding: 3px 6px;
+    font-size: 11.5px;
+    flex-shrink: 0;
+  }
+
+  /* 3. 瀑布流自适应为精致的双列（2列）排版 */
+  .waterfall-masonry-layout {
+    column-count: 2 !important;
+    column-gap: 8px !important;
+  }
+
+  .waterfall-card-item {
+    margin-bottom: 8px !important;
+  }
+
+  .card-media-viewport {
+    min-height: 60px;
+    max-height: 180px;
+  }
+
+  .card-bottom-info {
+    padding: 6px 8px;
+  }
+
+  .format-title-hint {
+    max-width: 80px;
+    font-size: 10px;
+  }
+
+  .insert-circle-btn {
+    width: 28px;
+    height: 28px;
+    font-size: 15px;
+  }
+
+  .insert-tip {
+    font-size: 10px;
+  }
 }
+</style>
 
-.grid-hover-overlay {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.4);
+<style>
+/* ==========================================================================
+   全屏大图预览 Modal（脱离一切容器，z-index 最高层级）
+   ========================================================================== */
+.custom-fullscreen-preview-modal {
+  position: fixed !important;
+  inset: 0 !important;
+  z-index: 999999 !important;
+  background: rgba(10, 15, 29, 0.82) !important;
+  backdrop-filter: blur(12px) !important;
+  -webkit-backdrop-filter: blur(12px) !important;
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  padding: 16px 24px !important;
+  box-sizing: border-box !important;
+  user-select: none !important;
+}
+
+.preview-header-bar {
+  width: 100%;
   display: flex;
   align-items: center;
-  justify-content: center;
-  opacity: 0;
-  transition: opacity 0.2s;
+  justify-content: space-between;
+  z-index: 10;
 }
 
-.grid-image-card:hover .grid-hover-overlay,
-.grid-template-card:hover .grid-hover-overlay {
-  opacity: 1;
+.preview-title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
-.hover-insert-btn {
-  background: var(--theme-color-1, #3b82f6);
-  color: #fff;
-  padding: 6px 14px;
+.preview-format-pill {
+  background: #ff5000;
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 2px 8px;
   border-radius: 4px;
-  font-size: 12px;
-  font-weight: 500;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  letter-spacing: 0.5px;
 }
 
-.grid-item-info {
-  padding: 8px 10px;
+.preview-title-text {
+  color: #ffffff;
+  font-size: 15px;
+  font-weight: 600;
+  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
+  max-width: 60vw;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.preview-close-cross-btn {
+  border: none;
+  background: rgba(255, 255, 255, 0.15);
+  color: #ffffff;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 6px;
-  background: #ffffff;
-  min-width: 0;
-  box-sizing: border-box;
+  justify-content: center;
+  font-size: 18px;
+  cursor: pointer;
+  transition: all 0.2s;
 }
 
-.grid-item-title {
-  font-size: 12px;
-  color: #334155;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.preview-close-cross-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: scale(1.1);
+}
+
+.preview-stage-viewport {
   flex: 1;
-  min-width: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: 10px;
+  box-sizing: border-box;
 }
 
-.grid-tag-badge {
-  font-size: 10px;
-  color: #64748b;
-  background: #e2e8f0;
-  padding: 1px 5px;
-  border-radius: 3px;
-  white-space: nowrap;
+.preview-stage-img {
+  max-width: 90vw;
+  max-height: calc(85vh - 90px);
+  object-fit: contain;
+  border-radius: 8px;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
+  transition: transform 0.25s ease;
 }
 
-.gallery-loading {
+.preview-arrow-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 46px;
+  height: 46px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.18);
+  color: #ffffff;
+  border: none;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 40px 20px;
-  gap: 12px;
-  font-size: 13px;
-  color: #666;
+  font-size: 22px;
+  cursor: pointer;
+  transition: all 0.2s;
+  z-index: 20;
 }
 
-.loading-spinner {
-  width: 24px;
-  height: 24px;
-  border: 3px solid rgba(59, 130, 246, 0.2);
-  border-top-color: var(--theme-color-1, #3b82f6);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
+.preview-arrow-btn:hover {
+  background: rgba(255, 255, 255, 0.38);
+  transform: translateY(-50%) scale(1.1);
 }
 
-@keyframes spin {
-  to { transform: rotate(360deg); }
+.prev-arrow {
+  left: 24px;
 }
 
-.gallery-empty {
-  text-align: center;
-  padding: 40px 20px;
-  color: #94a3b8;
-  font-size: 13px;
+.next-arrow {
+  right: 24px;
 }
 
-.gallery-loadmore-wrapper {
-  margin-top: 16px;
+.preview-footer-bar {
   display: flex;
-  justify-content: center;
-  padding-bottom: 20px;
+  align-items: center;
+  gap: 16px;
+  z-index: 10;
+  padding-bottom: 6px;
 }
 
-.loadmore-btn {
-  width: 100%;
-  padding: 10px;
-  border-radius: 6px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  background: #f8f9fa;
-  font-size: 12px;
-  color: #555;
+.preview-page-indicator {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.preview-quick-insert-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 20px;
+  background: #ff5000;
+  color: #ffffff;
+  border: none;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 600;
   cursor: pointer;
-  transition: background-color 0.2s;
+  box-shadow: 0 4px 14px rgba(255, 80, 0, 0.4);
+  transition: all 0.2s;
 }
 
-.loadmore-btn:hover:not(:disabled) {
-  background: #e9ecef;
+.preview-quick-insert-btn:hover {
+  background: #ff6a00;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 18px rgba(255, 80, 0, 0.5);
 }
 
-.loadmore-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
+/* 过渡动效 */
+.preview-backdrop-fade-enter-active,
+.preview-backdrop-fade-leave-active {
+  transition: opacity 0.25s ease;
+}
+.preview-backdrop-fade-enter-from,
+.preview-backdrop-fade-leave-to {
+  opacity: 0;
 }
 </style>