xiangjsoncraft 1.1.0 → 1.1.2

package/README.md

@@ -1,69 +1,54 @@
-# XiangJsonCraft 软件包 官方文档
-
+# XiangJsonCraft
 ![XiangJsonCraft Logo](https://picsum.photos/seed/xiangjsoncraft/200/200)
 
-XiangJsonCraft 是一个简单而强大的 JSON 配置与 HTML 页面渲染工具，由大学生董翔开发，专为前端开发者设计。通过简洁的 API，它允许你使用 JSON 配置文件来定义样式和内容，并将其应用到 HTML 页面中，实现动态页面的快速构建。
-
-## 🚀 最新更新 (v1.1.0)
-
-我们很高兴地宣布 XiangJsonCraft v1.1.0 版本发布！这个版本带来了重大功能升级，让 JSON 配置网页的能力得到质的飞跃：
+XiangJsonCraft 是一个简单而强大的 JSON 配置与 HTML 页面渲染工具，由大学生董翔开发，专为前端开发者设计。通过简洁的 API，它允许你使用 JSON 配置文件来定义样式和内容，并将其应用到 HTML 页面中，实现动态页面的快速构建，做到样式、内容与代码的解耦管理。
+
+## 🚀 最新更新 (v1.1.1)
+基于 v1.1.0 核心功能完成**环境适配升级**，新增 CDN/本地双环境兼容能力，发布后可零成本实现本地开发、CDN 在线使用，同时优化渲染容错性，避免空配置、无效选择器导致的渲染异常。
+
+### 核心更新
+- **CDN/本地双环境适配**：自动识别运行环境，无需修改代码即可实现本地开发、CDN 在线调用
+- **渲染容错优化**：过滤空样式、无效选择器，新增样式块创建判空，控制台错误提示更友好
+- **打包格式完善**：提供 UMD/ES/CJS 三种打包格式，适配浏览器、前端框架、Node.js 全环境
+- **使用体验升级**：新增 npm dev 脚本，一键启动开发服务器，快速验证开发效果
+
+## ✨ 核心特性
+- **简单易用**：仅需一行 API 调用，即可完成整个页面的样式和内容渲染
+- **灵活配置**：通过单一 JSON 文件定义所有样式、文本、HTML 内容，支持按需修改
+- **轻量级无依赖**：原生 JavaScript 开发，无任何第三方依赖，体积小巧，加载速度快
+- **全面的 CSS 支持**：兼容所有 CSS 选择器（类、ID、伪类、伪元素、媒体查询等）
+- **响应式设计友好**：直接通过 JSON 配置媒体查询，轻松实现多屏幕尺寸适配
+- **双内容类型支持**：同时支持纯文本、HTML 片段动态注入，满足不同内容渲染需求
+- **多环境适配**：支持本地模块化引入、CDN 全局调用，适配所有现代浏览器
+- **高容错性**：自动过滤无效配置、空样式，避免单一配置错误导致整体渲染失败
+
+## 📦 安装使用
+### 1. npm 安装
+```bash
+# npm
+npm install xiangjsoncraft --save
 
-### 核心增强
-- **全面支持任意 CSS 选择器**：不再局限于预设元素，现在可通过 JSON 配置任何 CSS 选择器（类、ID、伪类、媒体查询等）
-- **增强的渲染逻辑**：重构了渲染引擎，支持更复杂的样式结构和内容类型
-- **响应式设计支持**：通过媒体查询配置，轻松实现不同屏幕尺寸的适配
-- **HTML 内容支持**：不仅能设置文本内容，还可以配置 HTML 片段
+# yarn
+yarn add xiangjsoncraft
 
-### 配置示例升级
-旧版本：
-```json
-{
-  "styles": {
-    "body": { ... },
-    "header": { ... }
-  }
-}
+# pnpm
+pnpm add xiangjsoncraft
 ```
 
-新版本支持：
-```json
-{
-  "styles": {
-    ".card": { ... },
-    "#hero-section": { ... },
-    "nav a:hover": { ... },
-    "@media (max-width: 768px)": { ... }
-  },
-  "content": {
-    ".title": {
-      "value": "<strong>欢迎使用</strong>",
-      "isHtml": true
-    }
-  }
-}
-```
-
-## 特性
-
-- **简单易用**：只需几行代码即可完成页面渲染
-- **灵活配置**：通过 JSON 文件定义样式和内容
-- **轻量级**：无额外依赖，体积小巧
-- **全面的选择器支持**：兼容所有 CSS 选择器语法
-- **响应式设计**：轻松配置不同设备的显示效果
-- **动态内容**：支持文本和 HTML 内容的动态注入
-
-## 安装
-
-```bash
-npm install xiangjsoncraft
+### 2. CDN 在线使用（零安装）
+无需本地安装，一行脚本引入即可全局调用，适合快速原型开发、静态页面使用：
+```html
+<!-- 引入UMD包，自动挂载全局变量 XiangJsonCraft -->
+<script src="https://cdn.jsdelivr.net/npm/xiangjsoncraft@1.1.1/dist/xiangjsoncraft.umd.js"></script>
+<!-- 直接调用核心方法，零配置渲染 -->
+<script>
+  XiangJsonCraft.renderJsonStyles();
+</script>
 ```
 
-## 快速开始
-
-### 1. 创建 JSON 配置文件
-
-创建 `config.json` 配置文件，定义页面的样式和内容：
-
+## ⚡ 快速开始
+### 步骤1：创建 JSON 配置文件
+在项目根目录/HTML 同级目录创建 `config.json`，定义页面的样式、文本及 HTML 内容，支持所有 CSS 选择器和媒体查询：
 ```json
 {
   "styles": {
@@ -75,197 +60,232 @@ npm install xiangjsoncraft
     "body": {
       "fontFamily": "Arial, sans-serif",
       "lineHeight": "1.6",
-      "color": "#333"
+      "color": "#333",
+      "backgroundColor": "#f9f9f9",
+      "padding": "2rem"
     },
     ".header": {
       "backgroundColor": "#2c3e50",
       "color": "white",
-      "padding": "1rem",
-      "textAlign": "center"
+      "padding": "1.5rem",
+      "textAlign": "center",
+      "borderRadius": "8px",
+      "marginBottom": "2rem"
     },
     "nav ul": {
       "display": "flex",
       "listStyle": "none",
       "justifyContent": "center",
-      "gap": "1rem"
+      "gap": "1.5rem",
+      "marginBottom": "2rem"
+    },
+    "nav a": {
+      "color": "#2c3e50",
+      "textDecoration": "none",
+      "fontSize": "1.1rem"
     },
     "nav a:hover": {
       "color": "#f39c12",
-      "textDecoration": "none"
+      "textDecoration": "underline"
+    },
+    ".card": {
+      "background": "white",
+      "padding": "2rem",
+      "borderRadius": "8px",
+      "boxShadow": "0 2px 8px rgba(0,0,0,0.1)"
     },
     "@media (max-width: 768px)": {
+      "body": {
+        "padding": "1rem"
+      },
       "nav ul": {
         "flexDirection": "column",
-        "alignItems": "center"
+        "alignItems": "center",
+        "gap": "1rem"
       }
     }
   },
   "content": {
     ".header h1": {
-      "value": "我的网站",
+      "value": "XiangJsonCraft 演示页面",
       "isHtml": false
     },
-    "#intro": {
-      "value": "<p>欢迎访问我的网站</p>",
+    ".card h2": {
+      "value": "<span style='color:#2c3e50;'>JSON 配置渲染</span> 就是这么简单",
       "isHtml": true
+    },
+    ".card p": {
+      "value": "通过单个 JSON 文件定义所有样式和内容，一行代码完成页面渲染，实现代码与配置的解耦管理。",
+      "isHtml": false
     }
   }
 }
 ```
 
-### 2. 创建 HTML 页面
-
-创建 `index.html` 页面：
-
+### 步骤2：创建 HTML 页面
+创建 `index.html`，引入渲染容器并调用核心 API，无需手写任何 CSS 样式：
 ```html
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>XiangJsonCraft 示例</title>
+    <title>XiangJsonCraft 快速开始</title>
+    <!-- 动态样式块，渲染后的CSS会注入到这里 -->
     <style id="dynamic-styles"></style>
 </head>
 <body>
+    <!-- 页面渲染容器，与config.json中的选择器匹配 -->
     <header class="header">
         <h1></h1>
     </header>
     <nav>
         <ul>
             <li><a href="#">首页</a></li>
-            <li><a href="#">关于</a></li>
-            <li><a href="#">联系</a></li>
+            <li><a href="#">文档</a></li>
+            <li><a href="#">示例</a></li>
         </ul>
     </nav>
-    <div id="intro"></div>
+    <div class="card">
+        <h2></h2>
+        <p></p>
+    </div>
 
+    <!-- 方式1：本地模块化引入（推荐，适合项目开发） -->
     <script type="module">
         import { renderJsonStyles } from './renderJson.js';
+        // 一行调用，完成所有样式和内容渲染
         renderJsonStyles();
     </script>
+
+    <!-- 方式2：CDN全局调用（注释方式1，打开此注释即可） -->
+    <!-- <script src="https://cdn.jsdelivr.net/npm/xiangjsoncraft@1.1.1/dist/xiangjsoncraft.umd.js"></script>
+    <script>
+        XiangJsonCraft.renderJsonStyles();
+    </script> -->
 </body>
 </html>
 ```
 
-### 3. 渲染逻辑
-
-`renderJson.js` 中的渲染函数：
-
-```javascript
-// 定义 replaceCamelCase 方法，用于将驼峰式命名转换为连字符命名
-String.prototype.replaceCamelCase = function (separator = '-') {
-    return this.replace(/[A-Z]/g, function (match) {
-        return separator + match.toLowerCase();
-    });
-};
-
-// 封装通用JSON样式渲染函数，支持任意CSS选择器
-function renderJsonStyles() {
-    // 使用fetch API获取JSON配置文件
-    fetch('./config.json')
-        .then(response => {
-            if (!response.ok) {
-                throw new Error(`网络响应失败: ${response.status}`);
-            }
-            return response.json();
-        })
-        .then(config => {
-            const styleBlock = document.getElementById('dynamic-styles') || createStyleBlock();
-            
-            // 生成CSS规则
-            let cssRules = '';
-            
-            // 处理所有选择器样式
-            if (config.styles && typeof config.styles === 'object') {
-                // 遍历所有选择器
-                Object.entries(config.styles).forEach(([selector, styles]) => {
-                    // 生成该选择器的所有样式属性
-                    const styleProperties = Object.entries(styles)
-                        .map(([prop, value]) => {
-                            // 将驼峰式属性名转换为CSS格式（如fontSize -> font-size）
-                            const cssProp = prop.replaceCamelCase();
-                            return `${cssProp}: ${value};`;
-                        })
-                        .join('\n    ');
-                    
-                    // 添加选择器及其样式到CSS规则
-                    cssRules += `${selector} {\n    ${styleProperties}\n}\n\n`;
-                });
-            }
-            
-            // 处理内容配置
-            if (config.content && typeof config.content === 'object') {
-                Object.entries(config.content).forEach(([selector, content]) => {
-                    const elements = document.querySelectorAll(selector);
-                    elements.forEach(el => {
-                        // 支持HTML内容或纯文本
-                        if (content.isHtml) {
-                            el.innerHTML = content.value;
-                        } else {
-                            el.textContent = content.value;
-                        }
-                    });
-                });
-            }
-            
-            // 将生成的CSS应用到样式块
-            styleBlock.innerHTML = cssRules;
-        })
-        .catch(error => {
-            console.error('处理样式配置时出错:', error);
-        });
-}
-
-// 创建样式块并添加到文档头部
-function createStyleBlock() {
-    const style = document.createElement('style');
-    style.id = 'dynamic-styles';
-    document.head.appendChild(style);
-    return style;
-}
-
-// 导出渲染函数
-export { renderJsonStyles };
-```
+### 步骤3：开发运行
+```bash
+# 安装开发依赖（首次使用）
+npm install
 
-### 4. 运行项目
+# 打包生成多格式文件（UMD/ES/CJS）
+npm run build
 
-```bash
-# 运行开发服务器
+# 启动开发服务器，一键预览效果
 npm run dev
 ```
+在浏览器中访问 `http://localhost:3000`，即可看到由 JSON 配置渲染的完整页面。
 
-在浏览器中访问 `http://localhost:3000` 即可查看效果。
-
-## API 文档
-
+## 📚 API 文档
 ### `renderJsonStyles()`
+**核心渲染方法**，无入参，执行后自动完成以下操作：
+1. 自动识别运行环境（本地/CDN），加载对应路径的 `config.json` 配置文件
+2. 解析配置中的 `styles` 节点，生成标准 CSS 样式并注入到页面头部的 `#dynamic-styles` 样式块
+3. 解析配置中的 `content` 节点，根据 `isHtml` 标识，向匹配的 DOM 节点注入纯文本/HTML 内容
+4. 控制台输出渲染成功提示，若配置异常则输出友好的错误信息
 
-从 `config.json` 文件中读取样式和内容配置，并将其应用到 HTML 页面中。
-
-#### 示例
-
+#### 调用方式
 ```javascript
-import { renderJsonStyles } from './renderJson.js';
+// 方式1：ES6模块化引入（本地开发/前端框架）
+import { renderJsonStyles } from 'xiangjsoncraft';
 renderJsonStyles();
+
+// 方式2：CDN全局调用（静态页面/快速开发）
+XiangJsonCraft.renderJsonStyles();
 ```
 
-## 配置说明
+## ⚙️ 配置文件说明
+配置文件为标准 JSON 格式，核心包含 `styles` 和 `content` 两个一级节点，所有配置均支持按需扩展、修改。
 
-配置文件结构：
+### 1. `styles` 节点
+用于定义页面所有 CSS 样式，**键为任意合法 CSS 选择器**，值为样式属性对象，样式属性支持**驼峰式命名**（会自动转换为 CSS 标准短横线命名）。
+- 支持选择器：类、ID、标签、伪类、伪元素、后代选择器、媒体查询等所有 CSS 合法选择器
+- 样式属性：所有 CSS 原生属性，驼峰式（`fontSize`）会自动转为短横线式（`font-size`）
 
-- **`styles`**：包含所有CSS样式配置，键为CSS选择器，值为样式属性对象
-  - 支持所有CSS选择器（类、ID、伪类、媒体查询等）
-  - 样式属性支持驼峰命名（如`fontSize`会自动转换为`font-size`）
+### 2. `content` 节点
+用于定义页面文本/HTML 内容，**键为 CSS 选择器**，值为内容配置对象，包含两个必选属性：
+- `value`：字符串类型，要渲染的内容（纯文本/HTML 片段）
+- `isHtml`：布尔类型，`true` 表示内容为 HTML 片段，`false` 表示内容为纯文本（默认）
 
-- **`content`**：包含所有内容配置，键为CSS选择器，值为内容对象
-  - `value`：要设置的内容（文本或HTML）
-  - `isHtml`：布尔值，指示内容是否为HTML片段
+### 配置文件规范
+1. 配置文件必须命名为 `config.json`，与 HTML 页面同级目录（CDN 方式无需手动创建，自动加载官方配置）
+2. 选择器必须匹配 HTML 中的实际 DOM 节点，否则会被自动过滤
+3. 样式属性值需符合 CSS 规范（如单位、颜色值、尺寸值）
+4. HTML 片段需保证语法合法，避免 XSS 风险（建议仅在可信环境下使用 HTML 内容）
 
-## 彩蛋
+## 🎨 配置示例
+### 完整配置示例
+```json
+{
+  "styles": {
+    // 通配符选择器
+    "*": {
+      "margin": "0",
+      "padding": "0",
+      "boxSizing": "border-box"
+    },
+    // 标签选择器
+    "body": {
+      "fontFamily": "Microsoft YaHei, sans-serif",
+      "lineHeight": "1.8",
+      "color": "#333",
+      "backgroundColor": "#f5f5f5"
+    },
+    // ID选择器
+    "#app": {
+      "maxWidth": "1200px",
+      "margin": "0 auto",
+      "padding": "2rem"
+    },
+    // 类选择器
+    ".btn": {
+      "padding": "0.8rem 1.5rem",
+      "border": "none",
+      "borderRadius": "4px",
+      "cursor": "pointer",
+      "fontSize": "1rem"
+    },
+    // 伪类选择器
+    ".btn-primary": {
+      "backgroundColor": "#3498db",
+      "color": "white"
+    },
+    ".btn-primary:hover": {
+      "backgroundColor": "#2980b9"
+    },
+    // 媒体查询
+    "@media (max-width: 768px)": {
+      "#app": {
+        "padding": "1rem"
+      },
+      ".btn": {
+        "width": "100%",
+        "marginBottom": "1rem"
+      }
+    }
+  },
+  "content": {
+    // 纯文本内容
+    "#app h1": {
+      "value": "XiangJsonCraft 配置示例",
+      "isHtml": false
+    },
+    // HTML 片段内容
+    ".desc": {
+      "value": "支持 <strong>HTML 片段</strong> 和 <em>纯文本</em> 两种渲染方式",
+      "isHtml": true
+    }
+  }
+}
+```
+
+## 🥚 彩蛋：工具背后的小插曲
+### “敢改包”的底气来源
 
-```markdown
-# 工具背后的小插曲：“敢改包”的底气来源
 其实XiangJsonCraft的诞生，还藏着一段有趣的小场景——
 
 某天，朋友在Vue项目里用这个包时，遇到了个不符合自己编程习惯的小细节，对着node_modules里的代码犯愁：“老师说这地方不能随便改，容易牵一发而动全身。”
@@ -279,17 +299,31 @@ renderJsonStyles();
 对别人来说，改node_modules是“碰别人的代码”；但对我来说，改的是“自己写的工具”。知道怎么调整既不破坏核心功能，又能贴合朋友的习惯，这份底气，其实来自“开发者”这个身份最本质的掌控感。
 
 所以如果你用的时候也有小想法，不用怕“改坏”——工具本身就为“灵活适配”留足了空间，而作为作者，我也始终在背后，为它的稳定和好用托底。
-```
 
-## 贡献指南
+## 🌐 浏览器兼容性
+支持所有现代浏览器，无需额外引入 polyfill：
+- Chrome ≥ 61
+- Firefox ≥ 60
+- Edge ≥ 79
+- Safari ≥ 12.1
+- Opera ≥ 48
+- 移动端所有现代浏览器（微信浏览器、QQ浏览器、Safari 移动端等）
 
-我们欢迎任何人贡献代码或提出建议。如果你想参与开发，请通过邮件联系我们。
+## 🤝 贡献指南
+XiangJsonCraft 欢迎所有开发者的贡献和建议，如果你有以下想法，欢迎随时交流：
+- 新增功能需求
+- 性能优化建议
+- Bug 修复
+- 文档完善
 
-## 许可证
+**贡献方式**：通过邮箱联系作者，提供你的想法、代码或问题描述，作者会第一时间回复。
 
-MIT License
+## 📄 许可证
+本项目基于 **MIT 开源许可证** 发布，你可以自由使用、修改、分发本项目，无需支付任何费用，只需保留版权声明。
 
-Copyright (c) 2025 xiang
+```
+MIT License
+Copyright (c) 2025 董翔
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -308,11 +342,14 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+```
 
-## 联系我们
-
-如果你有任何问题或建议，请通过以下方式联系我们：
+## 📞 联系我们
+如果你有任何问题、建议或合作想法，欢迎通过以下方式联系作者：
+- **Email**：3631247406@qq.com
+- **作者**：董翔
 
-- Email: 3631247406@qq.com
+---
 
-感谢使用 XiangJsonCraft！
+**感谢使用 XiangJsonCraft！**  
+愿这个小工具能让你的前端开发更高效、更轻松 🚀

package/dist/xiangjsoncraft.cjs.js

@@ -0,0 +1,86 @@
+'use strict';
+
+// 封装通用JSON样式渲染函数，支持任意CSS选择器、HTML内容、媒体查询（v1.1.0核心功能）
+function renderJsonStyles() {
+    // 核心原则：本地config.json永远最高优先级，加载失败再用CDN官方配置
+    const localConfigUrl = './config.json'; // 本地用户自定义配置
+    const cdnConfigUrl = 'https://cdn.jsdelivr.net/npm/xiangjsoncraft@1.1.1/config.json'; // CDN兜底配置
+
+    // 先尝试加载本地config.json
+    fetch(localConfigUrl)
+        .then(response => {
+            // 本地配置存在（状态码200），则使用本地配置
+            if (response.ok) {
+                console.log('🔧 检测到本地config.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('❌ 样式块创建失败，无法渲染样式');
+
+            // 生成CSS规则
+            let cssRules = '';
+
+            // 处理所有选择器样式（支持任意CSS选择器、媒体查询）
+            if (config.styles && typeof config.styles === 'object' && Object.keys(config.styles).length > 0) {
+                // 遍历所有选择器（类、ID、伪类、媒体查询等）
+                Object.entries(config.styles).forEach(([selector, styles]) => {
+                    // 过滤空样式，避免无效CSS
+                    if (!styles || typeof styles !== 'object') return;
+                    // 生成该选择器的所有样式属性
+                    const styleProperties = Object.entries(styles)
+                        .map(([prop, value]) => {
+                            // 过滤空属性，驼峰式属性名转换为CSS标准格式
+                            if (!prop || value === undefined || value === null) return '';
+                            const cssProp = prop.replaceCamelCase();
+                            return `${cssProp}: ${value};`;
+                        })
+                        .filter(Boolean) // 移除空属性
+                        .join('\n    ');
+
+                    // 仅当有样式属性时，添加到CSS规则
+                    if (styleProperties) {
+                        cssRules += `${selector} {\n    ${styleProperties}\n}\n\n`;
+                    }
+                });
+            }
+
+            // 应用生成的CSS规则到样式块
+            if (cssRules) {
+                styleBlock.innerHTML = cssRules;
+            }
+
+            // 处理内容配置（支持纯文本/HTML内容，通过isHtml标识）
+            if (config.content && typeof config.content === 'object' && Object.keys(config.content).length > 0) {
+                Object.entries(config.content).forEach(([selector, content]) => {
+                    // 过滤无效选择器和内容
+                    if (!selector || !content || !content.hasOwnProperty('value')) return;
+                    const elements = document.querySelectorAll(selector);
+                    elements.forEach(el => {
+                        if (!el) return;
+                        // 支持HTML内容或纯文本，默认纯文本
+                        if (content.isHtml) {
+                            el.innerHTML = content.value;
+                        } else {
+                            el.textContent = content.value;
+                        }
+                    });
+                });
+            }
+
+            console.log('✅ XiangJsonCraft v1.1.1 渲染成功！');
+        })
+        .catch(error => {
+            console.error('❌ XiangJsonCraft 处理配置时出错:', error.message);
+        });
+}
+
+exports.renderJsonStyles = renderJsonStyles;

package/dist/xiangjsoncraft.esm.js

@@ -0,0 +1,84 @@
+// 封装通用JSON样式渲染函数，支持任意CSS选择器、HTML内容、媒体查询（v1.1.0核心功能）
+function renderJsonStyles() {
+    // 核心原则：本地config.json永远最高优先级，加载失败再用CDN官方配置
+    const localConfigUrl = './config.json'; // 本地用户自定义配置
+    const cdnConfigUrl = 'https://cdn.jsdelivr.net/npm/xiangjsoncraft@1.1.1/config.json'; // CDN兜底配置
+
+    // 先尝试加载本地config.json
+    fetch(localConfigUrl)
+        .then(response => {
+            // 本地配置存在（状态码200），则使用本地配置
+            if (response.ok) {
+                console.log('🔧 检测到本地config.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('❌ 样式块创建失败，无法渲染样式');
+
+            // 生成CSS规则
+            let cssRules = '';
+
+            // 处理所有选择器样式（支持任意CSS选择器、媒体查询）
+            if (config.styles && typeof config.styles === 'object' && Object.keys(config.styles).length > 0) {
+                // 遍历所有选择器（类、ID、伪类、媒体查询等）
+                Object.entries(config.styles).forEach(([selector, styles]) => {
+                    // 过滤空样式，避免无效CSS
+                    if (!styles || typeof styles !== 'object') return;
+                    // 生成该选择器的所有样式属性
+                    const styleProperties = Object.entries(styles)
+                        .map(([prop, value]) => {
+                            // 过滤空属性，驼峰式属性名转换为CSS标准格式
+                            if (!prop || value === undefined || value === null) return '';
+                            const cssProp = prop.replaceCamelCase();
+                            return `${cssProp}: ${value};`;
+                        })
+                        .filter(Boolean) // 移除空属性
+                        .join('\n    ');
+
+                    // 仅当有样式属性时，添加到CSS规则
+                    if (styleProperties) {
+                        cssRules += `${selector} {\n    ${styleProperties}\n}\n\n`;
+                    }
+                });
+            }
+
+            // 应用生成的CSS规则到样式块
+            if (cssRules) {
+                styleBlock.innerHTML = cssRules;
+            }
+
+            // 处理内容配置（支持纯文本/HTML内容，通过isHtml标识）
+            if (config.content && typeof config.content === 'object' && Object.keys(config.content).length > 0) {
+                Object.entries(config.content).forEach(([selector, content]) => {
+                    // 过滤无效选择器和内容
+                    if (!selector || !content || !content.hasOwnProperty('value')) return;
+                    const elements = document.querySelectorAll(selector);
+                    elements.forEach(el => {
+                        if (!el) return;
+                        // 支持HTML内容或纯文本，默认纯文本
+                        if (content.isHtml) {
+                            el.innerHTML = content.value;
+                        } else {
+                            el.textContent = content.value;
+                        }
+                    });
+                });
+            }
+
+            console.log('✅ XiangJsonCraft v1.1.1 渲染成功！');
+        })
+        .catch(error => {
+            console.error('❌ XiangJsonCraft 处理配置时出错:', error.message);
+        });
+}
+
+export { renderJsonStyles };

package/dist/xiangjsoncraft.umd.js

@@ -0,0 +1,82 @@
+(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() {
+    // 核心原则：本地config.json永远最高优先级，加载失败再用CDN官方配置
+    const localConfigUrl = './config.json'; // 本地用户自定义配置
+    const cdnConfigUrl = 'https://cdn.jsdelivr.net/npm/xiangjsoncraft@1.1.1/config.json'; // CDN兜底配置
+
+    // 先尝试加载本地config.json
+    fetch(localConfigUrl)
+        .then(response => {
+            // 本地配置存在（状态码200），则使用本地配置
+            if (response.ok) {
+                console.log('🔧 检测到本地config.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('❌ 样式块创建失败，无法渲染样式');
+
+            // 生成CSS规则
+            let cssRules = '';
+
+            // 处理所有选择器样式（支持任意CSS选择器、媒体查询）
+            if (config.styles && typeof config.styles === 'object' && Object.keys(config.styles).length > 0) {
+                // 遍历所有选择器（类、ID、伪类、媒体查询等）
+                Object.entries(config.styles).forEach(([selector, styles]) => {
+                    // 过滤空样式，避免无效CSS
+                    if (!styles || typeof styles !== 'object') return;
+                    // 生成该选择器的所有样式属性
+                    const styleProperties = Object.entries(styles)
+                        .map(([prop, value]) => {
+                            // 过滤空属性，驼峰式属性名转换为CSS标准格式
+                            if (!prop || value === undefined || value === null) return '';
+                            const cssProp = prop.replaceCamelCase();
+                            return `${cssProp}: ${value};`;
+                        })
+                        .filter(Boolean) // 移除空属性
+                        .join('\n    ');
+
+                    // 仅当有样式属性时，添加到CSS规则
+                    if (styleProperties) {
+                        cssRules += `${selector} {\n    ${styleProperties}\n}\n\n`;
+                    }
+                });
+            }
+
+            // 应用生成的CSS规则到样式块
+            if (cssRules) {
+                styleBlock.innerHTML = cssRules;
+            }
+
+            // 处理内容配置（支持纯文本/HTML内容，通过isHtml标识）
+            if (config.content && typeof config.content === 'object' && Object.keys(config.content).length > 0) {
+                Object.entries(config.content).forEach(([selector, content]) => {
+                    // 过滤无效选择器和内容
+                    if (!selector || !content || !content.hasOwnProperty('value')) return;
+                    const elements = document.querySelectorAll(selector);
+                    elements.forEach(el => {
+                        if (!el) return;
+                        // 支持HTML内容或纯文本，默认纯文本
+                        if (content.isHtml) {
+                            el.innerHTML = content.value;
+                        } else {
+                            el.textContent = content.value;
+                        }
+                    });
+                });
+            }
+
+            console.log('✅ XiangJsonCraft v1.1.1 渲染成功！');
+        })
+        .catch(error => {
+            console.error('❌ XiangJsonCraft 处理配置时出错:', error.message);
+        });
+}exports.renderJsonStyles=renderJsonStyles;}));

package/package.json

@@ -1,21 +1,33 @@
 {
   "name": "xiangjsoncraft",
-  "version": "1.1.0",
-  "description": "Create beautiful web pages with simple JSON configuration",
-  "main": "renderJson.js",
+  "version": "1.1.2",
+  "description": "简单而强大的JSON配置与HTML页面渲染工具，支持任意CSS选择器、响应式设计、HTML内容动态注入，轻量无依赖",
+  "main": "dist/xiangjsoncraft.cjs.js",
+  "module": "dist/xiangjsoncraft.esm.js",
+  "browser": "dist/xiangjsoncraft.umd.js",
+  "files": [
+    "dist",
+    "renderJson.js",
+    "config.json",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "npx live-server . --port=3000"
+    "build": "rollup -c",
+    "dev": "npx serve ."
+  },
+  "devDependencies": {
+    "rollup": "^4.12.0"
   },
   "keywords": [
-    "json",
-    "css",
-    "html",
-    "configuration",
-    "ui",
-    "web"
+    "json-render",
+    "dynamic-css",
+    "html-render",
+    "json-config",
+    "frontend-tool",
+    "xiangjsoncraft"
   ],
-  "author": "",
+  "author": "董翔 <3631247406@qq.com>",
   "license": "MIT",
-  "type": "module"
+  "homepage": "https://www.npmjs.com/package/xiangjsoncraft"
 }

package/renderJson.js

@@ -1,97 +1,82 @@
-// 定义驼峰式命名转换方法
-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;
-}
-
-// 渲染图标函数
-function renderIcons(selector, icons) {
-    const container = document.querySelector(selector);
-    if (!container) return;
-    
-    container.innerHTML = icons.map(icon => `
-        <a href="${icon.url}" class="social-icon" target="_blank" rel="noopener">
-            <i class="${icon.class}"></i>
-        </a>
-    `).join('');
-}
-
-// 渲染特性卡片函数
-function renderFeatureCards(selectorPrefix, features) {
-    features.forEach((feature, index) => {
-        const card = document.querySelector(`${selectorPrefix}-${index + 1}`);
-        if (card) {
-            card.innerHTML = `
-                <div class="feature-icon"><i class="${feature.iconClass}"></i></div>
-                <h3 class="feature-title">${feature.title}</h3>
-                <p class="feature-description">${feature.description}</p>
-            `;
-        }
-    });
-}
-
-// 主渲染函数
+// 封装通用JSON样式渲染函数，支持任意CSS选择器、HTML内容、媒体查询（v1.1.0核心功能）
 export function renderJsonStyles() {
-    fetch('./config.json')
+    // 核心原则：本地config.json永远最高优先级，加载失败再用CDN官方配置
+    const localConfigUrl = './config.json'; // 本地用户自定义配置
+    const cdnConfigUrl = 'https://cdn.jsdelivr.net/npm/xiangjsoncraft@1.1.1/config.json'; // CDN兜底配置
+
+    // 先尝试加载本地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('❌ 样式块创建失败，无法渲染样式');
+
+            // 生成CSS规则
             let cssRules = '';
-            
-            // 处理所有样式
-            if (config.styles && typeof config.styles === 'object') {
+
+            // 处理所有选择器样式（支持任意CSS选择器、媒体查询）
+            if (config.styles && typeof config.styles === 'object' && Object.keys(config.styles).length > 0) {
+                // 遍历所有选择器（类、ID、伪类、媒体查询等）
                 Object.entries(config.styles).forEach(([selector, styles]) => {
+                    // 过滤空样式，避免无效CSS
+                    if (!styles || typeof styles !== 'object') return;
+                    // 生成该选择器的所有样式属性
                     const styleProperties = Object.entries(styles)
-                        .map(([prop, value]) => `${prop.replaceCamelCase()}: ${value};`)
+                        .map(([prop, value]) => {
+                            // 过滤空属性，驼峰式属性名转换为CSS标准格式
+                            if (!prop || value === undefined || value === null) return '';
+                            const cssProp = prop.replaceCamelCase();
+                            return `${cssProp}: ${value};`;
+                        })
+                        .filter(Boolean) // 移除空属性
                         .join('\n    ');
-                    
-                    cssRules += `${selector} {\n    ${styleProperties}\n}\n\n`;
+
+                    // 仅当有样式属性时，添加到CSS规则
+                    if (styleProperties) {
+                        cssRules += `${selector} {\n    ${styleProperties}\n}\n\n`;
+                    }
                 });
             }
-            
-            // 应用CSS规则
-            styleBlock.innerHTML = cssRules;
-            
-            // 处理文本内容
-            if (config.content && typeof config.content === 'object') {
+
+            // 应用生成的CSS规则到样式块
+            if (cssRules) {
+                styleBlock.innerHTML = cssRules;
+            }
+
+            // 处理内容配置（支持纯文本/HTML内容，通过isHtml标识）
+            if (config.content && typeof config.content === 'object' && Object.keys(config.content).length > 0) {
                 Object.entries(config.content).forEach(([selector, content]) => {
+                    // 过滤无效选择器和内容
+                    if (!selector || !content || !content.hasOwnProperty('value')) return;
                     const elements = document.querySelectorAll(selector);
                     elements.forEach(el => {
-                        el.textContent = content;
+                        if (!el) return;
+                        // 支持HTML内容或纯文本，默认纯文本
+                        if (content.isHtml) {
+                            el.innerHTML = content.value;
+                        } else {
+                            el.textContent = content.value;
+                        }
                     });
                 });
             }
-            
-            // 渲染图标
-            if (config.icons) {
-                renderIcons(config.icons.selector, config.icons.items);
-            }
-            
-            // 渲染特性卡片
-            if (config.features) {
-                renderFeatureCards(config.features.selectorPrefix, config.features.items);
-            }
-            
-            // 添加页面载入动画类
-            document.body.classList.add('loaded');
-            
+
+            console.log('✅ XiangJsonCraft v1.1.1 渲染成功！');
         })
         .catch(error => {
-            console.error('处理配置时出错:', error);
+            console.error('❌ XiangJsonCraft 处理配置时出错:', error.message);
         });
-}
-    
+}

package/index.html

@@ -1,53 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Welcome Page</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style id="dynamic-styles"></style>
-</head>
-
-<body>
-    <div class="welcome-container">
-        <header class="welcome-header">
-            <div class="logo-container">
-                <div class="logo"></div>
-            </div>
-            <h1 class="main-title"></h1>
-            <p class="subtitle"></p>
-        </header>
-
-        <main class="features-section">
-            <div class="feature-card" id="feature-1"></div>
-            <div class="feature-card" id="feature-2"></div>
-            <div class="feature-card" id="feature-3"></div>
-        </main>
-
-   <section class="action-section">
-    <a href="https://www.npmjs.com/package/xiangjsoncraft">
-        <button class="primary-button"></button>
-    </a>
-    <p class="additional-info"></p>
-</section>
-
-        <footer class="page-footer">
-            <p class="copyright"></p>
-
-
-            <div class="social-links">
-            </div>
-
-
-        </footer>
-    </div>
-
-    <script type="module">
-        import { renderJsonStyles } from './renderJson.js';
-        // 页面加载完成后渲染
-        window.addEventListener('DOMContentLoaded', renderJsonStyles);
-    </script>
-</body>
-
-</html>