super/crawler-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

处理修复BUG

Browse Source
This commit is contained in:
super
2026-06-14 16:48:20 +08:00
parent 8672668c33
commit ac19637ad6
18 changed files with 908 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-vue/src/pages/image-video/ImageVideoPage.vue
+174 -2
View File
@@ -25,6 +25,19 @@
<div class="toast" :class="{ show: Boolean(statusText), error: statusType === 'error' }">
{{ statusText }}
</div>
<section v-if="launching || launchProgress.stage" class="launch-progress" :class="{ error: launchProgress.stage === 'failed' }">
<div class="launch-progress__head">
<span>{{ launchProgress.message || '正在准备数字人程序...' }}</span>
<strong>{{ launchProgress.percent }}%</strong>
</div>
<div class="launch-progress__track">
<div class="launch-progress__bar" :style="{ width: `${launchProgress.percent}%` }"></div>
</div>
<div v-if="launchProgress.total > 0" class="launch-progress__meta">
{{ formatBytes(launchProgress.downloaded) }} / {{ formatBytes(launchProgress.total) }}
</div>
</section>
</div>
<PageShell v-else theme="dark">
@@ -50,7 +63,7 @@
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onBeforeUnmount, ref } from 'vue'
import PageShell from '@/components/layout/PageShell.vue'
import BrandTopBar from '@/pages/brand/components/BrandTopBar.vue'
@@ -63,7 +76,15 @@ const currentView = ref<ViewMode>('menu')
const launching = ref(false)
const statusText = ref('')
const statusType = ref<'normal' | 'error'>('normal')
const launchProgress = ref({
stage: '',
message: '',
percent: 0,
downloaded: 0,
total: 0,
})
let statusTimer: number | undefined
let launchProgressTimer: number | undefined
function showStatus(message: string, type: 'normal' | 'error' = 'normal') {
statusText.value = message
@@ -84,6 +105,59 @@ function openDeliveryWorkspace() {
currentView.value = 'delivery'
}
function formatBytes(value: number) {
const size = Number(value || 0)
if (!Number.isFinite(size) || size <= 0) return '未知大小'
if (size < 1024) return `${size} B`
if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`
if (size < 1024 * 1024 * 1024) return `${(size / 1024 / 1024).toFixed(1)} MB`
return `${(size / 1024 / 1024 / 1024).toFixed(2)} GB`
}
function resetLaunchProgress() {
launchProgress.value = {
stage: '',
message: '',
percent: 0,
downloaded: 0,
total: 0,
}
}
function handleLaunchProgress(event: Event) {
const detail = (event as CustomEvent<{
stage?: string
message?: string
percent?: number
downloaded?: number
total?: number
}>).detail
if (!detail) return
launchProgress.value = {
stage: detail.stage || '',
message: detail.message || '',
percent: Math.max(0, Math.min(100, Math.round(Number(detail.percent || 0)))),
downloaded: Number(detail.downloaded || 0),
total: Number(detail.total || 0),
}
if (launchProgressTimer) {
window.clearTimeout(launchProgressTimer)
}
if (detail.stage === 'success') {
launchProgressTimer = window.setTimeout(resetLaunchProgress, 1800)
}
}
if (typeof window !== 'undefined') {
window.addEventListener('pywebview-yaoayanui-progress', handleLaunchProgress)
}
onBeforeUnmount(() => {
if (statusTimer) window.clearTimeout(statusTimer)
if (launchProgressTimer) window.clearTimeout(launchProgressTimer)
window.removeEventListener('pywebview-yaoayanui-progress', handleLaunchProgress)
})
async function launchDesktop() {
const api = getPywebviewApi()
if (!api?.launch_yaoayanui) {
@@ -92,15 +166,45 @@ async function launchDesktop() {
}
launching.value = true
launchProgress.value = {
stage: 'checking',
message: '正在检查本地数字人程序...',
percent: 0,
downloaded: 0,
total: 0,
}
try {
const result = await api.launch_yaoayanui()
if (result?.success) {
showStatus('已发送启动请求')
if (!launchProgress.value.stage || launchProgress.value.stage === 'checking') {
launchProgress.value = {
stage: 'success',
message: '数字人程序已启动',
percent: 100,
downloaded: 0,
total: 0,
}
launchProgressTimer = window.setTimeout(resetLaunchProgress, 1800)
}
return
}
launchProgress.value = {
...launchProgress.value,
stage: 'failed',
message: result?.error || '启动失败',
percent: 0,
}
showStatus(result?.error || '启动失败', 'error')
} catch (error) {
showStatus(error instanceof Error ? error.message : String(error), 'error')
const message = error instanceof Error ? error.message : String(error)
launchProgress.value = {
...launchProgress.value,
stage: 'failed',
message,
percent: 0,
}
showStatus(message, 'error')
} finally {
launching.value = false
}
@@ -212,6 +316,74 @@ async function launchDesktop() {
background: rgba(176, 42, 55, 0.92);
}
.launch-progress {
position: fixed;
left: 50%;
bottom: 96px;
width: min(520px, calc(100vw - 48px));
padding: 14px 16px;
border: 1px solid rgba(102, 126, 234, 0.28);
border-radius: 8px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 10px 28px rgba(20, 32, 55, 0.16);
transform: translateX(-50%);
}
.launch-progress.error {
border-color: rgba(176, 42, 55, 0.34);
}
.launch-progress__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
color: #2d3748;
font-size: 14px;
}
.launch-progress__head span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.launch-progress__head strong {
color: #4456c9;
font-size: 13px;
}
.launch-progress.error .launch-progress__head strong {
color: #b02a37;
}
.launch-progress__track {
height: 8px;
margin-top: 10px;
overflow: hidden;
border-radius: 999px;
background: #e6ebf5;
}
.launch-progress__bar {
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #667eea, #52c2ff);
transition: width 0.2s ease;
}
.launch-progress.error .launch-progress__bar {
background: #b02a37;
}
.launch-progress__meta {
margin-top: 7px;
color: #68758a;
font-size: 12px;
text-align: right;
}
.delivery-page {
min-height: 100vh;
background: #0f0f0f;
frontend-vue/src/pages/image-video/components/DeliveryVideoWorkspace.vue
+235 -198
View File
@@ -23,7 +23,10 @@
:file-name="currentWorkspace.primaryAsset.fileName"
:preview-url="currentWorkspace.primaryAsset.previewUrl"
:preview-kind="currentWorkspace.primaryAsset.previewKind"
:source-url="currentWorkspace.primaryAsset.sourceUrl"
allow-url
@select="(file) => setAsset(activeTab, 'primaryAsset', file)"
@url-change="(url) => setAssetUrl(activeTab, 'primaryAsset', url, currentTabCopy.primaryAssetAccept)"
@clear="clearAsset(activeTab, 'primaryAsset')"
/>
@@ -36,7 +39,10 @@
:file-name="currentWorkspace.secondaryAsset.fileName"
:preview-url="currentWorkspace.secondaryAsset.previewUrl"
:preview-kind="currentWorkspace.secondaryAsset.previewKind"
:source-url="currentWorkspace.secondaryAsset.sourceUrl"
allow-url
@select="(file) => setAsset(activeTab, 'secondaryAsset', file)"
@url-change="(url) => setAssetUrl(activeTab, 'secondaryAsset', url, currentTabCopy.secondaryAssetAccept)"
@clear="clearAsset(activeTab, 'secondaryAsset')"
/>
@@ -51,9 +57,36 @@
<AiSectionCard
step="02"
title="标题标签关键词"
description="类目和卖点一起配置，方便后续拆投放版本。"
class="delivery-card delivery-card--step-02"
>
<div class="delivery-field">
<span class="delivery-field__label">细分类目</span>
<AiChoicePills
v-model="currentWorkspace.categories"
:options="categoryOptions"
multiple
/>
</div>
<div class="delivery-field">
<span class="delivery-field__label">核心卖点</span>
<el-input
v-model="currentWorkspace.productFocus"
type="textarea"
:rows="2"
resize="none"
placeholder="例如：上脚显瘦、脚感轻、百搭、直播间主推款。"
/>
</div>
</AiSectionCard>
<AiSectionCard
step="03"
title="音视频生成"
description="先锁定投放规格，再决定整体风格、时长和画面清晰度。"
class="delivery-card delivery-card--step-02"
class="delivery-card delivery-card--step-03"
>
<div class="delivery-form-grid delivery-form-grid--two">
<div class="delivery-field">
@@ -88,10 +121,174 @@
</AiSectionCard>
<AiSectionCard
step="03"
step="04"
title="人脸和口播"
description="控制性别、人脸图、语气和语音来源。"
class="delivery-card delivery-card--step-04"
>
<div class="delivery-form-grid delivery-form-grid--two">
<div class="delivery-field">
<span class="delivery-field__label">性别</span>
<AiChoicePills v-model="currentWorkspace.gender" :options="genderOptions" />
</div>
<div class="delivery-field">
<span class="delivery-field__label">语气</span>
<AiChoicePills v-model="currentWorkspace.voiceTone" :options="voiceToneOptions" />
</div>
</div>
<div class="delivery-field">
<span class="delivery-field__label">语音来源</span>
<AiChoicePills
v-model="currentWorkspace.speechSource"
:options="speechSourceOptions"
/>
</div>
<AiAssetDropzone
title="模特图 / 人脸图"
description="上传清晰正脸图，适合用于数字人口播。"
placeholder="上传模特图"
helper="建议 1080px 以上，单人正面"
accept="image/*"
:file-name="currentWorkspace.avatarAsset.fileName"
:preview-url="currentWorkspace.avatarAsset.previewUrl"
:preview-kind="currentWorkspace.avatarAsset.previewKind"
:source-url="currentWorkspace.avatarAsset.sourceUrl"
allow-url
@select="(file) => setAsset(activeTab, 'avatarAsset', file)"
@url-change="(url) => setAssetUrl(activeTab, 'avatarAsset', url, 'image/*')"
@clear="clearAsset(activeTab, 'avatarAsset')"
/>
</AiSectionCard>
<AiSectionCard
step="05"
title="话术和音乐"
description="支持直接口播、原话术微调，或者转成纯音乐版本。"
class="delivery-card delivery-card--step-05"
>
<div class="delivery-field">
<span class="delivery-field__label">话术模式</span>
<AiChoicePills v-model="currentWorkspace.scriptMode" :options="scriptModeOptions" />
</div>
<div class="delivery-form-grid delivery-form-grid--two">
<div class="delivery-field">
<span class="delivery-field__label">话术内容</span>
<el-input
v-model="currentWorkspace.scriptText"
type="textarea"
:rows="4"
resize="none"
placeholder="输入要口播的话术，或粘贴需要整体微调的原始话术。"
/>
</div>
<div class="delivery-field">
<span class="delivery-field__label">微调约束</span>
<el-input
v-model="currentWorkspace.scriptRules"
type="textarea"
:rows="4"
resize="none"
placeholder="例如：保留原来的成交语气，不改卖点顺序，强调防滑、透气、现货。"
/>
</div>
</div>
<AiAssetDropzone
title="纯音乐素材"
description="需要做纯音乐版本时可上传，也可以后续从原视频中抽取。"
placeholder="上传背景音乐"
helper="支持 MP3 / WAV"
accept="audio/*"
:file-name="currentWorkspace.musicAsset.fileName"
:preview-url="currentWorkspace.musicAsset.previewUrl"
:preview-kind="currentWorkspace.musicAsset.previewKind"
:source-url="currentWorkspace.musicAsset.sourceUrl"
allow-url
@select="(file) => setAsset(activeTab, 'musicAsset', file)"
@url-change="(url) => setAssetUrl(activeTab, 'musicAsset', url, 'audio/*')"
@clear="clearAsset(activeTab, 'musicAsset')"
/>
</AiSectionCard>
<AiSectionCard
step="06"
title="场景和镜头"
description="支持用提示词微调，也支持上传场景图直接替换原场景。"
class="delivery-card delivery-card--step-06"
>
<div class="delivery-field">
<span class="delivery-field__label">场景处理方式</span>
<AiChoicePills v-model="currentWorkspace.sceneMode" :options="sceneModeOptions" />
</div>
<div class="delivery-form-grid delivery-form-grid--two">
<div class="delivery-field">
<span class="delivery-field__label">场景提示词</span>
<el-input
v-model="currentWorkspace.scenePrompt"
type="textarea"
:rows="4"
resize="none"
placeholder="例如：保留产品特写，换成室内直播间，镜头推进更快，背景偏暖光。"
/>
</div>
<AiAssetDropzone
title="场景图替换"
description="有明确参考图时直接上传，优先保证场景结构和光线。"
placeholder="上传场景参考图"
helper="支持 JPG / PNG"
accept="image/*"
:file-name="currentWorkspace.sceneAsset.fileName"
:preview-url="currentWorkspace.sceneAsset.previewUrl"
:preview-kind="currentWorkspace.sceneAsset.previewKind"
:source-url="currentWorkspace.sceneAsset.sourceUrl"
allow-url
@select="(file) => setAsset(activeTab, 'sceneAsset', file)"
@url-change="(url) => setAssetUrl(activeTab, 'sceneAsset', url, 'image/*')"
@clear="clearAsset(activeTab, 'sceneAsset')"
/>
</div>
<div class="delivery-field">
<span class="delivery-field__label">镜头节奏</span>
<el-slider v-model="currentWorkspace.cameraRhythm" :min="1" :max="10" />
</div>
</AiSectionCard>
<AiSectionCard
step="07"
title="执行说明"
description="补充收尾逻辑，例如保留人物动作，只替换场景和话术重点。"
class="delivery-card delivery-card--step-07"
>
<div class="delivery-field">
<span class="delivery-field__label">收口动作</span>
<el-input
v-model="currentWorkspace.cta"
placeholder="例如：结尾引导领券下单，强调今晚库存。"
/>
</div>
<div class="delivery-field">
<span class="delivery-field__label">执行说明</span>
<el-input
v-model="currentWorkspace.notes"
type="textarea"
:rows="3"
resize="none"
placeholder="补充执行说明，例如：第二版转成纯音乐短视频。"
/>
</div>
</AiSectionCard>
<AiSectionCard
step="08"
title="任务和预览"
description="先保存草稿，再开始组装带货视频。"
class="delivery-card delivery-card--preview delivery-card--step-03"
description="所有配置完成后，开始组装带货视频。"
class="delivery-card delivery-card--preview delivery-card--step-08"
>
<div class="task-actions">
<el-button class="delivery-primary-btn" type="primary" @click="startAssembly">
@@ -149,197 +346,6 @@
</div>
</div>
</AiSectionCard>
<AiSectionCard
step="04"
title="场景和镜头"
description="支持用提示词微调，也支持上传场景图直接替换原场景。"
class="delivery-card delivery-card--step-04"
>
<div class="delivery-field">
<span class="delivery-field__label">场景处理方式</span>
<AiChoicePills v-model="currentWorkspace.sceneMode" :options="sceneModeOptions" />
</div>
<div class="delivery-form-grid delivery-form-grid--two">
<div class="delivery-field">
<span class="delivery-field__label">场景提示词</span>
<el-input
v-model="currentWorkspace.scenePrompt"
type="textarea"
:rows="4"
resize="none"
placeholder="例如：保留产品特写，换成室内直播间，镜头推进更快，背景偏暖光。"
/>
</div>
<AiAssetDropzone
title="场景图替换"
description="有明确参考图时直接上传，优先保证场景结构和光线。"
placeholder="上传场景参考图"
helper="支持 JPG / PNG"
accept="image/*"
:file-name="currentWorkspace.sceneAsset.fileName"
:preview-url="currentWorkspace.sceneAsset.previewUrl"
:preview-kind="currentWorkspace.sceneAsset.previewKind"
@select="(file) => setAsset(activeTab, 'sceneAsset', file)"
@clear="clearAsset(activeTab, 'sceneAsset')"
/>
</div>
<div class="delivery-field">
<span class="delivery-field__label">镜头节奏</span>
<el-slider v-model="currentWorkspace.cameraRhythm" :min="1" :max="10" />
</div>
</AiSectionCard>
<AiSectionCard
step="05"
title="人脸和口播"
description="控制性别、人脸图、语气和语音来源。"
class="delivery-card delivery-card--step-05"
>
<div class="delivery-form-grid delivery-form-grid--two">
<div class="delivery-field">
<span class="delivery-field__label">性别</span>
<AiChoicePills v-model="currentWorkspace.gender" :options="genderOptions" />
</div>
<div class="delivery-field">
<span class="delivery-field__label">语气</span>
<AiChoicePills v-model="currentWorkspace.voiceTone" :options="voiceToneOptions" />
</div>
</div>
<div class="delivery-field">
<span class="delivery-field__label">语音来源</span>
<AiChoicePills
v-model="currentWorkspace.speechSource"
:options="speechSourceOptions"
/>
</div>
<AiAssetDropzone
title="模特图 / 人脸图"
description="上传清晰正脸图，适合用于数字人口播。"
placeholder="上传模特图"
helper="建议 1080px 以上，单人正面"
accept="image/*"
:file-name="currentWorkspace.avatarAsset.fileName"
:preview-url="currentWorkspace.avatarAsset.previewUrl"
:preview-kind="currentWorkspace.avatarAsset.previewKind"
@select="(file) => setAsset(activeTab, 'avatarAsset', file)"
@clear="clearAsset(activeTab, 'avatarAsset')"
/>
</AiSectionCard>
<AiSectionCard
step="06"
title="话术和音乐"
description="支持直接口播、原话术微调，或者转成纯音乐版本。"
class="delivery-card delivery-card--step-06"
>
<div class="delivery-field">
<span class="delivery-field__label">话术模式</span>
<AiChoicePills v-model="currentWorkspace.scriptMode" :options="scriptModeOptions" />
</div>
<div class="delivery-form-grid delivery-form-grid--two">
<div class="delivery-field">
<span class="delivery-field__label">话术内容</span>
<el-input
v-model="currentWorkspace.scriptText"
type="textarea"
:rows="4"
resize="none"
placeholder="输入要口播的话术，或粘贴需要整体微调的原始话术。"
/>
</div>
<div class="delivery-field">
<span class="delivery-field__label">微调约束</span>
<el-input
v-model="currentWorkspace.scriptRules"
type="textarea"
:rows="4"
resize="none"
placeholder="例如：保留原来的成交语气，不改卖点顺序，强调防滑、透气、现货。"
/>
</div>
</div>
<AiAssetDropzone
title="纯音乐素材"
description="需要做纯音乐版本时可上传，也可以后续从原视频中抽取。"
placeholder="上传背景音乐"
helper="支持 MP3 / WAV"
accept="audio/*"
:file-name="currentWorkspace.musicAsset.fileName"
:preview-url="currentWorkspace.musicAsset.previewUrl"
:preview-kind="currentWorkspace.musicAsset.previewKind"
@select="(file) => setAsset(activeTab, 'musicAsset', file)"
@clear="clearAsset(activeTab, 'musicAsset')"
/>
</AiSectionCard>
<AiSectionCard
step="07"
title="标题标签关键词"
description="类目、平台和卖点一起配置，方便后续拆投放版本。"
class="delivery-card delivery-card--step-07"
>
<div class="delivery-field">
<span class="delivery-field__label">细分类目</span>
<AiChoicePills
v-model="currentWorkspace.categories"
:options="categoryOptions"
multiple
/>
</div>
<div class="delivery-field">
<span class="delivery-field__label">投放平台</span>
<AiChoicePills
v-model="currentWorkspace.platforms"
:options="platformOptions"
multiple
/>
</div>
<div class="delivery-field">
<span class="delivery-field__label">核心卖点</span>
<el-input
v-model="currentWorkspace.productFocus"
type="textarea"
:rows="2"
resize="none"
placeholder="例如：上脚显瘦、脚感轻、百搭、直播间主推款。"
/>
</div>
</AiSectionCard>
<AiSectionCard
step="08"
title="执行说明"
description="补充收尾逻辑，例如保留人物动作，只替换场景和话术重点。"
class="delivery-card delivery-card--step-08"
>
<div class="delivery-field">
<span class="delivery-field__label">收口动作</span>
<el-input
v-model="currentWorkspace.cta"
placeholder="例如：结尾引导领券下单，强调今晚库存。"
/>
</div>
<div class="delivery-field">
<span class="delivery-field__label">执行说明</span>
<el-input
v-model="currentWorkspace.notes"
type="textarea"
:rows="3"
resize="none"
placeholder="补充执行说明，例如：第二版转成纯音乐短视频。"
/>
</div>
</AiSectionCard>
</div>
</section>
</template>
@@ -359,6 +365,7 @@ type AssetState = {
fileName: string
previewUrl: string
previewKind: PreviewKind
sourceUrl: string
}
type AssetKey =
@@ -390,7 +397,6 @@ type WorkspaceState = {
scriptText: string
scriptRules: string
categories: string[]
platforms: string[]
productFocus: string
cta: string
notes: string
@@ -425,7 +431,6 @@ const languageOptions = ['国语', '英语', '粤语', '西班牙语']
const speechSourceOptions = ['文本直出', '从原视频提取语气', '从音频样本提取']
const scriptModeOptions = ['直接口播', '原话术微调', '纯音乐版本']
const categoryOptions = ['鞋子', '男装', '女装', '美妆', '家居', '零食', '数码']
const platformOptions = ['抖音', '快手', '视频号', '小红书']
const tabCopies: Record<WorkspaceTab, TabCopy> = {
remake: {
@@ -465,6 +470,7 @@ function createAssetState(): AssetState {
fileName: '',
previewUrl: '',
previewKind: 'file',
sourceUrl: '',
}
}
@@ -491,7 +497,6 @@ function createWorkspaceState(): WorkspaceState {
scriptText: '',
scriptRules: '',
categories: ['鞋子'],
platforms: ['抖音'],
productFocus: '',
cta: '',
notes: '',
@@ -521,6 +526,23 @@ function resolvePreviewKind(file: File): PreviewKind {
return 'file'
}
function resolvePreviewKindFromUrl(url: string, accept = ''): PreviewKind {
const cleanUrl = url.split('?')[0]?.toLowerCase() || ''
if (/\.(png|jpe?g|webp|gif|bmp|svg)$/.test(cleanUrl)) {
return 'image'
}
if (/\.(mp4|mov|webm|m4v|ogg)$/.test(cleanUrl)) {
return 'video'
}
if (accept.includes('image/*')) {
return 'image'
}
if (accept.includes('video/*')) {
return 'video'
}
return 'file'
}
function releasePreviewUrl(url: string) {
if (!url.startsWith('blob:')) {
return
@@ -536,6 +558,7 @@ function setAsset(tab: WorkspaceTab, assetKey: AssetKey, file: File) {
}
target.fileName = file.name
target.sourceUrl = ''
target.previewKind = resolvePreviewKind(file)
target.previewUrl = target.previewKind === 'file' ? '' : URL.createObjectURL(file)
if (target.previewUrl) {
@@ -543,6 +566,19 @@ function setAsset(tab: WorkspaceTab, assetKey: AssetKey, file: File) {
}
}
function setAssetUrl(tab: WorkspaceTab, assetKey: AssetKey, url: string, accept = '') {
const target = workspaces[tab][assetKey]
if (target.previewUrl) {
releasePreviewUrl(target.previewUrl)
}
const normalizedUrl = url.trim()
target.sourceUrl = normalizedUrl
target.fileName = normalizedUrl ? normalizedUrl : ''
target.previewKind = normalizedUrl ? resolvePreviewKindFromUrl(normalizedUrl, accept) : 'file'
target.previewUrl = target.previewKind === 'file' ? '' : normalizedUrl
}
function clearAsset(tab: WorkspaceTab, assetKey: AssetKey) {
const target = workspaces[tab][assetKey]
if (target.previewUrl) {
@@ -551,6 +587,7 @@ function clearAsset(tab: WorkspaceTab, assetKey: AssetKey) {
target.fileName = ''
target.previewUrl = ''
target.previewKind = 'file'
target.sourceUrl = ''
}
function saveDraft() {