feat: site全面更新 + CONTRIBUTING/CHANGELOG完善，准备v0.1.13迭代

site/index.html

@@ -151,7 +151,7 @@
 <!-- Hero -->
 <section class="hero">
   <div class="container">
-    <div class="badge" style="margin-bottom:24px;"><span class="dot"></span> v0.1.11 已发布</div>
+    <div class="badge" style="margin-bottom:24px;"><span class="dot"></span> v0.1.12 已发布</div>
     <h1>前端的 <span class="gradient-text">SQL 数据库</span></h1>
     <p>TypeScript 原生构建，内存与磁盘双模式，支持完整 SQL 查询。<br>零运行时依赖，开箱即用。</p>
     <div class="actions">
@@ -232,63 +232,123 @@ npm install @metona-team/metona-sqlark
       <div class="feature-card">
         <div class="icon">🧠</div>
         <h3>双模式存储</h3>
-        <p>Memory（内存）保证极致速度，Disk（IndexedDB / OPFS）提供持久化。Hybrid 模式一键兼顾。</p>
+        <p>Memory（内存）保证极致速度，Disk（IndexedDB / OPFS）提供持久化。Hybrid 模式 write-through 策略，读写均在微秒级完成。</p>
       </div>
       <div class="feature-card">
         <div class="icon">⚡</div>
-        <h3>完整 SQL 支持</h3>
-        <p>SELECT / INSERT / UPDATE / DELETE / JOIN / GROUP BY / HAVING / DISTINCT — 手写递归下降解析器。</p>
+        <h3>完整 SQL 解析器</h3>
+        <p>手写递归下降 SQL 解析器，无第三方依赖。支持 SELECT / INSERT / UPDATE / DELETE / CREATE TABLE / DROP TABLE / JOIN / GROUP BY / HAVING / DISTINCT。</p>
       </div>
       <div class="feature-card">
         <div class="icon">🔗</div>
         <h3>Query Builder</h3>
-        <p>链式 API，TypeScript 友好。.select().where().innerJoin().orderBy().limit() — 代码即查询。</p>
+        <p>链式 API + TypeScript 泛型支持。.select().where().innerJoin().orderBy().limit() — IDE 自动补全，类型安全。</p>
       </div>
       <div class="feature-card">
         <div class="icon">🔒</div>
         <h3>事务支持</h3>
-        <p>原子性操作，事务内任意步骤失败自动回滚。IndexedDB 引擎利用浏览器原生事务。</p>
+        <p>原子性操作，事务内任意步骤失败自动回滚。IndexedDB 引擎原生事务 + Memory 引擎模拟事务。</p>
       </div>
       <div class="feature-card">
         <div class="icon">🧩</div>
         <h3>插件系统</h3>
-        <p>14 种生命周期钩子，注册自定义插件。beforeQuery / afterInsert / beforeTransaction……</p>
+        <p>14 种生命周期钩子：beforeCreateTable / afterInsert / beforeQuery / afterTransaction……按优先级注册，完整生命周期管理。</p>
       </div>
       <div class="feature-card">
         <div class="icon">📦</div>
         <h3>零运行时依赖</h3>
-        <p>纯 TypeScript 实现，不依赖任何第三方库。Tree-shakable，最小体积不到 10KB gzip。</p>
+        <p>纯 TypeScript 实现，不依赖任何第三方库。Tree-shakable，UMD/ESM/CJS 多格式输出，最小体积 ~10KB gzip。</p>
+      </div>
+      <div class="feature-card">
+        <div class="icon">📊</div>
+        <h3>聚合 & 分组</h3>
+        <p>COUNT / SUM / AVG / MIN / MAX 五大聚合函数，GROUP BY + HAVING 子句，DISTINCT 去重，完整的数据分析能力。</p>
+      </div>
+      <div class="feature-card">
+        <div class="icon">🔄</div>
+        <h3>数据迁移</h3>
+        <p>内置版本迁移系统，addMigration + migrateTo API。导入导出支持单表/全库 JSON 序列化。</p>
+      </div>
+      <div class="feature-card">
+        <div class="icon">📡</div>
+        <h3>发布订阅</h3>
+        <p>subscribe() 订阅表变更事件，emit() 触发通知。React useQuery / Vue useSqlarkQuery 开箱即用。</p>
       </div>
     </div>
   </div>
 </section>
 
-<!-- Code Example -->
+<!-- Architecture -->
+<section>
+  <div class="container">
+    <div class="section-title">
+      <h2>🏗 <span>架构</span>设计</h2>
+      <p>清晰的分层结构，各模块职责单一</p>
+    </div>
+    <div class="code-block" style="text-align:center;font-size:0.82rem;line-height:2;background:transparent;border:none;">
+<pre style="color:var(--text2);">
+  ┌─────────────────────────────────────────────────────┐
+  │                  <span style="color:#f472b6;">MetonaSqlark / MeSqlark</span>                  │
+  │              create() · query() · table() · tx()     │
+  ├──────────┬──────────┬──────────┬──────────┬─────────┤
+  │ <span style="color:#c084fc;">SQL Parser</span> │ <span style="color:#c084fc;">QueryBuilder</span> │ <span style="color:#c084fc;">Transaction</span>│ <span style="color:#c084fc;">Plugin</span>   │ <span style="color:#c084fc;">Migration</span> │
+  │ Lexer →   │ .select() │ Manager  │ Manager  │ System  │
+  │ Parser    │ .where()  │          │ 14 hooks │         │
+  ├──────────┴──────────┴──────────┴──────────┴─────────┤
+  │              <span style="color:#60a5fa;">QueryExecutor</span> (AST → Results)               │
+  │         JOIN · GROUP BY · HAVING · DISTINCT          │
+  ├─────────────────────────────────────────────────────┤
+  │              <span style="color:#34d399;">IStorageEngine</span> Interface                   │
+  ├──────────┬──────────┬──────────┬───────────────────┤
+  │ <span style="color:#fbbf24;">Memory    </span>│ <span style="color:#fbbf24;">IndexedDB </span>│ <span style="color:#fbbf24;">OPFS     </span>│ <span style="color:#fbbf24;">Hybrid            </span>│
+  │ Engine   │ Engine   │ Engine   │ Engine            │
+  │ (Map)    │ (IDB)    │ (File)   │ (Write-through)   │
+  └──────────┴──────────┴──────────┴───────────────────┘
+</pre>
+    </div>
+  </div>
+</section>
 <section style="background:var(--gradient2);">
   <div class="container">
     <div class="section-title">
       <h2>5 行<span>代码</span>开始</h2>
-      <p>像写 SQL 一样操作前端数据</p>
+      <p>像写 SQL 一样操作前端数据 — 或使用 Query Builder 链式 API</p>
     </div>
     <div class="code-block">
-<pre><span class="comment">// 创建数据库</span>
+<pre><span class="comment">// 创建数据库 — MeSqlark 是别名，完全等价</span>
 <span class="keyword">const</span> db = <span class="keyword">await</span> <span class="func">MetonaSqlark.create</span>({ <span class="string">name</span>: <span class="string">'my-app'</span>, <span class="string">mode</span>: <span class="string">'hybrid'</span> });
 
 <span class="comment">// 定义表结构</span>
 <span class="keyword">await</span> db.<span class="func">defineTable</span>(<span class="string">'users'</span>, {
   <span class="string">id</span>: { <span class="string">type</span>: <span class="string">'string'</span>, <span class="string">primaryKey</span>: <span class="keyword">true</span> },
   <span class="string">name</span>: { <span class="string">type</span>: <span class="string">'string'</span>, <span class="string">required</span>: <span class="keyword">true</span> },
-  <span class="string">age</span>: { <span class="string">type</span>: <span class="string">'number'</span> },
+  <span class="string">age</span>: { <span class="string">type</span>: <span class="string">'number'</span>, <span class="string">default</span>: <span class="number">0</span> },
+  <span class="string">email</span>: { <span class="string">type</span>: <span class="string">'string'</span>, <span class="string">unique</span>: <span class="keyword">true</span>, <span class="string">index</span>: <span class="keyword">true</span> },
 });
 
 <span class="comment">// SQL 查询</span>
-<span class="keyword">await</span> db.<span class="func">query</span>(<span class="string">"INSERT INTO users VALUES ('1', 'Alice', 30)"</span>);
-<span class="keyword">const</span> rows = <span class="keyword">await</span> db.<span class="func">query</span>(<span class="string">'SELECT * FROM users WHERE age > 18'</span>);
+<span class="keyword">await</span> db.<span class="func">query</span>(<span class="string">"INSERT INTO users VALUES ('1', 'Alice', 30, 'alice@demo.com')"</span>);
+<span class="keyword">const</span> rows = <span class="keyword">await</span> db.<span class="func">query</span>(<span class="string">'SELECT * FROM users WHERE age > 18 ORDER BY name'</span>);
 
-<span class="comment">// 或者 Query Builder</span>
+<span class="comment">// Query Builder — 类型安全，链式调用</span>
 <span class="keyword">const</span> rows2 = <span class="keyword">await</span> db.<span class="func">table</span>(<span class="string">'users'</span>)
-  .<span class="func">select</span>().<span class="func">where</span>({ <span class="string">age</span>: { <span class="string">$gt</span>: <span class="number">18</span> } })
-  .<span class="func">orderBy</span>(<span class="string">'name'</span>).<span class="func">limit</span>(<span class="number">10</span>).<span class="func">execute</span>();</pre>
+  .<span class="func">select</span>([<span class="string">'name'</span>, <span class="string">'age'</span>]).<span class="func">where</span>({ <span class="string">age</span>: { <span class="string">$gt</span>: <span class="number">18</span> } })
+  .<span class="func">orderBy</span>(<span class="string">'name'</span>).<span class="func">limit</span>(<span class="number">10</span>).<span class="func">execute</span>();
+
+<span class="comment">// JOIN 多表关联</span>
+<span class="keyword">await</span> db.<span class="func">query</span>(<span class="string">`SELECT u.name, o.product, o.amount
+  FROM users u INNER JOIN orders o ON u.id = o.user_id
+  WHERE o.amount > 100`</span>);
+
+<span class="comment">// GROUP BY 聚合分析</span>
+<span class="keyword">await</span> db.<span class="func">query</span>(<span class="string">`SELECT dept, COUNT(*) as cnt, AVG(salary) as avg
+  FROM employees GROUP BY dept HAVING COUNT(*) > 1`</span>);
+
+<span class="comment">// 事务 — 原子操作</span>
+<span class="keyword">await</span> db.<span class="func">transaction</span>(<span class="keyword">async</span> (trx) => {
+  <span class="keyword">await</span> trx.<span class="func">table</span>(<span class="string">'users'</span>).<span class="func">insert</span>({ id: <span class="string">'3'</span>, name: <span class="string">'Charlie'</span> });
+  <span class="keyword">await</span> trx.<span class="func">table</span>(<span class="string">'orders'</span>).<span class="func">insert</span>({ id: <span class="string">'o1'</span>, userId: <span class="string">'3'</span>, amount: <span class="number">99</span> });
+});</pre>
     </div>
   </div>
 </section>
@@ -301,10 +361,12 @@ npm install @metona-team/metona-sqlark
       <p>MetonaSqlark 的核心指标</p>
     </div>
     <div class="stats">
-      <div class="stat-card"><div class="num">235+</div><div class="label">测试用例</div></div>
-      <div class="stat-card"><div class="num">78.9%</div><div class="label">代码覆盖率</div></div>
+      <div class="stat-card"><div class="num">264+</div><div class="label">测试用例</div></div>
+      <div class="stat-card"><div class="num">93.5%</div><div class="label">代码覆盖率</div></div>
       <div class="stat-card"><div class="num">~10KB</div><div class="label">gzip 体积</div></div>
       <div class="stat-card"><div class="num">4</div><div class="label">存储引擎</div></div>
+      <div class="stat-card"><div class="num">29</div><div class="label">SQL 关键字</div></div>
+      <div class="stat-card"><div class="num">15</div><div class="label">测试套件</div></div>
     </div>
   </div>
 </section>