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:
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>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user