renderings
(part)
configuration filepackage.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"
}
}
For specific configuration information, see my other blog
static page code
<!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>
key code
1. Read the size of the computer disk space
const {
getDrives } = require('diskinfo');
// 读取电脑系统盘数
window.onload = function() {
getDrives(function(err, aDrives) {
// 磁盘渲染
storageRender(aDrives);
// 地址栏渲染
pathRender(aDrives[0].mounted);
// 初始化环境
init(aDrives[0].mounted);
})
}
2. Read file information
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. Forward and backward
// 后退
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");
}
}
key tools
1. Time formatting
/**
* 时间格式化
* @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, file size format
/**
* 文件大小格式化
* @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. Sort file names
/**
* 目录处理 (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;
}
Due to some minor problems with my computer, I cannot submit the code to the Github repository.
After the solution is completed, the code will be submitted to GitHub, and the download address will be provided in the comment area.
After downloading, the specific operation can be seen in my other blog