feat: AI绘本创作H5整合——引入aicreate.scss修复样式，修复checkQuota类型参数
- 在 main.ts 中引入 aicreate.scss，解决所有 CSS 变量和共享样式类缺失的根因问题 - Index.vue 从 iframe 嵌入模式重构为壳组件+子路由渲染模式 - 修复 aicreate.scss 布局适配：height:100% 填充 PublicLayout，page-fullscreen 使用 100% 而非 100dvh - 修复 checkQuota() 的 type 参数：'A' → 'A3'，对齐乐读派后端 V4.0 接口要求 - 迁移 lesingle-aicreate-client 全部 11 个视图、2 个组件、API 层、Store、工具函数 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
88ca6264a1
commit
6365dd8dd0
288
frontend/src/api/aicreate/index.ts
Normal file
288
frontend/src/api/aicreate/index.ts
Normal file
@ -0,0 +1,288 @@
|
||||
/**
|
||||
* AI 创作 API 层
|
||||
* 从 lesingle-aicreate-client/src/api/index.js 迁移
|
||||
*
|
||||
* 独立 axios 实例，直连乐读派后端（VITE_LEAI_API_URL + /api/v1）
|
||||
* 认证：Bearer sessionToken（企业模式）
|
||||
*/
|
||||
import axios from 'axios'
|
||||
import OSS from 'ali-oss'
|
||||
import { signRequest } from '@/utils/aicreate/hmac'
|
||||
import { useAicreateStore } from '@/stores/aicreate'
|
||||
import { leaiApi } from '@/api/public'
|
||||
import type { StsTokenData, CreateStoryParams } from './types'
|
||||
|
||||
// 乐读派后端地址（从环境变量读取，直连，不走代理）
|
||||
const leaiBaseUrl = import.meta.env.VITE_LEAI_API_URL || ''
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: leaiBaseUrl ? leaiBaseUrl + '/api/v1' : '/api/v1',
|
||||
timeout: 120000
|
||||
})
|
||||
|
||||
// ─── 请求拦截器：双模式认证 ───
|
||||
api.interceptors.request.use((config) => {
|
||||
// 需要从 store 获取最新状态，不能用模块级缓存
|
||||
const store = useAicreateStore()
|
||||
if (store.sessionToken) {
|
||||
config.headers['Authorization'] = 'Bearer ' + store.sessionToken
|
||||
} else if (store.orgId && store.appSecret) {
|
||||
const queryParams: Record<string, string> = {}
|
||||
if (config.params) {
|
||||
Object.entries(config.params).forEach(([k, v]) => {
|
||||
if (v != null) queryParams[k] = String(v)
|
||||
})
|
||||
}
|
||||
const headers = signRequest(store.orgId, store.appSecret, queryParams)
|
||||
Object.assign(config.headers, headers)
|
||||
}
|
||||
return config
|
||||
})
|
||||
|
||||
// ─── Token 刷新状态管理 ───
|
||||
let isRefreshing = false
|
||||
let pendingRequests: Array<(token: string | null) => void> = []
|
||||
|
||||
async function handleTokenExpired(failedConfig: any): Promise<any> {
|
||||
if (!isRefreshing) {
|
||||
isRefreshing = true
|
||||
try {
|
||||
const data = await leaiApi.refreshToken()
|
||||
const store = useAicreateStore()
|
||||
store.setSession(data.orgId || store.orgId, data.token)
|
||||
if (data.phone) store.setPhone(data.phone)
|
||||
isRefreshing = false
|
||||
pendingRequests.forEach(cb => cb(data.token))
|
||||
pendingRequests = []
|
||||
} catch {
|
||||
isRefreshing = false
|
||||
pendingRequests.forEach(cb => cb(null))
|
||||
pendingRequests = []
|
||||
}
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
if (pendingRequests.length >= 20) {
|
||||
reject(new Error('TOO_MANY_PENDING_REQUESTS'))
|
||||
return
|
||||
}
|
||||
pendingRequests.push((newToken) => {
|
||||
if (newToken) {
|
||||
if (failedConfig.__retried) {
|
||||
reject(new Error('TOKEN_REFRESH_FAILED'))
|
||||
return
|
||||
}
|
||||
failedConfig.__retried = true
|
||||
failedConfig.headers['Authorization'] = 'Bearer ' + newToken
|
||||
delete failedConfig.headers['X-App-Key']
|
||||
delete failedConfig.headers['X-Timestamp']
|
||||
delete failedConfig.headers['X-Nonce']
|
||||
delete failedConfig.headers['X-Signature']
|
||||
resolve(api(failedConfig))
|
||||
} else {
|
||||
reject(new Error('TOKEN_REFRESH_FAILED'))
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// ─── 响应拦截器 ───
|
||||
api.interceptors.response.use(
|
||||
(res) => {
|
||||
const d = res.data
|
||||
if (d?.code !== 0 && d?.code !== 200) {
|
||||
const store = useAicreateStore()
|
||||
// Token 过期
|
||||
if (store.sessionToken && (d?.code === 20010 || d?.code === 20009)) {
|
||||
return handleTokenExpired(res.config)
|
||||
}
|
||||
return Promise.reject(new Error(d?.msg || '请求失败'))
|
||||
}
|
||||
return d
|
||||
},
|
||||
(err) => {
|
||||
const store = useAicreateStore()
|
||||
if (store.sessionToken && err.response?.status === 401) {
|
||||
return handleTokenExpired(err.config)
|
||||
}
|
||||
return Promise.reject(err)
|
||||
}
|
||||
)
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// API 函数
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
|
||||
/** 图片上传 */
|
||||
export function uploadImage(file: File) {
|
||||
const form = new FormData()
|
||||
form.append('file', file)
|
||||
return api.post('/creation/upload', form, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
timeout: 30000
|
||||
})
|
||||
}
|
||||
|
||||
/** 角色提取 */
|
||||
export function extractCharacters(imageUrl: string, opts: { saveOriginal?: boolean; title?: string } = {}) {
|
||||
const store = useAicreateStore()
|
||||
const body: Record<string, any> = {
|
||||
orgId: store.orgId,
|
||||
phone: store.phone,
|
||||
imageUrl
|
||||
}
|
||||
if (opts.saveOriginal) body.saveOriginal = true
|
||||
if (opts.title) body.title = opts.title
|
||||
return api.post('/creation/extract-original', body, { timeout: 120000 })
|
||||
}
|
||||
|
||||
/** 图片故事创作 */
|
||||
export function createStory(params: CreateStoryParams) {
|
||||
const store = useAicreateStore()
|
||||
const body: Record<string, any> = {
|
||||
orgId: store.orgId,
|
||||
phone: store.phone,
|
||||
imageUrl: params.imageUrl,
|
||||
storyHint: params.storyHint,
|
||||
style: params.style,
|
||||
refAdaptMode: params.refAdaptMode || 'enhanced',
|
||||
enableVoice: false
|
||||
}
|
||||
if (params.title) body.title = params.title
|
||||
if (params.author) body.author = params.author
|
||||
if (params.heroCharId) body.heroCharId = params.heroCharId
|
||||
if (params.extractId) body.extractId = params.extractId
|
||||
return api.post('/creation/image-story', body)
|
||||
}
|
||||
|
||||
/** 查询作品详情 */
|
||||
export function getWorkDetail(workId: string) {
|
||||
const store = useAicreateStore()
|
||||
return api.get(`/query/work/${workId}`, {
|
||||
params: { orgId: store.orgId, phone: store.phone }
|
||||
})
|
||||
}
|
||||
|
||||
/** 额度校验 */
|
||||
export function checkQuota() {
|
||||
const store = useAicreateStore()
|
||||
return api.post('/query/validate', {
|
||||
orgId: store.orgId,
|
||||
phone: store.phone,
|
||||
apiType: 'A3'
|
||||
})
|
||||
}
|
||||
|
||||
/** 编辑绘本信息 */
|
||||
export function updateWork(workId: string, data: Record<string, any>) {
|
||||
return api.put(`/update/work/${workId}`, data)
|
||||
}
|
||||
|
||||
/** 批量更新配音 URL */
|
||||
export function batchUpdateAudio(workId: string, pages: any[]) {
|
||||
const store = useAicreateStore()
|
||||
return api.post('/update/batch-audio', {
|
||||
orgId: store.orgId,
|
||||
phone: store.phone,
|
||||
workId,
|
||||
pages
|
||||
})
|
||||
}
|
||||
|
||||
/** 完成配音 */
|
||||
export function finishDubbing(workId: string) {
|
||||
return batchUpdateAudio(workId, [])
|
||||
}
|
||||
|
||||
/** AI 配音 */
|
||||
export function voicePage(data: Record<string, any>) {
|
||||
const store = useAicreateStore()
|
||||
return api.post('/creation/voice', {
|
||||
orgId: store.orgId,
|
||||
phone: store.phone,
|
||||
...data
|
||||
}, { timeout: 120000 })
|
||||
}
|
||||
|
||||
/** STS 临时凭证 */
|
||||
export function getStsToken() {
|
||||
const store = useAicreateStore()
|
||||
return api.post('/oss/sts-token', {
|
||||
orgId: store.orgId,
|
||||
phone: store.phone
|
||||
})
|
||||
}
|
||||
|
||||
// ─── OSS 直传 ───
|
||||
let _ossClient: OSS | null = null
|
||||
let _stsData: StsTokenData | null = null
|
||||
|
||||
async function getOssClient() {
|
||||
if (_ossClient && _stsData) {
|
||||
const expireTime = new Date(_stsData.expiration).getTime()
|
||||
if (Date.now() < expireTime - 5 * 60 * 1000) {
|
||||
return { client: _ossClient, prefix: _stsData.uploadPrefix }
|
||||
}
|
||||
}
|
||||
const res = await getStsToken()
|
||||
_stsData = res.data
|
||||
_ossClient = new OSS({
|
||||
region: _stsData.region,
|
||||
accessKeyId: _stsData.accessKeyId,
|
||||
accessKeySecret: _stsData.accessKeySecret,
|
||||
stsToken: _stsData.securityToken,
|
||||
bucket: _stsData.bucket,
|
||||
endpoint: _stsData.endpoint,
|
||||
refreshSTSToken: async () => {
|
||||
const r = await getStsToken()
|
||||
_stsData = r.data
|
||||
return {
|
||||
accessKeyId: _stsData.accessKeyId,
|
||||
accessKeySecret: _stsData.accessKeySecret,
|
||||
stsToken: _stsData.securityToken
|
||||
}
|
||||
},
|
||||
refreshSTSTokenInterval: 300000
|
||||
})
|
||||
return { client: _ossClient, prefix: _stsData.uploadPrefix }
|
||||
}
|
||||
|
||||
/**
|
||||
* STS 直传文件到 OSS
|
||||
* @param file 要上传的文件
|
||||
* @param opts 选项
|
||||
* @returns 文件的完整 OSS URL
|
||||
*/
|
||||
export async function ossUpload(file: File | Blob, opts: {
|
||||
type?: string
|
||||
onProgress?: (pct: number) => void
|
||||
ext?: string
|
||||
} = {}): Promise<string> {
|
||||
const { type = 'img', onProgress, ext: forceExt } = opts
|
||||
const { client, prefix } = await getOssClient()
|
||||
const ext = forceExt || ((file as File).name ? (file as File).name.split('.').pop() : 'bin').toLowerCase()
|
||||
const date = new Date().toISOString().slice(0, 10)
|
||||
const rand = Math.random().toString(36).slice(2, 10)
|
||||
const key = `${prefix}${date}/${type}_${Date.now()}_${rand}.${ext}`
|
||||
await (client as OSS).put(key, file, {
|
||||
headers: { 'x-oss-object-acl': 'public-read' },
|
||||
progress: (p: number) => { if (onProgress) onProgress(Math.round(p * 100)) }
|
||||
})
|
||||
if (_stsData!.cdnDomain) {
|
||||
return `${_stsData!.cdnDomain}/${key}`
|
||||
}
|
||||
return `https://${_stsData!.bucket}.${_stsData!.endpoint.replace('https://', '')}/${key}`
|
||||
}
|
||||
|
||||
/** STS 列举用户目录下的文件 */
|
||||
export async function ossListFiles() {
|
||||
const { client, prefix } = await getOssClient()
|
||||
const result = await (client as OSS).list({ prefix, 'max-keys': 100 })
|
||||
return (result.objects || []).map((obj: any) => ({
|
||||
name: obj.name.replace(prefix, ''),
|
||||
size: obj.size,
|
||||
lastModified: obj.lastModified,
|
||||
url: obj.url
|
||||
}))
|
||||
}
|
||||
|
||||
export default api
|
||||
56
frontend/src/api/aicreate/types.ts
Normal file
56
frontend/src/api/aicreate/types.ts
Normal file
@ -0,0 +1,56 @@
|
||||
/**
|
||||
* AI 创作相关类型定义
|
||||
*/
|
||||
|
||||
/** STS 临时凭证 */
|
||||
export interface StsTokenData {
|
||||
region: string
|
||||
accessKeyId: string
|
||||
accessKeySecret: string
|
||||
securityToken: string
|
||||
bucket: string
|
||||
endpoint: string
|
||||
uploadPrefix: string
|
||||
cdnDomain?: string
|
||||
expiration: string
|
||||
}
|
||||
|
||||
/** 角色提取结果 */
|
||||
export interface CharacterItem {
|
||||
charId: string
|
||||
name: string
|
||||
imageUrl: string
|
||||
}
|
||||
|
||||
/** 作品详情 */
|
||||
export interface WorkDetail {
|
||||
workId: string
|
||||
orgId: string
|
||||
phone: string
|
||||
status: number
|
||||
title: string
|
||||
author: string
|
||||
coverUrl: string
|
||||
pages: WorkPage[]
|
||||
style?: string
|
||||
}
|
||||
|
||||
/** 作品分页 */
|
||||
export interface WorkPage {
|
||||
pageNo: number
|
||||
imageUrl: string
|
||||
text: string
|
||||
audioUrl?: string
|
||||
}
|
||||
|
||||
/** 创建故事请求参数 */
|
||||
export interface CreateStoryParams {
|
||||
imageUrl: string
|
||||
storyHint: string
|
||||
style: string
|
||||
title?: string
|
||||
author?: string
|
||||
heroCharId?: string
|
||||
extractId?: string
|
||||
refAdaptMode?: string
|
||||
}
|
||||
121
frontend/src/assets/styles/aicreate.scss
Normal file
121
frontend/src/assets/styles/aicreate.scss
Normal file
@ -0,0 +1,121 @@
|
||||
// 乐读派 C端 — AI 创作专用样式（隔离在 .ai-create-shell 容器内）
|
||||
// 暖橙 + 奶油白 儿童绘本风格
|
||||
// 所有 CSS 变量使用 --ai- 前缀，避免与主前端冲突
|
||||
|
||||
.ai-create-shell {
|
||||
--ai-primary: #FF6B35;
|
||||
--ai-primary-light: #FFF0E8;
|
||||
--ai-secondary: #6C63FF;
|
||||
--ai-accent: #FFD166;
|
||||
--ai-success: #2EC4B6;
|
||||
--ai-bg: #FFFDF7;
|
||||
--ai-card: #FFFFFF;
|
||||
--ai-text: #2D2D3F;
|
||||
--ai-text-sub: #8E8EA0;
|
||||
--ai-border: #F0EDE8;
|
||||
--ai-radius: 20px;
|
||||
--ai-radius-sm: 14px;
|
||||
--ai-shadow: 0 8px 32px rgba(255, 107, 53, 0.12);
|
||||
--ai-shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.06);
|
||||
--ai-gradient: linear-gradient(135deg, #FF6B35 0%, #FF8F65 50%, #FFB088 100%);
|
||||
--ai-gradient-purple: linear-gradient(135deg, #6C63FF 0%, #9B93FF 100%);
|
||||
--ai-font: 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', -apple-system, sans-serif;
|
||||
|
||||
font-family: var(--ai-font);
|
||||
background: var(--ai-bg);
|
||||
color: var(--ai-text);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
max-width: 430px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
|
||||
// 通用按钮
|
||||
.btn-primary {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 16px 0;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
background: var(--ai-gradient);
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--ai-shadow);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
@extend .btn-primary;
|
||||
background: var(--ai-primary-light);
|
||||
color: var(--ai-primary);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// 通用卡片
|
||||
.card {
|
||||
background: var(--ai-card);
|
||||
border-radius: var(--ai-radius);
|
||||
box-shadow: var(--ai-shadow-soft);
|
||||
}
|
||||
|
||||
// 安全区底部
|
||||
.safe-bottom {
|
||||
padding-bottom: env(safe-area-inset-bottom, 20px);
|
||||
}
|
||||
|
||||
// 全屏自适应布局框架
|
||||
// 嵌入 PublicLayout 后，使用 100% 而非 100dvh，以适配头部和底栏
|
||||
.page-fullscreen {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 0 !important;
|
||||
overflow: hidden;
|
||||
|
||||
> .page-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
> .page-bottom {
|
||||
flex-shrink: 0;
|
||||
padding: 12px 20px;
|
||||
padding-bottom: max(12px, env(safe-area-inset-bottom));
|
||||
background: var(--ai-bg, #FFFDF7);
|
||||
}
|
||||
}
|
||||
|
||||
// 动画
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-8px); }
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
}
|
||||
67
frontend/src/components/aicreate/PageHeader.vue
Normal file
67
frontend/src/components/aicreate/PageHeader.vue
Normal file
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div class="page-header">
|
||||
<div class="header-row">
|
||||
<div v-if="showBack" class="back-btn" @click="handleBack">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M15 18l-6-6 6-6"/></svg>
|
||||
</div>
|
||||
<div class="header-text">
|
||||
<div class="header-title">{{ title }}</div>
|
||||
<div v-if="subtitle" class="header-sub">{{ subtitle }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<StepBar v-if="step != null" :current="step" :total="totalSteps" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
import StepBar from './StepBar.vue'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
defineProps({
|
||||
title: String,
|
||||
subtitle: String,
|
||||
showBack: { type: Boolean, default: true },
|
||||
step: { type: Number, default: null },
|
||||
totalSteps: { type: Number, default: 6 }
|
||||
})
|
||||
|
||||
function handleBack() {
|
||||
// 整合后直接返回上一页或作品列表
|
||||
const from = new URLSearchParams(window.location.search).get('from')
|
||||
|| sessionStorage.getItem('le_from')
|
||||
if (from === 'works') {
|
||||
router.push('/p/works')
|
||||
return
|
||||
}
|
||||
router.back()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-header {
|
||||
padding: 16px 20px 8px;
|
||||
background: transparent;
|
||||
}
|
||||
.header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.back-btn {
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
color: var(--ai-text);
|
||||
}
|
||||
.header-title {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
color: var(--ai-text);
|
||||
}
|
||||
.header-sub {
|
||||
font-size: 13px;
|
||||
color: var(--ai-text-sub);
|
||||
margin-top: 2px;
|
||||
}
|
||||
</style>
|
||||
38
frontend/src/components/aicreate/StepBar.vue
Normal file
38
frontend/src/components/aicreate/StepBar.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div class="step-bar">
|
||||
<div
|
||||
v-for="i in total"
|
||||
:key="i"
|
||||
class="step-dot"
|
||||
:class="{ active: i - 1 === current, done: i - 1 < current }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps({ current: Number, total: { type: Number, default: 6 } })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.step-bar {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
justify-content: center;
|
||||
padding: 12px 0;
|
||||
}
|
||||
.step-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--ai-border);
|
||||
transition: all 0.4s ease;
|
||||
|
||||
&.active {
|
||||
width: 24px;
|
||||
background: var(--ai-primary);
|
||||
}
|
||||
&.done {
|
||||
background: var(--ai-success);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -4,6 +4,7 @@ import Antd from "ant-design-vue"
|
||||
import "ant-design-vue/dist/reset.css"
|
||||
import "./styles/global.scss"
|
||||
import "./styles/theme.scss"
|
||||
import "./assets/styles/aicreate.scss"
|
||||
import App from "./App.vue"
|
||||
import router from "./router"
|
||||
import { useAuthStore } from "./stores/auth"
|
||||
|
||||
108
frontend/src/stores/aicreate.ts
Normal file
108
frontend/src/stores/aicreate.ts
Normal file
@ -0,0 +1,108 @@
|
||||
/**
|
||||
* AI 创作全局状态（Pinia Store）
|
||||
*
|
||||
* 从 lesingle-aicreate-client/utils/store.js 迁移
|
||||
* 保留原有字段和方法，适配 Pinia setup 语法
|
||||
*/
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, reactive } from 'vue'
|
||||
|
||||
export const useAicreateStore = defineStore('aicreate', () => {
|
||||
// ─── 认证信息 ───
|
||||
const phone = ref(localStorage.getItem('le_phone') || '')
|
||||
const orgId = ref(localStorage.getItem('le_orgId') || '')
|
||||
const appSecret = ref(localStorage.getItem('le_appSecret') || '')
|
||||
const sessionToken = ref(sessionStorage.getItem('le_sessionToken') || '')
|
||||
|
||||
// ─── 创作流程数据 ───
|
||||
const imageUrl = ref('')
|
||||
const extractId = ref('')
|
||||
const characters = ref<any[]>([])
|
||||
const selectedCharacter = ref<any>(null)
|
||||
const selectedStyle = ref('')
|
||||
const storyData = ref<any>(null)
|
||||
const workId = ref('')
|
||||
const workDetail = ref<any>(null)
|
||||
const authRedirectUrl = ref('')
|
||||
|
||||
// ─── 方法 ───
|
||||
function setPhone(val: string) {
|
||||
phone.value = val
|
||||
localStorage.setItem('le_phone', val)
|
||||
}
|
||||
|
||||
function setOrg(id: string, secret: string) {
|
||||
orgId.value = id
|
||||
appSecret.value = secret
|
||||
localStorage.setItem('le_orgId', id)
|
||||
localStorage.setItem('le_appSecret', secret)
|
||||
}
|
||||
|
||||
function setSession(id: string, token: string) {
|
||||
orgId.value = id
|
||||
sessionToken.value = token
|
||||
localStorage.setItem('le_orgId', id)
|
||||
sessionStorage.setItem('le_orgId', id)
|
||||
sessionStorage.setItem('le_sessionToken', token)
|
||||
}
|
||||
|
||||
function clearSession() {
|
||||
sessionToken.value = ''
|
||||
sessionStorage.removeItem('le_sessionToken')
|
||||
}
|
||||
|
||||
function reset() {
|
||||
imageUrl.value = ''
|
||||
extractId.value = ''
|
||||
characters.value = []
|
||||
selectedCharacter.value = null
|
||||
selectedStyle.value = ''
|
||||
storyData.value = null
|
||||
workId.value = ''
|
||||
workDetail.value = null
|
||||
localStorage.removeItem('le_workId')
|
||||
}
|
||||
|
||||
function saveRecoveryState() {
|
||||
const recovery = {
|
||||
path: window.location.pathname || '/',
|
||||
workId: workId.value || localStorage.getItem('le_workId') || '',
|
||||
imageUrl: imageUrl.value || '',
|
||||
extractId: extractId.value || '',
|
||||
selectedStyle: selectedStyle.value || '',
|
||||
savedAt: Date.now()
|
||||
}
|
||||
sessionStorage.setItem('le_recovery', JSON.stringify(recovery))
|
||||
}
|
||||
|
||||
function restoreRecoveryState() {
|
||||
const raw = sessionStorage.getItem('le_recovery')
|
||||
if (!raw) return null
|
||||
try {
|
||||
const recovery = JSON.parse(raw)
|
||||
if (Date.now() - recovery.savedAt > 30 * 60 * 1000) {
|
||||
sessionStorage.removeItem('le_recovery')
|
||||
return null
|
||||
}
|
||||
if (recovery.workId) workId.value = recovery.workId
|
||||
if (recovery.imageUrl) imageUrl.value = recovery.imageUrl
|
||||
if (recovery.extractId) extractId.value = recovery.extractId
|
||||
if (recovery.selectedStyle) selectedStyle.value = recovery.selectedStyle
|
||||
sessionStorage.removeItem('le_recovery')
|
||||
return recovery
|
||||
} catch {
|
||||
sessionStorage.removeItem('le_recovery')
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
// 认证
|
||||
phone, orgId, appSecret, sessionToken, authRedirectUrl,
|
||||
setPhone, setOrg, setSession, clearSession,
|
||||
// 创作流程
|
||||
imageUrl, extractId, characters, selectedCharacter,
|
||||
selectedStyle, storyData, workId, workDetail,
|
||||
reset, saveRecoveryState, restoreRecoveryState,
|
||||
}
|
||||
})
|
||||
24
frontend/src/utils/aicreate/config.ts
Normal file
24
frontend/src/utils/aicreate/config.ts
Normal file
@ -0,0 +1,24 @@
|
||||
/**
|
||||
* AI 创作运行时配置
|
||||
* 从 lesingle-aicreate-client/utils/config.js 迁移并重写
|
||||
*
|
||||
* 整合后从环境变量读取乐读派后端地址
|
||||
*/
|
||||
|
||||
// 乐读派后端地址（直连）
|
||||
const leaiApiUrl = import.meta.env.VITE_LEAI_API_URL || ''
|
||||
|
||||
const config = {
|
||||
// API 基础路径（完整 URL，用于 axios baseURL 已在 api/aicreate 中使用）
|
||||
apiBaseUrl: leaiApiUrl,
|
||||
// WebSocket 基础路径（完整 URL）
|
||||
wsBaseUrl: leaiApiUrl ? leaiApiUrl.replace(/^http/, 'ws') : '',
|
||||
// 品牌信息
|
||||
brand: {
|
||||
title: '乐读派',
|
||||
subtitle: 'AI智能儿童绘本创作',
|
||||
slogan: '让想象力飞翔'
|
||||
},
|
||||
}
|
||||
|
||||
export default config
|
||||
26
frontend/src/utils/aicreate/hmac.ts
Normal file
26
frontend/src/utils/aicreate/hmac.ts
Normal file
@ -0,0 +1,26 @@
|
||||
/**
|
||||
* HMAC-SHA256 签名工具
|
||||
* 从 lesingle-aicreate-client/utils/hmac.js 迁移
|
||||
*
|
||||
* 签名规则：排序的 query params + nonce + timestamp，用 & 拼接
|
||||
* POST JSON body 不参与签名
|
||||
*/
|
||||
import CryptoJS from 'crypto-js'
|
||||
|
||||
export function signRequest(orgId: string, appSecret: string, queryParams: Record<string, string> = {}) {
|
||||
const timestamp = String(Date.now())
|
||||
const nonce = Math.random().toString(36).substring(2, 15) + Date.now().toString(36)
|
||||
|
||||
const allParams: Record<string, string> = { ...queryParams, nonce, timestamp }
|
||||
const sorted = Object.keys(allParams).sort()
|
||||
const signStr = sorted.map(k => `${k}=${allParams[k]}`).join('&')
|
||||
|
||||
const signature = CryptoJS.HmacSHA256(signStr, appSecret).toString(CryptoJS.enc.Hex)
|
||||
|
||||
return {
|
||||
'X-App-Key': orgId,
|
||||
'X-Timestamp': timestamp,
|
||||
'X-Nonce': nonce,
|
||||
'X-Signature': signature
|
||||
}
|
||||
}
|
||||
38
frontend/src/utils/aicreate/status.ts
Normal file
38
frontend/src/utils/aicreate/status.ts
Normal file
@ -0,0 +1,38 @@
|
||||
/**
|
||||
* V4.0 作品状态常量（数值型）
|
||||
* 从 lesingle-aicreate-client/utils/status.js 迁移
|
||||
*
|
||||
* 状态流转: PENDING(1) -> PROCESSING(2) -> COMPLETED(3) -> CATALOGED(4) -> DUBBED(5)
|
||||
* 任意阶段可能 -> FAILED(-1)
|
||||
*/
|
||||
export const STATUS = {
|
||||
FAILED: -1,
|
||||
PENDING: 1,
|
||||
PROCESSING: 2,
|
||||
COMPLETED: 3,
|
||||
CATALOGED: 4,
|
||||
DUBBED: 5
|
||||
} as const
|
||||
|
||||
export type StatusValue = typeof STATUS[keyof typeof STATUS]
|
||||
|
||||
/**
|
||||
* 根据作品状态决定应导航到的路由
|
||||
*/
|
||||
export function getRouteByStatus(status: StatusValue, workId: string): { name: string; params?: Record<string, string> } | null {
|
||||
switch (status) {
|
||||
case STATUS.PENDING:
|
||||
case STATUS.PROCESSING:
|
||||
return { name: 'PublicCreateCreating' }
|
||||
case STATUS.COMPLETED:
|
||||
return { name: 'PublicCreatePreview', params: { workId } }
|
||||
case STATUS.CATALOGED:
|
||||
return { name: 'PublicCreateDubbing', params: { workId } }
|
||||
case STATUS.DUBBED:
|
||||
return { name: 'PublicCreateRead', params: { workId } }
|
||||
case STATUS.FAILED:
|
||||
return null
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
@ -1,156 +0,0 @@
|
||||
<template>
|
||||
<div class="generating-page">
|
||||
<div class="generating-card">
|
||||
<!-- 生成中 -->
|
||||
<div v-if="displayStatus === 'generating'" class="generating-content">
|
||||
<div class="spinner"></div>
|
||||
<h2>正在生成你的绘本...</h2>
|
||||
<p>{{ progressMessage || 'AI 正在根据你的画作和故事构思创作绘本，请稍候' }}</p>
|
||||
<div v-if="progress > 0" class="progress-bar-wrapper">
|
||||
<div class="progress-bar" :style="{ width: progress + '%' }"></div>
|
||||
</div>
|
||||
<p class="progress-text" v-if="progress > 0">{{ progress }}%</p>
|
||||
</div>
|
||||
|
||||
<!-- 已完成 -->
|
||||
<div v-else-if="displayStatus === 'completed'" class="completed-content">
|
||||
<check-circle-outlined class="success-icon" />
|
||||
<h2>绘本生成完成！</h2>
|
||||
<p>你的绘本「{{ title || '未命名作品' }}」已保存到作品库</p>
|
||||
<a-space>
|
||||
<a-button type="primary" size="large" shape="round" @click="router.push(`/p/works/${workId}`)">
|
||||
查看绘本
|
||||
</a-button>
|
||||
<a-button size="large" shape="round" @click="router.push('/p/create')">
|
||||
继续创作
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
<!-- 已失败 -->
|
||||
<div v-else-if="displayStatus === 'failed'" class="failed-content">
|
||||
<close-circle-outlined class="fail-icon" />
|
||||
<h2>生成失败</h2>
|
||||
<p>{{ failReason || '抱歉，绘本生成遇到了问题，请重试' }}</p>
|
||||
<a-button type="primary" size="large" shape="round" @click="router.push('/p/create')">
|
||||
重新创作
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons-vue'
|
||||
import { publicCreationApi } from '@/api/public'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const workId = Number(route.params.id)
|
||||
|
||||
// 状态（INT 类型：-1=FAILED, 0=DRAFT, 1=PENDING, 2=PROCESSING, 3+=完成）
|
||||
const status = ref<number>(1)
|
||||
const title = ref('')
|
||||
const progress = ref(0)
|
||||
const progressMessage = ref('')
|
||||
const failReason = ref('')
|
||||
|
||||
let pollTimer: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
// 计算显示状态
|
||||
const displayStatus = computed<'generating' | 'completed' | 'failed'>(() => {
|
||||
if (status.value === -1) return 'failed'
|
||||
if (status.value >= 3) return 'completed'
|
||||
return 'generating'
|
||||
})
|
||||
|
||||
const pollStatus = async () => {
|
||||
try {
|
||||
const result = await publicCreationApi.getStatus(workId)
|
||||
status.value = typeof result.status === 'number' ? result.status : parseInt(String(result.status)) || 0
|
||||
title.value = result.title || ''
|
||||
|
||||
// 从新的 INT 状态字段读取进度
|
||||
if ('progress' in result) progress.value = (result as any).progress || 0
|
||||
if ('progressMessage' in result) progressMessage.value = (result as any).progressMessage || ''
|
||||
if ('failReason' in result) failReason.value = (result as any).failReason || ''
|
||||
|
||||
// 完成或失败时停止轮询
|
||||
if (status.value === -1 || status.value >= 3) {
|
||||
if (pollTimer) clearInterval(pollTimer)
|
||||
}
|
||||
} catch {
|
||||
// 静默重试
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
pollStatus()
|
||||
pollTimer = setInterval(pollStatus, 3000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (pollTimer) clearInterval(pollTimer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$primary: #6366f1;
|
||||
|
||||
.generating-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 60vh;
|
||||
}
|
||||
|
||||
.generating-card {
|
||||
text-align: center;
|
||||
max-width: 400px;
|
||||
padding: 40px 24px;
|
||||
|
||||
h2 { font-size: 20px; font-weight: 700; color: #1e1b4b; margin: 16px 0 8px; }
|
||||
p { font-size: 13px; color: #9ca3af; margin: 0 0 24px; }
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border: 4px solid rgba($primary, 0.1);
|
||||
border-top-color: $primary;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.progress-bar-wrapper {
|
||||
width: 200px;
|
||||
height: 6px;
|
||||
background: #e5e7eb;
|
||||
border-radius: 3px;
|
||||
margin: 12px auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: $primary;
|
||||
border-radius: 3px;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
min-height: 18px;
|
||||
}
|
||||
|
||||
.success-icon { font-size: 64px; color: #10b981; }
|
||||
.fail-icon { font-size: 64px; color: #ef4444; }
|
||||
</style>
|
||||
@ -1,45 +1,41 @@
|
||||
<template>
|
||||
<div class="creation-container">
|
||||
<!-- 加载中提示 -->
|
||||
<div class="ai-create-shell">
|
||||
<!-- 初始化加载 -->
|
||||
<div v-if="loading" class="loading-wrapper">
|
||||
<div class="spinner"></div>
|
||||
<p class="loading-text">正在加载创作工坊...</p>
|
||||
<p v-if="loadError" class="load-error">{{ loadError }}</p>
|
||||
<a-button v-if="loadError" type="primary" @click="initLeai" style="margin-top: 12px">
|
||||
<a-button v-if="loadError" type="primary" @click="initToken" style="margin-top: 12px">
|
||||
重新加载
|
||||
</a-button>
|
||||
</div>
|
||||
<!-- iframe 嵌入乐读派 H5 -->
|
||||
<iframe v-if="iframeSrc" ref="leaiFrame" :src="iframeSrc" class="creation-iframe" allow="camera;microphone"
|
||||
frameborder="0" />
|
||||
<!-- 子路由渲染 -->
|
||||
<router-view v-else v-slot="{ Component }">
|
||||
<transition name="ai-slide" mode="out-in">
|
||||
<component :is="Component" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { leaiApi } from '@/api/public'
|
||||
import { useAicreateStore } from '@/stores/aicreate'
|
||||
|
||||
/** 子应用路径前缀，须与 lesingle-aicreate-client 的 Vite base、主站 /ai-web 代理一致；末尾必须有 / */
|
||||
const LEAI_EMBED_BASE = `${location.origin}/ai-web/`
|
||||
/** postMessage 的 origin 仅为 scheme+host+port，不含路径 */
|
||||
const LEAI_PARENT_ORIGIN = location.origin
|
||||
|
||||
const router = useRouter()
|
||||
const leaiFrame = ref<HTMLIFrameElement | null>(null)
|
||||
const iframeSrc = ref<string>('')
|
||||
const store = useAicreateStore()
|
||||
const loading = ref(true)
|
||||
const loadError = ref<string>('')
|
||||
const loadError = ref('')
|
||||
|
||||
/** 初始化乐读派 iframe */
|
||||
const initLeai = async () => {
|
||||
/** 获取乐读派 Token 并存入 store */
|
||||
const initToken = async () => {
|
||||
loading.value = true
|
||||
loadError.value = ''
|
||||
console.log('[创作工坊] 嵌入地址', LEAI_EMBED_BASE)
|
||||
try {
|
||||
const data = await leaiApi.getToken()
|
||||
iframeSrc.value = `${LEAI_EMBED_BASE}?token=${encodeURIComponent(data.token)}&orgId=${encodeURIComponent(data.orgId)}&phone=${encodeURIComponent(data.phone)}&embed=1`
|
||||
store.setSession(data.orgId, data.token)
|
||||
if (data.phone) store.setPhone(data.phone)
|
||||
} catch (err: any) {
|
||||
const errMsg = err?.response?.data?.message || err?.message || '加载失败'
|
||||
loadError.value = errMsg
|
||||
@ -51,129 +47,67 @@ const initLeai = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
/** 监听乐读派 H5 postMessage 事件 */
|
||||
const handleMessage = (event: MessageEvent) => {
|
||||
if (event.origin !== LEAI_PARENT_ORIGIN) {
|
||||
console.log('event.origin', event.origin)
|
||||
return
|
||||
}
|
||||
const msg = event.data
|
||||
// 只处理乐读派 H5 的消息
|
||||
if (!msg || msg.source !== 'leai-creation') return
|
||||
|
||||
console.log('[创作工坊] 收到消息:', msg.type, msg.payload)
|
||||
|
||||
switch (msg.type) {
|
||||
case 'READY':
|
||||
console.log('[创作工坊] H5已就绪')
|
||||
break
|
||||
|
||||
case 'TOKEN_EXPIRED':
|
||||
handleTokenExpired(msg.payload)
|
||||
break
|
||||
|
||||
case 'WORK_CREATED':
|
||||
console.log('[创作工坊] 作品创建:', msg.payload?.workId)
|
||||
break
|
||||
|
||||
case 'WORK_COMPLETED':
|
||||
console.log('[创作工坊] 作品完成:', msg.payload?.workId)
|
||||
break
|
||||
|
||||
case 'NAVIGATE_BACK':
|
||||
router.push('/p/works')
|
||||
break
|
||||
|
||||
case 'CREATION_ERROR':
|
||||
message.error('创作遇到问题：' + (msg.payload?.error || '未知错误'))
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
/** 处理 Token 过期：刷新并回传新 Token */
|
||||
const handleTokenExpired = async (payload: any) => {
|
||||
try {
|
||||
const data = await leaiApi.refreshToken()
|
||||
leaiFrame.value?.contentWindow?.postMessage({
|
||||
source: 'leai-creation',
|
||||
version: 1,
|
||||
type: 'TOKEN_REFRESHED',
|
||||
payload: {
|
||||
messageId: payload?.messageId,
|
||||
token: data.token,
|
||||
orgId: data.orgId,
|
||||
phone: data.phone,
|
||||
},
|
||||
}, LEAI_PARENT_ORIGIN)
|
||||
console.log('[创作工坊] Token已刷新')
|
||||
} catch (err) {
|
||||
console.error('[创作工坊] Token刷新失败:', err)
|
||||
message.error('Token刷新失败，请刷新页面重试')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initLeai()
|
||||
window.addEventListener('message', handleMessage)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('message', handleMessage)
|
||||
// 如果 store 中已有有效 token，跳过加载
|
||||
if (store.sessionToken) {
|
||||
loading.value = false
|
||||
} else {
|
||||
initToken()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$primary: #6366f1;
|
||||
|
||||
.creation-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
<style lang="scss">
|
||||
// 壳组件样式不使用 scoped，因为 aicreate.scss 已通过 .ai-create-shell 隔离
|
||||
// 覆盖 PublicLayout 的 public-main 样式，让创作页面全屏展示
|
||||
.public-main:has(> .ai-create-shell) {
|
||||
padding: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
max-width: 430px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.creation-iframe {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
min-height: calc(100vh - 120px);
|
||||
}
|
||||
|
||||
.loading-wrapper {
|
||||
.ai-create-shell {
|
||||
.loading-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner {
|
||||
.spinner {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 4px solid rgba($primary, 0.1);
|
||||
border-top-color: $primary;
|
||||
border: 4px solid rgba(255, 107, 53, 0.15);
|
||||
border-top-color: #FF6B35;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 15px;
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.load-error {
|
||||
.load-error {
|
||||
font-size: 13px;
|
||||
color: #ef4444;
|
||||
margin: 8px 0 0;
|
||||
}
|
||||
|
||||
.ai-slide-enter-active,
|
||||
.ai-slide-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.ai-slide-enter-from { opacity: 0; transform: translateX(30px); }
|
||||
.ai-slide-leave-to { opacity: 0; transform: translateX(-30px); }
|
||||
}
|
||||
</style>
|
||||
|
||||
393
frontend/src/views/public/create/views/BookReaderView.vue
Normal file
393
frontend/src/views/public/create/views/BookReaderView.vue
Normal file
@ -0,0 +1,393 @@
|
||||
<template>
|
||||
<div class="reader-page" @touchstart="onTouchStart" @touchend="onTouchEnd">
|
||||
<!-- 顶栏 -->
|
||||
<div class="reader-top">
|
||||
<div v-if="fromWorks" class="back-btn" @click="handleBack">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round"><path d="M15 18l-6-6 6-6"/></svg>
|
||||
</div>
|
||||
<div class="top-title">{{ title }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 书本区域 -->
|
||||
<div class="book-area">
|
||||
<div
|
||||
class="book"
|
||||
:class="{ 'flip-left': flipDir === -1, 'flip-right': flipDir === 1 }"
|
||||
:style="{ background: pageBg }"
|
||||
>
|
||||
<div class="book-spine" />
|
||||
|
||||
<!-- 封面 -->
|
||||
<div v-if="isCover" class="page-cover">
|
||||
<div class="cover-deco star">⭐</div>
|
||||
<div class="cover-image" v-if="coverImageUrl">
|
||||
<img :src="coverImageUrl" class="cover-real-img" />
|
||||
</div>
|
||||
<div class="cover-image" v-else>📖</div>
|
||||
<div class="cover-title">{{ currentPage.text }}</div>
|
||||
<div class="cover-divider" />
|
||||
<div class="cover-brand">{{ brandName }} AI 绘本</div>
|
||||
<div v-if="authorDisplay" class="cover-author">✍️ {{ authorDisplay }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 正文页 -->
|
||||
<div v-else-if="isContent" class="page-content">
|
||||
<div class="content-image">
|
||||
<img v-if="currentPage.imageUrl" :src="currentPage.imageUrl" class="content-real-img" />
|
||||
<span v-else class="content-emoji">{{ pageEmoji }}</span>
|
||||
<div class="page-num">P{{ idx }}</div>
|
||||
</div>
|
||||
<div class="content-text">{{ currentPage.text }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 封底 -->
|
||||
<div v-else-if="isBack" class="page-back">
|
||||
<div class="back-emoji">🎉</div>
|
||||
<div class="back-title">故事讲完啦！</div>
|
||||
<div class="back-divider" />
|
||||
<div class="back-desc">每一个孩子的画<br/>都是一个精彩的故事</div>
|
||||
<div v-if="workTags.length" class="book-tags">
|
||||
<span v-for="tag in workTags" :key="tag" class="book-tag">{{ tag }}</span>
|
||||
</div>
|
||||
<div class="back-replay" @click="jumpTo(0)">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M1 4v6h6"/><path d="M3.51 15a9 9 0 105.64-8.36L1 10"/></svg>
|
||||
重新阅读
|
||||
</div>
|
||||
<div class="back-brand">{{ brandName }} AI 绘本 · {{ brandSlogan }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 翻页导航 -->
|
||||
<div class="nav-row">
|
||||
<div class="nav-btn prev" :class="{ disabled: idx <= 0 }" @click="go(-1)">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M15 18l-6-6 6-6"/></svg>
|
||||
</div>
|
||||
<div class="nav-label">{{ isCover ? '封面' : isBack ? '— 完 —' : `${idx} / ${totalContent}` }}</div>
|
||||
<div class="nav-btn next" :class="{ disabled: idx >= pages.length - 1 }" @click="go(1)">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 18l6-6-6-6"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 进度条 -->
|
||||
<div class="progress-bar-wrap">
|
||||
<div class="progress-bar-fill" :style="{ width: progressPct + '%' }" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部：再次创作（仅创作流程入口显示，作品列表入口不显示） -->
|
||||
<div v-if="!fromWorks" class="reader-bottom safe-bottom">
|
||||
<button class="btn-primary" @click="goHome">再次创作 →</button>
|
||||
<div class="bottom-hint">本作品可在作品板块中查看</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useAicreateStore } from '@/stores/aicreate'
|
||||
import { getWorkDetail } from '@/api/aicreate'
|
||||
import config from '@/utils/aicreate/config'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const store = useAicreateStore()
|
||||
const fromWorks = new URLSearchParams(window.location.search).get('from') === 'works'
|
||||
|| sessionStorage.getItem('le_from') === 'works'
|
||||
|
||||
function handleBack() {
|
||||
if (fromWorks) {
|
||||
router.push('/p/works')
|
||||
} else {
|
||||
router.back()
|
||||
}
|
||||
}
|
||||
|
||||
const brandName = config.brand.title || '乐读派'
|
||||
const brandSlogan = config.brand.slogan || '让想象力飞翔'
|
||||
|
||||
const idx = ref(0)
|
||||
const flipDir = ref(0)
|
||||
|
||||
const title = ref('我的绘本')
|
||||
const coverImageUrl = ref('')
|
||||
const authorDisplay = ref('')
|
||||
const workTags = ref([])
|
||||
const pages = ref([
|
||||
{ pageNum: 0, text: '我的绘本', type: 'cover' },
|
||||
{ pageNum: 99, text: '', type: 'backcover' },
|
||||
])
|
||||
|
||||
const currentPage = computed(() => pages.value[idx.value])
|
||||
const isCover = computed(() => idx.value === 0)
|
||||
const isBack = computed(() => currentPage.value?.type === 'backcover')
|
||||
const isContent = computed(() => !isCover.value && !isBack.value)
|
||||
const totalContent = computed(() => pages.value.length - 2)
|
||||
const progressPct = computed(() => ((idx.value) / (pages.value.length - 1)) * 100)
|
||||
|
||||
const bgColors = ['#FFF5EB', '#E8F4FD', '#F0F9EC', '#FFF8E1', '#F3E8FF', '#E0F7F4', '#FFF9E6', '#FCE4EC']
|
||||
const emojis = ['📖', '🌅', '🐦', '🗣️', '🍄', '🏠', '❤️', '🌟']
|
||||
const pageEmoji = computed(() => emojis[idx.value % emojis.length])
|
||||
|
||||
const pageBg = computed(() => {
|
||||
if (isCover.value) return 'linear-gradient(135deg, #FF8F65 0%, #FF6B35 40%, #E85D26 100%)'
|
||||
if (isBack.value) return 'linear-gradient(135deg, #FFD4A8 0%, #FFB874 50%, #FF9F43 100%)'
|
||||
return `linear-gradient(180deg, ${bgColors[idx.value % bgColors.length]} 0%, #FFFFFF 100%)`
|
||||
})
|
||||
|
||||
const go = (dir) => {
|
||||
const next = idx.value + dir
|
||||
if (next < 0 || next >= pages.value.length) return
|
||||
flipDir.value = dir
|
||||
setTimeout(() => { idx.value = next; flipDir.value = 0 }, 250)
|
||||
}
|
||||
|
||||
const jumpTo = (i) => { idx.value = i; flipDir.value = 0 }
|
||||
|
||||
// 触摸滑动翻页
|
||||
let touchStartX = 0
|
||||
let touchStartY = 0
|
||||
|
||||
const onTouchStart = (e) => {
|
||||
touchStartX = e.touches[0].clientX
|
||||
touchStartY = e.touches[0].clientY
|
||||
}
|
||||
|
||||
const onTouchEnd = (e) => {
|
||||
const dx = e.changedTouches[0].clientX - touchStartX
|
||||
const dy = e.changedTouches[0].clientY - touchStartY
|
||||
if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy) * 1.5) {
|
||||
go(dx < 0 ? 1 : -1)
|
||||
}
|
||||
}
|
||||
|
||||
const goHome = () => {
|
||||
store.reset() // 清空所有创作缓存，确保新创作从零开始
|
||||
router.push('/p/create')
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const workId = route.params.workId
|
||||
if (!workId) return
|
||||
try {
|
||||
let work
|
||||
const shareToken = new URLSearchParams(window.location.search).get('st') || ''
|
||||
if (store.sessionToken || store.appSecret) {
|
||||
// 认证用户: 用 axios 实例（自动加 HMAC/Bearer 头）
|
||||
const res = await getWorkDetail(workId)
|
||||
work = res.data
|
||||
} else if (shareToken) {
|
||||
// 分享链接: 无认证，用 shareToken
|
||||
const leaiBase = import.meta.env.VITE_LEAI_API_URL || ''
|
||||
const resp = await fetch(`${leaiBase}/api/v1/query/work/${workId}?shareToken=${encodeURIComponent(shareToken)}`)
|
||||
const json = await resp.json()
|
||||
work = json.data
|
||||
} else {
|
||||
return
|
||||
}
|
||||
if (work) {
|
||||
title.value = work.title || '我的绘本'
|
||||
const list = [{ pageNum: 0, text: work.title || '我的绘本', type: 'cover' }]
|
||||
;(work.pageList || []).forEach(p => {
|
||||
if (p.pageNum > 0) list.push({ pageNum: p.pageNum, text: p.text, imageUrl: p.imageUrl })
|
||||
})
|
||||
if (work.pageList?.[0]?.imageUrl) coverImageUrl.value = work.pageList[0].imageUrl
|
||||
if (work.author) authorDisplay.value = work.author
|
||||
if (Array.isArray(work.tags) && work.tags.length > 0) workTags.value = work.tags
|
||||
list.push({ pageNum: 99, text: '', type: 'backcover' })
|
||||
pages.value = list
|
||||
}
|
||||
} catch { /* use default */ }
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.reader-page {
|
||||
min-height: 100vh;
|
||||
background: #F5F0E8;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
// 顶栏
|
||||
.reader-top {
|
||||
padding: 14px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: rgba(255,255,255,0.85);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.back-btn { padding: 4px; cursor: pointer; background: rgba(0,0,0,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
|
||||
.top-title { font-size: 15px; font-weight: 700; color: var(--ai-text); flex: 1; text-align: center; }
|
||||
|
||||
// 书本区域
|
||||
.book-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.book {
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
aspect-ratio: 3/4;
|
||||
border-radius: 4px 16px 16px 4px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: inset -4px 0 8px rgba(0,0,0,0.04), 4px 0 12px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.12);
|
||||
transition: transform 0.25s ease;
|
||||
|
||||
&.flip-left { transform: perspective(800px) rotateY(8deg); }
|
||||
&.flip-right { transform: perspective(800px) rotateY(-8deg); }
|
||||
}
|
||||
|
||||
.book-spine {
|
||||
position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
|
||||
background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.02), rgba(0,0,0,0.08));
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// 封面
|
||||
.page-cover {
|
||||
width: 100%; height: 100%;
|
||||
display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center;
|
||||
padding: 32px; text-align: center;
|
||||
}
|
||||
.cover-deco { position: absolute; opacity: 0.4; &.star { top: 20px; right: 24px; font-size: 24px; } }
|
||||
.cover-image {
|
||||
width: calc(100% - 32px); aspect-ratio: 4/3; border-radius: 16px;
|
||||
background: rgba(255,255,255,0.2);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 72px; margin-bottom: 20px; overflow: hidden;
|
||||
}
|
||||
.cover-real-img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
|
||||
.cover-title {
|
||||
font-size: 24px; font-weight: 900; color: #fff;
|
||||
text-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||||
line-height: 1.4; letter-spacing: 2px;
|
||||
}
|
||||
.cover-divider { width: 60px; height: 3px; background: rgba(255,255,255,0.5); border-radius: 2px; margin: 16px 0; }
|
||||
.cover-brand { font-size: 13px; color: rgba(255,255,255,0.8); }
|
||||
.cover-author {
|
||||
margin-top: 8px; font-size: 12px; color: rgba(255,255,255,0.7);
|
||||
background: rgba(255,255,255,0.15); border-radius: 12px; padding: 4px 14px;
|
||||
}
|
||||
|
||||
// 正文页
|
||||
.page-content { width: 100%; height: 100%; display: flex; flex-direction: column; }
|
||||
.content-image {
|
||||
flex: 1; display: flex; align-items: center; justify-content: center;
|
||||
padding: 16px; position: relative;
|
||||
}
|
||||
.content-emoji { font-size: 64px; }
|
||||
.content-real-img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
|
||||
.page-num {
|
||||
position: absolute; top: 20px; left: 20px;
|
||||
background: rgba(0,0,0,0.4); border-radius: 8px; padding: 2px 10px;
|
||||
font-size: 11px; font-weight: 600; color: #fff;
|
||||
}
|
||||
.content-text {
|
||||
padding: 12px 24px 20px; text-align: center;
|
||||
background: rgba(255,255,255,0.6); border-top: 1px solid rgba(0,0,0,0.04);
|
||||
font-size: 16px; font-weight: 500; line-height: 1.8; letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
// 封底
|
||||
.page-back {
|
||||
width: 100%; height: 100%;
|
||||
display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center;
|
||||
padding: 40px; text-align: center;
|
||||
}
|
||||
.back-emoji { font-size: 56px; margin-bottom: 20px; }
|
||||
.back-title { font-size: 22px; font-weight: 900; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.15); }
|
||||
.back-divider { width: 40px; height: 3px; background: rgba(255,255,255,0.5); border-radius: 2px; margin: 14px 0; }
|
||||
.back-desc { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.8; }
|
||||
.back-replay {
|
||||
margin-top: 24px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: rgba(255,255,255,0.95);
|
||||
color: var(--ai-primary);
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
padding: 12px 32px;
|
||||
border-radius: 28px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
|
||||
transition: transform 0.2s;
|
||||
&:active { transform: scale(0.95); }
|
||||
}
|
||||
.back-brand {
|
||||
margin-top: 20px;
|
||||
font-size: 12px; color: rgba(255,255,255,0.7);
|
||||
}
|
||||
.book-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-top: 16px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.book-tag {
|
||||
display: inline-block;
|
||||
padding: 4px 14px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #E11D48;
|
||||
background: linear-gradient(135deg, #FFF1F2, #FFE4E6);
|
||||
border: 1px solid #FECDD3;
|
||||
}
|
||||
|
||||
// 翻页导航
|
||||
.nav-row {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
width: 100%; max-width: 360px; margin-top: 16px; padding: 0 4px;
|
||||
}
|
||||
.nav-btn {
|
||||
width: 44px; height: 44px; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
cursor: pointer; transition: all 0.2s;
|
||||
&.prev { background: var(--ai-card); box-shadow: var(--ai-shadow-soft); color: var(--ai-text); }
|
||||
&.next { background: var(--ai-gradient); box-shadow: var(--ai-shadow); color: #fff; }
|
||||
&.disabled { opacity: 0; pointer-events: none; }
|
||||
}
|
||||
.nav-label { font-size: 13px; color: var(--ai-text-sub); font-weight: 500; }
|
||||
|
||||
// 进度条
|
||||
.progress-bar-wrap {
|
||||
width: 100%; max-width: 360px; height: 3px;
|
||||
background: #E2DDD4; border-radius: 2px; margin-top: 12px; overflow: hidden;
|
||||
}
|
||||
.progress-bar-fill {
|
||||
height: 100%; background: var(--ai-primary); border-radius: 2px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
// 底部
|
||||
.reader-bottom {
|
||||
padding: 12px 20px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: rgba(255,255,255,0.85);
|
||||
backdrop-filter: blur(10px);
|
||||
button { width: 100%; }
|
||||
}
|
||||
.bottom-hint {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: #9E9E9E;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
374
frontend/src/views/public/create/views/CharactersView.vue
Normal file
374
frontend/src/views/public/create/views/CharactersView.vue
Normal file
@ -0,0 +1,374 @@
|
||||
<template>
|
||||
<div class="char-page page-fullscreen">
|
||||
<PageHeader title="选择主角" subtitle="AI已识别画中角色，请选择绘本主角" :step="1" />
|
||||
|
||||
<div class="content page-content">
|
||||
<!-- 加载中 -->
|
||||
<div v-if="loading" class="loading-state">
|
||||
<div class="loading-emojis">
|
||||
<span class="loading-emoji e1">🔍</span>
|
||||
<span class="loading-emoji e2">🎨</span>
|
||||
<span class="loading-emoji e3">✨</span>
|
||||
</div>
|
||||
<div class="loading-title">AI正在识别角色...</div>
|
||||
<div class="loading-sub">通常需要 10-20 秒</div>
|
||||
<div class="progress-bar"><div class="progress-fill" /></div>
|
||||
</div>
|
||||
|
||||
<!-- 错误状态 -->
|
||||
<template v-else-if="error">
|
||||
<div class="error-state">
|
||||
<div class="error-emoji">😔</div>
|
||||
<div class="error-text">{{ error }}</div>
|
||||
<button class="btn-ghost" style="max-width:200px;margin-top:20px" @click="$router.back()">返回重新上传</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="result-tip">
|
||||
<span class="result-icon">🎉</span>
|
||||
<span>发现 <strong>{{ characters.length }}</strong> 个角色！点击选择绘本主角</span>
|
||||
</div>
|
||||
|
||||
<div class="char-list">
|
||||
<div
|
||||
v-for="c in characters"
|
||||
:key="c.charId"
|
||||
class="char-card"
|
||||
:class="{ selected: selected === c.charId }"
|
||||
@click="selected = c.charId"
|
||||
>
|
||||
<!-- 选中星星装饰 -->
|
||||
<div v-if="selected === c.charId" class="selected-stars">
|
||||
<span class="star s1">⭐</span>
|
||||
<span class="star s2">✨</span>
|
||||
<span class="star s3">⭐</span>
|
||||
</div>
|
||||
|
||||
<div class="char-avatar" @click.stop="c.originalCropUrl && (previewImg = c.originalCropUrl)">
|
||||
<img v-if="c.originalCropUrl" :src="c.originalCropUrl" class="char-img" />
|
||||
<div v-else class="char-placeholder">🎭</div>
|
||||
</div>
|
||||
<div class="char-info">
|
||||
<div class="char-name-row">
|
||||
<span class="char-name">{{ c.name }}</span>
|
||||
<span v-if="c.type === 'HERO'" class="hero-badge">⭐ 推荐主角</span>
|
||||
</div>
|
||||
<div class="char-hint">点击头像可放大查看</div>
|
||||
</div>
|
||||
<div class="check-badge" :class="{ checked: selected === c.charId }">
|
||||
<span v-if="selected === c.charId">✓</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片预览 -->
|
||||
<Transition name="fade">
|
||||
<div v-if="previewImg" class="preview-overlay" @click="previewImg = ''">
|
||||
<img :src="previewImg" class="preview-full-img" />
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
<div class="page-bottom">
|
||||
<button class="btn-primary next-btn" :disabled="!selected" @click="goNext">
|
||||
确定主角，选画风 →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import PageHeader from '@/components/aicreate/PageHeader.vue'
|
||||
import { useAicreateStore } from '@/stores/aicreate'
|
||||
import { extractCharacters } from '@/api/aicreate'
|
||||
|
||||
const router = useRouter()
|
||||
const store = useAicreateStore()
|
||||
const loading = ref(true)
|
||||
const selected = ref<string | null>(null)
|
||||
const characters = ref<any[]>([])
|
||||
const error = ref('')
|
||||
const previewImg = ref('')
|
||||
|
||||
onMounted(async () => {
|
||||
if (store.characters && store.characters.length > 0) {
|
||||
characters.value = store.characters
|
||||
// 自动选中推荐主角
|
||||
const hero = characters.value.find(c => c.type === 'HERO')
|
||||
if (hero) selected.value = hero.charId
|
||||
loading.value = false
|
||||
return
|
||||
}
|
||||
|
||||
if (!store.imageUrl) {
|
||||
error.value = '未上传图片，请返回上传'
|
||||
loading.value = false
|
||||
return
|
||||
}
|
||||
try {
|
||||
const res = await extractCharacters(store.imageUrl)
|
||||
const data = res.data || {}
|
||||
characters.value = (data.characters || []).map((c: any) => ({
|
||||
...c,
|
||||
type: c.charType || c.type || 'SIDEKICK'
|
||||
}))
|
||||
if (characters.value.length === 0) {
|
||||
error.value = 'AI未识别到角色，请更换图片重试'
|
||||
}
|
||||
store.extractId = data.extractId || ''
|
||||
store.characters = characters.value
|
||||
const hero = characters.value.find(c => c.type === 'HERO')
|
||||
if (hero) selected.value = hero.charId
|
||||
} catch (e: any) {
|
||||
error.value = '角色识别失败：' + (e.message || '请检查网络')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
const goNext = () => {
|
||||
store.selectedCharacter = characters.value.find(c => c.charId === selected.value)
|
||||
router.push('/p/create/style')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.char-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #F0F4FF 0%, #F5F0FF 40%, #FFF5F8 70%, #FFFDF7 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.content { flex: 1; padding: 16px 20px; display: flex; flex-direction: column; }
|
||||
|
||||
// Loading
|
||||
.loading-state {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.loading-emojis {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.loading-emoji {
|
||||
font-size: 40px;
|
||||
display: inline-block;
|
||||
animation: emojiPop 1.8s ease-in-out infinite;
|
||||
&.e1 { animation-delay: 0s; }
|
||||
&.e2 { animation-delay: 0.4s; }
|
||||
&.e3 { animation-delay: 0.8s; }
|
||||
}
|
||||
@keyframes emojiPop {
|
||||
0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.5; }
|
||||
50% { transform: scale(1.3) rotate(10deg); opacity: 1; }
|
||||
}
|
||||
.loading-title { font-size: 18px; font-weight: 700; margin-top: 4px; color: var(--ai-text); }
|
||||
.loading-sub { font-size: 14px; color: var(--ai-text-sub); margin-top: 8px; }
|
||||
.progress-bar { width: 220px; height: 6px; background: rgba(108,99,255,0.15); border-radius: 3px; margin-top: 20px; overflow: hidden; }
|
||||
.progress-fill { width: 100%; height: 100%; background: linear-gradient(90deg, #6C63FF, #9B93FF); border-radius: 3px; animation: loading 2s ease-in-out infinite; }
|
||||
@keyframes loading { 0%{transform:translateX(-100%)} 100%{transform:translateX(200%)} }
|
||||
|
||||
// Error
|
||||
.error-state {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.error-emoji { font-size: 56px; }
|
||||
.error-text { font-size: 16px; font-weight: 600; margin-top: 16px; color: var(--ai-text); text-align: center; }
|
||||
|
||||
// Result tip
|
||||
.result-tip {
|
||||
background: linear-gradient(135deg, #E8F5E9, #F1F8E9);
|
||||
border: 1.5px solid #C8E6C9;
|
||||
border-radius: 18px;
|
||||
padding: 14px 18px;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 15px;
|
||||
color: #2E7D32;
|
||||
font-weight: 600;
|
||||
}
|
||||
.result-icon { font-size: 22px; }
|
||||
|
||||
// Character list
|
||||
.char-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.char-card {
|
||||
background: rgba(255,255,255,0.95);
|
||||
border-radius: 20px;
|
||||
padding: 16px 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
border: 3px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.05);
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
|
||||
&:active { transform: scale(0.98); }
|
||||
|
||||
&.selected {
|
||||
border-color: var(--ai-primary);
|
||||
background: linear-gradient(135deg, #FFF5F0 0%, #FFFAF7 50%, #FFF0F5 100%);
|
||||
box-shadow: 0 6px 24px rgba(255, 107, 53, 0.2);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
}
|
||||
|
||||
// 选中星星装饰
|
||||
.selected-stars {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -4px;
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.star {
|
||||
font-size: 14px;
|
||||
animation: starPop 1.5s ease-in-out infinite;
|
||||
&.s1 { animation-delay: 0s; }
|
||||
&.s2 { animation-delay: 0.3s; font-size: 12px; }
|
||||
&.s3 { animation-delay: 0.6s; }
|
||||
}
|
||||
@keyframes starPop {
|
||||
0%, 100% { transform: scale(1); opacity: 0.6; }
|
||||
50% { transform: scale(1.3); opacity: 1; }
|
||||
}
|
||||
|
||||
.char-avatar {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #FFF5F0, #FFE8D6);
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
||||
cursor: zoom-in;
|
||||
transition: transform 0.2s;
|
||||
|
||||
&:active { transform: scale(0.95); }
|
||||
}
|
||||
|
||||
.char-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.char-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.char-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.char-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.char-name {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: var(--ai-text);
|
||||
}
|
||||
|
||||
.char-hint {
|
||||
font-size: 12px;
|
||||
color: var(--ai-text-sub);
|
||||
}
|
||||
|
||||
// Check badge (right side)
|
||||
.check-badge {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
border: 2.5px solid #E2E8F0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.checked {
|
||||
background: linear-gradient(135deg, #FF8C42, #FF6B35);
|
||||
border-color: var(--ai-primary);
|
||||
box-shadow: 0 3px 10px rgba(255, 107, 53, 0.4);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
font-size: 11px;
|
||||
background: linear-gradient(135deg, #FFD166, #FFBE4A);
|
||||
color: #fff;
|
||||
padding: 3px 10px;
|
||||
border-radius: 12px;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 2px 6px rgba(255,209,102,0.3);
|
||||
}
|
||||
|
||||
.bottom-area { margin-top: auto; padding-top: 20px; }
|
||||
|
||||
.next-btn {
|
||||
font-size: 17px !important;
|
||||
padding: 16px 0 !important;
|
||||
border-radius: 28px !important;
|
||||
background: linear-gradient(135deg, #FF8C42, #FF6B35) !important;
|
||||
box-shadow: 0 6px 24px rgba(255,107,53,0.3) !important;
|
||||
}
|
||||
|
||||
// 图片预览
|
||||
.preview-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 999;
|
||||
background: rgba(0,0,0,0.85);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: zoom-out;
|
||||
}
|
||||
.preview-full-img {
|
||||
max-width: 90%;
|
||||
max-height: 80vh;
|
||||
object-fit: contain;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 40px rgba(0,0,0,0.3);
|
||||
}
|
||||
.fade-enter-active, .fade-leave-active { transition: opacity 0.2s; }
|
||||
.fade-enter-from, .fade-leave-to { opacity: 0; }
|
||||
</style>
|
||||
480
frontend/src/views/public/create/views/CreatingView.vue
Normal file
480
frontend/src/views/public/create/views/CreatingView.vue
Normal file
@ -0,0 +1,480 @@
|
||||
<template>
|
||||
<div class="creating-page">
|
||||
<!-- 飘浮装饰元素 -->
|
||||
<div class="floating-deco d1">☁️</div>
|
||||
<div class="floating-deco d2">🌟</div>
|
||||
<div class="floating-deco d3">🎨</div>
|
||||
<div class="floating-deco d4">📖</div>
|
||||
<div class="floating-deco d5">✨</div>
|
||||
|
||||
<!-- 进度环 -->
|
||||
<div class="ring-wrap">
|
||||
<svg width="180" height="180" class="ring-svg">
|
||||
<circle cx="90" cy="90" r="80" fill="none" stroke="rgba(255,255,255,0.5)" stroke-width="8" />
|
||||
<circle cx="90" cy="90" r="80" fill="none" stroke="var(--ai-primary)" stroke-width="8"
|
||||
:stroke-dasharray="502" :stroke-dashoffset="502 - (502 * progress / 100)"
|
||||
stroke-linecap="round" class="ring-fill" />
|
||||
</svg>
|
||||
<div class="ring-center">
|
||||
<div class="ring-pct">{{ progress }}%</div>
|
||||
<div class="ring-label">创作进度</div>
|
||||
</div>
|
||||
<!-- 星星点缀 -->
|
||||
<div class="ring-stars">
|
||||
<span class="ring-star s1">✨</span>
|
||||
<span class="ring-star s2">⭐</span>
|
||||
<span class="ring-star s3">✨</span>
|
||||
<span class="ring-star s4">⭐</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 状态文字 -->
|
||||
<div class="stage-text">{{ stage }}</div>
|
||||
|
||||
<!-- 轮转创作 tips -->
|
||||
<div v-if="!error" class="rotating-tips">
|
||||
<Transition name="tip-fade" mode="out-in">
|
||||
<div class="rotating-tip" :key="currentTipIdx">{{ creatingTips[currentTipIdx] }}</div>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
<!-- 网络波动提示（非致命，轮询仍在继续） -->
|
||||
<div v-if="networkWarn && !error" class="network-warn">
|
||||
网络不太稳定，正在尝试重新连接{{ dots }}
|
||||
</div>
|
||||
|
||||
<!-- 错误重试 -->
|
||||
<div v-if="error" class="error-box">
|
||||
<div class="error-emoji">😔</div>
|
||||
<div class="error-text">{{ error }}</div>
|
||||
<button v-if="store.workId" class="btn-primary error-retry-btn" @click="resumePolling">恢复查询进度</button>
|
||||
<button class="btn-primary error-retry-btn" :class="{ 'btn-outline': store.workId }" @click="retry">重新创作</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { Client } from '@stomp/stompjs'
|
||||
import { useAicreateStore } from '@/stores/aicreate'
|
||||
import { createStory, getWorkDetail } from '@/api/aicreate'
|
||||
import { STATUS, getRouteByStatus } from '@/utils/aicreate/status'
|
||||
import config from '@/utils/aicreate/config'
|
||||
|
||||
const router = useRouter()
|
||||
const store = useAicreateStore()
|
||||
const progress = ref(0)
|
||||
const stage = ref('准备中...')
|
||||
const dots = ref('')
|
||||
const error = ref('')
|
||||
const networkWarn = ref(false)
|
||||
const currentTipIdx = ref(0)
|
||||
const creatingTips = [
|
||||
'AI 画师正在构思精彩故事...',
|
||||
'魔法画笔正在绘制插画...',
|
||||
'故事世界正在成形...',
|
||||
'角色们正在准备登场...',
|
||||
'色彩魔法正在施展中...',
|
||||
]
|
||||
|
||||
let pollTimer: ReturnType<typeof setInterval> | null = null
|
||||
let dotTimer: ReturnType<typeof setInterval> | null = null
|
||||
let tipTimer: ReturnType<typeof setInterval> | null = null
|
||||
let stompClient: any = null
|
||||
let wsDegraded = false // WebSocket 已降级到轮询，防止重复降级
|
||||
let submitted = false
|
||||
let consecutiveErrors = 0
|
||||
const MAX_SILENT_ERRORS = 3
|
||||
const MAX_POLL_ERRORS = 15
|
||||
|
||||
// 错误消息脱敏
|
||||
function sanitizeError(msg: string | undefined): string {
|
||||
if (!msg) return '创作遇到问题，请重新尝试'
|
||||
if (msg.includes('400') || msg.includes('status code')) return '创作请求异常，请返回重新操作'
|
||||
if (msg.includes('火山引擎') || msg.includes('VolcEngine')) return 'AI 服务暂时繁忙，请稍后重试'
|
||||
if (msg.includes('额度')) return msg // 额度提示保留原文
|
||||
if (msg.includes('重复') || msg.includes('DUPLICATE')) return '您有正在创作的作品，请等待完成'
|
||||
if (msg.includes('timeout') || msg.includes('超时')) return '创作超时，请重新尝试'
|
||||
if (msg.includes('OSS') || msg.includes('MiniMax')) return '服务暂时不可用，请稍后重试'
|
||||
if (msg.length > 50) return '创作遇到问题，请重新尝试'
|
||||
return msg
|
||||
}
|
||||
|
||||
// 将运维级消息转为用户友好消息（隐藏分组/模型/耗时等内部细节）
|
||||
function friendlyStage(pct: number, msg: string): string {
|
||||
if (!msg) return '创作中...'
|
||||
// 按关键词匹配，优先级从高到低
|
||||
if (msg.includes('创作完成')) return '🎉 绘本创作完成！'
|
||||
if (msg.includes('绘图完成') || msg.includes('绘制完成')) return '🎨 插画绘制完成'
|
||||
if (msg.includes('第') && msg.includes('组')) return '🎨 正在绘制插画...'
|
||||
if (msg.includes('绘图') || msg.includes('绘制') || msg.includes('插画')) return '🎨 正在绘制插画...'
|
||||
if (msg.includes('补生成')) return '🎨 正在绘制插画...'
|
||||
if (msg.includes('语音合成') || msg.includes('配音')) return '🔊 正在合成语音...'
|
||||
if (msg.includes('故事') && msg.includes('完成')) return '📝 故事编写完成，开始绘图...'
|
||||
if (msg.includes('故事') || msg.includes('创作故事')) return '📝 正在编写故事...'
|
||||
if (msg.includes('适配') || msg.includes('角色')) return '🎨 正在准备绘图...'
|
||||
if (msg.includes('重试')) return '✨ 遇到小问题，正在重新创作...'
|
||||
if (msg.includes('失败')) return '⏳ 处理中，请稍候...'
|
||||
// 兜底：根据进度百分比返回友好提示，不展示原始技术消息
|
||||
if (pct < 20) return '✨ 正在提交创作...'
|
||||
if (pct < 50) return '📝 正在编写故事...'
|
||||
if (pct < 80) return '🎨 正在绘制插画...'
|
||||
if (pct < 100) return '🔊 即将完成...'
|
||||
return '🎉 绘本创作完成！'
|
||||
}
|
||||
|
||||
// 持久化 workId 到 localStorage，页面刷新后可恢复轮询
|
||||
function saveWorkId(id: string) {
|
||||
store.workId = id
|
||||
if (id) {
|
||||
localStorage.setItem('le_workId', id)
|
||||
} else {
|
||||
localStorage.removeItem('le_workId')
|
||||
}
|
||||
}
|
||||
|
||||
function restoreWorkId() {
|
||||
if (!store.workId) {
|
||||
store.workId = localStorage.getItem('le_workId') || ''
|
||||
}
|
||||
}
|
||||
|
||||
// ─── WebSocket 实时推送 (首次进入使用) ───
|
||||
const startWebSocket = (workId: string) => {
|
||||
wsDegraded = false
|
||||
const wsBase = config.wsBaseUrl
|
||||
? config.wsBaseUrl
|
||||
: `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}`
|
||||
const wsUrl = `${wsBase}/ws/websocket?orgId=${encodeURIComponent(store.orgId)}`
|
||||
|
||||
stompClient = new Client({
|
||||
brokerURL: wsUrl,
|
||||
reconnectDelay: 0, // 不自动重连，失败直接降级轮询
|
||||
onConnect: () => {
|
||||
stompClient.subscribe(`/topic/progress/${workId}`, (msg: any) => {
|
||||
try {
|
||||
const data = JSON.parse(msg.body)
|
||||
if (data.progress != null && data.progress > progress.value) progress.value = data.progress
|
||||
if (data.message) stage.value = friendlyStage(data.progress, data.message)
|
||||
|
||||
if (data.progress >= 100) {
|
||||
progress.value = 100
|
||||
stage.value = '🎉 绘本创作完成！'
|
||||
closeWebSocket()
|
||||
saveWorkId('')
|
||||
const route = getRouteByStatus(STATUS.COMPLETED, workId)
|
||||
if (route) setTimeout(() => router.replace(route), 800)
|
||||
} else if (data.progress < 0) {
|
||||
closeWebSocket()
|
||||
saveWorkId('')
|
||||
error.value = sanitizeError(data.message)
|
||||
}
|
||||
} catch { /* ignore parse error */ }
|
||||
})
|
||||
},
|
||||
onStompError: () => {
|
||||
if (wsDegraded) return
|
||||
wsDegraded = true
|
||||
closeWebSocket()
|
||||
startPolling(workId)
|
||||
},
|
||||
onWebSocketError: () => {
|
||||
if (wsDegraded) return
|
||||
wsDegraded = true
|
||||
closeWebSocket()
|
||||
startPolling(workId)
|
||||
},
|
||||
onWebSocketClose: () => {
|
||||
if (wsDegraded) return
|
||||
if (store.workId) {
|
||||
wsDegraded = true
|
||||
closeWebSocket()
|
||||
startPolling(workId)
|
||||
}
|
||||
}
|
||||
})
|
||||
stompClient.activate()
|
||||
}
|
||||
|
||||
const closeWebSocket = () => {
|
||||
if (stompClient) {
|
||||
try { stompClient.deactivate() } catch { /* ignore */ }
|
||||
stompClient = null
|
||||
}
|
||||
}
|
||||
|
||||
// ─── B2 轮询 (重进 / WebSocket 降级使用) ───
|
||||
const startPolling = (workId: string) => {
|
||||
if (pollTimer) clearInterval(pollTimer)
|
||||
consecutiveErrors = 0
|
||||
networkWarn.value = false
|
||||
|
||||
pollTimer = setInterval(async () => {
|
||||
try {
|
||||
const detail = await getWorkDetail(workId)
|
||||
const work = detail.data
|
||||
if (!work) return
|
||||
|
||||
// 轮询成功，清除网络异常状态
|
||||
if (consecutiveErrors > 0 || networkWarn.value) {
|
||||
consecutiveErrors = 0
|
||||
networkWarn.value = false
|
||||
}
|
||||
|
||||
if (work.progress != null && work.progress > progress.value) progress.value = work.progress
|
||||
if (work.progressMessage) stage.value = friendlyStage(progress.value, work.progressMessage)
|
||||
|
||||
// 状态 >= COMPLETED(3) 表示创作已结束，根据具体状态导航
|
||||
if (work.status >= STATUS.COMPLETED) {
|
||||
progress.value = 100
|
||||
stage.value = '🎉 绘本创作完成！'
|
||||
clearInterval(pollTimer!)
|
||||
pollTimer = null
|
||||
saveWorkId('')
|
||||
const route = getRouteByStatus(work.status, workId)
|
||||
if (route) setTimeout(() => router.replace(route), 800)
|
||||
} else if (work.status === STATUS.FAILED) {
|
||||
clearInterval(pollTimer!)
|
||||
pollTimer = null
|
||||
saveWorkId('')
|
||||
error.value = sanitizeError(work.failReason)
|
||||
}
|
||||
} catch {
|
||||
consecutiveErrors++
|
||||
if (consecutiveErrors > MAX_POLL_ERRORS) {
|
||||
// 连续失败太多次，暂停轮询，让用户手动恢复
|
||||
clearInterval(pollTimer!)
|
||||
pollTimer = null
|
||||
networkWarn.value = false
|
||||
error.value = '网络连接异常，创作仍在后台进行中'
|
||||
} else if (consecutiveErrors > MAX_SILENT_ERRORS) {
|
||||
// 连续失败超过阈值，提示网络波动但继续轮询
|
||||
networkWarn.value = true
|
||||
}
|
||||
// 前几次静默忽略，避免偶尔的网络抖动触发提示
|
||||
}
|
||||
}, 8000)
|
||||
}
|
||||
|
||||
const startCreation = async () => {
|
||||
if (submitted) return // 防重复
|
||||
submitted = true
|
||||
|
||||
error.value = ''
|
||||
progress.value = 5
|
||||
stage.value = '📝 正在提交创作请求...'
|
||||
|
||||
try {
|
||||
const res = await createStory({
|
||||
imageUrl: store.imageUrl,
|
||||
storyHint: store.storyData?.storyHint || '',
|
||||
style: store.selectedStyle,
|
||||
title: store.storyData?.title || '',
|
||||
author: store.storyData?.author,
|
||||
heroCharId: store.selectedCharacter?.charId,
|
||||
extractId: store.extractId,
|
||||
})
|
||||
|
||||
const workId = res.data?.workId
|
||||
if (!workId) {
|
||||
error.value = res.msg || '创作提交失败'
|
||||
submitted = false
|
||||
return
|
||||
}
|
||||
|
||||
saveWorkId(workId)
|
||||
progress.value = 10
|
||||
stage.value = '📝 故事构思中...'
|
||||
// 首次提交：优先 WebSocket 实时推送
|
||||
startWebSocket(workId)
|
||||
|
||||
} catch (e: any) {
|
||||
// 创作提交可能已入库（超时但服务端已接收）
|
||||
if (store.workId) {
|
||||
progress.value = 10
|
||||
stage.value = '📝 创作已提交到后台...'
|
||||
startPolling(store.workId)
|
||||
} else {
|
||||
error.value = sanitizeError(e.message)
|
||||
submitted = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const resumePolling = () => {
|
||||
error.value = ''
|
||||
networkWarn.value = false
|
||||
progress.value = 10
|
||||
stage.value = '📝 正在查询创作进度...'
|
||||
startPolling(store.workId)
|
||||
}
|
||||
|
||||
const retry = () => {
|
||||
saveWorkId('')
|
||||
submitted = false
|
||||
startCreation()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
dotTimer = setInterval(() => {
|
||||
dots.value = dots.value.length >= 3 ? '' : dots.value + '.'
|
||||
}, 500)
|
||||
|
||||
tipTimer = setInterval(() => {
|
||||
currentTipIdx.value = (currentTipIdx.value + 1) % creatingTips.length
|
||||
}, 3500)
|
||||
|
||||
// 恢复 workId：优先从URL参数（作品列表跳入），其次从localStorage（页面刷新）
|
||||
const urlWorkId = new URLSearchParams(window.location.search).get('workId')
|
||||
if (urlWorkId) {
|
||||
saveWorkId(urlWorkId)
|
||||
} else {
|
||||
restoreWorkId()
|
||||
}
|
||||
|
||||
// 如果已有进行中的任务，恢复轮询而非重新提交
|
||||
if (store.workId) {
|
||||
submitted = true
|
||||
progress.value = 10
|
||||
stage.value = '📝 正在查询创作进度...'
|
||||
startPolling(store.workId)
|
||||
} else {
|
||||
startCreation()
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
closeWebSocket()
|
||||
if (pollTimer) clearInterval(pollTimer)
|
||||
if (dotTimer) clearInterval(dotTimer)
|
||||
if (tipTimer) clearInterval(tipTimer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.creating-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(160deg, #FFF8E1 0%, #FFF0F0 40%, #F0F8FF 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 飘浮装饰元素 */
|
||||
.floating-deco {
|
||||
position: absolute;
|
||||
font-size: 28px;
|
||||
opacity: 0.35;
|
||||
pointer-events: none;
|
||||
animation: floatDeco 6s ease-in-out infinite;
|
||||
}
|
||||
.d1 { top: 8%; left: 10%; animation-delay: 0s; font-size: 36px; }
|
||||
.d2 { top: 15%; right: 12%; animation-delay: 1.2s; font-size: 24px; }
|
||||
.d3 { bottom: 20%; left: 8%; animation-delay: 2.4s; }
|
||||
.d4 { bottom: 12%; right: 15%; animation-delay: 0.8s; font-size: 32px; }
|
||||
.d5 { top: 40%; right: 6%; animation-delay: 3.6s; font-size: 20px; }
|
||||
@keyframes floatDeco {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
25% { transform: translateY(-12px) rotate(5deg); }
|
||||
50% { transform: translateY(-6px) rotate(-3deg); }
|
||||
75% { transform: translateY(-16px) rotate(3deg); }
|
||||
}
|
||||
|
||||
.ring-wrap {
|
||||
position: relative;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.ring-svg { transform: rotate(-90deg); }
|
||||
.ring-fill { transition: stroke-dashoffset 0.8s ease; }
|
||||
.ring-center {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.ring-pct { font-size: 36px; font-weight: 900; color: var(--ai-primary); }
|
||||
.ring-label { font-size: 12px; color: var(--ai-text-sub); }
|
||||
|
||||
/* 星星点缀在进度环外圈 */
|
||||
.ring-stars {
|
||||
position: absolute;
|
||||
inset: -12px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.ring-star {
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
animation: starTwinkle 2s ease-in-out infinite;
|
||||
}
|
||||
.ring-star.s1 { top: -4px; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
|
||||
.ring-star.s2 { bottom: -4px; left: 50%; transform: translateX(-50%); animation-delay: 0.5s; }
|
||||
.ring-star.s3 { left: -4px; top: 50%; transform: translateY(-50%); animation-delay: 1s; }
|
||||
.ring-star.s4 { right: -4px; top: 50%; transform: translateY(-50%); animation-delay: 1.5s; }
|
||||
@keyframes starTwinkle {
|
||||
0%, 100% { opacity: 0.3; transform: scale(0.8); }
|
||||
50% { opacity: 1; transform: scale(1.2); }
|
||||
}
|
||||
|
||||
.stage-text { font-size: 18px; font-weight: 700; text-align: center; }
|
||||
|
||||
/* 轮转 tips */
|
||||
.rotating-tips {
|
||||
margin-top: 14px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.rotating-tip {
|
||||
font-size: 14px;
|
||||
color: #B0876E;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
.tip-fade-enter-active,
|
||||
.tip-fade-leave-active {
|
||||
transition: opacity 0.5s ease, transform 0.5s ease;
|
||||
}
|
||||
.tip-fade-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
.tip-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.network-warn {
|
||||
margin-top: 12px;
|
||||
font-size: 13px;
|
||||
color: #F59E0B;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error-box {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.error-emoji { font-size: 40px; margin-bottom: 12px; }
|
||||
.error-text { color: #EF4444; font-size: 14px; font-weight: 600; line-height: 1.6; max-width: 260px; }
|
||||
.error-retry-btn { max-width: 200px; margin-top: 16px; }
|
||||
.error-retry-btn.btn-outline {
|
||||
background: transparent;
|
||||
color: var(--ai-text-sub);
|
||||
border: 1px solid var(--ai-border);
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
957
frontend/src/views/public/create/views/DubbingView.vue
Normal file
957
frontend/src/views/public/create/views/DubbingView.vue
Normal file
@ -0,0 +1,957 @@
|
||||
<template>
|
||||
<div class="dubbing-page">
|
||||
<PageHeader title="绘本配音" subtitle="为每一页添加AI语音或人工配音" :showBack="true" />
|
||||
|
||||
<div v-if="loading" class="loading-state">
|
||||
<div class="loading-emojis">
|
||||
<span class="loading-emoji e1">🎙️</span>
|
||||
<span class="loading-emoji e2">🎵</span>
|
||||
<span class="loading-emoji e3">✨</span>
|
||||
</div>
|
||||
<div class="loading-text">正在加载绘本...</div>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<div class="content">
|
||||
<!-- 当前页展示 -->
|
||||
<div class="page-display">
|
||||
<div class="page-image-wrap">
|
||||
<div class="page-badge-pill">{{ currentPage.pageNum === 0 ? '封面' : 'P' + currentPage.pageNum }}</div>
|
||||
<img v-if="currentPage.imageUrl" :src="currentPage.imageUrl" class="page-image" />
|
||||
<div v-else class="page-image placeholder">📖</div>
|
||||
</div>
|
||||
<div v-if="currentPage.text" class="page-text-card">
|
||||
<div class="text-quote-mark">"</div>
|
||||
<div class="page-text-content">{{ currentPage.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 音频控制 -->
|
||||
<div class="audio-controls">
|
||||
<template v-if="currentAudioSrc">
|
||||
<div class="audio-row">
|
||||
<button class="play-btn" @click="togglePlay">
|
||||
<span v-if="isPlaying">⏸</span>
|
||||
<span v-else>▶️</span>
|
||||
</button>
|
||||
<div class="audio-progress">
|
||||
<div class="audio-bar">
|
||||
<div class="audio-bar-fill" :style="{ width: playProgress + '%' }" />
|
||||
</div>
|
||||
<span class="audio-time">{{ formatTime(playCurrentTime) }} / {{ formatTime(playDuration) }}</span>
|
||||
</div>
|
||||
<div class="audio-source-tag" :class="currentPage.localBlob ? 'local' : currentPage.isAiVoice === false ? 'human' : 'ai'">
|
||||
{{ currentPage.localBlob ? '🎤 本地' : currentPage.isAiVoice === false ? '🎤 人工' : '🤖 AI' }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="audio-empty">
|
||||
<span class="empty-icon">🔇</span>
|
||||
<span>暂未配音</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 配音按钮 -->
|
||||
<div class="voice-actions">
|
||||
<button
|
||||
class="record-btn"
|
||||
:class="{ recording: isRecording }"
|
||||
:disabled="voicingSingle || voicingAll"
|
||||
@mousedown.prevent="startRecording"
|
||||
@mouseup.prevent="stopRecording"
|
||||
@mouseleave="isRecording && stopRecording()"
|
||||
@touchstart.prevent="startRecording"
|
||||
@touchend.prevent="stopRecording"
|
||||
@touchcancel="isRecording && stopRecording()"
|
||||
>
|
||||
<span class="record-icon">{{ isRecording ? '🔴' : '🎤' }}</span>
|
||||
<span class="record-text">{{ isRecording ? '录音中... 松开结束' : '按住录音' }}</span>
|
||||
</button>
|
||||
<div class="ai-btns">
|
||||
<button
|
||||
class="ai-btn single"
|
||||
:disabled="voicingSingle || voicingAll || isRecording"
|
||||
@click="voiceSingle"
|
||||
>
|
||||
<span>🤖</span>
|
||||
{{ voicingSingle ? '配音中...' : 'AI配音' }}
|
||||
</button>
|
||||
<button
|
||||
class="ai-btn all"
|
||||
:disabled="voicingSingle || voicingAll || isRecording"
|
||||
@click="voiceAllConfirm"
|
||||
>
|
||||
<span>✨</span>
|
||||
{{ voicingAll ? '配音中...' : '全部AI' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页面缩略图横向列表 -->
|
||||
<div class="thumb-section">
|
||||
<div class="thumb-header">
|
||||
<span class="thumb-title">配音进度</span>
|
||||
<span class="thumb-count">{{ voicedCount }}/{{ pages.length }} 已完成</span>
|
||||
</div>
|
||||
<div class="thumb-strip">
|
||||
<div
|
||||
v-for="(p, i) in pages" :key="i"
|
||||
class="thumb-item" :class="{ active: i === idx, voiced: p.audioUrl || p.localBlob }"
|
||||
@click="switchPage(i)"
|
||||
>
|
||||
<img v-if="p.imageUrl" :src="p.imageUrl" class="thumb-img" />
|
||||
<div v-else class="thumb-placeholder">{{ p.pageNum === 0 ? '封' : p.pageNum }}</div>
|
||||
<div class="thumb-status">
|
||||
<span v-if="p.localBlob" class="status-dot local-dot" />
|
||||
<span v-else-if="p.audioUrl" class="status-dot ai-dot" />
|
||||
<span v-else class="status-dot empty-dot" />
|
||||
</div>
|
||||
<div v-if="p.audioUrl || p.localBlob" class="thumb-voice-icon">🔊</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 -->
|
||||
<div class="bottom-bar safe-bottom">
|
||||
<button class="btn-primary finish-btn" :disabled="submitting" @click="finish">
|
||||
{{ submitting ? '提交中...' : '完成配音 →' }}
|
||||
</button>
|
||||
<div v-if="localCount > 0" class="local-hint">🎤 {{ localCount }}页本地录音将在提交时上传</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Toast -->
|
||||
<Transition name="fade">
|
||||
<div v-if="toast" class="toast">{{ toast }}</div>
|
||||
</Transition>
|
||||
|
||||
<!-- 确认弹窗（替代原生 confirm） -->
|
||||
<div v-if="confirmVisible" class="confirm-overlay" @click.self="handleConfirmCancel">
|
||||
<div class="confirm-modal">
|
||||
<div class="confirm-title">{{ confirmTitle }}</div>
|
||||
<div class="confirm-content">{{ confirmContent }}</div>
|
||||
<div class="confirm-actions">
|
||||
<button class="confirm-btn cancel" @click="handleConfirmCancel">{{ confirmCancelText }}</button>
|
||||
<button class="confirm-btn ok" @click="handleConfirmOk">{{ confirmOkText }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import PageHeader from '@/components/aicreate/PageHeader.vue'
|
||||
import { getWorkDetail, voicePage, ossUpload, batchUpdateAudio, finishDubbing } from '@/api/aicreate'
|
||||
import { useAicreateStore } from '@/stores/aicreate'
|
||||
import { STATUS, getRouteByStatus } from '@/utils/aicreate/status'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const store = useAicreateStore()
|
||||
const workId = computed(() => route.params.workId || store.workId)
|
||||
|
||||
const loading = ref(true)
|
||||
const submitting = ref(false)
|
||||
const pages = ref([])
|
||||
const idx = ref(0)
|
||||
const toast = ref('')
|
||||
|
||||
// Voice state
|
||||
const voicingSingle = ref(false)
|
||||
const voicingAll = ref(false)
|
||||
|
||||
// Recording state
|
||||
const isRecording = ref(false)
|
||||
let mediaRecorder = null
|
||||
let recordedChunks = []
|
||||
|
||||
// Audio playback state
|
||||
let audioEl = null
|
||||
const isPlaying = ref(false)
|
||||
const playProgress = ref(0)
|
||||
const playCurrentTime = ref(0)
|
||||
const playDuration = ref(0)
|
||||
|
||||
const currentPage = computed(() => pages.value[idx.value] || {})
|
||||
|
||||
// 当前页的播放源：优先本地 blob，其次服务端 audioUrl
|
||||
const currentAudioSrc = computed(() => {
|
||||
const p = currentPage.value
|
||||
if (p.localBlob) return URL.createObjectURL(p.localBlob)
|
||||
return p.audioUrl || null
|
||||
})
|
||||
|
||||
const voicedCount = computed(() => pages.value.filter(p => p.audioUrl || p.localBlob).length)
|
||||
const localCount = computed(() => pages.value.filter(p => p.localBlob).length)
|
||||
|
||||
function showToast(msg) {
|
||||
toast.value = msg
|
||||
setTimeout(() => { toast.value = '' }, 2500)
|
||||
}
|
||||
|
||||
// -- 确认弹窗（替代原生 confirm） --
|
||||
const confirmVisible = ref(false)
|
||||
const confirmTitle = ref('')
|
||||
const confirmContent = ref('')
|
||||
const confirmOkText = ref('确认')
|
||||
const confirmCancelText = ref('取消')
|
||||
let confirmResolve = null
|
||||
|
||||
/**
|
||||
* 显示确认弹窗（替代原生 confirm）
|
||||
* @returns {Promise<boolean>}
|
||||
*/
|
||||
function showConfirm(content, options = {}) {
|
||||
confirmTitle.value = options.title || '确认操作'
|
||||
confirmContent.value = content
|
||||
confirmOkText.value = options.okText || '确认'
|
||||
confirmCancelText.value = options.cancelText || '取消'
|
||||
confirmVisible.value = true
|
||||
return new Promise((resolve) => { confirmResolve = resolve })
|
||||
}
|
||||
|
||||
function handleConfirmOk() {
|
||||
confirmVisible.value = false
|
||||
confirmResolve?.(true)
|
||||
confirmResolve = null
|
||||
}
|
||||
|
||||
function handleConfirmCancel() {
|
||||
confirmVisible.value = false
|
||||
confirmResolve?.(false)
|
||||
confirmResolve = null
|
||||
}
|
||||
|
||||
function formatTime(sec) {
|
||||
if (!sec || isNaN(sec)) return '0:00'
|
||||
const m = Math.floor(sec / 60)
|
||||
const s = Math.floor(sec % 60)
|
||||
return m + ':' + (s < 10 ? '0' : '') + s
|
||||
}
|
||||
|
||||
// --- Audio Playback ---
|
||||
|
||||
function stopAudio() {
|
||||
if (audioEl) {
|
||||
audioEl.pause()
|
||||
audioEl.onerror = null // 先清回调，再清 src，防止空 src 触发 onerror
|
||||
audioEl.onended = null
|
||||
audioEl.ontimeupdate = null
|
||||
audioEl.src = ''
|
||||
audioEl = null
|
||||
}
|
||||
isPlaying.value = false
|
||||
playProgress.value = 0
|
||||
playCurrentTime.value = 0
|
||||
playDuration.value = 0
|
||||
}
|
||||
|
||||
function togglePlay() {
|
||||
const src = currentAudioSrc.value
|
||||
if (!src) return
|
||||
|
||||
if (isPlaying.value) {
|
||||
audioEl?.pause()
|
||||
isPlaying.value = false
|
||||
return
|
||||
}
|
||||
|
||||
if (!audioEl) audioEl = new Audio()
|
||||
|
||||
// 每次用最新的 src（blob URL 可能变化）
|
||||
audioEl.src = src
|
||||
audioEl.load()
|
||||
|
||||
audioEl.ontimeupdate = () => {
|
||||
playCurrentTime.value = audioEl.currentTime
|
||||
playDuration.value = audioEl.duration || 0
|
||||
playProgress.value = audioEl.duration ? (audioEl.currentTime / audioEl.duration * 100) : 0
|
||||
}
|
||||
audioEl.onended = () => { isPlaying.value = false; playProgress.value = 100 }
|
||||
audioEl.onerror = () => { isPlaying.value = false; showToast('播放失败') }
|
||||
|
||||
audioEl.play().then(() => { isPlaying.value = true }).catch(() => { showToast('播放失败，请点击重试') })
|
||||
}
|
||||
|
||||
function switchPage(i) {
|
||||
stopAudio()
|
||||
idx.value = i
|
||||
}
|
||||
|
||||
watch(idx, () => { stopAudio() })
|
||||
|
||||
// --- Manual Recording (按住录音) ---
|
||||
|
||||
async function startRecording() {
|
||||
if (isRecording.value || voicingSingle.value || voicingAll.value) return
|
||||
|
||||
stopAudio() // 停止播放
|
||||
|
||||
try {
|
||||
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
|
||||
showToast('请使用 HTTPS 访问以启用录音功能')
|
||||
return
|
||||
}
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
|
||||
recordedChunks = []
|
||||
mediaRecorder = new MediaRecorder(stream, { mimeType: getSupportedMimeType() })
|
||||
|
||||
mediaRecorder.ondataavailable = (e) => {
|
||||
if (e.data.size > 0) recordedChunks.push(e.data)
|
||||
}
|
||||
|
||||
mediaRecorder.onstop = () => {
|
||||
// 释放麦克风
|
||||
stream.getTracks().forEach(t => t.stop())
|
||||
|
||||
if (recordedChunks.length === 0) return
|
||||
|
||||
const blob = new Blob(recordedChunks, { type: mediaRecorder.mimeType })
|
||||
|
||||
// 检查录音大小（太短的过滤掉）
|
||||
if (blob.size < 1000) {
|
||||
showToast('录音太短，请重新录制')
|
||||
return
|
||||
}
|
||||
|
||||
// 存入当前页的 localBlob
|
||||
const p = pages.value[idx.value]
|
||||
if (p) {
|
||||
p.localBlob = blob
|
||||
p.isAiVoice = false
|
||||
showToast('录音完成!')
|
||||
// 自动跳到下一个未配音的页面
|
||||
autoAdvance()
|
||||
}
|
||||
}
|
||||
|
||||
mediaRecorder.start()
|
||||
isRecording.value = true
|
||||
} catch (e) {
|
||||
if (e.name === 'NotAllowedError') {
|
||||
showToast('请允许麦克风权限后重试')
|
||||
} else {
|
||||
showToast('无法启动录音: ' + (e.message || '未知错误'))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function stopRecording() {
|
||||
if (!isRecording.value || !mediaRecorder) return
|
||||
isRecording.value = false
|
||||
if (mediaRecorder.state === 'recording') {
|
||||
mediaRecorder.stop()
|
||||
}
|
||||
}
|
||||
|
||||
function getSupportedMimeType() {
|
||||
const types = ['audio/webm;codecs=opus', 'audio/webm', 'audio/mp4', 'audio/ogg']
|
||||
for (const t of types) {
|
||||
if (MediaRecorder.isTypeSupported(t)) return t
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
// 自动跳到下一个未配音的页
|
||||
function autoAdvance() {
|
||||
for (let i = idx.value + 1; i < pages.value.length; i++) {
|
||||
if (!pages.value[i].audioUrl && !pages.value[i].localBlob) {
|
||||
idx.value = i
|
||||
return
|
||||
}
|
||||
}
|
||||
// 都配完了，不跳
|
||||
}
|
||||
|
||||
// --- AI Voice ---
|
||||
|
||||
async function voiceSingle() {
|
||||
voicingSingle.value = true
|
||||
try {
|
||||
const res = await voicePage({ workId: workId.value, voiceAll: false, pageNum: currentPage.value.pageNum })
|
||||
const data = res.data
|
||||
if (data.voicedPages?.length) {
|
||||
for (const vp of data.voicedPages) {
|
||||
const p = pages.value.find(x => x.pageNum === vp.pageNum)
|
||||
if (p) {
|
||||
p.audioUrl = vp.audioUrl
|
||||
p.localBlob = null // AI覆盖本地录音
|
||||
p.isAiVoice = true
|
||||
}
|
||||
}
|
||||
showToast('AI配音成功')
|
||||
} else {
|
||||
showToast('配音失败，请重试')
|
||||
}
|
||||
} catch (e) {
|
||||
showToast(e.message || '配音失败')
|
||||
} finally {
|
||||
voicingSingle.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function voiceAllConfirm() {
|
||||
const confirmed = await showConfirm('将为所有未配音的页面生成AI语音，预计需要30-60秒，确认继续？', {
|
||||
title: 'AI 配音',
|
||||
okText: '开始生成',
|
||||
cancelText: '再想想',
|
||||
})
|
||||
if (!confirmed) return
|
||||
voicingAll.value = true
|
||||
try {
|
||||
const res = await voicePage({ workId: workId.value, voiceAll: true })
|
||||
const data = res.data
|
||||
if (data.voicedPages) {
|
||||
for (const vp of data.voicedPages) {
|
||||
const p = pages.value.find(x => x.pageNum === vp.pageNum)
|
||||
if (p) {
|
||||
p.audioUrl = vp.audioUrl
|
||||
p.localBlob = null
|
||||
p.isAiVoice = true
|
||||
}
|
||||
}
|
||||
}
|
||||
const failed = data.failedPages?.length || 0
|
||||
showToast(failed > 0 ? `${data.totalSucceeded}页成功，${failed}页失败` : '全部AI配音完成!')
|
||||
} catch (e) {
|
||||
showToast(e.message || '配音失败')
|
||||
} finally {
|
||||
voicingAll.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// --- 完成配音 ---
|
||||
|
||||
async function finish() {
|
||||
submitting.value = true
|
||||
try {
|
||||
const pendingLocal = pages.value.filter(p => p.localBlob)
|
||||
|
||||
if (pendingLocal.length > 0) {
|
||||
// 有本地录音：上传到 OSS，然后通过 batchUpdateAudio 更新DB并推进状态
|
||||
const audioPages = []
|
||||
for (let i = 0; i < pendingLocal.length; i++) {
|
||||
const p = pendingLocal[i]
|
||||
showToast(`上传录音 ${i + 1}/${pendingLocal.length}...`)
|
||||
const ext = p.localBlob.type?.includes('webm') ? 'webm' : 'm4a'
|
||||
const ossUrl = await ossUpload(p.localBlob, { type: 'aud', ext })
|
||||
audioPages.push({ pageNum: p.pageNum, audioUrl: ossUrl })
|
||||
p.audioUrl = ossUrl
|
||||
p.localBlob = null
|
||||
}
|
||||
showToast('保存配音...')
|
||||
// batchUpdateAudio (C2) 会同时更新音频URL并推进状态 CATALOGED→DUBBED
|
||||
await batchUpdateAudio(workId.value, audioPages)
|
||||
} else {
|
||||
// 无本地录音：仍需调用 C2 API 推进状态 CATALOGED(4)→DUBBED(5)
|
||||
// C2 允许空 pages，调用后状态即推进
|
||||
showToast('完成配音...')
|
||||
await finishDubbing(workId.value)
|
||||
}
|
||||
|
||||
store.workDetail = null // 清除缓存
|
||||
showToast('配音完成!')
|
||||
setTimeout(() => router.push(`/p/create/read/${workId.value}`), 800)
|
||||
} catch (e) {
|
||||
// 容错：即使报错也检查实际状态，可能请求已经成功但重试触发了CAS失败
|
||||
try {
|
||||
const check = await getWorkDetail(workId.value)
|
||||
if (check?.data?.status >= 5) {
|
||||
store.workDetail = null
|
||||
showToast('配音已完成')
|
||||
setTimeout(() => router.push(`/p/create/read/${workId.value}`), 800)
|
||||
return
|
||||
}
|
||||
} catch { /* ignore check error */ }
|
||||
showToast('提交失败：' + (e.message || '请重试'))
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// --- Load ---
|
||||
|
||||
async function loadWork() {
|
||||
loading.value = true
|
||||
try {
|
||||
if (!store.workDetail || store.workDetail.workId !== workId.value) {
|
||||
store.workDetail = null
|
||||
const res = await getWorkDetail(workId.value)
|
||||
store.workDetail = res.data
|
||||
}
|
||||
const w = store.workDetail
|
||||
|
||||
// 如果作品已完成配音(DUBBED)，直接跳到阅读页
|
||||
if (w.status >= STATUS.DUBBED) {
|
||||
const nextRoute = getRouteByStatus(w.status, w.workId)
|
||||
if (nextRoute) { router.replace(nextRoute); return }
|
||||
}
|
||||
|
||||
pages.value = (w.pageList || []).map(p => ({
|
||||
pageNum: p.pageNum,
|
||||
text: p.text,
|
||||
imageUrl: p.imageUrl,
|
||||
audioUrl: p.audioUrl || null,
|
||||
localBlob: null, // 本地录音 Blob
|
||||
isAiVoice: p.audioUrl ? true : null // 区分来源
|
||||
}))
|
||||
} catch { /* fallback empty */ }
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
onMounted(loadWork)
|
||||
onBeforeUnmount(() => {
|
||||
stopAudio()
|
||||
if (isRecording.value && mediaRecorder?.state === 'recording') {
|
||||
mediaRecorder.stop()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dubbing-page {
|
||||
height: 100vh;
|
||||
height: 100dvh; /* 动态视口高度，兼容移动端地址栏 */
|
||||
background: linear-gradient(180deg, #F0F8FF 0%, #FFF5F0 40%, #FFF8E7 70%, #FFFDF7 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.loading-state {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.loading-emojis {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.loading-emoji {
|
||||
font-size: 36px;
|
||||
display: inline-block;
|
||||
animation: emojiPop 1.8s ease-in-out infinite;
|
||||
&.e1 { animation-delay: 0s; }
|
||||
&.e2 { animation-delay: 0.4s; }
|
||||
&.e3 { animation-delay: 0.8s; }
|
||||
}
|
||||
@keyframes emojiPop {
|
||||
0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.5; }
|
||||
50% { transform: scale(1.3) rotate(10deg); opacity: 1; }
|
||||
}
|
||||
.loading-text { font-size: 16px; color: var(--ai-text-sub); font-weight: 600; }
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
/* 页面展示 */
|
||||
.page-display { display: flex; flex-direction: column; gap: 10px; }
|
||||
.page-image-wrap {
|
||||
position: relative;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #F8F6F0, #F0EDE8);
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
}
|
||||
.page-image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
max-height: 38vh;
|
||||
}
|
||||
.placeholder {
|
||||
height: 180px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 48px;
|
||||
}
|
||||
.page-badge-pill {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
background: linear-gradient(135deg, rgba(255,107,53,0.9), rgba(255,140,66,0.9));
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
padding: 4px 14px;
|
||||
border-radius: 20px;
|
||||
backdrop-filter: blur(4px);
|
||||
box-shadow: 0 2px 8px rgba(255,107,53,0.3);
|
||||
}
|
||||
|
||||
.page-text-card {
|
||||
background: rgba(255,255,255,0.92);
|
||||
border-radius: 18px;
|
||||
padding: 16px 20px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.05);
|
||||
position: relative;
|
||||
border-left: 4px solid #FFD166;
|
||||
}
|
||||
.text-quote-mark {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 12px;
|
||||
font-size: 32px;
|
||||
color: #FFD166;
|
||||
opacity: 0.3;
|
||||
font-family: serif;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
}
|
||||
.page-text-content {
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
color: var(--ai-text);
|
||||
text-align: center;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
/* 音频控制 */
|
||||
.audio-controls {
|
||||
background: rgba(255,255,255,0.92);
|
||||
border-radius: 18px;
|
||||
padding: 14px 16px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.04);
|
||||
}
|
||||
.audio-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.play-btn {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: linear-gradient(135deg, #FF8C42, #FF6B35);
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 3px 12px rgba(255,107,53,0.3);
|
||||
transition: transform 0.2s;
|
||||
&:active { transform: scale(0.9); }
|
||||
}
|
||||
.audio-progress { flex: 1; }
|
||||
.audio-bar {
|
||||
height: 6px;
|
||||
background: #F0EDE8;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.audio-bar-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #FF8C42, #FF6B35);
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
.audio-time {
|
||||
font-size: 11px;
|
||||
color: var(--ai-text-sub);
|
||||
margin-top: 4px;
|
||||
display: block;
|
||||
}
|
||||
.audio-source-tag {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 3px 10px;
|
||||
border-radius: 10px;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
&.ai { background: #FFF0E8; color: var(--ai-primary); }
|
||||
&.local { background: #FEF2F2; color: #EF4444; }
|
||||
&.human { background: #F0F8FF; color: #3B82F6; }
|
||||
}
|
||||
|
||||
.audio-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 8px 0;
|
||||
font-size: 14px;
|
||||
color: var(--ai-text-sub);
|
||||
font-weight: 500;
|
||||
}
|
||||
.empty-icon { font-size: 20px; }
|
||||
|
||||
/* 配音按钮 */
|
||||
.voice-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* 录音大按钮 */
|
||||
.record-btn {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
border-radius: 22px;
|
||||
border: 2.5px solid #EF4444;
|
||||
background: linear-gradient(135deg, #FEF2F2, #FFF5F5);
|
||||
color: #EF4444;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
box-shadow: 0 3px 12px rgba(239,68,68,0.12);
|
||||
|
||||
&:active, &.recording {
|
||||
background: linear-gradient(135deg, #EF4444, #DC2626);
|
||||
color: #fff;
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 6px 24px rgba(239,68,68,0.3);
|
||||
border-color: #DC2626;
|
||||
}
|
||||
&:disabled {
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.record-icon { font-size: 22px; }
|
||||
.record-text { font-size: 16px; }
|
||||
|
||||
.ai-btns {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.ai-btn {
|
||||
flex: 1;
|
||||
padding: 14px 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
border-radius: 18px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
transition: all 0.2s;
|
||||
|
||||
&.single {
|
||||
background: linear-gradient(135deg, #FF8C42, #FF6B35);
|
||||
color: #fff;
|
||||
box-shadow: 0 3px 12px rgba(255,107,53,0.25);
|
||||
}
|
||||
&.all {
|
||||
background: rgba(255,255,255,0.9);
|
||||
color: var(--ai-primary);
|
||||
border: 2px solid #FFE4D0;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||
}
|
||||
&:active { transform: scale(0.97); }
|
||||
&:disabled { opacity: 0.4; pointer-events: none; }
|
||||
}
|
||||
|
||||
/* 缩略图横向滚动列表 */
|
||||
.thumb-section { margin-top: 4px; }
|
||||
.thumb-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.thumb-title { font-size: 15px; font-weight: 800; color: var(--ai-text); }
|
||||
.thumb-count { font-size: 13px; color: var(--ai-primary); font-weight: 700; }
|
||||
|
||||
.thumb-strip {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
overflow-x: auto;
|
||||
padding: 6px 2px 12px;
|
||||
scrollbar-width: none;
|
||||
&::-webkit-scrollbar { display: none; }
|
||||
}
|
||||
|
||||
.thumb-item {
|
||||
flex-shrink: 0;
|
||||
width: 64px;
|
||||
height: 80px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 2.5px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
background: rgba(255,255,255,0.8);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||||
|
||||
&.active {
|
||||
border-color: var(--ai-primary);
|
||||
box-shadow: 0 4px 16px rgba(255,107,53,0.25);
|
||||
transform: scale(1.08);
|
||||
}
|
||||
&.voiced { border-color: #C8E6C9; }
|
||||
&.active.voiced { border-color: var(--ai-primary); }
|
||||
}
|
||||
.thumb-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.thumb-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #F5F0E8;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--ai-text-sub);
|
||||
}
|
||||
.thumb-status {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.status-dot {
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
&.ai-dot { background: #2EC4B6; box-shadow: 0 0 4px rgba(46,196,182,0.5); }
|
||||
&.local-dot { background: #EF4444; box-shadow: 0 0 4px rgba(239,68,68,0.5); }
|
||||
&.empty-dot { background: #D1D5DB; }
|
||||
}
|
||||
.thumb-voice-icon {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 3px;
|
||||
font-size: 10px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* 底部 */
|
||||
.bottom-bar {
|
||||
flex-shrink: 0;
|
||||
padding: 14px 20px 20px;
|
||||
padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
|
||||
background: linear-gradient(transparent, rgba(255,253,247,0.95) 25%);
|
||||
}
|
||||
.finish-btn {
|
||||
font-size: 17px !important;
|
||||
padding: 16px 0 !important;
|
||||
border-radius: 28px !important;
|
||||
background: linear-gradient(135deg, #FF8C42, #FF6B35) !important;
|
||||
box-shadow: 0 6px 24px rgba(255,107,53,0.3) !important;
|
||||
}
|
||||
.local-hint {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: var(--ai-text-sub);
|
||||
margin-top: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Toast */
|
||||
.toast {
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(45,45,63,0.88);
|
||||
color: #fff;
|
||||
padding: 12px 28px;
|
||||
border-radius: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
z-index: 999;
|
||||
max-width: 80%;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
|
||||
.fade-enter-from, .fade-leave-to { opacity: 0; }
|
||||
|
||||
/* -- 确认弹窗（Ant Design 风格） -- */
|
||||
.confirm-overlay {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
z-index: 1100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
}
|
||||
.confirm-modal {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
min-width: 280px;
|
||||
max-width: 400px;
|
||||
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.12);
|
||||
animation: confirmFadeIn 0.2s ease;
|
||||
}
|
||||
@keyframes confirmFadeIn {
|
||||
from { opacity: 0; transform: scale(0.95); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
.confirm-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.confirm-content {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.confirm-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.confirm-btn {
|
||||
padding: 5px 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
height: 32px;
|
||||
line-height: 1;
|
||||
transition: all 0.2s;
|
||||
|
||||
&.cancel {
|
||||
border: 1px solid #d1d5db;
|
||||
background: #fff;
|
||||
color: #374151;
|
||||
&:hover { border-color: #6366f1; color: #6366f1; }
|
||||
}
|
||||
&.ok {
|
||||
border: none;
|
||||
background: #6366f1;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
&:hover { background: #4f46e5; }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
371
frontend/src/views/public/create/views/EditInfoView.vue
Normal file
371
frontend/src/views/public/create/views/EditInfoView.vue
Normal file
@ -0,0 +1,371 @@
|
||||
<template>
|
||||
<div class="edit-page page-fullscreen">
|
||||
<PageHeader title="编辑绘本信息" subtitle="补充信息让绘本更完整" :showBack="true" />
|
||||
|
||||
<div v-if="loading" class="loading-state">
|
||||
<div style="font-size:36px">📖</div>
|
||||
<div style="color:var(--ai-text-sub);margin-top:8px">加载中...</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="content page-content">
|
||||
<!-- 封面预览 -->
|
||||
<div class="cover-preview card" v-if="coverUrl">
|
||||
<img :src="coverUrl" class="cover-img" />
|
||||
<div class="cover-title-overlay">{{ store.workDetail?.title || '未命名' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div class="card form-card">
|
||||
<div class="field-item">
|
||||
<div class="field-label"><span>✍️</span> 作者署名 <span class="required-mark">必填</span></div>
|
||||
<input v-model="form.author" class="text-input" :class="{ 'input-error': authorError }" placeholder="如：宝宝的名字" maxlength="16" @input="authorError = ''" />
|
||||
<span class="char-count-inline">{{ form.author.length }}/16</span>
|
||||
<div v-if="authorError" class="field-error">{{ authorError }}</div>
|
||||
</div>
|
||||
|
||||
<div class="field-item">
|
||||
<div class="field-label"><span>📝</span> 副标题 <span class="optional-mark">选填</span></div>
|
||||
<input v-model="form.subtitle" class="text-input" placeholder="如：一个关于勇气的故事" maxlength="20" />
|
||||
<span class="char-count-inline">{{ form.subtitle.length }}/20</span>
|
||||
</div>
|
||||
|
||||
<div class="field-item">
|
||||
<div class="field-label">
|
||||
<span>📖</span> 绘本简介 <span class="optional-mark">选填</span>
|
||||
<span class="char-count">{{ form.intro.length }}/250</span>
|
||||
</div>
|
||||
<textarea v-model="form.intro" class="textarea-input" placeholder="简单介绍一下这个绘本的故事" maxlength="250" rows="3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 标签 -->
|
||||
<div class="card form-card">
|
||||
<div class="field-label" style="margin-bottom:12px"><span>🏷️</span> 绘本标签</div>
|
||||
|
||||
<div class="tags-wrap">
|
||||
<span v-for="(tag, i) in selectedTags" :key="'s'+i" class="tag selected-tag">
|
||||
{{ tag }}
|
||||
<span v-if="selectedTags.length > 1" class="tag-remove" @click="removeTag(i)">×</span>
|
||||
</span>
|
||||
<!-- 添加标签（达到5个上限时隐藏） -->
|
||||
<template v-if="selectedTags.length < 5">
|
||||
<span v-if="!addingTag" class="tag add-tag" @click="addingTag = true">+</span>
|
||||
<span v-else class="tag adding-tag">
|
||||
<input
|
||||
ref="tagInput"
|
||||
v-model="newTag"
|
||||
class="tag-input"
|
||||
placeholder="输入标签"
|
||||
maxlength="8"
|
||||
@keydown.enter="confirmAddTag"
|
||||
@blur="confirmAddTag"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 推荐标签（达到5个上限时隐藏，只显示未选中的） -->
|
||||
<div v-if="selectedTags.length < 5 && limitedPresets.length > 0" class="preset-tags">
|
||||
<span
|
||||
v-for="p in limitedPresets" :key="p"
|
||||
class="tag preset-tag"
|
||||
@click="addPresetTag(p)"
|
||||
>+ {{ p }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 -->
|
||||
<div v-if="!loading" class="page-bottom">
|
||||
<button class="btn-primary" :disabled="saving" @click="handleSave">
|
||||
{{ saving ? '保存中...' : '保存绘本 →' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, nextTick } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import PageHeader from '@/components/aicreate/PageHeader.vue'
|
||||
import { getWorkDetail, updateWork } from '@/api/aicreate'
|
||||
import { useAicreateStore } from '@/stores/aicreate'
|
||||
import { STATUS, getRouteByStatus } from '@/utils/aicreate/status'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const store = useAicreateStore()
|
||||
const workId = computed(() => route.params.workId || store.workId)
|
||||
|
||||
const loading = ref(true)
|
||||
const saving = ref(false)
|
||||
const coverUrl = ref('')
|
||||
|
||||
const form = ref({ author: '', subtitle: '', intro: '' })
|
||||
const selectedTags = ref([])
|
||||
const addingTag = ref(false)
|
||||
const newTag = ref('')
|
||||
const tagInput = ref(null)
|
||||
|
||||
const PRESET_TAGS = ['冒险', '成长', '友谊', '魔法', '勇敢', '快乐', '温暖', '探索', '梦想', '好奇']
|
||||
const availablePresets = computed(() =>
|
||||
PRESET_TAGS.filter(t => !selectedTags.value.includes(t))
|
||||
)
|
||||
// 推荐标签最多显示到总标签数 5 个的剩余空位
|
||||
const limitedPresets = computed(() => {
|
||||
const remaining = 5 - selectedTags.value.length
|
||||
if (remaining <= 0) return []
|
||||
return availablePresets.value.slice(0, remaining)
|
||||
})
|
||||
|
||||
function removeTag(i) {
|
||||
if (selectedTags.value.length <= 1) return
|
||||
selectedTags.value.splice(i, 1)
|
||||
}
|
||||
|
||||
function addPresetTag(tag) {
|
||||
if (selectedTags.value.length >= 5) return
|
||||
if (!selectedTags.value.includes(tag)) selectedTags.value.push(tag)
|
||||
}
|
||||
|
||||
function confirmAddTag() {
|
||||
const t = newTag.value.trim()
|
||||
if (t && !selectedTags.value.includes(t) && selectedTags.value.length < 5) {
|
||||
selectedTags.value.push(t)
|
||||
}
|
||||
newTag.value = ''
|
||||
addingTag.value = false
|
||||
}
|
||||
|
||||
async function loadWork() {
|
||||
loading.value = true
|
||||
try {
|
||||
// 缓存不匹配当前 workId 时重新请求（防止上一个作品数据残留）
|
||||
if (!store.workDetail || store.workDetail.workId !== workId.value) {
|
||||
store.workDetail = null
|
||||
const res = await getWorkDetail(workId.value)
|
||||
store.workDetail = res.data
|
||||
}
|
||||
const w = store.workDetail
|
||||
|
||||
// 如果作品状态已超过 CATALOGED，重定向到对应页面
|
||||
if (w.status > STATUS.CATALOGED) {
|
||||
const nextRoute = getRouteByStatus(w.status, w.workId)
|
||||
if (nextRoute) { router.replace(nextRoute); return }
|
||||
}
|
||||
|
||||
form.value.author = w.author || ''
|
||||
form.value.subtitle = w.subtitle || ''
|
||||
form.value.intro = w.intro || ''
|
||||
selectedTags.value = Array.isArray(w.tags) && w.tags.length ? [...w.tags] : ['冒险']
|
||||
coverUrl.value = w.pageList?.[0]?.imageUrl || ''
|
||||
} catch (e) {
|
||||
// fallback: proceed with empty form
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const authorError = ref('')
|
||||
|
||||
async function handleSave() {
|
||||
// 作者署名必填校验
|
||||
if (!form.value.author.trim()) {
|
||||
authorError.value = '请填写作者署名'
|
||||
return
|
||||
}
|
||||
authorError.value = ''
|
||||
saving.value = true
|
||||
try {
|
||||
const data = { tags: selectedTags.value }
|
||||
data.author = form.value.author.trim()
|
||||
if (form.value.subtitle.trim()) data.subtitle = form.value.subtitle.trim()
|
||||
if (form.value.intro.trim()) data.intro = form.value.intro.trim()
|
||||
|
||||
await updateWork(workId.value, data)
|
||||
|
||||
// 更新缓存
|
||||
if (store.workDetail) {
|
||||
if (data.author) store.workDetail.author = data.author
|
||||
if (data.subtitle) store.workDetail.subtitle = data.subtitle
|
||||
if (data.intro) store.workDetail.intro = data.intro
|
||||
store.workDetail.tags = [...selectedTags.value]
|
||||
}
|
||||
|
||||
// C1 保存后进入配音
|
||||
store.workDetail = null // 清除缓存
|
||||
router.push(`/p/create/dubbing/${workId.value}`)
|
||||
} catch (e) {
|
||||
// 容错：保存报错时检查实际状态，可能已经成功但重试导致CAS失败
|
||||
try {
|
||||
const check = await getWorkDetail(workId.value)
|
||||
if (check?.data?.status >= 4) {
|
||||
store.workDetail = null
|
||||
router.push(`/p/create/dubbing/${workId.value}`)
|
||||
return
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
alert(e.message || '保存失败，请重试')
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadWork()
|
||||
nextTick(() => { if (tagInput.value) tagInput.value.focus() })
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.edit-page {
|
||||
background: var(--ai-bg);
|
||||
}
|
||||
.loading-state {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.content {
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.cover-preview {
|
||||
position: relative;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
height: 120px;
|
||||
}
|
||||
.cover-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.cover-title-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 10px 16px;
|
||||
background: linear-gradient(transparent, rgba(0,0,0,0.6));
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.form-card { padding: 20px; }
|
||||
|
||||
.field-item { margin-bottom: 16px; &:last-child { margin-bottom: 0; } }
|
||||
.field-label {
|
||||
font-size: 13px;
|
||||
color: var(--ai-text-sub);
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.required-mark { color: var(--ai-primary); font-size: 11px; }
|
||||
.optional-mark { color: #94A3B8; font-size: 11px; }
|
||||
.required-mark { color: #EF4444; font-size: 11px; font-weight: 600; }
|
||||
.input-error { border-color: #EF4444 !important; }
|
||||
.field-error { color: #EF4444; font-size: 12px; margin-top: 4px; }
|
||||
.char-count { margin-left: auto; font-size: 11px; color: #94A3B8; }
|
||||
.char-count-inline { display: block; text-align: right; font-size: 11px; color: #94A3B8; margin-top: 2px; }
|
||||
|
||||
.text-input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: #F8F7F4;
|
||||
border-radius: var(--ai-radius-sm);
|
||||
padding: 14px 16px;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
color: var(--ai-text);
|
||||
box-sizing: border-box;
|
||||
transition: box-shadow 0.2s;
|
||||
|
||||
&:focus { box-shadow: 0 0 0 2px var(--ai-primary); }
|
||||
&.input-error { box-shadow: 0 0 0 2px #EF4444; }
|
||||
}
|
||||
.textarea-input {
|
||||
width: 100%;
|
||||
border: 1.5px solid var(--ai-border);
|
||||
background: #FAFAF8;
|
||||
border-radius: var(--ai-radius-sm);
|
||||
padding: 12px 14px;
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
color: var(--ai-text);
|
||||
resize: none;
|
||||
box-sizing: border-box;
|
||||
transition: border 0.3s;
|
||||
&:focus { border-color: var(--ai-primary); }
|
||||
}
|
||||
.error-text { color: #EF4444; font-size: 12px; margin-top: 4px; }
|
||||
|
||||
.tags-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px 14px;
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.selected-tag {
|
||||
background: var(--ai-primary-light);
|
||||
color: var(--ai-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
.tag-remove {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
opacity: 0.6;
|
||||
&:hover { opacity: 1; }
|
||||
}
|
||||
.add-tag {
|
||||
background: var(--ai-border);
|
||||
color: var(--ai-text-sub);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
padding: 6px 16px;
|
||||
}
|
||||
.adding-tag {
|
||||
background: #fff;
|
||||
border: 1.5px solid var(--ai-primary);
|
||||
padding: 4px 8px;
|
||||
}
|
||||
.tag-input {
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 13px;
|
||||
width: 60px;
|
||||
background: transparent;
|
||||
color: var(--ai-text);
|
||||
}
|
||||
|
||||
.preset-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
.preset-tag {
|
||||
background: #F0EDE8;
|
||||
color: var(--ai-text-sub);
|
||||
font-size: 12px;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
|
||||
</style>
|
||||
332
frontend/src/views/public/create/views/PreviewView.vue
Normal file
332
frontend/src/views/public/create/views/PreviewView.vue
Normal file
@ -0,0 +1,332 @@
|
||||
<template>
|
||||
<div class="preview-page page-fullscreen">
|
||||
<!-- 顶部 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-title">绘本预览</div>
|
||||
<div class="top-sub">你的绘本已生成!</div>
|
||||
</div>
|
||||
|
||||
<!-- 加载中 -->
|
||||
<div v-if="loading" class="loading-state">
|
||||
<div class="loading-icon">📖</div>
|
||||
<div class="loading-text">加载中...</div>
|
||||
</div>
|
||||
|
||||
<!-- 加载失败 -->
|
||||
<div v-else-if="error" class="error-state card">
|
||||
<div style="font-size:36px;margin-bottom:12px">😥</div>
|
||||
<div style="font-weight:600;margin-bottom:8px">加载失败</div>
|
||||
<div style="color:var(--ai-text-sub);font-size:13px;margin-bottom:16px">{{ error }}</div>
|
||||
<button class="btn-primary" style="width:auto;padding:10px 32px" @click="loadWork">重试</button>
|
||||
</div>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<template v-else-if="pages.length">
|
||||
<div class="content page-content" @touchstart="onTouchStart" @touchend="onTouchEnd">
|
||||
<!-- 1. 图片区：16:9 完整展示，不裁切 -->
|
||||
<div class="image-section">
|
||||
<div class="page-badge">{{ pageBadge }}</div>
|
||||
<img v-if="currentPage.imageUrl" :src="currentPage.imageUrl" class="page-image" />
|
||||
<div v-else class="page-image placeholder-img">📖</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. 故事文字区 -->
|
||||
<div class="text-section">
|
||||
<div class="text-deco">"</div>
|
||||
<div class="story-text">{{ currentPage.text || '' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. 翻页 -->
|
||||
<div class="nav-row">
|
||||
<button class="nav-btn" :class="{ invisible: idx <= 0 }" @click="prev">‹</button>
|
||||
<span class="page-counter">{{ idx + 1 }} / {{ pages.length }}</span>
|
||||
<button class="nav-btn" :class="{ invisible: idx >= pages.length - 1 }" @click="next">›</button>
|
||||
</div>
|
||||
|
||||
<!-- 4. 横版卡片网格（2列） -->
|
||||
<div class="thumb-grid">
|
||||
<div v-for="(p, i) in pages" :key="i"
|
||||
class="thumb-card" :class="{ active: i === idx }"
|
||||
@click="idx = i">
|
||||
<div class="thumb-card-img-wrap">
|
||||
<img v-if="p.imageUrl" :src="p.imageUrl" class="thumb-card-img" />
|
||||
<div v-else class="thumb-card-placeholder">📖</div>
|
||||
<div class="thumb-card-badge">{{ i === 0 ? '封面' : 'P' + i }}</div>
|
||||
</div>
|
||||
<div class="thumb-card-text">{{ p.text ? (p.text.length > 16 ? p.text.slice(0,16) + '...' : p.text) : '' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div class="page-bottom">
|
||||
<button class="btn-primary" @click="goEditInfo">下一步: 编辑绘本信息 →</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, nextTick } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { getWorkDetail } from '@/api/aicreate'
|
||||
import { useAicreateStore } from '@/stores/aicreate'
|
||||
import { STATUS, getRouteByStatus } from '@/utils/aicreate/status'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const store = useAicreateStore()
|
||||
|
||||
const loading = ref(true)
|
||||
const error = ref('')
|
||||
const pages = ref([])
|
||||
const idx = ref(0)
|
||||
const thumbStrip = ref(null)
|
||||
|
||||
// Touch swipe
|
||||
let touchX = 0
|
||||
const onTouchStart = (e) => { touchX = e.touches[0].clientX }
|
||||
const onTouchEnd = (e) => {
|
||||
const dx = e.changedTouches[0].clientX - touchX
|
||||
if (Math.abs(dx) > 50) dx > 0 ? prev() : next()
|
||||
}
|
||||
|
||||
const currentPage = computed(() => pages.value[idx.value] || {})
|
||||
const pageBadge = computed(() => {
|
||||
if (idx.value === 0) return '封面'
|
||||
return `P${idx.value}`
|
||||
})
|
||||
|
||||
function prev() { if (idx.value > 0) { idx.value--; scrollThumbIntoView(idx.value) } }
|
||||
function next() { if (idx.value < pages.value.length - 1) { idx.value++; scrollThumbIntoView(idx.value) } }
|
||||
|
||||
function scrollThumbIntoView(i) {
|
||||
nextTick(() => {
|
||||
const el = thumbStrip.value?.children[i]
|
||||
if (el) el.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
|
||||
})
|
||||
}
|
||||
|
||||
const workId = computed(() => route.params.workId || store.workId)
|
||||
|
||||
async function loadWork() {
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
try {
|
||||
const res = await getWorkDetail(workId.value)
|
||||
const work = res.data
|
||||
store.workDetail = work
|
||||
store.workId = work.workId
|
||||
|
||||
// 如果作品状态已超过 COMPLETED，重定向到对应页面
|
||||
if (work.status > STATUS.COMPLETED) {
|
||||
const nextRoute = getRouteByStatus(work.status, work.workId)
|
||||
if (nextRoute) { router.replace(nextRoute); return }
|
||||
}
|
||||
|
||||
pages.value = (work.pageList || []).map(p => ({
|
||||
pageNum: p.pageNum,
|
||||
text: p.text,
|
||||
imageUrl: p.imageUrl,
|
||||
audioUrl: p.audioUrl
|
||||
}))
|
||||
} catch (e) {
|
||||
error.value = e.message || '加载失败'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function goEditInfo() {
|
||||
router.push(`/p/create/edit-info/${workId.value}`)
|
||||
}
|
||||
|
||||
onMounted(loadWork)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.preview-page {
|
||||
background: var(--ai-bg);
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
background: var(--ai-gradient);
|
||||
padding: 20px 20px 16px;
|
||||
color: #fff;
|
||||
}
|
||||
.top-title { font-size: 20px; font-weight: 800; }
|
||||
.top-sub { font-size: 13px; opacity: 0.85; margin-top: 4px; }
|
||||
|
||||
.loading-state, .error-state {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
}
|
||||
.loading-icon { font-size: 48px; animation: pulse 1.5s ease infinite; }
|
||||
.loading-text { margin-top: 12px; color: var(--ai-text-sub); }
|
||||
|
||||
.content {
|
||||
padding: 10px 14px 14px;
|
||||
}
|
||||
|
||||
/* 1. 图片区：16:9 完整展示 */
|
||||
.image-section {
|
||||
position: relative;
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
background: #1A1A1A;
|
||||
box-shadow: 0 6px 24px rgba(0,0,0,0.12);
|
||||
}
|
||||
.page-image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
object-fit: contain; /* 16:9 横图完整显示，不裁切 */
|
||||
aspect-ratio: 16 / 9;
|
||||
background: #1A1A1A; /* 上下留黑，像电影画幅 */
|
||||
}
|
||||
.placeholder-img {
|
||||
aspect-ratio: 16 / 9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 48px;
|
||||
background: #F5F3EE;
|
||||
}
|
||||
.page-badge {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
background: linear-gradient(135deg, rgba(255,107,53,0.9), rgba(255,140,66,0.9));
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 4px 14px;
|
||||
border-radius: 20px;
|
||||
z-index: 2;
|
||||
box-shadow: 0 2px 8px rgba(255,107,53,0.3);
|
||||
}
|
||||
|
||||
/* 2. 故事文字区 */
|
||||
.text-section {
|
||||
background: rgba(255,255,255,0.92);
|
||||
border-radius: 0 0 18px 18px;
|
||||
margin-top: -8px; /* 与图片无缝衔接 */
|
||||
padding: 18px 22px 16px;
|
||||
position: relative;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.05);
|
||||
min-height: 60px;
|
||||
}
|
||||
.text-deco {
|
||||
position: absolute;
|
||||
top: 4px; left: 14px;
|
||||
font-size: 36px; color: #FFD166; opacity: 0.25;
|
||||
font-family: Georgia, serif; font-weight: 900; line-height: 1;
|
||||
}
|
||||
.story-text {
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
color: #3D2E1E;
|
||||
font-weight: 500;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
/* 3. 翻页行 */
|
||||
|
||||
.nav-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
}
|
||||
.nav-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: var(--ai-card);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--ai-primary);
|
||||
cursor: pointer;
|
||||
|
||||
&:active { transform: scale(0.9); }
|
||||
&.invisible { opacity: 0; pointer-events: none; }
|
||||
}
|
||||
.page-counter {
|
||||
font-size: 12px;
|
||||
color: var(--ai-text-sub);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 4. 横版卡片网格 */
|
||||
.thumb-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.thumb-card {
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
background: rgba(255,255,255,0.9);
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: 2.5px solid transparent;
|
||||
|
||||
&.active {
|
||||
border-color: var(--ai-primary);
|
||||
box-shadow: 0 3px 14px rgba(255,107,53,0.25);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
}
|
||||
.thumb-card-img-wrap {
|
||||
position: relative;
|
||||
aspect-ratio: 16 / 9;
|
||||
overflow: hidden;
|
||||
background: #F0EDE8;
|
||||
}
|
||||
.thumb-card-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.thumb-card-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
.thumb-card-badge {
|
||||
position: absolute;
|
||||
top: 4px; left: 4px;
|
||||
background: rgba(0,0,0,0.5);
|
||||
color: #fff;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.thumb-card-text {
|
||||
padding: 6px 8px;
|
||||
font-size: 11px;
|
||||
color: #64748B;
|
||||
line-height: 1.4;
|
||||
min-height: 20px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.08); }
|
||||
}
|
||||
</style>
|
||||
200
frontend/src/views/public/create/views/SaveSuccessView.vue
Normal file
200
frontend/src/views/public/create/views/SaveSuccessView.vue
Normal file
@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<div class="success-page">
|
||||
<!-- 撒花装饰 -->
|
||||
<div class="confetti c1">🎊</div>
|
||||
<div class="confetti c2">🌟</div>
|
||||
<div class="confetti c3">✨</div>
|
||||
<div class="confetti c4">🎉</div>
|
||||
<div class="confetti c5">⭐</div>
|
||||
<div class="confetti c6">🎊</div>
|
||||
|
||||
<div class="success-content">
|
||||
<!-- 撒花大图标 -->
|
||||
<div class="celebration-icon">🎉</div>
|
||||
<div class="success-title">保存成功!</div>
|
||||
<div class="success-sub">太棒了，你的绘本已保存</div>
|
||||
|
||||
<!-- 封面卡片 - 3D 微倾斜效果 -->
|
||||
<div class="cover-card-wrap" v-if="coverUrl">
|
||||
<div class="cover-card">
|
||||
<img :src="coverUrl" class="cover-img" />
|
||||
<div class="cover-info">
|
||||
<div class="cover-name">{{ title }}</div>
|
||||
<div v-if="author" class="cover-author">作者：{{ author }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-group">
|
||||
<button class="btn-primary action-btn" @click="goDubbing">
|
||||
<span class="action-icon">🎙️</span>
|
||||
<div class="action-text">
|
||||
<div class="action-main">给绘本配音</div>
|
||||
<div class="action-desc">为每一页添加AI语音</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { getWorkDetail } from '@/api/aicreate'
|
||||
import { useAicreateStore } from '@/stores/aicreate'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const store = useAicreateStore()
|
||||
const workId = computed(() => route.params.workId || store.workId)
|
||||
|
||||
const coverUrl = ref('')
|
||||
const title = ref('')
|
||||
const author = ref('')
|
||||
|
||||
async function loadWork() {
|
||||
try {
|
||||
if (!store.workDetail || store.workDetail.workId !== workId.value) {
|
||||
store.workDetail = null
|
||||
const res = await getWorkDetail(workId.value)
|
||||
store.workDetail = res.data
|
||||
}
|
||||
const w = store.workDetail
|
||||
title.value = w.title || '我的绘本'
|
||||
author.value = w.author || ''
|
||||
coverUrl.value = w.pageList?.[0]?.imageUrl || ''
|
||||
} catch { /* show page without cover */ }
|
||||
}
|
||||
|
||||
function goDubbing() {
|
||||
router.push(`/p/create/dubbing/${workId.value}`)
|
||||
}
|
||||
|
||||
|
||||
|
||||
onMounted(loadWork)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.success-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(160deg, #FFF8E1 0%, #FFECB3 40%, #FFE0B2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 撒花动画 */
|
||||
.confetti {
|
||||
position: absolute;
|
||||
font-size: 24px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
animation: confettiFall 3s ease-in-out infinite;
|
||||
}
|
||||
.c1 { left: 10%; top: -5%; animation-delay: 0s; font-size: 28px; }
|
||||
.c2 { left: 30%; top: -8%; animation-delay: 0.5s; font-size: 20px; }
|
||||
.c3 { left: 55%; top: -3%; animation-delay: 1s; font-size: 22px; }
|
||||
.c4 { left: 75%; top: -6%; animation-delay: 1.5s; font-size: 26px; }
|
||||
.c5 { left: 90%; top: -4%; animation-delay: 0.8s; font-size: 18px; }
|
||||
.c6 { left: 45%; top: -7%; animation-delay: 2s; font-size: 24px; }
|
||||
@keyframes confettiFall {
|
||||
0% { transform: translateY(0) rotate(0deg); opacity: 0; }
|
||||
10% { opacity: 0.8; }
|
||||
80% { opacity: 0.6; }
|
||||
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
|
||||
}
|
||||
|
||||
.success-content {
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
padding: 40px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.celebration-icon {
|
||||
font-size: 64px;
|
||||
animation: celebrationBounce 0.8s ease;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
@keyframes celebrationBounce {
|
||||
0% { transform: scale(0) rotate(-20deg); opacity: 0; }
|
||||
50% { transform: scale(1.3) rotate(10deg); }
|
||||
70% { transform: scale(0.9) rotate(-5deg); }
|
||||
100% { transform: scale(1) rotate(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 26px;
|
||||
font-weight: 900;
|
||||
color: #4A3728;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.success-sub {
|
||||
font-size: 15px;
|
||||
color: #8D6E63;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
/* 封面卡片 3D 效果 */
|
||||
.cover-card-wrap {
|
||||
perspective: 600px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.cover-card {
|
||||
width: 260px;
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
|
||||
transform: rotateY(-3deg) rotateX(2deg);
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
.cover-img {
|
||||
width: 100%;
|
||||
aspect-ratio: 4/3;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.cover-info {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
.cover-name {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #4A3728;
|
||||
}
|
||||
.cover-author {
|
||||
font-size: 12px;
|
||||
color: #8D6E63;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.action-group {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
text-align: left;
|
||||
padding: 16px 20px;
|
||||
border-radius: var(--ai-radius);
|
||||
}
|
||||
.action-icon { font-size: 24px; flex-shrink: 0; }
|
||||
.action-text { flex: 1; }
|
||||
.action-main { font-size: 15px; font-weight: 700; }
|
||||
.action-desc { font-size: 12px; opacity: 0.7; margin-top: 2px; }
|
||||
</style>
|
||||
287
frontend/src/views/public/create/views/StoryInputView.vue
Normal file
287
frontend/src/views/public/create/views/StoryInputView.vue
Normal file
@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<div class="story-page page-fullscreen">
|
||||
<PageHeader title="编写故事" subtitle="告诉AI你想要什么样的故事" :step="3" />
|
||||
|
||||
<div class="content page-content">
|
||||
<!-- 绘本信息 -->
|
||||
<div class="section-card">
|
||||
<div class="section-header">
|
||||
<span class="section-icon">📚</span>
|
||||
<span class="section-label">绘本信息</span>
|
||||
</div>
|
||||
<div class="field-item">
|
||||
<div class="field-label">
|
||||
<span>✏️</span> 绘本标题
|
||||
<span class="required-mark">必填</span>
|
||||
</div>
|
||||
<div class="input-wrap" :class="{ focus: bookTitleFocus }">
|
||||
<input v-model="bookTitle" class="text-input" placeholder="如：小璃的冒险"
|
||||
maxlength="12" @focus="bookTitleFocus = true" @blur="bookTitleFocus = false" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主角名字 -->
|
||||
<div class="section-card">
|
||||
<div class="section-header">
|
||||
<span class="section-icon">🐰</span>
|
||||
<span class="section-label">主角名字</span>
|
||||
<span class="required-mark">必填</span>
|
||||
</div>
|
||||
<div class="input-wrap" :class="{ focus: heroNameFocus }">
|
||||
<input v-model="heroName" class="text-input" placeholder="给主角起个名字吧~"
|
||||
maxlength="10" @focus="heroNameFocus = true" @blur="heroNameFocus = false" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 故事要素 -->
|
||||
<div class="section-card story-elements">
|
||||
<div class="section-header">
|
||||
<span class="section-icon">📖</span>
|
||||
<span class="section-label">故事要素</span>
|
||||
</div>
|
||||
|
||||
<div v-for="(f, i) in fields" :key="i" class="field-item">
|
||||
<div class="field-label">
|
||||
<span class="field-emoji">{{ f.emoji }}</span>
|
||||
<span>{{ f.label }}</span>
|
||||
<span v-if="f.required" class="required-mark">必填</span>
|
||||
<span v-else class="optional-mark">选填</span>
|
||||
</div>
|
||||
<div class="textarea-wrap" :class="{ focus: f.focused?.value }">
|
||||
<textarea
|
||||
v-model="f.value.value"
|
||||
:placeholder="f.placeholder"
|
||||
maxlength="100"
|
||||
rows="2"
|
||||
class="textarea-input"
|
||||
@focus="f.focused.value = true"
|
||||
@blur="f.focused.value = false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="page-bottom">
|
||||
<button class="btn-primary create-btn" :disabled="!canSubmit" @click="goNext">
|
||||
<span class="btn-rocket">🚀</span> 开始创作绘本
|
||||
</button>
|
||||
<div class="time-hint" style="text-align:center;margin-top:6px;font-size:12px;color:var(--ai-text-sub)">✨ 创作预计需要 1-3 分钟</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import PageHeader from '@/components/aicreate/PageHeader.vue'
|
||||
import { useAicreateStore } from '@/stores/aicreate'
|
||||
|
||||
const router = useRouter()
|
||||
const store = useAicreateStore()
|
||||
const bookTitle = ref('')
|
||||
const heroName = ref(store.selectedCharacter?.name || '')
|
||||
const storyStart = ref('')
|
||||
const meetWho = ref('')
|
||||
const whatHappens = ref('')
|
||||
|
||||
const bookTitleFocus = ref(false)
|
||||
const heroNameFocus = ref(false)
|
||||
|
||||
const fields = [
|
||||
{ emoji: '🌅', label: '故事开始', placeholder: '如：一个阳光明媚的早晨...', value: storyStart, required: false, focused: ref(false) },
|
||||
{ emoji: '👋', label: '遇见谁', placeholder: '如：遇到了一只迷路的小鸟', value: meetWho, required: false, focused: ref(false) },
|
||||
{ emoji: '⚡', label: '发生什么', placeholder: '如：一起去森林探险寻找宝藏', value: whatHappens, required: true, focused: ref(false) },
|
||||
]
|
||||
|
||||
const canSubmit = computed(() => bookTitle.value.trim() && heroName.value.trim() && whatHappens.value.trim())
|
||||
|
||||
let submitted = false
|
||||
const goNext = () => {
|
||||
if (submitted) return // 防重复点击
|
||||
submitted = true
|
||||
|
||||
const parts = []
|
||||
parts.push(`主角名字：${heroName.value}`)
|
||||
if (storyStart.value.trim()) parts.push(`故事开始：${storyStart.value.trim()}`)
|
||||
if (meetWho.value.trim()) parts.push(`遇见谁：${meetWho.value.trim()}`)
|
||||
parts.push(`发生什么：${whatHappens.value.trim()}`)
|
||||
|
||||
store.storyData = {
|
||||
heroName: heroName.value,
|
||||
storyHint: parts.join('；'),
|
||||
title: bookTitle.value.trim()
|
||||
}
|
||||
router.push('/p/create/creating')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.story-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #FFF8E7 0%, #FFFAF0 30%, #FFF5E6 60%, #FFFDF7 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.section-card {
|
||||
background: rgba(255,255,255,0.92);
|
||||
border-radius: 22px;
|
||||
padding: 18px 18px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
|
||||
// 书页纹理效果
|
||||
border-left: 4px solid #FFE4C8;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: -4px;
|
||||
bottom: 12px;
|
||||
width: 4px;
|
||||
background: repeating-linear-gradient(
|
||||
180deg,
|
||||
transparent 0px,
|
||||
transparent 4px,
|
||||
#FFD4A8 4px,
|
||||
#FFD4A8 8px
|
||||
);
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.section-icon { font-size: 20px; }
|
||||
.section-label {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: var(--ai-text);
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
background: #FFF8F0;
|
||||
border-radius: 14px;
|
||||
border: 2px solid #FFE8D4;
|
||||
transition: all 0.3s;
|
||||
overflow: hidden;
|
||||
|
||||
&.focus {
|
||||
border-color: var(--ai-primary);
|
||||
box-shadow: 0 0 0 4px rgba(255,107,53,0.1);
|
||||
background: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.text-input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 14px 16px;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
color: var(--ai-text);
|
||||
box-sizing: border-box;
|
||||
font-weight: 500;
|
||||
|
||||
&::placeholder { color: #C8B8A8; }
|
||||
}
|
||||
|
||||
.field-item {
|
||||
margin-bottom: 14px;
|
||||
&:last-child { margin-bottom: 0; }
|
||||
}
|
||||
.field-label {
|
||||
font-size: 14px;
|
||||
color: var(--ai-text);
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.field-emoji { font-size: 16px; }
|
||||
.required-mark {
|
||||
color: var(--ai-primary);
|
||||
font-size: 11px;
|
||||
background: rgba(255,107,53,0.1);
|
||||
padding: 1px 6px;
|
||||
border-radius: 6px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.optional-mark {
|
||||
color: #94A3B8;
|
||||
font-size: 11px;
|
||||
background: rgba(148,163,184,0.1);
|
||||
padding: 1px 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.textarea-wrap {
|
||||
background: #FFF8F0;
|
||||
border-radius: 14px;
|
||||
border: 2px solid #FFE8D4;
|
||||
transition: all 0.3s;
|
||||
overflow: hidden;
|
||||
|
||||
&.focus {
|
||||
border-color: var(--ai-primary);
|
||||
box-shadow: 0 0 0 4px rgba(255,107,53,0.1);
|
||||
background: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.textarea-input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 12px 16px;
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
color: var(--ai-text);
|
||||
resize: none;
|
||||
box-sizing: border-box;
|
||||
line-height: 1.6;
|
||||
font-weight: 500;
|
||||
|
||||
&::placeholder { color: #C8B8A8; }
|
||||
}
|
||||
|
||||
.bottom-area { margin-top: auto; padding-top: 8px; padding-bottom: 20px; }
|
||||
|
||||
.create-btn {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
font-size: 18px !important;
|
||||
padding: 18px 0 !important;
|
||||
border-radius: 28px !important;
|
||||
background: linear-gradient(135deg, #FF8C42, #FF6B35, #FF5722) !important;
|
||||
box-shadow: 0 6px 24px rgba(255,107,53,0.35) !important;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.btn-rocket { font-size: 20px; }
|
||||
|
||||
.time-hint {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: var(--ai-primary);
|
||||
margin-top: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
210
frontend/src/views/public/create/views/StyleSelectView.vue
Normal file
210
frontend/src/views/public/create/views/StyleSelectView.vue
Normal file
@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div class="style-page page-fullscreen">
|
||||
<PageHeader title="选择画风" subtitle="为绘本挑选一种你喜欢的画风" :step="2" />
|
||||
|
||||
<div class="content page-content">
|
||||
<!-- 提示文字 -->
|
||||
<div class="tip-banner">
|
||||
<span class="tip-icon">🎨</span>
|
||||
<span>每种画风都有独特魅力，选一个最喜欢的吧！</span>
|
||||
</div>
|
||||
|
||||
<div class="style-grid">
|
||||
<div
|
||||
v-for="s in styles"
|
||||
:key="s.styleId"
|
||||
class="style-card"
|
||||
:class="{ selected: selected === s.styleId }"
|
||||
@click="selected = s.styleId"
|
||||
>
|
||||
<!-- 选中角标 -->
|
||||
<div v-if="selected === s.styleId" class="check-corner" :style="{ background: s.color }">
|
||||
<span>✓</span>
|
||||
</div>
|
||||
|
||||
<div class="style-preview" :style="{ background: `linear-gradient(135deg, ${s.color}18, ${s.color}35)` }">
|
||||
<span class="style-emoji">{{ s.emoji }}</span>
|
||||
</div>
|
||||
<div class="style-info">
|
||||
<div class="style-name">{{ s.styleName }}</div>
|
||||
<div class="style-desc">{{ s.desc }}</div>
|
||||
</div>
|
||||
<div v-if="selected === s.styleId" class="style-selected-tag" :style="{ background: s.color }">
|
||||
已选择
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="page-bottom">
|
||||
<button class="btn-primary next-btn" :disabled="!selected" @click="goNext">
|
||||
下一步，编故事 →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import PageHeader from '@/components/aicreate/PageHeader.vue'
|
||||
import { useAicreateStore } from '@/stores/aicreate'
|
||||
|
||||
const router = useRouter()
|
||||
const store = useAicreateStore()
|
||||
const selected = ref('')
|
||||
|
||||
const styles = [
|
||||
{ styleId: 'style_cartoon', styleName: '卡通风格', emoji: '🎨', color: '#FF6B35', desc: '色彩鲜明，充满童趣' },
|
||||
{ styleId: 'style_watercolor', styleName: '水彩风格', emoji: '🖌️', color: '#2EC4B6', desc: '柔和透明，梦幻浪漫' },
|
||||
{ styleId: 'style_ink', styleName: '水墨国风', emoji: '🏮', color: '#6C63FF', desc: '古韵悠长，意境深远' },
|
||||
{ styleId: 'style_pencil', styleName: '彩铅风格', emoji: '✏️', color: '#FFD166', desc: '细腻温暖，自然亲切' },
|
||||
{ styleId: 'style_oilpaint', styleName: '油画风格', emoji: '🖼️', color: '#8B5E3C', desc: '色彩浓郁，质感丰富' },
|
||||
{ styleId: 'style_collage', styleName: '剪贴画', emoji: '✂️', color: '#E91E63', desc: '趣味拼贴，创意满满' },
|
||||
]
|
||||
|
||||
const goNext = () => {
|
||||
store.selectedStyle = selected.value
|
||||
router.push('/p/create/story')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.style-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #F5F0FF 0%, #FFF0F5 40%, #FFF5F0 70%, #FFFDF7 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tip-banner {
|
||||
background: rgba(255,255,255,0.85);
|
||||
border: 1.5px solid #E8D5F5;
|
||||
border-radius: 16px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #7B61B8;
|
||||
}
|
||||
.tip-icon { font-size: 18px; }
|
||||
|
||||
.style-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 14px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.style-card {
|
||||
background: rgba(255,255,255,0.92);
|
||||
border-radius: 22px;
|
||||
padding: 14px;
|
||||
text-align: center;
|
||||
border: 3px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.05);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&:active { transform: scale(0.97); }
|
||||
|
||||
&.selected {
|
||||
transform: scale(1.04);
|
||||
box-shadow: 0 8px 28px rgba(0,0,0,0.12);
|
||||
|
||||
.style-preview {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 动态设置选中边框颜色
|
||||
.style-card.selected {
|
||||
border-color: var(--ai-primary);
|
||||
}
|
||||
|
||||
.check-corner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 0 19px 0 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
z-index: 2;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.style-preview {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 18px;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.style-emoji {
|
||||
font-size: 52px;
|
||||
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.style-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.style-name {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: var(--ai-text);
|
||||
}
|
||||
|
||||
.style-desc {
|
||||
font-size: 12px;
|
||||
color: var(--ai-text-sub);
|
||||
margin-top: 4px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.style-selected-tag {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
border-radius: 14px;
|
||||
padding: 4px 14px;
|
||||
display: inline-block;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.bottom-area { margin-top: auto; padding-top: 16px; }
|
||||
|
||||
.next-btn {
|
||||
font-size: 17px !important;
|
||||
padding: 16px 0 !important;
|
||||
border-radius: 28px !important;
|
||||
background: linear-gradient(135deg, #FF8C42, #FF6B35) !important;
|
||||
box-shadow: 0 6px 24px rgba(255,107,53,0.3) !important;
|
||||
}
|
||||
</style>
|
||||
433
frontend/src/views/public/create/views/UploadView.vue
Normal file
433
frontend/src/views/public/create/views/UploadView.vue
Normal file
@ -0,0 +1,433 @@
|
||||
<template>
|
||||
<div class="upload-page page-fullscreen">
|
||||
<PageHeader title="上传作品" subtitle="拍下孩子的画，让AI识别角色" :step="0" />
|
||||
|
||||
<div class="content page-content">
|
||||
<template v-if="!preview">
|
||||
<!-- 上传区域 -->
|
||||
<div class="upload-area card">
|
||||
<template v-if="uploading">
|
||||
<div class="uploading-icon">📤</div>
|
||||
<div class="uploading-text">正在上传...</div>
|
||||
<div class="progress-bar"><div class="progress-fill" /></div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="upload-icon">🖼️</div>
|
||||
<div class="upload-title">上传孩子的画作</div>
|
||||
<div class="upload-desc">支持拍照或从相册选择<br/>AI会自动识别画中的角色</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 拍照/相册按钮 -->
|
||||
<div class="action-btns">
|
||||
<div class="action-btn camera" @click="pickImage('camera')">
|
||||
<div class="action-emoji">📷</div>
|
||||
<div class="action-label">拍照</div>
|
||||
<input ref="cameraInput" type="file" accept="image/*" capture="environment" @change="onFileChange" style="display:none" />
|
||||
</div>
|
||||
<div class="action-btn album" @click="pickImage('album')">
|
||||
<div class="action-emoji">🖼️</div>
|
||||
<div class="action-label">相册</div>
|
||||
<input ref="albumInput" type="file" accept="image/*" @change="onFileChange" style="display:none" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<!-- 预览 -->
|
||||
<div class="preview-card card">
|
||||
<div class="preview-image">
|
||||
<img :src="preview" alt="预览" />
|
||||
</div>
|
||||
<!-- 识别中：填满空间 -->
|
||||
<div v-if="uploading" class="recognizing-box">
|
||||
<div class="recognizing-emojis">
|
||||
<span class="recognizing-emoji e1">🎨</span>
|
||||
<span class="recognizing-emoji e2">✏️</span>
|
||||
<span class="recognizing-emoji e3">🖌️</span>
|
||||
</div>
|
||||
<div class="recognizing-text">{{ uploadProgress || 'AI 小画家正在认识你的角色...' }}</div>
|
||||
</div>
|
||||
<div v-else class="preview-info">
|
||||
<div class="preview-ok">✅ 已选择图片</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 识别中的趣味等待内容（填满空白） -->
|
||||
<div v-if="uploading" class="waiting-content">
|
||||
<div class="waiting-card">
|
||||
<div class="waiting-title">✨ AI 正在为你做这些事</div>
|
||||
<div class="waiting-steps">
|
||||
<div class="w-step" :class="{ active: uploadStage >= 1 }">
|
||||
<span class="w-icon">📤</span>
|
||||
<span>上传画作到云端</span>
|
||||
<span v-if="uploadStage >= 1" class="w-done">✓</span>
|
||||
</div>
|
||||
<div class="w-step" :class="{ active: uploadStage >= 2 }">
|
||||
<span class="w-icon">👀</span>
|
||||
<span>AI 识别画中角色</span>
|
||||
<span v-if="uploadStage >= 2" class="w-done">✓</span>
|
||||
</div>
|
||||
<div class="w-step" :class="{ active: uploadStage >= 3 }">
|
||||
<span class="w-icon">🎭</span>
|
||||
<span>提取角色特征</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="waiting-funfact">
|
||||
<span class="ff-icon">💡</span>
|
||||
<span class="ff-text">你知道吗？AI 画师可以识别超过 100 种不同的卡通角色哦！</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!quotaOk" class="quota-warn">{{ quotaMsg }}</div>
|
||||
<div v-if="uploadError" class="upload-error">{{ uploadError }}</div>
|
||||
<div class="preview-actions">
|
||||
<button class="btn-ghost" @click="reset">重新上传</button>
|
||||
<button class="btn-primary" :disabled="uploading" @click="goNext">
|
||||
{{ uploading ? 'AI 识别中...' : '识别角色 →' }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import PageHeader from '@/components/aicreate/PageHeader.vue'
|
||||
import { useAicreateStore } from '@/stores/aicreate'
|
||||
import { extractCharacters, ossUpload, checkQuota } from '@/api/aicreate'
|
||||
|
||||
const router = useRouter()
|
||||
const store = useAicreateStore()
|
||||
const preview = ref<string | null>(null)
|
||||
const uploading = ref(false)
|
||||
const cameraInput = ref<HTMLInputElement | null>(null)
|
||||
const albumInput = ref<HTMLInputElement | null>(null)
|
||||
const fileSizeInfo = ref('')
|
||||
const compressed = ref(false)
|
||||
const saveOriginal = ref(false)
|
||||
const uploadProgress = ref('')
|
||||
const uploadStage = ref(0) // 0=未开始 1=上传中 2=识别中 3=提取中
|
||||
const quotaOk = ref(true)
|
||||
const quotaMsg = ref('')
|
||||
let selectedFile: File | null = null
|
||||
|
||||
// 进入页面时检查额度
|
||||
onMounted(async () => {
|
||||
try {
|
||||
await checkQuota()
|
||||
quotaOk.value = true
|
||||
} catch (e: any) {
|
||||
const msg = e.message || ''
|
||||
// 只有明确的额度不足才阻止，网络/签名错误放行（后端会二次校验）
|
||||
if (msg.includes('额度') || msg.includes('QUOTA') || msg.includes('30003')) {
|
||||
quotaOk.value = false
|
||||
quotaMsg.value = '创作额度不足，请联系管理员'
|
||||
}
|
||||
// 其他错误（403签名/网络超时等）静默放行
|
||||
}
|
||||
})
|
||||
|
||||
const pickImage = (type: string) => {
|
||||
if (type === 'camera') cameraInput.value?.click()
|
||||
else albumInput.value?.click()
|
||||
}
|
||||
|
||||
/**
|
||||
* Canvas 压缩：将超高清图片缩放到 maxWidth，输出 JPEG 质量 quality
|
||||
* 目标：手机原片 8-20MB → 压缩后 <2MB
|
||||
*/
|
||||
const MAX_WIDTH = 1920
|
||||
const MAX_SIZE = 2 * 1024 * 1024 // 2MB
|
||||
const JPEG_QUALITY = 0.85
|
||||
|
||||
function compressImage(file: File): Promise<File> {
|
||||
return new Promise((resolve) => {
|
||||
// 小于 2MB 的图片不压缩
|
||||
if (file.size <= MAX_SIZE) {
|
||||
resolve(file)
|
||||
return
|
||||
}
|
||||
|
||||
const img = new Image()
|
||||
const url = URL.createObjectURL(file)
|
||||
img.onload = () => {
|
||||
URL.revokeObjectURL(url)
|
||||
|
||||
let width = img.width
|
||||
let height = img.height
|
||||
// 缩放到 maxWidth
|
||||
if (width > MAX_WIDTH) {
|
||||
height = Math.round(height * MAX_WIDTH / width)
|
||||
width = MAX_WIDTH
|
||||
}
|
||||
|
||||
const canvas = document.createElement('canvas')
|
||||
canvas.width = width
|
||||
canvas.height = height
|
||||
const ctx = canvas.getContext('2d')
|
||||
ctx.drawImage(img, 0, 0, width, height)
|
||||
|
||||
canvas.toBlob(
|
||||
(blob) => {
|
||||
if (blob) {
|
||||
const compressedFile = new File([blob], file.name.replace(/\.\w+$/, '.jpg'), {
|
||||
type: 'image/jpeg',
|
||||
lastModified: Date.now()
|
||||
})
|
||||
resolve(compressedFile)
|
||||
} else {
|
||||
resolve(file) // fallback to original
|
||||
}
|
||||
},
|
||||
'image/jpeg',
|
||||
JPEG_QUALITY
|
||||
)
|
||||
}
|
||||
img.onerror = () => {
|
||||
URL.revokeObjectURL(url)
|
||||
resolve(file) // fallback
|
||||
}
|
||||
img.src = url
|
||||
})
|
||||
}
|
||||
|
||||
function formatSize(bytes: number): string {
|
||||
if (bytes < 1024) return bytes + ' B'
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(0) + ' KB'
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
|
||||
}
|
||||
|
||||
const onFileChange = async (e: Event) => {
|
||||
const target = e.target as HTMLInputElement
|
||||
const file = target.files?.[0]
|
||||
if (!file) return
|
||||
uploading.value = true
|
||||
compressed.value = false
|
||||
|
||||
const originalSize = file.size
|
||||
|
||||
// 压缩超大图片
|
||||
const processedFile = await compressImage(file)
|
||||
selectedFile = processedFile
|
||||
|
||||
if (processedFile.size < originalSize) {
|
||||
compressed.value = true
|
||||
fileSizeInfo.value = `${formatSize(originalSize)} → ${formatSize(processedFile.size)}`
|
||||
} else {
|
||||
fileSizeInfo.value = formatSize(originalSize)
|
||||
}
|
||||
|
||||
// 本地预览（用压缩后的文件）
|
||||
const reader = new FileReader()
|
||||
reader.onload = (ev) => {
|
||||
preview.value = ev.target?.result as string
|
||||
uploading.value = false
|
||||
}
|
||||
reader.readAsDataURL(processedFile)
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
preview.value = null
|
||||
selectedFile = null
|
||||
fileSizeInfo.value = ''
|
||||
compressed.value = false
|
||||
uploadError.value = ''
|
||||
}
|
||||
|
||||
const uploadError = ref('')
|
||||
|
||||
// 错误消息脱敏：不向用户暴露后端服务名称
|
||||
function sanitizeError(msg: string | undefined): string {
|
||||
if (!msg) return '请稍后重试'
|
||||
if (msg.includes('火山引擎') || msg.includes('VolcEngine')) return '图片分析服务暂时不可用，请稍后重试'
|
||||
if (msg.includes('MiniMax')) return '语音服务暂时不可用，请稍后重试'
|
||||
if (msg.includes('OSS') || msg.includes('oss')) return '文件存储服务异常，请稍后重试'
|
||||
if (msg.includes('401') || msg.includes('签名')) return '请返回首页重新开始'
|
||||
if (msg.includes('403')) return '认证失败，请检查机构配置后重试'
|
||||
if (msg.includes('timeout') || msg.includes('超时')) return '网络超时，请检查网络后重试'
|
||||
return msg
|
||||
}
|
||||
|
||||
const goNext = async () => {
|
||||
if (!selectedFile) return
|
||||
if (!quotaOk.value) {
|
||||
uploadError.value = quotaMsg.value || '创作额度不足'
|
||||
return
|
||||
}
|
||||
uploading.value = true
|
||||
uploadError.value = ''
|
||||
uploadStage.value = 1
|
||||
try {
|
||||
// Step 1: STS 直传图片到 OSS
|
||||
uploadProgress.value = '上传画作到云端...'
|
||||
const ossUrl = await ossUpload(selectedFile, {
|
||||
type: 'img',
|
||||
onProgress: (p: number) => { uploadProgress.value = `上传画作 ${p}%` }
|
||||
})
|
||||
uploadStage.value = 2
|
||||
|
||||
// Step 2: 用 URL 调 A6 角色提取
|
||||
uploadProgress.value = 'AI 正在识别角色...'
|
||||
const res = await extractCharacters(ossUrl, {
|
||||
saveOriginal: saveOriginal.value
|
||||
})
|
||||
const data = res.data || {}
|
||||
const chars = (data.characters || []).map((c: any) => ({
|
||||
...c,
|
||||
type: c.charType || c.type || 'SIDEKICK'
|
||||
}))
|
||||
if (chars.length === 0) throw new Error('AI未识别到角色，请更换图片重试')
|
||||
store.extractId = data.extractId || ''
|
||||
store.characters = chars
|
||||
store.imageUrl = ossUrl
|
||||
if (data.workId) store.originalWorkId = data.workId
|
||||
router.push('/p/create/characters')
|
||||
} catch (e: any) {
|
||||
uploadError.value = '识别失败：' + sanitizeError(e.message)
|
||||
uploading.value = false
|
||||
uploadProgress.value = ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.upload-page {
|
||||
min-height: 100vh;
|
||||
background: var(--ai-bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.upload-area {
|
||||
flex: 1;
|
||||
min-height: 280px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 3px dashed var(--ai-border);
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
}
|
||||
.upload-icon, .uploading-icon {
|
||||
font-size: 64px;
|
||||
}
|
||||
.uploading-icon { animation: pulse 1.5s infinite; }
|
||||
.upload-title { font-size: 18px; font-weight: 700; margin-top: 16px; }
|
||||
.upload-desc { font-size: 14px; color: var(--ai-text-sub); margin-top: 8px; line-height: 1.6; }
|
||||
.uploading-text { font-size: 16px; font-weight: 600; margin-top: 16px; }
|
||||
.progress-bar {
|
||||
width: 200px; height: 6px; background: var(--ai-border); border-radius: 3px; margin-top: 16px; overflow: hidden;
|
||||
}
|
||||
.progress-fill {
|
||||
width: 100%; height: 100%; background: var(--ai-gradient); border-radius: 3px;
|
||||
animation: loading 1.5s ease-in-out infinite;
|
||||
}
|
||||
@keyframes loading { 0%{transform:translateX(-100%)} 100%{transform:translateX(200%)} }
|
||||
|
||||
.action-btns {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
border-radius: var(--ai-radius);
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--ai-shadow);
|
||||
|
||||
&.camera { background: var(--ai-gradient); }
|
||||
&.album { background: var(--ai-gradient-purple); }
|
||||
}
|
||||
.action-emoji { font-size: 32px; }
|
||||
.action-label { font-size: 15px; font-weight: 700; color: #fff; margin-top: 8px; }
|
||||
|
||||
.preview-card { overflow: hidden; flex: 1; }
|
||||
.preview-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 4/3;
|
||||
background: #F5F0E8;
|
||||
img { width: 100%; height: 100%; object-fit: cover; }
|
||||
}
|
||||
.preview-info { padding: 20px; text-align: center; }
|
||||
.preview-ok { font-size: 15px; font-weight: 600; color: var(--ai-success); }
|
||||
|
||||
/* 儿童风格识别中动画 */
|
||||
.recognizing-box {
|
||||
background: linear-gradient(135deg, #FFF8E1, #FFFDE7);
|
||||
border-radius: 0 0 16px 16px;
|
||||
padding: 20px 16px;
|
||||
text-align: center;
|
||||
}
|
||||
.recognizing-emojis {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.recognizing-emoji {
|
||||
font-size: 28px;
|
||||
display: inline-block;
|
||||
animation: emojiPop 1.8s ease-in-out infinite;
|
||||
}
|
||||
.recognizing-emoji.e1 { animation-delay: 0s; }
|
||||
.recognizing-emoji.e2 { animation-delay: 0.4s; }
|
||||
.recognizing-emoji.e3 { animation-delay: 0.8s; }
|
||||
@keyframes emojiPop {
|
||||
0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.5; }
|
||||
50% { transform: scale(1.3) rotate(10deg); opacity: 1; }
|
||||
}
|
||||
.recognizing-text {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #F59E0B;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
// 等待内容 — 填满空白
|
||||
.waiting-content {
|
||||
display: flex; flex-direction: column; gap: 12px; flex: 1;
|
||||
}
|
||||
.waiting-card {
|
||||
background: rgba(255,255,255,0.92); border-radius: 20px;
|
||||
padding: 18px 20px; box-shadow: 0 4px 16px rgba(0,0,0,0.05);
|
||||
}
|
||||
.waiting-title {
|
||||
font-size: 15px; font-weight: 800; color: #1E293B; margin-bottom: 14px;
|
||||
}
|
||||
.waiting-steps { display: flex; flex-direction: column; gap: 10px; }
|
||||
.w-step {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 10px 14px; border-radius: 14px; background: #F8F8F5;
|
||||
font-size: 14px; color: #94A3B8; transition: all 0.3s;
|
||||
&.active { background: #FFF8E7; color: #1E293B; font-weight: 600; }
|
||||
}
|
||||
.w-icon { font-size: 20px; }
|
||||
.w-done { margin-left: auto; color: #10B981; font-weight: 700; font-size: 16px; }
|
||||
|
||||
.waiting-funfact {
|
||||
display: flex; align-items: flex-start; gap: 10px;
|
||||
background: linear-gradient(135deg, #EDE9FE, #F5F3FF);
|
||||
border-radius: 16px; padding: 14px 16px;
|
||||
}
|
||||
.ff-icon { font-size: 20px; flex-shrink: 0; }
|
||||
.ff-text { font-size: 13px; color: #6D28D9; line-height: 1.6; }
|
||||
.quota-warn {
|
||||
background: #FEF3C7; color: #92400E; font-size: 13px; text-align: center;
|
||||
padding: 10px 16px; border-radius: 10px; margin-top: 12px; font-weight: 600;
|
||||
}
|
||||
.upload-error { color: #EF4444; font-size: 13px; text-align: center; margin-top: 12px; font-weight: 500; }
|
||||
.preview-actions { display: flex; gap: 12px; margin-top: 12px; button { flex: 1; } }
|
||||
</style>
|
||||
353
frontend/src/views/public/create/views/WelcomeView.vue
Normal file
353
frontend/src/views/public/create/views/WelcomeView.vue
Normal file
@ -0,0 +1,353 @@
|
||||
<template>
|
||||
<div class="welcome-page">
|
||||
<!-- Hero（紧凑版） -->
|
||||
<div class="hero-compact">
|
||||
<div class="hero-bg-deco d1">⭐</div>
|
||||
<div class="hero-bg-deco d2">🌈</div>
|
||||
<div class="hero-bg-deco d3">✨</div>
|
||||
<div class="hero-row">
|
||||
<div class="hero-books">
|
||||
<span v-for="(b, i) in ['📕','📗','📘','📙']" :key="i" class="book-icon">{{ b }}</span>
|
||||
</div>
|
||||
<div class="hero-text">
|
||||
<div class="hero-title">{{ brandTitle }}</div>
|
||||
<div class="hero-sub">{{ brandSubtitle }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-tag">✨ 拍一张画，AI帮你变成绘本</div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区（flex:1 撑满中间） -->
|
||||
<div class="main-area">
|
||||
<!-- 流程步骤（垂直时间线） -->
|
||||
<div class="steps-card">
|
||||
<div class="steps-header">🎯 创作流程</div>
|
||||
<div class="steps-timeline">
|
||||
<div v-for="(s, i) in steps" :key="i" class="step-item">
|
||||
<div class="step-left">
|
||||
<div class="step-num" :style="{ background: s.color }">{{ i + 1 }}</div>
|
||||
<div v-if="i < steps.length - 1" class="step-line" :style="{ background: s.color + '40' }" />
|
||||
</div>
|
||||
<div class="step-right">
|
||||
<div class="step-head">
|
||||
<span class="step-emoji">{{ s.emoji }}</span>
|
||||
<span class="step-title">{{ s.title }}</span>
|
||||
</div>
|
||||
<div class="step-desc">{{ s.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 特色标签 -->
|
||||
<div class="features-row">
|
||||
<div class="feature-tag">🎨 AI绘画</div>
|
||||
<div class="feature-tag">📖 自动排版</div>
|
||||
<div class="feature-tag">🔊 语音配音</div>
|
||||
<div class="feature-tag">🎤 人工配音</div>
|
||||
</div>
|
||||
|
||||
<!-- 亮点描述 -->
|
||||
<div class="highlights">
|
||||
<div class="hl-item">
|
||||
<span class="hl-icon">🖌️</span>
|
||||
<span class="hl-text">上传孩子的画作，AI 自动识别角色</span>
|
||||
</div>
|
||||
<div class="hl-item">
|
||||
<span class="hl-icon">📖</span>
|
||||
<span class="hl-text">一键生成多页精美绘本故事</span>
|
||||
</div>
|
||||
<div class="hl-item">
|
||||
<span class="hl-icon">🔊</span>
|
||||
<span class="hl-text">AI 配音或亲自录音，让故事活起来</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部（固定） -->
|
||||
<div class="bottom-area safe-bottom">
|
||||
<!-- Token模式无token时 -->
|
||||
<template v-if="isTokenMode && !store.sessionToken">
|
||||
<div class="auth-prompt" style="text-align:center;padding:20px;">
|
||||
<p style="font-size:16px;color:#666;margin-bottom:8px;">本应用需要通过企业入口访问</p>
|
||||
<p style="font-size:14px;color:#999;margin-bottom:20px;">请联系您的管理员获取访问链接</p>
|
||||
<button v-if="store.authRedirectUrl" class="btn-primary start-btn" @click="goToEnterprise">
|
||||
<span class="btn-icon">🔑</span> 前往企业认证
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 有token或HMAC模式 -->
|
||||
<template v-else>
|
||||
<button class="btn-primary start-btn" @click="handleStart">
|
||||
<span class="btn-icon">🚀</span> 开始创作
|
||||
</button>
|
||||
</template>
|
||||
<div class="slogan">让每个孩子都是小画家 ✨</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAicreateStore } from '@/stores/aicreate'
|
||||
import config from '@/utils/aicreate/config'
|
||||
|
||||
const router = useRouter()
|
||||
const store = useAicreateStore()
|
||||
|
||||
const steps = [
|
||||
{ emoji: '📸', title: '拍照上传', desc: '拍下孩子的画作', color: '#FF6B35' },
|
||||
{ emoji: '🎭', title: '角色提取', desc: 'AI智能识别角色', color: '#6C63FF' },
|
||||
{ emoji: '✏️', title: '编排故事', desc: '选画风填要素', color: '#2EC4B6' },
|
||||
{ emoji: '📖', title: '绘本创作', desc: 'AI生成完整绘本', color: '#FFD166' },
|
||||
]
|
||||
|
||||
onMounted(async () => {
|
||||
// 检查恢复状态
|
||||
const recovery = store.restoreRecoveryState()
|
||||
if (recovery && recovery.path && recovery.path !== '/') {
|
||||
// 将旧路径映射到新路径
|
||||
const newPath = '/p/create' + recovery.path
|
||||
router.push(newPath)
|
||||
}
|
||||
})
|
||||
|
||||
const handleStart = () => {
|
||||
if (!store.sessionToken) return
|
||||
store.reset()
|
||||
router.push('/p/create/upload')
|
||||
}
|
||||
|
||||
const goToEnterprise = () => {
|
||||
window.location.href = store.authRedirectUrl
|
||||
}
|
||||
|
||||
const brandTitle = config.brand.title || '乐读派'
|
||||
const brandSubtitle = config.brand.subtitle || 'AI智能儿童绘本创作'
|
||||
const isTokenMode = true // 整合后总是 Token 模式
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.welcome-page {
|
||||
height: 100vh;
|
||||
background: linear-gradient(180deg, #FFF8E7 0%, #FFF3E0 30%, #FFF0F0 60%, #FFFDF7 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ---- Hero 紧凑版 ---- */
|
||||
.hero-compact {
|
||||
background: linear-gradient(135deg, #FF6B35 0%, #FF8F65 40%, #FFB088 70%, #FFCBA4 100%);
|
||||
border-radius: 0 0 32px 32px;
|
||||
padding: 40px 20px 18px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.hero-bg-deco {
|
||||
position: absolute;
|
||||
opacity: 0.18;
|
||||
pointer-events: none;
|
||||
animation: twinkle 3s ease-in-out infinite;
|
||||
&.d1 { top: 10px; left: 16px; font-size: 20px; }
|
||||
&.d2 { top: 16px; right: 20px; font-size: 18px; animation-delay: 0.8s; }
|
||||
&.d3 { bottom: 10px; right: 30%; font-size: 16px; animation-delay: 1.5s; }
|
||||
}
|
||||
@keyframes twinkle {
|
||||
0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.18; }
|
||||
50% { transform: scale(1.15) rotate(8deg); opacity: 0.35; }
|
||||
}
|
||||
.hero-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 14px;
|
||||
}
|
||||
.hero-books {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
.book-icon {
|
||||
font-size: 26px;
|
||||
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
|
||||
animation: bookBounce 2.5s ease-in-out infinite;
|
||||
&:nth-child(2) { animation-delay: 0.3s; }
|
||||
&:nth-child(3) { animation-delay: 0.6s; }
|
||||
&:nth-child(4) { animation-delay: 0.9s; }
|
||||
}
|
||||
@keyframes bookBounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-5px); }
|
||||
}
|
||||
.hero-text { text-align: left; }
|
||||
.hero-title {
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
letter-spacing: 3px;
|
||||
text-shadow: 0 2px 8px rgba(0,0,0,0.18);
|
||||
}
|
||||
.hero-sub {
|
||||
font-size: 13px;
|
||||
color: rgba(255,255,255,0.9);
|
||||
margin-top: 2px;
|
||||
letter-spacing: 1.5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.hero-tag {
|
||||
margin-top: 10px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: rgba(255,255,255,0.22);
|
||||
border-radius: 20px;
|
||||
padding: 5px 16px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
backdrop-filter: blur(8px);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ---- 主内容区 ---- */
|
||||
.main-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
padding: 10px 16px 0;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* 流程步骤（垂直时间线） */
|
||||
.steps-card {
|
||||
background: rgba(255,255,255,0.92);
|
||||
border-radius: 16px;
|
||||
padding: 12px 14px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.05);
|
||||
}
|
||||
.steps-header {
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.steps-timeline { display: flex; flex-direction: column; }
|
||||
.step-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
.step-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 32px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.step-num {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||||
}
|
||||
.step-line {
|
||||
width: 3px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
margin: 3px 0;
|
||||
}
|
||||
.step-right { padding-top: 4px; }
|
||||
.step-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.step-emoji { font-size: 18px; }
|
||||
.step-title { font-size: 14px; font-weight: 800; color: #333; }
|
||||
.step-desc { font-size: 11px; color: #999; margin-top: 1px; padding-left: 24px; }
|
||||
|
||||
/* 特色标签 */
|
||||
.features-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.feature-tag {
|
||||
background: rgba(255,255,255,0.85);
|
||||
border: 1.5px solid #FFE4D0;
|
||||
border-radius: 20px;
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--ai-primary, #FF6B35);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 亮点描述 */
|
||||
.highlights {
|
||||
background: rgba(255,255,255,0.88);
|
||||
border-radius: 16px;
|
||||
padding: 12px 14px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.04);
|
||||
}
|
||||
.hl-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 6px 0;
|
||||
&:not(:last-child) { border-bottom: 1px dashed #FFE4D0; }
|
||||
}
|
||||
.hl-icon { font-size: 20px; flex-shrink: 0; }
|
||||
.hl-text {
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* ---- 底部固定区 ---- */
|
||||
.bottom-area {
|
||||
flex-shrink: 0;
|
||||
padding: 12px 16px 8px;
|
||||
}
|
||||
.start-btn {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 16px 0 !important;
|
||||
font-size: 18px !important;
|
||||
border-radius: 28px !important;
|
||||
background: linear-gradient(135deg, #FF8C42, #FF6B35, #FF5722) !important;
|
||||
box-shadow: 0 6px 24px rgba(255,107,53,0.35) !important;
|
||||
letter-spacing: 2px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
&:active { transform: scale(0.98); opacity: 0.9; }
|
||||
}
|
||||
.btn-icon { font-size: 20px; }
|
||||
.slogan {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: var(--ai-primary, #FF6B35);
|
||||
font-weight: 600;
|
||||
margin-top: 8px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user