create-antd-skin 1.1.4 → 1.1.6

package/bin/skin.js

@@ -97,7 +97,7 @@ async function installSkin(skinName) {
                 name: "skin",
                 message: "Choose a skin",
                 choices: skins.map(item => ({
-                    name: item.name,
+                    name: toCamelCase(item.name),
                     value: item.name,
                 })),
             },
@@ -117,14 +117,13 @@ async function installSkin(skinName) {
         await copySkinFiles(selectedSkin, skin.path, cwd);
         await updateSkinIndex(selectedSkin, cwd);
         spinner.succeed(`Skin "${selectedSkin}" installed.`);
-        console.log(`
-    ✨ Skin installed successfully!
-    // Simply adding the skin name to the settings will take effect, e.g.
-    const layoutConfig: LayoutConfig = {
-        skinName: "${toCamelCase(selectedSkin) ?? "<skin-name>"}",
-        ...
-    }
-    `);
+        console.log(chalk_1.default.gray(`
+✨ Skin installed successfully!
+// Simply adding the skin name to the settings will take effect, e.g.
+const layoutConfig: LayoutConfig = {
+  skinName: "${toCamelCase(selectedSkin) ?? "<skin-name>"}",
+  ...
+}`));
     }
     catch (e) {
         spinner.fail("Install skin failed.");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-antd-skin",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "this is skin-cli for @adminui-dev/antd-layout",
   "main": "index.js",
   "author": "zhouwenqi",

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

@@ -0,0 +1,41 @@
+import type { ThemeSkin }  from "@adminui-dev/antd-layout"
+const skinBgStyles:React.CSSProperties = {
+    position:"absolute",
+    inset:"0",
+    backgroundColor:"transparent",
+}
+
+const ImageBackground=()=>{  
+    return (
+       <div style={skinBgStyles}>
+        </div>
+    )
+}
+const skin:ThemeSkin = {
+    "name":"parkWavesNone",    
+    "skinType":"custom",
+    "layoutConfig":{
+        "theme":"light",
+        "layoutType":"leftMenu",
+        "asideMenuInline":false,
+        "asideMenuGroup":true,
+        "hideBorder":true,
+        "splitMenu":false,        
+        "primaryColor":"#161616",
+        "containerMargin":12,
+        "menuIconSize":16,
+        "noneHeader":true,
+        "asideBlur":false,
+        "asideTransparent":true,
+        "containerBlur":false,
+        "hideTitle":true,
+        "largeBrand":true,    
+        "visibleBreadcrumbIcon":"all",
+        "collapsedPosition":"top",
+        "menuItemSelectColor":"invert",
+    },        
+    "logo":"/images/skins/park-waves-none/app-logo-none.webp",
+    "icon":"/images/skins/park-waves-none/skin-icon-none.webp",
+    "backgroundContent":<ImageBackground  />
+}
+export default skin

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

@@ -0,0 +1,53 @@
+import type { ThemeSkin }  from "@adminui-dev/antd-layout"
+import { LazyImage } 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-sider/aside-bg-sider.webp" alt="aisde-bg.webp" />
+            <LazyImage style={{...imgStyles,width:"90%",top:"0px",right:"0px"}} src="/images/skins/park-waves-sider/header-bg-light.webp" alt="header-bg.webp" />
+            <LazyImage style={{...imgStyles,height:"80px",bottom:"0px",right:"0px"}} src="/images/skins/park-waves-sider/footer-bg-light.webp" alt="header-bg.webp" />
+        </div>
+    )
+}
+const skin:ThemeSkin = {
+    "name":"parkWavesSider",    
+    "skinType":"custom",
+    "layoutConfig":{
+        "theme":"light",
+        "layoutType":"leftMenu",
+        "asideMenuInline":false,
+        "asideMenuGroup":true,
+        "hideBorder":true,
+        "splitMenu":false,        
+        "primaryColor":"#4a3a88",
+        "containerMargin":12,
+        "menuIconSize":16,
+        "noneHeader":true,
+        "asideBlur":false,
+        "asideTransparent":true,
+        "largeBrand":true,
+        "containerBlur":true,        
+        "collapsedPosition":"top",
+        "visibleBreadcrumbIcon":"all",
+        "menuItemSelectColor":"default",
+    },        
+    "logo":"/images/skins/park-waves-sider/app-logo-light.webp",
+    "icon":"/images/skins/park-waves-sider/skin-icon-sider.webp",
+    "backgroundContent":<ImageBackground  />
+}
+export default skin