search-syntax-pro/docs/STORE_ASSETS_GUIDE.md

📐 商店资产准备指南

快速开始

1️⃣ 准备原始截图

将你的原始截图文件放到 screenshots/ 目录：

mkdir screenshots
# 将截图文件复制到此目录

支持的格式：PNG, JPG, JPEG, WebP

---

2️⃣ 使用便捷命令处理

# 处理商店截图 (1280x800)
npm run resize:screenshots

# 处理扩展徽标 (300x300)
npm run resize:logo

# 处理小促销磁贴 (440x280)
npm run resize:promo-small

# 处理大型促销磁贴 (1400x560)
npm run resize:promo-large

# 一键处理所有尺寸
npm run resize:all

---

3️⃣ 获取处理后的文件

所有处理后的文件会保存在 store-assets/ 目录，可以直接上传到商店。

---

🎨 高级用法

自定义背景颜色

# 白色背景（适合非透明图片）
node scripts/resize-screenshots.js screenshot ./screenshots ./store-assets --background=white

# 自定义 hex 颜色
node scripts/resize-screenshots.js screenshot ./screenshots ./store-assets --background=#F0F0F0

自定义对齐方式

# 顶部对齐
node scripts/resize-screenshots.js screenshot ./screenshots ./store-assets --position=top

# 底部对齐
node scripts/resize-screenshots.js screenshot ./screenshots ./store-assets --position=bottom

# 左对齐
node scripts/resize-screenshots.js screenshot ./screenshots ./store-assets --position=left

# 右对齐
node scripts/resize-screenshots.js screenshot ./screenshots ./store-assets --position=right

# 居中对齐（默认）
node scripts/resize-screenshots.js screenshot ./screenshots ./store-assets --position=center

---

📏 支持的预设尺寸

预设名称	尺寸	用途	命令
screenshot	1280x800	商店截图	npm run resize:screenshots
screenshot-small	640x400	小尺寸截图	需手动指定
logo	300x300	扩展徽标	npm run resize:logo
small-promo	440x280	小促销磁贴	npm run resize:promo-small
large-promo	1400x560	大型促销磁贴	npm run resize:promo-large

---

💡 使用技巧

1. 批量处理不同类型的图片

# 将不同类型的原始文件放到不同目录
mkdir screenshots/store-screenshots
mkdir screenshots/logos
mkdir screenshots/promos

# 分别处理
node scripts/resize-screenshots.js screenshot ./screenshots/store-screenshots ./store-assets
node scripts/resize-screenshots.js logo ./screenshots/logos ./store-assets
node scripts/resize-screenshots.js small-promo ./screenshots/promos ./store-assets

2. 预览处理效果

在处理前，先用单个文件测试：

mkdir test-input test-output
cp your-screenshot.png test-input/
node scripts/resize-screenshots.js screenshot ./test-input ./test-output
# 检查 test-output/ 中的结果

3. 保持原图质量

脚本自动保持图片纵横比，只缩放到能完整显示在目标画布上的最大尺寸，不会拉伸变形。

4. 文件命名建议

为了便于管理，建议使用有意义的文件名：

screenshots/
  ├── main-interface.png          → 主界面
  ├── advanced-search.png         → 高级搜索
  ├── search-history.png          → 搜索历史
  ├── settings-page.png           → 设置页面
  ├── multi-engine-support.png    → 多引擎支持
  └── dark-theme.png              → 深色主题

---

🚨 常见问题

Q: 图片太大，处理后文件太大怎么办？

A: 可以先用其他工具压缩图片，或者调整原图质量：

# 使用 ImageMagick 压缩
convert input.png -quality 85 -strip compressed.png

# 然后再用脚本处理
node scripts/resize-screenshots.js screenshot ./compressed ./output

Q: 透明背景在某些地方显示为黑色？

A: 这通常是因为某些图片查看器不支持透明度。在浏览器或 Preview（预览）中打开可以正确显示透明背景。

Q: 可以处理其他格式吗？

A: 支持 PNG, JPG, JPEG, WebP。输出统一为 PNG 格式（支持透明背景）。

Q: 处理后的图片模糊？

A: 脚本只会缩小图片，不会放大。如果原图分辨率低于目标尺寸，建议使用更高分辨率的原图。

---

📋 Microsoft Edge 商店要求速查

必需资产

• 扩展徽标: 300x300 像素（最小 128x128）
• 屏幕截图: 1280x800 或 640x400（最多 6 张）
• 扩展描述: 明确详细地描述功能

可选资产

• 小促销磁贴: 440x280 像素
• 大型促销磁贴: 1400x560 像素
• YouTube 视频: 演示视频 URL
• 搜索词: 最多 7 个（每个 ≤30 字符）

---

🎬 完整工作流示例

# 1. 创建目录结构
mkdir -p screenshots store-assets

# 2. 准备原始截图（手动截图或从其他工具导出）
# 将文件复制到 screenshots/

# 3. 批量处理
npm run resize:all

# 4. 验证结果
ls -lh store-assets/

# 5. 上传到 Microsoft Edge 商店
# 访问: https://partner.microsoft.com/zh-cn/dashboard/microsoftedge/

---

🔗 相关资源

• Microsoft Edge 扩展开发者指南
• 商店发布要求
• Sharp 文档

---

提示: 如有问题或需要帮助，请参考项目 README 或提交 Issue。