加了一堆模型和一堆功能
This commit is contained in:
@@ -54,7 +54,8 @@ export function ImageDetailPanel({ onAnnotationComplete }: ImageDetailPanelProps
|
||||
if (showAnnotate) {
|
||||
return (
|
||||
<aside className="fixed inset-0 z-50 md:relative md:inset-auto md:z-auto
|
||||
md:w-[480px] flex-shrink-0 border-l border-[var(--border)] bg-[var(--bg-secondary)]
|
||||
md:w-[480px] flex-shrink-0 border-l border-[var(--border)]
|
||||
bg-[var(--bg-secondary)]/90 backdrop-blur-xl
|
||||
flex flex-col overflow-hidden">
|
||||
<AnnotationCanvas
|
||||
imageUrl={getImageUrl(detailImage.url)}
|
||||
@@ -67,15 +68,16 @@ export function ImageDetailPanel({ onAnnotationComplete }: ImageDetailPanelProps
|
||||
|
||||
return (
|
||||
<aside className="fixed inset-0 z-50 md:relative md:inset-auto md:z-auto
|
||||
md:w-[360px] flex-shrink-0 border-l border-[var(--border)] bg-[var(--bg-secondary)]
|
||||
md:w-[360px] flex-shrink-0 border-l border-[var(--border)]
|
||||
bg-[var(--bg-secondary)]/90 backdrop-blur-xl
|
||||
flex flex-col overflow-hidden">
|
||||
{/* 头部 */}
|
||||
<div className="flex items-center justify-between px-4 py-2.5 border-b border-[var(--border)]">
|
||||
<span className="text-sm font-medium text-[var(--text-primary)]">图片详情</span>
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-[var(--border)]">
|
||||
<span className="text-sm font-semibold text-[var(--text-primary)]">图片详情</span>
|
||||
<button
|
||||
onClick={() => setDetailImage(null)}
|
||||
className="text-[var(--text-secondary)] hover:text-[var(--text-primary)]
|
||||
cursor-pointer transition-colors"
|
||||
className="text-[var(--text-secondary)] hover:text-[var(--accent)]
|
||||
cursor-pointer transition-colors p-1 rounded-lg hover:bg-[var(--accent)]/5"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M18 6L6 18M6 6l12 12" />
|
||||
@@ -83,11 +85,10 @@ export function ImageDetailPanel({ onAnnotationComplete }: ImageDetailPanelProps
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 内容滚动区 */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{/* 图片预览 */}
|
||||
<div className="p-4">
|
||||
<div className="relative rounded-lg overflow-hidden border border-[var(--border)] bg-[var(--bg-primary)]">
|
||||
<div className="relative rounded-xl overflow-hidden neon-border bg-[var(--bg-primary)]">
|
||||
<img
|
||||
src={getImageUrl(detailImage.url)}
|
||||
alt="预览"
|
||||
@@ -97,28 +98,31 @@ export function ImageDetailPanel({ onAnnotationComplete }: ImageDetailPanelProps
|
||||
</div>
|
||||
|
||||
{/* 缩放控制 */}
|
||||
<div className="flex items-center justify-center gap-2 mt-2">
|
||||
<div className="flex items-center justify-center gap-2 mt-3">
|
||||
<button
|
||||
onClick={() => setScale((s) => Math.max(0.5, s - 0.25))}
|
||||
className="text-xs px-2 py-0.5 rounded bg-[var(--bg-tertiary)] text-[var(--text-secondary)]
|
||||
hover:text-[var(--text-primary)] cursor-pointer"
|
||||
className="text-xs px-2.5 py-1 rounded-lg bg-[var(--bg-tertiary)] text-[var(--text-secondary)]
|
||||
hover:text-[var(--accent)] border border-[var(--border)]
|
||||
hover:border-[var(--accent)]/40 cursor-pointer transition-all"
|
||||
>
|
||||
−
|
||||
</button>
|
||||
<span className="text-xs text-[var(--text-secondary)] min-w-[40px] text-center">
|
||||
<span className="text-xs text-[var(--text-secondary)] min-w-[40px] text-center font-medium">
|
||||
{Math.round(scale * 100)}%
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setScale((s) => Math.min(3, s + 0.25))}
|
||||
className="text-xs px-2 py-0.5 rounded bg-[var(--bg-tertiary)] text-[var(--text-secondary)]
|
||||
hover:text-[var(--text-primary)] cursor-pointer"
|
||||
className="text-xs px-2.5 py-1 rounded-lg bg-[var(--bg-tertiary)] text-[var(--text-secondary)]
|
||||
hover:text-[var(--accent)] border border-[var(--border)]
|
||||
hover:border-[var(--accent)]/40 cursor-pointer transition-all"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setScale(1)}
|
||||
className="text-xs px-2 py-0.5 rounded bg-[var(--bg-tertiary)] text-[var(--text-secondary)]
|
||||
hover:text-[var(--text-primary)] cursor-pointer"
|
||||
className="text-xs px-2.5 py-1 rounded-lg bg-[var(--bg-tertiary)] text-[var(--text-secondary)]
|
||||
hover:text-[var(--accent)] border border-[var(--border)]
|
||||
hover:border-[var(--accent)]/40 cursor-pointer transition-all"
|
||||
>
|
||||
重置
|
||||
</button>
|
||||
@@ -129,10 +133,10 @@ export function ImageDetailPanel({ onAnnotationComplete }: ImageDetailPanelProps
|
||||
<div className="px-4 pb-3 flex flex-wrap gap-2">
|
||||
<button
|
||||
onClick={handleDownload}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md
|
||||
bg-[var(--bg-tertiary)] text-[var(--text-secondary)]
|
||||
hover:text-[var(--text-primary)] border border-[var(--border)]
|
||||
hover:border-[var(--accent)] transition-colors cursor-pointer"
|
||||
className="flex items-center gap-1.5 px-3.5 py-2 text-xs rounded-xl font-medium
|
||||
bg-[var(--accent)] text-[var(--bg-primary)]
|
||||
hover:bg-[var(--accent-hover)] hover:shadow-[0_0_12px_rgba(77,184,164,0.25)]
|
||||
transition-all cursor-pointer"
|
||||
>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" />
|
||||
@@ -141,13 +145,12 @@ export function ImageDetailPanel({ onAnnotationComplete }: ImageDetailPanelProps
|
||||
</button>
|
||||
<button
|
||||
onClick={() => toggleFavorite(detailImage.id)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md
|
||||
border transition-colors cursor-pointer"
|
||||
style={{
|
||||
backgroundColor: detailImage.favorited ? "#f59e0b22" : "var(--bg-tertiary)",
|
||||
borderColor: detailImage.favorited ? "#f59e0b" : "var(--border)",
|
||||
color: detailImage.favorited ? "#f59e0b" : "var(--text-secondary)",
|
||||
}}
|
||||
className={`flex items-center gap-1.5 px-3.5 py-2 text-xs rounded-xl font-medium
|
||||
border transition-all cursor-pointer ${
|
||||
detailImage.favorited
|
||||
? "border-[var(--accent)]/40 bg-[var(--accent)]/8 text-[var(--accent)]"
|
||||
: "border-[var(--border)] bg-[var(--bg-tertiary)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
|
||||
}`}
|
||||
>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill={detailImage.favorited ? "currentColor" : "none"} stroke="currentColor" strokeWidth="2">
|
||||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
|
||||
@@ -156,10 +159,10 @@ export function ImageDetailPanel({ onAnnotationComplete }: ImageDetailPanelProps
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowAnnotate(true)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md
|
||||
className="flex items-center gap-1.5 px-3.5 py-2 text-xs rounded-xl font-medium
|
||||
bg-[var(--bg-tertiary)] text-[var(--text-secondary)]
|
||||
hover:text-[var(--accent)] border border-[var(--border)]
|
||||
hover:border-[var(--accent)] transition-colors cursor-pointer"
|
||||
hover:border-[var(--accent)]/40 transition-all cursor-pointer"
|
||||
>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M12 20h9M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z" />
|
||||
@@ -168,10 +171,10 @@ export function ImageDetailPanel({ onAnnotationComplete }: ImageDetailPanelProps
|
||||
</button>
|
||||
<button
|
||||
onClick={() => deleteAssetById(detailImage.id)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md
|
||||
bg-[var(--bg-tertiary)] text-red-400/70
|
||||
hover:text-red-400 border border-[var(--border)]
|
||||
hover:border-red-400/50 transition-colors cursor-pointer"
|
||||
className="flex items-center gap-1.5 px-3.5 py-2 text-xs rounded-xl font-medium
|
||||
bg-[var(--bg-tertiary)] text-[var(--hot)]/60
|
||||
hover:text-[var(--hot)] border border-[var(--border)]
|
||||
hover:border-[var(--hot)]/40 transition-all cursor-pointer"
|
||||
>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<polyline points="3 6 5 6 21 6" />
|
||||
@@ -181,7 +184,7 @@ export function ImageDetailPanel({ onAnnotationComplete }: ImageDetailPanelProps
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Prompt 信息 */}
|
||||
{/* Prompt */}
|
||||
{detailImage.prompt && (
|
||||
<div className="px-4 pb-3">
|
||||
<div className="flex items-center justify-between mb-1.5">
|
||||
@@ -194,7 +197,7 @@ export function ImageDetailPanel({ onAnnotationComplete }: ImageDetailPanelProps
|
||||
复制
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-2.5 rounded-md bg-[var(--bg-primary)] border border-[var(--border)]
|
||||
<div className="p-3 rounded-xl bg-[var(--bg-primary)] border border-[var(--border)]
|
||||
text-xs text-[var(--text-secondary)] leading-relaxed break-all">
|
||||
{detailImage.prompt}
|
||||
</div>
|
||||
@@ -205,15 +208,15 @@ export function ImageDetailPanel({ onAnnotationComplete }: ImageDetailPanelProps
|
||||
{detailImage.tags.length > 0 && (
|
||||
<div className="px-4 pb-3">
|
||||
<span className="text-xs font-medium text-[var(--text-secondary)] block mb-1.5">标签</span>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{detailImage.tags.map((tid) => {
|
||||
const tag = tagMap.get(tid);
|
||||
if (!tag) return null;
|
||||
return (
|
||||
<span
|
||||
key={tid}
|
||||
className="text-[10px] px-2 py-0.5 rounded-full"
|
||||
style={{ backgroundColor: tag.color + "22", color: tag.color }}
|
||||
className="text-[10px] px-2 py-0.5 rounded-lg font-medium"
|
||||
style={{ backgroundColor: tag.color + "18", color: tag.color }}
|
||||
>
|
||||
{tag.name}
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user