jvs-ppt-ui 0.0.17 → 0.0.18

package/package.json

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

package/src/components/CanvasArea.vue

@@ -58,6 +58,7 @@ import {
 } from '../utils/line'
 import { type SlideTextType, TEXT_TYPE_CONFIGS } from '../utils/textTypes'
 import { defaultStyleRecipe } from '../composables/presetThemes'
+import { useDamAuth } from './material/useDamAuth'
 
 const {
   activeSlide, selectedElementId, selectedElementIds, deleteElement, combineElements, uncombineElement, updateGroupBounds, zoomRatio, fitTrigger, activeTool, pendingTextType, pendingShapeSubtype, pendingShapeViewBox, pendingLineContent, activeIndex, slides, undo, redo, notify,
@@ -72,6 +73,7 @@ const {
   isMaterialEnabled, materialPopoverVisible, placeholderMaterialTargetId, setPlaceholderMaterialTargetId, replacePlaceholderElement
 } = useSlides()
 const activeTab = activeTabRaw as any
+const { isDamLoggedIn, sharedMaterialMainTab, setSharedMaterialMainTab, refreshSessionState } = useDamAuth()
 
 const isDragging = ref(false)
 
@@ -1958,7 +1960,8 @@ function handleWindowMouseDown(e: MouseEvent) {
     target.closest('.el-dialog') ||
     target.closest('.el-overlay') ||
     target.closest('.custom-fullscreen-preview-modal') ||
-    target.closest('.placeholder-action-popover')
+    target.closest('.placeholder-action-popover') ||
+    target.closest('.material-drawer-container')
   ) {
     return
   }
@@ -2313,6 +2316,7 @@ function handleImagePlaceholderClick(elId: string) {
     triggerPlaceholderImageUpload(elId)
     return
   }
+  refreshSessionState()
   activePlaceholderMenuElId.value = elId
 }
 
@@ -2321,8 +2325,7 @@ function handlePlaceholderMenuUpload(elId: string) {
   triggerPlaceholderImageUpload(elId)
 }
 
-function handlePlaceholderMenuMaterial(elId: string) {
-  activePlaceholderMenuElId.value = null
+function bindPlaceholderTarget(elId: string) {
   if (setPlaceholderMaterialTargetId) {
     setPlaceholderMaterialTargetId(elId)
   } else if (placeholderMaterialTargetId) {
@@ -2334,6 +2337,23 @@ function handlePlaceholderMenuMaterial(elId: string) {
   if (materialPopoverVisible) {
     materialPopoverVisible.value = false
   }
+}
+
+function handlePlaceholderMenuMaterial(elId: string) {
+  activePlaceholderMenuElId.value = null
+  bindPlaceholderTarget(elId)
+  if (sharedMaterialMainTab.value === 'create') {
+    setSharedMaterialMainTab('search')
+  }
+  activeTab.value = 'material'
+}
+
+function handlePlaceholderMenuAiCreate(elId: string) {
+  activePlaceholderMenuElId.value = null
+  refreshSessionState()
+  if (!isDamLoggedIn.value) return
+  bindPlaceholderTarget(elId)
+  setSharedMaterialMainTab('create')
   activeTab.value = 'material'
 }
 
@@ -2351,7 +2371,7 @@ const getPlaceholderActionMenuStyle = (el: any) => {
   const iconHalfWPhysical = Math.min(28, rect.width * 0.225) * scale
 
   const menuW = 148
-  const menuH = 80
+  const menuH = isDamLoggedIn.value ? 114 : 80
   let left = centerXPhysical + iconHalfWPhysical + 8
   if (left + menuW > slideW - 8) {
     left = Math.max(8, centerXPhysical - iconHalfWPhysical - 8 - menuW)
@@ -9064,6 +9084,18 @@ async function handleGlobalPaste(e: ClipboardEvent) {
               </svg>
               <span>从素材库选择</span>
             </button>
+            <button
+              v-if="isDamLoggedIn"
+              type="button"
+              class="placeholder-action-item is-ai-create"
+              @click.stop="handlePlaceholderMenuAiCreate(selectedElement.id)"
+            >
+              <svg viewBox="0 0 24 24" class="placeholder-action-icon">
+                <path d="M12 3l1.9 4.6L18.5 9.5l-4.6 1.9L12 16l-1.9-4.6L5.5 9.5l4.6-1.9L12 3z" />
+                <path d="M19 15l.9 2.1L22 18l-2.1.9L19 21l-.9-2.1L16 18l2.1-.9L19 15z" />
+              </svg>
+              <span>AI生成</span>
+            </button>
           </div>
         </div>
       </div>

package/src/components/TemplateGallery.vue

@@ -12,6 +12,9 @@ import {
 } from '@element-plus/icons-vue'
 import { useSlides, DEFAULT_MATERIAL_PAGE_API_URL } from '../composables/useSlides'
 import { isImagePlaceholder } from '../utils/canvas/elementStyles'
+import { useDamAuth } from './material/useDamAuth'
+import MyAssetsPanel from './material/MyAssetsPanel.vue'
+import CreateMaterialPanel from './material/CreateMaterialPanel.vue'
 
 const {
   addElement,
@@ -103,6 +106,44 @@ const subTypeNameMap: Record<StockSubType, string> = {
   Videos: '高清视频'
 }
 
+// 顶层 3-Tab 状态（检索 / 我的素材 / 创建素材）与 jvs_session_v3 鉴权
+export type MaterialMainTab = 'search' | 'mine' | 'create'
+const { isDamLoggedIn, sharedMaterialMainTab: activeMainTab, refreshSessionState } = useDamAuth()
+
+const myAssetsRef = ref<InstanceType<typeof MyAssetsPanel> | null>(null)
+const createPanelRef = ref<InstanceType<typeof CreateMaterialPanel> | null>(null)
+
+// 未登录点击受限 Tab 时的顶部轻量胶囊提示（不遮挡 Tab，不暴露技术字段）
+const guestToastVisible = ref(false)
+const guestToastText = ref('请先登录后使用该功能')
+let guestToastTimer: ReturnType<typeof setTimeout> | null = null
+
+function showGuestAuthToast(tabName: string) {
+  guestToastText.value = tabName === '我的素材'
+    ? '请先登录后查看「我的素材」'
+    : '请先登录后使用「创建素材」'
+  guestToastVisible.value = true
+  if (guestToastTimer) clearTimeout(guestToastTimer)
+  guestToastTimer = setTimeout(() => {
+    guestToastVisible.value = false
+  }, 2200)
+}
+
+function handleSwitchMainTab(tab: MaterialMainTab) {
+  refreshSessionState()
+  if (tab !== 'search' && !isDamLoggedIn.value) {
+    showGuestAuthToast(tab === 'mine' ? '我的素材' : '创建素材')
+    return
+  }
+  activeMainTab.value = tab
+}
+
+watch(isDamLoggedIn, (loggedIn) => {
+  if (!loggedIn && activeMainTab.value !== 'search') {
+    activeMainTab.value = 'search'
+  }
+})
+
 // 视图状态：先图二 (overview) 再图三 (detail)
 const viewMode = ref<'overview' | 'detail'>('overview')
 const overviewQuery = ref('')
@@ -248,6 +289,96 @@ function openPreview(item: MaterialItem, e?: Event) {
   previewVisible.value = true
 }
 
+// 供「我的素材」与「创建素材」子面板复用的全屏大图/视频预览
+function openCustomListPreview(item: MaterialItem, list: MaterialItem[], e?: Event) {
+  if (e) {
+    e.stopPropagation()
+    e.preventDefault()
+  }
+
+  const currentUrl = isVideoMaterial(item)
+    ? (item.sourceUrl || item.url || item.downloadUrl || getMaterialThumb(item))
+    : getMaterialThumb(item)
+
+  if (!currentUrl) {
+    notify('该素材暂无可用预览地址')
+    return
+  }
+
+  const sourceList = Array.isArray(list) && list.length > 0 ? list : [item]
+  const validItems: PreviewItem[] = []
+
+  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,
+        isVideo: isVid && isVideoUrl(u),
+        title: m.title || '素材预览',
+        format: getItemFormat(m),
+        meta: m
+      })
+    }
+  })
+
+  const targetIdx = validItems.findIndex(i => i.url === currentUrl)
+  if (targetIdx >= 0) {
+    previewInitialIndex.value = targetIdx
+  } else {
+    validItems.unshift({
+      url: currentUrl,
+      isVideo: isVideoMaterial(item) && isVideoUrl(currentUrl),
+      title: item.title || '素材预览',
+      format: getItemFormat(item),
+      meta: item
+    })
+    previewInitialIndex.value = 0
+  }
+
+  previewList.value = validItems
+
+  if (materialPopoverVisible && materialPopoverVisible.value) {
+    wasPopoverOpenBeforePreview.value = true
+    materialPopoverVisible.value = false
+  } else {
+    wasPopoverOpenBeforePreview.value = false
+  }
+
+  previewVisible.value = true
+}
+
+// 将「检索」或「我的素材」中的图片一键送入「创建素材」作为参考图
+function handleSendToCreateRef(item: MaterialItem, e?: Event) {
+  if (e) {
+    e.stopPropagation()
+    e.preventDefault()
+  }
+  refreshSessionState()
+  if (!isDamLoggedIn.value) {
+    showGuestAuthToast('创建素材')
+    return
+  }
+  const thumbUrl = getMaterialThumb(item)
+  if (!thumbUrl) {
+    notify('该素材暂无可用参考图地址')
+    return
+  }
+  activeMainTab.value = 'create'
+  nextTick(() => {
+    createPanelRef.value?.addReferenceItem({
+      url: thumbUrl,
+      name: item.title || '参考图'
+    })
+  })
+}
+
+function handleOnMaterialGenerated() {
+  myAssetsRef.value?.reloadAssets?.()
+}
+
 function closePreview() {
   previewVisible.value = false
   if (wasPopoverOpenBeforePreview.value && materialPopoverVisible) {
@@ -770,9 +901,21 @@ watch([() => materialApiUrl?.value, () => materialPageApiUrl?.value, () => mater
 
 <template>
   <div class="material-drawer-container">
+    <!-- 未登录点击「我的素材/创建素材」时的顶部轻量胶囊提示 -->
+    <transition name="guest-toast-fade">
+      <div v-if="guestToastVisible" class="guest-auth-toast">
+        <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="#d97706" stroke-width="2.2">
+          <circle cx="12" cy="12" r="10" />
+          <line x1="12" y1="8" x2="12" y2="12" />
+          <line x1="12" y1="16" x2="12.01" y2="16" />
+        </svg>
+        <span>{{ guestToastText }}</span>
+      </div>
+    </transition>
+
     <!-- 顶部抽屉标题栏：图二显示「素材库」，图三显示「← 分类/搜索词」 -->
     <div class="material-drawer-header">
-      <div v-if="viewMode === 'overview'" class="drawer-header-left">
+      <div v-if="activeMainTab !== 'search' || viewMode === 'overview'" class="drawer-header-left">
         <span class="drawer-header-title">素材库</span>
       </div>
       <button v-else type="button" class="drawer-back-btn" @click="backToOverview">
@@ -793,8 +936,77 @@ watch([() => materialApiUrl?.value, () => materialPageApiUrl?.value, () => mater
       </button>
     </div>
 
-    <!-- ==================== 图二：素材库分类概览视图 ==================== -->
-    <div v-if="viewMode === 'overview'" class="material-overview-body">
+    <!-- 顶层 3-Tab 分段切换器（检索 | 我的素材 | 创建素材） -->
+    <div v-if="activeMainTab !== 'search' || viewMode === 'overview'" class="material-top-tabs-wrap">
+      <div class="material-top-segmented">
+        <button
+          type="button"
+          class="material-main-tab-btn"
+          :class="{ active: activeMainTab === 'search' }"
+          @click="handleSwitchMainTab('search')"
+        >
+          <span>检索</span>
+        </button>
+
+        <button
+          type="button"
+          class="material-main-tab-btn"
+          :class="{
+            active: activeMainTab === 'mine',
+            'is-disabled': !isDamLoggedIn
+          }"
+          :title="!isDamLoggedIn ? '请先登录后查看我的素材' : '查看我的项目与个人素材'"
+          @click="handleSwitchMainTab('mine')"
+        >
+          <span>我的素材</span>
+          <svg
+            v-if="!isDamLoggedIn"
+            class="tab-lock-svg"
+            viewBox="0 0 24 24"
+            width="11"
+            height="11"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.2"
+          >
+            <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+          </svg>
+        </button>
+
+        <button
+          type="button"
+          class="material-main-tab-btn"
+          :class="{
+            active: activeMainTab === 'create',
+            'is-disabled': !isDamLoggedIn
+          }"
+          :title="!isDamLoggedIn ? '请先登录后使用创建素材' : 'AI 生成图片或视频素材'"
+          @click="handleSwitchMainTab('create')"
+        >
+          <span>创建素材</span>
+          <span v-if="isDamLoggedIn" class="tab-ai-spark">✦</span>
+          <svg
+            v-else
+            class="tab-lock-svg"
+            viewBox="0 0 24 24"
+            width="11"
+            height="11"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.2"
+          >
+            <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- ==================== Tab 1：检索（公网素材分类概览 & 详情瀑布流） ==================== -->
+    <template v-if="activeMainTab === 'search'">
+      <!-- 图二：素材库分类概览视图 -->
+      <div v-if="viewMode === 'overview'" class="material-overview-body">
       <!-- 搜索框 -->
       <div class="overview-search-wrap">
         <div class="overview-search-box">
@@ -873,6 +1085,15 @@ watch([() => materialApiUrl?.value, () => materialPageApiUrl?.value, () => mater
                   <span v-if="cat.subType === 'Videos' || isVideoMaterial(item)" class="video-badge-icon">
                     <el-icon><VideoPlay /></el-icon>
                   </span>
+                  <button
+                    v-if="isDamLoggedIn && cat.subType !== 'Videos' && !isVideoMaterial(item) && getMaterialThumb(item)"
+                    type="button"
+                    class="overview-card-ref-btn"
+                    title="作为参考图发送到「创建素材」"
+                    @click.stop.prevent="handleSendToCreateRef(item, $event)"
+                  >
+                    @参考
+                  </button>
                 </div>
               </template>
 
@@ -1014,6 +1235,17 @@ watch([() => materialApiUrl?.value, () => materialPageApiUrl?.value, () => mater
                   <el-icon><VideoPlay /></el-icon>
                 </span>
 
+                <!-- 悬浮设为参考图按钮 -->
+                <button
+                  v-if="isDamLoggedIn && filterParams.activeSubType !== 'Videos' && !isVideoMaterial(item) && getMaterialThumb(item)"
+                  type="button"
+                  class="detail-card-ref-btn"
+                  title="作为参考图发送到「创建素材」"
+                  @click.stop.prevent="handleSendToCreateRef(item, $event)"
+                >
+                  @参考
+                </button>
+
                 <!-- 悬浮预览小按钮 -->
                 <button
                   v-if="getMaterialThumb(item)"
@@ -1064,6 +1296,25 @@ watch([() => materialApiUrl?.value, () => materialPageApiUrl?.value, () => mater
         </div>
       </div>
     </div>
+    </template>
+
+    <!-- ==================== Tab 2：我的素材（jvs-material-ui 资产库接入） ==================== -->
+    <MyAssetsPanel
+      v-else-if="activeMainTab === 'mine' && isDamLoggedIn"
+      ref="myAssetsRef"
+      @select="handleSelectMaterial"
+      @preview="openCustomListPreview"
+      @use-as-ref="(item) => handleSendToCreateRef(item)"
+    />
+
+    <!-- ==================== Tab 3：创建素材（AI 图片生成器 & 视频生成） ==================== -->
+    <CreateMaterialPanel
+      v-else-if="activeMainTab === 'create' && isDamLoggedIn"
+      ref="createPanelRef"
+      @select="handleSelectMaterial"
+      @preview="openCustomListPreview"
+      @generated="handleOnMaterialGenerated"
+    />
 
     <!-- 全屏大图/视频预览 Modal -->
     <teleport to="body">
@@ -1146,6 +1397,7 @@ watch([() => materialApiUrl?.value, () => materialPageApiUrl?.value, () => mater
 
 <style scoped lang="scss">
 .material-drawer-container {
+  position: relative;
   display: flex;
   flex-direction: column;
   width: 288px;
@@ -1157,18 +1409,112 @@ watch([() => materialApiUrl?.value, () => materialPageApiUrl?.value, () => mater
   user-select: none;
 }
 
+/* 未登录点击受限 Tab 时的顶部轻量胶囊提示 */
+.guest-auth-toast {
+  position: absolute;
+  top: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #fffbeb;
+  border: 1px solid #fde68a;
+  color: #b45309;
+  font-size: 11.5px;
+  font-weight: 500;
+  padding: 5px 12px;
+  border-radius: 99px;
+  white-space: nowrap;
+  z-index: 200;
+  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.12);
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  pointer-events: none;
+}
+
+.guest-toast-fade-enter-active,
+.guest-toast-fade-leave-active {
+  transition: opacity 0.18s ease, transform 0.18s ease;
+}
+.guest-toast-fade-enter-from,
+.guest-toast-fade-leave-to {
+  opacity: 0;
+  transform: translate(-50%, -6px);
+}
+
 /* 顶部栏（图二：素材库 / 图三：← 分类名） */
 .material-drawer-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 48px;
+  height: 44px;
   padding: 0 16px;
-  border-bottom: 1px solid #f1f5f9;
+  border-bottom: none;
   flex-shrink: 0;
   box-sizing: border-box;
 }
 
+/* 顶层 3-Tab 分段切换器（检索 | 我的素材 | 创建素材） */
+.material-top-tabs-wrap {
+  padding: 2px 16px 10px;
+  border-bottom: 1px solid #f1f5f9;
+  flex-shrink: 0;
+}
+
+.material-top-segmented {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  background: #f1f5f9;
+  padding: 3px;
+  border-radius: 8px;
+  gap: 2px;
+}
+
+.material-main-tab-btn {
+  height: 28px;
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #64748b;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  padding: 0 4px;
+  white-space: nowrap;
+  transition: all 0.18s ease;
+
+  &:hover:not(.active):not(.is-disabled) {
+    color: #1e293b;
+  }
+
+  &.active {
+    background: #ffffff;
+    color: #1e6fff;
+    font-weight: 600;
+    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+  }
+
+  &.is-disabled {
+    color: #94a3b8;
+    cursor: not-allowed;
+    opacity: 0.72;
+  }
+}
+
+.tab-ai-spark {
+  font-size: 11px;
+  line-height: 1;
+  color: #8b5cf6;
+}
+
+.tab-lock-svg {
+  flex-shrink: 0;
+  color: #94a3b8;
+}
+
 .drawer-header-left {
   display: flex;
   align-items: center;
@@ -1382,6 +1728,32 @@ watch([() => materialApiUrl?.value, () => materialPageApiUrl?.value, () => mater
   &:hover .overview-thumb-img {
     transform: scale(1.04);
   }
+
+  &:hover .overview-card-ref-btn {
+    opacity: 1;
+  }
+}
+
+.overview-card-ref-btn {
+  position: absolute;
+  left: 5px;
+  bottom: 5px;
+  height: 19px;
+  padding: 0 6px;
+  border-radius: 4px;
+  border: none;
+  background: rgba(15, 23, 42, 0.68);
+  color: #ffffff;
+  font-size: 10px;
+  font-weight: 500;
+  cursor: pointer;
+  opacity: 0;
+  transition: all 0.15s ease;
+  z-index: 3;
+
+  &:hover {
+    background: #1e6fff;
+  }
 }
 
 .overview-thumb-img {
@@ -1579,11 +1951,34 @@ watch([() => materialApiUrl?.value, () => materialPageApiUrl?.value, () => mater
     transform: scale(1.03);
   }
 
-  &:hover .detail-card-preview-btn {
+  &:hover .detail-card-preview-btn,
+  &:hover .detail-card-ref-btn {
     opacity: 1;
   }
 }
 
+.detail-card-ref-btn {
+  position: absolute;
+  left: 6px;
+  bottom: 6px;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: 4px;
+  border: none;
+  background: rgba(15, 23, 42, 0.68);
+  color: #ffffff;
+  font-size: 10px;
+  font-weight: 500;
+  cursor: pointer;
+  opacity: 0;
+  transition: all 0.15s ease;
+  z-index: 3;
+
+  &:hover {
+    background: #1e6fff;
+  }
+}
+
 .detail-card-img {
   width: 100%;
   height: auto;