@jx3box/jx3box-ui 0.0.1

package/src/LeftSideToggle.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class="c-side-toggle" @click.stop="toggleLeftSide" :class="{ mobileOnly: isMobileOnly, on: isOpen }">
+        <img class="u-toggle" svg-inline src="../assets/img/bread/menu.svg" />
+    </div>
+</template>
+
+<script>
+import Bus from "../utils/bus";
+export default {
+    name: "LeftSideToggle",
+    props: ["mobileOnly"],
+    data: function () {
+        return {
+            isOpen: true,
+        };
+    },
+    computed: {
+        isMobileOnly: function () {
+            return this.mobileOnly;
+        },
+    },
+    methods: {
+        toggleLeftSide: function () {
+            let status = !this.isOpen;
+            Bus.emit("toggleLeftSide", status);
+        },
+    },
+    mounted: function () {
+        Bus.on("toggleLeftSide", (data) => {
+            this.isOpen = data;
+        });
+
+        if (window.innerWidth < 1024) {
+            this.isOpen = false;
+        }
+    },
+    components: {},
+};
+</script>
+
+<style lang="less">
+.c-side-toggle {
+    .pointer;
+    .size(20px, 28px);
+    padding: 0 5px;
+    .u-toggle {
+        .h(29px);
+        fill: @color;
+    }
+    &.mobileOnly {
+        .none;
+    }
+    &.on {
+        svg {
+            fill: @primary;
+        }
+    }
+}
+@media screen and (max-width: @ipad) {
+    .c-side-toggle {
+        .db !important;
+    }
+}
+</style>

package/src/LeftSidebar.vue

@@ -0,0 +1,123 @@
+<template>
+    <aside
+        class="c-sidebar-left c-sidebar m-theme"
+        :class="{
+            isclose: !isOpen,
+            isopen: isOpen,
+            'without-bread': withoutBread,
+        }"
+        v-if="!isApp"
+        :style="{ backgroundImage: `url(${bg})` }"
+    >
+        <div class="c-sidebar-left-inner">
+            <slot></slot>
+        </div>
+        <span
+            class="c-sidebar-left-toggle"
+            :class="!isOpen && 'close-sidebar-left'"
+            @click="toggleLeftSide"
+            :title="isOpen ? '收起侧边栏' : '打开侧边栏'"
+        >
+            <el-icon>
+                <ArrowRight v-if="!isOpen" />
+                <ArrowLeft v-else />
+            </el-icon>
+        </span>
+    </aside>
+</template>
+
+<script>
+import Bus from "../utils/bus";
+import { isApp } from "../assets/js/app.js";
+import { getDecoration } from "../service/cms";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+const DECORATION_SIDEBAR = "decoration_sidebar";
+export default {
+    name: "LeftSidebar",
+    props: ["open", "withoutBread", "uid"],
+    data: function () {
+        return {
+            isOpen: true,
+            user_id: null,
+            isApp: isApp(),
+            bg: "",
+        };
+    },
+    computed: {
+        stickyHeader: function () {
+            return this.withoutBread;
+        },
+    },
+    watch: {
+        open: function (newval) {
+            this.isOpen = newval === undefined ? true : !!newval;
+        },
+        uid: function (newval) {
+            this.user_id = newval;
+            this.getDecoration();
+        },
+    },
+    methods: {
+        toggleLeftSide: function () {
+            let status = !this.isOpen;
+            Bus.emit("toggleLeftSide", status);
+        },
+        showDecoration: function (val, type) {
+            return JX3BOX.__imgPath + `decoration/images/${val}/${type}.png`;
+        },
+        getDecoration() {
+            if (!this.user_id) {
+                return;
+            }
+            let decoration_sidebar = sessionStorage.getItem(DECORATION_SIDEBAR + this.user_id) || "";
+            if (decoration_sidebar == "no") return;
+            //已有缓存，读取解析
+            try {
+                let sidebar = JSON.parse(decoration_sidebar);
+                this.bg = this.showDecoration(sidebar.val, "sidebar");
+            } catch (err) {
+                getDecoration({ using: 1, user_id: this.user_id, type: "sidebar" }).then((data) => {
+                    let res = data.data.data || [];
+                    if (res.length == 0) {
+                        //空 则为无主题，不再加载接口，界面设No
+                        sessionStorage.setItem(DECORATION_SIDEBAR + this.user_id, "no");
+                        return;
+                    }
+                    let sidebar = res[0];
+                    this.bg = this.showDecoration(sidebar.val, "sidebar");
+                    sessionStorage.setItem(DECORATION_SIDEBAR + this.user_id, JSON.stringify(sidebar));
+                });
+            }
+        },
+    },
+    mounted: function () {
+        Bus.on("toggleLeftSide", (data) => {
+            this.isOpen = data;
+        });
+
+        if (window.innerWidth < 1024) {
+            this.isOpen = false;
+
+            document.addEventListener("click", function () {
+                Bus.emit("toggleLeftSide", false);
+            });
+        }
+    },
+    created: function () {
+        this.isOpen = this.open === undefined ? true : this.open;
+        this.user_id = this.uid;
+        this.getDecoration();
+    },
+};
+</script>
+
+<style lang="less">
+@import "../assets/css/common/left-sidebar.less";
+// 虚拟装扮主题
+.m-theme {
+    // background: url(../assets/testbg.png) no-repeat;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: top right;
+}
+</style>

package/src/Main.vue

@@ -0,0 +1,48 @@
+<template>
+    <main
+        class="c-main"
+        :class="{
+            'without-right': withoutRight,
+            'without-left': expanding,
+            'without-bread': withoutBread,
+        }"
+    >
+        <slot></slot>
+    </main>
+</template>
+
+<script>
+import Bus from "../utils/bus";
+export default {
+    name: "CommonMain",
+    props: ["withoutRight", "withoutLeft", "withoutBread"],
+    data: function () {
+        return {
+            expanding: false,
+        };
+    },
+    computed: {
+        stickyHeader: function () {
+            return this.withoutBread;
+        },
+    },
+    watch: {
+        withoutLeft: function (newval) {
+            this.expanding = this.withoutLeft === undefined ? false : newval;
+        },
+    },
+    methods: {},
+    mounted: function () {
+        Bus.on("toggleLeftSide", (data) => {
+            this.expanding = !data;
+        });
+    },
+    created: function () {
+        this.expanding = this.withoutLeft === undefined ? false : !!this.withoutLeft;
+    },
+};
+</script>
+
+<style lang="less">
+@import "../assets/css/common/main.less";
+</style>

package/src/RightSidebar.vue

@@ -0,0 +1,61 @@
+<template>
+    <aside class="c-sidebar-right c-sidebar" v-if="!isApp" :class="[isOpen ? 'is-open' : 'is-close', {'show-toggle': showToggle}]">
+        <div class="c-sidebar-right-inner">
+            <slot></slot>
+        </div>
+
+        <template v-if="showToggle">
+            <span
+                class="c-sidebar-right-toggle"
+                :class="!isOpen && 'close-sidebar-right'"
+                @click="toggleRightSide"
+                :title="isOpen ? '收起侧边栏' : '打开侧边栏'"
+            >
+                <el-icon>
+                    <ArrowLeft v-show="!isOpen" />
+                    <ArrowRight v-show="isOpen" />
+                </el-icon>
+            </span>
+        </template>
+    </aside>
+</template>
+
+<script>
+import { isApp } from "../assets/js/app.js";
+import Bus from "../utils/bus";
+export default {
+    name: "RightSidebar",
+    props: {
+        // 展示收起按钮
+        showToggle: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data: function () {
+        return {
+            isOpen: true,
+            isApp: isApp(),
+        };
+    },
+    computed: {},
+    methods: {
+        toggleRightSide: function () {
+            Bus.emit("toggleRightSide", !this.isOpen);
+        },
+    },
+    mounted: function () {
+        Bus.on("toggleRightSide", (data) => {
+            this.isOpen = data;
+        });
+
+        if (window.innerWidth <= 1440) {
+            this.isOpen = false;
+        }
+    },
+};
+</script>
+
+<style lang="less">
+@import "../assets/css/common/right-sidebar.less";
+</style>