jvs-ppt-ui 0.0.17 → 0.0.18

package/src/components/material/CreateMaterialPanel.vue

@@ -0,0 +1,2229 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { View, Plus, VideoPlay } from '@element-plus/icons-vue'
+import { useSlides } from '../../composables/useSlides'
+import { useDamAuth } from './useDamAuth'
+import type { MaterialItem } from '../TemplateGallery.vue'
+
+export interface ImageModelMetaVO {
+  provider?: string
+  providerName?: string
+  vendor?: string
+  model: string
+  displayName?: string
+  description?: string
+  defaultSize?: string
+  size?: string | string[]
+  recommendedSizes?: string[]
+  supportsRefImage?: boolean
+  isDefault?: boolean
+}
+
+export interface ReferenceItem {
+  id: string
+  name: string
+  url: string
+  type: 'style' | 'character' | 'add'
+  assetId?: string
+  assetType?: string
+  sourceType?: string
+}
+
+const DEFAULT_IMAGE_MODELS: ImageModelMetaVO[] = [
+  {
+    provider: 'DASHSCOPE',
+    providerName: '阿里百炼',
+    vendor: '通义千问',
+    model: 'qwen-image-3.0',
+    displayName: '通义千问生图 3.0',
+    description: '新一代真实感高画质生图模型，擅长版面布局与极清文字渲染',
+    size: '1328*1328',
+    recommendedSizes: ['1328*1328', '1024*1024', '1280*720', '720*1280'],
+    supportsRefImage: true,
+    isDefault: true
+  },
+  {
+    provider: 'DASHSCOPE',
+    providerName: '阿里百炼',
+    vendor: '通义千问',
+    model: 'qwen-image-3.0-pro',
+    displayName: '通义千问生图 3.0 Pro',
+    description: '专业级画质生图大模型，提供摄影级光影与高保真质感',
+    size: '1328*1328',
+    recommendedSizes: ['1328*1328', '1024*1024', '1280*720', '720*1280'],
+    supportsRefImage: true,
+    isDefault: false
+  },
+  {
+    provider: 'DASHSCOPE',
+    providerName: '阿里百炼',
+    vendor: '通义千问',
+    model: 'qwen-image-max',
+    displayName: '通义千问生图 Max',
+    description: '旗舰级多模态文生图模型，色彩绚丽生动，适合商业海报与插画',
+    size: '1328*1328',
+    recommendedSizes: ['1328*1328', '1024*1024', '1280*720', '720*1280'],
+    supportsRefImage: true,
+    isDefault: false
+  },
+  {
+    provider: 'DASHSCOPE',
+    providerName: '阿里百炼',
+    vendor: '通义万相',
+    model: 'wan2.7-image',
+    displayName: '通义万相 2.7 图像生成',
+    description: '万相 2.7 旗舰文生图模型，构图与光影细节极佳',
+    size: '1024*1024',
+    recommendedSizes: ['1024*1024', '1280*720', '720*1280', '1024*768', '768*1024'],
+    supportsRefImage: false,
+    isDefault: false
+  },
+  {
+    provider: 'DASHSCOPE',
+    providerName: '阿里百炼',
+    vendor: '通义万相',
+    model: 'wanx2.1-t2i-turbo',
+    displayName: '通义万相 2.1 Turbo',
+    description: '极速出图模型，适合高频概念预览与灵感探索',
+    size: '1024*1024',
+    recommendedSizes: ['1024*1024', '1280*720', '720*1280'],
+    supportsRefImage: false,
+    isDefault: false
+  }
+]
+
+const DEFAULT_VIDEO_MODELS = [
+  { model: 'wanx2.1-i2v-plus', displayName: '通义万相 2.1 视频增强版', vendor: '通义万相' },
+  { model: 'Wan 3.0', displayName: '通义万相 Wan 3.0 视频生成', vendor: '通义万相' },
+  { model: 'Seedance 2.5', displayName: 'Seedance 2.5 动态视频', vendor: 'ByteDance' },
+  { model: 'Kling 3.0', displayName: '可灵 Kling 3.0 高清视频', vendor: 'Kling' },
+  { model: 'MiniMax H3', displayName: '海螺 MiniMax H3 视频', vendor: 'MiniMax' }
+]
+
+const PROMPT_TEMPLATES = {
+  image: [
+    { title: '科技发布会背景', prompt: '极简未来感科技展厅背景，深海蓝与流光青渐变，柔和体积光，3D微距玻璃几何线条，8k超高清PPT背景' },
+    { title: '3D 商务玻璃图标', prompt: 'C4D 渲染 3D 磨砂玻璃质感商务数据分析图标，柔和工作室布光，干净纯白浅灰背景，OC渲染器高细节' },
+    { title: '新中式国风插画', prompt: '现代新中式国潮山水云纹插画，金色与青绿设色，留白构图适合PPT封面排版，细腻纸张纹理' },
+    { title: '企业团队办公摄影', prompt: '明亮现代化的落地窗办公室，年轻专业的商务团队围绕全息屏幕讨论，自然晨光，电影级景深摄影' }
+  ],
+  video: [
+    { title: '流光粒子科技背景', prompt: '深蓝色数字科技空间，柔和发光粒子缓慢向上漂浮汇聚成波浪网格，镜头平滑向前推进，无缝循环感 4K' },
+    { title: '晨雾森林航拍推进', prompt: '无人机航拍视角平稳穿过清晨薄雾笼罩的松林，金色阳光透过树冠洒下丁达尔光束，电影级4K 60fps' },
+    { title: '现代城市延时天际线', prompt: '繁华现代都市CBD玻璃幕墙天际线，云层快速流动，光影在建筑表面缓慢推移，商业大片质感' }
+  ]
+}
+
+const QUICK_STYLE_TAGS = [
+  '电影级光影',
+  '3D 磨砂玻璃',
+  '极简留白构图',
+  '赛博朋克霓虹',
+  '柔和体积光',
+  '扁平矢量插画',
+  '8K 超清细节',
+  '等轴测微缩景观'
+]
+
+const PRESET_STYLE_REFS = [
+  { id: 'style-3d', name: '3D 玻璃质感', url: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=400&auto=format&fit=crop&q=80' },
+  { id: 'style-cyber', name: '流光科技感', url: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=400&auto=format&fit=crop&q=80' },
+  { id: 'style-minimal', name: '极简建筑光影', url: 'https://images.unsplash.com/photo-1513694203232-719a280e022f?w=400&auto=format&fit=crop&q=80' },
+  { id: 'style-art', name: '暖调商业插画', url: 'https://images.unsplash.com/photo-1579783902614-a3fb3927b675?w=400&auto=format&fit=crop&q=80' }
+]
+
+const emit = defineEmits<{
+  (e: 'select', item: MaterialItem): void
+  (e: 'preview', item: MaterialItem, list: MaterialItem[], event?: Event): void
+  (e: 'generated', item: MaterialItem): void
+}>()
+
+const {
+  notify,
+  activeSlide,
+  selectedElementId,
+  placeholderMaterialTargetId,
+  resolveActivePlaceholderTargetId
+} = useSlides()
+const selectedElement = computed(() => {
+  if (!selectedElementId?.value) return null
+  return activeSlide?.value?.elements?.find((el: any) => el.id === selectedElementId.value) || null
+})
+const hasActivePlaceholderTarget = computed(() => {
+  const resolved = resolveActivePlaceholderTargetId ? resolveActivePlaceholderTargetId() : null
+  if (resolved) return true
+  if (placeholderMaterialTargetId?.value) return true
+  if (typeof window !== 'undefined' && (window as any).__jvsPlaceholderTargetId) return true
+  return false
+})
+const { damFetchJson, isDamLoggedIn } = useDamAuth()
+
+// 生成器模式：image (图片生成器 - 图二) | video (视频生成)
+const createMode = ref<'image' | 'video'>('image')
+
+// 模型列表与选择状态
+const imageModels = ref<ImageModelMetaVO[]>([...DEFAULT_IMAGE_MODELS])
+const selectedImageModel = ref<string>('qwen-image-3.0')
+const selectedVideoModel = ref<string>('wanx2.1-i2v-plus')
+const showModelDropdown = ref(false)
+const showTemplatePopover = ref(false)
+
+// 参考素材状态 (图片模式 0/8，视频模式首尾帧)
+const referenceList = ref<ReferenceItem[]>([])
+const videoStartImage = ref<ReferenceItem | null>(null)
+const videoEndImage = ref<ReferenceItem | null>(null)
+const refPickerVisible = ref(false)
+const refPickerTargetMode = ref<'style' | 'character' | 'add' | 'video-start' | 'video-end'>('add')
+const recentPickerAssets = ref<MaterialItem[]>([])
+const loadingPickerAssets = ref(false)
+const refFileInputRef = ref<HTMLInputElement | null>(null)
+const uploadingRefFile = ref(false)
+
+// 提示词与底部工具状态
+const promptText = ref('')
+const isAiPromptOn = ref(true)
+const isFixedSeedOn = ref(false)
+const showSeedPopover = ref(false)
+const showTagPopover = ref(false)
+const showExpandModal = ref(false)
+const expandedPromptDraft = ref('')
+
+// 参数胶囊状态 (图片模式：数量 / 宽高比 / 清晰度)
+const batchCount = ref(1)
+const aspectRatio = ref<'1:1' | '16:9' | '9:16' | '4:3' | '3:4'>('1:1')
+const qualitySpec = ref<'1K · High' | '1K · Fast' | '2K · HD'>('1K · High')
+const showRatioDropdown = ref(false)
+const showQualityDropdown = ref(false)
+
+// 视频模式专属参数状态
+const videoDuration = ref<'5-6"' | '10"'>('5-6"')
+const videoRatio = ref<'16:9' | '9:16' | '1:1'>('16:9')
+const videoMotionOn = ref(true)
+const showVideoDurationDropdown = ref(false)
+const showVideoRatioDropdown = ref(false)
+
+// 生成执行与结果列表
+const isGenerating = ref(false)
+const currentSessionId = ref<string | undefined>(undefined)
+const generatedResults = ref<MaterialItem[]>([])
+
+const currentImageModelMeta = computed(() => {
+  return imageModels.value.find(m => m.model === selectedImageModel.value) || imageModels.value[0] || DEFAULT_IMAGE_MODELS[0]
+})
+
+const isWanxBrand = computed(() => {
+  const m = selectedImageModel.value.toLowerCase()
+  return m.includes('wan')
+})
+
+// 检测当前 PPT 画布是否选中了图片元素（支持一键拾取为参考图）
+const canvasSelectedImageUrl = computed(() => {
+  const el = selectedElement.value as any
+  if (!el) return ''
+  if (el.type === 'image' && (el.src || el.url)) {
+    return String(el.src || el.url)
+  }
+  return ''
+})
+
+function mapRatioToSize(ratio: string, quality: string): string {
+  const is2K = quality.startsWith('2K')
+  switch (ratio) {
+    case '1:1':
+      return is2K ? '1440*1440' : (selectedImageModel.value.startsWith('qwen') ? '1328*1328' : '1024*1024')
+    case '16:9':
+      return is2K ? '1920*1080' : '1280*720'
+    case '9:16':
+      return is2K ? '1080*1920' : '720*1280'
+    case '4:3':
+      return is2K ? '1440*1080' : '1024*768'
+    case '3:4':
+      return is2K ? '1080*1440' : '768*1024'
+    default:
+      return '1024*1024'
+  }
+}
+
+async function fetchSupportedImageModels() {
+  if (!isDamLoggedIn.value) return
+  try {
+    const res = await damFetchJson('/image/generate/models')
+    let list: ImageModelMetaVO[] = []
+    if (Array.isArray(res)) list = res
+    else if (Array.isArray(res?.data?.data)) list = res.data.data
+    else if (Array.isArray(res?.data)) list = res.data
+
+    if (list.length > 0) {
+      imageModels.value = list
+      if (!list.some(m => m.model === selectedImageModel.value)) {
+        const def = list.find(m => m.isDefault) || list[0]
+        if (def) selectedImageModel.value = def.model
+      }
+    }
+  } catch {
+    // 保持内置 DEFAULT_IMAGE_MODELS
+  }
+}
+
+function closeAllPopovers() {
+  showModelDropdown.value = false
+  showTemplatePopover.value = false
+  showSeedPopover.value = false
+  showTagPopover.value = false
+  showRatioDropdown.value = false
+  showQualityDropdown.value = false
+  showVideoDurationDropdown.value = false
+  showVideoRatioDropdown.value = false
+}
+
+function chooseModel(modelKey: string) {
+  if (createMode.value === 'image') {
+    selectedImageModel.value = modelKey
+  } else {
+    selectedVideoModel.value = modelKey
+  }
+  showModelDropdown.value = false
+}
+
+function applyTemplatePrompt(tplPrompt: string) {
+  promptText.value = tplPrompt
+  showTemplatePopover.value = false
+}
+
+function appendQuickTag(tag: string) {
+  const cur = promptText.value.trim()
+  promptText.value = cur ? `${cur}，${tag}` : tag
+  showTagPopover.value = false
+}
+
+function openExpandPromptModal() {
+  expandedPromptDraft.value = promptText.value
+  showExpandModal.value = true
+}
+
+function confirmExpandedPrompt() {
+  promptText.value = expandedPromptDraft.value
+  showExpandModal.value = false
+}
+
+/**
+ * 打开参考素材选择器
+ */
+async function openRefPicker(targetMode: 'style' | 'character' | 'add' | 'video-start' | 'video-end') {
+  closeAllPopovers()
+  refPickerTargetMode.value = targetMode
+  refPickerVisible.value = true
+
+  if (recentPickerAssets.value.length === 0 && isDamLoggedIn.value) {
+    loadingPickerAssets.value = true
+    try {
+      const res = await damFetchJson('/asset/recent', {
+        params: { current: 1, size: 12, assetType: 'IMAGE' }
+      })
+      const rawList = Array.isArray(res?.data?.records)
+        ? res.data.records
+        : Array.isArray(res?.data)
+          ? res.data
+          : []
+      recentPickerAssets.value = rawList
+        .map((r: any) => {
+          const u = r.fileUrl || r.imageUrl || r.url || r.previewUrl || ''
+          if (!u) return null
+          return {
+            id: String(r.id || Math.random()),
+            title: r.name || '我的资产',
+            url: u,
+            previewUrl: u
+          } as MaterialItem
+        })
+        .filter((i: MaterialItem | null): i is MaterialItem => Boolean(i))
+    } catch {
+      recentPickerAssets.value = []
+    } finally {
+      loadingPickerAssets.value = false
+    }
+  }
+}
+
+/**
+ * 添加参考图（支持外部组件直接调用或内部选择器调用）
+ */
+function addReferenceItem(item: {
+  id?: string
+  name?: string
+  url: string
+  type?: 'style' | 'character' | 'add'
+  assetId?: string
+  sourceType?: string
+}) {
+  if (!item.url) return
+
+  // 若当前针对视频首尾帧选择
+  if (refPickerTargetMode.value === 'video-start' && refPickerVisible.value) {
+    videoStartImage.value = {
+      id: item.id || `vstart-${Date.now()}`,
+      name: item.name || '起始帧',
+      url: item.url,
+      type: 'add',
+      assetId: item.assetId
+    }
+    refPickerVisible.value = false
+    return
+  }
+  if (refPickerTargetMode.value === 'video-end' && refPickerVisible.value) {
+    videoEndImage.value = {
+      id: item.id || `vend-${Date.now()}`,
+      name: item.name || '结束帧',
+      url: item.url,
+      type: 'add',
+      assetId: item.assetId
+    }
+    refPickerVisible.value = false
+    return
+  }
+
+  if (referenceList.value.length >= 8) {
+    notify('参考素材最多支持添加 8 张')
+    return
+  }
+  if (referenceList.value.some(r => r.url === item.url)) {
+    notify('该参考图已在列表中')
+    refPickerVisible.value = false
+    return
+  }
+
+  const refType: 'style' | 'character' | 'add' =
+    item.type ||
+    (refPickerTargetMode.value === 'style' || refPickerTargetMode.value === 'character'
+      ? refPickerTargetMode.value
+      : 'add')
+
+  const idx = referenceList.value.length + 1
+  referenceList.value.push({
+    id: item.id || `ref-${Date.now()}-${idx}`,
+    name: item.name || (refType === 'style' ? `风格参考-${idx}` : refType === 'character' ? `角色参考-${idx}` : `参考图-${idx}`),
+    url: item.url,
+    type: refType,
+    assetId: item.assetId || item.id,
+    assetType: 'IMAGE',
+    sourceType: item.sourceType || (refType === 'style' ? 'REFERENCE' : 'UPLOAD')
+  })
+  refPickerVisible.value = false
+}
+
+function removeReference(id: string) {
+  referenceList.value = referenceList.value.filter(r => r.id !== id)
+}
+
+function insertRefTagToPrompt(idx: number) {
+  const tag = `@img${idx + 1} `
+  if (!promptText.value.includes(`@img${idx + 1}`)) {
+    promptText.value = (promptText.value ? promptText.value + ' ' : '') + tag
+  }
+}
+
+async function handleRefFileChange(e: Event) {
+  const input = e.target as HTMLInputElement
+  const file = input.files?.[0]
+  input.value = ''
+  if (!file) return
+
+  uploadingRefFile.value = true
+  try {
+    const formData = new FormData()
+    formData.append('file', file)
+    formData.append('path', '/dam/media/')
+    formData.append('fileName', file.name)
+    formData.append('id', String(Date.now()))
+    formData.append('assetType', 'IMAGE')
+
+    const res = await damFetchJson('/upload/file', {
+      method: 'POST',
+      body: formData
+    })
+    const body = res?.data !== undefined ? res.data : res
+    const inner = body?.data !== undefined ? body.data : body
+    const fileUrl =
+      inner?.ossUrl ||
+      inner?.fileLink ||
+      inner?.fileUrl ||
+      inner?.url ||
+      body?.ossUrl ||
+      body?.fileLink ||
+      body?.fileUrl ||
+      body?.url ||
+      ''
+    if (fileUrl) {
+      addReferenceItem({
+        name: file.name,
+        url: fileUrl,
+        sourceType: 'UPLOAD'
+      })
+      notify('参考图上传成功')
+    } else {
+      notify('上传未返回有效图片地址')
+    }
+  } catch (err: any) {
+    notify(`上传参考图失败: ${err.message || '网络异常'}`)
+  } finally {
+    uploadingRefFile.value = false
+  }
+}
+
+/**
+ * 执行 AI 生图或生视频
+ */
+async function handleGenerate() {
+  const rawPrompt = promptText.value.trim()
+  if (!rawPrompt) {
+    notify(createMode.value === 'image' ? '请输入您想要生成的画面描述提示词' : '请输入视频画面与运镜描述提示词')
+    return
+  }
+
+  if (createMode.value === 'image') {
+    const meta = currentImageModelMeta.value
+    if (referenceList.value.length > 0 && meta && meta.supportsRefImage === false) {
+      notify(`当前模型【${selectedImageModel.value}】不支持参考图，请切换为 qwen-image-3.0 或移除参考素材`)
+      return
+    }
+
+    isGenerating.value = true
+    try {
+      const targetSize = mapRatioToSize(aspectRatio.value, qualitySpec.value)
+      const [wStr, hStr] = targetSize.split('*')
+      const finalPrompt = isAiPromptOn.value
+        ? `${rawPrompt}，高细节，大师级构图，光影质感极佳`
+        : rawPrompt
+
+      const refImages = referenceList.value.map((r, i) => ({
+        assetId: r.assetId || r.id || `ref_${Date.now()}_${i}`,
+        url: r.url,
+        assetType: 'IMAGE',
+        sourceType: r.sourceType || 'UPLOAD'
+      }))
+
+      const payload: Record<string, any> = {
+        sessionId: currentSessionId.value,
+        prompt: finalPrompt,
+        size: targetSize,
+        model: selectedImageModel.value,
+        provider: meta?.provider || 'DASHSCOPE',
+        refStrength: 0.65,
+        ...(refImages.length > 0
+          ? {
+              refImages,
+              refImageUrls: refImages.map(r => r.url)
+            }
+          : {})
+      }
+
+      const res = await damFetchJson('/image/generate', {
+        method: 'POST',
+        body: JSON.stringify(payload)
+      })
+
+      const data = res?.data?.data || res?.data || res
+      const code = res?.code ?? res?.data?.code ?? 0
+      if ((code === 0 || code === 200) && data) {
+        if (data.sessionId) {
+          currentSessionId.value = data.sessionId
+        }
+        const urls: string[] = Array.isArray(data.imageUrls) && data.imageUrls.length > 0
+          ? data.imageUrls
+          : data.imageUrl
+            ? [data.imageUrl]
+            : []
+
+        if (urls.length > 0) {
+          urls.forEach((u, idx) => {
+            const newItem: MaterialItem = {
+              id: data.recordId ? `${data.recordId}_${idx}` : `gen-${Date.now()}-${idx}`,
+              title: rawPrompt,
+              type: 'image',
+              assetType: 'IMAGE',
+              sourceType: 'GENERATE',
+              badgeLabel: 'AI 生成',
+              url: u,
+              previewUrl: u,
+              sourceUrl: u,
+              originalWidth: Number(wStr) || 1024,
+              originalHeight: Number(hStr) || 1024,
+              model: data.model || selectedImageModel.value
+            }
+            generatedResults.value.unshift(newItem)
+            emit('generated', newItem)
+          })
+          notify('图片生成成功！点击下方卡片即可插入画布')
+        } else {
+          throw new Error(res?.msg || '未返回有效图片地址')
+        }
+      } else {
+        throw new Error(res?.msg || '生成图片失败')
+      }
+    } catch (err: any) {
+      notify(`图片生成失败: ${err.message || '请检查网络或服务配置'}`)
+    } finally {
+      isGenerating.value = false
+    }
+  } else {
+    // 视频生成模式
+    isGenerating.value = true
+    try {
+      const payload: Record<string, any> = {
+        prompt: videoMotionOn.value ? `${rawPrompt}，电影级平滑运镜` : rawPrompt,
+        model: selectedVideoModel.value,
+        aspectRatio: videoRatio.value,
+        duration: videoDuration.value === '10"' ? 10 : 5,
+        startImageUrl: videoStartImage.value?.url || undefined,
+        endImageUrl: videoEndImage.value?.url || undefined
+      }
+
+      const res = await damFetchJson('/video/generate', {
+        method: 'POST',
+        body: JSON.stringify(payload)
+      })
+
+      const data = res?.data?.data || res?.data || res
+      const videoUrl = data?.videoUrl || data?.fileUrl || data?.url || ''
+      if (videoUrl) {
+        const newVideo: MaterialItem = {
+          id: data?.recordId || `vid-${Date.now()}`,
+          title: rawPrompt,
+          type: 'video',
+          assetType: 'VIDEO',
+          sourceType: 'GENERATE',
+          badgeLabel: 'AI 视频',
+          url: videoUrl,
+          previewUrl: videoUrl,
+          sourceUrl: videoUrl,
+          originalWidth: videoRatio.value === '9:16' ? 720 : 1280,
+          originalHeight: videoRatio.value === '9:16' ? 1280 : 720,
+          model: selectedVideoModel.value
+        }
+        generatedResults.value.unshift(newVideo)
+        emit('generated', newVideo)
+        notify('视频生成成功！点击卡片即可插入画布')
+      } else {
+        throw new Error(res?.msg || '视频生成任务已提交或暂未返回直链，请稍后在「我的素材 - AI创作记录」中查看')
+      }
+    } catch (err: any) {
+      notify(err.message || '视频生成服务暂未就绪')
+    } finally {
+      isGenerating.value = false
+    }
+  }
+}
+
+onMounted(() => {
+  fetchSupportedImageModels()
+  window.addEventListener('click', closeAllPopovers)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('click', closeAllPopovers)
+})
+
+defineExpose({
+  addReferenceItem,
+  switchCreateMode: (mode: 'image' | 'video') => {
+    if (mode === 'video') return
+    createMode.value = mode
+  }
+})
+</script>
+
+<template>
+  <div class="create-material-panel">
+    <!-- 隐藏的参考图本地上传 input -->
+    <input
+      ref="refFileInputRef"
+      type="file"
+      accept="image/*"
+      style="display: none"
+      @change="handleRefFileChange"
+    />
+
+    <!-- 1. 顶部工具栏：图片生成器 / 视频生成（暂禁用） 分段切换（模板库暂隐藏） -->
+    <div class="create-sub-header">
+      <div class="mode-segmented-box">
+        <button
+          type="button"
+          class="mode-seg-btn"
+          :class="{ active: createMode === 'image' }"
+          @click="createMode = 'image'"
+        >
+          <span>图片生成器</span>
+        </button>
+        <button
+          type="button"
+          class="mode-seg-btn is-disabled"
+          disabled
+          title="视频生成功能暂未开放"
+        >
+          <span>视频生成</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- 2. 主滚动表单区 -->
+    <div class="create-scroll-body">
+      <!-- ==================== 模型选择 (Model Selection) ==================== -->
+      <div class="control-block">
+        <label class="block-label">模型选择</label>
+        <div class="model-select-wrap" @click.stop>
+          <button
+            type="button"
+            class="model-dropdown-trigger"
+            @click="showModelDropdown = !showModelDropdown"
+          >
+            <div class="model-left-info">
+              <span
+                class="model-brand-cube"
+                :class="{
+                  'is-video': createMode === 'video',
+                  'is-wanx': createMode === 'image' && isWanxBrand
+                }"
+              >
+                <svg v-if="createMode === 'video'" viewBox="0 0 24 24" width="13" height="13" fill="currentColor">
+                  <polygon points="6 4 20 12 6 20 6 4" />
+                </svg>
+                <svg v-else viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
+                  <path d="M12 2L3 7v10l9 5 9-5V7l-9-5z" />
+                </svg>
+              </span>
+              <span class="model-name-text">
+                {{ createMode === 'image' ? selectedImageModel : selectedVideoModel }}
+              </span>
+            </div>
+            <svg class="chevron-icon" viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="6 9 12 15 18 9" />
+            </svg>
+          </button>
+
+          <!-- 模型下拉菜单 -->
+          <transition name="pop-fade">
+            <div v-if="showModelDropdown" class="model-dropdown-menu">
+              <template v-if="createMode === 'image'">
+                <div
+                  v-for="m in imageModels"
+                  :key="m.model"
+                  class="model-option-item"
+                  :class="{ active: m.model === selectedImageModel }"
+                  @click="chooseModel(m.model)"
+                >
+                  <div class="opt-top-line">
+                    <span class="opt-code">{{ m.model }}</span>
+                    <span v-if="m.supportsRefImage" class="opt-tag">支持参考图</span>
+                  </div>
+                  <div v-if="m.displayName || m.description" class="opt-sub-desc">
+                    {{ m.displayName || m.description }}
+                  </div>
+                </div>
+              </template>
+              <template v-else>
+                <div
+                  v-for="vm in DEFAULT_VIDEO_MODELS"
+                  :key="vm.model"
+                  class="model-option-item"
+                  :class="{ active: vm.model === selectedVideoModel }"
+                  @click="chooseModel(vm.model)"
+                >
+                  <div class="opt-top-line">
+                    <span class="opt-code">{{ vm.model }}</span>
+                    <span class="opt-tag video">{{ vm.vendor }}</span>
+                  </div>
+                  <div class="opt-sub-desc">{{ vm.displayName }}</div>
+                </div>
+              </template>
+            </div>
+          </transition>
+        </div>
+      </div>
+
+      <!-- ==================== 参考素材 (References) ==================== -->
+      <!-- A. 图片生成模式：1:1 还原图二（风格参考 / 角色参考 / 添加素材 0/8） -->
+      <div v-if="createMode === 'image'" class="control-block">
+        <div class="block-header-line">
+          <label class="block-label">参考素材</label>
+          <span class="ref-counter">{{ referenceList.length }}/8</span>
+        </div>
+
+        <div class="ref-tiles-grid">
+          <button type="button" class="ref-action-tile" @click.stop="openRefPicker('style')">
+            <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+            </svg>
+            <span class="tile-label">风格参考</span>
+          </button>
+
+          <button type="button" class="ref-action-tile" @click.stop="openRefPicker('character')">
+            <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+              <circle cx="12" cy="7" r="4" />
+            </svg>
+            <span class="tile-label">角色参考</span>
+          </button>
+
+          <!-- 已添加的参考图卡片 (点击可插入 @imgN 到提示词) -->
+          <div
+            v-for="(refItem, idx) in referenceList"
+            :key="refItem.id"
+            class="ref-added-thumb"
+            :title="`点击在提示词中引用 @img${idx + 1}`"
+            @click="insertRefTagToPrompt(idx)"
+          >
+            <img :src="refItem.url" :alt="refItem.name" class="thumb-img" />
+            <span class="thumb-tag">
+              <template v-if="refItem.type === 'style'">★</template>
+              @img{{ idx + 1 }}
+            </span>
+            <button
+              type="button"
+              class="thumb-remove-btn"
+              title="移除参考图"
+              @click.stop="removeReference(refItem.id)"
+            >
+              ×
+            </button>
+          </div>
+
+          <button
+            v-if="referenceList.length < 8"
+            type="button"
+            class="ref-action-tile"
+            @click.stop="openRefPicker('add')"
+          >
+            <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="12" y1="5" x2="12" y2="19" />
+              <line x1="5" y1="12" x2="19" y2="12" />
+            </svg>
+            <span class="tile-label">添加素材</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- B. 视频生成模式：起始帧 / 结束帧 -->
+      <div v-else class="control-block">
+        <div class="block-header-line">
+          <label class="block-label">参考素材 (首尾帧)</label>
+        </div>
+        <div class="video-frames-grid">
+          <div
+            class="video-frame-slot"
+            @click.stop="openRefPicker('video-start')"
+          >
+            <template v-if="videoStartImage">
+              <img :src="videoStartImage.url" class="slot-preview-img" />
+              <span class="slot-tag">起始帧</span>
+              <button type="button" class="slot-clear-btn" @click.stop="videoStartImage = null">×</button>
+            </template>
+            <template v-else>
+              <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8">
+                <rect x="3" y="3" width="18" height="18" rx="2" />
+                <circle cx="8.5" cy="8.5" r="1.5" />
+                <polyline points="21 15 16 10 5 21" />
+              </svg>
+              <span>起始帧 (可选)</span>
+            </template>
+          </div>
+
+          <div
+            class="video-frame-slot"
+            @click.stop="openRefPicker('video-end')"
+          >
+            <template v-if="videoEndImage">
+              <img :src="videoEndImage.url" class="slot-preview-img" />
+              <span class="slot-tag">结束帧</span>
+              <button type="button" class="slot-clear-btn" @click.stop="videoEndImage = null">×</button>
+            </template>
+            <template v-else>
+              <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8">
+                <rect x="3" y="3" width="18" height="18" rx="2" />
+                <circle cx="8.5" cy="8.5" r="1.5" />
+                <polyline points="21 15 16 10 5 21" />
+              </svg>
+              <span>结束帧 (可选)</span>
+            </template>
+          </div>
+        </div>
+      </div>
+
+      <!-- 参考素材快速选择面板 (支持画布当前选中图 / 本地上传 / 预设风格 / 我的资产) -->
+      <transition name="pop-fade">
+        <div v-if="refPickerVisible" class="ref-picker-drawer-card" @click.stop>
+          <div class="picker-top-bar">
+            <span class="picker-title">
+              {{ refPickerTargetMode === 'style' ? '选择风格参考' : refPickerTargetMode === 'character' ? '选择角色参考' : '添加参考素材' }}
+            </span>
+            <button type="button" class="picker-close" @click="refPickerVisible = false">×</button>
+          </div>
+
+          <div class="picker-quick-btns">
+            <button
+              type="button"
+              class="picker-action-btn primary"
+              :disabled="uploadingRefFile"
+              @click="refFileInputRef?.click()"
+            >
+              <span>{{ uploadingRefFile ? '上传中...' : '+ 本地上传图片' }}</span>
+            </button>
+
+            <button
+              v-if="canvasSelectedImageUrl"
+              type="button"
+              class="picker-action-btn canvas-pick"
+              @click="addReferenceItem({ name: '画布选中图', url: canvasSelectedImageUrl, sourceType: 'REFERENCE' })"
+            >
+              <span>拾取画布选中图</span>
+            </button>
+          </div>
+
+          <!-- 预设风格列表 -->
+          <template v-if="refPickerTargetMode === 'style'">
+            <div class="picker-sub-label">预设视觉风格</div>
+            <div class="picker-thumbs-row">
+              <div
+                v-for="st in PRESET_STYLE_REFS"
+                :key="st.id"
+                class="picker-mini-card"
+                @click="addReferenceItem({ id: st.id, name: st.name, url: st.url, type: 'style', sourceType: 'REFERENCE' })"
+              >
+                <img :src="st.url" :alt="st.name" />
+                <span>{{ st.name }}</span>
+              </div>
+            </div>
+          </template>
+
+          <!-- 我的最近图片资产 -->
+          <div class="picker-sub-label">从我的资产选择</div>
+          <div v-if="loadingPickerAssets" class="picker-empty-tip">正在加载最近资产...</div>
+          <div v-else-if="recentPickerAssets.length > 0" class="picker-thumbs-row">
+            <div
+              v-for="asset in recentPickerAssets"
+              :key="asset.id"
+              class="picker-mini-card"
+              @click="addReferenceItem({ id: String(asset.id), name: asset.title, url: asset.url || '', assetId: String(asset.id) })"
+            >
+              <img :src="asset.previewUrl || asset.url" :alt="asset.title" />
+              <span>{{ asset.title }}</span>
+            </div>
+          </div>
+          <div v-else class="picker-empty-tip">暂无历史图片，请点击上方「本地上传图片」</div>
+        </div>
+      </transition>
+
+      <!-- ==================== 提示词描述 (Prompt Box - 1:1 还原图二) ==================== -->
+      <div class="control-block">
+        <label class="block-label">提示词描述</label>
+        <div class="prompt-card-box">
+          <textarea
+            v-model="promptText"
+            rows="4"
+            class="prompt-textarea"
+            :placeholder="createMode === 'image' ? '描述您想要生成的画面—可输入 @ 引入参考图' : '描述您想要生成的视频画面与镜头运动...'"
+          ></textarea>
+
+          <div class="prompt-bottom-toolbar">
+            <!-- 左侧 AI 提示词增强开关 -->
+            <div
+              class="ai-enhance-switch"
+              @click="createMode === 'image' ? (isAiPromptOn = !isAiPromptOn) : (videoMotionOn = !videoMotionOn)"
+            >
+              <span
+                class="switch-track"
+                :class="{ 'is-on': createMode === 'image' ? isAiPromptOn : videoMotionOn }"
+              >
+                <span class="switch-thumb"></span>
+              </span>
+              <span class="switch-label">AI 提示词增强</span>
+            </div>
+
+            <!-- 右侧 4 个辅助图标 (Seed / Tag / Expand / Clear) -->
+            <div class="prompt-right-icons" @click.stop>
+              <!-- 1. 固定种子 -->
+              <div class="icon-pop-anchor">
+                <button
+                  type="button"
+                  class="tool-icon-btn"
+                  :class="{ active: isFixedSeedOn || showSeedPopover }"
+                  title="固定随机种子"
+                  @click="showSeedPopover = !showSeedPopover; showTagPopover = false"
+                >
+                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M12 22v-8" />
+                    <path d="M12 14c-4 0-7-3-7-7 0 0 3 0 7 3" />
+                    <path d="M12 14c4 0 7-3 7-7 0 0-3 0-7 3" />
+                  </svg>
+                </button>
+                <div v-if="showSeedPopover" class="mini-floating-popover">
+                  <div class="pop-row-between">
+                    <span>固定随机种子 (Seed)</span>
+                    <input v-model="isFixedSeedOn" type="checkbox" />
+                  </div>
+                  <p class="pop-muted-tip">开启后保持多次生成构图一致</p>
+                </div>
+              </div>
+
+              <!-- 2. 风格标签词 -->
+              <div class="icon-pop-anchor">
+                <button
+                  type="button"
+                  class="tool-icon-btn"
+                  :class="{ active: showTagPopover }"
+                  title="插入常用修饰词"
+                  @click="showTagPopover = !showTagPopover; showSeedPopover = false"
+                >
+                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" />
+                    <line x1="7" y1="7" x2="7.01" y2="7" />
+                  </svg>
+                </button>
+                <div v-if="showTagPopover" class="mini-floating-popover tags-pop">
+                  <div class="pop-card-title">点击追加风格词</div>
+                  <div class="quick-tags-wrap">
+                    <span
+                      v-for="t in QUICK_STYLE_TAGS"
+                      :key="t"
+                      class="quick-tag-chip"
+                      @click="appendQuickTag(t)"
+                    >
+                      + {{ t }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 3. 展开全屏编辑 -->
+              <button
+                type="button"
+                class="tool-icon-btn"
+                title="展开编辑提示词"
+                @click="openExpandPromptModal"
+              >
+                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="15 3 21 3 21 9" />
+                  <polyline points="9 21 3 21 3 15" />
+                  <line x1="21" y1="3" x2="14" y2="10" />
+                  <line x1="3" y1="21" x2="10" y2="14" />
+                </svg>
+              </button>
+
+              <!-- 4. 清空提示词 -->
+              <button
+                type="button"
+                class="tool-icon-btn"
+                title="清空提示词"
+                @click="promptText = ''"
+              >
+                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.9" 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>
+          </div>
+        </div>
+      </div>
+
+      <!-- ==================== 参数控制胶囊行 (- 1 +, 1:1, 1K · High) ==================== -->
+      <div v-if="createMode === 'image'" class="params-pills-row" @click.stop>
+        <!-- 数量步进器 -->
+        <div class="stepper-pill">
+          <button type="button" class="step-btn" @click="batchCount = Math.max(1, batchCount - 1)">-</button>
+          <span class="step-num">{{ batchCount }}</span>
+          <button type="button" class="step-btn" @click="batchCount = Math.min(4, batchCount + 1)">+</button>
+        </div>
+
+        <!-- 画幅比例选择胶囊 -->
+        <div class="param-pill-anchor">
+          <button
+            type="button"
+            class="param-select-pill"
+            @click="showRatioDropdown = !showRatioDropdown; showQualityDropdown = false"
+          >
+            <span class="ratio-rect-icon"></span>
+            <span>{{ aspectRatio }}</span>
+          </button>
+          <div v-if="showRatioDropdown" class="pill-dropdown-menu">
+            <div
+              v-for="r in (['1:1', '16:9', '9:16', '4:3', '3:4'] as const)"
+              :key="r"
+              class="pill-menu-item"
+              :class="{ active: aspectRatio === r }"
+              @click="aspectRatio = r; showRatioDropdown = false"
+            >
+              <span>{{ r }}</span>
+              <span class="muted-sub">{{ mapRatioToSize(r, qualitySpec) }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 清晰度规格胶囊 -->
+        <div class="param-pill-anchor">
+          <button
+            type="button"
+            class="param-select-pill"
+            @click="showQualityDropdown = !showQualityDropdown; showRatioDropdown = false"
+          >
+            <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="3" y="4" width="18" height="16" rx="2" />
+              <path d="M16 2v4M8 2v4" />
+            </svg>
+            <span>{{ qualitySpec }}</span>
+          </button>
+          <div v-if="showQualityDropdown" class="pill-dropdown-menu right">
+            <div
+              v-for="q in (['1K · High', '1K · Fast', '2K · HD'] as const)"
+              :key="q"
+              class="pill-menu-item"
+              :class="{ active: qualitySpec === q }"
+              @click="qualitySpec = q; showQualityDropdown = false"
+            >
+              <span>{{ q }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 视频模式参数胶囊行 -->
+      <div v-else class="params-pills-row" @click.stop>
+        <div class="param-pill-anchor">
+          <button
+            type="button"
+            class="param-select-pill"
+            @click="showVideoDurationDropdown = !showVideoDurationDropdown; showVideoRatioDropdown = false"
+          >
+            <span>⏱</span>
+            <span>{{ videoDuration }}</span>
+          </button>
+          <div v-if="showVideoDurationDropdown" class="pill-dropdown-menu">
+            <div
+              v-for="d in (['5-6&quot;', '10&quot;'] as const)"
+              :key="d"
+              class="pill-menu-item"
+              :class="{ active: videoDuration === d }"
+              @click="videoDuration = d; showVideoDurationDropdown = false"
+            >
+              <span>时长 {{ d }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="param-pill-anchor">
+          <button
+            type="button"
+            class="param-select-pill"
+            @click="showVideoRatioDropdown = !showVideoRatioDropdown; showVideoDurationDropdown = false"
+          >
+            <span class="ratio-rect-icon wide"></span>
+            <span>{{ videoRatio }}</span>
+          </button>
+          <div v-if="showVideoRatioDropdown" class="pill-dropdown-menu">
+            <div
+              v-for="vr in (['16:9', '9:16', '1:1'] as const)"
+              :key="vr"
+              class="pill-menu-item"
+              :class="{ active: videoRatio === vr }"
+              @click="videoRatio = vr; showVideoRatioDropdown = false"
+            >
+              <span>{{ vr }}</span>
+            </div>
+          </div>
+        </div>
+
+        <button
+          type="button"
+          class="param-select-pill"
+          :class="{ 'is-active-blue': videoMotionOn }"
+          @click="videoMotionOn = !videoMotionOn"
+        >
+          <span>⚡</span>
+          <span>{{ videoMotionOn ? '运镜 ON' : '运镜 OFF' }}</span>
+        </button>
+      </div>
+
+      <!-- ==================== 开始生成主按钮 (1:1 还原图二蓝紫渐变按钮) ==================== -->
+      <div class="generate-cta-wrap">
+        <button
+          type="button"
+          class="start-generate-btn"
+          :disabled="isGenerating"
+          @click="handleGenerate"
+        >
+          <span class="cta-text">
+            {{ isGenerating ? '正在生成中...' : '开始生成' }}
+          </span>
+          <span v-if="isGenerating" class="cta-spinner"></span>
+          <svg v-else class="sparkle-icon" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+            <path d="M19 2.5C19 4.7 20.3 6.5 22.5 6.5C20.3 6.5 19 8.3 19 10.5C19 8.3 17.7 6.5 15.5 6.5C17.7 6.5 19 4.7 19 2.5Z" />
+            <path d="M11.5 12C11.5 13.3 12.7 14.5 14 14.5C12.7 14.5 11.5 15.7 11.5 17C11.5 15.7 10.3 14.5 9 14.5C10.3 14.5 11.5 13.3 11.5 12Z" />
+          </svg>
+        </button>
+      </div>
+
+      <!-- ==================== 本次生成结果内嵌预览列表 (一键插入画布) ==================== -->
+      <div v-if="generatedResults.length > 0" class="generated-results-section">
+        <div class="results-header">
+          <span class="results-title">本次生成结果 ({{ generatedResults.length }})</span>
+          <span class="results-sub">已同步至「我的素材」</span>
+        </div>
+
+        <div class="results-grid">
+          <div
+            v-for="resItem in generatedResults"
+            :key="resItem.id"
+            class="result-card"
+            @click="emit('select', resItem)"
+          >
+            <video
+              v-if="resItem.type === 'video'"
+              :src="resItem.url"
+              muted
+              playsinline
+              class="result-media"
+              @mouseenter="($event.target as HTMLVideoElement)?.play?.()"
+              @mouseleave="($event.target as HTMLVideoElement)?.pause?.()"
+            />
+            <img
+              v-else
+              :src="resItem.url"
+              :alt="resItem.title"
+              class="result-media"
+            />
+
+            <span v-if="resItem.type === 'video'" class="video-badge">
+              <el-icon><VideoPlay /></el-icon>
+            </span>
+
+            <div class="result-overlay">
+              <button
+                type="button"
+                class="res-act-btn insert"
+                @click.stop="emit('select', resItem)"
+              >
+                <el-icon><Plus /></el-icon>
+                <span>{{ hasActivePlaceholderTarget ? '插入占位符' : '插入画布' }}</span>
+              </button>
+              <button
+                type="button"
+                class="res-act-btn preview"
+                title="大图预览"
+                @click.stop="emit('preview', resItem, generatedResults, $event)"
+              >
+                <el-icon><View /></el-icon>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 提示词展开编辑弹窗 -->
+    <el-dialog
+      v-model="showExpandModal"
+      title="编辑提示词描述"
+      width="460px"
+      append-to-body
+      align-center
+    >
+      <el-input
+        v-model="expandedPromptDraft"
+        type="textarea"
+        :rows="6"
+        placeholder="详细描述画面主体、光影氛围、构图风格与细节..."
+      />
+      <template #footer>
+        <el-button size="small" @click="showExpandModal = false">取消</el-button>
+        <el-button type="primary" size="small" @click="confirmExpandedPrompt">应用提示词</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.create-material-panel {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: #ffffff;
+}
+
+.create-sub-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px 8px;
+  border-bottom: 1px solid #f1f5f9;
+  flex-shrink: 0;
+}
+
+.mode-segmented-box {
+  display: inline-flex;
+  background: #f1f5f9;
+  padding: 2px;
+  border-radius: 7px;
+}
+
+.mode-seg-btn {
+  border: none;
+  background: transparent;
+  padding: 4px 10px;
+  border-radius: 5px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #64748b;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover:not(.is-disabled) {
+    color: #0f172a;
+  }
+
+  &.active {
+    background: #ffffff;
+    color: #0f172a;
+    font-weight: 600;
+    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+  }
+
+  &.is-disabled,
+  &:disabled {
+    color: #94a3b8;
+    cursor: not-allowed;
+    opacity: 0.65;
+  }
+}
+
+.template-btn-wrap {
+  position: relative;
+}
+
+.templates-pill-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 26px;
+  padding: 0 10px;
+  border-radius: 13px;
+  border: 1px solid #e2e8f0;
+  background: #ffffff;
+  color: #475569;
+  font-size: 11.5px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover {
+    border-color: #93c5fd;
+    color: #1e6fff;
+  }
+}
+
+.templates-popover-card {
+  position: absolute;
+  top: 30px;
+  right: 0;
+  width: 248px;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
+  padding: 8px;
+  z-index: 45;
+}
+
+.pop-card-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: #94a3b8;
+  padding: 2px 4px 6px;
+}
+
+.tpl-item-row {
+  padding: 6px 8px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.12s ease;
+
+  &:hover {
+    background: #eff6ff;
+  }
+
+  .tpl-name {
+    font-size: 12px;
+    font-weight: 600;
+    color: #1e293b;
+  }
+
+  .tpl-desc {
+    font-size: 11px;
+    color: #64748b;
+    margin-top: 2px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+
+.create-scroll-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 12px 14px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 2px;
+  }
+}
+
+.control-block {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.block-header-line {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.block-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: #94a3b8;
+}
+
+.ref-counter {
+  font-size: 12px;
+  color: #64748b;
+}
+
+.model-select-wrap {
+  position: relative;
+}
+
+.model-dropdown-trigger {
+  width: 100%;
+  height: 38px;
+  padding: 0 12px;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover {
+    border-color: #cbd5e1;
+    background: #f1f5f9;
+  }
+
+  .model-left-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .model-brand-cube {
+    width: 20px;
+    height: 20px;
+    border-radius: 5px;
+    background: #eff6ff;
+    color: #2563eb;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    &.is-wanx {
+      background: #f5f3ff;
+      color: #7c3aed;
+    }
+
+    &.is-video {
+      background: #ecfdf5;
+      color: #059669;
+    }
+  }
+
+  .model-name-text {
+    font-size: 13px;
+    font-weight: 500;
+    color: #0f172a;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .chevron-icon {
+    color: #94a3b8;
+    flex-shrink: 0;
+  }
+}
+
+.model-dropdown-menu {
+  position: absolute;
+  top: 42px;
+  left: 0;
+  right: 0;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
+  padding: 6px;
+  z-index: 40;
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.model-option-item {
+  padding: 7px 8px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.12s ease;
+
+  &:hover {
+    background: #f8fafc;
+  }
+
+  &.active {
+    background: #eff6ff;
+
+    .opt-code {
+      color: #1e6fff;
+      font-weight: 600;
+    }
+  }
+
+  .opt-top-line {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 6px;
+  }
+
+  .opt-code {
+    font-size: 12.5px;
+    font-weight: 500;
+    color: #1e293b;
+  }
+
+  .opt-tag {
+    font-size: 10px;
+    padding: 1px 5px;
+    border-radius: 4px;
+    background: #eff6ff;
+    color: #2563eb;
+
+    &.video {
+      background: #ecfdf5;
+      color: #059669;
+    }
+  }
+
+  .opt-sub-desc {
+    font-size: 11px;
+    color: #64748b;
+    margin-top: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+/* 参考素材方块网格 (1:1 还原图二) */
+.ref-tiles-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+
+.ref-action-tile {
+  height: 62px;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+  color: #475569;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover {
+    border-color: #93c5fd;
+    background: #eff6ff;
+    color: #1e6fff;
+  }
+
+  .tile-label {
+    font-size: 11.5px;
+    font-weight: 500;
+  }
+}
+
+.ref-added-thumb {
+  position: relative;
+  height: 62px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #cbd5e1;
+  cursor: pointer;
+
+  .thumb-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .thumb-tag {
+    position: absolute;
+    left: 4px;
+    bottom: 3px;
+    padding: 0 4px;
+    border-radius: 3px;
+    background: rgba(15, 23, 42, 0.72);
+    color: #ffffff;
+    font-size: 10px;
+  }
+
+  .thumb-remove-btn {
+    position: absolute;
+    top: 3px;
+    right: 3px;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    border: none;
+    background: rgba(15, 23, 42, 0.7);
+    color: #ffffff;
+    font-size: 12px;
+    line-height: 1;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.video-frames-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.video-frame-slot {
+  position: relative;
+  height: 62px;
+  border-radius: 8px;
+  border: 1px dashed #cbd5e1;
+  background: #f8fafc;
+  color: #64748b;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  cursor: pointer;
+  overflow: hidden;
+
+  &:hover {
+    border-color: #3b82f6;
+    color: #1e6fff;
+  }
+
+  .slot-preview-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .slot-tag {
+    position: absolute;
+    left: 4px;
+    bottom: 4px;
+    background: rgba(15, 23, 42, 0.7);
+    color: #ffffff;
+    font-size: 10px;
+    padding: 1px 5px;
+    border-radius: 3px;
+  }
+
+  .slot-clear-btn {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    border: none;
+    background: rgba(15, 23, 42, 0.7);
+    color: #ffffff;
+    cursor: pointer;
+  }
+}
+
+/* 参考图选择浮层卡片 */
+.ref-picker-drawer-card {
+  background: #f8fafc;
+  border: 1px solid #cbd5e1;
+  border-radius: 10px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.picker-top-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .picker-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: #1e293b;
+  }
+
+  .picker-close {
+    border: none;
+    background: transparent;
+    font-size: 16px;
+    color: #64748b;
+    cursor: pointer;
+  }
+}
+
+.picker-quick-btns {
+  display: flex;
+  gap: 6px;
+}
+
+.picker-action-btn {
+  flex: 1;
+  height: 28px;
+  border-radius: 6px;
+  border: 1px solid #cbd5e1;
+  background: #ffffff;
+  color: #334155;
+  font-size: 11.5px;
+  font-weight: 500;
+  cursor: pointer;
+
+  &.primary {
+    background: #1e6fff;
+    border-color: #1e6fff;
+    color: #ffffff;
+  }
+
+  &.canvas-pick {
+    background: #eff6ff;
+    border-color: #93c5fd;
+    color: #1d4ed8;
+  }
+}
+
+.picker-sub-label {
+  font-size: 11px;
+  color: #64748b;
+  font-weight: 500;
+}
+
+.picker-thumbs-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px;
+}
+
+.picker-mini-card {
+  cursor: pointer;
+  border-radius: 6px;
+  overflow: hidden;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  text-align: center;
+
+  img {
+    width: 100%;
+    height: 44px;
+    object-fit: cover;
+    display: block;
+  }
+
+  span {
+    display: block;
+    font-size: 10px;
+    color: #475569;
+    padding: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &:hover {
+    border-color: #1e6fff;
+  }
+}
+
+.picker-empty-tip {
+  font-size: 11px;
+  color: #94a3b8;
+  text-align: center;
+  padding: 6px 0;
+}
+
+/* 提示词描述框 (1:1 还原图二) */
+.prompt-card-box {
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  background: #ffffff;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  transition: border-color 0.15s ease;
+
+  &:focus-within {
+    border-color: #3b82f6;
+  }
+}
+
+.prompt-textarea {
+  width: 100%;
+  border: none;
+  outline: none;
+  resize: none;
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: #1e293b;
+  background: transparent;
+  font-family: inherit;
+
+  &::placeholder {
+    color: #94a3b8;
+  }
+}
+
+.prompt-bottom-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 8px;
+  border-top: 1px solid #f1f5f9;
+}
+
+.ai-enhance-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+
+  .switch-track {
+    width: 30px;
+    height: 17px;
+    border-radius: 9px;
+    background: #94a3b8;
+    padding: 2px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    transition: background 0.2s ease;
+
+    &.is-on {
+      background: #3b5bdb;
+      justify-content: flex-end;
+    }
+  }
+
+  .switch-thumb {
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: #ffffff;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  }
+
+  .switch-label {
+    font-size: 12px;
+    font-weight: 600;
+    color: #1e293b;
+  }
+}
+
+.prompt-right-icons {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.icon-pop-anchor {
+  position: relative;
+}
+
+.tool-icon-btn {
+  width: 24px;
+  height: 24px;
+  border-radius: 5px;
+  border: none;
+  background: transparent;
+  color: #64748b;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0;
+
+  &:hover,
+  &.active {
+    background: #f1f5f9;
+    color: #0f172a;
+  }
+}
+
+.mini-floating-popover {
+  position: absolute;
+  bottom: 30px;
+  right: 0;
+  width: 200px;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
+  padding: 8px;
+  z-index: 45;
+
+  &.tags-pop {
+    width: 220px;
+  }
+
+  .pop-row-between {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 12px;
+    font-weight: 600;
+    color: #1e293b;
+  }
+
+  .pop-muted-tip {
+    font-size: 11px;
+    color: #64748b;
+    margin: 4px 0 0;
+  }
+}
+
+.quick-tags-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.quick-tag-chip {
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: #f1f5f9;
+  color: #334155;
+  cursor: pointer;
+
+  &:hover {
+    background: #eff6ff;
+    color: #1e6fff;
+  }
+}
+
+/* 参数控制胶囊行 (- 1 +, 1:1, 1K · High) */
+.params-pills-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.stepper-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 30px;
+  width: 68px;
+  padding: 0 8px;
+  border-radius: 15px;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+  box-sizing: border-box;
+
+  .step-btn {
+    border: none;
+    background: transparent;
+    color: #64748b;
+    font-size: 13px;
+    cursor: pointer;
+    padding: 0 2px;
+
+    &:hover {
+      color: #0f172a;
+    }
+  }
+
+  .step-num {
+    font-size: 12.5px;
+    font-weight: 600;
+    color: #1e293b;
+  }
+}
+
+.param-pill-anchor {
+  position: relative;
+}
+
+.param-select-pill {
+  height: 30px;
+  padding: 0 11px;
+  border-radius: 15px;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+  color: #1e293b;
+  font-size: 12px;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover {
+    border-color: #cbd5e1;
+    background: #f1f5f9;
+  }
+
+  &.is-active-blue {
+    border-color: #bfdbfe;
+    background: #eff6ff;
+    color: #1d4ed8;
+  }
+
+  .ratio-rect-icon {
+    width: 11px;
+    height: 11px;
+    border: 1.6px solid #475569;
+    border-radius: 2px;
+
+    &.wide {
+      width: 13px;
+      height: 9px;
+    }
+  }
+}
+
+.pill-dropdown-menu {
+  position: absolute;
+  bottom: 34px;
+  left: 0;
+  min-width: 132px;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
+  padding: 4px;
+  z-index: 45;
+
+  &.right {
+    left: auto;
+    right: 0;
+  }
+}
+
+.pill-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 5px 8px;
+  border-radius: 5px;
+  font-size: 12px;
+  color: #334155;
+  cursor: pointer;
+
+  &:hover {
+    background: #f1f5f9;
+  }
+
+  &.active {
+    background: #eff6ff;
+    color: #1e6fff;
+    font-weight: 600;
+  }
+
+  .muted-sub {
+    font-size: 10.5px;
+    color: #94a3b8;
+  }
+}
+
+/* 开始生成按钮 (1:1 还原图二) */
+.generate-cta-wrap {
+  padding-top: 2px;
+}
+
+.start-generate-btn {
+  width: 100%;
+  height: 40px;
+  border-radius: 10px;
+  border: none;
+  background: linear-gradient(90deg, #3b5bdb 0%, #4c6ef5 100%);
+  color: #ffffff;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 13.5px;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(59, 91, 219, 0.25);
+  transition: all 0.2s ease;
+
+  &:hover:not(:disabled) {
+    background: linear-gradient(90deg, #364fc7 0%, #4263eb 100%);
+    transform: translateY(-1px);
+  }
+
+  &:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+
+  .cta-spinner {
+    width: 15px;
+    height: 15px;
+    border: 2px solid rgba(255, 255, 255, 0.35);
+    border-top-color: #ffffff;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+}
+
+/* 生成结果列表 */
+.generated-results-section {
+  border-top: 1px solid #f1f5f9;
+  padding-top: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.results-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .results-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: #1e293b;
+  }
+
+  .results-sub {
+    font-size: 11px;
+    color: #10b981;
+  }
+}
+
+.results-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.result-card {
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #f1f5f9;
+  aspect-ratio: 1 / 1;
+  cursor: pointer;
+
+  .result-media {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .video-badge {
+    position: absolute;
+    left: 6px;
+    bottom: 6px;
+    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;
+  }
+
+  .result-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(15, 23, 42, 0.45);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+  }
+
+  &:hover .result-overlay {
+    opacity: 1;
+  }
+}
+
+.res-act-btn {
+  height: 26px;
+  border-radius: 13px;
+  border: none;
+  font-size: 11px;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  cursor: pointer;
+
+  &.insert {
+    background: #1e6fff;
+    color: #ffffff;
+    padding: 0 9px;
+  }
+
+  &.preview {
+    width: 26px;
+    background: rgba(255, 255, 255, 0.9);
+    color: #1e293b;
+  }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+</style>