组件修改

This commit is contained in:
2025-12-20 12:55:43 +08:00
parent 1498b91bcf
commit 89ff8a7dba
11 changed files with 150 additions and 277 deletions

View File

@@ -58,29 +58,12 @@
<!-- 主内容区 -->
<main class="main-content">
<!-- iframe 模式 -->
<div v-if="currentIframeUrl" class="iframe-container">
<div class="iframe-header">
<span class="iframe-title">{{ currentMenuItem?.label }}</span>
<el-button
text
@click="handleRefreshIframe"
:icon="Refresh"
>
刷新
</el-button>
</div>
<iframe
ref="iframeRef"
:src="currentIframeUrl"
class="content-iframe"
frameborder="0"
@load="handleIframeLoad"
<IframeView
v-if="currentIframeUrl"
:url="currentIframeUrl"
:title="currentMenuItem?.label"
:show-header="true"
/>
<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,
RefreshCw,
Loader
LogOut
} from 'lucide-vue-next'
// el-button 图标需要传入组件
const Refresh = RefreshCw
import { IframeView } from 'shared/components'
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 = () => {

View File

@@ -51,19 +51,12 @@
<!-- 主内容区 -->
<main class="main-content">
<!-- iframe 模式 -->
<div v-if="currentIframeUrl" class="iframe-container">
<iframe
ref="iframeRef"
:src="currentIframeUrl"
class="content-iframe"
frameborder="0"
@load="handleIframeLoad"
<IframeView
v-if="currentIframeUrl"
:url="currentIframeUrl"
:title="currentMenuItem?.label"
:show-header="false"
/>
<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
}
}

View File

@@ -69,19 +69,12 @@
<!-- 主内容区 -->
<main class="main-content">
<!-- iframe 模式 -->
<div v-if="currentIframeUrl" class="iframe-container">
<iframe
ref="iframeRef"
:src="currentIframeUrl"
class="content-iframe"
frameborder="0"
@load="handleIframeLoad"
<IframeView
v-if="currentIframeUrl"
:url="currentIframeUrl"
:title="currentMenuItem?.label"
:show-header="false"
/>
<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,
RefreshCw,
Loader
LogOut
} 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
}
}

View File

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

View File

@@ -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"
:src="iframeUrl"
v-if="finalUrl"
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
const iframeUrl = computed(() => {
return route.meta.iframeUrl as string || ''
// 最终的 iframe URLprops.url 优先,否则从 route.meta 获取)
const finalUrl = computed(() => {
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 {
font-size: 32px;
.is-loading {
animation: rotating 1.5s linear infinite;
color: var(--el-color-primary);
}
}
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>

View File

@@ -65,29 +65,12 @@
<!-- 主内容区 -->
<main class="main-content">
<!-- iframe 模式 -->
<div v-if="currentIframeUrl" class="iframe-container">
<div class="iframe-header">
<span class="iframe-title">{{ currentMenuItem?.label }}</span>
<el-button
text
@click="handleRefreshIframe"
:icon="Refresh"
>
刷新
</el-button>
</div>
<iframe
ref="iframeRef"
:src="currentIframeUrl"
class="content-iframe"
frameborder="0"
@load="handleIframeLoad"
<IframeView
v-if="currentIframeUrl"
:url="currentIframeUrl"
:title="currentMenuItem?.label"
:show-header="true"
/>
<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,
RefreshCw,
Loader
LogOut
} from 'lucide-vue-next'
// el-button 图标需要传入组件
const Refresh = RefreshCw
import { IframeView } from '@/components'
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
}
}

View File

@@ -137,29 +137,12 @@
<!-- 主内容区 -->
<main class="main-content">
<!-- iframe 模式 -->
<div v-if="currentIframeUrl" class="iframe-container">
<div class="iframe-header">
<span class="iframe-title">{{ currentMenuItem?.label }}</span>
<el-button
text
@click="handleRefreshIframe"
:icon="Refresh"
>
刷新
</el-button>
</div>
<iframe
ref="iframeRef"
:src="currentIframeUrl"
class="content-iframe"
frameborder="0"
@load="handleIframeLoad"
<IframeView
v-if="currentIframeUrl"
:url="currentIframeUrl"
:title="currentMenuItem?.label"
:show-header="true"
/>
<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,
RefreshCw,
Loader
ChevronRight
} from 'lucide-vue-next'
// el-button 刷新图标需要传入组件
const Refresh = RefreshCw
import { IframeView } from '@/components'
// ... (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
}
}

View File

@@ -33,29 +33,12 @@
<!-- 主内容区 -->
<main class="main-content">
<!-- iframe 模式 -->
<div v-if="currentIframeUrl" class="iframe-container">
<div class="iframe-header">
<span class="iframe-title">{{ currentMenuItem?.label }}</span>
<el-button
text
@click="handleRefreshIframe"
:icon="Refresh"
>
刷新
</el-button>
</div>
<iframe
ref="iframeRef"
:src="currentIframeUrl"
class="content-iframe"
frameborder="0"
@load="handleIframeLoad"
<IframeView
v-if="currentIframeUrl"
:url="currentIframeUrl"
:title="currentMenuItem?.label"
:show-header="true"
/>
<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,
RefreshCw,
Loader
LogOut
} from 'lucide-vue-next'
// el-button 图标需要传入组件
const Refresh = RefreshCw
import { IframeView } from 'shared/components'
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,29 +173,8 @@ 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) => {

View File

@@ -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">

View File

@@ -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>

View File

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