@jx3box/jx3box-ui 2.0.5 → 2.0.7

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>

package/src/wiki/WikiRevisions.vue

@@ -0,0 +1,125 @@
+<template>
+    <WikiPanel class="c-wiki-revisions" scene="detail">
+        <template #head-title>
+            <i class="el-icon-time"></i>
+            <span>历史版本</span>
+        </template>
+        <template #body>
+            <div class="m-revisions-panel">
+                <div class="u-empty" v-if="!versions || !versions.length">
+                    <span v-if="versions === null">🎉 数据加载中...</span>
+                    <span v-if="versions === false">⚠️ 数据加载异常</span>
+                    <span v-if="versions && !versions.length">💧 暂无数据</span>
+                </div>
+                <table v-if="versions && versions.length" class="m-histories">
+                    <tr>
+                        <th>版本</th>
+                        <th>更新时间</th>
+                        <th>贡献者</th>
+                        <th>修订说明</th>
+                    </tr>
+                    <tr class="history" v-for="(ver, key) in versions" :key="key">
+                        <td>
+                            <a
+                                :href="link(type, `${ver.source_id}/${ver.id}`)"
+                                v-text="'v' + (versions.length - key)"
+                                @click="redirectRevision(ver, $event)"
+                            ></a>
+                        </td>
+                        <td v-text="ts2str(ver.updated)"></td>
+                        <td>
+                            <a :href="ver.user_id ? author_url(ver.user_id) : null" v-text="ver.user_nickname"></a>
+                        </td>
+                        <td v-text="ver.remark"></td>
+                    </tr>
+                </table>
+            </div>
+        </template>
+    </WikiPanel>
+</template>
+
+<script>
+import WikiPanel from "./WikiPanel";
+import { wiki } from "@jx3box/jx3box-common/js/wiki";
+import { getLink, authorLink, ts2str } from "@jx3box/jx3box-common/js/utils";
+import jx3box from "@jx3box/jx3box-common/data/jx3box.json";
+const { __Root, __OriginRoot } = jx3box;
+
+export default {
+    name: "WikiRevisions",
+    props: {
+        type: {
+            type: String,
+            default: "",
+        },
+        sourceId: {
+            type: [String, Number],
+            default: "",
+        },
+        isGame: {
+            type: [Boolean, Number],
+            default: false,
+        },
+    },
+    data: function () {
+        return {
+            versions: [],
+        };
+    },
+    computed: {
+        client: function () {
+            return location.href.includes("classic") || location.href.includes("origin") ? "origin" : "std";
+        },
+        baseUrl: function () {
+            return this.client == "origin" ? __OriginRoot : __Root;
+        },
+        prefix: function () {
+            if (this.isGame) {
+                return this.baseUrl.slice(0, -1);
+            } else {
+                return "";
+            }
+        },
+    },
+    methods: {
+        link: function (type, id) {
+            return this.prefix + getLink(type, id);
+        },
+        author_url: function (uid) {
+            return this.prefix + authorLink(uid);
+        },
+        ts2str,
+        redirectRevision: function (ver, e) {
+            if (!this.isGame && this.$router) {
+                e.preventDefault();
+                this.$router.replace({ path: `/view/${ver.source_id}/${ver.id}` });
+            }
+        },
+    },
+    components: {
+        WikiPanel,
+    },
+    watch: {
+        sourceId: {
+            immediate: true,
+            handler() {
+                if (this.sourceId) {
+                    wiki.versions({ type: this.type, id: this.sourceId }, { client: this.client }).then(
+                        (res) => {
+                            res = res.data;
+                            this.versions = res.data || [];
+                        },
+                        () => {
+                            this.versions = [];
+                        }
+                    );
+                }
+            },
+        },
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/wiki/wiki-revisions.less";
+</style>

package/vue.config.js

@@ -14,18 +14,6 @@ module.exports = {
             filename: "index.html",
             title: "JX3BOX",
         },
-        article: {
-            title: "Article",
-            entry: "demo/A.js",
-            template: "public/article.html",
-            filename: "article/index.html",
-        },
-        tinymce: {
-            title: "Tinymce",
-            entry: "demo/T.js",
-            template: "public/tinymce.html",
-            filename: "tinymce/index.html",
-        },
     },
 
 
@@ -138,6 +126,8 @@ function buildEnvProxy() {
                 target: normalized,
                 changeOrigin: true,
                 secure: false,
+                // API 代理不需要 websocket，避免给 dev server 叠加 upgrade 监听器
+                ws: false,
                 cookieDomainRewrite: "",
                 pathRewrite: (p) => p.replace(contextRe, ""),
             },

package/assets/css/common/bottom.less

@@ -1,25 +0,0 @@
-@gray: #888;
-@space: 20px;
-@pink: #f39;
-
-.m-bottom {
-    /* assets/css/common/bottom.less */
-    font-size: 12px;
-    color: @gray;
-    margin-top: @space;
-    font-family: verdana, "Trebuchet MS", Tahoma;
-
-    a {
-        /* assets/css/common/bottom.less */
-        color: @gray;
-        &:hover {
-            /* assets/css/common/bottom.less */
-            color: @pink;
-        }
-    }
-
-    .u-feedback {
-        /* assets/css/common/bottom.less */
-        float: right;
-    }
-}

package/assets/css/editor/article.less

@@ -1,36 +0,0 @@
-// tinymce文章样式
-
-@import "../tinymce/_.less";
-@import "../tinymce/a.less";
-@import "../tinymce/list.less";
-@import "../tinymce/quote.less";
-@import "../tinymce/hr.less";
-@import "../tinymce/table.less";
-@import "../tinymce/img.less";
-@import "../tinymce/p.less";
-@import "../tinymce/h.less";
-@import "../tinymce/code.less";
-@import "../tinymce/fold.less";
-@import "../tinymce/plugin.less";
-@import "../tinymce/imgpreview.less";
-@import "../tinymce/latex.less";
-@import "../tinymce/nextpage.less";
-
-@import "../module/macro.less";
-@import "../module/talent.less";
-
-@import "../tinymce/video.less";
-@import "../tinymce/macro.less";
-@import "../tinymce/qixue.less";
-@import "../tinymce/pz.less";
-@import "../tinymce/combo.less";
-
-@import "../module/directory.less";
-@import "../module/icon.less";
-@import "../module/resource.less";
-@import "../module/jx3_element.less";
-
-@import "../module/buff.less";
-@import "../module/skill.less";
-@import "../module/item.less";
-@import "../module/npc.less";