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;
+}

apps/ui/docs/message.mdx

@@ -0,0 +1,7 @@
+# message
+
+类似antd的message，但是是直接用 `import` 调用
+
+```js
+import { message } from  'https://kevisual.xiongxiao.me/system/ui/message.js'
+```

apps/ui/docs/message.stories.js

@@ -1,11 +1,13 @@
-import { Message, createMessage } from '../deploy/message.js';
+import { message as Message, createMessage } from '../deploy/message.js';
+
 export default {
   title: 'ui/message',
   tags: ['autodocs'],
+  description: 'Message component',
   render: ({ label, fn, ...args }) => {
     const div = createMessage(label, { type: 'success' });
     div.addEventListener('click', () => {
-      fn('Hello World', 2000);
+      Message.success('Hello World', 2000);
     });
     div.style.border = '1px solid #000';
     const uiMessage = document.createElement('div');

apps/ui/theme/modal.mdx

@@ -0,0 +1,131 @@
+import { message } from '../deploy/message.js'
+import { DialogModal } from '@kevisual/ui'
+import '@kevisual/ui/dist/index.css'
+
+Modal
+
+> 使用原生js实现的弹窗组件
+
+
+export const ShowModal = () => {
+  const url = 'https://kevisual.xiongxiao.me/system/theme/index.js'
+
+  const onClick = async () => {
+    console.log('theme', DialogModal)
+    // console.log('clicked')
+    // message.info('Hello, this is a message')
+    const content = document.createElement('div');
+    content.innerHTML = `
+    <div class="bg-white p-8 rounded shadow-md w-full max-w-md text-center">
+      <h2 class="text-2xl font-bold mb-4">Token 无效</h2>
+      <p class="mb-6">您的登录凭证已失效，请重新登录。</p>
+      <a href="/user/login" class="inline-block bg-red-500 text-white py-2 px-4 rounded hover:bg-red-600 transition duration-200">确定</a>
+    </div>
+`;
+    const modal = DialogModal.render(content, {
+      id: 'redirect-to-login',
+      contentStyle: {
+        width: 'unset',
+      },
+      dialogTitleStyle: {
+        display: 'none',
+        padding: '0',
+      },
+      dialogContentStyle: {
+        padding: '0',
+      },
+      mask: true,
+      open: false,
+    });
+    modal.setOpen(true)
+  }
+  return <div onClick={onClick}>点击显示弹窗</div>
+}
+
+<ShowModal />
+
+使用方法
+```js
+// import { DialogModal } from 'https://kevisual.xiongxiao.me/system/theme/index.js'
+import { DialogModal } from '@kevisual/ui';
+import '@kevisual/ui/dist/index.css';
+
+const content = document.createElement('div');
+content.innerHTML = `
+    <div class="bg-white p-8 rounded shadow-md w-full max-w-md text-center">
+      <h2 class="text-2xl font-bold mb-4">Token 无效</h2>
+      <p class="mb-6">您的登录凭证已失效，请重新登录。</p>
+      <a href="/user/login" class="inline-block bg-red-500 text-white py-2 px-4 rounded hover:bg-red-600 transition duration-200">确定</a>
+    </div>
+`;
+export const modal = DialogModal.render(content, {
+  id: 'redirect-to-login',
+  contentStyle: {
+    width: 'unset',
+  },
+  dialogTitleStyle: {
+    display: 'none',
+    padding: '0',
+  },
+  dialogContentStyle: {
+    padding: '0',
+  },
+  mask: true,
+  open: false,
+});
+
+```
+
+类型
+```typescript
+export type ModalOpts<
+  T = {
+    [key: string]: any;
+  },
+  U = {
+    [key: string]: any;
+  },
+> = {
+  root?: HTMLDivElement | string;
+  id?: string;
+  mask?: boolean;
+  maskClassName?: string;
+  maskStyle?: ElStyle;
+  maskClose?: boolean;
+
+  contentClassName?: string;
+  contentStyle?: ElStyle;
+  destroyOnClose?: boolean; // 关闭，把Element移动到cacheFragment中
+  hideOnClose?: boolean; // 关闭后是否销毁，设置display:none
+  open?: boolean;
+
+  onClose?: () => void;
+  defaultStyle?: DefaultStyle<U>;
+} & T;
+export type DefaultStyle<T> = {
+  defaultContentStyle?: ObjCss;
+  defaultMaskStyle?: ObjCss;
+} & T;
+
+type DialogModalOpts = {
+  dialogTitle?: string;
+  dialogTitleClassName?: string;
+  dialogTitleStyle?: ElStyle;
+  dialogTitleEl?: HTMLElement;
+  dialogTitleCloseIcon?: boolean;
+
+  dialogContentClassName?: string;
+  dialogContentStyle?: ElStyle;
+
+  dialogFooterClassName?: string;
+  dialogFooterStyle?: ElStyle;
+} & ModalOpts<KV, DialogDefaultStyle>;
+
+type DialogDefaultStyle = {
+  defaultDialogTitleStyle?: ObjCss;
+  defaultDialogContentStyle?: ObjCss;
+  defaultDialogFooterStyle?: ObjCss;
+};
+
+
+```