feat(comments): 软删占位、理由与恢复，管理删仅对访客打码

自删/管理删差异文案与理由可见性，评论者与管理员免马赛克，并支持恢复与处理人链接。

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/app/admin/content/ContentAdmin.tsx

@@ -35,6 +35,7 @@ import { toast } from "@/lib/toast";
 import Avatar from "@/components/Avatar";
 import ConfirmDialog from "@/components/ConfirmDialog";
 import StaffDeletePostModal from "@/components/StaffDeletePostModal";
+import DeleteCommentModal from "@/components/DeleteCommentModal";
 
 const PAGE_SIZE = 15;
 
@@ -142,6 +143,8 @@ export default function ContentAdmin({
   const [confirmBusy, setConfirmBusy] = useState(false);
   const [staffDeletePost, setStaffDeletePost] = useState<AdminContentPost | null>(null);
   const [staffDeleteBusy, setStaffDeleteBusy] = useState(false);
+  const [staffDeleteComment, setStaffDeleteComment] = useState<AdminContentComment | null>(null);
+  const [staffDeleteCommentBusy, setStaffDeleteCommentBusy] = useState(false);
 
   const refreshCounts = useCallback(() => {
     apiAdminContentCounts().then(setCounts).catch(() => {});
@@ -605,18 +608,7 @@ export default function ContentAdmin({
                       type="button"
                       className="btn btn-line btn-sm"
                       disabled={busy}
-                      onClick={() =>
-                        askConfirm(
-                          "移入回收站",
-                          "确定软删这条评论吗？可在「已删除」中恢复。",
-                          () =>
-                            apiAdminSoftDeleteComment(c.id).then(() => {
-                              toast("已移入回收站", "ok");
-                              reload(commentsPage);
-                            }),
-                          true
-                        )
-                      }
+                      onClick={() => setStaffDeleteComment(c)}
                     >
                       <Trash2 size={14} /> 删除
                     </button>
@@ -702,6 +694,25 @@ export default function ContentAdmin({
             .finally(() => setStaffDeleteBusy(false));
         }}
       />
+
+      <DeleteCommentModal
+        open={!!staffDeleteComment}
+        mode="staff"
+        busy={staffDeleteCommentBusy}
+        onClose={() => !staffDeleteCommentBusy && setStaffDeleteComment(null)}
+        onConfirm={(opts) => {
+          if (!staffDeleteComment) return;
+          setStaffDeleteCommentBusy(true);
+          apiAdminSoftDeleteComment(staffDeleteComment.id, opts)
+            .then(() => {
+              toast("已移入回收站", "ok");
+              setStaffDeleteComment(null);
+              reload(commentsPage);
+            })
+            .catch((e) => toast(e instanceof Error ? e.message : "操作失败"))
+            .finally(() => setStaffDeleteCommentBusy(false));
+        }}
+      />
     </div>
   );
 }

frontend/app/globals.css

@@ -2154,6 +2154,161 @@ html.dark .prose-content pre[data-theme] span {
   font-size: 13.5px;
 }
 
+/* 软删占位：头像/昵称马赛克，可读结构但不可辨认身份 */
+.cmt-mosaic-avatar {
+  position: relative;
+  display: inline-flex;
+  border-radius: 9999px;
+  overflow: hidden;
+  pointer-events: none;
+  user-select: none;
+  flex-shrink: 0;
+}
+.cmt-mosaic-avatar > * {
+  filter: blur(7px) saturate(0.35) contrast(0.9);
+  transform: scale(1.2);
+}
+.cmt-mosaic-avatar::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-image:
+    repeating-linear-gradient(
+      0deg,
+      color-mix(in srgb, var(--ink) 18%, transparent) 0 1px,
+      transparent 1px 3px
+    ),
+    repeating-linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--ink) 18%, transparent) 0 1px,
+      transparent 1px 3px
+    );
+  mix-blend-mode: soft-light;
+  pointer-events: none;
+}
+.cmt-mosaic-name {
+  display: inline-block;
+  max-width: 9rem;
+  overflow: hidden;
+  white-space: nowrap;
+  filter: blur(5px);
+  letter-spacing: 0.04em;
+  user-select: none;
+  pointer-events: none;
+  transform: scaleY(1.05);
+}
+.cmt-tombstone {
+  border-radius: 12px;
+  padding: 10px 12px;
+  background: var(--panel-2);
+  border: 1px dashed color-mix(in srgb, var(--ink-3) 45%, var(--line));
+}
+.cmt-tombstone-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ink-2);
+}
+.cmt-tombstone-reason {
+  margin-top: 6px;
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: var(--ink-3);
+}
+.cmt-tombstone-tag {
+  display: inline-flex;
+  align-items: center;
+  margin-top: 8px;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  font-size: 11px;
+  font-weight: 600;
+  background: color-mix(in srgb, var(--danger) 12%, var(--panel));
+  color: var(--danger);
+}
+.cmt-tombstone-tag-self {
+  background: color-mix(in srgb, var(--ink-3) 16%, var(--panel));
+  color: var(--ink-3);
+}
+.cmt-tombstone-audit {
+  margin-top: 8px;
+  padding: 8px 10px;
+  border-radius: 10px;
+  border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--line));
+  background: color-mix(in srgb, var(--accent-soft) 55%, var(--panel));
+}
+.cmt-tombstone-audit-label {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: var(--accent);
+}
+.cmt-tombstone-orig {
+  margin-top: 8px;
+  padding: 8px 10px;
+  border-radius: 10px;
+  border: 1px solid var(--line);
+  background: var(--panel);
+}
+.cmt-tombstone-orig .prose-comment {
+  font-size: 13px;
+  opacity: 0.92;
+}
+.cmt-tombstone-mod {
+  margin-top: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  font-size: 12.5px;
+  color: var(--ink-2);
+}
+.cmt-tombstone-mod a {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--accent);
+  font-weight: 600;
+}
+.cmt-tombstone-mod a:hover {
+  text-decoration: underline;
+}
+
+/* 评论管理操作：紧凑文字按钮组，取代孤立图标 */
+.cmt-mod-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  border-radius: 10px;
+  background: var(--panel-2);
+  border: 1px solid var(--line);
+}
+.cmt-mod-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 10px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--ink-2);
+  transition: background 0.15s, color 0.15s;
+}
+.cmt-mod-btn:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--danger) 10%, var(--panel));
+  color: var(--danger);
+}
+.cmt-mod-btn:disabled {
+  opacity: 0.5;
+}
+.cmt-mod-btn-danger:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--danger) 16%, var(--panel));
+  color: var(--danger);
+}
+
 @media (max-width: 640px) {
   .cmt-replies-wrap {
     padding: 4px 8px;