首页设计稿

信息结构 1:1 取自 prts.wiki 现网首页（轮播 7 张 / 12 个入口 / 今日信息 / 亮点干员 / 近期新增 / 网站信息），只换视觉。页面只管自己——各区块样式在页面的 <style> 里（生产环境 = TemplateStyles），整页标 ak-not-prose；去标题 / 去目录 / 去白纸归皮肤。

源文件 preview/_src/pages/home.html，python3 scripts/build-preview.py 生成。

各宽度区块顺序相同：Hero → 入口网格 → 今日信息 → 亮点干员 → 近期新增 → 网站信息。今日信息曾经是一张大卡（手机上 ~860px），手机上把亮点干员 / 近期新增排到它前面（同 m.fgo.wiki 单栏首页）；收成一行时间条 + 今日开放小格、未来七天排期折叠之后手机上 ~400px，就回到入口网格后面——「今天能刷什么 / 周常还剩多久」是每天打开首页的头一个问题，不该排在两大块图鉴后面。DOM 顺序与视觉顺序一致，不用弹性列 + order。

preview/home.html单独打开 ↗

页面与皮肤的分工

首页要的东西分两半，站点侧不需要往 MediaWiki:Common.css 里粘任何皮肤类名。

皮肤这半（Skin:Arknights 的 resources/skins.arknights.styles/common/mainpage.less：action=view 的首页拿到 .ak-layout--mainpage / .ak-body--mainpage，同 Citizen 的首页处理）——都是「在首页少做点什么」，动的全是皮肤自己的 DOM，TemplateStyles 够不到（它给所有选择器加 .mw-parser-output 前缀，只能管到正文里面）：

少做什么	怎么做
标题不显示	.ak-layout--mainpage .ak-page-heading 只留给读屏器（sr-only）——h1 仍是大纲的根，不是 display: none（核心的 MediaWiki:Mainpage-title 置空是另一条路：那样 h1 本身就是空的）
动作簇保留、靠右	.ak-page-header__row { justify-content: flex-end; margin-bottom: 0 }——标题出流后它是行里唯一的项，默认会滑到左边
手机上动作簇也不显示	≤639：.ak-page-tools { display: none }，页面头与 #contentSub 的下边距去掉——390 宽下它是页眉与 Hero 之间整整一行图标，首页读者用不上（编辑走桌面版或编辑链接）；h1 仍是 sr-only，页面头没有看得见的东西，正文直接从页眉下的版面间距排起（Hero 顶从 115 提到 69px）
正文不包白纸	.ak-body--mainpage：无底色、无边框、无内边距
不让出目录导轨	无目录页的 .ak-layout--no-toc 本身就不让导轨、正文铺到 --ak-content-max + --ak-toc-w + --ak-gutter 的总宽，右缘与有目录的页面对齐；首页不需要再多做什么（mainpage.less 里那条 .ak-main 覆盖是早先无目录页还收窄到阅读列时留下的，可去）
不出目录	首页恒 toc-enabled = false：右侧粘性目录、目录按钮与手机页眉里的目录图标都不渲染
命名空间小标 / 指示器	.ak-page-header__top:empty 自动收起；编辑真放了 <indicator> 会照常显示（要不要藏是站点的决定）

页面这半：结构 = MediaWiki:首页 / Template:首页 输出的 .mp-*，最外层标 ak-not-prose（见设计理念 · prose / not-prose）；区块样式 = Template:首页/styles.css（TemplateStyles）；Hero 轮播（Swiper）与时钟 / 周常倒计时 / 资源开放状态由 Gadget 按页加载——皮肤不依赖它们，.ak-countdown .ak-panel .ak-op-card 等组件样式已在设计系统层。

整块可点的格子照 wikitext 能写出来的样子写：wikitext 写不出 <a class>，所以入口格、资源卡、干员卡、关卡卡这些「整块是链接」的东西都是「类名在容器上 + 里面一条不带类名的真链接」——<div class="mp-nav__tile mp-a"><a href>…</a></div>，模板照此输出 <div class="mp-nav__tile mp-a">[[干员一览|…]]</div>。.mp-a 让里面的链接照抄容器的排法（display 与 flex / grid 的轨道、对齐、间距全部 inherit）、铺满容器，::after 铺满整格接点击，焦点环画在容器上（:has(> a:focus-visible)）。设计系统组件（.ak-op-card .ak-stage .ak-btn .ak-chevrons）也这样放进容器，外观不变。

链接必须是真盒子，不能用 display: contents 偷懒：没有盒子的 <a> 在 Chromium / WebKit 里不算「按住的链接」（它们沿布局树找链接），整格拖不出去——拖到标签栏开新标签页失效；右键菜单和中键按 DOM 找链接，照常能用，所以不容易发现。现网首页第一版就踩了这个坑。轮播例外：它在 Swiper 里，按住拖动是滑动切换，本来就拖不出链接——要在新标签页打开用中键或右键菜单（它们按 DOM 找链接，照常可用）。

设计稿里「0. 页面级」那段 CSS 是静态骨架的补丁（预览没有「当前是首页」这个状态），选择器按预览骨架写（.ak-page-header__title），与真皮肤的 DOM 不一致，不要照抄；无目录由 front matter toc: false 给出 .ak-layout--no-toc，与真皮肤一致。

Hero 轮播

• 一张横幅 + 左右箭头，收窄到横幅宽、居中：现网旧首页的 slick 轮播的形制——一张横幅（旧版 936×300）、两侧箭头、一排指示条。曾经做成「轮播（左）+ 候选列表（右）」铺满正文列：列表 7 行把整块撑到 430–520px 高，宽屏下图框按 3:1 跟着正文列一起长，首屏一大半是它，退回单张。整块最宽 960px（= 现网活动横幅原图 960×308 的宽），在正文列里居中；图框比例就是横幅的 960:308，活动横幅正好铺满、不留边，正文列比 960 窄时整块跟着收、比例不变。宽屏下整块就是 960 × 308 的横幅本身。
• 尺寸只看宽度：整块按正文列宽等比缩放，视口高度不参与——窗口拉高拉矮、手机地址栏收放时轮播不变形、不跳宽。曾按 100svh 扣掉页眉 / 说明栏 / 网页活动 / 入口格一排算「折叠线预算」（--mp-fold-*），视口矮时收框宽（最窄 800）、再压图框高（最矮 120 / 手机 80），保证入口网格第一排露在首屏；代价是同一宽度下窗口一变高矮轮播就跟着缩、矮屏上图框被压扁成 6:1 以上，退回只按宽度。
• 箭头压在图的两侧：竖向居中（Hero 里只有图框），40 × 72 的半透明黑块 + 白箭头，悬停黑白反转；鼠标移进轮播才浮出（同旧轮播，平时不挡画面），键盘聚焦时也出；触屏不出（hover: none 或 pointer: coarse）——手指直接滑，要跳到某一张点指示条。触屏上是整个收掉（display: none）而不是留一块透明的：透明的照样接点按，点在图两侧会翻页而不是进链接。箭头压在画面上，跟画走、不跟主题走，两版一样。
• 图下不放说明栏：曾有一条「类别 / 标题 | 起止 + 倒计时 | 06 / 07 · 指示条 · 暂停」，宽屏多占 66px、手机上叠成三四行，而它说的横幅自己都写着（活动图上有标题和开放时间，寻访图上有卡池名和干员），去掉。标题改作主图的 alt（铺底那张留空，不读两遍），读屏和指示条的悬停提示照旧有名字。
• 指示条压在图的右下角、常显、没有底，同旧轮播（.carousel-indicator）：一排半透明白条 + 黑投影，当前格实白，鼠标移进轮播时白条长高一倍；没有底，靠投影从画面上分出来，浅色横幅上也看得见。一张一格，点哪格跳到哪张，由脚本按张数生成（模板只输出 slide，不用知道有几张）；自动播放进度长在当前格里——当前格的实白是轨道、官网青 cyan-500 从左到右填满就切下一张。它压在画面上，跟画走、不跟主题走，两版一样。尺寸照旧轮播：白条 50 × 5、间隔 10、距右 40 距底 20；旧轮播是 936 × 300 整块缩放，这里每格宽写成 cqw（60 / 936，含两侧各 5 的间隔），Hero 窄于 640px（容器查询，不按视口——侧栏收起 / 展开时正文列宽度会跳）时白条高 3、间隔 4、距右 12 距底 7，张数多、图又窄时每格往下压到 8px。点按区整格 20px 高、格与格相接（间隔画在格内，点在两条之间不会漏到下面的链接上）。
• 曾在触屏上常显箭头与指示条、指示条在底边正中垫一块半透明黑：手机上图框只有 110–125px 高，两个 32 × 52 的箭头 + 一条 152 × 20 的黑底盖掉画面的 16%，现网反馈「挡住活动的图片」；有的手机浏览器不报 hover: none，又成了点一下才出，各家不一样。退回旧轮播的做法。鼠标移进来时轮播是停着的，所以桌面上看到的进度是静止的，那一刻它回答的是「在第几张」。只有一张时脚本收起箭头与指示条。
• 两套主题只差在框线和焦点环：终端（暗）框线 #2f3133、焦点环官网青 cyan-500（同页眉当前项，是「黑框」的语言）；档案（亮）框线 / 焦点环走正文令牌（蓝 blue-500 = 亮色的 --ak-accent）。画面上的东西（模糊铺底、箭头、指示条）两版一样。prefers-reduced-motion 下不自动播、切换无动画；无 JS 只露第一张。
• 整张 slide 就是一条链接，不放按钮：原来的主按钮和横幅去的是同一页，次要按钮（「卡池一览」「集成战略一览」…）在下面的入口网格里都有。
• 条数：由数据源决定——进行中 + 48 小时内开始的活动、寻访各取最新 6 条，所以上限 12 条，常见 6–8 条。整块高度与条数无关，条数只决定指示条有几格。
• 不标状态：数据源是「进行中 + 48 小时内开始」，还没开始的那几张横幅上自己写着开放时间。曾在说明栏里给未开始的标一枚红色「预告」，随说明栏去掉。
• 自动播放自己计时，不用 Swiper 的 autoplay 模块：计时就是当前格 ::after 上一段 6 秒的 CSS 动画（scaleX 0 → 1），播完（animationend）slideNext()；鼠标在轮播上 / 键盘焦点在轮播里 / 拖动中 / 轮播滚出视口 / 标签页在后台时把动画停住（animation-play-state: paused），继续时接着走。不用脚本逐帧计时：原先每帧往当前格写一次进度，主线程每帧都要重算样式、提交一帧，首页顶部滚动时还拖着页眉 / 头图的模糊每帧重画（现网反馈过卡顿）；动画只动 transform，在合成器上跑。Swiper 的 pauseOnMouseEnter 只管 .swiper 本身，箭头 / 指示条都在它外面，要另挂一套 pause / resume，两套状态会互相打架（从指示条移进图后照样播、进度跳变、进度条长出格）。不放暂停键：上面这几种情况都会停住，暂停键随说明栏一起去掉。
• 减弱动效下不自动播，脚本自己把关，不靠「动画停着就不会播完」：prefers-reduced-motion 下进度条整个不生成（.is-stopped → display: none），animationend 的处理里也先看是不是不自动播。MW 核心 accessibility 特性（mediawiki.skinning/accessibility.less，SkinModule 默认开）的减弱动效规则是 animation-delay: -0.01ms + animation-duration: .01ms（都带 !important，现网 skins.arknights.base 里原样带着，预览骨架里没有）——动画一生成就落在终点，animation-play-state: paused 拦不住，照样派发 animationend；原先只靠 paused，于是每换一张、新的一格立刻「播完」又换下一张，每帧切一张停不下来（现网反馈「首页活动图片疯狂切换闪现」，Windows 关掉「动画效果」的读者必现）。系统设置在页面开着时改了，脚本跟着切（matchMedia 的 change）。
• 横幅整幅 contain 显示、不裁：现网横幅两种比例（活动 960×308 ≈ 3.1:1、寻访 960×524 ≈ 1.8:1），cover 会裁掉寻访图的标题 / 干员。图框是活动横幅的比例，寻访图左右的留白由同一张图模糊铺底，做法同旧轮播（Widget:mp-carousel-div）：下层 .mp-hero__bg（同文件再嵌一次）铺满宽、顶对齐、blur(20px)，原亮度、不透明；上层主图 contain 居中，四周一圈 drop-shadow(0 0 10px #000) 把它从铺底上托起来。两版一样（曾经黑版 brightness(.55) 压暗、白版半透明压在浅灰上，主图没有投影，和铺底糊在一起）。旧轮播整块 transform 缩放，模糊和投影跟着缩；这里半径写成 cqw（20 / 936、10 / 936，下限 8px / 4px），手机上不会糊成一片色块，不认 cqw 的浏览器用前一条的定值。比旧轮播多放大 12%，把 blur 的透明毛边推出框外（旧轮播左右两端发白就是这道毛边）。不用 style="--bg:url()"——MW 的清洗器不放行 url()。
• Swiper 11 在预览里从 preview/vendor/swiper/ 本地引入，生产环境由 Gadget 按页加载。
• 配色收成几个 --mp-hero-* 变量（框线、铺底、焦点环）：默认值是白版，全由正文令牌推导、不写死一个色值；黑版在 tokens.css 的三种暗色选择器下覆盖——显式 data-theme="dark"、MW 的 skin-theme-clientpref-night、以及 @media (prefers-color-scheme: dark) 下的「跟随系统」（那一种没有 data-theme，只按 [data-theme] 分支会漏），写法同 chrome/demo-theme.css。（图下还有说明栏和网页活动列表时，暗色下整块是黑面板，要在 .mp-hero 上把中性色令牌重映射一遍给里面的 .ak-tag / .ak-countdown 用；两块去掉后不再需要。）
• 焦点环一律内缩（大图 / 箭头 / 指示条都贴边，外扩会被 overflow 裁掉）。不放角标三角。

入口网格

.mp-nav 12 格：现网同一套白线稿图标，mix-blend-mode: difference 与格底做差——底深得白、底白得黑，亮暗主题与悬停反转一律正确；只写中文名（英文见「双语标签」），悬停黑白反转。字是格子的主体：中文名 18px（手机四列 14px）——原来 14px，格子有 130–220px 宽却字小得要凑近看。暗色下整块压一档明度：格底从面板色 #1a1b1c 压到 inset #141516（画布 #0f0f10 上仍看得出格子），中文从近白 #f0f0f0 降到官网正文灰 #d2d2d2、图标透明度 .85——12 格大字排在一起，纯白字 + 亮一档的格底整块发亮，比上面的轮播还抢眼。亮色不动。配色收成 --mp-nav-* 变量，三种暗色选择器同 Hero。

手机（≤ 639）一行 4 格、格高 64px，排法同桌面——图标在上、字在下，只是都收小：图标 52 → 36px、中文名 14px，图标与字之间不另留缝（gap / margin 归零）。36px 是按格高倒推的：内容区 62px 减一行字 18.2px 剩 43.8px；最高的图形（敌人档案 / 活动一览，96 格里不透明部分 78px）在 36px 时约 29px，图形到格子上沿 ~6px、字到格子下沿 ~7px、图形与字之间 ~8px——PNG 自带的透明边就是间距。图标不透明度、与格底做差、悬停反转都沿用桌面那一套，手机上不另写。格子写 min-height 不写 height：视口 < 332 时四个字折成两行、或读者调大字号时格子跟着长，不裁字；不足 64px 的余量由 justify-content: center 上下均分。（最早是 3 格、96px、图标 40px；中间有一版把图标放大到 63px、压淡成格子正中的水印、字压在上面，已改回。）

今日信息

整块是一张 .ak-panel，自上而下三段、横线隔开：时间条 · 今日开放（未来七天排期折叠在里面）· 补充说明。原来是「左 9 张资源卡 + 右时钟 / 倒计时大字面板 + 底部补充说明」，1440 宽 377px、~940 宽 440px、手机 860px，装的信息却只有「今天开哪几个本」和两个时间——现在分别是 ~290 / ~215 / ~400px（收起时）。

时间条（.mp-hud）：Bender 时钟 + 「10月3日 周六」（日期与周几之间只空一格，不加「·」；本地时区不是 UTC+8 时再跟一枚小字「UTC+8」：时钟走的是服务器时间，国内读者看到的就是自己的钟，不用注），紧跟着一条竖线、一句「剿灭作战 & 周常任务 1天17小时31分后刷新」——不再带「每周一 04:00 · 含特勤任务」的小字（刷新时刻倒计时已经说了，特勤任务算周常的一部分）。同一时刻的两个数一行写完、挨在一起读，不各占一块大字面板，也不把倒计时推到最右；字号字重同日期那一段，倒计时的数字不放大、不用 .ak-countdown 的大数字格——一行里只有时钟一个大字。旧版首页的「现在时间：…」「剿灭作战 & 周常任务将于 … 后刷新」本来就是句子。倒计时用中文单位、不补零。640 宽也排得下一行；手机上整段另起一行、不画竖线。

今日开放：9 关每关一枚 36px 高的小格（图标 + 名字），物资筹备 / 芯片搜索各一行，组名是左侧一列 overline。

• 今日开放 = 顶部 2px 青条；关闭 = 斜纹 + 灰度，排到本行末尾（JS 挪 DOM，Tab 顺序跟着视觉），格子上不再另标。
• 格子上不画开放日：原来每张卡底下一条七格，同一份排期画 9 遍、占掉每张卡三分之一的高，而「接下来几天怎么排」是第二个问题——收进下面的未来七天。
• 手机上改竖排小格（图标在上、名字在下），物资筹备 5 个、芯片搜索 4 个各占一行、等宽；<360 名字降到 11px（max(11px, var(--ak-fs-cjk-min))）。

未来七天：原生 <details class="mp-week">，默认收起，模板直接输出、不要脚本。开关（.ak-details 同款 + / −）钉在格子区右上角、与第一行格子同高——不单占一行，开合时也不挪位置；第一行格子右边让出开关的宽，格子多了先折行。手机上开关回到格子下面。展开是两张关卡 × 日子的表（物资筹备 | 芯片搜索，<960 上下叠）：

• 从今天起排 7 天，滚动，不是周一到周日：本周排期在周日打开只剩今天一列有用，而读者要的是「这个本接下来哪天开」。第一列是今天而不是明天——「今天开、明天不开 → 今天就刷」要把今天和后面几天放在一起比；上面的小格只回答今天。今天按游戏日算（04:00 切日，凌晨 0–4 点还算前一天）。
• 第一列表头写「今天」、加粗 + 青色底线，其余写周几（一 … 日，读屏读「周一」），表头只写一次，不在每一行重复。
• 开放日淡青底（--ak-accent-muted，同 <mark> / 表格当前行），今天开放 = 这一行唯一的实底——原来七格条的规则原样搬过来。
• 常时开放（作战记录 = weekly_7，daysOfWeek 七天全有）：整行合成一格「常时开放」——游戏也把「周 x、x 开放」换成「常时开放」；七格全亮读出来是「日程排满」，不是「没有日程」。
• 格子里只有给读屏的「开放 / 特别开放」（.ak-sr-only），看的人看底色 + 表头。行上的 data-days 与上面小格同一份参数。起点每天在变、页面又有解析缓存，模板输出哪天起都行（设计稿的静态 HTML 是抓取当天起），JS 按服务器日重写表头并逐格重算 on / today / force。

特别开放（forceOpenTable：一段时间 9 关全开，通常周年庆 / 大版本）= 游戏的整套「黄 S」（zone_group_holder 的 img_week_* / head_bar；逻辑见 WeeklyGroupZoneItem / StageDataUtil.WeeklyZoneOpenInfo）：次强调黄 --ak-accent-2 把这一块的青换掉——时间条下面一条通栏通知条（黄实底 + 左缘 .ak-stripe-edge 斜纹 + 黑圆 S + 截止时间；放在格子区外面，右上角的排期开关位置才稳定）、今天在区间内的小格顶条变黄、未来七天里落在区间内的天变黄（今天仍是唯一实底）。逐日算，不整段涂：区间由模板参数 data-force-open="起/止" 给出（同游戏的 startTime / endTime，通常周二 04:00 起 7 天，和表上的七天错开），脚本从今天起逐日判断（游戏排的是本周一到周日，这里是滚动的七天）；正常开放且在区间内的天也变黄（游戏里 OPEN → FORCE_OPEN 同样是黄 S，「为什么开」只有一个答案），过期自动消失。格子的淡黄在亮色是半透明黄压白面，暗色底更淡、把黄交给文字（半透明黄压深面会闷成橄榄）。新人 / 回归的 7 天全开是玩家各自的状态，wiki 不表现。设计稿标题右侧有一枚「演示：特别开放周」开关（假装前天起 7 天全开），生产模板不输出。

不放「今日开放 n / 9」计数，标题旁不放「资源收集一览」（现网没这页）；不写 LS / CA 关卡码，不在格子外再用文字把今天开放的关念一遍（读屏器靠格子自带的 sr-only 开 / 关文字）。

补充说明通栏在卡底，一条一行、右侧可带时限；没有就整段不输出，不带小标题。先列进行中的网页活动（地球图标 +「网页活动」+ 活动名链接，右侧结束时间；人工维护的 首页/网页活动，过了截止自动消失），再列小编的临时信息（维护 / 卡池提醒 …）。网页活动曾在 Hero 下单列一块「Web Event」红标签列表（名称 / 起止 / 倒计时 / ›），和轮播一起占首屏，并进来以后与补充说明同一个格式。周常刷新不在这里（它是固定项，在时间条上）。

时钟 / 周常倒计时 / 资源开放状态由脚本按 UTC+8 实时算，生产环境归 Gadget。

亮点干员

五组 .ak-op-card--sm，角上用游戏头像同款小职业图标 assets/profession/icon_*.png；各组流式排一行、放不下折行（同现网）：生日 / 新增 / 凭证兑换（高级凭证兑换 = 黄「兑」角标，中坚兑换 = 中坚蓝 #06587f「兑」角标；末尾青色「中坚甄选」CTA 格）/ 时装 / 模组（头像右上 30px 深底框放游戏模组类型小图标 assets/mainpage/module/，不用文字芯片）。

近期新增

关卡按活动 / 章节分组，用紧凑的 .ak-stage（见关卡 Stage · 紧凑），不按 EX / 剧情 / 难度上色条——关卡码已经说明类型，色条是重复信息；家具：主题 + 单件卡，分块小标题（.mp-label）已经说了哪块是主题、哪块是单件，卡上只写名字与描述，不再跟「主题」小标签。不放氛围值 / 关卡计数这类数字点缀；活动标题后也不跟灰色的关卡码前缀（TO / EE · ECB）——每格的关卡码已经带着它。

网站信息

三张 .ak-card。「关注 & 支持」是三枚第三方品牌按钮（B 站充电 / 微信打赏 / 支付宝打赏）：品牌识别用系统自己的句式——左侧 4px 品牌色条 + 品牌色 logo + 正文色文字，悬停整块反转成品牌色实底；品牌色只出现在它自己的按钮上、不进令牌，文字对比度不赌品牌色（白字压 B 站粉只有 2.7:1）。

双语标签

区块标题（今日信息 / 亮点干员 / 近期新增 / 网站信息）、入口名、亮点干员的组名、近期新增的面板标题、网站信息的卡片眉题只输出中文，英文写在 data-en 上；浏览器语言（navigator.languages）里一个中文都没有时，首页脚本把它们换成英文并标 lang="en"。原先中英并排各写一遍，中文读者看两遍，外文读者照样读不懂中文那半。默认输出中文，无 JS 也是中文；页面有解析缓存、不分语言，所以只能在前端换。只换这些标签，内容不翻译。英文入口名在手机四列里降到 12px、不加字距（中文的 .08em 字距对拉丁字母太松，Operations 14px 放不进 77px 的格子），再窄就按英文断字。按浏览器语言换字只有首页做（其它页是 wikitext 与模板输出，没有 data-en）；「成组的标题不并排中英」是通用规则，见字体排印 · 双语标题。