feat: 迁移自定义功能至 1.5.9.9 版本

包含音乐源限制、CI 防 OOM 优化、数据库连接池优化、管理端权限及 UI 细节定制等功能
2026-09-12 19:26:42 +08:00
parent 34f0679117
commit 1106aeea6c
161 changed files with 18963 additions and 27900 deletions
@@ -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>