From 150484cd96e071294e45242339c4a3edabcf95e7 Mon Sep 17 00:00:00 2001
From: liudi <liudi@cethik.com>
Date: Thu, 23 Dec 2021 14:46:54 +0800
Subject: [PATCH 1/2] fix: Toast in single lifeMode bug

---
 .../devui/toast/src/hooks/use-toast-helper.ts        |  2 +-
 packages/devui-vue/devui/toast/src/toast.tsx         | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/devui-vue/devui/toast/src/hooks/use-toast-helper.ts b/packages/devui-vue/devui/toast/src/hooks/use-toast-helper.ts
index a5652c0f78..a6cd71720b 100644
--- a/packages/devui-vue/devui/toast/src/hooks/use-toast-helper.ts
+++ b/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) {
diff --git a/packages/devui-vue/devui/toast/src/toast.tsx b/packages/devui-vue/devui/toast/src/toast.tsx
index 5f925c361d..59295e0c3f 100644
--- a/packages/devui-vue/devui/toast/src/toast.tsx
+++ b/packages/devui-vue/devui/toast/src/toast.tsx
@@ -106,7 +106,7 @@ 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 {
@@ -114,13 +114,17 @@ export default defineComponent({
       }
     }
 
-    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())
       }

From 952d89ac72b51f504ff4eac10f707629a57d3062 Mon Sep 17 00:00:00 2001
From: liudi <liudi@cethik.com>
Date: Thu, 23 Dec 2021 15:25:37 +0800
Subject: [PATCH 2/2] feat: add scss preprocessor && fix card.md pagination.md
 scss syntax specification

---
 packages/devui-vue/docs/.vitepress/config/markdown.ts  | 4 +++-
 packages/devui-vue/docs/components/card/index.md       | 6 +++---
 packages/devui-vue/docs/components/pagination/index.md | 4 +++-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/devui-vue/docs/.vitepress/config/markdown.ts b/packages/devui-vue/docs/.vitepress/config/markdown.ts
index 2f33761224..6f1cc86e9e 100644
--- a/packages/devui-vue/docs/.vitepress/config/markdown.ts
+++ b/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
diff --git a/packages/devui-vue/docs/components/card/index.md b/packages/devui-vue/docs/components/card/index.md
index 3676149cf2..f304159ed2 100644
--- a/packages/devui-vue/docs/components/card/index.md
+++ b/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;
diff --git a/packages/devui-vue/docs/components/pagination/index.md b/packages/devui-vue/docs/components/pagination/index.md
index b764ae2ee5..f123d91805 100644
--- a/packages/devui-vue/docs/components/pagination/index.md
+++ b/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;