# assets-tool

**Repository Path**: aimaier4869/assets-tool

## Basic Information

- **Project Name**: assets-tool
- **Description**: 活动复用专用图片替换工具
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-13
- **Last Updated**: 2025-09-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 复用活动图片替换工具

一款专为简化复用活动图片替换操作而开发的工具。通过集成浏览器与文件管理功能，用户可通过简单的拖拽操作快速完成图片替换，大幅提升前端开发效率。

## 一、 操作流程对比

### 1. 手动替换流程（约 27 秒）

1. 从设计工具导出切图文件
2. 在页面源码或 DOM 结构中查找旧图片资源路径
3. 进入项目 assets 目录逐层定位旧图片文件
4. 复制旧文件名并删除原文件
5. 重命名新下载的图片
6. 刷新页面查看效果

### 2. 图片替换工具操作流程（约 15 秒）

1. 从设计工具导出切图文件
2. 在预览页面中直接点击选中目标图片元素
3. 将新切图文件拖拽到旧图文件上完成替换
4. 刷新页面查看效果

## 二、界面功能详解

### 1. 双资源管理器

-   资源管理器 1（左侧）：用来打开下载目录
-   资源管理器 2（右侧）：无需手动打开目录，当在开发者工具中使用 inspect element 工具选定一个带有背景图的元素时，该元素的背景图自动被定位到此处

### 2. 集成式浏览器组件

-   地址栏：输入地址打开正在开发的活动页面
-   页面预览区域：展示地址栏中输入的页面
-   开发者工具：集成 Chrome DevTools

## 三、核心优势

-   效率提升：操作步骤减少 30%，耗时缩短 44%
-   智能定位：自动定位选中的 DOM 元素对应的本地图片文件
-   拖拽操作：直观的图片替换方式