bczhc · February 6, 2026 10:01
diff --git a/a.html b/a.html
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
    <meta charset="UTF-8">
    <title>LSHW 硬件信息查看器</title>
    <style>
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; padding: 20px; background: #f4f4f9; }
        .container { max-width: 1000px; margin: auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        h1 { color: #333; border-bottom: 2px solid #eee; padding-bottom: 10px; }
        .file-input { margin-bottom: 20px; padding: 10px; border: 2px dashed #ccc; width: 100%; box-sizing: border-box; text-align: center; }
        
        /* 树形结构样式 */
        details { margin-left: 20px; border-left: 1px solid #ddd; padding-left: 10px; }
        summary { cursor: pointer; padding: 5px; font-weight: bold; color: #0056b3; outline: none; }
        summary:hover { background-color: #eef; }
        
        .device-info { font-size: 0.9em; color: #666; margin-bottom: 5px; }
        .attribute { margin-left: 20px; font-family: monospace; font-size: 0.85em; background: #f9f9f9; padding: 2px 5px; border-radius: 3px; }
        .class-tag { background: #e1f5fe; color: #01579b; padding: 2px 6px; border-radius: 4px; font-size: 0.8em; margin-right: 8px; }
        .description { font-style: italic; color: #333; }
    </style>
 </head>
 <body>

 <div class="container">
    <h1>LSHW 硬件树查看器</h1>
    <div class="file-input">
        <p>选择您的 <code>a.json</code> 文件开始查看</p>
        <input type="file" id="fileInput" accept=".json">
    </div>
    <div id="treeContainer"></div>
 </div>

 <script>
    document.getElementById('fileInput').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = function(e) {
            try {
                const data = JSON.parse(e.target.result);
                const container = document.getElementById('treeContainer');
                container.innerHTML = ''; // 清空旧内容
                container.appendChild(renderNode(data));
            } catch (err) {
                alert('解析 JSON 失败: ' + err.message);
            }
        };
        reader.readAsText(file);
    });

    /**
     * 递归渲染硬件节点
     */
    function renderNode(node) {
        const details = document.createElement('details');
        const summary = document.createElement('summary');
        
        // 节点标题：显示类别和描述
        const className = node.class || 'unknown';
        const description = node.description || node.product || node.id || 'Device';
        summary.innerHTML = `<span class="class-tag">${className}</span><span class="description">${description}</span>`;
        details.appendChild(summary);

        // 渲染当前节点的详细属性（非 children 属性）
        const infoDiv = document.createElement('div');
        infoDiv.className = 'device-info';
        
        for (let key in node) {
            if (key !== 'children' && typeof node[key] !== 'object') {
                const p = document.createElement('div');
                p.className = 'attribute';
                p.innerHTML = `<strong>${key}:</strong> ${node[key]}`;
                infoDiv.appendChild(p);
            }
        }
        details.appendChild(infoDiv);

        // 递归处理子节点
        if (node.children && Array.isArray(node.children)) {
            node.children.forEach(child => {
                details.appendChild(renderNode(child));
            });
        }

        return details;
    }
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<meta charset="UTF-8">
	<title>LSHW 硬件信息查看器</title>
	<style>
	body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; padding: 20px; background: #f4f4f9; }
	.container { max-width: 1000px; margin: auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
	h1 { color: #333; border-bottom: 2px solid #eee; padding-bottom: 10px; }
	.file-input { margin-bottom: 20px; padding: 10px; border: 2px dashed #ccc; width: 100%; box-sizing: border-box; text-align: center; }

	/* 树形结构样式 */
	details { margin-left: 20px; border-left: 1px solid #ddd; padding-left: 10px; }
	summary { cursor: pointer; padding: 5px; font-weight: bold; color: #0056b3; outline: none; }
	summary:hover { background-color: #eef; }

	.device-info { font-size: 0.9em; color: #666; margin-bottom: 5px; }
	.attribute { margin-left: 20px; font-family: monospace; font-size: 0.85em; background: #f9f9f9; padding: 2px 5px; border-radius: 3px; }
	.class-tag { background: #e1f5fe; color: #01579b; padding: 2px 6px; border-radius: 4px; font-size: 0.8em; margin-right: 8px; }
	.description { font-style: italic; color: #333; }
	</style>
	</head>
	<body>

	<div class="container">
	<h1>LSHW 硬件树查看器</h1>
	<div class="file-input">
	<p>选择您的 <code>a.json</code> 文件开始查看</p>
	<input type="file" id="fileInput" accept=".json">
	</div>
	<div id="treeContainer"></div>
	</div>

	<script>
	document.getElementById('fileInput').addEventListener('change', function(e) {
	const file = e.target.files[0];
	if (!file) return;

	const reader = new FileReader();
	reader.onload = function(e) {
	try {
	const data = JSON.parse(e.target.result);
	const container = document.getElementById('treeContainer');
	container.innerHTML = ''; // 清空旧内容
	container.appendChild(renderNode(data));
	} catch (err) {
	alert('解析 JSON 失败: ' + err.message);
	}
	};
	reader.readAsText(file);
	});

	/**
	* 递归渲染硬件节点
	*/
	function renderNode(node) {
	const details = document.createElement('details');
	const summary = document.createElement('summary');

	// 节点标题：显示类别和描述
	const className = node.class \|\| 'unknown';
	const description = node.description \|\| node.product \|\| node.id \|\| 'Device';
	summary.innerHTML = `<span class="class-tag">${className}</span><span class="description">${description}</span>`;
	details.appendChild(summary);

	// 渲染当前节点的详细属性（非 children 属性）
	const infoDiv = document.createElement('div');
	infoDiv.className = 'device-info';

	for (let key in node) {
	if (key !== 'children' && typeof node[key] !== 'object') {
	const p = document.createElement('div');
	p.className = 'attribute';
	p.innerHTML = `<strong>${key}:</strong> ${node[key]}`;
	infoDiv.appendChild(p);
	}
	}
	details.appendChild(infoDiv);

	// 递归处理子节点
	if (node.children && Array.isArray(node.children)) {
	node.children.forEach(child => {
	details.appendChild(renderNode(child));
	});
	}

	return details;
	}
	</script>

	</body>
	</html>
No results found