初次提交
This commit is contained in:
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<Transition name="fade">
|
||||
<div
|
||||
v-if="show"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
<Transition name="scale">
|
||||
<div
|
||||
v-if="show"
|
||||
class="bg-zinc-900 border border-zinc-800 rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden flex flex-col"
|
||||
@click.stop
|
||||
>
|
||||
<div class="flex items-center justify-between p-4 border-b border-zinc-800">
|
||||
<h3 class="text-sm font-black text-zinc-100 uppercase tracking-widest">生成歌单卡片</h3>
|
||||
<button
|
||||
class="text-zinc-500 hover:text-zinc-300 transition-colors"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="p-6 flex flex-col items-center gap-4">
|
||||
<!-- 标题输入 -->
|
||||
<div class="w-full space-y-2">
|
||||
<label class="text-[11px] font-black uppercase text-zinc-600 tracking-wider">歌单标题</label>
|
||||
<input
|
||||
v-model="cardTitle"
|
||||
type="text"
|
||||
placeholder="例如: 2026-03-21 校园午间广播"
|
||||
class="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm text-zinc-300 focus:outline-none focus:border-blue-500/50 transition-colors"
|
||||
@input="drawCanvas"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Canvas 预览 -->
|
||||
<div class="relative w-full aspect-[2/3] max-w-[280px] bg-zinc-950 rounded-xl overflow-hidden border border-zinc-800 shadow-inner flex items-center justify-center">
|
||||
<canvas ref="canvasRef" width="400" :height="canvasHeight" class="w-full h-full object-contain bg-white"></canvas>
|
||||
</div>
|
||||
|
||||
<p class="text-[10px] text-zinc-500 text-center">宽度 400 像素，高度自适应，适合在手机端查看和分享</p>
|
||||
</div>
|
||||
|
||||
<div class="p-4 border-t border-zinc-800 bg-zinc-900/50 flex gap-3">
|
||||
<button
|
||||
class="flex-1 py-2.5 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-xs font-bold rounded-xl transition-colors uppercase tracking-wider"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
class="flex-1 py-2.5 bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold rounded-xl shadow-lg shadow-blue-900/20 transition-colors uppercase tracking-wider"
|
||||
@click="downloadCard"
|
||||
>
|
||||
下载图片
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch, nextTick, computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
show: Boolean,
|
||||
songs: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
defaultTitle: {
|
||||
type: String,
|
||||
default: '校园广播歌单'
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const canvasRef = ref(null)
|
||||
const cardTitle = ref(props.defaultTitle)
|
||||
|
||||
const aiPrompt = ref('anime style school campus sunset beautiful sky highly detailed')
|
||||
const isGeneratingAi = ref(false)
|
||||
const bgImageObj = ref(null)
|
||||
|
||||
const maxDisplaySongs = 35
|
||||
|
||||
const canvasHeight = computed(() => {
|
||||
const count = Math.min(props.songs.length, maxDisplaySongs)
|
||||
if (count <= 10) return 600
|
||||
// 每多一首增加 40px 高度
|
||||
return 600 + (count - 10) * 40
|
||||
})
|
||||
|
||||
|
||||
|
||||
const drawCanvas = () => {
|
||||
if (!canvasRef.value) return
|
||||
const canvas = canvasRef.value
|
||||
const ctx = canvas.getContext('2d')
|
||||
if (!ctx) return
|
||||
|
||||
const height = canvasHeight.value
|
||||
|
||||
// 清空画布
|
||||
if (bgImageObj.value) {
|
||||
ctx.drawImage(bgImageObj.value, 0, 0, 400, height)
|
||||
// 增加一层半透明黑色遮罩，确保文字和列表框可见
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.15)'
|
||||
ctx.fillRect(0, 0, 400, height)
|
||||
} else {
|
||||
ctx.fillStyle = '#F8FAFC' // Background color
|
||||
ctx.fillRect(0, 0, 400, height)
|
||||
}
|
||||
|
||||
// 绘制渐变头部
|
||||
const gradient = ctx.createLinearGradient(0, 0, 400, 0)
|
||||
if (bgImageObj.value) {
|
||||
gradient.addColorStop(0, 'rgba(0, 0, 0, 0.7)')
|
||||
gradient.addColorStop(1, 'rgba(0, 0, 0, 0.4)')
|
||||
} else {
|
||||
gradient.addColorStop(0, '#2563eb') // Primary Blue
|
||||
gradient.addColorStop(1, '#3b82f6')
|
||||
}
|
||||
ctx.fillStyle = gradient
|
||||
ctx.fillRect(0, 0, 400, 100)
|
||||
|
||||
// 绘制标题
|
||||
ctx.fillStyle = '#FFFFFF'
|
||||
ctx.font = 'bold 24px "Inter", "system-ui", sans-serif'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.fillText(cardTitle.value || '校园广播歌单', 200, 50)
|
||||
|
||||
// 绘制副标题(日期)
|
||||
ctx.font = '14px "Inter", "system-ui", sans-serif'
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'
|
||||
ctx.fillText(new Date().toLocaleDateString('zh-CN'), 200, 80)
|
||||
|
||||
// 绘制列表背景
|
||||
if (bgImageObj.value) {
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, 0.85)' // 半透明白色背景
|
||||
} else {
|
||||
ctx.fillStyle = '#FFFFFF'
|
||||
}
|
||||
ctx.shadowColor = 'rgba(0,0,0,0.05)'
|
||||
ctx.shadowBlur = 10
|
||||
ctx.shadowOffsetY = 4
|
||||
ctx.beginPath()
|
||||
ctx.roundRect(20, 120, 360, height - 180, 12)
|
||||
ctx.fill()
|
||||
ctx.shadowColor = 'transparent'
|
||||
|
||||
// 绘制歌曲列表
|
||||
ctx.textAlign = 'left'
|
||||
let y = 160
|
||||
|
||||
const displaySongs = props.songs.slice(0, maxDisplaySongs) // 最多显示 35 首
|
||||
displaySongs.forEach((schedule, index) => {
|
||||
const song = schedule.song || schedule
|
||||
|
||||
// 序号
|
||||
ctx.fillStyle = '#2563eb'
|
||||
ctx.font = 'bold 16px "Inter", "system-ui", sans-serif'
|
||||
ctx.fillText(`${index + 1}.`, 40, y)
|
||||
|
||||
// 歌名
|
||||
ctx.fillStyle = '#0F172A' // Neutral Dark
|
||||
ctx.font = 'bold 16px "Inter", "system-ui", sans-serif'
|
||||
// 限制歌名长度
|
||||
let title = song.title || '未知歌曲'
|
||||
if (title.length > 12) title = title.substring(0, 12) + '...'
|
||||
ctx.fillText(title, 70, y)
|
||||
|
||||
// 歌手
|
||||
ctx.fillStyle = '#64748B'
|
||||
ctx.font = '14px "Inter", "system-ui", sans-serif'
|
||||
let artist = song.artist || '未知歌手'
|
||||
if (artist.length > 10) artist = artist.substring(0, 10) + '...'
|
||||
ctx.fillText(`- ${artist}`, 240, y)
|
||||
|
||||
y += 40
|
||||
})
|
||||
|
||||
if (props.songs.length > maxDisplaySongs) {
|
||||
ctx.fillStyle = '#94A3B8'
|
||||
ctx.font = '14px "Inter", "system-ui", sans-serif'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.fillText(`...及其他 ${props.songs.length - maxDisplaySongs} 首歌曲`, 200, y + 10)
|
||||
}
|
||||
|
||||
// 绘制底部水印
|
||||
if (bgImageObj.value) {
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, 0.6)'
|
||||
} else {
|
||||
ctx.fillStyle = '#CBD5E1'
|
||||
}
|
||||
ctx.font = '12px "Inter", "system-ui", sans-serif'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.fillText('Generated by VoiceHub', 200, height - 20)
|
||||
}
|
||||
|
||||
const downloadCard = () => {
|
||||
if (!canvasRef.value) return
|
||||
const dataUrl = canvasRef.value.toDataURL('image/png')
|
||||
const link = document.createElement('a')
|
||||
link.download = `歌单卡片_${new Date().toISOString().split('T')[0]}.png`
|
||||
link.href = dataUrl
|
||||
link.click()
|
||||
|
||||
if (window.$showNotification) {
|
||||
window.$showNotification('图片导出成功', 'success')
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => props.show, (newVal) => {
|
||||
if (newVal) {
|
||||
cardTitle.value = props.defaultTitle
|
||||
nextTick(() => {
|
||||
drawCanvas()
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.scale-enter-active,
|
||||
.scale-leave-active {
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
}
|
||||
.scale-enter-from,
|
||||
.scale-leave-to {
|
||||
transform: scale(0.95);
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user