圣地巡礼

说明

用于展示“圣地巡礼”实景与动画截图的对比卡片，支持按动画系列分组并通过下拉选择切换系列。

Props

名称	类型	required	默认值	说明
animes	`PilgrimageAnimeGroup[]`	true	-	分组数据（按动画系列）
className	string	false	-	组件根节点额外类名

类型定义

export interface PilgrimageItem {
  realImageUrl: string;
  animeImageUrl: string;
  description?: string;
  shootDate?: string;
  location?: string;
}

export interface PilgrimageAnimeGroup {
  anime: string; // 动画标题/系列名
  items: PilgrimageItem[];
}

使用

import { Pilgrimage } from '@yixiaojiu/kasumi';

const App = () => (
  <Pilgrimage
    animes={[
      {
        anime: '玉子市场',
        items: [
          {
            realImageUrl: 'https://mawyjwkc75ngfvaa.public.blob.vercel-storage.com/玉子市场-1-camera.webp',
            animeImageUrl: 'https://image.anitabi.cn/points/90880/m2nofmure_1720415941002.jpg',
            shootDate: '2025-01-09',
            location: '京都市',
          },
          {
            realImageUrl: 'https://mawyjwkc75ngfvaa.public.blob.vercel-storage.com/玉子市场-2-camera.webp',
            animeImageUrl: 'https://image.anitabi.cn/points/90880/m2nu65omh_1720417427487.jpg',
            shootDate: '2025-01-09',
            location: '京都市',
          },
        ],
      },
    ]}
  />
);