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:06:11 +08:00
parent d84b2b69cc
commit bf37e45dae
8 changed files with 84 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/components/ui/aceternity/announcement-timeline-modal.tsx
View File

@@ -1,6 +1,6 @@
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { Modal } from "antd";
import { Bell, BellOff, CircleAlert, Info, ShieldAlert, Wrench } from "lucide-react";
import { Bell, BellOff, CircleAlert, Info, Pin, ShieldAlert, Wrench } from "lucide-react";
import { aceternityMotion } from "@/lib/aceternity-motion";
import { AnnouncementContent } from "@/components/ui/announcement-content";
@@ -108,6 +108,7 @@ function AnnouncementTimelineItem({ announcement, last, reducedMotion }: { annou
<div className="flex flex-wrap items-center gap-x-2 gap-y-1">
<h3 className="text-[var(--fs-body-lg)] font-semibold leading-6 tracking-normal text-foreground sm:text-base">{announcement.title}</h3>
<span className="inline-flex items-center gap-1 text-[var(--fs-label)] font-medium text-foreground/45"><Icon className="size-3" />{meta.label}</span>
{announcement.pinned ? <span className="inline-flex items-center gap-1 text-[var(--fs-label)] font-medium text-amber-500"><Pin className="size-3" />置顶</span> : null}
</div>
<AnnouncementContent content={announcement.content} className="mt-1 text-sm leading-6 text-foreground/75 sm:text-[var(--fs-body-lg)]" />
<time dateTime={announcement.publishedAt} className="mt-2 block text-xs tabular-nums text-foreground/40">{relativeTime(announcement.publishedAt)} · {formatDateTime(announcement.publishedAt)}</time>

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

@@ -1,6 +1,6 @@
import { App, Button, Form, Input, Modal, Select } from "antd";
import { App, Button, Form, Input, Modal, Select, Switch, Tag } from "antd";
import type { ColumnsType } from "antd/es/table";
import { Plus, Search } from "lucide-react";
import { Pin, Plus, Search } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { PaginationBar } from "@/components/layout/workspace-page";
@@ -20,6 +20,7 @@ type AnnouncementFormValues = {
title: string;
content: string;
level: AnnouncementLevel;
pinned: boolean;
};
const levelOptions: Array<{ value: AnnouncementLevel; label: string }> = [
@@ -71,13 +72,13 @@ export default function AdminAnnouncementsPanel() {
const openPublishModal = () => {
setEditingAnnouncement(null);
form.setFieldsValue({ title: "", content: "", level: "info" });
form.setFieldsValue({ title: "", content: "", level: "info", pinned: false });
setModalOpen(true);
};
const openEditModal = (announcement: SystemAnnouncement) => {
setEditingAnnouncement(announcement);
form.setFieldsValue({ title: announcement.title, content: announcement.content, level: announcement.level });
form.setFieldsValue({ title: announcement.title, content: announcement.content, level: announcement.level, pinned: announcement.pinned });
setModalOpen(true);
};
@@ -85,7 +86,7 @@ export default function AdminAnnouncementsPanel() {
const values = await form.validateFields();
setPublishing(true);
try {
const input = { title: values.title.trim(), content: values.content.trim(), level: values.level };
const input = { title: values.title.trim(), content: values.content.trim(), level: values.level, pinned: Boolean(values.pinned) };
if (editingAnnouncement) await updateAdminAnnouncement(editingAnnouncement.id, input);
else await createAdminAnnouncement(input);
setModalOpen(false);
@@ -125,6 +126,12 @@ export default function AdminAnnouncementsPanel() {
</div>
),
},
{
title: "置顶",
dataIndex: "pinned",
width: 90,
render: (pinned: boolean) => pinned ? <Tag color="gold" icon={<Pin className="size-3" />}>置顶</Tag> : <span className="text-foreground/35">--</span>,
},
{
title: "级别",
dataIndex: "level",
@@ -182,6 +189,9 @@ export default function AdminAnnouncementsPanel() {
<Form.Item name="level" label="公告级别" rules={[{ required: true, message: "请选择公告级别" }]}>
<Select options={levelOptions} />
</Form.Item>
<Form.Item name="pinned" label="展示方式" valuePropName="checked" extra="置顶公告会优先展示。">
<Switch checkedChildren="置顶" unCheckedChildren="普通" />
</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>

5
web/src/services/api/announcements.ts
View File

@@ -8,6 +8,7 @@ export type SystemAnnouncement = {
title: string;
content: string;
level: AnnouncementLevel;
pinned: boolean;
status: AnnouncementStatus;
createdBy: string;
publishedAt: string;
@@ -42,11 +43,11 @@ export function listAdminAnnouncements(params: AdminAnnouncementListParams = {})
return request<{ announcements: SystemAnnouncement[]; total: number; page: number; limit: number }>(api.get("/admin/announcements", { params }));
}
export function createAdminAnnouncement(input: { title: string; content: string; level: AnnouncementLevel }) {
export function createAdminAnnouncement(input: { title: string; content: string; level: AnnouncementLevel; pinned: boolean }) {
return request<{ announcement: SystemAnnouncement }>(api.post("/admin/announcements", input));
}
export function updateAdminAnnouncement(id: string, input: { title: string; content: string; level: AnnouncementLevel }) {
export function updateAdminAnnouncement(id: string, input: { title: string; content: string; level: AnnouncementLevel; pinned: boolean }) {
return request<{ announcement: SystemAnnouncement }>(api.patch(`/admin/announcements/${encodeURIComponent(id)}`, input));
}