651cc9e1fd
MODULE-COVER-001: full package for external AI consumption - server.js + renderer.js + generate.js + config.js - templates/ (5 templates: xiaohongshu + dynamic + jike + poster + registry) - package.json + README.md + MODULE.hdlp - INDEX.hdlp + SYSTEM.hdlp (HLDP declarations) - Fonts: Noto Sans CJK SC priority (no tofu blocks) - No domain watermark - Updated module-registry.json - Copyright 2026-A-00037559
217 lines
8.0 KiB
JavaScript
217 lines
8.0 KiB
JavaScript
/**
|
|
* 小红书封面 v5 · 圆角卡片 + 卡通插画风格
|
|
* 奶白底色 + 大圆角 + 简洁层级
|
|
*/
|
|
export function xiaohongshuCard(renderData) {
|
|
const { title='', body='', subtitle='', tag='', cssVars={} } = renderData;
|
|
const v = cssVars || {};
|
|
const getv = (k) => v[k] || v['--'+k] || v['--'+k.replace(/([A-Z])/g,'-$1').toLowerCase()];
|
|
|
|
// 配色：奶白底 + 深绿/深棕文字 + 点缀色
|
|
const bg = getv('bg') || '#FDF8F3'; // 奶白底色
|
|
const cardBg = getv('cardBg') || '#FFFFFF'; // 纯白卡片
|
|
const primary = getv('primary') || '#2D5016'; // 深墨绿
|
|
const accent = getv('accent') || '#E07B39'; // 焦糖橙
|
|
const blue = getv('blue') || '#4A90A4'; // 雾蓝
|
|
const green = getv('green') || '#5B8C5A'; // 苔藓绿
|
|
const muted = getv('muted') || '#8B8680'; // 灰棕
|
|
const textDark = '#1A1A1A';
|
|
|
|
const titleText = title || '零手搓 AI 封面生成器';
|
|
const subLines = (subtitle || '不用GPU|纯代码渲染|开源免费').split('|').filter(Boolean);
|
|
const techStack = (tag || 'Puppeteer,Node.js,Express').split(',').map(s=>s.trim()).filter(Boolean);
|
|
|
|
// 卡通场景 SVG - 程序员在小桌子前工作
|
|
const cartoonSVG = `<svg viewBox="0 0 400 280" style="width:100%;height:auto">
|
|
<!-- 桌子 -->
|
|
<ellipse cx="200" cy="240" rx="140" ry="25" fill="#D4A574"/>
|
|
<rect x="80" y="150" width="240" height="90" rx="8" fill="#C49A6C"/>
|
|
<!-- 笔记本电脑 -->
|
|
<rect x="140" y="130" width="120" height="80" rx="6" fill="#3A3A3A"/>
|
|
<rect x="150" y="140" width="100" height="60" rx="2" fill="#5B8C5A"/>
|
|
<rect x="155" y="145" width="90" height="8" rx="1" fill="#7BC47B"/>
|
|
<rect x="155" y="158" width="60" height="4" rx="1" fill="#9AD89A"/>
|
|
<rect x="155" y="168" width="75" height="4" rx="1" fill="#9AD89A"/>
|
|
<!-- 人 -->
|
|
<ellipse cx="200" cy="95" rx="35" ry="40" fill="#F5D0C5"/> <!-- 头 -->
|
|
<path d="M165 80 Q200 60 235 80" stroke="#4A3728" stroke-width="12" fill="none"/> <!-- 头发 -->
|
|
<ellipse cx="185" cy="90" rx="4" ry="5" fill="#4A3728"/> <!-- 眼 -->
|
|
<ellipse cx="215" cy="90" rx="4" ry="5" fill="#4A3728"/>
|
|
<path d="M190 115 Q200 120 210 115" stroke="#D4A0A0" stroke-width="3" fill="none"/> <!-- 嘴 -->
|
|
<rect x="165" y="130" width="70" height="60" rx="20" fill="#E07B39"/> <!-- 身体 -->
|
|
<rect x="150" y="145" width="20" height="50" rx="10" fill="#F5D0C5"/> <!-- 手臂 -->
|
|
<rect x="230" y="145" width="20" height="50" rx="10" fill="#F5D0C5"/>
|
|
<!-- 咖啡杯 -->
|
|
<rect x="280" y="180" width="25" height="30" rx="4" fill="#FFF"/>
|
|
<rect x="283" y="175" width="19" height="8" rx="2" fill="#6B4423"/>
|
|
<path d="M305 190 Q315 190 315 200 Q315 210 305 210" stroke="#FFF" stroke-width="3" fill="none"/>
|
|
<!-- 植物 -->
|
|
<rect x="90" y="160" width="8" height="40" fill="#8B4513"/>
|
|
<ellipse cx="94" cy="155" rx="20" ry="25" fill="#5B8C5A"/>
|
|
<ellipse cx="85" cy="140" rx="12" ry="15" fill="#6B9B6A"/>
|
|
<ellipse cx="103" cy="145" rx="12" ry="15" fill="#6B9B6A"/>
|
|
<!-- 代码气泡 -->
|
|
<rect x="260" y="60" width="80" height="50" rx="8" fill="#FFF" stroke="#E0E0E0" stroke-width="2"/>
|
|
<rect x="270" y="72" width="40" height="6" rx="2" fill="#5B8C5A"/>
|
|
<rect x="270" y="84" width="55" height="6" rx="2" fill="#4A90A4"/>
|
|
<rect x="270" y="96" width="35" height="6" rx="2" fill="#E07B39"/>
|
|
<polygon points="260,105 270,95 270,115" fill="#FFF" stroke="#E0E0E0" stroke-width="0"/>
|
|
<!-- 装饰星星 -->
|
|
<text x="350" y="100" font-size="20" fill="#FFD700">✦</text>
|
|
<text x="60" y="80" font-size="16" fill="#4A90A4">✦</text>
|
|
</svg>`;
|
|
|
|
return `<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><style>
|
|
* {margin:0;padding:0;box-sizing:border-box}
|
|
body {
|
|
width:1080px;height:1440px;overflow:hidden;
|
|
font-family:'Noto Sans CJK SC','WenQuanYi Micro Hei','PingFang SC',sans-serif;
|
|
background:${bg};position:relative;display:flex;justify-content:center;align-items:center;
|
|
}
|
|
|
|
/* 外层大卡片 */
|
|
.card {
|
|
width:960px;height:1320px;background:${cardBg};border-radius:60px;
|
|
box-shadow:0 20px 80px rgba(0,0,0,0.08);
|
|
display:flex;flex-direction:column;padding:50px 60px 40px;
|
|
position:relative;overflow:hidden;
|
|
}
|
|
|
|
/* 装饰圆 */
|
|
.deco-circle-1 {
|
|
position:absolute;top:-100px;right:-80px;width:320px;height:320px;
|
|
border-radius:50%;background:radial-gradient(circle,${accent}18 0%,transparent 70%);
|
|
}
|
|
.deco-circle-2 {
|
|
position:absolute;bottom:200px;left:-60px;width:180px;height:180px;
|
|
border-radius:50%;background:radial-gradient(circle,${blue}12 0%,transparent 70%);
|
|
}
|
|
|
|
/* 顶行标签 */
|
|
.top-row {
|
|
display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;
|
|
}
|
|
.tag-group {display:flex;gap:12px}
|
|
.tag {
|
|
padding:10px 22px;border-radius:24px;font-size:20px;font-weight:700;
|
|
background:${bg};border:2px solid ${accent}30;color:${primary};
|
|
}
|
|
.tag.hl {background:${accent}15;border-color:${accent}50}
|
|
.corner-text {
|
|
font-size:18px;color:${muted};font-weight:500;
|
|
}
|
|
|
|
/* 主标题区 */
|
|
.title-block {text-align:center;margin-bottom:20px}
|
|
.title-block h1 {
|
|
font-size:72px;font-weight:800;color:${textDark};line-height:1.2;letter-spacing:2px;
|
|
}
|
|
.title-block .hl {color:${primary};position:relative;display:inline-block}
|
|
.title-block .hl::after {
|
|
content:'';position:absolute;bottom:8px;left:-4px;right:-4px;height:16px;
|
|
background:${accent}40;border-radius:8px;z-index:-1;
|
|
}
|
|
|
|
/* 副标题 */
|
|
.subtitle-row {
|
|
display:flex;justify-content:center;gap:16px;margin-bottom:32px;flex-wrap:wrap;
|
|
}
|
|
.sub-pill {
|
|
padding:10px 24px;border-radius:30px;background:${bg};
|
|
font-size:22px;font-weight:600;color:${primary};
|
|
}
|
|
|
|
/* 卡通区 */
|
|
.cartoon-area {
|
|
flex:1;display:flex;align-items:center;justify-content:center;
|
|
margin:20px 0;
|
|
}
|
|
.cartoon-box {
|
|
width:420px;height:300px;
|
|
}
|
|
|
|
/* 底部信息卡 */
|
|
.bottom-cards {
|
|
display:flex;gap:20px;margin-bottom:24px;
|
|
}
|
|
.info-card {
|
|
flex:1;background:${bg};border-radius:24px;padding:24px 20px;text-align:center;
|
|
border:2px solid transparent;transition:border-color 0.2s;
|
|
}
|
|
.info-card:hover {border-color:${accent}40}
|
|
.info-card .num {
|
|
font-size:48px;font-weight:800;color:${primary};line-height:1;
|
|
}
|
|
.info-card .num small {font-size:24px;font-weight:600;margin-left:4px}
|
|
.info-card .label {
|
|
font-size:20px;color:${muted};margin-top:8px;font-weight:500;
|
|
}
|
|
|
|
/* 底部技术栈 */
|
|
.tech-row {
|
|
display:flex;align-items:center;justify-content:center;gap:12px;
|
|
padding:16px 0;border-top:2px solid ${bg};
|
|
}
|
|
.tech-row .t-label {
|
|
font-size:18px;color:${muted};font-weight:600;
|
|
}
|
|
.tech-row .t-chip {
|
|
padding:8px 18px;border-radius:16px;font-size:18px;font-weight:600;
|
|
background:${cardBg};border:2px solid ${accent}25;color:${primary};
|
|
}
|
|
|
|
/* 水印 */
|
|
.wm {
|
|
position:absolute;bottom:20px;right:40px;font-size:16px;color:${muted}40;
|
|
}
|
|
</style></head><body>
|
|
|
|
<div class="card">
|
|
<div class="deco-circle-1"></div>
|
|
<div class="deco-circle-2"></div>
|
|
|
|
<div class="top-row">
|
|
<div class="tag-group">
|
|
<span class="tag hl">🤖 AI辅助开发</span>
|
|
<span class="tag">💰 开源免费</span>
|
|
</div>
|
|
<span class="corner-text"></span>
|
|
</div>
|
|
|
|
<div class="title-block">
|
|
<h1>${titleText.replace(/(.{4,6})(.+)/, '$1<span class="hl">$2</span>')}</h1>
|
|
</div>
|
|
|
|
<div class="subtitle-row">
|
|
${subLines.map(s=>`<span class="sub-pill">${s}</span>`).join('')}
|
|
</div>
|
|
|
|
<div class="cartoon-area">
|
|
<div class="cartoon-box">${cartoonSVG}</div>
|
|
</div>
|
|
|
|
<div class="bottom-cards">
|
|
<div class="info-card">
|
|
<div class="num">0<small>GPU</small></div>
|
|
<div class="label">纯CSS排版</div>
|
|
</div>
|
|
<div class="info-card">
|
|
<div class="num">${techStack.length}<small>项</small></div>
|
|
<div class="label">开源技术栈</div>
|
|
</div>
|
|
<div class="info-card">
|
|
<div class="num">∞<small>扩展</small></div>
|
|
<div class="label">模块化设计</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tech-row">
|
|
<span class="t-label">🛠 技术栈</span>
|
|
${techStack.slice(0,5).map(t=>`<span class="t-chip">${t}</span>`).join('')}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body></html>`;
|
|
}
|