zyf-model-engine 0.0.1

package/src/styles/element.scss

@@ -0,0 +1,233 @@
+/* 设置 notification、message 层级在 loading 之上 */
+.el-message,
+.el-notification {
+  z-index: 2058 !important;
+}
+
+/* el-alert */
+.el-alert {
+  border: 1px solid;
+}
+
+/* 当前页面最大化 css */
+.main-maximize {
+  .aside-split,
+  .el-aside,
+  .el-header,
+  .el-footer,
+  .tabs-box {
+    display: none !important;
+  }
+}
+
+/* mask image */
+.mask-image {
+  padding-right: 50px;
+  mask-image: linear-gradient(90deg, #000000 0%, #000000 calc(100% - 50px), transparent);
+}
+
+/* custom card */
+.card {
+  box-sizing: border-box;
+  padding: 20px;
+  overflow-x: hidden;
+  background-color: var(--bg-color-2);
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 6px;
+  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+}
+
+/* ProTable 不需要 card 样式（在组件内使用 ProTable 会使用到） */
+.no-card {
+  .card {
+    padding: 0;
+    background: var(--bg-color);
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+  }
+  .table-search {
+    padding: 18px 0 0 !important;
+    margin-bottom: 0 !important;
+  }
+}
+
+/* proTable */
+.table-box,
+.table-main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+
+  // table-search 表格搜索样式
+  .table-search {
+    padding: 18px 18px 0;
+    margin-bottom: 10px;
+    .el-form {
+      .el-form-item__content > * {
+        width: 100%;
+      }
+
+      // 去除时间选择器上下 padding
+      .el-range-editor.el-input__wrapper {
+        padding: 0 10px;
+      }
+    }
+    .operation {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      margin-bottom: 18px;
+    }
+  }
+
+  // 表格 header 样式
+  .table-header {
+    .header-button-lf {
+      float: left;
+    }
+    .header-button-ri {
+      float: right;
+    }
+    .el-button {
+      margin-bottom: 15px;
+    }
+  }
+
+  // el-table 表格样式
+  .el-table {
+    flex: 1;
+
+    // 修复 safari 浏览器表格错位 https://github.com/HalseySpicy/Geeker-Admin/issues/83
+    table {
+      width: 100%;
+    }
+    .el-table__header th {
+      height: 45px;
+      font-size: 15px;
+      font-weight: bold;
+      color: var(--el-text-color-primary);
+      background: var(--el-fill-color-light);
+    }
+    .el-table__row {
+      height: 45px;
+      font-size: 14px;
+    }
+
+    // 设置 el-table 中 header 文字不换行，并省略
+    .el-table__header .el-table__cell > .cell {
+      white-space: nowrap;
+    }
+
+    // 解决表格数据为空时样式不居中问题(仅在element-plus中)
+    .el-table__empty-block {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      .table-empty {
+        line-height: 30px;
+      }
+    }
+
+    // table 中 image 图片样式
+    .table-image {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+    }
+  }
+
+  // 表格 pagination 样式
+  .el-pagination {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 20px;
+  }
+}
+
+/* el-table 组件大小 */
+.el-table--small {
+  .el-table__header th {
+    height: 40px !important;
+    font-size: 14px !important;
+  }
+  .el-table__row {
+    height: 40px !important;
+    font-size: 13px !important;
+  }
+}
+.el-table--large {
+  .el-table__header th {
+    height: 50px !important;
+    font-size: 16px !important;
+  }
+  .el-table__row {
+    height: 50px !important;
+    font-size: 15px !important;
+  }
+}
+
+/* el-drawer */
+.el-drawer {
+  .el-drawer__header {
+    padding: 16px 20px;
+    margin-bottom: 0;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+    span {
+      font-size: 17px;
+      line-height: 17px;
+      color: var(--el-text-color-primary) !important;
+    }
+  }
+  .el-drawer__footer {
+    border-top: 1px solid var(--el-border-color-lighter);
+  }
+
+  // select 样式
+  .el-select {
+    width: 100%;
+  }
+
+  // drawer-form 中存在两列 form-item 样式
+  .drawer-multiColumn-form {
+    display: flex;
+    flex-wrap: wrap;
+    .el-form-item {
+      width: 47%;
+      &:nth-child(2n-1) {
+        margin-right: 5%;
+      }
+    }
+  }
+}
+
+/* el-dialog */
+.el-dialog {
+  .el-dialog__header {
+    padding: 0 36px 15px 10px;
+    margin: 0 0 20px;
+
+    // background-color: #f1f9f9;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+    .el-dialog__title {
+      font-size: 17px;
+    }
+  }
+}
+.el-icon {
+  box-sizing: content-box !important;
+}
+.color-primary {
+  color: var(--el-color-primary);
+}
+
+/** el-table toolitp */
+.el-table {
+  .el-popper.is-dark {
+    max-width: 500px;
+  }
+}

package/src/styles/reset.scss

@@ -0,0 +1,20 @@
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  font-family: MiSans;
+}
+* {
+  box-sizing: border-box !important;
+}
+.el-tooltip__trigger:focus {
+  outline: none;
+}
+
+/* 解决 h1 标签在 webkit 内核浏览器中文字大小失效问题 */
+:-webkit-any(article, aside, nav, section) h1 {
+  font-size: 2em;
+}

package/src/styles/var.scss

@@ -0,0 +1,2 @@
+/* global css variable */
+$primary-color: var(--el-color-primary);

package/src/typings/global.d.ts

@@ -0,0 +1,37 @@
+/* Vite */
+declare type Recordable<T = any> = Record<string, T>;
+
+declare interface ViteEnv {
+  VITE_USER_NODE_ENV: "development" | "production" | "test";
+  VITE_GLOB_APP_TITLE: string;
+  VITE_PORT: number;
+  VITE_OPEN: boolean;
+  VITE_BUILD_COMPRESS: "gzip" | "brotli" | "gzip,brotli" | "none";
+  VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: boolean;
+  VITE_DROP_CONSOLE: boolean;
+  VITE_PWA: boolean;
+  VITE_PUBLIC_PATH: string;
+  VITE_API_URL: string;
+  VITE_REPORT: boolean;
+  VITE_PROXY: [string, string][];
+}
+
+/* __APP_INFO__ */
+declare const __APP_INFO__: {
+  pkg: {
+    name: string;
+    version: string;
+    dependencies: Recordable<string>;
+    devDependencies: Recordable<string>;
+  };
+  lastBuildTime: string;
+};
+
+/* Generic Tools */
+type ObjToKeyValUnion<T> = {
+  [K in keyof T]: { key: K; value: T[K] };
+}[keyof T];
+
+type ObjToKeyValArray<T> = {
+  [K in keyof T]: [K, T[K]];
+}[keyof T];

package/src/typings/window.d.ts

@@ -0,0 +1,8 @@
+declare global {
+  interface Navigator {
+    msSaveOrOpenBlob: (blob: Blob, fileName: string) => void;
+    browserLanguage: string;
+  }
+}
+
+export {};

package/src/utils/color.ts

@@ -0,0 +1,59 @@
+import { ElMessage } from "element-plus";
+
+/**
+ * @description hex颜色转rgb颜色
+ * @param {String} str 颜色值字符串
+ * @returns {String} 返回处理后的颜色值
+ */
+export function hexToRgb(str: any) {
+  let hexs: any = "";
+  let reg = /^\#?[0-9A-Fa-f]{6}$/;
+  if (!reg.test(str)) return ElMessage.warning("输入错误的hex");
+  str = str.replace("#", "");
+  hexs = str.match(/../g);
+  for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16);
+  return hexs;
+}
+
+/**
+ * @description rgb颜色转Hex颜色
+ * @param {*} r 代表红色
+ * @param {*} g 代表绿色
+ * @param {*} b 代表蓝色
+ * @returns {String} 返回处理后的颜色值
+ */
+export function rgbToHex(r: any, g: any, b: any) {
+  let reg = /^\d{1,3}$/;
+  if (!reg.test(r) || !reg.test(g) || !reg.test(b)) return ElMessage.warning("输入错误的rgb颜色值");
+  let hexs = [r.toString(16), g.toString(16), b.toString(16)];
+  for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`;
+  return `#${hexs.join("")}`;
+}
+
+/**
+ * @description 加深颜色值
+ * @param {String} color 颜色值字符串
+ * @param {Number} level 加深的程度，限0-1之间
+ * @returns {String} 返回处理后的颜色值
+ */
+export function getDarkColor(color: string, level: number) {
+  let reg = /^\#?[0-9A-Fa-f]{6}$/;
+  if (!reg.test(color)) return ElMessage.warning("输入错误的hex颜色值");
+  let rgb = hexToRgb(color);
+  for (let i = 0; i < 3; i++) rgb[i] = Math.round(20.5 * level + rgb[i] * (1 - level));
+  return rgbToHex(rgb[0], rgb[1], rgb[2]);
+}
+
+/**
+ * @description 变浅颜色值
+ * @param {String} color 颜色值字符串
+ * @param {Number} level 加深的程度，限0-1之间
+ * @returns {String} 返回处理后的颜色值
+ */
+export function getLightColor(color: string, level: number) {
+  let reg = /^\#?[0-9A-Fa-f]{6}$/;
+  if (!reg.test(color)) return ElMessage.warning("输入错误的hex颜色值");
+  let rgb = hexToRgb(color);
+  for (let i = 0; i < 3; i++) rgb[i] = Math.round(255 * level + rgb[i] * (1 - level));
+  return rgbToHex(rgb[0], rgb[1], rgb[2]);
+}

package/src/utils/commonUtils.ts

@@ -0,0 +1,175 @@
+import dayjs from "dayjs";
+
+/**
+ * @description 生成唯一 uuid
+ * @returns {String}
+ */
+export function generateUUID() {
+  let uuid = "";
+  for (let i = 0; i < 32; i++) {
+    let random = (Math.random() * 16) | 0;
+    if (i === 8 || i === 12 || i === 16 || i === 20) uuid += "-";
+    uuid += (i === 12 ? 4 : i === 16 ? (random & 3) | 8 : random).toString(16);
+  }
+  return uuid;
+}
+
+/**
+ * @description 深拷贝
+ */
+export const deepClone = (obj: { [k: string]: any }): { [k: string]: any } => {
+  if (typeof obj !== "object" || obj === null) {
+    return obj;
+  }
+  let copy: { [k: string]: any };
+  if (Array.isArray(obj)) {
+    copy = [] as any;
+    for (let i = 0; i < obj.length; i++) {
+      copy[i] = deepClone(obj[i]);
+    }
+  } else {
+    copy = {} as any;
+    for (const key in obj) {
+      if (Object.prototype.hasOwnProperty.call(obj, key)) {
+        copy[key] = deepClone(obj[key]);
+      }
+    }
+  }
+  return copy;
+};
+
+/**
+ * 防抖
+ * @param fn {Function}
+ * @param delay {number}
+ */
+export function debounce<T>(fn: T, delay: number): () => void {
+  let timer: NodeJS.Timeout;
+  return function (): void {
+    // eslint-disable-next-line prefer-rest-params
+    const args: any[] = Array.prototype.map.call(arguments, val => val);
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(
+      () => {
+        // eslint-disable-next-line prefer-spread
+        typeof fn === "function" && fn.apply(null, args);
+        clearTimeout(timer);
+      },
+      delay > 0 ? delay : 100
+    );
+  };
+}
+
+/**
+ * @description 日期转换
+ * @param {string} value
+ * @param {string} format
+ * @returns {string}
+ */
+export function formatDate(value: string, format = "YYYY-MM-DD") {
+  if (!value) return "";
+  return dayjs(value).format(format);
+}
+
+/**
+ * @description 生成随机数
+ * @param {Number} min 最小值
+ * @param {Number} max 最大值
+ * @returns {Number}
+ */
+export function randomNum(min: number, max: number): number {
+  let num = Math.floor(Math.random() * (min - max) + max);
+  return num;
+}
+
+/**
+ * @description 为对象添加level层级
+ */
+export const addLevel = (arr: Record<string, any>[], level: number = 1, attribute?: string) => {
+  arr.forEach((obj: Record<string, any>) => {
+    //  && obj.hasOwnProperty(attribute)
+    if (attribute) {
+      obj[attribute].level = level;
+    } else {
+      obj.level = level;
+    }
+    if (obj.children && obj.children.length > 0) {
+      addLevel(obj.children, level + 1, attribute);
+    }
+  });
+};
+
+// 深度遍历对象
+export function deepTraverse(obj: Record<string, any>, callback: (key: string, value: any) => any) {
+  // 遍历对象中的每一个属性
+  for (const key in obj) {
+    // 检查属性是否属于对象本身而不是原型链上的属性
+    if (obj.hasOwnProperty(key)) {
+      // 调用回调函数处理当前属性值
+      callback(key, obj[key]);
+      // 如果属性值是一个对象，则递归调用 deepTraverse
+      if (typeof obj[key] === "object" && obj[key] !== null) {
+        deepTraverse(obj[key], callback);
+      }
+    }
+  }
+}
+
+/**
+ * @description 将objB与objA的交集赋值给objA
+ * @param {Object} objA 要比较的对象一
+ * @param {Object} objB 要比较的对象二
+ */
+export const listAssign = (objA: Record<string, any>, objB: Record<string, any>) => {
+  for (const key in objA) {
+    objA[key] = objB[key] ?? objA[key];
+  }
+  return objA;
+};
+
+/**
+ * 判断两个对象是否相同
+ * @param {Object} a 要比较的对象一
+ * @param {Object} b 要比较的对象二
+ * @returns {Boolean} 相同返回 true，反之 false
+ */
+export function isObjectValueEqual(a: { [key: string]: any }, b: { [key: string]: any }) {
+  if (!a || !b) return false;
+  let aProps = Object.getOwnPropertyNames(a);
+  let bProps = Object.getOwnPropertyNames(b);
+  if (aProps.length != bProps.length) return false;
+  for (let i = 0; i < aProps.length; i++) {
+    let propName = aProps[i];
+    let propA = a[propName];
+    let propB = b[propName];
+    if (!b.hasOwnProperty(propName)) return false;
+    if (propA instanceof Object) {
+      if (!isObjectValueEqual(propA, propB)) return false;
+    } else if (propA !== propB) {
+      return false;
+    }
+  }
+  return true;
+}
+/**
+ * @description 传入两个数组返回两个数组的交集  只能判断简单数据类型
+ */
+export function arrayIntersection(arr1: any[], arr2: any[]) {
+  if (arr1?.length && arr2?.length) {
+    return arr1.filter(function (value) {
+      return value && arr2.indexOf(value) !== -1;
+    });
+  }
+  return [];
+}
+
+/**
+ * @description 文字size适配
+ */
+export function formatFontSize(fontsize: number) {
+  const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+  if (!clientWidth) return;
+  return ((fontsize * clientWidth) / 1920).toFixed(2);
+}

package/src/utils/errorHandler.ts

@@ -0,0 +1,28 @@
+import { ElNotification } from "element-plus";
+
+/**
+ * @description 全局代码错误捕捉
+ * */
+const errorHandler = (error: any) => {
+  console.log(error);
+  // 过滤 HTTP 请求错误
+  if (error.status || error.status == 0) return false;
+  let errorMap: { [key: string]: string } = {
+    InternalError: "Javascript引擎内部错误",
+    ReferenceError: "未找到对象",
+    TypeError: "使用了错误的类型或对象",
+    RangeError: "使用内置对象时，参数超范围",
+    SyntaxError: "语法错误",
+    EvalError: "错误的使用了Eval",
+    URIError: "URI错误"
+  };
+  let errorName = errorMap[error.name] || "未知错误";
+  ElNotification({
+    title: errorName,
+    message: error,
+    type: "error",
+    duration: 3000
+  });
+};
+
+export default errorHandler;

package/src/utils/is.ts

@@ -0,0 +1,147 @@
+/**
+ * @description: 判断值是某个类型
+ */
+export function is(val: unknown, type: string) {
+  return Object.prototype.toString.call(val) === `[object ${type}]`;
+}
+
+/**
+ * @description 判断数据类型
+ * @param {*} val 需要判断类型的数据
+ * @returns {String}
+ */
+export function isType(val: any) {
+  if (val === null) return "null";
+  if (typeof val !== "object") return typeof val;
+  else return Object.prototype.toString.call(val).slice(8, -1).toLocaleLowerCase();
+}
+
+/**
+ * @description:  是否为空
+ */
+export const isEmpty = (val: any) => {
+  if (val !== null && val !== undefined && val !== "") {
+    return false;
+  } else {
+    return true;
+  }
+};
+
+/**
+ * @description:  是否为函数
+ */
+export function isFunction<T = Function>(val: unknown): val is T {
+  return is(val, "Function");
+}
+
+/**
+ * @description: 是否已定义
+ */
+export const isDef = <T = unknown>(val?: T): val is T => {
+  return typeof val !== "undefined";
+};
+
+/**
+ * @description: 是否未定义
+ */
+export const isUnDef = <T = unknown>(val?: T): val is T => {
+  return !isDef(val);
+};
+
+/**
+ * @description: 是否为对象
+ */
+export const isObject = (val: any): val is Record<any, any> => {
+  return val !== null && is(val, "Object");
+};
+
+/**
+ * @description:  是否为时间
+ */
+export function isDate(val: unknown): val is Date {
+  return is(val, "Date");
+}
+
+/**
+ * @description:  是否为数值
+ */
+export function isNumber(val: unknown): val is number {
+  return is(val, "Number");
+}
+
+/**
+ * @description:  是否为AsyncFunction
+ */
+export function isAsyncFunction<T = any>(val: unknown): val is Promise<T> {
+  return is(val, "AsyncFunction");
+}
+
+/**
+ * @description:  是否为promise
+ */
+export function isPromise<T = any>(val: unknown): val is Promise<T> {
+  return is(val, "Promise") && isObject(val) && isFunction(val.then) && isFunction(val.catch);
+}
+
+/**
+ * @description:  是否为字符串
+ */
+export function isString(val: unknown): val is string {
+  return is(val, "String");
+}
+
+/**
+ * @description:  是否为boolean类型
+ */
+export function isBoolean(val: unknown): val is boolean {
+  return is(val, "Boolean");
+}
+
+/**
+ * @description:  是否为数组
+ */
+export function isArray(val: any): val is Array<any> {
+  return val && Array.isArray(val);
+}
+
+/**
+ * @description: 是否客户端
+ */
+export const isClient = () => {
+  return typeof window !== "undefined";
+};
+
+/**
+ * @description: 是否为浏览器
+ */
+export const isWindow = (val: any): val is Window => {
+  return typeof window !== "undefined" && is(val, "Window");
+};
+
+/**
+ * @description: 是否为 element 元素
+ */
+export const isElement = (val: unknown): val is Element => {
+  return isObject(val) && !!val.tagName;
+};
+
+/**
+ * @description: 是否为 null
+ */
+export function isNull(val: unknown): val is null {
+  return val === null;
+}
+
+/**
+ * @description: 是否为 null || undefined
+ */
+export function isNullOrUnDef(val: unknown): val is null | undefined {
+  return isUnDef(val) || isNull(val);
+}
+
+/**
+ * @description: 是否为 16 进制颜色
+ */
+export const isHexColor = (str: string) => {
+  return /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(str);
+};