@shulex/cxclawctl 0.1.2 → 0.1.3

package/skills/poc/assets/poc_test_template.html

@@ -1,645 +0,0 @@
-<!doctype html>
-<html lang="zh-CN">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>{{title}}</title>
-<style>
-/* ===== Reset & Base ===== */
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-html { font-size: 16px; }
-body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
-               "Microsoft YaHei", Helvetica, Arial, sans-serif;
-  line-height: 1.7;
-  color: #1a1a2e;
-  background: #f0f4f8;
-}
-a { color: #4f46e5; text-decoration: none; }
-a:hover { text-decoration: underline; }
-
-/* ===== Header ===== */
-.page-header {
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
-  color: white;
-  padding: 40px 0 36px;
-}
-.header-inner {
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 0 40px;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  gap: 24px;
-}
-.header-brand {
-  font-size: 28px;
-  font-weight: 700;
-  letter-spacing: -0.5px;
-  line-height: 1.2;
-}
-.header-subtitle {
-  font-size: 14px;
-  color: rgba(255,255,255,0.55);
-  margin-top: 5px;
-}
-.header-right { text-align: right; flex-shrink: 0; }
-.header-date {
-  font-size: 13px;
-  color: rgba(255,255,255,0.5);
-}
-.solvea-badge {
-  display: inline-block;
-  background: rgba(79,70,229,0.3);
-  border: 1px solid rgba(79,70,229,0.5);
-  color: #a5b4fc;
-  padding: 3px 10px;
-  border-radius: 20px;
-  font-size: 12px;
-  margin-top: 8px;
-}
-
-/* ===== Container ===== */
-.container {
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 40px 40px 80px;
-}
-
-/* ===== KPI Cards ===== */
-.kpi-row {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 20px;
-  margin-bottom: 32px;
-  margin-top: -20px;
-}
-.kpi-card {
-  background: white;
-  border-radius: 12px;
-  padding: 24px 20px;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
-  text-align: center;
-  border-top: 4px solid transparent;
-}
-.kpi-card:nth-child(1) { border-top-color: #4f46e5; }
-.kpi-card:nth-child(2) { border-top-color: #0891b2; }
-.kpi-card:nth-child(3) { border-top-color: #059669; }
-.kpi-value {
-  font-size: 38px;
-  font-weight: 800;
-  line-height: 1;
-  margin-bottom: 6px;
-}
-.kpi-card:nth-child(1) .kpi-value { color: #4f46e5; }
-.kpi-card:nth-child(2) .kpi-value { color: #0891b2; }
-.kpi-card:nth-child(3) .kpi-value { color: #059669; }
-.kpi-label {
-  font-size: 13px;
-  color: #64748b;
-  font-weight: 500;
-}
-
-/* ===== Section ===== */
-.section {
-  background: white;
-  border-radius: 12px;
-  padding: 28px 32px;
-  margin-bottom: 24px;
-  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
-}
-.section-title {
-  font-size: 18px;
-  font-weight: 700;
-  color: #0f172a;
-  margin-bottom: 20px;
-  padding-bottom: 14px;
-  border-bottom: 2px solid #f1f5f9;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.section-icon {
-  width: 30px;
-  height: 30px;
-  border-radius: 8px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  flex-shrink: 0;
-}
-
-/* ===== Account Table ===== */
-.account-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 14px;
-}
-.account-table tr { border-bottom: 1px solid #f1f5f9; }
-.account-table tr:last-child { border-bottom: none; }
-.account-table td { padding: 10px 12px; vertical-align: middle; }
-.account-table td:first-child {
-  color: #64748b;
-  font-weight: 500;
-  width: 130px;
-  white-space: nowrap;
-}
-.credential-badge {
-  display: inline-block;
-  background: #f1f5f9;
-  border: 1px solid #e2e8f0;
-  border-radius: 6px;
-  padding: 3px 10px;
-  font-family: ui-monospace, "SF Mono", Consolas, monospace;
-  font-size: 13px;
-  color: #1e293b;
-}
-.account-note {
-  font-size: 12px;
-  color: #94a3b8;
-  margin-top: 12px;
-}
-
-/* ===== Scenario Cards ===== */
-.scenario-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
-  gap: 16px;
-  margin-bottom: 16px;
-}
-.scenario-card {
-  border: 1px solid #e2e8f0;
-  border-radius: 10px;
-  padding: 16px 18px;
-  background: #fafafa;
-}
-.scenario-name {
-  font-weight: 700;
-  font-size: 14px;
-  color: #1e293b;
-  margin-bottom: 6px;
-}
-.scenario-desc {
-  font-size: 13px;
-  color: #475569;
-  line-height: 1.65;
-  margin-bottom: 8px;
-}
-.scenario-tip {
-  font-size: 12px;
-  color: #64748b;
-  background: #f8fafc;
-  border-left: 3px solid #94a3b8;
-  padding: 6px 10px;
-  border-radius: 0 4px 4px 0;
-  line-height: 1.6;
-}
-.scene-tags {
-  margin-top: 8px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-.scene-tag {
-  display: inline-flex;
-  align-items: center;
-  background: #ede9fe;
-  color: #4f46e5;
-  padding: 4px 12px;
-  border-radius: 20px;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-/* ===== Steps ===== */
-.steps-list {
-  list-style: none;
-  counter-reset: step-counter;
-}
-.steps-list li {
-  counter-increment: step-counter;
-  padding: 0 0 22px 52px;
-  position: relative;
-}
-.steps-list li:last-child { padding-bottom: 0; }
-.steps-list li::before {
-  content: counter(step-counter);
-  position: absolute;
-  left: 0;
-  top: 2px;
-  width: 32px;
-  height: 32px;
-  background: #4f46e5;
-  color: white;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  font-weight: 700;
-}
-.step-connector {
-  position: absolute;
-  left: 15px;
-  top: 38px;
-  bottom: 0;
-  width: 2px;
-  background: #e2e8f0;
-}
-.steps-list li:last-child .step-connector { display: none; }
-.step-title {
-  font-weight: 600;
-  color: #1e293b;
-  font-size: 14px;
-  margin-bottom: 4px;
-  padding-top: 5px;
-}
-.step-body {
-  font-size: 13px;
-  color: #64748b;
-  line-height: 1.65;
-}
-.step-img {
-  max-width: 480px;
-  display: block;
-  margin: 12px 0 4px;
-  border-radius: 8px;
-  border: 1px solid #e2e8f0;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
-}
-
-/* ===== Results ===== */
-.results-intro {
-  font-size: 14px;
-  color: #64748b;
-  margin-bottom: 24px;
-}
-.agent-section { margin-bottom: 28px; }
-.agent-section h2 {
-  font-size: 15px;
-  font-weight: 700;
-  color: #1e293b;
-  padding: 12px 16px;
-  background: linear-gradient(90deg, #ede9fe 0%, #f0f9ff 100%);
-  border-radius: 10px 10px 0 0;
-  border: 1px solid #e2e8f0;
-  border-bottom: none;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 0;
-}
-.agent-meta {
-  font-size: 12px;
-  color: #94a3b8;
-  font-weight: 400;
-  margin-left: auto;
-}
-
-/* ===== Case Card ===== */
-.case-card {
-  background: white;
-  border: 1px solid #e2e8f0;
-  overflow: hidden;
-}
-.agent-section .case-card:first-of-type {
-  border-top: none;
-  border-radius: 0;
-}
-.agent-section .case-card:last-of-type {
-  border-radius: 0 0 10px 10px;
-}
-.agent-section .case-card:not(:first-of-type) {
-  border-top: 1px solid #f1f5f9;
-}
-.case-header {
-  background: #f8fafc;
-  padding: 9px 16px;
-  border-bottom: 1px solid #f1f5f9;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-.case-id {
-  font-weight: 700;
-  color: #4f46e5;
-  font-size: 13px;
-}
-.case-scenario {
-  color: #334155;
-  flex: 1;
-  font-size: 13px;
-}
-.chat-id-badge {
-  font-size: 11px;
-  color: #94a3b8;
-}
-.chat-id-badge code {
-  background: #f1f5f9;
-  padding: 1px 6px;
-  border-radius: 4px;
-  font-family: ui-monospace, "SF Mono", Consolas, monospace;
-  color: #64748b;
-  font-size: 11px;
-}
-
-/* ===== Dialogue ===== */
-.dialogue {
-  padding: 16px 20px;
-  background: #fdfdfe;
-}
-.msg {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 12px;
-  align-items: flex-start;
-}
-.msg:last-child { margin-bottom: 0; }
-.msg .label {
-  font-size: 12px;
-  color: #94a3b8;
-  min-width: 60px;
-  padding-top: 9px;
-  user-select: none;
-  text-align: right;
-  flex-shrink: 0;
-}
-.bubble {
-  max-width: 680px;
-  padding: 10px 14px;
-  border-radius: 12px;
-  font-size: 14px;
-  line-height: 1.65;
-  word-wrap: break-word;
-}
-.user-bubble {
-  background: #4f46e5;
-  color: white;
-  border-bottom-left-radius: 4px;
-}
-.bot-bubble {
-  background: white;
-  color: #1e293b;
-  border: 1px solid #e2e8f0;
-  border-bottom-left-radius: 4px;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
-}
-
-/* ===== Notes ===== */
-.notes-block {
-  margin-bottom: 20px;
-  padding: 16px 20px;
-  border-radius: 8px;
-  background: #f8fafc;
-  border: 1px solid #e2e8f0;
-}
-.notes-block:last-child { margin-bottom: 0; }
-.notes-block h3 {
-  font-size: 14px;
-  font-weight: 700;
-  color: #1e293b;
-  margin-bottom: 8px;
-}
-.notes-block p, .notes-block ul {
-  font-size: 13px;
-  color: #475569;
-  line-height: 1.7;
-}
-.notes-block ul { padding-left: 18px; }
-.notes-block li { margin: 3px 0; }
-.callout {
-  background: #fef9c3;
-  border: 1px solid #fde68a;
-  border-left: 4px solid #f59e0b;
-  padding: 10px 14px;
-  border-radius: 0 8px 8px 0;
-  font-size: 13px;
-  color: #78350f;
-  margin: 10px 0;
-  font-style: italic;
-}
-
-/* ===== Footer ===== */
-.footer {
-  text-align: center;
-  padding: 24px 0 8px;
-  font-size: 12px;
-  color: #94a3b8;
-  border-top: 1px solid #e2e8f0;
-  margin-top: 8px;
-  line-height: 1.8;
-}
-
-/* ===== Print ===== */
-@media print {
-  body { background: white; }
-  .page-header {
-    background: #1a1a2e !important;
-    -webkit-print-color-adjust: exact;
-    print-color-adjust: exact;
-  }
-  .kpi-row { margin-top: 0; }
-  .case-card, .section { box-shadow: none; }
-  .agent-section h2 { page-break-after: avoid; }
-  .case-card { page-break-inside: avoid; }
-  img { page-break-inside: avoid; }
-}
-</style>
-</head>
-<body>
-
-<!-- ===== Page Header ===== -->
-<div class="page-header">
-  <div class="header-inner">
-    <div>
-      <div class="header-brand">{{brand_name}}</div>
-      <div class="header-subtitle">Solvea AI 客服 · POC 测试报告</div>
-    </div>
-    <div class="header-right">
-      <div class="header-date">生成时间：{{generated_at}}</div>
-      <div><span class="solvea-badge">Powered by Solvea</span></div>
-    </div>
-  </div>
-</div>
-
-<!-- ===== Main Container ===== -->
-<div class="container">
-
-  <!-- KPI 数据卡片 -->
-  <div class="kpi-row">
-    <div class="kpi-card">
-      <div class="kpi-value">{{total_cases}}</div>
-      <div class="kpi-label">测试用例</div>
-    </div>
-    <div class="kpi-card">
-      <div class="kpi-value">{{scene_count}}</div>
-      <div class="kpi-label">覆盖场景</div>
-    </div>
-  </div>
-
-  <!-- 测试账号 -->
-  <div class="section">
-    <div class="section-title">
-      <span class="section-icon">🔑</span> 测试账号
-    </div>
-    <table class="account-table">
-      <tr>
-        <td>控制台地址</td>
-        <td><a href="{{console_url}}" target="_blank">{{console_url}}</a></td>
-      </tr>
-      <tr>
-        <td>测试账号</td>
-        <td><span class="credential-badge">{{account_email}}</span></td>
-      </tr>
-      <tr>
-        <td>登录密码</td>
-        <td><span class="credential-badge">{{account_password}}</span></td>
-      </tr>
-      <tr>
-        <td>客户官网</td>
-        <td><a href="{{brand_website}}" target="_blank">{{brand_website}}</a></td>
-      </tr>
-    </table>
-    <p class="account-note">请妥善保管账号信息，仅限本次测试用途。</p>
-  </div>
-
-  <!-- 测试场景覆盖 -->
-  <div class="section">
-    <div class="section-title">
-      <span class="section-icon">🎯</span> 测试场景覆盖
-    </div>
-    <div class="scenario-grid">
-      <div class="scenario-card">
-        <div class="scenario-name">📦 包裹与物流问题</div>
-        <div class="scenario-desc">涵盖包裹漏发、错发、破损，以及物流进度查询、物流异常处理等场景。</div>
-        <div class="scenario-tip">建议：提供真实或模拟订单号，验证 AI 能否调取物流信息并给出准确处理建议。</div>
-      </div>
-      <div class="scenario-card">
-        <div class="scenario-name">💬 售前咨询</div>
-        <div class="scenario-desc">涵盖产品推荐、折扣与价格咨询、库存确认、支付问题等购买前常见疑问。</div>
-        <div class="scenario-tip">建议：模拟消费者购买决策场景，验证 AI 从知识库检索并回答产品相关问题的准确性。</div>
-      </div>
-      <div class="scenario-card">
-        <div class="scenario-name">🔧 产品问题</div>
-        <div class="scenario-desc">涵盖产品使用指导、物理损坏（破损/故障）及非物理问题（功能异常、系统设置等）。</div>
-        <div class="scenario-tip">建议：描述具体产品问题，验证 AI 结合知识库给出的解答是否准确完整。</div>
-      </div>
-    </div>
-    <div class="scene-tags">
-      {% for name in by_agent %}<span class="scene-tag">{{ name | e }}</span>{% endfor %}
-    </div>
-  </div>
-
-  <!-- 操作步骤 -->
-  <div class="section">
-    <div class="section-title">
-      <span class="section-icon">📋</span> 操作步骤
-    </div>
-    <ol class="steps-list">
-      <li>
-        <div class="step-connector"></div>
-        <div class="step-title">登录控制台</div>
-        <div class="step-body">使用上方测试账号登录 <a href="{{console_url}}" target="_blank">Shulex 控制台</a>。</div>
-      </li>
-      <li>
-        <div class="step-connector"></div>
-        <div class="step-title">进入 Agents 模块</div>
-        <div class="step-body">选择想测试的场景，点击对应 Agent 进入画布。</div>
-      </li>
-      <li>
-        <div class="step-connector"></div>
-        <div class="step-title">点击 Preview 打开测试窗口</div>
-        <div class="step-body">
-          <img class="step-img" src="step3_preview.png" alt="Preview 入口">
-        </div>
-      </li>
-      <li>
-        <div class="step-connector"></div>
-        <div class="step-title">使用节点备注里的订单号</div>
-        <div class="step-body">
-          模拟测试时，需要订单号的环节，可以使用节点备注里的不同类型订单号。
-          <img class="step-img" src="step4_order_note.png" alt="订单号备注示例">
-        </div>
-      </li>
-    </ol>
-  </div>
-
-  <!-- 测试结果回放 -->
-  <div class="section">
-    <div class="section-title">
-      <span class="section-icon">💬</span> 测试结果回放
-    </div>
-    <p class="results-intro">下面按 Agent 分组展示本次测试覆盖的所有用例及对话回放：</p>
-    {% for agent_name, cases in by_agent.items() %}
-    <section class="agent-section">
-      <h2>🤖 {{ agent_name | e }} <span class="agent-meta">Agent ID: {{ cases[0].agent_id if cases else '' }}</span></h2>
-      {% for c in cases %}
-      {% set chat_id = c.results[-1].chatId if c.results else '—' %}
-      <div class="case-card">
-        <div class="case-header">
-          <span class="case-id">{{ c.name | e }}</span>
-          <span class="case-scenario">{{ c.scenario | e }}</span>
-          <span class="chat-id-badge">Chat ID: <code>{{ chat_id or '—' }}</code></span>
-        </div>
-        <div class="dialogue">
-          {% for t in c.results %}
-          <div class="msg">
-            <span class="label">👤 User</span>
-            <div class="bubble user-bubble">{{ t.input | e }}</div>
-          </div>
-          <div class="msg">
-            <span class="label">🤖 AI</span>
-            <div class="bubble bot-bubble">{{ (t.content or '') | e | replace('\n', '<br>') }}</div>
-          </div>
-          {% endfor %}
-        </div>
-      </div>
-      {% endfor %}
-    </section>
-    {% endfor %}
-  </div>
-
-  <!-- 测试注意事项 -->
-  <div class="section">
-    <div class="section-title">
-      <span class="section-icon">⚠️</span> 测试注意事项
-    </div>
-    <div class="notes-block">
-      <h3>关于新对话</h3>
-      <p>每次开始新对话前，请点击 <strong>NewChat</strong> 按钮，否则 AI 会参考上文聊天记录回答，影响准确性。</p>
-      <img class="step-img" src="notice_new_chat.png" alt="NewChat 入口">
-    </div>
-    <div class="notes-block">
-      <h3>关于知识范围</h3>
-      <p>提问时请注意查看机器人是否学习了对应知识。未学习的知识会按转人工流程处理。</p>
-    </div>
-    <div class="notes-block">
-      <h3>关于转人工</h3>
-      <p>默认转人工话术：</p>
-      <div class="callout">Please wait for our team and we'll get back to you as soon as possible.</div>
-      <p>出现该话术时，说明 AI 由于以下原因转入人工：</p>
-      <ul>
-        <li>缺乏对应知识</li>
-        <li>识别到转人工意图</li>
-        <li>命中红线问题</li>
-      </ul>
-      <p style="margin-top:8px;">具体原因可查看对话下方的小字或点击<strong>生成过程</strong>查看。</p>
-      <img class="step-img" src="notice_escalate.png" alt="转人工通知话术">
-      <p style="margin-top:12px;">转人工后 AI 不再回复，避免与人工客服抢答。如需继续向 AI 提问，请开启新对话。</p>
-      <img class="step-img" src="notice_escalate2.png" alt="转人工后开新对话">
-    </div>
-  </div>
-
-  <!-- 页脚 -->
-  <div class="footer">
-    <p>当前测试环境为专为 <strong>{{brand_name}}</strong> 搭建，功能仅供演示和体验。正式环境下可根据具体业务需求部署多功能 AI Agent。</p>
-    <p>如有问题，欢迎随时联系 Shulex 技术支持团队。</p>
-    <p style="margin-top:8px; color:#cbd5e1;">Powered by Solvea · {{generated_at}}</p>
-  </div>
-
-</div>
-</body>
-</html>