@lark-project/cli
Version:
飞书项目插件开发工具
86 lines (85 loc) • 4.6 kB
JavaScript
"use strict";
/**
* 从预设的插件风格图标中随机选择一个，搭配随机背景色生成 SVG。
* 返回 Buffer，可直接作为图片上传。
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.generateBuilderIconSvg = exports.generateIconSvg = void 0;
const COLORS = [
'#4C6EF5', '#7950F2', '#BE4BDB', '#E64980', '#FA5252',
'#FD7E14', '#FAB005', '#40C057', '#12B886', '#15AABF',
'#228BE6', '#3B5BDB', '#5C7CFA', '#845EF7', '#DA77F2',
'#FF6B6B', '#F06595', '#CC5DE8', '#20C997', '#339AF0',
];
/**
* 每个图标是一个 SVG path/形状片段，会被嵌入到 112x112 的画布中。
* 图标区域居中在 56,56，大小约 56x56。
*/
const ICON_TEMPLATES = [
// 1. 拼图块 (Puzzle) — 经典插件图标
`<path d="M52 34h-6a4 4 0 0 0-4 4v6h-6a4 4 0 0 0-4 4v24a4 4 0 0 0 4 4h24a4 4 0 0 0 4-4v-6h6a4 4 0 0 0 4-4V38a4 4 0 0 0-4-4h-6v-2a6 6 0 1 0-12 0v2z"
fill="none" stroke="#fff" stroke-width="3.5" stroke-linejoin="round"/>
<circle cx="64" cy="58" r="4" fill="#fff" opacity="0.6"/>`,
// 2. 闪电 (Lightning) — 功能增强
`<path d="M60 30L42 60h14l-4 22 22-32H58l2-20z"
fill="#fff" stroke="#fff" stroke-width="1.5" stroke-linejoin="round"/>`,
// 3. 魔法棒 (Magic Wand) — 自动化
`<path d="M38 74l30-30m-30 30l-4 4m34-34l4-4" stroke="#fff" stroke-width="3.5" stroke-linecap="round"/>
<path d="M68 40l4-4" stroke="#fff" stroke-width="3.5" stroke-linecap="round"/>
<circle cx="72" cy="32" r="2" fill="#fff"/>
<circle cx="80" cy="40" r="1.5" fill="#fff"/>
<circle cx="78" cy="30" r="1.5" fill="#fff"/>
<path d="M50 38l-2-6-2 6-6 2 6 2 2 6 2-6 6-2-6-2z" fill="#fff" opacity="0.7"/>
<path d="M74 54l-1.5-4.5-1.5 4.5-4.5 1.5 4.5 1.5 1.5 4.5 1.5-4.5 4.5-1.5-4.5-1.5z" fill="#fff" opacity="0.5"/>`,
// 4. 齿轮 (Gear) — 工具/配置
`<path d="M56 40a16 16 0 1 0 0 32 16 16 0 0 0 0-32zm0 10a6 6 0 1 1 0 12 6 6 0 0 1 0-12z"
fill="#fff" fill-rule="evenodd"/>
<g fill="#fff">
<rect x="53" y="28" width="6" height="8" rx="2"/>
<rect x="53" y="76" width="6" height="8" rx="2"/>
<rect x="28" y="53" width="8" height="6" rx="2"/>
<rect x="76" y="53" width="8" height="6" rx="2"/>
<rect x="33.4" y="33.4" width="6" height="8" rx="2" transform="rotate(45 36.4 37.4)"/>
<rect x="72.6" y="70.6" width="6" height="8" rx="2" transform="rotate(45 75.6 74.6)"/>
<rect x="33.4" y="70.6" width="6" height="8" rx="2" transform="rotate(-45 36.4 74.6)"/>
<rect x="72.6" y="33.4" width="6" height="8" rx="2" transform="rotate(-45 75.6 37.4)"/>
</g>`,
// 5. 火箭 (Rocket) — 加速/发布
`<path d="M56 30c-8 8-14 20-14 28a14 14 0 0 0 28 0c0-8-6-20-14-28z"
fill="none" stroke="#fff" stroke-width="3.5" stroke-linejoin="round"/>
<circle cx="56" cy="52" r="5" fill="#fff" opacity="0.7"/>
<path d="M48 70c-3 6-6 8-8 10m24-10c3 6 6 8 8 10" stroke="#fff" stroke-width="2.5" stroke-linecap="round" opacity="0.6"/>`,
// 6. 立方体 (Cube) — 模块/组件
`<path d="M56 32L32 46v24l24 14 24-14V46L56 32z"
fill="none" stroke="#fff" stroke-width="3.5" stroke-linejoin="round"/>
<path d="M32 46l24 14 24-14M56 60v24"
stroke="#fff" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>`,
];
function randomItem(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
function generateIconSvg() {
const bg = randomItem(COLORS);
const icon = randomItem(ICON_TEMPLATES);
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="112" height="112" viewBox="0 0 112 112">
<rect width="112" height="112" fill="${bg}"/>
${icon}
</svg>`;
return Buffer.from(svg, 'utf-8');
}
exports.generateIconSvg = generateIconSvg;
/**
* Builder 组件（liteAppComponent）专用图标：统一的拼图块样式 + 随机背景色。
* 与插件图标区分开——builder 组件 icon 显示在画布组件栏里，需要风格统一。
*/
function generateBuilderIconSvg() {
const bg = randomItem(COLORS);
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="112" height="112" viewBox="0 0 112 112">
<rect width="112" height="112" fill="${bg}"/>
<path d="M52 34h-6a4 4 0 0 0-4 4v6h-6a4 4 0 0 0-4 4v24a4 4 0 0 0 4 4h24a4 4 0 0 0 4-4v-6h6a4 4 0 0 0 4-4V38a4 4 0 0 0-4-4h-6v-2a6 6 0 1 0-12 0v2z"
fill="none" stroke="#fff" stroke-width="3.5" stroke-linejoin="round"/>
<circle cx="64" cy="58" r="4" fill="#fff" opacity="0.6"/>
</svg>`;
return Buffer.from(svg, 'utf-8');
}
exports.generateBuilderIconSvg = generateBuilderIconSvg;