组件修改

urbanLifelineWeb/packages/bidding/src/layouts/SidebarLayout/SidebarLayout.vue

@@ -58,29 +58,12 @@
         <!-- 主内容区 -->
         <main class="main-content">
             <!-- iframe 模式 -->
-            <div v-if="currentIframeUrl" class="iframe-container">
+            <IframeView
-                <div class="iframe-header">
+                v-if="currentIframeUrl"
-                    <span class="iframe-title">{{ currentMenuItem?.label }}</span>
+                :url="currentIframeUrl"
-                    <el-button 
+                :title="currentMenuItem?.label"
-                        text 
+                :show-header="true"
-                        @click="handleRefreshIframe"
+            />
-                        :icon="Refresh"
-                    >
-                        刷新
-                    </el-button>
-                </div>
-                <iframe
-                    ref="iframeRef"
-                    :src="currentIframeUrl"
-                    class="content-iframe"
-                    frameborder="0"
-                    @load="handleIframeLoad"
-                />
-                <div v-if="iframeLoading" class="iframe-loading">
-                    <Loader :size="20" class="is-loading" />
-                    <span>加载中...</span>
-                </div>
-            </div>
 
             <!-- 路由模式 -->
             <router-view v-else />
@@ -101,13 +84,9 @@ import {
     ChevronRight,
     User,
     Settings,
-    LogOut,
+    LogOut
-    RefreshCw,
-    Loader
 } from 'lucide-vue-next'
-
+import { IframeView } from 'shared/components'
-// el-button 图标需要传入组件
-const Refresh = RefreshCw
 import { ElMessage } from 'element-plus'
 import type { MenuItem } from 'shared/types'
 
@@ -117,8 +96,6 @@ const route = useRoute()
 // 状态管理
 const collapsed = ref(false)
 const activeMenu = ref('home')
-const iframeLoading = ref(false)
-const iframeRef = ref<HTMLIFrameElement>()
 
 // 从 LocalStorage 获取用户名
 function getUserName(): string {
@@ -200,7 +177,7 @@ const menuItems = ref<MenuItem[]>(loadMenuFromStorage())
 
 // 当前菜单项
 const currentMenuItem = computed(() => {
-    return menuItems.value.find(item => item.key === activeMenu.value)
+    return menuItems.value.find((item: MenuItem) => item.key === activeMenu.value)
 })
 
 // 当前 iframe URL（从路由 meta 读取）
@@ -221,24 +198,9 @@ const handleMenuClick = (item: MenuItem) => {
     // 所有菜单都通过路由跳转
     if (item.url) {
         router.push(item.url)
-        if (item.viewType === 'iframe') {
-            iframeLoading.value = true
-        }
     }
 }
 
-// iframe 加载完成
-const handleIframeLoad = () => {
-    iframeLoading.value = false
-}
-
-// 刷新 iframe
-const handleRefreshIframe = () => {
-    if (iframeRef.value) {
-        iframeLoading.value = true
-        iframeRef.value.src = iframeRef.value.src
-    }
-}
 
 // 用户头像加载错误
 const handleAvatarError = () => {

urbanLifelineWeb/packages/platform/src/layouts/AdminSidebarLayout/AdminSidebarLayout.vue

@@ -51,19 +51,12 @@
         <!-- 主内容区 -->
         <main class="main-content">
             <!-- iframe 模式 -->
-            <div v-if="currentIframeUrl" class="iframe-container">
+            <IframeView
-                <iframe
+                v-if="currentIframeUrl"
-                    ref="iframeRef"
+                :url="currentIframeUrl"
-                    :src="currentIframeUrl"
+                :title="currentMenuItem?.label"
-                    class="content-iframe"
+                :show-header="false"
-                    frameborder="0"
+            />
-                    @load="handleIframeLoad"
-                />
-                <div v-if="iframeLoading" class="iframe-loading">
-                    <el-icon class="is-loading"><Loading /></el-icon>
-                    <span>加载中...</span>
-                </div>
-            </div>
 
             <!-- 路由模式 -->
             <router-view v-else />
@@ -86,9 +79,9 @@ import {
     Setting,
     SwitchButton,
     Refresh,
-    Loading,
     Back
 } from '@element-plus/icons-vue'
+import { IframeView } from 'shared/components'
 import { PanelLeftClose, PanelLeftOpen } from 'lucide-vue-next'
 import { ElMessage } from 'element-plus'
 import type { MenuItem } from 'shared/types'
@@ -99,8 +92,6 @@ const route = useRoute()
 // 状态管理
 const collapsed = ref(false)
 const activeMenu = ref('home')
-const iframeLoading = ref(false)
-const iframeRef = ref<HTMLIFrameElement>()
 
 // 从 LocalStorage 获取用户名
 function getUserName(): string {
@@ -174,7 +165,7 @@ const menuItems = ref<MenuItem[]>(loadMenuFromStorage())
 
 // 当前菜单项
 const currentMenuItem = computed(() => {
-    return menuItems.value.find(item => item.key === activeMenu.value)
+    return menuItems.value.find((item: MenuItem) => item.key === activeMenu.value)
 })
 
 // 当前 iframe URL（从路由 meta 读取）
@@ -195,22 +186,6 @@ const handleMenuClick = (item: MenuItem) => {
     // 所有菜单都通过路由跳转
     if (item.url) {
         router.push(item.url)
-        if (item.viewType === 'iframe') {
-            iframeLoading.value = true
-        }
-    }
-}
-
-// iframe 加载完成
-const handleIframeLoad = () => {
-    iframeLoading.value = false
-}
-
-// 刷新 iframe
-const handleRefreshIframe = () => {
-    if (iframeRef.value) {
-        iframeLoading.value = true
-        iframeRef.value.src = iframeRef.value.src
     }
 }
 

urbanLifelineWeb/packages/platform/src/layouts/SidebarLayout/SidebarLayout.vue

@@ -69,19 +69,12 @@
         <!-- 主内容区 -->
         <main class="main-content">
             <!-- iframe 模式 -->
-            <div v-if="currentIframeUrl" class="iframe-container">
+            <IframeView
-                <iframe
+                v-if="currentIframeUrl"
-                    ref="iframeRef"
+                :url="currentIframeUrl"
-                    :src="currentIframeUrl"
+                :title="currentMenuItem?.label"
-                    class="content-iframe"
+                :show-header="false"
-                    frameborder="0"
+            />
-                    @load="handleIframeLoad"
-                />
-                <div v-if="iframeLoading" class="iframe-loading">
-                    <Loader :size="20" class="is-loading" />
-                    <span>加载中...</span>
-                </div>
-            </div>
 
             <!-- 路由模式 -->
             <router-view v-else />
@@ -101,10 +94,9 @@ import {
     Headphones,
     User,
     Settings,
-    LogOut,
+    LogOut
-    RefreshCw,
-    Loader
 } from 'lucide-vue-next'
+import { IframeView } from 'shared/components'
 import { ElMessage } from 'element-plus'
 import type { MenuItem } from 'shared/types'
 
@@ -114,8 +106,6 @@ const route = useRoute()
 // 状态管理
 const collapsed = ref(false)
 const activeMenu = ref('home')
-const iframeLoading = ref(false)
-const iframeRef = ref<HTMLIFrameElement>()
 const hasAdmin = ref(false)
 
 // 从 LocalStorage 获取用户名
@@ -198,7 +188,7 @@ const menuItems = ref<MenuItem[]>(loadMenuFromStorage())
 
 // 当前菜单项
 const currentMenuItem = computed(() => {
-    return menuItems.value.find(item => item.key === activeMenu.value)
+    return menuItems.value.find((item: MenuItem) => item.key === activeMenu.value)
 })
 
 // 当前 iframe URL（从路由 meta 读取）
@@ -219,22 +209,6 @@ const handleMenuClick = (item: MenuItem) => {
     // 所有菜单都通过路由跳转
     if (item.url) {
         router.push(item.url)
-        if (item.viewType === 'iframe') {
-            iframeLoading.value = true
-        }
-    }
-}
-
-// iframe 加载完成
-const handleIframeLoad = () => {
-    iframeLoading.value = false
-}
-
-// 刷新 iframe
-const handleRefreshIframe = () => {
-    if (iframeRef.value) {
-        iframeLoading.value = true
-        iframeRef.value.src = iframeRef.value.src
     }
 }
 

urbanLifelineWeb/packages/platform/src/views/public/Chat/AIChatView.vue

@@ -127,7 +127,7 @@
                         v-model="inputText"
                         placeholder="请输入内容..."
                         @keydown.enter.prevent="handleSend"
-                        rows="1"
+                        :rows="1"
                         ref="textareaRef"
                     ></textarea>
                     <div class="input-actions">

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

@@ -1,9 +1,23 @@
 <template>
     <div class="iframe-view">
+        <!-- 可选的头部区域 -->
+        <div v-if="showHeader && finalUrl" class="iframe-header">
+            <span class="iframe-title">{{ title }}</span>
+            <el-button 
+                text 
+                @click="refresh"
+                :icon="RefreshCw"
+            >
+                刷新
+            </el-button>
+        </div>
+        
         <iframe
-            v-if="iframeUrl"
+            v-if="finalUrl"
-            :src="iframeUrl"
+            ref="iframeRef"
+            :src="finalUrl"
             class="iframe-content"
+            :class="{ 'with-header': showHeader }"
             frameborder="0"
             @load="handleLoad"
         />
@@ -19,24 +33,62 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import { Loader, AlertTriangle } from 'lucide-vue-next'
+import { Loader, AlertTriangle, RefreshCw } from 'lucide-vue-next'
+
+interface Props {
+    url?: string           // 直接传入的 URL（优先级高于 route.meta）
+    title?: string         // 标题
+    showHeader?: boolean   // 是否显示头部（带刷新按钮）
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    url: '',
+    title: '',
+    showHeader: false
+})
+
+const emit = defineEmits<{
+    load: []
+}>()
 
 const route = useRoute()
 const loading = ref(true)
+const iframeRef = ref<HTMLIFrameElement>()
 
-// 从路由 meta 中获取 iframe URL
+// 最终的 iframe URL（props.url 优先，否则从 route.meta 获取）
-const iframeUrl = computed(() => {
+const finalUrl = computed(() => {
-    return route.meta.iframeUrl as string || ''
+    return props.url || (route.meta.iframeUrl as string) || ''
 })
 
 function handleLoad() {
     loading.value = false
+    emit('load')
 }
 
+// 刷新 iframe
+function refresh() {
+    if (iframeRef.value) {
+        loading.value = true
+        iframeRef.value.src = iframeRef.value.src
+    }
+}
+
+// 监听 URL 变化，重新加载
+watch(finalUrl, () => {
+    if (finalUrl.value) {
+        loading.value = true
+    }
+})
+
+// 暴露方法供外部调用
+defineExpose({
+    refresh
+})
+
 onMounted(() => {
-    console.log('[IframeView] 加载 iframe:', iframeUrl.value)
+    console.log('[IframeView] 加载 iframe:', finalUrl.value)
 })
 </script>
 
@@ -46,12 +98,35 @@ onMounted(() => {
     width: 100%;
     height: 100%;
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.iframe-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    background: var(--el-bg-color);
+    border-bottom: 1px solid var(--el-border-color-light);
+    flex-shrink: 0;
+    
+    .iframe-title {
+        font-size: 16px;
+        font-weight: 500;
+        color: var(--el-text-color-primary);
+    }
 }
 
 .iframe-content {
     width: 100%;
     height: 100%;
     border: none;
+    flex: 1;
+    
+    &.with-header {
+        height: calc(100% - 49px);
+    }
 }
 
 .iframe-error {
@@ -82,9 +157,18 @@ onMounted(() => {
     background: var(--el-bg-color);
     gap: 12px;
     
-    .el-icon {
+    .is-loading {
-        font-size: 32px;
+        animation: rotating 1.5s linear infinite;
         color: var(--el-color-primary);
     }
 }
+
+@keyframes rotating {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
 </style>

urbanLifelineWeb/packages/shared/src/layouts/AdminSidebarLayout/AdminSidebarLayout.vue

@@ -65,29 +65,12 @@
         <!-- 主内容区 -->
         <main class="main-content">
             <!-- iframe 模式 -->
-            <div v-if="currentIframeUrl" class="iframe-container">
+            <IframeView
-                <div class="iframe-header">
+                v-if="currentIframeUrl"
-                    <span class="iframe-title">{{ currentMenuItem?.label }}</span>
+                :url="currentIframeUrl"
-                    <el-button 
+                :title="currentMenuItem?.label"
-                        text 
+                :show-header="true"
-                        @click="handleRefreshIframe"
+            />
-                        :icon="Refresh"
-                    >
-                        刷新
-                    </el-button>
-                </div>
-                <iframe
-                    ref="iframeRef"
-                    :src="currentIframeUrl"
-                    class="content-iframe"
-                    frameborder="0"
-                    @load="handleIframeLoad"
-                />
-                <div v-if="iframeLoading" class="iframe-loading">
-                    <Loader :size="20" class="is-loading" />
-                    <span>加载中...</span>
-                </div>
-            </div>
 
             <!-- 路由模式 -->
             <router-view v-else />
@@ -112,13 +95,9 @@ import {
     ChevronDown,
     User,
     Settings,
-    LogOut,
+    LogOut
-    RefreshCw,
-    Loader
 } from 'lucide-vue-next'
-
+import { IframeView } from '@/components'
-// el-button 图标需要传入组件
-const Refresh = RefreshCw
 
 import type { MenuItem } from '@/types/menu'
 
@@ -217,8 +196,6 @@ const serviceTitle = computed(() => {
 // 状态管理
 const collapsed = ref(false)
 const activeMenu = ref('home')
-const iframeLoading = ref(false)
-const iframeRef = ref<HTMLIFrameElement>()
 
 // 从 LocalStorage 获取用户名
 function getUserName(): string {
@@ -344,22 +321,6 @@ const handleMenuClick = (item: MenuItem) => {
     // 所有菜单都通过路由跳转
     if (item.url) {
         router.push(item.url)
-        if (item.viewType === 'iframe') {
-            iframeLoading.value = true
-        }
-    }
-}
-
-// iframe 加载完成
-const handleIframeLoad = () => {
-    iframeLoading.value = false
-}
-
-// 刷新 iframe
-const handleRefreshIframe = () => {
-    if (iframeRef.value) {
-        iframeLoading.value = true
-        iframeRef.value.src = iframeRef.value.src
     }
 }
 

urbanLifelineWeb/packages/shared/src/layouts/SubSidebarLayout/SubSidebarLayout.vue

@@ -137,29 +137,12 @@
         <!-- 主内容区 -->
         <main class="main-content">
             <!-- iframe 模式 -->
-            <div v-if="currentIframeUrl" class="iframe-container">
+            <IframeView
-                <div class="iframe-header">
+                v-if="currentIframeUrl"
-                    <span class="iframe-title">{{ currentMenuItem?.label }}</span>
+                :url="currentIframeUrl"
-                    <el-button 
+                :title="currentMenuItem?.label"
-                        text 
+                :show-header="true"
-                        @click="handleRefreshIframe"
+            />
-                        :icon="Refresh"
-                    >
-                        刷新
-                    </el-button>
-                </div>
-                <iframe
-                    ref="iframeRef"
-                    :src="currentIframeUrl"
-                    class="content-iframe"
-                    frameborder="0"
-                    @load="handleIframeLoad"
-                />
-                <div v-if="iframeLoading" class="iframe-loading">
-                    <Loader :size="20" class="is-loading" />
-                    <span>加载中...</span>
-                </div>
-            </div>
 
             <!-- 路由模式 -->
             <router-view v-else />
@@ -177,13 +160,9 @@ import {
     Server,
     Monitor,
     ChevronDown,
-    ChevronRight,
+    ChevronRight
-    RefreshCw,
-    Loader
 } from 'lucide-vue-next'
-
+import { IframeView } from '@/components'
-// el-button 刷新图标需要传入组件
-const Refresh = RefreshCw
 
 // ... (rest of the code remains the same)
 import type { MenuItem } from '@/types/menu'
@@ -287,8 +266,6 @@ const serviceTitle = computed(() => {
 // 状态管理
 const collapsed = ref(false)
 const activeMenu = ref('home')
-const iframeLoading = ref(false)
-const iframeRef = ref<HTMLIFrameElement>()
 
 // 从 LocalStorage 获取用户名
 function getUserName(): string {
@@ -488,22 +465,6 @@ const handleMenuClick = (item: MenuItem) => {
     // 所有菜单都通过路由跳转
     if (item.url) {
         router.push(item.url)
-        if (item.viewType === 'iframe') {
-            iframeLoading.value = true
-        }
-    }
-}
-
-// iframe 加载完成
-const handleIframeLoad = () => {
-    iframeLoading.value = false
-}
-
-// 刷新 iframe
-const handleRefreshIframe = () => {
-    if (iframeRef.value) {
-        iframeLoading.value = true
-        iframeRef.value.src = iframeRef.value.src
     }
 }
 

urbanLifelineWeb/packages/workcase/src/layouts/SidebarLayout/SidebarLayout.vue

@@ -33,29 +33,12 @@
         <!-- 主内容区 -->
         <main class="main-content">
             <!-- iframe 模式 -->
-            <div v-if="currentIframeUrl" class="iframe-container">
+            <IframeView
-                <div class="iframe-header">
+                v-if="currentIframeUrl"
-                    <span class="iframe-title">{{ currentMenuItem?.label }}</span>
+                :url="currentIframeUrl"
-                    <el-button 
+                :title="currentMenuItem?.label"
-                        text 
+                :show-header="true"
-                        @click="handleRefreshIframe"
+            />
-                        :icon="Refresh"
-                    >
-                        刷新
-                    </el-button>
-                </div>
-                <iframe
-                    ref="iframeRef"
-                    :src="currentIframeUrl"
-                    class="content-iframe"
-                    frameborder="0"
-                    @load="handleIframeLoad"
-                />
-                <div v-if="iframeLoading" class="iframe-loading">
-                    <Loader :size="20" class="is-loading" />
-                    <span>加载中...</span>
-                </div>
-            </div>
 
             <!-- 路由模式 -->
             <router-view v-else />
@@ -76,13 +59,9 @@ import {
     ChevronRight,
     User,
     Settings,
-    LogOut,
+    LogOut
-    RefreshCw,
-    Loader
 } from 'lucide-vue-next'
-
+import { IframeView } from 'shared/components'
-// el-button 图标需要传入组件
-const Refresh = RefreshCw
 import { ElMessage } from 'element-plus'
 import type { MenuItem } from 'shared/types'
 
@@ -92,8 +71,6 @@ const route = useRoute()
 // 状态管理
 const collapsed = ref(false)
 const activeMenu = ref('home')
-const iframeLoading = ref(false)
-const iframeRef = ref<HTMLIFrameElement>()
 
 // 从 LocalStorage 获取用户名
 function getUserName(): string {
@@ -175,7 +152,7 @@ const menuItems = ref<MenuItem[]>(loadMenuFromStorage())
 
 // 当前菜单项
 const currentMenuItem = computed(() => {
-    return menuItems.value.find(item => item.key === activeMenu.value)
+    return menuItems.value.find((item: MenuItem) => item.key === activeMenu.value)
 })
 
 // 当前 iframe URL（从路由 meta 读取）
@@ -196,30 +173,9 @@ const handleMenuClick = (item: MenuItem) => {
     // 所有菜单都通过路由跳转
     if (item.url) {
         router.push(item.url)
-        if (item.viewType === 'iframe') {
-            iframeLoading.value = true
-        }
     }
 }
 
-// iframe 加载完成
-const handleIframeLoad = () => {
-    iframeLoading.value = false
-}
-
-// 刷新 iframe
-const handleRefreshIframe = () => {
-    if (iframeRef.value) {
-        iframeLoading.value = true
-        iframeRef.value.src = iframeRef.value.src
-    }
-}
-
-// 用户头像加载错误
-const handleAvatarError = () => {
-    return true
-}
-
 // 用户操作
 const handleUserCommand = (command: string) => {
     switch (command) {

urbanLifelineWeb/packages/workcase/src/views/admin/agent/AgentView.vue

@@ -33,7 +33,7 @@
                     </el-form-item>
 
                     <el-form-item label="系统提示词">
-                        <el-input v-model="agentConfig.systemPrompt" type="textarea" rows="4" placeholder="输入系统提示词，用于指导AI的行为" />
+                        <el-input v-model="agentConfig.systemPrompt" type="textarea" :rows="4" placeholder="输入系统提示词，用于指导AI的行为" />
                     </el-form-item>
 
                     <el-form-item label="启用知识库">
@@ -73,7 +73,7 @@
                 </template>
 
                 <div class="test-section">
-                    <el-input v-model="testMessage" type="textarea" rows="3" placeholder="输入测试消息..." style="margin-bottom: 12px;" />
+                    <el-input v-model="testMessage" type="textarea" :rows="3" placeholder="输入测试消息..." style="margin-bottom: 12px;" />
                     <el-button type="primary" @click="testAgent">发送测试</el-button>
 
                     <div v-if="testResponse" class="test-response">

urbanLifelineWeb/packages/workcase/src/views/admin/workcase/WorkcaseView.vue

@@ -140,7 +140,7 @@
                     </el-select>
                 </el-form-item>
                 <el-form-item label="故障描述">
-                    <el-input v-model="formData.remark" type="textarea" rows="4" placeholder="请输入故障描述" />
+                    <el-input v-model="formData.remark" type="textarea" :rows="4" placeholder="请输入故障描述" />
                 </el-form-item>
             </el-form>
             <template #footer>

urbanLifelineWeb/packages/workcase/src/views/public/AIChat/AIChatView.vue

@@ -156,7 +156,7 @@
                                 @input="adjustHeight"
                                 @keydown="handleKeyDown"
                                 placeholder="请输入您的问题，例如：电源模块过热报警怎么处理..."
-                                rows="1"
+                                :rows="1"
                                 class="chat-textarea"
                             />
                         </div>