feat(components): 初步添加“环境区域编辑器”组件

src/views/env-monitor/AreaEditor.vue

@@ -1,3 +1,53 @@
+<script setup lang="ts">
+import { useViewVisible } from '@/hooks/view-visible';
+
+const { visible, showView, hideView } = useViewVisible();
+
+defineExpose({
+  showView,
+  hideView,
+});
+</script>
+
 <template>
-  <div>区域编辑器</div>
+  <AModal
+    v-model:open="visible"
+    wrap-class-name="env-area-editor-modal"
+    width="100%"
+    centered
+    :closable="false"
+    :mask-closable="false"
+    :footer="null"
+  >
+    <iframe src="http://localhost:88/"></iframe>
+  </AModal>
 </template>
+
+<style lang="scss">
+.env-area-editor-modal {
+  padding: 32px;
+
+  .ant-modal,
+  .ant-modal > div,
+  .ant-modal-content {
+    height: 100%;
+  }
+
+  .ant-modal-content {
+    padding: 0;
+  }
+
+  .ant-modal-body,
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+
+  iframe {
+    overflow: hidden;
+    background: transparent;
+    border: none;
+    border-radius: 8px;
+  }
+}
+</style>