@jx3box/jx3box-vue3-ui 0.0.3

package/service/breadcrumb.js

@@ -0,0 +1,13 @@
+import { $helper } from "@jx3box/jx3box-common/js/https_v2.js";
+
+function getBreadcrumb(name) {
+    return $helper().get(`/api/breadcrumb/${name}`);
+}
+
+function getBreadcrumbs(params) {
+    return $helper().get(`/api/breadcrumbs`, {
+        params: params,
+    });
+}
+
+export { getBreadcrumb, getBreadcrumbs };

package/service/cms.js

@@ -0,0 +1,35 @@
+import { $cms } from "@jx3box/jx3box-common/js/https_v2";
+import axios from "axios";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+function getPostAuthors(post_id) {
+    return $cms({ mute: true }).get(`/api/cms/post/${post_id}/authors`);
+}
+
+function uploadImage(formData) {
+    return $cms().post(`/api/cms/upload/avatar`, formData);
+}
+//获取装扮
+function getDecoration(params) {
+    return $cms().get(`/api/cms/user/decoration`, {
+        params,
+    });
+}
+function getDecorationJson() {
+    let url = JX3BOX.__imgPath + "decoration/index.json";
+    return axios.get(url);
+}
+function getHonorJson() {
+    let url = JX3BOX.__imgPath + "decoration/honor.json";
+    return axios.get(url);
+}
+// 通用上传
+function upload(formData) {
+    return $cms().post(`/api/cms/upload`, formData);
+}
+
+// 检测当前用户是否为团队成员
+function checkTeamMember() {
+    return $cms().get(`/api/cms/config/teammates/check`);
+}
+
+export { getPostAuthors, uploadImage, upload, getDecoration, getDecorationJson, checkTeamMember, getHonorJson };

package/service/fav.js

@@ -0,0 +1,17 @@
+import { $next } from "@jx3box/jx3box-common/js/https_v2.js";
+const $n = $next();
+
+function hasFav(post_type, post_id) {
+    return $n.get(`api/article/favorites/is-my/${post_id}/${post_type}`).then((res) => {
+        return res.data.data;
+    });
+}
+function addFav(post_type, post_id, post_title) {
+    return $n.post(`api/article/favorites/add/${post_id}/${post_type}`, { post_title }).then((res) => {
+        return res.data.data;
+    });
+}
+function delFav(id) {
+    return $n.delete(`api/article/favorites/my/${id}`);
+}
+export { hasFav, addFav, delFav };

package/service/follow.js

@@ -0,0 +1,55 @@
+import { $next } from "@jx3box/jx3box-common/js/https_v2";
+
+/**
+ * 关注用户
+ * @param {*} userId 用户id
+ */
+function follow(userId) {
+    return $next().post(`/api/my-userlist/follow/${userId}`);
+}
+
+/**
+ * 取消关注用户
+ * @param {*} userId 用户id
+ */
+function unfollow(userId) {
+    return $next().delete(`/api/my-userlist/follow/${userId}`);
+}
+
+/**
+ * 获取我的关注列表
+ * @param {*} param 参数
+ * @param {*} param.pageIndex 页码
+ * @param {*} param.pageSize 每页数量
+ * @param {*} param.user_id 用户id
+ * @param {*} param.display_name 用户昵称
+ */
+function getMyFollowList(params) {
+    return $next().get(`/api/my-userlist/follow`, {
+        params,
+    });
+}
+
+/**
+ * 获取我的粉丝列表
+ * @param {*} param 参数
+ * @param {*} param.pageIndex 页码
+ * @param {*} param.pageSize 每页数量
+ * @param {*} param.user_id 用户id
+ * @param {*} param.display_name 用户昵称
+ */
+function getMyFansList(params) {
+    return $next().get(`/api/my-userlist/follow-me`, {
+        params,
+    });
+}
+
+/**
+ * 获取某个用户的粉丝数量
+ * @param {*} userId 用户id
+ */
+function getFansCount(userId) {
+    return $next().get(`/api/followers/${userId}/count`);
+}
+
+export { follow, unfollow, getMyFollowList, getMyFansList, getFansCount };

package/service/github.js

@@ -0,0 +1,15 @@
+import axios from "axios";
+
+function getRepoInfo(repo) {
+    return axios.get(`https://api.github.com/github?repo=${repo}`);
+}
+
+function getBuilders(coders) {
+    return axios.get(`https://server.jx3box.com/user/list?uid=${coders}`);
+}
+
+function getRepoCoders(repo) {
+    return axios.get(`https://api.github.com/repos/JX3BOX/${repo}/contributors`);
+}
+
+export { getRepoInfo, getBuilders, getRepoCoders };

package/service/header.js

@@ -0,0 +1,31 @@
+import axios from "axios";
+import { $cms, $next } from "@jx3box/jx3box-common/js/https_v2.js";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+
+function getMsg() {
+    return $next({ mute: true }).get("/api/letter/unread/count");
+}
+
+function getNav(client = "std") {
+    let file = client == "origin" ? "header_nav_origin.json" : "header_nav.json";
+    return axios.get(JX3BOX.__dataPath + `data/box/${file}`);
+}
+
+function getPanel() {
+    return axios.get(JX3BOX.__dataPath + "data/box/header_panel.json");
+}
+
+function getBox(client = "std") {
+    let filename = client == "origin" ? "box_origin.json" : "box.json";
+    return axios.get(JX3BOX.__dataPath + "data/box/" + filename);
+}
+
+function getMenu(key) {
+    return $cms().get(`/api/cms/config/menu/${key}`);
+}
+
+function getGames() {
+    return axios.get(JX3BOX.__dataPath + "data/product/games.json");
+}
+
+export { getMsg, getNav, getPanel, getBox, getMenu, getGames };

package/service/helper.js

@@ -0,0 +1,7 @@
+import { $helper } from "@jx3box/jx3box-common/js/https_v2";
+
+function getCollection(id) {
+    return $helper().get(`/api/post/collection/${id}`);
+}
+
+export { getCollection };

package/service/thx.js

@@ -0,0 +1,60 @@
+import { $pay, $cms } from "@jx3box/jx3box-common/js/https_v2";
+
+function getPostBoxcoinRecords(postType, postId, params) {
+    return $pay().get(`/api/inspire/article/${postType}/${postId}/history`, {
+        params,
+    });
+}
+
+function grantBoxcoin(postType, postId, userId, count, data) {
+    return $pay().post(`/api/inspire/article/${postType}/${postId}/manager2creator/${userId}/coins/${count}`, data);
+}
+
+function rewardBoxcoin(postType, postId, userId, count, data) {
+    return $pay().post(`/api/inspire/article/${postType}/${postId}/user2creator/${userId}/coins/${count}`, data);
+}
+
+function recoveryBoxcoin(id) {
+    return $pay().delete(`/api/inspire/coins/log/${id}/recovery`);
+}
+
+function getPostBoxcoinConfig(postType) {
+    return $pay().get(`/api/inspire/article/${postType}/boxcoin/limit`);
+}
+
+function getBoxcoinStatus() {
+    return $cms().get(`/api/cms/config`, {
+        params: {
+            key: "boxcoin",
+        },
+    });
+}
+
+function sendCny(payUserId, accessUserId, money, remark) {
+    return $pay().post(`/api/cny/consume/user-charge/${payUserId}/to/${accessUserId}/${money}`, { remark });
+}
+
+function checkCnyStatus(id) {
+    return $pay().get(`/api/cny/consume/check-status/${id}`);
+}
+
+function checkGiftStatus(accessUserId) {
+    return $pay().get(`/api/cny/consume/user-charge/to/${accessUserId}/check-status`);
+}
+
+function batchReward(articleType, count, data) {
+    return $pay().post(`/api/inspire/batch/article/${articleType}/coins/${count}`, data);
+}
+
+export {
+    getPostBoxcoinRecords,
+    grantBoxcoin,
+    rewardBoxcoin,
+    recoveryBoxcoin,
+    getPostBoxcoinConfig,
+    getBoxcoinStatus,
+    sendCny,
+    checkCnyStatus,
+    checkGiftStatus,
+    batchReward,
+};

package/src/App.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="container-page">
+        <Header></Header>
+        <breadcrumb
+            name="频道名称"
+            slug="slug"
+            root="/slug"
+            :publishEnable="true"
+            :feedbackEnable="true"
+            :adminEnable="true"
+        >
+            <template #logo>
+                <img svg-inline src="../assets/img/jx3.svg" />
+            </template>
+            bread info
+        </breadcrumb>
+        <LeftSidebar :open="true" :uid="8">
+            <LeftSideToggle :mobileOnly="true" />
+            <!-- <Author :author="author" :uid="37" /> -->
+        </LeftSidebar>
+
+        <Main :withoutLeft="false" :withoutRight="false">
+            <RightSidebar> </RightSidebar>
+            <Footer></Footer>
+            <Bottom></Bottom>
+        </Main>
+    </div>
+</template>
+
+<script>
+import Header from "./Header.vue";
+import Breadcrumb from "./Breadcrumb.vue";
+import Main from "./Main.vue";
+import Footer from "./Footer.vue";
+import LeftSidebar from "./LeftSidebar.vue";
+import LeftSideToggle from "./LeftSideToggle.vue";
+import RightSidebar from "./RightSidebar.vue";
+import Bottom from "./Bottom.vue";
+export default {
+    name: "App",
+    components: {
+        Main,
+        Header,
+        Footer,
+        Breadcrumb,
+        LeftSidebar,
+        LeftSideToggle,
+        RightSidebar,
+        Bottom,
+    },
+};
+</script>

package/src/Bottom.vue

@@ -0,0 +1,23 @@
+<template>
+    <footer class="m-bottom">
+        <a :href="homepage" target="_blank">&copy; JX3BOX.COM</a>
+        <a class="u-feedback" :href="feedback" target="_blank">❤ Help</a>
+    </footer>
+</template>
+
+<script>
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+export default {
+    name: "CommonBottom",
+    data: function () {
+        return {
+            homepage: JX3BOX.__Root,
+            feedback: JX3BOX.feedback + "&subject=" + location.href,
+        };
+    },
+};
+</script>
+
+<style lang="less">
+@import "../assets/css/bottom.less";
+</style>

package/src/Box.vue

@@ -0,0 +1,149 @@
+<template>
+    <div class="c-jx3box" :class="{ on: status, isOverlay: overlayEnable && isOverlay }">
+        <!-- search -->
+        <header-search @click.stop />
+
+        <!-- list -->
+        <ul class="u-list">
+            <li>
+                <a class="u-item" href="/index">
+                    <img class="u-pic" svg-inline :src="homeicon" />
+                    <img class="u-pic-hover" svg-inline :src="homeicon" />
+                    <span class="u-txt">首页</span>
+                </a>
+            </li>
+            <li v-for="(item, i) in list" :key="i" :class="{ 'u-app-start': item.lf }">
+                <a class="u-item" :href="item.href" :target="getTarget(item.href)">
+                    <img class="u-pic" :src="getBoxIcon(item.img)" />
+                    <!-- <img class="u-pic-hover" svg-inline :src="item.hover | getBoxIcon" /> -->
+                    <span class="u-txt">{{ item.abbr }}</span>
+                </a>
+            </li>
+        </ul>
+        <span class="u-close" @click="closeBox($event)">
+            <el-icon><Upload /></el-icon>
+            <span>收起</span>
+        </span>
+    </div>
+</template>
+
+<script>
+import _ from "lodash";
+import Bus from "../utils/bus";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import box from "../assets/data/box.json";
+import { getMenu } from "../service/header.js";
+
+import search from "./header/Search.vue";
+export default {
+    name: "CommonBox",
+    props: ["overlayEnable"],
+    data: function () {
+        return {
+            status: false,
+            isOverlay: false,
+            data: box,
+            client: location.href.includes("origin") ? "origin" : "std",
+        };
+    },
+    computed: {
+        homeicon: function () {
+            return JX3BOX.__imgPath + "image/box/home.svg";
+        },
+        homeicon_hover: function () {
+            return JX3BOX.__imgPath + "image/box/home_on.svg";
+        },
+        originicon: function () {
+            return JX3BOX.__imgPath + "image/box/origin.svg";
+        },
+        list: function () {
+            return this.data.filter((item) => {
+                return item.status && (item.client == this.client || item.client == "all");
+            });
+        },
+    },
+    methods: {
+        closeBox: function () {
+            Bus.emit("toggleBox", false);
+        },
+        matchedClient: function (client) {
+            return client == "all" ? true : client == this.client;
+        },
+        getBoxIcon: function (val) {
+            return JX3BOX.__imgPath + "image/box/" + val;
+        },
+        getTarget: function (val) {
+            if (window.innerWidth < 768 || val?.startsWith("/")) {
+                return "_self";
+            } else {
+                return "_blank";
+            }
+        },
+        loadMenu() {
+            try {
+                const _box = JSON.parse(sessionStorage.getItem("box"));
+                if (_box) {
+                    this.data = _box;
+                } else {
+                    getMenu("box").then((res) => {
+                        this.data = res.data?.data?.val;
+                        sessionStorage.setItem("box", JSON.stringify(this.data));
+                    });
+                }
+            } catch (e) {
+                this.data = box;
+                console.log("loadBox error", e);
+            }
+        },
+    },
+    created: function () {
+        if (this.overlayEnable) {
+            const vm = this;
+            window.addEventListener(
+                "scroll",
+                _.throttle(() => {
+                    vm.isOverlay = window.scrollY > 200 ? true : false;
+                }, 200)
+            );
+        }
+        this.loadMenu();
+    },
+    mounted: function () {
+        Bus.on("toggleBox", (status) => {
+            if (status == undefined) {
+                this.status = !this.status;
+            } else {
+                this.status = status;
+            }
+        });
+        document.addEventListener("click", function () {
+            Bus.emit("toggleBox", false);
+        });
+    },
+    components: {
+        "header-search": search,
+    },
+};
+</script>
+
+<style lang="less">
+@import "../assets/css/box.less";
+</style>
+
+<style scoped lang="less">
+.c-jx3box {
+    .c-header-search {
+        float: none;
+        .w(auto);
+        margin: 0 20px 10px 20px;
+        box-sizing: border-box;
+        padding: 0;
+        .none;
+    }
+}
+@media screen and (max-width: @phone) {
+    .c-jx3box .c-header-search {
+        .db;
+    }
+}
+</style>

package/src/Breadcrumb.vue

@@ -0,0 +1,118 @@
+<template>
+    <div class="c-breadcrumb" v-if="!isApp">
+        <div class="u-menu" @click.stop="toggleLeftSide" v-if="!withoutLeft">
+            <img class="u-toggle" :class="{ on: isOpen }" svg-inline src="../assets/img/bread/menu.svg" />
+        </div>
+        <a class="u-channel" :href="rootLink" :class="{ on: withoutLeft }">
+            <i class="u-channel-logo">
+                <img :src="getAppIcon(slug)" v-if="!$slots.logo" />
+                <slot name="logo"></slot>
+            </i>
+            <span class="u-title">{{ name }}</span>
+        </a>
+        <!-- 面包屑内容 -->
+        <Crumb :name="slug" v-if="crumbEnable" />
+        <slot></slot>
+        <div class="u-op">
+            <slot name="op-append"></slot>
+            <a
+                v-if="publishEnable"
+                :href="publishLink(slug)"
+                class="u-publish el-button el-button--primary el-button--medium u-op-public"
+            >
+                <el-icon><Edit /></el-icon>
+                <span>发布</span>
+            </a>
+            <a
+                v-if="feedbackEnable"
+                v-show="isNotAdmin"
+                :href="feedback"
+                class="u-feedback el-button el-button--primary el-button--medium u-op-public"
+                target="_blank"
+            >
+                <el-icon><InfoFilled /></el-icon>
+                <span>反馈</span>
+            </a>
+            <AdminButton v-if="adminEnable" class="u-admin" />
+            <Admin v-if="adminEnable" />
+            <slot name="op-prepend"></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+import { throttle } from "lodash";
+import { publishLink, getAppIcon } from "@jx3box/jx3box-common/js/utils";
+import User from "@jx3box/jx3box-common/js/user";
+import Admin from "./bread/Admin";
+import Crumb from "./bread/Crumb";
+import AdminButton from "./bread/AdminButton";
+
+import { isApp } from "../assets/js/app.js";
+import Bus from "../utils/bus";
+
+export default {
+    name: "CommonBreadcrumb",
+    props: [
+        "name",
+        "slug",
+        "root",
+        "publishEnable",
+        "adminEnable",
+        "feedbackEnable",
+        "overlayEnable",
+        "crumbEnable",
+        "withoutLeft",
+    ],
+    data: function () {
+        return {
+            isOpen: true,
+            feedback: "/feedback?refer=" + encodeURIComponent(window.location.href),
+            isNotAdmin: !User.isEditor(),
+            isOverlay: false,
+            isApp: isApp(),
+        };
+    },
+    computed: {
+        rootLink: function () {
+            return this.root || `/${this.slug}`;
+        },
+    },
+    methods: {
+        toggleLeftSide: function () {
+            let status = !this.isOpen;
+            Bus.emit("toggleLeftSide", status);
+        },
+        publishLink,
+        getAppIcon,
+    },
+    mounted: function () {
+        Bus.on("toggleLeftSide", (data) => {
+            this.isOpen = data;
+        });
+
+        if (window.innerWidth < 1024) {
+            this.isOpen = false;
+        }
+
+        if (this.overlayEnable) {
+            const vm = this;
+            window.addEventListener(
+                "scroll",
+                throttle(() => {
+                    vm.isOverlay = window.scrollY > 200 ? true : false;
+                }, 200)
+            );
+        }
+    },
+    components: {
+        Admin,
+        Crumb,
+        AdminButton,
+    },
+};
+</script>
+
+<style lang="less">
+@import "../assets/css/breadcrumb.less";
+</style>

package/src/Footer.vue

@@ -0,0 +1,45 @@
+<template>
+    <footer class="c-footer" id="c-footer" v-if="!isApp" :class="{ 'is--dark': darkMode }">
+        <div class="c-footer-inner">
+            <div class="c-footer-left">
+                <img class="u-flag" svg-inline src="../assets/img/footer/china.svg" />
+                <a href="https://beian.miit.gov.cn/" class="u-beian" target="_blank">湘ICP备2021002288号</a>
+            </div>
+            <div class="c-footer-right">
+                <a class="u-about" :href="about" target="_blank">关于我们</a>
+                <em>|</em>
+                <a class="u-doc" href="/help" target="_blank">帮助文档</a>
+                <em>|</em>
+                <a class="u-log" href="https://github.com/JX3BOX" target="_blank">代码仓库</a>
+                <em>|</em>
+                <a class="u-feedback" :href="feedback" target="_blank">反馈建议</a>
+            </div>
+            <slot></slot>
+        </div>
+    </footer>
+</template>
+
+<script>
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import { isApp } from "../assets/js/app.js";
+export default {
+    name: "CommonFooter",
+    props: {
+        darkMode: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data: function () {
+        return {
+            about: JX3BOX.__Root + "about",
+            feedback: JX3BOX.feedback + "&subject=" + location.href,
+            isApp: isApp(),
+        };
+    },
+};
+</script>
+
+<style lang="less">
+@import "../assets/css/footer.less";
+</style>