效果图
（部分）
配置文件 package.json
{
"main": "index.html",
"name": "tree",
"window": {
"title": "tree",
"icon": "./favicon.ico",
"toolbar": true,
"width": 1280,
"height": 800,
"min_width": 1000,
"min_height": 600,
"position": "center"
},
"webkit": {
"plugin": true,
"java": false,
"page-cache": false
},
"dependencies": {
"diskinfo": "^0.0.3"
}
}
具体配置信息可以看我另外一篇博客
静态页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<title>文件</title>
</head>
<body>
<div id="app">
<!-- 选项 -->
<div class="option">
<div class="position"></div>
<div class="path">
<div class="choose">
<span class="back box"></span>
<span class="forward box"></span>
</div>
<div class="crumbs"></div>
</div>
</div>
<!-- 文件内容 -->
<div class="content">
<table cellspacing=0>
<thead>
<tr>
<td class="name" onclick="titleSort('name')">
<div class="icon ascend" data-flag=1></div>
<div class="th-td-container">名称</div>
</td>
<td class="time" onclick="titleSort('time')">
<div class="icon" data-flag=1></div>
<div class="th-td-container">修改时间</div>
</td>
<td class="type" onclick="titleSort('type')" data-flag=0>
<div class="th-td-container">类型</div>
</td>
<td class="size" onclick="titleSort('size')">
<div class="icon" data-flag=1></div>
<div class="th-td-container">大小</div>
</td>
<td class="permise">
<div class="th-td-container">权限</div>
</td>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</body>
<script src="./js/util.js"></script>
<script src="./js/render.js"></script>
<script type="text/javascript" src="./js/file.js"></script>
</html>
关键代码
1、读取电脑磁盘空间大小
const { getDrives } = require('diskinfo');
// 读取电脑系统盘数
window.onload = function() {
getDrives(function(err, aDrives) {
// 磁盘渲染
storageRender(aDrives);
// 地址栏渲染
pathRender(aDrives[0].mounted);
// 初始化环境
init(aDrives[0].mounted);
})
}
2、读取文件信息
const fs = require("fs");
fs.readdirSync(pathName + "\\");
// 读取目录信息
let stat = fs.statSync(pathName + "\\" + dir[i]);
if (stat.isDirectory()) {
folderList.push({
name: dir[i],
time: stat.mtimeMs,
type: "文件夹",
size: "",
flag: stat.isDirectory(),
isAccess: true,
})
} else {
fileList.push({
name: dir[i],
time: stat.mtimeMs,
type: "文件",
size: stat.size,
flag: stat.isDirectory(),
isAccess: true,
})
}
3、前进后退
// 后退
function backEvent() {
let prev = pathList[currPathIndex - 1];
currPathIndex -= 1;
selectDir(prev, false);
}
// 前进
function forwardEvent() {
let next = pathList[currPathIndex + 1];
currPathIndex += 1;
selectDir(next, false);
}
// 增加前进或后退事件
function addEvent() {
let back = document.querySelector(".path .choose .box:first-child");
let forward = document.querySelector(".path .choose .box:nth-child(2)");
// 前进事件
if (currPathIndex != pathList.length - 1) {
forward.onclick = forwardEvent;
forward.classList.remove("forward");
forward.classList.add("forward-active");
} else {
forward.onclick = null;
forward.classList.remove("forward-active");
forward.classList.add("forward");
}
// 后退事件
if (currPathIndex != 0) {
back.onclick = backEvent;
back.classList.remove("back");
back.classList.add("back-active");
} else {
back.onclick = null;
back.classList.remove("back-active");
back.classList.add("back");
}
}
关键工具类
1、时间格式化
/**
* 时间格式化
* @param {Number} time 时间
* @returns 格式化后的时间
*/
function formatDate(time) {
let date = new Date(time);
let y = date.getFullYear();
let m = date.getMonth() + 1;
let d = date.getDate();
let h = date.getHours();
let min = date.getMinutes();
min = min >= 10 ? min : "0" + min;
m = m >= 10 ? m : "0" + m;
d = d >= 10 ? d : "0" + d;
h = h >= 10 ? h : "0" + h;
return y + "/" + m + "/" + d + " " + h + ":" + min;
}
2、文件大小格式化
/**
* 文件大小格式化
* @param {Number} data
* @returns 格式化后的文件大小
*/
function formatSize(size) {
if (("" + size).trim().length != 0) {
let valArray = ("" + Math.ceil(size / 1024)).split("").reverse();
let formatArray = [];
for (let i = 0; i < valArray.length; i++) {
formatArray.push(valArray[i]);
if ((i + 1) % 3 == 0) {
formatArray.push(",");
}
}
if (formatArray[formatArray.length - 1] == ",") {
formatArray = formatArray.splice(0, formatArray.length - 1);
}
return formatArray.reverse().join("") + " " + "KB";
}
return "";
}
3、文件名字排序
/**
* 目录处理 (true: 为升序，false：为降序)
* @param {Array} data 排序数据
* @param {String} el 排序字段
* @param {Number} flag 排序： 1 升序（默认） 0 降序
*
*/
function formatData(data, el, flag = 1) {
if (el == "name") {
let chinese = [];
// 过滤掉中文开头名称
data = data.filter(item => {
if (/^[\u4e00-\u9fa5]+/.test(item.name)) {
chinese.push(item)
return false
}
return true
})
if (flag == 1) {
chinese.sort(commonCompare)
data.sort(SortLikeWin);
data = data.concat(chinese);
} else {
chinese.sort(commonCompare).reverse();
data.sort(SortLikeWin).reverse();
data = chinese.concat(data);
}
} else {
if (flag == 1) {
data.sort((a, b) => {
// 升序 1 2 3
return a[el] - b[el];
})
} else {
data.sort((a, b) => {
// 降序
return b[el] - a[el];
})
}
}
return data;
}
由于目前自己电脑有些小问题，无法将代码提交到Github仓库上。
后期解决后会将代码提交到GitHub上，并在评论区上会提供下载地址。
下载后具体运行可以看我另外一篇博客