feat: add scss preprocessor in docs && fix:(Toast) single lifeMode bug in Toast (#65)

* fix: Toast in single lifeMode bug

* feat: add scss preprocessor && fix card.md pagination.md scss syntax specification

Author: liuxdi

packages/devui-vue/devui/toast/src/hooks/use-toast-helper.ts

@@ -1,4 +1,4 @@
-import { Message } from '../src/toast.type'
+import { Message } from '../toast-types'
 
 export function useToastHelper() {
   function severityDelay(msg: Message) {

packages/devui-vue/devui/toast/src/toast.tsx

@@ -106,21 +106,25 @@ export default defineComponent({
       if (props.lifeMode === 'single') {
         setTimeout(() => {
           messages.value.forEach((msg, i) => {
-            timeoutArr[i] = setTimeout(() => singleModeRemove(msg, i), msg.life || severityDelay(msg))
+            timeoutArr[i] = setTimeout(() => singleModeRemove(msg), msg.life || severityDelay(msg))
           })
         })
       } else {
         timeout = setTimeout(() => removeAll(), defaultLife.value)
       }
     }
 
-    function singleModeRemove(msg: Message, i: number) {
+    function singleModeRemove(msg: Message) {
       removeMsgAnimation(msg)
       setTimeout(() => {
         onCloseEvent(msg)
 
         if (hasMsgAnimation()) {
-          messages.value.splice(i, 1)
+          // avoid index confusion in settimeout
+          const index = messages.value.indexOf(msg)
+          if (index !== -1) {
+            messages.value.splice(index, 1)
+          }
         } else {
           messages.value = []
         }
@@ -199,7 +203,7 @@ export default defineComponent({
       if (props.lifeMode === 'single') {
         const msgLife = msg!.life || severityDelay(msg!)
         const remainTime = msgLife - (Date.now() - timestamp)
-        timeoutArr[i!] = setTimeout(() => singleModeRemove(msg!, i!), remainTime)
+        timeoutArr[i!] = setTimeout(() => singleModeRemove(msg!), remainTime)
       } else {
         resetDelay(() => removeAll())
       }

packages/devui-vue/docs/.vitepress/config/markdown.ts

@@ -1,7 +1,9 @@
 const markdown = {
   config: (md) => {
     const { demoBlockPlugin } = require('vitepress-theme-demoblock')
-    md.use(demoBlockPlugin)
+    md.use(demoBlockPlugin, {
+      cssPreprocessor: 'scss'
+    })
   }
 }
 export default markdown

packages/devui-vue/docs/components/card/index.md

@@ -39,7 +39,7 @@
   </d-card>
 </template>
 <style lang="scss">
-@import '@devui-design/icons/icomoon/devui-icon.css'
+@import '@devui-design/icons/icomoon/devui-icon.css';
 .card-demo-icon {
   cursor: pointer;
   font-size: 16px;
@@ -114,7 +114,7 @@
   </d-card>
 </template>
 <style lang="scss">
-  @import '@devui-design/icons/icomoon/devui-icon.css'
+  @import '@devui-design/icons/icomoon/devui-icon.css';
   .icon {
     cursor: pointer;
     font-size: 16px;
@@ -185,7 +185,7 @@
   </d-card>
 </template>
 <style lang="scss">
-  @import '@devui-design/icons/icomoon/devui-icon.css'
+  @import '@devui-design/icons/icomoon/devui-icon.css';
   .icon {
     cursor: pointer;
     font-size: 16px;

packages/devui-vue/docs/components/pagination/index.md

@@ -160,7 +160,9 @@ export default defineComponent({
 })
 </script>
 
-<style>
+<style lang="scss">
+@import '@devui/styles-var/devui-var.scss';
+
 /* 配置中的每一项，自定义项建议应用此样式或在此基础上修改 */
 .pagination-config-item {
   padding-bottom: 8px;