@shulex/cxclawctl 0.0.0-stage → 0.1.2

package/skills/poc/assets/poc_test_template.html

@@ -0,0 +1,645 @@
+<!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>