@hzab/utils 1.1.4 → 1.1.6

package/changelog.md

@@ -1,3 +1,11 @@
+# @hzab/utils@1.1.6
+
+feat: 添加sizeAdapter.js适配文件
+
+# @hzab/utils@1.1.5
+
+fix: objToSearch encode; searchToObj decode
+
 # @hzab/utils@1.1.4
 
 fix: url replace hash 重复拼接问题

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/utils",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "utils",
   "main": "src",
   "scripts": {

package/src/sizeAdapter.ts

@@ -0,0 +1,108 @@
+/**
+ * 获取视窗宽高
+ * @returns
+ */
+export function getClientStyle() {
+  return {
+    width: document.documentElement.clientWidth || document.body.clientWidth,
+    height: document.documentElement.clientHeight || document.body.clientHeight,
+  };
+}
+
+/**
+ * 视窗宽高
+ */
+export const clientStyle = getClientStyle();
+
+window.addEventListener("resize", () => {
+  const { width, height } = getClientStyle();
+  clientStyle.width = width;
+  clientStyle.height = height;
+});
+
+/**
+ * 获取当前视窗 1vw、1vh 对应的 px
+ */
+export function getViewportPX() {
+  const { width, height } = clientStyle;
+  return {
+    wPx: width / 100,
+    hPx: height / 100,
+  };
+}
+
+// 视觉稿默认的宽高 px
+// TODO: 按需修改
+export const DEFAULT_SIZE = {
+  width: 750,
+  height: 1334,
+};
+
+export function setDefaultSize(width, height) {
+  DEFAULT_SIZE.width = width || 750;
+  DEFAULT_SIZE.height = height || 1334;
+}
+
+/**
+ * 获取视窗与视觉稿的比例
+ * @param current
+ * @param defaultVal
+ * @returns
+ */
+export function getClientRate(current, defaultVal) {
+  return parseFloat(current) / defaultVal;
+}
+
+/**
+ * 获取默认宽度对应的 vw 值
+ */
+export function getVW(pxNum = 0) {
+  return `${getClientRate(pxNum, DEFAULT_SIZE.width) * 100}vw`;
+}
+
+/**
+ * 获取默认高度对应的 vh 值
+ */
+export function getVH(pxNum = 0) {
+  return `${getClientRate(pxNum, DEFAULT_SIZE.height) * 100}vh`;
+}
+
+/**
+ * 获取默认宽度对应的 px 值
+ * 适用于必须传入 px 值的情况，如 ECharts
+ */
+export function getWpx(pxNum = 0) {
+  return getClientRate(pxNum, DEFAULT_SIZE.width) * clientStyle.width;
+}
+
+/**
+ * 获取默认高度对应的 px 值
+ * 适用于必须传入 px 值的情况，如 ECharts
+ */
+export function getHpx(pxNum = 0) {
+  return getClientRate(pxNum, DEFAULT_SIZE.height) * clientStyle.height;
+}
+
+/**
+ * 通过 vw 获取对应的 px
+ * @param {number} vw
+ */
+export function getHPxByVW(vw = 0) {
+  let _vw = vw;
+  if (typeof _vw === "string") {
+    _vw = parseFloat(_vw);
+  }
+  return clientStyle.width * (_vw / 100);
+}
+
+/**
+ * 通过 vh 获取对应的 px
+ * @param {number} vh
+ */
+export function getWPxByVH(vh = 0) {
+  let _vh = vh;
+  if (typeof _vh === "string") {
+    _vh = parseFloat(_vh);
+  }
+  return clientStyle.height * (_vh / 100);
+}

package/src/upload/ossUpload.ts

@@ -14,7 +14,7 @@ class OssUpload extends OssUploadUtil {
 
   upload(file, opt: IUploadOpt = {}): Promise<{ fileUrl: string }> {
     const fileName = getFileNameByFileObj(file, opt);
-    return this._upload(file, { ...opt, fileName });
+    return this._upload(file, { fileName, ...opt });
   }
 }
 

package/src/upload/uploadUtils.ts

@@ -117,15 +117,20 @@ export const getFileNameByFileObj = (file: IFileNameSource, opt?: IGetFileNameBy
   } = opt || {};
 
   const _fullFileName = file.name || fileName || "";
+
   const { mainPart, ext } = getFileNameExt(_fullFileName);
 
   console.log("getFileTypeExt(file.type)", file.type, getFileTypeExt(file.type));
 
   const _fileName = mainPart || _fullFileName || getFileName(file.url) || "file";
+
   const _ext = ext || getFileTypeExt(file.type);
 
   const hashStr = useHashName ? nanoidNumALetters() : "";
-  const nm = mergeFileName(_fileName + "." + _ext, (_fileName.indexOf("~kid-") < 0 ? `~kid-${hashStr}-${file.createTime || dayjs().valueOf()}-${ext}` : ""));
+  const nm = mergeFileName(
+    _fileName + "." + _ext,
+    _fileName.indexOf("~kid-") < 0 ? `~kid-${hashStr}-${file.createTime || dayjs().valueOf()}-${ext}` : "",
+  );
 
   return nm;
 };

package/src/url.ts

@@ -36,19 +36,27 @@ export function replaceSearch(url: string, search: string) {
  * 把对象转为 query 参数
  * @param query
  */
-export function objToSearch(query, hasQuery) {
+export function objToSearch(query, opt) {
   if (!query || typeof query !== "object") {
     console.warn("Warn objToSearch: 请传入正确的对象");
     return;
   }
+  // @deprecated 兼容老的入参写法
+  let hasQuery = opt?.hasQuery;
+  if (typeof opt === "boolean") {
+    hasQuery = opt;
+  }
+  const { isEncode } = opt || {};
   let search = hasQuery ? "?" : "";
   Object.keys(query).forEach((key) => {
     if (search && search != "?") {
       search += "&";
     }
-    search += key;
+    const _key = isEncode ? encodeURIComponent(key) : key;
+    search += _key;
     search += "=";
-    search += query[key];
+    const val = isEncode ? encodeURIComponent(query[key]) : query[key];
+    search += val;
   });
   return search;
 }
@@ -117,7 +125,9 @@ export function searchToObj(url) {
   const res = {};
   _url.split("&")?.forEach((it) => {
     const arr = it.split("=");
-    res[arr[0]] = arr[1];
+    const key = decodeURIComponent(arr[0]);
+    const val = decodeURIComponent(arr[1] ?? "");
+    res[key] = val;
   });
   return res;
 }