1
<div class="tab-nav">
2
  <div class="tab-list">
3
    {
4
      tabs.map((tab) => (
5
        <button
6
          class:list={["tab-button", { active: tab.id === activeTab }]}
7
          data-tab={tab.id}
8
        >
9
          <span class="tab-icon">{tab.icon}</span>
10
          <span class="tab-name">{tab.name}</span>
11
          {tab.count !== undefined && (
12
            <span class="tab-count">({tab.count})</span>
13
          )}
14
        </button>
15
      ))
16
    }
17
  </div>
18
</div>

1
<div class="movie-card">
2
  <div class="poster-container">
3
    {hasPoster ? (
4
      <img
5
        src={posterUrl}
6
        alt={title}
7
        class="poster-image"
8
        loading="lazy"
9
      />
10
    ) : (
11
      <div class="poster-placeholder">
12
        <span class="placeholder-icon">🎬</span>
13
        <span class="placeholder-text">{title}</span>
14
      </div>
15
    )}
16
    <div class="overlay">
17
      <div class="info">
18
        <p class="title">{title}</p>
19
        <p class="date">{dateText}</p>
20
        {item.overview && (
21
          <p class="overview">{item.overview}</p>
22
        )}
23
      </div>
24
    </div>
25
  </div>
26
</div>

1
{totalPages > 1 && (
2
  <div class="pagination" data-section={sectionId}>
3
    <button
4
      class="page-btn prev-btn"
5
      data-page={currentPage - 1}
6
      disabled={currentPage === 1}
7
    >
8
      <span>‹</span>
9
    </button>
10

11
    <div class="page-numbers">
12
      {pageNumbers.map((pageNum) => (
13
        pageNum === '...' ? (
14
          <span class="ellipsis">···</span>
15
        ) : (
16
          <button
17
            class:list={["page-btn", "page-num", { active: pageNum === currentPage }]}
18
            data-page={pageNum}
19
          >
20
            {pageNum}
21
          </button>
22
        )
23
      ))}
24
    </div>
25

26
    <button
27
      class="page-btn next-btn"
28
      data-page={currentPage + 1}
29
      disabled={currentPage === totalPages}
30
    >
31
      <span>›</span>
32
    </button>
33
  </div>
34
)}

1
<div
2
  class:list={["moviedb-section", { hidden: !isActive }]}
3
  data-section={sectionId}
4
  data-total-pages={totalPages}
5
  data-items-per-page={itemsPerPage}
6
>
7
  {
8
    items.length === 0 ? (
9
      <div class="empty-state">
10
        <p class="empty-text">暂无{title}收藏</p>
11
      </div>
12
    ) : (
13
      <>
14
        <div class="media-grid" data-grid={sectionId}>
15
          {initialItems.map((item) => (
16
            <Card item={item} />
17
          ))}
18
        </div>
19
        <Pagination
20
          currentPage={currentPage}
21
          totalPages={totalPages}
22
          sectionId={sectionId}
23
        />
24
      </>
25
    )
26
  }
27

28
  <!-- 隐藏的数据容器，用于客户端分页 -->
29
  <script type="application/json" data-items={sectionId} set:html={JSON.stringify(items)} />
30
</div>

1
function initTabNavigation() {
2
  const buttons = document.querySelectorAll(".tab-button");
3

4
  buttons.forEach((button) => {
5
    button.addEventListener("click", () => {
6
      const tabId = button.getAttribute("data-tab");
7
      if (!tabId) return;
8

9
      // 更新 active 状态
10
      buttons.forEach((btn) => btn.classList.remove("active"));
11
      button.classList.add("active");
12

13
      // 显示对应的内容区域
14
      const sections = document.querySelectorAll(".moviedb-section");
15
      sections.forEach((section) => {
16
        if (section.getAttribute("data-section") === tabId) {
17
          section.classList.remove("hidden");
18
        } else {
19
          section.classList.add("hidden");
20
        }
21
      });
22
    });
23
  });
24
}

1
function initPagination() {
2
  const paginations = document.querySelectorAll('.pagination');
3

4
  paginations.forEach((pagination) => {
5
    const sectionId = pagination.getAttribute('data-section');
6
    if (!sectionId) return;
7

8
    const buttons = pagination.querySelectorAll('.page-btn:not(.ellipsis)');
9

10
    buttons.forEach((button) => {
11
      button.addEventListener('click', (e) => {
12
        e.preventDefault();
13
        e.stopPropagation();
14

15
        const pageStr = button.getAttribute('data-page');
16
        if (!pageStr) return;
17

18
        const page = parseInt(pageStr, 10);
19

20
        // 触发自定义事件到文档级别
21
        const event = new CustomEvent('moviedb:pagechange', {
22
          detail: { sectionId, page },
23
          bubbles: true,
24
        });
25
        document.dispatchEvent(event);
26
      });
27
    });
28
  });
29
}