@qy_better_lib/hooks 0.2.6 → 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, 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 {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@qy_better_lib/hooks",
   "private": false,
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "qy better lib hooks",
   "author": "luhuiming",
   "license": "MIT",
@@ -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/dom.js

@@ -1,14 +0,0 @@
-function on(element, event, handler, options) {
-  if (element) {
-    element.addEventListener(event, handler, options);
-  }
-}
-function off(element, event, handler, options) {
-  if (element) {
-    element.removeEventListener(event, handler, options);
-  }
-}
-export {
-  off,
-  on
-};

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

@@ -1,160 +0,0 @@
-import { on, off } from "./dom.js";
-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);
-  };
-  on(window, "resize", resize_handler);
-  return () => {
-    off(window, "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,
-  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 "@qy_better_lib/core";
-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
-};

package/lib/use-image/index.js

@@ -1,192 +0,0 @@
-import { download_file, to_base64, compress_image } from "@qy_better_lib/core";
-import { EImageType } from "./type.js";
-function use_image() {
-  function check_image_type(type) {
-    return Object.values(EImageType).includes(type);
-  }
-  async function canvas_to_data_url(canvas, quality = 0.92, type = EImageType.JPEG) {
-    if (!check_image_type(type)) {
-      type = EImageType.JPEG;
-    }
-    return canvas.toDataURL(type, quality);
-  }
-  async function canvas_to_file(canvas, file_name = "image", quality = 0.92, type = EImageType.JPEG) {
-    const data_url = await canvas_to_data_url(canvas, quality, type);
-    return data_url_to_file(data_url, type, file_name);
-  }
-  async function data_url_to_file(data_url, type = EImageType.JPEG, file_name = "image") {
-    if (!check_image_type(type)) {
-      type = EImageType.JPEG;
-    }
-    const arr = data_url.split(",");
-    const mime = arr[0].match(/:(.*?);/)?.[1] || type;
-    const bstr = atob(arr[1]);
-    let n = bstr.length;
-    const u8arr = new Uint8Array(n);
-    while (n--) {
-      u8arr[n] = bstr.charCodeAt(n);
-    }
-    const extension = mime.split("/")[1];
-    const full_name = `${file_name}.${extension}`;
-    return new File([u8arr], full_name, { type: mime });
-  }
-  async function data_url_to_image(data_url) {
-    return new Promise((resolve, reject) => {
-      const image = new Image();
-      image.onload = () => resolve(image);
-      image.onerror = reject;
-      image.src = data_url;
-    });
-  }
-  function download_file$1(blob, file_name = "download") {
-    const url = URL.createObjectURL(blob);
-    download_file({ path: url, name: file_name });
-    URL.revokeObjectURL(url);
-  }
-  async function file_to_data_url(file) {
-    const result = await to_base64(file);
-    if (!result) {
-      throw new Error("转换文件为DataURL失败");
-    }
-    return result;
-  }
-  async function image_to_canvas(image, config = {}) {
-    const canvas = document.createElement("canvas");
-    const context = canvas.getContext("2d");
-    if (!context) {
-      throw new Error("创建Canvas上下文失败");
-    }
-    const width = config.width || image.width;
-    const height = config.height || image.height;
-    const scale = config.scale || 1;
-    canvas.width = width * scale;
-    canvas.height = height * scale;
-    context.scale(scale, scale);
-    context.drawImage(image, 0, 0, width, height);
-    return canvas;
-  }
-  async function url_to_blob(url) {
-    const response = await fetch(url);
-    if (!response.ok) {
-      throw new Error(`获取图片失败: ${response.statusText}`);
-    }
-    return response.blob();
-  }
-  async function url_to_image(url) {
-    return new Promise((resolve, reject) => {
-      const image = new Image();
-      image.onload = () => resolve(image);
-      image.onerror = reject;
-      image.src = url;
-    });
-  }
-  async function compress(file, config = {}) {
-    if (!(file instanceof Blob)) {
-      throw new Error("compress(): 第一个参数必须是Blob对象或File对象");
-    }
-    const quality = Math.max(0, Math.min(1, isNaN(Number(config.quality)) ? 0.92 : Number(config.quality)));
-    config.quality = quality;
-    const data_url = await file_to_data_url(file);
-    const original_mime = data_url.split(",")[0].match(/:(.*?);/)?.[1];
-    let mime = EImageType.JPEG;
-    if (check_image_type(config.type)) {
-      mime = config.type;
-    }
-    const image = await data_url_to_image(data_url);
-    const canvas = await image_to_canvas(image, config);
-    const compress_data_url = await canvas_to_data_url(canvas, config.quality, mime);
-    const compress_file = await data_url_to_file(compress_data_url, original_mime || mime);
-    if (compress_file.size > file.size) {
-      return file;
-    }
-    return compress_file;
-  }
-  async function compress_accurately(file, config = {}) {
-    if (!(file instanceof Blob)) {
-      throw new Error("compressAccurately(): 第一个参数必须是Blob对象或File对象");
-    }
-    const size = Math.max(0, isNaN(Number(config.size)) ? 0 : Number(config.size));
-    config.size = size;
-    const accuracy = Math.max(0.8, Math.min(0.99, isNaN(Number(config.accuracy)) ? 0.95 : Number(config.accuracy)));
-    config.accuracy = accuracy;
-    if (isNaN(config.size)) {
-      return file;
-    }
-    if (config.size * 1024 > file.size) {
-      return file;
-    }
-    if (!config.accuracy || config.accuracy < 0.8 || config.accuracy > 0.99) {
-      config.accuracy = 0.95;
-    }
-    const result_size = {
-      max: config.size * (2 - config.accuracy) * 1024,
-      accurate: config.size * 1024,
-      min: config.size * config.accuracy * 1024
-    };
-    const data_url = await file_to_data_url(file);
-    const original_mime = data_url.split(",")[0].match(/:(.*?);/)?.[1];
-    let mime = EImageType.JPEG;
-    if (check_image_type(config.type)) {
-      mime = config.type;
-    }
-    const image = await data_url_to_image(data_url);
-    const canvas = await image_to_canvas(image, config);
-    const proportion = 0.75;
-    let image_quality = 1;
-    let compress_data_url = "";
-    const temp_data_urls = [];
-    for (let x = 1; x <= 7; x++) {
-      compress_data_url = await canvas_to_data_url(canvas, image_quality, mime);
-      const calculation_size = compress_data_url.length * proportion;
-      if (x === 7) {
-        if (result_size.max < calculation_size || result_size.min > calculation_size) {
-          compress_data_url = [compress_data_url, ...temp_data_urls].filter(Boolean).sort(
-            (a, b) => Math.abs(a.length * proportion - result_size.accurate) - Math.abs(b.length * proportion - result_size.accurate)
-          )[0];
-        }
-        break;
-      }
-      if (result_size.max < calculation_size) {
-        temp_data_urls[1] = compress_data_url;
-        image_quality -= 0.5 ** (x + 1);
-      } else if (result_size.min > calculation_size) {
-        temp_data_urls[0] = compress_data_url;
-        image_quality += 0.5 ** (x + 1);
-      } else {
-        break;
-      }
-    }
-    const compress_file = await data_url_to_file(
-      compress_data_url,
-      original_mime || mime
-    );
-    if (compress_file.size > file.size) {
-      return file;
-    }
-    return compress_file;
-  }
-  async function compress_image$1(file, max_width = 800, max_height = 800, quality = 0.8) {
-    return compress_image(file, max_width, max_height, quality);
-  }
-  return {
-    // 压缩功能
-    compress,
-    compress_accurately,
-    compress_image: compress_image$1,
-    // 转换功能
-    canvas_to_data_url,
-    canvas_to_file,
-    data_url_to_file,
-    data_url_to_image,
-    file_to_data_url,
-    image_to_canvas,
-    url_to_blob,
-    url_to_image,
-    // 工具功能
-    download_file: download_file$1
-  };
-}
-export {
-  EImageType,
-  use_image
-};

package/lib/use-image/type.js

@@ -1,9 +0,0 @@
-var EImageType = /* @__PURE__ */ ((EImageType2) => {
-  EImageType2["PNG"] = "image/png";
-  EImageType2["JPEG"] = "image/jpeg";
-  EImageType2["GIF"] = "image/gif";
-  return EImageType2;
-})(EImageType || {});
-export {
-  EImageType
-};