feat: add loading

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,6 +1,6 @@
 {
   "name": "@kevisual/ui",
-  "version": "0.0.3-alpha-1",
+  "version": "0.0.3-alpha-3",
   "description": "",
   "main": "dist/index.js",
   "privite": false,

packages/ui/rollup.config.js

@@ -33,8 +33,9 @@ const configs = entrys.map((entry) => ({
         // outDir: './types', //
       },
     }), // 添加 TypeScript 插件
-    terser(), // 压缩输出的 ES Module 文件
+    // terser(), // 压缩输出的 ES Module 文件
   ],
+  external: ['react', 'react-dom'], // 告诉 Rollup 不要将 react/react-dom 打包，而是作为外部依赖
 }));
 
 const entryCss = ['index'];

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';