abot/admin/dashboard/templates/wx_logs.html

{% extends "base.html" %}

{% block title %}微信日志查看{% endblock %}

{% block content %}
<div>
    <el-card class="log-card">
        <div slot="header" class="clearfix">
            <span>日志查看</span>
            <el-radio-group v-model="logType" size="small" style="margin-left: 20px;" @change="loadLogs">
                <el-radio-button label="info">信息日志</el-radio-button>
                <el-radio-button label="error">错误日志</el-radio-button>
                <el-radio-button label="debug">调试日志</el-radio-button>
            </el-radio-group>
            <el-select v-model="logLines" size="small" style="margin-left: 20px;" @change="loadLogs">
                <el-option label="最近100行" :value="100"></el-option>
                <el-option label="最近500行" :value="500"></el-option>
                <el-option label="最近1000行" :value="1000"></el-option>
            </el-select>
            <el-button style="float: right; padding: 3px 0" type="text" @click="loadLogs">刷新</el-button>
        </div>
        
        <div v-loading="loading">
            <div v-if="logContent && logContent.length > 0" class="log-content">
                <pre>{% raw %}{{ logContent.join('') }}{% endraw %}</pre>
            </div>
            <div v-else class="empty-log">
                <el-empty description="暂无日志内容"></el-empty>
            </div>
        </div>
    </el-card>
</div>
{% endblock %}

{% block scripts %}
<script>
    new Vue({
        el: '#app',
        mixins: [baseApp],
        data() {
            return {
                loading: false,
                logType: 'info',
                logLines: 100,
                logContent: [],
                logContentHtml: '', // 新增
                currentView: '9' // 设置当前菜单项
            }
        },
        mounted() {
            this.loadLogs();
        },
        methods: {
            loadLogs() {
                this.loading = true;
                axios.get(`/api/wx_logs?type=${this.logType}&lines=${this.logLines}`)
                    .then(response => {
                        if (response.data.success) {
                            this.logContent = response.data.data.content || [];
                            // 处理为带颜色的HTML
                            this.logContentHtml = this.logContent.map(line => {
                                if (line.includes('ERROR')) {
                                    return `<span style="color: red;">${this.escapeHtml(line)}</span>`;
                                } else if (line.includes('WARNING') || line.includes('WARN')) {
                                    return `<span style="color: orange;">${this.escapeHtml(line)}</span>`;
                                } else if (line.includes('DEBUG')) {
                                    return `<span style="color: #409EFF;">${this.escapeHtml(line)}</span>`;
                                } else if (line.includes('INFO')) {
                                    return `<span style="color: green;">${this.escapeHtml(line)}</span>`;
                                } else {
                                    return `<span>${this.escapeHtml(line)}</span>`;
                                }
                            }).join('');
                        } else {
                            this.$message.error('加载日志失败');
                            this.logContentHtml = '';
                        }
                    })
                    .catch(error => {
                        console.error('加载日志出错:', error);
                        this.$message.error('加载日志出错');
                        this.logContentHtml = '';
                    })
                    .finally(() => {
                        this.loading = false;
                    });
            },
            escapeHtml(text) {
                // 防止XSS
                return text.replace(/[<>&"]/g, function(c) {
                    return {'<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;'}[c];
                });
            }
        }
    });
</script>

<style>
    .log-card {
        margin-bottom: 20px;
    }
    
    .log-content {
        max-height: 700px;
        overflow-y: auto;
        overflow-x: auto;
        background-color: #f5f5f5;
        padding: 10px;
        border-radius: 4px;
    }
    
    .log-content pre {
        margin: 0;
        white-space: pre;
        word-break: normal;
        word-wrap: normal;
        font-family: monospace;
    }
    
    .empty-log {
        padding: 40px 0;
    }
</style>
{% endblock %}