feat: 优化日志组件并简化后端日志处理

为日志组件添加折叠功能并显示空状态提示
移除参数表单中冗余的后端日志调试信息
This commit is contained in:
dmy
2026-03-02 21:13:26 +08:00
parent 89e4cd4973
commit 9a5e8e0076
2 changed files with 13 additions and 14 deletions

View File

@@ -1,14 +1,14 @@
<template> <template>
<q-card class="q-mt-md shadow-2"> <q-card class="q-mt-md shadow-2">
<q-card-section class="bg-blue-grey-1"> <q-card-section class="bg-blue-grey-1 cursor-pointer" @click="expanded = !expanded">
<div class="text-h6 text-blue-grey-9 flex items-center gap-2"> <div class="text-h6 text-blue-grey-9 flex items-center gap-2">
<q-icon name="terminal" /> <q-icon name="terminal" />
运行日志 运行日志
<q-space /> <q-space />
<q-btn flat dense round icon="delete" @click="clearLog" size="sm" /> <q-icon :name="expanded ? 'expand_less' : 'expand_more'" />
</div> </div>
</q-card-section> </q-card-section>
<q-card-section class="q-pa-none"> <div v-show="expanded" class="q-pa-none">
<div ref="logContainer" class="log-container"> <div ref="logContainer" class="log-container">
<div <div
v-for="(log, index) in logs" v-for="(log, index) in logs"
@@ -18,8 +18,9 @@
<span class="log-time">{{ log.time }}</span> <span class="log-time">{{ log.time }}</span>
<span class="log-message">{{ log.message }}</span> <span class="log-message">{{ log.message }}</span>
</div> </div>
<div v-if="logs.length === 0" class="log-empty">暂无日志</div>
</div> </div>
</q-card-section> </div>
</q-card> </q-card>
</template> </template>
@@ -38,6 +39,7 @@ interface LogEntry {
const logs = ref<LogEntry[]>([]) const logs = ref<LogEntry[]>([])
const logContainer = ref<HTMLElement | null>(null) const logContainer = ref<HTMLElement | null>(null)
const expanded = ref(true)
const addLog = (level: LogEntry['level'], message: string) => { const addLog = (level: LogEntry['level'], message: string) => {
const now = new Date() const now = new Date()
@@ -103,4 +105,10 @@ defineExpose({
.log-debug .log-message { .log-debug .log-message {
color: #9cdcfe; color: #9cdcfe;
} }
.log-empty {
color: #666;
font-style: italic;
padding: 8px;
}
</style> </style>

View File

@@ -384,23 +384,14 @@ const calculate = async () => {
try { try {
// 调用 pywebview 的 Python 函数 // 调用 pywebview 的 Python 函数
if (window.pywebview) { if (window.pywebview) {
logRef.value?.addLog('info', '开始调用后端计算...')
const response = await window.pywebview.api.calculate(params) 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 const logs = response.logs
if (Array.isArray(logs) && logs.length > 0) { if (Array.isArray(logs) && logs.length > 0) {
logRef.value?.addLog('info', `收到 ${logs.length} 条日志`)
for (const log of logs) { for (const log of logs) {
logRef.value?.addLog(log.level as any, log.message) 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) result.value = JSON.stringify(response, null, 2)