100 lines
3.6 KiB
JavaScript
100 lines
3.6 KiB
JavaScript
|
|
// http_server_management_console/frontend/js/logger.js
|
|
export default {
|
|
data() {
|
|
return {
|
|
logs: [],
|
|
filterType: 'all',
|
|
searchQuery: '',
|
|
logLevels: [
|
|
{ value: 'all', label: '全部' },
|
|
{ value: 'info', label: '信息' },
|
|
{ value: 'success', label: '成功' },
|
|
{ value: 'warning', label: '警告' },
|
|
{ value: 'danger', label: '错误' }
|
|
]
|
|
}
|
|
},
|
|
created() {
|
|
this.loadLogs();
|
|
},
|
|
computed: {
|
|
filteredLogs() {
|
|
let result = this.logs;
|
|
|
|
if (this.filterType !== 'all') {
|
|
result = result.filter(log => log.type === this.filterType);
|
|
}
|
|
|
|
if (this.searchQuery) {
|
|
const query = this.searchQuery.toLowerCase();
|
|
result = result.filter(log =>
|
|
log.message.toLowerCase().includes(query) ||
|
|
log.timestamp.includes(query)
|
|
);
|
|
}
|
|
|
|
return result;
|
|
}
|
|
},
|
|
methods: {
|
|
loadLogs() {
|
|
const savedLogs = localStorage.getItem('serverLogs');
|
|
this.logs = savedLogs ? JSON.parse(savedLogs) : [
|
|
{ timestamp: '2025-06-12 14:40:22', message: '添加了路由配置 /api → http://backend:3000', type: 'success' },
|
|
{ timestamp: '2025-06-12 14:38:15', message: '修改了网站端口 8080 → 8443', type: 'warning' },
|
|
{ timestamp: '2025-06-12 14:35:07', message: '创建了网站配置 example.com', type: 'info' }
|
|
];
|
|
},
|
|
addLog(message, type = 'info') {
|
|
const timestamp = new Date().toISOString().replace('T', ' ').substring(0, 19);
|
|
this.logs.unshift({ timestamp, message, type });
|
|
|
|
if (this.logs.length > 1000) {
|
|
this.logs = this.logs.slice(0, 1000);
|
|
}
|
|
|
|
this.saveLogs();
|
|
},
|
|
clearLogs() {
|
|
this.$confirm('确定要清空所有操作日志吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.logs = [];
|
|
this.saveLogs();
|
|
this.addLog('清空了所有操作日志', 'warning');
|
|
this.$message.success('日志已清空');
|
|
}).catch(() => {
|
|
this.$message.info('已取消清空操作');
|
|
});
|
|
},
|
|
exportLogs() {
|
|
const dataStr = JSON.stringify(this.logs, null, 2);
|
|
const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
|
|
|
|
const exportFileDefaultName = `server-logs-${new Date().toISOString().slice(0,10)}.json`;
|
|
|
|
const linkElement = document.createElement('a');
|
|
linkElement.setAttribute('href', dataUri);
|
|
linkElement.setAttribute('download', exportFileDefaultName);
|
|
linkElement.click();
|
|
|
|
this.addLog('导出了操作日志', 'info');
|
|
},
|
|
saveLogs() {
|
|
localStorage.setItem('serverLogs', JSON.stringify(this.logs));
|
|
},
|
|
getTypeColor(type) {
|
|
const colors = {
|
|
info: 'text-blue-400',
|
|
success: 'text-green-400',
|
|
warning: 'text-yellow-400',
|
|
danger: 'text-red-400'
|
|
};
|
|
return colors[type] || 'text-gray-400';
|
|
}
|
|
}
|
|
}
|