@jx3box/jx3box-ui 2.0.4 → 2.0.6

package/src/App.vue

@@ -3,7 +3,7 @@
         <CommonHeader></CommonHeader>
         <breadcrumb
             name="频道名称"
-            slug="slug"
+            slug="bps"
             root="/slug"
             :publishEnable="true"
             :feedbackEnable="true"
@@ -13,123 +13,183 @@
             <template #logo>
                 <img svg-inline src="../assets/img/editor/jx3.svg" />
             </template>
-            <template #op-prepend> </template>
+            bread info
+            <template #op-prepend>
+                <AdminDrop :post="community" :isCommunity="true" :user-id="8" :showMove="true" />
+            </template>
         </breadcrumb>
-        <LeftSidebar :open="true" :uid="8719">
-            <LeftSideToggle :mobileOnly="true" />
-            <Author :uid="8719" />
+        <LeftSidebar :open="true" :uid="8">
+            <Author :uid="8" />
         </LeftSidebar>
         <Main :withoutLeft="false" :withoutRight="false">
-            <versionBy value=""></versionBy>
+            <el-tabs v-model="tab" type="card">
+                <el-tab-pane label="通用组件" name="widget">
+                    <h1 class="m-title">UC泛用组件</h1>
+                    <div class="m-block">
+                        <el-button @click="userpop = true" style="width: 100px">用户POP</el-button>
+                        <UserPop title="添加用户" v-model="userpop"></UserPop>
+                    </div>
+
+                    <h1 class="m-title">切换侧边栏</h1>
+                    <div class="m-block">
+                        <LeftSideToggle :mobileOnly="false" />
+                        <LeftSideToggle :mobileOnly="true" />
+                    </div>
+                </el-tab-pane>
+                <el-tab-pane label="文章列表" name="list">
+                    <h1 class="m-title">筛选</h1>
+                    <div class="m-block">
+                        <markBy />
+                        <menuBy :data="['test1', 'test2']" />
+                        <zlpBy />
+                        <topicBy v-model="tag2" :topics="post_topics" />
+                        <tagBy :data="['PVE', 'PVX']" :type="tag" />
+                    </div>
+
+                    <h2 class="m-title">客户端</h2>
+                    <div class="m-block">
+                        <clientBy type="" />
+                        <versionBy value="" />
+                    </div>
+
+                    <h2 class="m-title">排序</h2>
+                    <div class="m-block">
+                        <orderBy />
+                    </div>
+                </el-tab-pane>
+                <el-tab-pane label="文章详情" name="single">
+                    <h1 class="m-title">Append</h1>
+                    <div class="m-block">
+                        <PostGuide :post="post" />
+                    </div>
+                    <h1 class="m-title">Comment</h1>
+                    <div class="m-block">
+                        <el-button @click="homeworkVisible = true" style="width: 100px" size="small"
+                            >作业组件</el-button
+                        >
+                        <Homework
+                            v-model="homeworkVisible"
+                            post-type="comment"
+                            :post-id="19382"
+                            :userId="8719"
+                            client="std"
+                        ></Homework>
+                    </div>
+                </el-tab-pane>
+                <el-tab-pane label="文章内容" name="content">
+                    <el-radio-group v-model="post_id">
+                        <el-radio value="23240">临时测试</el-radio>
+                        <el-radio label="35605">Markdown</el-radio>
+                        <el-radio value="32035">仅小册</el-radio>
+                        <el-radio value="30017">仅联合创作者</el-radio>
+                        <el-radio value="30582">小册和联合创作者</el-radio>
+                        <el-radio value="31129">无小册和联合创作者</el-radio>
+                    </el-radio-group>
+                    <singlebox :post="post" />
+                </el-tab-pane>
+                <el-tab-pane label="移动组件" name="mobile">
+                    <h1 class="m-title">Common</h1>
+                    <el-switch v-model="showSuspendCommon" active-text="展示移动组件"></el-switch>
+                    <div class="m-block">
+                        <SuspendCommon
+                            v-if="showSuspendCommon"
+                            :drawerOptions="{
+                                author: {
+                                    name: '作者名字',
+                                    avatar: 'https://cdn.jx3box.com/upload/avatar/2022/3/2/8_9860765.png',
+                                    author_id: 8,
+                                },
+                                subscribeType: 'posts',
+                                postType: 'macro',
+                                id: 97147,
+                                title: '薄嘴唇靓仔！！！',
+                            }"
+                            @search="suspendSearch"
+                        >
+                            <template #default>
+                                <div style="display: flex; gap: 1rem">
+                                    <div>切换</div>
+                                    <div>切换</div>
+                                    <div>切换</div>
+                                </div>
+                            </template>
+                        </SuspendCommon>
+                    </div>
+                </el-tab-pane>
+            </el-tabs>
             <el-divider></el-divider>
-            <UploadAlum />
-            <singlebox :post="post" />
-            <SimpleThxVue
-                postType="bbs"
-                postTitle="bbs23865的标题"
-                :userId="7"
-                :adminBoxcoinEnable="true"
-                :userBoxcoinEnable="true"
-                :allowGift="true"
-                :postId="57260"
-            />
-            <Thx
-                postType="bbs"
-                postTitle="bbs23865的标题"
-                type="batchReward"
-                :userId="7"
-                :adminBoxcoinEnable="true"
-                :userBoxcoinEnable="true"
-                :postId="57260"
-                :allowGift="true"
-                :showRss="true"
-            />
-            <Comment category="post" id="80449"></Comment>
-            <RightSidebar :show-toggle="true">
+            <RightSidebar :show-toggle="true" style="padding: 15px">
                 <PostTopic type="bps" :id="48857"></PostTopic>
                 <div id="directory"></div>
+                <PostVersion :post="post"></PostVersion>
+                <PostCollection :id="59" />
             </RightSidebar>
-
-            <SuspendCommon
-                :drawerOptions="{
-                    author: {
-                        name: '作者名字',
-                        avatar: 'https://cdn.jx3box.com/upload/avatar/2022/3/2/8_9860765.png',
-                        author_id: 8,
-                    },
-                    subscribeType: 'posts',
-                    postType: 'macro',
-                    id: 97147,
-                    title: '薄嘴唇靓仔！！！',
-                }"
-                @search="suspendSearch"
-            >
-                <template #default>
-                    <div style="display: flex; gap: 1rem">
-                        <div>切换</div>
-                        <div>切换</div>
-                        <div>切换</div>
-                    </div>
-                </template>
-            </SuspendCommon>
         </Main>
         <CommonFooter> </CommonFooter>
     </div>
 </template>
 
 <script>
+import { getPost } from "../service/cms";
+import { get_item } from "../service/item";
+import { getTopicDetails } from "../service/community";
+import post_topics from "@jx3box/jx3box-common/data/post_topics.json";
+
+// components
 import singlebox from "./single/CmsSingle.vue";
-import UploadAlum from "./editor/UploadAlum.vue";
 import Author from "./single/Author.vue";
-import SimpleThxVue from "./single/SimpleThx.vue";
-import Comment from "./single/Comment.vue";
-import Thx from "./single/Thx.vue";
-import PostHeader from "./single/PostHeader.vue";
 import PostTopic from "./single/PostTopic.vue";
-import axios from "axios";
-import post_topics from "@jx3box/jx3box-common/data/post_topics.json";
-import { get_item } from "../service/item";
-import AdminDirectMessage from "./bread/AdminDirectMessage.vue";
-import Admin from "@/bread/Admin.vue";
-import versionBy from "./filters/versionBy.vue";
-import SuspendCommon from "./SuspendCommon.vue";
+import PostGuide from "./single/PostGuide.vue";
+import Homework from "./interact/Homework.vue";
+import PostVersion from "./single/PostVersion.vue";
+import PostCollection from "./single/PostCollection.vue";
 export default {
     name: "App",
     components: {
-        SimpleThxVue,
         Author,
-        Comment,
-        Thx,
         // PostHeader,
         PostTopic,
-        UploadAlum,
         // AdminDirectMessage,
         singlebox,
-        versionBy,
-        SuspendCommon,
         // Admin,
+        Homework,
+        PostGuide,
+        PostVersion,
+        PostCollection,
     },
     data() {
         return {
-            post_id: "74662",
+            tab: "content",
+
+            post_id: "23240",
             post: "",
             client: location.href.includes("origin") ? "origin" : "std",
-            tag: "",
-            // post_topics: post_topics["bps_pve"],
-            tag2: "",
             item1: null,
             item2: null,
             item3: null,
             item4: null,
             item5: null,
             item6: null,
+
+            // 列表
+            tag: "post",
+            post_topics: post_topics["pve"],
+            tag2: "",
+
+            // 通用
+            userpop: false,
+            homeworkVisible: false,
+
+            showSuspendCommon: false,
+
+            community: {},
         };
     },
     watch: {
         post_id: {
             immediate: true,
             handler: function () {
-                // this.loadPost();
+                this.loadPost();
             },
         },
     },
@@ -141,7 +201,7 @@ export default {
             console.log(data);
         },
         loadPost() {
-            axios.get(`/api/cms/post/${this.post_id}`).then((res) => {
+            getPost(this.post_id).then((res) => {
                 this.post = res.data.data;
                 this.$forceUpdate();
             });
@@ -198,15 +258,29 @@ export default {
                 }
             });
         },
+        loadCommunity: function () {
+            // 72
+            getTopicDetails(4339).then((res) => {
+                this.community = res.data.data;
+            });
+        },
     },
     mounted() {
         // this.loadItems();
+        this.loadCommunity();
     },
 };
 </script>
-
 <style lang="less">
-body {
-    padding-top: @header-height;
+.m-title {
+    margin: 20px 0 10px;
+    font-size: 16px;
+    font-weight: 500;
+}
+.m-block {
+    padding: 15px;
+    .flex;
+    flex-direction: column;
+    gap: 20px;
 }
 </style>

package/src/Breadcrumb.vue

@@ -13,7 +13,7 @@
         <!-- 面包屑内容 -->
         <Crumb :name="slug" v-if="crumbEnable" />
         <slot></slot>
-        <slot v-if="show" name="title"></slot>
+        <slot v-if="showTitle" name="title"></slot>
         <div class="u-op">
             <slot name="op-append"></slot>
             <a
@@ -22,7 +22,7 @@
                 class="u-publish el-button el-button--primary el-button--medium u-op-public"
             >
                 <el-icon><Edit /></el-icon>
-                <span>发布</span>
+                <span>{{ $jx3boxT("jx3boxUi.breadcrumb.publish", "发布") }}</span>
             </a>
             <a
                 v-if="feedbackEnable"
@@ -32,9 +32,15 @@
                 target="_blank"
             >
                 <el-icon><InfoFilled /></el-icon>
-                <span>反馈</span>
+                <span>{{ $jx3boxT("jx3boxUi.breadcrumb.feedback", "反馈") }}</span>
             </a>
-            <Admin v-if="adminEnable" :marksOptions="adminMarks" :show-extend="showExtend" :app="slug" :subtypeMap="subtypeMap" />
+            <Admin
+                v-if="adminEnable"
+                :marksOptions="adminMarks"
+                :show-extend="showExtend"
+                :app="slug"
+                :subtypeMap="subtypeMap"
+            />
             <slot name="op-prepend"></slot>
         </div>
     </div>
@@ -48,9 +54,11 @@ import Admin from "./bread/Admin.vue";
 import Crumb from "./bread/Crumb.vue";
 import { isApp } from "../assets/js/app.js";
 import Bus from "../utils/bus";
+import i18nMixin from "../i18n/mixin";
 
 export default {
     name: "CommonBreadcrumb",
+    mixins: [i18nMixin],
     props: {
         name: { type: String, default: "" },
         slug: { type: String, default: "" },
@@ -71,10 +79,10 @@ export default {
         return {
             isOpen: true,
             feedback: "/feedback?refer=" + encodeURIComponent(window.location.href),
-            isNotAdmin: !User.isEditor(),
+            isNotAdmin: !User.isEditor(), // 非管理员都显示反馈链接
             isOverlay: false,
             isApp: isApp(),
-            show: false,
+            showTitle: false,
         };
     },
     computed: {
@@ -96,20 +104,25 @@ export default {
             }
             let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
             if (scrollTop > 100) {
-                this.show = true;
+                this.showTitle = true;
             } else {
-                this.show = false;
+                this.showTitle = false;
             }
-        }
+        },
     },
     beforeUnmount() {
         document.removeEventListener("scroll", this.onShowTitle);
+        if (this.__toggleLeftSideHandler) {
+            Bus.off("toggleLeftSide", this.__toggleLeftSideHandler);
+            this.__toggleLeftSideHandler = null;
+        }
     },
     mounted: function () {
         document.addEventListener("scroll", this.onShowTitle);
-        Bus.on("toggleLeftSide", (data) => {
+        this.__toggleLeftSideHandler = (data) => {
             this.isOpen = data;
-        });
+        };
+        Bus.on("toggleLeftSide", this.__toggleLeftSideHandler);
 
         if (window.innerWidth < 1024) {
             this.isOpen = false;

package/src/CommonFooter.vue

@@ -3,13 +3,13 @@
         <div class="mx-auto w-full" style="max-width: 92rem">
             <div class="grid grid-cols-1 gap-10 pb-10 lg:grid-cols-12 lg:gap-8">
                 <section class="lg:col-span-3">
-                    <div class="flex items-center space-x-3">
+                    <a class="flex items-center space-x-3 cursor-pointer" href="/">
                         <img class="u-logo h-9 w-9" svg-inline src="../assets/img/common/logo.svg" alt="JX3BOX" />
                         <span class="text-2xl font-bold tracking-tight text-white">JX3BOX</span>
-                    </div>
+                    </a>
                     <p class="mt-5 text-sm leading-7 text-gray-400" style="max-width: 20rem">
-                        {{ $jx3boxT("jx3boxUi.footer.slogan1", "一站式剑三工具与资源聚合站。") }}<br />
-                        {{ $jx3boxT("jx3boxUi.footer.slogan2", "江湖路远，幸甚有你。") }}
+                        {{ $jx3boxT("jx3boxUi.commonFooter.slogan1", "一站式剑三工具与资源聚合站。") }}<br />
+                        {{ $jx3boxT("jx3boxUi.commonFooter.slogan2", "江湖路远，幸甚有你。") }}
                     </p>
                     <footer-official />
                 </section>

package/src/Footer.vue

@@ -3,16 +3,22 @@
         <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>
+                <a href="https://beian.miit.gov.cn/" class="u-beian" target="_blank">{{
+                    $jx3boxT("jx3boxUi.footer.icp", "湘ICP备2021002288号")
+                }}</a>
             </div>
             <div class="c-footer-right">
-                <a class="u-about" :href="about" target="_blank">关于我们</a>
+                <a class="u-about" :href="about" target="_blank">{{ $jx3boxT("jx3boxUi.footer.about", "关于我们") }}</a>
                 <em>|</em>
-                <a class="u-doc" href="/help" target="_blank">帮助文档</a>
+                <a class="u-doc" href="/help" target="_blank">{{ $jx3boxT("jx3boxUi.footer.doc", "帮助文档") }}</a>
                 <em>|</em>
-                <a class="u-log" href="https://github.com/JX3BOX" target="_blank">代码仓库</a>
+                <a class="u-log" href="https://github.com/JX3BOX" target="_blank">{{
+                    $jx3boxT("jx3boxUi.footer.repo", "代码仓库")
+                }}</a>
                 <em>|</em>
-                <a class="u-feedback" :href="feedback" target="_blank">反馈建议</a>
+                <a class="u-feedback" :href="feedback" target="_blank">{{
+                    $jx3boxT("jx3boxUi.footer.feedback", "反馈建议")
+                }}</a>
             </div>
             <slot></slot>
         </div>
@@ -22,8 +28,10 @@
 <script>
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import { isApp } from "../assets/js/app.js";
+import i18nMixin from "../i18n/mixin";
 export default {
     name: "CommonFooter",
+    mixins: [i18nMixin],
     props: {
         darkMode: {
             type: Boolean,

package/src/LeftSideToggle.vue

@@ -26,14 +26,21 @@ export default {
         },
     },
     mounted: function () {
-        Bus.on("toggleLeftSide", (data) => {
+        this.__toggleLeftSideHandler = (data) => {
             this.isOpen = data;
-        });
+        };
+        Bus.on("toggleLeftSide", this.__toggleLeftSideHandler);
 
         if (window.innerWidth < 1024) {
             this.isOpen = false;
         }
     },
+    beforeUnmount() {
+        if (this.__toggleLeftSideHandler) {
+            Bus.off("toggleLeftSide", this.__toggleLeftSideHandler);
+            this.__toggleLeftSideHandler = null;
+        }
+    },
     components: {},
 };
 </script>
@@ -52,7 +59,7 @@ export default {
     }
     &.on {
         svg {
-            fill: @primary;
+            fill: var(--el-color-primary);
         }
     }
 }

package/src/LeftSidebar.vue

@@ -16,7 +16,7 @@
             class="c-sidebar-left-toggle"
             :class="!isOpen && 'close-sidebar-left'"
             @click="toggleLeftSide"
-            :title="isOpen ? '收起侧边栏' : '打开侧边栏'"
+            :title="isOpen ? $jx3boxT('jx3boxUi.leftSidebar.collapse', '收起侧边栏') : $jx3boxT('jx3boxUi.leftSidebar.expand', '打开侧边栏')"
         >
             <el-icon>
                 <ArrowRight v-if="!isOpen" />
@@ -31,9 +31,11 @@ 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";
+import i18nMixin from "../i18n/mixin";
 const DECORATION_SIDEBAR = "decoration_sidebar";
 export default {
     name: "LeftSidebar",
+    mixins: [i18nMixin],
     props: ["open", "withoutBread", "uid"],
     data: function () {
         return {
@@ -90,17 +92,29 @@ export default {
             }
         },
     },
+    beforeUnmount() {
+        if (this.__toggleLeftSideHandler) {
+            Bus.off("toggleLeftSide", this.__toggleLeftSideHandler);
+            this.__toggleLeftSideHandler = null;
+        }
+        if (this.__docClickHandler) {
+            document.removeEventListener("click", this.__docClickHandler);
+            this.__docClickHandler = null;
+        }
+    },
     mounted: function () {
-        Bus.on("toggleLeftSide", (data) => {
+        this.__toggleLeftSideHandler = (data) => {
             this.isOpen = data;
-        });
+        };
+        Bus.on("toggleLeftSide", this.__toggleLeftSideHandler);
 
         if (window.innerWidth < 1024) {
             this.isOpen = false;
 
-            document.addEventListener("click", function () {
+            this.__docClickHandler = () => {
                 Bus.emit("toggleLeftSide", false);
-            });
+            };
+            document.addEventListener("click", this.__docClickHandler);
         }
     },
     created: function () {

package/src/Main.vue

@@ -33,9 +33,16 @@ export default {
     },
     methods: {},
     mounted: function () {
-        Bus.on("toggleLeftSide", (data) => {
+        this.__toggleLeftSideHandler = (data) => {
             this.expanding = !data;
-        });
+        };
+        Bus.on("toggleLeftSide", this.__toggleLeftSideHandler);
+    },
+    beforeUnmount() {
+        if (this.__toggleLeftSideHandler) {
+            Bus.off("toggleLeftSide", this.__toggleLeftSideHandler);
+            this.__toggleLeftSideHandler = null;
+        }
     },
     created: function () {
         this.expanding = this.withoutLeft === undefined ? false : !!this.withoutLeft;

package/src/RightSidebar.vue

@@ -9,7 +9,7 @@
                 class="c-sidebar-right-toggle"
                 :class="!isOpen && 'close-sidebar-right'"
                 @click="toggleRightSide"
-                :title="isOpen ? '收起侧边栏' : '打开侧边栏'"
+                :title="isOpen ? $jx3boxT('jx3boxUi.rightSidebar.collapse', '收起侧边栏') : $jx3boxT('jx3boxUi.rightSidebar.expand', '打开侧边栏')"
             >
                 <el-icon>
                     <ArrowLeft v-show="!isOpen" />
@@ -23,8 +23,10 @@
 <script>
 import { isApp } from "../assets/js/app.js";
 import Bus from "../utils/bus";
+import i18nMixin from "../i18n/mixin";
 export default {
     name: "RightSidebar",
+    mixins: [i18nMixin],
     props: {
         // 展示收起按钮
         showToggle: {
@@ -45,14 +47,21 @@ export default {
         },
     },
     mounted: function () {
-        Bus.on("toggleRightSide", (data) => {
+        this.__toggleRightSideHandler = (data) => {
             this.isOpen = data;
-        });
+        };
+        Bus.on("toggleRightSide", this.__toggleRightSideHandler);
 
         if (window.innerWidth <= 1440) {
             this.isOpen = false;
         }
     },
+    beforeUnmount() {
+        if (this.__toggleRightSideHandler) {
+            Bus.off("toggleRightSide", this.__toggleRightSideHandler);
+            this.__toggleRightSideHandler = null;
+        }
+    },
 };
 </script>