@jx3box/jx3box-common-ui 9.0.0 → 9.0.2

package/assets/css/author.less

@@ -75,6 +75,21 @@
     .u-block{
         .mt(20px);
     }
+
+    .u-btn {
+        &:hover {
+            .u-msg-icon {
+                filter: invert(33%) sepia(39%) saturate(6852%) hue-rotate(201deg) brightness(87%) contrast(98%);
+            }
+        }
+    }
+
+    .u-msg-icon {
+        .size(12px);
+        .pr;
+        top: 2px;
+        filter: invert(40%) sepia(5%) saturate(419%) hue-rotate(182deg) brightness(89%) contrast(84%);
+    }
 }
 
 .c-sidebar-left .c-author {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-common-ui",
-    "version": "9.0.0",
+    "version": "9.0.2",
     "description": "JX3BOX UI",
     "main": "index.js",
     "scripts": {
@@ -32,7 +32,7 @@
     "dependencies": {
         "@jx3box/jx3box-comment-ui": "^1.9.9",
         "@jx3box/jx3box-common": "^8.4.7",
-        "@jx3box/jx3box-data": "^3.6.9",
+        "@jx3box/jx3box-data": "^3.7.0",
         "@jx3box/jx3box-editor": "^2.2.16",
         "@jx3box/reporter": "^0.0.4",
         "axios": "^0.26.1",

package/src/Author.vue

@@ -3,9 +3,13 @@
         <AuthorInfo :uid="uid" @ready="installModules" />
         <template v-if="data">
             <div class="u-interact">
-                <AuthorFollow style="margin-right: 8px" :uid="uid" />
+                <!-- <AuthorFollow style="margin-right: 8px" :uid="uid" /> -->
+                <AuthorRss style="margin-right: 8px" :uid="uid" />
                 <!-- <AuthorGift :uid="uid" /> -->
-                <el-button icon="el-icon-message" class="u-btn" size="mini" @click="onMessage">私信</el-button>
+                <el-button class="u-btn" size="mini" @click="onMessage">
+                    <img class="u-msg-icon" svg-inline :src="src" />
+                    私信
+                </el-button>
             </div>
             <!-- <AuthorMsg :uid="uid" /> -->
             <AuthorLink class="u-block u-links" :uid="uid" :data="data" />
@@ -21,19 +25,22 @@
 <script>
 import AuthorInfo from "./author/AuthorInfo.vue";
 import AuthorLink from "./author/AuthorLink.vue";
-import AuthorFollow from "./author/AuthorFollow.vue";
+// import AuthorFollow from "./author/AuthorFollow.vue";
 // import AuthorMsg from "./author/AuthorMsg.vue";
 // import AuthorGift from "./author/AuthorGift.vue";
 // import AuthorFans from "./author/AuthorFans.vue";
 import AuthorMedals from "./author/AuthorMedals.vue";
 import AuthorTeams from "./author/AuthorTeams.vue";
 import AuthorPosts from "./author/AuthorPosts.vue";
+import AuthorRss from "./author/AuthorRss.vue";
+import {__cdn} from "@jx3box/jx3box-common/data/jx3box.json";
 export default {
     name: "Author",
     props: ["uid"],
     data: function () {
         return {
             data: "",
+            src: __cdn + "design/vector/icon/message.svg",
         };
     },
     methods: {
@@ -47,13 +54,14 @@ export default {
     components: {
         AuthorInfo,
         AuthorLink,
-        AuthorFollow,
+        // AuthorFollow,
         // AuthorMsg,
         // AuthorGift,
         AuthorMedals,
         AuthorTeams,
         AuthorPosts,
         // AuthorFans,
+        AuthorRss,
     },
 };
 </script>

package/src/author/AuthorFollow.vue

@@ -157,9 +157,9 @@ export default {
         cursor: default;
         &:hover {
             cursor: pointer;
-            background-color: @light-pink ;
-            color: #fff ;
-            border-color: darken(@light-pink, 2%) ;
+            background-color: @light-pink;
+            color: #fff;
+            border-color: darken(@light-pink, 2%);
         }
     }
 

package/src/author/AuthorRss.vue

@@ -0,0 +1,155 @@
+<template>
+    <div class="c-author-rss">
+        <el-button
+            class="u-btn"
+            :class="{ 'u-fans-box': isSelf }"
+            size="mini"
+            plain
+            @click="subscribe"
+            :loading="loading"
+            :disabled="isSelf"
+        >
+            <img class="u-icon" svg-inline :src="src" />
+            {{ btnText }}</el-button
+        >
+    </div>
+</template>
+
+<script>
+import { getAuthorRss, subscribeAuthor, unsubscribeAuthor } from "@jx3box/jx3box-common/js/rss";
+import User from "@jx3box/jx3box-common/js/user";
+import { __cdn } from "@jx3box/jx3box-common/data/jx3box.json";
+export default {
+    name: "AuthorRss",
+    props: {
+        uid: {
+            type: Number,
+            default: 0,
+        },
+    },
+    data() {
+        return {
+            subscribed: false,
+            fansNum: 0,
+            loading: false,
+        };
+    },
+    computed: {
+        btnText() {
+            return this.subscribed ? "已订阅" : "订阅";
+        },
+        btnType() {
+            return !this.subscribed ? "info" : "warning";
+        },
+        isSelf() {
+            return this.uid == this.user.uid;
+        },
+        user() {
+            return User.getInfo();
+        },
+        isLogin: function () {
+            return User.isLogin();
+        },
+        src() {
+            return __cdn + "design/vector/icon/rss_author.svg";
+        }
+    },
+    watch: {
+        uid: {
+            immediate: true,
+            handler(val) {
+                val && this.loadRss();
+            },
+        },
+    },
+    methods: {
+        // 格式化粉丝数
+        formatFansNum(num) {
+            if (num < 10000) {
+                return num === 0 ? "" : num;
+            } else {
+                return (num / 10000).toFixed(1) + "万";
+            }
+        },
+        // 关注
+        subscribe() {
+            if (!this.isLogin) {
+                User.toLogin();
+                return;
+            }
+            if (this.subscribed) {
+                this.unsubscribe({ id: this.uid });
+            } else {
+                subscribeAuthor({ id: this.uid })
+                    .then((res) => {
+                        this.subscribed = true;
+                    })
+                    .catch((err) => {
+                        console.log(err);
+                    });
+            }
+        },
+        // 取消订阅
+        unsubscribe() {
+            // this.$confirm("是否取消订阅", "提示", {
+            //     confirmButtonText: "确定",
+            //     cancelButtonText: "取消",
+            //     type: "warning",
+            // }).then(() => {
+                unsubscribeAuthor({ id: this.uid })
+                    .then((res) => {
+                        this.$message.success("操作成功");
+                        this.subscribed = false;
+                    })
+                    .catch((err) => {
+                        console.log(err);
+                    });
+            // });
+        },
+        loadRss() {
+            this.loading = true;
+            getAuthorRss({ id: this.uid })
+                .then((res) => {
+                    this.fansNum = res.data.data.total || 0;
+                    this.subscribed = res.data.data.subscribed;
+                })
+                .catch((err) => {
+                    console.log(err);
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
+        },
+    },
+};
+</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%);
+            }
+        }
+    }
+    .u-icon {
+        .size(12px);
+        .pr;
+        top: 2px;
+        filter: invert(40%) sepia(5%) saturate(419%) hue-rotate(182deg) brightness(89%) contrast(84%);
+    }
+}
+
+@media screen and (max-width: @phone) {
+    .el-message-box {
+        max-width: 60%;
+    }
+}
+</style>

package/src/interact/Rss.vue

@@ -42,6 +42,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        title: {
+            type: String,
+            default: "",
+        },
     },
     data() {
         return {
@@ -87,6 +91,9 @@ export default {
             return {
                 type: this.type,
                 id: this.id,
+                data: {
+                    title: this.title
+                }
             }
         },
         isLogin() {

package/src/single/Thx.vue

@@ -38,7 +38,7 @@
                 />
                 <Like :postId="postId" :postType="postType"></Like>
                 <fav :postId="postId" :postType="postType" :postTitle="postTitle"></fav>
-                <Rss v-if="showRss" :type="postType" :id="postId"></Rss>
+                <Rss v-if="showRss" :type="postType" :id="postId" :title="postTitle"></Rss>
                 <boxcoin-user
                     v-if="userBoxcoinEnable && boxcoin_enable && allowGift"
                     :postId="postId"