web iframe结构实现

urbanLifelineWeb/packages/shared/src/components/iframe/IframeView.vue

@@ -0,0 +1,90 @@
+<template>
+    <div class="iframe-view">
+        <iframe
+            v-if="iframeUrl"
+            :src="iframeUrl"
+            class="iframe-content"
+            frameborder="0"
+            @load="handleLoad"
+        />
+        <div v-else class="iframe-error">
+            <el-icon class="error-icon"><WarningFilled /></el-icon>
+            <p>无效的 iframe 地址</p>
+        </div>
+        <div v-if="loading" class="iframe-loading">
+            <el-icon class="is-loading"><Loading /></el-icon>
+            <span>加载中...</span>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { Loading, WarningFilled } from '@element-plus/icons-vue'
+
+const route = useRoute()
+const loading = ref(true)
+
+// 从路由 meta 中获取 iframe URL
+const iframeUrl = computed(() => {
+    return route.meta.iframeUrl as string || ''
+})
+
+function handleLoad() {
+    loading.value = false
+}
+
+onMounted(() => {
+    console.log('[IframeView] 加载 iframe:', iframeUrl.value)
+})
+</script>
+
+<style lang="scss" scoped>
+.iframe-view {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.iframe-content {
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+
+.iframe-error {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--el-text-color-secondary);
+    
+    .error-icon {
+        font-size: 48px;
+        margin-bottom: 16px;
+        color: var(--el-color-warning);
+    }
+}
+
+.iframe-loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: var(--el-bg-color);
+    gap: 12px;
+    
+    .el-icon {
+        font-size: 32px;
+        color: var(--el-color-primary);
+    }
+}
+</style>

urbanLifelineWeb/packages/shared/src/components/index.ts

@@ -1,3 +1,6 @@
 export * from './fileupload'
 export * from './base'
-export * from './dynamicFormItem'
+export * from './dynamicFormItem'
+
+// 通用视图组件
+export { default as IframeView } from './iframe/IframeView.vue'