@hzab/utils 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,2 @@
+# @hzab/utils@0.0.1
+组件初始化

package/README.md

@@ -0,0 +1,120 @@
+# @hzab/utils
+
+组件模板
+
+- node@16.16.0
+
+- 注意：首次克隆先执行 npm run prepare 命令
+
+# 组件
+
+## ossUpload 示例
+
+```jsx
+import OssUpload from "@hzab/utils/src/ossUpload";
+
+/**
+ * 批量文件上传
+ * @param {Array} files
+ * @param {Object} opt
+ * @returns
+ */
+export async function handleOssUpload(files, opt) {
+  const _files = files;
+  const { ossUrl, signatureParams, ossParams, axiosConf, useHashName } = opt || {};
+  const ossUpload = new OssUpload({
+    axios: opt.axios,
+    axiosConf: axiosConf,
+    serverUrl: ossUrl || "/api/v1/user/oss/getWebOssConfig",
+  });
+
+  const promise = [];
+  _files?.forEach((file) => {
+    if (!file) {
+      return;
+    }
+    // 数据已经是 url 的情况
+    if (typeof file === "string" || file.ossUrl || file.url) {
+      promise.push(Promise.resolve(file));
+    } else {
+      promise.push(
+        ossUpload
+          .upload(file, {
+            signatureParams: {
+              isPublic: 1,
+              ...(signatureParams || {}),
+            },
+            ossParams,
+            axiosConf,
+            useHashName,
+          })
+          .then((res) => {
+            return Promise.resolve(res?.data?.data?.fileUrl);
+          }),
+      );
+    }
+  });
+
+  return Promise.all(promise).then((filePromises) => {
+    filePromises?.forEach((fileUrl, idx) => {
+      if (typeof fileUrl === "string") {
+        _files[idx].ossUrl = fileUrl;
+        _files[idx].url = fileUrl;
+      } else if (_files[idx].url) {
+        _files[idx].ossUrl = _files[idx].url;
+      }
+    });
+    return Promise.resolve(_files);
+  });
+}
+```
+
+## API
+
+### InfoPanel Attributes
+
+| 参数   | 类型   | 必填 | 默认值 | 说明              |
+| ------ | ------ | ---- | ------ | ----------------- |
+| schema | Object | 是   | -      | 数据信息的 schema |
+
+# 组件开发流程
+
+- 在 config/webpack.config.js 中按需修改 library 配置的文件名
+- 在 config/webpack.config.js 中按需修改 alias 配置的包名，便于本地调试
+- 在 tsconfig.json 中按需修改 paths 配置的包名，解决 ts 报错问题
+- npm run dev
+
+## 文件目录
+
+- example 本地开发测试代码
+- src 组件源码
+
+## 命令
+
+- Mac 执行该命令，设置 pre-commit 为可执行文件
+
+  - npm run mac-chmod
+  - chmod +x .husky && chmod +x .husky/pre-commit
+
+- 生成文档：npm run docs
+- 本地运行：npm run dev
+- 打包编译：npm run build
+
+## 发布
+
+- 注意：示例代码生效，但发布之后未生效。确认是否执行了编译！！！
+
+- 编译组件：npm run build
+- 命令：npm publish --access public
+- 发布目录：
+  - src
+
+## 配置
+
+### 配置文件
+
+- 本地配置文件：config/config.js
+
+### webpack 配置文件
+
+- config/webpack.config.js

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@hzab/utils",
+  "version": "0.0.1",
+  "description": "utils",
+  "main": "src",
+  "scripts": {
+    "dev": "webpack serve -c ./config/webpack.config.js --env local",
+    "build": "webpack -c ./config/webpack.config.js --env production",
+    "publish-beta": "npm publish --beta",
+    "publish-patch": "npm version patch && npm publish --access public",
+    "publish-minor": "npm version minor && npm publish --access public",
+    "publish-major": "npm version major && npm publish --access public",
+    "prepare": "husky install",
+    "mac-chmod": "chmod +x .husky && chmod +x .husky/pre-commit",
+    "docs": "typedoc"
+  },
+  "files": [
+    "CHANGELOG.md",
+    "src"
+  ],
+  "keywords": [],
+  "author": "CaiYansong",
+  "license": "ISC",
+  "devDependencies": {
+    "@hzab/data-model": "^1.8.1",
+    "@hzab/permissions": "^1.0.0",
+    "@hzab/webpack-config": "^1.1.2",
+    "@types/react": "^17.0.62",
+    "@types/react-dom": "^17.0.20",
+    "antd": "^4.24.16",
+    "axios": "^1.4.0",
+    "eslint": "^8.30.0",
+    "less": "^4.1.3",
+    "mobx": "^6.7.0",
+    "mobx-react": "^7.6.0",
+    "nanoid": "^3.3.7",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^6.14.1",
+    "typedoc": "^0.24.8",
+    "typescript": "^4.9.4"
+  },
+  "directories": {
+    "src": "src"
+  },
+  "peerDependencies": {
+    "@hzab/data-model": ">=1.2.0",
+    "antd": "4.x",
+    "axios": ">=1.6.2",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "lint-staged": {
+    "**.{js,jsx,ts,tsx,css,scss,less,json,html}": [
+      "prettier --write"
+    ]
+  }
+}

package/src/array.ts

@@ -0,0 +1,8 @@
+/**
+ * 获取数组格式数据
+ * @param value
+ * @returns
+ */
+export function getArr(value) {
+  return Array.isArray(value) ? value : (value && [value]) || [];
+}

package/src/color.ts

@@ -0,0 +1,302 @@
+/**
+ * 计算颜色的亮度
+ * @param r
+ * @param g
+ * @param b
+ * @returns
+ */
+export function luminance(r, g, b) {
+  const a = [r, g, b].map((v) => {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+}
+
+/**
+ * 计算两个颜色之间的对比度
+ * @param l1
+ * @param l2
+ * @returns
+ */
+export function contrast(l1, l2) {
+  const brightest = Math.max(l1, l2);
+  const darkest = Math.min(l1, l2);
+  return (brightest + 0.05) / (darkest + 0.05);
+}
+
+/**
+ * 计算对比度
+ * @param luminance1
+ * @param luminance2
+ * @returns
+ */
+export function contrastRatio(luminance1, luminance2) {
+  return (Math.max(luminance1, luminance2) + 0.05) / (Math.min(luminance1, luminance2) + 0.05);
+}
+
+/**
+ * 十六进制颜色转 RGB
+ * @param hex
+ * @returns
+ */
+export function hexToRGB(hex) {
+  hex = hex.replace("#", "");
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  }
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  return [r, g, b];
+}
+
+/**
+ * rgb 数值限制
+ * @param val
+ * @returns
+ */
+export function rgbNumLimit(val) {
+  if (val > 250) {
+    return 250;
+  }
+  if (val < 0) {
+    return 0;
+  }
+  return val;
+}
+
+/**
+ * RGB 转十六进制颜色
+ * @param r
+ * @param g
+ * @param b
+ * @returns
+ */
+export function rgbToHex(r, g, b) {
+  return (
+    "#" +
+    [r, g, b]
+      .map((x) => {
+        const hex = x.toString(16);
+        return hex.length === 1 ? "0" + hex : hex;
+      })
+      .join("")
+  );
+}
+
+/**
+ *  RGB 转 HSL
+ * @param r
+ * @param g
+ * @param b
+ * @returns
+ */
+export function rgbToHsl(r, g, b) {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h,
+    s,
+    l = (max + min) / 2;
+
+  if (max === min) {
+    h = s = 0;
+  } else {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return [h * 360, s * 100, l * 100];
+}
+
+/**
+ * HSL 转 RGB
+ * @param h
+ * @param s
+ * @param l
+ * @returns
+ */
+export function hslToRgb(h, s, l) {
+  h /= 360;
+  s /= 100;
+  l /= 100;
+  let r, g, b;
+
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const hue2rgb = (p, q, t) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+      return p;
+    };
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+}
+
+/**
+ * 判断是否为灰色背景
+ * @param r
+ * @param g
+ * @param b
+ * @returns
+ */
+export function isGray(r, g, b, opt = { tolerance: 10 }) {
+  const {
+    /**
+     * 允许的误差范围
+     */
+    tolerance = 10,
+  } = opt || {}; //
+  return Math.abs(r - g) <= tolerance && Math.abs(g - b) <= tolerance && Math.abs(r - b) <= tolerance;
+}
+
+/**
+ *  根据背景颜色选择合适的文本颜色（十六进制格式）
+ * @param backgroundColor
+ * @returns
+ */
+export function getTextColor(backgroundColor) {
+  let [r, g, b] = [0, 0, 0];
+  if (backgroundColor.startsWith("#")) {
+    [r, g, b] = hexToRGB(backgroundColor);
+  } else {
+    const div = document.createElement("div");
+    div.style.color = backgroundColor;
+    document.body.appendChild(div);
+    const cs = getComputedStyle(div);
+    const rgb = cs.color.match(/\d+/g).map(Number);
+    document.body.removeChild(div);
+    [r, g, b] = rgb;
+  }
+  const bgLuminance = luminance(r, g, b);
+  const whiteLuminance = luminance(255, 255, 255);
+  const blackLuminance = luminance(0, 0, 0);
+  const whiteContrast = contrast(bgLuminance, whiteLuminance);
+  const blackContrast = contrast(bgLuminance, blackLuminance);
+  return whiteContrast > blackContrast ? "#ffffff" : "#000000";
+}
+
+/**
+ * 根据背景亮度调整文字颜色深浅
+ * @param bgR
+ * @param bgG
+ * @param bgB
+ * @returns
+ */
+export function adjustTextColor(hexColor) {
+  const [bgR, bgG, bgB] = hexToRGB(hexColor);
+  const bgLuminance = luminance(bgR, bgG, bgB);
+  let textR, textG, textB;
+  const targetContrast = 4.5; // WCAG AA 标准
+
+  if (bgR === 0 && bgG === 0 && bgB === 0) {
+    // 黑色背景
+    let textR = 255,
+      textG = 255,
+      textB = 255;
+    let textLuminance = luminance(textR, textG, textB);
+    let ratio = contrastRatio(bgLuminance, textLuminance);
+    if (ratio < targetContrast) {
+      textR = 230;
+      textG = 230;
+      textB = 230;
+    }
+    return rgbToHex(textR, textG, textB);
+  } else if (bgR === 255 && bgG === 255 && bgB === 255) {
+    // 白色背景
+    let textR = 0,
+      textG = 0,
+      textB = 0;
+    let textLuminance = luminance(textR, textG, textB);
+    let ratio = contrastRatio(bgLuminance, textLuminance);
+    if (ratio < targetContrast) {
+      textR = 20;
+      textG = 20;
+      textB = 20;
+    }
+    return rgbToHex(textR, textG, textB);
+  } else if (isGray(bgR, bgG, bgB)) {
+    // 灰色背景
+    if (bgLuminance < 0.4) {
+      // 深色灰色背景，使用白色文字
+      let textR = 255,
+        textG = 255,
+        textB = 255;
+      let textLuminance = luminance(textR, textG, textB);
+      let ratio = contrastRatio(bgLuminance, textLuminance);
+      if (ratio < targetContrast) {
+        textR = 230;
+        textG = 230;
+        textB = 230;
+      }
+      return rgbToHex(textR, textG, textB);
+    } else {
+      // 浅色灰色背景，使用黑色文字
+      let textR = 0,
+        textG = 0,
+        textB = 0;
+      let textLuminance = luminance(textR, textG, textB);
+      let ratio = contrastRatio(bgLuminance, textLuminance);
+      if (ratio < targetContrast) {
+        textR = 20;
+        textG = 20;
+        textB = 20;
+      }
+      return rgbToHex(textR, textG, textB);
+    }
+  }
+
+  // 非黑白灰背景，使用差值颜色
+  const adjustNum = 150;
+  if (bgLuminance > 0.5) {
+    // 背景较亮，文字颜色调深
+    textR = Math.max(0, bgR - adjustNum);
+    textG = Math.max(0, bgG - adjustNum);
+    textB = Math.max(0, bgB - adjustNum);
+  } else {
+    // 背景较暗，文字颜色调亮
+    textR = Math.min(255, bgR + adjustNum);
+    textG = Math.min(255, bgG + adjustNum);
+    textB = Math.min(255, bgB + adjustNum);
+  }
+  return rgbToHex(textR, textG, textB);
+}
+
+/**
+ * 调整颜色深浅
+ * @param hexColor
+ * @param amount
+ * @returns
+ */
+export function adjustColor(hexColor, amount) {
+  const [r, g, b] = hexToRGB(hexColor);
+
+  const newR = rgbNumLimit(r + amount);
+  const newG = rgbNumLimit(g + amount);
+  const newB = rgbNumLimit(b + amount);
+
+  return rgbToHex(newR, newG, newB);
+}

package/src/file/file.ts

@@ -0,0 +1,37 @@
+export interface IFile extends File {
+  file?: IFile;
+  url?: string;
+}
+
+/**
+ *  建立一个可以存取该 file 的 url
+ * @param {Object} file 文件
+ * @returns {string} url
+ * blob:http://localhost:8000/c9950644-5118-4231-9be7-8183bde1fdc7
+ */
+export function getFileURL(file: IFile) {
+  const _file: IFile = file?.file || file;
+  if (!(_file instanceof File)) {
+    return;
+  }
+
+  let url = _file.url || null;
+
+  try {
+    // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
+    if (window.createObjectURL != undefined) {
+      // basic
+      return window.createObjectURL(_file);
+    } else if (window.URL != undefined) {
+      // mozilla(firefox)
+      return window.URL.createObjectURL(_file);
+    } else if (window.webkitURL != undefined) {
+      // webkit or chrome
+      return window.webkitURL.createObjectURL(_file);
+    }
+  } catch (error) {
+    console.warn("getFileURL Error: ", error);
+  }
+
+  return url;
+}

package/src/file/fileName.ts

@@ -0,0 +1,75 @@
+import { nanoidNumALetters } from "../nanoid";
+
+/**
+ * 获取文件后缀
+ * @param fileUrl
+ * @returns
+ */
+export function getFileExt(fileUrl) {
+  if (typeof fileUrl !== "string") {
+    return;
+  }
+  const res = fileUrl?.match(/([^\/]+?)\.([^\/\.]+)$/);
+  if (res && res.length > 2) {
+    return res[2];
+  }
+  return fileUrl;
+}
+
+/**
+ * 从 url 获取文件名称，不包含后缀
+ * @param {string} fileName
+ * @param {string} str
+ * @returns
+ */
+export function getFileName(fileUrl) {
+  if (typeof fileUrl !== "string") {
+    return;
+  }
+  const res = fileUrl?.match(/([^\/]+?)\.[^\/\.]+$/);
+  if (res && res.length > 0) {
+    return res?.[1] || res?.[0];
+  }
+  return fileUrl;
+}
+
+/**
+ * 从 url 获取文件名称，包含后缀
+ * @param {string} fileName
+ * @param {string} str
+ * @returns
+ */
+export function getFullFileName(fileUrl) {
+  if (typeof fileUrl !== "string") {
+    return;
+  }
+  const res = fileUrl?.match(/[^\/]+?\.[^\/\.]+$/);
+  if (res && res.length > 0) {
+    return res[0];
+  }
+  return fileUrl;
+}
+
+/**
+ * 合并文件名称，自动处理后缀
+ * @param {string} fileName
+ * @param {string} str
+ * @returns
+ */
+export const mergeFileName = function (fileName, str = "") {
+  if (typeof fileName !== "string") {
+    return "";
+  }
+  const name = fileName?.match(/([^\/]+?)\.[^\/]+$/)?.[1] || "";
+  const suffix = fileName?.match(/[^\/]+?\.([^\/]+)$/)?.[1] || "";
+  return `${name}${str ?? ""}.${suffix}`;
+};
+
+/**
+ * 获取唯一的文件名
+ * @param {string} fileName
+ * @returns
+ */
+export const getUFileName = function (fileName) {
+  return mergeFileName(getFileName(fileName) || "rc-upload", "-" + `~kid-${nanoidNumALetters()}~` + `${Date.now()}`);
+};