@jx3box/jx3box-ui 2.0.6 → 2.0.8

package/src/stories/wiki/WikiRevisions.stories.js

@@ -0,0 +1,47 @@
+import WikiRevisions from '../../wiki/WikiRevisions.vue';
+import StorybookShell from '../layout/StorybookShell.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+
+const meta = {
+    title: 'Wiki/WikiRevisions',
+    component: WikiRevisions,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        type: { control: 'text' },
+        sourceId: { control: 'number' },
+        isGame: { control: 'boolean' },
+    },
+};
+
+export default meta;
+
+export const Default = {
+    args: {
+        type: 'achievement',
+        sourceId: 1001,
+        isGame: false,
+    },
+    render: (args) => ({
+        components: { WikiRevisions, StorybookShell, StoryPropsTable },
+        setup() {
+            return {
+                args,
+                propsInfo: [
+                    { name: 'type', type: 'String', default: '""', description: '百科条目类型。' },
+                    { name: 'sourceId', type: 'Number | String', default: '""', description: '百科条目源 ID。' },
+                    { name: 'isGame', type: 'Boolean | Number', default: 'false', description: '是否按游戏内链接前缀生成跳转地址。' },
+                ],
+            };
+        },
+        template: `
+            <StorybookShell placement="main" :show-right-sidebar="false">
+                <div style="display:grid;gap:24px;">
+                    <WikiRevisions v-bind="args" />
+                    <StoryPropsTable title="WikiRevisions" description="百科历史版本列表。" :items="propsInfo" />
+                </div>
+            </StorybookShell>
+        `,
+    }),
+};

package/src/wiki/GamePrice.vue

@@ -0,0 +1,107 @@
+<template>
+    <span class="c-game-price" :class="{ 'is-align': align }">
+        <span class="u-neg" v-if="numericPrice < 0">- </span>
+        <span v-for="part in priceParts" :key="part.unit" :class="`u-${part.unit}`">
+            <span class="u-value">{{ part.value }}</span>
+            <img :src="part.icon" :alt="part.alt" />
+        </span>
+    </span>
+</template>
+
+<script>
+import zhuanIcon from "../../assets/img/price/zhuan.png";
+import jinIcon from "../../assets/img/price/jin.png";
+import yinIcon from "../../assets/img/price/yin.png";
+import tongIcon from "../../assets/img/price/tong.png";
+
+const PRICE_UNITS = [
+    { unit: "zhuan", base: 100000000, icon: zhuanIcon, alt: "砖" },
+    { unit: "jin", base: 10000, icon: jinIcon, alt: "金" },
+    { unit: "yin", base: 100, icon: yinIcon, alt: "银" },
+    { unit: "tong", base: 1, icon: tongIcon, alt: "铜" },
+];
+
+export default {
+    name: "GamePrice",
+    props: {
+        price: {
+            type: [Number, String],
+            default: 0,
+        },
+        align: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    computed: {
+        numericPrice() {
+            const value = Number(this.price);
+            return Number.isFinite(value) ? Math.trunc(value) : 0;
+        },
+        priceParts() {
+            const value = Math.abs(this.numericPrice);
+            let remainder = value;
+
+            const parts = PRICE_UNITS.map((item) => {
+                const amount = Math.floor(remainder / item.base);
+                remainder %= item.base;
+                return {
+                    ...item,
+                    value: amount,
+                };
+            });
+
+            const visibleParts = parts.filter((item) => item.value > 0);
+
+            if (!visibleParts.length) {
+                const tong = parts.find((item) => item.unit === "tong");
+                return tong ? [{ ...tong, value: 0 }] : [];
+            }
+
+            return visibleParts;
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.c-game-price {
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+
+    .u-neg,
+    .u-zhuan,
+    .u-jin,
+    .u-yin,
+    .u-tong {
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+    }
+
+    img {
+        display: inline-block;
+        .y;
+    }
+
+    &.is-align {
+        .u-jin {
+            .u-value {
+                display: inline-block;
+                width: 4ch;
+                text-align: right;
+            }
+        }
+        .u-yin,
+        .u-tong {
+            .u-value {
+                display: inline-block;
+                width: 2ch;
+                text-align: right;
+            }
+        }
+    }
+}
+</style>

package/src/wiki/WikiComment.vue

@@ -0,0 +1,153 @@
+<template>
+    <ul class="u-comments">
+        <li class="u-comment-panel" v-for="(comment, key) in comments" :key="key">
+            <div class="u-comment">
+                <!-- 评论内容 -->
+                <div class="u-nickname-panel">
+                    <a
+                        class="u-nickname"
+                        :href="comment.user_id ? author_url(comment.user_id) : null"
+                        target="_blank"
+                        v-text="comment.user_nickname"
+                    ></a>
+                    <template v-if="comment.parent_id">
+                        <span>&nbsp;回复&nbsp;</span>
+                        <a
+                            class="u-nickname"
+                            :href="comment.parent.user_id ? author_url(comment.parent.user_id) : null"
+                            target="_blank"
+                            v-text="comment.parent.user_nickname"
+                        ></a>
+                    </template>
+                    <span class="u-mark u-top" v-if="comment.is_top">
+                        <i class="el-icon-download"></i>
+                        置顶
+                    </span>
+                    <span class="u-mark u-star" v-if="comment.is_star">
+                        <i class="el-icon-star-on"></i>
+                        精华
+                    </span>
+                </div>
+                <p class="u-content" v-html="comment.content"></p>
+                <!-- 其他 -->
+                <div class="m-reply">
+                    <!-- 展开、收起 -->
+                    <el-button
+                        type="default"
+                        v-if="comment.reply_form && comment.reply_form.show"
+                        class="u-reply"
+                        @click="comment.reply_form.show = !comment.reply_form.show"
+                    >
+                        <i class="el-icon-arrow-up"></i>
+                        <span>收起</span>
+                    </el-button>
+                    <el-button
+                        type="primary"
+                        plain
+                        v-else
+                        class="u-reply"
+                        @click="comment.reply_form.show = !comment.reply_form.show"
+                        icon="ChatDotRound"
+                    >
+                        <span>回复</span>
+                    </el-button>
+                    <template v-if="isEditor && !comment.parent_id">
+                        <el-button
+                            type="primary"
+                            class="u-reply"
+                            @click="onStar(comment)"
+                            plain
+                            :icon="comment.is_star ? 'StarFilled' : 'Star'"
+                            >{{ comment.is_star ? "取消加精" : "加精" }}</el-button
+                        >
+                        <el-button type="primary" class="u-reply" @click="onTop(comment)" plain icon="Top">{{
+                            comment.is_top ? "取消置顶" : "置顶"
+                        }}</el-button>
+                    </template>
+                    <!-- 更新时间 -->
+                    <span class="u-time" v-text="ts2str(comment.updated)"></span>
+                </div>
+                <!-- 评论回复表单 -->
+                <div class="m-reply-form" v-if="comment.reply_form && comment.reply_form.show">
+                    <textarea class="u-reply-content" v-model="comment.reply_form.content"></textarea>
+                    <div class="u-author">
+                        <span>昵称：</span>
+                        <input v-model="comment.reply_form.user_nickname" type="text" />
+                    </div>
+                    <el-button type="primary" class="u-submit" @click="create_comment(comment.reply_form, comment.id)">
+                        <i class="el-icon-check"></i>
+                        <span>提交</span>
+                    </el-button>
+                </div>
+            </div>
+            <WikiComment v-if="comment.children.length" :comments="comment.children" :source-id="sourceId" />
+        </li>
+    </ul>
+</template>
+
+<script>
+import { authorLink, ts2str } from "@jx3box/jx3box-common/js/utils";
+import User from "@jx3box/jx3box-common/js/user";
+
+export default {
+    name: "WikiComment",
+    props: {
+        comments: {
+            type: Array,
+            default: () => [],
+        },
+        sourceId: {
+            type: [Number, String],
+            default: 0,
+        },
+    },
+    computed: {
+        isEditor() {
+            return User.isEditor();
+        },
+    },
+    methods: {
+        author_url: authorLink,
+        ts2str,
+        create_comment(form, parent_id) {
+            let app = this.$parent;
+            if (!app.create_comment) app = app.$parent;
+            if (!app.create_comment) {
+                this.$message({
+                    message: "发布评论异常，请联系管理员",
+                    type: "warning",
+                });
+                return;
+            }
+            app.create_comment(form, parent_id);
+        },
+        isParent(comment) {
+            return !comment.parent_id;
+        },
+        onStar(comment) {
+            let app = this.$parent;
+            if (!app.star_comment) app = app.$parent;
+            if (!app.star_comment) {
+                this.$message({
+                    message: "操作异常，请联系管理员",
+                    type: "warning",
+                });
+                return;
+            }
+            app.star_comment(comment, comment.is_star ? 0 : 1);
+        },
+        onTop(comment) {
+            let app = this.$parent;
+            if (!app.top_comment) app = app.$parent;
+            if (!app.top_comment) {
+                this.$message({
+                    message: "操作异常，请联系管理员",
+                    type: "warning",
+                });
+                return;
+            }
+            app.top_comment(comment, comment.is_top ? 0 : 1);
+        },
+    },
+};
+</script>

package/src/wiki/WikiComments.vue

@@ -0,0 +1,206 @@
+<template>
+    <WikiPanel class="c-wiki-comments" scene="detail">
+        <template #head-title>
+            <i class="el-icon-chat-line-round"></i>
+            <span>百科评论</span>
+        </template>
+        <template #body>
+            <div class="m-comments-panel" v-loading="loading">
+                <div class="u-empty" v-if="!comments || !comments.length">
+                    <span v-if="comments === null">🎉 数据加载中...</span>
+                    <span v-if="comments === false">⚠️ 数据加载异常</span>
+                    <span v-if="comments && !comments.length">💧 暂无评论</span>
+                </div>
+                <!-- 递归评论组件 -->
+                <Comment :comments="comments" :source-id="sourceId" />
+                <el-pagination
+                    class="u-pagination-box"
+                    background
+                    hide-on-single-page
+                    :current-page="page"
+                    :total="total"
+                    :page-size="pageSize"
+                    layout="prev, pager, next, total"
+                    @current-change="handleCurrentChange"
+                ></el-pagination>
+                <!-- 回复表单 -->
+                <div id="m-reply-form" class="m-reply-form">
+                    <h4 class="u-title">
+                        <i class="el-icon-chat-dot-round"></i>
+                        <span>回复</span>
+                    </h4>
+                    <textarea class="u-reply-content" v-model="reply_form.content"></textarea>
+                    <div class="u-author">
+                        <span>昵称：</span>
+                        <input v-model="reply_form.user_nickname" type="text" />
+                    </div>
+                    <el-button type="primary" class="u-submit" @click="create_comment(reply_form)">
+                        <i class="el-icon-check"></i>
+                        <span>提交</span>
+                    </el-button>
+                </div>
+            </div>
+        </template>
+    </WikiPanel>
+</template>
+
+<script>
+import WikiPanel from "./WikiPanel";
+import Comment from "./WikiComment.vue";
+import { wikiComment } from "@jx3box/jx3box-common/js/wiki";
+import User from "@jx3box/jx3box-common/js/user";
+
+export default {
+    name: "WikiComments",
+    props: {
+        type: {
+            type: String,
+            default: "",
+        },
+        sourceId: {
+            type: [Number, String],
+            default: 0,
+        },
+    },
+    data() {
+        return {
+            comments: null,
+            reply_form: {
+                content: "",
+                user_nickname: User.getInfo().name,
+            },
+            page: 1,
+            pageSize: 10,
+            total: 0,
+            loading: false,
+        };
+    },
+    computed: {
+        client: function () {
+            return location.href.includes("classic") || location.href.includes("origin") ? "origin" : "std";
+        },
+    },
+    methods: {
+        get_comments() {
+            if (!this.type || !this.sourceId) return;
+            this.loading = true;
+            wikiComment
+                .list({ type: this.type, id: this.sourceId }, { client: this.client, page: this.page })
+                .then((res) => {
+                    res = res.data;
+                    let comments = res.data.list;
+                    for (let i = 0; i < comments.length; i++) {
+                        comments[i]["reply_form"] = {
+                            show: false,
+                            content: "",
+                            user_nickname: User.getInfo().name,
+                        };
+                    }
+                    this.page = res.data.page;
+                    this.total = res.data.total;
+                    this.comments = filter(comments, 0);
+                    // this.comments = comments;
+                    this.loading = false;
+                });
+
+            function filter(comments, parent) {
+                let outputs = [];
+                for (let index in comments) {
+                    let c = comments[index];
+                    if (!c) continue;
+                    if (c.parent_id === parent) {
+                        // 递归
+                        let children = filter(c.children, c.id);
+                        c.children = children.map((item) => {
+                            item.parent = {
+                                user_id: c.user_id,
+                                user_nickname: c.user_nickname,
+                                id: c.id,
+                            };
+                            item.reply_form = {
+                                show: false,
+                                content: "",
+                                user_nickname: User.getInfo().name,
+                            };
+                            return item;
+                        });
+                        outputs.push(c);
+                    }
+                }
+                return outputs;
+            }
+        },
+        create_comment(form, parent_id = 0) {
+            // 校验评论内容
+            if (!form.content) {
+                this.$message({
+                    message: "请先填写评论内容再尝试提交",
+                    type: "warning",
+                });
+                return;
+            }
+            const data = {
+                type: this.type,
+                source_id: this.sourceId,
+                parent_id: parent_id,
+                user_nickname: form.user_nickname || User.getInfo().name,
+                content: form.content,
+                client: this.client,
+            };
+            wikiComment
+                .post(data)
+                .then((res) => {
+                    res = res.data;
+                    form.content = "";
+                    this.$message({
+                        message: "提交成功，请等待审核",
+                        type: "success",
+                    });
+                })
+                .finally(() => {
+                    form.show = false;
+                });
+        },
+        handleCurrentChange(page) {
+            this.page = page;
+            this.get_comments();
+        },
+        star_comment(comment, is_star) {
+            wikiComment
+                .star(comment.id, {
+                    is_star,
+                })
+                .then(() => {
+                    this.page = 1; // 重置页码
+                    this.get_comments();
+                });
+        },
+        top_comment(comment, is_top) {
+            wikiComment
+                .top(comment.id, {
+                    is_top,
+                })
+                .then(() => {
+                    this.page = 1; // 重置页码
+                    this.get_comments();
+                });
+        },
+    },
+    components: {
+        WikiPanel,
+        Comment,
+    },
+    watch: {
+        sourceId: {
+            immediate: true,
+            handler() {
+                this.get_comments();
+            },
+        },
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/wiki/wiki-comments.less";
+</style>

package/src/wiki/WikiPanel.vue

@@ -0,0 +1,121 @@
+<template>
+    <div
+        class="c-wiki-panel"
+        :class="{
+            'border-none': borderNone,
+            'm-detail-scene': wikiPost || scene === 'detail',
+        }"
+    >
+        <div class="m-panel-head">
+            <slot name="head-before"></slot>
+            <div class="m-panel-actions">
+                <QRcode v-if="wikiPost && showQR" class="u-qr" />
+                <slot name="head-actions"></slot>
+            </div>
+            <div class="m-panel-title">
+                <slot name="head-title"></slot>
+            </div>
+            <slot name="head-after"></slot>
+        </div>
+        <div class="m-panel-body">
+            <slot name="body-before"></slot>
+            <div class="m-wiki-metas" v-if="wikiPost && wikiPost.post">
+                <!-- 参与贡献 -->
+                <div class="u-meta" v-if="wikiPost.users && wikiPost.users.length">
+                    <em class="u-label">参与贡献</em>
+                    <a
+                        class="u-value u-creator"
+                        v-for="(user, key) in wikiPost.users"
+                        :key="key"
+                        target="_blank"
+                        :href="user.id ? author_url(user.id) : null"
+                    >
+                        <img :src="thumbnail_url(user.avatar)" :alt="user.nickname" :title="user.nickname" />
+                    </a>
+                </div>
+                <!-- 综合难度 -->
+                <div class="u-meta" v-if="wikiPost.post && wikiPost.post.level">
+                    <em class="u-label">综合难度</em>
+                    <span class="u-value">
+                        <i class="el-icon-star-on" v-for="i in wikiPost.post.level" :key="i"></i>
+                    </span>
+                </div>
+                <!-- 热度 -->
+                <div class="u-meta" v-if="stat">
+                    <em class="u-label">热度</em>
+                    <span class="u-value" v-text="stat.views"></span>
+                </div>
+                <!-- 更新时间 -->
+                <div class="u-meta" v-if="wikiPost.post && wikiPost.post.updated">
+                    <em class="u-label">更新时间</em>
+                    <span class="u-value" v-text="ts2str(wikiPost.post.updated)"></span>
+                </div>
+            </div>
+            <slot name="body"></slot>
+            <slot name="body-after"></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+import _ from "lodash";
+import QRcode from "../interact/QRcode";
+import { authorLink, ts2str, showAvatar } from "@jx3box/jx3box-common/js/utils";
+import { getStat } from "@jx3box/jx3box-common/js/stat";
+export default {
+    name: "WikiPost",
+    props: {
+        wikiPost: {
+            type: Object,
+            default: null,
+        },
+        scene: {
+            type: String,
+            default: "default",
+        },
+        borderNone: {
+            type: Boolean,
+            default: false,
+        },
+        showQR: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data() {
+        return {
+            stat: null,
+        };
+    },
+    watch: {
+        wikiPost: {
+            immediate: true,
+            handler() {
+                if (!this.wikiPost) return;
+                // 获取热度信息
+                if (this.wikiPost.type && this.wikiPost.source_id) {
+                    let type = this.wikiPost.type;
+                    if (type === "achievement") type = "cj";
+                    getStat(type, this.wikiPost.source_id).then((data) => {
+                        if (data.status === 200) this.stat = data.data;
+                    });
+                }
+            },
+        },
+    },
+    methods: {
+        author_url: authorLink,
+        ts2str,
+        thumbnail_url: function (val) {
+            return showAvatar(val);
+        },
+    },
+    components: {
+        QRcode,
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/wiki/wiki-panel.less";
+</style>