oipage 1.0.0-alpha.0 → 1.0.0-alpha.2

package/bin/format.js

@@ -0,0 +1,51 @@
+
+// 把字节转换成更可读的内容
+exports.formatByte = function (value) {
+    if (value < 1024) return value + "Byte";
+
+    let kb = value / 1024;
+    if (kb < 1024) return kb.toFixed(1) + "KB";
+
+    let mb = kb / 1024;
+    if (mb < 1024) return mb.toFixed(1) + "MB";
+
+    let gb = mb / 1024;
+    return gb.toFixed(1) + "GB";
+};
+
+// 把时间变成更可读的格式
+exports.formatTime = function (value) {
+    let year = value.getFullYear();
+    let month = value.getMonth() + 1;
+    let day = value.getDate();
+
+    let hour = value.getHours();
+    let minutes = value.getMinutes();
+
+    let today = new Date();
+    if (year == today.getFullYear() && month == today.getMonth() + 1 && day == today.getDate()) {
+        return "今天 " + hour + ":" + minutes;
+    } else {
+        return year + "年" + month + "月" + day + "日 " + hour + ":" + minutes;
+    }
+};
+
+exports.formatArgv = function (argvs, shorts) {
+    let result = {};
+
+    let keyName = "args", value = [];
+    for (let index = 3; index < argvs.length; index++) {
+        let argv = argvs[index];
+
+        if (/^\-/.test(argv)) {
+            result[keyName] = value;
+            keyName = shorts[argv] || argv;
+            value = [];
+        } else {
+            value.push(argv);
+        }
+    }
+    result[keyName] = value;
+
+    return result;
+};

package/bin/help.js

@@ -0,0 +1,16 @@
+const packageValue = require("../package.json");
+
+module.exports = function () {
+    console.log(`\x1b[36m
+OIPage@v${packageValue.version}
+
+可以使用的命令如下：
+
+【1】oipage-cli serve 开发服务器
+    --port|-p 端口号
+    --baseUrl 服务器根目录（相对命令行）
+
+Powered by https://github.com/zxl20070701
+\x1b[0m`);
+
+};

package/bin/resolve404.js

@@ -1,78 +1,82 @@
-const { readdirSync, lstatSync, readFileSync } = require("fs");
+const { readdirSync, lstatSync, readFileSync, statSync } = require("fs");
 const { join } = require("path");
+const { formatByte, formatTime } = require("./format");
+const mineTypes = require("./mineTypes.json");
 
-const img_folder = "data:image/png;base64," + readFileSync("./images/folder.png").toString('base64');
-const img_file = "data:image/png;base64," + readFileSync("./images/file.png").toString('base64');
-const img_goback = "data:image/png;base64," + readFileSync("./images/goback.png").toString('base64');
+const img_folder = "data:image/png;base64," + readFileSync(join(__dirname, "../images/folder.png")).toString('base64');
+const img_file = "data:image/png;base64," + readFileSync(join(__dirname, "../images/file.png")).toString('base64');
 
-module.exports = function (filePath) {
+const template_404 = readFileSync(join(__dirname, "../template/404.html"), {
+    encoding: "utf8"
+})
+    .replace("${img_folder}", img_folder)
+    .replace("${img_file}", img_file);
+
+module.exports = function (filePath, url) {
 
     let subItems = [];
 
     try {
         subItems = readdirSync(filePath);
+        console.log("<i> \x1b[1m\x1b[32m[OIPage-dev-server] Open Folder: " + url + '\x1b[0m ' + new Date().toLocaleString());
     } catch (e) {
+        console.log("<i> \x1b[1m\x1b[32m[OIPage-dev-server] Open " + (/\/$/.test(url) ? "Folder" : "File") + ": \x1b[35m" + url + ' 404 Not Found\x1b[0m ' + new Date().toLocaleString());
         try {
             filePath = join(filePath, "../");
             subItems = readdirSync(filePath);
         } catch (e) { }
     }
 
-    let template = "<a class='goback' href='../'>返回</a>";
+    let template = "";
     for (let i in subItems) {
         let isDirectory = lstatSync(join(filePath, subItems[i])).isDirectory();
-        template += "<a class='" + (isDirectory ? "folder" : "file") + "' href='./" + subItems[i] + (isDirectory ? "/" : "") + "'>" + subItems[i] + "</a>";
+        let statObj = statSync(join(filePath, subItems[i]));
+
+        // 文件夹
+        if (isDirectory) {
+            template += `<tr class="folder">
+            <th class="name">
+                <a href='./${subItems[i]}/'>${subItems[i]}</a>
+            </th>
+            <th>
+                ${formatTime(statObj.mtime)}
+            </th>
+            <th>
+                文件夹
+            </th>
+            <th>
+                -
+            </th>
+            <th>
+                <a href='./${subItems[i]}/' class="btn">打开</a>
+            </th>
+        </tr>`;
+        }
+
+        // 文件
+        else {
+            let dotName = /\./.test(subItems[i]) ? subItems[i].match(/\.([^.]+)$/)[1] : "";
+
+            template += `<tr class="file">
+            <th class="name">
+                <a href='./${subItems[i]}'>${subItems[i]}</a>
+            </th>
+            <th>
+                ${formatTime(statObj.mtime)}
+            </th>
+            <th>
+                ${mineTypes[dotName] || "text/plain"}
+            </th>
+            <th>
+            ${formatByte(statObj.size)}
+        </th>
+            <th>
+                <a href='./${subItems[i]}' class="btn">访问</a>
+                <a href='./${subItems[i]}' class="btn" download='${subItems[i]}'>下载</a>
+            </th>
+        </tr>`;
+        }
     }
 
-    return `<!DOCTYPE html>
-    <html lang="zh-cn">
-    
-    <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>404 Not Found</title>
-    <style>
-      body{
-          margin: 0px;
-          background-color:#fcfcfc;
-          display: flex;
-          flex-wrap:wrap;
-          padding:100px;
-      }
-      body>a{
-          text-decoration: none;
-          padding:10px;
-          color:#000000;
-          text-align:center;
-          width:100px;
-          background-repeat: no-repeat;
-          background-position: center 0px;
-          padding-top: 65px;
-          margin-top: 50px;
-          font-size:12px;
-          background-size: 55% auto;
-      }
-      body>a:hover{
-          outline:1px solid #55b9e6;
-      }
-      body>a.folder{
-          background-image:url('${img_folder}');
-      }
-      body>a.file{
-          background-image:url('${img_file}');
-      }
-      body>a.goback{
-          background-image:url('${img_goback}');
-      }
-    </style>
-    </head>
-    
-    <body>
-    
-    ${template}
-    
-    </body>
-    
-    </html>`;
+    return template_404.replace("${current}", filePath).replace("${template}", template);
 };

package/bin/run

@@ -4,14 +4,24 @@
 
 process.title = 'OIPage';
 
+const { formatArgv } = require("./format");
+const doServe = require("./serve");
+const doHelp = require("./help");
+
 // 开发服务器
 if (process.argv[2] == "serve") {
-    require("./serve")({
-        
+
+    let argvObj = formatArgv(process.argv, {
+        "-p": "--port"
+    });
+
+    doServe({
+        port: (argvObj["--port"] || [])[0] || 8080,
+        baseUrl: (argvObj["--baseUrl"] || [])[0] || "./",
     });
 }
 
 // 默认，帮助
 else {
-
+    doHelp();
 }

package/bin/serve.js

@@ -10,8 +10,8 @@ const resolve404 = require("./resolve404.js");
 module.exports = function (config) {
     let startTime = new Date().valueOf();
 
-    const port = config.port || 8080; // 端口号
-    const basePath = join(process.cwd(), "./"); // 服务器根路径
+    const port = config.port; // 端口号
+    const basePath = join(process.cwd(), config.baseUrl); // 服务器根路径
 
     let Server = createServer(function (request, response) {
 
@@ -34,6 +34,8 @@ module.exports = function (config) {
             });
             response.write(readFileSync(filePath));
             response.end();
+
+            console.log("<i> \x1b[1m\x1b[32m[OIPage-dev-server] Open File: " + url + '\x1b[0m ' + new Date().toLocaleString());
         }
 
         // 否则就是404
@@ -43,7 +45,7 @@ module.exports = function (config) {
                 'Access-Control-Allow-Origin': '*',
                 'Server': 'Powered by OIPage-dev-server@' + packageValue.version
             });
-            response.write(resolve404(filePath));
+            response.write(resolve404(filePath, url));
             response.end();
         }
 
@@ -56,9 +58,9 @@ module.exports = function (config) {
 
     // 打印成功提示
     console.log('<i> \x1b[1m\x1b[32m[OIPage-dev-server] Project is running at:\x1b[0m');
-    console.log('<i> \x1b[1m\x1b[32m[OIPage-dev-server] Loopback: \x1b[36mhttp://localhost:/' + port + '\x1b[0m');
+    console.log('<i> \x1b[1m\x1b[32m[OIPage-dev-server] Loopback: \x1b[36mhttp://localhost:' + port + '/\x1b[0m');
     for (let ipv4Item of networkValue.IPv4) console.log('<i> \x1b[1m\x1b[32m[OIPage-dev-server] On Your Network (IPv4):\x1b[36m http://' + ipv4Item.address + ':' + port + '/\x1b[0m');
     for (let ipv6Item of networkValue.IPv6) console.log('<i> \x1b[1m\x1b[32m[OIPage-dev-server] On Your Network (IPv6): \x1b[36mhttp://[' + ipv6Item.address + ']:' + port + '/\x1b[0m');
     console.log('<i> \x1b[1m\x1b[32m[OIPage-dev-server] Content not from OIPage is served from \x1b[36m"' + basePath + '" \x1b[0mdirectory');
-    console.log('\nOIPage ' + packageValue.version + ' compiled \x1b[1m\x1b[32msuccessfully\x1b[0m in ' + (new Date().valueOf() - startTime) + ' ms')
+    console.log('\nOIPage ' + packageValue.version + ' compiled \x1b[1m\x1b[32msuccessfully\x1b[0m in ' + (new Date().valueOf() - startTime) + ' ms\n')
 };

package/nodejs/animation/index.js

@@ -1,5 +1,5 @@
 /*!
-* animation of OIPage v1.0.0-alpha.0
+* animation of OIPage v1.0.0-alpha.2
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/nodejs/deeplog/index.js

@@ -1,5 +1,5 @@
 /*!
-* deeplog of OIPage v1.0.0-alpha.0
+* deeplog of OIPage v1.0.0-alpha.2
 * git+https://github.com/oi-contrib/OIPage.git
 */
 const {linelog} = require("../linelog/index.js");

package/nodejs/linelog/index.js

@@ -1,5 +1,5 @@
 /*!
-* linelog of OIPage v1.0.0-alpha.0
+* linelog of OIPage v1.0.0-alpha.2
 * git+https://github.com/oi-contrib/OIPage.git
 */
 
@@ -8,6 +8,11 @@ const MOVE_LEFT = Buffer.from('1b5b3130303044', 'hex').toString();
 const MOVE_UP = Buffer.from('1b5b3141', 'hex').toString();
 const CLEAR_LINE = Buffer.from('1b5b304b', 'hex').toString();
 
+// 计算字符串长度的方法
+const stringwidth = function (str) {
+    return str.length;
+};
+
 /**
  * 不换行打印
  * @param {string} stream 打印的内容

package/nodejs/throttle/index.js

@@ -1,5 +1,5 @@
 /*!
-* throttle of OIPage v1.0.0-alpha.0
+* throttle of OIPage v1.0.0-alpha.2
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "oipage",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-alpha.2",
   "description": "前端网页或应用快速开发助手，包括开发服务器、辅助命令、实用API等",
   "sideEffects": false,
   "scripts": {
     "dev": "node ./build/index.js watch",
     "build": "node ./build/index.js",
-    "serve": "node ./bin/run serve",
-    "doc": ""
+    "docs": "node ./bin/run serve -p 20000 --baseUrl ./docs"
   },
   "bin": {
     "oipage-cli": "bin/run"

package/template/404.html

@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="zh-cn">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>404 Not Found</title>
+    <style>
+        body {
+            margin: 0px;
+            background-color: #ffffff;
+            display: flex;
+            flex-wrap: wrap;
+            padding: 100px;
+        }
+
+        a {
+            text-decoration: none;
+            color: #284259;
+        }
+
+        a:hover {
+            text-decoration: underline;
+        }
+
+        .fork {
+            width: 160px;
+            line-height: 30px;
+            position: fixed;
+            background-color: #607D8B;
+            text-align: center;
+            color: white;
+            outline: 2px dashed #607D8B;
+            width: 200px;
+            transform: rotate(45deg);
+            right: -45px;
+            top: 45px;
+            z-index: 1;
+        }
+
+        .current {
+            box-sizing: border-box;
+            position: fixed;
+            left: 0;
+            top: 0;
+            line-height: 50px;
+            padding-left: 20px;
+            font-size: 14px;
+            color: #000000;
+            font-style: italic;
+        }
+
+        .filelist {
+            box-sizing: border-box;
+            position: fixed;
+            left: 20px;
+            top: 50px;
+            outline: 1px solid #9E9E9E;
+            width: calc(100vw - 40px);
+            height: calc(100vh - 70px);
+            overflow: auto;
+            padding: 20px;
+            border-radius: 5px;
+            background-color: #fcfcfc;
+        }
+
+        .filelist>table {
+            width: 100%;
+            text-align: left;
+        }
+
+        .filelist>table tr>th {
+            white-space: nowrap;
+            padding: 0 10px;
+        }
+
+        .filelist>table>thead>tr>th {
+            color: #284259;
+            font-size: 13px;
+            line-height: 40px;
+        }
+
+        .filelist>table>tbody>tr {
+            border: 1px solid #cdcdcd00;
+        }
+
+        .filelist>table>tbody>tr>th {
+            text-decoration: none;
+            font-size: 12px;
+            color: #3c3c3c;
+            word-break: break-all;
+            font-weight: 400;
+            line-height: 30px;
+        }
+
+        .filelist>table>tbody>tr>th>.btn {
+            color: white;
+            background-color: #2196F3;
+            padding: 2px 5px;
+            border-radius: 5px;
+        }
+
+        .filelist>table>tbody>tr>th.name {
+            background-repeat: no-repeat;
+            background-position: left center;
+            background-size: auto 90%;
+            padding-left: 30px;
+            color: #000000;
+        }
+
+        .filelist>table>tbody>tr>th.name>span {
+            white-space: nowrap;
+        }
+
+        .filelist>table>tbody>tr.file>th.name {
+            background-image: url('${img_file}');
+        }
+
+        .filelist>table>tbody>tr.folder>th.name {
+            background-image: url('${img_folder}');
+        }
+    </style>
+</head>
+
+<body>
+    <a href="https://github.com/oi-contrib/OIPage" target="_blank" class="fork">
+        Fork me on Github
+    </a>
+    <div class="current">
+        当前位置：${current}
+    </div>
+    <div class="filelist">
+        <table>
+            <thead>
+                <tr>
+                    <th>
+                        名称
+                    </th>
+                    <th>
+                        修改日期
+                    </th>
+                    <th>
+                        类型
+                    </th>
+                    <th>
+                        大小
+                    </th>
+                    <th>
+                        操作
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr class="folder">
+                    <th class="name"><a href='../'>..</a></th>
+                    <th>-</th>
+                    <th>
+                        文件夹
+                    </th>
+                    <th>-</th>
+                    <th>
+                        <a href='../' class="btn">打开</a>
+                    </th>
+                </tr>
+                ${template}
+            </tbody>
+        </table>
+    </div>
+</body>
+
+</html>

package/web/animation/index.js

@@ -1,5 +1,5 @@
 /*!
-* animation of OIPage v1.0.0-alpha.0
+* animation of OIPage v1.0.0-alpha.2
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/web/getStyle/index.js

@@ -1,5 +1,5 @@
 /*!
-* getStyle of OIPage v1.0.0-alpha.0
+* getStyle of OIPage v1.0.0-alpha.2
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/web/onReady/index.js

@@ -1,5 +1,5 @@
 /*!
-* onReady of OIPage v1.0.0-alpha.0
+* onReady of OIPage v1.0.0-alpha.2
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/web/setStyle/index.js

@@ -1,5 +1,5 @@
 /*!
-* setStyle of OIPage v1.0.0-alpha.0
+* setStyle of OIPage v1.0.0-alpha.2
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/web/throttle/index.js

@@ -1,5 +1,5 @@
 /*!
-* throttle of OIPage v1.0.0-alpha.0
+* throttle of OIPage v1.0.0-alpha.2
 * git+https://github.com/oi-contrib/OIPage.git
 */