src/components/widget/SiteStats.astro

---
import { Icon } from "astro-icon/components";
import WidgetLayout from "@/components/common/WidgetLayout.astro";
import { siteConfig } from "@/config";
import I18nKey from "@/i18n/i18nKey";
import { i18n } from "@/i18n/translation";
import {
	getCategoryList,
	getSortedPosts,
	getTagList,
} from "@/utils/content-utils";

interface Props {
	class?: string;
	style?: string;
}

const { class: className, style } = Astro.props;

// 从配置中获取站点开始日期
const siteStartDate = siteConfig.siteStartDate || "2025-01-01";

// 获取所有文章
const posts = await getSortedPosts();
const categories = await getCategoryList();
const tags = await getTagList();

// 计算总字数
let totalWords = 0;
for (const post of posts) {
	if (post.body) {
		// 移除代码块和内联代码后计算字数
		let text = post.body
			.replace(/```[\s\S]*?```/g, "") // 移除代码块
			.replace(/`[^`]*`/g, "") // 移除内联代码
			.replace(/\s+/g, " ") // 合并空白
			.trim();

		// 分别计算中文字符和英文字符
		const chineseChars = text.match(/[\u4e00-\u9fa5]/g) || [];
		const englishChars = text.match(/[a-zA-Z]/g) || [];

		totalWords += chineseChars.length + englishChars.length;
	}
}

// 格式化数字（添加千位分隔符）
function formatNumber(num: number): string {
	return num.toLocaleString();
}

// 获取最新文章日期（用于客户端计算）
const latestPost = posts.reduce((latest, post) => {
	if (!latest) return post;
	return post.data.published > latest.data.published ? post : latest;
}, posts[0]);

const lastPostDate = latestPost
	? latestPost.data.published.toISOString()
	: null;

const todayText = i18n(I18nKey.today);

const stats = [
	{
		icon: "material-symbols:article-outline",
		label: i18n(I18nKey.siteStatsPostCount),
		value: posts.length,
	},
	{
		icon: "material-symbols:folder-outline",
		label: i18n(I18nKey.siteStatsCategoryCount),
		value: categories.length,
	},
	{
		icon: "material-symbols:label-outline",
		label: i18n(I18nKey.siteStatsTagCount),
		value: tags.length,
	},
	{
		icon: "material-symbols:text-ad-outline-rounded",
		label: i18n(I18nKey.siteStatsTotalWords),
		value: totalWords,
		formatted: true,
	},
	{
		icon: "material-symbols:calendar-clock-outline",
		label: i18n(I18nKey.siteStatsRunningDays),
		value: 0, // 将由客户端更新
		suffix: i18n(I18nKey.siteStatsDays).replace("{days}", ""),
		dynamic: true,
		id: "running-days",
	},
	{
		icon: "material-symbols:ecg-heart-outline",
		label: i18n(I18nKey.siteStatsLastUpdate),
		value: 0, // 将由客户端更新
		suffix: i18n(I18nKey.siteStatsDaysAgo).replace("{days}", ""),
		dynamic: true,
		id: "last-update",
	},
];
---

<WidgetLayout name={i18n(I18nKey.siteStats)} id="site-stats" class={className} style={style}>
  <div class="flex flex-col gap-2">
    {stats.map((stat) => (
      <div class="flex items-center justify-between px-3 py-1.5">
        <div class="flex items-center gap-2.5">
          <div class="text-(--primary) text-xl">
            <Icon name={stat.icon} />
          </div>
          <span class="text-neutral-700 dark:text-neutral-300 font-medium text-sm">
            {stat.label}
          </span>
        </div>
        <div class="flex items-center">
          <span 
            class="text-base font-bold text-neutral-900 dark:text-neutral-100"
            data-stat-id={stat.id}
          >
            {stat.formatted ? formatNumber(stat.value) : stat.value}
          </span>
          {stat.suffix && (
            <span class="text-sm text-neutral-500 dark:text-neutral-400 ml-1">
              {stat.suffix}
            </span>
          )}
        </div>
      </div>
    ))}
  </div>
</WidgetLayout>

<script is:inline define:vars={{ siteStartDate, lastPostDate, todayText }}>
  function updateDynamicStats() {
    const today = new Date();

    // 更新运行天数
    const startDate = new Date(siteStartDate);
    const diffTime = Math.abs(today.getTime() - startDate.getTime());
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

    const runningDaysElements = document.querySelectorAll('[data-stat-id="running-days"]');
    runningDaysElements.forEach((element) => {
      element.textContent = diffDays.toString();
    });

    // 更新最后活动时间
    if (lastPostDate) {
      const lastPost = new Date(lastPostDate);
      const timeSinceLastPost = Math.abs(today.getTime() - lastPost.getTime());
      const daysSinceLastUpdate = Math.floor(timeSinceLastPost / (1000 * 60 * 60 * 24));

      const lastUpdateElements = document.querySelectorAll('[data-stat-id="last-update"]');
      lastUpdateElements.forEach((element) => {
        if (daysSinceLastUpdate === 0) {
          element.textContent = todayText;
          if (element.nextElementSibling) {
            element.nextElementSibling.style.display = 'none';
          }
        } else {
          element.textContent = daysSinceLastUpdate.toString();
          if (element.nextElementSibling) {
            element.nextElementSibling.style.display = '';
          }
        }
      });
    }
  }

  // 页面加载时更新
  updateDynamicStats();

  // 页面切换时重新更新
  document.addEventListener("swup:contentReplaced", () => {
    setTimeout(updateDynamicStats, 100);
  });
</script>