全站UI重构

[OxygenNine]

概述

全面重构UI，配色方案从gray/indigo迁移至zinc/violet，并定义Design Token方便复用。缩窄边距、缩小圆角、减少div嵌套等AI Slop特征。重构了一些关键页面的交互，以及完全重写了首页。

主要改动

1. Design Token 体系（核心）

styles/globals.css 引入两层 token：

• Layer 1 Primitive：--w-primary-* violet 色阶（oklch），组件不直接使用。
• Layer 2 Semantic：canvas / panel / raised / sunken（表面层级）、line / line-strong（描边）、fg / fg-2 / fg-3（文字三级）、accent-*（品牌色），随 html.dark 自动翻转。

tailwind.config.js 把这些 token 映射为 bg-panel、text-fg、border-line、text-accent 等语义 class，组件里不再需要写 dark: 变体。同时把 Tailwind 的圆角刻度整体收紧为 2 / 4 / 6 三档。

2. 明暗双主题

• _document.js 注入内联脚本，在首屏绘制前根据 localStorage.theme → prefers-color-scheme → 默认暗色 的顺序决定 html.dark，消除 FOUC。明暗主题选择储存在localStorage中。
• Header.js 新增主题切换按钮（桌面 / 移动端各一处，带 aria-label）。
• Logo 改为明暗两套 SVG（wikit-logo-black.svg / wikit-logo-white.svg），靠 dark: 变体切换。

3. 顶栏重写

• 取消了每个选项卡前的font-awesome，更改为更简约的纯文本，选中时背景设置渐变色。
• 导航项抽成 NAV_ITEMS 数组统一渲染，支持子路由高亮（/tools/gacha 也会点亮 /tools）并输出 aria-current="page"。
• Logo更新为Wikit项目使用的花瓣Logo。站点名改为 SVG 字标。

4. 首页重构

• 新增 components/HeroAsciiCanvas.js：粒子 → 低分辨率离屏画布 → ASCII 字符密度映射的双层渲染管线。已做 DPR 上限 1.5、~32fps 节流、预渲染字符图集、固定粒子池、IntersectionObserver 与 visibilitychange 停帧、prefers-reduced-motion 尊重。
• 首页改为全宽布局（Home.fullWidth = true，Layout 新增 fullWidth 开关）。
• 新引入的字体用 @fontsource 自托管。

5. 页面重构与 Bug 修复

• /page、/pages、/authors、/tools/*、/admin、/staff-panel、/contest、/dashboard、/forums 等统一换用语义 token，新增加载骨架屏。
• /pages的搜索栏吸附在顶部，并顺带显示网站详细信息。
• /authors也有一个吸附栏。作者信息页面的布局现在更简约。
• /tools将工具分为实用性和趣味性两类。
• 头像加载失败修复（pages/api/authors.js）：avatar.php?account= 已失效一律 404，改为从 user:info/<name> 抓真实 userid；同时把 http:// 改回 https://（http 会 302 到 CloudFront 的 http 地址，被混合内容策略拦截）。
• utils/markdownLite.js：渲染产物里的硬编码颜色全部换成语义 token。
• next.config.js：CSP 在开发环境放行 'unsafe-eval'（NODE_ENV !== 'production' 判断），否则 dev 模式 HMR runtime 因 CSP 崩溃白屏；生产构建保持严格 CSP。

6. 开发环境配套

• pages/api/dev/login.js：?as=user|staff|admin|logout 一键切换身份。返回一个落地页而非 302，顺带把 username 写进 localStorage，避免「cookie 已登录但顶栏还显示未登录」的割裂状态。
  两道独立闸门，任一不满足即 404：NODE_ENV !== 'production'，且显式设置 ENABLE_DEV_LOGIN=1。单靠 NODE_ENV 一道闸不够——自托管 docker、preview 环境经常漏设 NODE_ENV，那等于把能签发任意角色 JWT 的接口暴露出去。
• scripts/dev-seed.js：造 dev_user / dev_staff / dev_admin 三个账号 + 覆盖全部状态的示例代发单，供职员面板 UI 调试，幂等。两道闸：NODE_ENV=production 直接拒绝执行；DATABASE_URL 非本地库时拒绝（可用 DEV_SEED_ALLOW_REMOTE=1 显式放行）。口令优先取 DEV_SEED_PASSWORD。两个开关都已写进 .env.example。

除去为了预览效果引入的第6项修改外，ui-redesign分支均为纯前端修改，已通过检查：

步骤	结果
npx next lint --quiet	通过，0 warning 0 error
npx tsc --noEmit	通过（exit 0）
node --test tests/*.test.js	27 / 27 通过
npm run test:ftml	FTML v1.32.2 runtime OK
npm run build	通过，Compiled successfully in 15.0s，静态页 30/30