create-antd-skin 1.0.5 → 1.0.7

package/bin/skin.js

@@ -9,6 +9,23 @@ const path_1 = __importDefault(require("path"));
 const inquirer_1 = __importDefault(require("inquirer"));
 const chalk_1 = __importDefault(require("chalk"));
 const ora_1 = __importDefault(require("ora"));
+async function findSkinEntry(skinDir) {
+    const tsFile = path_1.default.join(skinDir, "index.ts");
+    const tsxFile = path_1.default.join(skinDir, "index.tsx");
+    if (await fs_extra_1.default.pathExists(tsxFile)) {
+        return {
+            source: tsxFile,
+            ext: "tsx",
+        };
+    }
+    if (await fs_extra_1.default.pathExists(tsFile)) {
+        return {
+            source: tsFile,
+            ext: "ts",
+        };
+    }
+    throw new Error(`No skin entry found in ${skinDir}. Expected index.ts or index.tsx`);
+}
 async function getSkinList() {
     const skinsDir = path_1.default.join(__dirname, "../skins");
     if (!fs_extra_1.default.existsSync(skinsDir)) {
@@ -25,15 +42,12 @@ async function getSkinList() {
     });
 }
 async function copySkinFiles(skinName, skinDir, projectRoot) {
-    const skinIndexFile = path_1.default.join(skinDir, "index.ts");
+    const entry = await findSkinEntry(skinDir);
     const skinImagesDir = path_1.default.join(skinDir, "images");
     const targetSkinDir = path_1.default.join(projectRoot, "src/components/warden-skin", skinName);
     const targetImagesDir = path_1.default.join(projectRoot, "public/images", skinName);
     await fs_extra_1.default.ensureDir(targetSkinDir);
-    if (!fs_extra_1.default.existsSync(skinIndexFile)) {
-        throw new Error(`${skinName}/index.ts not found`);
-    }
-    await fs_extra_1.default.copy(skinIndexFile, path_1.default.join(targetSkinDir, "index.ts"));
+    await fs_extra_1.default.copy(entry.source, path_1.default.join(targetSkinDir, `index.${entry.ext}`));
     if (fs_extra_1.default.existsSync(skinImagesDir)) {
         await fs_extra_1.default.copy(skinImagesDir, targetImagesDir);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-antd-skin",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "this is skin-cli for @adminui-dev/antd-layout",
   "main": "index.js",
   "author": "zhouwenqi",
@@ -16,7 +16,7 @@
   },
   "files": [
     "bin",
-    "templates"
+    "skins"
   ],
   "repository": {
     "type": "git",

package/skins/park-waves-dark/index.tsx

@@ -0,0 +1,45 @@
+import { LazyImage } from "@adminui-dev/antd-layout"
+import type { ThemeSkin }  from "@adminui-dev/antd-layout"
+import { Grid } from "antd"
+
+const { useBreakpoint } = Grid
+
+const skinBgStyles:React.CSSProperties = {
+    position:"absolute",
+    inset:"0",
+    backgroundColor:"#000105",
+}
+const imgStyles:React.CSSProperties = {
+    position:"absolute",
+    transition:"width 0.3s, height 0.3s, opaticy 0.3s"
+}
+const ImageBackground=()=>{  
+    const { xs } = useBreakpoint()
+    const leftStyle = xs ? {"height":"100%"} : {"width:":"260px"}    
+    return (
+       <div style={skinBgStyles}>
+            <LazyImage style={{...leftStyle,...imgStyles,top:"0px"}} src="/images/skins/park-waves-dark/aside-bg-dark.webp" alt="aisde-bg.webp" />
+            <LazyImage style={{...imgStyles,width:"90%",top:"0px",right:"0px"}} src="/images/skins/park-waves-dark/header-bg-dark.webp" alt="header-bg.webp" />
+            <LazyImage style={{...imgStyles,height:"80px",bottom:"0px",right:"0px"}} src="/images/skins/park-waves-dark/footer-bg-dark.webp" alt="header-bg.webp" />
+        </div>
+    )
+}
+const skin:ThemeSkin = {
+    "name":"parkWavesDark",    
+    "skinType":"custom",
+    "layoutConfig":{
+        "theme":"dark",
+        "primaryColor":"#9898ff",
+        "noneHeader":false,
+        "hideBorder":false,
+        "asideBlur":true,
+        "headerBlur":true,
+        "largeBrand":true,
+        "containerBlur":true,
+        "menuItemSelectColor":"primary",
+    },        
+    "logo":"/images/skins/park-waves-dark/app-logo-dark.webp",
+    "icon":"/images/skins/park-waves-dark/skin-icon-dark.webp",
+    "backgroundContent":<ImageBackground  />
+}
+export default skin

package/skins/park-waves-light/index.tsx

@@ -0,0 +1,45 @@
+import { LazyImage} from "@adminui-dev/antd-layout"
+import type { ThemeSkin }  from "@adminui-dev/antd-layout"
+import { Grid } from "antd"
+
+const { useBreakpoint } = Grid
+
+const skinBgStyles:React.CSSProperties = {
+    position:"absolute",
+    inset:"0",
+    backgroundColor:"#dae4ea",
+}
+const imgStyles:React.CSSProperties = {
+    position:"absolute",
+    transition:"width 0.3s, height 0.3s, opaticy 0.3s"
+}
+const ImageBackground=()=>{  
+    const { xs } = useBreakpoint()
+    const leftStyle = xs ? {"height":"100%"} : {"width:":"260px"}    
+    return (
+       <div style={skinBgStyles}>
+            <LazyImage style={{...leftStyle,...imgStyles,top:"0px"}} src="/images/skins/park-waves-light/aside-bg-light.webp" alt="aisde-bg.webp" />
+            <LazyImage style={{...imgStyles,width:"90%",top:"0px",right:"0px"}} src="/images/skins/park-waves-light/header-bg-light.webp" alt="header-bg.webp" />
+            <LazyImage style={{...imgStyles,height:"80px",bottom:"0px",right:"0px"}} src="/images/skins/park-waves-light/footer-bg-light.webp" alt="header-bg.webp" />
+        </div>
+    )
+}
+const skin:ThemeSkin = {
+    "name":"parkWavesLight",    
+    "skinType":"custom",
+    "layoutConfig":{
+        "theme":"light",
+        "primaryColor":"#4a3a88",
+        "noneHeader":false,
+        "hideBorder":false,
+        "asideBlur":true,
+        "headerBlur":true,
+        "largeBrand":true,
+        "containerBlur":true,
+        "menuItemSelectColor":"primary",
+    },        
+    "logo":"/images/skins/park-waves-light/app-logo-light.webp",
+    "icon":"/images/skins/park-waves-light/skin-icon-light.webp",
+    "backgroundContent":<ImageBackground  />
+}
+export default skin