jvs-ppt-ui 0.0.14 → 0.0.16

package/src/components/TemplateGallery.vue

@@ -1,69 +1,169 @@
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted, onUnmounted, watch } from 'vue'
+import { ref, reactive, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import {
   Search,
   Plus,
   Close,
   CircleCloseFilled,
-  ArrowDown,
   ArrowLeft,
   ArrowRight,
-  MoreFilled,
-  View
+  View,
+  VideoPlay
 } from '@element-plus/icons-vue'
-import { useSlides, DEFAULT_MATERIAL_API_URL, DEFAULT_MATERIAL_PAGE_API_URL } from '../composables/useSlides'
+import { useSlides, DEFAULT_MATERIAL_PAGE_API_URL } from '../composables/useSlides'
 
 const {
-  insertExternalSlide,
   addElement,
   notify,
   materialApiUrl,
   materialTreeApiUrl,
   materialPageApiUrl,
   materialHeaders,
-  saveCurrentSlideToMaterial,
-  activeSlide,
+  activeTab,
   materialPopoverVisible
 } = useSlides()
 
-// 容器响应式宽度监听（区分浮窗大屏与侧边栏窄屏模式）
-const containerRef = ref<HTMLElement | null>(null)
-const isNarrow = ref(false)
-let resizeObserver: ResizeObserver | null = null
+export interface MaterialItem {
+  id: string | number
+  title: string
+  pptSource?: string
+  category?: string
+  type?: string
+  assetType?: string
+  assetSubType?: string
+  subType?: string
+  format?: string
+  color?: string
+  slideIndex?: number
+  fileName?: string
+  url?: string
+  previewUrl?: string
+  sourceUrl?: string
+  downloadUrl?: string
+  elementsCount?: number
+  originalWidth?: number
+  originalHeight?: number
+  originalSize?: { width: number; height: number }
+  tags?: string[]
+  aspectRatio?: string
+  [key: string]: any
+}
 
-// 默认单页模板封面地址
-const DEFAULT_SLIDE_COVER = 'https://frame.bctools.cn/jvs-oss/material/templates/gold-cover.png'
+export type StockSubType =
+  | 'Vectors'
+  | 'Photos'
+  | 'Illustrations'
+  | 'Videos'
 
-function getMaterialThumb(item: MaterialItem): string {
-  if (item.type === 'slide') {
-    const u = item.previewUrl || item.url
-    if (!u || u.includes('gold-cover.png')) {
-      return DEFAULT_SLIDE_COVER
-    }
-    return u
+interface OverviewCategoryConfig {
+  key: StockSubType
+  label: string
+  subType: StockSubType
+  tags: string[]
+}
+
+// 图二：固定 4 大核心分类区块配置，每个分类对应后端 subType 参数独立请求一次接口
+const overviewCategories: OverviewCategoryConfig[] = [
+  {
+    key: 'Vectors',
+    label: '矢量图',
+    subType: 'Vectors',
+    tags: ['风景', '商务', '科技', '插画', '几何', '背景', '图标']
+  },
+  {
+    key: 'Photos',
+    label: '照片',
+    subType: 'Photos',
+    tags: ['风景', '商务', '科技', '人物', '自然', '建筑', '美食', '办公']
+  },
+  {
+    key: 'Illustrations',
+    label: '插画',
+    subType: 'Illustrations',
+    tags: ['风景', '商务', '科技', '人物', '自然', '创意', '手绘', '扁平']
+  },
+  {
+    key: 'Videos',
+    label: '高清视频',
+    subType: 'Videos',
+    tags: ['风景', '商务', '科技', '自然', '城市', '航拍', '办公']
   }
-  return item.previewUrl || item.url || item.downloadUrl || ''
+]
+
+const subTypeNameMap: Record<StockSubType, string> = {
+  Vectors: '矢量图',
+  Photos: '照片',
+  Illustrations: '插画',
+  Videos: '高清视频'
+}
+
+// 视图状态：先图二 (overview) 再图三 (detail)
+const viewMode = ref<'overview' | 'detail'>('overview')
+const overviewQuery = ref('')
+const baseDetailTitle = ref('素材库')
+const baseSearchQuery = ref('')
+const activeTag = ref('')
+
+// 统一筛选与搜索模型
+const filterParams = reactive<{
+  query: string
+  activeSubType: StockSubType
+}>({
+  query: '',
+  activeSubType: 'Vectors'
+})
+
+// 图三顶部返回栏显示的标题
+const detailHeaderTitle = computed(() => {
+  if (activeTag.value) return activeTag.value
+  if (baseSearchQuery.value) return baseSearchQuery.value
+  return baseDetailTitle.value || subTypeNameMap[filterParams.activeSubType] || '素材库'
+})
+
+// 当前分类下的细分标签列表
+const currentCategoryTags = computed(() => {
+  const found = overviewCategories.find(c => c.subType === filterParams.activeSubType)
+  if (found) return found.tags
+  return ['风景', '商务', '科技', '人物', '自然', '建筑', '办公']
+})
+
+function isVideoUrl(url?: string): boolean {
+  if (!url) return false
+  const clean = url.split('?')[0].toLowerCase()
+  return clean.endsWith('.mp4') || clean.endsWith('.webm') || clean.endsWith('.mov') || clean.endsWith('.m4v') || clean.endsWith('.ogg')
+}
+
+function isVideoMaterial(item: MaterialItem): boolean {
+  return (
+    item.type === 'video' ||
+    item.assetType === 'VIDEO' ||
+    item.assetSubType === 'Videos' ||
+    item.subType === 'Videos' ||
+    isVideoUrl(item.sourceUrl || item.url || item.downloadUrl)
+  )
+}
+
+function getMaterialThumb(item: MaterialItem): string {
+  return item.previewUrl || item.image || item.coverUrl || item.thumbnail || item.url || item.sourceUrl || item.downloadUrl || ''
 }
 
-// 提取格式标签
 function getItemFormat(item: MaterialItem): string {
   if (item.format) return item.format.toUpperCase()
-  const u = (item.url || item.previewUrl || item.fileName || '').toLowerCase()
+  const u = (item.sourceUrl || item.url || item.previewUrl || item.fileName || '').toLowerCase()
+  if (u.includes('.mp4')) return 'MP4'
+  if (u.includes('.mov') || u.includes('.webm')) return 'VIDEO'
+  if (u.includes('.svg')) return 'SVG'
   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'
+  if (item.assetSubType === 'Videos' || item.type === 'video') return 'MP4'
+  if (item.assetSubType === 'Vectors' || item.type === 'svg') return 'SVG'
   return 'JPG'
 }
 
-// 100% 自研可靠的全屏大图画廊预览状态
+// 全屏大图/视频预览状态
 interface PreviewItem {
   url: string
+  isVideo: boolean
   title: string
   format: string
   meta: MaterialItem
@@ -85,19 +185,31 @@ function openPreview(item: MaterialItem, e?: Event) {
     e.preventDefault()
   }
 
-  const currentUrl = getMaterialThumb(item)
+  const currentUrl = isVideoMaterial(item)
+    ? (item.sourceUrl || item.url || item.downloadUrl || getMaterialThumb(item))
+    : getMaterialThumb(item)
+
   if (!currentUrl) {
     notify('该素材暂无可用预览地址')
     return
   }
 
+  const subKey = (item.assetSubType || item.subType || filterParams.activeSubType) as StockSubType
+  const sourceList = viewMode.value === 'detail'
+    ? displayedMaterials.value
+    : (overviewItemsMap[subKey] || [])
+
   const validItems: PreviewItem[] = []
-  displayedMaterials.value.forEach(m => {
-    const u = getMaterialThumb(m)
+  sourceList.forEach(m => {
+    const isVid = isVideoMaterial(m)
+    const u = isVid
+      ? (m.sourceUrl || m.url || m.downloadUrl || getMaterialThumb(m))
+      : getMaterialThumb(m)
     if (u) {
       validItems.push({
         url: u,
-        title: m.title || '素材大图',
+        isVideo: isVid && isVideoUrl(u),
+        title: m.title || '素材预览',
         format: getItemFormat(m),
         meta: m
       })
@@ -110,7 +222,8 @@ function openPreview(item: MaterialItem, e?: Event) {
   } else {
     validItems.unshift({
       url: currentUrl,
-      title: item.title || '素材大图',
+      isVideo: isVideoMaterial(item) && isVideoUrl(currentUrl),
+      title: item.title || '素材预览',
       format: getItemFormat(item),
       meta: item
     })
@@ -119,7 +232,6 @@ function openPreview(item: MaterialItem, e?: Event) {
 
   previewList.value = validItems
 
-  // 预览大图时，隐藏素材弹窗，并记录状态以便关闭预览后无缝恢复
   if (materialPopoverVisible && materialPopoverVisible.value) {
     wasPopoverOpenBeforePreview.value = true
     materialPopoverVisible.value = false
@@ -134,7 +246,6 @@ function closePreview() {
   previewVisible.value = false
   if (wasPopoverOpenBeforePreview.value && materialPopoverVisible) {
     wasPopoverOpenBeforePreview.value = false
-    // 延时微任务以防预览弹窗的点击事件穿透触发 Popover 的外部关闭逻辑
     setTimeout(() => {
       materialPopoverVisible.value = true
     }, 60)
@@ -172,125 +283,6 @@ function handleKeydown(e: KeyboardEvent) {
   }
 }
 
-export interface MaterialItem {
-  id: string | number
-  title: string
-  pptSource?: string
-  category?: string
-  type?: string
-  format?: string
-  color?: string
-  slideIndex?: number
-  fileName?: string
-  url?: string
-  previewUrl?: string
-  downloadUrl?: string
-  slide?: any
-  elementsCount?: number
-  originalWidth?: number
-  originalHeight?: number
-  originalSize?: { width: number; height: number }
-  tags?: string[]
-  aspectRatio?: string
-  [key: string]: any
-}
-
-export interface MaterialCategory {
-  id: string
-  type: string
-  name: string
-  hasMore?: boolean
-  items?: MaterialItem[]
-}
-
-// 统一筛选与搜索模型（红框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' }
-]
-
-/**
- * 资产细分子类型枚举 (对应后端 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 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: '图库图片',
-  gif: '动图GIF',
-  sticker: '免抠贴纸',
-  svg: '矢量图形',
-  slide: '单页模板'
-}
-
 // 安全的 JSON 请求辅助函数
 async function safeFetchJson(url: string, options: RequestInit = {}): Promise<any> {
   const response = await fetch(url, options)
@@ -309,7 +301,6 @@ 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()) ||
@@ -320,38 +311,22 @@ function getEffectiveStockUrl(): string {
   return url
 }
 
-// 规范化素材数据项（支持 MediaResource 格式及自定义素材项）
-function normalizeMaterialItem(item: any, defaultCatName = '', defaultType = ''): MaterialItem {
-  const subType = item.assetSubType || item.subType || ''
-  let type = item.type || defaultType || ''
+function normalizeMaterialItem(item: any, defaultSubType: StockSubType = 'Photos'): MaterialItem {
+  const subType = (item.assetSubType || item.subType || defaultSubType) as StockSubType
+  let type = item.type || ''
   if (!type) {
-    if (subType === 'GIF') type = 'gif'
-    else if (subType === 'Icons') type = 'sticker'
+    if (subType === 'Videos' || item.assetType === 'VIDEO') type = 'video'
     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')) {
-      previewUrl = DEFAULT_SLIDE_COVER
-    }
-    if (!url || url.includes('gold-cover.png')) {
-      url = DEFAULT_SLIDE_COVER
-    }
-  }
+  const previewUrl = item.previewUrl || item.image || item.coverUrl || item.thumbnail || item.url || item.downloadUrl || item.sourceUrl || ''
+  const sourceUrl = item.sourceUrl || item.downloadUrl || item.url || previewUrl
+  const url = sourceUrl || previewUrl
 
-  // 来源平台识别（如 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}`
@@ -360,12 +335,13 @@ function normalizeMaterialItem(item: any, defaultCatName = '', defaultType = '')
   return {
     ...item,
     id: item.id || `stock-${Math.random().toString(36).slice(2, 9)}`,
-    title: item.title || `${platform ? `${platform} ` : ''}${subType ? typeNameMap[type] || subType : '素材'}`,
+    title: item.title || `${platform ? `${platform} ` : ''}${subTypeNameMap[subType] || '素材'}`,
     type,
     assetSubType: subType,
+    subType,
     sourcePlatform: platform,
     format: fmt,
-    category: item.category || defaultCatName || (subType ? typeNameMap[type] || subType : '') || type || '素材',
+    category: item.category || subTypeNameMap[subType] || '素材',
     previewUrl,
     url,
     sourceUrl,
@@ -378,8 +354,7 @@ function normalizeMaterialItem(item: any, defaultCatName = '', defaultType = '')
   }
 }
 
-// 统一数据格式解析（兼容 jvs-dam-2.5 StockController R.ok(list) 及各种分页结构）
-function parseMaterialList(data: any): MaterialItem[] {
+function parseMaterialList(data: any, defaultSubType: StockSubType = 'Photos'): MaterialItem[] {
   if (!data) return []
   let rawList: any[] = []
   if (Array.isArray(data)) rawList = data
@@ -387,32 +362,199 @@ function parseMaterialList(data: any): MaterialItem[] {
   else if (Array.isArray(data?.records)) rawList = data.records
   else if (Array.isArray(data?.data?.list)) rawList = data.data.list
   else if (Array.isArray(data?.list)) rawList = data.list
-  else if (Array.isArray(data?.templates)) rawList = data.templates
-  else if (Array.isArray(data?.data?.templates)) rawList = data.data.templates
   else if (Array.isArray(data?.data)) {
     if (data.data.length > 0 && Array.isArray(data.data[0]?.items)) {
       return data.data.flatMap((cat: any) =>
-        (cat.items || []).map((item: any) => normalizeMaterialItem(item, cat.name, cat.type))
+        (cat.items || []).map((item: any) => normalizeMaterialItem(item, defaultSubType))
       )
     }
     rawList = data.data
   }
-  return rawList.map(item => normalizeMaterialItem(item))
+  return rawList.map(item => normalizeMaterialItem(item, defaultSubType))
 }
 
-// 核心检索方法：请求后端 stock/search 接口并发抓取 Pexels, Pixabay, Unsplash, Iconify 等平台
-async function fetchMaterials(page = 1, append = false) {
-  // 单页模板独立处理
-  if (filterParams.activeType === 'slide') {
-    await fetchSlideTemplates(page, append)
-    return
+// ============================================================================
+// 图二：概览页 4 大固定类型（Vectors / Photos / Illustrations / Videos），每个类型独立请求一次接口
+// ============================================================================
+const overviewItemsMap = reactive<Record<StockSubType, MaterialItem[]>>({
+  Vectors: [],
+  Photos: [],
+  Illustrations: [],
+  Videos: []
+})
+
+const overviewLoadingMap = reactive<Record<StockSubType, boolean>>({
+  Vectors: false,
+  Photos: false,
+  Illustrations: false,
+  Videos: false
+})
+
+const rowRefs = reactive<Record<string, HTMLElement | null>>({})
+const rowScrollState = reactive<Record<StockSubType, { canLeft: boolean; canRight: boolean }>>({
+  Vectors: { canLeft: false, canRight: false },
+  Photos: { canLeft: false, canRight: false },
+  Illustrations: { canLeft: false, canRight: false },
+  Videos: { canLeft: false, canRight: false }
+})
+
+function setRowRef(key: StockSubType, el: any) {
+  rowRefs[key] = el as HTMLElement | null
+}
+
+function updateRowScrollState(key: StockSubType) {
+  const el = rowRefs[key]
+  if (!el) return
+  const canLeft = el.scrollLeft > 4
+  const canRight = el.scrollWidth - el.clientWidth - el.scrollLeft > 4
+  rowScrollState[key] = { canLeft, canRight }
+}
+
+function scrollCategoryRow(key: StockSubType, dir: 'left' | 'right') {
+  const el = rowRefs[key]
+  if (!el) return
+  const delta = dir === 'left' ? -180 : 180
+  el.scrollBy({ left: delta, behavior: 'smooth' })
+  setTimeout(() => updateRowScrollState(key), 260)
+}
+
+// 针对单个 subType 发起独立 API 请求
+async function fetchOverviewCategory(cat: OverviewCategoryConfig, keyword = '') {
+  overviewLoadingMap[cat.key] = true
+  try {
+    const stockUrl = getEffectiveStockUrl()
+    if (!stockUrl) {
+      overviewItemsMap[cat.key] = []
+      return
+    }
+
+    const params = new URLSearchParams()
+    params.append('current', '1')
+    params.append('size', '12')
+    params.append('subType', cat.subType)
+    const trimmedKeyword = keyword.trim()
+    if (trimmedKeyword) {
+      params.append('keyword', trimmedKeyword)
+    }
+
+    const fullUrl = `${stockUrl}${stockUrl.includes('?') ? '&' : '?'}${params.toString()}`
+    const data = await safeFetchJson(fullUrl, {
+      headers: {
+        ...(materialHeaders.value || {})
+      }
+    })
+    if (data && data.code !== undefined && data.code !== 0 && data.code !== 200) {
+      overviewItemsMap[cat.key] = []
+      return
+    }
+    const list = parseMaterialList(data, cat.subType)
+    overviewItemsMap[cat.key] = list.slice(0, 12)
+  } catch (err) {
+    overviewItemsMap[cat.key] = []
+  } finally {
+    overviewLoadingMap[cat.key] = false
+    nextTick(() => {
+      updateRowScrollState(cat.key)
+      setTimeout(() => updateRowScrollState(cat.key), 300)
+    })
   }
+}
+
+// 遍历 4 种固定类型，每一个类型单独请求一次接口
+function fetchAllOverviewCategories(keyword = overviewQuery.value) {
+  overviewCategories.forEach(cat => {
+    fetchOverviewCategory(cat, keyword)
+  })
+}
+
+// ============================================================================
+// 图三：详情页标签栏滚动控制与双列瀑布流加载（带 subType 请求参数）
+// ============================================================================
+const tagTrackRef = ref<HTMLElement | null>(null)
+const tagScrollState = reactive({
+  canLeft: false,
+  canRight: false
+})
+
+function updateTagScrollState() {
+  const el = tagTrackRef.value
+  if (!el) return
+  tagScrollState.canLeft = el.scrollLeft > 4
+  tagScrollState.canRight = el.scrollWidth - el.clientWidth - el.scrollLeft > 4
+}
+
+function scrollTagRow(dir: 'left' | 'right') {
+  const el = tagTrackRef.value
+  if (!el) return
+  const delta = dir === 'left' ? -140 : 140
+  el.scrollBy({ left: delta, behavior: 'smooth' })
+  setTimeout(() => updateTagScrollState(), 250)
+}
+
+// 从图二点击「查看全部」进入图三
+async function openCategoryDetail(subType: StockSubType) {
+  const cat = overviewCategories.find(c => c.subType === subType)
+  filterParams.activeSubType = subType
+  const q = overviewQuery.value.trim()
+  baseDetailTitle.value = cat ? cat.label : subTypeNameMap[subType]
+  baseSearchQuery.value = q
+  activeTag.value = ''
+  filterParams.query = q
+  viewMode.value = 'detail'
+  currentPage.value = 1
+  pagedMaterials.value = []
+  reachEnd.value = false
+  loadFailed.value = false
+  await nextTick()
+  updateTagScrollState()
+  await fetchMaterials(1, false)
+}
+
+// 图二顶部搜索框回车：按关键词对 4 种固定类型分别重新请求一次接口
+function handleOverviewSearch() {
+  fetchAllOverviewCategories(overviewQuery.value)
+}
+
+function clearOverviewQuery() {
+  overviewQuery.value = ''
+  fetchAllOverviewCategories('')
+}
+
+// 图三点击左上角返回箭头回到图二
+function backToOverview() {
+  viewMode.value = 'overview'
+  nextTick(() => {
+    overviewCategories.forEach(cat => updateRowScrollState(cat.key))
+  })
+}
 
+// 图三点击细分标签胶囊
+async function selectDetailTag(tag: string) {
+  activeTag.value = tag
+  filterParams.query = tag ? tag : baseSearchQuery.value
+  currentPage.value = 1
+  pagedMaterials.value = []
+  reachEnd.value = false
+  loadFailed.value = false
+  await fetchMaterials(1, false)
+}
+
+const loading = ref(false)
+const pagedMaterials = ref<MaterialItem[]>([])
+const currentPage = ref(1)
+const pageSize = 24
+
+const loadingMore = ref(false)
+const loadFailed = ref(false)
+const loadErrorMsg = ref('')
+const reachEnd = ref(false)
+
+// 图三分页加载：始终携带 subType 请求参数
+async function fetchMaterials(page = 1, append = false) {
   const stockUrl = getEffectiveStockUrl()
   if (!stockUrl) {
     if (!append) {
       pagedMaterials.value = []
-      totalRecords.value = 0
     }
     reachEnd.value = true
     return
@@ -427,17 +569,13 @@ async function fetchMaterials(page = 1, append = false) {
     const params = new URLSearchParams()
     params.append('current', String(page))
     params.append('size', String(pageSize))
+    params.append('subType', filterParams.activeSubType)
 
     const q = filterParams.query.trim()
     if (q) {
       params.append('keyword', q)
     }
 
-    const subType = tabToSubTypeMap[filterParams.activeType]
-    if (subType) {
-      params.append('subType', subType)
-    }
-
     const fullUrl = `${stockUrl}${stockUrl.includes('?') ? '&' : '?'}${params.toString()}`
     const data = await safeFetchJson(fullUrl, {
       headers: {
@@ -445,19 +583,18 @@ async function fetchMaterials(page = 1, append = false) {
       }
     })
 
-    // 针对接口返回非成功状态（如未登录 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)
+    const newRecords = parseMaterialList(data, filterParams.activeSubType)
 
-    if (newRecords.length === 0 || newRecords.length < pageSize) {
+    // 如果本次请求返回的数据量不满 size，则证明没有下一页了
+    if (newRecords.length < pageSize) {
       reachEnd.value = true
     } else {
       reachEnd.value = false
@@ -472,12 +609,10 @@ async function fetchMaterials(page = 1, append = false) {
     }
 
     currentPage.value = page
-    totalRecords.value = data?.data?.total ?? data?.total ?? (reachEnd.value ? pagedMaterials.value.length : 9999)
   } catch (err: any) {
     console.warn('[Stock Search] 加载公网素材出错:', err)
     if (!append) {
       pagedMaterials.value = []
-      totalRecords.value = 0
       reachEnd.value = true
     } else {
       loadFailed.value = true
@@ -489,57 +624,51 @@ async function fetchMaterials(page = 1, append = false) {
   }
 }
 
-// 加载单页 PPT 模板
-async function fetchSlideTemplates(page = 1, append = false) {
-  try {
-    loading.value = !append
-    loadingMore.value = append
-    loadFailed.value = false
-    loadErrorMsg.value = ''
+const displayedMaterials = computed<MaterialItem[]>(() => {
+  return pagedMaterials.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
+// 将瀑布流列表分配到左右两列（保持加载更多时的绝对稳定，不发生列跳动）
+const waterfallColumns = computed<[MaterialItem[], MaterialItem[]]>(() => {
+  const left: MaterialItem[] = []
+  const right: MaterialItem[] = []
+  let leftHeight = 0
+  let rightHeight = 0
+
+  displayedMaterials.value.forEach((item, idx) => {
+    let ratio = 0.75
+    const w = Number(item.originalWidth || item.width)
+    const h = Number(item.originalHeight || item.height)
+    if (w > 0 && h > 0) {
+      ratio = Math.max(0.45, Math.min(1.8, h / w))
+    } else if (idx % 3 === 1) {
+      ratio = 1.25
+    } else if (idx % 4 === 2) {
+      ratio = 0.65
+    }
+
+    if (leftHeight <= rightHeight) {
+      left.push(item)
+      leftHeight += ratio
     } else {
-      pagedMaterials.value = []
-      totalRecords.value = 0
-      reachEnd.value = true
+      right.push(item)
+      rightHeight += ratio
     }
-  } catch (err: any) {
-    pagedMaterials.value = []
-    totalRecords.value = 0
-    reachEnd.value = true
-  } finally {
-    loading.value = false
-    loadingMore.value = false
-  }
-}
+  })
 
-// 聚合当前素材列表
-const rawSourceMaterials = computed<MaterialItem[]>(() => {
-  return pagedMaterials.value
+  return [left, right]
 })
 
-// 是否还有更多数据可供加载（若已失败或已到底，立即返回 false，防止触底循环）
 const hasMore = computed(() => {
-  if (reachEnd.value || loadFailed.value) return false
-  if (totalRecords.value > 0) {
-    return pagedMaterials.value.length < totalRecords.value
-  }
-  return !reachEnd.value
+  return !reachEnd.value && !loadFailed.value
 })
 
-// 加载更多分页数据
 async function loadMore() {
   if (loading.value || loadingMore.value || !hasMore.value || loadFailed.value || reachEnd.value) return
   const nextPage = currentPage.value + 1
   await fetchMaterials(nextPage, true)
 }
 
-// 手动点击重试（重置失败状态并重新触发加载）
 async function retryLoadMore() {
   loadFailed.value = false
   loadErrorMsg.value = ''
@@ -547,500 +676,378 @@ async function retryLoadMore() {
   await fetchMaterials(targetPage, true)
 }
 
-// 瀑布流滚动触底自动加载监听（带 250ms 节流与熔断保护）
-function handleScroll(e: Event) {
-  if (loading.value || loadingMore.value || loadFailed.value || reachEnd.value || !hasMore.value) {
+function formatMaterialTitle(title?: string, fallback = '素材', maxLen = 12): string {
+  const text = (title || '').trim()
+  if (!text) return fallback
+  return text.length > maxLen ? `${text.slice(0, maxLen)}...` : text
+}
+
+// 点击素材卡片插入画布（区分视频与图片/矢量/插画）
+function handleSelectMaterial(meta: MaterialItem) {
+  const isVid = isVideoMaterial(meta)
+  const targetUrl = meta.sourceUrl || meta.url || meta.downloadUrl || meta.previewUrl
+
+  if (!targetUrl) {
+    notify('该素材暂无可用的资源地址')
     return
   }
 
-  if (scrollThrottleTimer) return
-  scrollThrottleTimer = window.setTimeout(() => {
-    scrollThrottleTimer = null
-  }, 250)
+  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)
+    }
+  }
 
-  const el = e.target as HTMLElement
-  if (!el) return
-  if (el.scrollHeight - (el.scrollTop + el.clientHeight) < 140) {
-    loadMore()
+  if (isVid) {
+    addElement('video', targetUrl, undefined, undefined, undefined, initialDimensions)
+    notify(`已成功添加视频 "${formatMaterialTitle(meta.title, '高清视频', 12)}" 到画布`)
+  } else {
+    addElement('image', targetUrl, undefined, undefined, undefined, initialDimensions)
+    notify(`已成功添加素材 "${formatMaterialTitle(meta.title, '图片', 12)}" 到画布`)
   }
 }
 
-// 根据红框筛选条件过滤后的瀑布流素材列表（红框4）
-const displayedMaterials = computed<MaterialItem[]>(() => {
-  return rawSourceMaterials.value.filter(item => {
-    // 1. 类型过滤 (红框2)
-    if (filterParams.activeType !== 'all') {
-      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) {
-      const fmt = getItemFormat(item)
-      if (fmt.toUpperCase() !== filterParams.format.toUpperCase()) return false
-    }
-    // 3. 颜色过滤 (红框3)
-    if (filterParams.color) {
-      const c = (item.color || item.primaryColor || '').toLowerCase()
-      if (!c || c !== filterParams.color.toLowerCase()) return false
-    }
-    return true
-  })
-})
+function handleCloseDrawer() {
+  activeTab.value = null
+}
 
-// 筛选标签计算
-const currentSortLabel = computed(() => {
-  const match = sortOptions.find(o => o.value === filterParams.sort)
-  return match ? match.label : '综合排序'
+onMounted(() => {
+  fetchAllOverviewCategories()
+  window.addEventListener('keydown', handleKeydown)
 })
 
-const currentColorLabel = computed(() => {
-  if (!filterParams.color) return '颜色'
-  const match = colorOptions.find(c => c.hex.toLowerCase() === filterParams.color.toLowerCase())
-  return match ? match.name : '已选色'
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeydown)
 })
 
-const hasActiveFilters = computed(() => {
-  return !!filterParams.format || !!filterParams.color || filterParams.sort !== 'recommend'
+watch([() => materialApiUrl?.value, () => materialPageApiUrl?.value, () => materialTreeApiUrl?.value], () => {
+  fetchAllOverviewCategories()
+  if (viewMode.value === 'detail') {
+    fetchMaterials(1, false)
+  }
 })
+</script>
 
-// 切换分类 Tab（红框2）
-async function switchCategoryTab(typeValue: string) {
-  filterParams.activeType = typeValue
-  currentPage.value = 1
-  pagedMaterials.value = []
-  reachEnd.value = false
-  loadFailed.value = false
-  await fetchMaterials(1, false)
-}
+<template>
+  <div class="material-drawer-container">
+    <!-- 顶部抽屉标题栏：图二显示「素材库」，图三显示「← 分类/搜索词」 -->
+    <div class="material-drawer-header">
+      <div v-if="viewMode === 'overview'" class="drawer-header-left">
+        <span class="drawer-header-title">素材库</span>
+      </div>
+      <button v-else type="button" class="drawer-back-btn" @click="backToOverview">
+        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"
+          stroke-linecap="round" stroke-linejoin="round">
+          <line x1="19" y1="12" x2="5" y2="12" />
+          <polyline points="12 19 5 12 12 5" />
+        </svg>
+        <span class="drawer-header-title">{{ detailHeaderTitle }}</span>
+      </button>
+
+      <button type="button" class="drawer-close-btn" title="关闭面板" @click="handleCloseDrawer">
+        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"
+          stroke-linecap="round" stroke-linejoin="round">
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </button>
+    </div>
 
-// 搜索处理（红框1）
-async function handleSearch() {
-  currentPage.value = 1
-  pagedMaterials.value = []
-  reachEnd.value = false
-  loadFailed.value = false
-  await fetchMaterials(1, false)
-}
+    <!-- ==================== 图二：素材库分类概览视图 ==================== -->
+    <div v-if="viewMode === 'overview'" class="material-overview-body">
+      <!-- 搜索框 -->
+      <div class="overview-search-wrap">
+        <div class="overview-search-box">
+          <el-icon class="overview-search-icon" @click="handleOverviewSearch">
+            <Search />
+          </el-icon>
+          <input
+            v-model="overviewQuery"
+            type="text"
+            placeholder="搜索"
+            class="overview-search-input"
+            @keyup.enter="handleOverviewSearch"
+          />
+          <el-icon
+            v-if="overviewQuery"
+            class="overview-search-clear"
+            @click="clearOverviewQuery"
+          >
+            <CircleCloseFilled />
+          </el-icon>
+        </div>
+      </div>
 
-function clearQuery() {
-  filterParams.query = ''
-  handleSearch()
-}
+      <!-- 4大固定分类横向预览列表（Vectors / Photos / Illustrations / Videos） -->
+      <div class="overview-sections-scroll">
+        <div
+          v-for="cat in overviewCategories"
+          :key="cat.key"
+          class="overview-category-section"
+        >
+          <div class="section-header-row">
+            <span class="section-cat-title">{{ cat.label }}</span>
+            <button type="button" class="section-view-all-btn" @click="openCategoryDetail(cat.subType)">
+              查看全部
+            </button>
+          </div>
 
-function handleSortChange(val: string) {
-  filterParams.sort = val
-}
+          <div class="section-carousel-container">
+            <div
+              :ref="el => setRowRef(cat.key, el)"
+              class="section-carousel-track"
+              @scroll="updateRowScrollState(cat.key)"
+            >
+              <!-- 加载占位骨架 -->
+              <template v-if="overviewLoadingMap[cat.key] && (!overviewItemsMap[cat.key] || overviewItemsMap[cat.key].length === 0)">
+                <div v-for="n in 3" :key="n" class="overview-skeleton-card"></div>
+              </template>
 
-function handleFormatChange(val: string) {
-  filterParams.format = val
-}
+              <!-- 横向缩略图卡片 -->
+              <template v-else-if="overviewItemsMap[cat.key] && overviewItemsMap[cat.key].length > 0">
+                <div
+                  v-for="(item, idx) in overviewItemsMap[cat.key]"
+                  :key="item.id || idx"
+                  class="overview-thumb-card"
+                  @click="handleSelectMaterial(item)"
+                >
+                  <video
+                    v-if="isVideoUrl(getMaterialThumb(item))"
+                    :src="getMaterialThumb(item)"
+                    muted
+                    preload="metadata"
+                    playsinline
+                    class="overview-thumb-img"
+                    @loadeddata="updateRowScrollState(cat.key)"
+                    @mouseenter="($event.target as HTMLVideoElement)?.play?.()"
+                    @mouseleave="($event.target as HTMLVideoElement)?.pause?.()"
+                  />
+                  <img
+                    v-else-if="getMaterialThumb(item)"
+                    :src="getMaterialThumb(item)"
+                    :alt="item.title || cat.label"
+                    loading="lazy"
+                    class="overview-thumb-img"
+                    @load="updateRowScrollState(cat.key)"
+                  />
+                  <span v-if="cat.subType === 'Videos' || isVideoMaterial(item)" class="video-badge-icon">
+                    <el-icon><VideoPlay /></el-icon>
+                  </span>
+                </div>
+              </template>
 
-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)
-  } else {
-    // 优先采用高清 sourceUrl，回退到 url / previewUrl / downloadUrl
-    const imgUrl = meta.sourceUrl || meta.url || meta.previewUrl || meta.downloadUrl
-    if (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('该素材暂无可用的图片地址')
-    }
-  }
-}
-
-// 异步加载单页物理 JSON 并执行插入
-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
-    const inlineSize = meta.originalSize || fallbackSize
-    if (meta.slide) {
-      insertExternalSlide(meta.slide, inlineSize)
-      return
-    }
-
-    let detailUrl = meta.url || meta.downloadUrl || ''
-    if (!detailUrl && meta.fileName) {
-      const baseUrl = (materialApiUrl.value && materialApiUrl.value.trim()) || DEFAULT_MATERIAL_API_URL
-      if (baseUrl.includes('/') && baseUrl.endsWith('.json')) {
-        const dir = baseUrl.substring(0, baseUrl.lastIndexOf('/') + 1)
-        detailUrl = `${dir}slides/${meta.fileName}`
-      } else {
-        detailUrl = `/templates/slides/${meta.fileName}`
-      }
-    }
-
-    if (!detailUrl) {
-      throw new Error('未找到单页素材地址')
-    }
-
-    const data = await safeFetchJson(detailUrl, {
-      headers: {
-        ...(materialHeaders.value || {})
-      }
-    })
-    const slideObj = data.slide || data.data?.slide || (data.elements ? data : null)
-    const originalSize = data.originalSize || data.data?.originalSize || fallbackSize
-
-    if (!slideObj) {
-      throw new Error('单页数据格式异常')
-    }
-
-    insertExternalSlide(slideObj, originalSize)
-    notify(`已成功插入单页模板 [${meta.title || '素材'}]`)
-  } catch (err: any) {
-    console.error('加载单页模板失败:', err)
-    notify(err.message || '加载单页模板失败')
-  }
-}
-
-onMounted(() => {
-  fetchMaterials(1, false)
-
-  // 监听容器大小以实现极致自适应
-  if (containerRef.value) {
-    resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        isNarrow.value = entry.contentRect.width < 520
-      }
-    })
-    resizeObserver.observe(containerRef.value)
-  }
-
-  // 键盘快捷键监听
-  window.addEventListener('keydown', handleKeydown)
-})
-
-onUnmounted(() => {
-  if (resizeObserver) {
-    resizeObserver.disconnect()
-    resizeObserver = null
-  }
-  window.removeEventListener('keydown', handleKeydown)
-})
+              <!-- 空状态兜底 -->
+              <div v-else class="overview-empty-row" @click="openCategoryDetail(cat.subType)">
+                <span>暂无{{ cat.label }}数据</span>
+              </div>
+            </div>
 
-watch([() => materialApiUrl?.value, () => materialPageApiUrl?.value, () => materialTreeApiUrl?.value], () => {
-  fetchMaterials(1, false)
-})
-</script>
+            <!-- 左侧渐变与左滑箭头 -->
+            <div
+              v-if="rowScrollState[cat.key]?.canLeft"
+              class="carousel-edge-mask left-mask"
+              @click.stop="scrollCategoryRow(cat.key, 'left')"
+            >
+              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2"
+                stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="15 18 9 12 15 6" />
+              </svg>
+            </div>
 
-<template>
-  <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="filterParams.query" 
-          type="text" 
-          :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="capsule-search-btn" 
-          @click="handleSearch"
-          :disabled="loading"
-          :title="isNarrow ? '搜索素材' : ''"
-        >
-          <el-icon v-if="!loading"><Search /></el-icon>
-          <span v-else class="btn-spinner-ring"></span>
-          <span class="btn-text">搜索</span>
-        </button>
+            <!-- 右侧渐变与右滑箭头 -->
+            <div
+              v-if="rowScrollState[cat.key]?.canRight"
+              class="carousel-edge-mask right-mask"
+              @click.stop="scrollCategoryRow(cat.key, 'right')"
+            >
+              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2"
+                stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="9 18 15 12 9 6" />
+              </svg>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
 
-    <!-- 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)"
+    <!-- ==================== 图三：分类/搜索详情瀑布流视图 ==================== -->
+    <div v-else class="material-detail-body">
+      <!-- 顶部横向细分标签栏 -->
+      <div class="detail-tags-bar-wrap">
+        <div
+          ref="tagTrackRef"
+          class="detail-tags-track"
+          @scroll="updateTagScrollState"
         >
-          {{ tab.label }}
-        </button>
-      </div>
+          <button
+            type="button"
+            class="detail-tag-pill"
+            :class="{ active: activeTag === '' }"
+            @click="selectDetailTag('')"
+          >
+            全部
+          </button>
+          <button
+            v-for="tag in currentCategoryTags"
+            :key="tag"
+            type="button"
+            class="detail-tag-pill"
+            :class="{ active: activeTag === tag }"
+            @click="selectDetailTag(tag)"
+          >
+            {{ tag }}
+          </button>
+        </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>
-          <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="清除所有筛选"
+        <!-- 标签栏左侧滚动箭头 -->
+        <div
+          v-if="tagScrollState.canLeft"
+          class="tags-edge-arrow left-arrow"
+          @click.stop="scrollTagRow('left')"
+        >
+          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2"
+            stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="15 18 9 12 15 6" />
+          </svg>
+        </div>
+
+        <!-- 标签栏右侧滚动箭头 -->
+        <div
+          v-if="tagScrollState.canRight"
+          class="tags-edge-arrow right-arrow"
+          @click.stop="scrollTagRow('right')"
         >
-          重置
-        </button>
+          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2"
+            stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="9 18 15 12 9 6" />
+          </svg>
+        </div>
       </div>
-    </div>
 
-    <!-- 加载中动画 -->
-    <div v-if="loading && displayedMaterials.length === 0" class="gallery-loading-box">
-      <div class="loading-ring-spinner"></div>
-      <span class="loading-tip-text">正在检索素材媒体库...</span>
-    </div>
+      <!-- 加载中状态 -->
+      <div v-if="loading && displayedMaterials.length === 0" class="gallery-loading-box">
+        <div class="loading-ring-spinner"></div>
+        <span class="loading-tip-text">正在加载{{ subTypeNameMap[filterParams.activeSubType] }}...</span>
+      </div>
 
-    <!-- 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 
-            v-for="(item, idx) in displayedMaterials" 
-            :key="item.id || idx" 
-            class="waterfall-card-item"
-            @click="handleSelectMaterial(item)"
-          >
-            <div class="card-box">
-              <!-- 图片视口 -->
-              <div class="card-media-viewport">
-                <img 
-                  v-if="getMaterialThumb(item)"
-                  :src="getMaterialThumb(item)" 
-                  :alt="item.title || '素材'" 
-                  loading="lazy" 
-                  class="card-thumb-image" 
+      <!-- 双列瀑布流列表 -->
+      <div v-else class="detail-waterfall-scroll">
+        <div v-if="displayedMaterials.length > 0" class="detail-masonry-wrapper">
+          <div class="detail-masonry-columns">
+            <div
+              v-for="(colItems, colIdx) in waterfallColumns"
+              :key="colIdx"
+              class="detail-masonry-col"
+            >
+              <div
+                v-for="(item, idx) in colItems"
+                :key="item.id || idx"
+                class="detail-masonry-card"
+                @click="handleSelectMaterial(item)"
+              >
+                <video
+                  v-if="isVideoUrl(getMaterialThumb(item))"
+                  :src="getMaterialThumb(item)"
+                  muted
+                  preload="metadata"
+                  playsinline
+                  class="detail-card-img"
+                  @mouseenter="($event.target as HTMLVideoElement)?.play?.()"
+                  @mouseleave="($event.target as HTMLVideoElement)?.pause?.()"
                 />
-                <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">
+                <img
+                  v-else-if="getMaterialThumb(item)"
+                  :src="getMaterialThumb(item)"
+                  :alt="item.title || '素材'"
+                  loading="lazy"
+                  class="detail-card-img"
+                />
+                <div v-else class="detail-card-placeholder">
+                  <svg viewBox="0 0 24 24" width="24" height="24" 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="card-hover-mask">
-                  <button 
-                    v-if="getMaterialThumb(item)"
-                    type="button" 
-                    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>
+                <span v-if="filterParams.activeSubType === 'Videos' || isVideoMaterial(item)" class="video-badge-icon">
+                  <el-icon><VideoPlay /></el-icon>
+                </span>
 
-              <!-- 卡片底部信息条 -->
-              <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)">
-                  <el-icon><MoreFilled /></el-icon>
+                <!-- 悬浮预览小按钮 -->
+                <button
+                  v-if="getMaterialThumb(item)"
+                  type="button"
+                  class="detail-card-preview-btn"
+                  title="大图预览"
+                  @click.stop.prevent="openPreview(item, $event)"
+                >
+                  <el-icon><View /></el-icon>
                 </button>
               </div>
             </div>
           </div>
-        </div>
-
-        <!-- 瀑布流底部加载更多与完成状态 -->
-        <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">
-              点击重试
+          <!-- 瀑布流底部状态 -->
+          <div class="waterfall-footer-status">
+            <div v-if="loadingMore" class="loading-more-row">
+              <span class="btn-spinner-ring dark"></span>
+              <span>正在加载更多...</span>
+            </div>
+            <div v-else-if="loadFailed" class="load-failed-row">
+              <span class="load-error-text">加载失败</span>
+              <button type="button" class="retry-load-btn" @click="retryLoadMore">
+                重试
+              </button>
+            </div>
+            <button
+              v-else-if="hasMore"
+              type="button"
+              class="load-more-action-btn"
+              @click="loadMore"
+            >
+              加载更多
             </button>
-          </div>
-
-          <!-- 3. 还有更多数据可供加载 -->
-          <button
-            v-else-if="hasMore"
-            type="button"
-            class="load-more-action-btn"
-            @click="loadMore"
-          >
-            <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 v-else class="all-loaded-divider">
+              <span>— 已加载全部 —</span>
+            </div>
           </div>
         </div>
-      </div>
 
-      <!-- 空状态 -->
-      <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 v-else class="gallery-empty-state">
+          <svg viewBox="0 0 24 24" width="40" height="40" 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>
+        </div>
       </div>
     </div>
 
-    <!-- 100% 自研可靠的高清全屏大图预览 Modal（Teleport 挂载到 body 顶层） -->
+    <!-- 全屏大图/视频预览 Modal -->
     <teleport to="body">
       <transition name="preview-backdrop-fade">
-        <div 
-          v-if="previewVisible" 
+        <div
+          v-if="previewVisible"
           class="custom-fullscreen-preview-modal"
           @click.self="closePreview"
         >
-          <!-- 顶部浮动信息条 -->
           <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" 
+            <button
+              type="button"
+              class="preview-close-cross-btn"
               title="关闭预览 (Esc)"
               @click="closePreview"
             >
@@ -1048,45 +1055,49 @@ watch([() => materialApiUrl?.value, () => materialPageApiUrl?.value, () => mater
             </button>
           </div>
 
-          <!-- 左侧上一张 -->
-          <button 
-            v-if="previewList.length > 1" 
-            type="button" 
-            class="preview-arrow-btn prev-arrow" 
+          <button
+            v-if="previewList.length > 1"
+            type="button"
+            class="preview-arrow-btn prev-arrow"
             title="上一张 (←)"
             @click.stop="prevPreview"
           >
             <el-icon><ArrowLeft /></el-icon>
           </button>
 
-          <!-- 右侧下一张 -->
-          <button 
-            v-if="previewList.length > 1" 
-            type="button" 
-            class="preview-arrow-btn next-arrow" 
+          <button
+            v-if="previewList.length > 1"
+            type="button"
+            class="preview-arrow-btn next-arrow"
             title="下一张 (→)"
             @click.stop="nextPreview"
           >
             <el-icon><ArrowRight /></el-icon>
           </button>
 
-          <!-- 中央超清大图视口 -->
           <div class="preview-stage-viewport" @click.self="closePreview">
-            <img 
-              v-if="currentPreviewItem?.url"
-              :src="currentPreviewItem.url" 
-              :alt="currentPreviewItem.title" 
+            <video
+              v-if="currentPreviewItem?.isVideo && currentPreviewItem?.url"
+              :src="currentPreviewItem.url"
+              controls
+              autoplay
+              playsinline
+              class="preview-stage-img"
+            />
+            <img
+              v-else-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" 
+            <button
+              type="button"
               class="preview-quick-insert-btn"
               @click="handleInsertFromPreview"
             >
@@ -1101,746 +1112,609 @@ watch([() => materialApiUrl?.value, () => materialPageApiUrl?.value, () => mater
 </template>
 
 <style scoped lang="scss">
-.template-gallery-container {
+.material-drawer-container {
   display: flex;
   flex-direction: column;
+  width: 288px;
+  max-width: 100%;
   height: 100%;
-  padding: 14px 16px 16px;
+  background: #ffffff;
   box-sizing: border-box;
-  background: var(--bg-surface, #ffffff);
-  gap: 12px;
   overflow: hidden;
+  user-select: none;
 }
 
-/* 1. 顶部现代搜索栏（红框1） */
-.gallery-top-search {
-  width: 100%;
-}
-
-.search-input-capsule {
+/* 顶部栏（图二：素材库 / 图三：← 分类名） */
+.material-drawer-header {
   display: flex;
   align-items: center;
-  width: 100%;
-  height: 42px;
-  background: #f4f6f8;
-  border: 1.5px solid transparent;
-  border-radius: 21px;
-  padding: 3px 4px 3px 14px;
+  justify-content: space-between;
+  height: 48px;
+  padding: 0 16px;
+  border-bottom: 1px solid #f1f5f9;
+  flex-shrink: 0;
   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);
+.drawer-header-left {
+  display: flex;
+  align-items: center;
+  min-width: 0;
 }
 
+.drawer-header-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
-.native-search-input {
-  flex: 1;
+.drawer-back-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   border: none;
-  outline: none;
   background: transparent;
-  font-size: 13.5px;
+  padding: 4px 0;
   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;
-}
+  min-width: 0;
+  transition: color 0.15s ease;
 
-.search-clear-icon:hover {
-  color: #64748b;
+  &:hover {
+    color: #1e6fff;
+  }
 }
 
-.capsule-search-btn {
-  display: inline-flex;
+.drawer-close-btn {
+  display: flex;
   align-items: center;
-  gap: 5px;
-  height: 34px;
-  padding: 0 16px;
-  background: #1e293b;
-  color: #ffffff;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
   border: none;
-  border-radius: 17px;
-  font-size: 13px;
-  font-weight: 500;
+  background: transparent;
+  color: #475569;
   cursor: pointer;
-  transition: all 0.2s ease;
-  flex-shrink: 0;
-}
+  border-radius: 6px;
+  padding: 0;
+  transition: all 0.15s ease;
 
-.capsule-search-btn:hover:not(:disabled) {
-  background: #0f172a;
+  &:hover {
+    background: #f1f5f9;
+    color: #0f172a;
+  }
 }
 
-.capsule-search-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
+/* ==================== 图二：概览视图样式 ==================== */
+.material-overview-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
-.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;
+.overview-search-wrap {
+  padding: 12px 16px 8px;
+  flex-shrink: 0;
 }
 
-/* 2. 工具栏行：分类 Tabs + 多维筛选（红框2 + 红框3） */
-.gallery-toolbar-row {
+.overview-search-box {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  padding-bottom: 4px;
-  border-bottom: 1px solid #f1f5f9;
-  flex-shrink: 0;
+  height: 36px;
+  background: #f5f6f7;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  padding: 0 10px;
+  gap: 8px;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+
+  &:focus-within {
+    background: #ffffff;
+    border-color: #1e6fff;
+  }
 }
 
-/* 红框2：分类类型胶囊组 */
-.category-pill-group {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  background: #f1f5f9;
-  padding: 3px;
-  border-radius: 18px;
+.overview-search-icon {
+  font-size: 15px;
+  color: #94a3b8;
+  cursor: pointer;
   flex-shrink: 0;
 }
 
-.pill-tab-btn {
+.overview-search-input {
+  flex: 1;
+  min-width: 0;
   border: none;
   outline: none;
   background: transparent;
-  padding: 5px 12px;
   font-size: 13px;
-  color: #64748b;
-  font-weight: 500;
-  border-radius: 15px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-}
-
-.pill-tab-btn:hover {
-  color: #0f172a;
-}
+  color: #1e293b;
 
-.pill-tab-btn.active {
-  background: #0f172a;
-  color: #ffffff;
-  font-weight: 600;
-  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
+  &::placeholder {
+    color: #94a3b8;
+  }
 }
 
-/* 红框3：筛选下拉项 */
-.filter-dropdown-group {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.overview-search-clear {
+  font-size: 14px;
+  color: #94a3b8;
+  cursor: pointer;
   flex-shrink: 0;
-}
 
-.toolbar-dropdown-btn {
-  display: inline-flex;
-  align-items: center;
-  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;
+  &:hover {
+    color: #64748b;
+  }
 }
 
-.toolbar-dropdown-btn:hover {
-  background: #f8fafc;
-  color: #0f172a;
+.overview-sections-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 8px 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #e2e8f0;
+    border-radius: 2px;
+  }
 }
 
-.toolbar-dropdown-btn.is-active {
-  color: #ff5000;
-  font-weight: 600;
-  background: rgba(255, 80, 0, 0.08);
+.overview-category-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
-.dropdown-arrow {
-  font-size: 11px;
+.section-header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
-.color-badge-dot {
-  display: inline-block;
-  width: 9px;
-  height: 9px;
-  border-radius: 50%;
-  border: 1px solid rgba(0, 0, 0, 0.15);
+.section-cat-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: #1e293b;
 }
 
-.reset-filters-link {
+.section-view-all-btn {
   border: none;
-  background: none;
+  background: transparent;
+  padding: 0;
   font-size: 12px;
   color: #94a3b8;
   cursor: pointer;
-  padding: 3px 6px;
-  text-decoration: underline;
-  transition: color 0.2s;
-  white-space: nowrap;
+  transition: color 0.15s ease;
+
+  &:hover {
+    color: #1e6fff;
+  }
 }
 
-.reset-filters-link:hover {
-  color: #ef4444;
+.section-carousel-container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
 }
 
-/* 颜色选择面板 */
-.color-picker-palette {
-  padding: 10px;
-  width: 170px;
+.section-carousel-track {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
-.palette-header-label {
-  font-size: 12px;
-  color: #64748b;
-  margin-bottom: 8px;
-  font-weight: 500;
+.overview-skeleton-card {
+  width: 96px;
+  height: 84px;
+  border-radius: 8px;
+  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.4s infinite;
+  flex-shrink: 0;
 }
 
-.palette-swatch-grid {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 6px;
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
 }
 
-.swatch-item {
-  width: 24px;
-  height: 24px;
-  border-radius: 6px;
+.overview-thumb-card {
+  height: 84px;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #f8fafc;
+  flex-shrink: 0;
   cursor: pointer;
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  transition: all 0.2s ease;
-}
+  position: relative;
 
-.swatch-item:hover {
-  transform: scale(1.15);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  &:hover .overview-thumb-img {
+    transform: scale(1.04);
+  }
 }
 
-.swatch-item.active {
-  box-shadow: 0 0 0 2px #ff5000;
+.overview-thumb-img {
+  height: 84px;
+  width: auto;
+  min-width: 72px;
+  max-width: 148px;
+  object-fit: cover;
+  display: block;
+  border-radius: 8px;
+  transition: transform 0.25s ease;
 }
 
-.swatch-item.all-swatch {
+.video-badge-icon {
+  position: absolute;
+  left: 6px;
+  bottom: 6px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: rgba(15, 23, 42, 0.55);
+  color: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 10px;
-  color: #64748b;
-  background: #f1f5f9;
+  font-size: 12px;
+  pointer-events: none;
 }
 
-/* 加载中状态 */
-.gallery-loading-box {
+.overview-empty-row {
+  width: 100%;
+  height: 84px;
+  border-radius: 8px;
+  background: #f8fafc;
+  border: 1px dashed #e2e8f0;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 60px 0;
-  gap: 12px;
+  font-size: 12px;
+  color: #94a3b8;
+  cursor: pointer;
 }
 
-.loading-ring-spinner {
-  width: 28px;
-  height: 28px;
-  border: 3px solid #e2e8f0;
-  border-top-color: #0f172a;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
+.carousel-edge-mask {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #334155;
+  z-index: 2;
+  transition: opacity 0.15s ease;
 
-.loading-tip-text {
-  font-size: 13px;
-  color: #64748b;
+  &.left-mask {
+    left: 0;
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 100%);
+    justify-content: flex-start;
+    padding-left: 4px;
+  }
+
+  &.right-mask {
+    right: 0;
+    background: linear-gradient(270deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 100%);
+    justify-content: flex-end;
+    padding-right: 4px;
+  }
+
+  &:hover {
+    color: #0f172a;
+  }
 }
 
-/* 3. 主体内容区：纯瀑布流排版（红框4） */
-.waterfall-scroll-container {
+/* ==================== 图三：详情视图样式 ==================== */
+.material-detail-body {
   flex: 1;
   min-height: 0;
-  overflow-y: auto;
-  padding-right: 4px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
-.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;
+.detail-tags-bar-wrap {
+  position: relative;
+  padding: 12px 16px 8px;
+  flex-shrink: 0;
+  overflow: hidden;
 }
 
-.waterfall-masonry-layout {
-  column-count: 4;
-  column-gap: 12px;
-}
+.detail-tags-track {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 
-@media (max-width: 820px) {
-  .waterfall-masonry-layout {
-    column-count: 3;
+  &::-webkit-scrollbar {
+    display: none;
   }
 }
 
-.waterfall-card-item {
-  break-inside: avoid;
-  margin-bottom: 12px;
+.detail-tag-pill {
+  height: 30px;
+  padding: 0 14px;
+  border-radius: 6px;
+  border: 1px solid #e2e8f0;
+  background: #ffffff;
+  color: #475569;
+  font-size: 12.5px;
+  font-weight: 400;
+  white-space: nowrap;
+  flex-shrink: 0;
   cursor: pointer;
-}
+  transition: all 0.15s ease;
 
-.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;
-}
+  &:hover {
+    border-color: #cbd5e1;
+    color: #1e293b;
+  }
 
-.card-box:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
-  border-color: #e2e8f0;
+  &.active {
+    background: #ebf3ff;
+    border-color: transparent;
+    color: #1e6fff;
+    font-weight: 500;
+  }
 }
 
-.card-media-viewport {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-  background: #f1f5f9;
-  min-height: 90px;
-  max-height: 260px;
+.tags-edge-arrow {
+  position: absolute;
+  top: 12px;
+  height: 30px;
+  width: 28px;
   display: flex;
   align-items: center;
-  justify-content: center;
-}
+  cursor: pointer;
+  color: #334155;
+  z-index: 2;
 
-.card-thumb-image {
-  width: 100%;
-  height: auto;
-  max-height: 260px;
-  display: block;
-  object-fit: cover;
-  transition: transform 0.4s ease;
+  &.left-arrow {
+    left: 16px;
+    background: linear-gradient(90deg, #ffffff 45%, rgba(255, 255, 255, 0) 100%);
+    justify-content: flex-start;
+  }
+
+  &.right-arrow {
+    right: 16px;
+    background: linear-gradient(270deg, #ffffff 45%, rgba(255, 255, 255, 0) 100%);
+    justify-content: flex-end;
+  }
 }
 
-.card-box:hover .card-thumb-image {
-  transform: scale(1.04);
+.detail-waterfall-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 4px 16px 16px;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 2px;
+  }
 }
 
-.card-empty-placeholder {
-  padding: 30px 0;
+.detail-masonry-columns {
   display: flex;
-  align-items: center;
-  justify-content: center;
+  align-items: flex-start;
+  gap: 8px;
 }
 
-/* 悬浮遮罩 */
-.card-hover-mask {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(15, 23, 42, 0.55);
-  backdrop-filter: blur(2px);
+.detail-masonry-col {
+  flex: 1;
+  min-width: 0;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-
-.card-box:hover .card-hover-mask {
-  opacity: 1;
+  gap: 8px;
 }
 
-.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;
+.detail-masonry-card {
+  position: relative;
+  width: 100%;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #f1f5f9;
   cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 13px;
-  transition: all 0.2s;
+
+  &:hover .detail-card-img {
+    transform: scale(1.03);
+  }
+
+  &:hover .detail-card-preview-btn {
+    opacity: 1;
+  }
 }
 
-.preview-float-btn:hover {
-  background: #ffffff;
-  transform: scale(1.1);
+.detail-card-img {
+  width: 100%;
+  height: auto;
+  min-height: 54px;
+  max-height: 240px;
+  object-fit: cover;
+  display: block;
+  border-radius: 8px;
+  transition: transform 0.25s ease;
 }
 
-.insert-float-action {
+.detail-card-placeholder {
+  height: 90px;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 6px;
-  color: #ffffff;
-  font-size: 12px;
-  font-weight: 600;
+  justify-content: center;
 }
 
-.insert-circle-btn {
-  width: 34px;
-  height: 34px;
+.detail-card-preview-btn {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
-  background: #ff5000;
+  border: none;
+  background: rgba(15, 23, 42, 0.55);
   color: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 18px;
-  box-shadow: 0 2px 8px rgba(255, 80, 0, 0.4);
-  transition: transform 0.2s;
-}
-
-.card-box:hover .insert-circle-btn {
-  transform: scale(1.08);
-}
-
-.insert-tip {
   font-size: 12px;
-}
+  cursor: pointer;
+  opacity: 0;
+  transition: all 0.15s ease;
 
-/* 卡片底部栏（红框4版权信息条） */
-.card-bottom-info {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 10px;
-  background: #ffffff;
-  border-top: 1px solid #f8fafc;
+  &:hover {
+    background: rgba(15, 23, 42, 0.8);
+    transform: scale(1.08);
+  }
 }
 
-.format-badge-box {
+/* 加载中与底部状态 */
+.gallery-loading-box {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 6px;
-  min-width: 0;
-  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;
+  justify-content: center;
+  padding: 60px 0;
+  gap: 10px;
 }
 
-.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;
+.loading-ring-spinner {
+  width: 24px;
+  height: 24px;
+  border: 2.5px solid #e2e8f0;
+  border-top-color: #1e6fff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
 }
 
-.format-title-hint {
-  font-size: 11px;
+.loading-tip-text {
+  font-size: 12.5px;
   color: #64748b;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 140px;
-}
-
-.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;
-}
-
-.more-options-dot-btn:hover {
-  color: #334155;
-  background: #f1f5f9;
 }
 
-/* 瀑布流底部加载更多区域 */
 .waterfall-footer-status {
-  padding: 16px 0 24px;
+  padding: 14px 0 8px;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
 }
 
 .loading-more-row {
   display: flex;
   align-items: center;
-  gap: 8px;
-  font-size: 13px;
+  gap: 6px;
+  font-size: 12px;
   color: #64748b;
 }
 
+.btn-spinner-ring {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 2px solid rgba(30, 111, 255, 0.2);
+  border-top-color: #1e6fff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
 .load-failed-row {
   display: flex;
   align-items: center;
-  gap: 10px;
-  background: #fef2f2;
-  border: 1px solid #fecaca;
-  padding: 6px 14px;
-  border-radius: 20px;
-}
-
-.load-error-text {
+  gap: 8px;
   font-size: 12px;
-  color: #b91c1c;
+  color: #ef4444;
 }
 
 .retry-load-btn {
-  border: none;
-  background: #dc2626;
-  color: #ffffff;
-  padding: 3px 10px;
-  border-radius: 12px;
+  border: 1px solid #fecaca;
+  background: #fef2f2;
+  color: #dc2626;
+  padding: 2px 8px;
+  border-radius: 4px;
   font-size: 11.5px;
   cursor: pointer;
-  font-weight: 500;
-  transition: all 0.2s;
-}
-
-.retry-load-btn:hover {
-  background: #b91c1c;
-}
-
-.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;
+  width: 100%;
+  height: 34px;
+  border-radius: 6px;
   border: 1px solid #e2e8f0;
-  border-radius: 20px;
+  background: #f8fafc;
   color: #334155;
   font-size: 12.5px;
   font-weight: 500;
   cursor: pointer;
-  transition: all 0.2s ease;
-}
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.18s ease;
 
-.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);
-}
+  &:hover {
+    background: #eff6ff;
+    border-color: #bfdbfe;
+    color: #1e6fff;
+  }
 
-.load-more-count {
-  font-size: 11px;
-  opacity: 0.8;
+  &:active {
+    background: #dbeafe;
+  }
 }
 
 .all-loaded-divider {
-  font-size: 12px;
+  font-size: 11.5px;
   color: #94a3b8;
-  letter-spacing: 0.5px;
 }
 
-/* 空状态 */
 .gallery-empty-state {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 60px 16px;
-  gap: 10px;
+  gap: 8px;
   text-align: center;
 }
 
 .empty-title {
-  font-size: 13.5px;
+  font-size: 12.5px;
   color: #64748b;
   margin: 0;
-  font-weight: 500;
-}
-
-.empty-subtitle {
-  font-size: 12px;
-  color: #94a3b8;
 }
 
 @keyframes spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
-
-/* ==========================================================================
-   重点优化：当在右侧边栏（宽度 <= 520px / is-narrow-view）打开时的响应式完美适配
-   ========================================================================== */
-.template-gallery-container.is-narrow-view {
-  padding: 10px 12px 14px;
-  gap: 10px;
-
-  /* 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>
 
 <style>
-/* ==========================================================================
-   全屏大图预览 Modal（脱离一切容器，z-index 最高层级）
-   ========================================================================== */
+/* 全屏大图预览 Modal */
 .custom-fullscreen-preview-modal {
   position: fixed !important;
   inset: 0 !important;
@@ -1872,7 +1746,7 @@ watch([() => materialApiUrl?.value, () => materialPageApiUrl?.value, () => mater
 }
 
 .preview-format-pill {
-  background: #ff5000;
+  background: #1e6fff;
   color: #ffffff;
   font-size: 11px;
   font-weight: 700;
@@ -1983,24 +1857,23 @@ watch([() => materialApiUrl?.value, () => materialPageApiUrl?.value, () => mater
   align-items: center;
   gap: 6px;
   padding: 8px 20px;
-  background: #ff5000;
+  background: #1e6fff;
   color: #ffffff;
   border: none;
   border-radius: 20px;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
-  box-shadow: 0 4px 14px rgba(255, 80, 0, 0.4);
+  box-shadow: 0 4px 14px rgba(30, 111, 255, 0.4);
   transition: all 0.2s;
 }
 
 .preview-quick-insert-btn:hover {
-  background: #ff6a00;
+  background: #1557d0;
   transform: translateY(-2px);
-  box-shadow: 0 6px 18px rgba(255, 80, 0, 0.5);
+  box-shadow: 0 6px 18px rgba(30, 111, 255, 0.5);
 }
 
-/* 过渡动效 */
 .preview-backdrop-fade-enter-active,
 .preview-backdrop-fade-leave-active {
   transition: opacity 0.25s ease;