oipage 1.4.1 → 1.5.0-alpha.1

package/bin/website-htmls/pages/App/index.scss

@@ -32,12 +32,13 @@
 .fork {
     line-height: 30px;
     position: fixed;
-    background-color: #9E9E9E;
+    background-color: #607D8B;
     text-align: center;
     color: white;
-    outline: 2px dashed #9E9E9E;
+    outline: 2px dashed #607D8B;
     width: 200px;
-    transform: rotate(-45deg);
-    right: -40px;
-    bottom: 44px;
+    transform: rotate(45deg);
+    right: -45px;
+    top: 45px;
+    z-index: 1;
 }

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

@@ -1,6 +1,19 @@
-<header>
-    应用市场
-    <a class="fork" href="https://github.com/oi-contrib/OIPage" target="_blank">
-        Fork me on Github
-    </a>
-</header>
+<div class="appstore-view">
+    <header>
+        应用市场
+    </header>
+    <ul>
+        <li z-on:click.prevent="goto" tag="chart">
+            <img src="./images/chart.png" />
+            <h2>
+                群聊贴
+            </h2>
+        </li>
+        <li z-on:click="goto" tag="image-editor">
+            <img src="./images/image-editor.png" />
+            <h2>
+                图片编辑器
+            </h2>
+        </li>
+    </ul>
+</div>

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

@@ -10,7 +10,9 @@ export default defineElement({
         }
     },
     methods: {
-
+        goto(event, target) {
+            this.$goto("/" + target.getAttribute("tag"))
+        }
     },
     style: {
         content: style

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

@@ -1,27 +1,42 @@
-header {
-    height: 50px;
-    line-height: 50px;
-    background-color: white;
-    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;
-    background-image: url("./logo.png");
-    background-size: auto 90%;
-    background-repeat: no-repeat;
-    background-position-x: 5px;
-    padding-left: 50px;
-    font-size: 20px;
-    font-weight: 800;
+.appstore-view {
 
-    .fork {
-        line-height: 30px;
-        position: fixed;
-        background-color: #9E9E9E;
+    header {
+        height: 50px;
+        line-height: 50px;
+        background-color: white;
+        box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;
+        background-image: url("./images/logo.png");
+        background-size: auto 90%;
+        background-repeat: no-repeat;
+        background-position-x: 5px;
+        padding-left: 50px;
+        font-size: 18px;
+        font-weight: 800;
+    }
+
+    ul {
         text-align: center;
-        color: white;
-        outline: 2px dashed #9E9E9E;
-        width: 200px;
-        transform: rotate(-45deg);
-        right: -40px;
-        bottom: 44px;
-        font-weight: 400;
+        padding: 50px 0;
+
+        &>li {
+            display: inline-block;
+            margin: 0 10px;
+
+            &:hover {
+                text-decoration: underline;
+                cursor: pointer;
+            }
+
+            &>img {
+                border-radius: 10px;
+                width: 70px;
+            }
+
+            &>h2 {
+                font-size: 14px;
+                line-height: 2em;
+            }
+        }
     }
+
 }

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

@@ -0,0 +1,9 @@
+<form z-on:submit.prevent="doSubmit">
+    <div class="chart-view">
+        <div class="content" id="chart-content-id"></div>
+        <div class="input">
+            <input placeholder="请输入内容......" z-model="msg" spellcheck="false" autocomplete="off" />
+            <button type="submit">发送</button>
+        </div>
+    </div>
+</form>

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

@@ -0,0 +1,73 @@
+import { defineElement, ref } from "zipaper"
+import template from "./index.html"
+import style from "./index.scss"
+
+export default defineElement({
+    template,
+    data() {
+        return {
+            uniqueid: new Date().valueOf() + "#" + (Math.random() * 10000).toFixed(0),
+            msg: ref("")
+        }
+    },
+    created() {
+
+        let ws = new WebSocket('ws://' + window.location.hostname + ':' + (+window.location.port + 1) + '/');
+
+        // 连接成功
+        ws.addEventListener('open', () => {
+            ws.send('客户端和服务器建立连接成功！(' + this.uniqueid + ')');
+        });
+
+        // 监听来自服务器的数据
+        ws.addEventListener('message', (event) => {
+            let data = JSON.parse(event.data);
+
+            let contentEl = document.getElementById("chart-content-id");
+
+            let itemEl = document.createElement("div");
+            contentEl.appendChild(itemEl);
+
+            itemEl.setAttribute("class", "item");
+
+            if (data.uniqueid === this.uniqueid) {
+                itemEl.setAttribute("tag", "sender");
+            } else {
+                itemEl.setAttribute("tag", "receiver");
+            }
+
+            let textEl = document.createElement("div");
+            textEl.innerText = data.msg;
+            itemEl.appendChild(textEl);
+            textEl.setAttribute("class", "text");
+
+            itemEl.scrollIntoView({
+                behavior: 'smooth',
+                block: 'end',
+                inline: 'nearest'
+            });
+        });
+
+    },
+    methods: {
+        doSubmit() {
+            fetch("./chart/sendMsg", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json;charset=utf-8"
+                },
+                body: JSON.stringify({
+                    msg: this.msg,
+                    uniqueid: this.uniqueid
+                })
+            }).then(() => {
+                this.msg = "";
+            }).catch(() => {
+                alert("发送失败！");
+            });
+        }
+    },
+    style: {
+        content: style
+    }
+})

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

@@ -0,0 +1,73 @@
+.chart-view {
+    &>.content {
+        position: fixed;
+        width: 350px;
+        height: calc(100% - 130px);
+        border: 2px solid #000000;
+        left: 50%;
+        top: 50px;
+        transform: translateX(-50%);
+        padding: 5px;
+        overflow: auto;
+
+        &::-webkit-scrollbar {
+            width: 0;
+            height: 0;
+        }
+
+        &>.item {
+            display: flex;
+            padding: 5px;
+
+            &[tag="sender"] {
+                flex-direction: row-reverse;
+                padding-left: 50px;
+            }
+
+            &[tag="receiver"] {
+                flex-direction: row;
+                padding-right: 50px;
+            }
+
+            &>.text {
+                background-color: #dfdbdb;
+                padding: 5px;
+                width: fit-content;
+                border-radius: 5px;
+                font-size: 12px;
+            }
+        }
+    }
+
+    &>.input {
+        position: fixed;
+        width: 350px;
+        height: 30px;
+        left: 50%;
+        bottom: 50px;
+        transform: translateX(-50%);
+        display: flex;
+
+        &>input {
+            flex-grow: 1;
+            resize: none;
+            outline: none;
+            border: 2px solid #000000;
+            border-top-width: 0;
+            border-radius: 0;
+        }
+
+        &>button {
+            width: 70px;
+            cursor: pointer;
+            background-color: #000000;
+            color: white;
+            outline: none;
+            border: none;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+}

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

@@ -0,0 +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">
+        <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

@@ -0,0 +1,107 @@
+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

@@ -0,0 +1,46 @@
+.image-editor-view {
+    &>.menu {
+        position: fixed;
+        left: 50%;
+        top: 5px;
+        transform: translateX(-50%);
+        white-space: nowrap;
+
+        &>li {
+            display: inline-block;
+            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;
+            }
+        }
+    }
+
+    &>.content {
+        text-align: center;
+        margin-top: 100px;
+
+        #drawId {
+            display: inline-block;
+
+            &>canvas {
+                background-image: url("./images/mosaic.png");
+                outline: 2px solid #CDDC39;
+            }
+        }
+    }
+
+    &>.no-view {
+        display: none;
+    }
+}

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

@@ -7,5 +7,11 @@ export default defineRouter({
     }, {
         path: "/appStore",
         component: () => import("./pages/appStore/index.js"),
+    }, {
+        path: "/chart",
+        component: () => import("./pages/chart/index.js"),
+    }, {
+        path: "/image-editor",
+        component: () => import("./pages/image-editor/index.js"),
     }]
 })

package/bin/website-htmls/styles/common.css

@@ -1,3 +0,0 @@
-body {
-    font-family: cursive;
-}

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

@@ -0,0 +1,34 @@
+const headFactory = require("./head.js");
+
+const head = headFactory();
+
+// 聊天
+module.exports = {
+    test: /^\/chart\//,
+    handler(request, response, wsHandler) {
+        let url = decodeURIComponent(request.url);
+
+        let requestData = "";
+
+        request.on('data', (chunk) => {
+            requestData += chunk;
+        });
+
+        request.on('end', () => {
+
+            if (/sendMsg$/.test(url)) {
+                wsHandler.notifyBrowser({
+                    payloadData: requestData
+                });
+            }
+
+            head["Content-Type"] = "application/json;charset=utf-8";
+            response.writeHead(200, head);
+            response.write(JSON.stringify({
+                code: "000000"
+            }));
+            response.end();
+
+        });
+    }
+};

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

@@ -4,6 +4,6 @@ module.exports = function () {
     return {
         'Access-Control-Allow-Origin': '*',
         'Server': 'Powered by OIPage:website@' + pkg.version,
-        'Content-type': 'text/plain;charset=utf-8'
+        'Content-Type': 'text/plain;charset=utf-8'
     };
 };

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

@@ -1,5 +1,9 @@
 const OIPageZipaperIntercept = require("./oipage-zipaper-intercept.js");
+const OIPageVISLiteIntercept = require("./oipage-vislite-intercept.js");
+const ChartIntercept = require("./chart.js");
 
 module.exports = [
-    OIPageZipaperIntercept
+    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-dev-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

@@ -8,7 +8,7 @@ const head = headFactory();
 module.exports = {
     test: /^zipaper$/,
     handler(request, response) {
-        head["Content-type"] = "application/javascript;charset=utf-8";
+        head["Content-Type"] = "application/javascript;charset=utf-8";
         head["ETag"] = "Zipaper@v" + require("zipaper/package.json").version;
 
         if (request.headers["if-none-match"] === head["ETag"]) {
@@ -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.4.1
+* animation of OIPage v1.5.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/nodejs/cmdlog/index.js

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

package/nodejs/disk/index.js

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

package/nodejs/format/index.js

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

package/nodejs/json/index.js

@@ -1,5 +1,5 @@
 /*!
-* json of OIPage v1.4.1
+* json of OIPage v1.5.0-alpha.1
 * 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.4.1
+* logform of OIPage v1.5.0-alpha.1
 * 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.4.1
+* reader of OIPage v1.5.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/nodejs/throttle/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oipage",
-  "version": "1.4.1",
+  "version": "1.5.0-alpha.1",
   "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"
   }