@aiyiran/myclaw 1.0.197 → 1.0.199

package/assets/myclaw-artifacts.js

@@ -1,17 +1,20 @@
 /**
  * ============================================================================
- * MyClaw Artifacts — 学生作品展示面板
+ * MyClaw Artifacts — 学生作品展示
  * ============================================================================
  *
  * 功能：
- *   右下角 "🎨 作品" 按钮，点击弹出作品面板
- *   从 workspace 的 .myclaw/__MY_ARTIFACTS__.json 读取作品清单
+ *   右下角 "🎨 作品" 按钮，点击后右侧常驻显示作品列表面板
+ *   列表展示：编号 / 标题 / 文件名 / 更新时间
+ *   点击条目弹出 iframe 预览弹框，点击遮罩或叉号关闭
  *
- * JSON 数据格式：
+ * JSON 数据格式（.myclaw/__MY_ARTIFACTS__.json）：
  *   {
  *     "workspace_id": "main",
+ *     "title": "我的小游戏",
+ *     "updated_at": "2026-04-12T21:35:00+08:00",
  *     "assets": [
- *       { "name": "射击游戏", "type": "html", "path": "myclaw/shooting-game.html" }
+ *       { "id": "asset-001", "type": "html", "name": "射击游戏", "path": "myclaw/shooting-game.html" }
  *     ]
  *   }
  *
@@ -24,12 +27,12 @@
   'use strict';
 
   // ═══ 状态 ═══
-  var artifactsOpen = false;
+  var panelVisible = false;
+  var cachedData = null;
 
   // ═══ 工具：从 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);
@@ -38,12 +41,18 @@
         if (parts.length >= 2) return parts[1];
       }
     }
-    // fallback: agent 参数
     var agent = params.get('agent');
     if (agent) return agent;
     return '';
   }
 
+  // ═══ 构建预览 URL ═══
+  function buildPreviewUrl(data, assetPath) {
+    var wsName = data.workspace_id || '';
+    var wsPrefix = wsName === 'main' ? 'workspace' : 'workspace-' + wsName;
+    return window.location.origin + '/cmd/api/preview?path=' + wsPrefix + '/' + assetPath;
+  }
+
   // ═══ 创建按钮 ═══
   function createArtifactsButton() {
     if (document.querySelector('#myclaw-artifacts-btn')) return;
@@ -71,10 +80,10 @@
     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.onmouseleave = function () { if (!panelVisible) { btn.style.background = 'rgba(100, 100, 100, 0.7)'; } btn.style.transform = 'scale(1)'; };
     btn.onclick = function (e) {
       e.stopPropagation();
-      if (artifactsOpen) {
+      if (panelVisible) {
         closeArtifactsPanel();
       } else {
         openArtifactsPanel();
@@ -84,43 +93,31 @@
     document.body.appendChild(btn);
   }
 
-  // ═══ 打开面板 ═══
+  // ═══ 打开右侧列表面板 ═══
   function openArtifactsPanel() {
-    if (document.querySelector('#myclaw-artifacts-modal')) return;
-    artifactsOpen = true;
+    if (document.querySelector('#myclaw-artifacts-panel')) return;
+    panelVisible = 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 = [
+    // 面板
+    var panel = document.createElement('div');
+    panel.id = 'myclaw-artifacts-panel';
+    panel.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',
+      'top: 400px',
+      'right: 0',
+      'width: 380px',
+      'max-height: calc(100vh - 420px)',
       'background: #1e1e2e',
-      'border-radius: 8px',
+      'border-radius: 8px 0 0 8px',
       'overflow: hidden',
       'display: flex',
       'flex-direction: column',
-      'box-shadow: 0 8px 32px rgba(0,0,0,0.4)',
+      'box-shadow: -4px 0 24px rgba(0,0,0,0.3)',
+      'z-index: 99997',
+      'animation: myclaw-slide-in-right 0.2s ease',
     ].join(';');
 
     // 标题栏
@@ -129,12 +126,13 @@
       'display: flex',
       'align-items: center',
       'justify-content: space-between',
-      'padding: 10px 16px',
+      'padding: 10px 14px',
       'background: #2d2d3f',
       'color: #cdd6f4',
-      'font-size: 14px',
+      'font-size: 13px',
       'font-family: monospace',
       'user-select: none',
+      'flex-shrink: 0',
     ].join(';');
     header.innerHTML = '<span>\uD83C\uDFA8 \u5B66\u751F\u4F5C\u54C1</span>';
 
@@ -152,39 +150,48 @@
     content.style.cssText = [
       'flex: 1',
       'overflow-y: auto',
-      'padding: 16px',
+      'padding: 8px',
       'color: #cdd6f4',
       'font-family: monospace',
-      'font-size: 13px',
+      'font-size: 12px',
     ].join(';');
 
-    // 加载中
     content.innerHTML = '<div style="text-align:center;padding:32px;color:#888;">加载中...</div>';
 
-    box.appendChild(header);
-    box.appendChild(content);
-    overlay.appendChild(box);
+    panel.appendChild(header);
+    panel.appendChild(content);
+    document.body.appendChild(panel);
 
-    // 点击遮罩关闭
-    overlay.onclick = function (e) {
-      if (e.target === overlay) closeArtifactsPanel();
-    };
+    // 请求数据
+    if (cachedData) {
+      renderArtifactsList(content, cachedData);
+    } else {
+      fetchArtifacts(content);
+    }
+  }
 
-    document.body.appendChild(overlay);
+  // ═══ 关闭右侧面板 ═══
+  function closeArtifactsPanel() {
+    var panel = document.querySelector('#myclaw-artifacts-panel');
+    if (panel) panel.remove();
+    panelVisible = false;
 
-    // 异步请求数据
-    fetchArtifacts(content);
+    var btn = document.querySelector('#myclaw-artifacts-btn');
+    if (btn) btn.style.background = 'rgba(100, 100, 100, 0.7)';
   }
 
   // ═══ 请求数据 ═══
   function fetchArtifacts(contentEl) {
-    var url = window.location.origin + '/cmd/api/preview?path=.myclaw/__MY_ARTIFACTS__.json';
+    var agentName = getAgentName();
+    var wsPrefix = agentName === 'main' ? 'workspace' : 'workspace-' + agentName;
+    var url = window.location.origin + '/cmd/api/preview?path=' + wsPrefix + '/.myclaw/__MY_ARTIFACTS__.json';
     fetch(url)
       .then(function (res) {
         if (!res.ok) throw new Error('HTTP ' + res.status);
         return res.json();
       })
       .then(function (data) {
+        cachedData = data;
         if (!data || !data.assets || !data.assets.length) {
           contentEl.innerHTML = '<div style="text-align:center;padding:32px;color:#888;">暂无作品</div>';
           return;
@@ -200,57 +207,185 @@
   // ═══ 渲染列表 ═══
   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',
+
+    // 表头
+    var tableHeader = document.createElement('div');
+    tableHeader.style.cssText = [
+      'display: flex',
+      'padding: 6px 10px',
+      'background: #252536',
+      'color: #888',
+      'font-size: 11px',
+      'border-bottom: 1px solid #3d3d5c',
+      'flex-shrink: 0',
+    ].join(';');
+    tableHeader.innerHTML = [
+      '<span style="width:30px;text-align:center;">#</span>',
+      '<span style="flex:2;">标题</span>',
+      '<span style="flex:1.5;">文件名</span>',
+      '<span style="flex:1;text-align:right;">更新时间</span>',
+    ].join('');
+    container.appendChild(tableHeader);
+
+    data.assets.forEach(function (asset, idx) {
+      var row = document.createElement('div');
+      row.style.cssText = [
+        'display: flex',
+        'align-items: center',
+        'padding: 8px 10px',
+        'border-bottom: 1px solid rgba(255,255,255,0.05)',
         'cursor: pointer',
+        'transition: background 0.15s',
       ].join(';');
-      card.onmouseenter = function () { card.style.background = '#3d3d5c'; };
-      card.onmouseleave = function () { card.style.background = '#2d2d3f'; };
+      row.onmouseenter = function () { row.style.background = '#2d2d3f'; };
+      row.onmouseleave = function () { row.style.background = 'transparent'; };
+      row.onclick = function () { openPreviewModal(data, asset); };
+
+      // 编号
+      var num = document.createElement('span');
+      num.style.cssText = 'width:30px;text-align:center;color:#888;flex-shrink:0;';
+      num.textContent = String(idx + 1);
 
-      var title = document.createElement('div');
-      title.style.cssText = 'font-size: 14px; font-weight: bold; margin-bottom: 4px;';
-      title.textContent = asset.name || '未命名作品';
+      // 标题
+      var title = document.createElement('span');
+      title.style.cssText = 'flex:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;';
+      title.textContent = asset.name || '未命名';
+      title.title = asset.name || '';
 
-      var meta = document.createElement('div');
-      meta.style.cssText = 'font-size: 11px; color: #888;';
-      meta.textContent = asset.type ? asset.type.toUpperCase() : '';
+      // 文件名
+      var fname = document.createElement('span');
+      fname.style.cssText = 'flex:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#888;';
+      // 从 path 中提取文件名
+      var pathParts = (asset.path || '').split('/');
+      fname.textContent = pathParts[pathParts.length - 1] || '';
+      fname.title = asset.path || '';
 
-      card.appendChild(title);
-      card.appendChild(meta);
-      container.appendChild(card);
+      // 更新时间
+      var time = document.createElement('span');
+      time.style.cssText = 'flex:1;text-align:right;color:#888;font-size:11px;flex-shrink:0;';
+      // 优先用 asset 自身的，fallback 到 data 级别的 updated_at
+      var updatedAt = asset.updated_at || data.updated_at || '';
+      if (updatedAt) {
+        try {
+          var d = new Date(updatedAt);
+          time.textContent = (d.getMonth() + 1) + '/' + d.getDate() + ' ' + String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0');
+        } catch (e) {
+          time.textContent = '';
+        }
+      }
+
+      row.appendChild(num);
+      row.appendChild(title);
+      row.appendChild(fname);
+      row.appendChild(time);
+      container.appendChild(row);
     });
   }
 
-  // ═══ 关闭面板 ═══
-  function closeArtifactsPanel() {
-    var modal = document.querySelector('#myclaw-artifacts-modal');
+  // ═══ 预览弹框（iframe） ═══
+  function openPreviewModal(data, asset) {
+    if (document.querySelector('#myclaw-artifacts-preview')) return;
+
+    var overlay = document.createElement('div');
+    overlay.id = 'myclaw-artifacts-preview';
+    overlay.style.cssText = [
+      'position: fixed',
+      'top: 0',
+      'left: 0',
+      'width: 100vw',
+      'height: 100vh',
+      'background: rgba(0, 0, 0, 0.4)',
+      'z-index: 99999',
+      '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: 90vw',
+      'height: 85vh',
+      'background: #1e1e2e',
+      'border-radius: 8px',
+      'overflow: hidden',
+      'display: flex',
+      'flex-direction: column',
+      'box-shadow: 0 8px 32px rgba(0,0,0,0.5)',
+    ].join(';');
+
+    // 标题栏
+    var header = document.createElement('div');
+    header.style.cssText = [
+      'display: flex',
+      'align-items: center',
+      'justify-content: space-between',
+      'padding: 8px 14px',
+      'background: #2d2d3f',
+      'color: #cdd6f4',
+      'font-size: 13px',
+      'font-family: monospace',
+      'user-select: none',
+      'flex-shrink: 0',
+    ].join(';');
+    header.innerHTML = '<span>\uD83C\uDFA8 ' + (asset.name || '预览') + '</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 () { closePreviewModal(); };
+    header.appendChild(closeBtn);
+
+    // iframe
+    var iframe = document.createElement('iframe');
+    iframe.src = buildPreviewUrl(data, asset.path);
+    iframe.style.cssText = [
+      'flex: 1',
+      'width: 100%',
+      'border: none',
+      'background: #fff',
+    ].join(';');
+
+    box.appendChild(header);
+    box.appendChild(iframe);
+    overlay.appendChild(box);
+
+    // 点击遮罩关闭
+    overlay.onclick = function (e) {
+      if (e.target === overlay) closePreviewModal();
+    };
+
+    document.body.appendChild(overlay);
+  }
+
+  function closePreviewModal() {
+    var modal = document.querySelector('#myclaw-artifacts-preview');
     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 injectStyles() {
+    if (document.querySelector('#myclaw-artifacts-styles')) return;
+    var style = document.createElement('style');
+    style.id = 'myclaw-artifacts-styles';
+    style.textContent = [
+      '@keyframes myclaw-slide-in-right {',
+      '  from { transform: translateX(100%); }',
+      '  to { transform: translateX(0); }',
+      '}',
+      '@keyframes myclaw-fade-in {',
+      '  from { opacity: 0; }',
+      '  to { opacity: 1; }',
+      '}',
+    ].join('\n');
+    document.head.appendChild(style);
   }
 
   // ═══ 启动 ═══
   function init() {
+    injectStyles();
     createArtifactsButton();
     console.log('[myclaw-artifacts] ✅ 初始化完成');
   }

package/package.json

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