snail.vue 2.0.28 → 2.0.30

package/dist/snail.vue.d.ts

@@ -1,9 +1,9 @@
 import * as snail_core from 'snail.core';
-import { DateFormat, DateValue, TimeValue, IScope, RunResult, IAsyncScope } from 'snail.core';
-import * as snail_view from 'snail.view';
-import { ScrollbarOptions, ScrollStatus, CSSClassOptions, BaseStyle, HeightStyle, FlexBoxStyle, WidthStyle, BorderStyle, PaddingStyle, MarginStyle } from 'snail.view';
+import { DateFormat, DateValue, TimeValue, IAsyncScope, IScope, RunResult } from 'snail.core';
 import * as vue from 'vue';
 import { Component, ShallowRef, Ref, WatchSource, App } from 'vue';
+import * as snail_view from 'snail.view';
+import { ScrollbarOptions, ScrollStatus, CSSClassOptions, BaseStyle, HeightStyle, FlexBoxStyle, WidthStyle, BorderStyle, PaddingStyle, MarginStyle } from 'snail.view';
 
 /**
  * loading提示框的配置选项
@@ -212,6 +212,12 @@ type DatePickerOptions = {
      * - 默认 “yyyy-MM-dd"
      */
     format?: DateFormat;
+    /**
+     * 渲染模式
+     * - default    默认模式，文本框+图标，文本框填充满+边框
+     * - simple     简单模式，有值时才显示文本框，且无边框+不填充满
+     */
+    mode?: "default" | "simple";
     /**
      * 日期最小值
      * - 选择年月日时，早于此值的年月日不可选
@@ -249,6 +255,12 @@ type TimePickerOptions = {
      * 时间格式
      */
     format?: "HH:mm:ss" | "HH:mm";
+    /**
+     * 渲染模式
+     * - default    默认模式，文本框+图标，文本框填充满+边框
+     * - simple     简单模式，有值时才显示文本框，且无边框+不填充满
+     */
+    mode?: "default" | "simple";
     /**
      * 最小时间
      * - 传入值格式为 "时:分:秒"
@@ -313,6 +325,188 @@ type TimePickerMinuteItem = Required<Pick<TimeValue, "minute" | "hour"> & Disabl
  */
 type TimePickerSecondItem = Required<TimeValue & DisabledOptions>;
 
+/**
+ * 组件配置选项
+ */
+type ComponentOptions = {
+    /**
+     * 组件名称；
+     * - 确保组件已注册，否则会加载不出来
+     */
+    name?: string;
+    /**
+     * Vue组件对象
+     * - name未传入时生效
+     * - 推荐外部使用 shallowRef 包裹对象，避免响应式的性能问题
+     */
+    component?: Component;
+    /**
+     * 组件js文件url地址
+     * - 支持#号锚点钻取
+     * - name、component未传入时生效
+     */
+    url?: string;
+};
+/**
+ * 提取组件的props类型
+ * - 有效的 Props 类型：extends Record<string, any>
+ * - 有效类型则返回 Props 自身；否则无效，为undefined
+ */
+type PropsType<Props> = Props extends Record<string, any> ? Props : undefined;
+/**
+ * 事件发射器类型
+ * - 将【组件中组件】转换为vue的 defineEmits 类型
+ * - 用于将组件的事件发射器包裹传递到其他组件、class中使用
+ */
+type EmitterType<Events extends Record<string, any[]>> = {
+    <K extends keyof Events>(event: K, ...payload: Events[K]): any;
+};
+/**
+ * 提取【组件插槽】类型
+ */
+type SlotsType<Slots extends Record<string, any>> = {
+    [key in keyof Slots]: (props: Slots[key]) => any;
+};
+/**
+ * 提取【组件事件】类型
+ * - 将【组件事件】中的key首字母小写，追加上on前缀；key对应的value为监听函数参数
+ * - T的类型约束：Record<string, unknown[]>
+ */
+type EventsType<Events> = Events extends Record<string, unknown[]> ? ({
+    [key in keyof Events as `on${Capitalize<string & key>}`]?: (...args: Events[key]) => void;
+}) : never;
+/**
+ * 组件绑定 配置选项
+ * - Props、Events、Model 为可选泛型，分别约束 props、events、model 属性
+ * - 若泛型类型无效，则对应属性类型强制为undefined；详细参照对应属性说明
+ */
+type ComponentBindOptions<Props = void, Model = void> = {
+    /**
+     * 传递给组件的属性值，执行 v-bind 绑定
+     * - key为属性名称，遵循vue解析规则；若绑定事件，则key为 on事件名称 ，事件名称首字母大写
+     * - 通过泛型类型 Props 约束，有效类型：Props extends Record<string, any>
+     * @see EventsType<Events> 获取组件事件类型
+     */
+    props?: PropsType<Props>;
+    /**
+     * 传递给组件的双向绑定数据，执行 v-model 绑定
+     * - 使用 ShallowRef/Ref 包裹；推荐 ShallowRef，仅和组件进行.value值交互，避免深层双向影响性能
+     * - 通过泛型类型 Model 约束，有效类型： 非void、never、null、undefined等无效类型
+     */
+    model?: Model extends (void | never | null | undefined) ? undefined : (ShallowRef<Model> | Ref<Model>);
+};
+
+/**
+ * 公共通用数据结构：
+ *  1、在弹窗、模态弹窗、跟随弹窗的效果下复用
+ */
+
+/**
+ * 弹窗配置选项
+ * - 约束弹出组件信息
+ * - 弹出组件时传递的参数信息
+ * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
+ */
+type PopupOptions<Props = void, Model = void> = ComponentOptions & ComponentBindOptions<Props, Model> & {
+    /**
+     * 弹窗动画名
+     * - 不传则默认“fade”
+     * - 动画规则：打开弹窗时，为 [transition]-in ；关闭弹窗时，为[transition]-out
+     * - - 传入 "scale"，则打开弹窗为 "scale-in"；关闭弹窗时为 "scale-out"
+     */
+    transition?: string;
+    /**
+     * 动画持续时间
+     * - 配合 transition 使用；单位ms，默认500ms
+     * - 外部传入自定义动画时，传入动画持续时间，否则可能导致关闭时动画失效
+     */
+    transitionDuration?: number;
+    /**
+     * 自定义class
+     * - 绑定到内容组件根元素上
+     * - 可以直接在props中指定，无需特殊设置
+    class?: string | string[];
+     */
+    /**
+     * 自定义style
+     * - 绑定到内容组件根元素上
+     * - 可以直接在props中指定，无需特殊设置
+    style?: AllStyle;
+     */
+    /**
+     * 弹窗的z-index值
+     * - 无特殊情况，建议不指定，内部会自动生成，确保弹窗正确性
+     */
+    zIndex?: number;
+};
+/**
+ * 弹出组件句柄
+ */
+type PopupHandle<T> = {
+    /**
+     * 组件是否在【弹出窗口】中
+     * - popup  ：  普通弹出弹窗
+     * - dialog ：  模态对话弹窗
+     * - follow ：  跟随效果弹窗
+     */
+    inPopup: Readonly<"popup" | "dialog" | "follow">;
+    /**
+     * 关闭弹窗
+     * @param data 关闭时传递数据
+     */
+    closePopup(data?: T): void;
+};
+/**
+ * 弹窗状态：响应式
+ * - open       打开
+ * - active     激活，针对Dialog弹窗生效
+ * - unactive   非激活，针对Dialog弹窗生效
+ * - closed     关闭
+ */
+type PopupStatus = ShallowRef<"open" | "active" | "unactive" | "closed">;
+/**
+ * 弹窗状态 配置选项
+ */
+type PopupStatusOptions = {
+    /**
+     * 弹窗状态：响应式
+     */
+    popupStatus: PopupStatus;
+};
+/**
+ * 弹窗对象描述器
+ * - 给弹窗容器使用，传递过去作为props使用
+ */
+type PopupDescriptor<Options extends PopupOptions, ExtOptions> = PopupStatusOptions & {
+    /**
+     * 弹窗Id
+     * - 自动分配，全局唯一
+     */
+    popupId: string;
+    /**
+     * 弹窗配置选项
+     * - 由外部传递过来的业务数据配置信息
+     * - 约束具体弹窗的业务组件和业务组件所需props等数据
+     */
+    options: Options;
+    /**
+     * 弹窗扩展配置选项
+     * - 由 popup、follow等方法内部组件：如关闭弹窗方法、钩子函数等
+     * - 配合业务组件使用的一些配置数据
+     */
+    extOptions: ExtOptions;
+    /**
+     * 实际分配的zIndex值
+     */
+    zIndex: number;
+    /**
+     * 弹窗动画名
+     * - 约束打开、关闭动画；基于 PopupOptions.transition 构建出来的
+     * - 具体使用方，将此值绑定的根元素上
+     */
+    popupTransition: ShallowRef<string>;
+};
+
 /**
  * 头部配置选项
  * - title          将作为头部标题，无则不展示标题区域
@@ -470,1826 +664,1852 @@ type WrapperOptions = {
 type WrapperEvents = FooterEvents;
 
 /**
- * 树形 数据相关的基础实体结构
- * 1、封装一些基础实体；如树形节点数据结构
- * 2、配合树形组件使用；如select的多级筛选，树组件等
- * 3、封装树的基础共性操作，如显隐判断、搜索查询等
- */
-/**
- * 树节点
- * - 仅提供树节点基础属性；可以基于 Extend 为 TreeNode 扩展节点属性
+ * 模态弹窗数据结构
  */
-type TreeNode<T, Extend extends Record<string, any> | void = void> = {
-    /**
-     * 展示文本
-     */
-    text: string;
-    /**
-     * 附带数据
-     */
-    data?: T;
-    /**
-     * 子选择项 数据源
-     */
-    children?: TreeNode<T, Extend>[];
-} & (Extend extends void ? {} : Extend);
+
 /**
- * 树节点 扩展
- * - 配合 树上下文 使用
+ * 模态弹窗 配置选项
+ * - 继承 ComponentOptions ，动态加载组件
+ * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
  */
-type TreeNodeExtend = {
+type DialogOptions<Props = void, Model = void> = PopupOptions<Props, Model> & {
     /**
-     * 节点Id，确保唯一
-     * - 不传入则内部自动 newId()
+     * 包裹器配置
+     * - 若传入配置，则启用弹窗包裹；弹窗打开时使用`Wrapper`包裹弹窗内容组件
      */
-    readonly id?: string;
+    wrapper?: Pick<WrapperOptions, "header" | "content" | "footer">;
     /**
-     * 是否可点击
-     * - true 此节点可点击，点击时触发 click 事件
-     * - false 此节点不可点击
+     * 禁用【遮罩层】
+     * - 目前没实现，先忽略
+    maskDisabled?: boolean;
      */
-    clickable?: boolean;
     /**
-     * 是否可搜索
-     * - 为true时，此节点可搜索
+     * 点击【遮罩层】时是否关闭弹窗
+     * - 针对无遮罩层的弹窗，则点击非【弹窗组件】区域时是否关闭
      */
-    searchable?: boolean;
+    closeOnMask?: boolean;
     /**
-     * 是否隐藏
-     * - true 隐藏 节点 和 子节点
-     * - 隐藏组件，不参与点击、搜索等
+     * 按下【ESC】健时是否关闭弹窗
      */
-    hidden?: boolean;
+    closeOnEscape?: boolean;
     /**
-     * 是否固定
-     * - true 固定 节点；则节点不参与 搜索、移动等动态操作
+     * 模态弹窗的自定义class
+     * - 绑定到模态弹窗的根元素上
      */
-    fixed?: boolean;
+    rootClass?: string | string[];
 };
 /**
- * 树的基础上下文对象
+ * 弹窗组件句柄
+ * - 用于在弹窗内容组件中进行模式判断和关闭
  */
-interface ITreeBaseContext<T> {
-    /**
-     * 执行搜索
-     * @param text 搜索文本
-     */
-    doSearch(text: string): void;
+type DialogHandle<T> = PopupHandle<T> & {
     /**
-     * 是否是【已激活】节点
-     * @param node 要判断的节点
-     * @returns true 是已激活节点，false 否
+     * 注册监听【弹窗关闭】事件方法
+     * - 仅支持注册一次，多次注册以最后一次的为准
+     * @param fn 关闭时执行的钩子函数，支持异步；；调用后若返回false时将阻止弹窗关闭
      */
-    isActived(node: TreeNode<T>): boolean;
+    onBeforeClose(fn: (data?: T) => false | undefined | Promise<false | undefined>): void;
+};
+/**
+ * 弹窗包裹器操作句柄
+ */
+type DialogWrapperHandle<T> = {
     /**
-     * 是否是【补丁】节点
-     * - 子节点搜索命中时，父级路径上节点没命中，则作父级路径节点作为路径修补节点存在，避免命中子节点展示不出来
-     * @param node 要判断的节点
-     * @returns true 是补丁节点，false 不是补丁节点
+     * 注册【构建数据】事件方法
+     * - 仅在Dialog为使用了wrapper模式时生效，用于在【确认】按钮点击时，构建实际内容组件中的数据
+     * - 仅支持注册一次，多次注册以最后一次的为准
+     * @param fn 取数据时执行的钩子函数，支持异步；若需要阻止弹窗关闭则`fn`方法直接报错即可
      */
-    isPatched(node: TreeNode<T>): boolean;
+    onBuildData(fn: () => T | Promise<T>): void;
+};
+
+/**
+ * 确认弹窗配置选项
+ * - title          弹窗标题，默认“提示”
+ * - message        确认提示信息；默认“请确认？”；支持html格式内容
+ */
+type ConfirmOptions = TitleOptions & MessageOptions & ConfirmAreaOptions & {};
+
+/**
+ * 图标配置选项
+ * - title          作为鼠标移入图标时的提示
+ */
+type IconOptions = TitleOptions & {
     /**
-     * 是否显示【树节点】
-     * @param node 要判断的节点
-     * @param needPatched 是否需要【补丁】节点。true时（补丁节点始终显示）；false时（根据hidden和搜索结果判断）
-     * @returns 能显示返回true；否则返回false
+     * 是否为自定义图标
+     * - 为true时，外部通过插槽自己绘制图标
+     * - 为false时，使用`type`值绘制对应的内置图标
+     * - 默认false
      */
-    isShow(node: TreeNode<T, TreeNodeExtend>, needPatched: boolean): boolean;
+    custom?: boolean;
     /**
-     * 是否显示指定【树节点】的子节点
-     * - 不会判断node节点自身是否可显示
-     * @param node 要判断的节点
-     * @param needPatched 是否需要【补丁】节点。true时（补丁节点始终显示）；false时（根据hidden和搜索结果判断）
-     * @returns 能显示返回true；否则返回false
+     * 内置的图标类型
+     * - `custom`为false时生效
      */
-    isShowChildren(node: TreeNode<T, TreeNodeExtend>, needPatched: boolean): boolean;
+    type?: IconType;
     /**
-     * 获取指定【树节点】的路径
-     * @param node 树节点
-     * @returns 从【顶级节点】->【指定节点】的全路径数据
+     * 是否是按钮图标
+     * - true时，鼠标移入时 cursor:pointer;
      */
-    getPath(node: TreeNode<T, TreeNodeExtend>): TreeNode<T, TreeNodeExtend>[];
+    button?: boolean;
     /**
-     * 获取指定【树节点】的唯一Key值
-     * - 相同节点确保唯一，且不变；用于唯一标记此节点
-     * @param node
-     * @returns 返回节点唯一Key值
+     * 图标大小
+     * - 可指定对象，如 { width: 24, height: 24 }，则图标大小为 24 * 24
+     * - 可指定数字，如 24，则图标大小为 24 * 24
+     * - 默认 24
      */
-    getKey(node: TreeNode<T>): string;
-}
-/**
- * 树搜索结果
- */
-type TreeSearchResult<T> = {
+    size?: number | {
+        width?: number;
+        height?: number;
+    };
     /**
-     * 匹配上的节点集合
+     * 图标颜色
      */
-    matched: TreeNode<T>[];
+    color?: string;
     /**
-     * 未匹配上的节点集合
+     * 鼠标移入时的图标颜色
      */
-    failed: TreeNode<T>[];
+    hoverColor?: string;
     /**
-     * 搜索时的【补丁】节点集合
-     * - 子节点搜索命中时，父级路径上节点没命中，则作父级路径节点作为路径修补节点存在，避免命中子节点展示不出来
-     * - 仅在有搜索条件时成立，补丁节点同时在【failed】节点集合中
+     * 旋转角度
+     * - 默认0
+     * - 通过：transform: rotate(1.06); 实现
      */
-    patched: TreeNode<T>[];
-};
-
-/**
- * 搜索组件配置选项
- */
-type SearchOptions = ReadonlyOptions & PlaceholderOptions & {
+    rotate?: number;
     /**
-     * 启用【自动完成】
-     * - true 时，只要文本变化了，就触发 search 事件
-     * - false 时，只有点击【搜索】按钮，才触发 search 事件
+     * 图标透明度
+     * - 不传入，默认1
      */
-    autoComplete?: boolean;
-};
-/**
- * 搜索组件事件
- */
-type SearchEvents = {
+    opacity?: number;
     /**
-     * 事件：执行搜索
-     * @param value 为搜索文本
+     * 图标边样式
      */
-    search: [value: string];
-};
-
-/**
- * 树组件 相关实体
- * - 基于 snail.core中的TreeNode做扩展
- */
-
-/**
- * 树组件 配置选项
- */
-type TreeOptions<T> = {
+    border?: string;
     /**
-     * 树节点 集合
+     * 图标圆角样式
      */
-    nodes: TreeNodeModel<T>[];
+    radius?: string;
     /**
-     * 树节点搜索配置
-     * - 不配置则不启用【搜索】功能
+     * 图标背景样式
      */
-    search?: SearchOptions;
+    background?: string;
     /**
-     * 树节点的配置选项
+     * 图形伸展
+     * - svg.viewBox 属性
+     * - 为空则默认“0 0 1024 1024”
      */
-    nodeOptions?: TreeNodeRenderOptions;
+    viewBox?: string;
 };
 /**
- * 树组件事件
+ * 图标类型
+ * - 状态类：
+ * - - success      成功图标，对勾
+ * - - error        错误
+ * - - warn         警告图标
+ * - 操作类：
+ * - - close        关闭 用作数据删除，弹窗关闭
+ * - - trash        垃圾桶图标，常用于【删除】操作
+ * - - download     下载
+ * - - print        打印
+ * - - edit         编辑
+ * - - pause        暂停，两道竖线
+ * - 指向类：
+ * - - arrow        向右箭头
+ * - - datepicker   日期选择器
+ * - - timepicker   时间选择器
+ * - 其他类：
+ * - - plus         加号
+ * - - subtract     减号
+ * - - more         更多，默认垂直三个点
+ * - - grip         紧握图标，垂直方向，一般用于拖动句柄
  */
-type TreeEvents<T> = TreeNodeEvents<T> & {
-    /**
-     * 搜索完成后
-     * @param text 搜索文本
-     */
-    searched: [text: string];
-};
+type IconType = "success" | "error" | "warn" | "close" | "trash" | "download" | "print" | "edit" | "pause" | "arrow" | "datepicker" | "timepicker" | "plus" | "subtract" | "more" | "grip";
+
 /**
- * 树节点 组件配置选项
+ * Toast配置选项
  */
-type TreeNodeOptions<T> = {
-    /**
-     * 要渲染的树节点
-     */
-    node: TreeNodeModel<T>;
+type ToastOptions = {
     /**
-     * 父节点
+     * 提示类型，基于类型展示图标
      */
-    parent?: TreeNodeModel<T>;
+    type?: IconType;
     /**
-     * 树节点所处层级
-     * - 用于控制缩进
+     * 提示消息；支持html格式
      */
-    level: number;
+    message: string;
     /**
-     * 树节点的配置选项
+     * 提示显示时间
+     * - 单位毫秒，默认1500ms
      */
-    options?: TreeNodeRenderOptions;
+    duration?: number;
     /**
-     * 树组件的上下文对象
+     * 关闭按钮是否禁用
      */
-    context: ITreeBaseContext<T>;
+    closeDisabled?: boolean;
 };
+
 /**
- * 树节点事件
+ * 跟随效果 弹窗
  */
-type TreeNodeEvents<T> = {
-    /**
-     * 树节点 点击事件
-     * @param node 点击的树节点
-     * @param parents node的父节点路径，从【顶级父节点】->【直属父节点】
-     */
-    click: [node: TreeNodeModel<T>, parents?: TreeNodeModel<T>[]];
-};
+
 /**
- * 树节点数据结构
- * - 简化外部使用 树节点 时需要频繁写 TreeNode<T, TreeNodeExtend>；
- * - 避免和 Vue 组件“tree-node.vue”命名重复
- * - 推荐使用时，将此对象做响应式，否则 .hidden 等 更新时，无法实时反应到树上
+ * 跟随弹窗 配置选项
+ * - 传入的组件，根据配置跟随 target 位置和大小；
+ * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
  */
-type TreeNodeModel<T> = TreeNode<T, TreeNodeExtend>;
+type FollowOptions<Props = void, Model = void> = PopupOptions<Props, Model> & FollowPositionOptions;
 /**
- * 树节点 渲染配置选项
+ * 跟随位置 配置选项
+ * - 基于此计算出最终的跟随效果
  */
-type TreeNodeRenderOptions = {
+type FollowPositionOptions = {
     /**
-     * 节点展开层级
-     * - 不传入则默认展开所有
-     * - 否则展开传入的层级；从2开始；第一级始终展开；如2则1、2层级展开
-     * -
+     * 启用【宽度】跟随
+     * - 为true则和 target 宽度保持一致
+     * - false时，宽度由 弹出组件 自己维护
+     * - 不管是true、还是false，若宽度超过浏览器最大宽度，会进行强制干预
      */
-    expandLevel?: number;
+    followWidth?: boolean;
     /**
-     * 是否禁用【折叠】子节点操作
-     * - true 时禁用 折叠操作
+     * 启用【高度】跟随
+     * - 为true则和 target 高度保持一致
+     * - false时，高度由 弹出组件 自己维护
+     * - 不管是true、还是false，若高度超过浏览器最大高度，会进行强制干预
      */
-    foldDisabled?: boolean;
+    followHeight?: boolean;
     /**
-     * 重写树节点
-     * - true 时，插槽作为完整树节点对象；
-     * - false 时，插槽仅作为扩展元素，如自定义操作等
+     * x轴方向上的跟随策略
+     * - 支持传入一个或者多个，依次尝试选举最优位置（全宽度展示，否则取最大宽度位置）
+     * - 不传入则按照默认策略；["start","end","after","before","center","ratio"]
+     * - 可选策略值如下：
+     * - - start  ： 起点跟随，和 target 起始位置（left）一致
+     * - - end    ： 终点跟随，和 target 结束位置（right）一致
+     * - - center ： 中心跟随，和 target 中心位置一致
+     * - - before ： 之前跟随，组件在 target 左侧展示
+     * - - after  ： 之后跟随，组件在 target 右侧展示
+     * - - ratio  ： 比例跟随，按比例（target中心点/窗口宽度）锚定位置，动态计算left值。
      */
-    rewrite?: boolean;
-};
-/**
- * 树节点 插槽配置选项
- */
-type TreeNodeSlotOptions<Node> = {
+    followX?: FollowStrategy | FollowStrategy[];
     /**
-     * 当前节点
+     * y轴方向上的跟随策略
+     * - 支持传入一个或者多个，依次尝试选举最优位置（全高度展示，否则取最大高度位置）
+     * - 不传入则按照默认策略；["after","before","start","end","center","ratio"]
+     * - 可选策略值如下：
+     * - - start  ： 起点跟随，和 target 起始位置（top）一致
+     * - - end    ： 终点跟随，和 target 结束位置（bottom）一致
+     * - - center ： 中心跟随，和 target 中心位置一致
+     * - - before ： 之前跟随，组件在 target 顶部展示
+     * - - after  ： 之后跟随，组件在 target 底部展示
+     * - - ratio  ： 比例跟随，按比例（target中心点/窗口高度）锚定位置，动态计算top值。
      */
-    node: Node;
+    followY?: FollowStrategy | FollowStrategy[];
     /**
-     * 父节点
+     * x轴方向上 target 之间的留白空间
+     * - 默认0； followX 为 center、ratio 时间距失效
+     * - 增加间距，提升展示效果
+     * -
      */
-    parent?: Node;
+    spaceX?: number;
     /**
-     * 所处层级
+     * y轴方向上 target 之间的留白空间
+     * - 默认0；followY 为 center、ratio 时间距失效
+     * - 增加间距，提升展示效果
      */
-    level: number;
+    spaceY?: number;
     /**
-     * 点击节点
+     * 和 浏览器客户 端之间的留白空间
+     * - 弹出组件 和浏览器客户端窗口之间的【留白空间】
+     * - 仅在 弹出组件 计算出来位置紧贴浏览器窗口时生效
+     * - 若强制指定了 start、end，则对应的起始、结束位置不受此值影响
      */
-    click(): void;
+    spaceClient?: number;
     /**
-     * 切换【子节点】折叠窗台
+     * 点击【遮罩层】时是否关闭弹窗
+     * - 则点击非【跟随组件】区域时是否关闭
      */
-    toggle(): void;
-};
-
-/**
- * Table配置选项
- */
-type TableOptions = Pick<ScrollOptions, "scroll" | "barSize"> & {
+    closeOnMask?: boolean;
     /**
-     * 是否启用表格边框
+     * 按下【ESC】健时是否关闭弹窗
      */
-    border?: boolean;
+    closeOnEscape?: boolean;
     /**
-     * 表头样式
-     * - 约束高度和背景颜色
-     * - 后期再增加其他的
+     * window窗口【resize】时是否关闭弹窗
      */
-    headerStyle?: BaseStyle & HeightStyle;
+    closeOnResize?: boolean;
     /**
-     * 表尾部样式
-     * - 约束高度和背景颜色
-     * - 后期再增加其他的
+     * target改变时是否关闭弹窗
+     * - target尺寸、位置变化
+     * - target点击时
      */
-    footerStyle?: BaseStyle & HeightStyle;
+    closeOnTarget?: boolean;
 };
 /**
- * Table 行配置选项
+ * 跟随策略
+ * - 详细值定义，参照 FollowOptions.followX 和 FollowOptions.followY
  */
-type TableRowOptions = HeightStyle & {};
+type FollowStrategy = "start" | "center" | "end" | "before" | "after" | "ratio";
 /**
- * Table 列配置选项
- * - border 样式需要配合TableOptions.border使用，否则会导致边框线重叠
+ * 跟随弹窗 句柄
+ * - 用于在 弹窗组件 内部进行模式判断和关闭跟随弹窗
  */
-type TableColOptions = BaseStyle & FlexBoxStyle & WidthStyle & BorderStyle & PaddingStyle;
-
+type FollowHandle<T> = PopupHandle<T> & {};
 /**
- * 排序组件 配置选项
- * - 整理部分SortableJs中的配置，不分逻辑不开放
+ * 跟随弹窗 扩展配置
  */
-type SortOptions<T> = {
-    /**
-     * 变化器
-     * - 在此元素值发生变化时，重新刷新排序面板
-     * - 如在增加元素时，改变此值实现 新元素 可拖拽排序
-     */
-    changer: T;
-    /**
-     * 拖动哪个元素
-     * - 传入类样式选择器；如 .table-row
-     */
-    draggable: string;
-    /**
-     * 哪个元素启动拖拽
-     * - 传入类样式选择器；如 .sort-handle
-     * - 不传入则默认 draggable
-     * - 若自定义，则传入 draggable 下的dom元素作为启动拖拽的句柄
-     */
-    handle?: string;
-    /**
-     * 拖动的元素上增加的类样式
-     * - 执行拖拽时随着鼠标移动元素，脱离文档流了
-     * - 可自定义一些样式实现拖动元素的高度、宽度自定义等
-     * - 默认：snail-sort-drag
-     */
-    dragClass?: string;
+type FollowExtend = PopupStatusOptions & {
     /**
-     * 幽灵元素类样式名称
-     * - 拖动时在面板上占位的元素
-     * - 默认：snail-sort-ghost
+     * 跟随的目标元素
      */
-    ghostClass?: string;
+    target: Element;
     /**
-     * 过滤器，不需要进行拖动的元素
-     * - 传入类样式选择器；如 .sort-handle
-     * - 实现特定子元素不触发拖动排序功能
+     * x轴方向的跟随策略：响应式
+     * - 基于外部传入的跟随策略，计算选举出来的最优策略值
      */
-    filter?: string;
+    followX: ShallowRef<FollowStrategy>;
     /**
-     * 排序组
-     * - 组相同时，可跨组拖拽排序
-     * - 不传入，则内部生成guid
-     * - 为
+     * y轴方向的跟随策略：响应式
+     * - 基于外部传入的跟随策略，计算选举出来的最优策略值
      */
-    group?: string | SortGroupOptions;
+    followY: ShallowRef<FollowStrategy>;
     /**
-     * 动画时间
-     * - 单位ms；默认150ms
+     * Follow弹窗是否【钉住】了
+     * - 为true时，closeOnMask、closeOnEscape失效
+     * - 满足 子弹窗 点击等操作时，不自动销毁父级弹窗
      */
-    animation?: number;
+    pinned: ShallowRef<boolean>;
+};
+/**
+ * 跟随策略 配置选项
+ */
+type FollowStrategyOptions = {
     /**
-     * 禁用排序效果
-     * - 为true时，此容器内元素不能拖动，此不构建sortable实例
+     * x轴的跟随策略
      */
-    disabled?: boolean;
+    followX?: FollowStrategy;
     /**
-     * 在当前容器内是否禁用拖拽排序
-     * - 为true时，此容器内部不能拖拽，但可拖动到其他同名group内
-     * - 初期想用sort，但作Vue组件属性时，bool类型不传值会自动默认false，和初衷不符
+     * x轴的跟随策略
      */
-    sortDisabled?: boolean;
+    followY?: FollowStrategy;
 };
 /**
- * 排序组件的Group属性配置选项
+ * 跟随选举结果
  */
-type SortGroupOptions = {
+type FollowElectResult = {
     /**
-     * 排序组名称；
-     * - 不传入时自动生成
+     * 跟随策略
      */
-    name: string;
+    strategy: FollowStrategy;
     /**
-     * 定义从这个列表容器移动出去的设置
-     * - true:列表容器内的列表单元可以被移出；
-     * - false：列表容器内的列表单元不可以被移出；
-     * - "clone"：列表单元移出，移动的为该元素的副本；
-     * - function：用来进行pull的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否移出；
+     * 开始位置：x/top
      */
-    pull: true | false | "clone" | SortGroupHook;
+    start: number;
     /**
-     * 用来定义往这个列表容器放置列表单元的的设置
-     * - true:列表容器可以从其他列表容器内放入列表单元；
-     * - false：与true相反；
-     * - string|string[]：代表的是group配置项里定义的name值。如['foo','bar']
-     * - function：用来进行put的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否放入；
+     * 调整后的尺寸（width/height)
+     * - 为undefined表示无需调整尺寸
      */
-    put: true | false | string | string[] | SortGroupHook;
+    size?: number;
 };
+
 /**
- * 排序组件的Group属性钩子
- * - 用于pull和put中使用，返回false时不执行pull、put操作
- * - @param item 移动的元素
- * - @param to 目标容器dom元素
- * - @param from 来源容器dom元素
- */
-type SortGroupHook = (item: HTMLElement, to: HTMLElement, from: HTMLElement) => void;
-/**
- * 排序组件 事件
+ * 弹窗管理器
  */
-type SortEvents = {
-    /**
-     * 开始拖拽
-     */
-    start: [evt: SortEvent];
+interface IPopupManager {
     /**
-     * 移动中
+     * 弹出
+     * - 弹窗位置位置、大小、动画效果等由组件自己完成
+     * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
+     * @param options 弹窗配置选项
+     * @returns 弹窗打开结果，外部可手动关闭弹窗
      */
-    move: [evt: SortEvent, originalEvent: SortEvent];
+    popup<T, Props = void, Model = void>(options: PopupOptions<Props, Model>): IAsyncScope<T>;
     /**
-     * 移动到新容器时
+     * 对话框
+     * - 支持指定模态和非模态对话框
+     * - 默认垂直水平居中展示
+     * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
+     * @param options 弹窗配置选项
+     * @returns 弹窗打开结果，外部可手动关闭弹窗
      */
-    add: [evt: SortEvent];
+    dialog<T, Props = void, Model = void>(options: DialogOptions<Props, Model>): IAsyncScope<T>;
     /**
-     * 从当前容器移除时
+     * 跟随弹窗
+     * - 跟随指定的target对象，可跟随位置、大小
+     * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
+     * @param target 跟随的目标元素
+     * @param options 跟随配置选项
+     * @returns 弹窗异步作用域，外部可手动关闭弹窗
      */
-    remove: [evt: SortEvent];
+    follow<T, Props = void, Model = void>(target: HTMLElement, options: FollowOptions<Props, Model>): IAsyncScope<T>;
     /**
-     * 结束拖拽
+     * 打开【确认】弹窗
+     * @param title  弹窗标题
+     * @param message 确认提示信息，支持html片段
+     * @param options 确认弹窗其他配置信息
+     * @returns 弹窗打开结果，外部可手动关闭弹窗
      */
-    end: [evt: SortEvent];
+    confirm(title: string, message: string, options?: Omit<ConfirmOptions, "title" | "message">): IAsyncScope<boolean>;
     /**
-     * 元素排序顺序变化
-     * @param oldIndex 旧位置索引值
-     * @param newIndex 新顺序索引值
+     * Toast 提示框
+     * @param type 提示类型：成功、失败、、、
+     * @param message 提示消息
+     * @param options 提示框配置选项
+     * @returns 弹窗打开结果，外部可手动关闭弹窗
      */
-    update: [oldIndex: number, newIndex: number];
-};
+    toast(type: IconType, message: string, options?: Omit<ToastOptions, "type" | "message">): IScope;
+}
+
 /**
- * 排序事件对象
+ * 使用【弹窗管理器】
+ * @returns 全新的【弹窗管理器】实例+作用域对象
  */
-type SortEvent = {
+declare function usePopup(): IPopupManager & IScope;
+
+/**
+ * 选择器 相关数据实体
+ */
+
+/**
+ * 接口：选择器管理器
+ */
+interface IPickerManager {
     /**
-     * 目标容器
+    * 显示【日期】选择器
+    * @param target 哪个元素触发，基于此元素计算位置
+    * @param options 日期选择器配置选项
+    * @param popupOptions 弹窗配置选项;内部根据情况选择属性使用
+    * @returns 异步任务，可销毁日期选择器；可接收日期选择器的选择值
+    */
+    showDate(target: HTMLElement, options?: DatePickerOptions, popupOptions?: PickerPopupOptions): IAsyncScope<string>;
+    /**
+     * 显示【时间】选择控件
+     * @param target 哪个元素触发，基于此元素计算位置
+     * @param options 时间选择控件配置选项
+    * @param popupOptions 弹窗配置选项;内部根据情况选择属性使用
+     * @returns 异步任务，可销毁时间选择控件；可接收时间选择控件的选择值
      */
-    to: HTMLElement;
+    showTime(target: HTMLElement, options?: TimePickerOptions, popupOptions?: PickerPopupOptions): IAsyncScope<string>;
+}
+/**
+ * 选择器弹窗配置选项
+ * - 放开一些属性，方便用户做一些自定义
+ */
+type PickerPopupOptions = {
     /**
-     * 来源容器
+     * 弹窗模式
+     * - follow     【默认值】跟随弹窗，跟随制定的target
+     * - dialog     模态弹窗
      */
-    from: HTMLElement;
+    mode?: "dialog" | "follow";
     /**
-     * 被移动的元素
-     * - 在`group.pull`配置为 clone 时，此值为原始元素，复制元素放到原来位置了
+     * 跟随效果
+     * - mode 为 `follow` 生效
      */
-    item: HTMLElement;
+    follow?: FollowPositionOptions;
     /**
-     * 副本的元素
-     * - 在`group.pull`配置为 clone 时
+     * 弹窗配置
+     * - mode 为 `dialog` 生效
      */
-    clone: HTMLElement;
+    dialog?: Pick<DialogOptions, "closeOnEscape" | "closeOnMask" | "rootClass">;
+} /** & FollowPositionOptions */;
+/**
+ * 选择器扩展
+ */
+type PickerExtend = {
     /**
-     * 容器中的原序号
+     * 弹窗管理器
+     * - 方便下级再弹窗，公用一个管理器，方便生命周期管理
      */
-    oldIndex: number | undefined;
+    popup: IPopupManager;
     /**
-     * 容器中的新序号
+     * 选择器对象，方便内部在弹出选择
+     * - 如日期选择器中，在选择时间
      */
-    newIndex: number | undefined;
+    picker: IPickerManager;
 };
 
 /**
- * 组件配置选项
+ * 树形 数据相关的基础实体结构
+ * 1、封装一些基础实体；如树形节点数据结构
+ * 2、配合树形组件使用；如select的多级筛选，树组件等
+ * 3、封装树的基础共性操作，如显隐判断、搜索查询等
  */
-type ComponentOptions = {
+/**
+ * 树节点
+ * - 仅提供树节点基础属性；可以基于 Extend 为 TreeNode 扩展节点属性
+ */
+type TreeNode<T, Extend extends Record<string, any> | void = void> = {
     /**
-     * 组件名称；
-     * - 确保组件已注册，否则会加载不出来
+     * 展示文本
      */
-    name?: string;
+    text: string;
     /**
-     * Vue组件对象
-     * - name未传入时生效
-     * - 推荐外部使用 shallowRef 包裹对象，避免响应式的性能问题
+     * 附带数据
      */
-    component?: Component;
+    data?: T;
     /**
-     * 组件js文件url地址
-     * - 支持#号锚点钻取
-     * - name、component未传入时生效
+     * 子选择项 数据源
      */
-    url?: string;
-};
-/**
- * 提取组件的props类型
- * - 有效的 Props 类型：extends Record<string, any>
- * - 有效类型则返回 Props 自身；否则无效，为undefined
- */
-type PropsType<Props> = Props extends Record<string, any> ? Props : undefined;
-/**
- * 事件发射器类型
- * - 将【组件中组件】转换为vue的 defineEmits 类型
- * - 用于将组件的事件发射器包裹传递到其他组件、class中使用
- */
-type EmitterType<Events extends Record<string, any[]>> = {
-    <K extends keyof Events>(event: K, ...payload: Events[K]): any;
-};
-/**
- * 提取【组件插槽】类型
- */
-type SlotsType<Slots extends Record<string, any>> = {
-    [key in keyof Slots]: (props: Slots[key]) => any;
-};
-/**
- * 提取【组件事件】类型
- * - 将【组件事件】中的key首字母小写，追加上on前缀；key对应的value为监听函数参数
- * - T的类型约束：Record<string, unknown[]>
- */
-type EventsType<Events> = Events extends Record<string, unknown[]> ? ({
-    [key in keyof Events as `on${Capitalize<string & key>}`]?: (...args: Events[key]) => void;
-}) : never;
+    children?: TreeNode<T, Extend>[];
+} & (Extend extends void ? {} : Extend);
 /**
- * 组件绑定 配置选项
- * - Props、Events、Model 为可选泛型，分别约束 props、events、model 属性
- * - 若泛型类型无效，则对应属性类型强制为undefined；详细参照对应属性说明
+ * 树节点 扩展
+ * - 配合 树上下文 使用
  */
-type ComponentBindOptions<Props = void, Model = void> = {
+type TreeNodeExtend = {
     /**
-     * 传递给组件的属性值，执行 v-bind 绑定
-     * - key为属性名称，遵循vue解析规则；若绑定事件，则key为 on事件名称 ，事件名称首字母大写
-     * - 通过泛型类型 Props 约束，有效类型：Props extends Record<string, any>
-     * @see EventsType<Events> 获取组件事件类型
+     * 节点Id，确保唯一
+     * - 不传入则内部自动 newId()
      */
-    props?: PropsType<Props>;
+    readonly id?: string;
     /**
-     * 传递给组件的双向绑定数据，执行 v-model 绑定
-     * - 使用 ShallowRef/Ref 包裹；推荐 ShallowRef，仅和组件进行.value值交互，避免深层双向影响性能
-     * - 通过泛型类型 Model 约束，有效类型： 非void、never、null、undefined等无效类型
+     * 是否可点击
+     * - true 此节点可点击，点击时触发 click 事件
+     * - false 此节点不可点击
      */
-    model?: Model extends (void | never | null | undefined) ? undefined : (ShallowRef<Model> | Ref<Model>);
+    clickable?: boolean;
+    /**
+     * 是否可搜索
+     * - 为true时，此节点可搜索
+     */
+    searchable?: boolean;
+    /**
+     * 是否隐藏
+     * - true 隐藏 节点 和 子节点
+     * - 隐藏组件，不参与点击、搜索等
+     */
+    hidden?: boolean;
+    /**
+     * 是否固定
+     * - true 固定 节点；则节点不参与 搜索、移动等动态操作
+     */
+    fixed?: boolean;
 };
-
-/**
- * 布局组件 数据结构
- */
-
 /**
- * 布局组件 配置选项
+ * 树的基础上下文对象
  */
-type LayoutOptions = {
+interface ITreeBaseContext<T> {
     /**
-     * 布局方向
-     * - horizontal 水平布局：左中右
-     * - vertical 垂直布局：上中下
-     * - 默认为 `horizontal`
+     * 执行搜索
+     * @param text 搜索文本
      */
-    direction?: "horizontal" | "vertical";
+    doSearch(text: string): void;
     /**
-     * 主内容区域配置
-     * - 对应插槽名：main；主要内容显示区域，处于布局中的【中】区域
-     * - 配置主内容区域的滚动条配置
+     * 是否是【已激活】节点
+     * @param node 要判断的节点
+     * @returns true 是已激活节点，false 否
      */
-    main?: Pick<LayoutAraeOptions<void>, "scroll" | "class">;
+    isActived(node: TreeNode<T>): boolean;
     /**
-     * 【左侧】区域配置
-     * - 对应插槽名`left` ；`mode` 为 `horizontal` 时生效
-     * - 配置滚动条和宽度；宽度不配置时，默认 `fit-content`
-     * -
+     * 是否是【补丁】节点
+     * - 子节点搜索命中时，父级路径上节点没命中，则作父级路径节点作为路径修补节点存在，避免命中子节点展示不出来
+     * @param node 要判断的节点
+     * @returns true 是补丁节点，false 不是补丁节点
      */
-    left?: LayoutAraeOptions<WidthStyle>;
+    isPatched(node: TreeNode<T>): boolean;
     /**
-     * 【右测】区域配置
-     * - 对应插槽名`right` ；`mode` 为 `horizontal` 时生效
-     * - 配置滚动条和宽度；宽度不配置时，默认 `fit-content`
+     * 是否显示【树节点】
+     * @param node 要判断的节点
+     * @param needPatched 是否需要【补丁】节点。true时（补丁节点始终显示）；false时（根据hidden和搜索结果判断）
+     * @returns 能显示返回true；否则返回false
      */
-    right?: LayoutAraeOptions<WidthStyle>;
+    isShow(node: TreeNode<T, TreeNodeExtend>, needPatched: boolean): boolean;
     /**
-     * 【顶部】区域配置
-     * - 对应插槽名`top`；`mode` 为 `vertical` 时生效
-     * - 配置滚动条和高度；高度不配置时，默认 `fit-content`
-     * -
+     * 是否显示指定【树节点】的子节点
+     * - 不会判断node节点自身是否可显示
+     * @param node 要判断的节点
+     * @param needPatched 是否需要【补丁】节点。true时（补丁节点始终显示）；false时（根据hidden和搜索结果判断）
+     * @returns 能显示返回true；否则返回false
      */
-    top?: LayoutAraeOptions<HeightStyle>;
+    isShowChildren(node: TreeNode<T, TreeNodeExtend>, needPatched: boolean): boolean;
     /**
-     * 【底部】区域配置
-     * - 对应插槽名`bottom`；`mode` 为 `vertical` 时生效
-     * - 配置滚动条和高度；高度不配置时，默认 `fit-content`
+     * 获取指定【树节点】的路径
+     * @param node 树节点
+     * @returns 从【顶级节点】->【指定节点】的全路径数据
      */
-    bottom?: LayoutAraeOptions<HeightStyle>;
-};
-/**
- * 布局组件子区域 配置选项
- */
-type LayoutAraeOptions<Style extends WidthStyle | HeightStyle | void> = Style & CSSClassOptions & {
+    getPath(node: TreeNode<T, TreeNodeExtend>): TreeNode<T, TreeNodeExtend>[];
     /**
-     * 滚动视图配置
-     * - 视图属性：滚动条大小、显示时机
-     * - 滚动事件：滚动条显隐、滚动到顶部、底部、、、
-     * - 不传入则当前区域`overflow:hidden`溢出隐藏
+     * 获取指定【树节点】的唯一Key值
+     * - 相同节点确保唯一，且不变；用于唯一标记此节点
+     * @param node
+     * @returns 返回节点唯一Key值
      */
-    scroll?: ScrollOptions & EventsType<ScrollEvents>;
-};
+    getKey(node: TreeNode<T>): string;
+}
 /**
- * 布局组件的子区域项目 描述
+ * 树搜索结果
  */
-type LayoutAreaItem = {
+type TreeSearchResult<T> = {
     /**
-     * 是否可滚动
+     * 匹配上的节点集合
      */
-    scrollable: boolean;
+    matched: TreeNode<T>[];
     /**
-     * 内容区域元素的类样式名
+     * 未匹配上的节点集合
      */
-    class: string[];
+    failed: TreeNode<T>[];
     /**
-     * css样式
+     * 搜索时的【补丁】节点集合
+     * - 子节点搜索命中时，父级路径上节点没命中，则作父级路径节点作为路径修补节点存在，避免命中子节点展示不出来
+     * - 仅在有搜索条件时成立，补丁节点同时在【failed】节点集合中
      */
-    style: Record<string, string>;
+    patched: TreeNode<T>[];
 };
 
 /**
- * 动画组件配置选项
- * - 实现组件入/退场的动画效果
+ * 搜索组件配置选项
  */
-type MotionOptions = {
+type SearchOptions = ReadonlyOptions & PlaceholderOptions & {
     /**
-     * 是否是多元素模式
-     * - 为true时，则使用 TransitionGroup 组件实现多元素间动画控制
-     * - 为false时，则使用 Transition 组件实现单元素动画控制
-     */
-    multiple?: boolean;
-    /**
-     * 动画效果
-     * - 为Object时，显式指定 `enter`和`leave`样式，此时应使用`animation`实现动画样式
-     * - - 可访问`MOTION`使用内置动画效果
-     * - 为string时，为动画的根样式，实现动画效果时：
-     * - - 入场动画：`${effect}.enter-active` `${effect}.enter-from` `${effect}.enter-to`
-     * - - 退场动画：`${effect}.leave-active` `${effect}.leave-from` `${effect}.leave-to`
-     * - 为空时，使用`MOTION.fade`值；
-     */
-    effect?: MotionEffectOptions | string;
-    /**
-     * 动画持续时间，单位ms，默认200ms
-     * - `>0`时生效，否则禁用动画
-     */
-    duration?: number;
-    /**
-     * 动画模式
-     * - default（默认） 入场和退场动画同时执行
-     * - in-out 入场动画先执行，退场动画后执行
-     * - out-in 退场动画先执行，入场动画后执行
-     * - 在多个元素之间切换时生效，一个元素的显隐切换无效果
+     * 启用【自动完成】
+     * - true 时，只要文本变化了，就触发 search 事件
+     * - false 时，只有点击【搜索】按钮，才触发 search 事件
      */
-    mode?: "in-out" | "out-in" | "default";
+    autoComplete?: boolean;
 };
 /**
- * 动画效果配置选项
+ * 搜索组件事件
  */
-type MotionEffectOptions = {
-    /**
-     * 入场进入时的动画效果
-     * - 用于初始化入场动画；最终映射成 Transition 组件的 `enter-active-class` 属性
-     */
-    enter?: string;
+type SearchEvents = {
     /**
-     * 退场离开时的动画效果
-     * - 用于初始化退场动画；最终映射成 Transition 组件的 `leave-active-class` 属性
+     * 事件：执行搜索
+     * @param value 为搜索文本
      */
-    leave?: string;
+    search: [value: string];
 };
 
 /**
- * 折叠面板配置选项
- * - title          折叠面板标题
- * - disabled       禁用折叠效果，始终展开
+ * 树组件 相关实体
+ * - 基于 snail.core中的TreeNode做扩展
  */
-type FoldOptions = DisabledOptions & TitleOptions & {
+
+/**
+ * 树组件 配置选项
+ */
+type TreeOptions<T> = {
     /**
-     * 副标题
-     * - 跟随在title后
+     * 树节点 集合
      */
-    subtitle?: string;
+    nodes: TreeNodeModel<T>[];
     /**
-     * 面板头部区域配置
-     * - 如指定特定的css式
+     * 树节点搜索配置
+     * - 不配置则不启用【搜索】功能
      */
-    header?: CSSClassOptions;
+    search?: SearchOptions;
     /**
-     * 面板内容区域配置
-     * - 如指定特定的css样式
+     * 树节点的配置选项
      */
-    body?: CSSClassOptions;
+    nodeOptions?: TreeNodeRenderOptions;
 };
 /**
- * 折叠状态
- * - expand ： 展开状态
- * - fold   ： 折叠状态
+ * 树组件事件
  */
-type FoldStatus = "expand" | "fold";
+type TreeEvents<T> = TreeNodeEvents<T> & {
+    /**
+     * 搜索完成后
+     * @param text 搜索文本
+     */
+    searched: [text: string];
+};
 /**
- * 折叠面板组件插槽句柄
- * - 将折叠面板状态和操作共享给插槽中自定义组件使用
+ * 树节点 组件配置选项
  */
-type FoldSlotHandle = {
+type TreeNodeOptions<T> = {
     /**
-     * 获取折叠面板状态
-     * @returns
+     * 要渲染的树节点
      */
-    getStatus(): FoldStatus;
+    node: TreeNodeModel<T>;
     /**
-     * 设置折叠面板状态
-     * @param status 新的状态
+     * 父节点
      */
-    setStatus(status: FoldStatus): void;
+    parent?: TreeNodeModel<T>;
     /**
-     * 切换面板状态
-     * @returns 新的状态
+     * 树节点所处层级
+     * - 用于控制缩进
      */
-    toggle(): FoldStatus;
+    level: number;
+    /**
+     * 树节点的配置选项
+     */
+    options?: TreeNodeRenderOptions;
+    /**
+     * 树组件的上下文对象
+     */
+    context: ITreeBaseContext<T>;
 };
 /**
- * 折叠面板事件
+ * 树节点事件
  */
-type FoldEvents = {
+type TreeNodeEvents<T> = {
     /**
-     * 折叠状态发生改变时
-     * @param status 折叠状态
+     * 树节点 点击事件
+     * @param node 点击的树节点
+     * @param parents node的父节点路径，从【顶级父节点】->【直属父节点】
      */
-    change: [status: FoldStatus];
+    click: [node: TreeNodeModel<T>, parents?: TreeNodeModel<T>[]];
 };
-
 /**
- * 弹性布局组件配置选项
+ * 树节点数据结构
+ * - 简化外部使用 树节点 时需要频繁写 TreeNode<T, TreeNodeExtend>；
+ * - 避免和 Vue 组件“tree-node.vue”命名重复
+ * - 推荐使用时，将此对象做响应式，否则 .hidden 等 更新时，无法实时反应到树上
  */
-type FlexOptions = {
-    /**
-     * 主轴方向
-     * - css属性：flex-direction
-     * - 取值范围：
-     * - - row（默认值） 水平主轴，起点在左端
-     * - - row-reverse 水平主轴，起点在右端
-     * - - column 垂直主轴，起点在上沿
-     * - - column-reverse 垂直主轴，起点在下沿
-     */
-    direction?: "row" | "column" | "row-reverse" | "column-reverse";
-    /**
-     * 是否换行
-     * - css属性：flex-wrap
-     * - 取值范围：
-     * - - nowrap（默认值） 不换行，所有 flex 项都排在一行
-     * - - wrap 换行，第一行在上方
-     * - - wrap-reverse 换行，第一行在下方
-     */
-    wrap?: "nowrap" | "wrap" | "wrap-reverse";
+type TreeNodeModel<T> = TreeNode<T, TreeNodeExtend>;
+/**
+ * 树节点 渲染配置选项
+ */
+type TreeNodeRenderOptions = {
     /**
-     * 行与列之间的间隙（网格间距）
-     * - css属性：gap
-     * - row-gap、column-gap的缩写
-     * - 举例：gap: "10px 20px" 表示行间距为10px，列间距为20px；gap: "10px" 表示行间距和列间距都为10px
+     * 节点展开层级
+     * - 不传入则默认展开所有
+     * - 否则展开传入的层级；从2开始；第一级始终展开；如2则1、2层级展开
+     * -
      */
-    gap?: string;
+    expandLevel?: number;
     /**
-     * 主轴对齐方式
-     * - css属性：justify-content
-     * - 取值范围：
-     * - - start（默认值） 主轴起点对齐
-     * - - end 主轴终点对齐
-     * - - center 主轴居中对齐
-     * - - between 主轴两端对齐，项目之间间隔平均分布
-     * - - around 主轴每个项目两侧间隔平均分布
-     * - - evenly 主轴每个项目之间间隔平均分布
+     * 是否禁用【折叠】子节点操作
+     * - true 时禁用 折叠操作
      */
-    main?: "start" | "end" | "center" | "between" | "around" | "evenly";
+    foldDisabled?: boolean;
     /**
-     * 交叉轴对齐方式
-     * - css属性：align-items
-     * - 取值范围：
-     * - - stretch（默认值） 交叉轴拉伸对齐（如果项目未设置高度或设为 auto，将占满整个交叉轴）
-     * - - start 交叉轴起点对齐
-     * - - end 交叉轴终点对齐
-     * - - center 交叉轴居中对齐
-     * - - baseline 交叉轴第一行文字基线对齐
+     * 重写树节点
+     * - true 时，插槽作为完整树节点对象；
+     * - false 时，插槽仅作为扩展元素，如自定义操作等
      */
-    cross?: "start" | "end" | "center" | "stretch" | "baseline";
+    rewrite?: boolean;
+};
+/**
+ * 树节点 插槽配置选项
+ */
+type TreeNodeSlotOptions<Node> = {
     /**
-     * 多行时的交叉轴对齐方式
-     * - css属性：align-content
-     * - 取值范围：
-     * - - stretch（默认值） 交叉轴拉伸对齐（如果项目未设置高度或设为 auto，将占满整个交叉轴）
-     * - - start 交叉轴起点对齐
-     * - - end 交叉轴终点对齐
-     * - - center 交叉轴居中对齐
-     * - - between 交叉轴两端对齐，行之间间隔平均分布
-     * - - around 交叉轴每行两侧间隔平均分布
-     * - - evenly 交叉轴每行之间间隔平均分布
+     * 当前节点
      */
-    content?: "start" | "end" | "center" | "stretch" | "between" | "around" | "evenly";
+    node: Node;
     /**
-     * 启用子项修复
-     * - 在`justify-content`启用`space-`相关属性时，子项之间会有间隔，当子项数量较少时，可能出现空间过大的问题，特别时多行的最后一样时
-     * - 启动后，会基于子项数量补全最后一行缺失的子项数量，来修复空间过大的问题
-     * - 推荐仅在所有子项主轴方向尺寸一样时，否则修复可能不准确
+     * 父节点
      */
-    repairItem?: boolean;
+    parent?: Node;
     /**
-     * flex容器的子项数量
-     * - 配合 `repairSpace` 构建修复空间的子项数量
-     * - 当 `repairSpace` 启用时，自动监听子项数量变化来动态调整修复空间的子项数量；不启用时忽略
+     * 所处层级
      */
-    itemCount?: number;
+    level: number;
     /**
-     * flex容器的子项标签名
-     * - 配合 `repairSpace` 构建修复空间的子项元素标签名
-     * - 默认值为`div`，即子项元素为`<div>`标签
-     * - 可配置为其他标签名，如`span`，则子项元素为`<span>`标签
+     * 点击节点
      */
-    itemTag?: string;
+    click(): void;
     /**
-     * flex容器的子项类样式名
-     * - 配合 `repairSpace` 构建修复空间的子项元素类样式名
-     * - 推荐设置为一个固定值的类样式名，如`flex-item`，来方便用户通过该类样式名来设置子项元素的样式
-     * - 构建的子项，会自动追加一个 "repair-item”的类样式名，来方便用户通过该类样式名来设置修复空间子项元素的样式
+     * 切换【子节点】折叠窗台
      */
-    itemClass?: string;
+    toggle(): void;
 };
 
 /**
- * 弹性容器组件 配置选项
+ * Table配置选项
  */
-type ElasticOptions = ScrollOptions & {
+type TableOptions = Pick<ScrollOptions, "scroll" | "barSize"> & {
     /**
-     * 滚动条弹簧效果
-     * - x 仅在x轴方向上启用弹簧效果
-     * - y 仅在y轴方向上启用弹簧效果
-     * - both ：同时启用x轴和y轴的弹簧效果
+     * 是否启用表格边框
      */
-    spring?: "x" | "y" | "both";
+    border?: boolean;
     /**
-     * 是否启用【下拉刷新】功能
-     * - `spring` 为 `y/both`时生效
-     * - 满足下拉刷新条件后，触发`refresh`事件，处理完成后调用resolve函数，通知完成刷新数据操作
+     * 表头样式
+     * - 约束高度和背景颜色
+     * - 后期再增加其他的
      */
-    downRefresh?: boolean;
+    headerStyle?: BaseStyle & HeightStyle;
     /**
-     * 是否启用【上拉加载】功能
-     * - `spring` 为 `y/both`时生效
-     * - 满足上拉加载条件后，触发`more`事件，处理完成后调用resolve函数，通知完成加载数据操作
+     * 表尾部样式
+     * - 约束高度和背景颜色
+     * - 后期再增加其他的
      */
-    upMore?: boolean;
+    footerStyle?: BaseStyle & HeightStyle;
 };
 /**
- * 弹性容器组件 事件监听
+ * Table 行配置选项
  */
-type ElasticEvents = ScrollEvents & {
-    /**
-     * 刷新数据
-     * - 配合 `downRefresh`实现下拉刷新功能
-     * @param resolve 处理完成后调用resolve函数，通知完成刷新数据操作
-     */
-    refresh: [resolve: () => void];
-    /**
-     * 加载更多
-     * - 配合 `upMore`实现上拉加载功能
-     * @param resolve 处理完成后调用resolve函数，通知完成加载数据操作
-     */
-    more: [resolve: () => void];
-};
+type TableRowOptions = HeightStyle & {};
 /**
- * 弹性组件 对外暴露属性接口
+ * Table 列配置选项
+ * - border 样式需要配合TableOptions.border使用，否则会导致边框线重叠
  */
-type ElasticExpose = {
+type TableColOptions = BaseStyle & FlexBoxStyle & WidthStyle & BorderStyle & PaddingStyle;
+
+/**
+ * 排序组件 配置选项
+ * - 整理部分SortableJs中的配置，不分逻辑不开放
+ */
+type SortOptions<T> = {
     /**
-     * 加载刷新数据
-     * - 触发下拉刷新数据
-     * @returns 异步任务对象，外部感知任务执行完成
+     * 变化器
+     * - 在此元素值发生变化时，重新刷新排序面板
+     * - 如在增加元素时，改变此值实现 新元素 可拖拽排序
      */
-    loadRefresh(): Promise<void>;
+    changer: T;
     /**
-     * 加载更多数据
-     * - 触发上拉加载更多数据
-     * @returns 异步任务对象，外部感知任务执行完成
+     * 拖动哪个元素
+     * - 传入类样式选择器；如 .table-row
      */
-    loadMore(): Promise<void>;
-};
-/**
- * 弹性组件的弹簧状态信息
- */
-type ElasticSpringStatus = {
-    x: number | undefined;
+    draggable: string;
     /**
-     * y轴方向的橡皮筋效果偏移量
+     * 哪个元素启动拖拽
+     * - 传入类样式选择器；如 .sort-handle
+     * - 不传入则默认 draggable
+     * - 若自定义，则传入 draggable 下的dom元素作为启动拖拽的句柄
      */
-    y: number | undefined;
-};
-
-/**
- * 选项菜单 基础配置选项
- */
-type SelectBaseOptions<T> = {
+    handle?: string;
     /**
-     * 【选择项】集合
+     * 拖动的元素上增加的类样式
+     * - 执行拖拽时随着鼠标移动元素，脱离文档流了
+     * - 可自定义一些样式实现拖动元素的高度、宽度自定义等
+     * - 默认：snail-sort-drag
      */
-    items: SelectItem<T>[];
+    dragClass?: string;
     /**
-     * 搜索功能配置
-     * - 不配置则不启用【搜索】功能
+     * 幽灵元素类样式名称
+     * - 拖动时在面板上占位的元素
+     * - 默认：snail-sort-ghost
      */
-    search?: SearchOptions;
+    ghostClass?: string;
     /**
-     * 是否【多选模式】
-     * - 为true时，多选，【选择项】后面出【选择】框；底部出【全选】和【清空已选】
-     * - items为多级时，不支持【多选模式】；传入会报错
+     * 过滤器，不需要进行拖动的元素
+     * - 传入类样式选择器；如 .sort-handle
+     * - 实现特定子元素不触发拖动排序功能
      */
-    multiple?: boolean;
+    filter?: string;
     /**
-     * 是否显示【路径】
-     * - 为true时，显示选项的父级文本路径，用“ / ”分割
-     * - 仅针对【单选模式】生效
+     * 排序组
+     * - 组相同时，可跨组拖拽排序
+     * - 不传入，则内部生成guid
+     * - 为
      */
-    showPath?: boolean;
+    group?: string | SortGroupOptions;
     /**
-     * 是否显示【清空已选】按钮
-     * - true：则在弹窗的底部显示【清空已选】按钮，点击时清空所有已选选项
-     * - 若存在多级选项，仅在第一级弹窗中显示
+     * 动画时间
+     * - 单位ms；默认150ms
      */
-    showClear?: boolean;
+    animation?: number;
     /**
-     * 选择项 follow弹窗样式
-     * - 支持指定弹窗高度，如最大高度，不指定则默认尽可能展示全
+     * 禁用排序效果
+     * - 为true时，此容器内元素不能拖动，此不构建sortable实例
      */
-    popupStyle?: HeightStyle;
-};
-/**
- * 选项菜单 基础事件
- */
-type SelectBaseEvents<T> = {
+    disabled?: boolean;
     /**
-     * 选中的【选择项】改变时
-     * - @param values 已选的【选择项】，未选中则为空数组：单选时，为【选择项】路径（父->子）；其他情况为已选的【选择项】
+     * 在当前容器内是否禁用拖拽排序
+     * - 为true时，此容器内部不能拖拽，但可拖动到其他同名group内
+     * - 初期想用sort，但作Vue组件属性时，bool类型不传值会自动默认false，和初衷不符
      */
-    change: [values: SelectItem<T>[]];
+    sortDisabled?: boolean;
 };
 /**
- * 选项菜单组件的【选择项】
+ * 排序组件的Group属性配置选项
  */
-type SelectItem<T> = TreeNode<T, TreeNodeExtend & {
+type SortGroupOptions = {
     /**
-    * 节点类型
-    * - group  分组选择项；可包含子节点
-    * - item   选择项；默认值；不可包含子节点，即使传入也会忽略
-    */
-    type?: "group" | "item";
-}>;
-/**
- * 选项菜单组件 配置选项
- * - value 已选的【选择项】;单选时，为【选择项】路径（父->子）；其他情况为已选的【选择项】
- */
-type SelectOptions<T> = ReadonlyOptions & PlaceholderOptions & SelectBaseOptions<T> & ValueOptions<SelectItem<T>[]> & {
-    /** 父类<see cref="SelectBaseOptions"/>已有属性：
-     *      items                   【选择项】集合
-     *      search                  启用 【搜索】功能
-     *      searchPlaceholder       搜索框提示语
-     *      multiple                是否【多选模式】
-     *      showPath                显示选项路径
-     *      popupStyle              弹出的选项选择窗体样式
+     * 排序组名称；
+     * - 不传入时自动生成
      */
+    name: string;
     /**
-     * 选项分隔符
-     * - 单选有多级时的分割路径；默认为 /
-     * - 多选时分割多个选项；默认为 、
+     * 定义从这个列表容器移动出去的设置
+     * - true:列表容器内的列表单元可以被移出；
+     * - false：列表容器内的列表单元不可以被移出；
+     * - "clone"：列表单元移出，移动的为该元素的副本；
+     * - function：用来进行pull的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否移出；
      */
-    separator?: string;
+    pull: true | false | "clone" | SortGroupHook;
+    /**
+     * 用来定义往这个列表容器放置列表单元的的设置
+     * - true:列表容器可以从其他列表容器内放入列表单元；
+     * - false：与true相反；
+     * - string|string[]：代表的是group配置项里定义的name值。如['foo','bar']
+     * - function：用来进行put的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否放入；
+     */
+    put: true | false | string | string[] | SortGroupHook;
 };
 /**
- * 选项菜单 组件 事件
+ * 排序组件的Group属性钩子
+ * - 用于pull和put中使用，返回false时不执行pull、put操作
+ * - @param item 移动的元素
+ * - @param to 目标容器dom元素
+ * - @param from 来源容器dom元素
  */
-type SelectEvents<T> = SelectBaseEvents<T> & {};
+type SortGroupHook = (item: HTMLElement, to: HTMLElement, from: HTMLElement) => void;
 /**
- * 选项菜单 组件的Slot配置选项
+ * 排序组件 事件
  */
-type SelectSlotOptions = {
+type SortEvents = {
     /**
-     * 清空已选【选择项】
-     * @param closeFollow 是否关闭【选择项】Follow弹窗
-     * @param stopPropagation 是否停止事件冒泡
+     * 开始拖拽
      */
-    clear(closeFollow: boolean, stopPropagation: boolean): void;
-};
-/**
- * 【选项菜单】 组件上下文
- */
-interface ISelectContext<T> extends ITreeBaseContext<T> {
+    start: [evt: SortEvent];
     /**
-     * 指定节点是否选中了
-     * @param multiple 是否是【多选模式】
-     * @param item 要判断的节点
-     * @returns true 选中，false 未选中
+     * 移动中
      */
-    selected(multiple: boolean, item: SelectItem<T>): boolean;
+    move: [evt: SortEvent, originalEvent: SortEvent];
     /**
-     * 获取已选【选择项】的展示文本
-     * @param multiple 是否是【多选模式】
-     * @param showPath 是否显示路径
-     * @returns 已选【选择项】的展示文本
+     * 移动到新容器时
      */
-    selectedText(multiple: boolean, showPath: boolean): string;
-}
-/**
- * 【选项菜单】 弹窗组件配置选项
- */
-type SelectPopupOptions<T> = SelectBaseOptions<T> & {
-    /** 父类<see cref="SelectBaseOptions"/>已有属性：
-     *      items                   选择项 集合
-     *      search                  启用 【搜索】功能
-     *      searchPlaceholder       搜索框提示语
-     *      multiple                是否【多选模式】
+    add: [evt: SortEvent];
+    /**
+     * 从当前容器移除时
      */
+    remove: [evt: SortEvent];
     /**
-     * 树形上下文
+     * 结束拖拽
      */
-    context: ISelectContext<T>;
+    end: [evt: SortEvent];
     /**
-     * 第几级 选项弹窗
-     * - 从1开始
+     * 元素排序顺序变化
+     * @param oldIndex 旧位置索引值
+     * @param newIndex 新顺序索引值
      */
-    level: number;
+    update: [oldIndex: number, newIndex: number];
 };
 /**
- * 【选项菜单】 弹窗组件事件
+ * 排序事件对象
  */
-type SelectPopupEvents<T> = {
+type SortEvent = {
     /**
-     * 清空选项
+     * 目标容器
      */
-    clear: [];
+    to: HTMLElement;
     /**
-     * 选项点击事件
-     * @param path 选中的【选择项】路径；父->子
+     * 来源容器
      */
-    click: [path: SelectItem<T>[]];
-};
-/**
- * 【选项菜单】 弹窗组件扩展
- */
-type SelectPopupExtend = {
+    from: HTMLElement;
     /**
-     * 子选项弹窗的销毁定时器
-     * - 父级弹窗可根据需要销毁定时器，取消子选择弹窗销毁
-     * - 鼠标离开弹窗时，做延迟销毁；避免回到 此弹窗 的父【选择项】时，又重新打开此弹窗
+     * 被移动的元素
+     * - 在`group.pull`配置为 clone 时，此值为原始元素，复制元素放到原来位置了
      */
-    childDestroyTimer: ShallowRef<IScope>;
+    item: HTMLElement;
     /**
-     * 父级弹窗的pin状态
-     * - 可在子弹窗中设置为true，这样父级弹窗就不会自动关闭了
+     * 副本的元素
+     * - 在`group.pull`配置为 clone 时
      */
-    parentPinned: ShallowRef<boolean>;
+    clone: HTMLElement;
+    /**
+     * 容器中的原序号
+     */
+    oldIndex: number | undefined;
+    /**
+     * 容器中的新序号
+     */
+    newIndex: number | undefined;
 };
+
 /**
- * 【选项菜单】节点 组件配置选项
+ * 布局组件 数据结构
  */
-type SelectNodeOptions<T> = {
+
+/**
+ * 布局组件 配置选项
+ */
+type LayoutOptions = {
     /**
-     * 是否为【多选模式】
+     * 布局方向
+     * - horizontal 水平布局：左中右
+     * - vertical 垂直布局：上中下
+     * - 默认为 `horizontal`
      */
-    multiple: boolean;
+    direction?: "horizontal" | "vertical";
     /**
-     * 要展示的节点
+     * 主内容区域配置
+     * - 对应插槽名：main；主要内容显示区域，处于布局中的【中】区域
+     * - 配置主内容区域的滚动条配置
      */
-    item: SelectItem<T>;
+    main?: Pick<LayoutAraeOptions<void>, "scroll" | "class">;
     /**
-     * 树形上下文
+     * 【左侧】区域配置
+     * - 对应插槽名`left` ；`mode` 为 `horizontal` 时生效
+     * - 配置滚动条和宽度；宽度不配置时，默认 `fit-content`
+     * -
      */
-    context: ISelectContext<T>;
+    left?: LayoutAraeOptions<WidthStyle>;
     /**
-     * 是否显示子节点
+     * 【右测】区域配置
+     * - 对应插槽名`right` ；`mode` 为 `horizontal` 时生效
+     * - 配置滚动条和宽度；宽度不配置时，默认 `fit-content`
      */
-    showChildren: boolean;
-};
-/**
- * 【选项菜单】节点 组件事件
- */
-type SelectNodeEvents<T> = {
+    right?: LayoutAraeOptions<WidthStyle>;
     /**
-     * 鼠标进入事件
-     * @param el 【选择项】节点dom元素
-     * @param item 【选择项】
-     * @param parent 父节点
+     * 【顶部】区域配置
+     * - 对应插槽名`top`；`mode` 为 `vertical` 时生效
+     * - 配置滚动条和高度；高度不配置时，默认 `fit-content`
+     * -
      */
-    enter: [el: HTMLDivElement, item: SelectItem<T>, parent?: SelectItem<T>];
+    top?: LayoutAraeOptions<HeightStyle>;
     /**
-     * 点击事件
-     * @param item 【选择项】
-     * @param parent 父节点
+     * 【底部】区域配置
+     * - 对应插槽名`bottom`；`mode` 为 `vertical` 时生效
+     * - 配置滚动条和高度；高度不配置时，默认 `fit-content`
      */
-    click: [item: SelectItem<T>, parent?: SelectItem<T>];
+    bottom?: LayoutAraeOptions<HeightStyle>;
 };
-
-/**
- * 基础事件实体
- *  1、把一些常用事件，封装为原子结构，方便复用
- *  2、不强制必须复用，根据自身情况
- */
 /**
- * 事件：点击
+ * 布局组件子区域 配置选项
  */
-type ClickEvents = {
+type LayoutAraeOptions<Style extends WidthStyle | HeightStyle | void> = Style & CSSClassOptions & {
     /**
-     * 单击事件
+     * 滚动视图配置
+     * - 视图属性：滚动条大小、显示时机
+     * - 滚动事件：滚动条显隐、滚动到顶部、底部、、、
+     * - 不传入则当前区域`overflow:hidden`溢出隐藏
      */
-    click: [];
+    scroll?: ScrollOptions & EventsType<ScrollEvents>;
 };
 /**
- * 事件：值改变
- * - 描述值的改变过程，新值是什么，改变前的旧值是什么
+ * 布局组件的子区域项目 描述
  */
-type ChangeEvents<T> = {
+type LayoutAreaItem = {
     /**
-     * 值改变；约束新旧值
-     * @param newValue 新值
-     * @param oldValue 旧值
+     * 是否可滚动
      */
-    change: [newValue: T, oldValue?: T];
-};
-/**
- * 事件：移动
- * - 可描述数据索引位置变化
- * - 可用于数组元素拖动排序，调整位置等逻辑
- */
-type MoveEvents = {
+    scrollable: boolean;
     /**
-     * 移动事件
-     * @param fromIndex 从哪个索引位置开始移动
-     * @param toIndex 移动到的索引位置
+     * 内容区域元素的类样式名
      */
-    move: [fromIndex: number, toIndex: number];
-};
-/**
- * 事件：删除数据
- * - 描述要删除的具体数据
- */
-type DeleteEvents<T> = {
+    class: string[];
     /**
-     * 删除事件
-     * @param value 要删除的数据
+     * css样式
      */
-    delete: [value?: T];
+    style: Record<string, string>;
 };
+
 /**
- * 事件：关闭
+ * 动画组件配置选项
+ * - 实现组件入/退场的动画效果
  */
-type CloseEvents = {
+type MotionOptions = {
     /**
-     * 关闭事件
+     * 是否是多元素模式
+     * - 为true时，则使用 TransitionGroup 组件实现多元素间动画控制
+     * - 为false时，则使用 Transition 组件实现单元素动画控制
      */
-    close: [];
-};
-
-/**
- * 数值控件的数据结构
- */
-
-/**
- * 数值组件的基础配置选项
- */
-type NumberBaseOptions = {
+    multiple?: boolean;
     /**
-     * 最小值
+     * 动画效果
+     * - 为Object时，显式指定 `enter`和`leave`样式，此时应使用`animation`实现动画样式
+     * - - 可访问`MOTION`使用内置动画效果
+     * - 为string时，为动画的根样式，实现动画效果时：
+     * - - 入场动画：`${effect}.enter-active` `${effect}.enter-from` `${effect}.enter-to`
+     * - - 退场动画：`${effect}.leave-active` `${effect}.leave-from` `${effect}.leave-to`
+     * - 为空时，使用`MOTION.fade`值；
      */
-    minValue?: number;
+    effect?: MotionEffectOptions | string;
     /**
-     * 最大值
+     * 动画持续时间，单位ms，默认200ms
+     * - `>0`时生效，否则禁用动画
      */
-    maxValue?: number;
+    duration?: number;
     /**
-     * 值超过阈值（最大值、最小值）时的处理模式
-     * - 默认值为 `keep`；可选取值范围：
-     * - - `keep` 保持原样值显示，不做任何处理
-     * - - `clamp` 截断超出阈值值，低于最小值时直接取最小值，超过最大值时，强制值为最大值
-     * - 值超过阈值时，会自动触发事件，事件名`NumberEvents`的`belowMin`和`exceedMax`
+     * 动画模式
+     * - default（默认） 入场和退场动画同时执行
+     * - in-out 入场动画先执行，退场动画后执行
+     * - out-in 退场动画先执行，入场动画后执行
+     * - 在多个元素之间切换时生效，一个元素的显隐切换无效果
      */
-    clamp?: "keep" | "clamp";
+    mode?: "in-out" | "out-in" | "default";
+};
+/**
+ * 动画效果配置选项
+ */
+type MotionEffectOptions = {
     /**
-     * 精度，保留几位小数
-     * - 要求0、正整数,输入小数则强制整数
-     * - 负数、不传入则不处理
+     * 入场进入时的动画效果
+     * - 用于初始化入场动画；最终映射成 Transition 组件的 `enter-active-class` 属性
      */
-    precision?: number;
+    enter?: string;
     /**
-     * 对数值进行千分位格式处理
-     * - 默认值为 `disabled`；可选值范围：
-     * - `disabled` 禁用千分位功能
-     * - `inline`  内联千分位功能
-     * - `below`  下拉千分位功能
+     * 退场离开时的动画效果
+     * - 用于初始化退场动画；最终映射成 Transition 组件的 `leave-active-class` 属性
      */
-    thousands?: "disabled" | "inline" | "below";
+    leave?: string;
+};
+
+/**
+ * 折叠面板配置选项
+ * - title          折叠面板标题
+ * - disabled       禁用折叠效果，始终展开
+ */
+type FoldOptions = DisabledOptions & TitleOptions & {
     /**
-     * 是否启用数值大写格式化处理
-     * - 为true时，转成中文大写值
-     * - 单位自动为“元”，不支持美元等
-     * - 如金额时，自动转为壹仟壹佰壹拾壹元叁角叁分
-     * - 小数点后面只处理两位（角分）；剩余不处理
+     * 副标题
+     * - 跟随在title后
      */
-    upper?: boolean;
+    subtitle?: string;
     /**
-     * 格式化时的放大系数
-     * - 用于在格式化千分位、大写时，对实际值进行系数放大，value*formatMultiplier
-     * - 仅接收正整数，取值规则为10^n，默认1
-     * - 千分位格式化时，仅`thousands`为`below`时才进行放到系数处理
-     * - 使用示例例：金额是为万元单位时，这里的放大系数就为 “10000”
+     * 面板头部区域配置
+     * - 如指定特定的css式
      */
-    formatMultiplier?: number;
+    header?: CSSClassOptions;
     /**
-     * 前缀字符串
-     * - 如金额时，可配置前缀 ￥
+     * 面板内容区域配置
+     * - 如指定特定的css样式
      */
-    prefix?: string;
+    body?: CSSClassOptions;
+};
+/**
+ * 折叠状态
+ * - expand ： 展开状态
+ * - fold   ： 折叠状态
+ */
+type FoldStatus = "expand" | "fold";
+/**
+ * 折叠面板组件插槽句柄
+ * - 将折叠面板状态和操作共享给插槽中自定义组件使用
+ */
+type FoldSlotHandle = {
     /**
-     * 后缀字符串
-     * - 如金额时，可配置后缀 元/美元、、
+     * 获取折叠面板状态
+     * @returns
      */
-    suffix?: string;
+    getStatus(): FoldStatus;
     /**
-     * 数值控制器
-     * - 便捷加减调整数值的控制按钮
-     * - 默认值`disabled`；可选值范围：
-     * - - `disabled` 时禁用
-     * - - `default` 默认模式，左侧 — 右侧 +
-     * - - `right`   右侧模式，+ - 都在右侧
+     * 设置折叠面板状态
+     * @param status 新的状态
      */
-    controls?: "disabled" | "default" | "right";
+    setStatus(status: FoldStatus): void;
     /**
-     * 数值步长值
-     * - `controls` 未禁用时生效
-     * - 每次+、- 的步长值
+     * 切换面板状态
+     * @returns 新的状态
      */
-    step?: number;
+    toggle(): FoldStatus;
 };
 /**
- * 数值组件的配置选项
+ * 折叠面板事件
  */
-type NumberOptions = PlaceholderOptions & ReadonlyOptions & NumberBaseOptions;
+type FoldEvents = {
+    /**
+     * 折叠状态发生改变时
+     * @param status 折叠状态
+     */
+    change: [status: FoldStatus];
+};
+
 /**
- * 接口：数值格式化器
+ * 弹性布局组件配置选项
  */
-interface INumberFormatter extends Required<Readonly<Pick<NumberBaseOptions, "minValue" | "maxValue" | "precision" | "thousands" | "upper">>> {
+type FlexOptions = {
     /**
-     * 格式化输入文本
-     * @param text 输入文本
-     * @param isEnd 是否是输入结束，true时，已经输入结束将进行数值精度处理
-     * @returns 数值格式化结果
+     * 主轴方向
+     * - css属性：flex-direction
+     * - 取值范围：
+     * - - row（默认值） 水平主轴，起点在左端
+     * - - row-reverse 水平主轴，起点在右端
+     * - - column 垂直主轴，起点在上沿
+     * - - column-reverse 垂直主轴，起点在下沿
      */
-    format(text: string, isEnd: boolean): NumberFormatResult;
+    direction?: "row" | "column" | "row-reverse" | "column-reverse";
     /**
-     * 进行阈值检测，检测是否超过设定的最大值、最小值
-     * @param number 要检测的数值
-     * @returns 检测结果，`number` 新的值，`belowMin`是否低于最小值，`exceedMax`是否超过最大值
+     * 是否换行
+     * - css属性：flex-wrap
+     * - 取值范围：
+     * - - nowrap（默认值） 不换行，所有 flex 项都排在一行
+     * - - wrap 换行，第一行在上方
+     * - - wrap-reverse 换行，第一行在下方
      */
-    checkThreshold(number: any): {
-        number: number;
-        belowMin: boolean;
-        exceedMax: boolean;
-    };
+    wrap?: "nowrap" | "wrap" | "wrap-reverse";
     /**
-     * 对数值文本转大写
-     * @param result
-     * @returns 大写文本值
+     * 行与列之间的间隙（网格间距）
+     * - css属性：gap
+     * - row-gap、column-gap的缩写
+     * - 举例：gap: "10px 20px" 表示行间距为10px，列间距为20px；gap: "10px" 表示行间距和列间距都为10px
      */
-    buildUpper(result: NumberFormatResult): string;
+    gap?: string;
     /**
-     * 对数值文本进行千分位格式化
-     * @param result
-     * @returns 格式化后的文本值
+     * 主轴对齐方式
+     * - css属性：justify-content
+     * - 取值范围：
+     * - - start（默认值） 主轴起点对齐
+     * - - end 主轴终点对齐
+     * - - center 主轴居中对齐
+     * - - between 主轴两端对齐，项目之间间隔平均分布
+     * - - around 主轴每个项目两侧间隔平均分布
+     * - - evenly 主轴每个项目之间间隔平均分布
      */
-    buildThousands(result: NumberFormatResult): string;
+    main?: "start" | "end" | "center" | "between" | "around" | "evenly";
     /**
-     * 基于步长计算值
-     * @param number 要重新计算的数值
-     * @param isPlus true为+，false为-
-     * @returns 新的数值
+     * 交叉轴对齐方式
+     * - css属性：align-items
+     * - 取值范围：
+     * - - stretch（默认值） 交叉轴拉伸对齐（如果项目未设置高度或设为 auto，将占满整个交叉轴）
+     * - - start 交叉轴起点对齐
+     * - - end 交叉轴终点对齐
+     * - - center 交叉轴居中对齐
+     * - - baseline 交叉轴第一行文字基线对齐
      */
-    calcByStep(number: number, isPlus: boolean): number;
-}
-/**
- * 数值格式化结果
- */
-type NumberFormatResult = {
+    cross?: "start" | "end" | "center" | "stretch" | "baseline";
     /**
-     * 输入是否是有效输入
-     * - `- 0 1 2 3 4 5 6 7 8 9  0 .`算是合法输入
+     * 多行时的交叉轴对齐方式
+     * - css属性：align-content
+     * - 取值范围：
+     * - - stretch（默认值） 交叉轴拉伸对齐（如果项目未设置高度或设为 auto，将占满整个交叉轴）
+     * - - start 交叉轴起点对齐
+     * - - end 交叉轴终点对齐
+     * - - center 交叉轴居中对齐
+     * - - between 交叉轴两端对齐，行之间间隔平均分布
+     * - - around 交叉轴每行两侧间隔平均分布
+     * - - evenly 交叉轴每行之间间隔平均分布
      */
-    readonly valid: boolean;
+    content?: "start" | "end" | "center" | "stretch" | "between" | "around" | "evenly";
     /**
-     * 有效的数值
-     * - undefined时，输入无法转换成有效的数值
+     * 启用子项修复
+     * - 在`justify-content`启用`space-`相关属性时，子项之间会有间隔，当子项数量较少时，可能出现空间过大的问题，特别时多行的最后一样时
+     * - 启动后，会基于子项数量补全最后一行缺失的子项数量，来修复空间过大的问题
+     * - 推荐仅在所有子项主轴方向尺寸一样时，否则修复可能不准确
      */
-    readonly number: number | undefined;
+    repairItem?: boolean;
     /**
-     * 数值的显示文本
-     * - 无千分位等处理的数值显示文本
-     * - 若需要在行内显示 千分位 格式文本，需要单独处理
+     * flex容器的子项数量
+     * - 配合 `repairSpace` 构建修复空间的子项数量
+     * - 当 `repairSpace` 启用时，自动监听子项数量变化来动态调整修复空间的子项数量；不启用时忽略
      */
-    readonly text: string;
+    itemCount?: number;
     /**
-     * 格式化数值时发生的错误
-     * - 输入数值有效，但是格式化时发生错误了
+     * flex容器的子项标签名
+     * - 配合 `repairSpace` 构建修复空间的子项元素标签名
+     * - 默认值为`div`，即子项元素为`<div>`标签
+     * - 可配置为其他标签名，如`span`，则子项元素为`<span>`标签
      */
-    readonly error?: string;
+    itemTag?: string;
     /**
-     * 是否是负数
-     * - true 时说明以`-`开始；false时为正数
-     * - 若为true，但`integerPart`为undefined，则说明仅输入了`-`
+     * flex容器的子项类样式名
+     * - 配合 `repairSpace` 构建修复空间的子项元素类样式名
+     * - 推荐设置为一个固定值的类样式名，如`flex-item`，来方便用户通过该类样式名来设置子项元素的样式
+     * - 构建的子项，会自动追加一个 "repair-item”的类样式名，来方便用户通过该类样式名来设置修复空间子项元素的样式
      */
-    readonly isNegative?: boolean;
+    itemClass?: string;
+};
+
+/**
+ * 弹性容器组件 配置选项
+ */
+type ElasticOptions = ScrollOptions & {
     /**
-     * 是否是小数
-     * - true 时说明有小数点“.”；false 时为整数
-     * - 若为true，但`decimalPart`为undefined，则说明是以`.`结尾，还没输入具体的小数部分
+     * 滚动条弹簧效果
+     * - x 仅在x轴方向上启用弹簧效果
+     * - y 仅在y轴方向上启用弹簧效果
+     * - both ：同时启用x轴和y轴的弹簧效果
      */
-    readonly isDecimal?: boolean;
+    spring?: "x" | "y" | "both";
     /**
-     * 数值输入的整数部分
-     * - 取整数部分绝对值，如-1.2，仅为1
+     * 是否启用【下拉刷新】功能
+     * - `spring` 为 `y/both`时生效
+     * - 满足下拉刷新条件后，触发`refresh`事件，处理完成后调用resolve函数，通知完成刷新数据操作
      */
-    readonly integerPart?: string;
+    downRefresh?: boolean;
     /**
-     * 小数部分
+     * 是否启用【上拉加载】功能
+     * - `spring` 为 `y/both`时生效
+     * - 满足上拉加载条件后，触发`more`事件，处理完成后调用resolve函数，通知完成加载数据操作
      */
-    readonly decimalPart?: string;
+    upMore?: boolean;
+};
+/**
+ * 弹性容器组件 事件监听
+ */
+type ElasticEvents = ScrollEvents & {
     /**
-     * 进行系数放大后的整数部分
+     * 刷新数据
+     * - 配合 `downRefresh`实现下拉刷新功能
+     * @param resolve 处理完成后调用resolve函数，通知完成刷新数据操作
      */
-    readonly integerPartAfterMultiplier?: string;
+    refresh: [resolve: () => void];
     /**
-     * 进行系数放大后的小数部分
+     * 加载更多
+     * - 配合 `upMore`实现上拉加载功能
+     * @param resolve 处理完成后调用resolve函数，通知完成加载数据操作
      */
-    readonly decimalPartAfterMultiplier?: string;
+    more: [resolve: () => void];
 };
 /**
- * 数值组件的事件选项
+ * 弹性组件 对外暴露属性接口
  */
-type NumberEvents = ChangeEvents<number> & {
+type ElasticExpose = {
     /**
-     * 数值发生错误时
-     * - 若超过最大的精度范围
-     * - 其他未知异常等
-     * @param reason 错误原因
+     * 加载刷新数据
+     * - 触发下拉刷新数据
+     * @returns 异步任务对象，外部感知任务执行完成
      */
-    error: [reason: string];
+    loadRefresh(): Promise<void>;
     /**
-     * 小于最小值
-     * @param value 当前值
-     * @param minValue 最小值
+     * 加载更多数据
+     * - 触发上拉加载更多数据
+     * @returns 异步任务对象，外部感知任务执行完成
      */
-    belowMin: [value: number, minValue: number];
+    loadMore(): Promise<void>;
+};
+/**
+ * 弹性组件的弹簧状态信息
+ */
+type ElasticSpringStatus = {
+    x: number | undefined;
     /**
-     * 超过最大值
-     * @param value 当前值
-     * @param maxValue 最大值
+     * y轴方向的橡皮筋效果偏移量
      */
-    exceedMax: [value: number, maxValue: number];
+    y: number | undefined;
 };
 
 /**
- * 图标配置选项
- * - title          作为鼠标移入图标时的提示
+ * 选项菜单 基础配置选项
  */
-type IconOptions = TitleOptions & {
+type SelectBaseOptions<T> = {
     /**
-     * 是否为自定义图标
-     * - 为true时，外部通过插槽自己绘制图标
-     * - 为false时，使用`type`值绘制对应的内置图标
-     * - 默认false
+     * 【选择项】集合
      */
-    custom?: boolean;
+    items: SelectItem<T>[];
     /**
-     * 内置的图标类型
-     * - `custom`为false时生效
+     * 搜索功能配置
+     * - 不配置则不启用【搜索】功能
      */
-    type?: IconType;
+    search?: SearchOptions;
     /**
-     * 是否是按钮图标
-     * - true时，鼠标移入时 cursor:pointer;
+     * 是否【多选模式】
+     * - 为true时，多选，【选择项】后面出【选择】框；底部出【全选】和【清空已选】
+     * - items为多级时，不支持【多选模式】；传入会报错
      */
-    button?: boolean;
+    multiple?: boolean;
     /**
-     * 图标大小
-     * - 可指定对象，如 { width: 24, height: 24 }，则图标大小为 24 * 24
-     * - 可指定数字，如 24，则图标大小为 24 * 24
-     * - 默认 24
+     * 是否显示【路径】
+     * - 为true时，显示选项的父级文本路径，用“ / ”分割
+     * - 仅针对【单选模式】生效
      */
-    size?: number | {
-        width?: number;
-        height?: number;
-    };
+    showPath?: boolean;
     /**
-     * 图标颜色
+     * 是否显示【清空已选】按钮
+     * - true：则在弹窗的底部显示【清空已选】按钮，点击时清空所有已选选项
+     * - 若存在多级选项，仅在第一级弹窗中显示
      */
-    color?: string;
+    showClear?: boolean;
     /**
-     * 鼠标移入时的图标颜色
+     * 选择项 follow弹窗样式
+     * - 支持指定弹窗高度，如最大高度，不指定则默认尽可能展示全
      */
-    hoverColor?: string;
+    popupStyle?: HeightStyle;
+};
+/**
+ * 选项菜单 基础事件
+ */
+type SelectBaseEvents<T> = {
     /**
-     * 旋转角度
-     * - 默认0
-     * - 通过：transform: rotate(1.06); 实现
+     * 选中的【选择项】改变时
+     * - @param values 已选的【选择项】，未选中则为空数组：单选时，为【选择项】路径（父->子）；其他情况为已选的【选择项】
      */
-    rotate?: number;
+    change: [values: SelectItem<T>[]];
+};
+/**
+ * 选项菜单组件的【选择项】
+ */
+type SelectItem<T> = TreeNode<T, TreeNodeExtend & {
     /**
-     * 图标透明度
-     * - 不传入，默认1
+    * 节点类型
+    * - group  分组选择项；可包含子节点
+    * - item   选择项；默认值；不可包含子节点，即使传入也会忽略
+    */
+    type?: "group" | "item";
+}>;
+/**
+ * 选项菜单组件 配置选项
+ * - value 已选的【选择项】;单选时，为【选择项】路径（父->子）；其他情况为已选的【选择项】
+ */
+type SelectOptions<T> = ReadonlyOptions & PlaceholderOptions & SelectBaseOptions<T> & ValueOptions<SelectItem<T>[]> & {
+    /** 父类<see cref="SelectBaseOptions"/>已有属性：
+     *      items                   【选择项】集合
+     *      search                  启用 【搜索】功能
+     *      searchPlaceholder       搜索框提示语
+     *      multiple                是否【多选模式】
+     *      showPath                显示选项路径
+     *      popupStyle              弹出的选项选择窗体样式
      */
-    opacity?: number;
     /**
-     * 图标边样式
+     * 选项分隔符
+     * - 单选有多级时的分割路径；默认为 /
+     * - 多选时分割多个选项；默认为 、
      */
-    border?: string;
+    separator?: string;
+};
+/**
+ * 选项菜单 组件 事件
+ */
+type SelectEvents<T> = SelectBaseEvents<T> & {};
+/**
+ * 选项菜单 组件的Slot配置选项
+ */
+type SelectSlotOptions = {
     /**
-     * 图标圆角样式
+     * 清空已选【选择项】
+     * @param closeFollow 是否关闭【选择项】Follow弹窗
+     * @param stopPropagation 是否停止事件冒泡
      */
-    radius?: string;
+    clear(closeFollow: boolean, stopPropagation: boolean): void;
+};
+/**
+ * 【选项菜单】 组件上下文
+ */
+interface ISelectContext<T> extends ITreeBaseContext<T> {
     /**
-     * 图标背景样式
+     * 指定节点是否选中了
+     * @param multiple 是否是【多选模式】
+     * @param item 要判断的节点
+     * @returns true 选中，false 未选中
      */
-    background?: string;
+    selected(multiple: boolean, item: SelectItem<T>): boolean;
     /**
-     * 图形伸展
-     * - svg.viewBox 属性
-     * - 为空则默认“0 0 1024 1024”
+     * 获取已选【选择项】的展示文本
+     * @param multiple 是否是【多选模式】
+     * @param showPath 是否显示路径
+     * @returns 已选【选择项】的展示文本
      */
-    viewBox?: string;
-};
-/**
- * 图标类型
- * - 状态类：
- * - - success      成功图标，对勾
- * - - error        错误
- * - - warn         警告图标
- * - 操作类：
- * - - close        关闭 用作数据删除，弹窗关闭
- * - - trash        垃圾桶图标，常用于【删除】操作
- * - - download     下载
- * - - print        打印
- * - - edit         编辑
- * - - pause        暂停，两道竖线
- * - 指向类：
- * - - arrow        向右箭头
- * - - datepicker   日期选择器
- * - - timepicker   时间选择器
- * - 其他类：
- * - - plus         加号
- * - - subtract     减号
- * - - more         更多，默认垂直三个点
- * - - grip         紧握图标，垂直方向，一般用于拖动句柄
+    selectedText(multiple: boolean, showPath: boolean): string;
+}
+/**
+ * 【选项菜单】 弹窗组件配置选项
  */
-type IconType = "success" | "error" | "warn" | "close" | "trash" | "download" | "print" | "edit" | "pause" | "arrow" | "datepicker" | "timepicker" | "plus" | "subtract" | "more" | "grip";
-
+type SelectPopupOptions<T> = SelectBaseOptions<T> & {
+    /** 父类<see cref="SelectBaseOptions"/>已有属性：
+     *      items                   选择项 集合
+     *      search                  启用 【搜索】功能
+     *      searchPlaceholder       搜索框提示语
+     *      multiple                是否【多选模式】
+     */
+    /**
+     * 树形上下文
+     */
+    context: ISelectContext<T>;
+    /**
+     * 第几级 选项弹窗
+     * - 从1开始
+     */
+    level: number;
+};
 /**
- * 检查选项 数据结构
+ * 【选项菜单】 弹窗组件事件
  */
-
+type SelectPopupEvents<T> = {
+    /**
+     * 清空选项
+     */
+    clear: [];
+    /**
+     * 选项点击事件
+     * @param path 选中的【选择项】路径；父->子
+     */
+    click: [path: SelectItem<T>[]];
+};
 /**
- * 选择 组件配置选项
+ * 【选项菜单】 弹窗组件扩展
  */
-type ChooseOptions<T> = ReadonlyOptions & {
+type SelectPopupExtend = {
     /**
-     * 是否为多选模式
-     * - true 多选模式，可以选中items中多个选项
-     * - false 单选模式，只能选中items中的一个选项
+     * 子选项弹窗的销毁定时器
+     * - 父级弹窗可根据需要销毁定时器，取消子选择弹窗销毁
+     * - 鼠标离开弹窗时，做延迟销毁；避免回到 此弹窗 的父【选择项】时，又重新打开此弹窗
      */
-    multi?: boolean;
+    childDestroyTimer: ShallowRef<IScope>;
     /**
-     * 选项类型
-     * - radio:     单选框样式
-     * - checkbox:  多选框样式
+     * 父级弹窗的pin状态
+     * - 可在子弹窗中设置为true，这样父级弹窗就不会自动关闭了
      */
-    type: "radio" | "checkbox";
+    parentPinned: ShallowRef<boolean>;
+};
+/**
+ * 【选项菜单】节点 组件配置选项
+ */
+type SelectNodeOptions<T> = {
     /**
-     * 显示模式
-     * - native     原生默认，浏览器自己渲染；不同浏览器效果不一致
-     * - beautiful  美化模式，不同浏览器下效果通义
+     * 是否为【多选模式】
      */
-    mode?: "native" | "beautiful";
+    multiple: boolean;
     /**
-     * 选项布局
-     * - 默认值：horizontal
-     * - 可选值：
-     * - - horizontal 水平布局；所有选项一行
-     * - - vertical   垂直布局；每个选项一行
+     * 要展示的节点
      */
-    layout?: "horizontal" | "vertical";
+    item: SelectItem<T>;
     /**
-     * 待选项目
-     * text 可不传入
+     * 树形上下文
      */
-    items: ChooseItem<T>[];
+    context: ISelectContext<T>;
     /**
-     * 选项自定义样式
-     * - 可指定选项宽度、高度、外边距
+     * 是否显示子节点
      */
-    itemStyle?: WidthStyle & HeightStyle & MarginStyle;
+    showChildren: boolean;
 };
 /**
- * 选择项
+ * 【选项菜单】节点 组件事件
  */
-type ChooseItem<T> = {
+type SelectNodeEvents<T> = {
     /**
-     * 选项文本
+     * 鼠标进入事件
+     * @param el 【选择项】节点dom元素
+     * @param item 【选择项】
+     * @param parent 父节点
      */
-    text?: string;
+    enter: [el: HTMLDivElement, item: SelectItem<T>, parent?: SelectItem<T>];
     /**
-     * 选项值
+     * 点击事件
+     * @param item 【选择项】
+     * @param parent 父节点
      */
-    value: T;
+    click: [item: SelectItem<T>, parent?: SelectItem<T>];
+};
+
+/**
+ * 基础事件实体
+ *  1、把一些常用事件，封装为原子结构，方便复用
+ *  2、不强制必须复用，根据自身情况
+ */
+/**
+ * 事件：点击
+ */
+type ClickEvents = {
     /**
-     * 选项描述信息，一般作为解释使用
+     * 单击事件
+     * @param evt 事件对象
      */
-    description?: string;
+    click: [evt?: MouseEvent | TouchEvent | PointerEvent];
 };
 /**
- * 选择 组件事件
+ * 事件：值改变
+ * - 描述值的改变过程，新值是什么，改变前的旧值是什么
  */
-type ChooseEvents<T> = {
+type ChangeEvents<T> = {
     /**
-     * 值改变 事件
-     * - values 为当前选中值；单选时为单个值，多选时为值数组
+     * 值改变；约束新旧值
+     * @param newValue 新值
+     * @param oldValue 旧值
      */
-    change: [values: T | T[]];
+    change: [newValue: T, oldValue?: T];
 };
-
 /**
- * 按钮配置选项
+ * 事件：移动
+ * - 可描述数据索引位置变化
+ * - 可用于数组元素拖动排序，调整位置等逻辑
  */
-type ButtonOptions = TitleOptions & {
+type MoveEvents = {
     /**
-     * 按钮尺寸
-     * - max    ： 120 X 40
-     * - middle ： 90 X 32
-     * - normal ： 54 X 28
-     * - small  ： 30 X 20
+     * 移动事件
+     * @param fromIndex 从哪个索引位置开始移动
+     * @param toIndex 移动到的索引位置
      */
-    size: "max" | "middle" | "normal" | "small";
+    move: [fromIndex: number, toIndex: number];
+};
+/**
+ * 事件：删除数据
+ * - 描述要删除的具体数据
+ */
+type DeleteEvents<T> = {
     /**
-     * 按钮类型
-     *  - primary: 主按钮：蓝色背景
-     *  - default: 默认按钮：白色背景
-     *  - link   ：链接式按钮：蓝色字体颜色，无边框
+     * 删除事件
+     * @param value 要删除的数据
      */
-    type: "primary" | "default" | "link";
+    delete: [value?: T];
+};
+/**
+ * 事件：关闭
+ */
+type CloseEvents = {
+    /**
+     * 关闭事件
+     */
+    close: [];
 };
 
 /**
- * 公共通用数据结构：
- *  1、在弹窗、模态弹窗、跟随弹窗的效果下复用
+ * 数值控件的数据结构
  */
 
 /**
- * 弹窗配置选项
- * - 约束弹出组件信息
- * - 弹出组件时传递的参数信息
- * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
+ * 数值组件的基础配置选项
  */
-type PopupOptions<Props = void, Model = void> = ComponentOptions & ComponentBindOptions<Props, Model> & {
+type NumberBaseOptions = {
     /**
-     * 弹窗动画名
-     * - 不传则默认“fade”
-     * - 动画规则：打开弹窗时，为 [transition]-in ；关闭弹窗时，为[transition]-out
-     * - - 传入 "scale"，则打开弹窗为 "scale-in"；关闭弹窗时为 "scale-out"
+     * 最小值
      */
-    transition?: string;
+    minValue?: number;
     /**
-     * 动画持续时间
-     * - 配合 transition 使用；单位ms，默认500ms
-     * - 外部传入自定义动画时，传入动画持续时间，否则可能导致关闭时动画失效
+     * 最大值
      */
-    transitionDuration?: number;
+    maxValue?: number;
     /**
-     * 自定义class
-     * - 绑定到内容组件根元素上
-     * - 可以直接在props中指定，无需特殊设置
-    class?: string | string[];
+     * 值超过阈值（最大值、最小值）时的处理模式
+     * - 默认值为 `keep`；可选取值范围：
+     * - - `keep` 保持原样值显示，不做任何处理
+     * - - `clamp` 截断超出阈值值，低于最小值时直接取最小值，超过最大值时，强制值为最大值
+     * - 值超过阈值时，会自动触发事件，事件名`NumberEvents`的`belowMin`和`exceedMax`
      */
+    clamp?: "keep" | "clamp";
     /**
-     * 自定义style
-     * - 绑定到内容组件根元素上
-     * - 可以直接在props中指定，无需特殊设置
-    style?: AllStyle;
+     * 精度，保留几位小数
+     * - 要求0、正整数,输入小数则强制整数
+     * - 负数、不传入则不处理
      */
+    precision?: number;
     /**
-     * 弹窗的z-index值
-     * - 无特殊情况，建议不指定，内部会自动生成，确保弹窗正确性
+     * 对数值进行千分位格式处理
+     * - 默认值为 `disabled`；可选值范围：
+     * - `disabled` 禁用千分位功能
+     * - `inline`  内联千分位功能
+     * - `below`  下拉千分位功能
      */
-    zIndex?: number;
-};
-/**
- * 弹出组件句柄
- */
-type PopupHandle<T> = {
+    thousands?: "disabled" | "inline" | "below";
     /**
-     * 组件是否在【弹出窗口】中
-     * - popup  ：  普通弹出弹窗
-     * - dialog ：  模态对话弹窗
-     * - follow ：  跟随效果弹窗
+     * 是否启用数值大写格式化处理
+     * - 为true时，转成中文大写值
+     * - 单位自动为“元”，不支持美元等
+     * - 如金额时，自动转为壹仟壹佰壹拾壹元叁角叁分
+     * - 小数点后面只处理两位（角分）；剩余不处理
+     */
+    upper?: boolean;
+    /**
+     * 格式化时的放大系数
+     * - 用于在格式化千分位、大写时，对实际值进行系数放大，value*formatMultiplier
+     * - 仅接收正整数，取值规则为10^n，默认1
+     * - 千分位格式化时，仅`thousands`为`below`时才进行放到系数处理
+     * - 使用示例例：金额是为万元单位时，这里的放大系数就为 “10000”
+     */
+    formatMultiplier?: number;
+    /**
+     * 前缀字符串
+     * - 如金额时，可配置前缀 ￥
+     */
+    prefix?: string;
+    /**
+     * 后缀字符串
+     * - 如金额时，可配置后缀 元/美元、、
+     */
+    suffix?: string;
+    /**
+     * 数值控制器
+     * - 便捷加减调整数值的控制按钮
+     * - 默认值`disabled`；可选值范围：
+     * - - `disabled` 时禁用
+     * - - `default` 默认模式，左侧 — 右侧 +
+     * - - `right`   右侧模式，+ - 都在右侧
      */
-    inPopup: Readonly<"popup" | "dialog" | "follow">;
+    controls?: "disabled" | "default" | "right";
     /**
-     * 关闭弹窗
-     * @param data 关闭时传递数据
+     * 数值步长值
+     * - `controls` 未禁用时生效
+     * - 每次+、- 的步长值
      */
-    closePopup(data?: T): void;
+    step?: number;
 };
 /**
- * 弹窗状态：响应式
- * - open       打开
- * - active     激活，针对Dialog弹窗生效
- * - unactive   非激活，针对Dialog弹窗生效
- * - closed     关闭
- */
-type PopupStatus = ShallowRef<"open" | "active" | "unactive" | "closed">;
-/**
- * 弹窗状态 配置选项
+ * 数值组件的配置选项
  */
-type PopupStatusOptions = {
-    /**
-     * 弹窗状态：响应式
-     */
-    popupStatus: PopupStatus;
-};
+type NumberOptions = PlaceholderOptions & ReadonlyOptions & NumberBaseOptions;
 /**
- * 弹窗对象描述器
- * - 给弹窗容器使用，传递过去作为props使用
+ * 接口：数值格式化器
  */
-type PopupDescriptor<Options extends PopupOptions, ExtOptions> = PopupStatusOptions & {
+interface INumberFormatter extends Required<Readonly<Pick<NumberBaseOptions, "minValue" | "maxValue" | "precision" | "thousands" | "upper">>> {
     /**
-     * 弹窗Id
-     * - 自动分配，全局唯一
+     * 格式化输入文本
+     * @param text 输入文本
+     * @param isEnd 是否是输入结束，true时，已经输入结束将进行数值精度处理
+     * @returns 数值格式化结果
      */
-    popupId: string;
+    format(text: string, isEnd: boolean): NumberFormatResult;
     /**
-     * 弹窗配置选项
-     * - 由外部传递过来的业务数据配置信息
-     * - 约束具体弹窗的业务组件和业务组件所需props等数据
+     * 进行阈值检测，检测是否超过设定的最大值、最小值
+     * @param number 要检测的数值
+     * @returns 检测结果，`number` 新的值，`belowMin`是否低于最小值，`exceedMax`是否超过最大值
      */
-    options: Options;
+    checkThreshold(number: any): {
+        number: number;
+        belowMin: boolean;
+        exceedMax: boolean;
+    };
     /**
-     * 弹窗扩展配置选项
-     * - 由 popup、follow等方法内部组件：如关闭弹窗方法、钩子函数等
-     * - 配合业务组件使用的一些配置数据
+     * 对数值文本转大写
+     * @param result
+     * @returns 大写文本值
      */
-    extOptions: ExtOptions;
+    buildUpper(result: NumberFormatResult): string;
     /**
-     * 实际分配的zIndex值
+     * 对数值文本进行千分位格式化
+     * @param result
+     * @returns 格式化后的文本值
      */
-    zIndex: number;
+    buildThousands(result: NumberFormatResult): string;
     /**
-     * 弹窗动画名
-     * - 约束打开、关闭动画；基于 PopupOptions.transition 构建出来的
-     * - 具体使用方，将此值绑定的根元素上
+     * 基于步长计算值
+     * @param number 要重新计算的数值
+     * @param isPlus true为+，false为-
+     * @returns 新的数值
      */
-    popupTransition: ShallowRef<string>;
-};
-
-/**
- * 跟随效果 弹窗
- */
-
-/**
- * 跟随弹窗 配置选项
- * - 传入的组件，根据配置跟随 target 位置和大小；
- * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
- */
-type FollowOptions<Props = void, Model = void> = PopupOptions<Props, Model> & FollowPositionOptions;
+    calcByStep(number: number, isPlus: boolean): number;
+}
 /**
- * 跟随位置 配置选项
- * - 基于此计算出最终的跟随效果
+ * 数值格式化结果
  */
-type FollowPositionOptions = {
-    /**
-     * 启用【宽度】跟随
-     * - 为true则和 target 宽度保持一致
-     * - false时，宽度由 弹出组件 自己维护
-     * - 不管是true、还是false，若宽度超过浏览器最大宽度，会进行强制干预
-     */
-    followWidth?: boolean;
+type NumberFormatResult = {
     /**
-     * 启用【高度】跟随
-     * - 为true则和 target 高度保持一致
-     * - false时，高度由 弹出组件 自己维护
-     * - 不管是true、还是false，若高度超过浏览器最大高度，会进行强制干预
+     * 输入是否是有效输入
+     * - `- 0 1 2 3 4 5 6 7 8 9  0 .`算是合法输入
      */
-    followHeight?: boolean;
+    readonly valid: boolean;
     /**
-     * x轴方向上的跟随策略
-     * - 支持传入一个或者多个，依次尝试选举最优位置（全宽度展示，否则取最大宽度位置）
-     * - 不传入则按照默认策略；["start","end","after","before","center","ratio"]
-     * - 可选策略值如下：
-     * - - start  ： 起点跟随，和 target 起始位置（left）一致
-     * - - end    ： 终点跟随，和 target 结束位置（right）一致
-     * - - center ： 中心跟随，和 target 中心位置一致
-     * - - before ： 之前跟随，组件在 target 左侧展示
-     * - - after  ： 之后跟随，组件在 target 右侧展示
-     * - - ratio  ： 比例跟随，按比例（target中心点/窗口宽度）锚定位置，动态计算left值。
+     * 有效的数值
+     * - undefined时，输入无法转换成有效的数值
      */
-    followX?: FollowStrategy | FollowStrategy[];
+    readonly number: number | undefined;
     /**
-     * y轴方向上的跟随策略
-     * - 支持传入一个或者多个，依次尝试选举最优位置（全高度展示，否则取最大高度位置）
-     * - 不传入则按照默认策略；["after","before","start","end","center","ratio"]
-     * - 可选策略值如下：
-     * - - start  ： 起点跟随，和 target 起始位置（top）一致
-     * - - end    ： 终点跟随，和 target 结束位置（bottom）一致
-     * - - center ： 中心跟随，和 target 中心位置一致
-     * - - before ： 之前跟随，组件在 target 顶部展示
-     * - - after  ： 之后跟随，组件在 target 底部展示
-     * - - ratio  ： 比例跟随，按比例（target中心点/窗口高度）锚定位置，动态计算top值。
+     * 数值的显示文本
+     * - 无千分位等处理的数值显示文本
+     * - 若需要在行内显示 千分位 格式文本，需要单独处理
      */
-    followY?: FollowStrategy | FollowStrategy[];
+    readonly text: string;
     /**
-     * x轴方向上 target 之间的留白空间
-     * - 默认0； followX 为 center、ratio 时间距失效
-     * - 增加间距，提升展示效果
-     * -
+     * 格式化数值时发生的错误
+     * - 输入数值有效，但是格式化时发生错误了
      */
-    spaceX?: number;
+    readonly error?: string;
     /**
-     * y轴方向上 target 之间的留白空间
-     * - 默认0；followY 为 center、ratio 时间距失效
-     * - 增加间距，提升展示效果
+     * 是否是负数
+     * - true 时说明以`-`开始；false时为正数
+     * - 若为true，但`integerPart`为undefined，则说明仅输入了`-`
      */
-    spaceY?: number;
+    readonly isNegative?: boolean;
     /**
-     * 和 浏览器客户 端之间的留白空间
-     * - 弹出组件 和浏览器客户端窗口之间的【留白空间】
-     * - 仅在 弹出组件 计算出来位置紧贴浏览器窗口时生效
-     * - 若强制指定了 start、end，则对应的起始、结束位置不受此值影响
+     * 是否是小数
+     * - true 时说明有小数点“.”；false 时为整数
+     * - 若为true，但`decimalPart`为undefined，则说明是以`.`结尾，还没输入具体的小数部分
      */
-    spaceClient?: number;
+    readonly isDecimal?: boolean;
     /**
-     * 点击【遮罩层】时是否关闭弹窗
-     * - 则点击非【跟随组件】区域时是否关闭
+     * 数值输入的整数部分
+     * - 取整数部分绝对值，如-1.2，仅为1
      */
-    closeOnMask?: boolean;
+    readonly integerPart?: string;
     /**
-     * 按下【ESC】健时是否关闭弹窗
+     * 小数部分
      */
-    closeOnEscape?: boolean;
+    readonly decimalPart?: string;
     /**
-     * window窗口【resize】时是否关闭弹窗
+     * 进行系数放大后的整数部分
      */
-    closeOnResize?: boolean;
+    readonly integerPartAfterMultiplier?: string;
     /**
-     * target改变时是否关闭弹窗
-     * - target尺寸、位置变化
-     * - target点击时
+     * 进行系数放大后的小数部分
      */
-    closeOnTarget?: boolean;
+    readonly decimalPartAfterMultiplier?: string;
 };
 /**
- * 跟随策略
- * - 详细值定义，参照 FollowOptions.followX 和 FollowOptions.followY
+ * 数值组件的事件选项
  */
-type FollowStrategy = "start" | "center" | "end" | "before" | "after" | "ratio";
+type NumberEvents = ChangeEvents<number> & {
+    /**
+     * 数值发生错误时
+     * - 若超过最大的精度范围
+     * - 其他未知异常等
+     * @param reason 错误原因
+     */
+    error: [reason: string];
+    /**
+     * 小于最小值
+     * @param value 当前值
+     * @param minValue 最小值
+     */
+    belowMin: [value: number, minValue: number];
+    /**
+     * 超过最大值
+     * @param value 当前值
+     * @param maxValue 最大值
+     */
+    exceedMax: [value: number, maxValue: number];
+};
+
 /**
- * 跟随弹窗 句柄
- * - 用于在 弹窗组件 内部进行模式判断和关闭跟随弹窗
+ * 检查选项 数据结构
  */
-type FollowHandle<T> = PopupHandle<T> & {};
+
 /**
- * 跟随弹窗 扩展配置
+ * 选择 组件配置选项
  */
-type FollowExtend = PopupStatusOptions & {
+type ChooseOptions<T> = ReadonlyOptions & {
     /**
-     * 跟随的目标元素
+     * 是否为多选模式
+     * - true 多选模式，可以选中items中多个选项
+     * - false 单选模式，只能选中items中的一个选项
      */
-    target: Element;
+    multi?: boolean;
     /**
-     * x轴方向的跟随策略：响应式
-     * - 基于外部传入的跟随策略，计算选举出来的最优策略值
+     * 选项类型
+     * - radio:     单选框样式
+     * - checkbox:  多选框样式
      */
-    followX: ShallowRef<FollowStrategy>;
+    type: "radio" | "checkbox";
     /**
-     * y轴方向的跟随策略：响应式
-     * - 基于外部传入的跟随策略，计算选举出来的最优策略值
+     * 显示模式
+     * - native     原生默认，浏览器自己渲染；不同浏览器效果不一致
+     * - beautiful  美化模式，不同浏览器下效果通义
      */
-    followY: ShallowRef<FollowStrategy>;
+    mode?: "native" | "beautiful";
     /**
-     * Follow弹窗是否【钉住】了
-     * - 为true时，closeOnMask、closeOnEscape失效
-     * - 满足 子弹窗 点击等操作时，不自动销毁父级弹窗
+     * 选项布局
+     * - 默认值：horizontal
+     * - 可选值：
+     * - - horizontal 水平布局；所有选项一行
+     * - - vertical   垂直布局；每个选项一行
+     */
+    layout?: "horizontal" | "vertical";
+    /**
+     * 待选项目
+     * text 可不传入
+     */
+    items: ChooseItem<T>[];
+    /**
+     * 选项自定义样式
+     * - 可指定选项宽度、高度、外边距
      */
-    pinned: ShallowRef<boolean>;
+    itemStyle?: WidthStyle & HeightStyle & MarginStyle;
 };
 /**
- * 跟随策略 配置选项
+ * 选择项
  */
-type FollowStrategyOptions = {
+type ChooseItem<T> = {
     /**
-     * x轴的跟随策略
+     * 选项文本
      */
-    followX?: FollowStrategy;
+    text?: string;
     /**
-     * x轴的跟随策略
+     * 选项值
      */
-    followY?: FollowStrategy;
+    value: T;
+    /**
+     * 选项描述信息，一般作为解释使用
+     */
+    description?: string;
 };
 /**
- * 跟随选举结果
+ * 选择 组件事件
  */
-type FollowElectResult = {
+type ChooseEvents<T> = {
     /**
-     * 跟随策略
+     * 值改变 事件
+     * - values 为当前选中值；单选时为单个值，多选时为值数组
      */
-    strategy: FollowStrategy;
+    change: [values: T | T[]];
+};
+
+/**
+ * 按钮配置选项
+ */
+type ButtonOptions = TitleOptions & {
     /**
-     * 开始位置：x/top
+     * 按钮尺寸
+     * - max    ： 120 X 40
+     * - middle ： 90 X 32
+     * - normal ： 54 X 28
+     * - small  ： 30 X 20
      */
-    start: number;
+    size: "max" | "middle" | "normal" | "small";
     /**
-     * 调整后的尺寸（width/height)
-     * - 为undefined表示无需调整尺寸
+     * 按钮类型
+     *  - primary: 主按钮：蓝色背景
+     *  - default: 默认按钮：白色背景
+     *  - link   ：链接式按钮：蓝色字体颜色，无边框
      */
-    size?: number;
+    type: "primary" | "default" | "link";
 };
 
 /**
@@ -2673,202 +2893,12 @@ declare const MOTION: Readonly<{
     };
 }>;
 
-/**
- * 模态弹窗数据结构
- */
-
-/**
- * 模态弹窗 配置选项
- * - 继承 ComponentOptions ，动态加载组件
- * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
- */
-type DialogOptions<Props = void, Model = void> = PopupOptions<Props, Model> & {
-    /**
-     * 包裹器配置
-     * - 若传入配置，则启用弹窗包裹；弹窗打开时使用`Wrapper`包裹弹窗内容组件
-     */
-    wrapper?: Pick<WrapperOptions, "header" | "content" | "footer">;
-    /**
-     * 禁用【遮罩层】
-     * - 目前没实现，先忽略
-    maskDisabled?: boolean;
-     */
-    /**
-     * 点击【遮罩层】时是否关闭弹窗
-     * - 针对无遮罩层的弹窗，则点击非【弹窗组件】区域时是否关闭
-     */
-    closeOnMask?: boolean;
-    /**
-     * 按下【ESC】健时是否关闭弹窗
-     */
-    closeOnEscape?: boolean;
-    /**
-     * 模态弹窗的自定义class
-     * - 绑定到模态弹窗的根元素上
-     */
-    rootClass?: string | string[];
-};
-/**
- * 弹窗组件句柄
- * - 用于在弹窗内容组件中进行模式判断和关闭
- */
-type DialogHandle<T> = PopupHandle<T> & {
-    /**
-     * 注册监听【弹窗关闭】事件方法
-     * - 仅支持注册一次，多次注册以最后一次的为准
-     * @param fn 关闭时执行的钩子函数，支持异步；；调用后若返回false时将阻止弹窗关闭
-     */
-    onBeforeClose(fn: (data?: T) => false | undefined | Promise<false | undefined>): void;
-};
-/**
- * 弹窗包裹器操作句柄
- */
-type DialogWrapperHandle<T> = {
-    /**
-     * 注册【构建数据】事件方法
-     * - 仅在Dialog为使用了wrapper模式时生效，用于在【确认】按钮点击时，构建实际内容组件中的数据
-     * - 仅支持注册一次，多次注册以最后一次的为准
-     * @param fn 取数据时执行的钩子函数，支持异步；若需要阻止弹窗关闭则`fn`方法直接报错即可
-     */
-    onBuildData(fn: () => T | Promise<T>): void;
-};
-
-/**
- * 确认弹窗配置选项
- * - title          弹窗标题，默认“提示”
- * - message        确认提示信息；默认“请确认？”；支持html格式内容
- */
-type ConfirmOptions = TitleOptions & MessageOptions & ConfirmAreaOptions & {};
-
-/**
- * Toast配置选项
- */
-type ToastOptions = {
-    /**
-     * 提示类型，基于类型展示图标
-     */
-    type?: IconType;
-    /**
-     * 提示消息；支持html格式
-     */
-    message: string;
-    /**
-     * 提示显示时间
-     * - 单位毫秒，默认1500ms
-     */
-    duration?: number;
-    /**
-     * 关闭按钮是否禁用
-     */
-    closeDisabled?: boolean;
-};
-
-/**
- * 弹窗管理器
- */
-interface IPopupManager {
-    /**
-     * 弹出
-     * - 弹窗位置位置、大小、动画效果等由组件自己完成
-     * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
-     * @param options 弹窗配置选项
-     * @returns 弹窗打开结果，外部可手动关闭弹窗
-     */
-    popup<T, Props = void, Model = void>(options: PopupOptions<Props, Model>): IAsyncScope<T>;
-    /**
-     * 对话框
-     * - 支持指定模态和非模态对话框
-     * - 默认垂直水平居中展示
-     * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
-     * @param options 弹窗配置选项
-     * @returns 弹窗打开结果，外部可手动关闭弹窗
-     */
-    dialog<T, Props = void, Model = void>(options: DialogOptions<Props, Model>): IAsyncScope<T>;
-    /**
-     * 跟随弹窗
-     * - 跟随指定的target对象，可跟随位置、大小
-     * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
-     * @param target 跟随的目标元素
-     * @param options 跟随配置选项
-     * @returns 弹窗异步作用域，外部可手动关闭弹窗
-     */
-    follow<T, Props = void, Model = void>(target: HTMLElement, options: FollowOptions<Props, Model>): IAsyncScope<T>;
-    /**
-     * 打开【确认】弹窗
-     * @param title  弹窗标题
-     * @param message 确认提示信息，支持html片段
-     * @param options 确认弹窗其他配置信息
-     * @returns 弹窗打开结果，外部可手动关闭弹窗
-     */
-    confirm(title: string, message: string, options?: Omit<ConfirmOptions, "title" | "message">): IAsyncScope<boolean>;
-    /**
-     * Toast 提示框
-     * @param type 提示类型：成功、失败、、、
-     * @param message 提示消息
-     * @param options 提示框配置选项
-     * @returns 弹窗打开结果，外部可手动关闭弹窗
-     */
-    toast(type: IconType, message: string, options?: Omit<ToastOptions, "type" | "message">): IScope;
-}
-
-/**
- * 选择器 相关数据实体
- */
-
-/**
- * 接口：选择器管理器
- */
-interface IPickerManager {
-    /**
-    * 显示【日期】选择器
-    * @param target 哪个元素触发，基于此元素计算位置
-    * @param options 日期选择器配置选项
-    * @param popupOptions 弹窗配置选项;内部根据情况选择属性使用
-    * @returns 异步任务，可销毁日期选择器；可接收日期选择器的选择值
-    */
-    showDate(target: HTMLElement, options?: DatePickerOptions, popupOptions?: PickerPopupOptions): IAsyncScope<string>;
-    /**
-     * 显示【时间】选择控件
-     * @param target 哪个元素触发，基于此元素计算位置
-     * @param options 时间选择控件配置选项
-    * @param popupOptions 弹窗配置选项;内部根据情况选择属性使用
-     * @returns 异步任务，可销毁时间选择控件；可接收时间选择控件的选择值
-     */
-    showTime(target: HTMLElement, options?: TimePickerOptions, popupOptions?: PickerPopupOptions): IAsyncScope<string>;
-}
-/**
- * 选择器弹窗配置选项
- * - 放开一些属性，方便用户做一些自定义
- */
-type PickerPopupOptions = FollowPositionOptions;
-/**
- * 选择器扩展
- */
-type PickerExtend = {
-    /**
-     * 弹窗管理器
-     * - 方便下级再弹窗，公用一个管理器，方便生命周期管理
-     */
-    popup: IPopupManager;
-    /**
-     * 选择器对象，方便内部在弹出选择
-     * - 如日期选择器中，在选择时间
-     */
-    picker: IPickerManager;
-};
-
 /**
  * 使用选择器
  * @returns 选择器实例+作用域对象
  */
 declare function usePicker(): IPickerManager & IScope;
 
-/**
- * 使用【弹窗管理器】
- * @returns 全新的【弹窗管理器】实例+作用域对象
- */
-declare function usePopup(): IPopupManager & IScope;
-
 declare const components: {
     Action: {
         new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<ActionOptions> & Readonly<{
@@ -2906,18 +2936,28 @@ declare const components: {
         };
     });
     Button: {
-        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<ButtonOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
+        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<ButtonOptions> & Readonly<{
+            onClick?: (evt?: MouseEvent | TouchEvent | PointerEvent) => any;
+        }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+            click: (evt?: MouseEvent | TouchEvent | PointerEvent) => any;
+        }, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
             P: {};
             B: {};
             D: {};
             C: {};
             M: {};
             Defaults: {};
-        }, Readonly<ButtonOptions> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        }, Readonly<ButtonOptions> & Readonly<{
+            onClick?: (evt?: MouseEvent | TouchEvent | PointerEvent) => any;
+        }>, {}, {}, {}, {}, {}>;
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
-    } & vue.ComponentOptionsBase<Readonly<ButtonOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
+    } & vue.ComponentOptionsBase<Readonly<ButtonOptions> & Readonly<{
+        onClick?: (evt?: MouseEvent | TouchEvent | PointerEvent) => any;
+    }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        click: (evt?: MouseEvent | TouchEvent | PointerEvent) => any;
+    }, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
         $slots: {
             default?: (props: {}) => any;
         };
@@ -3007,18 +3047,28 @@ declare const components: {
         };
     });
     Icon: {
-        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<IconOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
+        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<IconOptions> & Readonly<{
+            onClick?: (evt?: MouseEvent | TouchEvent | PointerEvent) => any;
+        }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+            click: (evt?: MouseEvent | TouchEvent | PointerEvent) => any;
+        }, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
             P: {};
             B: {};
             D: {};
             C: {};
             M: {};
             Defaults: {};
-        }, Readonly<IconOptions> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        }, Readonly<IconOptions> & Readonly<{
+            onClick?: (evt?: MouseEvent | TouchEvent | PointerEvent) => any;
+        }>, {}, {}, {}, {}, {}>;
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
-    } & vue.ComponentOptionsBase<Readonly<IconOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
+    } & vue.ComponentOptionsBase<Readonly<IconOptions> & Readonly<{
+        onClick?: (evt?: MouseEvent | TouchEvent | PointerEvent) => any;
+    }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        click: (evt?: MouseEvent | TouchEvent | PointerEvent) => any;
+    }, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
         $slots: {
             default?: (props: {}) => any;
         };
@@ -3030,8 +3080,8 @@ declare const components: {
     } & {
         modelValue?: string;
     }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-        change: (value: string) => any;
         click: () => any;
+        change: (value: string) => any;
         "update:modelValue": (value: string) => any;
     }, string, vue.PublicProps, Readonly<ReadonlyOptions & PlaceholderOptions & TitleOptions & {
         type?: "text" | "number" | "password";
@@ -3040,8 +3090,8 @@ declare const components: {
     } & {
         modelValue?: string;
     }> & Readonly<{
-        onChange?: (value: string) => any;
         onClick?: () => any;
+        onChange?: (value: string) => any;
         "onUpdate:modelValue"?: (value: string) => any;
     }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
     Number: vue.DefineComponent<PlaceholderOptions & ReadonlyOptions & NumberBaseOptions & {
@@ -3650,35 +3700,47 @@ declare const components: {
     DatePicker: vue.DefineComponent<ReadonlyOptions & {
         value?: string;
         format?: snail_core.DateFormat;
+        mode?: "default" | "simple";
         min?: string;
         max?: string;
         minPickTime?: string;
         maxPickTime?: string;
-    } & DatetimeDisabledOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    } & DatetimeDisabledOptions & {
+        popup?: PickerPopupOptions;
+    }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
         change: (newValue: string, oldValue?: string) => any;
     }, string, vue.PublicProps, Readonly<ReadonlyOptions & {
         value?: string;
         format?: snail_core.DateFormat;
+        mode?: "default" | "simple";
         min?: string;
         max?: string;
         minPickTime?: string;
         maxPickTime?: string;
-    } & DatetimeDisabledOptions> & Readonly<{
+    } & DatetimeDisabledOptions & {
+        popup?: PickerPopupOptions;
+    }> & Readonly<{
         onChange?: (newValue: string, oldValue?: string) => any;
     }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
     TimePicker: vue.DefineComponent<ReadonlyOptions & {
         value?: string;
         format?: "HH:mm:ss" | "HH:mm";
+        mode?: "default" | "simple";
         min?: string;
         max?: string;
-    } & DatetimeDisabledOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    } & DatetimeDisabledOptions & {
+        popup?: PickerPopupOptions;
+    }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
         change: (newValue: string, oldValue?: string) => any;
     }, string, vue.PublicProps, Readonly<ReadonlyOptions & {
         value?: string;
         format?: "HH:mm:ss" | "HH:mm";
+        mode?: "default" | "simple";
         min?: string;
         max?: string;
-    } & DatetimeDisabledOptions> & Readonly<{
+    } & DatetimeDisabledOptions & {
+        popup?: PickerPopupOptions;
+    }> & Readonly<{
         onChange?: (newValue: string, oldValue?: string) => any;
     }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
     DragVerify: vue.DefineComponent<DragVerifyOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {} & {