@jx3box/jx3box-vue3-ui 0.0.3

package/src/Header.vue

@@ -0,0 +1,95 @@
+<template>
+    <header class="c-header" id="c-header" :class="{ isOverlay: overlayEnable && isOverlay }" v-if="!isApp">
+        <div class="c-header-inner">
+            <!-- logo -->
+            <header-logo />
+
+            <!-- origin -->
+            <clientSwitch :defaultValue="client" />
+
+            <!-- game -->
+            <!-- <gameSwitch /> -->
+
+            <!-- search -->
+            <header-search :client="client" />
+
+            <!-- nav -->
+            <header-nav :client="client" />
+
+            <slot></slot>
+
+            <!-- user -->
+            <header-user :client="client" />
+        </div>
+        <Box class="c-header-jx3box" :overlayEnable="overlayEnable" :client="client" />
+    </header>
+</template>
+
+<script>
+import _ from "lodash";
+import { isApp, KW } from "../assets/js/app.js";
+
+// components
+import logo from "./header/Logo.vue";
+import clientSwitch from "./header/ClientSwitch.vue";
+import search from "./header/Search.vue";
+import nav from "./header/Nav.vue";
+import user from "./header/User.vue";
+import Box from "../src/Box.vue";
+
+export default {
+    name: "CommonHeader",
+    props: ["overlayEnable"],
+    data: function () {
+        return {
+            isOverlay: false,
+            isApp: isApp(),
+        };
+    },
+    computed: {
+        client: function () {
+            return location.hostname.includes("origin") ? "origin" : "std";
+        },
+    },
+    methods: {
+        // webView检测
+        checkIsWebView: function () {
+            if (window.navigator.userAgent.includes(KW)) {
+                document.documentElement.classList.add("env-app");
+            }
+        },
+
+        // 检查
+        init: function () {
+            this.checkIsWebView();
+        },
+    },
+    created: function () {
+        this.init();
+
+        if (this.overlayEnable) {
+            const vm = this;
+            window.addEventListener(
+                "scroll",
+                _.throttle(() => {
+                    vm.isOverlay = window.scrollY > 200 ? true : false;
+                }, 200)
+            );
+        }
+    },
+    mounted: function () {},
+    components: {
+        "header-logo": logo,
+        "header-search": search,
+        "header-nav": nav,
+        "header-user": user,
+        Box,
+        clientSwitch,
+        // gameSwitch,
+    },
+};
+</script>
+
+<style lang="less">
+@import "../assets/css/header.less";
+</style>

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/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/main.less";
+</style>

package/src/RightSidebar.vue

@@ -0,0 +1,25 @@
+<template>
+    <aside class="c-sidebar-right c-sidebar" v-if="!isApp">
+        <slot></slot>
+    </aside>
+</template>
+
+<script>
+import { isApp } from "../assets/js/app.js";
+export default {
+    name: "RightSidebar",
+    props: [],
+    data: function () {
+        return {
+            isApp: isApp(),
+        };
+    },
+    computed: {},
+    methods: {},
+    mounted: function () {},
+};
+</script>
+
+<style lang="less">
+@import "../assets/css/right-sidebar.less";
+</style>

package/src/bread/Admin.vue

@@ -0,0 +1,308 @@
+<template>
+    <el-drawer
+        class="c-admin"
+        title="管理面板"
+        v-model="dialog_visible"
+        :before-close="close"
+        append-to-body
+        :modal="false"
+        :with-header="false"
+        v-if="hasRight"
+        ref="adminDrawer"
+    >
+        <div class="c-admin-wrapper">
+            <!-- <template v-if="isAdmin"> -->
+            <el-divider content-position="left">状态变更</el-divider>
+            <el-radio-group v-model="post_status" size="small" class="c-admin-status">
+                <el-radio-button v-for="(option, key) in status_options" :label="key" :key="key">{{
+                    option
+                }}</el-radio-button>
+            </el-radio-group>
+            <!-- </template> -->
+
+            <el-divider content-position="left">可见性变更</el-divider>
+            <el-radio-group v-model="visible" size="small" class="c-admin-status">
+                <el-radio-button v-for="(option, key) in visible_options" :label="key" :key="key">{{
+                    option
+                }}</el-radio-button>
+            </el-radio-group>
+
+            <el-divider content-position="left">推荐角标</el-divider>
+            <el-checkbox-group v-model="mark" class="c-admin-mark">
+                <el-checkbox v-for="(option, key) in mark_options" :label="key" :key="key">{{ option }}</el-checkbox>
+            </el-checkbox-group>
+
+            <el-divider content-position="left">加粗高亮</el-divider>
+            <el-checkbox class="c-admin-highlight-checkbox" v-model="isHighlight">开启高亮</el-checkbox>
+            <template v-if="isHighlight">
+                <el-color-picker
+                    class="c-admin-highlight-block"
+                    v-model="color"
+                    :predefine="color_options"
+                    size="small"
+                ></el-color-picker>
+                <span class="c-admin-highlight-preview" :style="{ color: color }">预览高亮效果</span>
+            </template>
+
+            <el-divider content-position="left">是否置顶</el-divider>
+            <el-switch v-model="isSticky" active-text="置顶" class="switch-post-pinned drawer-item-content"></el-switch>
+
+            <el-divider content-position="left">封面海报</el-divider>
+            <div class="c-admin-banner">
+                <el-upload
+                    class="c-admin-upload el-upload--picture-card"
+                    :action="uploadurl"
+                    :with-credentials="true"
+                    :show-file-list="false"
+                    :on-success="uploadSuccess"
+                    :on-error="uploadFail"
+                >
+                    <img v-if="post_banner" :src="post_banner" />
+                    <el-icon><Plus /></el-icon>
+                </el-upload>
+                <el-input class="u-banner" v-model="post_banner" size="small">
+                    <template #prepend>
+                        <span>海报地址</span>
+                    </template>
+                    <template #append>
+                        <span>
+                            <span class="u-btn" @click="removeBanner">
+                                <el-icon><CircleClose /></el-icon> 移除海报
+                            </span>
+                        </span>
+                    </template>
+                </el-input>
+            </div>
+
+            <el-divider content-position="left">元信息</el-divider>
+            <div class="c-admin-info">
+                <div class="c-admin-type">
+                    <el-select v-model="post_type" placeholder="请选择类型" class="drawer-item-content">
+                        <el-option
+                            v-for="type in type_options"
+                            :key="type.value"
+                            :label="type.label"
+                            :value="type.value"
+                        ></el-option>
+                    </el-select>
+                </div>
+                <div class="c-admin-author">
+                    <el-input
+                        v-model="post_author"
+                        placeholder="请输入作者uid"
+                        class="input-author drawer-item-content"
+                    ></el-input>
+                </div>
+            </div>
+
+            <div class="c-admin-buttons">
+                <el-button type="primary" @click="submit" :loading="pushing">提交</el-button>
+                <el-button plain @click="close">取消</el-button>
+            </div>
+        </div>
+    </el-drawer>
+</template>
+
+<script>
+import Bus from "../../utils/bus";
+import { getRewrite } from "@jx3box/jx3box-common/js/utils";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import { getSetting, postSetting } from "../../service/admin";
+import User from "@jx3box/jx3box-common/js/user";
+import MARK from "@jx3box/jx3box-common/data/mark.json";
+import { onClickOutside } from "@vueuse/core";
+export default {
+    name: "BreadAdmin",
+    data() {
+        return {
+            // 可视
+            dialog_visible: false,
+
+            // 数据
+            pulled: false,
+            pushing: false,
+
+            // 权限
+            hasRight: false,
+            pid: 0,
+            channel: "",
+
+            // 状态
+            post_status: "publish",
+            status_options: {
+                publish: "默认",
+                draft: "草稿",
+                pending: "待审核",
+                dustbin: "删除",
+            },
+            visible: "0",
+            visible_options: JX3BOX.__visibleMap,
+
+            // 角标
+            mark: [],
+            mark_options: MARK.cms,
+
+            // 高亮
+            isHighlight: false,
+            color: "rgb(255,0,1)",
+            color_options: [
+                "rgb(255,0,1)",
+                "rgb(2,209,248)",
+                "rgb(147,217,25)",
+                "rgb(255,154,2)",
+                "rgb(255,44,142)",
+                "rgb(142,46,255)",
+            ],
+
+            // 置顶
+            isSticky: false,
+            sticky: 0,
+
+            // 海报
+            uploadurl: JX3BOX.__cms + "api/cms/upload",
+            banner_preview: "",
+            post_banner: "",
+
+            // 类型
+            post_type: "",
+            type_options: [],
+
+            // 作者
+            post_author: "",
+        };
+    },
+    computed: {
+        data: function () {
+            return {
+                ID: this.pid,
+                post_status: this.post_status || "publish",
+                visible: this.visible || "0",
+                post_author: this.post_author || 1,
+                post_type: this.post_type || "bbs",
+                post_banner: this.post_banner || "",
+                color: this.isHighlight ? this.color : "",
+                mark: this.mark || [],
+                sticky: this.isSticky ? Date.now() : null,
+            };
+        },
+        isAdmin: function () {
+            return User.isAdmin();
+        },
+    },
+    methods: {
+        // 是否有权限
+        checkHasRight: function () {
+            this.hasRight = User.isEditor();
+        },
+        // 获取pid
+        checkPostID: function () {
+            this.pid = getRewrite("pid") || (this.$route && this.$route.params && this.$route.params.id) || 0;
+        },
+        // 获取type
+        checkChannel: function () {
+            this.channel = location.pathname.split("/")[1];
+        },
+        // 加载类型选项
+        initTypeOptions: function () {
+            let types = [];
+            for (let key in JX3BOX.__postType) {
+                types.push({
+                    value: key,
+                    label: JX3BOX.__postType[key],
+                });
+            }
+            this.type_options = types;
+        },
+        // 上传
+        uploadSuccess: function (res, file) {
+            this.banner_preview = URL.createObjectURL(file.raw);
+            this.post_banner = res.data[0];
+        },
+        uploadFail: function (err) {
+            this.$message.error("上传失败");
+            console.log(err);
+        },
+        removeBanner: function () {
+            this.post_banner = "";
+        },
+        // 关闭
+        close() {
+            this.dialog_visible = false;
+        },
+        // 拉
+        pull: function () {
+            getSetting(this.pid).then((data) => {
+                let { ID, color, mark, post_status, post_author, sticky, post_banner, post_type, visible } = data;
+                this.pid = ID;
+                this.post_status = post_status;
+                this.visible = visible;
+                this.post_author = post_author;
+                this.post_type = post_type;
+                this.post_banner = post_banner;
+                this.color = color;
+                if (this.color) this.isHighlight = true;
+                this.mark = mark || [];
+                this.sticky = sticky || 0;
+                if (this.sticky) this.isSticky = true;
+
+                // 设置加载完成标识
+                this.pulled = true;
+            });
+        },
+        // 提交
+        submit: function () {
+            this.pushing = true;
+            this.push();
+        },
+        // 推
+        push: function () {
+            postSetting(this.data)
+                .then(() => {
+                    this.$message({
+                        message: "设置成功",
+                        type: "success",
+                    });
+                })
+                .finally(() => {
+                    this.pushing = false;
+                    this.close();
+                });
+        },
+    },
+    watch: {
+        "$route.params.id": function () {
+            this.checkPostID();
+        },
+    },
+    created: function () {
+        // 是否mount
+        this.checkHasRight();
+        // 预设信息
+        this.initTypeOptions();
+    },
+    mounted: function () {
+        // 基本信息
+        this.checkPostID();
+        this.checkChannel();
+
+        // 绑定监听
+        Bus.on("toggleAdminPanel", () => {
+            this.dialog_visible = !this.dialog_visible;
+            this.checkPostID();
+            // 文章类型的加载
+            if (this.pid && this.hasRight) {
+                this.pull();
+            }
+        });
+
+        // 点击外部关闭
+        onClickOutside(this.$refs.adminDrawer, () => {
+            this.close();
+        });
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/admin.less";
+</style>

package/src/bread/AdminButton.vue

@@ -0,0 +1,31 @@
+<template>
+    <el-button
+        v-if="show"
+        class="c-admin-button"
+        type="primary"
+        :size="button_size"
+        icon="Setting"
+        @click="toggleAdminPanel"
+        >管理</el-button
+    >
+</template>
+
+<script>
+import Bus from "../../utils/bus";
+import User from "@jx3box/jx3box-common/js/user";
+export default {
+    name: "BreadAdminButton",
+    props: ["size"],
+    data: function () {
+        return {
+            show: User.isEditor(),
+            button_size: this.size || "",
+        };
+    },
+    methods: {
+        toggleAdminPanel: function () {
+            Bus.emit("toggleAdminPanel");
+        },
+    },
+};
+</script>