@aiyiran/myclaw 1.0.195 → 1.0.197

package/assets/myclaw-artifacts.js

@@ -0,0 +1,263 @@
+/**
+ * ============================================================================
+ * MyClaw Artifacts — 学生作品展示面板
+ * ============================================================================
+ *
+ * 功能：
+ *   右下角 "🎨 作品" 按钮，点击弹出作品面板
+ *   从 workspace 的 .myclaw/__MY_ARTIFACTS__.json 读取作品清单
+ *
+ * JSON 数据格式：
+ *   {
+ *     "workspace_id": "main",
+ *     "assets": [
+ *       { "name": "射击游戏", "type": "html", "path": "myclaw/shooting-game.html" }
+ *     ]
+ *   }
+ *
+ * URL 拼接规则：
+ *   {origin}/cmd/api/preview?path={wsPrefix}/{asset.path}
+ *   main → workspace, 其他 → workspace-{name}
+ * ============================================================================
+ */
+(function () {
+  'use strict';
+
+  // ═══ 状态 ═══
+  var artifactsOpen = false;
+
+  // ═══ 工具：从 URL 解析 agent 名称 ═══
+  function getAgentName() {
+    var params = new URLSearchParams(window.location.search);
+    // 优先从 session 参数解析: agent:main:feishu:... → main
+    var session = params.get('session');
+    if (session) {
+      var decoded = decodeURIComponent(session);
+      if (decoded.indexOf('agent:') === 0) {
+        var parts = decoded.split(':');
+        if (parts.length >= 2) return parts[1];
+      }
+    }
+    // fallback: agent 参数
+    var agent = params.get('agent');
+    if (agent) return agent;
+    return '';
+  }
+
+  // ═══ 创建按钮 ═══
+  function createArtifactsButton() {
+    if (document.querySelector('#myclaw-artifacts-btn')) return;
+
+    var btn = document.createElement('div');
+    btn.id = 'myclaw-artifacts-btn';
+    btn.style.cssText = [
+      'position: fixed',
+      'bottom: 8px',
+      'right: 140px',
+      'padding: 3px 10px',
+      'background: rgba(100, 100, 100, 0.7)',
+      'color: #fff',
+      'font-size: 11px',
+      'font-weight: bold',
+      'font-family: monospace',
+      'border-radius: 4px',
+      'z-index: 99999',
+      'user-select: none',
+      'cursor: pointer',
+      'transition: all 0.2s',
+      'letter-spacing: 0.5px',
+    ].join(';');
+    btn.textContent = '\uD83C\uDFA8 \u4F5C\u54C1';
+    btn.title = '\u67E5\u770B\u5B66\u751F\u4F5C\u54C1';
+
+    btn.onmouseenter = function () { btn.style.background = 'rgba(80, 80, 80, 0.95)'; btn.style.transform = 'scale(1.05)'; };
+    btn.onmouseleave = function () { if (!artifactsOpen) { btn.style.background = 'rgba(100, 100, 100, 0.7)'; } btn.style.transform = 'scale(1)'; };
+    btn.onclick = function (e) {
+      e.stopPropagation();
+      if (artifactsOpen) {
+        closeArtifactsPanel();
+      } else {
+        openArtifactsPanel();
+      }
+    };
+
+    document.body.appendChild(btn);
+  }
+
+  // ═══ 打开面板 ═══
+  function openArtifactsPanel() {
+    if (document.querySelector('#myclaw-artifacts-modal')) return;
+    artifactsOpen = true;
+
+    // 按钮 active 态
+    var btn = document.querySelector('#myclaw-artifacts-btn');
+    if (btn) btn.style.background = 'rgba(80, 80, 80, 0.95)';
+
+    // 遮罩
+    var overlay = document.createElement('div');
+    overlay.id = 'myclaw-artifacts-modal';
+    overlay.style.cssText = [
+      'position: fixed',
+      'top: 0',
+      'left: 0',
+      'width: 100vw',
+      'height: 100vh',
+      'background: rgba(0, 0, 0, 0.3)',
+      'z-index: 99998',
+      'display: flex',
+      'align-items: center',
+      'justify-content: center',
+      'animation: myclaw-fade-in 0.15s ease',
+    ].join(';');
+
+    // 面板容器
+    var box = document.createElement('div');
+    box.style.cssText = [
+      'width: 480px',
+      'max-height: 70vh',
+      'background: #1e1e2e',
+      'border-radius: 8px',
+      'overflow: hidden',
+      'display: flex',
+      'flex-direction: column',
+      'box-shadow: 0 8px 32px rgba(0,0,0,0.4)',
+    ].join(';');
+
+    // 标题栏
+    var header = document.createElement('div');
+    header.style.cssText = [
+      'display: flex',
+      'align-items: center',
+      'justify-content: space-between',
+      'padding: 10px 16px',
+      'background: #2d2d3f',
+      'color: #cdd6f4',
+      'font-size: 14px',
+      'font-family: monospace',
+      'user-select: none',
+    ].join(';');
+    header.innerHTML = '<span>\uD83C\uDFA8 \u5B66\u751F\u4F5C\u54C1</span>';
+
+    var closeBtn = document.createElement('span');
+    closeBtn.textContent = '\u2715';
+    closeBtn.style.cssText = 'cursor:pointer;padding:2px 6px;border-radius:3px;font-size:14px;transition:background 0.15s;';
+    closeBtn.onmouseenter = function () { closeBtn.style.background = 'rgba(255,255,255,0.1)'; };
+    closeBtn.onmouseleave = function () { closeBtn.style.background = 'none'; };
+    closeBtn.onclick = function () { closeArtifactsPanel(); };
+    header.appendChild(closeBtn);
+
+    // 内容区
+    var content = document.createElement('div');
+    content.id = 'myclaw-artifacts-content';
+    content.style.cssText = [
+      'flex: 1',
+      'overflow-y: auto',
+      'padding: 16px',
+      'color: #cdd6f4',
+      'font-family: monospace',
+      'font-size: 13px',
+    ].join(';');
+
+    // 加载中
+    content.innerHTML = '<div style="text-align:center;padding:32px;color:#888;">加载中...</div>';
+
+    box.appendChild(header);
+    box.appendChild(content);
+    overlay.appendChild(box);
+
+    // 点击遮罩关闭
+    overlay.onclick = function (e) {
+      if (e.target === overlay) closeArtifactsPanel();
+    };
+
+    document.body.appendChild(overlay);
+
+    // 异步请求数据
+    fetchArtifacts(content);
+  }
+
+  // ═══ 请求数据 ═══
+  function fetchArtifacts(contentEl) {
+    var url = window.location.origin + '/cmd/api/preview?path=.myclaw/__MY_ARTIFACTS__.json';
+    fetch(url)
+      .then(function (res) {
+        if (!res.ok) throw new Error('HTTP ' + res.status);
+        return res.json();
+      })
+      .then(function (data) {
+        if (!data || !data.assets || !data.assets.length) {
+          contentEl.innerHTML = '<div style="text-align:center;padding:32px;color:#888;">暂无作品</div>';
+          return;
+        }
+        renderArtifactsList(contentEl, data);
+      })
+      .catch(function (err) {
+        console.error('[myclaw-artifacts] 加载失败:', err);
+        contentEl.innerHTML = '<div style="text-align:center;padding:32px;color:#ff6b6b;">加载失败，请稍后重试</div>';
+      });
+  }
+
+  // ═══ 渲染列表 ═══
+  function renderArtifactsList(container, data) {
+    container.innerHTML = '';
+    // 拼接: base + workspace前缀 + / + 资源路径
+    // main → workspace, 其他 → workspace-{name}
+    var wsName = data.workspace_id || '';
+    var wsPrefix = wsName === 'main' ? 'workspace' : 'workspace-' + wsName;
+    var baseUrl = window.location.origin + '/cmd/api/preview?path=' + wsPrefix + '/';
+
+    data.assets.forEach(function (asset) {
+      var card = document.createElement('a');
+      card.href = baseUrl + asset.path;
+      card.target = '_blank';
+      card.rel = 'noopener noreferrer';
+      card.style.cssText = [
+        'display: block',
+        'padding: 12px 14px',
+        'margin-bottom: 10px',
+        'background: #2d2d3f',
+        'border-radius: 6px',
+        'color: #cdd6f4',
+        'text-decoration: none',
+        'transition: background 0.15s',
+        'cursor: pointer',
+      ].join(';');
+      card.onmouseenter = function () { card.style.background = '#3d3d5c'; };
+      card.onmouseleave = function () { card.style.background = '#2d2d3f'; };
+
+      var title = document.createElement('div');
+      title.style.cssText = 'font-size: 14px; font-weight: bold; margin-bottom: 4px;';
+      title.textContent = asset.name || '未命名作品';
+
+      var meta = document.createElement('div');
+      meta.style.cssText = 'font-size: 11px; color: #888;';
+      meta.textContent = asset.type ? asset.type.toUpperCase() : '';
+
+      card.appendChild(title);
+      card.appendChild(meta);
+      container.appendChild(card);
+    });
+  }
+
+  // ═══ 关闭面板 ═══
+  function closeArtifactsPanel() {
+    var modal = document.querySelector('#myclaw-artifacts-modal');
+    if (modal) modal.remove();
+    artifactsOpen = false;
+
+    var btn = document.querySelector('#myclaw-artifacts-btn');
+    if (btn) btn.style.background = 'rgba(100, 100, 100, 0.7)';
+  }
+
+  // ═══ 启动 ═══
+  function init() {
+    createArtifactsButton();
+    console.log('[myclaw-artifacts] ✅ 初始化完成');
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

package/assets/myclaw-inject.js

@@ -37,7 +37,7 @@
     bar.style.cssText = [
       "position: fixed",
       "bottom: 8px",
-      "right: 8px",
+      "right: 40px",
       "padding: 2px 8px",
       "background: none",
       "color: rgba(150, 150, 150, 0.4)",
@@ -70,7 +70,7 @@
     btn.style.cssText = [
       "position: fixed",
       "bottom: 8px",
-      "right: 80px",
+      "right: 120px",
       "padding: 2px 8px",
       "background: none",
       "color: rgba(150, 150, 150, 0.4)",
@@ -105,7 +105,7 @@
     btn.style.cssText = [
       "position: fixed",
       "bottom: 8px",
-      "right: 130px",
+      "right: 190px",
       "padding: 3px 10px",
       "background: rgba(59, 130, 246, 0.85)",
       "color: #fff",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiyiran/myclaw",
-  "version": "1.0.195",
+  "version": "1.0.197",
   "description": "",
   "main": "index.js",
   "bin": {

package/patch.js

@@ -26,6 +26,7 @@ const INJECT_FILENAME = 'myclaw-inject.js';
 const VOICE_SDK_FILENAME = 'voice-input.js';
 const VOICE_OUTPUT_SDK_FILENAME = 'voice-output.js';
 const TTS_INJECT_FILENAME = 'myclaw-tts.js';
+const ARTIFACTS_INJECT_FILENAME = 'myclaw-artifacts.js';
 const BACKUP_SUFFIX = '.myclaw-backup';
 
 /**
@@ -115,6 +116,8 @@ function patch() {
   const voiceOutputSdkDest = path.join(uiDir, VOICE_OUTPUT_SDK_FILENAME);
   const ttsInjectSrc = path.join(__dirname, 'assets', TTS_INJECT_FILENAME);
   const ttsInjectDest = path.join(uiDir, TTS_INJECT_FILENAME);
+  const artifactsInjectSrc = path.join(__dirname, 'assets', ARTIFACTS_INJECT_FILENAME);
+  const artifactsInjectDest = path.join(uiDir, ARTIFACTS_INJECT_FILENAME);
   const version = getMyclawVersion();
 
   console.log('[myclaw-patch] → control-ui: ' + uiDir);
@@ -166,6 +169,14 @@ function patch() {
     console.error('[myclaw-patch] ⚠ TTS 注入脚本复制失败 (非致命): ' + err.message);
   }
 
+  // 5.5 复制 Artifacts 注入脚本
+  try {
+    fs.copyFileSync(artifactsInjectSrc, artifactsInjectDest);
+    console.log('[myclaw-patch] ✅ Artifacts 注入脚本已复制');
+  } catch (err) {
+    console.error('[myclaw-patch] ⚠ Artifacts 注入脚本复制失败 (非致命): ' + err.message);
+  }
+
   // 6. Patch index.html（幂等）
   try {
     let html = fs.readFileSync(indexPath, 'utf8');
@@ -183,6 +194,7 @@ function patch() {
       '<script src="./' + VOICE_OUTPUT_SDK_FILENAME + '"></script>',
       '<script src="./' + VOICE_SDK_FILENAME + '"></script>',
       '<script src="./' + TTS_INJECT_FILENAME + '"></script>',
+      '<script src="./' + ARTIFACTS_INJECT_FILENAME + '"></script>',
       '<script src="./' + INJECT_FILENAME + '"></script>',
       '',
     ].join('\n');
@@ -246,51 +258,6 @@ function patch() {
     console.error('[myclaw-patch] ⚠ Permissions-Policy 修复失败 (非致命): ' + err.message);
   }
 
-  // 8. Patch X-Frame-Options + frame-ancestors（允许同域 iframe 嵌入）
-  try {
-    const distParent = path.resolve(uiDir, '..');
-    const distFiles = fs.readdirSync(distParent);
-    let framePatched = false;
-
-    for (const f of distFiles) {
-      if (f.endsWith('.js' + BACKUP_SUFFIX)) continue;  // 跳过备份文件
-      const isTarget = (f.startsWith('gateway-cli-') || f.startsWith('server-')) && f.endsWith('.js');
-      if (!isTarget) continue;
-
-      const filePath = path.join(distParent, f);
-      let content = fs.readFileSync(filePath, 'utf8');
-      let modified = false;
-
-      // X-Frame-Options: DENY → SAMEORIGIN
-      if (content.includes('"DENY"')) {
-        const backupFile = filePath + BACKUP_SUFFIX;
-        if (!fs.existsSync(backupFile)) {
-          fs.copyFileSync(filePath, backupFile);
-        }
-        content = content.replace(/"X-Frame-Options",\s*"DENY"/g, '"X-Frame-Options", "SAMEORIGIN"');
-        modified = true;
-      }
-
-      // frame-ancestors 'none' → 'self'
-      if (content.includes("'none'") && content.includes("frame-ancestors")) {
-        content = content.replace(/frame-ancestors\s*'none'/g, "frame-ancestors 'self'");
-        modified = true;
-      }
-
-      if (modified) {
-        fs.writeFileSync(filePath, content, 'utf8');
-        console.log('[myclaw-patch] ✅ 已修复 iframe 安全头 (X-Frame-Options + frame-ancestors): ' + f);
-        framePatched = true;
-      }
-    }
-
-    if (!framePatched) {
-      console.log('[myclaw-patch] ⚠ 未找到 iframe 安全头配置');
-    }
-  } catch (err) {
-    console.error('[myclaw-patch] ⚠ iframe 安全头修复失败 (非致命): ' + err.message);
-  }
-
   console.log('[myclaw-patch] ✅ 注入完成，重启 Gateway 后生效');
   return { success: true, uiDir: uiDir, version: version };
 }
@@ -311,6 +278,7 @@ function unpatch() {
   const voiceSdkDest = path.join(uiDir, VOICE_SDK_FILENAME);
   const voiceOutputSdkDest = path.join(uiDir, VOICE_OUTPUT_SDK_FILENAME);
   const ttsInjectDest = path.join(uiDir, TTS_INJECT_FILENAME);
+  const artifactsInjectDest = path.join(uiDir, ARTIFACTS_INJECT_FILENAME);
 
   // 恢复备份
   if (fs.existsSync(backupPath)) {
@@ -343,6 +311,12 @@ function unpatch() {
     console.log('[myclaw-patch] ✅ TTS 注入脚本已删除');
   }
 
+  // 删除 Artifacts 注入脚本
+  if (fs.existsSync(artifactsInjectDest)) {
+    fs.unlinkSync(artifactsInjectDest);
+    console.log('[myclaw-patch] ✅ Artifacts 注入脚本已删除');
+  }
+
   // 恢复 gateway-cli-*.js 的 Permissions-Policy
   try {
     const distParent = path.resolve(uiDir, '..');