feat: 增强编辑器链接对话框并统一图片插入选择器
链接支持网址/文字与站内搜索，新标签由全站设置控制；文章与评论共用已上传图片选择器。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
351
frontend/src/components/editor/ArticleImagePickerDialog.tsx
Normal file
351
frontend/src/components/editor/ArticleImagePickerDialog.tsx
Normal file
@@ -0,0 +1,351 @@
|
||||
import { useCallback, useEffect, useRef, useState, type DragEvent } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { notify } from '@/lib/notify';
|
||||
import { api } from '@/api/client';
|
||||
import type { MediaItem } from '@/api/types';
|
||||
import { toPostImageThumbSrc } from '@/utils/postContent';
|
||||
import { Upload, Link2, Images, Loader2 } from 'lucide-react';
|
||||
|
||||
export type ImagePickerTarget = 'rich' | 'markdown';
|
||||
type PickerTab = 'upload' | 'link' | 'gallery';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
/** 上传或选中后插入一张或多张图片 URL */
|
||||
onInsert: (urls: string[]) => void;
|
||||
}
|
||||
|
||||
/** 校验可插入的图片地址：外链或站内绝对路径 */
|
||||
export function isValidImageSrc(url: string): boolean {
|
||||
const u = url.trim();
|
||||
if (!u) return false;
|
||||
if (u.startsWith('/') && !u.startsWith('//')) return true;
|
||||
try {
|
||||
const parsed = new URL(u);
|
||||
return parsed.protocol === 'http:' || parsed.protocol === 'https:';
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
const ACCEPT = 'image/jpeg,image/png,image/gif,image/webp';
|
||||
const PAGE_SIZE = 24;
|
||||
|
||||
/** 文章编辑器：统一图片插入（上传 / 链接 / 我的图片） */
|
||||
export function ArticleImagePickerDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
onInsert,
|
||||
}: Props) {
|
||||
const [tab, setTab] = useState<PickerTab>('upload');
|
||||
const [url, setUrl] = useState('');
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [dragOver, setDragOver] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const [gallery, setGallery] = useState<MediaItem[]>([]);
|
||||
const [galleryPage, setGalleryPage] = useState(1);
|
||||
const [galleryTotalPages, setGalleryTotalPages] = useState(1);
|
||||
const [galleryLoading, setGalleryLoading] = useState(false);
|
||||
const [galleryLoaded, setGalleryLoaded] = useState(false);
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||
|
||||
const resetState = useCallback(() => {
|
||||
setTab('upload');
|
||||
setUrl('');
|
||||
setUploading(false);
|
||||
setDragOver(false);
|
||||
setGallery([]);
|
||||
setGalleryPage(1);
|
||||
setGalleryTotalPages(1);
|
||||
setGalleryLoading(false);
|
||||
setGalleryLoaded(false);
|
||||
setSelected(new Set());
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) resetState();
|
||||
}, [open, resetState]);
|
||||
|
||||
const handleOpenChange = (next: boolean) => {
|
||||
if (!next) resetState();
|
||||
onOpenChange(next);
|
||||
};
|
||||
|
||||
const finishInsert = (urls: string[]) => {
|
||||
if (!urls.length) return;
|
||||
onInsert(urls);
|
||||
handleOpenChange(false);
|
||||
};
|
||||
|
||||
const uploadFiles = async (files: File[]) => {
|
||||
const images = files.filter(f => f.type.startsWith('image/'));
|
||||
if (!images.length) {
|
||||
notify.warning('请选择图片文件（jpeg / png / gif / webp）');
|
||||
return;
|
||||
}
|
||||
setUploading(true);
|
||||
const urls: string[] = [];
|
||||
try {
|
||||
for (const file of images) {
|
||||
try {
|
||||
const { url: uploaded } = await api.uploadPostImage(file);
|
||||
urls.push(uploaded);
|
||||
} catch (e: unknown) {
|
||||
notify.error(e instanceof Error ? e.message : '图片上传失败');
|
||||
}
|
||||
}
|
||||
if (urls.length) finishInsert(urls);
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onFileChange = (list: FileList | null) => {
|
||||
if (!list?.length) return;
|
||||
void uploadFiles([...list]);
|
||||
};
|
||||
|
||||
const onDrop = (e: DragEvent) => {
|
||||
e.preventDefault();
|
||||
setDragOver(false);
|
||||
if (uploading) return;
|
||||
void uploadFiles([...e.dataTransfer.files]);
|
||||
};
|
||||
|
||||
const handleLinkInsert = () => {
|
||||
const next = url.trim();
|
||||
if (!next) {
|
||||
notify.warning('请输入图片地址');
|
||||
return;
|
||||
}
|
||||
if (!isValidImageSrc(next)) {
|
||||
notify.warning('请使用 http(s) 外链或本站以 / 开头的路径');
|
||||
return;
|
||||
}
|
||||
finishInsert([next]);
|
||||
};
|
||||
|
||||
const loadGallery = useCallback(async (page: number, append: boolean) => {
|
||||
setGalleryLoading(true);
|
||||
try {
|
||||
const res = await api.myPostImages({ page, size: PAGE_SIZE });
|
||||
setGallery(prev => (append ? [...prev, ...res.files] : res.files));
|
||||
setGalleryPage(res.page);
|
||||
setGalleryTotalPages(res.total_pages);
|
||||
setGalleryLoaded(true);
|
||||
} catch (e: unknown) {
|
||||
notify.error(e instanceof Error ? e.message : '加载图片失败');
|
||||
setGalleryLoaded(true);
|
||||
} finally {
|
||||
setGalleryLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (open && tab === 'gallery' && !galleryLoaded && !galleryLoading) {
|
||||
void loadGallery(1, false);
|
||||
}
|
||||
}, [open, tab, galleryLoaded, galleryLoading, loadGallery]);
|
||||
|
||||
const toggleSelect = (itemUrl: string) => {
|
||||
setSelected(prev => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(itemUrl)) next.delete(itemUrl);
|
||||
else next.add(itemUrl);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const handleGalleryInsert = () => {
|
||||
if (!selected.size) {
|
||||
notify.warning('请先选择图片');
|
||||
return;
|
||||
}
|
||||
// 保持网格出现顺序
|
||||
const urls = gallery.filter(f => selected.has(f.url)).map(f => f.url);
|
||||
finishInsert(urls);
|
||||
};
|
||||
|
||||
const tabs: { id: PickerTab; label: string; icon: typeof Upload }[] = [
|
||||
{ id: 'upload', label: '上传', icon: Upload },
|
||||
{ id: 'link', label: '链接', icon: Link2 },
|
||||
{ id: 'gallery', label: '我的图片', icon: Images },
|
||||
];
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||
<DialogContent className="article-image-picker">
|
||||
<DialogHeader>
|
||||
<DialogTitle>插入图片</DialogTitle>
|
||||
<DialogDescription>
|
||||
上传本地文件、粘贴链接，或从已上传图库中选择。
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="article-image-picker__tabs" role="tablist">
|
||||
{tabs.map(t => {
|
||||
const Icon = t.icon;
|
||||
return (
|
||||
<button
|
||||
key={t.id}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={tab === t.id}
|
||||
className={`article-image-picker__tab${tab === t.id ? ' is-active' : ''}`}
|
||||
onClick={() => setTab(t.id)}
|
||||
disabled={uploading}
|
||||
>
|
||||
<Icon size={14} aria-hidden />
|
||||
{t.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{tab === 'upload' && (
|
||||
<div className="article-image-picker__panel">
|
||||
<div
|
||||
className={`article-image-picker__drop${dragOver ? ' is-dragover' : ''}${uploading ? ' is-busy' : ''}`}
|
||||
onDragOver={e => {
|
||||
e.preventDefault();
|
||||
if (!uploading) setDragOver(true);
|
||||
}}
|
||||
onDragLeave={() => setDragOver(false)}
|
||||
onDrop={onDrop}
|
||||
onClick={() => !uploading && fileInputRef.current?.click()}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={e => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
fileInputRef.current?.click();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{uploading ? (
|
||||
<>
|
||||
<Loader2 size={28} className="article-image-picker__spin" />
|
||||
<p>正在上传…</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Upload size={28} />
|
||||
<p>拖拽图片到此处，或点击选择文件</p>
|
||||
<span>支持 jpeg / png / gif / webp；多选将并排成图组</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept={ACCEPT}
|
||||
multiple
|
||||
className="sr-only"
|
||||
onChange={e => {
|
||||
onFileChange(e.target.files);
|
||||
e.target.value = '';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === 'link' && (
|
||||
<div className="article-image-picker__panel">
|
||||
<Input
|
||||
type="url"
|
||||
value={url}
|
||||
placeholder="https://… 或 /uploads/posts/…"
|
||||
onChange={e => setUrl(e.target.value)}
|
||||
onKeyDown={e => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
handleLinkInsert();
|
||||
}
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
<p className="article-image-picker__hint">
|
||||
粘贴外链或本站已上传地址，无需重复上传。
|
||||
</p>
|
||||
<DialogFooter className="article-image-picker__footer">
|
||||
<Button type="button" variant="outline" onClick={() => handleOpenChange(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button type="button" onClick={handleLinkInsert}>
|
||||
插入
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === 'gallery' && (
|
||||
<div className="article-image-picker__panel">
|
||||
{galleryLoading && !gallery.length ? (
|
||||
<div className="article-image-picker__empty">
|
||||
<Loader2 size={22} className="article-image-picker__spin" />
|
||||
<span>加载中…</span>
|
||||
</div>
|
||||
) : !gallery.length ? (
|
||||
<div className="article-image-picker__empty">暂无上传记录</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="article-image-picker__grid">
|
||||
{gallery.map(item => {
|
||||
const thumb = toPostImageThumbSrc(item.url) || item.url;
|
||||
const isSel = selected.has(item.url);
|
||||
return (
|
||||
<button
|
||||
key={item.url}
|
||||
type="button"
|
||||
className={`article-image-picker__thumb${isSel ? ' is-selected' : ''}`}
|
||||
title={item.name}
|
||||
onClick={() => toggleSelect(item.url)}
|
||||
>
|
||||
<img src={thumb} alt={item.name} loading="lazy" />
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{galleryPage < galleryTotalPages && (
|
||||
<div className="article-image-picker__more">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={galleryLoading}
|
||||
onClick={() => void loadGallery(galleryPage + 1, true)}
|
||||
>
|
||||
{galleryLoading ? '加载中…' : '加载更多'}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<DialogFooter className="article-image-picker__footer">
|
||||
<span className="article-image-picker__selected-count">
|
||||
已选 {selected.size}
|
||||
</span>
|
||||
<Button type="button" variant="outline" onClick={() => handleOpenChange(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button type="button" disabled={!selected.size} onClick={handleGalleryInsert}>
|
||||
插入选中
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user