tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(admin): 系统公告 - 支持配图草稿与自动回收

Browse Source 
Adapted from ddcat-ai/open-ai-canvas#339

Original commit: fcdbe2aa833f31f683f709b7f409a0534ed78e20

Refs #339

Co-authored-by: 宇熙 <101980758+yuxiwl@users.noreply.github.com>
This commit is contained in:
ddCat
2026-08-29 15:16:18 +08:00
parent 791621667e
commit 6eadaa00a1
13 changed files with 811 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
web/src/pages/admin/components/admin-announcements-panel.tsx
View File

@@ -1,24 +1,29 @@
import { App, Button, Form, Input, Modal, Select, Switch, Tag } from "antd";
import type { ColumnsType } from "antd/es/table";
import { Pin, Plus, Search } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { Pin, Plus, Search, Upload, X } from "lucide-react";
import { useCallback, useEffect, useRef, useState, type ChangeEvent } from "react";
import { PaginationBar } from "@/components/layout/workspace-page";
import { useDebouncedValue } from "@/hooks/use-debounced-value";
import {
announcementImageUrl,
closeAdminAnnouncement,
createAdminAnnouncement,
discardAdminAnnouncementImage,
listAdminAnnouncements,
uploadAdminAnnouncementImage,
updateAdminAnnouncement,
type AnnouncementLevel,
type AnnouncementStatus,
type SystemAnnouncement,
} from "@/services/api/announcements";
import { resourceFileUrl } from "@/services/api/resources";
import { AdminDataTable, AdminFilterChip, AdminRowActions, AdminStatusBadge, AdminTableEmpty } from "./admin-ui";
type AnnouncementFormValues = {
title: string;
content: string;
imageResourceId?: string;
level: AnnouncementLevel;
pinned: boolean;
};
@@ -52,6 +57,10 @@ export default function AdminAnnouncementsPanel() {
const [editingAnnouncement, setEditingAnnouncement] = useState<SystemAnnouncement | null>(null);
const [publishing, setPublishing] = useState(false);
const [closingId, setClosingId] = useState("");
const [imagePreviewUrl, setImagePreviewUrl] = useState("");
const [draftImageResourceId, setDraftImageResourceId] = useState("");
const [imageUploading, setImageUploading] = useState(false);
const imageInputRef = useRef<HTMLInputElement | null>(null);
const reload = useCallback(async () => {
setLoading(true);
@@ -72,23 +81,89 @@ export default function AdminAnnouncementsPanel() {
const openPublishModal = () => {
setEditingAnnouncement(null);
form.setFieldsValue({ title: "", content: "", level: "info", pinned: false });
form.setFieldsValue({ title: "", content: "", imageResourceId: "", level: "info", pinned: false });
setImagePreviewUrl("");
setDraftImageResourceId("");
setModalOpen(true);
};
const openEditModal = (announcement: SystemAnnouncement) => {
setEditingAnnouncement(announcement);
form.setFieldsValue({ title: announcement.title, content: announcement.content, level: announcement.level, pinned: announcement.pinned });
form.setFieldsValue({ title: announcement.title, content: announcement.content, imageResourceId: announcement.imageResourceId || "", level: announcement.level, pinned: announcement.pinned });
setImagePreviewUrl(announcementImageUrl(announcement));
setDraftImageResourceId("");
setModalOpen(true);
};
const discardDraftImage = async () => {
if (!draftImageResourceId) return;
await discardAdminAnnouncementImage(draftImageResourceId);
setDraftImageResourceId("");
};
const uploadAnnouncementImage = async (event: ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
event.target.value = "";
if (!file) return;
if (!file.type.startsWith("image/")) {
message.warning("公告配图必须是图片文件");
return;
}
if (file.size > 10 * 1024 * 1024) {
message.warning("公告配图不能超过 10MB");
return;
}
setImageUploading(true);
try {
if (draftImageResourceId) await discardDraftImage();
const { resource } = await uploadAdminAnnouncementImage(file);
form.setFieldValue("imageResourceId", resource.id);
setDraftImageResourceId(resource.id);
setImagePreviewUrl(resourceFileUrl(resource.id));
message.success("公告配图已上传");
} catch (error) {
message.error(error instanceof Error ? error.message : "公告配图上传失败");
} finally {
setImageUploading(false);
}
};
const clearAnnouncementImage = async () => {
setImageUploading(true);
try {
await discardDraftImage();
form.setFieldValue("imageResourceId", "");
setImagePreviewUrl("");
} catch (error) {
message.error(error instanceof Error ? error.message : "公告配图清理失败");
} finally {
setImageUploading(false);
}
};
const closeEditor = async () => {
setImageUploading(true);
try {
await discardDraftImage();
setModalOpen(false);
setEditingAnnouncement(null);
setImagePreviewUrl("");
form.resetFields();
} catch (error) {
message.error(error instanceof Error ? error.message : "公告配图草稿清理失败，请重试");
} finally {
setImageUploading(false);
}
};
const publish = async () => {
const values = await form.validateFields();
setPublishing(true);
try {
const input = { title: values.title.trim(), content: values.content.trim(), level: values.level, pinned: Boolean(values.pinned) };
const input = { title: values.title.trim(), content: values.content.trim(), imageResourceId: values.imageResourceId?.trim() || "", level: values.level, pinned: Boolean(values.pinned) };
if (editingAnnouncement) await updateAdminAnnouncement(editingAnnouncement.id, input);
else await createAdminAnnouncement(input);
setDraftImageResourceId("");
setModalOpen(false);
setEditingAnnouncement(null);
setPage(1);
@@ -120,9 +195,12 @@ export default function AdminAnnouncementsPanel() {
dataIndex: "title",
minWidth: 360,
render: (_, announcement) => (
<div className="min-w-0 py-0.5">
<div className="truncate text-sm font-medium text-foreground" title={announcement.title}>{announcement.title}</div>
<div className="mt-1 line-clamp-2 whitespace-pre-wrap text-xs leading-5 text-foreground/50">{announcement.content}</div>
<div className="flex min-w-0 items-center gap-3 py-0.5">
{announcement.imageUrl ? <img src={announcementImageUrl(announcement)} alt="" loading="lazy" decoding="async" className="size-14 shrink-0 rounded-md border border-border/70 bg-muted/20 object-contain p-0.5" /> : null}
<div className="min-w-0">
<div className="truncate text-sm font-medium text-foreground" title={announcement.title}>{announcement.title}</div>
<div className="mt-1 line-clamp-2 whitespace-pre-wrap text-xs leading-5 text-foreground/50">{announcement.content}</div>
</div>
</div>
),
},
@@ -181,7 +259,7 @@ export default function AdminAnnouncementsPanel() {
footer={<PaginationBar alwaysShow current={page} pageSize={pageSize} total={total} onChange={(nextPage, nextPageSize) => { setPage(nextPageSize !== pageSize ? 1 : nextPage); setPageSize(nextPageSize); }} />}
/>
<Modal title={editingAnnouncement ? "编辑并重新发布公告" : "发布系统公告"} open={modalOpen} width={760} centered okText={editingAnnouncement ? "保存并重新发布" : "立即发布"} cancelText="取消" confirmLoading={publishing} onOk={() => void publish()} onCancel={() => { setModalOpen(false); setEditingAnnouncement(null); }} destroyOnHidden>
<Modal title={editingAnnouncement ? "编辑并重新发布公告" : "发布系统公告"} open={modalOpen} width={760} centered okText={editingAnnouncement ? "保存并重新发布" : "立即发布"} cancelText="取消" confirmLoading={publishing} okButtonProps={{ disabled: imageUploading }} cancelButtonProps={{ disabled: imageUploading }} onOk={() => void publish()} onCancel={() => void closeEditor()} destroyOnHidden>
<Form form={form} layout="vertical" className="pt-3" requiredMark={false}>
<Form.Item name="title" label="公告标题" rules={[{ required: true, whitespace: true, message: "请填写公告标题" }, { max: 120, message: "标题不能超过 120 个字符" }]}>
<Input maxLength={120} showCount placeholder="例如：视频模型已恢复正常使用" />
@@ -192,6 +270,21 @@ export default function AdminAnnouncementsPanel() {
<Form.Item name="pinned" label="展示方式" valuePropName="checked" extra="置顶公告会优先展示。">
<Switch checkedChildren="置顶" unCheckedChildren="普通" />
</Form.Item>
<Form.Item name="imageResourceId" hidden><Input /></Form.Item>
<Form.Item label="公告配图" extra="可选，真实图片文件不超过 10MB；取消、替换或移除时会回收未发布草稿。">
<div className="space-y-2">
{imagePreviewUrl ? (
<div className="relative flex min-h-28 items-center justify-center overflow-hidden rounded-md border border-border/70 bg-muted/20 p-2">
<img src={imagePreviewUrl} alt="公告配图预览" className="max-h-44 w-full object-contain" />
<Button type="text" size="small" danger disabled={imageUploading} icon={<X className="size-3.5" />} className="!absolute right-1 top-1 !size-7 !min-w-7 !p-0" onClick={() => void clearAnnouncementImage()} aria-label="移除公告配图" title="移除公告配图" />
</div>
) : <div className="flex min-h-24 items-center justify-center rounded-md border border-dashed border-border/80 bg-muted/10 text-xs text-foreground/45">暂未添加配图</div>}
<input ref={imageInputRef} type="file" accept="image/*" className="hidden" onChange={(event) => void uploadAnnouncementImage(event)} />
<Button icon={<Upload className="size-3.5" />} loading={imageUploading} onClick={() => imageInputRef.current?.click()}>
{imagePreviewUrl ? "更换配图" : "上传配图"}
</Button>
</div>
</Form.Item>
<Form.Item name="content" label="公告正文" rules={[{ required: true, whitespace: true, message: "请填写公告正文" }, { max: 4000, message: "正文不能超过 4000 个字符" }]}>
<Input.TextArea maxLength={4000} showCount autoSize={{ minRows: 6, maxRows: 12 }} placeholder="填写服务状态、影响范围和用户需要采取的操作" />
</Form.Item>