@jx3box/jx3box-ui 0.0.1

package/src/editor/UploadBanner.vue

@@ -0,0 +1,156 @@
+<template>
+    <div class="c-upload-banner">
+        <el-alert class="u-tip" :title="info" v-if="info" type="info" show-icon></el-alert>
+        <div v-if="data" class="u-upload" :style="uploadStyle">
+            <img :src="preview" />
+            <i class="u-upload-mask"></i>
+            <el-icon class="u-upload-delete el-icon-delete" title="移除" @click="remove"><Delete /></el-icon>
+        </div>
+        <div v-else class="u-upload el-upload el-upload--picture-card" @click="select">
+            <el-icon><Plus /></el-icon>
+        </div>
+        <input
+            class="u-upload-input"
+            type="file"
+            @change="upload"
+            ref="uploadInput"
+            accept=".jpg, .jpeg, .png, .gif, .bmp,.webp"
+        />
+    </div>
+</template>
+
+<script>
+import * as utilModule from "@jx3box/jx3box-common/js/utils";
+const { getThumbnail } = utilModule;
+import { upload } from "../../service/cms.js";
+export default {
+    name: "upload-banner",
+    props: {
+        content: {
+            type: String,
+            default: "",
+        },
+        info: {
+            type: String,
+            // 用于展示tips
+            default: "",
+        },
+        size: {
+            type: [Array, Number],
+            default: 148,
+        },
+        maxSize: {
+            type: Number,
+            default: 10,
+        },
+    },
+    data() {
+        return {
+            data: this.content || "",
+        };
+    },
+    model: {
+        prop: "content",
+        event: "input",
+    },
+    watch: {
+        content(val) {
+            this.data = val;
+        },
+        data(val) {
+            this.$emit("input", val);
+        },
+    },
+    computed: {
+        fileInput: function () {
+            return this.$refs.uploadInput;
+        },
+        preview() {
+            let size = Array.isArray(this.size) ? this.size : [this.size, this.size];
+            return getThumbnail(this.data, size, true);
+        },
+        uploadStyle() {
+            let size = Array.isArray(this.size) ? this.size : [this.size, this.size];
+            return {
+                width: size[0] + "px",
+                height: size[1] + "px",
+            };
+        },
+    },
+    methods: {
+        select() {
+            this.fileInput.dispatchEvent(
+                new MouseEvent("click", {
+                    bubbles: true,
+                    cancelable: true,
+                    view: window,
+                })
+            );
+        },
+        upload() {
+            const file = this.fileInput.files[0];
+            if (!file) return;
+            if (file.size > this.maxSize * 1024 * 1024) {
+                this.$message.error("图片大小不能超过" + this.maxSize + "M");
+                return;
+            }
+            const formData = new FormData();
+            formData.append("file", file);
+            upload(formData).then((res) => {
+                this.data = res.data.data[0];
+                this.$message({
+                    message: "上传成功",
+                    type: "success",
+                });
+            });
+        },
+        remove() {
+            this.data = "";
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.c-upload-banner {
+    .u-tip {
+        padding: 5px 15px;
+    }
+    .u-upload {
+        .pr;
+        .size(148px);
+        .mt(10px);
+        img {
+            .size(100%);
+            .y(bottom);
+        }
+        .u-upload-mask {
+            .none;
+            .pa;
+            .lt(0);
+            .size(100%);
+            background-color: rgba(0, 0, 0, 0.6);
+        }
+        .u-upload-delete {
+            .pa;
+            .lt(50%);
+            .size(24px);
+            .fz(24px);
+            padding: 40px;
+            transform: translate(-50%, -50%);
+            color: #fff;
+            .pointer;
+            .none;
+        }
+        &:hover {
+            .u-upload-mask,
+            .u-upload-delete {
+                .db;
+            }
+        }
+    }
+    .u-upload-input {
+        .none;
+    }
+}
+</style>

package/src/editor/components/Author.vue

@@ -0,0 +1,322 @@
+<template>
+    <div class="w-author" v-loading="loading">
+        <div class="w-author-wrapper el-popover" v-if="data" :style="{ backgroundImage: `url(${bg})` }">
+            <div class="u-author">
+                <Avatar
+                    class="u-avatar"
+                    :uid="uid"
+                    :url="data.user_avatar"
+                    :size="68"
+                    :frame="data.user_avatar_frame"
+                />
+                <div class="u-info">
+                    <a class="u-name" :href="authorLink(uid)" target="_blank">
+                        <el-tooltip class="item" effect="dark" content="签约作者" placement="top" v-if="isSuperAuthor">
+                            <a class="u-superauthor" href="/dashboard/cooperation" target="_blank">
+                                <img :src="super_author_icon" alt="superauthor" />
+                            </a>
+                        </el-tooltip>
+                        <span class="u-displayname" :title="data.display_name">{{ data.display_name || "未知" }}</span>
+                    </a>
+                    <div class="u-extend">
+                        <el-tooltip class="item" effect="dark" placement="top">
+                            <template #content>
+                                <span class="u-tips">经验值：{{ data.experience }}</span>
+                            </template>
+                            <span
+                                class="u-level"
+                                :class="'lv-' + level"
+                                :style="{
+                                    backgroundColor: showLevelColor(level),
+                                }"
+                                >Lv.{{ level }}</span
+                            >
+                        </el-tooltip>
+                        <el-tooltip class="item" effect="dark" :content="vipTypeTitle" placement="top" v-if="isVip">
+                            <a class="u-vip" href="/vip/premium?from=sidebar_author" target="_blank">
+                                <i class="i-icon-vip on">{{ vipType }}</i>
+                            </a>
+                        </el-tooltip>
+                    </div>
+                </div>
+            </div>
+            <!-- <div class="u-honor" :style="honorStyle" v-if="honor">{{ honor }}</div> -->
+            <div class="u-trophy" v-if="hasTrophy">
+                <div class="u-medals" v-if="medals && medals.length">
+                    <medal :medals="medals" :showIcon="showMedalIcon"></medal>
+                </div>
+            </div>
+            <div class="u-teams" v-if="teams && teams.length">
+                <a class="u-team" v-for="(item, i) in teams" :key="i" :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>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { authorLink, getLink, getThumbnail } from "@jx3box/jx3box-common/js/utils";
+import { getUserInfo, getUserMedals, getUserPublicTeams } from "../../../service/author";
+import { getDecoration, getDecorationJson } from "../../../service/cms";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import User from "@jx3box/jx3box-common/js/user";
+import Avatar from "./Avatar.vue";
+import medal from "./Medal.vue";
+const { __imgPath, __userLevelColor } = JX3BOX;
+
+const ATCARD_KEY = "decoration_atcard";
+const DECORATION_JSON = "decoration_json";
+const DECORATION_KEY = "decoration_me";
+const HONOR_KEY = "honor_me";
+export default {
+    name: "AuthorComponent",
+    components: {
+        medal,
+        Avatar,
+    },
+    props: ["uid"],
+    data: () => ({
+        data: null,
+        medals: [],
+        teams: [],
+        loading: false,
+        bg: "",
+        honor: "",
+        honorStyle: {},
+    }),
+    computed: {
+        super_author_icon: function () {
+            return __imgPath + "image/user/" + "superauthor.svg";
+        },
+        isVip: function () {
+            return this.data?.is_pro || this.data?.is_pre;
+        },
+        vipTypeTitle: function () {
+            return this.data?.is_pro ? "专业版会员" : "高级版会员";
+        },
+        vipType: function () {
+            return this.data?.is_pro ? "PRO" : "PRE";
+        },
+        level: function () {
+            return User.getLevel(this.data && this.data.experience);
+        },
+        hasTrophy: function () {
+            return this.medals.length;
+        },
+        isSuperAuthor: function () {
+            return !!this.data?.sign;
+        },
+    },
+    watch: {
+        uid: {
+            immediate: true,
+            handler(val) {
+                if (val) {
+                    this.loadData();
+                    this.getAtcard();
+                    // this.getHonor();
+                }
+            },
+        },
+    },
+    methods: {
+        loadData: function () {
+            const promises = [getUserInfo(this.uid), getUserMedals(this.uid), getUserPublicTeams(this.uid)];
+            this.loading = true;
+            Promise.all(promises).then((res) => {
+                this.data = res[0];
+                this.medals = res[1];
+                this.teams = res[2];
+                this.loading = false;
+            });
+        },
+        loadUserInfo: function () {
+            return getUserInfo(this.uid).then((data) => {
+                this.data = data;
+            });
+        },
+        loadMedals: function () {
+            return getUserMedals(this.uid).then((data) => {
+                this.medals = data;
+            });
+        },
+        loadTeams: function () {
+            return getUserPublicTeams(this.uid).then((data) => {
+                this.teams = data && data.slice(0, 5);
+            });
+        },
+        getAtcard() {
+            let decoration_atcard = sessionStorage.getItem(ATCARD_KEY + this.uid);
+            if (decoration_atcard == "no") {
+                this.bg = "";
+                return;
+            }
+            //已有缓存，读取解析
+            if (decoration_atcard) {
+                this.setDecoration(decoration_atcard);
+                return;
+            }
+            getDecoration({ using: 1, user_id: this.uid, type: "atcard" }).then((data) => {
+                let res = data.data.data;
+                if (res.length == 0) {
+                    //空 则为无主题，不再加载接口，界面设No
+                    sessionStorage.setItem(ATCARD_KEY + this.uid, "no");
+                    this.bg = "";
+                    return;
+                }
+                sessionStorage.setItem(ATCARD_KEY + this.uid, res[0].val);
+                this.setDecoration(res[0].val);
+            });
+        },
+        setDecoration(val) {
+            this.bg = this.showDecoration(val, "atcard");
+        },
+        getHonor() {
+            this.honor = "";
+            let user_id = this.uid;
+            if (!user_id) {
+                return;
+            }
+            let honor_local = sessionStorage.getItem(HONOR_KEY + user_id);
+            if (honor_local == "no") return;
+            //已有缓存，读取解析
+            if (honor_local) {
+                this.honor = honor_local;
+                this.getHonorStyle();
+                return;
+            }
+            getDecoration({ using: 1, user_id: user_id, type: "honor" }).then((data) => {
+                let res = data.data.data;
+                if (res.length == 0) {
+                    //空 则为无主题，不再加载接口，界面设No
+                    sessionStorage.setItem(HONOR_KEY + user_id, "no");
+                    return;
+                }
+                let honor = res[0];
+                sessionStorage.setItem(HONOR_KEY + user_id, honor.val);
+                this.honor = honor.val;
+                this.getHonorStyle();
+            });
+        },
+        //有称号后，获取样式配置
+        getHonorStyle() {
+            let user_id = this.uid;
+            let decoration_local = sessionStorage.getItem(DECORATION_KEY + user_id);
+            if (decoration_local) {
+                //解析本地缓存
+                let decoration_parse = JSON.parse(decoration_local);
+                if (!decoration_parse.status) return;
+
+                if (decoration_parse) {
+                    this.setHonorStyle(decoration_parse);
+                    return;
+                }
+            }
+            getDecoration({ using: 1, user_id: user_id, type: "homebg" }).then((data) => {
+                let res = data.data.data;
+                if (res.length == 0) {
+                    //空 则为无主题，不再加载接口，界面设No
+                    sessionStorage.setItem(DECORATION_KEY + user_id, JSON.stringify({ status: false }));
+                    return;
+                }
+                let decoration = res[0];
+                let decorationJson = sessionStorage.getItem(DECORATION_JSON);
+                if (!decorationJson) {
+                    //加载远程json，用于Honor颜色配置
+                    getDecorationJson().then((json) => {
+                        let decoration_json = json.data;
+                        let theme = JSON.parse(JSON.stringify(decoration_json[decoration.val]));
+                        theme.status = true;
+                        sessionStorage.setItem(DECORATION_KEY + this.uid, JSON.stringify(theme));
+                        //缓存远程JSON文件
+                        sessionStorage.setItem(DECORATION_JSON, JSON.stringify(decoration_json));
+                        this.setHonorStyle(theme);
+                    });
+                } else {
+                    let theme = JSON.parse(decorationJson)[decoration.val];
+                    theme.status = true;
+                    sessionStorage.setItem(DECORATION_KEY + this.uid, JSON.stringify(theme));
+                    this.setHonorStyle(theme);
+                }
+            });
+        },
+        setHonorStyle(style) {
+            this.honorStyle = {
+                "background-color": style.buttoncolor,
+                color: style.buttontextcolor,
+            };
+        },
+
+        showMedalIcon: function (val) {
+            return __imgPath + "image/medals/user/" + val + ".gif";
+        },
+        showMedalDesc: function (item) {
+            return item.medal_desc
+        },
+        teamLink: function (team_id) {
+            return getLink("org", team_id);
+        },
+        showTeamLogo: function (val) {
+            return getThumbnail(val, 96);
+        },
+        showLevelColor: function (level) {
+            return __userLevelColor[level];
+        },
+        showDecoration: function (val, type) {
+            return __imgPath + `decoration/images/${val}/${type}.png`;
+        },
+        authorLink,
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../../assets/css/module/author.less";
+.w-author {
+    .w-author-wrapper {
+        background-repeat: no-repeat;
+        background-position: top right;
+        background-size: 100% auto;
+        .u-author {
+            padding: 5px 0 15px 5px;
+        }
+        .u-avatar {
+            .fl;
+            .mr(15px);
+        }
+        img {
+            border: none;
+            margin: 0;
+            padding: 0;
+        }
+        a {
+            .lh(28px);
+            text-decoration: none;
+            &:hover {
+                text-decoration: none;
+                box-shadow: none;
+            }
+        }
+        .u-displayname {
+            .fz(15px);
+            .nobreak;
+            max-width: 200px;
+            color: @color;
+            .bold;
+        }
+    }
+    .u-honor {
+        .mt(2px);
+        .dbi;
+        .h(18px);
+        background-color: #494038;
+        color: #ffffff;
+        .fz(12px,14px);
+        padding: 2px 50px 2px 10px;
+        .mb(15px);
+        .r(2px);
+    }
+}
+</style>

package/src/editor/components/Avatar.vue

@@ -0,0 +1,95 @@
+<template>
+    <a class="c-avatar" :href="authorLink(uid)" target="_blank">
+        <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";
+const { __imgPath } = JX3BOX;
+import { showAvatar, authorLink } from "@jx3box/jx3box-common/js/utils";
+export default {
+    name: "AvatarComponent",
+    props: ["uid", "url", "size", "frame"],
+    components: {},
+    data: function() {
+        return {
+            frames: [],
+            styles : [
+                {cls:'xs',size:60},
+                {cls:'s',size:84},
+                {cls:'m',size:136},
+                {cls:'l',size:224},
+            ]
+        };
+    },
+    computed: {
+        frameUrl: function() {
+            return __imgPath + `avatar/images/${this.frame}/${this.frame}.svg`;
+        },
+    },
+    methods: {
+        showAvatar: function(val) {
+            return showAvatar(val, this.size*3);
+        },
+        authorLink,
+    },
+    mounted : function (){
+    }
+};
+</script>
+
+<style scoped lang="less">
+.c-avatar {
+    .pr;
+    .dbi;
+}
+.c-avatar-pic {
+    .db;
+    .size(100%);
+    .r(100%);
+}
+.c-avatar-frame {
+    .pa;
+    .lt(-10px);
+    .size(100%);
+    padding: 10px;
+    box-sizing: content-box;
+    img {
+        .db;
+        .pa;
+        .size(100%);
+        .lt(0);
+    }
+
+    &.xs {
+        left: -6px;
+        top: -6px;
+        width: 60px;
+        height: 60px;
+    }
+
+    &.s {
+        left: -8px;
+        top: -8px;
+        width: 84px;
+        height: 84px;
+    }
+    &.m {
+        left: -8px;
+        top: -8px;
+        width: 136px;
+        height: 136px;
+    }
+    &.l {
+        width: 224px;
+        height: 224px;
+        left: -22px;
+        top: -22px;
+    }
+}
+</style>

package/src/editor/components/Buff.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="w-buff" v-if="data">
+        <div class="w-buff-wrapper">
+            <img class="w-buff-icon" :src="iconLink(data.IconID)" :alt="data.Name" />
+            <div class="w-buff-content">
+                <span class="w-buff-name">{{data.Name}}</span>
+                <span class="w-buff-desc">{{data.Desc}}</span>
+                <span class="w-buff-type" v-if="data.DetachType">※ {{showDetachType(data.DetachType)}}</span>
+                <span class="w-buff-meta">ID : {{data.BuffID}}</span>
+                <span class="w-buff-meta">Level : {{data.Level}}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { getBuff } from "../../../service/database.js";
+import * as utilModule from "@jx3box/jx3box-common/js/utils";
+const { iconLink } = utilModule;
+import detach_types from "../../../assets/data/detach_type.json";
+export default {
+    name: "BuffComponent",
+    props: ["client", "id", "level"],
+    data: () => ({
+        data: null,
+    }),
+    computed: {
+        params: function () {
+            return [this.client, this.id, this.level];
+        },
+    },
+    watch: {
+        params: {
+            immediate: true,
+            deep: true,
+            handler(val) {
+                if (val) {
+                    let [client, id, level] = val;
+                    // 读取本地数据
+                    const cache = sessionStorage.getItem(
+                        `buff-${client}-${id}-${level}`
+                    );
+                    if (cache) {
+                        this.data = JSON.parse(cache);
+                        // 没有缓存则发起请求获取数据
+                    } else {
+                        id &&
+                            getBuff(...this.params).then((res) => {
+                                let data = res.data?.list?.[0];
+                                this.data = data;
+
+                                // 将数据放入 sessionStorage
+                                sessionStorage.setItem(
+                                    `buff-${client}-${id}-${level}`,
+                                    JSON.stringify(data)
+                                );
+                            });
+                    }
+                }
+            },
+        },
+    },
+    methods: {
+        iconLink: function (id) {
+            return iconLink(id, this.client);
+        },
+        showDetachType: function (val) {
+            if (val && detach_types[val]) {
+                return detach_types[val];
+            } else {
+                return "";
+            }
+        },
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../../assets/css/module/buff.less";
+</style>