读 Good++：16 期、45 个开源项目与工程灵感

📅 2026-10-09 📂 工具 🏷️ 开源导读, 工具
16 分钟阅读 · 4,372 字

按原始期次整理前端、低代码、图形、媒体、移动端和服务端项目，并用现代工程标准复核其价值与风险。

本文围绕 DeformedSteel/good 做原创工程整理。项目来自 腾讯新闻前端团队 2022 年的 25 个 Awesome 项目推荐；上游 README 固定到 2022-08-23 commit b370d7ec45a673274462b0e6191d2bc24c66112e；仓库声明 MIT 许可，本文保留版权与许可文本 下方保留固定版本入口。

仓库内容地图

  • 原期刊 16 期，逐期覆盖 45 个项目/主页入口
  • 管理后台、状态管理、事件派发与组件库
  • 虚拟列表、配置表格、日历交互和大屏可视化
  • 低代码商城、组态编辑器与视频搭建
  • Canvas、WebGL、音视频生成与计算机视觉
  • Flutter、React Native、Cocos、Android 与 Swift 学习项目
  • 保留许可声明、固定来源版本与安全脱敏说明

怎么读才有收获

把期刊当作项目发现雷达。先从目录选一个与当前需求相邻的主题，再检查源码、依赖、提交、Issue、许可与运行环境；不能只凭 2022 年文章里的介绍判断今天的项目状态。

一、项目背景与快照

Good++ 是开发者发起的开源项目发现期刊，重点推荐有趣的前端、服务端、移动端、数据库、硬件和图形项目，并接受 issue/PR 投稿。固定到 README commit b370d7ec45a673274462b0e6191d2bc24c66112e（2022-08-23）时，目录共有 16 期、45 个项目或个人项目入口。仓库明确使用 MIT License，本文保留了完整许可声明；项目清单按期次逐项整理，介绍则改写为工程视角，未复制被推荐项目的整份 README。

这是历史快照，不是活跃度排行榜。很多链接对应的技术栈已经跨越数个主版本；名称、功能和项目地址可用于追溯线索，不能据此断言它们仍可安装或适合生产。每个候选应重新核验维护情况、依赖、许可、安全和目标平台。

二、16 期项目索引

第 16 期：图形渲染、日程和团队导航

  • InkPaint：Node.js 服务端 Canvas 图形渲染，可用于动态图像合成、水印、改色、拼图和 PDF 相关场景。服务端处理图片时仍要限制像素尺寸、解码内存、上传大小和临时文件生命周期。
  • daymanage：基于 Umi 3 的日程管理示例，覆盖新建/列表、微信连接和定时推送；仓库目录展示 Jest 测试、Mock、页面、配置与类型文件等工程组成。
  • mouse-ui：React/TypeScript 组件集合，侧重颜色选择、角标、全屏、桌面端 H5 预览、拖拽、水印和倒计时等不常见控件。
  • awesome-fe-team：国内前端团队博客与 GitHub 入口的发现清单，适合作为持续追踪技术实践的导航。

第 15 期：虚拟列表

  • vue-infinite-list：Vue 无限/虚拟列表示例。历史说明列出零依赖、压缩约 3 KB、百万级数据、水平/垂直滚动、固定或可变宽高、按索引/偏移滚动和动态数据。API 主题包括 width、height、data、itemSize、scrollDirection、scrollOffset、scrollToIndex、scrollToAlignment 与 overscanCount；对齐值有 auto/start/center/end，overscan 用于减少滚动时的空白闪烁。原文还给出 npm/yarn 安装、组件引入和插槽渲染示例。体积与百万行性能是旧快照中的项目声明，应在目标设备上独立测量。

虚拟列表只渲染可视区域附近的行，降低 DOM 数量，但不会自动解决数据获取、键盘导航、屏幕阅读器语义、动态高度测量、滚动锚定或行高估算误差。固定尺寸更容易计算索引；动态尺寸需要测量缓存与失效策略。overscan 越大，快速滚动越平滑但渲染/内存成本越高。先测真实滚动帧率、DOM 数量、滚动定位和数据更新，再决定是否引入库。

<InfiniteList
  :data="rows"
  :width="'100%'"
  :height="520"
  :itemSize="rowHeight"
  :scrollToIndex="selectedIndex"
  :overscanCount="4"
  v-slot="{ item, index }"
>
  <article :aria-posinset="index + 1">{{ item.title }}</article>
</InfiniteList>

第 14 期：视频搭建与移动端仿作

  • 视搭：通过拖拽搭建短视频的可视化项目，定位类似 H5 搭建器，但编辑对象是视频场景和素材。
  • Flutter douyin：用 Flutter 模仿短视频应用界面的学习项目；可观察信息流、视频切换和跨平台 UI 结构，不应当作官方客户端。
  • FanFanSwift：以 Swift 编写的语言学习项目。

第 13 期：表格配置与数据展示

  • manage-table：在 Ant Design Table 之上管理可见列，并按 name 将选择持久化到 localStorage。多页面/多租户应用应设计稳定且隔离的存储键，迁移列配置时校验旧值。
  • table：终端字符串表格格式化库，快照列出的能力包括全角字符和 ANSI 转义、边框字符、按列对齐/内边距/宽度配置与自动换行。
  • fsLayui：基于 Layui 的快速管理界面工具，使用配置化 HTML 组织数据请求与表格 CRUD，覆盖单表/多表、Tab、树表、联动表格、富文本和下拉联动。

第 12 期：不可变数据、黑魔法与全栈模板

  • Limu：面向不可变对象操作的状态工具，快照通过 draft 修改和结构共享示例说明只让变更路径产生新引用，未变更分支保留引用。
  • awesome-blackmagic：Web 开发奇技与边界案例索引；本站另有独立的黑魔法专题，集中解释原理、安全和现代替代方案。
  • electron-wasm-rust-example：最小化 Electron、WebAssembly 与 Rust 的组合示例，帮助拆分桌面壳、WASM 编译产物和 JS 调用边界。
  • gin-vue-admin：Vite/Vue 3 与 Gin 的后台平台示例，快照列出 JWT、权限、动态路由、分页、多点登录拦截、上传下载、代码生成和表单生成等能力。不能因为模板内置权限菜单就省略后端对象级授权。

第 11 期：翻译、移动端和大屏

  • Dadda：Chrome 划词翻译扩展，快照描述搜狗翻译、生词簿、词汇记忆提示、与有道/扇贝词本同步、词根词缀和例句入口。
  • react-native-full-example：前后端组成的 React Native 学习项目，服务端示范登录、模块选择、查看/编辑/删除和分页，移动端涵盖常见视图组件与地图服务；其中 ListView 等旧 API 需按当前 React Native 文档迁移。
  • DataV-React：React 数据大屏组件示例，包括 SVG 边框装饰、图表、水位图、飞线和轮播表等方向；仓库也被描述为有 Vue 版本。

第 10 期：视频合成、工程文章和跨域兴趣

  • ffcreator-example：短视频加工示例集合，覆盖相册动画、GIF、多场景转场、视频动画、字幕和 TTS 配音。批量生产媒体时要同时评估 FFmpeg 运行成本、字体/编码器、文件清理和任务队列。
  • xucz 项目主页：一位作者的 GitHub 主页入口；原期刊未固定具体子项目，故保留为个人项目导航，不把主页描述误写成单一软件能力。
  • blob：面向工程师的文章与技术分析入口，快照提到 React、Node.js 和 Webpack 原理方向。
  • Just_For_Fun：跨硬件、操作系统和语言的学习目录，包含 Arduino、STM32、Raspberry Pi、Linux/Windows、Qt、uC/OS、OpenCV 以及 C/C++/Python/Java 等方向。

第 9 期：低代码、Canvas 与自动任务

  • awesome-lowcode-component：低代码资源索引，本站另有独立低代码专题。
  • react-canvaskit：实验性 React 与 Skia CanvasKit 集成，以 JSX 表达 CanvasKit 元素并使用 WebGL 绘制；具体浏览器能力和维护情况须重新检查。
  • genshin-sign：游戏每日签到自动化示例。部署前必须阅读服务条款和平台规则，不要提交账号密码、Cookie 或复用令牌，也不要把第三方自动化当成受支持的官方功能。

第 8 期：微型库、Good++ 与计算机视觉

  • awesome-1kb：小型 JavaScript 库导航，本站已有独立的依赖成本与选型文章。
  • Good++：本篇所整理的开源项目期刊，共 16 期。
  • CVprojects：计算机视觉与 AI 趣味项目集合，适合作为探索题目来源，不代表模型许可或数据许可已被统一核验。

第 7 期：移动端调试和拍照海报

  • mdebug：React Web 调试工具方向，目标是查看组件相关信息并处理较大调试数据；调试面板应在生产构建中隔离，并避免暴露业务状态与个人数据。
  • camera-poster：H5 拍照合成海报组件，快照涵盖相机拍摄、装饰图标增删、图片缩放/旋转/移动、前景/背景配置及切换皮肤素材。

第 6 期：低代码商城与组态编辑器

  • mall-cook：Vue 可视化商城搭建平台，重点是多页面构建、JSON Schema 物料控制面板和组件接入流水线。
  • Web-Editor：Angular 8 组态/低代码编辑器示例，快照列出拖拽组件、页面和元素管理、样式绑定、快捷键、预览、项目管理及 IndexedDB；服务端能力只标注为特定旧版本功能。

第 5 期：SSR 移动页面、前端框架和 3D 游戏

  • react-bilibili：React 16.8 与 TypeScript 的服务端渲染移动 Web 仿作。
  • AlloyTeamDev/Pro：期刊称为腾讯移动 Web 前端框架；固定快照里的示例信息很少，故不补写未经核实的功能承诺。
  • SkyNote：使用 Three.js 的语音交互 3D 游戏方向。

第 4 期：纸牌游戏、游戏引擎和 Android 动效

  • ddz_game：Node.js 服务端、Cocos Creator 2.0 客户端和 MySQL 的斗地主游戏项目。
  • makegameengineatnight：把游戏引擎拆成模块并逐章实现简化引擎的学习路线，旨在从小型实现过渡到 Unity/Unreal 源码阅读。
  • MultiWaveHeader：Android 水波控件，可配置进度、速度、方向、波形数量、单波偏移/拉伸/速度和颜色渐变。

第 3 期：请求缓存、交互 Demo 与 API 文档

  • cute-http：历史 HTTP 请求库示例，介绍超时重试、GET 缓存和并发请求的两种错误语义：全部完成后统一返回，或任一失败即整体失败。旧缓存策略不应直接当作 HTTP 缓存规范。
  • sample-reels：Vue 交互作品集，快照包括 3D 词云/旋转、灰度主题、圆周运动、Leaflet 地图底图、滑块验证码、水印和 PDF 预览等 Demo。
  • ApiManager：Go/Gin 在线 API 文档管理，目标是编写、维护、归档接口说明并降低协作沟通成本。期刊中的旧游客账号信息已刻意移除，不应继续尝试使用。

第 2 期：日历拖拽与 React 状态

  • drag-calendar：可拖动日历，支持拖动既有事件、双击添加、横向移动和空白处新建，并强调拖动阴影/预览、智能堆叠换行与拖动偏移计算。
  • concent：React 状态管理框架方向，快照说明模块化全局状态、渐进接入、事件总线、computed/watch、函数组件和细粒度订阅；版本兼容和性能主张需要对照当前 React 与项目实测。

第 1 期：管理后台与事件派发

  • tntweb-admin：React 管理框架示例，快照列出约定式路由、统一错误处理、Concent 实践、模块路由、主题/登录主题、TypeScript、国际化和单测。
  • xEmitter：几十行级别的全局事件派发器构想，可在 React、Vue、Angular 或 Node.js 代码间触发事件。全局总线会弱化依赖关系；生产应用应定义事件 schema、订阅清理、命名空间和调试方式。

三、从 45 个项目抽出的工程主题

低代码和可视化编辑器

Mall-Cook、Web-Editor 与视搭都把“画布上的操作”转成可保存模型，但模型并非普通组件树。需要定义 schema 版本、组件注册表、属性校验、资源引用、撤销/重做、预览隔离、多人编辑冲突和发布回滚。不要把任意用户 JSON 直接交给 eval；表达式应使用受限 DSL 或明确白名单。

大数据列表和管理表格

虚拟列表减少同时挂载的 DOM，表格列配置则解决不同角色的信息密度。两者都需要稳定 key、状态持久化隔离、筛选/排序语义、滚动定位和空/错误态。动态高度、展开行、固定列、屏幕阅读器和键盘导航往往是性能 Demo 未覆盖的真实难点。

服务端媒体生产

InkPaint 与 FFCreator 示例提示图像和视频可以由服务端批量合成。实际产品还要把任务排队、限制输入尺寸/时长、估算 CPU/GPU 和磁盘、限制字体与外部素材来源、记录可追溯参数、清理失败产物，并通过授权链接交付。不能在 HTTP 请求中同步等待长视频渲染。

状态和事件解耦

Limu、Concent 和 xEmitter 分别涉及不可变数据、状态订阅和事件派发。选择时画清状态所有者、更新方向和订阅生命周期；全局状态不应承载所有临时 UI，事件总线也不应成为绕开明确组件/API 边界的暗道。每个订阅应有对称取消。

四、阅读旧开源项目的复核流程

  1. 固定 commit 和运行环境，先看 LICENSE、README、CI、最近发布与 Issue。
  2. 在隔离目录按 lockfile 安装，记录 Node/浏览器/Android/iOS 等目标版本；旧依赖失败时不要全局降级机器运行环境。
  3. 按真实需求跑最小场景，核对安装体积、首屏、内存、错误恢复、键盘/触屏和卸载清理。
  4. 逐项检查上传、认证、调试面板、自动签到和在线 API Demo 是否会暴露凭据或越权能力。
  5. 把可迁移的设计思想与不能复用的旧 API 分开，最后记录许可证、维护状态、替代方案和退出成本。

五、MIT 许可声明

本节与上游仓库的 MIT License 一并保留。其适用范围以固定快照中该仓库实际授权的文件为限；被推荐的独立项目、依赖、图片与模型仍各自受其原有许可约束。

Copyright (c) 2022 good

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

固定版本来源

原始仓库为 DeformedSteel/good，本文对应 README commit b370d7ec45a673274462b0e6191d2bc24c66112e。清单按原有期次保留 45 个项目入口；其状态与授权需分别检查。本页不复制 issue 期刊中的旧演示账号、密码或第三方项目的整份文档。

动手路线

  1. 从虚拟列表、低代码画布和视频合成中各选一个主题，画出状态/数据/资源生命周期。
  2. 为每个候选项目记录固定 commit、安装结果、维护情况、许可、安全风险和替代方案。
  3. 练习从小型 Demo 提炼可迁移的架构思想，而不是复制旧依赖或演示凭据。

使用边界

文章固定于 2022 年项目快照。旧游客口令和演示账号已移除；自动签到、调试工具和上传/媒体处理功能必须遵守平台规则并进行安全审查。

原始入口

Live Notes

读者弹幕

留言提交后会先进入审核，审核通过后对其他读者公开。