feat: 打包

apps/ui/docs/message.stories.js

@@ -1,4 +1,4 @@
-import { message as Message, createMessage } from '../deploy/message.js';
+import { message as Message, createMessage } from '../dist/message.js';
 
 export default {
   title: 'ui/message',

apps/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kevisual/system-ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "",
   "main": "dist/index.js",
   "privite": false,
@@ -9,6 +9,7 @@
     "dev": "rollup -c -w",
     "build": "npm run clean && rollup -c",
     "build:components": "rollup -c ./config/rollup.components.config.js",
+    "dev:components": "rollup -c ./config/rollup.components.config.js -w",
     "pub": "envision switchOrg system && envision deploy ./dist -v 0.0.2 -k ui -y y",
     "clean": "rimraf dist"
   },
@@ -33,6 +34,7 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
+    "@types/lodash-es": "^4.17.12",
     "@types/postcss-import": "^14.0.3",
     "@types/react": "^18.3.8",
     "autoprefixer": "^10.4.20",

apps/ui/src/components/message/message.ts

@@ -41,7 +41,7 @@ export class MessageContainer {
       }
       .message-wrapper {
         display: flex;
-        transition: transform 2s ease-in-out, opacity 1.2s ease-in-out; /* 缩小并淡出 */
+        transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* 缩小并淡出 */
       }
       .message-wrapper:first-child {
         margin-top: 20px;
@@ -49,15 +49,15 @@ export class MessageContainer {
       .message {
         display: flex;
         gap: 10px;
-        padding: 6px 10px;
+        padding: 4px 10px;
         margin: 0 auto;
-        border-radius: 4px;
+        border-radius: 8px;
         background-color: white;
         box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
       0 3px 6px -4px rgba(0, 0, 0, 0.12),
       0 9px 28px 8px rgba(0, 0, 0, 0.05);
         justify-content: center;
-        align-item: center;
+        align-items: center;
         animation: message-slide-down 0.3s ease-out forwards; /* 应用动画 */
       }
       /* 添加消失类时 */
@@ -66,8 +66,6 @@ export class MessageContainer {
         opacity: 0;
         pointer-events: none; /* 防止交互 */
       }
-      .message-success {
-      }
       @keyframes message-slide-down {
         0% {
           transform: translateY(-100px); /* 从上方开始 */
@@ -87,6 +85,7 @@ export class MessageContainer {
         height: 24px;
         box-sizing: border-box;
       }
+
       .message-icon::before {
         content: "";
         position: absolute;
@@ -95,27 +94,44 @@ export class MessageContainer {
         width: 5px;
         height: 10px;
       }
+
       .icon-success {
-        border: 2px solid green; /* 外圆圈 */
+        background: green; /* 背景颜色为绿色 */
+        color: white; /* 文字颜色为白色 */
+        border: 1px solid green; /* 外圆圈2 */
         border-radius: 50%; /* 使其为圆形 */
+        width: 20px;
+        height: 20px;
+        position: relative;
+        box-sizing: border-box;
       }
+
       .icon-success::before {
-        border-right: 2px solid green; /* 打勾的右边部分 */
+        content: "";
-        border-bottom: 2px solid green; /* 打勾的下边部分 */
+        position: absolute;
-        transform: rotate(45deg);
+        left: 7px;
+        top: 3px;
+        width: 5px;
+        height: 10px;
+        border-right: 2px solid white; /* 打勾的右边部分 */
+        border-bottom: 2px solid white; /* 打勾的下边部分 */
+        transform: rotate(45deg); /* 旋转形成勾形 */
+        box-sizing: border-box;
       }
       .icon-info {
-        border: 2px solid blue; /* 外圆圈 */
+        border: 1px solid blue; /* 外圆圈 */
         border-radius: 50%; /* 使其为圆形 */
+        background: blue; /* 背景颜色为蓝色 */
+        width: 20px;
+        height: 20px;
       }
       .icon-info::before {
         content: "i";
         position: absolute;
-        top: 0px;
+        top: -2px;
-        color: blue;
+        color: white; /* 文字颜色为白色 */
         font-weight: bold;
         font-size: 16px;
-        left: 8px;
       }
       .icon-error::before, .icon-error::after {
         content: "";
@@ -123,13 +139,16 @@ export class MessageContainer {
         top: 4px;
         left: 50%;
         width: 2px;
-        height: 12px;
+        height: 10px;
-        background-color: red;
+        background-color: white; /* 线条颜色为白色 */
         transform-origin: center;
       }
       .icon-error {
-        border: 2px solid red; /* 外圆圈 */
+        border: 1px solid red; /* 外圆圈 */
         border-radius: 50%; /* 使其为圆形 */
+        background: red; /* 背景颜色为红色 */
+        width: 20px;
+        height: 20px;
       }
       .icon-error::before {
         transform: translateX(-50%) rotate(45deg); /* 旋转形成叉号的一部分 */
@@ -139,29 +158,24 @@ export class MessageContainer {
         transform: translateX(-50%) rotate(-45deg); /* 旋转形成叉号的另一部分 */
       }
       .icon-warning {
-        position: relative;
+        border: 1px solid orange; /* 外圆圈 */
-        width: 0;
+        border-radius: 50%; /* 使其为圆形 */
-        height: 0;
+        background: orange; /* 背景颜色为蓝色 */
-        border-left: 12px solid transparent;
+        width: 20px;
-        border-right: 12px solid transparent;
+        height: 20px;
-        border-bottom: 24px solid orange; /* 三角形 */
-        display: inline-block;
-        transform: scale(0.8); /* 缩小三角形 */
       }
 
       .icon-warning::before {
         content: "!";
         position: absolute;
-        top: 5px;
+        top: -2px;
-        left: 50%;
+        color: white; /* 文字颜色为白色 */
-        transform: translateX(-50%);
-        color: white;
         font-weight: bold;
         font-size: 16px;
       }
       .icon-loading {
-        width: 24px;
+        width: 20px;
-        height: 24px;
+        height: 20px;
         border: 3px solid #f3f3f3; /* 边框颜色，用于加载圈的背景 */
         border-top: 3px solid #3498db; /* 顶部边框的颜色，用于显示加载进度 */
         border-radius: 50%; /* 圆形 */
@@ -188,7 +202,15 @@ export class MessageContainer {
 }
 const controller = new MessageContainer();
 
-export const createMessage = (content, opts) => {
+type MessageOpts = {
+  /** w-20px h-20px */
+  icon?: string;
+  key?: string;
+  style?: string;
+  className?: string;
+  type?: string;
+};
+export const createMessage = (content: string | Element, opts: MessageOpts) => {
   let { icon, key, style, className, type } = opts || {};
   const div = document.createElement('div');
   div.className = 'message-wrapper' + (className ? ' ' + className : '');
@@ -211,7 +233,7 @@ export const createMessage = (content, opts) => {
   }
   if (content instanceof HTMLElement) {
     contentDiv.appendChild(content);
-  } else {
+  } else if (typeof content === 'string') {
     const text = document.createElement('span');
     text.innerText = content;
     contentDiv.appendChild(text);
@@ -227,7 +249,7 @@ export class Message {
   constructor() {
     this.controller = controller;
   }
-  open = (message, timeout = 3000, onClose, opts) => {
+  open = (message: string | Element, timeout = 3000, onClose, opts) => {
     const controller = this.controller;
     const div = createMessage(message, opts);
     const remove = () => {

apps/ui/src/components/modal/blank-modal.ts

@@ -1,5 +1,5 @@
 import { Modal, ModalOpts, KV } from './modal';
-import { SelectEl, querySelector, elAddCS, ElStyle, elAddCS2 } from '../../utils/query-el';
+import { SelectEl, querySelector, ElStyle, elAddCS2 } from '../../utils/query-el';
 import { ObjCss } from '../../utils/css';
 
 export class BlankModal extends Modal {
@@ -8,15 +8,18 @@ export class BlankModal extends Modal {
   }
 }
 type DialogModalOpts = {
+  /** 标题的内容 */
   dialogTitle?: string;
   dialogTitleClassName?: string;
   dialogTitleStyle?: ElStyle;
   dialogTitleEl?: HTMLElement;
   dialogTitleCloseIcon?: boolean;
 
+  /** 内容的模块 */
   dialogContentClassName?: string;
   dialogContentStyle?: ElStyle;
 
+  /** Footer的模块 */
   dialogFooterClassName?: string;
   dialogFooterStyle?: ElStyle;
 } & ModalOpts<KV, DialogDefaultStyle>;

apps/ui/src/components/modal/modal.ts

@@ -1,4 +1,4 @@
-import { querySelector, elAddCS, ElStyle, elAddCS2 } from '../../utils/query-el';
+import { querySelector, ElStyle, elAddCS2 } from '../../utils/query-el';
 import { generateId } from '../../utils/nanoid';
 import { modalStore } from './store';
 import { InitModalEvent } from './event';
@@ -28,6 +28,7 @@ export type ModalOpts<
   open?: boolean;
 
   onClose?: () => void;
+  /** 默认的样式属性， content style 和 mask style 等 */
   defaultStyle?: DefaultStyle<U>;
 } & T;
 export type DefaultStyle<T> = {
@@ -105,8 +106,8 @@ export class Modal<T = any, U = KV> {
 
     return _root;
   }
-  static render<T extends new (...args: any[]) => any>(this: T,el: string | HTMLDivElement, id: string, opts?: ConstructorParameters<T>[0]): InstanceType<T>;
+  static render<T extends new (...args: any[]) => any>(this: T, el: string | HTMLDivElement, id: string, opts?: ConstructorParameters<T>[0]): InstanceType<T>;
-  static render<T extends new (...args: any[]) => any>(this: T,el: string | HTMLDivElement, opts?: ConstructorParameters<T>[0]): InstanceType<T>;
+  static render<T extends new (...args: any[]) => any>(this: T, el: string | HTMLDivElement, opts?: ConstructorParameters<T>[0]): InstanceType<T>;
   static render(...args: any[]) {
     let [el, id, opts] = args;
     const _el = querySelector(el);
@@ -142,7 +143,7 @@ export class Modal<T = any, U = KV> {
     _modal.renderEl(_el);
     return _modal;
   }
-  static create<T extends new (...args: any[]) => any>(this:T, opts: ModalOpts):InstanceType<T> {
+  static create<T extends new (...args: any[]) => any>(this: T, opts: ModalOpts): InstanceType<T> {
     let _id = opts.id;
     let _modal: Modal | undefined;
     const modalState = modalStore.getState();
@@ -169,6 +170,7 @@ export class Modal<T = any, U = KV> {
     return mask;
   }
   renderEl(el: HTMLDivElement) {
+    // base 的模块如果 defaultContentStyle 不存在，则使用默认的样式
     const defaultContentStyle = this.defaultStyle?.defaultContentStyle || {
       position: 'absolute',
       padding: '20px',

apps/ui/src/components/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './load-css';
+
+export * from './is';

apps/ui/src/components/utils/is.ts

@@ -0,0 +1,8 @@
+import { isNil, isEmpty } from 'lodash-es';
+
+/**
+ * Check if the value is null or empty object
+ */
+export const isObjectEmpty = (value: any) => {
+  return isNil(value) || isEmpty(value);
+};

apps/ui/src/components/utils/load-css.ts

@@ -0,0 +1,23 @@
+type LoadCSSOptions = {
+  key?: string;
+  url: string;
+  force?: boolean;
+};
+export const loadCSS = (opts: LoadCSSOptions | string) => {
+  if (typeof opts === 'string') {
+    opts = { url: opts };
+  }
+  const { key, url, force } = opts;
+  let cssKeyDom = document.querySelector('#load-css-' + key);
+  if (!force && key && cssKeyDom) {
+    // console.log('css already loaded', key);
+    return;
+  } else if (key && cssKeyDom) {
+    cssKeyDom.remove();
+  }
+  const link = document.createElement('link');
+  link.id = key ? 'load-css-' + key : '';
+  link.rel = 'stylesheet';
+  link.href = url;
+  document.head.appendChild(link);
+};

apps/ui/src/utils/extra.ts

@@ -1,3 +1,8 @@
+/**
+ * 把字符串中的{{key}}替换成对应的值
+ * @param text 
+ * @returns 
+ */
 export function extractKeysFromBraces(text: string) {
   const regex = /\{\{\s*(.*?)\s*\}\}/g;
   const keys: string[] = [];

apps/ui/src/utils/store.ts

@@ -1,3 +1,5 @@
 import { createStore } from 'zustand/vanilla';
+import { shallow } from 'zustand/vanilla/shallow';
+export type { StateCreator, StoreApi } from 'zustand/vanilla';
 
-export { createStore };
+export { createStore, shallow };

apps/ui/theme/modal.mdx

@@ -1,14 +1,16 @@
-import { message } from '../deploy/message.js'
+import { message } from '../dist/message.js'
-import { DialogModal } from '@kevisual/ui'
+import { DialogModal } from '@kevisual/system-ui'
-import '@kevisual/ui/dist/index.css'
+import '@kevisual/system-ui/dist/index.css'
 
-Modal
+# Modal
 
 > 使用原生js实现的弹窗组件
 
+安装 `npm i @kevisual/system-ui`
+
 
 export const ShowModal = () => {
-  const url = 'https://kevisual.xiongxiao.me/system/theme/index.js'
+  const url = 'https://kevisual.xiongxiao.me/system/ui/index.js'
 
   const onClick = async () => {
     console.log('theme', DialogModal)
@@ -44,11 +46,14 @@ export const ShowModal = () => {
 
 <ShowModal />
 
-使用方法
+*使用方法*
+
 ```js
-// import { DialogModal } from 'https://kevisual.xiongxiao.me/system/theme/index.js'
+// import { DialogModal, loadCss } from 'https://kevisual.xiongxiao.me/system/ui/index.js'
-import { DialogModal } from '@kevisual/ui';
+// loadCss('https://kevisual.xiongxiao.me/system/ui/index.css')
-import '@kevisual/ui/dist/index.css';
+
+import { DialogModal } from '@kevisual/system-ui';
+import '@kevisual/system-ui/dist/index.css';
 
 const content = document.createElement('div');
 content.innerHTML = `

package.json

@@ -31,7 +31,9 @@
     "tailwindcss": "^3.4.14"
   },
   "dependencies": {
-    "@kevisual/ui": "^0.0.2",
+    "@kevisual/system-ui": "^0.0.1",
-    "systemjs": "^6.15.1"
+    "immer": "^10.1.1",
+    "systemjs": "^6.15.1",
+    "zustand": "5.0.0-rc.2"
   }
 }

pnpm-lock.yaml

@@ -8,12 +8,18 @@ importers:
 
   .:
     dependencies:
-      '@kevisual/ui':
+      '@kevisual/system-ui':
-        specifier: ^0.0.2
+        specifier: ^0.0.1
-        version: 0.0.2
+        version: 0.0.1(rollup@4.24.0)(typescript@5.6.3)
+      immer:
+        specifier: ^10.1.1
+        version: 10.1.1
       systemjs:
         specifier: ^6.15.1
         version: 6.15.1
+      zustand:
+        specifier: 5.0.0-rc.2
+        version: 5.0.0-rc.2(@types/react@18.3.11)(immer@10.1.1)(react@18.3.1)
     devDependencies:
       '@chromatic-com/storybook':
         specifier: ^2.0.2
@@ -102,6 +108,9 @@ importers:
       '@rollup/plugin-typescript':
         specifier: ^11.1.6
         version: 11.1.6(rollup@4.24.0)(tslib@2.8.0)(typescript@5.6.3)
+      '@types/lodash-es':
+        specifier: ^4.17.12
+        version: 4.17.12
       '@types/postcss-import':
         specifier: ^14.0.3
         version: 14.0.3
@@ -493,8 +502,8 @@ packages:
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
-  '@kevisual/ui@0.0.2':
+  '@kevisual/system-ui@0.0.1':
-    resolution: {integrity: sha512-M47Z16TX5fN/lY8nvyN6y9CERXVvQ885Mi6hbSHythXuiay+GHO9FD4M6ib33LJlVpxQaVOmHwW3uD16h+pCdQ==}
+    resolution: {integrity: sha512-TpIlzmft/4XsiCmIfEYSSqOCBoJR63W0l/ztnaIvJba1WymnysLdLniLsmKRLViOpxRg79wH5jlBoBP3UydEvg==}
 
   '@mdx-js/react@3.0.1':
     resolution: {integrity: sha512-9ZrPIU4MGf6et1m1ov3zKf+q9+deetI51zprKB1D/z3NOb+rUxxtEl3mCjW5wTGh6VhRdwPueh1oRzi6ezkA8A==}
@@ -953,6 +962,9 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
+  '@types/lodash-es@4.17.12':
+    resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
+
   '@types/lodash@4.17.11':
     resolution: {integrity: sha512-jzqWo/uQP/iqeGGTjhgFp2yaCrCYTauASQcpdzESNCkHjSprBJVcZP9KG9aQ0q+xcsXiKd/iuw/4dLjS3Odc7Q==}
 
@@ -3573,11 +3585,16 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
-  '@kevisual/ui@0.0.2':
+  '@kevisual/system-ui@0.0.1(rollup@4.24.0)(typescript@5.6.3)':
     dependencies:
       dayjs: 1.11.13
+      glob: 11.0.0
       lodash-es: 4.17.21
+      rollup-plugin-dts: 6.1.1(rollup@4.24.0)(typescript@5.6.3)
       style-to-object: 1.0.8
+    transitivePeerDependencies:
+      - rollup
+      - typescript
 
   '@mdx-js/react@3.0.1(@types/react@18.3.11)(react@18.3.1)':
     dependencies:
@@ -4108,6 +4125,10 @@ snapshots:
 
   '@types/json-schema@7.0.15': {}
 
+  '@types/lodash-es@4.17.12':
+    dependencies:
+      '@types/lodash': 4.17.11
+
   '@types/lodash@4.17.11': {}
 
   '@types/mdx@2.0.13': {}