652 lines
25 KiB
TypeScript
652 lines
25 KiB
TypeScript
"use client"
|
||
|
||
import { useState, useEffect, useRef } from "react"
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||
import { DashboardShell } from "@/components/dashboard-shell"
|
||
import { DashboardHeader } from "@/components/dashboard-header"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { ArrowLeft, Edit, AlertTriangle, FileText, Play, Pause, Volume2, VolumeX, Music, Download, Factory } from "lucide-react"
|
||
import Link from "next/link"
|
||
import { AddPrintBatchDialog } from "@/components/songs/add-print-batch-dialog"
|
||
import { ExportCardsDialog } from "@/components/songs/export-cards-dialog"
|
||
import { ExportBatchDialog } from "@/components/songs/export-batch-dialog"
|
||
import { useToast } from "@/components/ui/use-toast"
|
||
import { getSong, getSongBatches, markBatchAsProduced, SongBatch } from "@/lib/api/songs"
|
||
import { Song } from "@/lib/api/types"
|
||
import { Skeleton } from "@/components/ui/skeleton"
|
||
import { Slider } from "@/components/ui/slider"
|
||
import { useParams } from "next/navigation"
|
||
import { format } from "date-fns"
|
||
|
||
export default function SongDetailPage() {
|
||
const params = useParams()
|
||
const songId = params.id as string
|
||
const { toast } = useToast()
|
||
const [song, setSong] = useState<Song | null>(null)
|
||
const [batches, setBatches] = useState<SongBatch[]>([])
|
||
const [isLoading, setIsLoading] = useState(true)
|
||
const [isBatchesLoading, setIsBatchesLoading] = useState(true)
|
||
const [error, setError] = useState<string | null>(null)
|
||
const [isPlaying, setIsPlaying] = useState(false)
|
||
const [isAudioLoading, setIsAudioLoading] = useState(false)
|
||
const [volume, setVolume] = useState(80)
|
||
const [isMuted, setIsMuted] = useState(false)
|
||
|
||
const audioRef = useRef<HTMLAudioElement | null>(null)
|
||
|
||
// 加载歌曲数据
|
||
useEffect(() => {
|
||
const fetchSong = async () => {
|
||
if (!songId) return
|
||
|
||
setIsLoading(true)
|
||
try {
|
||
const songData = await getSong(songId)
|
||
setSong(songData)
|
||
setError(null)
|
||
} catch (error) {
|
||
console.error("获取歌曲失败:", error)
|
||
setError(error instanceof Error ? error.message : "未知错误")
|
||
toast({
|
||
title: "获取歌曲失败",
|
||
description: error instanceof Error ? error.message : "无法加载歌曲数据，请稍后重试",
|
||
variant: "destructive",
|
||
})
|
||
} finally {
|
||
setIsLoading(false)
|
||
}
|
||
}
|
||
|
||
fetchSong()
|
||
}, [songId, toast])
|
||
|
||
// 加载批次数据
|
||
useEffect(() => {
|
||
const fetchBatches = async () => {
|
||
if (!songId) return
|
||
|
||
setIsBatchesLoading(true)
|
||
try {
|
||
const batchData = await getSongBatches(songId)
|
||
setBatches(batchData)
|
||
} catch (error) {
|
||
console.error("获取批次数据失败:", error)
|
||
toast({
|
||
title: "获取批次数据失败",
|
||
description: error instanceof Error ? error.message : "无法加载批次数据，请稍后重试",
|
||
variant: "destructive",
|
||
})
|
||
} finally {
|
||
setIsBatchesLoading(false)
|
||
}
|
||
}
|
||
|
||
fetchBatches()
|
||
}, [songId, toast])
|
||
|
||
// 刷新批次数据的函数
|
||
const refreshBatches = async () => {
|
||
if (!songId) return
|
||
|
||
setIsBatchesLoading(true)
|
||
try {
|
||
const batchData = await getSongBatches(songId)
|
||
setBatches(batchData)
|
||
} catch (error) {
|
||
console.error("刷新批次数据失败:", error)
|
||
} finally {
|
||
setIsBatchesLoading(false)
|
||
}
|
||
}
|
||
|
||
// 初始化音频播放器 - 现在只创建但不自动播放
|
||
useEffect(() => {
|
||
if (song?.audioUrl && !audioRef.current) {
|
||
audioRef.current = new Audio(song.audioUrl)
|
||
|
||
const audio = audioRef.current
|
||
|
||
// 音频加载完成时 - 不再自动播放
|
||
audio.addEventListener('canplay', () => {
|
||
setIsAudioLoading(false)
|
||
})
|
||
|
||
// 音频播放结束时
|
||
audio.addEventListener('ended', () => {
|
||
setIsPlaying(false)
|
||
})
|
||
|
||
// 音频播放错误时
|
||
audio.addEventListener('error', () => {
|
||
setIsAudioLoading(false)
|
||
setIsPlaying(false)
|
||
toast({
|
||
title: "播放错误",
|
||
description: "无法播放该音频文件",
|
||
variant: "destructive",
|
||
})
|
||
})
|
||
|
||
// 设置音量
|
||
audio.volume = volume / 100
|
||
audio.muted = isMuted
|
||
}
|
||
|
||
return () => {
|
||
if (audioRef.current) {
|
||
const audio = audioRef.current
|
||
audio.pause()
|
||
audio.src = ''
|
||
|
||
audio.removeEventListener('canplay', () => {})
|
||
audio.removeEventListener('ended', () => {})
|
||
audio.removeEventListener('error', () => {})
|
||
audioRef.current = null
|
||
}
|
||
}
|
||
}, [song?.audioUrl, toast, volume, isMuted])
|
||
|
||
// 监听音量变化
|
||
useEffect(() => {
|
||
if (audioRef.current) {
|
||
audioRef.current.volume = volume / 100
|
||
}
|
||
}, [volume])
|
||
|
||
// 监听静音状态
|
||
useEffect(() => {
|
||
if (audioRef.current) {
|
||
audioRef.current.muted = isMuted
|
||
}
|
||
}, [isMuted])
|
||
|
||
// 处理播放/暂停
|
||
const togglePlay = () => {
|
||
if (!song?.audioUrl) {
|
||
toast({
|
||
title: "无法播放",
|
||
description: "该歌曲没有可播放的音频文件",
|
||
variant: "destructive",
|
||
})
|
||
return
|
||
}
|
||
|
||
if (isPlaying) {
|
||
audioRef.current?.pause()
|
||
setIsPlaying(false)
|
||
} else {
|
||
setIsAudioLoading(true)
|
||
|
||
if (audioRef.current) {
|
||
audioRef.current.play()
|
||
.then(() => {
|
||
setIsPlaying(true)
|
||
setIsAudioLoading(false)
|
||
})
|
||
.catch((error) => {
|
||
console.error('播放失败:', error)
|
||
setIsAudioLoading(false)
|
||
toast({
|
||
title: "播放失败",
|
||
description: "无法播放音频，请稍后重试",
|
||
variant: "destructive",
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
// 切换静音状态
|
||
const toggleMute = () => {
|
||
setIsMuted(!isMuted)
|
||
}
|
||
|
||
// 处理音量变化
|
||
const handleVolumeChange = (values: number[]) => {
|
||
const newVolume = values[0]
|
||
setVolume(newVolume)
|
||
|
||
// 如果音量从0调高，则取消静音
|
||
if (newVolume > 0 && isMuted) {
|
||
setIsMuted(false)
|
||
}
|
||
// 如果音量调到0，则设置为静音
|
||
else if (newVolume === 0 && !isMuted) {
|
||
setIsMuted(true)
|
||
}
|
||
}
|
||
|
||
// 标记批次为已生产
|
||
const handleMarkAsProduced = async (batchId: number) => {
|
||
try {
|
||
setIsBatchesLoading(true);
|
||
await markBatchAsProduced(batchId);
|
||
toast({
|
||
title: "操作成功",
|
||
description: "批次已成功标记为已生产",
|
||
});
|
||
await refreshBatches();
|
||
} catch (error) {
|
||
console.error("标记批次为已生产失败:", error);
|
||
toast({
|
||
title: "操作失败",
|
||
description: error instanceof Error ? error.message : "无法标记批次为已生产，请稍后重试",
|
||
variant: "destructive",
|
||
});
|
||
} finally {
|
||
setIsBatchesLoading(false);
|
||
}
|
||
};
|
||
|
||
if (error) {
|
||
return (
|
||
<DashboardShell>
|
||
<div className="flex flex-col items-center justify-center h-[60vh]">
|
||
<AlertTriangle className="h-16 w-16 text-red-500 mb-4" />
|
||
<h1 className="text-2xl font-bold mb-2">歌曲不存在</h1>
|
||
<p className="text-gray-500 mb-6">找不到ID为 {songId} 的歌曲</p>
|
||
<Button asChild>
|
||
<Link href="/songs">
|
||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||
返回歌曲列表
|
||
</Link>
|
||
</Button>
|
||
</div>
|
||
</DashboardShell>
|
||
)
|
||
}
|
||
|
||
if (isLoading || !song) {
|
||
return (
|
||
<DashboardShell>
|
||
<div className="flex items-center mb-6">
|
||
<Button variant="ghost" size="sm" className="mr-4" asChild>
|
||
<Link href="/songs">
|
||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||
返回列表
|
||
</Link>
|
||
</Button>
|
||
<div className="w-full">
|
||
<Skeleton className="h-10 w-64 mb-2" />
|
||
<Skeleton className="h-5 w-32" />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid gap-6 md:grid-cols-3">
|
||
<Skeleton className="h-[400px]" />
|
||
<Skeleton className="h-[400px] md:col-span-2" />
|
||
</div>
|
||
</DashboardShell>
|
||
)
|
||
}
|
||
|
||
const isPublished = song.status === "已发布";
|
||
|
||
return (
|
||
<DashboardShell>
|
||
<div className="absolute top-0 right-0 w-1/2 h-48 bg-gradient-to-bl from-pink-200 via-purple-200 to-transparent opacity-20 rounded-bl-full" />
|
||
|
||
<div className="flex items-center mb-6">
|
||
<Button variant="ghost" size="sm" className="mr-4" asChild>
|
||
<Link href="/songs">
|
||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||
返回列表
|
||
</Link>
|
||
</Button>
|
||
<DashboardHeader heading={song.name} text={`歌曲ID: ${song.id}`}>
|
||
<div className="flex space-x-2 ml-auto">
|
||
{song.audioUrl && (
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
className={`${
|
||
isPlaying
|
||
? "bg-pink-100 text-pink-700 hover:bg-pink-200"
|
||
: "hover:bg-pink-50 hover:text-pink-700"
|
||
}`}
|
||
onClick={togglePlay}
|
||
disabled={isAudioLoading}
|
||
>
|
||
{isAudioLoading ? (
|
||
<>
|
||
<div className="h-4 w-4 mr-2 animate-spin rounded-full border-2 border-current border-t-transparent" />
|
||
加载中...
|
||
</>
|
||
) : isPlaying ? (
|
||
<>
|
||
<Pause className="h-4 w-4 mr-2" />
|
||
暂停播放
|
||
</>
|
||
) : (
|
||
<>
|
||
<Play className="h-4 w-4 mr-2" />
|
||
播放歌曲
|
||
</>
|
||
)}
|
||
</Button>
|
||
)}
|
||
|
||
{!isPublished && (
|
||
<Button
|
||
asChild
|
||
className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 transition-all duration-300 shadow-md hover:shadow-lg"
|
||
>
|
||
<Link href={`/songs/edit/${songId}`}>
|
||
<Edit className="mr-2 h-4 w-4" />
|
||
编辑歌曲
|
||
</Link>
|
||
</Button>
|
||
)}
|
||
<ExportCardsDialog songId={song.id} />
|
||
</div>
|
||
</DashboardHeader>
|
||
</div>
|
||
|
||
{/* 音频控制器 - 仅当歌曲有音频URL且正在播放时显示 */}
|
||
{song.audioUrl && isPlaying && (
|
||
<div className="mb-4">
|
||
<div className="bg-pink-50 p-3 rounded-lg border border-pink-100 flex items-center">
|
||
<div className="flex-shrink-0 mr-3">
|
||
<Music className="h-5 w-5 text-pink-500" />
|
||
</div>
|
||
<div className="flex-grow">
|
||
<div className="flex items-center space-x-4">
|
||
<div className="flex-grow">
|
||
<p className="text-sm font-medium text-pink-700 truncate">
|
||
正在播放: {song.name}
|
||
</p>
|
||
<p className="text-xs text-pink-500 truncate">
|
||
{song.composer}
|
||
</p>
|
||
</div>
|
||
<div className="flex items-center space-x-3">
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="h-8 w-8 rounded-full hover:bg-pink-100"
|
||
onClick={toggleMute}
|
||
>
|
||
{isMuted ? <VolumeX className="h-4 w-4 text-pink-500" /> : <Volume2 className="h-4 w-4 text-pink-500" />}
|
||
</Button>
|
||
<div className="w-32">
|
||
<Slider
|
||
value={[volume]}
|
||
min={0}
|
||
max={100}
|
||
step={1}
|
||
onValueChange={handleVolumeChange}
|
||
className="h-1"
|
||
/>
|
||
</div>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="h-8 w-8 rounded-full bg-pink-200 hover:bg-pink-300 text-pink-700"
|
||
onClick={togglePlay}
|
||
>
|
||
<Pause className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<Tabs defaultValue="details" className="space-y-4">
|
||
<TabsList>
|
||
<TabsTrigger value="details">歌曲详情</TabsTrigger>
|
||
<TabsTrigger value="batches">批次管理</TabsTrigger>
|
||
<TabsTrigger value="analytics">数据分析</TabsTrigger>
|
||
</TabsList>
|
||
|
||
<TabsContent value="details" className="space-y-4">
|
||
<div className="grid gap-6 md:grid-cols-3">
|
||
<Card className="md:col-span-1 border-none shadow-lg bg-white">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg font-bold">歌曲预览</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="flex justify-center">
|
||
<div className="relative w-full aspect-square max-w-[300px] rounded-lg overflow-hidden bg-gray-100 flex items-center justify-center group">
|
||
<img src={song.image || "/placeholder.svg"} alt={song.name} className="object-cover" />
|
||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
|
||
<div className="flex flex-wrap gap-2">
|
||
<Badge className={`${isPublished ? "bg-green-500" : "bg-gray-500"}`}>{song.status}</Badge>
|
||
{song.rarity && <Badge className="bg-purple-500">{song.rarity}</Badge>}
|
||
{song.cardType && <Badge className="bg-blue-500">{song.cardType}</Badge>}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="md:col-span-2 border-none shadow-lg bg-gradient-to-br from-white to-purple-50">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg font-bold">歌曲详情</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-1">
|
||
<p className="text-sm font-medium text-gray-500">作曲</p>
|
||
<p className="font-medium">{song.composer}</p>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<p className="text-sm font-medium text-gray-500">作词</p>
|
||
<p className="font-medium">{song.lyricist}</p>
|
||
</div>
|
||
{song.arrangement && (
|
||
<div className="space-y-1">
|
||
<p className="text-sm font-medium text-gray-500">编曲</p>
|
||
<p className="font-medium">{song.arrangement}</p>
|
||
</div>
|
||
)}
|
||
<div className="space-y-1">
|
||
<p className="text-sm font-medium text-gray-500">时长</p>
|
||
<p className="font-medium">{song.duration}</p>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<p className="text-sm font-medium text-gray-500">发布日期</p>
|
||
<p className="font-medium">{song.releaseDate || "尚未发布"}</p>
|
||
</div>
|
||
{song.genre && (
|
||
<div className="space-y-1">
|
||
<p className="text-sm font-medium text-gray-500">风格</p>
|
||
<p className="font-medium">{song.genre}</p>
|
||
</div>
|
||
)}
|
||
{song.bpm && (
|
||
<div className="space-y-1">
|
||
<p className="text-sm font-medium text-gray-500">BPM</p>
|
||
<p className="font-medium">{song.bpm}</p>
|
||
</div>
|
||
)}
|
||
{song.price && (
|
||
<div className="space-y-1">
|
||
<p className="text-sm font-medium text-gray-500">价格</p>
|
||
<p className="font-medium">¥{song.price}</p>
|
||
</div>
|
||
)}
|
||
<div className="space-y-1">
|
||
<p className="text-sm font-medium text-gray-500">激活数量</p>
|
||
<p className="font-medium">{song.cardsCount || 0}</p>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<p className="text-sm font-medium text-gray-500">印刷批次</p>
|
||
<p className="font-medium">{song.batchesCount || 0}</p>
|
||
</div>
|
||
</div>
|
||
|
||
{song.description && (
|
||
<div className="mt-4">
|
||
<p className="text-sm font-medium text-gray-500 mb-1">描述</p>
|
||
<p className="text-sm">{song.description}</p>
|
||
</div>
|
||
)}
|
||
|
||
{song.lyrics && (
|
||
<div className="mt-4">
|
||
<p className="text-sm font-medium text-gray-500 mb-1">歌词</p>
|
||
<div className="text-sm max-h-40 overflow-y-auto p-3 bg-gray-50 rounded">
|
||
<pre className="whitespace-pre-wrap font-sans">{song.lyrics}</pre>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{isPublished && (
|
||
<div className="mt-6 p-3 bg-amber-50 border border-amber-200 rounded-lg flex items-start">
|
||
<AlertTriangle className="h-5 w-5 text-amber-500 mr-2 flex-shrink-0 mt-0.5" />
|
||
<p className="text-sm text-amber-700">该歌曲已发布，基本属性不可修改。您仍可以增加印刷数量。</p>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="batches" className="space-y-4">
|
||
<Card className="border-none shadow-lg bg-gradient-to-br from-white to-blue-50">
|
||
<CardHeader className="flex flex-row items-center justify-between">
|
||
<div>
|
||
<CardTitle className="text-lg font-bold">印刷批次</CardTitle>
|
||
<CardDescription>管理歌曲卡牌的印刷批次和卡牌ID</CardDescription>
|
||
</div>
|
||
<AddPrintBatchDialog songId={song.id} isPublished={isPublished} onBatchCreated={refreshBatches} />
|
||
</CardHeader>
|
||
<CardContent>
|
||
{/* 如果没有批次数据，显示空状态 */}
|
||
{isBatchesLoading ? (
|
||
<div className="space-y-3">
|
||
<div className="flex justify-between mb-4">
|
||
{Array.from({ length: 6 }).map((_, i) => (
|
||
<Skeleton key={i} className="h-4 w-16" />
|
||
))}
|
||
</div>
|
||
{Array.from({ length: 3 }).map((_, i) => (
|
||
<div key={i} className="flex justify-between py-3 border-b">
|
||
{Array.from({ length: 6 }).map((_, j) => (
|
||
<Skeleton key={j} className="h-4 w-16" />
|
||
))}
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : batches.length === 0 ? (
|
||
<div className="text-center py-8">
|
||
<p className="text-gray-500">暂无批次数据</p>
|
||
</div>
|
||
) : (
|
||
<div className="rounded-md border">
|
||
<table className="w-full">
|
||
<thead>
|
||
<tr className="bg-gray-50 border-b">
|
||
<th className="py-3 px-4 text-left text-sm font-medium text-gray-500">批次ID</th>
|
||
<th className="py-3 px-4 text-left text-sm font-medium text-gray-500">创建日期</th>
|
||
<th className="py-3 px-4 text-left text-sm font-medium text-gray-500">数量</th>
|
||
<th className="py-3 px-4 text-left text-sm font-medium text-gray-500">起始ID</th>
|
||
<th className="py-3 px-4 text-left text-sm font-medium text-gray-500">结束ID</th>
|
||
<th className="py-3 px-4 text-left text-sm font-medium text-gray-500">状态</th>
|
||
<th className="py-3 px-4 text-right text-sm font-medium text-gray-500">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{batches.map((batch) => (
|
||
<tr key={batch.id} className="border-b">
|
||
<td className="py-3 px-4 text-left text-sm font-medium text-gray-500">{batch.id}</td>
|
||
<td className="py-3 px-4 text-left text-sm font-medium text-gray-500">{format(new Date(batch.created_at), 'yyyy-MM-dd')}</td>
|
||
<td className="py-3 px-4 text-left text-sm font-medium text-gray-500">{batch.quantity}</td>
|
||
<td className="py-3 px-4 text-left text-sm font-medium text-gray-500">{batch.start_id}</td>
|
||
<td className="py-3 px-4 text-left text-sm font-medium text-gray-500">{batch.end_id}</td>
|
||
<td className="py-3 px-4 text-left text-sm font-medium text-gray-500">
|
||
<Badge className={getBatchStatusColor(batch.status)}>
|
||
{batch.status_display || getBatchStatusText(batch.status)}
|
||
</Badge>
|
||
</td>
|
||
<td className="py-3 px-4 text-right">
|
||
<div className="flex justify-end space-x-2">
|
||
<ExportBatchDialog batchId={batch.id} />
|
||
{batch.status !== 'produced' && batch.status !== 'published' && (
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="h-8 hover:bg-green-50 hover:text-green-600"
|
||
onClick={() => handleMarkAsProduced(batch.id)}
|
||
>
|
||
<Factory className="h-4 w-4 mr-1" />
|
||
生产
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="analytics" className="space-y-4">
|
||
<Card className="border-none shadow-lg bg-gradient-to-br from-white to-green-50">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg font-bold">数据分析</CardTitle>
|
||
<CardDescription>查看歌曲卡牌的激活数据和使用情况</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="grid gap-6 md:grid-cols-2">
|
||
<div className="h-[300px] bg-gray-50 rounded-lg flex items-center justify-center">
|
||
<p className="text-gray-500">激活数据图表</p>
|
||
</div>
|
||
<div className="h-[300px] bg-gray-50 rounded-lg flex items-center justify-center">
|
||
<p className="text-gray-500">地区分布图表</p>
|
||
</div>
|
||
<div className="md:col-span-2 h-[300px] bg-gray-50 rounded-lg flex items-center justify-center">
|
||
<p className="text-gray-500">时间趋势图表</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</TabsContent>
|
||
</Tabs>
|
||
</DashboardShell>
|
||
)
|
||
}
|
||
|
||
// 获取批次状态颜色
|
||
function getBatchStatusColor(status: string): string {
|
||
switch (status) {
|
||
case 'draft':
|
||
return 'bg-gray-500';
|
||
case 'exported':
|
||
return 'bg-blue-500';
|
||
case 'in_production':
|
||
return 'bg-amber-500';
|
||
case 'produced':
|
||
return 'bg-purple-500';
|
||
case 'published':
|
||
return 'bg-green-500';
|
||
default:
|
||
return 'bg-gray-500';
|
||
}
|
||
}
|
||
|
||
// 获取批次状态文本
|
||
function getBatchStatusText(status: string): string {
|
||
switch (status) {
|
||
case 'draft':
|
||
return '草稿';
|
||
case 'exported':
|
||
return '已导出';
|
||
case 'in_production':
|
||
return '生产中';
|
||
case 'produced':
|
||
return '已生产';
|
||
case 'published':
|
||
return '已发布';
|
||
default:
|
||
return status;
|
||
}
|
||
}
|