oipage 1.5.0-alpha.0 → 1.5.0-alpha.2

package/CHANGELOG

@@ -103,7 +103,10 @@ v1.5.0:
         - 修复bug
           1、修复404网站在手机浏览器显示高问题
           2、服务器响应类型由 Content-type 改为 Content-Type
+          3、修复dateFormat第二个参数无法缺省报错
+          4、修复numberFormat不支持负数问题
         - 新增功能
           1、开发服务器 / 应用市场
             * 聊天工具
-            * 图片编辑器
+            * 图片编辑器
+            * 图片转PDF

package/README.md

@@ -74,6 +74,20 @@ oipage-cli serve -p 8080
 
 如果你需要在项目中使用，我们也提供了一些有用的API，具体可以访问[ 在线文档 ](https://oi-contrib.github.io/OIPage)进行了解。
 
+## 应用市场
+
+为了方便日常使用，内置了一个应用市场网站，比如有如下功能：
+
+### 群聊贴
+
+<img src="./snipping/chart.png" />
+
+### 图片编辑器
+
+<img src="./snipping/image-editor.png" />
+
+已有功能或更多功能我们将根据实际情况逐步完善和维护，当然，你可以通过 [issue](https://github.com/oi-contrib/VISLite/issues) 给我们留言，告诉我们你的改进意见。
+
 ## 版权
 
 MIT License

package/bin/serve.js

@@ -18,13 +18,13 @@ module.exports = function (config) {
     let startTime = new Date().valueOf();
 
     const cache = "cache" in config.devServer ? config.devServer.cache : true;
-    const port = config.devServer.port; // 端口号
+    const port = +config.devServer.port; // 端口号
     const basePath = (/^\./.test(config.devServer.baseUrl)) ? join(process.cwd(), config.devServer.baseUrl) : config.devServer.baseUrl; // 服务器根路径
 
-    const name = (config.name || "OIPage") + "-dev-server";
+    const name = (config.name || "OIPage") + "-http-server";
     const version = config.version || packageValue.version;
 
-    const wsHandler = WebSocketClass(port + 1, (config.name || "OIPage") + "-dev-websocket", version);
+    const wsHandler = WebSocketClass(port + 1, (config.name || "OIPage") + "-ws-server", version);
 
     let Server = createServer(function (request, response) {
         let headers = request.headers;

package/bin/tools/resolve404.js

@@ -18,9 +18,9 @@ module.exports = function (filePath, url) {
 
     try {
         subItems = readdirSync(filePath);
-        console.log("<i> \x1b[1m\x1b[32m[OIPage-dev-server] Read Folder: " + url + '\x1b[0m ' + new Date().toLocaleString());
+        console.log("<i> \x1b[1m\x1b[32m[OIPage-http-server] Read Folder: " + url + '\x1b[0m ' + new Date().toLocaleString());
     } catch (e) {
-        console.log("<i> \x1b[1m\x1b[32m[OIPage-dev-server] Read " + (/\/$/.test(url) ? "Folder" : "File") + ": \x1b[35m" + url + ' 404 Not Found\x1b[0m ' + new Date().toLocaleString());
+        console.log("<i> \x1b[1m\x1b[32m[OIPage-http-server] Read " + (/\/$/.test(url) ? "Folder" : "File") + ": \x1b[35m" + url + ' 404 Not Found\x1b[0m ' + new Date().toLocaleString());
         try {
             if (!/\/$/.test(url) || url === "/") {
                 filePath = join(filePath, "../");

package/bin/website-htmls/components/ui-select-file/index.html

@@ -0,0 +1,8 @@
+<div class="ui-select-file-view">
+    <h2 class="title" z-bind="_props.title"></h2>
+    <div class="tips" z-bind="_props.tips"></div>
+    <div class="file">
+        <input type="file" multiple id="input" z-on:change.stop="doChange" z-bind:accept="accept" />
+        <label for="input" z-bind="'选择'+_props.type+'文件'"></label>
+    </div>
+</div>

package/bin/website-htmls/components/ui-select-file/index.js

@@ -0,0 +1,38 @@
+import { defineElement } from "zipaper";
+import template from "./index.html";
+import style from "./index.scss";
+
+export default defineElement({
+    template,
+    emits: ["change"],
+    props: {
+        title: {
+            type: String,
+            required: true,
+        },
+        tips: {
+            type: String,
+            required: true,
+        },
+        type: {
+            type: String,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            accept: {
+                pdf: "application/pdf",
+                image: "image/*"
+            }[this._props.type]
+        };
+    },
+    methods: {
+        doChange(event, target) {
+            this.$emit("change", target.files);
+        }
+    },
+    style: {
+        content: style
+    }
+});

package/bin/website-htmls/components/ui-select-file/index.scss

@@ -0,0 +1,45 @@
+.ui-select-file-view{
+    &>.title {
+    text-align: center;
+    font-weight: 700;
+    color: rgb(26, 26, 26);
+    font-size: 36px;
+    line-height: 48px;
+    padding-top: 30px;
+  }
+
+  &>.tips {
+    text-align: center;
+    line-height: 30px;
+    font-size: 22px;
+    color: rgb(26, 26, 26);
+    font-weight: 300;
+  }
+
+  &>.file {
+    text-align: center;
+    margin-top: 30px;
+
+    input {
+      display: none;
+    }
+
+    label {
+      line-height: 50px;
+      display: inline-block;
+      border: 1px solid gray;
+      background-image: url("./images/addFile.svg");
+      background-repeat: no-repeat;
+      background-position: 5px center;
+      background-size: auto 70%;
+      padding-left: 40px;
+      padding-right: 10px;
+      border-radius: 5px;
+
+      &:hover {
+        text-decoration: underline;
+        cursor: pointer;
+      }
+    }
+  }
+}

package/bin/website-htmls/dialogs/imageSize/index.html

@@ -0,0 +1,55 @@
+<h2 z-bind="title"></h2>
+<div class="right-btn">
+    <div>
+        <fieldset>
+            <legend>
+                当前大小
+            </legend>
+            <ul z-bind:lock="title=='图像大小'?'yes':'no'">
+                <li>
+                    <label>宽度：</label>
+                    <span z-bind="width"></span>px
+                </li>
+                <li>
+                    <label>宽度：</label>
+                    <span z-bind="height"></span>px
+                </li>
+            </ul>
+        </fieldset>
+        <fieldset>
+            <legend>
+                新建大小
+            </legend>
+            <ul z-bind:lock="title=='图像大小'?'yes':'no'">
+                <li>
+                    <label>宽度(W)：</label>
+                    <input type="text" z-model="newWidth" z-on:input="calcHeight">
+                    px
+                </li>
+                <li>
+                    <label>高度(H)：</label>
+                    <input type="text" z-model="newHeight" z-on:input="calcWidth">
+                    px
+                </li>
+                <li z-bind:active="title=='画布大小'?'yes':'no'">
+                    <label>定位：</label>
+                    <div class="change-type" z-bind:type="changeType">
+                        <span z-on:click="doChangeType" val="left-top"></span>
+                        <span z-on:click="doChangeType" val="center-top"></span>
+                        <span z-on:click="doChangeType" val="right-top"></span>
+                        <span z-on:click="doChangeType" val="left-middle"></span>
+                        <span z-on:click="doChangeType" val="center-middle"></span>
+                        <span z-on:click="doChangeType" val="right-middle"></span>
+                        <span z-on:click="doChangeType" val="left-bottom"></span>
+                        <span z-on:click="doChangeType" val="center-bottom"></span>
+                        <span z-on:click="doChangeType" val="right-bottom"></span>
+                    </div>
+                </li>
+            </ul>
+        </fieldset>
+    </div>
+    <div>
+        <button z-on:click="doSubmit">确定</button>
+        <button z-on:click="doClose">取消</button>
+    </div>
+</div>

package/bin/website-htmls/dialogs/imageSize/index.js

@@ -0,0 +1,53 @@
+import { defineElement, ref } from "zipaper"
+import template from "./index.html"
+import style from "./index.scss";
+
+export default defineElement({
+    template,
+    data() {
+        return {
+            title: this._props.title,
+            width: this._props.width,
+            height: this._props.height,
+
+            newWidth: ref(this._props.width),
+            newHeight: ref(this._props.height),
+
+            changeType: ref('center-middle')
+        }
+    },
+    methods: {
+        calcHeight() {
+            if (this.title == '图像大小') {
+                this.newHeight = +(this.newWidth * this.height / this.width).toFixed(0);
+            }
+        },
+
+        calcWidth() {
+            if (this.title == '图像大小') {
+                this.newWidth = +(this.newHeight * this.width / this.height).toFixed(0);
+            }
+        },
+
+        doChangeType: function (event, target) {
+            this.changeType = target.getAttribute('val');
+        },
+
+        // 确定
+        doSubmit: function () {
+            this.$closeDialog({
+                width: +this.newWidth,
+                height: +this.newHeight,
+                changeType: this.changeType
+            });
+        },
+
+        // 取消
+        doClose: function () {
+            this.$closeDialog();
+        }
+    },
+    style: {
+        content: style
+    }
+})

package/bin/website-htmls/dialogs/imageSize/index.scss

@@ -0,0 +1,139 @@
+#dialog-root>.content.imageSize {
+    border: 1px solid gray;
+    min-height: 300px;
+    width: 300px;
+    background-color: white;
+
+    &>h2 {
+        font-size: 12px;
+        padding-left: 30px;
+        background-image: url('./images/image-editor.png');
+        background-size: auto 80%;
+        background-repeat: no-repeat;
+        background-position: 3px center;
+        border-bottom: 1px solid gray;
+        line-height: 30px;
+        height: 30px;
+        user-select: none;
+    }
+
+    &>div.right-btn {
+        display: flex;
+
+        &>div {
+            &:first-child {
+                flex-grow: 1;
+                padding: 10px 0 10px 10px;
+            }
+
+            &:last-child {
+                text-align: center;
+                flex-grow: 0;
+                flex-shrink: 0;
+                flex-basis: 70px;
+
+                &>button {
+                    height: 30px;
+                    border-radius: 15px;
+                    width: 50px;
+                    margin-top: 10px;
+
+                    &:hover {
+                        background-color: rgb(127, 131, 131);
+                        cursor: pointer;
+                    }
+                }
+
+            }
+        }
+    }
+
+    fieldset {
+        margin-top: 10px;
+        font-size: 12px;
+    }
+
+    ul {
+
+        &[lock='yes'] {
+            background-image: url('./images/lock.png');
+            background-repeat: no-repeat;
+            background-position: right;
+        }
+
+        &>li {
+            line-height: 2em;
+            margin-top: 5px;
+
+            &[active='no'] {
+                display: none;
+            }
+
+            &>label {
+                width: 70px;
+                display: inline-block;
+                text-align: right;
+            }
+
+            &>input {
+                width: 50px;
+                margin-right: 5px;
+            }
+
+            .change-type {
+                font-size: 0;
+                width: 90px;
+                display: inline-block;
+                line-height: 0;
+                vertical-align: top;
+                background-image: url('./images/size.png');
+                background-size: 100% auto;
+                background-repeat: no-repeat;
+
+                &>span {
+                    display: inline-block;
+                    width: 30px;
+                    height: 30px;
+                    cursor: pointer;
+                    outline: 1px solid #dedede;
+                }
+
+                &[type='left-top'] {
+                    background-position: -29px -32px;
+                }
+
+                &[type='center-top'] {
+                    background-position: 1px -32px;
+                }
+
+                &[type='right-top'] {
+                    background-position: 30px -32px;
+                }
+
+                &[type='left-middle'] {
+                    background-position: -29px -1px;
+                }
+
+                &[type='center-middle'] {
+                    background-position: 1px -1px;
+                }
+
+                &[type='right-middle'] {
+                    background-position: 30px -1px;
+                }
+
+                &[type='left-bottom'] {
+                    background-position: -29px 30px;
+                }
+
+                &[type='center-bottom'] {
+                    background-position: 1px 30px;
+                }
+
+                &[type='right-bottom'] {
+                    background-position: 30px 30px;
+                }
+            }
+        }
+    }
+}

package/bin/website-htmls/dialogs/index.js

@@ -1,43 +1,53 @@
-import { createApp } from "zipaper"
+import { createApp } from "zipaper";
 
 const dialogs = {
+    imageSize: () => import("./imageSize/index.js")
+};
 
-    // xxx
-    xxx: () => import("./xxx/index.js")
-}
-
-let dialogsResolve = []
+let dialogsResolve = [];
 export default {
     install(Zipaper) {
 
         // 打开弹框
-        Zipaper.prototype.$openDialog = function (dialogName, callback) {
-            let el = document.createElement("div")
+        Zipaper.prototype.$openDialog = function (dialogName, data) {
+            let el = document.createElement("div");
 
             dialogs[dialogName]().then(App => {
 
                 // 准备好挂载点
-                el.setAttribute("class", "content " + dialogName)
+                el.setAttribute("class", "content " + dialogName);
 
                 // 创建并挂载
-                document.getElementById("dialog-root").appendChild(el)
-                createApp(App.default).mount(el)
-                if (callback) callback()
-            })
+                document.getElementById("dialog-root").appendChild(el);
+
+                if (data) {
+                    let props = {};
+                    for (let key in data) {
+                        props[key] = {
+                            default: data[key]
+                        };
+                    }
+                    App.default.props = props;
+                } else {
+                    App.default.props = {};
+                }
+
+                createApp(App.default).mount(el);
+            });
 
             return new Promise((resolve) => {
                 dialogsResolve.push({
                     resolve,
                     el
-                })
-            })
-        }
+                });
+            });
+        };
 
         // 关闭弹框
         Zipaper.prototype.$closeDialog = function (data) {
-            let dialog = dialogsResolve.pop()
+            let dialog = dialogsResolve.pop();
             dialog.el.parentNode.removeChild(dialog.el);
-            dialog.resolve(data)
-        }
+            dialog.resolve(data);
+        };
     }
 }

package/bin/website-htmls/images/addFile.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 12v-2h1v2h2v1h-2v2h-1v-2h-2v-1h2zm5 8H6V4H5v17h13v-1zm1 0v2H4V3h2V1h10l5 5v14h-2zM7 2v17h13V6l-4-4H7zm9 0l4 4h-4V2z"></path></svg>

package/bin/website-htmls/images/img-to-pdf.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z" fill="#FFB700"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M6.99992 8L13.9999 14.5625L16.9544 11.7927L24 17.5625V20L17.0455 14.3589L13.9999 17.2141L6.99992 10.6517L0 17.1875V14.5625L6.99992 8Z" fill="white"></path><circle cx="18" cy="6" r="3" fill="white"></circle></svg>

package/bin/website-htmls/main.js

@@ -3,10 +3,12 @@ import { createApp } from "zipaper"
 import App from "./pages/App/index.js"
 import router from "./router.config.js"
 import dialogs from "./dialogs/index.js"
+import uiSelectFile from "./components/ui-select-file/index.js"
 
 // https://oi-contrib.github.io/Zipaper/index.html
 
 createApp(App)
     .use(router) // 路由
     .use(dialogs) // 弹框
+    .component("ui-select-file", uiSelectFile)
     .mount(document.getElementById("root")) // 挂载到页面

package/bin/website-htmls/pages/appStore/index.html

@@ -15,5 +15,11 @@
                 图片编辑器
             </h2>
         </li>
+        <li z-on:click="goto" tag="img-to-pdf">
+            <img src="./images/img-to-pdf.svg" />
+            <h2>
+                图片转PDF
+            </h2>
+        </li>
     </ul>
 </div>

package/bin/website-htmls/pages/chart/index.js

@@ -12,7 +12,7 @@ export default defineElement({
     },
     created() {
 
-        var ws = new WebSocket('ws://' + window.location.hostname + ':' + (+window.location.port + 1) + '/');
+        let ws = new WebSocket('ws://' + window.location.hostname + ':' + (+window.location.port + 1) + '/');
 
         // 连接成功
         ws.addEventListener('open', () => {

package/bin/website-htmls/pages/image-editor/index.html

@@ -1,19 +1,28 @@
 <div class="image-editor-view">
     <ul class="menu">
         <li>
-            打开
+            <label for="openImage">打开</label>
         </li>
         <li>
-            画布大小
+            <label z-on:click="changeSize">画布大小</label>
         </li>
         <li>
-            图像大小
+            <label z-on:click="changeSize">图像大小</label>
         </li>
         <li>
-            保存
+            <label z-on:click="download" type="jpeg">下载JPEG</label>
+        </li>
+        <li>
+            <label z-on:click="download" type="png">下载PNG</label>
         </li>
     </ul>
     <div class="content">
-        <canvas style="width:700px;height:400px"></canvas>
+        <div id="drawId"></div>
+    </div>
+    <div class="no-view">
+
+        <!-- 选择图片 -->
+        <input type="file" id="openImage" z-on:change="openImage" accept="image/*" />
+
     </div>
 </div>

package/bin/website-htmls/pages/image-editor/index.js

@@ -1,18 +1,105 @@
-import { defineElement } from "zipaper"
-import template from "./index.html"
-import style from "./index.scss"
+import { defineElement } from "zipaper";
+import template from "./index.html";
+import style from "./index.scss";
+import { Canvas } from "vislite";
 
 export default defineElement({
     template,
     data() {
         return {
-
+            painter: null,
+            drawEl: null
         }
     },
+    created() {
+        this.drawEl = document.getElementById("drawId");
+        this.painter = new Canvas(this.drawEl, {
+            scale: 1
+        }, 700, 400);
+    },
     methods: {
+        openImage(event, target) {
+            let file = target.files[0];
+            if (file) {
+                let reader = new FileReader();
+
+                reader.onload = () => {
+                    let image = new Image();
+
+                    image.onload = () => {
+
+                        // 调整画布大小
+                        this.painter = new Canvas(this.drawEl, {
+                            scale: 1
+                        }, image.width, image.height);
+
+                        // 绘制图片
+                        this.painter.clearRect(0, 0, image.width, image.height).drawImage(image, 0, 0, image.width, image.height);
+                    }
+
+                    image.src = reader.result;
+                }
+                reader.readAsDataURL(file);
+            }
+        },
+        download(event, target) {
+            let btn = document.createElement('a');
+            btn.href = this.painter.__canvas.toDataURL("image/" + target.getAttribute("type"));
+            btn.download = "图片." + target.getAttribute("type");
+            btn.click();
+        },
+        changeSize(event, target) {
+            let canvasInfo = this.painter.getInfo();
+            this.$openDialog("imageSize", {
+                title: target.innerText.trim(),
+                width: canvasInfo.width,
+                height: canvasInfo.height
+            }).then(data => {
+                if (data) {
+                    let base64 = this.painter.__canvas.toDataURL();
 
-       
+                    // 调整画布大小
+                    this.painter = new Canvas(this.drawEl, {
+                        scale: 1
+                    }, data.width, data.height).clearRect(0, 0, data.width, data.height);
 
+                    if (target.innerText.trim() === "画布大小") {
+
+                        // 计算图片的对齐方式
+
+                        let _left, _top;
+                        let changeType = data.changeType.split('-');
+
+                        // 水平方向
+                        if (changeType[0] == 'left') {
+                            _left = 0;
+                        } else if (changeType[0] == 'right') {
+                            _left = data.width - canvasInfo.width;
+                        } else {
+                            _left = (data.width - canvasInfo.width) * 0.5;
+                        }
+
+                        // 垂直方向
+                        if (changeType[1] == 'top') {
+                            _top = 0;
+                        } else if (changeType[1] == 'bottom') {
+                            _top = data.height - canvasInfo.height;
+                        } else {
+                            _top = (data.height - canvasInfo.height) * 0.5;
+                        }
+
+                        const img = new Image();
+                        img.onload = () => {
+                            this.painter.getContext().drawImage(img, 0, 0, canvasInfo.width, canvasInfo.height, _left, _top, canvasInfo.width, canvasInfo.height);
+                        };
+                        img.src = base64;
+
+                    } else {
+                        this.painter.drawImage(base64, 0, 0, data.width, data.height);
+                    }
+                }
+            });
+        }
     },
     style: {
         content: style

package/bin/website-htmls/pages/image-editor/index.scss

@@ -4,16 +4,22 @@
         left: 50%;
         top: 5px;
         transform: translateX(-50%);
+        white-space: nowrap;
 
         &>li {
             display: inline-block;
-            padding: 5px 10px;
-            cursor: pointer;
             background-color: #FF5722;
             color: white;
             margin: 0 5px;
             border-radius: 5px;
 
+            &>label {
+                line-height: 30px;
+                padding: 0 5px;
+                display: inline-block;
+                cursor: pointer;
+            }
+
             &:hover {
                 text-decoration: underline;
             }
@@ -24,9 +30,17 @@
         text-align: center;
         margin-top: 100px;
 
-        canvas {
-            background-image: url("./images/mosaic.png");
-            outline: 2px solid #CDDC39;
+        #drawId {
+            display: inline-block;
+
+            &>canvas {
+                background-image: url("./images/mosaic.png");
+                outline: 2px solid #CDDC39;
+            }
         }
     }
+
+    &>.no-view {
+        display: none;
+    }
 }

package/bin/website-htmls/pages/img-to-pdf/index.html

@@ -0,0 +1,4 @@
+<div class="img-to-pdf-view">
+    <ui-select-file z-on:change="doChange" title="图片转PDF" tips="选择一张或多张图片后，可以把这些图片拼接成一个PDF文件" type="image"></ui-select-file>
+    <iframe id="iframe"></iframe>
+</div>

package/bin/website-htmls/pages/img-to-pdf/index.js

@@ -0,0 +1,45 @@
+import { defineElement, ref } from "zipaper"
+import template from "./index.html"
+import style from "./index.scss"
+
+export default defineElement({
+    template,
+    methods: {
+        doChange(event) {
+            let files = event.data, promises = [], iframeEl = document.getElementById("iframe");
+
+            let template = "";
+            for (let index = 0; index < files.length; index++) {
+                let file = files[index];
+
+                promises.push(new Promise(function (resolve) {
+
+                    let reader = new FileReader();
+
+                    reader.onload = function () {
+
+                        template += '<div style="display: flex;justify-content: center;align-items: center;height: 100vh;width: 100vw;"><img src="' + reader.result + '" style="max-width: 100vw;max-height: 100vh;"></img></div>';
+                        resolve("");
+                    }
+                    reader.readAsDataURL(file);
+                }));
+            }
+
+            Promise.all(promises).then(function () {
+                    let iframeWindow = iframeEl.contentWindow;
+                    let iframeDocument = iframeEl.contentWindow?.document;
+
+                    iframeDocument.open();
+                    iframeDocument.write(`<style>body{margin:0px;}</style>` + template);
+                    iframeDocument.close();
+
+                    setTimeout(function () {
+                        iframeWindow.print();
+                    }, 500);
+            });
+        }
+    },
+    style: {
+        content: style
+    }
+})

package/bin/website-htmls/pages/img-to-pdf/index.scss

@@ -0,0 +1,5 @@
+.img-to-pdf-view {
+    iframe {
+        display: none;
+    }
+}

package/bin/website-htmls/router.config.js

@@ -13,5 +13,8 @@ export default defineRouter({
     }, {
         path: "/image-editor",
         component: () => import("./pages/image-editor/index.js"),
+    }, {
+        path: "/img-to-pdf",
+        component: () => import("./pages/img-to-pdf/index.js"),
     }]
 })

package/bin/website-plugins/intercept/index.js

@@ -1,7 +1,9 @@
 const OIPageZipaperIntercept = require("./oipage-zipaper-intercept.js");
+const OIPageVISLiteIntercept = require("./oipage-vislite-intercept.js");
 const ChartIntercept = require("./chart.js");
 
 module.exports = [
     OIPageZipaperIntercept,
+    OIPageVISLiteIntercept,
     ChartIntercept
 ];

package/bin/website-plugins/intercept/oipage-vislite-intercept.js

@@ -0,0 +1,34 @@
+const { readFileSync } = require("fs");
+const { join } = require("path");
+const headFactory = require("./head.js");
+
+const head = headFactory();
+
+// VISLite库
+module.exports = {
+    test: /^vislite$/,
+    handler(request, response) {
+        head["Content-Type"] = "application/javascript;charset=utf-8";
+        head["ETag"] = "VISLite@v" + require("vislite/package.json").version;
+
+        if (request.headers["if-none-match"] === head["ETag"]) {
+            response.writeHead('304', head);
+            response.end();
+            console.log("<i> \x1b[1m\x1b[32m[OIPage-http-server] Cache File: VISLite\x1b[0m " + new Date().toLocaleString() + "\x1b[33m\x1b[1m 304\x1b[0m");;
+            return;
+        }
+
+        response.writeHead(200, head);
+
+        let source = readFileSync(join(__dirname, "../../../node_modules/vislite/lib/index.umd.min.js"), {
+            encoding: "utf8"
+        });
+
+        response.write(`let module = { exports: {} };
+let exports = module.exports;
+${source}
+export let Canvas = module.exports.Canvas;
+`);
+        response.end();
+    }
+};

package/bin/website-plugins/intercept/oipage-zipaper-intercept.js

@@ -14,7 +14,7 @@ module.exports = {
         if (request.headers["if-none-match"] === head["ETag"]) {
             response.writeHead('304', head);
             response.end();
-            console.log("<i> \x1b[1m\x1b[32m[OIPage-dev-server] Cache File: Zipaper\x1b[0m " + new Date().toLocaleString() + "\x1b[33m\x1b[1m 304\x1b[0m");;
+            console.log("<i> \x1b[1m\x1b[32m[OIPage-http-server] Cache File: Zipaper\x1b[0m " + new Date().toLocaleString() + "\x1b[33m\x1b[1m 304\x1b[0m");;
             return;
         }
 
@@ -24,7 +24,7 @@ module.exports = {
             encoding: "utf8"
         });
 
-        response.write(`let module = { exports: {}};
+        response.write(`let module = { exports: {} };
 let exports = module.exports;
 ${source}
 export let createApp = exports.createApp;

package/nodejs/animation/index.js

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

package/nodejs/cmdlog/index.js

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

package/nodejs/disk/index.js

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

package/nodejs/format/index.js

@@ -1,5 +1,5 @@
 /*!
-* format of OIPage v1.5.0-alpha.0
+* format of OIPage v1.5.0-alpha.2
 * git+https://github.com/oi-contrib/OIPage.git
 */
 
@@ -26,12 +26,12 @@ function numberFormat(input) {
             integerArray.unshift(integerValue.substring(index > 2 ? index - 3 : 0, index));
         }
 
-        return integerArray.join(",") + decimalValue;
+        return integerArray.join(",").replace(/^\-,/, "-") + decimalValue;
     }
 }
 
 function dateFormat(input, option) {
-    option = option || option;
+    option = option || {};
     var dateObj;
 
     // 如果无值，就用当前日期

package/nodejs/json/index.js

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

package/nodejs/logform/index.js

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

package/nodejs/reader/index.js

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

package/nodejs/throttle/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oipage",
-  "version": "1.5.0-alpha.0",
+  "version": "1.5.0-alpha.2",
   "description": "前端网页或应用快速开发助手，包括开发服务器、辅助命令、实用API等",
   "sideEffects": false,
   "scripts": {
@@ -35,7 +35,7 @@
   },
   "homepage": "https://oi-contrib.github.io/OIPage",
   "dependencies": {
-    "vislite": "^1.4.0",
+    "vislite": "^1.5.0",
     "xhtml-to-json": "^0.1.0",
     "zipaper": "^0.2.0"
   }

package/web/XMLHttpRequest/index.js

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

package/web/animation/index.js

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

package/web/format/index.js

@@ -1,5 +1,5 @@
 /*!
-* format of OIPage v1.5.0-alpha.0
+* format of OIPage v1.5.0-alpha.2
 * git+https://github.com/oi-contrib/OIPage.git
 */
 
@@ -26,12 +26,12 @@ export function numberFormat(input) {
             integerArray.unshift(integerValue.substring(index > 2 ? index - 3 : 0, index));
         }
 
-        return integerArray.join(",") + decimalValue;
+        return integerArray.join(",").replace(/^\-,/, "-") + decimalValue;
     }
 }
 
 export function dateFormat(input, option) {
-    option = option || option;
+    option = option || {};
     var dateObj;
 
     // 如果无值，就用当前日期

package/web/json/index.js

@@ -1,5 +1,5 @@
 /*!
-* json of OIPage v1.5.0-alpha.0
+* json of OIPage v1.5.0-alpha.2
 * git+https://github.com/oi-contrib/OIPage.git
 */
 import {reader} from "../reader/index.js";

package/web/onReady/index.js

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

package/web/performChunk/index.js

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

package/web/reader/index.js

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

package/web/style/index.js

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

package/web/throttle/index.js

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