@qy_better_lib/hooks 0.1.9 → 0.2.0

package/lib/use-print/index.js

@@ -1,67 +1,301 @@
-function y() {
-  function o(t) {
-    let e = c(), n = u(t);
-    document.body.appendChild(e), document.body.appendChild(n), m(n).then(() => {
-      window.print(), document.body.removeChild(e), document.body.removeChild(n);
-    });
-  }
-  function c(t) {
-    let e = `#print-container {
+function use_print() {
+  let preview_container = null;
+  let print_in_progress = false;
+  function get_style(custom_style, options) {
+    const page_size = options?.page_size || "A4";
+    const page_orientation = options?.page_orientation || "portrait";
+    const margin = options?.margin || "1cm";
+    const print_background = options?.print_background ? "true" : "false";
+    const default_style = `#print-container {
             display: none;
         }
+        #preview-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.8);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 9999;
+            overflow: auto;
+        }
+        #preview-content {
+            background: white;
+            width: 80%;
+            max-width: 800px;
+            padding: 20px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+            position: relative;
+        }
+        #preview-close {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: #333;
+            color: white;
+            border: none;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            cursor: pointer;
+            font-size: 16px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        #preview-print {
+            margin-top: 20px;
+            padding: 10px 20px;
+            background: #007bff;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 16px;
+        }
         @media print {
-            body > :not(.print-container) {
+            body > :not(#print-container) {
                 display: none;
             }
             html,
             body {
                 display: block !important;
+                margin: 0;
+                padding: 0;
+                width: 100%;
+                height: 100%;
+                -webkit-print-color-adjust: ${print_background};
+                print-color-adjust: ${print_background};
             }
             #print-container {
                 display: block;
+                padding: 20px;
+                width: 100%;
+                height: 100%;
+                box-sizing: border-box;
             }
-        }`, n = document.createElement("style");
-    return n.innerHTML = e, n;
+        }
+        @page {
+            size: ${page_size} ${page_orientation};
+            margin: ${margin};
+        }`;
+    const style = document.createElement("style");
+    style.innerHTML = custom_style || default_style;
+    return style;
+  }
+  function clean_print() {
+    const existing_container = document.getElementById("print-container");
+    if (existing_container) {
+      try {
+        document.body.removeChild(existing_container);
+      } catch (error) {
+        console.error("清理打印容器失败:", error);
+      }
+    }
   }
-  function d() {
-    let t = document.getElementById("print-container");
-    t && document?.querySelector("body")?.removeChild(t);
+  function clean_preview() {
+    const existing_preview = document.getElementById("preview-container");
+    if (existing_preview) {
+      try {
+        document.body.removeChild(existing_preview);
+        preview_container = null;
+      } catch (error) {
+        console.error("清理预览容器失败:", error);
+      }
+    }
   }
-  function u(t) {
-    d();
-    let e = document.createElement("div");
-    return e.setAttribute("id", "print-container"), e.innerHTML = t, e;
+  function get_container(html_content) {
+    clean_print();
+    const container = document.createElement("div");
+    container.setAttribute("id", "print-container");
+    container.innerHTML = html_content;
+    return container;
   }
-  function m(t) {
-    let e = t.querySelectorAll("img");
-    const n = [].slice.call(e);
-    if (n.length === 0)
+  function get_load_promise(container) {
+    if (!container || typeof container.querySelectorAll !== "function") {
       return Promise.resolve();
-    let i = 0;
-    return new Promise((p) => {
-      function r() {
-        i++, i === n.length && p();
+    }
+    const img_elements = container.querySelectorAll("img");
+    const imgs = Array.from(img_elements);
+    if (imgs.length === 0) {
+      return Promise.resolve();
+    }
+    let finished_count = 0;
+    return new Promise((resolve, reject) => {
+      function check() {
+        finished_count++;
+        if (finished_count === imgs.length) {
+          resolve();
+        }
       }
-      n.forEach((l) => {
-        l.addEventListener("load", r), l.addEventListener("error", r);
+      imgs.forEach((img) => {
+        if (img.complete) {
+          check();
+        } else {
+          img.addEventListener("load", check);
+          img.addEventListener("error", check);
+        }
       });
+      setTimeout(() => {
+        reject(new Error("图片加载超时"));
+      }, 1e4);
     });
   }
-  function a(t) {
-    const e = document.querySelector(t);
-    e && o(e.innerHTML);
+  async function print(html_content, options) {
+    if (print_in_progress) {
+      console.warn("打印已在进行中");
+      return;
+    }
+    try {
+      print_in_progress = true;
+      const style = get_style(options?.custom_style, options);
+      const container = get_container(html_content);
+      document.body.appendChild(style);
+      document.body.appendChild(container);
+      await get_load_promise(container);
+      window.print();
+      setTimeout(() => {
+        try {
+          if (style.parentNode) {
+            style.parentNode.removeChild(style);
+          }
+          if (container.parentNode) {
+            container.parentNode.removeChild(container);
+          }
+          print_in_progress = false;
+          options?.on_complete?.();
+        } catch (error) {
+          console.error("清理打印元素失败:", error);
+          options?.on_error?.(error);
+        }
+      }, 100);
+    } catch (error) {
+      console.error("打印失败:", error);
+      print_in_progress = false;
+      options?.on_error?.(error);
+    }
+  }
+  async function preview(html_content, options) {
+    try {
+      clean_preview();
+      const style = get_style(options?.custom_style, options);
+      const content = document.createElement("div");
+      content.innerHTML = html_content;
+      await get_load_promise(content);
+      const preview_wrapper = document.createElement("div");
+      preview_wrapper.setAttribute("id", "preview-container");
+      const preview_content = document.createElement("div");
+      preview_content.setAttribute("id", "preview-content");
+      preview_content.appendChild(content);
+      const close_button = document.createElement("button");
+      close_button.setAttribute("id", "preview-close");
+      close_button.textContent = "×";
+      close_button.addEventListener("click", () => {
+        clean_preview();
+        options?.on_cancel?.();
+      });
+      const print_button = document.createElement("button");
+      print_button.setAttribute("id", "preview-print");
+      print_button.textContent = "打印";
+      print_button.addEventListener("click", () => {
+        clean_preview();
+        print(html_content, options);
+      });
+      preview_content.appendChild(close_button);
+      preview_content.appendChild(print_button);
+      preview_wrapper.appendChild(preview_content);
+      document.body.appendChild(style);
+      document.body.appendChild(preview_wrapper);
+      preview_container = preview_wrapper;
+    } catch (error) {
+      console.error("预览失败:", error);
+      options?.on_error?.(error);
+    }
+  }
+  async function print_html(dom_selector, options) {
+    try {
+      const target_element = document.querySelector(dom_selector);
+      if (target_element) {
+        if (options?.preview) {
+          await preview(target_element.innerHTML, options);
+        } else {
+          await print(target_element.innerHTML, options);
+        }
+      } else {
+        throw new Error(`未找到DOM节点: ${dom_selector}`);
+      }
+    } catch (error) {
+      console.error("打印DOM元素失败:", error);
+      options?.on_error?.(error);
+    }
+  }
+  async function print_html_element(element_array, options) {
+    try {
+      if (!element_array || element_array.length === 0) {
+        throw new Error("元素数组为空");
+      }
+      let html_content = "";
+      for (const element of element_array) {
+        html_content += element.outerHTML;
+      }
+      if (!html_content) {
+        throw new Error("元素内容为空");
+      }
+      if (options?.preview) {
+        await preview(html_content, options);
+      } else {
+        await print(html_content, options);
+      }
+    } catch (error) {
+      console.error("打印元素数组失败:", error);
+      options?.on_error?.(error);
+    }
+  }
+  function preview_html(dom_selector, options) {
+    try {
+      const target_element = document.querySelector(dom_selector);
+      if (target_element) {
+        preview(target_element.innerHTML, options);
+      } else {
+        throw new Error(`未找到DOM节点: ${dom_selector}`);
+      }
+    } catch (error) {
+      console.error("预览DOM元素失败:", error);
+      options?.on_error?.(error);
+    }
+  }
+  function preview_html_element(element_array, options) {
+    try {
+      if (!element_array || element_array.length === 0) {
+        throw new Error("元素数组为空");
+      }
+      let html_content = "";
+      for (const element of element_array) {
+        html_content += element.outerHTML;
+      }
+      if (!html_content) {
+        throw new Error("元素内容为空");
+      }
+      preview(html_content, options);
+    } catch (error) {
+      console.error("预览元素数组失败:", error);
+      options?.on_error?.(error);
+    }
   }
-  function s(t) {
-    let e = "";
-    for (let n = 0; n < t.length; n++)
-      e += t[n].outerHTML;
-    e && o(e);
+  function close_preview() {
+    clean_preview();
   }
   return {
-    printHtml: a,
-    printHtmlElement: s
+    print_html,
+    print_html_element,
+    preview_html,
+    preview_html_element,
+    close_preview
   };
 }
 export {
-  y as usePrintHtml
+  use_print
 };

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

@@ -0,0 +1,58 @@
+/**
+ * 打印选项
+ */
+export interface PrintOptions {
+    /** 自定义打印样式 */
+    custom_style?: string;
+    /** 打印完成后的回调 */
+    on_complete?: () => void;
+    /** 打印失败的回调 */
+    on_error?: (error: Error) => void;
+    /** 打印取消的回调 */
+    on_cancel?: () => void;
+    /** 页面大小 */
+    page_size?: 'A4' | 'A3' | 'Letter' | 'Legal' | string;
+    /** 页面方向 */
+    page_orientation?: 'portrait' | 'landscape';
+    /** 页面边距 */
+    margin?: string;
+    /** 是否打印背景色 */
+    print_background?: boolean;
+    /** 预览模式 */
+    preview?: boolean;
+    /** 预览容器选择器 */
+    preview_container?: string;
+}
+/**
+ * 打印钩子返回类型
+ */
+export interface UsePrintReturn {
+    /**
+     * 打印指定DOM选择器的内容
+     * @param dom_node DOM节点选择器
+     * @param options 打印选项
+     */
+    print_html: (dom_node: string, options?: PrintOptions) => void;
+    /**
+     * 打印多个DOM元素
+     * @param element_array DOM元素数组
+     * @param options 打印选项
+     */
+    print_html_element: (element_array: Element[], options?: PrintOptions) => void;
+    /**
+     * 预览指定DOM选择器的内容
+     * @param dom_node DOM节点选择器
+     * @param options 打印选项
+     */
+    preview_html: (dom_node: string, options?: PrintOptions) => void;
+    /**
+     * 预览多个DOM元素
+     * @param element_array DOM元素数组
+     * @param options 打印选项
+     */
+    preview_html_element: (element_array: Element[], options?: PrintOptions) => void;
+    /**
+     * 关闭预览
+     */
+    close_preview: () => void;
+}

package/lib/use-watermark/index.d.ts

@@ -0,0 +1,7 @@
+import { UseWaterMark } from './type';
+/**
+ * 水印功能钩子
+ * @returns 水印操作方法
+ * @description 适用于需要在前端添加水印的场景，支持创建、移除、更新水印
+ */
+export declare function use_water_mark(): UseWaterMark;

package/lib/use-watermark/index.js

@@ -0,0 +1,134 @@
+import { generate_guid } from "../packages/hooks/node_modules/@qy_better_lib/core/lib/utils/random.js";
+import { on, off, get_window_size, get_element } from "../packages/hooks/node_modules/@qy_better_lib/core/lib/utils/dom.js";
+import "../_virtual/dayjs.min.js";
+import "../packages/hooks/node_modules/@qy_better_lib/core/lib/directives/click_outside.js";
+function use_water_mark() {
+  const id = generate_guid();
+  let current_options = null;
+  let resize_handler = null;
+  function get_wrapper(wrapper) {
+    return wrapper ? get_element(wrapper) || document.body : document.body;
+  }
+  function create_watermark_canvas(options) {
+    const { text1, text2, font_size = 16, font_family = "Avenir,Helvetica,Arial,sans-serif", rotate = -15, text_color = "#999", opacity = 0.1, size = { width: 250, height: 150 } } = options;
+    try {
+      const canvas = document.createElement("canvas");
+      canvas.width = size.width;
+      canvas.height = size.height;
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        ctx.font = `${font_size}px ${font_family}`;
+        ctx.fillStyle = text_color.replace(/\,\s(1|(0\.\d+)\))/, `, ${opacity}`);
+        ctx.textAlign = "left";
+        ctx.textBaseline = "middle";
+        ctx.rotate(rotate * Math.PI / 180);
+        ctx.fillText(text1, 0, canvas.height / 2);
+        if (text2) {
+          const text1_width = ctx.measureText(text1).width;
+          ctx.fillText(text2, text1_width + 16, canvas.height / 2);
+        }
+      }
+      return canvas;
+    } catch (error) {
+      console.error("创建水印画布失败:", error);
+      const canvas = document.createElement("canvas");
+      canvas.width = 0;
+      canvas.height = 0;
+      return canvas;
+    }
+  }
+  function create_watermark_element(options) {
+    const {
+      wrapper,
+      z_index = 1e5,
+      position = "fixed",
+      spacing = 0,
+      size = { width: 250, height: 150 }
+    } = options;
+    const wrapper_element = get_wrapper(wrapper);
+    const existing_element = document.getElementById(id);
+    if (existing_element) {
+      try {
+        wrapper_element.removeChild(existing_element);
+      } catch (error) {
+        console.error("移除旧水印失败:", error);
+      }
+    }
+    const canvas = create_watermark_canvas(options);
+    const div = document.createElement("div");
+    div.id = id;
+    div.style.pointerEvents = "none";
+    div.style.top = "0px";
+    div.style.left = "0px";
+    div.style.position = position;
+    div.style.zIndex = z_index.toString();
+    const window_size = get_window_size();
+    div.style.width = window_size.width + "px";
+    div.style.height = window_size.height + "px";
+    div.style.background = `url(${canvas.toDataURL("image/png")}) left top repeat`;
+    if (spacing > 0) {
+      div.style.backgroundSize = `${size.width + spacing}px ${size.height + spacing}px`;
+    }
+    try {
+      wrapper_element.appendChild(div);
+    } catch (error) {
+      console.error("添加水印失败:", error);
+    }
+  }
+  function handle_resize() {
+    if (current_options) {
+      create_watermark_element(current_options);
+    }
+  }
+  function create_water_mark(options) {
+    current_options = options;
+    create_watermark_element(options);
+    if (options.responsive) {
+      if (!resize_handler) {
+        resize_handler = handle_resize;
+        on(window, "resize", resize_handler);
+      }
+    } else if (resize_handler) {
+      off(window, "resize", resize_handler);
+      resize_handler = null;
+    }
+  }
+  function remove_water_mark() {
+    const existing_element = document.getElementById(id);
+    if (existing_element) {
+      try {
+        const parent = existing_element.parentElement;
+        if (parent) {
+          parent.removeChild(existing_element);
+        }
+      } catch (error) {
+        console.error("移除水印失败:", error);
+      }
+    }
+    if (resize_handler) {
+      off(window, "resize", resize_handler);
+      resize_handler = null;
+    }
+    current_options = null;
+  }
+  function update_water_mark(options) {
+    if (current_options) {
+      const new_options = { ...current_options, ...options };
+      create_water_mark(new_options);
+    } else {
+      console.warn("水印未初始化，请先调用 create_water_mark");
+    }
+  }
+  function has_water_mark() {
+    return document.getElementById(id) !== null;
+  }
+  return {
+    create_water_mark,
+    remove_water_mark,
+    update_water_mark,
+    has_water_mark
+  };
+}
+export {
+  use_water_mark
+};

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

@@ -0,0 +1,55 @@
+/**
+ * 水印配置选项
+ */
+export interface WaterMarkOptions {
+    /** 水印容器选择器 */
+    wrapper?: string | null;
+    /** 主标题 */
+    text1: string;
+    /** 副标题 */
+    text2?: string;
+    /** 文字颜色 */
+    text_color?: string;
+    /** 文字大小 */
+    font_size?: number;
+    /** 文字字体 */
+    font_family?: string;
+    /** 旋转角度 */
+    rotate?: number;
+    /** 透明度 */
+    opacity?: number;
+    /** 水印间距 */
+    spacing?: number;
+    /** 水印大小 */
+    size?: {
+        width: number;
+        height: number;
+    };
+    /** 层级 */
+    z_index?: number;
+    /** 定位方式 */
+    position?: 'fixed' | 'absolute' | 'relative';
+    /** 是否响应式 */
+    responsive?: boolean;
+}
+/**
+ * 水印钩子返回类型
+ */
+export interface UseWaterMark {
+    /**
+     * 创建水印
+     */
+    create_water_mark: (options: WaterMarkOptions) => void;
+    /**
+     * 移除水印
+     */
+    remove_water_mark: () => void;
+    /**
+     * 更新水印
+     */
+    update_water_mark: (options: Partial<WaterMarkOptions>) => void;
+    /**
+     * 检查水印是否存在
+     */
+    has_water_mark: () => boolean;
+}

package/lib/use-websocket/index.d.ts

@@ -1,15 +1,8 @@
-export type WebSocketOption = {
-    /**服务端地址 */
-    server: string;
-    /**消息接收处理方法 */
-    receive: (res: any) => void;
-};
+import { WebSocketOptions, UseWebSocketReturn } from './type';
 /**
- * WebSocket
+ * WebSocket钩子
+ * @param options WebSocket配置选项
+ * @returns WebSocket操作方法和状态
+ * @description 适用于需要在前端实现WebSocket通信的场景，支持自动重连、心跳检测、消息队列等功能
  */
-export declare function useWebSocket(option: WebSocketOption): {
-    ws: undefined;
-    create: () => void;
-    socketClose: () => void;
-    sendMessage: (msg: any) => void;
-};
+export declare function use_web_socket(options: WebSocketOptions): UseWebSocketReturn;