#feature: add ip operation log & sql generator
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<admin-layout
|
||||
:page-title="pageTitle"
|
||||
:is-admin="isAdmin"
|
||||
@menu-change="handleMenuChange"
|
||||
>
|
||||
<!-- 环境管理页面 -->
|
||||
@@ -15,6 +16,12 @@
|
||||
ref="weeklyReport"
|
||||
/>
|
||||
|
||||
<!-- SQL 生成页面 -->
|
||||
<sql-generator
|
||||
v-else-if="currentPage === 'sql-generator'"
|
||||
ref="sqlGenerator"
|
||||
/>
|
||||
|
||||
<!-- JIRA 工时查询页面 -->
|
||||
<jira-worklog
|
||||
v-else-if="currentPage === 'worklog'"
|
||||
@@ -43,15 +50,10 @@
|
||||
<system-settings v-else-if="currentPage === 'settings'" />
|
||||
|
||||
<!-- 操作日志页面 -->
|
||||
<div v-else-if="currentPage === 'logs'" class="bg-white rounded-xl shadow-sm border border-gray-200 p-8">
|
||||
<div class="text-center py-12">
|
||||
<svg class="w-16 h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-2">操作日志</h3>
|
||||
<p class="text-gray-500">此功能正在开发中...</p>
|
||||
</div>
|
||||
</div>
|
||||
<operation-logs v-else-if="currentPage === 'logs'" :is-admin="isAdmin" :current-ip="currentIp" />
|
||||
|
||||
<!-- IP 用户映射页面 -->
|
||||
<ip-user-mappings v-else-if="currentPage === 'ip-mappings'" />
|
||||
</admin-layout>
|
||||
</template>
|
||||
|
||||
@@ -59,11 +61,14 @@
|
||||
import AdminLayout from './AdminLayout.vue';
|
||||
import EnvManagement from '../env/EnvManagement.vue';
|
||||
import WeeklyReport from '../jira/WeeklyReport.vue';
|
||||
import SqlGenerator from '../tools/SqlGenerator.vue';
|
||||
import JiraWorklog from '../jira/JiraWorklog.vue';
|
||||
import MessageSync from '../message-sync/MessageSync.vue';
|
||||
import EventConsumerSync from '../message-sync/EventConsumerSync.vue';
|
||||
import MessageDispatch from '../message-sync/MessageDispatch.vue';
|
||||
import SystemSettings from './SystemSettings.vue';
|
||||
import OperationLogs from './OperationLogs.vue';
|
||||
import IpUserMappings from './IpUserMappings.vue';
|
||||
|
||||
export default {
|
||||
name: 'AdminDashboard',
|
||||
@@ -71,38 +76,62 @@ export default {
|
||||
AdminLayout,
|
||||
EnvManagement,
|
||||
WeeklyReport,
|
||||
SqlGenerator,
|
||||
JiraWorklog,
|
||||
MessageSync,
|
||||
EventConsumerSync,
|
||||
MessageDispatch,
|
||||
SystemSettings
|
||||
SystemSettings,
|
||||
OperationLogs,
|
||||
IpUserMappings
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentPage: 'env',
|
||||
pageTitle: '环境配置管理'
|
||||
pageTitle: '环境配置管理',
|
||||
isAdmin: false,
|
||||
currentIp: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('AdminDashboard mounted');
|
||||
|
||||
// 根据 URL 路径设置初始页面
|
||||
async mounted() {
|
||||
await this.loadAdminMeta();
|
||||
this.setCurrentPageFromPath();
|
||||
},
|
||||
methods: {
|
||||
async loadAdminMeta() {
|
||||
try {
|
||||
const response = await fetch('/api/admin/meta');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
this.isAdmin = Boolean(data.data.is_admin);
|
||||
this.currentIp = data.data.ip || '';
|
||||
}
|
||||
} catch (error) {
|
||||
this.isAdmin = false;
|
||||
this.currentIp = '';
|
||||
}
|
||||
},
|
||||
handleMenuChange(menu) {
|
||||
if (menu === 'ip-mappings' && !this.isAdmin) {
|
||||
this.redirectToDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
this.currentPage = menu;
|
||||
|
||||
// 更新页面标题
|
||||
const titles = {
|
||||
'env': '环境配置管理',
|
||||
'weekly-report': '生成周报',
|
||||
'sql-generator': '生成SQL',
|
||||
'worklog': 'JIRA 工时查询',
|
||||
'message-sync': '消息同步',
|
||||
'event-consumer-sync': '事件消费者同步对比',
|
||||
'message-dispatch': '消息分发异常查询',
|
||||
'settings': '系统设置',
|
||||
'logs': '操作日志'
|
||||
'logs': '操作日志',
|
||||
'ip-mappings': 'IP 用户映射'
|
||||
};
|
||||
|
||||
this.pageTitle = titles[menu] || '环境配置管理';
|
||||
@@ -114,6 +143,8 @@ export default {
|
||||
|
||||
if (path === '/') {
|
||||
page = 'env';
|
||||
} else if (path === '/sql-generator') {
|
||||
page = 'sql-generator';
|
||||
} else if (path === '/weekly-report') {
|
||||
page = 'weekly-report';
|
||||
} else if (path === '/worklog') {
|
||||
@@ -128,10 +159,25 @@ export default {
|
||||
page = 'settings';
|
||||
} else if (path === '/logs') {
|
||||
page = 'logs';
|
||||
} else if (path === '/ip-mappings') {
|
||||
page = 'ip-mappings';
|
||||
}
|
||||
|
||||
if (page === 'ip-mappings' && !this.isAdmin) {
|
||||
this.redirectToDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
this.currentPage = page;
|
||||
this.handleMenuChange(page);
|
||||
},
|
||||
|
||||
redirectToDefault() {
|
||||
this.currentPage = 'env';
|
||||
this.pageTitle = '环境配置管理';
|
||||
if (window.location.pathname !== '/') {
|
||||
window.history.replaceState({}, '', '/');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -44,6 +44,30 @@
|
||||
环境配置管理
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
@click.prevent="setActiveMenu('sql-generator')"
|
||||
:class="[
|
||||
'group flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors duration-200',
|
||||
activeMenu === 'sql-generator'
|
||||
? 'bg-blue-50 text-blue-700 border-r-2 border-blue-700'
|
||||
: 'text-gray-700 hover:bg-gray-50 hover:text-gray-900'
|
||||
]"
|
||||
>
|
||||
<svg
|
||||
:class="[
|
||||
'mr-3 h-5 w-5 transition-colors duration-200',
|
||||
activeMenu === 'sql-generator' ? 'text-blue-500' : 'text-gray-400 group-hover:text-gray-500'
|
||||
]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
生成SQL
|
||||
</a>
|
||||
|
||||
<!-- JIRA 相关菜单项 -->
|
||||
|
||||
<a
|
||||
@@ -214,6 +238,31 @@
|
||||
</svg>
|
||||
操作日志
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
@click.prevent="setActiveMenu('ip-mappings')"
|
||||
v-if="isAdmin"
|
||||
:class="[
|
||||
'group flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors duration-200',
|
||||
activeMenu === 'ip-mappings'
|
||||
? 'bg-blue-50 text-blue-700 border-r-2 border-blue-700'
|
||||
: 'text-gray-700 hover:bg-gray-50 hover:text-gray-900'
|
||||
]"
|
||||
>
|
||||
<svg
|
||||
:class="[
|
||||
'mr-3 h-5 w-5 transition-colors duration-200',
|
||||
activeMenu === 'ip-mappings' ? 'text-blue-500' : 'text-gray-400 group-hover:text-gray-500'
|
||||
]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
||||
</svg>
|
||||
IP 用户映射
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 底部信息 -->
|
||||
@@ -244,6 +293,10 @@ export default {
|
||||
pageTitle: {
|
||||
type: String,
|
||||
default: '环境配置管理'
|
||||
},
|
||||
isAdmin: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -251,6 +304,11 @@ export default {
|
||||
activeMenu: 'env'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isAdmin() {
|
||||
this.setActiveMenuFromPath();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 根据 URL 路径设置初始菜单
|
||||
this.setActiveMenuFromPath();
|
||||
@@ -263,6 +321,10 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
setActiveMenu(menu) {
|
||||
if (menu === 'ip-mappings' && !this.isAdmin) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.activeMenu = menu;
|
||||
// 更新 URL 路径
|
||||
const path = menu === 'env' ? '/' : `/${menu}`;
|
||||
@@ -276,6 +338,8 @@ export default {
|
||||
|
||||
if (path === '/') {
|
||||
menu = 'env';
|
||||
} else if (path === '/sql-generator') {
|
||||
menu = 'sql-generator';
|
||||
} else if (path === '/weekly-report') {
|
||||
menu = 'weekly-report';
|
||||
} else if (path === '/worklog') {
|
||||
@@ -290,6 +354,12 @@ export default {
|
||||
menu = 'settings';
|
||||
} else if (path === '/logs') {
|
||||
menu = 'logs';
|
||||
} else if (path === '/ip-mappings') {
|
||||
menu = 'ip-mappings';
|
||||
}
|
||||
|
||||
if (menu === 'ip-mappings' && !this.isAdmin) {
|
||||
menu = 'env';
|
||||
}
|
||||
|
||||
this.activeMenu = menu;
|
||||
@@ -314,9 +384,5 @@ export default {
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.admin-layout .fixed.w-64.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
342
resources/js/components/admin/IpUserMappings.vue
Normal file
342
resources/js/components/admin/IpUserMappings.vue
Normal file
@@ -0,0 +1,342 @@
|
||||
<template>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8">
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h3 class="text-lg font-medium text-gray-900">IP 用户映射</h3>
|
||||
<p class="text-gray-500 mt-1">维护 IP 与用户标识的对应关系。</p>
|
||||
</div>
|
||||
<button
|
||||
class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 disabled:opacity-50"
|
||||
:disabled="loading"
|
||||
@click="loadMappings"
|
||||
>
|
||||
{{ loading ? '加载中...' : '刷新' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<input
|
||||
v-model="newMapping.ip_address"
|
||||
type="text"
|
||||
class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="IP 地址"
|
||||
/>
|
||||
<input
|
||||
v-model="newMapping.user_name"
|
||||
type="text"
|
||||
class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="用户标识"
|
||||
/>
|
||||
<input
|
||||
v-model="newMapping.remark"
|
||||
type="text"
|
||||
class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="备注（可选）"
|
||||
/>
|
||||
<button
|
||||
class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
|
||||
:disabled="saving"
|
||||
@click="createMapping"
|
||||
>
|
||||
{{ saving ? '保存中...' : '新增映射' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="unmappedIps.length"
|
||||
class="mt-6 border border-amber-200 bg-amber-50 rounded-lg p-4"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-sm font-medium text-amber-700">待匹配 IP（来自日志）</div>
|
||||
<div class="text-xs text-amber-600">共 {{ unmappedIps.length }} 个</div>
|
||||
</div>
|
||||
<div class="mt-3 grid grid-cols-1 md:grid-cols-2 gap-2 max-h-64 overflow-auto">
|
||||
<div
|
||||
v-for="item in unmappedIps"
|
||||
:key="item.ip_address"
|
||||
class="flex items-center justify-between gap-3 bg-white border border-amber-100 rounded px-3 py-2 text-sm"
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-mono text-gray-800">{{ item.ip_address }}</span>
|
||||
<span class="text-xs text-gray-500">
|
||||
{{ item.logs_count }} 次日志 · 最近 {{ formatTime(item.last_seen_at) }}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
class="px-2 py-1 text-xs text-amber-700 bg-amber-100 rounded hover:bg-amber-200"
|
||||
@click="fillIp(item.ip_address)"
|
||||
>
|
||||
填入
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="message" class="mt-4 text-sm text-green-700 bg-green-50 border border-green-200 rounded-md px-3 py-2">
|
||||
{{ message }}
|
||||
</div>
|
||||
<div v-if="error" class="mt-4 text-sm text-red-700 bg-red-50 border border-red-200 rounded-md px-3 py-2">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="mt-4 text-sm text-gray-400">加载中...</div>
|
||||
<div v-else class="mt-4 overflow-x-auto border border-gray-200 rounded-lg">
|
||||
<table class="min-w-full text-sm">
|
||||
<thead class="bg-gray-50 text-gray-600">
|
||||
<tr>
|
||||
<th class="text-left px-4 py-3 font-medium">IP 地址</th>
|
||||
<th class="text-left px-4 py-3 font-medium">用户标识</th>
|
||||
<th class="text-left px-4 py-3 font-medium">备注</th>
|
||||
<th class="text-left px-4 py-3 font-medium">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
<tr v-for="mapping in mappings" :key="mapping.id" class="text-gray-700">
|
||||
<td class="px-4 py-3 font-mono">
|
||||
<input
|
||||
v-model="mapping.ip_address"
|
||||
type="text"
|
||||
class="w-full px-2 py-1 border border-gray-200 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<input
|
||||
v-model="mapping.user_name"
|
||||
type="text"
|
||||
class="w-full px-2 py-1 border border-gray-200 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<input
|
||||
v-model="mapping.remark"
|
||||
type="text"
|
||||
class="w-full px-2 py-1 border border-gray-200 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-3 whitespace-nowrap">
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
class="px-3 py-1 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
|
||||
:disabled="mapping._saving"
|
||||
@click="updateMapping(mapping)"
|
||||
>
|
||||
{{ mapping._saving ? '保存中...' : '保存' }}
|
||||
</button>
|
||||
<button
|
||||
class="px-3 py-1 bg-red-50 text-red-700 rounded-md hover:bg-red-100 disabled:opacity-50"
|
||||
:disabled="mapping._deleting"
|
||||
@click="deleteMapping(mapping)"
|
||||
>
|
||||
{{ mapping._deleting ? '删除中...' : '删除' }}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="mappings.length === 0">
|
||||
<td colspan="4" class="px-4 py-6 text-center text-gray-400">暂无映射</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'IpUserMappings',
|
||||
data() {
|
||||
return {
|
||||
mappings: [],
|
||||
unmappedIps: [],
|
||||
loading: false,
|
||||
saving: false,
|
||||
error: '',
|
||||
message: '',
|
||||
newMapping: {
|
||||
ip_address: '',
|
||||
user_name: '',
|
||||
remark: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.loadMappings();
|
||||
},
|
||||
methods: {
|
||||
formatTime(value) {
|
||||
if (!value) {
|
||||
return '-';
|
||||
}
|
||||
return value.replace('T', ' ').replace('Z', '');
|
||||
},
|
||||
async parseJsonResponse(response) {
|
||||
const contentType = response.headers.get('content-type') || '';
|
||||
if (!contentType.includes('application/json')) {
|
||||
const text = await response.text();
|
||||
throw new Error(text || '响应不是JSON');
|
||||
}
|
||||
return response.json();
|
||||
},
|
||||
getErrorMessage(data, fallback) {
|
||||
if (!data) {
|
||||
return fallback;
|
||||
}
|
||||
if (data.message) {
|
||||
return data.message;
|
||||
}
|
||||
if (data.errors && typeof data.errors === 'object') {
|
||||
const firstKey = Object.keys(data.errors)[0];
|
||||
const firstError = firstKey ? data.errors[firstKey]?.[0] : '';
|
||||
if (firstError) {
|
||||
return firstError;
|
||||
}
|
||||
}
|
||||
return fallback;
|
||||
},
|
||||
fillIp(ip) {
|
||||
this.newMapping.ip_address = ip;
|
||||
},
|
||||
async loadMappings() {
|
||||
this.loading = true;
|
||||
this.error = '';
|
||||
this.message = '';
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/admin/ip-user-mappings', {
|
||||
headers: {
|
||||
Accept: 'application/json'
|
||||
}
|
||||
});
|
||||
const data = await this.parseJsonResponse(response);
|
||||
|
||||
if (!response.ok) {
|
||||
this.error = this.getErrorMessage(data, '加载失败');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!data.success) {
|
||||
this.error = data.message || '加载失败';
|
||||
return;
|
||||
}
|
||||
|
||||
this.mappings = (data.data.mappings || []).map((item) => ({
|
||||
...item,
|
||||
_saving: false,
|
||||
_deleting: false
|
||||
}));
|
||||
this.unmappedIps = data.data.unmapped_ips || [];
|
||||
} catch (error) {
|
||||
this.error = error.message;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
async createMapping() {
|
||||
this.saving = true;
|
||||
this.error = '';
|
||||
this.message = '';
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/admin/ip-user-mappings', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Accept: 'application/json'
|
||||
},
|
||||
body: JSON.stringify(this.newMapping)
|
||||
});
|
||||
|
||||
const data = await this.parseJsonResponse(response);
|
||||
|
||||
if (!response.ok) {
|
||||
this.error = this.getErrorMessage(data, '创建失败');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!data.success) {
|
||||
this.error = data.message || '创建失败';
|
||||
return;
|
||||
}
|
||||
|
||||
this.message = '已新增映射';
|
||||
this.newMapping = { ip_address: '', user_name: '', remark: '' };
|
||||
await this.loadMappings();
|
||||
} catch (error) {
|
||||
this.error = error.message;
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
},
|
||||
async updateMapping(mapping) {
|
||||
mapping._saving = true;
|
||||
this.error = '';
|
||||
this.message = '';
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/admin/ip-user-mappings/${mapping.id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Accept: 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
ip_address: mapping.ip_address,
|
||||
user_name: mapping.user_name,
|
||||
remark: mapping.remark
|
||||
})
|
||||
});
|
||||
|
||||
const data = await this.parseJsonResponse(response);
|
||||
|
||||
if (!response.ok) {
|
||||
this.error = this.getErrorMessage(data, '更新失败');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!data.success) {
|
||||
this.error = data.message || '更新失败';
|
||||
return;
|
||||
}
|
||||
|
||||
this.message = '已更新映射';
|
||||
} catch (error) {
|
||||
this.error = error.message;
|
||||
} finally {
|
||||
mapping._saving = false;
|
||||
}
|
||||
},
|
||||
async deleteMapping(mapping) {
|
||||
mapping._deleting = true;
|
||||
this.error = '';
|
||||
this.message = '';
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/admin/ip-user-mappings/${mapping.id}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
Accept: 'application/json'
|
||||
}
|
||||
});
|
||||
const data = await this.parseJsonResponse(response);
|
||||
|
||||
if (!response.ok) {
|
||||
this.error = this.getErrorMessage(data, '删除失败');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!data.success) {
|
||||
this.error = data.message || '删除失败';
|
||||
return;
|
||||
}
|
||||
|
||||
this.message = '已删除映射';
|
||||
await this.loadMappings();
|
||||
} catch (error) {
|
||||
this.error = error.message;
|
||||
} finally {
|
||||
mapping._deleting = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
216
resources/js/components/admin/OperationLogs.vue
Normal file
216
resources/js/components/admin/OperationLogs.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8">
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h3 class="text-lg font-medium text-gray-900">操作日志</h3>
|
||||
<p class="text-gray-500 mt-1">记录对系统产生影响的请求（POST/PUT/PATCH/DELETE）。</p>
|
||||
<p v-if="currentIp" class="text-xs text-gray-400 mt-1">当前 IP: {{ currentIp }}</p>
|
||||
</div>
|
||||
<button
|
||||
class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 disabled:opacity-50"
|
||||
:disabled="logsLoading"
|
||||
@click="loadLogs"
|
||||
>
|
||||
{{ logsLoading ? '加载中...' : '刷新' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex flex-wrap items-center gap-3">
|
||||
<input
|
||||
v-model="filters.q"
|
||||
type="text"
|
||||
class="w-full md:w-64 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="搜索 IP / 用户 / 路径"
|
||||
/>
|
||||
<select
|
||||
v-model="filters.method"
|
||||
class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">全部方法</option>
|
||||
<option value="POST">POST</option>
|
||||
<option value="PUT">PUT</option>
|
||||
<option value="PATCH">PATCH</option>
|
||||
<option value="DELETE">DELETE</option>
|
||||
</select>
|
||||
<select
|
||||
v-model.number="logsPerPage"
|
||||
class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option :value="20">20条/页</option>
|
||||
<option :value="50">50条/页</option>
|
||||
<option :value="100">100条/页</option>
|
||||
</select>
|
||||
<button
|
||||
class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
|
||||
:disabled="logsLoading"
|
||||
@click="applyFilters"
|
||||
>
|
||||
查询
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="logsError" class="mt-4 text-sm text-red-700 bg-red-50 border border-red-200 rounded-md px-3 py-2">
|
||||
{{ logsError }}
|
||||
</div>
|
||||
|
||||
<div v-if="logsLoading" class="mt-4 text-sm text-gray-400">加载中...</div>
|
||||
<div v-else class="mt-4">
|
||||
<div class="overflow-x-auto border border-gray-200 rounded-lg">
|
||||
<table class="min-w-full text-sm">
|
||||
<thead class="bg-gray-50 text-gray-600">
|
||||
<tr>
|
||||
<th class="text-left px-4 py-3 font-medium">时间</th>
|
||||
<th v-if="isAdmin" class="text-left px-4 py-3 font-medium">用户</th>
|
||||
<th class="text-left px-4 py-3 font-medium">IP</th>
|
||||
<th class="text-left px-4 py-3 font-medium">方法</th>
|
||||
<th class="text-left px-4 py-3 font-medium">路径</th>
|
||||
<th class="text-left px-4 py-3 font-medium">状态</th>
|
||||
<th class="text-left px-4 py-3 font-medium">请求数据</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
<tr v-for="log in logs" :key="log.id" class="text-gray-700">
|
||||
<td class="px-4 py-3 whitespace-nowrap">{{ formatTime(log.created_at) }}</td>
|
||||
<td v-if="isAdmin" class="px-4 py-3 whitespace-nowrap font-mono">{{ log.user_label || '-' }}</td>
|
||||
<td class="px-4 py-3 whitespace-nowrap font-mono">{{ log.ip_address }}</td>
|
||||
<td class="px-4 py-3 whitespace-nowrap font-mono">{{ log.method }}</td>
|
||||
<td class="px-4 py-3 whitespace-nowrap">{{ log.path }}</td>
|
||||
<td class="px-4 py-3 whitespace-nowrap">{{ log.status_code }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<details v-if="hasPayload(log.request_payload)">
|
||||
<summary class="cursor-pointer text-blue-600">查看</summary>
|
||||
<pre class="mt-2 text-xs bg-gray-50 p-2 rounded whitespace-pre-wrap">{{ formatPayload(log.request_payload) }}</pre>
|
||||
</details>
|
||||
<span v-else>-</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="logs.length === 0">
|
||||
<td :colspan="logColumnCount" class="px-4 py-6 text-center text-gray-400">暂无记录</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex items-center justify-between text-sm text-gray-500">
|
||||
<div>共 {{ logsTotal }} 条</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
class="px-3 py-1 bg-gray-100 rounded-md hover:bg-gray-200 disabled:opacity-50"
|
||||
:disabled="logsPage <= 1"
|
||||
@click="changePage(logsPage - 1)"
|
||||
>
|
||||
上一页
|
||||
</button>
|
||||
<div>第 {{ logsPage }} / {{ logsLastPage || 1 }} 页</div>
|
||||
<button
|
||||
class="px-3 py-1 bg-gray-100 rounded-md hover:bg-gray-200 disabled:opacity-50"
|
||||
:disabled="logsPage >= logsLastPage"
|
||||
@click="changePage(logsPage + 1)"
|
||||
>
|
||||
下一页
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'OperationLogs',
|
||||
props: {
|
||||
isAdmin: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
currentIp: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
logs: [],
|
||||
logsLoading: false,
|
||||
logsError: '',
|
||||
logsPage: 1,
|
||||
logsPerPage: 50,
|
||||
logsTotal: 0,
|
||||
logsLastPage: 1,
|
||||
filters: {
|
||||
q: '',
|
||||
method: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
logColumnCount() {
|
||||
return this.isAdmin ? 7 : 6;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadLogs();
|
||||
},
|
||||
methods: {
|
||||
formatTime(value) {
|
||||
if (!value) {
|
||||
return '-';
|
||||
}
|
||||
return value.replace('T', ' ').replace('Z', '');
|
||||
},
|
||||
hasPayload(payload) {
|
||||
return payload && Object.keys(payload).length > 0;
|
||||
},
|
||||
formatPayload(payload) {
|
||||
return JSON.stringify(payload, null, 2);
|
||||
},
|
||||
buildLogQuery() {
|
||||
const params = new URLSearchParams();
|
||||
params.set('page', String(this.logsPage));
|
||||
params.set('per_page', String(this.logsPerPage));
|
||||
if (this.filters.q) {
|
||||
params.set('q', this.filters.q);
|
||||
}
|
||||
if (this.filters.method) {
|
||||
params.set('method', this.filters.method);
|
||||
}
|
||||
return params.toString();
|
||||
},
|
||||
async loadLogs() {
|
||||
this.logsLoading = true;
|
||||
this.logsError = '';
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/operation-logs?${this.buildLogQuery()}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (!data.success) {
|
||||
this.logsError = data.message || '加载失败';
|
||||
return;
|
||||
}
|
||||
|
||||
const pagination = data.data.pagination || {};
|
||||
this.logs = data.data.logs || [];
|
||||
this.logsTotal = pagination.total || 0;
|
||||
this.logsLastPage = pagination.last_page || 1;
|
||||
this.logsPage = pagination.current_page || 1;
|
||||
} catch (error) {
|
||||
this.logsError = error.message;
|
||||
} finally {
|
||||
this.logsLoading = false;
|
||||
}
|
||||
},
|
||||
applyFilters() {
|
||||
this.logsPage = 1;
|
||||
this.loadLogs();
|
||||
},
|
||||
changePage(page) {
|
||||
this.logsPage = page;
|
||||
this.loadLogs();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user