Merge branch 'fix/configuration-component' into 'main_dev'

perf: 优化未绑定页面时显示空数据

See merge request yunteng/thingskit-view!146

@@ -9,7 +9,11 @@
         </path>
       </svg>
     </div>
-    <iframe id="iframeContent" :src="iframeLink" :width="w" :height="h" style="border-width: 0"></iframe>
+    <iframe v-if="iframeLink" id="iframeContent" :src="iframeLink" :width="w" :height="h"
+      style="border-width: 0"></iframe>
+    <n-empty v-else class="empty" size="huge" description="暂未绑定页面">
+
+    </n-empty>
   </div>
 </template>
 
@@ -57,8 +61,8 @@ watch(
   () => props.chartConfig.option.dataset,
   (newData: string) => {
     const { dataset, publicId, organizationId, platform, isShare } = props.chartConfig.option as typeof typeOption
-    
-    if(!dataset) return
+
+    if (!dataset) return
     iframeLink.value = createScadaPageLink({ id: dataset, platform, publicId, organizationId, }, isShare ? ScadaModeEnum.SHARE : ScadaModeEnum.LIGHTBOX, false)
   },
   {
@@ -95,4 +99,33 @@ const handleMouseleave = () => (isShowSvg.value = false)
     right: 0.1vw;
   }
 }
+
+.empty {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  --size: 120px;
+
+  @include deep() {
+    .n-empty__icon {
+      width: var(--size);
+      height: var(--size);
+
+      .n-base-icon {
+        width: var(--size);
+        height: var(--size);
+
+        svg {
+          width: var(--size);
+          height: var(--size);
+        }
+      }
+    }
+  }
+
+
+}
 </style>