oipage 1.7.0 → 1.8.0-alpha.0

package/bin/website-htmls/main.js

@@ -1,14 +1,14 @@
-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)
+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/App/index.html

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

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

@@ -1,23 +1,23 @@
-import { defineElement } from "zipaper"
-import template from "./index.html"
-import style from "./index.scss"
-
-export default defineElement({
-    template,
-    data() {
-        return {
-
-        }
-    },
-    methods: {
-
-        // 点击遮罩关闭弹框
-        closeDialog() {
-            this.$closeDialog()
-        }
-
-    },
-    style: {
-        content: style
-    }
+import { defineElement } from "zipaper"
+import template from "./index.html"
+import style from "./index.scss"
+
+export default defineElement({
+    template,
+    data() {
+        return {
+
+        }
+    },
+    methods: {
+
+        // 点击遮罩关闭弹框
+        closeDialog() {
+            this.$closeDialog()
+        }
+
+    },
+    style: {
+        content: style
+    }
 })

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

@@ -1,44 +1,44 @@
-#dialog-root {
-    width: 0;
-    height: 0;
-    position: fixed;
-    left: 0;
-    top: 0;
-    z-index: 101;
-
-    .mask {
-        width: 100vw;
-        height: 100vh;
-        background-color: #0000004f;
-
-        &:last-child {
-            display: none;
-        }
-    }
-
-    .content {
-        display: none;
-        position: absolute;
-        left: 50vw;
-        top: 50vh;
-        transform: translateX(-50%) translateY(-50%);
-
-        &:last-child {
-            display: block;
-        }
-    }
-}
-
-.fork {
-    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;
+#dialog-root {
+    width: 0;
+    height: 0;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 101;
+
+    .mask {
+        width: 100vw;
+        height: 100vh;
+        background-color: #0000004f;
+
+        &:last-child {
+            display: none;
+        }
+    }
+
+    .content {
+        display: none;
+        position: absolute;
+        left: 50vw;
+        top: 50vh;
+        transform: translateX(-50%) translateY(-50%);
+
+        &:last-child {
+            display: block;
+        }
+    }
+}
+
+.fork {
+    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;
 }

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

@@ -1,25 +1,6 @@
-<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>
-        <li z-on:click="goto" tag="img-to-pdf">
-            <img src="./images/img-to-pdf.svg" />
-            <h2>
-                图片转PDF
-            </h2>
-        </li>
-    </ul>
+<div class="appstore-view">
+    <header>
+        应用市场
+    </header>
+    <router></router>
 </div>

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

@@ -1,20 +1,20 @@
-import { defineElement, ref } from "zipaper"
-import template from "./index.html"
-import style from "./index.scss"
-
-export default defineElement({
-    template,
-    data() {
-        return {
-
-        }
-    },
-    methods: {
-        goto(event, target) {
-            this.$goto("/" + target.getAttribute("tag"))
-        }
-    },
-    style: {
-        content: style
-    }
+import { defineElement, ref } from "zipaper"
+import template from "./index.html"
+import style from "./index.scss"
+
+export default defineElement({
+    template,
+    data() {
+        return {
+
+        }
+    },
+    methods: {
+        goto(event, target) {
+            this.$goto("/" + target.getAttribute("tag"))
+        }
+    },
+    style: {
+        content: style
+    }
 })

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

@@ -15,12 +15,14 @@
     }
 
     ul {
-        text-align: center;
-        padding: 50px 0;
+        text-align: left;
+        padding: 20px 10px;
 
         &>li {
+            text-align: center;
             display: inline-block;
-            margin: 0 10px;
+            margin: 10px;
+            width: 90px;
 
             &:hover {
                 text-decoration: underline;
@@ -29,7 +31,7 @@
 
             &>img {
                 border-radius: 10px;
-                width: 70px;
+                width: 50px;
             }
 
             &>h2 {

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

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

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

@@ -1,73 +1,74 @@
-.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;
-            }
-        }
-    }
+.chart-view {
+    &>.content {
+        position: fixed;
+        width: 350px;
+        height: calc(100% - 150px);
+        border: 2px solid #000000;
+        left: 50%;
+        top: 100px;
+        transform: translateX(-50%);
+        padding: 5px;
+        overflow: auto;
+        border-radius: 10px 10px 0 0;
+
+        &::-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/home/index.html

@@ -0,0 +1,22 @@
+<div class="home-view">
+    <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>
+        <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/home/index.js

@@ -0,0 +1,20 @@
+import { defineElement, ref } from "zipaper"
+import template from "./index.html"
+import style from "./index.scss"
+
+export default defineElement({
+    template,
+    data() {
+        return {
+
+        }
+    },
+    methods: {
+        goto(event, target) {
+            this.$goto("/appStore/" + target.getAttribute("tag"))
+        }
+    },
+    style: {
+        content: style
+    }
+})

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

@@ -0,0 +1,29 @@
+.home-view {
+    ul {
+        text-align: left;
+        padding: 20px 10px;
+
+        &>li {
+            text-align: center;
+            display: inline-block;
+            margin: 10px;
+            width: 90px;
+
+            &:hover {
+                text-decoration: underline;
+                cursor: pointer;
+            }
+
+            &>img {
+                border-radius: 10px;
+                width: 50px;
+            }
+
+            &>h2 {
+                font-size: 14px;
+                line-height: 2em;
+            }
+        }
+    }
+
+}