fix style

packages/react-simulator-renderer/src/renderer.less

@@ -8,3 +8,73 @@ body, html {
   min-height: 100%;
   background: white;
 }
+
+html.engine-cursor-move, html.engine-cursor-move * {
+  cursor: grabbing !important
+}
+
+html.engine-cursor-copy, html.engine-cursor-copy * {
+  cursor: copy !important
+}
+
+html.engine-cursor-ew-resize, html.engine-cursor-ew-resize * {
+  cursor: ew-resize !important
+}
+
+body, #engine {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  text-rendering: optimizeLegibility;
+  -webkit-user-select: none;
+  -webkit-user-drag: none;
+  -webkit-text-size-adjust: none;
+  -webkit-touch-callout: none;
+  -webkit-font-smoothing: antialiased;
+}
+
+html {
+  min-width: 1024px;
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
+}
+
+html.engine-blur #engine {
+  -webkit-filter: blur(4px);
+}
+
+.engine-empty {
+  background: #f2f3f5;
+  color: #a7b1bd;
+  outline: 1px dashed rgba(31, 56, 88, 0.2);
+  outline-offset: -1px !important;
+  height: 66px;
+  max-height: 100%;
+  min-width: 140px;
+  text-align: center;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+.engine-empty:before {
+  content: '\62D6\62FD\7EC4\4EF6\6216\6A21\677F\5230\8FD9\91CC';
+  font-size: 14px;
+  z-index: 1;
+  width: 100%;
+  white-space: nowrap;
+}

packages/vision-polyfill/src/demo/index.ts

@@ -6,6 +6,7 @@ import getTrunkPane from '@ali/ve-trunk-pane';
 import EventBindDialog from '@ali/lowcode-plugin-event-bind-dialog';
 import loadUrls from './loader';
 import { upgradeAssetsBundle } from './upgrade-assets';
+import { isCSSUrl } from '@ali/lowcode-globals';
 
 const { editor, skeleton } = Engine;
 
@@ -36,7 +37,6 @@ skeleton.add({
   },
 });
 
-
 skeleton.add({
   area: 'topArea',
   type: 'Dock',
@@ -124,9 +124,25 @@ async function loadAssets() {
 
   if (assets['x-prototypes']) {
     const tasks: Array<Promise<any>> = [];
+    const prototypeStyles: string[] = [];
     assets['x-prototypes'].forEach((pkg: any) => {
-      tasks.push(loadUrls(pkg?.urls));
+      if (pkg?.urls) {
+        const urls = Array.isArray(pkg.urls) ? pkg.urls : [pkg.urls];
+        urls.forEach((url: string) => {
+          if (isCSSUrl(url)) {
+            prototypeStyles.push(url);
+          }
+        });
+        tasks.push(loadUrls(urls));
+      }
     });
+    if (prototypeStyles.length > 0) {
+      assets.packages.push({
+        library: '_prototypesStyle',
+        package: '_prototypes-style',
+        urls: prototypeStyles
+      });
+    }
     await Promise.all(tasks);
 
     // proccess snippets

packages/vision-polyfill/src/vision.less

@@ -45,3 +45,25 @@ html {
 html.engine-blur #engine {
   -webkit-filter: blur(4px);
 }
+
+.engine-empty {
+  background: #f2f3f5;
+  color: #a7b1bd;
+  outline: 1px dashed rgba(31, 56, 88, 0.2);
+  outline-offset: -1px !important;
+  height: 66px;
+  max-height: 100%;
+  min-width: 140px;
+  text-align: center;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+.engine-empty:before {
+  content: '\62D6\62FD\7EC4\4EF6\6216\6A21\677F\5230\8FD9\91CC';
+  font-size: 14px;
+  z-index: 1;
+  width: 100%;
+  white-space: nowrap;
+}