fix: unblock frontend logs directory in gitignore
Add exception rules to both root and subproject .gitignore files to allow tracking the frontend logs page component at src/Fengling.Console.Web.Vben/apps/web-ele/src/views/fengling/logs/
This commit is contained in:
Sam
parent
8f2e07a2cf
commit
ef599f9465
1
.gitignore
vendored
1
.gitignore
vendored
@ -29,6 +29,7 @@ package-lock.json
|
||||
.eslintcache
|
||||
|
||||
logs
|
||||
!apps/web-ele/src/views/fengling/logs/
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
|
||||
227
apps/web-ele/src/views/fengling/logs/index.vue
Normal file
227
apps/web-ele/src/views/fengling/logs/index.vue
Normal file
@ -0,0 +1,227 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
import {
|
||||
ElTable,
|
||||
ElTableColumn,
|
||||
ElTabs,
|
||||
ElTabPane,
|
||||
ElButton,
|
||||
ElInput,
|
||||
ElSelect,
|
||||
ElOption,
|
||||
ElDatePicker,
|
||||
ElTag,
|
||||
} from 'element-plus';
|
||||
|
||||
import { LogApi, type FenglingApi } from '#/api/fengling';
|
||||
|
||||
const activeTab = ref('audit');
|
||||
const loading = ref(false);
|
||||
const auditTableData = ref<FenglingApi.Log.AuditLog[]>([]);
|
||||
const accessTableData = ref<FenglingApi.Log.AccessLog[]>([]);
|
||||
|
||||
const searchParams = ref({
|
||||
userId: undefined as number | undefined,
|
||||
keyword: '',
|
||||
action: '',
|
||||
resourceType: '',
|
||||
path: '',
|
||||
statusCode: undefined as number | undefined,
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
});
|
||||
|
||||
const pagination = ref({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
});
|
||||
|
||||
const loadAuditLogs = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const response = await LogApi.getAuditLogList({
|
||||
page: pagination.value.page,
|
||||
pageSize: pagination.value.pageSize,
|
||||
userId: searchParams.value.userId,
|
||||
action: searchParams.value.action || undefined,
|
||||
resourceType: searchParams.value.resourceType || undefined,
|
||||
startDate: searchParams.value.startDate || undefined,
|
||||
endDate: searchParams.value.endDate || undefined,
|
||||
});
|
||||
auditTableData.value = response.items;
|
||||
pagination.value.total = response.totalCount;
|
||||
} catch (error) {
|
||||
console.error('Failed to load audit logs', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const loadAccessLogs = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const response = await LogApi.getAccessLogList({
|
||||
page: pagination.value.page,
|
||||
pageSize: pagination.value.pageSize,
|
||||
userId: searchParams.value.userId,
|
||||
path: searchParams.value.path || undefined,
|
||||
statusCode: searchParams.value.statusCode,
|
||||
startDate: searchParams.value.startDate || undefined,
|
||||
endDate: searchParams.value.endDate || undefined,
|
||||
});
|
||||
accessTableData.value = response.items;
|
||||
pagination.value.total = response.totalCount;
|
||||
} catch (error) {
|
||||
console.error('Failed to load access logs', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
if (activeTab.value === 'audit') {
|
||||
loadAuditLogs();
|
||||
} else {
|
||||
loadAccessLogs();
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadAuditLogs();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-5">
|
||||
<h1 class="mb-5 text-2xl font-bold">Logs</h1>
|
||||
|
||||
<el-tabs v-model="activeTab" @tab-change="handleSearch">
|
||||
<el-tab-pane label="Audit Logs" name="audit">
|
||||
<div class="mb-4">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<el-input
|
||||
v-model="searchParams.action"
|
||||
placeholder="Action"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
<el-input
|
||||
v-model="searchParams.resourceType"
|
||||
placeholder="Resource Type"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-model="searchParams.startDate"
|
||||
type="datetime"
|
||||
placeholder="Start Date"
|
||||
style="width: 250px"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-model="searchParams.endDate"
|
||||
type="datetime"
|
||||
placeholder="End Date"
|
||||
style="width: 250px"
|
||||
/>
|
||||
<el-button type="primary" @click="handleSearch">Search</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table :data="auditTableData" v-loading="loading" border stripe>
|
||||
<el-table-column prop="id" label="ID" width="80" />
|
||||
<el-table-column prop="userId" label="User ID" width="100" />
|
||||
<el-table-column prop="userName" label="Username" width="150" />
|
||||
<el-table-column prop="action" label="Action" width="150" />
|
||||
<el-table-column prop="resourceType" label="Resource Type" width="150" />
|
||||
<el-table-column prop="resourceId" label="Resource ID" width="150" />
|
||||
<el-table-column prop="details" label="Details" width="300" show-overflow-tooltip />
|
||||
<el-table-column prop="ipAddress" label="IP Address" width="150" />
|
||||
<el-table-column prop="createdAt" label="Created At" width="180" />
|
||||
</el-table>
|
||||
|
||||
<div class="mt-4 flex justify-end">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.page"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@change="loadAuditLogs"
|
||||
/>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="Access Logs" name="access">
|
||||
<div class="mb-4">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<el-input
|
||||
v-model="searchParams.path"
|
||||
placeholder="Path"
|
||||
clearable
|
||||
style="width: 250px"
|
||||
/>
|
||||
<el-select v-model="searchParams.statusCode" placeholder="Status Code" clearable style="width: 150px">
|
||||
<el-option label="200" :value="200" />
|
||||
<el-option label="201" :value="201" />
|
||||
<el-option label="400" :value="400" />
|
||||
<el-option label="401" :value="401" />
|
||||
<el-option label="403" :value="403" />
|
||||
<el-option label="404" :value="404" />
|
||||
<el-option label="500" :value="500" />
|
||||
</el-select>
|
||||
<el-date-picker
|
||||
v-model="searchParams.startDate"
|
||||
type="datetime"
|
||||
placeholder="Start Date"
|
||||
style="width: 250px"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-model="searchParams.endDate"
|
||||
type="datetime"
|
||||
placeholder="End Date"
|
||||
style="width: 250px"
|
||||
/>
|
||||
<el-button type="primary" @click="handleSearch">Search</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table :data="accessTableData" v-loading="loading" border stripe>
|
||||
<el-table-column prop="id" label="ID" width="80" />
|
||||
<el-table-column prop="userId" label="User ID" width="100" />
|
||||
<el-table-column prop="userName" label="Username" width="150" />
|
||||
<el-table-column prop="path" label="Path" width="300" />
|
||||
<el-table-column prop="method" label="Method" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.method === 'GET' ? 'success' : row.method === 'POST' ? 'primary' : 'warning'" size="small">
|
||||
{{ row.method }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="statusCode" label="Status Code" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.statusCode < 300 ? 'success' : row.statusCode < 400 ? 'warning' : 'danger'" size="small">
|
||||
{{ row.statusCode }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="duration" label="Duration (ms)" width="120" />
|
||||
<el-table-column prop="ipAddress" label="IP Address" width="150" />
|
||||
<el-table-column prop="createdAt" label="Created At" width="180" />
|
||||
</el-table>
|
||||
|
||||
<div class="mt-4 flex justify-end">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.page"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@change="loadAccessLogs"
|
||||
/>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Reference in New Issue
Block a user