@toolmain/components 1.1.1 → 1.2.0

package/dist/index.d.ts

@@ -0,0 +1,285 @@
+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;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_component_2: DefineComponent<ScaleProps, ScaleInstance, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+moving: (pos: MoveParams) => any;
+scaling: (scaleEl: HTMLElement) => any;
+beforeMove: (pos: MoveParams) => any;
+afterMove: (pos: MoveParams) => any;
+afterScale: (scaleEl: HTMLElement) => any;
+maskClick: () => any;
+"update:modelValue": (data: ScaleConfig) => any;
+}, string, PublicProps, Readonly<ScaleProps> & Readonly<{
+onMoving?: ((pos: MoveParams) => any) | undefined;
+onScaling?: ((scaleEl: HTMLElement) => any) | undefined;
+onBeforeMove?: ((pos: MoveParams) => any) | undefined;
+onAfterMove?: ((pos: MoveParams) => any) | undefined;
+onAfterScale?: ((scaleEl: HTMLElement) => any) | undefined;
+onMaskClick?: (() => any) | undefined;
+"onUpdate:modelValue"?: ((data: ScaleConfig) => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare type __VLS_Props = {
+    /**
+     * 选择top时,如果元素滚动到[底部]消失或即将消失，会回到原位置
+     *
+     * 选择bottom时则是滚动到[顶部]时触发
+     */
+    position?: "top" | "bottom";
+    target?: string;
+    offset?: number;
+};
+
+declare type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+
+declare type __VLS_Slots_2 = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+
+declare type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithSlots_2<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+export declare const Affix: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+
+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;
+}
+
+declare type Dir = "horizontal" | "vertical" | "any";
+
+declare interface DragAttr {
+    /**
+     * 元素x轴坐标
+     */
+    x: number;
+    /**
+     * 元素y轴坐标
+     */
+    y: number;
+    /**
+     * 指针x坐标
+     */
+    clientX: number;
+    /**
+     * 指针y坐标
+     */
+    clientY: number;
+    width: number | InitType;
+    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>;
+}
+
+/**
+ * 定长数组类型
+ */
+declare type FixedArray<T, L extends number> = Pick<T[], Exclude<keyof T[], ArrMutKeys>> & {
+    readonly length: L;
+};
+
+declare type InitType = "auto" | "inherit" | "initial" | "unset";
+
+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>];
+}
+
+declare interface MoveOptions {
+    /**
+     * 移动方向
+     */
+    direction?: Dir;
+}
+
+export declare type MoveParams = DragAttr & {
+    translateX: number;
+    translateY: number;
+};
+
+export declare const ParentView: DefineComponent<    {}, void, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+export declare interface ScaleConfig {
+    /**
+     * 组件可改变尺寸
+     */
+    scalable?: boolean;
+    /**
+     * 组件可移动
+     */
+    movable?: boolean;
+    /**
+     * 变成正常元素
+     */
+    normal?: boolean;
+    /**
+     * 拖动后自动靠边
+     */
+    autoStick?: boolean | AnimateDir;
+    /**
+     * 是否显示
+     */
+    visible?: boolean;
+    /**
+     * 初始移动位置 `translateX`
+     */
+    x?: number;
+    /**
+     * 初始移动位置 `translateY`
+     */
+    y?: number;
+    /**
+     * 是否拥有头部
+     */
+    header?: boolean;
+    /**
+     * 当组件`position`不为`fixed`时
+     * 是否相对于window定位,否则相对于父元素定位
+     *
+     * @default false
+     */
+    attachWindow?: boolean;
+    /**
+     * 移动功能的配置项
+     */
+    moveConfig?: MoveOptions;
+    /**
+     * 外壳样式
+     */
+    containerStyle?: CSSProperties;
+    /**
+     * 内容样式，初始宽高应该在这里设置
+     */
+    contentStyle?: CSSProperties;
+    /**
+     * 头部样式
+     */
+    headerStyle?: CSSProperties;
+    /**
+     * 是否显示遮罩层
+     */
+    mask?: boolean;
+    /**
+     * 遮罩层样式
+     */
+    maskStyle?: CSSProperties;
+}
+
+export declare interface ScaleExtraConfNode {
+    label: string;
+    node: VNode | Component | string;
+}
+
+export declare interface ScaleInstance {
+    /**
+     * 智能移动到屏幕边界
+     * @param animate - 是否有动画效果 default: true
+     */
+    autoStick: (animate: boolean) => Promise<void>;
+    /**
+     * 自动隐藏
+     * @param animate - 是否有动画效果 default: true
+     */
+    autoHide: (animate: boolean) => Promise<void>;
+    /**
+     * 移动到屏幕边界
+     * @param animate - 是否有动画效果 default: true
+     */
+    stickTo: (dir: AnimateDir, animate: boolean) => Promise<void>;
+    /**
+     * 移动到屏幕 `dir`位置并隐藏
+     * @param animate - 是否有动画效果 default: true
+     */
+    hideTo: (dir: AnimateDir, animate: boolean) => Promise<void>;
+    /**
+     * 显示组件
+     */
+    show: (animate: boolean, dir?: AnimateDir) => Promise<void>;
+    /**
+     * 当组件`position:fixed`或者`attachWindow:true`时坐标相对于屏幕左上角;否则相对于父元素
+     */
+    moveTo: (animate: boolean, dir: AnimateDir, hooks?: MoveHook) => Promise<void>;
+    /**
+     * 获取当前状态
+     */
+    getStatus: () => Status | undefined;
+}
+
+export declare const ScalePanel: __VLS_WithSlots_2<typeof __VLS_component_2, __VLS_Slots_2>;
+
+export declare interface ScaleProps {
+    modelValue: ScaleConfig;
+    /**
+     * 按下目标元素并拖动组件，默认按下头部拖动。
+     */
+    dragTarget?: MaybeRef<HTMLElement | null | undefined>;
+}
+
+declare enum Status {
+    NORMAL = "NORMAL",
+    HIDDEN = "HIDDEN"
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,896 @@
+(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" },
+    target: { default: "" },
+    offset: { default: 0 }
+  },
+  setup(e, { expose: l }) {
+    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,
+        intersectionRatio: 0,
+        directions: []
+      },
+      affix: {
+        isIntersecting: !1,
+        intersectionRatio: 0,
+        needFloat: !1,
+        directions: []
+      }
+    }), {
+      x,
+      y: n,
+      // width: affixWidth,
+      height: L,
+      update: A
+    } = ue(c), m = () => {
+      if (T.value) {
+        if (a.target.isIntersecting && (!a.affix.isIntersecting || a.affix.intersectionRatio < 0.5))
+          return !0;
+      } else if (!a.affix.isIntersecting || a.affix.intersectionRatio < 0.5)
+        return !0;
+      return !1;
+    }, g = () => {
+      if (A(), a.affix.needFloat = !1, a.affix.directions.includes(
+        "left"
+        /* Left */
+      ) || a.affix.directions.includes(
+        "right"
+        /* Right */
+      ) || a.target.directions.includes(
+        "left"
+        /* Left */
+      ) || a.target.directions.includes(
+        "right"
+        /* Right */
+      ))
+        a.affix.needFloat = !1;
+      else if (m()) {
+        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.value),
+        [e.position === "bottom" ? "bottom" : "top"]: _(e.offset)
+      }, S.value = {
+        minWidth: _(i.value),
+        height: _(R.value)
+      }) : (y.value = {}, S.value = {});
+    };
+    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 */
+      ), V.y - W.y > ae && N.push(
+        "bottom"
+        /* Bottom */
+      ), W.x - V.x > ae && N.push(
+        "left"
+        /* Left */
+      ), V.x + V.width - (W.x + W.width) > ae && N.push(
+        "right"
+        /* Right */
+      ));
+    }
+    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 = 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 = r.value?.firstElementChild, e.target && (d.value = document.querySelector(e.target)), A();
+    }
+    const D = et(g, 250, !0);
+    return Oe(() => {
+      I(), window.addEventListener("resize", D);
+    }), Pe(() => {
+      window.removeEventListener("resize", D), s.stop(), u.stop();
+    }), l({
+      update: () => {
+        m() && g();
+      }
+    }), (X, N) => (B(), Q("div", {
+      class: ye(["comp-affix", { fix: a.affix.needFloat }]),
+      style: J(S.value),
+      ref: "affix"
+    }, [
+      He("div", {
+        ref_key: "affixInner",
+        ref: r,
+        style: J([y.value, S.value]),
+        class: ye(["comp-affix-inner", { fix: a.affix.needFloat }])
+      }, [
+        xe(X.$slots, "default", {}, void 0, !0)
+      ], 6)
+    ], 6));
+  }
+}), Ce = (e, l) => {
+  const c = e.__vccOpts || e;
+  for (const [r, h] of l)
+    c[r] = h;
+  return c;
+}, pt = /* @__PURE__ */ Ce(at, [["__scopeId", "data-v-4c40ccd8"]]);
+function Ie() {
+  return {
+    x: 0,
+    y: 0,
+    clientX: 0,
+    clientY: 0,
+    width: 0,
+    height: 0
+  };
+}
+function Ae() {
+  return {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0
+  };
+}
+const it = () => {
+  let e, l = Ae(), c = Ie(), r = !1, h = !1;
+  const d = fe(), i = {
+    emit: (n, ...L) => {
+      r || d.emit(n, ...L);
+    },
+    setTargetAttr: (n) => {
+      R(), T({
+        x: l.x,
+        y: l.y,
+        clientX: n.clientX,
+        clientY: n.clientY,
+        width: l.width,
+        height: l.height
+      });
+    },
+    onSelectStart: (n) => h ? (n.preventDefault(), !1) : !0,
+    onDomPointerUp: (n) => {
+      if (!r) {
+        if (!e) {
+          h = !1;
+          return;
+        }
+        h && i.emit("aftermove", { ...c }), h = !1;
+      }
+    },
+    onDomPointerMove: (n) => {
+      r || h && (i.setTargetAttr(n), i.emit("moving", { ...c }));
+    },
+    onElePointerDown: (n) => {
+      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);
+    },
+    listenEvent: () => {
+      e && (document.addEventListener("selectstart", i.onSelectStart), e.addEventListener("pointerdown", i.onElePointerDown), document.addEventListener("pointerup", i.onDomPointerUp), document.addEventListener("pointermove", i.onDomPointerMove));
+    }
+  };
+  function R() {
+    l = e?.getBoundingClientRect() ?? Ae();
+  }
+  function T(n) {
+    c = { ...n };
+  }
+  function y(n) {
+    i.clearEvent(), e = n, d.removeAllListeners(), T(Ie()), R(), i.listenEvent();
+  }
+  function S(n, L) {
+    d.on(n, L);
+  }
+  function a() {
+    r = !0;
+  }
+  function x() {
+    r = !1;
+  }
+  return {
+    ele: e,
+    rect: l,
+    attr: c,
+    updateRect: R,
+    setAttr: T,
+    setTarget: y,
+    on: S,
+    disable: a,
+    enable: x
+  };
+};
+function rt() {
+  const e = fe();
+  let l = !1;
+  const c = {
+    direction: "any"
+  }, 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, r.setTarget(m), r.on("beforemove", (g) => {
+      h(g), l = !1, R("beforemove", g);
+    }), r.on("moving", (g) => {
+      h(g), l = !0, R("moving", g);
+    }), r.on("aftermove", (g) => {
+      h(g), l = !1, R("aftermove", g);
+    });
+  }
+  function i() {
+    return r.ele;
+  }
+  function R(m, g) {
+    e.emit(m, g);
+  }
+  function T(m) {
+    c.direction = m;
+  }
+  function y(m, g) {
+    e.on(m, g);
+  }
+  function S(m, g) {
+    e.once(m, g);
+  }
+  function a(m, g) {
+    e.removeAllListeners(m), e.on(m, g);
+  }
+  function x(m) {
+    m && Object.assign(c, m);
+  }
+  function n() {
+    r.enable();
+  }
+  function L() {
+    r.disable();
+  }
+  function A() {
+    return l;
+  }
+  return {
+    every: a,
+    setTarget: d,
+    getTarget: i,
+    setDirection: T,
+    isMoving: A,
+    on: y,
+    once: S,
+    updateOption: x,
+    enable: n,
+    disable: L
+  };
+}
+const ot = ["onMousedown"], st = /* @__PURE__ */ ce({
+  __name: "resize",
+  props: {
+    config: {},
+    scale: {},
+    handle: {},
+    move: {}
+  },
+  setup(e) {
+    ze((r) => ({
+      dc02cff8: c.value
+    }));
+    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: ye([`p-${d}`]),
+      onMousedown: (i) => r.scale.onMouseDown(i, d)
+    }, null, 42, ot)), [
+      [Ue, r.config.scalable]
+    ])), 128)) : re("", !0);
+  }
+}), lt = /* @__PURE__ */ Ce(st, [["__scopeId", "data-v-2dbd22ac"]]), ie = (e) => {
+  if (!e) return {};
+  const l = {};
+  for (const [c, r] of Object.entries(e))
+    l[c] = _e(c, r);
+  return l;
+};
+function Xe(e) {
+  function l() {
+    return {
+      scaleX: e.scale[0],
+      scaleY: e.scale[1]
+    };
+  }
+  function c() {
+    return {
+      translateX: e.translateX,
+      translateY: e.translateY
+    };
+  }
+  function r(a, x, n) {
+    e.translateX = n ? e.translateX + a : a, e.translateY = n ? e.translateY + x : x;
+  }
+  function h(a, x) {
+    e.prevClientX = a, e.prevClientY = x;
+  }
+  function d(a, x) {
+    e.prevTranslateX = a, e.prevTranslateY = x;
+  }
+  function i() {
+    return {
+      clientX: e.prevClientX,
+      clientY: e.prevClientY
+    };
+  }
+  function R() {
+    return {
+      translateX: e.prevTranslateX,
+      translateY: e.prevTranslateY
+    };
+  }
+  function T(a, x) {
+    e.scale = [a, x];
+  }
+  function y() {
+    e.scale = [1, 1], e.prevClientX = 0, e.prevTranslateX = 0, e.prevClientY = 0, e.prevTranslateY = 0, e.translateX = 0, e.translateY = 0;
+  }
+  function S(a) {
+    Object.assign(e, a);
+  }
+  return {
+    setData: S,
+    getTranslate: c,
+    setTranslate: r,
+    getScale: l,
+    setScale: T,
+    setNormal: y,
+    setPrevClientPos: h,
+    getPrevClientPos: i,
+    getPrevTranslate: R,
+    setPrevTranslate: d
+  };
+}
+function Ye(e) {
+  function l(h, d) {
+    e.value && (e.value[h] = d);
+  }
+  function c(h) {
+    for (const [d, i] of Object.entries(h))
+      l(d, i);
+  }
+  function r(h) {
+    if (e.value)
+      return e.value[h];
+  }
+  return {
+    get: r,
+    set: l,
+    sets: c
+  };
+}
+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));
+    },
+    200,
+    { maxWait: 1e3 }
+  );
+  function L() {
+    l.value && l.value.setTarget(be(d) ?? i.value ?? null);
+  }
+  function A() {
+    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(s, u) {
+    if (!Re(s)) return;
+    const I = G(e.value.x) || G(e.value.y);
+    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(s) {
+    s ? l.value?.enable() : l.value?.disable();
+  }
+  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 F(s) {
+    s && l.value?.updateOption(s);
+  }
+  function H(s, u) {
+    if (!l.value?.isMoving() && (G(e.value.x) || G(e.value.y))) {
+      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, F, { deep: !0 }), q(
+    () => e.value.visible,
+    (s) => m(s, !0)
+  ), q([() => e.value.x, () => e.value.y], ([s, u]) => H(s, u)), q(d, () => {
+    e.value.normal || L();
+  }), {
+    autoStick: n,
+    onInit: A,
+    onMovableChange: g,
+    onNormalChange: P
+  };
+}
+function De(e, l) {
+  const c = Se(e);
+  return c ? window.getComputedStyle(c).getPropertyValue(l) : _e(l, void 0);
+}
+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 = Qe(), T = fe(), y = Ee(
+    "NORMAL"
+    /* NORMAL */
+  ), S = {
+    stick: 160
+  }, a = {
+    transX: { old: 0, final: 0 },
+    transY: { old: 0, final: 0 }
+  }, x = [], n = [];
+  function L() {
+    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 } = ue(e.targetEle);
+  function F(t, f) {
+    const o = {
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+    if (!e.targetEle.value || t.position === "fixed")
+      return o;
+    {
+      if (f) return o;
+      const C = ne();
+      return o.width = C.offsetWidth, o.height = C.offsetHeight, o;
+    }
+  }
+  function H(t, f, o, v, C) {
+    return () => {
+      r(C[0], C[1]), c(t, f), h(t, f);
+    };
+  }
+  function s(t, f) {
+    const o = { x: 0, y: 0, w: 0, h: 0 };
+    if (!e.targetEle.value) return o;
+    const v = Ze(
+      {
+        x: (U, j, Fe, Ve) => j,
+        y: (U, j, Fe, Ve) => j,
+        scale: (U, j) => [U, j]
+      },
+      f
+    ), C = !!e.config.value.attachWindow, Y = window.getComputedStyle(e.targetEle.value), z = F(Y, C);
+    let M = 0, O = 0;
+    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": {
+          o.x = v.x(E, -w(M), p, b), o.y = v.y(k, k, p, b);
+          break;
+        }
+        case "top": {
+          o.x = v.x(E, E, p, b), o.y = v.y(k, -w(O), p, b);
+          break;
+        }
+        case "right": {
+          o.x = v.x(E, -w(M) + z.width - p, p, b), o.y = v.y(k, k, p, b);
+          break;
+        }
+        case "bottom": {
+          o.x = v.x(E, E, p, b), o.y = v.y(k, -w(O) + z.height - b, p, b);
+          break;
+        }
+        case "self": {
+          o.x = v.x(E, E, p, b), o.y = v.y(k, k, p, b);
+          break;
+        }
+        case "center":
+        default:
+          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) ? 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, o, v) {
+    await new Promise((C) => {
+      if (o(), !f) {
+        C();
+        return;
+      }
+      R.animate(
+        t,
+        v,
+        { duration: S.stick, iterations: 1 },
+        {
+          finish(Y, z) {
+            C();
+          }
+        }
+      );
+    });
+  }
+  function I() {
+    return w(P.value) + w(g.value) / 2 >= window.innerWidth / 2 ? "right" : "left";
+  }
+  async function D(t = !0, f, o) {
+    if (!e.targetEle.value) return;
+    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 (o?.scale) {
+      const j = o.scale(p.old, p.final);
+      p.old = j[0], p.final = j[1];
+    }
+    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, U);
+  }
+  async function X(t = !0, f) {
+    if (y.value !== "HIDDEN" || !e.targetEle.value) return;
+    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(z, M) {
+        return f === "self" || f === "center" ? [o, v] : [v, v];
+      }
+    }) : await u(e.targetEle.value, t, Y, C), y.value = "NORMAL", T.emit(
+      "after_show"
+      /* AFTER_SHOW */
+    );
+  }
+  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: o, y: v, w: C, h: Y } = s(t, {
+      x: (b, E, k, U) => {
+        switch (t) {
+          case "left":
+            return E -= w(k);
+          case "right":
+            return E += w(k);
+        }
+        return E;
+      },
+      y: (b, E, k, U) => {
+        switch (t) {
+          case "top":
+            return E -= w(U);
+          case "bottom":
+            return E += w(U);
+        }
+        return E;
+      }
+    }), { translateX: z, translateY: M } = l();
+    let O = [
+      { scale: [1, 1], translate: [_(z), _(M)] },
+      { scale: [1, 1], translate: [_(o), _(v)] }
+    ];
+    (t === "self" || t === "center") && (O = [
+      { 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 V(t, f = !0) {
+    if (y.value === "NORMAL" && e.targetEle.value) {
+      for await (const o of n)
+        await o();
+      await D(f, t), T.emit(
+        "after_stick"
+        /* AFTER_STICK */
+      );
+    }
+  }
+  async function W(t = !0) {
+    y.value === "NORMAL" && await N(I(), t);
+  }
+  async function Z(t = !0) {
+    y.value === "NORMAL" && await V(I(), t);
+  }
+  function ve(t) {
+    y.value = t;
+  }
+  function K() {
+    return y.value;
+  }
+  function de() {
+    return e.targetEle.value;
+  }
+  function he(t, f) {
+    T.on(t, f);
+  }
+  function ge(t) {
+    x.push(t);
+  }
+  function me(t) {
+    n.push(t);
+  }
+  function pe(t) {
+    t && (i = t);
+  }
+  function ne() {
+    return i ?? e.targetEle.value?.parentElement ?? document.body;
+  }
+  function we() {
+    T.removeAllListeners(), x.length = 0, n.length = 0;
+  }
+  return {
+    getTarget: de,
+    setStatus: ve,
+    getStatus: K,
+    show: X,
+    autoHide: W,
+    autoStick: Z,
+    stickTo: V,
+    hideTo: N,
+    moveTo: D,
+    dispose: we,
+    registerBeforeHideHook: ge,
+    registerBeforeStickHook: me,
+    on: he,
+    setTargetParent: pe,
+    getTargetParent: ne
+  };
+};
+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 } = ue(e.targetEle), x = {
+    t: (s, u) => {
+      s.clientY >= n.y + n.height || r({ top: u.t, height: u.h });
+    },
+    r: (s, u) => {
+      c("width", u.w);
+    },
+    b: (s, u) => {
+      c("height", u.h);
+    },
+    l: (s, u) => {
+      s.clientX >= n.x + n.width || r({ left: u.l, width: u.w });
+    },
+    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: (s, u) => {
+      s.clientY >= n.y + n.height || r({ top: u.t, 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: (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(s) {
+    s.preventDefault();
+  }
+  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: X
+    }), h.emit(
+      "scaling"
+      /* SCALING */
+    );
+  }
+  function m() {
+    document.removeEventListener("mouseup", m), document.removeEventListener("mousemove", A), document.removeEventListener("selectstart", L), h.emit(
+      "after_scale"
+      /* AFTER_SCALE */
+    );
+  }
+  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(s, u) {
+    h.on(s, u);
+  }
+  function F() {
+    h.removeAllListeners();
+  }
+  function H() {
+    return e.targetEle.value;
+  }
+  return {
+    pointer: d,
+    getTarget: H,
+    onMouseDown: g,
+    on: P,
+    dispose: F
+  };
+}, vt = /* @__PURE__ */ ce({
+  __name: "index",
+  props: {
+    modelValue: {},
+    dragTarget: {}
+  },
+  emits: ["beforeMove", "moving", "afterMove", "scaling", "afterScale", "maskClick", "update:modelValue"],
+  setup(e, { expose: l, emit: c }) {
+    const r = c, h = e, d = Ee(), i = $({
+      get: () => h.modelValue,
+      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,
+      prevTranslateY: 0,
+      translateX: 0,
+      translateY: 0,
+      scale: [0, 0]
+    }), { getScale: m, getTranslate: g, setTranslate: P, setPrevClientPos: F, getPrevClientPos: H, setPrevTranslate: s, getPrevTranslate: u } = Xe(A), I = ft({
+      config: i,
+      targetEle: y
+    }), 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(${_(o)},${_(v)})`,
+        zIndex: i.value.normal ? void 0 : _e("zIndex", L("zIndex")),
+        // 计算其transform中心点，用于优化动画效果。元素移动时，其left和top并没有发生变化
+        transformOrigin: `${_(parseFloat((o + w(C) / 2).toFixed(2)))}
+    ${_(parseFloat((v + w(Y) / 2).toFixed(2)))}`
+      };
+    }), ve = $(() => ie(i.value.maskStyle)), { autoStick: K, onInit: de, onMovableChange: he, onNormalChange: ge } = ut(
+      i,
+      S,
+      d,
+      A,
+      a,
+      D,
+      R
+    );
+    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: 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: o } = g();
+        s(f, o), await K(), r("afterMove", { ...t, ...g() });
+      });
+    }
+    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 = ct({
+        config: i,
+        targetEle: y,
+        dragOffset: A
+      }), d.value.on(se.AFTER_HIDE, () => {
+        i.value.visible = !1;
+      }), d.value.on(se.AFTER_SHOW, () => {
+        i.value.visible = !0;
+      }), d.value.on(se.AFTER_STICK, () => {
+        const { translateX: t, translateY: f } = g();
+        i.value.x = t, i.value.y = f;
+      });
+    }
+    async function we() {
+      pe(), me(), ne(), he(i.value.movable), ge(i.value.normal), de(), window.addEventListener("resize", K);
+    }
+    return Oe(we), Pe(() => {
+      window.removeEventListener("resize", K), I.dispose(), d.value?.dispose();
+    }), l({
+      async autoStick(t) {
+        return d.value?.autoStick(t);
+      },
+      async stickTo(t, f) {
+        return d.value?.stickTo(t, f);
+      },
+      async hideTo(t, f) {
+        return d.value?.hideTo(t, f);
+      },
+      async autoHide(t) {
+        return d.value?.autoHide(t);
+      },
+      async show(t, f) {
+        return d.value?.show(t, f);
+      },
+      async moveTo(t, f, o) {
+        return d.value?.moveTo(t, f, o);
+      },
+      getStatus: function() {
+        return d.value?.getStatus();
+      }
+    }), (t, f) => (B(), Q("div", {
+      ref: "drag",
+      class: "dragContainer",
+      style: J([W.value, Z.value])
+    }, [
+      X.value ? (B(), Q("div", {
+        key: 0,
+        ref: "header",
+        class: "dragHeader",
+        style: J(V.value)
+      }, [
+        xe(t.$slots, "header", {}, void 0, !0)
+      ], 4)) : re("", !0),
+      i.value.scalable ? (B(), le(lt, {
+        key: 1,
+        config: i.value,
+        scale: Se(I),
+        move: S.value
+      }, null, 8, ["config", "scale", "move"])) : re("", !0),
+      He("div", {
+        ref: "scales",
+        class: "scaleContent",
+        style: J(N.value)
+      }, [
+        xe(t.$slots, "default", {}, void 0, !0)
+      ], 4),
+      (B(), le(je, {
+        to: "body",
+        disabled: !i.value.mask
+      }, [
+        i.value.mask ? (B(), Q("div", {
+          key: 0,
+          class: "dragMask",
+          style: J(ve.value),
+          onClick: f[0] || (f[0] = (o) => r("maskClick"))
+        }, null, 4)) : re("", !0)
+      ], 8, ["disabled"]))
+    ], 4));
+  }
+}), 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 {
+  pt as Affix,
+  yt as ParentView,
+  wt as ScalePanel
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolmain/components",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "",
   "license": "MIT",
   "type": "module",
@@ -25,13 +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-router": "^4.5.1"
+    "vue": "^3.5.18",
+    "vue-router": "^4.5.1",
+    "@toolmain/libs": "^1.1.0"
   },
   "dependencies": {
-    "@toolmain/shared": "^1.1.2",
+    "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": {