zhui-plus 1.0.0 → 1.0.10

package/packages/utils/event.ts

@@ -0,0 +1,37 @@
+const isServer = typeof window === "undefined";
+
+function resizeHandler(entries: any[]): void {
+  for (const entry of entries) {
+    const listeners = entry.target.__resizeListeners__ || [];
+    if (listeners.length) {
+      listeners.forEach((fn: () => any) => {
+        fn();
+      });
+    }
+  }
+}
+
+export function addResizeListener(element: any, fn: () => unknown): void {
+  if (isServer) return;
+  if (!element.__resizeListeners__) {
+    element.__resizeListeners__ = [];
+    element.__ro__ = new ResizeObserver(resizeHandler);
+    element.__ro__.observe(element);
+  }
+  element.__resizeListeners__.push(fn);
+}
+
+export function removeResizeListener(element: any, fn: () => unknown): void {
+  if (!element || !element.__resizeListeners__) return;
+  element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
+  if (!element.__resizeListeners__.length) {
+    element.__ro__.disconnect();
+  }
+}
+
+export function triggerWindowResize(): void {
+  const event = document.createEvent("HTMLEvents");
+  event.initEvent("resize", true, true);
+  (event as any).eventType = "message";
+  window.dispatchEvent(event);
+}

package/packages/utils/hooks/__tests__/hooks.test.ts

@@ -0,0 +1,24 @@
+import { useNamespace } from '../hooks.util'
+import { computed, ref } from 'vue'
+
+describe('test hooks.util.ts', () => {
+  test('test function b', () => {
+    const ns = useNamespace('container')
+    expect(ns.b()).toBe('bl_container')
+  })
+  test('test function is', () => {
+    const ns = useNamespace('container')
+    const test = ref('vertical')
+    const isVertical = computed(() => {
+      if (test.value === 'vertical') {
+        return true
+      } else {
+        return false
+      }
+    })
+    expect(ns.is(isVertical.value, 'vertical')).toBe('is-vertical')
+    test.value = ''
+    expect(isVertical.value).toBeFalsy()
+    expect(ns.is(isVertical.value, 'vertical')).toBe('')
+  })
+})

package/packages/utils/hooks/data.ts

@@ -0,0 +1,100 @@
+export const MaximumEntities = 20;
+
+export enum sizeEnum {
+  XS = "XS",
+  SM = "SM",
+  MD = "MD",
+  LG = "LG",
+  XL = "XL",
+  XXL = "XXL",
+}
+
+export enum screenEnum {
+  XS = 480,
+  SM = 576,
+  MD = 768,
+  LG = 992,
+  XL = 1200,
+  XXL = 1600,
+}
+
+export const screenMap = new Map<sizeEnum, number>();
+
+screenMap.set(sizeEnum.XS, screenEnum.XS);
+screenMap.set(sizeEnum.SM, screenEnum.SM);
+screenMap.set(sizeEnum.MD, screenEnum.MD);
+screenMap.set(sizeEnum.LG, screenEnum.LG);
+screenMap.set(sizeEnum.XL, screenEnum.XL);
+screenMap.set(sizeEnum.XXL, screenEnum.XXL);
+
+export const RespFields: Indexable = {
+  execExpression: `{
+    type
+    results {
+      metric {
+        labels {
+          key
+          value
+        }
+      }
+      values {
+        name: id
+        value
+        refId: traceID
+        owner {
+          scope
+          serviceID
+          serviceName
+          normal
+          serviceInstanceID
+          serviceInstanceName
+          endpointID
+          endpointName
+        }
+      }
+    }
+    error
+  }`,
+};
+
+export const DarkChartColors = [
+  "#79bbff",
+  "#a0a7e6",
+  "#30A4EB",
+  "#45BFC0",
+  "#ebbf93",
+  "#884dde",
+  "#1bbf93",
+  "#7289ab",
+  "#f56c6c",
+  "#81feb7",
+  "#4094fa",
+  "#ff894d",
+  "#884dde",
+  "#ebbf93",
+  "#fedc6d",
+  "#da7cfa",
+  "#b88230",
+  "#a0cfff",
+];
+
+export const LightChartColors = [
+  "#3f96e3",
+  "#a0a7e6",
+  "#45BFC0",
+  "#FFCC55",
+  "#FF6A84",
+  "#c23531",
+  "#2f4554",
+  "#61a0a8",
+  "#d48265",
+  "#91c7ae",
+  "#749f83",
+  "#ca8622",
+  "#bda29a",
+  "#6e7074",
+  "#546570",
+  "#c4ccd3",
+];
+
+export const MaxQueryLength = 120;

package/packages/utils/hooks/hooks.util.ts

@@ -0,0 +1,39 @@
+import { CSSProperties } from 'vue'
+
+export const DEFAULT_NAMESPACE = 'bl'
+export const STATE_PREFIX = 'is'
+
+type namespaceStyle = 'backgroundColor' | 'color' | 'width' | 'height'
+
+export const useNamespace = (namespace: string) => {
+  return {
+    b() {
+      return `${DEFAULT_NAMESPACE}-${namespace}`
+    },
+    is(state: boolean, name: string) {
+      return name && state ? `${STATE_PREFIX}-${name}` : ''
+    },
+    m(suffix: string) {
+      if (suffix) {
+        return `${DEFAULT_NAMESPACE}-${namespace}-${suffix}`
+      }
+      return ''
+    },
+    sy(data: string, label: namespaceStyle) {
+      return {
+        [label]: data
+      } as CSSProperties
+    },
+    is_sy(is: Boolean, one: CSSProperties, two?: CSSProperties) {
+      if (!two) {
+        if (is) return one
+        return {} as CSSProperties
+      }
+      if (is) {
+        return one
+      } else {
+        return two
+      }
+    }
+  }
+}

package/packages/utils/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./usePermission"

package/packages/utils/hooks/useBreakpoint.ts

@@ -0,0 +1,89 @@
+import type { ComputedRef } from "vue";
+import { ref, computed, unref } from "vue";
+import { useEventListener } from "./useEventListener";
+import { screenMap, sizeEnum, screenEnum } from "./data";
+
+let globalScreenRef: ComputedRef<sizeEnum | undefined>;
+let globalWidthRef: ComputedRef<number>;
+let globalRealWidthRef: ComputedRef<number>;
+
+export interface CreateCallbackParams {
+  screen: ComputedRef<sizeEnum | undefined>;
+  width: ComputedRef<number>;
+  realWidth: ComputedRef<number>;
+  screenEnum: typeof screenEnum;
+  screenMap: Map<sizeEnum, number>;
+  sizeEnum: typeof sizeEnum;
+}
+
+export function useBreakpoint(): Indexable {
+  return {
+    screenRef: computed(() => unref(globalScreenRef)),
+    widthRef: globalWidthRef,
+    screenEnum,
+    realWidthRef: globalRealWidthRef,
+  };
+}
+
+export function createBreakpointListen(fn?: (opt: CreateCallbackParams) => void): Indexable {
+  const screenRef = ref<sizeEnum>(sizeEnum.XL || "");
+  const realWidthRef = ref(window.innerWidth);
+
+  function getWindowWidth() {
+    const width = document.body.clientWidth;
+    const xs = screenMap.get(sizeEnum.XS) || 0;
+    const sm = screenMap.get(sizeEnum.SM) || 0;
+    const md = screenMap.get(sizeEnum.MD) || 0;
+    const lg = screenMap.get(sizeEnum.LG) || 0;
+    const xl = screenMap.get(sizeEnum.XL) || 0;
+    if (width < xs) {
+      screenRef.value = sizeEnum.XS;
+    } else if (width < sm) {
+      screenRef.value = sizeEnum.SM;
+    } else if (width < md) {
+      screenRef.value = sizeEnum.MD;
+    } else if (width < lg) {
+      screenRef.value = sizeEnum.LG;
+    } else if (width < xl) {
+      screenRef.value = sizeEnum.XL;
+    } else {
+      screenRef.value = sizeEnum.XXL;
+    }
+    realWidthRef.value = width;
+  }
+
+  useEventListener({
+    el: window,
+    name: "resize",
+
+    listener: () => {
+      getWindowWidth();
+      resizeFn();
+    },
+    // wait: 100,
+  });
+
+  getWindowWidth();
+  globalScreenRef = computed(() => unref(screenRef));
+  globalWidthRef = computed((): number => screenMap.get(unref(screenRef)) || 0);
+  globalRealWidthRef = computed((): number => unref(realWidthRef));
+
+  function resizeFn() {
+    fn?.({
+      screen: globalScreenRef,
+      width: globalWidthRef,
+      realWidth: globalRealWidthRef,
+      screenEnum,
+      screenMap,
+      sizeEnum,
+    });
+  }
+
+  resizeFn();
+  return {
+    screenRef: globalScreenRef,
+    screenEnum,
+    widthRef: globalWidthRef,
+    realWidthRef: globalRealWidthRef,
+  };
+}

package/packages/utils/hooks/useEcharts.ts

@@ -0,0 +1,56 @@
+// composables/useEcharts.ts
+import {ref, onMounted, onBeforeUnmount, watch, markRaw, Ref} from 'vue'
+import * as echarts from 'echarts'
+
+import type { EChartsOption} from 'echarts/types/dist/shared'
+type EChartsInstance = ReturnType<typeof echarts.init>
+export function useEcharts(
+    chartRef: Ref<HTMLElement | null>,
+    initialOption: EChartsOption
+) {
+  const chartInstance = ref<EChartsInstance | null>(null)
+
+  // 初始化图表
+  const initChart = () => {
+    if (!chartRef.value) return
+    // 使用 markRaw 避免 Vue 对 ECharts 实例进行响应式代理[reference:1]
+    chartInstance.value = markRaw(echarts.init(chartRef.value))
+    chartInstance.value.setOption(initialOption)
+  }
+
+  // 更新图表配置
+  const setOption = (option: EChartsOption) => {
+    if (!chartInstance.value) return
+    chartInstance.value.setOption(option, true) // true 启用合并模式，保留交互状态[reference:2]
+  }
+
+  // 图表自适应
+  const resize = () => {
+    chartInstance.value?.resize()
+  }
+
+  // 销毁实例
+  const dispose = () => {
+    if (chartInstance.value) {
+      chartInstance.value.dispose()
+      chartInstance.value = null
+    }
+  }
+
+  onMounted(() => {
+    initChart()
+    window.addEventListener('resize', resize)
+  })
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', resize)
+    dispose()
+  })
+
+  return {
+    chartInstance,
+    setOption,
+    resize,
+    dispose
+  }
+}

package/packages/utils/hooks/useEventListener.ts

@@ -0,0 +1,57 @@
+import type { Ref } from "vue";
+import { ref, watch, unref } from "vue";
+import { useThrottleFn, useDebounceFn } from "@vueuse/core";
+
+export type RemoveEventFn = () => void;
+export interface UseEventParams {
+  el?: Element | Ref<Element | undefined> | Window | Recordable;
+  name: string;
+  listener: EventListener;
+  options?: boolean | AddEventListenerOptions;
+  autoRemove?: boolean;
+  isDebounce?: boolean;
+  wait?: number;
+}
+export function useEventListener({
+  el = window,
+  name,
+  listener,
+  options,
+  autoRemove = true,
+  isDebounce = true,
+  wait = 80,
+}: UseEventParams): { removeEvent: RemoveEventFn } {
+  let remove: RemoveEventFn = () => ({});
+  const isAddRef = ref(false);
+
+  if (el) {
+    const element = ref(el as Element) as Ref<Element>;
+
+    const handler = isDebounce ? useDebounceFn(listener, wait) : useThrottleFn(listener, wait);
+    const realHandler = wait ? handler : listener;
+    const removeEventListener = (e: Element) => {
+      isAddRef.value = true;
+      e.removeEventListener(name, realHandler, options);
+    };
+    const addEventListener = (e: Element) => e.addEventListener(name, realHandler, options);
+
+    const removeWatch = watch(
+      element,
+      (v, _ov, cleanUp) => {
+        if (v) {
+          !unref(isAddRef) && addEventListener(v);
+          cleanUp(() => {
+            autoRemove && removeEventListener(v);
+          });
+        }
+      },
+      { immediate: true },
+    );
+
+    remove = () => {
+      removeEventListener(element.value);
+      removeWatch();
+    };
+  }
+  return { removeEvent: remove };
+}

package/packages/utils/hooks/useLegendProcessor.ts

@@ -0,0 +1,92 @@
+import type { LegendOptions } from "../data";
+import { isDef } from "../is";
+import { DarkChartColors, LightChartColors } from "./data";
+import { Themes } from "../data";
+
+export default function useLegendProcess(legend?: LegendOptions) {
+  let isRight = false;
+  if (legend && legend.toTheRight) {
+    isRight = true;
+  }
+  function showEchartsLegend(keys: string[]) {
+    if (legend && isDef(legend.show)) {
+      if (legend.asTable && legend.show) {
+        return false;
+      }
+      return legend.show;
+    }
+    if (keys.length === 1) {
+      return false;
+    }
+    if (legend && (legend.asTable || legend.asSelector)) {
+      return false;
+    }
+    return true;
+  }
+  function aggregations(data: { [key: string]: number[] }, intervalTime: string[]) {
+    const source: { [key: string]: unknown }[] = [];
+    const keys = Object.keys(data || {}).filter((i: string) => Array.isArray(data[i]) && data[i].length);
+    const headers:any = [];
+
+    for (const [key, value] of keys.entries()) {
+      const arr = JSON.parse(JSON.stringify(data[value]));
+      const item: { [key: string]: unknown } = {
+        name: value,
+        topN: arr
+          .map((d: number, index: number) => {
+            return {
+              key: intervalTime[index],
+              value: d,
+            };
+          })
+          .sort((a: { key: string; value: number }, b: { key: string; value: number }) => b.value - a.value)
+          .filter((_: unknown, index: number) => index < 10),
+      };
+      if (legend) {
+        if (legend.min) {
+          item.min = Math.min(...data[value]).toFixed(2);
+          if (key === 0) {
+            headers.push({ value: "min", label: "Min" });
+          }
+        }
+        if (legend.max) {
+          item.max = Math.max(...data[value]).toFixed(2);
+          if (key === 0) {
+            headers.push({ value: "max", label: "Max" });
+          }
+        }
+        if (legend.mean) {
+          const total = data[value].reduce((prev: number, next: number) => {
+            prev += Number(next);
+            return prev;
+          }, 0);
+          item.mean = (total / data[value].length).toFixed(4);
+          if (key === 0) {
+            headers.push({ value: "mean", label: "Mean" });
+          }
+        }
+        if (legend.total) {
+          item.total = data[value]
+            .reduce((prev: number, next: number) => {
+              prev += Number(next);
+              return prev;
+            }, 0)
+            .toFixed(2);
+          if (key === 0) {
+            headers.push({ value: "total", label: "Total" });
+          }
+        }
+      }
+      source.push(item);
+    }
+
+    return { source, headers };
+  }
+  function chartColors() {
+   const theme = localStorage.getItem("theme");
+    const list = theme === Themes.Dark ? DarkChartColors : LightChartColors;
+
+    return list;
+  }
+  return { showEchartsLegend, isRight, aggregations, chartColors };
+}

package/packages/utils/hooks/usePermission.ts

@@ -0,0 +1,22 @@
+// src/components/Permission/usePermission.ts
+import {inject, computed, type ComputedRef, InjectionKey} from 'vue';
+import type { PermissionMap } from '../../types';
+
+// 注意：这里的键必须和 Provider 中的一致
+const PERMISSION_KEY: InjectionKey<ComputedRef<PermissionMap>> = Symbol('permission');
+
+export function usePermission() {
+    const permissions = inject(PERMISSION_KEY, undefined);
+
+    const hasPermission = (key: string): boolean => {
+        if (!permissions) return false;
+        return !!permissions.value[key];
+    };
+
+    return {
+        /** 当前合并后的权限对象（响应式） */
+        permissions,
+        /** 判断是否拥有某个权限 */
+        hasPermission,
+    };
+}

package/packages/utils/hooks/useTimeout.ts

@@ -0,0 +1,45 @@
+import { ref, watch } from "vue";
+import { tryOnUnmounted } from "@vueuse/core";
+import { isFunction } from "../is";
+
+export function useTimeoutFn(handle: Fn<any>, wait: number, native = false): any {
+  if (!isFunction(handle)) {
+    throw new Error("handle is not Function!");
+  }
+
+  const { readyRef, stop, start } = useTimeoutRef(wait);
+  if (native) {
+    handle();
+  } else {
+    watch(
+      readyRef,
+      (maturity) => {
+        maturity && handle();
+      },
+      { immediate: false },
+    );
+  }
+  return { readyRef, stop, start };
+}
+
+export function useTimeoutRef(wait: number) {
+  const readyRef = ref(false);
+
+  let timer: TimeoutHandle;
+  function stop(): void {
+    readyRef.value = false;
+    timer && window.clearTimeout(timer);
+  }
+  function start(): void {
+    stop();
+    timer = setTimeout(() => {
+      readyRef.value = true;
+    }, wait);
+  }
+
+  start();
+
+  tryOnUnmounted(stop);
+
+  return { readyRef, stop, start };
+}

package/packages/utils/is.ts

@@ -0,0 +1,79 @@
+const toString = Object.prototype.toString;
+
+export function is(val: unknown, type: string): boolean {
+  return toString.call(val) === `[object ${type}]`;
+}
+
+export function isDef<T = unknown>(val?: T): val is T {
+  return typeof val !== "undefined";
+}
+
+export function isUnDef<T = unknown>(val?: T): val is T {
+  return !isDef(val);
+}
+
+export function isObject(val: unknown): val is Record<any, any> {
+  return val !== null && is(val, "Object");
+}
+
+export function isDate(val: unknown): val is Date {
+  return is(val, "Date");
+}
+
+export function isNull(val: unknown): val is null {
+  return val === null;
+}
+
+export function isNullAndUnDef(val: unknown): val is null | undefined {
+  return isUnDef(val) && isNull(val);
+}
+
+export function isNullOrUnDef(val: unknown): val is null | undefined {
+  return isUnDef(val) || isNull(val);
+}
+
+export function isNumber(val: unknown): val is number {
+  return is(val, "Number");
+}
+
+export function isPromise<T = any>(val: unknown): val is Promise<T> {
+  return is(val, "Promise") && isObject(val) && isFunction(val.then) && isFunction(val.catch);
+}
+
+export function isString(val: unknown): val is string {
+  return is(val, "String");
+}
+
+export function isFunction(val: unknown): val is () => unknown {
+  return typeof val === "function";
+}
+
+export function isBoolean(val: unknown): val is boolean {
+  return is(val, "Boolean");
+}
+
+export function isRegExp(val: unknown): val is RegExp {
+  return is(val, "RegExp");
+}
+
+export function isArray(val: unknown): boolean {
+  return Array.isArray(val);
+}
+
+export function isWindow(val: unknown): val is Window {
+  return typeof window !== "undefined" && is(val, "Window");
+}
+
+export function isElement(val: unknown): val is Element {
+  return isObject(val) && !!val.tagName;
+}
+
+export function isMap(val: unknown): val is Map<any, any> {
+  return is(val, "Map");
+}
+export function isEmptyObject<T = unknown>(val: T): val is T {
+  if (isObject(val)) {
+    return Object.keys(val).length === 0;
+  }
+  return false;
+}