openclaw-openagent 1.0.0

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

@@ -0,0 +1,670 @@
+// ── 样式注入 ──
+
+function injectStyles() {
+  if (document.getElementById('openagent-override-styles')) return;
+
+  const style = document.createElement('style');
+  style.id = 'openagent-override-styles';
+  style.textContent = `
+    /* ── 流式回复边框闪烁：覆盖为蓝色 ── */
+    @keyframes chatStreamPulse {
+      0%, 100% { border-color: var(--border); }
+      50% { border-color: #3b82f6; }
+    }
+    .chat-bubble.streaming.cl-remote-agent-bubble {
+      animation: 1.5s ease-in-out infinite chatStreamPulse !important;
+      border-color: #3b82f6;
+    }
+
+    /* ── @ Agent Book 按钮（Figma 1:1117 物理级复刻 — Mesh Gradient） ── */
+    .openagent-at-btn {
+      position: relative;
+      overflow: hidden; /* Figma clipsContent: true */
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+      height: 26px;
+      padding: 0 16px;
+      border-radius: 100px;
+      border: none;
+      background: #6ECCFF; /* Figma Frame 72552 底色 */
+      box-shadow: inset 0 0 8.5px 0 #96ECFF; /* Figma INNER_SHADOW */
+      color: #fff;
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      line-height: 26px;
+      margin-left: 6px;
+      white-space: nowrap;
+      flex-shrink: 0;
+      letter-spacing: 0.2px;
+      /* 建立层叠上下文，让伪元素在底层 */
+      z-index: 1;
+      isolation: isolate;
+    }
+
+    /* Figma 外层 Ellipse 12873：蓝色椭圆，偏左 */
+    .openagent-at-btn::before {
+      content: '';
+      position: absolute;
+      left: -13%;
+      top: -98%;
+      width: 50%;
+      height: 304%;
+      background: #7A94FF;
+      filter: blur(23px); /* Figma LAYER_BLUR: 23.2px */
+      transform: rotate(174deg);
+      z-index: -1;
+      pointer-events: none;
+    }
+
+    /* Figma 外层 Ellipse 12872：黄绿色椭圆，偏右 */
+    .openagent-at-btn::after {
+      content: '';
+      position: absolute;
+      left: 70%;
+      top: -49%;
+      width: 54%;
+      height: 145%;
+      background: #A1FF2E;
+      filter: blur(30.5px); /* Figma LAYER_BLUR: 30.5px */
+      transform: rotate(27deg);
+      z-index: -1;
+      pointer-events: none;
+    }
+
+    /* 确保文字始终在最高层 */
+    .openagent-at-btn .at-sym,
+    .openagent-at-btn span {
+      position: relative;
+      z-index: 2;
+    }
+
+    .openagent-at-btn:hover {
+      filter: brightness(1.08);
+      transform: translateY(-1px);
+      box-shadow: inset 0 0 8.5px 0 #96ECFF, 0 2px 8px rgba(110, 204, 255, 0.4);
+    }
+    .openagent-at-btn .at-sym {
+      font-size: 14px;
+      font-weight: 700;
+      color: #fff;
+    }
+
+    /* ── 输入区域包裹层（让面板可以相对定位） ── */
+    .openagent-input-wrapper {
+      position: relative;
+      z-index: 100000;
+    }
+
+    /* ── Agent 面板（Figma 341-2083） ── */
+    .openagent-panel-backdrop {
+      display: none;
+      position: fixed;
+      inset: 0;
+      z-index: 99998;
+    }
+    .openagent-panel-backdrop.visible { display: block; }
+
+    .openagent-agent-panel {
+      position: fixed;
+      max-height: none;
+      background: #fff;
+      border: 1.2px solid rgba(47, 47, 51, 0.12);
+      border-radius: 18px;
+      box-shadow: 0 -4px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
+      z-index: 99999;
+      overflow: hidden;
+      display: none;
+      flex-direction: column;
+      gap: 14px;
+      padding: 14px;
+      font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      box-sizing: border-box;
+    }
+    .openagent-agent-panel.visible {
+      display: flex;
+      animation: openagent-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+    @keyframes openagent-up {
+      from { opacity: 0; transform: translateY(8px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+
+    /* ── 面板头部 ── */
+    .openagent-panel-head {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      min-height: 26px;
+      padding: 6px 10px 0 10px;
+      border-bottom: none;
+    }
+    .openagent-panel-title {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 16px;
+      font-weight: 500;
+      color: rgba(47, 47, 51, 0.8);
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+    }
+    .openagent-panel-title-icon {
+      width: 21px;
+      height: 21px;
+      flex-shrink: 0;
+    }
+    .openagent-panel-close {
+      background: rgba(249, 249, 249, 1);
+      border: none;
+      color: rgba(47, 47, 51, 0.6);
+      cursor: pointer;
+      width: 21px;
+      height: 21px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      font-weight: 400;
+      padding: 0;
+      border-radius: 4px;
+      transition: all 0.1s;
+      line-height: 1;
+    }
+    .openagent-panel-close:hover {
+      background: #eee;
+      color: rgba(47, 47, 51, 1);
+    }
+
+    /* ── 分隔线（Figma: 0.2px, opacity 0.16） ── */
+    .openagent-panel-divider {
+      height: 0;
+      border: none;
+      border-top: 0.2px solid rgba(47, 47, 51, 0.16);
+      margin: 0;
+    }
+
+    /* ── Agent 列表（section stack） ── */
+    .openagent-agent-list {
+      overflow-y: auto;
+      padding: 8px 0;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+      min-height: 0;
+      max-height: min(56vh, 451px);
+      scrollbar-width: thin;
+      scrollbar-color: #ddd transparent;
+    }
+    .openagent-agent-list::-webkit-scrollbar {
+      width: 4px;
+    }
+    .openagent-agent-list::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    .openagent-agent-list::-webkit-scrollbar-thumb {
+      background: #ddd;
+      border-radius: 2px;
+    }
+    .openagent-agent-list::-webkit-scrollbar-thumb:hover {
+      background: #bbb;
+    }
+
+    .openagent-agent-section {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      width: 100%;
+      min-width: 0;
+    }
+
+    /* ── 父分类标题（两级结构：Research > Market Research） ── */
+    .openagent-parent-section {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      width: 100%;
+      min-width: 0;
+    }
+    .openagent-parent-heading {
+      font-size: 11px;
+      font-weight: 600;
+      line-height: 13px;
+      color: rgba(47, 47, 51, 0.45);
+      padding: 0 12px;
+      text-transform: uppercase;
+      letter-spacing: 0.8px;
+    }
+
+    /* ── 分组标题 ── */
+    .openagent-section-heading {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 14px;
+      color: rgba(47, 47, 51, 0.80);
+      padding: 0 12px 0 12px;
+      letter-spacing: 0;
+    }
+
+    /* ── 分组网格容器 ── */
+    .openagent-section-grid {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 439.5px));
+      justify-content: start;
+      gap: 8px 14px;
+      padding: 0 12px;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    /* ── 有搜索词时：保留旧搜索结果列表形态，不走默认分类网格 ── */
+    .openagent-search-results {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding: 0 12px;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    /* ── 统一 Agent 卡片组件 ── */
+    .agent-card {
+      display: flex;
+      align-items: flex-start;
+      transition: background 0.15s;
+    }
+
+    /* 头像（共享） */
+    .agent-card__avatar {
+      flex-shrink: 0;
+      object-fit: cover;
+      background: #e8e8e8;
+    }
+
+    /* 内容区（共享） */
+    .agent-card__body { flex: 1; min-width: 0; }
+    .agent-card__name-line { display: flex; align-items: baseline; gap: 8px; }
+    .agent-card__name {
+      font-family: "PingFang SC", sans-serif;
+      font-weight: 600;
+      color: rgba(47, 47, 51, 1);
+    }
+    .agent-card__tag { font-size: 12px; color: #6366f1; font-weight: 500; }
+    .agent-card__specialty { font-size: 12px; color: #999; font-weight: 400; }
+    .agent-card__bio {
+      font-family: "PingFang SC", sans-serif;
+      font-size: 11px;
+      font-weight: 400;
+      color: rgba(47, 47, 51, 1);
+      line-height: 14.52px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+
+    /* 统计行（共享） */
+    .agent-card__stats {
+      display: flex;
+      align-items: center;
+      gap: 0;
+      flex-wrap: wrap;
+    }
+    .agent-card__stat {
+      font-family: "PingFang SC", sans-serif;
+      font-size: 13.5px;
+      font-weight: 400;
+      white-space: nowrap;
+      letter-spacing: 1px;
+    }
+    .agent-card__stat--claws {
+      color: rgba(240, 152, 0, 1);
+    }
+    .agent-card__stat--owner {
+      color: rgba(47, 47, 51, 1);
+      line-height: 13.5px;
+    }
+
+    /* 按钮（共享） */
+    .agent-card__action {
+      flex-shrink: 0;
+      border: none;
+      cursor: pointer;
+      font-weight: 500;
+      transition: all 0.12s;
+      white-space: nowrap;
+    }
+
+    /* ── mode: mention（Figma Agent item → avart 实例） ── */
+    .agent-card--mention {
+      flex-direction: row;
+      align-items: stretch;
+      gap: 0;
+      padding: 0;
+      border-radius: 8px;
+      border: none;
+      background: transparent;
+      min-height: 88px;
+      min-width: 0;
+    }
+    .agent-card--mention:hover {
+      background: rgba(0, 0, 0, 0.02);
+    }
+    /* 键盘导航高亮（§1.5）— 对标 TIM index.vue:32 'selected' class */
+    .agent-card--mention.openagent-card-selected {
+      background: rgba(99, 102, 241, 0.06);
+      outline: 2px solid rgba(99, 102, 241, 0.3);
+      outline-offset: -2px;
+    }
+    [data-theme-mode="dark"] .agent-card--mention.openagent-card-selected {
+      background: rgba(99, 102, 241, 0.12);
+      outline-color: rgba(99, 102, 241, 0.4);
+    }
+
+    /* avart 外壳: Figma px 12, centered */
+    .agent-card--mention .agent-card__avart {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 0;
+      padding: 0 10px;
+      flex: 1;
+      min-width: 0;
+      box-sizing: border-box;
+    }
+
+    /* 第一行: row, gap:24 (内容组 + @Try) */
+    .agent-card--mention .agent-card__row1 {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 16px;
+      width: 100%;
+      min-width: 0;
+    }
+
+    /* 内容组: row, gap:18 (头像 + 信息列) */
+    .agent-card--mention .agent-card__content-group {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      gap: 12px;
+      flex: 1;
+      min-width: 0;
+    }
+
+    /* 头像 */
+    .agent-card--mention .agent-card__avatar {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      border: none;
+      flex-shrink: 0;
+      margin-top: 0;
+    }
+
+    /* 信息列: name / bio / stats */
+    .agent-card--mention .agent-card__info {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      padding: 3px 0;
+      flex: 1;
+      min-width: 0;
+    }
+
+    .agent-card--mention .agent-card__name {
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 14px;
+      color: rgba(47, 47, 51, 1);
+    }
+    .agent-card--mention .agent-card__bio {
+      font-size: 10px;
+      font-weight: 400;
+      line-height: 14px;
+      color: rgba(47, 47, 51, 0.40);
+      text-align: justify;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      margin-top: 0;
+    }
+
+    /* @Try 按钮 */
+    .agent-card--mention .agent-card__action {
+      width: 64px;
+      height: 30px;
+      padding: 0 14px;
+      border-radius: 10px;
+      background: #EFF0F2;
+      border: 1.286px solid rgba(47, 47, 51, 0.04);
+      color: rgba(47, 47, 51, 1);
+      font-family: "PingFang SC", sans-serif;
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 12px;
+      text-transform: capitalize;
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .agent-card--mention .agent-card__action::before { content: '@'; font-weight: 600; }
+    .agent-card--mention .agent-card__action:hover {
+      background: #e2e3e5;
+    }
+
+    /* Legacy row2 kept for older generated DOM, but current mention card keeps stats in info. */
+    .agent-card--mention .agent-card__row2 {
+      display: none;
+      flex-direction: row;
+      align-items: center;
+      padding-left: 60px;
+    }
+    .agent-card--mention .agent-card__stats {
+      display: flex;
+      align-items: center;
+      gap: 0;
+      margin-top: 0;
+    }
+    .agent-card--mention .agent-card__stat--claws {
+      color: rgba(240, 152, 0, 1);
+      font-size: 10px;
+      line-height: 12px;
+      letter-spacing: 1px;
+    }
+    .agent-card--mention .agent-card__stat--owner {
+      color: rgba(47, 47, 51, 1);
+      font-size: 10px;
+      line-height: 12px;
+      letter-spacing: 1px;
+    }
+
+    /* ── mode: search（有输入搜索结果，沿用旧式单列行） ── */
+    .agent-card--search {
+      align-items: center;
+      gap: 14px;
+      width: 100%;
+      min-height: 64px;
+      padding: 10px 12px;
+      border-radius: 10px;
+      background: transparent;
+      box-sizing: border-box;
+    }
+    .agent-card--search:hover {
+      background: rgba(0, 0, 0, 0.02);
+    }
+    .agent-card--search.openagent-card-selected {
+      background: rgba(99, 102, 241, 0.06);
+      outline: 2px solid rgba(99, 102, 241, 0.3);
+      outline-offset: -2px;
+    }
+    .agent-card--search .agent-card__avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      border: 0.4px solid rgba(47, 47, 51, 0.18);
+    }
+    .agent-card--search .agent-card__body {
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+      min-width: 0;
+    }
+    .agent-card--search .agent-card__name {
+      font-size: 13px;
+      line-height: 16px;
+      font-weight: 600;
+      color: rgba(47, 47, 51, 1);
+    }
+    .agent-card--search .agent-card__bio {
+      font-size: 11px;
+      line-height: 15px;
+      color: rgba(47, 47, 51, 0.45);
+      -webkit-line-clamp: 1;
+    }
+    .agent-card--search .agent-card__stats {
+      margin-top: 0;
+    }
+    .agent-card--search .agent-card__stat--claws {
+      font-size: 11px;
+      line-height: 13px;
+      color: rgba(240, 152, 0, 1);
+    }
+    .agent-card--search .agent-card__stat--owner {
+      font-size: 11px;
+      line-height: 13px;
+      color: rgba(47, 47, 51, 0.65);
+    }
+    .agent-card--search .agent-card__action {
+      width: 60px;
+      height: 28px;
+      padding: 0 12px;
+      border-radius: 10px;
+      background: #EFF0F2;
+      border: 1px solid rgba(47, 47, 51, 0.04);
+      color: rgba(47, 47, 51, 1);
+      font-family: "PingFang SC", sans-serif;
+      font-size: 12px;
+      line-height: 12px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .agent-card--search .agent-card__action::before { content: '@'; font-weight: 600; }
+    .agent-card--search .agent-card__action:hover {
+      background: #e2e3e5;
+    }
+
+    @media (max-width: 980px) {
+      .openagent-section-grid { grid-template-columns: repeat(2, minmax(0, 439.5px)); }
+    }
+
+    @media (max-width: 640px) {
+      .openagent-section-grid { grid-template-columns: 1fr; }
+      .openagent-agent-panel { padding: 14px; gap: 14px; }
+      .agent-card--mention .agent-card__row1 { gap: 12px; }
+      .agent-card--mention .agent-card__content-group { gap: 12px; }
+    }
+
+    /* ── mode: inline（聊天内嵌卡片） ── */
+    .agent-card--inline {
+      padding: 16px 20px; border-radius: 16px;
+      background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
+      border: 1px solid #e0e7ff;
+      margin: 8px 0; cursor: pointer; max-width: 420px;
+    }
+    .agent-card--inline:hover {
+      border-color: #6366f1;
+      box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
+      transform: translateY(-1px);
+    }
+    .agent-card--inline .agent-card__avatar {
+      width: 56px; height: 56px; border-radius: 14px;
+      border: 2px solid #e0e7ff;
+    }
+    .agent-card--inline .agent-card__name { font-size: 16px; color: #1e1b4b; }
+    .agent-card--inline .agent-card__bio { color: #64748b; line-height: 1.4; }
+    .agent-card--inline .agent-card__stats { gap: 12px; margin-top: 8px; }
+    .agent-card--inline .agent-card__stat { color: #94a3b8; font-weight: 500; }
+    .agent-card--inline .agent-card__action {
+      padding: 8px 16px; border-radius: 10px;
+      background: linear-gradient(135deg, #6366f1, #8b5cf6);
+      color: #fff; font-size: 12px;
+    }
+    .agent-card--inline .agent-card__action:hover {
+      filter: brightness(1.1); transform: scale(1.03);
+    }
+
+    /* Agent card loading skeleton */
+    .agent-card__loading {
+      display: flex; align-items: center; gap: 10px;
+      padding: 14px 18px; border-radius: 14px;
+      background: #f8f9ff; border: 1px solid #e0e7ff;
+      color: #94a3b8; font-size: 13px;
+      margin: 8px 0; max-width: 300px;
+    }
+
+    /* 加载态 */
+    .openagent-loading {
+      padding: 32px; text-align: center; color: #aaa; font-size: 13px;
+    }
+
+    /* ── 深色主题（统一） ── */
+    [data-theme-mode="dark"] .openagent-agent-panel {
+      background: #1c1c1c; border-color: rgba(255,255,255,0.12);
+      box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
+    }
+    [data-theme-mode="dark"] .openagent-panel-head { border-color: #2a2a2a; }
+    [data-theme-mode="dark"] .openagent-panel-title { color: rgba(224, 224, 224, 0.8); }
+    [data-theme-mode="dark"] .openagent-panel-close { background: #2a2a2a; color: #888; }
+    [data-theme-mode="dark"] .openagent-panel-close:hover { background: #333; color: #ccc; }
+    [data-theme-mode="dark"] .openagent-section-heading { color: rgba(224, 224, 224, 0.45); }
+    [data-theme-mode="dark"] .openagent-parent-heading { color: rgba(224, 224, 224, 0.3); }
+    [data-theme-mode="dark"] .openagent-panel-divider { border-color: rgba(255,255,255,0.1); }
+
+    [data-theme-mode="dark"] .agent-card__name { color: #e0e0e0; }
+    [data-theme-mode="dark"] .agent-card__bio { color: rgba(224, 224, 224, 0.7); }
+    [data-theme-mode="dark"] .agent-card__stat { color: #64748b; }
+
+    [data-theme-mode="dark"] .agent-card--mention { background: transparent; }
+    [data-theme-mode="dark"] .agent-card--mention:hover { background: #252525; }
+    [data-theme-mode="dark"] .agent-card--mention .agent-card__action {
+      background: #333; border-color: #555; color: #ddd;
+    }
+    [data-theme-mode="dark"] .agent-card--mention .agent-card__action:hover { background: #444; }
+    [data-theme-mode="dark"] .agent-card--search:hover { background: #252525; }
+    [data-theme-mode="dark"] .agent-card--search.openagent-card-selected {
+      background: rgba(99, 102, 241, 0.12);
+      outline-color: rgba(99, 102, 241, 0.4);
+    }
+    [data-theme-mode="dark"] .agent-card--search .agent-card__action {
+      background: #333; border-color: #555; color: #ddd;
+    }
+    [data-theme-mode="dark"] .agent-card--search .agent-card__action:hover { background: #444; }
+
+
+    [data-theme-mode="dark"] .agent-card--inline {
+      background: linear-gradient(135deg, #1e1b3a 0%, #1a1a2e 100%);
+      border-color: #2d2b55;
+    }
+    [data-theme-mode="dark"] .agent-card--inline:hover {
+      border-color: #6366f1;
+      box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25);
+    }
+    [data-theme-mode="dark"] .agent-card--inline .agent-card__name { color: #e2e8f0; }
+    [data-theme-mode="dark"] .agent-card--inline .agent-card__avatar { border-color: #2d2b55; }
+    [data-theme-mode="dark"] .agent-card__loading {
+      background: #1e1b3a; border-color: #2d2b55; color: #64748b;
+    }
+  `;
+  document.head.appendChild(style);
+}