添加开放接口日志

2026-08-20 10:23:47 +08:00
parent 35529fc671
commit 049965f51b
7 changed files with 493 additions and 15 deletions
@@ -0,0 +1,136 @@
+<template>
+    <Modal v-model="show" :mask-closable="false" width="700" title="查看开放接口日志详情" @on-visible-change="onVisibleChange">
+        <Form :label-width="120" class="oapilog-detail-form">
+            <FormItem label="id：">
+                <span>{{ row?.id ?? '-' }}</span>
+            </FormItem>
+            <FormItem label="接口名称：">
+                <span>{{ row?.requestUri ?? '-' }}</span>
+            </FormItem>
+            <FormItem label="调用方应用：">
+                <span>{{ appText }}</span>
+            </FormItem>
+            <FormItem label="调用IP：">
+                <span>{{ row?.requestIp ?? '-' }}</span>
+            </FormItem>
+            <FormItem label="调用结果：">
+                <span :class="resultClass">{{ resultText }}</span>
+            </FormItem>
+            <FormItem label="调用参数：">
+                <pre class="json-pre">{{ formatJson(row?.requestParams) }}</pre>
+            </FormItem>
+            <FormItem label="数据：">
+                <a v-if="row?.id" href="javascript:;" class="download-link" @click.prevent="handleDownload">下载</a>
+                <span v-else>-</span>
+            </FormItem>
+            <FormItem label="创建时间：">
+                <span>{{ formatTime(row?.createTime) }}</span>
+            </FormItem>
+        </Form>
+        <template #footer>
+            <Button @click="show = false">取消</Button>
+            <Button type="primary" @click="show = false">确定</Button>
+        </template>
+    </Modal>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import useCurrentInstance from '@/utils/hook/useCurrentInstance';
+import Utils from '@/utils';
+
+interface Props {
+    modelValue: boolean;
+    row?: Record<string, any> | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    row: null,
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const show = computed({
+    get: () => props.modelValue,
+    set: val => emit('update:modelValue', val),
+});
+
+const { $conf } = useCurrentInstance();
+
+const appText = computed(() => {
+    if (!props.row?.callerAppName && !props.row?.callerAppKey) return '-';
+    const name = props.row.callerAppName || '-';
+    const key = props.row.callerAppKey ?? '';
+    return `${name}（appKey: ${key}）`;
+});
+
+const isSuccess = computed(() => props.row?.statusCode === 200);
+const resultText = computed(() => isSuccess.value ? '执行成功' : '执行失败');
+const resultClass = computed(() => isSuccess.value ? 'text-success' : 'text-error');
+
+function onVisibleChange(val: boolean) {
+    if (!val) emit('update:modelValue', false);
+}
+
+function formatJson(val: any): string {
+    if (!val) return '-';
+    try {
+        return JSON.stringify(JSON.parse(val), null, 2);
+    } catch {
+        return String(val);
+    }
+}
+
+function formatTime(val: any): string {
+    if (!val) return '-';
+    return Utils.dateFormat(val, 'yyyy-MM-dd HH:mm:ss');
+}
+
+function handleDownload() {
+    if (!props.row?.id) return;
+    location.href = `${$conf.serviceHost}/api/oapilog/Download/${props.row.id}`;
+}
+</script>
+
+<style lang="scss" scoped>
+.oapilog-detail-form {
+    :deep(.ivu-form-item) {
+        margin-bottom: 16px;
+    }
+
+    :deep(.ivu-form-item-label) {
+        color: #515a6e;
+        font-weight: 500;
+    }
+
+    .text-success {
+        color: #19be6b;
+    }
+
+    .text-error {
+        color: #ed4014;
+    }
+
+    .json-pre {
+        margin: 0;
+        padding: 10px 12px;
+        background: #f7f8fa;
+        border: 1px solid #e8eaec;
+        border-radius: 4px;
+        max-height: 200px;
+        overflow: auto;
+        white-space: pre-wrap;
+        word-break: break-all;
+        font-size: 13px;
+        line-height: 1.6;
+    }
+
+    .download-link {
+        color: #577afb;
+
+        &:hover {
+            color: #3d5afe;
+        }
+    }
+}
+</style>