feat(frontend): support markdown in dashboard announcements (#176)

## Summary - render dashboard announcements with Markdown using `react-markdown` + `remark-gfm` while sanitizing output with `rehype-sanitize` - add styled Markdown element mappings in the announcement banner for links, lists, code blocks, and blockquotes - update announcement management hint text to communicate Markdown support in the config page ## Verification - npm run build (vite-frontend)
2026-09-29 07:56:37 +08:00 · 2026-02-21 16:50:19 +08:00
parent 66ad52c199 fb2189c924
commit 0cb3263a2e
9 changed files with 136 additions and 174 deletions
@@ -268,3 +268,6 @@ sql/
 !go-backend/internal/store/postgres/sql/
 !go-backend/internal/store/postgres/sql/schema.sql
 !go-backend/internal/store/postgres/sql/data.sql
+go-backend/gost.db-shm
+.gitignore
+go-backend/gost.db-wal
@@ -13,6 +13,8 @@
    "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
+    "@internationalized/date": "^3.10.0",
+    "@marsidev/react-turnstile": "^1.1.0",
    "@radix-ui/react-accordion": "^1.2.0",
    "@radix-ui/react-checkbox": "^1.1.0",
    "@radix-ui/react-dialog": "^1.1.0",
@@ -25,8 +27,6 @@
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-switch": "^1.1.0",
    "@radix-ui/react-tabs": "^1.1.0",
-    "@marsidev/react-turnstile": "^1.1.0",
-    "@internationalized/date": "^3.10.0",
    "@react-aria/i18n": "^3.12.12",
    "@react-aria/visually-hidden": "3.8.25",
    "@react-types/shared": "3.30.0",
@@ -43,8 +43,11 @@
    "react-dom": "18.3.1",
    "react-hot-toast": "^2.5.2",
    "react-is": "^19.2.4",
+    "react-markdown": "^10.1.0",
    "react-router-dom": "6.30.3",
    "recharts": "^3.1.1",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.1",
    "sonner": "^2.0.6",
    "tailwind-merge": "^2.5.5",
    "tailwind-variants": "1.0.0",
@@ -700,13 +700,16 @@ export default function ConfigPage() {
              <Textarea
                label="公告内容"
                minRows={4}
-                placeholder="请输入公告内容"
+                placeholder="支持 Markdown，例如：**加粗**、[链接](https://example.com)、- 列表"
                value={announcement.content}
                variant="bordered"
                onChange={(e) =>
                  setAnnouncement({ ...announcement, content: e.target.value })
                }
              />
+              <p className="text-xs text-gray-500 dark:text-gray-400">
+                公告支持 Markdown 语法，链接会在新标签页打开
+              </p>

              <div className="flex justify-end">
                <Button
@@ -1,4 +1,7 @@
 import type { AnnouncementData } from "@/api";
+import ReactMarkdown from "react-markdown";
+import rehypeSanitize from "rehype-sanitize";
+import remarkGfm from "remark-gfm";

 import { Card, CardBody } from "@/shadcn-bridge/heroui/card";

@@ -14,13 +17,13 @@ export const AnnouncementBanner = ({
  }

  return (
-    <Card className="mb-4 lg:mb-6 border border-blue-200 dark:border-blue-500/30 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-500/10 dark:to-purple-500/10">
-      <CardBody className="p-4">
-        <div className="flex items-start justify-start gap-3.5">
-          <div className="w-10 h-10 bg-blue-100 dark:bg-blue-500/20 rounded-lg flex-shrink-0 flex items-center justify-center mt-0.5">
+    <Card className="mb-4 lg:mb-6 border border-blue-100 dark:border-blue-500/20 bg-gradient-to-br from-blue-50/80 to-indigo-50/80 dark:from-blue-500/5 dark:to-indigo-500/5 shadow-sm">
+      <CardBody className="p-4 sm:p-5">
+        <div className="flex items-center gap-3.5 sm:gap-4">
+          <div className="w-10 h-10 sm:w-11 sm:h-11 bg-white dark:bg-blue-500/10 rounded-full flex-shrink-0 flex items-center justify-center shadow-sm border border-blue-100 dark:border-blue-500/20">
            <svg
              aria-hidden="true"
-              className="w-5 h-5 text-blue-600 dark:text-blue-400"
+              className="w-5 h-5 sm:w-5 sm:h-5 text-blue-500 dark:text-blue-400"
              fill="currentColor"
              viewBox="0 0 20 20"
            >
@@ -31,13 +34,52 @@ export const AnnouncementBanner = ({
              />
            </svg>
          </div>
-          <div className="flex-1 min-w-0 pt-0.5">
-            <h3 className="text-base font-semibold leading-none text-blue-900 dark:text-blue-100 mb-1.5">
+          <div className="flex-1 min-w-0">
+            <h3 className="text-[15px] font-semibold text-blue-900 dark:text-blue-100 tracking-wide mb-1 sm:mb-1.5 mt-1.5">
              公告
            </h3>
-            <p className="text-sm text-blue-800 dark:text-blue-200 whitespace-pre-wrap break-words leading-relaxed">
-              {announcement.content}
-            </p>
+            <div className="text-sm text-blue-800/90 dark:text-blue-100/90 break-words leading-relaxed">
+              <ReactMarkdown
+                rehypePlugins={[rehypeSanitize]}
+                remarkPlugins={[remarkGfm]}
+                components={{
+                  p: ({ children }) => <p className="mb-2 last:mb-0">{children}</p>,
+                  a: ({ children, href }) => (
+                    <a
+                      className="underline decoration-blue-500/70 underline-offset-2 hover:text-blue-700 dark:hover:text-blue-100"
+                      href={href}
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      {children}
+                    </a>
+                  ),
+                  ul: ({ children }) => (
+                    <ul className="list-disc pl-5 space-y-1 mb-2 last:mb-0">{children}</ul>
+                  ),
+                  ol: ({ children }) => (
+                    <ol className="list-decimal pl-5 space-y-1 mb-2 last:mb-0">{children}</ol>
+                  ),
+                  code: ({ children }) => (
+                    <code className="rounded bg-blue-100/80 dark:bg-blue-900/40 px-1 py-0.5 text-[0.92em]">
+                      {children}
+                    </code>
+                  ),
+                  pre: ({ children }) => (
+                    <pre className="mb-2 overflow-x-auto rounded-md bg-blue-100/70 dark:bg-blue-900/40 p-2.5 text-xs leading-relaxed">
+                      {children}
+                    </pre>
+                  ),
+                  blockquote: ({ children }) => (
+                    <blockquote className="mb-2 border-l-2 border-blue-300/80 dark:border-blue-500/60 pl-3 italic">
+                      {children}
+                    </blockquote>
+                  ),
+                }}
+              >
+                {announcement.content}
+              </ReactMarkdown>
+            </div>
          </div>
        </div>
      </CardBody>
@@ -1934,34 +1934,14 @@ export default function ForwardPage() {
          </div>
        ) : (
          /* 空状态 */
-          <Card className="shadow-sm border border-gray-200 dark:border-gray-700">
-            <CardBody className="text-center py-16">
-              <div className="flex flex-col items-center gap-4">
-                <div className="w-16 h-16 bg-default-100 rounded-full flex items-center justify-center">
-                  <svg
-                    aria-hidden="true"
-                    className="w-8 h-8 text-default-400"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M8 9l4-4 4 4m0 6l-4 4-4-4"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={1.5}
-                    />
-                  </svg>
-                </div>
-                <div>
-                  <h3 className="text-lg font-semibold text-foreground">
-                    暂无转发配置
-                  </h3>
-                  <p className="text-default-500 text-sm mt-1">
-                    还没有创建任何转发配置，点击上方按钮开始创建
-                  </p>
-                </div>
-              </div>
+          <Card className="shadow-sm border border-gray-200 dark:border-gray-700 bg-default-50/50">
+            <CardBody className="text-center py-20 flex flex-col items-center justify-center min-h-[240px]">
+              <h3 className="text-xl font-medium text-foreground tracking-tight mb-2">
+                暂无转发配置
+              </h3>
+              <p className="text-default-500 text-sm max-w-xs mx-auto leading-relaxed">
+                还没有创建任何转发配置，点击上方按钮开始创建
+              </p>
            </CardBody>
          </Card>
        )
@@ -1988,34 +1968,14 @@ export default function ForwardPage() {
          </DndContext>
        ) : (
          /* 空状态 */
-          <Card className="shadow-sm border border-gray-200 dark:border-gray-700">
-            <CardBody className="text-center py-16">
-              <div className="flex flex-col items-center gap-4">
-                <div className="w-16 h-16 bg-default-100 rounded-full flex items-center justify-center">
-                  <svg
-                    aria-hidden="true"
-                    className="w-8 h-8 text-default-400"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M8 9l4-4 4 4m0 6l-4 4-4-4"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={1.5}
-                    />
-                  </svg>
-                </div>
-                <div>
-                  <h3 className="text-lg font-semibold text-foreground">
-                    暂无转发配置
-                  </h3>
-                  <p className="text-default-500 text-sm mt-1">
-                    还没有创建任何转发配置，点击上方按钮开始创建
-                  </p>
-                </div>
-              </div>
+          <Card className="shadow-sm border border-gray-200 dark:border-gray-700 bg-default-50/50">
+            <CardBody className="text-center py-20 flex flex-col items-center justify-center min-h-[240px]">
+              <h3 className="text-xl font-medium text-foreground tracking-tight mb-2">
+                暂无转发配置
+              </h3>
+              <p className="text-default-500 text-sm max-w-xs mx-auto leading-relaxed">
+                还没有创建任何转发配置，点击上方按钮开始创建
+              </p>
            </CardBody>
          </Card>
        )}
@@ -334,34 +334,14 @@ export default function LimitPage() {
        </div>
      ) : (
        /* 空状态 */
-        <Card className="shadow-sm border border-gray-200 dark:border-gray-700">
-          <CardBody className="text-center py-16">
-            <div className="flex flex-col items-center gap-4">
-              <div className="w-16 h-16 bg-default-100 rounded-full flex items-center justify-center">
-                <svg
-                  aria-hidden="true"
-                  className="w-8 h-8 text-default-400"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M12 6v6l4 2m6-6a9 9 0 11-18 0 9 9 0 0118 0z"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={1.5}
-                  />
-                </svg>
-              </div>
-              <div>
-                <h3 className="text-lg font-semibold text-foreground">
-                  暂无限速规则
-                </h3>
-                <p className="text-default-500 text-sm mt-1">
-                  还没有创建任何限速规则，点击上方按钮开始创建
-                </p>
-              </div>
-            </div>
+        <Card className="shadow-sm border border-gray-200 dark:border-gray-700 bg-default-50/50">
+          <CardBody className="text-center py-20 flex flex-col items-center justify-center min-h-[240px]">
+            <h3 className="text-xl font-medium text-foreground tracking-tight mb-2">
+              暂无限速规则
+            </h3>
+            <p className="text-default-500 text-sm max-w-xs mx-auto leading-relaxed">
+              还没有创建任何限速规则，点击上方按钮开始创建
+            </p>
          </CardBody>
        </Card>
      )}
@@ -410,7 +410,7 @@ export default function PanelSharingPage() {
        >
          <Card>
            <CardBody className="space-y-5">
-              <div className="flex flex-col gap-4 rounded-lg border border-divider bg-default-50/60 dark:bg-default-100/20 p-4 md:flex-row md:items-center md:justify-between">
+              <div className="mt-4 flex flex-col gap-4 rounded-lg border border-divider bg-default-50/60 dark:bg-default-100/20 p-4 md:flex-row md:items-center md:justify-between">
                <div className="space-y-1">
                  <h2 className="text-lg font-semibold text-foreground">
                    Provider 共享
@@ -555,7 +555,7 @@ export default function PanelSharingPage() {
        >
          <Card>
            <CardBody className="space-y-5">
-              <div className="flex flex-col gap-4 rounded-lg border border-divider bg-default-50/60 dark:bg-default-100/20 p-4 md:flex-row md:items-center md:justify-between">
+              <div className="mt-4 flex flex-col gap-4 rounded-lg border border-divider bg-default-50/60 dark:bg-default-100/20 p-4 md:flex-row md:items-center md:justify-between">
                <div className="space-y-1">
                  <h2 className="text-lg font-semibold text-foreground">
                    Consumer 接入
@@ -1014,34 +1014,14 @@ export default function TunnelPage() {
        </DndContext>
      ) : (
        /* 空状态 */
-        <Card className="shadow-sm border border-gray-200 dark:border-gray-700">
-          <CardBody className="text-center py-16">
-            <div className="flex flex-col items-center gap-4">
-              <div className="w-16 h-16 bg-default-100 rounded-full flex items-center justify-center">
-                <svg
-                  aria-hidden="true"
-                  className="w-8 h-8 text-default-400"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={1.5}
-                  />
-                </svg>
-              </div>
-              <div>
-                <h3 className="text-lg font-semibold text-foreground">
-                  暂无隧道配置
-                </h3>
-                <p className="text-default-500 text-sm mt-1">
-                  还没有创建任何隧道配置，点击上方按钮开始创建
-                </p>
-              </div>
-            </div>
+        <Card className="shadow-sm border border-gray-200 dark:border-gray-700 bg-default-50/50">
+          <CardBody className="text-center py-20 flex flex-col items-center justify-center min-h-[240px]">
+            <h3 className="text-xl font-medium text-foreground tracking-tight mb-2">
+              暂无隧道配置
+            </h3>
+            <p className="text-default-500 text-sm max-w-xs mx-auto leading-relaxed">
+              还没有创建任何隧道配置，点击上方按钮开始创建
+            </p>
          </CardBody>
        </Card>
      )}
@@ -57,7 +57,6 @@ import {
  SearchIcon,
  EditIcon,
  DeleteIcon,
-  UserIcon,
  SettingsIcon,
 } from "@/components/icons";
 import { PageLoadingState } from "@/components/page-state";
@@ -247,7 +246,7 @@ export default function UserPage() {
      if (response.code === 0) {
        setTunnels(Array.isArray(response.data) ? response.data : []);
      }
-    } catch {}
+    } catch { }
  };

  const loadSpeedLimits = async () => {
@@ -257,15 +256,15 @@ export default function UserPage() {
      if (response.code === 0) {
        const speedLimitList = Array.isArray(response.data)
          ? response.data.map((item) => ({
-              ...item,
-              uploadSpeed: item.uploadSpeed ?? item.speed ?? 0,
-              downloadSpeed: item.downloadSpeed ?? item.speed ?? 0,
-            }))
+            ...item,
+            uploadSpeed: item.uploadSpeed ?? item.speed ?? 0,
+            downloadSpeed: item.downloadSpeed ?? item.speed ?? 0,
+          }))
          : [];

        setSpeedLimits(speedLimitList);
      }
-    } catch {}
+    } catch { }
  };

  const loadUserGroups = async () => {
@@ -275,7 +274,7 @@ export default function UserPage() {
      if (response.code === 0) {
        setUserGroups(Array.isArray(response.data) ? response.data : []);
      }
-    } catch {}
+    } catch { }
  };

  const loadUserTunnels = async (userId: number) => {
@@ -326,7 +325,7 @@ export default function UserPage() {
      if (groupRes.code === 0) {
        currentGroupIds = groupRes.data || [];
      }
-    } catch {}
+    } catch { }

    setUserForm({
      id: user.id,
@@ -652,21 +651,14 @@ export default function UserPage() {
      {loading ? (
        <PageLoadingState message="正在加载..." />
      ) : users.length === 0 ? (
-        <Card className="shadow-sm border border-gray-200 dark:border-gray-700">
-          <CardBody className="text-center py-16">
-            <div className="flex flex-col items-center gap-4">
-              <div className="w-16 h-16 bg-default-100 rounded-full flex items-center justify-center">
-                <UserIcon className="w-8 h-8 text-default-400" />
-              </div>
-              <div>
-                <h3 className="text-lg font-semibold text-foreground">
-                  暂无用户数据
-                </h3>
-                <p className="text-default-500 text-sm mt-1">
-                  还没有创建任何用户，点击上方按钮开始创建
-                </p>
-              </div>
-            </div>
+        <Card className="shadow-sm border border-gray-200 dark:border-gray-700 bg-default-50/50">
+          <CardBody className="text-center py-20 flex flex-col items-center justify-center min-h-[240px]">
+            <h3 className="text-xl font-medium text-foreground tracking-tight mb-2">
+              暂无用户数据
+            </h3>
+            <p className="text-default-500 text-sm max-w-xs mx-auto leading-relaxed">
+              还没有创建任何用户，点击上方按钮开始创建
+            </p>
          </CardBody>
        </Card>
      ) : (
@@ -680,9 +672,9 @@ export default function UserPage() {
            const flowPercent =
              user.flow > 0
                ? Math.min(
-                    (usedFlow / (user.flow * 1024 * 1024 * 1024)) * 100,
-                    100,
-                  )
+                  (usedFlow / (user.flow * 1024 * 1024 * 1024)) * 100,
+                  100,
+                )
                : 0;

            return (
@@ -947,8 +939,8 @@ export default function UserPage() {
                value={
                  userForm.expTime
                    ? (parseDate(
-                        userForm.expTime.toISOString().split("T")[0],
-                      ) as any)
+                      userForm.expTime.toISOString().split("T")[0],
+                    ) as any)
                    : null
                }
                onChange={(date) => {
@@ -1054,12 +1046,11 @@ export default function UserPage() {
                          aria-disabled={isAssigned}
                          className={`
                            px-4 py-3 rounded-lg border transition-all duration-200 cursor-pointer
-                            ${
-                              isAssigned
-                                ? "bg-default-100/50 dark:bg-default-50/50 border-default-200/50 dark:border-default-100/20 opacity-60 cursor-not-allowed"
-                                : isSelected
-                                  ? "bg-primary-50 dark:bg-primary-900/20 border-primary-300 dark:border-primary-500/50 shadow-sm"
-                                  : "bg-white dark:bg-default-50 border-default-200 dark:border-default-100/30 hover:border-primary-200 dark:hover:border-primary-500/30 hover:shadow-sm"
+                            ${isAssigned
+                              ? "bg-default-100/50 dark:bg-default-50/50 border-default-200/50 dark:border-default-100/20 opacity-60 cursor-not-allowed"
+                              : isSelected
+                                ? "bg-primary-50 dark:bg-primary-900/20 border-primary-300 dark:border-primary-500/50 shadow-sm"
+                                : "bg-white dark:bg-default-50 border-default-200 dark:border-default-100/30 hover:border-primary-200 dark:hover:border-primary-500/30 hover:shadow-sm"
                            }
                          `}
                          role="button"
@@ -1119,13 +1110,13 @@ export default function UserPage() {
                                  selectedKeys={
                                    batchTunnelSelections.get(tunnel.id) !==
                                      null &&
-                                    batchTunnelSelections.get(tunnel.id) !==
+                                      batchTunnelSelections.get(tunnel.id) !==
                                      undefined
                                      ? [
-                                          batchTunnelSelections
-                                            .get(tunnel.id)!
-                                            .toString(),
-                                        ]
+                                        batchTunnelSelections
+                                          .get(tunnel.id)!
+                                          .toString(),
+                                      ]
                                      : ["null"]
                                  }
                                  size="sm"
@@ -1385,9 +1376,9 @@ export default function UserPage() {
                      setEditTunnelForm((prev) =>
                        prev
                          ? {
-                              ...prev,
-                              speedId: value === "null" ? null : Number(value),
-                            }
+                            ...prev,
+                            speedId: value === "null" ? null : Number(value),
+                          }
                          : null,
                      );
                    }}
@@ -1442,10 +1433,10 @@ export default function UserPage() {
                    value={
                      editTunnelForm.expTime
                        ? (parseDate(
-                            new Date(editTunnelForm.expTime)
-                              .toISOString()
-                              .split("T")[0],
-                          ) as any)
+                          new Date(editTunnelForm.expTime)
+                            .toISOString()
+                            .split("T")[0],
+                        ) as any)
                        : null
                    }
                    onChange={(date) => {