init: UserBaseFront (frontend)

This commit is contained in:
chenxing
2026-08-10 14:41:13 +08:00
commit eea881b616
174 changed files with 32833 additions and 0 deletions
+129
View File
@@ -0,0 +1,129 @@
<template>
<Modal v-model="show" :mask-closable="false" width="700" title="查看日志详情" @on-visible-change="onVisibleChange">
<Form :label-width="120" class="oplog-detail-form">
<FormItem label="id:">
<span>{{ row?.id ?? '-' }}</span>
</FormItem>
<FormItem label="接口名称:">
<span>{{ row?.requestUri ?? '-' }}</span>
</FormItem>
<FormItem label="用户名称:">
<span>{{ row?.username ?? '-' }}</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 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;
window.open(`${$conf.serviceHost}/api/oplog/Download/${props.row.id}`);
}
</script>
<style lang="scss" scoped>
.oplog-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>