18307996893
/
fmode-voc-projects


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
							// ==============================================================================
// 洪城到家 · VOC 报告渲染引擎
// ==============================================================================

const HC = require('./hongcheng-components.js');

const CHAPTERS = [
    { id: 'ch1', title: '诘问起点', subtitle: '江西母婴服务市场现状与机会' },
    { id: 'ch2', title: '竞品获客策略', subtitle: '头部品牌VOC拆解' },
    { id: 'ch3', title: '用户痛点VOC', subtitle: '选择月嫂的三大顾虑' },
    { id: 'ch4', title: 'KANO×JTBD', subtitle: '需求分类与价值分层' },
    { id: 'ch5', title: '场景四元素地图', subtitle: '核心使用场景拆解' },
    { id: 'ch6', title: '三轴×无人地带', subtitle: '竞争定位分析' },
    { id: 'ch7', title: '新机会×新渠道', subtitle: '增长突破口' },
    { id: 'ch8', title: '4P配称蓝图', subtitle: '落地执行计划' },
];

const CHAPTER_SUBSECTIONS = {
    ch1: ['市场现状', '机会分析', '增长路径'],
    ch2: ['天鹅到家', '好孕妈妈', '多喜娃', '妈咪无忧'],
    ch3: ['价格透明', '专业度验证', '服务保障'],
    ch4: ['KANO五类', '功能价值', '情绪价值', '社会价值'],
    ch5: ['产前决策', '月子期服务', '产后恢复', '职场复工'],
    ch6: ['三轴图谱', '无人地带', 'MOAT对标'],
    ch7: ['医院地推', '短剧营销', '多渠道组合'],
    ch8: ['4P配称', '增长路径'],
};

function buildHTML({ product = '洪城到家', collectedAt = new Date().toISOString().slice(0, 10) } = {}) {
    const brand = HC.BRAND;

    return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${product} · VOC 深度洞察报告</title>
<style>
:root {
    --bg-0: #ffffff;
    --bg-1: #f7f8fa;
    --bg-2: #eef0f4;
    --border: #e2e5ed;
    --text-1: #1a1d23;
    --text-2: #4a5568;
    --text-3: #8896a6;
    --font-sans: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-head: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --radius-sm: 6px;
    --radius-md: 10px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-sans); background: var(--bg-0); color: var(--text-1); font-size: 15px; line-height: 1.6; }
.report-container { max-width: 1100px; margin: 0 auto; padding: 40px 24px; }
.report-section { margin-bottom: 64px; scroll-margin-top: 24px; }
.section-head { margin-bottom: 32px; padding-bottom: 20px; border-bottom: 2px solid var(--border); }
.section-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 8px; }
.text-h1 { font-size: 1.8rem; font-weight: 800; color: var(--text-1); margin-bottom: 8px; }
.section-sub { color: var(--text-2); font-size: 1rem; }
.text-mono { font-family: var(--font-mono); }
.text-xs { font-size: 0.75rem; }
.rise-in { animation: riseIn 0.5s ease-out; }
.fade-up { animation: fadeUp 0.5s ease-out; }
.headline-anim { }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.footer { text-align: center; padding: 40px 0 20px; color: var(--text-3); font-size: 0.8rem; border-top: 1px solid var(--border); margin-top: 60px; }
</style>
</head>
<body>
<div class="report-container">

<!-- 封面 -->
<section class="report-section" style="text-align:center; padding:60px 20px; background:linear-gradient(135deg, ${brand.HONGCHENG_RED}08, ${brand.HONGCHENG_GOLD}08); border-radius:16px; margin-bottom:48px;">
    <div style="font-size:0.8rem; font-weight:700; letter-spacing:0.2em; color:${brand.HONGCHENG_RED}; margin-bottom:16px;">VOC 深度洞察报告</div>
    <h1 style="font-size:2.4rem; font-weight:900; color:var(--text-1); margin-bottom:12px;">${product}</h1>
    <p style="font-size:1.1rem; color:var(--text-2); margin-bottom:24px;">从 3000 单到 3万单 · 江西母婴服务市场增长策略</p>
    <div style="display:inline-flex; gap:12px; flex-wrap:wrap; justify-content:center;">
        <span style="padding:6px 16px; background:${brand.HONGCHENG_RED}15; color:${brand.HONGCHENG_RED}; border-radius:20px; font-size:0.78rem; font-weight:600;">小红书</span>
        <span style="padding:6px 16px; background:${brand.HONGCHENG_RED}15; color:${brand.HONGCHENG_RED}; border-radius:20px; font-size:0.78rem; font-weight:600;">抖音</span>
        <span style="padding:6px 16px; background:${brand.HONGCHENG_RED}15; color:${brand.HONGCHENG_RED}; border-radius:20px; font-size:0.78rem; font-weight:600;">美团</span>
    </div>
    <div style="margin-top:24px; color:var(--text-3); font-size:0.8rem;">采集日期：${collectedAt}</div>
</section>

<!-- Ch1: 诘问起点 -->
<section class="report-section" id="ch1">
    ${HC.renderSectionHead({ eyebrow: 'CHAPTER 01', title: '诘问起点', subtitle: '江西母婴服务市场现状与机会', color: brand.HONGCHENG_RED })}
    ${HC.renderInsightHero({ eyebrow: '核心问题', title: '现状：3000单/年 → 目标：3万单/年（10倍增长）', subtitle: '江西30万新生儿/年，洪诚到家目前市场渗透率仅1%，目标吃下10%市场', color: brand.HONGCHENG_RED })}
    ${HC.renderStatStrip([
        { num: '30万', label: '江西新生儿/年', color: brand.HONGCHENG_RED },
        { num: '1%', label: '当前市场渗透率', color: brand.SERVICE_ORANGE },
        { num: '10%', label: '目标市场占有率', color: brand.TRUST_GREEN },
        { num: '10x', label: '订单增长目标', color: brand.HONGCHENG_GOLD },
    ], { accent: brand.HONGCHENG_RED })}
    ${HC.renderDecisionList([
        '医院地推：最高效的精准获客场景，直接触达即将生产的精准用户',
        '短剧破圈：借南昌万亿短剧政策东风，低成本实现品牌曝光',
        '多渠道组合：抖音+小红书+美团+私域，老带新机制提升LTV',
    ], { accent: brand.CORE_STRATEGY, title: '核心策略三句话' })}
</section>

<!-- Ch2: 竞品获客策略 -->
<section class="report-section" id="ch2">
    ${HC.renderSectionHead({ eyebrow: 'CHAPTER 02', title: '竞品获客策略', subtitle: '头部品牌VOC拆解', color: brand.SERVICE_ORANGE })}
    ${HC.renderCompareTable({
        title: '核心竞品渠道策略对比',
        headers: ['竞品', '核心获客渠道', '可借鉴点'],
        rows: [
            ['天鹅到家', '多平台全覆盖+AI驱动', '标准化体系+多渠道组合'],
            ['好孕妈妈', '医院深度合作+CRM', '医院渠道是最高效场景'],
            ['多喜娃', '医院地推+美团战略合作', '自营模式+医院地推三步走'],
            ['妈咪无忧', '小红书KOS矩阵', '账号矩阵打法'],
        ],
        accent: brand.SERVICE_ORANGE,
    })}
</section>

<!-- Ch3: 用户痛点VOC -->
<section class="report-section" id="ch3">
    ${HC.renderSectionHead({ eyebrow: 'CHAPTER 03', title: '用户痛点VOC', subtitle: '选择月嫂的三大顾虑', color: brand.MATERNITY_PINK })}
    ${HC.renderFindingCard({ icon: '💰', title: '价格透明顾虑', body: '用户对月嫂价格不透明是核心痛点，希望能够线上统一定价、价格公开', accent: brand.SERVICE_ORANGE })}
    ${HC.renderFindingCard({ icon: '🏆', title: '专业度信任顾虑', body: '用户判断月嫂专业度的核心信号是资质证书、客户评价、实体规模', accent: brand.TRUST_GREEN })}
    ${HC.renderFindingCard({ icon: '🛡️', title: '服务保障顾虑', body: '用户担心月嫂临时变更或服务不达标，承诺不满意换人能显著降低决策门槛', accent: brand.HONGCHENG_RED })}
</section>

<!-- Ch4: KANO×JTBD -->
<section class="report-section" id="ch4">
    ${HC.renderSectionHead({ eyebrow: 'CHAPTER 04', title: 'KANO×JTBD', subtitle: '需求分类与价值分层', color: brand.SOCIAL_PURPLE })}
    ${HC.renderTheoryBox({
        theory: 'KANO Model',
        mapping: '<b>必备型需求</b>：专业护理能力、真实资质证明<br><b>期望型需求</b>：价格透明、服务保障<br><b>兴奋型需求</b>：短剧内容种草、私人定制服务',
        accent: brand.SOCIAL_PURPLE,
    })}
</section>

<!-- Ch5: 场景四元素地图 -->
<section class="report-section" id="ch5">
    ${HC.renderSectionHead({ eyebrow: 'CHAPTER 05', title: '场景四元素地图', subtitle: '核心使用场景拆解', color: brand.BABY_BLUE })}
    ${HC.renderChannelCard({
        icon: '🤰',
        title: '产前焦虑准备',
        desc: '孕中晚期（28-40周），开始考虑坐月子方案',
        metrics: [{ value: '高', label: '紧迫性' }, { value: '30万/年', label: '潜在用户' }],
        accent: brand.BABY_BLUE,
    })}
    ${HC.renderChannelCard({
        icon: '👶',
        title: '月子期专业护理',
        desc: '宝宝出生后，需要专业护理',
        metrics: [{ value: '极高', label: '紧迫性' }, { value: '1-3月', label: '服务周期' }],
        accent: brand.MATERNITY_PINK,
    })}
</section>

<!-- Ch6: 三轴×无人地带 -->
<section class="report-section" id="ch6">
    ${HC.renderSectionHead({ eyebrow: 'CHAPTER 06', title: '三轴×无人地带', subtitle: '竞争定位分析', color: brand.COMPETITOR_GRAY })}
    ${HC.renderMatrix2x2({
        xLabel: '价格',
        yLabel: '专业度',
        xLow: '低价',
        xHigh: '高价',
        yLow: '低专业度',
        yHigh: '高专业度',
        quadrants: {
            q1: { color: brand.TRUST_GREEN, title: '高端专业', items: ['月子会所', '天鹅到家'] },
            q2: { color: brand.HONGCHENG_RED, title: '高专业+中价', items: ['洪诚到家（目标）', '好孕妈妈'] },
            q3: { color: brand.COMPETITOR_GRAY, title: '低专业+低价', items: ['社区月嫂'] },
            q4: { color: brand.SERVICE_ORANGE, title: '中专业+低价', items: ['部分社区店升级'] },
        },
        accent: brand.COMPETITOR_GRAY,
    })}
</section>

<!-- Ch7: 新机会×新渠道 -->
<section class="report-section" id="ch7">
    ${HC.renderSectionHead({ eyebrow: 'CHAPTER 07', title: '新机会×新渠道', subtitle: '增长突破口', color: brand.TRUST_GREEN })}
    ${HC.renderChannelCard({
        icon: '🏥',
        title: '医院地推',
        desc: '直接触达即将生产的精准用户，转化率远高于泛流量',
        metrics: [{ value: '50-100元', label: '客资成本' }, { value: '极高', label: '转化率' }],
        accent: brand.TRUST_GREEN,
    })}
    ${HC.renderChannelCard({
        icon: '🎬',
        title: '短剧营销',
        desc: '借南昌万亿短剧政策东风，低成本实现品牌曝光',
        metrics: [{ value: '3-5万/部', label: '冠名成本' }, { value: '高', label: '曝光性价比' }],
        accent: brand.HONGCHENG_GOLD,
    })}
</section>

<!-- Ch8: 4P配称蓝图 -->
<section class="report-section" id="ch8">
    ${HC.renderSectionHead({ eyebrow: 'CHAPTER 08', title: '4P配称蓝图', subtitle: '落地执行计划', color: brand.CORE_STRATEGY })}
    ${HC.renderDecisionList([
        '阶段一（1-3月）：搭建抖音/小红书账号矩阵 + 医院渠道BD + 美团店铺优化',
        '阶段二（3-6月）：短视频日常运营 + 首部合作短剧 + 微信私域搭建',
        '阶段三（6-12月）：多渠道付费投放 + 短剧系列化 + 医院渠道规模化',
    ], { accent: brand.CORE_STRATEGY, title: '3阶段执行路径' })}
</section>

<!-- 页脚 -->
<div class="footer">
    <div>${product} · VOC 深度洞察报告</div>
    <div style="margin-top:8px;">Generated by OpenClaw VOC System · ${new Date().toLocaleDateString('zh-CN')}</div>
</div>

</div>
<script>
// 简单的动画效果
document.querySelectorAll('.report-section').forEach((section, i) => {
    section.style.opacity = '0';
    section.style.transform = 'translateY(16px)';
    setTimeout(() => {
        section.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        section.style.opacity = '1';
        section.style.transform = 'translateY(0)';
    }, i * 80);
});
</script>
</body>
</html>`;
}

module.exports = { buildHTML, CHAPTERS, CHAPTER_SUBSECTIONS };