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 { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||||
import { useParams } from "react-router-dom";
|
import { useParams } from "react-router-dom";
|
||||||
import {
|
import {
|
||||||
|
AlertCircle,
|
||||||
AlignLeft,
|
AlignLeft,
|
||||||
ArrowLeft,
|
ArrowLeft,
|
||||||
BookOpen,
|
BookOpen,
|
||||||
@@ -72,14 +73,20 @@ function SourceCard({
|
|||||||
}) {
|
}) {
|
||||||
const title = item.title ?? item.document?.title ?? "未命名";
|
const title = item.title ?? item.document?.title ?? "未命名";
|
||||||
const isProcessing = item.status === "processing";
|
const isProcessing = item.status === "processing";
|
||||||
|
const isFailed = item.status === "failed";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
title={title}
|
title={isFailed ? `${title}(处理失败)` : title}
|
||||||
onClick={() => onToggle(item.id)}
|
onClick={() => {
|
||||||
className={`group relative flex h-32 w-full cursor-pointer flex-col justify-between rounded-2xl p-4 ring-1 transition-colors ${selected
|
if (isFailed) return;
|
||||||
? "bg-primary/10 ring-primary"
|
onToggle(item.id);
|
||||||
: "bg-muted ring-border/50 hover:bg-muted/70"
|
}}
|
||||||
|
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">
|
<div className="flex size-10 items-center justify-center rounded-xl bg-background">
|
||||||
{isProcessing ? (
|
{isProcessing ? (
|
||||||
<Loader2 className="size-5 animate-spin text-muted-foreground" />
|
<Loader2 className="size-5 animate-spin text-muted-foreground" />
|
||||||
|
) : isFailed ? (
|
||||||
|
<AlertCircle className="size-6 text-destructive" />
|
||||||
) : (
|
) : (
|
||||||
<SourceIcon item={item} />
|
<SourceIcon item={item} />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<p className="truncate text-xs font-medium text-foreground">{title}</p>
|
<div className="min-w-0">
|
||||||
<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">
|
<p className={`truncate text-xs font-medium ${isFailed ? "text-destructive" : "text-foreground"}`}>{title}</p>
|
||||||
{title}
|
{isFailed && <p className="mt-0.5 text-[10px] text-destructive/80">处理失败,请删除后重试</p>}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in new issue
Block a user