oipage 1.4.1 → 1.5.0-alpha.1

package/CHANGELOG

@@ -96,4 +96,14 @@ v1.4.1:
     date:2025-09-02
     changes:
         - 修复bug
-          1、修复开发服务器大文件丢失文件大小问题
+          1、修复开发服务器大文件丢失文件大小问题
+v1.5.0:
+    date:
+    changes:
+        - 修复bug
+          1、修复404网站在手机浏览器显示高问题
+          2、服务器响应类型由 Content-type 改为 Content-Type
+        - 新增功能
+          1、开发服务器 / 应用市场
+            * 聊天工具
+            * 图片编辑器

package/bin/WebSocket/decodeWsFrame.js

@@ -0,0 +1,43 @@
+
+// 处理收到的数据
+module.exports = function decodeWsFrame(data) {
+    let start = 0;
+    let frame = {
+        isFinal: (data[start] & 0x80) === 0x80,
+        opcode: data[start++] & 0xF,
+        masked: (data[start] & 0x80) === 0x80,
+        payloadLen: data[start++] & 0x7F,
+        maskingKey: '',
+        payloadData: null
+    };
+
+    if (frame.payloadLen === 126) {
+        frame.payloadLen = (data[start++] << 8) + data[start++];
+    } else if (frame.payloadLen === 127) {
+        frame.payloadLen = 0;
+        for (let i = 7; i >= 0; --i) {
+            frame.payloadLen += (data[start++] << (i * 8));
+        }
+    }
+
+    if (frame.payloadLen) {
+        if (frame.masked) {
+            const maskingKey = [
+                data[start++],
+                data[start++],
+                data[start++],
+                data[start++]
+            ];
+
+            frame.maskingKey = maskingKey;
+
+            frame.payloadData = data
+                .slice(start, start + frame.payloadLen)
+                .map((byte, idx) => byte ^ maskingKey[idx % 4]);
+        } else {
+            frame.payloadData = data.slice(start, start + frame.payloadLen);
+        }
+    }
+
+    return frame;
+};

package/bin/WebSocket/encodeWsFrame.js

@@ -0,0 +1,28 @@
+
+// 处理发出的数据
+module.exports = function encodeWsFrame(data) {
+    const isFinal = data.isFinal !== undefined ? data.isFinal : true,
+        opcode = data.opcode !== undefined ? data.opcode : 1,
+        payloadData = data.payloadData ? Buffer.from(data.payloadData) : null,
+        payloadLen = payloadData ? payloadData.length : 0;
+
+    let frame = [];
+
+    if (isFinal) frame.push((1 << 7) + opcode);
+    else frame.push(opcode);
+
+    if (payloadLen < 126) {
+        frame.push(payloadLen);
+    } else if (payloadLen < 65536) {
+        frame.push(126, payloadLen >> 8, payloadLen & 0xFF);
+    } else {
+        frame.push(127);
+        for (let i = 7; i >= 0; --i) {
+            frame.push((payloadLen & (0xFF << (i * 8))) >> (i * 8));
+        }
+    }
+
+    frame = payloadData ? Buffer.concat([Buffer.from(frame), payloadData]) : Buffer.from(frame);
+
+    return frame;
+};

package/bin/WebSocket/headersToJSON.js

@@ -0,0 +1,26 @@
+module.exports = function (headersStr) {
+
+    let headersArray = headersStr.split(/\r{0,1}\n/);
+    let headersJSON = {};
+
+    // 第一行的内容：GET / HTTP/1.1
+    let firstLine = headersArray.shift().split(' ');
+    headersJSON.method = firstLine[0];
+    headersJSON.url = firstLine[1];
+    headersJSON.protocol = firstLine[2];
+
+    for (let item of headersArray) {
+        let temp = item.split(':');
+
+        if (temp.length > 1) {
+
+            let key = temp.shift();
+            let value = temp.join(':');
+
+            headersJSON[key] = value.trim();
+
+        }
+    }
+
+    return headersJSON;
+};

package/bin/WebSocket/index.js

@@ -0,0 +1,80 @@
+const net = require('net');
+const crypto = require('crypto');
+
+const headersToJSON = require('./headersToJSON');
+const decodeWsFrame = require('./decodeWsFrame');
+const encodeWsFrame = require('./encodeWsFrame');
+
+module.exports = function (port, name, version) {
+    let sockets = [];
+
+    let handler = {
+        notifyBrowser: (msg) => {
+            for (let socket of sockets) {
+                socket.write(encodeWsFrame(msg));
+            }
+        }
+    };
+
+    const server = net.createServer(socket => {
+
+        // 错误
+        socket.on('error', (error) => {
+            console.log('Connection error:', error.message);
+        });
+
+        // 数据
+        socket.on('data', buffer => {
+            console.log('Connection data:' + (decodeWsFrame(buffer).payloadData?.toString() || "断开连接......"));
+        });
+
+        // 连接
+        socket.once('data', buffer => {
+
+            // 把请求头变成容易操作的json
+            const headers = headersToJSON(buffer.toString());
+
+            // 如果是ws请求
+            // 就需要建立连接
+            if (headers.Upgrade == 'websocket') {
+
+                if (headers['Sec-WebSocket-Version'] !== '13') {
+                    console.log('\r\n警告：当前WebSocket版本为' + headers['Sec-WebSocket-Version'] + "，可能存在兼容问题~\r\n");
+                }
+
+                // 开始连接
+                /*
+                    协议中规定的校验用GUID，可参考如下链接：
+                    https://tools.ietf.org/html/rfc6455#section-5.5.2
+                    https://stackoverflow.com/questions/13456017/what-does-258eafa5-e914-47da-95ca-c5ab0dc85b11-means-in-websocket-protocol
+                */
+                const GUID = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11';
+                const key = headers['Sec-WebSocket-Key'];
+                const hash = crypto.createHash('sha1');  // 创建一个签名算法为sha1的哈希对象
+
+                hash.update(`${key}${GUID}`);  // 将key和GUID连接后，更新到hash
+                const result = hash.digest('base64'); // 生成base64字符串
+                const header = `HTTP/1.1 101 Switching Protocols\r\nServer: Powered by ${name}@${version}\r\nUpgrade: websocket\r\nConnection: Upgrade\r\nSec-Websocket-Accept: ${result}\r\n\r\n`; // 生成供前端校验用的请求头
+
+                socket.write(header);  // 返回HTTP头，告知客户端校验结果，HTTP状态码101表示切换协议：https://httpstatuses.com/101。
+                // 若客户端校验结果正确，在控制台的Network模块可以看到HTTP请求的状态码变为101 Switching Protocols，同时客户端的ws.onopen事件被触发。
+
+                sockets.push(socket);
+            }
+
+            // 否则就普通的，
+            // 普通的由http服务器提供支持
+            else {
+                socket.end();
+
+            }
+        });
+    });
+
+    // 启动
+    server.listen(port);
+
+    console.log('<i> \x1b[1m\x1b[32m[' + name + '] Loopback: \x1b[36mws://localhost:' + port + '/\x1b[0m\n');
+
+    return handler;
+};

package/bin/intercept.js

@@ -1,7 +1,7 @@
-exports.doIntercept = function (url, intercept, request, response) {
+exports.doIntercept = function (url, intercept, request, response, wsHandler) {
     for (let item of intercept) {
         if (item.test.test(url)) {
-            item.handler(request, response);
+            item.handler(request, response, wsHandler);
             return true;
         }
     }

package/bin/serve.js

@@ -8,8 +8,10 @@ const resolve404 = require("./tools/resolve404.js");
 const resolveImportFactory = require("./tools/resolveImport.js");
 const { doIntercept } = require("./intercept.js");
 
-const webisteIntercept = require("./website-plugins/intercept/index.js");
-const webisteLoader = require("./website-plugins/loader/index.js");
+const websiteIntercept = require("./website-plugins/intercept/index.js");
+const websiteLoader = require("./website-plugins/loader/index.js");
+
+const WebSocketClass = require("./WebSocket/index.js");
 
 // 开发服务器
 module.exports = function (config) {
@@ -19,9 +21,11 @@ module.exports = function (config) {
     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") + "-http-server";
+    const name = (config.name || "OIPage") + "-dev-server";
     const version = config.version || packageValue.version;
 
+    const wsHandler = WebSocketClass(port + 1, (config.name || "OIPage") + "-dev-websocket", version);
+
     let Server = createServer(function (request, response) {
         let headers = request.headers;
         let url = decodeURIComponent(request.url);
@@ -40,7 +44,7 @@ module.exports = function (config) {
         }
 
         // 请求拦截
-        if (doIntercept(url.replace(/^\/_oipage_website_/, "").replace(/^\/@modules\//, ""), isWebsite ? webisteIntercept : config.devServer.intercept, request, response)) {
+        if (doIntercept(url.replace(/^\/_oipage_website_/, "").replace(/^\/@modules\//, ""), isWebsite ? websiteIntercept : config.devServer.intercept, request, response, wsHandler)) {
             console.log("<i> \x1b[1m\x1b[32m[" + name + "] intercept: " + url + '\x1b[0m ' + new Date().toLocaleString());
         }
 
@@ -54,7 +58,7 @@ module.exports = function (config) {
             let fileModifiedTime = new Date(fileInfo.mtime).toGMTString();
 
             let responseHeader = {
-                'Content-type': (fileType || "text/plain") + ";charset=utf-8",
+                'Content-Type': (fileType || "text/plain") + ";charset=utf-8",
                 'Access-Control-Allow-Origin': '*',
                 'Server': 'Powered by ' + name + '@' + version,
                 'Cache-Control': 'no-cache',
@@ -78,13 +82,13 @@ module.exports = function (config) {
 
             // 如果文件小于10M，认为不大，直接读取
             if (fileInfo.size < 10 * 1024 * 1024) {
-                let { source, resolveImport } = resolveImportFactory(basePath, filePath, entry, isWebsite ? webisteIntercept : config.devServer.intercept, urlArray[1] === "download", isWebsite)
+                let { source, resolveImport } = resolveImportFactory(basePath, filePath, entry, isWebsite ? websiteIntercept : config.devServer.intercept, urlArray[1] === "download", isWebsite)
 
                 // 只处理非下载文件
                 // 过大的也不进行处理
-                // （对webiste无效）
+                // （对website无效）
                 if (urlArray[1] !== "download") {
-                    let loaders = isWebsite ? webisteLoader : config.module;
+                    let loaders = isWebsite ? websiteLoader : config.module;
 
                     for (let i = 0; i < loaders.rules.length; i++) {
                         if (loaders.rules[i].test.test(filePath)) {
@@ -94,7 +98,7 @@ module.exports = function (config) {
                                 entry, // 是否是浏览器地址栏直接访问
                                 setFileType(_fileType) { // 设置文件类型
                                     fileType = _fileType;
-                                    responseHeader['Content-type'] = _fileType + ";charset=utf-8";
+                                    responseHeader['Content-Type'] = _fileType + ";charset=utf-8";
                                 }
                             }, source);
                             break;
@@ -125,7 +129,7 @@ module.exports = function (config) {
         // 否则就是404
         else {
             response.writeHead(404, {
-                'Content-type': "text/html;charset=utf-8",
+                'Content-Type': "text/html;charset=utf-8",
                 'Access-Control-Allow-Origin': '*',
                 'Server': 'Powered by ' + name + '@' + version
             });

package/bin/template/404.html

@@ -26,7 +26,6 @@
         }
 
         .fork {
-            width: 160px;
             line-height: 30px;
             position: fixed;
             background-color: #607D8B;
@@ -59,7 +58,11 @@
             top: 50px;
             outline: 1px solid #9E9E9E;
             width: calc(100vw - 40px);
-            height: calc(100vh - 100px);
+
+            /* 2025年9月17日 于南京 */
+            /* 100vh改成100%是为了解决手机端显示问题 */
+            height: calc(100% - 100px);
+
             overflow: auto;
             padding: 20px;
             border-radius: 5px;

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/index.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>OIPage 应用市场</title>
-    <link rel="shortcut icon" href="./logo.png">
+    <link rel="shortcut icon" href="./images/logo.png">
     <link rel="stylesheet" href="./styles/normalize.css">
     <link rel="stylesheet" href="./styles/common.css">
 </head>

package/bin/website-htmls/main.js

@@ -4,6 +4,8 @@ import App from "./pages/App/index.js"
 import router from "./router.config.js"
 import dialogs from "./dialogs/index.js"
 
+// https://oi-contrib.github.io/Zipaper/index.html
+
 createApp(App)
     .use(router) // 路由
     .use(dialogs) // 弹框

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

@@ -1,4 +1,7 @@
 <router></router>
 <div id="dialog-root">
     <div class="mask" z-on:click="closeDialog"></div>
-</div>
+</div>
+<a class="fork" href="https://github.com/oi-contrib/OIPage" target="_blank">
+    Fork me on Github
+</a>