feat: fix Slider component display bug and add IE browser detection prompt

add remove infrequently used js libraries

index.html

@@ -78,6 +78,47 @@
     <div>你需要启用 JavaScript 来运行 Type Words.</div>
 </noscript>
 <div id="app"></div>
+<script>
+(function(){
+  var ua = navigator.userAgent || ''
+  var isIE = !!document.documentMode || /MSIE|Trident/i.test(ua)
+  if (!isIE) return
+  var style = document.createElement('style')
+  style.type = 'text/css'
+  style.appendChild(document.createTextNode(
+    '.ie-mask{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,.35);z-index:9998}'+
+    '.ie-dialog{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:28rem;max-width:90vw;background:#fff;color:#111;border-radius:.6rem;box-shadow:0 10px 30px rgba(0,0,0,.15);z-index:9999;padding:1.2rem}'+
+    '.ie-dialog .title{font-size:1.2rem;font-weight:700;margin-bottom:.6rem}'+
+    '.ie-dialog .desc{font-size:.95rem;line-height:1.6;color:#555}'+
+    '.ie-dialog .actions{display:flex;justify-content:flex-end;margin-top:1rem}'+
+    '.ie-dialog .actions > * + *{margin-left:.6rem}'+
+    '.ie-dialog .btn{display:inline-flex;align-items:center;justify-content:center;height:2.2rem;padding:0 1rem;border-radius:.4rem;background:#0C8CE9;color:#fff;text-decoration:none}'+
+    '.ie-dialog .btn-secondary{display:inline-flex;align-items:center;justify-content:center;height:2.2rem;padding:0 .9rem;border-radius:.4rem;background:#eee;color:#333;border:1px solid #ddd}'+
+    '@media (prefers-color-scheme: dark){.ie-dialog{background:#1e1f22;color:#e6e6e6}.ie-dialog .desc{color:#c6c6c6}.ie-dialog .btn-secondary{background:#2a2b2f;color:#e6e6e6;border-color:#3a3b3f}}'
+  ))
+  document.head.appendChild(style)
+  var mask = document.createElement('div')
+  mask.className = 'ie-mask'
+  var dialog = document.createElement('div')
+  dialog.className = 'ie-dialog'
+  dialog.innerHTML = '<div class="title">不支持 IE 浏览器</div>'+
+    '<div class="desc">Type Words 使用现代技术构建，请使用 Chrome、Edge、Firefox 或 Safari 等现代浏览器访问。</div>'+
+    '<div class="actions">'+
+    '<a class="btn" href="https://www.google.cn/chrome/" target="_blank" rel="noreferrer">下载 Chrome</a>'+
+    '<button class="btn-secondary" type="button">我知道了</button>'+
+    '</div>'
+  function close(){
+    try{document.body.removeChild(mask)}catch(e){}
+    try{document.body.removeChild(dialog)}catch(e){}
+  }
+  mask.addEventListener('click', close)
+  var btn = null
+  try{btn = dialog.querySelector('.btn-secondary')}catch(e){}
+  if (btn) btn.addEventListener('click', close)
+  document.body.appendChild(mask)
+  document.body.appendChild(dialog)
+})()
+</script>
 <script type="module" src="/src/main.ts"></script>
 </body>
 </html>