Search Page Composition

完整搜尋結果頁面排版 (SONE-103 範例數據)

提示：輸入局部番號如 IPZZ-03 可搜尋 030~039

1 / 3

4 個檔案

處理中 3/4

SONE-103.mp4

SONE-103_HD.mp4

unknown_file.mp4

SONE-103_4K.mp4

SONE-103

📁

演員

未歩なな

發行日期

2024-03-19

片商

S1 NO.1 STYLE

標籤

美少女單體作品巨乳首次亮相中文字幕

Composition 說明：

Header 區使用 Acrylic 毛玻璃效果 (backdrop-filter: blur(20px))
Result 區左右比例 70:30 (Cover: Info)
File List 緊貼 Cover 下方，展示本地拖入檔案的 4 種狀態
狀態 icon 化：bi-check-lg (搜到) / bi-question-lg (無法辨識) / 空白 (未搜尋)
動作 icon 化：bi-folder-plus (產生) / bi-pencil (手動輸入)，與 Header「產生全部」同 icon
Info Panel 複用 D.2 的 AV Card Full 結構，含完整互動按鈕

Gallery Page Composition

完整 Gallery 頁面排版（管理區 + 封面牆預覽）

管理區

掃描資料夾

D:\Videos\JAV

/Users/username/Movies/Adult

\\NAS\Media\AV Collection

輸出: output/gallery_output.html

設定

快取影片: 1,234 部

上次執行: 2026-01-15 10:30 (新增 23 部)

需補全: 15 部

女優名稱管理

封面牆預覽（範例輸出）

Composition 說明：

管理區複用 D.6/D.7/D.8 元件：Folder Management、Stats Card、Alias Card（收合狀態）
Section Title 區分「管理區」與「封面牆預覽」兩大區塊
Stats + Alias 水平排列節省垂直空間（Desktop）
Preview Grid 使用 Mosaic Layout：Featured (2fr) + 3 small cards (1fr)，可用於調整 gallery_output.html 設計
RWD: <768px 時 Stats + Alias 垂直堆疊，Preview Grid 單欄顯示

Showcase Toolbar

Showcase 頁面頂部工具列，包含搜尋、排序、模式切換、資訊開關、每頁數量控制

CSS 結構：

.showcase-toolbar — flex 容器，Production 使用 position: sticky（DS demo 為 static）
.toolbar-section — 分區容器（.toolbar-search 搜尋 + .toolbar-controls 控制）
.control-group — 排序按鈕組（funnel + sort direction 緊密排列）
.btn-icon — 來自 theme.css（全域可用），.active 狀態使用 primary 色
.spotlight-search — 來自 theme.css（全域可用），Fluent blur 搜尋框
排序下拉選單使用 Alpine x-show（此處靜態展示，省略下拉面板）

<div class="showcase-toolbar">
  <div class="toolbar-section toolbar-search">
    <div class="spotlight-search">
      <i class="bi bi-search search-icon-left"></i>
      <input type="text" placeholder="搜尋...">
      <div class="search-actions-right">
        <button class="btn-icon"><i class="bi bi-x-lg"></i></button>
        <button class="btn-icon active"><i class="bi bi-arrow-right"></i></button>
      </div>
    </div>
  </div>
  <div class="toolbar-section toolbar-controls">
    <div class="control-group">
      <button class="btn-icon"><i class="bi bi-funnel"></i></button>
      <button class="btn-icon"><i class="bi bi-sort-down"></i></button>
    </div>
    <button class="btn-icon active"><i class="bi bi-grid-3x3"></i></button>
    <button class="btn-icon active"><i class="bi bi-eye"></i></button>
    <button class="btn-icon"><i class="bi bi-list-nested"></i></button>
  </div>
</div>