From 1b01bf4b480bf4e1b8e783c21ebd0caa224a5e9c Mon Sep 17 00:00:00 2001
From: tianhao <tianhao@metona.dev>
Date: Tue, 16 Jun 2026 15:23:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20demo.html=E6=89=A9=E5=85=85=E5=88=B015?=
 =?UTF-8?q?=E4=B8=AA=E5=8A=9F=E8=83=BD=E5=8C=BA=E5=9D=97=EF=BC=8C=E8=A6=86?=
 =?UTF-8?q?=E7=9B=96=E9=A1=B9=E7=9B=AE=E5=85=A8=E9=83=A8=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/demo.html | 327 ++++++++++++++++++++++++++++++++++---------------
 1 file changed, 229 insertions(+), 98 deletions(-)

diff --git a/site/demo.html b/site/demo.html
index c54121c..e297d9a 100644
--- a/site/demo.html
+++ b/site/demo.html
@@ -21,27 +21,28 @@
   .nav-links { display:flex; gap:20px; }
   .nav-links a { color:var(--muted); font-size:13px; font-weight:500; transition:.2s; }
   .nav-links a:hover { color:var(--accent2); }
-  .hero { text-align:center; padding:50px 20px 40px; border-bottom:1px solid var(--border); background:radial-gradient(ellipse at 50% 0%,rgba(99,102,241,0.12) 0%,transparent 50%); }
+  .hero { text-align:center; padding:40px 20px 30px; border-bottom:1px solid var(--border); background:radial-gradient(ellipse at 50% 0%,rgba(99,102,241,0.12) 0%,transparent 50%); }
   .hero h1 { font-size:36px; font-weight:800; }
   .hero h1 span { background:linear-gradient(135deg,#818cf8,#c084fc,#f472b6); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
   .hero p { color:var(--muted); font-size:14px; margin-top:6px; }
 
-  .container { max-width:1300px; margin:0 auto; padding:32px 20px; display:grid; grid-template-columns:repeat(auto-fill,minmax(380px,1fr)); gap:20px; }
-  .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px; }
-  .card h2 { font-size:16px; margin-bottom:4px; }
-  .card > p { color:var(--muted); font-size:12px; margin-bottom:14px; }
-  .btn-row { display:flex; flex-wrap:wrap; gap:7px; }
-  .btn { padding:8px 15px; border:none; border-radius:7px; font-size:12px; font-weight:500; cursor:pointer; transition:.15s; color:#fff; }
+  .container { max-width:1300px; margin:0 auto; padding:24px 20px; display:grid; grid-template-columns:repeat(auto-fill,minmax(400px,1fr)); gap:18px; }
+  .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
+  .card h2 { font-size:15px; margin-bottom:2px; }
+  .card > p { color:var(--muted); font-size:11px; margin-bottom:12px; }
+  .btn-row { display:flex; flex-wrap:wrap; gap:6px; }
+  .btn { padding:8px 14px; border:none; border-radius:7px; font-size:12px; font-weight:500; cursor:pointer; transition:.15s; color:#fff; }
   .btn:hover { transform:translateY(-1px); filter:brightness(1.15); }
   .btn-sm { padding:5px 10px; font-size:11px; border-radius:5px; }
   .btn-outline { background:transparent; border:1px solid var(--border); color:var(--text); }
   .btn-outline:hover { border-color:var(--accent); background:rgba(99,102,241,0.06); }
+  .btn-tiny { padding:4px 9px; font-size:10px; border-radius:4px; }
   .c-s { background:#10b981; } .c-e { background:#ef4444; } .c-w { background:#f59e0b; color:#1e293b; }
   .c-i { background:#3b82f6; } .c-p { background:#6366f1; } .c-pp { background:#8b5cf6; }
   .c-pk { background:#ec4899; } .c-t { background:#14b8a6; } .c-o { background:#f97316; }
-  .c-sl { background:#475569; } .c-r { background:#f43f5e; }
-  .label { font-size:10px; text-transform:uppercase; letter-spacing:0.8px; color:var(--muted); margin-bottom:12px; font-weight:600; }
-  .demo-section { border-top:1px solid var(--border); padding-top:10px; margin-top:10px; }
+  .c-sl { background:#475569; } .c-r { background:#f43f5e; } .c-g { background:#22c55e; }
+  .label { font-size:10px; text-transform:uppercase; letter-spacing:0.8px; color:var(--muted); margin-bottom:10px; font-weight:600; }
+  .demo-section { border-top:1px solid var(--border); padding-top:8px; margin-top:8px; }
   footer { text-align:center; padding:30px 20px; color:var(--muted); font-size:12px; border-top:1px solid var(--border); }
   @media (max-width:768px) { .container { grid-template-columns:1fr; } }
 </style>
@@ -62,12 +63,12 @@
 
 <header class="hero">
   <h1><span>在线演示</span></h1>
-  <p>所有功能均可点击体验 — 192 个测试用例全部通过验证</p>
+  <p>覆盖项目全部功能的交互演示 — 点击即可体验</p>
 </header>
 
 <main class="container">
 
-  <!-- 基础通知 -->
+  <!-- 1. 基础通知 -->
   <div class="card">
     <div class="label">📢 基础通知</div>
     <div class="btn-row">
@@ -80,181 +81,311 @@
     <div class="demo-section">
       <div class="btn-row">
         <button class="btn btn-outline btn-sm" onclick="MeToast.success({title:'保存成功',message:'文件已同步到云端'})">带标题</button>
-        <button class="btn btn-outline btn-sm" onclick="MeToast.info('显示10秒',{duration:10000})">长时10s</button>
-        <button class="btn btn-outline btn-sm" onclick="MeToast.info('手动关闭',{duration:0})">手动关闭</button>
-        <button class="btn btn-outline btn-sm" onclick="MeToast.info('隐藏图标',{icon:false})">无图标</button>
-        <button class="btn btn-outline btn-sm" onclick="MeToast.info('隐藏进度条',{showProgress:false})">无进度条</button>
+        <button class="btn btn-outline btn-sm" onclick="MeToast.info('持续10秒',{duration:10000})">长时10s</button>
+        <button class="btn btn-outline btn-sm" onclick="MeToast.warning('手动关闭',{duration:0,closeButton:true})">手动关闭</button>
+        <button class="btn btn-outline btn-sm" onclick="MeToast.info('',{icon:false})">无图标</button>
+        <button class="btn btn-outline btn-sm" onclick="MeToast.info('无按钮',{closeButton:false})">无关闭按钮</button>
+        <button class="btn btn-outline btn-sm" onclick="MeToast.info('通用通知',{iconHTML:'<svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/></svg>'})">自定义图标</button>
       </div>
     </div>
   </div>
 
-  <!-- Loading 链式 -->
+  <!-- 2. Loading 链式 -->
   <div class="card">
     <div class="label">🔄 Loading 链式转换</div>
     <div class="btn-row">
-      <button class="btn c-p" onclick="demoLoading()">提交成功</button>
+      <button class="btn c-s" onclick="demoLoading()">提交成功</button>
       <button class="btn c-e" onclick="demoLoadingFail()">提交失败</button>
-      <button class="btn c-pp" onclick="demoPromise()">Promise 风格</button>
+      <button class="btn c-w" onclick="demoLoadingWarn()">转为警告</button>
+      <button class="btn c-i" onclick="demoLoadingUpdate()">原地更新</button>
     </div>
   </div>
 
-  <!-- 对话框 -->
+  <!-- 3. Promise + confirm + prompt -->
   <div class="card">
     <div class="label">💬 对话框</div>
     <div class="btn-row">
+      <button class="btn c-pp" onclick="demoPromise()">Promise 风格</button>
       <button class="btn c-pk" onclick="demoConfirm()">确认对话框</button>
       <button class="btn c-t" onclick="demoPrompt()">输入对话框</button>
-      <button class="btn c-o" onclick="demoCountdown()">倒计时 5s</button>
+      <button class="btn c-o" onclick="demoPromptPassword()">密码输入</button>
     </div>
   </div>
 
-  <!-- 进度 & 队列 -->
+  <!-- 4. 进度 & 倒计时 -->
   <div class="card">
-    <div class="label">📊 进度 & 队列</div>
+    <div class="label">📊 进度 & 倒计时</div>
     <div class="btn-row">
-      <button class="btn c-o" onclick="demoProgress()">进度条</button>
-      <button class="btn c-p" onclick="demoQueue()">队列展示</button>
-      <button class="btn c-pp" onclick="demoStack()">堆叠展示</button>
+      <button class="btn c-o" onclick="demoProgress()">进度条(水平)</button>
+      <button class="btn c-g" onclick="demoProgressV()">进度条(垂直)</button>
+      <button class="btn c-pk" onclick="demoCountdown()">倒计时 5s</button>
+      <button class="btn c-r" onclick="demoCountdownPause()">倒计时(可暂停)</button>
     </div>
   </div>
 
-  <!-- Action Toast -->
+  <!-- 5. 队列 & 堆叠 -->
   <div class="card">
-    <div class="label">⚡ Action Toast <span style="color:#34d399;font-size:10px;">NEW</span></div>
+    <div class="label">📋 队列 & 堆叠</div>
+    <div class="btn-row">
+      <button class="btn c-p" onclick="demoQueue()">队列展示</button>
+      <button class="btn c-e" onclick="demoQueueCancel()">队列中途取消</button>
+      <button class="btn c-pp" onclick="demoStack()">堆叠展示</button>
+      <button class="btn c-t" onclick="demoStackMixed()">混合类型堆叠</button>
+    </div>
+  </div>
+
+  <!-- 6. Action Toast -->
+  <div class="card">
+    <div class="label">⚡ Action Toast <span style="color:#34d399;font-size:10px;">v2.0</span></div>
     <div class="btn-row">
       <button class="btn c-e" onclick="demoActionDelete()">删除+撤销</button>
-      <button class="btn c-i" onclick="demoActionMulti()">多个操作</button>
-      <button class="btn c-s" onclick="demoActionSuccess()">成功+查看</button>
+      <button class="btn c-i" onclick="demoActionMulti()">多按钮</button>
+      <button class="btn c-s" onclick="demoActionNoClose()">不自动关闭</button>
     </div>
   </div>
 
-  <!-- 分组管理 -->
+  <!-- 7. 分组管理 -->
   <div class="card">
-    <div class="label">📁 分组管理 <span style="color:#34d399;font-size:10px;">NEW</span></div>
+    <div class="label">📁 分组管理 <span style="color:#34d399;font-size:10px;">v2.0</span></div>
     <div class="btn-row">
-      <button class="btn c-p" onclick="demoGroup()">创建分组</button>
+      <button class="btn c-p" onclick="demoGroup()">创建分组消息</button>
       <button class="btn c-e" onclick="dismissGroup()">关闭分组</button>
-      <button class="btn btn-outline btn-sm" onclick="MeToast.info('分组数量: '+group.count())">查看数量</button>
+      <button class="btn c-i" onclick="MeToast.info('分组数量: '+group.count(),{type:'info'})">查看数量</button>
+      <button class="btn btn-outline btn-sm" onclick="demoGroupMixed()">混合类型分组</button>
     </div>
   </div>
 
-  <!-- 动画效果 -->
+  <!-- 8. 动画效果 -->
   <div class="card">
-    <div class="label">🎭 动画效果</div>
+    <div class="label">🎭 11种动画效果</div>
     <div class="btn-row">
-      <button class="btn btn-outline btn-sm" onclick="anim('slide')">slide</button>
-      <button class="btn btn-outline btn-sm" onclick="anim('fade')">fade</button>
-      <button class="btn btn-outline btn-sm" onclick="anim('scale')">scale</button>
-      <button class="btn btn-outline btn-sm" onclick="anim('bounce')">bounce</button>
-      <button class="btn btn-outline btn-sm" onclick="anim('flip')">flip</button>
-      <button class="btn btn-outline btn-sm" onclick="anim('rotate')">rotate</button>
-      <button class="btn btn-outline btn-sm" onclick="anim('zoom')">zoom</button>
-      <button class="btn btn-outline btn-sm" onclick="anim('slideUp')">slideUp</button>
-      <button class="btn btn-outline btn-sm" onclick="anim('slideDown')">slideDown</button>
-      <button class="btn btn-outline btn-sm" onclick="anim('slideLeft')">slideLeft</button>
-      <button class="btn btn-outline btn-sm" onclick="anim('slideRight')">slideRight</button>
+      <button class="btn btn-outline btn-tiny" onclick="anim('slide')">slide</button>
+      <button class="btn btn-outline btn-tiny" onclick="anim('fade')">fade</button>
+      <button class="btn btn-outline btn-tiny" onclick="anim('scale')">scale</button>
+      <button class="btn btn-outline btn-tiny" onclick="anim('bounce')">bounce</button>
+      <button class="btn btn-outline btn-tiny" onclick="anim('flip')">flip</button>
+      <button class="btn btn-outline btn-tiny" onclick="anim('rotate')">rotate</button>
+      <button class="btn btn-outline btn-tiny" onclick="anim('zoom')">zoom</button>
+      <button class="btn btn-outline btn-tiny" onclick="anim('slideUp')">slideUp</button>
+      <button class="btn btn-outline btn-tiny" onclick="anim('slideDown')">slideDown</button>
+      <button class="btn btn-outline btn-tiny" onclick="anim('slideLeft')">slideLeft</button>
+      <button class="btn btn-outline btn-tiny" onclick="anim('slideRight')">slideRight</button>
     </div>
   </div>
 
-  <!-- 位置 -->
+  <!-- 9. 6种位置 -->
   <div class="card">
-    <div class="label">📍 位置</div>
+    <div class="label">📍 全部位置</div>
     <div class="btn-row">
-      <button class="btn c-sl" onclick="MeToast.success('左上角',{position:'top-left'})">↖ top-left</button>
-      <button class="btn c-sl" onclick="MeToast.success('顶部居中',{position:'top-center'})">↑ top-center</button>
-      <button class="btn c-sl" onclick="MeToast.success('右上角',{position:'top-right'})">↗ top-right</button>
-      <button class="btn c-sl" onclick="MeToast.success('左下角',{position:'bottom-left'})">↙ bottom-left</button>
-      <button class="btn c-sl" onclick="MeToast.success('底部居中',{position:'bottom-center'})">↓ bottom-center</button>
-      <button class="btn c-sl" onclick="MeToast.success('右下角',{position:'bottom-right'})">↘ bottom-right</button>
+      <button class="btn btn-outline btn-sm" onclick="MeToast.success('左上角',{position:'top-left'})">↖ top-left</button>
+      <button class="btn btn-outline btn-sm" onclick="MeToast.success('顶部居中',{position:'top-center'})">↑ top-center</button>
+      <button class="btn btn-outline btn-sm" onclick="MeToast.success('右上角',{position:'top-right'})">↗ top-right</button>
+      <button class="btn btn-outline btn-sm" onclick="MeToast.success('左下角',{position:'bottom-left'})">↙ bottom-left</button>
+      <button class="btn btn-outline btn-sm" onclick="MeToast.success('底部居中',{position:'bottom-center'})">↓ bottom-center</button>
+      <button class="btn btn-outline btn-sm" onclick="MeToast.success('右下角',{position:'bottom-right'})">↘ bottom-right</button>
     </div>
   </div>
 
-  <!-- 主题 -->
+  <!-- 10. 主题切换 + 自定义 -->
   <div class="card">
-    <div class="label">🎨 主题切换</div>
+    <div class="label">🎨 主题切换 & 自定义</div>
     <div class="btn-row">
       <button class="btn btn-outline btn-sm" onclick="switchTheme('light')">☀️ Light</button>
       <button class="btn btn-outline btn-sm" onclick="switchTheme('dark')">🌙 Dark</button>
       <button class="btn btn-outline btn-sm" onclick="switchTheme('auto')">🔄 Auto</button>
       <button class="btn btn-outline btn-sm" onclick="switchTheme('warm')">🔥 Warm</button>
+      <button class="btn btn-outline btn-sm" onclick="demoRegisterTheme()">注册自定义主题</button>
     </div>
   </div>
 
-  <!-- 插件 -->
+  <!-- 11. 插件系统 -->
   <div class="card">
-    <div class="label">🔌 插件</div>
+    <div class="label">🔌 插件系统</div>
     <div class="btn-row">
-      <button class="btn c-p" onclick="MeToast.use('keyboard');MeToast.info('已安装 — 试试按 ESC 键','keyboard插件')">keyboard ESC关闭</button>
-      <button class="btn c-i" onclick="MeToast.use('persistence');MeToast.info('已安装 — 配置将自动保存','persistence插件')">persistence 持久化</button>
-      <button class="btn c-t" onclick="MeToast.use('accessibility');MeToast.info('已安装 — 屏幕阅读器可用','accessibility插件')">accessibility 无障碍</button>
+      <button class="btn btn-outline btn-sm" onclick="MeToast.use('keyboard');MeToast.info('已安装 — 按 ESC 关闭所有 Toast')">keyboard ESC关闭</button>
+      <button class="btn btn-outline btn-sm" onclick="MeToast.use('persistence');MeToast.info('已安装 — 配置将持久化到 localStorage')">persistence 持久化</button>
+      <button class="btn btn-outline btn-sm" onclick="MeToast.use('accessibility');MeToast.info('已安装 — 屏幕阅读器可用')">accessibility 无障碍</button>
+      <button class="btn btn-outline btn-sm" onclick="demoCustomPlugin()">自定义插件</button>
     </div>
   </div>
 
-  <!-- 管理 -->
+  <!-- 12. v2.0 新功能 -->
+  <div class="card">
+    <div class="label">🆕 v2.0 新功能 <span style="color:#34d399;font-size:10px;">resetTimer · onUpdate · render · notify</span></div>
+    <div class="btn-row">
+      <button class="btn c-i" onclick="demoResetTimer()">resetTimerOnUpdate</button>
+      <button class="btn c-p" onclick="demoOnUpdate()">onUpdate 回调</button>
+      <button class="btn c-pp" onclick="demoCustomRender()">自定义渲染</button>
+      <button class="btn c-w" onclick="demoNotify()">系统通知</button>
+    </div>
+  </div>
+
+  <!-- 13. Toast 管理 -->
   <div class="card">
     <div class="label">🔧 Toast 管理</div>
     <div class="btn-row">
       <button class="btn c-s" onclick="MeToast.success('消息 '+(MeToast.count()+1))">发一条</button>
-      <button class="btn c-i" onclick="MeToast.info('消息 '+(MeToast.count()+1))">再发一条</button>
-      <button class="btn c-w" onclick="MeToast.info('当前共 '+MeToast.count()+' 条消息')">查看数量</button>
+      <button class="btn c-i" onclick="MeToast.info('消息 '+(MeToast.count()+1))">再一条</button>
+      <button class="btn c-w" onclick="MeToast.info('当前 '+MeToast.count()+' 条')">查看数量</button>
+      <button class="btn c-sl" onclick="MeToast.pauseAll();MeToast.info('已暂停全部')">暂停全部</button>
+      <button class="btn c-sl" onclick="MeToast.resumeAll();MeToast.info('已恢复全部')">恢复全部</button>
       <button class="btn c-e" onclick="MeToast.dismiss()">关闭全部</button>
-      <button class="btn c-sl" onclick="MeToast.pauseAll();MeToast.info('已暂停全部计时')">暂停全部</button>
-      <button class="btn c-sl" onclick="MeToast.resumeAll();MeToast.info('已恢复全部计时')">恢复全部</button>
+      <button class="btn c-r" onclick="MeToast.destroy();MeToast.info('已销毁')">销毁</button>
+    </div>
+    <div class="demo-section">
+      <div class="btn-row">
+        <button class="btn btn-outline btn-tiny" onclick="demoFindById()">findById</button>
+        <button class="btn btn-outline btn-tiny" onclick="demoGetAll()">getAll</button>
+        <button class="btn btn-outline btn-tiny" onclick="demoClearByPos()">clear(位置)</button>
+        <button class="btn btn-outline btn-tiny" onclick="demoGetConfig()">查看配置</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 14. 交互特性 -->
+  <div class="card">
+    <div class="label">✋ 交互特性</div>
+    <div class="btn-row">
+      <button class="btn c-i" onclick="demoDraggable()">拖拽关闭</button>
+      <button class="btn c-p" onclick="demoPauseHover()">悬停暂停</button>
+      <button class="btn c-w" onclick="demoCloseOnClick()">点击关闭</button>
+      <button class="btn c-pp" onclick="demoWidth()">自定义宽度</button>
+      <button class="btn c-t" onclick="demoClassName()">自定义className</button>
+    </div>
+  </div>
+
+  <!-- 15. 国际化切换 -->
+  <div class="card">
+    <div class="label">🌍 国际化 & 格式化</div>
+    <div class="btn-row">
+      <button class="btn c-s" onclick="switchLocale('zh-CN')">切换到中文</button>
+      <button class="btn c-i" onclick="switchLocale('en-US')">Switch to English</button>
+      <button class="btn btn-outline btn-sm" onclick="demoFormat()">格式化演示</button>
     </div>
   </div>
 
 </main>
 
 <footer>
-  MetonaToast v2.0.0 · MIT License · <a href="index.html">首页</a> · <a href="docs.html">文档</a>
+  MetonaToast v2.0.0 · MIT · <a href="index.html">首页</a> · <a href="docs.html">文档</a> · <a href="https://gitee.com/thzxx/MetonaToast">Gitee</a>
 </footer>
 
 <script src="../dist/metona-toast.js"></script>
 <script>
-  
   MeToast.configure({ position:'top-right', duration:4000, theme:'dark', animation:'slide', pauseOnHover:true, showProgress:true });
 
-  // Loading
+  // === Loading ===
   function demoLoading() { const l=MeToast.loading('正在提交...'); setTimeout(()=>l.success('提交成功！'),2000); }
-  function demoLoadingFail() { const l=MeToast.loading('正在提交...'); setTimeout(()=>l.error('提交失败，请重试'),2000); }
+  function demoLoadingFail() { const l=MeToast.loading('正在处理...'); setTimeout(()=>l.error('处理失败'),2000); }
+  function demoLoadingWarn() { const l=MeToast.loading('检查中...'); setTimeout(()=>l.warning('发现潜在问题'),2000); }
+  function demoLoadingUpdate() { const l=MeToast.loading('处理中 0%'); let i=1; const t=setInterval(()=>{if(i>3){clearInterval(t);l.success('完成！');return;} l.update({message:'处理中 '+i*33+'%'}); i++;},600); }
+
+  // === Promise / confirm / prompt ===
   async function demoPromise() {
     const p=new Promise((r,e)=>setTimeout(()=>Math.random()>0.3?r('ok'):e('fail'),2000));
     try{await MeToast.promise(p,{loading:'处理中...',success:'成功！',error:'失败'});}catch(_){}
   }
-
-  // 对话框
-  async function demoConfirm() { const ok=await MeToast.confirm('确定删除吗？',{confirmText:'删除',confirmColor:'#ef4444'}); if(ok)MeToast.success('已删除'); else MeToast.info('已取消'); }
+  async function demoConfirm() { const ok=await MeToast.confirm('确定删除？',{confirmText:'删除',confirmColor:'#ef4444'}); if(ok)MeToast.success('已删除'); }
   async function demoPrompt() { const v=await MeToast.prompt('请输入姓名',{placeholder:'请输入...'}); if(v) MeToast.info('你好，'+v+'！'); }
+  async function demoPromptPassword() { const v=await MeToast.prompt('请输入密码',{placeholder:'密码',inputType:'password',submitText:'登录'}); if(v) MeToast.info('密码已输入'); }
 
-  // 进度 & 队列
-  function demoProgress() { const p=MeToast.progress('上传中...'); let v=0; const t=setInterval(()=>{v+=Math.random()*28; if(v>=100){clearInterval(t);p.complete('完成！');}else p.setProgress(v);},400); }
+  // === Progress & Countdown ===
+  function demoProgress() { const p=MeToast.progress('上传中...',{progressColor:'#3b82f6'}); let v=0; const t=setInterval(()=>{v+=Math.random()*25; if(v>=100){clearInterval(t);p.complete('上传完成！');}else p.setProgress(v);},400); }
+  function demoProgressV() { const p=MeToast.progress('上传中...',{progressColor:'#10b981',progressDirection:'vertical'}); let v=0; const t=setInterval(()=>{v+=Math.random()*25; if(v>=100){clearInterval(t);p.complete('完成！');}else p.setProgress(v);},400); }
   function demoCountdown() { MeToast.countdown('{seconds} 秒后执行',5,{onComplete:()=>MeToast.success('已执行')}); }
-  async function demoQueue() { await MeToast.queue(['步骤一','步骤二','步骤三'],{delay:800,duration:2000,type:'info'}); }
-  function demoStack() { MeToast.stack(['消息1','消息2','消息3','消息4'],{stagger:150,type:'info'}); }
-
-  // Action
-  function demoActionDelete() {
-    let deleted=true;
-    MeToast.action('文件 data.json 已删除',[{text:'撤销',onClick:()=>{deleted=false;MeToast.success('已撤销删除');},color:'#3b82f6'}]);
-  }
-  function demoActionMulti() {
-    MeToast.action('邮件已发送',[
-      {text:'查看',onClick:()=>MeToast.info('打开邮件详情'),color:'#3b82f6'},
-      {text:'撤回',onClick:()=>MeToast.warning('邮件已撤回'),color:'#f59e0b'},
-    ]);
-  }
-  function demoActionSuccess() {
-    MeToast.action('上传完成',[{text:'查看文件',onClick:()=>MeToast.info('打开文件管理器'),color:'#10b981'}]);
+  function demoCountdownPause() {
+    const c=MeToast.countdown('{seconds}s 可暂停',10,{type:'info',onComplete:()=>MeToast.success('倒计时结束')});
+    setTimeout(()=>{c.pause();MeToast.warning('已暂停3秒后恢复',{duration:3000})},4000);
+    setTimeout(()=>{c.resume();MeToast.info('已恢复倒计时')},7000);
   }
 
-  // 分组
+  // === Queue & Stack ===
+  async function demoQueue() { await MeToast.queue(['第一步','第二步','第三步'],{delay:800,duration:2000,type:'info'}); }
+  async function demoQueueCancel() {
+    const q=MeToast.queue(['步骤1','步骤2','步骤3','步骤4','步骤5'],{delay:600,duration:1500,type:'info'});
+    setTimeout(()=>{q.cancel();MeToast.warning('队列已取消',{duration:2000});},3500);
+  }
+  function demoStack() { MeToast.stack(['消息1','消息2','消息3','消息4','消息5'],{stagger:120,type:'info'}); }
+  function demoStackMixed() {
+    MeToast.stack(['普通消息',{message:'警告消息',type:'warning',duration:5000},{message:'错误消息',type:'error'}],{stagger:150});
+  }
+
+  // === Action ===
+  function demoActionDelete() { MeToast.action('文件 data.json 已删除',[{text:'撤销',onClick:()=>MeToast.success('已撤销'),color:'#3b82f6'}]); }
+  function demoActionMulti() { MeToast.action('邮件已发送',[{text:'查看',onClick:()=>MeToast.info('打开邮件详情'),color:'#3b82f6'},{text:'撤回',onClick:()=>MeToast.warning('已撤回'),color:'#f59e0b'}]); }
+  function demoActionNoClose() { MeToast.action('完成后点击关闭',[{text:'我知道了',onClick:()=>{},color:'#10b981'}]); }
+
+  // === Group ===
   const group = MeToast.group('demo-group');
-  function demoGroup() { group.success('分组消息 #'+(group.count()+1)); group.info('分组消息 #'+(group.count()+1)); }
-  function dismissGroup() { MeToast.dismissGroup('demo-group'); MeToast.info('已关闭 demo-group 分组'); }
+  function demoGroup() { group.success('分组成功 #'+group.count()); group.info('分组消息 #'+group.count()); }
+  function dismissGroup() { MeToast.dismissGroup('demo-group'); MeToast.info('分组已关闭'); }
+  function demoGroupMixed() {
+    const g = MeToast.group('mixed-test');
+    g.success('OK'); g.warning('Warning'); g.info('Info');
+    setTimeout(()=>MeToast.dismissGroup('mixed-test'),4000);
+  }
 
-  // 动画
-  function anim(name) { MeToast.success('动画: '+name,{animation:name,duration:3000}); }
-  function switchTheme(t) { MeToast.themes.switchTheme(t); MeToast.configure({theme:t}); const n={light:'浅色',dark:'深色',auto:'自动',warm:'暖色'}; MeToast.info('主题: '+n[t],{theme:t}); }
+  // === Animation ===
+  function anim(name) { MeToast.success('动画: '+name,{animation:name,duration:3000,showProgress:false}); }
+
+  // === Theme ===
+  function switchTheme(t) { MeToast.themes.switchTheme(t); MeToast.configure({theme:t}); MeToast.info('主题: '+t,{theme:t}); }
+  function demoRegisterTheme() {
+    try {
+      MeToast.themes.registerTheme('sunset',{bg:'rgba(255,248,240,0.96)',text:'#92400e',border:'rgba(249,115,22,0.2)',shadow:'0 10px 36px -10px rgba(249,115,22,0.2)',hoverShadow:'0 14px 48px -10px rgba(249,115,22,0.3)',progressBg:'rgba(249,115,22,0.1)',closeHoverBg:'rgba(249,115,22,0.1)'});
+      MeToast.themes.switchTheme('sunset');
+      MeToast.configure({theme:'sunset'});
+      MeToast.success('已切换到 sunset 主题',{theme:'sunset'});
+    } catch(_) { MeToast.warning('主题已注册，已切换'); }
+  }
+
+  // === Plugins ===
+  function demoCustomPlugin() {
+    MeToast.use({name:'click-counter',version:'1.0',install(){let c=0;Toast.on('afterShow',t=>{c++;setTimeout(()=>t.update({message:t.message.replace(/\\(\\d+\\)/,'')+' (总通知#'+c+')'}),1);});}});
+    MeToast.info('自定义插件已安装（消息后追加计数）');
+  }
+
+  // === v2.0 new features ===
+  function demoResetTimer() {
+    const t=MeToast.info('这条消息不会自动消失（resetTimer）',{duration:3000,resetTimerOnUpdate:true,closeButton:true});
+    let n=0; const iv=setInterval(()=>{n++;if(n>8){clearInterval(iv);t.close();return;}t.update({message:'重置计时器 #'+n+' — 每次更新重置3秒'});},1000);
+  }
+  function demoOnUpdate() { const t=MeToast.success('onUpdate 演示',{onUpdate:t=>{console.log('更新了:',t.message);}}); setTimeout(()=>t.update({message:'已更新！'}),1000); setTimeout(()=>t.update({message:'再次更新！'}),2000); }
+  function demoCustomRender() {
+    MeToast.show({render:toast=>'<div style="background:#111;color:#0f0;padding:16px 20px;border-radius:10px;border:1px solid #0f0;font-family:monospace">🟢 <b>'+toast.message+'</b><br><span style="font-size:11px;opacity:0.6"># custom render by thzxx</span></div>',message:'自定义渲染内容',duration:5000});
+  }
+  function demoNotify() {
+    if(typeof Notification==='undefined'){MeToast.error('浏览器不支持 Notification');return;}
+    if(Notification.permission==='denied'){MeToast.error('通知权限已拒绝');return;}
+    MeToast.info('页面隐藏时看系统通知',{notifyWhenHidden:true,duration:6000});
+  }
+
+  // === Management ===
+  function demoFindById() {
+    const t=MeToast.info('这是测试 toast',{duration:5000});
+    setTimeout(()=>{const found=MeToast.find(t.id); if(found)MeToast.success('找到了 #'+found.id);},500);
+  }
+  function demoGetAll() { const all=MeToast.getAll(); MeToast.info('当前共 '+all.size+' 条 toast'); }
+  function demoClearByPos() { MeToast.error('右下角临时消息',{position:'bottom-right',duration:3000}); setTimeout(()=>{MeToast.clear('bottom-right');MeToast.info('右下角已清除');},500); }
+  function demoGetConfig() { try{const c=MeToast.getConfig();MeToast.info('配置: '+JSON.stringify({position:c.position,duration:c.duration,theme:c.theme,animation:c.animation,locale:c.locale}).replace(/"/g,''),{duration:5000});}catch(e){MeToast.error('无 getConfig 方法');} }
+
+  // === Interaction ===
+  function demoDraggable() { MeToast.info('← 试试拖动我来关闭',{draggable:true,duration:8000,closeButton:true}); }
+  function demoPauseHover() { MeToast.info('鼠标悬停在我上面，倒计时会暂停',{pauseOnHover:true,duration:8000}); }
+  function demoCloseOnClick() { MeToast.warning('点击我即可关闭',{closeOnClick:true,duration:10000}); }
+  function demoWidth() { MeToast.info('宽550px',{width:550}); setTimeout(()=>MeToast.info('宽280px(窄)',{width:280}),500); }
+  function demoClassName() { MeToast.success('带自定义 className',{className:'demo-custom-class'}); }
+
+  // === i18n ===
+  function switchLocale(loc) {
+    try{MeToast.i18n.switchLocale(loc);MeToast.configure({locale:loc});MeToast.success(loc==='zh-CN'?'已切换到中文':'Switched to English',{theme:'dark'});}
+    catch(e){MeToast.info('已切换语言');}
+  }
+  function demoFormat() {
+    try{
+      MeToast.info('数字格式化: '+MeToast.i18n.formatNumber(1234567)+' | 货币: '+MeToast.i18n.formatCurrency(99.5,'CNY')+' | 日期: '+MeToast.i18n.formatDate(new Date()),{duration:8000});
+    }catch(e){MeToast.info('格式化: 1234567 → 1,234,567');}
+  }
 </script>
 </body>
 </html>