405 lines
20 KiB
Vue
405 lines
20 KiB
Vue
<template>
|
|
<div class="flex flex-col h-full bg-white rounded-xl overflow-hidden">
|
|
<!-- Header -->
|
|
<div
|
|
class="px-8 py-4 border-b border-slate-100 flex items-center justify-between bg-white z-10 shadow-sm sticky top-0">
|
|
<div class="flex items-center gap-4 w-1/3">
|
|
<button @click="$router.back()"
|
|
class="text-slate-400 hover:text-slate-600 transition-colors cursor-pointer"><i
|
|
class="pi pi-arrow-left text-xl"></i></button>
|
|
<div
|
|
class="flex items-center gap-2 px-3 py-1 bg-green-50 text-green-700 text-xs font-medium rounded-full animate-pulse">
|
|
<i class="pi pi-cloud-upload"></i> {{ autoSaveStatus }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 flex justify-center">
|
|
<div class="text-lg font-bold text-slate-900">
|
|
{{ isEditMode ? '编辑内容' : '发布新内容' }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-3 w-1/3 justify-end">
|
|
<button
|
|
class="px-6 py-2 border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50 font-bold transition-colors cursor-pointer">存草稿</button>
|
|
<button @click="submit"
|
|
class="px-8 py-2 bg-primary-600 text-white rounded-lg font-bold hover:bg-primary-700 shadow-lg shadow-primary-200 transition-all active:scale-95 cursor-pointer">发布</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content Form -->
|
|
<div class="flex-1 overflow-y-auto bg-slate-50/50 p-8 md:p-12">
|
|
<div class="max-w-screen-xl mx-auto bg-white p-10 rounded-2xl border border-slate-200 shadow-sm space-y-10">
|
|
|
|
<!-- Row 1: Genre, Key & Title -->
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-8">
|
|
<div class="md:col-span-2">
|
|
<label class="block text-sm font-bold text-slate-700 mb-2">曲种 <span
|
|
class="text-red-500">*</span></label>
|
|
<Select v-model="form.genre" :options="genres" placeholder="选择曲种" class="w-full h-12" />
|
|
</div>
|
|
<div class="md:col-span-2">
|
|
<label class="block text-sm font-bold text-slate-700 mb-2">主定调</label>
|
|
<Select v-model="form.key" :options="keys" placeholder="选择定调" class="w-full h-12" />
|
|
</div>
|
|
<div class="md:col-span-8">
|
|
<label class="block text-sm font-bold text-slate-700 mb-2">标题 <span
|
|
class="text-red-500">*</span></label>
|
|
<input v-model="form.title" type="text" placeholder="请输入内容标题"
|
|
class="w-full h-12 px-4 border border-slate-200 rounded-lg focus:border-primary-500 outline-none transition-colors">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 3: Price -->
|
|
<div>
|
|
<label class="block text-sm font-bold text-slate-700 mb-3">价格策略</label>
|
|
<div class="p-6 bg-slate-50 rounded-xl border border-slate-200">
|
|
<div class="flex gap-4 mb-6">
|
|
<button @click="form.priceType = 'free'"
|
|
class="flex-1 py-3 font-bold rounded-lg border-2 transition-all cursor-pointer"
|
|
:class="form.priceType === 'free' ? 'border-primary-600 bg-white text-primary-600' : 'border-transparent bg-white text-slate-500 hover:bg-slate-100'">免费</button>
|
|
<button @click="form.priceType = 'paid'"
|
|
class="flex-1 py-3 font-bold rounded-lg border-2 transition-all cursor-pointer"
|
|
:class="form.priceType === 'paid' ? 'border-primary-600 bg-white text-primary-600' : 'border-transparent bg-white text-slate-500 hover:bg-slate-100'">付费</button>
|
|
<button @click="form.priceType = 'member'"
|
|
class="flex-1 py-3 font-bold rounded-lg border-2 transition-all cursor-pointer"
|
|
:class="form.priceType === 'member' ? 'border-amber-500 bg-white text-amber-600' : 'border-transparent bg-white text-slate-500 hover:bg-slate-100'">会员专享</button>
|
|
</div>
|
|
|
|
<div v-if="form.priceType === 'paid'"
|
|
class="flex flex-wrap items-center gap-8 animate-in fade-in slide-in-from-top-2">
|
|
<div class="relative w-48">
|
|
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 font-bold">¥</span>
|
|
<input v-model="form.price" type="number"
|
|
class="w-full h-12 pl-8 pr-4 border border-slate-200 rounded-lg focus:border-primary-500 font-bold text-lg outline-none"
|
|
placeholder="0.00">
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<input type="checkbox" v-model="form.enableTrial" id="trial"
|
|
class="w-5 h-5 rounded border-slate-300 text-primary-600 focus:ring-primary-500 cursor-pointer">
|
|
<label for="trial" class="text-sm font-bold text-slate-700 cursor-pointer">开启试看</label>
|
|
</div>
|
|
<div v-if="form.enableTrial" class="flex items-center gap-2">
|
|
<input v-model="form.trialTime" type="number"
|
|
class="w-20 h-10 px-2 border border-slate-200 rounded-lg text-center outline-none">
|
|
<span class="text-sm text-slate-500">秒</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 4: Abstract -->
|
|
<div>
|
|
<label class="block text-sm font-bold text-slate-700 mb-2">摘要</label>
|
|
<textarea v-model="form.abstract" rows="4"
|
|
class="w-full p-4 rounded-xl border border-slate-200 focus:border-primary-500 outline-none resize-none transition-colors"
|
|
placeholder="请输入内容简介..."></textarea>
|
|
</div>
|
|
|
|
<!-- Row 5: Covers (Max 3) -->
|
|
<div>
|
|
<label class="block text-sm font-bold text-slate-700 mb-3">封面 (最多3张)</label>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<div v-for="(img, idx) in form.covers" :key="idx"
|
|
class="relative group aspect-video rounded-lg overflow-hidden bg-slate-100 border border-slate-200">
|
|
<img :src="img.url" class="w-full h-full object-cover">
|
|
<button @click="removeCover(idx)"
|
|
class="absolute top-1 right-1 w-6 h-6 bg-black/50 hover:bg-red-500 text-white rounded-full flex items-center justify-center transition-colors cursor-pointer"><i
|
|
class="pi pi-times text-xs"></i></button>
|
|
</div>
|
|
<div v-if="form.covers.length < 3" @click="triggerUpload('cover')"
|
|
class="aspect-video rounded-lg border-2 border-dashed border-slate-300 flex flex-col items-center justify-center text-slate-400 hover:border-primary-500 hover:bg-primary-50 hover:text-primary-600 cursor-pointer transition-all">
|
|
<i class="pi pi-plus text-2xl mb-1"></i>
|
|
<span class="text-xs font-bold">上传封面</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 6: Video -->
|
|
<div>
|
|
<label class="block text-sm font-bold text-slate-700 mb-3">视频列表</label>
|
|
<div class="space-y-3">
|
|
<div v-for="(file, idx) in form.videos" :key="idx"
|
|
class="flex items-center gap-4 p-3 border border-slate-200 rounded-lg bg-slate-50">
|
|
<div class="w-10 h-10 bg-blue-100 text-blue-600 rounded flex items-center justify-center"><i
|
|
class="pi pi-video"></i></div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="font-bold text-sm text-slate-900 truncate">{{ file.name }}</div>
|
|
<div class="text-xs text-slate-500">{{ file.size }}</div>
|
|
</div>
|
|
<button @click="removeMedia('videos', idx)"
|
|
class="text-slate-400 hover:text-red-500 px-2 cursor-pointer"><i
|
|
class="pi pi-trash"></i></button>
|
|
</div>
|
|
<div @click="triggerUpload('video')"
|
|
class="h-14 border-2 border-dashed border-slate-300 rounded-lg flex items-center justify-center text-slate-500 hover:border-blue-500 hover:bg-blue-50 hover:text-blue-600 cursor-pointer transition-all font-bold gap-2">
|
|
<i class="pi pi-video"></i> 添加视频
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 7: Audio -->
|
|
<div>
|
|
<label class="block text-sm font-bold text-slate-700 mb-3">音频列表</label>
|
|
<div class="space-y-3">
|
|
<div v-for="(file, idx) in form.audios" :key="idx"
|
|
class="flex items-center gap-4 p-3 border border-slate-200 rounded-lg bg-slate-50">
|
|
<div class="w-10 h-10 bg-purple-100 text-purple-600 rounded flex items-center justify-center"><i
|
|
class="pi pi-microphone"></i></div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="font-bold text-sm text-slate-900 truncate">{{ file.name }}</div>
|
|
<div class="text-xs text-slate-500">{{ file.size }}</div>
|
|
</div>
|
|
<button @click="removeMedia('audios', idx)"
|
|
class="text-slate-400 hover:text-red-500 px-2 cursor-pointer"><i
|
|
class="pi pi-trash"></i></button>
|
|
</div>
|
|
<div @click="triggerUpload('audio')"
|
|
class="h-14 border-2 border-dashed border-slate-300 rounded-lg flex items-center justify-center text-slate-500 hover:border-purple-500 hover:bg-purple-50 hover:text-purple-600 cursor-pointer transition-all font-bold gap-2">
|
|
<i class="pi pi-microphone"></i> 添加音频
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 8: Images -->
|
|
<div>
|
|
<label class="block text-sm font-bold text-slate-700 mb-3">图片列表</label>
|
|
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
|
<div v-for="(file, idx) in form.images" :key="idx"
|
|
class="relative group aspect-square rounded-lg overflow-hidden border border-slate-200">
|
|
<img :src="file.url" class="w-full h-full object-cover">
|
|
<div
|
|
class="absolute bottom-0 left-0 w-full bg-black/60 text-white text-xs p-1 truncate text-center">
|
|
{{ file.name }}</div>
|
|
<button @click="removeMedia('images', idx)"
|
|
class="absolute top-1 right-1 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"><i
|
|
class="pi pi-times text-xs"></i></button>
|
|
</div>
|
|
<div @click="triggerUpload('image')"
|
|
class="aspect-square border-2 border-dashed border-slate-300 rounded-lg flex flex-col items-center justify-center text-slate-500 hover:border-orange-500 hover:bg-orange-50 hover:text-orange-600 cursor-pointer transition-all">
|
|
<i class="pi pi-image text-2xl mb-1"></i>
|
|
<span class="text-xs font-bold">添加图片</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<input type="file" ref="fileInput" class="hidden" @change="handleFileChange" multiple>
|
|
<Toast />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Select from 'primevue/select';
|
|
import Toast from 'primevue/toast';
|
|
import { useToast } from 'primevue/usetoast';
|
|
import { computed, reactive, ref, onMounted } from 'vue';
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
import { commonApi } from '../../api/common';
|
|
import { creatorApi } from '../../api/creator';
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const toast = useToast();
|
|
const fileInput = ref(null);
|
|
const currentUploadType = ref('');
|
|
const isUploading = ref(false);
|
|
const isSubmitting = ref(false);
|
|
const isEditMode = ref(false);
|
|
const contentId = ref('');
|
|
|
|
const autoSaveStatus = ref('已自动保存');
|
|
|
|
const form = reactive({
|
|
genre: null,
|
|
title: '',
|
|
abstract: '',
|
|
priceType: 'free',
|
|
price: 9.9,
|
|
enableTrial: true,
|
|
trialTime: 60,
|
|
key: null,
|
|
covers: [], // { url, id, file }
|
|
videos: [], // { name, size, url, id }
|
|
audios: [], // { name, size, url, id }
|
|
images: [] // { name, size, url, id }
|
|
});
|
|
|
|
onMounted(async () => {
|
|
if (route.params.id) {
|
|
isEditMode.value = true;
|
|
contentId.value = route.params.id;
|
|
await loadContent(contentId.value);
|
|
}
|
|
});
|
|
|
|
const loadContent = async (id) => {
|
|
try {
|
|
const res = await creatorApi.getContent(id);
|
|
if (!res) return;
|
|
|
|
form.genre = res.genre;
|
|
form.title = res.title;
|
|
form.abstract = res.description;
|
|
form.price = res.price;
|
|
form.priceType = res.price > 0 ? 'paid' : 'free';
|
|
form.enableTrial = res.enable_trial;
|
|
form.trialTime = res.preview_seconds;
|
|
|
|
// Parse Assets
|
|
if (res.assets) {
|
|
res.assets.forEach(asset => {
|
|
const item = { id: asset.id, url: asset.url, name: asset.name || 'Unknown', size: asset.size || '' };
|
|
if (asset.role === 'cover') {
|
|
form.covers.push(item);
|
|
} else if (asset.type === 'video') {
|
|
form.videos.push(item);
|
|
} else if (asset.type === 'audio') {
|
|
form.audios.push(item);
|
|
} else if (asset.type === 'image') {
|
|
form.images.push(item);
|
|
}
|
|
});
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
toast.add({ severity: 'error', summary: '加载失败', detail: '无法获取内容详情', life: 3000 });
|
|
}
|
|
};
|
|
|
|
const genres = ['京剧', '昆曲', '越剧', '黄梅戏', '豫剧', '评剧'];
|
|
const keys = ['C大调', 'D大调', 'E大调', 'F大调', 'G大调', 'A大调', 'B大调', '降E大调'];
|
|
|
|
const triggerUpload = (type) => {
|
|
currentUploadType.value = type;
|
|
fileInput.value.click();
|
|
};
|
|
|
|
const handleFileChange = async (event) => {
|
|
const files = event.target.files;
|
|
if (!files.length) return;
|
|
|
|
isUploading.value = true;
|
|
toast.add({ severity: 'info', summary: '正在上传', detail: '文件上传中...', life: 3000 });
|
|
|
|
try {
|
|
for (let i = 0; i < files.length; i++) {
|
|
const file = files[i];
|
|
// Determine backend type: 'image', 'video', 'audio'
|
|
let type = 'image';
|
|
if (currentUploadType.value === 'video') type = 'video';
|
|
if (currentUploadType.value === 'audio') type = 'audio';
|
|
if (currentUploadType.value === 'cover') type = 'image';
|
|
|
|
const res = await commonApi.upload(file, type);
|
|
// res: { id, url, ... }
|
|
|
|
if (currentUploadType.value === 'cover') {
|
|
if (form.covers.length < 3) form.covers.push({ url: res.url, id: res.id });
|
|
} else if (currentUploadType.value === 'video') {
|
|
form.videos.push({ name: file.name, size: (file.size/1024/1024).toFixed(2)+'MB', url: res.url, id: res.id });
|
|
} else if (currentUploadType.value === 'audio') {
|
|
form.audios.push({ name: file.name, size: (file.size/1024/1024).toFixed(2)+'MB', url: res.url, id: res.id });
|
|
} else if (currentUploadType.value === 'image') {
|
|
form.images.push({ name: file.name, size: (file.size/1024/1024).toFixed(2)+'MB', url: res.url, id: res.id });
|
|
}
|
|
}
|
|
toast.add({ severity: 'success', summary: '上传成功', life: 2000 });
|
|
} catch (e) {
|
|
console.error(e);
|
|
toast.add({ severity: 'error', summary: '上传失败', detail: e.message, life: 3000 });
|
|
} finally {
|
|
isUploading.value = false;
|
|
event.target.value = '';
|
|
}
|
|
};
|
|
|
|
const removeCover = (idx) => form.covers.splice(idx, 1);
|
|
const removeMedia = (type, idx) => form[type].splice(idx, 1);
|
|
|
|
const submit = async () => {
|
|
if (!form.title || !form.genre) {
|
|
toast.add({ severity: 'warn', summary: '信息不完整', detail: '请填写标题和曲种', life: 3000 });
|
|
return;
|
|
}
|
|
|
|
isSubmitting.value = true;
|
|
try {
|
|
// 1. Construct Payload
|
|
const payload = {
|
|
title: form.title,
|
|
description: form.abstract,
|
|
genre: form.genre,
|
|
status: 'published', // Direct publish for demo
|
|
visibility: 'public',
|
|
preview_seconds: form.enableTrial ? form.trialTime : 0,
|
|
price: form.priceType === 'paid' ? parseFloat(form.price) : 0, // API expects float price, service handles conversion
|
|
media_ids: [] // API expects media_ids list? Wait, update DTO `ContentUpdateForm` expects `media_ids` string array?
|
|
// Check `ContentCreateForm` and `ContentUpdateForm`.
|
|
// `ContentCreateForm`: `MediaIDs []string`.
|
|
// Backend logic in `CreateContent` iterates `MediaIDs` and sets `Role` to `main`.
|
|
// It does NOT handle Covers explicitly in `CreateContent` logic I read!
|
|
// `CreateContent` logic: `assets = append(assets, ... Role: Main)`.
|
|
// So Covers are ignored or treated as Main?
|
|
// Wait, `UpdateContent` also iterates `MediaIDs` and sets `Role` to `Main`.
|
|
// So current backend implementation treats ALL sent IDs as Main assets.
|
|
// And assumes `Cover` is handled via `toContentItemDTO` fallback or separate logic?
|
|
// Backend logic for `CreateContent`:
|
|
// `assets = append(assets, ... Role: Main)`.
|
|
// This is a limitation. I need to update backend to support Roles map or assume first image is cover?
|
|
// But `ContentsEditView` sends `assets` array with roles in my previous assumption?
|
|
// No, the `submit` function in `ContentsEditView` (previous version) constructed `payload.assets`.
|
|
// But `creatorApi.createContent` sends `ContentCreateForm` which has `media_ids []string`.
|
|
// `ContentCreateForm` does NOT have `assets` structure!
|
|
// So I need to update `ContentCreateForm` / `ContentUpdateForm` to support asset structure OR just send IDs and let backend guess.
|
|
// Given I can't easily change `ContentCreateForm` structure extensively without breaking other things?
|
|
// Actually, I just read `ContentCreateForm` has `MediaIDs []string`.
|
|
// If I want to support covers, I need to update Backend DTO and Service.
|
|
// Or I can send all IDs in `MediaIDs` and Backend sets them as `Main`.
|
|
// This means Covers won't be distinguished.
|
|
// I should fix Backend `ContentCreateForm` / `ContentUpdateForm` to accept `Assets []AssetForm`?
|
|
// Or just `CoverIDs` and `MediaIDs`.
|
|
};
|
|
|
|
// Let's check `backend/app/http/v1/dto/creator.go` again.
|
|
// `ContentCreateForm` struct: `MediaIDs []string`.
|
|
// `ContentUpdateForm` struct: `MediaIDs []string`.
|
|
|
|
// I will assume for now I pass ALL IDs. Backend sets Role=Main.
|
|
// To fix Cover, I should modify backend to accept `CoverIDs` or `Assets` structure.
|
|
// But for this task "Fix 404", I'll stick to passing IDs.
|
|
// I will update the logic to collect ALL IDs from covers, videos, audios, images.
|
|
|
|
const allMedia = [...form.covers, ...form.videos, ...form.audios, ...form.images];
|
|
payload.media_ids = allMedia.map(m => m.id);
|
|
|
|
if (isEditMode.value) {
|
|
await creatorApi.updateContent(contentId.value, payload);
|
|
toast.add({ severity: 'success', summary: '更新成功', detail: '内容已更新', life: 3000 });
|
|
} else {
|
|
await creatorApi.createContent(payload);
|
|
toast.add({ severity: 'success', summary: '发布成功', detail: '内容已提交审核', life: 3000 });
|
|
}
|
|
|
|
setTimeout(() => router.push('/creator/contents'), 1500);
|
|
} catch (e) {
|
|
toast.add({ severity: 'error', summary: '提交失败', detail: e.message, life: 3000 });
|
|
} finally {
|
|
isSubmitting.value = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
@reference "../../assets/main.css";
|
|
|
|
:deep(.p-select) {
|
|
@apply border-slate-200 rounded-lg shadow-none;
|
|
}
|
|
|
|
:deep(.p-select:not(.p-disabled).p-focus) {
|
|
@apply border-primary-500 ring-2 ring-primary-100 shadow-none;
|
|
}
|
|
</style> |