yuang-framework-ui-pc 1.1.42 → 1.1.43

package/es/utils/chart-theme.js

@@ -0,0 +1,392 @@
+const ChartTheme = {
+  color: [
+    "#5b8ff9",
+    "#61ddaa",
+    "#65789b",
+    "#f6bd16",
+    "#7262fd",
+    "#78d3f8",
+    "#9661bc",
+    "#f6903d",
+    "#008685",
+    "#f08bb4"
+  ],
+  backgroundColor: "rgba(0,0,0,0)",
+  textStyle: {},
+  title: {
+    textStyle: {
+      color: "#333333"
+    },
+    subtextStyle: {
+      color: "#666666"
+    }
+  },
+  line: {
+    itemStyle: {
+      borderWidth: 1
+    },
+    lineStyle: {
+      width: "2"
+    },
+    symbolSize: 4,
+    symbol: "emptyCircle",
+    smooth: false
+  },
+  radar: {
+    itemStyle: {
+      borderWidth: 1
+    },
+    lineStyle: {
+      width: "2"
+    },
+    symbolSize: 4,
+    symbol: "emptyCircle",
+    smooth: false
+  },
+  bar: {
+    barCategoryGap: "50%",
+    itemStyle: {
+      barBorderWidth: "0",
+      barBorderColor: "#fff"
+    }
+  },
+  pie: {
+    itemStyle: {
+      borderWidth: "2",
+      borderColor: "#fff"
+    }
+  },
+  scatter: {
+    itemStyle: {
+      borderWidth: "0",
+      borderColor: "#fff"
+    }
+  },
+  boxplot: {
+    itemStyle: {
+      borderWidth: "0",
+      borderColor: "#fff"
+    }
+  },
+  parallel: {
+    itemStyle: {
+      borderWidth: "0",
+      borderColor: "#fff"
+    }
+  },
+  sankey: {
+    itemStyle: {
+      borderWidth: "0",
+      borderColor: "#fff"
+    }
+  },
+  funnel: {
+    itemStyle: {
+      borderWidth: "0",
+      borderColor: "#fff"
+    }
+  },
+  gauge: {
+    itemStyle: {
+      borderWidth: "0",
+      borderColor: "#fff"
+    }
+  },
+  candlestick: {
+    itemStyle: {
+      color: "#dd3f5d",
+      color0: "#51bd4b",
+      borderColor: "#dd3f5d",
+      borderColor0: "#51bd4b",
+      borderWidth: 1
+    }
+  },
+  graph: {
+    itemStyle: {
+      borderWidth: "0",
+      borderColor: "#fff"
+    },
+    lineStyle: {
+      width: 1,
+      color: "#bfbfbf"
+    },
+    symbolSize: 4,
+    symbol: "emptyCircle",
+    smooth: false,
+    color: [
+      "#5b8ff9",
+      "#61ddaa",
+      "#65789b",
+      "#f6bd16",
+      "#7262fd",
+      "#78d3f8",
+      "#9661bc",
+      "#f6903d",
+      "#008685",
+      "#f08bb4"
+    ],
+    label: {
+      color: "#666666"
+    }
+  },
+  map: {
+    itemStyle: {
+      areaColor: "#fafafa",
+      borderColor: "#d9d9d9",
+      borderWidth: 1
+    },
+    label: {
+      color: "#333333",
+      textBorderColor: "#fff",
+      textBorderWidth: 1
+    },
+    emphasis: {
+      itemStyle: {
+        areaColor: "rgba(255,215,0,0.8)",
+        borderColor: "#d9d9d9",
+        borderWidth: 1
+      },
+      label: {
+        color: "#333333"
+      }
+    }
+  },
+  geo: {
+    itemStyle: {
+      areaColor: "#fafafa",
+      borderColor: "#d9d9d9",
+      borderWidth: 1
+    },
+    label: {
+      color: "#333333",
+      textBorderColor: "#fff",
+      textBorderWidth: 1
+    },
+    emphasis: {
+      itemStyle: {
+        areaColor: "rgba(255,215,0,0.8)",
+        borderColor: "#d9d9d9",
+        borderWidth: 1
+      },
+      label: {
+        color: "#333333"
+      }
+    }
+  },
+  grid: {
+    top: 30,
+    right: 20,
+    left: 60,
+    bottom: 40
+  },
+  categoryAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#bfbfbf"
+      }
+    },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: "#bfbfbf"
+      },
+      alignWithLabel: true
+    },
+    axisLabel: {
+      show: true,
+      color: "#666666"
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        type: "dashed",
+        color: ["#d9d9d9"]
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["#f0f0f0"]
+      }
+    }
+  },
+  valueAxis: {
+    axisLine: {
+      show: false,
+      lineStyle: {
+        color: "#bfbfbf"
+      }
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: "#bfbfbf"
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: "#666666"
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        type: "dashed",
+        color: ["#d9d9d9"]
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["#f0f0f0"]
+      }
+    }
+  },
+  logAxis: {
+    axisLine: {
+      show: false,
+      lineStyle: {
+        color: "#bfbfbf"
+      }
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: "#bfbfbf"
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: "#666666"
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ["#d9d9d9"]
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["#f0f0f0"]
+      }
+    }
+  },
+  timeAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#bfbfbf"
+      }
+    },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: "#bfbfbf"
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: "#666666"
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: ["#d9d9d9"]
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["#f0f0f0"]
+      }
+    }
+  },
+  toolbox: {
+    iconStyle: {
+      borderColor: "#999999"
+    },
+    emphasis: {
+      iconStyle: {
+        borderColor: "#666666"
+      }
+    }
+  },
+  legend: {
+    inactiveColor: "#cccccc",
+    inactiveBorderColor: "#fff",
+    textStyle: {
+      color: "#666666",
+      lineHeight: 14
+    }
+  },
+  tooltip: {
+    axisPointer: {
+      lineStyle: {
+        color: "#bfbfbf",
+        width: "1"
+      },
+      crossStyle: {
+        color: "#bfbfbf",
+        width: "1"
+      }
+    }
+  },
+  timeline: {
+    lineStyle: {
+      color: "#d9d9d9",
+      width: "1"
+    },
+    itemStyle: {
+      color: "#d9d9d9",
+      borderWidth: "1"
+    },
+    controlStyle: {
+      color: "#d9d9d9",
+      borderColor: "#d9d9d9",
+      borderWidth: "0.5"
+    },
+    checkpointStyle: {
+      color: "#5b8ff9",
+      borderColor: "#5b8ff9"
+    },
+    label: {
+      color: "#999999"
+    },
+    emphasis: {
+      itemStyle: {
+        color: "#5b8ff9"
+      },
+      controlStyle: {
+        color: "#d9d9d9",
+        borderColor: "#d9d9d9",
+        borderWidth: "0.5"
+      },
+      label: {
+        color: "#666666"
+      }
+    }
+  },
+  visualMap: {
+    itemHeight: 80,
+    itemWidth: 15,
+    color: ["#5b8ff9", "#b0d0ff", "#f0f7ff"],
+    textStyle: {
+      color: "#666666"
+    }
+  },
+  dataZoom: {
+    handleSize: "100%",
+    textStyle: {
+      color: "#666666"
+    }
+  },
+  markPoint: {
+    label: {
+      color: "#ffffff"
+    }
+  }
+};
+export {
+  ChartTheme
+};

package/es/utils/menu-util.d.ts

@@ -0,0 +1,14 @@
+import { RouteRecordRaw, _RouteRecordBase, RouteComponent } from 'vue-router';
+import { MenuItem } from '../ele-pro-layout/types';
+
+/**
+ * 获取路由组件方法
+ */
+export type GetComponent = (component?: string, menu?: MenuItem, name?: string) => (() => Promise<RouteComponent>) | RouteComponent | undefined;
+/**
+ * 菜单数据转为路由数据
+ * @param menus 菜单数据
+ * @param getComponent 加载组件的方法
+ * @param added 已添加的路由
+ */
+export declare function menuToRoutes(menus: MenuItem[] | undefined, getComponent: GetComponent, added?: _RouteRecordBase[]): RouteRecordRaw[] | undefined;

package/es/utils/menu-util.js

@@ -0,0 +1,78 @@
+import { defineComponent, ref, computed, h } from "vue";
+import { useRoute } from "vue-router";
+import { useProLayoutState, getIframeSrc } from "../ele-pro-layout/util";
+import { isExternalLink, findTree } from "./core";
+function camelCase(str) {
+  const val = str.replace(/[-|/](\w)/g, (_, c) => c ? c.toUpperCase() : "");
+  return val.charAt(0).toUpperCase() + val.slice(1);
+}
+function pathIsAdd(path, data) {
+  return findTree(data, (d) => path === d.path) != null;
+}
+function getRoutePath(path) {
+  if (!path || !path.includes("?")) {
+    return path;
+  }
+  return path.substring(0, path.indexOf("?"));
+}
+function getRouteComponent(menu, name, func) {
+  if (!menu.component || !isExternalLink(menu.component)) {
+    return { component: func(menu.component, menu, name) };
+  }
+  return {
+    component: defineComponent({
+      name,
+      setup() {
+        var _a;
+        const proLayoutState = useProLayoutState();
+        const route = useRoute();
+        const { fullPath } = route;
+        const iframeSrc = ref(getIframeSrc(fullPath, menu.component));
+        const isAlive = ((_a = menu.meta) == null ? void 0 : _a.keepAlive) !== false;
+        const keepAlive = computed(() => !!proLayoutState.keepAlive);
+        return () => {
+          if (!isAlive || !keepAlive.value) {
+            return h("iframe", {
+              src: iframeSrc.value,
+              class: "ele-admin-iframe"
+            });
+          }
+          return h("div", { class: "ele-none", style: { display: "none" } });
+        };
+      }
+    }),
+    link: true
+  };
+}
+function menuToRoutes(menus, getComponent, added) {
+  if (!(menus == null ? void 0 : menus.length)) {
+    return;
+  }
+  const routes = [];
+  const addedRoutes = added ? [...added] : [];
+  menus.forEach((item) => {
+    const meta = { ...item.meta };
+    const path = getRoutePath(meta.routePath || item.path);
+    if (path && !isExternalLink(path) && !pathIsAdd(path, addedRoutes)) {
+      const name = item.name || camelCase(path);
+      const { component, link } = getRouteComponent(item, name, getComponent);
+      if (link) {
+        meta.iframe = item.component;
+        meta.hideFooter = true;
+      }
+      addedRoutes.push({ path });
+      routes.push({
+        name,
+        path,
+        component,
+        redirect: item.redirect,
+        meta,
+        children: menuToRoutes(item.children, getComponent, addedRoutes)
+      });
+    }
+  });
+  return routes;
+}
+export {
+  menuToRoutes
+};

package/es/utils/message-box.d.ts

@@ -0,0 +1,25 @@
+import { AppContext } from 'vue';
+import { ElMessageBoxOptions, MessageBoxData as ElMessageBoxData } from 'element-plus';
+
+/**
+ * 消息弹窗配置
+ */
+export interface MessageBoxOptions extends ElMessageBoxOptions {
+    /** 是否限制在主体内部 */
+    inner?: boolean;
+}
+/**
+ * 消息弹窗方法
+ */
+export type MessageBoxMethod = (message: ElMessageBoxOptions['message'], title: ElMessageBoxOptions['title'], options?: MessageBoxOptions, context?: AppContext | null) => Promise<ElMessageBoxData>;
+/**
+ * 消息弹窗
+ */
+export interface MessageBox {
+    (options?: MessageBoxOptions, context?: AppContext | null): Promise<ElMessageBoxData>;
+    alert: MessageBoxMethod;
+    confirm: MessageBoxMethod;
+    prompt: MessageBoxMethod;
+    close: () => void;
+}
+export declare function useMessageBox(globalOpt?: MessageBoxOptions): MessageBox;

package/es/utils/message-box.js

@@ -0,0 +1,98 @@
+import { getCurrentInstance, onActivated, onDeactivated, onBeforeUnmount, unref, h } from "vue";
+import { ElMessageBox } from "element-plus";
+import { useGlobalProps } from "../ele-config-provider/receiver";
+import { useLayoutState } from "../ele-pro-layout/util";
+import MessageBoxIcon from "../ele-app/components/message-box-icon";
+import { omit } from "./core";
+function getWrapEl(bodyEl) {
+  const parent = bodyEl || document.body;
+  const className = "ele-message-box-wrapper";
+  const elem = document.createElement("div");
+  elem.classList.add(className);
+  parent.appendChild(elem);
+  return elem;
+}
+function useMessageBox(globalOpt) {
+  var _a, _b;
+  const layoutState = useLayoutState();
+  const globalProps = useGlobalProps("messageBox");
+  const appContext = (_b = (_a = getCurrentInstance) == null ? void 0 : _a()) == null ? void 0 : _b.appContext;
+  const state = { wrapEl: null, isActivated: true, id: 0 };
+  const instances = /* @__PURE__ */ new Map();
+  const hideClass = "is-hide";
+  onActivated(() => {
+    state.isActivated = true;
+    state.wrapEl && state.wrapEl.classList.remove(hideClass);
+  });
+  onDeactivated(() => {
+    state.isActivated = false;
+    state.wrapEl && state.wrapEl.classList.add(hideClass);
+  });
+  onBeforeUnmount(() => {
+    for (const [_key, insDoClose] of instances) {
+      insDoClose && insDoClose();
+    }
+    instances.clear();
+  });
+  const getOption = (options) => {
+    state.id++;
+    const msgId = `m_${state.id}`;
+    const opt = {
+      ...globalProps.value || {},
+      ...globalOpt || {},
+      ...options || {}
+    };
+    if (opt.inner) {
+      if (opt.appendTo == null && layoutState.modalsEl != null) {
+        if (state.wrapEl == null) {
+          state.wrapEl = getWrapEl(layoutState.modalsEl);
+        }
+        opt.appendTo = state.wrapEl;
+      } else if (opt.appendTo != null) {
+        opt.appendTo = unref(opt.appendTo);
+      }
+      opt.lockScroll = false;
+    } else if (opt.appendTo != null) {
+      opt.appendTo = unref(opt.appendTo);
+    }
+    const classes = ["ele-message-box"];
+    if (opt.customClass) {
+      classes.push(opt.customClass);
+    }
+    opt.customClass = classes.join(" ");
+    opt.icon = h(MessageBoxIcon, {
+      type: opt.type,
+      icon: opt.icon,
+      boxId: msgId,
+      onBoxDestroy: (boxId) => {
+        boxId && instances.delete(boxId);
+      },
+      onBoxMounted: ({ boxId, doClose }) => {
+        boxId && instances.set(boxId, doClose);
+      }
+    });
+    return omit(opt, ["inner"]);
+  };
+  const messageBox = function(options) {
+    return ElMessageBox(getOption(options), appContext);
+  };
+  messageBox.alert = function(message, title, options, context) {
+    const ctx = context ?? appContext;
+    return ElMessageBox.alert(message, title, getOption(options), ctx);
+  };
+  messageBox.confirm = function(message, title, options, context) {
+    const ctx = context ?? appContext;
+    return ElMessageBox.confirm(message, title, getOption(options), ctx);
+  };
+  messageBox.prompt = function(message, title, options, context) {
+    const ctx = context ?? appContext;
+    return ElMessageBox.prompt(message, title, getOption(options), ctx);
+  };
+  messageBox.close = function() {
+    return ElMessageBox.close();
+  };
+  return messageBox;
+}
+export {
+  useMessageBox
+};

package/es/utils/message.d.ts

@@ -0,0 +1,66 @@
+import { AppContext, InjectionKey } from 'vue';
+import { MessageHandler as ElMessageHandler, MessageOptions as ElMessageOptions, MessageFn as ElMessageFn } from 'element-plus/es/components/message';
+
+/**
+ * 消息提示配置
+ */
+export interface MessageOptions extends ElMessageOptions {
+    /** 是否为原始风格 */
+    original?: boolean | 'plain';
+    /** 是否显示遮罩层 */
+    mask?: boolean;
+    /** 是否居中显示 */
+    centered?: boolean;
+    /** 是否限制在主体内部 */
+    inner?: boolean;
+    /** 限制在主体内部的分组标识 */
+    groupKey?: string;
+}
+/**
+ * 消息提示方法参数
+ */
+export type MessageParams = MessageOptions | ElMessageOptions['message'];
+/**
+ * 消息提示方法
+ */
+export type MessageFn = (options?: MessageParams, context?: null | AppContext) => ElMessageHandler;
+/**
+ * 消息提示
+ */
+export interface Message extends MessageFn {
+    closeAll: ElMessageFn['closeAll'];
+    success: MessageFn;
+    warning: MessageFn;
+    error: MessageFn;
+    info: MessageFn;
+    loading: MessageFn;
+}
+/**
+ * 消息提示依赖注入
+ */
+interface MessageProvide {
+    /** 限制在主体内部的分组标识 */
+    groupKey: string;
+    /** 获取限制在主体内部的容器 */
+    getInnerWrap: () => HTMLElement;
+}
+/**
+ * 消息提示依赖注入key
+ */
+type MessageKey = InjectionKey<MessageProvide>;
+/**
+ * 提供各种调用方法
+ * @param options 参数
+ * @param context 上下文
+ */
+declare const EleMessage: Message;
+export { EleMessage };
+/**
+ * 消息提示依赖注入key
+ */
+export declare const MESSAGE_KEY: MessageKey;
+/**
+ * 带当前上下文的消息提示
+ * @param options 参数
+ */
+export declare function useMessage(globalOpt?: MessageOptions): Message;