feat: 添加运行日志组件并集成到参数表单
在参数表单中添加运行日志组件,用于显示计算过程中的日志信息 后端增加日志处理功能,将计算日志返回给前端显示 优化tsconfig配置,添加路径别名支持
This commit is contained in:
106
webui/src/components/Log.vue
Normal file
106
webui/src/components/Log.vue
Normal 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>
|
||||
Reference in New Issue
Block a user