Merge branch 'main' of git.xiongxiao.me:kevisual/theme

.npmrc

@@ -1 +1,2 @@
 @abearxiong:registry=https://npm.pkg.github.com
+@kevisual:registry=https://npm.xiongxiao.me

package.json

@@ -9,5 +9,9 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "packageManager": "pnpm@10.10.0"
+  "packageManager": "pnpm@10.10.0",
+  "devDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  }
 }

packages/tailwind/.npmrc

@@ -0,0 +1 @@
+@build:registry=https://npm.xiongxiao.me

packages/tailwind/css/loading.css

@@ -0,0 +1,13 @@
+@tailwind components;
+
+@layer components {
+  .loading {
+    @apply w-full h-full flex justify-center items-center;
+    > div {
+      @apply w-20 h-20 border-t-8 border-b-8  rounded-full animate-spin;
+    }
+  }
+  .loading-sm {
+    @apply w-4 h-4 border-t-2 border-b-2  rounded-full animate-spin;
+  }
+}

packages/tailwind/css/scrollbar.css

@@ -0,0 +1,30 @@
+.scrollbar {
+  /* 整个滚动条 */
+  &::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+  }
+
+  /* 滚动条有滑块的轨道部分 */
+  &::-webkit-scrollbar-track-piece {
+    background-color: transparent;
+    border-radius: 1px;
+  }
+
+  /* 滚动条滑块(竖向:vertical 横向:horizontal) */
+  &::-webkit-scrollbar-thumb {
+    cursor: pointer;
+    background-color: black;
+    border-radius: 5px;
+  }
+
+  /* 滚动条滑块hover */
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: #999999;
+  }
+
+  /* 同时有垂直和水平滚动条时交汇的部分 */
+  &::-webkit-scrollbar-corner {
+    display: block; /* 修复交汇时出现的白块 */
+  }
+}

packages/tailwind/extends/theme.js

@@ -0,0 +1,9 @@
+export const extend = {
+  fontFamily: {
+    mon: ['Montserrat', 'sans-serif'], // 定义自定义字体族
+    rob: ['Roboto', 'sans-serif'],
+    int: ['Inter', 'sans-serif'],
+    orb: ['Orbitron', 'sans-serif'],
+    din: ['DIN', 'sans-serif'],
+  },
+};

packages/tailwind/index.css

@@ -0,0 +1,3 @@
+@import "./css/globals.css";
+@import "./css/loading.css";
+@import "./css/scrollbar.css"

packages/tailwind/package.json

@@ -1,16 +1,28 @@
 {
-  "name": "@kevisual/tailwind",
+  "name": "@build/tailwind",
-  "version": "1.0.0",
+  "version": "1.0.2-alpha-2",
   "description": "",
-  "main": "index.js",
+  "main": "plugin/index.js",
+  "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "files": [
     "plugins",
-    "css"
+    "css",
+    "extends",
+    "tailwind.config.js",
+    "src",
+    "index.css",
+    "dist"
   ],
   "keywords": [],
   "author": "abearxiong",
-  "license": "ISC"
+  "license": "ISC",
+  "exports": {
+    ".": "./plugins/index.js",
+    "./main.css": "./index.css",
+    "./css": "./css/globals.css",
+    "./loading": "./css/loading.css"
+  }
 }

packages/tailwind/plugins/index.js

@@ -20,6 +20,7 @@ const flexCenter = plugin(function ({ addUtilities }) {
     '.card-body': {},
     '.card-footer': {},
     '.card-key': {},
+    '.loading': {},
   });
 });
 

packages/tailwind/readme.md

@@ -0,0 +1,51 @@
+# tailwind 收集模块
+
+```mjs
+import path from 'path';
+
+const root = path.resolve(process.cwd());
+const contents = ['./src/**/*.{ts,tsx,html}', './src/**/*.css'];
+const content = contents.map((item) => path.join(root, item));
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ['class'],
+  content: content,
+  plugins: [
+    require('@tailwindcss/aspect-ratio'), //
+    require('@tailwindcss/typography'),
+    require('tailwindcss-animate'),
+    require('./plugins/index'),
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        mon: ['Montserrat', 'sans-serif'], // 定义自定义字体族
+        rob: ['Roboto', 'sans-serif'],
+        int: ['Inter', 'sans-serif'],
+        orb: ['Orbitron', 'sans-serif'],
+        din: ['DIN', 'sans-serif'],
+      },
+    },
+    screen: {
+      sm: '640px',
+      // => @media (min-width: 640px) { ... }
+
+      md: '768px',
+      // => @media (min-width: 768px) { ... }
+
+      lg: '1024px',
+      // => @media (min-width: 1024px) { ... }
+
+      xl: '1280px',
+      // => @media (min-width: 1280px) { ... }
+
+      '2xl': '1536px',
+      // => @media (min-width: 1536px) { ... }
+      '3xl': '1920px',
+      // => @media (min-width: 1920) { ... }
+      '4xl': '2560px',
+      // => @media (min-width: 2560) { ... }
+    },
+  },
+};
+```

packages/tailwind/tailwind.config.js

@@ -0,0 +1,47 @@
+import path from 'path';
+
+const root = path.resolve(process.cwd());
+const contents = ['./src/**/*.{ts,tsx,html}', './src/**/*.css']
+const content = contents.map((item) => path.join(root, item));
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ['class'],
+  content: content,
+  plugins: [
+    require('@tailwindcss/aspect-ratio'), //
+    require('@tailwindcss/typography'),
+    require('tailwindcss-animate'),
+    require('./plugins/index'),
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        mon: ['Montserrat', 'sans-serif'], // 定义自定义字体族
+        rob: ['Roboto', 'sans-serif'],
+        int: ['Inter', 'sans-serif'],
+        orb: ['Orbitron', 'sans-serif'],
+        din: ['DIN', 'sans-serif'],
+      },
+    },
+    screen: {
+      sm: '640px',
+      // => @media (min-width: 640px) { ... }
+
+      md: '768px',
+      // => @media (min-width: 768px) { ... }
+
+      lg: '1024px',
+      // => @media (min-width: 1024px) { ... }
+
+      xl: '1280px',
+      // => @media (min-width: 1280px) { ... }
+
+      '2xl': '1536px',
+      // => @media (min-width: 1536px) { ... }
+      '3xl': '1920px',
+      // => @media (min-width: 1920) { ... }
+      '4xl': '2560px',
+      // => @media (min-width: 2560) { ... }
+    },
+  },
+};

packages/theme-preview/src/App.tsx

@@ -13,7 +13,7 @@ export const App = () => {
         }}>
         <Router>
           <Routes>
-            <Route path='/' element={<Navigate to='/model/' />} />
+            <Route path='/' element={<Navigate to='/modal/' />} />
             <Route path='/modal/*' element={<FlowApps />} />
             <Route path='/codemirror/*' element={<CodeMirrorApp />} />
             <Route path='/404' element={<div>404</div>} />

packages/theme-preview/src/pages/model/create-dom.ts

@@ -29,7 +29,7 @@ export function createDOMElement(jsxElement: JSX.Element) {
   }
 
   const domElement = document.createElement(type);
-
+  if (!props) return domElement;
   // 处理 props
   Object.keys(props).forEach((prop) => {
     if (prop === 'children') {

packages/theme-preview/src/pages/model/index.tsx

@@ -78,6 +78,7 @@ const ModelTwo = () => {
 const ModelTwo2 = () => {
   const ref = useRef<HTMLDivElement>(null);
   const showModel = () => {
+    console.log('refHide', refHide);
     const div = createDOMElement(refHide);
     const model = DialogModal.render(ref.current! || div, {
       dialogTitle: 'Dialog Modal',

packages/ui/.npmrc

@@ -0,0 +1,3 @@
+//npm.xiongxiao.me/:_authToken=${ME_NPM_TOKEN}
+@abearxiong:registry=https://npm.pkg.github.com
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}

packages/ui/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@kevisual/ui",
-  "version": "0.0.2",
+  "version": "0.0.4-alpha-1",
   "description": "",
   "main": "dist/index.js",
   "privite": false,
+  "type": "module",
   "scripts": {
     "tsc": "tsc",
     "dev": "rollup -c -w",
     "build": "npm run clean && rollup -c",
+    "build:lib": "cross-env TYPE=apps rollup -c",
+    "deploy": "envision switchOrg system && envision deploy ./dist -k theme -v 0.0.1",
     "clean": "rimraf dist"
   },
   "files": [
@@ -18,21 +21,24 @@
   "keywords": [],
   "author": "abearxiong",
   "devDependencies": {
-    "@emotion/serialize": "^1.3.1",
+    "@emotion/serialize": "^1.3.2",
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-commonjs": "^28.0.1",
-    "@rollup/plugin-typescript": "^11.1.6",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.1",
     "@types/postcss-import": "^14.0.3",
-    "@types/react": "^18.3.8",
+    "@types/react": "^18.3.12",
     "autoprefixer": "^10.4.20",
+    "cross-env": "^7.0.3",
     "cssnano": "^7.0.6",
     "immer": "^10.1.1",
-    "nanoid": "^5.0.7",
+    "nanoid": "^5.0.8",
     "postcss-import": "^16.1.0",
-    "rollup": "^4.22.2",
+    "rollup": "^4.24.3",
     "rollup-plugin-postcss": "^4.0.2",
-    "ts-lib": "^0.0.5",
+    "typescript": "^5.6.3",
-    "typescript": "^5.6.2",
+    "zustand": "5.0.1",
-    "zustand": "5.0.0-rc.2"
+    "@kevisual/system-ui": "^0.0.2"
   },
   "dependencies": {
     "dayjs": "^1.11.13",

packages/ui/rollup.config.js

@@ -1,27 +1,41 @@
 import resolve from '@rollup/plugin-node-resolve';
 import typescript from '@rollup/plugin-typescript';
-
+import commonjs from '@rollup/plugin-commonjs';
 import postcss from 'rollup-plugin-postcss';
 import autoprefixer from 'autoprefixer';
 import cssnano from 'cssnano';
+import terser from '@rollup/plugin-terser';
+
 import postcssImport from 'postcss-import';
 
+const isApps = process.env.TYPE === 'apps';
 const entrys = ['index'];
+/**
+ * @type {import('rollup').RollupOptions[]}
+ */
 const configs = entrys.map((entry) => ({
   input: `./src/${entry}.ts`, // 修改输入文件为 TypeScript 文件
   output: {
     file: `./dist/${entry}.js`,
+    // dir: 'dist',
+    format: 'es', // 输出格式为 ES Module
   },
   plugins: [
-    // resolve(),
+    resolve({
+      browser: true, // 处理浏览器版本的依赖
+    }),
+    commonjs(),
     typescript({
       tsconfig: './tsconfig.json',
       compilerOptions: {
-        declaration: true, // 生成声明文件
+        declaration: !isApps, // 生成声明文件
         declarationDir: './dist', // 声明文件输出目录
+        // outDir: './types', //
       },
     }), // 添加 TypeScript 插件
+    // terser(), // 压缩输出的 ES Module 文件
   ],
+  external: ['react', 'react-dom'], // 告诉 Rollup 不要将 react/react-dom 打包，而是作为外部依赖
 }));
 
 const entryCss = ['index'];

packages/ui/src/components/card/CardBlank.tsx

@@ -0,0 +1,15 @@
+type CardBlankProps = {
+  number?: number;
+  className?: string;
+};
+export const CardBlank = (props: CardBlankProps) => {
+  const { number = 4, className } = props;
+  const _className = 'card-blank w-[300px] flex-shrink-0' + (className ? ' ' + className : '');
+  return (
+    <>
+      {new Array(number).fill(0).map((_, index) => {
+        return <div key={index} className={_className}></div>;
+      })}
+    </>
+  );
+};

packages/ui/src/components/card/index.ts

@@ -0,0 +1 @@
+export { CardBlank } from './CardBlank'

packages/ui/src/components/loading/Load.tsx

@@ -0,0 +1,24 @@
+type LoadingProps = {
+  loading?: boolean;
+  children?: React.ReactNode;
+};
+export const Loading = (props: LoadingProps) => {
+  if (!props.loading) return <>{props.children}</>;
+  return (
+    <div className='w-full h-full flex justify-center items-center'>
+      <div className='w-20 h-20 border-t-8 border-b-8  rounded-full animate-spin'></div>
+    </div>
+  );
+};
+type ShowContentProps = {
+  className: string;
+  open?: boolean;
+  children?: React.ReactNode;
+  blank?: React.ReactNode;
+};
+
+export const LoadContent = (props: ShowContentProps) => {
+  let open = props.open ?? true;
+  if (open) return <>{props.children}</>;
+  return <div className={props.className}>{props?.blank}</div>;
+};

packages/ui/src/components/loading/index.ts

@@ -0,0 +1 @@
+export * from './Load';

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

@@ -1,176 +0,0 @@
-import { Modal, ModalOpts, KV } from './modal';
-import { SelectEl, querySelector, elAddCS, ElStyle, elAddCS2 } from '../../utils/query-el';
-import { ObjCss } from '../../utils/css';
-
-export class BlankModal extends Modal {
-  constructor(opts: ModalOpts) {
-    super(opts);
-  }
-}
-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;
-};
-
-export class DialogModal extends Modal<DialogModalOpts, DialogDefaultStyle> {
-  dialogTitle?: string;
-  dialogTitleClassName?: string;
-  dialogTitleStyle?: ElStyle;
-  dialogTitleEl?: HTMLElement;
-  dialogTitleCloseIcon?: boolean;
-
-  dialogContentClassName?: string;
-  dialogContentStyle?: ElStyle;
-
-  dialogFooterShow?: boolean;
-  dialogFooterClassName?: string;
-  dialogFooterStyle?: ElStyle;
-
-  constructor(opts: ModalOpts<DialogModalOpts, DialogDefaultStyle>) {
-    super(opts);
-
-    this.dialogTitle = opts.dialogTitle;
-    this.dialogTitleClassName = opts.dialogTitleClassName;
-    this.dialogTitleStyle = opts.dialogTitleStyle;
-    this.dialogTitleEl = opts.dialogTitleEl;
-    this.dialogTitleCloseIcon = opts.dialogTitleCloseIcon;
-
-    this.dialogContentClassName = opts.dialogContentClassName;
-    this.dialogContentStyle = opts.dialogContentStyle;
-
-    this.dialogFooterClassName = opts.dialogFooterClassName;
-    this.dialogFooterStyle = opts.dialogFooterStyle;
-    this.dialogFooterShow = opts.dialogFooterShow ?? false;
-
-    this.setDefaultStyle('defaultContentStyle', {
-      position: 'absolute',
-      padding: '0px',
-      left: '50%',
-      top: '20%',
-      width: '600px',
-      background: '#fff',
-      borderRadius: '5px',
-      boxShadow: '0 0 10px rgba(0,0,0,.1)',
-      transform: 'translate(-50%, -50%)',
-      maxHeight: '80vh',
-      overflow: 'auto',
-      ...opts?.defaultStyle?.defaultContentStyle,
-    });
-
-    this.setDefaultStyle('defaultDialogTitleStyle', {
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      position: 'sticky',
-      padding: '10px 20px',
-      top: '0',
-      fontSize: '16px',
-      background: '#fff',
-      marginTop: '-10px',
-      borderBottom: '1px solid #f0f0f0',
-      marginBottom: '5px',
-      ...opts?.defaultStyle?.defaultDialogTitleStyle,
-    });
-    this.setDefaultStyle('defaultDialogContentStyle', {
-      padding: '20px',
-      ...opts?.defaultStyle?.defaultDialogContentStyle,
-    });
-    this.setDefaultStyle('defaultDialogFooterStyle', {
-      display: 'flex',
-      justifyItems: 'end',
-      borderTop: '1px solid #f0f0f0',
-      padding: '10px 20px',
-      ...opts?.defaultStyle?.defaultDialogFooterStyle,
-    });
-  }
-  // static render(el: string | HTMLDivElement, id: string, opts?: DialogModalOpts): DialogModal;
-  // static render(el: string | HTMLDivElement, opts?: DialogModalOpts): DialogModal;
-  // static render(...args: any[]) {
-  //   const [el, id, opts] = args;
-  //   return super.render(el, id, opts);
-  // }
-  appendRoot(documentFragment: DocumentFragment): void {
-    const cacheFragment = document.createDocumentFragment();
-    // 拿出来
-    cacheFragment.appendChild(this.Element);
-    const DialogBox = documentFragment.querySelector('.ui-modal-content');
-    DialogBox.classList.add('ui-modal-dialog');
-
-    // 创建title
-    const title = document.createElement('div');
-    title.classList.add('ui-modal-dialog-title');
-    elAddCS2(title, this.dialogTitleClassName, this.dialogTitleStyle, this.defaultStyle.defaultDialogTitleStyle);
-    if (this.dialogTitleEl) {
-      title.appendChild(this.dialogTitleEl);
-    } else {
-      title.innerText = this.dialogTitle;
-    }
-    if (this.dialogTitleCloseIcon) {
-      const closeIcon = document.createElement('span');
-      closeIcon.className = 'ui-modal-dialog-close';
-      closeIcon.innerHTML = '&times;';
-      closeIcon.style.cssText = `
-        cursor: pointer;
-        font-size: 24px;
-        margin: -5px 10px 0 0;
-      `;
-      closeIcon.onclick = (e) => {
-        this.setOpen(false);
-      };
-      title.appendChild(closeIcon);
-    }
-
-    DialogBox.appendChild(title);
-    // 创建content
-    const content = document.createElement('div');
-    content.className = 'ui-modal-dialog-content';
-    elAddCS2(content, this.dialogContentClassName, this.dialogContentStyle, this.defaultStyle.defaultDialogContentStyle);
-
-    content.appendChild(cacheFragment);
-
-    if (this.dialogFooterShow) {
-      const footer = document.createElement('div');
-      footer.className = 'ui-modal-dialog-footer';
-      elAddCS2(footer, this.dialogFooterClassName, this.dialogFooterStyle, this.defaultStyle.defaultDialogFooterStyle);
-      DialogBox.appendChild(footer);
-    }
-
-    DialogBox.appendChild(content);
-
-    super.appendRoot(documentFragment);
-  }
-  renderEl(el: HTMLDivElement): this {
-    return super.renderEl(el);
-  }
-  renderFooter(el?: SelectEl): void {
-    const _el = querySelector(el);
-    if (!_el) return;
-    const footer = this.Element.querySelector('.ui-modal-dialog-footer');
-    if (!footer) return;
-    footer.innerHTML = '';
-    footer.appendChild(_el);
-  }
-  renerContent(el?: SelectEl): void {
-    const _el = querySelector(el);
-    if (!_el) return;
-    const content = this.Element.querySelector('.ui-modal-dialog-content');
-    if (!content) return;
-    content.innerHTML = '';
-    content.appendChild(_el);
-  }
-}

packages/ui/src/components/modal/event.ts

@@ -1,39 +0,0 @@
-import { modalStore } from './store';
-// modal 事件实现
-const ModalEvent = {
-  //
-};
-const onClick = (e: MouseEvent) => {
-  const target = e.target as HTMLElement;
-  if (!target) {
-    console.log('target is null');
-    return;
-  }
-  if (target.classList.contains('ui-modal-mask')) {
-    const modalState = modalStore.getState();
-    const modal = modalState.modals.find((modal) => modal.id === target.dataset.id);
-    if (modal && modal.open) {
-      modal.onMaskClose(e);
-    }
-    e.preventDefault();
-    return;
-  }
-  // const parentModalRoot = target.closest('.ui-modal-root');
-  // if (!parentModalRoot) {
-  //   return;
-  // }
-};
-
-export const InitModalEvent = (el: HTMLDivElement) => {
-  const id = el.id;
-  if (ModalEvent[id] && el === ModalEvent[id]) {
-    return;
-  }
-  // Remove previous event listener to prevent memory leak
-  if (ModalEvent[id]) {
-    ModalEvent[id].removeEventListener('click', onClick);
-  }
-  ModalEvent[id] = null;
-  el.addEventListener('click', onClick);
-  ModalEvent[id] = el;
-};

packages/ui/src/components/modal/index.ts

@@ -1,5 +1,3 @@
-export * from './modal';
+import { Modal, modalStore, DialogModal, BlankModal } from '@kevisual/system-ui';
 
-export * from './store';
+export { Modal, modalStore, DialogModal, BlankModal };
-
-export * from './blank-modal';

packages/ui/src/components/modal/modal.ts

@@ -1,272 +0,0 @@
-import { querySelector, elAddCS, ElStyle, elAddCS2 } from '../../utils/query-el';
-import { generateId } from '../../utils/nanoid';
-import { modalStore } from './store';
-import { InitModalEvent } from './event';
-import { ObjCss } from '../../utils/css';
-export type KV = {
-  [key: string]: any;
-};
-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;
-
-export class Modal<T = any, U = KV> {
-  static rootClassName = '#ui-modal-list';
-  root: HTMLDivElement;
-  id: string;
-  modalElement?: HTMLDivElement;
-  Element?: HTMLDivElement;
-  mask?: boolean;
-  maskClassName?: string;
-  maskStyle?: ElStyle;
-  // 点击mask是否关闭
-  maskClose?: boolean;
-
-  contentClassName?: string;
-  contentStyle?: ElStyle;
-
-  destroyOnClose?: boolean;
-  hideOnClose?: boolean;
-
-  open?: boolean;
-  isUse = true;
-  // 通知关闭
-  onClose?: (e: any) => void;
-  cacheFragment?: DocumentFragment;
-
-  defaultStyle?: DefaultStyle<U>;
-  constructor(opts: ModalOpts<T, U>) {
-    this.root = this.initRoot(opts.root);
-    InitModalEvent(this.root);
-    this.id = opts.id || generateId();
-    this.mask = opts.mask ?? true;
-    this.maskClassName = opts.maskClassName;
-    this.maskStyle = opts.maskStyle;
-    this.maskClose = opts.maskClose ?? true;
-    this.contentClassName = opts.contentClassName;
-    this.contentStyle = opts.contentStyle;
-    this.destroyOnClose = opts.destroyOnClose ?? true;
-    this.hideOnClose = opts.hideOnClose ?? true;
-    if (!this.destroyOnClose && !this.hideOnClose) {
-      this.destroyOnClose = true; // 必须要有一个为true
-      console.warn('destroyOnClose Or hideOnClose must one is true');
-    }
-    this.cacheFragment = new DocumentFragment();
-    this.defaultStyle = opts.defaultStyle || ({} as DefaultStyle<U>);
-    this.open = opts.open ?? true;
-    this.onClose = opts.onClose;
-  }
-  protected initRoot(root: ModalOpts['root']) {
-    let _root = querySelector(root);
-    if (!_root) {
-      // 查询ui-modal元素,不存在则创建一个ui-modal元素并添加到body上
-      const queryRoot = document.querySelector('#ui-modal-list') as HTMLDivElement;
-      if (queryRoot) {
-        _root = queryRoot;
-        _root.classList.add('ui-modal-root');
-        return _root;
-      }
-      _root = document.createElement('div');
-      _root.id = 'ui-modal-list';
-      _root.classList.add('ui-modal-root');
-      document.body.appendChild(_root);
-      return _root;
-    }
-    _root.classList.add('ui-custom-modal', 'ui-modal-root');
-
-    if (!_root.id) {
-      _root.id = 'ui-modal' + generateId();
-    }
-
-    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, opts?: ConstructorParameters<T>[0]): InstanceType<T>;
-  static render(...args: any[]) {
-    let [el, id, opts] = args;
-    const _el = querySelector(el);
-    if (!_el) {
-      console.warn('el is not exist', el);
-      return;
-    }
-    let _id: string = '';
-    if (typeof id === 'string' && id) {
-      // 如果id是字符串
-      _id = id;
-    } else if (typeof id === 'object') {
-      // 如果id是对象
-      _id = id.id;
-      opts = id;
-      id = id.id;
-    }
-    let _modal: Modal | undefined;
-    const modalState = modalStore.getState();
-    if (_id) {
-      // 如果存在id,则判断是否已经存在该id的modal
-      _modal = modalStore.getState().getModal(_id);
-    }
-    if (!_modal) {
-      // 不存在modal,则创建一个modal
-      // console.log('create modal', id, opts);
-      const newModal = new this({ id, ...opts });
-      _modal = newModal;
-      modalStore.setState({
-        modals: [...modalState.modals, newModal],
-      });
-    }
-    _modal.renderEl(_el);
-    return _modal;
-  }
-  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();
-    if (_id) {
-      // 如果存在id,则判断是否已经存在该id的modal
-      _modal = modalStore.getState().getModal(_id);
-    }
-    if (!_modal) {
-      // 不存在modal,则创建一个modal
-      // console.log('create modal', id, opts);
-      const newModal = new this({ ...opts, id: _id });
-      _modal = newModal;
-      modalStore.setState({
-        modals: [...modalState.modals, newModal],
-      });
-    }
-    return _modal as InstanceType<T>;
-  }
-  createMask() {
-    const mask = document.createElement('div');
-    mask.classList.add('ui-modal-mask');
-    mask.dataset.id = this.id;
-    elAddCS2(mask, this.maskClassName, this.maskStyle, this.defaultStyle?.defaultMaskStyle);
-    return mask;
-  }
-  renderEl(el: HTMLDivElement) {
-    const defaultContentStyle = this.defaultStyle?.defaultContentStyle || {
-      position: 'absolute',
-      padding: '20px',
-      left: '50%',
-      top: '20%',
-      width: '600px',
-      background: '#fff',
-      borderRadius: '5px',
-      boxShadow: '0 0 10px rgba(0,0,0,.1)',
-      transform: 'translate(-50%, -50%)',
-      maxHeight: '80vh',
-      overflow: 'auto',
-    };
-
-    const fragment = document.createDocumentFragment();
-    const _modalEl = document.createElement('div');
-    _modalEl.classList.add('ui-modal-wrapper');
-    _modalEl.id = this.id;
-    _modalEl.dataset.mid = this.id;
-    if (this.mask) {
-      const mask = this.createMask();
-      _modalEl.appendChild(mask);
-    }
-    const modalContent = document.createElement('div');
-    modalContent.classList.add('ui-modal-content');
-    elAddCS2(modalContent, this.contentClassName, this.contentStyle, defaultContentStyle);
-    modalContent.appendChild(el);
-    _modalEl.appendChild(modalContent);
-    fragment.appendChild(_modalEl);
-
-    this.modalElement = _modalEl;
-    this.Element = el;
-    this.appendRoot(fragment);
-
-    return this;
-  }
-  appendRoot(document: DocumentFragment) {
-    this.root.appendChild(document);
-    // 第一次渲染，open为true，显示弹窗
-    this.setOpen(this.open);
-  }
-  setOpen(open: boolean) {
-    this.open = open;
-    if (this.destroyOnClose) {
-      if (open) {
-        this.root.appendChild(this.modalElement);
-      } else {
-        this.cacheFragment.appendChild(this.modalElement);
-      }
-      return;
-    }
-    if (this.hideOnClose) {
-      if (open) {
-        this.modalElement.classList.remove('ui-modal-close');
-      } else {
-        this.modalElement.classList.add('ui-modal-close');
-      }
-    }
-  }
-  unMount() {
-    // 返回渲染的的Element, 然后删除modalElement
-    const fragment = document.createDocumentFragment();
-    fragment.appendChild(this.Element);
-    this.modalElement?.remove();
-
-    const modalState = modalStore.getState();
-    modalStore.setState({
-      modals: modalState.modals.filter((modal) => modal.id !== this.id),
-    });
-    this.isUse = false;
-    this.cacheFragment = new DocumentFragment();
-    return fragment;
-  }
-  /**
-   * 保留，暂时不用
-   * // TODO: 研究
-   * @param force
-   * @param opts
-   * @returns
-   */
-  reRender(force?: boolean, opts?: ModalOpts) {
-    if (force) {
-      this.modalElement?.remove?.();
-      this.modalElement = undefined;
-      if (!this.Element) return;
-      this.renderEl(this.Element);
-    }
-  }
-  async onMaskClose(e?: any) {
-    if (this.maskClose) {
-      this.setOpen(false);
-      this.onClose?.(e);
-    }
-  }
-  setDefaultStyle(key: keyof DefaultStyle<U>, style: ObjCss) {
-    this.defaultStyle[key] = style as any;
-  }
-}
-
-// modal.render('#abc'||document.querySelector('#abc'));
-// modal.unmount();

packages/ui/src/components/modal/store.ts

@@ -1,16 +0,0 @@
-import { createStore } from '../../utils';
-import { Modal } from './modal';
-
-type ModeStore = {
-  modals: Modal[];
-  getModal: (id: string) => Modal | undefined;
-};
-
-export const modalStore = createStore<ModeStore>((set, get) => {
-  return {
-    modals: [],
-    getModal: (id: string) => {
-      return get().modals.find((model) => model.id === id) as Modal;
-    },
-  };
-});

packages/ui/src/index.ts

@@ -2,8 +2,4 @@ import { Modal, modalStore, BlankModal, DialogModal } from './components/modal';
 
 export { Modal, modalStore, BlankModal, DialogModal };
 
-import { createDOMElement } from './utils/dom/create-dom-element';
+export * from './components/card';
-
-export { createDOMElement };
-
-export * from './utils';

packages/ui/src/utils/css.ts

@@ -1,19 +0,0 @@
-import { serializeStyles } from '@emotion/serialize';
-
-export const getCssText = (obj?: ObjCss) => {
-  if (!obj) return '';
-  const serialized = serializeStyles([obj]);
-  return serialized.styles;
-};
-export const getCssTextObjs = (objs?: ObjCss[]) => {
-  if (!objs) return '';
-  const serialized = serializeStyles(objs);
-  return serialized.styles;
-};
-export type ObjCss = { [key: string]: number | string } & React.CSSProperties;
-export const obj2css = (el?: HTMLDivElement, obj?: ObjCss) => {
-  if (!el) return;
-  if (!obj) return;
-  const serialized = serializeStyles([obj as unknown as Record<string, string>]);
-  el.style.cssText = serialized.styles;
-};

packages/ui/src/utils/dom/create-dom-element.ts

@@ -1,82 +0,0 @@
-type JSXElement = {
-  type: string | symbol;
-  props: Record<string, any>;
-  key?: string | number;
-};
-export function createDOMElement(jsxElement: JSXElement) {
-  // 如果 jsxElement 是 null, undefined 或者是布尔值，则直接跳过处理
-  if (jsxElement == null || typeof jsxElement === 'boolean') {
-    console.warn('Invalid JSX element:', jsxElement);
-    return null;
-  }
-  const { type, props } = jsxElement;
-  // React Fragment 的处理
-  if (type === Symbol.for('react.fragment')) {
-    const fragment = document.createDocumentFragment();
-    if (props.children) {
-      if (Array.isArray(props.children)) {
-        props.children.forEach((child) => {
-          const childElement = createDOMElement(child);
-          if (childElement) {
-            fragment.appendChild(childElement);
-          }
-        });
-      } else {
-        const childElement = createDOMElement(props.children);
-        if (childElement) {
-          fragment.appendChild(childElement);
-        }
-      }
-    }
-    return fragment;
-  }
-
-  const domElement = document.createElement(type as string);
-
-  // 处理 props
-  Object.keys(props).forEach((prop) => {
-    if (prop === 'children') {
-      // 递归处理 children
-      if (Array.isArray(props.children)) {
-        props.children.forEach((child) => {
-          const childElement = createDOMElement(child);
-          if (childElement) {
-            domElement.appendChild(childElement);
-          }
-        });
-      } else if (typeof props.children === 'string') {
-        domElement.appendChild(document.createTextNode(props.children));
-      } else if (typeof props.children === 'object' && props.children !== null) {
-        const childElement = createDOMElement(props.children);
-        if (childElement) {
-          domElement.appendChild(childElement);
-        }
-      }
-    } else if (prop.startsWith('on')) {
-      // 处理事件监听器
-      const eventType = prop.slice(2).toLowerCase(); // 提取事件类型（如 onClick -> click）
-      domElement.addEventListener(eventType, props[prop]);
-    } else if (prop === 'style' && typeof props[prop] === 'object') {
-      // 处理 style 属性
-      Object.assign(domElement.style, props[prop]);
-    } else if (prop === 'dangerouslySetInnerHTML') {
-      // 处理 dangerouslySetInnerHTML
-      if (props[prop] && typeof props[prop].__html === 'string') {
-        domElement.innerHTML = props[prop].__html;
-      } else {
-        console.warn('Invalid dangerouslySetInnerHTML content:', props[prop]);
-      }
-    } else if (prop === 'ref') {
-      // React 的 ref 在手动创建 DOM 时没有用处
-      console.warn('Ref prop is not supported in manual DOM creation');
-    } else if (prop === 'key') {
-      // React 的 key 属性是用于虚拟 DOM 的，不影响实际 DOM
-      console.warn('Key prop is not applicable in manual DOM creation');
-    } else {
-      // 处理其他普通属性
-      domElement.setAttribute(prop, props[prop]);
-    }
-  });
-
-  return domElement;
-}

packages/ui/src/utils/extra.ts

@@ -1,11 +0,0 @@
-export function extractKeysFromBraces(text: string) {
-  const regex = /\{\{\s*(.*?)\s*\}\}/g;
-  const keys: string[] = [];
-  let matches: RegExpExecArray | null;
-
-  while ((matches = regex.exec(text)) !== null) {
-    keys.push(matches[1]); // 获取{{}}中间的key
-  }
-
-  return keys;
-}

packages/ui/src/utils/history.ts

@@ -1,22 +0,0 @@
-type To = string | Location;
-type State<T> = {
-  [key: string]: any;
-} & T;
-export const push = <T = any>(to: To, state?: State<T>, refresh = true) => {
-  const _history = window.history;
-  if (typeof to === 'string') {
-    // must key is default, so react navigate can work
-    _history.pushState({ key: 'default', usr: state }, '', to);
-  } else {
-    // const path = to.pathname;
-    _history.pushState({ key: 'default', usr: state }, '', to.pathname);
-  }
-  // must dispatch popstate event, so react navigate can work
-  refresh && window.dispatchEvent(new Event('popstate'));
-};
-export const history = {
-  push,
-};
-
-// import { createBrowserHistory } from 'history';
-// export const history = createBrowserHistory();

packages/ui/src/utils/index.ts

@@ -1,7 +0,0 @@
-export * from './css';
-export * from './extra';
-export * from './history';
-export * from './is-null';
-export * from './nanoid';
-export * from './store';
-export * from './query-el';

packages/ui/src/utils/is-null.ts

@@ -1,9 +0,0 @@
-export const isObjectNull = (value: any) => {
-  if (value === null || value === undefined) {
-    return true;
-  }
-  if (JSON.stringify(value) === '{}') {
-    return true;
-  }
-  return false;
-};

packages/ui/src/utils/nanoid.ts

@@ -1,14 +0,0 @@
-import { customAlphabet } from 'nanoid';
-// 全小写的字母和数字
-const alphabetLetter = 'abcdefghijklmnopqrstuvwxyz';
-const alphabet = '0123456789abcdefghijklmnopqrstuvwxyz';
-export const alphabetLetterAll = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
-
-export const generateId6 = customAlphabet(alphabet, 6);
-export const customNanoid = customAlphabet(alphabetLetterAll, 12);
-export const generateId = (size = 6) => {
-  return 'b-' + generateId6(size);
-};
-export const generate = (size = 6) => {
-  return customNanoid(size);
-};

packages/ui/src/utils/query-el.ts

@@ -1,54 +0,0 @@
-import { obj2css, ObjCss } from './css';
-import parse from 'style-to-object';
-export type SelectEl = string | HTMLDivElement;
-export const querySelector = (el?: string | HTMLDivElement): HTMLDivElement | null => {
-  if (!el) {
-    return null;
-  }
-  if (typeof el === 'string') {
-    return document.querySelector(el) as HTMLDivElement;
-  }
-  return el;
-};
-
-export type ElStyle = ObjCss | string;
-/**
- * el add class and style
- * @param el
- * @param className
- * @param style
- * @returns
- */
-export const elAddCS = (el: HTMLDivElement, className?: string, style?: ElStyle) => {
-  if (!el) return;
-  if (className) {
-    el.classList.add(className);
-  }
-  if (style && typeof style === 'string') {
-    el.style.cssText = style;
-  } else if (style) {
-    obj2css(el, style as ObjCss);
-  }
-};
-
-/**
- * 添加style的同时保留默认的的style
- * @param el
- * @param className
- * @param style
- * @param defaultStyle
- * @returns
- */
-export const elAddCS2 = (el: HTMLDivElement, className?: string, style?: ElStyle, defaultStyle?: ObjCss) => {
-  if (!el) return;
-  if (className) {
-    el.classList.add(className);
-  }
-  let _style: ObjCss = { ...defaultStyle };
-  if (style && typeof style === 'string') {
-    _style = { ...defaultStyle, ...parse(style) };
-  } else if (style && typeof style === 'object') {
-    _style = { ...defaultStyle, ...style };
-  }
-  obj2css(el, _style);
-};

packages/ui/src/utils/store.ts

@@ -1,3 +0,0 @@
-import { createStore } from 'zustand/vanilla';
-
-export { createStore };

packages/ui/tsconfig.json

@@ -1,23 +1,36 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
+    "target": "ES2020",
-    "module": "ESNext",
+    "useDefineForClassFields": true,
     "lib": [
+      "ES2020",
       "DOM",
-      "ESNext"
+      "DOM.Iterable"
     ],
-    "moduleResolution": "Node",
+    "module": "ESNext",
-    "declaration": true,
-    "esModuleInterop": true,
     "skipLibCheck": true,
-    "outDir": "./dist",
+    /* Bundler mode */
-    "rootDir": "./src"
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "baseUrl": "./",
+    "types": [],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    /* Linting */
+    "strict": true,
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
   },
   "include": [
-    "src"
+    "src",
-  ],
-  "exclude": [
-    "node_modules",
-    "dist"
   ]
 }

packages/vite/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@build/vite",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "rollup -c -w",
+    "build": "npm run clean && rollup -c",
+    "clean": "rimraf dist"
+  },
+  "keywords": [],
+  "author": "abearxiong <xiongxiao@xiongxiao.me>",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@types/postcss-import": "^14.0.3",
+    "@types/react": "^18.3.12",
+    "autoprefixer": "^10.4.20",
+    "cross-env": "^7.0.3",
+    "cssnano": "^7.0.6",
+    "immer": "^10.1.1",
+    "nanoid": "^5.0.8",
+    "postcss-import": "^16.1.0",
+    "rollup": "^4.24.3",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-postcss": "^4.0.2",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.6"
+  }
+}

packages/vite/rollup.config.js

@@ -0,0 +1,33 @@
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import commonjs from '@rollup/plugin-commonjs';
+import { dts } from 'rollup-plugin-dts';
+
+const entrys = ['index'];
+/**
+ * @type {import('rollup').RollupOptions[]}
+ */
+const configs = entrys.map((entry) => ({
+  input: `./src/${entry}.ts`, // 修改输入文件为 TypeScript 文件
+  output: {
+    file: `./dist/${entry}.js`,
+    format: 'es', // 输出格式为 ES Module
+  },
+  plugins: [
+    resolve({ browser: false }),
+    commonjs(),
+    typescript({
+      tsconfig: './tsconfig.json',
+    }),
+  ],
+}));
+const dtsConfigs = {
+  input: './src/index.ts',
+  output: {
+    file: './dist/index.d.ts',
+    format: 'es',
+  },
+  plugins: [dts()],
+};
+
+export default [...configs, dtsConfigs];

packages/vite/src/index.ts

@@ -0,0 +1,17 @@
+/**
+ *
+ * @param isDev
+ * @param scriptStr <script defer src="https://umami.xiongxiao.me/script.js" data-website-id="aeea5ee5-df79-4e78-8c0d-a9f26db23695"></script>
+ * @returns
+ */
+export const unamiPlugin = (scriptStr: string, isDev = false) => {
+  return {
+    name: 'html-transform',
+    transformIndexHtml(html: string) {
+      if (isDev) {
+        return html;
+      }
+      return html.replace('</head>', `${scriptStr}</head>`);
+    },
+  };
+};

packages/vite/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "declaration": false,
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "baseUrl": "./",
+    "types": [],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    /* Linting */
+    "strict": true,
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "src",
+  ]
+}

tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "baseUrl": "./",
+    "types": [],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    /* Linting */
+    "strict": true,
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "src",
+  ]
+}