可用于快速预览和复现164个AI编程助手生成的完整可运行Demo，覆盖小游戏、效率工具、可视化等方向。每个Demo独立目录，含可直接运行的源码、完整复现步骤与需求描述、开发过程截图，clone后浏览器打开即可体验。【此简介由AI生成】

Demo Park · 码道（CodeArts）AI 生成 Demo 开放仓库

本仓库收录用华为云码道（CodeArts）WebUI / TUI 生成的完整可运行 Demo。每个 Demo 独立目录，包含：

源代码：可直接双击运行的单文件/项目源码（多为 index.html）
案例文档：README.md，含复现步骤与可复制的完整需求描述
截图：screenshots/，开发过程与运行效果

目前共收录 164 个 Demo，覆盖小游戏、效率工具、健康生活、可视化等方向。

想要快速预览所有 Demo？在本地 clone 后用浏览器打开任意 codearts-*/index.html，或部署任意静态服务器即可。未来计划在根目录增加 index.html 作为画廊入口。

关于码道

码道（CodeArts） 是华为云的 AI 编程助手，提供 WebUI 和 TUI 两种交互方式。本仓库的每个 Demo 均由码道生成，复现步骤见各子目录 README.md。

Demo 列表

游戏 / 益智（19）

| 目录 | 说明 |

| ---- | ---- |

| codearts-balloon-pop | 打气球大作战：限时连击爆炸，手速眼力双重挑战 |

| codearts-billiards | 台球挑战：拖拽瞄准一杆清台，物理碰撞超解压 |

| codearts-bowling-game | 保龄球挑战：瞄准一掷全倒，解压手感停不下来 |

| codearts-doodle-jump | 弹簧跳跳乐：按住蓄力一弹冲天，松手蹦上云端停不下来 |

| codearts-hanoi-tower | 汉诺塔益智小游戏：拖拽移盘，最少步数还原烧脑又上瘾 |

| codearts-match3-game | 消消乐（Match-3）网页游戏：三连消除连击爽快 |

| codearts-memory-cards | 间隔重复记忆卡片：翻卡自评掌握度，SM-2 算法自动排下一次复习 |

| codearts-reversi-game | 黑白棋对战：落子翻转配三档 AI 难度，100 局自对弈实测角多一方胜率 89% |

| codearts-rubik-cube | 3D 三阶魔方模拟器：拖拽旋转、逐层还原，烧脑又解压 |

| codearts-typing-ninja | 错别字扫雷：在句子里点出错字，连击加分还能顺便记住正确写法 |

| codearts-24-game | 24 点纸牌游戏：加减乘除凑出 24，一秒上头 |

| codearts-rhythm-tap-game | 音游判定实验室：四轨 D/F/J/K 打节拍，Perfect/Great/Good/Miss 四档窗口同屏可视化，81 个偏差实测落档 17/16/16/32，含 25 条自检与独立复算脚本 |

| codearts-sliding-puzzle | 数字华容道：用最少的移动把 15 块数字归位 |

| codearts-tower-defense-game | 塔防游戏里怪物为什么绕远路？Canvas 实测 A* 寻路 20 波 |

| codearts-platformer-level | 横版跳跃总穿墙？AABB 碰撞盒加重力参数 12 组实测：6 档下落速度乘 2 档帧步长做落地对照，子步碰撞 12/12 正确 |

| codearts-gold-miner-game | 黄金矿工钩爪总打空？12 组摆角实测 Canvas 摆动规律：起手绳长、引信时长、爆炸重复触发三处问题当场对照修掉 |

| codearts-endless-runner-game | 无尽跑酷障碍间距该定多少？12 组跳跃参数实测与 3000 米脚本对局：间距写死在像素上，难度实际由时间窗决定 |

| codearts-physics-rope-puzzle | 物理绳机关：拖锚点甩重球碰开关，Verlet 积分、约束求解、断点判定三处实测（22 次迭代残差 5.874、通关阈值 46.6 像素、11 项独立复算）|

| codearts-klondike-solitaire | 纸牌接龙（Klondike）：种子可复现的发牌 + DFS 求解器 + 21 项规则自检；批量 200 局实测「可解率 0.0%」是搜索预算的假象，中止与不可解分列 |

效率工具 / 转换器（62）

| 目录 | 说明 |

| ---- | ---- | | codearts-tv-viewing-distance-lab | 电视视距实验室：按屏幕宽度算水平视角、PPD 与 8 组距离推荐表，55/65/75/85/98 寸在 3 米的水平视角分别 22.9/27.0/30.9/34.8/39.8 度；75 寸 1080P 62.1 PPD、85 寸 55.1 PPD 卡在 60 线两侧；1.5 米看 85 寸触发 64.2 度太近警告，21/21 自检通过，并如实记录「4K 60PPD 列全是 98 寸、改成 1080P 才有分水岭」与 PPD 曲线纵轴 140 截断两处边界 | | codearts-hdmi-bandwidth-lab | HDMI 带宽实验室：按像素时钟 × 每像素位数算净负载，再扣 8b/10b 与 16b/18b 编码开销；4K60 8bit 4:4:4 需 14.256 Gbps，HDMI 2.0 净载 14.4 只剩 0.144；4K120 10bit 35.64 只有 2.1 装得下；4K120 12bit 与 4K144 10bit 都是 42.768，比 2.1 的 42.6667 差 0.1013，必须 DSC 或降档；18/18 页内自检 + Python 复算 13 组零处不一致，并如实记录「降级降级直通」文案缺陷与刷新率 0 的失败路径 | | codearts-background-remover | 纯色背景抠图工具：从四条边向内做 4 邻域洪泛，阈值与羽化分开调，可切 RGB / CIELAB 距离；1280×800 绿幕人像移除 73.77%、半透明边缘 208 像素、单次 101 ms，1600×1000 时 Lab 175 ms / RGB 37 ms；300×300 环形对照中洪泛只移除 73.63%，环内 alpha 保留 255，全图键控则删掉 92.27%；16/16 页内自检，并如实记录「阈值 120 把整图删空却无任何提示」的已修缺陷与渐变背景只移除 5.63% 的失败路径 | | codearts-excel-sheet-diff | Excel 两表核对台：全量索引与 VLOOKUP 首条匹配双引擎同屏，10 万行演示数据 A 表 100,143 行、B 表 100,343 行，全量 943 条差异、VLOOKUP 743 条（漏检 343、误报 143）；16/16 自检 + Python 复算一致，并如实记录「TSV 被逗号数量误判成 CSV 导致整列静默丢失」「两表主键列顺序不同把相同数据判成新增 2 / 删除 2」两处已修缺陷 | | codearts-volumetric-weight-lab | 快递体积重计算器：长×宽×高 ÷6000/8000/12000 三档同屏对照，60×40×30cm 箱子实际 5kg 时分别计费 12/9/6kg；行李箱 70×45×30/12kg 按 ÷6000 算 15.75kg 进位 16kg（多 4kg、33.3%），敏感性表显示高减 5cm 省 2kg；16/16 自检 + Python 复算 30 组零处不一致，并如实记录「敏感性表把中文名当键名导致九行全无变化」「1e309 绕过校验显示 —kg 还标体积重主导」「只空实际重量却误报尺寸无效」三处缺陷 | | codearts-usbc-fastcharge-cable-lab | Type-C 快充线诊断台：按充电器档位、线芯 AWG、线长、E-marker 和 PD 协商上限取最小值，算设备端功率、压降与线损；100W + 3 米 24AWG + 标准 E-marker 设备端 55.5W（充电器实际只输出 60W，线损 4.5W，压降 1.52V，线端效率 92.4%），2 米 28AWG 无 E-marker 降到 36.6W，140W EPR + 1 米 20AWG 是 138.3W；12/12 自检通过，另用 Python 复算 15 组零处不一致，并如实记录「效率分母误用铭牌 100W」与「第 7、12 条断言写错」两处缺陷 | | codearts-aircon-power-bill | 空调耗电与电费账本：按铭牌额定输入功率与室内外温差估算整晚耗电，页面把 dT、tFull、duty 等公式全部列出；1.5 匹制热（室外 10℃、8 小时、电辅热 1000 W）一晚 12.43 kWh、7.46 元，同机夏天制冷只要 1.75 kWh、1.05 元；设定温度从 20℃ 调到 30℃ 每晚差 3.18 kWh（约 57 元/月）；12 组边界用例自检 12/12 通过，并如实记录「清空设定温度被当成 0℃ 仍给出结论」与「实测度数小于辅热理论值时反算出负负载率」两处缺陷 | | codearts-powerbank-flight-lab | 充电宝乘机自查工具：按额定能量 Wh = mAh × V ÷ 1000 判定民航三档规则（≤100Wh 可随身、100~160Wh 需航空公司批准且每人限 2 个、>160Wh 禁带），电芯 3.7V 下 20000mAh 是 74.0Wh、27000mAh 是 99.9Wh、30000mAh 是 111.0Wh；误按输出 5V 算则 20000mAh 变 100.0Wh、27000mAh 由 99.9Wh 变 135.0Wh 并翻转判定；12 组用例逐条核对通过（含 27027/27028 mAh 卡线两侧），并如实记录「空输入被判成 0.00Wh 可随身」的校验缺失与注释措辞偏严两处缺陷 | | codearts-coupon-stacking-lab | 满减凑单计算器：子集枚举 + 分层 DP 求最优凑单方案，12 件购物车贪心实付 ¥907.40、最优 ¥757.40（差 ¥150.00），14 件拆成三单命中不同档位、贪心 ¥2096.00 对最优 ¥1916.00（差 ¥180.00）；7 项页内自检全绿，含一个「价格算对了却报无解」的回溯守卫 bug 修复 | | codearts-gif-maker-lab | GIF 压缩实验室：纯 JS 自实现 GIF89a 编码（中位切分 + LZW + Floyd-Steinberg 抖动），同一段 60 帧动画 10 组参数体积从 11372 到 95206 字节（8.4 倍）；12 项自检全绿，标准解码器（Pillow）复核 20 帧可读 | | codearts-rmb-uppercase-amount | 人民币金额大写转换器：1234.56 转壹仟贰佰叁拾肆元伍角陆分，内部以「分」为单位做整数运算；12 组边界自检全通过，另用 Python 复算 49 个输入零处不一致 | | codearts-number-base-converter | 进制转换器：2/8/10/16 互转，0.1 的二进制是 0.00011001100110011001100110011001 并标「已截断」，负数给 32/64 位补码，BigInt 撑住 2^53+1；21 组自检全过，另用 Python 复算 40 组零处不一致 |

| codearts-fuzzy-search-lab | 模糊搜索实验室：在 116 个词的词库上把三种匹配算法同屏对比，javascirpt 命中 JavaScript 距离 2、Damerau 距离 1；8/8 自检 + Python 独立复算逐条一致，并如实记录矩阵固定按 Levenshtein 绘制、排序加成压过正确解、零相似度仍返回 Top 12 三处边界 | | codearts-map-coordinate-offset-lab | 地图坐标偏移实验室：WGS-84 转 GCJ-02 后北京偏 554.85 米、广州 620.97 米，8 城极差 355.95 米；9/9 自检 + 独立复算逐位一致，并如实记录境外坐标未拦截、纬度 90 经度溢出、失败态画布留旧值三处边界 |

| codearts-disk-allocation-lab | 磁盘簇对齐实验室：1KB 文件在 4KB 簇下占 4096 字节、浪费 3072；10 万个 1024B 文件从 512B 簇的 0 浪费涨到 64KB 簇的 6.10 GiB（浪费率 6300%）；8/8 自检 + Python 复算，并如实记录小数静默取整与超 64 簇压缩画法两处边界 |

| codearts-browser-fingerprint-lab | 浏览器指纹实验室：12 项本机特征拼出稳定指纹 ID 与隐私暴露评分，换无痕 / 清 Cookie 指纹不变；模拟禁用 Canvas 后 ID 由 ba494b40… 变为 1df7ba28…，对比区 9 同 / 3 异，另注明纯 JS 兜底哈希与降级自检两处已知缺陷 |

| codearts-audio-speed-pitch-lab | 倍速播放音高实验室：1.5x 关保持音高主峰 655.5Hz、开保持 420.0Hz，十行实测 + 独立 WAV 复算 | | codearts-password-salt-lab | 密码加盐实验室：明文 / MD5 / SHA-256 / 随机盐 / PBKDF2 五种存储同屏对照；10 万条字典无盐单次查表 0.009µs，加盐定向重算 576.5ms 仍命中 password，PBKDF2 10 万次单次 15.8ms；15/15 自检，129 字符失败提示 |

| codearts-exif-photo-lab | 照片 EXIF 元数据实验室：13448 字节的照片里 470 字节装下 18 个标签，24 字节有理数存下经纬度（30.244028 / 120.148667）；JPEG 段表偏移、APP1 逐字节 hex、抹除前后对比同屏，22/22 自检 |

| codearts-bonus-tax-calculator | 年终奖个税计算器：6 个临界点与跳升区间同屏，36001 比 36000 多缴 2310.10 元；逐月预扣表 + 「直接乘税率」错误算法对照 + 33 项独立复算 |

| codearts-barcode-generator | Code128 条形码生成器：校验位分步算给你看，A/B/C 三种字符集同屏比宽度，解码自检与 8 项页面自检 |

| codearts-ascii-art-generator | 照片转 ASCII 字符画：拖一张图，黑白字符拼出你的脸 |

| codearts-base64-converter | Base64 编解码工具：文本与 Base64 互转，复制即用 ⚠️ 待补文档 |

| codearts-color-palette-generator | 调色板生成器：一键产出配色方案，前端取色不用再纠结 ⚠️ 待补文档 |

| codearts-css-gradient-generator | CSS 渐变生成器：拖两个颜色直接给代码，做按钮背景不用手写 |

| codearts-currency-converter | 汇率换算器：输入金额选币种，实时折算一眼看清，出国剁手心里有数 |

| codearts-date-calculator | 日期相差计算器：两个日期隔了多少天，距纪念日还剩几天一眼看穿 |

| codearts-interest-calculator | 复利计算器：本金利率期限一填，滚了多少利息、总回报几倍直接出结果 |

| codearts-json-tree-viewer | JSON 树形查看器：粘贴即解析，折叠展开一目了然 |

| codearts-markdown-preview | Markdown 实时预览器：左边写右边看，排版效率翻倍 |

| codearts-regex-tester | 正则表达式可视化测试工具：输入即匹配，高亮一目了然 |

| codearts-resume-builder | 在线简历生成器：填表即出排版，导出打印一步到位 ⚠️ 待补文档 |

| codearts-text-diff | 文本对比器：两段代码并排高亮不同行，改了什么漏了什么一眼定位 |

| codearts-timestamp-converter | 时间戳转换器：秒/毫秒与本地时间互转，跨时区不再心算 |

| codearts-unit-converter | 单位换算器：长度重量温度随手转，出国装行李再也不用百度 |

| codearts-chord-machine | 在线和弦生成器：选个调式点几下，好听的伴奏立刻弹出来 |

| codearts-color-contrast-checker | 配色对比度检查器：一眼看清文字和背景谁看不清 |

| codearts-skill-md-builder | SKILL.md 校验器：18 条规则给 Agent 技能文档打分，规范样例 92 分 |

| codearts-ai-delivery-checker | AI 交付证据核对台：16 条带权重规则核对交付说明，敷衍样例只有 14 分 |

| codearts-sql-groupby-lab | SQL 分组语义沙盘：8 个 GROUP BY 实验拆开讲 NULL、COUNT、AVG，27 条自检全绿 |

| codearts-jwt-decoder | JWT 解剖台：贴一个 token 拆出 header、payload 和签名，浏览器里用 Web Crypto 真实验签，12 条自检全绿 |

| codearts-llm-token-counter | LLM 分词计量台：8 类样例实测汉字、英文、代码、emoji 的 token 消耗，两套词表对照，20 条自检全绿 |

| codearts-pdf-merge-tool | PDF 合并 / 拆分工具：12 个文件、240 页在浏览器里合完，文件不上传，5 条自检全绿 |

| codearts-excel-to-json | Excel / CSV 转 JSON：1000 行 7 列拖进去 37.9 毫秒出 JSON，日期可切原始序列号 45292，超 15 位长数字高亮提示精度丢失 |

| codearts-sql-join-visualizer | SQL JOIN 连表可视化实验室：同一份数据跑 INNER/LEFT/RIGHT/FULL 四种连表，行数 7/8/8/9 一眼可数，18 条自检全绿 |

| codearts-cron-expression-lab | cron 表达式可视化实验室：5 个字段逐段拆解加 30 天日历，工作日 03:00 跑 20 次、*/15 间隔 15 分钟，12 条自检全绿 |

| codearts-image-watermark-tool | 批量图片加水印：30 张图 4.57 秒铺完，文字水印和 PNG logo 都支持，图片不上传服务器 |

| codearts-code-screenshot-beautifier | 代码截图美化：3 种窗口风格 x 4 套配色 x 10 套渐变，一键导出 3000 像素宽 PNG；830 行是导出上限，长行超 95 字符会被裁 |

| codearts-llm-cost-calculator | 大模型 API 费用计算器：输入、输出、缓存三段单价分开算，四模型月成本同屏对比差 8.71 倍，21 条自检全绿 |

| codearts-photo-grid-splitter | 九宫格切图工具：九宫格/朋友圈切图，直接切、缩放切、留白切三种模式像素级实测；1 像素误差、间距 0~40 校验、9 张下载实测记录，47 条自检全绿 |

| codearts-markdown-table-generator | Markdown 表格生成器：粘 Excel 直接出竖线对齐源码，中文按 2 格宽补齐；不补齐 / 按字符个数 / 按显示宽度三模式同屏对照，销售表 402 字符 153 空格、成员表 259 字符 106 空格，独立复算脚本 43/43 项与页面读数一致 |

| codearts-data-unit-lab | 单位换算实测：500GB 硬盘系统只认 465.66GiB、100M 宽带跑满只有 12.5MB/s；SI/IEC 两套进制同屏对照，6 档硬盘容量 + 4 档宽带速率表，非法输入直接拦下，10 项页面自检 |

| codearts-ai-prompt-library | AI 提问模板库：7 类模板（6 必备 + 1 可选反问）把一句话提问拼成结构化提示词，随口一问「帮我写个周报」= 6 字符缺 5 个要素，套模板后 238 字符缺 0；要素覆盖 x/6 实时检查 + 对照双栏，独立复算脚本 10/10 项一致 |

| codearts-id-card-validator | 身份证号校验器：18 位拆成 4 段，末位由前 17 位加权和 mod 11 算出；合法样例加权和 167、余 2 得 X，改一位数字或对调相邻两位 200000 次随机实测漏检 0，23 项独立复算全通过 |

| codearts-keyboard-test | 键盘按键测试：按下就点亮、松开就灭，左右修饰键分格显示；无冲（同时识别 6 / 历史最大 6）、响应延迟（42 次真实按键平均 21.2ms / 最大 40.5ms）、长按连发（14 次 / 平均间隔 75.4ms / 首次重复 603.8ms）、键位热力图四块同屏，含卡键告警与无布局键两个失败路径，5 张截图 |

| codearts-installment-irr-lab | 信用卡分期真实年化利率计算器：12000 元 / 12 期 / 每期 0.6% 手续费，名义年化 7.20%，真实年化（IRR）13.03%；费率 0.3%~1.5% 对应真实年化 6.58%~31.72%，真实年化在 24 期见顶 13.27%；同样借 12000 元，分期比 4% 的消费贷多付 602.41 元；含二分法方向写反导致首版真实年化显示 1200% 的修复记录，7/7 用例通过 |

| codearts-http-status-lab | HTTP 状态码故障诊断实验室：60 个状态码按 1xx~5xx 分色，重试策略 28 never / 25 after-fix / 7 backoff；503 指数退避 1s+2s 第 3 次成功，15/15 自检，输入 999 有中文失败提示 | | codearts-id-photo-print | 证件照排版打印助手：一寸 25×35mm @300DPI 是 295×413 像素，5 寸相纸 89×127mm 排 3×3 共 9 张、利用率 69.6%，换成二寸同一张纸只剩 2×2 四张；7 种规格 × 4 种相纸共 28 组排版与 Python 独立复算逐行一致，12/12 自检通过，并如实记录容差 30 时换底色只覆盖背景 99.6%、有效 DPI 被默认 15% 放大拉低到 168、非图片文件有中文提示三处边界 |

| codearts-mobile-data-usage-lab | 手机流量账本：30GB 套餐每天 1 小时 1080P 要 32.96GB，第 27.31 天见底；480P/720P/1080P/1080P60/4K 五档同算，同样 1 小时 4K 是 480P 的 21.43 倍；六类场景合计 1,449.83MB/天，超出 20.48GB 花 102.38 元；23/23 页内自检，含天数封顶与 0 天错误路径 |

健康 / 生活（4）

| 目录 | 说明 |

| ---- | ---- |

| codearts-wifi-channel-lab | WiFi 信道规划实验室：2.4GHz 13 个信道与 5GHz UNII/DFS 分段同屏；1/6/11 是老小区最干净组合，CH11 干扰分 28.2 对 CH6 的 46.2；20 米 3 堵墙时 5GHz 20MHz 掉到 122Mbps、2.4GHz 40MHz 还有 222Mbps；165 信道锁死 20MHz 的 80MHz 陷阱、14 非法信道回退，14/14 自检 |

| codearts-bmi-calculator | BMI 身体质量指数计算器：身高体重一填，偏瘦标准肥胖分级即出 ⚠️ 待补文档 |

| codearts-breathing-ball | 呼吸练习球：跟着球吸气呼气，4-7-8 节律助你快速放松入眠 ⚠️ 待补文档 |

| codearts-habit-garden | 把自律种成花园：每天点亮一格，断更就像亲手拔掉它 |

| codearts-meal-wheel | 今天吃什么 · 美食转盘：选择困难症救星，转一转决定这一顿 ⚠️ 待补文档 |

可视化 / 其他（80）

| 目录 | 说明 |

| ---- | ---- |

| codearts-frame-time-lab | 帧时间实验室：30fps 与 60fps 并排，真实 rAF 帧间隔曲线；60fps 档 59.9fps、P95 16.8ms、最大 30.2ms，注入每秒 100ms 卡顿后平均仍有 54.5fps 但最大 116.7ms、卡顿指数 6.99；120fps 在 60Hz 屏只测到 60.0fps，20 条自检全过 |

| codearts-traffic-signal-lab | 红绿灯配时实验室：四进口 600 辆/小时（泊松实到 2367 辆）四种配时同流实测，固定 60 秒 13.8s、固定 90 秒 18.2s、感应 10.0s、LQF 9.8s；900 辆/小时过饱和时 LQF 切换 207 次、崩到 77.6s；修复感应控制丢绿灯后 900 辆/小时从 113.7s 降到 27.1s，12 条自检全过，5 张截图 |

| codearts-elevator-dispatch-lab | 电梯调度实验室：12 层 3 部轿厢、4 种派梯策略同一请求流实测；早高峰 30 人/分 LOOK 平均等 4.1s、NEAREST 4.5s、SCAN 5.2s、FCFS 7.4s；LOOK 空驶 932 层比 NEAREST 1160 层少 19.7%，21 条自检全过 |

| codearts-video-bitrate-lab | 视频码率实验室：同一帧 1080P 画面压 6 档（1/2/4/8/16/32 Mbps），真实 JPEG 字节数 + 逐像素 PSNR；1 Mbps 3.7 KB/帧 24.09 dB（672×378 放大），32 Mbps 130.2 KB/帧 33.45 dB；低三档靠 13 级降采样台阶才压进目标，8 条自检全过 |

| codearts-cookie-session-lab | Cookie 会话实验室：真实 document.cookie 二分扫出单 Cookie name+value 4096B（value 4082B），240 次写入只保留 180 个，12 组断言全过，6000B 超大 Cookie 赋值不抛异常但读回 0B | | codearts-file-magic-lab | 文件类型识别实验室：只看前 64 字节的 magic bytes，PNG 改名 .jpg 仍判 PNG；21 条签名规则、6 个内置样本、12/12 自检，空文件与 2 字节小文件都给中文失败提示 | | codearts-file-recovery-lab | 数据恢复实验室：512 个 1KB 磁盘块 + FAT 链，删除 5 个文件后 461,824 字节仍可完整恢复（100%）；覆盖 25%/50%/75%/100% 后恢复率降到 64.5%/43.2%/14.2%/0%；16 条页面自检全过，Python 导出 512KB 镜像复核 MD5 与 163232 个非零字节一致 |

| codearts-mysql-isolation-lab | MySQL 事务隔离实验室：并排两个会话，同屏演示读未提交的脏读（B 读到 99）、读已提交的不可重复读（30→50）、可重复读下快照读 3 行 vs 当前读 4 行 + 记录锁/间隙锁 [1,10]，以及 B 插 id=5 被间隙锁阻塞；14 条页面自检全过，Python 状态机复算 18 组场景零处不一致，并修复 SERIALIZABLE 误用快照读、阻塞语句不显示 SQL 两处缺陷 |

| codearts-sse-stream-lab | 流式输出实验室：同一份 UTF-8 字节流四种读法同屏对比，块大小 1 字节时独立解码出 20094 个乱码字符、流式解码 0；100KB 文本按 1/16/256/4096 字节切块对照，块大小 16 时独立解码 10215 个乱码、流式 0；12 项页内自检 11 项通过（第 3 条公式写错，实测约为跨界块数的 2.5 倍）；含 5 张截图 |

| codearts-flash-sale-oversell-lab | 秒杀超卖实验室：100 件库存扛 1000 个并发，无锁版 8ms 把库存卖成 -900（超卖 900 条），悲观锁 0 超卖但 5368ms，乐观锁 CAS 重试 999 次，原子预扣减 8ms；12 项页内断言全绿，失败路径给出中文提示原文 |

| codearts-hash-table-lab | 哈希表实验室：10 万个 key 实测扩容 14 次、末次扩容 18.7ms 要重新安置 9.8 万个元素（0.75 负载因子触发翻倍）；四种冲突策略同台对照，全 key 撞进同一个桶时查找退化为 10 万次比较、3.5ms；含 5 张截图 |

| codearts-short-link-lab | 短链接生成实验室：自增 ID 转 Base62 逐位演示编码，6 位空间 568 亿、5 万条随机碰撞 2.1767%、100 万条 99.985% 的生日悖论对照表，5 万条实测 0 次碰撞 / 14.6ms，34/34 独立复算 + 24 条页内自检 |

| codearts-red-packet-split-lab | 微信红包拆分实验室：二倍均值法 20 万次模拟，十位平均 9.98~10.02 元、首末位只差 0.09%，对照纯随机首位是末位 244 倍，失败路径给出中文提示原文 |

| codearts-http-cache-lab | HTTP 缓存实验室：强缓存、协商 304、no-store 与 max-age 给过大的失败路径同屏对照，6 次请求实测命中 67%、省 66%，逐行给出相邻两版的传输字节 |

| codearts-load-balancer-lab | 负载均衡算法对比实验室：4 台机器 1000 个请求同屏跑轮询 / 加权 / 最少连接 / IP 哈希，慢节点下最少连接 545ms 对轮询 3911ms，独立复算脚本与 26 条自检 |

| codearts-dns-resolution-lab | DNS 解析实验室：6 跳逐跳动画，4 台解析器耗时与返回 IP 实测对比 |

| codearts-tcp-handshake-lab | TCP 三次握手 / 四次挥手实验室：五种链路跑到底，握手 3 报文 1 RTT、丢包 RTO 翻倍 1→2→4→8，18 条自检全绿 |

| codearts-cors-lab | CORS 跨域请求诊断实验室：18 组用例逐条判定简单请求 / 预检 / 拦截，星号与 Cookie 互斥、预检 405、多 Origin 三类翻车同屏给出控制台报错原文，18/18 独立复算 |

| codearts-pendulum-lab | 双摆混沌实验室：两根摆杆一松手，轨迹三秒看上头 |

| codearts-svg-wave-generator | 波浪背景生成器：几根曲线一拖动，导出 SVG 直接当封面 |

| codearts-easing-curve-lab | 缓动曲线实验室：拖动贝塞尔手柄，动画手感当场调 |

| codearts-budget-weather | 消费天气记账：把每笔花销变成天气预报，月底超支一眼预警 |

| codearts-pathfinding-visualizer | 寻路算法可视化：摆墙设障碍，一眼看懂 A* 和 BFS 谁先找到出口 |

| codearts-reaction-time | 反应速度挑战：屏幕变绿瞬间点击，测测你的手速 |

| codearts-receipt-pain-point | 工资到账可视化：算清房租和生活开销，攒钱倒计时一眼看懂 |

| codearts-soundscape-mixer | 白噪音调音台：雨声、篝火、咖啡馆随便混，定时播完自动停 |

| codearts-teleprompter | 网页提词器：录视频不用背稿，滚动字幕速度随意调 |

| codearts-relative-call | 亲戚称呼计算器：点选亲属路径，一键算出称呼与祝福 |

| codearts-pace-calculator | 跑步配速计算器：目标成绩反推每公里配速 |

| codearts-image-color-picker | 图片取色器：上传图片点选即取 HEX/RGB/HSL |

| codearts-image-format-converter | 图片格式批量转换：30 张 PNG 转 WebP 体积降 63.8%，全程浏览器本地不上传 |

| codearts-morse-code-translator | 摩斯电码转换器：中英文双向转换与声音播放 |

| codearts-world-clock | 全球时间钟：多时区并排实时对照 |

| codearts-conway-life | 生命游戏：三条规则一运行，方格里自己长出会动的图案 |

| codearts-mandelbrot-zoom | 曼德博集合：鼠标拖到哪，无限放大的分形边界就跟到哪 |

| codearts-fourier-epicycles | 傅里叶圆环：几个圆叠着转，随手一画就变成周期性轨迹 |

| codearts-boids-flock | 鸟群涌现：三行规则跑起来，整群鸟会聚、会散、会躲障碍 |

| codearts-lorenz-attractor | 洛伦兹吸引子：三个数字转出的蝴蝶翅膀，差一点点结果完全不同 |

| codearts-fireworks-sky | 烟花模拟器：满屏流光炸开，过年气氛一秒拉满 |

| codearts-kaleidoscope | 万花筒：拖一下就换一张壁纸，对称图案越转越上瘾 |

| codearts-water-ripple | 水波纹：点一下水面就漾开，压力感瞬间被揉散 |

| codearts-aurora-sky | 极光：把流动夜空装进浏览器，随手调出治愈配色 |

| codearts-particle-clock | 粒子时钟：秒针一抖就散成星尘，看时间也上头 |

| codearts-tetris | 俄罗斯方块：方块越落越快，四行连消的那一刻最解压 |

| codearts-rayleigh-sky-lab | 天空实验室：拖一下太阳高度，看清瑞利散射怎么把天染成蓝和红 |

| codearts-chladni-patterns | 克拉德尼图形：调一下频率，沙子自己排成对称花纹 |

| codearts-turing-patterns | 图灵斑图：调两个参数，豹纹和斑马纹自己长出来 |

| codearts-unicode-encoding-lab | 字符编码实验室：同一个汉字在 UTF-8、GBK、UTF-16 里的真实字节逐位对比 |

| codearts-phantom-jam | 幽灵堵车：前面没事故，车流为什么还是自己堵成一串 |

| codearts-galton-board | 高尔顿板：球一颗颗丢下去，为什么总堆成一座钟形山 |

| codearts-double-slit-lab | 双缝干涉：两条缝的图样叠起来，光为什么自己跟自己打架 |

| codearts-firefly-sync | 萤火虫同步：调一个耦合系数，整片林子自己一起闪 |

| codearts-chaos-game-fractal | 混沌游戏分形：随机乱跳为什么能画出完美三角形 |

| codearts-audio-spectrum-visualizer | 声音看得见：麦克风一开，频谱随音乐跳动 |

| codearts-periodic-table-explorer | 元素周期表互动百科：点哪里，性质一眼看懂 |

| codearts-solar-system-explorer | 太阳系漫游器：拖拽缩放行星，公转轨道一目了然 |

| codearts-bloom-filter-lab | 布隆过滤器误判率实验室：调 m/k/n，实测误判率并与理论值并排对比 |

| codearts-phyllotaxis-golden-angle | 叶序实验室：向日葵籽为什么按黄金角转着长，辐条数为什么会等于分母 |

| codearts-brachistochrone | 最速降线实验室：直线最短却最慢，三条轨道同场竞速 |

| codearts-voronoi-honeycomb | Voronoi 蜂窝实验室：撒下 200 个种子点，平面为什么自己长成蜂窝 |

| codearts-rate-limiter-lab | 限流算法实验室：令牌桶、漏桶、滑动窗口同屏跑同一波流量，看谁先被限 |

| codearts-connection-pool-lab | 连接池容量实验室：QPS 乘 RT 算一遍池大小，再跑上万次请求看超时率曲线 |

| codearts-lru-cache-visualizer | LRU 缓存可视化实验室：哈希表加双向链表并排画，12 次访问看淘汰全过程 |

| codearts-jvm-memory-lab | JVM 内存分布拆解实验室：按区域拆开算 RSS，堆外比堆内大、参数越界都能当场看见 |

| codearts-event-loop-visualizer | 事件循环可视化实验室：12 段代码真实跑一遍，同步、微任务、宏任务各进各的面板 |

| codearts-bplus-tree-visualizer | B+ 树索引分裂可视化实验室：从插入到页分裂一步步走，三层容量当场算出来 |

| codearts-hybrid-search-lab | 混合检索实验室：30 篇语料上同批跑 BM25、SVD 向量与 RRF 融合，5 组查询的漏召回当场对比 |

| codearts-ieee754-explorer | IEEE 754 浮点数实验室：0.1 加 0.2 的 64 位逐位摊开，单精度与双精度误差当场对比 |

| codearts-prompt-injection-lab | Prompt 注入红队检测台：12 类绕过样例同屏跑两条管线，零宽字符与 Base64 能不能绕过关键词过滤当场看 |

| codearts-consistent-hashing-ring | 一致性哈希环实验室：10 万 key 同屏跑取模与哈希环，加节点迁移率与虚拟节点均衡度当场算 |

| codearts-debounce-throttle-lab | debounce 与 throttle 对比实验室：200 次输入同屏跑两种实现，触发次数、理论值与丢弃事件当场对 |

| codearts-git-merge-visualizer | Git 合并方式对比实验室：同一批提交跑 merge、rebase、squash，提交总数、冲突次数与 hash 改写率当场算 |

| codearts-totp-2fa-lab | TOTP 动态口令实验室：手写 SHA-1 与 HMAC-SHA1，RFC 6238 六组官方向量逐条对照全一致，22 条自检全过，指定时间戳能把一位口令拆到每一步 |

| codearts-ip-subnet-calculator | 子网掩码 / CIDR 计算器：输入 192.168.1.10/26 当场算出网络地址、广播地址与 62 个可用主机，32 位二进制逐位着色，子网拆分、主机数反推、网段聚合一屏看完 |

| codearts-rsa-crypto-lab | RSA 加密实验室：密钥生成、逐字节加密解密、试除攻击与签名篡改四块拆开演示，65 → 2790 → 65 教科书样例、9998000099 试除 49995 次 / 2.1ms、n 位数-耗时曲线与 2048 位不可试除结论，53 项独立复算 + 5 张截图 |

| codearts-captcha-lab | 验证码强度实验室：字符扭曲 / 点选文字 / 滑块缺口 / 算术四种关卡同台，页内简易机器人逐列像素投影 + 模板比对、连通区域洪水填充、相邻列灰度差分、表达式解析四套解法，50 次界面压测与 200 次复核数字一致（通关率 2% / 5% / 100% / 100%，平均 9.32ms / 1.83ms / 0.18ms / 0ms），含人机对比小结的字符串比较 bug 与 5 张截图 |

| codearts-qr-login-lab | 扫码登录原理实验室：QR 码 6 个状态同屏走一遍，1.5 秒轮询实测一次登录 7 次请求 / 9.01 秒，挂机到期 81 次（页面写的理论最大是 80），批量 200 次轮询平均 5.80 次、长连接恒 1 次，含三处失败提示原文与 5 张截图 |

| codearts-aes-cipher-mode-lab | AES 分组加密模式实验室：同一张 128×128 图、同一把 AES-128 密钥，ECB / CBC / CTR 三种密文并排；纯 JS 手写 10 轮 AES 单块加密，3072 个明文块里 ECB 密文同样 2374 个重复块（CBC / CTR 都是 0），再用 Python 密码学库逐字节复算标准向量与雪崩 bit 数，含 5 张截图 |

| codearts-thread-pool-lab | 线程池参数实验室：core 4 / max 8 / queue 10 下压 100 个任务，Abort 完成 70 拒绝 30、CallerRuns 100 全完成但多花 790ms，四种拒绝策略同屏对比，17 项自检全过，含 maximumPoolSize=0 校验缺陷修复与 5 张截图 |

| codearts-pixel-binning-lab | 像素合并实验室：48MP / 50MP / 64MP / 108MP / 200MP 五种传感器同屏，按物理宽高现算 4/9/16 合 1 的输出像素与等效尺寸；48MP 8000×6000 输出 4000×3000，108MP 9 合 1 正好回到 1200 万，200MP 16 合 1 输出 12,582,912；4 合 1 信噪比 +6.02dB、200MP +12.04dB，48MP 12bit RAW 72MB；15/15 页内自检，并记录切换预设不同步与 64MP 乘积差 3,264 两处真实问题 |

| codearts-ebike-range-lab | 电动车续航实验室：48V/60V/72V 与铅酸/锂电 6 组对照，按电压×容量、DOD、温度、载重、车速算可用电量与每公里耗电；默认 48V20Ah 铅酸 25km/h 跑 60.1km、35km/h 只剩 40.4km，12 条自检全过，含 5 张截图 |

如何复现

打开对应目录的 README.md（若存在）
复制「需求描述」中的原文，粘贴到码道 WebUI / TUI
对照 screenshots/ 核对生成结果，直接运行 index.html

截图预览

每个 Demo 的 screenshots/ 目录包含开发过程截图和运行效果图，点击对应目录查看。

目录约定


demo_park/

├── README.md                      # 本文件

└── codearts-<demo-name>/

    ├── index.html                 # 可直接运行的入口

    ├── README.md                  # 案例文档与复现步骤（部分 demo 暂缺）

    └── screenshots/               # 开发过程与运行效果截图