From 4f07daae9ec3b4e4cb0a8cd35a6e0c1a4b593f29 Mon Sep 17 00:00:00 2001 From: Rou <76741805+Rou325@users.noreply.github.com> Date: Sat, 29 Aug 2026 19:32:13 +0800 Subject: [PATCH] =?UTF-8?q?feat(announcement):=20=E6=94=AF=E6=8C=81=20Mark?= =?UTF-8?q?down=20=E9=A2=84=E8=A7=88=E5=90=8E=E5=86=8D=E5=8F=91=E5=B8=83?= =?UTF-8?q?=20(#342)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ui/announcement-content.tsx | 83 +++++-------------- .../components/admin-announcements-panel.tsx | 60 ++++++++++++-- 2 files changed, 76 insertions(+), 67 deletions(-) diff --git a/web/src/components/ui/announcement-content.tsx b/web/src/components/ui/announcement-content.tsx index 3eebd4ffc..0f71f739a 100644 --- a/web/src/components/ui/announcement-content.tsx +++ b/web/src/components/ui/announcement-content.tsx @@ -1,4 +1,5 @@ -import { Fragment, createElement, type ReactNode } from "react"; +import ReactMarkdown from "react-markdown"; +import remarkGfm from "remark-gfm"; import { cn } from "@/lib/utils"; @@ -7,72 +8,32 @@ type AnnouncementContentProps = { className?: string; }; -const elementMap = { - a: "a", - b: "strong", - blockquote: "blockquote", - br: "br", - code: "code", - del: "del", - div: "div", - em: "em", - i: "em", - li: "li", - mark: "mark", - ol: "ol", - p: "p", - s: "s", - strong: "strong", - u: "u", - ul: "ul", -} as const; - -const ignoredTags = new Set(["iframe", "object", "script", "style", "svg", "template"]); - /** - * 公告由管理员输入但会在所有用户页面展示，因此只将受控标签转换成 React 节点，避免直接注入 HTML。 + * 公告由管理员输入但会在所有用户页面展示，因此不启用原始 HTML，避免直接注入 HTML。 * 链接强制新窗口打开，并且只允许 http/https 协议。 */ export function AnnouncementContent({ content, className }: AnnouncementContentProps) { - return
{parseAnnouncementContent(content)}
; + return ( +
+ { + const safeURL = safeHref(href); + return safeURL ? {children} : <>{children}; + }, + table: ({ children }) =>
{children}
, + }} + > + {content} + +
+ ); } -function parseAnnouncementContent(content: string): ReactNode { - if (typeof DOMParser === "undefined") return content; - - const document = new DOMParser().parseFromString(content, "text/html"); - return Array.from(document.body.childNodes).map((node, index) => renderNode(node, `announcement-${index}`)); -} - -function renderNode(node: ChildNode, key: string): ReactNode { - if (node.nodeType === Node.TEXT_NODE) { - return {node.textContent}; - } - if (node.nodeType !== Node.ELEMENT_NODE) return null; - - const element = node as HTMLElement; - const tag = element.tagName.toLowerCase(); - if (ignoredTags.has(tag)) return null; - - const children = Array.from(element.childNodes).map((child, index) => renderNode(child, `${key}-${index}`)); - if (!(tag in elementMap)) return {children}; - - if (tag === "a") { - const href = safeHref(element.getAttribute("href")); - if (!href) return {children}; - return ( - - {children} - - ); - } - - const component = elementMap[tag as keyof typeof elementMap]; - return createElement(component, { key }, children); -} - -function safeHref(value: string | null) { - if (!value) return null; +function safeHref(value?: string) { + if (!value || typeof window === "undefined") return null; try { const url = new URL(value, window.location.href); return url.protocol === "http:" || url.protocol === "https:" ? url.href : null; diff --git a/web/src/pages/admin/components/admin-announcements-panel.tsx b/web/src/pages/admin/components/admin-announcements-panel.tsx index 834413273..c7769d253 100644 --- a/web/src/pages/admin/components/admin-announcements-panel.tsx +++ b/web/src/pages/admin/components/admin-announcements-panel.tsx @@ -1,9 +1,11 @@ -import { App, Button, Form, Input, Modal, Select, Switch, Tag } from "antd"; +import { App, Button, Form, Input, Modal, Select, Segmented, Switch, Tag } from "antd"; +import type { FormInstance } from "antd"; import type { ColumnsType } from "antd/es/table"; -import { Pin, Plus, Search, Upload, X } from "lucide-react"; +import { Eye, Pencil, 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 { AnnouncementContent } from "@/components/ui/announcement-content"; import { useDebouncedValue } from "@/hooks/use-debounced-value"; import { announcementImageUrl, @@ -60,6 +62,7 @@ export default function AdminAnnouncementsPanel() { const [imagePreviewUrl, setImagePreviewUrl] = useState(""); const [draftImageResourceId, setDraftImageResourceId] = useState(""); const [imageUploading, setImageUploading] = useState(false); + const [editorMode, setEditorMode] = useState<"edit" | "preview">("edit"); const imageInputRef = useRef(null); const reload = useCallback(async () => { @@ -84,6 +87,7 @@ export default function AdminAnnouncementsPanel() { form.setFieldsValue({ title: "", content: "", imageResourceId: "", level: "info", pinned: false }); setImagePreviewUrl(""); setDraftImageResourceId(""); + setEditorMode("edit"); setModalOpen(true); }; @@ -92,6 +96,7 @@ export default function AdminAnnouncementsPanel() { form.setFieldsValue({ title: announcement.title, content: announcement.content, imageResourceId: announcement.imageResourceId || "", level: announcement.level, pinned: announcement.pinned }); setImagePreviewUrl(announcementImageUrl(announcement)); setDraftImageResourceId(""); + setEditorMode("edit"); setModalOpen(true); }; @@ -259,8 +264,19 @@ export default function AdminAnnouncementsPanel() { footer={ { setPage(nextPageSize !== pageSize ? 1 : nextPage); setPageSize(nextPageSize); }} />} /> - void publish()} onCancel={() => void closeEditor()} destroyOnHidden> -
+ void publish()} onCancel={() => void closeEditor()} destroyOnHidden> +
+ setEditorMode(value as "edit" | "preview")} + options={[ + { value: "edit", label: 编辑 }, + { value: "preview", label: 预览 }, + ]} + /> +
+ {editorMode === "preview" ? : null} + @@ -285,8 +301,13 @@ export default function AdminAnnouncementsPanel() { - - + +
@@ -294,6 +315,33 @@ export default function AdminAnnouncementsPanel() { ); } +function AnnouncementDraftPreview({ form, imagePreviewUrl }: { form: FormInstance; imagePreviewUrl: string }) { + const title = Form.useWatch("title", form) || "未填写标题"; + const content = Form.useWatch("content", form) || "暂未填写公告正文"; + const level = Form.useWatch("level", form) || "info"; + const pinned = Form.useWatch("pinned", form); + const meta = levelMeta[level as AnnouncementLevel] || levelMeta.info; + + return ( +
+
+
+
+ + {pinned ? 置顶 : null} +
+ 预览效果 +
+
+

{title}

+ {imagePreviewUrl ? 公告配图预览 : null} + +
+
+
+ ); +} + function formatDateTime(value: string) { const date = new Date(value); if (Number.isNaN(date.getTime())) return "--";