@wlydfe/pro-ui 0.2.20 → 0.2.21

package/packages/utils/src/file.ts

@@ -0,0 +1,173 @@
+import type { FileSaverOptions } from 'file-saver'
+
+const toLower = (str: string) => str.toLowerCase()
+
+/**
+ * 获取文件类型
+ * @param path
+ * @returns
+ */
+const getFileType = (path: string) => path && path.slice(path.lastIndexOf('.'))
+
+/**
+ *
+ * @desc 限制文件类型
+ * @param {file|Blob} file 源文件
+ * "默认限制图"片
+ * @return 合法文件返回true否则返回false
+ */
+export const isLegalFile = (file: File | Blob, types: string[]): boolean => {
+  const filterTypes = types.filter(item => item && item !== '*').map(item => toLower(item))
+  if (!filterTypes.length) {
+    return true
+  }
+  const type = getFileType(file.name)
+
+  const isLegal = filterTypes.includes(toLower(type))
+  if (!isLegal) {
+    // 上传文件格式有误!
+    return false
+  }
+  return true
+}
+
+/**
+ *  @desc 限制文件上传大小
+ * @param {file|Blob} file 源文件
+ * @param {number} fileMaxSize  图片限制大小单位（MB）
+ * @return 在限制内返回true否则返回false
+ */
+export const isMaxFileSize = (file: File | Blob, fileMaxSize?: number): boolean => {
+  if (!fileMaxSize) {
+    return true
+  }
+  const isMaxSize = file.size / 1024 / 1024 < fileMaxSize
+  if (!isMaxSize) {
+    // 上传文件大小不能超过 {size} MB!
+    return false
+  }
+  return true
+}
+
+/**
+ *
+ * @desc 读取文件为DataURL文件格式  （base64）
+ * @param {file|Blob} file 源文件
+ * @return 返回DataURL文件 （base64）
+ */
+export const fileToDataURL = (file: File | Blob): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = (e: ProgressEvent<FileReader>) => {
+      const data = (e.target as any).result
+      resolve(data)
+    }
+    reader.onerror = e => {
+      // 读取文件失败
+      reject(new Error(e as any))
+    }
+    reader.readAsDataURL(file)
+  })
+}
+
+/**
+ * @desc 读取文件为text文件格式
+ * @param {file} file 源文件
+ * @return 返回text文件
+ */
+export const fileToText = (file: File | Blob): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = (e: ProgressEvent<FileReader>) => {
+      const data = (e.target as any).result
+      resolve(data)
+    }
+    reader.onerror = e => {
+      // 读取文件失败
+      // 读取文件失败
+      reject(new Error(e as any))
+    }
+    reader.readAsText(file, 'utf-8')
+  })
+}
+
+/**
+ * @desc 加载真实图片，读取成功返回图片真实宽高和图片本身对象 ag: { width: 100,height: 100,image: '' }
+ * @param {string} src  图片地址
+ * @return `{ width: ,height: , image:  }`
+ */
+export const loadImage = (
+  src: string
+): Promise<{ width: number; height: number; image: HTMLImageElement }> => {
+  return new Promise((resolve, reject) => {
+    const image = new Image()
+    image.src = src
+    image.onload = () => {
+      const data = { width: image.width, height: image.height, image }
+      resolve(data)
+    }
+    image.onerror = () => {
+      // 加载文件失败
+      const err = new Error('load file error')
+      reject(err)
+    }
+  })
+}
+
+/**
+ * @desc  判断图片文件的分辨率是否在限定范围之内，分辨率不在限定范围之内则抛出异常
+ * @param {file} file 源文件
+ * @param {object} props   文件分辨率的宽和高   ag: props={width:100, height :100}
+ */
+export const isLegalResolutionRatio = async (
+  file: File | Blob,
+  props: { width: number; height: number }
+): Promise<boolean> => {
+  try {
+    const { width, height } = props
+    const base64 = await fileToDataURL(file)
+    const image = await loadImage(base64)
+    if (image.width !== width || image.height !== height) {
+      // 上传图片的分辨率必须为
+      return Promise.reject(false)
+    }
+    return true
+  } catch (error) {
+    return Promise.reject(false)
+  }
+}
+
+interface Download<T = Blob | string> {
+  (data: T, filename: string, options?: FileSaverOptions): Promise<T>
+}
+
+/**
+ * @description 下载文件
+ * @param {Blob | string} data  文件 Blob
+ * @param  {string} filename 文件名称
+ * @param  {object} options 可选参数
+ */
+export const download: Download = async (data, filename, options) => {
+  // 处理没有数据的情况
+  if (!data) {
+    return Promise.reject('download fail: data is empt!')
+  }
+
+  // 处理二进制数据接口异常
+  try {
+    const text = await (data as Blob).text()
+    const res = JSON.parse(text)
+    if (res) {
+      return Promise.reject('download fail: server error!')
+    }
+  } catch (error) {}
+
+  // 下载文件
+  try {
+    const { default: FileSaver } = await import('file-saver')
+    FileSaver.saveAs(data, filename, options)
+    return Promise.resolve(data)
+  } catch (error) {
+    return Promise.reject('download fail: server error!')
+  }
+}

package/packages/utils/src/index.ts

@@ -0,0 +1,10 @@
+export * from './cookie'
+export * from './day'
+export * from './file'
+export * from './is'
+export * from './letter'
+export * from './number'
+export * from './openExe'
+export * from './storage'
+export * from './validate'
+export * from './ws'

package/packages/utils/src/is.ts

@@ -0,0 +1,159 @@
+/**
+ * Object.prototype.toString 别名
+ */
+export const objectToString = Object.prototype.toString
+
+/**
+ * 获取类型
+ * @param value
+ * @returns
+ */
+export const toTypeString = (value: any) => objectToString.call(value)
+
+/**
+ * 拿到类型字符串
+ * @param value
+ * @returns
+ */
+export const toRawType = (value: any) => {
+  return toTypeString(value).slice(8, -1)
+}
+
+/**
+ * 判断是否是数组
+ */
+export const isArray = Array.isArray
+
+/**
+ * 判断是否是Map
+ * @param val
+ * @returns
+ */
+export const isMap = (val: any): val is Map<any, any> => toTypeString(val) === '[object Map]'
+
+/**
+ * 判断是否是Set
+ * @param val
+ * @returns
+ */
+export const isSet = (val: any): val is Set<any> => toTypeString(val) === '[object Set]'
+
+/**
+ * 判断是否是Date
+ * @param val
+ * @returns
+ */
+export const isDate = (val: any): val is Date => toTypeString(val) === '[object Date]'
+
+/**
+ * 判断是否是Reg
+ * @param val
+ * @returns
+ */
+export const isRegExp = (val: any): val is RegExp => toTypeString(val) === '[object RegExp]'
+
+/**
+ * 判断是否是函数
+ * @param val
+ * @returns
+ */
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const isFunction = (val: any): val is Function => typeof val === 'function'
+
+/**
+ * 判断是否是字符串
+ * @param val
+ * @returns
+ */
+export const isString = (val: any): val is string => typeof val === 'string'
+
+/**
+ * 判断是否是Symbol
+ * @param val
+ * @returns
+ */
+export const isSymbol = (val: any): val is symbol => typeof val === 'symbol'
+
+/**
+ * 判断是否是boolean
+ * @param val
+ * @returns
+ */
+export const isBoolean = (val: any): val is boolean => typeof val === 'boolean'
+
+/**
+ * 判断是否是object
+ * @param val
+ * @returns
+ */
+export const isObject = (val: any): val is Record<keyof any, any> =>
+  val !== null && typeof val === 'object'
+
+/**
+ * 判断是否是Promise
+ * @param val
+ * @returns
+ */
+export const isPromise = <T = any>(val: any): val is Promise<T> => {
+  return isObject(val) && isFunction(val.then) && isFunction(val.catch)
+}
+
+/**
+ * 判断是否是 纯对象 object
+ * @param val
+ * @returns
+ */
+export const isPlainObject = (val: any): val is Record<keyof any, any> =>
+  toTypeString(val) === '[object Object]'
+
+/**
+ * 是否是空对象
+ * @param val
+ * @returns
+ */
+export const isEmptyObject = (val: any): val is Record<keyof any, any> =>
+  isPlainObject(val) && Object.keys(val).length === 0
+
+/**
+ * 是否是链接
+ * @param url
+ * @returns
+ */
+export function isUrl(url: string): url is string {
+  const regex = new RegExp(
+    '^(https?:\\/\\/)?' + // protocol
+      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
+      '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
+      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
+      '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
+      '(\\#[-a-z\\d_]*)?$',
+    'i'
+  )
+  return regex.test(url)
+}
+
+/**
+ * 是否是SVGElement
+ * @param tag
+ * @returns
+ */
+export const isSVGElement = (tag: any): tag is SVGElement =>
+  typeof SVGElement !== 'undefined' && tag instanceof SVGElement
+
+/**
+ * 是否是vue 组件
+ * @param val
+ * @returns
+ */
+export const isComponent = (val: any) =>
+  isPlainObject(val) && (isFunction(val.render) || isFunction(val.setup))
+
+/**
+ * 是否是ios
+ * @returns {boolean}
+ */
+export function isIOS(): boolean {
+  const isIphone = navigator.userAgent.includes('iPhone')
+  const isIpad = navigator.userAgent.includes('iPad')
+  return isIphone || isIpad
+}

package/packages/utils/src/letter.ts

@@ -0,0 +1,15 @@
+/**
+ * @desc 生成大写字母
+ * @returns
+ */
+export const getBigLetter = () => {
+  return Array.from({ length: 26 }).map((_, index) => String.fromCharCode(65 + index))
+}
+
+/**
+ * @desc 生成小写字母
+ * @returns
+ */
+export const getSmallLetter = () => {
+  return Array.from({ length: 26 }).map((_, index) => String.fromCharCode(97 + index))
+}

package/packages/utils/src/number.ts

@@ -0,0 +1,37 @@
+import numeral from 'numeral'
+import accounting from 'accounting'
+
+/**
+ * 格式化金钱  $12,345,678.00
+ * @param val
+ * @param format 默认 '￥'
+ * @returns
+ */
+export function formatMoney(val: string | number, format = '￥'): string {
+  return accounting.formatMoney(val, format)
+}
+
+/**
+ * 格式化数字
+ * @param number
+ * @param format   默认格式 '0.00'
+ * @returns
+ */
+export function formatNumber(number: number | string, format = '0.00'): string {
+  return numeral(number).format(format)
+}
+
+/**
+ * 格式化数字
+ * @param value
+ * @param decimal 默认2位小数
+ * @returns x.xx
+ */
+export function formatNumberFixed(value: string, decimal = 2): string {
+  let temp = String(value)
+  if (String(value).includes('.')) {
+    temp = value.slice(0, value.indexOf('.') + decimal + 1)
+  }
+  const format = '0.' + '0'.repeat(decimal)
+  return formatNumber(temp, format)
+}

package/packages/utils/src/openExe.ts

@@ -0,0 +1,45 @@
+/**
+ * @description 打开电脑本地软件
+ * @param protocol  本地软件协议， 如 vscode 的协议 `vscode://`
+ * @param event  点击按钮事件， `el-button` 或者原生 `button`
+ * @param timeout 默认`1000`ms，没响应则认为打开失败
+ */
+export const openExe = (protocol: string, event: Event, timeout = 1000): Promise<FocusEvent> => {
+  event.stopPropagation()
+  event.preventDefault()
+  window.location.href = protocol
+  const target = event.target as EventTarget & {
+    localName: string
+    parentElement: HTMLButtonElement
+    onblur: (e: FocusEvent) => void
+  }
+  return new Promise((resolve, reject) => {
+    if (target) {
+      const element =
+        target.localName === 'button'
+          ? target
+          : target.localName === 'span'
+          ? target.parentElement
+          : document
+      // 防止重复注册
+      if (element.onblur === null) {
+        // 1秒没有响应 则认为软件打开失败
+        const timer = setTimeout(() => {
+          element.onblur = null
+          reject('error')
+        }, timeout)
+
+        element.onblur = (focusEvent: FocusEvent) => {
+          // 判断焦点失去是否是按钮  防止点击界面其他地方导致失去焦点
+          if (element === document.activeElement) {
+            clearTimeout(timer)
+            element.onblur = null
+            resolve(focusEvent)
+          }
+        }
+      }
+    } else {
+      reject('error')
+    }
+  })
+}

package/packages/utils/src/storage.ts

@@ -0,0 +1,77 @@
+import storage from 'good-storage'
+import CryptoJS from 'crypto-js'
+
+/**
+ * AES加密
+ * @param key 加密的key
+ * @param data 需要加密的字符串
+ * @returns encrypted 加密的字符串
+ */
+export function encrypt(
+  key: string | CryptoJS.lib.WordArray,
+  data: string | CryptoJS.lib.WordArray
+): string {
+  const encrypted = CryptoJS.AES.encrypt(data, key).toString()
+  return encrypted
+}
+
+/**
+ * AES 解密
+ * @param key 解密的key 需要和加密的key 一致
+ * @param encrypted 加密后字符串
+ * @returns data  解密后的字符串
+ */
+export function decrypt(
+  key: string | CryptoJS.lib.WordArray,
+  encrypted: string | CryptoJS.lib.CipherParams
+): string {
+  const decrypted = CryptoJS.AES.decrypt(encrypted, key)
+  const data = decrypted.toString(CryptoJS.enc.Utf8)
+  return data
+}
+
+/**
+ * 获取storage
+ * @returns storage
+ */
+export function getStorage(key: string): string {
+  return storage.get(key)
+}
+/**
+ * 设置storage
+ * @returns storage
+ */
+export function setStorage(key: string, data: any): string {
+  return storage.set(key, data)
+}
+
+/**
+ * 移除storage
+ */
+export function removeStorage(key: string): void {
+  storage.remove(key)
+}
+
+/**
+ * 获取token  带AES解密
+ * @returns token
+ */
+export function getToken(key: string): string {
+  const data = storage.get(key)
+  const res = data ? decrypt(key, data) : ''
+  return res
+}
+/**
+ * 设置token  带AES加密
+ * @returns token
+ */
+export function setToken(key: string, token: string): string {
+  const data = encrypt(key, token)
+  return storage.set(key, data)
+}
+/**
+ * 移除token
+ */
+export function removeToken(key: string): void {
+  storage.remove(key)
+}

package/packages/utils/src/validate.ts

@@ -0,0 +1,55 @@
+/**
+ * @desc 校验链接地址
+ * @param url
+ * @returns
+ */
+export function validateRegexUrl(url: string) {
+  const regex = new RegExp(
+    '^(https?:\\/\\/)?' + // protocol
+      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
+      '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
+      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
+      '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
+      '(\\#[-a-z\\d_]*)?$',
+    'i'
+  )
+  return regex.test(url)
+}
+
+/**
+ * @desc 检验电话
+ * @param phone
+ * @returns
+ */
+export const validatePhone = (phone: string) => {
+  const reg = /^1(3[0-9]|4[0-1,4-9]|5[0-3,5-9]|6[2567]|7[0-8]|8[0-9]|9[0-3,5-9])\d{8}$/
+  return reg.test(phone)
+}
+
+/**
+ * @desc 检验固定电话
+ * @param localPhone
+ * @returns
+ */
+export const validateLocalPhone = (localPhone: string) => {
+  const reg = /^\d{3}-\d{7,8}|\d{4}-\d{7,8}$/
+  return reg.test(localPhone)
+}
+
+/**
+ * @desc 检验邮箱
+ * @param mail
+ * @returns
+ */
+export const validateEmail = (mail: string) => {
+  // eslint-disable-next-line no-useless-escape
+  const reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
+  return reg.test(mail)
+}
+
+/**
+ * @desc 判断是否是可跳转URL
+ * @param {string} path
+ * @returns
+ */
+export const validateExternal = (path: string) => /^(https?:|mailto:|tel:)/.test(path)