<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>WindowsIt&apos;s Music Club</title><description>音乐、代码与生活 —— WindowsIt 的个人博客</description><link>https://caiyan12.github.io/</link><language>zh_CN</language><item><title>前端特化 Web UI 设计开源项目索引（2026-09-03）</title><link>https://caiyan12.github.io/posts/20260903134906/</link><guid isPermaLink="true">https://caiyan12.github.io/posts/20260903134906/</guid><description>从液态玻璃、动效与设计系统，到工程化、可视化和 AI 编码，按场景整理的前端开源项目索引。</description><pubDate>Thu, 03 Sep 2026 13:49:06 GMT</pubDate><content:encoded># 前端特化 Web UI 设计开源项目索引

这份索引覆盖液态玻璃与毛玻璃、动效引擎、创意组件、AI 应用界面、无限画布、设计系统、工程化工具链、数据可视化，以及 AI 编码与前端技能包。正文表格中的 star、语言和归档状态保留自 2026-09-03 的原稿采集快照；可定位的 GitHub 仓库同时接入本站构建期仓库卡片，访客浏览页面时不会额外请求 GitHub API。

&gt; [!NOTE]
&gt; 头图：[Daniil Komov](https://www.pexels.com/@dkomov/) 在 [Pexels](https://www.pexels.com/photo/modern-laptop-displaying-code-in-cozy-workspace-34803986/) 发布，文件以 `1920×1280` 分辨率保存到本站静态资源。

## 怎么读这份文档

每个章节先给一张速览表（图标、项目名、一句话定位、分级与原稿采集时的 star），方便快速筛选；随后保留逐条说明，并在可对应 GitHub 仓库的条目前插入本站的构建期仓库卡片。

**分级口径**（按 star 规模 + 生态位，不是质量评价）：

| 标记   | 含义                         | 量级      |
| ------ | ---------------------------- | --------- |
| `T0`   | 生态基建，技术选型基本绕不开 | ≥ 80k     |
| `T1`   | 细分方向主力，可放心用于生产 | 10k – 80k |
| `T2`   | 场景特化，用之前先看维护状态 | 1k – 10k  |
| `观察` | 新建或长尾，看实现思路为主   | &lt; 1k      |

**图标来源**：`https://github.com/&lt;owner&gt;.png?size=128`，即该仓库所属 owner 的 GitHub 原始头像，并非另行收集的素材。头像图片需要联网加载。

:::tip[阅读建议]
先用速览表按技术栈和场景筛选；准备采用时，再看仓库卡片中的构建期元数据与下方的适用场景、亮点和注意事项。
:::

**目录**

1. [液态玻璃与毛玻璃拟态](#一液态玻璃与毛玻璃拟态)
2. [创意组件集合与动效组件库](#二创意组件集合与动效组件库)
3. [动画与交互引擎](#三动画与交互引擎)
4. [无限画布与实验性交互](#四无限画布与实验性交互)
5. [AI 应用界面](#五ai-应用界面)
6. [设计系统与组件库](#六设计系统与组件库)
7. [状态管理与表单](#七状态管理与表单)
8. [工程化工具链](#八工程化工具链)
9. [数据可视化](#九数据可视化)
10. [AI 编码与前端技能包](#十ai-编码与前端技能包)

---

## 一、液态玻璃与毛玻璃拟态

Apple Liquid Glass 这套视觉语言 2025 年随 iOS 26 铺开，Web 侧的开源实现几乎都是 2026 年上半年才建的仓。这一节里除了 `liquid-glass-js`，其余 star 都在两位数以下，没有经过生产验证。建议当实现参考读，不要直接挂到线上业务。

### 速览

|                                                                       | 项目                           | 定位                             | 分级   | Star |
| --------------------------------------------------------------------- | ------------------------------ | -------------------------------- | ------ | ---- |
| &lt;img src=&quot;https://github.com/dashersw.png?size=128&quot; width=&quot;24&quot; /&gt;     | `dashersw/liquid-glass-js`     | 原生 JS 的玻璃效果层，无框架依赖 | `观察` | 802  |
| &lt;img src=&quot;https://github.com/glincker.png?size=128&quot; width=&quot;24&quot; /&gt;     | `glincker/glinui`              | React 液态玻璃组件库，50+ 组件   | `观察` | 34   |
| &lt;img src=&quot;https://github.com/JUNGHERZ.png?size=128&quot; width=&quot;24&quot; /&gt;     | `JUNGHERZ/GlassKit`            | 纯 CSS 玻璃组件库，0 依赖        | `观察` | 12   |
| &lt;img src=&quot;https://github.com/akilakeshara.png?size=128&quot; width=&quot;24&quot; /&gt; | `akilakeshara/zentak-glass-ui` | 玻璃质感的业务模块组件           | `观察` | 6    |
| &lt;img src=&quot;https://github.com/xiaojiaenen.png?size=128&quot; width=&quot;24&quot; /&gt;  | `xiaojiaenen/liquid-glass`     | SVG 滤镜做真折射的中文项目       | `观察` | 1    |
| &lt;img src=&quot;https://github.com/YanAndFish.png?size=128&quot; width=&quot;24&quot; /&gt;   | `YanAndFish/liquid-glass`      | Vue 3 厚透镜玻璃组件             | `观察` | 1    |

### 卡片

::github{repo=&quot;dashersw/liquid-glass-js&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/dashersw.png?size=128&quot; width=&quot;48&quot; alt=&quot;liquid-glass-js&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;dashersw/liquid-glass-js&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 802 &amp;nbsp;·&amp;nbsp; &lt;code&gt;JavaScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;观察&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2025-06-11&lt;/p&gt;
&lt;p&gt;把 Apple 那套液态玻璃搬到原生 DOM 上，不绑框架。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：给任意 HTML 元素叠一层玻璃效果，可调模糊半径、饱和度、折射强度、边缘高光。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：官网 Hero 区、悬浮卡片、需要在老项目里临时加质感的页面。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：Vanilla JS，CDN 引一行就能用；MIT 许可，代码量小，适合直接读实现。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：接口返回的最后推送时间是 2025-06-12，之后没有新提交。当参考实现用。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/dashersw/liquid-glass-js&quot;&gt;github.com/dashersw/liquid-glass-js&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;glincker/glinui&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/glincker.png?size=128&quot; width=&quot;48&quot; alt=&quot;glinui&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;glincker/glinui&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 34 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;观察&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2026-02-14&lt;/p&gt;
&lt;p&gt;React 生态里组件最全的液态玻璃库，站在 Radix + Tailwind 上面。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：50+ 组件，覆盖多层玻璃表面、光影层级、motion 过渡；既能 shadcn 式复制源码，也能装 npm 包。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：仪表盘、AI 控制台、深色为主的后台界面。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：这一节里唯一走完整组件库路线的项目，深色模式处理得比较细；最近更新 2026-09-01，还在维护。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：建仓半年，API 稳定性没有保障。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/glincker/glinui&quot;&gt;github.com/glincker/glinui&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;JUNGHERZ/GlassKit&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/JUNGHERZ.png?size=128&quot; width=&quot;48&quot; alt=&quot;GlassKit&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;JUNGHERZ/GlassKit&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 12 &amp;nbsp;·&amp;nbsp; &lt;code&gt;HTML&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;观察&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2026-03-21&lt;/p&gt;
&lt;p&gt;visionOS / iOS 26 风格的纯 CSS 组件库，一个 CSS 文件搞定。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：24 个组件，全部靠 class 驱动；另提供 Web Component 封装（GlassKit Elements）；浅色/深色主题走 CSS 变量切换。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：Astro / 静态站、不想引入 JS 的展示型页面。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：零依赖，主题的定制入口是 design token，改变量就能整站换风格；作者另做了配套 Astro 模板。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：仓库 tag 里写了 no-dependencies，代价是交互态（拖拽、手势）基本没有。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/JUNGHERZ/GlassKit&quot;&gt;github.com/JUNGHERZ/GlassKit&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;akilakeshara/zentak-glass-ui&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/akilakeshara.png?size=128&quot; width=&quot;48&quot; alt=&quot;zentak-glass-ui&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;akilakeshara/zentak-glass-ui&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 6 &amp;nbsp;·&amp;nbsp; &lt;code&gt;JavaScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;观察&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2026-03-19&lt;/p&gt;
&lt;p&gt;玻璃风格的成套业务组件，不是原子组件。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：滑动登录门户、悬浮导航、带动画的购物按钮、玻璃质感上传组件。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：需要整块业务模块直接搬的落地页、活动页。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：粒度比组件库大，复制下来改文案就能跑。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：star 个位数，代码质量和可访问性需要自己过一遍。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/akilakeshara/zentak-glass-ui&quot;&gt;github.com/akilakeshara/zentak-glass-ui&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;xiaojiaenen/liquid-glass&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/xiaojiaenen.png?size=128&quot; width=&quot;48&quot; alt=&quot;liquid-glass&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;xiaojiaenen/liquid-glass&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 1 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;观察&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2026-06-11&lt;/p&gt;
&lt;p&gt;中文项目，用 SVG 滤镜做真折射而不是简单 blur。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：基于 SVG 滤镜模拟 Snell 折射与镜面高光；36 个组件覆盖导航、表单、反馈、展示；参数按黄金分割取值；鼠标视差反光。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：追求折射物理感的官网、需要中文文档的项目。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：Safari / Firefox 上自动降级成毛玻璃，这个处理在同赛道里少见；零运行时依赖，只要 React 18+。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：1 star，纯个人项目。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/xiaojiaenen/liquid-glass&quot;&gt;github.com/xiaojiaenen/liquid-glass&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;YanAndFish/liquid-glass&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/YanAndFish.png?size=128&quot; width=&quot;48&quot; alt=&quot;liquid-glass&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;YanAndFish/liquid-glass&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 1 &amp;nbsp;·&amp;nbsp; &lt;code&gt;Vue&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;观察&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2025-12-18&lt;/p&gt;
&lt;p&gt;Vue 3 的厚透镜玻璃组件。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：可调折射率、边缘透镜环、边缘高光；内置调试面板实时调参。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：Vue 技术栈的展示型页面。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：这一节里唯一的 Vue 实现，调试面板让参数摸索成本低不少。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：仓库自述写的是通用 UI 组件库，液态玻璃只是其中一部分；1 star。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/YanAndFish/liquid-glass&quot;&gt;github.com/YanAndFish/liquid-glass&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

---

## 二、创意组件集合与动效组件库

这一类是「复制粘贴型」资源：不装依赖，把组件源码拷进项目自己维护。适合官网、落地页这类对视觉要求高、对长期维护要求相对低的场景。

### 速览

|                                                                        | 项目                    | 定位                                     | 分级 | Star   |
| ---------------------------------------------------------------------- | ----------------------- | ---------------------------------------- | ---- | ------ |
| &lt;img src=&quot;https://github.com/magicuidesign.png?size=128&quot; width=&quot;24&quot; /&gt; | `magicuidesign/magicui` | React 动效组件库，150+ 组件              | `T1` | 22,144 |
| &lt;img src=&quot;https://github.com/uiverse-io.png?size=128&quot; width=&quot;24&quot; /&gt;    | `uiverse-io/galaxy`     | 社区 UI 元素合集，输出 HTML/CSS/Tailwind | `T1` | 12,273 |
| &lt;img src=&quot;https://github.com/aceternity.png?size=128&quot; width=&quot;24&quot; /&gt;    | Aceternity UI           | 官网动效组件，只有站点没有主仓库         | —    | —      |

### 卡片

::github{repo=&quot;magicuidesign/magicui&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/magicuidesign.png?size=128&quot; width=&quot;48&quot; alt=&quot;magicui&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;magicuidesign/magicui&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 22,144 &amp;nbsp;·&amp;nbsp; &lt;code&gt;MDX&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2023-06-26&lt;/p&gt;
&lt;p&gt;shadcn 路线的动效组件库，拿 CLI 一条命令装进项目。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：150+ 组件，覆盖光束、粒子背景、渐变边框、文字动效、滚动微交互；底层是 Framer Motion + Tailwind。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：SaaS 官网、产品落地页、需要在两天内做出「有设计感」的界面。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：源码进你自己的仓库，组件想改就改，没有版本升级的绑架；open issue 只有 2 个，维护状态在这一类里算干净。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：组件偏视觉，业务组件（表格、表单）不在范围内。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/magicuidesign/magicui&quot;&gt;github.com/magicuidesign/magicui&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;uiverse-io/galaxy&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/uiverse-io.png?size=128&quot; width=&quot;48&quot; alt=&quot;galaxy&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;uiverse-io/galaxy&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 12,273 &amp;nbsp;·&amp;nbsp; &lt;code&gt;HTML&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2023-10-01&lt;/p&gt;
&lt;p&gt;Uiverse.io 的官方仓库，社区投稿的 UI 元素大合集。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：霓虹、渐变、悬浮、异形按钮、卡片动效等元素，可切换输出 HTML / CSS / Tailwind / React 代码。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：需要一个具体组件（比如一个好看的开关、一个 3D 按钮）时来这里翻。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：量最大，社区投稿持续在加；四种代码输出格式，跨技术栈可用。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：原 &lt;code&gt;uiverse-io/uiverse&lt;/code&gt; 已 404，现在只认 galaxy 这个仓库。社区稿件质量参差，复制前先自己跑一遍。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/uiverse-io/galaxy&quot;&gt;github.com/uiverse-io/galaxy&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/aceternity.png?size=128&quot; width=&quot;48&quot; alt=&quot;Aceternity UI&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;Aceternity UI&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; 官方站点，无单一主仓库&lt;/p&gt;
&lt;p&gt;官网动效组件的标杆级站点，只提供 copy-paste 源码。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：3D 卡片、流光按钮、spotlight 聚光、移动边框、星尘背景等 100+ 组件，基于 Framer Motion + Tailwind。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：高质感官网、产品发布页。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：组件源码直接在站点上展开复制，另外提供面向 LLM 的组件目录，可以喂给 AI 编码助手。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：没有统一仓库，也就没有版本管理和 issue 跟踪。本条不参与 star 分级。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://ui.aceternity.com&quot;&gt;ui.aceternity.com&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

---

## 三、动画与交互引擎

按「要什么效果」选：CSS 类切换用 animate.css，补间和时序用 anime / GSAP，React 声明式用 motion，滚动叙事用 GSAP ScrollTrigger，3D 用 three.js 全家桶，平滑滚动用 Lenis。

### 速览

|                                                                              | 项目                          | 定位                                    | 分级 | Star    |
| ---------------------------------------------------------------------------- | ----------------------------- | --------------------------------------- | ---- | ------- |
| &lt;img src=&quot;https://github.com/animate-css.png?size=128&quot; width=&quot;24&quot; /&gt;         | `animate-css/animate.css`     | 纯 CSS 动画类库                         | `T0` | 82,775  |
| &lt;img src=&quot;https://github.com/juliangarnier.png?size=128&quot; width=&quot;24&quot; /&gt;       | `juliangarnier/anime`         | 轻量 JS 补间动画引擎                    | `T1` | 72,615  |
| &lt;img src=&quot;https://github.com/mrdoob.png?size=128&quot; width=&quot;24&quot; /&gt;              | `mrdoob/three.js`             | WebGL 3D 引擎                           | `T0` | 115,047 |
| &lt;img src=&quot;https://github.com/airbnb.png?size=128&quot; width=&quot;24&quot; /&gt;              | `airbnb/lottie-web`           | 渲染 AE 导出的 Lottie JSON              | `T1` | 32,074  |
| &lt;img src=&quot;https://github.com/motiondivision.png?size=128&quot; width=&quot;24&quot; /&gt;      | `motiondivision/motion`       | React / JS 动效库（Framer Motion 现名） | `T1` | 33,459  |
| &lt;img src=&quot;https://github.com/greensock.png?size=128&quot; width=&quot;24&quot; /&gt;           | `greensock/GSAP`              | 时间线动画引擎 + ScrollTrigger          | `T1` | 28,199  |
| &lt;img src=&quot;https://github.com/pmndrs.png?size=128&quot; width=&quot;24&quot; /&gt;              | `pmndrs/react-three-fiber`    | three.js 的 React 渲染器                | `T1` | 31,950  |
| &lt;img src=&quot;https://github.com/VincentGarreau.png?size=128&quot; width=&quot;24&quot; /&gt;      | `VincentGarreau/particles.js` | 粒子背景                                | `T1` | 30,205  |
| &lt;img src=&quot;https://github.com/michalsnik.png?size=128&quot; width=&quot;24&quot; /&gt;          | `michalsnik/aos`              | 滚动入场动画                            | `T1` | 28,057  |
| &lt;img src=&quot;https://github.com/darkroomengineering.png?size=128&quot; width=&quot;24&quot; /&gt; | `darkroomengineering/lenis`   | 平滑滚动                                | `T1` | 15,673  |
| &lt;img src=&quot;https://github.com/pmndrs.png?size=128&quot; width=&quot;24&quot; /&gt;              | `pmndrs/drei`                 | react-three-fiber 辅助工具集            | `T2` | 9,839   |

### 卡片

::github{repo=&quot;animate-css/animate.css&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/animate-css.png?size=128&quot; width=&quot;48&quot; alt=&quot;animate.css&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;animate-css/animate.css&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 82,775 &amp;nbsp;·&amp;nbsp; &lt;code&gt;CSS&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T0&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2011-10-12&lt;/p&gt;
&lt;p&gt;一个 CSS 文件 + 一行 class，把淡入、弹跳、翻转全包了。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：几十个预置关键帧动画类，加 class 即触发，支持自定义 duration / delay / repeat。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：后台系统的提示动效、活动页的元素入场、不想写 JS 的任何地方。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：fork 数是这一节里最高的（15,915），说明大量项目在改它；纯 CSS，零 JS 依赖。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：本轮修正地址 —— 正确的 owner 是 &lt;code&gt;animate-css&lt;/code&gt;，原文档写的 &lt;code&gt;animate.css/animate.css&lt;/code&gt; 返回 404。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/animate-css/animate.css&quot;&gt;github.com/animate-css/animate.css&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;juliangarnier/anime&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/juliangarnier.png?size=128&quot; width=&quot;48&quot; alt=&quot;anime&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;juliangarnier/anime&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 72,615 &amp;nbsp;·&amp;nbsp; &lt;code&gt;JavaScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2016-03-13&lt;/p&gt;
&lt;p&gt;API 极简的 JS 补间引擎，适合写时序动画。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：CSS 属性、SVG、DOM 属性、JS 对象的补间；时间线、stagger、easing、keyframes。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：图标变形、数据图表的入场、小体量的序列动画。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：体积远小于 GSAP，链式 API 读起来顺；不需要构建工具，script 标签直接引。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：没有官方的滚动联动插件，做 scroll-driven 动画要自己接 IntersectionObserver。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/juliangarnier/anime&quot;&gt;github.com/juliangarnier/anime&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;mrdoob/three.js&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/mrdoob.png?size=128&quot; width=&quot;48&quot; alt=&quot;three.js&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;mrdoob/three.js&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 115,047 &amp;nbsp;·&amp;nbsp; &lt;code&gt;JavaScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T0&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2010-03-23&lt;/p&gt;
&lt;p&gt;Web 端 3D 的入口，其他 3D 库基本都站在它上面。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：场景图、相机、光照、材质、后处理、加载器（glTF / OBJ / FBX）；同时支持 WebGL、WebGL2、WebGPU。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：产品 3D 展示、Web 游戏、数据可视化的三维表达、首页背景特效。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：fork 36,517，生态和案例数量没有对手；仓库 topics 里已包含 webgpu，渲染后端在往新标准迁。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：API 面很大，直接手写成本高，React 项目一般走 react-three-fiber。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/mrdoob/three.js&quot;&gt;github.com/mrdoob/three.js&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;motiondivision/motion&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/motiondivision.png?size=128&quot; width=&quot;48&quot; alt=&quot;motion&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;motiondivision/motion&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 33,459 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2018-11-16&lt;/p&gt;
&lt;p&gt;Framer Motion 改名后的仓库，React 动效的默认选项。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：spring 物理动画、layout 动画（元素位置变化自动补间）、手势（drag / hover / tap）、AnimatePresence 出场动画、滚动联动。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：React 项目里几乎所有交互态过渡，尤其是列表增删、路由切换、拖拽排序。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：layout 动画几乎无解 —— 用 CSS 手写同样效果要处理 FLIP，这里一个 prop 解决；同时有 vanilla JS 版本，不限于 React。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：open issue 108，包体积不小，只在乎首屏的站点要按需引入。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/motiondivision/motion&quot;&gt;github.com/motiondivision/motion&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;greensock/GSAP&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/greensock.png?size=128&quot; width=&quot;48&quot; alt=&quot;GSAP&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;greensock/GSAP&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 28,199 &amp;nbsp;·&amp;nbsp; &lt;code&gt;JavaScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2012-09-21&lt;/p&gt;
&lt;p&gt;时间线模型最成熟的动画平台，做 award 级官网的主力。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：Timeline 精确编排、ScrollTrigger 滚动驱动、SplitText 文字拆分、MorphSVG 路径变形、Draggable。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：长页面的滚动叙事、需要逐帧编排的复杂动效、SVG 路径动画。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：时间线可以嵌套、反转、seek，这一点是 anime 和 CSS 动画给不了的；框架无关，同一套代码在 React / Vue / 原生里都能跑。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：插件体系的授权方式变过几次，商用前请自己到官网确认当前条款，别信二手信息。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/greensock/GSAP&quot;&gt;github.com/greensock/GSAP&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;airbnb/lottie-web&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/airbnb.png?size=128&quot; width=&quot;48&quot; alt=&quot;lottie-web&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;airbnb/lottie-web&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 32,074 &amp;nbsp;·&amp;nbsp; &lt;code&gt;JavaScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2015-02-20&lt;/p&gt;
&lt;p&gt;把 After Effects 动画原样搬到网页上。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：解析并渲染 AE 通过 Bodymovin 导出的 JSON；支持 SVG / Canvas / HTML 三种渲染器，可控制播放进度、速度、片段。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：品牌吉祥物动画、空状态插画、加载动画、营销页里设计师给的高保真动效。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：设计与开发的交接成本最低 —— 设计师出 JSON，前端一行接入，不用还原关键帧。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：open issue 857，且复杂的 AE 效果（表达式、部分滤镜）导出来会失真，前期要和设计师对齐可用范围。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/airbnb/lottie-web&quot;&gt;github.com/airbnb/lottie-web&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;pmndrs/react-three-fiber&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/pmndrs.png?size=128&quot; width=&quot;48&quot; alt=&quot;react-three-fiber&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;pmndrs/react-three-fiber&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 31,950 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2019-02-25&lt;/p&gt;
&lt;p&gt;用 JSX 写 three.js，把 3D 场景变成组件树。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：three.js 的 React 渲染器，声明式描述 mesh / 材质 / 光源；自动处理 resize、dispose、渲染循环。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：React 项目里的 3D 官网、产品配置器、数据三维可视化。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：状态直接驱动 3D，不需要手动写命令式的 &lt;code&gt;scene.add()&lt;/code&gt;；配套 drei 工具集把常用模式都封装好了。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：底层仍是 three.js，性能问题和 WebGL 兼容性问题一个都不会少。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/pmndrs/react-three-fiber&quot;&gt;github.com/pmndrs/react-three-fiber&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;pmndrs/drei&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/pmndrs.png?size=128&quot; width=&quot;48&quot; alt=&quot;drei&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;pmndrs/drei&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 9,839 &amp;nbsp;·&amp;nbsp; &lt;code&gt;JavaScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T2&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2020-04-26&lt;/p&gt;
&lt;p&gt;react-three-fiber 的官方辅助库，用 R3F 就该一起装。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：相机控制（OrbitControls）、加载器封装、环境光照、性能自适应（AdaptiveDpr）、文字、后处理快捷组件等一堆 helpers 和 hooks。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：任何 R3F 项目的起步阶段。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：省掉大量样板代码，比如轨道控制器、GLTF 加载的 loading 状态管理。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：跟着 R3F 版本走，跨大版本升级时 API 有变动。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/pmndrs/drei&quot;&gt;github.com/pmndrs/drei&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;VincentGarreau/particles.js&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/VincentGarreau.png?size=128&quot; width=&quot;48&quot; alt=&quot;particles.js&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;VincentGarreau/particles.js&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 30,205 &amp;nbsp;·&amp;nbsp; &lt;code&gt;JavaScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2014-09-06&lt;/p&gt;
&lt;p&gt;星云 / 连线 / 漂浮粒子背景，配置文件驱动。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：粒子数量、颜色、连线、悬停交互（grab / bubble / repulse）、点击喷发，全部走 JSON 配置。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：官网 Hero 背景、登录页氛围层、技术类博客头部。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：fork 4,816，配置即效果，不用写一行 JS；体积很小。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：open issue 367，维护节奏慢；粒子数上千时会掉帧，移动端要降配。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/VincentGarreau/particles.js&quot;&gt;github.com/VincentGarreau/particles.js&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;michalsnik/aos&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/michalsnik.png?size=128&quot; width=&quot;48&quot; alt=&quot;aos&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;michalsnik/aos&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 28,057 &amp;nbsp;·&amp;nbsp; &lt;code&gt;JavaScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2015-07-09&lt;/p&gt;
&lt;p&gt;元素滚进视口时触发动画，零依赖。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：用 &lt;code&gt;data-aos&lt;/code&gt; 属性声明动画类型、延迟、时长、触发位置，库自己监听滚动。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：企业官网、介绍型长页面、文档站。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：接入成本接近零，加属性就行；不需要理解 IntersectionObserver。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：open issue 374，且只做「进入视口播一次」这一种模式，pin 住元素做叙事要上 GSAP。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/michalsnik/aos&quot;&gt;github.com/michalsnik/aos&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;darkroomengineering/lenis&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/darkroomengineering.png?size=128&quot; width=&quot;48&quot; alt=&quot;lenis&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;darkroomengineering/lenis&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 15,673 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2022-02-21&lt;/p&gt;
&lt;p&gt;接管浏览器滚动，做出惯性平滑滚动。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：虚拟滚动实现平滑惯性、滚动吸附、滚动锁定；提供 React / Vue 适配，暴露 scroll 事件供动画库订阅。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：和 GSAP ScrollTrigger 搭配做滚动叙事、作品集站点。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：不像早期的 smooth-scroll 库那样劫持原生行为导致可访问性崩坏，键盘和锚点跳转都能正常处理。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：会改变用户的滚动手感，中后台系统不要加。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/darkroomengineering/lenis&quot;&gt;github.com/darkroomengineering/lenis&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

---

## 四、无限画布与实验性交互

### 速览

|                                                                     | 项目                    | 定位                         | 分级 | Star    |
| ------------------------------------------------------------------- | ----------------------- | ---------------------------- | ---- | ------- |
| &lt;img src=&quot;https://github.com/excalidraw.png?size=128&quot; width=&quot;24&quot; /&gt; | `excalidraw/excalidraw` | 手绘风白板，完整应用         | `T0` | 131,024 |
| &lt;img src=&quot;https://github.com/tldraw.png?size=128&quot; width=&quot;24&quot; /&gt;     | `tldraw/tldraw`         | 无限画布 SDK                 | `T1` | 50,091  |
| &lt;img src=&quot;https://github.com/jdan.png?size=128&quot; width=&quot;24&quot; /&gt;       | `jdan/98.css`           | Windows 98 复古 CSS 设计系统 | `T1` | 11,472  |
| &lt;img src=&quot;https://github.com/kando-menu.png?size=128&quot; width=&quot;24&quot; /&gt; | `kando-menu/kando`      | 饼状手势径向菜单             | `T2` | 6,288   |

### 卡片

::github{repo=&quot;excalidraw/excalidraw&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/excalidraw.png?size=128&quot; width=&quot;48&quot; alt=&quot;excalidraw&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;excalidraw/excalidraw&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 131,024 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T0&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2020-01-02&lt;/p&gt;
&lt;p&gt;手绘风格的无限白板，一个可直接嵌入的产品级应用。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：手绘渲染（rough.js）、形状与自由绘制、端到端加密协作、导出 PNG/SVG、以 npm 包形式嵌入自己的 React 应用。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：团队协作白板、技术分享画图、作为自家产品的绘图模块嵌入。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：审美上有明确主张 —— 那种歪歪扭扭的手写感成了它的识别符号；编辑器代码是 Canvas 类应用少有的完整公开实现。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：open issue 3,435，仓库很大，想读懂要挑模块看。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/excalidraw/excalidraw&quot;&gt;github.com/excalidraw/excalidraw&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;tldraw/tldraw&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/tldraw.png?size=128&quot; width=&quot;48&quot; alt=&quot;tldraw&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;tldraw/tldraw&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 50,091 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2021-05-09&lt;/p&gt;
&lt;p&gt;给你无限画布能力，而不是给你一个白板产品。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：画布引擎 + 形状系统 + 选择/变换交互，另有多人同步（sync）、自定义形状、持久化接口。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：自研白板、流程图工具、设计工具、AI 画布类产品的底层。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：定位是 SDK，形状和工具都能扩展，这点比 excalidraw（偏成品）灵活；仓库 topics 直接标了 multiplayer / sync。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：同步服务的商业化条款有门槛，商用前需要确认许可证范围。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/tldraw/tldraw&quot;&gt;github.com/tldraw/tldraw&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;jdan/98.css&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/jdan.png?size=128&quot; width=&quot;48&quot; alt=&quot;98.css&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;jdan/98.css&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 11,472 &amp;nbsp;·&amp;nbsp; &lt;code&gt;CSS&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2020-04-17&lt;/p&gt;
&lt;p&gt;一个 CSS 文件，把页面变成 Windows 98。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：按钮、窗口、标题栏、进度条、标签页、表单控件的 98 风格样式；带 3D 边框和经典灰配色。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：复古主题站点、极客向项目、愚人节彩蛋页。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：纯 CSS 实现，没有图片资源，全部用 border 技巧画出立体边框。对做复古 UI 的人来说是现成的设计系统。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：视觉优先，可访问性（对比度、焦点样式）需要自己补。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/jdan/98.css&quot;&gt;github.com/jdan/98.css&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;kando-menu/kando&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/kando-menu.png?size=128&quot; width=&quot;48&quot; alt=&quot;kando&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;kando-menu/kando&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 6,288 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T2&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2023-04-16&lt;/p&gt;
&lt;p&gt;饼状手势菜单，按住拖一下就选中。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：径向（pie）菜单，支持鼠标手势轨迹识别、多级子菜单、菜单项自定义。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：创意工具、画布类应用、需要高频操作入口的桌面端 Web 应用。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：手势记忆形成后操作速度比线性菜单快一个量级，这是它存在的理由；跨平台（Electron）。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：仓库自述是桌面端菜单工具，Web 集成需要自己做适配层。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/kando-menu/kando&quot;&gt;github.com/kando-menu/kando&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

---

## 五、AI 应用界面

这一节大部分是「前后端完整的应用」，前端价值在于可以直接抄它的交互模式：流式输出、消息列表、工具调用展示、插件面板、多模型切换。

### 速览

|                                                                       | 项目                      | 定位                                     | 分级 | Star    |
| --------------------------------------------------------------------- | ------------------------- | ---------------------------------------- | ---- | ------- |
| &lt;img src=&quot;https://github.com/langgenius.png?size=128&quot; width=&quot;24&quot; /&gt;   | `langgenius/dify`         | LLM 应用开发平台，可视化编排             | `T0` | 154,261 |
| &lt;img src=&quot;https://github.com/open-webui.png?size=128&quot; width=&quot;24&quot; /&gt;   | `open-webui/open-webui`   | 自托管 AI 聊天前端                       | `T0` | 150,746 |
| &lt;img src=&quot;https://github.com/lobehub.png?size=128&quot; width=&quot;24&quot; /&gt;      | `lobehub/lobehub`         | AI 聊天 / Agent 界面框架（原 lobe-chat） | `T0` | 82,175  |
| &lt;img src=&quot;https://github.com/FlowiseAI.png?size=128&quot; width=&quot;24&quot; /&gt;    | `FlowiseAI/Flowise`       | 拖拽式 Agent 流程构建器 ⚠️ 已归档        | `T1` | 55,402  |
| &lt;img src=&quot;https://github.com/danny-avila.png?size=128&quot; width=&quot;24&quot; /&gt;  | `danny-avila/LibreChat`   | 多模型聊天平台，类 ChatGPT               | `T1` | 42,740  |
| &lt;img src=&quot;https://github.com/mckaywrigley.png?size=128&quot; width=&quot;24&quot; /&gt; | `mckaywrigley/chatbot-ui` | AI 聊天 UI 模板                          | `T1` | 33,341  |
| &lt;img src=&quot;https://github.com/wandb.png?size=128&quot; width=&quot;24&quot; /&gt;        | `wandb/openui`            | 自然语言描述生成 UI 原型                 | `T1` | 22,533  |
| &lt;img src=&quot;https://github.com/thesysdev.png?size=128&quot; width=&quot;24&quot; /&gt;    | `thesysdev/openui`        | 生成式 UI 的开放标准                     | `T2` | 8,513   |

### 卡片

::github{repo=&quot;langgenius/dify&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/langgenius.png?size=128&quot; width=&quot;48&quot; alt=&quot;dify&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;langgenius/dify&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 154,261 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T0&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2023-04-12&lt;/p&gt;
&lt;p&gt;把 Agent 工作流、RAG、模型管理做成可视化工作台。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：工作流画布编排、知识库 / RAG 管线、工具与 MCP 接入、多模型供应商、发布为 API 或 Web App。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：企业内部 AI 应用平台、需要非技术同事参与配置的场景。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：前端主线是 TypeScript（Next.js），工作流画布是基于节点的编辑器，这块实现值得单独读；部署形态覆盖云 / VPC / 自托管。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：open issue 1,044，代码体量大，二次开发前先评估。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/langgenius/dify&quot;&gt;github.com/langgenius/dify&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;open-webui/open-webui&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/open-webui.png?size=128&quot; width=&quot;48&quot; alt=&quot;open-webui&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;open-webui/open-webui&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 150,746 &amp;nbsp;·&amp;nbsp; &lt;code&gt;Python&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T0&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2023-10-06&lt;/p&gt;
&lt;p&gt;自托管 AI 聊天界面，接 Ollama 或任何 OpenAI 兼容接口。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：多模型切换、内置 RAG、插件系统、主题定制、多用户与权限、MCP 支持。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：本地大模型（Ollama）的日常使用界面、团队内部私有化部署的 AI 入口。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：fork 22,023 —— 大量人在它基础上改出自己的界面；插件体系让前端扩展不用改核心代码。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：后端是 Python，前端是其一部分，纯前端项目想复用 UI 需要剥离后端耦合。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/open-webui/open-webui&quot;&gt;github.com/open-webui/open-webui&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;lobehub/lobehub&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/lobehub.png?size=128&quot; width=&quot;48&quot; alt=&quot;lobehub&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;lobehub/lobehub&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 82,175 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T0&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2023-05-21&lt;/p&gt;
&lt;p&gt;原 lobe-chat，本轮核验发现仓库已改名，定位从聊天框架升级为 Agent 调度台。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：多模型接入、插件 / Agent 市场、知识库（RAG）、多模态、一键私有化部署。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：需要精致 UI 的自部署 AI 产品、想直接改出一个商业化聊天应用的团队。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：这个赛道里 UI 设计质量排前几位的项目，深色主题的完成度尤其高；纯 TypeScript 技术栈，前端可以直接读。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：本轮修正地址 —— &lt;code&gt;lobehub/lobe-chat&lt;/code&gt; 已 301 跳转到 &lt;code&gt;lobehub/lobehub&lt;/code&gt;，仓库描述改为「Chief Agent Operator」。老链接还能访问，但新引用请用改名后的地址。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/lobehub/lobehub&quot;&gt;github.com/lobehub/lobehub&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;FlowiseAI/Flowise&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/FlowiseAI.png?size=128&quot; width=&quot;48&quot; alt=&quot;Flowise&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;FlowiseAI/Flowise&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 55,402 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; ⚠️ 已归档&lt;/p&gt;
&lt;p&gt;拖拽式 Agent / RAG 流程构建器，自带完整前端控制台。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：节点式画布编排 Agent 流程、内置 RAG 与工具节点、把流程发布成 API 或嵌入组件。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：快速搭 AI 应用原型、做 PoC 演示。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：fork 24,970，节点画布的交互实现可以参考；TypeScript 全栈。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：&lt;b&gt;接口返回 archived = true&lt;/b&gt;，仓库已进入归档状态，不再接受新 issue 和 PR。可以 fork 出来自己维护，别指望上游修 bug。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/FlowiseAI/Flowise&quot;&gt;github.com/FlowiseAI/Flowise&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;danny-avila/LibreChat&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/danny-avila.png?size=128&quot; width=&quot;48&quot; alt=&quot;LibreChat&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;danny-avila/LibreChat&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 42,740 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2023-02-12&lt;/p&gt;
&lt;p&gt;功能铺得最全的开源 ChatGPT 替代品之一。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：多模型与多供应商切换、Agents、MCP、Artifacts、代码解释器、文件上传与 RAG、多用户鉴权、预设（Presets）。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：团队共享的 AI 聊天服务、需要多用户与权限管理的自托管场景。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：仓库描述里把支持面列得很细（DeepSeek / Anthropic / Azure / Vertex / OpenRouter 等），覆盖面在这一节里最广；Docker 一键起。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：open issue 725，功能多也意味着配置面大。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/danny-avila/LibreChat&quot;&gt;github.com/danny-avila/LibreChat&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;mckaywrigley/chatbot-ui&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/mckaywrigley.png?size=128&quot; width=&quot;48&quot; alt=&quot;chatbot-ui&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;mckaywrigley/chatbot-ui&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 33,341 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2023-03-11&lt;/p&gt;
&lt;p&gt;小而完整的 AI 聊天 UI，适合当学习模板。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：Next.js 实现的聊天界面，消息流、模型切换、对话管理、Markdown 渲染。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：学习 AI 前端交互结构、作为自研聊天应用的起点。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：代码量比上面几个平台小一个数量级，能把流式输出的完整链路读完。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：功能面窄，插件、Agent、RAG 这些没有。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/mckaywrigley/chatbot-ui&quot;&gt;github.com/mckaywrigley/chatbot-ui&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;wandb/openui&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/wandb.png?size=128&quot; width=&quot;48&quot; alt=&quot;openui&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;wandb/openui&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 22,533 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2024-03-17&lt;/p&gt;
&lt;p&gt;用一句话描述界面，实时渲染出可编辑的原型。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：自然语言生成 UI 并实时预览；输出 HTML / React（Tailwind）代码；支持接本地 Ollama，也接云端模型。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：需求评审前快速出视觉稿、验证布局想法、给非技术同事演示。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：本地可跑，数据不出内网；生成结果能直接导出成代码接着改。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：生成结果需要人工返工，别当最终产物。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/wandb/openui&quot;&gt;github.com/wandb/openui&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;thesysdev/openui&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/thesysdev.png?size=128&quot; width=&quot;48&quot; alt=&quot;openui&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;thesysdev/openui&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 8,513 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T2&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2024-12-02&lt;/p&gt;
&lt;p&gt;注意和上面那个 openui 不是同一个东西：这个是「生成式 UI 的协议标准」。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：定义一套面向流式传输的紧凑 DSL，配套渲染框架，让服务端直接返回 UI 描述而非 Markdown 文本。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：Agent 产品里让模型直接输出可交互界面，而不是只输出文字。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：押的是「Prompt 即 App」这条路线，思路比工具本身更有参考价值。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：open issue 147，仓库描述里挂着 looking-for-contributors，标准仍在演进。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/thesysdev/openui&quot;&gt;github.com/thesysdev/openui&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

---

## 六、设计系统与组件库

分三块看：国际通用底座、中文生态、图标资源。

### 6.1 国际通用底座

|                                                                       | 项目                       | 定位                          | 分级 | Star    |
| --------------------------------------------------------------------- | -------------------------- | ----------------------------- | ---- | ------- |
| &lt;img src=&quot;https://github.com/shadcn-ui.png?size=128&quot; width=&quot;24&quot; /&gt;    | `shadcn-ui/ui`             | 复制粘贴式组件底座            | `T0` | 122,828 |
| &lt;img src=&quot;https://github.com/tailwindlabs.png?size=128&quot; width=&quot;24&quot; /&gt; | `tailwindlabs/tailwindcss` | 原子化 CSS 框架               | `T0` | 97,435  |
| &lt;img src=&quot;https://github.com/saadeghi.png?size=128&quot; width=&quot;24&quot; /&gt;     | `saadeghi/daisyui`         | Tailwind 组件库 + 主题系统    | `T1` | 42,272  |
| &lt;img src=&quot;https://github.com/chakra-ui.png?size=128&quot; width=&quot;24&quot; /&gt;    | `chakra-ui/chakra-ui`      | 以设计 token 为核心的组件系统 | `T1` | 40,615  |
| &lt;img src=&quot;https://github.com/mantinedev.png?size=128&quot; width=&quot;24&quot; /&gt;   | `mantinedev/mantine`       | 全功能 React 组件库 + Hooks   | `T1` | 31,657  |
| &lt;img src=&quot;https://github.com/tailwindlabs.png?size=128&quot; width=&quot;24&quot; /&gt; | `tailwindlabs/headlessui`  | 无样式可访问组件（React/Vue） | `T1` | 28,732  |
| &lt;img src=&quot;https://github.com/TanStack.png?size=128&quot; width=&quot;24&quot; /&gt;     | `TanStack/table`           | 无头表格 / 数据网格           | `T1` | 28,400  |
| &lt;img src=&quot;https://github.com/radix-ui.png?size=128&quot; width=&quot;24&quot; /&gt;     | `radix-ui/primitives`      | 无样式可访问原语              | `T1` | 19,232  |
| &lt;img src=&quot;https://github.com/unocss.png?size=128&quot; width=&quot;24&quot; /&gt;       | `unocss/unocss`            | 即时按需原子化 CSS 引擎       | `T1` | 18,946  |
| &lt;img src=&quot;https://github.com/mui.png?size=128&quot; width=&quot;24&quot; /&gt;          | `mui/base-ui`              | 无头组件库（MUI 出品）        | `T1` | 10,801  |

### 6.2 中文生态

|                                                                       | 项目                        | 定位                     | 分级 | Star   |
| --------------------------------------------------------------------- | --------------------------- | ------------------------ | ---- | ------ |
| &lt;img src=&quot;https://github.com/ant-design.png?size=128&quot; width=&quot;24&quot; /&gt;   | `ant-design/ant-design`     | 企业级 React UI 库       | `T0` | 99,363 |
| &lt;img src=&quot;https://github.com/element-plus.png?size=128&quot; width=&quot;24&quot; /&gt; | `element-plus/element-plus` | Vue 3 UI 库              | `T1` | 27,729 |
| &lt;img src=&quot;https://github.com/youzan.png?size=128&quot; width=&quot;24&quot; /&gt;       | `youzan/vant`               | 移动端 Vue UI 库         | `T1` | 24,383 |
| &lt;img src=&quot;https://github.com/tusen-ai.png?size=128&quot; width=&quot;24&quot; /&gt;     | `tusen-ai/naive-ui`         | Vue 3 组件库，主题可定制 | `T1` | 18,525 |

### 6.3 图标资源

|                                                                       | 项目                  | 定位                   | 分级 | Star   |
| --------------------------------------------------------------------- | --------------------- | ---------------------- | ---- | ------ |
| &lt;img src=&quot;https://github.com/lucide-icons.png?size=128&quot; width=&quot;24&quot; /&gt; | `lucide-icons/lucide` | 开源图标集，覆盖多框架 | `T1` | 24,300 |

### 卡片

::github{repo=&quot;shadcn-ui/ui&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/shadcn-ui.png?size=128&quot; width=&quot;48&quot; alt=&quot;ui&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;shadcn-ui/ui&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 122,828 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T0&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2023-01-04&lt;/p&gt;
&lt;p&gt;不发布的组件库：代码拷进你的仓库，从此归你所有。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：一套基于 Radix + Tailwind 的组件源码分发平台，CLI 按需添加；覆盖 React / Vue / Svelte 等多个框架目标。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：任何需要自建设计系统的 React 项目；做特化 UI 的起点。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：绕开了「组件库版本升级打破自定义样式」这个老问题 —— 你改的是自己的代码；生态里大量衍生库（magicui、tremor 等）都建立在它之上。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：本轮修正 —— 正确的地址是 &lt;code&gt;shadcn-ui/ui&lt;/code&gt;，老的 &lt;code&gt;shadcn-ui/shadcn-ui&lt;/code&gt; 已失效。open issue 2,045，规模大，issue 多属正常。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/shadcn-ui/ui&quot;&gt;github.com/shadcn-ui/ui&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;tailwindlabs/tailwindcss&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/tailwindlabs.png?size=128&quot; width=&quot;48&quot; alt=&quot;tailwindcss&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;tailwindlabs/tailwindcss&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 97,435 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T0&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2017-10-06&lt;/p&gt;
&lt;p&gt;原子化 CSS，现在做 UI 定制绕不开的基础设施。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：utility class 体系、响应式前缀、状态变体、任意值语法、插件扩展；v4 起配置更多走 CSS 变量。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：几乎所有新项目；尤其适合需要精细控制、不接受组件库默认样式的场景。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：整个 shadcn 生态、daisyUI 生态都建立在它之上，学一次到处能用；open issue 只有 62，维护很紧。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：HTML 里 class 会变长，团队需要约定组织方式，否则模板很快失控。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/tailwindlabs/tailwindcss&quot;&gt;github.com/tailwindlabs/tailwindcss&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;ant-design/ant-design&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/ant-design.png?size=128&quot; width=&quot;48&quot; alt=&quot;ant-design&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;ant-design/ant-design&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 99,363 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T0&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2015-04-24&lt;/p&gt;
&lt;p&gt;中文生态里最完整的企业级 React 组件库。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：100+ 组件，覆盖表单、表格、树、上传、日期等中后台全套；设计语言 + 主题定制（design token）；国际化。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：企业内部系统、管理后台、B 端产品。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：fork 54,709 —— 中文项目里被复制改造最多的仓库之一；中后台场景几乎不需要自己造组件。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：默认视觉偏「企业风」，做消费者产品或特化 UI 时 override 成本较高。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/ant-design/ant-design&quot;&gt;github.com/ant-design/ant-design&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;saadeghi/daisyui&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/saadeghi.png?size=128&quot; width=&quot;48&quot; alt=&quot;daisyui&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;saadeghi/daisyui&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 42,272 &amp;nbsp;·&amp;nbsp; &lt;code&gt;JavaScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2020-11-28&lt;/p&gt;
&lt;p&gt;Tailwind 之上的组件层，靠主题变量整套换风格。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：语义化 class（btn、card、modal）、数十套内置主题、组件级样式定制。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：想用 Tailwind 又不想手写一堆 utility 的项目、需要快速切换主题的产品。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：自带主题系统，改几个 CSS 变量就能整站换皮；不限于 React，任何用 Tailwind 的栈都能使。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：open issue 只有 42，维护状态好；代价是样式定制深度不如直接写 Tailwind。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/saadeghi/daisyui&quot;&gt;github.com/saadeghi/daisyui&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;chakra-ui/chakra-ui&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/chakra-ui.png?size=128&quot; width=&quot;48&quot; alt=&quot;chakra-ui&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;chakra-ui/chakra-ui&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 40,615 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2019-08-17&lt;/p&gt;
&lt;p&gt;以设计 token 为骨架的组件系统，定制体验顺滑。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：组件 + 样式 props + 主题 token 体系，深色模式与响应式开箱可用；底层已改用 Ark UI 原语。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：SaaS 产品、需要把品牌规范落到 token 上的团队。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：样式写在 props 里（&lt;code&gt;&amp;lt;Box p={4} bg=&quot;blue.500&quot;&amp;gt;&lt;/code&gt;），改一处 token 全站生效。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：open issue 只有 14，但样式 props 的运行时开销比 utility class 高，超大列表场景要留意。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/chakra-ui/chakra-ui&quot;&gt;github.com/chakra-ui/chakra-ui&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;mantinedev/mantine&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/mantinedev.png?size=128&quot; width=&quot;48&quot; alt=&quot;mantine&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;mantinedev/mantine&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 31,657 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2021-01-07&lt;/p&gt;
&lt;p&gt;组件数量与 Hooks 数量都管够的 React 库。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：100+ 组件 + 一整套 Hooks（useDisclosure、useForm、useLocalStorage 等）；内置深浅色主题、通知系统、富文本与日期处理。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：想少装第三方依赖的 React 项目、后台与前台通吃的中型产品。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：Hooks 层是它的差异化 —— 很多原本要引独立库的能力这里直接给了；open issue 只有 51。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：绑定 React，其他框架用不了。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/mantinedev/mantine&quot;&gt;github.com/mantinedev/mantine&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;tailwindlabs/headlessui&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/tailwindlabs.png?size=128&quot; width=&quot;48&quot; alt=&quot;headlessui&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;tailwindlabs/headlessui&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 28,732 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2020-09-16&lt;/p&gt;
&lt;p&gt;只给交互逻辑和可访问性，样式全交给你。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：Dialog、Menu、Listbox、Combobox、Tabs、Disclosure 等无样式组件；React 与 Vue 双版本。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：用 Tailwind 且需要完全控制外观的项目。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：Tailwind 官方维护，和 utility class 的配合是天生的；焦点管理、ARIA 属性、键盘导航都处理好了。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：组件覆盖面比 Radix 窄，复杂组件（如 Data Grid）没有。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/tailwindlabs/headlessui&quot;&gt;github.com/tailwindlabs/headlessui&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;TanStack/table&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/TanStack.png?size=128&quot; width=&quot;48&quot; alt=&quot;table&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;TanStack/table&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 28,400 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2016-10-20&lt;/p&gt;
&lt;p&gt;表格逻辑与 UI 彻底分离，复杂表格的通用底座。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：排序、筛选、分组、分页、列宽调整、行选择、虚拟滚动适配；React / Vue / Solid / Svelte 多框架适配层。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：数据密集型后台、报表系统、任何「表格不止展示」的场景。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：无头设计意味着表格长什么样完全由你定，配 shadcn 的 Table 组件是常见组合。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：本轮修正大小写 —— owner 的正式写法是 &lt;code&gt;TanStack&lt;/code&gt;，不是 &lt;code&gt;tanstack&lt;/code&gt;（GitHub 会容错，但引用时写对更好）。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/TanStack/table&quot;&gt;github.com/TanStack/table&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;radix-ui/primitives&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/radix-ui.png?size=128&quot; width=&quot;48&quot; alt=&quot;primitives&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;radix-ui/primitives&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 19,232 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2020-06-19&lt;/p&gt;
&lt;p&gt;无样式、可访问性达标的 React 原语，shadcn 的底层依赖。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：Dialog、Dropdown、Popover、Tooltip、Select、Slider、Tabs 等 30+ 原语，键盘导航与 ARIA 完整。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：自建设计系统、对可访问性有硬要求的政企项目。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：可访问性这一块是它最值钱的部分，自己实现一遍的代价远高于引它。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：仓库描述写明现在由 WorkOS 维护（&quot;Maintained by @workos&quot;），治理方有变化。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/radix-ui/primitives&quot;&gt;github.com/radix-ui/primitives&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;unocss/unocss&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/unocss.png?size=128&quot; width=&quot;48&quot; alt=&quot;unocss&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;unocss/unocss&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 18,946 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2021-09-30&lt;/p&gt;
&lt;p&gt;按需生成、零预扫描的原子化 CSS 引擎。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：presets 体系（可拼装 Tailwind / Windi 兼容规则）、自定义规则、图标 preset、属性化模式（attributify）。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：对构建速度敏感的大项目、需要自定义原子规则的设计系统。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：引擎化设计，规则可插拔，比固定语法的方案灵活；Vite 集成成熟。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：生态与第三方组件预设比 Tailwind 少，团队要有能力自己维护 preset。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/unocss/unocss&quot;&gt;github.com/unocss/unocss&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;mui/base-ui&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/mui.png?size=128&quot; width=&quot;48&quot; alt=&quot;base-ui&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;mui/base-ui&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 10,801 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2024-02-23&lt;/p&gt;
&lt;p&gt;MUI 团队做的无头组件库，Radix 之外的另一个选项。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：无样式组件 + 完整可访问性，覆盖弹层、选择、表单等交互原语。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：想摆脱 Material 视觉、又要 MUI 团队维护质量的项目。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：仓库描述写明由 Radix、Floating UI、Material UI 的同一批作者打造，浮层定位这块继承 Floating UI 的能力。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：建仓 2024 年，open issue 426，比 Radix 年轻，API 仍在调整。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/mui/base-ui&quot;&gt;github.com/mui/base-ui&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;element-plus/element-plus&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/element-plus.png?size=128&quot; width=&quot;48&quot; alt=&quot;element-plus&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;element-plus/element-plus&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 27,729 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2020-07-21&lt;/p&gt;
&lt;p&gt;Vue 3 生态里最常用的企业级组件库。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：表格、表单、树、上传、日期时间等后台全套组件；TypeScript 重写，支持按需引入与主题定制。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：Vue 技术栈的中后台系统。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：fork 19,837，中文文档和社区问答最全，遇到问题基本搜得到。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：open issue 1,189，视觉风格同样偏企业化。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/element-plus/element-plus&quot;&gt;github.com/element-plus/element-plus&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;youzan/vant&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/youzan.png?size=128&quot; width=&quot;48&quot; alt=&quot;vant&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;youzan/vant&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 24,383 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2017-04-19&lt;/p&gt;
&lt;p&gt;轻量移动端 Vue 组件库。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：60+ 移动组件（下拉刷新、省市区选择、图片预览、步进器、SKU 选择等）；支持深色模式与主题定制。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：H5 活动页、移动端商城、小程序同构方案。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：fork 9,386，移动场景的组件粒度拿捏得准（比如 SKU 选择这种电商专属组件）。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：面向移动端，桌面端后台不合适。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/youzan/vant&quot;&gt;github.com/youzan/vant&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;tusen-ai/naive-ui&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/tusen-ai.png?size=128&quot; width=&quot;48&quot; alt=&quot;naive-ui&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;tusen-ai/naive-ui&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 18,525 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2021-06-04&lt;/p&gt;
&lt;p&gt;Vue 3 组件库里主题定制最自由的一个。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：90+ 组件，全量 TypeScript；主题通过 &lt;code&gt;n-config-provider&lt;/code&gt; 的 theme overrides 逐 token 覆盖。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：需要贴合自家品牌色的 Vue 3 项目。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：没有用 CSS 预处理器，主题系统是运行时的，换主题不用重新构建。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：open issue 700，组件数量略少于 Element Plus。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/tusen-ai/naive-ui&quot;&gt;github.com/tusen-ai/naive-ui&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;lucide-icons/lucide&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/lucide-icons.png?size=128&quot; width=&quot;48&quot; alt=&quot;lucide&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;lucide-icons/lucide&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 24,300 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2020-06-08&lt;/p&gt;
&lt;p&gt;Feather Icons 的社区续作，统一线宽的图标集。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：1000+ 图标，提供 React / Vue / Svelte / Angular 等框架包，也可作为纯 SVG 或图标字体使用。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：任何需要图标的项目，尤其是和 shadcn / Tailwind 搭配时。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：所有图标共用 24×24 网格与统一描边宽度，混排不会视觉打架；tree-shaking 友好。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：风格统一也意味着个性化弱，品牌图标得另做。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/lucide-icons/lucide&quot;&gt;github.com/lucide-icons/lucide&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

---

## 七、状态管理与表单

上一版文档缺了这块，但对日常开发的影响比多数 UI 库都直接。

### 速览

|                                                                          | 项目                              | 定位                 | 分级 | Star   |
| ------------------------------------------------------------------------ | --------------------------------- | -------------------- | ---- | ------ |
| &lt;img src=&quot;https://github.com/pmndrs.png?size=128&quot; width=&quot;24&quot; /&gt;          | `pmndrs/zustand`                  | React 轻量状态管理   | `T1` | 58,637 |
| &lt;img src=&quot;https://github.com/TanStack.png?size=128&quot; width=&quot;24&quot; /&gt;        | `TanStack/query`                  | 服务端状态与数据获取 | `T1` | 50,252 |
| &lt;img src=&quot;https://github.com/react-hook-form.png?size=128&quot; width=&quot;24&quot; /&gt; | `react-hook-form/react-hook-form` | 表单状态与校验       | `T1` | 44,845 |

### 卡片

::github{repo=&quot;pmndrs/zustand&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/pmndrs.png?size=128&quot; width=&quot;48&quot; alt=&quot;zustand&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;pmndrs/zustand&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 58,637 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2019-04-09&lt;/p&gt;
&lt;p&gt;一个 Hook 就是一个 store，不需要 Provider 包裹。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：create 建 store、selector 精确订阅、中间件（persist / devtools / immer）、可脱离 React 在组件外读写。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：中小型 React 应用的全局状态、跨组件共享的 UI 状态。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：样板代码量比 Redux Toolkit 少一个量级；open issue 只有 5，稳定度很高。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：没有强制的状态更新规范，大团队需要自己立规矩，否则 store 容易变成杂物间。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/pmndrs/zustand&quot;&gt;github.com/pmndrs/zustand&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;TanStack/query&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/TanStack.png?size=128&quot; width=&quot;48&quot; alt=&quot;query&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;TanStack/query&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 50,252 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2019-09-10&lt;/p&gt;
&lt;p&gt;把「服务端数据」当成一个独立问题来解决。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：请求缓存与失效、stale-while-revalidate、自动重试、分页 / 无限滚动、乐观更新、请求去重；React / Vue / Solid / Svelte 适配层。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：任何有接口调用的应用，尤其是列表 + 详情 + 编辑这类典型后台。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：用了之后大部分「请求状态」相关的 useState / useEffect 都可以删掉；缓存失效策略设计得比手写方案完整。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：心智模型需要转换（缓存 key 的设计是核心），团队上手有学习成本。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/TanStack/query&quot;&gt;github.com/TanStack/query&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;react-hook-form/react-hook-form&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/react-hook-form.png?size=128&quot; width=&quot;48&quot; alt=&quot;react-hook-form&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;react-hook-form/react-hook-form&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 44,845 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2019-03-05&lt;/p&gt;
&lt;p&gt;非受控方案的表单库，靠减少重渲染换性能。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：字段注册、校验（内置 + zod / yup resolver）、错误状态、数组字段、表单监听；Web 与 React Native 通用。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：字段多的复杂表单、对输入流畅度有要求的场景。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：字段输入不触发整表重渲染，这是它和受控表单方案的根本差异；open issue 只有 6，非常稳定。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：非受控模型意味着拿值要靠 watch / getValues，习惯了受控写法的同学需要适应。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/react-hook-form/react-hook-form&quot;&gt;github.com/react-hook-form/react-hook-form&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

---

## 八、工程化工具链

### 速览

|                                                                      | 项目                    | 定位                           | 分级 | Star   |
| -------------------------------------------------------------------- | ----------------------- | ------------------------------ | ---- | ------ |
| &lt;img src=&quot;https://github.com/microsoft.png?size=128&quot; width=&quot;24&quot; /&gt;   | `microsoft/playwright`  | 跨浏览器 E2E 测试与自动化      | `T0` | 95,542 |
| &lt;img src=&quot;https://github.com/storybookjs.png?size=128&quot; width=&quot;24&quot; /&gt; | `storybookjs/storybook` | 组件开发工作台                 | `T0` | 90,985 |
| &lt;img src=&quot;https://github.com/vitejs.png?size=128&quot; width=&quot;24&quot; /&gt;      | `vitejs/vite`           | 构建工具与开发服务器           | `T0` | 82,658 |
| &lt;img src=&quot;https://github.com/evanw.png?size=128&quot; width=&quot;24&quot; /&gt;       | `evanw/esbuild`         | Go 写的极速打包器              | `T1` | 40,033 |
| &lt;img src=&quot;https://github.com/swc-project.png?size=128&quot; width=&quot;24&quot; /&gt; | `swc-project/swc`       | Rust 转译器 / 压缩器           | `T1` | 34,189 |
| &lt;img src=&quot;https://github.com/vercel.png?size=128&quot; width=&quot;24&quot; /&gt;      | `vercel/turborepo`      | 前端 monorepo 构建编排         | `T1` | 31,044 |
| &lt;img src=&quot;https://github.com/biomejs.png?size=128&quot; width=&quot;24&quot; /&gt;     | `biomejs/biome`         | Rust 写的 lint + format 工具链 | `T1` | 25,701 |
| &lt;img src=&quot;https://github.com/oxc-project.png?size=128&quot; width=&quot;24&quot; /&gt; | `oxc-project/oxc`       | Rust JS/TS 工具链合集          | `T1` | 22,611 |
| &lt;img src=&quot;https://github.com/vitest-dev.png?size=128&quot; width=&quot;24&quot; /&gt;  | `vitest-dev/vitest`     | Vite 原生测试框架              | `T1` | 17,040 |

### 卡片

::github{repo=&quot;microsoft/playwright&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/microsoft.png?size=128&quot; width=&quot;48&quot; alt=&quot;playwright&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;microsoft/playwright&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 95,542 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T0&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2019-11-15&lt;/p&gt;
&lt;p&gt;一套 API 跑 Chromium / Firefox / WebKit，E2E 和 UI 回归都靠它。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：多浏览器自动化、自动等待元素、网络拦截与 mock、trace 回放、视觉对比截图、并行执行、组件测试。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：E2E 测试、UI 回归、截图比对、需要登录态的复杂流程验证。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：自动等待把「flaky 测试」这个老大难问题解决了大半；trace viewer 能回放失败用例的每一步，排查效率比看日志高得多。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：首次安装要下载浏览器二进制，国内网络需要配镜像源。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/microsoft/playwright&quot;&gt;github.com/microsoft/playwright&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;storybookjs/storybook&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/storybookjs.png?size=128&quot; width=&quot;48&quot; alt=&quot;storybook&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;storybookjs/storybook&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 90,985 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T0&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2016-03-18&lt;/p&gt;
&lt;p&gt;把组件从应用里拎出来单独开发、文档化和测试。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：stories 隔离开发、addon 生态（a11y、controls、docs、viewport）、交互测试、视觉测试集成；覆盖 React / Vue / Svelte / Angular / Web Components。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：组件库建设、设计系统落地、需要与设计师对齐组件状态的团队。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：多框架支持是它的护城河 —— 技术栈混杂的大厂尤其需要；Vite 构建支持已经就位。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：open issue 1,792，配置复杂，小项目可能不划算。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/storybookjs/storybook&quot;&gt;github.com/storybookjs/storybook&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;vitejs/vite&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/vitejs.png?size=128&quot; width=&quot;48&quot; alt=&quot;vite&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;vitejs/vite&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 82,658 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T0&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2020-04-21&lt;/p&gt;
&lt;p&gt;新项目的默认构建方案，冷启动和 HMR 是它的立身之本。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：基于原生 ESM 的开发服务器、毫秒级 HMR、Rollup 兼容的生产构建、插件体系（兼容 Rollup 插件）。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：几乎所有前端新项目；也是 Vitest、Storybook、UnoCSS 等工具的公共底座。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：生态位已经稳了 —— 周边工具基本都以「支持 Vite」为前提设计，这个网络效应是它最强的部分。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：open issue 765；超大 monorepo 里开发服务器的首次依赖预构建仍可能变慢。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/vitejs/vite&quot;&gt;github.com/vitejs/vite&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;evanw/esbuild&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/evanw.png?size=128&quot; width=&quot;48&quot; alt=&quot;esbuild&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;evanw/esbuild&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 40,033 &amp;nbsp;·&amp;nbsp; &lt;code&gt;Go&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2016-06-14&lt;/p&gt;
&lt;p&gt;Go 写的打包器，快到改变了整个工具链的预期。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：JS / TS / JSX 打包与转译、CSS 打包、压缩、tree-shaking、sourcemap；可作库调用也可 CLI 使用。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：自己写构建脚本、库打包、需要极致构建速度的场景。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：Vite 开发期就靠它做依赖预构建和转译；单进程 Go 的并发设计让它的速度比 JS 实现的 bundler 高一个数量级。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：插件 API 不如 Rollup / Webpack 灵活，复杂构建流程一般还是交给上层框架。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/evanw/esbuild&quot;&gt;github.com/evanw/esbuild&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;swc-project/swc&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/swc-project.png?size=128&quot; width=&quot;48&quot; alt=&quot;swc&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;swc-project/swc&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 34,189 &amp;nbsp;·&amp;nbsp; &lt;code&gt;Rust&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2017-12-22&lt;/p&gt;
&lt;p&gt;Rust 实现的转译与压缩平台，Babel 的高性能替代。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：TS / JSX 转译、语法降级（按 targets 输出）、压缩、模块打包实验支持、插件系统。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：需要替换 Babel 提速的存量项目、框架底层（Next.js 等）。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：多数时候你不用直接引它 —— 它通过 Next.js、Parcel 等框架间接服务你；真需要自己接时，配置模型比 Babel 简单。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：插件生态（尤其自定义 Babel 插件）需要重写成 Rust 或走 wasm，迁移不是无痛的。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/swc-project/swc&quot;&gt;github.com/swc-project/swc&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;vercel/turborepo&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/vercel.png?size=128&quot; width=&quot;48&quot; alt=&quot;turborepo&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;vercel/turborepo&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 31,044 &amp;nbsp;·&amp;nbsp; &lt;code&gt;Rust&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2021-10-05&lt;/p&gt;
&lt;p&gt;monorepo 的任务编排器，靠增量缓存省 CI 时间。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：任务依赖图编排、本地与远程缓存、按包过滤执行、并行调度。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：多包仓库（组件库 + 应用 + 文档站）、CI 构建耗时过长的团队。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：接入成本比 Nx / Lerna 低，主要就是一份 turbo.json；open issue 只有 15，维护状态很稳。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：远程缓存的免费额度有限制，团队规模上去后要算成本。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/vercel/turborepo&quot;&gt;github.com/vercel/turborepo&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;biomejs/biome&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/biomejs.png?size=128&quot; width=&quot;48&quot; alt=&quot;biome&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;biomejs/biome&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 25,701 &amp;nbsp;·&amp;nbsp; &lt;code&gt;Rust&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2023-07-27&lt;/p&gt;
&lt;p&gt;一个二进制替代 ESLint + Prettier，零配置起步。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：格式化（JS / TS / JSX / JSON / CSS）、lint 规则、import 排序，同时提供 LSP。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：新项目直接上；受够了 ESLint 配置套娃和 Prettier 冲突的老项目。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：Rust 实现，全量 lint 通常在毫秒级完成；单一配置文件，不用在多个插件版本之间调停。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：自定义规则生态远不如 ESLint，依赖大量社区插件的项目迁移会受阻。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/biomejs/biome&quot;&gt;github.com/biomejs/biome&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;oxc-project/oxc&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/oxc-project.png?size=128&quot; width=&quot;48&quot; alt=&quot;oxc&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;oxc-project/oxc&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 22,611 &amp;nbsp;·&amp;nbsp; &lt;code&gt;Rust&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2023-02-09&lt;/p&gt;
&lt;p&gt;JS / TS 工具链的 Rust 零件箱，被上层工具大量集成。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：Parser、linter（oxlint）、transformer、minifier、formatter 等组件，可单独取用。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：工具链开发者；普通项目通常通过 oxlint 或框架间接使用。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：性能目标明确，oxlint 在多数仓库上能在 1 秒内跑完，常被用作 CI 的快速前置检查。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：仍在快速演进（open issue 823），直接依赖底层 API 有 breaking change 风险。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/oxc-project/oxc&quot;&gt;github.com/oxc-project/oxc&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;vitest-dev/vitest&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/vitest-dev.png?size=128&quot; width=&quot;48&quot; alt=&quot;vitest&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;vitest-dev/vitest&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 17,040 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2021-12-03&lt;/p&gt;
&lt;p&gt;和 Vite 共用同一套配置与转换管道的测试框架。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：单元测试、组件测试、快照、覆盖率、并发执行、浏览器模式、类型测试；兼容 Jest 的多数 API。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：Vite 项目的首选单测方案。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：复用 Vite 的 config 和插件，意味着你为构建写的 alias、环境变量、TSX 转换在测试里直接生效，不用再配一遍 Jest 的 transform。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：open issue 376；从 Jest 迁移大体平顺，但部分高级 mock 行为有差异。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/vitest-dev/vitest&quot;&gt;github.com/vitest-dev/vitest&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

---

## 九、数据可视化

按可控程度排：d3 最自由也最难，G2 / visx 是原语层，ECharts / Chart.js / Recharts 是成品图表，Tremor 是仪表盘组件。

### 速览

|                                                                     | 项目                       | 定位                    | 分级 | Star    |
| ------------------------------------------------------------------- | -------------------------- | ----------------------- | ---- | ------- |
| &lt;img src=&quot;https://github.com/d3.png?size=128&quot; width=&quot;24&quot; /&gt;         | `d3/d3`                    | 可视化底层原语          | `T0` | 113,601 |
| &lt;img src=&quot;https://github.com/chartjs.png?size=128&quot; width=&quot;24&quot; /&gt;    | `chartjs/Chart.js`         | Canvas 图表，上手快     | `T1` | 67,676  |
| &lt;img src=&quot;https://github.com/apache.png?size=128&quot; width=&quot;24&quot; /&gt;     | `apache/echarts`           | 国产全能图表库          | `T1` | 67,222  |
| &lt;img src=&quot;https://github.com/recharts.png?size=128&quot; width=&quot;24&quot; /&gt;   | `recharts/recharts`        | React 声明式图表        | `T1` | 27,536  |
| &lt;img src=&quot;https://github.com/airbnb.png?size=128&quot; width=&quot;24&quot; /&gt;     | `airbnb/visx`              | React 可视化原语集      | `T1` | 21,034  |
| &lt;img src=&quot;https://github.com/apexcharts.png?size=128&quot; width=&quot;24&quot; /&gt; | `apexcharts/apexcharts.js` | 交互式 SVG 图表         | `T1` | 15,144  |
| &lt;img src=&quot;https://github.com/plouc.png?size=128&quot; width=&quot;24&quot; /&gt;      | `plouc/nivo`               | React 图表模板库        | `T1` | 14,091  |
| &lt;img src=&quot;https://github.com/antvis.png?size=128&quot; width=&quot;24&quot; /&gt;     | `antvis/G2`                | 可视化语法（AntV 底层） | `T1` | 12,601  |
| &lt;img src=&quot;https://github.com/tremorlabs.png?size=128&quot; width=&quot;24&quot; /&gt; | `tremorlabs/tremor`        | 仪表盘 React 组件       | `T2` | 3,596   |

### 卡片

::github{repo=&quot;d3/d3&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/d3.png?size=128&quot; width=&quot;48&quot; alt=&quot;d3&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;d3/d3&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 113,601 &amp;nbsp;·&amp;nbsp; &lt;code&gt;T0&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2010-09-27&lt;/p&gt;
&lt;p&gt;不是图表库，是一套操作数据与 SVG / Canvas 的原语。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：比例尺、坐标轴、布局算法（力导向、树图、打包图）、路径生成器、数据连接（data join）、过渡、拖拽缩放。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：设计稿里那个「不太标准」的图、需要完全自定义交互的可视化。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：上限最高 —— 市面上多数图表库只能画它能力的子集；fork 22,668，社区案例覆盖了二十年积累。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：学习成本也是最高的。能用 ECharts 解决就别上 d3，这是省时间的建议。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/d3/d3&quot;&gt;github.com/d3/d3&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;chartjs/Chart.js&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/chartjs.png?size=128&quot; width=&quot;48&quot; alt=&quot;Chart.js&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;chartjs/Chart.js&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 67,676 &amp;nbsp;·&amp;nbsp; &lt;code&gt;JavaScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2013-03-17&lt;/p&gt;
&lt;p&gt;Canvas 渲染，配置项少，出图快。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：折线、柱状、饼、雷达、极坐标、气泡、散点等 8 类基础图；响应式、图例、tooltip、动画。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：后台概览页、博客插图、对图表要求不高的常规场景。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：上手成本最低，一个 config 对象就能出图；体积比 ECharts 小。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：Canvas 渲染意味着图表内容无法被搜索引擎和屏幕阅读器读取，导出高质量 SVG 也不方便。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/chartjs/Chart.js&quot;&gt;github.com/chartjs/Chart.js&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;apache/echarts&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/apache.png?size=128&quot; width=&quot;48&quot; alt=&quot;echarts&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;apache/echarts&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 67,222 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2013-04-03&lt;/p&gt;
&lt;p&gt;Apache 顶级项目，中文生态里图表能力最全的一个。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：常规图表 + 地图、关系图、树图、桑基图、3D、GL 大数据量渲染；Canvas / SVG 双渲染器；主题与数据集（dataset）机制。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：数据大屏、BI 系统、需要地图或关系图的业务。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：fork 19,813，中文文档质量高，国内遇到问题基本都能搜到；大数据量下有 progressive 渲染和 WebGL 方案兜底。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：open issue 1,524；全量引入体积大，务必按需引入。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/apache/echarts&quot;&gt;github.com/apache/echarts&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;recharts/recharts&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/recharts.png?size=128&quot; width=&quot;48&quot; alt=&quot;recharts&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;recharts/recharts&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 27,536 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2015-08-07&lt;/p&gt;
&lt;p&gt;用 JSX 组件拼图表，React 项目里最自然的写法。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：LineChart / BarChart / AreaChart 等容器组件 + 子组件（XAxis、Tooltip、Legend）自由组合；底层基于 D3 的子模块。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：React 后台的常规图表、需要和图例/tooltip 深度联动的场景。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：组合式 API 让「改一个轴的样式」这种需求不用翻庞大的 config 文档。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：open issue 446，深度定制会撞到组件封装的天花板。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/recharts/recharts&quot;&gt;github.com/recharts/recharts&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;airbnb/visx&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/airbnb.png?size=128&quot; width=&quot;48&quot; alt=&quot;visx&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;airbnb/visx&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 21,034 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2017-03-15&lt;/p&gt;
&lt;p&gt;D3 的计算能力 + React 的渲染模型，中间的胶水层。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：把 D3 的 scale / shape / axis 等模块拆成 React 组件与 Hooks，你负责组合。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：既想要 D3 的自由度、又不想让 D3 直接操作 DOM 的 React 项目。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：解决了「D3 和 React 争抢 DOM 控制权」这个经典矛盾 —— D3 只算，React 只画。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：是原语不是图表，一个折线图也要自己拼 scale + shape + axis。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/airbnb/visx&quot;&gt;github.com/airbnb/visx&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;apexcharts/apexcharts.js&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/apexcharts.png?size=128&quot; width=&quot;48&quot; alt=&quot;apexcharts.js&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;apexcharts/apexcharts.js&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 15,144 &amp;nbsp;·&amp;nbsp; &lt;code&gt;JavaScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2018-07-24&lt;/p&gt;
&lt;p&gt;默认样式就挺好看的 SVG 交互图表库。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：折线 / 面积 / 柱状 / 雷达 / 烛台等图；缩放平移、数据点标注、动态更新、多轴；提供 React / Vue / Angular 封装。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：金融类图表、需要缩放交互的时序数据、不想调样式的项目。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：SVG 渲染，可直接导出矢量图；交互（brush、zoom）开箱可用。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：数据量上万时 SVG 节点数会成为瓶颈。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/apexcharts/apexcharts.js&quot;&gt;github.com/apexcharts/apexcharts.js&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;plouc/nivo&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/plouc.png?size=128&quot; width=&quot;48&quot; alt=&quot;nivo&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;plouc/nivo&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 14,091 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2016-04-16&lt;/p&gt;
&lt;p&gt;React 图表模板库，配置驱动，出图漂亮。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：20+ 图表类型（含桑基、和弦、热力图、雷达），支持 SVG / Canvas / HTML 渲染，内置动效与主题。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：需要好看的复杂图表、又不想从 D3 写起。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：同构渲染（服务端也能出图）；open issue 只有 50，维护状态好。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：定制深度受限于它的配置项，奇怪的需求实现不了。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/plouc/nivo&quot;&gt;github.com/plouc/nivo&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;antvis/G2&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/antvis.png?size=128&quot; width=&quot;48&quot; alt=&quot;G2&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;antvis/G2&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 12,601 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2016-05-26&lt;/p&gt;
&lt;p&gt;图形语法（Grammar of Graphics）的 AntV 实现。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：以「数据 → 标记 → 编码 → 标度 → 坐标系」的声明式语法描述图表；G2 5.x 支持 Canvas / SVG / WebGL 渲染。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：需要非标准图表、或要在 AntV 生态（G6、L7、S2）内统一技术栈的团队。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：语法化的好处是图表类型不受枚举限制，组合能出官方没预设的图。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：语法学习曲线陡；默认分支是 v5，与 4.x 的 API 不兼容，找资料时注意版本。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/antvis/G2&quot;&gt;github.com/antvis/G2&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;tremorlabs/tremor&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/tremorlabs.png?size=128&quot; width=&quot;48&quot; alt=&quot;tremor&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;tremorlabs/tremor&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 3,596 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T2&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2024-03-26&lt;/p&gt;
&lt;p&gt;为仪表盘和 AI 产品做的复制型 React 组件。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：KPI 卡片、面积图、柱状图、进度条、表格等仪表盘组件，基于 Tailwind + Radix。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：AI 产品的数据面板、内部指标看板。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：组件粒度是「一块看板」而不是「一个图表」，配 Tailwind 直接就能拼出完整页面。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：3.6k star，规模小；建仓 2024 年，API 可能变动。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/tremorlabs/tremor&quot;&gt;github.com/tremorlabs/tremor&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

---

## 十、AI 编码与前端技能包

这一块是上一版新增的，本轮把地址全部重新核了一遍。

### 10.1 Agent 技能包（给 AI 编码助手装前端规范）

|                                                                         | 项目                               | 定位                        | 分级   | Star    |
| ----------------------------------------------------------------------- | ---------------------------------- | --------------------------- | ------ | ------- |
| &lt;img src=&quot;https://github.com/anthropics.png?size=128&quot; width=&quot;24&quot; /&gt;     | `anthropics/skills`                | Anthropic 官方 Agent Skills | `T0`   | 173,277 |
| &lt;img src=&quot;https://github.com/ComposioHQ.png?size=128&quot; width=&quot;24&quot; /&gt;     | `ComposioHQ/awesome-claude-skills` | Skills 精选清单             | `T1`   | 74,323  |
| &lt;img src=&quot;https://github.com/greensock.png?size=128&quot; width=&quot;24&quot; /&gt;      | `greensock/gsap-skills`            | GSAP 官方 AI 技能包         | `T1`   | 14,826  |
| &lt;img src=&quot;https://github.com/TerminalSkills.png?size=128&quot; width=&quot;24&quot; /&gt; | `TerminalSkills/skills`            | 社区技能合集，含 UI 类      | `观察` | 143     |
| &lt;img src=&quot;https://github.com/Sec-Dome.png?size=128&quot; width=&quot;24&quot; /&gt;       | `Sec-Dome/Awesome-Skills`          | 跨平台技能目录              | `观察` | 3       |

#### 卡片

::github{repo=&quot;anthropics/skills&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/anthropics.png?size=128&quot; width=&quot;48&quot; alt=&quot;skills&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;anthropics/skills&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 173,277 &amp;nbsp;·&amp;nbsp; &lt;code&gt;Python&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T0&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2025-09-22&lt;/p&gt;
&lt;p&gt;Agent Skills 这个范式的官方参考实现。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：以 SKILL.md 为单位封装可复用能力，其中 &lt;code&gt;frontend-design&lt;/code&gt;（前端设计规范）和 &lt;code&gt;webapp-testing&lt;/code&gt;（浏览器测试）直接服务前端；支持 Claude Code 等主流 Agent。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：让 AI 生成的代码符合你的设计规范，而不是每次都输出千篇一律的 Bootstrap 风。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：建仓不到一年拿到 17 万 star，是这轮统计里增长最快的仓库；把「团队规范」变成了机器可读的资产。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：open issue 1,204，迭代很快；技能内容需要按自家技术栈裁剪。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/anthropics/skills&quot;&gt;github.com/anthropics/skills&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;ComposioHQ/awesome-claude-skills&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/ComposioHQ.png?size=128&quot; width=&quot;48&quot; alt=&quot;awesome-claude-skills&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;ComposioHQ/awesome-claude-skills&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 74,323 &amp;nbsp;·&amp;nbsp; &lt;code&gt;Python&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2025-10-17&lt;/p&gt;
&lt;p&gt;社区 Skills 的分类索引。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：按文档处理、前端开发、测试等类目聚合社区技能，附来源链接。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：想找现成技能时先来这儿翻，比逐个搜仓库省事。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：topics 里覆盖了 Claude Code / Codex / Gemini CLI / Cursor 等多个宿主，跨平台参考价值高。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：本轮修正大小写 —— owner 正式写法是 &lt;code&gt;ComposioHQ&lt;/code&gt;。清单型仓库，质量需要自己甄别。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/ComposioHQ/awesome-claude-skills&quot;&gt;github.com/ComposioHQ/awesome-claude-skills&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;greensock/gsap-skills&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/greensock.png?size=128&quot; width=&quot;48&quot; alt=&quot;gsap-skills&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;greensock/gsap-skills&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 14,826 &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2026-03-04&lt;/p&gt;
&lt;p&gt;GSAP 官方出的 AI 技能包，让 Agent 会写动画。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：教 AI 编码助手正确使用 GSAP，含最佳实践、常见动画模式、插件用法；覆盖 React / Vue / Svelte / 原生 JS。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：用 AI 写动效代码时，避免它输出过时的 API 或错误的时间线写法。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：官方维护意味着内容与 GSAP 当前版本同步，这一点第三方技能包做不到。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：仓库没有检测到主语言字段（纯文档 / 指令型仓库）。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/greensock/gsap-skills&quot;&gt;github.com/greensock/gsap-skills&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;TerminalSkills/skills&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/TerminalSkills.png?size=128&quot; width=&quot;48&quot; alt=&quot;skills&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;TerminalSkills/skills&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 143 &amp;nbsp;·&amp;nbsp; &lt;code&gt;Shell&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;观察&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2026-02-02&lt;/p&gt;
&lt;p&gt;社区技能合集，里面有 aceternity-ui、shadcn 这类前端专属技能。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：SKILL.md 形式的技能库，面向 Claude Code / Codex / Gemini CLI / Cursor。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：想让 AI 直接产出高质感界面时，装载对应的 UI 技能。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：前端 UI 类技能占比高，这是它区别于泛化清单的地方。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：143 star，社区规模小，技能质量靠自己验。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/TerminalSkills/skills&quot;&gt;github.com/TerminalSkills/skills&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;Sec-Dome/Awesome-Skills&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/Sec-Dome.png?size=128&quot; width=&quot;48&quot; alt=&quot;Awesome-Skills&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;Sec-Dome/Awesome-Skills&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 3 &amp;nbsp;·&amp;nbsp; &lt;code&gt;观察&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2026-01-24&lt;/p&gt;
&lt;p&gt;跨平台的 Agent 技能目录。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：汇总可用于 Claude Code / Gemini CLI / Cursor 等宿主的技能清单。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：和上面几个清单互为补充，多翻一个来源。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：覆盖的宿主种类较多。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：实测只有 3 star，属于个人维护的起步项目，收录完整性有限。上一版文档把它列为主要推荐，本轮下调到观察级。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/Sec-Dome/Awesome-Skills&quot;&gt;github.com/Sec-Dome/Awesome-Skills&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

### 10.2 开源 AI 编码助手

|                                                                      | 项目                     | 定位                    | 分级 | Star    |
| -------------------------------------------------------------------- | ------------------------ | ----------------------- | ---- | ------- |
| &lt;img src=&quot;https://github.com/anomalyco.png?size=128&quot; width=&quot;24&quot; /&gt;   | `anomalyco/opencode`     | 终端 AI 编码 Agent      | `T0` | 203,302 |
| &lt;img src=&quot;https://github.com/anthropics.png?size=128&quot; width=&quot;24&quot; /&gt;  | `anthropics/claude-code` | Anthropic 官方 CLI 代理 | `T0` | 143,826 |
| &lt;img src=&quot;https://github.com/openai.png?size=128&quot; width=&quot;24&quot; /&gt;      | `openai/codex`           | OpenAI 终端编码 Agent   | `T0` | 120,997 |
| &lt;img src=&quot;https://github.com/OpenHands.png?size=128&quot; width=&quot;24&quot; /&gt;   | `OpenHands/OpenHands`    | 开源 AI 软件工程师      | `T0` | 85,999  |
| &lt;img src=&quot;https://github.com/cline.png?size=128&quot; width=&quot;24&quot; /&gt;       | `cline/cline`            | VS Code 内的 AI 助手    | `T1` | 67,373  |
| &lt;img src=&quot;https://github.com/Aider-AI.png?size=128&quot; width=&quot;24&quot; /&gt;    | `Aider-AI/aider`         | 终端结对编程，基于 git  | `T1` | 48,684  |
| &lt;img src=&quot;https://github.com/continuedev.png?size=128&quot; width=&quot;24&quot; /&gt; | `continuedev/continue`   | 可自托管的 AI 编码助手  | `T1` | 35,735  |

#### 卡片

::github{repo=&quot;anomalyco/opencode&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/anomalyco.png?size=128&quot; width=&quot;48&quot; alt=&quot;opencode&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;anomalyco/opencode&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 203,302 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T0&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2025-04-30&lt;/p&gt;
&lt;p&gt;终端里的开源编码 Agent，本轮统计中 star 最高的仓库。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：多模型接入、终端内完成代码读写与命令执行、会话与项目上下文管理、插件与配置扩展。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：不想把代码交给闭源工具、又想要 Agent 能力的开发者。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：20 万 star 说明社区已经形成了插件和配置的生态；TypeScript 实现，前端开发者想改源码门槛低。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：本轮修正地址 —— &lt;code&gt;sst/opencode&lt;/code&gt; 已 301 跳转到 &lt;code&gt;anomalyco/opencode&lt;/code&gt;。另有一个 &lt;code&gt;opencode-ai/opencode&lt;/code&gt;（13,719 star，已归档）是不同项目，别搞混。open issue 5,582，迭代快。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/anomalyco/opencode&quot;&gt;github.com/anomalyco/opencode&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;anthropics/claude-code&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/anthropics.png?size=128&quot; width=&quot;48&quot; alt=&quot;claude-code&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;anthropics/claude-code&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 143,826 &amp;nbsp;·&amp;nbsp; &lt;code&gt;Python&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T0&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2025-02-22&lt;/p&gt;
&lt;p&gt;常驻终端的编码代理，直接用自然语言改代码、跑测试、管 git。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：代码库理解与检索、跨文件编辑、命令执行、git 工作流、可配置 hooks 与子代理。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：日常开发的全流程；尤其是需要跨多个文件的一致性改动。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：官方开源，行为和线上产品一致，不会出现「文档说的和实际的不一样」。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：open issue 14,900，且模型调用需要 API key 或订阅。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/anthropics/claude-code&quot;&gt;github.com/anthropics/claude-code&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;openai/codex&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/openai.png?size=128&quot; width=&quot;48&quot; alt=&quot;codex&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;openai/codex&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 120,997 &amp;nbsp;·&amp;nbsp; &lt;code&gt;Rust&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T0&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2025-04-13&lt;/p&gt;
&lt;p&gt;OpenAI 的终端编码 Agent，Rust 实现。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：终端内执行长任务规划与落地、代码编辑、命令执行、配置化的沙箱与审批策略。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：习惯终端工作流的开发者；需要把审批粒度调细的团队。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：单二进制分发，安装摩擦小；沙箱与审批策略可配置，适合有合规要求的团队。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：open issue 14,962；需要 OpenAI 账号或兼容接口。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/openai/codex&quot;&gt;github.com/openai/codex&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;OpenHands/OpenHands&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/OpenHands.png?size=128&quot; width=&quot;48&quot; alt=&quot;OpenHands&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;OpenHands/OpenHands&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 85,999 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T0&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2024-03-13&lt;/p&gt;
&lt;p&gt;把「AI 软件工程师」做成可自托管的完整平台。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：自主写代码、修 bug、跑测试；多任务并行；带 Web 控制台；另有独立的 agent SDK 与 CLI。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：需要在团队内共享 Agent 能力、要审计和回溯 Agent 操作记录的场景。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：带界面，非开发者同事也能用；软件工程能力（改 bug、跑测试）是它的设计目标，不只是补全。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：本轮修正地址 —— &lt;code&gt;All-Hands-AI/OpenHands&lt;/code&gt; 已 301 跳转到 &lt;code&gt;OpenHands/OpenHands&lt;/code&gt;。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/OpenHands/OpenHands&quot;&gt;github.com/OpenHands/OpenHands&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;cline/cline&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/cline.png?size=128&quot; width=&quot;48&quot; alt=&quot;cline&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;cline/cline&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 67,373 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2024-07-06&lt;/p&gt;
&lt;p&gt;VS Code 插件形态的自主编码 Agent。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：计划 — 执行 — 验证闭环，每步操作在编辑器内可见可撤销；支持作为 SDK、IDE 扩展或 CLI 使用。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：不习惯终端、希望在熟悉编辑器里用 Agent 的开发者。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：每一步改动都以 diff 形式呈现，人工审批成本低；模型可自选，不绑定供应商。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：open issue 1,188；长任务会消耗较多 token，需要留意成本。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/cline/cline&quot;&gt;github.com/cline/cline&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;Aider-AI/aider&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/Aider-AI.png?size=128&quot; width=&quot;48&quot; alt=&quot;aider&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;Aider-AI/aider&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 48,684 &amp;nbsp;·&amp;nbsp; &lt;code&gt;Python&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2023-05-09&lt;/p&gt;
&lt;p&gt;终端结对编程，每次改动自动生成一个 git commit。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：仓库级代码理解、多文件编辑、自动提交、语音输入、与主流模型对接。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：习惯 git 工作流、希望每一步都可回滚的开发者。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：自动提交这个设计很实在 —— AI 改坏了直接回退到上一个 commit 就行，不用另外做备份。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：open issue 1,844；Python 技术栈，前端同学改源码成本略高。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/Aider-AI/aider&quot;&gt;github.com/Aider-AI/aider&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;continuedev/continue&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/continuedev.png?size=128&quot; width=&quot;48&quot; alt=&quot;continue&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;continuedev/continue&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 35,735 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2023-05-24&lt;/p&gt;
&lt;p&gt;可完全自托管的 AI 编码助手，能接本地模型。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：IDE 插件 + CLI + 中心化配置；支持自定义模型、上下文提供者、规则（rules）与工具。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：代码不能出内网的团队、想用本地模型（Ollama / llama.cpp）的场景。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：配置以文件形式管理，可以随仓库一起提交，团队共享一套 Agent 配置。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：open issue 938；接本地模型时效果高度依赖模型能力，需要有心理预期。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/continuedev/continue&quot;&gt;github.com/continuedev/continue&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

### 10.3 前端 AI SDK 与生成式 UI

|                                                                     | 项目                    | 定位                           | 分级 | Star   |
| ------------------------------------------------------------------- | ----------------------- | ------------------------------ | ---- | ------ |
| &lt;img src=&quot;https://github.com/CopilotKit.png?size=128&quot; width=&quot;24&quot; /&gt; | `CopilotKit/CopilotKit` | 给现有 React 应用加 AI 交互    | `T1` | 37,167 |
| &lt;img src=&quot;https://github.com/vercel.png?size=128&quot; width=&quot;24&quot; /&gt;     | `vercel/ai`             | AI SDK，流式生成 UI 的标准方案 | `T1` | 26,553 |
| &lt;img src=&quot;https://github.com/stackblitz.png?size=128&quot; width=&quot;24&quot; /&gt; | `stackblitz/bolt.new`   | 浏览器内全栈 AI 开发           | `T1` | 16,534 |

`wandb/openui` 和 `thesysdev/openui` 已在第五章展开，这里不重复。

#### 卡片

::github{repo=&quot;CopilotKit/CopilotKit&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/CopilotKit.png?size=128&quot; width=&quot;48&quot; alt=&quot;CopilotKit&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;CopilotKit/CopilotKit&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 37,167 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2023-06-19&lt;/p&gt;
&lt;p&gt;给已有 React 应用挂上 AI 交互层，不重写前端。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：侧边聊天组件、内联 AI 自动补全、前端状态可被 Agent 读写、AG-UI 协议；覆盖 React / Angular / Mobile。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：存量产品加 AI 助手、表单自动填充、让 Agent 直接操作应用状态。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：把「应用状态」暴露给 Agent 是它最实用的部分 —— Agent 能读到你当前的表格数据再给建议，而不只是聊天。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：强绑定 React 为主的使用方式；AG-UI 协议仍在演进。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/CopilotKit/CopilotKit&quot;&gt;github.com/CopilotKit/CopilotKit&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;vercel/ai&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/vercel.png?size=128&quot; width=&quot;48&quot; alt=&quot;ai&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;vercel/ai&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 26,553 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2023-05-23&lt;/p&gt;
&lt;p&gt;TypeScript 里做 AI 应用的工具包，流式 UI 是核心。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：统一的多模型接口、流式文本与流式 UI 组件、工具调用（tool calling）、结构化输出；React / Vue / Svelte 适配。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：自建 AI 聊天界面、需要流式渲染的产品。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：换模型只改一行 provider，不用重写业务代码；和 Next.js 的配合最顺。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：open issue 1,546，版本迭代快，升级前看 changelog。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/vercel/ai&quot;&gt;github.com/vercel/ai&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

::github{repo=&quot;stackblitz/bolt.new&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/stackblitz.png?size=128&quot; width=&quot;48&quot; alt=&quot;bolt.new&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;stackblitz/bolt.new&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 16,534 &amp;nbsp;·&amp;nbsp; &lt;code&gt;TypeScript&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T1&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2024-09-24&lt;/p&gt;
&lt;p&gt;在浏览器里对话式生成完整全栈应用并实时预览。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：基于 WebContainers 在浏览器中运行 Node 环境，AI 生成代码后直接在页面内跑起来；支持编辑与部署。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：快速验证一个产品想法、做技术演示。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：浏览器内跑真实 Node 运行时这件事是它的技术壁垒，不是简单的代码编辑器。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：open issue 8,189，fork 14,796，社区里大量二开版本；生成的代码质量参差，需要人工重构。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/stackblitz/bolt.new&quot;&gt;github.com/stackblitz/bolt.new&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

### 10.4 浏览器自动化

::github{repo=&quot;browser-use/browser-use&quot;}

&lt;table&gt;
&lt;tr&gt;
&lt;td width=&quot;60&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;https://github.com/browser-use.png?size=128&quot; width=&quot;48&quot; alt=&quot;browser-use&quot; /&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;p&gt;&lt;strong&gt;browser-use/browser-use&lt;/strong&gt; &amp;nbsp;·&amp;nbsp; ★ 112,090 &amp;nbsp;·&amp;nbsp; &lt;code&gt;Python&lt;/code&gt; &amp;nbsp;·&amp;nbsp; &lt;code&gt;T0&lt;/code&gt; &amp;nbsp;·&amp;nbsp; 建仓 2024-10-31&lt;/p&gt;
&lt;p&gt;让 AI 用真实浏览器完成任务，底层是 Playwright。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b&gt;功能&lt;/b&gt;：把网页结构抽取成 LLM 可理解的形式、Agent 驱动浏览器点击与填表、任务编排、截图与过程记录。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;场景&lt;/b&gt;：E2E 测试辅助、AI 抓取、需要登录态的自动化流程。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;亮点&lt;/b&gt;：DOM 抽取层解决了「把整页 HTML 塞给模型会爆 context」的问题；Python 生态，和 Playwright 复用同一套浏览器。&lt;/li&gt;
&lt;li&gt;&lt;b&gt;注意&lt;/b&gt;：技术栈是 Python，纯前端项目集成需要走子进程或 HTTP 服务。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/browser-use/browser-use&quot;&gt;github.com/browser-use/browser-use&lt;/a&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

### 附：闭源商业工具（备查）

- **Cursor**、**GitHub Copilot**、**Windsurf**、**Trae**（字节）—— AI 编辑器 / IDE 类
- **v0**（Vercel）、**Lovable**、**Tempo** —— AI 生成 UI 或全栈应用类

开源优先、商业补齐，按需混用。这部分的形态变动快，不做 star 分级。</content:encoded></item><item><title>Windows 上的本地项目控制面：Windy Project Manager 的 Tauri 架构、离线扫描与可携带数据设计</title><link>https://caiyan12.github.io/posts/20260831000000/</link><guid isPermaLink="true">https://caiyan12.github.io/posts/20260831000000/</guid><description>从一个真实运行中的 Tauri 项目出发，拆解 Windy Project Manager 如何在 Windows 上组织项目记录、扫描技术栈、读取 Git 状态、启动开发命令，并用自动化与实机证据验证它。</description><pubDate>Mon, 31 Aug 2026 00:00:00 GMT</pubDate><content:encoded>&gt; 本文不是对“项目管理软件”这个大类的抽象综述，而是一份基于本地源码、自动化测试和真实 Windows 桌面运行结果的工程记录。文中的实现事实以 `D:\Dev\windy-project-mgr` 当前工作区为准；写作日期为 2026 年 8 月 31 日。

头图：工作台照片由 [cottonbro studio 拍摄，来源于 Pexels](https://www.pexels.com/photo/workstation-while-working-on-the-webpage-6804581/)。

## 摘要

当项目数量从几个增长到十几个，真正变慢的往往不是编译，而是“找到项目—判断状态—打开正确入口—记起启动命令”这一串重复动作。Windy Project Manager 试图把这些动作收拢到一个 Windows 本地优先的控制面中：它保存少量稳定的项目记录，在启动和刷新时读取易变的运行时信息，再把打开目录、启动 Run/Build 命令和进入编辑器的动作交给操作系统完成。

本文的核心论点是：**本地工具的可维护性取决于边界，而不取决于功能数量。** 持久化数据与扫描数据分离，网络依赖与 Git 读取分离，进程“已拉起”与命令“已成功”分离，前端状态与 Rust 能力分离，系统才有机会在离线、路径失效、非 Git 目录、空仓库和命令未配置等场景下保持可解释。

文章依次讨论问题边界、系统架构、数据模型、扫描器、Git 读取、Tauri IPC、命令启动、主题设置、实机验证和剩余限制。Mermaid 流程图用于表达控制流，思维导图用于表达能力边界，LaTeX 用于给出数据模型与扫描结果的形式化表示；截图均来自真实运行中的 Tauri 窗口，不是浏览器静态 mock。

## 1. 问题不是“缺少一个列表”，而是缺少一个本地控制面

开发者的项目目录通常分散在多个磁盘、工作区和临时目录中。项目名称可能相似，启动方式可能不同，Git 状态也可能在几分钟内改变。传统文件管理器能打开目录，终端能执行命令，编辑器能载入工作区，但这些工具并不知道彼此之间的上下文。

Windy Project Manager 的目标因此被压缩为四个问题：

1. 这个路径对应什么项目，使用了哪些技术？
2. 它当前处于哪个分支，工作区是否干净，最近改了什么？
3. 该项目应该用哪个命令启动或构建？
4. 这些信息在离线、路径失效或数据文件损坏时，是否仍然能给出明确反馈？

这四个问题对应四种不同的状态：项目记录是相对稳定的用户输入；类型、技术栈和 Git 状态是会变化的扫描结果；启动命令是用户配置的动作入口；错误信息则是系统必须保留的诊断事实。把它们混成一个“大项目对象”，会让每次刷新都变成一次写盘，也会让一次扫描失败影响整张卡片。

### 1.1 术语与边界

| 术语       | 本文中的准确含义                                       | 不包含的内容                                    |
| ---------- | ------------------------------------------------------ | ----------------------------------------------- |
| 项目记录   | `id`、名称、路径、描述、标签、Run/Build 命令和创建时间 | Git 状态、活动时间、自动识别标签                |
| 运行时扫描 | 针对项目目录即时读取类型、技术栈、Git 和根目录活动     | AST 分析、递归索引、远端代码分析                |
| 本地优先   | 数据文件与核心操作在本机完成，网络不是正常路径依赖     | 云端同步、远程项目管理、在线 Git 服务           |
| 分离式启动 | 只负责把终端或编辑器进程拉起并立即返回                 | 等待命令退出、采集 stdout、判断脚本业务是否成功 |
| 可携带数据 | 数据位于当前 EXE 同级的 `data\` 目录                   | AppData 自动迁移、账号级同步                    |

这个术语表也限定了本文的评价范围。本文可以讨论“当前实现如何处理一个本地 Node/Git 项目”，但不能把它扩展成“它已经解决了远程项目协作”或“它能判断任意构建脚本是否成功”。

## 2. 系统结构：Web UI 负责编排，Rust 负责本地能力

项目的技术栈是 React + TypeScript + Vite 前端、Tauri 2 容器和 Rust 本地后端。`package.json` 与 `src-tauri/Cargo.toml` 当前都记录版本 `0.1.0`；Tauri 配置将前端开发地址固定为 `http://localhost:1420`，生产构建入口为 `../dist`，默认窗口尺寸配置为 800×600。

```mermaid
flowchart LR
    UI[React Dashboard / Detail / Settings]
    API[TypeScript IPC wrappers]
    IPC[Tauri invoke]
    RUST[Rust command layer]
    STORE[Project and Settings Store]
    SCAN[Scanner]
    GIT[System Git CLI]
    LAUNCH[Launch layer]
    OS[Windows Explorer / Terminal / Editor]

    UI --&gt; API
    API --&gt; IPC
    IPC --&gt; RUST
    RUST --&gt; STORE
    RUST --&gt; SCAN
    SCAN --&gt; GIT
    RUST --&gt; LAUNCH
    LAUNCH --&gt; OS
```

这张图中最重要的不是层数，而是依赖方向：前端没有直接读取 `projects.json`，也没有在浏览器环境里执行 Git；Rust command 也没有把所有逻辑堆在 `#[tauri::command]` 函数里。命令层负责输入解析、数据目录定位和错误转换，实际业务逻辑由 `project`、`scanner`、`git` 和 `launch` 模块分别承担。

这符合 Tauri 官方文档描述的基本调用模型：Rust 函数使用 `#[tauri::command]` 暴露能力，由 `invoke_handler(tauri::generate_handler![...])` 注册，前端再通过 `@tauri-apps/api/core` 的 `invoke` 调用。项目中的 `src/lib/api.ts` 把这些调用再包成类型化函数，使组件只需要调用 `scanProject`、`getProjects` 或 `runProject`，不必重复书写命令名和载荷结构。

## 3. 数据模型：只保存稳定事实，把易变信息留在内存

### 3.1 持久化对象

Rust 的 `Project` 结构只包含用户登记和动作配置字段：

```rust
pub struct Project {
    pub id: String,
    pub name: String,
    pub path: String,
    pub description: Option&lt;String&gt;,
    pub tags: Vec&lt;String&gt;,
    pub run_command: Option&lt;String&gt;,
    pub build_command: Option&lt;String&gt;,
    pub created_at: String,
}
```

可以把一个项目记录写成：

$$
P = (id, name, path, description, tags, runCommand, buildCommand, createdAt)
$$

这里的 `P` 是用户可以编辑、程序需要跨重启保留的对象。它不包含 Git 分支、修改文件数或“最近扫描时间”，因为这些字段的意义依赖于当前目录状态。保存它们会制造一种不可靠的“历史真相”：用户打开应用看到的可能只是上一次启动时的状态。

项目数据位于当前可执行文件同级的 `data\projects.json`。文件外层带有 `version` 字段，写入时先生成同目录临时文件、写入并 `sync_all`，再重命名替换目标文件。这个顺序不是为了追求数据库级事务，而是为了避免进程在写入中途退出后把原文件截断成半个 JSON。

创建项目时，后端先规范化路径，再检查重复路径；命中重复项时拒绝创建并提示编辑已有记录。删除操作只删除 JSON 中的记录，不删除项目目录。对一个本地项目工具来说，这两条是比“多一个按钮”更重要的信任契约。

### 3.2 运行时扫描对象

扫描结果单独建模为 `ProjectMetadata`：

```rust
pub struct ProjectMetadata {
    pub project_type: Option&lt;String&gt;,
    pub tech_stack: Vec&lt;String&gt;,
    pub git: Option&lt;GitMetadata&gt;,
    pub activity: ActivityMetadata,
}
```

形式化地表示，给定目录 `p`，扫描器返回：

$$
M(p) = \bigl(\tau(p),\ \sigma(p),\ g(p),\ a(p)\bigr)
$$

其中：

- `\tau(p)` 是项目类型，例如 `Node`、`Python`、`Rust`，未命中时为空；
- `\sigma(p)` 是技术栈标签列表，例如 `pnpm`、`TypeScript`、`Vite`；
- `g(p)` 是 Git 元数据，非仓库时为空；
- `a(p)` 是根目录最近修改时间与本次扫描时间。

扫描器的完整管线是“类型 → 技术栈 → Git → 活动”。类型、技术栈和 Git 读取失败时会降级；活动信息读取则仍然是完整扫描的必要步骤，目录本身不存在或不可读取时会返回可诊断错误。这样，Git 失败不应让技术栈消失，非 Git 目录也应该显示为可理解的 `No Git repository`，而真正无法访问的路径不会被伪装成有效项目。

### 3.3 版本化 JSON 的恢复关系

`projects.json` 当前使用版本 1，`settings.json` 使用版本 3。设置文件在读取旧版本时可以迁移到当前结构；项目文件遇到空文件、非法 JSON 或未知版本时，会返回可诊断错误，不静默覆盖原数据。

```mermaid
stateDiagram-v2
    [*] --&gt; Missing
    Missing --&gt; Defaults: load
    ValidCurrent --&gt; InMemory: parse
    ValidLegacy --&gt; Migrate: version older
    Migrate --&gt; Rewrite: save current schema
    Corrupted --&gt; DiagnosticError: preserve original
    WrongVersion --&gt; DiagnosticError: report found/expected
    Defaults --&gt; InMemory
    Rewrite --&gt; InMemory
    InMemory --&gt; AtomicWrite: user saves
    AtomicWrite --&gt; InMemory: replace succeeds
    AtomicWrite --&gt; DiagnosticError: write/rename fails
```

这个状态图刻意保留错误路径。一个本地应用如果只描述“正常读取—正常保存”，就无法解释用户最需要帮助的时刻：文件损坏、磁盘权限不足、版本不匹配或上一次更新未完成。

## 4. 扫描器：用根目录特征换取速度与可解释性

### 4.1 类型和技术栈识别

当前扫描器不解析 AST，也不递归遍历整个源码树，而是检查项目根目录的有限文件特征：

| 根目录特征                             | 输出         |
| -------------------------------------- | ------------ |
| `package.json`                         | `Node`       |
| `pyproject.toml` 或 `requirements.txt` | `Python`     |
| `Cargo.toml`                           | `Rust`       |
| `pom.xml`                              | `Java`       |
| `*.csproj`                             | `C#`         |
| `pnpm-lock.yaml`                       | `pnpm`       |
| `tsconfig.json`                        | `TypeScript` |
| `vite.config.*`                        | `Vite`       |

这些规则有两个优点。第一，规则命中可以直接追溯到某个文件，用户很容易理解为什么一张卡片显示了某个标签。第二，扫描成本与源码规模近似脱钩：一个拥有数十万行代码的仓库，根目录特征检查仍然是有限次文件判断。

这同时也是它的适用边界。一个项目可能把配置放在子目录、使用自定义构建系统，或者存在多个互相嵌套的工作区；根目录规则不会替代完整的语言服务器或构建系统探测。把“轻量识别”明确写成轻量识别，比暗示它理解整个代码库更诚实。

### 4.2 启动脚本引导

添加项目分为两步。第一步登记路径、名称、描述和标签；第二步只扫描项目根目录下的 `*.bat`、`*.cmd` 和 `*.ps1`，按 `start`、`run`、字母序排列，并默认选择排序后的第一项。

```mermaid
sequenceDiagram
    participant User as 用户
    participant Dialog as Add Dialog
    participant IPC as Tauri IPC
    participant Scanner as Rust Scanner
    participant Store as Project Store

    User-&gt;&gt;Dialog: 选择或输入目录
    Dialog-&gt;&gt;Dialog: 本地查重与必填项检查
    Dialog-&gt;&gt;IPC: list_scripts(path)
    IPC-&gt;&gt;Scanner: 枚举根目录脚本
    Scanner--&gt;&gt;IPC: start / run / 其它脚本
    IPC--&gt;&gt;Dialog: 预选排序第一项
    User-&gt;&gt;Dialog: 保留、改选或清空
    Dialog-&gt;&gt;IPC: create_project(input)
    IPC-&gt;&gt;Store: 规范化路径、查重、原子保存
    Store--&gt;&gt;IPC: Project
    IPC--&gt;&gt;Dialog: 创建成功
```

这里有一个细节值得注意：`list_scripts` 是登记前的只读查询，`create_project` 才负责最终写盘。这样，用户可以在脚本引导页返回修改，而不会留下半条项目记录；同时，后端仍会在最终提交时再次检查路径重复。

## 5. Git：读取本地状态，但不把网络带进核心路径

Git 模块调用系统 `git` CLI，并以 `git -C &lt;path&gt;` 指定工作目录。它先用 `rev-parse --is-inside-work-tree` 判断目录是否位于工作树内；非仓库返回空值，而不是把非仓库当成错误。

仓库内的元数据包括：

```text
branch          symbolic-ref --short HEAD
status          git status --porcelain
changedFiles    porcelain 输出的非空行数
recentCommits   git log --max-count=10
ahead/behind    本地 @{u} 与 HEAD 的 rev-list 计数
```

`ahead` 与 `behind` 只基于本地已有的上游引用，不执行 `git fetch`。这使得“离线可用”不再是一句口号，而是一个可以检查的实现边界：应用能读取当前本地 Git 状态，但不会因为打开 Dashboard 而擅自访问远端。

Windows 上还有一个容易被忽略的用户体验问题。每一次系统 Git CLI 调用都可能产生子进程；如果不给它设置 `CREATE_NO_WINDOW`，用户可能在添加项目或刷新详情时看到控制台窗口闪现。当前实现为 Windows 子进程设置了这一标志，并在 Rust 契约测试中锁定了该行为。

```mermaid
flowchart TD
    Start[&quot;scan_git(path)&quot;] --&gt; Probe{rev-parse 成功且为 true?}
    Probe --&gt;|否| None[返回 No Git repository]
    Probe --&gt;|是| Branch[读取 branch]
    Branch --&gt; Status[读取 porcelain status]
    Status --&gt; Log[读取最多 10 条 commit]
    Log --&gt; Upstream{存在本地 upstream?}
    Upstream --&gt;|否| Zero[ahead = 0, behind = 0]
    Upstream --&gt;|是| Count[rev-list --left-right --count]
    Zero --&gt; Result[组装 GitMetadata]
    Count --&gt; Result
    Result --&gt; Memory[只交给运行时状态]
```

### 5.1 一张真实详情截图里的“状态证据”

下面的截图来自本地 `pnpm tauri dev` 启动的真实 Tauri 窗口。项目通过 Add Project 两步流程登记后，使用 Dashboard 搜索框过滤到目标项目，再进入详情页。截图中的 `main · clean · ahead 2` 是当时本地仓库的实际读取结果，不是文章手工填入的示例文字。

![Windy Project Manager Dashboard 中筛选出的目标项目卡片](/images/posts/windy-project-manager/dashboard.jpg)

_图 1｜真实 Dashboard：目标项目卡片显示 Node 类型、`pnpm` / `TypeScript` / `Vite` 标签、`main · clean · ahead 2`，以及 Open、Run、Build 操作。_

![Windy Project Manager 项目详情概览](/images/posts/windy-project-manager/detail-overview.jpg)

_图 2｜真实 Detail 概览：Overview 区展示标签、创建时间、Run command 和未配置的 Build command。_

![Windy Project Manager 项目详情中的技术与 Git](/images/posts/windy-project-manager/detail-technology-git.jpg)

_图 3｜真实 Detail 数据：Technology 区列出检测结果，Git 区显示分支、工作树状态、同步关系和最近提交。_

![Windy Project Manager 项目详情中的近期提交](/images/posts/windy-project-manager/detail-commits.jpg)

_图 4｜真实 Recent Commits：列表按最近提交展示短哈希、提交信息、作者和相对时间。_

这些截图可以证明的是：在当前机器、当前源码、当前目标目录和当前数据状态下，应用完成了这条真实交互路径。它们不能证明任意 Windows 用户都拥有相同的 Git 版本、终端配置或文件权限；那需要另外设计环境矩阵。

## 6. IPC：让异步边界显式存在

前端 API 层将 Tauri 调用收敛为少量函数：

```ts
export function scanProject(path: string): Promise&lt;ProjectMetadata&gt; {
	return invoke&lt;ProjectMetadata&gt;(&quot;scan_project&quot;, { path });
}

export function runProject(path: string, command: string): Promise&lt;void&gt; {
	return invoke&lt;void&gt;(&quot;run_project&quot;, { path, command });
}

export function updateSettings(settings: AppSettings): Promise&lt;AppSettings&gt; {
	return invoke&lt;AppSettings&gt;(&quot;update_settings&quot;, { settings });
}
```

从数据流角度看，前端得到的不是“神奇地变了的卡片”，而是一次明确的异步转换：

$$
UI\ state_{t+1} = reduce\bigl(UI\ state_t,\ IPC(command,\ payload)\bigr)
$$

启动时，App 先读取项目记录；随后对每个项目并发调用 `scan_project`，把返回的运行时元数据填入对应卡片。单卡失败进入该卡片的错误状态，其他卡片仍可展示。详情页的 Refresh 也只重扫当前项目，扫描结果依然留在内存中。

这种设计的直接收益是状态可观察：加载、成功、错误和空数据都能在 UI 中分别表达。它的代价是前端需要维护更多显式状态，也需要在页面切换后正确重建事件绑定；但这个代价换来了更清楚的错误边界。

## 7. 命令启动：只承诺“拉起”，不承诺“业务成功”

Run 和 Build 是最容易产生过度承诺的功能。当前实现的语义非常窄：检查工作目录与命令非空，优先尝试 `wt.exe`，失败后回退到 `powershell -NoExit`，以分离方式启动，然后立即把控制权还给应用。

```mermaid
flowchart LR
    Click[用户点击 Run / Build] --&gt; Validate[检查目录与命令]
    Validate --&gt;|失败| Error[返回可诊断错误]
    Validate --&gt;|通过| WT[尝试 wt.exe]
    WT --&gt;|拉起成功| Return[立即返回成功]
    WT --&gt;|拉起失败| PS[回退 powershell -NoExit]
    PS --&gt;|拉起成功| Return
    PS --&gt;|拉起失败| Error
```

实现中的 `LaunchPlan` 先构造程序、参数、工作目录和环境，再由 `spawn_plan` 真正拉起进程。计划构造是纯数据，既方便测试参数边界，也避免把终端探测、路径引用和进程启动全部揉进一个不可读的函数。

因此，应用报告的“成功”表示终端进程已经被拉起；它不表示 `pnpm dev`、`cargo build` 或用户自定义脚本已经成功退出。命令的 stdout、退出码和后续业务状态属于新一层的需求，不应在当前 UI 文案中被暗示出来。

编辑器入口也采用类似边界：设置中保存可执行文件和参数数组，参数中必须恰好包含一个 `{path}` 占位符；配置为空时返回 `Editor not configured`。对 `.bat` / `.cmd` 入口，启动层通过 `cmd.exe` 处理，而不是假定所有编辑器入口都是普通 `.exe`。

## 8. 设置系统：把主题当成可迁移的数据，而不是散落的样式分支

当前设置版本 3 包含颜色模式、强调色、主题工坊外观和编辑器配置。颜色模式有 `system`、`light`、`dark` 三态；强调色包含六种预设、Windows 当前颜色和自定义 `#RRGGBB`；主题工坊还提供风格预设、圆角、字号、密度、字体栈和亮暗中性色。

![Windy Project Manager Settings Appearance 真实截图](/images/posts/windy-project-manager/settings-appearance.jpg)

_图 5｜真实 Settings：Appearance 分页展示 Follow system、Light、Dark 三种模式与 Windy teal、Ocean blue、Violet、Amber 等强调色。_

设置的草稿状态与已保存状态分离。用户可以预览颜色和模式，点击 Cancel 时恢复草稿前的配置，点击 Save 才经过 IPC 写入 `data\settings.json`。旧设置版本在读取时迁移到当前结构，并用测试确认迁移和自定义外观往返。

如果把主题只写在 CSS 选择器里，跨重启持久化会变成另一套特殊逻辑；把它作为版本化设置域后，主题就和项目记录一样拥有加载、验证、保存和迁移路径。CSS 只消费当前状态，不负责猜测状态从哪里来。

## 9. 思维导图：能力、状态与边界如何相互约束

流程图适合说明一次操作如何经过系统，思维导图更适合展示这个工具的能力版图。下面的图不是功能愿望清单，而是当前实现中已经出现的几条主要边界。

```mermaid
mindmap
  root((Windy Project Manager))
    项目记录
      名称与路径
      描述与标签
      Run / Build 命令
      原子 JSON 保存
    运行时扫描
      Node / Python / Rust / Java / C#
      pnpm / npm / yarn
      TypeScript / Vite / Next.js
      根目录活动时间
      启动脚本排序
    Git 读取
      本地 CLI
      分支与状态
      最近 10 条提交
      ahead / behind
      不执行 fetch
    Windows 动作
      Explorer
      wt.exe
      PowerShell 回退
      编辑器参数占位符
    主题与设置
      system / light / dark
      强调色
      外观预设
      EXE 同级 data
    明确未覆盖
      SSH 远程项目
      SMB 深度支持
      Git 图形历史
      多 Run / Build Profile
      扫描缓存 TTL
```

导图右下角的“未覆盖”同样重要。产品边界不是把 TODO 隐藏起来，而是把它们与已完成能力并列，让读者知道当前版本解决了什么、没有解决什么。

## 10. 验证：自动化证明契约，实机证明路径

### 10.1 自动化结果

我在文章生成前对本地工作区重新执行了三组验证：

| 命令                                              | 结果                       | 它证明了什么                                      |
| ------------------------------------------------- | -------------------------- | ------------------------------------------------- |
| `pnpm test`                                       | 8 个文件、87 个测试通过    | 前端纯逻辑与契约断言通过                          |
| `pnpm build`                                      | `tsc` 与 Vite 生产构建通过 | 前端类型检查和生产打包通过                        |
| `cargo test --manifest-path src-tauri/Cargo.toml` | 155 个测试通过             | Rust 单元、集成、扫描、存储、设置和启动层契约通过 |

`cargo test` 的 155 个测试覆盖了存储文件异常、路径查重、Git 非仓库与空仓库、detached HEAD、ahead/behind、启动参数、编辑器占位符、设置迁移和系统编辑器发现等边界。测试通过表示这些被写进测试的契约成立，不表示所有第三方编辑器或所有构建脚本都已经被执行过。

### 10.2 实机路径

为了得到本文截图，我在 Windows 上启动了 `pnpm tauri dev`，在真实 Tauri 窗口内完成了以下路径：

1. 打开 Add Project，登记 `D:\Dev\windy-project-mgr`；
2. 在启动脚本引导页保留自动推荐的 `start.bat`；
3. 在 Dashboard 搜索 `windy-project-mgr`，确认只剩目标项目卡片；
4. 打开 Detail，观察 Overview、Technology、Git 和 Recent Commits；
5. 打开 Settings，观察 Appearance 分页与强调色预览。

这组证据覆盖了“登记—扫描—过滤—详情—设置”的用户主路径。它不等于完整发布验收：生产绿色 ZIP、安装包、不同 Windows 环境、真实编辑器启动和断网下的每项动作，仍然需要各自的验收证据。项目的 `TESTING.md` 与 `PROJECT_STATUS.md` 已记录此前的生产绿色版和人工验收结果；本文只把当前回合重新运行的自动化结果与截图作为本次写作证据。

### 10.3 测试与实机证据的关系

可以用下面的关系概括两类证据的职责：

$$
Evidence = Contract_{automated} \cup Path_{desktop}
$$

自动化测试适合证明输入输出契约、错误分支和数据文件规则；实机运行适合证明真实窗口、真实 IPC、焦点、布局和桌面进程路径。两者不能互相替代：一次成功的 `cargo test` 不会自动证明窗口没有闪现，一张截图也不会证明损坏 JSON 的恢复逻辑。

## 11. 讨论：这个设计把复杂度放在了哪里

### 11.1 复杂度被压缩到边界，而不是消失

“扫描结果不落盘”简化了数据一致性，却要求每次启动都重扫；“只调用系统 Git”减少依赖，却需要处理 Git 缺失、空仓库、非仓库和 Windows 子进程窗口；“分离式启动”让应用不必等待命令，却不能提供构建日志和退出码；“EXE 同级 data”带来可移动目录，却也意味着程序目录必须具备写权限。

这些不是实现缺陷的同义词，而是设计选择的成本。一个好的技术说明应同时写出收益和成本，否则“本地优先”“轻量”“便携”会变成没有可验证内容的宣传词。

### 11.2 为什么没有直接引入数据库、Git 库或远程 API

当前项目记录数量与数据结构不需要数据库的查询能力；版本化 JSON 更容易备份、迁移和人工诊断。Git CLI 已经是 Windows 用户环境中的既有能力，调用它可以保留 Git 自己对工作树、上游和 detached HEAD 的定义，同时避免在应用内重实现 Git 协议。核心功能不依赖远程 API，则可以在断网情况下保持可用。

这并不是“数据库、Git 库或远程 API 永远不该使用”。当需求变成跨设备同步、远程仓库索引、复杂历史图或大规模全文搜索时，当前边界就不够了；那时应该新增明确的领域模型和传输层，而不是偷偷把网络请求塞进启动扫描。

### 11.3 当前实现中可继续研究的指标

目前的验证主要是契约和路径级验证，尚未建立性能基线。后续如果需要把工具从个人项目管理器推进到更大规模的本地工作区，可以测量：

- `n` 个项目启动时的首屏骨架出现时间与全部扫描完成时间；
- Git 仓库大小、提交数量与扫描延迟的关系；
- 同时刷新多个项目时，Git 子进程数量和磁盘访问峰值；
- JSON 原子写入在异常终止后的恢复率；
- 不同 Windows 权限和终端安装状态下的 Run/Build 成功拉起率。

这些指标需要一个可复现的夹具矩阵和固定机器环境。当前文章不把一次本机观察推广成统计结论。

## 12. 局限与下一步

项目当前 README 已明确列出以下未实现方向：完整主题编辑机制、VSCode 式 Git 图形历史、SSH 远程项目、SMB 深度支持、更多检测规则、多 Run/Build Profile、收藏与统计、Plugin Scanner、AI Summary，以及扫描结果缓存与 TTL。

从架构演进角度看，这些方向可以分成三类：

1. **信息深度**：Git 图形历史、更多检测规则和 AI Summary 会扩大扫描模型；
2. **位置与传输**：SSH、SMB 和远程项目会要求把当前 `String path` 提升为 Local / Network / Remote 等位置模型；
3. **过程与规模**：多 Profile、缓存 TTL 和统计会要求记录执行历史、缓存有效期与更多状态。

如果未来加入这些能力，当前“稳定记录—运行时扫描—动作启动”的分层仍然可以保留，但 `ProjectLocation`、Transport、ScanCache 和 CommandRun 等对象应先被明确设计，再进入代码。否则功能会以字段堆积的方式增长，最终重新制造本文开头试图消除的混乱。

## 结语

Windy Project Manager 的价值不在于它把多少工具按钮放到了一张卡片上，而在于它把一个本地项目的几类事实分开处理：用户输入的记录跨重启保存，目录信息按需扫描，Git 状态从本地读取，终端动作只承诺进程拉起，设置以版本化数据迁移，错误则被当作正常状态的一部分来展示。

这套做法适合小型、离线、本地优先的 Windows 工具，也清楚地暴露了它的边界。对工程写作而言，这种边界比“功能齐全”更值得记录：它让源码、测试、截图和后续迭代都能围绕同一组可验证的契约展开。

## 参考资料与证据

1. Windy Project Manager 本地工作区：`README.md`、`src/lib/api.ts`、`src-tauri/src/project/`、`src-tauri/src/scanner/mod.rs`、`src-tauri/src/git/mod.rs`、`src-tauri/src/launch/mod.rs`、`TESTING.md`、`PROJECT_STATUS.md`。
2. [Windy Project Manager GitHub repository](https://github.com/CaiYan12/windy-project-mgr)（项目主页；本文实现事实以本地工作区为准）。
3. [Calling Rust from the frontend — Tauri documentation](https://github.com/tauri-apps/tauri-docs/blob/v2/src/content/docs/develop/calling-rust.mdx)（`#[tauri::command]`、`invoke_handler` 与前端 `invoke` 的官方说明）。
4. [Workstation While Working on the Webpage — Pexels](https://www.pexels.com/photo/workstation-while-working-on-the-webpage-6804581/)（头图：cottonbro studio）。</content:encoded></item><item><title>《数据库原理》作业5：关系理论1</title><link>https://caiyan12.github.io/posts/20260402161000/</link><guid isPermaLink="true">https://caiyan12.github.io/posts/20260402161000/</guid><description>关系数据库规范化与函数依赖习题整理</description><pubDate>Thu, 02 Apr 2026 00:00:00 GMT</pubDate><content:encoded>## 一、单选题

### 1．（B）对关系模式进行规范化的主要目的是

A 提高数据操作效率&lt;br&gt;
B 维护数据的一致性&lt;br&gt;
C 加强数据的安全性&lt;br&gt;
D 为用户提供更快捷的数据操作

👉 解析：规范化核心目的是**减少冗余、防止异常、保证一致性**。

### 2．（D）关系模式中的插入异常是指

A 插入的数据违反了实体完整性约束&lt;br&gt;
B 插入的数据违反了用户定义的完整性约束&lt;br&gt;
C 插入了不该插入的数据&lt;br&gt;
D 应该被插入的数据不能被插入

👉 解析：插入异常=**想插入但由于设计不合理无法插入**。

### 3．（C）若X→Y且X的任意真子集都不能决定Y，则称

A X完全函数依赖于Y&lt;br&gt;
B X部分函数依赖于Y&lt;br&gt;
C Y完全函数依赖于X&lt;br&gt;
D Y部分函数依赖于X

👉 解析：这是**完全函数依赖定义**。

### 4．（B）若X→Y且存在X&apos;⊂X使X&apos;→Y，则称

A Y完全函数依赖于X&lt;br&gt;
B Y部分函数依赖于X&lt;br&gt;
C X完全函数依赖于Y&lt;br&gt;
D X部分函数依赖于Y

👉 解析：存在子集仍能决定 → **部分依赖**。

### 5．（C）X→Y, Y→Z ⇒ X→Z 属于

A 自反规则&lt;br&gt;
B 增广规则&lt;br&gt;
C 传递规则&lt;br&gt;
D 伪传递规则

👉 解析：经典**传递律**。

### 6．（B）学生(学号,姓名,所在系,系主任)

A 第一范式&lt;br&gt;
B 第二范式&lt;br&gt;
C 第三范式&lt;br&gt;
D BC范式

👉 解析：存在**传递依赖（学号→系→系主任）**，未达3NF。

### 7．（D）R(X,Y,Z), F={Y→Z, Y→X, X→YZ}

A 1NF&lt;br&gt;
B 2NF&lt;br&gt;
C 3NF&lt;br&gt;
D BCNF

👉 解析：X、Y都是候选码 → 满足BCNF。

### 8．（D）错误的是

A 任何一个只包含两个属性的关系模式一定属于3NF√&lt;br&gt;
B 任何一个只包含两个属性的关系模式一定属于BCNF√&lt;br&gt;
C 任何一个只包含两个属性的关系模式一定属于2NF√&lt;br&gt;
D 任何一个只包含三个属性的关系模式一定属于3NF×

👉 解析：三个属性不一定满足3NF。

### 9．（B）视图设计属于

A 物理设计&lt;br&gt;
B 逻辑设计&lt;br&gt;
C 概念设计&lt;br&gt;
D 程序设计

👉 解析：视图是逻辑层。

### 10．（B）函数依赖成立的：

设有关系R(A,B,C)的值如下:

| A   | B   | C   |
| --- | --- | --- |
| 2   | 2   | 3   |
| 2   | 3   | 4   |
| 3   | 3   | 5   |
| 2   | 3   | 4   |

A 函数依赖A→B在上述关系中成立×&lt;br&gt;
B 函数依赖BC→A在上述关系中成立√&lt;br&gt;
C 函数依赖B→A在上述关系中成立×&lt;br&gt;
D 函数依赖A→BC在上述关系中成立×

👉 解析：BC唯一确定A。

### 11．（D）数据库设计阶段

A 物理设计阶段、逻辑设计阶段、编程和调试阶段×&lt;br&gt;
B 模型设计阶段、程序设计阶段和运行阶段×&lt;br&gt;
C 方案设计阶段、总体设计阶段、个别设计和编程阶段×&lt;br&gt;
D 概念设计阶段、逻辑设计阶段、物理设计阶段、实施和调试阶段√

👉 标准流程：概念→逻辑→物理→实施。

### 12．（C）不正确的是

A 任何一个包含两个属性的关系模式一定满足3NF√&lt;br&gt;
B 任何一个包含两个属性的关系模式一定满足BCNF√&lt;br&gt;
C 任何一个包含三个属性的关系模式一定满足3NF×&lt;br&gt;
D 任何一个关系模式都一定有码√

👉 解析：三属性不一定3NF。

### 13．设有关系模式R(A,B,C,D),F是R上成立的函数依赖集,F={B→C,C→D},则属性C的闭包C+为(C)

A BCD&lt;br&gt;
B BD&lt;br&gt;
C CD&lt;br&gt;
D BC

👉 解析：C→D，无其他推导。

### 14．在数据库设计中,将ER图转换成关系数据模型的过程属于 (B)

A 需求分析阶段&lt;br&gt;
B 逻辑设计阶段&lt;br&gt;
C 概念设计阶段&lt;br&gt;
D 物理设计阶段

### 15．（B）下述哪一条不是由于关系模式设计不当而引起的

A 数据冗余&lt;br&gt;
B 丢失修改&lt;br&gt;
C 插入异常&lt;br&gt;
D 更新异常

👉 解析：属于并发问题。

### 16．下面关于函数依赖的叙述中,不正确的是（B）

A 若X→Y,X→Z,则X→YZ&lt;br&gt;
B 若XY→Z,则X→Z,Y→Z&lt;br&gt;
C 若X→Y,Y→Z,则X→Z&lt;br&gt;
D 若X→Y,Y′⊂Y,则X→Y′

👉 解析：XY→Z 不能推出 X→Z。

### 17．有关系模式A(C,T,H,R,S),基中各属性的含义是:

C:课程 T:教员 H:上课时间 R:教室 S:学生

根据语义有如下函数依赖集: F={C→T,(H,R)→C,(H,T)→R,(H,S)→R}关系模式A的码是（D）

A C&lt;br&gt;
B (H,R)&lt;br&gt;
C (H,T)&lt;br&gt;
D (H,S,C)

👉 (H,S,C)

### 18．有关系模式A(C,T,H,R,S),基中各属性的含义是:

C:课程 T:教员 H:上课时间 R:教室 S:学生

根据语义有如下函数依赖集: F={C→T,(H,R)→C,(H,T)→R,(H,S)→R} 关系模式A的规范化程度最高达到(B)

A 1NF&lt;br&gt;
B 2NF&lt;br&gt;
C 3NF&lt;br&gt;
D BCNF

👉 2NF

### 19．现将关系模式A分解为两个关系模式A1(C,T),A2(H,R,S),则其中A1的规范化程度达到（D）

A 1NF&lt;br&gt;
B 2NF&lt;br&gt;
C 3NF&lt;br&gt;
D BCNF

👉 BCNF

### 20．下述哪一条不属于概念模型应具备的性质（D）

A 有丰富的语义表达能力&lt;br&gt;
B 易于交流和理解&lt;br&gt;
C 易于变动&lt;br&gt;
D 在计算机中实现的效率高

👉 在计算机中效率高（属于物理模型）

### 21．在下面列出的条目中,哪个(些)是当前应用开发工具的发展趋势（D）

Ⅰ.采用三层或多层Client/Server结构&lt;br&gt;
Ⅱ.支持Web应用&lt;br&gt;
Ⅲ.支持开放的、构件式的分布式计算环境

A Ⅰ和Ⅱ&lt;br&gt;
B 只有Ⅱ&lt;br&gt;
C 只有Ⅲ&lt;br&gt;
D 都是

👉 全选

### 22．设关系模式R{A,B,C,D,E},其上函数依赖集F={AB→C,DC→E,D→B},则可导出的函数依赖是（A）

A ABD→E&lt;br&gt;
B BC→E&lt;br&gt;
C DC→AB&lt;br&gt;
D DB→A

👉 ABD→E

### 23．在关系模式R(A,B,C)中,有函数依赖集F={AB→C,BC→A},则R最高达到（D）

A 第一范式&lt;br&gt;
B 第二范式&lt;br&gt;
C 第三范式&lt;br&gt;
D BC范式

👉 BCNF

### 24．下列属于逻辑结构设计阶段任务的是（C）

A 生成数据字典&lt;br&gt;
B 集成局部E-R图&lt;br&gt;
C 将E-R图转换为一组关系模式&lt;br&gt;
D 确定数据存取方法

👉 ER → 关系模式

### 25．关系模式R中的属性全部是主属性,则R至少是(C)范式的关系模式

A 1NF&lt;br&gt;
B 2NF&lt;br&gt;
C 3NF&lt;br&gt;
D BCNF

👉 至少3NF

### 26．关系模式SJP(S,J,P)中,S是学生,J是课程,P是名次。每一个学生选修每门课程的成绩有一定的名次,每门课程中每一个名次只有一个学生(无并列)。该关系模式属于（C）

A 2NF&lt;br&gt;
B 3NF&lt;br&gt;
C BCNF&lt;br&gt;
D 4NF

👉 BCNF

### 27．在数据库设计中,将E-R图转换成关系数据模型的过程属于（A）

A 逻辑设计阶段&lt;br&gt;
B 需求分析阶段&lt;br&gt;
C 概念设计阶段&lt;br&gt;
D 物理设计阶段

👉 逻辑设计

### 28．关系数据库规范化是为解决关系数据库中（D）

A 插入、删除和数据冗余&lt;br&gt;
B 提高查询速度&lt;br&gt;
C 减少数据操作的复杂性&lt;br&gt;
D 保证数据的一致性与完整性

👉 一致性与完整性

---

## 二、核心知识总结

### 1️⃣ 三大异常

- 插入异常：不能插入
- 删除异常：误删信息
- 更新异常：数据不一致

### 2️⃣ 函数依赖类型

- 完全依赖：无冗余属性
- 部分依赖：存在冗余
- 传递依赖：间接依赖

### 3️⃣ 范式总结

| 范式 | 条件             |
| ---- | ---------------- |
| 1NF  | 原子性           |
| 2NF  | 消除部分依赖     |
| 3NF  | 消除传递依赖     |
| BCNF | 所有决定因素是码 |

### 4️⃣ Armstrong公理

- 自反
- 增广
- 传递

### 5️⃣ 数据库设计流程

1. 需求分析
2. 概念设计（ER图）
3. 逻辑设计（关系模式）
4. 物理设计
5. 实施与维护

---

## ✅ 重点记忆

- **规范化 = 减少冗余 + 消除异常**
- **3NF重点：消除传递依赖**
- **BCNF更严格：决定因素必须是码**</content:encoded></item><item><title>“费用贬值”下企业在不同生产阶段的生产决策</title><link>https://caiyan12.github.io/posts/20260320000000/</link><guid isPermaLink="true">https://caiyan12.github.io/posts/20260320000000/</guid><pubDate>Fri, 20 Mar 2026 00:00:00 GMT</pubDate><content:encoded># “费用贬值”下企业在不同生产阶段的生产决策

&gt; 0319改：

**引言**
在企业成长过程中，生产成本的结构与规模并非一成不变。在建设初期，由于生产系统尚未完备，企业需投入大量资金用于购置固定资产、建立供应链体系，且在生产探索阶段会花费大量成本寻找高效生产路线，这些成本分摊到每单位产品中，会导致单位生产成本较高。而随着生产经验的积累与系统逐渐成熟，企业进入成熟后期，生产链条优化后效率大幅提升、设备冗余减少、供应链协作高效，单位生产成本显著下降。这一现象可称为企业生产产品消耗的费用发生了“费用贬值”。

为了从数学的角度分析此问题，我们分开分析了企业不同阶段的成本结构，以及阶段变化导致的成本结构的变化。结果表明，除去制造费用、管理费用等生产链条所必须的运行成本，除去企业仅在生产初期必须的购置固定资产的固定成本，由于成熟后期企业生产线路的高度优化、生产资金的高效利用，此时每单位产品的生产成本必然降低，并将作用于企业的产量决策的变化。

即费用贬值不仅直接降低生产成本，更重要的是，它可能释放企业在初期的生产规模约束，推动企业走向“规模扩张”。

**关键词**
-

---

# 一、文献引入（Introduction）

暂无

# 二、文献综述（Related Literature）

暂无

# 三、理论模型（Model Review）

## 一、关键假设（Key Assumptions）

本文在标准微观经济学利润最大化框架下，分析生产单一产品的垄断企业在不同发展阶段中，由于生产系统逐步完善而引致单位生产费用下降的“费用贬值”机制。模型建立在以下假设之上。

**假设 1（市场需求的确定）**
假设市场需求由线性逆需求函数刻画：

$$
p(Q)=a-bQ,\quad a&gt;0,b&gt;0
$$

其中 $Q$ 表示企业产量，$p$ 表示产品价格。

---

**假设 2（企业行为的刻画）**
我们简化企业为生产单一产品的垄断企业，且企业与每一生产周期所生产的所有产品均售罄。企业由自身的产量决定价格，在给定市场条件下，通过选择产量$Q$最大化利润。

---

**假设 3（成本结构的组成）**
假设企业总成本由三部分构成：

1. **生产费用：**与产量成正比的生产费用：$cQ$。
2. **过程费用：**随产量弱线性增长的过程费用，用以刻画管理与运营复杂度：$\phi Q$。
3. **固定成本：**与产量无关的建立生产所需的固定成本：$FC_0$。该成本将随着企业步入成熟阶段而消失。

---

**假设 4（企业发展阶段的划分）**
我们将企业生产活动分为两个阶段：

- **建设初期**：生产系统尚未完备，固定成本对生产决策具有约束性影响；
- **成熟后期**：生产系统与供应链结构已完成建设，固定成本不再构成规模约束，单位生产成本由于“费用贬值”而下降。

---

## 二、模型构建（Model Construction）

### （一）建设初期：带最低有效规模约束的利润最大化

#### 1. 成本与利润函数

根据假设3，建设初期的总成本函数为：

$$
C_1(Q)=cQ+\phi Q+FC_0
$$

利润函数为：

$$
\pi_1(Q)=p(Q)Q-C_1(Q)
=-bQ^2+(a-c-\phi)Q-FC_0
$$

#### 2. 最优化决策

建设初期企业的决策问题可表述为：

$$
\max_{constrains}\{\pi_1(Q)\}
$$

---

### （二）成熟后期：约束解除与费用贬值

#### 1. 费用贬值的弱内生化

随着生产系统成熟，单位生产费用因经验积累与效率提升而下降，即单位生产费用发生费用贬值，我们引入“费用贬值系数”$\delta$，表示后期单位成本降至初期的$\delta$倍。即成熟后期单位生产费用可记为$\delta c$。

同时，随着产量的递增，生产的经验积累与生产效率也相应提升，并共同作用于继续提升费用贬值的强化力度。因此，我们引入“费用贬值强化系数”$\kappa$以反映生产规模的扩大对于费用贬值的促进作用。则可以采用线性近似形式以产量水平内生化表达这种趋势：

$$
\delta(Q)=\delta_0-\kappa Q,\quad \kappa&gt;0
$$

并假定 $\delta(Q)\in(0,1)$。

即成熟后期单位生产费用可计为 $\delta(Q)c$。

此时固定成本不再构成硬性约束，企业可在更宽的产量范围内优化决策。

#### 2. 成本与利润函数

成熟后期的总成本函数为：

$$
C_2(Q)=\delta(Q)cQ+\phi Q+FC_0
$$

利润函数为：

$$
\pi_2(Q)
=-(b-\kappa c)Q^2+(a-\delta_0c-\phi)Q-FC_0
$$

#### 3. 最优化决策

成熟后期企业的决策问题可表述为：

$$
\max_{constrains}\{\pi_2(Q)\}
$$

---

**表1：主要参数含义对照表：**

| 参数名称         | 参数符号             | 参数描述                                                 |
| ---------------- | -------------------- | -------------------------------------------------------- |
| 市场容量         | $a$                  | 市场上对该产品的最大需求量                               |
| 需求曲线斜率     | $b$                  | 需求量对价格变化的敏感系数                               |
| 单位生产费用     | $c$                  | 企业生产单位产品所消耗的生产成本                         |
| 单位过程费用     | $\phi$               | 企业生产单位产品所消耗的过程费用，如生产车间的管理费用等 |
| 固定成本         | $FC_0$               | 企业初期建立生产活动所消耗的固定成本，如设备购置费用等   |
| 价格             | $p$                  | 单位产品售出获得的收益，由产量决定                       |
| 产量             | $Q$                  | 企业在某个周期生产产品的产量                             |
| 总成本           | $C_i(Q)$             | 第$i$阶段下企业在某个周期生产产品的总成本                |
| 利润             | $\pi_i(Q)$           | 第$i$阶段下企业的周期生产利润                            |
| 费用贬值系数     | $\delta(Q)$          | 企业因费用贬值导致单位生产费用降低的比例                 |
| 初始费用贬值强度 | $\delta_0$           | 企业刚进入成熟阶段还未拥有成熟生产经验时的费用贬值系数   |
| 费用贬值强化系数 | $\kappa$             | 企业由于生产经验积累导致的费用贬值系数随产量递减的比例   |
| 费用贬值技术下界 | $\underline{\delta}$ | 企业由于客观生产技术的限制导致的的费用贬值系数下界       |
| 有效规模下界     | $\underline{Q}$      | 初期阶段企业为覆盖生产固定成本所需要的最低产量           |
| 可行产量上界     | $\overline{Q}$       | 成熟阶段企业因费用贬值技术下界约束引导的产量技术上界     |
| 最优化产量       | $Q_i^*$              | 企业为达到最大利润所选择的产量                           |

---

# 四、最优化求解（Optimized Solutions）

## 一、引理：不同阶段面临的生产约束（Lemmas）

本节通过一组引理刻画企业在不同发展阶段中，由成本结构内生决定的产量可行区间。该区间由**建设初期的最低有效规模**与**成熟阶段的费用贬值技术下界**共同界定。该区间作为产量的约束介入于利润最优化决策的计算之中。

---

### 引理1：建设初期的进入可行约束

在建设初期，若企业需承担严格为正的系统运行固定成本 $FC_0&gt;0$ ，且市场需求与成本结构满足本文设定，则当且仅当建设初期利润函数的无约束最优值非负，企业在正产量区间内才存在经济上可行的生产活动。该条件等价于以下不等式成立：

$$
\frac{(a-c-\phi)^2}{4b}\geqslant FC_0
$$

若上述条件不成立，则企业在任何正产量水平下均无法覆盖固定成本，其最优决策退化为不进入生产（$Q^*=0$）。

---

### 引理2：建设初期的最低有效规模约束

在满足引理 1 所给出的进入可行性条件下，建设初期企业的利润函数在正产量区间内存在唯一的产量下界 $\underline{Q}&gt;0$，使得当且仅当 $Q\ge\underline{Q}$ 时，企业能够至少覆盖其固定运行成本并实现非负利润。其中：

$$
\underline{Q}=\frac{a-c-\phi-\sqrt{(a-c-\phi)^2-4bFC_0}}{2b}
$$

该下界由成本结构内生决定，可被解释为企业的最低有效生产规模。

---

### 引理3：成熟阶段费用贬值的技术下界约束

在成熟阶段，单位生产费用因费用贬值而下降，但受制于技术与组织效率的物理极限，即费用贬值系数需满足：

$$
\delta(Q)\geqslant\underline{\delta}&gt;0
$$

则成熟阶段企业的利润函数在可行产量区间内存在唯一的最优解，且该下界约束排除了边际成本趋于零所导致的非现实极端生产行为。

此时成熟阶段的生产规模存在技术上界限制$Q_2\leqslant\overline{Q}$，且：

$$
\overline{Q}=\min\left\{ \frac{\delta_0c+\phi}{2\kappa c},\frac{\delta_0-\underline{\delta}}{\kappa} \right\}
$$

---

### 引理4：费用贬值强化系数的可行区间

在成熟阶段，当且仅当费用贬值强化系数$\kappa$满足：

$$
0&lt;\kappa&lt;\frac{b}{c}
$$

成熟阶段利润函数严格凹，并存在唯一内点最优解。

_若有$\kappa \geqslant \frac{b}{c}$，利润函数将随产量增加不断上升，将会诱导成熟阶段的最优产量扩张至不可行的区域。_

---

## 二、引理证明（Proof of lemmas）

### 引理1证明

建设初期企业的成本函数为：

$$
C_1(Q)=cQ+\phi Q+ FC_0
$$

建设初期企业的利润函数为：

$$
\pi_1(Q)=p(Q)Q-C_1(Q)=(a-bQ)Q-cQ-\phi Q-FC_0
$$

我们注意到，该利润曲线为对于$Q$的开口向下的抛物线，且：

$$
\pi_1(0)=-FC_0&lt;0, \qquad \lim_{Q\rightarrow +\infty}\pi_1(Q)=-\infty
$$

该利润曲线对称轴为：

$$
Q_1^u=\frac{a-c-\phi}{2b}
$$

得到对应的最优利润水平：

$$
\pi_1^*=\pi_1(Q_1^u)=\frac{(a-c-\phi)^2}{4b}- FC_0
$$

因此，建设初期在正产量区间内存在至少一个使利润非负的生产规模，当且仅当：

$$
\pi_1^* \geqslant0 \Rightarrow\frac{(a-c-\phi)^2}{4b}\geqslant FC_0
$$

若该条件不成立，则利润函数在$Q&gt;0$的整个区间内恒为负值，企业在任何正产量水平下均无法覆盖其固定运行成本，其最优决策退化为不进入生产。

由此，该不等式刻画了建设初期企业进入生产活动的必要且充分条件，即建设初期的进入可行性约束。

引理得证。

---

### 引理2证明

在引理1所给出的进入可行性条件下，建设初期企业的利润函数为：

$$
\pi_1(Q)=p(Q)Q-C_1(Q)=(a-bQ)Q-cQ-\phi Q-FC_0
$$

我们注意到，该利润曲线为对于$Q$的开口向下的抛物线，且：

$$
\pi_1(0)=-FC_0&lt;0, \qquad \lim_{Q\rightarrow +\infty}\pi_1(Q)=-\infty
$$

因此，利润函数$\pi_1(Q)$在$Q&gt;0$的区间内至多存在两个零点，结合引理1，必然有$\pi_1(Q_1^u)\geqslant0$，根据连续函数介值定理，必然存在至少一个 $\underline{Q}&gt;0$，使得：

$$
\pi_1(\underline{Q})=0
$$

当$Q&lt;\underline{Q}$时，企业利润为负，无法覆盖其固定运行成本；当$Q\geqslant\underline{Q}$时，企业利润非负，生产活动在经济上可持续。且计算可得：

$$
\underline{Q}=\frac{a-c-\phi-\sqrt{(a-c-\phi)^2-4bFC_0}}{2b}
$$

由此，该正零点$\underline{Q}$构成建设初期企业的最低有效生产规模，其数值由需求参数、单位生产费用、过程费用以及固定成本共同内生决定。

引理得证。

&gt; **说明（P. S.）**
&gt; 由于利润函数为严格凹函数，其最优解必然位于利润非负区间的内部。尽管利润函数在高产量区间存在第二个零点，该零点仅反映需求价格下降所导致的利润衰减，并不构成有效的规模约束，故本文仅关注由固定成本所内生决定的最低有效规模下界。

---

### 引理3证明

**一：费用贬值系数的自然约束**

在成熟阶段，企业已完成生产系统建设，不再承担建设期固定成本，其成本函数可写为：

$$
C_2(Q)=\delta(Q)cQ+\phi Q+FC_0
$$

成熟阶段利润函数为：

$$
\pi_2(Q)=p(Q)Q-C_2(Q)=(a-bQ)Q-(\delta_0-\kappa Q)cQ-\phi Q-FC_0
$$

显然，$0&lt;\delta(Q)&lt;1,0&lt;\delta_0&lt;1$，解得：

$$
\frac{\delta_0}{Q}&lt;\kappa&lt;\frac{1}{Q},\qquad 0&lt;Q&lt;\frac{\delta_0}{\kappa}
$$

此为**第一重约束**：产量不得超过 $\delta_0/\kappa$，否则 $\delta(Q)\leq0$，即单位成本为负，无经济学意义。

**二：利润函数的凹性对参数的限制**

成熟阶段利润函数为：

$$
\pi_2(Q)=(\kappa c-b)Q^2+(a-\delta_0c-\phi)Q-FC_0
$$

为保证存在唯一内点最大值，需满足二阶条件：

$$
\frac{d^2\pi_2(Q)}{dQ^2}&lt;0 \Rightarrow b-\kappa c&gt;0
$$

即$\kappa&lt;b/c$。

此为**第二重约束**：费用贬值系数 $\kappa$ 需小于 $b/c$，否则利润函数非凹，企业将无限扩张产量。

**三：边际成本非负性约束**

成熟阶段边际成本为：

$$
MC_2(Q)=\frac{dC_2(Q)}{dQ}=(\delta_0-2\kappa Q)c+\phi
$$

为保持边际成本非负（否则增加产量将降低总成本，违背成本函数单调性），需要$MC_2(Q)\geqslant0$，即：

$$
(\delta_0-2\kappa Q)c+\phi \geqslant0
$$

整理得：

$$
Q \leqslant \frac{\delta_0c+\phi}{2\kappa c}
$$

此为**第三重约束**：产量超过此值将导致边际成本为负，严重违反事实的客观规律。

**四：费用贬值技术下界$\underline{\delta}$的引入与产量上界的确定**

注意到当 $Q \to \delta_0/\kappa$ 时，$\delta(Q) \to 0$，即单位成本趋于零，这在技术和组织上不可行。设存在费用贬值技术下界$\underline{\delta} &gt; 0$，使得$\delta(Q)\geqslant\underline{\delta}&gt;0$。代入得：

$$
\delta_0-\kappa Q\geqslant \underline{\delta} \Rightarrow Q \leqslant \frac{\delta_0-\underline{\delta}}{\kappa}
$$

此即由技术极限决定的产量上界。

结合前述三重约束，成熟阶段产量的可行产量上界为：

$$
\overline{Q}=\min\left\{ \frac{\delta_0}{\kappa},\frac{\delta_0c+\phi}{2\kappa c},\frac{\delta_0-\underline{\delta}}{\kappa} \right\}
$$

又由$\underline{\delta}&gt;0$可知：$\delta_0/\kappa&gt;(\delta_0-\underline{\delta})/\kappa$必然成立，则可行产量上界可表示为：

$$
\overline{Q}=\min\left\{ \frac{\delta_0c+\phi}{2\kappa c},\frac{\delta_0-\underline{\delta}}{\kappa} \right\}
$$

引理得证。

&gt; **说明（P. S.）**
&gt; 建设初期的最低有效规模约束限制了“过小规模”的非可持续进入；
&gt; 成熟阶段的费用贬值技术下界约束限制了“过大规模”的非现实扩张。
&gt; 二者共同保证了企业生产决策位于经济上与技术上均可解释的区间内。

---

引理4证明

$$
\frac{d^2 \pi_2}{dQ^2}=2(\kappa c-b)
$$

当 $\kappa=\frac{b}{c}$ 时，二阶导数为0，利润函数为线性函数。

当 $\kappa&gt;\frac{b}{c}$ 时，二阶导数为正，利润函数为凸函数。

当 $0&lt;\kappa&lt;\frac{b}{c}$ 时，二阶导数为负，利润函数为凹函数，此时存在唯一最优点，且利润趋势符合实际情况。

---

## 三、命题（Propositions）

基于前述模型构建与引理，现提出四个核心命题，分别刻画企业在不同阶段的最优决策及其动态演化规律。

---

### 命题1：建设初期下的最优产量受规模门槛制约

在初期阶段，满足引理 1 的进入可行性条件下，建设初期企业的最优产量为：

$$
Q_1^*=\max\left\{\frac{a-c-\phi}{2b},\underline{Q}\right\}
$$

若计无约束下初期阶段的最优产量$Q_1^u=\frac{a-c-\phi}{2b}$，则初期最优产量可表述为

$$
Q_1^*=\max\left\{ Q_1^u,\underline{Q} \right\}
$$

其中$\underline{Q}$为固定成本内生决定的最低有效规模。在下文“参数合适”条件的讨论下，始终有$Q_1^u&gt;\underline{Q}$。即：

$$
Q_1^*=Q_1^u
$$

从数值角度，该条件等价于：

$$
\frac{(a-c-\phi)^2}{4b}\geqslant FC_0
$$

即在建设初期，当企业需要承担生产系统运行所需的固定成本$FC_0$，且单位生产费用与管理费用给定时，企业利润最大化问题存在一个内生的最低有效产量下界$\underline{Q}$。当且仅当$Q\geqslant \underline{Q}$，企业的生产收入才得以覆盖其固定成本，利润最大化问题才具有可行解。即在存在系统性固定成本的情况下，生产规模并非可以从任意小的水平逐步扩张。在产量低于最低有效规模时，企业即便面对正向需求，也无法通过调整产量实现可持续经营。

这一结果意味着，建设初期的关键决策并非“是否逐步进入市场”，而是“是否已经具备支撑最低运营规模的资源与能力”。例如，在半导体制造、新能源电池、航空维修或大型 SaaS 平台的早期阶段，企业必须首先完成生产线、质量体系或平台基础设施的建设。在未达到一定产量技术支持（$c$、$\phi$的条件）或市场条件（$a$、$b$的条件）之前，这些固定成本无法被有效摊薄，小规模试运行往往并不能带来真实的经营反馈。

---

### 命题2：成熟阶段下的最优产量受技术门槛制约

在成熟阶段，满足引理 3 中的技术下界$\delta(Q)\geqslant\underline{\delta}&gt;0$的约束下，企业在成熟阶段的最优产量为：

$$
Q_2^*=\min\left\{ \frac{a-\delta_0c-\phi}{2(b-\kappa c)},\overline{Q} \right\}
$$

若计无约束下成熟阶段的最优产量$Q_2^u=\frac{a-\delta_0c-\phi}{2(b-\kappa c)}$，则初期最优产量可表述为

$$
Q_1^*=\min\left\{ Q_2^u,\overline{Q} \right\}
$$

其中$\overline{Q}$为由费用贬值技术下界限制所导致的可行产量上界。若$\overline{Q}$的约束绑定，则企业最优决策表现为角点解。

由于客观技术条件导致的费用贬值技术下界，随着成熟期企业的单位生产费用随着自身生产经验的积累而逐渐降低时，企业的生产规模将随着最优产量的上升而逐渐扩大，直至无约束的最优产量抵达该可行产量上界。此时等价于企业为实现利润最大化的产量选择受到可行产量上界$\overline{Q}$的约束。

命题表明，即便在成熟阶段，规模扩张也并非无限可行。费用贬值虽然能够在一定范围内降低单位成本，但当其触及技术或组织效率的下界后，进一步扩张不再改善成本结构，反而使最优决策受限于可行性边界。这一结果揭示了一个常被忽视的事实：**规模优势本身具有上限**。成熟企业在扩张过程中所遭遇的瓶颈，往往并非需求不足，而是源于技术路径、流程复杂度或组织协调能力的约束。

在制造业中，这一现象体现在“规模越大，单位成本下降速度越慢”；在服务业或平台型企业中，则表现为用户规模扩大后，运营、合规和协调成本迅速上升。例如，大型物流平台在扩张至全国网络后，新增节点带来的效率提升明显弱于早期阶段，反而引入了更高的调度与管理复杂度。

---

### 命题3：费用贬值推动成熟后期最优产量提升

在成熟阶段，满足引理3中产量上界$\overline{Q}$的约束下，当且仅当下列条件成立时

$$
(i)\ a&lt;\frac{b}{\kappa}\delta_0+\frac{b\phi}{\kappa c}+c+\phi,\qquad (ii) \ a&lt;\frac{2b}{\kappa}\delta_0-\frac{2b}{\kappa}\underline{\delta}+c+\phi
$$

企业的最优产量严格大于建设初期的无约束最优产量：

$$
Q_2^*=\min\left\{ Q_2^u,\overline{Q} \right\} &gt;Q_1^*
$$

其中 $\overline{Q}$ 为由技术下界 $\underline{\delta}$ 决定的产量上界。

例如，取参数$ a=20,b=1,c=6,\phi=2,FC_0=16,\delta_0=0.6,\kappa=0.05,\underline{\delta}=0.25 $时，计算可得：建设初期的最优产量$Q_1^*=6$，而成熟阶段在费用贬值与技术上界约束下的最优产量为$Q_2^*=7$，有$Q_2^*&gt;Q_1^*$。

上述条件描述了费用贬值机制在成熟阶段“有效但受限”的作用区间。只有当市场容量与费用贬值强度处于一定范围内时，费用贬值才能在技术可行性约束下推动企业最优产量超越建设初期水平。换言之，规模扩张并非费用贬值的必然结果，而是依赖于合理的需求规模、管理复杂度与可行的客观技术水平。只有在内部与外部的条件支持费用贬值实现生产规模扩张时，方才迈入成熟阶段的企业才能以费用贬值为驱动力实现自身生产规模的扩大。当市场容量不足以支撑更大规模，或费用贬值强度尚未充分释放效率空间时，技术上界将提前生效，从而抑制进一步扩张。反之，在满足命题条件的参数区间内，费用贬值能够在不触及技术极限的情况下，推动企业进入更高的最优生产规模。

这一机制在具有明显学习效应但同时存在技术或组织上限的行业中尤为常见。例如，在制造业中，企业通过流程优化与规模化生产可以在一定阶段显著降低单位成本，从而合理扩大产能；但这种扩张往往只在需求规模与组织复杂度相对匹配时才是可持续的。类似地，在平台型企业中，用户规模的扩张能够在早期摊薄固定运营成本，但只有在市场容量与管理体系同步扩展的条件下，规模扩张才会持续带来净收益。

---

### 命题4：过程费用抑制最优产量，但不改变后期最优产量提升的趋势

过程费用 $\phi$ 的增加会降低企业在建设初期和成熟阶段的最优产量。然而，在合理的参数区间（满足引理1和引理 3）内，费用贬值所引致的扩张方向不变，即$Q_2^*&gt;Q_1^*$。该命题说明，尽管管理运营复杂度会抑制规模，但无法逆转由技术进步和效率提升（费用贬值）所驱动的长期扩张趋势。

![PRO4](/images/posts/PRO4.png)

上图描绘了在其余参数固定时，建设初期与成熟阶段最优产量随过程费用$\phi$的变化关系。可以看到，随着$\phi$上升，建设初期最优产量$Q_1^*$单调下降；成熟阶段最优产量在未触及技术上界前亦随$\phi$下降，而当技术上界约束绑定后，$Q_2^*$由可行边界约束并保持不变，即为图中所示情形。同时无论何种情形，始终有$Q_2^*&gt;Q_1^*$。

这一结果表明：**管理与运营复杂度会放缓扩张，但并不会改变企业在成熟阶段相对于建设初期具有更高最优规模这一基本趋势**。换言之，过程费用决定“扩张有多快、有多大”，而费用贬值推动扩张的发生条件（命题3）决定“是否值得扩张”。

在现实中，企业规模扩大往往伴随着管理层级增加、沟通成本上升与组织协调复杂化。例如，制造企业在扩大产能的同时，需要引入更多管理流程与质量控制体系；平台型企业在用户规模扩张后，也必须投入更多资源用于合规、风控与客户支持。这些过程费用无疑会抬高整体运营成本，抑制最优规模的进一步扩大。然而，大量实践表明，只要技术进步、流程优化或数字化转型持续降低单位生产或服务成本，企业在成熟阶段仍然倾向于维持高于早期阶段的运营规模。过程费用更多体现为“扩张摩擦”，而非逆转扩张趋势。

---

### 命题5：企业规模“持续自主决策”的规模扩张条件

若企业在成熟后期的费用贬值效应在技术约束范围内（$Q_2^u\leqslant\overline{Q}$），且满足命题3成立的条件下，企业决策产量从$Q_1^u$增加至$Q_2^u$。即生产规模在保持内点解下持续扩张。企业始终自我决策产量。

即$Q_2^u\leqslant\overline{Q}$成立时，始终有$Q_2^*&gt;Q_1^*$，且$Q_1^*=Q_1^u$，$Q_2^*=Q_2^u$。

### 命题6：企业规模“扩张至可行上界”的生产条件

若成熟后期企业的**理论**费用贬值效应超过技术边界时（$Q_2^u&gt;\overline{Q}$），此时现实技术门槛约束将作用，在满足命题3成立的条件下，企业产量从$Q_1^u$增加至$\overline{Q}$。即决策类型由内点解转变至技术上界约束的角点解。即企业的产量决策将从自我决策转变为技术与组织的受限下进行。

即在满足以下数值约束的情形下：

$$
\begin{cases}
a&lt;\frac{b}{\kappa}\delta_0+\frac{b\phi}{\kappa c}+c+\phi \\
a&lt;\frac{2b}{\kappa}\delta_0-\frac{2b}{\kappa}\underline{\delta}+c+\phi
\end{cases}
$$

始终有$Q_2^*&gt;Q_1^*$，且$Q_1^*=Q_1^u$，$Q_2^*=\overline{Q}$。

然而，若成熟阶段的技术上界约束较强，则此时成熟阶段的最优产量可能反而低于建设初期的最优产量。这一特殊情况揭示了“规模不经济”现象，即过度技术专业化可能导致成熟阶段的最优规模低于初期规模。常见于技术路径锁定或组织刚性的企业。下述命题给出该特殊情形的刻画。

---

### 命题7：成熟阶段的“规模不经济反转”现象

若成熟阶段的技术上界满足：

$$
\overline{Q} \leqslant Q_1^*
$$

则成熟阶段最优产量满足：

$$
Q_2^* \leqslant Q_1^*
$$

即企业在进入成熟阶段后，最优生产规模可能低于建设初期水平。

命题表明，成熟阶段并非必然伴随规模扩张。当技术路径锁定或组织复杂度上升导致技术上界偏低时，企业可能面临“规模反转”现象，即成熟阶段的最优规模低于初期规模。这一现象可解释部分企业在高度专业化或制度刚性增强后出现的收缩趋势。

---

## 四、命题证明（Proof of propositions）

### 命题1证明

初期阶段的利润函数为：

$$
\pi_1(Q)=p(Q)Q-C_1(Q)
=(a-c-\phi)Q-bQ^2-FC_0
$$

显然，$\pi_1(Q)$严格凹。忽略约束，对$\pi_1(Q)$求一阶条件：

$$
\frac{d\pi_1}{dQ}=a-c-\phi-2bQ=0
$$

解得无约束最优产量：

$$
Q_1^u=\frac{a-c-\phi}{2b}
$$

由引理2，实际产量受到最低有效规模$\underline{Q}$的约束，故初期阶段可行产量的区间应为：

$$
Q_1\geqslant \underline{Q}
$$

结合两种情况可得成熟阶段的最优产量统一表示为：

$$
Q_1^*=\max\left\{ Q_1^u,\underline{Q} \right\}
$$

又因为$Q_1^u&gt;\underline{Q}$成立，则有：

$$
Q_1^*=Q_1^u
$$

命题1得证。

---

### 命题2证明

成熟阶段的利润函数为：

$$
\pi_2(Q)=(\kappa c-b)Q^2+(a-\delta_0c-\phi)Q-FC_0
$$

显然，$\pi_2(Q)$严格凹。忽略约束，对$\pi_2(Q)$求一阶条件：

$$
\frac{d\pi_2}{dQ}
=a-\delta_0c-\phi-2(b-\kappa c)Q=0
$$

解得无约束最优产量

$$
Q_2^u=\frac{a-\delta_0c-\phi}{2(b-\kappa c)}
$$

由引理3，实际产量受到技术上界 $\overline{Q}$ 的约束，故成熟阶段可行产量的区间应为：

$$
0\leqslant Q_2 \leqslant \overline{Q}
$$

1. **内点解情形：**

    若$Q_2^u\leqslant\overline{Q}$，则无约束最优解位于可行集中，故最优解为内点解：

    $$
    Q_2^*=Q_2^u
    $$

2. **角点解情形：**

    若$Q_2^u&gt;\overline{Q}$，则利润函数在可行区间内单调递增至上界点，故最优解为角点解：

    $$
    Q_2^*=\overline{Q}
    $$

综上所述，可得成熟阶段的最优产量统一表示为：

$$
Q_2^*=\min\left\{ Q_2^u,\overline{Q} \right\}
$$

命题2得证。

---

### 命题3证明

由命题1，初期阶段企业的最优产量决策为：

$$
Q_1^*=\max\left\{ Q_1^u,\underline{Q} \right\}
$$

由命题2，成熟阶段企业的最优产量决策为：

$$
Q_2^*=\min\left\{ Q_2^u, \overline{Q} \right\}
$$

1. **无约束下最优解的比较：**

    若$Q_2^*$为内点解（不受约束），则$Q_2^*=Q_2^u$。此时可令$\Delta Q=Q_2^u-Q_1^u$，即：

    $$
    \Delta Q=\frac{a-\delta_0c-\phi}{2(b-\kappa c)}-\frac{a-c-\phi}{2b}=\frac{c(\kappa(a-c-\phi)+b(1-\delta_0))}{2b(b-\kappa c)}
    $$

    考虑引理1中的结论，$\pi_1(Q)$在$Q&gt;0$中至多存在两个零点，且$\pi_1(0)&lt;0$，易得其对称轴位于y轴右侧，即$Q_1^u&gt;0$。即$a-c-\phi&gt;0$。又因为$1-\delta_0&gt;0$，可知$\Delta_1 Q_2&gt;0$在合理参数区间内恒成立，即$Q_2^u&gt;Q_1^u$。

2. **技术约束绑定下可行最优解的比较：**

    若$Q_2^*$为角点解（约束绑定），则$Q_2^*=\overline{Q}$。为方便描述，令$\overline{Q}=\min\left\{ \overline{Q^1},\overline{Q^2} \right\}$，其中：

    $$
    \overline{Q^1}=\frac{\delta_0 c+\phi}{2\kappa c}, \qquad
    \overline{Q^2}=\frac{\delta_0-\underline{\delta}}{\kappa}
    $$

    当且仅当$\min\left\{ \overline{Q^1},\overline{Q^2} \right\}&gt;Q_1^u$成立，$\overline{Q}&gt;Q_1^u$则成立。

    1. 证明$\overline{Q^1}&gt;Q_1^u$：

        即证：

        $$
        \frac{\delta_0 c+\phi}{2\kappa c}&gt;\frac{a-c-\phi}{2b}
        $$

        当且仅当：

        $$
        a&lt;\frac{b}{\kappa}\delta_0+\frac{b\phi}{\kappa c}+c+\phi
        $$

        该不等式成立。

    2. 证明$\overline{Q^2}&gt;Q_1^u$：

        即证：

        $$
        \frac{\delta_0-\underline{\delta}}{\kappa}&gt;\frac{a-c-\phi}{2b}
        $$

        当且仅当：

        $$
        a&lt;\frac{2b}{\kappa}\delta_0-\frac{2b}{\kappa}\underline{\delta}+c+\phi
        $$

        该不等式成立。

综上所述，当且仅当$a&lt;\frac{b}{\kappa}\delta_0+\frac{b\phi}{\kappa c}+c+\phi$与$a&lt;\frac{2b}{\kappa}\delta_0-\frac{2b}{\kappa}\underline{\delta}+c+\phi$共同成立，有$Q_2^*&gt;Q_1^u$。

又由引理1，可知$x=Q_1^u$为$y=\pi_1(x)$的对称轴，$x=\underline{Q}$为$y=\pi_1(x)$的左零点，故在引理成立的情况下，恒有$Q_1^u&gt;\underline{Q}$。即当且仅当$a&lt;\frac{b}{\kappa}\delta_0+\frac{b\phi}{\kappa c}+c+\phi$与$a&lt;\frac{2b}{\kappa}\delta_0-\frac{2b}{\kappa}\underline{\delta}+c+\phi$共同成立，有$Q_2^*&gt;Q_1^*$。

命题3得证。

---

### 命题4证明

建设初期与成熟后期最优产量分别为：

$$
Q_1^u(\phi)=\frac{a-c-\phi}{2b},\qquad
Q_2^*(\phi)=\frac{a-\delta_0c-\phi}{2(b-\kappa c)}
$$

对 $\phi$ 求偏导：

$$
\frac{\partial Q_1^u}{\partial\phi}&lt;0,\qquad
\frac{\partial Q_2^*}{\partial\phi}&lt;0
$$

因此过程费用 $\phi$ 对两阶段产量均有抑制作用，说明过程费用降低最优产量水平。

现进一步比较两阶段差异：

1. 若$Q_1^*$为内点解（不受约束），则$Q_1^*=Q_1^u(\phi)$。此时可令：

$$
\Delta_1 Q(\phi)=Q_2^*(\phi)-Q_1^u(\phi)=\frac{c(\kappa(a-c-\phi)+b(1-\delta_0))}{2b(b-\kappa c)}
$$

​ 考虑引理1中的结论，$\pi_1(Q)$在$Q&gt;0$中至多存在两个零点，且$\pi_1(0)&lt;0$，易得其对称轴位于y轴右侧，即$Q_1^u&gt;0$。即$a-c-\phi&gt;0$。又因为$1-\delta_0&gt;0$，可知$\Delta_1 Q(\phi)&gt;0$在合理参数区间内恒成立，即$Q_2^*(\phi)&gt;Q_1^u(\phi)$。

2. 若$Q_1^*$为角点解（约束绑定），则$Q_1^*=\underline{Q}$。此时可令：

$$
\Delta_2 Q(\phi)=Q_2^*(\phi)-\underline{Q}
$$

​ 又由引理1，可知$x=Q_1^u$为$y=\pi_1(x)$的对称轴，$x=\underline{Q}$为$y=\pi_1(x)$的左零点，故在引理成立的情况下，恒有$Q_1^u&gt;\underline{Q}$。进而，$\Delta_2 Q(\phi)=Q_2^*(\phi)-\underline{Q}&gt;Q_2^*(\phi)-Q_1^u(\phi)=\Delta_1 Q(\phi)&gt;0$。可知$\Delta_2 Q(\phi)&gt;0$在合理参数区间内恒成立，即$Q_2^*(\phi)&gt;\underline{Q}$。

因此，在合理参数区间内 $Q_2^*(\phi)&gt;Q_1^*(\phi)$ 恒成立，从而方向性结论（命题2）不变。
命题4得证。

---

### 命题5、6证明

由命题1，有$Q_1^*=Q_1^u&gt;\underline{Q}$。

在成熟阶段，根据命题2，企业的最优产量为：

$$
Q_2^*=\min\left\{ Q_2^u,\overline{Q} \right\}
$$

由命题3的证明可知：

$$
\Delta Q=Q_2^u-Q_1^u=\frac{c(\kappa(a-c-\phi)+b(1-\delta_0))}{2b(b-\kappa c)}&gt;0
$$

因此，在命题3的参数区间内恒有$Q_2^u&gt;Q_1^u$。

1. 当$Q_2^u\leqslant\overline{Q}$时：

    此时$Q_2^*=Q_2^u$，企业保持内点解特性，且：

    $$
    Q_2^*=Q_2^u&gt;Q_1^u=Q_1^*
    $$

    企业产量从建设初期的$Q_1^u$连续增加至成熟阶段的$Q_2^u$，决策类型保持为内点解。

2. 当$Q_2^u&gt;\overline{Q}$时：

    此时$Q_2^*=\overline{Q}$。若$\overline{Q}&gt;Q_1^u$（通常成立，除非技术上界异常低），则：

    $$
    Q_2^*=\overline{Q}&gt;Q_1^u=Q_1^*
    $$

    由命题3的证明可知，$\overline{Q}&gt;Q_1^u$成立的条件即为命题3的参数区间：

    $$
    \begin{cases}
    a&lt;\frac{b}{\kappa}\delta_0+\frac{b\phi}{\kappa c}+c+\phi \\
    a&lt;\frac{2b}{\kappa}\delta_0-\frac{2b}{\kappa}\underline{\delta}+c+\phi
    \end{cases}
    $$

    即在满足命题3成立的前提下，企业产量增加，但决策类型由内点解转变至技术上界约束的角点解。

特别地，若技术上界异常低导致$\overline{Q}\leqslant Q_1^u$，则$Q_2^*\leqslant Q_1^*$，这反映了企业从建设初期的自由决策状态，进入成熟阶段后反而受限于技术上界，产量被迫下降。该情况已在命题7中得到进一步说明。

命题6得证。

---

### 命题7证明

由命题2：

$$
Q_2^*=\min\{Q_2^u,\overline{Q}\}
$$

若 $\overline{Q}\leqslant Q_1^*$，则有：

$$
Q_2^*\le \overline{Q}\le Q_1
$$

命题7得证。

---

###

## 五、评估运算（Managerial Estimation）

### 一、费用贬值系数的简单估计

在模型应用中，一个现实问题在于，刻画费用贬值效应的关键参数——初始费用贬值强度$\delta_0$、费用贬值强化系数$\kappa$与费用贬值技术下界$\underline{\delta}$在现实企业中通常难以直接得到。为方便管理者应用模型，下面给出一套基于企业内部费用贬值各参数的简单估计方法。

#### 1.1 初始费用贬值强度$\delta_0$的简单估计

参数$\delta_0$描述了企业从建设初期进入成熟阶段后，单位成本的平均折减比例，其经济含义可理解为生产流程稳定化、组织改进所带来的阶段性效率提升。

在实践中，$\delta_0$可通过同一产品在不同生产阶段的单位成本对比进行估计。具体而言，设

$\bar c^{(1)}$表示建设初期（试产期或爬坡期）的平均单位成本，

$\bar c^{(2)}$表示成熟阶段（稳定运行期）的平均单位成本，

则$\delta_0$的估计可表示为：

$$
\hat{\delta_0}=\frac{\bar c^{(2)}}{\bar c^{(1)}}
$$

该估计方法仅依赖企业内部会计核算数据，不需要额外的计量识别或外部样本支持。一般而言，$0&lt;\hat{\delta}_0 \ll 1$表明企业在进入成熟阶段后存在显著的费用折减效应；而当$\hat{\delta_0} \rightarrow 1$时，则意味着成熟阶段的单位费用改善较为有限。

#### 1.2 费用贬值强化系数$\kappa$的简单估计

参数$\kappa$衡量的是成熟阶段中，因生产规模扩张的经验积累所带来的边际费用折减速度，其反映了规模经济、流程优化或自动化水平的强弱。相较于$\delta_0$，$\kappa$属于**动态参数**，需要利用成熟阶段内产量与成本的变动关系进行估计。由于费用贬值仅影响成熟阶段成本中生产费用部分的变化，故我们可以在企业对于单位生产费用的记录上应用一元线性回归以进行估计。

在模型设定下，成熟阶段的生产费用可写为：

$$
c(Q)=\delta_0 c-\kappa c Q
$$

将其标准化后，有：

$$
\frac{c(Q)}{c}=\delta_0-\kappa Q
$$

因此，企业管理者可以利用成熟阶段生产费用关于不同产量的数据，对如下线性关系进行回归：

$$
\frac{c_i}{c}=\alpha-\beta Q_i+\varepsilon_i
$$

其中回归系数$\hat{\beta}$即为$\kappa$的估计值，而截距项$\hat{\alpha}$可作为对$\delta_0$估计的检验。

#### 1.3 费用贬值技术下界$\underline{\delta}$的简单估计

除初始费用贬值强度与费用贬值强化系数外，模型还引入了费用贬值的技术下界参数$\underline{\delta}$，用于刻画在既定技术和组织条件下单位变动成本所能达到的最低相对水平。该参数反映了工艺路线、设备条件及管理制度所共同决定的不可再压缩成本部分。

在实践中，$\underline{\delta}$可通过历史最低单位成本法进行近似测量。首先，企业可基于成熟阶段的历史数据，识别在正常生产条件下观测到的最低单位变动成本，并将其标准化为

$$
\hat{\underline{\delta}}=\frac{\underline{c}}{c}
$$

其中$\underline{c}$表示成熟阶段的最低稳定单位变动成本。

其次，在工程约束明确的行业中，$\underline{\delta}$亦可由工程部门给出的理论最低投入消耗进行估算，如单位产品的最低能耗或最小工时要求。

需要强调的是，$\underline{\delta}$并非企业决策变量，而是由技术可行性所决定的外生约束参数。至此，所有费用贬值相关参数均可通过企业内部成本数据或工程约束进行校准，从而避免了对不可观测结构参数的依赖。

#### 1.4 费用贬值各参数的经验估计法

在数据条件受限、难以进行正式估计的情况下，企业亦可采用基于行业经验的参数区间进行校准。例如，制造业企业的$\delta_0$通常位于$0.6\text{--}0.85$之间，而服务业或数字化程度较高的行业往往具有更高的$\delta_0$。$\kappa$的合理取值一般介于$0.01\text{--}0.10$，具体取决于自动化水平与规模经济强度。

&gt; 在经验学习曲线的实证研究中，许多行业的成本随累计产量的增加呈现下降趋势，即每累计产量翻倍成本会下降一定比例（典型下降 10%–30%）。这一现象表明，在多数制造业中存在显著的规模与经验效应。据此（并结合制造业行业的实际观测与经验工程应用），$\delta_0$可合理校准在 **0.6–0.85** 范围内，而衡量边际折减速率的$\kappa$通常较低，可设定在 **0.01–0.10** 的经验区间。这些区间作为参数校准的经验参考，有助于数值模拟设定具现实意义的参数值。
&gt;
&gt; 来源：https://en.wikipedia.org/wiki/Experience_curve_effect

在缺乏内部长期数据的情况下，企业可参考行业内最佳实践企业的稳定成本水平作为技术下界$\underline{\delta}$的近似。

$$
\hat{\underline{\delta}}=\frac{\text{行业最低稳定单位生产费用}}{c}
$$

---

## 六、总结与启示（Summary &amp; Inspiration）

上述命题从成本结构变化的视角出发，系统分析了企业在不同发展阶段所面临的规模约束及其最优生产决策。结论表明：企业的最优规模并非仅由外生的市场条件决定，而是可能随着企业自身的生产阶段变化而发生结构性转变。进一步地，这种转变并非源于外生冲击，而是成本结构内生演化的直接结果。

进一步的分析表明，费用贬值机制在存在下界约束与过程费用的情况下，并不必然导致无限扩张。效率提升机制并不等同于规模扩张的持续正反馈。当企业在扩张过程中频繁遭遇成本上升、管理失效或组织僵化等问题时，这未必意味着执行能力不足，而可能表明企业已接近其最优规模区间。在这一阶段，调整战略重心比单纯扩大规模更为理性。

综合上述命题，本文揭示了一种由成本结构内生演化所驱动的规模扩张趋势：企业在建设初期主要受最低规模约束，而在成熟阶段则可能转而受技术上界约束支配。最优生产决策的性质随之发生变化，从“必须达到一定规模才能生存”转向“必须避免超过效率边界”。总而言之，企业在不同发展阶段所面临的核心约束并不相同，因此不存在一套可以贯穿企业整个生命周期的统一规模战略。因此，成功的企业管理并不在于始终追求规模扩张，而在于能够及时识别阶段性约束的变化，并相应调整战略重点。</content:encoded></item><item><title>《Linux操作系统》课程练习题2：基本概念</title><link>https://caiyan12.github.io/posts/20260318161300/</link><guid isPermaLink="true">https://caiyan12.github.io/posts/20260318161300/</guid><description>Linux操作系统基本概念习题</description><pubDate>Wed, 18 Mar 2026 00:00:00 GMT</pubDate><content:encoded>## 一、填空题

1．GNU的含义是**GNU&apos;s Not Unix!**。

2．Linux内核一般有3个主要部分：**内核**、**Shell**、**文件系统**。

3．目前被称为纯种的UNIX的就是**System V**及**BSD**这两套操作系统。

4．Linux是基于**GPL**的软件模式发布的，它是GNU项目制定的通用公共许可证，英文是**General Public License**。

5．斯托尔曼成立了自由软件基金会，它的英文是**FSF（Free Software Foundation）**。

6．POSIX是**Portable Operating System Interface**的缩写，重点在规范核心与应用程序之间的接口，这是由美国电气与电子工程师学会（Institute of Electrical and Electronics Engineers，IEEE）发布的一项标准。

7．当前的Linux常见的应用可分为**桌面应用**、**服务器应用**两个方面。

8．Linux的版本分为**内核版本**、**发行版本**两种。

9．安装Linux最少需要两个分区，分别是**根分区 (/)**、**交换分区 (swap)**。

10．Linux默认的系统管理员账号是**root**。

11．UEFI是**Unified Extensible Firmware Interface**的缩写，中文含义是**统一可扩展固件接口**。

12．NVMe是**Non-Volatile Memory express**的缩写，中文含义是**非易失性内存主机控制器接口规范**。

13．非易失性存储器标准硬盘是一种固态硬盘。`/dev/nvme0n1`表示第**1**个NVMe硬盘，`/dev/nvme0n2`表示第**2**个NVMe硬盘，而`/dev/nvme0n1p1`表示**第1个硬盘的第1个分区**，`/dev/nvme0n1p5`表示**第1个硬盘的第5个分区**，以此类推。

14．传统的基本输入输出系统（Basic Input Output System，BIOS）启动由于**MBR 分区表**的限制，默认是无法引导超过**2**TB以上的硬盘的。

15．如果选择的固件类型为“UEFI”，则Linux操作系统至少必须建立4个分区：**`/boot/efi`**、**`/boot`**、**`/`** (根分区)、**`swap`** (交换分区)。

## 二、选择题

1．Linux最早是由计算机爱好者（B）开发的。

A．Richard Petersen&lt;br&gt;
B．Linus Torvalds&lt;br&gt;
C．Rob Pick&lt;br&gt;
D．Linux Sarwar

**B**（Linus Torvalds 是 Linux 之父）

2．下列中（C）是自由软件。

A．Windows 10&lt;br&gt;
B．UNIX&lt;br&gt;
C．Linux&lt;br&gt;
D．Windows Server 2016

**C**（Linux 是典型的自由软件，其他为商业或闭源软件）

3．下列中（B）不是Linux的特点。

A．多任务&lt;br&gt;
B．单用户&lt;br&gt;
C．设备独立性&lt;br&gt;
D．开放性

**B**（Linux 是多用户、多任务系统）

4．Linux的内核版本2.3.20是（A）的版本。

A．不稳定&lt;br&gt;
B．稳定&lt;br&gt;
C．第三次修订&lt;br&gt;
D．第二次修订

**A**（旧版内核规则：次版本号为奇数表示开发版/不稳定版，偶数表示稳定版）

5．Linux安装过程中的硬盘分区工具是（D）。

A．PQmagic&lt;br&gt;
B．FDISK&lt;br&gt;
C．FIPS&lt;br&gt;
D．Disk Druid

**D**（Disk Druid 是 Red Hat 系列安装程序中常见的图形化分区工具）

6．Linux的根分区可以设置成（C）。

A．FATl6&lt;br&gt;
B．FAT32&lt;br&gt;
C．xfs&lt;br&gt;
D．NTFS

**C**（xfs 是 Linux 常用的日志文件系统，其余为 Windows 文件系统）</content:encoded></item><item><title>《Linux操作系统》课程练习题3：基本操作</title><link>https://caiyan12.github.io/posts/20260318161900/</link><guid isPermaLink="true">https://caiyan12.github.io/posts/20260318161900/</guid><description>Linux操作系统基本操作习题</description><pubDate>Wed, 18 Mar 2026 00:00:00 GMT</pubDate><content:encoded>## 一、填空题

1．在Linux操作系统中，命令**区分**大小写。在命令行中，可以使用**Tab**键来自动补齐命令。

2．如果要在一个命令行上输入和执行多条命令，可以使用 **;（分号）** 来分隔命令。

3．断开一个长命令行，可以使用**\（反斜杠）**，以将一个较长的命令分成多行表达，增强命令的可读性。执行后，shell自动显示提示符**&gt;**，表示正在输入一个长命令。

4．要使程序以后台方式执行，只需在要执行的命令后跟上一个**&amp;**符号。

## 二、选择题

1．（C）命令能用来查找文件TESTFILE中包含4个字符的行。

A．`grep &apos;???? &apos; TESTFILE`&lt;br&gt;
B．`grep &apos;…. &apos; TESTFILE`&lt;br&gt;
C．`grep &apos;^????$&apos; TESTFILE`&lt;br&gt;
D．`grep &apos;^….$ &apos; TESTFILE`

`^????$` 表示**整行恰好4个字符**。

2．（B）命令用来显示/home及其子目录下的文件名。

A．`ls -a /home`&lt;br&gt;
B．`ls -R /home`&lt;br&gt;
C．`ls -l /home`&lt;br&gt;
D．`ls -d /home`

`ls -R` 表示递归列出所有子目录

3．如果忘记了ls命令的用法，可以采用（C）命令获得帮助。

A．`？ls`&lt;br&gt;
B．`help ls`&lt;br&gt;
C．`man ls`&lt;br&gt;
D．`get ls`

`man ls` 是标准帮助命令

4．查看系统当中所有进程的命令是（D）。

A．`ps all`&lt;br&gt;
B．`ps aix`&lt;br&gt;
C．`ps auf`&lt;br&gt;
D．`ps aux`

`ps aux` 查看所有进程（最常用）

5．Linux中有多个查看文件的命令，如果希望在查看文件内容过程中通过上下移动光标来查看文件内容，则下列符合要求的命令是（C）。

A．`cat`&lt;br&gt;
B．`more`&lt;br&gt;
C．`less`&lt;br&gt;
D. `head`

`less` 支持上下滚动（比more强）

6．（D）命令可以了解当前目录下还有多大空间。

A．`df`&lt;br&gt;
B．`du /`&lt;br&gt;
C．`du .`&lt;br&gt;
D．`df .`

`df .` 查看当前目录所在分区剩余空间

7．假如需要找出 /etc/my.conf 文件属于哪个包，可以执行（C）命令。

A．`rpm -q /etc/my.conf`&lt;br&gt;
B．`rpm -requires /etc/my.conf`&lt;br&gt;
C．`rpm -qf /etc/my.conf`&lt;br&gt;
D．`rpm -q | grep /etc/my.conf`

`rpm -qf 文件` → 查询文件属于哪个包

8．在应用程序启动时，（B）命令用于设置进程的优先级。

A．`priority`&lt;br&gt;
B．`nice`&lt;br&gt;
C．`top`&lt;br&gt;
D．`setpri`

`nice` 用于启动时设置优先级

9．（C）命令可以把f1.txt复制为f2.txt。

A．`cp f1.txt | f2.txt`&lt;br&gt;
B．`cat f1.txt | f2.txt`&lt;br&gt;
C．`cat f1.txt &gt; f2.txt`&lt;br&gt;
D．`copy f1.txt | f2.txt`

`cat f1.txt &gt; f2.txt` 重定向复制

10．使用（B）命令可以查看Linux的启动信息。

A．`mesg –d`&lt;br&gt;
B．`dmesg`&lt;br&gt;
C．`cat /etc/mesg`&lt;br&gt;
D．`cat /var/mesg`

`dmesg` 查看系统启动日志

## 三、简答题

### 1．more和less命令有何区别？

**共同点：** 都是用于分页查看文件内容。

**区别：**

| 特性     | more      | less    |
| -------- | --------- | ------- |
| 向前翻页 | 支持      | 支持    |
| 向后翻页 | ❌ 不支持 | ✅ 支持 |
| 搜索功能 | 有限      | 更强    |
| 使用体验 | 较简单    | 更灵活  |

👉 总结：**less 是 more 的增强版**

### 2．Linux操作系统下对磁盘的命名原则是什么？

Linux采用**统一设备文件命名规则**，一般在 `/dev` 目录下：

#### （1）基本格式

```
/dev/设备名
```

#### （2）常见磁盘命名

**① SATA / SCSI 磁盘**

```
/dev/sda      → 第一块硬盘
/dev/sdb      → 第二块硬盘
```

**② 分区表示**

```
/dev/sda1     → 第一块硬盘第1个分区
/dev/sda2     → 第2个分区
```

#### （3）NVMe 固态硬盘

```
/dev/nvme0n1       → 第一块NVMe盘
/dev/nvme0n1p1     → 第1分区
```

#### （4）命名规律总结

- 磁盘：`sd[a-z]`
- 分区：`数字编号`
- NVMe：`nvmeXnYpZ`

👉 本质原则：**按设备类型 + 编号 + 分区号命名**</content:encoded></item><item><title>《会计学》基础复习试卷例</title><link>https://caiyan12.github.io/posts/20251226160000/</link><guid isPermaLink="true">https://caiyan12.github.io/posts/20251226160000/</guid><description>《会计学》是一门强调记忆的科目，本卷可检测知识点的掌握程度。附有答案。</description><pubDate>Fri, 26 Dec 2025 00:00:00 GMT</pubDate><content:encoded>_该试卷为三年前的期末试卷，体系与现在可能有所不同，请仅用于检测知识_

## 一、判断题（每题1分，共10分）

1.会计只能以货币作为计量单位 （×）

2.会计的本质是一项管理活动 ( √ )

3.财务会计和管理会计的特点不同·但其目标是一致的 （×）

4.资产是指由企业拥有或者控的、预期会给企业带来经济利益的实物资源．（×）

5.企业济利益的总流入．统称为收入 （×）

6.一般情况下，对会计要素的计量应采用历史成本计量属性 （√）

7.何经济业务的发生，都会引起会计要素的增减变动，并导致企业资产总额的增加或减少。（×）

8.复式记账法是以会计等式为依据，对任何一笔经济业务，都要在两个或两个以上的账户中以相等的金额进行相互关联的登记的一种记账方法。（√）

9.在借贷记账法下，借表示增加，贷表示减少 （×）

10.“材料采购”账户按经济内容分，既属于资产类账户，又属于成本类账户（√）

## 二、单项选择题（每题1.5分，共15分）

**1.** **现代会计产生的标志（D）**

A. 会计专职人员的出现&lt;br&gt;
B. 会计机构的产生&lt;br&gt;
C. 复式记账法的诞生&lt;br&gt;
D. 管理会计的出现

**2.** **确定会计核算空间范围的基本前提是 （B）**

A. 持续经营&lt;br&gt;
B. 会计主体&lt;br&gt;
C. 货币计量&lt;br&gt;
D. 会计分期

**3** **．将以融资租赁方式租入资产视为企业的资产确认，体现会计信息质量要求的**（实质重于形式）

**4.** **下列会计报表中，反映企业特定日期财务状况的会计报表是 （C）**

A. 利润表&lt;br&gt;
B. 所有者权益变动表&lt;br&gt;
C. 资产负债表&lt;br&gt;
D. 现金流量表

**5.** **比较收入和利润，表述正确的有 （D）**

A 收入和利润都一定会使利润增加&lt;br&gt;
B 收入会导致经济利益的流入，利得不一定会导致经济利益的流入&lt;br&gt;
C 收入会导致所有者权益增加，利得一定会导致所有者权益增加&lt;br&gt;
D 收入源于日常活动，利得源于非日常活动

**6.** **企业资产总额为15000，负债总额为3000，则企业的权益总额为 （A）**

A. 15000&lt;br&gt;
B. 30000&lt;br&gt;
C. 12000&lt;br&gt;
D. 18000

**7.** **下列各项，不属于负债的是 （B）**

A. 应交税费&lt;br&gt;
B. 预付账款&lt;br&gt;
C. 应付利润&lt;br&gt;
D. 长期借款

**8** **复式记账的利润依据是 (C)**

A. 会计假设&lt;br&gt;
B. 会计原则&lt;br&gt;
C. 会计等式&lt;br&gt;
D. 会计分录

**9.** **某账户本期初余额为6000元，本期期末余额为9000元，本期增加额为10000元，则本期减少额为 6000+10000-X=9000 （D）**

A. 5000&lt;br&gt;
B. 3000&lt;br&gt;
C. 13000&lt;br&gt;
D. 7000

**10.** **一项负债增加，不可能引起 （D）**

A. 另一项负债的减少&lt;br&gt;
B. 一项资产的增加&lt;br&gt;
C. 一项所有者权益的减少&lt;br&gt;
D. 一项资产的减少

## 三、多项选择题

**1.** **会计最基本的职能包括 （ABC）**

A、反映&lt;br&gt;
B、监督&lt;br&gt;
C、参与决策&lt;br&gt;
D、编制报表

**2.** **位已经发生或完成的经济活动 （ABCD）**

A、确认&lt;br&gt;
B、计量&lt;br&gt;
C、记录&lt;br&gt;
D、报告

**3.** **动态会计要素包括 （ABC）**

A、收入&lt;br&gt;
B、费用&lt;br&gt;
C、利润&lt;br&gt;
D、资产&lt;br&gt;
E、负债&lt;br&gt;
F、所有者权益

**4.** **下列各项中，不符合资产会计要素定义的有 （AD）**

A、计划购买的生产设备&lt;br&gt;
B、预付款项&lt;br&gt;
C、在途物资&lt;br&gt;
D、预收款项

**5.** **所有者权益包括 （ABD）**

A、实收资本&lt;br&gt;
B、资本公积&lt;br&gt;
C、未分配利润&lt;br&gt;
D、盈余公积

**6.** **下列各项属于收入的是 （BCD）**

A、处置无形资产的净收益&lt;br&gt;
B、出租机器设备取得的收益&lt;br&gt;
C、销售商品所得收入&lt;br&gt;
D、提供劳务所得的收入

**7.** **会计分录的三个要素包括 （ABC）**

A、账户名称&lt;br&gt;
B、金额&lt;br&gt;
C、借贷方向&lt;br&gt;
D、业务内容

**8.** **下列账户，借方登记增加额的有 （AD）**

A、资产类&lt;br&gt;
B、负债类&lt;br&gt;
C、成本类&lt;br&gt;
D、费用类

**9.** **下列各项经济业务中，会引起资产总额变化的有 （BCD）**

A、收到客户以前所欠的贷款&lt;br&gt;
B、从银行取得借款&lt;br&gt;
C、开出支票支付欠款&lt;br&gt;
D、收到投资人收入的货币资金

**10.** **下列错误，不能通过试算平衡查找的有 （ABC）**

A、某项经济业务未记账&lt;br&gt;
B、某项经济业务重复记账&lt;br&gt;
C、应借应贷账户中，借贷方向颠倒&lt;br&gt;
D、应借应贷账户中，借贷金额不相等

## 四、会计实务

### （一）编制会计分录

**1.** **企业收到投资者投入企业的资本200000元，存入银行**

```
借：银行存款         200000
    贷：实收资本     200000
```

**2.** **企业购入原材料3000元，款项尚未支付**

```
借：原材料             3000
    贷：应付帐款          3000
```

**3.** **企业将80000元存款付给投资人，减少其投入资本**

```
借：实收资本              80000
    贷：银行存款         80000
```

**4.** **企业将盈余公积60000元转增企业资本金**

```
借：盈余公积              60000
    贷：实收资本         60000
```

**5.** **企业回应收款3600元，其中600元现金，其余为存款**

```
借：银行存款  3000
    库存现金 600
    贷：应收账款  3600
```

**6.** **企业购入设备一件，买价为48000，企业用银行存款40000元支付贷款。其余8000元暂欠**

```
借：固定资产 48000
   贷：银行存款  40000
      应付账款 8000
```

**7.** **A公司接受B公司追加投入1000000元，换取大地公司所有者权益5%，当时A公司的所有者权益合计为1000万。作为投资，款项已入银行。**

```
借：银行存款 1000000
   贷：实收资本 100000000*5%=500000
      资本公积 500000
```

**8.** **A公司从银行去的短期借款80000元，期限为三个月，年利率6%，利息按极度结算，款项已存入银行。**

```
借：银行存款 80000
   贷：短期借款 80000
```

**9.** **每月计提上述短期借款利息**

```
借：财务费用 8000*6%/12=400
    贷：应付利息  400
```

**10.** **A公司购入需要安装的设备一台，买家为20000元，支付增值税3400元，支付其他费用2600元，全部以银行存款支付。**

```
在建工程  20000+2600=22600
    应交税费--应交增值税（进项税额）3400
    贷：银行存款 26000
```

**11.** **A公司安装上述设备，共支付安装费用4000，以现金支付。**

```
借：在建工程  4000
   贷：库存现金 4000
```

**12.** **上述设备安装完毕，经验收合格，交付使用。**

```
借：固定资产
   贷：在建工程 22600+4000=26600
```

**13.** _**此题缺失**_

**14.** **A公司以银行存款支付上述购入甲材料的外地运杂费1500（不考虑7%的增值税） 装卸搬运费800元**

```
借：物资采购--甲材料 1500+800=2300
    贷：银行存款  2300
```

**15.** **上述甲材料已经验收合格入库，结转材料的实际成本**

```
借：原材料--甲材料
   贷：物资采购
```

## 五、试算平衡表

各账户期初余额：

1. 库存现金 300元
2. 银行存款 200000
3. 原材料 4700
4. 固定资产 160000
5. 生产成本 15000
6. 短期借款 10000
7. 应付账款 50000
8. 实收资本 320000

**业务综合题1.收到投资者投入的货币投资200000**

```
借：银行存款            200000
   贷：实收资本                     200000
```

**1.** **购入不需要安装的设备一台 40000**

```
借：固定资产          40000
   贷：银行存款                 40000
```

**2.** **购入材料一批 买价和运费共15000 货款未付**

```
借：原材料          15000
   贷：应付账款              15000
```

**3.** **从银行提取现金2000**

```
借：库存现金       2000
   贷：银行存款            2000
```

**4.** **借入短期借款20000 已存入银行**

```
借：银行存款         20000
   贷：短期借款                20000
```

**5.** **用银行存款35000元偿还应付账款**

```
借：应付账款          35000
   贷：银行存款                 35000
```

**6.** **生产产品用材料一批 12000**

```
借：生产成本       12000
   贷：原材料                 12000
```

**7.** **用银行存款还短期借款 30000**

```
借：短期借款        30000
   贷：银行存款               30000
```

&lt;table class=&quot;trial-balance&quot;&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th rowspan=&quot;2&quot;&gt;账户&lt;/th&gt;
			&lt;th colspan=&quot;2&quot;&gt;期初余额&lt;/th&gt;
			&lt;th colspan=&quot;2&quot;&gt;期中发生额&lt;/th&gt;
			&lt;th colspan=&quot;2&quot;&gt;期末余额&lt;/th&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;th&gt;借方&lt;/th&gt;
			&lt;th&gt;贷方&lt;/th&gt;
			&lt;th&gt;借方&lt;/th&gt;
			&lt;th&gt;贷方&lt;/th&gt;
			&lt;th&gt;借方&lt;/th&gt;
			&lt;th&gt;贷方&lt;/th&gt;
		&lt;/tr&gt;
	&lt;/thead&gt;
	&lt;tbody&gt;
		&lt;tr&gt;&lt;td&gt;库存现金&lt;/td&gt;&lt;td&gt;300&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;2000&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;2300&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
		&lt;tr&gt;&lt;td&gt;银行存款&lt;/td&gt;&lt;td&gt;200000&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;113000&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;313000&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
		&lt;tr&gt;&lt;td&gt;原材料&lt;/td&gt;&lt;td&gt;4700&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;3000&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;7700&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
		&lt;tr&gt;&lt;td&gt;固定资产&lt;/td&gt;&lt;td&gt;160000&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;40000&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;200000&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
		&lt;tr&gt;&lt;td&gt;生产成本&lt;/td&gt;&lt;td&gt;15000&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;12000&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;27000&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
		&lt;tr&gt;&lt;td&gt;短期借款&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;10000&lt;/td&gt;&lt;td&gt;-10000&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
		&lt;tr&gt;&lt;td&gt;应付账款&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;50000&lt;/td&gt;&lt;td&gt;-20000&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;30000&lt;/td&gt;&lt;/tr&gt;
		&lt;tr&gt;&lt;td&gt;实收资本&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;320000&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;200000&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;520000&lt;/td&gt;&lt;/tr&gt;
		&lt;tr class=&quot;trial-balance-total&quot;&gt;&lt;td&gt;合计&lt;/td&gt;&lt;td&gt;380000&lt;/td&gt;&lt;td&gt;380000&lt;/td&gt;&lt;td&gt;170000&lt;/td&gt;&lt;td&gt;170000&lt;/td&gt;&lt;td&gt;550000&lt;/td&gt;&lt;td&gt;550000&lt;/td&gt;&lt;/tr&gt;
	&lt;/tbody&gt;
&lt;/table&gt;</content:encoded></item></channel></rss>