添加页面大纲功能

src/utils/FileUploader.ts

@@ -0,0 +1,24 @@
+
+// Copyright (c) 2024-present AI-Labs
+
+/**
+ * 定义文件上传类
+ */
+export type Uploader = (file: File, uploadUrl?: string, headers?: Record<string, any>, formName?: string) => Promise<Record<string, any>>;
+
+/**
+ * 默认的Base64文件处理
+ * @param file 
+ * @param _uploadUrl 
+ * @param _headers 
+ * @param _formName 
+ * @returns 
+ */
+export const Base64Uploader: Uploader = (file: File, _uploadUrl?: string, _headers?: Record<string, any>, _formName?: string): Promise<Record<string, any>> => {
+    let reader = new FileReader;
+    return new Promise((accept, fail) => {
+        reader.onload = () => accept({ code: 200, data: { src: reader.result, href: file.name } });
+        reader.onerror = () => fail(reader.error);
+        setTimeout(() => reader.readAsDataURL(file), 1000);
+    })
+}

src/utils/Resize.ts

@@ -0,0 +1,102 @@
+// Copyright (c) 2024-present AI-Labs
+
+/**
+ * 调整对象大小
+ * @param container 
+ * @param root 
+ * @param updateAttrs 
+ */
+export const resize = (container: HTMLDivElement, root: HTMLElement, updateAttrs: (data: any) => void) => {
+
+    const objResize = container.querySelector(".resize-obj") as HTMLElement,
+        minWidth = 10;
+
+    let startX: number, startY: number, objWidth: number, startPosition: string;
+
+    const onMousedown = (e: any) => {
+        e.preventDefault();
+
+        root.addEventListener('mousemove', onMousemove);
+        root.addEventListener('mouseup', onMouseup);
+        root.addEventListener('mouseleave', onMouseup);
+
+        // 获取鼠标初始位置
+        startX = e.clientX;
+        startY = e.clientY;
+
+        objWidth = Number(objResize.getAttribute("data-with")) || objResize.clientWidth;
+        startPosition = e.target.getAttribute("data-position");
+    };
+
+    const onMousemove = (event: MouseEvent) => {
+        // 获取鼠标最新位置的变化
+        const distanceX = event.clientX - startX;
+        const distanceY = event.clientY - startY;
+        if (distanceX == 0 && distanceY == 0) {
+            return;
+        }
+
+        // 判断是做缩小还是做放大
+        var zoomIn = false;
+        var zoomSize = 0;
+        if (startPosition === "1") {
+            zoomIn = distanceX > 0 && distanceY > 0 ? false : true;
+            zoomSize = Math.max(Math.abs(distanceX), Math.abs(distanceY));
+        }
+        if (startPosition === "2") {
+            zoomIn = distanceY > 0 ? false : true;
+            zoomSize = Math.abs(distanceY);
+        }
+        if (startPosition === "3") {
+            zoomIn = distanceX < 0 && distanceY > 0 ? false : true;
+            zoomSize = Math.max(Math.abs(distanceX), Math.abs(distanceY));
+        }
+        if (startPosition === "4") {
+            zoomIn = distanceX > 0 ? false : true;
+            zoomSize = Math.abs(distanceX);
+        }
+        if (startPosition === "5") {
+            zoomIn = distanceX < 0 ? false : true;
+            zoomSize = Math.abs(distanceX);
+        }
+        if (startPosition === "6") {
+            zoomIn = distanceX > 0 && distanceY < 0 ? false : true;
+            zoomSize = Math.max(Math.abs(distanceX), Math.abs(distanceY));
+        }
+        if (startPosition === "7") {
+            zoomIn = distanceY < 0 ? false : true;
+            zoomSize = Math.abs(distanceY);
+        }
+        if (startPosition === "8") {
+            zoomIn = distanceX < 0 && distanceY < 0 ? false : true;
+            zoomSize = Math.max(Math.abs(distanceX), Math.abs(distanceY));
+        }
+        let newWidth = objWidth + zoomSize * (zoomIn ? 1 : -1);
+
+        if (newWidth >= root.clientWidth) {
+            newWidth = root.clientWidth;
+        }
+        if (newWidth < minWidth) {
+            newWidth = minWidth;
+        }
+
+        //及时修改节点宽度，拖动结束后再通知渲染视图
+        objResize.style.width = `${newWidth}px`;
+        objResize.setAttribute("data-width", newWidth.toString());
+
+        objResize.parentElement!.removeAttribute("style");
+    }
+
+    const onMouseup = () => {
+        root.removeEventListener('mousemove', onMousemove);
+        root.removeEventListener('mouseup', onMouseup);
+        root.removeEventListener('mouseleave', onMouseup);
+
+        const attrs = { width: `${objResize.getAttribute("data-width")}px` };
+        updateAttrs(attrs)
+    };
+
+    for (let child of container.querySelector(".uai-resize")!.children) {
+        child.addEventListener("mousedown", onMousedown)
+    }
+}

src/utils/UUID.ts

@@ -0,0 +1,11 @@
+// Copyright (c) 2024-present AI-Labs
+
+/**
+ * 生成UUID
+ * @returns 
+ */
+export const uuid = () => {
+    return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, (c: any) =>
+        (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+    );
+}