jvs-ppt-ui 0.0.16 → 0.0.18

package/src/components/SidebarRight.vue

@@ -465,12 +465,15 @@ function applyTextStyleToHtml(html: string, styles: any) {
     paragraphs.forEach(applyTextStyles)
   }
 
-  // 综合处理字体与样式覆盖：如果指定了 fontFamily，清理/更新所有块级和内联节点的原有硬编码字体
-  if (styles.fontFamily) {
+  // 综合处理字体与样式覆盖：如果指定了 fontFamily 或 fontSize，清理/更新所有块级和内联节点的原有硬编码值
+  if (styles.fontFamily || styles.fontSize) {
     div.querySelectorAll('p, div, li, h1, h2, h3, h4, h5, h6, span, b, strong, i, em, a').forEach((elem: any) => {
-      if (elem.style && elem.style.fontFamily) {
+      if (styles.fontFamily && elem.style && elem.style.fontFamily) {
         elem.style.fontFamily = styles.fontFamily
       }
+      if (styles.fontSize && elem.style && elem.style.fontSize) {
+        elem.style.fontSize = styles.fontSize
+      }
     })
   }
 
@@ -571,11 +574,12 @@ function setStyleVal(prop: string, val: any) {
           }
         }
 
-        if (prop === 'fontFamily') {
+        if (prop === 'fontFamily' || prop === 'fontSize') {
           const container = document.getElementById(`editable-${el.id}`)
           if (container) {
-            container.style.fontFamily = val
-            container.innerHTML = applyTextStyleToHtml(container.innerHTML, { fontFamily: val })
+            if (prop === 'fontFamily') container.style.fontFamily = val
+            else container.style.fontSize = val
+            container.innerHTML = applyTextStyleToHtml(container.innerHTML, { [prop]: val })
             if (el.type === 'shape') {
               el.text = container.innerHTML
             } else {

package/src/components/TemplateGallery.vue

@@ -11,6 +11,10 @@ import {
   VideoPlay
 } 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,
@@ -20,7 +24,12 @@ const {
   materialPageApiUrl,
   materialHeaders,
   activeTab,
-  materialPopoverVisible
+  materialPopoverVisible,
+  activeSlide,
+  selectedElementId,
+  placeholderMaterialTargetId,
+  resolveActivePlaceholderTargetId,
+  replacePlaceholderElement
 } = useSlides()
 
 export interface MaterialItem {
@@ -97,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('')
@@ -242,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) {
@@ -682,7 +819,7 @@ function formatMaterialTitle(title?: string, fallback = '素材', maxLen = 12):
   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
@@ -692,9 +829,36 @@ function handleSelectMaterial(meta: MaterialItem) {
     return
   }
 
-  let initialDimensions: { width?: number; height?: number } | undefined = undefined
   const rawW = meta.originalWidth || meta.width
   const rawH = meta.originalHeight || meta.height
+
+  const currentSelectedEl = selectedElementId?.value
+    ? activeSlide?.value?.elements?.find((el: any) => el.id === selectedElementId.value)
+    : null
+
+  const explicitTargetId =
+    placeholderMaterialTargetId?.value ||
+    (typeof window !== 'undefined' ? (window as any).__jvsPlaceholderTargetId : null)
+
+  const targetPlaceholderId =
+    (resolveActivePlaceholderTargetId ? resolveActivePlaceholderTargetId() : null) ||
+    (explicitTargetId && (!currentSelectedEl || currentSelectedEl.id === explicitTargetId)
+      ? explicitTargetId
+      : (currentSelectedEl && isImagePlaceholder(currentSelectedEl) ? currentSelectedEl.id : null))
+
+  if (targetPlaceholderId && replacePlaceholderElement) {
+    const replaced = replacePlaceholderElement(targetPlaceholderId, targetUrl, {
+      isVideo: isVid,
+      width: Number(rawW) || undefined,
+      height: Number(rawH) || undefined,
+      notifyMessage: isVid
+        ? `已使用视频 "${formatMaterialTitle(meta.title, '高清视频', 12)}" 替换占位符`
+        : `已使用素材 "${formatMaterialTitle(meta.title, '图片', 12)}" 替换占位符图片`
+    })
+    if (replaced) return
+  }
+
+  let initialDimensions: { width?: number; height?: number } | undefined = undefined
   if (rawW && rawH && rawW > 0 && rawH > 0) {
     const maxWidth = 480
     const maxHeight = 360
@@ -737,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">
@@ -760,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">
@@ -840,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>
 
@@ -981,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)"
@@ -1031,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">
@@ -1113,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;
@@ -1124,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;
@@ -1349,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 {
@@ -1546,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;