Главная Обзор Помощь
Вход
14737537258
/
shuhua-majiyong_VOC
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Ветка: master
Ветки Метки
shuhua-majiyong...
/
scripts
/
gen-raw-data-pages.js

gen-raw-data-pages.js 40 KB
Постоянная ссылка История Исходник

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720 
  1. /**
    2. 

  2.  * 原始 Excel 宣发数据 → 漂亮 HTML 单页
    3. 

  3.  * 输入:
    4. 

  4.  *   shuhua/舒华跑步机四月宣发报备KOC发布数据.xlsx
    5. 

  5.  *   majiyong/【新鲜菜项目】马记永4月宣发数据汇总(1).xlsx
    6. 

  6.  * 输出:
    7. 

  7.  *   shuhua/shuhua-raw-data.html
    8. 

  8.  *   majiyong/majiyong-raw-data.html
    9. 

  9.  *
    10. 

  10.  * 视觉风格：与 *-closing-report.html 一致（暗色 + ECharts）
    11. 

  11.  */
    12. 

  12. const fs = require('fs');
    13. 

  13. const path = require('path');
    14. 

  14. const XLSX = require('xlsx');
    15. 

  15. 

  16. const ROOT = path.resolve(__dirname, '..');
    17. 

  17. const SHUHUA_XLSX = path.join(ROOT, 'shuhua', '舒华跑步机四月宣发报备KOC发布数据.xlsx');
    18. 

  18. const MAJI_XLSX = path.join(ROOT, 'majiyong', '【新鲜菜项目】马记永4月宣发数据汇总(1).xlsx');
    19. 

  19. const SHUHUA_OUT = path.join(ROOT, 'shuhua', 'shuhua-raw-data.html');
    20. 

  20. const MAJI_OUT = path.join(ROOT, 'majiyong', 'majiyong-raw-data.html');
    21. 

  21. 

  22. // ============== utils ==============
    23. 

  23. const num = (v) => {
    24. 

  24.     const n = Number(v);
    25. 

  25.     return Number.isFinite(n) ? n : 0;
    26. 

  26. };
    27. 

  27. const esc = (s) => String(s == null ? '' : s)
    28. 

  28.     .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
    29. 

  29.     .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
    30. 

  30. const fmt = (n) => {
    31. 

  31.     n = Number(n) || 0;
    32. 

  32.     if (Math.abs(n) >= 1e8) return (n / 1e8).toFixed(2) + ' 亿';
    33. 

  33.     if (Math.abs(n) >= 1e4) return (n / 1e4).toFixed(2) + ' 万';
    34. 

  34.     return n.toLocaleString('zh-CN', { maximumFractionDigits: 2 });
    35. 

  35. };
    36. 

  36. const fmtInt = (n) => (Number(n) || 0).toLocaleString('zh-CN', { maximumFractionDigits: 0 });
    37. 

  37. const fmtMoney = (n) => '¥' + (Number(n) || 0).toLocaleString('zh-CN', { maximumFractionDigits: 0 });
    38. 

  38. // excel serial → yyyy-MM-dd
    39. 

  39. const excelDate = (v) => {
    40. 

  40.     if (!v) return '';
    41. 

  41.     if (typeof v === 'string' && /\d{4}-\d{1,2}-\d{1,2}/.test(v)) return v;
    42. 

  42.     const n = Number(v);
    43. 

  43.     if (!Number.isFinite(n) || n < 30000 || n > 80000) return String(v);
    44. 

  44.     const ms = (n - 25569) * 86400 * 1000;
    45. 

  45.     const d = new Date(ms);
    46. 

  46.     const Y = d.getUTCFullYear();
    47. 

  47.     const M = String(d.getUTCMonth() + 1).padStart(2, '0');
    48. 

  48.     const D = String(d.getUTCDate()).padStart(2, '0');
    49. 

  49.     return `${Y}-${M}-${D}`;
    50. 

  50. };
    51. 

  51. const safeHref = (u) => {
    52. 

  52.     const s = String(u || '').trim();
    53. 

  53.     if (!s || !/^https?:\/\//i.test(s)) return '';
    54. 

  54.     return s;
    55. 

  55. };
    56. 

  56. 

  57. // ============== shared CSS / shell ==============
    58. 

  58. const COMMON_HEAD = (title) => `<!DOCTYPE html>
    59. 

  59. <html lang="zh-CN">
    60. 

  60. <head>
    61. 

  61. <meta charset="UTF-8">
    62. 

  62. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    63. 

  63. <title>${esc(title)}</title>
    64. 

  64. <link rel="preconnect" href="https://fonts.googleapis.com">
    65. 

  65. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    66. 

  66. <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@500;700;800&display=swap" rel="stylesheet">
    67. 

  67. <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    68. 

  68. <style>
    69. 

  69. :root {
    70. 

  70.   --bg-0:#0A0A0A; --bg-1:#111; --bg-2:#1A1A1A; --bg-3:#252525;
    71. 

  71.   --border:rgba(255,255,255,0.08); --border-strong:rgba(255,255,255,0.16);
    72. 

  72.   --text-1:#F5F5F5; --text-2:#A8A8A8; --text-3:#6B6B6B;
    73. 

  73.   --amber:#F5A623; --green:#00DC82; --purple:#8B5CF6; --rose:#FF4D8D; --blue:#3B82F6; --red:#EF4444;
    74. 

  74.   --font-head:'Space Grotesk','Inter',-apple-system,'PingFang SC',sans-serif;
    75. 

  75.   --font-body:'Inter',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
    76. 

  76.   --font-mono:'JetBrains Mono',ui-monospace,monospace;
    77. 

  77. }
    78. 

  78. *{margin:0;padding:0;box-sizing:border-box}
    79. 

  79. html{scroll-behavior:smooth}
    80. 

  80. body{font-family:var(--font-body);background:var(--bg-0);color:var(--text-1);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
    81. 

  81. body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
    82. 

  82.   background:radial-gradient(ellipse 900px 700px at 20% 25%,rgba(245,166,35,0.08),transparent 60%),
    83. 

  83.              radial-gradient(ellipse 800px 600px at 80% 75%,rgba(139,92,246,0.06),transparent 60%)}
    84. 

  84. a{color:var(--amber);text-decoration:none}
    85. 

  85. a:hover{text-decoration:underline}
    86. 

  86. ::selection{background:var(--amber);color:#000}
    87. 

  87. 

  88. .wrap{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:clamp(40px,7vw,80px) clamp(20px,5vw,60px)}
    89. 

  89. .hero{padding-bottom:48px;border-bottom:1px solid var(--border);margin-bottom:48px}
    90. 

  90. .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);font-weight:500;margin-bottom:18px}
    91. 

  91. .eyebrow::before{content:'';display:inline-block;width:24px;height:1px;background:var(--amber)}
    92. 

  92. .h0{font-family:var(--font-head);font-weight:900;letter-spacing:-.04em;line-height:.98;font-size:clamp(2.4rem,6vw,4.6rem)}
    93. 

  93. .lead{color:var(--text-2);font-size:1.05rem;max-width:780px;margin-top:18px;line-height:1.8}
    94. 

  94. .meta-row{display:flex;gap:32px;margin-top:28px;flex-wrap:wrap}
    95. 

  95. .meta-item{font-family:var(--font-mono);font-size:.82rem;color:var(--text-2)}
    96. 

  96. .meta-item strong{color:var(--text-1);font-weight:600;display:block;margin-top:4px;font-size:1.1rem}
    97. 

  97. 

  98. section.block{margin-bottom:64px}
    99. 

  99. .section-head{display:flex;align-items:baseline;gap:16px;margin-bottom:24px;flex-wrap:wrap}
    100. 

  100. .section-num{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.25em;color:var(--text-3)}
    101. 

  101. .h1{font-family:var(--font-head);font-weight:800;letter-spacing:-.02em;line-height:1.1;font-size:clamp(1.6rem,3vw,2.2rem)}
    102. 

  102. .sub{color:var(--text-2);max-width:880px;margin-bottom:24px}
    103. 

  103. 

  104. .grid{display:grid;gap:18px}
    105. 

  105. .grid-2{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
    106. 

  106. .grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
    107. 

  107. .grid-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
    108. 

  108. .grid-5{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
    109. 

  109. 

  110. .metric{background:var(--bg-1);border:1px solid var(--border);border-radius:12px;padding:22px;position:relative;overflow:hidden;min-width:0}
    111. 

  111. .metric::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--amber),transparent);opacity:.6}
    112. 

  112. .metric.green::before{background:linear-gradient(90deg,var(--green),transparent)}
    113. 

  113. .metric.blue::before{background:linear-gradient(90deg,var(--blue),transparent)}
    114. 

  114. .metric.rose::before{background:linear-gradient(90deg,var(--rose),transparent)}
    115. 

  115. .metric.purple::before{background:linear-gradient(90deg,var(--purple),transparent)}
    116. 

  116. .metric-label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px}
    117. 

  117. .metric-value{font-family:var(--font-head);font-weight:800;font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.03em;line-height:1.05;word-break:break-all}
    118. 

  118. .metric-unit{font-family:var(--font-mono);font-size:.78rem;color:var(--amber);font-weight:500;margin-left:4px}
    119. 

  119. .metric-sub{margin-top:12px;font-size:.78rem;color:var(--text-2);line-height:1.5}
    120. 

  120. 

  121. .card{background:linear-gradient(180deg,rgba(255,255,255,.025) 0%,rgba(255,255,255,.005) 100%),var(--bg-1);border:1px solid var(--border);border-radius:12px;padding:24px}
    122. 

  122. .chart{width:100%;height:340px}
    123. 

  123. .chart-tall{width:100%;height:440px}
    124. 

  124. 

  125. .controls{display:flex;gap:12px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
    126. 

  126. .controls input,.controls select{background:var(--bg-2);color:var(--text-1);border:1px solid var(--border);border-radius:8px;padding:9px 12px;font-family:var(--font-body);font-size:.88rem;min-width:160px}
    127. 

  127. .controls input:focus,.controls select:focus{outline:none;border-color:var(--amber)}
    128. 

  128. .controls .hint{color:var(--text-3);font-size:.78rem;font-family:var(--font-mono)}
    129. 

  129. 

  130. .scroll-table{max-height:78vh;overflow:auto;border:1px solid var(--border);border-radius:12px;background:var(--bg-1)}
    131. 

  131. .scroll-table::-webkit-scrollbar{width:8px;height:8px}
    132. 

  132. .scroll-table::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:4px}
    133. 

  133. table{width:100%;border-collapse:collapse;font-size:.84rem}
    134. 

  134. th,td{padding:9px 11px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
    135. 

  135. th{color:var(--text-2);font-weight:500;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;background:var(--bg-2);position:sticky;top:0;z-index:2;cursor:pointer;user-select:none}
    136. 

  136. th.num,td.num{text-align:right;font-family:var(--font-mono)}
    137. 

  137. th .arr{color:var(--text-3);margin-left:4px;font-size:.7rem}
    138. 

  138. th.active{color:var(--amber)}
    139. 

  139. tr:hover td{background:rgba(255,255,255,.025)}
    140. 

  140. td.link a{color:var(--amber);font-family:var(--font-mono);font-size:.78rem}
    141. 

  141. .tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.7rem;font-family:var(--font-mono);background:rgba(245,166,35,.1);color:var(--amber);border:1px solid rgba(245,166,35,.22)}
    142. 

  142. .tag.g{background:rgba(0,220,130,.08);color:var(--green);border-color:rgba(0,220,130,.22)}
    143. 

  143. .tag.b{background:rgba(59,130,246,.08);color:var(--blue);border-color:rgba(59,130,246,.22)}
    144. 

  144. .tag.r{background:rgba(255,77,141,.08);color:var(--rose);border-color:rgba(255,77,141,.22)}
    145. 

  145. .tag.p{background:rgba(139,92,246,.08);color:var(--purple);border-color:rgba(139,92,246,.22)}
    146. 

  146. 

  147. footer{margin-top:80px;padding-top:32px;border-top:1px solid var(--border);color:var(--text-3);font-size:.8rem;font-family:var(--font-mono);text-align:center}
    148. 

  148. </style>
    149. 

  149. </head><body><div class="wrap">`;
    150. 

  150. 

  151. const COMMON_FOOT = (footText) => `
    152. 

  152. <footer>${esc(footText)}</footer>
    153. 

  153. </div>
    154. 

  154. <script>
    155. 

  155. // 通用表格排序 + 搜索
    156. 

  156. function bindTable(tableId){
    157. 

  157.   const tbl=document.getElementById(tableId); if(!tbl) return;
    158. 

  158.   const ths=tbl.querySelectorAll('thead th'); const tbody=tbl.querySelector('tbody');
    159. 

  159.   const rows=Array.from(tbody.querySelectorAll('tr'));
    160. 

  160.   let sortKey=-1, sortDir=1;
    161. 

  161.   ths.forEach((th,idx)=>{
    162. 

  162.     th.addEventListener('click',()=>{
    163. 

  163.       const isNum=th.classList.contains('num');
    164. 

  164.       if(sortKey===idx) sortDir=-sortDir; else { sortKey=idx; sortDir=1; }
    165. 

  165.       ths.forEach(t=>{ t.classList.remove('active'); const a=t.querySelector('.arr'); if(a)a.textContent=''; });
    166. 

  166.       th.classList.add('active');
    167. 

  167.       const arr=th.querySelector('.arr'); if(arr) arr.textContent=sortDir>0?'▲':'▼';
    168. 

  168.       rows.sort((a,b)=>{
    169. 

  169.         const av=a.children[idx].dataset.v ?? a.children[idx].textContent.trim();
    170. 

  170.         const bv=b.children[idx].dataset.v ?? b.children[idx].textContent.trim();
    171. 

  171.         if(isNum){ return (Number(av)-Number(bv))*sortDir; }
    172. 

  172.         return String(av).localeCompare(String(bv),'zh')*sortDir;
    173. 

  173.       });
    174. 

  174.       rows.forEach(r=>tbody.appendChild(r));
    175. 

  175.     });
    176. 

  176.   });
    177. 

  177.   return rows;
    178. 

  178. }
    179. 

  179. function bindFilter(tableId,inputId,selectIds){
    180. 

  180.   const tbl=document.getElementById(tableId); if(!tbl) return;
    181. 

  181.   const tbody=tbl.querySelector('tbody');
    182. 

  182.   const rows=Array.from(tbody.querySelectorAll('tr'));
    183. 

  183.   const inp=document.getElementById(inputId);
    184. 

  184.   const sels=(selectIds||[]).map(id=>document.getElementById(id)).filter(Boolean);
    185. 

  185.   function apply(){
    186. 

  186.     const q=(inp&&inp.value||'').trim().toLowerCase();
    187. 

  187.     const filters=sels.map(s=>({col:Number(s.dataset.col),val:s.value}));
    188. 

  188.     let n=0;
    189. 

  189.     rows.forEach(r=>{
    190. 

  190.       let ok=true;
    191. 

  191.       if(q){ ok=r.textContent.toLowerCase().includes(q); }
    192. 

  192.       if(ok){
    193. 

  193.         for(const f of filters){
    194. 

  194.           if(f.val && r.children[f.col] && r.children[f.col].textContent.trim()!==f.val){ ok=false; break; }
    195. 

  195.         }
    196. 

  196.       }
    197. 

  197.       r.style.display=ok?'':'none';
    198. 

  198.       if(ok) n++;
    199. 

  199.     });
    200. 

  200.     const cnt=document.getElementById(tableId+'-cnt'); if(cnt) cnt.textContent=n+' / '+rows.length;
    201. 

  201.   }
    202. 

  202.   if(inp) inp.addEventListener('input',apply);
    203. 

  203.   sels.forEach(s=>s.addEventListener('change',apply));
    204. 

  204.   apply();
    205. 

  205. }
    206. 

  206. </script>
    207. 

  207. </body></html>`;
    208. 

  208. 

  209. // ============== ECharts options ==============
    210. 

  210. const echartsBaseTheme = `
    211. 

  211.   textStyle:{color:'#A8A8A8',fontFamily:'Inter,PingFang SC'},
    212. 

  212.   legend:{textStyle:{color:'#A8A8A8'}},
    213. 

  213.   tooltip:{backgroundColor:'#1A1A1A',borderColor:'rgba(255,255,255,0.1)',textStyle:{color:'#F5F5F5'}},
    214. 

  214.   grid:{left:60,right:30,top:50,bottom:50},
    215. 

  215.   xAxis:{axisLine:{lineStyle:{color:'rgba(255,255,255,0.1)'}},axisLabel:{color:'#A8A8A8',fontSize:11},splitLine:{lineStyle:{color:'rgba(255,255,255,0.04)'}}},
    216. 

  216.   yAxis:{axisLine:{lineStyle:{color:'rgba(255,255,255,0.1)'}},axisLabel:{color:'#A8A8A8',fontSize:11},splitLine:{lineStyle:{color:'rgba(255,255,255,0.04)'}}}
    217. 

  217. `;
    218. 

  218. 

  219. // ============== SHUHUA builder ==============
    220. 

  220. function buildShuhua() {
    221. 

  221.     const wb = XLSX.readFile(SHUHUA_XLSX);
    222. 

  222.     const sheet = wb.Sheets[wb.SheetNames[0]];
    223. 

  223.     const rows = XLSX.utils.sheet_to_json(sheet, { defval: '' });
    224. 

  224. 

  225.     const items = rows.map((r) => ({
    226. 

  226.         idx: num(r['序号']),
    227. 

  227.         type: String(r['类型'] || '').trim(),
    228. 

  228.         name: String(r['名称'] || '').trim(),
    229. 

  229.         homepage: String(r['主页链接'] || '').trim(),
    230. 

  230.         accountId: String(r['账号ID'] || '').trim(),
    231. 

  231.         followers: num(r['粉丝']),
    232. 

  232.         liked: num(r['赞藏']),
    233. 

  233.         imgPrice: num(r['图文']),
    234. 

  234.         imgOrderPrice: num(r['图文下单价']),
    235. 

  235.         textPrice: num(r['写文']),
    236. 

  236.         priceTotal: num(r['合计含税直发价格']),
    237. 

  237.         publishDate: excelDate(r['发布时间']),
    238. 

  238.         contentType: String(r['内容类型'] || '').trim() || '未分类',
    239. 

  239.         publishLink: String(r['发布链接'] || '').trim(),
    240. 

  240.         impressions: num(r['曝光量']),
    241. 

  241.         reads: num(r['阅读量']),
    242. 

  242.         likes: num(r['点赞']),
    243. 

  243.         collects: num(r['收藏']),
    244. 

  244.         comments: num(r['评论']),
    245. 

  245.         engagement: num(r['互动总量']),
    246. 

  246.     }));
    247. 

  247. 

  248.     const sum = items.reduce((a, r) => ({
    249. 

  249.         spend: a.spend + r.priceTotal,
    250. 

  250.         imp: a.imp + r.impressions,
    251. 

  251.         reads: a.reads + r.reads,
    252. 

  252.         likes: a.likes + r.likes,
    253. 

  253.         collects: a.collects + r.collects,
    254. 

  254.         comments: a.comments + r.comments,
    255. 

  255.         eng: a.eng + r.engagement,
    256. 

  256.         followers: a.followers + r.followers,
    257. 

  257.     }), { spend: 0, imp: 0, reads: 0, likes: 0, collects: 0, comments: 0, eng: 0, followers: 0 });
    258. 

  258.     const total = {
    259. 

  259.         kocs: items.length,
    260. 

  260.         ...sum,
    261. 

  261.         engRate: sum.reads ? (sum.eng / sum.reads * 100) : 0,
    262. 

  262.         cpe: sum.eng ? (sum.spend / sum.eng) : 0,
    263. 

  263.         cpm: sum.imp ? (sum.spend * 1000 / sum.imp) : 0,
    264. 

  264.         avgFans: items.length ? Math.round(sum.followers / items.length) : 0,
    265. 

  265.     };
    266. 

  266. 

  267.     // 内容类型聚合
    268. 

  268.     const byCt = {};
    269. 

  269.     for (const r of items) {
    270. 

  270.         const k = r.contentType || '未分类';
    271. 

  271.         if (!byCt[k]) byCt[k] = { count: 0, eng: 0, reads: 0, spend: 0 };
    272. 

  272.         byCt[k].count++;
    273. 

  273.         byCt[k].eng += r.engagement;
    274. 

  274.         byCt[k].reads += r.reads;
    275. 

  275.         byCt[k].spend += r.priceTotal;
    276. 

  276.     }
    277. 

  277.     const ctStats = Object.entries(byCt).map(([k, v]) => ({ name: k, ...v })).sort((a, b) => b.eng - a.eng);
    278. 

  278. 

  279.     // 类型聚合（达人级别）
    280. 

  280.     const byTp = {};
    281. 

  281.     for (const r of items) {
    282. 

  282.         const k = r.type || '未分类';
    283. 

  283.         if (!byTp[k]) byTp[k] = { count: 0, eng: 0, spend: 0 };
    284. 

  284.         byTp[k].count++;
    285. 

  285.         byTp[k].eng += r.engagement;
    286. 

  286.         byTp[k].spend += r.priceTotal;
    287. 

  287.     }
    288. 

  288.     const tpStats = Object.entries(byTp).map(([k, v]) => ({ name: k, ...v }));
    289. 

  289. 

  290.     const ctOptions = [...new Set(items.map(r => r.contentType))].filter(Boolean).sort();
    291. 

  291.     const tpOptions = [...new Set(items.map(r => r.type))].filter(Boolean).sort();
    292. 

  292. 

  293.     const tableRows = items.slice().sort((a, b) => b.engagement - a.engagement).map((r) => {
    294. 

  294.         const href = safeHref(r.publishLink);
    295. 

  295.         const homeHref = safeHref(r.homepage);
    296. 

  296.         return `<tr>
    297. 

  297.       <td data-v="${r.idx}">${r.idx}</td>
    298. 

  298.       <td><span class="tag b">${esc(r.type)}</span></td>
    299. 

  299.       <td>${homeHref ? `<a href="${esc(homeHref)}" target="_blank">${esc(r.name)}</a>` : esc(r.name)}</td>
    300. 

  300.       <td><span class="tag">${esc(r.contentType)}</span></td>
    301. 

  301.       <td>${esc(r.publishDate)}</td>
    302. 

  302.       <td class="num" data-v="${r.followers}">${fmtInt(r.followers)}</td>
    303. 

  303.       <td class="num" data-v="${r.liked}">${fmtInt(r.liked)}</td>
    304. 

  304.       <td class="num" data-v="${r.priceTotal}">${fmtMoney(r.priceTotal)}</td>
    305. 

  305.       <td class="num" data-v="${r.impressions}">${fmtInt(r.impressions)}</td>
    306. 

  306.       <td class="num" data-v="${r.reads}">${fmtInt(r.reads)}</td>
    307. 

  307.       <td class="num" data-v="${r.likes}">${fmtInt(r.likes)}</td>
    308. 

  308.       <td class="num" data-v="${r.collects}">${fmtInt(r.collects)}</td>
    309. 

  309.       <td class="num" data-v="${r.comments}">${fmtInt(r.comments)}</td>
    310. 

  310.       <td class="num" data-v="${r.engagement}"><strong style="color:var(--amber)">${fmtInt(r.engagement)}</strong></td>
    311. 

  311.       <td class="link">${href ? `<a href="${esc(href)}" target="_blank">打开</a>` : '<span style="color:var(--text-3)">—</span>'}</td>
    312. 

  312.     </tr>`;
    313. 

  313.     }).join('');
    314. 

  314. 

  315.     const scatterData = JSON.stringify(items.map(r => [r.followers, r.engagement, r.name, r.contentType]));
    316. 

  316.     const ctNames = JSON.stringify(ctStats.map(x => x.name));
    317. 

  317.     const ctEng = JSON.stringify(ctStats.map(x => x.eng));
    318. 

  318.     const ctCnt = JSON.stringify(ctStats.map(x => x.count));
    319. 

  319.     const tpPie = JSON.stringify(tpStats.map(x => ({ name: x.name, value: x.count })));
    320. 

  320. 

  321.     const html = COMMON_HEAD('舒华跑步机 · 四月 KOC 宣发原始数据') + `
    322. 

  322. <section class="hero">
    323. 

  323.   <div class="eyebrow">SHUHUA · APRIL 2025 · RAW DATA</div>
    324. 

  324.   <h1 class="h0">舒华跑步机<br/>四月 KOC 宣发 · 原始数据</h1>
    325. 

  325.   <p class="lead">数据源：<code style="color:var(--text-1)">舒华跑步机四月宣发报备KOC发布数据.xlsx</code>，共 <strong style="color:var(--amber)">${total.kocs}</strong> 位 KOC 达人。本页对原始 Excel 字段进行结构化重构，所有指标可即时筛选、排序、跳转原帖。</p>
    326. 

  326.   <div class="meta-row">
    327. 

  327.     <div class="meta-item">达人数<strong>${total.kocs}</strong></div>
    328. 

  328.     <div class="meta-item">总曝光<strong>${fmt(total.imp)}</strong></div>
    329. 

  329.     <div class="meta-item">总互动<strong>${fmt(total.eng)}</strong></div>
    330. 

  330.     <div class="meta-item">总投放<strong>${fmtMoney(total.spend)}</strong></div>
    331. 

  331.     <div class="meta-item">互动率<strong>${total.engRate.toFixed(2)}%</strong></div>
    332. 

  332.   </div>
    333. 

  333. </section>
    334. 

  334. 

  335. <section class="block">
    336. 

  336.   <div class="section-head"><span class="section-num">01 / OVERVIEW</span><h2 class="h1">核心指标总览</h2></div>
    337. 

  337.   <div class="grid grid-4">
    338. 

  338.     <div class="metric"><div class="metric-label">KOC 达人</div><div class="metric-value">${total.kocs}<span class="metric-unit">位</span></div><div class="metric-sub">平均粉丝 ${fmtInt(total.avgFans)}</div></div>
    339. 

  339.     <div class="metric green"><div class="metric-label">总曝光量</div><div class="metric-value">${fmt(total.imp)}</div><div class="metric-sub">CPM ${total.cpm.toFixed(2)} 元</div></div>
    340. 

  340.     <div class="metric blue"><div class="metric-label">总阅读量</div><div class="metric-value">${fmt(total.reads)}</div><div class="metric-sub">点赞 ${fmtInt(total.likes)} · 收藏 ${fmtInt(total.collects)} · 评论 ${fmtInt(total.comments)}</div></div>
    341. 

  341.     <div class="metric rose"><div class="metric-label">总互动量</div><div class="metric-value">${fmt(total.eng)}</div><div class="metric-sub">互动率 ${total.engRate.toFixed(2)}% · CPE ${total.cpe.toFixed(2)} 元</div></div>
    342. 

  342.     <div class="metric purple"><div class="metric-label">总投放金额</div><div class="metric-value">${fmtMoney(total.spend)}</div><div class="metric-sub">单 KOC 均价 ${fmtMoney(total.spend / total.kocs)}</div></div>
    343. 

  343.   </div>
    344. 

  344. </section>
    345. 

  345. 

  346. <section class="block">
    347. 

  347.   <div class="section-head"><span class="section-num">02 / CHARTS</span><h2 class="h1">维度可视化</h2></div>
    348. 

  348.   <div class="grid grid-2">
    349. 

  349.     <div class="card"><div style="margin-bottom:10px;color:var(--text-2);font-size:.86rem">内容类型 · 互动量与篇数</div><div id="ct-bar" class="chart"></div></div>
    350. 

  350.     <div class="card"><div style="margin-bottom:10px;color:var(--text-2);font-size:.86rem">达人级别分布</div><div id="tp-pie" class="chart"></div></div>
    351. 

  351.     <div class="card" style="grid-column:1/-1"><div style="margin-bottom:10px;color:var(--text-2);font-size:.86rem">粉丝量 × 互动量 散点（每点 = 1 KOC）</div><div id="fans-eng" class="chart-tall"></div></div>
    352. 

  352.   </div>
    353. 

  353. </section>
    354. 

  354. 

  355. <section class="block">
    356. 

  356.   <div class="section-head"><span class="section-num">03 / TABLE</span><h2 class="h1">明细数据表</h2></div>
    357. 

  357.   <p class="sub">点击表头即可排序，支持全字段关键词搜索 + 类型/内容类型筛选。默认按 <strong style="color:var(--amber)">互动总量</strong> 降序。</p>
    358. 

  358.   <div class="controls">
    359. 

  359.     <input id="sh-q" placeholder="🔍 搜索昵称 / 类型 / 内容类型…">
    360. 

  360.     <select id="sh-fc" data-col="3"><option value="">全部内容类型</option>${ctOptions.map(o => `<option>${esc(o)}</option>`).join('')}</select>
    361. 

  361.     <select id="sh-ft" data-col="1"><option value="">全部达人级别</option>${tpOptions.map(o => `<option>${esc(o)}</option>`).join('')}</select>
    362. 

  362.     <span class="hint" id="sh-tbl-cnt"></span>
    363. 

  363.   </div>
    364. 

  364.   <div class="scroll-table"><table id="sh-tbl"><thead><tr>
    365. 

  365.     <th class="num">#<span class="arr"></span></th>
    366. 

  366.     <th>级别<span class="arr"></span></th>
    367. 

  367.     <th>昵称<span class="arr"></span></th>
    368. 

  368.     <th>内容类型<span class="arr"></span></th>
    369. 

  369.     <th>发布日期<span class="arr"></span></th>
    370. 

  370.     <th class="num">粉丝<span class="arr"></span></th>
    371. 

  371.     <th class="num">赞藏<span class="arr"></span></th>
    372. 

  372.     <th class="num">投放价<span class="arr"></span></th>
    373. 

  373.     <th class="num">曝光<span class="arr"></span></th>
    374. 

  374.     <th class="num">阅读<span class="arr"></span></th>
    375. 

  375.     <th class="num">点赞<span class="arr"></span></th>
    376. 

  376.     <th class="num">收藏<span class="arr"></span></th>
    377. 

  377.     <th class="num">评论<span class="arr"></span></th>
    378. 

  378.     <th class="num">互动<span class="arr"></span></th>
    379. 

  379.     <th>原帖<span class="arr"></span></th>
    380. 

  380.   </tr></thead><tbody>${tableRows}</tbody></table></div>
    381. 

  381. </section>
    382. 

  382. 

  383. <script>
    384. 

  384. echarts.init(document.getElementById('ct-bar')).setOption({
    385. 

  385.   ${echartsBaseTheme},
    386. 

  386.   legend:{data:['互动量','篇数'],top:0},
    387. 

  387.   xAxis:{type:'category',data:${ctNames},axisLabel:{interval:0,rotate:30}},
    388. 

  388.   yAxis:[{type:'value',name:'互动量'},{type:'value',name:'篇数'}],
    389. 

  389.   series:[
    390. 

  390.     {type:'bar',name:'互动量',data:${ctEng},itemStyle:{color:'#F5A623',borderRadius:[4,4,0,0]}},
    391. 

  391.     {type:'line',name:'篇数',yAxisIndex:1,data:${ctCnt},itemStyle:{color:'#00DC82'},lineStyle:{width:2},symbol:'circle',symbolSize:8}
    392. 

  392.   ]
    393. 

  393. });
    394. 

  394. echarts.init(document.getElementById('tp-pie')).setOption({
    395. 

  395.   ${echartsBaseTheme},
    396. 

  396.   tooltip:{trigger:'item'},
    397. 

  397.   legend:{bottom:0,textStyle:{color:'#A8A8A8'}},
    398. 

  398.   series:[{type:'pie',radius:['45%','72%'],center:['50%','45%'],
    399. 

  399.     label:{color:'#A8A8A8',formatter:'{b}\\n{d}%'},
    400. 

  400.     itemStyle:{borderColor:'#0A0A0A',borderWidth:2},
    401. 

  401.     data:${tpPie}.map((d,i)=>({...d,itemStyle:{color:['#F5A623','#8B5CF6','#3B82F6','#00DC82','#FF4D8D','#EF4444'][i%6]}}))
    402. 

  402.   }]
    403. 

  403. });
    404. 

  404. echarts.init(document.getElementById('fans-eng')).setOption({
    405. 

  405.   ${echartsBaseTheme},
    406. 

  406.   tooltip:{trigger:'item',formatter:p=>p.data[2]+'<br/>粉丝: '+p.data[0].toLocaleString()+'<br/>互动: '+p.data[1].toLocaleString()+'<br/>类型: '+p.data[3]},
    407. 

  407.   xAxis:{type:'value',name:'粉丝量',axisLabel:{formatter:v=>v>=10000?(v/10000).toFixed(0)+'w':v}},
    408. 

  408.   yAxis:{type:'value',name:'互动量'},
    409. 

  409.   series:[{type:'scatter',data:${scatterData},symbolSize:d=>Math.max(6,Math.min(28,Math.sqrt(d[1])/2)),itemStyle:{color:'#F5A623',opacity:.75,borderColor:'#0A0A0A',borderWidth:1}}]
    410. 

  410. });
    411. 

  411. bindTable('sh-tbl');
    412. 

  412. bindFilter('sh-tbl','sh-q',['sh-fc','sh-ft']);
    413. 

  413. </script>` + COMMON_FOOT('舒华跑步机 · 四月 KOC 宣发原始数据  ·  Generated from 舒华跑步机四月宣发报备KOC发布数据.xlsx');
    414. 

  414. 

  415.     fs.writeFileSync(SHUHUA_OUT, html, 'utf8');
    416. 

  416.     console.log('✅ 舒华原始数据页生成:', SHUHUA_OUT, `(${(fs.statSync(SHUHUA_OUT).size / 1024).toFixed(1)} KB)`);
    417. 

  417. }
    418. 

  418. 

  419. // ============== MAJIYONG builder ==============
    420. 

  420. function buildMajiyong() {
    421. 

  421.     const wb = XLSX.readFile(MAJI_XLSX);
    422. 

  422. 

  423.     // 数据汇总
    424. 

  424.     const summaryRows = XLSX.utils.sheet_to_json(wb.Sheets['数据汇总'], { defval: '' });
    425. 

  425.     const summary = summaryRows.filter(r => r['合作量级']).map(r => ({
    426. 

  426.         tier: String(r['合作量级']).trim(),
    427. 

  427.         count: num(r['合作数量']),
    428. 

  428.         eng: num(r['互动量']),
    429. 

  429.         imp: num(r['曝光量']),
    430. 

  430.         spend: num(r['达人采购费用']),
    431. 

  431.         adSpend: num(r['投流费用']),
    432. 

  432.         cpe: num(r['单次互动成本']),
    433. 

  433.         cpm: num(r['千次曝光成本']),
    434. 

  434.     }));
    435. 

  435.     const grandTotal = summary.find(r => /合计|总计|总和/.test(r.tier)) || summary.reduce((a, r) => ({
    436. 

  436.         tier: '合计', count: a.count + r.count, eng: a.eng + r.eng, imp: a.imp + r.imp,
    437. 

  437.         spend: a.spend + r.spend, adSpend: a.adSpend + r.adSpend, cpe: 0, cpm: 0,
    438. 

  438.     }), { tier: '合计', count: 0, eng: 0, imp: 0, spend: 0, adSpend: 0, cpe: 0, cpm: 0 });
    439. 

  439.     const totalSpend = grandTotal.spend + grandTotal.adSpend;
    440. 

  440.     grandTotal.cpe = grandTotal.eng ? totalSpend / grandTotal.eng : 0;
    441. 

  441.     grandTotal.cpm = grandTotal.imp ? totalSpend * 1000 / grandTotal.imp : 0;
    442. 

  442.     const summaryList = summary.filter(r => !/合计|总计|总和/.test(r.tier));
    443. 

  443. 

  444.     // KOL
    445. 

  445.     const kolRowsRaw = XLSX.utils.sheet_to_json(wb.Sheets['KOL合作表'], { defval: '' });
    446. 

  446.     const kol = kolRowsRaw.filter(r => r['序号'] && typeof r['序号'] === 'number').map(r => ({
    447. 

  447.         idx: num(r['序号']),
    448. 

  448.         tier: String(r['量级'] || '').trim(),
    449. 

  449.         ctype: String(r['类型'] || '').trim() || '未分类',
    450. 

  450.         name: String(r['小红书昵称'] || '').trim(),
    451. 

  451.         homepage: String(r['主页链接'] || '').trim(),
    452. 

  452.         followers: Math.round(num(r['粉丝数/w']) * 10000),
    453. 

  453.         region: String(r['地区'] || '').trim(),
    454. 

  454.         form: String(r['合作形式'] || '').trim(),
    455. 

  455.         price: num(r['下单价格']),
    456. 

  456.         sync: String(r['可同步平台'] || '').trim(),
    457. 

  457.         publishDate: excelDate(r['发布时间']),
    458. 

  458.         link: String(r['发布链接'] || '').trim(),
    459. 

  459.         likes: num(r['点赞']),
    460. 

  460.         collects: num(r['收藏']),
    461. 

  461.         comments: num(r['评论']),
    462. 

  462.         eng: num(r['总互动']),
    463. 

  463.         imp: num(r['曝光量']),
    464. 

  464.         syncEng: num(r['同步互动量']),
    465. 

  465.         syncImp: num(r['同步曝光量']),
    466. 

  466.         engTotal: num(r['互动量小计']),
    467. 

  467.         impTotal: num(r['曝光量小计']),
    468. 

  468.     }));
    469. 

  469. 

  470.     // KOC
    471. 

  471.     const kocRowsRaw = XLSX.utils.sheet_to_json(wb.Sheets['KOC合作表'], { defval: '' });
    472. 

  472.     const koc = kocRowsRaw.filter(r => r['序号'] && typeof r['序号'] === 'number').map(r => ({
    473. 

  473.         idx: num(r['序号']),
    474. 

  474.         tier: String(r['量级'] || '').trim(),
    475. 

  475.         ctype: String(r['类型'] || '').trim() || '未分类',
    476. 

  476.         name: String(r['小红书昵称'] || '').trim(),
    477. 

  477.         homepage: String(r['主页链接'] || '').trim(),
    478. 

  478.         followers: Math.round(num(r['粉丝数/w']) * 10000),
    479. 

  479.         region: String(r['地区'] || '').trim(),
    480. 

  480.         publishDate: excelDate(r['发布时间']),
    481. 

  481.         link: String(r['发布链接'] || '').trim(),
    482. 

  482.         likes: num(r['点赞']),
    483. 

  483.         collects: num(r['收藏']),
    484. 

  484.         comments: num(r['评论']),
    485. 

  485.         eng: num(r['总互动']),
    486. 

  486.         imp: num(r['曝光量']),
    487. 

  487.         engTotal: num(r['互动量小计']),
    488. 

  488.         impTotal: num(r['曝光量小计']),
    489. 

  489.     }));
    490. 

  490. 

  491.     // KOL/KOC 聚合
    492. 

  492.     const aggBy = (arr, key) => {
    493. 

  493.         const m = {};
    494. 

  494.         for (const r of arr) {
    495. 

  495.             const k = r[key] || '未分类';
    496. 

  496.             if (!m[k]) m[k] = { count: 0, eng: 0, imp: 0, spend: 0 };
    497. 

  497.             m[k].count++; m[k].eng += r.engTotal || r.eng; m[k].imp += r.impTotal || r.imp;
    498. 

  498.             m[k].spend += (r.price || 0);
    499. 

  499.         }
    500. 

  500.         return Object.entries(m).map(([k, v]) => ({ name: k, ...v })).sort((a, b) => b.eng - a.eng);
    501. 

  501.     };
    502. 

  502.     const kolByType = aggBy(kol, 'ctype');
    503. 

  503.     const kocByType = aggBy(koc, 'ctype');
    504. 

  504.     const kocByRegion = (() => {
    505. 

  505.         const m = {};
    506. 

  506.         for (const r of koc) {
    507. 

  507.             const k = (String(r.region).slice(0, 20)) || '未知';
    508. 

  508.             if (!m[k]) m[k] = 0; m[k] += r.engTotal || r.eng;
    509. 

  509.         }
    510. 

  510.         return Object.entries(m).map(([k, v]) => ({ name: k, value: v })).sort((a, b) => b.value - a.value).slice(0, 12);
    511. 

  511.     })();
    512. 

  512. 

  513.     const buildKolRow = (r) => {
    514. 

  514.         const href = safeHref(r.link), homeHref = safeHref(r.homepage);
    515. 

  515.         return `<tr>
    516. 

  516.       <td data-v="${r.idx}">${r.idx}</td>
    517. 

  517.       <td><span class="tag p">${esc(r.tier)}</span></td>
    518. 

  518.       <td><span class="tag b">${esc(r.ctype)}</span></td>
    519. 

  519.       <td>${homeHref ? `<a href="${esc(homeHref)}" target="_blank">${esc(r.name)}</a>` : esc(r.name)}</td>
    520. 

  520.       <td class="num" data-v="${r.followers}">${fmtInt(r.followers)}</td>
    521. 

  521.       <td>${esc(r.region)}</td>
    522. 

  522.       <td>${esc(r.form)}</td>
    523. 

  523.       <td class="num" data-v="${r.price}">${fmtMoney(r.price)}</td>
    524. 

  524.       <td>${esc(r.publishDate)}</td>
    525. 

  525.       <td class="num" data-v="${r.likes}">${fmtInt(r.likes)}</td>
    526. 

  526.       <td class="num" data-v="${r.collects}">${fmtInt(r.collects)}</td>
    527. 

  527.       <td class="num" data-v="${r.comments}">${fmtInt(r.comments)}</td>
    528. 

  528.       <td class="num" data-v="${r.engTotal}"><strong style="color:var(--amber)">${fmtInt(r.engTotal)}</strong></td>
    529. 

  529.       <td class="num" data-v="${r.impTotal}">${fmtInt(r.impTotal)}</td>
    530. 

  530.       <td class="link">${href ? `<a href="${esc(href)}" target="_blank">打开</a>` : '<span style="color:var(--text-3)">—</span>'}</td>
    531. 

  531.     </tr>`;
    532. 

  532.     };
    533. 

  533.     const buildKocRow = (r) => {
    534. 

  534.         const href = safeHref(r.link), homeHref = safeHref(r.homepage);
    535. 

  535.         return `<tr>
    536. 

  536.       <td data-v="${r.idx}">${r.idx}</td>
    537. 

  537.       <td><span class="tag g">${esc(r.tier)}</span></td>
    538. 

  538.       <td><span class="tag">${esc(r.ctype)}</span></td>
    539. 

  539.       <td>${homeHref ? `<a href="${esc(homeHref)}" target="_blank">${esc(r.name)}</a>` : esc(r.name)}</td>
    540. 

  540.       <td class="num" data-v="${r.followers}">${fmtInt(r.followers)}</td>
    541. 

  541.       <td>${esc(r.region)}</td>
    542. 

  542.       <td>${esc(r.publishDate)}</td>
    543. 

  543.       <td class="num" data-v="${r.likes}">${fmtInt(r.likes)}</td>
    544. 

  544.       <td class="num" data-v="${r.collects}">${fmtInt(r.collects)}</td>
    545. 

  545.       <td class="num" data-v="${r.comments}">${fmtInt(r.comments)}</td>
    546. 

  546.       <td class="num" data-v="${r.engTotal}"><strong style="color:var(--amber)">${fmtInt(r.engTotal)}</strong></td>
    547. 

  547.       <td class="num" data-v="${r.impTotal}">${fmtInt(r.impTotal)}</td>
    548. 

  548.       <td class="link">${href ? `<a href="${esc(href)}" target="_blank">打开</a>` : '<span style="color:var(--text-3)">—</span>'}</td>
    549. 

  549.     </tr>`;
    550. 

  550.     };
    551. 

  551. 

  552.     const kolRows = kol.slice().sort((a, b) => b.engTotal - a.engTotal).map(buildKolRow).join('');
    553. 

  553.     const kocRows = koc.slice().sort((a, b) => b.engTotal - a.engTotal).map(buildKocRow).join('');
    554. 

  554. 

  555.     const kolCtOpts = [...new Set(kol.map(r => r.ctype))].filter(Boolean).sort();
    556. 

  556.     const kolTierOpts = [...new Set(kol.map(r => r.tier))].filter(Boolean).sort();
    557. 

  557.     const kocCtOpts = [...new Set(koc.map(r => r.ctype))].filter(Boolean).sort();
    558. 

  558.     const kocTierOpts = [...new Set(koc.map(r => r.tier))].filter(Boolean).sort();
    559. 

  559.     const kocRegionOpts = [...new Set(koc.map(r => r.region))].filter(Boolean).sort();
    560. 

  560. 

  561.     const sumNames = JSON.stringify(summaryList.map(r => r.tier));
    562. 

  562.     const sumEng = JSON.stringify(summaryList.map(r => r.eng));
    563. 

  563.     const sumImp = JSON.stringify(summaryList.map(r => r.imp));
    564. 

  564.     const sumSpend = JSON.stringify(summaryList.map(r => r.spend + r.adSpend));
    565. 

  565.     const ctMix = JSON.stringify([...kolByType, ...kocByType].reduce((arr, x) => {
    566. 

  566.         const e = arr.find(y => y.name === x.name);
    567. 

  567.         if (e) e.value += x.eng; else arr.push({ name: x.name, value: x.eng });
    568. 

  568.         return arr;
    569. 

  569.     }, []).sort((a, b) => b.value - a.value));
    570. 

  570.     const regionData = JSON.stringify(kocByRegion);
    571. 

  571. 

  572.     const html = COMMON_HEAD('马记永 · 四月新鲜菜宣发原始数据') + `
    573. 

  573. <section class="hero">
    574. 

  574.   <div class="eyebrow">MAJIYONG · APRIL 2025 · RAW DATA</div>
    575. 

  575.   <h1 class="h0">马记永兰州牛肉面<br/>四月新鲜菜宣发 · 原始数据</h1>
    576. 

  576.   <p class="lead">数据源：<code style="color:var(--text-1)">【新鲜菜项目】马记永4月宣发数据汇总.xlsx</code>，包含数据汇总 / KOL 合作表 / KOC 合作表 三张工作表。本页对原始 Excel 字段进行结构化重构，所有指标可即时筛选、排序、跳转原帖。</p>
    577. 

  577.   <div class="meta-row">
    578. 

  578.     <div class="meta-item">达人总数<strong>${grandTotal.count}</strong></div>
    579. 

  579.     <div class="meta-item">总曝光<strong>${fmt(grandTotal.imp)}</strong></div>
    580. 

  580.     <div class="meta-item">总互动<strong>${fmt(grandTotal.eng)}</strong></div>
    581. 

  581.     <div class="meta-item">总投放<strong>${fmtMoney(totalSpend)}</strong></div>
    582. 

  582.     <div class="meta-item">CPE<strong>${grandTotal.cpe.toFixed(2)} 元</strong></div>
    583. 

  583.     <div class="meta-item">CPM<strong>${grandTotal.cpm.toFixed(2)} 元</strong></div>
    584. 

  584.   </div>
    585. 

  585. </section>
    586. 

  586. 

  587. <section class="block">
    588. 

  588.   <div class="section-head"><span class="section-num">01 / OVERVIEW</span><h2 class="h1">核心指标总览</h2></div>
    589. 

  589.   <div class="grid grid-4">
    590. 

  590.     <div class="metric"><div class="metric-label">合作达人</div><div class="metric-value">${grandTotal.count}<span class="metric-unit">位</span></div><div class="metric-sub">KOL ${kol.length} · KOC ${koc.length}</div></div>
    591. 

  591.     <div class="metric green"><div class="metric-label">总曝光量</div><div class="metric-value">${fmt(grandTotal.imp)}</div><div class="metric-sub">CPM ${grandTotal.cpm.toFixed(2)} 元</div></div>
    592. 

  592.     <div class="metric rose"><div class="metric-label">总互动量</div><div class="metric-value">${fmt(grandTotal.eng)}</div><div class="metric-sub">CPE ${grandTotal.cpe.toFixed(2)} 元</div></div>
    593. 

  593.     <div class="metric purple"><div class="metric-label">总投放金额</div><div class="metric-value">${fmtMoney(totalSpend)}</div><div class="metric-sub">达人采购 ${fmtMoney(grandTotal.spend)} · 投流 ${fmtMoney(grandTotal.adSpend)}</div></div>
    594. 

  594.   </div>
    595. 

  595. </section>
    596. 

  596. 

  597. <section class="block">
    598. 

  598.   <div class="section-head"><span class="section-num">02 / SUMMARY</span><h2 class="h1">数据汇总（按合作量级）</h2></div>
    599. 

  599.   <div class="card" style="padding:0">
    600. 

  600.     <table style="font-size:.9rem"><thead><tr>
    601. 

  601.       <th>合作量级</th><th class="num">数量</th><th class="num">互动量</th><th class="num">曝光量</th>
    602. 

  602.       <th class="num">采购费用</th><th class="num">投流费用</th><th class="num">单次互动</th><th class="num">千次曝光</th>
    603. 

  603.     </tr></thead><tbody>
    604. 

  604.       ${summary.map(r => `<tr>
    605. 

  605.         <td><strong>${esc(r.tier)}</strong></td>
    606. 

  606.         <td class="num">${fmtInt(r.count)}</td>
    607. 

  607.         <td class="num">${fmtInt(r.eng)}</td>
    608. 

  608.         <td class="num">${fmtInt(r.imp)}</td>
    609. 

  609.         <td class="num">${fmtMoney(r.spend)}</td>
    610. 

  610.         <td class="num">${fmtMoney(r.adSpend)}</td>
    611. 

  611.         <td class="num">${r.cpe ? r.cpe.toFixed(2) + ' 元' : '—'}</td>
    612. 

  612.         <td class="num">${r.cpm ? r.cpm.toFixed(2) + ' 元' : '—'}</td>
    613. 

  613.       </tr>`).join('')}
    614. 

  614.     </tbody></table>
    615. 

  615.   </div>
    616. 

  616. </section>
    617. 

  617. 

  618. <section class="block">
    619. 

  619.   <div class="section-head"><span class="section-num">03 / CHARTS</span><h2 class="h1">维度可视化</h2></div>
    620. 

  620.   <div class="grid grid-2">
    621. 

  621.     <div class="card"><div style="margin-bottom:10px;color:var(--text-2);font-size:.86rem">合作量级 · 互动 vs 曝光 vs 花费</div><div id="sum-chart" class="chart"></div></div>
    622. 

  622.     <div class="card"><div style="margin-bottom:10px;color:var(--text-2);font-size:.86rem">内容类型 · 互动量分布</div><div id="ctmix-pie" class="chart"></div></div>
    623. 

  623.     <div class="card" style="grid-column:1/-1"><div style="margin-bottom:10px;color:var(--text-2);font-size:.86rem">KOC Top12 地区 · 互动量</div><div id="region-bar" class="chart"></div></div>
    624. 

  624.   </div>
    625. 

  625. </section>
    626. 

  626. 

  627. <section class="block">
    628. 

  628.   <div class="section-head"><span class="section-num">04 / KOL</span><h2 class="h1">KOL 合作明细（${kol.length}）</h2></div>
    629. 

  629.   <p class="sub">默认按互动量小计降序。可搜索 / 按级别 / 按内容类型筛选。</p>
    630. 

  630.   <div class="controls">
    631. 

  631.     <input id="kol-q" placeholder="🔍 搜索 KOL…">
    632. 

  632.     <select id="kol-ft" data-col="1"><option value="">全部级别</option>${kolTierOpts.map(o => `<option>${esc(o)}</option>`).join('')}</select>
    633. 

  633.     <select id="kol-fc" data-col="2"><option value="">全部内容类型</option>${kolCtOpts.map(o => `<option>${esc(o)}</option>`).join('')}</select>
    634. 

  634.     <span class="hint" id="kol-tbl-cnt"></span>
    635. 

  635.   </div>
    636. 

  636.   <div class="scroll-table"><table id="kol-tbl"><thead><tr>
    637. 

  637.     <th class="num">#<span class="arr"></span></th>
    638. 

  638.     <th>级别<span class="arr"></span></th>
    639. 

  639.     <th>类型<span class="arr"></span></th>
    640. 

  640.     <th>昵称<span class="arr"></span></th>
    641. 

  641.     <th class="num">粉丝<span class="arr"></span></th>
    642. 

  642.     <th>地区<span class="arr"></span></th>
    643. 

  643.     <th>合作形式<span class="arr"></span></th>
    644. 

  644.     <th class="num">下单价<span class="arr"></span></th>
    645. 

  645.     <th>发布<span class="arr"></span></th>
    646. 

  646.     <th class="num">点赞<span class="arr"></span></th>
    647. 

  647.     <th class="num">收藏<span class="arr"></span></th>
    648. 

  648.     <th class="num">评论<span class="arr"></span></th>
    649. 

  649.     <th class="num">互动小计<span class="arr"></span></th>
    650. 

  650.     <th class="num">曝光小计<span class="arr"></span></th>
    651. 

  651.     <th>原帖<span class="arr"></span></th>
    652. 

  652.   </tr></thead><tbody>${kolRows}</tbody></table></div>
    653. 

  653. </section>
    654. 

  654. 

  655. <section class="block">
    656. 

  656.   <div class="section-head"><span class="section-num">05 / KOC</span><h2 class="h1">KOC 合作明细（${koc.length}）</h2></div>
    657. 

  657.   <p class="sub">默认按互动量小计降序。可搜索 / 按级别 / 按内容类型 / 按地区筛选。</p>
    658. 

  658.   <div class="controls">
    659. 

  659.     <input id="koc-q" placeholder="🔍 搜索 KOC…">
    660. 

  660.     <select id="koc-ft" data-col="1"><option value="">全部级别</option>${kocTierOpts.map(o => `<option>${esc(o)}</option>`).join('')}</select>
    661. 

  661.     <select id="koc-fc" data-col="2"><option value="">全部内容类型</option>${kocCtOpts.map(o => `<option>${esc(o)}</option>`).join('')}</select>
    662. 

  662.     <select id="koc-fr" data-col="5"><option value="">全部地区</option>${kocRegionOpts.map(o => `<option>${esc(o)}</option>`).join('')}</select>
    663. 

  663.     <span class="hint" id="koc-tbl-cnt"></span>
    664. 

  664.   </div>
    665. 

  665.   <div class="scroll-table"><table id="koc-tbl"><thead><tr>
    666. 

  666.     <th class="num">#<span class="arr"></span></th>
    667. 

  667.     <th>级别<span class="arr"></span></th>
    668. 

  668.     <th>类型<span class="arr"></span></th>
    669. 

  669.     <th>昵称<span class="arr"></span></th>
    670. 

  670.     <th class="num">粉丝<span class="arr"></span></th>
    671. 

  671.     <th>地区<span class="arr"></span></th>
    672. 

  672.     <th>发布<span class="arr"></span></th>
    673. 

  673.     <th class="num">点赞<span class="arr"></span></th>
    674. 

  674.     <th class="num">收藏<span class="arr"></span></th>
    675. 

  675.     <th class="num">评论<span class="arr"></span></th>
    676. 

  676.     <th class="num">互动小计<span class="arr"></span></th>
    677. 

  677.     <th class="num">曝光小计<span class="arr"></span></th>
    678. 

  678.     <th>原帖<span class="arr"></span></th>
    679. 

  679.   </tr></thead><tbody>${kocRows}</tbody></table></div>
    680. 

  680. </section>
    681. 

  681. 

  682. <script>
    683. 

  683. echarts.init(document.getElementById('sum-chart')).setOption({
    684. 

  684.   ${echartsBaseTheme},
    685. 

  685.   legend:{data:['互动量','曝光量','总花费'],top:0,textStyle:{color:'#A8A8A8'}},
    686. 

  686.   xAxis:{type:'category',data:${sumNames},axisLabel:{interval:0,rotate:15}},
    687. 

  687.   yAxis:[{type:'value',name:'量'},{type:'value',name:'花费(元)'}],
    688. 

  688.   series:[
    689. 

  689.     {type:'bar',name:'互动量',data:${sumEng},itemStyle:{color:'#F5A623',borderRadius:[4,4,0,0]}},
    690. 

  690.     {type:'bar',name:'曝光量',data:${sumImp},itemStyle:{color:'#3B82F6',borderRadius:[4,4,0,0]}},
    691. 

  691.     {type:'line',name:'总花费',yAxisIndex:1,data:${sumSpend},itemStyle:{color:'#FF4D8D'},lineStyle:{width:2},symbol:'circle',symbolSize:8}
    692. 

  692.   ]
    693. 

  693. });
    694. 

  694. echarts.init(document.getElementById('ctmix-pie')).setOption({
    695. 

  695.   ${echartsBaseTheme},
    696. 

  696.   tooltip:{trigger:'item',formatter:'{b}<br/>{c} ({d}%)'},
    697. 

  697.   legend:{bottom:0,textStyle:{color:'#A8A8A8'},type:'scroll'},
    698. 

  698.   series:[{type:'pie',radius:['42%','70%'],center:['50%','45%'],
    699. 

  699.     label:{color:'#A8A8A8'},itemStyle:{borderColor:'#0A0A0A',borderWidth:2},
    700. 

  700.     data:${ctMix}.map((d,i)=>({...d,itemStyle:{color:['#F5A623','#8B5CF6','#3B82F6','#00DC82','#FF4D8D','#EF4444','#FCD34D','#A78BFA'][i%8]}}))
    701. 

  701.   }]
    702. 

  702. });
    703. 

  703. echarts.init(document.getElementById('region-bar')).setOption({
    704. 

  704.   ${echartsBaseTheme},
    705. 

  705.   grid:{left:90,right:30,top:20,bottom:30},
    706. 

  706.   tooltip:{trigger:'axis'},
    707. 

  707.   xAxis:{type:'value'},
    708. 

  708.   yAxis:{type:'category',data:${regionData}.map(d=>d.name).reverse(),axisLabel:{color:'#A8A8A8'}},
    709. 

  709.   series:[{type:'bar',data:${regionData}.map(d=>d.value).reverse(),itemStyle:{color:'#00DC82',borderRadius:[0,4,4,0]}}]
    710. 

  710. });
    711. 

  711. bindTable('kol-tbl'); bindFilter('kol-tbl','kol-q',['kol-ft','kol-fc']);
    712. 

  712. bindTable('koc-tbl'); bindFilter('koc-tbl','koc-q',['koc-ft','koc-fc','koc-fr']);
    713. 

  713. </script>` + COMMON_FOOT('马记永 · 四月新鲜菜宣发原始数据  ·  Generated from 【新鲜菜项目】马记永4月宣发数据汇总.xlsx');
    714. 

  714. 

  715.     fs.writeFileSync(MAJI_OUT, html, 'utf8');
    716. 

  716.     console.log('✅ 马记永原始数据页生成:', MAJI_OUT, `(${(fs.statSync(MAJI_OUT).size / 1024).toFixed(1)} KB)`);
    717. 

  717. }
    718. 

  718. 

  719. buildShuhua();
    720. 

  720. buildMajiyong();
    721.