fmode-voc-projects/scripts/tools/hongchengdaojia/hongcheng-components.js

// ==============================================================================
// 洪城到家 · VOC 报告共享 UI 组件
// ==============================================================================

const BRAND = {
    HONGCHENG_RED: '#E63946',
    HONGCHENG_GOLD: '#F4A261',
    MATERNITY_PINK: '#FFB4C2',
    BABY_BLUE: '#89CFF0',
    TRUST_GREEN: '#2D9C5D',
    SERVICE_ORANGE: '#FF8C42',
    SOCIAL_PURPLE: '#8B5CF6',
    COMPETITOR_GRAY: '#6C757D',
    WARM_CREAM: '#FFF4E6',
    CORE_STRATEGY: '#1D3557',
};

const PLATFORM_LABELS = {
    xhs: { name: '小红书', color: '#FF2442', short: '红' },
    douyin: { name: '抖音', color: '#1A1A1A', short: '抖' },
    meituan: { name: '美团', color: '#FFD100', short: '美' },
    unknown: { name: '其他', color: '#888', short: '—' },
};

const SENTIMENT_LABELS = {
    positive: { label: '好评', color: '#2D9C5D', icon: '▲' },
    neutral: { label: '中性', color: '#888', icon: '●' },
    negative: { label: '差评', color: '#E63946', icon: '▼' },
    conflicted: { label: '矛盾', color: '#FF8C42', icon: '◆' },
};

function esc(s) {
    return String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
}

function fmtLikes(n) {
    if (n == null) return '0';
    if (n >= 10000) return (n / 10000).toFixed(1).replace(/\.0$/, '') + 'w';
    if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, '') + 'k';
    return String(n);
}

function truncate(s, n = 160) {
    s = String(s ?? '');
    return s.length > n ? s.slice(0, n - 1) + '…' : s;
}

function renderVocCard(item, opts = {}) {
    const { accent = BRAND.HONGCHENG_RED, showBasis = false, compact = false, maxChars = 240 } = opts;
    const pf = PLATFORM_LABELS[item.platform] || PLATFORM_LABELS.unknown;
    const sen = SENTIMENT_LABELS[item.sentiment] || SENTIMENT_LABELS.neutral;
    const isSeed = (item.source || '').includes('pattern') || (item.source || '').includes('seed');
    const tags = Array.isArray(item.tags) ? item.tags.slice(0, 3) : [];

    return `<div style="background:var(--bg-1); border:1px solid var(--border); border-left:3px solid ${accent}; border-radius:var(--radius-sm); padding:${compact ? '12px 14px' : '16px 18px'}; display:flex; flex-direction:column; gap:${compact ? '8px' : '10px'};">
  <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;">
    <div style="display:flex; align-items:center; gap:6px;">
      <span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:${pf.color}22; color:${pf.color}; font-size:0.62rem; font-weight:700;">${pf.short}</span>
      <span style="color:var(--text-1); font-size:0.78rem; font-weight:600;">${esc(item.nickname || '匿名用户')}</span>
      ${item.ip ? `<span style="color:var(--text-3); font-size:0.68rem;">· ${esc(item.ip)}</span>` : ''}
      ${item.keyword ? `<span style="color:var(--text-3); font-size:0.66rem; font-family:var(--font-mono);">· ${esc(item.keyword)}</span>` : ''}
    </div>
    <div style="display:flex; align-items:center; gap:6px;">
      <span style="color:${sen.color}; font-size:0.7rem; font-weight:600;">${sen.icon} ${sen.label}</span>
      <span style="color:var(--text-3); font-size:0.68rem; font-family:var(--font-mono);">♥${fmtLikes(item.likes)}</span>
      ${isSeed ? `<span style="padding:1px 6px; background:${BRAND.MATERNITY_PINK}18; color:${BRAND.MATERNITY_PINK}; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;">◈模式</span>` : `<span style="padding:1px 6px; background:${BRAND.HONGCHENG_RED}18; color:${BRAND.HONGCHENG_RED}; border-radius:10px; font-size:0.6rem; font-family:var(--font-mono); font-weight:700;">✓真实</span>`}
    </div>
  </div>
  <div style="color:var(--text-1); font-size:${compact ? '0.86rem' : '0.92rem'}; line-height:1.62;">"${esc(truncate(item.content, maxChars))}"</div>
  ${tags.length ? `<div style="display:flex; flex-wrap:wrap; gap:4px;">
    ${tags.map((t) => `<span style="padding:2px 8px; background:${accent}12; color:${accent}; border-radius:3px; font-size:0.68rem; font-weight:600;">${esc(t)}</span>`).join('')}
  </div>` : ''}
  ${showBasis && item.basis ? `<div style="color:var(--text-3); font-size:0.66rem; font-family:var(--font-mono); letter-spacing:0.05em; padding-top:6px; border-top:1px dashed var(--border);">依据：${esc(item.basis)}</div>` : ''}
</div>`;
}

function renderVocGrid(items, opts = {}) {
    const { columns = 2, accent = BRAND.HONGCHENG_RED, compact = false, maxChars } = opts;
    return `<div style="display:grid; grid-template-columns:repeat(${columns}, 1fr); gap:14px;">
    ${items.map((it) => renderVocCard(it, { accent, compact, maxChars })).join('')}
  </div>`;
}

function renderInsightHero({ eyebrow, title, subtitle, color = BRAND.HONGCHENG_RED }) {
    return `<div class="rise-in" style="padding:28px 32px; background:linear-gradient(135deg, ${color}12, ${color}04); border-left:4px solid ${color}; border-radius:var(--radius-md); margin-bottom:32px;">
    ${eyebrow ? `<div class="text-mono text-xs" style="color:${color}; letter-spacing:0.18em; margin-bottom:10px; font-weight:700;">${esc(eyebrow)}</div>` : ''}
    <div style="color:var(--text-1); font-size:1.18rem; line-height:1.72; font-weight:600;">${title}</div>
    ${subtitle ? `<div style="color:var(--text-2); font-size:0.92rem; line-height:1.7; margin-top:10px;">${subtitle}</div>` : ''}
  </div>`;
}

function renderDecisionList(items, opts = {}) {
    const { accent = BRAND.CORE_STRATEGY, title = 'DECISION · 落地决策项', columns = 2 } = opts;
    return `<div class="fade-up" style="margin-top:24px; padding:22px 26px; background:${accent}08; border:1px solid ${accent}33; border-radius:var(--radius-md);">
    <div class="text-mono text-xs" style="color:${accent}; letter-spacing:0.2em; margin-bottom:14px; font-weight:700;">${esc(title)}</div>
    <div style="display:grid; grid-template-columns:repeat(${columns}, 1fr); gap:14px;">
      ${items.map((it, i) => `
      <div style="display:flex; gap:10px; align-items:flex-start;">
        <div style="flex-shrink:0; width:22px; height:22px; border-radius:50%; background:${accent}; color:#fff; font-size:0.72rem; font-weight:700; display:flex; align-items:center; justify-content:center;">${i + 1}</div>
        <div style="color:var(--text-1); font-size:0.9rem; line-height:1.64;">${it}</div>
      </div>`).join('')}
    </div>
  </div>`;
}

function renderTheoryBox({ theory, mapping, accent = BRAND.SOCIAL_PURPLE }) {
    return `<div class="fade-up" style="margin-top:24px; padding:22px 26px; background:linear-gradient(135deg, ${accent}0E, transparent); border:1px solid ${accent}30; border-radius:var(--radius-md);">
    <div class="text-mono text-xs" style="color:${accent}; letter-spacing:0.2em; margin-bottom:12px; font-weight:700;">THEORY · ${esc(theory)}</div>
    <div style="color:var(--text-1); font-size:0.95rem; line-height:1.72;">${mapping}</div>
  </div>`;
}

function renderTagCloud(tagGroups, opts = {}) {
    const { accent = BRAND.SERVICE_ORANGE, top = 15, title = '主题分布' } = opts;
    const list = tagGroups.slice(0, top);
    if (!list.length) return '';
    const maxCount = Math.max(...list.map((g) => g.count));
    return `<div style="padding:20px 22px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
    <div class="text-mono text-xs" style="color:${accent}; letter-spacing:0.15em; margin-bottom:14px; font-weight:700;">${esc(title)} · TOP ${list.length}</div>
    <div style="display:flex; flex-wrap:wrap; gap:8px; align-items:center;">
      ${list.map((g) => {
          const ratio = g.count / maxCount;
          const fs = (0.72 + ratio * 0.45).toFixed(2);
          const bg = Math.round(10 + ratio * 30);
          return `<span style="padding:6px 12px; background:${accent}${String(bg).padStart(2, '0')}; color:${accent}; border-radius:16px; font-size:${fs}rem; font-weight:${Math.round(500 + ratio * 300)}; letter-spacing:0.02em;">${esc(g.tag)} <span style="opacity:0.7; font-size:0.8em; font-family:var(--font-mono);">×${g.count}</span></span>`;
      }).join('')}
    </div>
  </div>`;
}

function renderStatStrip(stats, opts = {}) {
    const { accent = BRAND.HONGCHENG_RED } = opts;
    return `<div style="display:grid; grid-template-columns:repeat(${stats.length}, 1fr); gap:12px; padding:18px 22px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
    ${stats.map((s) => `
    <div style="text-align:center;">
      <div style="font-family:var(--font-head); font-size:1.8rem; font-weight:800; color:${s.color || accent}; letter-spacing:-0.02em;">${s.num}</div>
      <div style="color:var(--text-3); font-size:0.72rem; font-family:var(--font-mono); letter-spacing:0.1em; margin-top:4px;">${esc(s.label)}</div>
      ${s.delta ? `<div style="color:${s.deltaColor || accent}; font-size:0.7rem; margin-top:2px;">${esc(s.delta)}</div>` : ''}
    </div>`).join('')}
  </div>`;
}

function renderBarChart(rows, opts = {}) {
    const { accent = BRAND.HONGCHENG_RED, height = 260, title = '' } = opts;
    const max = Math.max(...rows.map((r) => r.value), 1);
    const barH = 28;
    const gap = 10;
    const padL = 160;
    const padR = 80;
    const padV = 16;
    const totalH = rows.length * (barH + gap) + padV * 2;
    const W = 900;

    return `<div style="padding:18px 22px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
    ${title ? `<div class="text-mono text-xs" style="color:${accent}; letter-spacing:0.15em; margin-bottom:12px; font-weight:700;">${esc(title)}</div>` : ''}
    <svg viewBox="0 0 ${W} ${totalH}" style="width:100%; height:auto; max-height:${height}px;" preserveAspectRatio="xMidYMid meet">
      ${rows.map((r, i) => {
          const y = padV + i * (barH + gap);
          const w = (r.value / max) * (W - padL - padR);
          const color = r.color || accent;
          return `
        <text x="${padL - 10}" y="${y + barH / 2 + 5}" text-anchor="end" font-size="13" font-weight="600" fill="var(--text-1, #333)">${esc(r.label)}</text>
        <rect x="${padL}" y="${y}" width="${w}" height="${barH}" rx="4" fill="${color}" opacity="0.85"/>
        <text x="${padL + w + 8}" y="${y + barH / 2 + 5}" font-size="13" font-weight="700" fill="${color}" font-family="monospace">${esc(r.valueLabel || r.value)}</text>
      `;
      }).join('')}
    </svg>
  </div>`;
}

function renderMatrix2x2({ xLabel, yLabel, xLow, xHigh, yLow, yHigh, quadrants, accent = BRAND.SERVICE_ORANGE }) {
    const q1 = quadrants.q1;
    const q2 = quadrants.q2;
    const q3 = quadrants.q3;
    const q4 = quadrants.q4;

    const renderQuad = (q) => `
      <div style="padding:16px; background:${q.color}08; border:1px solid ${q.color}40; border-radius:6px; height:100%; display:flex; flex-direction:column;">
        <div class="text-mono text-xs" style="color:${q.color}; letter-spacing:0.15em; margin-bottom:8px; font-weight:700;">${esc(q.title)}</div>
        <ul style="color:var(--text-1); font-size:0.82rem; line-height:1.55; margin:0; padding-left:18px; list-style:disc;">
          ${q.items.map((it) => `<li style="margin-bottom:4px;">${it}</li>`).join('')}
        </ul>
        ${q.note ? `<div style="margin-top:auto; padding-top:10px; color:${q.color}; font-size:0.74rem; font-style:italic;">${q.note}</div>` : ''}
      </div>`;

    return `<div style="padding:20px 26px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
    <div style="display:grid; grid-template-columns:52px 1fr 1fr; grid-template-rows:auto 1fr 1fr 40px; gap:12px; height:520px;">
      <div style="grid-row:2 / span 2; grid-column:1; display:flex; align-items:center; justify-content:center; transform:rotate(-90deg); white-space:nowrap;">
        <span class="text-mono text-xs" style="color:${accent}; letter-spacing:0.2em; font-weight:700;">${esc(yLabel)}</span>
      </div>
      <div style="grid-row:1; grid-column:2; text-align:center;"><span class="text-mono text-xs" style="color:${q2.color}; font-weight:700;">${esc(yHigh)}</span></div>
      <div style="grid-row:1; grid-column:3; text-align:center;"><span class="text-mono text-xs" style="color:${q1.color}; font-weight:700;">${esc(yHigh)}</span></div>
      <div style="grid-row:2; grid-column:2;">${renderQuad(q2)}</div>
      <div style="grid-row:2; grid-column:3;">${renderQuad(q1)}</div>
      <div style="grid-row:3; grid-column:2;">${renderQuad(q3)}</div>
      <div style="grid-row:3; grid-column:3;">${renderQuad(q4)}</div>
      <div style="grid-row:4; grid-column:2; text-align:center;"><span class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.15em;">${esc(xLow)}  ←  ${esc(xLabel)}  →  ${esc(xHigh)}</span></div>
      <div style="grid-row:4; grid-column:3;"></div>
    </div>
  </div>`;
}

function renderSectionHead({ eyebrow, title, subtitle, color = BRAND.HONGCHENG_RED }) {
    return `<div class="section-head rise-in">
    <div class="section-eyebrow" style="color:${color};">${esc(eyebrow)}</div>
    <h2 class="text-h1"><span class="headline-anim">${title}</span></h2>
    ${subtitle ? `<p class="section-sub">${subtitle}</p>` : ''}
  </div>`;
}

function renderCompareTable({ title, headers, rows, accent = BRAND.HONGCHENG_RED }) {
    return `<div style="padding:18px 22px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
    ${title ? `<div class="text-mono text-xs" style="color:${accent}; letter-spacing:0.15em; margin-bottom:12px; font-weight:700;">${esc(title)}</div>` : ''}
    <table style="width:100%; border-collapse:collapse; font-size:0.88rem;">
      <thead>
        <tr style="border-bottom:2px solid ${accent}33;">
          ${headers.map((h, i) => `<th style="text-align:${i === 0 ? 'left' : 'center'}; padding:10px 6px; color:${i === 0 ? 'var(--text-3)' : accent}; font-weight:700; font-size:0.8rem; letter-spacing:0.05em;">${esc(h)}</th>`).join('')}
        </tr>
      </thead>
      <tbody>
        ${rows.map((r, ri) => `<tr style="border-bottom:1px solid var(--border);">
          ${r.map((cell, ci) => {
              const isHeader = ci === 0;
              const content = typeof cell === 'string' ? cell : (cell.html || '');
              const cellColor = typeof cell === 'object' && cell.color ? cell.color : (isHeader ? 'var(--text-2)' : 'var(--text-1)');
              const weight = typeof cell === 'object' && cell.bold ? '700' : '400';
              return `<td style="padding:${ri === rows.length - 1 ? '12px' : '10px'} 6px; color:${cellColor}; text-align:${isHeader ? 'left' : 'center'}; font-weight:${weight};">${content}</td>`;
          }).join('')}
        </tr>`).join('')}
      </tbody>
    </table>
  </div>`;
}

function renderFindingCard({ icon = '💡', title, body, accent = BRAND.SERVICE_ORANGE }) {
    return `<div style="padding:20px 24px; background:${accent}08; border-left:3px solid ${accent}; border-radius:6px;">
    <div style="display:flex; align-items:center; gap:10px; margin-bottom:10px;">
      <span style="font-size:1.4rem;">${icon}</span>
      <div style="color:${accent}; font-weight:700; font-size:0.96rem;">${esc(title)}</div>
    </div>
    <div style="color:var(--text-1); font-size:0.88rem; line-height:1.7;">${body}</div>
  </div>`;
}

function renderHypothesisBadge(h, opts = {}) {
    const { accent = BRAND.SOCIAL_PURPLE, size = 'md' } = opts;
    const fs = size === 'sm' ? '0.64rem' : size === 'lg' ? '0.82rem' : '0.72rem';
    const px = size === 'sm' ? '3px 8px' : size === 'lg' ? '6px 14px' : '4px 10px';
    return `<span style="padding:${px}; background:${accent}15; color:${accent}; border:1px solid ${accent}44; border-radius:12px; font-size:${fs}; font-family:var(--font-mono); letter-spacing:0.05em; font-weight:700;">${esc(h)}</span>`;
}

function renderChannelCard({ icon = '🏥', title, desc, metrics, accent = BRAND.TRUST_GREEN }) {
    return `<div style="padding:20px 24px; background:${accent}08; border:1px solid ${accent}30; border-radius:var(--radius-md);">
    <div style="display:flex; align-items:center; gap:12px; margin-bottom:12px;">
      <span style="font-size:1.8rem;">${icon}</span>
      <div>
        <div style="color:${accent}; font-weight:700; font-size:1rem;">${esc(title)}</div>
        <div style="color:var(--text-2); font-size:0.82rem;">${esc(desc)}</div>
      </div>
    </div>
    <div style="display:flex; gap:16px; flex-wrap:wrap;">
      ${metrics.map((m) => `<div style="text-align:center;">
        <div style="font-size:1.4rem; font-weight:800; color:${accent};">${esc(m.value)}</div>
        <div style="color:var(--text-3); font-size:0.7rem;">${esc(m.label)}</div>
      </div>`).join('')}
    </div>
  </div>`;
}

module.exports = {
    BRAND,
    PLATFORM_LABELS,
    SENTIMENT_LABELS,
    esc,
    fmtLikes,
    truncate,
    renderVocCard,
    renderVocGrid,
    renderInsightHero,
    renderDecisionList,
    renderTheoryBox,
    renderTagCloud,
    renderStatStrip,
    renderBarChart,
    renderMatrix2x2,
    renderSectionHead,
    renderCompareTable,
    renderFindingCard,
    renderHypothesisBadge,
    renderChannelCard,
};