@qy_better_lib/hooks 0.2.5 → 0.2.7

package/lib/{use-chart.js → use-chart/index.mjs}

@@ -1,7 +1,80 @@
 import { onUnmounted } from "vue";
-import { deep_assign, deep_clone } from "@qy_better_lib/core";
-import { destroy_chart, auto_size, get_chart_gradient_color, generate_chart_colors, remove_chart_listener, add_chart_listener, export_chart_image, resize_chart, merge_chart_options, update_chart, init_chart, make_chart_responsive } from "./node_modules/@qy_better_lib/core/lib/utils/echarts.js";
-import options from "./use-chart/config.js";
+import { auto_size, deep_assign, deep_clone } from "@qy_better_lib/core";
+import { destroy_chart, get_chart_gradient_color, generate_chart_colors, remove_chart_listener, add_chart_listener, export_chart_image, resize_chart, merge_chart_options, update_chart, init_chart, make_chart_responsive } from "@qy_better_lib/core/echarts";
+const options = {
+  textStyle: {
+    fontSize: auto_size(12),
+    fontFamily: "Helvetica Neue, Arial, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif"
+  },
+  color: [],
+  title: {
+    textStyle: {
+      fontSize: auto_size(14)
+    }
+  },
+  legend: {
+    icon: "rect",
+    itemHeight: auto_size(12),
+    itemWidth: auto_size(12),
+    textStyle: { color: "#606266", fontSize: auto_size(12) },
+    itemStyle: {
+      shadowColor: "rgba(161, 163, 170, 0.25)",
+      shadowBlur: auto_size(4),
+      shadowOffsetX: auto_size(4),
+      shadowOffsetY: auto_size(4)
+    }
+  },
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      lineStyle: {
+        color: "#D4D9E2",
+        width: auto_size(1)
+      }
+    },
+    backgroundColor: "rgba(0,0,0,0.6)",
+    textStyle: {
+      color: "#fff",
+      fontWeight: 400,
+      width: auto_size(10),
+      height: auto_size(10),
+      fontSize: auto_size(12)
+    },
+    borderWidth: 0,
+    padding: [auto_size(8), auto_size(16)],
+    formatter: "{a}<br/>{b}: {c}"
+  },
+  xAxis: {
+    axisLine: {
+      lineStyle: { color: "#D4D9E2", width: auto_size(1) }
+    },
+    axisLabel: { color: "#606266", fontSize: auto_size(12) },
+    nameTextStyle: { color: "#606266", fontSize: auto_size(12) },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: "#EBECEF",
+        type: "dashed",
+        width: auto_size(1)
+      }
+    }
+  },
+  yAxis: {
+    axisLine: {
+      show: false,
+      lineStyle: { color: "#D4D9E2", width: auto_size(1) }
+    },
+    axisLabel: { color: "#606266", fontSize: auto_size(12) },
+    nameTextStyle: { color: "#606266", fontSize: auto_size(12) },
+    splitLine: {
+      lineStyle: {
+        color: "#EBECEF",
+        type: "dashed",
+        width: auto_size(1)
+      }
+    }
+  }
+};
 function get_chart_theme(theme) {
   {
     return {
@@ -188,8 +261,7 @@ function use_chart(options$1 = {}) {
     get_chart_gradient_color,
     export_chart_image: export_chart_image_wrapper,
     add_chart_listener: add_chart_listener_wrapper,
-    remove_chart_listener: remove_chart_listener_wrapper,
-    auto_size
+    remove_chart_listener: remove_chart_listener_wrapper
   };
 }
 export {

package/lib/use-chart/type.d.ts

@@ -82,11 +82,4 @@ export interface UseChartReturn {
      * @param handler 事件处理函数
      */
     remove_chart_listener: (dom_id: string, event_name: string, handler: (...args: any[]) => void) => void;
-    /**
-     * 图表字体、间距自适应
-     * @param size 原始尺寸
-     * @param deflate_width 基准宽度
-     * @returns 自适应后的尺寸
-     */
-    auto_size: (size: number, deflate_width?: number) => number;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@qy_better_lib/hooks",
   "private": false,
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "qy better lib hooks",
   "author": "luhuiming",
   "license": "MIT",
@@ -56,7 +56,7 @@
   },
   "devDependencies": {
     "@antv/x6": "^2.18.1",
-    "@qy_better_lib/core": "^0.2.5",
+    "@qy_better_lib/core": "^0.2.6",
     "@types/dagre": "^0.7.53",
     "@types/node": "^24.5.2",
     "@vitejs/plugin-vue": "^6.0.1",
@@ -97,5 +97,8 @@
     "@qy_better_lib/core": {
       "optional": false
     }
+  },
+  "dependencies": {
+    "@qy_better_lib/hooks": "^0.2.6"
   }
 }

package/lib/index.js

@@ -1,16 +0,0 @@
-import { use_emit } from "./use-emit/index.js";
-import { use_print } from "./use-print/index.js";
-import { use_water_mark } from "./use-watermark/index.js";
-import { use_web_socket } from "./use-websocket/index.js";
-import { use_image } from "./use-image/index.js";
-import { use_fullscreen } from "./use-fullscreen/index.js";
-import { EImageType } from "./use-image/type.js";
-export {
-  EImageType,
-  use_emit,
-  use_fullscreen,
-  use_image,
-  use_print,
-  use_water_mark,
-  use_web_socket
-};

package/lib/node_modules/@qy_better_lib/core/lib/utils/echarts.js

@@ -1,166 +0,0 @@
-function auto_size(size, deflate_width = 1920) {
-  let client_width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-  if (!client_width) return size;
-  let scale = client_width / deflate_width;
-  return Number((size * scale).toFixed(3));
-}
-function get_chart_gradient_color(type, start_color, end_color) {
-  return {
-    type: "linear",
-    x: 0,
-    y: 0,
-    x2: type === "v" ? 0 : 1,
-    y2: type === "v" ? 1 : 0,
-    colorStops: [
-      {
-        offset: 0,
-        color: start_color
-        // 0% 处的颜色
-      },
-      {
-        offset: 1,
-        color: end_color
-        // 100% 处的颜色
-      }
-    ]
-  };
-}
-function init_chart(container, options, renderer = "canvas", theme) {
-  const load_echarts = async () => {
-    try {
-      let echarts;
-      if (typeof window !== "undefined" && window.echarts) {
-        echarts = window.echarts;
-      } else {
-        const imported = await import("echarts");
-        echarts = imported.default || imported;
-      }
-      const chart_dom = typeof container === "string" ? document.getElementById(container) : container;
-      if (!chart_dom) {
-        console.error("ECharts DOM容器未找到");
-        return null;
-      }
-      const chart = echarts.init(chart_dom, theme, {
-        renderer
-      });
-      if (options) {
-        chart.setOption(options);
-      }
-      return chart;
-    } catch (error) {
-      console.error("加载 ECharts 失败:", error);
-      return null;
-    }
-  };
-  return load_echarts();
-}
-function destroy_chart(chart) {
-  if (chart && typeof chart.dispose === "function") {
-    chart.dispose();
-  }
-}
-function update_chart(chart, options) {
-  if (chart && typeof chart.setOption === "function") {
-    chart.setOption(options);
-  }
-}
-function resize_chart(chart) {
-  if (chart && typeof chart.resize === "function") {
-    chart.resize();
-  }
-}
-function make_chart_responsive(chart, debounce_time = 200) {
-  if (!chart) return;
-  let resize_timer;
-  const resize_handler = () => {
-    clearTimeout(resize_timer);
-    resize_timer = setTimeout(() => {
-      resize_chart(chart);
-    }, debounce_time);
-  };
-  window.addEventListener("resize", resize_handler);
-  return () => {
-    window.removeEventListener("resize", resize_handler);
-    clearTimeout(resize_timer);
-  };
-}
-function generate_chart_colors(count, base_colors) {
-  const default_colors = [
-    "#5470c6",
-    "#91cc75",
-    "#fac858",
-    "#ee6666",
-    "#73c0de",
-    "#3ba272",
-    "#fc8452",
-    "#9a60b4",
-    "#ea7ccc",
-    "#67c23a"
-  ];
-  const colors = base_colors || default_colors;
-  const result = [];
-  for (let i = 0; i < count; i++) {
-    result.push(colors[i % colors.length]);
-  }
-  return result;
-}
-function merge_chart_options(defaultOption, customOption) {
-  return {
-    ...defaultOption,
-    ...customOption,
-    // 特殊处理数组类型的配置
-    series: customOption.series || defaultOption.series,
-    xAxis: customOption.xAxis || defaultOption.xAxis,
-    yAxis: customOption.yAxis || defaultOption.yAxis,
-    legend: customOption.legend || defaultOption.legend,
-    tooltip: customOption.tooltip || defaultOption.tooltip,
-    title: customOption.title || defaultOption.title
-  };
-}
-function add_chart_listener(chart, eventName, handler) {
-  if (chart && typeof chart.on === "function") {
-    chart.on(eventName, handler);
-  }
-}
-function remove_chart_listener(chart, eventName, handler) {
-  if (chart && typeof chart.off === "function") {
-    chart.off(eventName, handler);
-  }
-}
-function export_chart_image(chart, options = {}) {
-  if (!chart || typeof chart.getDataURL !== "function") {
-    return null;
-  }
-  const {
-    type = "png",
-    pixel_ratio = 2,
-    background_color = "#fff",
-    exclude_components = [],
-    file_name = "echarts-image"
-  } = options;
-  const data_url = chart.getDataURL({
-    type,
-    pixelRatio: pixel_ratio,
-    backgroundColor: background_color,
-    excludeComponents: exclude_components
-  });
-  const link = document.createElement("a");
-  link.download = `${file_name}.${type}`;
-  link.href = data_url;
-  link.click();
-  return data_url;
-}
-export {
-  add_chart_listener,
-  auto_size,
-  destroy_chart,
-  export_chart_image,
-  generate_chart_colors,
-  get_chart_gradient_color,
-  init_chart,
-  make_chart_responsive,
-  merge_chart_options,
-  remove_chart_listener,
-  resize_chart,
-  update_chart
-};

package/lib/use-chart/config.js

@@ -1,78 +0,0 @@
-import { auto_size } from "../node_modules/@qy_better_lib/core/lib/utils/echarts.js";
-const options = {
-  textStyle: {
-    fontSize: auto_size(12),
-    fontFamily: "Helvetica Neue, Arial, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif"
-  },
-  color: [],
-  title: {
-    textStyle: {
-      fontSize: auto_size(14)
-    }
-  },
-  legend: {
-    icon: "rect",
-    itemHeight: auto_size(12),
-    itemWidth: auto_size(12),
-    textStyle: { color: "#606266", fontSize: auto_size(12) },
-    itemStyle: {
-      shadowColor: "rgba(161, 163, 170, 0.25)",
-      shadowBlur: auto_size(4),
-      shadowOffsetX: auto_size(4),
-      shadowOffsetY: auto_size(4)
-    }
-  },
-  tooltip: {
-    trigger: "axis",
-    axisPointer: {
-      lineStyle: {
-        color: "#D4D9E2",
-        width: auto_size(1)
-      }
-    },
-    backgroundColor: "rgba(0,0,0,0.6)",
-    textStyle: {
-      color: "#fff",
-      fontWeight: 400,
-      width: auto_size(10),
-      height: auto_size(10),
-      fontSize: auto_size(12)
-    },
-    borderWidth: 0,
-    padding: [auto_size(8), auto_size(16)],
-    formatter: "{a}<br/>{b}: {c}"
-  },
-  xAxis: {
-    axisLine: {
-      lineStyle: { color: "#D4D9E2", width: auto_size(1) }
-    },
-    axisLabel: { color: "#606266", fontSize: auto_size(12) },
-    nameTextStyle: { color: "#606266", fontSize: auto_size(12) },
-    splitLine: {
-      show: false,
-      lineStyle: {
-        color: "#EBECEF",
-        type: "dashed",
-        width: auto_size(1)
-      }
-    }
-  },
-  yAxis: {
-    axisLine: {
-      show: false,
-      lineStyle: { color: "#D4D9E2", width: auto_size(1) }
-    },
-    axisLabel: { color: "#606266", fontSize: auto_size(12) },
-    nameTextStyle: { color: "#606266", fontSize: auto_size(12) },
-    splitLine: {
-      lineStyle: {
-        color: "#EBECEF",
-        type: "dashed",
-        width: auto_size(1)
-      }
-    }
-  }
-};
-export {
-  options as default
-};

package/lib/use-emit/extend.js

@@ -1,42 +0,0 @@
-import mitt from "mitt";
-function createAsyncEmitter() {
-  if (typeof mitt === "undefined") {
-    return {};
-  }
-  const emitter = mitt();
-  emitter.emitAsync = async function(type, ...args) {
-    const handlers = this.all?.get(type);
-    if (!handlers || handlers.length === 0) {
-      return [];
-    }
-    const promises = handlers.map((handler) => {
-      try {
-        const result = handler(...args);
-        return result instanceof Promise ? result : Promise.resolve(result);
-      } catch (error) {
-        return Promise.reject(error);
-      }
-    });
-    return Promise.all(promises);
-  };
-  emitter.emit;
-  emitter.emit = function(type, ...args) {
-    const handlers = this.all?.get(type);
-    if (!handlers || handlers.length === 0) {
-      return void 0;
-    }
-    let lastResult;
-    handlers.forEach((handler) => {
-      try {
-        lastResult = handler(...args);
-      } catch (error) {
-        console.error(`Error in event handler for ${type}:`, error);
-      }
-    });
-    return lastResult;
-  };
-  return emitter;
-}
-export {
-  createAsyncEmitter
-};

package/lib/use-emit/index.js

@@ -1,27 +0,0 @@
-import mitt from "mitt";
-import { onMounted, onUnmounted } from "vue";
-import { createAsyncEmitter } from "./extend.js";
-const emitter = createAsyncEmitter();
-function use_emit(event_list) {
-  if (typeof mitt === "undefined") return { emitter: {} };
-  onMounted(() => {
-    if (event_list && event_list.length > 0) {
-      for (const event of event_list) {
-        emitter.on(event.key, event.value);
-      }
-    }
-  });
-  onUnmounted(() => {
-    if (event_list && event_list.length > 0) {
-      for (const event of event_list) {
-        emitter.off(event.key, event.value);
-      }
-    }
-  });
-  return {
-    emitter
-  };
-}
-export {
-  use_emit
-};

package/lib/use-fullscreen/index.js

@@ -1,51 +0,0 @@
-import { ref, shallowRef, onMounted, onUnmounted } from "vue";
-import { get_element, on, off } from "@qy_better_lib/core";
-function use_fullscreen(selector) {
-  const full = ref(false);
-  const container = shallowRef(null);
-  function fullscreen_change() {
-    full.value = document.fullscreenElement === container.value;
-  }
-  onMounted(() => {
-    container.value = get_element(selector);
-    if (container.value) {
-      on(container.value, "fullscreenchange", fullscreen_change);
-    }
-  });
-  onUnmounted(() => {
-    if (container.value) {
-      off(container.value, "fullscreenchange", fullscreen_change);
-    }
-  });
-  function enter_fullscreen() {
-    if (!full.value && container.value?.requestFullscreen) {
-      container.value.requestFullscreen().catch((error) => {
-        console.error("进入全屏失败:", error);
-      });
-    }
-  }
-  function exit_fullscreen() {
-    if (document.exitFullscreen) {
-      document.exitFullscreen().catch((error) => {
-        console.error("退出全屏失败:", error);
-      });
-    }
-  }
-  function toggle_fullscreen() {
-    if (full.value) {
-      exit_fullscreen();
-    } else {
-      enter_fullscreen();
-    }
-  }
-  return {
-    container,
-    full,
-    toggle_fullscreen,
-    enter_fullscreen,
-    exit_fullscreen
-  };
-}
-export {
-  use_fullscreen
-};