243 lines
8.5 KiB
Vue
243 lines
8.5 KiB
Vue
|
<template>
|
|||
|
|
<div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" @click.self="handleClose">
|
|||
|
|
<BaseCard variant="elevated" class="w-full max-w-2xl max-h-[90vh] overflow-y-auto m-4">
|
|||
|
|
<template #header>
|
|||
|
|
<div class="flex items-center justify-between">
|
|||
|
|
<h2 class="text-xl font-semibold text-gray-900">編輯人物：{{ character?.name }}</h2>
|
|||
|
|
<button @click="handleClose" class="text-gray-500 hover:text-gray-700">
|
|||
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<div v-if="character" class="space-y-6">
|
|||
|
|
<!-- 基本資訊 -->
|
|||
|
|
<div>
|
|||
|
|
<h3 class="font-semibold text-gray-900 mb-4">基本資訊</h3>
|
|||
|
|
<div class="space-y-4">
|
|||
|
|
<BaseInput
|
|||
|
|
v-model="editedCharacter.name"
|
|||
|
|
label="角色名稱"
|
|||
|
|
:required="true"
|
|||
|
|
/>
|
|||
|
|
<BaseTextarea
|
|||
|
|
v-model="editedCharacter.description"
|
|||
|
|
label="角色描述"
|
|||
|
|
:rows="3"
|
|||
|
|
/>
|
|||
|
|
<BaseInput
|
|||
|
|
v-model="editedCharacter.role"
|
|||
|
|
label="角色定位"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 外觀設定 -->
|
|||
|
|
<div>
|
|||
|
|
<h3 class="font-semibold text-gray-900 mb-4">外觀設定</h3>
|
|||
|
|
<div class="space-y-4">
|
|||
|
|
<BaseInput
|
|||
|
|
v-model="editedCharacter.clothing"
|
|||
|
|
label="服裝"
|
|||
|
|
placeholder="例如：T恤、牛仔褲"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label class="block mb-2 text-sm font-medium text-gray-700">配件</label>
|
|||
|
|
<div class="flex flex-wrap gap-2 mb-2">
|
|||
|
|
<span
|
|||
|
|
v-for="(accessory, index) in editedCharacter.accessories"
|
|||
|
|
:key="index"
|
|||
|
|
class="inline-flex items-center gap-1 px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm"
|
|||
|
|
>
|
|||
|
|
{{ accessory }}
|
|||
|
|
<button
|
|||
|
|
@click="removeAccessory(index)"
|
|||
|
|
class="text-blue-600 hover:text-blue-800"
|
|||
|
|
>
|
|||
|
|
×
|
|||
|
|
</button>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex gap-2">
|
|||
|
|
<BaseInput
|
|||
|
|
v-model="newAccessory"
|
|||
|
|
placeholder="輸入配件名稱"
|
|||
|
|
class="flex-1"
|
|||
|
|
@keyup.enter="addAccessory"
|
|||
|
|
/>
|
|||
|
|
<BaseButton variant="outline" @click="addAccessory">新增</BaseButton>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 顏色設定 -->
|
|||
|
|
<div>
|
|||
|
|
<h3 class="font-semibold text-gray-900 mb-4">顏色設定</h3>
|
|||
|
|
<div class="grid grid-cols-3 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label class="block mb-2 text-sm font-medium text-gray-700">髮色</label>
|
|||
|
|
<input
|
|||
|
|
v-model="editedCharacter.colors.hair"
|
|||
|
|
type="color"
|
|||
|
|
class="w-full h-10 rounded-lg border border-gray-200"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label class="block mb-2 text-sm font-medium text-gray-700">膚色</label>
|
|||
|
|
<input
|
|||
|
|
v-model="editedCharacter.colors.skin"
|
|||
|
|
type="color"
|
|||
|
|
class="w-full h-10 rounded-lg border border-gray-200"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label class="block mb-2 text-sm font-medium text-gray-700">服裝顏色</label>
|
|||
|
|
<input
|
|||
|
|
v-model="editedCharacter.colors.clothing"
|
|||
|
|
type="color"
|
|||
|
|
class="w-full h-10 rounded-lg border border-gray-200"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 三視圖預覽 -->
|
|||
|
|
<div>
|
|||
|
|
<h3 class="font-semibold text-gray-900 mb-4">三視圖</h3>
|
|||
|
|
<div class="grid grid-cols-3 gap-4">
|
|||
|
|
<div class="text-center">
|
|||
|
|
<div class="aspect-square bg-white border-2 border-gray-200 rounded-lg flex items-center justify-center mb-2">
|
|||
|
|
<span v-if="!editedCharacter.frontView" class="text-gray-400 text-sm">正面</span>
|
|||
|
|
<img v-else :src="editedCharacter.frontView" alt="正面" class="w-full h-full object-contain rounded-lg" />
|
|||
|
|
</div>
|
|||
|
|
<BaseButton variant="outline" @click="generateView('front')" class="text-sm px-3 py-1 w-full">
|
|||
|
|
生成
|
|||
|
|
</BaseButton>
|
|||
|
|
</div>
|
|||
|
|
<div class="text-center">
|
|||
|
|
<div class="aspect-square bg-white border-2 border-gray-200 rounded-lg flex items-center justify-center mb-2">
|
|||
|
|
<span v-if="!editedCharacter.sideView" class="text-gray-400 text-sm">側面</span>
|
|||
|
|
<img v-else :src="editedCharacter.sideView" alt="側面" class="w-full h-full object-contain rounded-lg" />
|
|||
|
|
</div>
|
|||
|
|
<BaseButton variant="outline" @click="generateView('side')" class="text-sm px-3 py-1 w-full">
|
|||
|
|
生成
|
|||
|
|
</BaseButton>
|
|||
|
|
</div>
|
|||
|
|
<div class="text-center">
|
|||
|
|
<div class="aspect-square bg-white border-2 border-gray-200 rounded-lg flex items-center justify-center mb-2">
|
|||
|
|
<span v-if="!editedCharacter.backView" class="text-gray-400 text-sm">背面</span>
|
|||
|
|
<img v-else :src="editedCharacter.backView" alt="背面" class="w-full h-full object-contain rounded-lg" />
|
|||
|
|
</div>
|
|||
|
|
<BaseButton variant="outline" @click="generateView('back')" class="text-sm px-3 py-1 w-full">
|
|||
|
|
生成
|
|||
|
|
</BaseButton>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 操作按鈕 -->
|
|||
|
|
<div class="flex justify-end gap-4 pt-4 border-t border-gray-200">
|
|||
|
|
<BaseButton variant="outline" @click="handleClose">取消</BaseButton>
|
|||
|
|
<BaseButton variant="primary" @click="handleSave">儲存</BaseButton>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</BaseCard>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import type { CharacterAsset } from '~/types/storyboard'
|
|||
|
|
import { useAIImageGeneration } from '~/composables/useAIImageGeneration'
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
isOpen: boolean
|
|||
|
|
character: CharacterAsset | null
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const props = defineProps<Props>()
|
|||
|
|
|
|||
|
|
const emit = defineEmits<{
|
|||
|
|
close: []
|
|||
|
|
save: [character: CharacterAsset]
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
const { generateCharacterView: generateCharacterViewImage, isLoading: isGenerating } = useAIImageGeneration()
|
|||
|
|
|
|||
|
|
const editedCharacter = ref<CharacterAsset | null>(null)
|
|||
|
|
const newAccessory = ref('')
|
|||
|
|
const generatingView = ref<'front' | 'side' | 'back' | null>(null)
|
|||
|
|
|
|||
|
|
watch(() => props.character, (newChar) => {
|
|||
|
|
if (newChar) {
|
|||
|
|
editedCharacter.value = {
|
|||
|
|
...newChar,
|
|||
|
|
accessories: [...(newChar.accessories || [])],
|
|||
|
|
colors: {
|
|||
|
|
hair: newChar.colors?.hair || '#000000',
|
|||
|
|
skin: newChar.colors?.skin || '#FFDBAC',
|
|||
|
|
clothing: newChar.colors?.clothing || '#000000'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, { immediate: true })
|
|||
|
|
|
|||
|
|
function handleClose() {
|
|||
|
|
emit('close')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleSave() {
|
|||
|
|
if (editedCharacter.value) {
|
|||
|
|
emit('save', editedCharacter.value)
|
|||
|
|
handleClose()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function addAccessory() {
|
|||
|
|
if (newAccessory.value.trim() && editedCharacter.value) {
|
|||
|
|
if (!editedCharacter.value.accessories) {
|
|||
|
|
editedCharacter.value.accessories = []
|
|||
|
|
}
|
|||
|
|
editedCharacter.value.accessories.push(newAccessory.value.trim())
|
|||
|
|
newAccessory.value = ''
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function removeAccessory(index: number) {
|
|||
|
|
if (editedCharacter.value?.accessories) {
|
|||
|
|
editedCharacter.value.accessories.splice(index, 1)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function generateView(view: 'front' | 'side' | 'back') {
|
|||
|
|
if (!editedCharacter.value) return
|
|||
|
|
|
|||
|
|
generatingView.value = view
|
|||
|
|
try {
|
|||
|
|
const style = '寫實風格' // 可以從 workflow 中取得
|
|||
|
|
const imageUrl = await generateCharacterViewImage(
|
|||
|
|
editedCharacter.value.name,
|
|||
|
|
editedCharacter.value.description,
|
|||
|
|
view,
|
|||
|
|
style
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
if (view === 'front') {
|
|||
|
|
editedCharacter.value.frontView = imageUrl
|
|||
|
|
} else if (view === 'side') {
|
|||
|
|
editedCharacter.value.sideView = imageUrl
|
|||
|
|
} else if (view === 'back') {
|
|||
|
|
editedCharacter.value.backView = imageUrl
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('生成視圖失敗:', err)
|
|||
|
|
} finally {
|
|||
|
|
generatingView.value = null
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|