@jx3box/jx3box-ui 0.0.1

package/src/bread/AdminDrop.vue

@@ -0,0 +1,155 @@
+<template>
+    <div class="c-admin-drop">
+        <el-dropdown trigger="click" @command="handleCommand">
+            <el-button type="primary" class="c-admin-button c-admin-drop__button" :size="buttonSize" icon="Setting">
+                管理 <el-icon style="margin-left: 5px"><ArrowDown></ArrowDown></el-icon>
+            </el-button>
+            <template #dropdown>
+                <el-dropdown-menu>
+                    <el-dropdown-item v-if="isEditor" command="toggleAdminPanel" icon="Setting">
+                        <span>设置</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="isEditor" command="directMessage" icon="Message">
+                        <span>私信</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item icon="UploadFilled" command="designTask" v-if="hasPermission('push_banner')">
+                        <span>推送</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="showRobotPic" icon="Refresh" command="pictureTask">
+                        <span>刷图</span>
+                    </el-dropdown-item>
+                </el-dropdown-menu>
+            </template>
+        </el-dropdown>
+
+        <design-task v-model="showDesignTask" :post="post"></design-task>
+    </div>
+</template>
+
+<script>
+import Bus from "../../utils/bus";
+import User from "@jx3box/jx3box-common/js/user";
+import DesignTask from "./DesignTask.vue";
+import { sendMessage } from "../../service/admin";
+import { refreshQQBotImage } from "../../service/cms";
+export default {
+    name: "AdminDrop",
+    components: {
+        DesignTask,
+    },
+    props: {
+        buttonSize: {
+            type: String,
+            default: "default",
+        },
+        post: {
+            type: Object,
+            default: () => {},
+        },
+        userId: {
+            type: Number,
+            default: 0,
+        },
+        showRobotPic: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            showDesignTask: false,
+        };
+    },
+    computed: {
+        isEditor() {
+            return User.isEditor();
+        },
+        sourceId() {
+            return this.post?.ID;
+        },
+        sourceType() {
+            return this.post?.post_type;
+        },
+    },
+    methods: {
+        handleCommand(command) {
+            this[command]();
+        },
+        toggleAdminPanel() {
+            Bus.emit("toggleAdminPanel");
+        },
+        directMessage() {
+            this.$prompt("请输入私信内容", "管理私信", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                inputPlaceholder: "请输入私信内容",
+                inputValidator: (value) => {
+                    if (!value) {
+                        return "请输入私信内容";
+                    }
+                },
+                beforeClose: (action, instance, done) => {
+                    if (action === "confirm") {
+                        const data = {
+                            source_id: String(this.sourceId),
+                            source_type: this.sourceType,
+                            user_id: this.userId,
+                            content: "运营通知：" + instance.inputValue,
+                            type: "system",
+                            subtype: "admin_message",
+                        };
+                        sendMessage(data).then(() => {
+                            this.$message.success("私信成功");
+                            done();
+                        });
+                    } else {
+                        done();
+                    }
+                },
+            }).catch(() => {});
+        },
+        designTask() {
+            this.showDesignTask = true;
+        },
+        pictureTask() {
+            const pathname = location.pathname;
+            // 适用于pvp/1234 horse/1_234 等
+            const pattern = /\/([^/]+)\/([\d_]+)/;
+            const match = pathname.match(pattern);
+            let task_type = "";
+            let task_target_id = "";
+            if (match) {
+                task_type = match[1];
+                task_target_id = match[2];
+            }
+            if (task_type && task_target_id) {
+                refreshQQBotImage({
+                    task_type,
+                    task_target_id,
+                }).then((res) => {
+                    if (!res.data.code) {
+                        this.$message.success("QQ机器人图片生成提交成功");
+                    }
+                });
+            } else {
+                this.$message.error("参数不正确");
+            }
+        },
+        hasPermission(permission) {
+            return User.hasPermission(permission);
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.c-admin-drop {
+    float: right;
+    margin-top: -2px;
+    margin-right: 10px;
+}
+.c-admin-drop__button {
+    padding: 8px 18px !important;
+    align-items: center;
+}
+</style>

package/src/bread/Crumb.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="c-crumb" v-html="html"></div>
+</template>
+
+<script>
+import { getBreadcrumb } from "../../service/breadcrumb";
+
+export default {
+    name: "BeardCrumb",
+    props: ["name"],
+    data: function () {
+        return {
+            html: "",
+        };
+    },
+    mounted() {
+        getBreadcrumb(this.name).then((res) => {
+            res = res.data;
+            this.html = res.data?.html || "";
+        });
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/bread/crumb.less";
+</style>

package/src/bread/DesignTask.vue

@@ -0,0 +1,194 @@
+<template>
+    <el-dialog class="m-design-task" :width="isPhone ? '95%' : '600px'" :model-value="modelValue" @close="close" title="快捷推送" append-to-body>
+        <el-form :model="form" ref="form" :label-position="isPhone ? 'top' : 'left'" label-width="80px">
+            <el-form-item label="标题">
+                <el-input v-model="form.title" placeholder="请输入标题"></el-input>
+            </el-form-item>
+            <el-form-item label="类型">
+                <el-select v-model="form.type" placeholder="请选择类型" style="width:100%;" filterable>
+                    <el-option v-for="item in config" :key="item.id" :label="item.label" :value="item.name"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="版本">
+                <el-radio-group v-model="form.version">
+                    <el-radio-button v-for="(label, key) in versions" :key="key" :label="key">{{ label }}</el-radio-button>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item label="备注">
+                <el-input v-model="form.remark" placeholder="请输入备注"></el-input>
+            </el-form-item>
+            <el-form-item label="星级" class="m-star-line">
+                <el-rate v-model="form.star" :colors="colors"></el-rate>
+            </el-form-item>
+        </el-form>
+
+        <el-divider content-position="left">
+            近期推送
+        </el-divider>
+        <template v-if="logs && logs.length">
+            <el-table :data="logs" border size="small" max-height="300px">
+                <el-table-column label="推送时间" prop="push_at" align="center">
+                    <template #default="{row}">
+                        {{ formatTime(row.push_at) }}
+                    </template>
+                </el-table-column>
+                <el-table-column label="推送人" prop="pusher.display_name" align="center"></el-table-column>
+                <el-table-column label="星级" prop="star" align="center">
+                    <template #default="{row}">
+                        <el-rate v-model="row.star" disabled :colors="colors"></el-rate>
+                    </template>
+                </el-table-column>
+                <el-table-column label="备注" prop="remark" align="center"></el-table-column>
+            </el-table>
+        </template>
+        <el-alert v-else title="当前文章暂无历史推送" type="info" show-icon :closable="false"></el-alert>
+        <template #footer>
+            <el-button @click="close">取 消</el-button>
+            <el-button type="primary" @click="onConfirm">确 定</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script>
+import { createDesignTask, getDesignTask, getConfigBannerTypes } from "../../service/design";
+import {pick} from "lodash";
+import dayjs from "dayjs";
+import User from "@jx3box/jx3box-common/js/user";
+export default {
+    name: "DesignTask",
+    props: {
+        modelValue: {
+            type: Boolean,
+            default: false
+        },
+        post: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    model: {
+        prop: "modelValue",
+        event: "update:modelValue"
+    },
+    emits: ["update:modelValue"],
+    data() {
+        return {
+            form: {
+                title: "",
+                remark: "",
+                star: 0,
+                subtype: "",
+                version: "std"
+            },
+            colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
+
+            logs: [],
+            config: [],
+
+            isPhone: window.innerWidth < 768,
+            isEditor: User.isEditor(),
+
+            versions: {
+                "std": "剑三",
+                "origin": "缘起",
+                "wujie": "无界",
+                "test": "体服"
+            }
+        }
+    },
+    watch: {
+        modelValue(val) {
+            if (val) {
+                if (this.post) {
+                    this.form.title = this.post.post_title;
+                }
+                this.loadLogs();
+
+                if (User.isTeammate()) {
+                    this.loadConfig();
+                }
+            }
+        }
+    },
+    methods: {
+        close(){
+            this.$emit("update:modelValue",false)
+        },
+        clearForm() {
+            this.form = {
+                title: "",
+                remark: "",
+                star: 0,
+                subtype: "",
+                version: "std",
+            }
+
+            this.$refs?.form?.clearValidate();
+        },
+        onConfirm() {
+            if (!this.post?.ID) return;
+            const data = pick(this.post, ["client", "author"]);
+            data.title = this.form.title;
+            data.remark = this.form.remark;
+            data.star = this.form.star;
+            data.subtype = this.form.type;
+            data.version = this.form.version;
+
+            data.source_type = this.post?.post_type;
+            data.source_id = String(this.post?.ID);
+            data.link = `/${this.post?.post_type}/${this.post?.ID}`;
+            data.flow = 0;
+
+            createDesignTask(data).then(() => {
+                this.$message.success("提交成功");
+                this.close();
+            })
+        },
+        onCancel() {
+            this.close();
+            this.clearForm();
+        },
+        loadLogs() {
+            if (!this.post?.ID) return;
+            getDesignTask({ source_id: this.post?.ID }).then(res => {
+                this.logs = res.data.data || [];
+            })
+        },
+        loadConfig() {
+            getConfigBannerTypes({ _no_page: 1 }).then(res => {
+                this.config = res.data.data || [];
+                this.config = this.config.filter(item => item.parent_id == 1);
+            })
+        },
+        formatTime(time) {
+            return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.m-design-task {
+.el-form-item {
+    margin-bottom: 12px;
+}
+    .m-star-line {
+        .el-form-item__content {
+            top: 10px;
+        }
+    }
+    .u-time {
+        color: #c0c4cc;
+    }
+}
+
+@media screen and (max-width: @phone) {
+    .m-design-task {
+        .m-star-line {
+            .el-form-item__content {
+                top: 0;
+            }
+        }
+    }
+}
+</style>

package/src/comment/Avatar.vue

@@ -0,0 +1,124 @@
+<template>
+    <div class="c-comment-avatar">
+        <a class="u-avatar" :href="userHref" target="_blank">
+            <el-avatar
+                class="u-avatar-pic"
+                :class="avatarSize==36?'xxs': ''"
+                shape="circle"
+                :size="avatarSize"
+                :src="userAvatar"
+            ></el-avatar>
+            <i class="u-avatar-frame" :class="avatarSize==36?'xxs':'xs'" v-if="avatarFrame">
+                <img :src="frameUrl" />
+            </i>
+        </a>
+        <el-link
+            class="u-name"
+            type="primary"
+            target="_blank"
+            :href="userHref"
+            >{{ username }}</el-link
+        >
+    </div>
+</template>
+
+<script>
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+
+const { __imgPath } = JX3BOX;
+export default {
+    name: "CommentAvatar",
+    props: [
+        "avatarSize",
+        "userAvatar",
+        "userHref",
+        "username",
+        "avatarFrame",
+        "withFrame",
+    ],
+    data: function() {
+        return {};
+    },
+    computed: {
+        frameUrl: function() {
+            return __imgPath + `avatar/images/${this.avatarFrame}/${this.avatarFrame}.svg`;
+        },
+    },
+    methods: {},
+    mounted: function() {},
+};
+</script>
+
+<style lang="less">
+.c-comment-avatar {
+    vertical-align: top;
+    margin-right: 20px;
+    width: 48px;
+    a:hover {
+        &:after {
+            display: none;
+        }
+    }
+    .u-avatar {
+        display: block;
+        position: relative;
+        margin-left: 6px;
+    }
+    .u-avatar-pic {
+        display: block;
+        background-color: #fff;
+        width: 48px;
+        height: 48px;
+
+        &.isCircle {
+            border-radius: 100%;
+        }
+
+        &.xxs {
+            width: 36px;
+            height: 36px;
+            line-height: 36px;
+        }
+    }
+    .u-avatar-frame {
+        position: absolute;
+        &.xs{
+            width: 68px;
+            height: 68px;
+            left:24px;
+            top:24px;
+            margin-left:-34px;
+            margin-top:-34px;
+        }
+        &.xxs{
+            @pic:36px;
+            @frame:48px;
+            width: 48px;
+            height: 48px;
+            left:18px;
+            top:18px;
+            margin-left:-24px;
+            margin-top:-24px;
+        }
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+    .u-name {
+        display: none;
+        text-align: center;
+        overflow: hidden;
+        width: 100%;
+        padding: 5px 0;
+        font-size: 12px;
+        word-break: break-all;
+        line-height: 1.4;
+    }
+}
+// @media screen and (max-width: 767px) {
+//     .c-comment-avatar {
+//         margin-right: 10px;
+//     }
+// }
+</style>