@jx3box/jx3box-vue3-ui 0.0.3

package/src/header/Manage.vue

@@ -0,0 +1,125 @@
+<template>
+    <div class="c-header-panel c-header-manage" id="c-header-manage">
+        <span class="u-post u-manage">
+            <img class="u-add" svg-inline src="../../assets/img/header/manage.svg" />
+        </span>
+        <ul class="u-menu u-pop-content">
+            <li v-for="item in finalPanel" :key="item.label">
+                <a :href="item.link" target="_blank"
+                    ><el-icon>
+                        <component :is="item.icon" v-if="item.icon"></component>
+                        <Present v-else />
+                    </el-icon>
+                    {{ item.label }}</a
+                >
+            </li>
+            <hr v-if="finalPanel.length" />
+            <li v-if="isEditor">
+                <a href="https://os.jx3box.com/admin" target="_blank"
+                    ><el-icon><MessageBox /></el-icon> 管理平台</a
+                >
+            </li>
+            <li v-if="isAdmin">
+                <a href="/admin"
+                    ><el-icon><Setting></Setting></el-icon> 站点配置</a
+                >
+            </li>
+            <li v-if="isTeamMember">
+                <a href="/dashboard/feedback?tab=pending"
+                    ><el-icon><Message /></el-icon> 反馈处理</a
+                >
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import User from "@jx3box/jx3box-common/js/user";
+import panel from "../../assets/data/panel.json";
+import { getMenu } from "../../service/header";
+import { checkTeamMember } from "../../service/cms";
+export default {
+    name: "HeaderManage",
+    data() {
+        return {
+            panel,
+
+            isTeamMember: false,
+        };
+    },
+    computed: {
+        finalPanel: function () {
+            // 只返回前两个
+            return this.panel
+                .filter((item) => {
+                    // 只返回有权限的
+                    if (item.onlyAdmin) {
+                        return this.isAdmin;
+                    }
+                    return true;
+                })
+                .slice(0, 2);
+        },
+        isAdmin() {
+            return User.isAdmin();
+        },
+        isEditor() {
+            return User.isEditor();
+        },
+    },
+    mounted() {
+        this.loadPanel();
+        this.check();
+    },
+    methods: {
+        loadPanel: function () {
+            try {
+                const panel = JSON.parse(sessionStorage.getItem("panel"));
+                if (panel) {
+                    this.panel = panel;
+                } else {
+                    getMenu("panel").then((res) => {
+                        this.panel = res.data?.data?.val;
+                        sessionStorage.setItem("panel", JSON.stringify(this.panel));
+                    });
+                }
+            } catch (e) {
+                this.panel = panel;
+                console.log("loadPanel error", e);
+            }
+        },
+        check: function () {
+            try {
+                const isTeamMember = JSON.parse(localStorage.getItem("BoxTeam3"));
+
+                if (isTeamMember) {
+                    this.isTeamMember = isTeamMember === "true" || isTeamMember;
+                } else {
+                    checkTeamMember().then((res) => {
+                        this.isTeamMember = res.data.data;
+                        localStorage.setItem("BoxTeam3", this.isTeamMember);
+                    });
+                }
+            } catch (e) {
+                console.log("check error", e);
+            }
+        },
+    },
+};
+</script>
+
+<style lang="less">
+// 管理菜单
+.c-header-manage {
+    height: 100%;
+    .u-manage {
+        padding: 0 10px 0 8px;
+        height: 100%;
+        .flex;
+        align-items: center;
+        svg {
+            .size(19px);
+        }
+    }
+}
+</style>

package/src/header/Message.vue

@@ -0,0 +1,89 @@
+<template>
+    <div class="c-header-msg" id="c-header-msg">
+        <el-tooltip effect="dark" content="消息中心" placement="bottom" popper-class="c-header-tooltip">
+            <a class="u-msg" :href="url">
+                <i class="u-icon u-icon-msg">
+                    <i class="u-pop" style="display: none" v-show="pop"></i>
+                    <img svg-inline src="../../assets/img/header/bell.svg" />
+                </i>
+            </a>
+        </el-tooltip>
+    </div>
+</template>
+
+<script>
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import { getMsg } from "../../service/header";
+export default {
+    name: "HeaderMsg",
+    data: function () {
+        return {
+            url: JX3BOX.__Links.dashboard.msg,
+            pop: false,
+        };
+    },
+    mounted() {
+        this.checkMSG();
+    },
+    methods: {
+        // 消息
+        checkMSG: function () {
+            getMsg().then((res) => {
+                this.pop = !!(Math.max(~~res.data.data.letter, 0) + ~~res.data.data.message);
+            });
+        },
+    },
+};
+</script>
+
+<style lang="less">
+//消息面板
+.c-header-msg {
+    position: relative;
+    height: 100%;
+
+    .u-msg {
+        .h(100%);
+        .flex;
+        align-items: center;
+
+        padding: 0 10px;
+        &:hover {
+            opacity: 0.7;
+        }
+        cursor: pointer;
+    }
+    .u-icon-msg {
+        // .mt(10px);
+        width: 17px;
+        height: 17px;
+        display: block;
+        .pr;
+        top: 1px;
+        // margin-top: 9px;
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+        .pr;
+    }
+    .u-pop {
+        width: 10px;
+        height: 10px;
+        color: #fff;
+        background-image: linear-gradient(#54a3ff, #006eed);
+        background-clip: padding-box;
+        border: 2px solid #24292e;
+        border-radius: 50%;
+        position: absolute;
+        right: -5px;
+        top: -6px;
+    }
+}
+
+@media screen and (max-width: @ipad) {
+    .c-header-msg {
+        display: none;
+    }
+}
+</style>

package/src/header/Nav.vue

@@ -0,0 +1,287 @@
+<template>
+    <nav class="c-header-nav" v-if="finalNav">
+        <div class="c-header-nav__pc">
+            <div class="u-item-box" v-for="item in finalNav" :key="'header-nav-' + item.key">
+                <template v-if="item.status && matchedClient(item.client)">
+                    <template v-if="item.children && item.children.length">
+                        <el-dropdown class="u-menu" :show-timeout="0" trigger="hover">
+                            <a
+                                class="u-item el-dropdown-link"
+                                :class="{ on: isFocus(item.link) }"
+                                :href="item.link"
+                                :target="isSelf(item.link)"
+                                >{{ item.label }}<el-icon><ArrowDown /></el-icon
+                            ></a>
+                            <template #dropdown>
+                                <el-dropdown-menu class="c-header-menu">
+                                    <el-dropdown-item
+                                        v-for="(subitem, subIndex) in item.children"
+                                        :key="'header-nav-drop-' + subitem.key + subIndex"
+                                        class="u-menu-item"
+                                    >
+                                        <a
+                                            :href="subitem.link"
+                                            :target="isSelf(subitem.link)"
+                                            v-if="subitem.status && matchedClient(subitem.client)"
+                                            >{{ subitem.label }} <span v-if="subitem.desc">{{ subitem.desc }}</span></a
+                                        ></el-dropdown-item
+                                    >
+                                </el-dropdown-menu>
+                            </template>
+                        </el-dropdown>
+                    </template>
+                    <template v-else>
+                        <a class="u-item" :class="{ on: isFocus(item.link) }" :href="item.link">{{ item.label }}</a>
+                    </template>
+                </template>
+            </div>
+        </div>
+        <div class="c-header-nav__pad">
+            <el-menu mode="horizontal" class="c-quick-menu" v-model="activeIndex" :ellipsis="false">
+                <el-sub-menu index="quick-menu" popper-class="c-quick-menu__submenu">
+                    <template #title>快捷导航</template>
+                    <el-menu-item v-for="item in finalNav" :key="'header-nav-' + item.key">
+                        <template v-if="matchedClient(item.client)">
+                            <el-sub-menu
+                                :index="item.key"
+                                class="c-header-menu"
+                                v-if="item.children && item.children.length"
+                            >
+                                <template #title>
+                                    <a
+                                        class="u-menu-item"
+                                        :class="{ on: isFocus(item.link) }"
+                                        :href="item.link"
+                                        :target="isSelf(item.link)"
+                                        >{{ item.label }}</a
+                                    ></template
+                                >
+                                <template v-for="(subitem, subIndex) in item.children">
+                                    <el-menu-item
+                                        v-if="matchedClient(subitem.client)"
+                                        :key="'header-nav-drop-' + subitem.key + subIndex"
+                                        :index="subitem.key"
+                                    >
+                                        <a class="u-menu-item" :href="subitem.link" :target="isSelf(subitem.link)"
+                                            >{{ subitem.label }} <span v-if="subitem.desc">{{ subitem.desc }}</span>
+                                        </a>
+                                    </el-menu-item>
+                                </template>
+                            </el-sub-menu>
+                            <el-menu-item v-else>
+                                <a class="u-item" :class="{ on: isFocus(item.link) }" :href="item.link">{{
+                                    item.label
+                                }}</a>
+                            </el-menu-item>
+                        </template>
+                    </el-menu-item>
+                </el-sub-menu>
+            </el-menu>
+        </div>
+    </nav>
+</template>
+
+<script>
+import default_nav from "../../assets/data/nav.json";
+import { getMenu } from "../../service/header";
+export default {
+    name: "HeaderNav",
+    props: [],
+    data: function () {
+        return {
+            nav: default_nav,
+
+            activeIndex: "",
+        };
+    },
+    computed: {
+        finalNav: function ({ nav }) {
+            // 父节点
+            const finalNav = nav.filter((d) => !d.parentKey && d.status);
+            // 子节点
+            const navChildren = nav.filter((c) => c.parentKey && c.status);
+
+            navChildren.forEach((child) => {
+                const parentKey = child.parentKey;
+                // 匹配客户端
+                const parent = finalNav.find((n) => n.key === parentKey);
+
+                if (parent) {
+                    if (!parent.children) {
+                        parent.children = [];
+                    }
+                    parent.children.push(child);
+                }
+            });
+
+            return finalNav;
+        },
+        client() {
+            return location.href.includes("origin") ? "origin" : "std";
+        },
+    },
+    methods: {
+        isFocus: function (type) {
+            return location.pathname.includes(type);
+        },
+        matchedClient: function (client) {
+            return client == "all" ? true : client == this.client;
+        },
+        isSelf: function (link) {
+            return link.startsWith("/") ? "_self" : "_blank";
+        },
+        loadNav() {
+            try {
+                const nav = JSON.parse(sessionStorage.getItem("nav"));
+                if (nav) {
+                    this.nav = nav;
+                } else {
+                    getMenu("nav").then((res) => {
+                        if (res.data) {
+                            this.nav = res?.data?.data?.val;
+                            sessionStorage.setItem("nav", JSON.stringify(this.nav));
+                        }
+                    });
+                }
+            } catch (e) {
+                this.nav = default_nav;
+                console.log("loadNav error", e);
+            }
+        },
+    },
+    created: function () {
+        this.loadNav();
+    },
+    components: {},
+};
+</script>
+
+<style lang="less">
+//菜单
+.c-header-nav {
+    .fl;
+    font-family: Montserrat, "Helvetica Neue", sans-serif;
+    .clearfix;
+    .u-item-box {
+        .fl;
+    }
+    .u-item {
+        .pointer;
+        display: block;
+        font-size: 14px;
+        line-height: @logo-size;
+        color: #fff;
+        // font-weight:300;
+        &:hover {
+            background-color: darken(@primary, 10%);
+        }
+        &.on {
+            // background-color: @primary;
+            .pr;
+            &:after {
+                content: "";
+                .db;
+                border-bottom: 3px solid @primary;
+                .pa;
+                .lb(0);
+                .w(100%);
+            }
+            &:hover {
+                background-color: @primary;
+            }
+        }
+        padding: 16px 15px;
+        transition: 0.1s ease-in;
+        i {
+            .none;
+        }
+    }
+    .u-menu {
+        .fl;
+        .el-icon-arrow-down {
+            .fz(12px);
+            color: #8e8e8e;
+        }
+    }
+}
+.c-header-menu {
+    .h(auto) !important;
+    .u-menu-item {
+        padding: 0;
+        a {
+            color: @color;
+            line-height: 16px;
+            padding: 10px 30px;
+            .db;
+            span {
+                .fz(12px);
+                color: #999;
+            }
+        }
+    }
+    .mt(0px) !important;
+}
+
+.c-header-nav__pad {
+    .c-quick-menu {
+        background: #24292e;
+    }
+    .el-sub-menu__title {
+        color: #fff !important;
+        i {
+            color: #fff;
+        }
+        &:hover {
+            background: #0366d6 !important;
+        }
+        height: 64px !important;
+    }
+}
+.c-quick-menu__submenu {
+    .el-menu {
+        min-width: 150px;
+
+        .el-menu {
+            .el-menu-item {
+                padding: 0 20px !important;
+            }
+        }
+    }
+    .u-menu-item,
+    .u-item {
+        display: block;
+        color: @color;
+    }
+    .el-menu-item,
+    .el-sub-menu {
+        min-width: 150px;
+        &:hover {
+            background-color: #e6f0fb !important;
+
+            .el-sub-menu__title {
+                background-color: #e6f0fb;
+            }
+        }
+    }
+}
+.c-header-nav__pad {
+    .none;
+    .c-quick-menu {
+        border-bottom: none;
+    }
+}
+@media screen and (max-width: @ipad) {
+    .c-header-nav__pc {
+        display: none;
+    }
+    .c-header-nav__pad {
+        display: block;
+    }
+}
+
+@media screen and (max-width: @ipad-y) {
+    .c-header-nav__pad {
+        display: none;
+    }
+}
+</style>

package/src/header/Publish.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="c-header-panel" id="c-header-panel">
+        <el-tooltip effect="dark" content="创作中心" placement="bottom" popper-class="c-header-tooltip">
+            <a class="u-post" :href="url">
+                <img class="u-add" svg-inline src="../../assets/img/header/edit.svg" />
+            </a>
+        </el-tooltip>
+    </div>
+</template>
+
+<script>
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+export default {
+    name: "HeaderPublish",
+    data: function () {
+        return {
+            url: JX3BOX.__Links.dashboard.publish,
+        };
+    },
+};
+</script>

package/src/header/Search.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class="c-header-search" id="c-header-search">
+        <div class="c-search">
+            <form class="u-form" :action="url" :target="isPhone ? '_self' : '_blank'">
+                <input class="u-text" type="text" autocomplete="off" name="q" placeholder="搜索.." />
+                <input type="hidden" name="client" :value="client" />
+                <i class="u-btn">
+                    <img svg-inline src="../../assets/img/header/search-key-slash.svg" />
+                </i>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script>
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+export default {
+    name: "HeaderSearch",
+    data: function () {
+        return {
+            isPhone: window.innerWidth < 720 ? true : false,
+            url: JX3BOX.__Root + "search",
+            client: location.href.includes("origin") ? "origin" : "std",
+        };
+    },
+};
+</script>
+
+<style lang="less">
+//搜索
+.c-header-search {
+    width: 220px;
+    // padding: 16px 0;
+    margin: 15px 0;
+
+    .u-form {
+        position: relative;
+    }
+
+    .u-text {
+        background-color: #3a4248;
+        border: 2px solid @bg-black;
+        // background-color:#636872;
+        // border: 0;
+        box-shadow: none;
+        color: #fff;
+        height: @logo-size + 2px;
+        line-height: @logo-size + 2px;
+        box-sizing: border-box;
+        border-radius: 4px;
+        font-size: 14px;
+        padding: 0.625em 0.4375em;
+        width: 100%;
+
+        &:focus {
+            background-color: #fff;
+            color: #1a1a1a;
+            outline: 0;
+        }
+        transition: background-color 0.1s ease-in;
+    }
+
+    .u-btn {
+        border: 0;
+        position: absolute;
+        right: 8px;
+        top: 6px;
+        display: block;
+        width: 19px;
+        height: 20px;
+        padding: 0;
+    }
+
+    margin-right: 10px;
+}
+@media screen and (max-width: @phone) {
+    .c-header-search {
+        .none;
+    }
+}
+</style>