@whitesev/pops 2.6.0 → 3.0.0

package/src/components/panel/index.css

@@ -722,6 +722,8 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
   flex-shrink: 0;
   flex-wrap: nowrap;
   height: 100%;
+  height: -webkit-fill-available;
+  height: -moz-available;
   text-align: center;
   color: var(--pops-panel-components-input-suffix-color);
   background: var(--pops-panel-components-input-suffix-bg-color);
@@ -750,11 +752,13 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
 .pops-panel-input:active span.pops-panel-input__suffix:has(svg[data-type="circleClose"]) {
   display: inline-flex;
 }
-/* 当清空图标显示时，则隐藏输入框的padding-right */
+/* 当清空图标显示时或查看图标存在时，则隐藏输入框的padding-right */
 .pops-panel-input:hover:has(span.pops-panel-input__suffix svg[data-type="circleClose"]) input,
 .pops-panel-input:focus:has(span.pops-panel-input__suffix svg[data-type="circleClose"]) input,
 .pops-panel-input:focus-within:has(span.pops-panel-input__suffix svg[data-type="circleClose"]) input,
-.pops-panel-input:active:has(span.pops-panel-input__suffix svg[data-type="circleClose"]) input {
+.pops-panel-input:active:has(span.pops-panel-input__suffix svg[data-type="circleClose"]) input,
+.pops-panel-input:has(span.pops-panel-input__suffix svg[data-type="view"]) input,
+.pops-panel-input:has(span.pops-panel-input__suffix svg[data-type="hide"]) input {
   padding-right: 0;
 }
 .pops-panel-input .pops-panel-icon {
@@ -1001,10 +1005,14 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
 .pops-panel-select-multiple .el-select__caret {
   color: var(--el-select-input-color);
   font-size: var(--el-select-input-font-size);
-  transition: var(--el-transition-duration);
+  transition: transform var(--el-transition-duration);
   transform: rotate(0);
   cursor: pointer;
 }
+/* 把箭头旋转 */
+.pops-panel-select-multiple[data-show-option] .el-select__caret {
+  transform: rotate(180deg);
+}
 .pops-panel-select-multiple .el-tag {
   --el-tag-font-size: 12px;
   --el-tag-border-radius: 4px;

package/src/components/panel/index.ts

@@ -3,35 +3,22 @@ import { PopsHandler } from "../../handler/PopsHandler";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
-import type { PopsPanelDetails, PopsPanelEventType } from "./types";
-import { PopsPanelConfig } from "./config";
+import type { PopsPanelConfig, PopsPanelEventType } from "./types";
+import { PopsPanelDefaultConfig } from "./defaultConfig";
 import { PanelHandlerComponents } from "./handlerComponents";
 import { GlobalConfig } from "../../config/GlobalConfig";
 import { PopsCSS } from "../../PopsCSS";
 import type { PopsType } from "../../types/main";
 
 export const PopsPanel = {
-  init(details: PopsPanelDetails) {
+  init(__config__: PopsPanelConfig) {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const popsType: PopsType = "panel";
 
-    let config: Required<PopsPanelDetails> = PopsPanelConfig();
+    let config: Required<PopsPanelConfig> = PopsPanelDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-    config = popsUtils.assign(config, details);
-    if (details) {
-      if (Array.isArray(details.content)) {
-        // 存在内容配置
-        config.content = details.content;
-      }
-      if (Array.isArray(details.bottomContentConfig)) {
-        // 存在底部配置
-        config.bottomContentConfig = details.bottomContentConfig;
-      } else {
-        // 不存在底部配置 清空默认的
-        config.bottomContentConfig = [];
-      }
-    }
+    config = popsUtils.assign(config, __config__);
     config = PopsHandler.handleOnly(popsType, config);
 
     const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
@@ -109,7 +96,7 @@ export const PopsPanel = {
      * 弹窗的主元素，包括动画层
      */
     const $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
-    /* 结构元素 */
+    // 结构元素
     const {
       $pops,
       $headerBtnClose,
@@ -135,7 +122,7 @@ export const PopsPanel = {
      */
     const $elList: HTMLElement[] = [$anim];
 
-    /* 遮罩层元素 */
+    // 遮罩层元素
     if (config.mask.enable) {
       const handleMask = PopsHandler.handleMask({
         type: popsType,
@@ -148,7 +135,7 @@ export const PopsPanel = {
       $elList.push($mask);
     }
 
-    /* 处理返回的配置 */
+    // 处理返回的配置
     const evtConfig = PopsHandler.handleEventConfig(
       config,
       guid,
@@ -159,16 +146,16 @@ export const PopsPanel = {
       $pops,
       $mask
     );
-    /* 为顶部右边的关闭按钮添加点击事件 */
+    // 为顶部右边的关闭按钮添加点击事件
     PopsHandler.handleClickEvent("close", $headerBtnClose, evtConfig, config.btn?.close?.callback);
 
-    /* 创建到页面中 */
+    // 创建到页面中
     popsDOMUtils.append($shadowRoot, $elList);
     if (typeof config.beforeAppendToPageCallBack === "function") {
       config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
     }
     popsDOMUtils.appendBody($shadowContainer);
-    /* 追加遮罩层元素 */
+    // 追加遮罩层元素
     if ($mask != null) {
       $anim.after($mask);
     }
@@ -193,13 +180,13 @@ export const PopsPanel = {
 
     PopsHandler.handlePush(popsType, {
       guid: guid,
-      animElement: $anim,
-      popsElement: $pops,
-      maskElement: $mask!,
+      $anim: $anim,
+      $pops: $pops,
+      $mask: $mask!,
       $shadowContainer: $shadowContainer,
       $shadowRoot: $shadowRoot,
     });
-    /* 拖拽 */
+    // 拖拽
     if (config.drag) {
       PopsInstanceUtils.drag($pops, {
         dragElement: $title,

package/src/components/panel/types/components-button.ts

@@ -1,10 +1,14 @@
-import type { PopsPanelCommonDetails } from "./components-common";
+import type { PopsPanelGeneralConfig } from "./components-common";
 import type { PopsButtonStyleType } from "../../../types/button";
 import type { PopsIconType } from "../../../types/icon";
 /**
  * pops.panel的 button
  */
-export interface PopsPanelButtonDetails extends PopsPanelCommonDetails<PopsPanelButtonDetails> {
+export interface PopsPanelButtonConfig extends PopsPanelGeneralConfig<PopsPanelButtonConfig> {
+  /**
+   * 类型
+   */
+  type: "button";
   /**
    * 显示在左边的文字
    */
@@ -13,12 +17,9 @@ export interface PopsPanelButtonDetails extends PopsPanelCommonDetails<PopsPanel
    * （可选）左边的文字下面的描述
    */
   description?: string;
-  /**
-   * 类型
-   */
-  type: "button";
   /**
    * （可选）是否禁用
+   * @default false
    */
   disable?: boolean;
   /**

package/src/components/panel/types/components-common.ts

@@ -1,10 +1,10 @@
-import type { PopsPanelFormsDetails } from "./components-forms";
-import type { PopsPanelFormsTotalDetails } from ".";
+import type { PopsPanelContainerConfig } from "./components-container";
+import type { PopsPanelViewConfig } from ".";
 
 /**
  * 右侧容器的配置
  */
-export interface PopsPanelRightAsideContainerOptions {
+export interface PopsPanelRightAsideContainerConfig {
   /** 当前的<li>元素 */
   target: HTMLLIElement | undefined;
   /** 当前的<li>元素的父<ul>元素 */
@@ -19,7 +19,7 @@ export interface PopsPanelRightAsideContainerOptions {
 /**
  * 通用配置
  */
-export interface PopsPanelCommonDetails<T extends PopsPanelFormsTotalDetails | PopsPanelFormsDetails> {
+export interface PopsPanelGeneralConfig<T extends PopsPanelViewConfig | PopsPanelContainerConfig> {
   /**
    * （可选）元素的className，值为空的话就不设置
    * @default ""
@@ -45,11 +45,11 @@ export interface PopsPanelCommonDetails<T extends PopsPanelFormsTotalDetails | P
       };
   /**
      * 在添加到<ul>元素后触发该回调
-     * @param formConfig 配置
+     * @param viewConfig 配置
      * @param container 右侧容器的元素
      * @example
      * // 例如在type为own时
-     * afterAddToUListCallBack(formConfig, container) {
+     * afterAddToUListCallBack(viewConfig, container) {
      * DOMUtils.on(
         container.formHeaderDivElement.querySelector(
         "a"
@@ -69,5 +69,5 @@ export interface PopsPanelCommonDetails<T extends PopsPanelFormsTotalDetails | P
      * // 例如在type为forms时
      * container内只有container.ulElement这个属性
      */
-  afterAddToUListCallBack?: (formConfig: T, container: PopsPanelRightAsideContainerOptions) => void;
+  afterAddToUListCallBack?: (viewConfig: T, container: PopsPanelRightAsideContainerConfig) => void;
 }

package/src/components/panel/types/components-container.ts

@@ -0,0 +1,25 @@
+import type { PopsPanelGeneralConfig } from "./components-common";
+import type { PopsPanelViewConfig } from ".";
+
+/**
+ * pops.panel的 container
+ */
+export interface PopsPanelContainerConfig extends PopsPanelGeneralConfig<PopsPanelContainerConfig> {
+  /**
+   * 类型
+   */
+  type: "container";
+  /**
+   * 显示在左边的文字
+   */
+  text: string;
+  /**
+   * 是否进行折叠
+   * @default false
+   */
+  isFold?: boolean;
+  /**
+   * 子配置
+   */
+  views: PopsPanelViewConfig[];
+}

package/src/components/panel/types/components-deepMenu.ts

@@ -1,10 +1,10 @@
-import type { PopsPanelFormsTotalDetails } from ".";
-import type { PopsPanelFormsDetails } from "./components-forms";
-import type { PopsPanelCommonDetails } from "./components-common";
+import type { PopsPanelViewConfig } from ".";
+import type { PopsPanelContainerConfig } from "./components-container";
+import type { PopsPanelGeneralConfig } from "./components-common";
 /**
- * pops.panel的 深层菜单
+ * pops.panel的 深层视图的配置
  */
-export interface PopsPanelDeepMenuDetails extends PopsPanelCommonDetails<PopsPanelDeepMenuDetails> {
+export interface PopsPanelDeepViewConfig extends PopsPanelGeneralConfig<PopsPanelDeepViewConfig> {
   /**
    * 类型
    */
@@ -34,29 +34,29 @@ export interface PopsPanelDeepMenuDetails extends PopsPanelCommonDetails<PopsPan
    */
   clickCallBack?: (
     event: MouseEvent | PointerEvent,
-    formConfig: PopsPanelDeepMenuDetails
+    viewConfig: PopsPanelDeepViewConfig
   ) => boolean | void | Promise<boolean | void>;
   /**
    * 进入深层菜单后触发的回调
-   * @param formConfig
+   * @param viewConfig
    */
   afterEnterDeepMenuCallBack?: (
-    formConfig: PopsPanelDeepMenuDetails,
+    viewConfig: PopsPanelDeepViewConfig,
     container: {
       /** 右侧的总容器 */
-      sectionContainer: HTMLElement;
+      $sectionContainer: HTMLElement;
       /** 右侧的总容器的标题头容器 */
-      sectionContainerHeaderContainer: HTMLUListElement;
+      $sectionContainerHeaderContainer: HTMLUListElement;
       /** 右侧的总容器的标题头 */
-      sectionContainerHeader: HTMLLIElement;
+      $sectionContainerHeader: HTMLLIElement;
       /** 右侧的内容容器 */
-      sectionBodyContainer: HTMLUListElement;
+      $sectionBodyContainer: HTMLUListElement;
     }
   ) => void;
   /**
    * 菜单配置
    */
-  forms?: (PopsPanelFormsDetails | PopsPanelFormsTotalDetails)[];
+  views?: (PopsPanelContainerConfig | PopsPanelViewConfig)[];
   /**
    * （可选）头部的标题文字，没有的话默认是text
    */

package/src/components/panel/types/components-input.ts

@@ -1,9 +1,13 @@
-import type { PopsPanelCommonDetails } from "./components-common";
+import type { PopsPanelGeneralConfig } from "./components-common";
 
 /**
  * pops.panel的 input
  */
-export interface PopsPanelInputDetails extends PopsPanelCommonDetails<PopsPanelInputDetails> {
+export interface PopsPanelInputConfig extends PopsPanelGeneralConfig<PopsPanelInputConfig> {
+  /**
+   * 类型
+   */
+  type: "input";
   /**
    * 显示在左边的文字
    */
@@ -13,10 +17,6 @@ export interface PopsPanelInputDetails extends PopsPanelCommonDetails<PopsPanelI
    * @default ""
    */
   description?: string;
-  /**
-   * 类型
-   */
-  type: "input";
   /**
    * （可选）是否禁用
    * @default false

package/src/components/panel/types/components-own.ts

@@ -1,10 +1,10 @@
-import type { PopsPanelCommonDetails } from "./components-common";
+import type { PopsPanelGeneralConfig } from "./components-common";
 
 /**
  * pops.panel的 own
  * 自定义的
  */
-export interface PopsPanelOwnDetails extends PopsPanelCommonDetails<PopsPanelOwnDetails> {
+export interface PopsPanelOwnConfig extends PopsPanelGeneralConfig<PopsPanelOwnConfig> {
   /**
    * 类型
    */

package/src/components/panel/types/components-select.ts

@@ -1,11 +1,15 @@
-import type { PopsPanelCommonDetails } from "./components-common";
-import type { PopsPanelFormsDetails } from "./components-forms";
-import type { PopsPanelFormsTotalDetails } from ".";
+import type { PopsPanelGeneralConfig } from "./components-common";
+import type { PopsPanelContainerConfig } from "./components-container";
+import type { PopsPanelViewConfig } from ".";
 
 /**
  * pops.panel的 select
  */
-export interface PopsPanelSelectDetails<T = any> extends PopsPanelCommonDetails<PopsPanelSelectDetails> {
+export interface PopsPanelSelectConfig<T = any> extends PopsPanelGeneralConfig<PopsPanelSelectConfig> {
+  /**
+   * 类型
+   */
+  type: "select";
   /**
    * 显示在左边的文字
    */
@@ -15,10 +19,6 @@ export interface PopsPanelSelectDetails<T = any> extends PopsPanelCommonDetails<
    * @default ""
    */
   description?: string;
-  /**
-   * 类型
-   */
-  type: "select";
   /**
    * （可选）是否禁用
    * @default false
@@ -63,8 +63,8 @@ export interface PopsPanelSelectDetails<T = any> extends PopsPanelCommonDetails<
     /**
      * 子配置，跟随切换改变
      */
-    forms?:
-      | (PopsPanelFormsDetails | PopsPanelFormsTotalDetails)[]
-      | (() => (PopsPanelFormsDetails | PopsPanelFormsTotalDetails)[]);
+    views?:
+      | (PopsPanelContainerConfig | PopsPanelViewConfig)[]
+      | (() => (PopsPanelContainerConfig | PopsPanelViewConfig)[]);
   }[];
 }

package/src/components/panel/types/components-selectMultiple.ts

@@ -1,5 +1,5 @@
-import type { PopsAlertDetails } from "../../alert/types";
-import type { PopsPanelCommonDetails } from "./components-common";
+import type { PopsAlertConfig } from "../../alert/types";
+import type { PopsPanelGeneralConfig } from "./components-common";
 
 export interface PopsPanelSelectMultipleDataOption<T> {
   /**
@@ -35,8 +35,11 @@ export interface PopsPanelSelectMultipleDataOption<T> {
 /**
  * pops.panel的 select
  */
-export interface PopsPanelSelectMultipleDetails<T = any>
-  extends PopsPanelCommonDetails<PopsPanelSelectMultipleDetails> {
+export interface PopsPanelSelectMultipleConfig<T = any> extends PopsPanelGeneralConfig<PopsPanelSelectMultipleConfig> {
+  /**
+   * 类型
+   */
+  type: "select-multiple";
   /**
    * 显示在左边的文字
    */
@@ -45,10 +48,6 @@ export interface PopsPanelSelectMultipleDetails<T = any>
    * （可选）左边的文字下面的描述
    */
   description?: string;
-  /**
-   * 类型
-   */
-  type: "select-multiple";
   /**
    * （可选）是否禁用
    */
@@ -64,7 +63,7 @@ export interface PopsPanelSelectMultipleDetails<T = any>
   /**
    * 弹出的下拉列表弹窗的配置
    */
-  selectConfirmDialogDetails?: Partial<PopsAlertDetails>;
+  selectConfirmDialogConfig?: Partial<PopsAlertConfig>;
   /**
    * 选择器的值改变触发的回调函数
    * @param event 事件

package/src/components/panel/types/components-slider.ts

@@ -1,9 +1,14 @@
-import type { PopsPanelCommonDetails } from "./components-common";
+import type { PopsPanelGeneralConfig } from "./components-common";
 
 /**
  * pops.panel的 slider
  */
-export interface PopsPanelSliderDetails extends PopsPanelCommonDetails<PopsPanelSliderDetails> {
+export interface PopsPanelSliderConfig extends PopsPanelGeneralConfig<PopsPanelSliderConfig> {
+  /**
+   * 类型
+   * @default "slider"
+   */
+  type: "slider";
   /**
    * 显示在左边的文字
    */
@@ -13,11 +18,6 @@ export interface PopsPanelSliderDetails extends PopsPanelCommonDetails<PopsPanel
    * @default ""
    */
   description?: string;
-  /**
-   * 类型
-   * @default "slider"
-   */
-  type: "slider";
   /**
    * （可选）是否禁用
    * @default false

package/src/components/panel/types/components-switch.ts

@@ -1,9 +1,13 @@
-import type { PopsPanelCommonDetails } from "./components-common";
+import type { PopsPanelGeneralConfig } from "./components-common";
 
 /**
  * pops.panel的 switch
  */
-export interface PopsPanelSwitchDetails extends PopsPanelCommonDetails<PopsPanelSwitchDetails> {
+export interface PopsPanelSwitchConfig extends PopsPanelGeneralConfig<PopsPanelSwitchConfig> {
+  /**
+   * 类型
+   */
+  type: "switch";
   /**
    * 显示在左边的文字
    */
@@ -13,10 +17,6 @@ export interface PopsPanelSwitchDetails extends PopsPanelCommonDetails<PopsPanel
    * @default ""
    */
   description?: string;
-  /**
-   * 类型
-   */
-  type: "switch";
   /**
    * （可选）是否禁用
    * @default false

package/src/components/panel/types/components-textarea.ts

@@ -1,9 +1,13 @@
-import type { PopsPanelCommonDetails } from "./components-common";
+import type { PopsPanelGeneralConfig } from "./components-common";
 
 /**
  * pops.panel的 textarea
  */
-export interface PopsPanelTextAreaDetails extends PopsPanelCommonDetails<PopsPanelTextAreaDetails> {
+export interface PopsPanelTextAreaConfig extends PopsPanelGeneralConfig<PopsPanelTextAreaConfig> {
+  /**
+   * 类型
+   */
+  type: "textarea";
   /**
    * 显示在左边的文字
    */
@@ -13,10 +17,6 @@ export interface PopsPanelTextAreaDetails extends PopsPanelCommonDetails<PopsPan
    * @default ""
    */
   description?: string;
-  /**
-   * 类型
-   */
-  type: "textarea";
   /**
    * （可选）是否禁用
    * @default false

package/src/components/panel/types/index.ts

@@ -1,29 +1,34 @@
-import type { PopsTitleConfig, PopsDragConfig, PopsCommonConfig } from "../../../types/components";
-import type { PopsPanelFormsDetails } from "./components-forms";
-import type { PopsPanelSwitchDetails } from "./components-switch";
-import type { PopsPanelSliderDetails } from "./components-slider";
-import type { PopsPanelInputDetails } from "./components-input";
-import type { PopsPanelTextAreaDetails } from "./components-textarea";
-import type { PopsPanelSelectDetails } from "./components-select";
-import type { PopsPanelButtonDetails } from "./components-button";
-import type { PopsPanelDeepMenuDetails } from "./components-deepMenu";
-import type { PopsPanelOwnDetails } from "./components-own";
-import type { PopsHeaderCloseButtonDetails } from "../../../types/button";
-import type { PopsPanelSelectMultipleDetails } from "./components-selectMultiple";
-import type { PopsPanelCommonDetails } from "./components-common";
-
-/** panel的各种类型的配置项 */
-export type PopsPanelFormsTotalDetails =
-  | PopsPanelSwitchDetails
-  | PopsPanelSliderDetails
-  | PopsPanelInputDetails
-  | PopsPanelTextAreaDetails
-  | PopsPanelSelectDetails<any>
-  | PopsPanelSelectMultipleDetails<any>
-  | PopsPanelButtonDetails
-  | PopsPanelDeepMenuDetails
-  | PopsPanelOwnDetails;
+import type { PopsTitleConfig, PopsDragConfig, PopsGeneralConfig } from "../../../types/components";
+import type { PopsPanelContainerConfig } from "./components-container";
+import type { PopsPanelSwitchConfig } from "./components-switch";
+import type { PopsPanelSliderConfig } from "./components-slider";
+import type { PopsPanelInputConfig } from "./components-input";
+import type { PopsPanelTextAreaConfig } from "./components-textarea";
+import type { PopsPanelSelectConfig } from "./components-select";
+import type { PopsPanelButtonConfig } from "./components-button";
+import type { PopsPanelDeepViewConfig } from "./components-deepMenu";
+import type { PopsPanelOwnConfig } from "./components-own";
+import type { PopsHeaderCloseButtonConfig } from "../../../types/button";
+import type { PopsPanelSelectMultipleConfig } from "./components-selectMultiple";
+import type { PopsPanelGeneralConfig } from "./components-common";
 
+/**
+ * panel的各种类型的配置项（不包括type="container"类型的）
+ */
+export type PopsPanelViewConfig =
+  | PopsPanelSwitchConfig
+  | PopsPanelSliderConfig
+  | PopsPanelInputConfig
+  | PopsPanelTextAreaConfig
+  | PopsPanelSelectConfig<any>
+  | PopsPanelSelectMultipleConfig<any>
+  | PopsPanelButtonConfig
+  | PopsPanelDeepViewConfig
+  | PopsPanelOwnConfig;
+/**
+ * panel的views配置项
+ */
+export type PopsPanelMainViewConfig = PopsPanelViewConfig | PopsPanelContainerConfig;
 /**
  * panel的内部事件
  */
@@ -33,9 +38,9 @@ export type PopsPanelEventType = {
    */
   "pops:renderRightContainer": {
     /**
-     * 菜单配置
+     * 视图配置
      */
-    formConfig: PopsPanelContentConfig[] | PopsPanelDeepMenuDetails;
+    viewConfig: PopsPanelContentConfig[] | PopsPanelDeepViewConfig;
   };
 };
 
@@ -51,7 +56,7 @@ export interface PopsPanelContentConfig {
    * （可选）元素的className，值为空的话就不设置
    * @default ""
    */
-  className?: PopsPanelCommonDetails<any>["className"];
+  className?: PopsPanelGeneralConfig<any>["className"];
   /**
    * 显示的文本，可以是html格式
    */
@@ -84,16 +89,18 @@ export interface PopsPanelContentConfig {
   scrollToDefaultView?: boolean;
   /**
    * （可选）自定义元素属性.setAttribute、.getAttribute
+   * @default {}
    */
-  attributes?: PopsPanelCommonDetails<any>["attributes"];
+  attributes?: PopsPanelGeneralConfig<any>["attributes"];
   /**
    * （可选）自定义元素内部的属性值
+   * @default {}
    */
-  props?: PopsPanelCommonDetails<any>["props"];
+  props?: PopsPanelGeneralConfig<any>["props"];
   /**
-   * 子配置
+   * 视图配置
    */
-  forms: (PopsPanelFormsDetails | PopsPanelFormsTotalDetails)[];
+  views: PopsPanelMainViewConfig[];
   /**
    * 左侧容器的点击回调（点击后第一个触发该回调）
    * @returns
@@ -138,7 +145,7 @@ export interface PopsPanelBottomContentConfig {
    * （可选）元素的className，值为空的话就不设置
    * @default ""
    */
-  className?: PopsPanelCommonDetails<any>["className"];
+  className?: PopsPanelGeneralConfig<any>["className"];
   /**
    * （可选）配置所在位置
    *
@@ -158,12 +165,12 @@ export interface PopsPanelBottomContentConfig {
    * （可选）自定义元素属性.setAttribute、.getAttribute
    * @default {}
    */
-  attributes?: PopsPanelCommonDetails<any>["attributes"];
+  attributes?: PopsPanelGeneralConfig<any>["attributes"];
   /**
    * （可选）自定义元素内部的属性值
    * @default {}
    */
-  props?: PopsPanelCommonDetails<any>["props"];
+  props?: PopsPanelGeneralConfig<any>["props"];
   /**
    * 该项的点击回调
    */
@@ -196,7 +203,7 @@ export interface PopsPanelBottomContentConfig {
 /**
  * pops.panel
  */
-export interface PopsPanelDetails extends PopsTitleConfig, PopsDragConfig, PopsCommonConfig {
+export interface PopsPanelConfig extends PopsTitleConfig, PopsDragConfig, PopsGeneralConfig {
   /**
    * 内容配置
    */
@@ -212,14 +219,14 @@ export interface PopsPanelDetails extends PopsTitleConfig, PopsDragConfig, PopsC
     /**
      * 关闭按钮
      */
-    close?: PopsHeaderCloseButtonDetails;
+    close?: PopsHeaderCloseButtonConfig;
   };
   /**
    * 移动端适配的的className
    *
    * @default "pops-panel-is-mobile"
    */
-  mobileClassName?: PopsPanelCommonDetails<any>["className"];
+  mobileClassName?: PopsPanelGeneralConfig<any>["className"];
   /**
    * 是否强制是移动端，默认false
    * + true 强制为移动端