fix(app-preview-importMap): Fix ImportMap Issues, Optimize Popover Trigger, and Improve Variable Binding in Preview (opentiny#1676)

1、修复内置importMap导致没有element-plus组件库的问题，采用和页面预览相同的动态获取依赖集合的方法
2、优化点击预览图标时trigger为click点击后不会自动关闭的问题，改为使用hover方式打开poper
3、解决打开绑定变量弹窗，绑定的变量不会回显的问题，由于object,keys(modelvalue).length === 2，如果是双向绑定这个条件不成立，因此不能回显，修改为<=3

Author: betterdancing

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"

packages/configurator/src/variable-configurator/VariableConfigurator.vue

@@ -460,7 +460,7 @@ export default {
       if (
         props.modelValue?.value &&
         props.modelValue?.type === EXPRESSION_TYPE.JS_EXPRESSION &&
-        Object.keys(props.modelValue || {}).length === 2
+        Object.keys(props.modelValue || {}).length <= 3
       ) {
         return String(props.modelValue?.value)
       }

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 importMap = await getImportMap(JSON.parse(searchParams.get('scripts') || '{}'))
 
       let appSchema
 
@@ -611,14 +609,10 @@ 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'],
-        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'", '')

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>