front-end/hdApp/src/utils/mainIndexSprite.js

/**
 * 雪碧图注册表
 * 用途：sprite-icon 按 sheet + name 从多张 CDN 雪碧图裁切显示图标
 * 图片地址随 ext.json / 环境 imgHost 变化，必须用函数运行时读取
 */
import constant from "@/constant/index";

/** 默认图床（ext 未配置 imgHost 时的兜底） */
const DEFAULT_IMG_HOST = "https://img.huaml.com";

/** 未传 sheet 时默认使用的雪碧图 key */
const DEFAULT_SHEET_KEY = "main";

/**
 * 雪碧图注册表：每张图含 path、原图尺寸、icons 坐标
 * icons 的 x/y 为左上角，w/h 为截取区域（基于原图测量）
 */
export const SPRITE_SHEETS = {
  main: {
    path: "/hzg/sprite_icon/main_index.webp",
    width: 500,
    height: 500,
    icons: {
      "dengji-biandong": { x: 14, y: 17, w: 32, h: 28 },
    }
  },
  /** 进货/供货商专用雪碧图，坐标待设计稿测量后补全 */
  /* stock: {
    path: "/hzg/sprite_icon/main_index.webp?time=2607101747",
    width: 500,
    height: 500,
    icons: {
      "yue-biandong": { x: 60, y: 17, w: 28, h: 28 }
				}
  } */
};

/** tabBar 未选中 / 选中 图标名映射（main 雪碧图） */
export const TAB_SPRITE_MAP = {
  home: { normal: "dianpu-line", active: "dianpu-fill" },
  order: { normal: "huoche-lv", active: "huoche-da" },
  mine: { normal: "gou-quan", active: "qianbao" }
};

/** @deprecated 兼容旧引用，等同 SPRITE_SHEETS.main 尺寸 */
export const MAIN_INDEX_SPRITE = {
  width: SPRITE_SHEETS.main.width,
  height: SPRITE_SHEETS.main.height
};

/** @deprecated 兼容旧引用，等同 SPRITE_SHEETS.main.icons */
export const MAIN_INDEX_ICONS = SPRITE_SHEETS.main.icons;

/**
 * 构建全局唯一图标名 -> sheetKey 索引
 * @param {object} sheets
 * @returns {object}
 */
function buildIconSheetIndex(sheets) {
  const index = {};
  Object.keys(sheets).forEach((sheetKey) => {
    const icons = sheets[sheetKey].icons || {};
    Object.keys(icons).forEach((name) => {
      if (index[name] && index[name] !== sheetKey && process.env.NODE_ENV !== "production") {
        console.warn(`[sprite] 图标名 "${name}" 在 ${index[name]} 与 ${sheetKey} 中重复，以 ${sheetKey} 为准`);
      }
      index[name] = sheetKey;
    });
  });
  return index;
}

const ICON_SHEET_INDEX = buildIconSheetIndex(SPRITE_SHEETS);

/**
 * 获取图床根地址（HTTPS）
 * @returns {string}
 */
function getImgHostBase() {
  let base = (constant.imgUrl || DEFAULT_IMG_HOST).replace(/\/$/, "");
  if (base.indexOf("http://") === 0) {
    base = `https://${base.slice(7)}`;
  }
  return base;
}

/**
 * rpx 转 px；小程序 absolute 位移必须用 px
 * @param {number} rpx
 * @returns {number}
 */
function rpx2px(rpx) {
  if (typeof uni !== "undefined" && typeof uni.upx2px === "function") {
    return uni.upx2px(rpx);
  }
  return rpx;
}

/**
 * 解析图标所属雪碧图与坐标
 * @param {string} name 图标名
 * @param {string} sheetKey 可选，指定雪碧图 key；空则按索引或 main 查找
 * @returns {{ sheetKey: string, sheet: object, icon: object }|null}
 */
export function resolveSprite(name, sheetKey = "") {
  if (!name) {
    return null;
  }
  let key = sheetKey;
  if (!key) {
    key = ICON_SHEET_INDEX[name] || DEFAULT_SHEET_KEY;
  }
  const sheet = SPRITE_SHEETS[key];
  if (!sheet) {
    return null;
  }
  const icon = (sheet.icons || {})[name];
  if (!icon) {
    return null;
  }
  return { sheetKey: key, sheet, icon };
}

/**
 * 获取指定雪碧图完整 URL
 * @param {string} sheetKey
 * @returns {string}
 */
export function getSpriteSheetUrl(sheetKey = DEFAULT_SHEET_KEY) {
  const sheet = SPRITE_SHEETS[sheetKey];
  if (!sheet) {
    return "";
  }
  return `${getImgHostBase()}${sheet.path}`;
}

/**
 * 生成雪碧图 image 裁切样式（小程序 absolute 定位）
 * @param {string} name
 * @param {number|string} size 显示宽度 rpx
 * @param {string} sheetKey 可选雪碧图 key
 * @returns {{ wrap: string, inner: string, image: string }}
 */
export function spriteImageStyle(name, size = 48, sheetKey = "") {
  const resolved = resolveSprite(name, sheetKey);
  if (!resolved) {
    if (process.env.NODE_ENV !== "production") {
      console.warn(`[sprite-icon] 未找到图标: name=${name}${sheetKey ? ` sheet=${sheetKey}` : ""}`);
    }
    return { wrap: "", inner: "", image: "" };
  }
  const { sheet, icon } = resolved;
  const displayW = Number(size) || 48;
  const scale = displayW / icon.w;
  const displayH = Math.round(icon.h * scale);
  const sheetW = sheet.width * scale;
  const sheetH = sheet.height * scale;
  const left = -rpx2px(icon.x * scale);
  const top = -rpx2px(icon.y * scale);
  const sheetWPx = rpx2px(sheetW);
  const sheetHPx = rpx2px(sheetH);
  return {
    wrap: `position:relative;width:${displayW}rpx;height:${displayH}rpx;overflow:hidden;line-height:0;`,
    inner: `position:absolute;left:${left}px;top:${top}px;width:${sheetWPx}px;height:${sheetHPx}px;`,
    image: "width:100%;height:100%;display:block;"
  };
}

/**
 * 生成雪碧图行内样式（view + background）
 * @param {string} name
 * @param {number|string} size
 * @param {string} sheetKey
 * @returns {string}
 */
export function spriteStyle(name, size = 48, sheetKey = "") {
  const resolved = resolveSprite(name, sheetKey);
  if (!resolved) {
    return "";
  }
  const { sheetKey: key, sheet, icon } = resolved;
  const displayW = Number(size) || 48;
  const scale = displayW / icon.w;
  const displayH = Math.round(icon.h * scale);
  const sheetW = sheet.width * scale;
  const sheetH = sheet.height * scale;
  const posX = rpx2px(icon.x * scale);
  const posY = rpx2px(icon.y * scale);
  const sheetWPx = rpx2px(sheetW);
  const sheetHPx = rpx2px(sheetH);
  const url = getSpriteSheetUrl(key);
  return [
    `width:${displayW}rpx`,
    `height:${displayH}rpx`,
    `background-image:url(${url})`,
    `background-size:${sheetWPx}px ${sheetHPx}px`,
    `background-position:-${posX}px -${posY}px`,
    "background-repeat:no-repeat",
    "display:inline-block",
    "flex-shrink:0",
    "vertical-align:middle"
  ].join(";");
}

/** @deprecated 兼容旧 API */
export function getMainIndexSpriteUrl() {
  return getSpriteSheetUrl(DEFAULT_SHEET_KEY);
}

/** @deprecated 兼容旧 API */
export function mainIndexSpriteImageStyle(name, size = 48) {
  return spriteImageStyle(name, size, DEFAULT_SHEET_KEY);
}

/** @deprecated 兼容旧 API */
export function mainIndexSpriteStyle(name, size = 48) {
  return spriteStyle(name, size, DEFAULT_SHEET_KEY);
}