oipage 1.7.0 → 1.8.0-alpha.1

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

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

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

@@ -1,46 +1,48 @@
-.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;
-    }
+.image-editor-view {
+    position: relative;
+    padding-top: 100px;
+
+    &>.menu {
+        position: absolute;
+        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;
+
+        #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

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

@@ -1,45 +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
-    }
+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

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

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

@@ -1,20 +1,27 @@
-import { defineRouter } from "zipaper"
-
-export default defineRouter({
-    routers: [{
-        path: "/",
-        redirect: "/appStore"
-    }, {
-        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"),
-    }, {
-        path: "/img-to-pdf",
-        component: () => import("./pages/img-to-pdf/index.js"),
-    }]
+import { defineRouter } from "zipaper"
+
+export default defineRouter({
+    routers: [{
+        path: "/",
+        redirect: "/appStore"
+    }, {
+        path: "/appStore",
+        component: () => import("./pages/appStore/index.js"),
+        children: [{
+            path: "/",
+            redirect: "/home"
+        }, {
+            path: "/home",
+            component: () => import("./pages/home/index.js"),
+        }, {
+            path: "/chart",
+            component: () => import("./pages/chart/index.js"),
+        }, {
+            path: "/image-editor",
+            component: () => import("./pages/image-editor/index.js"),
+        }, {
+            path: "/img-to-pdf",
+            component: () => import("./pages/img-to-pdf/index.js"),
+        }]
+    }]
 })