feat: add scss preprocessor in docs && fix:(Toast) single lifeMode bug in Toast (DevCloudFE#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;