/** * 雪碧图注册表 * 用途: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); }