396 lines
13 KiB
TypeScript
396 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
import { useDropzone } from "react-dropzone";
|
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { cn } from "@/lib/utils";
|
|
import type { MediaAsset, MediaKind, MediaSelection } from "@/types/media";
|
|
import { emitAssetsChanged } from "@/lib/events";
|
|
|
|
export type PickerTab = "upload" | "recent" | "link" | "icon";
|
|
|
|
interface ImagePickerDialogProps {
|
|
open: boolean;
|
|
defaultTab: PickerTab;
|
|
mediaType: MediaKind;
|
|
documentId: string;
|
|
workspaceId: string;
|
|
onClose: () => void;
|
|
onSelect: (selection: MediaSelection) => void;
|
|
}
|
|
|
|
const ICON_PRESETS: Array<{ id: string; label: string; url: string }> = [
|
|
{ id: "progress", label: "进度波纹", url: "https://media.giphy.com/media/QBd2kLB5qDmysEXre9/giphy.gif" },
|
|
{ id: "heartbeat", label: "心跳", url: "https://media.giphy.com/media/HEPwfdu6T6svpPE1eN/giphy.gif" },
|
|
{ id: "sparkles", label: "闪光", url: "https://media.giphy.com/media/f9jQLaPmuFKfa7E55Q/giphy.gif" },
|
|
{ id: "loading", label: "加载", url: "https://media.giphy.com/media/52qtwCtj9OLTi/giphy.gif" },
|
|
];
|
|
|
|
const MEDIA_TABS: Record<MediaKind, PickerTab[]> = {
|
|
image: ["upload", "recent", "link", "icon"],
|
|
video: ["upload", "recent", "link"],
|
|
audio: ["upload", "recent", "link"],
|
|
file: ["upload", "recent", "link"],
|
|
};
|
|
|
|
const TAB_LABELS: Record<PickerTab, string> = {
|
|
upload: "上传",
|
|
recent: "最近",
|
|
link: "链接",
|
|
icon: "动态图标",
|
|
};
|
|
|
|
const MEDIA_ACCEPTS: Record<MediaKind, Record<string, string[]> | null> = {
|
|
image: { "image/*": [] },
|
|
video: { "video/*": [] },
|
|
audio: { "audio/*": [] },
|
|
file: null,
|
|
};
|
|
|
|
const MEDIA_TITLES: Record<MediaKind, string> = {
|
|
image: "选择图片",
|
|
video: "选择视频",
|
|
audio: "选择音频",
|
|
file: "选择文件",
|
|
};
|
|
|
|
const formatBytes = (size?: number | null) => {
|
|
if (!size || size <= 0) {
|
|
return "";
|
|
}
|
|
const units = ["B", "KB", "MB", "GB", "TB"];
|
|
let value = size;
|
|
let index = 0;
|
|
while (value >= 1024 && index < units.length - 1) {
|
|
value /= 1024;
|
|
index += 1;
|
|
}
|
|
return `${value.toFixed(value >= 10 ? 0 : 1)} ${units[index]}`;
|
|
};
|
|
|
|
const guessFileNameFromUrl = (url: string) => {
|
|
try {
|
|
const parsed = new URL(url);
|
|
const name = parsed.pathname.split("/").filter(Boolean).pop();
|
|
if (name) {
|
|
return decodeURIComponent(name);
|
|
}
|
|
} catch {
|
|
const segments = url.split("?")[0]?.split("/") ?? [];
|
|
const name = segments.pop();
|
|
if (name) {
|
|
return decodeURIComponent(name);
|
|
}
|
|
}
|
|
return "未命名资源";
|
|
};
|
|
|
|
export function ImagePickerDialog({
|
|
open,
|
|
defaultTab,
|
|
mediaType,
|
|
documentId,
|
|
workspaceId,
|
|
onClose,
|
|
onSelect,
|
|
}: ImagePickerDialogProps) {
|
|
const [tab, setTab] = useState<PickerTab>(defaultTab);
|
|
const availableTabs = MEDIA_TABS[mediaType];
|
|
const [recent, setRecent] = useState<MediaAsset[]>([]);
|
|
const [recentLoading, setRecentLoading] = useState(false);
|
|
const [linkUrl, setLinkUrl] = useState("");
|
|
const [uploading, setUploading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
const availableTabs = MEDIA_TABS[mediaType];
|
|
const fallback = availableTabs.includes(defaultTab) ? defaultTab : availableTabs[0];
|
|
setTab(fallback);
|
|
}
|
|
}, [defaultTab, mediaType, open]);
|
|
|
|
const fetchRecent = useCallback(async () => {
|
|
if (!workspaceId) {
|
|
return;
|
|
}
|
|
setRecentLoading(true);
|
|
try {
|
|
const response = await fetch(
|
|
`/api/media/assets?workspaceId=${workspaceId}&assetType=${mediaType}`,
|
|
);
|
|
if (!response.ok) {
|
|
throw new Error("无法获取最近上传");
|
|
}
|
|
const payload = (await response.json()) as { items: MediaAsset[] };
|
|
setRecent(payload.items ?? []);
|
|
} catch (err) {
|
|
console.error(err);
|
|
setRecent([]);
|
|
} finally {
|
|
setRecentLoading(false);
|
|
}
|
|
}, [workspaceId, mediaType]);
|
|
|
|
useEffect(() => {
|
|
if (open && tab === "recent") {
|
|
void fetchRecent();
|
|
}
|
|
}, [open, tab, fetchRecent]);
|
|
|
|
const handleUpload = useCallback(
|
|
async (file: File) => {
|
|
if (!workspaceId || !documentId) {
|
|
setError("缺少必要参数");
|
|
return;
|
|
}
|
|
setUploading(true);
|
|
setError(null);
|
|
try {
|
|
const form = new FormData();
|
|
form.append("file", file);
|
|
form.append("workspaceId", workspaceId);
|
|
form.append("documentId", documentId);
|
|
const response = await fetch("/api/media/upload", {
|
|
method: "POST",
|
|
body: form,
|
|
});
|
|
if (!response.ok) {
|
|
const payload = await response.json().catch(() => null);
|
|
throw new Error(payload?.error ?? "上传失败");
|
|
}
|
|
const payload = (await response.json()) as { asset: MediaAsset };
|
|
if (!payload.asset?.file_url) {
|
|
throw new Error("返回数据缺少文件地址");
|
|
}
|
|
emitAssetsChanged(documentId, payload.asset);
|
|
onSelect({
|
|
assetId: payload.asset.id,
|
|
fileUrl: payload.asset.file_url,
|
|
thumbnailUrl: payload.asset.thumbnail_url,
|
|
assetType: payload.asset.asset_type,
|
|
fileName: payload.asset.file_name,
|
|
fileSize: payload.asset.file_size,
|
|
mimeType: payload.asset.mime_type,
|
|
});
|
|
onClose();
|
|
} catch (err) {
|
|
setError((err as Error).message);
|
|
} finally {
|
|
setUploading(false);
|
|
}
|
|
},
|
|
[documentId, onClose, onSelect, workspaceId],
|
|
);
|
|
|
|
const onDrop = useCallback(
|
|
(acceptedFiles: File[]) => {
|
|
if (acceptedFiles.length === 0) return;
|
|
void handleUpload(acceptedFiles[0]);
|
|
},
|
|
[handleUpload],
|
|
);
|
|
|
|
const acceptConfig = MEDIA_ACCEPTS[mediaType];
|
|
|
|
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
|
onDrop,
|
|
accept: acceptConfig ?? undefined,
|
|
maxFiles: 1,
|
|
});
|
|
|
|
const handleLinkSubmit = async () => {
|
|
if (!linkUrl.trim()) return;
|
|
try {
|
|
const targetUrl = linkUrl.trim();
|
|
const response = await fetch("/api/media/assets", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
workspaceId,
|
|
documentId,
|
|
fileUrl: targetUrl,
|
|
thumbnailUrl: targetUrl,
|
|
assetType: mediaType,
|
|
fileName: guessFileNameFromUrl(targetUrl),
|
|
}),
|
|
});
|
|
if (!response.ok) {
|
|
const payload = await response.json().catch(() => null);
|
|
throw new Error(payload?.error ?? "保存失败");
|
|
}
|
|
const payload = (await response.json()) as { asset: MediaAsset };
|
|
if (!payload.asset?.file_url) {
|
|
throw new Error("缺少图片地址");
|
|
}
|
|
emitAssetsChanged(documentId, payload.asset);
|
|
onSelect({
|
|
assetId: payload.asset.id,
|
|
fileUrl: payload.asset.file_url,
|
|
thumbnailUrl: payload.asset.thumbnail_url,
|
|
assetType: payload.asset.asset_type,
|
|
fileName: payload.asset.file_name,
|
|
fileSize: payload.asset.file_size,
|
|
mimeType: payload.asset.mime_type,
|
|
});
|
|
setLinkUrl("");
|
|
onClose();
|
|
} catch (err) {
|
|
setError((err as Error).message);
|
|
}
|
|
};
|
|
|
|
const renderRecent = () => {
|
|
if (recentLoading) {
|
|
return <div className="py-8 text-center text-sm text-gray-500">加载最近上传中...</div>;
|
|
}
|
|
if (recent.length === 0) {
|
|
return <div className="py-8 text-center text-sm text-gray-400">暂无最近上传的{MEDIA_TITLES[mediaType].replace("选择", "")}</div>;
|
|
}
|
|
return (
|
|
<div className="grid grid-cols-3 gap-3">
|
|
{recent.map((asset) => (
|
|
<button
|
|
type="button"
|
|
key={asset.id}
|
|
className="rounded-xl border border-gray-200 bg-white p-2 text-left shadow-sm transition hover:border-[#2563eb]"
|
|
onClick={() => {
|
|
if (!asset.file_url) return;
|
|
onSelect({
|
|
assetId: asset.id,
|
|
fileUrl: asset.file_url,
|
|
thumbnailUrl: asset.thumbnail_url,
|
|
assetType: asset.asset_type,
|
|
fileName: asset.file_name,
|
|
fileSize: asset.file_size,
|
|
mimeType: asset.mime_type,
|
|
});
|
|
onClose();
|
|
}}
|
|
>
|
|
{mediaType === "image" ? (
|
|
<img
|
|
src={asset.thumbnail_url ?? asset.file_url ?? ""}
|
|
alt={asset.asset_type}
|
|
className="h-32 w-full rounded-lg object-cover"
|
|
/>
|
|
) : (
|
|
<div className="flex h-32 flex-col items-start justify-center gap-1 rounded-lg bg-gray-50 px-3">
|
|
<p className="text-sm font-medium text-gray-700">{asset.file_name ?? "未命名资源"}</p>
|
|
{asset.file_size ? <p className="text-xs text-gray-500">{formatBytes(asset.file_size)}</p> : null}
|
|
</div>
|
|
)}
|
|
<p className="mt-2 truncate text-xs text-gray-500">
|
|
{asset.asset_type === "icon" ? "动态图标" : MEDIA_TITLES[mediaType].replace("选择", "")}
|
|
</p>
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const renderIcons = () => (
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{ICON_PRESETS.map((icon) => (
|
|
<button
|
|
key={icon.id}
|
|
type="button"
|
|
className="flex flex-col items-center rounded-xl border border-dashed border-gray-200 p-3 text-sm text-gray-600 transition hover:border-[#2563eb]"
|
|
onClick={() => {
|
|
onSelect({
|
|
assetId: `icon-${icon.id}`,
|
|
fileUrl: icon.url,
|
|
thumbnailUrl: icon.url,
|
|
assetType: "icon",
|
|
});
|
|
onClose();
|
|
}}
|
|
>
|
|
<img src={icon.url} alt={icon.label} className="h-24 w-24 rounded-lg object-cover" />
|
|
<span className="mt-2 text-xs">{icon.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
const helperText = useMemo(() => {
|
|
const label = MEDIA_TITLES[mediaType].replace("选择", "");
|
|
switch (tab) {
|
|
case "upload":
|
|
return `支持拖拽或点击上传${label}，单个文件不超过 200MB`;
|
|
case "recent":
|
|
return `最近 12 个${label}，支持一键选取`;
|
|
case "link":
|
|
return `输入${label}直链或 CDN 地址`;
|
|
case "icon":
|
|
return "选择 Wolai 常用动态图标";
|
|
default:
|
|
return "";
|
|
}
|
|
}, [mediaType, tab]);
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={(next) => !next && onClose()}>
|
|
<DialogContent className="max-w-3xl">
|
|
<DialogHeader className="text-left">
|
|
<DialogTitle>{MEDIA_TITLES[mediaType]}</DialogTitle>
|
|
<DialogDescription>{helperText}</DialogDescription>
|
|
</DialogHeader>
|
|
{error && <div className="rounded-md bg-red-50 px-3 py-2 text-sm text-red-600">{error}</div>}
|
|
<Tabs value={tab} onValueChange={(value) => setTab(value as PickerTab)}>
|
|
<TabsList className="mb-4">
|
|
{availableTabs.map((tabKey) => (
|
|
<TabsTrigger key={tabKey} value={tabKey}>
|
|
{TAB_LABELS[tabKey]}
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
{availableTabs.includes("upload") && (
|
|
<TabsContent value="upload">
|
|
<div
|
|
{...getRootProps()}
|
|
className={cn(
|
|
"flex h-48 cursor-pointer flex-col items-center justify-center rounded-2xl border-2 border-dashed border-gray-300 text-sm text-gray-500",
|
|
isDragActive && "border-[#2563eb] bg-[#f5f7ff]",
|
|
)}
|
|
>
|
|
<input {...getInputProps()} />
|
|
{uploading ? "上传中..." : "拖拽文件到此处，或点击选择文件"}
|
|
</div>
|
|
</TabsContent>
|
|
)}
|
|
{availableTabs.includes("recent") && (
|
|
<TabsContent value="recent">
|
|
<div className="mb-2 flex items-center justify-between text-sm">
|
|
<span className="text-gray-500">最近上传的{MEDIA_TITLES[mediaType].replace("选择", "")}</span>
|
|
<Button type="button" variant="ghost" size="sm" onClick={() => void fetchRecent()}>
|
|
刷新
|
|
</Button>
|
|
</div>
|
|
{renderRecent()}
|
|
</TabsContent>
|
|
)}
|
|
{availableTabs.includes("link") && (
|
|
<TabsContent value="link">
|
|
<div className="flex gap-2">
|
|
<Input
|
|
value={linkUrl}
|
|
onChange={(event) => setLinkUrl(event.target.value)}
|
|
placeholder={`输入${MEDIA_TITLES[mediaType].replace("选择", "")}链接，例如 https://example.com/file`}
|
|
/>
|
|
<Button type="button" onClick={() => void handleLinkSubmit()}>
|
|
插入
|
|
</Button>
|
|
</div>
|
|
</TabsContent>
|
|
)}
|
|
{availableTabs.includes("icon") && <TabsContent value="icon">{renderIcons()}</TabsContent>}
|
|
</Tabs>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|