@jx3box/jx3box-ui 2.0.2 → 2.0.4

package/service/comment.js

@@ -1,11 +1,12 @@
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 
 import { ElNotification as Notification } from "element-plus";
-import { $cms } from "@jx3box/jx3box-common/js/api";
+import { $cms, $next } from "@jx3box/jx3box-common/js/api";
 import User from "@jx3box/jx3box-common/js/user";
 
 const KEY = "cmt_order";
-const { __Links, __next } = JX3BOX;
+const { __Links } = JX3BOX;
+const $ = $next({ interceptor: false, mute: true });
 
 export async function getOrderMode() {
     if (User.isLogin()) {
@@ -51,14 +52,12 @@ export async function setOrderMode(val) {
 }
 
 export const GET = function (url, queryParams) {
-    let options = {
-        method: "GET",
-        headers: {
-            Accept: "application/json",
-            "Content-Type": "application/json",
-        },
-    };
-    return __fetch(url, queryParams, options);
+    return $
+        .get(url, {
+            params: queryParams,
+        })
+        .then((res) => res.data)
+        .catch((err) => __handleError(err));
 };
 
 const postRecord = {};
@@ -90,98 +89,59 @@ export const POST = function (url, queryParams, body) {
             count: 0,
         };
     }
-    let options = {
-        method: "POST",
-        headers: {
-            Accept: "application/json",
-            "Content-Type": "application/json",
-        },
-        body: JSON.stringify(body),
-    };
-    return __fetch(url, queryParams, options);
+    return $
+        .post(url, body, {
+            params: queryParams,
+        })
+        .then((res) => res.data)
+        .catch((err) => __handleError(err));
 };
 export const PUT = function (url, queryParams, body) {
-    let options = {
-        method: "PUT",
-        headers: {
-            Accept: "application/json",
-            "Content-Type": "application/json",
-        },
-        body: JSON.stringify(body),
-    };
-    return __fetch(url, queryParams, options);
+    return $
+        .put(url, body, {
+            params: queryParams,
+        })
+        .then((res) => res.data)
+        .catch((err) => __handleError(err));
 };
 
 export const DELETE = function (url, queryParams) {
-    let options = {
-        method: "DELETE",
-    };
-    return __fetch(url, queryParams, options);
+    return $
+        .delete(url, {
+            params: queryParams,
+        })
+        .then((res) => res.data)
+        .catch((err) => __handleError(err));
 };
 
-function __fetch(url, queryParams, options) {
-    let domain = process.env.NODE_ENV == "production" ? __next : "/";
-    if (domain[domain.length - 1] == "/") {
-        domain = domain.substring(0, domain.length - 1);
-    }
-    url = domain + url;
-    options.credentials = "include";
-    if (queryParams) {
-        let queryQueue = [];
-        Object.keys(queryParams).forEach((key) => {
-            queryQueue.push(key + "=" + queryParams[key]);
-        });
-        let domain = __next;
-        if (domain[domain.length - 1] == "/") {
-            domain = domain.substring(0, domain.length - 1);
-        }
-        url = url + "?" + queryQueue.join("&");
+function __handleError(err) {
+    const status = err?.response?.status;
+    const statusText = err?.response?.statusText || "Request Error";
+    const message = err?.response?.data?.msg || err?.response?.data || "";
+    switch (status) {
+        case 401:
+        case 403:
+            window.location.href = __Links.account.login + "?redirect=" + encodeURIComponent(window.location.href);
+            break;
+        case 423:
+            window.location.href = __Links.account.email_verify + "?redirect=" + encodeURIComponent(window.location.href);
+            break;
+        case 406:
+            Notification.warning({
+                title: "系统",
+                message: message || "提交内容不合法,请重新提交",
+                duration: 3000,
+                position: "bottom-right",
+            });
+            break;
+        default:
+            Notification.error({
+                title: "系统:" + statusText,
+                message: message || "系统错误,请稍后重试!",
+                duration: 3000,
+                position: "bottom-right",
+            });
+            break;
     }
-
-    return fetch(url, options).then((resp) => {
-        switch (resp.status) {
-            case 200:
-                break;
-            case 401:
-                window.location.href = __Links.account.login + "?redirect=" + encodeURIComponent(window.location.href);
-                throw new Error("错误:" + resp.statusText);
-            case 403:
-                window.location.href = __Links.account.login + "?redirect=" + encodeURIComponent(window.location.href);
-                throw new Error("错误:" + resp.statusText);
-            case 423:
-                window.location.href =
-                    __Links.account.email_verify + "?redirect=" + encodeURIComponent(window.location.href);
-                throw new Error("错误:" + resp.statusText);
-            case 406:
-                resp.text().then((body) => {
-                    Notification.warning({
-                        title: "系统",
-                        message: body || "提交内容不合法,请重新提交",
-                        duration: 3000,
-                        position: "bottom-right",
-                    });
-                });
-
-                throw new Error("错误:" + resp.statusText);
-            default:
-                resp.text().then((body) => {
-                    Notification.error({
-                        title: "系统:" + resp.statusText,
-                        message: body || "系统错误,请稍后重试!",
-                        duration: 3000,
-                        position: "bottom-right",
-                    });
-                });
-
-                throw new Error("错误:" + resp.statusText);
-        }
-        let contentType = resp.headers.get("Content-Type");
-        contentType = contentType && contentType.split(";").shift();
-        switch (contentType) {
-            case "application/json":
-                return resp.json();
-            default:
-                return resp.text();
-        }
-    });
+    return Promise.reject(err);
 }

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/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";
 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;