美萌S3图片上传插件 (Wmeimob S3)

一款专为前端开发设计的高效图片管理工具，旨在解决小程序及 Web 项目中静态资源体积过大的问题。插件支持将本地图片一键上传至云存储（阿里云 OSS、腾讯云 COS、华为云 OBS），并自动替换代码中的引用路径，让资源管理变得简单高效。

功能特性

多云支持：完美支持 阿里云 OSS、腾讯云 COS 和 华为云 OBS。
智能替换：自动识别 Less、JS、TS、React (JSX/TSX) 等文件中的图片引用，并替换为云端链接。
可视化管理：提供独立的侧边栏视图，直观展示未上传图片和待替换的引用代码。
便捷操作：支持右键菜单上传、命令面板操作以及编辑器内悬浮提示上传。
路径别名支持：智能解析 tsconfig.json 中配置的路径别名（如 ~/assets/...）。

� 新增：统一管理面板 (Unified Dashboard)

v1.1.0 核心更新：我们推出了全新的 Webview 统一管理面板，将图片管理与引用替换合二为一，提供更加流畅的操作体验。

✨ 亮点功能

⚡️ 极速状态栏入口：点击底部状态栏的 $(layout-panel-center) 美萌S3 图标，即可一键唤起管理面板。
🖼️ 图片资源总览：
- 可视化网格/列表：以相册模式浏览项目图片，支持按大小排序。
- 一键上传：直观展示未上传图片，支持批量上传。
- 智能缓存：利用本地缓存避免重复上传，提升效率。
📝 智能引用替换 (Enhanced)：
- 增量更新：替换操作后无需全量刷新，立即获得反馈。
- 自动跳转：替换完成后自动打开文件并跳转到修改行，方便确认。
- 状态同步：引用替换后，对应的图片资源状态也会自动同步更新。
📊 项目健康度概览：
- 实时统计本地图片总数、已上传比例及节省的体积空间。

�🚀 快速开始

1. 安装插件

在 VS Code 扩展市场搜索 wmeimob-s3 或 美萌S3 进行安装。

2. 初始化配置

在开始使用之前，需要在项目根目录创建一个配置文件。

打开 VS Code 命令面板（快捷键：Ctrl+P 或 Cmd+P）。
输入 > 创建配置文件 (或 wmeimob-aliyun.createConfig) 并回车。
插件会在项目根目录自动生成 wmeimob-aliyun.config.js 文件。

3. 配置参数

打开生成的 wmeimob-aliyun.config.js，根据您的云服务商信息进行配置：

module.exports = {
  /**
   * 云存储类型
   * oss - 阿里云 | cos - 腾讯云 | obs - 华为云 | ossSDK - 阿里云SDK直传
   * @default 'oss'
   */
  type: 'oss',

  /**
   * 获取 STS Token 的接口地址
   * 插件将通过 GET 请求访问此地址获取上传凭证
   * 务必确保该接口返回符合对应云厂商 SDK 要求的临时凭证信息
   */
  url: 'https://api.example.com/api/mall/oss/info',

  /**
   * 请求头配置
   * 用于接口鉴权，例如 Authorization Token
   * 提示：可从浏览器控制台或 Postman 中复制
   */
  headers: {
    Authorization: 'Bearer your-token-here'
  },

  /**
   * 存储路径前缀 (可选)
   * 建议设置以隔离不同环境或项目的资源
   * 最终路径示例: https://bucket.com/prefix/subDir/filename.png
   */
  subDir: 'mini-assets',

  /**
   * 排除目录
   * 默认已排除 node_modules, dist, docs 等
   */
  exclude: ['src/modules/ignored']
};

4. 阿里云 OSS SDK 直传模式 (新增)

如果你希望直接使用阿里云 SDK 进行上传（不经过后端 STS 接口），可以配置 type: 'ossSDK'。

修改配置文件：在 wmeimob-aliyun.config.js 中设置 type: 'ossSDK'。

配置环境变量：在项目根目录创建 .env 文件，并添加以下配置：

# 阿里云访问密钥 ID
OSS_ACCESS_KEY_ID=your_access_key_id
# 阿里云访问密钥 Secret
OSS_ACCESS_KEY_SECRET=your_access_key_secret
# 存储桶名称
OSS_BUCKET=your_bucket_name
# 区域节点 (Region) 或 自定义域名
# 示例: oss-cn-hangzhou 或 oss-cn-hangzhou.aliyuncs.com
OSS_ENDPOINT=oss-cn-hangzhou

注意：

OSS_ENDPOINT 支持 Region ID (如 oss-cn-hangzhou) 或完整 Endpoint 域名。

上传的文件将自动设置为 公共读 (public-read) 权限。

5. 华为云 OBS SDK 直传模式

在项目根目录的 wmeimob-aliyun.config.js 中配置：

module.exports = {
  type: 'obsSDK',
  subDir: 'mini-assets',
  exclude: ['src/modules']
}

在同一项目根目录创建 .env：

OBS_ACCESS_KEY_ID=your_access_key_id
OBS_ACCESS_KEY_SECRET=your_secret_access_key
OBS_BUCKET=your_bucket_name
OBS_ENDPOINT=https://obs.cn-north-4.myhuaweicloud.com

四项均必填，Endpoint 使用桶所在区域的服务地址，不含桶名或路径；省略协议时使用 HTTPS，不支持 Region 简写或 CDN 域名。
SDK 模式不请求后端凭证接口，无需 url、headers；配置缺失或上传失败会直接报错。
图片上传到 subDir/随机文件名.扩展名，设置对象 ACL 为 public-read，返回永久的桶域名访问链接。账户和桶策略需要允许上传和公共读。
单图上传、批量上传和地址替换均使用对应工作区的配置；密钥仅在扩展宿主中读取，不会传入配置面板。
可在配置面板选择“华为云 SDK 直传”，然后手动填写项目的 .env。将 .env 加入项目的 .gitignore，不要提交真实密钥。
原有 type: 'obs' 继续使用后端签名上传；新模式暂不支持自定义 CDN 域名或可配置 ACL。

📖 使用指南

方式一：命令行操作

打开命令面板 (Ctrl+P / Cmd+P)，输入 wmeimob-aliyun 即可查看所有可用命令：

上传所有文件：扫描项目并上传所有未上传的图片。
打包下载已上传图片：将云端图片打包下载。
创建配置文件：重新生成配置文件。

方式二：右键菜单上传

在 VS Code 文件资源管理器中，右键点击任意图片文件（支持多选），选择 【上传至S3】。

方式三：悬浮提示上传 (推荐)

在代码编辑区域，将鼠标悬浮在本地图片路径上（支持 .less, .js, .ts, .tsx 文件）。 VS Code 会弹出提示框，点击 【替换为S3链接】 即可自动上传并替换代码。

upload_by_link

方式四：可视化侧边栏

插件在侧边栏提供了两个强大的视图面板：

1. 美萌S3图片

功能：展示项目中所有的本地图片资源。
操作：
- 点击云朵图标上传单个文件。
- 点击复制图标获取云端链接。
- 支持切换“树状视图”或“列表视图”。

2. 美萌S3图片引用替换

功能：扫描代码中所有引用的本地图片路径。
操作：
- 点击条目自动定位到代码行。
- 提供“一键替换”功能，批量更新代码引用。

⚙️ 扩展设置

在 VS Code 设置中搜索 wmeimob-aliyun 可进行更多个性化配置：

设置项	说明	默认值
`wmeimob-aliyun.useHelper`	是否使用S3辅助函数。在javascript/css样式文件中引用S3链接时，是否使用辅助函数	`false`
`wmeimob-aliyun.heplerModule`	辅助函数导入的包路径	`~/components/yun`
`wmeimob-aliyun.keepOriginReplace`	替换时是否保留原始代码（以注释形式）	`false`
`wmeimob-aliyun.styleVariable`	Less 变量替换名称（设为空则使用原始 URL）。同时受useHelper控制	`@{yunoss}`

🔄 引用替换规则

插件会根据文件类型智能处理代码替换，确保语法正确：

Less 文件

/* 替换前 */
background-image: url("../assets/images/icon.png");
@image: '../assets/images/icon.png';

/* 替换后 */
background-image: url("https://oss.url/icon.png");
@image: "https://oss.url/icon.png";

JavaScript / TypeScript

// 替换前
const img = require('../assets/icon.png');
import img from '../assets/icon.png';

// 替换后
const img = 'https://oss.url/icon.png';
const img = 'https://oss.url/icon.png';

React (JSX/TSX)

// 替换前
<Image src={require("../assets/icon.png")} />

// 替换后
<Image src={'https://oss.url/icon.png'} />

🛠 开发与贡献

如果您想参与插件开发：

克隆项目：拉取代码到本地。
安装依赖：运行 npm install 或 yarn。
启动调试：按 F5 启动 VS Code 扩展调试主机。

发布版本：

vsce publish patch # 发布修订版本
vsce publish minor # 发布次要版本
vsce publish major # 发布主要版本

❓ 常见问题

Q: 支持哪些文件格式？ A: 支持图片 (png, jpg, jpeg, gif, svg, bmp, webp) 以及字体文件 (otf, ttf, woff, eot, json)。

Q: 为什么上传失败？ A: 请检查 wmeimob-aliyun.config.js 中的 url 接口是否可用，以及 headers 中的 Token 是否过期。

Q: 如何处理路径别名？ A: 插件会自动读取根目录下的 tsconfig.json 中的 paths 配置，支持类似 ~/assets/ 的路径解析。

引用替换兼容与扫描排查

侧栏“地址替换”和 Webview“引用替换”使用同一套扫描与图片路径解析。仍需先在当前选中的工作区根目录创建上传配置。

支持 JS/JSX/TS/TSX 中的 import、require 图片引用，以及 CSS/LESS/SASS/SCSS 中的图片 URL。
根据引用文件所在目录查找最近的 tsconfig.json 或 jsconfig.json，读取 paths 和继承配置；普通嵌套目录和 pnpm 子项目均可使用，不依赖 pnpm-workspace.yaml。
上传配置和 imageMap 仍属于当前选中的工作区，不会自动切换到嵌套子项目的上传配置。若要分别管理，请单独打开子项目或将子项目加入 VS Code 多根工作区后选择。
扫描失败会显示原因，并支持重新扫描与取消；无法解析的引用保留显示，不能执行替换。继承配置读取警告记录在插件输出中。
切换工作区后重新绑定侧栏和配置监听，旧扫描结果不会覆盖新项目。替换前请保存源文件；源文件行内容发生变化时需要刷新再操作。

插件自动查找编辑器内置 rg（包含 ripgrep-universal）、旧版 rg 和系统 PATH。若仍找不到，可在 VS Code 设置中指定绝对路径：

"wmeimob-aliyun.ripgrepPath": "C:\\tools\\ripgrep\\rg.exe"

留空使用自动查找。请填写可执行文件路径，不要附加命令参数。

wmeimob-s3

yitong