xw-devtool-cli 1.0.8 → 1.0.10

package/README.md

@@ -10,6 +10,7 @@
 - **图片工具**：
   - **图片格式转换**：支持 PNG、JPG、WebP 格式互转，可调整压缩质量。
   - **图片 ↔ Base64**：支持图片转 Base64 字符串，以及 Base64 还原为图片文件。
+  - **占位图生成**：快速生成指定尺寸、颜色、文字的占位图片 (Placeholder Image)。
 - **Mock 数据生成**：
   - 支持生成：英文段落 (Lorem Ipsum)、中文字符、中国居民身份证号、电子邮箱、URL、订单号、手机号、座机号。
   - 支持批量生成。
@@ -27,6 +28,7 @@
   - **特殊符号大全**：包含常用符号、箭头、数学符号、货币、希腊字母等 170+ 个符号，支持一键复制。
   - **Emoji 输入**：支持分类查看和选择常用 Emoji，一键复制到剪贴板。
   - **HTML 实体工具**：支持 HTML 实体编码与解码 (如 `&` <-> `&amp;`)。
+  - **占位图生成**：自定义尺寸、背景色、文字颜色和格式生成占位图。
 - **便捷操作**：
   - 支持文件选择对话框 (Windows)。
   - 结果自动复制到剪贴板。
@@ -59,42 +61,30 @@ xw-devtool
 =================================
       xw-devtool-cli Menu
 =================================
-1. URL Encode/Decode
-2. String Encode/Decode (Base64)
-3. Image <-> Base64
-4. Image Format Convert
-5. Time Format / Timestamp
-6. Mock Text
-7. Get UUID
-8. Chinese to Pinyin
-9. Color Converter (Hex <-> RGB)
-a. Variable Format Converter
-b. Hash Calculator (MD5/SHA/SM3)
-c. QR Code Generator
-d. Special Characters (Symbols)
-e. Emoji Picker
-f. HTML Entity Encode/Decode
+1. Image <-> Base64
+2. Image Format Convert
+3. Placeholder Image Generator
+4. QR Code Generator
+5. URL Encode/Decode
+6. String Encode/Decode (Base64)
+7. HTML Entity Encode/Decode
+8. Variable Format Converter
+9. Chinese to Pinyin
+a. Time Format / Timestamp
+b. Color Converter (Hex <-> RGB)
+c. Get UUID
+d. Hash Calculator (MD5/SHA/SM3)
+e. Mock Text
+f. Special Characters (Symbols)
+g. Emoji Picker
 0. Exit
 =================================
 ```
 
 ## 📖 详细使用指南
 
-### 1. URL 编解码
+### 1. 图片与 Base64 互转
 - 选择 `1` 进入。
-- 选择 `Encode` (编码) 或 `Decode` (解码)。
-- 输入 URL 字符串，结果自动复制。
-
-### 2. 字符串 Base64 转换
-- 选择 `2` 进入。
-- 支持三种输入源：
-  - **Clipboard**: 直接读取剪贴板内容（适合处理长文本）。
-  - **File**: 读取文本文件内容。
-  - **Manual input**: 手动粘贴或输入文本。
-- 输出支持：直接复制、保存为文件、预览后复制。
-
-### 3. 图片与 Base64 互转
-- 选择 `3` 进入。
 - **Image -> Base64**:
   - 选择图片文件（支持对话框选择）。
   - 输出 Base64 字符串（可保存为 `.txt` 文件防止控制台卡顿）。
@@ -102,72 +92,106 @@ f. HTML Entity Encode/Decode
   - 输入 Base64 字符串（支持从文件读取或剪贴板读取）。
   - 自动识别图片格式并保存为文件。
 
-### 4. 图片格式转换
-- 选择 `4` 进入。
+### 2. 图片格式转换
+- 选择 `2` 进入。
 - 选择源图片文件。
 - 选择目标格式 (PNG / JPG / WebP)。
 - 设置压缩参数（如 JPG 质量 1-100，PNG 压缩等级 0-9）。
 - 生成的新图片将保存在源文件同级目录。
 
-### 5. 时间格式化 (Time Format)
+### 3. 占位图生成 (Placeholder Image)
+- 选择 `3` 进入。
+- **模式 1：本地图片文件 (Local Image File)**
+  - 自动生成图片文件到当前目录。
+  - 支持自定义：
+    - **尺寸**: 宽度和高度 (px)。
+    - **颜色**: 背景色和文字颜色（支持 Hex 或颜色名）。
+    - **内容**: 自定义图片中间的文字（默认显示尺寸）。
+    - **格式**: 输出 PNG, JPG, WebP, GIF。
+  - 文件名默认包含时间戳，避免覆盖。
+- **模式 2：远程图片 URL (Remote Image URL)**
+  - 自动生成云端占位图链接并复制到剪贴板。
+  - 支持多个主流服务商：
+    - **Picsum Photos**: 随机风景图，支持灰度、模糊效果。
+    - **DummyImage**: 简单、经典。
+    - **Via Placeholder**: 标准占位图。
+    - **Placehold.jp**: 适合日文环境。
+    - **DevTool Tech**: 高度可定制。
+    - **FPO Img**: "For Placement Only" 风格。
+  - 支持自定义尺寸、颜色、文字等参数（视具体服务商而定）。
+
+### 4. 二维码生成
+- 选择 `4` 进入。
+- 输入文本或 URL（支持直接回车读取剪贴板）。
+- 终端直接显示二维码预览。
+- 可选保存为 PNG 图片，默认文件名包含时间戳。
+
+### 5. URL 编解码
 - 选择 `5` 进入。
-- 支持时间戳转日期字符串，或日期字符串转时间戳。
-- 直接回车可获取当前时间戳。
+- 选择 `Encode` (编码) 或 `Decode` (解码)。
+- 输入 URL 字符串，结果自动复制。
 
-### 6. Mock 数据生成
+### 6. 字符串 Base64 转换
 - 选择 `6` 进入。
-- 提供多种数据类型：英文段落、中文字符、身份证号、邮箱、手机号等。
-- 支持指定生成数量。
+- 支持三种输入源：
+  - **Clipboard**: 直接读取剪贴板内容（适合处理长文本）。
+  - **File**: 读取文本文件内容。
+  - **Manual input**: 手动粘贴或输入文本。
+- 输出支持：直接复制、保存为文件、预览后复制。
 
-### 7. UUID 生成
+### 7. HTML 实体编码/解码
 - 选择 `7` 进入。
-- 自动生成一个 UUID v4 并复制到剪贴板。
+- 支持两种编码模式：
+  - **Standard**: 仅编码特殊字符（如 `<` `>` `&` 及非 ASCII 字符）。
+  - **Everything**: 编码所有字符（包括 ASCII 字母数字）。
+- 支持直接回车读取剪贴板内容。
+- 结果自动复制到剪贴板。
 
-### 8. 中文转拼音
+### 8. 变量格式转换
 - 选择 `8` 进入。
+- 输入变量名（支持直接回车读取剪贴板）。
+- 自动展示 CamelCase, PascalCase, SnakeCase, KebabCase, ConstantCase 五种格式。
+- 选择一种格式自动复制。
+
+### 9. 中文转拼音
+- 选择 `9` 进入。
 - 输入中文字符串（支持直接回车读取剪贴板）。
 - 输出对应的拼音（无声调）。
 
-### 9. 颜色转换 (Hex <-> RGB)
-- 选择 `9` 进入。
+### 10. 时间格式化 (Time Format)
+- 选择 `a` 进入。
+- 支持时间戳转日期字符串，或日期字符串转时间戳。
+- 直接回车可获取当前时间戳。
+
+### 11. 颜色转换 (Hex <-> RGB)
+- 选择 `b` 进入。
 - 输入 Hex 颜色值 (如 #333) 或 RGB 值 (如 rgb(51,51,51))。
 - 自动转换并显示对应格式。
 
-### 10. 变量格式转换
-- 选择 `a` 进入。
-- 输入变量名（支持直接回车读取剪贴板）。
-- 自动展示 CamelCase, PascalCase, SnakeCase, KebabCase, ConstantCase 五种格式。
-- 选择一种格式自动复制。
+### 12. Get UUID
+- 选择 `c` 进入。
+- 自动生成一个 UUID v4 并复制到剪贴板。
 
-### 11. 哈希计算 (Encryption)
-- 选择 `b` 进入。
+### 13. 哈希计算 (Encryption)
+- 选择 `d` 进入。
 - 输入文本（支持直接回车读取剪贴板）。
 - 同时计算并显示 MD5, SHA1, SHA256, SHA512, SM3 哈希值。
 
-### 12. 二维码生成
-- 选择 `c` 进入。
-- 输入文本或 URL（支持直接回车读取剪贴板）。
-- 终端直接显示二维码预览。
-- 可选保存为 PNG 图片，默认文件名包含时间戳。
+### 14. Mock 数据生成
+- 选择 `e` 进入。
+- 提供多种数据类型：英文段落、中文字符、身份证号、邮箱、手机号等。
+- 支持指定生成数量。
 
-### 13. 特殊符号大全
-- 选择 `d` 进入。
+### 15. 特殊符号大全
+- 选择 `f` 进入。
 - 网格化展示常用特殊符号。
 - 输入符号对应的编号即可一键复制。
 
-### 14. Emoji 输入
-- 选择 `e` 进入。
+### 16. Emoji 输入
+- 选择 `g` 进入。
 - 分类展示常用 Emoji (表情、手势、动物、食物等)。
 - 输入编号选择并复制 Emoji 到剪贴板。
 
-### 15. HTML 实体编码/解码
-- 选择 `f` 进入。
-- 支持两种编码模式：
-  - **Standard**: 仅编码特殊字符（如 `<` `>` `&` 及非 ASCII 字符）。
-  - **Everything**: 编码所有字符（包括 ASCII 字母数字）。
-- 支持直接回车读取剪贴板内容。
-- 结果自动复制到剪贴板。
-
 ## 📄 License
 
 ISC

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xw-devtool-cli",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "type": "module",
   "description": "基于node的开发者助手cli",
   "main": "index.js",

package/src/commands/placeholderImg.js

@@ -0,0 +1,188 @@
+import inquirer from 'inquirer';
+import sharp from 'sharp';
+import path from 'path';
+import { copy } from '../utils/clipboard.js';
+import { selectFromMenu } from '../utils/menu.js';
+
+export async function placeholderImgHandler() {
+    const mode = await selectFromMenu('Generate Placeholder Image', [
+        { name: 'Local Image File', value: 'local' },
+        { name: 'Remote Image URL', value: 'remote' }
+    ]);
+
+    if (mode === 'local') {
+        await generateLocalImage();
+    } else {
+        await generateRemoteUrl();
+    }
+}
+
+async function generateLocalImage() {
+    const answers = await inquirer.prompt([
+        {
+            type: 'input',
+            name: 'width',
+            message: 'Width (px):',
+            default: '300',
+            validate: validateNumber
+        },
+        {
+            type: 'input',
+            name: 'height',
+            message: 'Height (px):',
+            default: '200',
+            validate: validateNumber
+        },
+        {
+            type: 'input',
+            name: 'bgColor',
+            message: 'Background Color (Hex/Name):',
+            default: '#cccccc'
+        },
+        {
+            type: 'input',
+            name: 'textColor',
+            message: 'Text Color (Hex/Name):',
+            default: '#333333'
+        },
+        {
+            type: 'input',
+            name: 'text',
+            message: 'Text (leave empty for size):',
+        },
+        {
+            type: 'list',
+            name: 'format',
+            message: 'Output Format:',
+            choices: ['png', 'jpg', 'webp', 'gif'],
+            default: 'png'
+        },
+        {
+            type: 'input',
+            name: 'filename',
+            message: 'Filename (without extension):',
+            default: () => `placeholder-${Date.now()}`
+        }
+    ]);
+
+    const width = parseInt(answers.width);
+    const height = parseInt(answers.height);
+    const text = answers.text || `${width}x${height}`;
+    const fontSize = Math.floor(Math.min(width, height) / 5);
+    
+    const svgImage = `
+    <svg width="${width}" height="${height}" version="1.1" xmlns="http://www.w3.org/2000/svg">
+      <rect width="100%" height="100%" fill="${answers.bgColor}" />
+      <text x="50%" y="50%" font-size="${fontSize}" fill="${answers.textColor}" text-anchor="middle" dy=".3em" font-family="Arial, sans-serif">${text}</text>
+    </svg>
+    `;
+
+    const buffer = Buffer.from(svgImage);
+    const outputFilename = `${answers.filename}.${answers.format}`;
+    const outputPath = path.resolve(process.cwd(), outputFilename);
+
+    try {
+        await sharp(buffer)
+            .toFormat(answers.format)
+            .toFile(outputPath);
+        
+        console.log(`\nImage generated successfully: ${outputPath}`);
+    } catch (error) {
+        console.error(`\nFailed to generate image: ${error.message}`);
+    }
+}
+
+async function generateRemoteUrl() {
+    const provider = await selectFromMenu('Select Provider', [
+        { name: 'Picsum Photos (Random photo)', value: 'picsum' },
+        { name: 'DummyImage (Simple)', value: 'dummyimage' },
+        { name: 'Via Placeholder (Standard)', value: 'placeholder' },
+        { name: 'Placehold.jp (JP Style)', value: 'placeholdjp' },
+        { name: 'DevTool Tech (Customizable)', value: 'devtool' },
+        { name: 'FPO Img (For Placement Only)', value: 'fpoimg' }
+    ]);
+
+    // Picsum is special (random photos)
+    if (provider === 'picsum') {
+        const answers = await inquirer.prompt([
+            { type: 'input', name: 'width', message: 'Width:', default: '300', validate: validateNumber },
+            { type: 'input', name: 'height', message: 'Height:', default: '300', validate: validateNumber },
+            { type: 'confirm', name: 'random', message: 'Add random parameter?', default: true },
+            { type: 'confirm', name: 'grayscale', message: 'Grayscale?', default: false },
+            { type: 'input', name: 'blur', message: 'Blur level (1-10, leave empty for none):', validate: (val) => !val || (parseInt(val) >= 1 && parseInt(val) <= 10) ? true : '1-10' }
+        ]);
+        
+        let url = `https://picsum.photos/${answers.width}/${answers.height}`;
+        const params = [];
+        if (answers.grayscale) params.push('grayscale');
+        if (answers.blur) params.push(`blur=${answers.blur}`);
+        if (answers.random) params.push(`random=${Math.floor(Math.random() * 1000)}`);
+        
+        if (params.length > 0) {
+            url += '?' + params.join('&');
+        }
+        
+        await finishUrl(url);
+        return;
+    }
+
+    // Common prompts for others
+    const answers = await inquirer.prompt([
+        { type: 'input', name: 'width', message: 'Width:', default: '300', validate: validateNumber },
+        { type: 'input', name: 'height', message: 'Height:', default: '300', validate: validateNumber },
+        { type: 'input', name: 'bgColor', message: 'Background Color (Hex without #):', default: 'cccccc' },
+        { type: 'input', name: 'textColor', message: 'Text Color (Hex without #):', default: '969696' },
+        { type: 'input', name: 'text', message: 'Text Content (leave empty for size):' },
+        { type: 'list', name: 'format', message: 'Format:', choices: ['png', 'jpg', 'gif'], default: 'png' }
+    ]);
+
+    let url = '';
+    const { width, height, bgColor, textColor, format } = answers;
+    const text = answers.text || `${width}x${height}`;
+    const cleanBg = bgColor.replace('#', '');
+    const cleanText = textColor.replace('#', '');
+    const encodedText = encodeURIComponent(text);
+
+    switch (provider) {
+        case 'dummyimage':
+            // https://dummyimage.com/300x300/999999/ff4400.png?text=EXAMPLE
+            url = `https://dummyimage.com/${width}x${height}/${cleanBg}/${cleanText}.${format}`;
+            if (text) url += `?text=${encodedText}`;
+            break;
+            
+        case 'placeholder':
+            // https://via.placeholder.com/640x300/999999/ff4400.png?text=example
+            url = `https://via.placeholder.com/${width}x${height}/${cleanBg}/${cleanText}.${format}`;
+            if (text) url += `?text=${encodedText}`;
+            break;
+
+        case 'placeholdjp':
+            // https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE
+            url = `https://placehold.jp/${cleanBg}/${cleanText}/${width}x${height}.${format}`;
+            if (text) url += `?text=${encodedText}`;
+            break;
+
+        case 'devtool':
+            // https://devtool.tech/api/placeholder/300/300?text=示例&color=#ffffff&bgColor=#333333
+            // Note: devtool.tech needs # for colors
+            url = `https://devtool.tech/api/placeholder/${width}/${height}?text=${encodedText}&color=%23${cleanText}&bgColor=%23${cleanBg}`;
+            break;
+
+        case 'fpoimg':
+            // https://fpoimg.com/300x300?text=example&bg_color=999999&text_color=ff4400
+            url = `https://fpoimg.com/${width}x${height}?text=${encodedText}&bg_color=${cleanBg}&text_color=${cleanText}`;
+            break;
+    }
+
+    await finishUrl(url);
+}
+
+async function finishUrl(url) {
+    console.log(`\nGenerated URL:\n${url}\n`);
+    await copy(url);
+}
+
+function validateNumber(input) {
+    const val = parseInt(input);
+    return !isNaN(val) && val > 0 ? true : 'Please enter a valid positive number';
+}

package/src/index.js

@@ -15,6 +15,7 @@ import { qrcodeHandler } from './commands/qrcode.js';
 import { specialCharsHandler } from './commands/specialChars.js';
 import { emojiHandler } from './commands/emoji.js';
 import { htmlEntitiesHandler } from './commands/htmlEntities.js';
+import { placeholderImgHandler } from './commands/placeholderImg.js';
 
 process.on('SIGINT', () => {
     console.log('\nBye!');
@@ -32,21 +33,29 @@ process.on('unhandledRejection', (err) => {
 });
 
 const features = [
-    { name: 'URL Encode/Decode', value: 'url' },
-    { name: 'String Encode/Decode (Base64)', value: 'base64' },
+    // Image Tools
     { name: 'Image <-> Base64', value: 'imgBase64' },
     { name: 'Image Format Convert', value: 'imgConvert' },
-    { name: 'Time Format / Timestamp', value: 'timeFormat' },
-    { name: 'Mock Text', value: 'mock' },
-    { name: 'Get UUID', value: 'uuid' },
+    { name: 'Placeholder Image Generator', value: 'placeholderImg' },
+    { name: 'QR Code Generator', value: 'qrcode' },
+    
+    // Encode/Decode & Formatting
+    { name: 'URL Encode/Decode', value: 'url' },
+    { name: 'String Encode/Decode (Base64)', value: 'base64' },
+    { name: 'HTML Entity Encode/Decode', value: 'htmlEntities' },
+    { name: 'Variable Format Converter', value: 'variableFormat' },
     { name: 'Chinese to Pinyin', value: 'pinyin' },
+
+    // Utils (Time, Color, UUID, Hash)
+    { name: 'Time Format / Timestamp', value: 'timeFormat' },
     { name: 'Color Converter (Hex <-> RGB)', value: 'color' },
-    { name: 'Variable Format Converter', value: 'variableFormat' },
+    { name: 'Get UUID', value: 'uuid' },
     { name: 'Hash Calculator (MD5/SHA/SM3)', value: 'hashing' },
-    { name: 'QR Code Generator', value: 'qrcode' },
+
+    // Content/Mocking
+    { name: 'Mock Text', value: 'mock' },
     { name: 'Special Characters (Symbols)', value: 'specialChars' },
-    { name: 'Emoji Picker', value: 'emoji' },
-    { name: 'HTML Entity Encode/Decode', value: 'htmlEntities' }
+    { name: 'Emoji Picker', value: 'emoji' }
 ];
 
 async function main() {
@@ -170,6 +179,9 @@ async function handleAction(action) {
         case 'htmlEntities':
             await htmlEntitiesHandler();
             break;
+        case 'placeholderImg':
+            await placeholderImgHandler();
+            break;
         default:
             console.log('Feature not implemented yet.');
     }