feat: v0.2.4 — 搜索面板全面重设计 + 完整安装文档

### Changed - 搜索面板：暗色玻璃拟态设计，SVG 图标，流畅动画，改进间距和焦点状态 - README / site：补全 npm / CDN / ESM / CJS / 浏览器五种安装方式 ### Fixed - CI 卡死：移除 setInterval，改用纯事件驱动 - 浮动工具栏定位修正 - 浮动工具栏开关按钮修复
2026-07-25 15:50:12 +08:00
parent b48468f599
commit ff667ae77a
17 changed files with 108 additions and 43 deletions
@@ -4,7 +4,7 @@
 <meta charset="utf-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
 <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📝</text></svg>"/>
-<title>MetonaEditor v0.2.3 — 全功能演示</title>
+<title>MetonaEditor v0.2.4 — 全功能演示</title>
 <style>
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
 :root{--app-bg:#f5f6f8;--app-text:#1a1a2e;--app-card:#fff;--app-border:#e5e7eb;--app-accent:#3b82f6;--app-accent2:#8b5cf6;--header-bg:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);--header-text:#f1f5f9;--badge-bg:rgba(255,255,255,.12);--badge-text:#e2e8f0}
@@ -45,7 +45,7 @@ body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Micr
 <body>

 <header class="header">
-  <h1><span class="grad">Metona</span>Editor v0.2.3</h1>
+  <h1><span class="grad">Metona</span>Editor v0.2.4</h1>
  <div class="badges">
    <span class="badge">TypeScript</span>
    <span class="badge">零运行时依赖</span>
@@ -91,7 +91,7 @@ body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Micr
 </div>

 <footer class="footer">
-  MetonaEditor v0.2.3 · TypeScript · <a href="index.html">首页</a> · <a href="docs.html">API 文档</a> · <a href="https://git.metona.cn/MetonaTeam/MetonaEditor" target="_blank" rel="noopener">源码仓库</a> · MIT
+  MetonaEditor v0.2.4 · TypeScript · <a href="index.html">首页</a> · <a href="docs.html">API 文档</a> · <a href="https://git.metona.cn/MetonaTeam/MetonaEditor" target="_blank" rel="noopener">源码仓库</a> · MIT
 </footer>

 <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
@@ -99,12 +99,12 @@ body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Micr
 <script>
 (function(){
 var demoMd=[
-  '# 🚀 MetonaEditor v0.2.3 全功能演示',
+  '# 🚀 MetonaEditor v0.2.4 全功能演示',
  '',
  '> TypeScript 重构 · 零运行时依赖 · **桌面端** Markdown Editor 库。',
  '> 全模块 TypeScript 严格模式，12 个源文件，684 个测试全部通过。',
  '',
-  '## ✨ v0.2.3 新特性',
+  '## ✨ v0.2.4 新特性',
  '',
  '- 浮动格式工具栏：选中文本自动弹出 bold/italic/code/link',
  '- 新增 `getSelectedText()` `getCursorPosition()` 等 10+ API',
@@ -139,7 +139,7 @@ var demoMd=[
  '',
  '| 版本 | 日期 | 测试 | 主题 |',
  '| :--- | :---: | ---: | --- |',
-  '| v0.2.3 | 2026-07 | 725 | 浮动工具栏+新API |',
+  '| v0.2.4 | 2026-07 | 725 | 浮动工具栏+新API |',
  '| v0.2.2 | 2026-07 | 694 | 法语+表格格式化 |',
  '| v0.2.1 | 2026-07 | 684 | 引用链接+右键菜单 |',
  '| v0.2.0 | 2026-07 | 610 | TypeScript 重构 |',
@@ -4,7 +4,7 @@
 <meta charset="UTF-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📖</text></svg>"/>
-<title>MetonaEditor v0.2.3 · 文档</title>
+<title>MetonaEditor v0.2.4 · 文档</title>
 <style>
 *{box-sizing:border-box;margin:0;padding:0}
 :root{--bg:#0f1117;--bg-soft:#161922;--card:#1c2029;--card-hover:#232834;--text:#e6e8eb;--muted:#9ca3af;--accent:#3b82f6;--accent-2:#8b5cf6;--accent-soft:rgba(59,130,246,.12);--border:rgba(255,255,255,.08);--gradient:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 50%,#ec4899 100%)}
@@ -65,7 +65,7 @@ footer a{color:var(--accent);text-decoration:none}

 <header class="docs-header">
  <h1><span class="grad">API 文档</span></h1>
-  <p class="sub">MetonaEditor v0.2.3 · TypeScript · 完整配置、API 与使用指南</p>
+  <p class="sub">MetonaEditor v0.2.4 · TypeScript · 完整配置、API 与使用指南</p>
 </header>

 <div class="container">
@@ -433,7 +433,7 @@ i18nUtils<span class="c-punc">.</span><span class="c-fn">formatDate</span><span

 <footer>
  <div class="container">
-    MetonaEditor v0.2.3 · TypeScript · <a href="https://git.metona.cn/MetonaTeam/MetonaEditor" target="_blank" rel="noopener">源码仓库</a> · MIT License
+    MetonaEditor v0.2.4 · TypeScript · <a href="https://git.metona.cn/MetonaTeam/MetonaEditor" target="_blank" rel="noopener">源码仓库</a> · MIT License
  </div>
 </footer>

@@ -4,7 +4,7 @@
 <meta charset="UTF-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>"/>
-<title>MetonaEditor v0.2.3 · TypeScript · 桌面端 Markdown 编辑器</title>
+<title>MetonaEditor v0.2.4 · TypeScript · 桌面端 Markdown 编辑器</title>
 <style>
 *{box-sizing:border-box;margin:0;padding:0}
 :root{--bg:#0f1117;--bg-soft:#161922;--card:#1c2029;--card-hover:#232834;--text:#e6e8eb;--muted:#9ca3af;--accent:#3b82f6;--accent-2:#8b5cf6;--accent-3:#ec4899;--accent-soft:rgba(59,130,246,.12);--border:rgba(255,255,255,.08);--gradient:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 50%,#ec4899 100%);--shadow:0 20px 50px -20px rgba(0,0,0,.5)}
@@ -106,7 +106,7 @@ footer a:hover{text-decoration:underline}
  <h1>TypeScript 重构 · 零依赖<br/><span class="grad">桌面端 Markdown 编辑器</span></h1>
  <p class="tagline">全模块 TypeScript 严格模式，内置自研解析器（99% 行覆盖率），6 个预设插件，中文优先。为桌面端现代 Web 应用而生。</p>
  <div class="badges">
-    <span class="badge accent">v0.2.3</span>
+    <span class="badge accent">v0.2.4</span>
    <span class="badge">TypeScript</span>
    <span class="badge">零运行时依赖</span>
    <span class="badge">725 tests</span>
@@ -154,10 +154,23 @@ footer a:hover{text-decoration:underline}
  <div class="container">
    <span class="section-eyebrow">Quick Start</span>
    <h2 class="section-title">三行代码即可使用</h2>
-    <p class="section-sub">TypeScript / npm / CDN 三种引入方式，都只需极少代码。</p>
-    <div class="code-block"><span class="c-com">// npm 安装</span>
+    <p class="section-sub">npm / CDN / 本地文件 三种方式，TypeScript / ESM / CJS 全面支持。</p>
+    <div class="code-block"><span class="c-com">// 方式一：npm 安装（推荐）</span>
+<span class="c-kw">npm</span> install @metona-team/metona-editor
+
+<span class="c-com">// ES Module / TypeScript</span>
 <span class="c-kw">import</span> MeEditor <span class="c-kw">from</span> <span class="c-str">'@metona-team/metona-editor'</span><span class="c-punc">;</span>

+<span class="c-com">// CommonJS</span>
+<span class="c-kw">const</span> MeEditor <span class="c-punc">=</span> <span class="c-fn">require</span><span class="c-punc">(</span><span class="c-str">'@metona-team/metona-editor'</span><span class="c-punc">);</span>
+
+<span class="c-com">// 方式二：CDN 引入</span>
+<span class="c-com">&lt;script src="https://cdn.jsdelivr.net/npm/@metona-team/metona-editor@0.2.4/dist/metona-editor.min.js"&gt;&lt;/script&gt;</span>
+
+<span class="c-com">// 方式三：本地文件</span>
+<span class="c-com">&lt;script src="./dist/metona-editor.min.js"&gt;&lt;/script&gt;</span>
+
+<span class="c-com">// 创建实例</span>
 <span class="c-kw">const</span> editor <span class="c-punc">=</span> MeEditor<span class="c-punc">.</span><span class="c-fn">create</span><span class="c-punc">(</span><span class="c-str">'#editor'</span><span class="c-punc">,</span> <span class="c-punc">{</span>
  <span class="c-fn">value</span><span class="c-punc">:</span> <span class="c-str">'# 你好，世界'</span><span class="c-punc">,</span>
  <span class="c-fn">mode</span><span class="c-punc">:</span> <span class="c-str">'split'</span><span class="c-punc">,</span>
@@ -214,7 +227,7 @@ editor<span class="c-punc">.</span><span class="c-fn">exec</span><span class="c-
      <a href="https://git.metona.cn/MetonaTeam/MetonaEditor" target="_blank" rel="noopener">源码仓库</a>
      <a href="https://git.metona.cn/MetonaTeam/MetonaEditor/issues" target="_blank" rel="noopener">问题反馈</a>
    </div>
-    <div>MetonaEditor v0.2.3 · TypeScript · MIT License · MetonaTeam</div>
+    <div>MetonaEditor v0.2.4 · TypeScript · MIT License · MetonaTeam</div>
  </div>
 </footer>

@@ -224,7 +237,7 @@ MeEditor.themes.switchTheme('dark');
 MeEditor.create('#editor', {
  mode: 'split', height: 480, theme: 'dark',
  value: [
-    '# 欢迎使用 MetonaEditor v0.2.3',
+    '# 欢迎使用 MetonaEditor v0.2.4',
    '',
    '一个 **TypeScript 重构 · 零运行时依赖** 的桌面端 Markdown 编辑器。',
    '',