更多作品

兴趣驱动 · 技术练手

主作品集之外，以五月天为题做的两个独立项目。一个 H5 互动应用、一组数据可视化海报，覆盖前端、服务端、数据采集与设计实现各一环。

关于

这一页放的是没有明确商业诉求的项目——做出来主要是为了把感兴趣的技术栈跑通一遍，顺便表达对一个乐队的喜欢。和主作品集里"翻译业务需求"的角色不同，这里更接近独立开发者状态：自己定题、自己设计、自己上线。

纯原生 JS H5
D3.js + Vite 多入口
Cloudflare Worker / KV
SVG 数据可视化

Cloudflare Pages + Worker + KV · 2026.04

mdfei · 五月天知识答题 H5

300+ 题题库的五迷向互动 H5。前端纯原生 JS 零依赖，后端走会话化设计防止刷分——答案只存服务端，前端永远拿不到正确答案。

主体功能

核心流程	功能描述
开始答题	从 300+ 题库中随机抽 10 题，每题选项顺序也打乱，生成 30 分钟 TTL 的服务端 session
逐题提交	每答一题立刻提交到服务端记账，前端收到的题目不含 correct 字段，无法通过看源码作弊
结算与销毁	10 题答完调 /api/finish 揭晓得分和每题对错详情，同时销毁 session 防止重复结算

三屏体验

mdfei 首屏 — 首屏。进入答题前的入口页，说明规则、题量、来源。米白底 + 单按钮极简引导。

mdfei 答题中 — **答题中**。单题单屏，选项点击即提交到服务端，进度条标识当前进度。

mdfei 结果页 — **结果页**。总分 + 每题对错详情 + 正确答案揭晓。session 在这一步被服务端销毁，刷新不能重看。

服务端防作弊架构

整套数据流的关键约束是：前端不持有任何可用于作弊的信息。

用户浏览器 (index.html)
    ↓ POST /api/start-session  → 返回 sessionId + 题目（已剥离 correct 字段）
Cloudflare Worker
    ↓ 读写
Cloudflare KV (QUIZ_KV)
    - "quiz_data"          → 题库（手动通过 upload_kv.py 写入，不进 public/）
    - "session:<uuid>"     → 会话状态，30 分钟 TTL
    - "ratelimit:<ip>:<h>" → 限速计数器（每 IP 每小时 30 次）

核心决策

题库不进部署目录：quiz_data.json 通过独立的 upload_kv.py 直接写入 KV，绝不放在 public/，避免 wrangler pages deploy . 类的事故把题库连同 API token 一并公开
双后端并行：同时维护 worker.js（独立 Worker，跨域）和 functions/api/*.js（Pages Functions，同域）两套实现，前端切 API_BASE 一键换部署形态
选项也打乱：抽题时不仅打乱题序，每道题选项顺序也随机化，并在 session 里换算新的 correct 索引——防止抓包对照题库刷题

Cloudflare Worker · Pages Functions · KV · 纯原生 JS · 服务端会话鉴权

D3.js + Vite 多入口 · 2026.05

d3chart · 五月天主题数据可视化海报集

D3.js + Vite 多入口架构的 SVG 海报合集，统一米白手账设计语言。每张海报是独立 HTML 入口 + 一套渲染模块，共享设计 token 与工具函数。本页选展两张代表作。

整体架构

Vite 多入口注册多张独立海报，每张海报有自己的 main.js，从 <svg id="poster"> 起步按 z-order 依次 append 渲染层。共享 src/config.js（CANVAS / COLORS / FONTS / SIZES + 各海报的 LAYOUT 常量）和 src/utils.js（带单测覆盖）。数据放 public/data/ 按海报分目录组织，统一用 fetch('/data/...') 加载。

代表作一：词性脊柱（spine）

词性脊柱海报 — **9 张专辑歌名的词性脊柱图**。每张专辑一根"脊柱"，曲目作为骨节排列，按词性着色——动词、名词、形容词的占比变化勾勒出乐队 25 年创作语料的演变。曲目数据走自动化脚本从 zh.wikipedia.org 抓取真实曲目和时长，繁→简转换走 opencc-js，未通过 API 的部分用 override map 手工补齐。

代表作二：《自传》专辑剖析（bio）

自传专辑剖析海报 — **《自传》单专辑深度剖析**。中轴 spine 贯穿全图，左右双栏铺陈每首歌的关键意象与情绪。和 spine 海报形成"广 vs 深"的对照——一张铺 9 张专辑的横向比较，一张钻进一张专辑的纵向叙事。

核心决策

多入口而非单页路由：每张海报作为独立 Vite 入口（spine.html / bio.html / ...），互不污染样式与 DOM，部署后每张海报都有自己的稳定 URL，可单独分享
渲染顺序即 z-order：每张海报的 main.js 调用顺序就是图层顺序——比如 spine 海报里 renderSpine 必须在 renderAlbums 之前（中轴在歌曲条下面），renderFooter 必须最后（音孔/琴桥盖在弦上）
Wikipedia 抓数据的工程纪律：5s+ 间隔限速、增量写盘、本地 sandbox 屏蔽 Node fetch 时改用 execFileSync('curl', ...) 兜底

D3.js · Vite 多入口 · SVG · 米白手账设计 · Wikipedia 数据抓取

看完了？回主作品集（FDE 方向）或工程方向版本。