# icon-studio

**Repository Path**: lisf0/icon-studio

## Basic Information

- **Project Name**: icon-studio
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-22
- **Last Updated**: 2026-09-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# icon-studio

纯前端 Android 启动器图标生成器

## 概述

icon-studio 是一个运行在浏览器中的 Android 应用图标生成工具，无需后端服务即可完成从源图片到多密度launcher 图标的完整生成流程。

### 核心功能

- **拖拽上传**：支持拖入任意方形/非方形图片作为源图
- **多密度输出**：自动生成 mdpi / hdpi / xhdpi / xxhdpi / xxxhdpi 五个密度级别的图标
- **双形态变体**：同时输出 square（方形）和 round（圆形）两种形态
- **WebP 无损压缩**：使用 WebP 无损编码确保最佳画质
- **ZIP 打包下载**：一键打包全部产物为可直接导入 Android Studio 的压缩包
- **国际化支持**：中文 / English 双语切换
- **明暗主题**：支持浅色/深色/跟随系统三种主题模式

### 技术栈

- 原生 JavaScript（无框架依赖）
- Alpine.js（轻量级响应式 UI）
- JSZip（前端打包）
- WebP WASM 无损编码器

## 项目结构

```
icon-studio/
├── assets/                  # 前端资源
│   ├── render.js           # 渲染核心（含 roundPy/resizeBox 算法）
│   ├── store.js            # 状态机
│   ├── ui.js               # UI 组件
│   ├── i18n.js             # 国际化模块
│   ├── theme.js            # 主题管理
│   ├── stencils.js         # 模板素材加载器
│   ├── outputs.js          # 产物契约定义
│   ├── pipeline.js         # 生成管线
│   ├── errors.js           # 错误码定义
│   ├── webp-enc.js         # WebP WASM 编码器封装
│   ├── style.css           # 组件样式
│   ├── tokens.css          # 设计令牌
│   └── vendor/             # 第三方库（Alpine.js、JSZip）
├── src_assets/             # 源素材（launcher 模板）
│   └── launcher_stencil/
│       ├── circle/         # 圆形图标模板
│       └── square/         # 方形图标模板
├── test/                   # 测试文件
│   ├── unit.js             # 单元测试
│   ├── store.js            # 状态机测试
│   ├── i18n.js             # 国际化测试
│   ├── theme.js            # 主题测试
│   ├── errors.js           # 错误码测试
│   └── golden.html         # Golden 回归测试
├── docs/                   # 设计文档与实现计划
│   ├── specs/              # 规范文档
│   └── superpowers/        # 实现计划
├── tools/                  # 构建与测试工具
│   ├── build_assets.py     # 素材构建
│   ├── build_webp_enc.py   # WebP 编码器构建
│   └── test_icon_studio.py # E2E 测试
└── index.html              # 应用入口
```

## 快速开始

### 使用预构建版本

直接打开 `index.html` 即可在浏览器中运行（推荐使用本地服务器）：

```bash
# 使用任意静态服务器
npx serve .

# 或使用 Python
python -m http.server 8080
```

然后访问 http://localhost:8080

### 开发环境

```bash
# 安装依赖
npm install

# 运行 Node 单测（第 1 层回归）
npm test

# 运行 E2E 测试（需要浏览器）
python tools/test_icon_studio.py
```

## 使用说明

1. **上传图片**：将图片拖入上传区域或点击选择文件
2. **调整参数**：可自定义背景颜色等参数
3. **预览生成**：系统在预览区展示生成的各密度图标
4. **下载产物**：点击下载按钮获取 ZIP 包，可直接导入 Android Studio

## 产物规格

生成的 ZIP 包包含以下文件结构：

```
adaptive_icon/
├── drawable-mdpi/
│   ├── ic_launcher_background.png
│   ├── ic_launcher_foreground.png
│   ├── ic_launcher.png           # square
│   └── ic_launcher_round.png     # round
├── drawable-hdpi/
│   └── ...
├── drawable-xhdpi/
│   └── ...
├── drawable-xxhdpi/
│   └── ...
├── drawable-xxxhdpi/
│   └── ...
└── drawable-anydpi-v26/
    ├── ic_launcher_background.xml
    ├── ic_launcher_foreground.xml
    └── ic_launcher.xml
playstore/
├── ic_launcher-playstore.png    # 各密度 Play Store 图标
└── ...
```

## 测试层级

本项目采用四层回归策略确保质量：

1. **Node 单测**：5 个独立入口（unit/store/i18n/theme/errors）
2. **Golden 合成断言**：防「实现错误但 MAE 恰好过线」
3. **E2E 冒烟测试**：全链路 UI + file:// 协议
4. **判据回归**：自动化验证产物一致性

## 许可证

- 源码：MIT License
- 素材：见 `src_assets/NOTICE.md`
- 第三方库：见 `assets/vendor/NOTICE.md`