liver-v2-ch5-action.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  1. // ==============================================================================
  2. // 肝纯片 v2 · Ch5 落地行动
  3. // ==============================================================================
  4. // 5.1 4P 配称 · 产品+渠道+推广+价格
  5. // 5.2 10 亿路径 · 3 阶段 Roadmap
  6. // 5.3 P0/P1 行动清单 + 包装优化
  7. // ==============================================================================
  8. const LA = require('./liver-analyze.js');
  9. const C = require('./liver-components.js');
  10. const { BRAND, esc, renderSectionHead, renderVocGrid,
  11. renderStatStrip, renderCompareTable, renderInsightHero,
  12. renderFindingCard, renderDecisionList } = C;
  13. // ============================================================
  14. // 5.1 4P 配称
  15. // ============================================================
  16. function renderSub1({ chapter: c, subIdx, sub, slideNum, slideTotal, data, meta }) {
  17. const ps = [
  18. {
  19. p: 'Product 产品', icon: '📦', color: BRAND.LIVER_AMBER,
  20. items: [
  21. '核心 SKU:瓶装日常(28天)+ 板装便携(7天)+ 礼盒(双瓶/四瓶)',
  22. '剂型:片剂(主力)+ 液体口服液(应酬应急·储备)',
  23. '包装:去药盒感 → 新中式设计 · 藤茶绿+琥珀金主色调',
  24. '12 SKU 矩阵覆盖 4 场景 × 3 价格带',
  25. ],
  26. },
  27. {
  28. p: 'Place 渠道', icon: '🏪', color: BRAND.TECH_BLUE,
  29. items: [
  30. '药线:大参林/一心堂 3w 门店 · 店员"一句话推荐"培训',
  31. '电商:京东自营+天猫旗舰 · 种草→搜索→转化闭环',
  32. '餐饮:锡纸分食 B2B2C · 白领酒局/商务宴请',
  33. '礼品:节点营销(父亲节/中秋/春节)· 企业团购',
  34. ],
  35. },
  36. {
  37. p: 'Promotion 推广', icon: '📢', color: BRAND.WARM_ORANGE,
  38. items: [
  39. '小红书:千年藤茶故事 + 打工人护肝 + 送爸爸礼盒',
  40. '抖音:场景剧(酒局/熬夜/体检)+ 达人口播',
  41. '药店:店员培训 + 端架陈列 + "藤茶科普"小册子',
  42. '不做:硬广洗脑(海王金樽教训)· 不做夸大宣称',
  43. ],
  44. },
  45. {
  46. p: 'Price 价格', icon: '💰', color: BRAND.JIANG_GREEN,
  47. items: [
  48. '日常装:¥128-168/盒(28天)· vs Swisse 便宜 15-30%',
  49. '便携装:¥68-98/盒(7天)· 打工人入门价',
  50. '礼盒装:¥298-898(双瓶/四瓶)· 对标东阿阿胶',
  51. '液体装:¥15-30/支 · 便利店/餐饮渠道',
  52. ],
  53. },
  54. ];
  55. return `<section class="report-section" id="${c.key}-${subIdx}" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  56. <div class="section-inner">
  57. ${renderSectionHead({
  58. eyebrow: `${c.num}.${subIdx} · 4P MIX`,
  59. title: sub,
  60. subtitle: '从 VOC 洞察反推 4P 配称——每个 P 都有 VOC 证据支撑。',
  61. color: c.color,
  62. })}
  63. <div style="display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; margin-top:24px;">
  64. ${ps.map(p => `
  65. <div style="padding:22px; background:${p.color}08; border:1px solid ${p.color}33; border-top:3px solid ${p.color}; border-radius:var(--radius-md);">
  66. <div style="display:flex; align-items:center; gap:8px; margin-bottom:14px;">
  67. <span style="font-size:1.3rem;">${p.icon}</span>
  68. <div class="text-mono text-xs" style="color:${p.color}; font-weight:700; letter-spacing:0.12em;">${esc(p.p)}</div>
  69. </div>
  70. <ul style="margin:0; padding-left:18px; color:var(--text-1); font-size:0.82rem; line-height:1.65;">
  71. ${p.items.map(i => `<li>${esc(i)}</li>`).join('')}
  72. </ul>
  73. </div>`).join('')}
  74. </div>
  75. </div>
  76. </section>`;
  77. }
  78. // ============================================================
  79. // 5.2 10 亿路径
  80. // ============================================================
  81. function renderSub2({ chapter: c, subIdx, sub, slideNum, slideTotal, data, meta }) {
  82. const phases = [
  83. {
  84. phase: 'Y1 · 验证期', target: '5 亿', color: BRAND.TECH_BLUE,
  85. channels: [
  86. { name: '药线', target: '3 亿', pct: '60%', action: '大参林/一心堂铺货 + 店员培训' },
  87. { name: '电商', target: '2 亿', pct: '40%', action: '京东自营 + XHS/抖音种草' },
  88. ],
  89. kpi: 'NPS ≥ 40 · 复购率 ≥ 25% · 药店动销率 ≥ 60%',
  90. },
  91. {
  92. phase: 'Y2 · 复制期', target: '3 亿', color: BRAND.WARM_ORANGE,
  93. channels: [
  94. { name: '礼品', target: '1.5 亿', pct: '50%', action: '新中式礼盒 + 节点营销' },
  95. { name: '餐饮', target: '1.5 亿', pct: '50%', action: '锡纸分食 B2B2C + 便利店' },
  96. ],
  97. kpi: '礼盒客单价 ≥ ¥398 · 餐饮覆盖 5000 家 · 品牌提及率 ↑50%',
  98. },
  99. {
  100. phase: 'Y3 · 升级期', target: '2 亿', color: BRAND.JIANG_GREEN,
  101. channels: [
  102. { name: '国际', target: '1 亿', pct: '50%', action: 'DMY 出海 · Amazon/iHerb' },
  103. { name: '品类升级', target: '1 亿', pct: '50%', action: '功能饮品 + 联名 + 新品' },
  104. ],
  105. kpi: 'Amazon BSR Top 20 · 功能饮品 GMV ≥ 5000 万',
  106. },
  107. ];
  108. return `<section class="report-section" id="${c.key}-${subIdx}" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  109. <div class="section-inner">
  110. ${renderSectionHead({
  111. eyebrow: `${c.num}.${subIdx} · 10B ROADMAP`,
  112. title: sub,
  113. subtitle: '药线 3 亿 + 礼品 2.5 亿 + 餐饮 2.5 亿 + 电商 2 亿 = 10 亿 / 3 年',
  114. color: c.color,
  115. })}
  116. <div style="display:grid; gap:18px; margin-top:24px;">
  117. ${phases.map(ph => `
  118. <div style="padding:22px; background:${ph.color}08; border:1px solid ${ph.color}33; border-left:4px solid ${ph.color}; border-radius:var(--radius-md);">
  119. <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;">
  120. <div>
  121. <div class="text-mono text-xs" style="color:${ph.color}; font-weight:700; letter-spacing:0.15em;">${esc(ph.phase)}</div>
  122. </div>
  123. <div style="font-family:var(--font-head); font-size:1.8rem; font-weight:800; color:${ph.color};">${esc(ph.target)}</div>
  124. </div>
  125. <div style="display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-bottom:12px;">
  126. ${ph.channels.map(ch => `
  127. <div style="padding:12px; background:var(--bg-1); border-radius:var(--radius-sm);">
  128. <div style="display:flex; justify-content:space-between;">
  129. <span style="font-weight:700; color:var(--text-1); font-size:0.84rem;">${esc(ch.name)}</span>
  130. <span style="color:${ph.color}; font-size:0.78rem; font-weight:700;">${esc(ch.target)}(${esc(ch.pct)})</span>
  131. </div>
  132. <div style="color:var(--text-2); font-size:0.78rem; margin-top:4px;">${esc(ch.action)}</div>
  133. </div>`).join('')}
  134. </div>
  135. <div style="color:var(--text-3); font-size:0.74rem; border-top:1px dashed ${ph.color}33; padding-top:8px;">
  136. <strong>KPI</strong>:${esc(ph.kpi)}
  137. </div>
  138. </div>`).join('')}
  139. </div>
  140. </div>
  141. </section>`;
  142. }
  143. // ============================================================
  144. // 5.3 P0/P1 行动清单 + 包装优化
  145. // ============================================================
  146. function renderSub3({ chapter: c, subIdx, sub, slideNum, slideTotal, data, meta }) {
  147. const actions = [
  148. { priority: 'P0', action: '确认品类定位:"千年藤茶·天然护肝"', owner: '品牌部', timeline: '1 周', status: '待确认' },
  149. { priority: 'P0', action: '包装优化:去药盒感 → 新中式设计(不再"放蓬塔")', owner: '设计部', timeline: '2 周', status: '重点项' },
  150. { priority: 'P0', action: '药店店员"一句话推荐"话术手册', owner: '渠道部', timeline: '2 周', status: '待启动' },
  151. { priority: 'P0', action: '肝纯片自身 VOC 补充采集(抖音购买评论/淘宝评论)', owner: '数据团队', timeline: '1 周', status: '数据缺口' },
  152. { priority: 'P1', action: '12 SKU 矩阵设计(日常/便携/礼盒/液体)', owner: '产品部', timeline: '1 月', status: '待排期' },
  153. { priority: 'P1', action: '小红书种草内容矩阵搭建', owner: '电商部', timeline: '1 月', status: '待启动' },
  154. { priority: 'P1', action: '"藤茶"认知教育内容库(科普文/视频脚本)', owner: '品牌部', timeline: '1 月', status: '待启动' },
  155. { priority: 'P1', action: '礼盒装设计打样(¥298/¥598 两档)', owner: '设计部', timeline: '2 月', status: '待排期' },
  156. { priority: 'P2', action: '液体口服液剂型开发(餐饮/便利店渠道)', owner: '研发部', timeline: '3 月', status: '远期储备' },
  157. { priority: 'P2', action: 'DMY 出海可行性研究(Amazon/iHerb)', owner: '国际部', timeline: '3 月', status: '远期储备' },
  158. ];
  159. const p0 = actions.filter(a => a.priority === 'P0');
  160. const p1 = actions.filter(a => a.priority === 'P1');
  161. const p2 = actions.filter(a => a.priority === 'P2');
  162. return `<section class="report-section" id="${c.key}-${subIdx}" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  163. <div class="section-inner">
  164. ${renderSectionHead({
  165. eyebrow: `${c.num}.${subIdx} · ACTION PLAN`,
  166. title: sub,
  167. subtitle: 'P0 立即 / P1 一月内 / P2 远期 · 特别标注:包装优化是第一优先级',
  168. color: c.color,
  169. })}
  170. ${renderStatStrip([
  171. { num: p0.length, label: 'P0 · 立即', color: BRAND.CORAL },
  172. { num: p1.length, label: 'P1 · 1月内', color: BRAND.WARM_ORANGE },
  173. { num: p2.length, label: 'P2 · 远期', color: 'var(--text-3)' },
  174. { num: actions.length, label: '总行动项', color: c.color },
  175. ])}
  176. ${renderCompareTable({
  177. title: 'P0 · 立即执行(本周-2周)',
  178. headers: ['行动', '负责方', '时间线', '状态'],
  179. rows: p0.map(a => [
  180. { html: `<strong>${esc(a.action)}</strong>`, bold: true },
  181. a.owner,
  182. a.timeline,
  183. { html: `<span style="color:${BRAND.CORAL}; font-weight:700;">${esc(a.status)}</span>` },
  184. ]),
  185. accent: BRAND.CORAL,
  186. })}
  187. <div style="margin-top:18px;">
  188. ${renderCompareTable({
  189. title: 'P1 · 1 月内启动',
  190. headers: ['行动', '负责方', '时间线', '状态'],
  191. rows: p1.map(a => [
  192. a.action, a.owner, a.timeline,
  193. { html: `<span style="color:${BRAND.WARM_ORANGE};">${esc(a.status)}</span>` },
  194. ]),
  195. accent: BRAND.WARM_ORANGE,
  196. })}
  197. </div>
  198. <div style="margin-top:18px;">
  199. ${renderCompareTable({
  200. title: 'P2 · 远期储备',
  201. headers: ['行动', '负责方', '时间线', '状态'],
  202. rows: p2.map(a => [a.action, a.owner, a.timeline, a.status]),
  203. accent: 'var(--text-3)',
  204. })}
  205. </div>
  206. <div style="margin-top:24px; padding:20px 24px; background:${BRAND.LIVER_AMBER}08; border-left:3px solid ${BRAND.LIVER_AMBER}; border-radius:6px;">
  207. <div class="text-mono text-xs" style="color:${BRAND.LIVER_AMBER}; letter-spacing:0.15em; margin-bottom:10px; font-weight:700;">⚠️ 包装优化专项</div>
  208. <div style="color:var(--text-1); font-size:0.88rem; line-height:1.7;">
  209. 上版报告建议"放蓬塔"偏了(江旭反馈)。v2 包装方向:<br/>
  210. · <strong>去药盒感</strong>:不像易善复/葵花那种白底药盒<br/>
  211. · <strong>新中式美学</strong>:藤茶绿 + 琥珀金 + 中国风纹理<br/>
  212. · <strong>送得出手</strong>:礼盒装对标东阿阿胶/小罐茶的质感<br/>
  213. · <strong>便携友好</strong>:板装可放进包/抽屉·不尴尬
  214. </div>
  215. </div>
  216. ${renderInsightHero({
  217. eyebrow: 'CLOSING',
  218. title: '从 VOC 到行动:10 亿目标的起点是品类重定位',
  219. subtitle: `本报告 v2 回应了江旭提出的三个缺失:<strong style="color:${BRAND.LIVER_AMBER};">① 自身产品画像</strong>(Ch1)、<strong style="color:${BRAND.TECH_BLUE};">② VOC 分类归拢</strong>(Ch0)、<strong style="color:${BRAND.ROSE};">③ 竞品正反面</strong>(Ch2)。加上里斯×特劳特定位(Ch3)、四大场景机会(Ch4),最终收敛到 10 条可执行行动。<br/>核心一句话:<strong style="color:${BRAND.TENGCHA_GREEN};">千年藤茶 · 天然护肝</strong>。`,
  220. color: c.color,
  221. })}
  222. </div>
  223. </section>`;
  224. }
  225. module.exports = { renderSub1, renderSub2, renderSub3 };