xiangjsoncraft 1.1.1 → 1.2.0

package/config.json

@@ -1,218 +1,113 @@
 {
     "styles": {
         "*": {
-            "margin": "0",
-            "padding": "0",
+            "margin": 0,
+            "padding": 0,
             "boxSizing": "border-box",
-            "fontFamily": "'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif"
+            "fontFamily": "Segoe UI, Roboto, 微软雅黑, sans-serif"
         },
         "body": {
             "backgroundColor": "#f0f4f8",
             "color": "#334e68",
             "lineHeight": "1.6",
-            "transition": "backgroundColor 0.5s ease",
-            "minHeight": "100vh"
+            "minHeight": "100vh",
+            "padding": "2rem 1rem"
         },
         ".welcome-container": {
             "maxWidth": "1200px",
             "margin": "0 auto",
-            "padding": "20px"
-        },
-        ".welcome-header": {
-            "textAlign": "center",
-            "padding": "60px 20px",
-            "marginBottom": "40px",
-            "borderRadius": "12px",
-            "background": "linear-gradient(135deg, #4299e1, #63b3ed)",
-            "color": "white",
-            "boxShadow": "0 10px 25px -5px rgba(66, 153, 225, 0.3)",
-            "transition": "transform 0.5s ease, boxShadow 0.5s ease"
-        },
-        ".welcome-header:hover": {
-            "transform": "translateY(-5px)",
-            "boxShadow": "0 15px 30px -8px rgba(66, 153, 225, 0.4)"
-        },
-        ".logo-container": {
-            "marginBottom": "30px"
-        },
-        ".logo": {
-            "width": "120px",
-            "height": "120px",
-            "margin": "0 auto",
-            "backgroundColor": "white",
-            "borderRadius": "50%",
-            "display": "flex",
-            "alignItems": "center",
-            "justifyContent": "center",
-            "fontSize": "48px",
-            "color": "#4299e1",
-            "boxShadow": "0 4px 12px rgba(0, 0, 0, 0.1)"
-        },
-        ".logo::after": {
-            "content": "'J'",
-            "fontWeight": "bold"
+            "padding": "2rem"
         },
         ".main-title": {
-            "fontSize": "2.5rem",
-            "marginBottom": "15px",
-            "textShadow": "0 2px 4px rgba(0, 0, 0, 0.1)"
-        },
-        "@media (maxWidth: 768px)": {
-            ".main-title": {
-                "fontSize": "2rem"
-            }
+            "fontSize": "2.2rem",
+            "color": "#2d3748",
+            "textAlign": "center",
+            "marginBottom": "1.5rem",
+            "fontWeight": 700
         },
         ".subtitle": {
             "fontSize": "1.1rem",
-            "opacity": "0.9",
-            "maxWidth": "600px",
-            "margin": "0 auto"
-        },
-        ".features-section": {
-            "display": "grid",
-            "gridTemplateColumns": "repeat(auto-fit, minmax(300px, 1fr))",
-            "gap": "30px",
-            "marginBottom": "60px"
+            "color": "#718096",
+            "textAlign": "center",
+            "maxWidth": "800px",
+            "margin": "0 auto 3rem",
+            "lineHeight": "1.8"
         },
         ".feature-card": {
-            "backgroundColor": "white",
+            "backgroundColor": "#ffffff",
             "borderRadius": "12px",
-            "padding": "30px",
-            "boxShadow": "0 4px 12px rgba(0, 0, 0, 0.05)",
+            "padding": "2rem",
+            "boxShadow": "0 4px 12px rgba(0,0,0,0.05)",
+            "maxWidth": "600px",
+            "margin": "0 auto 2rem",
             "transition": "transform 0.3s ease, boxShadow 0.3s ease"
         },
         ".feature-card:hover": {
-            "transform": "translateY(-8px)",
-            "boxShadow": "0 12px 20px rgba(0, 0, 0, 0.08)"
-        },
-        ".feature-icon": {
-            "width": "60px",
-            "height": "60px",
-            "borderRadius": "12px",
-            "backgroundColor": "#ebf8ff",
-            "color": "#4299e1",
-            "display": "flex",
-            "alignItems": "center",
-            "justifyContent": "center",
-            "fontSize": "24px",
-            "marginBottom": "20px"
+            "transform": "translateY(-6px)",
+            "boxShadow": "0 8px 20px rgba(0,0,0,0.08)"
         },
         ".feature-title": {
-            "fontSize": "1.3rem",
-            "marginBottom": "15px",
-            "color": "#2d3748"
+            "fontSize": "1.4rem",
+            "color": "#4299e1",
+            "marginBottom": "1rem",
+            "fontWeight": 600
         },
-        ".feature-description": {
+        ".feature-desc": {
             "color": "#718096",
             "lineHeight": "1.7"
         },
-        ".action-section": {
+        ".primary-btn": {
+            "display": "block",
+            "width": "200px",
+            "height": "50px",
+            "lineHeight": "50px",
             "textAlign": "center",
-            "marginBottom": "80px"
-        },
-        ".primary-button": {
             "backgroundColor": "#4299e1",
-            "color": "white",
+            "color": "#ffffff",
             "border": "none",
             "borderRadius": "8px",
-            "padding": "14px 32px",
+            "margin": "0 auto",
             "fontSize": "1rem",
-            "fontWeight": "600",
+            "fontWeight": 600,
             "cursor": "pointer",
-            "transition": "all 0.3s ease",
-            "boxShadow": "0 4px 6px rgba(66, 153, 225, 0.2)"
+            "transition": "backgroundColor 0.3s ease, transform 0.2s ease"
         },
-        ".primary-button:hover": {
+        ".primary-btn:hover": {
             "backgroundColor": "#3182ce",
-            "transform": "translateY(-2px)",
-            "boxShadow": "0 6px 10px rgba(66, 153, 225, 0.3)"
+            "transform": "translateY(-2px)"
         },
-        ".additional-info": {
-            "marginTop": "15px",
-            "color": "#718096",
-            "fontSize": "0.95rem"
-        },
-        ".page-footer": {
-            "textAlign": "center",
-            "paddingTop": "30px",
-            "borderTop": "1px solid #e2e8f0",
-            "color": "#718096"
-        },
-        ".copyright": {
-            "marginBottom": "15px",
-            "fontSize": "0.9rem"
-        },
-        ".social-links": {
-            "display": "flex",
-            "justifyContent": "center",
-            "gap": "15px"
-        },
-        ".social-icon": {
-            "color": "#718096",
-            "fontSize": "1.2rem",
-            "transition": "color 0.3s ease"
-        },
-        ".social-icon:hover": {
-            "color": "#4299e1"
-        },
-    
-        "body:not(.loaded) .welcome-header": {
-            "opacity": "0",
-            "transform": "translateY(20px)"
-        },
-        "body.loaded .welcome-header": {
-            "opacity": "1",
-            "transform": "translateY(0)",
-            "transition": "opacity 0.8s ease, transform 0.8s ease"
-        },
-        "body:not(.loaded) .feature-card": {
-            "opacity": "0",
-            "transform": "scale(0.95)"
-        },
-        "body.loaded .feature-card": {
-            "opacity": "1",
-            "transform": "scale(1)",
-            "transition": "opacity 0.6s ease, transform 0.6s ease"
-        },
-        "body.loaded .feature-card:nth-child(1)": { "transitionDelay": "0.2s" },
-        "body.loaded .feature-card:nth-child(2)": { "transitionDelay": "0.4s" },
-        "body.loaded .feature-card:nth-child(3)": { "transitionDelay": "0.6s" }
-    },
-    "content": {
-        ".main-title": "Welcome to xiangjsoncraft",
-        ".subtitle": "Create beautiful web pages with simple JSON configuration",
-        ".primary-button": "Get Started",
-        ".additional-info": "Join thousands of developers using our JSON configuration system",
-        ".copyright": "© 2025 Dong Xiang. All rights reserved."
-    },
-    "features": {
-        "selectorPrefix": "#feature",
-        "items": [
-            {
-                "iconClass": "fas fa-code",
-                "title": "Simple Configuration",
-                "description": "Define your entire page style and content with easy-to-understand JSON"
+        "@media (max-width: 768px)": {
+            ".main-title": {
+                "fontSize": "1.8rem"
             },
-            {
-                "iconClass": "fas fa-paint-brush",
-                "title": "Beautiful Designs",
-                "description": "Create stunning interfaces without writing complex CSS code"
+            ".welcome-container": {
+                "padding": "1rem"
             },
-            {
-                "iconClass": "fas fa-mobile-alt",
-                "title": "Responsive by Default",
-                "description": "Your pages will look great on all devices with built-in responsiveness"
+            ".feature-card": {
+                "padding": "1.5rem"
             }
-        ]
+        }
     },
-    "icons": {
-        "selector": ".social-links",
-        "items": [
-            { "class": "fab fa-github", "url": "#" },
-            { "class": "fab fa-twitter", "url": "#" },
-            { "class": "fab fa-linkedin", "url": "#" },
-            { "class": "fab fa-instagram", "url": "#" }
-        ]
+    "content": {
+        ".main-title": {
+            "value": "XiangJsonCraft 测试页面",
+            "isHtml": false
+        },
+        ".subtitle": {
+            "value": "基于JSON配置渲染的页面，无需手写CSS，修改JSON即可定制样式和内容！",
+            "isHtml": false
+        },
+        ".feature-title": {
+            "value": "核心特色：JSON解耦",
+            "isHtml": false
+        },
+        ".feature-desc": {
+            "value": "HTML仅负责搭建DOM骨架，样式、内容全由JSON控制，后期维护只需修改JSON，无需触碰HTML/JS代码。",
+            "isHtml": false
+        },
+        ".primary-btn": {
+            "value": "<span onclick=\"window.open('https://www.npmjs.com/package/xiangjsoncraft', '_blank')\">点我查看 NPM 包地址</span>",
+            "isHtml": true
+        }
     }
-}
-    
+}

package/dist/xiangjsoncraft.cjs.js

@@ -1,41 +1,30 @@
 'use strict';
 
-var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
-// 定义 replaceCamelCase 方法，用于将驼峰式命名转换为连字符命名
-String.prototype.replaceCamelCase = function (separator = '-') {
-    return this.replace(/[A-Z]/g, function (match) {
-        return separator + match.toLowerCase();
-    });
-};
-
-// 创建样式块并添加到文档头部
-function createStyleBlock() {
-    const style = document.createElement('style');
-    style.id = 'dynamic-styles';
-    document.head.appendChild(style);
-    return style;
-}
-
 // 封装通用JSON样式渲染函数，支持任意CSS选择器、HTML内容、媒体查询（v1.1.0核心功能）
 function renderJsonStyles() {
-    // 动态适配CDN/本地环境的config.json路径（发布后双环境可用）
-    const isCdn = (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('xiangjsoncraft.cjs.js', document.baseURI).href)).includes('cdn.jsdelivr.net') || (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('xiangjsoncraft.cjs.js', document.baseURI).href)).includes('unpkg.com');
-    const configUrl = isCdn
-        ? 'https://cdn.jsdelivr.net/npm/xiangjsoncraft@1.1.1/config.json'
-        : './config.json';
+    // 核心原则：本地config.json永远最高优先级，加载失败再用CDN官方配置
+    const localConfigUrl = './config.json'; // 本地用户自定义配置
+    const cdnConfigUrl = 'https://cdn.jsdelivr.net/npm/xiangjsoncraft@1.1.1/config.json'; // CDN兜底配置
 
-    // 使用fetch API获取JSON配置文件
-    fetch(configUrl)
+    // 先尝试加载本地config.json
+    fetch(localConfigUrl)
         .then(response => {
-            if (!response.ok) {
-                throw new Error(`网络响应失败: ${response.status} (无法加载配置文件)`);
+            // 本地配置存在（状态码200），则使用本地配置
+            if (response.ok) {
+                console.log('🔧 检测到本地config.json，优先加载用户自定义配置');
+                return response.json();
             }
-            return response.json();
+            // 本地配置不存在/加载失败，切换到CDN兜底配置
+            console.log('ℹ️  本地未检测到config.json，加载CDN官方示例配置');
+            return fetch(cdnConfigUrl).then(res => {
+                if (!res.ok) throw new Error('CDN官方配置加载失败');
+                return res.json();
+            });
         })
         .then(config => {
             // 获取或创建样式块，避免重复创建
             const styleBlock = document.getElementById('dynamic-styles') || createStyleBlock();
-            if (!styleBlock) return console.error('样式块创建失败，无法渲染样式');
+            if (!styleBlock) return console.error('❌ 样式块创建失败，无法渲染样式');
 
             // 生成CSS规则
             let cssRules = '';
@@ -87,10 +76,10 @@ function renderJsonStyles() {
                 });
             }
 
-            console.log('✅ XiangJsonCraft v1.1.0 渲染成功！');
+            console.log('✅ XiangJsonCraft v1.1.1 渲染成功！');
         })
         .catch(error => {
-            console.error('❌ XiangJsonCraft 处理样式配置时出错:', error.message);
+            console.error('❌ XiangJsonCraft 处理配置时出错:', error.message);
         });
 }
 

package/dist/xiangjsoncraft.esm.js

@@ -1,38 +1,28 @@
-// 定义 replaceCamelCase 方法，用于将驼峰式命名转换为连字符命名
-String.prototype.replaceCamelCase = function (separator = '-') {
-    return this.replace(/[A-Z]/g, function (match) {
-        return separator + match.toLowerCase();
-    });
-};
-
-// 创建样式块并添加到文档头部
-function createStyleBlock() {
-    const style = document.createElement('style');
-    style.id = 'dynamic-styles';
-    document.head.appendChild(style);
-    return style;
-}
-
 // 封装通用JSON样式渲染函数，支持任意CSS选择器、HTML内容、媒体查询（v1.1.0核心功能）
 function renderJsonStyles() {
-    // 动态适配CDN/本地环境的config.json路径（发布后双环境可用）
-    const isCdn = import.meta.url.includes('cdn.jsdelivr.net') || import.meta.url.includes('unpkg.com');
-    const configUrl = isCdn
-        ? 'https://cdn.jsdelivr.net/npm/xiangjsoncraft@1.1.1/config.json'
-        : './config.json';
+    // 核心原则：本地config.json永远最高优先级，加载失败再用CDN官方配置
+    const localConfigUrl = './config.json'; // 本地用户自定义配置
+    const cdnConfigUrl = 'https://cdn.jsdelivr.net/npm/xiangjsoncraft@1.1.1/config.json'; // CDN兜底配置
 
-    // 使用fetch API获取JSON配置文件
-    fetch(configUrl)
+    // 先尝试加载本地config.json
+    fetch(localConfigUrl)
         .then(response => {
-            if (!response.ok) {
-                throw new Error(`网络响应失败: ${response.status} (无法加载配置文件)`);
+            // 本地配置存在（状态码200），则使用本地配置
+            if (response.ok) {
+                console.log('🔧 检测到本地config.json，优先加载用户自定义配置');
+                return response.json();
             }
-            return response.json();
+            // 本地配置不存在/加载失败，切换到CDN兜底配置
+            console.log('ℹ️  本地未检测到config.json，加载CDN官方示例配置');
+            return fetch(cdnConfigUrl).then(res => {
+                if (!res.ok) throw new Error('CDN官方配置加载失败');
+                return res.json();
+            });
         })
         .then(config => {
             // 获取或创建样式块，避免重复创建
             const styleBlock = document.getElementById('dynamic-styles') || createStyleBlock();
-            if (!styleBlock) return console.error('样式块创建失败，无法渲染样式');
+            if (!styleBlock) return console.error('❌ 样式块创建失败，无法渲染样式');
 
             // 生成CSS规则
             let cssRules = '';
@@ -84,10 +74,10 @@ function renderJsonStyles() {
                 });
             }
 
-            console.log('✅ XiangJsonCraft v1.1.0 渲染成功！');
+            console.log('✅ XiangJsonCraft v1.1.1 渲染成功！');
         })
         .catch(error => {
-            console.error('❌ XiangJsonCraft 处理样式配置时出错:', error.message);
+            console.error('❌ XiangJsonCraft 处理配置时出错:', error.message);
         });
 }
 

package/dist/xiangjsoncraft.umd.js

@@ -1,38 +1,28 @@
-(function(g,f){typeof exports==='object'&&typeof module!=='undefined'?f(exports):typeof define==='function'&&define.amd?define(['exports'],f):(g=typeof globalThis!=='undefined'?globalThis:g||self,f(g.XiangJsonCraft={}));})(this,(function(exports){'use strict';var _documentCurrentScript=typeof document!=='undefined'?document.currentScript:null;// 定义 replaceCamelCase 方法，用于将驼峰式命名转换为连字符命名
-String.prototype.replaceCamelCase = function (separator = '-') {
-    return this.replace(/[A-Z]/g, function (match) {
-        return separator + match.toLowerCase();
-    });
-};
-
-// 创建样式块并添加到文档头部
-function createStyleBlock() {
-    const style = document.createElement('style');
-    style.id = 'dynamic-styles';
-    document.head.appendChild(style);
-    return style;
-}
-
-// 封装通用JSON样式渲染函数，支持任意CSS选择器、HTML内容、媒体查询（v1.1.0核心功能）
+(function(g,f){typeof exports==='object'&&typeof module!=='undefined'?f(exports):typeof define==='function'&&define.amd?define(['exports'],f):(g=typeof globalThis!=='undefined'?globalThis:g||self,f(g.XiangJsonCraft={}));})(this,(function(exports){'use strict';// 封装通用JSON样式渲染函数，支持任意CSS选择器、HTML内容、媒体查询（v1.1.0核心功能）
 function renderJsonStyles() {
-    // 动态适配CDN/本地环境的config.json路径（发布后双环境可用）
-    const isCdn = (typeof document === 'undefined' && typeof location === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : typeof document === 'undefined' ? location.href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('xiangjsoncraft.umd.js', document.baseURI).href)).includes('cdn.jsdelivr.net') || (typeof document === 'undefined' && typeof location === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : typeof document === 'undefined' ? location.href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('xiangjsoncraft.umd.js', document.baseURI).href)).includes('unpkg.com');
-    const configUrl = isCdn
-        ? 'https://cdn.jsdelivr.net/npm/xiangjsoncraft@1.1.1/config.json'
-        : './config.json';
+    // 核心原则：本地config.json永远最高优先级，加载失败再用CDN官方配置
+    const localConfigUrl = './config.json'; // 本地用户自定义配置
+    const cdnConfigUrl = 'https://cdn.jsdelivr.net/npm/xiangjsoncraft@1.1.1/config.json'; // CDN兜底配置
 
-    // 使用fetch API获取JSON配置文件
-    fetch(configUrl)
+    // 先尝试加载本地config.json
+    fetch(localConfigUrl)
         .then(response => {
-            if (!response.ok) {
-                throw new Error(`网络响应失败: ${response.status} (无法加载配置文件)`);
+            // 本地配置存在（状态码200），则使用本地配置
+            if (response.ok) {
+                console.log('🔧 检测到本地config.json，优先加载用户自定义配置');
+                return response.json();
             }
-            return response.json();
+            // 本地配置不存在/加载失败，切换到CDN兜底配置
+            console.log('ℹ️  本地未检测到config.json，加载CDN官方示例配置');
+            return fetch(cdnConfigUrl).then(res => {
+                if (!res.ok) throw new Error('CDN官方配置加载失败');
+                return res.json();
+            });
         })
         .then(config => {
             // 获取或创建样式块，避免重复创建
             const styleBlock = document.getElementById('dynamic-styles') || createStyleBlock();
-            if (!styleBlock) return console.error('样式块创建失败，无法渲染样式');
+            if (!styleBlock) return console.error('❌ 样式块创建失败，无法渲染样式');
 
             // 生成CSS规则
             let cssRules = '';
@@ -84,9 +74,9 @@ function renderJsonStyles() {
                 });
             }
 
-            console.log('✅ XiangJsonCraft v1.1.0 渲染成功！');
+            console.log('✅ XiangJsonCraft v1.1.1 渲染成功！');
         })
         .catch(error => {
-            console.error('❌ XiangJsonCraft 处理样式配置时出错:', error.message);
+            console.error('❌ XiangJsonCraft 处理配置时出错:', error.message);
         });
 }exports.renderJsonStyles=renderJsonStyles;}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xiangjsoncraft",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "简单而强大的JSON配置与HTML页面渲染工具，支持任意CSS选择器、响应式设计、HTML内容动态注入，轻量无依赖",
   "main": "dist/xiangjsoncraft.cjs.js",
   "module": "dist/xiangjsoncraft.esm.js",
@@ -30,4 +30,4 @@
   "author": "董翔 <3631247406@qq.com>",
   "license": "MIT",
   "homepage": "https://www.npmjs.com/package/xiangjsoncraft"
-}
+}