mirror of
https://github.com/continew-org/continew-admin-ui.git
synced 2025-09-09 18:59:26 +08:00
105 lines
4.0 KiB
Vue
105 lines
4.0 KiB
Vue
<template>
|
|
<a-drawer v-model:visible="visible" title="日志详情" :width="720" :footer="false">
|
|
<a-descriptions title="基本信息" :column="2" size="large" class="general-description">
|
|
<a-descriptions-item label="日志 ID">{{ dataDetail?.id }}</a-descriptions-item>
|
|
<a-descriptions-item label="Trace ID"
|
|
>{{ dataDetail?.traceId }}<TextCopy :value="dataDetail?.traceId"
|
|
/></a-descriptions-item>
|
|
<a-descriptions-item label="操作人">{{ dataDetail?.createUserString }}</a-descriptions-item>
|
|
<a-descriptions-item label="操作时间">{{ dataDetail?.createTime }}</a-descriptions-item>
|
|
<a-descriptions-item label="操作内容">{{ dataDetail?.description }}</a-descriptions-item>
|
|
<a-descriptions-item label="所属模块">{{ dataDetail?.module }}</a-descriptions-item>
|
|
<a-descriptions-item label="操作 IP">{{ dataDetail?.ip }}</a-descriptions-item>
|
|
<a-descriptions-item label="操作地点">{{ dataDetail?.address }}</a-descriptions-item>
|
|
<a-descriptions-item label="浏览器">{{ dataDetail?.browser }}</a-descriptions-item>
|
|
<a-descriptions-item label="终端系统">{{ dataDetail?.os }}</a-descriptions-item>
|
|
<a-descriptions-item label="状态">
|
|
<a-tag v-if="dataDetail?.status === 1" color="green">成功</a-tag>
|
|
<a-tag v-else color="red">失败</a-tag>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="耗时">
|
|
<a-tag v-if="dataDetail?.timeTaken > 500" color="red"> {{ dataDetail?.timeTaken }}ms </a-tag>
|
|
<a-tag v-else-if="dataDetail?.timeTaken > 200" color="orange"> {{ dataDetail?.timeTaken }}ms </a-tag>
|
|
<a-tag v-else color="green">{{ dataDetail?.timeTaken }} ms</a-tag>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="请求 URI" :span="2">
|
|
{{ dataDetail?.requestUrl }}<TextCopy :value="dataDetail?.requestUrl" />
|
|
</a-descriptions-item>
|
|
</a-descriptions>
|
|
<a-descriptions
|
|
title="响应信息"
|
|
:column="2"
|
|
size="large"
|
|
class="general-description http"
|
|
style="margin-top: 20px; position: relative"
|
|
>
|
|
<a-descriptions-item :span="2">
|
|
<a-tabs type="card">
|
|
<a-tab-pane key="1" title="响应头">
|
|
<JsonPretty v-if="dataDetail?.responseHeaders" :json="dataDetail?.responseHeaders" />
|
|
<span v-else>无</span>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="2" title="响应体">
|
|
<JsonPretty v-if="dataDetail?.responseBody" :json="dataDetail?.responseBody" />
|
|
<span v-else>无</span>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</a-descriptions-item>
|
|
</a-descriptions>
|
|
<a-descriptions
|
|
title="请求信息"
|
|
:column="2"
|
|
size="large"
|
|
class="general-description http"
|
|
style="margin-top: 20px; position: relative"
|
|
>
|
|
<a-descriptions-item :span="2">
|
|
<a-tabs type="card">
|
|
<a-tab-pane key="1" title="请求头">
|
|
<JsonPretty v-if="dataDetail?.requestHeaders" :json="dataDetail?.requestHeaders" />
|
|
<span v-else>无</span>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="2" title="请求体">
|
|
<JsonPretty v-if="dataDetail?.requestBody" :json="dataDetail?.requestBody" />
|
|
<span v-else>无</span>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</a-descriptions-item>
|
|
</a-descriptions>
|
|
</a-drawer>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { getLog, type LogDetailResp } from '@/apis'
|
|
|
|
const dataId = ref('')
|
|
const dataDetail = ref<LogDetailResp>()
|
|
|
|
// 查询详情
|
|
const getDataDetail = async () => {
|
|
const res = await getLog(dataId.value)
|
|
dataDetail.value = res.data
|
|
}
|
|
|
|
const visible = ref(false)
|
|
// 详情
|
|
const onDetail = async (id: string) => {
|
|
dataId.value = id
|
|
await getDataDetail()
|
|
visible.value = true
|
|
}
|
|
|
|
defineExpose({ onDetail })
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.http :deep(.arco-descriptions-item-label-block) {
|
|
padding-right: 0;
|
|
}
|
|
|
|
:deep(.arco-tabs-content) {
|
|
padding-top: 5px;
|
|
padding-left: 15px;
|
|
}
|
|
</style>
|