Inicio Explorar Axuda
Iniciar sesión
18307996893
/
openclaw-voc-skill
2
2
Fork 0
Ficheiros Incidencias 0 Pull Requests 0 Wiki
Rama: master
Ramas Etiquetas
openclaw-voc-sk...
/
demo
/
report-factory
/
html-v2-demo-report.html

html-v2-demo-report.html 15 KB
Permalink Histórico Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268 
  1. <!doctype html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3. <head>
    4. 

  4. <meta charset="utf-8">
    5. 

  5. <meta name="viewport" content="width=device-width, initial-scale=1">
    6. 

  6. <title>VOC HTML v2 Demo Report</title>
    7. 

  7. <style>
    8. 

  8. :root{--brand:#2D9C5D;--accent:#D4A574;--blue:#0085CA;--rose:#FF4D8D;--purple:#8B5CF6;--orange:#FF8C42;--bg:#07130F;--panel:rgba(255,255,255,0.075);--line:rgba(255,255,255,0.14);--text:#F5F7F2;--muted:#AEB8B0;font-family:Inter,"Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}
    9. 

  9. *{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 10%,rgba(45,156,93,.24),transparent 28%),radial-gradient(circle at 80% 0,rgba(212,165,116,.2),transparent 24%),linear-gradient(135deg,#06100d,#0b1712 50%,#10120f);line-height:1.6}a{color:inherit;text-decoration:none}.top-nav{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:12px 28px;border-bottom:1px solid var(--line);background:rgba(7,19,15,.76);backdrop-filter:blur(18px)}.top-nav div{display:flex;gap:12px;flex-wrap:wrap}.top-nav a{font-size:12px;color:var(--muted)}main{width:min(1180px,calc(100% - 36px));margin:0 auto}.slide{min-height:100vh;padding:96px 0 72px;display:flex;flex-direction:column;justify-content:center}.cover{align-items:center;text-align:center}.cover-inner{width:min(920px,100%);padding:64px;border:1px solid var(--line);border-radius:32px;background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.045));box-shadow:0 24px 90px rgba(0,0,0,.32)}.cover h1{font-size:clamp(42px,8vw,92px);line-height:1.02;margin:22px 0;background:linear-gradient(90deg,#fff,var(--accent));-webkit-background-clip:text;color:transparent}.cover-subtitle{font-size:clamp(18px,2.2vw,28px);color:var(--muted);margin:0}.cover-meta,.cover-stats{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:28px}.cover-meta span,.cover-stat{border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:999px;padding:8px 14px}.cover-stat{min-width:150px;border-radius:18px}.cover-stat strong{display:block;font-size:24px;color:var(--accent)}.cover-stat span{font-size:12px;color:var(--muted)}.section-head{max-width:880px;margin-bottom:28px}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--tone);font-weight:800;letter-spacing:.18em;text-transform:uppercase;font-size:12px}.section-head h2{font-size:clamp(34px,5vw,62px);line-height:1.08;margin:10px 0}.section-head p{font-size:18px;color:var(--muted);margin:0}.slide-body{width:100%}.badge{display:inline-flex;align-items:center;border:1px solid color-mix(in srgb,var(--tone) 62%,transparent);background:color-mix(in srgb,var(--tone) 18%,transparent);color:#fff;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:700}.tag-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.metric-grid,.card-grid,.voc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.voc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-card,.glass-card,.voc-card,.matrix-cell,.decision-item{border:1px solid var(--line);background:var(--panel);border-radius:24px;padding:22px;box-shadow:0 18px 60px rgba(0,0,0,.18);backdrop-filter:blur(18px)}.metric-value{font-size:36px;font-weight:900;color:var(--accent);line-height:1}.metric-label{font-weight:800;margin-top:10px}.metric-card p,.glass-card p,.matrix-cell p,.decision-item p{color:var(--muted);margin:.5em 0 0}.glass-card h3,.matrix-cell h3,.decision-item h3{margin:14px 0 0;font-size:20px}.voc-card blockquote{margin:0;font-size:18px;color:#fff}.voc-card footer{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;color:var(--muted);font-size:12px}.bar-chart{display:grid;gap:16px}.bar-label{display:flex;justify-content:space-between;gap:20px;font-weight:700}.bar-track{height:13px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:8px}.bar-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--tone),color-mix(in srgb,var(--tone) 45%,#fff));box-shadow:0 0 22px color-mix(in srgb,var(--tone) 50%,transparent)}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:24px;background:var(--panel)}table{width:100%;border-collapse:collapse;min-width:720px}th,td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left}th{color:var(--accent);font-size:13px}tr:last-child td{border-bottom:0}.matrix-wrap{position:relative;padding:28px 34px 34px}.matrix-2x2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.matrix-cell{min-height:180px;border-color:color-mix(in srgb,var(--tone) 38%,var(--line))}.axis{color:var(--muted);font-size:12px;text-align:center}.axis-y{position:absolute;left:0;top:50%;transform:translateY(-50%) rotate(-90deg)}.axis-x{margin-top:12px}.decision-list{display:grid;gap:14px}.decision-item{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:flex-start}.decision-rank{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(135deg,var(--brand),var(--accent));font-weight:900}.decision-item small{display:block;margin-top:8px;color:var(--accent)}@media (max-width:900px){.metric-grid,.card-grid,.voc-grid,.matrix-2x2{grid-template-columns:1fr}.top-nav{position:static;align-items:flex-start;flex-direction:column}.cover-inner{padding:36px}.slide{padding:64px 0}}
    10. 

  10. </style>
    11. 

  11. </head>
    12. 

  12. <body>
    13. 

  13. <nav class="top-nav"><strong>voc-report-factory-demo</strong><div><a href="#summary">摘要</a><a href="#evidence">证据</a><a href="#opportunity">机会</a><a href="#action">行动</a></div></nav>
    14. 

  14. <main>
    15. 

  15. 

  16.     <section class="slide cover" id="cover">
    17. 

  17.       <div class="cover-inner">
    18. 

  18.         <span class="badge" style="--tone:var(--accent)">HTML v2</span>
    19. 

  19.         <h1>VOC HTML v2 Demo Report</h1>
    20. 

  20.         <p class="cover-subtitle">模板化组件库生成示例</p>
    21. 

  21.         <div class="cover-meta">
    22. 

  22.           <span>voc-report-factory-demo</span>
    23. 

  23.           <span>2026-04</span>
    24. 

  24.           <span>VOC Report Factory</span>
    25. 

  25.         </div>
    26. 

  26.         <div class="cover-stats">
    27. 

  27.     <div class="cover-stat">
    28. 

  28.       <strong>180</strong>
    29. 

  29.       <span>目标 VOC 样本</span>
    30. 

  30.     </div>
    31. 

  31.   
    32. 

  32.     <div class="cover-stat">
    33. 

  33.       <strong>8/8</strong>
    34. 

  34.       <span>H1-H8 覆盖</span>
    35. 

  35.     </div>
    36. 

  36.   
    37. 

  37.     <div class="cover-stat">
    38. 

  38.       <strong>3</strong>
    39. 

  39.       <span>平台关键词</span>
    40. 

  40.     </div>
    41. 

  41.   
    42. 

  42.     <div class="cover-stat">
    43. 

  43.       <strong>0</strong>
    44. 

  44.       <span>审计警告</span>
    45. 

  45.     </div>
    46. 

  46.   </div>
    47. 

  47.       </div>
    48. 

  48.     </section>
    49. 

  49.   
    50. 

  50. 

  51.     <section class="slide" id="summary" data-tone="green">
    52. 

  52.       
    53. 

  53.     <header class="section-head" style="--tone:var(--brand)">
    54. 

  54.       <div class="eyebrow">Chapter 01</div>
    55. 

  55.       <h2>执行摘要</h2>
    56. 

  56.       <p>用统一组件表达关键数字、核心洞察和报告结论。</p>
    57. 

  57.     </header>
    58. 

  58.   
    59. 

  59.       <div class="slide-body"><div class="metric-grid">
    60. 

  60.     <article class="metric-card">
    61. 

  61.       <div class="metric-value">180</div>
    62. 

  62.       <div class="metric-label">目标 VOC 样本</div>
    63. 

  63.       <p>来自采集矩阵 targetCount</p>
    64. 

  64.     </article>
    65. 

  65.   
    66. 

  66.     <article class="metric-card">
    67. 

  67.       <div class="metric-value">8/8</div>
    68. 

  68.       <div class="metric-label">H1-H8 覆盖</div>
    69. 

  69.       <p>每条假设至少 3 个关键词</p>
    70. 

  70.     </article>
    71. 

  71.   
    72. 

  72.     <article class="metric-card">
    73. 

  73.       <div class="metric-value">3</div>
    74. 

  74.       <div class="metric-label">平台关键词</div>
    75. 

  75.       <p>小红书课程 demo</p>
    76. 

  76.     </article>
    77. 

  77.   
    78. 

  78.     <article class="metric-card">
    79. 

  79.       <div class="metric-value">0</div>
    80. 

  80.       <div class="metric-label">审计警告</div>
    81. 

  81.       <p>可进入采集执行</p>
    82. 

  82.     </article>
    83. 

  83.   </div><div class="card-grid">
    84. 

  84.     <article class="glass-card">
    85. 

  85.       <span class="badge" style="--tone:var(--brand)">H1</span>
    86. 

  86.       <h3>品类机会明确</h3>
    87. 

  87.       <p>用户搜索和讨论集中在怎么选、是否有效和安全边界。</p>
    88. 

  88.     </article>
    89. 

  89.   
    90. 

  90.     <article class="glass-card">
    91. 

  91.       <span class="badge" style="--tone:var(--blue)">H2</span>
    92. 

  92.       <h3>场景触发强</h3>
    93. 

  93.       <p>腹胀、便秘、儿童肠胃和日常调理是主要触发场景。</p>
    94. 

  94.     </article>
    95. 

  95.   
    96. 

  96.     <article class="glass-card">
    97. 

  97.       <span class="badge" style="--tone:var(--purple)">H7</span>
    98. 

  98.       <h3>话术需要降噪</h3>
    99. 

  99.       <p>用户更接受具体场景解释，而不是泛泛功效承诺。</p>
    100. 

  100.     </article>
    101. 

  101.   </div></div>
    102. 

  102.     </section>
    103. 

  103.   
    104. 

  104. 

  105.     <section class="slide" id="evidence" data-tone="blue">
    106. 

  106.       
    107. 

  107.     <header class="section-head" style="--tone:var(--blue)">
    108. 

  108.       <div class="eyebrow">Chapter 02</div>
    109. 

  109.       <h2>VOC 证据</h2>
    110. 

  110.       <p>每个关键判断都应该能回到用户原声、平台、关键词和批次。</p>
    111. 

  111.     </header>
    112. 

  112.   
    113. 

  113.       <div class="slide-body"><div class="voc-grid">
    114. 

  114.     <article class="voc-card">
    115. 

  115.       <blockquote>给孩子吃之前最怕配方看不懂，想知道到底适不适合。</blockquote>
    116. 

  116.       <footer>
    117. 

  117.         <span>课程样例用户 A</span>
    118. 

  118.         <span>小红书</span>
    119. 

  119.         <span>18 赞</span>
    120. 

  120.       </footer>
    121. 

  121.       <div class="tag-list"><span class="badge" style="--tone:var(--blue)">安全</span><span class="badge" style="--tone:var(--blue)">配方</span></div>
    122. 

  122.     </article>
    123. 

  123.   
    124. 

  124.     <article class="voc-card">
    125. 

  125.       <blockquote>腹胀的时候才想起来买，最好能说清楚多久有感觉。</blockquote>
    126. 

  126.       <footer>
    127. 

  127.         <span>课程样例用户 B</span>
    128. 

  128.         <span>小红书</span>
    129. 

  129.         <span>12 赞</span>
    130. 

  130.       </footer>
    131. 

  131.       <div class="tag-list"><span class="badge" style="--tone:var(--blue)">场景</span><span class="badge" style="--tone:var(--blue)">见效</span></div>
    132. 

  132.     </article>
    133. 

  133.   
    134. 

  134.     <article class="voc-card">
    135. 

  135.       <blockquote>测评太多了，看来看去还是不知道哪个适合自己。</blockquote>
    136. 

  136.       <footer>
    137. 

  137.         <span>课程样例用户 C</span>
    138. 

  138.         <span>小红书</span>
    139. 

  139.         <span>25 赞</span>
    140. 

  140.       </footer>
    141. 

  141.       <div class="tag-list"><span class="badge" style="--tone:var(--blue)">测评</span><span class="badge" style="--tone:var(--blue)">选择困难</span></div>
    142. 

  142.     </article>
    143. 

  143.   </div>
    144. 

  144.     <div class="table-wrap">
    145. 

  145.       <table>
    146. 

  146.         <thead><tr><th>结论</th><th>证据</th><th>来源</th><th>置信度</th></tr></thead>
    147. 

  147.         <tbody><tr><td>用户需要明确选择标准</td><td>怎么选、测评、配方类词反复出现</td><td>关键词矩阵</td><td>中</td></tr><tr><td>安全与体感边界要写清楚</td><td>评论会追问适合人群和见效周期</td><td>VOC 原声</td><td>中</td></tr><tr><td>内容应从场景切入</td><td>痛点场景词比纯品类词更利于收集原声</td><td>采集计划</td><td>高</td></tr></tbody>
    148. 

  148.       </table>
    149. 

  149.     </div>
    150. 

  150.   </div>
    151. 

  151.     </section>
    152. 

  152.   
    153. 

  153. 

  154.     <section class="slide" id="opportunity" data-tone="gold">
    155. 

  155.       
    156. 

  156.     <header class="section-head" style="--tone:var(--accent)">
    157. 

  157.       <div class="eyebrow">Chapter 03</div>
    158. 

  158.       <h2>机会判断</h2>
    159. 

  159.       <p>用矩阵、表格和条形图表达机会优先级。</p>
    160. 

  160.     </header>
    161. 

  161.   
    162. 

  162.       <div class="slide-body"><div class="bar-chart">
    163. 

  163.       <div class="bar-row">
    164. 

  164.         <div class="bar-label"><span>使用场景</span><strong>42%</strong></div>
    165. 

  165.         <div class="bar-track"><div class="bar-fill" style="width:100%;--tone:var(--brand)"></div></div>
    166. 

  166.       </div>
    167. 

  167.     
    168. 

  168.       <div class="bar-row">
    169. 

  169.         <div class="bar-label"><span>购买决策</span><strong>31%</strong></div>
    170. 

  170.         <div class="bar-track"><div class="bar-fill" style="width:73.80952380952381%;--tone:var(--blue)"></div></div>
    171. 

  171.       </div>
    172. 

  172.     
    173. 

  173.       <div class="bar-row">
    174. 

  174.         <div class="bar-label"><span>竞品参照</span><strong>18%</strong></div>
    175. 

  175.         <div class="bar-track"><div class="bar-fill" style="width:42.857142857142854%;--tone:var(--accent)"></div></div>
    176. 

  176.       </div>
    177. 

  177.     
    178. 

  178.       <div class="bar-row">
    179. 

  179.         <div class="bar-label"><span>价格规格</span><strong>9%</strong></div>
    180. 

  180.         <div class="bar-track"><div class="bar-fill" style="width:21.428571428571427%;--tone:var(--rose)"></div></div>
    181. 

  181.       </div>
    182. 

  182.     </div>
    183. 

  183.     <div class="matrix-wrap">
    184. 

  184.       <div class="axis axis-y">执行难度</div>
    185. 

  185.       <div class="matrix-2x2">
    186. 

  186.         
    187. 

  187.           <article class="matrix-cell" style="--tone:var(--brand)">
    188. 

  188.             <span class="badge" style="--tone:var(--brand)">P0</span>
    189. 

  189.             <h3>优先采集</h3>
    190. 

  190.             <p>怎么选、腹胀便秘、测评类关键词。</p>
    191. 

  191.           </article>
    192. 

  192.         
    193. 

  193.           <article class="matrix-cell" style="--tone:var(--accent)">
    194. 

  194.             <span class="badge" style="--tone:var(--accent)">P1</span>
    195. 

  195.             <h3>放大验证</h3>
    196. 

  196.             <p>价格、规格、达人推荐和竞品对比。</p>
    197. 

  197.           </article>
    198. 

  198.         
    199. 

  199.           <article class="matrix-cell" style="--tone:var(--blue)">
    200. 

  200.             <span class="badge" style="--tone:var(--blue)">P2</span>
    201. 

  201.             <h3>观察补采</h3>
    202. 

  202.             <p>复购、推荐、转化等后链路信号。</p>
    203. 

  203.           </article>
    204. 

  204.         
    205. 

  205.           <article class="matrix-cell" style="--tone:var(--rose)">
    206. 

  206.             <span class="badge" style="--tone:var(--rose)">暂缓</span>
    207. 

  207.             <h3>低信号区域</h3>
    208. 

  208.             <p>广告噪声高且用户原声不足的关键词。</p>
    209. 

  209.           </article>
    210. 

  210.         
    211. 

  211.       </div>
    212. 

  212.       <div class="axis axis-x">机会确定性</div>
    213. 

  213.     </div>
    214. 

  214.   
    215. 

  215.     <div class="table-wrap">
    216. 

  216.       <table>
    217. 

  217.         <thead><tr><th>假设</th><th>关键词数</th><th>状态</th><th>备注</th></tr></thead>
    218. 

  218.         <tbody><tr><td>H1</td><td>3</td><td>通过</td><td>品类机会</td></tr><tr><td>H2</td><td>3</td><td>通过</td><td>用户需求</td></tr><tr><td>H3</td><td>3</td><td>通过</td><td>产品缺口</td></tr><tr><td>H8</td><td>3</td><td>通过</td><td>增长行动</td></tr></tbody>
    219. 

  219.       </table>
    220. 

  220.     </div>
    221. 

  221.   </div>
    222. 

  222.     </section>
    223. 

  223.   
    224. 

  224. 

  225.     <section class="slide" id="action" data-tone="orange">
    226. 

  226.       
    227. 

  227.     <header class="section-head" style="--tone:var(--orange)">
    228. 

  228.       <div class="eyebrow">Chapter 04</div>
    229. 

  229.       <h2>行动计划</h2>
    230. 

  230.       <p>把 VOC 发现转成 P0/P1/P2 的下一步验证动作。</p>
    231. 

  231.     </header>
    232. 

  232.   
    233. 

  233.       <div class="slide-body"><div class="decision-list">
    234. 

  234.     <article class="decision-item">
    235. 

  235.       <div class="decision-rank">P0</div>
    236. 

  236.       <div>
    237. 

  237.         <h3>先跑 3 个核心关键词</h3>
    238. 

  238.         <p>儿童益生菌怎么选、益生菌腹胀便秘、冻干益生菌测评。</p>
    239. 

  239.         <small>采集负责人 · 每词 10 条有效评论</small>
    240. 

  240.       </div>
    241. 

  241.     </article>
    242. 

  242.   
    243. 

  243.     <article class="decision-item">
    244. 

  244.       <div class="decision-rank">P1</div>
    245. 

  245.       <div>
    246. 

  246.         <h3>扩展 H1-H8 覆盖词</h3>
    247. 

  247.         <p>使用 collection-matrix-builder 的 expand 模式补齐覆盖。</p>
    248. 

  248.         <small>分析负责人 · warnings = 0</small>
    249. 

  249.       </div>
    250. 

  250.     </article>
    251. 

  251.   
    252. 

  252.     <article class="decision-item">
    253. 

  253.       <div class="decision-rank">P2</div>
    254. 

  254.       <div>
    255. 

  255.         <h3>生成 mini report 并审计</h3>
    256. 

  256.         <p>用 voc-report-auditor 检查样本量、假设覆盖和证据回溯。</p>
    257. 

  257.         <small>交付负责人 · 严重问题 = 0</small>
    258. 

  258.       </div>
    259. 

  259.     </article>
    260. 

  260.   </div></div>
    261. 

  261.     </section>
    262. 

  262.   
    263. 

  263. </main>
    264. 

  264. <script>
    265. 

  265. document.querySelectorAll('a[href^="#"]').forEach(function(anchor){anchor.addEventListener('click',function(event){var target=document.querySelector(anchor.getAttribute('href'));if(target){event.preventDefault();target.scrollIntoView({behavior:'smooth'});}});});
    266. 

  266. </script>
    267. 

  267. </body>
    268. 

  268. </html>
    269.