在线访问:GitHub Pages | Cloudflare Pages
技术栈: React, Next.js, TypeScript, Tailwind CSS, MDX
其他玩家的 Fork
按 Ctrl/Cmd + p 或点击搜索框打开搜索面板,支持:
- 拼音搜索(全拼、首字母缩写)
- 模糊匹配
- 键盘导航(↑↓ 选择,Enter 跳转,Esc 关闭)
按 Ctrl/Cmd + Shift + p 打开命令面板,可快速执行:
- 打开计算器
- 跳转到 Github 文件页面 (只在 MDX 页面生效,方便快速修改)
PC 浏览器可以自由拖动,支持:
- 基础运算:
+ - * / ^ () - 百分号:
25%→0.25 - 中文变量:
攻击力 = 500 - 公式变量:变量存储公式,引用时自动重新计算
- 循环引用检测
命令:
clear/cl- 清屏(保留变量)reset- 清屏并清空变量show <变量名>- 查看公式定义help- 显示帮助exit/quit/q- 关闭
示例:
> 基础伤害 200
> 伤害倍率 0.8
> 最终伤害 = 基础伤害 * 伤害倍率
> 最终伤害 = 160
> 基础伤害 100
> 最终伤害 = 80 # 自动重新计算
安装依赖:
pnpm i启动开发服务器:
pnpm dev打开 http://localhost:3000 查看网站。
打开 http://localhost:3000/editor 使用一个内置编辑器编辑 MDX 文件 (另外本地开发环境下,也就是启用 pnpm dev 服务器时,可以在 MDX 页面上使用命令面板,快速跳转的该文件的内置编辑器编辑页面)。
添加或修改 MDX 文件后,下面命令可以手动重新生成搜索索引(pnpm build 和 pnpm dev 时都是会自动执行的,仅当你手动添加了新文件又要开发环境下使用搜索面板搜索的时候才需要手动执行以下):
pnpm index添加新图片后,需要转换为 webp 格式 (png 原图会保留,下面的命令会在 /public/webp 下存放所有的压缩后的 webp 格式,为了加快加载速度):
pnpm webp点击展开组件文档
MDX 文件支持以下 frontmatter 字段:
| 字段 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title |
string | - | 页面标题 |
tag |
string | - | 分类标签 |
toc |
boolean | true |
是否显示目录 |
draft |
boolean | false |
草稿模式(仅 dev 可见,build 时排除) |
page-width |
string | lg |
页面宽度 |
keywords |
string 或者 string[] | - | 自定义额外的搜索关键词 |
nickname |
string | - | 别名(用于搜索) |
page-width 可选值:
| 值 | Tailwind class | 宽度 |
|---|---|---|
sm |
max-w-xl | 576px |
md |
max-w-2xl | 672px |
lg |
max-w-3xl | 768px |
xl |
max-w-4xl | 896px |
2xl |
max-w-5xl | 1024px |
3xl |
max-w-6xl | 1152px |
full |
max-w-7xl | 1280px |
也支持自定义宽度值(如 1200px、80rem),移动端会自动撑满屏幕。
搜索会自动索引:title、keywords、nickname、tags、weapon_type、element、rarity、tag 等字段。
<Callout>默认灰色提示</Callout>
<Callout color="blue">蓝色提示</Callout>
<Callout color="green">绿色提示</Callout>
<Callout color="yellow">黄色提示</Callout>
<Callout color="red">红色提示</Callout>
<Callout color="purple">紫色提示</Callout><Highlight>默认 sunny 黄色高亮</Highlight>
<Highlight color="sunny">sunny - #faeb7b</Highlight>
<Highlight color="peach">peach - #f6c9b6</Highlight>
<Highlight color="cyan">cyan - #bee2dc</Highlight>
<Highlight color="violet">violet - #b8bcfa</Highlight>
<Highlight color="magenta">magenta - #e9b5fa</Highlight>
<Highlight color="hazy">hazy - #d3d3d3</Highlight><Red>Red - #cf5148</Red>
<Yellow>Yellow - #cb9434</Yellow>
<Green>Green - #50946e</Green>
<Grey>Grey - #7d7a75</Grey>
<Orange>Orange - #d27b2d</Orange>
<Brown>Brown - #9f765a</Brown>
<Blue>Blue - #387dc9</Blue>
<Purple>Purple - #9a6bb4</Purple>
<Pink>Pink - #c14c8a</Pink><Fire>Fire - #f8c618</Fire>
<Ice>Ice - #90f5ff</Ice>
<Shock>Shock - #a09eff</Shock>
<Corrosive>Corrosive - #c3db2a</Corrosive>
<Kinetic>Kinetic - #becacc</Kinetic>以类似 GIF 的方式展示 mp4 视频(自动播放、循环、静音、无控制栏)。视频文件放在 public/videos/ 目录下。
<VideoGif src="/videos/snake-god-slash.mp4" />
<VideoGif src="/videos/demo.mp4" alt="技能演示" width={400} />| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
src |
string | 是 | mp4 路径,如 "/videos/xxx.mp4" |
alt |
string | 否 | 无障碍描述 |
width |
number | 否 | 视频宽度(px) |
致谢来源卡片,通常放在页面末尾。
<Credit platform="bilibili" author="逆战未来" url="https://www.bilibili.com/video/BV1x4QgBKEoR" title="BV1x4QgBKEoR" />
<Credit platform="douyin" author="逆战未来" url="https://v.douyin.com/mv1-Ieg5xjQ/" title="mv1-Ieg5xjQ" />
<Credit author="某作者" url="https://example.com" title="参考文章" />| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
platform |
string | "link" |
平台 |
author |
string | - | 作者名 |
url |
string | - | 链接地址 |
title |
string | - | 标题(显示在作者名旁) |
platform 可选:bilibili, youtube, twitter, github, douyin, tieba, link
带等级色条的表格,用于展示陷阱/技能的等级数据。等级 1-4 分别有不同颜色标识。数据支持 "400x3=1200" 格式,会自动将 x 转换为 ×。
<LevelTable
headers={["等级", "伤害", "冷却", "DPS"]}
data={[
[1, "400×3=1200", "5.5秒", 218],
[2, "480×3=1440", "2.5秒", 576],
[3, "600×3=1800", "2.5秒", 720],
[4, "720×3=2160", "2.5秒", 864],
]}
/>| 属性 | 类型 | 说明 |
|---|---|---|
headers |
string[] | 表头 |
data |
(string|number)[][] | 行数据,第一列为等级(1-4) |
通用数据表格,支持图标列、对齐方式和 **加粗** 高亮。
<DataTable
headers={["元素类型", "最多层数", "效果", "持续时间"]}
align={["left", "center", "left", "left"]}
data={[
{ icon: "/icons/elements/fire.png", cells: ["火焰(灼烧)", 5, "每 **2** 秒承受 **10 × 层数** 的伤害", "每 **2** 秒衰减 **1** 层"] },
{ icon: "/icons/elements/cryo.png", cells: ["寒冷(冰缓)", 3, "移速逐级降低", "**10** 秒未刷新直接消失"] },
]}
/>| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
headers |
string[] | - | 表头 |
align |
("left"|"center"|"right")[] |
- | 各列对齐方式 |
nowrap |
number[] | - | 不换行的列索引 |
iconSize |
number | 24 | 图标尺寸(px) |
data |
RowData[] | - | 行数据 |
RowData 格式:
- 简单行
CellValue[]— 直接是每列的值 - 带图标行
{ icon: string, cells: CellValue[] }— icon 在最左列显示
CellValue 为 string | number | ReactNode。字符串中 **text** 会自动高亮。
武器技能展示组件。WeaponSkill 是外层容器,内部放 ActiveSkill 和 PassiveSkill。
<WeaponSkill>
<ActiveSkill
name="飓龙连击"
icon="/icons/weapons/skills/T_Weapon_Skill_20003000011_2.png"
duration={-1}
cooldown={25}
count={1}
>
技能描述文字
</ActiveSkill>
<PassiveSkill
name="炙热龙炎"
tag="快速连发"
icon="/icons/weapons/skills/T_Weapon_Skill_20003000011_1.png"
>
被动技能描述
</PassiveSkill>
</WeaponSkill>ActiveSkill 属性:
| 属性 | 类型 | 说明 |
|---|---|---|
name |
string | 技能名称 |
icon |
string | 图标路径 |
duration |
number | 持续时间(秒),-1 表示无限 |
cooldown |
number | 冷却时间(秒) |
count |
number | 可累积次数 |
children |
ReactNode | 技能描述 |
PassiveSkill 属性同 ActiveSkill,额外支持 tag(自定义标签文字,如"快速连发")。
Boss 卡片组件。BossCard 通过 title 属性匹配 boss 数据自动渲染卡片。BossCardGrid 是网格容器。
<BossCardGrid>
<BossCard title="金牌打手" />
<BossCard title="Z博士" />
<BossCard title="变异Z博士" />
</BossCardGrid>| 属性 | 类型 | 说明 |
|---|---|---|
title |
string | Boss 名称(匹配数据源) |
Buff/Debuff 卡片系统,数据来自 data/cards-data.json。
<BuffCardGrid defaultSize={140}>
<CardRef slug="element-invasion" />
<CardRef slug="weak-point-boost" />
<CardRef slug="easy-toughness" />
</BuffCardGrid>CardRef 属性:
| 属性 | 类型 | 说明 |
|---|---|---|
slug |
string | 卡片的 slug(对应 cards-data.json) |
BuffCardGrid 属性:
| 属性 | 类型 | 说明 |
|---|---|---|
defaultSize |
number | 卡片默认尺寸(px) |
children |
ReactNode | CardRef 列表 |
BuffDetail 属性(单独展示某个 buff/debuff 详情):
| 属性 | 类型 | 说明 |
|---|---|---|
name |
string | 名称 |
icon |
string | 图标路径 |
type |
"buff"|"debuff" |
类型 |
effect |
string | 效果描述 |
children |
ReactNode | 详细说明 |
直接使用,无需传参:
<AtkChart /> {/* 武器攻击力强化等级 / 消耗折线图 */}
<WeaponAttenuationChart /> {/* 当前武器伤害衰减图 */}
<CritCalculator /> {/* 暴击期望计算器(含概率坍缩机制) */}
<DamageCalculator /> {/* 武器伤害计算器 */}
<PeekabooGrid /> {/* 捉迷藏物品图鉴网格 */}解码 CG:
python3 ./scripts/convert.py "/e/games/WeGameApps/rail_apps/逆战:未来(2002130)/NZM/Content/Movies"解包 Pak:
./scripts/decrypt.sh NZM/Content/AIBehavior/更多详细介绍 BV1fVfXB8EkT
更多关于逆战未来的内容,见 https://qiekn.notion.site/nzm (我的一些随手笔记,类似于草稿纸)