model Comment {
  id        String   @id @default(uuid())
  content   String

  parentId  String?
  parent    Comment?  @relation("CommentReplies", fields: [parentId], references: [id], onDelete: Cascade)
  replies   Comment[] @relation("CommentReplies")

  depth      Int    @default(0)
  path       String @default("") @db.VarChar(2000)
  sortKey    String @default("") @db.VarChar(500)
  replyCount Int    @default(0)

  @@index([parentId])
  @@index([postId, status, sortKey])
  @@index([pageId, status, sortKey])
  @@index([path])
}

let depth = 0;
let path = "";
let parentSortKey = "";

if (parentId) {
  const parentComment = await prisma.comment.findUnique({
    where: { id: parentId },
    select: { depth: true, path: true, sortKey: true },
  });

  depth = parentComment.depth + 1;
  parentSortKey = parentComment.sortKey;
}

const record = await prisma.comment.create({
  data: {
    content,
    parentId: parentId || null,
    depth,
    path: "",
    sortKey: "pending",
    replyCount: 0,
  },
  select: { id: true },
});

path = parentId
  ? `${parentComment.path}/${record.id}`
  : record.id;

const finalSortKey = parentId
  ? `${parentSortKey}.${record.id}`
  : record.id;

await prisma.comment.update({
  where: { id: record.id },
  data: { path, sortKey: finalSortKey },
});

a

a/b

a/b/c

const comment = { path: "a", postId: "test" };

const descendantCount = await prisma.comment.findMany({
  where: {
    postId: comment.postId,
    path: { startsWith: comment.path + "/" },
    deletedAt: null,
  },
});

const rootWhere: Prisma.CommentWhereInput = {
  postId: target.id,
  deletedAt: null,
  parentId: null,
  ...(cursor ? { sortKey: { gt: cursor } } : {}),
};

const rootComments = await prisma.comment.findMany({
  where: rootWhere,
  orderBy: { sortKey: "asc" },
  take: pageSize + 1,
  select: commentSelect,
});

const where: Prisma.CommentWhereInput = {
  postId: target.id,
  deletedAt: null,
  parentId,
  depth: parentDepth + 1,
  ...(cursor ? { sortKey: { gt: cursor } } : {}),
};

const children = await prisma.comment.findMany({
  where,
  orderBy: { sortKey: "asc" },
  take: pageSize + 1,
  select: commentSelect,
});

const descendantCount = await prisma.comment.count({
  where: {
    postId: comment.postId,
    path: { startsWith: comment.path + "/" },
    deletedAt: null,
  },
});

"use client";

import { useMemo, useState } from "react";

type CommentItem = {
  id: string;
  parentId: string | null;
  content: string;
  depth: number;
  path: string;
  sortKey: string;
  replyCount: number;
  author: {
    displayName: string;
  };
};

function isHiddenByCollapse(
  comment: CommentItem,
  collapsedIds: Set<string>,
  commentsMap: Map<string, CommentItem>,
) {
  for (const collapsedId of collapsedIds) {
    const collapsed = commentsMap.get(collapsedId);
    if (collapsed && comment.path.startsWith(`${collapsed.path}/`)) {
      return true;
    }
  }
  return false;
}

export default function TreeComments({
  initialComments,
}: {
  initialComments: CommentItem[];
}) {
  const [collapsedIds, setCollapsedIds] = useState<Set<string>>(new Set());

  const comments = useMemo(
    () =>
      [...initialComments].sort((a, b) =>
        a.sortKey.localeCompare(b.sortKey),
      ),
    [initialComments],
  );

  const commentsMap = useMemo(
    () => new Map(comments.map((comment) => [comment.id, comment])),
    [comments],
  );

  const visibleComments = useMemo(() => {
    return comments.filter((comment) => {
      return !isHiddenByCollapse(comment, collapsedIds, commentsMap);
    });
  }, [comments, collapsedIds, commentsMap]);

  const toggleCollapse = (commentId: string) => {
    setCollapsedIds((prev) => {
      const next = new Set(prev);
      if (next.has(commentId)) {
        next.delete(commentId);
      } else {
        next.add(commentId);
      }
      return next;
    });
  };

  return (
    <div>
      {visibleComments.map((comment) => {
        const hasChildren = comment.replyCount > 0;
        const isCollapsed = collapsedIds.has(comment.id);

        return (
          <article
            key={comment.id}
            style={{ paddingLeft: `${comment.depth * 24}px` }}
          >
            <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
              <strong>{comment.author.displayName}</strong>
              {hasChildren ? (
                <button onClick={() => toggleCollapse(comment.id)}>
                  {isCollapsed ? "展开回复" : "折叠回复"}
                </button>
              ) : null}
            </div>
            <p>{comment.content}</p>
          </article>
        );
      })}
    </div>
  );
}

A
| B
| | C
| D
E

A
A.B
A.B.C
A.D
E

A
A.B
A.B.C
A.D
E

type TreeComment = Comment & {
  children: TreeComment[];
};