mirror of
https://github.com/amtoaer/bili-sync.git
synced 2026-06-03 06:40:34 +08:00
82 lines
2.7 KiB
Svelte
82 lines
2.7 KiB
Svelte
<!-- 可复用的状态任务卡片组件 -->
|
|
<script lang="ts">
|
|
import { Button } from '$lib/components/ui/button/index.js';
|
|
|
|
export let taskName: string;
|
|
export let currentStatus: number;
|
|
export let originalStatus: number;
|
|
export let onStatusChange: (newStatus: number) => void;
|
|
export let onReset: () => void;
|
|
export let disabled: boolean = false;
|
|
|
|
// 获取状态显示信息
|
|
function getStatusInfo(value: number) {
|
|
if (value === 7)
|
|
return { label: '已完成', class: 'text-emerald-600', dotClass: 'bg-emerald-600' };
|
|
if (value >= 1 && value <= 4)
|
|
return { label: `失败${value}次`, class: 'text-rose-600', dotClass: 'bg-rose-600' };
|
|
return { label: '未开始', class: 'text-yellow-600', dotClass: 'bg-yellow-600' };
|
|
}
|
|
|
|
$: statusInfo = getStatusInfo(currentStatus);
|
|
$: isModified = currentStatus !== originalStatus;
|
|
</script>
|
|
|
|
<div
|
|
class="bg-background hover:bg-muted/30 flex items-center justify-between rounded-md border p-3 transition-colors {isModified
|
|
? 'border-blue-200 ring-2 ring-blue-500/20'
|
|
: ''}"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-sm font-medium">{taskName}</span>
|
|
{#if isModified}
|
|
<span class="hidden text-xs font-medium text-blue-600 sm:inline">已修改</span>
|
|
<div class="h-2 w-2 rounded-full bg-blue-500 sm:hidden" title="已修改"></div>
|
|
{/if}
|
|
</div>
|
|
<div class="mt-0.5 flex items-center gap-1.5">
|
|
<div class="h-1.5 w-1.5 rounded-full {statusInfo.dotClass}"></div>
|
|
<span class="text-xs {statusInfo.class}">{statusInfo.label}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-1.5">
|
|
{#if isModified}
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onclick={onReset}
|
|
{disabled}
|
|
class="h-7 min-w-[60px] cursor-pointer px-3 text-xs text-gray-600 hover:bg-gray-100"
|
|
title="恢复到原始状态"
|
|
>
|
|
重置
|
|
</Button>
|
|
{/if}
|
|
<Button
|
|
variant={currentStatus === 0 ? 'default' : 'outline'}
|
|
size="sm"
|
|
onclick={() => onStatusChange(0)}
|
|
{disabled}
|
|
class="h-7 min-w-[60px] cursor-pointer px-3 text-xs {currentStatus === 0
|
|
? 'border-yellow-600 bg-yellow-600 font-medium text-white hover:bg-yellow-700'
|
|
: 'hover:border-yellow-400 hover:bg-yellow-50 hover:text-yellow-700'}"
|
|
>
|
|
未开始
|
|
</Button>
|
|
<Button
|
|
variant={currentStatus === 7 ? 'default' : 'outline'}
|
|
size="sm"
|
|
onclick={() => onStatusChange(7)}
|
|
{disabled}
|
|
class="h-7 min-w-[60px] cursor-pointer px-3 text-xs {currentStatus === 7
|
|
? 'border-emerald-600 bg-emerald-600 font-medium text-white hover:bg-emerald-700'
|
|
: 'hover:border-emerald-400 hover:bg-emerald-50 hover:text-emerald-700'}"
|
|
>
|
|
已完成
|
|
</Button>
|
|
</div>
|
|
</div>
|