@jx3box/jx3box-ui 0.0.1

package/src/author/AuthorPosts.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="c-author-posts" v-if="ready">
+        <div class="u-label">
+            <img svg-inline src="../../assets/img/leftsidebar/post.svg" />
+            <span>最新作品</span>
+            <a :href="authorLink(uid)" class="u-more" target="_blank"
+                ><img svg-inline src="../../assets/img/leftsidebar/more.svg"
+            /></a>
+        </div>
+
+        <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>
+                </a>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import { authorLink, getLink } from "@jx3box/jx3box-common/js/utils";
+import { getUserPosts } from "../../service/author";
+export default {
+    name: "AuthorPosts",
+    props: ["uid"],
+    data: function () {
+        return {
+            data: [],
+        };
+    },
+    computed: {
+        ready: function () {
+            return this.uid && this.data && this.data.length;
+        },
+    },
+    watch: {
+        uid: {
+            immediate: true,
+            handler: function (val) {
+                val && this.init();
+            },
+        },
+    },
+    methods: {
+        url: function (pid, type) {
+            return getLink(type, pid);
+        },
+        init: function () {
+            getUserPosts(this.uid)
+                .then((data) => {
+                    this.data = data.slice(0, 5);
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        authorLink,
+    },
+};
+</script>
+
+<style lang="less">
+.c-author-posts {
+    ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+    li {
+        .db;
+    }
+    .u-item {
+        .db;
+        padding: 3px 2px;
+        .nobreak;
+        .fz(12px,2);
+        color: #666;
+        border-bottom: 1px solid transparent;
+        &:hover {
+            color: @pink;
+            // background-color:#fff;
+            // border-bottom: 1px solid @border;
+            .u-icon{
+                transform: translateX(5px);
+            }
+        }
+    }
+    .u-icon {
+        .fz(12px);
+        .size(12px);
+        // .y;
+        color: #999;
+        // .mr(5px);
+        transition: all 0.3s;
+    }
+
+    .u-label {
+        .pr;
+        .u-more {
+            .fz(12px);
+            .pa;
+            .rb(0,10px);
+            color: #999;
+            &:hover {
+                color: @pink;
+            }
+        }
+    }
+}
+</style>

package/src/author/AuthorRss.vue

@@ -0,0 +1,160 @@
+<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>
+</template>
+
+<script>
+import { getAuthorRss, subscribeAuthor, unsubscribeAuthor } from "@jx3box/jx3box-common/js/rss";
+import User from "@jx3box/jx3box-common/js/user";
+const jx3box = require("@jx3box/jx3box-common/data/jx3box.json");
+export default {
+    name: "AuthorRss",
+    props: {
+        uid: {
+            type: Number,
+            default: 0,
+        },
+        data: {
+            type: Object,
+            default: () => {},
+        },
+    },
+    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 jx3box.__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, data: { title: this.data?.display_name } })
+                    .then(() => {
+                        this.subscribed = true;
+                        this.$message.success("关注成功");
+                    })
+                    .catch((err) => {
+                        console.log(err);
+                    });
+            }
+        },
+        // 取消订阅
+        unsubscribe() {
+            // this.$confirm("是否取消订阅", "提示", {
+            //     confirmButtonText: "确定",
+            //     cancelButtonText: "取消",
+            //     type: "warning",
+            // }).then(() => {
+                unsubscribeAuthor({ id: this.uid })
+                    .then(() => {
+                        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(14px);
+        .pr;
+        top: 1px;
+        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/author/AuthorTeams.vue

@@ -0,0 +1,106 @@
+<template>
+    <div class="c-author-teams" v-if="ready">
+        <div class="u-label">
+            <img svg-inline src="../../assets/img/leftsidebar/united.svg" />
+            <span>所在团队</span>
+        </div>
+        <div class="u-teams">
+            <el-tooltip
+                class="item"
+                effect="dark"
+                :content="item.team_name + '@' + item.team_server"
+                placement="top"
+                v-for="(item, i) in teams"
+                :key="i"
+            >
+                <a class="u-team" :href="teamLink(item.team_id)" target="_blank">
+                    <img class="u-team-logo" :src="showTeamLogo(item.team_logo)" />
+                    <span class="u-team-name">{{ item.team_name }}@{{ item.team_server }}</span>
+                </a>
+            </el-tooltip>
+        </div>
+    </div>
+</template>
+
+<script>
+import { getLink, getThumbnail } from "@jx3box/jx3box-common/js/utils";
+import { getUserPublicTeams } from "../../service/author";
+
+export default {
+    name: "AuthorTeams",
+    props: ["uid"],
+    components: {},
+    data: function () {
+        return {
+            teams: [
+                // {
+                //     team_name : '诗画印象',
+                //     team_logo : 'https://oss.jx3box.com/2019/09/logo.png',
+                //     team_server : "蝶恋花"
+                // }
+            ],
+        };
+    },
+    computed: {
+        ready: function () {
+            return this.uid && this.teams && this.teams.length;
+        },
+    },
+    watch: {
+        uid: {
+            immediate: true,
+            handler: function (val) {
+                val && this.loadTeams();
+            },
+        },
+    },
+    methods: {
+        loadTeams: function () {
+            getUserPublicTeams(this.uid).then((data) => {
+                this.teams = data && data.slice(0, 8);
+            });
+        },
+        teamLink: function (team_id) {
+            return getLink("org", team_id);
+        },
+        showTeamLogo: function (val) {
+            return getThumbnail(val, 96);
+        },
+    },
+    created: function () {},
+    mounted: function () {},
+};
+</script>
+
+<style lang="less">
+.c-author-teams {
+    .u-teams {
+        .flex;
+    }
+    .u-team {
+        .db;
+        // background-color: #f5f7fa;
+        // .mb(6px);
+        &:hover {
+            // background-color: #e6f0fb;
+            .u-team-name {
+                color: @pink;
+            }
+        }
+        // padding: 4px 0;
+        .r(3px);
+        .mr(5px);
+    }
+    .u-team-logo {
+        .size(19px);
+        // .mr(4px);
+        .r(50%);
+        .db;
+    }
+    .u-team-name {
+        .fz(12px);
+        color: #56677a;
+        .none;
+    }
+}
+</style>

package/src/author/Avatar.vue

@@ -0,0 +1,168 @@
+<template>
+    <a class="c-avatar" :href="authorLink(uid)" :class="size">
+        <img :src="showAvatar(url)" class="c-avatar-pic" />
+        <i class="c-avatar-frame" v-if="frame">
+            <img :src="frameUrl" />
+        </i>
+        <slot></slot>
+    </a>
+</template>
+
+<script>
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import { showAvatar, authorLink } from "@jx3box/jx3box-common/js/utils";
+
+const { __imgPath } = JX3BOX;
+
+export default {
+    name: "AvatarComp",
+    props: {
+        uid: {
+            type: [Number, String],
+            default: 0,
+        },
+        url: {
+            type: String,
+            default: "",
+        },
+        frame: {
+            type: String,
+            default: "",
+        },
+        size: {
+            type: [Number, String],
+            default: "m",
+        },
+    },
+    components: {},
+    data: function () {
+        return {
+            frames: [],
+            styles: {
+                xxs: 36,
+                xs: 48,
+                s: 68,
+                m: 88,
+                l: 120,
+                xl: 150,
+            },
+        };
+    },
+    computed: {
+        frameUrl: function () {
+            return __imgPath + `avatar/images/${this.frame}/${this.frame}.svg`;
+        },
+    },
+    methods: {
+        showAvatar: function (val) {
+            return showAvatar(val, this.styles[this.size] * 3);
+        },
+        authorLink,
+    },
+};
+</script>
+
+<style lang="less">
+.c-avatar {
+    .pr;
+    .dbi;
+    background-color: #ffffff;
+    .r(100%);
+    &.xl {
+        @pic: 150px;
+        @frame: 210px;
+        .c-avatar-pic {
+            .size(@pic);
+        }
+        .c-avatar-frame {
+            .size(@frame);
+            .lt(calc(@pic / 2));
+            margin-left: calc(-@frame / 2);
+            margin-top: calc(-@frame / 2);
+        }
+    }
+    &.l {
+        @pic: 120px;
+        @frame: 168px;
+        .c-avatar-pic {
+            .size(@pic);
+        }
+        .c-avatar-frame {
+            .size(@frame);
+            .lt(calc(@pic / 2));
+            margin-left: calc(-@frame / 2);
+            margin-top: calc(-@frame / 2);
+        }
+    }
+
+    &.m {
+        @pic: 88px;
+        @frame: 123px;
+        .c-avatar-pic {
+            .size(@pic);
+        }
+        .c-avatar-frame {
+            .size(@frame);
+            .lt(calc(@pic / 2));
+            margin-left: calc(-@frame / 2);
+            margin-top: calc(-@frame / 2);
+        }
+    }
+
+    &.s {
+        @pic: 68px;
+        @frame: 88px;
+        .c-avatar-pic {
+            .size(@pic);
+        }
+        .c-avatar-frame {
+            .size(@frame);
+            .lt(calc(@pic / 2));
+            margin-left: calc(-@frame / 2);
+            margin-top: calc(-@frame / 2);
+        }
+    }
+    &.xs {
+        @pic: 48px;
+        @frame: 68px;
+        .c-avatar-pic {
+            .size(@pic);
+        }
+        .c-avatar-frame {
+            .size(@frame);
+            .lt(calc(@pic / 2));
+            margin-left: calc(-@frame / 2);
+            margin-top: calc(-@frame / 2);
+        }
+    }
+    &.xxs {
+        @pic: 36px;
+        @frame: 48px;
+        .c-avatar-pic {
+            .size(@pic);
+        }
+        .c-avatar-frame {
+            .size(@frame);
+            .lt(calc(@pic / 2));
+            margin-left: calc(-@frame / 2);
+            margin-top: calc(-@frame / 2);
+        }
+    }
+}
+.c-avatar-pic {
+    .db;
+    .size(100%);
+    .r(100%);
+    object-fit: cover;
+}
+.c-avatar-frame {
+    .pa;
+    box-sizing: content-box;
+    img {
+        .db;
+        .pa;
+        .size(100%);
+        .lt(0);
+    }
+}
+</style>