@toolmain/components 1.1.0 → 1.2.0

package/dist/index.d.ts

@@ -1,9 +1,11 @@
+import type { Component } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import type * as CSS_2 from 'csstype';
 import { DefineComponent } from 'vue';
 import type { MaybeRef } from 'vue';
 import { PublicProps } from 'vue';
+import type { VNode } from 'vue';
 
 declare const __VLS_component: DefineComponent<__VLS_Props, {
 update: () => void;
@@ -62,13 +64,16 @@ declare type __VLS_WithSlots_2<T, S> = T & {
 
 export declare const Affix: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 
-declare type AnimateDir = "left" | "top" | "bottom" | "right" | "self" | "center" | {
+export declare type AnimateDir = "left" | "top" | "bottom" | "right" | "self" | "center" | {
     x?: number;
     y?: number;
 };
 
 declare type ArrMutKeys = "splice" | "push" | "pop" | "shift" | "unshift";
 
+/**
+ * CSS Properties
+ */
 declare interface CSSProperties extends CSS_2.Properties<string | number>, CSS_2.PropertiesHyphen<string | number> {
     [v: `--${string}`]: string | number | undefined;
 }
@@ -96,6 +101,37 @@ declare interface DragAttr {
     height: number | InitType;
 }
 
+/**
+ * 拖拽时transform计算的坐标
+ */
+export declare interface DragOffset {
+    /**
+     * pointer按下时的X坐标
+     */
+    prevClientX: number;
+    /**
+     * pointer按下时的Y坐标
+     */
+    prevClientY: number;
+    /**
+     * 上次移动之后的translateX
+     */
+    prevTranslateX: number;
+    /**
+     * 上次移动之后的translateY
+     */
+    prevTranslateY: number;
+    /**
+     * 正在移动时的translateX
+     */
+    translateX: number;
+    /**
+     * 正在移动时的translateY
+     */
+    translateY: number;
+    scale: FixedArray<number, 2>;
+}
+
 /**
  * 定长数组类型
  */
@@ -105,7 +141,7 @@ declare type FixedArray<T, L extends number> = Pick<T[], Exclude<keyof T[], ArrM
 
 declare type InitType = "auto" | "inherit" | "initial" | "unset";
 
-declare interface MoveHook {
+export declare interface MoveHook {
     x?: (oldVal: number, newVal: number, width: number, height: number) => number;
     y?: (oldVal: number, newVal: number, width: number, height: number) => number;
     scale?: (oldVal: FixedArray<number, 2>, newVal: FixedArray<number, 2>) => [FixedArray<number, 2>, FixedArray<number, 2>];
@@ -118,12 +154,14 @@ declare interface MoveOptions {
     direction?: Dir;
 }
 
-declare type MoveParams = DragAttr & {
+export declare type MoveParams = DragAttr & {
     translateX: number;
     translateY: number;
 };
 
-declare interface ScaleConfig {
+export declare const ParentView: DefineComponent<    {}, void, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+export declare interface ScaleConfig {
     /**
      * 组件可改变尺寸
      */
@@ -189,7 +227,12 @@ declare interface ScaleConfig {
     maskStyle?: CSSProperties;
 }
 
-declare interface ScaleInstance {
+export declare interface ScaleExtraConfNode {
+    label: string;
+    node: VNode | Component | string;
+}
+
+export declare interface ScaleInstance {
     /**
      * 智能移动到屏幕边界
      * @param animate - 是否有动画效果 default: true
@@ -226,7 +269,7 @@ declare interface ScaleInstance {
 
 export declare const ScalePanel: __VLS_WithSlots_2<typeof __VLS_component_2, __VLS_Slots_2>;
 
-declare interface ScaleProps {
+export declare interface ScaleProps {
     modelValue: ScaleConfig;
     /**
      * 按下目标元素并拖动组件，默认按下头部拖动。

package/dist/index.js

@@ -1,8 +1,9 @@
-(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode('*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}[top~="0"]{top:0}.hidden{display:none}.flex{display:flex}.flex-shrink{flex-shrink:1}.transform{transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.resize,[resize=""]{resize:both}.px,[px=""]{padding-left:1rem;padding-right:1rem}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.comp-affix .comp-affix-inner[data-v-4c40ccd8]{transition:box-shadow .3s;border-radius:1rem}.comp-affix .comp-affix-inner.fix[data-v-4c40ccd8]{position:fixed;box-shadow:var(--el-box-shadow);background-color:var(--el-card-bg-color)}.p-t[data-v-cb7f9cc6],.p-r[data-v-cb7f9cc6],.p-b[data-v-cb7f9cc6],.p-l[data-v-cb7f9cc6],.p-lt[data-v-cb7f9cc6],.p-rt[data-v-cb7f9cc6],.p-lb[data-v-cb7f9cc6],.p-rb[data-v-cb7f9cc6]{z-index:var(--61c40759);position:absolute}.p-b[data-v-cb7f9cc6],.p-t[data-v-cb7f9cc6],.p-r[data-v-cb7f9cc6],.p-l[data-v-cb7f9cc6]{background-color:transparent;border-radius:4px}.p-b[data-v-cb7f9cc6],.p-t[data-v-cb7f9cc6]{height:4px;left:4px;right:4px}.p-r[data-v-cb7f9cc6],.p-l[data-v-cb7f9cc6]{width:4px;top:4px;bottom:4px}.p-lt[data-v-cb7f9cc6],.p-rt[data-v-cb7f9cc6],.p-lb[data-v-cb7f9cc6],.p-rb[data-v-cb7f9cc6]{width:0;height:0}.p-b[data-v-cb7f9cc6]{bottom:0;cursor:ns-resize}.p-t[data-v-cb7f9cc6]{top:0;cursor:ns-resize}.p-r[data-v-cb7f9cc6]{right:0;cursor:ew-resize}.p-l[data-v-cb7f9cc6]{left:0;cursor:ew-resize}.p-lt[data-v-cb7f9cc6]{left:0;top:0;cursor:nwse-resize;border-top:.4rem solid transparent;border-left:.4rem solid transparent;border-right:.4rem solid transparent;border-bottom:.4rem solid transparent}.p-rt[data-v-cb7f9cc6]{right:0;top:0;cursor:nesw-resize;border-top:.4rem solid transparent;border-left:.4rem solid transparent;border-right:.4rem solid transparent;border-bottom:.4rem solid transparent}.p-lb[data-v-cb7f9cc6]{left:0;bottom:0;cursor:nesw-resize;border-top:.4rem solid transparent;border-left:.4rem solid transparent;border-right:.4rem solid transparent;border-bottom:.4rem solid transparent}.p-rb[data-v-cb7f9cc6]{right:0;bottom:0;cursor:nwse-resize;border-top:.4rem solid transparent;border-left:.4rem solid transparent;border-right:.4rem solid transparent;border-bottom:.4rem solid transparent}.dragContainer[data-v-d123b73c]{display:flex;flex-direction:column;transform-origin:0 0}.dragContainer>.dragHeader[data-v-d123b73c]{flex-shrink:0;display:flex}.dragContainer>.scaleContent[data-v-d123b73c]{flex:1;overflow:hidden;position:relative;display:flex}.dragMask[data-v-d123b73c]{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:100}')),document.head.appendChild(r)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
-import { defineComponent as be, useTemplateRef as te, shallowRef as ee, computed as $, reactive as Ae, onMounted as De, onBeforeUnmount as Me, createElementBlock as Q, openBlock as j, normalizeStyle as J, normalizeClass as pe, createElementVNode as Oe, renderSlot as we, useCssVars as ze, createCommentVNode as re, Fragment as Be, renderList as $e, withDirectives as Ve, vShow as We, unref as Pe, ref as Te, toValue as ye, watch as q, toRef as oe, createBlock as Ce, Teleport as Ue } from "vue";
-import { px as X, useEvent as ue, z as je, getStyleValue as Se, isBoolean as ke, isNumber as G, toNumber as w, useFlip as Ge, merge as Ke } from "@toolmain/shared";
-import { useElementBounding as le, useIntersectionObserver as _e, useThrottleFn as qe, useDebounceFn as Je } from "@vueuse/core";
-const ae = 2, Qe = /* @__PURE__ */ be({
+(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode('*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}[top~="0"]{top:0}.hidden{display:none}.flex{display:flex}.flex-shrink{flex-shrink:1}.transform{transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.resize,[resize=""]{resize:both}.px,[px=""]{padding-left:1rem;padding-right:1rem}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.comp-affix .comp-affix-inner[data-v-4c40ccd8]{transition:box-shadow .3s;border-radius:1rem}.comp-affix .comp-affix-inner.fix[data-v-4c40ccd8]{position:fixed;box-shadow:var(--el-box-shadow);background-color:var(--el-card-bg-color)}.p-t[data-v-2dbd22ac],.p-r[data-v-2dbd22ac],.p-b[data-v-2dbd22ac],.p-l[data-v-2dbd22ac],.p-lt[data-v-2dbd22ac],.p-rt[data-v-2dbd22ac],.p-lb[data-v-2dbd22ac],.p-rb[data-v-2dbd22ac]{z-index:var(--dc02cff8);position:absolute}.p-b[data-v-2dbd22ac],.p-t[data-v-2dbd22ac],.p-r[data-v-2dbd22ac],.p-l[data-v-2dbd22ac]{background-color:transparent;border-radius:4px}.p-b[data-v-2dbd22ac],.p-t[data-v-2dbd22ac]{height:4px;left:4px;right:4px}.p-r[data-v-2dbd22ac],.p-l[data-v-2dbd22ac]{width:4px;top:4px;bottom:4px}.p-lt[data-v-2dbd22ac],.p-rt[data-v-2dbd22ac],.p-lb[data-v-2dbd22ac],.p-rb[data-v-2dbd22ac]{width:0;height:0}.p-b[data-v-2dbd22ac]{bottom:0;cursor:ns-resize}.p-t[data-v-2dbd22ac]{top:0;cursor:ns-resize}.p-r[data-v-2dbd22ac]{right:0;cursor:ew-resize}.p-l[data-v-2dbd22ac]{left:0;cursor:ew-resize}.p-lt[data-v-2dbd22ac]{left:0;top:0;cursor:nwse-resize;border-top:.4rem solid transparent;border-left:.4rem solid transparent;border-right:.4rem solid transparent;border-bottom:.4rem solid transparent}.p-rt[data-v-2dbd22ac]{right:0;top:0;cursor:nesw-resize;border-top:.4rem solid transparent;border-left:.4rem solid transparent;border-right:.4rem solid transparent;border-bottom:.4rem solid transparent}.p-lb[data-v-2dbd22ac]{left:0;bottom:0;cursor:nesw-resize;border-top:.4rem solid transparent;border-left:.4rem solid transparent;border-right:.4rem solid transparent;border-bottom:.4rem solid transparent}.p-rb[data-v-2dbd22ac]{right:0;bottom:0;cursor:nwse-resize;border-top:.4rem solid transparent;border-left:.4rem solid transparent;border-right:.4rem solid transparent;border-bottom:.4rem solid transparent}.dragContainer[data-v-f5de5f52]{display:flex;flex-direction:column;transform-origin:0 0}.dragContainer>.dragHeader[data-v-f5de5f52]{flex-shrink:0;display:flex}.dragContainer>.scaleContent[data-v-f5de5f52]{flex:1;overflow:hidden;position:relative;display:flex}.dragMask[data-v-f5de5f52]{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:100}')),document.head.appendChild(r)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
+import { defineComponent as ce, useTemplateRef as te, shallowRef as ee, computed as $, reactive as Me, onMounted as Oe, onBeforeUnmount as Pe, createElementBlock as Q, openBlock as B, normalizeStyle as J, normalizeClass as ye, createElementVNode as He, renderSlot as xe, useCssVars as ze, createCommentVNode as re, Fragment as $e, renderList as Be, withDirectives as We, vShow as Ue, unref as Se, ref as Ee, toValue as be, watch as q, toRef as oe, createBlock as le, Teleport as je, withCtx as ke, createVNode as Ge, Transition as Ke, resolveDynamicComponent as qe } from "vue";
+import { px as _, useEvent as fe, z as Je, getStyleValue as _e, isBoolean as Re, isNumber as G, toNumber as w, useFlip as Qe, merge as Ze } from "@toolmain/shared";
+import { useElementBounding as ue, useIntersectionObserver as Le, useThrottleFn as et, useDebounceFn as tt } from "@vueuse/core";
+import { RouterView as nt } from "vue-router";
+const ae = 2, at = /* @__PURE__ */ ce({
   __name: "index",
   props: {
     position: { default: "top" },
@@ -10,7 +11,7 @@ const ae = 2, Qe = /* @__PURE__ */ be({
     offset: { default: 0 }
   },
   setup(e, { expose: l }) {
-    const c = te("affix"), s = te("affixInner"), h = ee(), d = ee(), { width: i, height: R } = le(h), T = $(() => !!d.value), y = ee({}), S = ee({}), a = Ae({
+    const c = te("affix"), r = te("affixInner"), h = ee(), d = ee(), { width: i, height: R } = ue(h), T = $(() => !!d.value), y = ee({}), S = ee({}), a = Me({
       disableTeleport: !0,
       target: {
         isIntersecting: !1,
@@ -29,7 +30,7 @@ const ae = 2, Qe = /* @__PURE__ */ be({
       // width: affixWidth,
       height: L,
       update: A
-    } = le(c), m = () => {
+    } = ue(c), m = () => {
       if (T.value) {
         if (a.target.isIntersecting && (!a.affix.isIntersecting || a.affix.intersectionRatio < 0.5))
           return !0;
@@ -52,79 +53,79 @@ const ae = 2, Qe = /* @__PURE__ */ be({
       ))
         a.affix.needFloat = !1;
       else if (m()) {
-        const C = n.value + L.value / 2 <= window.innerHeight / 2;
-        a.affix.needFloat = e.position === "top" ? C : !C;
+        const X = n.value + L.value / 2 <= window.innerHeight / 2;
+        a.affix.needFloat = e.position === "top" ? X : !X;
       }
       a.affix.needFloat ? (y.value = {
         zIndex: 100,
-        left: X(x.value),
-        [e.position === "bottom" ? "bottom" : "top"]: X(e.offset)
+        left: _(x.value),
+        [e.position === "bottom" ? "bottom" : "top"]: _(e.offset)
       }, S.value = {
-        minWidth: X(i.value),
-        height: X(R.value)
+        minWidth: _(i.value),
+        height: _(R.value)
       }) : (y.value = {}, S.value = {});
     };
-    function P(C, F) {
-      const { boundingClientRect: z, intersectionRect: V, rootBounds: Z } = C;
-      Z && C.isIntersecting && (F.length = 0, V.y - z.y > ae && F.push(
+    function P(X, N) {
+      const { boundingClientRect: V, intersectionRect: W, rootBounds: Z } = X;
+      Z && X.isIntersecting && (N.length = 0, W.y - V.y > ae && N.push(
         "top"
         /* Top */
-      ), z.y - V.y > ae && F.push(
+      ), V.y - W.y > ae && N.push(
         "bottom"
         /* Bottom */
-      ), V.x - z.x > ae && F.push(
+      ), W.x - V.x > ae && N.push(
         "left"
         /* Left */
-      ), z.x + z.width - (V.x + V.width) > ae && F.push(
+      ), V.x + V.width - (W.x + W.width) > ae && N.push(
         "right"
         /* Right */
       ));
     }
-    const N = ([C]) => {
-      a.affix.isIntersecting = C.isIntersecting, P(C, a.affix.directions), a.affix.intersectionRatio = C.intersectionRatio, g();
-    }, H = ([C]) => {
-      a.target.isIntersecting = C.isIntersecting, P(C, a.target.directions), a.target.intersectionRatio = C.intersectionRatio, g();
-    }, o = _e(c, N, {
+    const F = ([X]) => {
+      a.affix.isIntersecting = X.isIntersecting, P(X, a.affix.directions), a.affix.intersectionRatio = X.intersectionRatio, g();
+    }, H = ([X]) => {
+      a.target.isIntersecting = X.isIntersecting, P(X, a.target.directions), a.target.intersectionRatio = X.intersectionRatio, g();
+    }, s = Le(c, F, {
       root: window.document.documentElement,
       threshold: [0, 0.01, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 0.99, 1]
-    }), u = _e(d, H, {
+    }), u = Le(d, H, {
       root: window.document.documentElement,
       threshold: [0, 0.01, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 0.99, 1]
     });
     function I() {
-      h.value = s.value?.firstElementChild, e.target && (d.value = document.querySelector(e.target)), A();
+      h.value = r.value?.firstElementChild, e.target && (d.value = document.querySelector(e.target)), A();
     }
-    const D = qe(g, 250, !0);
-    return De(() => {
+    const D = et(g, 250, !0);
+    return Oe(() => {
       I(), window.addEventListener("resize", D);
-    }), Me(() => {
-      window.removeEventListener("resize", D), o.stop(), u.stop();
+    }), Pe(() => {
+      window.removeEventListener("resize", D), s.stop(), u.stop();
     }), l({
       update: () => {
         m() && g();
       }
-    }), (C, F) => (j(), Q("div", {
-      class: pe(["comp-affix", { fix: a.affix.needFloat }]),
+    }), (X, N) => (B(), Q("div", {
+      class: ye(["comp-affix", { fix: a.affix.needFloat }]),
       style: J(S.value),
       ref: "affix"
     }, [
-      Oe("div", {
+      He("div", {
         ref_key: "affixInner",
-        ref: s,
+        ref: r,
         style: J([y.value, S.value]),
-        class: pe(["comp-affix-inner", { fix: a.affix.needFloat }])
+        class: ye(["comp-affix-inner", { fix: a.affix.needFloat }])
       }, [
-        we(C.$slots, "default", {}, void 0, !0)
+        xe(X.$slots, "default", {}, void 0, !0)
       ], 6)
     ], 6));
   }
-}), Ee = (e, l) => {
+}), Ce = (e, l) => {
   const c = e.__vccOpts || e;
-  for (const [s, h] of l)
-    c[s] = h;
+  for (const [r, h] of l)
+    c[r] = h;
   return c;
-}, ft = /* @__PURE__ */ Ee(Qe, [["__scopeId", "data-v-4c40ccd8"]]);
-function Re() {
+}, pt = /* @__PURE__ */ Ce(at, [["__scopeId", "data-v-4c40ccd8"]]);
+function Ie() {
   return {
     x: 0,
     y: 0,
@@ -134,7 +135,7 @@ function Re() {
     height: 0
   };
 }
-function Le() {
+function Ae() {
   return {
     x: 0,
     y: 0,
@@ -146,11 +147,11 @@ function Le() {
     bottom: 0
   };
 }
-const Ze = () => {
-  let e, l = Le(), c = Re(), s = !1, h = !1;
-  const d = ue(), i = {
+const it = () => {
+  let e, l = Ae(), c = Ie(), r = !1, h = !1;
+  const d = fe(), i = {
     emit: (n, ...L) => {
-      s || d.emit(n, ...L);
+      r || d.emit(n, ...L);
     },
     setTargetAttr: (n) => {
       R(), T({
@@ -164,7 +165,7 @@ const Ze = () => {
     },
     onSelectStart: (n) => h ? (n.preventDefault(), !1) : !0,
     onDomPointerUp: (n) => {
-      if (!s) {
+      if (!r) {
         if (!e) {
           h = !1;
           return;
@@ -173,10 +174,10 @@ const Ze = () => {
       }
     },
     onDomPointerMove: (n) => {
-      s || h && (i.setTargetAttr(n), i.emit("moving", { ...c }));
+      r || h && (i.setTargetAttr(n), i.emit("moving", { ...c }));
     },
     onElePointerDown: (n) => {
-      s || (h = !0, i.setTargetAttr(n), i.emit("beforemove", { ...c }));
+      r || (h = !0, i.setTargetAttr(n), i.emit("beforemove", { ...c }));
     },
     clearEvent: () => {
       document.removeEventListener("selectstart", i.onSelectStart), e?.removeEventListener("pointerdown", i.onElePointerDown), document.removeEventListener("pointerup", i.onDomPointerUp), document.removeEventListener("pointermove", i.onDomPointerMove);
@@ -186,22 +187,22 @@ const Ze = () => {
     }
   };
   function R() {
-    l = e?.getBoundingClientRect() ?? Le();
+    l = e?.getBoundingClientRect() ?? Ae();
   }
   function T(n) {
     c = { ...n };
   }
   function y(n) {
-    i.clearEvent(), e = n, d.removeAllListeners(), T(Re()), R(), i.listenEvent();
+    i.clearEvent(), e = n, d.removeAllListeners(), T(Ie()), R(), i.listenEvent();
   }
   function S(n, L) {
     d.on(n, L);
   }
   function a() {
-    s = !0;
+    r = !0;
   }
   function x() {
-    s = !1;
+    r = !1;
   }
   return {
     ele: e,
@@ -215,25 +216,25 @@ const Ze = () => {
     enable: x
   };
 };
-function et() {
-  const e = ue();
+function rt() {
+  const e = fe();
   let l = !1;
   const c = {
     direction: "any"
-  }, s = Ze(), h = (m) => {
+  }, r = it(), h = (m) => {
     c.direction === "horizontal" ? (m.clientY = 0, m.y = 0) : c.direction === "vertical" && (m.clientX = 0, m.x = 0);
   };
   function d(m) {
-    l = !1, s.setTarget(m), s.on("beforemove", (g) => {
+    l = !1, r.setTarget(m), r.on("beforemove", (g) => {
       h(g), l = !1, R("beforemove", g);
-    }), s.on("moving", (g) => {
+    }), r.on("moving", (g) => {
       h(g), l = !0, R("moving", g);
-    }), s.on("aftermove", (g) => {
+    }), r.on("aftermove", (g) => {
       h(g), l = !1, R("aftermove", g);
     });
   }
   function i() {
-    return s.ele;
+    return r.ele;
   }
   function R(m, g) {
     e.emit(m, g);
@@ -254,10 +255,10 @@ function et() {
     m && Object.assign(c, m);
   }
   function n() {
-    s.enable();
+    r.enable();
   }
   function L() {
-    s.disable();
+    r.disable();
   }
   function A() {
     return l;
@@ -275,7 +276,7 @@ function et() {
     disable: L
   };
 }
-const tt = ["onMousedown"], nt = /* @__PURE__ */ be({
+const ot = ["onMousedown"], st = /* @__PURE__ */ ce({
   __name: "resize",
   props: {
     config: {},
@@ -284,23 +285,23 @@ const tt = ["onMousedown"], nt = /* @__PURE__ */ be({
     move: {}
   },
   setup(e) {
-    ze((s) => ({
-      "61c40759": c.value
+    ze((r) => ({
+      dc02cff8: c.value
     }));
-    const l = e, c = $(() => l.config.normal ? void 0 : je.ABSOLUTE);
-    return (s, h) => s.scale ? (j(!0), Q(Be, { key: 0 }, $e(s.scale.pointer, (d) => Ve((j(), Q("i", {
+    const l = e, c = $(() => l.config.normal ? void 0 : Je.ABSOLUTE);
+    return (r, h) => r.scale ? (B(!0), Q($e, { key: 0 }, Be(r.scale.pointer, (d) => We((B(), Q("i", {
       key: d,
-      class: pe([`p-${d}`]),
-      onMousedown: (i) => s.scale.onMouseDown(i, d)
-    }, null, 42, tt)), [
-      [We, s.config.scalable]
+      class: ye([`p-${d}`]),
+      onMousedown: (i) => r.scale.onMouseDown(i, d)
+    }, null, 42, ot)), [
+      [Ue, r.config.scalable]
     ])), 128)) : re("", !0);
   }
-}), at = /* @__PURE__ */ Ee(nt, [["__scopeId", "data-v-cb7f9cc6"]]), ie = (e) => {
+}), lt = /* @__PURE__ */ Ce(st, [["__scopeId", "data-v-2dbd22ac"]]), ie = (e) => {
   if (!e) return {};
   const l = {};
-  for (const [c, s] of Object.entries(e))
-    l[c] = Se(c, s);
+  for (const [c, r] of Object.entries(e))
+    l[c] = _e(c, r);
   return l;
 };
 function Xe(e) {
@@ -316,7 +317,7 @@ function Xe(e) {
       translateY: e.translateY
     };
   }
-  function s(a, x, n) {
+  function r(a, x, n) {
     e.translateX = n ? e.translateX + a : a, e.translateY = n ? e.translateY + x : x;
   }
   function h(a, x) {
@@ -349,7 +350,7 @@ function Xe(e) {
   return {
     setData: S,
     getTranslate: c,
-    setTranslate: s,
+    setTranslate: r,
     getScale: l,
     setScale: T,
     setNormal: y,
@@ -367,18 +368,18 @@ function Ye(e) {
     for (const [d, i] of Object.entries(h))
       l(d, i);
   }
-  function s(h) {
+  function r(h) {
     if (e.value)
       return e.value[h];
   }
   return {
-    get: s,
+    get: r,
     set: l,
     sets: c
   };
 }
-function it(e, l, c, s, h, d, i) {
-  const { setNormal: R, setTranslate: T, setPrevTranslate: y } = Xe(s), { get: S, set: a } = Ye(h), x = Te(ye(S("position"))), n = Je(
+function ut(e, l, c, r, h, d, i) {
+  const { setNormal: R, setTranslate: T, setPrevTranslate: y } = Xe(r), { get: S, set: a } = Ye(h), x = Ee(be(S("position"))), n = tt(
     async () => {
       e.value.autoStick && (typeof e.value.autoStick == "boolean" ? await c.value?.autoStick(!0) : await c.value?.stickTo(e.value.autoStick, !0));
     },
@@ -386,35 +387,35 @@ function it(e, l, c, s, h, d, i) {
     { maxWait: 1e3 }
   );
   function L() {
-    l.value && l.value.setTarget(ye(d) ?? i.value ?? null);
+    l.value && l.value.setTarget(be(d) ?? i.value ?? null);
   }
   function A() {
-    c.value?.setStatus(He.NORMAL), g(e.value.movable), N(e.value.moveConfig), H(e.value.x, e.value.y), P(e.value.normal), ke(e.value.visible) ? m(e.value.visible, !1) : c.value?.hideTo("self", !1);
+    c.value?.setStatus(Ne.NORMAL), g(e.value.movable), F(e.value.moveConfig), H(e.value.x, e.value.y), P(e.value.normal), Re(e.value.visible) ? m(e.value.visible, !1) : c.value?.hideTo("self", !1);
   }
-  function m(o, u) {
-    if (!ke(o)) return;
+  function m(s, u) {
+    if (!Re(s)) return;
     const I = G(e.value.x) || G(e.value.y);
-    o ? c.value?.show(u, I ? { x: e.value.x, y: e.value.y } : "self") : c.value?.hideTo(I ? { x: e.value.x, y: e.value.y } : "self", u);
+    s ? c.value?.show(u, I ? { x: e.value.x, y: e.value.y } : "self") : c.value?.hideTo(I ? { x: e.value.x, y: e.value.y } : "self", u);
   }
-  function g(o) {
-    o ? l.value?.enable() : l.value?.disable();
+  function g(s) {
+    s ? l.value?.enable() : l.value?.disable();
   }
-  function P(o) {
-    o ? (l.value?.setTarget(), x.value = S("position"), e.value.movable = !1, e.value.scalable = !1, R(), a("position", "static")) : (L(), a("position", x.value));
+  function P(s) {
+    s ? (l.value?.setTarget(), x.value = S("position"), e.value.movable = !1, e.value.scalable = !1, R(), a("position", "static")) : (L(), a("position", x.value));
   }
-  function N(o) {
-    o && l.value?.updateOption(o);
+  function F(s) {
+    s && l.value?.updateOption(s);
   }
-  function H(o, u) {
+  function H(s, u) {
     if (!l.value?.isMoving() && (G(e.value.x) || G(e.value.y))) {
-      const I = w(o), D = w(u);
+      const I = w(s), D = w(u);
       T(I, D), y(I, D);
     }
   }
-  return q(() => e.value.movable, g), q(() => e.value.normal, P), q(() => e.value.moveConfig, N, { deep: !0 }), q(
+  return q(() => e.value.movable, g), q(() => e.value.normal, P), q(() => e.value.moveConfig, F, { deep: !0 }), q(
     () => e.value.visible,
-    (o) => m(o, !0)
-  ), q([() => e.value.x, () => e.value.y], ([o, u]) => H(o, u)), q(d, () => {
+    (s) => m(s, !0)
+  ), q([() => e.value.x, () => e.value.y], ([s, u]) => H(s, u)), q(d, () => {
     e.value.normal || L();
   }), {
     autoStick: n,
@@ -423,15 +424,15 @@ function it(e, l, c, s, h, d, i) {
     onNormalChange: P
   };
 }
-function Ie(e, l) {
-  const c = Pe(e);
-  return c ? window.getComputedStyle(c).getPropertyValue(l) : Se(l, void 0);
+function De(e, l) {
+  const c = Se(e);
+  return c ? window.getComputedStyle(c).getPropertyValue(l) : _e(l, void 0);
 }
-var He = /* @__PURE__ */ ((e) => (e.NORMAL = "NORMAL", e.HIDDEN = "HIDDEN", e))(He || {}), se = /* @__PURE__ */ ((e) => (e.AFTER_SHOW = "after_show", e.AFTER_HIDE = "after_hide", e.AFTER_STICK = "after_stick", e))(se || {});
-const rt = (e) => {
-  const { getTranslate: l, setTranslate: c, setScale: s, setPrevTranslate: h, getScale: d } = Xe(e.dragOffset);
+var Ne = /* @__PURE__ */ ((e) => (e.NORMAL = "NORMAL", e.HIDDEN = "HIDDEN", e))(Ne || {}), se = /* @__PURE__ */ ((e) => (e.AFTER_SHOW = "after_show", e.AFTER_HIDE = "after_hide", e.AFTER_STICK = "after_stick", e))(se || {});
+const ct = (e) => {
+  const { getTranslate: l, setTranslate: c, setScale: r, setPrevTranslate: h, getScale: d } = Xe(e.dragOffset);
   let i = e.parent;
-  const R = Ge(), T = ue(), y = Te(
+  const R = Qe(), T = fe(), y = Ee(
     "NORMAL"
     /* NORMAL */
   ), S = {
@@ -444,74 +445,74 @@ const rt = (e) => {
     const { translateX: t, translateY: f } = l();
     a.transX.old = t, a.transX.final = t, a.transY.old = f, a.transY.final = f;
   }
-  const { x: A, y: m, width: g, left: P } = le(e.targetEle);
-  function N(t, f) {
-    const r = {
+  const { x: A, y: m, width: g, left: P } = ue(e.targetEle);
+  function F(t, f) {
+    const o = {
       width: window.innerWidth,
       height: window.innerHeight
     };
     if (!e.targetEle.value || t.position === "fixed")
-      return r;
+      return o;
     {
-      if (f) return r;
-      const Y = ne();
-      return r.width = Y.offsetWidth, r.height = Y.offsetHeight, r;
+      if (f) return o;
+      const C = ne();
+      return o.width = C.offsetWidth, o.height = C.offsetHeight, o;
     }
   }
-  function H(t, f, r, v, Y) {
+  function H(t, f, o, v, C) {
     return () => {
-      s(Y[0], Y[1]), c(t, f), h(t, f);
+      r(C[0], C[1]), c(t, f), h(t, f);
     };
   }
-  function o(t, f) {
-    const r = { x: 0, y: 0, w: 0, h: 0 };
-    if (!e.targetEle.value) return r;
-    const v = Ke(
+  function s(t, f) {
+    const o = { x: 0, y: 0, w: 0, h: 0 };
+    if (!e.targetEle.value) return o;
+    const v = Ze(
       {
-        x: (W, U, Fe, Ne) => U,
-        y: (W, U, Fe, Ne) => U,
-        scale: (W, U) => [W, U]
+        x: (U, j, Fe, Ve) => j,
+        y: (U, j, Fe, Ve) => j,
+        scale: (U, j) => [U, j]
       },
       f
-    ), Y = !!e.config.value.attachWindow, k = window.getComputedStyle(e.targetEle.value), B = N(k, Y);
+    ), C = !!e.config.value.attachWindow, Y = window.getComputedStyle(e.targetEle.value), z = F(Y, C);
     let M = 0, O = 0;
-    const p = w(k.width), b = w(k.height);
-    r.w = p, r.h = b;
-    const { translateX: E, translateY: _ } = l();
-    if (k.position === "fixed" ? (M = w(k.left), O = w(k.top)) : Y ? (M = w(A.value - E), O = w(m.value - _)) : (M = w(k.left), O = w(k.top)), typeof t == "string")
+    const p = w(Y.width), b = w(Y.height);
+    o.w = p, o.h = b;
+    const { translateX: E, translateY: k } = l();
+    if (Y.position === "fixed" ? (M = w(Y.left), O = w(Y.top)) : C ? (M = w(A.value - E), O = w(m.value - k)) : (M = w(Y.left), O = w(Y.top)), typeof t == "string")
       switch (t) {
         case "left": {
-          r.x = v.x(E, -w(M), p, b), r.y = v.y(_, _, p, b);
+          o.x = v.x(E, -w(M), p, b), o.y = v.y(k, k, p, b);
           break;
         }
         case "top": {
-          r.x = v.x(E, E, p, b), r.y = v.y(_, -w(O), p, b);
+          o.x = v.x(E, E, p, b), o.y = v.y(k, -w(O), p, b);
           break;
         }
         case "right": {
-          r.x = v.x(E, -w(M) + B.width - p, p, b), r.y = v.y(_, _, p, b);
+          o.x = v.x(E, -w(M) + z.width - p, p, b), o.y = v.y(k, k, p, b);
           break;
         }
         case "bottom": {
-          r.x = v.x(E, E, p, b), r.y = v.y(_, -w(O) + B.height - b, p, b);
+          o.x = v.x(E, E, p, b), o.y = v.y(k, -w(O) + z.height - b, p, b);
           break;
         }
         case "self": {
-          r.x = v.x(E, E, p, b), r.y = v.y(_, _, p, b);
+          o.x = v.x(E, E, p, b), o.y = v.y(k, k, p, b);
           break;
         }
         case "center":
         default:
-          r.x = v.x(E, -w(M) + B.width / 2 - p / 2, p, b), r.y = v.y(_, -w(O) + B.height / 2 - b / 2, p, b);
+          o.x = v.x(E, -w(M) + z.width / 2 - p / 2, p, b), o.y = v.y(k, -w(O) + z.height / 2 - b / 2, p, b);
       }
     else
-      G(t.x) ? r.x = v.x(E, -w(M) + (t.x ?? E), p, b) : r.x = v.x(E, E, p, b), G(t.y) ? r.y = v.y(_, -w(O) + (t.y ?? _), p, b) : r.y = v.y(_, _, p, b);
-    return r;
+      G(t.x) ? o.x = v.x(E, -w(M) + (t.x ?? E), p, b) : o.x = v.x(E, E, p, b), G(t.y) ? o.y = v.y(k, -w(O) + (t.y ?? k), p, b) : o.y = v.y(k, k, p, b);
+    return o;
   }
-  async function u(t, f, r, v) {
-    await new Promise((Y) => {
-      if (r(), !f) {
-        Y();
+  async function u(t, f, o, v) {
+    await new Promise((C) => {
+      if (o(), !f) {
+        C();
         return;
       }
       R.animate(
@@ -519,8 +520,8 @@ const rt = (e) => {
         v,
         { duration: S.stick, iterations: 1 },
         {
-          finish(k, B) {
-            Y();
+          finish(Y, z) {
+            C();
           }
         }
       );
@@ -529,179 +530,179 @@ const rt = (e) => {
   function I() {
     return w(P.value) + w(g.value) / 2 >= window.innerWidth / 2 ? "right" : "left";
   }
-  async function D(t = !0, f, r) {
+  async function D(t = !0, f, o) {
     if (!e.targetEle.value) return;
-    const { x: v, y: Y, w: k, h: B } = o(f, r), { scaleX: M, scaleY: O } = d(), p = {
+    const { x: v, y: C, w: Y, h: z } = s(f, o), { scaleX: M, scaleY: O } = d(), p = {
       old: [M, O],
       final: [M, O]
     };
-    if (r?.scale) {
-      const U = r.scale(p.old, p.final);
-      p.old = U[0], p.final = U[1];
+    if (o?.scale) {
+      const j = o.scale(p.old, p.final);
+      p.old = j[0], p.final = j[1];
     }
-    const b = H(v, Y, k, B, p.final), { translateX: E, translateY: _ } = l(), W = [
-      { scale: p.old, translate: [X(E), X(_)] },
-      { scale: p.final, translate: [X(v), X(Y)] }
+    const b = H(v, C, Y, z, p.final), { translateX: E, translateY: k } = l(), U = [
+      { scale: p.old, translate: [_(E), _(k)] },
+      { scale: p.final, translate: [_(v), _(C)] }
     ];
-    await u(e.targetEle.value, t, b, W);
+    await u(e.targetEle.value, t, b, U);
   }
-  async function C(t = !0, f) {
+  async function X(t = !0, f) {
     if (y.value !== "HIDDEN" || !e.targetEle.value) return;
-    const r = [0, 0], v = [1, 1], Y = [
-      { scale: v, translate: [X(a.transX.final), X(a.transY.final)] },
-      { scale: v, translate: [X(a.transX.old), X(a.transY.old)] }
-    ], k = () => {
-      s(v[0], v[1]), c(a.transX.old, a.transY.old), h(a.transX.old, a.transY.old);
+    const o = [0, 0], v = [1, 1], C = [
+      { scale: v, translate: [_(a.transX.final), _(a.transY.final)] },
+      { scale: v, translate: [_(a.transX.old), _(a.transY.old)] }
+    ], Y = () => {
+      r(v[0], v[1]), c(a.transX.old, a.transY.old), h(a.transX.old, a.transY.old);
     };
     f ? await D(t, f, {
-      scale(B, M) {
-        return f === "self" || f === "center" ? [r, v] : [v, v];
+      scale(z, M) {
+        return f === "self" || f === "center" ? [o, v] : [v, v];
       }
-    }) : await u(e.targetEle.value, t, k, Y), y.value = "NORMAL", T.emit(
+    }) : await u(e.targetEle.value, t, Y, C), y.value = "NORMAL", T.emit(
       "after_show"
       /* AFTER_SHOW */
     );
   }
-  async function F(t, f = !0) {
+  async function N(t, f = !0) {
     if (y.value !== "NORMAL" || !e.targetEle.value) return;
     for await (const b of x)
       await b();
     L();
-    const { x: r, y: v, w: Y, h: k } = o(t, {
-      x: (b, E, _, W) => {
+    const { x: o, y: v, w: C, h: Y } = s(t, {
+      x: (b, E, k, U) => {
         switch (t) {
           case "left":
-            return E -= w(_);
+            return E -= w(k);
           case "right":
-            return E += w(_);
+            return E += w(k);
         }
         return E;
       },
-      y: (b, E, _, W) => {
+      y: (b, E, k, U) => {
         switch (t) {
           case "top":
-            return E -= w(W);
+            return E -= w(U);
           case "bottom":
-            return E += w(W);
+            return E += w(U);
         }
         return E;
       }
-    }), { translateX: B, translateY: M } = l();
+    }), { translateX: z, translateY: M } = l();
     let O = [
-      { scale: [1, 1], translate: [X(B), X(M)] },
-      { scale: [1, 1], translate: [X(r), X(v)] }
+      { scale: [1, 1], translate: [_(z), _(M)] },
+      { scale: [1, 1], translate: [_(o), _(v)] }
     ];
     (t === "self" || t === "center") && (O = [
-      { scale: [1, 1], translate: [X(r), X(v)] },
-      { scale: [0, 0], translate: [X(r), X(v)] }
-    ]), a.transX.final = r, a.transY.final = v;
-    const p = H(r, v, Y, k, [0, 0]);
+      { scale: [1, 1], translate: [_(o), _(v)] },
+      { scale: [0, 0], translate: [_(o), _(v)] }
+    ]), a.transX.final = o, a.transY.final = v;
+    const p = H(o, v, C, Y, [0, 0]);
     await u(e.targetEle.value, f, p, O), y.value = "HIDDEN", T.emit(
       "after_hide"
       /* AFTER_HIDE */
     );
   }
-  async function z(t, f = !0) {
+  async function V(t, f = !0) {
     if (y.value === "NORMAL" && e.targetEle.value) {
-      for await (const r of n)
-        await r();
+      for await (const o of n)
+        await o();
       await D(f, t), T.emit(
         "after_stick"
         /* AFTER_STICK */
       );
     }
   }
-  async function V(t = !0) {
-    y.value === "NORMAL" && await F(I(), t);
+  async function W(t = !0) {
+    y.value === "NORMAL" && await N(I(), t);
   }
   async function Z(t = !0) {
-    y.value === "NORMAL" && await z(I(), t);
+    y.value === "NORMAL" && await V(I(), t);
   }
-  function ce(t) {
+  function ve(t) {
     y.value = t;
   }
   function K() {
     return y.value;
   }
-  function fe() {
+  function de() {
     return e.targetEle.value;
   }
-  function ve(t, f) {
+  function he(t, f) {
     T.on(t, f);
   }
-  function de(t) {
+  function ge(t) {
     x.push(t);
   }
-  function he(t) {
+  function me(t) {
     n.push(t);
   }
-  function ge(t) {
+  function pe(t) {
     t && (i = t);
   }
   function ne() {
     return i ?? e.targetEle.value?.parentElement ?? document.body;
   }
-  function me() {
+  function we() {
     T.removeAllListeners(), x.length = 0, n.length = 0;
   }
   return {
-    getTarget: fe,
-    setStatus: ce,
+    getTarget: de,
+    setStatus: ve,
     getStatus: K,
-    show: C,
-    autoHide: V,
+    show: X,
+    autoHide: W,
     autoStick: Z,
-    stickTo: z,
-    hideTo: F,
+    stickTo: V,
+    hideTo: N,
     moveTo: D,
-    dispose: me,
-    registerBeforeHideHook: de,
-    registerBeforeStickHook: he,
-    on: ve,
-    setTargetParent: ge,
+    dispose: we,
+    registerBeforeHideHook: ge,
+    registerBeforeStickHook: me,
+    on: he,
+    setTargetParent: pe,
     getTargetParent: ne
   };
 };
-var xe = /* @__PURE__ */ ((e) => (e.SCALING = "scaling", e.AFTER_SCALE = "after_scale", e))(xe || {});
-const ot = (e) => {
-  const l = oe(e.config.value, "containerStyle"), { set: c, sets: s } = Ye(l), h = ue(), d = ["t", "r", "b", "l", "lt", "rt", "lb", "rb"];
+var Te = /* @__PURE__ */ ((e) => (e.SCALING = "scaling", e.AFTER_SCALE = "after_scale", e))(Te || {});
+const ft = (e) => {
+  const l = oe(e.config.value, "containerStyle"), { set: c, sets: r } = Ye(l), h = fe(), d = ["t", "r", "b", "l", "lt", "rt", "lb", "rb"];
   let i = "";
-  const { x: R, y: T, width: y, height: S, update: a } = le(e.targetEle), x = {
-    t: (o, u) => {
-      o.clientY >= n.y + n.height || s({ top: u.t, height: u.h });
+  const { x: R, y: T, width: y, height: S, update: a } = ue(e.targetEle), x = {
+    t: (s, u) => {
+      s.clientY >= n.y + n.height || r({ top: u.t, height: u.h });
     },
-    r: (o, u) => {
+    r: (s, u) => {
       c("width", u.w);
     },
-    b: (o, u) => {
+    b: (s, u) => {
       c("height", u.h);
     },
-    l: (o, u) => {
-      o.clientX >= n.x + n.width || s({ left: u.l, width: u.w });
+    l: (s, u) => {
+      s.clientX >= n.x + n.width || r({ left: u.l, width: u.w });
     },
-    lt: (o, u) => {
-      o.clientX >= n.x + n.width || o.clientY >= n.y + n.height || s({ left: u.l, top: u.t, width: u.w, height: u.h });
+    lt: (s, u) => {
+      s.clientX >= n.x + n.width || s.clientY >= n.y + n.height || r({ left: u.l, top: u.t, width: u.w, height: u.h });
     },
-    rt: (o, u) => {
-      o.clientY >= n.y + n.height || s({ top: u.t, width: u.w, height: u.h });
+    rt: (s, u) => {
+      s.clientY >= n.y + n.height || r({ top: u.t, width: u.w, height: u.h });
     },
-    lb: (o, u) => {
-      o.clientX >= n.x + n.width || s({ left: u.l, width: u.w, height: u.h });
+    lb: (s, u) => {
+      s.clientX >= n.x + n.width || r({ left: u.l, width: u.w, height: u.h });
     },
-    rb: (o, u) => {
-      s({ width: u.w, height: u.h });
+    rb: (s, u) => {
+      r({ width: u.w, height: u.h });
     }
   }, n = { x: 0, y: 0, clientX: 0, clientY: 0, left: 0, top: 0, width: 0, height: 0 };
-  function L(o) {
-    o.preventDefault();
+  function L(s) {
+    s.preventDefault();
   }
-  function A(o) {
-    const u = n.top + o.clientY - n.clientY, I = n.left + o.clientX - n.clientX, D = i.startsWith("r") ? o.clientX - n.x : n.width + n.clientX - o.clientX, C = i.endsWith("t") ? n.height + n.clientY - o.clientY : o.clientY - n.y;
-    x[i](o, {
+  function A(s) {
+    const u = n.top + s.clientY - n.clientY, I = n.left + s.clientX - n.clientX, D = i.startsWith("r") ? s.clientX - n.x : n.width + n.clientX - s.clientX, X = i.endsWith("t") ? n.height + n.clientY - s.clientY : s.clientY - n.y;
+    x[i](s, {
       l: I,
       t: u,
       w: D,
-      h: C
+      h: X
     }), h.emit(
       "scaling"
       /* SCALING */
@@ -713,13 +714,13 @@ const ot = (e) => {
       /* AFTER_SCALE */
     );
   }
-  function g(o, u) {
-    document.addEventListener("selectstart", L), i = u, o.stopPropagation(), o.preventDefault(), a(), n.x = R.value, n.y = T.value, n.clientX = o.clientX, n.clientY = o.clientY, n.left = w(e.config.value.containerStyle?.left), n.top = w(e.config.value.containerStyle?.top) || w(e.targetEle.value?.offsetTop), n.width = y.value, n.height = S.value, document.addEventListener("mousemove", A), document.addEventListener("mouseup", m);
+  function g(s, u) {
+    document.addEventListener("selectstart", L), i = u, s.stopPropagation(), s.preventDefault(), a(), n.x = R.value, n.y = T.value, n.clientX = s.clientX, n.clientY = s.clientY, n.left = w(e.config.value.containerStyle?.left), n.top = w(e.config.value.containerStyle?.top) || w(e.targetEle.value?.offsetTop), n.width = y.value, n.height = S.value, document.addEventListener("mousemove", A), document.addEventListener("mouseup", m);
   }
-  function P(o, u) {
-    h.on(o, u);
+  function P(s, u) {
+    h.on(s, u);
   }
-  function N() {
+  function F() {
     h.removeAllListeners();
   }
   function H() {
@@ -730,9 +731,9 @@ const ot = (e) => {
     getTarget: H,
     onMouseDown: g,
     on: P,
-    dispose: N
+    dispose: F
   };
-}, st = /* @__PURE__ */ be({
+}, vt = /* @__PURE__ */ ce({
   __name: "index",
   props: {
     modelValue: {},
@@ -740,10 +741,10 @@ const ot = (e) => {
   },
   emits: ["beforeMove", "moving", "afterMove", "scaling", "afterScale", "maskClick", "update:modelValue"],
   setup(e, { expose: l, emit: c }) {
-    const s = c, h = e, d = Te(), i = $({
+    const r = c, h = e, d = Ee(), i = $({
       get: () => h.modelValue,
-      set: (t) => s("update:modelValue", t)
-    }), R = te("header"), T = te("scales"), y = te("drag"), S = ee(), a = oe(i.value, "containerStyle"), x = oe(i.value, "contentStyle"), n = oe(i.value, "headerStyle"), { get: L } = Ye(a), A = Ae({
+      set: (t) => r("update:modelValue", t)
+    }), R = te("header"), T = te("scales"), y = te("drag"), S = ee(), a = oe(i.value, "containerStyle"), x = oe(i.value, "contentStyle"), n = oe(i.value, "headerStyle"), { get: L } = Ye(a), A = Me({
       prevClientX: 0,
       prevClientY: 0,
       prevTranslateX: 0,
@@ -751,19 +752,19 @@ const ot = (e) => {
       translateX: 0,
       translateY: 0,
       scale: [0, 0]
-    }), { getScale: m, getTranslate: g, setTranslate: P, setPrevClientPos: N, getPrevClientPos: H, setPrevTranslate: o, getPrevTranslate: u } = Xe(A), I = ot({
+    }), { getScale: m, getTranslate: g, setTranslate: P, setPrevClientPos: F, getPrevClientPos: H, setPrevTranslate: s, getPrevTranslate: u } = Xe(A), I = ft({
       config: i,
       targetEle: y
-    }), D = $(() => ye(h.dragTarget)), C = $(() => !!i.value.header), F = $(() => ie(x.value)), z = $(() => ie(n.value)), V = $(() => ie(a.value)), Z = $(() => {
-      const { scaleX: t, scaleY: f } = m(), { translateX: r, translateY: v } = g(), Y = L("width") ?? Ie(y, "width"), k = L("height") ?? Ie(y, "height");
+    }), D = $(() => be(h.dragTarget)), X = $(() => !!i.value.header), N = $(() => ie(x.value)), V = $(() => ie(n.value)), W = $(() => ie(a.value)), Z = $(() => {
+      const { scaleX: t, scaleY: f } = m(), { translateX: o, translateY: v } = g(), C = L("width") ?? De(y, "width"), Y = L("height") ?? De(y, "height");
       return {
-        transform: `scale(${t},${f}) translate(${X(r)},${X(v)})`,
-        zIndex: i.value.normal ? void 0 : Se("zIndex", L("zIndex")),
+        transform: `scale(${t},${f}) translate(${_(o)},${_(v)})`,
+        zIndex: i.value.normal ? void 0 : _e("zIndex", L("zIndex")),
         // 计算其transform中心点，用于优化动画效果。元素移动时，其left和top并没有发生变化
-        transformOrigin: `${X(parseFloat((r + w(Y) / 2).toFixed(2)))}
-    ${X(parseFloat((v + w(k) / 2).toFixed(2)))}`
+        transformOrigin: `${_(parseFloat((o + w(C) / 2).toFixed(2)))}
+    ${_(parseFloat((v + w(Y) / 2).toFixed(2)))}`
       };
-    }), ce = $(() => ie(i.value.maskStyle)), { autoStick: K, onInit: fe, onMovableChange: ve, onNormalChange: de } = it(
+    }), ve = $(() => ie(i.value.maskStyle)), { autoStick: K, onInit: de, onMovableChange: he, onNormalChange: ge } = ut(
       i,
       S,
       d,
@@ -772,28 +773,28 @@ const ot = (e) => {
       D,
       R
     );
-    function he() {
-      S.value = et(), S.value.every("beforemove", (t) => {
-        N(t.clientX, t.clientY), s("beforeMove", Object.assign({}, t, g()));
+    function me() {
+      S.value = rt(), S.value.every("beforemove", (t) => {
+        F(t.clientX, t.clientY), r("beforeMove", Object.assign({}, t, g()));
       }), S.value.every("moving", (t) => {
-        const { clientX: f, clientY: r } = H(), { translateX: v, translateY: Y } = u();
-        P(v + t.clientX - f, Y + t.clientY - r);
-        const k = g();
-        (G(i.value.x) || G(i.value.y)) && (i.value.x = k.translateX, i.value.y = k.translateY), s("moving", { ...t, ...k });
+        const { clientX: f, clientY: o } = H(), { translateX: v, translateY: C } = u();
+        P(v + t.clientX - f, C + t.clientY - o);
+        const Y = g();
+        (G(i.value.x) || G(i.value.y)) && (i.value.x = Y.translateX, i.value.y = Y.translateY), r("moving", { ...t, ...Y });
       }), S.value.every("aftermove", async (t) => {
-        const { translateX: f, translateY: r } = g();
-        o(f, r), await K(), s("afterMove", { ...t, ...g() });
+        const { translateX: f, translateY: o } = g();
+        s(f, o), await K(), r("afterMove", { ...t, ...g() });
       });
     }
-    function ge() {
-      I.on(xe.AFTER_SCALE, async () => {
-        await K(), T.value && s("afterScale", T.value);
-      }), I.on(xe.SCALING, async () => {
-        T.value && s("scaling", T.value);
+    function pe() {
+      I.on(Te.AFTER_SCALE, async () => {
+        await K(), T.value && r("afterScale", T.value);
+      }), I.on(Te.SCALING, async () => {
+        T.value && r("scaling", T.value);
       });
     }
     function ne() {
-      d.value = rt({
+      d.value = ct({
         config: i,
         targetEle: y,
         dragOffset: A
@@ -806,10 +807,10 @@ const ot = (e) => {
         i.value.x = t, i.value.y = f;
       });
     }
-    async function me() {
-      ge(), he(), ne(), ve(i.value.movable), de(i.value.normal), fe(), window.addEventListener("resize", K);
+    async function we() {
+      pe(), me(), ne(), he(i.value.movable), ge(i.value.normal), de(), window.addEventListener("resize", K);
     }
-    return De(me), Me(() => {
+    return Oe(we), Pe(() => {
       window.removeEventListener("resize", K), I.dispose(), d.value?.dispose();
     }), l({
       async autoStick(t) {
@@ -827,53 +828,69 @@ const ot = (e) => {
       async show(t, f) {
         return d.value?.show(t, f);
       },
-      async moveTo(t, f, r) {
-        return d.value?.moveTo(t, f, r);
+      async moveTo(t, f, o) {
+        return d.value?.moveTo(t, f, o);
       },
       getStatus: function() {
         return d.value?.getStatus();
       }
-    }), (t, f) => (j(), Q("div", {
+    }), (t, f) => (B(), Q("div", {
       ref: "drag",
       class: "dragContainer",
-      style: J([V.value, Z.value])
+      style: J([W.value, Z.value])
     }, [
-      C.value ? (j(), Q("div", {
+      X.value ? (B(), Q("div", {
         key: 0,
         ref: "header",
         class: "dragHeader",
-        style: J(z.value)
+        style: J(V.value)
       }, [
-        we(t.$slots, "header", {}, void 0, !0)
+        xe(t.$slots, "header", {}, void 0, !0)
       ], 4)) : re("", !0),
-      i.value.scalable ? (j(), Ce(at, {
+      i.value.scalable ? (B(), le(lt, {
         key: 1,
         config: i.value,
-        scale: Pe(I),
+        scale: Se(I),
         move: S.value
       }, null, 8, ["config", "scale", "move"])) : re("", !0),
-      Oe("div", {
+      He("div", {
         ref: "scales",
         class: "scaleContent",
-        style: J(F.value)
+        style: J(N.value)
       }, [
-        we(t.$slots, "default", {}, void 0, !0)
+        xe(t.$slots, "default", {}, void 0, !0)
       ], 4),
-      (j(), Ce(Ue, {
+      (B(), le(je, {
         to: "body",
         disabled: !i.value.mask
       }, [
-        i.value.mask ? (j(), Q("div", {
+        i.value.mask ? (B(), Q("div", {
           key: 0,
           class: "dragMask",
-          style: J(ce.value),
-          onClick: f[0] || (f[0] = (r) => s("maskClick"))
+          style: J(ve.value),
+          onClick: f[0] || (f[0] = (o) => r("maskClick"))
         }, null, 4)) : re("", !0)
       ], 8, ["disabled"]))
     ], 4));
   }
-}), vt = /* @__PURE__ */ Ee(st, [["__scopeId", "data-v-d123b73c"]]);
+}), wt = /* @__PURE__ */ Ce(vt, [["__scopeId", "data-v-f5de5f52"]]), yt = /* @__PURE__ */ ce({
+  __name: "index",
+  setup(e) {
+    return (l, c) => (B(), le(Se(nt), null, {
+      default: ke(({ Component: r }) => [
+        Ge(Ke, { name: "slide" }, {
+          default: ke(() => [
+            (B(), le(qe(r)))
+          ]),
+          _: 2
+        }, 1024)
+      ]),
+      _: 1
+    }));
+  }
+});
 export {
-  ft as Affix,
-  vt as ScalePanel
+  pt as Affix,
+  yt as ParentView,
+  wt as ScalePanel
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolmain/components",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "",
   "license": "MIT",
   "type": "module",
@@ -25,12 +25,30 @@
     "dist/*.d.ts"
   ],
   "peerDependencies": {
+    "@types/three": "^0.179.0",
     "@vueuse/core": "^13.7.0",
+    "element-plus": "^2.10.7",
+    "pinia": "^3.0.3",
+    "three": "^0.179.1",
     "unocss": "^66.4.2",
-    "vue": "^3.5.0"
+    "vue": "^3.5.18",
+    "vue-router": "^4.5.1",
+    "@toolmain/libs": "^1.1.0"
   },
   "dependencies": {
-    "@toolmain/shared": "^1.1.0",
+    "dexie": "^4.2.0",
+    "three-mesh-bvh": "^0.9.1",
+    "@toolmain/shared": "^1.2.0"
+  },
+  "devDependencies": {
+    "@types/three": "^0.179.0",
+    "@vueuse/core": "^13.7.0",
+    "element-plus": "^2.10.7",
+    "pinia": "^3.0.3",
+    "three": "^0.179.1",
+    "unocss": "^66.4.2",
+    "vue": "^3.5.18",
+    "vue-router": "^4.5.1",
     "@toolmain/libs": "^1.1.0"
   },
   "scripts": {