# 独立观察把散落在 Markdown 里的中国独立开发者项目，变成一个可搜索、可筛选、能发现变化的浏览器看板。 [在线体验](https://lei1024.github.io/chinese-independent-developer-report/) · [数据源](https://github.com/1c7/chinese-independent-developer) · [报告问题](https://github.com/lei1024/chinese-independent-developer-report/issues) ![React](https://img.shields.io/badge/React-19-20232a?logo=react&logoColor=61dafb) ![Vite](https://img.shields.io/badge/Vite-7-646cff?logo=vite&logoColor=white) ![TypeScript](https://img.shields.io/badge/TypeScript-5-3178c6?logo=typescript&logoColor=white) ![Deploy](https://img.shields.io/badge/deploy-static-1572b6)

![独立观察项目看板](docs/assets/dashboard.png) ## 为什么做这个项目 [`1c7/chinese-independent-developer`](https://github.com/1c7/chinese-independent-developer) 收录了大量中国独立开发者及其作品，但原始内容分布在多个 Markdown 文件中。独立观察直接读取这些公开数据，并整理成适合日常浏览的项目目录。你可以在同一个界面中搜索项目和开发者，按来源或状态筛选，查看最近收录的项目，也可以快速了解上游仓库的 Stars、Forks 和最近提交。 ## 功能 - 同步产品与应用、开发者工具、独立游戏和历史归档四个版面 - 搜索项目名称、介绍和开发者 - 按来源、项目状态和最近收录时间筛选 - 展示上游仓库统计与最近提交动态 - 对比浏览器本地快照，标记新增、更新和移除的项目 - 页面打开时每 15 分钟自动同步，也支持手动刷新 - GitHub 请求失败时显示最近一次成功缓存 - 支持桌面和移动端 ## 它如何解析数据项目不依赖数据库，也没有服务端爬虫。浏览器会读取上游仓库中的四个 Markdown 文件，再按原有标题层级逐行解析。 ```md ### 2026 年 7 月 15 号添加 #### Alice - [Github](https://github.com/alice) * :white_check_mark: [Alpha](https://alpha.example.com)：项目介绍 ``` 解析过程如下： 1. `###` 标题记录项目收录日期。 2. `####` 标题记录开发者名称和 GitHub 地址。 3. 列表项提取项目状态、名称、网址和介绍。 4. 规范化后的项目网址作为唯一标识，并使用 `Map` 合并重复项目。 5. 项目字段生成指纹，与 `localStorage` 中的上一次快照比较，从而识别新增、更新和移除。项目 Markdown 优先从 `raw.githubusercontent.com` 获取。仓库统计和提交记录来自公开 GitHub API。主要实现位于 [`src/lib/parseMarkdown.ts`](src/lib/parseMarkdown.ts)、[`src/lib/github.ts`](src/lib/github.ts) 和 [`src/lib/snapshot.ts`](src/lib/snapshot.ts)。 > 这里的“监控”发生在浏览器中。页面关闭后不会继续检查，不同浏览器的快照也不会互相同步。如果需要全天候监控和通知，可在此基础上增加定时任务与持久化存储。 ## 本地运行需要 Node.js 20.19 或更高版本，推荐使用 Node.js 22。 ```bash git clone https://github.com/lei1024/chinese-independent-developer-report.git cd chinese-independent-developer-report npm install npm run dev ``` 生产构建和本地预览： ```bash npm run build npm run preview ``` 构建产物位于 `dist`。这是一个纯静态 Vite 应用，不需要数据库和服务端运行时。 ## 部署到 GitHub Pages 仓库已经包含 [`.github/workflows/deploy-pages.yml`](.github/workflows/deploy-pages.yml)。推送到 `main` 分支后，GitHub Actions 会自动构建并发布 `dist`。在你自己的仓库中部署时： 1. Fork 本仓库，或把代码推送到新的 GitHub 仓库。 2. 打开仓库的 `Settings > Pages`。 3. 将 `Build and deployment` 的 Source 设为 `GitHub Actions`。 4. 推送到 `main`，然后在 `Actions` 页面等待 `Deploy to GitHub Pages` 完成。 5. 访问 `https://<你的用户名>.github.io/<仓库名>/`。当前 `vite.config.ts` 中的 Pages 子路径与仓库名 `chinese-independent-developer-report` 对应。如果你修改仓库名，也需要同步修改其中的 `base`。 ## 部署到 Vercel 1. 登录 [Vercel](https://vercel.com/)，选择 `Add New > Project`。 2. 导入你的 GitHub 仓库。 3. Framework Preset 选择 `Vite`。 4. Build Command 使用 `npm run build`。 5. Output Directory 使用 `dist`。 6. 不需要配置环境变量，点击 Deploy 即可。也可以在项目目录使用命令行部署： ```bash npx vercel ``` Vercel 构建环境不会设置 `GITHUB_ACTIONS`，因此应用会自动使用根路径 `/`，无需额外修改 Vite 配置。 ## 部署到 Cloudflare Pages 1. 登录 [Cloudflare Dashboard](https://dash.cloudflare.com/)，进入 `Workers & Pages`。 2. 选择 `Create application > Pages > Connect to Git`。 3. 连接并选择你的 GitHub 仓库。 4. Production branch 选择 `main`。 5. Framework preset 选择 `Vite`。 6. Build command 使用 `npm run build`。 7. Build output directory 使用 `dist`。 8. 建议添加环境变量 `NODE_VERSION=22`，然后开始部署。应用本身不需要业务环境变量。这里使用的是 Cloudflare Pages，不需要创建 Workers 项目。 ## 数据与请求限制 - 所有数据均来自公开 GitHub 仓库，应用不会上传你的浏览记录。 - 缓存和变化快照只保存在当前浏览器的 `localStorage` 中。 - 未认证 GitHub API 通常按来源 IP 限制为每小时 60 次请求。 - 不要把 GitHub Token 放入 `VITE_*` 环境变量。Vite 会把它写入公开的前端构建产物。 - 如果 API 暂时不可用，应用会回退到当前浏览器最近一次成功同步的数据。 ## 技术栈 React 19、TypeScript、Vite、Lucide Icons 和 Vitest。整个项目可直接部署到任何支持静态站点的平台。 ## 致谢数据来自 [`1c7/chinese-independent-developer`](https://github.com/1c7/chinese-independent-developer)。感谢原项目维护者和所有提交独立作品的开发者。