feat: 新增toast组件

apps/admin-docs/docs/components/demos/toast.tsx

@@ -0,0 +1,30 @@
+import {useState,useCallback,ChangeEvent} from 'React'
+import { Toast } from 'ui'
+
+export default () => {
+  const [val, setVal] = useState('');
+  const handleInput = useCallback((e:ChangeEvent<HTMLInputElement>) => {
+    setVal(e.target.value)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  },[val])
+  const handleSave = useCallback(() => {
+    if (!val) {
+      Toast.message('请输入一些值啦', {
+        type: 'error',
+        zIndex: 100
+      });
+     return
+    }  
+    Toast.message('保持成功', {
+      type: 'correct',
+      zIndex: 100
+    });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  },[val])
+  return (
+    <>
+      <input type="text" value={val} onChange={handleInput} />
+      <button onClick={ handleSave}>保存</button>
+    </>
+  );
+};

apps/admin-docs/docs/components/toast.md

@@ -0,0 +1,22 @@
+---
+title: 提示组件
+atomId: Toast
+package: ui
+description: 基于写的setTimeout和createElement实现
+group:
+  title: 功能
+---
+
+# 提示组件
+
+> 基于写的setTimeout和createElement实现
+
+安装`pnpm add ui --filter @gbeata/admin-docs`
+<code src="./demos/toast"></code>
+
+## API
+
+| 属性名    | 描述         | 类型            | 默认值 |
+| --------- | ------------ | --------------- | ------ |
+| message  | 提示信息       | string | -- |
+| close | 关闭     | string | -- |

packages/ui/modules/Toast/index.less

@@ -0,0 +1,78 @@
+// .b-toast {
+//   display: flex;
+//   align-items: center;
+//   position: fixed;
+//   width: 180px;
+//   height: 90px;
+//   min-width: 20%;
+//   line-height: 1.5;
+//   background: rgba(0, 0, 0, 1);
+//   background: #6fca82;
+//   border-radius: 5px;
+//   opacity: 0.7;
+
+//   top: 50%;
+//   left: 50%;
+//   transform: translate(-50%, -50%);
+//   color: #fff;
+//   text-align: center;
+//   justify-content: center;
+//   padding: 0 9px;
+//   font-size: 14px;
+//   font-family: PingFangSC-Regular;
+// }
+
+.b-toast {
+  position: fixed;
+  top: 20%;
+  left: 50%;
+
+  min-width: 35%;
+  min-height: 37px;
+  padding: 5px 30px;
+
+  transform: translate(-50%, -50%);
+
+  color: #fff;
+  border-radius: 4px;
+
+  font-family: PingFangSC-Regular;
+  font-size: 16px;
+  line-height: 35px;
+  z-index: 99999;
+  &.b-toast-correct {
+    background: #6fca82;
+  }
+  &.b-toast-error {
+    background: #ec7b6a;
+  }
+
+  p {
+    margin: 0 10px 0 0;
+  }
+
+  .b-toast-closer {
+    position: absolute;
+    top: 15px;
+    right: 12px;
+
+    overflow: hidden;
+
+    width: 20px;
+    height: 20px;
+
+    cursor: pointer;
+
+    line-height: 1;
+
+    img {
+      position: relative;
+      position: relative;
+      left: -20px;
+
+      border-right: 20px solid transparent;
+
+      filter: drop-shadow(20px 0);
+    }
+  }
+}

packages/ui/modules/Toast/index.tsx

@@ -0,0 +1,90 @@
+/**
+ * 提示组件
+ */
+import './index.less';
+
+const closerPng = require('./closer.png');
+
+let i = 0; // 多个toast的index
+const closeTime = 2; // 默认关闭时间 单位 s
+
+const toast = {
+  appendToDom(html: string) {
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+    div.outerHTML = html;
+  },
+  close(selector: string, time: number) {
+    const node = document.querySelector(selector) as HTMLElement;
+    return setTimeout(() => {
+      document.body.removeChild(node);
+    }, time);
+  },
+  generateHtml(
+    msg: string,
+    index: number,
+    zIndex?: number,
+    styles: Record<string, any> = {},
+    html?: string,
+    className?: string,
+    type: 'correct' | 'error' = 'error'
+  ) {
+    let cssText = Object.entries(styles).reduce(
+      (styleString, [propName, propValue]) => {
+        return `${styleString}${propName}:${propValue};`;
+      },
+      ''
+    );
+    if (typeof zIndex !== 'undefined') {
+      cssText += `;z-index: ${zIndex};`;
+    }
+    return `
+    <div class="b-toast b-toast-${index} ${className ||
+      ''} b-toast-${type}" style="${cssText}">
+        ${html || ''}
+        <p>${msg}</p>
+        <div class="b-toast-closer b-toast-closer-${index}">
+          <img>
+        </div>
+    </div>
+  `;
+  },
+};
+
+interface IMessage {
+  time?: number;
+  zIndex?: number;
+  html?: string;
+  styles?: Record<string, any>;
+  className?: string;
+  type?: 'correct' | 'error';
+}
+
+export default {
+  message(msg: string, options: IMessage = {}) {
+    const index = ++i;
+    const time = (options.time || closeTime) * 1000;
+    const html = toast.generateHtml(
+      msg,
+      index,
+      options.zIndex,
+      options.styles,
+      options.html,
+      options.className,
+      options.type
+    );
+    toast.appendToDom(html);
+
+    const timer = toast.close(`.b-toast-${index}`, time);
+
+    const closerNode = document.querySelector(
+      `.b-toast-closer-${index} img`
+    ) as HTMLImageElement;
+
+    closerNode.src = closerPng;
+    closerNode.onclick = () => {
+      clearTimeout(timer);
+      toast.close(`.b-toast-${index}`, 0);
+    };
+  },
+};

packages/ui/modules/index.ts

@@ -5,5 +5,6 @@ import GlobalConfig from './GlobalConfig/ConfigProvider';
 import BaseSlick from './Slick/BaseSlick';
 import SvgIcon from './SvgIcon';
 import DrawBoard from './DrawBoard';
+import Toast from './Toast';
 
-export { AnimatePanel, BaseCard, BaseSlick, GlobalConfig, SvgIcon, Translatex, DrawBoard };
+export { AnimatePanel, BaseCard, BaseSlick, GlobalConfig, SvgIcon, Translatex, DrawBoard,Toast };