343 lines
10 KiB
Vue
343 lines
10 KiB
Vue
<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>
|