新增内容,新增拉起软件层
This commit is contained in:
12
frontend-vue/image-video.html
Normal file
12
frontend-vue/image-video.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>图生视频</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/image-video-main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
7
frontend-vue/src/image-video-main.ts
Normal file
7
frontend-vue/src/image-video-main.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import { createApp } from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import '@/styles/main.css'
|
||||
import ImageVideoPage from '@/pages/image-video/ImageVideoPage.vue'
|
||||
|
||||
createApp(ImageVideoPage).use(ElementPlus).mount('#app')
|
||||
@@ -202,6 +202,9 @@ const dashboard = ref<SimilarAsinDashboardVo>({
|
||||
failedTaskCount: 0,
|
||||
})
|
||||
const historyItems = ref<SimilarAsinHistoryItem[]>([])
|
||||
// 前端实时进度态:保存最近一次 progress/batch 接口拿到的进度,作为 history 接口的兜底,
|
||||
// 避免历史接口暂时返回不到该任务、或字段不全时,当前任务区出现进度回退/丢失。
|
||||
const liveProgressItems = ref<Record<number, SimilarAsinHistoryItem>>({})
|
||||
|
||||
const visibleTaskSummary = computed(() => parseResult.value || queuedTaskSummary.value)
|
||||
const pendingParseItem = computed<SimilarAsinHistoryItem | null>(() => {
|
||||
@@ -219,10 +222,22 @@ const pendingParseItem = computed<SimilarAsinHistoryItem | null>(() => {
|
||||
})
|
||||
const currentItems = computed(() => {
|
||||
const activeIds = new Set([...pollingTaskIds.value, ...pendingFileTaskIds.value])
|
||||
const activeItems = historyItems.value.filter((item) => {
|
||||
const status = normalizeTaskStatus(item)
|
||||
return item.taskId != null && (activeIds.has(item.taskId) || status === 'RUNNING' || status === 'PENDING')
|
||||
})
|
||||
const activeItems = historyItems.value
|
||||
.filter((item) => {
|
||||
const status = normalizeTaskStatus(item)
|
||||
return item.taskId != null && (activeIds.has(item.taskId) || status === 'RUNNING' || status === 'PENDING')
|
||||
})
|
||||
.map((item) => mergeCurrentTaskItem(item))
|
||||
// 兜底:history 暂未返回该任务,但实时缓存里仍在跑,保留它在当前任务区
|
||||
for (const [taskIdText, liveItem] of Object.entries(liveProgressItems.value)) {
|
||||
const taskId = Number(taskIdText)
|
||||
if (!Number.isFinite(taskId) || taskId <= 0) continue
|
||||
if (!activeIds.has(taskId) && normalizeTaskStatus(liveItem) !== 'RUNNING' && normalizeTaskStatus(liveItem) !== 'PENDING') {
|
||||
continue
|
||||
}
|
||||
if (activeItems.some((item) => item.taskId === taskId)) continue
|
||||
activeItems.push(mergeCurrentTaskItem(liveItem))
|
||||
}
|
||||
if (!pendingParseItem.value) return activeItems
|
||||
const exists = activeItems.some((item) => item.taskId === pendingParseItem.value?.taskId)
|
||||
return exists ? activeItems : [pendingParseItem.value, ...activeItems]
|
||||
@@ -234,6 +249,20 @@ const historyOnlyItems = computed(() =>
|
||||
}),
|
||||
)
|
||||
|
||||
function mergeCurrentTaskItem(item: SimilarAsinHistoryItem) {
|
||||
if (item.taskId == null) return item
|
||||
const liveItem = liveProgressItems.value[item.taskId]
|
||||
if (!liveItem) return item
|
||||
return {
|
||||
...item,
|
||||
...liveItem,
|
||||
sourceFilename: liveItem.sourceFilename || item.sourceFilename,
|
||||
resultFilename: liveItem.resultFilename || item.resultFilename,
|
||||
rowCount: liveItem.rowCount ?? item.rowCount,
|
||||
createdAt: liveItem.createdAt || item.createdAt,
|
||||
}
|
||||
}
|
||||
|
||||
function effectiveCozeApiKey() {
|
||||
return getStoredApiSecret('similar-asin').trim()
|
||||
}
|
||||
@@ -463,6 +492,11 @@ function addPollingTask(taskId: number) {
|
||||
|
||||
function removePollingTask(taskId: number) {
|
||||
pollingTaskIds.value = pollingTaskIds.value.filter((id) => id !== taskId)
|
||||
if (!pendingFileTaskIds.value.includes(taskId)) {
|
||||
const next = { ...liveProgressItems.value }
|
||||
delete next[taskId]
|
||||
liveProgressItems.value = next
|
||||
}
|
||||
savePollingIds()
|
||||
}
|
||||
|
||||
@@ -476,9 +510,32 @@ function addPendingFileTask(taskId: number) {
|
||||
|
||||
function removePendingFileTask(taskId: number) {
|
||||
pendingFileTaskIds.value = pendingFileTaskIds.value.filter((id) => id !== taskId)
|
||||
if (!pollingTaskIds.value.includes(taskId)) {
|
||||
const next = { ...liveProgressItems.value }
|
||||
delete next[taskId]
|
||||
liveProgressItems.value = next
|
||||
}
|
||||
savePollingIds()
|
||||
}
|
||||
|
||||
function removeTaskFromLocalState(taskId?: number) {
|
||||
if (!taskId) return
|
||||
removePollingTask(taskId)
|
||||
removePendingFileTask(taskId)
|
||||
if (parseResult.value?.taskId === taskId) {
|
||||
clearParsedTask()
|
||||
}
|
||||
if (queuedTaskSummary.value?.taskId === taskId) {
|
||||
queuedTaskSummary.value = null
|
||||
}
|
||||
historyItems.value = historyItems.value.filter((row) => row.taskId !== taskId)
|
||||
if (liveProgressItems.value[taskId]) {
|
||||
const next = { ...liveProgressItems.value }
|
||||
delete next[taskId]
|
||||
liveProgressItems.value = next
|
||||
}
|
||||
}
|
||||
|
||||
function ensurePolling() {
|
||||
if (disposed) return
|
||||
if (pollTimer.value != null) return
|
||||
@@ -528,7 +585,14 @@ async function refreshTaskProgress() {
|
||||
const task = detail.task
|
||||
if (!task?.id) continue
|
||||
const item = detail.items?.[0]
|
||||
if (item) mergeHistoryItem(item)
|
||||
if (item) {
|
||||
// 实时缓存:以最新一次 progress 为准,避免 history 接口字段缺失/延迟时丢失进度
|
||||
liveProgressItems.value = {
|
||||
...liveProgressItems.value,
|
||||
[task.id]: item,
|
||||
}
|
||||
mergeHistoryItem(item)
|
||||
}
|
||||
if (task.status === 'SUCCESS' || task.status === 'FAILED') {
|
||||
removePollingTask(task.id)
|
||||
shouldRefreshDashboard = true
|
||||
@@ -848,11 +912,17 @@ async function downloadResult(item: SimilarAsinHistoryItem) {
|
||||
|
||||
async function deleteTaskRecord(item: SimilarAsinHistoryItem) {
|
||||
try {
|
||||
if (item.taskStatus === 'RUNNING' && item.taskId) {
|
||||
await deleteSimilarAsinTask(item.taskId)
|
||||
removePollingTask(item.taskId)
|
||||
const status = normalizeTaskStatus(item)
|
||||
const taskId = item.taskId
|
||||
const shouldDeleteTask = taskId != null && (status === 'RUNNING' || status === 'PENDING' || !item.resultId)
|
||||
if (shouldDeleteTask) {
|
||||
await deleteSimilarAsinTask(taskId)
|
||||
removeTaskFromLocalState(taskId)
|
||||
} else if (item.resultId) {
|
||||
await deleteSimilarAsinHistory(item.resultId)
|
||||
if (item.taskId) {
|
||||
historyItems.value = historyItems.value.filter((row) => row.taskId !== item.taskId)
|
||||
}
|
||||
}
|
||||
await loadDashboard()
|
||||
await loadHistory({ force: true })
|
||||
|
||||
198
frontend-vue/src/pages/image-video/ImageVideoPage.vue
Normal file
198
frontend-vue/src/pages/image-video/ImageVideoPage.vue
Normal file
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<div class="image-video-page">
|
||||
<header class="page-header">
|
||||
<span class="header-title">数富AI</span>
|
||||
<a class="back-link" href="/home">返回首页</a>
|
||||
</header>
|
||||
|
||||
<main class="entrances" aria-label="图生视频入口">
|
||||
<button
|
||||
type="button"
|
||||
class="entrance-btn"
|
||||
:disabled="launching"
|
||||
@click="launchDesktop"
|
||||
>
|
||||
数字人
|
||||
</button>
|
||||
<button type="button" class="entrance-btn" @click="showSoon('带货视频')">
|
||||
带货视频
|
||||
</button>
|
||||
<button type="button" class="entrance-btn" @click="showSoon('混剪')">
|
||||
混剪
|
||||
</button>
|
||||
</main>
|
||||
|
||||
<div class="toast" :class="{ show: Boolean(statusText), error: statusType === 'error' }">
|
||||
{{ statusText }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { getPywebviewApi } from '@/shared/bridges/pywebview'
|
||||
|
||||
const launching = ref(false)
|
||||
const statusText = ref('')
|
||||
const statusType = ref<'normal' | 'error'>('normal')
|
||||
let statusTimer: number | undefined
|
||||
|
||||
function showStatus(message: string, type: 'normal' | 'error' = 'normal') {
|
||||
statusText.value = message
|
||||
statusType.value = type
|
||||
if (statusTimer) {
|
||||
window.clearTimeout(statusTimer)
|
||||
}
|
||||
statusTimer = window.setTimeout(() => {
|
||||
statusText.value = ''
|
||||
}, 2200)
|
||||
}
|
||||
|
||||
function showSoon(name: string) {
|
||||
showStatus(`${name}暂未开通,敬请期待`)
|
||||
}
|
||||
|
||||
async function launchDesktop() {
|
||||
const api = getPywebviewApi()
|
||||
if (!api?.launch_yaoayanui) {
|
||||
showStatus('当前环境不支持拉起桌面端', 'error')
|
||||
return
|
||||
}
|
||||
|
||||
launching.value = true
|
||||
try {
|
||||
const result = await api.launch_yaoayanui()
|
||||
if (result?.success) {
|
||||
showStatus('已发送启动请求')
|
||||
return
|
||||
}
|
||||
showStatus(result?.error || '启动失败', 'error')
|
||||
} catch (error) {
|
||||
showStatus(error instanceof Error ? error.message : String(error), 'error')
|
||||
} finally {
|
||||
launching.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.image-video-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
color: #333;
|
||||
font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
|
||||
background:
|
||||
linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
|
||||
url('/static/bg.jpg') center/cover no-repeat,
|
||||
#eef3f7;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.header-title {
|
||||
color: #333;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.entrances {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.entrance-btn {
|
||||
width: 160px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #333;
|
||||
background: #c5c1c1;
|
||||
border: 4px solid #b8d4e3;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.entrance-btn:hover:not(:disabled) {
|
||||
background: #f8fbfd;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.entrance-btn:disabled {
|
||||
cursor: wait;
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
left: 50%;
|
||||
padding: 12px 24px;
|
||||
max-width: min(420px, calc(100vw - 48px));
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateX(-50%);
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.toast.show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.toast.error {
|
||||
background: rgba(176, 42, 55, 0.92);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.image-video-page {
|
||||
padding: 88px 24px 40px;
|
||||
}
|
||||
|
||||
.entrances {
|
||||
width: 100%;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.entrance-btn {
|
||||
width: 100%;
|
||||
max-width: 220px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -60,6 +60,11 @@ export interface PywebviewApi {
|
||||
path?: string;
|
||||
error?: string;
|
||||
}>;
|
||||
launch_yaoayanui?: () => Promise<{
|
||||
success: boolean;
|
||||
path?: string;
|
||||
error?: string;
|
||||
}>;
|
||||
enqueue_json?: (
|
||||
data: unknown,
|
||||
) => Promise<{ success: boolean; queue_size?: number; error?: string }>;
|
||||
|
||||
@@ -54,6 +54,7 @@ export default defineConfig({
|
||||
'patrol-delete': resolve(__dirname, 'patrol-delete.html'),
|
||||
'query-asin': resolve(__dirname, 'query-asin.html'),
|
||||
'collect-data': resolve(__dirname, 'collect-data.html'),
|
||||
'image-video': resolve(__dirname, 'image-video.html'),
|
||||
},
|
||||
output: {
|
||||
entryFileNames: 'assets/[name].js',
|
||||
|
||||
Reference in New Issue
Block a user