add tailwindcss

apps/ui/deploy/message.js

@@ -59,7 +59,7 @@ export class MessageContainer {
       0 9px 28px 8px rgba(0, 0, 0, 0.05);
         justify-content: center;
         align-item: center;
-        animation: message-slide-down 0.5s ease-out forwards; /* 应用动画 */
+        animation: message-slide-down 0.3s ease-out forwards; /* 应用动画 */
       }
       /* 添加消失类时 */
       .message-wrapper.message-hide {
@@ -188,6 +188,7 @@ export class MessageContainer {
   }
 }
 const controller = new MessageContainer();
+
 export const createMessage = (content, opts) => {
   let { icon, key, style, className, type } = opts || {};
   const div = document.createElement('div');
@@ -207,7 +208,6 @@ export const createMessage = (content, opts) => {
     i.classList.add('message-icon');
     contentDiv.appendChild(i);
   }
-  console.log(content, type, icon, 'content');
   if (content instanceof HTMLElement) {
     contentDiv.appendChild(content);
   } else {
@@ -222,13 +222,17 @@ export const createMessage = (content, opts) => {
 const methods = ['success', 'info', 'warning', 'error', 'loading'];
 
 export class Message {
-  static controller = controller;
-  static open = (message, timeout = 3000, onClose, opts) => {
+  controller = controller;
+  constructor() {
+    this.controller = controller;
+  }
+  open = (message, timeout = 3000, onClose, opts) => {
+    const controller = this.controller;
     const div = createMessage(message, opts);
     const remove = () => {
       div.classList.add('message-hide');
       setTimeout(() => {
-        if (div.isConnected) {
+        if (div?.isConnected) {
           div.remove();
         } else {
           console.log('not connected');
@@ -252,19 +256,21 @@ export class Message {
       remove();
     };
   };
-  static success = (message, timeout = 3000, onClose) => {
-    return Message.open(message, timeout, onClose, { type: 'success' });
+  success = (message, timeout = 1000, onClose) => {
+    return this.open(message, timeout, onClose, { type: 'success' });
   };
-  static info = (message, timeout = 3000, onClose) => {
-    return Message.open(message, timeout, onClose, { type: 'info' });
+  info = (message, timeout = 1500, onClose) => {
+    return this.open(message, timeout, onClose, { type: 'info' });
   };
-  static warning = (message, timeout = 3000, onClose) => {
-    return Message.open(message, timeout, onClose, { type: 'warning' });
+  warning = (message, timeout = 3000, onClose) => {
+    return this.open(message, timeout, onClose, { type: 'warning' });
   };
-  static error = (message, timeout = 3000, onClose) => {
-    return Message.open(message, timeout, onClose, { type: 'error' });
+  error = (message, timeout = 3000, onClose) => {
+    return this.open(message, timeout, onClose, { type: 'error' });
   };
-  static loading = (message, timeout = 0, onClose) => {
-    return Message.open(message, timeout, onClose, { type: 'loading' });
+  loading = (message, timeout = 0, onClose) => {
+    return this.open(message, timeout, onClose, { type: 'loading' });
   };
 }
+
+export const message = new Message();

apps/ui/deploy/theme/index.css

@@ -0,0 +1,27 @@
+#ui-modal-list {
+  position: relative;
+}
+.ui-modal-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 200;
+}
+.ui-modal-close {
+  display: none;
+}
+.ui-modal-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 201;
+}
+.ui-modal-content {
+  position: fixed;
+  z-index: 202;
+}