DP/tempdocs/混合方案Demo说明.md

混合方案 Demo 说明

🎯 核心思想

本地 = 简单执行 | 服务器 = 复杂计算

---

📋 Demo 示例

功能：创建智能配色图层

流程：

1️⃣ 用户点击"智能配色"按钮

2️⃣ 前端发送请求到服务器
   POST /api/v1/jsx_demo/calculate-color
   {
     "layer_name": "智能配色_12345",
     "base_color": "#FF6B9D"
   }

3️⃣ 🔒 服务器执行核心算法（客户端看不到）
   - 根据图层名称计算最佳颜色
   - 计算最佳不透明度
   - 选择最佳混合模式
   
   → 返回结果：
   {
     "r": 255,
     "g": 120,
     "b": 180,
     "opacity": 85,
     "blend_mode": "overlay"
   }

4️⃣ 前端接收结果，执行简单 JSX
   - 创建图层
   - 应用服务器计算的参数
   - 填充颜色

---

🔐 安全对比

当前内联方式（全在前端）

前端代码：

const jsx = `
    var layer = doc.artLayers.add();
    layer.opacity = 85;  // ⚠️ 算法暴露
    layer.blendMode = BlendMode.OVERLAY;
    // 复杂的颜色计算逻辑
    var r = 核心算法1();  // ⚠️ 可被看到
    var g = 核心算法2();  // ⚠️ 可被看到
    var b = 核心算法3();  // ⚠️ 可被看到
`;

❌ 问题： 攻击者可以看到所有代码，复制算法

---

混合方式（计算在服务器）

前端代码：

const colorResult = await fetch('/api/calculate-color', {...});
const { r, g, b, opacity } = colorResult;

const jsx = `
    var layer = doc.artLayers.add();
    layer.opacity = ${opacity};  // ✅ 只是应用参数
    color.rgb.red = ${r};         // ✅ 只是应用参数
    color.rgb.green = ${g};
    color.rgb.blue = ${b};
`;

服务器代码（客户端看不到）：

# 🔒 核心算法在这里
def calculate_color(layer_name, base_color):
    # 复杂的颜色理论计算
    # 机器学习模型推荐
    # 你的独家算法
    return {r, g, b, opacity, blend_mode}

✅ 优势： 攻击者只能看到"发送请求 → 应用结果"，看不到算法

---

📂 新增文件（不影响现有系统）

✅ 保留：
   Designer/src/api/jsxApi/inline/layer.ts     (原有内联 JSX)
   Designer/src/api/jsxApi/inline/document.ts  (原有内联 JSX)

➕ 新增：
   Server/app/api/v1/jsx_demo.py               (服务器计算 Demo)
   Designer/src/api/jsxApi/inline/hybrid-demo.ts  (混合调用 Demo)

两种方式并存，互不影响！

---

🚀 测试 Demo

1. 启动后端

   cd Server
   python main.py
   

2. 启动前端开发模式

   cd Designer
   npm run dev
   

3. 点击"智能配色"按钮

   • 会调用服务器计算颜色
   • 然后在本地创建图层并应用

4. 查看控制台

   • 可以看到发送的参数
   • 可以看到服务器返回的结果
   • 但看不到服务器端的计算逻辑！

---

💡 扩展建议

你可以把任何核心功能改成这种方式：

功能	本地执行	服务器计算
创建图层	✅ 简单创建	❌
智能配色	✅ 应用颜色	✅ 计算最佳颜色
AI 设计	✅ 应用结果	✅ AI 模型推理
自动排版	✅ 移动元素	✅ 计算最佳位置
滤镜参数	✅ 应用滤镜	✅ 计算最佳参数

核心算法都在服务器，客户端只是"执行器"！