diff --git a/packages/tailwind/css/loading.css b/packages/tailwind/css/loading.css
new file mode 100644
index 0000000..ecfc504
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/packages/tailwind/css/scrollbar.css b/packages/tailwind/css/scrollbar.css
new file mode 100644
index 0000000..1ee0fef
--- /dev/null
+++ b/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; /* 修复交汇时出现的白块 */
+ }
+}
diff --git a/packages/tailwind/index.css b/packages/tailwind/index.css
new file mode 100644
index 0000000..8a20956
--- /dev/null
+++ b/packages/tailwind/index.css
@@ -0,0 +1,3 @@
+@import "./css/globals.css";
+@import "./css/loading.css";
+@import "./css/scrollbar.css"
\ No newline at end of file
diff --git a/packages/tailwind/package.json b/packages/tailwind/package.json
index 6ebf000..3fb6eaa 100644
--- a/packages/tailwind/package.json
+++ b/packages/tailwind/package.json
@@ -1,6 +1,6 @@
{
"name": "@build/tailwind",
- "version": "1.0.0",
+ "version": "1.0.2-alpha-1",
"description": "",
"main": "plugin/index.js",
"type": "module",
@@ -20,6 +20,8 @@
"license": "ISC",
"exports": {
".": "./plugins/index.js",
- "./css": "./css/globals.css"
+ "./main.css": "./index.css",
+ "./css": "./css/globals.css",
+ "./loading": "./css/loading.css"
}
}
\ No newline at end of file
diff --git a/packages/tailwind/plugins/index.js b/packages/tailwind/plugins/index.js
index 168657a..98b5aef 100644
--- a/packages/tailwind/plugins/index.js
+++ b/packages/tailwind/plugins/index.js
@@ -20,6 +20,7 @@ const flexCenter = plugin(function ({ addUtilities }) {
'.card-body': {},
'.card-footer': {},
'.card-key': {},
+ '.loading': {},
});
});
diff --git a/packages/tailwind/readme.md b/packages/tailwind/readme.md
new file mode 100644
index 0000000..89a5673
--- /dev/null
+++ b/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) { ... }
+ },
+ },
+};
+```
diff --git a/packages/ui/.npmrc b/packages/ui/.npmrc
new file mode 100644
index 0000000..a4d9caf
--- /dev/null
+++ b/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}
\ No newline at end of file
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 0acbb19..4f1b722 100644
--- a/packages/ui/package.json
+++ b/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,
diff --git a/packages/ui/rollup.config.js b/packages/ui/rollup.config.js
index d899894..a354c4c 100644
--- a/packages/ui/rollup.config.js
+++ b/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'];
diff --git a/packages/ui/src/components/loading/Load.tsx b/packages/ui/src/components/loading/Load.tsx
new file mode 100644
index 0000000..70f443c
--- /dev/null
+++ b/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 (
+
+ );
+};
+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 {props?.blank}
;
+};
diff --git a/packages/ui/src/components/loading/index.ts b/packages/ui/src/components/loading/index.ts
new file mode 100644
index 0000000..0c482dc
--- /dev/null
+++ b/packages/ui/src/components/loading/index.ts
@@ -0,0 +1 @@
+export * from './Load';