Nodejs与node-webkit结合的文件大小查看器

Nodejs与node-webkit结合的文件大小查看器

node-webkit小白,这两天在看node-webkit 文档,觉得很有意思,写了个文件大小查看器练手。

功能(updated)

  • 选择文件夹或磁盘,遍历里面所有文件,用pie chart来显示各个文件/文件夹占的比例,文件夹层级用pie chart 的层级来呈现,鼠标hover 显示具体信息(文件大小，比例，路径)
  • 用bar chart 呈现根据文件格式(doc, pdf, jpg 等等)分的结果,比如查看哪种文件占的比例最大

现在结果如下图:

  • 整体视图
  • 根据文件类型视图 支持右键导出所有的文件结果.

各平台下载地址(解压即可运行)

源代码

github

欢迎各种意见, 或 github star/fork/pull request

修改历史

  • log 最开始的呈现方式 (不直观,已作废)

9 回复

Node.js 与 node-webkit 结合的文件大小查看器

背景

node-webkit（现称为Electron）是一个强大的框架，可以使用HTML、CSS和JavaScript构建跨平台的桌面应用程序。最近，我作为一个node-webkit的新手，决定尝试构建一个文件大小查看器来熟悉这个工具。

功能

这个文件大小查看器具备以下功能：

  1. 选择文件夹或磁盘：用户可以选择一个文件夹或磁盘，并遍历其中的所有文件。
  2. 饼图显示：使用饼图展示各个文件或文件夹所占的比例。文件夹的层级结构通过饼图的层级来表示，鼠标悬停时显示详细信息（如文件大小、比例和路径）。
  3. 柱状图显示：根据文件格式（如doc、pdf、jpg等）分类，并使用柱状图展示每种文件类型的占比情况。
  4. 右键导出功能：支持右键菜单导出所有文件的结果。

目前的效果

目前，该应用已经实现了上述功能，并且效果如下图所示：

  • 整体视图： 整体视图

  • 按文件类型视图： 按文件类型视图

各平台下载地址

源代码

源代码托管于 GitHub，欢迎贡献代码、提出问题或进行反馈：GitHub

修改历史

最初版本的界面设计不够直观，现已更新为更易理解的版本。旧版界面如下图所示： 旧版界面

示例代码

为了实现这些功能，我们可以使用 fs 模块来遍历文件系统，使用 d3.js 来绘制图表。以下是一个简单的示例代码片段，用于获取文件大小并生成饼图：

const fs = require('fs');
const path = require('path');

// 获取指定目录下的文件大小
function getDirectorySize(dirPath) {
    return new Promise((resolve, reject) => {
        let totalSize = 0;
        fs.readdir(dirPath, (err, files) => {
            if (err) {
                reject(err);
            } else {
                files.forEach(file => {
                    const filePath = path.join(dirPath, file);
                    fs.stat(filePath, (err, stats) => {
                        if (err) {
                            reject(err);
                        } else {
                            totalSize += stats.size;
                        }
                    });
                });
                resolve(totalSize);
            }
        });
    });
}

// 使用D3.js生成饼图
function createPieChart(data) {
    // D3.js代码生成饼图
    // 这里省略了具体的D3.js代码
}

以上代码只是一个简单的示例，实际项目中需要处理更多的细节，如错误处理、异步操作等。希望这个示例能帮助你更好地理解和实现文件大小查看器的功能。


各种颜色都代表啥啊?

都是随机出来的, 就是想用不同颜色来区分里面不同的文件/文件夹

好凌乱，乍一眼还以为图片出错了。

数据显示，才是最好的。或者是统计图的显示。楼主这····
事情得慢慢来，相信楼主会完善的更好！:)

哈哈,根据反馈看来确实不直观,可能我受Disk Inventory X 影响

谢谢建议,我考虑下用bar chart或pie chart来显示。

20140410 视图更新

好的，这里是一个简单的Node.js与node-webkit（现在的名称是NW.js）结合的文件大小查看器的实现示例。我们将使用fs模块来遍历文件夹，并使用nw.gui和d3库来生成图表。

1. 安装依赖

首先，确保安装了必要的库：

npm install d3 --save

2. 创建HTML文件

创建一个HTML文件，例如index.html：

<!DOCTYPE html>
<html>
<head>
    <title>File Size Checker</title>
    <script src="node_modules/d3/d3.min.js"></script>
    <style>
        .tooltip { 
            position: absolute;  
            background-color: white; 
            padding: 5px; 
            border: 1px solid black; 
            display: none;
        }
    </style>
</head>
<body>
    <input type="file" id="folderPicker" webkitdirectory directory multiple />
    <div id="chart"></div>
    <div id="tooltip" class="tooltip"></div>

    <script src="app.js"></script>
</body>
</html>

3. 创建JavaScript文件

创建一个JavaScript文件，例如app.js：

const fs = require('fs');
const path = require('path');

document.getElementById('folderPicker').addEventListener('change', function(event) {
    const selectedPath = event.target.files[0].path;
    traverseFolder(selectedPath);
});

function traverseFolder(dir) {
    fs.readdir(dir, { withFileTypes: true }, (err, files) => {
        if (err) throw err;

        const fileData = files.map(file => {
            const fullPath = path.join(dir, file.name);
            return {
                name: file.name,
                path: fullPath,
                size: file.isDirectory() ? 0 : file.size,
                isDir: file.isDirectory()
            };
        });

        drawPieChart(fileData, dir);
    });
}

function drawPieChart(data, rootPath) {
    // 这里可以使用D3.js绘制饼图
}

4. 使用D3.js绘制饼图

在drawPieChart函数中，你可以使用D3.js绘制饼图。以下是一个简单的示例：

function drawPieChart(data, rootPath) {
    const svg = d3.select("#chart")
                  .append("svg")
                  .attr("width", 500)
                  .attr("height", 500);

    const pie = d3.pie().value(d => d.size);
    const arc = d3.arc().innerRadius(0).outerRadius(100);

    const g = svg.selectAll(".arc")
                .data(pie(data))
                .enter()
                .append("g")
                .attr("class", "arc");

    g.append("path")
     .attr("d", arc)
     .style("fill", (d, i) => d3.schemeCategory10[i])
     .on("mouseover", function(event, d) {
         document.getElementById("tooltip").innerHTML = `
             <strong>${d.data.name}</strong><br>
             Size: ${formatBytes(d.data.size)}<br>
             Path: ${d.data.path}`;
         document.getElementById("tooltip").style.display = "block";
     })
     .on("mouseout", () => {
         document.getElementById("tooltip").style.display = "none";
     });

    function formatBytes(bytes, decimals = 2) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const dm = decimals < 0 ? 0 : decimals;
        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
    }
}

总结

以上代码提供了一个基本的框架，你可以在此基础上添加更多功能，如文件类型统计、右键菜单等。此外，你可以使用更高级的图表库，如d3-cloud来生成词云图表。希望这能帮助你快速入门！

回到顶部