# search **Repository Path**: smalldo/searchwiki ## Basic Information - **Project Name**: search - **Description**: ifindhs 搜索相关！ - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-05-04 - **Last Updated**: 2026-08-24 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 炉石传说卡牌筛选器 纯静态前端页面，支持**卡牌查询**、**酒馆战棋**、**奖励路线**、**成就**、**语音**五个模块的多维度筛选、排序、分页浏览。 ### 目录结构 ``` hs/web/ ├── index.html # 页面入口 ├── README.md │ ├── raw/ # 原始数据（TSV，由 web.sh 从远程 MySQL 拉取） │ ├── cards.data # 卡牌原始数据 │ ├── heros.data # 英雄原始数据 │ ├── bgscards.data # 酒馆战棋卡牌原始数据 │ ├── bgsheros.data # 酒馆战棋英雄原始数据 │ ├── bgsskills.data # 酒馆战棋技能原始数据 │ ├── track.data # 奖励路线原始数据 │ ├── ac.data # 成就原始数据 │ └── voice.data # 语音原始数据 │ ├── data/ # 前端数据（JSON，由 build.py 生成） │ ├── cards.json # 卡牌查询数据 │ ├── bgs.json # 酒馆战棋数据 │ ├── track.json # 奖励路线数据 │ ├── ac.json # 成就数据 │ └── voice.json # 语音数据 │ ├── scripts/ # 脚本 │ ├── web.sh # SSH 远程拉取数据脚本 │ ├── build.py # 数据构建脚本（TSV → JSON） │ ├── update.sh # 一键更新脚本（拉取 + 构建） │ └── webm2webp.sh # webm 截帧转 webp 脚本 │ ├── js/ # JavaScript 模块 │ ├── module.js # DataModule 基类（通用数据加载、筛选、排序、分页、渲染） │ ├── common.js # 公共工具函数（悬浮预览、详情弹窗、列管理、回到顶部） │ ├── cards.js # 卡牌查询模块（继承 DataModule） │ ├── bgs.js # 酒馆战棋模块（继承 DataModule） │ ├── track.js # 奖励路线模块（继承 DataModule） │ ├── ac.js # 成就模块（继承 DataModule） │ └── voice.js # 语音模块（继承 DataModule） │ ├── css/ # 样式 │ └── style.css │ ├── img/ # 图片资源 │ ├── mana.png # 法力水晶图标 │ ├── Coin_Mana.png # 铸币图标 │ ├── Star.png # 星级图标 │ ├── common_s.png # 普通品质图标 │ ├── rare_s.png # 稀有品质图标 │ ├── epic_s.png # 史诗品质图标 │ └── legend_s.png # 传说品质图标 │ └── config/ # 配置文件 ├── expansion_groups.json # 扩展分组配置（按年份分组） ├── quality_order.json # 品质排序配置 ├── class_order.json # 职业排序配置 ├── type_order.json # 类型排序配置 ├── bgs_pool_groups.json # 酒馆战棋随从池分组配置 └── help.md # 帮助文档 ``` ### 数据更新流程 当 wiki 数据库有更新时，使用一键更新脚本： ```bash bash scripts/update.sh # 拉取数据 + 构建 JSON bash scripts/update.sh --pull # 仅拉取数据 bash scripts/update.sh --build # 仅构建 JSON ``` 或分步执行： #### 第一步：拉取最新数据 ```bash bash scripts/web.sh ``` 通过 SSH 远程执行 MySQL 查询，scp 拉取数据到 `raw/` 目录。 #### 第二步：构建前端数据 ```bash python3 scripts/build.py ``` 读取 `raw/*.data` 和 `config/*.json`，生成 `data/*.json`。 #### 第三步：部署 将以下文件部署到 Web 服务器： - `index.html`、`css/`、`js/`、`data/`、`img/`、`config/help.md` > **提示**：修改 `index.html` 中 JS/CSS 引用的版本号（如 `?v=6`）可强制刷新浏览器缓存。 ### 配置文件说明 | 文件 | 用途 | |---|---| | `expansion_groups.json` | 扩展包按年份分组（标准/狂野各年份独立分组），支持字符串匹配和对象规则匹配 | | `quality_order.json` | 品质下拉的显示顺序 | | `class_order.json` | 职业下拉的显示顺序 | | `type_order.json` | 类型下拉的显示顺序 | | `bgs_pool_groups.json` | 酒馆战棋随从池的分组配置 | 修改配置后需重新运行 `python3 scripts/build.py` 生效。 ### 架构设计 #### DataModule 基类（`module.js`） 所有数据模块（卡牌、酒馆战棋、奖励路线、成就、语音）继承自 `DataModule` 基类，封装了通用逻辑： - **数据加载**：`load()` → fetch JSON → `onDataLoaded()` 回调 - **筛选**：`filter()` → `applyFilter()` → `sortAndRender()` - **排序**：`compareItems()` 可被子类覆盖 - **分页**：`gotoPage()` → `renderTableRows()` → 分页器渲染 - **显示模式**：列表/图片模式切换，图片模式滚动自动加载 - **列管理**：显示/隐藏列，移动端/PC端不同默认配置 各子模块只需覆盖 `onDataLoaded()`、`applyFilter()`、`renderTableRows()` 等方法实现特有逻辑。 #### 工具函数 | 函数 | 位置 | 用途 | |---|---|---| | `parseFilterOptions(options, stripBrackets)` | `module.js` | 预处理筛选选项：分割 `[词][词2]` 组合，可选去掉 `[]`，去重排序 | | `parseFieldValues(value, stripBrackets)` | `module.js` | 解析卡牌字段值为独立关键词数组，用于精确匹配 | | `stripHtml(text)` | `common.js` | 去除 HTML 标签，用于搜索匹配 | | `buildSimpleMultiSelect()` | `module.js` | 构建简单多选下拉 | | `buildGroupedMultiSelect()` | `module.js` | 构建分组多选下拉 | ### 功能特性 #### 卡牌查询 - 多维度筛选：扩展（按年份分组多选）、职业（多选，支持任一/全部匹配模式）、品质、类型、种族（多选，支持任一/全部匹配模式）、派系、阵营、符文（多选）、法力水晶、攻击力（范围输入）、血量（范围输入）、特殊卡牌（异画/钻石）、引用机制（多选）、机制（多选）、自定义标签（多选）、收集状态 - 筛选精确匹配：引用机制/机制/自定义标签使用精确匹配，避免子集搜索问题（如搜索"嘲讽"不会匹配到"超嘲讽"） - 机制数据预处理：自动分割 `[战吼][嘲讽]` 组合为独立选项，去掉 `[]` 显示纯文本 - 自定义标签保留原样显示：数据是什么就显示什么，便于发现源数据格式问题 - 列表/图片两种显示模式，图片模式滚动自动加载 - 悬浮预览：列表模式悬浮卡牌名称弹出图片，钻石+异画卡牌悬浮显示双图 - 点击卡牌名称弹出详情弹窗（图片 + key:value 信息列表），含 Wiki 跳转链接 - 特殊卡牌详情弹窗显示两张图片：钻石显示原图+钻石图，异画显示原图+异画图，钻石+异画显示钻石图+异画图 - 多级排序：点击表头可叠加最多3级排序（升序→降序→取消），表头显示排序优先级标记（①↑ ②↓） - 扩展列按合集时间排序（而非字母排序） - 全文搜索、列管理（显示/隐藏列，移动端/PC端不同默认配置） - 描述/趣闻中英文分离：中文直接显示，英文 PC 端悬浮显示、移动端点击展开 #### 酒馆战棋 - 按类型、种族（多选，支持任一/全部匹配模式）、随从池（分组多选）、引用机制（多选）、机制（多选）、派系、等级、攻击力（范围输入）、血量（范围输入）、护甲（范围输入）等筛选 - 英雄悬浮显示英雄+技能双图，随从悬浮显示普通+三连双图 - 点击卡牌名称弹出详情弹窗（图片 + key:value 信息列表），含 Wiki 跳转链接 - 描述中同时显示普通和三连效果 - 等级列使用图片显示 - 列管理支持默认隐藏列（移动端/PC端不同配置） #### 奖励路线 - 多选下拉按分组展示（酒馆战棋 / 其他），支持多选筛选 - 全文搜索、排序 #### 成就 - 多选下拉按分组展示（冒险 / 其他 / 生涯 / 收藏 / 游戏 / 杂项），支持多选筛选 - 全文搜索、排序 #### 语音 - 查看卡牌语音文本，支持播放中文/英文语音 - 按行为类型筛选 #### 通用 - 回到顶部 / 置底悬浮按钮 - 多选下拉已选项显示为标签，支持点击 ✕ 单个删除 - 下拉框自动检测边界，防止超出页面宽度 - 所有多选下拉框顶部有"✕ 重置"按钮 - 每个模块都有重置按钮，一键清除所有筛选条件 - 数据懒加载，切换到对应 Tab 时才加载数据 - 顶部反馈按钮 - 移动端筛选面板默认折叠，点击展开/收起，筛选后自动折叠 - 排序/显示模式/列管理始终可见，不受筛选折叠影响 - 图片模式移动端每行显示 2~3 张卡牌 - 详情弹窗：单图时左图右信息，多图时图片横排在上、信息在下；移动端自适应宽度 - 移动端筛选面板为右侧抽屉式弹出，多选下拉面板自适应抽屉宽度 - 搜索匹配自动去除 HTML 标签（如 `消耗残骸` 搜索"消耗残骸"可匹配） #### PWA 与缓存管理 - 支持安装到桌面，像原生 App 一样启动，支持离线使用 - Service Worker 缓存策略： - **HTML 入口**：Network-First（超时 1.5s 回退缓存） - **静态资源**（JS/CSS/图标）：Cache-First + 版本化缓存名（`hs-static-{version}`） - **数据 JSON**：Stale-While-Revalidate（秒开 + 后台更新） - **远程媒体**（图片/语音）：Cache-First + LRU（上限 800 条） - 缓存管理面板（底部栏「🗑️ 缓存管理」按钮）： - 🔄 更新页面样式：清空 JS/CSS/HTML 缓存 - 📊 更新卡牌数据：清空卡牌/酒馆/成就等数据缓存 - 🖼️ 更新图片语音：清空卡牌图片和语音缓存 - 💣 全部清空：以上所有缓存一键清空 - 30 秒冷却时间防止频繁操作 - **三层降级策略**（不依赖 SW 也能工作）： 1. 有 SW 激活 → 通过 `postMessage` 由 SW 处理 2. 无 SW 但有 Cache Storage API（HTTPS/localhost）→ 直接操作 `caches` API 3. 无 Cache Storage API（纯 HTTP）→ 提示用户需要 HTTPS 环境