<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON数据查看器 | 优化修复版</title>
    <style>
        /* 更新背景色为浅蓝色 */
        :root {
            --bg-color: #e6f7ff; /* 浅蓝色背景 */
            --panel-bg: #ffffff;
            --border-color: #b3e0ff;
            --text-color: #003366;
            --key-color: #d73a49;
            --string-color: #0d47a1;
            --number-color: #e36209;
            --boolean-color: #0d6efd;
            --null-color: #6f42c1;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            padding: 20px;
            line-height: 1.5;
            background-image: radial-gradient(#b8e1ff 1px, transparent 1px);
            background-size: 20px 20px;
        }

        .container {
            max-width: 98%;
            margin: 0 auto;
        }

        /* 更新Header样式 */
        .header {
            text-align: center;
            margin-bottom: 12px;          /* 原25px → 减半 */
            padding: 15px 20px;           /* 原25px → 减少10px */
            background: linear-gradient(135deg, #1a2980, #26d0ce);
            color: white;
            border-radius: 8px;           /* 原10px → 微调更协调 */
            box-shadow: 0 4px 12px rgba(0, 50, 93, 0.2); /* 阴影微调 */
            position: relative;
            overflow: hidden;
        }
 
        .header::before {
            content: "";
            position: absolute;
            top: -5px;                   /* 原-10px → 缩小模糊范围 */
            left: -5px;
            right: -5px;
            bottom: -5px;
            background: inherit;
            filter: blur(12px);           /* 原20px → 减少模糊强度 */
            z-index: -1;
            opacity: 0.6;                /* 原0.7 → 微调透明度 */
        }
 
        .header h1 {
            font-size: 1.6rem;            /* 原2.2rem → 减少30% */
            margin: 0 0 5px;              /* 原10px → 减半 */
            font-weight: 600;
            text-shadow: 0 1px 3px rgba(0,0,0,0.2); /* 阴影微调 */
            line-height: 1.3;             /* 新增行高控制 */
        }

        .json-display {
            background-color: var(--panel-bg);
            border-radius: 8px;
            padding: 20px;
            overflow-x: auto;
            box-shadow: 0 8px 20px rgba(0, 66, 117, 0.1);
            border: 1px solid var(--border-color);
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
            font-size: 14px;
            line-height: 1.4;
            margin-top: 10px;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        .json-line {
            display: block;
            margin: 4px 0;
        }

        .json-key {
            color: var(--key-color);
            font-weight: bold;
        }

        .json-string { color: var(--string-color); }
        .json-number { color: var(--number-color); }
        .json-boolean { color: var(--boolean-color); }
        .json-null { color: var(--null-color); }

        .json-indent {
            padding-left: 22px;
        }

        .json-brace {
            color: #666;
            font-weight: bold;
        }
        
        .json-close-container {
            padding-left: 0;
            display: inline;
        }

        .long-string-indicator {
            background-color: #fff8e1;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 11px;
            color: #e36209;
            display: inline-block;
            margin-left: 6px;
        }

        .long-string-toggle {
            color: #032f62;
            font-size: 11px;
            margin-left: 8px;
            cursor: pointer;
            user-select: none;
            font-weight: bold;
        }

        .long-string-container {
            padding: 8px 12px;
            background-color: #f0f8ff;
            border-left: 3px solid #e36209;
            margin: 6px 0;
            border-radius: 0 6px 6px 0;
            position: relative;
            overflow: hidden;
            display: inline-block;
            vertical-align: top;
        }
        
        .long-string-content {
            padding-top: 6px;
            padding-left: 15px;
        }

        .long-string-container.collapsed .long-string-content {
            display: none;
        }

        .long-string-container::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 20px;
            background: linear-gradient(to bottom, rgba(240, 248, 255, 0.3), #f0f8ff);
            opacity: 1;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }

        .long-string-container.collapsed::after {
            opacity: 1;
        }

        .long-string-container:not(.collapsed)::after {
            opacity: 0;
        }

        .indicator-wrapper {
            display: inline-flex;
            align-items: center;
        }
        
        .inline-value {
            display: inline;
        }
        
        .json-comma {
            display: inline;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>百度任务数据查看器 | 优化版</h1>
            <p>高效、直观的JSON数据可视化工具</p>
        </div>

        <div class="json-display" id="jsonContainer"></div>
    </div>
    
    {{ json_data|json_script:"external-json-data" }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 测试数据 - 包括各种数据类型和嵌套结构
            const jsonData = JSON.parse(document.getElementById('external-json-data').textContent);

            // 渲染JSON数据
            renderJson(jsonData);

            function renderJson(data) {
                const container = document.getElementById('jsonContainer');
                container.innerHTML = '';
                const formattedJson = formatJson(data, 0);
                container.appendChild(formattedJson);
            }

            function formatJson(data, depth) {
                const container = document.createElement('div');
                container.style.position = 'relative';

                const type = typeof data;
                const isArray = Array.isArray(data);

                if (data === null) {
                    const line = document.createElement('span');
                    line.textContent = 'null';
                    line.classList.add('json-null');
                    container.appendChild(line);
                    return container;
                }

                if (type === 'string') {
                    // 特殊处理长字符串（尝试自动解析为JSON）
                    if (data.length > 80 && (data.includes('{') || data.includes('['))) {
                        return createLongStringElement(data, depth);
                    }

                    const line = document.createElement('span');
                    line.textContent = `"${data}"`;
                    line.classList.add('json-string');
                    container.appendChild(line);
                    return container;
                }

                if (type === 'number') {
                    const line = document.createElement('span');
                    line.textContent = data;
                    line.classList.add('json-number');
                    container.appendChild(line);
                    return container;
                }

                if (type === 'boolean') {
                    const line = document.createElement('span');
                    line.textContent = data ? 'true' : 'false';
                    line.classList.add('json-boolean');
                    container.appendChild(line);
                    return container;
                }

                if (type === 'object') {
                    // 优化：处理空数组和空对象
                    const isEmptyArray = isArray && data.length === 0;
                    const isEmptyObject = !isArray && Object.keys(data).length === 0;
                    
                    if (isEmptyArray || isEmptyObject) {
                        const span = document.createElement('span');
                        span.textContent = isEmptyArray ? '[]' : '{}';
                        span.classList.add(isEmptyArray ? 'empty-array' : 'empty-object');
                        return span;
                    }

                    // 开括号
                    const openBrace = document.createElement('span');
                    openBrace.textContent = isArray ? '[' : '{';
                    openBrace.classList.add('json-brace');
                    container.appendChild(openBrace);

                    // 递归处理对象/数组的键值对
                    const entries = isArray ? data : Object.entries(data);
                    let count = 0;
                    const total = entries.length;

                    for (let i = 0; i < entries.length; i++) {
                        const key = isArray ? i : entries[i][0];
                        const value = isArray ? entries[i] : entries[i][1];
                        const line = document.createElement('div');
                        line.classList.add('json-line', 'json-indent');

                        if (!isArray) {
                            const keyElement = document.createElement('span');
                            keyElement.textContent = `"${key}": `;
                            keyElement.classList.add('json-key');
                            line.appendChild(keyElement);
                        }

                        // 值处理
                        const valueContainer = formatJson(value, depth + 1);
                        // 修复: 确保值容器内联显示
                        valueContainer.classList.add('inline-value');
                        line.appendChild(valueContainer);

                        // 添加逗号（最后一个元素不加）
                        if (i < total - 1) {
                            const comma = document.createElement('span');
                            comma.textContent = ',';
                            comma.classList.add('json-comma');
                            line.appendChild(comma);
                        }

                        container.appendChild(line);
                    }

                    // 闭括号 - 固定在同一行
                    const closeContainer = document.createElement('div');
                    closeContainer.classList.add('json-line', 'json-close-container');
                    
                    const closeBrace = document.createElement('span');
                    closeBrace.textContent = isArray ? ']' : '}';
                    closeBrace.classList.add('json-brace');
                    closeContainer.appendChild(closeBrace);
                    
                    container.appendChild(closeContainer);
                }

                return container;
            }

            /******************************************************
             * 自动解析JSON数据的核心功能 - 保持不变
             ******************************************************/
            function createLongStringElement(value, depth) {
                const container = document.createElement('div');
                container.classList.add('long-string-container');

                // 创建指示器包装器
                const wrapper = document.createElement('div');
                wrapper.classList.add('indicator-wrapper');

                const quoteSpan = document.createElement('span');
                {#quoteSpan.textContent = '"';#}
                quoteSpan.classList.add('json-string');
                wrapper.appendChild(quoteSpan);

                // 添加解析指示器
                {#const indicator = document.createElement('span');#}
                {#indicator.textContent = '已解析为JSON';#}
                {#indicator.classList.add('long-string-indicator');#}
                {#wrapper.appendChild(indicator);#}

                // 添加折叠控制
                const toggle = document.createElement('span');
                toggle.textContent = '[折叠]';
                toggle.classList.add('long-string-toggle');
                
                // 初始为非折叠状态
                let isCollapsed = false;

                toggle.addEventListener('click', function(e) {
                    isCollapsed = !isCollapsed;
                    toggle.textContent = isCollapsed ? '[展开]' : '[折叠]';
                    
                    // 切换折叠状态类
                    container.classList.toggle('collapsed', isCollapsed);
                    
                    e.stopPropagation();
                });
                
                wrapper.appendChild(toggle);
                container.appendChild(wrapper);

                // 尝试解析长字符串为JSON对象
                try {
                    const parsed = JSON.parse(value);
                    const contentContainer = document.createElement('div');
                    contentContainer.classList.add('long-string-content');
                    
                    const textSpan = document.createElement('div');
                    textSpan.appendChild(formatJson(parsed, depth));
                    contentContainer.appendChild(textSpan);
                    
                    container.appendChild(contentContainer);

                    return container;
                } catch (e) {
                    // 解析失败，作为普通字符串显示
                    const contentContainer = document.createElement('div');
                    contentContainer.classList.add('long-string-content');
                    
                    const text = document.createElement('span');
                    text.textContent = value;
                    text.classList.add('json-string');
                    contentContainer.appendChild(text);
                    
                    container.appendChild(contentContainer);
                    return container;
                }
            }
        });
    </script>
</body>
</html>