Add TKMind platform extensions, H5/MindSpace stack, and deployment tooling.

Fork goose with custom MCP widgets, platform extensions (aider, git, web, search),
MindSpace H5 backend/frontend, Plaza/Ops UIs, and deploy scripts for tkmind.cn.

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

ui/plaza/components/auth/LoginPrompt.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { mindSpaceSignupUrl } from '@/lib/utm';
+
+type LoginPromptProps = {
+  open: boolean;
+  onClose: () => void;
+  message?: string;
+};
+
+export function LoginPrompt({
+  open,
+  onClose,
+  message = '登录 MindSpace 后即可继续',
+}: LoginPromptProps) {
+  if (!open) return null;
+
+  const returnTo = typeof window !== 'undefined' ? window.location.href : undefined;
+  const loginUrl = mindSpaceSignupUrl({ medium: 'login_prompt', campaign: 'plaza_interaction', returnTo });
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 p-4 md:items-center"
+      role="dialog"
+      aria-modal="true"
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-md rounded-2xl border border-[#d6d0c3] bg-[#fffdf7] p-6 shadow-xl"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <h3 className="text-lg font-semibold text-[#17221d]">需要登录</h3>
+        <p className="mt-2 text-sm text-[#68716c]">{message}</p>
+        <div className="mt-5 flex gap-3">
+          <button
+            type="button"
+            onClick={onClose}
+            className="flex-1 rounded-full border border-[#d6d0c3] px-4 py-2.5 text-sm font-semibold text-[#4a5751]"
+          >
+            继续浏览
+          </button>
+          <a
+            href={loginUrl}
+            className="flex-1 rounded-full bg-[#2f6f57] px-4 py-2.5 text-center text-sm font-semibold text-white"
+          >
+            登录 / 注册
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

ui/plaza/components/comment/CommentInput.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { useState } from 'react';
+
+type CommentInputProps = {
+  placeholder?: string;
+  submitLabel?: string;
+  onSubmit: (content: string) => Promise<void>;
+  onCancel?: () => void;
+};
+
+export function CommentInput({
+  placeholder = '写下你的评论…',
+  submitLabel = '发布',
+  onSubmit,
+  onCancel,
+}: CommentInputProps) {
+  const [content, setContent] = useState('');
+  const [busy, setBusy] = useState(false);
+
+  const handleSubmit = async () => {
+    const trimmed = content.trim();
+    if (!trimmed || busy) return;
+    setBusy(true);
+    try {
+      await onSubmit(trimmed);
+      setContent('');
+      onCancel?.();
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      <textarea
+        value={content}
+        onChange={(event) => setContent(event.target.value)}
+        rows={3}
+        placeholder={placeholder}
+        className="w-full resize-none rounded-xl border border-[#d6d0c3] bg-white px-4 py-3 text-sm text-[#17221d] outline-none focus:border-[#2f6f57]"
+      />
+      <div className="flex justify-end gap-2">
+        {onCancel ? (
+          <button
+            type="button"
+            onClick={onCancel}
+            className="rounded-full border border-[#d6d0c3] px-4 py-2 text-sm text-[#68716c]"
+          >
+            取消
+          </button>
+        ) : null}
+        <button
+          type="button"
+          disabled={busy || !content.trim()}
+          onClick={handleSubmit}
+          className="rounded-full bg-[#2f6f57] px-5 py-2 text-sm font-semibold text-white disabled:opacity-50"
+        >
+          {busy ? '发送中…' : submitLabel}
+        </button>
+      </div>
+    </div>
+  );
+}

ui/plaza/components/comment/CommentList.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import type { PlazaComment } from '@/types/plaza';
+import { CommentThread } from '@/components/comment/CommentThread';
+
+type CommentListProps = {
+  postId: string;
+  comments: PlazaComment[];
+  onReply: (comment: PlazaComment) => void;
+  onToggleLike: (comment: PlazaComment) => void;
+};
+
+export function CommentList({ postId, comments, onReply, onToggleLike }: CommentListProps) {
+  if (comments.length === 0) {
+    return <p className="py-6 text-center text-sm text-[#8a928c]">暂无评论，来抢沙发吧</p>;
+  }
+
+  return (
+    <ul className="divide-y divide-[#ebe4d6]">
+      {comments.map((comment) => (
+        <li key={comment.id} className="py-4">
+          <CommentThread
+            postId={postId}
+            comment={comment}
+            onReply={onReply}
+            onToggleLike={onToggleLike}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}

ui/plaza/components/comment/CommentSection.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import type { PlazaComment } from '@/types/plaza';
+import { LoginPrompt } from '@/components/auth/LoginPrompt';
+import { CommentInput } from '@/components/comment/CommentInput';
+import { CommentList } from '@/components/comment/CommentList';
+import {
+  PlazaApiError,
+  createComment,
+  fetchComments,
+  toggleCommentLike,
+} from '@/lib/api';
+
+type CommentSectionProps = {
+  postId: string;
+  allowComment?: boolean;
+};
+
+export function CommentSection({ postId, allowComment = true }: CommentSectionProps) {
+  const [comments, setComments] = useState<PlazaComment[]>([]);
+  const [cursor, setCursor] = useState<string | null>(null);
+  const [hasMore, setHasMore] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [replyTo, setReplyTo] = useState<PlazaComment | null>(null);
+  const [loginOpen, setLoginOpen] = useState(false);
+
+  const loadComments = useCallback(
+    async (nextCursor?: string | null) => {
+      const data = await fetchComments(postId, { cursor: nextCursor ?? undefined });
+      if (nextCursor) {
+        setComments((current) => [...current, ...data.comments]);
+      } else {
+        setComments(data.comments);
+      }
+      setCursor(data.next_cursor);
+      setHasMore(data.has_more);
+    },
+    [postId],
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    loadComments()
+      .catch(() => {
+        if (!cancelled) setComments([]);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [loadComments]);
+
+  const handleCreate = async (content: string) => {
+    try {
+      await createComment(postId, content, replyTo?.id ?? null);
+      setReplyTo(null);
+      await loadComments();
+    } catch (error) {
+      if (error instanceof PlazaApiError && error.code === 'unauthorized') {
+        setLoginOpen(true);
+      }
+      throw error;
+    }
+  };
+
+  const handleToggleLike = async (comment: PlazaComment) => {
+    try {
+      const liked = !comment.viewer_liked;
+      await toggleCommentLike(comment.id, liked);
+      setComments((current) =>
+        current.map((item) =>
+          item.id === comment.id
+            ? {
+                ...item,
+                viewer_liked: liked,
+                like_count: Math.max(0, item.like_count + (liked ? 1 : -1)),
+              }
+            : item,
+        ),
+      );
+    } catch (error) {
+      if (error instanceof PlazaApiError && error.code === 'unauthorized') {
+        setLoginOpen(true);
+      }
+    }
+  };
+
+  const handleLoadMore = async () => {
+    if (!cursor || loadingMore) return;
+    setLoadingMore(true);
+    try {
+      await loadComments(cursor);
+    } finally {
+      setLoadingMore(false);
+    }
+  };
+
+  if (!allowComment) {
+    return (
+      <div className="rounded-2xl border border-[#d6d0c3] bg-[#fffdf7] px-5 py-4 text-sm text-[#68716c]">
+        作者已关闭评论
+      </div>
+    );
+  }
+
+  return (
+    <section className="rounded-2xl border border-[#d6d0c3] bg-[#fffdf7] px-5 py-5">
+      <h2 className="text-lg font-semibold text-[#17221d]">评论</h2>
+      <div className="mt-4">
+        {replyTo ? (
+          <p className="mb-2 text-sm text-[#68716c]">
+            回复 @{replyTo.author.display_name}
+          </p>
+        ) : null}
+        <CommentInput
+          placeholder={replyTo ? `回复 @${replyTo.author.display_name}` : '写下你的评论…'}
+          onSubmit={handleCreate}
+          onCancel={replyTo ? () => setReplyTo(null) : undefined}
+        />
+      </div>
+      <div className="mt-6">
+        {loading ? (
+          <p className="py-6 text-center text-sm text-[#8a928c]">加载评论中…</p>
+        ) : (
+          <CommentList
+            postId={postId}
+            comments={comments}
+            onReply={setReplyTo}
+            onToggleLike={handleToggleLike}
+          />
+        )}
+        {hasMore ? (
+          <button
+            type="button"
+            disabled={loadingMore}
+            onClick={handleLoadMore}
+            className="mt-4 w-full rounded-full border border-[#d6d0c3] py-2.5 text-sm font-semibold text-[#2f6f57]"
+          >
+            {loadingMore ? '加载中…' : '加载更多评论'}
+          </button>
+        ) : null}
+      </div>
+      <LoginPrompt
+        open={loginOpen}
+        onClose={() => setLoginOpen(false)}
+        message="登录后即可发表评论"
+      />
+    </section>
+  );
+}

ui/plaza/components/comment/CommentThread.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import type { PlazaComment } from '@/types/plaza';
+import { formatCount, formatRelativeTime } from '@/lib/format';
+import { fetchComments } from '@/lib/api';
+import { CommentReportButton } from '@/components/post/CommentReportButton';
+
+type CommentThreadProps = {
+  postId: string;
+  comment: PlazaComment;
+  depth?: number;
+  onReply: (comment: PlazaComment) => void;
+  onToggleLike: (comment: PlazaComment) => void;
+};
+
+export function CommentThread({
+  postId,
+  comment,
+  depth = 0,
+  onReply,
+  onToggleLike,
+}: CommentThreadProps) {
+  const [replies, setReplies] = useState<PlazaComment[]>([]);
+  const [expanded, setExpanded] = useState(false);
+  const [loadingReplies, setLoadingReplies] = useState(false);
+
+  const loadReplies = async () => {
+    if (loadingReplies || expanded) return;
+    setLoadingReplies(true);
+    try {
+      const data = await fetchComments(postId, { parent_id: comment.id });
+      setReplies(data.comments);
+      setExpanded(true);
+    } finally {
+      setLoadingReplies(false);
+    }
+  };
+
+  const canReply = depth === 0;
+
+  return (
+    <div className={depth > 0 ? 'border-l border-[#ebe4d6] pl-4' : undefined}>
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0 flex-1">
+          <Link
+            href={`/u/${comment.author.slug}`}
+            className="font-semibold text-[#17221d] hover:text-[#2f6f57]"
+          >
+            {comment.author.display_name}
+          </Link>
+          <p className="mt-1 text-sm leading-relaxed text-[#4a5751]">{comment.content}</p>
+          <div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-[#8a928c]">
+            <span>{formatRelativeTime(comment.created_at)}</span>
+            {canReply ? (
+              <button
+                type="button"
+                onClick={() => onReply(comment)}
+                className="font-semibold text-[#68716c] hover:text-[#2f6f57]"
+              >
+                回复
+              </button>
+            ) : null}
+            <CommentReportButton commentId={comment.id} />
+          </div>
+          {canReply && comment.reply_count > 0 && !expanded ? (
+            <button
+              type="button"
+              onClick={() => void loadReplies()}
+              className="mt-2 text-xs font-semibold text-[#2f6f57]"
+            >
+              {loadingReplies
+                ? '加载回复中…'
+                : `查看 ${formatCount(comment.reply_count)} 条回复`}
+            </button>
+          ) : null}
+        </div>
+        <button
+          type="button"
+          onClick={() => onToggleLike(comment)}
+          className={`shrink-0 rounded-full px-3 py-1 text-xs font-semibold ${
+            comment.viewer_liked
+              ? 'bg-[#2f6f57] text-white'
+              : 'border border-[#d6d0c3] text-[#68716c]'
+          }`}
+        >
+          👍 {formatCount(comment.like_count)}
+        </button>
+      </div>
+      {expanded && replies.length > 0 ? (
+        <ul className="mt-3 space-y-3">
+          {replies.map((reply) => (
+            <li key={reply.id}>
+              <CommentThread
+                postId={postId}
+                comment={reply}
+                depth={depth + 1}
+                onReply={onReply}
+                onToggleLike={onToggleLike}
+              />
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
+}

ui/plaza/components/feed/CategoryNav.tsx

@@ -0,0 +1,39 @@
+import Link from 'next/link';
+import type { PlazaCategory } from '@/types/plaza';
+import { plazaPath } from '@/lib/site';
+
+export function CategoryNav({
+  categories,
+  activeSlug,
+}: {
+  categories: PlazaCategory[];
+  activeSlug?: string;
+}) {
+  return (
+    <div className="flex gap-2 overflow-x-auto pb-1 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+      <Link
+        href={plazaPath()}
+        className={`shrink-0 rounded-full px-4 py-2 text-sm font-medium transition ${
+          !activeSlug
+            ? 'bg-[#2f6f57] text-white'
+            : 'bg-[#ebe4d6] text-[#4a5751] hover:bg-[#dfd7c8]'
+        }`}
+      >
+        全部
+      </Link>
+      {categories.map((cat) => (
+        <Link
+          key={cat.id}
+          href={plazaPath(`cat/${cat.slug}`)}
+          className={`shrink-0 rounded-full px-4 py-2 text-sm font-medium transition ${
+            activeSlug === cat.slug
+              ? 'bg-[#2f6f57] text-white'
+              : 'bg-[#ebe4d6] text-[#4a5751] hover:bg-[#dfd7c8]'
+          }`}
+        >
+          {cat.icon} {cat.name}
+        </Link>
+      ))}
+    </div>
+  );
+}

ui/plaza/components/feed/FeaturedBanner.tsx

@@ -0,0 +1,26 @@
+import Link from 'next/link';
+import type { PlazaPost } from '@/types/plaza';
+import { plazaPath } from '@/lib/site';
+
+export function FeaturedBanner({ posts }: { posts: PlazaPost[] }) {
+  if (posts.length === 0) return null;
+
+  return (
+    <section className="space-y-3">
+      <h2 className="text-lg font-semibold text-[#17221d]">精选推荐</h2>
+      <div className="grid gap-3 md:grid-cols-2">
+        {posts.slice(0, 5).map((post) => (
+          <Link
+            key={post.id}
+            href={plazaPath(`p/${post.id}`)}
+            className="rounded-2xl border border-[#d6d0c3] bg-gradient-to-r from-[#2f6f57] to-[#1f4f3f] p-5 text-[#fffdf7] shadow-sm transition hover:-translate-y-0.5"
+          >
+            <p className="text-sm opacity-80">{post.category.icon} {post.category.name}</p>
+            <h3 className="mt-2 text-lg font-semibold leading-snug">{post.title}</h3>
+            <p className="mt-2 text-sm opacity-90">{post.author.display_name}</p>
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}

ui/plaza/components/feed/FeedLoadMore.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { PlazaPost } from '@/types/plaza';
+import { PostGrid } from '@/components/feed/PostGrid';
+
+async function loadFeedPage(url: string) {
+  const response = await fetch(url);
+  const payload = await response.json();
+  if (!response.ok) throw new Error(payload?.error?.message ?? '加载失败');
+  return payload.data as {
+    posts: PlazaPost[];
+    next_cursor: string | null;
+    has_more: boolean;
+  };
+}
+
+export function FeedLoadMore({
+  initialPosts,
+  initialCursor,
+  initialHasMore,
+  sort,
+  categorySlug,
+}: {
+  initialPosts: PlazaPost[];
+  initialCursor: string | null;
+  initialHasMore: boolean;
+  sort: 'hot' | 'new';
+  categorySlug?: string;
+}) {
+  const [posts, setPosts] = useState(initialPosts);
+  const [cursor, setCursor] = useState(initialCursor);
+  const [hasMore, setHasMore] = useState(initialHasMore);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
+  const loadingRef = useRef(false);
+
+  const loadMore = useCallback(async () => {
+    if (!hasMore || loadingRef.current || !cursor) return;
+    loadingRef.current = true;
+    setLoading(true);
+    setError(null);
+    try {
+      const query = new URLSearchParams({ sort, limit: '20', cursor });
+      if (categorySlug) query.set('category', categorySlug);
+      const data = await loadFeedPage(`/api/plaza/v1/feed?${query.toString()}`);
+      setPosts((prev) => [...prev, ...data.posts]);
+      setCursor(data.next_cursor);
+      setHasMore(data.has_more);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '加载失败');
+    } finally {
+      loadingRef.current = false;
+      setLoading(false);
+    }
+  }, [categorySlug, cursor, hasMore, sort]);
+
+  useEffect(() => {
+    if (!hasMore || !cursor) return;
+    const node = sentinelRef.current;
+    if (!node) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          void loadMore();
+        }
+      },
+      { rootMargin: '240px' },
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [cursor, hasMore, loadMore]);
+
+  return (
+    <div className="space-y-6">
+      <PostGrid posts={posts} />
+      {error ? <p className="text-center text-sm text-red-700">{error}</p> : null}
+      {hasMore ? (
+        <div ref={sentinelRef} className="flex justify-center pb-8">
+          <button
+            type="button"
+            onClick={() => void loadMore()}
+            disabled={loading || !cursor}
+            className="rounded-full border border-[#2f6f57] px-6 py-2.5 text-sm font-semibold text-[#2f6f57] transition hover:bg-[#2f6f57] hover:text-white disabled:opacity-60"
+          >
+            {loading ? '加载中…' : '加载更多'}
+          </button>
+        </div>
+      ) : null}
+    </div>
+  );
+}

ui/plaza/components/feed/FeedTabs.tsx

@@ -0,0 +1,33 @@
+import Link from 'next/link';
+import { plazaPath } from '@/lib/site';
+
+export function FeedTabs({
+  sort,
+  categorySlug,
+}: {
+  sort: 'hot' | 'new';
+  categorySlug?: string;
+}) {
+  const base = categorySlug ? plazaPath(`cat/${categorySlug}`) : plazaPath();
+
+  return (
+    <div className="inline-flex rounded-full bg-[#ebe4d6] p-1">
+      <Link
+        href={`${base}?sort=hot`}
+        className={`rounded-full px-4 py-2 text-sm font-semibold transition ${
+          sort === 'hot' ? 'bg-[#fffdf7] text-[#17221d] shadow-sm' : 'text-[#68716c]'
+        }`}
+      >
+        热门
+      </Link>
+      <Link
+        href={`${base}?sort=new`}
+        className={`rounded-full px-4 py-2 text-sm font-semibold transition ${
+          sort === 'new' ? 'bg-[#fffdf7] text-[#17221d] shadow-sm' : 'text-[#68716c]'
+        }`}
+      >
+        最新
+      </Link>
+    </div>
+  );
+}

ui/plaza/components/feed/PostCard.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { useState } from 'react';
+import type { PlazaPost } from '@/types/plaza';
+import { categoryAccent, formatCount, formatRelativeTime } from '@/lib/format';
+import { plazaPath } from '@/lib/site';
+
+export function PostCard({ post, priority = false }: { post: PlazaPost; priority?: boolean }) {
+  const [coverFailed, setCoverFailed] = useState(false);
+  const showFallback = !post.cover_url || coverFailed;
+  const accent = categoryAccent(post.category.slug);
+  const initial = post.title.trim().charAt(0) || '页';
+
+  return (
+    <Link
+      href={plazaPath(`p/${post.id}`)}
+      className="group flex flex-col overflow-hidden rounded-2xl border border-[#d6d0c3] bg-[#fffdf7] shadow-sm transition hover:-translate-y-0.5 hover:shadow-md"
+    >
+      <div className="relative aspect-[16/10] overflow-hidden bg-[#ebe4d6]">
+        {showFallback ? (
+          <div
+            className={`flex h-full w-full items-center justify-center bg-gradient-to-br ${accent} text-5xl font-bold text-white/90`}
+          >
+            {initial}
+          </div>
+        ) : (
+          <Image
+            src={post.cover_url}
+            alt={post.title}
+            fill
+            priority={priority}
+            loading={priority ? undefined : 'lazy'}
+            className="object-cover transition group-hover:scale-[1.02]"
+            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
+            onError={() => setCoverFailed(true)}
+          />
+        )}
+      </div>
+      <div className="flex flex-1 flex-col gap-2 p-4">
+        <h3 className="line-clamp-2 text-base font-semibold leading-snug text-[#17221d]">
+          {post.title}
+        </h3>
+        {post.summary ? (
+          <p className="line-clamp-2 text-sm leading-relaxed text-[#68716c]">{post.summary}</p>
+        ) : null}
+        <div className="mt-auto flex items-center justify-between gap-2 pt-2 text-xs text-[#8a928c]">
+          <span className="truncate">{post.author.display_name}</span>
+          <span>{formatRelativeTime(post.published_at)}</span>
+        </div>
+        <div className="flex gap-3 text-xs text-[#4a5751]">
+          <span>👍 {formatCount(post.stats.like_count)}</span>
+          <span>💬 {formatCount(post.stats.comment_count)}</span>
+        </div>
+      </div>
+    </Link>
+  );
+}

ui/plaza/components/feed/PostGrid.tsx

@@ -0,0 +1,21 @@
+import type { PlazaPost } from '@/types/plaza';
+import { PostCard } from '@/components/feed/PostCard';
+
+export function PostGrid({ posts }: { posts: PlazaPost[] }) {
+  if (posts.length === 0) {
+    return (
+      <div className="rounded-2xl border border-dashed border-[#d6d0c3] bg-[#fffdf7] px-6 py-16 text-center">
+        <p className="text-lg font-semibold text-[#17221d]">暂无内容</p>
+        <p className="mt-2 text-sm text-[#68716c]">发布到广场的作品会出现在这里</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
+      {posts.map((post, index) => (
+        <PostCard key={post.id} post={post} priority={index < 4} />
+      ))}
+    </div>
+  );
+}

ui/plaza/components/feed/PostGridSkeleton.tsx

@@ -0,0 +1,19 @@
+export function PostGridSkeleton({ count = 8 }: { count?: number }) {
+  return (
+    <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
+      {Array.from({ length: count }, (_, index) => (
+        <div
+          key={index}
+          className="overflow-hidden rounded-2xl border border-[#d6d0c3] bg-[#fffdf7] shadow-sm"
+        >
+          <div className="aspect-[16/10] animate-pulse bg-[#ebe4d6]" />
+          <div className="space-y-3 p-4">
+            <div className="h-4 animate-pulse rounded bg-[#ebe4d6]" />
+            <div className="h-4 w-2/3 animate-pulse rounded bg-[#ebe4d6]" />
+            <div className="h-3 w-1/2 animate-pulse rounded bg-[#f0ebe0]" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

ui/plaza/components/layout/Footer.tsx

@@ -0,0 +1,30 @@
+import Link from 'next/link';
+import { mindSpaceSignupUrl } from '@/lib/utm';
+
+export function Footer({ postId }: { postId?: string }) {
+  const href = mindSpaceSignupUrl({
+    medium: 'footer',
+    campaign: postId ? 'post_watermark' : 'site',
+    ref: postId,
+  });
+
+  return (
+    <footer className="mt-auto border-t border-[#d6d0c3] bg-[#f0ebe0]">
+      <div className="mx-auto flex max-w-6xl flex-col gap-4 px-4 py-8 md:flex-row md:items-center md:justify-between">
+        <div>
+          <p className="font-semibold text-[#17221d]">MindSpace Plaza</p>
+          <p className="mt-1 text-sm text-[#68716c]">发现 AI 生成的报告、作品与页面</p>
+        </div>
+        <Link
+          href={href}
+          className="inline-flex items-center gap-2 rounded-full border border-[#2f6f57] px-5 py-2.5 text-sm font-semibold text-[#2f6f57] transition hover:bg-[#2f6f57] hover:text-white"
+        >
+          用 MindSpace 制作 →
+        </Link>
+      </div>
+      <div className="border-t border-[#d6d0c3] px-4 py-3 text-center text-xs text-[#8a928c]">
+        © {new Date().getFullYear()} MindSpace
+      </div>
+    </footer>
+  );
+}

ui/plaza/components/layout/Header.tsx

@@ -0,0 +1,62 @@
+import Link from 'next/link';
+import { cookies } from 'next/headers';
+import { fetchAuthStatus, fetchCategories } from '@/lib/api';
+import { mindSpaceOrigin, plazaPath } from '@/lib/site';
+
+export async function Header() {
+  const cookieStore = await cookies();
+  const cookieHeader = cookieStore.toString();
+
+  let categories: Awaited<ReturnType<typeof fetchCategories>>['categories'] = [];
+  let authStatus: Awaited<ReturnType<typeof fetchAuthStatus>> = { authenticated: false };
+  try {
+    [{ categories }, authStatus] = await Promise.all([
+      fetchCategories(),
+      fetchAuthStatus(cookieHeader),
+    ]);
+  } catch {
+    categories = [];
+  }
+
+  return (
+    <header className="sticky top-0 z-40 border-b border-[#d6d0c3] bg-[#fffdf7]/95 backdrop-blur">
+      <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-3">
+        <Link href={plazaPath()} className="flex items-center gap-2 font-bold text-[#17221d]">
+          <span className="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-[#2f6f57] text-sm text-white">
+            P
+          </span>
+          <span>MindSpace Plaza</span>
+        </Link>
+        <nav className="hidden items-center gap-1 md:flex">
+          {categories.slice(0, 6).map((cat) => (
+            <Link
+              key={cat.id}
+              href={plazaPath(`cat/${cat.slug}`)}
+              className="rounded-full px-3 py-1.5 text-sm text-[#4a5751] transition hover:bg-[#ebe4d6] hover:text-[#17221d]"
+            >
+              {cat.icon} {cat.name}
+            </Link>
+          ))}
+        </nav>
+        {authStatus.authenticated && authStatus.user ? (
+          <Link
+            href={authStatus.user.slug ? `/u/${authStatus.user.slug}` : mindSpaceOrigin()}
+            className="flex items-center gap-2 rounded-full border border-[#d6d0c3] px-4 py-2 text-sm font-semibold text-[#17221d] transition hover:bg-[#ebe4d6]"
+          >
+            <span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-[#2f6f57] text-xs text-white">
+              {(authStatus.user.displayName || authStatus.user.username).charAt(0).toUpperCase()}
+            </span>
+            {authStatus.user.displayName || authStatus.user.username}
+          </Link>
+        ) : (
+          <Link
+            href={mindSpaceOrigin()}
+            className="rounded-full bg-[#2f6f57] px-4 py-2 text-sm font-semibold text-white transition hover:bg-[#245742]"
+          >
+            登录 / 创作
+          </Link>
+        )}
+      </div>
+    </header>
+  );
+}

ui/plaza/components/layout/MobileNav.tsx

@@ -0,0 +1,23 @@
+import Link from 'next/link';
+import { mindSpaceOrigin, plazaPath } from '@/lib/site';
+
+export function MobileNav() {
+  return (
+    <nav className="fixed inset-x-0 bottom-0 z-40 border-t border-[#d6d0c3] bg-[#fffdf7]/95 backdrop-blur md:hidden">
+      <div className="mx-auto grid max-w-lg grid-cols-4 gap-1 px-2 py-2 text-center text-xs">
+        <Link href={plazaPath()} className="rounded-xl px-2 py-2 text-[#17221d]">
+          首页
+        </Link>
+        <Link href={plazaPath('cat/work-report')} className="rounded-xl px-2 py-2 text-[#68716c]">
+          分类
+        </Link>
+        <Link href={mindSpaceOrigin()} className="rounded-xl px-2 py-2 text-[#68716c]">
+          发布
+        </Link>
+        <Link href={mindSpaceOrigin()} className="rounded-xl px-2 py-2 text-[#68716c]">
+          我的
+        </Link>
+      </div>
+    </nav>
+  );
+}

ui/plaza/components/post/CommentReportButton.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { useState } from 'react';
+import { LoginPrompt } from '@/components/auth/LoginPrompt';
+import { PlazaApiError, submitCommentReport } from '@/lib/api';
+
+const REPORT_REASONS = [
+  { value: 'spam', label: '垃圾广告' },
+  { value: 'violence', label: '暴力内容' },
+  { value: 'porn', label: '色情低俗' },
+  { value: 'political', label: '政治敏感' },
+  { value: 'privacy', label: '侵犯隐私' },
+  { value: 'other', label: '其他' },
+] as const;
+
+type CommentReportButtonProps = {
+  commentId: string;
+};
+
+export function CommentReportButton({ commentId }: CommentReportButtonProps) {
+  const [open, setOpen] = useState(false);
+  const [reason, setReason] = useState<(typeof REPORT_REASONS)[number]['value']>('spam');
+  const [busy, setBusy] = useState(false);
+  const [loginOpen, setLoginOpen] = useState(false);
+
+  const submit = async () => {
+    setBusy(true);
+    try {
+      await submitCommentReport(commentId, reason);
+      setOpen(false);
+    } catch (error) {
+      if (error instanceof PlazaApiError && error.code === 'unauthorized') {
+        setLoginOpen(true);
+      }
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  if (!open) {
+    return (
+      <>
+        <button
+          type="button"
+          onClick={() => setOpen(true)}
+          className="font-semibold text-[#8a928c] hover:text-red-700"
+        >
+          举报
+        </button>
+        <LoginPrompt open={loginOpen} onClose={() => setLoginOpen(false)} message="登录后可举报" />
+      </>
+    );
+  }
+
+  return (
+    <span className="inline-flex flex-wrap items-center gap-2">
+      <select
+        value={reason}
+        onChange={(event) =>
+          setReason(event.target.value as (typeof REPORT_REASONS)[number]['value'])
+        }
+        className="rounded border border-[#d6d0c3] bg-white px-2 py-0.5 text-xs"
+      >
+        {REPORT_REASONS.map((item) => (
+          <option key={item.value} value={item.value}>
+            {item.label}
+          </option>
+        ))}
+      </select>
+      <button
+        type="button"
+        disabled={busy}
+        onClick={() => void submit()}
+        className="font-semibold text-red-700"
+      >
+        提交
+      </button>
+      <button type="button" onClick={() => setOpen(false)} className="text-[#68716c]">
+        取消
+      </button>
+      <LoginPrompt open={loginOpen} onClose={() => setLoginOpen(false)} message="登录后可举报" />
+    </span>
+  );
+}

ui/plaza/components/post/PostActions.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import { useState } from 'react';
+import type { PlazaStats } from '@/types/plaza';
+import { LoginPrompt } from '@/components/auth/LoginPrompt';
+import { formatCount } from '@/lib/format';
+import { PlazaApiError, togglePostReaction } from '@/lib/api';
+import { plazaPath, siteOrigin } from '@/lib/site';
+
+type PostActionsProps = {
+  postId: string;
+  stats: PlazaStats;
+  viewerReacted?: { liked: boolean; collected: boolean } | null;
+};
+
+export function PostActions({ postId, stats, viewerReacted }: PostActionsProps) {
+  const [liked, setLiked] = useState(viewerReacted?.liked ?? false);
+  const [collected, setCollected] = useState(viewerReacted?.collected ?? false);
+  const [likeCount, setLikeCount] = useState(stats.like_count);
+  const [collectCount, setCollectCount] = useState(stats.collect_count);
+  const [shareHint, setShareHint] = useState('');
+  const [shareOpen, setShareOpen] = useState(false);
+  const [loginOpen, setLoginOpen] = useState(false);
+  const [busy, setBusy] = useState<'like' | 'collect' | null>(null);
+
+  const handleReaction = async (type: 'like' | 'collect') => {
+    if (busy) return;
+    const active = type === 'like' ? liked : collected;
+    setBusy(type);
+    try {
+      await togglePostReaction(postId, type, active);
+      if (type === 'like') {
+        setLiked(!active);
+        setLikeCount((value) => Math.max(0, value + (active ? -1 : 1)));
+      } else {
+        setCollected(!active);
+        setCollectCount((value) => Math.max(0, value + (active ? -1 : 1)));
+      }
+    } catch (error) {
+      if (error instanceof PlazaApiError && error.code === 'unauthorized') {
+        setLoginOpen(true);
+      }
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const shareUrl = `${siteOrigin()}${plazaPath(`p/${postId}`)}`;
+  const shareImageUrl = `${siteOrigin()}${plazaPath(`p/${postId}/opengraph-image`)}`;
+
+  const handleShare = async () => {
+    try {
+      await navigator.clipboard.writeText(shareUrl);
+      setShareHint('链接已复制');
+    } catch {
+      setShareHint(shareUrl);
+    }
+    try {
+      await togglePostReaction(postId, 'share', false);
+    } catch {
+      // 未登录时忽略 share 计数
+    }
+    window.setTimeout(() => setShareHint(''), 2500);
+  };
+
+  const handleCopyImageLink = async () => {
+    try {
+      await navigator.clipboard.writeText(shareImageUrl);
+      setShareHint('分享图链接已复制');
+    } catch {
+      setShareHint(shareImageUrl);
+    }
+    setShareOpen(false);
+    window.setTimeout(() => setShareHint(''), 2500);
+  };
+
+  return (
+    <>
+      <div className="flex flex-wrap items-center gap-3 rounded-2xl border border-[#d6d0c3] bg-[#fffdf7] px-5 py-4">
+        <button
+          type="button"
+          disabled={busy === 'like'}
+          onClick={() => handleReaction('like')}
+          className={`inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold transition ${
+            liked
+              ? 'bg-[#2f6f57] text-white'
+              : 'border border-[#d6d0c3] text-[#17221d] hover:border-[#2f6f57] hover:text-[#2f6f57]'
+          }`}
+        >
+          👍 {formatCount(likeCount)}
+        </button>
+        <button
+          type="button"
+          disabled={busy === 'collect'}
+          onClick={() => handleReaction('collect')}
+          className={`inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold transition ${
+            collected
+              ? 'bg-amber-600 text-white'
+              : 'border border-[#d6d0c3] text-[#17221d] hover:border-amber-600 hover:text-amber-700'
+          }`}
+        >
+          🔖 {formatCount(collectCount)}
+        </button>
+        <button
+          type="button"
+          onClick={() => setShareOpen((open) => !open)}
+          className="inline-flex items-center gap-2 rounded-full border border-[#d6d0c3] px-4 py-2 text-sm font-semibold text-[#17221d] transition hover:border-[#2f6f57] hover:text-[#2f6f57]"
+        >
+          📤 分享
+        </button>
+        {shareOpen ? (
+          <div className="flex w-full flex-wrap gap-2 border-t border-[#ebe4d6] pt-3">
+            <button
+              type="button"
+              onClick={() => void handleShare()}
+              className="rounded-full border border-[#d6d0c3] px-4 py-2 text-sm text-[#17221d]"
+            >
+              复制链接
+            </button>
+            <button
+              type="button"
+              onClick={() => void handleCopyImageLink()}
+              className="rounded-full border border-[#d6d0c3] px-4 py-2 text-sm text-[#17221d]"
+            >
+              复制分享图链接
+            </button>
+            <a
+              href={shareImageUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="rounded-full border border-[#d6d0c3] px-4 py-2 text-sm text-[#17221d]"
+            >
+              预览分享图
+            </a>
+          </div>
+        ) : null}
+        {shareHint ? <span className="text-sm text-[#2f6f57]">{shareHint}</span> : null}
+      </div>
+      <LoginPrompt open={loginOpen} onClose={() => setLoginOpen(false)} />
+    </>
+  );
+}

ui/plaza/components/post/PostEmbed.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+export function PostEmbed({ src, title }: { src: string; title: string }) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [height, setHeight] = useState(480);
+
+  useEffect(() => {
+    const onMessage = (event: MessageEvent) => {
+      if (event.source !== iframeRef.current?.contentWindow) return;
+      const data = event.data;
+      if (data && typeof data === 'object' && data.type === 'plaza:embed-height') {
+        const next = Number(data.height);
+        if (Number.isFinite(next) && next > 0) setHeight(Math.min(next, 4000));
+      }
+    };
+    window.addEventListener('message', onMessage);
+    return () => window.removeEventListener('message', onMessage);
+  }, []);
+
+  return (
+    <iframe
+      ref={iframeRef}
+      src={src}
+      title={title}
+      sandbox="allow-scripts allow-same-origin"
+      className="w-full rounded-2xl border border-[#d6d0c3] bg-white"
+      style={{ height }}
+      loading="lazy"
+    />
+  );
+}

ui/plaza/components/post/PostMeta.tsx

@@ -0,0 +1,37 @@
+import Link from 'next/link';
+import type { PlazaPost } from '@/types/plaza';
+import { FollowButton } from '@/components/user/FollowButton';
+import { formatCount, formatRelativeTime } from '@/lib/format';
+
+export function PostMeta({ post }: { post: PlazaPost }) {
+  return (
+    <div className="flex flex-wrap items-center justify-between gap-4 border-b border-[#d6d0c3] pb-5">
+      <div>
+        <p className="text-sm text-[#68716c]">
+          {post.category.icon} {post.category.name} · {formatRelativeTime(post.published_at)}
+        </p>
+        <h1 className="mt-2 text-2xl font-bold leading-tight text-[#17221d] md:text-3xl">
+          {post.title}
+        </h1>
+        {post.summary ? <p className="mt-3 text-[#4a5751]">{post.summary}</p> : null}
+      </div>
+      <div className="flex items-center gap-3">
+        <div>
+          <Link
+            href={`/u/${post.author.slug}`}
+            className="font-semibold text-[#17221d] hover:text-[#2f6f57]"
+          >
+            {post.author.display_name}
+          </Link>
+          <p className="text-xs text-[#8a928c]">@{post.author.slug}</p>
+        </div>
+        <FollowButton slug={post.author.slug} />
+      </div>
+      <div className="flex w-full gap-4 text-sm text-[#4a5751] md:w-auto">
+        <span>👍 {formatCount(post.stats.like_count)}</span>
+        <span>👁 {formatCount(post.stats.view_count)}</span>
+        <span>💬 {formatCount(post.stats.comment_count)}</span>
+      </div>
+    </div>
+  );
+}

ui/plaza/components/post/PostReportButton.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { useState } from 'react';
+import { LoginPrompt } from '@/components/auth/LoginPrompt';
+import { PlazaApiError, submitPostReport } from '@/lib/api';
+
+const REPORT_REASONS = [
+  { value: 'spam', label: '垃圾广告' },
+  { value: 'violence', label: '暴力内容' },
+  { value: 'porn', label: '色情低俗' },
+  { value: 'political', label: '政治敏感' },
+  { value: 'privacy', label: '侵犯隐私' },
+  { value: 'other', label: '其他' },
+] as const;
+
+type PostReportButtonProps = {
+  postId: string;
+};
+
+export function PostReportButton({ postId }: PostReportButtonProps) {
+  const [open, setOpen] = useState(false);
+  const [reason, setReason] = useState<(typeof REPORT_REASONS)[number]['value']>('spam');
+  const [detail, setDetail] = useState('');
+  const [message, setMessage] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [loginOpen, setLoginOpen] = useState(false);
+
+  const submit = async () => {
+    setBusy(true);
+    setMessage('');
+    try {
+      await submitPostReport(postId, reason, detail.trim() || undefined);
+      setMessage('举报已提交，感谢反馈');
+      setOpen(false);
+      setDetail('');
+    } catch (error) {
+      if (error instanceof PlazaApiError && error.code === 'unauthorized') {
+        setLoginOpen(true);
+      } else {
+        setMessage(error instanceof Error ? error.message : '提交失败');
+      }
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        className="text-sm font-semibold text-[#8a928c] hover:text-red-700"
+      >
+        举报
+      </button>
+      {open ? (
+        <div className="mt-3 rounded-xl border border-[#ebe4d6] bg-[#faf7f0] p-4">
+          <p className="text-sm font-semibold text-[#17221d]">举报此帖子</p>
+          <label className="mt-3 block text-xs text-[#68716c]">
+            原因
+            <select
+              value={reason}
+              onChange={(event) =>
+                setReason(event.target.value as (typeof REPORT_REASONS)[number]['value'])
+              }
+              className="mt-1 w-full rounded-lg border border-[#d6d0c3] bg-white px-3 py-2 text-sm text-[#17221d]"
+            >
+              {REPORT_REASONS.map((item) => (
+                <option key={item.value} value={item.value}>
+                  {item.label}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label className="mt-3 block text-xs text-[#68716c]">
+            补充说明（可选）
+            <textarea
+              value={detail}
+              onChange={(event) => setDetail(event.target.value)}
+              maxLength={500}
+              rows={3}
+              className="mt-1 w-full rounded-lg border border-[#d6d0c3] bg-white px-3 py-2 text-sm text-[#17221d]"
+            />
+          </label>
+          <div className="mt-3 flex gap-2">
+            <button
+              type="button"
+              disabled={busy}
+              onClick={() => void submit()}
+              className="rounded-full bg-red-700 px-4 py-2 text-sm font-semibold text-white disabled:opacity-60"
+            >
+              {busy ? '提交中…' : '提交举报'}
+            </button>
+            <button
+              type="button"
+              onClick={() => setOpen(false)}
+              className="rounded-full border border-[#d6d0c3] px-4 py-2 text-sm text-[#68716c]"
+            >
+              取消
+            </button>
+          </div>
+        </div>
+      ) : null}
+      {message ? <p className="mt-2 text-sm text-[#2f6f57]">{message}</p> : null}
+      <LoginPrompt open={loginOpen} onClose={() => setLoginOpen(false)} message="登录后可举报" />
+    </>
+  );
+}

ui/plaza/components/seo/AttributionTracker.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { recordAttributionEvent } from '@/lib/api';
+
+export function AttributionTracker() {
+  const searchParams = useSearchParams();
+  const tracked = useRef(false);
+
+  useEffect(() => {
+    if (tracked.current) return;
+    const utmSource = searchParams.get('utm_source');
+    if (!utmSource) return;
+    tracked.current = true;
+    void recordAttributionEvent({
+      event_type: 'landing',
+      utm_source: utmSource,
+      utm_medium: searchParams.get('utm_medium') ?? '',
+      utm_campaign: searchParams.get('utm_campaign') ?? '',
+      ref_id: searchParams.get('ref') ?? '',
+    }).catch(() => {});
+  }, [searchParams]);
+
+  return null;
+}

ui/plaza/components/user/FollowButton.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useState } from 'react';
+import { LoginPrompt } from '@/components/auth/LoginPrompt';
+import { PlazaApiError, toggleFollow } from '@/lib/api';
+
+type FollowButtonProps = {
+  slug: string;
+  initialFollowing?: boolean;
+  className?: string;
+};
+
+export function FollowButton({ slug, initialFollowing, className = '' }: FollowButtonProps) {
+  const [following, setFollowing] = useState(initialFollowing ?? false);
+  const [loginOpen, setLoginOpen] = useState(false);
+  const [busy, setBusy] = useState(false);
+
+  const handleClick = async () => {
+    if (busy) return;
+    setBusy(true);
+    try {
+      const result = await toggleFollow(slug, following);
+      setFollowing(result.following);
+    } catch (error) {
+      if (error instanceof PlazaApiError && error.code === 'unauthorized') {
+        setLoginOpen(true);
+      }
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        disabled={busy}
+        onClick={handleClick}
+        className={`rounded-full border px-4 py-2 text-sm font-semibold transition ${
+          following
+            ? 'border-[#d6d0c3] bg-[#f0ebe0] text-[#4a5751]'
+            : 'border-[#2f6f57] text-[#2f6f57] hover:bg-[#2f6f57] hover:text-white'
+        } ${className}`}
+      >
+        {following ? '已关注' : '关注'}
+      </button>
+      <LoginPrompt
+        open={loginOpen}
+        onClose={() => setLoginOpen(false)}
+        message="登录后即可关注创作者"
+      />
+    </>
+  );
+}

ui/plaza/components/user/UserCard.tsx

@@ -0,0 +1,28 @@
+import type { PlazaUserProfile } from '@/types/plaza';
+import { FollowButton } from '@/components/user/FollowButton';
+import { formatCount } from '@/lib/format';
+
+export function UserCard({ user }: { user: PlazaUserProfile }) {
+  return (
+    <div className="rounded-2xl border border-[#d6d0c3] bg-[#fffdf7] px-6 py-6">
+      <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+        <div className="flex items-start gap-4">
+          <div className="flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-[#2f6f57] to-teal-500 text-2xl font-bold text-white">
+            {user.display_name.trim().charAt(0) || '@'}
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold text-[#17221d]">{user.display_name}</h1>
+            <p className="text-sm text-[#8a928c]">@{user.slug}</p>
+            {user.bio ? <p className="mt-3 max-w-xl text-[#4a5751]">{user.bio}</p> : null}
+            <div className="mt-4 flex flex-wrap gap-4 text-sm text-[#4a5751]">
+              <span>📝 {formatCount(user.stats.post_count)} 篇作品</span>
+              <span>👥 {formatCount(user.stats.follower_count)} 粉丝</span>
+              <span>❤️ {formatCount(user.stats.total_likes)} 获赞</span>
+            </div>
+          </div>
+        </div>
+        <FollowButton slug={user.slug} initialFollowing={user.viewer_following} />
+      </div>
+    </div>
+  );
+}

ui/plaza/components/user/UserPostGrid.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useState } from 'react';
+import type { PlazaPost } from '@/types/plaza';
+import { PostGrid } from '@/components/feed/PostGrid';
+import { fetchUserPosts } from '@/lib/api';
+
+type UserPostGridProps = {
+  slug: string;
+  initialPosts: PlazaPost[];
+  initialCursor: string | null;
+  initialHasMore: boolean;
+};
+
+export function UserPostGrid({
+  slug,
+  initialPosts,
+  initialCursor,
+  initialHasMore,
+}: UserPostGridProps) {
+  const [posts, setPosts] = useState(initialPosts);
+  const [cursor, setCursor] = useState(initialCursor);
+  const [hasMore, setHasMore] = useState(initialHasMore);
+  const [loading, setLoading] = useState(false);
+
+  const loadMore = async () => {
+    if (!cursor || loading) return;
+    setLoading(true);
+    try {
+      const data = await fetchUserPosts(slug, { cursor });
+      setPosts((current) => [...current, ...data.posts]);
+      setCursor(data.next_cursor);
+      setHasMore(data.has_more);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <h2 className="text-lg font-semibold text-[#17221d]">作品</h2>
+      <PostGrid posts={posts} />
+      {hasMore ? (
+        <button
+          type="button"
+          disabled={loading}
+          onClick={loadMore}
+          className="w-full rounded-full border border-[#d6d0c3] py-2.5 text-sm font-semibold text-[#2f6f57]"
+        >
+          {loading ? '加载中…' : '加载更多'}
+        </button>
+      ) : null}
+    </div>
+  );
+}