leafer-x-design-system 2.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Leafer Design System Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+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.

package/README.md

@@ -0,0 +1,300 @@
+# 🎨 Leafer Design System
+
+基于 LeaferJS 的高保真 UI 设计系统生成器，支持响应式设计、暗黑模式和丰富的组件库。
+
+## ✨ 特性
+
+- 🎯 **高保真渲染**: 基于 LeaferJS + Skia Canvas，输出像素级精准的 UI 原型
+- 📱 **响应式设计**: 支持桌面端、移动端、平板多种设备尺寸
+- 🌓 **双主题模式**: 内置亮色/暗色主题，一键切换
+- 🧩 **丰富组件**: 按钮、输入框、表格、模态框、下拉菜单、标签页、开关等
+- 🔤 **中文支持**: 完美支持中文字体渲染
+- ⚡ **高性能**: 缓存机制，批量渲染更高效
+- 🛠️ **CLI 工具**: 命令行快速生成和渲染
+
+## 📦 安装
+
+```bash
+# 全局安装
+npm install -g leafer-design-system
+
+# 或本地安装
+npm install leafer-design-system
+```
+
+## 🚀 快速开始
+
+### 方式一：使用 CLI
+
+```bash
+# 生成设计系统
+leafer-design generate "My App" "#667eea" "#764ba2"
+
+# 渲染模板
+leafer-design render ./templates/login.json
+
+# 启动 MCP 服务
+leafer-design serve 3001
+
+# 查看帮助
+leafer-design help
+```
+
+### 方式二：使用 API
+
+```javascript
+const {
+  generateDesignSystem,
+  renderTemplate,
+  createGenerator
+} = require('leafer-design-system');
+
+// 快速生成设计系统
+const designSystem = generateDesignSystem({
+  name: 'My App',
+  primaryColor: '#667eea',
+  secondaryColor: '#764ba2',
+  mode: 'light'
+}, './output');
+
+// 渲染单个模板
+const template = require('./templates/login.json');
+const result = await renderTemplate(template, {
+  outputDir: './output',
+  format: 'png'
+});
+
+console.log('图片已生成:', result.url);
+```
+
+### 方式三：高级自定义
+
+```javascript
+const {
+  DesignSystemProGenerator,
+  AdvancedComponentGenerator,
+  createRenderer
+} = require('leafer-design-system');
+
+// 创建生成器
+const generator = new DesignSystemProGenerator({
+  name: 'Custom Design System',
+  primaryColor: '#3b82f6',
+  secondaryColor: '#8b5cf6',
+  mode: 'dark'
+});
+
+// 获取组件生成器
+const componentGen = generator.componentGen;
+
+// 生成自定义表格
+const table = componentGen.generateTable(
+  ['姓名', '邮箱', '角色'],
+  [
+    ['张三', 'zhangsan@example.com', '管理员'],
+    ['李四', 'lisi@example.com', '编辑']
+  ],
+  { width: 600 }
+);
+
+// 渲染
+const renderer = createRenderer({ outputDir: './output' });
+const result = await renderer.render({
+  width: 800,
+  height: 600,
+  elements: [table],
+  options: { format: 'png' }
+});
+```
+
+## 📋 组件列表
+
+### 基础组件
+
+- ✅ Button (7种变体: Primary, Secondary, Success, Warning, Error, Ghost, Outline)
+- ✅ Input (多种状态: Default, Focused, Error, Disabled)
+- ✅ Card
+- ✅ Badge
+- ✅ Avatar
+- ✅ Progress
+
+### 高级组件
+
+- ✅ Table (表格)
+- ✅ Modal (模态框)
+- ✅ Dropdown (下拉菜单)
+- ✅ Tabs (标签页)
+- ✅ Switch (开关)
+- ✅ Checkbox (复选框)
+- ✅ Radio (单选按钮)
+
+### 响应式模板
+
+- ✅ Mobile Login (移动端登录)
+- ✅ Mobile Home (移动端首页)
+- ✅ Tablet Dashboard (平板仪表盘)
+- ✅ Desktop Dashboard (桌面仪表盘)
+- ✅ Desktop Showcase (组件展示)
+
+## 🎨 主题配置
+
+```javascript
+{
+  // 颜色
+  colors: {
+    primary: '#667eea',
+    secondary: '#764ba2',
+    success: '#48bb78',
+    warning: '#ed8936',
+    error: '#f56565',
+    info: '#4299e1'
+  },
+  
+  // 字体
+  typography: {
+    fontFamily: 'Microsoft YaHei',
+    fontSize: { xs: 12, sm: 14, base: 16, lg: 18, xl: 20 }
+  },
+  
+  // 间距
+  spacing: { 0: 0, 1: 4, 2: 8, 3: 12, 4: 16, 5: 20 },
+  
+  // 圆角
+  borderRadius: { none: 0, sm: 2, md: 4, lg: 8, xl: 12 },
+  
+  // 阴影
+  shadows: {
+    sm: { x: 0, y: 1, blur: 2, color: '#0000000d' },
+    md: { x: 0, y: 4, blur: 6, color: '#0000001a' },
+    lg: { x: 0, y: 10, blur: 15, color: '#00000026' }
+  }
+}
+```
+
+## 🔌 MCP 服务 API
+
+启动 MCP 服务后，可通过 HTTP API 调用：
+
+```bash
+curl -X POST http://localhost:3001/api/v1/ui/render \
+  -H "Content-Type: application/json" \
+  -d '{
+    "width": 800,
+    "height": 600,
+    "elements": [
+      {
+        "type": "box",
+        "x": 100,
+        "y": 100,
+        "width": 200,
+        "height": 100,
+        "fill": "#667eea",
+        "cornerRadius": 8
+      }
+    ]
+  }'
+```
+
+### API 端点
+
+| 端点                        | 方法   | 描述    |
+| ------------------------- | ---- | ----- |
+| `/health`                 | GET  | 健康检查  |
+| `/api/v1/ui/render`       | POST | 渲染 UI |
+| `/api/v1/ui/batch-render` | POST | 批量渲染  |
+| `/api/v1/cache/clear`     | POST | 清空缓存  |
+| `/api/v1/stats`           | GET  | 获取统计  |
+| `/output/:filename`       | GET  | 获取图片  |
+
+## 📁 项目结构
+
+```
+my-design-system/
+├── design-system.json      # 设计系统配置
+├── components.json         # 组件定义
+└── templates/
+    ├── desktop-login.json
+    ├── desktop-dashboard.json
+    ├── desktop-showcase.json
+    ├── mobile-login.json
+    ├── mobile-home.json
+    └── tablet-dashboard.json
+```
+
+## 🖼️ 输出示例
+
+生成的 UI 原型图：
+
+- 移动端登录页: 375x812
+- 移动端首页: 375x812
+- 桌面仪表盘: 1200x800
+- 组件展示: 1200x1600
+
+## 🛠️ 开发
+
+```bash
+# 克隆项目
+git clone https://github.com/yourusername/leafer-design-system.git
+cd leafer-design-system
+
+# 安装依赖
+npm install
+
+# 生成设计系统
+npm run generate
+
+# 渲染模板
+npm run render
+
+# 启动服务
+npm start
+```
+
+## 📄 许可证
+
+MIT License © 2024
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 PR！
+
+## 🔗 相关链接
+
+- [LeaferJS 官网](https://www.leaferjs.com/)
+- [LeaferJS GitHub](https://github.com/leaferjs/leafer)
+- [Skia Canvas](https://github.com/samizdatco/skia-canvas)
+
+***
+
+## 🤝 支持与联系
+
+如果您觉得本项目对您有帮助，欢迎请作者喝杯咖啡 ☕
+
+<table>
+  <tr>
+    <td align="center">
+      <img src="./assets/wechat-pay.png" width="200" alt="微信支付"/>
+      <br />
+      <sub>微信支付</sub>
+    </td>
+    <td align="center">
+      <img src="./assets/wechat-qr.png" width="200" alt="联系作者"/>
+      <br />
+      <sub>联系作者</sub>
+    </td>
+  </tr>
+</table>
+
+### 联系方式
+
+- **微信**: 尽为一土
+- **邮箱**: spring60\@vip.qq.com
+- **GitHub Issues**: [提交问题](https://github.com/yourusername/leafer-design-system/issues)
+
+### 加入社区
+
+欢迎加入我们的社区，一起交流 LeaferJS 和设计系统的相关技术！
+
+***
+
+**如果这个项目对你有帮助，请给我们一个 ⭐ Star！**

package/assets/README.md

@@ -0,0 +1,16 @@
+# 资源文件目录
+
+此目录用于存放项目相关的图片资源。
+
+## 文件说明
+
+- `wechat-pay.png` - 微信支付二维码
+- `wechat-qr.png` - 微信联系二维码
+
+## 添加你的二维码
+
+1. 将你的微信支付二维码截图保存为 `wechat-pay.png`
+2. 将你的微信联系二维码截图保存为 `wechat-qr.png`
+3. 放入此目录即可在 README 中显示
+
+**提示**: 二维码图片建议尺寸为 400x400 像素，文件大小控制在 200KB 以内。

package/assets/icon.svg

@@ -0,0 +1,14 @@
+<svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#2563eb;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="256" height="256" rx="48" fill="url(#grad1)"/>
+  <g fill="none" stroke="#ffffff" stroke-width="12" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M128 64 L128 192"/>
+    <path d="M64 128 L128 64 L192 128"/>
+    <circle cx="128" cy="192" r="16" fill="#ffffff"/>
+  </g>
+</svg>

package/cli.js

@@ -0,0 +1,163 @@
+#!/usr/bin/env node
+
+/**
+ * Leafer Design System - CLI 工具
+ * 
+ * 使用方法:
+ *   leafer-design generate    - 生成设计系统
+ *   leafer-design render      - 渲染模板
+ *   leafer-design serve       - 启动 MCP 服务
+ *   leafer-design help        - 显示帮助
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { generateDesignSystem, renderTemplate } = require('./index');
+
+const command = process.argv[2];
+const args = process.argv.slice(3);
+
+function showHelp() {
+  console.log(`
+🎨 Leafer Design System CLI
+
+使用方法:
+  leafer-design <command> [options]
+
+命令:
+  generate [name] [primaryColor] [secondaryColor]
+    生成设计系统
+    示例: leafer-design generate "My App" "#667eea" "#764ba2"
+
+  render <template-file>
+    渲染模板为图片
+    示例: leafer-design render ./templates/login.json
+
+  serve [port]
+    启动 MCP 服务
+    示例: leafer-design serve 3001
+
+  help
+    显示此帮助信息
+
+选项:
+  --output, -o    指定输出目录
+  --mode, -m      主题模式 (light/dark)
+  --format, -f    输出格式 (png/jpg)
+`);
+}
+
+async function generateCommand() {
+  const name = args[0] || 'My Design System';
+  const primaryColor = args[1] || '#667eea';
+  const secondaryColor = args[2] || '#764ba2';
+  const outputDir = args.find((arg, i) => arg === '--output' || arg === '-o') 
+    ? args[args.indexOf(args.find(arg => arg === '--output' || arg === '-o')) + 1]
+    : './my-design-system';
+  const mode = args.find((arg, i) => arg === '--mode' || arg === '-m')
+    ? args[args.indexOf(args.find(arg => arg === '--mode' || arg === '-m')) + 1]
+    : 'light';
+
+  console.log(`\n🎨 生成设计系统: ${name}`);
+  console.log(`   主色调: ${primaryColor}`);
+  console.log(`   次色调: ${secondaryColor}`);
+  console.log(`   主题模式: ${mode}\n`);
+
+  try {
+    const designSystem = generateDesignSystem({
+      name,
+      primaryColor,
+      secondaryColor,
+      mode
+    }, outputDir);
+
+    console.log(`\n✅ 设计系统生成成功!`);
+    console.log(`📁 输出目录: ${path.resolve(outputDir)}`);
+    console.log(`📦 包含 ${Object.keys(designSystem.templates).length} 个设备类型的模板`);
+  } catch (error) {
+    console.error(`\n❌ 生成失败: ${error.message}`);
+    process.exit(1);
+  }
+}
+
+async function renderCommand() {
+  const templateFile = args[0];
+  
+  if (!templateFile) {
+    console.error('❌ 请指定模板文件路径');
+    console.log('   示例: leafer-design render ./templates/login.json');
+    process.exit(1);
+  }
+
+  if (!fs.existsSync(templateFile)) {
+    console.error(`❌ 模板文件不存在: ${templateFile}`);
+    process.exit(1);
+  }
+
+  const outputDir = args.find((arg, i) => arg === '--output' || arg === '-o')
+    ? args[args.indexOf(args.find(arg => arg === '--output' || arg === '-o')) + 1]
+    : './output';
+  
+  const format = args.find((arg, i) => arg === '--format' || arg === '-f')
+    ? args[args.indexOf(args.find(arg => arg === '--format' || arg === '-f')) + 1]
+    : 'png';
+
+  console.log(`\n🖼️  渲染模板: ${templateFile}`);
+  console.log(`   输出格式: ${format}\n`);
+
+  try {
+    const template = JSON.parse(fs.readFileSync(templateFile, 'utf-8'));
+    const result = await renderTemplate(template, {
+      outputDir,
+      format
+    });
+
+    console.log(`\n✅ 渲染成功!`);
+    console.log(`📁 图片路径: ${result.url}`);
+    console.log(`⏱️  渲染时间: ${result.renderTime}ms`);
+  } catch (error) {
+    console.error(`\n❌ 渲染失败: ${error.message}`);
+    process.exit(1);
+  }
+}
+
+function serveCommand() {
+  const port = args[0] || 3001;
+  console.log(`\n🚀 启动 MCP 服务...`);
+  console.log(`   端口: ${port}\n`);
+  
+  // 启动服务
+  require('./start-mcp-service-v2');
+}
+
+// 主程序
+async function main() {
+  switch (command) {
+    case 'generate':
+    case 'g':
+      await generateCommand();
+      break;
+    case 'render':
+    case 'r':
+      await renderCommand();
+      break;
+    case 'serve':
+    case 's':
+      serveCommand();
+      break;
+    case 'help':
+    case 'h':
+    case '--help':
+    case '-h':
+      showHelp();
+      break;
+    default:
+      console.log('🎨 Leafer Design System v2.0.0\n');
+      showHelp();
+  }
+}
+
+main().catch(error => {
+  console.error('❌ 错误:', error.message);
+  process.exit(1);
+});

package/examples/basic-usage.js

@@ -0,0 +1,163 @@
+/**
+ * 基础使用示例
+ * 
+ * 演示如何在其他项目中使用 leafer-design-system
+ */
+
+const {
+  generateDesignSystem,
+  renderTemplate,
+  createGenerator,
+  createRenderer
+} = require('../index');
+
+async function basicExample() {
+  console.log('🎨 基础使用示例\n');
+
+  // 1. 快速生成设计系统
+  console.log('1️⃣ 生成设计系统...');
+  const designSystem = generateDesignSystem({
+    name: 'My Awesome App',
+    primaryColor: '#3b82f6',
+    secondaryColor: '#8b5cf6',
+    mode: 'light'
+  }, './output/my-app-design');
+
+  console.log('✅ 设计系统生成成功!');
+  console.log(`   名称: ${designSystem.name}`);
+  console.log(`   版本: ${designSystem.version}`);
+  console.log(`   模板数量: ${Object.keys(designSystem.templates).length}\n`);
+
+  // 2. 渲染移动端登录页
+  console.log('2️⃣ 渲染移动端登录页...');
+  const mobileLogin = designSystem.templates.mobile.login;
+  const result = await renderTemplate(mobileLogin, {
+    outputDir: './output/examples',
+    format: 'png'
+  });
+
+  console.log('✅ 渲染成功!');
+  console.log(`   图片路径: ${result.url}`);
+  console.log(`   渲染时间: ${result.renderTime}ms\n`);
+}
+
+async function advancedExample() {
+  console.log('🚀 高级自定义示例\n');
+
+  // 1. 创建自定义生成器
+  console.log('1️⃣ 创建自定义生成器...');
+  const generator = createGenerator({
+    name: 'Custom Design System',
+    primaryColor: '#10b981',
+    secondaryColor: '#f59e0b',
+    mode: 'dark'
+  });
+
+  // 2. 获取组件生成器
+  const componentGen = generator.componentGen;
+
+  // 3. 生成自定义组件
+  console.log('2️⃣ 生成自定义组件...');
+  
+  // 生成表格
+  const table = componentGen.generateTable(
+    ['产品', '价格', '库存', '状态'],
+    [
+      ['iPhone 15', '¥5999', '100', '有货'],
+      ['iPad Pro', '¥7999', '50', '有货'],
+      ['MacBook Pro', '¥14999', '20', '缺货']
+    ],
+    { width: 600, x: 50, y: 50 }
+  );
+
+  // 生成模态框
+  const modal = componentGen.generateModal(
+    '确认订单',
+    '您确定要提交此订单吗？总计: ¥28,997',
+    { x: 200, y: 150 }
+  );
+
+  // 4. 渲染组件
+  console.log('3️⃣ 渲染组件...');
+  const renderer = createRenderer({ outputDir: './output/examples' });
+
+  // 渲染表格
+  const tableResult = await renderer.render({
+    width: 700,
+    height: 300,
+    elements: [table],
+    options: { format: 'png', backgroundColor: '#f9fafb' }
+  });
+
+  console.log('✅ 表格渲染成功!');
+  console.log(`   图片路径: ${tableResult.url}\n`);
+
+  // 渲染模态框
+  const modalResult = await renderer.render({
+    width: 800,
+    height: 600,
+    elements: [modal],
+    options: { format: 'png', backgroundColor: '#f3f4f6' }
+  });
+
+  console.log('✅ 模态框渲染成功!');
+  console.log(`   图片路径: ${modalResult.url}\n`);
+}
+
+async function batchRenderExample() {
+  console.log('📦 批量渲染示例\n');
+
+  // 1. 生成设计系统
+  const generator = createGenerator({
+    name: 'Batch Example',
+    primaryColor: '#ec4899',
+    secondaryColor: '#6366f1'
+  });
+
+  const designSystem = generator.generate();
+
+  // 2. 准备批量渲染的模板
+  const templates = [
+    { ...designSystem.templates.mobile.login, name: 'mobile-login' },
+    { ...designSystem.templates.mobile.home, name: 'mobile-home' },
+    { ...designSystem.templates.tablet.dashboard, name: 'tablet-dashboard' }
+  ];
+
+  // 3. 批量渲染
+  console.log(`开始批量渲染 ${templates.length} 个模板...\n`);
+  
+  const { renderTemplates } = require('../index');
+  const results = await renderTemplates(templates, {
+    outputDir: './output/examples/batch'
+  });
+
+  // 4. 输出结果
+  console.log('📊 批量渲染结果:\n');
+  results.forEach((result, i) => {
+    if (result.success) {
+      console.log(`✅ ${result.template}: ${result.result.url}`);
+    } else {
+      console.log(`❌ ${result.template}: ${result.error}`);
+    }
+  });
+}
+
+// 运行示例
+async function main() {
+  try {
+    await basicExample();
+    console.log('\n' + '='.repeat(50) + '\n');
+    
+    await advancedExample();
+    console.log('\n' + '='.repeat(50) + '\n');
+    
+    await batchRenderExample();
+    
+    console.log('\n🎉 所有示例运行完成!');
+  } catch (error) {
+    console.error('❌ 错误:', error.message);
+    console.error(error.stack);
+  }
+}
+
+main();