feat: 添加运行日志组件并集成到参数表单

在参数表单中添加运行日志组件,用于显示计算过程中的日志信息
后端增加日志处理功能,将计算日志返回给前端显示
优化tsconfig配置,添加路径别名支持
This commit is contained in:
dmy
2026-03-02 21:02:58 +08:00
parent 6ebfcf848d
commit 89e4cd4973
4 changed files with 235 additions and 14 deletions

View File

@@ -0,0 +1,106 @@
<template>
<q-card class="q-mt-md shadow-2">
<q-card-section class="bg-blue-grey-1">
<div class="text-h6 text-blue-grey-9 flex items-center gap-2">
<q-icon name="terminal" />
运行日志
<q-space />
<q-btn flat dense round icon="delete" @click="clearLog" size="sm" />
</div>
</q-card-section>
<q-card-section class="q-pa-none">
<div ref="logContainer" class="log-container">
<div
v-for="(log, index) in logs"
:key="index"
:class="['log-line', `log-${log.level}`]"
>
<span class="log-time">{{ log.time }}</span>
<span class="log-message">{{ log.message }}</span>
</div>
</div>
</q-card-section>
</q-card>
</template>
<script setup lang="ts">
import { ref, nextTick } from 'vue'
defineOptions({
name: 'LogComponent'
})
interface LogEntry {
level: 'info' | 'warning' | 'error' | 'debug'
time: string
message: string
}
const logs = ref<LogEntry[]>([])
const logContainer = ref<HTMLElement | null>(null)
const addLog = (level: LogEntry['level'], message: string) => {
const now = new Date()
const time = now.toLocaleTimeString('zh-CN', { hour12: false })
logs.value.push({ level, time, message })
// 自动滚动到底部
nextTick(() => {
if (logContainer.value) {
logContainer.value.scrollTop = logContainer.value.scrollHeight
}
})
}
const clearLog = () => {
logs.value = []
}
// 暴露方法给父组件
defineExpose({
addLog,
clearLog
})
</script>
<style scoped>
.log-container {
max-height: 300px;
overflow-y: auto;
background-color: #1e1e1e;
color: #d4d4d4;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 12px;
padding: 8px;
user-select: text;
cursor: text;
}
.log-line {
padding: 2px 0;
display: flex;
gap: 8px;
}
.log-time {
color: #6a9955;
flex-shrink: 0;
}
.log-info .log-message {
color: #d4d4d4;
}
.log-warning .log-message {
color: #dcdcaa;
}
.log-error .log-message {
color: #f48771;
}
.log-debug .log-message {
color: #9cdcfe;
}
</style>

View File

@@ -296,6 +296,9 @@
<p class="text-negative">{{ error }}</p>
</q-card-section>
</q-card>
<!-- 运行日志 -->
<LogComponent ref="logRef" />
</div>
</q-page>
</q-page-container>
@@ -305,6 +308,7 @@
<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { AllParameters } from '@/types'
import LogComponent from './Log.vue'
// 默认参数
const defaultParams: AllParameters = {
@@ -336,6 +340,7 @@ const params = reactive<AllParameters>(JSON.parse(JSON.stringify(defaultParams))
const calculating = ref(false)
const result = ref<string | null>(null)
const error = ref<string | null>(null)
const logRef = ref<InstanceType<typeof LogComponent> | null>(null)
// 数组操作函数
const addHArm = () => {
@@ -379,11 +384,32 @@ const calculate = async () => {
try {
// 调用 pywebview 的 Python 函数
if (window.pywebview) {
logRef.value?.addLog('info', '开始调用后端计算...')
const response = await window.pywebview.api.calculate(params)
logRef.value?.addLog('info', `后端返回 keys: ${Object.keys(response).join(', ')}`)
logRef.value?.addLog('info', `DEBUG_VERSION: ${response.DEBUG_VERSION || '无'}`)
logRef.value?.addLog('info', `后端返回: ${JSON.stringify(response).substring(0, 150)}`)
// 显示日志
console.log('[DEBUG] response:', response)
const logs = response.logs
if (Array.isArray(logs) && logs.length > 0) {
logRef.value?.addLog('info', `收到 ${logs.length} 条日志`)
for (const log of logs) {
logRef.value?.addLog(log.level as any, log.message)
}
} else {
logRef.value?.addLog('warning', '后端未返回日志')
logRef.value?.addLog('warning', `response.logs = ${JSON.stringify(logs)}`)
}
result.value = JSON.stringify(response, null, 2)
} else {
// 开发模式下的模拟
await new Promise(resolve => setTimeout(resolve, 1000))
logRef.value?.addLog('info', '开始 EGM 计算(开发模式)...')
logRef.value?.addLog('info', '参数: 额定电压=750kV, 雷暴日=20d, 海拔=1000m')
logRef.value?.addLog('info', '计算完成')
result.value = JSON.stringify({
success: true,
message: '计算完成(开发模式)',
@@ -395,6 +421,7 @@ const calculate = async () => {
}
} catch (e: any) {
error.value = e.message || '计算失败'
logRef.value?.addLog('error', e.message || '计算失败')
} finally {
calculating.value = false
}