`）——一页几十个色相，不再用 `--poster-hue` 在 CSS 里推导，陷阱一节的静默失效因此在结构上不可能发生。 - 品牌回落紫 `#8B5CF6`（约 7% 的番）**不是这部番的颜色**：视为无色相，按彩度 0 渲染成中性灰，也不进「按色调逛」的任何分组。 - 页面三层底色：ground `oklch(13% .012 h)`、surface `18% .014`、popover `20% .016`。这是首页对 `--bg: #000` 的**记录在案的例外**。tone / quiet 文字、 58% 白正文、pill 上的 tone 字、实心按钮上的深色字——全部在 `lib/home/tone.test.ts` 里对 360 个色相穷举证明 ≥ 4.5:1。 ### 两条例外，一条不变 - **文字链接和区块短线用焦点番的 tone，不用 `--accent` 蓝。** 理由同详情页动作行：这一页每个有颜色的东西都带着番剧色相，一个孤零零的系统蓝读起来像从别的 App 掉进来的。 - **整页唯一实心按钮**是 hero 的「查看详情」（tone 底 + 同色相 15% 字）。追番是玻璃档。 - **焦点环不变**：永远是那一个蓝色 box-shadow。`focusRing.test.ts` 检查所有 `:focus-visible` 落在被样式化元素本身上的规则。 ### hero - 本季评分前五部，**有色相的排在前面**（`colouredFirst`）：第一张决定整页的颜色，无色相的封面打头会让首页一打开就是灰的。 - **每 8 秒自动切到下一部**（2026-10-07 起；这是 Don't 一节「无自动轮播」的唯一例外），按 WCAG 2.2.2 配齐暂停： - 鼠标停在 hero 上、或**键盘焦点**在 hero 里时暂停，两者都结束后**接着剩下的时间**走，不从头算。只认键盘焦点（`:focus-visible`）：鼠标点过的按钮会一直留着焦点，按「任何焦点都暂停」算，读者按了继续 hero 也不会动。触摸不算悬停； - 短条后面一个暂停 / 继续按钮（桌面 28px，手机 44px 触控区里画 32px 的圆），按一下一直停到再按；名字说的是按下去会做什么（暂停自动切换 / 继续自动切换）。手机上它脱离文档流贴在这一行右端，出现时居中的短条不动； - 标签页在后台时不切，回来后这一部**重新给满 8 秒**； - hero 整个滚出视野时也不切：焦点番决定整页底色，看不见的轮播仍会给读者正在看的区块换颜色； - `prefers-reduced-motion` 下**完全不自动切**，也没有暂停按钮（水合前同样没有）； - 手动切换（点短条、方向键）让新的那一部从头算 8 秒。选中的短条变成同色的暗轨道，8 秒里被自己的颜色填满——一段暂停时跟着停住的 CSS 动画（`data-held`），所以倒计时看得见、组件不用每帧渲染。自动切换不进读屏的 live region（否则每 8 秒播报一次）；手动切换时 hero 处在暂停中，照常播报。规则在 `lib/home/heroRotation.ts`，接线在 `useHeroRotation`。 - 五条短条，每条是它那部番自己的颜色；支持方向键。五张全部常驻叠放，切换只有 CSS 过渡，不重新挂载；没聚焦过的 banner 不下载——自动切换前 2.5 秒先加载下一张，免得它在自己的交叉淡化之后才蹦出来。`prefers-reduced-motion` 关掉全部动画和过渡。 - 背景光晕是封面模糊（blur 90px），**遮罩在 hero 底边之前淡出**，不渗进下一节。 - hero 从页面最顶端开始，透明的站点顶栏叠在它上面（hero 用 `margin-top: calc(-1 * var(--nav-h))` 上拉，自己画一层页面底色）：高 540px （平板 496px、手机 500px），内容从 100px（手机 136px）开始——与设计稿的绝对位置一致，也和顶栏还在 hero 上方时的位置一致。上拉放在 hero 上而不是 `

` 上：没有焦点番时 hero 不渲染，排在第一的区块不该滑到顶栏下面。顶栏的规格见 Component Stylings → Navigation。 ### 今日更新 - 当天每一部都是一张独立的卡，**任何宽度都不折叠**。手机上曾把已播的折成一张「已播 N 部」的卡，规则按 `data-state="aired"` 隐藏卡片，而卡片每分钟重新归位：页面开着时一部番到点变成「已播」，就从行里消失了。 `TodayRail.css.test.ts` 拦住任何隐藏卡片的规则。 - 桌面滚轮滚不动这一行（竖向滚轮滚的是页面），所以： - **按住拖**（只认鼠标主键；触摸本来就能横滑）。移动超过 6px 才算拖动：此后捕获指针、行跟着走，光标 grab → grabbing，拖动中不选中文字和图片、不吸附，浏览器自己的链接 / 图片拖拽被拦下。松手**不打开**松手处的卡片；没超过 6px 的按下仍是一次点击； - **甩**：松手时还在动（读最后 120ms 的速度；停住超过 80ms 再松手不算），行接着滑、每 16ms 保留 95% 的速度，慢到 0.08px/ms 以下或撞到头就停，然后**平滑停到最近一张卡对齐 gutter 的位置**（或两端）。横向滚动（触控板）一来就让出；竖向滚轮滚的是页面，甩动照常走完并停到卡上。甩动中**点一下只是停住**，不打开经过的那张卡（和原生惯性滚动一样），然后停到最近一张卡；打断的是平滑对齐时点击照常生效。 - **行下一条细滑动条**（所有宽度；**不要左右按钮**——压在封面上的圆按钮是用户明确否掉的）。滑块宽度 = 这一行在屏内的比例（最窄 6%），位置 = 滚了多远。平时是 2px 的细线、滑块用页面的 tone-line；鼠标移上去、按住或键盘聚焦时轨道变 6px、滑块变 8px 并换成页面的 tone。按住滑块拖，按住的那一点一直在指针下；点轨道空白处，行**平滑滑过去并停在一张卡上**，按住不放接着拖就改成手跟着走；拖完同样停到最近一张卡。手机上可点区域 44px 高（没有悬停，只在拖动时变粗）；手指在空轨道上**松开且没移动才算点**——从滑动条开始的竖向滑动可能是在滚页面，浏览器接手时（pointercancel）什么也不做。键盘和读屏走它前面那个看不见的 ``：← → 一张卡、Page Up / Page Down 一屏、Home / End 两端（平滑中再按，从正在去的位置接着走，连按两下走两张）；值按**停靠点的序号**计（不是像素，读屏加一就是一张卡）；读出「第 a–b 部，共 n 部」。高对比度模式下轨道有边框、滑块用系统色，焦点用透明 outline（在该模式下会显现）。这一行放得下时滑动条**保留位置但不画**（量出来之后下面不会跳）。 - 行尾一块收尾面板（不是卡，没有 `data-state`，不计数）：「今天的番就这些」、「明天 · 周日 10月11日 · 27 部」（明天没有就只写日期）、「看完整放送表 →」。 - 拖动、甩动、拖滑块的时候：不吸附，经过指针下的卡片不浮起。 - 这一行**第一次进入视野**时，卡片从左到右依次淡入上浮（每张晚 45ms，最多排到第 10 位）；**加载时已经在屏幕上就不播**（按整个视口判断），免得已经看到的内容闪一下。动画自己播完，不留任何隐藏状态，播完撤掉 `data-enter`（否则每到一部番开播，换了位置的「现在」标记会再浮一次）；减弱动态效果时不播。 - 手机直接横滑，按卡吸附（`scroll-snap-type: x proximity`）。 - 打开时这一行滚到「现在」和下一部要播的番都在视野里；放得下时连带前一张已播的。滚的是**行自己**，不用 `scrollIntoView`（会连页面一起滚）。 - 算术（拖动阈值、点击要不要吞、甩动速度与衰减、停靠点、滑块尺寸与换算、翻页落点、打开位置、读屏的「第几部」、入场顺序）在 `lib/home/railScroll.ts`；接线在 `useTodayRail.ts`。滑块位置每帧直接写到元素上，不为了挪一根条重渲染整行卡片。 ### 时间「现在」标记、「N 分钟后」、hero 的下一集时间：服务端渲染时用渲染时刻 + `Asia/Shanghai`，水合后换成浏览器时钟和时区（`useSyncExternalStore`，不用 effect + setState）。`/api/anime/schedule` 按**服务器所在日**分组，生产上是 UTC，即上海 08:00 到次日 08:00；午夜之后的深夜档在当天组里，标「次日」。 ### 几何与手机端内容宽 ~1280，桌面边距 80px（更宽时居中），手机 20px。手机端按设计稿**不显示「完结佳作」**；「先试试播放器」只在桌面出现（`/player` 需要 File System Access，手机浏览器没有）。 ### 放送表页（Schedule page · `/calendar`）和首页同一套规则（取色、两条例外、时间、边距），实现在 `components/schedule/`，纯逻辑在 `lib/schedule/`。只记和首页不同的地方： - **整页穿选中那一天的颜色**：那天评分最高的**有色相**的番（同分取先播的；没人有评分取第一部；整天都没有有色相的番才是中性灰——和首页 hero 的 `colouredFirst` 是同一个决定）。切换星期 = 地色、选中标签、柱子、「现在」线一起过渡 0.9s。复用首页的词汇而不是另起一套：`

` 用 `HomeHueScope.module.css` 的 `.scope`，`pageToneVars` 写在 `

` 上，每一行写它自己那部番的 `cardToneVars`。 - **七天**从接口的 `today` 往后排，没有番的那天也有标签（数量 0）；接口失败时不画七个 0，只说一句没加载出来。七个面板**全部服务端渲染**，非选中的 `hidden`—— 一周的 `/anime/` 链接都在 HTML 里，切换星期不发请求。 - 「现在 HH:MM」只画在今天的面板；今天全部播完时画在最后（和首页「今日更新」一致）。 - **文字最浅 58% 白**。行底是 3% 白罩层（hover 6.5%）、选中的星期标签 8%，罩层只会拉低对比度，所以单独证明过（`lib/home/tone.test.ts`）；设计稿给已播时间的 50% 在最亮的罩层上只有 4.46:1，没用。 - **≤1100px**：右栏的框排到列表下面（601–1100 两列、≤600 一列），本周柱状图不显示（星期标签上已经有数量）。断点是 1100 不是 900：两栏时一行要让出 300px 的右栏和 40px 间距，在追的番的「在追 / 未看」再占掉一列，901–1000 之间标题只剩几十像素。时间列在手机布局以上一直是 96px——「次日 01:00」「Tmrw 01:00」放不进 80。 - **≤900px**：星期标签变成一排横滑的 44px 胶囊（今天带一个点），选中的胶囊靠 **滚动这一排自己**露出来（`lib/schedule/reveal.ts`），不用 `scrollIntoView` ——它会连页面一起滚。设计稿只有桌面画板，手机端照这一条和上一条做。 - 访客看到登录说明（服务端渲染，浏览器零请求）；登录用户看到「我追的 · 本周」，数据是页面在服务端带 cookie 取的在追列表，最多 8 行，再多就链到「全部在追」（`/watching`，见下一节）。放送表没加载出来时登录用户**也不显示**这一框（空框会说成「这周没有更新」），决定在 `lib/schedule/aside.ts`。 - 副标题说明时间口径：SSR 和水合时是「北京时间（UTC+8）」，之后浏览器不在 UTC+8 就改成「你的本地时间（UTC−7）」——和时间本身同一次切换。已知局限（和首页「今日更新」同源）：七天仍按接口的**服务器日**（UTC）分组，只有往后跨日的标「次日」； UTC 以西的读者会在某天的标签下看到实际属于前一天的时间，没有「前日」标记。彻底修要让接口按上海日（或读者的日）分组。 - SEO：`

` 仍是原来的「今日新番放送日历」（视觉隐藏），可见标题是设计稿的「放送表」，与首页「品牌 h1 + 视觉标题」同一个做法。 ### 全部在追（`/watching`）两处「全部在追」——首页「继续看」的区块头、放送表「我追的 · 本周」超过 8 行时——都打开这一页：读者在追的每一部，用「继续看」打头的那张大卡（横幅、状态、上次观看、进度、下一集、「继续看第 N 集」）。`/profile`（带状态标签的「我的追番」）不变，页头右侧「管理追番」一键可达。实现在 `components/watching/`，卡片是 `components/home/ContinueCards.tsx`，和首页共用一份。 - 和首页同一套规则（取色、两条例外、边距）：`
` 用 `HomeHueScope.module.css` 的 `.scope`，整页穿第一部有色相的番的颜色（读者最近动过的那部；都没有才是中性灰）；每张卡写它自己那部番的 `cardToneVars`。 - 顺序和「继续看」一致：接口的顺序，最近更新的在前（`continueCards`），所以这一页的前三张就是首页那三张。桌面两列，≤900px 一列；是一个列表（`
`），读屏能听到有几部。前两张卡的横幅优先加载。 - `force-dynamic` SSR，和首页一样在服务端带 cookie 取在追列表（`fetchWatching`）；渲染期不读 cookie，浏览器里零请求。登录门和 `/profile` 一样在 `proxy.ts`：访客直接去 `/login?from=/watching`（保留语言前缀），不会看到空壳。代理放行了但接口拒绝的会话，页面自己同样送去登录；没有 `loading.tsx`，这个跳转才是真正的 307。 - 空的时候说「还没有在追的番剧」并链到本季；接口失败时说没加载出来，不当成空列表（那是对读者账号的错误陈述）。登出不跳页，所以内容放在 `SignedOutGate` 里，登出后换成登录提示；登出记在当前文档上（`hasSignedOutHere`），浏览器前进 / 后退复用的缓存页面重新挂载时也不会再显示上一位读者的列表。`noindex`。 ### 季度页（`/seasonal/[season]/[year]`）照 AniList 季度页的结构（筛选栏 + 标签行 + 三种视图），用本站的颜色。实现在 `components/seasonal/browse/`，纯逻辑在 `lib/seasonal/`（地址栏参数、筛选排序、柱图、文字、批次都有单测）。 - 整季一次服务端渲染，之后全在浏览器里：每一部都是 `/anime/` 链接，第一批之外的带 `hidden`，「显示更多」只是去掉它。筛选、排序、视图写进地址栏（`history.replaceState`，参数顺序固定，默认值不写），旧参数（`show`、单个 `genre`、 `sort=format`）照样能读。没有 `loading.tsx`（流式会让 404 变成 200）；换季度 / 年份是普通跳转，等待时结果区画骨架屏——全页唯一的骨架屏。 - 颜色：底色平时是纯黑，选了一个色调后换成 `oklch(13% 0.016 h)`，0.9s 过渡，从顶栏下面就开始铺。每张卡、浮层、图表卡用它自己那部番的色阶（`toneLadder`）；已选的控件是系统蓝，「今天」那根柱是系统绿。 - 时间：服务端渲染和水合时是北京时间（UTC+8 固定偏移），水合后换成浏览器的钟和读者所在的时区（`useSyncExternalStore`，和首页、放送表同一个切换），每 30 秒走一次；放送日柱图、「今天 / 明天」、放送时刻、按放送时间排序都读同一个钟。时区是按时刻取的偏移（`lib/seasonal/clock.ts` 的 `ZoneOffset`），夏令时两边各算各的；不用 `Intl`。标题排序在服务端排好：Node 和浏览器的 ICU 数据不一样。 - 柱图两种模式：连载中、有下一集时间的不少于 20 部 → 星期柱；否则开播月份柱（最多 6 个月加「待定」）。不到两根柱就不画。 - 接口给不出的东西，控件自己退场：没有一部有收藏数就没有「收藏」排序，没有原作就没有「原作」筛选，没有一部确定是续作就没有「新作 / 续作」；没有主制作公司的卡不留空行。「下一集时间」可能已经过去：过去 24 小时内算「第 N 集更新」，更早的当作不知道。 - 浮层只在 `(hover: hover) and (pointer: fine)` 下出现（键盘聚焦标题时也出现）， `aria-hidden`——它只重复详情页的内容；靠右两列往左弹，每个断点按列数写 `nth-child`；三列（601–767px）时不出现——中间那列两边都放不下 290px。 - 手机（≤600px）：筛选栏换成搜索框 + 筛选按钮，点开是挂在 body 下的底部面板（`createPortal`，`useScrollLock` 锁 ``，焦点留在面板里）；没有列表视图（`view=table` 在手机上画成网格）；年份只列明年到六年前（加上当前页的年份），更早的走桌面菜单或地址栏。 - 追番按钮是站内同一套一键追番（`useQuickSubscribe`），作为参数传进视图，所以渲染测试不必带上 toast 那条依赖链。「✓」再点一次取消追番：先 `DELETE /api/subscriptions/:id/untouched`，只追了番的直接删、提示里能撤销；有进度、评分、别的状态或动态互动的，服务端不删并回 409，页面弹确认框（`UnfollowDialog`，挂到 body、焦点落在「保留」、Tab 只在两个按钮间走）再删。海报角（`QuickSubscribeToggle`）的「✓」仍是去详情页的链接。 - 动效：卡片进场 0.3s（一张错开 16–40ms），浮层 0.22s，下拉 0.2s，底部面板 0.44s； `prefers-reduced-motion` 时全部关掉。追番「+」只淡入，图表卡上的「+」悬停只变色：这么小的图标做缩放或旋转，过渡最后几帧会变暗、挪零点几像素，结束时再突然变清楚（逐帧截图实测，页面缩放 80% 时最明显，1x、2x 也有）。悬停时封面图在框里 0.6s 放大到 1.04 倍（封面网格和图表卡一样，框、角标和「+」不动）：放大的是包在图片外的那一层（`FadeImage` 的行内 `transition` 会盖掉图片自己的过渡）；这一层和图片本身都一直单独合成（`will-change: transform`）：外层不单独合成，放大停下那一帧图会突然变清楚；图片不单独合成，放大途中会一帧糊一帧清楚。 ### 类型页（`/genre/[slug]`）方案 B「类型主页」：一个类型先是一页总览，要看全部时打开同一路由下的网格。实现在 `components/genre/`，纯逻辑在 `lib/genre/`（地址参数、接口参数、三语标题、砖封面去重、数字都有单测）。卡片、浮层、追番按钮、时钟、骨架和「显示更多」都复用季度页的（`components/seasonal/browse/`），页面框架也是季度页的 `frame.module.css`。 - 两个视图一条路由：没有视图参数是主页；`?list=`（airing / popular / recent / classic / top）、`?decade=`、`?with=`（另一个类型的 slug）是网格，同时出现时按这个顺序取第一个有效的，未知值一律忽略、回到主页（不 404、不 500）。旧的 `?page=N` （只有页码）308 永久跳转到人气排序网格里装着旧第 N 页第一部的那一页（旧版每页 24 部，网格每页 36 部）。每个视图的 canonical 是它自己的规范地址（`viewPath`）：主页是主页，网格是「视图 + 页码」，重复参数、未知参数、`?page=1` 都归到同一个地址；两个类型的组合（动作 × 奇幻与奇幻 × 动作）是同一批番，canonical 写成切换条上排在前面的那个类型（`/genre/action?with=fantasy`），另一边照常能打开。页码超出这个切片的最后一页是 404，不是空网格。 - 主页：切换条是 18 个等宽格子加一块滑块，滑块一格宽、按格数平移，位置是纯 CSS，服务端 HTML 里就是对的；放不下一行时（手机、平板、英文）格子定宽、横向滑动并把当前类型滚进视野，英文桌面改成两行 9 个。四条横排各 6 部，不满 4 部不出现；评分前 10 在桌面（≥1200px）放右栏，更窄时排在横排后面。三排砖同一种组件：底色取第一张封面的色相（`oklch(21% .045 h)`），右上角三张封面扇形叠放、悬停散开，左下角名字和部数；按年代 → 类型 → 制作公司的顺序挑封面，前面用过的尽量不再用。不要线条、比例条、柱图——用户否决过两版。 - 网格：每页 36 部，服务端只渲染地址里那一页；「显示更多」是下一页的真链接，脚本拦下来在浏览器里取下一页接在后面，取失败时下一次按下就照链接走。前 5 页滚到附近自动加载，原地最多 10 页，再往后按下就打开下一页本身（文档里不堆上千张卡）。用键盘按下时焦点落到新来的第一部的标题上。加载过的页记在历史记录里（季度页的 `batchMemory`，只在浏览器地址就是这个网格时读写），页数据留在本页内存，返回时直接恢复。 - 跳转时：视图之间、类型之间都是普通路由跳转（每条路都是 HTML 里的链接）；等待时立刻换成目标视图的标题（切换条的滑块先滑过去、网格的标题和部数），内容区是那种视图的骨架屏。没有 `loading.tsx`（流式会让未知类型的 404 变成 200）。 - 卡片时间行：在播的番和季度页一样写下一集还有多久；其余写「2019 年春季 · 全 25 集」，手机写「年份 · 格式」（季度页 `CoverCard` 的可选 `airing` 参数）。 - 动效沿用季度页的时长；入场动画和悬停位移不放在同一个元素上（填充模式的最后一帧会压住 `:hover` 的 transform）——砖的入场在 `li`，抬起在链接上。 ## Depth & Elevation | Level | Treatment | Use | |-------|-----------|-----| | Base (Level 0) | `#000000` — 无 shadow | 页面底色 | | Surface (Level 1) | `#1c1c1e` — 无 shadow 或极淡 `0 1px 2px rgba(0,0,0,0.20)` | 卡片、面板、侧栏 | | Elevated (Level 2) | `#2c2c2e` + `0 8px 32px rgba(0,0,0,0.50)` | 下拉菜单、Tooltip、浮层面板 | | Modal (Level 3) | `#2c2c2e` + `0 16px 48px rgba(0,0,0,0.60)` + 背景 `rgba(0,0,0,0.60)` overlay | 模态框、确认弹窗 | | Navigation Glass | `rgba(9,9,11,0.78)` + `backdrop-filter: saturate(160%) blur(16px)`，页面顶部透明、滚动后才出现 | 站点顶栏（见 Component Stylings → Navigation） | | Focus Ring | `0 0 0 3px rgba(10,132,255,0.40)` | 键盘焦点态，所有可交互元素 | Shadow 哲学：暗色主题 shadow 必须足够重（0.40–0.60 opacity）才能在黑色背景上可见。但 Level 0→1 的提升主要靠背景色差而非 shadow — 与 Apple 一致，shadow 留给真正"浮起来"的元素。 ## Do's and Don'ts ### Do - 用 `#0a84ff` (`--accent`) 作为唯一可点击操作色 — 按钮、链接、焦点环、进度条。唯一记录在案的例外是详情页 hero 的主 CTA（用番剧色，理由是对比度，见 Color 一节） - 用三层背景色差（`#000` → `#1c1c1e` → `#2c2c2e`）表达层级，而非堆 shadow - 封面图使用 `aspect-ratio: 3/4` + `object-fit: cover`，保持网格整齐（详情页例外，见 Responsive 一节） - 所有可交互元素必须有 focus ring（`0 0 0 3px rgba(10,132,255,0.40)`）—— 焦点环永远是这一个蓝色，不随番剧色变 - 新增 UI 文案时同步更新六个词典文件（三语 × 服务端/客户端两套），见 Iteration Checklist 第 6 条 - 用 `pickTitle(anime, lang)` 选择标题，不要手动判断语言 - 动画只服务于状态理解 — 卡片悬浮、模态进出、Toast 通知 - 保持 `font-variant-numeric: tabular-nums` 在所有数字场景（评分、集数、排名） - 顶栏使用毛玻璃效果（`backdrop-filter: blur`）— 这是 Apple 暗色 UI 的标志 ### Don't - 不要引入蓝色以外的 accent 色 — 无紫色、无渐变、无霓虹 - 不要给卡片加 border-radius > 16px — `--radius-xl`(20px) 仅限大弹窗 - 不要对 Level 0/1 元素加 shadow — 纯黑背景上的卡片靠边框和色差区分 - 不要用 `#5ac8fa` (teal) 做可点击元素 — teal 严格限定为只读/信息场景 - 不要用纯装饰动画 — 无 parallax、无浮动粒子、无自动轮播。唯一的例外是首页 hero 的 8 秒自动切换，而且只按 Homepage → hero 一节的暂停规则（悬停 / 键盘焦点 / 暂停按钮 / 后台标签页 / 滚出视野时停，减弱动态效果时完全不动）。别处要加自动切换的东西，先回到那一节 - 不要在暗色背景上用低透明度 shadow（< 0.3 opacity）— 会完全不可见 - 不要用 `#ffffff` 做大面积背景 — 本项目只有暗色主题 - 不要给封面图加圆角 > 12px — 封面图遵循卡片的 `--radius` - 不要在正文里居中对齐 — 正文左对齐，只有 hero 标题和空状态可以居中 - 不要拿 `--poster-tone-mid` / `--poster-tone-low` 写字 — 它们是线条和填充，分别只有 3.65:1 和 1.25:1。需要"番剧色但轻一档的文字"用 `--poster-tone-quiet` - 不要假设 CSS Module 里的单类选择器能压过 `globals.css` —— `[data-x="true"] .y` 是两个选择器，赢过 module 的 `.y`。这类冲突不报错：样式表读起来完全正确，页面渲染的是另一套值。改一个有全局同名类的元素之前，先在浏览器里看计算值 ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | < 600px | 2 列网格，顶栏 ☰ + 左侧抽屉，搜索收起为图标 | | Tablet | 600–900px | 3 列网格，顶栏 ☰ + 左侧抽屉（顶栏 <1024px 都是手机形态），侧边栏隐藏 | | Desktop | 900–1400px | 6 列网格，侧边信息面板；完整顶栏从 1024px 起（900–1023px 仍是手机形态的顶栏） | | Large Desktop | > 1400px | 内容居中，`max-width: 1400px`，两侧留白 | ### Touch Targets - 所有按钮最小高度: 44px（Apple HIG 标准） - 顶栏手机形态的每个控件（☰ / 搜索 / 登录 / 头像 / 铃）: 44×44px；抽屉里的链接行 48px 高 - 卡片整体可点击，无需精确点击小文字 - Genre Tag 间距 ≥ 8px，防止误触 ### Collapsing Strategy - 网格: 6 列 → 3 列 → 2 列，`gap` 从 16px 缩为 12px - 详情页: 不是"双栏塌成单栏"。hero 手机端保持海报和文字并排、动作行横跨两列；简介/评分那一栏在 ≤900px 塌成单栏且评分改横排；作品信息 8 列 → 4 列（≤1100px）。完整取值见 [Anime Detail Page](#anime-detail-page详情页页面规范)，那一节是权威 - 顶栏: 桌面（≥1024px）三栏完整导航 → <1024px 仅 ☰ + Logo + 搜索图标 + 登录 / 头像 - 导航: 桌面顶栏 → <1024px 时 ☰ 打开左侧抽屉（不是底部 Tab Bar，也不是悬浮按钮——2026-10-06 定） - 弹幕面板: 桌面侧边常驻 → 移动端底部 Sheet（上滑展开） - 封面图: 网格卡片保持 `3:4`，宽度随网格自适应。详情页是例外：hero 海报 `210 / 300`（7:10），相关/推荐格 `6 / 8.6`。AniList 的大图是 460×650，7:10 几乎不裁，`3:4` 会看得见地切掉画面；同一页上的这两处用同一个比例，否则等于把同一张图裁两次。 > ⚠️ 实测全 `src/` 里封面比例有 6 种（`3/4`、`2/3`、`5/7`、`7/10`、`6/8.6`、 > 库里的 `2/3`）。上面这条"永远 3:4"目前只在网格卡片成立。这是待收敛的漂移， > 不是详情页引入的 —— 收敛它需要单独看一遍每个调用点，别顺手改。 ### Font Scaling - Display (48px) → 移动端 32px - H1 (32px) → 移动端 24px - H2 (24px) → 移动端 20px - Body (16px) → 不变 - 使用 `clamp()` 实现平滑缩放：`font-size: clamp(32px, 5vw, 48px)` ## Agent Prompt Guide ### Quick Color Reference | Role | Value | Token | |------|-------|-------| | Page background | `#000000` | `--bg` | | Card background | `#1c1c1e` | `--bg-card` | | Elevated surface | `#2c2c2e` | `--bg-elevated` | | Primary accent | `#0a84ff` | `--accent` | | Accent hover | `#409cff` | — | | Accent dim fill | `rgba(10,132,255,0.12)` | `--accent-dim` | | Info teal | `#5ac8fa` | `--teal` | | Primary text | `#ffffff` | `--text` | | Secondary text | `rgba(235,235,245,0.60)` | `--text-secondary` | | Tertiary text | `rgba(235,235,245,0.30)` | `--text-tertiary` | | Success | `#30d158` | `--success` | | Warning | `#ff9f0a` | `--warning` | | Error | `#ff453a` | `--error` | | Card border | `#38383a` | `--separator-opaque` | | Focus ring | `0 0 0 3px rgba(10,132,255,0.40)` | — | | Card hover shadow | `0 8px 24px rgba(0,0,0,0.40)` | — | | Modal shadow | `0 16px 48px rgba(0,0,0,0.60)` | — | ### Example Component Prompts - "创建一个 Anime Card：`#1c1c1e` 背景，`12px` 圆角，`1px solid #38383a` 边框。封面图 `aspect-ratio: 3/4`，`object-fit: cover`。标题 Sora 14px weight 600 白色，最多 2 行 `line-clamp`。副标题 DM Sans 13px `rgba(235,235,245,0.60)`。Hover 时 `translateY(-4px)` + `box-shadow: 0 8px 24px rgba(0,0,0,0.40)`，`transition 250ms ease-out`。" - "创建主操作按钮：`#0a84ff` 背景，白色文字，`10px 20px` padding，`8px` 圆角。DM Sans 14px weight 500。Hover `#409cff`，Focus `0 0 0 3px rgba(10,132,255,0.40)`。Disabled opacity 0.35。" - "站点顶栏已经存在（`components/layout/Navbar.tsx`），不要再造一个。改它之前读 Component Stylings → Navigation：64px（手机 56px，`--nav-h`），顶部透明、滚动后 `rgba(9,9,11,0.78)` 毛玻璃，链接 40px 高 14.5px / 600、安静态 `rgba(235,235,245,0.66)`、当前页白字 + `aria-current`。" - "创建模态弹窗：`#2c2c2e` 背景，`20px` 圆角，`24px` 内边距，`box-shadow: 0 16px 48px rgba(0,0,0,0.60)`。背景 overlay `rgba(0,0,0,0.60)`。标题 Sora 20px weight 600。关闭按钮右上角圆形 icon button。" - "创建剧集列表项：`#1c1c1e` 背景，`12px` 圆角，`16px` padding。左侧集数 JetBrains Mono 13px `--warning`。标题 DM Sans 16px weight 500 白色。右侧播出日期 13px `--text-tertiary`。Hover 背景 `#2c2c2e`。" ### Iteration Checklist 1. 可点击 = `#0a84ff`，只读信息 = `#5ac8fa`，无例外 2. 三层背景：`#000` → `#1c1c1e` → `#2c2c2e`，层级靠色差不靠 shadow 3. 字体切换：标题/Display 用 Sora，正文/UI 用 DM Sans，数据/代码用 JetBrains Mono 4. 所有数字 `tabular-nums`，所有交互元素有 focus ring 5. 动画只做状态转换（hover/enter/exit），easing 统一 `cubic-bezier(0.4, 0, 0.2, 1)` 6. 新增文案要写进六个词典：三种语言 × 两套（`locales/{zh,en,zh-Hant}.ts` 服务端 + `{zh,en,zh-Hant}-spa.js` 客户端）。漏掉客户端那一半不会报错 —— `t()` 找不到键时返回键本身，页面上直接渲染出 `library.overflow.rescan` 这样的字符串。`spaDictCoverage.test.ts` 是这道闸门，但它只认 `t("字面量")`：写成 `t(TABLE[k])` 这种间接调用它看不见 7. 网格 6→3→2 列，断点 900px / 600px，`max-width: 1400px` 8. 网格卡片封面 `3:4`，不裁切、不拉伸；详情页另有比例（见 Responsive 一节的例外） ## Decisions Log | Date | Decision | Rationale | |------------|---------------------------------------|------------------------------------------------------------------------| | 2026-03-27 | 放弃紫色 `#7c3aed`，换用 iOS Blue `#0a84ff` | 用户明确要求；Apple Blue 更克制，避免霓虹感 | | 2026-03-27 | 背景从蓝调暗色换为 Apple True Black | 与 iOS Blue 体系一致；OLED 省电；视觉更沉稳 | | 2026-03-27 | 保留 Sora + DM Sans 字体组合 | Sora 已集成且有日系差异点；DM Sans 易读性好；竞品调研确认品类内少见 | | 2026-03-27 | 副色选 iOS Teal `#5ac8fa` | 与 iOS Blue 同属 Apple 色系，保持系统感；严格限定为只读/信息场景 | | 2026-03-27 | 文字改用 Apple Label System（rgba） | 比固定灰色更自然地适配不同背景层，层次感更丰富 | | 2026-03-27 | 初版设计系统建立 | 由 /design-consultation 基于竞品调研（AniList、MAL）生成 | | 2026-08-27 | 31 个 token 全部落进 `globals.css`，并由 `globals.test.ts` 钉住 | 此前只落了 10 个且其中 6 个漂移；实测全 `src/` 里 `--accent` 9 处引用、`--bg` / `--text` 各 1 处、其余调色板 0 处 —— 设计系统只存在于文档里。修正漂移值零风险：那 6 个没有任何 `var()` 引用 | | 2026-08-27 | Score Badge 从"恒琥珀"改为三档，且背景文字成对 | 规范和实现各错一半：规范没有分档，实现按阈值算文字却硬编码琥珀背景 → 线上 ★9 是绿字琥珀底。选择修订规范匹配已成立的做法（番剧卡片也在用阈值），而不是删掉信息维度 | | 2026-08-27 | `--poster-accent` 明确为"不要蓝色以外 accent"的例外 | 它是每部番自己的封面取样色，不是品牌色；但严格限定在 hero 光晕，不得用于可点击元素 | | 2026-08-27 | `--text-quaternary` 保持 0.18 并标注为仅限禁用态 | ~2.5:1 低于 WCAG AA，但禁用控件本就豁免（1.4.3）；标注防止它被当成"更淡的正文色"使用 | | 2026-08-30 | 详情页单独立页面级规范（本文 Anime Detail Page 一节） | 它是全站唯一同时"内容压在照片上 + 每部番一个颜色 + 一屏放六类信息"的页面，component-level 规则搬过来逐条失效（灰描边在照片上读不出、蓝 accent 和番剧色打架、卡片边框把一页切成三十个盒子）。与通用规范冲突时以该节为准 | | 2026-08-30 | 新增 `--poster-tone-quiet` = `oklch(68% 0.07 h)` | 色阶里缺"番剧色但轻一档的文字"，最像的 `--poster-tone-mid` 是给线条的，拿它写 10px 标签跨全色相最差 3.65:1 不过 AA —— 而这个错在样式表和评审里都长得完全正确。68 是反解出来的：C=0.07 时三层背景的 4.5:1 明度地板分别是 57 / 62.5 / 67.5，token 要扛最严的那层。参考设计用 62（它只有一个背景色），搬过来会"页面上过、进卡片就不过" | | 2026-08-30 | 海报光晕改用 `--poster-tone`，投影与光晕拆开 | 原来两层都用原色 `--poster-accent` 且都等 `data-accent-ready`：饱和封面画出刺眼红环、寡淡封面等于没画，且前 400ms 海报贴平在 banner 上。投影和颜色无关，不该跟着等 | | 2026-08-30 | hero 动作行钉死"整页只有一个实心按钮" | 追番曾是系统蓝实心，和番剧色主 CTA 两个实心互抢；且蓝色不在这一页的调色板里（其余每个有色元素都带番剧色相），那个唯一的系统蓝读起来像从别的 App 掉进来 | | 2026-08-30 | 集数区加集标题语言开关，默认读者自己的语言 | 原来硬编码并排，每行两条、13 集变 26 行，列表从"扫"变成"读"。开关只在有东西可切时出现；偏好走 `useSyncExternalStore` + localStorage，不用 `useState`+effect（水合不一致 / 级联渲染，后者是 lint 闸门拦的那条） | | 2026-08-30 | `components/ui/Button` 的适用范围写进文档：只服务详情页 hero 三个调用点 | 它的 `.primary` 是 `--poster-tone` 不是 `#0a84ff`，`.outline` 是玻璃不是灰描边 —— 和 Buttons 一节描述的全站约定是两套东西。此前文档只写了约定，读者会以为共享组件实现了它 | | 2026-09-25 | 首页改为「逐番色」页面级规范（Homepage 一节） | 首页穿上焦点番的颜色：tinted ground、tone 链接、唯一实心按钮用番剧色；颜色串在 TS 里拼好写在使用处，回落紫按无色相处理；360 色相对比度由 `lib/home/tone.test.ts` 证明。无自动轮播 | | 2026-10-06 | 站点顶栏改为仿 AniList 的三栏结构（Navigation 一节） | 顶部透明、滚动后毛玻璃、往下滚收起往上滚滑出；搜索收成图标、分类是下拉（没有类型索引页，下拉就是索引）；<1024px 是 ☰ + 左侧抽屉而不是底部 Tab Bar。断点按「英文、未登录的桌面栏放不下」实测取的。顶栏不按首页焦点番取色：深色半透明玻璃压在有色页面上已经带色 | | 2026-10-07 | 首页 hero 改为每 8 秒自动切换（推翻 2026-09-25 的「无自动轮播」） | 用户拍板。按 WCAG 2.2.2：悬停和键盘焦点时停、停完接着剩下的时间走；暂停按钮；后台标签页不切、回来重给 8 秒；减弱动态效果时完全不切；手动切换从头算。另加一条：hero 滚出视野时也不切——焦点番决定整页底色，看不见的轮播会给读者正在看的区块换色 | | 2026-10-07 | 今日更新：桌面按住拖 + ← →，手机不再折叠已播 | 桌面滚轮滚不动横向行，看起来只有前几部；手机的折叠按状态隐藏卡片，页面开着时到点的番会从行里消失。← → 到头用 `aria-disabled` 而不是 `disabled`，聚焦着按到头不丢焦点 | | 2026-10-07 | 今日更新去掉 ← →，换成行下一条可拖的细滑动条；甩动带惯性并停到卡片上；行尾加收尾面板 | 用户嫌压在封面上的圆按钮丑。在设计画布上比过「时间轴指针」「表盘」「安静边缘」三案后，定为「无按钮的卡片行 + C 案那条细滑动条（可拖）」，并要求有动画：悬停沿用卡片规则，加甩动惯性、停靠、点轨道平滑滑过去和首次进入视野的入场 | | 2026-10-07 | 「全部在追」是一个独立页面 `/watching`，用「继续看」的大卡 | 两处「全部在追」原来链到 `/profile`（通用的状态标签页），和名字说的不符。新页登录门同 `/profile`；接口失败说失败，不当成空列表 | | 2026-10-07 | 抽屉因路径变化（浏览器前进 / 后退）关闭时，焦点不拉回 ☰ | 读者已经离开打开抽屉的那一页，把焦点拽进新一页的顶栏是一次没要求的跳转；Esc / ✕ / 点暗处 / 点抽屉里的链接仍然还给 ☰。同一天：顶栏控件用负 `scroll-margin-top` 抵消 `html` 的 `scroll-padding-top`（聚焦它们不再让页面跳），焦点环加透明 outline 给强制色彩模式 | | 2026-10-18 | 季度页改为仿 AniList 的浏览页（季度页一节） | 旧版每点一个药丸、每按一次「显示更多」都回服务端重新渲染。现在整季一次渲染、筛选在浏览器里，状态在地址栏里，所有番剧链接（包括没显示的那批）和季度 / 年份链接都在 HTML 里。去掉了「上一季 / 下一季」：设计稿是年份、季度两个下拉，相邻季度最多两跳 | | 2026-10-19 | 类型页改为「类型主页 + 同一路由下的网格」（类型页一节） | 旧版是一张按人气翻页的网格，看不出一个类型的样子。主页把连载、人气、近年、经典和评分前 10 摆在一屏，年代 / 常一起出现 / 制作公司用带封面的砖而不是图表（两版报表式设计被否决）；「查看全部」和砖打开同一条路由的网格；每个网格视图有自己的 canonical（「90 年代动作」「动作 × 奇幻」「评分最高」都有自己的标题和搜索需求），旧的 `?page=N` 308 到装着它第一部的新页 |