npm - siluzan-tso-cli - Versions diffs - 1.1.24 → 1.1.25-beta.2 - Mend

siluzan-tso-cli 1.1.24 → 1.1.25-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/dist/skill/report-templates/website-diagnosis-report.html CHANGED Viewed

@@ -1,11 +1,10 @@
 <!doctype html>
 <!--
-  网站诊断报告 HTML 骨架（对齐 siluzan-front-end-v2 WebsiteAnalysisReport/v3）
+  网站诊断报告 — 单文件 HTML 终稿（对齐 siluzan-front-end-v2 WebsiteAnalysisReport/v3）
-  Agent 生成终稿时：
-  1. 用 website-diagnosis collect + 规则 JSON 填充各 section
-  2. 版式可参考同目录 report-template.html（Tailwind + ECharts CDN）
-  3. 勿删除下列 section 结构；可增图表与样式
+  数据：window.__WEBSITE_DIAGNOSIS__（与 tso_agent getWebsiteDiagnosisData.data 同结构）
+  生成：siluzan-tso website-diagnosis render --data ./diagnosis.json [--collect ./collect.json]
+  或 Agent 将诊断 JSON 写入下方锚点后保存为本文件。
 -->
 <html lang="zh-CN">
   <head>
@@ -13,69 +12,484 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>网站诊断报告</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
+    <style>
+      .score-ring-track { stroke: #e5e7eb; }
+      .status-excellent { color: #00b42a; }
+      .status-good { color: #00b42a; }
+      .status-normal { color: #ff7d00; }
+      .status-poor { color: #f53f3f; }
+      .status-absent { color: #f53f3f; }
+      .chart-box { width: 100%; height: 320px; }
+      .chart-box-sm { width: 100%; height: 260px; }
+      @media print {
+        body { background: #fff; }
+        section { break-inside: avoid; }
+      }
+    </style>
   </head>
-  <body class="bg-slate-50 text-slate-800">
-    <!-- ReportHeader -->
+  <body class="bg-slate-50 text-slate-800 antialiased">
     <header class="bg-white shadow-sm px-6 py-8 max-w-5xl mx-auto mt-6 rounded-lg">
-      <h1 class="text-2xl font-bold text-center">网站诊断报告</h1>
-      <p class="mt-4 text-sm"><span class="text-slate-500">诊断网址：</span><span id="report-url"></span></p>
-      <p class="text-sm"><span class="text-slate-500">诊断时间：</span><span id="report-time"></span></p>
-      <p class="text-lg mt-2 font-semibold">
+      <h1 class="text-2xl font-bold text-center text-slate-900">网站诊断报告</h1>
+      <p class="mt-4 text-sm">
+        <span class="text-slate-500">诊断网址：</span>
+        <a id="report-url" href="#" target="_blank" rel="noopener" class="text-brand-600 break-all"></a>
+      </p>
+      <p class="text-sm mt-1">
+        <span class="text-slate-500">诊断时间：</span><span id="report-time"></span>
+      </p>
+      <p class="text-lg mt-3 font-semibold">
         <span class="text-slate-500">综合得分：</span>
-        <span id="report-score" class="text-emerald-600"></span>
+        <span id="report-score"></span>
+        <span id="report-rating" class="ml-2 text-base font-medium"></span>
       </p>
     </header>
     <main class="max-w-5xl mx-auto px-4 py-6 space-y-6">
-      <!-- HealthOverview -->
       <section id="health-overview" class="bg-white rounded-lg shadow-sm p-6">
-        <h2 class="text-lg font-semibold border-b pb-2">健康度总览</h2>
-        <div id="health-overview-body" class="mt-4 text-sm"></div>
+        <h2 class="text-lg font-semibold border-b border-slate-200 pb-2">一、网站健康快览</h2>
+        <p id="health-summary" class="mt-3 text-sm text-slate-600"></p>
+        <div class="mt-6 grid md:grid-cols-2 gap-6 items-center">
+          <div class="flex flex-col items-center" id="score-ring-wrap"></div>
+          <div>
+            <p class="text-sm text-slate-500 mb-2 text-center md:text-left">各模块健康度分布</p>
+            <div id="chart-radar" class="chart-box"></div>
+          </div>
+        </div>
       </section>
-      <!-- RiskMap -->
       <section id="risk-map" class="bg-white rounded-lg shadow-sm p-6">
-        <h2 class="text-lg font-semibold border-b pb-2">核心风险与问题</h2>
-        <ul id="core-issues-list" class="mt-4 space-y-3 text-sm"></ul>
+        <h2 class="text-lg font-semibold border-b border-slate-200 pb-2">二、核心风险与模块得分</h2>
+        <div id="chart-risk-bar" class="chart-box mt-4"></div>
+        <ul id="core-issues-list" class="mt-6 space-y-3 text-sm"></ul>
       </section>
-      <!-- ModuleDetail (repeat per m1–m6) -->
       <section id="module-details" class="bg-white rounded-lg shadow-sm p-6">
-        <h2 class="text-lg font-semibold border-b pb-2">分模块诊断明细</h2>
+        <h2 class="text-lg font-semibold border-b border-slate-200 pb-2">三、分模块诊断明细</h2>
         <div id="modules-container" class="mt-4 space-y-8"></div>
       </section>
-      <!-- LoadingSpeed -->
       <section id="loading-speed" class="bg-white rounded-lg shadow-sm p-6">
-        <h2 class="text-lg font-semibold border-b pb-2">加载速度（Lighthouse）</h2>
+        <h2 class="text-lg font-semibold border-b border-slate-200 pb-2">四、加载速度（Lighthouse）</h2>
+        <div id="lighthouse-callout" class="mt-3 hidden rounded-md bg-amber-50 border border-amber-200 px-4 py-3 text-sm text-amber-900"></div>
+        <div id="chart-lighthouse" class="chart-box-sm mt-4"></div>
         <div id="lighthouse-tables" class="mt-4 overflow-x-auto text-sm"></div>
       </section>
-      <!-- PriorityPlan -->
       <section id="priority-plan" class="bg-white rounded-lg shadow-sm p-6">
-        <h2 class="text-lg font-semibold border-b pb-2">优先改进计划</h2>
-        <div id="priority-plan-body" class="mt-4 text-sm"></div>
+        <h2 class="text-lg font-semibold border-b border-slate-200 pb-2">五、优先改进计划</h2>
+        <div id="priority-plan-body" class="mt-4 text-sm space-y-4"></div>
       </section>
-      <!-- LongtermValue -->
       <section id="longterm-value" class="bg-white rounded-lg shadow-sm p-6 mb-8">
-        <h2 class="text-lg font-semibold border-b pb-2">投放与长期价值建议</h2>
-        <div id="longterm-value-body" class="mt-4 text-sm"></div>
+        <h2 class="text-lg font-semibold border-b border-slate-200 pb-2">六、投放与长期价值建议</h2>
+        <div id="longterm-value-body" class="mt-4 text-sm text-slate-700 leading-relaxed"></div>
       </section>
     </main>
+    <footer class="max-w-5xl mx-auto px-4 pb-8 text-center text-xs text-slate-400">
+      由丝路赞网站诊断生成 · 打开本文件需联网加载 Tailwind / ECharts CDN
+    </footer>
     <script>
-      // 示例：将 Agent 生成的诊断 JSON 赋给 window.__WEBSITE_DIAGNOSIS__ 后调用 renderReport()
       window.__WEBSITE_DIAGNOSIS__ = window.__WEBSITE_DIAGNOSIS__ || null;
+      const RATINGS = [
+        { id: "s1", level: "优秀", description: "可直接投放广告", color: "#00b42a", min: 90 },
+        { id: "s2", level: "良好", description: "小幅优化后可直接投放广告", color: "#00b42a", min: 80, max: 89.99 },
+        { id: "s3", level: "一般", description: "需要重点优化", color: "#ff7d00", min: 70, max: 79.99 },
+        { id: "s4", level: "较差", description: "需要大幅改进优化", color: "#f53f3f", min: 60, max: 69.99 },
+        { id: "s5", level: "不建议投放", description: "不建议投放广告，需要全面整改", color: "#f53f3f", max: 59.99 },
+      ];
+      const MODULE_META = {
+        m1: { name: "网站内容及结构诊断", abbreviation: "内容与结构", totalScore: 30 },
+        m2: { name: "网站性能诊断", abbreviation: "网站技术性能", totalScore: 25 },
+        m3: { name: "营销基础与广告落地页", abbreviation: "营销基础与落地页", totalScore: 15 },
+        m4: { name: "用户体验与转化", abbreviation: "用户体验与转化", totalScore: 15 },
+        m5: { name: "媒体广告投放辅助", abbreviation: "广告辅助检查", totalScore: 10 },
+        m6: { name: "社交媒体辅助", abbreviation: "社交媒体", totalScore: 5 },
+      };
+      const ITEM_LABELS = {
+        m1i1: "Banner 轮播图", m1i2: "导航栏", m1i3: "首页信息布局", m1i4: "产品类目页", m1i5: "产品详情页",
+        m1i6: "公司介绍页", m1i7: "联系我们页", m1i8: "表单提交流程", m1i9: "社交媒体链接",
+        m2i1: "加载速度", m2i2: "HTTPS 安全", m2i3: "404 页面", m2i4: "图片清晰度", m2i5: "移动端适配",
+        m3i1: "企业邮箱", m3i2: "联系电话", m3i4: "语言一致性", m3i5: "地址地图",
+        m4i1: "页面布局", m4i2: "CTA 按钮", m4i3: "表单体验", m4i4: "内容可读性", m4i5: "社媒分享可扩展性",
+        m5i1: "落地页速度", m5i2: "询盘转化路径", m5i4: "跟踪与分析",
+        m6i1: "内容可引用性", m6i2: "内容可分享性", m6i3: "视觉风格统一",
+      };
+      const ITEM_FULL = {
+        m1i1: 5, m1i2: 2, m1i3: 4, m1i4: 2, m1i5: 4, m1i6: 3, m1i7: 4, m1i8: 4, m1i9: 2,
+        m2i1: 8, m2i2: 5, m2i3: 4, m2i4: 4, m2i5: 4,
+        m3i1: 6, m3i2: 3, m3i4: 3, m3i5: 3,
+        m4i1: 3, m4i2: 5, m4i3: 3, m4i4: 3, m4i5: 1,
+        m5i1: 3, m5i2: 4, m5i4: 3,
+        m6i1: 2, m6i2: 2, m6i3: 1,
+      };
+      const CORE_ISSUES = {
+        ci1: { issue: "首屏缺乏清晰 CTA", impact: "广告落地页效果差", priority: "高" },
+        ci2: { issue: "转化跟踪未部署", impact: "无法归因广告效果", priority: "高" },
+        ci3: { issue: "移动端显示异常", impact: "移动端转化下降", priority: "高" },
+        ci4: { issue: "页面加载缓慢", impact: "首屏加载慢", priority: "高" },
+        ci5: { issue: "导航栏与清晰度", impact: "用户找不到关键信息", priority: "中" },
+        ci6: { issue: "表单复杂或缺乏清晰", impact: "表单提交率低", priority: "中" },
+        ci7: { issue: "类目页与详情页内容不匹配", impact: "广告相关性低", priority: "中" },
+        ci8: { issue: "网站语言与广告不一致", impact: "用户体验差", priority: "中" },
+        ci9: { issue: "缺少社媒分享入口", impact: "二次传播效率低", priority: "低" },
+        ci10: { issue: "品牌风格不统一", impact: "品牌可信度低", priority: "低" },
+      };
+      const STATUS_ZH = {
+        Excellent: "优秀", Good: "良好", Normal: "一般", Poor: "较差",
+        Full: "完整", NeedImprove: "需优化", Absent: "缺失",
+      };
+      function getRating(score, ratingId) {
+        if (ratingId) {
+          const r = RATINGS.find((x) => x.id === ratingId);
+          if (r) return r;
+        }
+        const s = Number(score) || 0;
+        for (const r of RATINGS) {
+          if (r.min != null && r.max != null && s >= r.min && s <= r.max) return r;
+          if (r.min != null && r.max == null && s >= r.min) return r;
+          if (r.max != null && r.min == null && s <= r.max) return r;
+        }
+        return RATINGS[RATINGS.length - 1];
+      }
+      function enrichData(raw) {
+        if (!raw) return null;
+        const data = { ...raw };
+        if (!data.analyzedAt) data.analyzedAt = new Date().toISOString();
+        const modules = (data.modules || []).map((mod) => {
+          const meta = MODULE_META[mod.id] || { name: mod.id, abbreviation: mod.id, totalScore: 0 };
+          const items = (mod.items || []).map((it) => ({
+            ...it,
+            name: it.name || ITEM_LABELS[it.id] || it.id,
+            totalScore: it.totalScore != null ? it.totalScore : ITEM_FULL[it.id] || 0,
+          }));
+          const score = items.reduce((s, it) => s + (Number(it.score) || 0), 0);
+          return {
+            ...mod,
+            ...meta,
+            items,
+            score: mod.score != null ? Number(mod.score) : score,
+            totalScore: meta.totalScore,
+          };
+        });
+        data.modules = modules;
+        data.score =
+          data.score != null
+            ? Number(data.score)
+            : modules.reduce((s, m) => s + (Number(m.score) || 0), 0);
+        const rating = getRating(data.score, data.ratingId);
+        data.ratingId = rating.id;
+        data.ratingLabel = data.ratingLabel || rating.level;
+        data.ratingDescription = data.ratingDescription || rating.description;
+        data.ratingColor = rating.color;
+        data.coreIssues = (data.coreIssuesIds || [])
+          .map((id) => CORE_ISSUES[id] && { id, ...CORE_ISSUES[id] })
+          .filter(Boolean);
+        data.lighthouse = data.lighthouse || data.lighthouseResult || null;
+        return data;
+      }
+      function statusClass(status) {
+        const s = String(status || "");
+        if (s === "Excellent" || s === "Good" || s === "Full") return "status-good";
+        if (s === "Normal" || s === "NeedImprove") return "status-normal";
+        return "status-poor";
+      }
+      function renderScoreRing(score, color) {
+        const pct = Math.min(100, Math.max(0, Number(score) || 0));
+        const dash = (pct / 100) * 471;
+        return `
+          <svg width="180" height="180" viewBox="0 0 180 180" aria-label="综合得分">
+            <circle class="score-ring-track" cx="90" cy="90" r="75" fill="none" stroke-width="14"/>
+            <circle cx="90" cy="90" r="75" fill="none" stroke="${color}" stroke-width="14"
+              stroke-linecap="round" stroke-dasharray="${dash} 471" transform="rotate(-90 90 90)"/>
+          </svg>
+          <div class="text-center -mt-24">
+            <div class="text-4xl font-bold text-slate-900">${pct.toFixed(1)}</div>
+            <div class="text-slate-500 text-sm">/ 100</div>
+          </div>`;
+      }
+      function initRadar(el, modules) {
+        if (!window.echarts || !el) return;
+        const chart = echarts.init(el);
+        chart.setOption({
+          radar: {
+            indicator: modules.map((m) => ({ name: m.abbreviation, max: m.totalScore || 1 })),
+            radius: "62%",
+            splitNumber: 4,
+            axisName: { color: "#64748b", fontSize: 11 },
+          },
+          series: [{
+            type: "radar",
+            data: [{
+              value: modules.map((m) => Number(m.score) || 0),
+              areaStyle: { color: "rgba(37, 99, 235, 0.2)" },
+              lineStyle: { color: "#2563eb", width: 2 },
+              itemStyle: { color: "#2563eb" },
+            }],
+          }],
+        });
+        window.addEventListener("resize", () => chart.resize());
+      }
+      function initRiskBar(el, modules) {
+        if (!window.echarts || !el) return;
+        const sorted = [...modules].sort((a, b) => (a.score / (a.totalScore || 1)) - (b.score / (b.totalScore || 1)));
+        const names = sorted.map((m) => m.abbreviation);
+        const totals = sorted.map((m) => m.totalScore);
+        const actuals = sorted.map((m) => Number(m.score) || 0);
+        const chart = echarts.init(el);
+        chart.setOption({
+          tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
+          grid: { left: 8, right: 56, top: 8, bottom: 8, containLabel: true },
+          xAxis: { type: "value", show: false, max: Math.max(...totals, 1) },
+          yAxis: {
+            type: "category",
+            data: names,
+            axisLabel: { color: "#64748b", fontSize: 11 },
+            axisLine: { show: false },
+            axisTick: { show: false },
+          },
+          series: [
+            {
+              name: "满分",
+              type: "bar",
+              data: totals,
+              barWidth: 18,
+              itemStyle: { color: "#93c5fd", borderRadius: [0, 4, 4, 0] },
+              label: {
+                show: true,
+                position: "right",
+                formatter: (p) => `${actuals[p.dataIndex]}/${p.value}`,
+                color: "#475569",
+                fontSize: 11,
+              },
+              z: 1,
+            },
+            {
+              name: "得分",
+              type: "bar",
+              data: actuals,
+              barWidth: 18,
+              barGap: "-100%",
+              itemStyle: { color: "#22c55e", borderRadius: [0, 4, 4, 0] },
+              z: 2,
+            },
+          ],
+        });
+        window.addEventListener("resize", () => chart.resize());
+      }
+      function initLighthouseChart(el, lh) {
+        if (!window.echarts || !el || !lh) return;
+        const desktop = lh.desktop || {};
+        const mobile = lh.mobile || {};
+        const chart = echarts.init(el);
+        chart.setOption({
+          tooltip: { trigger: "axis" },
+          legend: { data: ["桌面端", "移动端"], bottom: 0 },
+          grid: { left: 48, right: 24, top: 24, bottom: 48 },
+          xAxis: { type: "category", data: ["性能得分", "FCP (s)", "SI (s)"] },
+          yAxis: { type: "value" },
+          series: [
+            {
+              name: "桌面端",
+              type: "bar",
+              data: [
+                desktop.score ?? 0,
+                desktop.firstContentfulPaint != null ? (desktop.firstContentfulPaint / 1000).toFixed(2) : 0,
+                desktop.speedIndex != null ? (desktop.speedIndex / 1000).toFixed(2) : 0,
+              ],
+              itemStyle: { color: "#2563eb" },
+            },
+            {
+              name: "移动端",
+              type: "bar",
+              data: [
+                mobile.score ?? 0,
+                mobile.firstContentfulPaint != null ? (mobile.firstContentfulPaint / 1000).toFixed(2) : 0,
+                mobile.speedIndex != null ? (mobile.speedIndex / 1000).toFixed(2) : 0,
+              ],
+              itemStyle: { color: "#f97316" },
+            },
+          ],
+        });
+        window.addEventListener("resize", () => chart.resize());
+      }
+      function lighthouseTable(lh) {
+        if (!lh || (!lh.desktop && !lh.mobile)) return "";
+        const row = (label, d, m) => `
+          <tr class="border-t border-slate-100">
+            <td class="py-2 pr-4 text-slate-600">${label}</td>
+            <td class="py-2">${d ?? "—"}</td>
+            <td class="py-2">${m ?? "—"}</td>
+          </tr>`;
+        const fmtMs = (v) => (v != null ? `${(v / 1000).toFixed(2)} s` : "—");
+        return `
+          <table class="min-w-full text-left">
+            <thead><tr class="text-slate-500 border-b">
+              <th class="pb-2">指标</th><th class="pb-2">桌面端</th><th class="pb-2">移动端</th>
+            </tr></thead>
+            <tbody>
+              ${row("性能得分", lh.desktop?.score, lh.mobile?.score)}
+              ${row("FCP", fmtMs(lh.desktop?.firstContentfulPaint), fmtMs(lh.mobile?.firstContentfulPaint))}
+              ${row("SI", fmtMs(lh.desktop?.speedIndex), fmtMs(lh.mobile?.speedIndex))}
+            </tbody>
+          </table>`;
+      }
+      function buildPriorityPlan(data) {
+        const blocks = [];
+        const priOrder = { 高: 0, 中: 1, 低: 2 };
+        const issues = [...(data.coreIssues || [])].sort(
+          (a, b) => (priOrder[a.priority] ?? 9) - (priOrder[b.priority] ?? 9),
+        );
+        if (issues.length) {
+          blocks.push("<h3 class=\"font-medium text-slate-800\">核心问题</h3><ul class=\"list-disc pl-5 space-y-1\">");
+          for (const ci of issues) {
+            blocks.push(
+              `<li><span class="font-medium">[${ci.priority}]</span> ${ci.issue} — ${ci.impact}</li>`,
+            );
+          }
+          blocks.push("</ul>");
+        }
+        const weak = [];
+        for (const mod of data.modules || []) {
+          for (const it of mod.items || []) {
+            const ratio = (Number(it.score) || 0) / (it.totalScore || 1);
+            if (ratio < 0.6 && it.suggestion) {
+              weak.push({ module: mod.abbreviation, name: it.name, suggestion: it.suggestion, ratio });
+            }
+          }
+        }
+        weak.sort((a, b) => a.ratio - b.ratio);
+        if (weak.length) {
+          blocks.push("<h3 class=\"font-medium text-slate-800 mt-4\">低分子项建议</h3><ol class=\"list-decimal pl-5 space-y-2\">");
+          for (const w of weak.slice(0, 12)) {
+            blocks.push(`<li><span class="text-slate-600">${w.module} · ${w.name}</span><br/>${w.suggestion}</li>`);
+          }
+          blocks.push("</ol>");
+        }
+        return blocks.join("") || "<p class=\"text-slate-500\">暂无待办项。</p>";
+      }
+      function longtermCopy(data) {
+        const r = getRating(data.score, data.ratingId);
+        const lines = [
+          `<p><strong>综合评级：${r.level}</strong> — ${r.description}</p>`,
+          `<p>当前总分 <strong>${Number(data.score).toFixed(1)}</strong> / 100。`,
+        ];
+        if (r.id === "s1" || r.id === "s2") {
+          lines.push(" 建议：在保持落地页质量的前提下开启或扩大广告投放，并持续监控 Lighthouse 与转化跟踪。</p>");
+        } else if (r.id === "s3") {
+          lines.push(" 建议：优先处理营销基础、转化路径与加载速度后再加大预算，避免高 CPC 低转化。</p>");
+        } else {
+          lines.push(" 建议：先完成本报告「优先改进计划」中的高优先级项，再考虑投放；否则预算浪费风险较高。</p>");
+        }
+        lines.push(
+          "<p class=\"mt-2 text-slate-500\">本报告依据页面 HTML 与 Lighthouse 数据生成，未出现的指标请勿臆测。可与 Google 账户分析、广告诊断页配合使用（二者与「网站诊断」数据源不同）。</p>",
+        );
+        return lines.join("");
+      }
       function renderReport(data) {
-        if (!data) return;
-        document.getElementById("report-url").textContent = data.url || "";
-        document.getElementById("report-time").textContent = data.analyzedAt || "";
-        const score = data.score != null ? data.score : "(待汇总)";
-        document.getElementById("report-score").textContent =
-          score + " 分 (" + (data.ratingLabel || data.ratingId || "") + ")";
-        // TODO: 填充 health-overview、core-issues、modules、lighthouse 等（Agent 生成时写完整逻辑或静态 HTML）
+        const d = enrichData(data);
+        if (!d) return;
+        const urlEl = document.getElementById("report-url");
+        if (urlEl && d.url) {
+          urlEl.textContent = d.url;
+          urlEl.href = d.url;
+        }
+        document.getElementById("report-time").textContent = d.analyzedAt
+          ? new Date(d.analyzedAt).toLocaleString("zh-CN")
+          : "—";
+        const scoreEl = document.getElementById("report-score");
+        scoreEl.textContent = `${Number(d.score).toFixed(1)} 分`;
+        scoreEl.style.color = d.ratingColor;
+        const ratingEl = document.getElementById("report-rating");
+        ratingEl.textContent = `（${d.ratingLabel}）`;
+        ratingEl.style.color = d.ratingColor;
+        document.getElementById("health-summary").innerHTML =
+          `您的网站总评分 <strong>${Number(d.score).toFixed(1)}</strong> 分。${d.ratingDescription}`;
+        document.getElementById("score-ring-wrap").innerHTML = renderScoreRing(d.score, d.ratingColor);
+        initRadar(document.getElementById("chart-radar"), d.modules);
+        initRiskBar(document.getElementById("chart-risk-bar"), d.modules);
+        const ciList = document.getElementById("core-issues-list");
+        if (d.coreIssues && d.coreIssues.length) {
+          ciList.innerHTML = d.coreIssues
+            .map(
+              (ci) =>
+                `<li class="border-l-4 border-rose-400 pl-3 py-1">
+                  <span class="font-medium text-rose-700">[${ci.priority}]</span> ${ci.issue}
+                  <span class="text-slate-500"> — ${ci.impact}</span>
+                </li>`,
+            )
+            .join("");
+        } else {
+          ciList.innerHTML = '<li class="text-slate-500">未标注核心问题 ID。</li>';
+        }
+        const modBox = document.getElementById("modules-container");
+        modBox.innerHTML = (d.modules || [])
+          .map((mod, idx) => {
+            const rows = (mod.items || [])
+              .map(
+                (it) => `<tr class="border-t border-slate-100">
+                  <td class="py-2 pr-2">${it.name}</td>
+                  <td class="py-2 whitespace-nowrap">${it.score ?? 0} / ${it.totalScore}</td>
+                  <td class="py-2 ${statusClass(it.status)}">${STATUS_ZH[it.status] || it.status || "—"}</td>
+                  <td class="py-2 text-slate-600 max-w-md">${it.issue || "—"}</td>
+                  <td class="py-2 text-slate-700 max-w-md">${it.suggestion || "—"}</td>
+                </tr>`,
+              )
+              .join("");
+            return `
+              <div>
+                <h3 class="font-semibold text-slate-900">${idx + 1}. ${mod.name}
+                  <span class="text-sm font-normal text-slate-500">（${mod.score}/${mod.totalScore}）</span>
+                </h3>
+                <table class="mt-2 w-full text-sm">
+                  <thead><tr class="text-slate-500 border-b">
+                    <th class="text-left pb-2">诊断项</th><th class="pb-2">得分</th><th class="pb-2">状态</th>
+                    <th class="pb-2">问题</th><th class="pb-2">建议</th>
+                  </tr></thead>
+                  <tbody>${rows}</tbody>
+                </table>
+              </div>`;
+          })
+          .join("");
+        const lh = d.lighthouse;
+        const callout = document.getElementById("lighthouse-callout");
+        if (d.lighthouseWarning || !lh || (!lh.desktop && !lh.mobile)) {
+          callout.classList.remove("hidden");
+          callout.textContent =
+            d.lighthouseWarning ||
+            "未获取 Lighthouse 性能数据（collect 失败或未执行 performance）。加载速度相关子项请依据页面实测说明。";
+        } else {
+          callout.classList.add("hidden");
+          initLighthouseChart(document.getElementById("chart-lighthouse"), lh);
+          document.getElementById("lighthouse-tables").innerHTML = lighthouseTable(lh);
+        }
+        document.getElementById("priority-plan-body").innerHTML = buildPriorityPlan(d);
+        document.getElementById("longterm-value-body").innerHTML = longtermCopy(d);
       }
       if (window.__WEBSITE_DIAGNOSIS__) renderReport(window.__WEBSITE_DIAGNOSIS__);

package/dist/skill/report-templates/website-diagnosis-report.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # 网站诊断报告（交付模板）
-> **最终交付物：一份可打开的 HTML 文件**（如 `website-diagnosis-report.html`），不是仅 Markdown 摘要。
+> **最终交付物：一份可打开的、带图表的 HTML 文件**（如 `website-diagnosis-report.html`），不是仅 Markdown 摘要。须含：综合得分环、模块雷达图、风险/模块条形图、Lighthouse 对比图（有数据时）。
 > 数据：`website-diagnosis collect` 落盘 JSON + Agent 按 `assets/website-diagnosis-rules.md` 生成的诊断 JSON（与 tso_agent `getWebsiteDiagnosisData` 的 `data` 同结构）。
 ---
@@ -25,11 +25,11 @@
 | 区块 ID / 组件 | 内容 |
 | -------------- | ---- |
 | `ReportHeader` | 标题「网站诊断报告」、URL、`analyzedAt`、综合得分与等级色 |
-| `HealthOverview` | 总分、行业对比文案、`ratingId` 说明、雷达/概览（可用 ECharts 或静态表） |
-| `RiskMap` | `coreIssuesIds` 展开为风险地图/列表（问题、影响、优先级） |
+| `HealthOverview` | 总分、行业对比文案、`ratingId` 说明、**ECharts 雷达图** + 得分环 |
+| `RiskMap` | `coreIssuesIds` 列表 + **模块得分横向条形图**（对齐前端 RiskMap） |
 | `ModuleDetail` | 6 模块 × 子项：得分、status、issue、suggestion（表格或卡片） |
 | `PriorityPlan` | 高/中/低优先级改进计划（来自核心问题 + 低分子项） |
-| `LoadingSpeed` | `lighthouse` desktop/mobile 指标表；缺失时 callout 说明 |
+| `LoadingSpeed` | **Lighthouse 柱状对比图** + desktop/mobile 指标表；缺失时 callout 说明 |
 | `LongtermValue` | 投放建议、长期优化价值（与 s1–s5 评级一致） |
 生成前可对 JSON 做与前端相同的聚合逻辑：各模块 `score` = 子项得分之和，总分 = 各模块之和（参见 `siluzan-front-end-v2` → `useWebsiteGuide/utils` → `parseAIResultData`）。
@@ -41,7 +41,8 @@
 - 单文件 HTML，`lang` 与用户语言一致（默认 `zh-CN`）。
 - 可引用 CDN：Tailwind / ECharts（与 `report-template.html` 相同，见该文件头部说明）。
 - 落盘建议与 `--json-out` 同目录：`website-diagnosis-report.html`。
-- **禁止**只交付 Markdown 或纯 JSON 当作最终报告（JSON 可作为附件或中间产物）。
+- **推荐生成方式**：`siluzan-tso website-diagnosis render --data <diagnosis.json> [--collect <collect.json>]`
+- **禁止**只交付 Markdown 或纯 JSON 当作最终报告（JSON 可作为中间产物）。
 ---

package/dist/skill/scripts/install.ps1 CHANGED Viewed

@@ -9,11 +9,11 @@ $ErrorActionPreference = 'Stop'
 # -- Package info (injected at build time) ------------------------------------
 $PKG_NAME    = 'siluzan-tso-cli'
 # PKG_VERSION 锁定到与本脚本同批构建产物一致的版本，避免与 dist/skill 错位
-$PKG_VERSION = '1.1.24'
+$PKG_VERSION = '1.1.25-beta.2'
 $CLI_BIN     = 'siluzan-tso'
 $SKILL_LABEL = 'Siluzan TSO'
-$INSTALL_CMD = 'npm install -g siluzan-tso-cli'
-$WEB_BASE    = 'https://www.siluzan.com'
+$INSTALL_CMD = 'npm install -g siluzan-tso-cli@beta'
+$WEB_BASE    = 'https://www-ci.siluzan.com'
 # -- Constants ----------------------------------------------------------------
 $NODE_MAJOR_MIN    = 18

package/dist/skill/scripts/install.sh CHANGED Viewed

@@ -9,11 +9,11 @@ set -euo pipefail
 # -- Package info (injected at build time) ------------------------------------
 readonly PKG_NAME="siluzan-tso-cli"
 # PKG_VERSION 锁定到与本脚本同批构建产物一致的版本，避免与 dist/skill 错位
-readonly PKG_VERSION="1.1.24"
+readonly PKG_VERSION="1.1.25-beta.2"
 readonly CLI_BIN="siluzan-tso"
 readonly SKILL_LABEL="Siluzan TSO"
-readonly INSTALL_CMD="npm install -g siluzan-tso-cli"
-readonly WEB_BASE="https://www.siluzan.com"
+readonly INSTALL_CMD="npm install -g siluzan-tso-cli@beta"
+readonly WEB_BASE="https://www-ci.siluzan.com"
 # -- Constants ----------------------------------------------------------------
 readonly NODE_MAJOR_MIN=18

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "siluzan-tso-cli",
-  "version": "1.1.24",
+  "version": "1.1.25-beta.2",
   "description": "Siluzan 广告账户管理 CLI — 查询账户、余额、消耗数据，管理绑定关系与充值。",
   "keywords": [
     "ad-account",