@jx3box/jx3box-ui 2.0.2 → 2.0.3

package/src/App.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="container-page">
         <CommonHeader></CommonHeader>
-        <!-- <breadcrumb
+        <breadcrumb
             name="频道名称"
             slug="slug"
             root="/slug"
@@ -15,9 +15,9 @@
             </template>
             <template #op-prepend> </template>
         </breadcrumb>
-        <LeftSidebar :open="true" :uid="7">
+        <LeftSidebar :open="true" :uid="8719">
             <LeftSideToggle :mobileOnly="true" />
-            <Author :uid="7" />
+            <Author :uid="8719" />
         </LeftSidebar>
         <Main :withoutLeft="false" :withoutRight="false">
             <versionBy value=""></versionBy>
@@ -72,42 +72,42 @@
                     </div>
                 </template>
             </SuspendCommon>
-        </Main> -->
+        </Main>
         <CommonFooter> </CommonFooter>
     </div>
 </template>
 
 <script>
-// import singlebox from "./single/cms-single.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 singlebox from "./single/cms-single.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";
 export default {
     name: "App",
     components: {
-        // SimpleThxVue,
-        // Author,
-        // Comment,
-        // Thx,
-        // // PostHeader,
-        // PostTopic,
-        // UploadAlum,
-        // // AdminDirectMessage,
-        // singlebox,
-        // versionBy,
-        // SuspendCommon,
-        // // Admin,
+        SimpleThxVue,
+        Author,
+        Comment,
+        Thx,
+        // PostHeader,
+        PostTopic,
+        UploadAlum,
+        // AdminDirectMessage,
+        singlebox,
+        versionBy,
+        SuspendCommon,
+        // Admin,
     },
     data() {
         return {

package/src/Breadcrumb.vue

@@ -34,9 +34,7 @@
                 <el-icon><InfoFilled /></el-icon>
                 <span>反馈</span>
             </a>
-            <!-- <AdminButton v-if="adminEnable" class="u-admin" /> -->
             <Admin v-if="adminEnable" :marksOptions="adminMarks" :show-extend="showExtend" :app="slug" :subtypeMap="subtypeMap" />
-            <!-- <AdminDrop v-if="adminEnable" /> -->
             <slot name="op-prepend"></slot>
         </div>
     </div>
@@ -53,22 +51,22 @@ import Bus from "../utils/bus";
 
 export default {
     name: "CommonBreadcrumb",
-    props: [
-    "name",
-        "slug",
-        "root",
-        "publishEnable",
-        "adminEnable",
-        "topicEnable",
-        "feedbackEnable",
-        "overlayEnable",
-        "crumbEnable",
-        "withoutLeft",
-        "adminMarks",
-        "icon",
-        "subtypeMap",
-        "showExtend"
-    ],
+    props: {
+        name: { type: String, default: "" },
+        slug: { type: String, default: "" },
+        root: { type: String, default: "" },
+        publishEnable: { type: Boolean, default: false },
+        adminEnable: { type: Boolean, default: false },
+        topicEnable: { type: Boolean, default: false },
+        feedbackEnable: { type: Boolean, default: false },
+        overlayEnable: { type: Boolean, default: false },
+        crumbEnable: { type: Boolean, default: false },
+        withoutLeft: { type: Boolean, default: false },
+        adminMarks: { type: Object, default: () => ({}) },
+        icon: { type: String, default: "" },
+        subtypeMap: { type: Object, default: () => ({}) },
+        showExtend: { type: Boolean, default: false },
+    },
     data: function () {
         return {
             isOpen: true,
@@ -130,8 +128,6 @@ export default {
     components: {
         Admin,
         Crumb,
-        // AdminButton,
-        // AdminDrop
     },
 };
 </script>

package/src/Icon.vue

@@ -0,0 +1,53 @@
+<template>
+    <img v-if="renderMode === 'inline'" svg-inline :src="path" :style="boxStyle" />
+
+    <i v-else-if="renderMode === 'font-awesome'" :class="name" :style="fontSizeStyle"></i>
+
+    <i v-else-if="renderMode === 'lucide'" :data-lucide="name" :style="boxStyle"></i>
+
+    <svg v-else-if="renderMode === 'sprite'" class="rx-icon" :width="size" :height="size" role="img" :style="{ fill: 'currentColor' }">
+        <!-- 同时写 href 与 xlink:href，兼容性更好 -->
+        <use :href="symbolId" :xlink:href="symbolId" />
+    </svg>
+</template>
+
+<script>
+export default {
+    name: "Icon",
+    props: {
+        // type 缺省：使用 path + svg-inline
+        // type=font-awesome：name 直接传入 "fa-xxx fa-solid" 等 class
+        // type=lucide：name 直接传入 lucide 的 icon name（如 "activity"）
+        // type=sprite：使用雪碧图（prefix + name）
+        type: { type: String, default: "inline" },
+        name: { type: String, default: "" },
+        path: { type: String, default: "" },
+        prefix: { type: String, default: "icon-" }, // 与插件的 symbolId 前缀一致
+        size: { type: [Number, String], default: 24 }, // 图标大小，单位 px
+    },
+    computed: {
+        renderMode() {
+            const t = (this.type || "").trim();
+            if (!t) return this.path ? "inline" : "";
+            if (t === "font-awesome") return this.name ? "font-awesome" : "";
+            if (t === "lucide") return this.name ? "lucide" : "";
+            if (t === "sprite") return this.name ? "sprite" : "";
+            return this.name ? "sprite" : "";
+        },
+        sizePx() {
+            if (typeof this.size === "number") return `${this.size}px`;
+            if (!this.size) return "24px";
+            return String(this.size).match(/^\d+$/) ? `${this.size}px` : String(this.size);
+        },
+        fontSizeStyle() {
+            return { fontSize: this.sizePx };
+        },
+        boxStyle() {
+            return { width: this.sizePx, height: this.sizePx };
+        },
+        symbolId() {
+            return `#${this.prefix}${this.name}`;
+        },
+    },
+};
+</script>

package/src/author/AuthorFans.vue

@@ -4,7 +4,7 @@
             <img svg-inline src="../../assets/img/leftsidebar/fans.svg" />
             <span>粉丝榜</span>
         </div>
-        <div class="f-avatar">
+        <div class="f-avatar" v-if="list && list.length">
             <el-tooltip
                 class="item"
                 effect="dark"
@@ -21,7 +21,9 @@
         </div>
         <div class="f-bottom">
             粉丝数: <span class="u-count">{{ fans_count }}</span
-            ><template v-if="boxcoin_count">，累计收到盒币打赏: <span class="u-count">{{ boxcoin_count }}</span></template>
+            ><template v-if="boxcoin_count"
+                >，累计收到盒币打赏: <span class="u-count">{{ boxcoin_count }}</span></template
+            >
         </div>
     </div>
 </template>
@@ -33,7 +35,7 @@ export default {
     name: "AuthorFans",
     props: {
         uid: {
-            type: Number,
+            type: [Number, String],
             default: 0,
         },
     },
@@ -148,15 +150,23 @@ export default {
         }
     }
     .f-avatar {
-        height: 30px;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 5px;
+        margin-bottom: 6px;
+        line-height: 1;
         .f-avatar-num {
             .fz(12px);
             color: #888;
             font-weight: 700;
         }
-        .u-fan{
+        .u-fan {
             .mr(5px);
         }
+        .el-tooltip {
+            display: inline-flex;
+        }
     }
     .f-bottom {
         .mt(5px);

package/src/author/AuthorFollow.vue

@@ -37,7 +37,7 @@ export default {
     name: "AuthorFollow",
     props: {
         uid: {
-            type: Number,
+            type: [Number, String],
             default: 0,
         },
     },

package/src/author/AuthorGift.vue

@@ -7,16 +7,11 @@
             :disabled="isSelf || !status"
             :title="btnTitle"
             plain
+            size="small"
             >赠礼</el-button
         >
 
-        <el-dialog
-            title="赠礼"
-            v-model="visible"
-            :append-to-body="true"
-            class="c-author-gift-dialog"
-            v-if="status"
-        >
+        <el-dialog title="赠礼" v-model="visible" :append-to-body="true" class="c-author-gift-dialog" v-if="status">
             <div class="u-content">
                 <div class="u-left">
                     <em class="u-label">🌟 金箔</em>
@@ -27,7 +22,7 @@
                     <em class="u-label">❤️ 赠送</em>
                     <div class="u-points">
                         <el-radio-group v-model="count">
-                            <el-radio :label="item" v-for="item in fitPoints" :key="item" border>
+                            <el-radio :value="item" v-for="item in fitPoints" :key="item" border>
                                 <b>{{ item }}</b
                                 >金箔
                             </el-radio>
@@ -64,7 +59,12 @@ import User from "@jx3box/jx3box-common/js/user";
 import { sendCny, checkCnyStatus, checkGiftStatus } from "../../service/thx";
 export default {
     name: "AuthorGift",
-    props: ["uid"],
+    props: {
+        uid: {
+            type: [Number, String],
+            default: 0,
+        },
+    },
     components: {},
     data: function () {
         return {

package/src/author/AuthorHonor.vue

@@ -8,10 +8,15 @@ import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import { getUserHonor } from "../../service/cms";
 import { inRange } from "lodash";
 
-const { __imgPath, __Root } = JX3BOX;
+const { __cdn, __Root } = JX3BOX;
 const HONOR_IMG_KEY = "honor_img";
 export default {
-    props: ["uid"],
+    props: {
+        uid: {
+            type: [Number, String],
+            default: 0,
+        },
+    },
     data: function () {
         return {
             honor: "",
@@ -35,12 +40,9 @@ export default {
     },
     methods: {
         imgUrl: function () {
-            let item = this.honor;
+            let item = this.honor?.honor_info;
             if (!item) return;
-            if (item.isImgIndex) {
-                return __imgPath + `decoration/honor/${item.img}/${item.img}_${item.imgIndex}.${item.img_ext}`;
-            }
-            return __imgPath + `decoration/honor/${item.img}/${item.img}.${item.img_ext}`;
+            return __cdn + `design/decoration/honor/${item.img}/${item.img}.${item.img_ext}`;
         },
         getHonor() {
             let user_id = this.uid;
@@ -72,7 +74,6 @@ export default {
             let ranking = honorConfig.ranking;
             let honorStr = honorConfig.year || "";
 
-            console.log(honorConfig, regPrefix);
             if (!only) {
                 if (regPrefix) {
                     honorStr = honorStr + (data[regPrefix[0].slice(1, -1)] || "");

package/src/author/AuthorInfo.vue

@@ -62,7 +62,16 @@ import Honor from "./AuthorHonor.vue";
 const { __imgPath, __userLevelColor } = JX3BOX;
 export default {
     name: "AuthorInfo",
-    props: ["uid", "anonymous"],
+    props: {
+        uid: {
+            type: [Number, String],
+            default: 0,
+        },
+        anonymous: {
+            type: [Number, String],
+            default: 0,
+        },
+    },
     components: {
         Avatar,
         Honor,

package/src/author/AuthorLink.vue

@@ -38,7 +38,14 @@ const { tvLink } = utilModule;
 
 export default {
     name: "AuthorLink",
-    props: ["data"],
+    props: {
+        data: {
+            type: Object,
+            default: function () {
+                return {};
+            },
+        },
+    },
     components: {
         // AuthorMsg
     },

package/src/author/AuthorPosts.vue

@@ -11,10 +11,8 @@
         <ul class="u-list" v-if="data && data.length">
             <li v-for="(item, i) in data" :key="i">
                 <a class="u-item" :href="url(item.ID, item.post_type)" target="_blank">
-                    <span>
-                        <img svg-inline src="../../assets/img/leftsidebar/arrow.svg" class="u-icon" />
-                        {{ item.post_title || item.post_type + "/无标题" }}
-                    </span>
+                    <img svg-inline src="../../assets/img/leftsidebar/arrow.svg" class="u-icon" />
+                    <span class="u-title">{{ item.post_title || item.post_type + "/无标题" }}</span>
                 </a>
             </li>
         </ul>
@@ -74,7 +72,9 @@ export default {
         .db;
     }
     .u-item {
-        .db;
+        .flex;
+        align-items: center;
+        gap: 5px;
         padding: 3px 2px;
         .nobreak;
         .fz(12px,2);
@@ -82,9 +82,7 @@ export default {
         border-bottom: 1px solid transparent;
         &:hover {
             color: @pink;
-            // background-color:#fff;
-            // border-bottom: 1px solid @border;
-            .u-icon{
+            .u-icon {
                 transform: translateX(5px);
             }
         }
@@ -94,9 +92,17 @@ export default {
         .size(12px);
         // .y;
         color: #999;
+        flex: 0 0 auto;
         // .mr(5px);
         transition: all 0.3s;
     }
+    .u-title {
+        flex: 1 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
 
     .u-label {
         .pr;

package/src/author/AuthorRss.vue

@@ -1,18 +1,16 @@
 <template>
-    <div class="c-author-rss">
-        <el-button
-            class="u-btn"
-            :class="{ 'u-fans-box': isSelf }"
-            size="small"
-            plain
-            @click="subscribe"
-            :loading="loading"
-            :disabled="isSelf"
-        >
-            <img class="u-icon" svg-inline :src="src" />
-            {{ btnText }}</el-button
-        >
-    </div>
+    <el-button
+        class="u-btn c-author-rss"
+        :class="{ 'u-fans-box': isSelf, 'is-subscribed': subscribed }"
+        size="small"
+        plain
+        @click="subscribe"
+        :loading="loading"
+        :disabled="isSelf"
+    >
+        <img class="u-icon" svg-inline src="../../assets/img/author/rss.svg" />
+        {{ btnText }}</el-button
+    >
 </template>
 
 <script>
@@ -54,9 +52,6 @@ export default {
         isLogin: function () {
             return User.isLogin();
         },
-        src() {
-            return jx3box.__cdn + "design/vector/icon/rss_author.svg";
-        }
     },
     watch: {
         uid: {
@@ -130,28 +125,27 @@ export default {
 </script>
 
 <style lang="less">
-.c-author-rss {
-    .u-btn.el-button {
-        cursor: default;
-        &:hover {
-            cursor: pointer;
-            background-color: @light-pink;
-            color: #fff;
-            border-color: darken(@light-pink, 2%);
-
-            .u-icon {
-                filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(198deg) brightness(104%) contrast(101%);
-            }
-        }
+.c-author-rss.el-button {
+    cursor: default;
+    &:hover,
+    &.is-plain:hover,
+    &.is-plain:focus {
+        cursor: pointer;
+        background-color: @light-pink;
+        color: #fff;
+        border-color: darken(@light-pink, 2%);
     }
     .u-icon {
-        .size(14px);
-        .pr;
-        top: 1px;
-        filter: invert(40%) sepia(5%) saturate(419%) hue-rotate(182deg) brightness(89%) contrast(84%);
+        .size(10px);
+        fill: currentColor;
+        margin-right: 4px;
     }
 }
 
+.c-author-rss.el-button.is-subscribed {
+    color: #999;
+}
+
 @media screen and (max-width: @phone) {
     .el-message-box {
         max-width: 60%;

package/src/bread/Admin.vue

@@ -13,7 +13,7 @@
             <!-- <template v-if="isAdmin"> -->
             <el-divider content-position="left">状态变更</el-divider>
             <el-radio-group v-model="post_status" class="c-admin-status">
-                <el-radio-button v-for="(option, key) in status_options" :label="key" :key="key">{{
+                <el-radio-button v-for="(option, key) in status_options" :value="key" :key="key">{{
                     option
                 }}</el-radio-button>
             </el-radio-group>
@@ -22,14 +22,14 @@
 
             <el-divider content-position="left">可见性变更</el-divider>
             <el-radio-group v-model="visible" class="c-admin-status">
-                <el-radio-button v-for="(option, key) in visible_options" :label="key" :key="key">{{
+                <el-radio-button v-for="(option, key) in visible_options" :value="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 v-for="(option, key) in mark_options" :value="key" :key="key">{{ option }}</el-checkbox>
             </el-checkbox-group>
 
             <el-divider content-position="left">高亮置顶</el-divider>
@@ -292,7 +292,20 @@ export default {
         // 拉
         pull: function () {
             getSetting(this.pid).then((data) => {
-                let { ID, color, mark, post_status, post_author, sticky, post_banner, post_type, visible, star, post_subtype, topics } = data;
+                let {
+                    ID,
+                    color,
+                    mark,
+                    post_status,
+                    post_author,
+                    sticky,
+                    post_banner,
+                    post_type,
+                    visible,
+                    star,
+                    post_subtype,
+                    topics,
+                } = data;
                 this.pid = ID;
                 this.post_status = post_status;
                 this.visible = visible;
@@ -306,7 +319,7 @@ export default {
                 if (this.sticky) this.isSticky = true;
 
                 this.isStar = star || 0;
-                this.topics = topics?.map(item => item.topic) || [];
+                this.topics = topics?.map((item) => item.topic) || [];
                 this.post_subtype = post_subtype || "";
 
                 // 设置加载完成标识
@@ -348,7 +361,7 @@ export default {
                 type: this.post_type,
                 id: this.pid,
             });
-        }
+        },
     },
     watch: {
         "$route.params.id": function () {

package/src/bread/Crumb.vue

@@ -6,8 +6,13 @@
 import { getBreadcrumb } from "../../service/breadcrumb";
 
 export default {
-    name: "BeardCrumb",
-    props: ["name"],
+    name: "BreadCrumb",
+    props: {
+        name: {
+            type: String,
+            default: "",
+        },
+    },
     data: function () {
         return {
             html: "",