jvs-ppt-ui 0.0.17 → 0.0.19

package/src/components/material/MyAssetsPanel.vue

@@ -0,0 +1,1524 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import {
+  Search,
+  CircleCloseFilled,
+  View,
+  VideoPlay
+} from '@element-plus/icons-vue'
+import { useSlides } from '../../composables/useSlides'
+import { useDamAuth } from './useDamAuth'
+import type { MaterialItem } from '../TemplateGallery.vue'
+
+export interface DamProjectItem {
+  id: string
+  name: string
+  type: 'PERSONAL' | 'TEAM' | string
+  description?: string
+}
+
+export interface DamFolderNode {
+  id: string
+  projectId: string
+  parentId?: string
+  name: string
+  defaultFlag?: boolean
+  children?: DamFolderNode[]
+}
+
+const emit = defineEmits<{
+  (e: 'select', item: MaterialItem): void
+  (e: 'preview', item: MaterialItem, list: MaterialItem[], event?: Event): void
+  (e: 'use-as-ref', item: MaterialItem): void
+}>()
+
+const { notify } = useSlides()
+const { damFetchJson, isDamLoggedIn } = useDamAuth()
+
+// 搜索与过滤状态
+const searchKeyword = ref('')
+const mediaTypeFilter = ref<'ALL' | 'IMAGE' | 'VIDEO'>('ALL')
+const activeSourceSubTab = ref<'recent' | 'ai' | 'uploads'>('recent')
+
+// 项目与文件夹树状态
+const projects = ref<DamProjectItem[]>([])
+const folderTrees = ref<Record<string, DamFolderNode[]>>({})
+const expandedProjectIds = ref<Record<string, boolean>>({})
+const selectedProjectId = ref<string>('')
+const selectedFolderId = ref<string>('')
+const selectedTreeLabel = ref<string>('全部项目资产')
+const treePopoverVisible = ref(false)
+const treeTriggerRef = ref<HTMLElement | null>(null)
+
+// 列表与分页状态
+const loading = ref(false)
+const loadingMore = ref(false)
+const isUploading = ref(false)
+const currentPage = ref(1)
+const pageSize = 20
+const reachEnd = ref(false)
+const assetList = ref<MaterialItem[]>([])
+const fileInputRef = ref<HTMLInputElement | null>(null)
+
+const PROJECT_COLORS = ['#3b82f6', '#10b981', '#8b5cf6', '#f59e0b', '#ec4899']
+
+function getProjectColor(proj: DamProjectItem, idx: number): string {
+  if (proj.type === 'PERSONAL') return '#3b82f6'
+  return PROJECT_COLORS[idx % PROJECT_COLORS.length] || '#10b981'
+}
+
+function getProjectDisplayName(proj: DamProjectItem): string {
+  if (!proj) return '项目'
+  if (proj.name === 'Personal project' || proj.type === 'PERSONAL') {
+    return proj.name === 'Personal project' ? '个人项目' : proj.name
+  }
+  return proj.name
+}
+
+/**
+ * 组装多级文件夹树结构
+ */
+function buildFolderTree(rawList: any[]): DamFolderNode[] {
+  if (!Array.isArray(rawList) || rawList.length === 0) return []
+  const hasNested = rawList.some(item => Array.isArray(item.children) && item.children.length > 0)
+  if (hasNested) return rawList
+
+  const nodeMap = new Map<string, DamFolderNode>()
+  const roots: DamFolderNode[] = []
+
+  rawList.forEach(item => {
+    nodeMap.set(String(item.id), {
+      id: String(item.id),
+      projectId: String(item.projectId || ''),
+      parentId: item.parentId ? String(item.parentId) : '0',
+      name: item.name || '文件夹',
+      defaultFlag: item.defaultFlag,
+      children: []
+    })
+  })
+
+  nodeMap.forEach(node => {
+    const pid = node.parentId
+    if (pid && pid !== '0' && nodeMap.has(pid)) {
+      nodeMap.get(pid)!.children!.push(node)
+    } else {
+      roots.push(node)
+    }
+  })
+
+  return roots
+}
+
+/**
+ * 拉取当前用户的项目列表及默认展开项目的文件夹树
+ */
+async function fetchProjectsAndFolders() {
+  if (!isDamLoggedIn.value) return
+  try {
+    const res = await damFetchJson('/project/my')
+    let rawProjects: any[] = []
+    if (Array.isArray(res)) rawProjects = res
+    else if (Array.isArray(res?.data?.data)) rawProjects = res.data.data
+    else if (Array.isArray(res?.data)) rawProjects = res.data
+
+    if (rawProjects.length === 0) {
+      // 尝试初始化并获取个人项目
+      const pRes = await damFetchJson('/project/personal')
+      const pData = pRes?.data?.data || pRes?.data || pRes
+      if (pData && pData.id) {
+        rawProjects = [pData]
+      }
+    }
+
+    projects.value = rawProjects.map(p => ({
+      id: String(p.id),
+      name: p.name || '未命名项目',
+      type: p.type || 'PERSONAL',
+      description: p.description
+    }))
+
+    // 默认预加载首个项目的文件夹树
+    const firstProj = projects.value[0]
+    if (firstProj) {
+      expandedProjectIds.value[firstProj.id] = true
+      await fetchFolderTreeForProject(firstProj.id)
+    }
+  } catch (err) {
+    console.warn('[MyAssets] 获取项目列表失败:', err)
+  }
+}
+
+async function fetchFolderTreeForProject(projectId: string) {
+  if (!projectId) return
+  try {
+    const res = await damFetchJson('/folder/tree', {
+      params: { projectId }
+    })
+    let rawList: any[] = []
+    if (Array.isArray(res)) rawList = res
+    else if (Array.isArray(res?.data?.data)) rawList = res.data.data
+    else if (Array.isArray(res?.data)) rawList = res.data
+
+    folderTrees.value = {
+      ...folderTrees.value,
+      [projectId]: buildFolderTree(rawList)
+    }
+  } catch (err) {
+    console.warn('[MyAssets] 获取文件夹树失败:', err)
+  }
+}
+
+async function toggleProjectExpand(projectId: string, e: Event) {
+  e.stopPropagation()
+  const nextState = !expandedProjectIds.value[projectId]
+  expandedProjectIds.value[projectId] = nextState
+  if (nextState && !folderTrees.value[projectId]) {
+    await fetchFolderTreeForProject(projectId)
+  }
+}
+
+function selectAllAssets() {
+  selectedProjectId.value = ''
+  selectedFolderId.value = ''
+  selectedTreeLabel.value = '全部项目资产'
+  treePopoverVisible.value = false
+  reloadAssets()
+}
+
+function selectProjectNode(proj: DamProjectItem) {
+  selectedProjectId.value = proj.id
+  selectedFolderId.value = ''
+  selectedTreeLabel.value = getProjectDisplayName(proj)
+  treePopoverVisible.value = false
+  if (!folderTrees.value[proj.id]) {
+    fetchFolderTreeForProject(proj.id)
+  }
+  reloadAssets()
+}
+
+function selectFolderNode(proj: DamProjectItem, folder: DamFolderNode) {
+  selectedProjectId.value = proj.id
+  selectedFolderId.value = folder.id
+  selectedTreeLabel.value = `${getProjectDisplayName(proj)} / ${folder.name}`
+  treePopoverVisible.value = false
+  reloadAssets()
+}
+
+function isVideoAsset(raw: any): boolean {
+  const assetType = String(raw.assetType || raw.mediaType || raw.type || '').toUpperCase()
+  if (assetType === 'VIDEO') return true
+  const u = String(raw.fileUrl || raw.url || raw.ossUrl || raw.imageUrl || '').split('?')[0].toLowerCase()
+  return u.endsWith('.mp4') || u.endsWith('.webm') || u.endsWith('.mov') || u.endsWith('.m4v')
+}
+
+/**
+ * 将后端 Asset / RecentAssetVO / AiGenerationRecord / UploadFile 统一映射为 MaterialItem
+ */
+function normalizeDamAsset(raw: any): MaterialItem | null {
+  if (!raw) return null
+  // semantic/search 接口返回的条目可能包裹在 asset 属性中
+  const entity = raw.asset && typeof raw.asset === 'object' ? { ...raw.asset, score: raw.score } : raw
+
+  const url =
+    entity.fileUrl ||
+    entity.imageUrl ||
+    entity.ossUrl ||
+    entity.fileLink ||
+    entity.url ||
+    entity.previewUrl ||
+    entity.sourceUrl ||
+    ''
+  if (!url) return null
+
+  const isVid = isVideoAsset(entity)
+  let meta: any = {}
+  if (entity.metaDataJson) {
+    try {
+      meta = typeof entity.metaDataJson === 'string' ? JSON.parse(entity.metaDataJson) : entity.metaDataJson
+    } catch {
+      meta = {}
+    }
+  }
+
+  const rawTitle =
+    entity.name ||
+    entity.prompt ||
+    meta.prompt ||
+    entity.fileName ||
+    entity.fileOriginalName ||
+    entity.portrait?.summary ||
+    (isVid ? '视频资产' : '图片资产')
+
+  const cleanTitle = String(rawTitle).replace(/\.[a-zA-Z0-9]+$/, '').replace(/_\d{10,14}$/, '')
+  const sourceType = String(entity.sourceType || '').toUpperCase()
+  let badgeLabel = '资产'
+  if (isVid) badgeLabel = '视频'
+  else if (sourceType === 'GENERATE' || activeSourceSubTab.value === 'ai' || entity.recordId || entity.sessionId) {
+    badgeLabel = 'AI 生成'
+  } else if (sourceType === 'UPLOAD' || activeSourceSubTab.value === 'uploads') {
+    badgeLabel = '已上传'
+  }
+
+  const w = Number(meta.width || entity.width || entity.originalWidth || 0)
+  const h = Number(meta.height || entity.height || entity.originalHeight || 0)
+
+  return {
+    id: String(entity.id || entity.fileId || entity.recordId || `dam-${Math.random().toString(36).slice(2, 9)}`),
+    title: cleanTitle || '我的素材',
+    type: isVid ? 'video' : 'image',
+    assetType: isVid ? 'VIDEO' : 'IMAGE',
+    sourceType: sourceType || (activeSourceSubTab.value === 'ai' ? 'GENERATE' : 'UPLOAD'),
+    badgeLabel,
+    url,
+    previewUrl: entity.previewUrl || url,
+    sourceUrl: url,
+    originalWidth: w > 0 ? w : undefined,
+    originalHeight: h > 0 ? h : undefined,
+    projectId: entity.projectId,
+    folderId: entity.folderId,
+    model: entity.model || meta.model || '',
+    createTime: entity.createTime || entity.uploadTime || ''
+  }
+}
+
+function extractRecordsFromResponse(res: any): any[] {
+  if (!res) return []
+  if (Array.isArray(res)) return res
+  if (Array.isArray(res?.data?.records)) return res.data.records
+  if (Array.isArray(res?.records)) return res.records
+  if (Array.isArray(res?.data?.data?.records)) return res.data.data.records
+  if (Array.isArray(res?.data?.data)) return res.data.data
+  if (Array.isArray(res?.data?.list)) return res.data.list
+  if (Array.isArray(res?.data)) return res.data
+  return []
+}
+
+/**
+ * 加载我的素材列表
+ */
+async function fetchMyAssets(page = 1, append = false) {
+  if (!isDamLoggedIn.value) {
+    assetList.value = []
+    reachEnd.value = true
+    return
+  }
+
+  try {
+    loading.value = !append
+    loadingMore.value = append
+
+    const kw = searchKeyword.value.trim()
+    const assetTypeParam = mediaTypeFilter.value === 'ALL' ? undefined : mediaTypeFilter.value
+    let rawItems: any[] = []
+
+    if (activeSourceSubTab.value === 'ai') {
+      // 1. AI 创作历史记录 (/jvs-dam/ai/record/page)
+      const res = await damFetchJson('/ai/record/page', {
+        params: {
+          current: page,
+          size: pageSize,
+          mediaType: assetTypeParam || 'IMAGE',
+          operationType: 'GENERATE'
+        }
+      })
+      rawItems = extractRecordsFromResponse(res)
+    } else if (activeSourceSubTab.value === 'uploads') {
+      // 2. 本地已上传文件列表 (/jvs-dam/upload/file/list)
+      const res = await damFetchJson('/upload/file/list', {
+        params: {
+          current: page,
+          size: pageSize,
+          projectId: selectedProjectId.value || undefined,
+          folderId: selectedFolderId.value || undefined,
+          name: kw || undefined
+        }
+      })
+      rawItems = extractRecordsFromResponse(res)
+    } else {
+      // 3. 最近资产 / 项目文件夹筛选 / 语义检索
+      if (kw && !selectedFolderId.value) {
+        // 有搜索词且未限定具体子文件夹时，优先走语义检索接口（后端自带关键词降级）
+        try {
+          const semRes = await damFetchJson('/asset/semantic/search', {
+            params: {
+              query: kw,
+              assetType: assetTypeParam,
+              projectId: selectedProjectId.value || undefined,
+              current: page,
+              size: pageSize
+            }
+          })
+          rawItems = extractRecordsFromResponse(semRes)
+        } catch {
+          // 降级到 recent 接口
+          const recRes = await damFetchJson('/asset/recent', {
+            params: {
+              projectId: selectedProjectId.value || undefined,
+              folderId: selectedFolderId.value || undefined,
+              name: kw,
+              assetType: assetTypeParam,
+              current: page,
+              size: pageSize
+            }
+          })
+          rawItems = extractRecordsFromResponse(recRes)
+        }
+      } else if (selectedProjectId.value && selectedFolderId.value) {
+        // 选中了具体文件夹时，走 /asset/page
+        const pageRes = await damFetchJson('/asset/page', {
+          params: {
+            projectId: selectedProjectId.value,
+            folderId: selectedFolderId.value,
+            name: kw || undefined,
+            current: page,
+            size: pageSize
+          }
+        })
+        rawItems = extractRecordsFromResponse(pageRes)
+      } else {
+        // 默认浏览最近资产（支持全部项目或单个 projectId）
+        const recRes = await damFetchJson('/asset/recent', {
+          params: {
+            projectId: selectedProjectId.value || undefined,
+            folderId: selectedFolderId.value || undefined,
+            name: kw || undefined,
+            assetType: assetTypeParam,
+            current: page,
+            size: pageSize
+          }
+        })
+        rawItems = extractRecordsFromResponse(recRes)
+      }
+    }
+
+    const normalized = rawItems
+      .map(normalizeDamAsset)
+      .filter((item): item is MaterialItem => Boolean(item))
+      .filter(item => {
+        if (mediaTypeFilter.value === 'IMAGE') return item.type !== 'video'
+        if (mediaTypeFilter.value === 'VIDEO') return item.type === 'video'
+        if (kw && activeSourceSubTab.value === 'ai') {
+          return item.title.toLowerCase().includes(kw.toLowerCase())
+        }
+        return true
+      })
+
+    if (rawItems.length < pageSize) {
+      reachEnd.value = true
+    } else {
+      reachEnd.value = false
+    }
+
+    if (append) {
+      const existingIds = new Set(assetList.value.map(i => i.id))
+      const uniqueNew = normalized.filter(i => !existingIds.has(i.id))
+      assetList.value = [...assetList.value, ...uniqueNew]
+    } else {
+      assetList.value = normalized
+    }
+    currentPage.value = page
+  } catch (err: any) {
+    console.warn('[MyAssets] 加载个人资产异常:', err)
+    if (!append) {
+      assetList.value = []
+    }
+    reachEnd.value = true
+  } finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+
+function reloadAssets() {
+  currentPage.value = 1
+  reachEnd.value = false
+  fetchMyAssets(1, false)
+}
+
+function handleSearchEnter() {
+  reloadAssets()
+}
+
+function clearSearch() {
+  searchKeyword.value = ''
+  reloadAssets()
+}
+
+function switchMediaType(type: 'ALL' | 'IMAGE' | 'VIDEO') {
+  if (mediaTypeFilter.value === type) return
+  mediaTypeFilter.value = type
+  reloadAssets()
+}
+
+function switchSourceSubTab(sub: 'recent' | 'ai' | 'uploads') {
+  if (activeSourceSubTab.value === sub) return
+  activeSourceSubTab.value = sub
+  reloadAssets()
+}
+
+function loadMoreAssets() {
+  if (loading.value || loadingMore.value || reachEnd.value) return
+  fetchMyAssets(currentPage.value + 1, true)
+}
+
+// 双列贪心高度平衡瀑布流
+const waterfallColumns = computed<[MaterialItem[], MaterialItem[]]>(() => {
+  const left: MaterialItem[] = []
+  const right: MaterialItem[] = []
+  let leftH = 0
+  let rightH = 0
+
+  assetList.value.forEach((item, idx) => {
+    let ratio = 0.85
+    const w = Number(item.originalWidth || 0)
+    const h = Number(item.originalHeight || 0)
+    if (w > 0 && h > 0) {
+      ratio = Math.max(0.55, Math.min(1.6, h / w))
+    } else if (item.type === 'video') {
+      ratio = 0.65
+    } else if (idx % 3 === 1) {
+      ratio = 1.1
+    }
+
+    if (leftH <= rightH) {
+      left.push(item)
+      leftH += ratio
+    } else {
+      right.push(item)
+      rightH += ratio
+    }
+  })
+
+  return [left, right]
+})
+
+/**
+ * 触发本地文件选择上传
+ */
+function triggerUploadClick() {
+  fileInputRef.value?.click()
+}
+
+function extractUploadedUrl(res: any): string {
+  if (!res) return ''
+  const body = res.data !== undefined ? res.data : res
+  if (typeof body === 'string') return body
+  const inner = body?.data !== undefined ? body.data : body
+  if (typeof inner === 'string') return inner
+  return (
+    inner?.ossUrl ||
+    inner?.fileLink ||
+    inner?.fileUrl ||
+    inner?.url ||
+    inner?.link ||
+    body?.ossUrl ||
+    body?.fileLink ||
+    body?.fileUrl ||
+    body?.url ||
+    ''
+  )
+}
+
+async function handleFileUploadChange(e: Event) {
+  const input = e.target as HTMLInputElement
+  const files = input.files ? Array.from(input.files) : []
+  if (files.length === 0) return
+
+  isUploading.value = true
+  try {
+    // 若用户已在下拉树中选择了具体项目则传入，否则交由后端 /jvs-dam/upload/file 自动归入当前用户的个人项目
+    const personal = projects.value.find(p => p.type === 'PERSONAL') || projects.value[0]
+    const targetProjId = selectedProjectId.value || personal?.id || ''
+
+    let uploadedCount = 0
+    for (const file of files) {
+      const isVid = file.type.startsWith('video/')
+      const formData = new FormData()
+      formData.append('file', file)
+      formData.append('path', '/dam/media/')
+      formData.append('fileName', file.name)
+      formData.append('name', file.name)
+      formData.append('id', String(Date.now()))
+      if (targetProjId) formData.append('projectId', targetProjId)
+      if (selectedFolderId.value) formData.append('folderId', selectedFolderId.value)
+      formData.append('assetType', isVid ? 'VIDEO' : 'IMAGE')
+
+      const uploadRes = await damFetchJson('/upload/file', {
+        method: 'POST',
+        body: formData
+      })
+      const fileUrl = extractUploadedUrl(uploadRes)
+      if (fileUrl) {
+        uploadedCount++
+      }
+    }
+
+    if (uploadedCount > 0) {
+      notify(`已成功上传 ${uploadedCount} 个素材到我的资产库`)
+      reloadAssets()
+    } else {
+      notify('上传未返回有效文件地址')
+    }
+  } catch (err: any) {
+    notify(`上传素材失败: ${err.message || '网络异常'}`)
+  } finally {
+    isUploading.value = false
+    input.value = ''
+  }
+}
+
+function handleOutsideClick(e: MouseEvent) {
+  if (!treePopoverVisible.value) return
+  const target = e.target as Node
+  if (treeTriggerRef.value && !treeTriggerRef.value.contains(target)) {
+    treePopoverVisible.value = false
+  }
+}
+
+onMounted(() => {
+  fetchProjectsAndFolders()
+  fetchMyAssets(1, false)
+  window.addEventListener('click', handleOutsideClick)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('click', handleOutsideClick)
+})
+
+watch(isDamLoggedIn, (logged) => {
+  if (logged) {
+    fetchProjectsAndFolders()
+    fetchMyAssets(1, false)
+  } else {
+    assetList.value = []
+  }
+})
+
+defineExpose({
+  reloadAssets
+})
+</script>
+
+<template>
+  <div class="my-assets-panel">
+    <!-- 隐藏的文件上传控件 -->
+    <input
+      ref="fileInputRef"
+      type="file"
+      multiple
+      accept="image/*,video/*"
+      style="display: none"
+      @change="handleFileUploadChange"
+    />
+
+    <!-- 1. 顶部搜索框 + 本地上传按钮 -->
+    <div class="mine-top-search-row">
+      <div class="mine-search-box">
+        <el-icon class="mine-search-icon" @click="handleSearchEnter">
+          <Search />
+        </el-icon>
+        <input
+          v-model="searchKeyword"
+          type="text"
+          placeholder="语义搜索我的资产/描述词..."
+          class="mine-search-input"
+          @keyup.enter="handleSearchEnter"
+        />
+        <el-icon
+          v-if="searchKeyword"
+          class="mine-search-clear"
+          @click="clearSearch"
+        >
+          <CircleCloseFilled />
+        </el-icon>
+      </div>
+
+      <button
+        type="button"
+        class="mine-upload-btn"
+        :disabled="isUploading"
+        title="上传本地图片或视频至我的资产库"
+        @click="triggerUploadClick"
+      >
+        <span v-if="isUploading" class="mini-spin-ring"></span>
+        <span v-else>+</span>
+        <span>{{ isUploading ? '上传中' : '上传' }}</span>
+      </button>
+    </div>
+
+    <!-- 2. 项目/文件夹树级联选择器 + 媒介类型过滤胶囊 -->
+    <div class="mine-filter-bar">
+      <div ref="treeTriggerRef" class="project-tree-selector-wrap">
+        <button
+          type="button"
+          class="project-tree-trigger"
+          :class="{ active: treePopoverVisible || selectedProjectId }"
+          @click.stop="treePopoverVisible = !treePopoverVisible"
+        >
+          <span class="proj-dot" :class="{ 'is-filtered': !!selectedProjectId }"></span>
+          <span class="proj-label" :title="selectedTreeLabel">{{ selectedTreeLabel }}</span>
+          <svg class="chevron-svg" viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.2">
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+        </button>
+
+        <!-- 项目 -> 多级文件夹树弹出面板 -->
+        <transition name="pop-fade">
+          <div v-if="treePopoverVisible" class="project-tree-popover" @click.stop>
+            <div class="popover-section-header">选择项目或子文件夹</div>
+
+            <div
+              class="tree-node-row all-node"
+              :class="{ active: !selectedProjectId && !selectedFolderId }"
+              @click="selectAllAssets"
+            >
+              <span class="node-icon">🌐</span>
+              <span class="node-name">全部可访问资产</span>
+            </div>
+
+            <div class="tree-projects-scroll">
+              <div
+                v-for="(proj, pIdx) in projects"
+                :key="proj.id"
+                class="tree-project-block"
+              >
+                <div
+                  class="tree-node-row project-node"
+                  :class="{ active: selectedProjectId === proj.id && !selectedFolderId }"
+                  @click="selectProjectNode(proj)"
+                >
+                  <button
+                    type="button"
+                    class="tree-expand-btn"
+                    :class="{ expanded: expandedProjectIds[proj.id] }"
+                    @click="toggleProjectExpand(proj.id, $event)"
+                  >
+                    <svg viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2.5">
+                      <polyline points="9 18 15 12 9 6" />
+                    </svg>
+                  </button>
+                  <span class="project-color-sq" :style="{ backgroundColor: getProjectColor(proj, pIdx) }"></span>
+                  <span class="node-name">{{ getProjectDisplayName(proj) }}</span>
+                  <span v-if="proj.type === 'TEAM'" class="team-tag">团队</span>
+                </div>
+
+                <!-- 展开项目下的文件夹列表 -->
+                <div v-if="expandedProjectIds[proj.id]" class="tree-folders-children">
+                  <template v-if="folderTrees[proj.id] && folderTrees[proj.id].length > 0">
+                    <template v-for="folder in folderTrees[proj.id]" :key="folder.id">
+                      <div
+                        class="tree-node-row folder-node"
+                        :class="{ active: selectedFolderId === folder.id }"
+                        @click="selectFolderNode(proj, folder)"
+                      >
+                        <span class="folder-icon">📁</span>
+                        <span class="node-name">{{ folder.name }}</span>
+                      </div>
+                      <!-- 二级子文件夹 -->
+                      <template v-if="folder.children && folder.children.length > 0">
+                        <div
+                          v-for="sub in folder.children"
+                          :key="sub.id"
+                          class="tree-node-row folder-node level-2"
+                          :class="{ active: selectedFolderId === sub.id }"
+                          @click="selectFolderNode(proj, sub)"
+                        >
+                          <span class="folder-icon">📁</span>
+                          <span class="node-name">{{ sub.name }}</span>
+                        </div>
+                      </template>
+                    </template>
+                  </template>
+                  <div v-else class="tree-empty-folder-tip">默认目录</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </transition>
+      </div>
+
+      <!-- 媒介类型胶囊 (全部 / 图片 / 视频) -->
+      <div class="media-type-pills">
+        <button
+          type="button"
+          class="media-pill"
+          :class="{ active: mediaTypeFilter === 'ALL' }"
+          @click="switchMediaType('ALL')"
+        >
+          全部
+        </button>
+        <button
+          type="button"
+          class="media-pill"
+          :class="{ active: mediaTypeFilter === 'IMAGE' }"
+          @click="switchMediaType('IMAGE')"
+        >
+          图片
+        </button>
+        <button
+          type="button"
+          class="media-pill"
+          :class="{ active: mediaTypeFilter === 'VIDEO' }"
+          @click="switchMediaType('VIDEO')"
+        >
+          视频
+        </button>
+      </div>
+    </div>
+
+    <!-- 3. 二级来源切换栏 (最近资产 / AI 创作记录 / 已上传) -->
+    <div class="mine-sub-tabs">
+      <button
+        type="button"
+        class="mine-sub-tab"
+        :class="{ active: activeSourceSubTab === 'recent' }"
+        @click="switchSourceSubTab('recent')"
+      >
+        最近资产
+      </button>
+      <button
+        type="button"
+        class="mine-sub-tab"
+        :class="{ active: activeSourceSubTab === 'ai' }"
+        @click="switchSourceSubTab('ai')"
+      >
+        AI 创作记录
+      </button>
+      <button
+        type="button"
+        class="mine-sub-tab"
+        :class="{ active: activeSourceSubTab === 'uploads' }"
+        @click="switchSourceSubTab('uploads')"
+      >
+        已上传
+      </button>
+    </div>
+
+    <!-- 4. 资产瀑布流列表区 -->
+    <div v-if="loading && assetList.length === 0" class="mine-loading-box">
+      <div class="loading-ring-spinner"></div>
+      <span class="loading-tip-text">正在加载我的资产...</span>
+    </div>
+
+    <div v-else class="mine-waterfall-scroll">
+      <div v-if="assetList.length > 0" class="mine-masonry-wrapper">
+        <div class="mine-masonry-columns">
+          <div
+            v-for="(colItems, colIdx) in waterfallColumns"
+            :key="colIdx"
+            class="mine-masonry-col"
+          >
+            <div
+              v-for="item in colItems"
+              :key="item.id"
+              class="mine-asset-card"
+              @click="emit('select', item)"
+            >
+              <video
+                v-if="item.type === 'video'"
+                :src="item.url"
+                muted
+                preload="metadata"
+                playsinline
+                class="mine-card-media"
+                @mouseenter="($event.target as HTMLVideoElement)?.play?.()"
+                @mouseleave="($event.target as HTMLVideoElement)?.pause?.()"
+              />
+              <img
+                v-else
+                :src="item.previewUrl || item.url"
+                :alt="item.title"
+                loading="lazy"
+                class="mine-card-media"
+              />
+
+              <!-- 左上角来源徽标 -->
+              <span
+                class="mine-card-badge"
+                :class="{
+                  'is-ai': item.badgeLabel === 'AI 生成',
+                  'is-video': item.type === 'video'
+                }"
+              >
+                {{ item.badgeLabel || '资产' }}
+              </span>
+
+              <!-- 视频播放角标 -->
+              <span v-if="item.type === 'video'" class="video-play-badge">
+                <el-icon><VideoPlay /></el-icon>
+              </span>
+
+              <!-- 右上角悬浮按钮组：设为参考图 + 大图预览 -->
+              <div class="mine-card-actions">
+                <button
+                  v-if="item.type !== 'video'"
+                  type="button"
+                  class="card-act-btn ref-btn"
+                  title="作为 AI 生图参考素材"
+                  @click.stop="emit('use-as-ref', item)"
+                >
+                  <span>@参考</span>
+                </button>
+                <button
+                  type="button"
+                  class="card-act-btn icon-btn"
+                  title="大图预览"
+                  @click.stop="emit('preview', item, assetList, $event)"
+                >
+                  <el-icon><View /></el-icon>
+                </button>
+              </div>
+
+              <!-- 底部标题渐隐层 -->
+              <div class="mine-card-bottom">
+                <span class="mine-card-title" :title="item.title">{{ item.title }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 底部加载更多 -->
+        <div class="mine-footer-status">
+          <div v-if="loadingMore" class="loading-more-row">
+            <span class="mini-spin-ring blue"></span>
+            <span>正在加载更多...</span>
+          </div>
+          <button
+            v-else-if="!reachEnd"
+            type="button"
+            class="load-more-action-btn"
+            @click="loadMoreAssets"
+          >
+            加载更多
+          </button>
+          <div v-else class="all-loaded-divider">
+            <span>— 已展示全部资产 —</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-else class="mine-empty-state">
+        <svg viewBox="0 0 24 24" width="38" height="38" fill="none" stroke="#cbd5e1" stroke-width="1.3">
+          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+        </svg>
+        <p class="empty-title">
+          {{ searchKeyword ? `未找到与 "${searchKeyword}" 匹配的资产` : '当前目录下暂无资产' }}
+        </p>
+        <button type="button" class="empty-upload-cta" @click="triggerUploadClick">
+          + 上传本地素材
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.my-assets-panel {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.mine-top-search-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 14px 6px;
+  flex-shrink: 0;
+}
+
+.mine-search-box {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  height: 34px;
+  background: #f5f6f7;
+  border: 1px solid #e2e8f0;
+  border-radius: 7px;
+  padding: 0 9px;
+  gap: 6px;
+  transition: all 0.2s ease;
+
+  &:focus-within {
+    background: #ffffff;
+    border-color: #1e6fff;
+  }
+}
+
+.mine-search-icon {
+  font-size: 14px;
+  color: #64748b;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.mine-search-input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 12.5px;
+  color: #1e293b;
+
+  &::placeholder {
+    color: #94a3b8;
+  }
+}
+
+.mine-search-clear {
+  font-size: 13px;
+  color: #94a3b8;
+  cursor: pointer;
+  flex-shrink: 0;
+
+  &:hover {
+    color: #475569;
+  }
+}
+
+.mine-upload-btn {
+  height: 34px;
+  padding: 0 10px;
+  border-radius: 7px;
+  border: none;
+  background: #0f172a;
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 0.15s ease;
+
+  &:hover:not(:disabled) {
+    background: #1e293b;
+  }
+
+  &:disabled {
+    opacity: 0.65;
+    cursor: not-allowed;
+  }
+}
+
+.mine-filter-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  padding: 4px 14px 6px;
+  flex-shrink: 0;
+}
+
+.project-tree-selector-wrap {
+  position: relative;
+  min-width: 0;
+  flex: 1;
+}
+
+.project-tree-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  max-width: 100%;
+  height: 26px;
+  padding: 0 8px;
+  border-radius: 6px;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+  color: #334155;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover,
+  &.active {
+    border-color: #93c5fd;
+    background: #eff6ff;
+    color: #1d4ed8;
+  }
+
+  .proj-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 2px;
+    background: #3b82f6;
+    flex-shrink: 0;
+  }
+
+  .proj-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 500;
+  }
+
+  .chevron-svg {
+    flex-shrink: 0;
+    color: #64748b;
+  }
+}
+
+.project-tree-popover {
+  position: absolute;
+  top: 30px;
+  left: 0;
+  width: 244px;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
+  padding: 6px;
+  z-index: 40;
+}
+
+.popover-section-header {
+  font-size: 11px;
+  font-weight: 600;
+  color: #94a3b8;
+  padding: 4px 8px;
+}
+
+.tree-projects-scroll {
+  max-height: 220px;
+  overflow-y: auto;
+  margin-top: 2px;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 2px;
+  }
+}
+
+.tree-project-block {
+  border-top: 1px solid #f1f5f9;
+  padding-top: 3px;
+  margin-top: 3px;
+}
+
+.tree-node-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 8px;
+  border-radius: 6px;
+  font-size: 12px;
+  color: #334155;
+  cursor: pointer;
+  transition: background 0.12s ease;
+
+  &:hover {
+    background: #f1f5f9;
+  }
+
+  &.active {
+    background: #eff6ff;
+    color: #1e6fff;
+    font-weight: 600;
+  }
+
+  .node-name {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.tree-expand-btn {
+  width: 16px;
+  height: 16px;
+  border: none;
+  background: transparent;
+  color: #64748b;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  cursor: pointer;
+  transition: transform 0.15s ease;
+
+  &.expanded {
+    transform: rotate(90deg);
+  }
+}
+
+.project-color-sq {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.team-tag {
+  font-size: 10px;
+  padding: 1px 4px;
+  border-radius: 4px;
+  background: #ecfdf5;
+  color: #059669;
+  flex-shrink: 0;
+}
+
+.tree-folders-children {
+  padding-left: 16px;
+}
+
+.folder-node {
+  height: 26px;
+  font-size: 11.5px;
+  color: #475569;
+
+  &.level-2 {
+    padding-left: 18px;
+  }
+}
+
+.tree-empty-folder-tip {
+  font-size: 11px;
+  color: #94a3b8;
+  padding: 3px 8px 4px 20px;
+}
+
+.media-type-pills {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.media-pill {
+  height: 24px;
+  padding: 0 8px;
+  border-radius: 12px;
+  border: none;
+  background: #f1f5f9;
+  color: #64748b;
+  font-size: 11.5px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover {
+    color: #1e293b;
+  }
+
+  &.active {
+    background: #ebf3ff;
+    color: #1e6fff;
+    font-weight: 600;
+  }
+}
+
+.mine-sub-tabs {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 0 14px;
+  border-bottom: 1px solid #f1f5f9;
+  flex-shrink: 0;
+}
+
+.mine-sub-tab {
+  border: none;
+  background: transparent;
+  padding: 6px 0;
+  font-size: 12px;
+  color: #64748b;
+  cursor: pointer;
+  position: relative;
+  transition: color 0.15s ease;
+
+  &:hover {
+    color: #1e293b;
+  }
+
+  &.active {
+    color: #1e6fff;
+    font-weight: 600;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: -1px;
+      height: 2px;
+      background: #1e6fff;
+      border-radius: 1px;
+    }
+  }
+}
+
+.mine-waterfall-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 10px 14px 16px;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 2px;
+  }
+}
+
+.mine-masonry-columns {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.mine-masonry-col {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.mine-asset-card {
+  position: relative;
+  width: 100%;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #f1f5f9;
+  border: 1px solid #f1f5f9;
+  cursor: pointer;
+
+  &:hover .mine-card-media {
+    transform: scale(1.03);
+  }
+
+  &:hover .mine-card-actions {
+    opacity: 1;
+  }
+}
+
+.mine-card-media {
+  width: 100%;
+  height: auto;
+  min-height: 64px;
+  max-height: 210px;
+  object-fit: cover;
+  display: block;
+  transition: transform 0.22s ease;
+}
+
+.mine-card-badge {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: rgba(15, 23, 42, 0.65);
+  color: #ffffff;
+  font-size: 10.5px;
+  font-weight: 500;
+  pointer-events: none;
+
+  &.is-ai {
+    background: rgba(79, 70, 229, 0.85);
+  }
+
+  &.is-video {
+    background: rgba(5, 150, 105, 0.85);
+  }
+}
+
+.video-play-badge {
+  position: absolute;
+  left: 6px;
+  bottom: 24px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: rgba(15, 23, 42, 0.6);
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  pointer-events: none;
+}
+
+.mine-card-actions {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.card-act-btn {
+  border: none;
+  background: rgba(15, 23, 42, 0.65);
+  color: #ffffff;
+  height: 22px;
+  border-radius: 11px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  cursor: pointer;
+  padding: 0 6px;
+  transition: background 0.15s ease;
+
+  &.icon-btn {
+    width: 22px;
+    padding: 0;
+    border-radius: 50%;
+  }
+
+  &:hover {
+    background: #1e6fff;
+  }
+}
+
+.mine-card-bottom {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 12px 6px 4px;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(15, 23, 42, 0.72) 100%);
+  pointer-events: none;
+}
+
+.mine-card-title {
+  display: block;
+  font-size: 11px;
+  color: #ffffff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mine-loading-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 56px 0;
+  gap: 10px;
+}
+
+.loading-ring-spinner {
+  width: 22px;
+  height: 22px;
+  border: 2.5px solid #e2e8f0;
+  border-top-color: #1e6fff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.mini-spin-ring {
+  width: 12px;
+  height: 12px;
+  border: 2px solid rgba(255, 255, 255, 0.35);
+  border-top-color: #ffffff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+
+  &.blue {
+    border-color: rgba(30, 111, 255, 0.25);
+    border-top-color: #1e6fff;
+  }
+}
+
+.loading-tip-text {
+  font-size: 12px;
+  color: #64748b;
+}
+
+.mine-footer-status {
+  padding: 12px 0 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loading-more-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #64748b;
+}
+
+.load-more-action-btn {
+  width: 100%;
+  height: 32px;
+  border-radius: 6px;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+  color: #334155;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+
+  &:hover {
+    background: #eff6ff;
+    border-color: #bfdbfe;
+    color: #1e6fff;
+  }
+}
+
+.all-loaded-divider {
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+.mine-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 16px;
+  gap: 8px;
+  text-align: center;
+
+  .empty-title {
+    font-size: 12px;
+    color: #64748b;
+    margin: 0;
+  }
+
+  .empty-upload-cta {
+    margin-top: 4px;
+    height: 30px;
+    padding: 0 12px;
+    border-radius: 6px;
+    border: 1px solid #cbd5e1;
+    background: #ffffff;
+    color: #1e293b;
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+
+    &:hover {
+      border-color: #1e6fff;
+      color: #1e6fff;
+    }
+  }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+</style>