From d71b62a2951a2cf6dded317f117fcbb653f6fe80 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Wed, 15 Oct 2025 19:15:07 -0700
Subject: [PATCH 1/2] fix(app-preview-importMap): fix importmap missing
 element-plus when app preview

---
 designer-demo/public/mock/bundle.json         | 637 +++++++++++++++
 .../mock/get/app-center/v1/apps/schema/1.json |  21 +
 .../canvas/DesignCanvas/src/DesignCanvas.vue  |   7 +-
 .../container/src/components/CanvasAction.vue |   7 +-
 packages/canvas/container/src/container.ts    |  35 +-
 .../toolbar-built-in/ToolbarBaseIcon.vue      |   2 +-
 packages/common/js/import-map.json            |   1 +
 .../HtmlAttributesConfigurator.vue            |  66 +-
 .../slot-configurator/SlotConfigurator.vue    |   2 +-
 .../VariableConfigurator.vue                  | 736 ------------------
 .../src/preview/src/preview/usePreviewData.ts |   8 +-
 .../materials/src/composable/useResource.ts   |  32 +-
 packages/plugins/tree/src/Main.vue            |  19 +-
 packages/toolbars/preview/src/Main.vue        |   2 +-
 14 files changed, 794 insertions(+), 781 deletions(-)
 delete mode 100644 packages/configurator/src/variable-configurator/VariableConfigurator.vue

diff --git a/designer-demo/public/mock/bundle.json b/designer-demo/public/mock/bundle.json
index 3d03b34252..abb90ede46 100644
--- a/designer-demo/public/mock/bundle.json
+++ b/designer-demo/public/mock/bundle.json
@@ -3,6 +3,507 @@
     "framework": "Vue",
     "materials": {
       "components": [
+        {
+          "version": "3.22.0",
+          "name": {
+            "zh_CN": "折线图"
+          },
+          "component": "TinyHuichartsLine",
+          "icon": "line",
+          "description": "折线图",
+          "docUrl": "",
+          "screenshot": "",
+          "tags": "",
+          "keywords": "",
+          "devMode": "proCode",
+          "npm": {
+            "destructuring": true,
+            "exportName": "TinyHuichartsLine",
+            "name": "TinyVueHuicharts组件库",
+            "package": "@opentiny/vue-huicharts",
+            "version": "3.22.0",
+            "script": "https://registry.npmmirror.com/@opentiny/vue-runtime/3.22/files/dist3/tiny-vue-huicharts.mjs"
+          },
+          "group": "chart",
+          "category": "图表组件",
+          "priority": 2,
+          "schema": {
+            "properties": [
+              {
+                "label": {
+                  "zh_CN": "基础信息"
+                },
+                "description": {
+                  "zh_CN": "基础信息"
+                },
+                "content": [
+                  {
+                    "property": "options",
+                    "label": {
+                      "text": {
+                        "zh_CN": "图表配置"
+                      }
+                    },
+                    "required": true,
+                    "readOnly": false,
+                    "disabled": false,
+                    "cols": 12,
+                    "widget": {
+                      "component": "CodeConfigurator",
+                      "props": {
+                        "language": "json"
+                      }
+                    },
+                    "description": {
+                      "zh_CN": "折线图配置"
+                    },
+                    "labelPosition": "left"
+                  }
+                ]
+              }
+            ],
+            "events": {
+              "onChange": {
+                "label": {
+                  "zh_CN": "值改变时触发"
+                },
+                "description": {
+                  "zh_CN": "在 Input 值改变时触发"
+                },
+                "type": "event",
+                "functionInfo": {
+                  "params": [
+                    {
+                      "name": "value",
+                      "type": "string",
+                      "defaultValue": "",
+                      "description": {
+                        "zh_CN": "输入框改变后的值"
+                      }
+                    }
+                  ],
+                  "returns": {}
+                },
+                "defaultValue": ""
+              },
+              "onInput": {
+                "label": {
+                  "zh_CN": "输入值改变时触发"
+                },
+                "description": {
+                  "zh_CN": "在 Input 输入值改变时触发"
+                },
+                "type": "event",
+                "functionInfo": {
+                  "params": [
+                    {
+                      "name": "value",
+                      "type": "string",
+                      "defaultValue": "",
+                      "description": {
+                        "zh_CN": "输入框输入的值"
+                      }
+                    }
+                  ],
+                  "returns": {}
+                },
+                "defaultValue": ""
+              },
+              "onUpdate:modelValue": {
+                "label": {
+                  "zh_CN": "双向绑定的值改变时触发"
+                },
+                "description": {
+                  "zh_CN": "在 Input 输入值改变时触发"
+                },
+                "type": "event",
+                "functionInfo": {
+                  "params": [
+                    {
+                      "name": "value",
+                      "type": "string",
+                      "defaultValue": "",
+                      "description": {
+                        "zh_CN": "双向绑定的值"
+                      }
+                    }
+                  ],
+                  "returns": {}
+                },
+                "defaultValue": ""
+              }
+            },
+            "slots": {
+              "prefix": {
+                "label": {
+                  "zh_CN": "前置内容"
+                }
+              },
+              "suffix": {
+                "label": {
+                  "zh_CN": "后置内容"
+                }
+              }
+            }
+          },
+          "configure": {
+            "loop": true,
+            "condition": true,
+            "styles": true,
+            "isContainer": false,
+            "isModal": false,
+            "nestingRule": {
+              "childWhitelist": "",
+              "parentWhitelist": "",
+              "descendantBlacklist": "",
+              "ancestorWhitelist": ""
+            },
+            "isNullNode": false,
+            "isLayout": false,
+            "rootSelector": "",
+            "shortcuts": {
+              "properties": []
+            },
+            "contextMenu": {
+              "actions": ["create symbol"],
+              "disable": ["copy", "remove"]
+            }
+          }
+        },
+        {
+          "version": "3.22.0",
+          "name": {
+            "zh_CN": "柱状图"
+          },
+          "component": "TinyHuichartsHistogram",
+          "icon": "bar",
+          "description": "柱状图",
+          "docUrl": "",
+          "screenshot": "",
+          "tags": "",
+          "keywords": "",
+          "devMode": "proCode",
+          "npm": {
+            "destructuring": true,
+            "exportName": "TinyHuichartsHistogram",
+            "name": "TinyVueHuicharts组件库",
+            "package": "@opentiny/vue-huicharts",
+            "version": "3.22.0",
+            "script": "https://registry.npmmirror.com/@opentiny/vue-runtime/3.22/files/dist3/tiny-vue-huicharts.mjs"
+          },
+          "group": "chart",
+          "category": "图表组件",
+          "priority": 2,
+          "schema": {
+            "properties": [
+              {
+                "label": {
+                  "zh_CN": "基础信息"
+                },
+                "description": {
+                  "zh_CN": "基础信息"
+                },
+                "content": [
+                  {
+                    "property": "options",
+                    "label": {
+                      "text": {
+                        "zh_CN": "图表配置"
+                      }
+                    },
+                    "required": true,
+                    "readOnly": false,
+                    "disabled": false,
+                    "cols": 12,
+                    "widget": {
+                      "component": "CodeConfigurator",
+                      "props": {
+                        "language": "json"
+                      }
+                    },
+                    "description": {
+                      "zh_CN": "柱状图配置"
+                    },
+                    "labelPosition": "left"
+                  }
+                ]
+              }
+            ],
+            "events": {
+              "onChange": {
+                "label": {
+                  "zh_CN": "值改变时触发"
+                },
+                "description": {
+                  "zh_CN": "在 Input 值改变时触发"
+                },
+                "type": "event",
+                "functionInfo": {
+                  "params": [
+                    {
+                      "name": "value",
+                      "type": "string",
+                      "defaultValue": "",
+                      "description": {
+                        "zh_CN": "输入框改变后的值"
+                      }
+                    }
+                  ],
+                  "returns": {}
+                },
+                "defaultValue": ""
+              },
+              "onInput": {
+                "label": {
+                  "zh_CN": "输入值改变时触发"
+                },
+                "description": {
+                  "zh_CN": "在 Input 输入值改变时触发"
+                },
+                "type": "event",
+                "functionInfo": {
+                  "params": [
+                    {
+                      "name": "value",
+                      "type": "string",
+                      "defaultValue": "",
+                      "description": {
+                        "zh_CN": "输入框输入的值"
+                      }
+                    }
+                  ],
+                  "returns": {}
+                },
+                "defaultValue": ""
+              },
+              "onUpdate:modelValue": {
+                "label": {
+                  "zh_CN": "双向绑定的值改变时触发"
+                },
+                "description": {
+                  "zh_CN": "在 Input 输入值改变时触发"
+                },
+                "type": "event",
+                "functionInfo": {
+                  "params": [
+                    {
+                      "name": "value",
+                      "type": "string",
+                      "defaultValue": "",
+                      "description": {
+                        "zh_CN": "双向绑定的值"
+                      }
+                    }
+                  ],
+                  "returns": {}
+                },
+                "defaultValue": ""
+              }
+            },
+            "slots": {
+              "prefix": {
+                "label": {
+                  "zh_CN": "前置内容"
+                }
+              },
+              "suffix": {
+                "label": {
+                  "zh_CN": "后置内容"
+                }
+              }
+            }
+          },
+          "configure": {
+            "loop": true,
+            "condition": true,
+            "styles": true,
+            "isContainer": false,
+            "isModal": false,
+            "nestingRule": {
+              "childWhitelist": "",
+              "parentWhitelist": "",
+              "descendantBlacklist": "",
+              "ancestorWhitelist": ""
+            },
+            "isNullNode": false,
+            "isLayout": false,
+            "rootSelector": "",
+            "shortcuts": {
+              "properties": []
+            },
+            "contextMenu": {
+              "actions": ["create symbol"],
+              "disable": ["copy", "remove"]
+            }
+          }
+        },
+        {
+          "version": "3.22.0",
+          "name": {
+            "zh_CN": "圆盘图"
+          },
+          "component": "TinyHuichartsPie",
+          "icon": "pie",
+          "description": "圆盘图",
+          "docUrl": "",
+          "screenshot": "",
+          "tags": "",
+          "keywords": "",
+          "devMode": "proCode",
+          "npm": {
+            "destructuring": true,
+            "exportName": "TinyHuichartsPie",
+            "name": "TinyVueHuicharts组件库",
+            "package": "@opentiny/vue-huicharts",
+            "version": "3.22.0",
+            "script": "https://registry.npmmirror.com/@opentiny/vue-runtime/3.22/files/dist3/tiny-vue-huicharts.mjs"
+          },
+          "group": "chart",
+          "category": "图表组件",
+          "priority": 2,
+          "schema": {
+            "properties": [
+              {
+                "label": {
+                  "zh_CN": "基础信息"
+                },
+                "description": {
+                  "zh_CN": "基础信息"
+                },
+                "content": [
+                  {
+                    "property": "options",
+                    "label": {
+                      "text": {
+                        "zh_CN": "图表配置"
+                      }
+                    },
+                    "required": true,
+                    "readOnly": false,
+                    "disabled": false,
+                    "cols": 12,
+                    "widget": {
+                      "component": "CodeConfigurator",
+                      "props": {
+                        "language": "json"
+                      }
+                    },
+                    "description": {
+                      "zh_CN": "圆盘图配置"
+                    },
+                    "labelPosition": "left"
+                  }
+                ]
+              }
+            ],
+            "events": {
+              "onChange": {
+                "label": {
+                  "zh_CN": "值改变时触发"
+                },
+                "description": {
+                  "zh_CN": "在 Input 值改变时触发"
+                },
+                "type": "event",
+                "functionInfo": {
+                  "params": [
+                    {
+                      "name": "value",
+                      "type": "string",
+                      "defaultValue": "",
+                      "description": {
+                        "zh_CN": "输入框改变后的值"
+                      }
+                    }
+                  ],
+                  "returns": {}
+                },
+                "defaultValue": ""
+              },
+              "onInput": {
+                "label": {
+                  "zh_CN": "输入值改变时触发"
+                },
+                "description": {
+                  "zh_CN": "在 Input 输入值改变时触发"
+                },
+                "type": "event",
+                "functionInfo": {
+                  "params": [
+                    {
+                      "name": "value",
+                      "type": "string",
+                      "defaultValue": "",
+                      "description": {
+                        "zh_CN": "输入框输入的值"
+                      }
+                    }
+                  ],
+                  "returns": {}
+                },
+                "defaultValue": ""
+              },
+              "onUpdate:modelValue": {
+                "label": {
+                  "zh_CN": "双向绑定的值改变时触发"
+                },
+                "description": {
+                  "zh_CN": "在 Input 输入值改变时触发"
+                },
+                "type": "event",
+                "functionInfo": {
+                  "params": [
+                    {
+                      "name": "value",
+                      "type": "string",
+                      "defaultValue": "",
+                      "description": {
+                        "zh_CN": "双向绑定的值"
+                      }
+                    }
+                  ],
+                  "returns": {}
+                },
+                "defaultValue": ""
+              }
+            },
+            "slots": {
+              "prefix": {
+                "label": {
+                  "zh_CN": "前置内容"
+                }
+              },
+              "suffix": {
+                "label": {
+                  "zh_CN": "后置内容"
+                }
+              }
+            }
+          },
+          "configure": {
+            "loop": true,
+            "condition": true,
+            "styles": true,
+            "isContainer": false,
+            "isModal": false,
+            "nestingRule": {
+              "childWhitelist": "",
+              "parentWhitelist": "",
+              "descendantBlacklist": "",
+              "ancestorWhitelist": ""
+            },
+            "isNullNode": false,
+            "isLayout": false,
+            "rootSelector": "",
+            "shortcuts": {
+              "properties": []
+            },
+            "contextMenu": {
+              "actions": ["create symbol"],
+              "disable": ["copy", "remove"]
+            }
+          }
+        },
         {
           "id": 1,
           "version": "2.4.2",
@@ -14743,6 +15244,135 @@
             }
           ]
         },
+        {
+          "group": "chart",
+          "label": {
+            "zh_CN": "图表类型"
+          },
+          "children": [
+            {
+              "name": {
+                "zh_CN": "折线图"
+              },
+              "icon": "line",
+              "screenshot": "",
+              "snippetName": "TinyHuichartsLine",
+              "schema": {
+                "componentName": "TinyHuichartsLine",
+                "props": {
+                  "options": {
+                    "theme": "hdesign-light",
+                    "padding": [50, 30, 50, 20],
+                    "legend": {
+                      "show": true,
+                      "icon": "line"
+                    },
+                    "data": [
+                      { "Month": "Jan", "Domestics": 33, "Abroad": 37 },
+                      { "Month": "Feb", "Domestics": 27, "Abroad": 39 },
+                      { "Month": "Mar", "Domestics": 31, "Abroad": 20 },
+                      { "Month": "Apr", "Domestics": 30, "Abroad": 15 },
+                      { "Month": "May", "Domestics": 37, "Abroad": 13 },
+                      { "Month": "Jun", "Domestics": 36, "Abroad": 17 },
+                      { "Month": "Jul", "Domestics": 42, "Abroad": 22 },
+                      { "Month": "Aug", "Domestics": 22, "Abroad": 12 },
+                      { "Month": "Sep", "Domestics": 17, "Abroad": 30 },
+                      { "Month": "Oct", "Domestics": 40, "Abroad": 33 },
+                      { "Month": "Nov", "Domestics": 42, "Abroad": 22 },
+                      { "Month": "Dec", "Domestics": 32, "Abroad": 11 }
+                    ],
+                    "xAxis": {
+                      "data": "Month"
+                    },
+                    "yAxis": {
+                      "name": "Percentage(%)"
+                    }
+                  }
+                }
+              }
+            },
+            {
+              "name": {
+                "zh_CN": "柱状图"
+              },
+              "icon": "bar",
+              "screenshot": "",
+              "snippetName": "TinyHuichartsHistogram",
+              "schema": {
+                "componentName": "TinyHuichartsHistogram",
+                "props": {
+                  "options": {
+                    "theme": "hdesign-light",
+                    "padding": [50, 30, 50, 20],
+                    "data": [
+                      { "Month": "Jan", "Domestic": 33, "Abroad": 1 },
+                      { "Month": "Feb", "Domestic": 27, "Abroad": 39 },
+                      { "Month": "Mar", "Domestic": 31, "Abroad": 20 },
+                      { "Month": "Apr", "Domestic": 30, "Abroad": 15 },
+                      { "Month": "May", "Domestic": 37, "Abroad": 1 },
+                      { "Month": "Jun", "Domestic": 36, "Abroad": 17 },
+                      { "Month": "Jul", "Domestic": 42, "Abroad": 22 },
+                      { "Month": "Aug", "Domestic": 22, "Abroad": 12 },
+                      { "Month": "Sep", "Domestic": 17, "Abroad": 30 },
+                      { "Month": "Oct", "Domestic": 40, "Abroad": 33 },
+                      { "Month": "Nov", "Domestic": 42, "Abroad": 22 },
+                      { "Month": "Dec", "Domestic": 32, "Abroad": 1 }
+                    ],
+                    "xAxis": {
+                      "data": "Month"
+                    },
+                    "yAxis": {
+                      "name": "Percentage(%)"
+                    }
+                  }
+                }
+              }
+            },
+            {
+              "name": {
+                "zh_CN": "圆盘图"
+              },
+              "icon": "pie",
+              "screenshot": "",
+              "snippetName": "TinyHuichartsPie",
+              "schema": {
+                "componentName": "TinyHuichartsPie",
+                "props": {
+                  "options": {
+                    "theme": "hdesign-light",
+                    "label": {
+                      "show": true,
+                      "line": true,
+                      "labelHtml": "{a|}{b|{b}:}{c|{d}%}",
+                      "rich": {
+                        "a": {
+                          "width": 12,
+                          "height": 12,
+                          "backgroundColor": {
+                            "image": "./image/charts/pie/ic_jiantou_hong.svg"
+                          }
+                        },
+                        "b": {
+                          "padding": [2, 4, 0, 0]
+                        },
+                        "c": {
+                          "fontWeight": "bold",
+                          "padding": [2, 0, 0, 0]
+                        }
+                      }
+                    },
+                    "data": [
+                      { "value": 100, "name": "VPC" },
+                      { "value": 90, "name": "IM" },
+                      { "value": 49, "name": "EIP" },
+                      { "value": 14, "name": "SG" }
+                    ]
+                  }
+                }
+              }
+            }
+          ]
+        },
         {
           "group": "element-plus",
           "label": {
@@ -14920,6 +15550,13 @@
         }
       ],
       "packages": [
+        {
+          "name": "TinyVueHuicharts组件库",
+          "package": "@opentiny/vue-huicharts",
+          "version": "3.22.0",
+          "destructuring": true,
+          "script": "https://registry.npmmirror.com/@opentiny/vue-runtime/3.22/files/dist3/tiny-vue-huicharts.mjs"
+        },
         {
           "name": "TinyVue组件库",
           "package": "@opentiny/vue",
diff --git a/mockServer/src/mock/get/app-center/v1/apps/schema/1.json b/mockServer/src/mock/get/app-center/v1/apps/schema/1.json
index 96b7617b9b..870bd4326c 100644
--- a/mockServer/src/mock/get/app-center/v1/apps/schema/1.json
+++ b/mockServer/src/mock/get/app-center/v1/apps/schema/1.json
@@ -2057,6 +2057,27 @@
         "destructuring": true,
         "version": "2.4.2"
       },
+      {
+        "componentName": "TinyHuichartsLine",
+        "package": "@opentiny/vue-huicharts",
+        "exportName": "TinyHuichartsLine",
+        "destructuring": true,
+        "version": "3.22.0"
+      },
+      {
+        "componentName": "TinyHuichartsHistogram",
+        "package": "@opentiny/vue-huicharts",
+        "exportName": "TinyHuichartsHistogram",
+        "destructuring": true,
+        "version": "3.22.0"
+      },
+      {
+        "componentName": "TinyHuichartsPie",
+        "package": "@opentiny/vue-huicharts",
+        "exportName": "TinyHuichartsPie",
+        "destructuring": true,
+        "version": "3.22.0"
+      },
       {
         "componentName": "PortalHome",
         "main": "common/components/home",
diff --git a/packages/canvas/DesignCanvas/src/DesignCanvas.vue b/packages/canvas/DesignCanvas/src/DesignCanvas.vue
index 9a112f672e..d865509252 100644
--- a/packages/canvas/DesignCanvas/src/DesignCanvas.vue
+++ b/packages/canvas/DesignCanvas/src/DesignCanvas.vue
@@ -87,6 +87,9 @@ export default {
       footData.value = useCanvas().getNodePath(node?.id)
       pageState.currentSchema = {}
       pageState.properties = null
+      // 删除节点后，重置pageState中组件的属性
+      // 后续需要改造
+      useProperties().getProps(null, null)
     }
 
     const isBlock = useCanvas().isBlock
@@ -106,9 +109,9 @@ export default {
           empty: () => '应用下暂无页面，需新建页面后体验画布功能',
           release: (type) => `当前${componentType[type]}未锁定，点击右上角 “锁定” 图标后编辑${componentType[type]}`,
           lock: (type) =>
-            `当前${componentType[type]}被 ${pageInfo?.username || ''} 锁定，如需编辑请先联系他解锁文件，然后再锁定该${
+            `当前${componentType[type]}被 ${pageInfo?.username || ''} 锁定，您可以创建新页面，如需编辑请先联系他解锁${
               componentType[type]
-            }后编辑！`
+            }，然后再锁定该${componentType[type]}后编辑！`
         }
 
         const renderMsg = message[pageStatus.state](pageSchema.componentName)
diff --git a/packages/canvas/container/src/components/CanvasAction.vue b/packages/canvas/container/src/components/CanvasAction.vue
index d8fd76ce71..9df3bc0cac 100644
--- a/packages/canvas/container/src/components/CanvasAction.vue
+++ b/packages/canvas/container/src/components/CanvasAction.vue
@@ -251,7 +251,12 @@ export default {
     }
 
     const hide = () => {
-      getRenderer().setCondition(getCurrent().schema?.id, false)
+      if (getCurrent().schema?.id) {
+        const { clearSelect } = useCanvas().canvasApi.value
+        getRenderer().setCondition(getCurrent().schema.id, false)
+        useCanvas().pageState.nodesStatus[getCurrent().schema.id] = false
+        clearSelect()
+      }
       updateRect()
     }
 
diff --git a/packages/canvas/container/src/container.ts b/packages/canvas/container/src/container.ts
index f81e18444a..fecf997f32 100644
--- a/packages/canvas/container/src/container.ts
+++ b/packages/canvas/container/src/container.ts
@@ -466,6 +466,34 @@ const setSelectRect = (
   )
 }
 
+const getElementDurationTime = (elementId?: string) => {
+  const element = elementId ? querySelectById(elementId) : getDocument().body
+  const transitionDuration = window.getComputedStyle(element).getPropertyValue('transition-duration')
+  const transitionDelay = window.getComputedStyle(element).getPropertyValue('transition-delay')
+  let delayTime = 0
+  const getMaxMillisecondNumber = (arr: string[]) => {
+    const millisecondNumber = arr.map((item) => {
+      if (item.endsWith('ms')) {
+        return parseFloat(item)
+      } else {
+        return parseFloat(item) * 1000
+      }
+    })
+    return millisecondNumber.length ? Math.max(...millisecondNumber) : 0
+  }
+  if (transitionDuration) {
+    const transitionDurations = transitionDuration.split(',')
+    delayTime += getMaxMillisecondNumber(transitionDurations)
+  }
+
+  if (transitionDelay) {
+    const transitionDelays = transitionDelay.split(',')
+    delayTime += getMaxMillisecondNumber(transitionDelays)
+  }
+
+  return delayTime
+}
+
 export const updateRect = (id?: string) => {
   id = (typeof id === 'string' && id) || getCurrent().schema?.id
   clearHover()
@@ -481,7 +509,9 @@ export const updateRect = (id?: string) => {
   const isBodySelected = !selectState.componentName && selectState.width > 0
 
   if (id || isBodySelected) {
-    setTimeout(() => setSelectRect(id))
+    // 获取元素动画持续时间
+    const waitTime = getElementDurationTime(id)
+    setTimeout(() => setSelectRect(id), waitTime)
   } else {
     clearSelect()
   }
@@ -816,7 +846,6 @@ export const dragMove = (event: DragEvent, isHover: boolean) => {
 // type == clickTree, 为点击大纲; type == loop-id=xxx ,为点击循环数据
 export const selectNode = async (id: string, type?: string, isMultiple = false) => {
   const { node } = useCanvas().getNodeWithParentById(id) || {}
-
   let element = querySelectById(id)
 
   if (element && node) {
@@ -825,7 +854,6 @@ export const selectNode = async (id: string, type?: string, isMultiple = false)
   }
 
   const nodeIsSelected = setSelectRect(id, element, { isMultiple, type, schema: node })
-
   // 执行setSelectRect之后再去判断multiSelectedStates的长度
   if (multiSelectedStates.value.length === 1) {
     const { schema: node, parent, type } = multiSelectedStates.value[0]
@@ -851,6 +879,7 @@ export const selectNode = async (id: string, type?: string, isMultiple = false)
   if (multiSelectedStates.value.length === 1) {
     const { schema: node, parent, type, id } = multiSelectedStates.value[0]
     canvasState.emit('selected', node, parent, type, id)
+
     return node
   } else {
     canvasState.emit('selected')
diff --git a/packages/common/component/toolbar-built-in/ToolbarBaseIcon.vue b/packages/common/component/toolbar-built-in/ToolbarBaseIcon.vue
index c50a8d1488..489892c7a2 100644
--- a/packages/common/component/toolbar-built-in/ToolbarBaseIcon.vue
+++ b/packages/common/component/toolbar-built-in/ToolbarBaseIcon.vue
@@ -1,7 +1,7 @@
 <template>
   <tiny-popover
     :trigger="trigger"
-    :open-delay="1000"
+    :open-delay="500"
     popper-class="toolbar-right-popover"
     append-to-body
     :content="content"
diff --git a/packages/common/js/import-map.json b/packages/common/js/import-map.json
index 11d44da361..1a3a9c7766 100644
--- a/packages/common/js/import-map.json
+++ b/packages/common/js/import-map.json
@@ -17,6 +17,7 @@
     "@opentiny/vue-common": "${VITE_CDN_DOMAIN}/@opentiny/vue-runtime${versionDelimiter}~3.20${fileDelimiter}/dist3/tiny-vue-common.mjs",
     "@opentiny/vue-locale": "${VITE_CDN_DOMAIN}/@opentiny/vue-runtime${versionDelimiter}~3.20${fileDelimiter}/dist3/tiny-vue-locale.mjs",
     "@opentiny/vue-renderless/": "${VITE_CDN_DOMAIN}/@opentiny/vue-renderless${versionDelimiter}~3.20${fileDelimiter}/",
+    "@opentiny/vue-huicharts": "${VITE_CDN_DOMAIN}/@opentiny/vue-runtime${versionDelimiter}~3.22${fileDelimiter}/dist3/tiny-vue-huicharts.mjs",
     "echarts": "${VITE_CDN_DOMAIN}/echarts${versionDelimiter}5.4.1${fileDelimiter}/dist/echarts.esm.js",
     "@tailwindcss/browser": "${VITE_CDN_DOMAIN}/@tailwindcss/browser${versionDelimiter}^4${fileDelimiter}/dist/index.global.js"
   },
diff --git a/packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue b/packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue
index e09a9349f5..a3e4ce57a1 100644
--- a/packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue
+++ b/packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="attr-header">
-    <span class="header-title">自定义属性</span>
+    <span class="header-title">原生属性</span>
     <tiny-popover
       v-model="state.visible"
       placement="bottom"
@@ -11,11 +11,18 @@
     >
       <div class="attr-form">
         <icon-close class="icon-close" @click="closePopover"></icon-close>
-        <tiny-form label-position="left" label-width="53px">
-          <tiny-form-item label="name">
+        <tiny-form
+          ref="attrFormRef"
+          :model="state.formData"
+          :rules="rules"
+          validate-type="text"
+          label-position="left"
+          label-width="53px"
+        >
+          <tiny-form-item label="name" prop="key">
             <tiny-input v-model="state.formData.key"></tiny-input>
           </tiny-form-item>
-          <tiny-form-item label="value">
+          <tiny-form-item label="value" prop="value">
             <tiny-input v-model="state.formData.value"></tiny-input>
           </tiny-form-item>
           <div class="footer">
@@ -81,9 +88,18 @@ export default {
       currentAttr: {}
     })
 
+    const attrFormRef = ref()
     const attrs = ref([])
     const properties = ['style']
 
+    const rules = {
+      key: [
+        { required: true, message: '名称必填', trigger: 'blur' },
+        { max: 20, message: '长度不大于20', trigger: 'change' }
+      ],
+      value: [{ max: 200, message: '长度不大于200', trigger: 'change' }]
+    }
+
     watchEffect(() => {
       if (!useProperties().getSchema()?.props) {
         return
@@ -144,24 +160,29 @@ export default {
     }
 
     const save = () => {
-      state.visible = false
-      const data = {}
-      let index = -1
+      attrFormRef.value.validate((valid) => {
+        if (!valid) {
+          return
+        }
+        state.visible = false
+        const data = {}
+        let index = -1
 
-      if (state.currentAttr.id) {
-        index = attrs.value.findIndex((item) => item.id === state.currentAttr.id)
-        data.id = state.currentAttr.id
-        state.currentAttr = {}
-      } else {
-        data.id = utils.guid()
-        index = attrs.value.length
-      }
+        if (state.currentAttr.id) {
+          index = attrs.value.findIndex((item) => item.id === state.currentAttr.id)
+          data.id = state.currentAttr.id
+          state.currentAttr = {}
+        } else {
+          data.id = utils.guid()
+          index = attrs.value.length
+        }
 
-      data.text = `${state.formData.key} = '${state.formData.value}'`
-      data.data = { key: state.formData.key, value: state.formData.value }
+        data.text = `${state.formData.key} = '${state.formData.value}'`
+        data.data = { key: state.formData.key, value: state.formData.value }
 
-      attrs.value.splice(index, 1, data)
-      updateSchema()
+        attrs.value.splice(index, 1, data)
+        updateSchema()
+      })
     }
 
     const edit = (attr) => {
@@ -187,7 +208,9 @@ export default {
     }
 
     return {
+      attrFormRef,
       state,
+      rules,
       cancel,
       save,
       attrs,
@@ -248,6 +271,11 @@ export default {
     display: grid;
     grid-template-columns: 3fr auto;
 
+    .item-content {
+      word-wrap: break-word;
+      white-space: normal;
+      word-break: break-all;
+    }
     .item-controller {
       display: grid;
       column-gap: 3px;
diff --git a/packages/configurator/src/slot-configurator/SlotConfigurator.vue b/packages/configurator/src/slot-configurator/SlotConfigurator.vue
index 990fb22b49..c624f1d006 100644
--- a/packages/configurator/src/slot-configurator/SlotConfigurator.vue
+++ b/packages/configurator/src/slot-configurator/SlotConfigurator.vue
@@ -186,7 +186,7 @@ export default {
 .e__switch-core::after {
   content: '';
   position: absolute;
-  top: 1px;
+  top: 2px;
   left: 1px;
   border-radius: 100%;
   transition: all 0.3s;
diff --git a/packages/configurator/src/variable-configurator/VariableConfigurator.vue b/packages/configurator/src/variable-configurator/VariableConfigurator.vue
deleted file mode 100644
index 9946a55940..0000000000
--- a/packages/configurator/src/variable-configurator/VariableConfigurator.vue
+++ /dev/null
@@ -1,736 +0,0 @@
-<template>
-  <slot>
-    <span :class="['icon', { 'icon-bind': modelValue?.variable }]" @click="open">
-      <svg-button name="cloud-shell" placement="top" tips="变量绑定"></svg-button>
-    </span>
-  </slot>
-
-  <tiny-dialog-box
-    v-if="dialogShouldInitialize"
-    :visible="state.isVisible"
-    title="变量绑定"
-    width="48%"
-    :append-to-body="true"
-    class="meta-bind-variable-dialog-box"
-    @update:visible="state.isVisible = $event"
-    @close="cancel"
-  >
-    <div class="bind-dialog-container">
-      <div class="bind-dialog-container-header">
-        <tiny-alert
-          type="info"
-          description="你可以通过点击左侧区域变量列表绑定变量或处理函数，也可以在右边输入模式输入复杂的表达式。"
-          class="header-alert"
-          :closable="false"
-        ></tiny-alert>
-      </div>
-      <div class="bind-dialog-content">
-        <div class="content-left">
-          <span class="content-left__title">变量列表</span>
-          <div class="list-wrap">
-            <ul class="content-left__list">
-              <li
-                v-for="item in state.variableList"
-                :key="item.id"
-                :class="{ 'content-left__list-item': true, active: item.id === state.active }"
-                @click="selectItem(item)"
-              >
-                {{ item.content }}
-              </li>
-            </ul>
-            <div class="item-content">
-              <tiny-search v-model="state.value" placeholder="搜索"></tiny-search>
-              <div class="item-content-list lowcode-scrollbar-thin">
-                <ul>
-                  <li
-                    v-for="(item, key) in state.variables"
-                    v-show="key.includes(state.value)"
-                    :key="key"
-                    :class="{ 'item-selected': state.variableName === key }"
-                    @click="variableClick(key, item)"
-                  >
-                    <div class="item-text" :title="state.bindPrefix + key">{{ `${state.bindPrefix}${key}` }}</div>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="content-right">
-          <div class="content-detail-header">
-            <div class="header-name">
-              <span class="content-right__title">变量</span>
-            </div>
-          </div>
-          <div class="content-wrap">
-            <div v-if="!state.isEditorEditMode" class="top">{{ state.variable }}</div>
-            <div v-else :class="['top', { 'poll-top': isDataSource }]">
-              <monaco-editor
-                ref="editor"
-                :value="state.variable"
-                :options="editorOptions"
-                @editorDidMount="editorDidMount"
-              ></monaco-editor>
-              <div v-if="isDataSource" class="datasource-poll-wrap">
-                <tiny-tooltip
-                  placement="top"
-                  content="定时更新开启后，页面运行时将会定期请求远程数据源，实现数据定时更新。"
-                  effect="light"
-                  ><span>定时更新：</span></tiny-tooltip
-                >
-                <tiny-switch v-model="state.isPoll"></tiny-switch>
-                <div v-if="state.isPoll" class="datasource-poll-interval">
-                  <span>更新时间：</span>
-                  <tiny-input type="number" v-model="state.pollInterval"></tiny-input>
-                  <span>ms</span>
-                </div>
-              </div>
-            </div>
-            <div class="bottom lowcode-scrollbar-thin">
-              <span class="bottom-title">用法</span>
-              <div class="bottom-demo">
-                <p>
-                  你可以通过点击左侧区域绑定变量或处理函数，或者点击右边的铅笔按钮切换到输入模式，输入复杂的表达式。
-                </p>
-                <p>输入框内默认支持变量，写法和 JS 写法完全一致。</p>
-                <div>页面状态: this.state.xxx</div>
-                <div>字符串: "string"</div>
-                <div>数字: 123</div>
-                <div>布尔值: true / false</div>
-                <div>对象: { name: "张三" }</div>
-                <div>数组: ["1", "2"]</div>
-                <div>空值: null</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <template #footer>
-      <div class="bind-dialog-footer">
-        <tiny-button type="danger" plain @click="remove">移除绑定</tiny-button>
-        <div class="right">
-          <tiny-button @click="cancel">取 消</tiny-button>
-          <tiny-button type="info" @click="confirm">确 定</tiny-button>
-        </div>
-      </div>
-    </template>
-  </tiny-dialog-box>
-</template>
-
-<script lang="ts">
-import { VueMonaco as MonacoEditor, SvgButton } from '@opentiny/tiny-engine-common'
-import {
-  useCanvas,
-  useProperties,
-  useResource,
-  getMetaApi,
-  META_APP,
-  META_SERVICE
-} from '@opentiny/tiny-engine-meta-register'
-import { getCommentByKey } from '@opentiny/tiny-engine-common/js/comment'
-import { generate, parse, traverse } from '@opentiny/tiny-engine-common/js/ast'
-import { DEFAULT_LOOP_NAME } from '@opentiny/tiny-engine-common/js/constants'
-import { constants } from '@opentiny/tiny-engine-utils'
-import { Alert, Button, DialogBox, Input, Search, Switch, Tooltip } from '@opentiny/vue'
-import { camelize, capitalize } from '@vue/shared'
-import { computed, nextTick, reactive, ref, watch } from 'vue'
-import type { Component } from 'vue'
-
-const { EXPRESSION_TYPE } = constants
-
-const CONSTANTS = {
-  THIS: 'this.',
-  STATE: 'this.state.',
-  STORE: 'this.stores.',
-  PROPS: 'this.props.',
-  COLLECTION: 'Collection',
-  ITEM: 'item',
-  DATASOUCE: 'datasource',
-  DATASOUCEPREFIX: '数据源： ',
-  DATASOURCEMAP: 'this.dataSourceMap.',
-  INTERVALID: 'intervalId'
-}
-
-const getJsSlot = () => {
-  const { getCurrent } = useCanvas().canvasApi.value || {}
-
-  if (!getCurrent) {
-    return [false, {}]
-  }
-
-  const { getNodeWithParentById } = useCanvas()
-
-  const jsSlot = getNodeWithParentById(getCurrent()?.parent?.id, true)?.parent
-
-  return [jsSlot?.type === 'JSSlot', jsSlot]
-}
-
-const getJsSlotParams = () => {
-  const [isJsSlot, jsSlot] = getJsSlot()
-  return isJsSlot ? jsSlot?.params || [] : []
-}
-
-export default {
-  name: 'VariableConfigurator',
-  components: {
-    MonacoEditor,
-    TinyDialogBox: DialogBox,
-    TinyButton: Button as Component,
-    TinySearch: Search,
-    TinySwitch: Switch,
-    TinyInput: Input,
-    TinyTooltip: Tooltip as Component,
-    SvgButton,
-    TinyAlert: Alert
-  },
-  inheritAttrs: false,
-  props: {
-    name: {
-      type: String,
-      default: ''
-    },
-    modelValue: {
-      type: [String, Number, Boolean, Array, Object, Date],
-      default: ''
-    },
-    lazyLoad: {
-      type: Boolean,
-      default: true
-    }
-  },
-  setup(props, { emit }) {
-    const editor = ref(null)
-    let oldValue = ''
-
-    const list = [
-      { id: 'state', content: 'State 属性' },
-      { id: 'store', content: '应用状态' },
-      { id: 'function', content: '自定义处理函数' },
-      { id: 'utils', content: '工具类' },
-      { id: 'bridge', content: '桥接源' },
-      { id: 'datasource', content: '数据源' }
-    ]
-
-    const state = reactive({
-      isBlock: computed(() => useCanvas().isBlock()),
-      variables: {},
-      // 控制变量列表显示/隐藏
-      isVisible: false,
-      // 搜索框value
-      value: '',
-      active: 'state',
-      // 某一类型下的变量列表
-      variableList: computed(() => {
-        const extendedVars = []
-        const [isInJsSlot] = getJsSlot()
-
-        if (state.isBlock) {
-          extendedVars.push({ id: 'props', content: 'props' })
-        }
-
-        if (state.loopData) {
-          extendedVars.push({ id: 'loop', content: '循环变量' })
-        }
-
-        if (isInJsSlot) {
-          extendedVars.push({ id: 'slotScope', content: '暴露给插槽使用的变量' })
-        }
-
-        return [...list, ...extendedVars]
-      }),
-      // 绑定的变量名/变量表达式
-      variable: '',
-      // 绑定的变量指向的值内容
-      variableContent: null,
-      // 引用的state变量名
-      variableName: '',
-      // 编辑器状态：只读状态(false)、编辑状态(true)
-      isEditorEditMode: true,
-      dataSouce: null,
-      // 静态值
-      mock: props.modelValue?.value || props.modelValue,
-      bindPrefix: '',
-      loopData: null,
-      loopArgs: '',
-      isPoll: false,
-      pollInterval: 5000
-    })
-
-    const isDataSource = computed(() => state.active === CONSTANTS.DATASOUCE)
-
-    // 每次弹窗打开时都记录下绑定变量的旧值，用来判断保存按钮状态
-    watch(
-      () => state.isVisible,
-      (value) => {
-        if (value) {
-          oldValue = state.variable
-          state.loopData = useProperties().getSchema()?.loop
-        }
-      }
-    )
-
-    const bindKey = computed(() => props.modelValue?.value?.replace?.('this.state.', '') || '')
-
-    const editorOptions = {
-      language: 'javascript',
-      lineNumbers: false,
-      minimap: {
-        enabled: false
-      },
-      tabSize: 2,
-      insertSpaces: true,
-      formatOnPaste: true,
-      formatOnType: true,
-      autoIndent: 'full',
-      newLineCharacter: '\n',
-      convertTabsToSpaces: true,
-      trimAutoWhitespace: true,
-      wordWrap: 'on',
-      wordWrapColumn: 120,
-      wordWrapMinChars: 10,
-      wordWrapStrategy: 'advanced'
-    }
-
-    const editorDidMount = () => {
-      if (!editor.value) {
-        return
-      }
-
-      // 支持对象类型数据或表达式，不显示语法校验报错
-      const diagnosticsOptions = editor.value
-        .getMonaco()
-        .languages.typescript.javascriptDefaults.getDiagnosticsOptions()
-      editor.value.getMonaco().languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-        ...diagnosticsOptions,
-        noSyntaxValidation: true,
-        noSemanticValidation: true
-      })
-    }
-
-    const removeInterval = (start, end, intervalId, pageSchema) => {
-      const unmountedFn = pageSchema.lifeCycles?.onUnmounted?.value
-      const fetchBody = `
-      /** ${start} */
-      clearInterval(state.${intervalId});
-      /** ${end} */`
-
-      if (!unmountedFn) {
-        pageSchema.lifeCycles = pageSchema.lifeCycles || {}
-        pageSchema.lifeCycles.onUnmounted = {
-          type: 'JSFunction',
-          value: `function onUnmounted() {${fetchBody}}`
-        }
-      } else {
-        if (!unmountedFn.includes(`${intervalId}`)) {
-          pageSchema.lifeCycles.onUnmounted.value = unmountedFn.trim().replace(/\}$/, fetchBody + '}')
-        }
-      }
-    }
-
-    const genRemoteMethodToLifeSetup = (variableName, sourceRef, pageSchema) => {
-      if (sourceRef?.data?.data) {
-        const setupFn = pageSchema.lifeCycles?.setup?.value
-        const { start, end } = getCommentByKey(variableName)
-        const intervalId = `${CONSTANTS.INTERVALID}${capitalize(camelize(sourceRef.name))}`
-        const isPoll = state.isPoll && state.pollInterval !== undefined
-
-        let fetchBodyFn = `${CONSTANTS.DATASOURCEMAP}${sourceRef.name}.load().then(res => {
-          state.${variableName} = res?.data?.items || res?.data || res
-        })`
-
-        if (isPoll) {
-          fetchBodyFn = `state.${intervalId} = setInterval(() => {${CONSTANTS.DATASOURCEMAP}${sourceRef.name}.load().then(res => {
-            state.${variableName} = res?.data?.items || res?.data || res
-          })}, ${state.pollInterval})`
-        }
-
-        const fetchBody = `
-        /** ${start} */
-        ${fetchBodyFn};
-        /** ${end} */`
-
-        if (!setupFn) {
-          pageSchema.lifeCycles = pageSchema.lifeCycles || {}
-          pageSchema.lifeCycles.setup = {
-            type: 'JSFunction',
-            value: `function setup({ props, state, watch, onMounted }) {${fetchBody}}`
-          }
-        } else {
-          if (!setupFn.includes(`${CONSTANTS.DATASOURCEMAP}${sourceRef.name}`)) {
-            pageSchema.lifeCycles.setup.value = setupFn.trim().replace(/\}$/, fetchBody + '}')
-          } else {
-            const ast = parse(setupFn)
-            traverse(ast, {
-              ExpressionStatement(path) {
-                if (path.toString().includes(sourceRef.name)) {
-                  path.replaceWithSourceString(fetchBodyFn)
-                  path.stop()
-                }
-              }
-            })
-
-            pageSchema.lifeCycles.setup.value = generate(ast).code
-          }
-        }
-
-        if (isPoll) {
-          removeInterval(start, end, intervalId, pageSchema)
-        }
-      }
-    }
-
-    const variableClick = (key, item) => {
-      if (state.bindPrefix === CONSTANTS.DATASOUCEPREFIX) {
-        // 当选中数据源时，直接生成对应state变量并绑定数据源的静态数据
-        const stateName = `${CONSTANTS.DATASOUCE}${capitalize(camelize(key))}`
-        const staticData = item?.data?.data || []
-
-        // 处理数据数据回显
-        state.dataSouce = item
-        state.variable = `${CONSTANTS.STATE}${stateName}`
-        editor.value.getEditor().setValue(state.variable)
-        state.variableName = key
-        state.variableContent = staticData
-      } else {
-        state.variable = !state.bindPrefix ? `${state.loopArgs}${key}` : `${state.bindPrefix}${key}`
-        editor.value.getEditor().setValue(state.variable)
-        state.variableName = key
-        state.variableContent = state.variables[key]
-      }
-    }
-
-    const cancel = () => {
-      state.variable = ''
-      state.isVisible = false
-    }
-
-    const remove = () => {
-      emit('update:modelValue', '')
-      cancel()
-    }
-
-    const confirm = async () => {
-      const editorInstance = editor.value?.getEditor()
-      await editorInstance.getAction('editor.action.formatDocument').run()
-
-      const variableContent = state.isEditorEditMode ? editorInstance.getValue() : state.variable
-
-      const { setSaved, getSchema, updateSchema } = useCanvas()
-      // 如果新旧值不一样就显示未保存状态
-      if (oldValue !== variableContent) {
-        setSaved(false)
-      }
-
-      const pattern = /^[\s]*{[\s]*api[\s]*:[\s\w.]*}$/
-      const needFetchDataFormat = props.name === 'fetchData' && !pattern.test(variableContent)
-
-      if (variableContent) {
-        if (state.bindPrefix === CONSTANTS.DATASOUCEPREFIX) {
-          const pageSchema = getSchema()
-          const stateName = state.variable.replace(`${CONSTANTS.STATE}`, '')
-          const staticData = state.variableContent.map(({ _id, ...other }) => other)
-          updateSchema({ state: { ...pageSchema.state, [stateName]: staticData } })
-          // 这里在setup生命周期函数内部处理用户真实环境中的数据源请求
-          genRemoteMethodToLifeSetup(stateName, state.dataSouce, pageSchema)
-        }
-
-        emit('update:modelValue', {
-          type: 'JSExpression',
-          value: needFetchDataFormat ? `{api:${variableContent}}` : variableContent
-        })
-      } else {
-        emit('update:modelValue', '')
-      }
-
-      cancel()
-    }
-
-    const getInitVariable = () => {
-      if (
-        props.modelValue?.value &&
-        props.modelValue?.type === EXPRESSION_TYPE.JS_EXPRESSION &&
-        Object.keys(props.modelValue || {}).length === 2
-      ) {
-        return String(props.modelValue?.value)
-      }
-
-      return ''
-    }
-
-    const dialogShouldInitialize = ref(!props.lazyLoad)
-    const open = () => {
-      dialogShouldInitialize.value = true
-      state.isVisible = true
-      state.variableName = bindKey.value
-      state.variable = getInitVariable()
-      state.variables = useCanvas().getSchema()?.state || {}
-      state.bindPrefix = CONSTANTS.STATE
-      state.variableContent = state.variables[bindKey.value]
-      nextTick(() => window.dispatchEvent(new Event('resize')))
-    }
-
-    const selectItem = (item) => {
-      state.active = item.id
-      const { getSchema } = useCanvas()
-
-      if (item.id === 'function') {
-        state.bindPrefix = CONSTANTS.THIS
-        const { getMethods } = getMetaApi(META_APP.Page)
-        state.variables = { ...getMethods?.() }
-      } else if (item.id === 'bridge' || item.id === 'utils') {
-        state.bindPrefix = `${CONSTANTS.THIS}${item.id}.`
-        const bridge = {}
-        useResource().appSchemaState[item.id]?.forEach((res) => {
-          bridge[res.name] = `${item.id}.${res.content.exportName}`
-        })
-
-        state.variables = bridge
-      } else if (item.id === 'props') {
-        state.bindPrefix = CONSTANTS.PROPS
-        const properties = getSchema()?.schema?.properties
-        const bindProperties = {}
-        properties?.forEach(({ content }) => {
-          content.forEach(({ property }) => {
-            bindProperties[property] = property
-          })
-        })
-        state.variables = bindProperties
-      } else if (item.id === 'datasource') {
-        state.bindPrefix = CONSTANTS.DATASOUCEPREFIX
-        const url = new URLSearchParams(location.search)
-        const appId = getMetaApi(META_SERVICE.GlobalService).getBaseInfo().id
-        const selectedId = appId || url.get('id')
-
-        // 实时请求数据源列表数据，保证数据源获取最新的数据源数据
-        getMetaApi(META_SERVICE.Http)
-          .get(`/app-center/api/sources/list/${selectedId}`)
-          .then((data) => {
-            const sourceData = {}
-            data.forEach((res) => {
-              sourceData[res.name] = res
-            })
-            state.variables = sourceData
-          })
-      } else if (item.id === 'store') {
-        state.bindPrefix = CONSTANTS.STORE
-        state.variables = {}
-
-        const stores = useResource().appSchemaState.globalState
-        stores.forEach(({ id, state: storeState = {}, getters = {} }) => {
-          const loadProp = (prop) => {
-            const propBinding = `${id}.${prop}`
-            state.variables[propBinding] = propBinding
-          }
-
-          Object.keys(storeState).forEach(loadProp)
-          Object.keys(getters).forEach(loadProp)
-        })
-      } else if (item.id === 'loop') {
-        state.bindPrefix = ''
-        const [loopItem = DEFAULT_LOOP_NAME.ITEM, loopIndex = DEFAULT_LOOP_NAME.INDEX] =
-          useProperties().getSchema()?.loopArgs || []
-        state.variables = [loopItem, loopIndex].reduce((variables, param) => ({ ...variables, [param]: param }), {})
-      } else if (item.id === 'slotScope') {
-        state.bindPrefix = ''
-        const params = getJsSlotParams()
-        state.variables = params.reduce((variables, param) => ({ ...variables, [param]: param }), {})
-      } else {
-        state.bindPrefix = CONSTANTS.STATE
-        state.variables = getSchema()?.[item.id]
-      }
-    }
-
-    return {
-      editorDidMount,
-      editorOptions,
-      variableClick,
-      remove,
-      cancel,
-      confirm,
-      dialogShouldInitialize,
-      open,
-      selectItem,
-      state,
-      editor,
-      isDataSource
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.icon {
-  margin-left: 8px;
-}
-
-.meta-bind-variable-dialog-box {
-  .header-alert {
-    margin-top: 0;
-    margin-bottom: 12px;
-  }
-
-  .bind-dialog-content {
-    display: flex;
-    align-items: center;
-
-    .content-left {
-      margin-right: 12px;
-      width: 38%;
-
-      .content-left__title {
-        color: var(--te-configurator-common-text-color-primary);
-      }
-
-      .list-wrap {
-        border: 1px solid var(--te-configurator-common-border-color-divider);
-        border-radius: 4px;
-        height: 300px;
-        margin-top: 8px;
-        display: flex;
-      }
-
-      .content-left__list {
-        width: 120px;
-        color: var(--te-configurator-common-text-color-secondary);
-        border-right: 1px solid var(--te-configurator-common-border-color-divider);
-      }
-
-      .content-left__list-item {
-        padding: 8px 12px;
-        cursor: pointer;
-        transition: background 0.3s;
-        &.active,
-        &:hover {
-          background: var(--te-configurator-common-bg-color-hover);
-          color: var(--te-configurator-common-text-color-primary);
-        }
-      }
-
-      .item-selected {
-        background-color: var(--te-configurator-common-bg-color-active);
-      }
-
-      .item-text {
-        padding: 8px 12px;
-        cursor: pointer;
-        color: var(--te-configurator-common-text-color-secondary);
-
-        &:hover {
-          background-color: var(--te-configurator-common-bg-color-hover);
-          color: var(--te-configurator-common-text-color-primary);
-        }
-      }
-
-      .content-left__title {
-        font-weight: 600;
-      }
-
-      .item-content {
-        padding: 12px;
-        width: calc(100% - 140px);
-
-        .item-content-list {
-          height: calc(100% - 42px);
-          overflow-y: auto;
-        }
-      }
-    }
-
-    .content-right {
-      flex: 1 1 0;
-      width: 60%;
-      .content-detail-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .header-name {
-          display: flex;
-          align-items: center;
-        }
-      }
-
-      .content-right__title {
-        color: var(--te-configurator-common-text-color-primary);
-        font-weight: 600;
-        margin-right: 5px;
-      }
-
-      .state-preview {
-        margin-top: 5px;
-      }
-
-      .content-wrap {
-        height: 300px;
-        margin-top: 8px;
-        box-sizing: border-box;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-
-        .top {
-          width: 100%;
-          height: 54%;
-          border-radius: 4px;
-          padding: 12px 8px;
-          color: var(--te-configurator-common-text-color-primary);
-          border: 1px solid var(--te-configurator-common-border-color-divider);
-          box-sizing: border-box;
-          & > div {
-            height: 100%;
-            width: 100%;
-          }
-          .datasource-poll-wrap {
-            display: flex;
-            align-items: center;
-            height: 24px;
-            margin-top: 12px;
-            .datasource-poll-interval {
-              margin-left: 16px;
-              .tiny-input {
-                width: 120px;
-                height: 20px;
-                margin: 0 8px;
-              }
-            }
-          }
-        }
-
-        .poll-top {
-          & > div {
-            height: calc(100% - 36px);
-            width: 100%;
-          }
-        }
-
-        .bottom {
-          width: 100%;
-          height: 40%;
-          padding: 8px 12px;
-          border-radius: 4px;
-          box-sizing: border-box;
-          overflow: auto;
-          color: var(--te-configurator-common-text-color-secondary);
-          border: 1px solid var(--te-configurator-common-border-color-divider);
-          pre {
-            font-family: consolas;
-          }
-          .bottom-title {
-            font-weight: var(--te-base-font-weight-6);
-            color: var(--te-configurator-common-text-color-primary);
-          }
-        }
-      }
-    }
-  }
-
-  .bind-dialog-footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-}
-</style>
diff --git a/packages/design-core/src/preview/src/preview/usePreviewData.ts b/packages/design-core/src/preview/src/preview/usePreviewData.ts
index 26fe71045b..1e56ac6615 100644
--- a/packages/design-core/src/preview/src/preview/usePreviewData.ts
+++ b/packages/design-core/src/preview/src/preview/usePreviewData.ts
@@ -415,7 +415,7 @@ export const usePreviewData = ({ setFiles, store, setImportMap }: IUsePreviewDat
     } else if (previewType === 'app') {
       const appId = searchParams.get('id')
       const { getAllNestedBlocksSchema, generateAppCode } = getMetaApi('engine.service.generateCode')
-      const importMap = await getImportMap(JSON.parse(searchParams.get('scripts') || '{}'))
+      const { importMapData: importMap } = await getBasicData(basicFiles, params.scripts)
 
       let appSchema
 
@@ -614,11 +614,7 @@ export const usePreviewData = ({ setFiles, store, setImportMap }: IUsePreviewDat
       srcFiles['import-map.json'] = JSON.stringify(importMap)
       const newFiles = store.getFiles()
       const enableTailwindCSS = getMergeMeta('engine.config')?.enableTailwindCSS
-      const appJsCode = processAppJsCode(
-        newFiles['app.js'],
-        JSON.parse(searchParams.get('styles') || '[]'),
-        enableTailwindCSS
-      )
+      const appJsCode = processAppJsCode(newFiles['app.js'] || '', params.styles, enableTailwindCSS)
       srcFiles['app.js'] = appJsCode
       srcFiles['main.js'] = `import app from './app.js' \n ${srcFiles['src/main.js']}`
       srcFiles['main.js'] = srcFiles['main.js'].replace("import 'element-plus/dist/index.css'", '')
diff --git a/packages/plugins/materials/src/composable/useResource.ts b/packages/plugins/materials/src/composable/useResource.ts
index 5a133d4bf3..d8a57ebb45 100644
--- a/packages/plugins/materials/src/composable/useResource.ts
+++ b/packages/plugins/materials/src/composable/useResource.ts
@@ -119,6 +119,7 @@ const initBlock = async (blockId: string) => {
 const initPageOrBlock = async () => {
   const { pageId, blockId } = getMetaApi(META_SERVICE.GlobalService).getBaseInfo()
   const pagePluginApi = getMetaApi(META_APP.AppManage)
+  const globalState = getMetaApi(META_SERVICE.GlobalService).getState()
 
   if (pageId) {
     const data = await pagePluginApi.getPageById(pageId)
@@ -132,15 +133,38 @@ const initPageOrBlock = async () => {
     return
   }
 
-  // url 没有 pageid 或 blockid，到页面首页或第一页
-  const pageInfo = appSchemaState.pageTree.find((page) => page?.meta?.isHome) ||
-    appSchemaState.pageTree.find(
+  // url 没有 pageid 或 blockid，页面打开顺序：可访问主页 -> 可访问的第一个页面 -> 不可访问首页 -> 不可访问全页面顺位第一页
+  const getPageInfo = () => {
+    // 页面是否被他人锁定 (被锁定 且 非当前用户锁定)
+    const isPageOccupierdByOthers = (page) => {
+      return page.meta?.occupier && page.meta.occupier.id !== globalState.userInfo.id
+    }
+    // 首页
+    const homePage = appSchemaState.pageTree.find((page) => page?.meta?.isHome)
+    // 顺位首个页面
+    const firstPage = appSchemaState.pageTree.find(
       (page) => page.componentName === COMPONENT_NAME.Page && page?.meta?.group !== 'publicPages'
-    ) || {
+    )
+    // 顺位首个可访问页面(当前用户锁定 或 未锁定)
+    const firstUnoccupiedPage = appSchemaState.pageTree.find(
+      (page) =>
+        page.componentName === COMPONENT_NAME.Page &&
+        page?.meta?.group !== 'publicPages' &&
+        !isPageOccupierdByOthers(page)
+    )
+    // 空页面
+    const emptyPage = {
       page_content: {
         componentName: COMPONENT_NAME.Page
       }
     }
+    // 可访问主页 (当前用户锁定 或 未锁定)
+    if (homePage && !isPageOccupierdByOthers(homePage)) {
+      return homePage
+    }
+    return firstUnoccupiedPage || homePage || firstPage || emptyPage
+  }
+  const pageInfo = getPageInfo()
 
   if (pageInfo.meta?.id) {
     // 这里重新请求一遍页面详情数据，是因为 appSchemaState 的页面信息存在字段转换，比如 route 被转换成了 router 字段，导致调用页面保存接口的时候报错
diff --git a/packages/plugins/tree/src/Main.vue b/packages/plugins/tree/src/Main.vue
index 2ade5736a7..4397f406c9 100644
--- a/packages/plugins/tree/src/Main.vue
+++ b/packages/plugins/tree/src/Main.vue
@@ -27,7 +27,10 @@
               row.label
             }}</span>
             <template v-if="row.id !== 'body'">
-              <svg-icon :name="eyeOpen(row.id) ? 'eye' : 'eye-invisible'" @mouseup="showNode(row.rawData)"></svg-icon>
+              <svg-icon
+                :name="eyeOpen(row.id) ? 'eye' : 'eye-invisible'"
+                @click="showNode($event, row.rawData)"
+              ></svg-icon>
               <svg-icon name="delete" @mouseup="delNode(row.rawData)"></svg-icon>
             </template>
           </div>
@@ -96,7 +99,6 @@ export default {
       const translateChild = (data) => {
         data.forEach((item) => {
           item.show = pageState.nodesStatus[item.id] !== false
-          item.showEye = !item.show
           const child = item.children
           if (Array.isArray(child)) {
             translateChild(item.children)
@@ -150,14 +152,17 @@ export default {
       return pageState.nodesStatus[id] !== false
     }
 
-    const showNode = (data) => {
-      data.show = !data.show
-      pageState.nodesStatus[data.id] = data.show
-
+    const showNode = (event, data) => {
+      pageState.nodesStatus[data.id] = !(pageState.nodesStatus[data.id] !== false)
+      data.show = pageState.nodesStatus[data.id]
       const { getRenderer, clearSelect } = useCanvas().canvasApi.value
 
       getRenderer().setCondition(data.id, data.show)
-      clearSelect()
+
+      if (!data.show) {
+        event?.stopPropagation()
+        clearSelect()
+      }
     }
 
     const delNode = (data) => {
diff --git a/packages/toolbars/preview/src/Main.vue b/packages/toolbars/preview/src/Main.vue
index 1e143c62c8..63d3d15a22 100644
--- a/packages/toolbars/preview/src/Main.vue
+++ b/packages/toolbars/preview/src/Main.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="toolbar-save toolbar-helpGuid">
-    <toolbar-base content="预览页面" :icon="options.icon?.default || options?.icon" :options="options" trigger="click">
+    <toolbar-base content="预览页面" :icon="options.icon?.default || options?.icon" :options="options" trigger="hover">
       <template #button>
         <div class="toolbar-preview-item">
           <span @click="preview('page')">页面预览</span>

From d8ac38166bff3296f1b58ea6ed79330510bde481 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Wed, 15 Oct 2025 23:58:18 -0700
Subject: [PATCH 2/2] =?UTF-8?q?fix(app-preview-importmap):=20=E6=8F=90?=
 =?UTF-8?q?=E5=8F=96=E8=8E=B7=E5=8F=96=E5=9F=BA=E6=9C=AC=E4=BF=A1=E6=81=AF?=
 =?UTF-8?q?=E7=9A=84=E8=B0=83=E7=94=A8=E5=88=B0if=E5=A4=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../design-core/src/preview/src/preview/usePreviewData.ts   | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/design-core/src/preview/src/preview/usePreviewData.ts b/packages/design-core/src/preview/src/preview/usePreviewData.ts
index 1e56ac6615..518b6acc7b 100644
--- a/packages/design-core/src/preview/src/preview/usePreviewData.ts
+++ b/packages/design-core/src/preview/src/preview/usePreviewData.ts
@@ -360,10 +360,9 @@ export const usePreviewData = ({ setFiles, store, setImportMap }: IUsePreviewDat
   }) => {
     const searchParams = new URLSearchParams(location.search)
     const previewType = searchParams.get('previewType')
+    const { appData, metaData, importMapData } = await getBasicData(basicFiles, params.scripts)
 
     if (previewType === 'page') {
-      const { appData, metaData, importMapData } = await getBasicData(basicFiles, params.scripts)
-
       previewState.currentPage = params.currentPage
       previewState.ancestors = params.ancestors
 
@@ -415,7 +414,6 @@ export const usePreviewData = ({ setFiles, store, setImportMap }: IUsePreviewDat
     } else if (previewType === 'app') {
       const appId = searchParams.get('id')
       const { getAllNestedBlocksSchema, generateAppCode } = getMetaApi('engine.service.generateCode')
-      const { importMapData: importMap } = await getBasicData(basicFiles, params.scripts)
 
       let appSchema
 
@@ -611,7 +609,7 @@ export const usePreviewData = ({ setFiles, store, setImportMap }: IUsePreviewDat
         prev[fileName] = formatCode(item.fileContent, fileName)
         return prev
       }, {})
-      srcFiles['import-map.json'] = JSON.stringify(importMap)
+      srcFiles['import-map.json'] = JSON.stringify(importMapData)
       const newFiles = store.getFiles()
       const enableTailwindCSS = getMergeMeta('engine.config')?.enableTailwindCSS
       const appJsCode = processAppJsCode(newFiles['app.js'] || '', params.styles, enableTailwindCSS)