admin/infinite-canvas
1
0
Fork 0
mirror of https://github.com/basketikun/infinite-canvas.git synced 2026-07-30 21:21:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(image): enhance action buttons with tooltips and improve layout

Browse Source
This commit is contained in:
HouYunFei
2026-06-02 15:06:50 +08:00
parent e926223385
commit 50176d8c7a
1 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app/(user)/image/page.tsx
+20 -13
View File
@@ -2,7 +2,7 @@
import { ArrowLeft, ArrowRight, BookOpen, CheckSquare, ClipboardPaste, Download, FolderPlus, History, ImagePlus, LoaderCircle, PenLine, Plus, SlidersHorizontal, Sparkles, Trash2, Upload } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { App, Button, Checkbox, Drawer, Empty, Image, Input, Modal, Tag, Typography } from "antd";
import { App, Button, Checkbox, Drawer, Empty, Image, Input, Modal, Tag, Tooltip, Typography } from "antd";
import localforage from "localforage";
import { saveAs } from "file-saver";
@@ -64,6 +64,7 @@ type GenerationLogConfig = Pick<AiConfig, "model" | "imageModel" | "quality" | "
type UpdateAiConfig = <K extends keyof AiConfig>(key: K, value: AiConfig[K]) => void;
const LOG_STORE_KEY = "infinite-canvas:image_generation_logs";
const RESULT_ACTION_BUTTON_CLASS = "min-w-0 px-1.5 [&_.ant-btn-icon]:shrink-0 [&>span:last-child]:min-w-0 [&>span:last-child]:truncate";
const logStore = localforage.createInstance({ name: "infinite-canvas", storeName: "image_generation_logs" });
export default function ImagePage() {
@@ -510,24 +511,30 @@ function ResultImageCard({
return (
<div className="overflow-hidden rounded-lg border border-stone-200 bg-background dark:border-stone-800">
<Image src={image.dataUrl} alt={`生成结果 ${index + 1}`} className="aspect-square object-cover" />
<div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-2 border-t border-stone-200 px-3 py-2.5 dark:border-stone-800">
<div className="flex min-w-0 flex-wrap gap-x-2 gap-y-1 text-xs text-stone-500 dark:text-stone-400">
<div className="space-y-2 border-t border-stone-200 px-3 py-2.5 dark:border-stone-800">
<div className="flex min-w-0 gap-x-2 gap-y-1 text-xs text-stone-500 dark:text-stone-400">
<span>
{image.width}x{image.height}
</span>
<span>{formatBytes(image.bytes)}</span>
<span>{formatDuration(image.durationMs)}</span>
</div>
<div className="flex shrink-0 gap-1">
<Button size="small" icon={<FolderPlus className="size-3.5" />} onClick={() => void onSaveAsset(image, index)}>
添加到素材
</Button>
<Button size="small" icon={<PenLine className="size-3.5" />} onClick={() => void onEdit(image, index)}>
加入参考图
</Button>
<Button size="small" icon={<Download className="size-3.5" />} onClick={() => onDownload(image, index)}>
下载
</Button>
<div className="grid min-w-0 grid-cols-3 gap-2">
<Tooltip title="添加到素材">
<Button className={RESULT_ACTION_BUTTON_CLASS} size="small" icon={<FolderPlus className="size-3.5" />} onClick={() => void onSaveAsset(image, index)}>
添加到素材
</Button>
</Tooltip>
<Tooltip title="加入参考图">
<Button className={RESULT_ACTION_BUTTON_CLASS} size="small" icon={<PenLine className="size-3.5" />} onClick={() => void onEdit(image, index)}>
加入参考图
</Button>
</Tooltip>
<Tooltip title="下载">
<Button className={RESULT_ACTION_BUTTON_CLASS} size="small" icon={<Download className="size-3.5" />} onClick={() => onDownload(image, index)}>
下载
</Button>
</Tooltip>
</div>
</div>
</div>