fix(studio): 移除来源卡片悬停 tooltip,失败来源显示报错并可删除

- 去掉来源卡片 hover 时弹出的自定义 tooltip div
- status 为 failed 的来源卡片显示红色报错图标与提示,禁用选中,保留删除按钮

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
xuhdandClaude Opus 4.8 committed 2026-06-11 11:30:52 +08:00
1 parent 82d14351fc
commit fa6191b448
1 file changed
+17 -8
@@ -3,6 +3,7 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useParams } from "react-router-dom";
import {
AlertCircle,
AlignLeft,
ArrowLeft,
BookOpen,
@@ -72,14 +73,20 @@ function SourceCard({
}) {
const title = item.title ?? item.document?.title ?? "未命名";
const isProcessing = item.status === "processing";
const isFailed = item.status === "failed";
return (
<div
title={title}
onClick={() => onToggle(item.id)}
className={`group relative flex h-32 w-full cursor-pointer flex-col justify-between rounded-2xl p-4 ring-1 transition-colors ${selected
? "bg-primary/10 ring-primary"
: "bg-muted ring-border/50 hover:bg-muted/70"
title={isFailed ? `${title}(处理失败)` : title}
onClick={() => {
if (isFailed) return;
onToggle(item.id);
}}
className={`group relative flex h-32 w-full flex-col justify-between rounded-2xl p-4 ring-1 transition-colors ${isFailed
? "cursor-default bg-destructive/5 ring-destructive/40"
: selected
? "cursor-pointer bg-primary/10 ring-primary"
: "cursor-pointer bg-muted ring-border/50 hover:bg-muted/70"
}`}
>
{/* 删除按钮 - 右上角始终显示,悬停时高亮 */}
@@ -97,13 +104,15 @@ function SourceCard({
<div className="flex size-10 items-center justify-center rounded-xl bg-background">
{isProcessing ? (
<Loader2 className="size-5 animate-spin text-muted-foreground" />
) : isFailed ? (
<AlertCircle className="size-6 text-destructive" />
) : (
<SourceIcon item={item} />
)}
</div>
<p className="truncate text-xs font-medium text-foreground">{title}</p>
<div className="pointer-events-none absolute top-full left-1/2 z-10 mt-2 hidden w-max max-w-[200px] -translate-x-1/2 rounded-lg bg-popover px-3 py-2 text-xs text-popover-foreground shadow-md ring-1 ring-border group-hover:block">
{title}
<div className="min-w-0">
<p className={`truncate text-xs font-medium ${isFailed ? "text-destructive" : "text-foreground"}`}>{title}</p>
{isFailed && <p className="mt-0.5 text-[10px] text-destructive/80">处理失败,请删除后重试</p>}
</div>
</div>
);