@whitesev/pops 2.6.1 → 3.0.1

package/src/components/panel/handlerComponents.ts

@@ -7,28 +7,29 @@ import { popsUtils } from "../../utils/PopsUtils";
 import { PopsAlert } from "../alert";
 import { PopsTooltip } from "../tooltip";
 import { PopsCommonCSSClassName } from "../../config/CommonCSSClassName";
-import type { PopsAlertDetails } from "../alert/types";
-import type { PopsPanelButtonDetails } from "./types/components-button";
-import type { PopsPanelCommonDetails, PopsPanelRightAsideContainerOptions } from "./types/components-common";
-import type { PopsPanelDeepMenuDetails } from "./types/components-deepMenu";
-import type { PopsPanelFormsDetails } from "./types/components-forms";
+import type { PopsAlertConfig } from "../alert/types";
+import type { PopsPanelButtonConfig } from "./types/components-button";
+import type { PopsPanelGeneralConfig, PopsPanelRightAsideContainerConfig } from "./types/components-common";
+import type { PopsPanelDeepViewConfig } from "./types/components-deepMenu";
+import type { PopsPanelContainerConfig } from "./types/components-container";
 import type {
   PopsPanelBottomContentConfig,
   PopsPanelContentConfig,
-  PopsPanelDetails,
+  PopsPanelConfig,
   PopsPanelEventType,
-  PopsPanelFormsTotalDetails,
+  PopsPanelViewConfig,
 } from "./types";
-import type { PopsPanelInputDetails } from "./types/components-input";
-import type { PopsPanelOwnDetails } from "./types/components-own";
+import type { PopsPanelInputConfig, PopsPanelInputType } from "./types/components-input";
+import type { PopsPanelOwnConfig } from "./types/components-own";
 import type {
   PopsPanelSelectMultipleDataOption,
-  PopsPanelSelectMultipleDetails,
+  PopsPanelSelectMultipleConfig,
 } from "./types/components-selectMultiple";
-import type { PopsPanelSelectDetails } from "./types/components-select";
-import type { PopsPanelSliderDetails } from "./types/components-slider";
-import type { PopsPanelSwitchDetails } from "./types/components-switch";
-import type { PopsPanelTextAreaDetails } from "./types/components-textarea";
+import type { PopsPanelSelectConfig, PopsPanelSelectDataOption } from "./types/components-select";
+import type { PopsPanelSliderConfig } from "./types/components-slider";
+import type { PopsPanelSwitchConfig } from "./types/components-switch";
+import type { PopsPanelTextAreaConfig } from "./types/components-textarea";
+import { PopsCSS } from "../../PopsCSS";
 /**
  * 处理组件（把组件配置转为组件元素）
  */
@@ -69,13 +70,16 @@ export const PanelHandlerComponents = () => {
       $panelBottomLeftContainer: null as any as HTMLElement,
       $panelBottomRightContainer: null as any as HTMLElement,
     },
-    $config: {} as Required<PopsPanelDetails>,
+    $data: {
+      nodeStoreConfigKey: "data-view-config",
+    },
+    $config: {} as Required<PopsPanelConfig>,
     /**
      * 初始化
-     * @param details
+     * @param data
      */
-    init(details: {
-      config: Required<PopsPanelDetails>;
+    init(data: {
+      config: Required<PopsPanelConfig>;
       $el: {
         $pops: HTMLElement;
         $content: HTMLElement;
@@ -90,9 +94,9 @@ export const PanelHandlerComponents = () => {
     }) {
       const PopsType = "panel";
       this.$el = {
-        ...details.$el,
+        ...data.$el,
       };
-      this.$config = details.config;
+      this.$config = data.config;
 
       this.asideULElement = this.$el.$panelLeftAside.querySelector<HTMLUListElement>(
         `ul.pops-${PopsType}-aside-top-container`
@@ -113,9 +117,9 @@ export const PanelHandlerComponents = () => {
       /** 是否滚动到默认位置（第一个项） */
       let isScrollToDefaultView = false;
       // 初始化内容配置
-      details.config.content.forEach((asideItemConfig) => {
+      data.config.content.forEach((asideItemConfig) => {
         const $asideLiElement = this.createAsideItem(asideItemConfig);
-        this.setAsideItemClickEvent($asideLiElement, asideItemConfig);
+        this.onAsideItemClick($asideLiElement, asideItemConfig);
         // 是否处于底部
         const isBottom =
           typeof asideItemConfig.isBottom === "function" ? asideItemConfig.isBottom() : asideItemConfig.isBottom;
@@ -145,9 +149,9 @@ export const PanelHandlerComponents = () => {
         }
       });
       // 初始化底部内容配置
-      (details.config?.bottomContentConfig || []).forEach((bottomItemConfig) => {
+      (data.config?.bottomContentConfig || []).forEach((bottomItemConfig) => {
         const $bottomLiElement = this.createBottomItem(bottomItemConfig);
-        this.setBottomItemClickEvent($bottomLiElement, bottomItemConfig);
+        this.onBottomItemClick($bottomLiElement, bottomItemConfig);
         if (bottomItemConfig.position === "left" || bottomItemConfig.position == null) {
           this.$el.$panelBottomLeftContainer.appendChild($bottomLiElement);
         } else if (bottomItemConfig.position === "right") {
@@ -166,13 +170,13 @@ export const PanelHandlerComponents = () => {
         }
       });
 
-      /* 点击左侧列表 */
+      // 点击左侧列表
       if ($defaultAsideItem == null && this.asideULElement.children.length) {
-        /* 默认第一个 */
+        // 默认第一个
         $defaultAsideItem = <HTMLLIElement>this.asideULElement.children[0];
       }
       if ($defaultAsideItem) {
-        /* 点击选择的那一项 */
+        // 点击选择的那一项
         $defaultAsideItem.click();
         if (isScrollToDefaultView) {
           $defaultAsideItem?.scrollIntoView();
@@ -185,7 +189,7 @@ export const PanelHandlerComponents = () => {
      * 清空container容器的元素
      */
     clearContainer() {
-      Reflect.deleteProperty(this.$el.$panelContentSectionContainer, "__formConfig__");
+      Reflect.deleteProperty(this.$el.$panelContentSectionContainer, this.$data.nodeStoreConfigKey);
       PopsSafeUtils.setSafeHTML(this.sectionContainerHeaderULElement, "");
       PopsSafeUtils.setSafeHTML(this.sectionContainerULElement, "");
       this.clearDeepMenuContainer();
@@ -255,7 +259,7 @@ export const PanelHandlerComponents = () => {
      * @param $el 元素
      * @param className
      */
-    setElementClassName($el: HTMLElement, className?: PopsPanelCommonDetails<any>["className"]) {
+    setElementClassName($el: HTMLElement, className?: PopsPanelGeneralConfig<any>["className"]) {
       popsDOMUtils.addClassName($el, className);
     },
     /**
@@ -272,9 +276,9 @@ export const PanelHandlerComponents = () => {
         className: ["pops-panel-bottom-item", "pops-user-select-none", className].join(" "),
         innerHTML: text,
       });
-      /* 处理attr */
+      // 处理attr
       this.setElementAttributes($li, bottomItemConfig.attributes);
-      /* 处理props */
+      // 处理props
       this.setElementProps($li, bottomItemConfig.props);
       /** 禁用左侧项的hover的CSS样式的类名 */
       const disablHoverCSSClassName = "pops-panel-disable-bottom-item-hover-css";
@@ -295,10 +299,10 @@ export const PanelHandlerComponents = () => {
      * @param $bottomItem 底部<li>元素
      * @param bottomItemConfig 配置
      */
-    setBottomItemClickEvent($bottomItem: HTMLElement, bottomItemConfig: PopsPanelBottomContentConfig) {
+    onBottomItemClick($bottomItem: HTMLElement, bottomItemConfig: PopsPanelBottomContentConfig) {
       popsDOMUtils.on<MouseEvent | PointerEvent>($bottomItem, "click", async (event) => {
         if (typeof bottomItemConfig.clickCallback === "function") {
-          /* 执行回调 */
+          // 执行回调
           const asideClickCallbackResult = await bottomItemConfig.clickCallback(event);
           if (typeof asideClickCallbackResult === "boolean" && !asideClickCallbackResult) {
             return;
@@ -317,13 +321,13 @@ export const PanelHandlerComponents = () => {
         id: asideConfig.id,
         innerHTML: text,
       });
-      Reflect.set($li, "__forms__", asideConfig.forms);
-      /* 处理className */
+      Reflect.set($li, "__forms__", asideConfig.views);
+      // 处理className
       this.setElementClassName($li, "pops-panel-aside-item");
       this.setElementClassName($li, asideConfig.className);
-      /* 处理attr */
+      // 处理attr
       this.setElementAttributes($li, asideConfig.attributes);
-      /* 处理props */
+      // 处理props
       this.setElementProps($li, asideConfig.props);
       /** 禁用左侧项的hover的CSS样式的类名 */
       const disablHoverCSSClassName = "pops-panel-disabled-aside-hover-css";
@@ -342,24 +346,24 @@ export const PanelHandlerComponents = () => {
     /**
      * type ==> switch
      * 创建中间容器的元素<li>
-     * @param formConfig
+     * @param viewConfig
      */
-    createSectionContainerItem_switch(formConfig: PopsPanelSwitchDetails) {
+    createSectionContainerItem_switch(viewConfig: PopsPanelSwitchConfig) {
       const $li = popsDOMUtils.createElement("li");
-      Reflect.set($li, "__formConfig__", formConfig);
-      this.setElementClassName($li, formConfig.className);
-      this.setElementAttributes($li, formConfig.attributes);
-      this.setElementProps($li, formConfig.props);
-      /* 左边底部的描述的文字 */
+      Reflect.set($li, this.$data.nodeStoreConfigKey, viewConfig);
+      this.setElementClassName($li, viewConfig.className);
+      this.setElementAttributes($li, viewConfig.attributes);
+      this.setElementProps($li, viewConfig.props);
+      // 左边底部的描述的文字
       let leftDescriptionText = "";
-      if (formConfig.description) {
-        leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
+      if (viewConfig.description) {
+        leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${viewConfig.description}</p>`;
       }
       PopsSafeUtils.setSafeHTML(
         $li,
         /*html*/ `
 				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
+					<p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
 				<div class="pops-panel-switch">
 					<input class="pops-panel-switch__input" type="checkbox">
 					<span class="pops-panel-switch__core">
@@ -371,7 +375,7 @@ export const PanelHandlerComponents = () => {
       const PopsPanelSwitch = {
         [Symbol.toStringTag]: "PopsPanelSwitch",
         $data: {
-          value: Boolean(formConfig.getValue()),
+          value: Boolean(viewConfig.getValue()),
         },
         $ele: {
           itemLeftTextContainer: $li.querySelector<HTMLElement>(".pops-panel-item-left-text"),
@@ -381,16 +385,16 @@ export const PanelHandlerComponents = () => {
         },
         init() {
           this.setStatus(this.$data.value);
-          const disabled = typeof formConfig.disabled === "function" ? formConfig.disabled() : formConfig.disabled;
+          const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
           if (disabled) {
             this.disable();
           }
-          this.setClickEvent();
+          this.onClick();
         },
         /**
          * 设置点击事件
          */
-        setClickEvent() {
+        onClick() {
           const that = this;
           popsDOMUtils.on(this.$ele.core, "click", function (event) {
             if (that.$ele.input.disabled || that.$ele.switch.hasAttribute("data-disabled")) {
@@ -398,8 +402,8 @@ export const PanelHandlerComponents = () => {
             }
             that.$data.value = that.getStatus();
             that.setStatus(that.$data.value);
-            if (typeof formConfig.callback === "function") {
-              formConfig.callback(event, that.$data.value);
+            if (typeof viewConfig.callback === "function") {
+              viewConfig.callback(event, that.$data.value);
             }
           });
         },
@@ -445,93 +449,32 @@ export const PanelHandlerComponents = () => {
 
       PopsPanelSwitch.init();
       Reflect.set($li, "data-switch", PopsPanelSwitch);
-      return $li;
-    },
-    /**
-     * type ==> slider
-     * 获取中间容器的元素<li>
-     * @param formConfig
-     */
-    createSectionContainerItem_slider(formConfig: PopsPanelSliderDetails) {
-      const $li = popsDOMUtils.createElement("li");
-      Reflect.set($li, "__formConfig__", formConfig);
-      this.setElementClassName($li, formConfig.className);
-      this.setElementAttributes($li, formConfig.attributes);
-      this.setElementProps($li, formConfig.props);
-      /* 左边底部的描述的文字 */
-      let leftDescriptionText = "";
-      if (formConfig.description) {
-        leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
-      }
-      PopsSafeUtils.setSafeHTML(
-        $li,
-        /*html*/ `
-				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
-				<div class="pops-panel-slider">
-					<input type="range" min="${formConfig.min}" max="${formConfig.max}">
-				</div>
-			`
-      );
-      const $rangeInput = $li.querySelector<HTMLInputElement>(".pops-panel-slider input[type=range]")!;
-      if (formConfig.step) {
-        $rangeInput.setAttribute("step", formConfig.step.toString());
-      }
-      $rangeInput.value = formConfig.getValue().toString();
-      /**
-       * 获取提示的内容
-       * @param value
-       */
-      const getToolTipContent = function (value: number | string) {
-        if (typeof formConfig.getToolTipContent === "function") {
-          return formConfig.getToolTipContent(value as number);
-        } else {
-          return value as string;
-        }
+      return {
+        $el: $li,
+        handler: PopsPanelSwitch,
       };
-      const tooltip = PopsTooltip.init({
-        target: $rangeInput.parentElement!,
-        content: () => {
-          return getToolTipContent($rangeInput.value);
-        },
-        zIndex: () => {
-          return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
-        },
-        className: "github-tooltip",
-        alwaysShow: false,
-        only: false,
-        position: "top",
-        arrowDistance: 10,
-      });
-      popsDOMUtils.on<InputEvent>($rangeInput, ["input", "propertychange"], void 0, function (event) {
-        tooltip.toolTip.changeContent(getToolTipContent($rangeInput.value));
-        if (typeof formConfig.callback === "function") {
-          formConfig.callback(event, $rangeInput.valueAsNumber);
-        }
-      });
-      return $li;
     },
     /**
      * type ==> slider
      * 获取中间容器的元素<li>
-     * @param formConfig
+     * @param viewConfig
      */
-    createSectionContainerItem_slider_new(formConfig: PopsPanelSliderDetails) {
+    createSectionContainerItem_slider_new(viewConfig: PopsPanelSliderConfig) {
       const $li = popsDOMUtils.createElement("li");
-      Reflect.set($li, "__formConfig__", formConfig);
-      this.setElementClassName($li, formConfig.className);
-      this.setElementAttributes($li, formConfig.attributes);
-      this.setElementProps($li, formConfig.props);
-      /* 左边底部的描述的文字 */
+      Reflect.set($li, this.$data.nodeStoreConfigKey, viewConfig);
+      this.setElementClassName($li, viewConfig.className);
+      this.setElementAttributes($li, viewConfig.attributes);
+      this.setElementProps($li, viewConfig.props);
+      // 左边底部的描述的文字
       let leftDescriptionText = "";
-      if (formConfig.description) {
-        leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
+      if (viewConfig.description) {
+        leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${viewConfig.description}</p>`;
       }
       PopsSafeUtils.setSafeHTML(
         $li,
         /*html*/ `
 				<div class="pops-panel-item-left-text" style="flex: 1;">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
+					<p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
 				<div class="pops-slider pops-slider-width">
 					<div class="pops-slider__runway">
 						<div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
@@ -546,19 +489,19 @@ export const PanelHandlerComponents = () => {
         /**
          * 值
          */
-        value: formConfig.getValue(),
+        value: viewConfig.getValue(),
         /**
          * 最小值
          */
-        min: formConfig.min,
+        min: viewConfig.min,
         /**
          * 最大值
          */
-        max: formConfig.max,
+        max: viewConfig.max,
         /**
          * 间隔
          */
-        step: formConfig.step || 1,
+        step: viewConfig.step || 1,
         $data: {
           /**
            * 是否正在移动
@@ -628,9 +571,9 @@ export const PanelHandlerComponents = () => {
           this.initEleData();
           this.setToolTipEvent();
           this.setPanEvent();
-          this.setRunAwayClickEvent();
+          this.onRunAwayClick();
           this.intervalInit();
-          if (this.isFormConfigDisabledDrag()) {
+          if (this.isDisabledDragWithConfig()) {
             this.disableDrag();
           }
         },
@@ -658,7 +601,7 @@ export const PanelHandlerComponents = () => {
               if (this.$data.totalWidth !== 0) {
                 isSuccess = true;
                 if (this.$data.totalWidth !== oldTotalWidth) {
-                  /* slider的总宽度改变了 */
+                  // slider的总宽度改变了
                   if (PopsMathFloatUtils.isFloat(this.step)) {
                     this.initFloatStepMap();
                   } else {
@@ -669,7 +612,7 @@ export const PanelHandlerComponents = () => {
               }
             }
           }, checkStepTime);
-          /* 最长检测时间是10s */
+          // 最长检测时间是10s
           timer = setTimeout(() => {
             clearInterval(interval);
           }, maxTime);
@@ -707,7 +650,7 @@ export const PanelHandlerComponents = () => {
             const value = this.formatValue(stepValue);
             let info;
             if (value === this.min) {
-              /* 起始 */
+              // 起始
               info = {
                 value: value,
                 px: 0,
@@ -753,7 +696,7 @@ export const PanelHandlerComponents = () => {
             const value = this.formatValue(stepValue);
             let info;
             if (value === this.min) {
-              /* 起始 */
+              // 起始
               info = {
                 value: value,
                 px: 0,
@@ -785,10 +728,10 @@ export const PanelHandlerComponents = () => {
          * 初始化slider的默认起始left的百分比值
          */
         initSliderPosition() {
-          /* 设置起始默认style的left值 */
+          // 设置起始默认style的left值
           let percent = 0;
           for (const [, stepBlockInfo] of this.$data.stepBlockMap.entries()) {
-            /* 判断值是否和区域内的值相等 */
+            // 判断值是否和区域内的值相等
             if (stepBlockInfo.value == this.value) {
               percent = stepBlockInfo.percent;
               this.$data.dragWidth = stepBlockInfo.px;
@@ -811,8 +754,8 @@ export const PanelHandlerComponents = () => {
          * @param value
          */
         valueChangeCallBack(event: any, value: number) {
-          if (typeof formConfig.callback === "function") {
-            formConfig.callback(event, value);
+          if (typeof viewConfig.callback === "function") {
+            viewConfig.callback(event, value);
           }
         },
         /**
@@ -859,9 +802,9 @@ export const PanelHandlerComponents = () => {
           if (percent > 1) {
             percent = percent / 100;
           }
-          /* 滑块按钮的偏移 */
+          // 滑块按钮的偏移
           this.$ele.buttonWrapper.style.left = `${percent * 100}%`;
-          /* 滑块进度的宽度 */
+          // 滑块进度的宽度
           this.$ele.bar.style.width = `${percent * 100}%`;
         },
         /**
@@ -887,8 +830,8 @@ export const PanelHandlerComponents = () => {
         /**
          * 判断当前滑块是否被禁用（配置中判断）
          */
-        isFormConfigDisabledDrag() {
-          const isDisabled = typeof formConfig.disabled === "function" ? formConfig.disabled() : formConfig.disabled;
+        isDisabledDragWithConfig() {
+          const isDisabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
           if (typeof isDisabled === "boolean") {
             return isDisabled;
           } else {
@@ -898,7 +841,7 @@ export const PanelHandlerComponents = () => {
         /**
          * 设置进度条点击定位的事件
          */
-        setRunAwayClickEvent() {
+        onRunAwayClick() {
           popsDOMUtils.on<PointerEvent | MouseEvent>(
             this.$ele.runAway,
             "click",
@@ -923,7 +866,7 @@ export const PanelHandlerComponents = () => {
          * 拖拽开始的回调，如果返回false，禁止拖拽
          */
         dragStartCallBack() {
-          if (this.isFormConfigDisabledDrag()) {
+          if (this.isDisabledDragWithConfig()) {
             // 禁止
             this.disableDrag();
             return false;
@@ -993,7 +936,7 @@ export const PanelHandlerComponents = () => {
            * 当前的拖拽的距离px
            */
           let currentDragX = 0;
-          /* 监听拖拽 */
+          // 监听拖拽
           this.$tooltip.on("at:move", (event) => {
             if (!this.dragStartCallBack()) {
               return;
@@ -1007,10 +950,10 @@ export const PanelHandlerComponents = () => {
               displacementX = runAwayRect.width;
             }
             currentDragX = displacementX;
-            /* 拖拽移动 */
+            // 拖拽移动
             this.dragMoveCallBack(event, currentDragX, oldValue);
           });
-          /* 监听触点离开，处理某些情况下，拖拽松开，但是未触发pan事件，可以通过设置这个来关闭tooltip */
+          // 监听触点离开，处理某些情况下，拖拽松开，但是未触发pan事件，可以通过设置这个来关闭tooltip
           this.$tooltip.on("at:end", () => {
             this.dragEndCallBack(currentDragX);
           });
@@ -1055,15 +998,15 @@ export const PanelHandlerComponents = () => {
            * 获取提示的内容
            */
           function getToolTipContent() {
-            if (typeof formConfig.getToolTipContent === "function") {
-              return formConfig.getToolTipContent(PopsPanelSlider.value);
+            if (typeof viewConfig.getToolTipContent === "function") {
+              return viewConfig.getToolTipContent(PopsPanelSlider.value);
             } else {
               return PopsPanelSlider.value.toString();
             }
           }
 
           const tooltip = PopsTooltip.init({
-            target: this.$ele.button,
+            $target: this.$ele.button,
             content: getToolTipContent,
             zIndex: () => {
               return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
@@ -1077,10 +1020,10 @@ export const PanelHandlerComponents = () => {
             },
             showBeforeCallBack: () => {
               const isShowHoverTip =
-                typeof formConfig.isShowHoverTip === "function"
-                  ? formConfig.isShowHoverTip()
-                  : typeof formConfig.isShowHoverTip === "boolean"
-                    ? formConfig.isShowHoverTip
+                typeof viewConfig.isShowHoverTip === "function"
+                  ? viewConfig.isShowHoverTip()
+                  : typeof viewConfig.isShowHoverTip === "boolean"
+                    ? viewConfig.isShowHoverTip
                     : true;
               if (!isShowHoverTip) {
                 return false;
@@ -1105,238 +1048,349 @@ export const PanelHandlerComponents = () => {
       };
       PopsPanelSlider.init();
       Reflect.set($li, "data-slider", PopsPanelSlider);
-      return $li;
+      return {
+        $el: $li,
+        handler: PopsPanelSlider,
+      };
     },
     /**
      * type ==> input
      * 获取中间容器的元素<li>
-     * @param formConfig
+     * @param viewConfig
      */
-    createSectionContainerItem_input(formConfig: PopsPanelInputDetails) {
+    createSectionContainerItem_input(viewConfig: PopsPanelInputConfig) {
       const $li = popsDOMUtils.createElement("li");
-      Reflect.set($li, "__formConfig__", formConfig);
-      this.setElementClassName($li, formConfig.className);
-      this.setElementAttributes($li, formConfig.attributes);
-      this.setElementProps($li, formConfig.props);
-      let inputType = "text";
-      if (formConfig.isPassword) {
-        inputType = "password";
-      } else if (formConfig.isNumber) {
-        inputType = "number";
-      }
-      /* 左边底部的描述的文字 */
+      Reflect.set($li, this.$data.nodeStoreConfigKey, viewConfig);
+      this.setElementClassName($li, viewConfig.className);
+      this.setElementAttributes($li, viewConfig.attributes);
+      this.setElementProps($li, viewConfig.props);
+      const defaultInputType: PopsPanelInputType = "text";
+      const inputType = viewConfig.inputType || defaultInputType;
+      // 左边底部的描述的文字
       let leftDescriptionText = "";
-      if (formConfig.description) {
-        leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
+      if (viewConfig.description) {
+        leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${viewConfig.description}</p>`;
       }
       PopsSafeUtils.setSafeHTML(
         $li,
         /*html*/ `
 				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
+					<p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
 				<div class="pops-panel-input">
-					<input type="${inputType}" placeholder="${formConfig.placeholder ?? ""}">
+          <div class="pops-panel-input_inner">
+					  <input type="${inputType}" placeholder="${viewConfig.placeholder ?? ""}">
+          </div>
 				</div>
 				`
       );
       const PopsPanelInput = {
         [Symbol.toStringTag]: "PopsPanelInput",
-        $ele: {
+        $el: {
           itemLeftTextContainer: $li.querySelector<HTMLElement>(".pops-panel-item-left-text"),
           panelInput: $li.querySelector<HTMLDivElement>(".pops-panel-input")!,
+          panelInputInner: $li.querySelector<HTMLDivElement>(".pops-panel-input_inner")!,
           input: $li.querySelector<HTMLInputElement>("input")!,
-          inputSpanIcon: popsDOMUtils.createElement("span"),
-          inputSpanIconInner: null as any as HTMLSpanElement,
+          /** span.pops-panel-input__suffix */
+          suffix: popsDOMUtils.createElement("span"),
+          /** span.pops-panel-input__suffix-inner */
+          suffixInner: null as any as HTMLSpanElement,
+          /** i.pops-panel-icon */
           icon: null as any as HTMLElement,
         },
         $data: {
-          value: formConfig.getValue(),
-          isView: false,
+          value: viewConfig.getValue(),
+          /**
+           * inputType 为 password时使用该值
+           *
+           * 当前内容的可见性
+           */
+          isVisible: false,
         },
         init() {
           this.initEle();
           this.setInputValue(this.$data.value);
-          /* 如果是密码框，放进图标 */
-          if (formConfig.isPassword) {
+          // 如果是密码框，放进图标
+          if (viewConfig.inputType === "password") {
+            // 显示密码
             this.setCircleIcon(PopsIcon.getIcon("view")!);
-            this.setCircleIconClickEvent();
+            this.onIconClick();
           } else {
-            /* 先判断预设值是否为空，不为空添加清空图标按钮 */
-            if (this.$ele.input.value != "") {
+            // 先判断预设值是否为空，不为空添加清空图标按钮
+            // 且为普通的输入框
+            if (this.$el.input.value != "" && this.isTextInputType()) {
+              // 清除内容的图标
               this.setCircleIcon(PopsIcon.getIcon("circleClose")!);
-              this.setCircleIconClickEvent();
+              this.onIconClick();
+            } else {
+              // 隐藏图标
+              this.hideCircleIconWrapper();
             }
           }
 
-          this.setInputChangeEvent();
+          this.onValueChange();
           // 是否禁用复选框
-          const disabled = typeof formConfig.disabled === "function" ? formConfig.disabled() : formConfig.disabled;
+          const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
           if (disabled) {
             this.disable();
           }
-          if (typeof formConfig.handlerCallBack === "function") {
-            formConfig.handlerCallBack($li, this.$ele.input);
+          if (typeof viewConfig.handlerCallBack === "function") {
+            viewConfig.handlerCallBack($li, this.$el.input);
           }
         },
         /**
          * 初始化$ele的配置
          */
         initEle() {
-          this.$ele.input.parentElement!.insertBefore(this.$ele.inputSpanIcon, this.$ele.input.nextSibling);
-          popsDOMUtils.addClassName(this.$ele.inputSpanIcon, "pops-panel-input__suffix");
+          this.$el.input.parentElement!.insertBefore(this.$el.suffix, this.$el.input.nextSibling);
+          popsDOMUtils.addClassName(this.$el.suffix, "pops-panel-input__suffix");
           PopsSafeUtils.setSafeHTML(
-            this.$ele.inputSpanIcon,
+            this.$el.suffix,
             /*html*/ `
 						<span class="pops-panel-input__suffix-inner">
 							<i class="pops-panel-icon"></i>
 						</span>
 					`
           );
-          this.$ele.inputSpanIconInner = this.$ele.inputSpanIcon.querySelector<HTMLElement>(
-            ".pops-panel-input__suffix-inner"
-          )!;
-          this.$ele.icon = this.$ele.inputSpanIcon.querySelector<HTMLElement>(".pops-panel-icon")!;
-          popsDOMUtils.addClassName(this.$ele.panelInput, PopsCommonCSSClassName.userSelectNone);
+          this.$el.suffixInner = this.$el.suffix.querySelector<HTMLElement>(".pops-panel-input__suffix-inner")!;
+          this.$el.icon = this.$el.suffix.querySelector<HTMLElement>(".pops-panel-icon")!;
+          popsDOMUtils.addClassName(this.$el.panelInput, PopsCommonCSSClassName.userSelectNone);
+        },
+        /**
+         * 校验输入框类型是否是字符串输入框类型
+         */
+        isTextInputType() {
+          const typeList: PopsPanelInputType[] = ["text", "search", "email", "tel", "url"];
+          return typeList.includes(viewConfig.inputType || defaultInputType);
+        },
+        /**
+         * 是否是时间输入框类型
+         */
+        isDateInputType() {
+          const typeList: PopsPanelInputType[] = ["date", "datetime-local", "month", "time", "week"];
+          return typeList.includes(viewConfig.inputType || defaultInputType);
+        },
+        /**
+         * 是否是数字输入框类型
+         */
+        isNumberInputType() {
+          const typeList: PopsPanelInputType[] = ["number"];
+          return typeList.includes(viewConfig.inputType || defaultInputType);
         },
         /**
          * 禁用
          */
         disable() {
-          this.$ele.input.disabled = true;
-          popsDOMUtils.addClassName(this.$ele.panelInput, "pops-input-disabled");
-          popsDOMUtils.addClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
+          this.$el.input.disabled = true;
+          popsDOMUtils.addClassName(this.$el.panelInput, "pops-input-disabled");
+          popsDOMUtils.addClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
         },
         /**
          * 取消禁用
          */
         notDisable() {
-          this.$ele.input.disabled = false;
-          popsDOMUtils.removeClassName(this.$ele.panelInput, "pops-input-disabled");
-          popsDOMUtils.removeClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
+          this.$el.input.disabled = false;
+          popsDOMUtils.removeClassName(this.$el.panelInput, "pops-input-disabled");
+          popsDOMUtils.removeClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
         },
         /**
          * 判断是否已被禁用
          */
         isDisabled() {
-          return this.$ele.input.disabled;
+          return this.$el.input.disabled;
         },
         /**
          * 设置输入框内容
-         * @param {string} [value=""] 值
+         * @param value 值
          */
-        setInputValue(value = "") {
-          this.$ele.input.value = value;
+        setInputValue(value: string | number | Date = "") {
+          if (typeof value === "number" && this.isNumberInputType()) {
+            this.$el.input.valueAsNumber = value;
+          } else if (typeof value === "object" && value instanceof Date && this.isDateInputType()) {
+            this.$el.input.valueAsDate = value;
+          } else {
+            this.$el.input.value = value.toString();
+          }
         },
         /**
          * 设置input元素的type
-         * @param [typeValue="text"] type值
+         * @param typeValue type值
          */
-        setInputType(typeValue = "text") {
-          this.$ele.input.setAttribute("type", typeValue);
+        setInputType(typeValue: PopsPanelInputType = "text") {
+          this.$el.input.setAttribute("type", typeValue);
         },
         /**
          * 删除图标按钮
          */
         removeCircleIcon() {
-          PopsSafeUtils.setSafeHTML(this.$ele.icon, "");
+          PopsSafeUtils.setSafeHTML(this.$el.icon, "");
         },
         /**
          * 添加清空图标按钮
-         * @param [svgHTML=PopsIcon.getIcon("circleClose")] svg图标，默认为清空的图标
+         * @param svgHTML svg图标，默认为清空的图标
          */
-        setCircleIcon(svgHTML = PopsIcon.getIcon("circleClose")!) {
-          PopsSafeUtils.setSafeHTML(this.$ele.icon, svgHTML);
+        setCircleIcon(svgHTML: string = PopsIcon.getIcon("circleClose")!) {
+          PopsSafeUtils.setSafeHTML(this.$el.icon, svgHTML);
+        },
+        /**
+         * 隐藏图标容器
+         */
+        hideCircleIconWrapper() {
+          popsDOMUtils.cssHide(this.$el.suffix, true);
+        },
+        /**
+         * 显示图标容器
+         */
+        showCircleIconWrapper() {
+          popsDOMUtils.cssShow(this.$el.suffix);
         },
         /**
          * 添加图标按钮的点击事件
          */
-        setCircleIconClickEvent() {
-          popsDOMUtils.on(this.$ele.icon, "click", void 0, () => {
+        onIconClick() {
+          popsDOMUtils.on(this.$el.icon, "click", (evt) => {
+            popsDOMUtils.preventEvent(evt);
             if (this.isDisabled()) {
               return;
             }
-            /* 删除图标 */
+            // 删除图标
             this.removeCircleIcon();
-            if (formConfig.isPassword) {
-              /* 密码输入框 */
-              if (this.$data.isView) {
-                /* 当前可见 => 点击改变为隐藏 */
-                this.$data.isView = false;
-                /* 显示输入框内容，且更换图标为隐藏图标 */
+            if (inputType === "password") {
+              // 配置类型为密码输入框
+              if (this.$data.isVisible) {
+                // 当前可见 => 点击改变为隐藏
+                this.$data.isVisible = false;
+                // 显示输入框内容，且更换图标为隐藏图标
                 this.setInputType("text");
                 this.setCircleIcon(PopsIcon.getIcon("hide")!);
               } else {
-                /* 当前不可见 => 点击改变为显示 */
-                this.$data.isView = true;
-                /* 隐藏输入框内容，且更换图标为显示图标 */
+                // 当前不可见 => 点击改变为显示
+                this.$data.isVisible = true;
+                // 隐藏输入框内容，且更换图标为显示图标
                 this.setInputType("password");
                 this.setCircleIcon(PopsIcon.getIcon("view")!);
               }
             } else {
-              /* 普通输入框 */
-              /* 清空内容 */
+              // 普通输入框
+              // 清空内容
               this.setInputValue("");
-              /* 获取焦点 */
-              this.$ele.input.focus();
-              /* 触发内容改变事件 */
-              this.$ele.input.dispatchEvent(new Event("input"));
+              // 获取焦点
+              this.$el.input.focus();
+              // 触发内容改变事件
+              this.$el.input.dispatchEvent(new Event("input"));
             }
           });
         },
         /**
          * 监听输入框内容改变
          */
-        setInputChangeEvent() {
-          popsDOMUtils.on<InputEvent>(this.$ele.input, ["input", "propertychange"], void 0, (event) => {
-            this.$data.value = this.$ele.input.value;
-            if (!formConfig.isPassword) {
-              /* 不是密码框 */
-              if (this.$ele.input.value !== "" && this.$ele.icon.innerHTML === "") {
-                /* 不为空，显示清空图标 */
+        onValueChange() {
+          popsDOMUtils.on<InputEvent>(this.$el.input, ["input", "propertychange"], void 0, (event) => {
+            this.$data.value = this.$el.input.value;
+            if (inputType !== "password") {
+              // 不是密码框
+              if (this.$el.input.value !== "" && this.$el.icon.innerHTML === "" && this.isTextInputType()) {
+                // 不为空，显示清空图标
                 this.setCircleIcon(PopsIcon.getIcon("circleClose")!);
-                this.setCircleIconClickEvent();
-              } else if (this.$ele.input.value === "") {
+                this.onIconClick();
+                this.showCircleIconWrapper();
+              } else if (this.$el.input.value === "") {
                 this.removeCircleIcon();
               }
             }
-            if (typeof formConfig.callback === "function") {
-              if (formConfig.isNumber) {
-                formConfig.callback(event, this.$ele.input.value, this.$ele.input.valueAsNumber);
+            if (typeof viewConfig.callback === "function") {
+              let ret;
+              if (viewConfig.inputType === "number") {
+                ret = viewConfig.callback(event, this.$el.input.value, this.$el.input.valueAsNumber);
+              } else if (this.isDateInputType()) {
+                ret = viewConfig.callback(
+                  event,
+                  this.$el.input.value,
+                  this.$el.input.valueAsNumber,
+                  this.$el.input.valueAsDate
+                );
+              } else {
+                ret = viewConfig.callback(event, this.$el.input.value);
+              }
+              if (ret) {
+                if (ret.valid) {
+                  // 校验通过
+                  this.removeValidErrorMsg();
+                } else {
+                  // 校验失败
+                  // 显示失败提示
+                  this.addValidErrorMsg(ret.message);
+                }
               } else {
-                formConfig.callback(event, this.$ele.input.value);
+                this.removeValidErrorMsg();
               }
             }
           });
         },
+        /**
+         * 主动触发输入框改变事件
+         */
+        triggerValueChange() {
+          this.$el.input.dispatchEvent(new Event("input"));
+        },
+        /**
+         * 添加校验失败的提示信息
+         * @param msg 提示信息
+         */
+        addValidErrorMsg(msg?: string) {
+          if (msg == null) return;
+          const $validErrorMsg =
+            this.$el.panelInput.querySelector<HTMLDivElement>(".pops-panel-input-valid-error") ||
+            popsDOMUtils.createElement("div", {
+              className: "pops-panel-input-valid-error",
+              innerHTML: /*html*/ `<span></span>`,
+            });
+          const $validErrorMsgSpan = $validErrorMsg.querySelector("span")!;
+          if ($validErrorMsgSpan.innerHTML !== msg) {
+            PopsSafeUtils.setSafeHTML($validErrorMsgSpan, msg);
+          }
+          if (!$validErrorMsg.parentElement) {
+            popsDOMUtils.after(this.$el.panelInputInner, $validErrorMsg);
+          }
+        },
+        /**
+         * 移除校验失败的提示信息
+         */
+        removeValidErrorMsg() {
+          const $validErrorMsg = this.$el.panelInput.querySelector(".pops-panel-input-valid-error");
+          $validErrorMsg?.remove();
+        },
       };
       PopsPanelInput.init();
       Reflect.set($li, "data-input", PopsPanelInput);
-      return $li;
+      return {
+        $el: $li,
+        handler: PopsPanelInput,
+      };
     },
     /**
      * type ==> textarea
      * 获取中间容器的元素<li>
-     * @param formConfig
+     * @param viewConfig
      */
-    createSectionContainerItem_textarea(formConfig: PopsPanelTextAreaDetails) {
+    createSectionContainerItem_textarea(viewConfig: PopsPanelTextAreaConfig) {
       const $li = popsDOMUtils.createElement("li");
-      Reflect.set($li, "__formConfig__", formConfig);
-      this.setElementClassName($li, formConfig.className);
-      this.setElementAttributes($li, formConfig.attributes);
-      this.setElementProps($li, formConfig.props);
+      Reflect.set($li, this.$data.nodeStoreConfigKey, viewConfig);
+      this.setElementClassName($li, viewConfig.className);
+      this.setElementAttributes($li, viewConfig.attributes);
+      this.setElementProps($li, viewConfig.props);
 
-      /* 左边底部的描述的文字 */
+      // 左边底部的描述的文字
       let leftDescriptionText = "";
-      if (formConfig.description) {
-        leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
+      if (viewConfig.description) {
+        leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${viewConfig.description}</p>`;
       }
       PopsSafeUtils.setSafeHTML(
         $li,
         /*html*/ `
 				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
+					<p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
 				<div class="pops-panel-textarea">
-					<textarea placeholder="${formConfig.placeholder ?? ""}"></textarea>
+					<textarea placeholder="${viewConfig.placeholder ?? ""}"></textarea>
 				</div>
 			`
       );
@@ -1349,12 +1403,12 @@ export const PanelHandlerComponents = () => {
           textarea: $li.querySelector<HTMLTextAreaElement>(".pops-panel-textarea textarea")!,
         },
         $data: {
-          value: formConfig.getValue(),
+          value: viewConfig.getValue(),
         },
         init() {
           this.setValue(this.$data.value);
-          this.setChangeEvent();
-          const disabled = typeof formConfig.disabled === "function" ? formConfig.disabled() : formConfig.disabled;
+          this.onValueChange();
+          const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
           if (disabled) {
             this.disable();
           }
@@ -1381,12 +1435,12 @@ export const PanelHandlerComponents = () => {
         /**
          * 监听选择内容改变
          */
-        setChangeEvent() {
+        onValueChange() {
           popsDOMUtils.on<InputEvent>(this.$ele.textarea, ["input", "propertychange"], (event) => {
             const value = this.$ele.textarea.value;
             this.$data.value = value;
-            if (typeof formConfig.callback === "function") {
-              formConfig.callback(
+            if (typeof viewConfig.callback === "function") {
+              viewConfig.callback(
                 event as InputEvent & {
                   target: HTMLTextAreaElement;
                 },
@@ -1400,231 +1454,882 @@ export const PanelHandlerComponents = () => {
       PopsPanelTextArea.init();
       Reflect.set($li, "data-textarea", PopsPanelTextArea);
 
-      return $li;
+      return {
+        $el: $li,
+        handler: PopsPanelTextArea,
+      };
     },
     /**
      * type ==> select
      * 获取中间容器的元素<li>
-     * @param formConfig
+     * @param viewConfig
      */
-    createSectionContainerItem_select(formConfig: PopsPanelSelectDetails<any>) {
+    createSectionContainerItem_select(viewConfig: PopsPanelSelectConfig<any>) {
       const that = this;
       const $li = popsDOMUtils.createElement("li");
-      Reflect.set($li, "__formConfig__", formConfig);
-      this.setElementClassName($li, formConfig.className);
-      this.setElementAttributes($li, formConfig.attributes);
-      this.setElementProps($li, formConfig.props);
-      /* 左边底部的描述的文字 */
+      Reflect.set($li, this.$data.nodeStoreConfigKey, viewConfig);
+      this.setElementClassName($li, viewConfig.className);
+      this.setElementAttributes($li, viewConfig.attributes);
+      this.setElementProps($li, viewConfig.props);
+      // 左边底部的描述的文字
       let leftDescriptionText = "";
-      if (formConfig.description) {
-        leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
+      if (viewConfig.description) {
+        leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${viewConfig.description}</p>`;
       }
       PopsSafeUtils.setSafeHTML(
         $li,
         /*html*/ `
 				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
+					<p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
 				<div class="pops-panel-select">
 					<select></select>
 				</div>
 				`
       );
+      let handler;
+      if (viewConfig.useDialog) {
+        const PopsPanelSelect = {
+          [Symbol.toStringTag]: "PopsPanelSelect",
+          $el: {
+            itemLeftTextContainer: $li.querySelector<HTMLElement>(".pops-panel-item-left-text"),
+            /** 选择框容器 */
+            $container: void 0 as any as HTMLElement,
+            /** 选择框包裹的容器 */
+            $wrapper: void 0 as any as HTMLElement,
+            /** 内容区域 */
+            $section: void 0 as any as HTMLElement,
+            /** 手动输入 */
+            $selectedInputWrapper: void 0 as any as HTMLElement,
+            /** 灰色提示语 */
+            $selectedPlaceHolderWrapper: void 0 as any as HTMLElement,
+            /** 下拉箭头区域 */
+            $suffix: void 0 as any as HTMLElement,
+            /** 下拉箭头图标 */
+            $suffixIcon: void 0 as any as HTMLElement,
+            /** 下拉列表弹窗的下拉列表容器 */
+            $selectDialogContainer: void 0 as any as HTMLElement | null,
+          },
+          $data: {
+            /**
+             * 数据
+             */
+            data: [] as PopsPanelSelectDataOption<any>[],
+            /**
+             * 默认值
+             */
+            defaultValue: viewConfig.getValue(),
+            /**
+             * 选择的信息
+             */
+            selectedData: void 0 as PopsPanelSelectDataOption<any> | undefined,
+            /**
+             * 是否验证通过
+             */
+            isValidSuccess: true,
+            /**
+             * 箭头旋转的属性
+             */
+            rotateKey: "data-show-option",
+          },
+          /** 初始化 */
+          init() {
+            this.initDefault();
+            this.initEl();
+            this.initPlaceHolder();
+            this.renderSelectText();
+            this.onShowSelectDialogClick();
 
-      const PopsPanelSelect = {
-        [Symbol.toStringTag]: "PopsPanelSelect",
-        $ele: {
-          itemLeftTextContainer: $li.querySelector<HTMLElement>(".pops-panel-item-left-text"),
-          panelSelect: $li.querySelector<HTMLDivElement>(".pops-panel-select")!,
-          select: $li.querySelector<HTMLSelectElement>(".pops-panel-select select")!,
-        },
-        $eleKey: {
-          disable: "__disable__",
-          value: "__value__",
-          forms: "__forms__",
-        },
-        $data: {
-          defaultValue: formConfig.getValue(),
-        },
-        init() {
-          popsDOMUtils.addClassName(this.$ele.panelSelect, PopsCommonCSSClassName.userSelectNone);
-          this.initOption();
-          this.setChangeEvent();
-          this.setClickEvent();
-          const disabled = typeof formConfig.disabled === "function" ? formConfig.disabled() : formConfig.disabled;
-          if (disabled) {
-            this.disable();
-          }
-        },
-        /**
-         * 给option元素设置属性
-         * @param $ele
-         * @param key
-         * @param value
-         */
-        setNodeValue($ele: HTMLElement, key: string, value: any) {
-          Reflect.set($ele, key, value);
-        },
-        /**
-         * 获取option元素上设置的属性
-         * @param $ele
-         * @param value
-         * @param key
-         */
-        getNodeValue($ele: HTMLElement, key: string) {
-          return Reflect.get($ele, key);
-        },
-        /**
-         * 禁用选项
-         */
-        disable() {
-          this.$ele.select.setAttribute("disabled", "true");
-          popsDOMUtils.addClassName(this.$ele.panelSelect, "pops-panel-select-disable");
-          popsDOMUtils.addClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
-        },
-        /**
-         * 取消禁用
-         */
-        notDisable() {
-          this.$ele.select.removeAttribute("disabled");
-          popsDOMUtils.removeClassName(this.$ele.panelSelect, "pops-panel-select-disable");
-          popsDOMUtils.removeClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
-        },
-        /**
-         * 判断是否禁用
-         */
-        isDisabled() {
-          return (
-            this.$ele.select.hasAttribute("disabled") ||
-            popsDOMUtils.containsClassName(this.$ele.panelSelect, "pops-panel-select-disable")
-          );
-        },
-        /**
-         * 初始化选项
-         */
-        initOption() {
-          formConfig.data.forEach((dataItem) => {
-            // 初始化默认选中
-            const optionElement = popsDOMUtils.createElement("option");
-            this.setNodeValue(optionElement, this.$eleKey.value, dataItem.value);
-            this.setNodeValue(optionElement, this.$eleKey.disable, dataItem.disable);
-            this.setNodeValue(optionElement, this.$eleKey.forms, dataItem.forms);
-            if (dataItem.value === this.$data.defaultValue) {
-              this.setOptionSelected(optionElement);
+            const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
+            if (disabled) {
+              this.disable();
             }
-            optionElement.innerText = dataItem.text;
-            this.$ele.select.appendChild(optionElement);
-          });
-        },
-        /**
-         * 设置选项选中
-         */
-        setOptionSelected($option: HTMLOptionElement) {
-          $option.setAttribute("selected", "true");
-        },
-        /** 检测所有option并设置禁用状态 */
-        setSelectOptionsDisableStatus() {
-          if (this.$ele.select.options && this.$ele.select.options.length) {
-            Array.from(this.$ele.select.options).forEach((optionItem) => {
-              this.setOptionDisableStatus(optionItem);
+          },
+          /** 初始化默认值 */
+          initDefault() {
+            this.$data.data = typeof viewConfig.data === "function" ? viewConfig.data() : viewConfig.data;
+            this.$data.data.forEach((dataItem) => {
+              if (this.$data.defaultValue.includes(dataItem.value)) {
+                // 初始化选中的配置
+                this.resetCurrentSelectedInfo();
+                this.updateSelectedInfo(dataItem);
+              }
             });
-          }
-        },
-        /** 设置禁用状态 */
-        setOptionDisableStatus(optionElement: HTMLOptionElement) {
-          let disable = false;
-          const optionDisableAttr = this.getNodeValue(optionElement, this.$eleKey.disable);
-          if (optionDisableAttr === "function") {
-            const value = this.getNodeValue(optionElement, this.$eleKey.value);
-            disable = Boolean(optionDisableAttr(value));
-          }
-          if (disable) {
-            optionElement.setAttribute("disabled", "true");
-          } else {
-            optionElement.removeAttribute("disabled");
-          }
-        },
-        /** 获取option上的信息 */
-        getSelectOptionInfo($option: HTMLOptionElement) {
-          const optionValue = this.getNodeValue($option, this.$eleKey.value);
-          const optionText = $option.innerText || $option.textContent!;
-          const optionForms = this.getNodeValue($option, this.$eleKey.forms) as (typeof formConfig.data)[0]["forms"];
-          return {
-            value: optionValue,
-            text: optionText,
-            forms: optionForms,
-            $option: $option,
-          };
-        },
-        /**
-         * 监听选择内容改变
-         */
-        setChangeEvent() {
-          popsDOMUtils.on<PointerEvent | TouchEvent>(this.$ele.select, "change", void 0, (event) => {
-            const $isSelectedElement = this.$ele.select[this.$ele.select.selectedIndex] as HTMLOptionElement;
-            const selectInfo = this.getSelectOptionInfo($isSelectedElement);
-            this.setSelectOptionsDisableStatus();
-            if (typeof formConfig.callback === "function") {
-              formConfig.callback(event, selectInfo.value, selectInfo.text);
+          },
+          /** 初始化$ele变量 */
+          initEl() {
+            this.$el.$container = $li.querySelector<HTMLElement>(".pops-panel-select")!;
+            PopsSafeUtils.setSafeHTML(
+              this.$el.$container,
+              /*html*/ `
+              <div class="el-select__wrapper">
+                <div class="el-select__selection">
+                  <!-- 这个是用于手动输入的，这里暂不适配 -->
+                  <div class="el-select__selected-item el-select__input-wrapper"></div>
+                  <!-- 这个是placeholder -->
+                  <div class="el-select__selected-item el-select__placeholder"></div>
+                </div>
+                <!-- 下拉箭头 -->
+                <div class="el-select__suffix">
+                  <i class="el-icon el-select__caret el-select__icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+                      <path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path>
+                    </svg>
+                  </i>
+                </div>
+              </div>`
+            );
+            this.$el.$wrapper = $li.querySelector<HTMLElement>(".el-select__wrapper")!;
+            this.$el.$section = $li.querySelector<HTMLElement>(".el-select__selection")!;
+            this.$el.$selectedInputWrapper = $li.querySelector<HTMLElement>(
+              ".el-select__selected-item.el-select__input-wrapper"
+            )!;
+            this.$el.$selectedPlaceHolderWrapper = $li.querySelector<HTMLElement>(
+              ".el-select__selected-item.el-select__placeholder"
+            )!;
+            this.$el.$suffix = $li.querySelector<HTMLElement>(".el-select__suffix")!;
+            this.$el.$suffixIcon = $li.querySelector<HTMLElement>(".el-select__suffix .el-icon")!;
+
+            // 先把手动输入框隐藏
+            this.hideInputWrapper();
+          },
+          /**
+           * 初始化提示文字
+           */
+          initPlaceHolder() {
+            let placeholder = "--请选择--";
+            if (typeof viewConfig.placeholder === "string") {
+              placeholder = viewConfig.placeholder;
+            } else if (typeof viewConfig.placeholder === "function") {
+              const placeholderResult = viewConfig.placeholder();
+              if (typeof placeholderResult === "string") {
+                placeholder = placeholderResult;
+              }
+            }
+            /**
+             * 默认提示文字的位置
+             */
+            const defaultSelectedTextAlign: NonNullable<PopsPanelSelectConfig<any>["selectedTextAlign"]> = "left";
+            this.$el.$section.setAttribute(
+              "data-selected-text-align",
+              viewConfig.selectedTextAlign || defaultSelectedTextAlign
+            );
+
+            const $placeholder = popsDOMUtils.createElement("span", {
+              innerText: placeholder,
+            });
+            this.$el.$selectedPlaceHolderWrapper.appendChild($placeholder);
+          },
+          /**
+           * 重新渲染外面的已选择项的文本
+           *
+           * 如果未选择，显示提示文字
+           */
+          renderSelectText() {
+            let item = this.$data.data.find((dataItem) => {
+              return dataItem.value === this.$data.selectedData?.value;
+            });
+            if (item == null) {
+              // 未找到但是有选中信息，且是自定义输入的
+              if (this.$data.selectedData && this.$data.selectedData.addCustomInput) {
+                item = this.$data.selectedData;
+              }
             }
-            const forms = typeof selectInfo.forms === "function" ? selectInfo.forms() : selectInfo.forms;
-            if (Array.isArray(forms)) {
-              /* 如果成功创建，加入到中间容器中 */
-              const childUListClassName = "pops-panel-select-child-forms";
-              // 移除旧的元素
-              while ($li.nextElementSibling) {
-                if ($li.nextElementSibling.classList.contains(childUListClassName)) {
-                  $li.nextElementSibling.remove();
+            if (item != null) {
+              // 默认值在数据中
+              // 显示该数据项的文本
+              // 隐藏placeholder
+              const text = typeof item.text === "function" ? item.text(item.value, item) : item.text;
+              if (item.isHTML) {
+                PopsSafeUtils.setSafeHTML(this.$el.$selectedInputWrapper, text);
+              } else {
+                PopsSafeUtils.setSafeHTML(
+                  this.$el.$selectedInputWrapper,
+                  /*html*/ `
+                  <span>${text}</span>
+                `
+                );
+              }
+              // 显示选中的内容
+              this.showInputWrapper();
+              // 隐藏placeholder
+              this.hidePlaceHolderWrapper();
+            } else {
+              // 仅显示placeholder
+              this.hideInputWrapper();
+              this.showPlaceHolderWrapper();
+            }
+          },
+          /**
+           * 禁用选项容器
+           */
+          disable() {
+            popsDOMUtils.addClassName(this.$el.$container, "pops-panel-select-multiple-disable");
+            popsDOMUtils.addClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
+          },
+          /**
+           * 取消禁用选项容器
+           */
+          cancleDisable() {
+            popsDOMUtils.removeClassName(this.$el.$container, "pops-panel-select-multiple-disable");
+            popsDOMUtils.removeClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
+          },
+          /**
+           * 判断当前是否已禁用选项容器
+           */
+          isDisabled() {
+            return (
+              popsDOMUtils.containsClassName(this.$el.$container, "pops-panel-select-multiple-disable") ||
+              popsDOMUtils.containsClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled)
+            );
+          },
+          /**
+           * 设置选择列表的点击事件
+           *
+           * 点击显示选择列表的弹窗
+           */
+          onShowSelectDialogClick() {
+            const defaultCSS = PopsCSS.panelComponents_Select;
+            popsDOMUtils.on(this.$el.$container, "click", () => {
+              if (this.isDisabled()) {
+                return;
+              }
+              /** 当前已选中的值 */
+              const { style, ...userConfirmConfig } = viewConfig.selectConfirmDialogConfig || {};
+              /**
+               * 弹窗关闭的回调
+               */
+              const dialogCloseCallback = () => {
+                if (this.$data.selectedData?.addCustomInput && !this.$data.isValidSuccess) {
+                  // 当前是自定义输入的且未通过校验
+                  return false;
+                } else {
+                  // 清除自定义输入的值
+                  this.getAllSelectItems(false).forEach((it) => {
+                    if (!it.data.addCustomInput) return;
+                    it.data.value = "";
+                    it.data.text = "";
+                    this.onValueChangeCallback(it.data);
+                  });
+                }
+                this.renderSelectText();
+                this.$el.$selectDialogContainer = null;
+                this.$el.$container.removeAttribute(this.$data.rotateKey);
+              };
+              this.$el.$container.setAttribute(this.$data.rotateKey, String(true));
+              const confirmConfig = popsUtils.assign(
+                <PopsAlertConfig>{
+                  title: {
+                    text: "请勾选需要选择的选项",
+                    position: "center",
+                  },
+                  content: {
+                    text: /*html*/ `<ul class="select-container"></ul>`,
+                    html: true,
+                  },
+                  btn: {
+                    ok: {
+                      enable: false,
+                    },
+                    close: {
+                      enable: true,
+                      callback(evtConfig) {
+                        const ret = dialogCloseCallback();
+                        if (typeof ret === "boolean" && !ret) {
+                          return;
+                        }
+                        evtConfig.close();
+                      },
+                    },
+                  },
+                  mask: {
+                    enable: true,
+                    clickCallBack(originalRun) {
+                      const ret = dialogCloseCallback();
+                      if (typeof ret === "boolean" && !ret) {
+                        return;
+                      }
+                      originalRun();
+                    },
+                    clickEvent: {
+                      toClose: true,
+                    },
+                  },
+                  drag: true,
+                  dragLimit: true,
+                  width: "300px",
+                  height: "auto",
+                  style: /*css*/ `
+                  ${defaultCSS}
+
+                  ${PopsCSS.panelCSS}
+
+								  ${style || ""}
+								`,
+                },
+                userConfirmConfig
+              );
+              const $dialog = PopsAlert.init(confirmConfig);
+              const $selectContainer = $dialog.$shadowRoot.querySelector<HTMLUListElement>(".select-container")!;
+              // 初始化选项元素
+              this.$data.data.forEach((item) => {
+                if (item.addCustomInput) {
+                  // 添加自定义输入的
+                  const customInputDataOption = item;
+                  const $customInputSelecItem = this.createSelectItemElement(customInputDataOption);
+                  const context = this;
+                  const PanelInput = that.createSectionContainerItem_input({
+                    type: "input",
+                    text: "",
+                    getValue() {
+                      return customInputDataOption.value;
+                    },
+                    callback(evt, value) {
+                      customInputDataOption.text = value;
+                      customInputDataOption.value = value;
+                      if (typeof customInputDataOption.onValid === "function") {
+                        const ret = customInputDataOption.onValid(customInputDataOption);
+                        context.$data.isValidSuccess = ret.valid;
+                        if (ret.valid) {
+                          PanelInputHandler.removeValidErrorMsg();
+                        } else {
+                          PanelInputHandler.addValidErrorMsg(ret.message);
+                          return ret;
+                        }
+                      }
+
+                      context.updateSelectedInfo(customInputDataOption);
+                      context.onValueChangeCallback(customInputDataOption);
+                    },
+                  });
+                  // 获取输入框处理函数
+                  const PanelInputHandler = PanelInput.handler;
+
+                  const $inputContainer = PanelInput.$el.querySelector<HTMLElement>(".pops-panel-input")!;
+                  PopsSafeUtils.setSafeHTML($customInputSelecItem, "");
+
+                  $customInputSelecItem.appendChild($inputContainer);
+                  // 添加到confirm中
+                  $selectContainer.appendChild($customInputSelecItem);
+                  // 设置项的点击事件
+                  this.onSelectItemClick(customInputDataOption, $customInputSelecItem);
                 } else {
-                  break;
+                  const $select = this.createSelectItemElement(item);
+                  // 添加到confirm中
+                  $selectContainer.appendChild($select);
+                  // 设置项的点击事件
+                  this.onSelectItemClick(item, $select);
                 }
+              });
+              this.$el.$selectDialogContainer = $selectContainer;
+              // 初始化状态
+              this.updateAllSelectItemStatus();
+            });
+          },
+          /**
+           * 选中的值改变的回调
+           * @param data 当前的选中信息
+           */
+          onValueChangeCallback(data?: PopsPanelSelectDataOption<any>, isUpdateSelectItem: boolean = true) {
+            // 动态更新禁用状态、选中状态
+            isUpdateSelectItem && this.updateAllSelectItemStatus();
+            // 触发回调
+            if (typeof viewConfig.callback === "function") {
+              viewConfig.callback(data || this.$data.selectedData!);
+            }
+          },
+          /**
+           * 更新选项弹窗内的所有选项元素的状态
+           *
+           * + 更新禁用状态
+           * + 更新选中状态
+           */
+          updateAllSelectItemStatus() {
+            const allSelectItems = this.getAllSelectItems(false);
+            allSelectItems.forEach(($selectInfo) => {
+              const { data, $select } = $selectInfo;
+              // 更新文字
+              this.setSelectItemText(data, $selectInfo.$select);
+              if (typeof data.disable === "function" && data.disable(data.value, this.$data.selectedData)) {
+                // 移除选中状态
+                this.removeItemSelected($select);
+                // 禁用
+                this.setSelectItemDisabled($select);
+              } else {
+                // 移除禁用状态
+                this.removeSelectItemDisabled($select);
+              }
+              // 根据当前已选择的信息，判断并更新选中状态
+              if (this.$data.selectedData != null && this.$data.selectedData.value === data.value) {
+                // 就是这个项
+                // 设置选中
+                this.setItemSelected($select);
+              } else {
+                // 不是这个项
+                // 移除选中状态
+                this.removeItemSelected($select);
               }
-              const $childUList = popsDOMUtils.createElement("ul");
-              $childUList.className = childUListClassName;
-              popsDOMUtils.after($li, $childUList);
-              that.uListContainerAddItem(formConfig, {
-                ulElement: $childUList,
+            });
+          },
+          /**
+           * 重置所有已选中的项以下状态
+           *
+           * + 更新选项显示的文字
+           * + 移除禁用状态
+           * + 移除选中状态
+           */
+          resetAllSelectedItemStatus() {
+            const allSelectedItems = this.getAllSelectItems(true);
+            if (allSelectedItems.length) {
+              // 移除选中信息
+              this.resetCurrentSelectedInfo();
+            }
+            allSelectedItems.forEach(($selectInfo) => {
+              const { data, $select } = $selectInfo;
+              // 更新文字
+              this.setSelectItemText(data, $selectInfo.$select);
+              // 移除选中状态
+              this.removeItemSelected($select);
+              // 取消禁用
+              this.removeSelectItemDisabled($select);
+            });
+          },
+          /**
+           * 设置选项元素选中
+           * @param $el 选项元素
+           */
+          setItemSelected($el: HTMLElement) {
+            if (this.isItemSelected($el)) return;
+            $el.classList.add("select-item-is-selected");
+          },
+          /**
+           * 移除选项元素选中
+           * @param $el 选项元素
+           */
+          removeItemSelected($el: HTMLElement) {
+            $el.classList.remove("select-item-is-selected");
+          },
+          /**
+           * 判断选项元素是否选中
+           * @param $el
+           */
+          isItemSelected($el: HTMLElement): boolean {
+            return $el.classList.contains("select-item-is-selected");
+          },
+          /**
+           * 添加选中信息
+           * @param data 选择项的数据
+           * @param [triggerValueChangeCallBack=true] 主动触发值改变回调
+           */
+          addSelectedItemInfo(data: PopsPanelSelectDataOption<any>) {
+            this.resetCurrentSelectedInfo();
+            this.updateSelectedInfo(data);
+            this.onValueChangeCallback(data);
+          },
+          /**
+           * 获取项上存储的信息
+           * @param $el 选项元素
+           */
+          getItemDataOption($el: HTMLElement): PopsPanelSelectDataOption<any> {
+            return Reflect.get($el, "data-info");
+          },
+          /**
+           * 移除选中信息
+           * @param data 选择项的数据
+           */
+          removeSelectedItemInfo() {
+            // 删除
+            this.updateSelectedInfo();
+            this.onValueChangeCallback();
+          },
+          /**
+           * 更新选中信息
+           * @param data 数据
+           */
+          updateSelectedInfo(data?: PopsPanelSelectDataOption<any>) {
+            // 先删除再赋值
+            this.$data.selectedData = void 0;
+            if (data) {
+              if (data.addCustomInput && data.value.toString() === "") {
+                // 自定义输入框，但是内容是空字符串
+                // 不更新选中信息
+                return;
+              }
+              this.$data.selectedData = data;
+            }
+          },
+          /**
+           * 从保存的已选中的信息列表中移除目标信息
+           */
+          resetCurrentSelectedInfo() {
+            this.updateSelectedInfo();
+          },
+          /**
+           * 获取所有选项的信息
+           * @param [onlySelected=true] 是否仅获取选中的项的信息
+           * + true （默认）仅获取选中项的信息
+           * + false 获取所有选择项的信息
+           */
+          getAllSelectItems(onlySelected: boolean = true) {
+            return Array.from(this.$el.$selectDialogContainer?.querySelectorAll<HTMLElement>(".select-item") ?? [])
+              .map(($select) => {
+                const data = this.getItemDataOption($select);
+                const result = {
+                  /** 选项信息数据 */
+                  data: data,
+                  /** 选项元素 */
+                  $select: $select,
+                };
+                if (onlySelected) {
+                  // 仅选中
+                  const isSelected = this.isItemSelected($select);
+                  if (isSelected) {
+                    return result;
+                  }
+                  return;
+                } else {
+                  return result;
+                }
+              })
+              .filter((item) => {
+                return item != null;
               });
+          },
+          /**
+           * 创建一个选择项元素
+           * @param data 选择项的数据
+           */
+          createSelectItemElement(data: PopsPanelSelectDataOption<any>) {
+            const $select = popsDOMUtils.createElement("li", {
+              className: "select-item",
+              innerHTML: /*html*/ `<span class="select-item-text"></span>`,
+            });
+            this.setSelectItemText(data, $select);
+            Reflect.set($select, "data-info", data);
+            return $select;
+          },
+          /**
+           * 设置选择项的文字
+           * @param data 选择项的数据
+           * @param $select 选择项元素
+           */
+          setSelectItemText(data: PopsPanelSelectDataOption<any>, $select: HTMLElement) {
+            const text = typeof data.text === "function" ? data.text(data.value, this.$data.selectedData) : data.text;
+            const $selectSpan = $select.querySelector<HTMLElement>(".select-item-text");
+            if (!$selectSpan) return;
+            if (data.isHTML) {
+              PopsSafeUtils.setSafeHTML($selectSpan, text);
+            } else {
+              $selectSpan.innerText = text;
             }
-          });
-        },
-        /**
-         * 监听点击事件
-         */
-        setClickEvent() {
-          popsDOMUtils.on(this.$ele.select, "click", void 0, (event) => {
-            this.setSelectOptionsDisableStatus();
-            if (typeof formConfig.clickCallBack === "function") {
-              formConfig.clickCallBack(event, this.$ele.select);
+          },
+          /**
+           * 设置选择项禁用
+           * @param $select 选择项元素
+           */
+          setSelectItemDisabled($select: HTMLElement) {
+            $select.setAttribute("aria-disabled", "true");
+            $select.setAttribute("disabled", "true");
+          },
+          /**
+           * 移除选择项的禁用状态
+           * @param $select 选择项元素
+           */
+          removeSelectItemDisabled($select: HTMLElement) {
+            $select.removeAttribute("aria-disabled");
+            $select.removeAttribute("disabled");
+          },
+          /**
+           * 判断选择项是否禁用
+           * @param $select 选择项元素
+           */
+          isSelectItemDisabled($select: HTMLElement) {
+            return $select.hasAttribute("disabled") || $select.ariaDisabled;
+          },
+          /**
+           * 设置选择项的点击事件
+           * @param data 该选择项的信息
+           * @param $select 该选择项元素
+           */
+          onSelectItemClick(data: PopsPanelSelectDataOption<any> | undefined, $select: HTMLElement) {
+            const updateCustomInputStatus = () => {
+              this.setItemSelected($select);
+              this.addSelectedItemInfo(data!);
+            };
+            popsDOMUtils.on<PointerEvent | MouseEvent>($select, "click", (event) => {
+              popsDOMUtils.preventEvent(event);
+              const $click = event.target as HTMLElement;
+              if (data?.addCustomInput && $click instanceof HTMLInputElement) {
+                // 自定义输入框 单独处理值更新，选中
+                updateCustomInputStatus();
+                return;
+              }
+              if (this.isSelectItemDisabled($select)) {
+                // 被禁用了
+                return;
+              }
+              if (typeof viewConfig.clickCallBack === "function") {
+                const clickResult = viewConfig.clickCallBack(event, this.$data.selectedData!);
+                if (typeof clickResult === "boolean" && !clickResult) {
+                  return;
+                }
+              }
+              if (data?.addCustomInput) {
+                // 自定义输入框 添加选中
+                updateCustomInputStatus();
+              } else {
+                // 修改选中状态
+                if (this.isItemSelected($select)) {
+                  // 移除选中
+                  this.removeItemSelected($select);
+                  this.removeSelectedItemInfo();
+                } else {
+                  // 添加选中
+                  this.setItemSelected($select);
+                  this.addSelectedItemInfo(data!);
+                }
+              }
+            });
+          },
+          /** 显示输入框 */
+          showInputWrapper() {
+            popsDOMUtils.cssShow(this.$el.$selectedInputWrapper);
+          },
+          /** 隐藏输入框 */
+          hideInputWrapper() {
+            popsDOMUtils.cssHide(this.$el.$selectedInputWrapper, true);
+          },
+          /** 显示palceholder */
+          showPlaceHolderWrapper() {
+            popsDOMUtils.cssShow(this.$el.$selectedPlaceHolderWrapper);
+          },
+          /** 隐藏palceholder */
+          hidePlaceHolderWrapper() {
+            popsDOMUtils.cssHide(this.$el.$selectedPlaceHolderWrapper, true);
+          },
+        };
+        PopsPanelSelect.init();
+        Reflect.set($li, "data-select", PopsPanelSelect);
+        handler = PopsPanelSelect;
+      } else {
+        const PopsPanelSelectNative = {
+          [Symbol.toStringTag]: "PopsPanelSelectNative",
+          $el: {
+            itemLeftTextContainer: $li.querySelector<HTMLElement>(".pops-panel-item-left-text"),
+            panelSelect: $li.querySelector<HTMLDivElement>(".pops-panel-select")!,
+            select: $li.querySelector<HTMLSelectElement>(".pops-panel-select select")!,
+          },
+          $eleKey: {
+            disable: "__disable__",
+            value: "__value__",
+            viewConfig: "data-view-config",
+          },
+          $data: {
+            data: [] as PopsPanelSelectDataOption<any>[],
+            defaultValue: viewConfig.getValue(),
+          },
+          init() {
+            this.$data.data = typeof viewConfig.data === "function" ? viewConfig.data() : viewConfig.data;
+            popsDOMUtils.addClassName(this.$el.panelSelect, PopsCommonCSSClassName.userSelectNone);
+            this.initOption();
+            this.onValueChange();
+            this.onClick();
+            const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
+            if (disabled) {
+              this.disable();
             }
-          });
-        },
-      };
+          },
+          /**
+           * 给option元素设置属性
+           * @param $ele
+           * @param key
+           * @param value
+           */
+          setNodeValue($ele: HTMLElement, key: string, value: any) {
+            Reflect.set($ele, key, value);
+          },
+          /**
+           * 获取option元素上设置的属性
+           * @param $ele
+           * @param value
+           * @param key
+           */
+          getNodeValue($ele: HTMLElement, key: string) {
+            return Reflect.get($ele, key);
+          },
+          /**
+           * 禁用选项
+           */
+          disable() {
+            this.$el.select.setAttribute("disabled", "true");
+            popsDOMUtils.addClassName(this.$el.panelSelect, "pops-panel-select-disable");
+            popsDOMUtils.addClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
+          },
+          /**
+           * 取消禁用
+           */
+          notDisable() {
+            this.$el.select.removeAttribute("disabled");
+            popsDOMUtils.removeClassName(this.$el.panelSelect, "pops-panel-select-disable");
+            popsDOMUtils.removeClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
+          },
+          /**
+           * 判断是否禁用
+           */
+          isDisabled() {
+            return (
+              this.$el.select.hasAttribute("disabled") ||
+              popsDOMUtils.containsClassName(this.$el.panelSelect, "pops-panel-select-disable")
+            );
+          },
+          /**
+           * 初始化选项
+           */
+          initOption() {
+            this.$data.data.forEach((dataItem) => {
+              // 初始化默认选中
+              const optionElement = popsDOMUtils.createElement("option");
+              this.setNodeValue(optionElement, this.$eleKey.value, dataItem.value);
+              this.setNodeValue(optionElement, this.$eleKey.disable, dataItem.disable);
+              this.setNodeValue(optionElement, this.$eleKey.viewConfig, dataItem.views);
+              if (dataItem.value === this.$data.defaultValue) {
+                this.setOptionSelected(optionElement);
+              }
+              if (typeof dataItem.text === "function") {
+                optionElement.innerText = dataItem.text(dataItem.value, dataItem);
+              } else {
+                optionElement.innerText = dataItem.text;
+              }
+              this.$el.select.appendChild(optionElement);
+            });
+          },
+          /**
+           * 设置选项选中
+           * @param $option
+           */
+          setOptionSelected($option: HTMLOptionElement) {
+            $option.setAttribute("selected", "true");
+          },
+          /**
+           * 检测所有option并设置禁用状态
+           */
+          setSelectOptionsDisableStatus() {
+            if (this.$el.select.options && this.$el.select.options.length) {
+              Array.from(this.$el.select.options).forEach((optionItem) => {
+                this.setOptionDisableStatus(optionItem);
+              });
+            }
+          },
+          /**
+           * 设置禁用状态
+           * @param $option
+           */
+          setOptionDisableStatus($option: HTMLOptionElement) {
+            let disable = false;
+            const optionDisableAttr = this.getNodeValue($option, this.$eleKey.disable);
+            if (optionDisableAttr === "function") {
+              const value = this.getNodeValue($option, this.$eleKey.value);
+              disable = Boolean(optionDisableAttr(value));
+            }
+            if (disable) {
+              $option.setAttribute("disabled", "true");
+            } else {
+              $option.removeAttribute("disabled");
+            }
+          },
+          /**
+           * 获取option上的信息
+           * @param $option
+           */
+          getSelectOptionInfo($option: HTMLOptionElement) {
+            const optionValue = this.getNodeValue($option, this.$eleKey.value);
+            const optionText = $option.innerText || $option.textContent!;
+            const views = this.getNodeValue($option, this.$eleKey.viewConfig) as NonNullable<
+              PopsPanelSelectDataOption<any>["views"]
+            >;
+            return {
+              value: optionValue,
+              text: optionText,
+              views: views,
+              $option: $option,
+            };
+          },
+          /**
+           * 监听选择内容改变
+           */
+          onValueChange() {
+            popsDOMUtils.on<PointerEvent | TouchEvent>(this.$el.select, "change", () => {
+              const $isSelectedElement = this.$el.select[this.$el.select.selectedIndex] as HTMLOptionElement;
+              const selectInfo = this.getSelectOptionInfo($isSelectedElement);
+              this.setSelectOptionsDisableStatus();
+              if (typeof viewConfig.callback === "function") {
+                viewConfig.callback(selectInfo);
+              }
+              const views = typeof selectInfo.views === "function" ? selectInfo.views() : selectInfo.views;
+              if (Array.isArray(views)) {
+                // 如果成功创建，加入到中间容器中
+                const childUListClassName = "pops-panel-select-child-forms";
+                // 移除旧的元素
+                while ($li.nextElementSibling) {
+                  if ($li.nextElementSibling.classList.contains(childUListClassName)) {
+                    $li.nextElementSibling.remove();
+                  } else {
+                    break;
+                  }
+                }
+                const $childUList = popsDOMUtils.createElement("ul");
+                $childUList.className = childUListClassName;
+                popsDOMUtils.after($li, $childUList);
+                that.uListContainerAddItem(viewConfig, {
+                  ulElement: $childUList,
+                });
+              }
+            });
+          },
+          /**
+           * 监听点击事件
+           */
+          onClick() {
+            popsDOMUtils.on(this.$el.select, "click", void 0, (event) => {
+              this.setSelectOptionsDisableStatus();
+              if (typeof viewConfig.clickCallBack === "function") {
+                const $isSelectedElement = this.$el.select[this.$el.select.selectedIndex] as HTMLOptionElement;
+                const selectInfo = this.getSelectOptionInfo($isSelectedElement);
+                viewConfig.clickCallBack(event, selectInfo);
+              }
+            });
+          },
+        };
 
-      PopsPanelSelect.init();
-      Reflect.set($li, "data-select", PopsPanelSelect);
-      return $li;
+        PopsPanelSelectNative.init();
+        Reflect.set($li, "data-select", PopsPanelSelectNative);
+        handler = PopsPanelSelectNative;
+      }
+      return {
+        $el: $li,
+        handler: handler,
+      };
     },
     /**
      * type ==> select-multiple
      * 获取中间容器的元素<li>
-     * @param formConfig
+     * @param viewConfig
      */
-    createSectionContainerItem_select_multiple_new(formConfig: PopsPanelSelectMultipleDetails<any>) {
+    createSectionContainerItem_select_multiple(viewConfig: PopsPanelSelectMultipleConfig<any>) {
       const $li = popsDOMUtils.createElement("li");
-      Reflect.set($li, "__formConfig__", formConfig);
-      this.setElementClassName($li, formConfig.className);
-      this.setElementAttributes($li, formConfig.attributes);
-      this.setElementProps($li, formConfig.props);
-      /* 左边底部的描述的文字 */
+      Reflect.set($li, this.$data.nodeStoreConfigKey, viewConfig);
+      this.setElementClassName($li, viewConfig.className);
+      this.setElementAttributes($li, viewConfig.attributes);
+      this.setElementProps($li, viewConfig.props);
+      // 左边底部的描述的文字
       let leftDescriptionText = "";
-      if (formConfig.description) {
-        leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
+      if (viewConfig.description) {
+        leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${viewConfig.description}</p>`;
       }
       PopsSafeUtils.setSafeHTML(
         $li,
         /*html*/ `
 				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
+					<p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
 				<div class="pops-panel-select-multiple">
 					<div class="el-select__wrapper">
 						<div class="el-select__selection">
@@ -1653,9 +2358,9 @@ export const PanelHandlerComponents = () => {
         $el: {
           /** 左侧文本容器 */
           itemLeftTextContainer: $li.querySelector<HTMLElement>(".pops-panel-item-left-text"),
-          /** 容器 */
+          /** 选择框容器 */
           $container: void 0 as any as HTMLElement,
-          /** 包括的容器 */
+          /** 选择框包裹的容器 */
           $wrapper: void 0 as any as HTMLElement,
           /** 内容区域 */
           $section: void 0 as any as HTMLElement,
@@ -1672,8 +2377,15 @@ export const PanelHandlerComponents = () => {
         },
         $data: {
           /** 默认值 */
-          defaultValue: formConfig.getValue(),
-          selectInfo: [] as any as PopsPanelSelectMultipleDataOption<any>[],
+          defaultValue: viewConfig.getValue(),
+          /**
+           * 已选择的信息
+           */
+          selectedDataList: [] as PopsPanelSelectMultipleDataOption<any>[],
+          /**
+           * 箭头旋转的属性
+           */
+          rotateKey: "data-show-option",
         },
         /** 初始化 */
         init() {
@@ -1681,24 +2393,19 @@ export const PanelHandlerComponents = () => {
           this.inintEl();
           this.initPlaceHolder();
           this.initTagElement();
-          this.setSelectContainerClickEvent();
+          this.onShowSelectDialogClick();
 
-          const disabled = typeof formConfig.disabled === "function" ? formConfig.disabled() : formConfig.disabled;
+          const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
           if (disabled) {
             this.disable();
           }
         },
         /** 初始化默认值 */
         initDefault() {
-          formConfig.data.forEach((dataItem) => {
+          viewConfig.data.forEach((dataItem) => {
             if (this.$data.defaultValue.includes(dataItem.value)) {
               // 初始化选中的配置
-              this.$data.selectInfo.push({
-                text: dataItem.text,
-                value: dataItem.value,
-                isHTML: Boolean(dataItem.isHTML),
-                disable: dataItem.disable?.bind(dataItem),
-              });
+              this.$data.selectedDataList.push(dataItem);
             }
           });
         },
@@ -1719,13 +2426,15 @@ export const PanelHandlerComponents = () => {
           // 先把手动输入框隐藏
           this.hideInputWrapper();
         },
-        /** 初始化提示文字 */
+        /**
+         * 初始化提示文字
+         */
         initPlaceHolder() {
           let placeholder = "";
-          if (typeof formConfig.placeholder === "string") {
-            placeholder = formConfig.placeholder;
-          } else if (typeof formConfig.placeholder === "function") {
-            const placeholderResult = formConfig.placeholder();
+          if (typeof viewConfig.placeholder === "string") {
+            placeholder = viewConfig.placeholder;
+          } else if (typeof viewConfig.placeholder === "function") {
+            const placeholderResult = viewConfig.placeholder();
             if (typeof placeholderResult === "string") {
               placeholder = placeholderResult;
             }
@@ -1735,16 +2444,18 @@ export const PanelHandlerComponents = () => {
           });
           this.$el.$selectedPlaceHolderWrapper.appendChild($placeholder);
         },
-        /** 初始化tag元素 */
+        /**
+         * 初始化tag元素
+         */
         initTagElement() {
           // 遍历数据，寻找对应的值
-          formConfig.data.forEach((dataItem) => {
-            const findValue = this.$data.selectInfo.find((item) => item.value === dataItem.value);
+          viewConfig.data.forEach((dataItem) => {
+            const findValue = this.$data.selectedDataList.find((item) => item.value === dataItem.value);
             if (findValue) {
               // 存在对应的值
-              const selectedInfo = this.createSelectedTagItem(dataItem);
-              this.addSelectedTagItem(selectedInfo.$tag);
-              this.setSelectedItemCloseIconClickEvent({
+              const selectedInfo = this.createTagItem(dataItem);
+              this.addTagItem(selectedInfo.$tag);
+              this.onSelectItemCloseIconClick({
                 $tag: selectedInfo.$tag,
                 $closeIcon: selectedInfo.$closeIcon,
                 value: dataItem.value,
@@ -1758,8 +2469,8 @@ export const PanelHandlerComponents = () => {
          * 生成一个tag项
          * @param data 配置
          */
-        createSelectedTagItem(data: PopsPanelSelectMultipleDataOption<any>) {
-          const $selectedItem = popsDOMUtils.createElement("div", {
+        createTagItem(data: PopsPanelSelectMultipleDataOption<any>) {
+          const $tag = popsDOMUtils.createElement("div", {
             className: "el-select__selected-item el-select__choose_tag",
             innerHTML: /*html*/ `
 						<span class="el-tag is-closable el-tag--info el-tag--default el-tag--light">
@@ -1776,10 +2487,10 @@ export const PanelHandlerComponents = () => {
 						`,
           });
           /** 标签 */
-          const $tagText = $selectedItem.querySelector<HTMLSpanElement>(".el-select__tags-text")!;
+          const $tagText = $tag.querySelector<HTMLSpanElement>(".el-select__tags-text")!;
           /** 关闭图标 */
-          const $closeIcon = $selectedItem.querySelector<HTMLElement>(".el-icon.el-tag__close")!;
-          const text = typeof data.text === "function" ? data.text(data, this.$data.selectInfo) : data.text;
+          const $closeIcon = $tag.querySelector<HTMLElement>(".el-icon.el-tag__close")!;
+          const text = typeof data.text === "function" ? data.text(data, this.$data.selectedDataList) : data.text;
           if (data.isHTML) {
             PopsSafeUtils.setSafeHTML($tagText, text);
           } else {
@@ -1787,7 +2498,7 @@ export const PanelHandlerComponents = () => {
           }
 
           return {
-            $tag: $selectedItem,
+            $tag: $tag,
             $tagText: $tagText,
             $closeIcon: $closeIcon,
           };
@@ -1796,7 +2507,7 @@ export const PanelHandlerComponents = () => {
          * 添加选中项的tag元素
          * @param $tag 添加的元素
          */
-        addSelectedTagItem($tag: HTMLElement) {
+        addTagItem($tag: HTMLElement) {
           // 往前添加
           // 去除前面的空白
           this.setSectionIsNear();
@@ -1825,8 +2536,10 @@ export const PanelHandlerComponents = () => {
           this.hideInputWrapper();
           this.hidePlaceHolderWrapper();
         },
-        /** 更新tag信息 */
-        updateSelectTagItem() {
+        /**
+         * 更新tag信息
+         */
+        updateTagItem() {
           this.$el.$section.querySelectorAll<HTMLElement>(".el-select__choose_tag").forEach(($ele) => {
             $ele.remove();
           });
@@ -1836,11 +2549,11 @@ export const PanelHandlerComponents = () => {
          * 选中的值改变的回调
          * @param selectedDataList 当前的选中信息
          */
-        selectValueChangeCallBack(selectedDataList?: PopsPanelSelectMultipleDataOption<any>[]) {
+        onValueChange(selectedDataList?: PopsPanelSelectMultipleDataOption<any>[]) {
           // 动态更新禁用状态
-          this.updateSelectItem();
-          if (typeof formConfig.callback === "function") {
-            formConfig.callback(selectedDataList || this.$data.selectInfo);
+          this.updateAllSelectItems();
+          if (typeof viewConfig.callback === "function") {
+            viewConfig.callback(selectedDataList || this.$data.selectedDataList);
           }
         },
         /**
@@ -1849,29 +2562,29 @@ export const PanelHandlerComponents = () => {
          * + 更新禁用状态
          * + 更新选中状态
          */
-        updateSelectItem() {
+        updateAllSelectItems() {
           this.getAllSelectItemInfo(false).forEach(($selectInfo) => {
             const { data, $select } = $selectInfo;
             // 更新文字
             this.setSelectItemText(data, $selectInfo.$select);
             // 更新禁用状态
-            if (typeof data.disable === "function" && data.disable(data.value, this.$data.selectInfo)) {
+            if (typeof data.disable === "function" && data.disable(data.value, this.$data.selectedDataList)) {
               // 禁用
-              this.setSelectItemDisabled($select);
+              this.disableSelectItem($select);
               // 移除选中信息
               this.removeSelectedInfo(data, false);
               // 移除选中状态
-              this.removeSelectItemSelected($select);
+              this.removeItemSelected($select);
             } else {
               // 取消禁用
-              this.removeSelectItemDisabled($select);
+              this.cancleDisableSelectItem($select);
             }
             // 更新选中状态
-            const findValue = this.$data.selectInfo.find((it) => it.value === data.value);
+            const findValue = this.$data.selectedDataList.find((it) => it.value === data.value);
             if (findValue) {
-              this.setSelectItemSelected($select);
+              this.setItemSelected($select);
             } else {
-              this.removeSelectItemSelected($select);
+              this.removeItemSelected($select);
             }
           });
         },
@@ -1879,22 +2592,22 @@ export const PanelHandlerComponents = () => {
          * 设置选项元素选中
          * @param $select 选项元素
          */
-        setSelectItemSelected($select: HTMLElement) {
-          if (this.isSelectItemSelected($select)) return;
+        setItemSelected($select: HTMLElement) {
+          if (this.isItemSelected($select)) return;
           $select.classList.add("select-item-is-selected");
         },
         /**
          * 移除选项元素选中
          * @param $select 选项元素
          */
-        removeSelectItemSelected($select: HTMLElement) {
+        removeItemSelected($select: HTMLElement) {
           $select.classList.remove("select-item-is-selected");
         },
         /**
          * 判断选项元素是否选中
          * @param $select
          */
-        isSelectItemSelected($select: HTMLElement): boolean {
+        isItemSelected($select: HTMLElement): boolean {
           return $select.classList.contains("select-item-is-selected");
         },
         /**
@@ -1902,25 +2615,20 @@ export const PanelHandlerComponents = () => {
          * @param dataList 选择项列表的数据
          * @param $select 选项元素
          */
-        addSelectedItemInfo(dataList: PopsPanelSelectMultipleDataOption<any>[], $select: HTMLElement) {
+        addItemSelected(dataList: PopsPanelSelectMultipleDataOption<any>[], $select: HTMLElement) {
           const info = this.getSelectedItemInfo($select);
           const findValue = dataList.find((item) => item.value === info.value);
           if (!findValue) {
-            dataList.push({
-              value: info.value,
-              text: info.text,
-              isHTML: Boolean(info.isHTML),
-              disable: info.disable?.bind(info),
-            });
+            dataList.push(info);
           }
-          this.selectValueChangeCallBack(dataList);
+          this.onValueChange(dataList);
         },
         /**
          * 获取选中的项的信息
          * @param $select 选项元素
          */
-        getSelectedItemInfo($select: HTMLElement) {
-          return Reflect.get($select, "data-info") as PopsPanelSelectMultipleDataOption<any>;
+        getSelectedItemInfo($select: HTMLElement): PopsPanelSelectMultipleDataOption<any> {
+          return Reflect.get($select, "data-info");
         },
         /**
          * 移除选中信息
@@ -1933,7 +2641,7 @@ export const PanelHandlerComponents = () => {
           if (findIndex !== -1) {
             dataList.splice(findIndex, 1);
           }
-          this.selectValueChangeCallBack(dataList);
+          this.onValueChange(dataList);
         },
         /**
          * 获取所有选项的信息
@@ -1953,7 +2661,7 @@ export const PanelHandlerComponents = () => {
               };
               if (onlySelected) {
                 // 仅选中
-                const isSelected = this.isSelectItemSelected($select);
+                const isSelected = this.isItemSelected($select);
                 if (isSelected) {
                   return result;
                 }
@@ -1987,7 +2695,7 @@ export const PanelHandlerComponents = () => {
          * @param $select 选择项元素
          */
         setSelectItemText(data: PopsPanelSelectMultipleDataOption<any>, $select: HTMLElement) {
-          const text = typeof data.text === "function" ? data.text(data.value, this.$data.selectInfo) : data.text;
+          const text = typeof data.text === "function" ? data.text(data.value, this.$data.selectedDataList) : data.text;
           const $selectSpan = $select.querySelector<HTMLElement>(".select-item-text")!;
           if (data.isHTML) {
             PopsSafeUtils.setSafeHTML($selectSpan, text);
@@ -1999,7 +2707,7 @@ export const PanelHandlerComponents = () => {
          * 设置选择项的禁用状态
          * @param $select 选择项元素
          */
-        setSelectItemDisabled($select: HTMLElement) {
+        disableSelectItem($select: HTMLElement) {
           $select.setAttribute("aria-disabled", "true");
           $select.setAttribute("disabled", "true");
         },
@@ -2007,7 +2715,7 @@ export const PanelHandlerComponents = () => {
          * 移除选择项的禁用状态
          * @param $select 选择项元素
          */
-        removeSelectItemDisabled($select: HTMLElement) {
+        cancleDisableSelectItem($select: HTMLElement) {
           $select.removeAttribute("aria-disabled");
           $select.removeAttribute("disabled");
         },
@@ -2023,51 +2731,58 @@ export const PanelHandlerComponents = () => {
          * @param dataList 选中的信息列表
          * @param $select 选择项元素
          */
-        setSelectElementClickEvent(dataList: PopsPanelSelectMultipleDataOption<any>[], $select: HTMLElement) {
+        onSelectItemClick(dataList: PopsPanelSelectMultipleDataOption<any>[], $select: HTMLElement) {
           popsDOMUtils.on<PointerEvent | MouseEvent>($select, "click", (event) => {
             popsDOMUtils.preventEvent(event);
             if (this.isSelectItemDisabled($select)) {
               return;
             }
-            if (typeof formConfig.clickCallBack === "function") {
+            if (typeof viewConfig.clickCallBack === "function") {
               const allSelectedInfo = this.getAllSelectItemInfo().map((it) => it.data);
-              const clickResult = formConfig.clickCallBack(event, allSelectedInfo);
+              const clickResult = viewConfig.clickCallBack(event, allSelectedInfo);
               if (typeof clickResult === "boolean" && !clickResult) {
                 return;
               }
             }
             // 修改选中状态
-            if (this.isSelectItemSelected($select)) {
-              this.removeSelectItemSelected($select);
+            if (this.isItemSelected($select)) {
+              this.removeItemSelected($select);
               this.removeSelectedItemInfo(dataList, $select);
             } else {
-              this.setSelectItemSelected($select);
-              this.addSelectedItemInfo(dataList, $select);
+              this.setItemSelected($select);
+              this.addItemSelected(dataList, $select);
             }
           });
         },
         /**
          * 设置下拉列表的点击事件
+         *
+         * 点击显示下拉列表弹窗
          */
-        setSelectContainerClickEvent() {
-          const that = this;
+        onShowSelectDialogClick() {
+          const defaultCSS = PopsCSS.panelComponents_Select;
           popsDOMUtils.on(this.$el.$container, "click", () => {
             if (this.isDisabled()) {
               return;
             }
-            /** 弹窗的选中的值 */
-            const selectedInfo = that.$data.selectInfo;
-            const { style, ...userConfirmDetails } = formConfig.selectConfirmDialogDetails || {};
-            const confirmDetails = popsUtils.assign(
-              <PopsAlertDetails>{
+            /** 当前已选中的值 */
+            const selectInfo = this.$data.selectedDataList;
+            const { style, ...userConfirmConfig } = viewConfig.selectConfirmDialogConfig || {};
+            const dialogCloseCallback = () => {
+              this.$data.selectedDataList = [...selectInfo];
+              this.updateTagItem();
+              this.$el.$selectContainer = null;
+              this.$el.$container.removeAttribute(this.$data.rotateKey);
+            };
+            this.$el.$container.setAttribute(this.$data.rotateKey, String(true));
+            const confirmConfig = popsUtils.assign(
+              <PopsAlertConfig>{
                 title: {
                   text: "请勾选需要选择的选项",
                   position: "center",
                 },
                 content: {
-                  text: /*html*/ `
-									<ul class="select-container"></ul>
-									`,
+                  text: /*html*/ `<ul class="select-container"></ul>`,
                   html: true,
                 },
                 btn: {
@@ -2076,11 +2791,9 @@ export const PanelHandlerComponents = () => {
                   },
                   close: {
                     enable: true,
-                    callback(details) {
-                      that.$data.selectInfo = [...selectedInfo];
-                      that.updateSelectTagItem();
-                      that.$el.$selectContainer = null;
-                      details.close();
+                    callback(evtConfig) {
+                      evtConfig.close();
+                      dialogCloseCallback();
                     },
                   },
                 },
@@ -2088,9 +2801,7 @@ export const PanelHandlerComponents = () => {
                   enable: true,
                   clickCallBack(originalRun) {
                     originalRun();
-                    that.$data.selectInfo = [...selectedInfo];
-                    that.updateSelectTagItem();
-                    that.$el.$selectContainer = null;
+                    dialogCloseCallback();
                   },
                   clickEvent: {
                     toClose: true,
@@ -2099,94 +2810,35 @@ export const PanelHandlerComponents = () => {
                 drag: true,
                 dragLimit: true,
                 width: "300px",
-                height: "300px",
+                height: "auto",
                 style: /*css*/ `
-								.select-container{
-									--el-font-size-base: 14px;
-									--el-text-color-regular: #606266;
-									--el-color-primary: #409eff;
-									--el-fill-color-light: #f5f7fa;
-									--el-disable-color: #a8abb2;
-								}
-								.select-item{
-									cursor: pointer;
-									font-size: var(--el-font-size-base);
-									padding: 0 32px 0 20px;
-									position: relative;
-									white-space: nowrap;
-									overflow: hidden;
-									text-overflow: ellipsis;
-									color: var(--el-text-color-regular);
-									height: 34px;
-									line-height: 34px;
-									box-sizing: border-box;
-								}
-								.select-item[aria-disabled],
-								.select-item[disabled]{
-									cursor: not-allowed;
-									color: var(--el-disable-color);
-									background: unset;
-								}
-								.select-item:hover{
-									background-color: var(--el-fill-color-light);
-								}
-								.select-item.select-item-is-selected{
-									color: var(--el-color-primary);
-									font-weight: 700;
-								}
-								.select-item.select-item-is-selected::after{
-									content: "";
-									position: absolute;
-									top: 50%;
-									right: 20px;
-									border-top: none;
-									border-right: none;
-									background-repeat: no-repeat;
-									background-position: center;
-									background-color: var(--el-color-primary);
-									mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
-									mask-size: 100% 100%;
-									-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
-									-webkit-mask-size: 100% 100%;
-									transform: translateY(-50%);
-									width: 12px;
-									height: 12px;
-								}
-
-								
-								@media (prefers-color-scheme: dark) {
-									.select-container{
-										--el-text-color-regular: #f2f2f2;
-										--el-disable-color: #8D9095;
-										--el-fill-color-light: #262727;
-									}
-								}
+                  ${defaultCSS}
 
-								${style || ""}
+								  ${style || ""}
 								`,
               },
-              userConfirmDetails
+              userConfirmConfig
             );
-            const $dialog = PopsAlert.init(confirmDetails);
+            const $dialog = PopsAlert.init(confirmConfig);
             const $selectContainer = $dialog.$shadowRoot.querySelector<HTMLUListElement>(".select-container")!;
-            this.$el.$selectContainer = $selectContainer;
             // 配置选项元素
-            formConfig.data.forEach((item) => {
+            viewConfig.data.forEach((item) => {
               const $select = this.createSelectItemElement(item);
               // 添加到confirm中
               $selectContainer.appendChild($select);
               // 设置每一项的点击事件
-              this.setSelectElementClickEvent(selectedInfo, $select);
+              this.onSelectItemClick(selectInfo, $select);
             });
+            this.$el.$selectContainer = $selectContainer;
             // 动态更新禁用状态
-            this.updateSelectItem();
+            this.updateAllSelectItems();
           });
         },
         /**
          * 设置关闭图标的点击事件
          * @param data 选中的信息
          */
-        setSelectedItemCloseIconClickEvent(data: {
+        onSelectItemCloseIconClick(data: {
           /** 关闭图标的元素 */
           $closeIcon: HTMLElement;
           /** tag元素 */
@@ -2204,8 +2856,8 @@ export const PanelHandlerComponents = () => {
               if (this.isDisabled()) {
                 return;
               }
-              if (typeof formConfig.closeIconClickCallBack === "function") {
-                const result = formConfig.closeIconClickCallBack(event, {
+              if (typeof viewConfig.closeIconClickCallBack === "function") {
+                const result = viewConfig.closeIconClickCallBack(event, {
                   $tag: data.$tag,
                   $closeIcon: data.$closeIcon,
                   value: data.value,
@@ -2227,7 +2879,9 @@ export const PanelHandlerComponents = () => {
           );
         },
         /**
-         * 检测tag是否为空，为空显示placeholder
+         * 检测tag是否为空
+         *
+         * 如果为空则显示placeholder
          */
         checkTagEmpty() {
           if (!this.$el.$section.querySelectorAll(".el-select__choose_tag").length) {
@@ -2252,14 +2906,14 @@ export const PanelHandlerComponents = () => {
          * + false 不触发值改变的回调
          */
         removeSelectedInfo(data: PopsPanelSelectMultipleDataOption<any>, triggerValueChangeCallBack: boolean = true) {
-          for (let index = 0; index < this.$data.selectInfo.length; index++) {
-            const selectInfo = this.$data.selectInfo[index];
+          for (let index = 0; index < this.$data.selectedDataList.length; index++) {
+            const selectInfo = this.$data.selectedDataList[index];
             if (selectInfo.value === data.value) {
-              this.$data.selectInfo.splice(index, 1);
+              this.$data.selectedDataList.splice(index, 1);
               break;
             }
           }
-          triggerValueChangeCallBack && this.selectValueChangeCallBack();
+          triggerValueChangeCallBack && this.onValueChange();
         },
         /** 显示输入框 */
         showInputWrapper() {
@@ -2309,30 +2963,33 @@ export const PanelHandlerComponents = () => {
 
       PopsPanelSelectMultiple.init();
       Reflect.set($li, "data-select-multiple", PopsPanelSelectMultiple);
-      return $li;
+      return {
+        $el: $li,
+        handler: PopsPanelSelectMultiple,
+      };
     },
     /**
      * type ==> button
      * 获取中间容器的元素<li>
-     * @param formConfig
+     * @param viewConfig
      */
-    createSectionContainerItem_button(formConfig: PopsPanelButtonDetails) {
+    createSectionContainerItem_button(viewConfig: PopsPanelButtonConfig) {
       const $li = popsDOMUtils.createElement("li");
-      Reflect.set($li, "__formConfig__", formConfig);
-      this.setElementClassName($li, formConfig.className);
-      this.setElementAttributes($li, formConfig.attributes);
-      this.setElementProps($li, formConfig.props);
+      Reflect.set($li, this.$data.nodeStoreConfigKey, viewConfig);
+      this.setElementClassName($li, viewConfig.className);
+      this.setElementAttributes($li, viewConfig.attributes);
+      this.setElementProps($li, viewConfig.props);
 
-      /* 左边底部的描述的文字 */
+      // 左边底部的描述的文字
       let leftDescriptionText = "";
-      if (formConfig.description) {
-        leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
+      if (viewConfig.description) {
+        leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${viewConfig.description}</p>`;
       }
       PopsSafeUtils.setSafeHTML(
         $li,
         /*html*/ `
 				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
+					<p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
 				<div class="pops-panel-button">
 					<button class="pops-panel-button_inner" type="button">
 						<i class="pops-bottom-icon"></i>
@@ -2354,36 +3011,36 @@ export const PanelHandlerComponents = () => {
         init() {
           this.$ele.panelButton.appendChild(this.$ele.button);
           this.initButton();
-          this.setClickEvent();
+          this.onButtonClick();
         },
         initButton() {
-          if (typeof formConfig.buttonIcon === "string" && formConfig.buttonIcon.trim() !== "") {
-            /* 存在icon图标且不为空 */
-            if (PopsIcon.hasIcon(formConfig.buttonIcon)) {
-              this.setIconSVG(PopsIcon.getIcon(formConfig.buttonIcon)!);
+          if (typeof viewConfig.buttonIcon === "string" && viewConfig.buttonIcon.trim() !== "") {
+            // 存在icon图标且不为空
+            if (PopsIcon.hasIcon(viewConfig.buttonIcon)) {
+              this.setIconSVG(PopsIcon.getIcon(viewConfig.buttonIcon)!);
             } else {
-              this.setIconSVG(formConfig.buttonIcon);
+              this.setIconSVG(viewConfig.buttonIcon);
             }
             this.showIcon();
           } else {
             this.hideIcon();
           }
-          /* 按钮文字 */
-          let buttonText = formConfig.buttonText;
-          if (typeof formConfig.buttonText === "function") {
-            buttonText = formConfig.buttonText();
+          // 按钮文字
+          let buttonText = viewConfig.buttonText;
+          if (typeof viewConfig.buttonText === "function") {
+            buttonText = viewConfig.buttonText();
           }
-          this.setButtonType(formConfig.buttonType);
-          if (formConfig.buttonIsRightIcon) {
+          this.setButtonType(viewConfig.buttonType);
+          if (viewConfig.buttonIsRightIcon) {
             this.setIconRight();
           } else {
             this.setIconLeft();
           }
-          if (formConfig.disable) {
+          if (viewConfig.disable) {
             this.disable();
           }
           this.setButtonText(buttonText as string);
-          this.setIconLoadingStatus(formConfig.buttonIconIsLoading);
+          this.setIconLoadingStatus(viewConfig.buttonIconIsLoading);
         },
         disable() {
           this.$ele.button.setAttribute("disabled", "true");
@@ -2448,55 +3105,61 @@ export const PanelHandlerComponents = () => {
         setButtonText(text: string) {
           PopsSafeUtils.setSafeHTML(this.$ele.spanText, text);
         },
-        setClickEvent() {
+        /**
+         * 设置按钮的点击事件
+         */
+        onButtonClick() {
           popsDOMUtils.on(this.$ele.button, "click", void 0, (event) => {
-            if (typeof formConfig.callback === "function") {
-              formConfig.callback(event);
+            if (typeof viewConfig.callback === "function") {
+              viewConfig.callback(event);
             }
           });
         },
       };
       PopsPanelButton.init();
       Reflect.set($li, "data-button", PopsPanelButton);
-      return $li;
+      return {
+        $el: $li,
+        handler: PopsPanelButton,
+      };
     },
     /**
      * type ==> deepMenu
      * 获取深层容器的元素<li>
-     * @param formConfig
+     * @param viewConfig
      */
-    createSectionContainerItem_deepMenu(formConfig: PopsPanelDeepMenuDetails) {
+    createSectionContainerItem_deepMenu(viewConfig: PopsPanelDeepViewConfig) {
       const that = this;
       const $li = popsDOMUtils.createElement("li");
       popsDOMUtils.addClassName($li, "pops-panel-deepMenu-nav-item");
-      Reflect.set($li, "__formConfig__", formConfig);
-      this.setElementClassName($li, formConfig.className);
+      Reflect.set($li, this.$data.nodeStoreConfigKey, viewConfig);
+      this.setElementClassName($li, viewConfig.className);
       // 设置属性
-      this.setElementAttributes($li, formConfig.attributes);
+      this.setElementAttributes($li, viewConfig.attributes);
       // 设置元素上的属性
-      this.setElementProps($li, formConfig.props);
+      this.setElementProps($li, viewConfig.props);
 
-      /* 左边底部的描述的文字 */
+      // 左边底部的描述的文字
       let leftDescriptionText = "";
-      if (formConfig.description) {
+      if (viewConfig.description) {
         // 设置描述
-        leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
+        leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${viewConfig.description}</p>`;
       }
       // 箭头图标
-      const arrowRightIcon = typeof formConfig.arrowRightIcon === "boolean" ? formConfig.arrowRightIcon : true;
+      const arrowRightIcon = typeof viewConfig.arrowRightIcon === "boolean" ? viewConfig.arrowRightIcon : true;
       let arrowRightIconHTML = "";
       if (arrowRightIcon) {
         arrowRightIconHTML = `<i class="pops-panel-deepMenu-arrowRight-icon">${PopsIcon.getIcon("arrowRight")}</i>`;
       }
       let rightText = "";
-      if (formConfig.rightText) {
-        rightText = /*html*/ `<p class="pops-panel-item-right-text">${formConfig.rightText}</p>`;
+      if (viewConfig.rightText) {
+        rightText = /*html*/ `<p class="pops-panel-item-right-text">${viewConfig.rightText}</p>`;
       }
       PopsSafeUtils.setSafeHTML(
         $li,
         /*html*/ `
 				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
+					<p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
 				<div class="pops-panel-deepMenu">${rightText}${arrowRightIconHTML}</div>
 				`
       );
@@ -2508,36 +3171,36 @@ export const PanelHandlerComponents = () => {
           },
         },
         init() {
-          this.setLiClickEvent();
+          this.onLiClick();
         },
         /**
          * 生成配置每一项的元素
          * @param $container
          * @param formItemConfig
          */
-        initFormItem($container: HTMLElement, formItemConfig: PopsPanelFormsTotalDetails | PopsPanelFormsDetails) {
-          const formConfig_forms = formItemConfig as PopsPanelFormsDetails;
-          if (formConfig_forms.type === "forms") {
-            const childForms = formConfig_forms["forms"];
-            /* 每一项<li>元素 */
+        initContainerItem($container: HTMLElement, formItemConfig: PopsPanelViewConfig | PopsPanelContainerConfig) {
+          const containerViewConfig = formItemConfig as PopsPanelContainerConfig;
+          if (containerViewConfig.type === "container") {
+            const childForms = containerViewConfig["views"];
+            // 每一项<li>元素
             const formContainerListElement = popsDOMUtils.createElement("li");
-            /* 每一项<li>内的子<ul>元素 */
+            // 每一项<li>内的子<ul>元素
             const formContainerULElement = popsDOMUtils.createElement("ul");
             formContainerULElement.classList.add("pops-panel-forms-container-item-formlist");
             formContainerListElement.classList.add("pops-panel-forms-container-item");
-            /* 区域头部的文字 */
+            // 区域头部的文字
             const formHeaderDivElement = popsDOMUtils.createElement("div", {
               className: "pops-panel-forms-container-item-header-text",
             });
-            PopsSafeUtils.setSafeHTML(formHeaderDivElement, formConfig_forms["text"]);
+            PopsSafeUtils.setSafeHTML(formHeaderDivElement, containerViewConfig["text"]);
 
-            if (formConfig_forms.isFold) {
-              /* 添加第一个 */
-              /* 加进容器内 */
+            if (containerViewConfig.isFold) {
+              // 添加第一个
+              // 加进容器内
               PopsSafeUtils.setSafeHTML(
                 formHeaderDivElement,
                 /*html*/ `
-								<p>${formConfig_forms.text}</p>
+								<p>${containerViewConfig.text}</p>
 								<i class="pops-panel-forms-fold-container-icon">
 									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
 										<path d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path>
@@ -2559,15 +3222,15 @@ export const PanelHandlerComponents = () => {
               popsDOMUtils.addClassName(formHeaderDivElement, "pops-panel-forms-fold");
               formContainerListElement.appendChild(formHeaderDivElement);
             } else {
-              /* 加进容器内 */
+              // 加进容器内
               formContainerListElement.appendChild(formHeaderDivElement);
             }
 
             that.setElementClassName(formContainerListElement, formItemConfig.className);
             that.setElementAttributes(formContainerListElement, formItemConfig.attributes);
             that.setElementProps(formContainerListElement, formItemConfig.props);
-            childForms.forEach((childFormConfig) => {
-              that.uListContainerAddItem(childFormConfig, {
+            childForms.forEach((childViewConfig) => {
+              that.uListContainerAddItem(childViewConfig, {
                 ulElement: formContainerULElement,
                 sectionContainerULElement: that.sectionContainerULElement,
                 formContainerListElement: formContainerListElement,
@@ -2576,8 +3239,8 @@ export const PanelHandlerComponents = () => {
             });
             formContainerListElement.appendChild(formContainerULElement);
             $container.appendChild(formContainerListElement);
-            if (typeof formConfig_forms.afterAddToUListCallBack === "function") {
-              formConfig_forms.afterAddToUListCallBack(formConfig as any as PopsPanelFormsDetails, {
+            if (typeof containerViewConfig.afterAddToUListCallBack === "function") {
+              containerViewConfig.afterAddToUListCallBack(viewConfig as any as PopsPanelContainerConfig, {
                 target: formContainerListElement,
                 ulElement: formContainerULElement,
                 sectionContainerULElement: that.sectionContainerULElement,
@@ -2586,8 +3249,8 @@ export const PanelHandlerComponents = () => {
               });
             }
           } else {
-            /* 如果成功创建，加入到中间容器中 */
-            that.uListContainerAddItem(formConfig, {
+            // 如果成功创建，加入到中间容器中
+            that.uListContainerAddItem(viewConfig, {
               ulElement: that.sectionContainerULElement,
             });
           }
@@ -2604,7 +3267,7 @@ export const PanelHandlerComponents = () => {
           const $deepMenuSection = popsDOMUtils.createElement("section", {
             className: "pops-panel-container pops-panel-deepMenu-container",
           });
-          Reflect.set($deepMenuSection, "__formConfig__", formConfig);
+          Reflect.set($deepMenuSection, that.$data.nodeStoreConfigKey, viewConfig);
           const $deepMenuHeaderUL = popsDOMUtils.createElement("ul", {
             className: "pops-panel-container-header-ul pops-panel-deepMenu-container-header-ul",
           });
@@ -2612,7 +3275,7 @@ export const PanelHandlerComponents = () => {
             className: "pops-panel-container-main-ul",
           });
           // 标题文字
-          const headerTitleText = formConfig.headerTitle ?? formConfig.text;
+          const headerTitleText = viewConfig.headerTitle ?? viewConfig.text;
           const $header = popsDOMUtils.createElement("li", {
             className: "pops-panel-container-header-title-text pops-panel-deepMenu-container-header",
             innerHTML: /*html*/ `<p class="pops-panel-deepMenu-container-header-title-text">${headerTitleText}</p>`,
@@ -2692,10 +3355,10 @@ export const PanelHandlerComponents = () => {
             $deepMenuSection.appendChild($deepMenuHeaderUL);
             $deepMenuSection.appendChild($deepMenuMain);
 
-            if (formConfig.forms && Array.isArray(formConfig.forms)) {
-              for (let index = 0; index < formConfig.forms.length; index++) {
-                const formItemConfig = formConfig.forms[index];
-                this.initFormItem($deepMenuMain, formItemConfig);
+            if (viewConfig.views && Array.isArray(viewConfig.views)) {
+              for (let index = 0; index < viewConfig.views.length; index++) {
+                const formItemConfig = viewConfig.views[index];
+                this.initContainerItem($deepMenuMain, formItemConfig);
               }
             }
             that.$el.$panelRightSectionWrapper.appendChild($deepMenuSection);
@@ -2720,21 +3383,21 @@ export const PanelHandlerComponents = () => {
           } else {
             enterViewTransition();
           }
-          if (typeof formConfig.afterEnterDeepMenuCallBack === "function") {
-            formConfig.afterEnterDeepMenuCallBack(formConfig, {
-              sectionContainer: $deepMenuSection,
-              sectionContainerHeaderContainer: $deepMenuHeaderUL,
-              sectionContainerHeader: $header,
-              sectionBodyContainer: $deepMenuMain,
+          if (typeof viewConfig.afterEnterDeepMenuCallBack === "function") {
+            viewConfig.afterEnterDeepMenuCallBack(viewConfig, {
+              $sectionContainer: $deepMenuSection,
+              $sectionContainerHeaderContainer: $deepMenuHeaderUL,
+              $sectionContainerHeader: $header,
+              $sectionBodyContainer: $deepMenuMain,
             });
           }
           that.triggerRenderRightContainer($deepMenuSection);
         },
         /** 设置项的点击事件 */
-        setLiClickEvent() {
+        onLiClick() {
           popsDOMUtils.on($li, "click", void 0, async (event) => {
-            if (typeof formConfig.clickCallBack === "function") {
-              const result = await formConfig.clickCallBack(event, formConfig);
+            if (typeof viewConfig.clickCallBack === "function") {
+              const result = await viewConfig.clickCallBack(event, viewConfig);
               if (result) {
                 return;
               }
@@ -2747,79 +3410,84 @@ export const PanelHandlerComponents = () => {
       PopsPanelDeepMenu.init();
       Reflect.set($li, "data-deepMenu", PopsPanelDeepMenu);
 
-      return $li;
+      return {
+        $el: $li,
+        handler: PopsPanelDeepMenu,
+      };
     },
     /**
      * type ===> own
      * 获取中间容器的元素<li>
-     * @param formConfig
+     * @param viewConfig
      */
-    createSectionContainerItem_own(formConfig: PopsPanelOwnDetails) {
+    createSectionContainerItem_own(viewConfig: PopsPanelOwnConfig) {
       let $li = popsDOMUtils.createElement("li");
-      Reflect.set($li, "__formConfig__", formConfig);
-      this.setElementClassName($li, formConfig.className);
-      this.setElementAttributes($li, formConfig.attributes);
-      this.setElementProps($li, formConfig.props);
-      $li = formConfig.getLiElementCallBack($li);
-      return $li;
+      Reflect.set($li, this.$data.nodeStoreConfigKey, viewConfig);
+      this.setElementClassName($li, viewConfig.className);
+      this.setElementAttributes($li, viewConfig.attributes);
+      this.setElementProps($li, viewConfig.props);
+      $li = viewConfig.createLIElement($li);
+      return {
+        $el: $li,
+      };
     },
     /**
      * 获取中间容器的元素<li>
-     * @param formConfig
+     * @param viewConfig 视图配置
      */
-    createSectionContainerItem(formConfig: PopsPanelFormsTotalDetails) {
+    createSectionContainerItem(viewConfig: PopsPanelViewConfig) {
       /** 配置项的类型 */
-      const formType = formConfig.type;
+      const componentType = viewConfig.type;
 
-      if (formType === "switch") {
-        return this.createSectionContainerItem_switch(formConfig as PopsPanelSwitchDetails);
-      } else if (formType === "slider") {
-        return this.createSectionContainerItem_slider_new(formConfig as PopsPanelSliderDetails);
-      } else if (formType === "input") {
-        return this.createSectionContainerItem_input(formConfig as PopsPanelInputDetails);
-      } else if (formType === "textarea") {
-        return this.createSectionContainerItem_textarea(formConfig as PopsPanelTextAreaDetails);
-      } else if (formType === "select") {
-        return this.createSectionContainerItem_select(formConfig as PopsPanelSelectDetails);
-      } else if (formType === "select-multiple") {
-        return this.createSectionContainerItem_select_multiple_new(formConfig as PopsPanelSelectMultipleDetails<any>);
-      } else if (formType === "button") {
-        return this.createSectionContainerItem_button(formConfig as PopsPanelButtonDetails);
-      } else if (formType === "deepMenu") {
-        return this.createSectionContainerItem_deepMenu(formConfig as PopsPanelDeepMenuDetails);
-      } else if (formType === "own") {
-        return this.createSectionContainerItem_own(formConfig as PopsPanelOwnDetails);
+      if (componentType === "switch") {
+        return this.createSectionContainerItem_switch(viewConfig);
+      } else if (componentType === "slider") {
+        return this.createSectionContainerItem_slider_new(viewConfig);
+      } else if (componentType === "input") {
+        return this.createSectionContainerItem_input(viewConfig);
+      } else if (componentType === "textarea") {
+        return this.createSectionContainerItem_textarea(viewConfig);
+      } else if (componentType === "select") {
+        return this.createSectionContainerItem_select(viewConfig);
+      } else if (componentType === "select-multiple") {
+        return this.createSectionContainerItem_select_multiple(viewConfig);
+      } else if (componentType === "button") {
+        return this.createSectionContainerItem_button(viewConfig);
+      } else if (componentType === "deepMenu") {
+        return this.createSectionContainerItem_deepMenu(viewConfig);
+      } else if (componentType === "own") {
+        return this.createSectionContainerItem_own(viewConfig);
       } else {
-        console.error("尚未实现的type类型", formConfig);
+        console.error("尚未实现的type类型", viewConfig);
       }
     },
     /**
      * 生成配置项forms
      * 生成配置每一项的元素
-     * @param formConfig
+     * @param viewConfig
      */
-    createSectionContainerItem_forms(formConfig: PopsPanelContentConfig | PopsPanelFormsDetails) {
+    createSectionContainerItem_forms(viewConfig: PopsPanelContentConfig | PopsPanelContainerConfig) {
       const that = this;
-      const formConfig_forms = formConfig as PopsPanelFormsDetails;
-      if (formConfig_forms.type === "forms") {
-        const childForms = formConfig["forms"];
-        /* 每一项<li>元素 */
+      const containerConfig = viewConfig as PopsPanelContainerConfig;
+      if (containerConfig.type === "container") {
+        const childForms = viewConfig["views"];
+        // 每一项<li>元素
         const formContainerListElement = popsDOMUtils.createElement("li");
-        /* 每一项<li>内的子<ul>元素 */
+        // 每一项<li>内的子<ul>元素
         const formContainerULElement = popsDOMUtils.createElement("ul");
         formContainerListElement.classList.add("pops-panel-forms-container-item");
         formContainerULElement.classList.add("pops-panel-forms-container-item-formlist");
-        /* 区域头部的文字 */
+        // 区域头部的文字
         const formHeaderDivElement = popsDOMUtils.createElement("div", {
           className: "pops-panel-forms-container-item-header-text",
         });
-        PopsSafeUtils.setSafeHTML(formHeaderDivElement, formConfig_forms["text"]);
-        if (formConfig_forms.isFold) {
-          /* 加进容器内 */
+        PopsSafeUtils.setSafeHTML(formHeaderDivElement, containerConfig["text"]);
+        if (containerConfig.isFold) {
+          // 加进容器内
           PopsSafeUtils.setSafeHTML(
             formHeaderDivElement,
             /*html*/ `
-						<p>${formConfig_forms.text}</p>
+						<p>${containerConfig.text}</p>
 						<i class="pops-panel-forms-fold-container-icon">
 							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
 								<path d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path>
@@ -2841,14 +3509,14 @@ export const PanelHandlerComponents = () => {
           popsDOMUtils.addClassName(formContainerListElement, "pops-panel-forms-fold");
           formContainerListElement.appendChild(formHeaderDivElement);
         } else {
-          /* 加进容器内 */
+          // 加进容器内
           formContainerListElement.appendChild(formHeaderDivElement);
         }
-        that.setElementClassName(formContainerListElement, formConfig.className);
-        that.setElementAttributes(formContainerListElement, formConfig.attributes);
-        that.setElementProps(formContainerListElement, formConfig.props);
-        childForms.forEach((childFormConfig) => {
-          that.uListContainerAddItem(childFormConfig as PopsPanelFormsTotalDetails, {
+        that.setElementClassName(formContainerListElement, viewConfig.className);
+        that.setElementAttributes(formContainerListElement, viewConfig.attributes);
+        that.setElementProps(formContainerListElement, viewConfig.props);
+        childForms.forEach((childViewConfig) => {
+          that.uListContainerAddItem(childViewConfig as PopsPanelViewConfig, {
             ulElement: formContainerULElement,
             sectionContainerULElement: that.sectionContainerULElement,
             formContainerListElement: formContainerListElement,
@@ -2858,8 +3526,8 @@ export const PanelHandlerComponents = () => {
         formContainerListElement.appendChild(formContainerULElement);
         that.sectionContainerULElement.appendChild(formContainerListElement);
 
-        if (typeof formConfig_forms.afterAddToUListCallBack === "function") {
-          formConfig_forms.afterAddToUListCallBack(formConfig_forms, {
+        if (typeof containerConfig.afterAddToUListCallBack === "function") {
+          containerConfig.afterAddToUListCallBack(containerConfig, {
             target: formContainerListElement,
             ulElement: formContainerULElement,
             sectionContainerULElement: that.sectionContainerULElement,
@@ -2868,26 +3536,27 @@ export const PanelHandlerComponents = () => {
           });
         }
       } else {
-        /* 如果成功创建，加入到中间容器中 */
-        that.uListContainerAddItem(formConfig as any as PopsPanelFormsTotalDetails, {
+        // 如果成功创建，加入到中间容器中
+        that.uListContainerAddItem(viewConfig as any as PopsPanelViewConfig, {
           ulElement: that.sectionContainerULElement,
         });
       }
     },
     /**
      * 主动触发触发渲染右侧容器的事件
+     * @param $container 容器
      */
     triggerRenderRightContainer($container: HTMLElement) {
-      const __formConfig__: PopsPanelEventType["pops:renderRightContainer"]["formConfig"] = Reflect.get(
+      const dataViewConfig: PopsPanelEventType["pops:renderRightContainer"]["viewConfig"] = Reflect.get(
         $container,
-        "__formConfig__"
+        this.$data.nodeStoreConfigKey
       );
       this.$el.$pops.dispatchEvent(
         new CustomEvent<PopsPanelEventType["pops:renderRightContainer"]>(
           <keyof PopsPanelEventType>"pops:renderRightContainer",
           {
             detail: {
-              formConfig: __formConfig__,
+              viewConfig: dataViewConfig,
             },
           }
         )
@@ -2895,21 +3564,21 @@ export const PanelHandlerComponents = () => {
     },
     /**
      *
-     * @param formConfig
+     * @param viewConfig
      * @param containerOptions
      */
     uListContainerAddItem(
-      formConfig: PopsPanelFormsTotalDetails,
-      containerOptions: Omit<PopsPanelRightAsideContainerOptions, "target">
+      viewConfig: PopsPanelViewConfig,
+      containerOptions: Omit<PopsPanelRightAsideContainerConfig, "target">
     ) {
-      const itemLiElement = this.createSectionContainerItem(formConfig);
-      if (itemLiElement) {
-        containerOptions["ulElement"].appendChild(itemLiElement);
+      const itemInfo = this.createSectionContainerItem(viewConfig);
+      if (itemInfo) {
+        containerOptions["ulElement"].appendChild(itemInfo.$el);
       }
-      if (typeof formConfig.afterAddToUListCallBack === "function") {
-        formConfig.afterAddToUListCallBack(formConfig as any, {
+      if (typeof viewConfig.afterAddToUListCallBack === "function") {
+        viewConfig.afterAddToUListCallBack(viewConfig as any, {
           ...containerOptions,
-          target: itemLiElement,
+          target: itemInfo?.$el,
         });
       }
     },
@@ -2918,7 +3587,7 @@ export const PanelHandlerComponents = () => {
      * @param $asideItem 左侧的容器<li>元素
      * @param asideConfig 配置
      */
-    setAsideItemClickEvent($asideItem: HTMLElement, asideConfig: PopsPanelContentConfig) {
+    onAsideItemClick($asideItem: HTMLElement, asideConfig: PopsPanelContentConfig) {
       popsDOMUtils.on<MouseEvent | PointerEvent>($asideItem, "click", async (event) => {
         if (typeof asideConfig.clickFirstCallback === "function") {
           const clickFirstCallbackResult = await asideConfig.clickFirstCallback(
@@ -2931,13 +3600,13 @@ export const PanelHandlerComponents = () => {
           }
         }
         this.clearContainer();
-        const rightContainerFormConfig: PopsPanelContentConfig[] = Reflect.get($asideItem, "__forms__");
+        const rightContainerViewConfig: PopsPanelContentConfig[] = Reflect.get($asideItem, "__forms__");
 
-        Reflect.set(this.$el.$panelContentSectionContainer, "__formConfig__", rightContainerFormConfig);
+        Reflect.set(this.$el.$panelContentSectionContainer, this.$data.nodeStoreConfigKey, rightContainerViewConfig);
         popsDOMUtils.cssShow(this.$el.$panelContentSectionContainer);
         this.clearAsideItemIsVisited();
         this.setAsideItemIsVisited($asideItem);
-        /* 顶部标题栏，存在就设置 */
+        // 顶部标题栏，存在就设置
         const title = typeof asideConfig.title === "function" ? asideConfig.title() : asideConfig.title;
         let headerTitleText =
           typeof asideConfig.headerTitle === "function" ? asideConfig.headerTitle() : asideConfig.headerTitle;
@@ -2950,12 +3619,12 @@ export const PanelHandlerComponents = () => {
           this.sectionContainerHeaderULElement.appendChild($containerHeaderTitle);
         }
 
-        rightContainerFormConfig.forEach((formConfig) => {
-          this.createSectionContainerItem_forms(formConfig);
+        rightContainerViewConfig.forEach((viewConfig) => {
+          this.createSectionContainerItem_forms(viewConfig);
         });
 
         if (typeof asideConfig.clickCallback === "function") {
-          /* 执行回调 */
+          // 执行回调
           const asideClickCallbackResult = await asideConfig.clickCallback(
             event,
             this.sectionContainerHeaderULElement,