From 99cfa7f34d3f661c566d7ac7adf5462dd9d60a34 Mon Sep 17 00:00:00 2001 From: xion Date: Thu, 28 Nov 2024 01:02:56 +0800 Subject: [PATCH] feat: add loading --- packages/tailwind/css/loading.css | 13 ++++++ packages/tailwind/css/scrollbar.css | 30 ++++++++++++ packages/tailwind/index.css | 3 ++ packages/tailwind/package.json | 6 ++- packages/tailwind/plugins/index.js | 1 + packages/tailwind/readme.md | 51 +++++++++++++++++++++ packages/ui/.npmrc | 3 ++ packages/ui/package.json | 2 +- packages/ui/rollup.config.js | 3 +- packages/ui/src/components/loading/Load.tsx | 24 ++++++++++ packages/ui/src/components/loading/index.ts | 1 + 11 files changed, 133 insertions(+), 4 deletions(-) create mode 100644 packages/tailwind/css/loading.css create mode 100644 packages/tailwind/css/scrollbar.css create mode 100644 packages/tailwind/index.css create mode 100644 packages/tailwind/readme.md create mode 100644 packages/ui/.npmrc create mode 100644 packages/ui/src/components/loading/Load.tsx create mode 100644 packages/ui/src/components/loading/index.ts 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';