openclaw-openagent 1.0.0

package/src/plugin-ui/modules/agent-book/panel/agent-card.js

@@ -0,0 +1,154 @@
+// ── AgentCard 统一组件 ──
+//
+// 用法：AgentCard(agent, { mode, onAction, actionLabel })
+//   mode: 'mention' — 空 @ 默认面板的分类卡片
+//         'search'  — 有搜索词时的旧式搜索结果行
+//         'inline'  — 聊天消息中的内嵌卡片
+//   onAction: 按钮点击回调
+//   actionLabel: 按钮文案（默认 mention='Try', inline='@ Chat'）
+
+function AgentCard(agent, opts = {}) {
+  const { mode = 'inline', onAction, actionLabel } = opts;
+  const card = _el('div', `agent-card agent-card--${mode}`);
+
+  if (mode === 'mention') {
+    // ── Figma 结构：──
+    // Agent item (grid cell)
+    //   └── avart 实例
+    //       └── 第一行 (row)
+    //           ├── 内容组 (avatar 60 + info)
+    //           │   └── 信息列：名称 / 简介 / 统计
+    //           └── @Try 按钮
+
+    // avart 外壳
+    const avart = _el('div', 'agent-card__avart');
+
+    // ── 第一行：内容组 + @Try ──
+    const row1 = _el('div', 'agent-card__row1');
+
+    // 内容组：头像 + 信息列
+    const contentGroup = _el('div', 'agent-card__content-group');
+
+    // 头像
+    const avatar = document.createElement('img');
+    avatar.className = 'agent-card__avatar';
+    avatar.src = avatarUrl(agent);
+    avatar.alt = agent.name || '';
+    avatar.addEventListener('error', () => {
+      avatar.src = `https://ui-avatars.com/api/?name=${encodeURIComponent(agent.name)}&background=6366f1&color=fff&size=112`;
+    }, { once: true });
+    contentGroup.appendChild(avatar);
+
+    // 信息列：名称 + 简介
+    const info = _el('div', 'agent-card__info');
+    info.appendChild(_text('div', 'agent-card__name', agent.name || ''));
+    info.appendChild(_text('div', 'agent-card__bio', agent.bio || '暂无简介'));
+    const stats = _el('div', 'agent-card__stats');
+    stats.appendChild(_text('span', 'agent-card__stat agent-card__stat--claws', `${formatNumber(agent.claws)}☆`));
+    if (agent.owner) {
+      stats.appendChild(_text('span', 'agent-card__stat agent-card__stat--owner', ` · owner${agent.owner}`));
+    }
+    info.appendChild(stats);
+    contentGroup.appendChild(info);
+
+    row1.appendChild(contentGroup);
+
+    // @Try 按钮
+    const defaultLabel = 'Try';
+    const btn = _text('button', 'agent-card__action', actionLabel || defaultLabel);
+    if (onAction) {
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        console.log('[openagent] Try button clicked for:', agent.name);
+        onAction(agent);
+      });
+      card.addEventListener('click', (e) => {
+        e.stopPropagation();
+        console.log('[openagent] Card clicked for:', agent.name);
+        onAction(agent);
+      });
+      card.style.cursor = 'pointer';
+    }
+    row1.appendChild(btn);
+
+    avart.appendChild(row1);
+
+    card.appendChild(avart);
+
+  } else if (mode === 'search') {
+    const avatar = document.createElement('img');
+    avatar.className = 'agent-card__avatar';
+    avatar.src = avatarUrl(agent);
+    avatar.alt = agent.name || '';
+    avatar.addEventListener('error', () => {
+      avatar.src = `https://ui-avatars.com/api/?name=${encodeURIComponent(agent.name)}&background=6366f1&color=fff&size=112`;
+    }, { once: true });
+    card.appendChild(avatar);
+
+    const body = _el('div', 'agent-card__body');
+    body.appendChild(_text('div', 'agent-card__name', agent.name || ''));
+    body.appendChild(_text('div', 'agent-card__bio', agent.bio || '暂无简介'));
+
+    const stats = _el('div', 'agent-card__stats');
+    stats.appendChild(_text('span', 'agent-card__stat agent-card__stat--claws', `${formatNumber(agent.claws)}☆`));
+    if (agent.owner) {
+      stats.appendChild(_text('span', 'agent-card__stat agent-card__stat--owner', ` · owner${agent.owner}`));
+    }
+    body.appendChild(stats);
+    card.appendChild(body);
+
+    const btn = _text('button', 'agent-card__action', actionLabel || 'Try');
+    if (onAction) {
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        console.log('[openagent] Try button clicked for:', agent.name);
+        onAction(agent);
+      });
+      card.addEventListener('click', (e) => {
+        e.stopPropagation();
+        console.log('[openagent] Card clicked for:', agent.name);
+        onAction(agent);
+      });
+      card.style.cursor = 'pointer';
+    }
+    card.appendChild(btn);
+
+  } else {
+    // ── mode: inline（聊天内嵌卡片）— 保持原结构 ──
+    const avatar = document.createElement('img');
+    avatar.className = 'agent-card__avatar';
+    avatar.src = avatarUrl(agent);
+    avatar.alt = agent.name || '';
+    avatar.addEventListener('error', () => {
+      avatar.src = `https://ui-avatars.com/api/?name=${encodeURIComponent(agent.name)}&background=6366f1&color=fff&size=112`;
+    }, { once: true });
+    card.appendChild(avatar);
+
+    const body = _el('div', 'agent-card__body');
+    const nameLine = _el('div', 'agent-card__name-line');
+    nameLine.appendChild(_text('span', 'agent-card__name', agent.name || ''));
+    if (agent.tag) {
+      nameLine.appendChild(_text('span', 'agent-card__tag', `@${agent.tag}`));
+    }
+    body.appendChild(nameLine);
+    body.appendChild(_text('div', 'agent-card__bio', agent.bio || '暂无简介'));
+
+    const stats = _el('div', 'agent-card__stats');
+    stats.appendChild(_text('span', 'agent-card__stat agent-card__stat--claws', `${formatNumber(agent.claws)}☆`));
+    if (agent.owner) {
+      stats.appendChild(_text('span', 'agent-card__stat agent-card__stat--owner', ` · owner${agent.owner}`));
+    }
+    body.appendChild(stats);
+    card.appendChild(body);
+
+    const btn = _text('button', 'agent-card__action', actionLabel || '@ Chat');
+    if (onAction) {
+      btn.addEventListener('click', (e) => { e.stopPropagation(); onAction(agent); });
+      card.addEventListener('click', (e) => { e.stopPropagation(); onAction(agent); });
+      card.style.cursor = 'pointer';
+    }
+    card.appendChild(btn);
+  }
+
+  return card;
+}