@jx3box/jx3box-ui 0.0.1

package/src/author/UserPop.vue

@@ -0,0 +1,198 @@
+<template>
+    <el-dialog
+        class="w-userpop"
+        :title="title"
+        v-model="visible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+    >
+        <div class="u-tip">
+            <slot></slot>
+        </div>
+        <div class="u-input">
+            <el-input
+                v-model.trim.lazy="search"
+                placeholder="请输入用户 UID 或者昵称进行搜索"
+                @keydown.enter="onSearch"
+            >
+                <template #prepend>
+                    <el-icon><Search /></el-icon>
+                </template>
+            </el-input>
+            <el-button class="u-search-btn" type="primary" @click="onSearch" :disabled="!search">搜索</el-button>
+        </div>
+        <div class="u-preview" v-loading="loading">
+            <template v-if="searched && status">
+                <a class="u-author" :href="'/author/' + userdata.ID" target="_blank">
+                    <img class="u-avatar" :src="showAvatar(userdata.user_avatar)" />
+                    <span class="u-name">{{ userdata.display_name || "-" }}</span>
+                </a>
+            </template>
+            <template v-else>
+                <img class="u-avatar" :src="showAvatar('')" />
+                <span class="u-name">-</span>
+                <div class="u-empty">
+                    <el-icon><Warning /></el-icon>{{ searched ? "未找到匹配项" : "请输入搜索条件" }}
+                </div>
+            </template>
+        </div>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button @click="cancel">取 消</el-button>
+                <el-button type="primary" @click="confirm">确 定</el-button>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+
+<script>
+import * as utilModule from "@jx3box/jx3box-common/js/utils";
+const { showAvatar } = utilModule;
+import { getUserInfoByUidOrName } from "../../service/author";
+export default {
+    name: "UserPop",
+    props: ["title", "show"],
+    data: function () {
+        return {
+            visible: false,
+            search: "",
+            searched: false,
+            userdata: {
+                ID: "",
+                name: "",
+                avatar: "",
+            },
+            status: true,
+            loading: false,
+        };
+    },
+    model: {
+        prop: "show",
+        event: "switchUserPop",
+    },
+    watch: {
+        show: function (val) {
+            this.visible = val;
+        },
+        visible: function (val) {
+            this.$emit("switchUserPop", val);
+        },
+    },
+    methods: {
+        confirm: function () {
+            if (this.status) {
+                this.visible = false;
+                this.$emit("confirm", this.userdata);
+            } else {
+                this.$alert("用户不存在 或 UID不正确", "提醒", {
+                    confirmButtonText: "确定",
+                });
+            }
+        },
+        showAvatar: function (val) {
+            return showAvatar(val, "l");
+        },
+        onSearch() {
+            if (!this.search) {
+                this.userdata = {
+                    name: "",
+                    avatar: "",
+                };
+                this.status = true;
+                return;
+            }
+            this.loading = true;
+            this.searched = false;
+            getUserInfoByUidOrName({ search: this.search })
+                .then((data) => {
+                    if (data) {
+                        this.status = true;
+                        this.userdata = data;
+                    } else {
+                        this.status = false;
+                        this.userdata = {
+                            name: "",
+                            avatar: "",
+                        };
+                    }
+                })
+                .finally(() => {
+                    this.loading = false;
+                    this.searched = true;
+                });
+        },
+        cancel() {
+            this.visible = false;
+            this.search = "";
+            this.userdata = {
+                name: "",
+                avatar: "",
+            };
+            this.status = true;
+        },
+    },
+    mounted: function () {},
+    components: {},
+};
+</script>
+
+<style lang="less">
+.w-userpop {
+    .fz(1rem, 2.5);
+    .el-dialog {
+        min-width: 520px;
+    }
+    .el-dialog__body {
+        padding: 0 20px;
+    }
+    .u-avatar {
+        .mt(20px);
+        .size(120px);
+        .db;
+        .auto(x);
+        border: 1px solid #eee;
+        padding: 5px;
+    }
+    .u-name {
+        .bold;
+        .x;
+        .db;
+    }
+    .u-author {
+        .db;
+        max-width: 280px;
+        .auto(x);
+        &:hover {
+            .u-avatar {
+                border-color: #ff71b8;
+            }
+            .u-name {
+                color: #ff71b8;
+            }
+        }
+    }
+    .u-tip {
+        .fz(13px);
+    }
+    .u-input {
+        .flex;
+        align-items: center;
+        gap: 10px;
+    }
+    .u-empty {
+        color: #999;
+        .x;
+    }
+    .dialog-footer {
+        text-align: center;
+    }
+}
+
+@media screen and (max-width: @phone) {
+    .w-userpop .el-dialog {
+        .w(100%) !important;
+        min-width: 0;
+        margin-top: 0 !important;
+    }
+}
+</style>

package/src/bread/Admin.vue

@@ -0,0 +1,400 @@
+<template>
+    <el-drawer
+        class="c-admin"
+        title="管理面板"
+        v-model="dialog_visible"
+        :before-close="close"
+        append-to-body
+        :with-header="true"
+        v-if="hasRight"
+        :close-on-click-modal="true"
+    >
+        <div class="c-admin-wrapper" ref="adminDrawer">
+            <!-- <template v-if="isAdmin"> -->
+            <el-divider content-position="left">状态变更</el-divider>
+            <el-radio-group v-model="post_status" class="c-admin-status">
+                <el-radio-button v-for="(option, key) in status_options" :label="key" :key="key">{{
+                    option
+                }}</el-radio-button>
+            </el-radio-group>
+            <el-button type="primary" class="u-refresh-btn" @click="onRefreshCache">刷新缓存</el-button>
+            <!-- </template> -->
+
+            <el-divider content-position="left">可见性变更</el-divider>
+            <el-radio-group v-model="visible" class="c-admin-status">
+                <el-radio-button v-for="(option, key) in visible_options" :label="key" :key="key">{{
+                    option
+                }}</el-radio-button>
+            </el-radio-group>
+
+            <el-divider content-position="left">推荐角标</el-divider>
+            <el-checkbox-group v-model="mark" class="c-admin-mark">
+                <el-checkbox v-for="(option, key) in mark_options" :label="key" :key="key">{{ option }}</el-checkbox>
+            </el-checkbox-group>
+
+            <el-divider content-position="left">高亮置顶</el-divider>
+            <el-checkbox class="c-admin-highlight-checkbox" v-model="isSticky">置顶</el-checkbox>
+            <el-checkbox class="c-admin-highlight-checkbox" v-model="isHighlight">开启高亮</el-checkbox>
+            <template v-if="isHighlight">
+                <el-color-picker
+                    class="c-admin-highlight-block"
+                    v-model="color"
+                    :predefine="color_options"
+                ></el-color-picker>
+                <span class="c-admin-highlight-preview" :style="{ color: color }">预览高亮效果</span>
+            </template>
+
+            <el-divider content-position="left">封面海报</el-divider>
+            <div class="c-admin-banner">
+                <el-upload
+                    class="c-admin-upload el-upload--picture-card"
+                    :action="uploadurl"
+                    :with-credentials="true"
+                    :show-file-list="false"
+                    :on-success="uploadSuccess"
+                    :on-error="uploadFail"
+                >
+                    <img v-if="post_banner" :src="post_banner" />
+                    <el-icon><Plus /></el-icon>
+                </el-upload>
+                <el-input class="u-banner" v-model="post_banner">
+                    <template #prepend>
+                        <span>海报地址</span>
+                    </template>
+                    <template #append>
+                        <span>
+                            <span class="u-btn" @click="removeBanner">
+                                <el-icon><CircleClose /></el-icon> 移除海报
+                            </span>
+                        </span>
+                    </template>
+                </el-input>
+            </div>
+
+            <el-divider content-position="left">元信息</el-divider>
+            <div class="c-admin-info">
+                <div class="w-select c-admin-type">
+                    <div class="u-select-label">板块</div>
+                    <el-select
+                        v-model="post_type"
+                        placeholder="请选择板块"
+                        style="width: 100%"
+                        class="u-select drawer-item-content"
+                        :disabled="appDisabled"
+                    >
+                        <el-option
+                            v-for="type in type_options"
+                            :key="type.value"
+                            :label="type.label"
+                            :value="type.value"
+                        ></el-option>
+                    </el-select>
+                </div>
+                <div class="c-admin-author">
+                    <el-input v-model="post_author" placeholder="请输入作者ID" class="input-author drawer-item-content">
+                        <template #prepend>
+                            <span class="u-keyword">作者ID</span>
+                        </template>
+                    </el-input>
+                </div>
+            </div>
+
+            <div class="c-admin-buttons">
+                <el-button type="primary" @click="submit" :loading="pushing">提交</el-button>
+                <el-button plain @click="close">取消</el-button>
+            </div>
+        </div>
+    </el-drawer>
+</template>
+
+<script>
+import Bus from "../../utils/bus";
+import * as utilModule from "@jx3box/jx3box-common/js/utils";
+const { getRewrite } = utilModule;
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import { getSetting, postSetting } from "../../service/admin";
+import User from "@jx3box/jx3box-common/js/user";
+import CMS_MARKS from "@jx3box/jx3box-common/data/mark.json";
+import { getTopicBucket } from "../../service/cms";
+import emitter from "../../utils/bus";
+
+const { cms: marks } = CMS_MARKS;
+// import { onClickOutside } from "@vueuse/core";
+export default {
+    name: "BreadAdmin",
+    emits: ["update"],
+    props: {
+        marksOptions: {
+            type: Object,
+            default: () => {},
+        },
+        // 入口是否是后台管理/list
+        fromList: {
+            type: Boolean,
+            default: false,
+        },
+        show: {
+            type: Boolean,
+            default: false,
+        },
+        postId: {
+            type: [Number, String],
+            default: 0,
+        },
+        // 是否禁止板块选择
+        appDisabled: {
+            type: Boolean,
+            default: false,
+        },
+        showExtend: {
+            type: Boolean,
+            default: false,
+        },
+        subtypeMap: {
+            type: Object,
+            default: () => {},
+        },
+        app: {
+            type: String,
+            default: "",
+        },
+    },
+    data() {
+        return {
+            // 可视
+            dialog_visible: false,
+
+            // 数据
+            pulled: false,
+            pushing: false,
+
+            // 权限
+            hasRight: false,
+            pid: 0,
+            channel: "",
+
+            // 状态
+            post_status: "publish",
+            status_options: {
+                publish: "默认",
+                draft: "草稿",
+                pending: "待审核",
+                dustbin: "删除",
+            },
+            visible: "0",
+            visible_options: JX3BOX.__visibleMap,
+
+            // 角标
+            mark: [],
+
+            // 高亮
+            isHighlight: false,
+            color: "rgb(255,0,1)",
+            color_options: [
+                "rgb(255,0,1)",
+                "rgb(2,209,248)",
+                "rgb(147,217,25)",
+                "rgb(255,154,2)",
+                "rgb(255,44,142)",
+                "rgb(142,46,255)",
+            ],
+
+            // 置顶
+            isSticky: false,
+            sticky: 0,
+            isStar: 0,
+
+            // 海报
+            uploadurl: JX3BOX.__cms + "api/cms/upload",
+            banner_preview: "",
+            post_banner: "",
+
+            // 类型
+            post_type: "",
+            type_options: [],
+            post_subtype: "",
+            topics: [],
+            tags: [],
+
+            // 作者
+            post_author: "",
+        };
+    },
+    computed: {
+        data: function () {
+            return {
+                ID: this.pid,
+                post_status: this.post_status || "publish",
+                visible: this.visible || "0",
+                post_author: this.post_author || 1,
+                post_type: this.post_type || "bbs",
+                post_banner: this.post_banner || "",
+                color: this.isHighlight ? this.color : "",
+                mark: this.mark || [],
+                sticky: this.isSticky ? Date.now() : null,
+                star: this.isStar,
+                topics: this.topics,
+                post_subtype: this.post_subtype,
+            };
+        },
+        isAdmin: function () {
+            return User.isAdmin();
+        },
+        mark_options: function () {
+            return this.marksOptions && Object.keys(this.marksOptions)
+                ? Object.assign({}, marks, this.marksOptions)
+                : marks;
+        },
+    },
+    methods: {
+        // 是否有权限
+        checkHasRight: function () {
+            this.hasRight = User.isEditor();
+        },
+        // 获取pid
+        checkPostID: function () {
+            this.pid = getRewrite("pid") || (this.$route && this.$route.params && this.$route.params.id) || 0;
+        },
+        // 获取type
+        checkChannel: function () {
+            this.channel = location.pathname.split("/")[1];
+        },
+        // 加载类型选项
+        initTypeOptions: function () {
+            let types = [];
+            for (let key in JX3BOX.__postType) {
+                types.push({
+                    value: key,
+                    label: JX3BOX.__postType[key],
+                });
+            }
+            this.type_options = types;
+        },
+        // 上传
+        uploadSuccess: function (res, file) {
+            this.banner_preview = URL.createObjectURL(file.raw);
+            this.post_banner = res.data[0];
+        },
+        uploadFail: function (err) {
+            this.$message.error("上传失败");
+            console.log(err);
+        },
+        removeBanner: function () {
+            this.post_banner = "";
+        },
+        // 关闭
+        close() {
+            this.dialog_visible = false;
+            this.$emit("update", {
+                show: false,
+            });
+        },
+        // 拉
+        pull: function () {
+            getSetting(this.pid).then((data) => {
+                let { ID, color, mark, post_status, post_author, sticky, post_banner, post_type, visible, star, post_subtype, topics } = data;
+                this.pid = ID;
+                this.post_status = post_status;
+                this.visible = visible;
+                this.post_author = post_author;
+                this.post_type = post_type;
+                this.post_banner = post_banner;
+                this.color = color;
+                if (this.color) this.isHighlight = true;
+                this.mark = mark || [];
+                this.sticky = sticky || 0;
+                if (this.sticky) this.isSticky = true;
+
+                this.isStar = star || 0;
+                this.topics = topics?.map(item => item.topic) || [];
+                this.post_subtype = post_subtype || "";
+
+                // 设置加载完成标识
+                this.pulled = true;
+            });
+        },
+        // 提交
+        submit: function () {
+            this.pushing = true;
+            this.push();
+        },
+        // 推
+        push: function () {
+            postSetting(this.data)
+                .then(() => {
+                    this.$emit("update", {
+                        show: false,
+                        data: this.data,
+                    });
+                    this.$message({
+                        message: "设置成功",
+                        type: "success",
+                    });
+                })
+                .finally(() => {
+                    this.pushing = false;
+                    this.close();
+                });
+        },
+        // 获取topic标签
+        loadTopic() {
+            getTopicBucket({ type: "bbs" }).then((res) => {
+                const data = res.data.data?.map((item) => item.name) || [];
+                this.tags = data;
+            });
+        },
+        onRefreshCache() {
+            emitter.emit("refreshCache", {
+                type: this.post_type,
+                id: this.pid,
+            });
+        }
+    },
+    watch: {
+        "$route.params.id": function () {
+            this.checkPostID();
+        },
+        show: {
+            immediate: true,
+            handler(bol) {
+                if (this.fromList) {
+                    this.dialog_visible = bol;
+                    if (bol) {
+                        this.pid = this.postId;
+                        this.pull();
+                    }
+                }
+            },
+        },
+    },
+    created: function () {
+        // 是否mount
+        this.checkHasRight();
+        // 预设信息
+        this.initTypeOptions();
+    },
+    mounted: function () {
+        // 基本信息
+        this.checkPostID();
+        this.checkChannel();
+
+        // 绑定监听
+        Bus.on("toggleAdminPanel", () => {
+            this.dialog_visible = !this.dialog_visible;
+            this.checkPostID();
+            // 文章类型的加载
+            if (this.pid && this.hasRight) {
+                this.pull();
+            }
+
+            if (this.showExtend && this.app && this.dialog_visible) {
+                this.loadTopic();
+            }
+        });
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/bread/admin.less";
+</style>

package/src/bread/AdminButton.vue

@@ -0,0 +1,31 @@
+<template>
+    <el-button
+        v-if="show"
+        class="c-admin-button"
+        type="primary"
+        :size="button_size"
+        icon="Setting"
+        @click="toggleAdminPanel"
+        >管理</el-button
+    >
+</template>
+
+<script>
+import Bus from "../../utils/bus";
+import User from "@jx3box/jx3box-common/js/user";
+export default {
+    name: "BreadAdminButton",
+    props: ["size"],
+    data: function () {
+        return {
+            show: User.isEditor(),
+            button_size: this.size || "",
+        };
+    },
+    methods: {
+        toggleAdminPanel: function () {
+            Bus.emit("toggleAdminPanel");
+        },
+    },
+};
+</script>

package/src/bread/AdminDirectMessage.vue

@@ -0,0 +1,73 @@
+<template>
+    <a
+        class="u-message el-button el-button--warning el-button--medium u-op-public"
+        @click="onButtonClick"
+        v-if="isEditor"
+    >
+        <el-icon><Message></Message></el-icon>
+        <span>私信</span>
+    </a>
+</template>
+
+<script>
+import { sendMessage } from "../../service/admin";
+import User from "@jx3box/jx3box-common/js/user";
+export default {
+    name: "AdminDirectMessage",
+    props: {
+        size: {
+            type: String,
+            default: "default",
+        },
+        sourceId: {
+            type: Number,
+            default: 0,
+        },
+        sourceType: {
+            type: String,
+            default: "",
+        },
+        userId: {
+            type: Number,
+            default: 0,
+        },
+    },
+    computed: {
+        isEditor() {
+            return User.isEditor();
+        },
+    },
+    methods: {
+        onButtonClick() {
+            this.$prompt("请输入私信内容", "管理私信", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                inputPlaceholder: "请输入私信内容",
+                inputValidator: (value) => {
+                    if (!value) {
+                        return "请输入私信内容";
+                    }
+                },
+                beforeClose: (action, instance, done) => {
+                    if (action === "confirm") {
+                        const data = {
+                            source_id: 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();
+                    }
+                }
+            })
+        }
+    }
+}
+</script>