feat: maimai PRiSM PLUS 皮肤与全站深色模式

.gitignore

@@ -28,3 +28,6 @@ __pycache__/
 Thumbs.db
 results/local-*.json
 prompt0.md
+
+# Agent instructions belong in the user-level DSH home, not in this repo.
+AGENTS.md

docs/development.md

@@ -49,7 +49,14 @@ public/
   index.html                 面板骨架（含账号管理区）
   app.js                     Feed 渲染、筛选器、折叠、账号管理与同步进度
   dx.html / dx.js            DX Rating 榜（b35 + b15），填写完成用时
-  styles.css                 深色主题，无外部字体或 CDN
+  styles.css / ui.css        重做前那一版的配色与组件样式，现在是皮肤的浅色底子
+  theme.css                  maimai 官网皮肤层，参数取自 vendor/maimai/style.css
+  theme-dark.css             深色模式层，规则一律带 [data-mm-theme="dark"] 前缀
+  theme-night.css            夜版背景，只换 /assets/night/ 那套贴图
+  theme.js                   主题开关、移动端菜单、回到顶部（换主题的唯一写入口）
+  bg.html                    背景 iframe 的宿主页：官网那份动态背景
+  vendor/maimai/**           官网素材原样快照（style.css / img / fonts，见其 README）
+  assets/night/**            夜版贴图，由官方素材离线重上色生成
 tests/
   phase1.test.ts             旧接口回归测试
   phase2.test.ts             迁移、适配器、同步和调度测试
@@ -68,6 +75,21 @@ data/                       首次运行生成，本地数据不提交
 data/backups/               npm run backup 生成的快照目录
 ```
 
+## 前端皮肤与深色模式
+
+皮肤复刻 maimai DX 国际版官网 PRiSM PLUS 时期的样式：`public/vendor/maimai/` 是原样快照（只改过 URL），
+落到本站组件上的那一层全在 `public/theme.css`，与官方的有意偏差集中在它末尾那节，改之前先看那节。
+
+- 主题落在 `<html data-mm-theme="light|dark">`，偏好存在 `localStorage['mm-theme']`，没手动选过就跟系统。
+- 各页 `<head>` 里有一小段脚本在首帧前定好主题（六页重复同一段是有意的：抽成外链会先亮后暗）。
+- 载入顺序 `fonts.css → styles.css → 各页自己的 CSS → ui.css → theme.css → theme-dark.css`，
+  深色层一律带 `[data-mm-theme="dark"]` 前缀，所以浅色那套不用改。
+- 画布里的图是 JS 画的，CSS 管不到：`theme.js` 换主题时发 `mm-theme-change`，`stat-charts.js` 收到就按
+  当前主题重画（配色在它自己的 PALETTE 里）。
+- 页面不引外部字体或 CDN，离线可用：M PLUS 1p 只自托管 latin / latin-ext 子集，中文回退系统字体。
+- `bg.html` 是背景 iframe 的宿主页（结构取自归档快照，另加三行重置与夜版切换脚本），放在 `public/` 根下，
+  好让 `vendor/maimai/` 只留原样素材。
+
 ## 数据模型
 
 - `users`：一个本地人物。`is_self` 标记自己（最多一个，是主视图与 DX 榜的锚点）；`is_followed`（v7）标记**关注** —— 只决定「出不出在主视图」，不限数量，且与 `is_self` 是两层。详见下文「关注 ≠ 存在」。

public/assets/night/MANIFEST.txt

@@ -0,0 +1,20 @@
+source: public/vendor/maimai/img/prism/bg/  (PRiSM PLUS era, recoloured offline)
+generated: one-off local tool, not in the repo (see README.md)
+aurora-pc.png	197598	18a6832610a9e21f3a3bb1a4c7e185b7
+aurora-sp.png	145513	3cde15f7d5434c57ec879bb231f97d03
+cloud-back-c.png	8409	e531b5609f02a493988a909c86bbefd8
+cloud-back-l.png	9202	6115d9c264af03399bae8424e31b2942
+cloud-back-r.png	24061	e94f971ef5118e59a200ff43f92acd1a
+cloud-front-c.png	12656	3092cc9a619adcff2af05e40d8ca8438
+cloud-front-l.png	14177	cd7ad6c0810d073624ff7bbc4f3b907c
+cloud-front-r.png	14604	80ad1fd499ea7cfccdbdacf9501cc958
+pattern.png	391	b6d4555a3ef84dc7254f0a2fae1ea292
+rainbow-back-sp.png	20168	4f87fa4e84e99c13cb2e5eeb8c5ae34f
+rainbow-bottom-pc.png	45950	d8030f1827eb986ba60d92bc14be7c60
+rainbow-bottom-sp.png	28625	828af06998ae40d221717ddf672d2746
+rainbow-pc.png	30680	ef0394046890f7ada7c6fe734739cbf8
+rainbow-sp.png	27202	96b51196cc94ca6fff993d745cc750e5
+shines-pc.png	13572	632fde21eee7ebdb3e66847f92f2d7a2
+shines-sp.png	12218	8c6c281587dc92f6b232d7996dc804fb
+sky-frame.png	449	9fb8230b6de747cbe4476fe9058b0221
+sky.png	405	863652de17136067c9ac1dbc6032111a

public/assets/night/README.md

@@ -0,0 +1,34 @@
+# assets/night —— 夜版背景贴图
+
+夜版背景用的素材：结构和参数都还是官网那份 `style.css`，只是把 `vendor/maimai/img/prism/bg/`
+里那几张贴图按夜色重画了一遍。谁换哪一张、在哪个断点换，写在 `public/theme-night.css` 里。
+
+## 来源与做法
+
+- 底图来自 `public/vendor/maimai/img/prism/bg/**`（官方原图，未改动；字节与 MD5 见那份 MANIFEST）。
+- 重上色是离线做的一次性步骤：按原图的亮度分层，把白/亮部压成夜蓝、保留原来的粉/橙描边。
+  做法与每个参数的来由写在生成脚本的注释里；生成脚本是一次性的本地工具，没有进仓库。
+- **带 `-sp` / `-pc` 的素材必须跟着官方的断点走**：官方在基础规则里用 `_sp`、在
+  `@media (min-width:769px)` 里换成 `_pc`（尺寸也各不相同）。只出一份的话，宽屏会拿手机那张
+  顶 PC 那格 —— 彩虹两端那片云的 SP 版是被图片边界切平的窄裁版（左右两边 85% / 44% 的像素
+  是实心的），铺进 PC 那格就会在画面中间露出两条平直的切边。
+- 三处贴图在夜里额外淡了边，都是「官方素材被图片边界切平、白天靠底色看不出来、夜里露出来」这一类：
+  彩虹两端那片云的 PC 版底边淡 12%、曙光两端各淡 4%（`repeat-x` 的接缝）、彩虹后面那片云两端各淡 6%。
+- 月亮和流星直接用官方素材，没有派生版本（夜里它们本来就该是最亮的）。
+
+## 文件
+
+| 文件 | 对应官方贴图 | 说明 |
+| --- | --- | --- |
+| `sky-frame.png` | — | `.bg` 圆角外那圈底色（官方是 CSS 渐变，这里做成一条竖向贴图） |
+| `sky.png` | — | `.bg--gradient` 的内层渐变，同上 |
+| `pattern.png` | `bg_pattern.png` | 渐变上的图案叠加 |
+| `shines-sp.png` / `shines-pc.png` | `bg_shines_sp/_pc.png` | 闪点（两张长宽比完全不同） |
+| `cloud-back-{l,c,r}.png` | `bg_cloud_back_*.png` | 三片远云：白体换夜蓝，暖色描边保留 |
+| `cloud-front-{l,c,r}.png` | `bg_cloud_front_*.png` | 三片近云，同上 |
+| `rainbow-bottom-sp.png` / `-pc.png` | `bg_rainbow_btm_sp/_pc.png` | 彩虹两端那两片云（PC 版底边淡出） |
+| `rainbow-back-sp.png` | `bg_rainbow_back_sp.png` | 彩虹后面那片云（官方只有一张，两端淡出） |
+| `rainbow-sp.png` / `rainbow-pc.png` | `bg_rainbow_sp/_pc.png` | 月虹（降饱和） |
+| `aurora-sp.png` / `aurora-pc.png` | `bg_aurora_sp/_pc.png` | 曙光，1:1 重上色，两端各淡 4% |
+
+`MANIFEST.txt` 记录每个文件的字节数与 MD5，跟 `vendor/maimai/img/MANIFEST.txt` 同一个格式。

public/bg.html

@@ -0,0 +1,95 @@
+<!doctype html>
+<html lang="ja">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>maimai DX · PRiSM PLUS 动态背景</title>
+<!--
+  这一页只做一件事：把官网（PRiSM PLUS 时期）的动态背景原样搬过来。
+
+  标记与样式都是归档快照里的原文：
+    · 结构 = https://web.archive.org/web/20250804084236/https://maimai.sega.com/ 里的 <div class="bg prism">
+    · 样式 = /vendor/maimai/style.css（就是那份 CSS，没改过一个选择器/数值）
+  所以这里的渐变、图案叠加、曙光、云、月亮、七颗流星、彩虹、闪点，参数与官网完全一致。
+
+  本站自己加的只有三处：lib.css 的重置等价三行、夜版切换脚本、这段说明。
+  这个宿主页放在 public/ 根下而不是 vendor 里，好让 vendor/maimai 只留「原样搬过来」的素材。
+
+  用法：本站页面里 <iframe src="/bg.html">，铺满视口、pointer-events:none，
+  这样官方 CSS 里那些全局选择器（html/body/.wrapper…）不会碰到正文。
+
+  日夜同页：?night=1 直接进夜版；父页面也可以 postMessage({mmTheme:'dark'|'light'}) 切换。
+  切换只是挂上/摘掉 /theme-night.css（也就是换 /assets/night/ 那套贴图），
+  页面不重新加载，官方那套入场动画（rainbow / rainbow-bottom 的 scale .8 → 1）不会重播。
+-->
+<link rel="stylesheet" href="/vendor/maimai/style.css">
+<style>
+  /* lib.css（官网的重置表）只做了 margin/padding 归零，这里补上等价的三行 */
+  html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
+</style>
+<script>
+  (function () {
+    var LINK_ID = 'mm-theme-night';
+    function setNight(on) {
+      var link = document.getElementById(LINK_ID);
+      if (on && !link) {
+        link = document.createElement('link');
+        link.id = LINK_ID;
+        link.rel = 'stylesheet';
+        link.href = '/theme-night.css';
+        document.head.appendChild(link);
+      } else if (!on && link) {
+        link.remove();
+      }
+    }
+    setNight(new URLSearchParams(location.search).get('night') === '1');
+    addEventListener('message', function (e) {
+      var d = e.data;
+      if (d && typeof d === 'object' && (d.mmTheme === 'dark' || d.mmTheme === 'light')) {
+        setNight(d.mmTheme === 'dark');
+      }
+    });
+  })();
+</script>
+</head>
+<body>
+<div class="bg prism">
+  <div class="bg--wrap">
+    <div class="bg--shine">
+      <div class="bg--shine__wrap">
+        <div class="bg--shine__item diamond-pink"></div>
+        <div class="bg--shine__item diamond-yellow"></div>
+        <div class="bg--shine__item diamond-white"></div>
+        <div class="bg--shine__item star-white"></div>
+        <div class="bg--shine__item star-yellow i1"></div>
+        <div class="bg--shine__item star-yellow i2"></div>
+      </div>
+    </div>
+    <div class="bg--gradient">
+      <div class="bg--aurora"></div>
+      <div class="bg--cloud">
+        <div class="bg--cloud__item i1"></div>
+        <div class="bg--cloud__item i2"></div>
+        <div class="bg--cloud__item i3"></div>
+        <div class="bg--cloud__item i4"></div>
+        <div class="bg--cloud__item i5"></div>
+        <div class="bg--cloud__item i6"></div>
+      </div>
+      <div class="bg--moon"></div>
+      <div class="bg--star">
+        <div class="bg--star__item i1 green"></div>
+        <div class="bg--star__item i2"></div>
+        <div class="bg--star__item i3 pink"></div>
+        <div class="bg--star__item i4 green"></div>
+        <div class="bg--star__item i5 pink"></div>
+        <div class="bg--star__item i6"></div>
+        <div class="bg--star__item i7"></div>
+      </div>
+      <div class="bg--rainbow">
+        <div class="bg--rainbow__cloud"></div>
+      </div>
+    </div>
+  </div>
+</div>
+</body>
+</html>

public/circle.html

@@ -1,14 +1,16 @@
 <!doctype html>
 <html lang="zh-CN">
-<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>题友圈 · Algorithm DX</title><meta name="color-scheme" content="dark"><link rel="icon" href="/algorithm-dx-icon.svg"><link rel="stylesheet" href="/styles.css"><link rel="stylesheet" href="/circle.css"><link rel="stylesheet" href="/ui.css">
+<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>题友圈 · Algorithm DX</title><meta name="color-scheme" content="light dark">
+<script>/* 首屏前定好主题，避免先亮后暗 */(function(){try{var t=localStorage.getItem('mm-theme');if(t!=='dark'&&t!=='light')t=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';document.documentElement.dataset.mmTheme=t;document.documentElement.style.colorScheme=t;}catch(e){document.documentElement.dataset.mmTheme='light';}})();</script><link rel="icon" href="/algorithm-dx-icon.svg"><link rel="stylesheet" href="/vendor/maimai/fonts.css"><link rel="stylesheet" href="/styles.css"><link rel="stylesheet" href="/circle.css"><link rel="stylesheet" href="/ui.css"><link rel="stylesheet" href="/theme.css"><link rel="stylesheet" href="/theme-dark.css">
 </head>
-<body>
+<body class="mm-theme"><iframe class="mm-bg-frame" data-src="/bg.html" title="" aria-hidden="true" tabindex="-1" scrolling="no"></iframe>
+
 <header class="topbar site-header">
   <a class="brand" href="/">
-    <img class="mark" src="/algorithm-dx-icon.svg" width="66" height="40" alt="" aria-hidden="true">
+    <span class="mark" aria-hidden="true"></span>
     <div class="brand-text"><h1>Algorithm DX</h1><p>记录练习，查看进步</p></div>
   </a>
-  <nav class="nav" aria-label="主导航">
+  <nav class="nav" id="mmNav" aria-label="主导航">
     <a class="btn btn-ghost" href="/">AC 记录</a>
     <a class="btn btn-primary" href="/circle.html" aria-current="page">题友圈</a>
     <a class="btn btn-ghost" href="/dx.html">DX Rating</a>
@@ -17,11 +19,17 @@
     <a class="btn btn-ghost" href="/?admin=1">账号管理</a>
     <a class="btn btn-ghost" href="/help.html">使用指南</a>
   </nav>
+  <button class="mm-theme-btn" id="mmThemeBtn" type="button" role="switch" aria-checked="false" aria-label="深色模式" title="切换到深色模式"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path class="mm-theme-btn__moon" d="M20.2 14.6A8.7 8.7 0 0 1 9.4 3.8a8.7 8.7 0 1 0 10.8 10.8Z"/><circle class="mm-theme-btn__sun" cx="12" cy="12" r="4.7"/></svg></button>
+  <button class="mm-menu-btn" id="mmMenuBtn" type="button" aria-expanded="false" aria-controls="mmNav" aria-label="打开菜单">
+    <span></span><span></span>
+  </button>
 </header><main class="app circle-app">
 
 <section class="circle-hero"><div><span class="circle-eyebrow">TOGETHER, ONE PROBLEM AT A TIME</span><h2>每一份坚持，都有回响。</h2><p>看看关注的人在挑战什么，也为自己的下一题寻找灵感。</p></div><a class="btn btn-primary" href="/?admin=1">＋ 添加题友</a></section>
 <div class="circle-layout"><aside class="circle-sidebar"><div class="circle-sidebar-head"><h2>我的关注</h2><span id="peopleCount"></span></div><label class="circle-label">找一位题友<input class="input" id="peopleSearch" type="search" placeholder="搜索名字" autocomplete="off"></label><div id="people"></div><p class="circle-note">关注仅在本机生效。动态来自已同步的公开记录；未抓取的历史不代表没有练习。</p></aside>
 <section class="circle-main" aria-label="题友动态"><div id="profile"></div>
 <form id="filters" class="circle-filters"><label class="circle-label circle-query">找一道题<input class="input" id="query" type="search" placeholder="搜索题目名称或题号" maxlength="120"></label><label class="circle-label">平台<select class="select" id="platform"><option value="">所有平台</option></select></label><label class="circle-label">结果<select class="select" id="status"><option value="all">全部动态</option><option value="ac">已通过 · AC</option><option value="unac">其他提交</option></select></label><label class="circle-label">时间<select class="select" id="period"><option value="all">全部时间</option><option value="7">近 7 天</option><option value="30">近 30 天</option><option value="90">近 90 天</option></select></label><button class="btn btn-ghost" type="reset">重置筛选</button></form>
 <div class="circle-feed-head"><h2 id="feedTitle">题友的新鲜事</h2><button class="btn btn-ghost" id="refresh" type="button">刷新动态</button></div><p id="message" role="status" aria-live="polite"></p><div id="feed" aria-busy="true"></div><button class="btn btn-ghost circle-more" id="more" type="button" hidden>查看更多动态</button>
-</section></div></main><script type="module" src="/circle.js"></script></body></html>
+</section></div></main><script type="module" src="/circle.js"></script><a class="mm-top off" href="#" aria-label="回到顶部"><img src="/vendor/maimai/img/common/top.png" alt="TOP"></a>
+<script src="/theme.js" type="module"></script>
+</body></html>