src/components/comment/index.astro

---
import type { CollectionEntry } from "astro:content";
import { commentConfig } from "@/config/commentConfig";
import Key from "@/i18n/i18nKey";
import { i18n } from "@/i18n/translation";
import { removeFileExtension } from "@/utils/url-utils";
import Artalk from "./Artalk.astro";
import Disqus from "./Disqus.astro";
import Giscus from "./Giscus.astro";
import Twikoo from "./Twikoo.astro";
import Waline from "./Waline.astro";

interface Props {
	post: CollectionEntry<"posts"> | CollectionEntry<"spec">;
	customPath?: string;
}

const { post, customPath } = Astro.props;
const { id } = post;

// 根据页面类型确定路径
const slug = removeFileExtension(id);
const path =
	customPath || (post.collection === "posts" ? `/posts/${slug}` : `/${slug}`);
const url = `${Astro.site?.href}${path}`;

// 强制commentService类型为string，避免类型不兼容警告
let commentService: string = commentConfig?.type || "none";
---

{
  commentService !== "none" && (
    <div class="card-base p-8 mb-6 relative overflow-hidden">
      <!-- 评论区装饰性背景 -->
      <div class="absolute top-0 right-0 w-32 h-32 opacity-5 pointer-events-none">
        <svg viewBox="0 0 100 100" class="w-full h-full">
          <circle cx="50" cy="50" r="40" fill="currentColor" class="text-(--primary)" />
          <circle cx="50" cy="50" r="25" fill="none" stroke="currentColor" stroke-width="2" class="text-(--primary)" />
          <circle cx="50" cy="50" r="10" fill="currentColor" class="text-(--primary)" />
        </svg>
      </div>
      <!-- 评论区标题 -->
      <div class="relative z-10 mb-6">
        <div class="flex items-center gap-3 mb-2">
          <div class="w-1 h-6 bg-linear-to-b from-(--primary) to-transparent rounded-full"></div>
          <h3 class="text-xl font-bold text-(--btn-content)">{i18n(Key.commentSection)}</h3>
        </div>
        <p class="text-sm text-(--content-meta) ml-4">{i18n(Key.commentSubtitle)}</p>
      </div>
      <!-- 评论内容区域 -->
      <div class="relative z-10">
        {commentService === "twikoo" && <Twikoo path={path} />}
        {commentService === "waline" && <Waline path={path} />}
        {commentService === "giscus" && <Giscus />}
        {commentService === "disqus" && <Disqus identifier={slug} url={url} title={'title' in post.data ? post.data.title : slug} />}
          {commentService === "artalk" && <Artalk path={path} />}
        {commentService === "none" && (
          <div class="text-center py-8 text-(--content-meta)">
            <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-(--btn-regular-bg) flex items-center justify-center">
              <svg class="w-8 h-8 text-(--primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
              </svg>
            </div>
            <p>{i18n(Key.commentNotConfigured)}</p>
          </div>
        )}
      </div>
    </div>
  )
}